:root {
    --bs-body-color: #444444;
    --cpb-light-blue: #a7dcea;
    --cpb-blue-dark: #398489;
    --cpb-blue-darker: #060860;
    --cpb-green: #20807c;
    --cpb-green-dark: #113c3c;
    --cpb-green-light-gradient: #358278ff;
    --cpb-green-light: #00EE22;
    --cpb-true-green: #018213;
    --cpb-red: #ea1e2a;
    --cpb-red-dark: #980810;
    --cpb-dark-gray: #555555;
    --cpb-medium-gray: #676767;
    --cpb-light-gray: #828282;
    --cpb-yellow: #ffff77;
    --cpb-gold: #b5b106;
    --cpb-background: #fff;
    --cpb-header: #228783; /*green*/
    --cpb-accent: #ff1b29; /*red*/
    --cpb-background-2: #a6e1e9; /*blue*/
    --cpb-charcoal: #c0c0c0; /*charcoal*/
    --cpb-text: #0c0c0c; /*almost black*/
    --cpb-text-contrast: #fcfcfc; /*almost white*/
    --cpb-text-light: #fcfcfc; /*almost white*/
}
    /*  Contents:
    Navigation Tab customizations
    KPI Table (kpiGrid)
    Monday Checkin
    WIGs
    Employee Ratings
    Calendars
    Year Stats Summary
    KPI Summary
    Daily KPI Report
    Pickling
    Awards
*/

div.form-group {
    display: flex;
    flex-wrap: wrap;
}

textarea:disabled, input:disabled {
    background-color: #ddd !important;
    border-color: #ddd !important;
    font-weight: 600;
}
/******************************************************
    Dashboard
******************************************************/
.new-alert {
    font-size: 1.5em;
    float: right;
    background-color: var(--cpb-green-light);
    padding: 0.5em;
    border-radius: 0.25em;
    color: var(--cpb-text);
}

    .new-alert a {
        color: var(--cpb-text);
    }
/******************************************************
    Navigation Tab customizations
******************************************************/
ul.nav-tabs {
    border: none;
    background-color: none;
}

.nav-tabs > li {
    border: none;
    border-right: solid 2px var(--cpb-dark-gray);
    color: var(--cpb-dark-gray) !important;
    background-color: var(--cpb-light-gray);
    margin: 0.125em 0;
    border-radius: 0.5em 0.5em 0 0;
}


.nav-tabs.flex-column > li a, .nav-tabs.flex-column > li {
    border-radius: 0 2em 2em 0;
}

.nav-tabs.flex-column > li a.active {
    background-color: var(--cpb-light-blue);
}

.nav-tabs a {
    color: var(--cpb-medium-gray);
    font-weight: 800;
    cursor: pointer;
}

.navbar-nav .nav-tabs a:hover, .navbar-nav .nav-tabs li:hover {
    color: var(--cpb-medium-gray);
    cursor: pointer;
    transition: none;
    border: none;
    /*background-color: #c4c41e;*/
    /*border-color: #c4c41e !important;*/
}

    .nav-tabs a.active:hover, .nav-tabs li.active:hover {
        color: var(--cpb-dark-gray);
        cursor: pointer;
        transition: none;
        background-color: #c4c41e;
        border: none;
    }

.nav-tabs.flex-column > li > .nav-link.active, .tab-pane.active h4 {
    color: var(--cpb-dark-gray);
    background-color: var(--cpb-light-blue);
    border-color: var(--cpb-light-blue);
}

.tab-pane.active, .nav-tabs > li > .nav-link.active {
    color: var(--cpb-background);
    background-color: var(--cpb-medium-gray);
    border-color: var(--cpb-medium-gray);
}

.nav-tabs > li:hover > .nav-link.active:hover {
    color: var(--cpb-text-light);
    transition: none;
    border-color: var(--cpb-light-gray);
}
.editMeeting {
    margin-top: -3px;
}
.editMeeting .tab-pane{
    color: var(--cpb-text);
}
.editMeeting hr {
    display: block;
    margin: 1em 0 0.5em 0;
    color: var(--cpb-text);
    border: solid 2px var(--cpb-text);
    width:calc(100% - 4em);
}
.editMeeting label {
    font-weight:600;
}
.form-group.buttons {
    justify-content: space-between;
}

.cpb.table, .kpiGrid.table {
    border: solid 2px var(--cpb-charcoal);
}

    .cpb.table th, .cpb.table td, .kpiGrid.table th, .kpiGrid.table td {
        color: var(--cpb-text);
    }

    .cpb.table tr:nth-child(even) {
        background-color: var(--cpb-background-2);
    }

    .cpb.table tr.currentWeek td {
        background-color: var(--cpb-header);
        color:var(--cpb-text-contrast)
    }

table.cpb {
    table-layout: fixed;
}

.cpb td {
    border-right: solid 1px var(--cpb-charcoal);
    padding: 0 0.5rem 0.5rem;
    height: 4rem;
    width: calc(14.28% - 1px);
    cursor: pointer;
}

    .cpb td.notEmployeed {
        background-color: var(--cpb-light-gray);
    }

    .cpb td span.d {
        clip-path: polygon( 0 0, 100% 0, 26% 100%, 0 100% );
        color: var(--cpb-dark-gray);
        background-color: var(--cpb-light-blue);
        padding: 0 3px 1px 5px;
        display: block;
        max-width: 3.5em;
        font-weight: 700;
        margin-left: -0.25em;
        margin-top: -0.25em;
    }

        .cpb td span.d.wide {
            clip-path: polygon( 0 0, 100% 0, 36% 100%, 0 100% );
        }

