@import './custom-fonts.css';
@import './custom-checkbox.css';

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
}
.clear-both{
    clear: both;
}
.reporte-item{
    cursor: pointer !important;
    margin-bottom: 5px;
}

.reporte-item .card{
    text-align: center;
    cursor: pointer !important;
    transition: 250ms;
    padding-top: 15px;
}
.reporte-item:hover .card{
    box-shadow: 500px 0px rgba(73, 96, 170,0.6) inset;
    transition: 250ms;
    color: white;
}

.reporte-item.active .card{
    background-color: #4960aa;
    color: white;
    font-weight: bold;
    transition: 300ms;
}

.reportes-section label{
    font-weight: bold;
}

.h1-icon{
    font-size: 2.5rem !important;
}

.btn-excel, btn-excel:hover{
    background-color: #1c7430 !important;
    color: white !important;
}

.canvas-chart{
    max-width: 50%;
    min-width: 50%;
    min-height: 50vh;
    max-height: 50vh;
}



table.dataTable,
table.dataTable th,
table.dataTable td {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.text-15{
    font-size: 15px;
}

.text-20{
    font-size: 20px !important;
}

.btn.btn-outline-success-2 {
    color: #168c31 !important;
    border-color: #168c31 !important;
}
.btn-success-2 {
    background-color: #168c31 !important;
    color: white !important;
}

/* Pick List */


.picklist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.picklist .select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 40%;
}

.picklist .select p {
    margin: 0;
    font-weight: 500;
}

.picklist .button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 5px;
}

.picklist select {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.375rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    overflow: auto;
}
@media (max-width: 768px){ 
    .picklist{
        flex-direction: column;
        row-gap: 2rem;
    }
    .picklist .select{
        width: 100%;
    }
}


/* SPINNER LOADER */

