@import url("https://use.typekit.net/siv6vdb.css");
@import url("../../jx_material.css");

*:focus, *:active, *:hover {
    outline:none
}

:root   {
    --aeCrmPurple: #3F366B;
    --aeCrmPurpleMedium: #2C26B1;
    --aeCrmCream: #fcfbf8;
    --aeCrmAlmostBlack: #333333;
    --aeCrmLightGreen: #A0EBCD;
    --aeCrmDarkerGreen: #9ae2c5;
    --aeCrmWhite: #ffffff;
}

#footer .container {
    width: unset;
}

#footer {
    height: 25px;
    background-color: var(--aeCrmCream);
    width: 100%;
    position: absolute;
    bottom: 0;
}

#footer center {
    font-family: ibm-plex-mono;
    font-size: 12px;
}

html, body{
    background-color: var(--aeCrmCream);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    min-height: 97vh !important;
    background-image: linear-gradient(rgb(252, 251, 248) 50%, rgba(255, 255, 255, 0)), url("data:image/svg+xml,%3Csvg width='1430' height='776' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='default' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='profile-details-default' transform='translate(-10 -4103)' stroke='%23F3F1EC'%3E%3Cg id='Pattern-/-02-/-Light' transform='translate(10 4103)'%3E%3Cpath d='M-262.734 20.762h0c261.723 0 512.728-103.969 697.794-289.036l291.549-291.55c185.066-185.067 436.069-289.034 697.792-289.034h552.892' id='Stroke-1' stroke-width='3.909'%3E%3C/path%3E%3Cpath d='M-277.362 88.626h0c261.724 0 512.727-103.969 697.794-289.036l291.55-291.55c185.065-185.067 436.068-289.034 697.792-289.034h550.9' id='Stroke-4' stroke-width='3.818'%3E%3C/path%3E%3Cpath d='M-291.99 156.49h0c261.724 0 512.727-103.969 697.794-289.036l291.55-291.55c185.065-185.067 436.068-289.034 697.792-289.034h548.908' id='Stroke-7' stroke-width='3.727'%3E%3C/path%3E%3Cpath d='M-306.617 224.354h0c261.723 0 512.726-103.97 697.794-289.037l291.549-291.55c185.066-185.067 436.069-289.034 697.792-289.034h546.914' id='Stroke-10' stroke-width='3.636'%3E%3C/path%3E%3Cpath d='M-321.245 292.218h0c261.724 0 512.726-103.97 697.794-289.037l291.55-291.55c185.065-185.067 436.068-289.034 697.791-289.034h544.922' id='Stroke-13' stroke-width='3.545'%3E%3C/path%3E%3Cpath d='M-335.873 360.08h0c261.723 0 512.728-103.967 697.794-289.035l291.55-291.55c185.065-185.067 436.068-289.034 697.791-289.034h542.929' id='Stroke-16' stroke-width='3.455'%3E%3C/path%3E%3Cpath d='M-350.5 427.943h0c261.723 0 512.726-103.967 697.793-289.034l291.55-291.55c185.065-185.067 436.068-289.036 697.792-289.036h540.934' id='Stroke-19' stroke-width='3.364'%3E%3C/path%3E%3Cpath d='M-365.129 495.807h0c261.724 0 512.729-103.967 697.794-289.034l291.55-291.55c185.065-185.067 436.068-289.036 697.792-289.036h538.942' id='Stroke-22' stroke-width='3.273'%3E%3C/path%3E%3Cpath d='M-379.756 563.671h0c261.723 0 512.726-103.967 697.794-289.034l291.55-291.55c185.065-185.067 436.068-289.036 697.791-289.036h536.95' id='Stroke-25' stroke-width='3.182'%3E%3C/path%3E%3Cpath d='M-394.384 631.535h0c261.723 0 512.728-103.967 697.794-289.034L594.96 50.95c185.065-185.067 436.068-289.036 697.791-289.036h534.957' id='Stroke-28' stroke-width='3.091'%3E%3C/path%3E%3Cpath d='M-409.011 699.399h0c261.723 0 512.726-103.969 697.793-289.035l291.55-291.549C765.397-66.252 1016.4-170.221 1278.124-170.221h532.965' id='Stroke-31' stroke-width='3'%3E%3C/path%3E%3Cpath d='M-423.64 767.263h0c261.724 0 512.729-103.97 697.794-289.035l291.55-291.55c185.065-185.067 436.068-289.036 697.792-289.036h530.973' id='Stroke-34' stroke-width='2.909'%3E%3C/path%3E%3Cpath d='M-438.267 835.127h0c261.723 0 512.726-103.97 697.794-289.035l291.55-291.55C736.141 69.476 987.144-34.493 1248.867-34.493h528.98' id='Stroke-37' stroke-width='2.818'%3E%3C/path%3E%3Cpath d='M-452.895 902.99h0c261.723 0 512.728-103.968 697.794-289.034l291.55-291.55C721.513 137.34 972.516 33.37 1234.24 33.37h526.987' id='Stroke-40' stroke-width='2.727'%3E%3C/path%3E%3Cpath d='M-467.523 970.854h0c261.724 0 512.727-103.969 697.794-289.034l291.55-291.55c185.065-185.067 436.068-289.036 697.792-289.036h524.993' id='Stroke-43' stroke-width='2.636'%3E%3C/path%3E%3Cpath d='M-482.15 1038.718h0c261.723 0 512.726-103.969 697.794-289.036l291.55-291.548c185.065-185.067 436.068-289.036 697.791-289.036h523.002' id='Stroke-46' stroke-width='2.545'%3E%3C/path%3E%3Cpath d='M-496.778 1106.582h0c261.723 0 512.726-103.969 697.794-289.036l291.55-291.55c185.065-185.065 436.068-289.034 697.791-289.034h521.008' id='Stroke-49' stroke-width='2.455'%3E%3C/path%3E%3Cpath d='M-511.406 1174.446h0c261.724 0 512.727-103.969 697.794-289.036l291.55-291.55c185.065-185.065 436.068-289.034 697.792-289.034h519.015' id='Stroke-52' stroke-width='2.364'%3E%3C/path%3E%3Cpath d='M-526.034 1242.31h0c261.724 0 512.727-103.969 697.794-289.036l291.55-291.55C648.375 476.658 899.378 372.69 1161.102 372.69h517.022' id='Stroke-55' stroke-width='2.273'%3E%3C/path%3E%3Cpath d='M-540.661 1310.174h0c261.723 0 512.726-103.97 697.794-289.037l291.55-291.55c185.065-185.065 436.068-289.034 697.791-289.034h515.03' id='Stroke-58' stroke-width='2.182'%3E%3C/path%3E%3Cpath d='M-555.29 1378.038h0c261.724 0 512.73-103.97 697.795-289.037l291.55-291.55c185.065-185.067 436.068-289.034 697.791-289.034h513.036' id='Stroke-61' stroke-width='2.091'%3E%3C/path%3E%3Cpath d='M-569.917 1445.902h0c261.724 0 512.727-103.97 697.794-289.037l291.55-291.55c185.065-185.067 436.068-289.034 697.792-289.034h511.044' id='Stroke-64' stroke-width='2'%3E%3C/path%3E%3Cpath d='M-584.545 1513.765h0c261.724 0 512.729-103.969 697.794-289.036l291.55-291.55c185.065-185.067 436.068-289.034 697.792-289.034h509.052' id='Stroke-67' stroke-width='1.909'%3E%3C/path%3E%3Cpath d='M-599.172 1581.627h0c261.723 0 512.726-103.967 697.794-289.034l291.55-291.55C575.236 815.976 826.24 712.01 1087.962 712.01h507.059' id='Stroke-70' stroke-width='1.818'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#header {
    height: 32px;
    background-color: var(--aeCrmPurple);
}

#main {
    margin-top: 128px;
    width: 420px;
    background: white;
    border-radius:8px;
    box-shadow: 0 6px 10px 0 rgb(38 32 86 / 7%), 0 1px 18px 0 rgb(38 32 86 / 6%), 0 3px 5px -1px rgb(38 32 86 / 10%);
}

