:root {
    --color-primario: #2b2e91;
    --color-secundario: #D7B578;
}

.page-content {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mw-100 {
    max-width: 100% !important;
}

.text-right {
    text-align: right !important;
}

.btn-danger {
    background-color: #BF0F0F !important;
}

.btn-success {
    background-color: #038C8C !important;
}

.table-size {
    table-layout: fixed;
    width: 100%;
}

.td-100 {
    width: 100px;
    word-wrap: break-word;
}

.font-15 {
    font-size: 15px !important;
}

.float-right {
    float: right;
}

.btn-wt-100 {
    width: 100px !important;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-10 {
    margin-bottom: 10px;
}

.img-center {
    margin: auto;
    display: block;
}

.text-red {
    color: #A80F10 !important;
}

.text-success2 {
    color: #0AB39C !important;
}

.text-black {
    color: #000000 !important;
}

.a-info {
    color: #299CDB !important;
}

.text-align-right {
    text-align: right !important;
}

.mg-r-5 {
    margin-right: 5px !important;
}

.mg-l-5 {
    margin-left: 5px !important;
}

.thead-sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

.img-fluid-custom-150 {
    max-width: 100%;
    height: 150px;
}

.bg-gray {
    background-color: rgb(170, 170, 170);
}

.bg-gray.bg-opacity-50 {
    background-color: rgba(170, 170, 170, 0.5);
}

/*LOADING*/
.auth-bg-cover-mp {
    /*background: linear-gradient(-45deg, #0d6efd 50%, #198754)*/
    background: linear-gradient(-45deg, #A80F10 50%, #D90416)
}

.auth-bg-cover-mp > .bg-overlay {
    background-image: url(../images/cover-pattern.png);
    background-position: center;
    background-size: cover;
    opacity: 1;
    background-color: transparent
}

.auth-bg-cover-mp .footer {
    color: rgba(255, 255, 255, .5)
}

.text-loading-white {
    color: #ffffff;
}

.text-loading-red {
    color: #A80F0F;
}

dotlottie-player {
    display: block;
    margin: 0 auto;
}

.auth-bg-cover-mp2 {
    /*background: linear-gradient(-45deg, #0d6efd 50%, #198754)*/
    background: linear-gradient(-45deg, #F9D46B 50%, #F9D46B)
        /*background: #F9D46B;*/
}

.auth-bg-cover-mp2 > .bg-overlay {
    background-image: url(../images/cover-pattern.png);
    background-position: center;
    background-size: cover;
    opacity: 1;
    background-color: transparent
}

.auth-bg-cover-mp2 .footer {
    color: rgba(255, 255, 255, .5)
}

/*END LOADING*/


/*LOADERS*/
.pie-loader {
    width: 150px;
    aspect-ratio: 1;
    position: relative;
    margin: 50px 0;
}

.pie-loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    --c:#0000, var(--vz-header-bg) 1deg 120deg,#0000 121deg;
    background:
        conic-gradient(from 0deg,  var(--c)) top right,
        conic-gradient(from 120deg,var(--c)) bottom,
        conic-gradient(from 240deg,var(--c)) top left;
    background-size: 150px 150px;
    background-repeat: no-repeat;
    animation: l25 2s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes l25 {
    33%  {inset:-8px;transform: rotate(0deg)}
    66%  {inset:-8px;transform: rotate(180deg)}
    100% {inset:0   ;transform: rotate(180deg)}
}

.table-loader {
    width: 130px;
    height: 130px;
    --c:no-repeat linear-gradient(var(--vz-header-bg) 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 65px 65px;
    animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
    margin: 50px auto;
}

@keyframes l5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:170px;height: 170px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:170px;height: 170px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.column-loader {
    width: 150px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(var(--vz-header-bg) 0 0);
    background: 
      var(--c) 0%   100%,
      var(--c) 50%  100%,
      var(--c) 100% 100%;
    animation: l2 1s infinite linear;
}

@keyframes l2 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    20% {background-size: 20% 60% ,20% 100%,20% 100%}
    40% {background-size: 20% 80% ,20% 60% ,20% 100%}
    60% {background-size: 20% 100%,20% 80% ,20% 60% }
    80% {background-size: 20% 100%,20% 100%,20% 80% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}
/*END LOADERS*/


/*PAGINACION DATATABLE*/
.paginas-datatable {
    margin-top: 8px;
}

/*END PAGINACION DATATABLE*/
.fila-scroleable {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
    padding-top: 5px;
}

.fila-scroleable::-webkit-scrollbar {
    height: 8px;
    background-color: #aaa;
    border-radius: 4px;
}

.fila-scroleable::-webkit-scrollbar-thumb {
    background: #A70F10;
    border-radius: 5px;
}

.fila-scroleable-vertical {
    overflow: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.fila-scroleable-vertical > * {
    margin-top: 0;
}

.fila-scroleable-vertical::-webkit-scrollbar {
    width: 8px;
    background-color: #aaa;
    border-radius: 4px;
}

.fila-scroleable-vertical::-webkit-scrollbar-thumb {
    background: #A70F10;
    border-radius: 4px;
}

.avatar-xxl {
    height: 10rem;
    width: 10rem;
}

.start-33 {
    left: 33% !important;
}

.start-66 {
    left: 66% !important;
}

/* FORM VALIDATION */
.input-control.correct input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control.warning input {
    border-color: #f7b84b;
}

.input-control.correct textarea {
    border-color: #09c372;
}

.input-control.error textarea {
    border-color: #ff3860;
}

.input-control.correct select {
    border-color: #09c372;
}

.input-control.error select {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 12px;
    height: 13px;
}
/* FORM VALIDATION ENDS */

.navbar-menu .navbar-nav .nav-link.active{
    color: var(--color-secundario);
}

.restricted-card {
    filter: blur(5px);
    pointer-events: none;
}

.blur-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    color: #333;
    z-index: 500;
}