:root{
    --color1:  rgba(105,108,255,0.7);
    --color2:  rgba(133, 135, 241, 0.7);
    --color3:  rgba(71, 73, 177, 0.9);
    --color4: rgba(209,209,209,1);
    --color5: rgba(255,124,7,0.9);
    --color6:  rgba(105, 108, 255, 0.5);
    --blanco: rgba(255,255,255,1);

    --level-1: #ffffff;
    --level-2: #ffffff;
    --level-3: #ffffff;
    --level-4: #f27c8d;
    --black: black;

}



input[readonly]{
    background-color:transparent;
    border: 0;
    font-size: 1em;
}

.gris_dc{
    background: rgba(226,226,226,1);
    background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(35%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));
    background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 35%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
}


.color_deg_1{
    background: rgba(158,180,222,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(158,180,222,1)), color-stop(41%, rgba(80,112,171,1)), color-stop(100%, rgba(26,65,137,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: radial-gradient(ellipse at center, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9eb4de', endColorstr='#1a4189', GradientType=1 );
 
}




/*****************************************/
/************** FUENTES ******************/
@font-face{
    font-family: fontawesome-webfont;
    src: url("../plugins/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf");
}

@font-face{
    font-family: roboto;
    src: url("../fonts/roboto/Roboto-Medium.ttf");
}

@font-face{
    font-family: noto-sans;
    src: url("../fonts/noto-sans/NotoSans-Bold.ttf");
}

@font-face{
    font-family: noto-sans-regular;
    src: url("../fonts/noto-sans/NotoSans-Regular.ttf");
}

@font-face{
    font-family: junegull;
    src: url("../fonts/junegull.ttf");
}

@font-face{
    font-family: placa;
    src: url("../fonts/license_plate_usa/LICENS-PLATE-USA.ttf");
}

@font-face{
    font-family: placa2;
    src: url("../fonts/Matricula_Espanola/MESPREG.ttf");
}
/*****************************************/
/*****************************************/



@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
    font-family: 'Poppins', sans-serif;
    background-color: #e2ecf7;
    background-image: url("../img/logo_gmtv_borde.png");
    background-repeat: no-repeat, repeat;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: auto auto;
    background-attachment: fixed;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    position: fixed;
    width: 100%;
    padding: 1px 10px 1px 0px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 0px;
    box-shadow: 1px 1px 3px rgba(32,124,229, 0.1);
}

.navbar .container-fluid {
padding-left: 0px !important;

}

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

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



#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 9999;
    background: var( --blanco);
    color: #8592a3;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 38px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: var( --blanco);
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 10px 0 0 0;
}

#dismiss:hover {
    background: var(--color4);
    color: var( --blanco);
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar .sidebar-header {
    padding: 4px 1px 4px 1px;
    background: var( --blanco);
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #8592a3;
    padding: 10px;
}

#titulo_menu_izq h3{
    margin-bottom: 0px !important;
    font-family: roboto;
    font-size: 1.2rem;
    font-weight: 450;
    letter-spacing: 4px;
    color: var(--color1)
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: var( --blanco);
    background: var(--color6);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: var( --color6);
}

a[data-toggle="collapse"] {
    position: relative;
}

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

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: var( --blanco);
    color: #8592a3;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.pentrar {
    background: #fff;
    color: var( --color2);

}

a.article,
a.article:hover {
    background: var( --color1) !important;
    color: #fff !important;
}

#sidebarCollapse{
    margin: 0px !important;
    padding: 5px !important;
}

#sidebarCollapse_btn{
    margin: 0px 6px 0px 0px !important;
    padding: 0px 10px 0px 10px !important;
    height: 40px !important;
    background-color: var(--color2) !important;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 0 10px 10px 0;
}

#sidebarCollapse_btn:hover {
    background-color: var(--blanco) !important;
    color: var( --color2);
}

.btn-dark{
    padding: 5px !important;
}

div#sidebarCollapse{
    margin: 3px 3px 3px 3px !important;
    padding: 0px 3px 0px 3px !important;
}

h5 {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.9rem !important;
    font-weight: 600;
    font-family: roboto;
}

