/*
 * See the payroll report for a start of a class for scrolling fixed headers
 */

/*
   List of backgrounds (post Bootstrap 5)

    - Menu bar color
        #0086EF

    - Card panels that exist on dashboards with heading & border (sections off an area, interior is same as main background color)
        #E9EBEC

    - Heading or Label within a page or a card panel (stands out by having different background than white) -- leaning toward use of datatable summary entries
        #A3C6D3

    - Heading across a colored bordered widget (These widgets generally have odd/even stripes and we prefer a color vs grey like a card panel (These are typically small so they can use bold color
        #00ADEE

    - Heading for a table
        e1e1e1        old = afbfbb

        odd row of data table (match page background)
            #FFFFFF
        even row of data table - provide a touch more contrast
            #F1F5F6     old =  d5f6f9

        table grouping or summary row (darker than even row)
            #A3C6D3
        hover for a table row
            #D3E0E5          old ones = D6DBDB  F8F9FA
        selected for a table row
            #257CFD


       Proposed Changes
        X 1. Standardize using variables for the items above
          2. Search for background-color in php files
          3. Look for and clean up 00ADEF
        X 4. Consider toning down the brightness of a selected row.   #6AC7EA
        X 5. Consider toning down the brightness of menu bar   00ADEE
          6. Consider adding a touch more color to headings within card panel or page.  06BECE
          7. Fix alternate rows in employee scorecard popups
          8. Fix alternate rows in incident dashboard table
          9. Fix alternate rows in recent failed (old for sure, not sure about loc status version)
         10. Fix alternate hovers
         11. Look into color of text on menu var and where/how --b5-text-nav is being used. It is refrenecd but not displaying ????

        look for 00aaee
        look for 0cceb1

 */

:root {     /* Variables used in this stylesheet */
    /* --main-bg-color-row-odd: #E6F8F9; */

    --b5-text-std:  #717F84;                        /* Standard text color (slightly muted) */
    --b5-text-label: var(--b5-text-std);            /* Field label text */
    --b5-text-data: #20252A;                        /* Field Data text -- (darker) */
    --b5-text-rowgroup: var(--b5-text-data);        /* Color for rowgroup headers  in datatables */
    --b5-text-th: var(--b5-text-std);               /* Heading table */
    --b5-text-th-group1: var(--b5-text-data);        /* Heading for "group1" in table */
    --b5-text-th-group2: var(--b5-text-data);        /* Heading for "group2" in table */
    --b5-text-th-group3: var(--b5-text-data);        /* Heading for "group3" in table */
    --b5-text-th-group4: var(--b5-text-data);        /* Heading for "group4" in table */
    --b5-text-nav: var(--b5-text-data);             /* Field Data text *
    --b5-text-contrast: #FFFFFF;                    /* When high contrast is needed on dark background */
    --b5-text-link: #66B3FF;


    --b5-bg-pages: #FFFFFF;                         /* Primary page background color */
    --b5-bg-void: #E6EEF0;                          /* Space surrounding page in browser */
    /* --b5-bg-navbar: #0086EF;                       Menu bar */
    /* --b5-bg-navbar: #00ADEE;                       Menu bar */
    /* --b5-bg-navbar: #2F87F7;                        Menu bar */
    --b5-bg-navbar: #008CDC;                        /* Menu bar */
    --b5-bg-card-panel-border: #E9EBEC;             /* Used for title bar and border of panels in dashboard */
    /* --b5-bg-area-heading: #A3C6D3;               Stand out heading inside page or panel */
    --b5-bg-area-heading: #06BECE;                  /* Stand out heading inside page or panel */
    --b5-bg-widget-heading: #00ADEE;                /* Bordered summary width with stripes of content but no internal header -- used in employee/location hotlinks */
    --b5-bg-table-heading: #E1E1E1;                 /* Background color of table (including data table) headings */
    --b5-bg-table-heading-group1: grey;             /* background color to group a set of fields together in table header */
    --b5-bg-table-heading-group2: darkgrey;         /* background color to group a set of fields together in table header */
    --b5-bg-table-heading-group3: lightslategrey;   /* background color to group a set of fields together in table header */
    --b5-bg-table-heading-group4: lightgreen;       /* background color to group a set of fields together in table header */
    --b5-bg-table-odd: var(--b5-bg-pages);          /* Odd table rows use same color as page background */
    --b5-bg-table-even: #F1F5F6;                    /* Even table rows have mild contrast from odd rows */
    --b5-bg-table-rowgroup: #A3C6D3;                /* Grouping or summary row for table (should be darker than odd/even but subtle enough for there to be multiple on page -- Scorecard Analysis */

    --b5-bg-table-hover: #D3E0E5;                   /* Mouse over color that works with both odd & even table rows */
    --b5-bg-table-rowgroup-hover: #8FBFD4;             /* Mouse over a row group */
    /* --b5-bg-table-select: #6AC7EA;                   Only one per table and most likely one per page -- could use navbar color */
    --b5-bg-table-select: #52A9D8;                  /* Only one per table and most likely one per page -- could use navbar color */
    /*--b5-bg-table-select: #257CFD;                  Only one per table and most likely one per page -- could use navbar color */
    --b5-bg-table-select-hover: #008CDC;            /* Selected row that is being hovered over */

    --main-bg-color-screen: #cce5e6;                /* Color for #pages, mobile inspection */
    --main-bg-color-table: #FFFFFF;             /* was #fefefe; */
    --main-bg-color-table-header: #afbfbb;     /* was #d3d3d3 -- want to darken it a bit */
    --main-bg-color-table-header2: #c5c8c8;     /* was #d3d3d3 -- want to darken it a bit */
    --main-bg-color-row-odd: #d5f6f9;           /* This is the primary background color */
    --main-bg-color-row-even: var(--main-bg-color-table);
    --main-bg-color-row-hover: #d6dbdb;       /* was #d6d6d6; #c8cdcd; #cbcfcf; #d0d4d4 -- want to lighten it a bit */
    --main-bg-color-row-selected: #bacae5;
    --main-bg-color-row-selected-hover: #b0bed9;
    /* --main-bg-color-row-selected-hover: #a1aabe; */

    --chart-bg-color: #D6F0F1;

    --light-logo-background: #FFFFFF;
    --navigation-tab-background: #f8f8f8;

    --highlighted-label-foreground-color: #337ab7;
    --highlighted-label-background-color: #eee;

    --standard-text-color: black;
    --standard-border-color: #476971;               /* Try this instead of #000111 which is a pretty intense black */
    --neutral-button-background-color: #6b98bf;     /* For use on buttons that are not highlighted in another color */
    --neutral-button-border-color: #2e6da4;         /* For use on buttons that are not highlighted in another color */
    --neutral-button-text-color: #fff;
    --neutral-button-hover-background-color: #9db2c4;
    --neutral-button-hover-foreground-color: #fff;
    --neutral-button-hover-border-color: var(--neutral-button-hover-background-color);

    --notification-background-color: yellow;
    --alert-background-color: red;
    --refresh-message-background-color: red;
    --hotlink-foreground-color: blue;

    --incident-late-background-color: red;                  /* Recommend this matches --alert-background-color */
    --incident-warn-background-color: yellow;               /* Recommend this matches --notification-background-color */

    /* For inspection foregrounds, stick with the standard-text-color in foreground unless it doesn't show up well on the background color */
    --inspection-alert-background-color: red;
    --inspection-alert-foreground-color: white;
    --inspection-warn-background-color: yellow;
    --inspection-warn-foreground-color: black;
    --inspection-ok-background-color: #7DCEA0;
    --inspection-ok-foreground-color: black;

    /* Badge colors used when displaying warnings about shifts */
    --shift-long-badge-color: red;
    --shift-edited-badge-color: orange;
    --shift-open-badge-color: yellow;
    --shift-unscheduled-badge-color: blue;
    --shift-meeting-badge-color: green;
    /* var(--main-bg-color-table); */

}