.cpb.short td {
    height: 2rem;
}
.cpb.shorter td {
    height: 1rem;
    padding: 0 0.5em 0 0.5em;
}


    .cpb a.btn {
        padding: 0.5em;
        margin-left: 0.25em;
    }

.cpb form button {
    color: var(--cpb-text);
    margin: 0;
    padding: 0;
}

table.kpi > thead > tr:first-child th {
    background-color: var(--cpb-light-blue);
    color: var(--cpb-text);
}

.kpi a {
    padding: 0.25em 0.25em 2em 0.25em;
    width: 100%;
    margin: 0;
    display: inline-block;
    text-decoration: none;
}

    .kpi a:hover {
        color: var(--cpb-red);
    }

/******************************************************
    Inactives
******************************************************/
table.inactives tbody th {
    background-color: var(--cpb-dark-gray);
    color:var(--cpb-text-light) !important;
    text-align:center;
}


/******************************************************
    Leaderboard Tables boardTable
******************************************************/
#nav-leaderboards, #nav-KPI {
    border-bottom:none;
}
#tabs-leaderboards, #tabs-KPI {
    border-top: none;
}
#tabs-leaderboards label {
    color: var(--cpb-header);
    font-weight:600;
    font-size: 1.4em;
}
#nav-leaderboards li, #nav-KPI li {
    border-bottom: none;
    padding:1px;
    margin-bottom:0;
}
#nav-leaderboards li {
    border: solid 1px var(--cpb-header);
}
#nav-leaderboards a, #nav-KPI a {
    border-bottom: none;
    border-radius: 0.5em 0.5em 0 0;
}
#nav-KPI a {
    color: var(--cpb-text-contrast) !important;
    font-weight:bold;
}
#nav-leaderboards a {
    background-color: var(--cpb-header);
    color: var(--cpb-text-contrast);
}
#nav-leaderboards .nav-item, #nav-KPI .nav-item {
    padding: 0;
    margin-right: 1px;
}
#nav-leaderboards li.active {
    background-color: var(--cpb-background-2);
    color: var(--cpb-dark-gray);
    border-bottom:none;
}
#nav-leaderboards a:hover {
    background-color: var(--cpb-background-2);
    color: var(--cpb-dark-gray);
}

#nav-leaderboards a.active {
    background-color: var(--cpb-background);
    color: var(--cpb-dark-gray);
    border:solid 2px var(--cpb-header);
    border-bottom:none;
}

.tab-pane.active {
    background-color: var(--cpb-background);
    border: solid 3px var(--cpb-header);
    border-top:none;
}
#tabs-leaderboards h2 {
    color:var(--cpb-dark-gray);
}
    #tabs-leaderboards h2 span {
        color: var(--cpb-text);
        font-weight: 700;
    }

.boardTable {
    width: 30%;
    margin: 0.5em 5%;
    font-weight: 600;
    border: solid 4px var(--cpb-header);
}
.boardTable th {
    background-color: var(--cpb-light-blue);
    color: var(--cpb-dark-gray);
}
    .boardTable tbody {
        color: var(--cpb-background);
        border-top: solid 4px var(--cpb-header);
    }
    .boardTable tr {
        background-color: var(--cpb-header);
    }
        .boardTable tr:nth-child(even) {
            background-color: var(--cpb-medium-gray);
        }
    .boardTable td {
        border-bottom: solid 2px var(--cpb-dark-gray);
        padding: 0.125em 1em;
    }
    .boardTable tr.highnumber td {
        background-color: var(--cpb-yellow);
        color:var(--cpb-text);
    }
.leaderboardExplanation {
    color:var(--cpb-text);
    font-size:2em;
}

/******************************************************
KPI Summary Table kpiGrid
******************************************************/
    table.kpiGrid {
        table-layout: fixed;
    }

.kpiGrid td {
    border-right: solid 1px var(--cpb-background);
    padding: 0 0.5rem 0.5rem;
}

.kpiGrid th {
    text-align: center;
    overflow: hidden;
    max-width: calc(14.28% - 1px);
}

table.kpiGrid > thead > tr th {
    background-color: var(--cpb-light-blue);
}

.kpiGrid td.revenue, .kpiGrid th.revenue {
    width:9%;
}

table.kpiGrid.kpiReport {
    width: 80%;
    margin-left: 10%;
}
.kpiGrid.kpiReport th {
    border: solid 2px var(--cpb-text) !important;
    color: var(--cpb-text) !important;
}
.kpiGrid.kpiReport td {
    text-align: right;
}
.kpiGrid.kpiReport td span{
    font-size:smaller;
}
td.colbreak {
    border-left:solid 4px var(--cpb-background);
}
th.colbreak {
    border-left: solid 4px var(--cpb-background);
}

.kpim-1 {
    margin-left: 0.5em;
}

.kpim-1 {
    margin-left: 1em;
}

.kpim-2 {
    margin-left: 2em;
}

.kpim-3 {
    margin-left: 3em;
}
.awardYear {
    font-weight:700;
    font-size:1.2rem;
}
    .awardYear:after {
        content:":";
    }
