/************* CSS Variables ****************/
:root {
    --darkgray: #1e1e1e;
    --gray-mediumdark: #333;
    --gray-medium: #717171;
    --gray-mediumlight: #B9B7B8;
    --graylight: #f2f2f2;
    --white: #ffffff;
    --blue: #0c9aff;
    --gray-label: #ffffff80;
    --shadow: 0px 10px 8px #0000001a;
    --treeview-border: #4a4a4a;
    --opacity-5: .5;
    --background-color: #fcfcfc;
    --red: #fe423f;

    /* Theme Colors */
    --primary-theme-color: var(--darkgray);
    --secondary-theme-color: var(--blue);

    /* Primary Button Colors */
    --btn-primary-color: var(--blue);
    --btn-primary-color-text: var(--white);
    --btn-primary-hover-color: var(--darkgray);
    --btn-primary-hover-color-text: var(--white);
    --btn-primary-focus-color: 0 0 0 0.25rem rgba(12, 154, 255, 0.25); /* #0c9aff */

    /* Secondary Button Colors */
    --btn-secondary-color: var(--gray-medium);
    --btn-secondary-color-text: var(--white);
    --btn-secondary-hover-color: var(--darkgray);
    --btn-secondary-hover-color-text: var(--white);
    --btn-secondary-focus-color: 0 0 0 0.25rem rgba(113, 113, 113, 0.25); /* #717171 */

    /* Tertiary Button Colors */
    --btn-tertiary-color: var(--background-color);
    --btn-tertiary-color-text: var(--blue);
    --btn-tertiary-hover-color: var(--blue);
    --btn-tertiary-hover-color-text: var(--white);
    --btn-tertiary-border-color: var(--blue);
    --btn-tertiary-focus-color: 0 0 0 0.25rem rgba(12, 154, 255, 0.25); /* #0c9aff */
    --btn-tertiary-box-shadow: inset 0 0 0 100px rgba(12, 154, 255, 0.8) !important;

    /* Delete Button Colors */
    --btn-delete-color: var(--red);
    --btn-delete-color-text: var(--white);
    --btn-delete-hover-color: var(--darkgray);
    --btn-delete-hover-color-text: var(--white);
    --btn-delete-focus-color: 0 0 0 0.25rem rgba(254, 66, 63, 0.25); /* #fe423f */

    /* Other Colors */
    --btn-minor-color: var(--btn-tertiary-color);
    --btn-minor-color-text: var(--btn-tertiary-color-text);
    --btn-minor-hover-color: var(--btn-tertiary-hover-color);
    --btn-minor-hover-color-text: var(--btn-tertiary-hover-color-text);
    --btn-minor-border-color: var(--btn-tertiary-border-color);
    --tooltip-color: #474747;

    /* Text Colors */
    --text-primary-color: var(--darkgray);
    --text-secondary-color: var(--gray-medium);
    --text-contrast-with-primary-theme: var(--white);
    --text-contrast-with-secondary-theme: var(--darkgray);
    --text-contrast-with-primary-background: var(--darkgray);
    --text-contrast-with-secondary-background: var(--white);
    --text-hyperlink: var(--blue);

    /*Blue Hover*/
    --highlight: var(--blue);
}

body {
    background: var(--primary-theme-color);
    color: var(--text-contrast-with-primary-theme);
}

/************* Layout Components ****************/
.full-height-row {
    background: var(--darkgray);
}

.sig-resource-head {    
    background: var(--darkgray);
    border-bottom: var(--white);
}

/************* Navigation Bar ****************/
.page-navbar {
    background-color: var(--darkgray);
}

.page-navbar .navbar-nav > li.open > a {
    background-color: var(--darkgray);
}

/************* Sidebar Base Styles ****************/
.page-sidebar {
    background-color: var(--darkgray) !important;
}

.page-sidebar:after {
    background-color: var(--darkgray) !important;
}

/************* Main Menu Items ****************/
/* Base Styles */
.page-sidebar .side-nav {
    width: 100%;
}