.texto_pequenio {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.7rem !important;
}

 
#content {
    width: 100%;
    padding: 0px;
    /* min-height: 100vh; */
    transition: all 0.3s;
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
}

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

.texto_centrado {
    text-align: center !important;
    align-content: center;
}

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

.gradient-bg-animation{
    height:200px;
    background: rgb(189, 189, 189);
    background-color: #e2ecf7;
    background-size: 300% 100%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}




/*********** INICIO VIDEO BACKGROUND ***********/

.header{

    height: 100vh;

 /* 
    background: rgba(158,180,222,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(158,180,222,1)), color-stop(41%, rgba(80,112,171,1)), color-stop(100%, rgba(26,65,137,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: radial-gradient(ellipse at center, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9eb4de', endColorstr='#1a4189', GradientType=1 );

     */
/* 
  background: rgba(75,165,174,0.18);
  background: -moz-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(26,64,137,0.38) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(75,165,174,0.18)), color-stop(100%, rgba(26,64,137,0.38)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(26,64,137,0.38) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(26,64,137,0.38) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(75,165,174,0.18) 0%, rgba(26,64,137,0.38) 100%);
  background: radial-gradient(ellipse at center, rgba(75,165,174,0.18) 0%, rgba(26,64,137,0.38) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ba5ae', endColorstr='#0c377b', GradientType=1 )
 */
}

.video-background{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}
@media (min-aspect-ratio:16/9){

    .video-background{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio:16/9){

    .video-background{
        width: auto;
        height: 100%;
    }
}

.logo{
    margin: 5px;
    height: 40px;
}

.logo_menu{
    margin: 0px 0px 0px 0px;
    width: 50%;
    height: auto;
}

.caja_logo{
    margin-top: 0px !important;
    margin-bottom: 20px;
    padding: 0px !important;
}


.bienbenido_msg{
    position: relative;
    text-align: center;
    font-family: roboto;
    color: #fff !important;
    top: 80px;
}

.bienbenido_msg h1{
    font-size: 3.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 0px;
    color: var(--blanco) !important;
}

.bienbenido_msg h3{
    font-size: 2rem;
    font-weight: 250;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-family: roboto;
}

.bienbenido_msg h4{
    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.bienbenido_msg p{
    font-size: 1.0rem;
    font-weight: 300;
    letter-spacing: 10px;
    margin-bottom: 10px;
    color: rgb(249,184,0);
    font-family: noto-sans;
}
.bienbenido_msg img{
    margin: 0px 0px 10px 0px;
    width: 250px;
    height: auto;
}

.texto_logo_menu{
    font-size: 1.0rem;
    font-family: roboto;
    text-align: center;
}

/*********** FIN VIDEO BACKGROUND ************/


#portada_bt_entrar{
    max-width: 350px;
    font-size: 1.5rem !important;
    font-weight: 350 !important;
    color: coral;
    margin: 0px 5px 15px 5px !important;
    padding: 7px 22px;
    background: #fff;
    color: var( --color2);
}

#portada_bt_entrar:hover{
    background: rgb(249,184,0);
    color: var( --blanco);
    transition: -5s;
}

#videotutorial{
    max-width: 350px;
    font-size: 1.5rem !important;
    font-weight: 350 !important;
    color: coral;
    margin: 0px 5px 15px 5px !important;
    padding: 7px 22px;
    background: #fff;
    color: var( --color2);
}

#videotutorial:hover{
    background: coral;
    color: var( --blanco);
    transition: -5s;
}



/*************INICIO LOGIN ****************/


#login {
    
    border-radius: 5px;
    min-height: 100vh;

    height:200px;
    /* background: rgb(189, 189, 189);
    background-color: #e2ecf7; */
    background-color: rgba(226,236,247,0.7) !important;
    background-size: 300% 100%;
    animation: gradient 15s ease infinite;
/* 
    background: rgba(158,180,222,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(158,180,222,1)), color-stop(41%, rgba(80,112,171,1)), color-stop(100%, rgba(26,65,137,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    background: radial-gradient(ellipse at center, rgba(158,180,222,1) 0%, rgba(80,112,171,1) 41%, rgba(26,65,137,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9eb4de', endColorstr='#1a4189', GradientType=1 );
 */
}



