/* Error de minimización. Devolviendo el contenido no minimizado.
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(37,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(38,26): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(39,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(43,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(45,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(53,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-background'
(54,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-background'
(58,26): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(67,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface'
(68,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(79,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(80,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-primary'
(119,31): run-time error CSS1039: Token not allowed after unary operator: '-av-nav-h'
(123,15): run-time error CSS1039: Token not allowed after unary operator: '-av-nav-h'
(125,28): run-time error CSS1039: Token not allowed after unary operator: '-black'
(145,21): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(154,31): run-time error CSS1039: Token not allowed after unary operator: '-av-nav-h'
(196,21): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(200,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(224,36): run-time error CSS1039: Token not allowed after unary operator: '-av-nav-h'
(224,55): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(229,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(233,26): run-time error CSS1039: Token not allowed after unary operator: '-black'
(237,32): run-time error CSS1039: Token not allowed after unary operator: '-white'
(241,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(245,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(267,28): run-time error CSS1039: Token not allowed after unary operator: '-white'
(301,17): run-time error CSS1039: Token not allowed after unary operator: '-black'
(309,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(310,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(348,31): run-time error CSS1039: Token not allowed after unary operator: '-av-nav-h'
(544,22): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface-1'
(545,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-surface-3'
(611,48): run-time error CSS1046: Expect comma, found '0'
(611,52): run-time error CSS1046: Expect comma, found '/'
(613,40): run-time error CSS1046: Expect comma, found '0'
(613,44): run-time error CSS1046: Expect comma, found '/'
(791,17): run-time error CSS1039: Token not allowed after unary operator: '-avex-on-surface'
(875,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(888,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(896,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(898,28): run-time error CSS1039: Token not allowed after unary operator: '-avex-primary'
(901,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');

/* Alto REAL de la barra de menú. .cont-menu mide 58px CSS, pero el <nav> lleva la clase
   "av-zoom-scope" y av.general.aplicarEscalaFuente le aplica un zoom = --font-size, así que su alto
   renderizado es 58px * --font-size. Los 4 paneles laterales (#mySidenav .. #mySidenav4) son
   position:fixed y quedan FUERA del scope de zoom a propósito (para que su propio alto no se
   escale y se salgan del viewport), por lo que necesitan calcular a mano dónde termina el nav.
   Con esta variable el panel arranca justo donde termina el nav y llega exacto al borde inferior
   de la ventana, en cualquier escala de fuente. */
:root {
    --av-nav-h: calc(58px * var(--font-size, 1));
}

/*#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 {
    /* Ver --av-nav-h arriba: height:100% con top:58px sobresalía 58px por debajo del viewport. */
    height: calc(100vh - var(--av-nav-h));
    width: 0;
    position: fixed;
    z-index: 1;
    top: var(--av-nav-h);
    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 - var(--av-nav-h)) !important; /* ver --av-nav-h: sigue al alto real del nav bajo zoom de fuente */
}

.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;
        /* Este elemento vive DENTRO del <nav>, que lleva "av-zoom-scope" y por lo tanto un zoom
           CSS = --font-size. Un "100vh" declarado acá se resuelve en px de viewport y DESPUÉS lo
           multiplica el zoom, así que se pasaba de la ventana. Se divide por la escala para que el
           alto RENDERIZADO sea exactamente el hueco que queda bajo el nav. */
        height: calc((100vh - var(--av-nav-h)) / var(--font-size, 1));
    }

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



/* Contenedor de layout del mensaje: sin esto, .ms-lado (el globo con color) se estira al 100%
   del ancho del panel en vez de ajustarse a su contenido — el chat se veía como un bloque
   sólido de un color en vez de burbujas alineadas a izquierda/derecha. */
.message {
    display: flex;
    flex-direction: column;
    margin: 5px 8px;
}

.message.message-left {
    align-items: flex-start;
}

.message.message-right {
    align-items: flex-end;
}

.message .ms-lado {
    max-width: 85%;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.28;
}

/*------ 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 - var(--av-nav-h)) !important; /* ver --av-nav-h: sigue al alto real del nav bajo zoom de fuente */
}

/*#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*/