@keyframes ldio-0d08n3w3k4bv {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
.ldio-0d08n3w3k4bv div {
    left: 95.475px;
    top: 39.19499999999999px;
    position: absolute;
    animation: ldio-0d08n3w3k4bv linear 0.8620689655172413s infinite;
    background: #233b91;
    width: 10.049999999999999px;
    height: 18.089999999999996px;
    border-radius: 5.0249999999999995px / 9.044999999999998px;
    transform-origin: 5.0249999999999995px 61.30499999999999px;
}.ldio-0d08n3w3k4bv div:nth-child(1) {
     transform: rotate(0deg);
     animation-delay: -0.7836990595611284s;
     background: #233b91;
 }.ldio-0d08n3w3k4bv div:nth-child(2) {
      transform: rotate(32.72727272727273deg);
      animation-delay: -0.7053291536050156s;
      background: #233b91;
  }.ldio-0d08n3w3k4bv div:nth-child(3) {
       transform: rotate(65.45454545454545deg);
       animation-delay: -0.6269592476489028s;
       background: #233b91;
   }.ldio-0d08n3w3k4bv div:nth-child(4) {
        transform: rotate(98.18181818181819deg);
        animation-delay: -0.54858934169279s;
        background: #233b91;
    }.ldio-0d08n3w3k4bv div:nth-child(5) {
         transform: rotate(130.9090909090909deg);
         animation-delay: -0.47021943573667707s;
         background: #233b91;
     }.ldio-0d08n3w3k4bv div:nth-child(6) {
          transform: rotate(163.63636363636363deg);
          animation-delay: -0.3918495297805642s;
          background: #233b91;
      }.ldio-0d08n3w3k4bv div:nth-child(7) {
           transform: rotate(196.36363636363637deg);
           animation-delay: -0.3134796238244514s;
           background: #233b91;
       }.ldio-0d08n3w3k4bv div:nth-child(8) {
            transform: rotate(229.0909090909091deg);
            animation-delay: -0.23510971786833854s;
            background: #233b91;
        }.ldio-0d08n3w3k4bv div:nth-child(9) {
             transform: rotate(261.8181818181818deg);
             animation-delay: -0.1567398119122257s;
             background: #233b91;
         }.ldio-0d08n3w3k4bv div:nth-child(10) {
              transform: rotate(294.54545454545456deg);
              animation-delay: -0.07836990595611285s;
              background: #233b91;
          }.ldio-0d08n3w3k4bv div:nth-child(11) {
               transform: rotate(327.27272727272725deg);
               animation-delay: 0s;
               background: #233b91;
           }
.loadingio-spinner-spinner-iuc5fm4rwy {
    width: 201px;
    height: 201px;
    display: inline-block;
    overflow: hidden;
    background: none;
}
.ldio-0d08n3w3k4bv {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-0d08n3w3k4bv div { box-sizing: content-box; }
/* generated by https://loading.io/ */
/* Nuevos estilos */
.tabla-container{
    margin-top: 3rem;
    height: 100%;
    overflow-y: auto;
}
@media (min-width: 768px){ 
    .tabla-container{
        /* height: calc(100vh - 305.6px); */
        margin-top: 2rem;
        height: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }
}
.tabla{
    width: 100%;
    border-collapse: collapse;
}
.tabla__head{
    position: sticky;
    top: 0;
}
.tabla__tr{
    background-color: #ecf0f1;
    text-align: left;
    border: 1px solid #7f8ae3;
}
.tabla__tr:nth-of-type(odd){
    background-color: #e5e7eb;
}
.tabla__th{
    color: black;
    font-size: 12px;
    text-align: left;
    padding: 10px 7px;
    background-color: white;
    position: relative;
    /* border-top: 2px solid #7a7a7a;
    border-bottom: 2px solid #7a7a7a; */
}
.tabla__th::after{
    position: absolute;
    content: '';
    background-color: #7f8ae3;
    width: 100%;
    height: 1px;
    top: -1px;
    left: 0;
}
.tabla__th::before{
    position: absolute;
    content: '';
    background-color: #7f8ae3;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
}
.tabla__td{
    padding: 10px 7px;
    color: #595a5b;
    font-size: 12px;
}
.tabla__td--opciones{
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    transition: all .5s ease-in-out;
}
.tabla__td--opciones a:hover{
    cursor: pointer;
    transform: scale(1.4);
}
.tabla__td--opciones a i{
    font-size: 1.4rem;
}
/* Responsive mobile */
@media (max-width: 668px){ 
.tabla__head{
    display: none;
}
.tabla__body, .tabla__tr, .tabla__td{
    display: block;
}
.tabla__tr{
    margin-bottom: 15px;
    border-radius: 5px;
}
.tabla__td{
    text-align: right;
    position: relative;
    font-size: 12px;
    font-weight: 500;
}
.tabla__td--opciones{
    display: flex;
    align-items: center;
    column-gap: 1rem;
    transition: all .5s ease-in-out;
}
.tabla__td--opciones a i{
    font-size: 1.8rem;
}
.tabla__td::before{
    content: attr(data-label);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    float: left;
    }
}
.search_input .select2-selection__rendered {
    line-height: 28px !important;
}
.search_input .select2-container .select2-selection--single {
    height: 50px !important;
}

.select2-selection.select2-selection--multiple{
    height: auto !important;
}
/* Nuevos estilos */
:root{
    --main-blue: #2B80FF;
    --main-blue-secondary: #1b64f5;
    --main-dark-blue : #233b91;
    --main-gray: #96a5ba;
    --main-gray-secondary: #85888d;
    --white-hsl: hsl(0, 0%, 100%);
    --main-green: #05b02a;
    --main-green-secondary: #048422;
}
/* Utilidades */
.main-title{
    font-size: clamp(2rem, 1.913rem + 0.4348vi, 2.25rem);
    font-weight: 600;
    margin-block: 2rem;
    color: #454C52;
}
.sub-title {
    font-size: clamp(1.5625rem, 1.4973rem + 0.3261vi, 1.75rem);
    font-weight: 500;
    margin-block: 1.5rem;
    color: #2355b9 !important;
    text-transform: uppercase;
}
.r-gap-1{
    row-gap: 1rem;
}
.r-gap-2{
    row-gap: 2rem;
}
.r-gap-3{
    row-gap: 3rem;
}
.c-gap-1{
    column-gap: 1rem;
}
.position-search{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(0, 25%);
}
.contador{
    color: #6B6C6E;
    font-weight: 400;
    font-size: 12px;
}
.icon-small{
    width: 25px;
    height: 25px;
    font-size: 18px;
}
.color-success{
    color: var(--main-green) !important;
}
.color-danger{
    color: #E53935 !important;
}
.color-warning{
    color: #f39c12 !important;
}
.color-primary{
    color: var(--main-blue) !important;
}
.color-gray{
    color: var(--main-gray);
}
.form-control{
    color: #575757 !important;
    border: 1px solid var(--main-gray) !important;
}
.form-control:focus{
    border: 1px solid var(--main-blue) !important;
}
.form-control::placeholder{
    color: #575757 !important;
    /* text-transform: capitalize !important; */
}
.col-form-label{
    font-weight: bold !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
.btn-primary{
    background-color: var(--main-blue) !important;
    border: 1px solid var(--main-blue) !important;
    color: var(--white-hsl) !important;
    font-weight: 600 !important;
}
.btn-primary:hover{
    background-color: var(--main-blue-secondary) !important;
}
.btn-outline-primary{
    color: var(--main-blue) !important;
    background-color: var(--white-hsl) !important;
    border: 1px solid var(--main-blue) !important;
}
.btn-outline-primary img{
    filter: brightness(0) saturate(100%) invert(51%) sepia(66%) saturate(6286%) hue-rotate(207deg) brightness(106%) contrast(101%);
}
.btn-outline-primary:hover{
    color: var(--white-hsl) !important;
    background-color: var(--main-blue) !important;
}
.btn-outline-primary:hover img{
    filter: brightness(0) saturate(100%) invert(89%) sepia(100%) saturate(1%) hue-rotate(272deg) brightness(110%) contrast(97%);
}
.btn-outline-primary:focus{
    color: var(--white-hsl) !important;
    background-color: var(--main-blue) !important;
}
.btn-outline-primary:focus img{
    filter: brightness(0) saturate(100%) invert(89%) sepia(100%) saturate(1%) hue-rotate(272deg) brightness(110%) contrast(97%);
}
.btn-secondary{
    background-color: var(--main-gray) !important;
    color: var(--white-hsl) !important;
    border: 1px solid var(--main-gray) !important;
}
.btn-secondary:hover{
    background-color: var(--main-gray-secondary) !important;
}
.btn-outline-secondary{
    background-color: var(--white-hsl) !important;
    color: var(--main-gray) !important;
    border: 1px solid var(--main-gray) !important;
}
.btn-outline-secondary:hover{
    color: var(--white-hsl) !important;
    background-color: var(--main-gray-secondary) !important;
}
.btn-success{
    background-color: var(--main-green) !important;
    color: var(--white-hsl) !important;
    border: 1px solid var(--main-green) !important;
}
.btn-success:hover{
    background-color: var(--main-green-secondary) !important;
}
.btn-outline-success{
    background-color: var(--white-hsl) !important;
    color: var(--main-green) !important;
    border: 1px solid var(--main-green) !important;
}
.btn-outline-success:hover{
    color: var(--white-hsl) !important;
    background-color: var(--main-green) !important;
}
/* Header */
.header-x{
    height: 100px;
    background-color: white;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
}
.header-x__logo{
    display: none;
    max-width: 220px;
    max-height: 100px;
}
@media (min-width: 768px){ 
    .header-x{
        position: unset;
        z-index: 0;
    }
    .header-x__logo{
        display: block;
        max-width: 220px;
    }
    .header-x__user{
        min-width: 350px;
    }
}
@media (min-width: 768px){ 

}
.header-x__user a{
    display: flex;
    align-items: center;
    column-gap: 1rem;
    color: black;
}
.header-x__user a:hover{
    text-decoration: none;
}
.header-x__user i{
    font-size: 2.82rem;
    color: #c8c6d5;
}
.header-x__user-name{
    font-weight: 600;
    font-size: var(--step-0);
    margin-bottom: 0;
    text-align: end;
}
.header-x__user-name span{
    color: #2B80FF;
}
/* Contenedor Principal */
.container-grid-x{
    display: grid;
}
@media (min-width: 992px){ 
    .container-grid-x{
        grid-template-columns: 230px 1fr;
    }
}
.backdrop-x{
    position: fixed;
    z-index: 100;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}
.backdrop-x::after{
    content: 'X';
    color: white;
    position: absolute;
    top: 4rem;
    right: 2rem;
    font-size: 3.5rem;
    font-weight: 500;
}
.overflow-hidden-dash{
    overflow-y: hidden;
}
@media (min-width: 992px){ 
    .backdrop-x{
        position: unset;
    }
    .backdrop-x::after{
        content: '';
    }
    .overflow-hidden-dash{
        overflow-y: auto;
    }
}
/* Aside lateral styles */
.aside-x{
    height: 100%;
    background-color: #EEEFF0;
    padding-inline: 1rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    overflow-y: auto;
    position: fixed;
    width: 75%;
    top: 0;
    left: -100%;
    z-index: 101;
    transition: all 200ms ease;
    opacity: 0;
}
.aside-x--active{
    left: 0;
    opacity: 1;
}
@media (min-width: 992px){
    .aside-x{
        height: calc(100vh - 100px);
        position: unset;
        width: 100%;
        opacity: 1;
    }
}
.aside-x__ul{
    list-style: none;
    padding: 0;
    display: grid;
    row-gap: 2rem;
}
.aside-x__ul--sub{
    row-gap: 0;
    padding-left: 1.2rem;
    margin-top: 1rem;
}
.aside-x__li{
    padding: .5rem;
    border-radius: 5px;
}
.chevron-rotate{
    transition: transform 150ms ease-in-out;
    margin-left: auto;
}
.chevron-rotate.active{
    transform: rotate(90deg);
}
.aside-x__li a{
    display: flex;
    align-items: center;
    column-gap: .6rem;
}
.aside-x__li:hover a{
    text-decoration: none;
}
.aside-x__li a p{
    flex-grow: 1;
    font-size: 18px;
}
@media (min-width: 768px){ 
    .aside-x__li a p{
        font-size: 12px;
    }
}
.aside-x__li a p:hover{
    color: #2B80FF;
}
.aside-x__li:hover{
    cursor: pointer;
    background-color: #D4DAE1;
}
.aside-x__li--active{
    background-color: #D4DAE1;
}
.aside-x p{
    margin-bottom: 0;
    color: #454C52;
    font-weight: 500;
    font-size: 12px;
}
.aside-x__li i{
    color: #454C52;
}
.aside-x__li :is(img,svg){
    width: 25px;
    height: 25px;
}
@media (min-width: 768px){ 
    .aside-x__li :is(img,svg){
        width: 21px;
        height: 21px;
    }
}
/* Main styles menu */
.main-x{
    padding-inline: 3vw;
    padding-block: 10px;
    height: 100%;
    overflow-y: auto;
}
@media (min-width: 992px){ 
    .main-x{
        padding-inline: 2vw;
        height: calc(100vh - 100px);
    }
}
/* Nueva tables */
.table-x{
    width: 100%;
    border-radius: 5px;
    border-collapse: collapse;
    /* overflow: hidden; */
    box-shadow: 0px 2px 3px 0px #00000014;
}
.table-x__head{
    position: sticky;
    top: -10px;
    background-color: var(--white-hsl);
    z-index: 99;
    box-shadow: 1px 3px 7px 0px rgb(147 147 147 / 10%);
}
.table-x__tr{
    background-color: var(--white-hsl);
    text-align: left;
    /* border: 1px solid #ffffff; */
}
.table-x__tr:nth-of-type(odd){
    background-color: #f3f5fb;
}
.table-x__tr:hover{
    background-color: #e2e8f3;
}
.table-x__tr--totales td {
    background-color: #e2e8f3;
    color: #2255b9;
    font-weight: 700;
}
.table-x__tr.warning .table-x__td {
    background-color: #ffdcd3;
}
.table-x__th{
    color: #2355b9;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    padding: 15px 10px;
    background-color: #e2e8f3;
    position: relative;
}
.table-x__th:last-of-type{
    border-right: 2px solid #e2e8f3;
  }
/* .table-x__th::after{
    position: absolute;
    content: '';
    background-color: #e8e8e8;
    width: 100%;
    height: 1px;
    top: 0px;
    left: 0;
}
.table-x__th::before{
    position: absolute;
    content: '';
    background-color: #e8e8e8;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
} */
.table-x__th--inside{
    background-color: #CFCFCF;
    color: #252525;
}
.table-x__tr--active .table-x__td {
    background-color: var(--main-gray);
        color: var(--light);
        font-weight: 700;
}
.table-x__td{
    padding: 12px 10px;
    color: #6B6C6E;
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #e2e8f3;
}
.table-x__td--w15 {
    width: 15vw;
}
.table-x__td--opciones{
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 0px;
    flex-wrap: wrap;
    min-width: 13vw;
}
.table-x__td--opciones2{
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 0px;
    flex-wrap: wrap;
}
.table-x__td--buttons {
    display: inline-flex;
    gap: 20px;
}
.table-x__td--opciones img:hover, .table-x__td--opciones i:hover{
    transform: scale(1.2);
}
.table-x__td--inside{
    border: 1px solid #e8e8e8;
}
/* Responsive mobile */
@media (max-width: 668px){ 
    .table-x__head{
        display: none;
    }
    .table-x__body, .table-x__tr, .table-x__td{
        display: block;
    }
    .table-x__tr{
        margin-bottom: 15px;
        border-radius: 5px;
    }
    .table-x__tr:nth-of-type(odd){
        background-color: #f3f5fb;
    }
    .table-x__td{
        text-align: right;
        position: relative;
        font-size: 12px;
        min-height: 40px;
        font-weight: 500;
    }
    .table-x__td:last-of-type{
        border-bottom: none;
    }
    .table-x__td::before{
        content: attr(data-label);
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        float: left;
    }
    .table-x__td--spaceMob::before{
        padding-right: 30px;
    }
    .table-x__td--opciones{
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 2em;
        font-size: 110%;
    }
    .table-x__td--opciones .icon-small {
        scale: 120%;
    }
}
.tabs{
    --color-tab: #c9d2eb;
    --color-tab-active: #2b80ff;
    --rounded-tab: 5px;
    --space-bottom: 5px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    border-bottom: 2px solid var(--color-tab);
    padding-bottom: var(--space-bottom);
}
.tabs__btn{
    padding: 7px 10px;
    border: none;
    background-color: var(--color-tab);
    border-radius: var(--rounded-tab);
    position: relative;
}
.tabs__btn--active{
    background-color: var(--color-tab-active);
    color: var(--white-hsl);
}
.tabs__btn--active::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: var(--color-tab-active);
    left: 0;
    bottom: -7px;
    border-radius: var(--rounded-tab);
}
/* Dashboard estilos */
.dash-card{
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr;
    background-color: #0F2F60;
    border-radius: .5rem;
    height: 145px;
    color: white;
    overflow: hidden;
}
.dash-card--gray{
    background-color: #5D6469;
}
.dash-card--red{
    background-color: #B22828;
}
.dash-card__content{
    padding: 2rem;
    text-align: right;
}
.dash-card__content h4{
    font-size: 24px;
    font-weight: bold;
}
.dash-card__content p{
    font-weight: 600;
    font-size: 18px;
}
.dash-card__icon{
    position: relative;
    bottom: -15px;
    left: -40px;
}
.dash-table{
    background-color: #1C2228;
    border-radius: .5rem;
    color: white;
    padding: 1rem 0;
}
.dash-table__field{
    --color-adorno: rgba(255, 255, 255, 0.2);
    position: relative;
    font-weight: 500;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--color-adorno);
    margin-bottom: 0;
}
.dash-table__field--blue{
    color: #55A3F0;
}
.dash-table__field--gray{
    color: #9DA8B3;
    font-weight: 400;
}
.dash-table__field:last-child{
    border-bottom: none;
}
.bg-dash{
    background-color: #1C2228;
    color: #D9D9D9;
    border-radius: .5rem;
}
.dash-container-circle{
    display: flex;
    flex-direction: column;
    background-color: #1C2228;
    padding: 20px 0;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
}
.dash-table-container {
    box-shadow: 0px 0px 5px 3px #E5E5E5;
    border-radius: 10px;
    margin: 1.5rem 0;

    & .tabs__btn {
        background-color: #FFF;
        color: #A3A3A3;
    }

    & .tabs__btn--active {
        background-color: var(--main-blue);
        color: #FFF;
    }

    & table {
        border-collapse: collapse;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;

        & thead {
            background-color: #E5E5E5;
            color: #525252;

            & tr {
                border-radius: 10px 10px 0 0;

                & th {
                    padding: 1rem;
                    text-align: center;
                }
            }
        }

        & tbody {
            background-color: white;

            & tr {
                border: 1px solid #E5E5E5;

                & td {
                    text-align: center;
                    padding: 1rem;
                }
            }
        }
    }

    & span.date {
        min-width: 150px;
        background-color: #E5E5E5;
        padding: 5px 16px;
        border-radius: 15px;
        color: #525252;
        font-weight: 300;


        &::before {
            content: "\f133";
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            margin-right: 5px;
        }
    }
}
/* Responsive */
@media (max-width: 768px){ 
    .dash-table-container{
        margin: 1rem 0;
    }

    .dash-table-container table thead{
        display: none;
    }
    .dash-table-container table tbody tr td{
        display: block;
        text-align: right;
        position: relative;
        font-size: 12px;
    }
    .dash-table-container table tbody tr:nth-child(even){
        background-color: #f4f5f6;
    }

    .dash-table-container table tbody tr td::before{
        content: attr(data-label);
        font-weight: 700;
        font-size: 13px;
        line-height: 1;
        float: left;
    }
}
.dash-table-container__head{
    background-color: var(--main-blue);
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 1.5rem 2.35rem;
    & h2 {
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 0;
        & span {
            background-color: #FFFC;
            color: var(--main-blue);
            padding: 0.2rem 0.4rem;
            border-radius: 6px;
            margin-right: 5px;
        }
    }
}
.dash-table-container__body {
    padding: 1.75rem;
}
.circular-progress{
    position: relative;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: conic-gradient(#55A3F0 3.6deg, #1C2228 0deg);
    display: flex;
    justify-content: center;
    align-items: center;
}
.circular-progress::after{
    content: "";
    position: absolute;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: #1C2228;
}
.progress-value{
    font-size: 40px;
    font-weight: 600;
    color: white;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 0;
}
.progress-value::after{
    content: 'Usuarios';
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    font-size: 18px;
}
.bg-flash{
    background-color: #f1f2f6;
}
.rounded-10{
    border-radius: 10px;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    border: none !important;
    width: 100% !important;
}
.select2.select2-container.select2-container--default{
    width: 100% !important;
}
.form-control-color {
    padding: 0.1rem !important;
}
.text-small {
    font-size: 0.9em;
}
.rojo .text-success {
    color: #0a9949 !important;
}
.text-success-2 {
    color: #178939 !important;
}
.preview-img {
    width: 100%;
    display: flex;
    margin: auto;
    object-fit: contain;
}
@media (min-width: 800px) {
    .preview-img {
        max-height: 50vh;
    }
}
.vr {
    width: 1px;
    background: var(--main-gray);
    margin: 0 .7rem;
    align-self: stretch;
}
.container-instalador{
    min-height: 100%; 
    overflow-y: scroll;
    max-height: 500px;
}
@media (min-width: 992px){ 
    .container-instalador{
        max-height: 300px;
    }
}
@media (max-width: 992px){ 
    .m-scroll-top{
        left: 20px;
        right: 0;
        background: #f1f2f655 !important;
        border: 1px solid var(--main-gray);
        display: grid !important;
        place-items: center !important;
        padding-top: 0px !important;
        z-index: 90 !important;
    }
}
/* Zonas y Odbs */
.lista-zonas ul{
    list-style: none;
    padding-left: 0;
    display: grid;
    row-gap: 1rem;
    /* -- Maybe Scroll -- */
    /* height: calc(100vh - 273.4px); */
    height: calc(100vh - 313.0833px);
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 0;
}
.lista-zonas ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: all 70ms ease;
}
.lista-zonas ul li:hover{
    background-color: #CFCFCF;
    padding-left: .725rem;
    border-radius: 5px;
}
.lista-zonas ul li.active{
    --rounded-li-active: 5px; 
    --color-li: #CFCFCF;
    background-color: var(--color-li);
    /* border-top-right-radius: var(--rounded-li-active);
    border-bottom-right-radius: var(--rounded-li-active); */
    border-radius: var(--rounded-li-active);
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    padding-left: .725rem;
}
.lista-zonas ul li.active::after{
    --size: 25px;
    content: '';
    position: absolute;
    top: 0;
    left: -25px;
    background-color: var(--color-li);
    clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
    height: 100%;
    width: var(--size);
    transform: rotate(180deg);
}
.lista-zonas a{
    color: #252525;
    font-weight: 500;
    text-decoration: none !important;
}
.lista-zonas a img:hover{
    transform: scale(1.2);
}
.icon-big{
    font-size: 32px !important;
}
.border-gray{
    border: 1px solid var(--main-gray) !important;
}
.drop-options-table{
    overflow-y: auto;
    height: 300px;
}
.drop-table-check{
    width: 20px;
    height: 20px;
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #cfcfcf !important;
    color: black !important;
}
.select2-container--default:hover .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #ecf0f1 !important;
    color: black;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 19px !important;
}
.select2-container--default .select2-selection--single{
    border: 1px solid #ebedf2 !important;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{
    padding-bottom: 0;
}
.select2-container .select2-search--inline .select2-search__field{
    min-height: 38px;
    width: 100% !important;
    position: absolute;
    z-index: -1;
    padding-bottom: 0;
}