#login > div {
    
    border: 0px solid #000080;
    box-shadow: 2px 2px 7px var( --color1);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 1em 1em 1em 1em;
    color: #d9480f;
}

#login{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0px;

    grid-template-areas:
    ". b b ." 
    ". a a ."
    ". a a ."   
    ". a a ."
    ". a a ."  
    ". a a ."   
    ". a a ."
    ". a a ."  
    ". c c .";
}

#encabezado_formulario_login{
    grid-area: b;
    margin-bottom: 0px !important;
    align-self: center;
    justify-self: center;
    min-width: 350px !important;
    height: 240px !important;

}

#formulario_login{
    /* display: none; */
    grid-area: a;
    align-self: center;
    justify-self: center; 
    min-width: 350px;   
    min-height: 185px;
}



#msg{
    grid-area: c;
    margin-bottom: 0px !important;
    align-self: center;
    justify-self: center;
    min-width: 350px !important;
    height: 10px !important;  
}

#msg{
    display: none;
    text-align: center;
    font-family: monospace;
    color: #000 !important;
    border: 0px solid #000080;
    box-shadow: 2px 2px 7px transparent !important;
    border-radius: 5px;
    background-color: transparent !important;
    margin-top: -150px;
}

.logo{
    width: 250px;
    height: auto;
    padding-right: 1px;
}

/********** FORMULARIO LOGIN *************/

.btn-l {
    background-color: var( --color1) !important;
    border: none;
    color: white;
    padding-top: 6px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.btn-l:hover {
    
    background-color: var( --color2) !important;
    box-shadow: 2px 2px 7px var( --color4) !important;
    color: white;
    border-color:#cccccc !important;
    outline: 0 !important;
    text-decoration: none;
}

.btn-l:focus {
    outline: none !important;
    border-color: #cccccc !important;
}

.btn-l:active{
    outline: none !important;
    border-color: #cccccc !important;
    background-color: var( --color3) !important;
}

.alert{
    text-align: center !important;
}

.responsive {
    width: 100px;
    height: auto;
  }

.previsualizar{
    width: 100%;
    height: auto; 
}  

#l_encabezado{
    display: grid;
    grid-template-columns: 50px auto 200px;
    grid-gap: 2px;
    background-color:rgb(71,204,202);
    padding: 10px;
}
#l_encabezado > div{

    text-align: left;
    padding: 12px 0;
}

.e-item1{
    padding-top: 10px;
    padding-left: 20px;
}

#l_titulo{
    display: grid;
    grid-template-rows: 30px 35px;
    grid-gap: 0px;
    background-color:rgb(255, 255, 255);
    padding: 10px;
}
#l_titulo > div{
    /*background-color: rgba(245, 19, 19, 0.4);*/
    text-align: center;
    vertical-align: bottom;
    font-family: noto-sans;
    font-size: 1.4rem;
    color: rgb(71,204,202);
    padding: 0px 0;

}

#l_cuerpo{
    display: grid;
    grid-template-columns: 53% 47%;
    grid-gap: 0px;

    padding: 0px 0;
    min-height: 80vh;
}

#l_cuerpo > div{
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 8px 0;

}

.e-item2{
    padding-top: 10px  !important;
    padding-left: 3px !important;
}

.e-item3{
    padding-top: 12px  !important;
    text-align: right !important;
}

.l_icono{
    color: rgb(255,255,255) !important;
    font-size: 1.5em;
    
}

.l_icono2{
    color: rgb(255,255,255) !important;
    font-size: 1.3em;
    margin-right: 15px;
    text-decoration: none;
}

.l_icono a:hover{
    text-decoration: none;
}


.container1 {
    height: 90%;
    display: grid;

 }

 .container2 {
    height: 90%;
    display: grid;
    padding-right: 40px;
 }

.centered-item1 {
    margin: auto;

    clear: none;
    float: right!important;

    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    padding: 2px 0;
    width: 90%;
    min-height: 350px;
    max-width: 645px;
}

.centered-item2 {
    margin: auto;
    /*border: 1px solid rgb(20, 87, 233);*/
    clear: none;
    float: right!important;

    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    padding: 2px 0;
    width: 77%;
    min-height: 400px;
    background-color: #fff;
    padding-left: 40px;
    padding-right: 40px;
    box-shadow: 2px 2px 7px rgba(201, 201, 201, 0.75);
}

