* .spaced {
    margin-right: 0.3em;
}

.rtv-compliance-status {
    display: inline-flex;
    background-color: rgba(255,165,0,0.2);
    border: 1px solid rgb(255,165,0);
    width: 100%;
    justify-content: center;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 600;
    padding: 0.4375rem 0.25rem;
    border-radius: 3px;
}

.rtv-page-status {
    display: inline-flex;
    background-color: rgba(255,165,0,0.2);
    border: 1px solid rgb(255,165,0);
    width: 100%;
    justify-content: center;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 600;
    padding: 0.4375rem 0.25rem;
    border-radius: 3px;
}

    .rtv-page-status.success {
        background-color: var(--accent-2-bg);
        border-color: var(--accent-2);
    }

.rtv-tooltip-target {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    .rtv-tooltip-target:before {
        content: attr(data-text); /* here's the magic */
        position: absolute;
        /* vertically center */
        top: 50%;
        transform: translateY(-50%);
        /* move to right */
        left: 100%;
        margin-left: 15px; /* and add a small left margin */
        /* basic styles */
        max-width: 250px;
        min-width: 150px;
        padding: 10px;
        border-radius: 10px;
        background: #000;
        color: #fff;
        text-align: left;
        display: none; /* hide by default */
        white-space: normal !important;
        z-index: 10;
    }

    .rtv-tooltip-target:hover:before {
        display: inline-block;
    }

td:has(.rtv-tooltip-target:hover) {
    overflow: initial !important;
}

.rtv-tooltip-target-inline {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

    .rtv-tooltip-target-inline:hover {
        position: absolute;
        display: block;
        overflow: visible;
        text-overflow: unset;
        background-color: var(--neutral-7-variant);
        z-index: 10;
        white-space: break-spaces;
        border-radius: 3px;
        border: 1px solid var(--neutral-6);
        box-shadow: 3px 3px 3px var(--neutral-3);
        margin-top: -1px;
        margin-left: -1px;
    }

    .rtv-single-line-table-rows .rtv-tooltip-target-inline:hover {
        margin-top: -15px;
    }

    .rtv-tooltip-target-inline.rtv-tooltip-target-inline-small:hover {
        width: 100px;
    }

    .rtv-tooltip-target-inline.rtv-tooltip-target-inline-medium:hover {
        width: 150px;
    }

    .rtv-tooltip-target-inline.rtv-tooltip-target-inline-large:hover {
        width: 250px;
    }

td:has(.rtv-tooltip-target-inline:hover) {
    overflow: initial !important;
}

.picker-input {
}

.form-group .contextual-warning {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    color: var(--accent-3);
}

.rtv-required:after {
    content: "*";
}

.card.rtv-log-header > div {
    padding: 5px;
    font-size: 1.2em;
}

    .card.rtv-log-header > div > span {
        padding: 5px;
    }

        .card.rtv-log-header > div > span.rtv-function-create {
            color: var(--accent-2);
        }

        .card.rtv-log-header > div > span.rtv-function-delete {
            color: var(--accent-1);
        }

        .card.rtv-log-header > div > span.rtv-function-update {
            color: var(--accent-4);
        }

.rtv-old-value {
    background-color: var(--accent-1-bg);
}

.rtv-new-value {
    background-color: var(--accent-2-bg);
}

.rtv-home-welcome {
    display: flex;
    width: 100%;
    padding: 10px;
    color: var(--primary-1);
    justify-content: center;
}

.rtv-widget-dock {
    display: block;
    width: 100%;
    border-color: var(--neutral-5);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
}

.rtv-widget-dock-header {
    display: block;
    width: 100%;
    background-color: var(--neutral-6);
    padding: 10px;
    border-color: var(--neutral-5);
    border-radius: 5px 5px 0px 0px;
    border-bottom-width: 1px;
    color: var(--primary-1);
    font-size: 1.2em;
    font-weight: bold;
}

.rtv-widget-dock-subheader {
    background-color: var(--neutral-6);
    padding: 10px;
}

.rtv-widget-dock-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 10px;
}

.rtv-widget-container {
    display: flex;
    flex: content;
    flex-direction: column;
    padding: 5px;
    border-color: var(--neutral-5);
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
}

.rtv-widget-header {
    display: block;
    width: 100%;
    background-color: var(--neutral-6);
    padding: 10px;
    border-color: var(--neutral-5);
    border-radius: 5px 5px 0px 0px;
    border-bottom-width: 1px;
    color: var(--primary-1);
    font-size: 1.2em;
    font-weight: bold;
}

.rtv-widget-content {
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
}

.rtv-widget-legend {
    max-width: 100%;
}

/*.btn.btn-primary.rtv-button-highlighted { START AB#4940 
    background-color: var(--neutral-3);
}

.btn.btn-secondary.rtv-button-highlighted {
    background: var(--primary-1);
    color: var(--primary-4);
}
END AB#4940 */
.rtv-button-icon {
    margin-right: 3px;
    color: var(--primary-4);
}

.rtv-roster-plan-staff {
    margin-left: 1.7em;
    margin-right: 1.7em;
}

.rtv-roster-plan-grid {
    padding: 10px;
}

.rtv-roster-plan-allocate-header {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 1.6em;
}

.rtv-roster-plan-allocate-toolbar {
    width: 100%;
    text-align: right;
    justify-content: right;
    margin-bottom: -1.6em;
}

.rtv-work-pattern-header {
    border-bottom: 1px solid var(--preview-card-border-color);
    margin: 0;
    padding: 1.5rem 1.5rem;
}

/* Utilised to ensure the pie charts centre their content properly */
.rtv-pie-chart {
    justify-content: center;
    width: 100%;
}

/* Utilised to ensure the pie charts centre their content properly */
.dx-chart.align-self-stretch.flex-fill.dx-visibility-change-handler {
    display: flex;
    justify-content: center;
}

.rtv-form-group > .card {
    border: 1px solid var(--neutral-6);
    border-radius: 5px;
}

    .rtv-form-group > .card > .card-header {
        background-color: var(--neutral-6);
        font-size: 1em;
        font-weight: bold;
        padding: 0.25rem;
    }

    .rtv-form-group > .card > .row {
        width: 100%;
        font-size: 0.8em;
        padding: 15px;
        max-height: 250px;
        overflow-y: scroll;
        margin: 0 0 0 0 !important;
    }

/* Used content the my-rota, rota view 
.rtv-my-rota-week-label {
    background-color: var(--accent-4-bg);
    font-weight: 600;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rtv-module-content-centred {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .rtv-module-content-centred .rtv-cell-filling-button {
        height: 100%;
    }

    .rtv-module-content-centred .dxbs-grid-empty-cell {
        width: 0;
    }

    .rtv-module-content-centred th * {
        justify-content: center;
        font-weight: bold !important;
        font-size: 16px;
    }


/* START AB#4759 Making rota cell button heights fill the td 
.rtv-cell-filling-button {
    height: 100%;
}
.rtv-unenrolled-shift {
    box-shadow: inset 0 0 0 4px #c4cdc4;
}
/* END AB#4759 */

/* { AB#4989 Fix numeric input boxes in Allocate Staff form */
.rtv-zero-pad-input input {
    padding: 0 !important;
}
/* } AB#4989 Fix numeric input boxes in Allocate Staff form */

.rtv-content-area {
    width: 100%;
    display: flex;
    align-content: center;
    flex-flow: column wrap;
}

.rtv-cw-600 {
    width: 600px;
}

.rtv-cw-800 {
    width: 800px;
}

.rtv-cw-1000 {
    width: 1000px;
}

.rtv-cw-40vw {
    width: 40vw;
}

.rtv-cw-50vw {
    width: 50vw;
}

.rtv-cw-60vw {
    width: 60vw;
}

.rtv-cw-70vw {
    width: 70vw;
}

.rtv-cw-80vw {
    width: 80vw;
}

.rtv-cw-90vw {
    width: 90vw;
}

.rtv-notification-container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    align-items: center;
    gap: 0.5vh;
    padding-top: 0.2vh;
}

