/* bugid#38420 round 3 (Lloyd, 27 Aug): every rule in this file was scoped to the DIALOG's
   .ActionPlanItemDialog class, so on the routed full page (bugid#38420) none of it applied -
   unstyled buttons, a mismatched status dropdown, and the "continued saving spinning wheel"
   (the .notsaving hide rule never fired; the spinner is always in the markup and the dialog
   simply hid it). Every selector now also carries .ActionPlanItemHost, the routed page's
   wrapper class, plus the handful of host-specific rules at the end of the file. */
.ActionPlanItemDialog {
}

.ActionPlanItemDialog .saving, .ActionPlanItemHost .saving {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(200, 200, 200, 0.5);
        text-align: center;
        display: grid;
        align-content: center;
    }

.ActionPlanItemDialog .notsaving, .ActionPlanItemHost .notsaving {
        display: none;
    }

.ActionPlanItemDialog .e-dlg-content, .ActionPlanItemHost .e-dlg-content {
        background-color: #EEEEEE;
        padding: 0px !important;
        overflow-y: scroll !important;
    }

.ActionPlanItemDialog textarea, .ActionPlanItemHost textarea {
        width: 100%;
    }

.ActionPlanItemDialog select[data-chosen], .ActionPlanItemHost select[data-chosen] {
        border-radius: 0px;
        border: 1px solid #333333;
    }

.ActionPlanItemDialog .logo, .ActionPlanItemHost .logo {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
    }

.ActionPlanItemDialog .main {
        /*TODO: fix this (expands beyond 100% container when viewing BMS items.. remove max-width to test)*/
        max-width: 1325px;
        min-width: 1325px;
        width: 100%;
        height: 100%;
        /* bugid#38420 round 4 (Lloyd, 28 Aug): white, not the old #EEEEEE - the light box drawn
           round the whole plan (.ActionPlanItemHost) is what separates it from the page now */
        background-color: #FFFFFF;
    }

.ActionPlanItemDialog .main-plan, .ActionPlanItemHost .main-plan {
        width: 100%;
        padding-left: 28px;
        padding-right: 28px;
    }

.ActionPlanItemDialog .heading-plan, .ActionPlanItemHost .heading-plan {
        font-size: 1.6em;
    }

.ActionPlanItemDialog .max-button, .ActionPlanItemHost .max-button {
        width: 100%;
        height: 100%;
        background-color: #333333;
        color: #FFFFFF;
        border: 1px solid #333333;
        border-radius: 4px;
    }

.ActionPlanItemDialog .max-select, .ActionPlanItemHost .max-select {
        width: 100%;
        height: 100%;
        background-color: #333333;
        color: #FFFFFF;
        border: 1px solid #333333 !important;
        border-radius: 4px;
        text-align: center;
        font-family: "Comfortaa";
    }

.ActionPlanItemDialog .max-select[data-chosen], .ActionPlanItemHost .max-select[data-chosen] {
            border: 10px solid #0000FF;
            border-radius: 0px;
        }

.ActionPlanItemDialog .select-mid, .ActionPlanItemHost .select-mid {
        width: 100%;
    }

.ActionPlanItemDialog .multiselect, .ActionPlanItemHost .multiselect {
        width: 100%;
        display: inline;
        z-index: 1;
    }

.ActionPlanItemDialog .selectBox, .ActionPlanItemHost .selectBox {
        position: relative;
    }

.ActionPlanItemDialog .selectBox select, .ActionPlanItemHost .selectBox select {
            width: 100%;
        }

.ActionPlanItemDialog .overSelect, .ActionPlanItemHost .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding-left: 3px;
    }

.ActionPlanItemDialog .check-multi, .ActionPlanItemHost .check-multi {
        display: none;
        position: absolute;
        border: 1px #dadada solid;
        width: 188px;
        padding: 3px;
        max-height: 100px;
        overflow: auto;
        z-index: 2;
    }

.ActionPlanItemDialog .check-multi label, .ActionPlanItemHost .check-multi label {
            display: block;
        }

.ActionPlanItemDialog .check-multi-wide, .ActionPlanItemHost .check-multi-wide {
        display: none;
        position: absolute;
        border: 1px #dadada solid;
        width: 998px;
        padding: 3px;
        max-height: 100px;
        overflow: auto;
        z-index: 2;
    }

