.accordionItem {
    /* height: var(--normalCtrlHeight);*/
}

.accordionText {
    padding: 4px 10px 0 10px;
    color: var(--secondary) !important;
    text-align: left;
    /*    vertical-align: middle !important;
 height: var(--normalCtrlHeight);*/
    font-size: var(--sizeMD);
    padding-bottom: 0 !important;
}

.accordionIcon {
    color: var(--secondary) !important;
    text-align: left;
    /*height: var(--normalCtrlHeight);
        padding-top: 9px;*/
 width: var(--narrowCtrlWidth);
    font-size: var(--sizeMD);
}

.accordionPage {
    padding: var(--defaultVerticalSpacing) var(--defaultVerticalSpacing) 0 var(--defaultVerticalSpacing);
    font-size: var(--sizeMD);
}
/**
 * ApplicationGlobal
 **/

.appDefaults {
    font-weight: 400;
    font-family: var(--themeFontFamily) !important;
    color: var(--pageForeground);
    background-color: var(--pageBackground);
    height: 100%;
    line-height: 1.4;
}

@media print {
    .appDefaults, .accordion .item_odd, .accordion .item_even {
        background-color: #fff;
    }
}

.primary {
    color: var(--primary);
}

    .primary:hover {
        color: var(--secondary);
    }

.secondary {
    color: var(--secondary);
}

.border-primary {
    border-color: var(--primary) !important;
}

.footsie {
    background-color: var(--navButtonBackground);
    color: var(--navButtonForeground) !important;
    height: var(--footerHeight) !important;
    line-height: var(--footerHeight) !important;
    width: 100%;
}

.hiddenMenuText {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeLG);
    font-weight: 500;
    color: var(--navButtonForeground) !important;
    visibility: hidden;
    padding-top: 7px;
    width: 5px;
    display: inline-block;
}

.required {
    color: mediumvioletred;
}

.userIcon {
    font-size: var(--size32px);
    margin: var(--iconUserMarginTop) 1px 0 0;
    width: 32px;
}

.navbar-nav.nav-item {
    background-color: var(--navButtonBackground);
    color: var(--navButtonForeground) !important;
}

.verticalScrollBar {
    overflow-y: auto;
    overflow-x: hidden;
}

.loginIcon {
    font-size: var(--size32px);
    margin: 0 0 0 5px;
}

.isHidden {
    display: none !important;
}

.visible {
    display: contents !important;
}

.defaultSpacing {
    margin: var(--defaultVerticalSpacing) var(--defaultHorizontalSpacing) var(--defaultVerticalSpacing) var(--defaultHorizontalSpacing);
}

.defaultVerticalSpacing {
    margin-top: var(--defaultVerticalSpacing);
    margin-bottom: var(--defaultVerticalSpacing);
}

.defaultHorizontalSpacing {
    margin-right: var(--defaultHorizontalSpacing);
    margin-left: var(--defaultHorizontalSpacing);
}

.horizontalSpacingRight {
    margin-right: var(--defaultHorizontalSpacing);
}

.branding {
    height: var(--iconHeight) !important;
    width: var(--iconHeight) !important;
    background-repeat: no-repeat;
    margin-right: var(--iconMarginRight);
}

.mainArea {
    margin-top: calc(var(--main-menu-height) + 15px);
    padding: 0 0.5rem;
    height: 100%;
}
#skip-link {
    position: absolute;
    top: var(--main-menu-height);
}
#skip-link:focus .mainArea, #skip-link:focus-visible .mainArea {
    margin-top: 15px;
}
#mainAreaChild {
    scroll-margin-top: var(--main-menu-height);
}
.noFrame .mainArea {
    margin-top: 0;
}
.bodyArea {
    float: left;
    width: 80%;
    padding: 13px;
}

.loggingArea {
    display: none;
    position: absolute;
    top: 120px;
    width: 20%;
    float: left;
    padding: 5px;
    left: 80%;
    background-color: var(--light-grey);
    color: darkgreen;
    font-size: var(--sizeNM);
}

.text-login {
    color: var(--button-text) !important;
}

.loggedIn {
    color: var(--secondary_1);
}

.greenLight {
    color: var(--green-light);
}

.amberLight {
    color: var(--orange-light);
}

.redLight {
    color: var(--red-light);
}

.linker {
    color: var(--primary) !important;
    text-decoration: underline;
}

.helpText {
    color: red;
    font-weight: 400;
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeSM);
}

.shadow-sm {
    box-shadow: 0.125rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
    box-shadow: 0.125rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
    box-shadow: none !important;
}

i.crossed-out {
    position: relative;
}
i.crossed-out:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 140%;
    top: -20%;
    display: block;
    border-right: black 2px solid;
    border-left: white 2px solid;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}

/* Modal scrollbar */
.modal-dialog.scrollbar {
    overflow-y: initial !important
}
.modal-dialog.scrollbar .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}


/* Bootstrap overrides { */

.form-control:disabled, .form-control[readonly] {
    background-color: var(--formBackground);
    opacity: 1;
}
.btn-outline-secondary {
    color: var(--pageForeground);
    border-color: var(--pageForeground);
}

@media (max-width: 500px) {
    .tooltip {
        display: none;
    }
}
/* Bootstrap overrides } */


/* Fontawesome overrides { */
.fa-stack {
    height: 1em;
    line-height: 1em;
    width: 1em;
}
.fas.aside, .far.aside {
    font-size: 0.675em;
}
/* Fontawesome overrides } */
/* DevExpress overrides { */
.dx-freespace-row {
    white-space: break-spaces;
}
/* DevExpress overrides { */
/**
 * Benefactor.css
 **/

/* Works in conjunction with Theme CSS file variables */
/* Note: Background colour assignments still to be done. */


#progressBlock {
    width: 100%;
}

#inputProgress {
    background-color: white;
    height: var(--progress-bar-height);
    width: 100%;
    position: relative;
    left: 0;
}

/*#inputProgressBar {
    height: 13px;
}*/

#progressInfo {
    font-size: 11px;
    background-color: var(--pageBackground);
    width: 100%;
    position: relative;
    left: 0;
}


.panel {
    background-color: white;
    border: solid 1px var(--secondary);
    margin: 0 var(--size15px);
}

.middle {
    vertical-align: middle;
}

.fClass {
    margin-right: var(--itemSpacing);
    min-width: 90px;
    text-align: left;
}

.fC1 {
    width: 85px;
    text-align: left;
}


.p3 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.centred {
    width: 100%;
    text-align: center;
}

a.btn.active {
    background-color: var(--primary) !important;
    color: white !important;
    border-radius: var(--smallRadius);
}
a.btn.accordionText.active, a.btn.accordionText.active .accordionIcon {
    color: white !important;
}

.secToolbox, .subToolbox, .pagToolbox {
    width: var(--toolBoxWidth);
}

.mdCaption {
    font-family: var(--themeFontFamily) !important;
    background-color: var(--pale-grey) !important;
    font-size: var(--sizeML);
    color: var(--primary) !important;
}

.selectionBar, .mdCaptionLevel1 {
    padding: 7px 0;
    font-size: 13px;
    color: #777;
}

.selected, span#act {
    font-weight: bold;
}

