.tooltip .tooltip-inner {
    max-width: 500px !important;
    min-width: 250px !important;
}



/*
 * Non-production environment banding. These three colours previously lived in
 * the $environment array in the header partial and were emitted as inline
 * styles; the partial now only picks a slug, so the colours live here alone.
 */
.app-header--env-sandbox {
    border-top: 6px solid #0000ff !important;
}

.app-header--env-staging {
    border-top: 6px solid #8950fc !important;
}

.app-header--env-uat {
    border-top: 6px solid #ffa500 !important;
}

.badge-env-sandbox {
    background-color: #0000ff;
}

.badge-env-staging {
    background-color: #8950fc;
}

.badge-env-uat {
    background-color: #ffa500;
}


/*
 * Notifications dropdown header artwork. As an inline style the URL was
 * document-relative, so it 404'd on any nested route such as
 * /employees/view/{id}; resolved against this stylesheet it is stable.
 */
.menu-header-bg {
    background-image: url("../media/misc/menu-header-bg.jpg");
}


/*
 * Bootstrap's .text-break is word-wrap: break-word, which will not split a
 * long unbroken address, so the account menu needs its own utility.
 */
.text-break-all {
    word-break: break-all;
}


/*
 * Authentication pages (sign-in, password reset, two-factor). The card is centred on a
 * brand-coloured field rather than the theme's near-white body, which previously left the
 * form floating in the right half of an otherwise empty page. Colours resolve from
 * --bs-primary so each instance stylesheet repaints the screen with its own brand.
 */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1.25rem;
    background-color: var(--bs-primary);
    background-image:
        radial-gradient(115% 85% at 12% 0%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .32) 100%);
}

/*
 * The sign-in screen alone is painted a flat deep navy; the remaining auth pages keep the
 * instance brand colour above.
 */
.auth-page--login {
    background-color: #0B1F3A;
    background-image: none;
}

.auth-card {
    width: 100%;
    max-width: 27.5rem;
    padding: 2.75rem 2.5rem 2.5rem;
    border-radius: 1.25rem;
    background-color: #ffffff;
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .22);
}

.auth-logo {
    height: 104px;
    width: auto;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-gray-900);
}

.auth-subtitle {
    font-size: .95rem;
    color: var(--bs-gray-600);
}

.auth-card .form-label {
    font-weight: 600;
    color: var(--bs-gray-700);
}

.auth-card .form-control {
    height: calc(1.5em + 1.5rem + 2px);
}

.auth-card .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}

/* Rules either side of the "or" separating single sign-on from the credentials form. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-gray-500);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-gray-300);
}

/* Room for the reveal button so a long password does not run underneath it. */
.auth-card .auth-password-input {
    padding-right: 3rem;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: .35rem;
    border: 0;
    background: transparent;
    line-height: 1;
    color: var(--bs-gray-600);
}

.auth-password-toggle:hover {
    color: var(--bs-gray-900);
}

/*
 * The database a local build is pointed at, shown beside the username label. It is a
 * developer aid, so it sits back from the label rather than competing with it.
 */
.auth-env-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
    font-size: .7rem;
    font-weight: 600;
    vertical-align: 1px;
}

.auth-footer {
    margin-top: 1.75rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 2rem 1.5rem;
    }
}
div.your-shift-today {
    background: linear-gradient(135deg, #00205B   0%, #00205B  100%);
}




.show-shift-detail {
    /*text-decoration: underline !important;*/
    /*color: var(--bs-gray-700)  !important;*/
}

.show-shift-detail:hover {

    /*font-weight: bold !important;*/
}

.hide-shift-detail {
    /*text-decoration: underline !important;*/
    /*color: var(--bs-gray-700)  !important;*/
}

.hide-shift-detail:hover {

    /*font-weight: bold !important;*/
}


.pending-approval {
    color: #e65c00;
}


.schedule, .schedulelegend {
    background-color: rgb(238, 237, 248);
    color: rgb(60, 52, 137);
    padding: 5px 10px 5px 10px;
}

.schedule.no-activity {
    background-color: #fff;
}

.payrollcodes.no-activity {
    background-color: #fff;
}

.punches.no-activity {
    background-color: #fff;
}


.punches, .puncheslegend {
    /*border-left: 3px solid rgb(60, 52, 137);*/

    background-color: var(--bs-gray-200);


    padding: 5px 10px 5px 10px;
}

.payrollcodes, .payrollcodeslegend {

    /*    border-left: 3px solid var(--bs-gray-700);*/

    background-color: #FFF8E6;
    padding: 5px 10px 5px 10px;
}


/* --bs-text-* variables do not exist; these statuses previously rendered with no colour. */
.payrollcodestatus0 {
    color: var(--bs-warning);

}

.payrollcodestatus1 {
    color: var(--bs-success);
}

.payrollcodestatus2 {

}

.payrollcodestatus3.adjustment {
    color: var(--bs-warning);
}

.payrollcodes-wrapper .system-generated, .system-generated .adjustment-icon {
    color: var(--bs-gray-500);
}

/* Days outside the pay period read as out of range rather than as missing data. */
.calendar-date-card.is-outside-period {
    background-color: var(--bs-gray-100);
}

.calendar-weekday-heading {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-gray-500);
}

.timesheet-object-label {
    color: var(--bs-gray-500);
}

.in-office {
}

.remote-login {
    border: 1px dashed #bbb !important;
    padding: 2px !important;
}