:root {
    --dark-mode-background-color: #434343;
    --dark-mode-card-background-color: #333333;
    --dark-mode-grey-color: #CCCCCC;
    --dark-mode-light-grey-color: #F2F2F2;
    --dark-mode-blue-color: #0093d0;
    --dark-mode-primary-button-color: #3499BA;
    --dark-mode-secondary-button-color: #666666;
    --dark-mode-primary-button-hover-color: #61BBD9;
    --dark-mode-secondary-button-hover-color: #CCCCCC;
    --dark-mode-button-disabled-color: #999999;
}

body {
    background-color: #F3F3F3 !important;
}
/* MAIN MENU */
#embeddedMenu {
    /*background-color: #F3F3F3;*/
    background-color: #a5bfdc;
    margin-bottom: 10px;
    /*box-shadow: 0px 2px 6px 0px #b9b9b9;*/
}
#embeddedMenu td {
    background: -webkit-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -o-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -ms-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: linear-gradient(to bottom, #C5D3E7 0%, #C5D3E7 100%);
    /* border: 1px solid #a5bfdc; */
    border-top: 1px solid #fff;
    /*border-bottom: 1px solid #A8C3E2;*/
    height: 35px;
    width: 100px;
}
#embeddedMenu td:hover {
    background: #DFE8F6;
    border-top: 1px solid #DFE8F6;
    /*border-bottom: 1px solid #fff;*/
}
#embeddedMenu td a {
    /*color: #000;*/
    color: #4e4e4e;
}

.topMenuIcon { width:24px; height:24px; fill:#000;}

/* PANELS/PODS */
div.panel {
    box-shadow: 0 0 6px #b9b9b9;
    margin: 0px 5px 10px 5px;
    border: none;
}
div.panel div.title {
    background: -webkit-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -o-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -ms-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: linear-gradient(to bottom, #C5D3E7 0%, #C5D3E7 100%);
    height: 18px !important; 
    text-indent: 0;
    /*padding: 0px 0px 0px 0px;*/
    /* padding: 0px 0px 3px 5px; */
    padding: 5px 6px 6px 9px !important;
    border: 1px solid #a5bfdc;
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
}
div.panel div.title, div.panel div.title a {
    font-size: 15px;
    color: #4e4e4e;
}
#quotenav {
    margin-bottom: 10px !important;
    margin-right: 4px;
    box-shadow: 0px 2px 1px 0px #CCCCCC !important;
    border: none;
    border-top: 1px solid #CCCCCC;
    /*background-color: #BBCBE2 !important;*/
}
div.panel .sub_title {
    font-size: 15px;
}
.icon.logo {
    margin-top: -4px;
    display: none;
}

/* PANEL SECTION TITLES AND CLEAN UP */
div.panel .successdetails #successbreakdown .title, div.panel .panelsection .title, 
#paneltray .panel .title, div.panel .commentBody .title,
#TermOptionsList .draggable, .stretch .title {
    background: #fff;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    margin: 0px;
    height: 23px !important;
}
div.panel .successdetails #successbreakdown .title {
    height: 44px !important;
}
#paneltray .panel .title {
    border-bottom: none;
    background: none;
}
#paneltray .panel {
    background: -webkit-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -o-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: -ms-linear-gradient(top, #C5D3E7 0%, #C5D3E7 100%);
    background: linear-gradient(to bottom, #C5D3E7 0%, #C5D3E7 100%);
    border: 1px solid #a5bfdc;
}
#successbreakdown {
    margin-top: 10px;
}

