@import url("https://thinkme-ph.mx/elektra/estilos/sidebar.css");
@import url("https://thinkme-ph.mx/elektra/estilos/lib/bootstrap.css");

/* @font-face {
    font-family: 'Roboto Bold';
    src: url(https://thinkme-ph.mx/elektra/estilos/lib/font/Roboto-Bold.ttf) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    src: url(https://thinkme-ph.mx/elektra/estilos/lib/font/Roboto-Light.ttf) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    src: url(https://thinkme-ph.mx/elektra/estilos/lib/font/Roboto-Bold.ttf) format('woff2');
}

@font-face {
    font-family: 'Roboto Light';
    src: url(https://thinkme-ph.mx/elektra/estilos/lib/font/Roboto-Light.ttf) format('woff2');
} */


/* div{P
    border: solid 1px #ccc;
} */


/************* Austinn *****************+*/

@font-face {
    font-family: 'Austin Light';
    src: url(https://thinkme-ph.mx/elektra/fonts/Austin/Austin-Light.otf) format('woff2');
}

@font-face {
    font-family: 'Austin Bold';
    src: url(https://thinkme-ph.mx/elektra/fonts/Austin/Austin-Bold.otf) format('woff2');
}

@font-face {
    font-family: 'Austin Medium';
    src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/Austin-Medium.otf) format('woff2');
}


/************* Gotham *****************+*/

@font-face {
    font-family: 'Gotham Light';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    line-height: 1.2;
    src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/Gotham-Light.otf) format('woff2'), url(https://thinkme-ph.mx/elektra/fonts/Gotham/GothamLight.ttf) format('truetype');
    /* src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/GothamLight.ttf) format('truetype'); */
}

@font-face {
    font-family: 'Gotham Ligts';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    line-height: 1.2;
    src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/Gotham-Light.otf) format('woff2');
}

@font-face {
    font-family: 'Gotham Bold';
    src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/Gotham-Bold.otf) format('woff2');
}

@font-face {
    font-family: 'Gotham Medium';
    src: url(https://thinkme-ph.mx/elektra/fonts/Gotham/GothamMedium.ttf) format('truetype');
}


/************* Neutra *****************+*/

@font-face {
    font-family: 'Neutra Bold';
    src: url(https://thinkme-ph.mx/elektra/fonts/Neutra/NeutraText-Bold.otf) format('woff2');
}


/************* Vonnes *****************+*/

@font-face {
    font-family: 'Vonnes Light';
    src: url(https://thinkme-ph.mx/elektra/fonts/Vonnes/Vonnes-Light.otf) format('woff2');
}

@font-face {
    font-family: 'Vonnes Bold';
    src: url(https://thinkme-ph.mx/elektra/fonts/Vonnes/Vonnes-Bold.otf) format('woff2');
}

 :root {
    --primary-font-color: #0075B1;
    --back-colorary-font-color: #9E297E;
    --tertiary-font-color: #fff;
    --font-color: #000;
    --font-color-rgb80: rgba(0, 0, 0, 0.95);
    --font-color-rgbSecond: rgba(0, 0, 0, 0.50);
    --font-color-rgbThird: rgba(0, 0, 0, 0.20);
    --font-color-rgbSmall: rgba(0, 0, 0, 0.065);
    --menu-color: #ffffff;
    --primary-color: #99989A;
    --font-color-rgb80ary-color: #D4D1D4;
    --tertiary-color: #DCEDF5;
    --back-color: #fff;
    --fontFamilyLight: "Gotham Light";
    --fontFamilyBold: "Gotham Bold";
    --fontFamilyBoldTitle: "Vonnes Bold";
    --fontFamilySubTitle: "Gotham Medium";
    --fontFamilyFirma: "Austin Medium";
    --input: "Gotham Ligts";
    --superFuenteSize: 20px !important;
    --fontSizePrimary: 14px;
    --fontSizesecondary: 15px;
    --fontSizeTertiary: 18px;
    --fontSize25: 25px;
    --fontSizeTitle: 33px;
    --fontSizeSubTitle: 22px;
    --fontSize33: 38px;
    --fontSize40: 40px;
    --fontSize45: 45px;
    --first: #221828;
    --font-color-rgb80Sided: #28110E;
    --font-color-rgb80: #000000;
    --barras: #DD3023;
    --fontColor: #987248;
    --colorPalacio: #414042;
    --fondoSecondG: #CFCDD0;
    --fondoThird: #EDE5C0;
    --fondoIc50: rgba(65, 64, 66, 0.5);
    --fondoIc20: rgba(65, 64, 66, 0.2);
}

* {
    line-height: 1.2;
}

html {
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    border: 0px;
    font-family: var(--fontFamilyLight);
    /*	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
    margin: 0px 0px 15px 0px;
    color: var(--font-color-rgb80);
    background: var(--back-color);
    font-size: 0px;
    box-sizing: border-box;
    /*     perspective: 1500px; */
}


/* div {
    margin: 0px;
    border: 0;
    box-sizing: border-box;
    position: relative;
} */

p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    border: 0px;
}

input {
    box-sizing: border-box;
}

input:focus {
    outline: none;
}

td {
    padding: 0px 0px 0px 0px;
    border-spacing: 0px;
}

table {
    width: 100%;
    padding: 0px 0px 0px 0px;
    border-spacing: 0px;
}

img {
    border-style: none;
    border-width: 0px;
    border: 0;
    margin: 0px;
}

a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    border-style: none;
    border: none;
}

button {
    cursor: pointer;
}

ul {
    text-decoration: none;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

a:hover {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
}


/*INPUTS*/

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 10px;
}

textarea {
    width: 50%;
    text-align: center;
    height: 250px;
    background-color: var(--font-color-rgbThird);
    border: none;
    margin-top: 30px;
    margin-bottom: 30px;
}


/* input::-webkit-input-placeholder {
    color: var(--font-color-rgb80);
    padding: 0px !important;
}

input:-moz-placeholder {
    color: var(--font-color-rgb80);
    padding: 0px !important;
}

input::-moz-placeholder {
    color: var(--font-color-rgb80);
    padding: 0px !important;
}

input:-ms-input-placeholder {
    color: var(--font-color-rgb80);
    padding: 0px !important;
} */

input[type="checkbox"] {
    width: 30px;
}

.input50 {
    display: inline-block;
    width: 48.5% !important;
    margin-right: 1%;
}


/*
option
{
	color: #aaa;
}
*/


/* div {
    border: solid 1px #1a1a1a;
} */

select {
    width: 98%;
    font-size: 18px;
    color: var(--back-color);
    border: none;
    background-color: var(--font-color-rgbThird);
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    font-weight: 400;
    margin-bottom: 20px !important;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--fontFamilyLight);
}


/* DISPLAY GENERAL */

.BodyWithMenu {
    /* padding-left: 170px;
    padding-right: 10px; */
    margin: auto;
    display: inline-flex;
}

.EncloserContenido {
    /*  position: relative;
        display: inline-block;
        width: calc( 100vw - 350px);
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        text-align: center; */
    width: 99%;
    margin: auto;
    height: 85%;
}

@media screen and (max-width: 800px) {
    .BodyWithMenu {
        padding-left: 0%;
    }
    .EncloserContenido {
        width: 97%;
    }
}

.EncloserInfo {
    width: 100%;
    /*     padding-left: 10px;
    text-align: left; */
}

.WithMenu {
    width: 73%;
    margin: 10px auto;
    padding-left: 10%;
    /* text-align: center; */
}

.Centerer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100vh;
}

.Offset {
    margin-left: 125px;
}

