@import url('rootDS.css');
@import url('Botones.css');
@import url('Iconos.css');

/*#region General*/
::placeholder {
    color: var(--avex-on-surface) !important;
    opacity: 1; /* Firefox */
}

body {
    font-family: Roboto;
    color: var(--avex-on-surface);
    font-size: calc(var(--font-size) * 1rem);
    background-color: var(--avex-background);
}

.div-breadcrumbs-bss {
    background-color: var(--avex-background) !important;
    font-size: 11pt;
    color: var(--avex-on-surface) !important;
    padding: 10px 22px 0px 22px;
    position: relative;
    right: 0;
    left: 0;
}

.table {
    background: var(--avex-background);
    color: var(--avex-on-background);
}

table th {
    font-size: calc(var(--font-size) * 1rem);
    font-weight: 400;
}

table.table.historial-ds tr > td {
    font-size: 14px;
}

.top-line table tr.active {
    background-color: var(--avex-surface);
    color: var(--avex-on-surface);
}

@media (min-width: 992px) {
    .content-izq-6-ds {
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto;
    }
}



/*#endregion General*/

/*#region Select*/
.select-table-ds {
    position: absolute;
    max-width: 11.5rem;
    min-width: 11.5rem;
}

.dropdown-content {
    background-color: var(--avex-background);
}
/*#endregion Select*/

/*#region text-color*/

.text-avex-surface {
    color: var(--avex-surface);
}

.text-avex-surface-5 {
    color: var(--avex-surface-5);
}

.text-avex-primary {
    color: var(--avex-primary);
}

.text-avex-secondary {
    color: var( --avex-secondary);
}

.text-avex-on-primary {
    color: var(--avex-on-primary);
}

.text-avex-exito {
    color: var(--avex-exito);
}

.text-avex-error {
    color: var(--avex-error);
}

.text-avex-error-imp {
    color: var(--avex-error-on-container-imp);
}

.text-avex-outline {
    color: var(--avex-outline);
}

.text-avex-on-surface {
    color: var(--avex-on-surface) !important;
}

.text-darken-green-ds {
    color: var(--avex-darken-green) !important;
}

.text-white-ds {
    color: var(--white);
}

.text-turquoise-ds {
    color: var(--avex-primary);
}

.text-turquoise-40 {
    color: var(--turquoise-ds40);
}

.text-orange-ds {
    color: var(--avex-origen);
}

.text-origen-ds {
    color: var(--avex-origen);
}

.text-detencion-ds {
    color: var(--avex-detencion);
}

.text-on-detencion-ds {
    color: var(--avex-on-detencion);
}

.text-origen-ds {
    color: var(--avex-origen);
}

.text-on-origen-ds {
    color: var(--avex-on-origen);
}

.text-destino-ds {
    color: var(--avex-destino);
}

.text-on-destino-ds {
    color: var(--avex-on-destino);
}

.text-secondary-ds {
    color: var(--avex-secondary);
}

.text-green-ds {
    color: var(--green-ds);
}

.text-red-ds {
    color: var(--red-ds) !important;
}

.text-light-red {
    color: var(--light-red) !important;
}

.text-avex-gray {
    color: var(--avex-gray) !important;
}

.text-darken-green {
    color: var(--dark-darken-green) !important;
}

.text-darken-red {
    color: var(--dark-darken-red) !important;
}

.text-light-avex-grey {
    color: var(--light-avex-grey) !important;
}

.text-finance-grey {
    color: var(--finance-grey) !important;
}

.text-secondary-gray-ds {
    color: var(--secondary-gray-ds) !important;
}

.text-dark-negar {
    color: var(--dark-negar) !important;
}

.text-avex-primary-hover {
    color: var(--avex-on-surface);
}

    .text-avex-primary-hover:hover {
        color: var(--avex-primary) !important;
    }

.text-avex-blueviolet {
    color: var(--avex-blueviolet);
}

.text-estado-solicitud {
    color: var(--secondary-orange)
}

.text-estado-planificada {
    color: var(--secondary-green)
}

.text-estado-enCamino {
    color: var(--secondary-yellow)
}

.text-estado-enPosicion {
    color: var(--secondary-sky-blue)
}

.text-estado-enCurso {
    color: var(--secondary-blue)
}

.text-estado-terminada {
    color: var(--secondary-grey)
}

.text-estado-cancelada {
    color: var(--secondary-black)
}

.text-estado-noIniciada {
    color: var(--secondary-red)
}

.text-estado-enPausa {
    color: var(--secondary-purple)
}





/*#endregion text-color*/
/*#region Aumentar Fuente*/
.font-controls {
    position: absolute;
    top: .5em;
    right: .5em;
    display: flex;
    font-size: 1.5em;
}

.font-control {
    margin-left: .5em;
    padding: .25em;
    border: 1px solid #000;
    cursor: pointer;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 58px;
    right: 0;
    background-color: var(--black);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
    z-index: 9999
}

    .sidenav a {
        text-decoration: none;
        font-size: 16px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        color: var(--avex-primary) !important;
        text-align: center;
    }

.perfil-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    height: calc(100vh - 54px) !important;
}

.perfil-grid-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 1rem;
}

.perfil-grid-btn {
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 0.5rem;
    min-height: 20%;
    padding-bottom: 20px;
}

.perfil-grid-btn-aumentar {
    display: flex;
    flex-direction: row
}


@media (min-width: 1081px) {
    .lbl-d-n {
        display: none;
    }

    .navbar-expand-md .navbar-toggler {
        display: none;
    }
}

.icon-menu-ds {
    font-size: 1rem;
    color: #fff;
}

    .icon-menu-ds.active {
        font-size: 1rem;
        color: var(--avex-primary);
    }

.lbl-ques.active {
    color: var(--avex-primary);
}


.text-white-ds {
    color: var(--white);
}

.icon-menu-mobile {
    display: none
}

.icon-menu-desk {
    display: block
}

@media (max-width: 1081px) {
    .w-icon-mobile {
        text-align: center;
        width: 6rem;
    }

    .sub-menu-mobile {
        overflow-y: auto;
        height: calc(100vh - 58px);
    }

    .icon-menu-ds {
        font-size: 1rem;
        color: var(--black);
    }

    .animated-icon2 span {
        background: var(--black) !important
    }

    .cont-menu {
        background-color: var(--white) !important
    }

    .navbar.navbar-dark .navbar-toggler {
        color: var(--black) !important
    }

    .text-white-ds-menu {
        color: var(--black);
    }

    .icon-menu-mobile {
        display: block
    }

    .icon-menu-desk {
        display: none
    }
}

.navbar {
    justify-content: space-between;
}



.body-message {
    width: 100%;
    height: calc(100vh - 280px);
    overflow: auto;
    background-color: var(--white);
    border-radius: 8px 8px 0px 0;
}



/*------ ESTILO DEL MENSAJE IZQUIERDO (MENSAJERIA)*/
.message-left .ms-lado {
    text-align: left;
    background-color: #ECECEF;
    color: var(--black);
    padding: 5px;
    margin: 1rem 0.5rem 0;
    border-radius: 10px 10px 10px 0;
}
/*------ ESTILO DEL MENSAJE DERECHO (MENSAJERIA)*/
.message-right .ms-lado {
    text-align: left;
    background-color: var(--avex-primary);
    color: var(--white);
    padding: 5px;
    margin: 1rem 0.5rem 0;
    border-radius: 10px 10px 0px 10px;
}


.sender {
    font-size: 11px
}

.message-left .date {
    text-align: left;
    font-size: 11px;
    margin: 0.10rem 0.6rem 0;
}

.message-right .date {
    text-align: right;
    font-size: 11px;
    margin: 0.10rem 0.6rem 0;
}