td.fail {
        border-color: var(--cpb-background) !important;
        color: #f00;
        /*border-color: var(--cpb-red-dark) !important;*/
    }

tr.hide {
    display: none;
}

.L0 i {
    margin-left: 0em;
}

.reportGroup:before {
    content: "+ "
}
.reportGroup.open:before {
    content: "- "
}
.reportGroup + div {
    display: none;
}
.reportGroup.open + div {
    display: block;
}
.awardClicker, .reportGroup {
    cursor: pointer;
}
tr.award .awardClicker:before {
    content: "+ "
}
tr.award.open .awardClicker:before {
    content: "- "
}
tr.award > td:nth-child(2) > div {
    display: none;
}
tr.award.open > td:nth-child(2) > div {
    display: block;
}

tr.month > td, tr.month > td.fail {
    border-color: var(--cpb-text) !important;
}

    tr.month > td.fail, tr.quarter > td.fail, tr.day > td.fail, tr.year > td.fail, tr.week > td.fail {
        color: var(--cpb-background) !important;
        background-color: var(--cpb-red-dark);
    }
.overridden {
    float:right;
    margin-right:-0.5em;
    padding:0.125em;
    color:var(--cpb-gold);
}
.kpiGrid .toggler {
    font-size: 20pt;
    color: var(--cpb-text-contrast);
}

.kpiGrid a:hover {
    color: #93d6c6;
}

.kpiGrid thead {
    position: sticky;
    top: 0px;
    z-index: 5
}


.L0 td, .L1 td, .L2 td, .L3 td {
    text-align: right;
}

    .L0 td:nth-child(-n + 2) {
        text-align: left;
        font-weight: 900;
    }


    .L1 td:nth-child(-n + 2) {
        text-align: left;
        font-weight: 700;
        padding-left: 2em;
    }


    .L2 td:nth-child(-n + 2) {
        text-align: left;
        font-weight: 700;
        padding-left: 3em;
    }


    .L3 td:nth-child(-n + 2) {
        text-align: left;
        font-weight: 600;
        padding-left: 4em;
    }

.kpiGrid tbody tr i {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kpiGrid tbody tr.year i {
    color: var(--cpb-text);
}

.kpiGrid tbody tr i.toggler::before {
    content: "\f4fe";
}

.kpiGrid tbody tr.open i.toggler::before {
    content: "\f2ea";
}

.cpb.kpiGrid td {
    height: 2em;
}

.kpiEditLink, .kpiEditLink:hover {
    color: var(--cpb-text) !important;
    font-size: 0.8rem;
    margin-left: 0.2em;
    float: right;
}

    .kpiEditLink::before {
        content: "(";
        position: relative;
        top: -1px;
    }

    .kpiEditLink::after {
        content: ")";
        position: relative;
        top: -1px;
    }

tr.month .kpiEditLink, tr.quarter .kpiEditLink {
    color: var(--cpb-text-light) !important;
    font-weight: 400;
    margin-left: auto;
}
tr.year .kpiEditLink {
    font-weight: 400;
    margin-left: auto;
}
.kpiGrid td.hasNote::after {
    content: "\1F589";
    position: relative;
    left: 0.25em;
    top: 1px;
}

tr.year > td {
    background-color: var(--cpb-light-blue);
    color: var(--cpb-text) !important;
    font-weight: 800;
}

tr.quarter > td {
    background-color: var(--cpb-dark-gray);
    color: var(--cpb-text-light) !important;
}

tr.month > td, tr.week > td {
    background-color: var(--cpb-blue-dark);
    color: var(--cpb-text-light) !important;
}
td.ah::before, td.mh::before, td.yh::before {
    float: left;
    position: relative;
    color: var(--cpb-gold);
    text-shadow: 2px 2px 3px var(--cpb-text);
    font-weight: 800;
    top: 0;
    font-size: 0.7em;
}
        td.yh::before {
            content: 'YH';
        }
td.ah::before {
    content: 'AH';
}

td.yh::before {
    content: 'YH';
}

td.mh::before {
    content: 'MH';    
}

tr.day > td.ah::before, tr.day > td.yh::before, tr.day > td.mh::before {
    color: var(--cpb-red-dark);
    text-shadow: 2px 2px 3px var(--cpb-gold);
}

    tr.day > td {
    background-color: #CCCCCC;
    color: var(--cpb-text) !important;
    border-color: var(--cpb-text) !important;
}

.progressbar {
    margin: 0 -0.5rem 0 -0.5em;
    height: 6px;
    width: 80%;
    display: block;
    text-align: left;
    position: relative;
    left: 0;
    bottom: 0;
    background-color: var(--cpb-light-gray);
    border: solid 1px var(--cpb-background);
}

    .progressbar div {
        display: block;
        height: 4px;
        line-height: 4px;
        margin-left: 0;
        position: relative;
        left: 0;
        top: 0;
    }

    .progressbar .fail {
        background-color: var(--cpb-red);
    }

    .progressbar .success {
        background-color: var(--cpb-green-light);
    }

.kpiGrid > thead > tr > th.ck-increase {
    color:var(--cpb-true-green) !important;
}
.kpiGrid > thead > tr > th.ck-decrease {
    color: var(--cpb-red-dark) !important;
}

.kpiGrid > tbody > tr > td.ck-increase {
    border-bottom: 4px solid var(--cpb-true-green) !important;
}

.kpiGrid > tbody > tr > td.ck-decrease {
    border-bottom: 4px solid var(--cpb-red-dark) !important;
}

tr.benchmarks th {
    background-color:var(--cpb-light-gray) !important;
    font-size: 0.8em;
    border: 0 !important;
    padding:0.12em;
}
    tr.benchmarks th:first-child {
        text-align:right;
        padding-right: 0.5em;
    }
/******************************************************
    KPI Nav
******************************************************/
.kpi-nav {
    display: flex;
}

    .kpi-nav a:last-child {
        margin-left: auto;
    }

#nav-KPIContent .form-group {
    padding: 0.35rem;
}