.ActionPlanItemDialog .check-multi-wide label, .ActionPlanItemHost .check-multi-wide label {
            display: block;
        }

.ActionPlanItemDialog .filter-arrow, .ActionPlanItemHost .filter-arrow {
        width: 16px;
        padding-left: 4px;
    }

.ActionPlanItemDialog .icon-edit, .ActionPlanItemHost .icon-edit {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

.ActionPlanItemDialog .lowlight, .ActionPlanItemHost .lowlight {
        background-color: #FFFFFF;
        color: #000000;
        cursor: pointer;
    }

.ActionPlanItemDialog .lowlight:hover, .ActionPlanItemHost .lowlight:hover {
            background-color: #EEEEEE;
        }

.ActionPlanItemDialog .highlight, .ActionPlanItemHost .highlight {
        background-color: #333333;
        color: #FFFFFF;
        cursor: pointer;
    }

.tooltips {
    background-color: #333333;
    color: #FFFFFF;
}

.tooltipsdisabled {
    background-color: transparent !important;
    border-color: transparent !important;
}

.ActionPlanItemDialog .red {
    background-color: #FF6666;
    color: white;
}

.ActionPlanItemDialog .amber {
    background-color: #FFCC33;
    color: white;
}

.ActionPlanItemDialog .green {
    background-color: #33CC99;
    color: white;
}

/* =========================================================== */
.ActionPlanItemDialog .plan-logo, /* =========================================================== */
.ActionPlanItemHost .plan-logo {
    border: 1px solid #000000;
    top: 16px;
    left: 508px;
}

.ActionPlanItemDialog .menu-content {
    position: absolute;
    width: 200px;
    height: 27px;
    top: 506px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
}

.ActionPlanItemDialog .menu-icon {
    padding-left: 10px;
    padding-right: 8px;
    height: 27px;
}

.ActionPlanItemDialog .menu-label {
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    display: inline-block;
}

.ActionPlanItemDialog .filter {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1250px;
    height: 63px;
    margin-top: 45px;
    margin-left: 220px;
}

.ActionPlanItemDialog .filter-button {
    position: relative;
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    color: #FFFFFF;
    width: 220px;
    height: 16px;
    padding: 10px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(51,51,51,1);
}

.ActionPlanItemDialog .filter-button:hover, .ActionPlanItemHost .filter-button:hover {
        background-color: #34536C;
        cursor: pointer;
    }

.ActionPlanItemDialog .filter-dropdown {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    margin-right: 10px;
    background-color: rgba(51,51,51,1);
}

.ActionPlanItemDialog .filter-dropdown:hover, .ActionPlanItemHost .filter-dropdown:hover {
        background-color: #34536C;
    }

.ActionPlanItemDialog .filter-search {
    position: relative;
    clear: left;
    height: 27px;
    width: 400px;
    display: flex;
    align-items: center;
}

.ActionPlanItemDialog .search-label {
    /*font-family: Century Gothic;*/
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
}

.ActionPlanItemDialog .search-box {
    width: 210px;
    border: none;
    border-radius: 5px;
}

.ActionPlanItemDialog .search-button {
    padding-left: 8px;
}

.ActionPlanItemDialog .main-content {
    position: absolute;
    top: 108px;
    left: 220px;
    width: 1250px;
    height: 1144px;
}

.ActionPlanItemDialog .heading-row {
    position: relative;
    width: 1250px;
    height: 48px;
    background-color: #FFFFFF;
}

.ActionPlanItemDialog .heading-cell {
    position: relative;
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    width: 101px;
    height: 32px;
    padding: 6px;
    float: left;
    display: flex;
    align-items: center;
}

.ActionPlanItemDialog .content-container {
    position: relative;
    width: 1250px;
    height: 1096px;
}

.ActionPlanItemDialog .content-row {
    position: relative;
    width: 1250px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
}

.ActionPlanItemDialog .content-row:hover, .ActionPlanItemHost .content-row:hover {
        background-color: #EEEEEE;
    }

.ActionPlanItemDialog .content-cell {
    position: relative;
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    width: 101px;
    padding: 6px;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ActionPlanItemDialog .disabled {
    background-color: #DDDDDD;
    color: #999999;
}

.ActionPlanItemDialog .media {
    width: 65px;
}

.ActionPlanItemDialog .media-icon {
    height: 23px;
}

.ActionPlanItemDialog .media-icon:hover, .ActionPlanItemHost .media-icon:hover {
        cursor: pointer;
    }

.ActionPlanItemDialog .outlet {
    width: 419px;
}

.ActionPlanItemDialog .project {
    width: 140px;
}

.ActionPlanItemDialog .wave {
    width: 266px;
}

.ActionPlanItemDialog .latest {
    width: 100px;
}

.ActionPlanItemDialog .status {
    width: 88px;
}

.ActionPlanItemDialog .light {
    color: #FFFFFF;
}

.ActionPlanItemDialog .dark {
    color: #333333;
}

.ActionPlanItemDialog .centre {
    justify-content: center;
    text-align: center;
}

.ActionPlanItemDialog .comment {
    width: 295px;
    align-items: left;
    justify-content: left;
    padding-left: 5px;
}

.ActionPlanItemDialog .checkbox {
    clear: left;
    float: left;
    width: 26px;
    height: 23px;
    display: flex;
    align-items: center;
}

.ActionPlanItemDialog .checkbox-inline {
    float: left;
    width: 26px;
    height: 23px;
    display: flex;
    align-items: center;
}

.ActionPlanItemDialog .bms-behaviour {
    float: left;
    width: 130px;
    height: 23px;
    display: flex;
    align-items: center;
}

.ActionPlanItemDialog .checkbox-narrow {
    width: 20px;
}

.ActionPlanItemDialog .full {
    width: 400px;
}

.ActionPlanItemDialog .left {
    justify-content: left;
    padding-left: 5px;
}

.ActionPlanItemDialog .qc-name {
    width: 350px;
}

.ActionPlanItemDialog .note {
    clear: left;
    width: 450px;
    height: 60px;
    margin-top: 15px;
}

.ActionPlanItemDialog .label {
    clear: left;
    float: left;
    width: 120px;
}

.ActionPlanItemDialog .control {
    float: left;
}

.ActionPlanItemDialog .disable {
    color: #A0A0A0;
}

.ActionPlanItemDialog .heading-item {
    width: 218px;
    float: left;
    /*font-family: Arial;*/
    font-size: 10pt;
    padding-top: 2px;
}

.ActionPlanItemDialog .link:hover {
    cursor: pointer;
    color: #0000FF;
}

.ActionPlanItemDialog .group {
    margin-bottom: 0px;
    border-bottom: 0px;
}

.ActionPlanItemDialog .bold {
    display: inline-flex;
    font-weight: bold;
}

.ActionPlanItemDialog .right {
    justify-content: right;
    text-align: right;
}

.ActionPlanItemDialog .date {
    width: 151px;
}

.ActionPlanItemDialog .plan-heading {
    /*font-family: "Century Gothic";*/
    font-variant: small-caps;
    font-size: 1.6em;
    margin-top: 20px;
    margin-left: 15px;
}

.ActionPlanItemDialog .plan-button {
    display: inline;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 60px;
    background-color: #333333;
    color: #FFFFFF;
}

.ActionPlanItemDialog .plan-button:hover, .ActionPlanItemHost .plan-button:hover {
        cursor: pointer;
    }

.ActionPlanItemDialog .action-content {
    margin-top: 20px;
    margin-left: 15px;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    overflow: auto;
}

.ActionPlanItemDialog .action-row {
    width: 450px;
    min-height: 22px;
}

.ActionPlanItemDialog .action-heading {
    float: left;
    width: 176px;
    font-weight: bold;
    padding: 2px;
}

.ActionPlanItemDialog .action-coachee {
    float: left;
    width: 176px;
    padding: 2px;
}

.ActionPlanItemDialog .coachee-display {
    display: flex;
    overflow: auto;
    clear: left;
    margin-top: 20px;
}

.ActionPlanItemDialog .action-cell {
    float: left;
    width: 266px;
    padding: 2px;
}

.ActionPlanItemDialog .action-list {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 188px;
}

.ActionPlanItemDialog .action-main-content {
    width: 1250px;
    height: 1144px;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    margin-top: 20px;
    margin-left: 15px;
}

.ActionPlanItemDialog .action-main-heading {
    float: left;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 6px;
    min-height: 36px;
}

.ActionPlanItemDialog .action-main-row {
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

.ActionPlanItemDialog .action-main-row:hover, .ActionPlanItemHost .action-main-row:hover {
        background-color: #EEEEEE;
        color: #000000;
        cursor: pointer;
    }

.ActionPlanItemDialog .action-main-cell {
    float: left;
    display: flex;
    align-items: center;
    padding: 6px;
}

.ActionPlanItemDialog .action-qno {
    width: 38px;
}

.ActionPlanItemDialog .action-q {
    width: 588px;
}

.ActionPlanItemDialog .action-evaldate {
    width: 138px;
}

.ActionPlanItemDialog .action-startdate {
    width: 138px;
}

.ActionPlanItemDialog .action-completedate {
    width: 138px;
}

.ActionPlanItemDialog .action-status {
    width: 138px;
}

.ActionPlanItemDialog .hidden {
    display: none;
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

.ActionPlanItemDialog .show {
    display: block;
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

.ActionPlanItemDialog .action-item {
    float: left;
    width: 1238px;
    padding: 6px;
}

.ActionPlanItemDialog .action-actions, .ActionPlanItemHost .action-actions {
    font-weight: bold;
    border-bottom: 1px dotted #000000;
    margin-bottom: 6px;
}

.ActionPlanItemDialog .action-textarea {
    /*font-family: "Century Gothic";*/
    font-size: 10pt;
    width: 1238px;
    margin-top: 6px;
}

.ActionPlanItemDialog .mini {
    width: 238px;
}

.ActionPlanItemDialog .action-button {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    background-color: #333333;
    color: #FFFFFF;
}

.ActionPlanItemDialog .action-text {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 180px;
}

.ActionPlanItemDialog .medialist {
    display: none;
    border-radius: 5px;
    z-index: 1;
    color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 232px;
    /*font-family: "Century Gothic";*/
    font-size: 10pt;
    line-height: 18px;
    margin: 10px;
    padding: 6px;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    background-color: White;
}

.ActionPlanItemDialog .mediaitem {
    display: table-cell;
    float: left;
    /*width: 175px;*/
    vertical-align: middle;
    padding: 5px;
    text-align: left;
}

.ActionPlanItemDialog .mediaitemimgwrapper {
    display: inline-block;
    /*height: 20px;*/
    width: 30px;
    vertical-align: middle;
}

.ActionPlanItemDialog .mediaitemimgwrapperright {
    display: inline-block;
    /*height: 20px;*/
    width: 30px;
    vertical-align: middle;
    text-align: right;
}

.ActionPlanItemDialog .mediaitemimgwrapper img {
    cursor: pointer;
}

.ActionPlanItemDialog .mediaitemimgwrapperright img {
    cursor: pointer;
}

.ActionPlanItemDialog .mediaitemlabel {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
    padding-top: 2px;
}

.ActionPlanItemDialog .mediaitemdownloadimg {
}

.ActionPlanItemDialog .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    width: 100%
}

.ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select {
    border: none !important;
    padding-bottom: 4px; /*To prevent the accordion highlight slipping behind subsequent divs*/
}

/*    .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select:focus, /*    .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select:focus {
        background-color: #EEEEEE !important;
    }

.ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
        background-color: #333333 !important;
    }
*/
/*        .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, */
/*        .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
            color: #FFFFFF !important;
        }*/

.ActionPlanItemDialog .e-accordion .e-acrdn-item .e-toggle-icon,

.ActionPlanItemHost .e-accordion .e-acrdn-item .e-toggle-icon {
    color: #000000 !important;
}

/*.ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, /*.ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .ActionPlanItemDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon, .ActionPlanItemHost .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: #FFFFFF !important;
}
*/
.ActionPlanItemDialog .e-accordion .e-acrdn-item .e-acrdn-header,
.ActionPlanItemHost .e-accordion .e-acrdn-item .e-acrdn-header {
    padding: 10px 0px 0px 0px !important;
}

.ActionPlanItemDialog .bmspanel, .ActionPlanItemHost .bmspanel {
    background-color: #dee2e6;
    border-radius: 12px;
}

.ActionPlanItemDialog .bmspanelredborder, .ActionPlanItemHost .bmspanelredborder {
    border: 1px solid red;
}

.ActionPlanItemDialog .bmspanelwhiteborder, .ActionPlanItemHost .bmspanelwhiteborder {
    border: 1px solid white;
}

.ActionPlanItemDialog .bmspanel .characteristicheader, .ActionPlanItemHost .bmspanel .characteristicheader {
        vertical-align: middle;
    }

.ActionPlanItemDialog .bmspanel .characteristicheader img, .ActionPlanItemHost .bmspanel .characteristicheader img {
            width: 42px;
        }

.ActionPlanItemDialog .bmspanel .characteristicheader label, .ActionPlanItemHost .bmspanel .characteristicheader label {
            font-size: 1.6em;
            font-weight: bold;
            vertical-align: middle;
        }

.ActionPlanItemDialog .bmsoptionleft, .ActionPlanItemHost .bmsoptionleft {
    border-radius: 12px 0px 0px 12px;
    text-align: left;
    padding-right: 14px;
    align-content: center;
    line-height: 1;
    width: 92%;
}

.ActionPlanItemDialog .bmsoptionright, .ActionPlanItemHost .bmsoptionright {
    border-radius: 0px 12px 12px 0px;
    text-align: right;
    padding-left: 0px;
    align-content: center;
    line-height: 1;
    width: 6%;
    align-content: center;
}

.ActionPlanItemDialog .bmspositivebg, .ActionPlanItemHost .bmspositivebg {
    background-color: #33CC99;
}

.ActionPlanItemDialog .bmspositivebg .e-label, .ActionPlanItemHost .bmspositivebg .e-label {
        color: black !important;
        display: inline-flex;
        pointer-events: all; /*disabled bms traits will still show tool-tips*/
    }

.ActionPlanItemDialog .bmsnegativebg, .ActionPlanItemHost .bmsnegativebg {
    background-color: #FF6666;
}

.ActionPlanItemDialog .bmsnegativebg .e-label, .ActionPlanItemHost .bmsnegativebg .e-label {
        color: White !important;
        display: inline-flex;
        pointer-events: all; /*disabled bms traits will still show tool-tips*/
    }

.ActionPlanItemDialog .bmspositiveheader, .ActionPlanItemHost .bmspositiveheader {
    color: #33CC99;
    text-align: center;
    font-weight: bold;
}

.ActionPlanItemDialog .bmsnegativeheader, .ActionPlanItemHost .bmsnegativeheader {
    color: #FF6666;
    text-align: center;
    font-weight: bold;
}

.ActionPlanItemDialog .e-checkbox-wrapper.e-checkbox-disabled .e-frame:not(.e-check), .ActionPlanItemHost .e-checkbox-wrapper.e-checkbox-disabled .e-frame:not(.e-check) {
    background-color: lightgray !important;
}

.ActionPlanItemDialog .invalidActionPlanItem, .ActionPlanItemHost .invalidActionPlanItem {
    box-shadow: 0 0 0 1px red;
}

.ActionPlanItemDialog .invalidActionPlanTextItem, .ActionPlanItemHost .invalidActionPlanTextItem {
    color: red;
}

.ActionPlanItemDialog .InvisibleButton, .ActionPlanItemHost .InvisibleButton {
    border: none;
    background: transparent;
    box-shadow: none;
    width: auto;
    height: auto;
}

/* Progress bar styling */
.ActionPlanItemDialog .StepperStepAmber.e-step-selected .e-step, /* Progress bar styling */
.ActionPlanItemHost .StepperStepAmber.e-step-selected .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #FFBF00 !important;
    background: #FFBF00 !important;
    color: black;
}

.ActionPlanItemDialog .StepperStepGreen.e-step-selected .e-step, .ActionPlanItemHost .StepperStepGreen.e-step-selected .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #008000 !important;
    background: #008000 !important;
    color: white;
}

.ActionPlanItemDialog .e-step-completed .e-step, .ActionPlanItemHost .e-step-completed .e-step {
    box-shadow: 0 0 0 2px #dee2e6 !important;
    background: #999999 !important;
    color: white;
}

.ActionPlanItemDialog .Stepper, .ActionPlanItemHost .Stepper {
    width: 100%;
}

/*.ActionPlanItemDialog .e-stepper:not(.e-steps-focus) .e-step-selected .e-step, /*.ActionPlanItemHost .e-stepper:not(.e-steps-focus) .e-step-selected .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #0d6efd, 0 0 0 8px #dee2e6;
}*/

.ActionPlanItemDialog .e-stepper .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,

.ActionPlanItemHost .e-stepper .e-step-container:not(.e-step-focus).e-step-notstarted .e-step, .e-stepper.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
    box-shadow: 0 0 0 1px #999999;
    background-color: #dee2e6;
    /*border: 1px solid #0d6efd;*/
}

/*.ActionPlanItemDialog .e-stepper .e-step-container:not(.e-step-focus).e-step-completed .e-step, /*.ActionPlanItemHost .e-stepper .e-step-container:not(.e-step-focus).e-step-completed .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #0d6efd, 0 0 0 8px #dee2e6;
    background: #0d6efd;
}*/

/* Fixes an issue where the progress bar appears at the top of the div */
.ActionPlanItemDialog .e-stepper-progressbar,

/* Fixes an issue where the progress bar appears at the top of the div */
.ActionPlanItemHost .e-stepper-progressbar {
    --progress-top-position: 48% !important;
}
/* Fixes an issue where the input element of a styled dropdown is set to readonly.. */
.ActionPlanItemDialog .max-select .e-input[readonly], /* Fixes an issue where the input element of a styled dropdown is set to readonly.. */
.ActionPlanItemHost .max-select .e-input[readonly] {
    color: white !important;
    text-align: center !important;
}
.ActionPlanItemDialog .max-select .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon, .ActionPlanItemHost .max-select .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
    color: white !important;
    text-align: center !important;
}


