:root {

    --White: #FFFFFF;
    --Basic: #F4F6F3;
    /* var(--Basic) */
    --Back-g: #EEF2F5;

    --Blue-00: #1479FF;
    --Blue-10: #14A5FF;
    --Blue-20: #14D2FF;
    --Blue-30: #37DBE6;
    --Blue-Primary: #0C68EE;
    --Blue-02-00: #006691;
    --Blue-02-01: #2499C7;
    --Blue-02-02: #40CFFF;
    --Blue-02-03: #94E7FF;
    --Blue-02-04: #CDFFFF;

    --White: #FFFFFF;
    --Basic: #F4F6F3; /* var(--Basic) */
    --Back-g :#EEF2F5;
    --Blue-a :#006BBD;
    --Blue-b :#007bd2;
    --Blue-c :#006bbd1a;
    --Blue-d :#006BBD;
    --Green-T :#6ee4005d;
    --Green-T2 :#85c906a2;
    --Green-T3 :#6ee40013;
    --sm-a : #d26f00;
    --sm-b : #005099;
    --sm-c : #d24400;
    --sm-d : #d2a100;
    --sm-e : #005ed2;
    --sm-f : #00d27b;
    --sm-g : #d2007b;
    --sm-h : #f2d5c0;
    --sm-i : #c0d2f2;



    --Turq-01: #239089;
    --Turq-02: #329b93;
    --Turq-03: #3fa59e;
    --Turq-04: #4bb0a9;
    --Turq-05: #57bbb4;
    --Turq-06: #72c8c1;
    --Turq-07: #96d6d0;
    --Turq-08: #b9e4df;
    --Turq-09: #daf1ef;
    --Turq-10: #faffff;

    --Blue-w: #01C4D4;
    --Blue-T: #3E566F;

    --Red-w: #F7565A;
    --Red-10: #dc3545;


    --Gray: #F5F6F9;
    --Gray-a: #FBFBFD;
    --Gray-b: #9FABB7;
    --Gray-c: #889EB3;

    --Green-b: #F4F6F3;
    --Green-m: #46B04A;
    --Green-m2: #7bd47e;
    --Green-p: #29D884;
    --Green-l: #E1EFB0;
    --Green-h: #eff3e8;

    --standar-01: #F4F6D3;
    --standar-02: #D3F4F6;
    --standar-03: #F6D3D3;
    --standar-04: #F6E3D3;
    --standar-05: #E3D3F6;
    --standar-06: #F6D3E3;
    --standar-07: #D3F6D3;
    --standar-08: #D3F6E3;
    --standar-09: #D3E3F6;

    --yellow-color-1: #ffffe0;
    /* Amarillo muy claro */
    --yellow-color-2: #fffacd;
    --yellow-color-3: #fff8b3;
    --yellow-color-4: #fff399;
    --yellow-color-5: #ffee80;
    --yellow-color-6: #ffe766;
    --yellow-color-7: #ffe04d;
    --yellow-color-8: #ffda33;
    --yellow-color-9: #ffd31a;
    --yellow-color-10: #ffcc00;
    /* Amarillo estándar */
    --yellow-color-11: #e6b800;
    --yellow-color-12: #cca300;
    --gray-color-1: #f5f5f5;
    --gray-color-2: #ebebeb;
    --gray-color-3: #e0e0e0;
    --gray-color-4: #d6d6d6;
    --gray-color-5: #cccccc;
    --gray-color-6: #c2c2c2;
    --gray-color-7: #b8b8b8;
    --gray-color-8: #adadad;
    --gray-color-9: #a3a3a3;
    --gray-color-10: #999999;
    --gray-color-11: #8f8f8f;
    --gray-color-12: #858585;
    --gray-color-13: #7a7a7a;
    --gray-color-14: #707070;
    --gray-color-15: #666666;
    --gray-color-16: #5c5c5c;
    --gray-color-17: #525252;
    --gray-color-18: #474747;
    --gray-color-19: #3d3d3d;
    --gray-color-20: #303030;
    --gray-color-21: #202020;
    --gray-color-22: #131313;

    --sq-00: #29D884;

    --sq-01: #000033;
    /* Más oscuro */
    --sq-02: #910C5D;
    --sq-03: #BE0A9A;
    --sq-04: #DF0589;
    --sq-05: #EF0383;
    --sq-06: #9F1DB0;
    --sq-07: #7C32D6;
    --sq-08: #8614B1;
    --sq-09: #AD74D5;
    --sq-10: #CE68CB;
    --sq-11: #7375E8;
    --sq-12: #6981F6;
    --sq-13: #5972ED;
    --sq-14: #3E4AF2;
    /* Más claro */

}
.al:link {
    text-decoration: none;
}
.tr{
    color: #df1e21;
}

.tg-01{color: var(--gray-color-1);}
.tg-02{color: var(--gray-color-2);}
.tg-03{color: var(--gray-color-3);}
.tg-04{color: var(--gray-color-4);}
.tg-05{color: var(--gray-color-5);}
.tg-06{color: var(--gray-color-6);}
.tg-07{color: var(--gray-color-7);}
.tg-08{color: var(--gray-color-8);}
.tg-09{color: var(--gray-color-9);}
.tg-10{color: var(--gray-color-10);}
.tg-11{color: var(--gray-color-11);}
.tg-12{color: var(--gray-color-12);}
.tg-13{color: var(--gray-color-13);}
.tg-14{color: var(--gray-color-14);}
.tg-15{color: var(--gray-color-15);}
.tg-16{color: var(--gray-color-16);}
.tg-17{color: var(--gray-color-17);}
.tg-18{color: var(--gray-color-18);}
.tg-19{color: var(--gray-color-19);}
.tg-20{color: var(--gray-color-20);}
.tg-21{color: var(--gray-color-21);}
.tg-22{color: var(--gray-color-22);}


