html, body{ font-size:14px; }
@media (min-width:768px){
html, body{ font-size:calc(100vw / 100); }
}
.login{ display:block; width:100%; height:100vh; padding:0; margin:0; }
.login-left{ display:block; width:100%; height:auto; background-color:var(--primaryColor); padding:30px; }
.login-logo{ background-repeat:no-repeat; background-position:center; background-size:contain; width:50%; height:1px; padding-bottom:30%; margin:0 auto; }
.login-right{ display:block; width:100%; background-color:#FAFAFA; padding:30px; overflow-y:auto; }
.login-box{ display:block; width:100%; height:auto; margin:0 auto; }
.login-title{ font-size:2rem; text-align:center; line-height:1.2; }
.login-title-complement{ text-align:center; line-height:1.2; }
.login-form{ margin:50px 0; }
.login-control{ width:100%; font-size:1rem; min-height:4.5rem; border-radius:2.25rem; border:0; background-color:#FFFFFF; box-shadow:0 0.25rem 1rem rgba(0,0,0,0.12); padding:0 2.25rem; }
.login-control-email{ position:relative; margin-bottom:1rem; }
.login-control-email .login-control{ padding-left:6rem; }
.login-control-email:after{ content:""; position:absolute; width:2rem; height:2rem; top:1.25rem; left:2.25rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M3.20703 10.2539C4.89714 9.56641 6.51562 9.22266 8.0625 9.22266C9.60938 9.22266 11.2135 9.56641 12.875 10.2539C14.5651 10.9128 15.4102 11.7865 15.4102 12.875V14.7227H0.714844V12.875C0.714844 11.7865 1.54557 10.9128 3.20703 10.2539ZM10.6406 6.30078C9.92448 7.01693 9.0651 7.375 8.0625 7.375C7.0599 7.375 6.20052 7.01693 5.48438 6.30078C4.76823 5.58464 4.41016 4.72526 4.41016 3.72266C4.41016 2.72005 4.76823 1.86068 5.48438 1.14453C6.20052 0.39974 7.0599 0.0273438 8.0625 0.0273438C9.0651 0.0273438 9.92448 0.39974 10.6406 1.14453C11.3568 1.86068 11.7148 2.72005 11.7148 3.72266C11.7148 4.72526 11.3568 5.58464 10.6406 6.30078Z' fill='%230E4375'/%3E%3C/svg%3E") no-repeat center; background-size:50%; }
.login-control-password{ position:relative; margin-bottom:1.5rem; }
.login-control-password .login-control{ padding-left:6rem; }
.login-control-password:after{ content:""; position:absolute; width:2rem; height:2rem; top:1.25rem; left:2.25rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M5.17578 7.53906C5.54818 7.91146 5.97786 8.09766 6.46484 8.09766C6.95182 8.09766 7.38151 7.91146 7.75391 7.53906C8.1263 7.16667 8.3125 6.73698 8.3125 6.25C8.3125 5.76302 8.1263 5.33333 7.75391 4.96094C7.38151 4.58854 6.95182 4.40234 6.46484 4.40234C5.97786 4.40234 5.54818 4.58854 5.17578 4.96094C4.83203 5.33333 4.66016 5.76302 4.66016 6.25C4.66016 6.73698 4.83203 7.16667 5.17578 7.53906ZM11.6641 4.40234H21.1602V8.09766H19.3125V11.75H15.6602V8.09766H11.6641C11.2917 9.10026 10.5898 9.95964 9.55859 10.6758C8.55599 11.3919 7.52474 11.75 6.46484 11.75C4.94661 11.75 3.64323 11.2201 2.55469 10.1602C1.49479 9.07161 0.964844 7.76823 0.964844 6.25C0.964844 4.73177 1.49479 3.44271 2.55469 2.38281C3.64323 1.29427 4.94661 0.75 6.46484 0.75C7.52474 0.75 8.55599 1.10807 9.55859 1.82422C10.5898 2.54036 11.2917 3.39974 11.6641 4.40234Z' fill='%230E4375'/%3E%3C/svg%3E") no-repeat center; background-size:50%; }
.login-control-btn{ margin-bottom:1rem; }
.login-btn{ width:100%; padding:1rem; font-size:1.8rem; font-weight:500; color:#FFFFFF; background-color:#2C314B; border-radius:1rem; }
.login-control-link{ width:100%; text-align:right; }
.login-link{ margin-bottom:2rem; color:#2C314B; font-size:1.2rem; }
.login-or{ text-align:center; margin-bottom:1rem; color:#9D9D9D; font-size:1.2rem; }
.login-control-social{ position:relative; text-align:center; }
.login-social{ position:relative; display:inline-block; width:4rem; height:4rem; border-radius:50%; background-color:#FFFFFF; border:1px solid #E6E6E6; margin:0 0.5rem; }
.login-facebook:after{ content:""; position:absolute; width:3rem; height:3rem; top:0.5rem; left:0.5rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='35' viewBox='0 0 17 35'%3E%3Cpath d='M16.5109 12.1604H10.4675V7.74979C10.4675 6.39804 11.8666 6.08378 12.5204 6.08378H16.424V0.131963L11.9487 0.108276C5.84531 0.108276 4.45092 4.54569 4.45092 7.39132V12.1604H0.0292969V18.2938H4.45092V34.8496H10.4675V18.2938H15.5776L16.5109 12.1604Z' fill='%233B5998'/%3E%3C/svg%3E") no-repeat center; background-size:auto 65%; }
.login-google:after{ content:""; position:absolute; width:3rem; height:3rem; top:0.5rem; left:0.5rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E %3Cpath d='M7.80828 21.1027L6.59865 25.6159L2.17703 25.7091C0.839929 23.219 0.129517 20.4407 0.107231 17.6144C0.0849438 14.7881 0.751453 11.9989 2.04912 9.48804L5.98436 10.2097L7.71038 14.1197C6.93519 16.3877 6.96978 18.8542 7.80828 21.0995V21.1027Z' fill='%23FBBB00'/%3E %3Cpath d='M34.5466 14.2347C35.1355 17.332 34.8703 20.5311 33.7795 23.4891C32.6887 26.4471 30.8135 29.0524 28.3548 31.0259L23.3978 30.7732L22.6967 26.3942C24.7435 25.1944 26.3162 23.3279 27.1514 21.1072H17.8629V14.2347H34.5482H34.5466Z' fill='%23518EF8'/%3E %3Cpath d='M28.3537 31.0252C26.3663 32.6213 24.0519 33.7605 21.5749 34.3619C19.0978 34.9633 16.5187 35.0121 14.0207 34.505C11.5226 33.9978 9.16679 32.9471 7.12034 31.4273C5.07389 29.9076 3.38699 27.9561 2.17932 25.7114L7.80899 21.1034C8.33748 22.5123 9.16737 23.7887 10.2406 24.8434C11.3139 25.8981 12.6045 26.7056 14.0224 27.2094C15.4403 27.7133 16.9511 27.9014 18.4492 27.7604C19.9474 27.6195 21.3966 27.153 22.6956 26.3936L28.3537 31.0252Z' fill='%2328B446'/%3E %3Cpath d='M28.5668 4.10694L22.9403 8.7149C21.622 7.89373 20.1356 7.38039 18.5915 7.21309C17.0475 7.04579 15.4856 7.22883 14.022 7.7486C12.5585 8.26836 11.231 9.11147 10.1383 10.2152C9.04568 11.3189 8.21597 12.6548 7.71095 14.1235L2.05286 9.49027C3.2462 7.18573 4.94075 5.17787 7.01197 3.61423C9.08319 2.05059 11.4785 0.970903 14.0217 0.454521C16.565 -0.0618612 19.1917 -0.0018191 21.7087 0.630235C24.2258 1.26229 26.5692 2.45029 28.5668 4.10694Z' fill='%23F14336'/%3E %3C/svg%3E") no-repeat center; background-size:auto 65%; }
@media (min-width:768px){
.login{ display:flex; padding:0; margin:0; }
.login-left{ display:inline-flex; align-items:center; width:50%; height:100%; vertical-align:middle; padding:0px; }
.login-right{ display:inline-flex; align-items:center; width:50%; height:100%; vertical-align:middle; padding:0px; }
.login-box{ width:60%; }
}