/* ---- bugid#38420 round 3: page-host specifics + the label-left parameter rows ---- */
/* bugid#38420 round 4 (Lloyd, 28 Aug): the plan sits in one light box that starts ABOVE the
   "< Back" link and closes under the bottom of the plan, on a white ground - the #EEEEEE the
   plan was designed on has gone. */
.ActionPlanItemHost {
    position: relative; /* the .saving overlay is absolute */
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    box-sizing: border-box;
}

    .ActionPlanItemHost .fullPageBody {
        background-color: #FFFFFF;
    }

    /* the sticky header is the box's top edge - follow its rounding so it does not square off
       the corners as the plan scrolls under it */
    .ActionPlanItemHost .fullPageHeader {
        border-radius: 6px 6px 0 0;
    }

/* labels sit LEFT of the white boxes (Lloyd's retest, per the mockup) */
.ActionPlanItemDialog .apParamRow, .ActionPlanItemHost .apParamRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* round 4: wide enough for "Follow-Up Date" on one line - wrapping it was what threw the label
   off the date box beside it */
.ActionPlanItemDialog .apParamLabel, .ActionPlanItemHost .apParamLabel {
    flex: 0 0 128px;
    white-space: nowrap;
}

.ActionPlanItemDialog .apParamControl, .ActionPlanItemHost .apParamControl {
    flex: 1;
    min-width: 0;
}

/* the follow-up prompt, on its own line under the date box: indented past the label column
   (128px label + 8px gap) so it starts on the box's left edge */
.ActionPlanItemDialog .apParamHint, .ActionPlanItemHost .apParamHint {
    margin-left: 136px;
    font-size: 10px;
    line-height: 1.4;
}

/* View Mystery Shop matches the sidebar dark grey (was black); round 4 puts it on its own row
   under the Evaluation Date, sized like the "+ Add" button it now sits level with */
.ActionPlanItemDialog .mystery-button, .ActionPlanItemHost .mystery-button {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
    border-radius: 4px;
    text-align: center !important;
    width: 100%;
}

/* ---- bugid#38420 round 5: the full-page host fills the page width ---- */
/* The 1325px min/max on .main is the DIALOG's width - the pop-up sized itself to it. On the
   routed page it capped the plan at 1325px and left a dead band down the right of the screen,
   so the plan is fluid here: it takes whatever the page gives it and the BMS characteristic
   columns grow with it. */
.ActionPlanItemHost .main {
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}