/*pagina escolha o ti[po de conta*/

.imageLogotipo {
    height: calc(65px + 1vw);
    width: auto;
    margin-bottom: 1rem;
}
.article-escolha {
    margin-top: 1rem;
}
#article-login {
    height: 600px;
    background: url(../images/fundo.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:5rem;

    color: #fff;
}
.article-conta {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 2rem;
    padding: 2rem 1rem;
    margin: 0;
    margin:0 auto;
    transform:translateY(-420px);
    margin-bottom:-300px;
    /*margin-top:-50px;*/

}

.card-conta {
    padding: 1rem;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 1px 20px #ececec;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
@media (width>=768px) {
    .card-conta {
        height: 600px;
    }
}
@media (width<768px) {
    .card-conta {
        height: auto;
    }
}
.conta-image{
    width:100%;
    border:1px solid #ececec;
    border-radius:10px;
    margin-bottom:0.5rem;

    img{
       width:100%;
    }
}
.conta-title{
    color:#0192ef;
}
.conta-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    /*row-gap:0.5rem;*/
    text-align: start
}
.conta-detalhes{
    display:flex;
    flex-direction:column;
    row-gap:0.5rem;
}
.detalhes-descricao{
    font-size:2.3vh;
}

.btn-conta{
   padding:0.5rem 1rem;
   border-radius:50px;
   background-color:#0192ef;
   color:#fff;
   border:none;
   width:100%;
   /*font-size:2.2vh;*/
   text-align:center;

   &:hover{
              color:#fff
          }
 
}


/* estilo da pagina loginEmpresa */
/* form registro */
#mainLogin, #mainRegistro {
    min-height: 300px;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

#main-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    padding: 3rem 0 0 0;
    height: auto;
    min-height: 600px; 

    h1{
        color: #0192ef;
    }
}

#main-formRegistro {
    display: flex;
    padding: 50px;
    border: 1px solid
}

.section-form {
    max-width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    text-align: center;
}

.section-form-last{
    height: 60%;
    width: 100%;
    padding: 0;
    background-color: #0192ef;
    padding-bottom: 5rem;
}
#curva-form{
    height: 100%;
    width: 100%;
    border-radius: 0 0 600px 0;
    background-color: #fff;
}


/*o form-input é que vai ter o estilo do form-control*/

.form-input {
    border: 1px solid silver;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 0.7rem;
    padding-left: 1rem;
    padding-right: 3rem;
    font-size: 2vh;
    /*border-bottom: 1px solid silver;*/
    background-color: #f6f7f8;
}

.form-input:focus {
 /*   border:none;
    box-shadow: 0 0 5px #d8e7f0;
    box-shadow: 0 0 5px #ebf8ff;

    box-shadow: 0 0 2px 1px #03c0f3;*/
   /* border:1px solid silver;
    outline:0;*/
    transition: 0.5s;
}

.form-link{
    color:#0192ef;
    font-size:2.2vh;
}
.form-link:focus, .form-link:hover{
    color:#0192ef;
    font-size:2.2vh;
}


.form-btn{
    border: none;
    outline: none;
    color: #fff;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    background:  linear-gradient(250deg, #03c0f3, #0192ef);
}
.form-btn:focus, .form-btn:hover{
    color: #fff;
    border:none;
    outline:none
}



/*eetes estilo permitem o efeito de transição do placeholder para cima*/
.section-credencial {
    display: grid;
    grid-template-areas: "input";
    padding: 0;
    width: 100%;
}