.subPanel {
    background-color: var(--light-grey);
}
.badge.medium {
    font-size: 85%;
}
.badge.tiny {
    font-size: 70%;
    font-weight: 500;
}
.badge-pale {
    background-color: var(--pale-grey);
    border: 1px solid var(--light-grey);
}
.badge-pale-inv {
    background-color: var(--mid-grey);
    color: var(--white);
    border: 1px solid var(--light-grey);
}

.IDs {
    color: darkmagenta;
    background-color: #FEF;
}

.IXs {
    color: darkred;
    background-color: #FFE;
}

.RNs {
    color: forestgreen;
    background-color: #EFE;
}

.hpPanel {
    background-color: #DDD;
}

.card.dashlet .card-body {
    max-height: 25rem;
    overflow-y: auto;
}

.containerScroll {
    overflow-y: auto;
    max-height: 80vh;
}
/*
#helpAccordion {
    background-color: var(--pageBackground);
    width: 100%;
    margin: 10px;
}

    #helpAccordion > div.card {
        border: none;
        padding: 0 !important;
    }

        #helpAccordion > div.card > div.card-header {
            border: none;
            padding: 0 !important;
        }

    #helpAccordion > div.level_1 {
        font-weight: bold;
        padding: 0 !important;
        background-color: #E0E0E0;
    }

div.card-header.level_2 {
    padding: 0 0 0 20px;
    background-color: #F0F0F0;
}

div.level_3 {
    padding: 4px 0 4px 40px;
    background-color: #F8F8F8;
}
*/

/* Sticky table headers and footers */
thead.sticky {
    position: sticky;
    top: 74px;
}
tfoot.sticky {
    position: sticky;
    bottom: 41px;
}

/* Focus styles for CSS fake checkboxes */
input[type="checkbox"]:focus + i::before {
    outline: rgb(38, 143, 255) auto 5px;
    /*box-shadow: 0 0 5px 5px rgba(38, 143, 255, 0.5);*/
}


/* Focus styles for DX widgets */
.dx-button:focus     {
    outline: rgb(38, 143, 255) auto 5px;
}

/* Show only on hover */
.hoveronly {
    opacity: 0;
}
a:hover + i.hoveronly {
    opacity: 1;
}

/* Truncated long text table columns */
.truncate-column {
    max-width: 300px;
}

/* Programme groups  */
.programmeGroup {

}

/* Flashing animation  */
.flashing {
    animation: flashing 2s linear infinite;
}
@keyframes flashing {
    50% {
        opacity: 0.275;
    }
}

/* Password eye fix */
.input-group-text.input-password-show, .input-group-text.input-password-hide {
    padding: 0 0.75rem;
}

.input-group-text.input-password-show i.fa, .input-group-text.input-password-hide i.fa {
    min-width: 20px;
}

/* Do not print tooltips */
@media print {
    .tooltip {
        display: none;
    }
}

/* Accordion expanded */
.accordion .card-header [data-toggle="collapse"]:not(.collapsed) {
    color: var(--primary_2);
    background: var(--secondary_2);
}




.formParent:has( a.formParentAction:hover ), .formParent:has(button.formParentAction:hover), .formFieldRow:has(a.formRowAction:hover), .formFieldRow:has(button.formRowAction:hover), .formField:has(a.formFieldAction:hover), .formField:has(button.formFieldAction:hover) {
    background-color: var(--light-grey);
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}


.formField:has(a.formFieldAction:hover), .formField:has(button.formFieldAction:hover) {
    border-color: var(--dark-grey) !important;
    -webkit-transition: border-color 500ms linear;
    -ms-transition: border-color 500ms linear;
    transition: border-color 500ms linear;
}


.switch {
    position: relative;
    display: inline-block;
    width: 40px !important;
    height: 23px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--disabledItem);
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--primary);
}

input:focus + .slider {
    /*box-shadow: 0 0 5px #2196F3;*/
    outline: rgb(38, 143, 255) auto 5px;
}

input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.startRow {
    padding-left: 13px !important;
    margin-right: 10px !important;
}

.monetaryCSS {
    width: 225px !important;
}

.integerCSS {
    width: 225px !important;
}

.dropdownCSS {
    width: 325px !important;
}

.narrowDropdownCSS {
    width: 125px !important;
}

.btn-primary, .btn-secondary, .btn-danger, .btn-warning, .btn-success, .btn-danger:hover, .btn-warning:hover, .btn-success:hover, .btn-primary:hover, .btn-secondary:hover {
    min-width: var(--normalCtrlWidth);
    /*height: var(--normalCtrlHeight);*/
    padding: 2px 12px 3px 12px;
    vertical-align: top;
    margin: 2px 12px 0 0 !important;
}

.normalCtrl, .activeBtn {
    padding: 3px 12px 3px 12px;
    margin: 2px 12px 0 0 !important;
    color: var(--button-text);
    font-family: var(--themeFontFamily) !important;
}

.activeBtn {
    color: var(--navButtonForeground_Selected);
    background-color: var(--navButtonBackground_Selected);
}

.normalCtrl {
    color: var(--navButtonForeground);
    background-color: var(--navButtonBackground);
}

.question {
    margin: var(--defaultHorizontalSpacing) 0;
    border-bottom: solid 1px var(--light-grey);
}

.controlButtons, controlButtonsLeft, .controlButtonsRight {
    margin: 5px 0;
    border-bottom: solid 1px var(--light-grey);
}

.controlButtons, .controlButtonsRight {
    float: right !important;
}

.inputPanel {
    padding: 5px 0 9px 0;
    border-bottom: var(--themeSeparator);
    margin-bottom: 5px;
}

.title-input {
    font-family: var(--themeFontFamily) !important;
    min-width: 350px !important;
    max-width: 540px !important;
    width: 33% !important;
    height: 32px !important;
}

.rightMargin {
    margin-right: var(--defaultHorizontalSpacing);
}

[data-toggle="collapse"].collapsed .toggleHide {
    display: none;
}

[data-toggle="collapse"]:not(.collapsed) .toggleShow {
    display: none;
}
/**
 * DXoverrides
 * Benefactor custom styling of DX components
 **/


.dxButton {
    min-width: 135px;
    height: 32px;
    padding-top: 0px;
    margin-top: 0;
}

.dx-popup-content {
    background-color: var(--pageBackground);
    color: var(--primary);
}

div.dx-icon-filter, div.dx-datagrid-filter-panel-text, .dx-checkbox-icon, .dx-select-checkbox, .dx-toolbar, .dx-button, .dx-icon,
g.dxc-title {
    color: var(--primary) !important;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > td {
    background-color: var(--grey);
    border-top: var(--themeSeparator-secondary);
    border-bottom: var(--themeSeparator-secondary);
}

.dx-data-row:hover {
    /*cursor: pointer;*/
    background: var(--pale-primary-1);
}
.dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) {
    color: var(--primary) !important;
}
.dx-datagrid .dx-link {
    color: var(--primary) !important;
}

div.dx-datagrid-headers, div.dx-popup-title {
    color: var(--black) !important;
    background-color: var(--primary_1);
    font-family: var(--themeFontFamily) !important;
}

.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
    padding: 10px 0 5px 30px !important;
    white-space: normal;
}

.dx-row-focused, div.dx-datagrid-group-opened, div.dx-datagrid-group-closed {
    background-color: transparent !important;
    color: var(--primary) !important;
}

