:root {
    --theme-font-size: 14px;
    --theme-title-padding: 50px 0 40px 15px;
    --theme-title-size: 40px;
    --theme-h2-size: 32px;
    --theme-h3-size: 22px;
    --theme-h4-size: 18px;
    --theme-h5-size: 16px;
    --theme-subtitle-size: 40%;
    --theme-title-margin: 0 0 10px 0;

    --theme-color-body-bg: #f9f9f9;

    --theme-header-bg: #fff;

    --theme-footer-bg: #313131;
    --theme-footer-text: #FFF;

    --theme-title-color-primary: var(--theme-text-dark);
    --theme-title-color-secondary: var(--theme-text-dark);
    --theme-title-color-alternate: #FFF;
    --theme-title-bg: #FFF;
    --theme-title-alignment: start;

    --theme-text-dark: #313131;
    --theme-text-light: #FFF;

    --theme-navbar-width: 82%;
    --theme-container-width: 82%;

    --theme-navbar-bg: #fff;
    --theme-navbar-color: var(--theme-primary);
    --theme-navbar-hover-color: var(--theme-primary);
    --theme-navbar-hover-bg: ;

    --theme-table-header-bg: var(--theme-color-body-bg);
    --theme-table-header-color: var(--theme-text-dark);
    --theme-table-border: 1px solid #f5f5f5;
    --theme-table-border-bottom: #ededed;
    --theme-table-zebra-bg: white;
    --theme-pager-bg: var(--theme-secondary);
    --theme-table-hover-bg: var(--theme-tertiary);
    --theme-table-ordered-bg: var(--theme-table-header-bg);

    --theme-modal-title-padding: 5px 0;

    --theme-menu-border: 3px solid var(--theme-tertiary);
    --theme-menu-hover-border: 3px solid var(--theme-secondary);

    --theme-tab-color: var(--theme-primary);
    --theme-tab-hover-color: var(--theme-primary);
    --theme-tab-active-color: var(--theme-primary);
    --theme-tab-bg: var(--theme-color-body-bg);
    --theme-tab-hover-bg: var(--theme-highlight-light);
    --theme-tab-border-color: var(--theme-tertiary);
    --theme-tab-active-bg: transparent;
    --theme-tab-active-border-color: var(--theme-secondary);

    --theme-label-color: var(--theme-primary);

    --scrollbar-width: 0px;

    --bs-border-radius-sm: 0;
    --bs-border-radius: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-table-bg: var(--theme-color-body-bg);

    --theme-tile-box-shadow: unset;
    --theme-tile-font-weight: bold;
    --theme-tile-hover-filter: unset;
    --theme-tile-hover-color: var(--theme-tile-color);
    --theme-tile-separator-color: var(--theme-tile-color);
    --theme-tile-separator-hover-color: var(--theme-tile-color);
    --theme-tile-active-color: var(--theme-tile-color);

    /* Hover colour not set to give greater controls on when it applies */
    --theme-link-hover-color: var(--theme-link-color);

    --vw-actual: calc(100vw - var(--scrollbar-width));
}

.btn {
    --theme-btn-success-bg: var(--bs-success);
    --theme-btn-success-hover-bg: white;
    --theme-btn-success-color: white;
    --theme-btn-danger-bg: var(--bs-danger);
    --theme-btn-danger-color: white;
    --theme-btn-danger-hover-bg: white;
    --theme-btn-primary-bg: var(--bs-primary);
    --theme-btn-primary-color: white;
    --theme-btn-primary-hover-bg: white;
    --theme-btn-secondary-bg: var(--bs-secondary);
    --theme-btn-secondary-color: white;
    --theme-btn-secondary-hover-bg: white;
    --theme-btn-warning-bg: var(--bs-warning);
    --theme-btn-warning-color: black;
    --theme-btn-warning-hover-bg: white;
    --theme-btn-info-bg: var(--bs-info);
    --theme-btn-info-color: black;
    --theme-btn-info-hover-bg: white;
    --theme-btn-icon-margin: 0.2rem;
}


/*
----- Site Wide Overrides -----
Any site wide overrides that are theme specific, e.g. custom styling on h1 tags.
 */
h1 {
    font-weight: 600;
}

h1:not(.no-style) {
    --header-padding-x: calc(((100% - var(--theme-container-width))/2) + (var(--bs-gutter-x) * .5));
    max-width: var(--vw-actual);
    width: var(--vw-actual);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(var(--vw-actual)/2 * -1) !important;
    margin-right: calc(var(--vw-actual)/2 * -1) !important;
}

