@font-face {
    font-family: "itc-avant-garde-gothic-pro";
    src: url("https://use.typekit.net/af/578a9d/00000000000000007735ba14/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/578a9d/00000000000000007735ba14/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/578a9d/00000000000000007735ba14/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "itc-avant-garde-gothic-pro";
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "itc-avant-garde-gothic-pro";
    src: url("https://use.typekit.net/af/6161d4/00000000000000007735ba1e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/6161d4/00000000000000007735ba1e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/6161d4/00000000000000007735ba1e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 500;
}

/* This here as it is a fix, might not be the best, of the autofill styling problem */

.custom-select.is-invalid:focus, .custom-select.is-valid:focus, .custom-select:invalid:focus, .custom-select:valid:focus, .form-control.is-invalid:focus, .form-control.is-valid:focus, .form-control:invalid:focus, .form-control:valid:focus {
    -webkit-box-shadow: none !important;
    box-shadow: inset 0 0 20px 20px var(--ct-input-focus-bg) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* -webkit-background-clip: text; */
    -webkit-text-fill-color: var(--ct-input-color) !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--ct-input-bg) !important;
    caret-color: var(--ct-input-color);
}

/* This here because of the autofill styling problem */

:root {
    --ct-abz-warning-new: #F26D86;
}

[data-layout-color=dark] {
    --abz-background-colour: #0B0A1A;
    --abz-card-colour: #161526;
    --abz-primary-font-colour: #D0D4D9;
    --abz-primary-font-pseudo-colour: #FFFFFF;
    --abz-secondary-font-colour: #8E909A;
    --abz-scroll-puck-colour: #8E9099;
    --abz-func-primary-font-colour: #D0D4D9;
    --abz-func-primary-font-pseudo-colour: #FFFFFF;
    --abz-func-secondary-font-colour: #FFFFFF;
    --abz-func-secondary-font-pseudo-colour: #FFFFFF;
    --abz-func-default-bg-colour: #222130;
    --abz-func-default-bg-pseudo-colour: #373745;
    --abz-func-primary-bg-colour: #0C6D8D;
    --abz-func-primary-bg-pseudo-colour: #009CC7;
    --abz-func-secondary-bg-colour: #A20A64;
    --abz-func-secondary-bg-pseudo-colour: #BC0970;
    --abz-func-success-bg-colour: #386C1C;
    --abz-func-success-bg-pseudo-colour: #53A527;
    --abz-func-warning-bg-colour: #B77228;
    --abz-func-warning-bg-pseudo-colour: #EF9432;
    --abz-func-danger-bg-colour: #AE4F66;
    --abz-func-danger-bg-pseudo-colour: #F26D86;
    --abz-func-passive-bdr-colour: #8E909A;
    --abz-func-passive-bdr-pseudo-colour: #D0D4D9;
    --abz-anchor-colour: #009CC7;
    --abz-anchor-pseudo-colour: #009CC7;
    --abz-func-icon-secondary-colour: #D0D4D9;
    --abz-table-background-color: #1B1A29;
    --abz-table-background-color-hover: #222130;
    --abz-table-header-background-colour: #222130;
    --abz-table-selected-background-color: #04354C;
    --abz-table-heading-color: #8E9099
}

* {
    line-height: 1.5;
    letter-spacing: .5px;
}

body {
    font-size: 13px !important;
}

#page-wrapper {
    background-color: var(--ct-background-color) !important;
    height: 100vh;
    width: 100vw;
    margin: 0 !important;
    padding: 0 !important;
}

