:root{
/*     --color1:  rgb(249,184,0);
    --color2:  rgb(0, 148, 64);
    --color3:  rgb(249,184,0);
    --color4: rgba(209,209,209,1);
    --color5: rgb(249,184,0);
    --blanco: rgba(255,255,255,1); */

    --color1:  rgb(5, 79, 170);
    --color2:  rgb(103, 164, 239);
    --color3:  rgb(5, 79, 170);
    --color4: rgba(209,209,209,1);
    --color5: rgb(229,179,46);
    --blanco: rgba(255,255,255,1);

}



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: rgb(0,148,64);
    background: linear-gradient(90deg, rgba(0,148,64,1) 1%, rgba(249,184,0,1) 1%, rgba(0,148,64,1) 2%, rgba(249,184,0,1) 2%, rgba(249,184,0,1) 47%, rgba(249,184,0,1) 98%, rgba(0,148,64,1) 98%, rgba(249,184,0,1) 99%, rgba(0,148,64,1) 99%); */
 
    background: rgb(5, 79, 170);
    background: linear-gradient(222deg, rgba(5, 79, 170,1) 8%, rgba(98, 161, 238, 0.872) 98%);
}


.blurred {
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }


/*****************************************/
/************** 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: #ffffff;
    background-image: url("../img/logo_maneiro_sn.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( --color2);
    color: #fff;
    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( --color2);
    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: #fff;
    color: var( --color2);
}

.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( --color1);
}

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

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

#titulo_menu_izq h3{
    margin-bottom: 0px !important;
    padding-right: 15px !important;
    font-family: roboto;
    font-size: 1.0rem;
    font-weight: 400;
    letter-spacing: 1px;
}

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

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

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

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( --color1);
}

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

/* Estilo para la tabla */
.tabla-personalizada th {
font-size: 12px; /* Tamaño de fuente para la tabla */
}

/* Estilo para las celdas */
.tabla-personalizada td {
font-size: 11px; /* Tamaño de fuente para las celdas */
}


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

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

.header{
    
    height: 100vh;

    background: rgb(5, 79, 170);
    background: linear-gradient(222deg, rgba(5, 79, 170,1) 8%, rgba(98, 161, 238,0.8715861344537815) 98%);
/* 
  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;
    left: 0;
    top: 0;
    right: 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: 25px;
    height: 40px;
}

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

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



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

.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: 350px;
    height: auto;
}
/*********** FIN VIDEO BACKGROUND ************/
#reconectar{
    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);
}

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

#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;

    background: rgb(5, 79, 170);
    background: linear-gradient(222deg, rgba(5, 79, 170,1) 8%, rgba(98, 161, 238,0.8715861344537815) 98%);
}



#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 ****************/
.titulo_grafico {
    font-size: 1.1rem;
    color: var( --color2);
    /* background-color: #333; */
    padding-bottom: 0px;
    margin-bottom: 0px;
    /* border: 1px solid; */
    
}
/************* FIN DASHBOARD ****************/


/************* INICIO CIUDADANO ****************/
.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 CIUDADANO ****************/



/************ 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(5, 79, 170,1), rgb(11, 95, 198) );
    animation-delay: -0.36s;
  }
  
  .lds-facebook div:nth-child(2) {
    left: 26px;
    background: linear-gradient(to bottom, rgba(11, 95, 198,1), rgb(26, 116, 226) );
    animation-delay: -0.24s;
  }
  
  .lds-facebook div:nth-child(3) {
    left: 45px;
    background: linear-gradient(to bottom, rgba(26, 116, 226,1), rgb(50, 131, 230) );
    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(255,255,255,0.9) !important;
}

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

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

.solicitud_subtitulo {
    visibility: visible !important;
    background-color: #ff0000 !important;
    color: #ffffff;
    padding: 2px !important;
}

.texto_subtitulo {
    color: #ffffff !important;
}


.solicitud_caja_1_n1 {
    visibility: hidden !important;
    background-color: #f2f2f2 !important;
    padding: 5px !important;
    height: 0px !important;
}

.solicitud_caja_2_n1 {
    visibility: visible !important;
    background-color: #f2f2f2 !important;
    padding: 3px !important;
}

.solicitud_caja_1_n2 {
    display: none;
    visibility: hidden !important;
    background-color: #f2f2f2 !important;
    padding: 5px !important;
    height: 0px !important;
}
.solicitud_caja_2_n2 {
    display: block;
    visibility: visible !important;
    background-color: #f2f2f2 !important;
    padding: 3px !important;
}
.solicitud_encabezado_1_n2 {
    display: none;
    visibility: hidden !important;
}
.solicitud_encabezado_2_n2 {
    /* display: none; */
    display: block;
    visibility: visible !important;
}



