:root {
    --primary-text-color: #013862;
    --primary-text-font: Mulish;
    --secondary-text-color: #0166A1;
    --splash-logo: url(../../../images/login/earthcheck/splash.jpg);
    --splash-event-logo: url(../../../images/login/failte_ireland/splashevent.jpg);
    --link-color: #208ec9;
    --link-hover-color: #00aced;
    --brand-logo: url(../../../images/logos/earthcheck/login-logo.svg);
    --primary-button-color: #0067A1;
    --primary-button-text: #FFF;
    --splash-background: #0138621A;
    --splash-opacity: 0;
    --slogan-text-size: clamp(48.05px, 4vw, 24px);
}

.login-body {
    color: var(--primary-text-color);
    font-family: var(--primary-text-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 15.06px;
}

h2 {
    color: var(--header-color);
}

.login-body a {
    color: var(--link-color);
}

.brand-logo {
    content: var(--brand-logo);
    user-select: none;
}

.splash-background {
    background-color: var(--splash-background);
    opacity: var(--splash-opacity);
}

.right-box-rounding {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.left-box-rounding {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.login-section {
    max-width: 290px;
}

.trigger-button {
    width: 290px;
    height: 40px;
    background: var(--primary-button-color);
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-button-text)
}

.input-box {
    font-weight: 600;
    background: #FBFBFB;
    border: 1px solid #E7E7E7;
    max-height: 40px;
    min-height: 40px;
    width: 290px;
}

.primary-col {
    background: white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    flex: 1 1 270px;
}

.slogan-col {
    background-color: white;
    background-image: var(--splash-logo);
    background-size: cover;
    background-position: center;
    flex: 2 1 360px !important;
}

.slogan-event-col {
    background-color: white;
    background-image: var(--splash-event-logo);
    background-size: cover;
    background-position: center;
    flex: 2 1 360px !important;
}

.slogan-main-text {
    font-family: Open Sans;
    font-size: var(--slogan-text-size);
    font-weight: 700;
    word-wrap: break-word;
    line-height: 61.78px;
    letter-spacing: 0.15em;
    text-align: center;
}

.secondary-text {
    color: var(--secondary-text-color);
}

@media only screen and (max-width: 576px) {
    .box {
        margin: unset;
        max-width: 100%;
        max-height: 100%;
    }
}

.password-wrapper {
    position: relative;
    display: inline-block;
}

    .password-wrapper input {
        padding-right: 30px;
    }

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    z-index: 1;
    user-select: none;
}

    .toggle-password:hover {
        color: #000;
    }

    .toggle-password:focus {
        outline: 2px solid var(--link-color);
        outline-offset: 2px;
    }