.container-fluid, #main,
.container-fluid > .row,
form {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

form {
    height: 99%;
}

.login-container {
    max-width: unset;
    margin: unset;
    padding-top: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .login-container > .row {
        border: 1px solid #00000000;
        border-radius: 5px;
        background-color: var(--ct-card-bg);
        width: 380px;
        min-height: 100%;
        padding: 2.25rem !important;
        padding-top: calc(2.25rem + 10px) !important;
        padding-bottom: 2.9rem !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important;
        position: relative;
    }

.border-div {
    background: linear-gradient(90deg, rgba(232,143,54,0.5) 0%, rgba(249,152,53,0.5) 25%, rgba(153,76,147,0.5) 50%, rgba(138,82,152,0.5) 75%, rgba(0,136,187,0.5) 100%);
    height: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: absolute;
    width: 100% ;
    top: 0;
    left: 0px;
}
/* New */ /* Name of class changed from "title-panel" to "panel-title" as it will need to change depand on the view */
.panel-title {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ct-btn-abz-passive-color);
    font-family: "itc-avant-garde-gothic-pro" !important;
}

.control-label {
    font-size: 12px !important;
    text-transform: unset;
    margin-bottom: -1px;
    font-weight: bold !important;
    font-family: 'Nunito';
    color: var(--ct-icon-color);
}

.checkbox label {
    /* Visibility */
    color: var(--ct-main-text-color);
    /* Padding */
    padding: 0;
    padding-top: 2.6px;
    /* Font */
    font-size: 13px;
    font-family: "itc-avant-garde-gothic-pro";
    font-weight: 300;
}
    .checkbox label input {
        /* Margin */
        margin-top: 0px;
    }

.forgot-password {
    text-decoration: none;
    float: right;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: -4px;
}
    .forgot-password a {
        font-size: 10px !important;
        font-weight: 400 !important;
        color: var(--ct-icon-color) !important;
        font-family: "itc-avant-garde-gothic-pro" !important;
    }

.panel-body {
    padding: 0;
}

input::placeholder {
    color: #8E9099!important;
}

input.form-control {
    height: unset;
    font-family: Nunito;
    display: block;
    width: 100%;
    padding: 7.2px 14.4px;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ct-input-color);
    background-color: var(--ct-input-bg);
    background-clip: padding-box;
    border: 1px solid var(--ct-input-border-color);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 3px;
}

input[data-input-type="password"] {
    background-position: right calc(13.4px + 17.4px + 14.4px) center !important
}

.form-control:focus {
    color: var(--ct-input-focus-color);
    background-color: var(--ct-input-focus-bg);
    border-color: var(--ct-input-focus-border-color);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.input-validation-error {
    border-color: var(--ct-abz-warning-new) !important;
}

.field-validation-error, .validation-summary-errors {
    color: var(--ct-abz-warning-new) !important;
    position: absolute;
}

/* I added the rest of the buttons here to match the same style*/
.btn-abz {
    font-size: 12px;
    margin-top: 2rem;
    background-color: var(--ct-btn-background-abz-blue);
    border: 0.5px solid var(--ct-btn-border-abz-blue);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    height: 38px;
    color: #FFFFFF;
    border-radius: 5px;
    font-weight: 300 !important;
    width: 100%;
    font-family: "itc-avant-garde-gothic-pro" !important;
}
    .btn-abz:hover {
        background-color: var(--abz-func-default-bg-pseudo-colour);
        color: var(--abz-func-primary-font-pseudo-colour)
    }

    .btn-abz:active:focus {
        background-color: var(--abz-func-default-bg-pseudo-colour);
        color: var(--abz-func-primary-font-pseudo-colour)
    }

.btn-abz-primary {
    background-color: var(--abz-func-primary-bg-colour);
    border: 1px solid var(--abz-func-primary-bg-colour);
    color: var(--abz-func-secondary-font-colour)
}
    .btn-abz-primary:hover {
        background-color: var(--abz-func-primary-bg-pseudo-colour);
        border-color: var(--abz-func-primary-bg-pseudo-colour);
        color: var(--abz-func-secondary-font-pseudo-colour)
    }
    .btn-abz-primary:active:focus {
        background-color: var(--abz-func-primary-bg-pseudo-colour);
        color: var(--abz-func-secondary-font-pseudo-colour)
    }

.btn-abz-no-bg {
    background-color: var(--abz-card-colour);
    border: unset
}
    .btn-abz-no-bg:hover {
        border-color: unset
    }
    .btn-abz-no-bg:active:focus {
        border-color: unset
    }

.btn-loading {
    position: relative;
}

.mini-loader {
    border: 3px solid #D0D4D9;
    border-top: 3px solid #00000000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.7s linear infinite;
    position: absolute;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
}

.btn-loading .mini-loader {
    transition: opacity 0.4s;
    opacity: 0;
}

.btn-loading.isLoading .mini-loader {
    opacity: 1;
}

.btn-loading span {
    transition: opacity 0.4s;
    opacity: 1;
}

.btn-loading.isLoading span {
    opacity: 0;
}

ul {
    list-style-type: none;
    padding: 0 !important
}

.form-check-input:checked {
    background-color: var(--ct-form-check-input-checked-bg-color);
    border-color: var(--ct-form-check-input-checked-border-color);
    accent-color: var(--ct-form-check-input-checked-bg-color);
    color: #fff;
}

input, button, a {
    outline: none !important;
}

/* New */

.form-control.is-invalid,
.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-size: calc(20px) calc(20px);
}