.span-credencial {
    grid-area: input;
    width: max-content;
    margin-left: 1rem;
    padding: 0 0.5rem;
    align-self: center;
    height: 50%;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.input-credencial {
    grid-area: input;
    width: 100%;
    font: inherit;
}

/* condicao para animacao nos inputs */

/* se o input for clicado, o elemento depois dele(o span) vai subir pra cima */

.input-credencial:focus + .span-credencial{
    transform: translateY(-110%) scale(0.9);
    transition: 0.3s;
}

/* se o input não tiver placeholder,  o elemento depois dele(o span) vai subir pra cima */

.input-credencial:not(:placeholder-shown) + .span-credencial {
    transform: translateY(-110%) scale(0.9);
    transition: 0.3s;
    font-size: 2.5vh;
}

   




#aside-form{
    height: 100%;
    /* background:  linear-gradient(250deg, #03c0f3, #0192ef); */
    display: grid;
    grid-template-areas: "aside";
    margin: 0;
    padding: 0;
    /* background-color: #0192ef; */
    /* border-radius: 200px 0 0 0; */
    height: 500px;
    height:100%;

}
.aside-image {
    width: 100%;
    /* height: 100%; */
    height: auto;
    height: 100%;
    grid-area: aside;
}


#aside-form .image{
    object-fit: cover;
    width: 110%;
    height: 100%;
}
.aside-content{
    width: 100%;
    height: 100%;
    grid-area: aside;
    display: flex;
    flex-direction: column;
    justify-content:end;
    align-items: center;
    padding: 3rem 0 0 0 ;
    padding: 10rem 0 0 0 ;
    padding-bottom:5rem;
    color: #fff;

    p{
        font-size: 2.7vh;
        width: 70%;
        text-align: center;
    }
}

@media (width<990px) {
    #main-form {
        height: 500px;
    }

    #aside-form {
        height: 500px;
        justify-content: end;
    }
}

@media (width<990px) {
    .aside-content {
        height: 500px;
        justify-content: end;
    }
}

    @media (width>=1200px) {
        .aside-image {
            width: 100%;
            height: 70%;
            height: 100%;
            grid-area: aside;
            img{
               height:100%
           }

    }
  

 
    #aside-form .image{
        object-fit: cover;
    }

}

#btn-aside {
    background: transparent;
    border: 1px solid;
    box-shadow: 0 0 2px;
    padding: 0.5rem 1rem;
    font-size: 2.2vh;
}
#btn-aside:hover{
    font-weight: bold;
    font-size: 2.2vh;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 5px ;

}


/* form registro */

#main-formRegistro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0 0 0;
    order: 1;
    height: auto;
}

@media (width<990px) {
    #main-formRegistro {
        height: 500px;
    }
}

    .form-title {
        color: #0192ef;
    }

    .form-subtitle {
        text-align: center;
        width: 70%;
    }



    #aside-formRegistro {
        height: 100%;
        /* background:  linear-gradient(250deg, #03c0f3, #0192ef); */
        display: grid;
        grid-template-areas: "aside";
        margin: 0;
        /* display: flex; */
        padding: 0;
        /* background-color: #0192ef; */
        /* border-radius: 200px 0 0 0; */
        height: 510px;
        margin: 0;
        overflow: hidden;
        min-height: auto;
        height: 100%;
    }
 
    @media (width<990px) {
        #main-formRegistro {
            height: 500px;
        }

        #aside-formRegistro {
            height: 500px;
            justify-content: end;
        }
    }



    #curva-formRegistro {
        height: 100%;
        width: 100%;
        /* border: 1px solid red; */
        border-radius: 0 0 0 300%;
        /* border-radius: 0 0 100% 0; */
        background-color: #fff;
        /* border: 1px solid red; */
    }

    #section-form-last {
        height: 00%;
        margin-top: -90px;
        display: none;
    }

    .tipo-conta {
        font-weight: bold;
    }


    /* form recuperacao */

    /* login Parceiro */
    .aside-content {
        /*border-image: fill 0 linear-gradient(rgba(2, 100, 206, 0.3) 50%, rgb(3, 94, 146));*/
    }


    .image-login {
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
    }


    @media (width>=1200px) {
        .image-login {
            width: 100%;
            height: auto;
            margin: 0;
        }
    }