h1:not(.no-style) > span {
    display: block;
    width: var(--theme-container-width);
    margin-right: auto;
}

/*Theme 6 table styling overrides*/
table.list th {
    font-weight: bold;
    border-bottom: 1px solid var(--theme-table-border-bottom);
}


/* Bootstrap pagination overrides for datatables */
.pagination {
    --bs-pagination-color: var(--theme-link-color);
    --bs-pagination-bg: var(--theme-color-body-bg);
    --bs-pagination-disabled-bg: var(--theme-color-body-bg);
    --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 50%;
    --bs-pagination-hover-color: var(--theme-link-color);
    --bs-pagination-hover-bg: var(--theme-pager-bg);
    --bs-pagination-active-color: var(--theme-link-color);
    --bs-pagination-active-bg: var(--theme-pager-bg);
    --bs-pagination-focus-color: var(--theme-link-color);
    --bs-pagination-focus-bg: var(--theme-pager-bg);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-disabled-color: gray;
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
}

/*Set paging container as right aligned, bold font and no background color*/
.paging {
    text-align: right;
    font-weight: bold;
    background-color: unset;
}

/*Set paging links (numbers) font weight normal and circular.*/
.paging a span {
    margin-right: 0;
}

.pagination .page-item .page-link,
.paging a, .paging span.current {
    text-align: center;
    font-weight: normal;
    display: inline-block;
    padding-top: 0.1em;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    margin-right: 0;
    text-decoration: none;
}

.pagination .page-item .page-link {
    margin-right: 0.25rem;
}

/*Override for dashboard v2 alerts*/
.paging.view-all a {
    font-weight: bold;
    border-radius: 0;
    width: auto;
    height: auto;
    text-decoration: underline;
}

/*Set pager hovers as green background and normal text.*/
.paging a:hover {
    background-color: var(--theme-pager-bg);
}

/*Set current page as bold, and have background highlight and round.*/
.paging span.current {
    font-weight: bold;
    color: var(--theme-link-color);
    background-color: var(--theme-pager-bg);
}


@media (min-width: 992px) {
    h1:not(.no-style) > span {
        margin-left: calc((100% - var(--theme-container-width))/2);
    }
}

h1:not(.no-style) small {
    display: block;
    margin-top: 30px;
}

.form-group label {
    color: var(--theme-label-color);
}

#dashboard .accordion-button {
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
}

#content p {
    margin-bottom: 20px;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--theme-tab-border-color);
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-link-active-border-color: var(--theme-secondary);
    --bs-nav-link-padding-y: 1.2em;
}

.nav-tabs .nav-item > a.nav-link {
    margin-top: 2px;
    border: none;
    border-bottom: 2px solid var(--theme-tab-border-color);
    cursor: pointer;
}

.nav-tabs .nav-item.active a.nav-link,
.nav-tabs .nav-item a.nav-link.active {
    border-bottom: 2px solid var(--theme-tab-active-border-color);
}


#dashboard #navActions {
    row-gap: 15px;
    padding: 0;
    background-color: var(--theme-color-body-bg);
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#dashboard div.col.dashboardAction {
    border-left: 2px solid var(--theme-tile-separator-color);
}

#dashboard div.col.dashboardAction:hover {
    border-left: 2px solid var(--theme-tile-separator-hover-color);
}

#dashboard #dashboardKeyInfo td:first-child {
    padding-right: 0;
    border-right: 2px solid var(--theme-tile-separator-color);
}

#dashboard .dashboardAction a {
    color: var(--theme-tile-color);
}

#dashboard .dashboardAction:hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

#dashboard .dashboardAction a:hover {
    background-color: revert;
}

#dashboard div.col.dashboardAction a {
    margin: 0 10px;
}

#autoRefreshTimer {
    right: 18px;
}

button.toggle-button {
    border: unset;
    font-weight: bold;
}

button.toggle-button:hover {
    border: unset;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
}

/* bootstrap specific override for contract view suppliers */
.table>:not(caption)>*>* {
    background-color: var(--theme-color-body-bg);
}

/** Fix background colour issue for nav tabs in modals */
div.modal-content .nav-tabs .nav-item > a.nav-link {
    background-color: revert;
}