.dx-datagrid-adaptive-more::before {
    content: "\f016";
    display: inline-block;
    transition: all 0.3s ease-in;
    font-size: 16px;
    color: var(--primary-user);
}
tr.dx-data-row:has(+ tr.dx-adaptive-detail-row) .dx-datagrid-adaptive-more::before {
    transform: rotate(180deg);
    transition: all 0.3s ease-in;
}
tr.dx-data-row:has(+ tr.dx-adaptive-detail-row) td:not(.dx-command-adaptive) {
    border-bottom: .2rem solid rgba(0, 123, 255, .25);
}
tr.dx-data-row:has(+ tr.dx-adaptive-detail-row) td.dx-command-adaptive {
    border: .2rem solid rgba(0, 123, 255, .25);
    border-bottom: none;
}
tr.dx-data-row + tr.dx-adaptive-detail-row .dx-master-detail-cell {
    border-bottom: .2rem solid rgba(0, 123, 255, .25);
    border-left: .2rem solid rgba(0, 123, 255, .25);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.dx-button-has-icon .dx-button-content {
    padding: 4px;
    background-color: var(--pale-primary-1);
}
/*.maileditor .dx-button-has-icon .dx-button-content {
    padding: 4px;
    background-color: var(--white);
    border: 1px solid var(--pale-primary-2);
    border-radius: 5px;
}*/
.tabRow, .dx-tabs-wrapper, #review-tabs-container, #requestTabSelector {
    background-color: transparent !important;
    border-style: none;
}

.dx-tabs {
    width: auto;
    min-width: 115px !important;
}

.dx-tab, .dx-tab-selected, .dx-item, .tabButton {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--size20px);
    /*height: 29px;*/
    padding: 3px 9px;
    /*border-radius: 0 !important;*/
    border-style: none;
    /*min-width: 115px !important;*/
}

.tabRow {
    height: 39px;
}

.dx-tab {
    color: var(--subButtonForeground) !important;
    background-color: var(--subButtonBackground) !important;
}
.maileditor .dx-tab {
    box-shadow: none !important;
}
.dx-tab-selected {
    color: var(--subButtonForeground_Selected) !important;
    background-color: var(--subButtonBackground_Selected) !important;
}
.maileditor .dx-tab-selected {
    background-color: var(--white) !important;
    box-shadow: none !important;
}

/* Request tabs/views { */

.dx-tabs-wrapper {
    display: flex;
}
.tabRow .form-group {
    margin-bottom: 0;
    border-bottom: 1px solid #dee2e6;
    /* overflow: hidden; */
}
.dx-tab {
    margin-bottom: -1px;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    border: 1px solid #dee2e6 !important;
    margin-left: 8px;
   /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; */
}

.dx-tab-selected {
    color: var(--subButtonBackground_Selected) !important;
    background-color: var(--pageBackground) !important;
    /* border: 1px solid var(--subButtonBackground_Selected) !important; */
    border-bottom: 1px solid transparent !important;
}
    .dx-tab-selected::after {
        content: none;
    }

.dx-tab.dx-state-focused {
    border: 0 !important;
    outline: 0 !important;
}
.dx-tab.dx-state-focused::after {
  content: none;
}
.dx-tab:focus, .dx-tab:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}
/* Request tabs/views } */


/* Rich Editor { */
.dxreView {
    z-index: 0;
}
#RichEditor {
    max-height: 80vh;
    overflow-y: auto;
}
/* Rich Editor } */
.card-body-shorter {
    padding: 1rem 1.25rem;
}

.ben-card-title, .ben-card-request {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--size28px);
    padding-top: 3px;
}

/* Make DX tables easier to print */

@media print {
    .dx-datagrid-rowsview .dx-scrollable-container {
        height: auto;
    }

    table.dx-datagrid-table {
        /*display: inline-table;*/
        page-break-inside: avoid;
        size: landscape;
        page-orientation: rotate-left;
    }
    table.dx-datagrid-table-fixed {
        /* table-layout: auto;*/
    }

    table .dx-datagrid-table, table.dx-datagrid-table tbody, table.dx-datagrid-table tbody {
        max-width: 100% !important;
        width: 100%;
    }
    table.dx-datagrid-table-fixed td, table.dx-datagrid-table-fixed col {
        width: auto;
        min-width: unset;

    }
    /* Inline CSS column (px) widths can make table wider than printed page */
     table.dx-datagrid-table col, table.dx-datagrid-table td {
        width: auto !important;
        min-width: unset !important;
    }

	div[id^="table_"].dx-widget, .dx-datagrid  {
		page-break-inside: avoid;
    }

        table.dx-datagrid-table tr.dx-header-row, table.dx-datagrid-table tr.dx-header-row, div[id^="table_"].dx-widget tr.dx-header-row, .dx-datagrid tr.dx-header-row {
            /*display: table-header-group;*/
        }
        .dx-datagrid-headers {
            page-break-after: avoid;
        }
        table.dx-datagrid-table tr, div[id^="table_"].dx-widget tr, .dx-datagrid tr {
            page-break-inside: avoid;
            page-break-after: auto;
        }
        table.dx-datagrid-table td, div[id^="table_"].dx-widget td, .dx-datagrid td {
            page-break-inside: avoid;
        }
}

/**
 * Fonts
 **/
 
.font4X {
    font-size: var(--size4X);
}

.font3X {
    font-size: var(--size3X);
}

.font2X {
    font-size: var(--size2X);
}

.fontXL {
    font-size: var(--sizeXL);
}

.fontLG {
    font-size: var(--sizeLG);
}

.fontML {
    font-size: var(--sizeML);
}

.fontMD {
    font-size: var(--sizeMD);
}

.fontNM {
    font-size: var(--sizeNM);
}

.fontSM {
    font-size: var(--sizeSM);
}

.fontXS {
    font-size: var(--sizeXS);
}

.fontTN {
    font-size: var(--sizeTN);
}

.font2em {
    font-size: var(--size2em);
}

.thin {
    /* Montserrat Thin = 100 */
    font-weight: 100;
    font-family: var(--themeFontFamily);
}

.extralight {
    /* Montserrat Extra Light = 200 */
    font-weight: 200;
    font-family: var(--themeFontFamily);
}

.light {
    /* Montserrat Light = 300 */
    font-weight: 300;
    font-family: var(--themeFontFamily);
}

.regular {
    /* Montserrat Regular = 400 */
    font-weight: 400;
    font-family: var(--themeFontFamily);
}

.medium {
    /* Montserrat Medium = 500 */
    font-weight: 500;
    font-family: var(--themeFontFamily);
}

.semibold {
    /* Montserrat Semi-bold = 600 */
    font-weight: 600;
    font-family: var(--themeFontFamily);
}

.bold {
    /* Montserrat Bold = 700 */
    font-weight: 700;
    font-family: var(--themeFontFamily);
}

.extrabold {
    /* Montserrat Extra Bold = 800 */
    font-weight: 800;
    font-family: var(--themeFontFamily);
}

.black {
    /* Montserrat Black = 900 */
    font-weight: 900;
    font-family: var(--themeFontFamily);
}



.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance: textfield !important;
}
/**
 * Forms
 **/

.form {
    color: var(--formForeground);
    background-color: var(--formBackground);
}