.solicitud_caja_1_n3 {
    display: none;
    visibility: hidden !important;
    background-color: #f2f2f2 !important;
    padding: 5px !important;
    height: 0px !important;
}
.solicitud_caja_2_n3 {
    display: block;
    visibility: visible !important;
    background-color: #f2f2f2 !important;
    padding: 3px !important;
}
.solicitud_encabezado_1_n3 {
    display: none;
    visibility: hidden !important;
}
.solicitud_encabezado_2_n3 {
    display: block;
    visibility: visible !important;
}



.solicitud_caja_1_n4 {
    display: none;
    visibility: hidden !important;
    background-color: #f2f2f2 !important;
    padding: 5px !important;
    height: 0px !important;
}
.solicitud_caja_2_n4 {
    display: block;
    visibility: visible !important;
    background-color: #f2f2f2 !important;
    padding: 3px !important;
}
.solicitud_encabezado_1_n4 {
    display: none;
    visibility: hidden !important;
}
.solicitud_encabezado_2_n4 {
    display: block;
    visibility: visible !important;
}

.solicitud_caja_1_n5 {
    display: none;
    visibility: hidden !important;
    background-color: #f2f2f2 !important;
    padding: 5px !important;
    height: 0px !important;
}
.solicitud_caja_2_n5 {
    display: block;
    visibility: visible !important;
    background-color: #f2f2f2 !important;
    padding: 3px !important;
}
.solicitud_encabezado_1_n5 {
    display: none;
    visibility: hidden !important;
}
.solicitud_encabezado_2_n5 {
    display: block;
    visibility: visible !important;
}

/*************** 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: rgb(5, 79, 170);
    background: linear-gradient(222deg, rgba(5, 79, 170,1) 8%, rgba(98, 161, 238,0.8715861344537815) 98%);
}


.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: 5rem;
    }

    .caja_tarjeta div {
        background-color: rgba(126, 174, 228, 0.3);
        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(300px, 1fr));
        grid-template-rows: repeat(1, 200px);
        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;
        color: white;
        padding: 0px !important;
        box-shadow: 2px 2px 7px var( --color3) !important;
    }

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

    .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: rgb(5, 79, 170);
        background: linear-gradient(222deg, rgba(5, 79, 170,1) 8%, rgba(98, 161, 238,0.8715861344537815) 98%);
    }

    .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;
    }
    .titulo_etiqueta_dashboard{
        padding: 1px 1px 1px 4px;
        font-size: 1.48rem !important;
        text-align: center;
        line-height: 1rem;
        font-weight: 600;
        font-family: "roboto";
        color: #ffffff;
        margin: 0px !important;
    }

    .titulo_etiqueta_dashboard_2{
        padding: 1px 1px 1px 4px;
        font-size: 1.28rem !important;
        text-align: center;
        line-height: 1.0rem;
        font-weight: 600;
        font-family: "roboto";
        color: #ffffff;
        margin: 0px !important;
    }
    .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 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;
}

.texto_pequenio_nuevo {
    margin-left: 4px !important;
    margin-top: -14px !important;
    color: rgb(255, 0, 0);
    font-size: 0.7rem !important;
    line-height: 20px;
}

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



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




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

    .bienbenido_msg h1{
        font-size: 2.0rem;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: 0px;
        color: var(--blanco) !important;
    }
    .bienbenido_msg h4{
        font-size: 1.2rem;
        font-weight: 100;
        letter-spacing: 2px;
        margin-bottom: 5px;
    }
}

@media (max-width: 376px) {

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



}