section#login,section#register{background-color:#f5f5f5;padding:55px 0}section#login .wrapper,section#register .wrapper{background:#fff;border:1px solid #ebebeb;border-radius:2px;max-width:542px;padding:34px 71px}section#login .wrapper h1,section#register .wrapper h1{font-family:var(--fontSemiBold);font-size:20px;font-weight:600;text-align:center}section#login .wrapper>p,section#register .wrapper>p{color:var(--secondaryColor);line-height:1.8;margin-bottom:37px;text-align:center}section#login .wrapper .social-login,section#register .wrapper .social-login{align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:12px;justify-content:center}section#login .wrapper .social-login li,section#register .wrapper .social-login li{width:114px}section#login .wrapper .social-login li:hover a,section#register .wrapper .social-login li:hover a{background:#dbdbdb}section#login .wrapper .social-login li>a,section#register .wrapper .social-login li>a{align-items:center;background:#f2f2f2;color:var(--secondaryColor);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;height:44px;justify-content:center;transition:.2s ease;width:100%}section#login .wrapper .social-login li>a svg,section#register .wrapper .social-login li>a svg{margin-right:8px}section#login .wrapper .or,section#register .wrapper .or{display:block;margin:20px auto 10px;position:relative;text-align:center;width:100%}section#login .wrapper .or:after,section#login .wrapper .or:before,section#register .wrapper .or:after,section#register .wrapper .or:before{background:#d0d0d0;content:"";height:1px;position:absolute;top:50%;width:-webkit-calc(50% - 20px);width:calc(50% - 20px)}section#login .wrapper .or:before,section#register .wrapper .or:before{left:0}section#login .wrapper .or:after,section#register .wrapper .or:after{right:0}section#login .wrapper .form,section#register .wrapper .form{margin-top:10px;padding:0 15px;width:100%}section#login .wrapper .form .row,section#register .wrapper .form .row{margin-bottom:25px;width:100%}section#login .wrapper .form .row.terms,section#register .wrapper .form .row.terms{margin-bottom:22px;position:relative}section#login .wrapper .form .row.terms label,section#register .wrapper .form .row.terms label{color:var(--primaryColor);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:11px;line-height:1.8}section#login .wrapper .form .row.terms label>p,section#register .wrapper .form .row.terms label>p{color:inherit;font-size:inherit;margin:0}section#login .wrapper .form .row.terms label>p a,section#register .wrapper .form .row.terms label>p a{color:inherit;font-size:inherit;text-decoration:underline}section#login .wrapper .form .row.terms label input,section#register .wrapper .form .row.terms label input{accent-color:var(--primaryColor);flex-shrink:0;height:18px;margin-right:10px;width:18px}section#login .wrapper .form .row .col,section#register .wrapper .form .row .col{position:relative;width:50%}section#login .wrapper .form .row .col .forgotten-password,section#register .wrapper .form .row .col .forgotten-password{font-family:var(--fontMedium);font-size:11px;font-weight:500;margin-left:auto;margin-top:5px;text-decoration:underline}section#login .wrapper .form .row .col label,section#register .wrapper .form .row .col label{color:var(--primaryColor);font-family:var(--fontMedium);font-size:14px;font-weight:500;margin-bottom:10px}section#login .wrapper .form .row .col input,section#login .wrapper .form .row .col textarea,section#register .wrapper .form .row .col input,section#register .wrapper .form .row .col textarea{border:1px solid #d0d0d0;color:var(--primaryColor);font-family:var(--fontLight);font-size:16px;padding:10px 20px;width:100%}section#login .wrapper .form .row .col input:focus,section#login .wrapper .form .row .col textarea:focus,section#register .wrapper .form .row .col input:focus,section#register .wrapper .form .row .col textarea:focus{border-color:var(--primaryColor);outline:none}section#login .wrapper .form .btn-primary,section#register .wrapper .form .btn-primary{margin-top:30px;width:100%}section#login .bot-links,section#register .bot-links{margin-top:14px}section#login .bot-links p,section#register .bot-links p{color:var(--secondaryColor);text-align:center}section#login .bot-links a,section#register .bot-links a{color:var(--primaryColor);display:block;font-family:var(--fontSemiBold);font-weight:600;margin:10px auto 0;text-align:center;text-decoration:underline;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}span.error-message{margin-bottom:5px}@media screen and (max-width:768px){section#login .wrapper,section#register .wrapper{box-sizing:border-box;max-width:100%;padding:20px;width:-webkit-calc(100% - 40px);width:calc(100% - 40px)}section#login .wrapper h1,section#register .wrapper h1{font-size:18px;margin-bottom:15px}section#login .wrapper>p,section#register .wrapper>p{font-size:12px;margin-bottom:20px}section#login .wrapper .social-login,section#register .wrapper .social-login{flex-direction:column}section#login .wrapper .social-login li,section#register .wrapper .social-login li{width:100%}section#login .wrapper .form,section#register .wrapper .form{padding:0}section#login .wrapper .form .row .col label,section#register .wrapper .form .row .col label{font-size:11px}}