.formGroup {
    padding: 0 var(--formGroup-rightPadding) 0 var(--formGroup-leftPadding);
    margin: var(--formGroup-topMargin) 0 var(--formGroup-bottomMargin) 0;
}

.formRow {
    margin-top: var(--formRow-topMargin) !important;
    font-size: var(--formTitle-fontSize);
}

.formTitle, .formTitleLabel {
    font-size: var(--formTitle-fontSize);
}

.formTitle {
    font-weight: bold;
}

.formInput {
    /* Input field on a form - could be any type: string, text, date, dropdown */
   
    /*Have tagged out as it screws with bs col placing.*/
    /* min-width: var(--formControl-minWidth); */
    color: var(--primary) !important;
    font-size: var(--formInput-fontSize);
}
fieldset legend.label {
    font-size: 1rem;
}

/* DevExtreme FileUploader overrides { */
.dx-fileuploader-input-wrapper {
    border: 3px dashed #dee1e3;
    border-radius: 0.5em;
    padding: 10px;
}
.dx-fileuploader-dragover .dx-fileuploader-input-label {
    border: 3px solid var(--secondary);
    border-radius: 0.5em;
}
/* DevExtreme FileUploader overrides } */

.formFilename {
    color: var(--primary) !important;
    font-size: var(--formLabel-fontSize);
    border: solid var(--secondary) 1px;
    border-radius: 0.25em;
    background-color: white;
    padding: 0.25em;
    margin: 0 0.25em;
}
.file-delete, .btn-none.file-delete {
    color: #dc3545;
    transition: color 0.15s ease-in-out;
}
    .file-delete:hover, .file-delete:active, .btn-none.file-delete:hover, .btn-none.file-delete:active {
        color: #c82333;
    }
.formLabel, .fieldLabel {
    color: var(--primary) !important;
    font-size: var(--formLabel-fontSize);
    padding-bottom: 3px !important;
}

.formText {
    font-style: var(--formText-style);
    width: 100% !important;
    resize: none;
    margin-left: -4px; /* Compensate for the fluffy border */
    padding: 2px 5px !important;
}

.formString {
    width: var(--formString-width);
    margin-left: -4px; /* Compensate for the fluffy border */
    padding: 2px 5px !important;
}

.makeDeeper {
    margin-bottom: 15px;
}
pre.d-print-block {
    font-style: normal;
    font-family: inherit;
    color: var(--primary);
    font-size: var(--sizeNM);
    line-height: 1.4;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 2px 7px;
}
/**
 * Help
 **/

#helpWrapper {
    float: left;
    width: 100%;
}

.helpSidebar {
    background-color: var(--menuBackground);
    padding: 7px;
    /*min-width: 350px;*/
}

.helpGrid {
    min-width: 920px;
    /*width: 25%;*/
}

.helpHeading, .helpSubHeading {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--size2X);
    padding: var(--helpDrawer-headingsVerticalSpacing) 0;
    width: 100%;
    text-align: center;
}

.helpHeading {
    color: var(--helpDrawer-headingColour);
    background-color: var(--helpDrawer-headingBackgroundColour);
}

.helpSubHeading {
    color: var(--helpDrawer-subHeadingColour);
    background-color: var(--helpDrawer-subHeadingBackgroundColour);
    margin: var(--helpDrawer-headingsVerticalSpacing) 0 var(--helpDrawer-headingsVerticalSpacing) 0;
}

.helpDrawer {
    width: var(--helpDrawer-width);
    height: var(--helpDrawer-height);
    color: var(--helpDrawer-colour);
    background-color: var(--helpDrawer-backgroundColour);
    padding: var(--helpDrawer-padding);
    border: solid 1px var(--helpDrawer-borderColour);
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 99999999;
}

#help-treeview {
    color: var(--helpDrawer-colour) !important;
    margin-left: var(--helpDrawer-treeViewLeftRightMargin);
    font-family: var(--themeFontFamily) !important;
    width: 100%;
}

    #help-treeview .dx-treeview-search {
        font-family: var(--themeFontFamily) !important;
        font-size: var(--size2X) !important;
        width: calc(100% - var(--helpDrawer-treeViewLeftRightMargin));
        background-color: var(--helpDrawer-backgroundColour);
        margin: 0 0 5px 0;
    }

.helpSearch {
    padding-bottom: var(--helpDrawer-headingsVerticalSpacing);
    font-family: var(--themeFontFamily) !important;
    font-size: var(--size2X);
    border-bottom: solid 1px var(--light-grey);
}

.helpSearchLabel {
    margin-right: var(--helpDrawer-headingsVerticalSpacing);
}

.helpSearchText {
    margin-right: var(--helpDrawer-headingsVerticalSpacing);
}

/* Popup CSS*/

.dx-overlay-content {
    max-height: 95vh;
    max-width: 95vw;
    overflow-y: auto;
}

.dx-popup-content {
    font-family: var(--themeFontFamily);
    overflow: hidden;
}

.puRightPanel {
    color: var(--primary);
    font-family: var(--themeFontFamily);
    float: right;
    font-size: var(--sizeML);
}

.puRefLabel {
    margin-right: 7px;
    font-weight: 600;
}

.puRefLine {
    /* text-align: right; */
    font-size: var(--sizeML);
}

.puOpen, .puClosed {
    font-size: var(--sizeML);
    margin-left: 10px;
}

.puOpen {
    color: darkgreen;
}

.puClosed {
    color: darkred;
}

.puFormLink {
    margin-left: 25px;
    color: var(--primary);
}

.puStepFieldTable {
    font-family: var(--themeFontFamily);
    width: 100%;
}

.sfPanel {
    padding: var(--popup-padding) !important;
    cursor: pointer;
}

tr.puStepFieldRow {
    padding: var(--popup-padding) !important;
    font-weight: 500;
    color: var(--primary);
}

.puFieldKey {
    font-size: var(--sizeML);
    padding-right: 10px !important;
}

.puFieldValue {
    font-size: var(--sizeLG);
    padding: 0 16px !important;
}

.puAttributed {
    margin-top: 10px;
    font-size: var(--sizeSM);
}

.puCaption {
    font-family: var(--themeFontFamily);
    font-size: var(--size2X);
    font-weight: 300;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--popup-caption-height);
    padding: var(--popup-padding) var(--popup-padding) var(--popup-padding) 25px;
    color: var(--black);
    background-color: var(--primary_1);
}

.puProjectTitle, .puProjectName {
    height: 32px;
    margin: 18px 12px 13px 0;
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    color: var(--primary);
}

.puCreated, .puCreatedDate {
    height: 36px;
    margin: 14px 9px 10px 0;
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    color: var(--primary);
}

.puProjectName, .puCreated {
    font-weight: bold;
}

.puProgramTitle {
    /*  height: 48px;
    margin: var(--popup-caption-height) 0 13px 0; */
    font-family: var(--themeFontFamily);
    font-size: var(--size2X);
    color: var(--primary);
    margin-bottom: 45px;
}

.puNormal {
    height: 15px;
    margin: 19px 44px 0 0;
    font-family: var(--themeFontFamily);
    font-size: var(--sizeNM);
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--primary);
}

.puIcon {
    width: 32px;
    text-align: left;
    font-size: 18px;
}

