@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
@font-face { font-family: 'PoppinsMedium'; src: url('../css/PoppinsMedium.ttf') format('truetype'); }

th, td, select, option, input, button, div, canvas, b, p, body, h1, h2, h3, h4, h5, strong {
    font-family: 'PoppinsMedium', sans-serif !important;
}

.fila-gris {
  background-color: #EDEDED;
}

.fila-blanca {
  background-color: #FFFFFF;
}

#logoFEDisplay {
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 20px; 
    width: 55%;
    max-width: 150px;
    min-width: 120px;
}#eFactura :hover{
    background-color: #eee;
}
        
#CarouselFE{  
    max-height: 680px; 
}

@media (max-height:700px) { 
    #CarouselFE img {
        width: 100%;
        height: 500px; 
    }
}

@media (min-height:700px) { 
    #CarouselFE img{   
        max-height: 600px; 
    }
}

.carousel-inner{
    border-radius: 0px 15px 15px 0px;  
}

#divInputTOTP{
   display: flex; justify-content: center; align-items: center;
   
}

.verificadorImagen{
    width: 20%;
    border: 0px ;
    background: white;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 6px 6px 0px;
}

.botonesVyI{
  display: flex;
  flex-direction: row-reverse;
  padding-top:15px;
}

.imagenfondoA {
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100%; 
}

.imagenfondoB {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%; 
}

.img {
    vertical-align: middle;
    padding-bottom:15px;
}

* {
        box-sizing: border-box; 
}

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
}

section{
    position: absolute;
}

.fondo{
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        font-family: 'Montserrat', sans-serif;
}
h1 {
        font-weight: bold;
        margin: 0;
        font-size:18px;
}

h2 {
        text-align: center;
}

p {
        font-size: 16px;
        font-weight: 100;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin: 5px 0 5px;
        padding:0px 0px;
}

span {
        font-size: 12px;
        text-align: left;
}

a {
        color: #333;
        font-size: 12px;
        text-decoration: none;
        margin: 15px 0;
}a :hover{
        color: #03a9f4;
}


button {
        margin-left: 10px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: lighter;
        padding: 12px 45px;
        letter-spacing: 1px;
}

.btnlogin{
    transition: 0.3s;
    outline: none;
    border: 1px solid #13A790; 
    background-color: #13A790;
    color: #FFFFFF;
}.btnlogin:hover{
    transition: 0.3s;
    outline: none;
    background-color: #2db5a0;
}

.btniniciar{
    transition: 0.3s;
    outline: none;
    border: 1px solid #13A790;
    background-color: #13A790;
    color: #FFFFFF;
}.btniniciar:hover{
    transition: 0.3s;
    outline: none;
    background-color: #2db5a0;
}

.btnVolver{
    transition: 0.3s;
    outline: none; 
    border: 1px solid #13A790;
    color: #13A790;
}.btnVolver:hover{
    transition: 0.3s;
    outline: none;
    background-color: #FFFFFF;
}

        
.contenedor-form{
    background-color: #E4E7EA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 8%;
    height: 100%;
    width: 100%;
    text-align: center;
}
        
        /*DATOS DENTRO DEL FORMULARIO login*/
        form {
                background-color: #E4E7EA;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding: 0 45px;
                height: 100%;
                text-align: center;
                opacity: 1;
        }

        /*DISEÑO INPUTS*/
        input {
                background-color: #ffffff;
                border: 1px;
                border-radius: 6px;
                padding: 12px 15px;
                margin: 8px 0;
                width: 100%;
        }
        


/*Contenedor principal donde se almacenan los dos contenedores*/

#container {       
    
    background-color: #E4E7EA;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 5px 500px rgba(0,0,0,0.24);
    -webkit-box-shadow: 0px 0px 5px 500rem rgba(0,0,0,0.24);
    -moz-box-shadow: 0px 0px 5px 500px rgba(0,0,0,0.24);
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    min-width: 28%;
    }

    .carrusel-contenedor {
        border-radius: 0px 12px 12px 0px;
        position: relative;
        overflow: hidden;
        height:40rem;
        width:52rem;
    }

    .contactoText{
        margin-bottom: 16px;
    }

    .contactoNom{
        margin-bottom: 16px;
    }
    
    #container {
        min-height: 560px;
        max-height: 720px;
        height: 70%;
    }
    
    @media only screen and (max-height: 550px) {
        .textoLoginDesarrolloTesting {
            display:none;
        }
    } 
    
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (max-width:600px)  { 

    #CarouselFE{
        display: none;
    }

    .fondo{
        align-items: center;
    }

    #container {
        width: 320px; /*ancho*/
        min-width: 100%;
        opacity: 1;
    }

    #logoGSOFTDisplay{
        width: 55%;
        max-width: 150px;
        min-width: 120px;
        opacity: 45%;
        display: inline;
    }

    .botonesVyI{
      display: flex;
      flex-direction: column;
      padding-top:15px;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:601px)  { 
    
    #container {
        width: 590px; /*ancho*/
        max-width: 100%;
        opacity: 1;
    }

    .fondo{
        align-items: center;
    }

    #CarouselFE{
        display: none;
    }

    #logoGSOFTDisplay{
        width: 160px;
        opacity: 45%;
        display: inline;
    }
}