/* The following overrides bootstrap's background color for the primary button color */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    /* background: linear-gradient(to bottom, rgba(81,183,209,1) 0%,rgba(43,93,124,1) 50%,rgba(133,156,178,1) 100%) !important; */
}
/* Let's match up the warning button (yellow) with our warn background color above  */
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:visited {
    background: linear-gradient(to bottom, rgb(209, 209, 107) 0%, rgba(217, 225, 21, 0.5) 50%, rgb(210, 251, 95) 100%) !important;
    color: var(--inspection-warn-foreground-color) !important;
}

/* The following overrides bootstraps hover color for pill buttons -- used on hotlinks, this must be before the .nav-pills>li.active>a entries */
.nav-pills>li>a:hover {
    color: var(--neutral-button-text-color) !important;
    background-color: var(--neutral-button-hover-background-color) !important;
    border: 1px solid var(--neutral-button-hover-border-color) !important;
}

/* Override bootstrap colors for navigation pills (used on hotlinks) */
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: var(--neutral-button-text-color) !important;
    background-color: var(--neutral-button-background-color) !important;
    border: 1px solid var(--neutral-button-border-color) !important;
}

/* The following overrides bootstraps color when hovering over a menu item */
.dropdown-menu a:hover {
    background-color: var(--main-bg-color-row-hover) !important;
}

.headerMain5 .dropdown-menu {            /* Specific to B5 */
    padding-left: 3px;
    padding-right: 3px;
}

.headerMain5 .dropdown-menu li {            /* Specific to B5 */
    width: 100%;
}

.headerMain5 .dropdown-menu a:hover {            /* Specific to B5 */
    background-color: var(--b5-bg-navbar) !important;
    color: var(--b5-text-contrast) !important;
}