@media (max-width: 768px){ 
    .w-100-mob{
        width: 100%;
    }
}
@media (max-width: 768px){ 
    input[type='checkbox']{
        font-size: 2rem;
        width: 23px;
        height: 23px;
    }

}

.text-at {
    color: #267dc5;
    font-weight: 600;
    font-size: 93%;
    font-style: italic;
}
.text-orange {
    color: #ff6100 !important;
}
.text-gray {
    color: lightslategray;
}
.btn.btn-custom {
    background: #7474BF;
    background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
    background: linear-gradient(to right, #348AC7, #7474BF);
    color: #fff;
}
.btn.btn-custom:hover {
    background: -webkit-linear-gradient(to left, #348AC7, #7474BF);
    background: linear-gradient(to left, #348AC7, #7474BF);
}
/* Custom check */
.card-radio{
    padding: .7rem .3rem;
    border-radius: .325rem ;
    background-color: #6d6d6d;
    position: relative;
  }
.card-radio__label{
    color: var(--white-hsl);
    padding-bottom:  0;
    font-weight: 600;
    margin-bottom: 0;
    font-size: clamp(0.75rem, 0.663rem + 0.4348vi, 1rem);
}
.card-radio__input{
    position: absolute;
    inset: 0;
    opacity: 0;
}
.card-radio:has(.card-radio__input:checked){
    background-color: var(--main-blue);
}
.card-radio__text{
    color: var(--white-hsl);
}
/* New tabs steps styles */
.steps-x{
    margin-top: 2rem;
}
.steps-x__header{
    display: flex;
    justify-content: center;
    column-gap: 1.6rem;
}
@media (min-width: 668px){ 
    .steps-x__header{
        column-gap: 3rem;
    }
}
.steps-x__state{
    --size: 50px;
    border: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: #9D9D9D;
    color: white;
    font-size: 1.2rem;
    position: relative;
    cursor: default !important;
    transition: background-color 300ms ease;
}
.button-IEPS {
    margin-top: 10px;
}

.dropdown-IEPS {
    margin-left: auto !important;
    margin-right: 10px !important;
}
.steps-x__state--active{
    background-color: #2B80FF;
}
.steps-x__state--active::after{
    content: '';
}
@media (min-width: 768px){ 
    .steps-x__state--active::after{
        content: attr(data-label);
        position: absolute;
        bottom: -4rem;
        left: 50%;
        transform: translateX(-50%);
        color: #2B80FF;
        font-size: 14px;
    }
}
.steps-x__container{
    margin-block: 5rem;
    padding: 1.5rem 1rem;
    margin-inline: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    display: grid;
}
@media (min-width: 668px){ 
    .steps-x__container{
        margin-block: 6rem;
        padding: 3rem 5rem;
    }
}
.steps-x__content{
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}
.steps-x__footer{
    display: flex;
    column-gap: 1rem;
    justify-content: end;
    margin-top: 2rem;
    padding-inline: 15px;
}
.steps-x__title{
    font-size: 32px;
    text-align: center;
    font-weight: 500;
}
.steps-x__btn{
    border: none;
    background-color: #2B80FF;
    display: inline-block;
    min-height: 40px;
    color: white;
    padding: .7rem 1rem;
    border-radius: .3rem;
    justify-self: end;
    align-self: end;
    max-width: 150px;
    margin-top: 1rem;
}
.steps-x__btn--back{
    color: #6B6C6E;
    background-color: transparent;
}

.custom-card-ingresos {
    border-radius: 10px;
    border: solid #5c9ff7 2px;
    padding: 1rem;
    background-color: #cdf;
}
.sticky-step{
    position: sticky;
    top: -10px;
    z-index: 10;
    background-color: #f2f2f2;
    padding-inline: 5px ;
}
.pulse-x{
    animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(43 128 255 / 0.3);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(0 0 0 / 0);
    }
}
.text-secondary {
    color: #888888 !important
}
.alert-success{
    background-color: #d7f7d0 !important;
    color: #1f5a1a !important;
    border: 1px solid #4cd137 !important;
}
.alert-blue{
    background-color: #d0e3f7 !important;
    color: #0d4185 !important;
    border: 1px solid #3763d1 !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 9;
}

.verde{
    background-color: #bff9c3 !important;
}
.rojo{
    background-color: #fbb3b3b0 !important;
}
.border-bottom-custom {
	border-bottom: 1px #00000063 dashed !important;
}
.divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #c6fcff, #007bff, #c6fcff);
    margin: 20px 0;
    border-radius: 5px;
}
.newItemInput {
    background-color: #d6ffd6;
    color: #307813 !important;
    font-weight: bold;
}
@media (min-width: 768px) {
    .text-md-nowrap {
      white-space: nowrap !important;
    }
}
.font-smaller {
    font-size: 90% !important;
}


#service-details h5 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    font-weight: 800;
}