.wrapper {
    height: calc(100vh - 45px);
    overflow: auto;
}

#logo {
    margin: 0 auto;
    padding: 8px 8px 32px 8px;
    background-color: white;
    border-bottom: 1px solid #F3F1EC;
    margin: 32px 32px 0px 32px;
    text-align: center;
}

#logo>#ae_logo{ 
    width: 67%; 
    padding-right: 28px;
}

#crm_logo>img{
    height: 24px;
}

.separator_v {
    border-left: 1px solid #f3f1ec;
    height: 40px;
    position: absolute;
    display: inline;
    margin-top: -5px;
}

.field-container {
    padding: 16px 32px;
    border-radius: 8px;
    background-color: white;
}

hr {
    border-top: 1px solid white;
}

#validationErrors{
    margin: 16px 32px;
}
.validation-summary-errors > ul{
    margin: 8px 0 0 0;
}
#validationErrors, .validation-summary-errors > ul {
    color: red;
    list-style: none;
    text-align: left;
    font-family: aktiv-grotesk-regular, sans-serif;
}
#pw_requirements{
    text-align: left;
    margin:8px 64px;
}

.reqlist-title{
    margin-left: -20px;
}
.reqlist-item{
    display: list-item;
}

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

div.rd-lg {
    height: 50px;
    vertical-align: middle;
}