.TextoCajas {
    text-align: center;
    font-size: 20px;
    color: var(--font-color-rgb80);
    margin-bottom: 80px;
    display: none;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.Divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.Separador {
    width: 100%;
    height: 30px !important;
    clear: both;
    pointer-events: none;
}

.TituloContenido {
    position: relative;
    font-size: var(--fontSizeTitle);
    font-family: var(--fontFamilyBoldTitle);
    color: var(--font-color-rgb80);
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}

.LineaTituloContenido {
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    height: 4px;
    border-radius: 1px;
    margin-left: 10px;
}

.nFila {
    position: absolute;
    left: -30px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    padding-top: 10px;
}

.SubtituloContenido {
    width: 80%;
    font-family: var(--fontFamilySubTitle) !important;
    font-size: var(--fontSizeSubTitle);
    color: var(--font-color-rgb80);
    margin-bottom: 8px;
    transition: all 0.3s;
    margin-left: 0px;
    background: transparent;
    border-radius: 5px;
    padding: 0px 15px 1px 0px;
    text-transform: uppercase;
}

.SubtituloContenido i {
    float: right;
    vertical-align: top;
}


/* .SubtituloContenido:hover {
    color: #ade6ff;
} */

.SubtituloMiniContenido {
    position: relative;
    font-size: 16px;
    color: var(--font-color-rgb80);
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}

.MegaCover {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: none;
    overflow: scroll;
}

.WhiteCuadro {
    position: absolute;
    left: 50%;
    top: 200px;
    width: 400px;
    padding: 40px;
    background-color: var(--font-color-rgb80);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    font-size: var(--fontSizesecondary);
    color: #444;
    transform: translateX(-50%);
    border-radius: 20px;
    text-align: center;
}


/* div {
    border: solid 1px #1a1a1a;
}
 */


/* COMPONENTES */


/* BOTONES */

.BotonRegular {
    font-size: var(--fontSizesecondary);
    background: transparent;
    /* color: var(--back-color) !important;*/
    /* color: var(--menu-color) !important; */
    color: var(--font-color)!important;
    width: fit-content;
    border-radius: var(--fontSizesecondary);
    border: 1px solid var(--font-color-rgb80) !important;
    font-family: var(--input);
    font-size: var(--fontSizesecondary);
    display: block;
    clear: both;
    padding: 10px;
    /*  text-align: center;
    display: inline-block;
    border: 1px solid var(--font-color-rgb80);
    width: fit-content;
    padding: 15px 20px 15px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    background-color: transparent;
    text-align: center;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 300px; */
}

.BotonRegularBackBlack {
    font-size: var(--fontSizesecondary);
    background: transparent;
    color: var(--font-color-rgb80);
    padding: 12px 15px 12px 15px;
    width: fit-content;
    border-radius: var(--fontSizesecondary);
    margin: auto;
    border: 1px solid var(--font-color-rgbSecond);
    font-family: var(--input);
    font-size: var(--fontSizesecondary);
}

.BotonRegularPaginator {
    display: inline-block;
    background: transparent;
    color: var(--font-color-rgb80);
    padding: 15px;
    width: fit-content;
    border-radius: var(--fontSizesecondary);
    margin: 10px auto;
    border: 1px solid var(--font-color-rgbSecond);
    font-size: var(--fontSizesecondary);
}

.BotonRegularPaginator:hover {
    background-color: var(--font-color-rgbThird);
}

.BotonRegularPaginator .fa {
    font-size: var(--fontSizeSubTitle);
}

.BotonRegular:hover {
    background-color: var(--font-color-rgbThird);
    color: var(--back-color);
}

.BotonSecundario {
    display: inline-block;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-bottom: 1px dotted var(--font-color-rgb80);
}

.BotonExportar {
    display: inline-block;
    float: right;
    font-size: 12px;
    color: var(--font-color-rgb80);
    border: 1px solid var(--font-color-rgb80);
    padding: 8px 15px 8px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    background-color: transparent;
    margin-left: 20px;
    vertical-align: middle;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.1);
}

.BotonExportar:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.Cancelar {
    margin-right: 10px;
    border-color: var(--font-color-rgb80);
}

.ContenedorSearchBar {
    position: relative;
    width: 100%;
}

.SearchBarIcono {
    position: absolute;
    right: 23px;
    top: 23%;
    transform: translateY(-50%);
    color: var(--font-color)!important;
    font-size: 20px;
}

.SearchBarIcono i {
    color: var(--tertiary-font-color)!important;
    margin-top: -8px;
}


/* div {
    border: solid 1px red;
} */


/* TARJETAS */

.Tarjeta {
    position: relative;
    display: inline-block;
    width: 15%;
    height: 120px;
    margin: 20px 0.7% 0px 0.7%;
    border-radius: 10px;
    background-color: var(--font-color-rgb80);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.Tarjeta i {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--back-color) !important;
    font-size: 15px;
}

.InfoTarjeta {
    position: absolute;
    left: 15px;
    bottom: 15px;
    text-align: left;
    color: var(--back-color) !important;
}

.NumeroInfoTarjeta {
    font-size: 40px;
    font-weight: bold;
}

.DisplayTarjeta {
    font-size: 15px;
}

.ColorTarjetaBlue {
    color: var(--back-color) !important;
}

.ColorTarjetaGreen {
    color: #8C996F;
}

.ColorTarjetaYellow {
    color: #df9f31;
}

.ColorTarjetaRed {
    color: #b85859;
}

.ContenedorSelectorsFecha {
    width: 100%;
    text-align: center;
}