#nav-KPIContent label {
    width: 50%;
    text-align: right;
    padding: 0.25rem 0.5rem;
    color:var(--cpb-text);
}

#nav-KPIContent input {
    text-align: right;
    width: 30%;
}

    #nav-KPIContent input[type=submit] {
        text-align: center;
        width:unset;
    }
/*Removing the arrows from number inputs*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/******************************************************
    Monday Checkin
******************************************************/

#MCI {
}

    #MCI li {
        padding: 0;
        background-color: var(--cpb-background-2);
    }

        #MCI .tab-pane.active, #MCI .nav-link.active {
            color: var(--cpb-background);
            background-color: var(--cpb-blue-dark);
        }

        #MCI li:hover > .nav-link.active:hover {
            color: var(--cpb-text-light);
            transition: none;
            border-color: var(--cpb-light-gray);
        }
    .MCI .tab-pane.active {
        background-color: var(--cpb-blue-dark);
    }
    .MCI .field-validation-error {
        background: var(--cpb-background);
        line-height: 1em;
        display:inline-flex;
        padding: 3px;
        border: solid 2px red;
        margin-top: 2px;
    }
    .field-validation-error.energy-level-validation {
        display:none;
    }
    .field-validation-error.energy-level-validation-0 {
        display: inline-flex;
    }

#meetingBox {
    height: calc(100vh - 250px);
    display: flex;
}

    #meetingBox > * {
        height: calc(100vh - 250px);
        margin: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #meetingBox h4 a {
        font-size: 0.7em;
        padding-right: 0.25em;
        padding-top: 0.25em;
        color:var(--cpb-text-contrast);
    }

    #meetingBox ul {
        list-style-type: decimal;
    }

    #meetingBox li {
        padding: 0.25em;
    }

    .KPIs > .label {
        background-color: var(--cpb-charcoal);
        font-weight:600;
        font-size:1.4em;
        padding:5px;
        margin-bottom: 8px;
        line-height: 1.2em;
    }
.hotseats {
    display: contents;
    flex-direction: column;
    padding: 0.25em;
    font-weight: 700;
}

.scrollbar-hidden {
    scrollbar-width: none !important;
    border-right: double 6px var(--cpb-light-gray);
}

    .scrollbar-hidden::-webkit-scrollbar {
        display: none;
    }

.member {
    padding: 0 0 1em 0;
    border-left: solid 1px var(--cpb-text);

}

    .member:first-child {
        margin-top: 0;
    }

    .member:nth-child(even) {
        background-color: var(--cpb-background-2)
    }

    .member:nth-child(odd) h5 {
        background-color: var(--cpb-background-2)
    }
    .member:nth-child(even) h5 {
        background-color: var(--cpb-background);
    }

footer {
    line-height: 34px !important;
}
#members .nav-link:hover, #members .nav-tabs li{
    border:unset;
}

#members .nav-link, #members .nav-link a {
    color: var(--cpb-text-light);
}


#members .nav-link {
    color: var(--cpb-text-light);
    padding: 0.5em;
}
    #members .nav-link a:disabled {
        padding: 0.5em !important;
    }

#members .noreport, #members .noreport a {
    background-color: var(--cpb-dark-gray);
    color: var(--cpb-light-gray);
}

#members .hasreport {
    background-color: var(--cpb-header);
}

#members .noreport.timeoff, #members .noreport.timeoff a {
    background-color: var(--cpb-dark-gray);
    color: var(--cpb-text-light);
}




.presenter > a:before, label.presenter:before {
    content: "\27A4";
    color: var(--cpb-green-light);
    margin-right: 0.25em;
    text-shadow: -2px 0 var(--cpb-text), 0 2px var(--cpb-text), 2px 0 var(--cpb-text), 0 -2px var(--cpb-text);
}

.js-timer {
    margin-left: 0.5em;
    user-select: none;
}

.hotseat > a:before, label.hotseat:before {
    content: "\27A4";
    color: var(--cpb-red);
    margin-right: 0.25em;
    text-shadow: -2px 0 var(--cpb-text), 0 2px var(--cpb-text), 2px 0 var(--cpb-text), 0 -2px var(--cpb-text);
}

b.yes {
    color: var(--cpb-background);
    background-color: var(--cpb-green);
    padding: 0.125em 0.5em
}

b.no {
    color: var(--cpb-background);
    background-color: var(--cpb-red);
    padding: 0.125em 0.5em
}

.member .bi.bi-star-fill, .member .bi-cup-fill {
    color: var(--cpb-gold);
    text-shadow: 2px 2px 2px var(--cpb-text),-1px -1px 3px var(--cpb-text);
}

div.member > h4 {
    color: var(--cpb-text-contrast);
    background-color: var(--cpb-green);
    margin-top: 0;
}


