*{margin: 0;padding: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
.h-100{height: 100dvh;}
.w-100{width: 100%;}
.bg-login{background-color: #256AA5;}
.fs-1rem{font-size: 1rem;}
.fs-2rem{font-size: 1.2rem;}
.container {
    display: flex;
    width: 100%;
    height: 100vh;
}
body{overflow-y:hidden;}
.flex{display: flex;}
.flex-col{flex-direction: column;}
.gap-2{gap: 2rem;}
.gap-3{gap: 4rem;}
.evenly{
    justify-content: space-evenly;
}
.between{
    justify-content: space-between;
}
.items-center{
    align-items: center;
    justify-items: center;
}
.bg-main{
    /*background: linear-gradient(67deg,rgba(245, 245, 245, 1) 20%, rgba(37, 106, 165, 1) 50%);*/
    background: linear-gradient(247deg, #f5f5f5 20%, #256aa5 50%);
}

.left-trapezoid,
.right-trapezoid{
    flex: 1;
    height: 100%;
}
.left-trapezoid {
    background: #256AA5;
    animation: animatron 1s ease-in-out forwards;
}
.right-trapezoid {
    background: #f5f5f5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
}
.title{ font-size: 4rem;}
.subtitle{ font-size: 2rem;}
@keyframes animatron {
    from{
        clip-path: polygon(0 0, 0% 0, 100% 100%, 0% 0%);
    }to{
        clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
    }
}
@keyframes fadeUp {
    0% {
        transform: translate3d(0, 200px, 0);
        opacity: 0;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}
.fade-up{
    animation-name: fadeUp;
    animation-duration: 1s;
}
input{border: none;}
.input-field{
    position: relative;
}
.input-field input{
    width: 19rem;
    height: 2.75rem;
    font-size: 0.85rem;
    padding: 0;
    border-bottom: 2px solid #256AA5;
    background: transparent;
    color:#1b78b6;
    outline: none;
}
.input-field label{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #256AA5;
    font-size: 0.85rem;
    pointer-events: none;
    transition: 0.3s;
}
input:focus{
    border-bottom: 2px solid #1b78b6;
}
input:focus + .icono{
    color: #1b78b6;
}
input:focus ~ label,
input:valid ~ label{
    top: 0;
    left: 15px;
    font-size: 0.65rem;
    padding: 0 2px;
    background: transparent;
}
.icono{color: #256AA5;}
.btn-submit{color: #256AA5; border: 2px solid #256AA5; border-radius: 1rem; padding: 0.1rem;}
.btn-submit-disabled{color: #a8a8a8; border: 2px solid #a8a8a8; border-radius: 1rem; padding: 0.1rem;}
.btn-submit:hover{background-color: #256AA5; color: whitesmoke;cursor: pointer;}

.contenedor-animado{
    color:#999;
    font-size:1.4rem;
    font-weight:bold;
    padding-top:0px;  
    position:relative;
    width:100%;
    bottom:45%;
    display:block;
}

#flip {
    height:2.8rem;
    overflow:hidden;
}

#flip > div > div {
    color:#fff;
    padding:4px 0px;
    height:45px;
    margin-bottom:45px;
    display:inline-block;
}

#flip div:first-child {
    animation: show 12s ease-in-out infinite;
}

@keyframes show {
    0% {margin-top:-270px;}
    5% {margin-top:-180px;}
    33% {margin-top:-180px;}
    38% {margin-top:-90px;}
    66% {margin-top:-90px;}
    71% {margin-top:0px;}
    99.99% {margin-top:0px;}
    100% {margin-top:-270px;}
}

.twhite{color: whitesmoke;}

.alert{color:whitesmoke;text-align: center; border-radius: 1rem; margin: 1rem 0; padding: 1rem;}

.alert-danger{background-color: #AC2121;}
.alert-success{background-color: #119600;}

#logo{filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.5));}

@keyframes fade {
    0%, 50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}