﻿.CoachingPlanDialog {
}

    .CoachingPlanDialog .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;
    }

    .CoachingPlanDialog .e-input-group .e-control-container .e-control-wrapper{
        width:80%;
    }

    .CoachingPlanDialog .e-control .e-btn .e-lib{
        margin-left:1em;
    }

    .CoachingPlanDialog .notsaving {
        display: none;
    }

    .CoachingPlanDialog .e-dlg-content {
        background-color: #EEEEEE;
        padding: 0px !important;
        overflow-y: scroll !important;
    }

    .CoachingPlanDialog textarea {
        width: 100%;
    }

    .CoachingPlanDialog select[data-chosen] {
        border-radius: 0px;
        border: 1px solid #333333;
    }

    .CoachingPlanDialog .logo {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
    }

    .CoachingPlanDialog .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%;
        background-color: #EEEEEE;
    }

    .CoachingPlanDialog .main-plan {
        width: 100%;
        padding-left: 28px;
        padding-right: 28px;
    }

    .CoachingPlanDialog .heading-plan {
        font-size: 1.6em;
    }

    .CoachingPlanDialog .max-button {
        width: 100%;
        height: 100%;
        background-color: #333333;
        color: #FFFFFF;
        border: 1px solid #333333;
    }

    .CoachingPlanDialog .max-select {
        background-color: #333333;
        color: #FFFFFF;
        width: 100%;
        height: 100%;
        border: 1px solid #333333;
        border-radius: 0px;
        text-align: center;
    }

        .CoachingPlanDialog .max-select[data-chosen] {
            border: 10px solid #0000FF;
            border-radius: 0px;
        }

    .CoachingPlanDialog .select-mid {
        width: 100%;
    }

    .CoachingPlanDialog .multiselect {
        width: 100%;
        display: inline;
        z-index: 1;
    }

    .CoachingPlanDialog .selectBox {
        position: relative;
    }

        .CoachingPlanDialog .selectBox select {
            width: 100%;
        }

    .CoachingPlanDialog .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding-left: 3px;
    }

    .CoachingPlanDialog .check-multi {
        display: none;
        position: absolute;
        border: 1px #dadada solid;
        width: 188px;
        padding: 3px;
        max-height: 100px;
        overflow: auto;
        z-index: 2;
    }

        .CoachingPlanDialog .check-multi label {
            display: block;
        }

    .CoachingPlanDialog .check-multi-wide {
        display: none;
        position: absolute;
        border: 1px #dadada solid;
        width: 998px;
        padding: 3px;
        max-height: 100px;
        overflow: auto;
        z-index: 2;
    }

        .CoachingPlanDialog .check-multi-wide label {
            display: block;
        }

    .CoachingPlanDialog .filter-arrow {
        width: 16px;
        padding-left: 4px;
    }

    .CoachingPlanDialog .icon-edit {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .CoachingPlanDialog .lowlight {
        background-color: #FFFFFF;
        color: #000000;
        cursor: pointer;
    }

        .CoachingPlanDialog .lowlight:hover {
            background-color: #EEEEEE;
        }

    .CoachingPlanDialog .highlight {
        background-color: #333333;
        color: #FFFFFF;
        cursor: pointer;
    }

.tooltips {
    background-color: #333333;
    color: #FFFFFF;
}

.tooltipsdisabled {
    background-color: transparent !important;
    border-color: transparent !important;
}

.CoachingPlanDialog .red {
    background-color: #FF6666;
    color: white;
}

.CoachingPlanDialog .amber {
    background-color: #FFCC33;
    color: white;
}

.CoachingPlanDialog .green {
    background-color: #33CC99;
    color: white;
}

/* =========================================================== */
.CoachingPlanDialog .plan-logo {
    border: 1px solid #000000;
    top: 16px;
    left: 508px;
}

.CoachingPlanDialog .menu-content {
    position: absolute;
    width: 200px;
    height: 27px;
    top: 506px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
}

.CoachingPlanDialog .menu-icon {
    padding-left: 10px;
    padding-right: 8px;
    height: 27px;
}

.CoachingPlanDialog .menu-label {
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    display: inline-block;
}

.CoachingPlanDialog .filter {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1250px;
    height: 63px;
    margin-top: 45px;
    margin-left: 220px;
}

.CoachingPlanDialog .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);
}

    .CoachingPlanDialog .filter-button:hover {
        background-color: #34536C;
        cursor: pointer;
    }