div.rd-lg:last-child {
    height: 30px;
}

label.rd-lg {
    font-size: 16px;
    display: inline;
    vertical-align: middle;
}

div.rd-lg label.rd-hint-text {
    font-size: 12px;
    display: block;
    padding-left: 50px;
    color: darkgray;
}

.btn-half {
    width: 153px;
}
.btn-center{
    position: relative;
    display: block;
    margin: auto !important;
    margin-bottom: 16px !important;
}


.controls .btn{
    margin-right: 16px;
}
.controls .btn:last-child{
    margin-right: unset;
}
.btn-ml {
    margin-left: 16px;
}

.mb2 {
    margin-bottom: 32px;
    text-align: center;
}

.mt2 {
    margin-top: 8px;
}

.forgot-pw {
    width: 100%;;
}

h4{
    font-size: 20px;
    font-family: 'meno-display';
    text-align: center;
    color: var(--aeCrmPurple);
    margin: 16px 0;
}

a.mfa-new-tx,
.forgot-pw a {
    text-transform: uppercase;
    font-family: ibm-plex-mono;
    font-size: 12px;
    line-height: 20px;
    color: var(--aeCrmPurpleMedium);
    padding: 5px 10px;
    float: right;
    margin-top: -15px;
}
div.mfa-new-tx{
    margin-left: 90px;
}
a.mfa-new-tx {
    line-height: 38px;
}
.forgot-pw a:hover{
    color: #262056;
}

.mfa-new-tx {
    display: inline-block;
    font-size: 12px;
}

.mfa-expire-tx {
    font-size: 12px;
}

div.mfa-new-tx {
    padding-top: 10px;
}

.mfacontrols {
    width: 450px !important;
}

.controls input {
    text-indent: 16px;
    height: 48px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    background: var(--aeCrmCream);
    margin-bottom: 24px;
}

.controls .aswer-mask-div{
    padding-top:10px;
}

.controls input:focus,
.controls input:hover{
    box-shadow: none;
    border-bottom: 1px solid var(--aeCrmPurple);
}

#addChallengeQuestionPanel select{
    width: 100%;
}

.controls input.rd-lg {
    height: 19px;
    width: 40px;
    display: inline;
    vertical-align: middle;
}

#basic-information{
    margin: 8px 32px;
}
.custom-pwd::-ms-clear, .password-mask::-ms-reveal {
    display: none;
}

.eye-image {
    width: 20px;
    height: 18px;
    margin-bottom: -25px;
    margin-left: -35px;
}

.validation-summary-errors li:before, .field-validation-error:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f06a";
    margin-right: 3px;
}
/*btn custom*/
#login-btn.btn{
    padding: 10px 70px;
    margin: 25px;
    margin-left: 25%;
}

.btn{
    margin: 16px 0px;
    background-color: var(--aeCrmLightGreen);
    color: var(--aeCrmAlmostBlack);
    text-transform: uppercase;
    font-family: ibm-plex-mono;
    letter-spacing: 0.03rem;;
    font-size: 12px;
    line-height: 20px;
}
.btn:hover,
.btn:active,
.btn.active {
    box-shadow: none;
    background-color: var(--aeCrmDarkerGreen);
    color: var(--aeCrmAlmostBlack);
}
.btn:focus{
    box-shadow: none;
    border: none;
    background-color: #8bcdb3;
}
.btn.disabled,
.btn[disabled] {
    box-shadow: none;
    border: none;
    background-color: #F3F1EC!important;
    color: #999999!important;
}

