/* Set the corporate font across the whole body */

body {
    font-family: 'Segoe UI', chevinMedium, Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/Segoe UI.woff2');
}

@font-face {
    font-family: chevinMedium;
    src: url("../images/chevin-medium-webfont.woff");
}

.underline {
    text-decoration: underline;
}

.logo {
    width: 123.1px;
    height: 39.9px;
    margin: 10px;
}

/* Setup grid */
.k-alt.k-table-row.k-table-alt-row {
    background-color: rgba(106, 15, 142, 0.2);
}

.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
    background-color: #6A0F8E;
    color: white;
}

/* Grid popups number styling */
.bold-font {
    font-weight: bold;
}

.matchedRow {
    color: white;
    background-color: rgba(124, 93, 137, 1) !important;
}

/* Reset the Button Width and Height */
.k-grid tbody .k-button:not(.k-spinner-increase):not(.k-spinner-decrease) {
    min-width: 32px;
    min-height: 32px;
}

/* Setup the sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100; /*Behind the navbar and the bottombar*/
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    transition: .25s linear;
}

.sidebar-indicator {
    min-width: 25px;
    min-height: 32px;
    position: absolute;
    right: 0px;
    top: 59px;
    cursor: pointer;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: none;
    transition: transform 0.25s;
    z-index: 1;
    margin-top: 10px;
}

.sidebar-indicator-active {
    transform: rotate(0.5turn);
    right: -30px;
    margin-top: 10px;
}

.sidebar-active {
    transition: .25s linear;
    left: -17%;
}