.CoachingPlanDialog .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);
}

    .CoachingPlanDialog .filter-dropdown:hover {
        background-color: #34536C;
    }

.CoachingPlanDialog .filter-search {
    position: relative;
    clear: left;
    height: 27px;
    width: 400px;
    display: flex;
    align-items: center;
}

.CoachingPlanDialog .search-label {
    /*font-family: Century Gothic;*/
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
}

.CoachingPlanDialog .search-box {
    width: 210px;
    border: none;
    border-radius: 5px;
}

.CoachingPlanDialog .search-button {
    padding-left: 8px;
}

.CoachingPlanDialog .main-content {
    position: absolute;
    top: 108px;
    left: 220px;
    width: 1250px;
    height: 1144px;
}

.CoachingPlanDialog .heading-row {
    position: relative;
    width: 1250px;
    height: 48px;
    background-color: #FFFFFF;
}

.CoachingPlanDialog .heading-cell {
    position: relative;
    /*font-family: Century Gothic;*/
    font-size: 11pt;
    width: 101px;
    height: 32px;
    padding: 6px;
    float: left;
    display: flex;
    align-items: center;
}

.CoachingPlanDialog .content-container {
    position: relative;
    width: 1250px;
    height: 1096px;
}

.CoachingPlanDialog .content-row {
    position: relative;
    width: 1250px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
}

    .CoachingPlanDialog .content-row:hover {
        background-color: #EEEEEE;
    }

.CoachingPlanDialog .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;
}

.CoachingPlanDialog .disabled {
    background-color: #DDDDDD;
    color: #999999;
}

.CoachingPlanDialog .media {
    width: 65px;
}

.CoachingPlanDialog .media-icon {
    height: 23px;
}

    .CoachingPlanDialog .media-icon:hover {
        cursor: pointer;
    }

.CoachingPlanDialog .outlet {
    width: 419px;
}

.CoachingPlanDialog .project {
    width: 140px;
}

.CoachingPlanDialog .wave {
    width: 266px;
}

.CoachingPlanDialog .latest {
    width: 100px;
}

.CoachingPlanDialog .status {
    width: 88px;
}

.CoachingPlanDialog .light {
    color: #FFFFFF;
}

.CoachingPlanDialog .dark {
    color: #333333;
}

.CoachingPlanDialog .centre {
    justify-content: center;
    text-align: center;
}

.CoachingPlanDialog .comment {
    width: 295px;
    align-items: left;
    justify-content: left;
    padding-left: 5px;
}

.CoachingPlanDialog .checkbox {
    clear: left;
    float: left;
    width: 26px;
    height: 23px;
    display: flex;
    align-items: center;
}

.CoachingPlanDialog .checkbox-inline {
    float: left;
    width: 26px;
    height: 23px;
    display: flex;
    align-items: center;
}

.CoachingPlanDialog .bms-behaviour {
    float: left;
    width: 130px;
    height: 23px;
    display: flex;
    align-items: center;
}

.CoachingPlanDialog .checkbox-narrow {
    width: 20px;
}

.CoachingPlanDialog .full {
    width: 400px;
}

.CoachingPlanDialog .left {
    justify-content: left;
    padding-left: 5px;
}

.CoachingPlanDialog .qc-name {
    width: 350px;
}

.CoachingPlanDialog .note {
    clear: left;
    width: 450px;
    height: 60px;
    margin-top: 15px;
}

.CoachingPlanDialog .label {
    clear: left;
    float: left;
    width: 120px;
}

.CoachingPlanDialog .control {
    float: left;
}

.CoachingPlanDialog .disable {
    color: #A0A0A0;
}

.CoachingPlanDialog .heading-item {
    width: 218px;
    float: left;
    /*font-family: Arial;*/
    font-size: 10pt;
    padding-top: 2px;
}

.CoachingPlanDialog .link:hover {
    cursor: pointer;
    color: #0000FF;
}

.CoachingPlanDialog .group {
    margin-bottom: 0px;
    border-bottom: 0px;
}

.CoachingPlanDialog .bold {
    display: inline-flex;
    font-weight: bold;
}

