/* Error de minimización. Devolviendo el contenido no minimizado.
(20,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(26,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(27,26): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(28,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(32,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(34,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(42,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(43,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-background'
(47,26): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(56,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface'
(57,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(68,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(69,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-primary'
(113,28): run-time error CSS1039: Token not allowed after unary operator: '-black'
(133,21): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(184,21): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(188,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(213,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(217,26): run-time error CSS1039: Token not allowed after unary operator: '-black'
(221,32): run-time error CSS1039: Token not allowed after unary operator: '-white'
(225,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(229,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(251,28): run-time error CSS1039: Token not allowed after unary operator: '-white'
(261,17): run-time error CSS1039: Token not allowed after unary operator: '-black'
(269,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(270,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(504,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface-1'
(505,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface-3'
(571,48): run-time error CSS1046: Expect comma, found '0'
(571,52): run-time error CSS1046: Expect comma, found '/'
(573,40): run-time error CSS1046: Expect comma, found '0'
(573,44): run-time error CSS1046: Expect comma, found '/'
(751,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(835,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(848,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(856,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(858,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(861,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
 */
@import url('css-ds/rootDS.css');
@import url('css-ds/Botones.css');
@import url('css-ds/theme-light.css');
@import url('css-ds/skins-default.css');
@import url('css-ds/Iconos.css');
@import url('css-ds/Table.css');
@import url('css-ds/Background.css');
@import url('css-ds/Border.css');
@import url('css-ds/Margin.css');
@import url('css-ds/Padding.css');
@import url('css-ds/Tipografia.css');
@import url('css-ds/Imagenes.css');
@import url('css-ds/Campos.css'); /*Aqui quede*/
@import url('css-ds/Grid-Flex-Custom.css');
@import url('css-ds/Modales.css');
@import url('css-ds/Card.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: 5px 0;
    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;
    }
}

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

.footer {
    background-color: lightblue;
    padding: 10px;
    margin-top: auto;
}

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

.cursor-pointer {
    cursor: pointer;
}
.z-idex-4 {
    z-index: 4 !important;
}
/*#endregion General*/

/*#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);
}


.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 Cosas por borrar en Vistas*/

.headingh4 {
    font-size: 18px !important;
}

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

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

/*#endregion Cosas por borrar en Vistas*/

/*#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 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 Opacity*/
.opacity-8 {
    opacity: 0.8
}

.opacity-6 {
    opacity: 0.6
}

.opacity-4 {
    opacity: 0.4
}
/*#endregion Opacity*/

/*#region Menu*/
.grid-menu {
    display: grid;
    grid-template-columns: 0.5fr 6fr 0.1fr;
}
/*#endregion Menu*/

/*#region Simbologia*/

.icon-simologia-ds {
    height: 24px;
    margin-bottom: 6px;
}


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

.bg-simbologia-span {
    height: 21px;
    width: 10px;
    display: block;
    margin: 0 auto;
    border-radius: 2px;
    border: 1px solid #DFDFE3;
}
/*#endregion Simbologia*/

/*#region Mensajeria*/

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

.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: 20rem;
    height: auto;
    min-width: 10rem;
}

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



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

.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
}



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

.btn-icon-msg-ds:hover,
.btn-icon-msg-ds:active {
    display: flex;
    padding: 16px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #00C5CC;
    border-radius: 16px;
    background: white;
    color: #00C5CC;
    cursor: pointer;
}

.btn-icon-msg-ds:active {
    opacity: 0.8;
}
/*#endregion mensajeria*/

/*#region Popover*/
.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;
}



.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;
    }
/*#endregion popover*/

/*#region Control Direccion*/
#direcciones .p-card-direcion:first-child {
    padding-top: 8px !important
}

#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
}
/*#endregion Control Direccion*/

/*#region TipoMovil*/

.Tipo-movil-electrico {
    position: relative;
    border: 2px solid #00C97E !important;
    padding-top: 8px;
}

    .Tipo-movil-electrico::after {
        font-family: 'Material Icons';
        content: "\ea0b";
        position: absolute;
        top: 0;
        right: 0;
        background-color: #00C97E;
        color: white;
        border-radius: 0 0 0 4px;
        padding: 0 0 2px 2px;
        font-size: 11px;
    }


.tipo_mov {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    box-shadow: none;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    font-size: 16px;
}

/*#endregion tipoMovil*/

/*#region Estados*/

.card-estado {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: var(--avex-on-surface);
}

.estado-anulado {
    background: #E0E0E4;
}

.estado-solicitado {
    background: #A6B2C2;
}

.estado-pagado {
    background: #C2F0E4;
}

.estado-aprobado {
    background: #DDF6D5;
}

.estado-rechazodo {
    background: #FCC;
}

.estado-por-validar {
    background: #B7DFFA;
}



.estado-voucher-procesado {
    background-color: #CCF2C0 !important;
}


.estado-general {
    padding: 8px;
    border-radius: 0.5rem;
    width: 6.8rem;
    text-align: center;
}

.estado-azul {
    background-color: #B7DFFA;
    color: #2B323B;
}

.estado-verde {
    background-color: #78DB57;
    color: #2B323B;
}

.estado-verde-claro {
    background-color: #DDF6D5;
    color: #2B323B;
}

.estado-gris {
    background-color: #E0E0E4;
    color: #2B323B;
}

.estado-outline-gris {
    background-color: white;
    border: 1px solid #E0E0E4;
    color: #E0E0E4;
}

.estado-roja {
    background-color: #FED0CD;
    color: #2B323B;
}

.estado-outline-roja {
    background-color: white;
    border: 1px solid #FED0CD;
    color: #2B323B;
}

.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;
}

.solicitudes-circle-15 {
    height: 15px;
    width: 15px;
    border-radius: 50%;
}


/*#endregion estados*/

/*#region Height y Width custom*/
.min-w-700px {
    min-width: 700px
}

.h-40px {
    height: 40px
}
/*#endregion Height y Width custom*/

/*#region Dashboard Cliente*/
.h-chart-centro-costo {
    padding: 0 10px;
    max-height: 200px !important;
    position: absolute
}


@media only screen and (max-width: 770px) {
    .h-chart-centro-costo {
        position: relative
    }
}
/*#endregion Cliente*/

/*#region Pin negro*/

.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
}

/*#endregion Pin negro*/

/*#region Solicitud acceso*/
.img-fondo-rt-pass-resp {
    display: none
}

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

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

@media (max-width: 800px) {
    .contenedor-form-sa {
        height: auto;
    }
}
/*#endregion Solicitud acceso*/

/*#region RecuperarContraseña*/
.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;
}

.header-recuperar-contrasena {
    width: 100%;
    padding: 15px;
}
/*#endregion RecuperarContraseña*/

/*#region Mis tarjetas*/
.bg-mis-tarjertas {
    height: calc(100vh - 90px);
    overflow: auto;
}


@media (max-width: 500px) {
    .bg-mis-tarjertas {
        height: auto !important;
        overflow: auto;
    }
}
/*#endregion Mis tarjetas*/

/*#region Campos adicionales*/
.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 */
    }
}
/*#endregion*/

/*#region Error*/
.footer-error {
    position: absolute;
    bottom: 8px;
    width: 100%
}

.width-70 {
    width: 70px;
}
/*#endregion Error*/

/*#region Rotate*/
.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.rotate-right {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.rotate-down {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}
/*#endregion Rotate*/