.member h5 {
    /*background-color: var(--cpb-dark-gray);*/
    padding: 0.25em;
    max-height: 1.75em;
}

    .member h5.stretch {
        width: calc(100% + 1.5em);
    }


.bi-check-circle-fill, .bi-calendar-check-fill {
    color: var(--cpb-green-light);
    text-shadow: 2px 2px 2px var(--cpb-text),-1px -1px 3px var(--cpb-text);
}


.calendar .bi-check-circle-fill, .calendar .bi-calendar-check-fill {
    text-shadow: none;
}

.bi-x-circle-fill {
    color: var(--cpb-red);
}

.calendar.meeting-attendance td span.d {
    clip-path: polygon( 0 0, 100% 0, 60% 100%, 0 100% );
    margin-left: -0.5em;
    margin-top: 0;
}
.calendar.meeting-attendance td span.d.wide {
    width: 60%;
}
/******************************************************
    WIGs
******************************************************/
.leadOptions {
    font-style: italic;
}

    .leadOptions ul {
        margin-left: 1em;
    }

.readOnly .monthLead {
    border-bottom: solid 3px var(--cpb-light-blue);
    min-height: 3.2em;
}

.readOnly .no {
    position: relative;
    top: 0.5em;
    left: 0.375em
}

.readOnly .done::before {
    content: "\2713";
    conten font-weight: 900;
    color: var(--cpb-background);
    font-size: 1.2em;
    line-height: 0.5em;
    position: relative;
    max-height: 0.5em;
    top: 0.7em;
    left: 0.25em;
    overflow: visible;
    padding: 0 0.25em;
    background-color: var(--cpb-green);
}
/******************************************************
    Employee Ratings
******************************************************/
.notePopup {
    display: none;
}

    .notePopup.recordNote {
        position: fixed;
        display: block;
        top: 30px;
        left: 20%;
        width: 60%;
        padding: 1em;
        background-color: var(--cpb-green);
    }


/******************************************************
    Calendars
******************************************************/
.calheader {
    position: sticky;
    top: 0px;
    width: 100%;
    background-color: var(--cpb-green);
    color: var(--cpb-text-contrast);
    font-weight: 700;
    min-height: 2.25em;
    padding-top: 0.25em;
}
.scrolled .calheader {
    z-index: 20;
}

    .catlight {
        box-shadow: 0px 3px 5px 2px var(--cpb-red);
    }
    .catlight.cat-trigger {
        box-shadow: none;
    }
.cat-trigger span {
    margin: 5px 0;
    padding-left: 6px;
}
.catlight.cat-trigger span {
    box-shadow: 0px 0px 5px 2px var(--cpb-red);
    margin: 0px 0;
    width: 100%;
    display: inline-block
}

    .dayrow, .weekrow {
        display: flex;
        flex-flow: row wrap;
    }
    .dayrow > div, .weekrow > div {
        width: 14.2857%;
        background-color: var(--cpb-light-blue);
        color: var(--cpb-dark-gray);
        text-align: center;
        flex-direction: column;
        display: flex;
    }
        .weekrow > div {
            background-color: var(--cpb-background);
            border-top: solid 2px var(--cpb-text);
            border-left: solid 2px var(--cpb-text);
        }
            .weekrow > div > div {
                width: calc(100% - 1em);
                margin:0.5em;
                text-align:left;
            }
            .weekrow > div > div {
                width: calc(100% - 1em);
                margin:0.5em;
                text-align:left;
            }
.cpbDate.sat {
    border-right: solid 2px var(--cpb-text);
}
.cpbDate.eom {
    border-bottom: solid 2px var(--cpb-text);
}
.dayrow > div {
    font-weight: 700;
    border-top: solid 2px var(--cpb-background);
    min-height: 2em;
}
    @media (max-width:612px) {
        .dayrow, .firstDayOffset {
                display: none !important;
            }
            .dayrow div, .weekrow div {
                width: 100%;
            }
            .weekrow  > div {
                min-height:5em;
            }
        .r {
            display: none;
        }
        }
@media (min-width:612px) {
    .calendar .dayName {display:none;}
}
.firstDayOffset {
    border-left-color: var(--cpb-background) !important;
}
    .firstDayOffset:first-child {
        border-left-color: var(--cpb-text) !important;
    }