#service-details p {
    margin: 8px 0;
    color: #555;
    font-size: 1em;
}

#service-details span {
    color: #007bff;
    font-weight: 700;
    font-size: 1.1em;
    display: inline-block;
    min-width: 100px;
}

.card-dash{
    background-color: #f4f4f4;
    border-radius: .625rem;
    padding: 1rem;
    min-height: 130px;
    & p{
        font-weight: 500;
        color: #434f61;
        font-size: 16px;
    }
    & h3{
        font-weight: 600;
        font-size: 26px;
    }
    & span{
        color: #434f61;
        font-size: 14px;
        font-weight: 600;
        &:first-of-type{
            margin-top: 1rem;
        }
        & b{
            font-weight: 400;
            font-size: 12px;
        }
    }
    & canvas{
        max-width: 100%;
    }
}
:is(.bg-pagado, .bg-pendiente, .bg-pagado-mes, .bg-reporte-atendido, .bg-reporte-pendiente, 
.bg-reporte-mes, .bg-instalada, .bg-instalada-pendiente, .bg-instalada-mes, .bg-clientes,
.bg-clientes-tv, .bg-clientes-internet, .bg-clientes-phone, .bg-cosmo, .bg-chuli){
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50% 100%;
}
.bg-pagado{
    background-image: url('../img/svg/dashboard/pagado_dash.svg');
}
.bg-pendiente{
    background-image: url('../img/svg/dashboard/pendiente_dash.svg');
}
.bg-pagado-mes{
    background-image: url('../img/svg/dashboard/mes_pagado_dash.svg');
}
.bg-reporte-atendido{
    background-image: url('../img/svg/dashboard/reporte_atendido_dash.svg');
}
.bg-reporte-pendiente{
    background-image: url('../img/svg/dashboard/reporte_pendiente_dash.svg');
}
.bg-reporte-mes{
    background-image: url('../img/svg/dashboard/reporte_mes_dash.svg');
}
.bg-instalada{
    background-image: url('../img/svg/dashboard/instalacion_atendida_dash.svg');
}
.bg-instalada-pendiente{
    background-image: url('../img/svg/dashboard/intalacion_pendiente_dash.svg');
}
.bg-instalada-mes{
    background-image: url('../img/svg/dashboard/instalacion_total_dash.svg');
}
.bg-clientes{
    background-image: url('../img/svg/dashboard/clientes_dash.svg');
}
.bg-clientes-tv{
    background-image: url('../img/svg/dashboard/clientes_tv_dash.svg');
}
.bg-clientes-internet{
    background-image: url('../img/svg/dashboard/clientes_internet_dash.svg');
}
.bg-clientes-phone{
    background-image: url('../img/svg/dashboard/clientes_phone_dash.svg');
}
.bg-cosmo{
    background-image: url('../img/svg/dashboard/cosmo_dash.svg');
}
.bg-chuli{
    background-image: url('../img/svg/dashboard/chuliphone_dash.svg');
}
/* Estilo general del chat */
.chat-bubble {
    position: fixed;
        bottom: 0;
        right: 0;
        width: 320px;
    max-height: 60vh;
        /* Cambiado a vh para que se adapte a la pantalla */
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        border: 1px solid #ddd;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
    transition: all 0.3s ease-in-out;
    z-index: 99;
        /* Agregado para animaciones */
    }
    
    /* Estilo del encabezado del chat */
    .chat-header {
    background: #007bff;
        border-radius: 20px 20px 0 0;
        font-size: 16px;
    padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
    }
    
    .chat-header::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: #007bff;
        border-radius: 50%;
        margin-right: 10px;
    }
    
    /* Estilo del cuerpo del chat */
    .chat-body {
    display: flex;
    flex-direction: column;
        height: 100%;
    padding: 10px;
        box-sizing: border-box;
    overflow-y: auto;
    flex-grow: 1;
        /* Agregado para que se pueda scrollear */
    }
    
    /* Contenedor de mensajes */
    .messages {
    flex: 1;
    margin-bottom: 10px;
    }
    
    /* Estilo de los mensajes */
    .message {
    margin: 5px 0;
    padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .sent {
    background: #e1ffc7;
        color: #333;
        align-self: flex-end;
        border: 1px solid #b8e07d;
    }
    
    .sent::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: #e1ffc7;
        border-radius: 50%;
        margin-right: 10px;
    }
    .received {
    background: #d1e3ff;
        color: #333;
        align-self: flex-start;
        border: 1px solid #a5c2ff;
    }
    
    .received::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: #d1e3ff;
        border-radius: 50%;
        margin-left: 10px;
    }
    .loading {
    color: #888;
        font-style: italic;
        margin-top: 10px;
    }
    
    /* Estilo del botón de apertura/cierre del chat */
    .chat-toggle {
    position: fixed;
        bottom: 20px;
        right: 20px;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    background: #007bff;
        color: #ffffff;
        transition: all 0.3s ease-in-out;
        z-index: 99;
        /* Agregado para animaciones */
    }
    
    .chat-toggle:hover {
    background-color: #0056b3;
    transform: scale(1.1);
        /* Agregado para animaciones */
    }
    
    .chat-toggle:active {
        transform: scale(0.9);
    }
    .svg-container {
        width: 30px;
        height: 30px;
    }
    .chat-toggle svg {
        width: 30px !important; /* Cambia a 30px */
        height: 30px !important; /* Cambia a 30px */
    }
    .chat-message {
        min-height: 50px;
    }