.main-sidebarInactive {
    margin-left: 0 !important;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    margin-top: 48px;
    height: calc(100vh - 48px);
    padding-top: 2rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    padding: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.sidebar .nav-link:hover {
    font-weight: 500;
    color: rgba(160, 147, 219, 1);
}

.sidebar .nav-link.active {
    color: rgba(106, 15, 142, 1);
}

    .sidebar .nav-link.active:hover {
        color: rgba(160, 147, 219, 1);
    }

.sidebar .nav-link.indented {
    padding-left: 26px !important;
}

.sidebar-heading {
    font-weight: bold !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.dropdown-custom {
    width: 90%;
    padding-left: 5%;
}

.fas {
    display: inline-block;
    text-align: center;
}

em.fas {
    width: 30px;
}

/* Content */

[role="main"] {
    padding-top: 5rem;
    padding-bottom: 50px;
    max-height: 94vh;
}

/* Setup the navbar */

/*#region Override bootstrap colours*/
.navbar-imp {
    background-color: #261342 !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #A093DB;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #A093DB;
    text-decoration: none;
    background-color: #fff;
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: 1.5rem !important;
}
/*#endregion*/

.navbar-custom {
    background-color: rgba(124, 93, 137, 1);
}

.navbar-nav-custom {
    display: inline;
}

.nav-item-custom {
    display: inline;
    padding-left: 1em
}

.nav-link-custom {
    color: rgba(255, 255, 255, 1);
    display: inline;
}

.nav-link-custom:hover {
    color: rgba(160, 147, 219, 1);
    cursor: pointer;
}

/* Setup the bottombar */
.bottombar {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
    z-index: 200; /* Behind the navbar but in front of the sidebar */
}

/* Things used in JS */
.disabledFormat:nth-child(even) {
    background-color: #bfbfbf !important;
}

.disabledFormat:nth-child(odd) {
    background-color: lightgray !important;
}

.scenarioValue {
    color: green;
}

.hidden {
    display: none !important;
}

/*#region Standard grid button colours */
[class^="k-grid-"].k-button.k-icon-button, .k-grid-column-menu.k-grid-header-menu.k-active, .k-button.k-button-solid-primary {
    background-color: #261342;
    border-color: #261342;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}

[class^="k-grid-"].k-button.k-icon-button:hover, .k-grid-column-menu.k-grid-header-menu.k-active:hover, .k-button.k-button-solid-primary:hover {
    background-color: #6A0F8E;
    border-color: #6A0F8E;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}
/*#endregion*/

/*#region Standard grid disable/delete button colours */
[class^="k-grid-"].k-button.k-icon-button.btn-danger {
    background-color: #bd2130;
    border-color: #b21f2d;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}

[class^="k-grid-"].k-button.k-icon-button.btn-danger:hover {
    background-color: #bd2130;
    border-color: #b21f2d;
    box-shadow: none;
    color: white;
}
/*#endregion*/

/*#region Standard grid selected impersonate button colours */
[class^="k-grid-"].k-button.k-icon-button.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}

[class^="k-grid-"].k-button.k-icon-button.btn-warning:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}
/*#endregion*/

/*#region Standard grid enable button colours */
[class^="k-grid-"].k-button.k-icon-button.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    box-shadow: none;
    border-radius: 4px;
}

[class^="k-grid-"].k-button.k-icon-button.btn-success:hover {
    background-color: #28a745;
    border-color: #28a745;
    box-shadow: none;
    color: white;
}
/*#endregion*/

/*#region Kendo overrides */
.k-panelbar > li.k-state-default > .k-link.k-state-hover {
    color: white;
}

.k-pager.k-grid-pager .k-pager-numbers > .k-button-flat-primary {
    color: #515967;
}

.k-pager.k-grid-pager .k-pager-numbers:hover {
    background-color: rgb(224, 224, 224) !important;
}

.k-pager.k-grid-pager .k-pager-numbers .k-selected {
    background-color: #261342 !important;
    color: white;
}

.k-pager.k-grid-pager .k-pager-numbers > .k-button-flat-primary .k-selected:hover {
    background-color: #6A0F8E !important;
    color: white !important;
}

.k-panelbar > .k-item > .k-link.k-selected, .k-panelbar > .k-panelbar-header > .k-link.k-selected,
.k-panelbar > .k-item > .k-link.k-selected:hover, .k-panelbar > .k-panelbar-header > .k-link.k-selected:hover {
    background-color: #261342;
    border-color: #261342;
    color: #fff;
}

k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link,
k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected.k-hover .k-link {
    background-color: #261342;
    border-color: #261342;
    color: #fff;
}

.k-calendar > .k-footer > .k-calendar-nav-today {
    background-color: #261342 !important;
    border-color: #261342 !important;
    color: #fff !important;
}

.k-calendar > .k-header > .k-calendar-nav-prev:hover,
.k-calendar > .k-header > .k-calendar-nav-fast:hover,
.k-calendar > .k-header > .k-calendar-nav-next:hover {
    background-color: rgb(219, 222, 229) !important;
    border-color: rgb(204, 204, 205) !important;
    color: rgb(81, 89, 103) !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: #261342;
    color: #fff;
}

.k-list-item.k-selected.k-hover, .k-list-item.k-selected:hover, .k-selected.k-hover.k-list-optionlabel, .k-selected.k-list-optionlabel:hover {
    background-color: #261342;
    color: #fff;
}
/*#endregion*/

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Standard size QR code */
img.qr-standard {
    height: 150px;
    width: 150px;
}

.hideLoading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.showLoading {
    display: block;
    z-index: 9999;
}

.msg-format {
    font-weight: bold;
    font-size: 16px;
}

/*#region Forecast Detail */
.forecast-detail {
    padding: 5px;
}

.forecast-detail.forecast-detail-with-bg {
    background-color: rgba(106, 15, 142, 0.2);
}

.forecast-detail.forecast-detail-width-120 {
    width: 120px;
}

.forecast-detail.forecast-detail-width-130 {
    width: 130px;
}

.forecast-detail.forecast-detail-width-200 {
    width: 200px;
}

.forecast-detail.forecast-detail-width-250 {
    width: 250px;
}
/*endregion*/

/*region Contract Details/Editor */
.contract-detail {
    padding-left: 10px;
    padding-bottom: 10px;
}

.contract-detail.contract-detail-label {
    background-color: rgba(106, 15, 142, 0.2);
    width: 130px;
}

.contract-details.contract-detail-input-first-column {
    padding-left: 10px;
}

.contract-details.contract-detail-input-250 {
    width: 250px;
}
/*#endregion*/

/*#region Scenario Row Actuals Editor */
.scenario-row-actuals {
    padding-left: 10px;
    padding-bottom: 10px;
}

.scenario-row-actuals.scenario-row-actuals-label {
    background-color: rgba(106, 15, 142, 0.2);
    width: 130px;
}

.scenario-row-actuals.scenario-row-actuals-input {
    padding-right: 10px;
}
/*#endregion*/

.leave-type-pop-up {
    position: relative;
}

.leave-type-edit-button {
    position: absolute;
    right: 0;
}

#table-leave-types {
    margin-bottom: 1em;
}

#table-leave-types th {
    padding: 0.5em;
}