.weekrow > div.lastDayOffset {
    border-left-color: var(--cpb-background) !important;
}
    .weekrow > div.lastDayOffset.first {
        border-left-color: var(--cpb-text) !important;
    }
    .calheader i {
        margin-right: 0.25em;
        margin-left: 0.25em;
        padding: 0 4px;
        background-color: var(--cpb-text-contrast);
        border-radius: 4px;
    }

    .calendar div.birthday {
        background-color: var(--cpb-red-dark);
        color: var(--cpb-background);
        padding: 0.125em;
        border-radius: 0.75em;
        text-align: center;
    }

    .cpb .KPIentered {
        background-color: var(--cpb-green) !important;
    }

    .cpb div.today, .cpb div.KPIentered.today {
        border: solid 4px var(--cpb-red);
    }

    

    .cpb div.cpbDate.timeOff {
        padding-right: 0 !important;
    }

    .timeOff .group {
        margin-right: 0.5em;
    }

    .weekrow > div > div.dateHeader {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        margin: 0;
        padding-right: 0.25em;
        height: 1.4em;
        width: 100%;
    }

    .cpb div .dateHeader a {
        display: inline-block;
        padding: 0 0 0.375em 0 !important;
        color:var(--cpb-text);
    }

    .calendar .dateHeader span {
        background-color: var(--cpb-light-blue);
        color: var(--cpb-dark-gray);
        font-weight: 700;
        clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
        width: 20%;
        text-align: left;
        padding-left: 0.625em;
    }

    .calendar .dateHeader span.wide {
        padding-left: 0.375em;
    }

    .addMeeting {
        padding: 0.125em !important;
        display: inline-block;
        align-self: flex-end;
        font-size: 0.85em;
        margin-left: auto;
    }

    .kpiLink, .coreKpiLink {
        align-self: flex-end;
        float: right;
        font-size: 0.75em;
        font-weight: 700;
        margin-left: auto;
        color:var(--cpb-text-light);
    }

    .coreKpiLink {
        margin-left: 0.5em;
    }

    .cpbDate.timeOff {
        background-color: var(--cpb-light-gray) !important;
        border: solid 1px var(--cpb-dark-gray);
    }

        .cpbDate.timeOff .dateHeader:first-child::after {
            content: "Time Off";
            color: var(--cpb-text);
            text-align: right;
            padding-left: 0.75em;
            font-size: 0.75em;
            font-weight: 700;
        }

    .addCustomMeeting {
        padding: 0.125em !important;
        line-height: 1em;
        align-self: flex-end;
        font-size: 0.85em;
        color: var(--cpb-red);
        margin-left: auto;
    }

        .addMeeting:hover, .addCustomMeeting:hover {
            color: var(--cpb-background);
        }

.report .timeOff  {
    padding-left: 0.75em;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--cpb-text);
}


/******************************************************
    Year Stats Summary
******************************************************/

    .stats-view > div:first-child > div {
        font-weight: 700;
        text-align: right;
        display: block;
    }

        .stats-view > div:first-child > div::after {
            content: ":"
        }
.stats-view .q-2, .stats-view .q-4{
    background-color:var(--cpb-light-blue);
}
.stats-view .currentQuarter.q-1, .stats-view .currentQuarter.q-2, .stats-view .currentQuarter.q-3, .stats-view .currentQuarter.q-4 {
    background-color: var(--cpb-blue-dark)
}
dl.kpisummary dd {
    text-align: right;
    padding-right: 50%;
}
/******************************************************
    Daily KPI Report
******************************************************/

    .kpi-entry-required, .kpi-entry-required > a.nav-link {
        background-color: var(--cpb-red-dark) !important;
        color: var(--cpb-text) !important;
    }

        .kpi-entry-required > a.active {
            background-color: var(--cpb-red) !important;
            color: var(--cpb-text) !important;
        }

    a.error::before {
        content: "!";
        font-weight: 900;
        color: var(--cpb-red-dark);
        position: relative;
        float: left;
        font-size: 2em;
        top: -1.25em;
        line-height: 1em;
    }

    a.error.active::before {
        color: var(--cpb-red);
    }

    .calculated {
        background-color: var(--cpb-blue-dark);
    }

        .calculated.fail > input.form-control:disabled {
            background-color: var(--cpb-red-dark) !important;
            color: var(--cpb-background);
            border-color: var(--cpb-red-dark) !important;
        }

    table.netProfit {
        border-left: solid 1px var(--cpb-light-blue);
        border-bottom: solid 1px var(--cpb-light-blue);
    }

        table.netProfit tbody th, table.netProfit label {
            text-align: right !important;
            padding: 0 0.25em;
        }

        table.netProfit input {
            text-align: right;
        }

            table.netProfit input:not(disabled) {
                background-color: var(--cpb-yellow);
            }
    .bi.netProfit {
        float:inline-start;
    }

    input.form-control.dollar {
        background-image: url('../i/dollar.png');
        background-position-x: left;
        background-repeat: no-repeat;
        background-size: 23px;
        text-align: right;
    }

    input.form-control.number {
        text-align: right;
    }

    input.form-control.percent {
        background-image: url('../i/percent.png');
        background-position-x: right;
        background-repeat: no-repeat;
        background-size: 34px;
        padding-right: 46px;
        text-align: right;
    }

    table.calendar td {
        background-color: var(--cpb-background);
        border: solid 2px var(--cpb-dark-gray);
    }

    div.form-group.ck-increase {
        background-color: var(--cpb-true-green)
    }

    div.form-group.ck-decrease {
        background-color: var(--cpb-red-dark)
    }

.massEdit thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--cpb-background);
}


    .massEdit td {
        height: unset;
    }

    .massEdit input {
        text-align: right;
    }

    .massEdit th, .massEdit td {
        width: 10%;
        padding: 0.25em;
    }

        .massEdit th:first-child, .massEdit td:first-child {
            width: 8%;
        }

        .massEdit td:first-child {
            text-align: center;
            vertical-align: middle;
            font-weight: 700;
        }

        .massEdit td:last-child input {
            text-align: left;
        }

        .massEdit th:last-child, .massEdit td:last-child {
            width: 30%;
        }

    .massEdit.massEditCore th:last-child, .massEdit.massEditCore td:last-child {
        width: 8%;
    }



    .newKPI {
        color: var(--cpb-green-light);
        float: right;
        font-size: 2em;
        line-height: 0.5em;
        position: relative;
    }

    .massEdit span.text-danger.field-validation-error {
        color: orange !important;
        display: block;
        position: relative;
        left: 0px;
        float: left;
        background-color: #333;
        text-align: left;
        z-index: 1;
        padding: 0.1em;
    }

    i.bi-pencil-fill {
        color: var(--cpb-gold);
        line-height: 0.5em;
        float: right;
    }
    /******************************************************
    Monday Checkin
******************************************************/
    #timer {
        display: inline-block;
        height: 1em;
        font-size: 2em;
        margin-left: 1em;
        position: relative;
    }

        #timer.caution {
            color: var(--cpb-yellow);
        }

        #timer span {
            color: var(--cpb-red);
        }

    .closingWord::placeholder {
        color: var(--cpb-blue-dark);
        font-style: italic;
    }