.page-sidebar .side-nav .nav > li a {
    color: var(--gray-label);
    position: relative;
    padding: 15px 15px 15px 10px;
    width: 100%;
    display: inline-block;
}

.page-sidebar .side-nav .nav > li a i {
    color: var(--gray-label);
}

/* Hover States */
.page-sidebar .side-nav .nav > li a:hover {
    background-color: var(--darkgray);
    color: var(--gray-label);
}

.page-sidebar .side-nav .nav > li a:hover i {
    color: var(--gray-label);
}

/* Active States */
.page-sidebar .side-nav .nav > li a.active {
    background-color: var(--darkgray);
    color: var(--gray-label);
}

.page-sidebar .side-nav .nav > li a.active i {
    color: var(--gray-label);
}

.page-sidebar .side-nav .nav > li a.active:before {
    background-color: var(--white) !important;
    border-color: var(--treeview-border) !important;
}

/* Expand/Collapse States */
.page-sidebar .side-nav .nav > li a.expand {
    background-color: var(--blue);
    color: var(--white);
}

.page-sidebar .side-nav .nav > li a.expand i {
    color: var(--white);
    font-size: 24px;
}

    .page-sidebar .side-nav .nav > li a.notExpand {
        background-color: var(--gray-mediumdark);
        color: var(--gray-label);
        margin-bottom: 1px;
    }

.page-sidebar.collapse-sidebar .nav li.hover-li a {
    background-color: var(--gray-mediumdark);
}

.page-sidebar .side-nav .nav > li a.notExpand i {
    background-color: var(--gray-mediumdark);
    color: var(--white);
    font-size: 20px;
}