.centered-item{
    padding-left: 40px;
    padding-right: 30px;  
}


.l-cuerpo-izq{
    display: grid;
    grid-template-columns: 50px auto;
    grid-gap: 10px;
    padding: 0px 0; 
}

.l-cuerpo-izq-item1{
    text-align: center;
    padding: 10px 0;
    text-align: left;
    padding-left: 10px;
}

.l-cuerpo-izq-item2{
    text-align: center;
    padding: 0px 0;
    text-align: left;
    padding-left: 0px;
}


.label_titulo{
    font-weight: 500;
    display: block;
    font-family: "noto-sans";
    font-size: 1rem;
}

.theme_color {
    color: rgb(71,204,202) !important;
}

.iColor{
    background-color: rgb(71,204,202) !important;
}

.subtext{
    font-size: 0.9rem;
    font-family: "noto-sans-regular";
    color: #757575;
}


.isesion{
    padding-bottom: 3px;
    padding-top: 10px;
    font-size: 1.58rem !important;
    text-align: center;
    line-height: normal;
    font-weight: 600;
    font-size: 1.1rem;
    font-family: "roboto";
    color: #757575;
}


.l-cuerpo-der{
    display: grid;
    grid-template-columns: 30px auto;
    grid-gap: 10px;
    /*background-color:rgb(71,204,202);*/
    padding: 2px 0; 
}

.l-cuerpo-der-item1{
    text-align: center;
    padding: 6px 0;
    padding-bottom: 10px;

    text-align: left;
    padding-left: 0px;
}

.l-cuerpo-der-item2{
    text-align: center;
    padding: 0px 0;

    text-align: left;
    padding-left: 0px;
}

.isprop{
    width: 90%;
    height: auto;  
}

.inputpro{
    font-size: 0.9rem;
}

.texto_pequenio {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.8rem !important;
}

/********* FIN FORMULARIO LOGIN **********/

/************* FIN LOGIN ****************/

/************* INICIO DASHBOARD ****************/


    #dona_container_niveles_porcentaje {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #barChart_container_niveles {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #torta_container_niveles_monto_bs {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #torta_container_niveles_monto_usd {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #barChart_container_especialidades {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    

    
    .titulo_grafico {
        font-size: 1.1rem;
        color: var( --color2);
        /* background-color: #333; */
        padding-bottom: 0px;
        margin-bottom: 0px;
        /* border: 1px solid; */
    }

    .titulo_grafico2 {
        font-size: 1.1rem;
        color: var( --color2);
        /* background-color: #333; */
        padding-bottom: 0px;
        margin-bottom: 0px;
        /* border: 1px solid; */
        font-weight: bold;
        font-size: 20px;
        animation: pulsar 5s infinite;
        /* line-height: 2.5; */
      }

      .titulo_encabezado {
        min-height: 35px;
      }

      @keyframes pulsar {
        0% {
          font-size: 20px;
        }
        50% {
          font-size: 22px;
        }
        100% {
          font-size: 20px;
        }
      }

    .temp {
     /*    border: 1px solid;
        margin-top: -10; */
    }
/************* FIN DASHBOARD ****************/

.highlight {
    font-weight: bold;
    color: red !important;
}

/************ INICIO PRELOADER ***********/
/*****************************************/

.hidden{
    overflow: hidden;
  }
  
  .centrado{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .lds-facebook {
    font-family: "Arista";
    line-height: 64px;
    color: var(--color1);
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    text-align: center;
  }
  
  .lds-facebook div {
    border-radius: 4px 4px 4px 4px;
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 13px;
    
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }
  
  
  .lds-facebook div:nth-child(1) {
    left: 6px;
    background: linear-gradient(to bottom, rgba(32,124,229,1), rgba(69, 146, 235,1) );
    animation-delay: -0.36s;
  }
  
  .lds-facebook div:nth-child(2) {
    left: 26px;
    background: linear-gradient(to bottom, rgba(69, 146, 235,1), rgba(126, 174, 228,1) );
    animation-delay: -0.24s;
  }
  
  .lds-facebook div:nth-child(3) {
    left: 45px;
    background: linear-gradient(to bottom, rgba(126, 174, 228,1), rgba(209,209,209,1) );
    animation-delay: -0.12s;
  }
  
  @keyframes lds-facebook {
    0% {
      top: 6px;
      height: 51px;
    }
  
    50%,
    100% {
      top: 19px;
      height: 26px;
    }
  }

/**************** FIN PRELOADER **************/


#cargando_fondo{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999999999;

    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}