/******************************************************
    Reports
******************************************************/
.report-group {
    align-self: flex-start !important;
    flex-wrap: wrap !important;
    display: inline-flex !important;
    width: 50%;
    flex: 0 0 auto;
    margin-bottom: 1em;
    padding-bottom: 3em;
    border-bottom: solid 3px var(--cpb-light-gray);
}

/******************************************************
    Monthly FORUM
******************************************************/
    ul.agenda {
        padding: 2em 4em;
        ;
        border: solid 1px var(--cpb-background);
    }

        ul.agenda li {
            margin-bottom: 0.5em;
        }

        ul.agenda b {
            margin-right: 0.5em;
            color: var(--cpb-green)
        }

            ul.agenda b:after {
                content: '\2014';
                margin-left: 0.5em;
            }

    h1 .bi {
        font-size: larger;
    }

    /******************************************************
    Recurring Meetings
******************************************************/
    .recurringDays {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        margin: 0 -8px 0px -8px;
    }

        .recurringDays:last-child {
            margin: 0 -8px 5px -8px;
        }

    .selectedDay {
        background-color: var(--cpb-green-light);
        color: var(--cpb-text);
    }

    .recurringDays div {
        border: solid 1px var(--cpb-background);
        height: 20px;
        font-size: 13px;
        text-align: center;
    }

    span.list::after {
        content: ", ";
    }

    span.list:last-child::after {
        content: "";
    }

    /******************************************************
    Pickling
******************************************************/
    .table.pickling td.center {
        text-align: center;
    }

    .table.pickling tr td {
        background-color: var(--cpb-gold);
        color: var(--cpb-dark-gray);
        border: solid 1px var(--cpb-dark-gray)
    }

    .table.pickling span.ribbon {
        margin-top: 0.5em;
        display: inline-block;
        background-image: url('../i/ribbon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: right;
        background-clip: unset;
        width: 2.4em;
        height: 3em;
        padding-top: 0.125em;
        text-align: center;
        font-weight: 700;
    }

    .table.pickling tr.pickled span.ribbon {
        background-image: url('../i/pickle-frame.png');
        color: var(--cpb-text);
        padding-top: 0.33em;
    }

    .table.pickling tr.pickled td {
        background-color: #256230;
        color: var(--cpb-background);
    }

    .table.pickling tr.pickleImmune td {
        background-color: var(--cpb-blue-darker);
        color: var(--cpb-background);
    }


    c.yes {
        color: var(--cpb-background);
        color: var(--cpb-green);
        padding: 0.125em 0.5em
    }

        c.yes::before {
            background-color: var(--cpb-green);
            color: var(--cpb-green-light);
            font-size: 1.5em;
        }

    c.no {
        margin-top: 0.5rem;
        color: var(--cpb-background);
        background-color: var(--cpb-red);
        padding: 0.125em 0.5em
    }

    #durationChoices {
        display: none;
        width: 190px;
        border: solid 2px var(--cpb-text);
        position: absolute;
        background-color: var(--cpb-background-2);
    }

        #durationChoices ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #durationChoices li {
            cursor: pointer;
            margin: 0;
            text-align: center;
        }

            #durationChoices li:hover {
                font-weight: 600;
                background-color: var(--cpb-header);
                color: var(--cpb-text-light);
            }

        #durationChoices h6 {
            text-align: center;
            font-weight: 600;
            margin-bottom: 0;
            background-color: var(--cpb-header);
            border-bottom: solid 2px var(--cpb-text);
            color: var(--cpb-text-light);
            padding-bottom: 0.125em;
        }

        #durationChoices .bi-x-octagon-fill {
            cursor: pointer;
        }

    .lastEdit td {
        background-color: blue;
    }

/******************************************************
    MVP
******************************************************/
#mvps {
        position: fixed;
        top: 6em;
        left: 1em;
        z-index: 22
    }

        #mvps .closer {
            position: absolute;
            top: 0;
            color: var(--cpb-red);
            z-index: 10;
            left: 1em;
            font-size: 2em;
            background-color: var(--cpb-background);
            border-radius: 50%;
            height: 1em;
            cursor: pointer;
        }

            #mvps .closer i {
                position: relative;
                top: -0.25em;
            }

#mvp {
    background: url('../i/mvp/background.png');
    background-size: contain;
    background-repeat: no-repeat;
    font-family: "Poppins", 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    display: flex;
    margin: -0.75em -0.75em;
    overflow: hidden;
    width: 1240px;
    height: 740px;
    margin-left: 0.5em;
}
.rightSideAwards {
    color: var(--cpb-text);
    position: absolute;
    width: 42%;
    margin-left: 49%;
    padding-top: 8.5%;
    height: 70%;
}
    .rightSideAwards a {
        color: var(--cpb-text);
    }


