@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
    --color-primary: #0037FF;
    --color-primary-shadow: #0037FF;
    --color-welcome-primary: #0037FF;
    --color-welcome-primary-dark: #080736;
    /* --color-welcome-primary-75:  */
    --color-primary-blue: #0037FF;
    --color-primary-blue-50: #392ECF80;

    --color-secondary: #C6C6C6;
    --color-secondary-shadow: rgba(198, 198, 198, .25);
    --color-secondary-fg: #767676;

    --color-link: #0037FF;

    --color-error-text: #721c24;
    --color-error-background: #f8d7da;
    --color-error-border: #f5c6cb;

    --color-white: #FFFFFF;
    --color-whitesmoke: #F5F5F5;
    --color-dark-steel-blue: #42535B;
    --color-thistle: #D2D2D2;
    --color-dark-gray: #767676;

    --color-alert-fill: var(--color-dark-gray);
    --color-alert-danger: #FF2050;
    --color-ie-badge-warning: #FFEAA2;
    --color-welcome-dark-black: #191932;

    --color-bg-btn-hover: #35138D;

    --color-grayscale2: #CCCCDC;
    --color-grayscale3: #808091;
    --color-grayscale4: #474759;

    --color-danger: #D93545;
    --color-accent-red: #FF8B94;
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: Inter, Helvetica, Arial, sans-serif !important;
    font-size: 16px;
    color: var(--color-welcome-dark-black);
    background-color: var(--color-white);
}

h1 {
    font-weight: 600;
}

input,
select,
textarea,
button {
    font-family: inherit;
}

a {
    color: var(--color-primary-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.root {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: 100%;
}

.header {
    padding: 1.2rem;
}

.logo img {
    width: auto;
    height: 100%;
    display: block;
    margin: auto;
}

.main {
    flex-grow: 1;
    line-height: 20px;
}

.footer {
    padding: 16px 0;
}

.footer .illustration-credit {
    color: #777;
    margin-top: 12px;
    font-size: 10px;
}

.footer .illustration-credit-link {
    color: #222
}

.container {
    width: 320px;
    margin: 16px auto;
    padding: 8px;
}

.full-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px
}

@media (min-width: 576px) {
    .container {
        width: 512px;
        margin: 24px auto;
        padding: 24px;
    }

    .full-container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px
    }
}

.hr {
    background-color: var(--color-thistle);
    border: none;
    height: 1px;
}

.form label {
    margin-bottom: 0.5rem;
    display: block;
}

.form .form-group {
    width: 100%;
}

.form .form-divided {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .form .form-divided {
        flex-direction: row;
    }

    .form .form-divided>.form-group:first-child {
        margin-right: 1.2rem;
    }
}

.form .form-control {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid var(--color-thistle);
    border-radius: 3px;
    padding: 0.5rem;
    margin: 0;
}

.form .form-control:focus {
    border: 1px solid var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--color-primary-shadow);
}

.form .required {
    color: var(--color-error-text);
}

.form .form-group.has-error .form-control:not(:focus) {
    border-color: var(--color-alert-danger);
}

.form .form-group.has-error span.error-message {
    color: var(--color-alert-danger);
    display: inline-block;
    padding-top: 2px;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn,
.btn-primary {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    min-width: 120px;
    transition: all .15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-link);
}

.btn:focus,
.btn-primary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-primary-shadow);
}

.btn:hover,
.btn-primary:hover {
    background-color: var(--color-bg-btn-hover);
    text-decoration: none;
}

.btn:disabled,
.btn-primary:disabled {
    opacity: 0.5;
}

.btn-link {
    color: var(--color-link);
    background: transparent;
    border-color: transparent;
}

.btn-link:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-primary-shadow);
}

.btn-link:hover {
    color: var(--color-primary);
    background-color: transparent;
    border-color: transparent;
    text-decoration: underline;
}

.btn-outline-primary {
    color: var(--color-link);
    background:  var(--color-white);
    border-color: var(--color-link);
}

.btn-outline-primary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-primary-shadow);
}

.btn-outline-primary:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-link);
}

.btn-outline-secondary {
    color: var(--color-secondary-fg);
    background:  var(--color-white);;
    border-color: var(--color-secondary);
}

.btn-outline-secondary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-secondary-shadow);
}