#dashboard h1#dashboardHeader {
    padding: var(--theme-title-padding);
}

.badge {
    --bs-badge-font-weight: 400;
    --bs-badge-font-size: 0.9em;
    --bs-badge-padding-x: 0.8em;
    --bs-badge-padding-y: 0.5em;
}

div.dropzone {
    overflow: hidden;
    position: relative;
    border: none;
    border-radius: 0;
    color: var(--theme-primary);
    background-color: revert;
    transition: background-color 0.2s ease-in-out;
}

div.dropzone span.dz-text {
    text-transform: uppercase;
    letter-spacing: 3px;
    text-underline-offset: 5px;
    font-weight: bold;
    font-size: var(--theme-font-size);
}

/* Custom border dash width */
div.dropzone:before {
    content: "";
    position: absolute;
    border: 5px dashed var(--theme-text-dark);
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
}

div.dropzone:hover {
    background-color: var(--theme-secondary);
}

div.dropzone:hover .dz-preview.dz-file-preview .dz-image:before {
    border-color: var(--theme-secondary) var(--theme-secondary) var(--theme-emphasis-alt) var(--theme-emphasis-alt);
}

div.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 0;
    background: var(--theme-primary-dark);
}

div.dropzone .dz-preview.dz-file-preview .dz-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: var(--theme-color-body-bg) var(--theme-color-body-bg) var(--theme-emphasis-alt) var(--theme-emphasis-alt);
    background: var(--theme-primary-dark);
    transition: border-color 0.2s ease-in-out;
}

div.dropzone .dz-preview.dz-file-preview .dz-image {
    border: none;
}

div.dropzone .dz-preview.dz-file-preview .dz-details {
    color: var(--theme-text-light);
}

div.dropzone .dz-preview .dz-details .dz-filename span,
div.dropzone .dz-preview .dz-details .dz-size span {
    background: none;
}

div.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: none;
    background-color: var(--theme-primary-dark);
}

form div.form-group div.error, form div.error-box {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
}

/* This needs some psudo selector on it or it isn't specific enough to override the hover state also */
.btn:not(.btn-link) {
    --theme-btn-base-padding-y: 0.6rem;
    --bs-btn-padding-y: var(--theme-btn-base-padding-y);
    --bs-btn-padding-x: 0.9rem;
}

.btn:not(.btn-default, .btn-link) {
    border-width: 2px 0 2px 0;
    border-top-color: transparent;
    --bs-btn-padding-y: calc(var(--theme-btn-base-padding-y) - 1px);
}

/*Online form answer status select has a min-width to ensure button alignment, update this to match the button width */
.answerStatusSelect {
    min-width: 136px !important;
}