.imageBox {
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: contain;
}

.winnerlist {
    margin-top: 7em;
    width: 46%;
    padding: 1em 2%;
}

    #groupLabel {
        position: absolute;
        font-size: 2em;
        z-index: 15;
        width: 5em;
        text-align: center;
        color: var(--cpb-light-blue);
        border: solid 3px var(--cpb-light-blue);
        padding: 0.25em 1em;
        border-radius: 1.5em;
        bottom: 2.2em;
        left: 0.5em;
    }
        #groupLabel.multi {
            width:18em;
            flex-shrink:4;
            cursor:pointer;
        }

        tr.right-align-cells td {
            text-align: right;
        }

        tr.right-align-cells td.label {
            padding: 0 0.25em 0 0;
            text-align: center;
            white-space: nowrap;
            width: 19%;
        }

    tr.right-align-cells > td.label > .wreath {
        text-align: left;
        font-size: 1em;
        width: 3em;
        height: 3em;
        display: inline-block;
        margin: 0.25em;
        padding: 0.8em 0.8em 0.8em 0.8em;
    }

    .wreath {
        text-align: center;
        vertical-align: middle;
        font-size: 1.2em;
        font-weight: 700;
        padding: 2.4em 0 2.6em 0.25em;
        background-image: url('../i/mvp/Wreath.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        flex: 0 0 auto;
        width: 22%;
        margin: 0 1.5%;
    }
    .wreath a {
        color:var(--cpb-text-light);
    }
    

    .MVPAwardMonth {
        float: right;
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        font-size: 1.5em;
        font-weight: 500;
        z-index: 499;
    }

    #mvp > form {
        z-index: 490;
        position: absolute;
    }

    

.rightSideAwards .layer3 {
    height: calc(78%);
    position: absolute;
    z-index: 8;
    display: flex;
    flex-flow: row wrap;
    flex-basis: content;
    align-items: flex-start;
    padding-bottom: 4em;
}

.place {
    text-align: center;
    font: 700 1.2em Arial;
    padding-top: 0.25em;
    vertical-align: text-top;
    width: 48%;
    margin-top: 4%;
}

    .place1 {
        height: 15%;
        z-index: 20;
        margin-left: 28%;
        margin-top:0;
    }

.place2 {
    height: 15%;
}

.place3 {
    height: 15%;
    margin-bottom: 4em;
    margin-left:8%;
    width:44%;
}

    .runner-up {
        max-height: 2em;
        align-self: start;
        margin-top: -10%;
        width: 19.8%;
        font-size: 14px;
    }

        .runner-up:nth-child(4n) {
            margin-left: 10%;
        }

 

    .copyTable {
        float: right;
        margin: 0.5em;
        cursor: pointer;
    }

        .copyTable:hover {
            color: var(--cpb-green-light);
        }

    .detailcolumn {
        width: 50%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        place-content: flex-start;
        padding: 0.25em 6em 0 0;
    }

        .detailcolumn dd {
            text-align: right;
            border-bottom: solid 1px var(--cpb-background);
            height: 1.4em;
            margin-top: 0.5em;
            padding-bottom: 0.2em;
        }

        .detailcolumn dt {
            border-bottom: solid 1px var(--cpb-background);
            height: 1.4em;
            margin-top: 0.5em;
            padding-bottom: 0.2em;
        }

    .info {
        float: left;
        color: var(--cpb-header);
        position: relative;
        top: -0.25em;
    }

    .reveal .info {
        color: var(--cpb-green-light);
    }

    .explanation {
        display: none;
        padding: 0.5em 1.5em 1em;
        margin: 0.5em 0 2em;
        border-radius: 0 5em 5em 2em;
        border: solid 2px var(--cpb-header);
    }

        .explanation > .bi-question-circle {
            float: right;
            font-size: 10em;
            top: -1em;
            opacity: 0.2;
            line-height: 0.8em;
            color: var(--cpb-header);
        }

        .explanation hr {
            margin: 0.25em 0;
            border: solid 1px var(--cpb-background);
            opacity: 80%;
        }

    .reveal + .explanation {
        display: inline-block;
    }

    .calc {
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        margin-top: 1em;
    }

.belt {
    width: 80px;
    border: solid 2px var(--cpb-text);
    margin-bottom: 2em;
    text-align: center;
    padding: 0;
    color: #FFF;
}
.belt-0 {
    color: var(--cpb-text);
}
.belt-1 {
    background-color: yellow;
    color:var(--cpb-text);
}
.belt-2 {
    background-color: orange;
    color: var(--cpb-text);
}
.belt-3 {
    background-color: green;
}
.belt-4 {
    background-color: blue;
}
.belt-5 {
    background-color: purple;
}
.belt-6 {
    background-color: red;
}
.belt-7 {
    background-color: brown;
}
.belt-8, .belt-9, .belt-10, .belt-10, .belt-11, .belt-12 {
    background-color: var(--cpb-text);
    color:#FFF;
}
/******************************************************
    Awards
******************************************************/
.awards .year, .awards .row.quarter, .awards .row.month {
    display: none;
}
    .awards.year .year {
        display: inline-block;
    }
.awards.quarter .row.quarter {
    display: flex;
}
.awards.month .row.month {
    display: flex;
}