.custom-switch-lg {
    padding: 0;
}

.custom-switch-lg .custom-control-label {
    margin-top: 0.5rem;
    font-weight: 800;
}

.custom-switch-lg .custom-control-label::before {
    width: 3.75rem;
    height: 2rem;
    left: .5rem;
    border-radius: 1rem;
    top: 2rem;
}

.custom-switch-lg .custom-control-label::after {
    top: 2.2rem;
    left: calc(2.2rem + 2px);
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    background-color: #adb5bd;
    border-radius: 1rem;
}

.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
    -webkit-transform: translateX(-1.6rem);
    transform: translateX(-1.6rem);
}
@media (min-width:678px){
    .table-x.ticket_edit {
        & .table-x__td:nth-child(2):not([colspan]) input {
            width: 4rem !important;
        }
    
        & .table-x__td:nth-child(3) input,
        & .table-x__td:nth-child(4) input,
        & .table-x__td:nth-child(5) input {
            width: 7rem !important;
        }
    }
}

.row-deleted {
    & .table-x__td {
        color: #b70000;
        background-color: rgb(251, 212, 212);

        & input {
            background-color: transparent;
            color: currentColor !important;
            border: 1px solid currentColor !important;
        }
    }
}
.bg-gray {
    background-color: #d7d7d7 !important;
}