/************* Submenu Styles ****************/
/* Base Styles */
.page-sidebar .side-nav .nav > li ul.sub {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

.page-sidebar .side-nav .nav > li ul.sub > li {
    position: relative;
    margin-bottom: 0;
}

.page-sidebar .side-nav .nav > li ul.sub > li a {
    background-color: var(--darkgray);
    color: var(--white);
    font-weight: 700;
    padding: 0 3px 0 0;
    position: relative;
}

/* Submenu Icons and Borders */
.page-sidebar .side-nav .nav > li ul.sub > li a i {
    background-color: var(--darkgray);
    margin-left: 15px;
    border-left: 2px solid var(--treeview-border);
    position: relative;
    display: inline-block;
    padding-left: 10px;
    height: 100%;
}

.page-sidebar .side-nav .nav > li ul.sub > li:last-child a i.indent::before {
    content: '';
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 2px;
    height: 50%;
    background-color: var(--darkgray);
}

/* Plus Icon Positioning */
.page-sidebar .side-nav .nav > li ul.sub > li:last-child a .lhs_rgt {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.page-sidebar .side-nav .nav > li ul.sub > li:last-child a .lhs_rgt .ficon-plus {
    color: var(--white);
    font-size: 15px;
}

/* Selected Submenu Item */
.page-sidebar .side-nav .nav > li ul.sub > li a.highlight-lhs-select {
    color: var(--blue) !important;
    font-weight: 700 !important;
}

.page-sidebar .side-nav .nav > li ul.sub > li a.highlight-lhs-select i {
    color: var(--white) !important;
    border-left-color: var(--blue);
}

/* Expanded Submenu */
.page-sidebar .side-nav .nav > li ul.sub.show li {
    background-color: var(--darkgray);
}

.page-sidebar .side-nav .nav > li ul.sub.show li a {
    background-color: var(--darkgray);
}

.page-sidebar .side-nav .nav > li ul.sub.show li.highlight-menu:last-child:after {
    background-color: var(--gray-label);
}

.page-sidebar .side-nav .nav > li ul.sub.show li .sub:before,
.page-sidebar .side-nav .nav > li ul.sub.show li .sub:after {
    background-color: var(--gray-label);
}

.page-sidebar .side-nav .nav > li ul.sub.show li:last-child .sub:after {
    background-color: transparent;
}

/************* Collapsed Sidebar States ****************/
.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub {
    background-color: var(--darkgray);
}

.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub li a {
    background-color: var(--darkgray);
    line-height: 30px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.page-sidebar.collapse-sidebar .nav li.hover-li ul.sub li.hasSub a.notExpand {
    background-color: var(--gray-mediumdark);
}

/************* Utility Classes ****************/
.highlight-lhs-select {
    color: var(--white) !important;
}

.indent {
    display: inline-block;
    width: 20px;
    height: auto;
    background-image: url('../images/dot.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    vertical-align: middle;
    padding-left: 0;
}

/* Use blue dot for selected/active menu items */
.highlight-lhs-select .indent,
.active .indent,
.selected .indent {
    background-image: url('../images/dot_blue.svg');
}

/* Toggle Sidebar */
.toggle-sidebar {
    position: relative;
    margin-left: 0px !important;
    width: auto !important;
}

.toggle-sidebar > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/************* Grid and UI Components ****************/
.btn-prime {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white);
}
.btn-prime:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

.buttonAdd, #btnRegister {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border: solid 1px;
}

.buttonAdd:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnRegister:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnSave {
    border-color: var(--white);
    background-color: var(--blue);
    color: var(--white) !important;
    border-width: 1px !important;
}

#btnSave:hover {
    box-shadow: inset 0 0 0 100px rgba(0,0,0,0.3);
    text-decoration: none;
}

#btnSave:focus,
.buttonAdd:focus {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border-width: 1px !important;
}

.wo-new-btn {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.Po-btn {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.Po-btn:hover {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
}
.po-new-btn {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.po-new-btn:hover {
    border-color: var(--white) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
}

.btn-primary {
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
    text-align: center;
}

.btn-primary:hover {
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.btn-primary:focus:hover {
    background-color: var(--blue) !important;
}

.btn-primary:active {
    background-color: var(--blue) !important;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: var(--white) !important;
  background-color: var(--blue) !important;
  border-color: var(--white) !important;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: var(--white) !important;
  background-color: var(--blue) !important;
  border-color: var(--white) !important;
}

.resourceButtonCenter {
    color: var(--white);
    background-color: var(--blue);
}

.ui-accordion-header-active {
    background-color: var(--darkgray) !important;
    color: #cfd8dc !important;
}

/* Kendo Grid Styles */
.k-grouping-header {
    background-color: var(--darkgray) !important;
    color: rgba(255,255,255,.8) !important;
}

/*.k-tooltip {
    background-color: var(--darkgray) !important;
}

.k-callout-n {
    border-bottom-color: var(--darkgray) !important;
}*/

.k-grid .k-state-selected {
    color: var(--white) !important;
    background-color: var(--blue) !important;
}

.k-pager-numbers .k-state-selected {
    border-color: var(--darkgray) transparent transparent !important;
    color: var(--white);
    background: var(--gray-medium);
}

.k-pager-wrap .k-pager-numbers .k-link:hover {
    background: var(--gray-mediumlight);
    border-top-color: var(--blue) !important;
    color: var(--darkgray);
}

.k-grid-header .k-i-sort-asc-sm,
.k-grid-header .k-i-sort-desc-sm,
.k-grid-header .k-sort-order {
    color: var(--darkgray) !important;
}

/************* Left Side Menu Alternative Styles ****************/
.left-side-menu-outer {
    background: var(--darkgray);
}

.left-side-menu ul li ul {
    background: var(--darkgray);
}

.left-side-menu ul li ul li a:hover {
    color: #cfd8dc;
    background-color: var(--darkgray);
}

.left-side-menu ul li ul li a.active {
    color: #cfd8dc;
    background-color: var(--darkgray);
}

.left-side-menu-selected {
    color: #cfd8dc !important;
    background-color: var(--darkgray);
}

.gridWorkOrdersAssetMultiSelectRows {
    background-color: var(--blue) !important;
}