/* tablet, landscape iPad, lo-res laptops ands desktops */  
@media (min-width:1030px)  { 
            
    #wrapper{
        display:flex;   
        align-items: center;
        justify-content: center;
        align-items: center;
        padding-right: 8%;
        padding-left: 8%;
        
    }

    .fondo{
        align-items: center;
    }

    #container {
        width: 28%; /*ancho*/
        max-width: 100%;
        opacity: 1;
    }
    
    #CarouselFE{
        display: inline;
    }

    #logoGSOFTDisplay{
        width: 160px;
        opacity: 45%;
        display: none;
    }
            
}

@media (max-width:1450px)  { 
    .botonesVyI{
      display: flex;
      flex-direction: column;
      padding-top:15px;
    }
}

/* great desktops, landscape 1.6k, lo-res laptops ands desktops */  
@media (min-width:1650px)  { 
            
    #wrapper{ 
        align-items: center;
        display:flex;
        height: 100%; width: 60%;
    }

    .fondo{
        align-items: center;
    }

    #container {
        width: 28%; /*ancho*/
        max-width: 100%;
        height: 800px;
        opacity: 1;
    }
    
    #CarouselFE{
        display: inline;
    }

    #logoGSOFTDisplay{
        width: 160px;
        opacity: 45%;
        display: none;
    }
            
}
        
@media (min-width:1030px) { /* big landscape tablets, laptops, and desktops */
    
    #wrapper{ 
        height: 100%; width: 100%;
    }

    .fondo{
        align-items: center;
    }
    
    #container {
        /*width: 700px; ancho viejo*/
        width: 28%; /*ancho*/
        max-width: 100%;
        opacity: 1;
    }
    
    #CarouselFE{
        display: inline;
    }

    #logoGSOFTDisplay{
        width: 160px;
        opacity: 45%;
        display: none;
    }
}

 @media (max-width:1650px) { 
    #CarouselFE .imgCar {
        height:650px;
    }
} 
 @media (min-width:1650px) { 
    #CarouselFE .imgCar {
        width: 100%;
        height: 650px;
    }
    #container {
        height: 800px;
    }
}       
 @media (min-width:1500px) { 
    #container {
        height: 90%;
    }
}  

/*CONTENEDOR LOGIN*/
/*.formulario-contenedor{ COMENTO ESTO PORQUE WINDOWS XP no lo soporta
        position: absolute;
        top: 0; 
        height: 100%; Espacio de arriba y abajo
        width: 100%; Espacio de los laterales
}*/
        
     
        
/*panel de la derecha*/ /*APAGADO POR INC: 	2023-01234   */
/*.overlay-contenido {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0px 30px;
	text-align: center;
        
        Contenido
	height:105%; centrar contenido arriba baajo
	width: 50%;
        color:#ffffff;

}*/

            /*FONDO DE PANTALLA PANEL DERECHO*/ /*APAGADO POR INC: 	2023-01234   */
            /*.overlay {
                    background-image: url(estiloIndex/carusel/imagenLogin_1.jpg);
                    background-repeat: no-repeat;
                    background-size: 130%;
                    position: relative;
                    left: -88%;
                    top: -25%;
                    height: 150%;
                    width: 200%;
            }*/
            
            /*Contenido dentro del misom*/ /*APAGADO POR INC: 	2023-01234   */
            /*.contenedor-info .img{
                height: auto;
                width: 65%;
                position: relative;
            }*/

            
            /*Mandamos el contenido al frente*/ /*APAGADO POR INC: 	2023-01234   */
            /*.info {
                    right: 0;
                    padding: 40px;
            }*/

            /*Centramos el contenido*/ /*APAGADO POR INC: 	2023-01234   */
/*            .contenedor-info {
                    position: absolute;
                    top: 0;
                    left: 42%;
                    width: 52%;
                    height: 90%;
            }*/
            
            
            .contenedor-info u{   
                    color: #ffffff;
                    font-size: 14px;
            }.contenedor-info a :hover{
                color:#03a9f4;
            }

input:focus{
    transition: 0.3s;
    outline: none;
    background-color: #f1f1f1;
}

.iti__flag {background-image: url("css/imgIntlTelInput/flags.png");}