/*AppContent*/

.leftTable, .topTable {
     background-color: var(--default_back_color);
     border-color: var(--darkNeutral_border_color);
}

.rightDetails, .bottomDetails {
     background-color: var(--default_back_color);
     border-color: var(--darkNeutral_border_color);
}

#splitter, #hsplitter {
     border-left-color: var(--mediumNeutral_border_color);
     border-right-color: var(--mediumNeutral_border_color);
     border-top-color: var(--mediumNeutral_border_color);
     border-bottom-color: var(--mediumNeutral_border_color);
}

.splitterLeftPanel, .splitterTopPanel {
     background-color: var(--default_back_color);
     border-top-color: var(--mediumNeutral_border_color);
     border-bottom-color: var(--mediumNeutral_border_color);
     border-left-color: var(--mediumNeutral_border_color);
     border-right-color: var(--mediumNeutral_border_color);
}

.splitterRightPanel, .splitterBottomPanel {
     background-color: var(--default_back_color);
     border-top-color: var(--mediumNeutral_border_color);
     border-bottom-color: var(--mediumNeutral_border_color);
     border-left-color: var(--mediumNeutral_border_color);
     border-right-color: var(--mediumNeutral_border_color);
}

.splitterTopBorder {
     background-color: var(--lightNeutral_back_color);
     border-top-color: var(--lightHighlight_border_color);
}

/*Old Splitter (NEW splitter CSS moved to jquery.splitter.css 8/17/2013 SGY)
/*===========================================================================*/
.vsplitbar {
     background-color: var(--lightNeutral_back_color);
     border-left-color: var(--darkNeutral_border_color);
     border-right-color: var(--darkNeutral_border_color);
}

.hsplitbar {
     background-color: var(--lightNeutral_back_color);
     border-top-color: var(--darkNeutral_border_color);
     border-bottom-color: var(--darkNeutral_border_color);
}

     .vsplitbar.active, .vsplitbar:hover, .hsplitbar.active, .hsplitbar:hover {
          background-color: var(--mediumHighlight_back_color);
     }
/*==========================================================================*/

.appBody {
     background-color: var(--default_back_color); /*var(--lightNeutral_back_color);*/
}

.appTableHeader {
     background-color: var(--mediumNeutral_back_color);
     color: var(--mediumNeutral_text_color);
     border-color: var(--mediumNeutral_border_color);
}

.appEditArea {
     background-color: var(--default_back_color);
     border-top-color: var(--lightHighlight_border_color);
     border-right-color: var(--lightHighlight_border_color);
     border-bottom-color: var(--lightHighlight_border_color);
     border-left-color: var(--lightHighlight_border_color);
}

.DnDrowDragClass {
     background-color: var(--lightHighlight_back_color);
}

/*
------------------------------------------------
Background Color Classes 
08/09/2022 SGY Made the color classes in appcontent !important so they can be used to override the standard colors for listtbl.
------------------------------------------------
*/

.darkHighlight {
     background-color: var(--darkHighlight_back_color) !important;
     color: var(--darkHighlight_text_color) !important;
}

.mediumHighlight {
     background-color: var(--mediumHighlight_back_color) !important;
     color: var(--mediumHighlight_text_color) !important;
}

.lightHighlight {
     background-color: var(--lightHighlight_back_color) !important;
     color: var(--lightHighlight_text_color) !important;
}

.darkNeutral {
     background-color: var(--darkNeutral_back_color) !important;
     color: var(--darkNeutral_text_color) !important;
}

.mediumNeutral {
     background-color: var(--mediumNeutral_back_color) !important;
     color: var(--mediumNeutral_text_color) !important;
}

.lightNeutral {
     background-color: var(--lightNeutral_back_color) !important;
     color: var(--lightNeutral_text_color) !important;
}

.panelNeutral {
     background-color: var(--panelNeutral_back_color);
     color: var(--panelNeutral_text_color);
}
/*
------------------------------------------------
Background Color Classes - non-important
05/04/2023 JKM Added non-important versions for situations where we want a default, but intend to let the user override, such as mainpage widget headers.
------------------------------------------------
*/

.darkHighlightNonImportant {
     background-color: var(--darkHighlight_back_color);
     color: var(--darkHighlight_text_color);
}

.mediumHighlightNonImportant {
     background-color: var(--mediumHighlight_back_color);
     color: var(--mediumHighlight_text_color);
}

.lightHighlightNonImportant {
     background-color: var(--lightHighlight_back_color);
     color: var(--lightHighlight_text_color);
}