.puStepSummary_row {
    width: 100%;
    height: 40px;
    padding-top: 7px;
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG) !important;
    font-weight: bold;
    color: var(--primary) !important;
    border-bottom: var(--themeSeparator);
    /*cursor: pointer;*/
}

.puStepSummary_text {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG) !important;
    font-weight: bold;
    margin-left: 10px;
    color: var(--primary) !important;
}
.puFormLink {
    font-weight: normal;
}
.puCloser, .puMessages {
    position: fixed;
    top: 0px;
    /* width: 32px !important;
    height: 32px !important; */
    padding: 16px 10px 0 0;
    font-size: var(--sizeXL);
    color: var(--black);
    background-color: var(--primary_1);
    cursor: pointer;
}

.puCloser {
    left: calc(100% - 48px);
}

.puMessages {
    left: calc(100% - 96px);
}

    .puMessages:hover {
        color: var(--secondary) !important;
    }

#RequestLink {
    position: fixed;
    left: calc(100% - 295px);
    top: 10px;
    /* width: 155px !important; */
    margin: 0 44px 0 0;
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    color: var(--navButtonForeground);
    background-color: var(--navButtonBackground);
    cursor: pointer;
}

.sbDialog {
    margin-top: 50px;
}

/* Raise tooltips to above modal */
.tooltip {
    z-index: 1550;
}
/**
 * NavigationOverrides
 *
 **/

#navbar-toggler {
    color: var(--menuForeground);
}

.NavText-Main_Nav {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--primary);
}

.NavText-Main_Nav_White {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
}

.NavText-Sub_Nav {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.NavText-Summary_Nav_16 {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.NavText-Summary_Nav_14 {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--primary);
}

.NavText-UserNav_White {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--white);
}

.NavText-User_Nav {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.NavText-SummaryNav_white {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
}

.NavHamburger {
    color: var(--navButtonForeground) !important;
    font-size: var(--size2X);
}

    .NavHamburger:hover {
        color: var(--navButtonBackground_Selected) !important;
    }

.NavigationTopNavItem, .NavigationTopNavItem:hover, .NavigationTopNavItem_Selected, .NavigationTopNavItem_Selected_Hover {
    /*min-width: var(--widerCtrlWidth) !important;*/
    height: var(--tallCtrlHeight) !important;
    margin: 0 var(--size10px) !important;
}

.NavigationSubNavItem, .NavigationSubNavItem:hover, .NavigationSubNavItem_Selected, .NavigationSubNavItem_Selected_Hover {
    min-width: var(--wideCtrlWidth) !important;
    height: var(--normalCtrlHeight) !important;
    margin: 0 var(--size10px) var(--size20px) 0 !important;
}

.NavigationLeftItem, .NavigationLeftItem:hover, .NavigationLeftItem_Selected, .NavigationLeftItem_Selected_Hover {
    border-radius: var(--smallRadius) !important;
    padding: 5px 7px 3px 7px !important;
    text-decoration: none !important;
    min-width: var(--wideCtrlWidth) !important;
    height: var(--normalCtrlHeight) !important;
/*    margin: 0 var(--size10px) var(--size20px) 0 !important;
*/}

.NavigationTopNavItem, .NavigationTopNavItem:hover, .NavigationTopNavItem_Selected, .NavigationTopNavItem_Selected_Hover {
    border-radius: var(--smallRadius) !important;
    padding: var(--size11px) var(--size14px) 0 var(--size14px) !important;
    text-decoration: none !important;
}

.NavigationSubNavItem, .NavigationSubNavItem:hover, .NavigationSubNavItem_Selected, .NavigationSubNavItem_Selected_Hover {
    border-radius: var(--smallRadius) !important;
    padding: 5px 7px 3px 7px !important;
    text-decoration: none !important;
}

.NavigationTopNavItem, .NavigationColours, .NavigationTheme {
    color: var(--navButtonForeground) !important;
    background-color: var(--navButtonBackground) !important;
}
.normalCtrl, div.dx-datagrid-text-content,
.btn-primary {
    color: var(--black) !important;
    background-color: var(--primary_1) !important;
}
    .NavigationTopNavItem:hover {
        color: var(--navButtonForeground_Hover) !important;
        background-color: var(--navButtonBackground_Hover) !important;
    }
    .normalCtrl:hover, .btn-primary:hover {
         color: var(--primary_2) !important;
         background-color: var(--pale-primary-1) !important;
    }
    .NavigationTheme:hover {
        color: var(--secondary) !important;
    }

.NavigationTopNavItem_Selected {
    color: var(--navButtonForeground_Selected) !important;
    background-color: var(--navButtonBackground_Selected) !important;
}

.NavigationNavItem_Selected:hover {
    color: var(--navButtonForeground_Selected_Hover) !important;
    background-color: var(--navButtonBackground_Selected_Hover) !important;
}

.NavigationSubNavItem, .NavigationLeftItem {
    color: var(--subButtonForeground) !important;
    background-color: var(--subButtonBackground) !important;
    /*margin-bottom: var(--size15px);*/
}

    .NavigationSubNavItem:hover, .NavigationLeftItem:hover {
        color: var(--subButtonForeground_Hover) !important;
        background-color: var(--subButtonBackground_Hover) !important;
    }

.NavigationSubNavItem_Selected, .NavigationLeftItem_Selected {
    color: var(--subButtonForeground_Selected) !important;
    background-color: var(--subButtonBackground_Selected) !important;
}

    .NavigationSubNavItem_Selected:hover, .NavigationLeftItem_Selected:hover {
        color: var(--subButtonForeground_Selected_Hover) !important;
        background-color: var(--subButtonBackground_Selected_Hover) !important;
    }

.nav {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    /*    color: var(--white);
*/
}

.nav-menu-BG-override {
    margin: 0 0 26px 0;
    padding: 0;
    color: var(--menuForeground) !important;
    background-color: var(--menuBackground) !important;
    border: none !important;
    /*background-image: url('/css/images/logo.svg');*/
    background-position-x: 10px;
    background-position-y: 5px;
    background-repeat: no-repeat;
    /*padding-left: var(--navManuLeftPadding);*/
    height: var(--main-menu-height) !important;
	z-index: 999;
}

.nav-button-area {
    /* Nav buttons are parked to the right of the roundel Logo. Logo is 101px wide; add 10px margin */
    /*position: fixed;
    left: var(--hd_MenuAreaLeft);
    width: var(--hd_MenuAreaWidth);
    min-width: calc(var(--hdMenuMinWidth) + var(--navManuLeftPadding));*/
    /*    height: var(--main-menu-height) !important; */
}

.iconSpacer {
    margin-top: var(--iconMarginTop);
    margin-right: var(--iconMarginRight);
}

.iconButton {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 1px;
    color: var(--white);
    background-color: var(--primary);
}

/* menu area foreground and background */
.menuForeground {
    color: var(--menuForeground);
}

.menuBackground /*, .dx-popup-content*/ {
    background-color: var(--menuBackground);
}

/* Necessary to align disparate icons on the right of the nav menu */
.shiftDn {
    line-height: 2.4;
}

.endContainer {
    margin-right: 0.5rem;
}

.loginContainer {
    background-color: var(--primary);
    min-width: var(--hdMenuMinWidth);
}

.MainText-H1 {
    font-family: var(--themeFontFamily);
    font-size: var(--size3X);
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
    margin: var(--marginLG) 0 var(--marginMD) 0;
}

.MainText-H2 {
    font-family: var(--themeFontFamily);
    font-size: var(--size2X);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
    margin: var(--marginML) 0 var(--marginNP) 0;
}

.MainText-H3 {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeXL);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
    margin: var(--marginMD) 0 var(--marginSM) 0;
}

