@font-face {
    font-family: 'gibsonregular';
    src: url('gibson-regular-webfont.eot');
    src: url('gibson-regular-webfont.eot?#iefix') format('embedded-opentype'), url('gibson-regular-webfont.woff2') format('woff2'), url('gibson-regular-webfont.woff') format('woff'), url('gibson-regular-webfont.ttf') format('truetype'), url('gibson-regular-webfont.svg#gibsonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body.loginpage {
    background: #ffffff url(../img/bg_login.png) top right no-repeat;
}
.body-sign .card-sign .card-body {
    border-top-color: #323e47;
    border-left: solid 1px #323e47;
    border-right: solid 1px #323e47;
    border-bottom: solid 1px #323e47;
}

#cta {
    text-align: center;
    padding-top: 40px;
}

#cta a {
    text-decoration: none !important;
}

#cta a:hover {
    text-decoration: none !important;
    color: white !important;
    background: #323e47 !important;
    border-color: #323e47;
}

#cta .btn-external {
    color: #000;
    background-color: #fcd121;
    border-color: #fcd121;
}
.btn-external a {
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
}

.btn-external {
    font-family: 'Montserrat', sans-serif !important;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 11px 35px;
    font-size: 12px;
    position: relative;
    border: 2px solid;
    background-color: #3a85eb;
    border-color: #3a85eb;
    color: #fff;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.btn-primary-dk-grey {
    background-color: #323e47;
    border-color: #323e47 #323e47 #323e47;
    color: #FFF;
}

    .btn-primary-dk-grey:hover {
        background-color: #ffd800;
        border-color: #ffd800 #ffd800 #ffd800;
        /*color: #323e47;*/
        color:black;
    }

    .btn-primary-dk-grey:focus {
        box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5);
        color: #FFF;
    }

    .btn-primary-dk-grey:active {
        box-shadow: 0 0 0 3px rgba(204, 204, 204, 0.5);
        color: #FFF;
    }

/*.btn-primary.disabled, .btn-primary:disabled {
    background-color: #CCC;
    border-color: #CCC #CCC #b3b3b3;
}

.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: #b9b9b9;
    background-image: none;
    border-color: #b3b3b3 #b3b3b3 #999999;
}*/

/* DISCLAIMER */
.client-agreement-p {
    padding-left: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-top: 0px;
    font-size: 14px;
}
.indent {
    text-indent: 50px;
}
.list-container {
    padding-left: 60px;
}
.client-agreement-p ul { margin-bottom: 0!important; font:Arial !important}
.client-agreement-p li {
    margin-bottom: 10px !important;
}
.client-agreement-p h4 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.dRdo label { padding-left:15px;}
.dRdo input {
    margin-top: 5px;
}
.discl { font-size:11px; padding-top:10px; padding-left:30px; }
.hdr-sign-in h3 { margin-top:0px !important;}
.body-sign .card-sign .card-body {
    border-radius: 5px 5px 5px 5px !important;
}

#passcodeBoxes {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 16px 0 8px;
    padding: 0;
}
#passcodeBoxes input.passcode-digit,
.passcode-boxes input.passcode-digit {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 56px !important;
    flex: 0 0 48px !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    caret-color: #323e47;
    display: inline-block !important;
}
#passcodeBoxes input.passcode-digit:focus {
    outline: none !important;
    border-color: #323e47 !important;
    box-shadow: 0 0 0 2px rgba(50, 62, 71, 0.15) !important;
}
#passcodeBoxes input.passcode-digit.invalid {
    border-color: #dc3545 !important;
    background: #ffe5e8 !important;
}
@media (max-width: 480px) {
    #passcodeBoxes input.passcode-digit {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 48px !important;
        flex: 0 0 40px !important;
        font-size: 20px !important;
    }
    #passcodeBoxes { gap: 6px; }
}

#passcodeBoxes.submitting input.passcode-digit {
    background: #f1f3f5 !important;
    color: #6c757d !important;
    border-color: #323e47 !important;
    cursor: not-allowed !important;
    animation: passcode-pulse 1s ease-in-out infinite;
}
#passcodeBoxes.submitting input.passcode-digit:nth-child(1) { animation-delay: 0.0s; }
#passcodeBoxes.submitting input.passcode-digit:nth-child(2) { animation-delay: 0.1s; }
#passcodeBoxes.submitting input.passcode-digit:nth-child(3) { animation-delay: 0.2s; }
#passcodeBoxes.submitting input.passcode-digit:nth-child(4) { animation-delay: 0.3s; }
#passcodeBoxes.submitting input.passcode-digit:nth-child(5) { animation-delay: 0.4s; }
#passcodeBoxes.submitting input.passcode-digit:nth-child(6) { animation-delay: 0.5s; }
@keyframes passcode-pulse {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%      { opacity: 0.55; transform: translateY(-2px); }
}

.passcode-verifying {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: #323e47;
    font-size: 14px;
    font-weight: 500;
}
.passcode-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ced4da;
    border-top-color: #323e47;
    border-radius: 50%;
    animation: passcode-spin 0.8s linear infinite;
}
@keyframes passcode-spin {
    to { transform: rotate(360deg); }
}

/* Password reveal (press-and-hold) eye icon on the Login page.
   The icon is overlaid inside the password box (absolute) so the field stays
   full width and matches the username field, rather than adding a second box. */
#pwdInputGroup {
    position: relative;
}

/* Leave room on the right so typed text / caret never slides under the icon. */
#pwdInputGroup .form-control,
#pwdInputGroup input {
    padding-right: 42px !important;
}

.pwd-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* prevent touch-hold from scrolling/selecting */
    color: #6c757d;
}

.pwd-toggle:hover {
    color: #323e47;
}

.pwd-toggle svg {
    display: block;
}