/* layout
    |-menu col-|-content col-|
    |          |             |
    |          | back row    |
    |          |-------------|
    |          | content row |
*/
/* dashboard menu and content col in desktop styles */
#dashboard-menu-col {
  overflow: auto;
  width: 230px;
  min-width: 230px;
  height: 100%;
  min-height: 800px;
  padding: 0;
  padding-right: 10px;
}

#dashboard-content-col {
/* flex-grow-1 */
-webkit-box-flex: 1;
flex-grow: 1;
padding: 0;
}

/* dashboard menu and content col (1)in mobile mode and (2)show content col styles */
.in-mobile-mode #dashboard-menu-col {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
display: none;
}

.in-mobile-mode #dashboard-menu-col #dashboard-menu-panel {
margin: 0px;
height: 100%;
/*width: 100%;
position: static;
top: auto;*/
}

.in-mobile-mode #dashboard-content-col {
width: 100%;
height: auto;
padding: 0;
display: block;
}

/* dashboard menu and content col (1)in mobile mode and (2)show menu col styles */
.in-mobile-mode #dashboard-menu-col.in-mobile-menu-mode {
display: block;
}

.in-mobile-mode #dashboard-content-col.in-mobile-menu-mode {
display: none;
}

/* dashboard menu styles */
#dashboard-menu-panel {
margin-right: 4px;
font-size: 16px;
font-weight: 200;
height: 100%;
color: whitesmoke;
/*width: 216px;
position: fixed;
top: 48px;*/
}
#dashboard-menu-panel .brand {
line-height: 48px;
display: block;
text-align: center;
font-size: 24px;
font-weight: 800;
background-color: black;
color: gold;
}
#dashboard-menu-panel .toggle-btn {
display: none;
}
#dashboard-menu-panel  ul,
#dashboard-menu-panel  li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 48px;
cursor: pointer;
}
#dashboard-menu-panel  ul :not(collapsed) .arrow:before,
#dashboard-menu-panel  li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
#dashboard-menu-panel  ul .active,
#dashboard-menu-panel  li .active {
border-left: 4px solid gold;
background-color: #4f5b69;
}
#dashboard-menu-panel  ul .sub-menu li.active,
#dashboard-menu-panel  li .sub-menu li.active {
color: gold;
}
#dashboard-menu-panel  ul .sub-menu li.active a,
#dashboard-menu-panel  li .sub-menu li.active a {
color: gold;
}
#dashboard-menu-panel  ul .sub-menu li,
#dashboard-menu-panel  li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 32px;
border-bottom: 2px solid #23282e;
margin-left: 0px;
font-size: 14px;
}
#dashboard-menu-panel  ul .sub-menu li:hover,
#dashboard-menu-panel  li .sub-menu li:hover {
background-color: #020203;
}
#dashboard-menu-panel  ul .sub-menu a,
#dashboard-menu-panel  li .sub-menu a {
  padding-left: 30px;
}
#dashboard-menu-panel  li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
#dashboard-menu-panel  li a {
text-decoration: none;
color: whitesmoke;
display: block !important;
}
#dashboard-menu-panel  li a i {
padding-left: 10px;
padding-right: 28px;
width: 20px;
}
#dashboard-menu-panel  li:hover {
border-left: 4px solid gold;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* dashboard content styles */
#dashboard-back-row {
width: 100%;
}

#dashboard-content-row #orderForm label {
margin: 0px;
padding: 0px;
}

#dashboard-content-col .pager font {
color: black !important;
background-color: gold;
border-color: #d39e00;
}

#dashboard-content-col table:not(.borderless) th,
#dashboard-content-col table:not(.borderless) tr,
#dashboard-content-col table:not(.borderless) td {
vertical-align: middle !important;
text-align: center !important;
}

#dashboard-content-col table.borderless th,
#dashboard-content-col table.borderless tr,
#dashboard-content-col table.borderless td {
vertical-align: middle !important;
border: none !important;
}