/* TOOLBUTTON STYLES */
.panel .toolbutton:hover, .widgettoolbar .toolbutton:hover, div.panel div.title .toolbar .toolbutton:hover {
    /*border: 1px solid #3892d3 !important;
    box-shadow: 0 0 6px #3892d3 !important;*/
    /*border: 1px solid #436C92 !important;*/
    /*box-shadow: 0 0 6px #A7A7A7 !important;*/
    border: 1px solid #B3B3B3 !important;
    /*background-color: #FFFFFF;*/
    margin-top: -2px;
}
.panel .toolbutton, .widget:hover .widgettoolbar .toolbutton, div.panel div.title .toolbar .toolbutton {
    /*border-radius: 3px;
    border: 1px solid #B3B3B3;
    background-color: #FFFFFF;*/
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -2px;
}
.widgettoolbar .toolbutton:hover, .widget:hover .widgettoolbar .toolbutton  {
    margin-top: -4px;
}
.panel.toolbar .toolbutton {
    box-sizing: content-box;
}
div.panel div.title .toolbar .toolbutton, div.panel div.title .toolbar .toolbutton:hover {
    padding: 0;
}

/* UNDERLINED 'TEXT' INPUTS */
.icon.search {  width:18px; height:18px; background-image:url(../../../img/svgs/v1.0/Action_Search.svg); } 
.formcolumn .formfield input:not([type=checkbox]):not([type=radio]), .formcolumn .formfield div.label, .formcolumn div.formgap, .formcolumn .formfield textarea
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.formfield input:not([type=checkbox]):not([type=radio]), .formfield textarea, .formfield div.label, .formfield textarea
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.formselectfield select /* FA: This might be an outdated style? I don't think we usually put "select"s inside of ".formselectfield"s. */
{
    border: 0px solid #FFF;
}
.formselectfield, select.formselectfield
{
    background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat right;
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */ 
}
.formselectfieldwrapper select.formselectfield
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}

.select-container-for-select-ellipsis select.formselectfield.text-ellipsis{
    padding: 5px;
    appearance: none;
    color: transparent;
}
.formcolumn .formselectfieldwrapper
{
    border:0;
}
.formselectfieldwrapper 
{
    background: url("../../../img/svgs/v1.0/Action_ExpandDown.svg") no-repeat right;
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
    background-size: 18px 18px; /* ER: fixes douple arrow and arrow alligned in the center issues on IE */
}
body.darkMode .formselectfieldwrapper 
{
    background: url("../../../img/svgs/v1.0/Action_ExpandDown_DarkMode.svg") no-repeat right;
    border:0;
    border-bottom:solid 1px #7d7d7d;
    outline:none;
}
.formselectfieldwrapper.compact
{
    border: 0px solid #FFF;
}
.searchselectfield 
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.searchselectfieldwrapper
{
   border: 0px solid #FFF;
}
body.darkMode .standardfield input:read-only
{
    background-color: #606060;
    color: var(--dark-mode-grey-color)
}

standardfield input, .standardfield select
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.standardfield input, .standardfield select
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.standardfield input:read-only
{
    background-color: #EEEEEE;
}

.standardfield textarea
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.editor.price 
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.datagrid td.content input[type="text"]
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
.datagrid td.content .formselectfieldwrapper
{
    border:0;
    border-bottom:solid 1px #c6c6c6;
    outline:none; /* prevents textbox highlight in chrome */
}
input[type=text], textarea, select {
    -webkit-transition: all 0.30s linear;
    -moz-transition: all 0.30s linear;
    -ms-transition: all 0.30s linear;
    -o-transition: all 0.30s linear;
}
input[type=text]:focus, textarea:focus, select:focus {  
  box-shadow: 0px 2px 0px 0px #f37c36;

  /*Use this to terrify your enemies*/
  /*-webkit-transform: rotate(180deg);
  transform: rotate(180deg);*/
}
 
/* TABLE HEADERS */
table.datagrid tr th {
	background-color: #e6ebf1;
	font-size: 12px;
	padding: 5px;
    border:1px solid #dddddd;
    height:10px;
    color:#0e416b;
}
.datagrid td.content{
    border-style:solid;
    border-color: #dddddd; 
    color: #000000;
    font: 10pt sans-serif, "Arial";
    padding: 5px;
    border:1px solid #ccc;
}
/* Begin Dark Mode */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