.SelectorFecha {
    display: inline-block;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    margin-right: 20px;
    margin-left: 20px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

.SelectorFechaSelected {
    color: #5AC7FA;
    border-bottom: 1px dotted #5AC7FA;
}


/*CIRCULOS*/

.ContenedorCircleMenu {
    position: relative;
    width: 100%;
    height: 150px;
    text-align: center;
    transition: all 0.8s;
}

.CirculoParent {
    position: relative;
    display: inline-block;
    width: 200px;
}

.Circulote {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    width: 120px;
    height: 120px;
    background-color: var(--font-color-rgb80);
    border-radius: 60px;
    font-size: 16px;
    font-weight: bold;
    color: var(--back-color) !important;
    cursor: pointer;
}

.CirculoChild {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    border: 1px solid var(--font-color-rgb80);
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    opacity: 0;
    transition: all 0.5s;
    cursor: pointer;
    pointer-events: none;
}


/* TABLAS */

.ContenedorTabla {
    width: 100%;
    overflow-x: scroll;
    text-align: left;
    border: none;
    padding: 20px;
    margin: auto;
}

.ToggleColumna {
    display: inline-block;
    border: 1px solid var(--font-color-rgbSmall);
    border-radius: 10px;
    padding: 12px 10px 11px 10px;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    font-family: var(--fontFamilyLight);
    margin-right: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.ToggleColumnaSelected {
    background-color: var(--font-color-rgbSmall);
}

.ContenedorTabla table {
    width: 100%;
    color: var(--font-color-rgb80);
    font-size: var(--fontSizesecondary);
}

.ContenedorTabla th {
    padding: 20px 10px 5px 10px;
    text-align: left;
    box-sizing: border-box;
    background-color: transparent;
    color: var(--font-color-rgb80);
}

.ContenedorTabla td {
    padding: 12px 10px 12px 10px;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
    border-bottom: 25px solid var(--font-color-rgbSmall);
    /* 
    border-top: 5px solid #21252A; */
}

.ContenedorTabla tr:not(:first-child) {
    /* background-color: rgba(0, 0, 0, 0.2); */
}

.ContenedorTabla tr:nth-child(even) {}

.busqueda_tabla {
    width: 100% !important;
    font-size: 16px !important;
    background-color: var(--font-color-rgbThird) !important;
    padding: 10px 15px 10px 15px !important;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
    text-align: left !important;
}

.Paginadores {
    position: relative;
    padding: 0px 0px 30px 0px;
    text-align: center;
}

.Paginadores1 {
    position: relative;
    padding: 0px 0px 30px 0px;
    text-align: center;
}

.Paginador {
    display: inline-block;
    padding: 15px 20px 15px 22px;
    border: 1px solid var(--font-color-rgb80);
    color: var(--font-color-rgb80);
    font-size: 25px;
    border-radius: 50px;
    margin-right: 10px;
}


/* LISTA SIMPLE */

.ContenedorRemitentes {
    width: 45%;
    display: inline-block;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-bottom: 30px;
    height: 160px;
    white-space: normal !important;
    background-color: transparent;
    border: 1px solid var(--font-color-rgb80);
}

.ContenedorDestinatarios {
    width: 30%;
    display: inline-block;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 30px;
    height: 150px;
    white-space: normal !important;
    background-color: transparent;
    border: 1px solid var(--font-color-rgb80);
    display: none;
    vertical-align: top;
}

.ElementoListaSimple {
    display: inline-block;
    font-size: var(--fontSizePrimary);
    color: var(--font-color-rgb80);
    text-align: left;
    padding: 8px 0px 8px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ElementoListaSimpleDestinatarios {
    display: inline-block;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    text-align: left;
    padding: 8px 0px 8px 15px;
    width: 100%;
    white-space: normal;
    vertical-align: top;
}

.ActionsListaSimple {
    display: inline-block;
    font-size: 25px;
    color: var(--font-color-rgb80);
    text-align: right;
    width: 5%;
    vertical-align: top;
    padding-top: 25px;
}

.LabelInputNormal {
    font-size: 16px;
    color: var(--font-color-rgb80);
    text-align: left;
    margin-bottom: 8px;
    padding-left: 20px;
}

.ActionsListaSimple:hover {
    color: var(--barras);
}


/* MENUS */

.Menu {
    position: fixed;
    left: 0px;
    top: 0;
    width: 170px;
    height: 97vh;
    background-color: var(--menu-color);
    text-align: left;
    font-size: 15px;
    color: var(--font-color-rgb80);
    border-radius: 0px;
}

@media screen and (max-width: 800px) {
    .Menu {
        display: none;
    }
}

.ElementoMenu {
    color: var(--back-color) !important;
    position: static;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 3px;
    transition: all 0.5s;
    font-size: 15px;
    font-family: var(--fontFamilyLight);
    /*padding-left: 20px;*/
}

.TituloElementoMenu {
    color: var(--barras);
    font-family: var(--fontFamilyLight);
    position: relative;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 3px;
    margin-top: 15px;
    transition: all 0.5s;
}

.ElementoMenu:hover {
    margin-left: 5px;
}

.ElementoMenuSelected {
    /* padding-left: 25px; */
    padding-left: 5px;
}

.ElementoMenuSelected:after {
    content: " •";
}

.ElementoMenuBusqueda {
    background-color: var(--font-color-rgb80);
    font-family: var(--fontFamilyBold);
    margin-top: 10px;
    width: 200px;
    box-sizing: border-box;
    padding: 10px 10px;
    font-size: var(--fontSize25);
    color: var(--back-color) !important;
    border: none;
    outline: none;
}


/* .ElementoMenuBusqueda:focus {
    outline: none;
} */

.InfoUsuario {
    margin-top: 0px;
    font-size: var(--fontSizesecondary);
    color: var(--back-color) !important;
}

.InfoUsuario a {
    padding-top: 10px!important;
    color: var(--back-color) !important;
    text-decoration: none;
}

.InfoUsuario a:hover {
    color: #f1a84b!important;
    text-decoration: underline;
}

.LogoMenu {
    /*width: 60%;
    margin-left: 10%;
    padding-top: 30px;
    padding-bottom: 0px;*/
    margin-bottom: 45px;
    margin-top: 30px;
    width: 75%;
}


/* LOGIN */

.LoginTexto {
    text-align: left;
    font-size: 20px;
    font-family: var(--fontFamilyLight);
    color: var(--back-color);
    margin-bottom: 5px;
}

.LoginInput {
    width: 400px !important;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    padding: var(--fontSizesecondary) 10px 5px 10px;
    margin: 0px !important;
    font-family: var(--fontFamilyLight);
    background-color: var(--back-color) !important;
}

.LoginInput::-webkit-input-placeholder {
    color: var(--back-color);
    padding: 0px !important;
}

.LoginInput:-moz-placeholder {
    color: var(--back-color);
    padding: 0px !important;
}

.LoginInput::-moz-placeholder {
    color: var(--back-color);
    padding: 0px !important;
}

.LoginInput:-ms-input-placeholder {
    color: var(--back-color);
    padding: 0px !important;
}

.BotonLoginInput {
    position: absolute;
    right: 8px;
    bottom: 3px;
    width: 30px;
    background-color: #B3EDFF;
    font-size: 20px;
    color: #444;
    padding: 6px 25px 6px 10px;
    text-align: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    text-align: center;
}

.BotonLoginInput:hover {
    background-color: #b2dbeb;
}

.LogotipoLogin {
    position: relative;
    left: 610px;
    top: 160px;
    width: 300px;
}

.LogotipoLogin2 {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 150px;
}

.Bienvenida {
    font-size: 40px;
    color: var(--font-color-rgb80);
}

.CentererLogin {
    transition: all 0.5s;
    left: 150%;
}


/* CLIENTES */

.SelectorCouriers {
    background-color: var(--font-color-rgb80);
    display: inline-block;
    width: 150px;
    height: 150px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    border: 1px solid var(--font-color-rgb80);
    border-radius: 10px;
    transition: all 0.3s;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.d-couriers {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
}

.selCoutImgDs {
    padding: 25px;
    margin: 10px;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    background-color: var(--font-color-rgb80);
}

.SelectorCouriersPalacio {
    width: 100%;
    height: auto;
    background-color: transparent;
}


/* .SelectorCouriers:hover {
    border: 1px solid white;
    border-radius: 20px;
}
 */

.TextoPaquetes {
    display: inline-block;
    text-align: right;
    color: var(--font-color-rgb80);
    font-size: 16px;
    vertical-align: middle;
    margin-bottom: 30px;
}

.ControladorPaquetes {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    color: var(--font-color-rgb80);
    font-size: 16px;
    margin-bottom: 30px;
}

.Flecha {
    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    vertical-align: middle;
    font-size: 30px;
    color: var(--font-color-rgb80);
    cursor: pointer;
}

.NumeroPaquetes {
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
    color: var(--font-color-rgb80);
}

.PaquetesID {
    display: inline-block;
    width: 8%;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    text-align: left;
}

.PaquetesInput {
    display: inline-block;
    width: 8%;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    border: none;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    font-weight: 400;
    margin: 0px 5px 0px 5px;
}

.ContenedorPaquetes {
    margin-bottom: 30px;
}


/* .bodyComitan {
    background: #323646 !important;
} */

.cajasvideo {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 100px;
    transform: translate(-50%, -50%);
    width: 500px;
}

.DetalleInfo {
    width: 25%;
    display: inline-block;
    margin-right: 8.3%;
    font-size: 15px;
    color: var(--font-color-rgb80);
    text-align: left;
    vertical-align: top;
}

.DetalleInfo img {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--barras);
    padding: 10px 40px 10px 40px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.celda_excel {
    display: inline-block;
    width: 12.5%;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    vertical-align: top;
}

.celda_excel:focus {
    border-radius: 5px;
    outline: solid 1px var(--barras);
    box-sizing: border-box;
}

.celda_header {
    background-color: rgba(0, 0, 0, 0.2);
}

.AgregarAlgo {
    position: absolute;
    font-size: 20px;
    color: var(--font-color-rgb80);
}

.AgregarAlgo i {
    margin-right: 5px;
    margin-bottom: 5px;
}

.AgregarColumnas {
    right: -70px;
    top: 10px;
}

.AgregarFilas {
    left: 20px;
    bottom: -50px;
}

.Fechas {
    color: var(--back-color);
    font-size: var(--fontSizesecondary);
    cursor: pointer;
    margin-bottom: 0px;
    text-align: center;
    width: fit-content;
    background: var(--font-color-rgbSecond);
    padding: 15px;
    border-radius: 5px;
}

.Fechas .fa-calendar,
.Fechas .fa-caret-down {
    color: var(--barras);
}

.Comentario {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: var(--fontSizesecondary);
    color: #666;
    padding: 7px 7px;
    border-radius: 2px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.SelectFiltro {
    display: inline-block;
    padding: 4px 5px;
    margin-right: 40px;
}

.SelectFiltro button {
    color: var(--font-color-rgb80);
    border-radius: 20px;
}

.LabelSelect {
    font-size: 12px;
    font-weight: bold;
    color: var(--font-color-rgb80);
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 10px;
}

.HeaderColumna {
    cursor: pointer;
}

.BotonAzulGuardar {
    display: inline-block;
    padding: 10px;
    background-color: var(--font-color-rgbSecond);
    color: var(--back-color);
    font-size: var(--fontSizesecondary);
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    margin-top: 0px;
    float: right;
}

.BotonAzulFiltros {
    background-color: var(--font-color-rgb80);
    color: var(--barras);
    font-size: var(--fontSizesecondary);
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    margin-left: 0px;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    display: block;
    width: 150px;
}

.btn-filtros {
    display: inline;
    width: 100%;
}

.LabelShowToggles {
    font-size: var(--fontSizesecondary);
    font-weight: bold;
    color: var(--font-color-rgb80);
    margin-bottom: 15px;
    cursor: pointer;
    text-align: right;
    margin-right: 1%;
}

@media screen and (max-width: 800px) {
    .LabelShowToggles {
        display: none;
    }
}

.ContenedorToggles {
    display: none;
    margin-bottom: 40px;
}

.Linea {
    width: 100%;
}

.LineaBottom {
    width: 0%;
    height: 10px;
    border-radius: 0px 5px 5px 0px;
    background-color: var(--barras);
    margin-left: 0px;
    transition: all 2s;
}

.TablaErrores {
    width: 50%;
}

.SubtituloEdicion {
    font-size: var(--fontSizesecondary);
    display: inline-block;
    color: var(--font-color-rgb80);
    margin-top: 20px;
    border-bottom: 1px dotted var(barras);
    padding: 10px;
}

.FallbackElement {
    position: relative;
    display: inline-block;
    width: 33%;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    color: var(--font-color-rgb80);
    font-weight: bold;
    text-transform: uppercase;
}

.CoverPagina {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
}

.CoverPagina2 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
}

.CoverPagina3 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    overflow: scroll;
    text-align: center;
}

.CoverPagina3Contenedor {
    position: relative;
    display: inline-block;
    width: 800px;
    margin-top: 100px;
}

.Modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    padding: 40px;
    background-color: var(--font-color-rgb80);
    border-radius: 20px;
}

.Modal input[type="text"] {
    width: 98%;
    font-size: 18px;
    color: #444;
    border: 1px solid #999;
    background-color: var(--font-color-rgbThird);
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    font-weight: 400;
    margin-bottom: 20px;
}

.Modal input::placeholder {
    color: #999;
    opacity: 1;
}

.Modal input:-ms-input-placeholder {
    color: #999;
}

.Modal input::-ms-input-placeholder {
    color: #999;
}

.Modal textarea {
    width: 98%;
    font-size: 18px;
    color: #444;
    border: 1px solid #999;
    background-color: var(--font-color-rgb80);
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: left;
}

.BotonModal {
    display: inline-block;
    float: right;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    padding: 8px 20px 8px 20px;
    border-radius: 10px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    background-color: #009ef0;
    margin-left: 20px;
    vertical-align: middle;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0px;
    margin-bottom: 0px;
}

.BotonModal:hover {
    background-color: #0076b4;
}

.BotonModalRojo {
    background-color: #e74670;
    cursor: pointer;
}

.BotonModalRojo:hover {
    background-color: #9f304d;
}

.LogotipoFallback {
    width: 60%;
}

.ContenedorOpcionesTookacl {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 50px;
}

.OpcionTookacl {
    position: relative;
    display: inline-block;
    background-color: var(--font-color-rgb80);
    padding: 20px;
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
    width: 90px;
}

.Bienvenida {
    /* position: absolute;
    display: inline-block;
    width: 60%;
    vertical-align: middle;
    text-align: left;
    left: 0px; */
}

.BienvenidaNombre {
    color: var(--primary-font-color);
    font-size: var(--fontSizeTitle);
    font-family: var(--fontFamilyBoldTitle);
    /* width: 800px; */
}

.BienvenidaEmpresa {
    font-size: var(--fontSizeSubTitle);
    color: var(--colorPalacio);
    font-family: var(--fontFamilyBold);
    margin-top: 0px;
    font-weight: bolder;
}

.OptionsContainer {
    /* position: absolute;
    display: inline-block;
    width: 50%; */
    vertical-align: middle;
    text-align: right;
}

@media screen and (max-width: 800px) {
    .Bienvenida {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
    }
    .OptionsContainer {
        display: none;
    }
    .BienvenidaNombre {
        font-size: 20px;
    }
    .BienvenidaEmpresa {
        font-size: 12px;
    }
}

.OptionsContainerCuadro {
    position: relative;
    display: inline-block;
    /* width: 80px;
    height: 80px; */
    width: 60px;
    height: 60px;
    background-color: var(--font-color-rgb80);
    margin-left: 10px;
    border-radius: 5px;
}

.OptionsContainerCenterer {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.IconOptions {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.IconOptionsLupa {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    top: -10px;
    position: relative;
}

.IconOptionsLupa .fa-search {
    color: var(--back-color)!important;
    z-index: 1;
    position: relative;
    right: 12px;
    bottom: -30px;
}

.SearchBar {
    position: relative;
    width: 220px;
    background-color: var(--font-color)!important;
    text-align: left;
    color: var(--back-color)!important;
    font-family: var(--input);
    font-size: var(--fontSizeTertiary);
    font-weight: bold;
    padding: 10px;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
    top: -10px;
}

.SearchBar:focus {
    outline: none;
}

.SearchBar::placeholder {
    color: var(--back-color)!important;
    font-size: var(--fontSizesecondary);
    font-family: var(--fontFamilyLight);
    opacity: 1;
}

.SearchBar:-ms-input-placeholder {
    color: var(--font-color)!important;
    font-size: var(--fontSizesecondary);
    font-family: var(--fontFamilyLight);
}

.SearchBar::-ms-input-placeholder {
    color: var(--font-color)!important;
    font-size: var(--fontSizesecondary);
    font-family: var(--fontFamilyLight);
}

.FechaOptions {
    font-weight: bold;
    padding-top: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

@keyframes scan {
    from {
        top: 105px;
    }
    to {
        top: 230px;
    }
}

.Scanner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    border-radius: 3px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    animation-duration: 1s;
    animation-name: scan;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.WrittingPrompt {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: 100px;
    transform: translate(-50%, -50%);
    padding: 20px 50px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    text-align: center;
    color: var(--font-color-rgb80);
    font-size: 40px;
}

#ContenedorGuiasEscaneadas {
    width: 40%;
    display: inline-block;
    margin-top: 100px;
}

.GuiaEscaneada {
    font-size: 22px;
    color: var(--font-color-rgb80);
    margin-bottom: 15px;
    margin-top: 15px;
    border-bottom: 1px solid var(--font-color-rgb80);
}

#ContenedorGuiasEscaneadas select {
    width: 67px;
    margin-left: 30px;
    padding: 3px 10px;
    text-align: center;
}

.TituloTookacl {
    text-align: center;
    font-size: 25px;
    color: var(--font-color-rgb80);
    margin-bottom: 50px;
}

.ContenedorMensajero {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    display: inline-block;
    text-align: center;
    display: none;
    z-index: 9999;
}

.ContenedorEquipo {
    width: 160px;
    display: inline-block;
    margin: 10px 10px 20px 10px;
    text-align: center;
    cursor: pointer;
}

.FotoMensajero {
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 50px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.FotoEquipo {
    width: 120px;
    height: 120px;
    display: inline-block;
    border-radius: 50px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.NombreMensajero {
    width: 200px;
    text-align: center;
    font-size: 15px;
    color: var(--font-color-rgb80);
    margin-top: 10px;
}

.SubirExcelRedondo {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    font-size: 20px;
    color: var(--font-color-rgb80);
    text-align: center;
    border-radius: 100px;
    border: 1px dotted var(--font-color-rgb80);
    margin-bottom: 70px;
    padding: 90px 30px 0px 30px;
    box-sizing: border-box;
    word-break: break-all;
}

.cover_total {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 999999999;
}

.modal_factura {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--font-color-rgb80);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    width: 500px;
    padding: 30px;
    border-radius: 20px;
}

.TituloFacturacion {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #999;
    text-transform: uppercase;
    padding-bottom: 5px;
    margin-bottom: 40px;
}

.LabelFactura {
    position: relative;
    font-size: var(--fontSizesecondary);
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    margin-top: 20px;
    padding-bottom: 5px;
}

.InputFactura {
    position: relative !important;
    width: 98% !important;
    font-size: 18px !important;
    color: #666 !important;
    border: 1px solid #aaa !important;
    background-color: #eee !important;
    border-radius: 5px !important;
    padding: 10px 10px 10px 10px !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
}

.BotonFactura {
    display: inline-block;
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    background-color: rgba(74, 154, 215, 1.000);
    padding: 8px 20px 8px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0px;
    margin-bottom: 0px;
    border: none;
    margin-top: 20px;
    float: right;
}

.ContenedorGraficas {
    box-sizing: border-box;
    background-color: transparent!important;
    padding-top: 30px;
    width: 100%;
    text-align: center;
    border-radius: 10px;
}

.ContenedorNumeralia {
    box-sizing: border-box;
    background-color: var(--font-color-rgb80ary-color);
    text-align: center;
    padding: 10px;
}

.ContenedorNumeraliaIndividual {
    display: inline-block;
    vertical-align: bottom;
    padding: 20px;
    text-align: center;
    width: 21.1%;
    background-color: var(--primary-color);
    transition: all 0.5s;
    border-radius: 10px 0px 0px 0px;
    height: 100px;
}

.ContenedorNumeraliaIndividualGrande {
    width: 180px;
    height: auto;
    margin-left: 10px;
    margin-right: 10px;
}

.NumeraliaPeque {
    width: 14.28%;
    margin-right: 0px;
    margin-left: 0px;
}

.ranges,
.drp-calendar {
    color: #333 !important;
}

.ContenedorBarra {
    display: flex;
    flex-wrap: nowrap;
    /*vertical-align: bottom;*/
    justify-content: center;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    background-color: var(--colorPalacio)!important;
}

.Barra {
    display: block;
    height: 10px;
    color: #000;
}

.BarraTotal {
    background: rgb(178, 199, 215);
    background: linear-gradient(270deg, var(--primary-font-color) 0%, var(--font-color-rgb80ary-font-color) 100%);
}

.BarraTransito {
    background: rgb(178, 199, 215);
    background: linear-gradient(270deg, var(--primary-font-color) 0%, var(--font-color-rgb80ary-font-color) 100%);
}

.BarraEntregados {
    background: rgb(178, 199, 215);
    background: linear-gradient(270deg, var(--primary-font-color) 0%, var(--font-color-rgb80ary-font-color) 100%);
}

.BarraDevueltos {
    background: rgb(178, 199, 215);
    background: linear-gradient(270deg, var(--primary-font-color) 0%, var(--font-color-rgb80ary-font-color) 100%);
}

.BarraFacturable {
    background-color: var(--barras)!important;
}

.BarraFacturados {
    background-color: var(--barras)!important;
}

.BarraProv {
    background-color: var(--barras)!important;
}

.BarraSinFact {
    background-color: var(--barras)!important;
}

.ContenedorNumeraliaIndividual:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.NumeraliaLabel {
    font-size: 20px;
    color: val(--tertiary-font-color);
}

.NumeraliaLabel img {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
}

.NumeraliaNumber {
    font-size: 24px;
    color: var(--back-color);
    font-weight: bold;
}

.NumeraliaNumberBig {
    font-size: 25px;
    color: var(--barras);
    font-weight: bold;
}

.CuadroCirculos {
    float: left;
    display: inline-block;
    width: 45%;
    height: 390px;
    background-color: var(--colorPalacio)!important;
    text-align: center;
    padding: 30px;
    margin: 10px;
}

.CuadroGraficasFact {
    display: inline-block;
}

.CuadroCirculos50 {
    width: 49%;
}

@media screen and (max-width: 800px) {
    .CuadroCirculos {
        width: 99%;
    }
}

.CuadroCirculos td {
    padding: 4px 20px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    ;
}

.CuadroCirculos tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.8);
}

.Promedio {
    font-weight: bold;
    color: #00E0FF;
    font-size: 18px;
    margin-top: 30px;
}

.TituloCuadroCirculos {
    /* position: absolute;
    top: 15px; */
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    width: 100%;
    text-align: center;
}

.CentererCuadroCirculo {
    position: absolute;
    width: 60%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.CuadroCirculos img {
    width: 60%;
}

.NumeroCuadroCirculo {
    color: white;
    font-size: 40px;
    font-weight: bold;
}

.LabelCuadroCirculo {
    margin-top: -10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.ContenedorDireccion {
    position: relative;
    margin-bottom: 30px;
    background-color: var(--font-color-rgbThird);
    border-radius: 20px;
    height: 250px;
    text-align: left;
    overflow: hidden;
    outline: none;
}

.ContenedorDireccionDetalle {
    position: relative;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    height: 250px;
    text-align: left;
    overflow: hidden;
}

.ContenedorDireccionPaquetes {
    height: 150px;
}

.ContenedorDireccionPaqueteria {
    position: relative;
    height: auto;
}

.ContenedorDireccionRecoleccion {
    height: auto;
}

.ContenedorDireccionMailing {
    padding: 30px 0px 10px 0px;
    text-align: center;
    height: auto;
}

.ContenedorDireccionMailing input {
    text-align: center;
    font-size: var(--fontSizesecondary);
    width: 40%;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: top;
    height: 40px;
}

.ContenedorDireccionMailing textarea {
    text-align: center;
    font-size: var(--fontSizesecondary);
    width: 40%;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: top;
    margin-bottom: 40px;
}

.ContenedorDireccionTitulo {
    position: relative;
    background-color: var(--font-color-rgb80);
    display: inline-block;
    display: inline-block;
    width: 50px;
    height: 100%;
    vertical-align: middle;
    color: white;
    font-size: var(--fontSizesecondary);
}

.ContenedorDireccionTituloTexto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 20px;
    color: var(--barras);
    font-weight: bold;
    width: 250px;
}

.BotonInternacional {
    display: inline-block;
    position: relative;
    padding: 10px 30px;
    border-radius: 10px;
    border: 1px solid var(--font-color-rgb80);
    font-size: 15px;
    margin-bottom: 30px;
    display: none;
}

.ContenedorDireccionTituloTextoLibreta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 12px;
    color: var(--font-color-rgb80);
    font-weight: bold;
    width: 250px;
    text-decoration: underline;
}

.CheckBox {
    width: 20px !important;
}

.LabelNotif {
    font-size: 12px;
    color: var(--font-color-rgb80);
    text-align: left;
}

.ContenedorDireccionControles {
    position: relative;
    background-color: var(--barras);
    display: inline-block;
    width: 50px;
    height: 100%;
    vertical-align: middle;
    color: var(--font-color-rgb80);
}

.CentererControles {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.Control {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 1px solid var(--font-color-rgb80);
    border-radius: 18px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
}

.Control i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: var(--font-color-rgb80);
}

.ContenedorDireccionInfo {
    position: relative;
    display: inline-block;
    width: calc(100% - 100px);
    vertical-align: middle;
    box-sizing: border-box;
    padding: 0px 0px;
}

.ContenedorDireccionInfoPaqueteria {
    width: calc(100% - 50px);
}

.ContenedorDireccionInfoPaqueteria table {
    background-color: var(--back-color);
}

.ContenedorDireccionInfoPaqueteria th {
    font-size: 15px;
    font-weight: bold;
    color: var(rgb);
    margin-bottom: 30px;
    margin-top: 10px;
    text-align: center;
    padding-bottom: 30px !important;
    padding-top: 10px;
}

.ContenedorDireccionInfoPaqueteria td {
    text-align: center;
    padding-bottom: 30px !important;
}

.courier_select {
    cursor: pointer;
}

.ContenedorDireccionInfoPaqueteria img {
    width: 80px;
}

.SelectorRecoleccion {
    position: absolute;
    display: inline-block;
    width: 33.3%;
    height: 20px;
    left: 66.6%;
    background-color: var(--font-color-rgbThird);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: all 0.5s;
}

.FechaRecoleccion {
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    display: inline-block;
    width: 33.3%;
    font-size: 22px;
    color: var(--font-color-rgb80);
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
}

.SubFechaRecoleccion {
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    font-weight: normal;
    font-style: normal;
}

.SelectorSeguro {
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 20px;
    left: 50%;
    background-color: var(--font-color-rgbThird);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: all 0.5s;
}

.FechaSeguro {
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    display: inline-block;
    width: 50%;
    font-size: 22px;
    color: var(--font-color-rgb80);
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
}

.SubFechaSeguro {
    font-size: 12px;
    font-style: italic;
    color: var(--font-color-rgb80);
    font-weight: normal;
}

.BolaVerde {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: var(rgb);
}

.BolaGris {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.4);
}

.BolaIMG {
    width: 30px !important;
}

.DiaTD {
    font-size: 15px;
    font-weight: bold;
    color: var(--font-color-rgb80);
}

.ServicioTD {
    font-size: var(--fontSizesecondary);
    font-weight: bold;
    color: var(--font-color-rgb80);
}

.ContenedorIconosMas {
    position: relative;
    margin-top: 70px;
    margin-bottom: 100px;
    text-align: center;
}

.ContenedorIconosMas img {
    height: 80px;
    margin-right: 50px;
    margin-left: 50px;
}

.ContenedorDireccionInfo input {
    width: 23%;
    margin: 10px 1%;
    font-size: var(--fontSizePrimary);
    color: var(--font-color-rgb80);
    background-color: transparent;
    border: none;
    border-bottom: none;
    border-radius: 0px;
    font-family: var(--fontFamilyLight);
}

.ContenedorDireccionInfo input:focus {
    outline: none;
}

.size50 {
    width: 48% !important;
}

.TituloEnvio {
    position: relative;
    text-align: center;
    font-size: var(--fontSizeTitle);
    font-weight: bold;
    color: var(--font-color-rgbThird);
    margin-bottom: 10px;
    margin-top: 20px;
    font-family: var(--fontFamilyBoldTitle);
    color: var(--font-color-rgb80);
}

.BotonEnvio {
    border: 1px solid var(--font-color-rgbThird);
    color: var(--font-color-rgb80);
    font-size: var(--fontSizeTertiary);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    background-color: transparent;
    outline: none;
    margin-top: 30px;
    margin-bottom: 50px;
    border-radius: 20px;
}

.CoverNegro {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
}

.CuadroBusquedaDireccion {
    position: relative;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--back-color);
    border-radius: 20px;
    box-shadow: 0px 0px 5px black;
    padding: 10px 30px 20px 30px;
    width: 700px;
    border: solid 1px var(--back-color);
}