.CoachingPlanDialog .right {
    justify-content: right;
    text-align: right;
}

.CoachingPlanDialog .date {
    width: 151px;
}

.CoachingPlanDialog .plan-heading {
    /*font-family: "Century Gothic";*/
    font-variant: small-caps;
    font-size: 1.6em;
    margin-top: 20px;
    margin-left: 15px;
}

.CoachingPlanDialog .plan-button {
    display: inline;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 60px;
    background-color: #333333;
    color: #FFFFFF;
}

    .CoachingPlanDialog .plan-button:hover {
        cursor: pointer;
    }

.CoachingPlanDialog .action-content {
    margin-top: 20px;
    margin-left: 15px;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    overflow: auto;
}

.CoachingPlanDialog .action-row {
    width: 450px;
    min-height: 22px;
}

.CoachingPlanDialog .action-heading {
    float: left;
    width: 176px;
    font-weight: bold;
    padding: 2px;
}

.CoachingPlanDialog .action-coachee {
    float: left;
    width: 176px;
    padding: 2px;
}

.CoachingPlanDialog .coachee-display {
    display: flex;
    overflow: auto;
    clear: left;
    margin-top: 20px;
}

.CoachingPlanDialog .action-cell {
    float: left;
    width: 266px;
    padding: 2px;
}

.CoachingPlanDialog .action-list {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 188px;
}

.CoachingPlanDialog .action-main-content {
    width: 1250px;
    height: 1144px;
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    margin-top: 20px;
    margin-left: 15px;
}

.CoachingPlanDialog .action-main-heading {
    float: left;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 6px;
    min-height: 36px;
}

.CoachingPlanDialog .action-main-row {
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

    .CoachingPlanDialog .action-main-row:hover {
        background-color: #EEEEEE;
        color: #000000;
        cursor: pointer;
    }

.CoachingPlanDialog .action-main-cell {
    float: left;
    display: flex;
    align-items: center;
    padding: 6px;
}

.CoachingPlanDialog .action-qno {
    width: 38px;
}

.CoachingPlanDialog .action-q {
    width: 588px;
}

.CoachingPlanDialog .action-evaldate {
    width: 138px;
}

.CoachingPlanDialog .action-startdate {
    width: 138px;
}

.CoachingPlanDialog .action-completedate {
    width: 138px;
}

.CoachingPlanDialog .action-status {
    width: 138px;
}

.CoachingPlanDialog .hidden {
    display: none;
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

.CoachingPlanDialog .show {
    display: block;
    width: 1250px;
    background-color: #FFFFFF;
    overflow: auto;
}

.CoachingPlanDialog .action-item {
    float: left;
    width: 1238px;
    padding: 6px;
}

.CoachingPlanDialog .action-actions {
    font-weight: bold;
    border-bottom: 1px dotted #000000;
    margin-bottom: 6px;
}

.CoachingPlanDialog .action-textarea {
    /*font-family: "Century Gothic";*/
    font-size: 10pt;
    width: 1238px;
    margin-top: 6px;
}

.CoachingPlanDialog .mini {
    width: 238px;
}

.CoachingPlanDialog .action-button {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    background-color: #333333;
    color: #FFFFFF;
}

.CoachingPlanDialog .action-text {
    /*font-family: "Century Gothic";*/
    font-size: 11pt;
    width: 180px;
}

.CoachingPlanDialog .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;
}

.CoachingPlanDialog .mediaitem {
    display: table-cell;
    float: left;
    /*width: 175px;*/
    vertical-align: middle;
    padding: 5px;
    text-align: left;
}

.CoachingPlanDialog .mediaitemimgwrapper {
    display: inline-block;
    /*height: 20px;*/
    width: 30px;
    vertical-align: middle;
}

.CoachingPlanDialog .mediaitemimgwrapperright {
    display: inline-block;
    /*height: 20px;*/
    width: 30px;
    vertical-align: middle;
    text-align: right;
}

.CoachingPlanDialog .mediaitemimgwrapper img {
    cursor: pointer;
}

.CoachingPlanDialog .mediaitemimgwrapperright img {
    cursor: pointer;
}

.CoachingPlanDialog .mediaitemlabel {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
    padding-top: 2px;
}

.CoachingPlanDialog .mediaitemdownloadimg {
}

.CoachingPlanDialog .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    width: 100%
}

