:root {
    --primary-inmate-color: #ae2cff;
    --primary-inmate-hover-color: #9f06ff;
    --primary-inmate-focus-color: rgba(174, 44, 255, 0.5); /* derived from #ae2cff */
    --secondary-inmate-focus-color: #00797B40;
    --primary-staff-color: #4362BC;
    --primary-staff-hover-color: #3953a0;
    --primary-staff-focus-color: rgba(67, 98, 188, 0.5); /* derived from #4362BC */
    --link-staff-color: #4362BC;
    --link-hover-staff-color: rgb(57, 83, 160); /* rounded from #3953a0 */
}
*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'password';
    src: url('../font/password.ttf') format('truetype');
}
input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    border: 1px solid #dc3545;
}

.input-validation-error + .flatpickr-mobile {
    border: 1px solid #dc3545;
}

.inmate-cover {
    height: 100vh;
   
}

@media (min-width: 1201px) {
    .inmate-cover .left-content{
        background: url("../assets/inmate-desktop-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
    }
    .staff-cover .left-content{
        background: url("../assets/staff-desktop-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
    }

    .zurich-staff-cover .left-content {
        background: url("../assets/zurich-staff-desktop-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
    }
    .probationer-cover .left-content{
        background: url("../assets/probationer-desktop-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
    }

    .zurich-inmate-cover .left-content {
        background: url("../assets/zurich-inmate-desktop-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
    }

    .right-content {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .left-content {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .staff-cover .left-content{
        background: url("../assets/staff-tablet-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom left;
        flex: 0 0 60%;
        max-width: 60%;
    }
    .staff-cover .right-content {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .probationer-cover .right-content,.inmate-cover .right-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .probationer-cover.left-content,.inmate-cover .left-content {
        display: none;
    }

    .zurich-inmate-cover .right-content{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .zurich-inmate-cover.left-content {
        display: none;
    }
}


@media (max-width: 768px) {
    .right-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .left-content {
        display: none;
    }
    #forgotPasswordModal .modal-dialog {
        display: flex;
        align-items: center;
        min-height: calc(100% - (.5rem * 2));
    }
}

.right-content {
    position: relative;
}

.page-logo .logo {
    width: 90%;
    max-width: 300px;
}

input.syscon::-ms-reveal {
    display: none !important;
}

input.syscon::-webkit-input-placeholder {
    font-family: sans-serif;
    letter-spacing: 0px;
    font-weight: 100;
}

input.syscon::-moz-placeholder {
    font-family: sans-serif;
    letter-spacing: 0px;
    font-weight: 100;
}

input.syscon:-ms-input-placeholder {
    font-family: sans-serif;
    letter-spacing: 0px;
    font-weight: 100;
}

input.syscon::-ms-input-placeholder {
    font-family: sans-serif;
    letter-spacing: 0px;
    font-weight: 100;
}

input.syscon::placeholder {
    font-family: sans-serif;
    letter-spacing: 0px;
    font-weight: 100;
}

.syscon-logo {
    position: absolute;
    top: 100vh;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding-bottom: 10px
}

.syscon-logo img {
    max-height: 2rem;
}

.login-page {
    height: 100vh;
}

.btn-sign-in.staff {
    background: #4362BC !important;
}

.btn-sign-in.staff:hover {
    background: #3953a0 !important;
    border-color: #364e96 !important;
}

.btn-sign-in.inmate {
    background: #ae2cff !important;
    border-color: #ae2cff !important;
}

.btn-sign-in.inmate:focus-visible {
    text-decoration: underline;
    box-shadow: 0 0 0 0.2rem rgba(174, 44, 255, 0.5);
}

.btn-sign-in.inmate:focus {
    box-shadow: 0 0 0 0.2rem rgba(174, 44, 255, 0.5);
} 

.btn-sign-in.probationer:focus {
    box-shadow: 0 0 0 0.2rem rgba(174, 44, 255, 0.5);
}

.btn-sign-in.inmate:hover {
    background: #9900F8 !important;
    border-color: #9900f8 !important;
}

.btn-sign-in.probationer {
    background: #ae2cff;
    border-color: #ae2cff;
}

.btn-sign-in.probationer:hover {
    background: #9f06ff !important;
    border-color: #9900f8 !important;
}

.form-control {
    background: #dae0e5;
}

a.forgot-password-inmate {
    color: var(--primary-inmate-color) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

    a.forgot-password-inmate:focus-visible {
        outline: var(--primary-inmate-color) solid 1px;
        box-shadow: 0 0 0 0.25rem var(--primary-inmate-focus-color);
        padding: 2px;
        text-decoration: underline !important;
    }

    a.forgot-password-inmate:hover {
        color: var(--primary-inmate-hover-color) !important;
        text-decoration: underline !important;
    }

a.forgot-password-staff {
    color: var(--link-staff-color) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

    a.forgot-password-staff:hover {
        color: var(--primary-staff-hover-color) !important;
        text-decoration: underline !important;
    }

    a.forgot-password-staff:focus-visible {
        outline: var(--primary-staff-color) solid 1px;
        box-shadow: 0 0 0 0.25rem var(--primary-staff-focus-color);
        padding: 2px;
        text-decoration: underline !important;
    }