.btn-outline-secondary:hover {
    color: var(--color-secondary-fg);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-grp {
    display: flex;
    flex-direction: column;
}

.btn-grp > .btn:not(:last-child) {
    margin-bottom: 8px;
    margin-right: 0;
}

.btn > .btn-icon {
    margin-right: 8px;
    width: 1.2rem;
    height: 1.2rem;
}

@media (min-width: 576px) {
    .btn-grp {
        flex-direction: row;
    }

    .btn-grp > .btn:not(:last-child) {
        margin-right: 12px;
        margin-bottom: 0;
    }
}

.alert--danger {
    --color-alert-fill: var(--color-alert-danger);
}

.alert-container {
    align-items: center;
    background-color: var(--color-accent-red);
    border: 1px solid  var(--color-whitesmoke);
    border-left: 0;
    border-radius: 3px;
    box-shadow: 0 3px 6px 0 rgba(7, 7, 7, 0.1);
    display: inline-flex;
    margin-bottom: 24px;
    width: 100%;
}

.alert-content {
    color: var(--color-welcome-dark-black);
    font-size: 14px;
    line-height: 20px;
    flex: 1;
    margin: 10px;
}

.alert-container svg {
    height: 16px;
    width: 16px;
    fill: var(--color-welcome-dark-black);
}

.alert-icon-container {
    display: inline-flex;
    height: 16px;
    margin: 12px;
    margin-right: 0;
    width: 16px;
}

.alert-icon {
    height: 100%;
    position: relative;
    width: 100%;
    fill: var(--color-alert-danger);
}

.grecaptcha-badge {
    visibility: hidden;
}

.forgot-password {
    display: block;
    margin-top: 12px;
  }

.login-separator {
    border: 1px solid var(--color-thistle);
    margin-bottom: 20px;
    margin-top: 48px;
}

.or-separator {
    margin-bottom: 20px;
    margin-top: 48px;
    overflow: visible;
    padding: 0;
    border: none;
    border-top: 1px solid var(--color-thistle);
    color: var(--color-thistle);
    text-align: center;
}

.or-separator:after {
    content: "or";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1em;
    padding: 0 0.5em;
    background: white;
}

#ie-banner {
    display: none;
    background: var(--color-ie-badge-warning);
    border-bottom: 1px solid var(--color-thistle);
    position: relative;
    opacity: 0.95;
    padding: 15px 20px;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#ie-banner strong {
    display: none;
    font-weight: bold;
}

/* Utils */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.m-auto { margin: auto; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-32 { margin-right: 32px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-32 { margin-left: 32px; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.justify-content-space-between { justify-content: space-between; }

/* Progressive Signup */
.promo-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 32px 0 40px 0;
}

.promo-list {
    margin: 0;
}

.promo-list > .list-item {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 8px 0;
    margin-bottom: 32px;
    display: flex;
    align-items: flex-start;
}

.list {
    padding: 0;
    list-style-type: none;
}

.list-item {
    margin-bottom: 8px;
}

.list-item--fulfilled {
    background: url('/svgs/check.svg') no-repeat 0px 0px transparent;
    padding-left: 40px;
}

.promo-list > .list-item > .list-item-icon {
    margin-right: 16px;
    display: flex;
    height: 32px;
    width: 32px;
}

.signup-links {
    margin: 3rem 0;
}

.signup-password {
    position: relative;
}

.signup-password svg {
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 16px;
}

.terms {
    font-size: 14px;
    line-height: 20px;
}

.recaptcha-terms {
    color: #767676;
}

.illustration-content {
    margin: 56px 0;
}

.welcome-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    gap: 40px;
}

.welcome-wrapper .form-control {
    font-size: 16px;
    line-height: 24px;
}

.welcome-wrapper a.logo img {
    height: 108px;
}

.welcome-wrapper .tabs,
.welcome-wrapper .tab-contents {
    display: flex;
    width: 340px;
}

.tab-contents {
    flex-direction: column;
    gap: 24px;
}

.welcome-wrapper .tabs {
    border-bottom: 1px solid var(--color-grayscale2);
    justify-content: space-evenly;
}

.welcome-wrapper .tabs .tab-link {
    background-color: var(--color-white);
    border: none;
    color: var(--color-grayscale3);
    cursor: pointer;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.15px;
    padding: 8px 0;
    width: 100%;
}

.welcome-wrapper .tabs .tab-link.active {
    color: var(--color-welcome-dark-black);
    border-bottom: 3px solid var(--color-welcome-primary);
}

.welcome-wrapper .tab-contents .tab-content {
    font-size: 20px;
    width: 100%;
}

.welcome-wrapper .tab-contents .tab-content .google-link {
    color: var(--color-welcome-dark-black);
    padding: 12px 16px;
    font-size: 20px;
}

.welcome-wrapper .tab-contents .tab-content .saml-idp-btn {
    color: var(--color-welcome-dark-black);
    padding: 12px 16px;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    width: 100%;
}

.welcome-wrapper .tab-contents .tab-content .icon {
    display: inline-block;
    height: 20px;
    margin-right: 8px;
    width: 20px;
}

.welcome-wrapper .tab-contents .tab-content .or {
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

.welcome-wrapper form label {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.welcome-wrapper form #submit-btn {
    align-items: center;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--color-welcome-primary);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    color: var(--color-white);
    display: flex;
    font-size: 20px;
    justify-content: center;
    margin-top: 24px;
    padding: 12px 32px;
    width: 100%;
    font-weight: 500;
}

.welcome-wrapper form #submit-btn.active {
    background: var(--color-welcome-primary);
}

.welcome-wrapper form #submit-btn .right-arrow-icon {
    display: inline-block;
    margin-left: 22px;
    width: 18px;
}

.welcome-wrapper .forgot-password {
    display: flex;
    font-size: 16px;
    justify-content: space-between;
}

.welcome-wrapper .forgot-password .back-to-email {
    display: inline-flex;
}

.welcome-wrapper .error-message {
    color: var(--color-danger);
    font-size: 12px;
    line-height: 16px;
}

.branded-login-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    margin-bottom: 0px;
    text-align: center;
    margin-top: 8px;
}

.branded-login-footer {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.branded-login-wc-logo-container {
    display: flex;
    justify-content: center;
}

.branded-login-wc-logo img {
    width: 150px;
}

.branded-login-copyright-text {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.branded-login-copyright-text p {
    margin: 0px;
}