.CoachingPlanDialog .e-accordion .e-acrdn-item.e-select {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    padding-bottom: 4px; /*To prevent the accordion highlight slipping behind subsequent divs*/
}

    .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select:focus {
        background-color: #EEEEEE !important;
    }

    .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
        background-color: #333333 !important;
    }

        .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
            color: #FFFFFF !important;
        }

.CoachingPlanDialog .e-accordion .e-acrdn-item .e-toggle-icon {
    color: #000000 !important;
}

.CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .CoachingPlanDialog .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    color: #FFFFFF !important;
}

.CoachingPlanDialog .e-accordion .e-acrdn-item .e-acrdn-header {
    padding: 10px 0px 0px 0px !important;
}

.CoachingPlanDialog .bmspanel {
    background-color: #dee2e6;
    border-radius: 12px;
}

    .CoachingPlanDialog .bmspanel .characteristicheader {
        vertical-align: middle;
    }

        .CoachingPlanDialog .bmspanel .characteristicheader img {
            width: 42px;
        }

        .CoachingPlanDialog .bmspanel .characteristicheader label {
            font-size: 1.6em;
            font-weight: bold;
            vertical-align: middle;
        }

.CoachingPlanDialog .bmsoptionleft {
    border-radius: 12px 0px 0px 12px;
    text-align: left;
    padding-right: 14px;
    align-content: center;
    line-height: 1;
    width: 92%;
}

.CoachingPlanDialog .bmsoptionright {
    border-radius: 0px 12px 12px 0px;
    text-align: right;
    padding-left: 0px;
    align-content: center;
    line-height: 1;
    width: 6%;
    align-content: center;
}

.CoachingPlanDialog .bmspositivebg {
    background-color: #33CC99;
}

    .CoachingPlanDialog .bmspositivebg .e-label {
        color: black !important;
        display: inline-flex;
        pointer-events: all; /*disabled bms traits will still show tool-tips*/
    }

.CoachingPlanDialog .bmsnegativebg {
    background-color: #FF6666;
}

    .CoachingPlanDialog .bmsnegativebg .e-label {
        color: White !important;
        display: inline-flex;
        pointer-events: all; /*disabled bms traits will still show tool-tips*/
    }

.CoachingPlanDialog .bmspositiveheader {
    color: #33CC99;
    text-align: center;
    font-weight: bold;
}

.CoachingPlanDialog .bmsnegativeheader {
    color: #FF6666;
    text-align: center;
    font-weight: bold;
}

.CoachingPlanDialog .e-checkbox-wrapper.e-checkbox-disabled .e-frame:not(.e-check) {
    background-color: lightgray !important;
}

.CoachingPlanDialog .invalidActionPlanItem {
    box-shadow: 0 0 0 1px red;
}

.CoachingPlanDialog .invalidActionPlanTextItem {
    color: red;
}

.CoachingPlanDialog .InvisibleButton {
    border: none;
    background: transparent;
    box-shadow: none;
    width: auto;
    height: auto;
}

/* Progress bar styling */
.CoachingPlanDialog .StepperStepAmber.e-step-selected .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #FFBF00 !important;
    background: #FFBF00 !important;
    color: black;
}

.CoachingPlanDialog .StepperStepGreen.e-step-selected .e-step {
    box-shadow: 0 0 0 2px #dee2e6, 0 0 0 4px #008000 !important;
    background: #008000 !important;
    color: white;
}

.CoachingPlanDialog .e-step-completed .e-step {
    box-shadow: 0 0 0 2px #dee2e6 !important;
    background: #999999 !important;
    color: white;
}

.CoachingPlanDialog .Stepper {
    width: 100%;
}

/*.CoachingPlanDialog .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;
}*/

.CoachingPlanDialog .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;*/
}

/*.CoachingPlanDialog .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 */
.CoachingPlanDialog .e-stepper-progressbar {
    --progress-top-position: 48% !important;
}
/* Fixes an issue where the input element of a styled dropdown is set to readonly.. */
.CoachingPlanDialog .max-select .e-input[readonly] {
    color: white !important;
    text-align: center !important;
}
.CoachingPlanDialog .max-select .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
    color: white !important;
    text-align: center !important;
}