/* For bootstrap multiselect -- removes the button look by getting rid of the border and background color */
.multiselect-option, .multiselect-group, .multiselect-all {
    border: none !important;
    background-color: transparent !important;
}

/* For bootstrap multiselect -- ensures the item labels aren't bolded and have some space between checkbox and label */
.multiselect-container .form-check-label {
    margin-left: 4px;
    font-weight: normal;
}


/* The following can be used to override dataTables paging buttons using !important. Can do the same with other dataTables controls  */
.paginate_button {
}

.paginate_button a:hover {
}

body{
    font-family: 'Segoe UI Semibold', 'Frutiger','Helvetica Neue Semibold',Helvetica,Arial,sans-serif;
}




.boot-5 table tbody tr {
    color: var(--b5-text-data);
}

.boot-5 table thead tr, .boot-5 table tfoot tr  {
    color: var(--b5-text-th);
    background-color: var(--b5-bg-table-heading);
}

/* hdrGroup1..3 are used to highlight portions of header (payroll reports) */
table thead tr td.hdrGroup1 {
    background-color: grey;
}
table thead tr td.hdrGroup2 {
    background-color: darkgrey;
}
table thead tr td.hdrGroup3 {
    background-color: lightslategrey;
}
table thead tr td.hdrGroup4 {
    background-color: lightgreen;
}
.boot-5 table thead tr td.hdrGroup1 {
    background-color: var(--b5-bg-table-heading-group1);
    color: var(--b5-text-th-group1);
}
.boot-5 table thead tr td.hdrGroup2 {
    background-color: var(--b5-bg-table-heading-group2);
    color: var(--b5-text-th-group2);
}
.boot-5 table thead tr td.hdrGroup3 {
    background-color: var(--b5-bg-table-heading-group3);
    color: var(--b5-text-th-group3);
}
.boot-5 table thead tr td.hdrGroup4 {
    background-color: var(--b5-bg-table-heading-group4);
    color: var(--b5-text-th-group4);
}


