@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*,
html,
body {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

}
html{
  background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
}

body,
html {
    margin: 0;

background-repeat: no-repeat;
height: 100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
body{
width:100%;
}

.page-root {
    display: flex;
    min-height: 60vh;
    flex-direction: row;
    max-width: 900px;
    min-width: 900px;
    margin: 0 auto;
   
    box-shadow: 0 0 15px rgba(0, 0, 0, .15);
    border-radius: 15px;
    overflow: hidden;
    background-color: rgb(248, 249, 250);
    animation:anim 1s forwards;

}

.parts-root {
    flex: 1;
    min-width: 50%;
    height: 80vh;
}

.left-part-root {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: unset;
}

.left-bg {
    position: absolute;
    left: -15px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: brightness(.3) blur(3px);

}

.company-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.company-description p {
    font-size: 1.5rem;
    color: #ffffff;
}

.vista-about {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    justify-content: center;
    padding: 1rem .5rem .5rem;
}

.vista-about img {
    width: 70px;
    margin: 0 .5rem;
}

.vista-about span {
    color: #858585;
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
}

.right-part-root {

    padding: 2rem;
    max-width: 0;
}

.form-header h1{
    margin: 0 !important;
    color: #f21b1b;
}

.form-header h2{
    margin: 0 !important;
    
}

.form-root{
    box-shadow: 0 0 5px rgba(0, 0, 0, .15);
    padding: 1rem 1rem;
    margin: 1.5rem 1.5rem;
}

.form-root p{
    color:black ;
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    
    
}


.input-root{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: .5s;
    position: relative;
    height: 40px;
}
.input-root:focus-within{
    
    height: 55px;
}

.input-root span{
    position: absolute;
    bottom: 5px;
    transition: .5s;
    z-index: 0;
}

.input-root:focus-within span{
    bottom: 30px;
}


.input-root input{
    background-color: transparent;
    border: none;
    padding:0;
    height: 60%;
    border-bottom: rgba(0, 0, 0, 0.5) 1px solid;
    position: absolute;
    z-index: 1;
    width: 100%;
    
}
.input-root input:focus{
    outline: none;
    border-bottom: 2px solid #f21b1b;
}
.input-root label{
    position: absolute;
    bottom: -20px;
    font-size: .8rem;
    color: #d70000;
}

.open-span{
    bottom: 30px !important;
}

.buttons-root{
    display: flex;
    margin-top: 4rem;
}
.forget-pass{
    flex: 1;
    margin-right: 1rem;
    background-color: transparent;
    border: none;
    color:#191D18;
    cursor: pointer;
    transition: .5s;
    transform: translateY(0);


}
.forget-pass:hover{
    color:#5a6358;
    transform: translateY(-2px);
}
.login-button{
    flex: 1;
    background-color: #f21b1b;
    color: #ffffff;
    border: none;
    height: 42px;
    border-radius: 5px;
    transition: .5s;
    filter: brightness(1);
    cursor: pointer;

}
.login-button:hover{

    filter: brightness(.9);

}

*:focus{
    outline: none;
}

.my-input[aria-invalid=true]{
    border-bottom: #d70000 1px solid !important;
}

@media (max-width:800px) {
    .page-root {
        flex-direction: column;
        margin: 1rem .5rem;
        min-width:100%;
        
    }
    .parts-root{
        width: 100%;
        min-width: 100%;
    }

    .form-root{
        margin: 1.5rem .5rem;
    }

    .vista-about{
        display: none;
    }
    .left-part-root {
        min-height: 250px;
    }

    .right-part-root {
        padding: 1rem 1rem;
    }

    .left-bg {
        left: 0;
    }
}


@keyframes anim{
from{
	opacity:0;
	transform:translateY(30px)
}

to{
opacity:1;
	transform:translateY(0)
}
}