.IconoBuscar {
    width: 5%;
    color: var(--font-color);
    font-size: 30px !important;
    vertical-align: middle !important;
    padding-bottom: 20px;
}

.CuadroBusquedaDireccion input {
    width: 95%;
    vertical-align: middle;
    background-color: var(--back-color)!important;
    color: var(--back-color)!important;
}

.CuadroBusquedaDireccion input:focus {
    outline: none;
}

.DividerBusqueda {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: -10px;
}

.ListaDireccionCuadro {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.0);
    transition: all 0.5s;
    padding-left: 10px;
    display: none;
    cursor: pointer;
}

.ListaDireccionCuadro:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.Hidden {
    display: none;
}

.ListaDireccionCuadroNombre {
    font-size: 15px;
    display: inline-block;
    font-weight: bold;
    color: #333;
}

.ListaDireccionCuadroEmpresa {
    font-size: 15px;
    display: inline-block;
    padding-left: 5px;
    color: rgba(231, 140, 87, 1.000);
}

.ListaDireccionCuadro {
    font-size: var(--fontSizesecondary);
    font-style: italic;
    color: #777;
}

.Cintillo {
    position: absolute;
    top: 0px;
    left: 57%;
    transform: translateX(-50%);
    width: min-content;
    background-color: var(--font-color-rgbSmall);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px 20px;
    margin-left: 60px;
}