.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-end {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.h-sidevar {
    height: calc(100vh - 54px) !important;
}

/*#endregion Aumentar Fuente*/

/*#region d-flex*/
@media (min-width: 768px) {
    .d-flex-between {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 990px) {
    .d-flex-between-990 {
        display: flex;
        justify-content: space-between;
    }
}


/*#endregion d-flex*/

/*#region Fuentes*/

.line-height-default {
    line-height: 1
}

.line-h-1-2 {
    line-height: 1.2
}

.font-1rem {
    font-size: 1rem;
}

.font-h1 {
    font-size: var(--h1-24);
}

.font-h2 {
    font-size: var(--h2-22);
}

.font-h3 {
    font-size: var(--h3-20);
}

.font-h4 {
    font-size: var(--h4-18);
}

.font-16 {
    font-size: var(--body-16);
}


/*#endregion Fuentes*/

/*#region paginador*/
.pagination.pg-blue .page-item.active .page-link {
    background-color: var(--avex-primary) !important;
}

.paginator-ds {
    position: absolute;
    bottom: -45px;
}

.paginator-form-ds {
    position: absolute;
    bottom: 0;
}

.paginator-fixed-ds {
    position: fixed;
    bottom: 0;
}

.pagination .page-item .page-link {
    color: var(--avex-on-surface)
}
/*#endregion paginador*/

/*#region cortar texto*/

.cortar-texto {
    width: 230px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-180 {
    max-width: 180px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-200 {
    max-width: 200px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-200 {
    max-width: 210px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-230 {
    max-width: 230px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-240 {
    max-width: 240px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-290 {
    max-width: 290px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-320 {
    max-width: 320px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-300 {
    max-width: 300px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-290 {
    max-width: 290px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-150 {
    max-width: 150px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-100 {
    max-width: 100px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-w-100 {
    max-width: 100% !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-texto-w-90 {
    max-width: 90% !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cortar-text-2-line {
    display: -webkit-box;
    height: auto;
    line-height: 1.3em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.text-decoration-underline {
    text-decoration: underline
}
/*#endregion cortar texto*/

/*#region Tablas*/

.top-line table tr {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    border-collapse: collapse;
}

table td {
    font-size: 1rem;
    font-weight: 300;
}

table {
    border-collapse: collapse;
    width: 100%;
    z-index: 999;
}

th, td {
    padding: 8px 16px;
    z-index: 999;
}

th {
    z-index: 999;
}

.top-line {
    border-top: 4px solid var(--avex-primary) !important;
}

.table-sm td, .table-sm th {
    padding: .3rem !important;
}

.table-mdx td, .table-mdx th {
    padding: .45rem !important;
}

table.table-mdx thead th {
    line-height: 1.3;
    vertical-align: middle
}

.wid-td-comp {
    min-width: 10px;
    width: 5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin: 0;
    border-bottom: none !important;
    text-align: center;
}

.ocultatexto {
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

.tabalAjustardos {
    margin: 15px;
    padding: 15px 0px;
}

.tableFixHead {
    overflow-y: auto;
    max-height: calc(40vh)
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 999;
        background-color: var(--header-tabla);
        border-top: 4px solid var(--avex-primary);
    }

    .tableFixHead tfoot th {
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: var(--header-tabla);
    }

.tableFixHead2 thead th {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--header-tabla);
    border-top: 4px solid var(--avex-primary);
}

.tableFixHead-100vh {
    overflow-y: auto;
    max-height: calc(100vh) !important;
}

    .tableFixHead-100vh thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead2 {
    overflow-y: auto;
    height: calc(60vh)
}

.table td, .table th {
    padding: .75rem;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.tableFixHead3 {
    overflow-y: auto;
    max-height: calc(40vh)
}

    .tableFixHead3 thead th {
        position: sticky;
        top: 0;
        z-index: 999;
        border-top: 4px solid var(--avex-primary);
    }

.tableFixHead4 {
    overflow-y: auto;
    height: calc(100vh - 330px) !important;
    border-top: 4px solid var(--avex-primary);
}

    .tableFixHead4 thead th {
        position: sticky;
        top: 0;
        z-index: 999;
        border-top: 4px solid var(--avex-primary);
    }

    .tableFixHead4 tfoot th {
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: var(--header-tabla);
    }

.tableFixHead-100 {
    overflow-y: auto;
    max-height: calc(100vh - 100px) !important;
}

    .tableFixHead-100 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-180 {
    overflow-y: auto;
    max-height: calc(100vh - 180px) !important;
}

    .tableFixHead-180 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-180 {
    overflow-y: auto;
    max-height: calc(100vh - 180px) !important;
}

    .tableFixHead-180 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-230 {
    overflow-y: auto;
    max-height: calc(100vh - 230px) !important;
}

    .tableFixHead-230 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-230-h {
    overflow-y: auto;
    height: calc(100vh - 230px) !important;
}

    .tableFixHead-230-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-250 {
    overflow-y: auto;
    max-height: calc(100vh - 250px) !important;
}

    .tableFixHead-250 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-260 {
    overflow-y: auto;
    max-height: calc(100vh - 260px) !important;
}

    .tableFixHead-260 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-260-h {
    overflow-y: auto;
    height: calc(100vh - 260px) !important;
}

    .tableFixHead-260-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-270 {
    overflow-y: auto;
    height: calc(100vh - 270px) !important;
}

    .tableFixHead-270 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-290 {
    overflow-y: auto;
    max-height: calc(100vh - 290px) !important;
}

    .tableFixHead-290 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-500 {
    overflow-y: auto;
    height: calc(100vh - 500px) !important;
}

    .tableFixHead-500 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-500-max-h {
    overflow-y: auto;
    max-height: calc(100vh - 500px) !important;
}

    .tableFixHead-500-max-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-510 {
    overflow-y: auto;
    height: calc(100vh - 510px) !important;
}

    .tableFixHead-510 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-530 {
    overflow-y: auto;
    max-height: calc(100vh - 530px) !important;
}

    .tableFixHead-530 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-540 {
    overflow-y: auto;
    height: calc(100vh - 540px) !important;
}

    .tableFixHead-540 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-550 {
    overflow-y: auto;
    max-height: calc(100vh - 550px) !important;
}

    .tableFixHead-550 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-580 {
    overflow-y: auto;
    max-height: calc(100vh - 580px) !important;
}

    .tableFixHead-580 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-320 {
    overflow-y: auto;
    max-height: calc(100vh - 320px) !important;
}

    .tableFixHead-320 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-320-h {
    overflow-y: auto;
    height: calc(100vh - 320px) !important;
}

    .tableFixHead-320-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-400 {
    overflow-y: auto;
    max-height: calc(100vh - 400px) !important;
}

    .tableFixHead-400 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-410 {
    overflow-y: auto;
    max-height: calc(100vh - 410px) !important;
}

    .tableFixHead-410 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
        vertical-align: middle;
    }

.tableFixHead-420 {
    overflow-y: auto;
    max-height: calc(100vh - 420px) !important;
}

    .tableFixHead-420 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
        vertical-align: middle;
    }

.tableFixHead-430 {
    overflow-y: auto;
    max-height: calc(100vh - 430px) !important;
}

    .tableFixHead-430 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
        vertical-align: middle;
    }

.tableFixHead-440 {
    overflow-y: auto;
    max-height: calc(100vh - 440px) !important;
}

    .tableFixHead-440 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
        vertical-align: middle;
    }

.tableFixHead-450 {
    overflow-y: auto;
    max-height: calc(100vh - 450px) !important;
}

    .tableFixHead-450 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-460 {
    overflow-y: auto;
    max-height: calc(100vh - 460px) !important;
}

    .tableFixHead-460 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-470 {
    overflow-y: auto;
    max-height: calc(100vh - 470px) !important;
}

    .tableFixHead-470 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-480 {
    overflow-y: auto;
    max-height: calc(100vh - 480px) !important;
}

    .tableFixHead-480 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-490 {
    overflow-y: auto;
    height: calc(100vh - 490px) !important;
}

    .tableFixHead-490 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-220 {
    overflow-y: auto;
    max-height: calc(100vh - 220px) !important;
}

    .tableFixHead-220 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

    .tableFixHead-220 tfoot th {
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: var(--header-tabla);
    }

.tableFixHead-240 {
    overflow-y: auto;
    max-height: calc(100vh - 240px) !important;
}

    .tableFixHead-240 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
        vertical-align: middle;
    }

.tableFixHead-200 {
    overflow-y: auto;
    max-height: calc(100vh - 200px) !important;
}

    .tableFixHead-200 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-280 {
    overflow-y: auto;
    max-height: calc(100vh - 280px) !important;
}

    .tableFixHead-280 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-280-h {
    overflow-y: auto;
    height: calc(100vh - 280px) !important;
}

    .tableFixHead-280-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-300 {
    overflow-y: auto;
    height: calc(100vh - 300px) !important;
    vertical-align: middle;
}

    .tableFixHead-300 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-300-max-h {
    overflow-y: auto;
    max-height: calc(100vh - 300px) !important;
}

    .tableFixHead-300-max-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-310 {
    overflow-y: auto;
    max-height: calc(100vh - 310px) !important;
}

    .tableFixHead-310 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-330 {
    overflow-y: auto;
    max-height: calc(100vh - 330px) !important;
}

    .tableFixHead-330 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-330-h {
    overflow-y: auto;
    height: calc(100vh - 330px) !important;
}

    .tableFixHead-330-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-340 {
    overflow-y: auto;
    max-height: calc(100vh - 340px) !important;
}

    .tableFixHead-340 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

    .tableFixHead-340 tfoot th {
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: var(--header-tabla);
    }

.tableFixHead-350 {
    overflow-y: auto;
    max-height: calc(100vh - 350px) !important;
}

    .tableFixHead-350 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-360 {
    overflow-y: auto;
    max-height: calc(100vh - 360px) !important;
}

    .tableFixHead-360 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-370 {
    overflow-y: auto;
    max-height: calc(100vh - 370px) !important;
}

    .tableFixHead-370 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-380 {
    overflow-y: auto;
    max-height: calc(100vh - 380px) !important;
}

    .tableFixHead-380 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-380-h {
    overflow-y: auto;
    height: calc(100vh - 380px) !important;
}

    .tableFixHead-380-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.tableFixHead-520 {
    overflow-y: auto;
    max-height: calc(100vh - 520px) !important;
}

    .tableFixHead-520 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-500-h {
    overflow-y: auto;
    max-height: calc(100vh - 500px) !important;
}

    .tableFixHead-500-h thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }

.table-timeline-close-filter {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}

.table-timeline-open-filter {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.table-restriccion {
    max-height: 316px;
    overflow: auto;
}

    .table-restriccion thead tr {
        position: sticky;
        top: 0;
        z-index: 3;
        background: white;
    }


/*#endregion Tablas*/
/*#region Background bg-*/
.bg-avex-origen-ds {
    background-color: var(--avex-origen);
}

.bg-avex-detencion-ds {
    background-color: var(--avex-detencion);
}

.bg-avex-destino-ds {
    background-color: var(--avex-destino);
}

.bg-avex-primary-hover:hover {
    background: var(--avex-primary-container);
    color: var(--avex-primary-on-container)
}

.bg-white-ds {
    background: var(--avex-background);
}

.bg-avex-primary-table-up {
    background: var(--avex-primary-table)
}

.bg-avex-primary-ds {
    background: var(--avex-primary)
}

.bg-surface {
    background-color: var(--avex-surface) !important;
}

.bg-surface-1 {
    background-color: var(--avex-surface-1) !important;
}

.bg-surface-2 {
    background-color: var(--avex-surface-2);
}

.bg-light-grey {
    background-color: #fafafa !important;
}

.bg-dark-grey {
    background-color: var(--header-tabla);
}

.bg-light-avex-grey {
    background-color: var(--light-avex-grey);
}

.bg-avex-gray {
    background-color: var(--avex-gray);
}

.bg-dark-avex-grey {
    background-color: var(--dark-avex-grey);
}

.bg-grey {
    background-color: var(--bg-card-filtro);
}

.bg-gray95 {
    background: var(--avex-gray95);
}

.bg-gray95 {
    background: var(--avex-gray95);
}


.bg-turquoise-ds {
    background-color: var(--avex-primary);
}

.bg-turquoise98 {
    background-color: var(--turquoise-ds98);
}

.bg-light-turquoise {
    background-color: var(--light-turquoise);
}

.bg-dark-turquoise {
    background-color: var(--dark-turquoise);
}

.bg-red-ds {
    background-color: var(--red-ds);
}

.bg-light-red {
    background-color: var(--light-red);
}

.bg-dark-red {
    background-color: var(--dark-red);
}

.bg-green-ds {
    background-color: var(--green-ds);
}

.bg-light-green {
    background-color: var(--light-green);
}

.bg-dark-green {
    background-color: var(--dark-green);
}

.bg-dark-green-ds {
    background-color: var(--avex-darken-green) !important;
}

.bg-orange-ds {
    background-color: var(--orange-ds);
}

.bg-light-orange {
    background-color: var(--light-orange);
}

.bg-dark-orange {
    background-color: var(--dark-orange);
}

.bg-blue-ds {
    background-color: var(--blue-ds);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.bg-darken-green {
    background-color: var(--darken-green-ds);
}

.bg-light-darken-green {
    background-color: var(--light-darken-green);
}

.bg-dark-darken-green {
    background-color: var(--dark-darken-green);
}

.bg-purple {
    background-color: var(--purple-ds);
}

.bg-light-purple {
    background-color: var(--light-purple);
}

.bg-dark-purple {
    background-color: var(--dark-purple);
}

.bg-darken-red {
    background: var(--darken-red-ds);
}

.bg-light-darken-red {
    background: var(--light-darken-red);
}

.bg-dark-darken-red {
    background-color: var(--dark-darken-red);
}

.bg-secondary-gray-ds {
    background: var(--secondary-gray);
}

.bg-secondary-light-gray {
    background: var(--secondary-light-gray);
}

.bg-secondary-dark-gray {
    background-color: var(--secondary-dark-gray);
}

/** background Colores complementarios **/
.bg-secondary-orange {
    background-color: var(--secondary-orange);
}

.bg-secondary-purple {
    background-color: var(--secondary-purple);
}

.bg-secondary-green {
    background-color: var(--secondary-green);
}

.bg-secondary-yellow {
    background-color: var(--secondary-yellow);
}

.bg-secondary-red {
    background-color: var(--secondary-red);
}

.bg-secondary-sky-blue {
    background-color: var(--secondary-sky-blue);
}

.bg-secondary-blue {
    background-color: var(--secondary-blue);
}

.bg-secondary-grey {
    background-color: var(--secondary-grey);
}

.bg-secondary-black {
    background-color: var(--black);
}

.bg-finance-red {
    background-color: var(--finance-red);
}

.bg-finance-green {
    background-color: var(--finance-green);
}

.bg-finance-blue {
    background-color: var(--finance-blue);
}

.bg-finance-grey {
    background-color: var(--finance-grey);
}

/*Background especiales*/

.bg-info-ds {
    background-color: var(--alert-info-bg);
}

.bg-filtros {
    margin: 0 15px;
    padding: 15px 0px;
    background-color: var(--avex-surface-1);
    border-radius: 20px;
}

.bg-auto {
    background-color: var(--auto);
    color: var(--avex-gray) !important;
    border: 1px solid var(--avex-gray) !important;
}

.bg-citycar {
    background-color: var(--citycar);
}

.bg-van {
    background-color: var(--van);
}

.bg-furgon {
    background-color: var(--furgon);
}

.bg-bus {
    background-color: var(--bus);
}

.bg-moto {
    background-color: var(--moto);
}

.bg-sub {
    background-color: var(--sub);
}

.bg-light-gray {
    background-color: #F3F2F5 !important;
}
/*#endregion Background*/
/*#region Font-size*/
.font-italic {
    font-style: italic;
}


.line-heightx16 th {
    line-height: 16px;
}


.text-avex-12 {
    font-size: 12px;
    line-height: 16px;
    Letter-spacing: 0;
}

.text-avex-14 {
    font-size: 14px;
    line-height: 18px;
    Letter-spacing: 0;
}

.text-avex-16 {
    font-size: 16px;
    line-height: 24px;
    Letter-spacing: 0;
}

.text-avex-18 {
    font-size: 18px;
    line-height: 16px;
    Letter-spacing: 0;
}

.text-avex-20 {
    font-size: 20px;
    line-height: 28px;
    Letter-spacing: 0;
}

.text-avex-22 {
    font-size: 22px;
    line-height: 30px;
    Letter-spacing: 0;
}

.text-avex-24 {
    font-size: 24px;
    line-height: 30px;
    Letter-spacing: 0;
}

.text-avex-icon-servicios {
    font-size: 24px;
    line-height: 16px;
    Letter-spacing: 0;
}

.font-09 {
    font-size: 0.9rem
}

/*#endregion Font-size*/

/*#region Bold*/
.bold-700 {
    font-weight: 700;
}

.bold-500 {
    font-weight: 500;
}

.bold-400 {
    font-weight: 400;
}

.bold-normal-ds {
    font-weight: normal !important;
}

/*#endregion Bold*/

/*#region Margenes*/

/*Margenes*/

.mp-3-last-ds {
    padding-bottom: 0 !important;
}

.margin-0 {
    margin: 0;
}

.margin-4 {
    margin: 4px;
}

.margin-8 {
    margin: 8px;
}

.margin-12 {
    margin: 12px;
}

.margin-16 {
    margin: 16px;
}

.margin-24 {
    margin: 24px;
}

.margin-32 {
    margin: 32px;
}

.margin-40 {
    margin: 40px;
}

.margin-48 {
    margin: 48px;
}

.margin-56 {
    margin: 56px;
}

.margin-64 {
    margin: 64px;
}

.margin-72 {
    margin: 72px;
}

.margin-80 {
    margin: 80px;
}

/**Margin top**/

.margin-t-0 {
    margin-top: 0 !important;
}

.margin-t-4 {
    margin-top: 4px;
}

.margin-t-8 {
    margin-top: 8px;
}

.margin-t-12 {
    margin-top: 12px;
}

.margin-t-16 {
    margin-top: 16px;
}

.margin-t-24 {
    margin-top: 24px;
}

.margin-t-32 {
    margin-top: 32px;
}

.margin-t-40 {
    margin-top: 40px;
}

.margin-t-48 {
    margin: 48px;
}

.margin-t-56 {
    margin-top: 56px;
}

.margin-t-64 {
    margin-top: 64px;
}

.margin-t-72 {
    margin-top: 72px;
}

.margin-t-80 {
    margin-top: 80px;
}

/**Margin bottom**/

.margin-b-0 {
    margin-bottom: 0;
}

.margin-b-4 {
    margin-bottom: 4px;
}

.margin-b-8 {
    margin-bottom: 8px;
}

.margin-b-12 {
    margin-bottom: 12px;
}

.margin-b-16 {
    margin-bottom: 16px;
}

.margin-b-24 {
    margin-bottom: 24px;
}

.margin-b-32 {
    margin-bottom: 32px;
}

.margin-b-40 {
    margin-bottom: 40px;
}

.margin-b-48 {
    margin-bottom: 48px;
}

.margin-b-56 {
    margin-bottom: 56px;
}

.margin-b-64 {
    margin-bottom: 64px;
}

.margin-b-72 {
    margin-bottom: 72px;
}

.margin-b-80 {
    margin-bottom: 80px;
}

/**Margin Right**/

.margin-r-0 {
    margin-right: 0;
}

.margin-r-4 {
    margin-right: 4px;
}

.margin-r-8 {
    margin-right: 8px;
}

.margin-r-12 {
    margin-right: 12px;
}

.margin-r-16 {
    margin-right: 16px;
}

.margin-r-24 {
    margin-right: 24px;
}

.margin-r-32 {
    margin-right: 32px;
}

.margin-r-40 {
    margin-right: 40px;
}

.margin-r-48 {
    margin-right: 48px;
}

.margin-r-56 {
    margin-right: 56px;
}

.margin-r-64 {
    margin-right: 64px;
}

.margin-r-72 {
    margin-right: 72px;
}

.margin-r-80 {
    margin-left: 80px;
}

/**Margin left**/

.margin-l-0 {
    margin-left: 0;
}

.margin-l-4 {
    margin-left: 4px;
}

.margin-l-8 {
    margin-left: 8px;
}

.margin-l-12 {
    margin-left: 12px;
}

.margin-l-16 {
    margin-left: 16px;
}

.margin-l-24 {
    margin-left: 24px;
}

.margin-l-32 {
    margin-left: 32px;
}

.margin-l-40 {
    margin-left: 40px;
}

.margin-l-48 {
    margin-left: 48px;
}

.margin-l-56 {
    margin-left: 56px;
}

.margin-l-64 {
    margin-left: 64px;
}

.margin-l-72 {
    margin-left: 72px;
}

.margin-l-80 {
    margin-bottom: 80px;
}

/*#endregion Margenes*/

/*#region Padding*/

/**padding*/

.padding-0 {
    padding: 0;
}

.padding-4 {
    padding: 4px;
}

.padding-8 {
    padding: 8px;
}

.padding-12 {
    padding: 12px;
}

.padding-16 {
    padding: 16px;
}

.padding-24 {
    padding: 24px;
}

.padding-32 {
    padding: 32px;
}

.padding-40 {
    padding: 40px;
}

.padding-48 {
    padding: 48px;
}

.padding-56 {
    padding: 56px;
}

.padding-64 {
    padding: 64px;
}

.padding-72 {
    padding: 72px;
}

.padding-80 {
    padding: 80px;
}


/**padding top*/

.padding-t-0 {
    padding-top: 0;
}

padding-t-4 {
    padding-top: 4px;
}

padding-t-8 {
    padding-top: 8px;
}

padding-t-12 {
    padding-top: 12px;
}

padding-t-16 {
    padding-top: 16px;
}

padding-t-24 {
    padding-top: 24px;
}

padding-t-32 {
    padding-top: 32px;
}

padding-t-40 {
    padding-top: 40px;
}

padding-t-48 {
    padding-top: 48px;
}

padding-t-56 {
    padding-top: 56px;
}

padding-t-64 {
    padding-top: 64px;
}

padding-t-72 {
    padding-top: 72px;
}

padding-t-80 {
    padding-top: 80px;
}


/**padding bottom*/

.padding-b-0 {
    padding-bottom: 0;
}

.padding-b-4 {
    padding-bottom: 4px;
}

.padding-b-8 {
    padding-bottom: 8px !important;
}

.padding-b-12 {
    padding-bottom: 12px;
}

.padding-b-16 {
    padding-bottom: 16px;
}

.padding-b-24 {
    padding-bottom: 24px;
}

.padding-b-32 {
    padding-bottom: 32px;
}

.padding-b-40 {
    padding-bottom: 40px;
}

.padding-b-48 {
    padding-bottom: 48px;
}

.padding-b-56 {
    padding-bottom: 56px;
}

.padding-b-64 {
    padding-bottom: 64px;
}

.padding-b-72 {
    padding-bottom: 72px;
}

.padding-b-80 {
    padding-bottom: 80px;
}

/**padding left*/

.padding-l-0 {
    padding-left: 0;
}

.padding-l-4 {
    padding-left: 4px;
}

.padding-l-8 {
    padding-left: 8px;
}

.padding-l-12 {
    padding-left: 12px;
}

.padding-l-16 {
    padding-left: 16px;
}

.padding-l-24 {
    padding-left: 24px;
}

.padding-l-32 {
    padding-left: 32px;
}

.padding-l-40 {
    padding-left: 40px;
}

.padding-l-48 {
    padding-left: 48px;
}

.padding-l-56 {
    padding-left: 56px;
}

.padding-l-64 {
    padding-left: 64px;
}

.padding-l-72 {
    padding-left: 72px;
}

.padding-l-80 {
    padding-left: 80px;
}


/**padding right*/

.padding-r-0 {
    padding-right: 0;
}

padding-r-4 {
    padding-right: 4px;
}

padding-r-8 {
    padding-right: 8px;
}

padding-r-12 {
    padding-right: 12px;
}

padding-r-16 {
    padding-right: 16px;
}

padding-r-24 {
    padding-right: 24px;
}

padding-r-32 {
    padding-right: 32px;
}

padding-r-40 {
    padding-right: 40px;
}

padding-r-48 {
    padding-right: 48px;
}

padding-r-56 {
    padding-right: 56px;
}

padding-r-64 {
    padding-right: 64px;
}

padding-r-72 {
    padding-right: 72px;
}

padding-r-80 {
    padding-right: 80px;
}


/*#endregion Padding*/

/*#region Border*/


.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6 !important;
}

.borde-0 {
    margin: 0;
}

.borde-1 {
    margin: 1px;
}

.borde-2 {
    margin: 2px;
}

.borde-3 {
    margin: 3px;
}

.borde-4 {
    margin: 4px;
}

.borde-8 {
    margin: 8px;
}

.borde-16 {
    margin: 16px;
}

.border {
    border-top: 1px solid #68788D;
    border-bottom: 1px solid #68788D;
    border-left: 1px solid #68788D;
    border-right: 1px solid #68788D;
}

.borde-none {
    border: none !important;
}

.border-sm-radius {
    border-radius: var(--bss-sm) !important;
}

.border-md-radius {
    border-radius: var(--bss-md) !important;
}

.border-t-l {
    border-radius: var(--border-t-l);
}

.border-t-r {
    border-radius: var(--border-t-r);
}

.border-t {
    border-radius: var(--border-t)
}

.border-md-t {
    border-radius: var(--border-md-t) !important
}

.border-b {
    border-radius: var(--border-b)
}

.border-surface-5 {
    border: 1px solid #ECECF0;
}

.border-origen-ds {
    border: 1px solid var(--avex-origen);
}

.border-detencion-ds {
    border: 1px solid var(--avex-detencion);
}

.border-destino-ds {
    border: 1px solid var(--avex-destino);
}

.border-b-surface-5 {
    border-bottom: 1px solid var(--avex-surface-5);
}

.borde-primary-ds {
    border: 1px solid var(--avex-primary) !important;
}

.borde-b-primary-ds {
    border-bottom: 1px solid var(--avex-primary) !important;
}

.borde-primary-2-ds {
    border: 2px solid var(--avex-primary) !important;
}

.bg-sin-movil {
    border: 1px solid #FC0606;
    color: #FC0606 !important;
    font-size: 11px;
    padding: 8px;
}

/*#endregion Border*/
/*Hover*/
.home-icon-ds:hover {
    background: var(--avex-primary);
    color: var(--avex-gray);
}


/*#region Por Revisar*/

/** Radio Button **/

.radio-turquoise-ds [type="radio"]:checked + label:after {
    border-color: var(--avex-primary);
    background-color: var(--avex-primary);
}

.radio-black [type="radio"]:checked + label:after {
    border-color: #000000;
    background-color: #000000;
}


/** Content Nuevo**/
.content-new {
    padding-left: 0;
    padding-right: 0;
    height: calc(100vh - 88px);
    overflow-y: auto;
    padding-bottom: 10px;
}

@media(max-width: 992px) {
    .content-new {
        padding-left: 0;
        padding-right: 0;
        height: 100%;
        overflow-y: auto;
        padding-bottom: 10px;
    }
}

/**PARA AVEX DS **/

.box-avex {
    width: 100px;
    height: 100px;
    margin-right: 24px;
    margin-left: 24px
}


.black-skin .side-nav .sidenav-bg:after, .black-skin .side-nav .sidenav-bg.mask-strong:after {
    background: rgb(96, 96, 96);
}

@media (max-height: 992px) {
    .side-nav .logo-wrapper {
        height: 120px;
    }
}


.side-nav {
    background-color: #f1f1f1 !important
}

.black-skin .navbar {
    color: var(--white);
    background-color: rgb(40,46,54);
}

.black-skin .side-nav .collapsible li .collapsible-header:hover {
    background-color: var(--avex-primary);
}

.scrollbar {
    height: 100%;
    overflow-x: scroll;
    padding-bottom: 70px;
}

.force-overflow {
    min-height: 450px;
}

.scrollbar-primary::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--white);
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: var(--light-avex-grey);
}

.scrollbar-primary {
    scrollbar-color: #4285F4 #F5F5F5;
}

.scrollbar-danger::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #ff3547;
}

.scrollbar-danger {
    scrollbar-color: #ff3547 #F5F5F5;
}

.scrollbar-warning::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #FF8800;
}

.scrollbar-warning {
    scrollbar-color: #FF8800 #F5F5F5;
}

.scrollbar-success::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #00C851;
}

.scrollbar-success {
    scrollbar-color: #00C851 #F5F5F5;
}

.scrollbar-info::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #33b5e5;
}

.scrollbar-info {
    scrollbar-color: #33b5e5 #F5F5F5;
}

.scrollbar-default::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #2BBBAD;
}

.scrollbar-default {
    scrollbar-color: #2BBBAD #F5F5F5;
}

.scrollbar-secondary::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #aa66cc;
}

.scrollbar-secondary {
    scrollbar-color: #aa66cc #F5F5F5;
}

.justificar {
    text-align: justify;
}




/**PARA AVEX DS INPUTS**/
.black-skin input[type="email"]:focus:not([readonly]), .black-skin input[type="text"]:focus:not([readonly]), .black-skin input[type="password"]:focus:not([readonly]), .black-skin input[type="number"]:focus:not([readonly]), .black-skin textarea.md-textarea:focus:not([readonly]) {
    border-color: var(--avex-primary);
    -webkit-box-shadow: 0 1px 0 0 var(--avex-primary);
    box-shadow: none !important;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--avex-on-surface);
    background-color: var(--avex-surface) !important;
    background-clip: padding-box;
    border: 1px solid var(--avex-outline) !important;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

    .form-control:focus {
        color: #495057;
        background-color: var(--avex-surface);
        border-color: var(--avex-primary);
        outline: 0;
        box-shadow: none !important;
    }


.black-skin .md-outline input[type="text"]:focus:not([readonly]), .black-skin .md-outline input[type="password"]:focus:not([readonly]), .black-skin .md-outline input[type="email"]:focus:not([readonly]), .black-skin .md-outline input[type="url"]:focus:not([readonly]), .black-skin .md-outline input[type="time"]:focus:not([readonly]), .black-skin .md-outline input[type="date"]:focus:not([readonly]), .black-skin .md-outline input[type="datetime-local"]:focus:not([readonly]), .black-skin .md-outline input[type="tel"]:focus:not([readonly]), .black-skin .md-outline input[type="number"]:focus:not([readonly]), .black-skin .md-outline input[type="search-md"]:focus:not([readonly]), .black-skin .md-outline input[type="search"]:focus:not([readonly]), .black-skin .md-outline textarea:focus:not([readonly]) {
    border-color: var(--avex-primary);
    -webkit-box-shadow: inset 0 0 0 1px var(--avex-primary);
    box-shadow: none !important;
}

.black-skin .select-wrapper.colorful-select.md-form.md-outline input.select-dropdown:focus {
    border-color: var(--avex-primary);
    -webkit-box-shadow: inset 0 0 0 1px var(--avex-primary);
    box-shadow: none !important;
}

.select-wrapper:not(.md-outline) .select-dropdown:focus {
    border-bottom: 1px solid var(--avex-primary);
    -webkit-box-shadow: 0 1px 0 0 var(--avex-primary);
    box-shadow: none !important;
}

.black-skin .select-wrapper.colorful-select.md-form .dropdown-content li.active, .black-skin .select-wrapper.colorful-select.md-form .dropdown-content li a, .black-skin .select-wrapper.colorful-select.md-form .dropdown-content li span:hover {
    background-color: var(--avex-primary) !important;
}

.md-form input:not([type]), .md-form input[type="text"]:not(.browser-default), .md-form input[type="password"]:not(.browser-default), .md-form input[type="email"]:not(.browser-default), .md-form input[type="url"]:not(.browser-default), .md-form input[type="time"]:not(.browser-default), .md-form input[type="date"]:not(.browser-default), .md-form input[type="datetime"]:not(.browser-default), .md-form input[type="datetime-local"]:not(.browser-default), .md-form input[type="tel"]:not(.browser-default), .md-form input[type="number"]:not(.browser-default), .md-form input[type="search"]:not(.browser-default), .md-form input[type="phone"]:not(.browser-default), .md-form input[type="search-md"], .md-form textarea.md-textarea {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

.md-form.input-with-pre-icon .form-control {
    padding-left: 2.7rem !important;
}

.md-form.input-with-pre-icon .input-prefix {
    left: 16px;
    right: initial;
}


.md-form .input-prefix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: color .2s;
    transition: color .2s;
    color: rgba(0,0,0,0.87);
    pointer-events: none;
}

.md-form.input-with-pre-icon label {
    left: 36px;
    right: initial;
}

.md-form.md-outline input[type="text"], .md-form.md-outline input[type="password"], .md-form.md-outline input[type="email"], .md-form.md-outline input[type="url"], .md-form.md-outline input[type="time"], .md-form.md-outline input[type="date"], .md-form.md-outline input[type="datetime-local"], .md-form.md-outline input[type="tel"], .md-form.md-outline input[type="number"], .md-form.md-outline input[type="search-md"], .md-form.md-outline input[type="search"], .md-form.md-outline textarea.md-textarea {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #dadce0;
    border-radius: 4px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}



/*Comentado por prueba de input con icono*/
.md-form .input-prefix.active {
    color: var(--avex-primary);
}


.black-skin .md-form .prefix.active {
    color: var(--avex-primary) !important;
}

.md-form.md-outline textarea.md-textarea:focus:not([readonly]) {
    border-color: var(--avex-primary);
}

.select-wrapper.md-form.md-outline input.select-dropdown:focus {
    border-bottom: 1px solid var(--avex-primary);
    -webkit-box-shadow: 0 1px 0 0 var(--avex-primary);
    box-shadow: none !important;
}

.radio-orange-ds [type="radio"]:checked + label:after {
    border-color: #FF9800;
    background-color: #FF9800;
}

.radio-black-ds [type="radio"]:checked + label:after {
    border-color: #000000;
    background-color: #000000;
}

.radio-verde-ds [type="radio"]:checked + label:after {
    border-color: var(--avex-primary);
    background-color: var(--avex-primary);
}







/***    Select e Iput con el mismo grosor y color de letra + blanco de fondo         **/
.select-wrapper span.caret {
    z-index: 3;
    position: absolute;
    top: .8rem;
    right: 0;
    font-size: .63rem;
    color: var(--avex-on-surface);
}

.md-form.md-outline input[type="text"]:focus:not([readonly]), .md-form.md-outline input[type="password"]:focus:not([readonly]), .md-form.md-outline input[type="email"]:focus:not([readonly]), .md-form.md-outline input[type="url"]:focus:not([readonly]), .md-form.md-outline input[type="time"]:focus:not([readonly]), .md-form.md-outline input[type="date"]:focus:not([readonly]), .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]), .md-form.md-outline input[type="tel"]:focus:not([readonly]), .md-form.md-outline input[type="number"]:focus:not([readonly]), .md-form.md-outline input[type="search-md"]:focus:not([readonly]), .md-form.md-outline input[type="search"]:focus:not([readonly]), .md-form.md-outline textarea.md-textarea:focus:not([readonly]) {
    border-color: var(--avex-primary) !important;
    -webkit-box-shadow: inset 0 0 0 1px var(--avex-primary);
    box-shadow: none !important;
}

.select-wrapper.md-form.md-outline input.select-dropdown:focus {
    border-color: var(--avex-primary) !important;
    -webkit-box-shadow: inset 0 0 0 1px var(--avex-primary);
    box-shadow: none !important;
}

.md-form.md-outline input[type="text"]:focus:not([readonly]) + label, .md-form.md-outline input[type="password"]:focus:not([readonly]) + label, .md-form.md-outline input[type="email"]:focus:not([readonly]) + label, .md-form.md-outline input[type="url"]:focus:not([readonly]) + label, .md-form.md-outline input[type="time"]:focus:not([readonly]) + label, .md-form.md-outline input[type="date"]:focus:not([readonly]) + label, .md-form.md-outline input[type="datetime-local"]:focus:not([readonly]) + label, .md-form.md-outline input[type="tel"]:focus:not([readonly]) + label, .md-form.md-outline input[type="number"]:focus:not([readonly]) + label, .md-form.md-outline input[type="search-md"]:focus:not([readonly]) + label, .md-form.md-outline input[type="search"]:focus:not([readonly]) + label, .md-form.md-outline textarea.md-textarea:focus:not([readonly]) + label {
    color: var(--avex-primary) !important;
}

.black-skin .select-wrapper.colorful-select.md-form.md-outline input.select-dropdown:focus {
    border-color: var(--avex-primary) !important;
    -webkit-box-shadow: inset 0 0 0 1px var(--avex-primary) !important;
    box-shadow: inset 0 0 0 1px var(--avex-primary) !important;
}

.md-form.md-outline label {
    color: #282E36 !important;
}

.md-form.md-outline input[type="text"], .md-form.md-outline input[type="password"], .md-form.md-outline input[type="email"], .md-form.md-outline input[type="url"], .md-form.md-outline input[type="time"], .md-form.md-outline input[type="date"], .md-form.md-outline input[type="datetime-local"], .md-form.md-outline input[type="tel"], .md-form.md-outline input[type="number"], .md-form.md-outline input[type="search-md"], .md-form.md-outline input[type="search"], .md-form.md-outline textarea.md-textarea {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--avex-surface) !important;
    border: 1px solid #dadce0;
    border-radius: 4px;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}









@media(max-width: 992px) {
    .content-new {
        padding-left: 0;
        padding-right: 0;
        height: 100% !important;
        overflow-y: auto;
        padding-bottom: 10px;
    }

    .tableFixHead {
        overflow-y: auto;
        max-height: calc(100vh - 250px) !important;
    }

    .tableFixHead8 {
        overflow-y: auto;
        max-height: calc(100vh - 220px) !important;
    }

    .tableFixHead12 {
        overflow-y: auto;
        max-height: calc(100vh - 220px) !important;
    }

    .tableFixHead-500 {
        overflow-y: auto;
        max-height: calc(100vh - 200px) !important;
    }

    .scroll-template-2 {
        max-height: 100% !important;
        overflow-y: auto;
    }

    .paginador-btnExcel {
        position: absolute;
        bottom: 0;
        background: var(--avex-on-background);
        flex: 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .col-ds-20 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-ds-20 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 25.666667%;
        max-width: 24.666667%
    }
}


@media (min-width: 1200px) {
    .col-ds-large {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 20.666667%;
        max-width: 20.666667%;
    }

    .col-ds-small {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 12.666667%;
        max-width: 12.666667%;
    }

    .col-ds-medium {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.5%;
        max-width: 16.5%;
    }

    .col-ds-20 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-ds-40 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 40%;
        max-width: 40%;
    }

    .col-12-5-ds {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-por-16 {
        flex: 0 0 16%;
        max-width: 16%;
    }

    .col-por-9 {
        flex: 0 0 9%;
        max-width: 9%;
    }
}



@media (min-width: 1300px) {
    .col-ds-cm-large {
        flex: 0 0 15%;
        max-width: 15%;
    }
}

@media (max-width: 1300px) {

    .col-ds-large {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-ds-small {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-ds-medium {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-btn-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 1312px) {

    .tableFixHead4 {
        overflow-y: auto;
        height: calc(100vh - 230px) !important;
    }
}

@media (max-width: 900px) {
    .col-ds-large {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-ds-small {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-ds-medium {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .tableFixHead4 {
        overflow-y: auto;
        height: calc(100vh - 200px) !important;
    }
}



@media (max-width: 700px) {
    .col-ds-large {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-ds-small {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-ds-medium {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}



/*para col auto yfullwidthenmobile */
.col-bss-auto-sm-full {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.btn-estadovoucher-pendiente {
    background-color: #ff3547;
    border-radius: 4px;
    border: 1px solid #ff3547;
    display: inline-block;
    cursor: pointer;
    color: var(--white);
    font-size: 12px;
    padding: 3px 6px;
    text-decoration: none;
    font-weight: 500;
}

.btn-estadovoucher-procesar {
    background-color: #7DC963;
    border-radius: 4px;
    border: 1px solid #7DC963;
    display: inline-block;
    cursor: pointer;
    color: var(--white);
    font-size: 12px;
    padding: 3px 6px;
    text-decoration: none;
    font-weight: 500;
}

.btn-estadovoucher-recepcionar {
    background-color: var(--avex-primary);
    border-radius: 4px;
    border: 1px solid var(--avex-primary);
    display: inline-block;
    cursor: pointer;
    color: var(--white);
    font-size: 12px;
    padding: 3px 6px;
    text-decoration: none;
    font-weight: 500;
}

@media (max-width: 700px) {
    .col-bss-auto-sm-full {
        -ms-flex-preferred-size: 0;
        -ms-flex-positive: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 16px;
    }
}


.scroll-template-2 {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto;
}

.vertical-middle {
    vertical-align: middle !important;
}

.cursor-pointer {
    cursor: pointer;
}



/*#region check*/
/*Check especiales*/
/* Create a custom checkbox */

.center-check {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: transparent;
    border: 1px solid var(--avex-primary);
    border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: var(transparent);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: var(--avex-primary);
    border-radius: 4px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 12px;
    top: 5px;
    width: 6px;
    height: 17px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: transparent;
    border: 2px solid var(--avex-primary);
    border-radius: 3px;
}

.container .checkmark:after {
    left: 9px;
    top: 4px;
    width: 8px;
    height: 14px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/*CHECK PEQUEÑO*/

/* Create a custom checkbox */
.checkmark-ds {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--avex-surfce);
    border: 2px solid var(--avex-primary);
    border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark-ds {
    background-color: var(--avex-surfce);
    cursor: pointer
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark-ds {
    background-color: var(--avex-primary);
    border-radius: 4px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-ds:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark-ds:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark-ds:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*#endregion*/

/* Style Generica vistas */
.headingh4 {
    font-size: 18px !important;
}

.Body-normal {
    font-size: 16px !important;
}

.accordion > .card-bss.card {
    overflow: inherit !important;
    border-radius: 8px;
}

.dropdown-primary .dropdown-content li.active, .dropdown-primary .dropdown-content li a, .dropdown-primary .dropdown-content li span:hover {
    background-color: var(--header-tabla) !important;
}

.dropdown-content li > a, .dropdown-content li > span {
    display: block;
    padding: .5rem;
    font-size: .9rem;
    color: var(--avex-on-surface);
}

.select-wrapper.md-form.colorful-select > ul li.select-toggle-all:hover label {
    color: var(--white) !important;
}

.tb-bss-pointer {
    cursor: pointer;
}

.paginador-btnExcel {
    position: fixed;
    bottom: 0;
    background: var(--avex-background)
}

@media(max-width: 992px) {
    .paginador-btnExcel {
        position: relative !important;
        bottom: 0;
        background: var(--avex-background);
        flex: 100%;
        max-width: 100%;
    }

    .tableFixHead-500 {
        overflow-y: auto;
        max-height: calc(100vh) !important;
    }
}


.btn-secondary:not([disabled]):not(.disabled):active, .btn-secondary:not([disabled]):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    background-color: var(--avex-surface) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/*---- nesesarias para slcajaxpk*/
.btn-secondary.dropdown-toggle:hover, .btn-secondary.dropdown-toggle:focus {
    background-color: var(--avex-surface) !important;
    color: var(--black) !important;
    border: 1px solid #dadfea !important;
    transition: all .3s !important;
}

/*---- nesesarias para slcajaxpk*/
.btn-secondary:hover {
    color: var(--black) !important;
    background-color: var(--white);
    border: 1px solid #dadfea !important;
}

/*------ nesesario para el ajax select icker p*/
.btn-secondary.dropdown-toggle {
    background-color: var(--avex-surface) !important;
    color: var(--black) !important
}

    /*------ nesesario para el ajax select icker p*/
    .btn-secondary.dropdown-toggle.active {
        background-color: var(--white) !important;
        color: black !important;
        border: 1px solid #dadfea !important;
    }


.btnCrearCancelar {
    background-color: white;
    border-radius: 28px;
    border: 1px solid #C0C0C0;
    cursor: pointer;
    color: #282E36;
    font-size: 15px;
    padding: 7px 0px;
    text-decoration: none;
    width: 140px;
    font-weight: 500;
}


    .btnCrearCancelar:hover {
        color: var(--secondary-light-gray) !important;
        border-color: var(--secondary-light-gray) !important;
    }

    .btnCrearCancelar:active {
        color: var(--secondary-dark-gray:) !important;
        border-color: var(--secondary-dark-gray:) !important;
    }

.btnCancelarConfirmar {
    background-color: var(--green-ds) !important;
    border-radius: 28px !important;
    border: 1px solid var(--green-ds) !important;
    cursor: pointer !important;
    color: var(--white) !important;
    font-size: 15px !important;
    padding: 7px 0px !important;
    text-decoration: none !important;
    width: 140px !important;
    font-weight: 500 !important;
}

    .btnCancelarConfirmar:hover {
        background-color: var(--light-green) !important;
        border-color: var(--light-green) !important;
    }

    .btnCancelarConfirmar:active {
        background-color: var(--dark-green) !important;
        border-color: var(--dark-green) !important;
    }




/*#endregion Por Revisar*/

/*#region Efecto de precargado*/

.skeleton-box {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #b1aeb1 !important;
}

    .skeleton-box::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
        animation: shimmer 2s infinite;
        content: "";
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.blog-post__headline {
    font-size: 1.25em;
    font-weight: bold;
}

.blog-post__meta {
    font-size: 0.85em;
    color: #6b6b6b;
}

.o-media {
    display: flex;
}

.o-media__body {
    flex-grow: 1;
    margin-left: 1em;
}

.o-vertical-spacing > * + * {
    margin-top: 0.75em;
}

.o-vertical-spacing--l > * + * {
    margin-top: 2em;
}

* {
    box-sizing: border-box;
}

/*#endregion*/

/*#region imagenes + iconos*/

.icon-button {
    width: 14px;
    height: 14px;
}

.img-pin {
    width: 15px;
    height: 20px;
}


.icon-info {
    margin: 4px 8px 0px 8px !important;
    padding: 6px !important;
    display: block;
    width: 14px;
    height: 14px;
    background: url(/Content/img/detalle-info-A.png);
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
}

    .icon-info:hover {
        margin: 4px 8px 0px 8px !important;
        padding: 6px !important;
        display: block;
        width: 14px;
        height: 14px;
        background: url(/Content/img/detalle-info-A.png);
        background-repeat: no-repeat;
        background-size: cover;
        float: right;
    }
/*#endregion imagenes*/

/*#region Modales*/
.modal-footer {
    background-color: var(--avex-surface-2) !important;
    border-radius: 0 0 5px 5px;
}

.modal-header {
    background-color: var(--avex-surface-2) !important;
}


@media (min-width: 992px) {
    .modal .modal-side {
        max-width: 400px;
        width: auto;
    }
}

.modal-alert-ds {
    margin: 0px 0 0 auto !important;
    position: fixed;
    transition: all 0.5s ease-in-out 0s;
    z-index: 20020;
    top: 20px;
    right: 10px;
    width: 400px;
    max-height: calc(100vh - 80px);
    min-height: 120px;
    height: auto;
}

.h-modal-ds {
    overflow-y: auto;
    min-height: calc(100vh - 200px);
}
/*#endregion Modales*/

/*#region Stepp*/
.step-progress {
    align-self: auto;
    align-items: center;
    background: transparent;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
}


    .step-progress .step {
        align-items: center;
        align-self: auto;
        color: transparent;
        display: flex;
        justify-content: center;
    }

        .step-progress .step.active .point {
            background: white;
            border: 5px solid transparent;
            color: var(--avex-on-surface);
            transition: all 0.2s;
            transition-delay: 0.3s;
            box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--avex-on-surface);
        }

        .step-progress .step.active .progress:after {
            width: 100%;
            transition: width 0.3s ease;
        }

        .step-progress .step .point {
            display: flex;
            border: none;
            border-radius: 50%;
            color: var(--avex-gray70);
            font-weight: bold;
            height: 45px;
            width: 45px !important;
            line-height: 30px;
            width: 30px;
            text-align: center;
            z-index: 1;
            align-items: center;
            justify-content: center;
            font-size: 35px;
            background-color: white;
            box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--avex-gray90);
        }

        .step-progress .step:nth-child(1) .point::before {
            margin-top: 80px;
            content: "Selecciona transfer";
            position: absolute;
            color: var(--avex-gray);
            font-size: 1rem;
            line-height: 1
        }

        .step-progress .step:nth-child(2) .point::before {
            margin-top: 80px;
            content: "Pago";
            position: absolute;
            color: var(--avex-gray70);
            font-size: 1rem;
            line-height: 1
        }

        .step-progress .step:nth-child(3) .point::before {
            margin-top: 80px;
            content: "Confirmación";
            position: absolute;
            color: var(--avex-gray70);
            font-size: 1rem;
            line-height: 1
        }


        .step-progress .step.active .point::before {
            color: var(--avex-on-surface);
        }


        .step-progress .step .progress {
            pointer-events: none;
            /*width: 125px;*/
            width: 7.5rem;
            background: var(--avex-gray90);
            height: 5px;
            margin: 0 -3px;
            position: relative;
            z-index: 0;
        }

            .step-progress .step .progress:after {
                content: '';
                display: block;
                width: 0%;
                height: 100%;
                background: var(--avex-on-surface);
            }

.solicitud-transfer .step-progress {
    align-self: auto;
    align-items: center;
    background: transparent;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
}


    .solicitud-transfer .step-progress .step {
        align-items: center;
        align-self: auto;
        color: transparent;
        display: flex;
        justify-content: center;
    }

        .solicitud-transfer .step-progress .step.active .point {
            background: white;
            border: 5px solid transparent;
            color: var(--avex-on-surface);
            transition: all 0.2s;
            transition-delay: 0.3s;
            box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--avex-on-surface);
        }

        .solicitud-transfer .step-progress .step.active .progress:after {
            width: 100%;
            transition: width 0.3s ease;
        }

        .solicitud-transfer .step-progress .step .point {
            display: flex;
            border: none;
            border-radius: 50%;
            color: var(--avex-gray70);
            font-weight: bold;
            height: 35px;
            width: 35px !important;
            line-height: 30px;
            width: 30px;
            text-align: center;
            z-index: 1;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            background-color: white;
            box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--avex-gray90);
        }

        .solicitud-transfer .step-progress .step:nth-child(1) .point::before {
            margin-top: 80px;
            content: "Selecciona transfer";
            position: absolute;
            color: var(--avex-gray);
            font-size: 1rem;
            line-height: 1
        }

        .solicitud-transfer .step-progress .step:nth-child(2) .point::before {
            margin-top: 80px;
            content: "Pago";
            position: absolute;
            color: var(--avex-gray70);
            font-size: 1rem;
            line-height: 1
        }

        .solicitud-transfer .step-progress .step:nth-child(3) .point::before {
            margin-top: 80px;
            content: "Confirmación";
            position: absolute;
            color: var(--avex-gray70);
            font-size: 1rem;
            line-height: 1
        }


        .solicitud-transfer .step-progress .step.active .point::before {
            color: var(--avex-on-surface);
        }


        .solicitud-transfer .step-progress .step .progress {
            pointer-events: none;
            /*width: 125px;*/
            width: 7.5rem;
            background: var(--avex-gray90);
            height: 5px;
            margin: 0 -3px;
            position: relative;
            z-index: 0;
        }

            .solicitud-transfer .step-progress .step .progress:after {
                content: '';
                display: block;
                width: 0%;
                height: 100%;
                background: var(--avex-on-surface);
            }

@media (max-width: 768px) {
    .step-progress .step .progress {
        width: 4rem;
    }
}

.transfer-img-webpay {
    height: 60px;
    width: auto;
}

/*#endregion Stepp*/

/*#region Select Picker pegar en vista*/


/*Codigo para Select picker o select ajax*/

/*

.bootstrap-select > .dropdown-toggle {
    width: 100%;
    padding-right: 0px;
    z-index: 1;
    padding: 0 .75rem !important;
    margin: 0 !important;
    display: flex !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 89% !important;
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    text-transform: none !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
   color: var(--avex-gray) !important;
    font-weight: 400;
    padding: .375rem 0;
}

.btn {
    margin: .375rem;
    color: inherit;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    border: 0;
    border-radius: .125rem;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: none !important;
    -webkit-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;
    padding: .84rem 2.14rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    border-color: var(--turquoise);
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    outline: none !important;
    outline-offset: -2px;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333 !important;
    outline: none !important;
    outline-offset: -2px;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .45em solid;
    border-right: .25em solid transparent;
    border-bottom: 0;
    border-left: .25em solid transparent;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.btn-link:hover {
    color: #0056b3;
    text-decoration: none !important;
}


*/

/*#endregion*/

/*#region Iframe*/

.col-input {
    flex: 0 0 12.5%;
    max-width: 12.5%
}

.d-flex-ds {
    display: flex;
    flex-direction: row;
}

.d-flex-wrap-ds {
    display: flex;
}

.d-flex-colum {
    display: flex;
    flex-direction: column;
}

.d-flex-end {
    justify-content: end;
}

@media (max-width: 1250px) {
    .col-input {
        flex: 0 0 15.3%;
        max-width: 15.3%;
    }
}

@media (min-width: 768px) {
    .d-flex-start {
        display: flex;
        justify-content: start;
    }

    .d-flex-center {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .col-input {
        flex: 0 0 100%;
        max-width: 100%
    }

    .d-flex-ds {
        display: flex;
        flex-direction: column
    }

    .d-flex-wrap-ds {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 550px) {
    .div-logo2 {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .card-deck .card-bss {
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px;
    }
}

@media (min-width: 1366px) {
    .flex-fill-ds {
        flex: 0 0 14.28%;
        max-width: 14.28%;
    }
}
/*#endregion*/

/*#region Graficos*/
@media (min-width: 1366px) {
    .h-card-ds {
        max-height: 20rem;
    }
}

@media (max-width: 1366px) {
    .h-card-ds {
        max-height: 18rem;
    }
}

/*#endregion*/

/*#region Card*/
.card-header {
    background-color: var(--avex-surface-1);
    color: var(--avex-on-surface) !important;
}

.card {
    background-color: var(--avex-background);
    color: var(--avex-on-surface) !important;
    border: 1px solid var(--border-card);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 2px 12px 0 rgba(0,0,0,0.08);
    -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10), 0 2px 12px 0 rgba(0,0,0,0.08);
}


/*#endregion*/

.overflow-x-scroll-ds {
    overflow-x: auto;
}

.datepicker td, .datepicker th {
    padding: 5px 10px !important;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-image: none;
    background-color: var(--avex-gray) !important
}


table.table-hover tbody tr:hover {
    background-color: var(--avex-surface) !important;
    -webkit-transition: .5s;
    transition: .5s;
    color: var(--avex-on-surface);
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: #495057;
}





@media (max-width: 1081px) {
    .w-icon-mobile {
        text-align: center;
        width: auto;
    }
}

.lbl-subtext {
    font-size: 13px;
    display: inline-flex;
}



.modal-header .close {
    color: var(--avex-on-surface)
}

.modal-body {
    background: var(--avex-background)
}

.dropdown-content li {
    color: var(--avex-on-surface)
}

.select-wrapper.md-form.md-outline input.select-dropdown {
    padding: 0.375rem 0.75rem;
    color: var(--avex-on-surface) !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    color: var(--avex-on-surface) !important
}

.dropdown-toggle::after {
    color: var(--avex-on-surface);
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .45em solid;
    border-right: .25em solid transparent;
    border-bottom: 0;
    border-left: .25em solid transparent;
    margin-top: auto !important;
    margin-bottom: auto !important;
}


.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: var(--avex-primary-table);
}




.btn-default.dropdown-toggle:hover, .btn-default.dropdown-toggle:focus {
    background-color: var(--avex-surface) !important;
}

.btn-default.dropdown-toggle {
    background-color: var(--avex-surface) !important;
}

.btn-default:not([disabled]):not(.disabled):active, .btn-default:not([disabled]):not(.disabled).active, .show > .btn-default.dropdown-toggle {
    background-color: var(--avex-surface) !important;
}


.modal-content {
    background-color: var(--avex-background);
}


.form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:after {
    background-color: var(--avex-primary)
}

.form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:before, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:before, label.btn input[type="radio"].with-gap:checked + label:after {
    border: 2px solid var(--avex-primary);
}


@font-face {
    font-family: 'icon-ds-avex-bss';
    src: url('../../fonts/fonts-custom/icon-ds-avex-bss.eot?24236390');
    src: url('../../fonts/fonts-custom/icon-ds-avex-bss.eot?24236390#iefix') format('embedded-opentype'), url('../../fonts/fonts-custom/icon-ds-avex-bss.woff2?24236390') format('woff2'), url('../../fonts/fonts-custom/icon-ds-avex-bss.woff?24236390') format('woff'), url('../../fonts/fonts-custom/icon-ds-avex-bss.ttf?24236390') format('truetype'), url('../../fonts/fonts-custom/icon-ds-avex-bss.svg?24236390#icon-ds-avex-bss') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'icon-ds-avex-bss';
    src: url('../font/icon-ds-avex-bss.svg?24236390#icon-ds-avex-bss') format('svg');
  }
}
*/
[class^="icon-avex"]:before, [class*=" icon-avex"]:before {
    font-family: "icon-ds-avex-bss";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.icon-avex-pdf-bss:before {
    content: '\e800';
}
/* '' */
.icon-avex-excel-bss:before {
    content: '\e801';
}
/* '' */
.icon-avex-reenvio-correo-bss:before {
    content: '\e802';
}
/* '' */
.icon-avex-solicitud-encargo-bss:before {
    content: '\e803';
}
/* '' */
.icon-avex-solicitud-sistema-externo-bss:before {
    content: '\e804';
}
/* '' */
.icon-avex-valuesite-bss:before {
    content: '\e805';
}
/* '' */
.icon-avex-avex-bss:before {
    content: '\e806';
}
/* '' */
.icon-avex-descargar-manual-bss:before {
    content: '\e807';
}
/* '' */
.icon-avex-asignar-ruta-bss:before {
    content: '\e808';
}
/* '' */
.icon-avex-iso-valuesite-bss:before {
    content: '\e809';
}
/* '' */
.icon-img_traslado_v2:before {
    content: '\e80a';
}
/* '' */
.icon-avex-plane-up-bss:before {
    content: '\e80b';
}
/* '' */
.icon-avex-asignar-automatico-bss:before {
    content: '\e80c';
}
/* '' */
.icon-avex-actualizar-saldo:before {
    content: '\e80d';
}
/* '' */
.icon-avex-pin-drop:before {
    content: '\e80e';
}
/* '' */
.icon-avex-transfer:before {
    content: '\e80f';
}
/* '' */
.icon-avex-traslado:before {
    content: '\e810';
}
/* '' */
.icon-avex-encargo:before {
    content: '\e811';
}
/* '' */
.icon-avex-traslado-encargo:before {
    content: '\e812';
}
/* '' */
.icon-img_transfer:before {
    content: '\e813';
}
/* '' */
.icon-avex-convencional:before {
    content: '\e814';
}
/* '' */
.icon-avex-cabina:before {
    content: '\e816';
}
/* '' */
.icon-avex-ver:before {
    content: '\e818';
}
/* '' */
.icon-avex-cerrar:before {
    content: '\e819';
}
/* '' */
.icon-avex-check:before {
    content: '\e81a';
}
/* '' */
.icon-avex-enviar:before {
    content: '\e81b';
}
/* '' */
.icon-avex-grupo-msg-1:before {
    content: '\e81c';
}
/* '' */
.icon-avex-grupo-msg-2:before {
    content: '\e81d';
}
/* '' */
.icon-avex-msg-actualizar:before {
    content: '\e81e';
}
/* '' */
.icon-avex-msg-extendido:before {
    content: '\e81f';
}
/* '' */
.icon-avex-msg-nuevo:before {
    content: '\e820';
}
/* '' */
.icon-avex-responder:before {
    content: '\e821';
}
/* '' */
.icon-avex-user:before {
    content: '\e822';
}
/* '' */
.icon-avex-observacion:before {
    content: '\e823';
}
/* '' */
.icon-avex-user-vip:before {
    content: '\e824';
}
/* '' */
.icon-avex-correo:before {
    content: '\e825';
}
/* '' */
.icon-img_encargo_v2:before {
    content: '\e826';
}
/* '' */
.icon-avex-panel:before {
    content: '\e827';
}
/* '' */
.icon-avex-enviarmsg:before {
    content: '\e828';
}
/* '' */
.icon-avex-particular:before {
    content: '\e82a';
}
/* '' */
.icon-spinner:before {
    content: '\f110';
}
/* '' */


.content-card-bg-simbologia {
    background: var(--avex-surface-1);
    border: solid 1px var(--avex-surface-3);
    border-radius: 8px;
}

.w-icons-general label {
    line-height: 1.3rem;
    font-size: 90%;
    color: var(--avex-on-surface);
    margin-top: 8px;
}


::selection {
    background: var(--avex-primary);
    color: var(--avex-on-primary)
}


.line-h-normal {
    line-height: normal;
}






.img-rt-SA {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 200px;
    height: auto;
    top: 1.5rem;
}

.img-fondo-rt {
    height: 100%;
    width: 100%;
    max-height: calc(100vh);
}

.box2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #272E38;
}

.img-fondo-rt-responsive {
    display: none
}

@media (max-width: 992px) {
    .box2 {
        position: relative;
    }

    .img-fondo-rt {
        display: none
    }

    .img-fondo-rt-responsive {
        width: 100%;
        height: auto;
        display: block
    }
}

@media (min-width: 1920px) {
    .img-rt-SA {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
        width: 200px;
        height: auto;
        top: 2.5rem;
    }
}

.titulo-label-input-ds {
    font-weight: 500;
    color: var(--avex-on-surface);
    /*color: red*/
}

.marcar-fila {
    background: var(--avex-primary-container);
    color: var(--avex-on-primary-container)
}




@media (max-width: 992px) {
    .mp-3-last-ds {
        padding-bottom: 1rem !important;
    }
}




@media (min-width: 992px) {
    .col-9-encargo-obs {
        max-width: 70%;
        flex: 0 0 70%;
    }

    .col-3-encargo-obs {
        max-width: 30%;
        flex: 0 0 30%;
    }
}

.min-w-700px {
    min-width: 700px
}

.h-40px {
    height: 40px
}

@media (min-width: 1920px) {
    .cortar-texto-240 {
        max-width: 480px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (min-width: 1440px) {
    .cortar-texto-240 {
        max-width: 400px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (min-width: 1500px) {
    .cortar-texto-240 {
        max-width: 650px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

.ft-table-sticky {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--avex-surface-1)
}


.icon-simbologia {
    background: var(--avex-primary);
    color: var(--avex-on-primary);
    height: auto;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*Mensajeria*/

.h-chat-interno {
    border-left: 1px solid #E6E6E9;
    display: flex;
    justify-content: space-between;
    align-content: center;
    vertical-align: central;
    flex-direction: column;
    height: 31rem;
    max-height: 31rem
}


.h-b4-chat {
    /*max-height: 16rem;
    height: 23rem;*/
    max-height: 20rem;
    height: auto;
    min-width: 10rem;
}

.d-flex-center-ds {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}



.d-flex-center-ds {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid;
    border-color: #dbdcef;
    border-right-color: #00c5cc;
    animation: spinner-d3wgkg 1s infinite linear;
}

.content-card-bg-surface {
    background: var(--avex-surface);
    border: solid 1px var(--avex-surface-2);
    border-radius: 8px;
}

@keyframes spinner-d3wgkg {
    to {
        transform: rotate(1turn);
    }
}

.icon-ds {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    padding: 5px;
    height: 24px;
    width: 24px;
}


li.bg-acciones-icon {
    border-bottom: 1px solid var(--avex-surface-5)
}

    li.bg-acciones-icon:hover {
        background-color: var(--avex-primary-container)
    }

    li.bg-acciones-icon:last-of-type {
        border-bottom: none;
    }

@media (max-width: 1280px) {
    .btn-responsive {
        width: 130px !important
    }
}



.Modal-Msg {
    background: white;
    position: absolute;
    top: 60px;
    right: 5px;
    z-index: 1050;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 25px 0px rgb(0 0 0 / 50%);
    width: 800px;
}

.icon-responsive-close {
    display: none
}

@media (max-width: 1200px) {
    .Modal-Msg {
        width: 100% !important;
        overflow-y: scroll;
        height: calc(100vh - 100px);
    }

    .icon-responsive-close {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        margin-left: 10px;
    }
}

.icon-b4-menu {
    font-size: 22px;
    height: 20px;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.justify-content-center .icon-msg-new {
    background: red
}

.grid-menu {
    display: grid;
    grid-template-columns: 0.5fr 6fr 0.1fr;
}

.h-img-new-msg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25rem;
}

.form-control:disabled {
    background-color: var(--avex-surface-4) !important;
    opacity: 1;
}

.img-fondo-rt-pass-resp {
    display: none
}

.img-fondo-rt-pass {
    display: block
}

.text-recuperar-pass {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    line-height: 1.1;
    text-align: center;
}

.text-recuperar-pass-resp {
    color: black;
    display: none;
    text-align: center
}

.contenedor-form {
    height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contenedor-form-sa {
    height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



@media (max-width: 992px) {
    .img-fondo-rt-pass-resp {
        display: block
    }

    .img-fondo-rt-pass {
        display: none
    }

    .text-recuperar-pass {
        display: none
    }

    .text-recuperar-pass-resp {
        color: black;
        display: block
    }

    .contenedor-form {
        justify-content: start !important;
        height: calc(100vh - 300px) !important;
        margin-top: 32px;
    }

    .contenedor-form-sa {
        height: 80%;
    }
}

.m-t-negativo-40 {
    margin-top: -40px;
}

@media (max-width: 1300px) {
    .m-t-negativo-40 {
        margin-top: 0px;
    }
}

@media (max-width: 800px) {
    .contenedor-form-sa {
        height: auto;
    }

    .m-t-negativo-40 {
        margin-top: 22px;
    }
}


.form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 1;
}


.form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 1;
}

.bg-mis-tarjertas {
    height: calc(100vh - 90px);
    overflow: auto;
}


@media (max-width: 500px) {
    .bg-mis-tarjertas {
        height: auto !important;
        overflow: auto;
    }
}

.border-convenio {
    border: 1px solid var(--avex-surface-5);
    border-radius: 8px;
}

.line-break-anywhere {
    line-break: anywhere;
}

.opacity-8 {
    opacity: 0.8
}

.opacity-4 {
    opacity: 0.4
}


.txt-direccion {
    max-width: 200px;
    cursor: context-menu;
}

.txt-direccion-160 {
    max-width: 160px;
    cursor: pointer;
}

.ocultar-input {
    display: none;
}




.d-flex-card-chart {
    display: flex;
    /* justify-content: center;
    align-items: center;*/
    flex-wrap: wrap;
}

@media (max-width: 992px) {
    .d-flex-card-chart {
        flex-direction: column
    }
}

.gap-8 {
    gap: 8px
}

.flex-basis-10 {
    flex-basis: 10%
}

.flex-basis-20 {
    flex-basis: 20%
}

.flex-basis-30 {
    flex-basis: 30%
}

.flex-basis-40 {
    flex-basis: 40%
}

.flex-basis-50 {
    flex-basis: 50%
}

.flex-basis-60 {
    flex-basis: 60%
}

.flex-basis-70 {
    flex-basis: 70%
}

.flex-basis-80 {
    flex-basis: 80%
}

.flex-basis-90 {
    flex-basis: 90%
}

@media (min-width: 1366px) {
    .flex-basis-xxl-10 {
        flex-basis: 10%
    }

    .flex-basis-xxl-20 {
        flex-basis: 20%
    }

    .flex-basis-xxl-30 {
        flex-basis: 30%
    }

    .flex-basis-xxl-40 {
        flex-basis: 40%
    }

    .flex-basis-xxl-50 {
        flex-basis: 50%
    }

    .flex-basis-xxl-60 {
        flex-basis: 60%
    }

    .flex-basis-xxl-70 {
        flex-basis: 70%
    }

    .flex-basis-xxl-80 {
        flex-basis: 80%
    }

    .flex-basis-xxl-90 {
        flex-basis: 90%
    }
}

@media (min-width: 1200px) {
    .flex-basis-xl-10 {
        flex-basis: 10%
    }

    .flex-basis-xl-20 {
        flex-basis: 20%
    }

    .flex-basis-xl-30 {
        flex-basis: 30%
    }

    .flex-basis-xl-40 {
        flex-basis: 40%
    }

    .flex-basis-xl-50 {
        flex-basis: 50%
    }

    .flex-basis-xl-60 {
        flex-basis: 60%
    }

    .flex-basis-xl-70 {
        flex-basis: 70%
    }

    .flex-basis-xl-80 {
        flex-basis: 80%
    }

    .flex-basis-xl-90 {
        flex-basis: 90%
    }
}

@media (min-width: 992px) {
    .flex-basis-lg-10 {
        flex-basis: 10%
    }


    .flex-basis-lg-20 {
        flex-basis: 20%
    }


    .flex-basis-lg-30 {
        flex-basis: 30%
    }


    .flex-basis-lg-40 {
        flex-basis: 40%
    }

    .flex-basis-lg-50 {
        flex-basis: 50%
    }

    .flex-basis-lg-60 {
        flex-basis: 60%
    }

    .flex-basis-lg-70 {
        flex-basis: 70%
    }

    .flex-basis-lg-80 {
        flex-basis: 80%
    }

    .flex-basis-lg-90 {
        flex-basis: 90%
    }
}

@media (min-width: 768px) {
    .flex-basis-md-10 {
        flex-basis: 10%
    }

    .flex-basis-md-20 {
        flex-basis: 20%
    }

    .flex-basis-md-30 {
        flex-basis: 30%
    }

    .flex-basis-md-40 {
        flex-basis: 40%
    }

    .flex-basis-md-50 {
        flex-basis: 50%
    }

    .flex-basis-md-60 {
        flex-basis: 60%
    }

    .flex-basis-md-70 {
        flex-basis: 70%
    }

    .flex-basis-md-80 {
        flex-basis: 80%
    }

    .flex-basis-md-90 {
        flex-basis: 90%
    }
}

@media (min-width: 576px) {
    .flex-basis-sm-10 {
        flex-basis: 10%
    }

    .flex-basis-sm-20 {
        flex-basis: 20%
    }

    .flex-basis-sm-30 {
        flex-basis: 30%
    }

    .flex-basis-sm-40 {
        flex-basis: 40%
    }

    .flex-basis-sm-50 {
        flex-basis: 50%
    }

    .flex-basis-sm-60 {
        flex-basis: 60%
    }

    .flex-basis-sm-70 {
        flex-basis: 70%
    }

    .flex-basis-sm-80 {
        flex-basis: 80%
    }

    .flex-basis-sm-90 {
        flex-basis: 90%
    }
}

.h-chart-centro-costo {
    padding: 0 10px;
    max-height: 200px !important;
    position: absolute
}

@media only screen and (max-width: 770px) {
    .flex-basis-30 {
        flex-basis: initial !important
    }

    .h-chart-centro-costo {
        position: relative
    }

    .card-resp-chart {
        height: 380px;
    }
}

.text-red-eta {
    color: #D61516;
    text-decoration: underline;
    font-weight: bold;
}

.d-flex-chart-card {
    display: flex;
    justify-content: center
}

@media (max-width: 992px) {
    .d-flex-chart-card {
        flex-direction: column
    }
}

._card-direciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

    ._card-direciones ._icon-direccion {
        flex: 0 0 3%;
    }

    ._card-direciones ._title_direccion {
        flex: 1 0 12%;
    }

    ._card-direciones ._text-direccion {
        flex: 1 0 78%;
    }


._card-pasajero {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

    ._card-pasajero ._icon-direccion {
        flex: 0.2 0 4%;
    }

    ._card-pasajero ._text-nombre {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    ._card-pasajero ._pasajeros {
        flex: 1 0 3%;
    }

    ._card-pasajero ._ver-pasajeros {
        flex: 9 0 5%;
    }


.container-div {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Muestra 4 columnas en una fila */
    column-gap: 8px; /* Espacio entre elementos */
}

@media (max-width: 992px) {
    .container-div {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Muestra 4 columnas en una fila */
        grid-gap: 8px; /* Espacio entre elementos */
    }
}

.text-underline {
    text-decoration: underline;
}

#direcciones .p-card-direcion:first-child {
    padding-top: 8px !important
}

.p-card-direcion {
    padding-top: 8px !important
}

#direcciones .p-card-direcion:last-of-type {
    padding-bottom: 8px !important
}

.img-pin-negro {
    width: 40px;
    height: 30px
}

.icon-drag {
    visibility: hidden
}

table.table-hover tbody tr:hover .icon-drag {
    visibility: visible
}

.img-pin-negro-user {
    width: 50px;
    height: 50px;
    border-radius: 8px;
}

.tableFixHead-100.border-table-bottom td {
    border-bottom: 1px solid var(--avex-surface-5)
}

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

/*.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--avex-exito);
    border-color: var(--avex-exito);
    text-transform: capitalize !important;
}
*/
.btn-ds.disabled {
    background-color: var(--avex-secondary) !important;
    border: 1px solid var(--avex-secondary) !important;
    color: var(--avex-on-secondary) !important;
    opacity: 0.6;
}

.border-icon-table {
    border-right: 2px solid #ECECEF;
}

.mdb-select-fixed.select-wrapper.md-form.md-outline .dropdown-content {
    /*background: red !important;*/
    position: relative !important;
    top: 0 !important;
}

@media only screen and (max-width: 992px) {
    .scroll-y-mob {
        overflow-y: scroll
    }
}

.h-container-page {
    height: calc(100vh - 90px);
    overflow: auto;
}

@media (min-width: 992px) {
    .col-tarificaion-filter-small {
        flex: 0 0 15%;
        max-width: 15%;
    }

    .col-tarificaion-filter-large {
        flex: 0 0 17.778%;
        max-width: 17.778%;
    }

    .col-md-2-user {
        flex: 0 0 10.666667%;
        max-width: 10.666667%;
    }
}

.w-45 {
    width: 45%;
}

.font-size-default {
    font-size: 14px
}

.nav-tabs .nav-item {
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link {
    border-top: none;
    border-right: none;
    border-left: none;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 4px 0px;
}

.disabled-ds .checkmark-ds {
    border: 2px solid #ABABAE;
}

.disabled-ds label {
    color: #ABABAE;
}

.popover-body {
    padding: .5rem .75rem;
    color: #212529;
    line-height: 1.3;
    font-size: 12px;
    font-weight: 500;
    background-color: #F5F5F5;
    border-radius: 5px !important;
}

.popover {
    border-radius: 5px !important;
}

.bs-popover-auto[x-placement^=right] > .arrow::after, .bs-popover-right > .arrow::after {
    border-right-color: #F5F5F5;
}

.accordion > .card > .card-header {
    border-radius: 0;
    margin-bottom: -1px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.icon-control-direciones {
    background: var(--avex-on-surface);
    color: var(--avex-surface);
    padding: 4px;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}


#txtDireccionOrigen-divCardDireccion.px-3 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    margin: 0 !important
}

#txtDireccionDestino-divCardDireccion.px-3 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    margin: 0 !important
}


.nav-tabs .nav-item.show .nav-link .error,
.nav-tabs .nav-link.error.active {
    color: #900;
    background-color: var(--avex-background);
    border-bottom: 2px solid #900;
    font-weight: 500;
}


.popover-avex-ds {
    position: relative;
}

.popover-avex-body-ds {
    display: none;
    position: fixed;
    width: fit-content;
    height: fit-content;
    inset: 0px;
    margin: auto;
    padding: 8px;
    z-index: 5;
    background: white;
    max-height: calc(100vh - 100px);
    overflow: auto;
    font-size: 14px;
    filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.20));
    border-radius: 8px;
    margin-top: 10px;
}


    .popover-avex-ds:hover .popover-avex-body-ds,
    .popover-avex-body-ds:hover {
        display: block;
    }

.footer {
    background-color: lightblue;
    padding: 10px;
    margin-top: auto; /* Coloca el footer siempre al final */
}

.icon-h-w-default {
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
}


.table-restriccion-lbl {
    overflow-y: auto;
    max-height: 168px
}

    .table-restriccion-lbl thead tr {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: white;
    }

.bootstrap-select.btn-group .dropdown-menu li.selected a span.text {
    background-color: var(--avex-secondary);
    color: var(--avex-on-secondary);
}

.font-roboto {
    font-family: Roboto;
}



















.tableFixHead-570 {
    overflow-y: auto;
    max-height: calc(100vh - 570px) !important;
}

    .tableFixHead-570 thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--header-tabla);
    }


.tableFixHead-250-gray {
    overflow-y: auto;
    max-height: calc(100vh - 250px) !important;
}

    .tableFixHead-250-gray thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: #F6F5F9;
        color: var(--avex-on-surface);
        font-weight: 700;
    }

.tableFixHead-320-gray {
    overflow-y: auto;
    max-height: calc(100vh - 320px) !important;
}

    .tableFixHead-320-gray thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: #F6F5F9;
        color: var(--avex-on-surface);
        font-weight: 700;
    }





.card-transfer {
    margin: 0.25rem 0;
    display: flex;
    padding: 8px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.card-webpay {
    justify-content: center;
    display: flex;
    height: 115px;
    align-items: center;
}

.form-check-input[type="radio"]:checked + label:after, .form-check-input[type="radio"].with-gap:checked + label:after, label.btn input[type="radio"]:checked + label:after, label.btn input[type="radio"].with-gap:checked + label:after {
    background-color: white !important;
    border: 4px solid var(--avex-primary) !important;
}

.card-primary-ds {
    display: flex;
    background: var(--avex-primary-container);
    padding: 3px 5px;
    color: var(--avex-on-primary-container);
    justify-content: end;
    align-items: center;
    border: 1px solid var(--avex-on-primary-container);
    border-radius: 8px;
    font-weight: bold
}

@media (min-width: 992px) {

    .col-w-14-seguimiento {
        flex: 0 0 14.285%;
        max-width: 14.285%;
        padding: 0 8px;
    }
}

.d-estado-mob {
    display: none
}

.d-estado-desk {
    display: block
}

@media (max-width: 992px) {

    .flex-direccion {
        flex-direction: column-reverse;
    }

    .h-map-ver-seguimiento-publico {
        height: 100%;
    }

    .d-estado-desk {
        display: none !important
    }

    .d-estado-mob {
        display: block !important
    }

    .cortar-texto-w-100 {
        max-width: 100% !important;
        white-space: normal;
        text-overflow: ellipsis;
        overflow: auto;
    }
}

.shadow-card-ds {
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%) !important;
}

.icon-simologia-ds {
    height: 24px;
    margin-bottom: 6px;
}

.fg-1 {
    flex-grow: 1
}

@media (max-width: 768px) {
    .fg-1.timer {
        width: 50%
    }
}

.nav-link.active .badge-tabs-ds {
    background: var(--avex-primary);
    color: var(--avex-on-primary);
    font-size: 14px;
    padding: 0px 4px;
    border-radius: 4px;
}

.nav-link .badge-tabs-ds {
    background: var(--secondary-dark-gray);
    color: white;
    font-size: 14px;
    padding: 0px 4px;
    border-radius: 4px;
}

.fg-1 {
    flex-grow: 1
}

@media (max-width: 768px) {
    .fg-1.timer {
        width: 50%
    }
}

.nav-link.active .badge-tabs-ds {
    background: var(--avex-primary);
    color: var(--avex-on-primary);
    font-size: 14px;
    padding: 0px 4px;
    border-radius: 4px;
}

.nav-link .badge-tabs-ds {
    background: var(--secondary-dark-gray);
    color: white;
    font-size: 14px;
    padding: 0px 4px;
    border-radius: 4px;
}

.nav-tabs .nav-item.show .nav-link.error, .nav-tabs .nav-link.error.active {
    color: #933B43;
    background-color: var(--avex-background);
    border-bottom: 2px solid #933B43;
    font-weight: 500
}

.nav-link.disabled-tab {
    background-color: red;
    pointer-events: none; /* Evita que el enlace sea clickeable */
    opacity: 0.6; /* Da un efecto visual de estar deshabilitado */
}

.modal-w-80 {
    min-width: 80%;
}

.card-detalle {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.bg-simbologia-span {
    height: 21px;
    width: 10px;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
    border: 1px solid #DFDFE3;
}

.bg-realizar-convenio {
    background: #0D77BF !important;
}

.bg-realizar-particular {
    background: #0D77BF !important;
    background-image: linear-gradient(to bottom, white 4px, transparent 1px) !important;
    background-size: 100% 10px !important;
    background-repeat: repeat-y !important;
}

.bg-planificada-convenio {
    background: #45A624 !important;
}

.bg-planificada-paticular {
    background: #45A624 !important;
    background-image: linear-gradient(to bottom, white 4px, transparent 1px) !important;
    background-size: 100% 10px !important;
    background-repeat: repeat-y !important;
}

.body-modal-scroll-in {
    height: calc(100vh - 200px);
    overflow: auto
}

.form-check-input[type="radio"]:not(:checked) + label, .form-check-input[type="radio"]:checked + label, label.btn input[type="radio"]:not(:checked) + label, label.btn input[type="radio"]:checked + label {
    height: auto !important;
}

.icon-footer-vs {
    height: 16px;
    width: auto;
    padding: 0 8px
}

.border-primary-short {
    width: 45px;
    height: 1px;
    background: #00C5CC;
    display: block;
}

.header-recuperar-contrasena {
    /*position: absolute;
    top: 0;*/
    width: 100%;
    padding: 15px;
}

.container input:checked:disabled ~ .checkmark-ds {
    background-color: #576475;
    cursor: not-allowed;
    border: 2px solid #576475
}

.container input:disabled ~ .checkmark-ds {
    border: 2px solid #576475
}