.MainText-Quote {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeXL);
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.42;
    letter-spacing: normal;
    text-align: center;
    color: var(--primary);
}

.MainText-H4 {
    font-family: var(--themeFontFamily);
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.MainText-Intro_Text {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeLG);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    color: var(--primary);
}

.Row-Header-Blue-2 {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.Row-Header-White {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--white);
}

.ButtonsButton_Label_Blue {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--primary);
}

.FormsLegend {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeML);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--dark-grey);
}

.Buttonsprimary_button {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeML) !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
    background-color: var(--primary);
}

.Buttonssecondary_button {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeML) !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--secondary);
}

.FormsPlaceholder-2 {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeML) !important;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--grey);
}

.ButtonsButton_Label_Secondary-Disabled {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--grey);
}

.FormsForm-Input-Disabled {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--grey);
}

.MainBody_16 {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeML);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--primary);
}

.ButtonsForm-Button_Label_White {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
}

.ButtonsButton_Label-Disabled {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.38px;
    text-align: center;
    color: var(--grey);
}

.FormsInput {
    font-family: var(--themeFontFamily) !important;
    font-size: var(--sizeMD) !important;
    font-weight: 500 !important;
    font-stretch: normal !important;
    font-style: normal !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: var(--primary) !important;
}

.FormsPlaceholder-Style {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--grey);
}

.ButtonsButton-Label-Secondary {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--primary);
}

.MainText-Small_Text {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeNM);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--primary);
}

.reviewRow {
    /* border-bottom: 1px solid #EEF;*/
}

.reviewModelTitle {
    font-weight: bold;
    color: var(--primary);
    font-size: var(--sizeMD);
}

.reviewTitle {
    font-weight: bold;
    color: var(--primary);
    font-size: var(--sizeMD);
}

.reviewHeading {
    font-weight: bold;
    color: var(--primary);
    font-size: var(--sizeMD);
}

.reviewLabel {
    color: var(--secondary);
    text-align: right;
}

.reviewField {
    color: var(--primary);
    font-size: var(--sizeMD);
    padding-left: 15px;
}

.reviewGroup {
    color: darkgreen !important;
}

.reviewNumber {
    color: darkorange;
}

/* Logo manipulation and Chevron (status bar) stuff */

.logo-1 {
    fill: white;
}

    .logo-1:hover {
        fill: var(--pale-primary-1);
    }

.logo-2 {
    fill: var(--secondary);
}

.logo-3 {
    fill: var(--primary-user);
}

.logo-4 {
    fill: var(--primary);
}

.logo-5 {
    fill: var(--pale-primary-1);
}

.requestStatusBar {
    padding: 7px 2px 5px 2px;
}

.chevvys {
    padding: 5px;
    /*margin-bottom: 13px;*/
    width: 100%;
    background-color: #EEE;
    border-bottom: solid 1px #ddd;
    border-top: solid 1px #ddd;
}

.chevvy {
    stroke-width: 1;
    stroke: darkgrey;
    min-width: 150px;
}

.chevvyText {
    font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
    stroke: none !important;
}

.chevvyLegendText {
    font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 8px;
    stroke: none !important;
}

.legendBox {
    stroke: none;
}

.chevvyworkflowText {
    fill: yellow;
}

.chevvygroupText,
.chevvyapplicationText,
.chevvyreviewText,
.chevvydecisionText {
    fill: white;
}

.chevvydoneText {
    fill: darkgreen;
}

.chevvyiceBlueText {
    fill: maroon;
}

.chevvymauvesText {
    fill: darkblue;
}

.chevvypurplesText {
    fill: cyan;
}

.chevvypeachyText {
    fill: saddlebrown;
}

.chevvyiceBlueText,
.chevvyfireRedText,
.chevvydeepGreenText {
    fill: white;
}

.chevvydoneLegendText {
    fill: darkgreen;
}

.doneStatus {
    stroke: darkgreen;
}

.chevvyactiveText, .chevvyactiveLegendText {
    fill: darkred;
}

.activeStatus {
    stroke: darkorange;
}

.chevvyfutureText, .chevvyfutureLegendText {
    fill: grey;
}

.futureStatus {
    stroke: darkgrey;
}

.chevvySpan {
    /*    margin-left: -5px !important; 
*/ min-width: 140px;
}

#sbc1, #sbc2 {
    margin-bottom: 5px;
}

/* Trace Header */
.traH {
    font-weight: bold;
    background-color: palegreen;
    text-align: center;
}

/* Trace Body (rows) even and odd */
.traBe, .traBo {
    border-bottom: solid 1px darkgrey;
}

.traBe {
    background-color: white;
}

.traBo {
    background-color: #F8F8F8;
}

/* Trace Numbers*/
.traN {
    color: black;
    font-family: Courier New, Courier, monospace;
    margin-right: 6px;
}

/* Trace Temporal = Time added */
.traT {
    color: darkred;
    font-family: Courier New, Courier, monospace;
    margin-right: 6px;
}

.tallControl {
    height: var(--tallCtrlHeight) !important;
}

.shallowControl {
    height: var(--shallowCtrlHeight) !important;
}



.w350 {
    min-width: var(--w350);
}

.w325 {
    min-width: var(--w325);
}

.w300 {
    min-width: var(--w300);
}

.w275 {
    min-width: var(--w275);
}

.w250 {
    min-width: var(--w250);
}

.w225 {
    min-width: var(--w225);
}

.w200 {
    min-width: var(--w200);
}

.w175 {
    min-width: var(--w175);
}

.w150 {
    min-width: var(--w150);
}


.spanHasWidth {
    display: inline-block;
}

.fullWidth {
    width: var(--maxSize) !important;
}

.wide {
    min-width: var(--wideCtrlWidth) !important;
}

.wider {
    min-width: var(--widerCtrlWidth) !important;
}

.extraWidth {
    min-width: var(--extraCtrlWidth) !important;
}

.normalWidth {
    min-width: var(--normalCtrlWidth) !important;
}

.slim {
    min-width: var(--slimCtrlWidth) !important;
}

.narrow {
    min-width: var(--narrowCtrlWidth) !important;
}

.tinyWidth {
    min-width: var(--tinyCtrlWidth) !important;
}

.fullWidthCtrl {
    min-width: var(--maxSize) !important;
    height: var(--normalCtrlHeight);
}
/* Control widths go in steps to maintain consistency. Actual pixel widths are defined in Default_std.css
    tiny -> narrow -> slim -> normal -> extra -> wider -> wide -> fullWidth (100%) */