.rtv-notification-control {
    width: 100%;
    justify-content: right;
    display: flex;
    flex-flow: row wrap;
    gap: 0.3vw;
}

.btn.btn-primary.rtv-notification-button {
    font-size: 0.85em;
}

.rtv-notification {
    width: 40vw;
    padding: 0.5vw;
    border-radius: 5px;
    border: 1px solid transparent;
}

.rtv-notification:hover {
    border: 1px solid var(--accent-6);
}

    .rtv-notification.rtv-notification-dropdown {
        width: 100%;
        font-size: 0.8em;
    }

.rtv-notification-top-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.rtv-notification-unread {
    font-weight: bold;
    background-color: var(--accent-4-bg);
}

.rtv-notification-unread > .rtv-notification-top-row > h6 {
    font-weight: bold;
}

.rtv-notification-linked {
    cursor: pointer;
}

.rtv-notification-unread:hover {
    background-color: var(--accent-6-bg);
}

.rtv-notification-bell-container {
    background-color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.rtv-notification-bell-icon {
    font-size: 2em;
}

.rtv-notification-bell-container.rtv-notification-unread:after {
    content: attr(data-count);
    width: 18px;
    height: 14px;
    color: var(--primary-4);
    background-color: red;
    border-radius: 7px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 20px;
    margin-top: -10px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rtv-notification-bell-dropdown-header {
    background-color: var(--neutral-9) !important;
    padding: 0.2rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rtv-notification-bell-dropdown-footer {
    background-color: var(--neutral-9) !important;
    padding: 0.4rem !important;
}

.dxbl-grid .dxbl-grid-table .dxbl-grid-detail-cell {
    padding: 0.5rem 3rem 1.75rem 4rem;
}