#table-leave-types td {
    padding: 0.5em;
}

#table-leave-types-rates {
    border: 1px solid #ceced2;
}

#table-leave-types-rates thead {
    background-color: #f3f3f4;
}

#table-leave-types-rates thead th {
    padding: 0.5em;
    border: 1px solid #ceced2;
}

#table-leave-types-rates tbody td {
    padding: 0.5em;
    border: 1px solid #ceced2;
}

#staff-detail-appointment {
    position: relative;
    right: 0;
}

.sm-det-label {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 30%;
    background-color: rgba(106, 15, 142, 0.2);
    vertical-align: top;
}

.sm-det-field {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 70%;
}

.row-command-empty {
    line-height: 1.6em;
    display: inline-block;
    content: " ";
    height: 36px;
    padding: .4em .6em;
}

.calcTable {
    padding-top: 1em;
    padding-right: 1em;
}

#calcDiv {
    word-break: break-all;
}

.ns-info {
    color: red;
    display: none;
}

.main-custom {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 5px;
}

.main-custom .i-snapshot {
    position: absolute;
    right: 30px;
    color: #7c5d89;
    cursor: pointer;
    top: 90px;
    font-size: 24px;
}

.main-custom .button-pbi-fullscreen {
    position: absolute;
    right: 30px;
    top: 90px;
}

.numeric-column {
    text-align: right !important;
}

.snapshot-tapstrip {
    height: 350px;
}

.snapshot-tap-1 {
    min-height: 200px;
}

.window-snapshot-title {
    overflow: visible;
}

.window-snapshot-title-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    min-width: 95%;
}

.importFileMessageContainer {
    padding-bottom: 24px;
}

.ns-editor-0 {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 130px;
    background-color: rgba(106, 15, 142, 0.2);
}

.ns-editor-1 {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 260px
}

div.k-window {
    padding: 0 !important;
}

.k-window-title {
    overflow: visible;
}

.k-wizard-buttons {
    margin-bottom: 50px;
}

.wizard-results-table {
    width: 100%;
}

.wizard-results-header {
    width: 100%;
    margin-bottom: 24px;
}

.wizard-results-table > thead > tr {
    background-color: rgba(239, 239, 240, 0.7);
}

.wizard-results-row {
    padding: 10px;
    width: 90%;
}

.wizard-results-row > th {
    width: 23%;
}

.wizard-results-row > td {
    width: 23%;
}

.wizard-results-table > tbody > tr:nth-child(even) {
    background-color: rgba(106, 15, 142, 0.2);
}

.wizard-date-error {
    color: red;
}

.wizard-confirm-data-container {
    width: 100%;
    min-height: 50vh;
}

.wizard-close-icon-container {
    display: flex;
    justify-content: flex-end;
    margin: 24px;
}

.wizard-close-icon {
    color: #2E145D;
}

.wizard-close-icon:hover {
    cursor: pointer;
    color: #6A0F8E;
}

.k-stepper .k-step-current .k-step-indicator,
.k-stepper .k-step-done .k-step-indicator {
    background-color: #2E145D;
    border-color: #2E145D;
}