/* Used for controls that should only show up on printed page */
@media screen {
    .onlyPrint, .onlyPrint > * {
        display: none;
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Used for popping up alternative window for right menu panel menu items */
.dashModalPopup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    /* background-color: var(--main-bg-color-row-odd); */
}

/* Close button for dashboard modal popup menus */
.dashModalClose {
    color: var(--highlighted-label-foreground-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.dashModalClose:hover,
.dashModalClose:focus {
    color: var(--highlighted-label-foreground-color);
    text-decoration: none;
    cursor: pointer;
}


/* Modal Content/Box */
@media screen and (min-width: 768px) {
    .msc-modal-content {
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
    }
}

.msc-modal-content {
    background-color: var(--main-bg-color-table);
    background-clip: padding-box;
    /* margin: 5% auto; /* 15% from the top and centered */

    margin: auto;

    /* Next four lines take care of centering the content in browser window horizontally and vertically, moving the div based on its size */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow-y: hidden;       /* Hidden in an effort to keep from scrolling horizontally */

    /*max-height: 100%; */

    padding: 5px;
    padding-bottom: 15px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;

    /*display: table;  */
    max-width: 100%;
    /* width: 100%; */

}

.boot-5 .msc-modal-content {
    background-color: var(--b5-bg-pages);
    color: var(--b5-text-std);
}

/*
  The drillTable class is used for drilling through to employee scorecard details and widget (hotlink) details
 */

.drillTableHeader {          /* Modeled most of the settings below from H2 */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 30px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    display: block;
    margin-block-start: 0.3em;
    margin-block-end: 0.2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.drillTableOuterDiv {
    height: auto;
    /* overflow: auto; */
}

.drillTableInnerDiv {
    overflow-y: auto;           /* Provide vertical scroll bar when needed */
    overflow-x: hidden;         /* Hide the horizontal scroll */
    max-height: 80vh;           /* Consider changing to a calculated value based on browser window size */
                                /* Note that this height must be restricted so that table will scroll and headers stay fixed */
}

table.drillTable {
    background-color: var(--main-bg-color-table);

    margin: 0 auto;                     /* Center table in surrounding div */
    font-size: 13px;
    border-collapse: collapse;
    width: calc(100% + 4px);
    /* width: 100%; */
}

.boot-5 table.drillTable {
    background-color: var(--b5-bg-pages);
}

/* The following has to do with non-scrolling headers */
table.drillTable tbody {
    /*
    display: block;
    overflow: auto;

    max-height: 225px;

     */
    /* width: 100%; KW1 */
}
/* The following has to do with non-scrolling headers */
table.drillTable thead th {
    position: sticky;
    top: 0;
}


table.drillTable td {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

table.drillTable th {
    background-color: var(--main-bg-color-table-header);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.boot-5 table.drillTable {
    background-color: var(--b5-bg-table-heading);
}

table.drillTable tr {

}

table.drillTable tr:nth-child(odd) {
    background-color: var(--main-bg-color-row-odd);

}

table.drillTable tr:hover {
    background-color: var(--main-bg-color-row-hover);
}

.boot-5 table.drillTable tr:nth-child(odd) {
    background-color: var(--b5-bg-table-odd);
}

.boot-5 table.drillTable tr:nth-child(even) {
    background-color: var(--b5-bg-table-even);
}

.boot-5 table.drillTable tr:hover {
    background-color: var(--b5-bg-table-hover);
}

.boot-5 table.drillTable tr.selected {
    background-color: var(--b5-bg-table-select);
}

.boot-5 table.drillTable tr.selected:hover {
    background-color: var(--b5-bg-table-select-hover);
}



/* Start with basic rules for the table, table-layout of fixed is critical */
/* Don't have a width specifier because we have to specify each column width manually */
table.msc_fixed_header {
    /* max-width: calc(100% + 2px); */
    /* background-color: white; */
    margin: 0 auto;
    overflow: auto;

    /*
    margin: -1px;
    margin-top: 10px;
    */
    font-size: 13px;

    /* width: 750px; */
    table-layout: fixed;
    border: 1px solid var(--standard-border-color);
    border-collapse: collapse;
}

/* Specify any visual effects for headers here */
table.msc_fixed_header th,
table.msc_fixed_header td {
    border: 1px solid var(--standard-border-color);
    padding: 3px;
    text-align: left;

    /* The following two widths are defaults that will be overridden for each column */
    min-width: 75px;
    max-width: 75px;
}


table.msc_fixed_header thead {
    background-color: var(--main-bg-color-table-header);                /* Set background of header to grey */
}

table.msc_fixed_header thead tr {
    display: block;                             /* Used to keep header from scrolling */
    position: relative;
}

table.msc_fixed_header tbody {                  /* Used to specify that body does scroll */
    display: block;
    overflow: auto;     /* Shouldn't overflow vertically and if we do horizontally we will scroll */
}

table.msc_fixed_header tbody tr.subtotal {          /* Subtotal is for lines we want to highlight */
    font-weight: bold;
    background-color: var(--main-bg-color-table-header);                    /* Normally we would use <thead> but we can't */
}                                                   /* because multiple theads will mess up scrolling */

table.msc_fixed_header tbody tr:nth-child(even) {    /* Specifies a color to highlight every other row */
    background: var(--main-bg-color-table);
}

table.msc_fixed_header tbody tr:nth-child(odd) {    /* Specifies a color to highlight every other row */
    /* background: var(--main-bg-color-row-odd); */
    background: var(--main-bg-color-row-odd);
}

table.msc_fixed_header tbody tr.subtotal:nth-child(odd),
table.msc_fixed_header tbody tr.subtotal:nth-child(even) {   /* Over rides the odd row highlighting for subtotal rows */
    font-weight: bold;
    background: var(--main-bg-color-table-header);
}


.boot-5 table.msc_fixed_header th,
.boot-5 table.msc_fixed_header td {
    /* border: none; */
}


.boot-5 table.msc_fixed_header tbody tr:nth-child(even) {    /* Specifies a color to highlight every other row */
    background: var(--b5-bg-table-even);
}

.boot-5 table.msc_fixed_header tbody tr:nth-child(odd) {    /* Specifies a color to highlight every other row */
    background: var(--b5-bg-table-odd);
}

.boot-5 table.msc_fixed_header tbody tr:hover,
.boot-5 table.msc_fixed_header tbody tr:nth-child(even):hover,
.boot-5 table.msc_fixed_header tbody tr:nth-child(odd):hover {
    background: var(--b5-bg-table-hover);
}


.boot-5 table.msc_fixed_header tbody tr.subtotal,
.boot-5 table.msc_fixed_header tbody tr.subtotal:nth-child(odd),
.boot-5 table.msc_fixed_header tbody tr.subtotal:nth-child(even) {   /* Over rides the odd row highlighting for subtotal rows */
    font-weight: normal;
    background: var(--b5-bg-table-rowgroup);
    color: var(--b5-text-rowgroup);
}

.boot-5 table.msc_fixed_header tbody tr.subtotal:hover,
.boot-5 table.msc_fixed_header tbody tr.subtotal:nth-child(odd):hover,
.boot-5 table.msc_fixed_header tbody tr.subtotal:nth-child(even):hover { /* Over rides the odd row highlighting for subtotal rows */
    background: var(--b5-bg-table-rowgroup-hover);
}







/* The Close Button */
.close {
    color: var(--standard-text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: var(--standard-text-color);
    text-decoration: none;
    cursor: pointer;
}

/* Used for field validation messages on input forms */
.validationMsg {
    color: var(--alert-background-color);
    font-size: smaller;
}

.notification_text {
    font-weight: bold;
    background-color: #fdcf00;
    color: white;
    padding: 1rem;
}

.alert_text {
    font-weight: bold;
    background-color: var(--alert-background-color);
    padding: 1rem;
    color: white;
}

.alertborder {
    border: 3px solid var(--alert-background-color);
}

select.alertborder {
    border: 3px solid var(--alert-background-color);
}

input.alertborder {
    border: 3px solid var(--alert-background-color);
}


div.refresh_message {
    background-color: var(--refresh-message-background-color);
    color: var(--standard-text-color);
}


div.msc_list_table_div, div.msc_edit_table_div, div.top_level_links_div {
    /* max-width: 1100px; */
    width: 100%;
    margin: 0 auto;
}

.hotLink {
    color: var(--hotlink-foreground-color);
    text-decoration: underline;
}


table.msc_edit_table_outer {
    height: 485px;
    width: 100%;
}

div.msc_edit_table_div_wrapper {
    border: 1px solid var(--standard-border-color);
    border-radius: 6px;
    min-height: 485px;                                  /* This is height of outer table -- consider 100% */
    width: 100%;
    padding-top: 5px;
}

table.msc_edit_table_inner {
    padding: 20px;
}

table.msc_edit_table_inner td {
    padding: 10px;
    padding-bottom: 0px;
}

table.dataTable.msc_list_table,
table.msc_list_table {
        width: calc(100% + 2px);
        background-color: var(--main-bg-color-table);
        margin: auto;
        margin-top: 10px;
        font-size: 13px;
}

.boot-5 table.dataTable.msc_list_table,
.boot-5 table.msc_list_table {
    background-color: var(--b5-bg-pages);
}


table.dataTable.msc_list_table td,
table.msc_list_table td {
    padding: 0 3px;
    border: 1px solid var(--standard-border-color);
}

.boot-5 table.dataTable.msc_list_table td,
.boot5 table.msc_list_table td {
   color: var(--b5-text-data);
}


table.dataTable.msc_list_table th,
table.msc_list_table th {
    background-color: var(--main-bg-color-table-header);
    padding-left: 6px;
    border: 1px solid var(--standard-border-color);
}

.boot-5 table.dataTable.msc_list_table th,
.boot-5 table.msc_list_table th {
    background-color: var(--b5-bg-table-heading);
    color: var(--b5-text-th);
}


table.dataTable.msc_list_table tr:nth-child(odd),
table.msc_list_table tr:nth-child(odd) {
    background-color: var(--main-bg-color-row-odd);
}

.boot-5 table.dataTable.msc_list_table tr:nth-child(odd),
.boot-5 table.msc_list_table tr:nth-child(odd) {
    background-color: var(--b5-bg-table-odd);
}


table.dataTable.msc_list_table tr:nth-child(even),
table.msc_list_table tr:nth-child(even) {
    background-color: var(--main-bg-color-row-even);
}

.boot-5 table.dataTable.msc_list_table tr:nth-child(even),
.boot-5 table.msc_list_table tr:nth-child(even) {
    background-color: var(--b5-bg-table-even);
}

table.dataTable.msc_list_table tr.selected,
table.msc_list_table tr:nth-child(odd).selected {
        background-color: var(--main-bg-color-row-selected);
}

.boot-5 table.dataTable.msc_list_table tr.selected,
.boot-5 table.msc_list_table tr:nth-child(odd).selected {
    background-color: var(--b5-bg-table-select);
}

table.dataTable.msc_list_table tr:hover,
table.msc_list_table tr:hover {
         background-color: var(--main-bg-color-row-hover);
}

.boot-5 table.dataTable.msc_list_table tr:hover,
.boot-5 table.msc_list_table tr:hover {
    background-color: var(--b5-bg-table-hover);
}

table.dataTable.msc_list_table tr.selected:hover,
table.msc_list_table tr.selected:hover {
    background-color: var(--main-bg-color-row-selected-hover);
}

.boot-5 table.dataTable.msc_list_table tr.selected:hover,
.boot-5 table.msc_list_table tr.selected:hover {
    background-color: var(--b5-bg-table-select-hover);
}


.divTableWrapper {
    width: 100%;                  /* Intent here is to ensure that div takes up full width of containing element so table can be centered within it */
    margin: 0 auto;
}

.tableWidth80 {
    width: 80% !important;
}

.tableWidth95 {
    width: 95% !important;
}

.tableWidth98 {
    width: 98% !important;
}

table.tableStandard {        /* Divs containing this table should be of class divTableWrapper */
    margin: 0 auto;             /* Centers this table within the containing element. Usually a div taking up 100% of containing element */
    background-color: var(--main-bg-color-table);
    font-size: 13px;
    border: 1px solid var(--standard-border-color);
    border-collapse: collapse;

    /* width: 95%;                 Use 95% of parent as a default but min-width in table will override this --- this ensures a minimum size but makes use of wider screens when avaialble */
}


.boot-5 table.tableStandard { /* Divs containing this table should be of class divTableWrapper */
    background-color: var(--b5-bg-pages);
    color: var(--b5-text-data);
}


table.tableStandard tr:nth-child(odd) {
  background: var(--main-bg-color-row-odd);
}

.boot-5 table.tableStandard tr:nth-child(odd) {
    background: var(--b5-bg-table-odd);
}

.boot-5 table.tableStandard tr:nth-child(even) {
    background: var(--b5-bg-table-even);
}


table.dataTable {
    border-collapse: collapse;
}
/* The following two entries override the default dataTables padding from dataTables source files */
table.dataTable thead th, table.dataTable thead td {
    padding-left: 6px;
}
table.dataTable tbody td, table.dataTable tbody th {
    padding: 3px 3px;
}


table.tableStandard th {
    border: 1px solid var(--standard-border-color);
    background-color: var(--main-bg-color-table-header);
    padding: 3px;
}

.boot-5 table.tableStandard th {
    color: var(--b5-text-th);
    background-color: var(--b5-bg-table-heading);
}


.boot-5 table.tableStandard td {
    color: var(--b5-text-data);
}

table.tableStandard tr:hover {
    background-color: var(--main-bg-color-row-hover);
}

.boot-5 table.tableStandard tr:hover {
    background-color: var(--b5-bg-table-hover);
}

.noBorder {
    border: none;
}

table.noBorder th,
table.noBorder tr,
table.noBorder td,
table.noBorder thead th,
table.noBorder thead tr,
table.noBorder thead td,
table.noBorder tbody th,
table.noBorder tbody tr,
table.noBorder tbody td,
table.noBorder tfoot th,
table.noBorder tfoot tr,
table.noBorder tfoot td {
    border: none;
}


/* Table that makes use of fixed columns */
.tableFixedColumns {            /* Class that allows use of fixed columns within it, probably need a "width: ####px; */
    table-layout: fixed;        /* Prevents resizing of columns within the table */
}

.colFixed {
    /*
        Class that helps deal with overflowing content in columns in a table.
        To make this work be sure to do the following:
        1. For the div that contains the table, add "width: 1400px; margin: 0 auto;"  -- May be optional (creates div that takes up entire window for table to center in)
        2. For the table itself, be sure to include "margin 0 auto;  width: 1350px !important;  table-layout: fixed;"    -- width can vary but must be smaller than div, margin centers table in div, fixed layout prevents resizing columsn based on data
        3. Specify both the "colFixed" and the "colWidth#" classes (below) both th and td elements. Note in the case of datatable server side scripts, you will need to use columns.className to specify both classes.
     */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In the following the !important is used to ensure that the width specifiers are not overridden by element specific widths created internally by dataTables logic */
.colWidth1 {    width: 1% !important;  max-width: 0; }
.colWidth2 {    width: 2% !important;  max-width: 0; }
.colWidth3 {    width: 3% !important;  max-width: 0; }
.colWidth4 {    width: 4% !important;  max-width: 0; }
.colWidth5 {    width: 5% !important;  max-width: 0; }
.colWidth6 {    width: 6% !important;  max-width: 0; }
.colWidth7 {    width: 7% !important;  max-width: 0; }
.colWidth8 {    width: 8% !important;  max-width: 0; }
.colWidth9 {    width: 9% !important;  max-width: 0; }
.colWidth10 {   width: 10% !important; max-width: 0; }
.colWidth11 {   width: 11% !important; max-width: 0; }
.colWidth12 {   width: 12% !important; max-width: 0; }
.colWidth13 {   width: 13% !important; max-width: 0; }
.colWidth14 {   width: 14% !important; max-width: 0; }
.colWidth15 {   width: 15% !important; max-width: 0; }
.colWidth16 {   width: 16% !important; max-width: 0; }
.colWidth17 {   width: 17% !important; max-width: 0; }
.colWidth18 {   width: 18% !important; max-width: 0; }
.colWidth19 {   width: 19% !important; max-width: 0; }
.colWidth20 {   width: 20% !important; max-width: 0; }
.colWidth21 {   width: 21% !important; max-width: 0; }
.colWidth22 {   width: 22% !important; max-width: 0; }
.colWidth23 {   width: 23% !important; max-width: 0; }
.colWidth24 {   width: 24% !important; max-width: 0; }
.colWidth25 {   width: 25% !important; max-width: 0; }
.colWidth26 {   width: 26% !important; max-width: 0; }
.colWidth27 {   width: 27% !important; max-width: 0; }
.colWidth28 {   width: 28% !important; max-width: 0; }
.colWidth29 {   width: 29% !important; max-width: 0; }
.colWidth30 {   width: 30% !important; max-width: 0; }
.colWidth31 {   width: 31% !important; max-width: 0; }
.colWidth32 {   width: 32% !important; max-width: 0; }
.colWidth33 {   width: 33% !important; max-width: 0; }
.colWidth34 {   width: 34% !important; max-width: 0; }
.colWidth35 {   width: 35% !important; max-width: 0; }
.colWidth36 {   width: 36% !important; max-width: 0; }
.colWidth37 {   width: 37% !important; max-width: 0; }
.colWidth38 {   width: 38% !important; max-width: 0; }
.colWidth39 {   width: 39% !important; max-width: 0; }
.colWidth40 {   width: 40% !important; max-width: 0; }
.colWidth41 {   width: 41% !important; max-width: 0; }
.colWidth42 {   width: 42% !important; max-width: 0; }
.colWidth43 {   width: 43% !important; max-width: 0; }
.colWidth44 {   width: 44% !important; max-width: 0; }
.colWidth45 {   width: 45% !important; max-width: 0; }
.colWidth46 {   width: 46% !important; max-width: 0; }
.colWidth47 {   width: 47% !important; max-width: 0; }
.colWidth48 {   width: 48% !important; max-width: 0; }
.colWidth49 {   width: 49% !important; max-width: 0; }
.colWidth50 {   width: 50% !important; max-width: 0; }


table.tableConfig {        /* Divs containing this table should be of class divTableWrapper */
    background-color: var(--main-bg-color-table);
    font-size: 13px;
    border: none;
    border-collapse: collapse;
}

.boot-5 table.tableConfig {
    background-color: var(--b5-bg-pages);
    color: var(--b5-text-data);
}

table.tableConfig th {
    border: none;
    padding: 3px;
    text-align: left;
}

.boot-5 table.tableConfig th {
    background-color: var(--main-bg-color-table-header);
    color: var(--b5-text-th);
}

table.tableConfig td {
    border: none;
    padding: 3px;
    text-align: left;
}

.boot-5 table.tableConfig td {
   color: var(--b5-text-data);
}


table.screenOptions {

}

table.screenOptions th {
    border: none;
    padding: 3px;
    text-align: left;
}

.boot-5 table.screenOptions th {
    background-color: var(--main-bg-color-table-header);
    color: var(--b5-text-th);
}

table.screenOptions td {
    border: none;
    padding: 3px;
    text-align: left;
    vertical-align: top;
}

.boot-5 table.screenOptions td {
    color: var(--b5-text-data);
}

/*
#table_manage_scorecard
 */

table.msc_edit_table
{
    width: calc(100% + 2px);
    background-color: var(--main-bg-color-table);
    margin: -1px;
    font-size: 13px;
    border: 1px solid var(--standard-border-color);
}

.boot-5 table.msc_edit_table {
    background-color: var(--b5-bg-pages);
}

table.msc_edit_table td {
    padding:3px;
}

.boot-5 table.msc_edit_table td {
    color: var(--b5-text-data);
}

table.msc_edit_table th {
    background-color: var(--main-bg-color-table-header);
    color: var(--b5-text-th);
    padding-left: 6px;
    border-top: 1px solid var(--standard-border-color);
    padding:6px;
}

.boot-5 table.msc_edit_table th {
    background-color: var(--b5-bg-table-heading);
    color: var(--b5-text-th);
}

table.msc_edit_table .odd {
    background: var(--main-bg-color-row-odd);
}

.boot-5 table.msc_edit_table .odd {
    background: var(--b5-bg-table-odd);
}

.boot-5 table.msc_edit_table .even {
    background: var(--b5-bg-table-even);
}

table.msc_edit_table input.alertborder {
    border: 3px solid var(--alert-background-color);
}

table.msc_edit_table input[type=file]{
    display:inline-block;
}

table.msc_edit_table td {
    padding:10px;
}


table.widget_table
{
    width: calc(100% + 2px);
    background-color: var(--main-bg-color-table);
    margin: -1px;
    font-size: 13px;
    border: 1px solid var(--standard-border-color);
    border-style: none solid;
}

.boot-5 table.widget_table {
    background-color: var(--b5-bg-pages);
}

table.widget_table td {
    padding:3px;
}

.boot-5 table.widget_table td {
    color: var(--b5-text-data);
}

table.widget_table th {
    background-color: var(--main-bg-color-table-header);
    color: var(--b5-text-th);
    padding-left: 6px;
    border-top: 1px solid var(--standard-border-color);
    padding:6px;
}

.boot-5 table.widget_table th {
    background-color: var(--b5-bg-table-heading);
    color: var(--b5-text-th);
}

.widget_table tr:nth-child(even)  {
    background-color: #F1F5F6;
}

.boot-5 .widget_table tr:nth-child(even)  {
    background-color: var(--b5-bg-table-even);
}
.boot-5 .widget_table tr:nth-child(odd)  {
    background-color: var(--b5-bg-table-odd);
}


/* Used to wrap the widgets in location and employee hotkeys details & status */
.widgetDashboardFieldSet {
    margin: 8px;
    background-color: #ffffff;
    border: 1px solid var(--standard-border-color);
    border-radius: 6px;
    overflow: hidden;
}

/* The following is used to center content in div tags */
.divcenter {
    width: 100%;
    margin: auto;
    text-align: center;
}

table.table_scorecard_class {
    /* width: calc(100% + 2px); */
    /* background-color: var(--main-bg-color-table); */
    /* width: auto; */
    width: 100% !important;
    margin: auto;
    /*
    margin: -1px;
    margin-top: 10px;
    */
    font-size: 13px;
    /* table-layout: fixed; */
}

table.table_scorecard_class thead {
    /* display: block;   --- this was compressing everything into very skinny columns */
}

table.table_scorecard_class tbody {
    /* display: block;   --- this was compressing everything into very skinny columns */
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}

/* Set up standard padding & alignment for cells */
table.table_scorecard_class td,
table.table_scorecard_class thead th,
table.table_scorecard_class tbody th
{
    padding:3px;
    text-align: left;
}

/* Set up different backgrounds for separate types */
/*
table.table_scorecard_class thead th {
    background-color: var(--main-bg-color-table-header);
}

.boot-5 table.table_scorecard_class thead th {
    background-color: var(--b5-bg-table-heading);
    color: var(--b5-text-th);
}

table.table_scorecard_class tbody th {
    background-color: var(--main-bg-color-table-header2);
}

.boot-5 table.table_scorecard_class tbody th {
    background-color: var(--b5-bg-table-rowgroup);
    color: var(--b5-text-rowgroup);
}

.boot-5 table.table_scorecard_class td {
    color: var(--b5-text-data);
}
*/

/* table.table_scorecard_class tr:nth-child(odd) {
    background: var(--main-bg-color-row-odd);
} */
/*
table.table_scorecard_class tr:hover {
    background-color: var(--main-bg-color-row-hover);
}

.boot-5 table.table_scorecard_class tr:hover {
    background-color: var(--b5-bg-table-hover);
}
*/

.msgMbxWrapper {    /* Div that contains mbxNav, mbxList, and mbxPreview divs */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    margin-right: 15px;         /* Create some space to the right, before the message detail */
    max-width: 700px;
}

.msgMbxLabel {
    font-size: x-large;
    padding-right: 20px;
}

.msgMbxNav {       /* Div that holds navigational controls, displayed horizontally if room is available */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    flex: 0 0 auto;     /* Do not grow or shrink */
}

.msgMbxSplitter {
    flex: 0 0 auto;
    width: 100%;
}

.msgMbxSplitter hr {        /* Creating an empty entry gets rid of some unwanted top & bottom margin */
}

.msgMbxList {      /* Div that holds pageable list of messages, listed vertically */
    flex: 1 1 auto;
    min-width: 550px;       /* Make sure the controls at top of table aren't cramped */
}

.msgMbxPreview {   /* Div that can optionally display a preview of the current message */
    flex: 1 1 auto;
    max-width: 700px;
}

.msgUnread {            /* Adjustments to unread messages in a list to make them show up */
    font-weight: bold !important;
}


.msgViewWrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;

}

.msgMbxNavButton {
    margin: 0px 7px 6px 7px !important;

    /* margin-bottom: 6px !important; */
}

.msgViewWrapper {           /* Div that wraps the other elements in the view */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}


table.msgTable th {
    width: 100px;
}

.boot-5 table.msgTable th {
    background-color: var(--b5-bg-table-heading);
    color: var(--b5-text-th);
}

table.msgTable td {
    padding: 2px;
    color: var(--b5-text-data);
}

.boot-5 table.msgTable td {
    color: var(--b5-text-data);
}


.msgViewButtonBar { }
.msgViewButton { }

.msgComposeWrapper { }
.msgComposeFrom {}
.msgComposeTo {}
.msgComposeSubject {}
.msgComposeBody {}
.msgComposeButtonBar {}
.msgComposeButton {}

.statCard {
}

.statCard100 {
    height: 100%;
    min-height: 350px;
    width: 100%;
}

.statCard45 {
    height: 45%;
    width: 45%;
}

.statCardLrg {
    height: 700px;
    width: 1400px;
}

.statCardMed {
    height: 100%;
    max-height: 400px;
    width: 100%;
}

.statCardSml {
    height: 200px;
    width: 325px;
}

.statCardMini {         /* Used in employee_dashboard to show trend in employee data table */
    height: 40px;
    width: 225px;
}


.mscDivRow {        /* Wrapper div that will take full width of what is outside of it */
    display: flex;
    flex-flow: row;
    width: 100%;
}

.mscDivFullHeight {
    height: 100%;
}

.mscDivColumn {        /* Wrapper div that will take full space of what is outside of it */
    display: flex;
    flex-flow: column;
    height: 100%;
}

.mscDivContent {        /* Div that sizes to the content it contains */
    flex: 0 1 auto;
}

.mscDivRemaining {      /* Div that takes the remainder of the available space from its siblings */
    flex: 1 1 auto;
}

.mscDivFixed100 {       /* Div that takes a fixed amount of space */
    flex: 0 1 100px;
}