.alert-danger{display: flex; justify-content: center; align-items: center; height: 50px; background-color: var(--darkGreen); text-transform: uppercase; font-weight: bold; color: white;}

.bannerTop{background-image: url('../../img/bannerTop.webp'); background-size: cover; background-position: center; height: 100px;}
.bannerTop .bannerTop-wrapper{display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; height: 100px; padding: 0 20px;}
.bannerTop .bannerTop-wrapper .link-home p{font-size: 20px; font-weight: bold; color: var(--white);}
.bannerTop .bannerTop-wrapper .page h1{font-size: 25px; font-weight: bold; color: var(--darkGreen);}

.login-area{height: auto; min-height: 405px;}
.login-area .login-wrapper{display: flex; justify-content: center;margin-top:30px;}
/*.login-area .login-wrapper .box{background-image: url('../../img/area-do-cliente/login/login.webp'); width: 74.1%; height: 333px; background-size: cover; margin-top: 26px; padding: 0 72px;}*/
.login-area .login-wrapper .box{
    width: 78%; 
    height: 325px;
    border: 3px solid green ;
    border-radius: 20px;
    background: rgb(117,157,110);
    background: linear-gradient(0deg, rgba(117,157,110,1) 0%, rgba(240,245,240,1) 39%, rgba(255,255,255,1) 49%);
}
.login-area .login-wrapper .box .form{
    display:flex;
    justify-content:center;
}
.login-area .login-wrapper .box .boxTitle{margin-top: 25px; margin-bottom: 45px; text-align: center;}
.login-area .login-wrapper .box .boxTitle h1{font-size: 20px; font-weight: bold; text-transform: uppercase; color: var(--darkGreen);}
.login-area .login-wrapper .box .boxTitle p{font-weight: normal; color: #6a6a6b;}
.login-area .login-wrapper .box .form form .wrapper{display: flex;}
.login-area .login-wrapper .box .form form .wrapper .login, .login-area .login-wrapper .box .form form .wrapper .senha{display: flex; flex-direction: column;}
.login-area .login-wrapper .box .form form .wrapper .login label, .login-area .login-wrapper .box .form form .wrapper .senha label{font-size: 17.5px; font-weight: bold; color: var(--darkGreen); margin-left: 7px; margin-bottom: 6px;}
.login-area .login-wrapper .box .form form .wrapper .login input, .login-area .login-wrapper .box .form form .wrapper .senha input{width: 384px; height: 48px; background-color: #d7d7d7; border-radius: 10px; border: none; padding-left: 7px; box-shadow: 5px 2px 10px 0px #e2e2e2;}
.login-area .login-wrapper .box .form form .wrapper .login{margin-right: 33px;}
.login-area .login-wrapper .box .form form .wrapper .senha .forgotPass{margin-left: 11px;}
.login-area .login-wrapper .box .form form .wrapper .senha .forgotPass span a{font-size: 13.83px; font-weight: normal; color: #6d6d6d; text-decoration: underline;}
.login-area .login-wrapper .box .form form .btn{display: flex; justify-content: center; margin-top: 15px;}
.login-area .login-wrapper .box .form form .btn button{width: 103px; height: 34px; border-radius: 10px; display: flex; justify-content: center; align-items: center; background-color: #d7d7d7; color: var(--darkGreen); font-size: 16px; font-weight: bold; border: none; box-shadow: 4px 5px 10px 0 #72856f; cursor: pointer;}
.login-area .login-wrapper .box .form form .btn button:hover{text-decoration: underline;}

@media (max-width: 1024px){
    .login-area .login-wrapper .box .form form .wrapper .login input, .login-area .login-wrapper .box .form form .wrapper .senha input {
        width: 290px;
    }
}
@media (min-width: 200px) and (max-width: 1023px){
.bannerTop{margin-top: 105px;}
.bannerTop .bannerTop-wrapper .link-home p{font-size: 14px;}
.bannerTop .bannerTop-wrapper .page h1{font-size: 14px; text-align: center;}
.login-area .login-wrapper .box{height: auto; padding: 23px 18px; width: 100%;}
.login-area .login-wrapper .box .boxTitle{margin-bottom: 25px;}
.login-area .login-wrapper .box .form form .wrapper{flex-direction: column;}
.login-area .login-wrapper .box .form form .wrapper .login{margin-right: 0;}
.login-area .login-wrapper .box .form form .wrapper .login input, .login-area .login-wrapper .box .form form .wrapper .senha input{width: 100%;}
}