.wideCtrlSize {
    min-width: var(--wideCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 10px;
}

.widerCtrlSize {
    min-width: var(--widerCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 10px;
}

.extraCtrlSize {
    min-width: var(--extraCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 10px;
}

.normalCtrlSize {
    min-width: var(--normalCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 10px;
}

.slimCtrlSize {
    min-width: var(--slimCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 8px;
}

.compactCtrlSize {
    min-width: var(--compactCtrlWidth) !important;
    height: var(--compactCtrlHeight);
    margin: 0 5px 5px 7px;
    font-size: var(--sizeSM);
    padding-top: 2px;
}

.narrowCtrlSize {
    min-width: var(--narrowCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 6px;
}

.tinyCtrlSize {
    min-width: var(--tinyCtrlWidth) !important;
    height: var(--normalCtrlHeight);
    margin-right: 5px;
}

.w40px {
    min-width: 40px;
    text-align: center;
    font-weight: bold;
    height: 23px;
    font-size: var(--sizeMD);
    border-width: 1px;
}

.widSubMenu {
    min-width: 175px;
}

.w100px {
    width: 100px;
}

.w100pc {
    width: 100%;
}

.filterWidth {
    width: 225px;
    padding-right: 10px;
}

.questionPageBreak {
    text-align: center;
    padding: 3px;
    font-size: var(--sizeMD);
    font-weight: bold;
    border-top: solid 1px var(--secondary);
    margin: 0 35px;
}

.qAltLabel {
    font-size: var(--sizeMD);
}

.reviewString {
    font-size: var(--sizeMD);
    font-weight: bold;
    padding: 0;
}

.qpb_alt {
    color: magenta;
}

.noBorders {
    cursor: none;
    border: none;
    padding: 0;
}

.eSlider {
    margin-right: 10px;
}

.eLabel, .qLabel {
    font-weight: bold;
    color: var(--primary);
    margin-left: 10px;
}

.qLabel {
    /* margin-left: 50px;*/
}

.fixedHeight {
    height: 720px;
}

.item_odd, .item_even {
    padding: 0;
    border: solid 1px var(--secondary);
    border-radius: var(--mediumRadius);
    margin-bottom: var(--defaultVerticalSpacing);
}

.item_odd {
    background-color: #FAFAFA;
}

.item_even {
    background-color: white;
}

.form-group {
    font-style: normal;
    color: var(--primary);
    font-family: var(--themeFontFamily);
    margin-bottom: 3px;
}

.form-control {
    /* Important overrides of the dx form control to reduce the large
        amount of whitespace around and within controls (within reason) */
    font-style: normal;
    color: var(--primary);
    font-size: var(--sizeNM);
    line-height: 1.4;
    height: 25px;
    padding: 2px 7px;
}

.form-lookup {
    font-size: var(--sizeSM) !important;
    color: var(--primary);
}

.selectionOption {
    font-size: var(--sizeSM) !important;
    color: var(--primary);
}

.form-label {
    font-style: italic;
    color: var(--primary);
}

.form-textArea {
    /*    font-style: italic;
*/ color: var(--primary);
    width: 100%;
}

.label-row, .field-row {
    font-size: var(--sizeNM);
    margin: 0 -7px 0 -7px;
}

.form-lookup {
    font-family: var(--themeFontFamily);
}

.form-dropdown {
    font-family: var(--themeFontFamily);
}

.form-multiselect {
    font-family: var(--themeFontFamily);
}

.form-check-input {
    font-family: var(--themeFontFamily);
}

.form-check-inline {
    font-family: var(--themeFontFamily);
}

/* Questions */
.q-MainLabelArea, .q-labelArea {
    font-family: var(--themeFontFamily);
    font-size: var(--sizeMD);
    margin-top: 3px;
    margin-bottom: 0;
}

.q-labelArea {
    color: var(--secondary);
}

.q-MainLabelArea {
    color: var(--primary);
    white-space: nowrap;
}

.q-questionArea {
    font-family: var(--themeFontFamily);
    color: var(--primary);
    font-size: var(--sizeMD);
}

.endOfQuestionBlock {
    height: 7px;
    margin-bottom: 7px;
}

.body-container {
    font-size: var(--sizeMD);
}

.enclosure {
    padding-bottom: 25px;
}

.fieldIcon {
    font-size: var(--sizeSM);
    margin-left: 4px;
    padding: 0;
}

.fieldIcons {
    color: var(--primary);
}

.fieldValidation {
    color: var(--red-light);
    font-size: var(--sizeSM);
}

/* Tristate boolean inputs { */
.tristate-clear-button {
    width: 0;
}
.tristate-clear-label {
    padding: 2px 5px;
    border: 1px solid var(--secondary);
    border-radius: 5px;
    color: var(--secondary);
    cursor: pointer;
    transition: background-color 0.5s ease,color 0.5s ease;
}
.tristate-clear-label:hover {
    background: var(--secondary);
    color: var(--formBackground);
    transition: background-color 0.5s ease,color 0.5s ease;
}
/* Tristate boolean inputs } */

/* Accessible Autocomplete overrides { */
.form-lookup .autocomplete__wrapper {
   
}
.form-lookup .autocomplete__input, .autocomplete__wrapper .autocomplete__input {
    font-style: normal;
    color: var(--primary);
    font-size: var(--sizeNM);
    line-height: 1.4;
    height: 25px;
    /*padding: 2px 7px !important;*/
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    z-index: 1;
}

.form-lookup .autocomplete__input:focus, .autocomplete__wrapper .autocomplete__input:focus {
    color: #495057;
    background-color: transparent;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-lookup .autocomplete__input--show-all-values, .autocomplete__wrapper .autocomplete__input--show-all-values {
    /* padding: 2px 7px; */
    padding: 5px 34px 5px 5px;
}
.form-lookup .autocomplete__menu--overlay, .autocomplete__wrapper .autocomplete__menu--overlay {
    font-style: normal;
    color: var(--primary);
    font-size: var(--sizeNM);
    line-height: 1.4;
    /*padding: 2px 7px !important;*/
}
.form-lookup .autocomplete__menu, .autocomplete__wrapper .autocomplete__menu {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-top: 0;
    color: var(--primary);
    margin: 0;
    max-height: 342px;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
    width: calc(100% - 4px);
}
.form-lookup .autocomplete__hint, .form-lookup .autocomplete__input, .autocomplete__wrapper .autocomplete__input, .form-lookup .autocomplete__option, .autocomplete__wrapper .autocomplete__option {
    font-size: var(--sizeNM);
}
.form-lookup .autocomplete__wrapper .autocomplete__dropdown-arrow-down {
    z-index: 0;
    display: inline-block;
    position: absolute;
    right: 8px;
    width: 14px;
    height: 14px;
    top: 5px;
}

.form-lookup .clearBtn {
    padding: 2px 5px;
    border: 1px solid var(--secondary);
    background-color: var(--pageBackground);
    border-radius: 5px;
    color: var(--secondary);
    font-size: var(--sizeMD);
    transition: background-color 0.5s ease,color 0.5s ease;
    font-size: var(--sizeNM);
}

.form-lookup .clearBtn:hover {
    background: var(--secondary);
    color: var(--pageBackground);
    transition: background-color 0.5s ease,color 0.5s ease;
}
.form-lookup .clearBtn.position-absolute {
    right: /*26px*/ 0;
    z-index: 1;
}

.autocomplete__wrapper .autocomplete__menu[id^="select_string_"]::before {
    content: 'Autocomplete suggestions..';
    padding: 5px;
    /*font-size: var(--sizeSM);*/
}
.autocomplete__wrapper .autocomplete__menu[id^="select_string_"] .autocomplete__option:first-of-type {
    
}
/* Accessible Autocomplete overrides } */

/*
    .submitArea { }
    .submitHeading { }
    .submitDescription { }
    .submitHoverText { }


*/

/*  DEBUG SETTINGS */
/*.benefactorAccordion {
    background-color: yellowgreen;
}

.benefactorAccordionPage {
    background-color: yellow;
}

.form-control {
    background-color: aquamarine;
}

.form-label {
    background-color: orange;
}

.field-row {
    background-color: lightgreen;
}

.field-area {
    background-color: hotpink;
}
*/


#account > .form-group {
    margin-top: 15px;
}

#account > div > label {
    /*    background-color: yellowgreen !important;
*/ margin-bottom: 3px;
}

#Input_Email {
    font-family: var(--themeFontFamily);
    max-width: 325px;
}

#Input_Password {
    font-family: var(--themeFontFamily);
    max-width: 325px;
}

.loginSubmit {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: solid 1px var(--pale-primary-1);
}


.requestHeading {
    margin-bottom: 9px;
}

.requestLayout {
    padding: 2px;
    vertical-align: top;
}

.leftMenu {
    vertical-align: top;
    width: 135px;
    min-width: 135px !important;
    font-size: var(--size20px);
    overflow: hidden;
}

.rightBody {
    width: calc(100% - 155px);
    vertical-align: top;
    padding: 0 15px 0 25px;
}

.requestLeftMenuButton {
    padding-bottom: 8px;
}

.rqButton {
    width: 117px !important;
    margin: 0 !important;
    display: block;
}

.requestMessagesFrame {
   /* position: relative;
    max-height: 350px;
    overflow-y: scroll;*/
}

.card:target::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-shadow: 0 0 0.4rem 0.4rem rgba(38, 143, 255, 0.5);
    animation-fill-mode: forwards;
    animation-duration: 6s;
    animation-delay: 4s;
    animation-name: highlightbox;
    animation-timing-function: ease-in-out;
}
@keyframes highlightbox {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/**
 * Benefactor.css
 **/

/* Works in conjunction with Theme CSS file variables */
/* Note: Background colour assignments still to be done. */


#progressBlock {
    width: 100%;
}

#inputProgress {
    background-color: white;
    height: var(--progress-bar-height);
    width: 100%;
    position: relative;
    left: 0;
}

/*#inputProgressBar {
    height: 13px;
}*/

#progressInfo {
    font-size: 11px;
    background-color: var(--pageBackground);
    width: 100%;
    position: relative;
    left: 0;
}


