@import "../sapt_base.css";

.fondo-estado
{
    background: url('/public/assets/imagen/fondos/fondo_login.svg') no-repeat center;
    background-size: cover;
    padding-top: 100px;
}

.panel-login{
    background: var(--sapt-blanco-claro);
}
.panel-contenido{
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 350px;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 0 auto;
}
.panel-contenido h1{
    margin-top: 0;
    margin-bottom: 32px;
    text-align: left;
}
.panel-texto-head{
    font-size: 32px;
    line-height: 42px;
    font-weight: bold;
    color: var(--sapt-azul-ultra);
}
.panel-link-olvido{
    display: -webkit-flex;
    display: flex;
    color: var(--sapt-azul-ultra);
    font-weight: 600;
}
.panel-link-olvido:hover{
    color: var(--sapt-azul-ultra);
    text-decoration: none;
}
.panel-contenido .panel-link-olvido + button{
    margin-top: 50px;
}
.panel-imagen{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.panel-imagen-difumi{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(3, 3, 3, .6);
}
.panel-imagen-animada{
    width: 100%;
    height: 100vh;
    background-image: url('../../../imagen/fondos/portadaLogin00.jpg');
    background-size: cover;
    -webkit-animation: zoomin 30s linear 1s forwards;
    animation: zoomin 30s linear 1s forwards;
}

@-webkit-keyframes zoomin{
    0% {
         -webkit-transform:scale(1)
    }
    50% {
         -webkit-transform:scale(1.2)
    }
    to {
         -webkit-transform:scale(1.4)
    }
}
@keyframes zoomin{
    0% {
         -webkit-transform:scale(1)
    }
    50% {
         -webkit-transform:scale(1.2)
    }
    to {
         -webkit-transform:scale(1.4)
    }
}
.logo-marca-contenido{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    position: absolute;
    z-index: 1;
    top: 0;
}
.panel-imagen-animada .logo-marca-contenido{
    position: absolute;
    z-index: 1;
    top: 0;
}
.logo-marca-logo{
    margin-top: 26px;
    margin-right: 16px;
    margin-left: 92px;
}
.logo-marca-carrusel{
    overflow: hidden;
    width: 300px;
    height: 25px;
}
.logo-marca-carrusel-contenido{
    position: relative;
    right: 0;
    bottom: 0;
    color: hsla(0, 8%, 75%, 0.6);
    -webkit-animation: slideanimation 10s infinite;
    animation: slideanimation 10s infinite;
}
.logo-marca-slide{
    display: -webkit-flex;
    display: flex;
    width: 350px;
    height: 28px;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 32px;
    font-size: 20px;
    color: hsla(0, 8%, 75%, 0.6);
}
@-webkit-keyframes slideanimation {
    15% {
         bottom:0;
         opacity:1
    }
    30% {
         bottom:60px
    }
    45% {
         bottom:60px
    }
    60% {
         bottom:120px
    }
    75% {
         bottom:120px
    }
    90% {
         bottom:180px
    }
    to {
         bottom:180px
    }
}
@keyframes slideanimation {
    15% {
         bottom:0;
         opacity:1
    }
    30% {
         bottom:60px
    }
    45% {
         bottom:60px
    }
    60% {
         bottom:120px
    }
    75% {
         bottom:120px
    }
    90% {
         bottom:180px
    }
    to {
         bottom:180px
    }
}

.input-password{
    position: relative;
}

.sapt-btn-showpass{
    position: absolute;
    right: 4px;
    top: 2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 9px 11px;
    background-color: var(--sapt-azul-ultra);
    color: var(--sapt-blanco-claro);
    font-size: 12px;
    border-radius: 0px 5px 5px 0px;
    
}

@media only screen and (min-width: 1024px){
    .panel-contenido{
        width: 350px;
        -webkit-justify-content: center;
        justify-content: center;
    }

}

@media only screen and (max-width: 850px){
    .panel-contenido{
        -webkit-justify-content: center;
        justify-content: center;
    }
}

@media only screen and (max-width: 450px){

    .panel-login{
        min-width: 350px;
        height: auto;
        padding: 32px 0;
    }
    .panel-contenido{
        width: 100%;
        max-width: 350px;
        margin-top: 72px;
        margin-left: 16px;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .panel-imagen{
        display: none;
    }
}