.Cintillo img {
    position: relative;
    width: 20px;
    vertical-align: middle;
}

.CintilloTexto {
    position: relative;
    display: inline-block;
    padding-left: 0px;
    width: 900px;
    font-size: var(--fontSizesecondary);
    text-align: center;
    vertical-align: middle;
}

.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--font-color-rgb80);
}

.preloader video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
}

.preloader img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
}

.daterangepicker td.available {
    color: #999 !important;
}

table {
    background-color: var(--back-color);
    color: var(--font-color-rgb80) !important;
}

table a {
    width: fit-content;
    height: 50px;
    font-size: 11px;
    color: var(--font-color-rgb80) !important;
    padding: 15px 2px 15px 0px;
}

@media screen and (max-width: 800px) {
    td {
        display: none !important;
        border: none !important;
        padding: 3px 15px 0px 15px !important;
    }
    td.Columnafechaenvio {
        display: block !important;
        font-style: italic;
        padding-top: 15px !important;
    }
    td.VisibleTD {
        display: table-cell !important;
    }
    .NormalTR {
        border: none !important;
    }
    td.Columnaguia {
        display: block !important;
        font-size: 18px;
        font-weight: bold;
    }
    td.Columnastatus {
        display: block !important;
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 15px !important;
    }
    tr {
        display: block;
        border-top: 20px solid #ffffff;
    }
    th {
        display: none !important;
    }
    .porcentaje-cols-d {
        width: 98%;
        margin: auto;
    }
    .WithMenu {
        width: 94%;
    }
}