.invalid-feedback {
    font-size: 10px;
    margin-top: 0rem;
}

.p-r {
    position:relative;
}

.form-group-flex-row {
    display: flex;
    flex-direction: row;
}

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

.flex-align-center {
    align-items: center;
}

.flex-content-center {
    justify-content: center;
}

.icon-left .glyphicon {
    margin-right: 13.50px;
    top: 0px;
    font-size: 13.5px;
}

.password-container .glyphicon {
    /* Position */
    position: absolute;
    top: calc((35px/2) - (14.4px/2));
    right: 14.4px;
    /* Cursor */
    cursor: pointer;
    /* Font */
    font-size: 17px;
    /* Dimensions */
    height: 18.4px;
    width: 18.4px;
}

.form-group {
    margin: 22px 0px 22px 0px
}

.form-group.single-field{
    margin: 22px 0px 34px 0px
}

input[type="checkbox"] {
    background-color: #373745;
    border: 1px solid #282837;
}

.container-two-factor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#send-two-factor-email,
#validate-passcode-button,
#skip-two-factor-button,
#resend-passcode-button,
#resend-passcode-button {
    border-radius: 2px;
}

#send-two-factor-email,
#validate-passcode-button,
#skip-two-factor-button,
#resend-passcode-button {
    margin-top: 0;
    width: 149px;
}

#skip-two-factor-button,
#resend-passcode-button {
    border: 0;
}

#forget-password-email-capture,
#forget-password-second-view,
#email-capture-view,
#email-code-view,
#log-in-fourth-view,
#forget-password-third-view {
    /* Visibility */
    display: none;
}

/* This is for the text that will show up alone */
.text-info-mono {
    /* Visibility */
    color: var(--ct-btn-abz-passive-color);
    /* Margin */
    /*margin-top: calc((-1rem - 6px) + 51px); --> OLD */
    margin-top: calc(-17px + 30px);
    /* Font */
    font-family: "itc-avant-garde-gothic-pro" !important;
    font-size: 13px;
    font-weight: 300;
    line-height: 21px;
}

/* This is for text that will show up along with another text*/
.text-info-double {
    /* Visibility */
    color: var(--ct-btn-abz-passive-color);
    /* Margin */
    margin-top: calc((-1rem - 6px) + 30px);
    /* Font */
    font-family: "itc-avant-garde-gothic-pro" !important;
    font-size: 13px;
    font-weight: 300;
    line-height: 21px;
}

    .text-info-double.second-text {
        /* Margin */
        margin-top: calc(30px - 6px);
        margin-bottom: 20px;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.reset-email-error{
    font-size: 11px !important;
    color:var(--ct-abz-warning-new) !important;
}

#back-btn{
    margin-top: 20px;
}