/*This catches a few rare cases where buttons and inputs are inline, the height of the inputs and labels needs to match the buttons */
.form-group:has(.btn) {
    & .form-control, label {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Custom support for the inline inputs on datatables */
.dt-search:has(~ div  .btn,  .btn),
.dt-search-advanced:has(~ div  .btn,  .btn) {
    & .form-control, label {
        height: 100%;
    }

    & label {
        padding-top: 0.6rem;
    }
}

/* These selectors specifically handle one case of an inline search on the dashboard */
label:has(~ div .form-control ~ .btn) {
    padding-top: 0.6rem;
    height: 100%;
}

.form-control:has(~ .btn), form:has(.form-control ~ .btn) {
    height: 100%;
}

.btn-success {
    --bs-btn-bg: var(--theme-btn-success-bg);
    --bs-btn-color: var(--theme-btn-success-color);
    --bs-btn-border-color: var(--theme-btn-success-bg);
    --bs-btn-hover-bg: var(--theme-btn-success-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-success-color);
    --bs-btn-hover-border-color: var(--theme-btn-success-bg);
    --bs-btn-active-color: var(--theme-btn-success-color);
    --bs-btn-active-bg: var(--theme-btn-success-bg);
    --bs-btn-active-border-color: var(--theme-btn-success-bg);
    --bs-btn-disabled-bg: var(--theme-btn-success-bg);
    --bs-btn-disabled-color: var(--theme-btn-success-color);
    --bs-btn-disabled-border-color: var(--theme-btn-success-bg);
}

.btn-danger {
    --bs-btn-bg: var(--theme-btn-danger-bg);
    --bs-btn-color: var(--theme-btn-danger-color);
    --bs-btn-hover-bg: var(--theme-btn-danger-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-danger-bg);
    --bs-btn-hover-border-color: var(--theme-btn-danger-bg);
    --bs-btn-active-color: var(--theme-btn-danger-color);
    --bs-btn-active-bg: var(--theme-btn-danger-bg);
    --bs-btn-active-border-color: var(--theme-btn-danger-bg);
    --bs-btn-disabled-color: var(--theme-btn-danger-color);
    --bs-btn-disabled-bg: var(--theme-btn-danger-bg);
    --bs-btn-disabled-border-color: var(--theme-btn-danger-bg);
}

.btn-primary {
    --bs-btn-bg: var(--theme-btn-primary-bg);
    --bs-btn-color: var(--theme-btn-primary-color);
    --bs-btn-border-color: var(--theme-btn-primary-bg);
    --bs-btn-hover-bg: var(--theme-btn-primary-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-primary-bg);
    --bs-btn-hover-border-color: var(--theme-btn-primary-bg);
    --bs-btn-active-color: var(--theme-btn-primary-color);
    --bs-btn-active-bg: var(--theme-btn-primary-bg);
    --bs-btn-active-border-color: var(--theme-btn-primary-bg);
    --bs-btn-disabled-bg: var(--theme-btn-primary-bg);
    --bs-btn-disabled-border-color: var(--theme-btn-primary-bg);
}

.btn-secondary {
    --bs-btn-bg: var(--theme-btn-secondary-bg);
    --bs-btn-color: var(--theme-btn-secondary-color);
    --bs-btn-border-color: var(--theme-btn-secondary-bg);
    --bs-btn-hover-bg: var(--theme-btn-secondary-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-secondary-bg);
    --bs-btn-hover-border-color: var(--theme-btn-secondary-bg);
    --bs-btn-active-color: var(--theme-btn-secondary-color);
    --bs-btn-active-bg: var(--theme-btn-secondary-bg);
    --bs-btn-active-border-color: var(--theme-btn-secondary-bg);
    --bs-btn-disabled-bg: var(--theme-btn-secondary-bg);
    --bs-btn-disabled-border-color: var(--theme-btn-secondary-bg);
}

.btn-warning {
    --bs-btn-bg: var(--theme-btn-warning-bg);
    --bs-btn-color: var(--theme-btn-warning-color);
    --bs-btn-border-color: var(--theme-btn-warning-bg);
    --bs-btn-hover-bg: var(--theme-btn-warning-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-warning-color);
    --bs-btn-hover-border-color: var(--theme-btn-warning-bg);
    --bs-btn-active-color: var(--theme-btn-warning-color);
    --bs-btn-active-bg: var(--theme-btn-warning-bg);
    --bs-btn-active-border-color: var(--theme-btn-warning-bg);
    --bs-btn-disabled-bg: var(--theme-btn-warning-bg);
    --bs-btn-disabled-color: var(--theme-btn-warning-color);
    --bs-btn-disabled-border-color: var(--theme-btn-warning-bg);
}

.btn-info {
    --bs-btn-bg: var(--theme-btn-info-bg);
    --bs-btn-color: var(--theme-btn-info-color);
    --bs-btn-border-color: var(--theme-btn-info-bg);
    --bs-btn-hover-bg: var(--theme-btn-info-hover-bg);
    --bs-btn-hover-color: var(--theme-btn-info-color);
    --bs-btn-hover-border-color: var(--theme-btn-info-bg);
    --bs-btn-active-color: var(--theme-btn-info-color);
    --bs-btn-active-bg: var(--theme-btn-info-bg);
    --bs-btn-active-border-color: var(--theme-btn-info-bg);
    --bs-btn-disabled-bg: var(--theme-btn-info-bg);
    --bs-btn-disabled-color: var(--theme-btn-info-color);
    --bs-btn-disabled-border-color: var(--theme-btn-info-bg);
}

.btn-default:not(.oauthButton) {
    --bs-btn-bg: white;
    --bs-btn-color: var(--navy);
    --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-color: var(--navy);
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-bg: var(--green);
    --bs-btn-active-color: var(--navy);
    --bs-btn-active-border-color: var(--green);
    --bs-btn-disabled-bg: var(--light-grey);
    --bs-btn-disabled-color: var(--theme-text-dark);
    --bs-btn-disabled-border-color: gray;
}

i.fa-lg {
    --theme-fa-lg-size: 1.25em;
}