.BienvenidaNombre {
    color: var(--font-color-rgb80);
}

a {
    color: var(--font-color-rgb80) !important;
    font-size: var(--fontSizeTertiary);
    font-family: var(--fontFamilyLight);
    text-decoration: none;
}


/* body {
    font-family: var(--fontFamilyLight);
    color: var(--font-color-rgb80) !important;
} */

.ContenedorNumeralia-d {
    /* background-image: url('https://thinkme-ph.mx/elektra/img_d/fondo-thinkme.jpg'); */
    background-repeat: repeat;
    padding: 0 20px;
    background-size: contain;
    border-radius: 5px;
    /*     filter: blur(19px);
    -webkit-filter: blur(19px); */
}

.barra-enviados-d {
    width: 260px;
    height: 18px;
    background-color: var(--font-color-rgb80);
}

.barra_dinamic {
    width: 100px;
    background-color: var(--barras) !important;
    height: 18px;
}

.NumeraliaNumberBig {
    font-family: var(--fontFamilySubTitle);
    font-size: var(--fontSize45);
}

.ContenedorNumeralia-numeral-d {
    /* background-color: var(--fondoThird) !important; */
    border-radius: 5px;
}

.last-text-numeralia {
    font-size: var(--fontSizePrimary);
    font-family: var(--fontFamilyBold);
    color: var(--font-color-rgb80);
    margin-top: 7px;
}


/**********************************************************/

.NumeraliaLabel {
    margin-bottom: 12px;
}