.k-stepper .k-step-current.k-hover .k-step-indicator,
.k-stepper .k-step-current.k-step-hover .k-step-indicator,
.k-stepper .k-step-current:hover .k-step-indicator,
.k-stepper .k-step-done.k-hover .k-step-indicator,
.k-stepper .k-step-done.k-step-hover .k-step-indicator,
.k-stepper .k-step-done:hover .k-step-indicator {
    background-color: #6A0F8E;
    border-color: #6A0F8E;
}

.k-stepper .k-step-done.k-disabled .k-step-indicator, .k-stepper .k-step-done.k-step-disabled .k-step-indicator, .k-stepper .k-step-done:disabled .k-step-indicator {
    background-color: #2E145D;
    border-color: #2E145D;
}

.k-stepper .k-progressbar .k-selected {
    background-color: #2E145D;
    border-color: #2E145D;
}

.k-grid .input-validation-error {
    background-color: transparent;
}

#no-permission-to-edit-message {
    font-size: 70%;
}

/* Password validation screen styles */
#validatonMessage {
    display: none;
    background: #f8f9fa;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
}

#validatonMessage p {
    padding: 0px 10px;
    font-size: 16px;
}

/* Add a green text color and a checkmark when the requirements are right */
#validatonMessage .valid {
    color: #198754 !important;
}

#validatonMessage .valid:before {
    position: relative;
    left: -10px;
    content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
#validatonMessage .invalid {
    color: #dc3545 !important;
}

#validatonMessage .invalid:before {
    position: relative;
    left: -10px;
    content: "✖";
}

/* Set checkboxes to the theme secondary colour */
.k-checkbox:checked, .k-checkbox.k-checked {
    background-color: #6A0F8E;
    border-color: #6A0F8E;
}

.k-checkbox.k-checked.k-focus, .k-checkbox:checked:focus {
    box-shadow: 0 0 0 2px rgba(106, 15, 142, .3);
}

/* Override the dropdown lists selected items background colour */
.k-list-item.k-selected.k-focus {
    background-color: #261342;
}

.buttonDiv {
    padding-top: 10px;
    float: right;
}

.quick-calculator-table {
    margin-bottom: 10px;
}

.quick-calculator-label {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 130px;
    background-color: rgba(106, 15, 142, 0.2);
}

.quick-calculator-input {
    padding-left: 10px;
    padding-bottom: 10px;
    width: 260px;
}

.quick-calculator-button {
    background-color: #261342;
    border-color: #261342;
    color: white;
    width: 240px;
}

.quick-calculator-button:hover {
    background-color: #6A0F8E;
    border-color: #6A0F8E;
}

.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
    color: #261342;
}

/* Used in the Account pages to override some bootstrap buttons*/
.btn-planner {
    background-color: #261342;
    border-color: #261342;
    color: white;
}

.btn-planner:not(:disabled):not(.disabled).active,
.btn-planner:not(:disabled):not(.disabled):active,
.btn-planner:active, .btn-planner:focus, .btn-planner:hover {
    background-color: #6A0F8E !important;
    border-color: #6A0F8E !important;
    color: white;
}

.btn-planner:not(:disabled):not(.disabled).active, .btn-planner:active,
.btn-planner.focus, .btn-planner:focus,
.btn-planner:not(:disabled):not(.disabled).active:focus, .btn-planner:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(106, 15, 142, 0.2);
}

input.form-control:active,
input.form-control:focus {
    border-color: rgb(206, 212, 218);
    box-shadow: 0 0 0 0.2rem rgba(106, 15, 142, 0.2);
}

input[type=checkbox]:checked {
    accent-color: #6A0F8E;
    background-color: #6A0F8E;
    border-color: #6A0F8E;
}

#staff-detail-actions > button {
    margin-left: 8px;
}

/* Kendo grid container needs to set a height in pixels and the child grid is then 100% of its available height */
.grid-container {
    height: calc(100vh);
}

.grid-container #grid {
    height: 100%;
}

.grid-container [data-role=grid] {
    height: 100%;
}