/*************** INICIO CUERPO PRINCIPAL *************/

 #cuerpo_principal{
    min-height: 95vh;
    padding: 20px 20px 20px 20px !important;
    background-color: rgba(226,236,247,0.7) !important;
}

.identificador{
    font-size: 1.0rem;
    color: var(--color3);
    padding-left: 0px;
}

.visible {
    visibility: hidden !important;
    height: 0px !important;
}
/*************** FIN CUERPO PRINCIPAL ****************/
select > .selectpicker {
    background-color: red !important;
}



.titulo_pag{
    font-size: 1.0rem !important;
    padding-bottom: 2px !important;
    padding-top: 2px !important;
    border-bottom: var(--color1) !important;
}

/*************** INICIO CONFIGURACION *************/
.ocultar{
    visibility:hidden ;
    display: none;
}


.d-block{
    margin-top: 0px !important;
    padding-top: 0px !important;
}



.btn-primary {
    background-color: var(--color3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase;
}

.btn-primary:hover {
    background-color: var(--color5) !important;
    color: var( --blanco);
    transition: -5s;
}

.botones{
    font-size: 0.7rem !important;
    font-weight: 350 !important;
    margin: 0px 3px 10px 3px !important;
    padding: 6px 8px !important; 
    color: var( --blanco);
}

.botones:hover{
    background-color: var(--color5) !important;
    color: var( --blanco);
    transition: -5s;
}

.botones:focus {
    outline: none !important;
    border: none !important;
    color: var( --blanco) !important;
}

.botones:active{
    outline: none !important;
    border: none !important;
    box-shadow: inset 2px 2px 7px var( --color3) !important;
    top: 3px !important;
    left: 2px !important;
}

.separador{
    margin-right: 10px;
}

.separador_izq{
    margin-left: 10px;
}

.botones_tabla{
    font-size: 0.7rem !important;
    font-weight: 350 !important;
    margin: 0px !important;
    padding: 1px 8px !important; 
    color: var( --blanco);
}

.botones_tabla:hover{
    background-color: var(--color1) !important;
    color: var( --blanco);
    transition: -5s;
}

.botones_tabla:focus {
    outline: none !important;
    border: none !important;
    color: var( --blanco) !important;
}

.botones_tabla:active{
    outline: none !important;
    border: none !important;
    box-shadow: inset 2px 2px 7px var( --color3) !important;
    top: 3px !important;
    left: 2px !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; 
  margin: 0 !important; 
}

input[type=number] { -moz-appearance:textfield !important; }

/*************** FIN CONFIGURACION *************/


.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
    .div1 { grid-area: 1 / 1 / 6 / 3; }
    .div2 { grid-area: 1 / 3 / 2 / 5; }
    .div3 { grid-area: 2 / 3 / 4 / 5; }
    .div4 { grid-area: 4 / 3 / 5 / 4; }
    .div5 { grid-area: 4 / 4 / 5 / 5; }
    .div6 { grid-area: 5 / 3 / 6 / 4; }
    .div7 { grid-area: 5 / 4 / 6 / 5; }


.img_ente_dash {
    max-width: 40%;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*************** INICIO CONFIGURACION TABLAS *************/
.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0 !important;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    cursor: hand;
    color: #333 !important;
    border: 0px solid transparent !important;
    border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    
        background-color: var(--color1) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    
    background-color: var(--color1) !important;
}

.custom-select {
    display: inline-block;
    max-width: 50px !important;
    height: calc(1.0em + 0.75rem + 2px);
    padding: 0px 0px 0px 2px !important;
    font-size: 0.7rem !important;
    font-weight: 300;
    line-height: 1.0 !important;
    color: #495057;
    vertical-align: middle;
    
    /* background-color: #fff; */
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#tabla_usuarios_length > label{
    color: var(--color1) !important;
    font-size: 0.7rem !important;
}

#tabla_usuarios_filter > label{
    color: var(--color1) !important;
    font-size: 0.7rem !important;
}