.icon-numeralia-d {
    width: 80px;
    height: 80px;
}

.dash-d {
    background-color: rgba(0, 0, 0, 0) !important;
    width: 120px;
    text-align: center;
}

.NumeraliaNumber-d {
    color: var(--barras);
    font-family: var(--fontFamilyBold);
    margin-top: 12px;
    font-size: var(--fontSize33);
    font-weight: 900;
}

.numeralia-text-d {
    font-family: var(--fontFamilyBold);
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
}


/**********************************************************/

.porcentaje-cols-d {
    width: 30%;
}

.cont-circulos-d {
    border-radius: 5px;
    background-color: var(--fondoIc20);
}

.cont-guias-text-first {
    font-family: var(--fontFamilySubTitle);
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
}

.cont-guias-prcntj {
    margin-top: 15px;
    font-family: var(--fontFamilySubTitle);
    font-size: var(--fontSize40);
    color: var(--barras);
}

.cont-guias-prcntj-text {
    font-family: var(--fontFamilySubTitle);
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    margin-top: -10px;
}

.cont-guias-prcntj-no {
    font-family: var(--fontFamilySubTitle);
    color: var(--barras);
    font-size: var(--fontSize40);
    margin-top: 10px;
}

.cont-guias-small {
    font-family: var(--fontFamilySubTitle);
    font-size: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
    margin-top: -10px;
}

.barra-dinamica-second {
    position: relative;
    height: 180px;
    width: 45px;
    background-color: var(--font-color-rgbSecond);
    bottom: 0;
}

.b-dinamic-second {
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 45px;
    background-color: var(--barras) !important;
}


/* ++++++++++++   Incidencias ++++++++ */

.incidencias-d {
    height: 50px;
    width: auto;
    margin-top: 19px;
    padding: 12px 1px 0 1px;
    /* height: auto;
        width: auto;
        
         */
}

.incidencias-d p {
    margin-top: 10px;
    font-size: var(--fontSizesecondary);
    font-family: var(--fontFamilySubTitle);
    height: 50px;
    padding: var(--fontSizesecondary);
    color: var(--font-color-rgb80);
}

.incidencia-number-d {
    width: 105px;
    height: 60px;
    text-align: center;
    padding-top: var(--fontSizesecondary);
    font-size: var(--fontSizesecondary);
    font-family: var(--fontFamilySubTitle);
    /* position: absolute;
        right: -3px;
        bottom: 0; */
    border-radius: 5px 5px 5px 0;
}

.inc-numer-first {
    font-size: var(--fontSizeTertiary);
    font-family: var(--fontFamilyBold);
}

.inc-numer-second {
    font-size: var(--fontSizeTertiary);
    font-family: var(--fontFamilyBold);
}

.incidencia-pares-d {
    background-color: var(--font-color-rgbSecond);
    color: var(--font-color-rgb80);
}

.incidencia-pares-no-d {
    background-color: var(--font-color-rgbThird);
    color: var(--font-color-rgb80);
    padding-top: 20px;
}

.incidencias-d:nth-child(even) p {
    background-color: var(--font-color-rgbSecond);
    color: var(--font-color-rgb80);
}

.incidencias-d:nth-child(odd) p {
    background-color: var(--font-color-rgbThird);
    color: var(--font-color-rgb80);
}


/***/

.incidencia-number-d:first-child {
    background-color: var(--font-color-rgbThird) !important;
}


/* Barra de iconos de canridades de las empresas */

.w-content-empresas-d {
    width: 160px;
    height: 160px;
    border-top-left-radius: 5px;
}

.w-content-empresas-d {
    background-color: gray;
}

.w-content-empresas-d img {
    width: 68%;
}

.content-barra-icons-empresas {
    background-color: #f1edec;
    height: 160px;
}

.barra-icons-empresas {
    width: 100%;
    height: 80px;
    background-color: var(--barras) !important;
    position: absolute;
    bottom: 0;
}

.cont-img-empresa {
    height: fit-content;
}

.barra-conte-d {
    height: 160px;
    width: fit-content;
    position: relative;
}

.cont-text-empresa {
    font-size: var(--fontSize25);
    font-family: var(--fontFamilyBold);
    color: var(--font-color-rgb80);
}

.navar-conten-d {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 999999;
    width: 40px;
    height: 40px;
}

.back-dias {
    /* background-color: var(--fondoThird); */
}

.TituloCuadroCirculos_d {
    color: var(--font-color-rgb80);
    font-size: 25px;
    font-family: var(--fontFamilyBold);
}


/*****************Menus******************/

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 58%;
    right: 20px;
    transform: translateY(-50%);
}

.promedios {
    color: var(--menu-color);
    font-size: var(--fontSizeSubTitle);
    font-family: var(--fontFamilyBold);
}

.labeldias {
    margin-top: 1px;
    color: var(--barras);
    font-family: var(--fontFamilyBold);
    font-size: var(--fontSize25);
}

.Encabezado {
    border-bottom: solid 3px var(--barras);
}

.ui-multiselect {
    color: var(--back-color) !important;
    background-color: var(--font-color-rgbSecond) !important;
    border-radius: 5px !important;
    padding: 18px 15px 18px 15px;
    margin: 0px auto;
}

.ContenedorListaSimple {
    /*  padding: 10px 1px 1px 1px; */
    padding: 0;
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.0);
    margin: 8px auto;
    transition: all 0.5;
}

.ContenedorListaSimpleCliente {
    /*  padding: 10px 1px 1px 1px; */
    padding: 0;
    float: inline-end;
    width: 30%;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.0);
    margin: 8px;
    transition: all 0.5;
}

.ContenedorListaSimple:hover {
    border: 1px solid var(--font-color-rgbSecond);
    background-color: var(--font-color-rgbThird);
}

.ContenedorListaSimple .ElementoListaSimple b {
    font-size: var(--fontSizePrimary);
}

.ContenedorListaSimpleCliente:hover {
    border: 1px solid var(--font-color-rgbSecond);
    background-color: var(--font-color-rgbThird);
}

.ContenedorListaSimpleCliente .ElementoListaSimpleCliente b {
    font-size: var(--fontSizePrimary);
}

.ElementoListaSimple {
    position: relative;
    text-align: center;
    height: auto;
    width: 100%;
    padding: 23px;
    margin: auto;
    font-family: var(--fontFamilyBold);
}

.ElementoListaSimpleCliente {
    position: relative;
    text-align: center;
    height: 100px;
    padding: 23px;
    margin: auto;
}

.CentererListaSimple {
    position: static;
    left: 10%;
    width: 80%;
    top: 50%;
    transform: translateY(-50%);
    word-wrap: normal;
    white-space: normal;
}

.img-ph {
    width: 60%;
    align-content: end;
    float: right;
    padding-bottom: 25px;
    padding-top: 10px;
}

.img-ph-seccion-otros {
    width: 100%;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-bottom: 30px;
}

.bienvenida-d {
    position: absolute;
    bottom: 0;
}

.ElementoListaSimple {
    position: relative;
    text-align: center;
    height: auto;
    width: 100%;
}

.CentererListaSimple {
    position: absolute;
    left: 10%;
    width: 80%;
    top: 50%;
    transform: translateY(-50%);
    word-wrap: normal;
    white-space: normal;
}


/* .element_d_btn .BotonRegular {
    display: block;
    font-size: var(--fontSizesecondary);
    border: none;
    
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    background-color: transparent;
    text-align: right;
    width: 300px;
} */

.form-cerrar_d {
    /* position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 25px; */
    position: relative;
    top: 20px;
    left: 0;
    padding-left: 0px;
}

.ElementoMenuBusqueda::placeholder {
    font-family: var(--fontFamilyBold);
    color: var(--font-color-rgbSmall) !important;
    opacity: 1;
}

.ElementoMenuBusqueda:-ms-input-placeholder {
    font-family: var(--fontFamilyBold);
    color: var(--font-color-rgbSmall) !important;
}