.info-details h5 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    font-weight: 800;
}

.info-details p {
    margin: 8px 0;
    color: #555;
    font-size: 1em;
}

.info-details span {
    color: #007bff;
    font-weight: 700;
    font-size: 1.1em;
    display: inline-block;
    min-width: 100px;
}

.online-header {
    background: linear-gradient(-90deg,#02178b,#0085ff,#c7e4fe, #fff) !important;
    & .header-x__user-name{
        color: var(--white-hsl);
        & span {
            /* color: #ff9999; */
            color: #ffc875;
        }
    }
}

form {
    &.ng-submitted label:has(~ .ng-invalid) {
        color: rgb(205, 0, 0); /* Cambia el color a rojo o el que desees */
    }
    & label:has(~ .ng-touched.ng-invalid) {
        color: rgb(205, 0, 0); /* Cambia el color a rojo o el que desees */
    }
    & label.col-form-label {
        color: #666;
        font-weight: 600 !important;
    }
}

.container-table-x{
    height: calc(100vh - 120px);
    overflow-y: auto;
}

.table-x__tr--editing {
    & input, & select {
        width: -webkit-fill-available;
        /* min-width: 150px !important; */
        padding: 5px;
        border: 0;
        border-bottom: 3px solid var(--main-gray-secondary);
        text-align: center;
    }

    & .prefixInput {
        min-width: unset !important;
        width: 5rem !important;
        background-color: #e9e9e9;
    }
}

@media (min-width: 768px) {
    .modal-xl {
      width: 90%;
     max-width:1200px;
    }
}

.credit-card {
    min-width: 300px;
    width: 100%;
    max-width: 350px;
    min-height: 150px;
    padding: 1.3rem;
    background: linear-gradient(91deg, #8ac169, #238d99);
    border-radius: 10px;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color:white;
    gap: 1rem;
    aspect-ratio : 5 / 3;
    position:relative;
    margin-bottom: 1.5rem;
}

.credit-card--bank {
    grid-area: 1 / 3 / 2 / 4;
    font-weight: 600;
    text-align: right;
}

.credit-card--number {
    grid-area: 2 / 1 / 3 / 4;
    font-weight: 700;
    font-size: 1.5em;
}

.credit-card--name { grid-area: 3 / 1 / 4 / 3; }

.credit-card--expiration {
    grid-area: 4 / 1 / 5 / 2;
    font-weight: 800;
}

.credit-card--brand {
    grid-area: 4 / 3 / 5 / 4;
    text-align: end;
    &::before {
        content: attr(data-type);
        font-weight: 600;
    }
}

.credit-card[data-brand="visa"] { background: linear-gradient(91deg, #3240ba, #192061);}
.credit-card[data-brand="american express"] { background: linear-gradient(91deg, #6CC4EE, #9BD4F5, #27AEE3, #1D8ECE, #2E77BB);}
.credit-card[data-brand="mastercard"] { background: linear-gradient(-91deg, #EB001B, #FF5F00, #F79E1B);}
.credit-card[data-brand="carnet"] { background: linear-gradient(-91deg, #bf00be, #a126ff, #7659ff);}

.credit-card--actions {
    display: contents;

    & .btn-danger {
        background-color: red;
        border-color: red;
    }

}

.header {
    margin-bottom: 1.5rem;
}

.custom-card-control {
    background-color: #f3f5fb;
    box-shadow: 0px 3px 3px -2px #2a49dd75;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.75em;

    & .card-header {
        background-color: #e2e8f3;
        color: #2255b9;
        font-size: larger;
        font-weight: 500;
    }
}
.custom-card {
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    overflow: hidden;

    & .form-check-label {
        font-size: 1.2rem;
    }

    & .form-control {
        font-size: 1.1rem;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

    & .form-control:focus {
        border-color: #4e73df;
        box-shadow: 0 0 5px rgba(78, 115, 223, 0.5);
    }
}

.custom-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.custom-card-header {
    font-size: 1.25rem;
    padding: 1.2rem;
    text-align: center;
    background-color: #6b8db05c;
    color: white;
}
.custom-alert {
    display: flex;
    align-items: center;
    background-color: #e9e4ff;
    color: #2c1cb9;
    border: 1px solid #a5abfc;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: fade-in 0.5s ease-out;
    max-width: 500px;
    margin: auto;
    position: relative;
}
.custom-alert::before {
    /* content: '\f06a'; */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.75rem;
    font-size: 1.5rem;
    position: absolute;
    left: 1rem;
}
.custom-alert--danger {
    background-color: #ffe4e6;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    &::before {
        content: '\f057';
    }
}
.custom-alert--info {
    background-color: #e4f7ff;
    color: #1c8fb9;
    border: 1px solid #a5d5fc;
    &::before {
        content: '\f059';
    }
}
.custom-alert--warning {
    background-color: #fff2e4;
    color: #df7418;
    border: 1px solid #ffc996;
    &::before {
        content: '\f06a';
    }
}
.custom-alert--success {
    background-color: #e6ffea;
    color: #0fa136;
    border: 1px solid #a5fcc5;
    &::before {
        content: '\f058';
    }
}

.custom-alert span {
    margin-left: 0.75rem;
    font-size: 1rem;
}

.alert-icon {
    width: 24px;
    height: 24px;
    color: #b91c1c;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.custom-article {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px;
    font-family: 'Arial', sans-serif;
    color: #333;
}

.custom-article p {
    margin-bottom: 15px;
}

.custom-article b {
    color: var(--main-dark-blue)
}

.custom-article .status {
    font-weight: bold;
    font-size: 1.1rem;
}

.custom-article b:last-child {
    color: var(--main-blue);
    font-size: 1.2rem;
}

.custom-card {
    background: linear-gradient(to right, #0029a6, #6578e2);
    border: none;
    border-radius: 10px;
    margin: 20px 0;

    & .card-body {
        padding: 30px;
    }

    & .card-title {
        margin-bottom: 20px;
        font-size: 1.6rem;
        font-weight: bold;
    }

    & .report-list {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    & .card-body p {
        margin-bottom: 10px;
        font-size: 1.1rem;
        color: #333;
    }

    & .card-body span {
        color: #ffffff;
        font-weight: bold;
    }
}

.btn-info-2 {
    background-color: #0d70c5;
    border-color: #0d70c5;
    color: white;
    &:hover {
        background-color: rgb(0, 151, 206);
        border-color: rgb(0, 151, 206);
    }
}
.btn-facturacion {
    border: none;
    font-weight: 600;
    color: #ffffff !important;
    font-size: 1rem;
    transition: background 0.3s ease-in-out;
    background: linear-gradient(45deg, #674eff,#0095dc);

    &:hover {
        background: linear-gradient(45deg, #0095dc, #674eff);
    }
}
.msg-facturacion {
    background: linear-gradient(45deg, #1065ac, #00b2dc);
    color: white;
    padding: 7px 6px;
    white-space: nowrap;
    border-radius: 4px;
}
.table-x__td{
    & select:not(.form-control),
    & input:not(.form-control) {
        border-radius: 5px;
        padding: 8px;
        min-width: 150px;
        border-color: #0078ea;
        background-color: #fff;
    }
}
.scale-hover:hover {
    scale: 1.3;
    transition: all 0.3s ease-in-out;
}
.scale-hover-danger:hover {
    scale: 1.3;
    transition: all 0.3s ease-in-out;
    color: #cb0000 !important
}

.estatus-atendido {
    color: green;
}
.estatus-pendiente {
    color: red;
}
.estatus-tecnica {
    color: rgb(45, 0, 128);
}
.estatus-no-posible {
    color: rgb(255, 111, 0);
}
.btn-crimson {
    background-color: #dc143c;
    color: #ffffff;
    gap: 5px;
    display: inline-flex;
    align-items: center;

    &:hover {
        background-color: #dd3053;
        color: #ffffff;
    }
}
.btn-openpay {
    background: linear-gradient(90deg, #0044b2, #00dbc9);
    box-shadow: 0 3px 4px 0px #80a6fa;
    border: transparent;
    color: white;
    transition: box-shadow 0.3s ease-in-out !important;

    &:hover {
        box-shadow: 4px 3px 5px 2px rgb(0 234 255) !important;
        color: white;
    }
}

.btn-evo {
    background: linear-gradient(130deg, #0a2e7d, #2994ff);
    box-shadow: 0 3px 4px 0px #75b1ff;
    border: none;
    color: white;
    transition: box-shadow 0.5s ease-in !important;

    &:hover {
        box-shadow: 4px 3px 5px 2px #55bfff !important;
        color: white;
    }
}

.show-hover {
    position: relative;

    .show-hover__span {
        display: none;
        width: max-content;
        position: absolute;
        top: -2.8rem;
        left: 0;
        transform: translateX(-40%);
        background: #000;
        color: #FFF;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;

        &::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #000;
        }
    }
    &:hover {
        .show-hover__span {
            display: inline;
        }
    }
}
.bg-lila {
    background-color: #cec4ff !important;
}