:root {
--purple: #5d35b0;
--deep-purple: #35166f;
--yellow: #ffd23f;
--ink: #2e2445;}
* {
box-sizing: border-box;}
body {
background: #f8f5ff;
color: var(--ink);
font-family: 'Nunito', Arial, sans-serif;
min-height: 100vh;}
.auth-page {
display: flex;
min-height: 100vh;}
.auth-intro {
background: linear-gradient(145deg, #35166f 0%, #7049c0 100%);
color: #fff;
display: flex;
flex: 1 1 49%;
overflow: hidden;
padding: 42px 8%;
position: relative;}
.auth-intro:before {
background: rgba(255,210,63,.2);
border-radius: 50%;
content: '';
height: 470px;
left: -210px;
position: absolute;
top: -190px;
width: 470px;}
.auth-intro:after {
border: 50px solid rgba(255,255,255,.08);
border-radius: 50%;
bottom: -160px;
content: '';
height: 370px;
position: absolute;
right: -115px;
width: 370px;}
.intro-inner {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
z-index: 1;}
.brand {
color: #fff;
display: inline-block;
font-size: 28px;
font-weight: 800;
letter-spacing: -.6px;}
.brand:hover, .brand:focus {
color: #fff;
text-decoration: none;}
.brand-mark {
align-items: center;
background: var(--yellow);
border-radius: 8px;
color: var(--deep-purple);
display: inline-flex;
font-size: 17px;
height: 30px;
justify-content: center;
margin-right: 7px;
transform: rotate(-6deg);
width: 30px;}
.intro-copy {
margin: auto 0;
max-width: 480px;
padding: 35px 0;}
.intro-copy .eyebrow {
color: var(--yellow);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;}
.intro-copy h1 {
font-size: 41px;
font-weight: 800;
letter-spacing: -1px;
line-height: 1.14;
margin: 12px 0 18px;}
.intro-copy p {
color: rgba(255,255,255,.82);
font-size: 17px;
line-height: 1.65;
max-width: 440px;}
.benefit {
align-items: center;
display: flex;
font-size: 14px;
font-weight: 700;
margin-top: 15px;}
.benefit i {
align-items: center;
background: rgba(255,255,255,.15);
border-radius: 50%;
color: var(--yellow);
display: inline-flex;
height: 31px;
justify-content: center;
margin-right: 11px;
width: 31px;}
.intro-footer {
color: rgba(255,255,255,.59);
font-size: 12px;}
.auth-content {
align-items: center;
background: #fff;
display: flex;
flex: 1 1 51%;
justify-content: center;
padding: 50px 7%;}
.auth-form {
max-width: 410px;
width: 100%;}
.mobile-brand {
display: none;}
.auth-form h2 {
color: var(--deep-purple);
font-size: 31px;
font-weight: 800;
letter-spacing: -.6px;
margin: 0 0 6px;}
.form-intro {
color: #756b82;
font-size: 15px;
margin-bottom: 29px;}
.form-group {
margin-bottom: 20px;}
.form-label-row {
display: flex;
justify-content: space-between;
margin-bottom: 7px;}
label {
color: #4a3d5e;
font-size: 13px;
font-weight: 800;
margin: 0;}
.forgot-link {
color: var(--purple);
font-size: 12px;
font-weight: 800;}
.input-group {
width: 100%;}
.input-group-addon {
background: #f7f3ff;
border: 1px solid #e6def4;
border-right: 0;
color: #8d7ba9;
min-width: 43px;}
.form-control {
border: 1px solid #e6def4;
border-left: 0;
box-shadow: none;
color: #4a3d5e;
font-size: 15px;
height: 49px;
padding-left: 3px;}
.form-control:focus {
border-color: #bba6e5;
box-shadow: none;}
.password-input {
border-right: 0;
flex: 1 1 auto;
width: 1%;}
.password-group {
align-items: stretch;
display: flex;}
.password-group .input-group-addon {
align-items: center;
display: flex;
flex: 0 0 43px;
justify-content: center;}
.password-group .input-group-btn {
display: flex;
flex: 0 0 48px;
vertical-align: top;
width: 48px;}
.password-toggle {
background: #fff;
border: 1px solid #e6def4;
border-left: 0;
border-radius: 0 4px 4px 0;
color: #8d7ba9;
height: 49px !important;
line-height: 47px;
margin: 0 !important;
min-width: 48px;
outline: 0;}
.password-toggle:hover,
.password-toggle:focus {
background: #f7f3ff;
border-color: #bba6e5;
color: var(--purple);}
.input-group:focus-within .input-group-addon {
border-color: #bba6e5;}
.input-group:focus-within .password-toggle {
border-color: #bba6e5;}
.checkbox {
color: #756b82;
font-size: 13px;
margin: 2px 0 24px;}
.checkbox input {
margin-top: 5px;}
.btn-login {
background: var(--purple);
border: 0;
border-radius: 7px;
color: #fff;
font-size: 15px;
font-weight: 800;
height: 50px;
width: 100%;}
.btn-login:hover, .btn-login:focus {
background: var(--deep-purple);
color: #fff;}
.alert {
border-radius: 7px;
font-size: 13px;
margin-bottom: 18px;}
.verification-help {
font-size: 13px;
margin: -8px 0 18px;
text-align: center;}
.verification-help a {
color: var(--purple);
font-weight: 800;}
.or-divider {
align-items: center;
color: #a299ae;
display: flex;
font-size: 12px;
margin: 24px 0;
text-align: center;}
.or-divider:before, .or-divider:after {
background: #ede8f3;
content: '';
flex: 1;
height: 1px;}
.or-divider:before {
margin-right: 13px;}
.or-divider:after {
margin-left: 13px;}
.signup-box {
background: #fffbeb;
border: 1px solid #fff0ad;
border-radius: 8px;
color: #665b73;
font-size: 13px;
padding: 13px 16px;
text-align: center;}
.signup-box a {
color: var(--purple);
font-weight: 800;}
.teacher-note {
color: #847990;
font-size: 12px;
margin: 17px 0 0;
text-align: center;}
.teacher-note a {
color: var(--purple);
font-weight: 800;}
@media (max-width: 767px) {
.auth-intro {
display: none;}
.auth-content {
min-height: 100vh;
padding: 40px 26px;}
.mobile-brand {
color: var(--deep-purple);
display: inline-block;
font-size: 26px;
font-weight: 800;
margin-bottom: 55px;}
.mobile-brand:hover, .mobile-brand:focus {
color: var(--deep-purple);
text-decoration: none;}
.auth-form h2 {
font-size: 29px;}
.brand-mark {
vertical-align: 2px;}
}