#tabla_usuarios_filter label .form-control {
    display: block;
    width: 100%;
    height: calc(1.0em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 300;
    line-height: 1.0 !important;
    color: #495057;
    /* background-color: #fff; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    scroll-margin-right: 10px !important;
}

.encabezado_tabla{
    /* background-color: var(--color1) !important; */
    color: var(--blanco) !important;

    background: var(--color1);

}


.cuerpo_tabla {
    background-color: transparent !important;
}
/*************** FIN CONFIGURACION TABLAS *************/




/*************** INICIO USUARIOS *************/

.swal2-input{
    font-size: 0.9rem !important;
    line-height: 0.9rem !important;
    margin: 4px 0px !important;
}

.swal2-actions {
    display: flex;
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.25em auto 0;
    padding: 0 1.6em;
}

/*************** FIN USUARIOS *************/


/*********** INICIO DASHBOARD *************/

    .caja_tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 0rem;
        grid-template-columns: repeat(auto-fit, minmax(49%, 50%));
        grid-template-rows: repeat(1, 1fr);
        font-size: 1rem;
    }

    .caja_tarjeta div {
        background-color: rgba(126, 174, 228, 0.0);
        color: white;
        padding: 0.1em 0.1em 0.1em 0.1em !important;
        /* box-shadow: 2px 2px 7px var( --color4) !important; */
    }

    .tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(1300px, 1fr));
        grid-template-rows: repeat(1, 400px);
        text-align: center;
        font-size: 5rem;
    }

    .tarjeta div {
        background-color: transparent;
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

  
    .tarjeta3 {
        display: grid;
        padding: 0;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .tarjeta3 div {
        /* background-color:  transparent; */
        background-color: rgba(152, 161, 172, 0.0);
        color: white;
        padding: 0px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .tarjeta_hoy {
        display: grid;
        padding: 0;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
        grid-template-rows: repeat(1, auto);
        font-size: 5rem;
    }

    .tarjeta_hoy div {
        background-color: transparent;
        color: white;
        padding: 0px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .tarjeta_manana {
        display: grid;
        padding: 0;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .tarjeta_manana div {
        background-color: rgba(152, 161, 172, 0.3);
        color: white;
        padding: 0px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .color_hoy {
        background-color: rgba(126, 174, 228, 0.3);
    }

    .color_manana {
        background-color: rgba(152, 161, 172, 0.3);
    }

    .tarjeta4 {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
        text-align: center;
    }

    .tarjeta4 div {
        background-color: transparent;
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

    .tarjeta5 {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: repeat(1, 68px);
        font-size: 5rem;
    }

    .tarjeta5 div {
        /* background-color: var(--color3); */
        color: white;
        padding: 10px 5px 10px 5px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;

        background-color: var(--color1);
        
    }

    .tarjeta div > p {
        color: black;
        font-size: 1rem;
        line-height: 1.3rem;
        text-align: center;
        font-family: "noto-sans";
        margin-bottom: 5px !important;
        /*box-shadow: 2px 2px 7px var( --color4) !important;*/
    } 

 
    .logo_dashboard{
        margin: 0px 10px 10px 0px;
        width: 20%;
        height: auto;
        max-width: 45px;
        max-height: 45px;
        float: right;
    }
    .titulo_etiqueta_dashboard{
        padding: 1px 1px 1px 4px;
        font-size: 1.58rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-size: 1.1em;
        font-family: "roboto";
        color: #ffffff;
        margin: 0px !important;
        float: left;
    }
    .texto_etiqueta_dashboard{
        padding: 1px 1px 1px 0px;
        font-size: 3.3rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-size: 1.1rem;
        font-family: "roboto";
        color: #ffffff;
        margin-top: 18px !important;
    }


/*********** FIN DASHBOARD ****************/

/*********** INICIO REPORTE ****************/

.swal2-input {
    height: 31px !important;
    font-size: 14px !important;
    line-height: 31px !important;
    background-color: transparent !important;
    border: 1px solid rgb(206,212,218) !important;
}
/*********** FIN REPORTE ****************/



/*********** INICIO RESPUESTA IMAGEN *******/


.breadcrumb {
    background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.125);
}

#content {
    margin-bottom: 25px;
}

.adsbygoogle {
    margin-bottom: 15px;
}

.footer-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    text-align: center;
}

.footer a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
}

#previews {
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 15px;
    min-height: 220px;
    background-color: #fbfbfb;
  }
  
  .dropzone-here {
      text-align: center;
      padding-top: 60px;
      width: 100%;
      position: absolute;
      font-size: 18px;
      font-weight: bold;
      top: 50px;
  }
  
  #previews .file-row .delete {
      display: none;
  }
  
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
      display: none;
  }
  
  #previews .file-row.dz-success .delete {
      display: block;
  }
  
  .dz-image-preview {
      border: 1px solid #d6d4d4;
      padding-top: 15px;
      padding-bottom: 15px;
      margin-bottom: 15px;
  }
      
  .preview {
      position: relative;
      background: #fff;
      border: 1px solid #dadada;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
  }
  
  .preview img {
      cursor: pointer;
  }
  
  .progress {
      border: 1px solid #ccc;
      position: relative;
      display: block;
      height: 22px;
      padding: 0;
      min-width: 200px;
      margin:4px 0;
      background: #DEDEDE;
      background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9));
      background: -moz-linear-gradient(top, #ccc, #e9e9e9);
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');
      -moz-box-shadow:0 1px 0 #fff;
      -webkit-box-shadow:0 1px 0 #fff;
      box-shadow:0 1px 0 #fff;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
  }
  
  .progress-bar {
      color: #ffffff;
      display: block;
      height: 20px;
      margin: 0;
      padding: 0;
      text-align:center;
      -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #0078a5;
      background-color: #5C9ADE;
      background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5));
  }