.bloq-sq-00 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-00);
}.text-sq-00 {
    color: var(--sq-00);
}.btn-sq-00 {
    color: var(--sq-00);
    padding: 8px 17px;
    border: 1px solid var(--sq-00);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-00:hover {
    color: white;
    background-color: var(--sq-00);
    border: 1px solid var(--sq-00);
}

.bloq-sq-01 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-01);
}.text-sq-01 {
    color: var(--sq-01);
}.btn-sq-01 {
    color: var(--sq-01);
    padding: 8px 17px;
    border: 1px solid var(--sq-01);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-01:hover {
    color: white;
    background-color: var(--sq-01);
    border: 1px solid var(--sq-01);
}

.bloq-sq-02 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-02);
}.text-sq-02 {
    color: var(--sq-02);
}.btn-sq-02 {
    color: var(--sq-02);
    padding: 8px 17px;
    border: 1px solid var(--sq-02);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-02:hover {
    color: white;
    background-color: var(--sq-02);
    border: 1px solid var(--sq-02);
}

.bloq-sq-03 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-03);
}.text-sq-03 {
    color: var(--sq-03);
}.btn-sq-03 {
    color: var(--sq-03);
    padding: 8px 17px;
    border: 1px solid var(--sq-03);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-03:hover {
    color: white;
    background-color: var(--sq-03);
    border: 1px solid var(--sq-03);
}

.bloq-sq-04 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-04);
}.text-sq-04 {
    color: var(--sq-04);
}.btn-sq-04 {
    color: var(--sq-04);
    padding: 8px 17px;
    border: 1px solid var(--sq-04);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-04:hover {
    color: white;
    background-color: var(--sq-04);
    border: 1px solid var(--sq-04);
}

.bloq-sq-05 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-05);
}.text-sq-05 {
    color: var(--sq-05);
}.btn-sq-05 {
    color: var(--sq-05);
    padding: 8px 17px;
    border: 1px solid var(--sq-05);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-05:hover {
    color: white;
    background-color: var(--sq-05);
    border: 1px solid var(--sq-05);
}

.bloq-sq-06 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-06);
}.text-sq-06 {
    color: var(--sq-06);
}.btn-sq-06 {
    color: var(--sq-06);
    padding: 8px 17px;
    border: 1px solid var(--sq-06);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-06:hover {
    color: white;
    background-color: var(--sq-06);
    border: 1px solid var(--sq-06);
}

.bloq-sq-07 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-07);
}.text-sq-07 {
    color: var(--sq-07);
}.btn-sq-07 {
    color: var(--sq-07);
    padding: 8px 17px;
    border: 1px solid var(--sq-07);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-07:hover {
    color: white;
    background-color: var(--sq-07);
    border: 1px solid var(--sq-07);
}

.bloq-sq-08 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-08);
}.text-sq-08 {
    color: var(--sq-08);
}.btn-sq-08 {
    color: var(--sq-08);
    padding: 8px 17px;
    border: 1px solid var(--sq-08);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-08:hover {
    color: white;
    background-color: var(--sq-08);
    border: 1px solid var(--sq-08);
}

.bloq-sq-09 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-09);
}.text-sq-09 {
    color: var(--sq-09);
}.btn-sq-09 {
    color: var(--sq-09);
    padding: 8px 17px;
    border: 1px solid var(--sq-09);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-09:hover {
    color: white;
    background-color: var(--sq-09);
    border: 1px solid var(--sq-09);
}

.bloq-sq-10 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-10);
}.text-sq-10 {
    color: var(--sq-10);
}.btn-sq-10 {
    color: var(--sq-10);
    padding: 8px 17px;
    border: 1px solid var(--sq-10);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-10:hover {
    color: white;
    background-color: var(--sq-10);
    border: 1px solid var(--sq-10);
}

.bloq-sq-11 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-11);
}.text-sq-11 {
    color: var(--sq-11);
}.btn-sq-11 {
    color: var(--sq-11);
    padding: 8px 17px;
    border: 1px solid var(--sq-11);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-11:hover {
    color: white;
    background-color: var(--sq-11);
    border: 1px solid var(--sq-11);
}

.bloq-sq-12 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-12);
}.text-sq-12 {
    color: var(--sq-12);
}.btn-sq-12 {
    color: var(--sq-12);
    padding: 8px 17px;
    border: 1px solid var(--sq-12);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-12:hover {
    color: white;
    background-color: var(--sq-12);
    border: 1px solid var(--sq-12);
}

.bloq-sq-13 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-13);
}.text-sq-13 {
    color: var(--sq-13);
}.btn-sq-13 {
    color: var(--sq-13);
    padding: 8px 17px;
    border: 1px solid var(--sq-13);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-13:hover {
    color: white;
    background-color: var(--sq-13);
    border: 1px solid var(--sq-13);
}

.bloq-sq-14 {
    width: 5px;
    height: 100%;
    background-color: var(--sq-14);
}.text-sq-14 {
    color: var(--sq-14);
}.btn-sq-14 {
    color: var(--sq-14);
    padding: 8px 17px;
    border: 1px solid var(--sq-14);
    border-radius: 5px;
    cursor: pointer;
}.btn-sq-14:hover {
    color: white;
    background-color: var(--sq-14);
    border: 1px solid var(--sq-14);
}

/* Estilo del submenú oculto inicialmente */
.submenu {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    background-color: #ffffff00;
    /* Color de fondo del submenú */
    padding: 10px;
    list-style: none;
    margin: 0;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  Sombra para el submenú */
    border-radius: 4px;
    top: -40px;
    left: 95px;
    z-index: 1000;
}

.hint {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 150px;


}

.hint::before {
    content: "";
    position: absolute;
    top: 75px;
    /* Ajusta la posición de la flecha */
    left: -14px;
    /* Ajusta la posición de la flecha horizontalmente */
    border-width: 12px;
    border-style: solid;
    border-color: transparent var(--Blue-Primary) transparent transparent;
    /* Flecha apuntando arriba */
}

/* Mostrar el submenú cuando el ratón está sobre la clase 'dnavi' */
.dnavi:hover .submenu {
    display: block;
}

/* Estilo para los ítems del submenú */
.submenu li {
    margin: 0;
    padding: 4px 5px;
}

.submenu li a {
    text-decoration: none;
    color: #333;
    display: block;
}

.submenu li a:hover {
    background-color: #f0f0f0;
    /* Color de fondo cuando se pasa el ratón sobre una opción */
}

/* Ajustes para la posición del submenú */
.dnavi {
    position: relative;
    /* Para que el submenú esté alineado con respecto a 'dnavi' */
}



.Sb {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

a {
    text-decoration: none;
}

/* BUTTONS ALL */

.btn-one {
    font-size: 16px;
    color: #fff;
    background-color: var(--Blue-02-01);
    border: none;
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-two {
    font-size: 16px;
    color: #fff;
    background-color: var(--Turq-01);
    border: none;
    padding: 8px 18px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic {
    font-size: 14px;
    color: #0f0f0f;
    background-color: white;
    border: 1px solid var(--gray-color-8);
    padding: 6px 13px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue {
    font-size: 14px;
    color: var(--Blue-Primary);
    background-color: white;
    border: 1px solid var(--Blue-Primary);
    padding: 6px 13px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue:hover,
.btn-basic:hover {
    color: white;
    background-color: var(--Blue-Primary);
    border: 2px solid var(--Blue-Primary);
}

.active-button-blue {
    color: white;
    background-color: var(--Blue-Primary);
    border: 2px solid var(--Blue-Primary);
}

.btn-basic-blue-II {
    font-size: 14px;
    color: var(--Blue-Primary);
    background-color: white;
    border: 1px solid var(--Blue-Primary);
    padding: 6px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue-II:hover,
.btn-basic:hover {
    color: white;
    background-color: var(--Blue-Primary);
    border: 2px solid var(--Blue-Primary);
}

.active-button-blue-II {
    color: white;
    background-color: var(--Blue-Primary);
    border: 2px solid var(--Blue-Primary);
}

.btn-basic-blue-3 {
    font-size: 14px;
    color: var(--sq-08);
    background-color: white;
    border: 1px solid var(--sq-08);
    padding: 6px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue-3:hover,
.btn-basic:hover {
    color: white;
    background-color: var(--sq-08);
    border: 1px solid var(--sq-08);
}

.active-button-blue-3 {
    color: white;
    background-color: var(--sq-08);
    border: 1px solid var(--sq-08);
}

.btn-basic-blue-4 {
    font-size: 14px;
    color: var(--sq-03);
    background-color: white;
    border: 1px solid var(--sq-04);
    padding: 6px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue-4:hover,
.btn-basic:hover {
    color: white;
    background-color: var(--sq-04);
    border: 1px solid var(--sq-04);
}

.active-button-blue-4 {
    color: white;
    background-color: var(--sq-04);
    border: 1px solid var(--sq-04);
}

.btn-basic-blue-2 {
    font-size: 14px;
    color: var(--sq-13);
    background-color: white;
    border: 1px solid var(--sq-13);
    padding: 6px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-basic-blue-2:hover,
.btn-basic:hover {
    color: white;
    background-color: var(--sq-13);
    border: 1px solid var(--sq-13);
}

.active-button-blue-2 {
    color: white;
    background-color: var(--sq-13);
    border: 1px solid var(--sq-13);
}








/* Background color utility classes */
.bg-White {
    background-color: var(--White);
}

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

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

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


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

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

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

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

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

/* Texto */
.t-gray-1 {
    color: #ffffff;
}

/* Blanco */
.t-gray-2 {
    color: #f5f5f5;
}

.t-gray-3 {
    color: #ebebeb;
}

.t-gray-4 {
    color: #e0e0e0;
}

.t-gray-5 {
    color: #d6d6d6;
}

.t-gray-6 {
    color: #cccccc;
}

.t-gray-7 {
    color: #c2c2c2;
}

.t-gray-8 {
    color: #b8b8b8;
}

.t-gray-9 {
    color: #adadad;
}

.t-gray-10 {
    color: #a3a3a3;
}

.t-gray-11 {
    color: #999999;
}

.t-gray-12 {
    color: #8f8f8f;
}

.t-gray-13 {
    color: #858585;
}

.t-gray-14 {
    color: #7a7a7a;
}

.t-gray-15 {
    color: #707070;
}

.t-gray-16 {
    color: #666666;
}

.t-gray-17 {
    color: #5c5c5c;
}

.t-gray-18 {
    color: #525252;
}

.t-gray-19 {
    color: #474747;
}

.t-gray-20 {
    color: #3d3d3d;
}

/* Negro oscuro */
.t-gray-21 {
    color: #303030;
}

/* Negro oscuro */
.t-gray-22 {
    color: #202020;
}

/* Negro oscuro */
.t-gray-23 {
    color: #131313;
}

/* Negro oscuro */

.full-hd {
    height: 100vh;
    height: 100vh;
}
.full-width {
    width: 100%;
}
.full-width-50 {
    width: calc(100% - 50px);
}
.full-width-100 {
    width: calc(100% - 100px);
}
.full-width-150 {
    width: calc(100% - 150px);
}
.full-width-200 {
    width: calc(100% - 200px);
}
.full-width-250 {
    width: calc(100% - 250px);
}
.full-width-300 {
    width: calc(100% - 300px);
}
.full-width-350 {
    width: calc(100% - 350px);
}
.full-width-400 {
    width: calc(100% - 400px);
}
.full-width-450 {
    width: calc(100% - 450px);
}
.full-width-500 {
    width: calc(100% - 500px);
}
.full-height {
    height: 100vh;
}
.full-height-25 {
    height: calc(100vh - 25px);
}
.full-height-30 {
    height: calc(100vh - 30px);
}
.full-height-35 {
    height: calc(100vh - 35px);
}
.full-height-40 {
    height: calc(100vh - 40px);
}
.full-height-45 {
    height: calc(100vh - 45px);
}
.full-height-50 {
    height: calc(100vh - 50px);
}
.full-height-70 {
    height: calc(100vh - 70px);
}
.full-height-80 {
    height: calc(100vh - 80px);
}
.full-height-85 {
    height: calc(100vh - 85px);
}
.full-height-90 {
    height: calc(100vh - 90px);
}
.full-height-95 {
    height: calc(100vh - 95px);
}
.full-height-100 {
    height: calc(100vh - 100px);
}
.full-height-110 {
    height: calc(100vh - 110px);
}
.full-height-120 {
    height: calc(100vh - 120px);
}
.full-height-130 {
    height: calc(100vh - 130px);
}
.full-height-135 {
    height: calc(100vh - 135px);
}
.full-height-140 {
    height: calc(100vh - 140px);
}
.full-height-150 {
    height: calc(100vh - 150px);
}
.full-height-160 {
    height: calc(100vh - 160px);
}
.full-height-170 {
    height: calc(100vh - 170px);
}
.full-height-180 {
    height: calc(100vh - 180px);
}
.full-height-190 {
    height: calc(100vh - 190px);
}
.full-height-200 {
    height: calc(100vh - 200px);
}

.full-height-210 {
    height: calc(100vh - 210px);
}

.full-height-220 {
    height: calc(100vh - 220px);
}

.full-height-250 {
    height: calc(100vh - 250px);
}

.full-height-260 {
    height: calc(100vh - 260px);
}

.full-height-270 {
    height: calc(100vh - 270px);
}

.full-height-280 {
    height: calc(100vh - 280px);
}

.full-height-300 {
    height: calc(100vh - 300px);
}

.full-height-350 {
    height: calc(100vh - 350px);
}

.flexible-right {
    flex: 1;
}

/* CSS classes for widths from 100px to 1000px in increments of 100px */
.W100 {
    width: 100%;
}

.w-10 {
    width: 100px;
}

.w-11 {
    width: 110px;
}

.w-12 {
    width: 120px;
}

.w-13 {
    width: 130px;
}

.w-15 {
    width: 150px;
}

.w-20 {
    width: 200px;
}

.w-30 {
    width: 300px;
}

.w-35 {
    width: 350px;
}

.w-40 {
    width: 400px;
}

.w-50 {
    width: 500px;
}

.w-60 {
    width: 600px;
}

.w-70 {
    width: 700px;
}

.w-80 {
    width: 800px;
}

.w-90 {
    width: 900px;
}

.w-1111 {
    width: 1000px;
}

.WH-100 {
    width: 100%;
}

.WH-1 {
    width: 100%;
}

.WH-10 {
    width: 10%;
}

.WH-15 {
    width: 15%;
}

.WH-20 {
    width: 20%;
}

.WH-25 {
    width: 25%;
}

.WH-30 {
    width: 30%;
}

.WH-35 {
    width: 35%;
}

.WH-40 {
    width: 40%;
}

.WH-45 {
    width: 45%;
}

.WH-50 {
    width: 50%;
}

.WH-55 {
    width: 55%;
}

.WH-60 {
    width: 60%;
}

.WH-65 {
    width: 65%;
}

.WH-70 {
    width: 70%;
}

.w-10C {
    width: 100px;
    text-align: center;
}

.w-5C {
    width: 50px;
    text-align: center;
}

.w-3C {
    width: 30px;
    text-align: center;
}

.w-3CR {
    width: 29px;
    height: 29px;
    text-align: center;
    background-color: #ce405e
}

.w-3CV {
    width: 29px;
    height: 29px;
    text-align: center;
    background-color: #40ce98
}

.w-10CR {
    width: 100px;
    text-align: center;
    background-color: #ce405e
}

.w-10CV {
    width: 100px;
    text-align: center;
    background-color: #40ce98
}

.w-15C {
    width: 150px;
    text-align: center;
}

.h-5 {
    height: 5px;
}

.h-6 {
    height: 6px;
}

.h-7 {
    height: 7px;
}

.h-8 {
    height: 8px;
}

.h-9 {
    height: 9px;
}

.h-10 {
    height: 10px;
}

.h-15 {
    height: 15px;
}

.h-20 {
    height: 20px;
}

.h-25 {
    height: 25px;
}

.h-30 {
    height: 30px;
}

.h-35 {
    height: 35px;
}

.h-40 {
    height: 40px;
}

.h-45 {
    height: 45px;
}

.h-50 {
    height: 50px;
}

.h-55 {
    height: 55px;
}

/* Estilo para la línea divisora */

.linea-divisora {
    border-bottom: 1px solid #ECEEF0;
    /* Grosor y color del borde */
    width: 100%;
    /* Ancho de la línea (puede ajustarse según el diseño) */
}

/* PADDING */
.Pd-2 {
    padding: 2px;
}

.Pd-3 {
    padding: 3px;
}

.Pd-5 {
    padding: 5px;
}

.Pd-6 {
    padding: 6px;
}

.Pd-7 {
    padding: 7px;
}

.Pd-8 {
    padding: 8px;
}

.Pd-9 {
    padding: 9px;
}

.Pd-10 {
    padding: 10px;
}

.Pd-12 {
    padding: 12px;
}

.Pd-15 {
    padding: 15px;
}

.Pd-20 {
    padding: 20px;
}

.Pd-25 {
    padding: 25px;
}

.Pd-30 {
    padding: 30px;
}

.Pd-40 {
    padding: 40px;
}

.Pd-50 {
    padding: 50px;
}

.Pt-2 {
    padding-top: 2px;
}

.Pt-4 {
    padding-top: 4px;
}

.Pt-5 {
    padding-top: 5px;
}

.Pt-6 {
    padding-top: 6px;
}

.Pt-7 {
    padding-top: 7px;
}

.Pt-10 {
    padding-top: 10px;
}

.Pt-12 {
    padding-top: 12px;
}
.Pt-13 {
    padding-top: 13px;
}
.Pt-15 {
    padding-top: 15px;
}

.Pt-16 {
    padding-top: 16px;
}

.Pt-17 {
    padding-top: 17px;
}

.Pt-18 {
    padding-top: 18px;
}

.Pt-19 {
    padding-top: 19px;
}

.Pt-20 {
    padding-top: 20px;
}

.Pt-25 {
    padding-top: 25px;
}

.Pt-30 {
    padding-top: 30px;
}

.Pt-35 {
    padding-top: 35px;
}

.Pr-5 {
    padding-right: 5px;
}

.Pr-10 {
    padding-right: 10px;
}

.Pr-15 {
    padding-right: 15px;
}

.Pr-20 {
    padding-right: 20px;
}

.Pr-25 {
    padding-right: 25px;
}

.Pr-30 {
    padding-right: 30px;
}

.Pr-35 {
    padding-right: 35px;
}

.Pl-5 {
    padding-left: 5px;
}

.Pl-10 {
    padding-left: 10px;
}

.Pl-15 {
    padding-left: 15px;
}

.Pl-20 {
    padding-left: 20px;
}

.Pl-25 {
    padding-left: 25px;
}

.Pl-30 {
    padding-left: 30px;
}

.Pl-35 {
    padding-left: 35px;
}

.Pb-3 {
    padding-bottom: 3px;
}

.Pb-5 {
    padding-bottom: 5px;
}

.Pb-7 {
    padding-bottom: 7px;
}

.Pb-10 {
    padding-bottom: 10px;
}

.Pb-15 {
    padding-bottom: 15px;
}

.Pb-20 {
    padding-bottom: 20px;
}

.Pb-25 {
    padding-bottom: 25px;
}

.Pb-30 {
    padding-bottom: 30px;
}

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

.Pb-50 {
    padding-bottom: 50px;
}

.Pb-55 {
    padding-bottom: 55px;
}

.Pb-60 {
    padding-bottom: 60px;
}

.Pd-tb-2 {
    padding: 2px 0px;
}

.Pd-tb-3 {
    padding: 3px 0px;
}

.Pd-tb-4 {
    padding: 4px 0px;
}

.Pd-tb-5 {
    padding: 5px 0px;
}

.Pd-tb-6 {
    padding: 6px 0px;
}

.Pd-tb-7 {
    padding: 7px 0px;
}

.Pd-tb-8 {
    padding: 8px 0px;
}

.Pd-tb-9 {
    padding: 9px 0px;
}

.Pd-tb-10 {
    padding: 10px 0px;
}

.Pd-tb-11 {
    padding: 11px 0px;
}

.Pd-tb-12 {
    padding: 12px 0px;
}

.Pd-tb-13 {
    padding: 13px 0px;
}

.Pd-tb-14 {
    padding: 14px 0px;
}

.Pd-tb-15 {
    padding: 15px 0px;
}

.Pd-tb-20 {
    padding: 20px 0px;
}

.Pd-tb-25 {
    padding: 25px 0px;
}

.Pd-tb-30 {
    padding: 30px 0px;
}

.Pd-lr-2 {
    padding: 0px 2px;
}

.Pd-lr-3 {
    padding: 0px 3px;
}

.Pd-lr-4 {
    padding: 0px 4px;
}

.Pd-lr-5 {
    padding: 0px 5px;
}

.Pd-lr-6 {
    padding: 0px 6px;
}

.Pd-lr-7 {
    padding: 0px 7px;
}

.Pd-lr-8 {
    padding: 0px 8px;
}

.Pd-lr-9 {
    padding: 0px 9px;
}

.Pd-lr-10 {
    padding: 0px 10px;
}

.Pd-lr-15 {
    padding: 0px 15px;
}

.Pd-lr-20 {
    padding: 0px 20px;
}

.Pd-lr-25 {
    padding: 0px 25px;
}

.Pd-lr-30 {
    padding: 0px 30px;
}

.Pd-lr-35 {
    padding: 0px 35px;
}

.Pd-lr-40 {
    padding: 0px 40px;
}

/* BORDER-RADIUS */

.brd-3 {
    border-radius: 3px;
}

.brd-5 {
    border-radius: 5px;
}

.brd-7 {
    border-radius: 7px;
}

.brd-10 {
    border-radius: 10px;
}

.brd-15 {
    border-radius: 15px;
}

.brd-20 {
    border-radius: 20px;
}

.brd-25 {
    border-radius: 25px;
}

.brd-30 {
    border-radius: 30px;
}

.brd-35 {
    border-radius: 35px;
}

.brd-40 {
    border-radius: 40px;
}

.brd-45 {
    border-radius: 45px;
}

.brd-50 {
    border-radius: 50px;
}

.brs-5 {
    border-radius: 5%;
}

.brs-10 {
    border-radius: 10%;
}

.brs-15 {
    border-radius: 15%;
}

.brs-20 {
    border-radius: 20%;
}

.brs-25 {
    border-radius: 25%;
}

.brs-30 {
    border-radius: 30%;
}

.brs-35 {
    border-radius: 35%;
}

.brs-40 {
    border-radius: 40%;
}

.brs-45 {
    border-radius: 45%;
}

.brs-50 {
    border-radius: 50%;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.tal {
    text-align: left;
}

.taj {
    text-align: justify;
}

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

.dsf {
    display: flex;
}

.dsn {
    display: none;
}

.ds_FCC {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.JCC {
    justify-content: center;
}

.JCL {
    justify-content: left;
}

.JCR {
    justify-content: right;
}

.fsa-5 {
    font-size: 5px;
}

.fsa-6 {
    font-size: 6px;
}

.fsa-7 {
    font-size: 7px;
}

.fsa-8 {
    font-size: 8px;
}

.fsa-9 {
    font-size: 9px;
}

.fsa-10 {
    font-size: 10px;
}

.fsa-11 {
    font-size: 11px;
}

.fsa-12 {
    font-size: 12px;
}

.fsa-13 {
    font-size: 13px;
}

.fsa-14 {
    font-size: 14px;
}

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

.fsa-16 {
    font-size: 16px;
}

.fsa-17 {
    font-size: 17px;
}

.fsa-18 {
    font-size: 18px;
}

.fsa-19 {
    font-size: 19px;
}

.fsa-20 {
    font-size: 20px;
}

.fsa-21 {
    font-size: 21px;
}

.fsa-22 {
    font-size: 22px;
}

.fsa-23 {
    font-size: 23px;
}

.fsa-24 {
    font-size: 24px;
}

.fsa-25 {
    font-size: 25px;
}

.fsa-26 {
    font-size: 26px;
}

.fsa-27 {
    font-size: 27px;
}

.fsa-28 {
    font-size: 28px;
}

.fsa-29 {
    font-size: 29px;
}

.fsa-30 {
    font-size: 30px;
}

.fsa-33 {
    font-size: 33px;
}

.fsa-34 {
    font-size: 34px;
}

.fsa-35 {
    font-size: 35px;
}

.fsa-36 {
    font-size: 36px;
}

.fsa-37 {
    font-size: 37px;
}

.fsa-38 {
    font-size: 38px;
}

.fsa-9 {
    font-size: 39px;
}

.fsa-40 {
    font-size: 40px;
}

.fsa-41 {
    font-size: 41px;
}

.fsa-42 {
    font-size: 42px;
}

.fsa-43 {
    font-size: 43px;
}

.fsa-44 {
    font-size: 44px;
}

.fsa-45 {
    font-size: 45px;
}

.fwa-10 {
    font-weight: 100;
}

.fwa-20 {
    font-weight: 200;
}

.fwa-30 {
    font-weight: 300;
}

.fwa-40 {
    font-weight: 400;
}

.fwa-50 {
    font-weight: 500;
}

.fwa-60 {
    font-weight: 600;
}

.fwa-70 {
    font-weight: 700;
}

.fwa-80 {
    font-weight: 800;
}

.fwa-90 {
    font-weight: 900;
}

.fwa-100 {
    font-weight: bold;
}


/* MARGIN */
.mg-0 {
    margin: 0 !important
}

.mg-1 {
    margin: .25rem !important
}

.mg-2 {
    margin: .5rem !important
}

.mg-3 {
    margin: 1rem !important
}

.mg-4 {
    margin: 1.5rem !important
}

.mg-5 {
    margin: 3rem !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.ml-0 {
    margin-left: 0 !important
}

.ml-1 {
    margin-left: .25rem !important
}

.ml-2 {
    margin-left: .5rem !important
}

.ml-3 {
    margin-left: 1rem !important
}

.ml-4 {
    margin-left: 1.5rem !important
}

.ml-5 {
    margin-left: 3rem !important
}

.mr-0 {
    margin-right: 0 !important
}

.mr-1 {
    margin-right: .25rem !important
}

.mr-2 {
    margin-right: .5rem !important
}

.mr-3 {
    margin-right: 1rem !important
}

.mr-4 {
    margin-right: 1.5rem !important
}

.mr-5 {
    margin-right: 3rem !important
}

.brd-b {
    border-bottom: 1px solid #e4e4e4;
}

.brd-r {
    border-right: 1px solid #e4e4e4;
}

.brd-l {
    border-left: 1px solid #e4e4e4;
}

.brd-t {
    border-top: 1px solid #e4e4e4;
}

.brd-one {
    border: 1px solid #e4e4e4;
}

.border-none {
    border: none;
}

.file-upload-container {
    cursor: pointer;
    border: 2px dashed #8b8b8b;
}

/* Estilo para el botón por defecto */
.menu-button {
    background-color: #f0f0f0;
}

.ovh {
    overflow: hidden;
    width: 60px;
    height: 60px;
}

/* Gifs */

.Save-gif {
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 25px;
}

.dnavi {

    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    width: 96px;
    border: 1px dashed #ffffff;

}

.dnavi:hover {
    color: var(--Blue-00);
    border-radius: 7px;
    background-color: var(--Gray);
    border: 1px dashed #186bc959
}

.dnavi:active {
    background-color: rgb(199, 224, 244);
}

.rotate {
    position: relative;
    top: 0px;
}

.text-red-10 {
    color: var(--Red-10);
}

.text-p {
    color: #3b3b3b;
    font-size: 13px;
}

.text-p {
    color: #3b3b3b;
    font-size: 13px;
}

.text-prim {
    color: var(--Blue-Primary);
}

.text-g {
    color: var(--Green-m);
}

.dnavi:hover .ovh .rotate {
    top: -60px;
}

.dnavi-active {
    color: var(--Blue-00);
    font-weight: 600;
    border-radius: 4px;
}

.dnavi-active .rotate {
    top: -60px;
}

.dnavi-active .text-p {
    color: var(--Blue-00);
}

.Pointer {
    cursor: pointer;
}

.scroll-y-aut {
    overflow-y: scroll;
}

.scroll-y-auto {
    overflow-y: auto;
}

/* Tables */
.Tam {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
}

.Tam tbody {
    display: block;
    height: 300px;
    /* Establece una altura fija para el cuerpo */
    overflow-y: auto;
    /* Habilita el scroll vertical */
}

.Tam tbody tr {
    display: table;
    width: 00px;
    table-layout: fixed;
    /* Mantiene las columnas con un ancho fijo */
}

.Tam td,
.Tam th {
    font-size: 14px;
    color: #5e5e5e;
    padding-left: 10px;
    border: 1px solid #f7f7f7;
}

.Tam tr:nth-child(odd) {
    Background-color: #FFF;
}

.Tam tr:nth-child(even) {
    Background-color: #F9FAFC;
}

.Tam tr:hover {
    background-color: #e0f1da;
}

.Tam th {
    padding: 14px 0px;
    text-align: center;
    background-color: #E8F3EF;
    color: #303030;
    font-size: 16px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;
}

.Tal {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
}

.Tal td,
.Tal th {
    padding: 16px;
    font-size: 14px;
    color: #5e5e5e;
    text-align: center;
}

.Tal tr:nth-child(odd) {
    Background-color: #FFF;
}

.Tal tr:nth-child(even) {
    Background-color: #F9FAFC;
}

.Tal tr:hover {
    background-color: #0c66ee11;
}

.Tal th {
    padding: 14px 0px;
    text-align: center;
    background-color: #0c66ee33;
    color: #303030;
    font-size: 16px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;
}




.table-cli {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* Mantener el ancho de las columnas */
}

.table-cli th {
    padding: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    /* Evitar que el texto se desborde */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.table-cli td {
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    /* Evitar que el texto se desborde */
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cli tbody tr:nth-child(even) {
    background-color: #eff8ff;
    /* Color de fila alternada */
}

.table-cli tbody tr:hover {
    background-color: #00b49628;
    /* Efecto hover */
    cursor: pointer;
}

.table-cli .highlight {
    background-color: #bee2ff;
    /* Color de resaltado */
}

.ovhid {
    overflow: hidden;
}

.auto-width {
    width: 300px;
    /* Ancho fijo o máximo del contenedor */
    max-width: 100%;
    /* Ancho máximo si es necesario */
    white-space: nowrap;
    /* No permitir saltos de línea */
    overflow: hidden;
    /* Ocultar el contenido que desborde */
    text-overflow: ellipsis;
    /* Mostrar puntos suspensivos al final */
}

.auto-width-height {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    max-width: 100%;
    /* Ancho máximo del contenedor */
    overflow-wrap: break-word;
    /* Romper palabras largas */
    overflow-y: hidden;
    /* Habilitar scroll vertical si el contenido excede la altura */
}

.inpt-basic {
    border: 1px solid var(--gray-color-5);
    background-color: #ffffff;
    border-radius: 5px;
    width: 100%;
    padding: 7px 12px;

}

.hidden-input {
    display: none;
    position: absolute;
    /* También puedes sacarlo del flujo del documento */
    pointer-events: none;
    /* Evita que se pueda interactuar con él */
}

.inpt-basic:focus {
    border: 1px solid var(--Blue-10);
    background-color: white;
    border-radius: 5px;
    outline: none;
}

.inpt-basic-100 {
    border: 1px solid #F8FAFC;
    background-color: #F8FAFC;
    width: 80px;
    text-align: center;
}

.inpt-basic-100:focus {
    border: 1px solid #2d80ce;
    background-color: white;
    border-radius: 5px;
    outline: none;
}

.inpt-form-cantidad {
    font-size: 30px;
    width: 100%;
    text-align: center;
    padding: 5px;
}

.inpt-form-bigl {
    font-size: 30px;
    width: 100%;
    text-align: left;
    padding: 5px;
}

.inpt-form-bigr {
    font-size: 30px;
    width: 100%;
    text-align: right;
    padding: 5px;
}


.inpt-Search-Cli {
    border: 1px solid #F8FAFC;
    font-size: 15px;
    width: 100%;
    text-align: center;
    padding: 13px 0px;
}



.box-white-10 {
    padding: 10px;
    background-color: white;
    border: 1px solid #3b3b3b;
}

.box-white-5 {
    padding: 5px;
    background-color: white;
    border: 1px solid #a2c9e4;
}

.img-cell {
    width: 25px;
}

.img-cell-two {
    width: 20px;
    cursor: pointer;
}

.col-out {
    padding: 0%;
    margin: 0%;
}

/* Modals */

.Modal-w {
    z-index: 500;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: #0000008f;
}

.modal-content-w {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin: 0px 30px;
}

.SelItemsPack {
    width: 50%;
    height: 100px;
    border: 1px solid #303030;
    margin-right: 20px;
    background-color: #FFFFFF;
    color: #000;
    border-radius: 7px;
    cursor: pointer;
}

.SelItemsPack:hover {
    background-color: #186ac9;
    color: #FFFFFF;
}

.TextSelItemsPack {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    padding: 5px;
}


.modal-save {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    /* Posición fija en la pantalla */
    z-index: 2000;
    /* Aparece encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Habilita el scroll si es necesario */
    background-color: rgba(0, 0, 0, 0.4);
    /* Fondo semi-transparente */
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
}

.modal-save-content {
    background-color: white;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    text-align: center;
    border-radius: 10px;
}

.modal-pago-content {
    background-color: white;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
    height: 300px;
    text-align: center;
    border-radius: 10px;
}


.loading-gif {
    width: 50px;
    /* Ajusta el tamaño del GIF según sea necesario */
    margin-bottom: 15px;
}

.Back-gray-a {
    background-color: hsl(200, 100%, 86%);
    padding: 8px;
}

.Back-gray-b {
    background-color: #d8d8d8;
    padding: 8px;
}

.centered-div-card {
    width: 150px;
    height: 75px;
    display: flex;
    font-weight: 600;
    background-color: #79acee;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    border: 1px solid black;
    /* Para visualizar la div */
    cursor: pointer;
}

.centered-div-card:hover {
    width: 150px;
    height: 75px;
    background-color: #b0df59;
}

.img_card_pago {
    width: 150px;
    height: 80px;
    margin-bottom: 10px;
    cursor: pointer;
}

/* Para navegadores WebKit (Chrome, Safari, Edge) */
.no-spin-buttons::-webkit-outer-spin-button,
.no-spin-buttons::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-logs {
    padding: 9px 30px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 7px;
    border: none;
    background-color: #ff2424;
    color: #FFFF;

}

input::placeholder {
    color: #cccccc;
    font-size: 13px;
}


/* Animaciones */

/* Define la animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-350px);
        /* Puedes ajustar la posición inicial si es necesario */
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
        /* Ajusta la posición inicial si es necesario */
    }

    to {
        opacity: 0;
        transform: translateX(-150px);
    }
}

/* Clase para activar la animación */
.animate-hide {
    animation: fadeOut 0.3s;
    /* Para asegurar que el elemento no sea interactuable mientras se oculta */
    pointer-events: none;
}

/* Clase para activar la animación */
.animate-show {
    animation: fadeIn 0.4s;
}

.inp-circle-t {
    border-radius: 4px;
    border: 1px solid #bbbbbb;
    width: 100%;
    padding: 8px 20px;
}

.inp-circle-t:focus {
    border: 1px solid #8f8f8f;
    outline: none;
}

.inp-circle-t::placeholder {
    color: #cccccc;
    font-size: 13px;
}

.Box-list {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bbcbff;
    margin-bottom: 10px;
    display: flex;
    background-color: #ffffff;

}

.Box-list-options {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bbcbff;
    margin-bottom: 10px;
    background-color: #ffffff;
    cursor: var(--Basic);
}

.img-box-list {
    width: 60px;
    height: 60px;
}

.title-box-list {
    font-weight: 500;
    width: 100%;
    padding-left: 10px;
    padding-top: 6px;
    font-size: 16px;
    color: #252525;
}

.title-box-linea {
    width: 100%;
    padding-left: 10px;
    font-size: 13px;
    color: var(--Blue-Primary);
}

.Contbut {
    display: flex;
    padding: 5px 10px;
}

.btn-icon-g {
    font-size: 12px;
    padding: 0px 7px;
    border: 1px dotted #007bd2b4;
    border-radius: 4px;
    height: min-content;
    color: #007bd2b4;
    background-color: rgba(0, 123, 210, 0.048);
    cursor: pointer;
    margin-right: 10px;
}

.btn-icon-r {
    font-size: 12px;
    padding: 0px 7px;
    border: 1px dotted #d2003f93;
    border-radius: 4px;
    height: min-content;
    color: #d2003f93;
    background-color: #d2003f0c;
    cursor: pointer;
    margin-right: 10px;
}

.OFY {
    overflow-y: auto
}

.OFXH {
    overflow-x: hidden
}

.Scroll-T::-webkit-scrollbar-track {
    background-color: transparent;
    /*color de la barra de fondo*/
}

.Scroll-T::-webkit-scrollbar-thumb {
    background-color: var(--Blue-00);
    /*color del manejador*/
}

.Scroll-T::-webkit-scrollbar {
    width: 8px;
    /*ancho del scroll vertical*/
    height: 8px;
    /*alto del scroll horizontal*/
}

/* Contenedor desplazable */
.Scrl-T tbody {
    display: block;
    height: calc(100% - 50px);
    overflow-y: auto;
    width: 100%;
}

/* Asegura que las columnas del cuerpo y encabezado se alineen */
.Scrl-T thead, .Scrl-T tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.box-modal {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #00000056;
    position: fixed;
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

.td_sel{
    background-color: #0091ff28 !important;
    color: #FFF !important;
}

.Click-Green-Trans {
    position: relative;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.Click-Green-Trans::after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    width: 350%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all 0.8s;
}

.Click-Green-Trans:active::after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
    width: 0%;
    height: 100%;
}


.Click-G {
    position: relative;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
}

.Click-G::after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    width: 350%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all 0.8s;
}

.Click-G.active::after {
    opacity: 1;
    width: 0%;
    transition: 0s;
}

.Click-B {
    position: relative;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
}

.Click-B::after {
    content: "";
    background: var(--Blue-02-03);
    display: block;
    position: absolute;
    width: 350%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all 0.8s;
}

.Click-B.active::after {
    opacity: 1;
    width: 0%;
    transition: 0s;
}

.Click-Blue-Trans {
    position: relative;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.Click-Blue-Trans::after {
    content: "";
    background: var(--Blue-02-03);
    display: block;
    position: absolute;
    width: 350%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: all 0.8s;
}

.Click-Blue-Trans:active::after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
    width: 0%;
    height: 100%;
}

.ovhd {
    overflow: hidden;
}

.box-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.Box-Prod {

    width: 300px;
    margin: 7px;
    border-radius: 7px;
    border: 1px dashed var(--Turq-07);
    background-color: #FFF;
    padding: 5px;
    cursor: pointer;

}

.Box-Prod-opt {

    width: 300px;
    margin: 7px;
    border-radius: 7px;
    border: 1px dashed var(--sq-06);
    background-color: #FFF;
    padding: 5px;
    cursor: pointer;

}

.Box-Prod-edit {
    border: 2px dashed var(--Blue-Primary);
}

.txt-gl {
    color: var(--Blue-10);
}

.btn-opt-red {
    background-color: #FFF;
    border: 1px dashed #FFF;
    padding: 4px;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

.btn-opt-blue {
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    border: 1px dashed var(--Blue-30);
    width: 35px;
    height: 35px;
    margin-right: 10px;
}

.btn-opt-green {
    background-color: #FFF;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    padding: 3px;
    margin-right: 10px;
}

.drag-opt {
    border-radius: 7px;
    border: 2px dashed var(--Blue-00);
}

.S-l {
    box-shadow: -5px 6px 26px 1px rgba(209, 209, 209, 0.6);
    -webkit-box-shadow: -5px 6px 26px 1px rgba(209, 209, 209, 0.6);
    -moz-box-shadow: -5px 6px 26px 1px rgba(209, 209, 209, 0.6);
}

.Box-table-tam {
    border: 1px solid #e5edff;
    border-radius: 10px;
}

.Box-table-tam-new {
    border: 1px solid #0c66ee36;
    border-radius: 10px;
}



.btn-Green-t {
    font-size: 14px;
    padding: 10px 40px;
    background-color: var(--Blue-Primary);
    color: #FFF;
    width: max-content;
    height: min-content;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
}

.btn-Green-t:hover {
    background-color: var(--sq-14);
    color: #ffffff;
}

.inp-busq-g {
    height: 37px;
    padding: 10px;
    border: 1px solid var(--Blue-10);
    border-radius: 4px;
    background-color: white;
}

.Selt-g {
    width: 100%;
    padding: 7px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid var(--Blue-10);
}

.bg-p {
    background-color: #FFEDE6;
    border: 1px dashed #ffc7b100;
}

.bg-p:hover {
    background-color: #fff;
    border: 1px dashed #ffc7b1;
}

.bg-gc {
    background-color: #0c66ee11;
    border: 1px dashed #0c66ee5d;
}

.bg-gc:hover {
    background-color: #ffffff;
    border: 1px dashed #82f1c9;

}

.bg-gd {
    background-color: #147aff37;
    border: 1px dashed #222222ed;
    max-width: min-content;
    padding: 7px 25px;
    color: #0e0e0e !important;
}

.bg-gd:hover {
    background-color: #fffb00;
    border: 1px dashed #82f1c9;
}

.flagx {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.items-pedidos {
    padding: 10px;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 7px;
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.text-cen-div {
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    text-align: center;
    /* Para asegurarte que el texto esté centrado si tiene varias líneas */
}


.btn-dell-rec {
    width: 40px;
    height: 40px;
    border: 1px dashed #f0003481;
    border-radius: 5px;
    padding: 3px;
}

.btn-chang-rec {
    color: #ff7b00;
    padding: 0px 15px;
    height: 40px;
    border: 1px solid #F90;
    border-radius: 5px;
}

.btn-chang-rec2 {
    color: #e6132f;
    padding: 0px 15px;
    height: 40px;
    border: 1px dotted #e6132f;
    border-radius: 5px;
}

.btn-chang-green {
    color: #00c31a;
    padding: 0px 15px;
    height: 40px;
    border: 1px dotted #00c31a;
    border-radius: 5px;
}

.btn-chang-blue {
    color: #008cdd;
    padding: 0px 15px;
    height: 40px;
    border: 1px dotted #008cdd;
    border-radius: 5px;
}


.full-height-20 {
    height: calc(100vh - 200px);
}

/* Estilo de la tabla */
.Txls {
    width: 100%;
    border-collapse: collapse;
}

.Txls tr:nth-child(odd) {
    Background-color: #FFF;
    border-bottom: 1px solid #0c66ee36;
}

.Txls tr:nth-child(even) {
    Background-color: #F9FAFC;
    border-bottom: 1px solid #0c66ee36;
}

.Txls tbody tr:hover {
    background-color: #0c66ee11;
}

.Txls tbody td {
    padding: 16px;
    font-size: 14px;
    color: #5e5e5e;
    border: 'none';
}
    
/* Encabezado fijo */
.Txls thead th {
    position: sticky;
    z-index: 1;
    text-align: left;

    padding: 14px 0px;
    text-align: center;
    background-color: #327ae618;
    color: #083b88c4;
    font-size: 15px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;

    white-space: nowrap;       /* Evita el salto de línea */
    overflow: hidden;          /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis;   /* Muestra los tres puntos (...) */
    width: min-content;          /* Define un ancho máximo para la columna */
}

/* Estilos de las celdas */
.Txls tbody td {
    padding: 5px;
    text-align: center;

    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis; 

/*     border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;   */  
}







/* Estilo de la tabla */
.Txl {
    width: 100%;
    border-collapse: collapse;
}

.Txl tr:nth-child(odd) {
    Background-color: #FFF;
    border-bottom: 1px solid #0c66ee36;
}

.Txl tr:nth-child(even) {
    Background-color: #F9FAFC;
    border-bottom: 1px solid #0c66ee36;
}

.Txl tbody tr:hover {
    background-color: #0c66ee11;
}

.Txl tbody td {
    padding: 16px;
    font-size: 14px;
    color: #5e5e5e;
    text-align: center;
    border: 'none';
}
    
/* Encabezado fijo */
.Txl thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;

    padding: 14px 0px;
    text-align: center;
    background-color: #1b6fee33;
    color: #303030;
    font-size: 16px;
    font-weight: 100;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    font-weight: 600;
}

/* Estilos de las celdas */
.Txl tbody td {
    padding: 10px;
/*     border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;   */  
}

.Bx-prod{
    border: 1px dashed #1567b477;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 7px;
}

.ms-columna-reduce-180 {
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;   
    max-width: 180px; 
}

.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto;
}

.flex-container {
    display: flex;
    height: calc(100vh - 70px ); /* Full height of the viewport */
    width: 100%;
    background-color: var(--Back-g);
}

/* 🟢 Menú Izquierdo */
.m_left_up {
    background: #ffffff;
    color: #fff;
    width: 300px;
    height: calc(100vh - 80px);
    margin-left: 10px;
    border-radius: 7px;
}

.accordion {
    cursor: pointer;
    padding: 6px 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14.5px;
    transition:.5s ease-in-out;   
    background-color: #006bbd0a;
    border-radius: 4px;
    border: 1px solid #006bbd1a;
}

.ms-titls{
    font-size: 15px;
    font-weight: 600;
    color: #006BBD;
}
.btn-blue-li {
    font-size: 15px;
    font-weight: 600;
    padding: 6px 21px;
    background-color: white;
    color: var(--Blue-b);;
    width: max-content;
    height: min-content;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    border: 2px solid var(--Blue-b);
}

.btn-blue-li:hover {
    background-color: var(--sm-f);
    color: #ffffff;
    border: 2px dashed var(--sm-f);
}

.ofh {
    overflow: hidden;
}





/* Para Firefox */
.no-spin-buttons {
    -moz-appearance: textfield;
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}