.btn-border{
    height: 18px;
}

/* gray (Custom)
	------------------------------------------------------------------------*/
.btn-gray {
    box-shadow: none;
    color: var(--aeCrmAlmostBlack);
    background-color: white;
    background-repeat: repeat-x;
    border: 1px solid #9fded7;
    height: 18px;
    line-height: 18px;
}

button.btn-gray{
    height: 38px;
}

    .btn-gray:hover,
    .btn-gray:active,
    .btn-gray.active {
        box-shadow: none;
        color: var(--aeCrmAlmostBlack);
        background-color:  rgba(160,236,206,0.12);
        *background-color: rgba(160,236,206,0.12);
    }

    .btn-gray.disabled,
    .btn-gray[disabled]{
        box-shadow: none;
        background-color: white;
        border: 1px solid #f3f1ec;
        box-sizing: border-box;
    }

@media screen and (max-height: 780px) {
    #main {
        margin-top: 18px;
    }
}

/* Mobile responsive styles */
@media screen and (max-width: 768px) {
    #main.container {
        width: calc(100% - 32px) !important;
        margin: 64px auto 16px auto !important;
        max-width: 420px !important;
    }

    #main .row-fluid {
        width: 100% !important;
        margin: 0 !important;
    }

    #logo {
        margin: 16px 16px 0px 16px !important;
        padding: 8px 8px 24px 8px !important;
    }

    #logo>#ae_logo {
        width: 60% !important;
        padding-right: 0 !important;
    }

    .field-container {
        padding: 16px 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #validationErrors {
        margin: 16px 24px !important;
    }

    .controls {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .controls input {
        height: 44px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .input-holder {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #login-btn.btn {
        padding: 12px 40px !important;
        margin: 20px auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: calc(100% - 48px) !important;
        max-width: 300px !important;
        box-sizing: border-box !important;
    }

    .forgot-pw {
        text-align: center !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .forgot-pw a {
        float: none !important;
        margin-top: 0 !important;
        display: inline-block !important;
    }

    h4 {
        font-size: 18px !important;
        margin: 12px 0 !important;
    }

    .mb2 {
        margin-bottom: 24px !important;
    }

    .mfacontrols {
        width: 100% !important;
        max-width: 450px !important;
    }

    /* MFA Radio buttons - make smaller on mobile */
    .controls input.rd-lg {
        width: 24px !important;
        height: 24px !important;
        margin-right: 8px !important;
    }

    div.rd-lg {
        height: auto !important;
        min-height: 40px !important;
        padding: 8px 0 !important;
    }

    label.rd-lg {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    div.rd-lg label.rd-hint-text {
        padding-left: 32px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    /* MFA buttons - side by side on mobile */
    .controls:has(.btn-half) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .btn-half {
        width: calc(50% - 4px) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-height: 38px !important;
    }

    .btn-ml {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    #main.container {
        width: calc(100% - 16px) !important;
        margin: 32px auto 16px auto !important;
    }

    #logo {
        margin: 8px 8px 0px 8px !important;
    }

    .field-container {
        padding: 12px 16px !important;
    }

    #validationErrors {
        margin: 12px 16px !important;
    }

    #login-btn.btn {
        width: calc(100% - 32px) !important;
        padding: 12px 24px !important;
    }

    /* MFA Radio buttons - even smaller on very small screens */
    .controls input.rd-lg {
        width: 20px !important;
        height: 20px !important;
    }

    div.rd-lg {
        min-height: 36px !important;
        padding: 6px 0 !important;
    }

    label.rd-lg {
        font-size: 13px !important;
    }

    div.rd-lg label.rd-hint-text {
        padding-left: 28px !important;
        font-size: 10px !important;
    }

    /* MFA buttons on very small screens */
    .controls:has(.btn-half) {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .btn-half {
        width: calc(50% - 2px) !important;
        margin: 0 !important;
        padding: 10px 16px !important;
        font-size: 11px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
    }
}