.ElementoMenuBusqueda::-ms-input-placeholder {
    font-family: var(--fontFamilyBold);
    color: var(--font-color-rgbSmall) !important;
}

.ElementoMenuBusquedaDesc {
    background-color: var(--colorPalacio);
    font-family: var(--fontFamilyBold);
    width: 100%;
    box-sizing: border-box;
    font-size: var(--fontSizeTertiary);
    color: var(--back-color) !important;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 10px;
}

#buscar {
    background-color: var(--primary-color);
    color: var(--font-color) !important;
    font-family: var(--fontFamilyBold);
    line-height: normal;
    padding: 10px;
    width: 100%;
}

#buscar::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--font-color) !important;
    opacity: 1;
    /* Firefox */
}

#buscar:-ms-input-placeholder {
    color: var(--font-color) !important;
}

#buscar::-ms-input-placeholder {
    color: var(--font-color) !important;
}

.logo-foot-firma {
    width: auto;
    height: 13px;
    margin-top: 0;
    margin-left: 3px;
}

.powers-id label {
    font-size: var(--fontSizePrimary);
}


/* #formulario input {
    background-color: var(--font-color-rgb80);
    color: white;
    font-family: var(--fontFamilyBold);
} */

#formulario input {
    background-color: var(--font-color-rgbThird);
    color: white;
    font-family: var(--fontFamilyBold);
    padding: 10px 10px;
}

.formulario-crear-envio input {
    background-color: var(--font-color-rgbThird);
    color: white;
    font-family: var(--fontFamilyBold);
    padding: 5px 10px !important;
}

.nuevo_remitente form input {
    padding: 10px 10px !important;
}

.couriers-block {
    padding: 0;
    width: 150px;
    height: 150px;
    display: block;
    background-color: var(--font-color-rgb80);
    margin: 10px;
    vertical-align: top;
    border-radius: 8px;
}

.couriers-block img {
    width: 85%;
    height: auto;
    margin-top: 0;
}

.regresar {
    width: fit-content;
}

.adelante {
    margin-left: 10px;
}

.input-search-head {
    width: 100%;
}

div {
    border: none;
}

.fa-chevron-circle-right::before {
    color: var(--font-color-rgbSecond);
}

.inputClass {
    height: 40px;
}

.ContenedorLinksExtras label {
    font-family: var(--fontFamilyLight);
    font-size: var(--fontSizesecondary);
}

.ContenedorDireccionTituloTextoDexpress {
    color: var(--font-color-rgb80);
}

.ContenedorDireccionDMnesaje {
    padding-right: 20px !important;
}

.ui-helper-reset {
    width: 100%;
}

.ContenedorListaSimpleNewd {
    /*  padding: 10px 1px 1px 1px; */
    width: 85%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.0);
    margin-bottom: 10px;
    transition: all 0.5;
    display: inline-block;
}

.ContenedorListaSimpleNewd :hover {
    border: 1px solid var(--font-color-rgbSecond);
    background-color: var(--font-color-rgbThird);
}

.SubtituloContenidodCliente {
    width: 100%;
    font-family: var(--fontFamilySubTitle) !important;
    font-size: var(--fontSizeSubTitle);
    color: var(--font-color-rgb80);
    margin-bottom: 8px;
    transition: all 0.3s;
    margin-left: 0px;
    background: var(--font-color-rgbThird);
    border-radius: 5px;
    padding: 12px 15px 12px 5px;
}

.SubtituloContenidodCliente i {
    margin-left: 20px;
    margin-top: 0px !important;
    float: right;
    vertical-align: top;
}

.cont-select-filtro {
    width: fit-content;
    position: relative;
    text-align: center;
    height: fit-content;
}

.select-flech-right {
    font-size: 15px;
    position: absolute;
    right: 10px;
    bottom: 17px;
    color: var(--barras);
}

.conten-courier-lote {
    padding: 0 1% 0 7%;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
    background-color: var(--font-color-rgbThird) !important;
    color: var(--font-color) !important;
    font-family: var(--input) !important;
    padding: 10px;
}

input::-webkit-input-placeholder {
    color: var(--font-color) !important;
    font-family: var(--input) !important;
    padding: 10px 1px;
}

input:-moz-placeholder {
    color: var(--back-color) !important;
    font-family: var(--input) !important;
    padding: 10px 1px;
}

input::-moz-placeholder {
    color: var(--back-color) !important;
    font-family: var(--input) !important;
    padding: 10px 1px;
}

input:-ms-input-placeholder {
    color: var(--back-color) !important;
    font-family: var(--input) !important;
    padding: 10px 1px;
}

input::placeholder {
    color: var(--back-color) !important;
    font-family: var(--input) !important;
    padding: 10px 1px;
}

textarea::-webkit-input-placeholder {
    color: var(--font-color) !important;
    font-family: var(--fontFamilyLight) !important;
}

textarea:-moz-placeholder {
    color: var(--font-color) !important;
    font-family: var(--fontFamilyLight) !important;
}

textarea::placeholder {
    color: var(--font-color) !important;
    font-family: var(--fontFamilyLight) !important;
}

textarea:-ms-input-placeholder {
    color: var(--back-color) !important;
    font-family: var(--fontFamilyLight) !important;
}

.ElementoMenuBusquedaDesc::placeholder {
    padding: 5px auto;
}

.ElementoMenuBusquedaDesc:-ms-input-placeholder {
    padding: 5px auto;
}

.ElementoMenuBusquedaDesc::-webkit-input-placeholder {
    padding: 5px auto;
}

.ElementoMenuBusquedaDesc:-moz-placeholder {
    padding: 5px auto;
}

.LoginInput {
    background-color: var(--back-color) !important;
    color: var(--back-color) !important;
}

.LoginInput::placeholder {
    color: white;
}

.LoginInput:-ms-input-placeholder {
    color: white;
}


/* ++++++++++++   TERMINA SIDEBAR ++++++++ */


/*Bootstrap v4.0.0 (https://getbootstrap.com)
 */

@media screen and (max-width: 800px) {
    .LogotipoLogin {
        display: none;
    }
    .ContenedorBarra {
        width: 20%;
    }
    .ContenedorBarra:nth-child(4) {
        display: none;
    }
    .ContenedorNumeraliaIndividual {
        width: 90%;
    }
    .ContenedorNumeraliaIndividualGrande {
        width: 90%;
        vertical-align: top;
    }
    .ContenedorNumeraliaIndividualGrande:nth-child(3) {
        display: none;
    }
    .HideOnMobile {
        display: none;
    }
    #filtros_div {
        display: none;
    }
    .NumeraliaLabel {
        font-size: 6px;
        color: rgba(255, 255, 255, 0.6);
    }
    .NumeraliaNumber {
        font-size: var(--fontSizesecondary);
        color: #00E0FF;
        font-weight: bold;
    }
    .NumeraliaNumberBig {
        font-size: 25px;
        color: var(--barras);
        font-weight: bold;
    }
    .NumeraliaLabel {
        font-size: 20px;
        color: val(--tertiary-font-color);
    }
    .ContenedorNumeraliaIndividualGrande {
        display: block;
        width: 380px;
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
    }
    .NumeraliaPeque {
        width: 25%;
        margin-right: 0px;
        margin-left: 0px;
    }
    .CuadroCirculos50 {
        width: 99%;
    }
    .img-ph {
        width: 93%;
    }
    .porcentaje-cols-d {
        width: 100%;
    }
    .TituloCuadroCirculos_d {
        margin-top: 55px !important;
    }
    .CuadroCirculos {
        position: relative;
        display: inline-block;
        width: 100%!important;
        height: 300px!important;
        background-color: var(--colorPalacio)!important;
        text-align: center;
        margin-top: 20px!important;
        margin-left: 0px!important;
    }
    .CuadroGraficasFact {
        height: auto!important;
    }
}

.footpower {
    position: static;
    bottom: 0;
    width: 75%;
}