.panel {
    background-color: white;
    border: solid 1px var(--secondary);
    margin: 0 var(--size15px);
}

.middle {
    vertical-align: middle;
}

.fClass {
    margin-right: var(--itemSpacing);
    min-width: 90px;
    text-align: left;
}

.fC1 {
    width: 85px;
    text-align: left;
}


.p3 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.centred {
    width: 100%;
    text-align: center;
}

a.btn.active {
    background-color: var(--primary) !important;
    color: white !important;
    border-radius: var(--smallRadius);
}
a.btn.accordionText.active, a.btn.accordionText.active .accordionIcon {
    color: white !important;
}

.secToolbox, .subToolbox, .pagToolbox {
    width: var(--toolBoxWidth);
}

.mdCaption {
    font-family: var(--themeFontFamily) !important;
    background-color: var(--pale-grey) !important;
    font-size: var(--sizeML);
    color: var(--primary) !important;
}

.selectionBar, .mdCaptionLevel1 {
    padding: 7px 0;
    font-size: 13px;
    color: #777;
}

.selected, span#act {
    font-weight: bold;
}

.subPanel {
    background-color: var(--light-grey);
}
.badge.medium {
    font-size: 85%;
}
.badge.tiny {
    font-size: 70%;
    font-weight: 500;
}
.badge-pale {
    background-color: var(--pale-grey);
    border: 1px solid var(--light-grey);
}
.badge-pale-inv {
    background-color: var(--mid-grey);
    color: var(--white);
    border: 1px solid var(--light-grey);
}

.IDs {
    color: darkmagenta;
    background-color: #FEF;
}

.IXs {
    color: darkred;
    background-color: #FFE;
}

.RNs {
    color: forestgreen;
    background-color: #EFE;
}

.hpPanel {
    background-color: #DDD;
}

.card.dashlet .card-body {
    max-height: 25rem;
    overflow-y: auto;
}

.containerScroll {
    overflow-y: auto;
    max-height: 80vh;
}
/*
#helpAccordion {
    background-color: var(--pageBackground);
    width: 100%;
    margin: 10px;
}

    #helpAccordion > div.card {
        border: none;
        padding: 0 !important;
    }

        #helpAccordion > div.card > div.card-header {
            border: none;
            padding: 0 !important;
        }

    #helpAccordion > div.level_1 {
        font-weight: bold;
        padding: 0 !important;
        background-color: #E0E0E0;
    }

div.card-header.level_2 {
    padding: 0 0 0 20px;
    background-color: #F0F0F0;
}

div.level_3 {
    padding: 4px 0 4px 40px;
    background-color: #F8F8F8;
}
*/

/* Sticky table headers and footers */
thead.sticky {
    position: sticky;
    top: 74px;
}
tfoot.sticky {
    position: sticky;
    bottom: 41px;
}

/* Focus styles for CSS fake checkboxes */
input[type="checkbox"]:focus + i::before {
    outline: rgb(38, 143, 255) auto 5px;
    /*box-shadow: 0 0 5px 5px rgba(38, 143, 255, 0.5);*/
}


/* Focus styles for DX widgets */
.dx-button:focus     {
    outline: rgb(38, 143, 255) auto 5px;
}

/* Show only on hover */
.hoveronly {
    opacity: 0;
}
a:hover + i.hoveronly {
    opacity: 1;
}

/* Truncated long text table columns */
.truncate-column {
    max-width: 300px;
}

/* Programme groups  */
.programmeGroup {

}

/* Flashing animation  */
.flashing {
    animation: flashing 2s linear infinite;
}
@keyframes flashing {
    50% {
        opacity: 0.275;
    }
}

/* Password eye fix */
.input-group-text.input-password-show, .input-group-text.input-password-hide {
    padding: 0 0.75rem;
}

.input-group-text.input-password-show i.fa, .input-group-text.input-password-hide i.fa {
    min-width: 20px;
}

/* Do not print tooltips */
@media print {
    .tooltip {
        display: none;
    }
}

/* Accordion expanded */
.accordion .card-header [data-toggle="collapse"]:not(.collapsed) {
    color: var(--primary_2);
    background: var(--secondary_2);
}




.formParent:has( a.formParentAction:hover ), .formParent:has(button.formParentAction:hover), .formFieldRow:has(a.formRowAction:hover), .formFieldRow:has(button.formRowAction:hover), .formField:has(a.formFieldAction:hover), .formField:has(button.formFieldAction:hover) {
    background-color: var(--light-grey);
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}


.formField:has(a.formFieldAction:hover), .formField:has(button.formFieldAction:hover) {
    border-color: var(--dark-grey) !important;
    -webkit-transition: border-color 500ms linear;
    -ms-transition: border-color 500ms linear;
    transition: border-color 500ms linear;
}