/* General & typography
   ========================================================================== */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    background: #F2F3F5;
    color: #333840;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: normal;
}

h1 {
    font-size: 24px;
    line-height: 29px;
    margin: 0 0 8px;
}

h2 {
    font-size: 20px;
    line-height: 24px;
}

h3 {
    font-size: 18px;
    line-height: 22px;
}

h4 {
    font-size: 16px;
    line-height: 19px;
    margin: 0 0 16px;
}

a {
    color: #00A7C2;
}

p {
    margin: 0 0 8px;
}

p:last-child {
    margin-bottom: 0;
}

.hide {
    display: none !important;
}

/* Loader
   ========================================================================== */

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin: 24px 0;
}

.loader {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

.loader span {
    display: block;
    position: absolute;
    height: 12px;
    width: 4px;
    border-radius: 20px;
    background-color: #00A7C2;
    transform-origin: bottom center;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    opacity: 0;
}

.loader span:nth-child(1) {animation-delay: 0s; animation-name: fade-grow-1; top: 0px; right: 18px;}
.loader span:nth-child(2) {animation-delay: .2s; animation-name: fade-grow-2; top: 3px; right: 13px;}
.loader span:nth-child(3) {animation-delay: .4s; animation-name: fade-grow-3; top: 8px; right: 10px;}
.loader span:nth-child(4) {animation-delay: .6s; animation-name: fade-grow-4; top: 13px; right: 13px;}
.loader span:nth-child(5) {animation-delay: .8s; animation-name: fade-grow-5; top: 16px; right: 18px;}
.loader span:nth-child(6) {animation-delay: 1s; animation-name: fade-grow-6; top: 13px; right: 23px;}
.loader span:nth-child(7) {animation-delay: 1.2s; animation-name: fade-grow-7; top: 8px; right: 26px;}
.loader span:nth-child(8) {animation-delay: 1.4s; animation-name: fade-grow-8; top: 3px; right: 23px;}

@keyframes fade-grow-1 {
    0% {transform: rotate(0deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(0deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(0deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(0deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(0deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-2 {
    0% {transform: rotate(45deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(45deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(45deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(45deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(45deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-3 {
    0% {transform: rotate(90deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(90deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(90deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(90deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(90deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-4 {
    0% {transform: rotate(135deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(135deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(135deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(135deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(135deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-5 {
    0% {transform: rotate(180deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(180deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(180deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(180deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(180deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-6 {
    0% {transform: rotate(225deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(225deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(225deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(225deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(225deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-7 {
    0% {transform: rotate(270deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(270deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(270deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(270deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(270deg) scaleY(1);opacity: 0;}
}

@keyframes fade-grow-8 {
    0% {transform: rotate(315deg) scaleY(.5);opacity: 0;}
    40% {transform: rotate(315deg) scaleY(1);opacity: 1;}
    55% {transform: rotate(315deg) scaleY(1);opacity: 1;}
    75% {transform: rotate(315deg) scaleY(1);opacity: 0;}
    100% {transform: rotate(315deg) scaleY(1);opacity: 0;}
}

/* Structure
   ========================================================================== */

.row {
    margin: 0 -8px;
    display: flex;
    flex-wrap: wrap;
}

[class*="col-"] {
    padding: 0 8px;
    width: 100%;
    margin-bottom: 24px;
}

[class*="col-"]:last-child {
    margin-bottom: 0px;
}



@media (min-width: 768px) {
    [class*="col-"] {
        margin-bottom: 0px;
    }

    .col-6 {
        width: 50%;
    }

    .col-9 {
        width: 75%;
    }

    .col-3 {
        width: 25%;
    }
}

/* Header
   ========================================================================== */

.header {
    background-color: white;
    border-bottom: 1px solid #D6D7D9;
    display: flex;
    justify-content: center;
    padding: 24px;
}

.header--transparent {
    background-color: transparent;
    border-bottom: none;
}

/* Forms & buttons
   ========================================================================== */

label {
    display: block;
    margin-bottom: 8px;
    line-height: 1;
    color: #333840;
}

input {
    display: block;
    width: 100%;
    border: 1px solid #D6D7D9;
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    border-radius: 4px;
    font-weight: 500;
}

input:hover {
    border: 1px solid #72767C;
}

input:focus {
    border: 1px solid #00A7C2;
    outline: none;
}

input:disabled {
    background: #F2F3F5;
    border-color: transparent;
}

input.error {
    border: 1px solid #D26060;
}

input::placeholder {
    color: #9DA0A4;
}

.input-info {
    margin-top: 8px;
    font-size: .9rem;
}

.input-error {
    margin-top: 8px;
    font-size: .9rem;
    color: #D26060;
}

.form-wrapper {
    display: flex;
    justify-content: center;
}

.form-container {
    width: 640px;
    padding: 48px;
    margin: 32px 0;
    background-color: white;
    border-radius: 8px;
}

.error-page {
    background-color: #006474;
    min-height: 100vh;
}

.error-image-1 {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80vh;
}

.error-image-2 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33%;
    max-width: 800px;
    min-width: 200px;
}

.error-container {
    width: 100%;
    padding: 20px;
    max-width: 600px;
    margin-top: 15vh;
    color: white;
    text-align: center;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.error-container h1 {
    font-size: 96px;
    line-height: 1;
    margin: 24px 0;
}

.error-container h2 {
    margin-bottom: 20px;
}

.error-container p {
    margin-bottom: 18px;
    line-height: 1.5;
}

.form-header {
    margin-bottom: 32px;
}

.form-error {
    background-color: #F6DFDF;
    padding: 24px;
    border: 1px solid #D26060;
    border-radius: 4px;
}

.form-row {
    margin-bottom: 24px;
}

.bold-link {
    font-weight: bold;
    text-decoration: none;
    color: #00869B;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.bold-link:hover {
    border-color: #99DCE7;
}

.btn {
    text-decoration: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #00A7C2;
    color: white;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    height: 40px;
    line-height:38px;
    padding: 0 36px;
}

.btn:hover {
    background: #00869B;
}

.btn:focus {
    box-shadow: 0 0 0 2px #002127;
    outline: none;
}

.btn:active {
    background: #33B9CE;
}

.btn--secondary {
    background-color: white;
    color: #00A7C2;
    border-color: #00A7C2;
}

.btn--secondary:hover {
    background-color: white;
    border: 1px solid #99DCE7;

}

.btn--secondary:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px #00869B;
}

.btn--secondary:active {
    background-color: white;
}

.btn--tertiary {
    background-color: #CCEDF3;
    color: #00869B;
}

.btn--tertiary:hover {
    background-color: #99DCE7;
    color: #00869B;
}

.btn--inline {
    display: inline-block;
    width: auto;
}

.btn:disabled {
    background-color: #D6D7D9;
    cursor: not-allowed;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn.loading:before {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-radius: 50%;
    border-top-color: transparent;
    margin-right: 8px;
    animation: rotate linear 1s infinite;
    vertical-align: text-bottom;
}

.validators {
    display: flex;
    flex-wrap: wrap;
    margin-top: 4px;
}

.validator {
    margin-right: 10px;
    line-height: 1.5;
    vertical-align: middle;
    color: #9DA0A4;
}

.validator.validated {
    color: #333840;
}

.validator svg {
    position: relative;
    top: 3px;
}

.validator path {
    stroke: #D6D7D9
}

.validator.validated path {
    stroke: #52B788;
}



/* Cards
   ========================================================================== */

.info-card {
    padding: 24px;
    margin: 32px 0;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
}


/* Cards
   ========================================================================== */

.notification {
    background: #DCF1E7;
    border: 1px solid #97d4b8;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    margin: 32px 0 20px;
    border-radius: 8px;
}

.notification.error {
    border: 1px solid #D26060;
    background: #F6DFDF;
}

.notification > img {
    width: 32px;
    display: block;
    margin-right: 16px;
}

.notification-text {
    flex: 1;
    font-size: 12px;
}

.notification-title {
    font-size: 14px;
    font-weight: 700;
}


/* Login Page
   ========================================================================== */

.login {
    display: flex;
    min-height: 100vh;
    background-color: white;
}

.login__left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.login__left-wrapper {
    max-width: 544px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.login__left-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
}

.login__left-footer {
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: #72767C;
}

.login__left-content > form {
    margin-top: 32px;
}

.login__left-content > img{
    margin-bottom: 48px;
}

.login__right {
    display: none;
    flex: 1;
    background: #00A7C2;
    color: white;
    position: relative;
    justify-content: center;
    padding: 0 30px;
}

@media (min-width: 1024px) {
    .login__right {
        display: flex;
    }
}

.login__right-content-wrapper {
    height: 50vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 35vw;
    position: relative;
    z-index: 1;
}

.login__right-content {
    max-width: 600px;
}

.login__right-content span {
    white-space: nowrap;
}

.login__right-content h1 {
    font-size: 33px;
    line-height: 1.1;
    margin-bottom: 16px;
}

@media (min-width: 1200px) {
    .login__right-content h1 {
        font-size: 40px;
    }
}

.login__right-content .btn {
    margin-top: 24px;
}

.login__right-mark {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    height: 55%;
}

.login__right-mark-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

@media screen and (min-width: 1600px) {
    .login__right-mark-2 {
        height: 50%;
    }
}


/* Forgot Password Page
   ========================================================================== */

.forgot-password__actions {
    display: flex;
}

.forgot-password__actions .btn:first-child {
    margin-right: 16px;
    max-width: 167px;
}

/* Verify
   ========================================================================== */
.error-message {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-message img {
    display: inline-block;
    margin-right: 8px;
}

.verify-form {
    text-align: center;
}

.verify-form__content {
    margin: 24px 0;
}

.otp-digits {
    display: flex;
    justify-content: center;
}

.otp-digit {
    width: 57px;
    height: 73px;
    line-height: 73px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
    margin-right: 9px;
    caret-color: transparent;
}

.otp-digit--filled {
    border-color: #99DCE7 !important;
}

.otp-digit:focus {
    border-color: #9DA0A4 !important;
}

.otp-digit:last-child {
    margin-right: 0;
}