/********** FIN RESPUESTA IMAGEN **********/



.texto_menu_ver {
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 1.0rem !important;
    font-weight: bold;
}

.texto_pequenio_menu {
    text-align: left !important;
    margin-bottom: 0px !important;
    color: rgb(61, 59, 109);
    font-size: 0.7rem !important;
}



.align-left {
    text-align: left;
  }



.valores_totales{
    margin-left: 10px !important;
    font-size: 2rem !important;
    color: rgba(255,255,255,0.5);
}





/* ---------------------------------------------------
    INICIO ORGANIGRAMA
----------------------------------------------------- */

/* ---------------------------------------------------
    FIN ORGANIGRAMA
----------------------------------------------------- */











/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {

    body{ background-size: 50%; }
    #sidebar { margin-left: -250px; }
    #sidebar.active { margin-left: 0; }
    #content { width: 100%; }
    #content.active { width: calc(100% - 250px); }
    #sidebarCollapse span { display: none; }



    .caja_tarjeta {
        display: grid;
        padding: 0.5rem;
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
        grid-template-rows: repeat(1, 1fr);
        font-size: 5rem;
    }

    .caja_tarjeta div {
        background-color: transparent;
        color: black;
        padding: 0.1em 0.1em 0.1em 0.1em !important;
        /* box-shadow: 2px 2px 7px var( --color4) !important; */
    }



    
}

@media (max-width: 705px) {
    .tarjeta5 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

        .parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(10, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }
        
        .div1 { grid-area: 2 / 1 / 7 / 3; }
        .div2 { grid-area: 1 / 1 / 2 / 3; }
        .div3 { grid-area: 7 / 1 / 9 / 3; }
        .div4 { grid-area: 9 / 1 / 10 / 2; }
        .div5 { grid-area: 9 / 2 / 10 / 3; }
        .div6 { grid-area: 10 / 1 / 11 / 2; }
        .div7 { grid-area: 10 / 2 / 11 / 3; }

        .titulo_grafico2 {
            font-size: 0.7rem;
            color: var( --color2);
            /* background-color: #333; */
            padding-bottom: 0px;
            margin-bottom: 0px;
            /* border: 1px solid; */
            font-weight: bold;
            font-size: 20px;
            animation: pulsar 5s infinite;
            /* line-height: 2.5; */
          }
}

@media (max-width: 376px) {

    .tarjeta5 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

}