:root {
    --primary-blue: #1A4F8E;
    --accent-blue: #2574bb;
    --accent-yellow: #f4d44c;
    --text-gray: #7a7a7a;
}

body {
    background-image: url('/css/images/TMT-background-swirls.png');
    background-size: cover;
    background-position: top left;
    background-attachment: fixed;
}

#tmt-login-container {
    font-family: 'PT Sans', sans-serif;
    max-width: 1280px;
    margin: auto;
    padding: 30px;
}

#tmt-login-container .logo {
    width: 300px;
    height: auto;
}

.tmt-login-header, .tmt-two-step-header {
    color: var(--primary-blue);
    font-size: 3rem;
    margin-top: 100px;
    position: relative;
    letter-spacing: 1px;
}

.tmt-login-header:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50vw);
    bottom: -16px;
    height: 4px;
    width: 25vw;
    background-color: var(--accent-yellow)
}

.tmt-two-step-header:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50vw);
    bottom: -16px;
    height: 4px;
    width: 44vw;
    background-color: var(--accent-yellow)
}

.tmt-login-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--text-gray);
    margin-top: 100px;
    gap: 20px;
}

@media (max-width: 720px){
    .tmt-login-body {
        margin-top: 0;
    }

    .tmt-login-info-container {
        margin-top: 20px;
    }

    .tmt-login-form-box {
        filter: none !important;
        background: none !important;
    }
}

.tmt-login-contact h4 {
    color: var(--accent-blue);
    letter-spacing: 0.5px;
}

.tmt-login-contact .tmt-login-support {
    position: relative;
}

.tmt-login-contact .tmt-login-support:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    height: 4px;
    max-width: 55%;
    min-width: 215px;
    background-color: var(--accent-yellow)
}

.tmt-login-contact button {
    width: 200px;
    height: 45px;
    background-color: var(--accent-blue);
    border: none;
    border-radius: 3px;
    color: #ffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: inherit;
    cursor: pointer;
}

.tmt-login-form-container label {
    font-weight: bold;
    margin: 32px 0 4px;
    display: block;
}

.tmt-login-form-container button, .tmt-login-form-container input {
    font-family: 'PT Sans', sans-serif;
    min-width: 400px;
    width: 40%;
    height: 45px;
    padding: 0 10px;
    color: var(--text-gray);
    border: 1px solid rgba(122, 122, 122,0.3);
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 3px;
}

.tmt-login-form-container button {
    margin-top: 32px;
    background: linear-gradient(to right, #004D8A, #002568);
    color: #ffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: inherit;
    cursor: pointer;
}

.tmt-login-form-submit {
    background: linear-gradient(to right, #004D8A, #002568);
    color: #ffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.tmt-login-form-submit:disabled {
    opacity: 0.7;
    filter: grayscale(0.9);
    cursor: not-allowed;
}

.tmt-login-forgot-pw {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-blue);
    margin: 16px 0;
    display: block;
    text-decoration: none;
    cursor: pointer;
    width: 40%;
    min-width: 400px;
}

.tmt-login-forgot-pw:hover {
    text-decoration: underline;
    font-weight: 900;
}

.tmt-login-support a {
    font-weight: 600;
    font-size: 16px;
    color: var(--accent-blue);
    display: block;
    text-decoration: none;
}

.tmt-login-support a:hover {
    text-decoration: underline;
    font-weight: 900;
}

.tmt-login-support-desc {
    margin-top: 76px;
    font-weight: 600;
    font-size: 16px;
    display: block;
}

.tmt-login-form-container {
    flex: 2;
}

.tmt-login-info-container {
    flex: 1;
}

.tmt-login-form-box {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    min-height: 400px;
    align-items: center;
    justify-content: center;
    background: #ffff;
    filter: drop-shadow(0 2px 5px rgba(122, 122, 122,0.1));
}



/* copied from css/login/style.css
/*FIXES FOR LOGIN PAGE AND 2 Factor AUTH PAGE*/
body .form{  position:relative;  }
.login-form input[type='submit']{margin-top:10px; padding:10px; width:71px;}
body.path-user .login-page .login-form-two-factor  input.checkbox{ -webkit-appearance: checkbox; width:20px; display:inline-block; vertical-align:middle;}
.login-form-two-factor div span{ display: inline-block; margin-left:5px; vertical-align:text-bottom;}
body.path-user .login-page .login-form-two-factor input.checkbox:focus{border:none !important; box-shadow:none !important;}

body.path-user.twoFactor .login-page h1{ padding-top:30px; padding-bottom:30px; }
body.path-user.twoFactor #main-container h1{ font-size:25px; line-height:4px; margin-bottom:0px; }
body.path-user.twoFactor #main-container{ margin-top:40px; }
body.path-user.twoFactor #main-container .login-form-wrapper p{ font-size:15px; }
body.path-user.twoFactor .nav-container{ padding-top:10px; }
#login-form .invalid-text{ border:1px solid red; background-color: #D8d8d8; }
body.path-not-frontpage.newLogin .login-page h1{ padding-top:30px; padding-bottom:30px; }
body.path-not-frontpage.newLogin #main-container h1{ font-size:25px; line-height:4px; margin-bottom:0px; }
body.path-not-frontpage.newLogin #main-container{ margin-top:40px; }
body.path-not-frontpage.newLogin #main-container .login-form-wrapper p{ font-size:15px; }
body.path-not-frontpage.newLogin .nav-container{ padding-top:10px; }
body.path-not-frontpage .two-step-code { margin-bottom: 4px !important; }
body.path-not-frontpage .two-step-error { border: 1px solid #d03200; padding: 6px 10px; width: 94%; max-width: 400px; color: #d03200; background-color: #f9e6e0; }

.login-form .reset_success {
    border: 1px solid #00875a;
    padding: 8px;
    width: 94%;
    max-width: 400px;
    color: #00875a;
    background-color: #e3fcef;
    margin: 1em 0 2em;
    min-height: 56px;
}

.login-form .error {
    border: 1px solid #d03200;
    padding: 8px;
    max-width: 384px;
    color: #d03200;
    background-color: #f9e6e0;
    margin: 2em 0;
    min-height: 56px;
}

.login-form .error > div.ico-warning-circle, .login-form .reset_success > div.ico-check-circle {
    float: left;
    font-size: 38px;
    padding-right: 8px;
    width: 46px;
    height: 38px;
}

.login-form-wrapper {
    margin-bottom: 25px;
}

.login-form .reset_success > div.ico-check-circle {
    margin-top: 0.8rem;
}

.toggle_form {
    cursor: pointer;
}

.two-step-auth-form-box-content {
    width: 94%;
    max-width: 400px;
}

.mt2 {
    margin-top: 2em;
}

.mt1 {
    margin-top: 1em;
}

.mb0 {
    margin-bottom: 0;
}