#fullscreenHeader_name > div > div:hover {
    color: #DDD;
}

.theme-switch {
    display: inline-block;
    height: 17px;
    position: relative;
    width: 35px;
    bottom: 1.5px;
    left: 5px;
}

.theme-switch input {
    display: none;
}

.dark-toggle-slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 1px;
    transition: .4s;
}

.dark-toggle-slider:before {
    background-color: #f3f3f3;
    content: "";
    position: absolute;
    transition: .4s;
    top: 1px;
}

.dark-toggle-checkbox + .dark-toggle-slider {
    border: 1px transparent solid;
}

.dark-toggle-checkbox:checked + .dark-toggle-slider {
    background-color: var(--dark-mode-card-background-color);
    border: 1px var(--dark-mode-blue-color) solid;
}

.dark-toggle-checkbox:checked + .dark-toggle-slider:before {
    transform: translateX(18px);
    background-color: var(--dark-mode-blue-color);
}

.dark-toggle-slider.dark-toggle-round {
    border-radius: 34px;
}

.dark-toggle-slider.dark-toggle-round:before {
    border-radius: 34px;
    width: 12px;
    height: 12px;
    left: 2px;
}

/* Begin Dark Mode*/

body.darkMode div.panel div.title, body.darkMode div.panel div.title a, body.darkMode div.panel div.parserError {
    color: var(--dark-mode-grey-color) !important;
    background: var(--dark-mode-card-background-color) !important;
}
body.darkMode div.panel input {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}
body.darkMode .datagrid td.content input[type="text"] {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode table.datagrid tr th {
    background-color: var(--dark-mode-background-color);
    border: 1px solid #dddddd;
    color: var(--dark-mode-blue-color);
}

body.darkMode table.datagrid tr th.nosort {
    background-color: var(--dark-mode-background-color);
}

body.darkMode .datagrid td.content {
    background-color: var(--dark-mode-card-background-color);
    color: var(--dark-mode-grey-color);
}

body.darkMode #fullscreenHeader_name .submenuitem:hover {
    background-color: var(--dark-mode-blue-color);
}

body.darkMode input[type=text]:focus, body.darkMode textarea:focus, body.darkMode select:focus  {  
    box-shadow: 0px 2px 0px 0px var(--dark-mode-blue-color);
}

body.darkMode #dialogManager button.save:disabled,
body.darkMode #dialogManager button.cancel:disabled,
body.darkMode #dialogManager button.layoutDelete:disabled {
    background-color: var(--dark-mode-button-disabled-color);
    color: white;
}

body.darkMode #dialogManager button.save:enabled {
    background-color: var(--dark-mode-primary-button-color);
    color: white;
}

body.darkMode #dialogManager button.cancel:enabled,
body.darkMode #dialogManager button.layoutDelete:enabled {
    background-color: var(--dark-mode-secondary-button-color);
    color: white;
}

body.darkMode #dialogManager button.save:enabled:hover {
    background-color: var(--dark-mode-primary-button-hover-color);
    color: white;
}

body.darkMode #dialogManager button.cancel:enabled:hover,
body.darkMode #dialogManager button.layoutDelete:enabled:hover {
    background-color: var(--dark-mode-secondary-button-hover-color);
    color: black;
}

body.darkMode div.panel div.title button:not(.MuiButtonBase-root) {
    background-color: var(--dark-mode-secondary-button-color);
    color: white;
}

body.darkMode div.panel div.title button::not(.MuiButtonBase-root):hover {
    background-color: var(--dark-mode-secondary-button-hover-color);
    color: black;
}

body.darkMode div#orderPorterTagList.notsearching div.tagListItemWrap input[type=text].tagListItem {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode input[type=text].quicksearch_tagListItemWraps {
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode div#orderPorterTagList.searching div.TagPrefixGroup div.tagListItemWrap input[type=text].tagListItem {
    background-color: var(--dark-mode-card-background-color);
}

/* End Dark Mode */