.darkNeutralNonImportant {
     background-color: var(--darkNeutral_back_color);
     color: var(--darkNeutral_text_color);
}

.mediumNeutralNonImportant {
     background-color: var(--mediumNeutral_back_color);
     color: var(--mediumNeutral_text_color);
}

.lightNeutralNonImportant {
     background-color: var(--lightNeutral_back_color);
     color: var(--lightNeutral_text_color);
}
/*
------------------------------------------------
Border Color Classes
------------------------------------------------
*/

.darkHighlightBorder {
     border-color: var(--darkHighlight_border_color);
}

.mediumHighlightBorder {
     border-color: var(--mediumHighlight_border_color);
}

.lightHighlightBorder {
     border-color: var(--lightHighlight_border_color);
}

.darkNeutralBorder {
     border-color: var(--darkNeutral_border_color);
}

.mediumNeutralBorder {
     border-color: var(--mediumNeutral_border_color);
}

.lightNeutralBorder {
     border-color: var(--lightNeutral_border_color);
}

/*
------------------------------------------------
Font Foreground Color Classes
------------------------------------------------
*/

.darkHighlightColor {
     color: var(--darkHighlight_color);
}

.mediumHighlightColor {
     color: var(--mediumHighlight_color);
}

.lightHighlightColor {
     color: var(--lightHighlight_color);
}

.darkNeutralColor {
     color: var(--darkNeutral_color);
}

.mediumNeutralColor {
     color: var(--mediumNeutral_color);
}

.lightNeutralColor {
     color: var(--lightNeutral_color);
}

/*
------------------------------------------------
App Column Menu (Vertical)
------------------------------------------------
*/

.appColumnMenu {
     float: left;
     width: 150px;
     height: 100%;
     background-color: var(--mediumNeutral_back_color);
     color: var(--mediumNeutral_text_color);
}

.ColumnMenu {
     width: 150px;
     margin-top: 0px;
     border-style: none none none none;
     border-color: var(--mediumNeutral_border_color);
     border-width: 1px;
}

     .ColumnMenu ul {
          list-style: none;
          margin: 0;
          padding: 0;
     }

     .ColumnMenu li a {
          height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
          text-decoration: none;
          font-weight: bold;
          font-size: 0.9em;
     }

          .ColumnMenu li a:link, .ColumnMenu li a:visited {
               display: block;
               border-right: solid 1px var(--columnmenu_li_border_right_color);
               border-bottom: solid 1px var(--columnmenu_li_border_bottom_color);
               border-left: solid 1px var(--columnmenu_li_border_left_color);
               border-top: solid 1px var(--columnmenu_li_border_top_color);
               background-color: var(--columnmenu_li_back_color);
               color: var(--columnmenu_li_text_color);
               padding: 8px 0 0 5px;
          }

          .ColumnMenu li a:hover {
               background-color: var(--columnmenu_li_hover_back_color);
               color: var(--columnmenu_li_hover_text_color);
               border-right: solid 1px var(--columnmenu_li_hover_border_right_color);
               border-bottom: solid 1px var(--columnmenu_li_hover_border_bottom_color);
               border-top: solid 1px var(--columnmenu_li_hover_border_top_color);
               padding: 8px 0 0 5px;
          }

          .ColumnMenu li a:focus {
               outline: none;
          }

     .ColumnMenu li.selected a {
          background-color: var(--columnmenu_li_selected_back_color);
          color: var(--columnmenu_li_selected_text_color);
          border-top: solid 1px var(--columnmenu_li_selected_border_top_color);
          border-right: solid 1px var(--columnmenu_li_selected_border_right_color);
          border-bottom: solid 1px var(--columnmenu_li_selected_border_bottom_color);
          padding: 8px 10px 0 0;
          text-align: right;
     }

          .ColumnMenu li.selected a.last {
               border-bottom: solid 1px var(--columnmenu_li_selected_border_bottom_color);
          }

/*
------------------------------------------------
Table Sorter 
------------------------------------------------
*/

.header:hover {
     background-color: var(--lightNeutral_back_color);
     color: var(--lightNeutral_text_color);
     cursor: pointer;
}

/*
------------------------------------------------
Cafeteria ten-key button colors & gradients
------------------------------------------------
*/
.tkKey-grad {
     background-image: radial-gradient(circle, #426788 0%,#002556 100%);
}

.tkKey-flat {
     background-color: var(--mediumHighlight_back_color);
}

.sp-picker-container {
     background-color: var(--mediumNeutral_back_color);
}

.sp-palette-container {
     background-color: var(--mediumNeutral_back_color);
}