/* There are bugs in Telerik resizing the grid content properly around tabstrips so need to override the style */
.k-tabstrip-content .grid-container .k-grid-content {
    height: 100% !important;
}

.k-tabstrip-content .grid-container .k-grid-content-locked {
    height: 100% !important;
}

.k-edit-form-container {
    height: 100% !important;
}

#calculation-messages, #pageTitleFromLayout, #information-bottom {
    overflow: hidden;
}

div.k-grid td {
    line-height: 30px;
}

#pbi-report-container {
    height: 100%;
}

#pbi-refresh-window {
    height: 130px;
    width: 500px;
}

#staffmember-tabstrip {
    height: 100% !important;
}

/* Prevents ellipsis / overflow in Wizard breadcrumbs when wizard title exceeds its container */
.k-step-list-horizontal .k-step-link {
    max-width: 100%;
}

/* Prevents ellipsis / overflow in Wizard breadcrumbs when wizard title exceeds its container */
.k-stepper .k-step-label .k-step-text {
    max-width: 100%;
    overflow: unset;
    text-overflow: unset;
}

.k-checkbox:disabled {
    background-color: #E5E5E5;
}

.error-message {
    color: red;
}

.success-message {
    color: green;
}

.flex-container {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.flex-container label {
    display: block !important;
}


label[for="staffMemberCopyWizardStartDateForm"] {
    font-weight: bold
}

.benchmark-submission-step-description {
    font-weight: bold;
    margin-bottom: 1em;
}

.benchmark-submission-question-group-title {
    font-weight: bold;
    margin-bottom: 1em;
}

.benchmark-submission-question-sub-group-title {
    max-width: 70%;
    display: inline-block;
}

.benchmark-submission-question-group {
    margin-left: 1% !important;
    margin-right: 24% !important;
}

.benchmark-submission-question-sub-group {
    display: inline-block;
    margin-left: 1% !important;
    margin-right: 24% !important;
}

.benchmark-submission-question-sub-group-inner {
    max-width: 100%;
    float: inline-end;
    margin-left: 1% !important;
    margin-bottom: 1em;
}

.benchmark-submission-question {
    margin-bottom: 1.5em;
}

.benchmark-submission-question-answer.percentage {
    max-width: 100px !important;
    min-width: 100px !important;
    float: inline-end !important;
}

.benchmark-submission-question-answer.boolean {
    max-width: 150px !important;
    max-width: 150px !important;
    float: inline-end !important;
}

.benchmark-submission-question-answer.option {
    max-width: 750px !important;
    max-width: 500px !important;
    float: inline-end !important;
}

table.benchmark-submission-table {
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
}

th.auto {
    width: auto !important;
}

th.skinny {
    width: 1% !important;
}

th.narrower {
    width: 6.25% !important;
}

th.narrow {
    width: 12.5% !important;
}

th.medium {
    width: 25% !important;
}

th.wide {
    width: 50% !important;
}

wrap-text {
    word-wrap: break-word !important;
}

#criteria-met-header {
    text-align: center;
}

.minireport-button {
    margin-left: 5px;
}

#criteria-met-icon {
    text-align: center;
}

#softvalidation-data-header {
    text-align: center;
}

#softvalidation-confirm-header {
    text-align: center;
}

input[id*="softvalidationcheckbox-"] {
    margin-left: 15px;
}

/*
    Custom pop-ups/windows don't size correctly so the CSS needs to be overridden.
    To reduce the risk of un-expected consequences this is limited to windows containing only a specifie container.
    This means we can be sure the CSS only applies when opted into.
*/
.k-window:has(.window-popup) {
    /* Telerik computes the window sizes based on some rules which result in it being too large to fit the viewport */
    height: 90vh !important;
    width: 90vw !important;
    /* Ensures that any margin that Telerik might have computed are thrown away */
    margin: auto !important;
    padding: 0;
    /* Telerik computes the position of the window as initial load so on windo resize this causes issues */
    left: 5vw !important;
    top: 5vh !important;
}

.dialog {
    width: 100%;
}