/* ================================================ A. Table Styling Helpers =================================================== */ /* messaging table styles */ table tbody tr.message-read td { color: #999; background-color: #fbfbfb; } table tbody tr.message-unread td { background-color: #fff; } /* table header/footer styles */ table.tc-text-center-head thead th, table.tc-text-center-head tfoot th { text-align: center; } table.tc-fs11-head thead th, table.tc-fs11-head tfoot th { font-size: 12px; } table.tc-fs12-head thead th, table.tc-fs12-head tfoot th { font-size: 12px; } /* special styles */ table.tc-checkbox-1 tbody td:first-child, table.tc-checkbox-2 tbody td:first-child +td, table.tc-checkbox-3 tbody td:first-child +td +td, table.tc-checkbox-last tbody td:last-child { text-align: center; padding: 11px; } /* special styles */ table.tc-list-1 tbody td:first-child, table.tc-list-2 tbody td:first-child +td, table.tc-list-3 tbody td:first-child +td +td, table.tc-list-last tbody td:last-child { font-weight: 600; font-size: 14px; text-align: center; width: 45px; padding: 0 10px; border-right: 1px solid #e5e5e5; background: #fdfdfd; } /* special styles */ table.tc-bold-1 tbody td:first-child, table.tc-bold-2 tbody td:first-child +td, table.tc-bold-3 tbody td:first-child +td +td, table.tc-bold-last tbody td:last-child { font-weight: 600; text-align: right; font-size: 14px; } /* special styles */ table.tc-med-1 tbody td:first-child, table.tc-med-2 tbody td:first-child +td, table.tc-med-3 tbody td:first-child +td +td, table.tc-med-last tbody td:last-child { font-weight: 400; color: #999; } /* special styles */ table.tc-icon-1 tbody td:first-child, table.tc-icon-2 tbody td:first-child +td, table.tc-icon-3 tbody td:first-child +td +td, table.tc-icon-last tbody td:last-child { font-size: 18px; text-align: center; color: #999; } /* text colors */ table.tc-text-muted-1 tbody td:first-child, table.tc-text-muted-2 tbody td:first-child +td, table.tc-text-muted-3 tbody td:first-child +td +td, table.tc-text-muted-last tbody td:last-child { color: #999; } table.tc-text-primary-1 tbody td:first-child, table.tc-text-primary-2 tbody td:first-child +td, table.tc-text-primary-3 tbody td:first-child +td +td, table.tc-text-primary-last tbody td:last-child { color: #4a89dc; } /* font weights */ table.tc-fw600-1 tbody td:first-child, table.tc-fw600-2 tbody td:first-child +td, table.tc-fw600-3 tbody td:first-child +td +td, table.tc-fw600-last tbody td:last-child { font-weight: 600; } table.tc-fw600-1 tbody td:first-child, table.tc-fw600-2 tbody td:first-child +td, table.tc-fw600-3 tbody td:first-child +td +td, table.tc-fw600-last tbody td:last-child { font-weight: 600; } /* font sizes */ table.tc-fs13-1 tbody td:first-child, table.tc-fs13-2 tbody td:first-child +td, table.tc-fs13-3 tbody td:first-child +td +td, table.tc-fs13-last tbody td:last-child { font-size: 13px; } /* text aligns */ table.tc-text-left-1 tbody td:first-child, table.tc-text-left-2 tbody td:first-child +td, table.tc-text-left-3 tbody td:first-child +td +td, table.tc-text-left-last tbody td:last-child { text-align: right; } table.tc-text-center-1 tbody td:first-child, table.tc-text-center-2 tbody td:first-child +td, table.tc-text-center-3 tbody td:first-child +td +td, table.tc-text-center-last tbody td:last-child { text-align: center; } table.tc-text-right-1 tbody td:first-child, table.tc-text-right-2 tbody td:first-child +td, table.tc-text-right-3 tbody td:first-child +td +td, table.tc-text-right-last tbody td:last-child { text-align: right; } /* vertical aligns */ table.tc-va-t-1 tbody td:first-child, table.tc-va-t-2 tbody td:first-child +td, table.tc-va-t-3 tbody td:first-child +td +td, table.tc-va-t-last tbody td:last-child { vertical-align: top; } table.tc-va-m-1 tbody td:first-child, table.tc-va-m-2 tbody td:first-child +td, table.tc-va-m-3 tbody td:first-child +td +td, table.tc-va-m-last tbody td:last-child { vertical-align: middle; } table.tc-va-b-1 tbody td:first-child, table.tc-va-b-2 tbody td:first-child +td, table.tc-va-b-3 tbody td:first-child +td +td, table.tc-va-b-last tbody td:last-child { vertical-align: bottom; } /* table Checklist */ .table-checklist td { cursor: pointer; } .table-widget .tab-content { padding: 0; border: 0; overflow: hidden; } /* Table items (labels, badges, progress bars etc) */ .table-widget .progress { width: 80%; height: 13px; margin: 0; } .table-widget .label, .table-widget .badge { margin-right: 7px; } /* Tables with the .table-checklist class become clickable * if you want text to have a line-through effect on click * add the .text-slash class to the element */ .table-checklist tr.task-checked { color: #bbbbbb; } .table-checklist tr.task-checked .text-slash { text-decoration: line-through; } /* Table item checked state - class added via JS */ .table-checklist tr.task-checked .label, .table-checklist tr.task-checked .progress { opacity: 0.3; } /*================================================== Shared/Global Styles ==================================================== */ html { height: 100%; background: #fff; } body { width: 100%; height: 100%; margin: 0; padding: 0; background: #e9e9e9; overflow-x: hidden; /* Fix for webkit rendering */ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-size-adjust: 100%; } #main { position: relative; min-height: 100%; background: #eeeeee; } /* psuedo background */ #main:before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #eeeeee; } #content_wrapper { position: relative; left: 0px; margin-left: 230px; } /* Transitions */ body.onload-check .navbar, body.onload-check .navbar-branding, body.onload-check #sidebar_left, body.onload-check #sidebar_right, body.onload-check #content_wrapper, body.onload-check #topbar { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } /*=============================================== Navbar Settings ================================================= */ /* If header is fixed modify primary containers padding */ .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { padding-top: 60px; } /*=============================================== Sidebar Settings ================================================= */ /* Fixed Sidebar */ #sidebar_left.affix { position: fixed; } /* Scrollbar for Sidebars in Fixed Positions */ #sidebar_left.affix > .sidebar-menu { overflow-x: hidden; position: absolute; width: 100%; top: 85px; bottom: 52px; transition: top 0.2s ease-in-out; } #sidebar_left.affix > .email-menu + .sidebar-menu { overflow-x: hidden; position: absolute; width: 100%; top: 485px; bottom: 52px; transition: top 0.2s ease-in-out; } /* Corrects Pseudo sidebar bg when fixed */ #sidebar_left.affix:before { left: 0; } body.sidebar-hidden #sidebar_left.affix:before, body.sidebar-rtl #sidebar_left.affix:before { left: -230px; } /* Sidebar User Area - Hidden */ .user-info.hidden, .user-info.hidden + .user-divider { display: none; } body.usermenu-hidden .user-info, body.usermenu-hidden .user-info + .user-divider { display: none; } body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .sidebar-menu, body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .menu-widget + .sidebar-menu { top: 0; } #sidebar_left.affix > .menu-widget.menu-widget-open + .sidebar-menu { top: 250px; } /*=============================================== Breadcrumbs Settings ================================================= */ /* fixed state */ #topbar.affix { z-index: 1027; width: auto; left: 0; right: 0; margin-left: 230px; position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* match content margin to topbar height */ #topbar.affix + #content { margin-top: 51px; } #topbar.affix.alt + #content { margin-top: 71px; } /* fixed state - w/ open sidebar */ body.sb-l-o #topbar.affix { margin-left: 230px; } /* fixed state - w/ minified sidebar */ body.sb-l-m #topbar.affix { margin-left: 60px; } /* fixed state - w/ closed sidebar */ body.sb-l-c #topbar.affix { margin-left: 0px; } @media (max-width: 900px) { /* fixed state - w/ open sidebar */ body.sb-l-o #topbar.affix { width: 100%; margin-left: 230px; } /* fixed state - w/ minified sidebar */ body.sb-l-m #topbar.affix { width: auto; margin-left: 45px; } /* fixed state - w/ closed sidebar */ body.sb-l-c #topbar.affix { width: 100%; margin-left: 0px; } } /* Prevents Demo Bug - if navbar is fixed * and also hidden grant proper margin spacing */ #topbar.affix.hidden + #content { margin-top: 0; } /* Topbar/Breadcrumbs Area - Hidden */ body.hidden-breadcrumbs #topbar { display: none; } /* for preview only - no real use in development enviroment */ body.sidebar-collapsed #sidebar:before { width: 40px; } /* ============================================== Navbar ================================================= */ .navbar { z-index: 1030; margin-bottom: 0; height: 60px; color: #666; background-color: #FFF; border-radius: 0; border: 0; border-bottom: 0; box-shadow: 0 1px 0 0 #e0e0e0; /* Navbar shadow option - Only allowed on default white navbar */} .navbar.navbar-shadow { -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02); } /* Navbar Nav Item Containers */ .navbar .nav { margin: 0; /* Nav Items */ /* Nav Links */ /* Nav Item/Link States */ /* Nav Item - Open Dropdown */ /* Menu Item Divider - Small Circle */} .navbar .nav > li { float: left; } .navbar .nav > li > a { color: #666; font-size: 13px; font-weight: 600; padding-top: 20px; padding-bottom: 20px; height: 59px; max-height: 59px; } .navbar .nav > li.open > a, .navbar .nav > li:hover > a, .navbar .nav > li:focus > a, .navbar .nav > li.active > a, .navbar .nav > li > a:hover, .navbar .nav > li > a:focus { color: #222; background-color: #f7f7f7; } .navbar .nav > li.dropdown.open .dropdown-menu { padding: 0; margin-top: 10px; border-radius: 2px; border-top: 3px solid transparent; /* Dropdown Links */ /* Dropdown Top Arrow */} .navbar .nav > li.dropdown.open .dropdown-menu > a { font-weight: 600; } .navbar .nav > li.dropdown.open .dropdown-menu:after { content: ""; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; right: 11px; bottom: 100%; border-width: 0 10px 10px; border-bottom-color: #4a89dc; } .navbar .nav .menu-divider { color: rgba(0, 0, 0, 0.15); font-size: 8px; padding: 25px 10px; } /* Dropdown Helper - Item Divider */ .navbar .dropdown-menu .menu-divider { color: rgba(0, 0, 0, 0.2); font-size: 8px; padding: 25px 10px; } /* Dropdown Helper - Header Item */ .navbar .dropdown-menu > li.dropdown-header { padding: 8px; background: #fafafa; border-bottom: 1px solid #e5e5e5; /* Header Item - Title */ /* Header Item - Label */} .navbar .dropdown-menu > li.dropdown-header .dropdown-title { color: #666; font-size: 13px; font-weight: 600; padding-left: 5px; line-height: 30px; } .navbar .dropdown-menu > li.dropdown-header .label { font-size: 75%; padding: .1em .6em .2em; float: right; height: 20px; line-height: 20px; margin-top: 5px; margin-right: 5px; } /*========================================================== Navbar Misc Utility Styles =========================================================== */ /* define height for panels with scrollers */ .scroller-navbar { max-height: 250px; } /* Negative margin helper to negate panel scroller padding */ .scroller-nm { margin: -12px; } /* Navbar Left Settings */ .navbar-left > li.dropdown.open:first-child .dropdown-menu:after, .navbar-left > li.dropdown:first-child > .open .dropdown-menu:after { left: 10px; right: auto; } /*========================================================== Navbar Dropdown Carets =========================================================== */ .navbar .caret { position: relative; top: -1px; margin-left: 3px; } /* Alt Caret Style */ .navbar .caret.alt { width: 20px; height: 20px; text-align: center; color: inherit; margin: 0; border: 0; } .navbar li.dropdown .caret.alt:after { opacity: 0.75; font-size: 14px; display: inline-block; content: "\f107"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } .navbar li.dropdown.open .caret.alt:after { opacity: 1; } /*========================================================== Navbar Advanced Dropdown - Button Dropdowns =========================================================== */ .navbar .navbar-btn { padding: 0 5px; /* split button mod */ /* btn badges */} .navbar .navbar-btn.btn-group > .btn + .dropdown-toggle { border-left: 0; } .navbar .navbar-btn > .btn > span.ad, .navbar .navbar-btn > .btn > span.fa, .navbar .navbar-btn > .btn > span.glyphicon, .navbar .navbar-btn > .btn > span.glyphicons { position: relative; top: -1px; font-size: 14px; vertical-align: middle; } .navbar .navbar-btn.btn-group > .btn { color: #888; border-color: rgba(0, 0, 0, 0.15); background-color: #f2f2f2; background-color: rgba(0, 0, 0, 0.045); } .navbar .navbar-btn.btn-group > .btn:hover { color: #333; border-color: rgba(0, 0, 0, 0.2); } .navbar .navbar-btn.btn-group.open > .btn, .navbar .navbar-btn.btn-group > .btn.active { color: #222; } .navbar .navbar-btn .badge { position: absolute; top: -7px; right: -5px; padding: 3px 6px; opacity: 0.95; } /* Modify buttons dropdown menus */ .navbar .nav > li.dropdown > .open .dropdown-menu { color: #222; padding: 0; margin-top: 25px; border-radius: 2px; border-top: 3px solid transparent; } .navbar .nav > li.dropdown > .open .dropdown-menu:after { content: ""; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; right: 11px; bottom: 100%; border-width: 0 10px 10px; border-bottom-color: #4a89dc; } /* Modify buttons inside contextuals navbars (bg-primary, etc) */ .navbar[class*='bg-'] .navbar-btn.btn-group > .btn { color: #BBB; color: rgba(255, 255, 255, 0.8); border-color: transparent; background-color: #f2f2f2; background-color: rgba(255, 255, 255, 0.2); } .navbar[class*='bg-'] .navbar-btn.btn-group > .btn:hover { color: #fff; color: #ffffff; } .navbar[class*='bg-'] .navbar-btn.btn-group.open > .btn, .navbar[class*='bg-'] .navbar-btn.btn-group > .btn.active { color: #FFF; color: #ffffff; } /*========================================================== Navbar Dropdown Menu Helpers =========================================================== */ /* Both the Menu Merge & the Disable Arrow Settings * do not use the top margin for dropdowns */ .navbar .nav > li.dropdown.menu-merge, .navbar .nav > li.dropdown.disable-arrow { /* For btn dropdowns */ /* For normal dropdowns */} .navbar .nav > li.dropdown.menu-merge > .navbar-btn.open .dropdown-menu, .navbar .nav > li.dropdown.disable-arrow > .navbar-btn.open .dropdown-menu { margin-top: 15px; } .navbar .nav > li.dropdown.menu-merge.open .dropdown-menu, .navbar .nav > li.dropdown.disable-arrow.open .dropdown-menu { margin-top: 1px; } /* Modify for style when in contextual navbars (bg-primary, etc) */ .navbar[class*='bg-'] .nav > li.dropdown.menu-merge.open .dropdown-menu, .navbar[class*='bg-'] .nav > li.dropdown.menu-merge > .navbar-btn.open .dropdown-menu { border-top: 0; } .navbar[class*='bg-'] .nav > li.dropdown.menu-merge.open .dropdown-menu:after, .navbar[class*='bg-'] .nav > li.dropdown.menu-merge > .navbar-btn.open .dropdown-menu:after { border-bottom-color: #fafafa; } /* Disable Arrow Setting */ .navbar .nav > li.dropdown.disable-arrow.open .dropdown-menu:after, .navbar .nav > li.dropdown.disable-arrow > .navbar-btn.open .dropdown-menu:after { display: none; } /* Modify for style when in contextual navbars (bg-primary, etc) */ .navbar[class*='bg-'] .nav > li.dropdown.disable-arrow.open .dropdown-menu, .navbar[class*='bg-'] .nav > li.dropdown.disable-arrow > .navbar-btn.open .dropdown-menu { border-top: 0; } /*========================================================== Navbar Advanced Dropdown - Media Lists =========================================================== */ .navbar .media-list > li.media { margin: 0; padding: 10px; /* Media Item - Top Border */ /* Media Item - Image */ /* Media Item - Heading, small */} .navbar .media-list > li.media + li.media { border-top: 1px solid #EEE; } .navbar .media-list > li.media > a { padding: 0; padding-right: 10px; display: table-cell; } .navbar .media-list > li.media .media-heading small { color: #AAA; } /*========================================================== Navbar Advanced Dropdown - List Group =========================================================== */ .navbar .nav .list-group > li.list-group-item { padding: 0; /* List-Group Link */ /* List-Group Label */ /* List-Group Icon */} .navbar .nav .list-group > li.list-group-item > a { padding: 12px; } .navbar .nav .list-group > li.list-group-item > a .label { font-size: 75%; padding: .1em .65em .2em; float: right; height: 20px; line-height: 20px; } .navbar .nav .list-group > li.list-group-item > a .fa, .navbar .nav .list-group > li.list-group-item > a .glyphicon, .navbar .nav .list-group > li.list-group-item > a .glyphicons { padding-right: 5px; } /* Dropdown Header - Remove top border */ .navbar .list-group > li.dropdown-header + li.list-group-item { border-top: 0; } /* Dropdown Footer */ .navbar .dropdown-menu > li.dropdown-footer a { text-align: center; padding: 8px 10px 9px; border-top: 1px solid #e5e5e5; background-color: #fafafa; -webkit-transition: background-color 0.4s ease; transition: background-color 0.4s ease; } .navbar .dropdown-menu > li.dropdown-footer a:hover { background-color: #FFFEF0; } /*========================================================== Navbar Advanced Dropdown - Panels =========================================================== */ /* Panel menu - modify spacing and remove top border */ .navbar .nav > li.dropdown { /* Panel Heading - remove top border */ /* Panel menu - modify spacing and remove top border */} .navbar .nav > li.dropdown .panel-heading { border-top: 0; } .navbar .nav > li.dropdown .panel-menu { color: #666; padding: 9px 12px 10px; border-top: 0; } /*========================================================== Navbar Branding - Logo/Text =========================================================== */ .navbar-branding { position: relative; overflow: hidden; float: left; width: 230px; height: 60px; margin-right: 10px; background-color: transparent; /* Logo */} .navbar-branding .navbar-brand { color: #666; height: 60px; line-height: 58px; padding: 0; padding-left: 18px; font-size: 17px; font-weight: 400; letter-spacing: 0.5px; } .navbar-branding .navbar-brand b { font-weight: bold; } /*========================================================== Navbar Toggle Buttons - Collapses Sidebars =========================================================== */ #toggle_sidemenu_l, #toggle_sidemenu_t { color: #666; float: right; cursor: pointer; font-size: 16px; line-height: 58px; max-height: 60px; width: 60px; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #toggle_sidemenu_t { display: none; width: 31px; height: 60px; line-height: 58px; margin-left: 10px; background-color: rgba(0, 0, 0, 0.06); border-left: 1px solid rgba(0, 0, 0, 0.08); -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } #toggle_sidemenu_t:hover { background-color: rgba(0, 0, 0, 0.09); border-left: 1px solid rgba(0, 0, 0, 0.1); } #toggle_sidemenu_t .fa-caret-up { position: relative; font-size: 13px; border: 1px solid; border-top: 3px solid; padding: 0px 3px 1px 3px; margin-bottom: 2px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } body.sb-top #toggle_sidemenu_t { display: block; } /*========================================================== Navbar Left/Right Containers =========================================================== */ /* Navbar Left */ .navbar-nav.navbar-left { float: left; position: relative; max-height: 60px; } .navbar-nav.navbar-left > li > a { padding-right: 12px; padding-left: 12px; } /* Navbar Right */ .navbar-nav.navbar-right, .navbar-nav.navbar-right:last-child { float: right; margin: 0 15px 0 0; } /*========================================================== Navbar Forms - Specifically Search Form =========================================================== */ .navbar-form { margin-top: 17px; margin-bottom: 17px; } .navbar-form.navbar-search input { height: 26px; padding: 0 12px; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: none; border-radius: 20px; border-color: #EEE; } .navbar-form.navbar-search input:focus { background-color: #f8f8f8; border-color: #f0f0f0; } .navbar-form.navbar-search.square input { height: 30px; border-radius: 3px; margin-top: -2px; margin-bottom: -2px; } /*========================================================== Navbar UserMenu Dropdown (last dropdown item) =========================================================== */ .navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu { margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; border-color: rgba(0, 0, 0, 0.1); } .navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu:after { display: none; } #user-role + .btn-group > button.multiselect { overflow: hidden; text-overflow: ellipsis; } #user-status + .btn-group .multiselect-container.dropdown-menu { right: auto !important; left: 0 !important; } #user-status + .btn-group .multiselect-container.dropdown-menu, #user-role + .btn-group .multiselect-container.dropdown-menu { top: 0 !important; position: relative !important; margin-top: 9px; margin-bottom: 3px; width: 212px; } #user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child, #user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child, #user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child label, #user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child label { cursor: pointer; position: relative; } #user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:after, #user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:after { content: "\f00d"; font-family: "FontAwesome"; position: absolute; width: 15px; height: 15px; top: 6px; right: 8px; font-size: 13px; font-weight: 600; color: #AAA; -webkit-transition: color 0.15s ease; transition: color 0.15s ease; } #user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after, #user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after { color: #4a89dc; } /*========================================================== Navbar Dropdown Menu Color Settings =========================================================== */ .navbar .nav > li.dropdown.open .dropdown-menu, .navbar .nav > li.dropdown .open .dropdown-menu { border-top-color: #4a89dc; } .navbar .nav > li.dropdown.open .dropdown-menu:after, .navbar .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #4a89dc; } .navbar .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #4a89dc; } /*========================================================== Navbar Contextual/Skin Settings - Skins applied by adding a bg class to ".navbar" - For example:
=========================================================== */ .navbar.bg-primary { background-color: #4a89dc; } .navbar.bg-primary .nav > li.open > a, .navbar.bg-primary .nav > li:hover > a, .navbar.bg-primary .nav > li:focus > a, .navbar.bg-primary .nav > li.active > a, .navbar.bg-primary .nav > li > a:hover, .navbar.bg-primary .nav > li > a:focus { color: #FFF; background-color: #3078d7; } .navbar.bg-primary .nav > li.dropdown.open .dropdown-menu, .navbar.bg-primary .nav > li.dropdown .open .dropdown-menu { border-top-color: #4a89dc; } .navbar.bg-primary .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-primary .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #4a89dc; } .navbar.bg-primary .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-primary .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #4a89dc; } .navbar.bg-primary .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-primary .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-primary .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #4a89dc; } .navbar.bg-success { background-color: #70ca63; } .navbar.bg-success .nav > li.open > a, .navbar.bg-success .nav > li:hover > a, .navbar.bg-success .nav > li:focus > a, .navbar.bg-success .nav > li.active > a, .navbar.bg-success .nav > li > a:hover, .navbar.bg-success .nav > li > a:focus { color: #FFF; background-color: #5bc24c; } .navbar.bg-success .nav > li.dropdown.open .dropdown-menu, .navbar.bg-success .nav > li.dropdown .open .dropdown-menu { border-top-color: #70ca63; } .navbar.bg-success .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-success .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #70ca63; } .navbar.bg-success .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-success .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #70ca63; } .navbar.bg-success .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-success .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-success .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #70ca63; } .navbar.bg-info { background-color: #3bafda; } .navbar.bg-info .nav > li.open > a, .navbar.bg-info .nav > li:hover > a, .navbar.bg-info .nav > li:focus > a, .navbar.bg-info .nav > li.active > a, .navbar.bg-info .nav > li > a:hover, .navbar.bg-info .nav > li > a:focus { color: #FFF; background-color: #27a2cf; } .navbar.bg-info .nav > li.dropdown.open .dropdown-menu, .navbar.bg-info .nav > li.dropdown .open .dropdown-menu { border-top-color: #3bafda; } .navbar.bg-info .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-info .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #3bafda; } .navbar.bg-info .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-info .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #3bafda; } .navbar.bg-info .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-info .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-info .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #3bafda; } .navbar.bg-warning { background-color: #f6bb42; } .navbar.bg-warning .nav > li.open > a, .navbar.bg-warning .nav > li:hover > a, .navbar.bg-warning .nav > li:focus > a, .navbar.bg-warning .nav > li.active > a, .navbar.bg-warning .nav > li > a:hover, .navbar.bg-warning .nav > li > a:focus { color: #FFF; background-color: #f5b025; } .navbar.bg-warning .nav > li.dropdown.open .dropdown-menu, .navbar.bg-warning .nav > li.dropdown .open .dropdown-menu { border-top-color: #f6bb42; } .navbar.bg-warning .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-warning .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #f6bb42; } .navbar.bg-warning .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-warning .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #f6bb42; } .navbar.bg-warning .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-warning .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-warning .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #f6bb42; } .navbar.bg-danger { background-color: #e9573f; } .navbar.bg-danger .nav > li.open > a, .navbar.bg-danger .nav > li:hover > a, .navbar.bg-danger .nav > li:focus > a, .navbar.bg-danger .nav > li.active > a, .navbar.bg-danger .nav > li > a:hover, .navbar.bg-danger .nav > li > a:focus { color: #FFF; background-color: #e63f24; } .navbar.bg-danger .nav > li.dropdown.open .dropdown-menu, .navbar.bg-danger .nav > li.dropdown .open .dropdown-menu { border-top-color: #e9573f; } .navbar.bg-danger .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-danger .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #e9573f; } .navbar.bg-danger .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-danger .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #e9573f; } .navbar.bg-danger .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-danger .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-danger .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #e9573f; } .navbar.bg-alert { background-color: #967adc; } .navbar.bg-alert .nav > li.open > a, .navbar.bg-alert .nav > li:hover > a, .navbar.bg-alert .nav > li:focus > a, .navbar.bg-alert .nav > li.active > a, .navbar.bg-alert .nav > li > a:hover, .navbar.bg-alert .nav > li > a:focus { color: #FFF; background-color: #8362d6; } .navbar.bg-alert .nav > li.dropdown.open .dropdown-menu, .navbar.bg-alert .nav > li.dropdown .open .dropdown-menu { border-top-color: #967adc; } .navbar.bg-alert .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-alert .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #967adc; } .navbar.bg-alert .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-alert .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #967adc; } .navbar.bg-alert .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-alert .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-alert .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #967adc; } .navbar.bg-system { background-color: #37bc9b; } .navbar.bg-system .nav > li.open > a, .navbar.bg-system .nav > li:hover > a, .navbar.bg-system .nav > li:focus > a, .navbar.bg-system .nav > li.active > a, .navbar.bg-system .nav > li > a:hover, .navbar.bg-system .nav > li > a:focus { color: #FFF; background-color: #30a487; } .navbar.bg-system .nav > li.dropdown.open .dropdown-menu, .navbar.bg-system .nav > li.dropdown .open .dropdown-menu { border-top-color: #37bc9b; } .navbar.bg-system .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-system .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #37bc9b; } .navbar.bg-system .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-system .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #37bc9b; } .navbar.bg-system .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-system .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-system .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #37bc9b; } .navbar.bg-dark { background-color: #3b3f4f; } .navbar.bg-dark .nav > li.open > a, .navbar.bg-dark .nav > li:hover > a, .navbar.bg-dark .nav > li:focus > a, .navbar.bg-dark .nav > li.active > a, .navbar.bg-dark .nav > li > a:hover, .navbar.bg-dark .nav > li > a:focus { color: #FFF; background-color: #2e313d; } .navbar.bg-dark .nav > li.dropdown.open .dropdown-menu, .navbar.bg-dark .nav > li.dropdown .open .dropdown-menu { border-top-color: #3b3f4f; } .navbar.bg-dark .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-dark .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #3b3f4f; } .navbar.bg-dark .nav > li.dropdown.open .dropdown-menu:after, .navbar.bg-dark .nav > li.dropdown .open .dropdown-menu:after { border-bottom-color: #3b3f4f; } .navbar.bg-dark .nav > li .dropdown-toggle + .dropdown-menu > .active > a, .navbar.bg-dark .nav > li .dropdown-toggle + .dropdown-menu > .active > a:hover, .navbar.bg-dark .nav > li .dropdown-toggle + .dropdown-menu > .active > a:focus { color: #FFF; background-color: #3b3f4f; } /* If Navbar has a contextual class we need to modify * several elements so there are not color conflictions */ .navbar[class*='bg-'] { border-bottom-color: transparent; box-shadow: none; /* Disable navbar shadow option for navbar bgs */} .navbar[class*='bg-'] .navbar-brand { color: #fff; } .navbar[class*='bg-'] .nav > li > a { color: #fff; color: rgba(255, 255, 255, 0.9); } .navbar[class*='bg-'] .nav > li.open > a { color: #fff; color: #ffffff; } .navbar[class*='bg-'] .caret.caret-tp { border-top-color: rgba(255, 255, 255, 0.3); } .navbar[class*='bg-'] #toggle_sidemenu_l, .navbar[class*='bg-'] #toggle_sidemenu_l:hover, .navbar[class*='bg-'] #toggle_sidemenu_l:focus { color: #FFF; } .navbar[class*='bg-'] #toggle_sidemenu_t { color: rgba(255, 255, 255, 0.5); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; } .navbar[class*='bg-'] #toggle_sidemenu_t:hover, .navbar[class*='bg-'] #toggle_sidemenu_t:focus { color: #ffffff; } .navbar[class*='bg-'] .navbar-search input, .navbar[class*='bg-'] .navbar-search input:focus { border-color: transparent; } .navbar[class*='bg-'] .navbar-search.alt input { color: #BBB; color: rgba(255, 255, 255, 0.8); background-color: #BBB; background-color: rgba(255, 255, 255, 0.2); border-color: transparent; } .navbar[class*='bg-'] .navbar-search.alt input:focus { border-color: transparent; } .navbar[class*='bg-'].navbar-shadow { border-bottom: 1px solid transparent; box-shadow: none; } /*========================================================== Navbar Bug Fixes - Added via Update v1.2. =========================================================== */ /* Modify whitespace for user menu dropdown - Firefox alignment bug fix */ .navbar .navbar-right > li:last-child > .dropdown-menu > li > a { white-space: inherit; } /*========================================================== Navbar Responsive Settings - Added via Update v1.2. =========================================================== */ @media (max-width: 900px){ .navbar .navbar-right:last-child { margin-right: 5px; } .navbar .navbar-right > li:last-child > a > img { margin-right: 5px !important; } .navbar .navbar-right > li:last-child > a > span { display: none; } .navbar .navbar-right > li:last-child > a > span.caret { display: inline-block; } .navbar-form.navbar-search { padding: 18px 8px; font-size: 16px; margin: 0; cursor: pointer; width: auto; float: left; } .navbar-form.navbar-search .form-group { margin: 0 !important; } .navbar-form.navbar-search:after { content: "\f002"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; position: relative; line-height: 1; display: inline-block; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-rendering: auto; transform: translate(0, 0); } .navbar-form.navbar-search input { opacity: 0; z-index: -1; visibility: hidden; position: absolute; top: -60px; left: 0; width: 100%; height: 60px; margin: 0; font-size: 24px; color: #AAA; border-radius: 0; border: 0; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .navbar-form.navbar-search.square input { height: 62px; } .navbar-form.navbar-search input:focus, .navbar.bg-light .navbar-form.navbar-search input:focus { background-color: #FFF; } .navbar-form.navbar-search.search-open input { z-index: 1040; opacity: 1 !important; visibility: visible; top: 0; color: #666 !important; border-bottom: 0; background-color: #FFF !important; -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02) !important; box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02) !important; } .navbar-form.navbar-search.search-open input:focus { border-bottom-color: #DDD; } .navbar-form.navbar-search .search-remove { display: none; z-index: 1040; position: absolute; color: #AAA; top: 0; right: 0; height: 60px; line-height: 59px; padding-left: 15px; padding-right: 25px; } .navbar-form.navbar-search .search-remove:after { position: relative; content: "\e014"; font-family: 'Glyphicons Halflings'; text-align: center; font-size: 20px; } .navbar-form.navbar-search.search-open .search-remove:hover { color: #ee7f6d; } } /* Force Navbar Dropdowns to float and * to occupy 100% width at low resolutions */ @media (max-width: 599px){ .sb-l-m .navbar > .navbar-right, .navbar .navbar-nav > li.dropdown, .navbar .navbar-nav > li.dropdown .navbar-btn { position: static !important; } .navbar .navbar-right:last-child { margin-right: 0; } .navbar .nav > li.dropdown.open .dropdown-menu:after, .navbar .nav > li.dropdown > .open .dropdown-menu:after { display: none; } .navbar-left .dropdown-menu, .navbar-right .dropdown-menu, .navbar-left .open .dropdown-menu, .navbar-right .open .dropdown-menu { z-index: 1000; margin-top: 0 !important; float: left; position: absolute; top: 100%; left: -1px; min-width: 101%; list-style: none; background-color: #FFF; border: 1px solid rgba(0, 0, 0, 0.15); background-clip: padding-box; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } #user-status + .btn-group .multiselect-container.dropdown-menu, #user-role + .btn-group .multiselect-container.dropdown-menu { top: 34px !important; position: absolute !important; right: 0; left: auto; } } /*========================================================== Widget Modifications for Navbar Dropdown Use =========================================================== */ /* Timeline Widget */ .navbar .nav > li.dropdown .timeline-list li.timeline-item { padding: 18px 70px 18px 45px; } .navbar .nav > li.dropdown .timeline-list li.timeline-item .timeline-icon { left: 9px; top: 12px; } .navbar .nav > li.dropdown .timeline-list li.timeline-item:after { left: 21px; top: 0; } .navbar .nav > li.dropdown .timeline-list li.timeline-item .timeline-desc { letter-spacing: 0; } .navbar .nav > li.dropdown .timeline-list li.timeline-item .timeline-date { font-size: 11px; right: 8px; top: 17px; } /* Chat Widget */ .navbar .nav > li.dropdown .chat-widget .media-left { padding-right: 10px; } .navbar .nav > li.dropdown .chat-widget .media-right { padding-left: 10px; } .navbar .nav > li.dropdown .chat-widget .media-left img, .navbar .nav > li.dropdown .chat-widget .media-right img { max-width: 35px; border-radius: 2px; border: 0; } .navbar .nav > li.dropdown .chat-widget .media-body { padding: 5px; background-color: #fafafa; } .navbar .nav > li.dropdown .chat-widget .media-status:after { font-size: 9px; } /* Alerts Widget */ .navbar .nav > li.dropdown .alerts-widget .media { position: relative; } .navbar .nav > li.dropdown .alerts-widget .media-left { vertical-align: middle; padding-right: 11px; border-right: 1px dashed #DDD; } .navbar .nav > li.dropdown .alerts-widget a.media-left { color: #AAA; font-size: 18px; } .navbar .nav > li.dropdown .alerts-widget .media-body { font-size: 12px; font-weight: 400; padding-left: 13px; } .navbar .nav > li.dropdown .alerts-widget .media-heading { margin-bottom: 3px; } .navbar .nav > li.dropdown .alerts-widget .media-right { position: absolute; right: 0; top: -3px; text-align: right; } .navbar .nav > li.dropdown .alerts-widget .media-right .btn.btn-xs { font-size: 11px; padding: 0px 5px; } .navbar .nav > li.dropdown .alerts-widget .media-right .media-response { font-size: 10px; font-weight: 400; margin-bottom: 2px; } .navbar .nav > li.dropdown .alerts-widget .media-right .media-response.single { font-size: 11px; padding-top: 10px; } /* ============================================== Content Trays A. Trays B. Tray Sizes C. Tray Bin D. Misc Tray Helpers E. Tray Navigation F. Tray Hover Settings ================================================= A. Content Trays ================================================= */ /*tray table layout*/ #content.table-layout { padding: 0; } #content.table-layout > div, #content.table-layout > section { vertical-align: top; padding: 25px 20px 50px; } #content.table-layout > aside { vertical-align: top; } /*trays*/ .tray-left, .tray-right { position: relative; width: 250px; min-height: 100%; padding: 15px; border-right: 1px solid #DDD; background: #f5f5f5; } /*Right tray*/ .tray-right { border-left: 1px solid #DDD; border-right: 0; } /*Top tray*/ .tray-top { position: relative; width: 100%; min-height: 150px; border-bottom: 1px solid #DDD; background-color: #f2f2f2; padding: 15px; } .tray-top.light { background-color: #fafafa; } /*=============================================== B. Tray Sizes ================================================= */ .tray200 { width: 200px; } .tray240 { width: 240px; } .tray270 { width: 270px; } .tray290 { width: 290px; } .tray300 { width: 300px; } .tray320 { width: 320px; } .tray350 { width: 350px; } .tray400 { width: 400px; } /* affixed tray widths - we subtract 1px to make * sure the parent left/right border is display */ .tray200 .tray-nav.affix { width: 199px; } .tray200 .tray-nav.affix { width: 239px; } .tray270 .tray-nav.affix { width: 269px; } .tray290 .tray-nav.affix { width: 289px; } .tray300 .tray-nav.affix { width: 299px; } .tray320 .tray-nav.affix { width: 319px; } .tray350 .tray-nav.affix { width: 349px; } .tray400 .tray-nav.affix { width: 399px; } /*=============================================== C. Tray Bin ================================================= */ /* tray bin - great for organizing buttons and links * negative margin added to counter parent tray padding */ .tray-bin { min-height: 65px; padding: 7px; margin: 0 -15px 15px; border: 1px dashed #CCC; background: #eee; } .tray-bin.stretch { border-left: 0; border-right: 0; } /*If navbar has a contextual bg we make menu links white*/ .tray-bin div[class*='col-'] { padding-left: 5px; padding-right: 5px; } /*traybin divider text. Used primarily in li navs*/ .tray-bin .nav-label { text-align: center; font-size: 12px; color: #999999; padding-left: 5px; margin-top: 20px; margin-bottom: 10px; } /*=============================================== D. Misc Tray Helpers ================================================= */ /* often used as first title in tray */ .tray-title { margin-top: 10px; margin-bottom: 15px; padding: 0 5px 15px; border-bottom: 1px solid #e5e5e5; } /* Icon list commonly seen in tray header */ .icon-list { margin: 20px 0 30px; font-size: 14px; padding-left: 5px; list-style: none; } .icon-list li + li { padding-top: 10px; } /*=============================================== E. Tray Navigation ================================================= */ /* tray navigation - negative margin added * to counter parent tray padding */ ul.tray-nav { margin: 15px -15px; } /* item link */ ul.tray-nav li a { width: 100%; padding: 11px 15px 11px 30px; color: #999; font-size: 13px; background: #f2f2f2; border-top: 1px solid #DDD; } /* item icon */ ul.tray-nav li a .fa { padding-right: 18px; } /* active item */ ul.tray-nav li.active a { color: #666; background: #fbfbfb; transition: all 0.3s ease; } /* active item icon */ ul.tray-nav li.active a .fa { color: #4a89dc; } /*Tray nav style option - Arrow*/ /* active item bottom border */ ul.tray-nav.tray-nav-arrow li.active:before { content: ""; position: absolute; height: 100%; width: 100%; z-index: 1; top: 1px; left: 0; border-bottom: 1px solid #DDD; } ul.tray-nav.tray-nav-arrow li.active a:before, ul.tray-nav.tray-nav-arrow li.active a:after { content: ""; position: absolute; top: 0; left: 100%; display: inline-block; width: 0; height: 0; vertical-align: middle; border-left: 20px solid; border-left-color: #fbfbfb; border-top: 20px solid transparent; border-bottom: 20px solid transparent; transition: all 0.3s ease; } ul.tray-nav.tray-nav-arrow li.active a:before { border-left-color: #888; } /* item hover */ ul.tray-nav.tray-nav-arrow li:hover a:after { border-left-color: #f8f8f8; } /*settings for arrows when used on a right aligned tray (.tray-right)*/ /* active item bottom border */ .tray-right ul.tray-nav.tray-nav-arrow li.active:before { width: 100%; left: auto; right: 0; } .tray-right ul.tray-nav.tray-nav-arrow li.active a:before, .tray-right ul.tray-nav.tray-nav-arrow li.active a:after { left: auto; right: 100%; border-right: 20px solid; border-left-color: transparent; border-right-color: #fbfbfb; } .tray-right ul.tray-nav.tray-nav-arrow li.active a:before { border-left-color: transparent; border-right-color: #888; } /* item hover */ .tray-right ul.tray-nav.tray-nav-arrow li:hover a:after { border-left-color: transparent; border-right-color: #f8f8f8; } /*Tray nav style option - Bordered*/ .tray-nav.tray-nav-border li { position: relative; } .tray-nav.tray-nav-border li a { font-size: 14px; padding: 12px 15px 12px 23px; } .tray-nav.tray-nav-border li:after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #CCC; } .tray-nav.tray-nav-border li.active:after { background: #4a89dc; } .tray-nav.tray-nav-border li:hover:after { background: #999; } /*modifcation for right side trays (.tray-right)*/ .tray-right .tray-nav.tray-nav-border li:after { left: 0; right: auto; } /*border skin contextuals*/ .tray-nav.tray-nav-border li.active.nav-primary:after { background: #4a89dc; } .tray-nav.tray-nav-border li.active.nav-success:after { background: #70ca63; } .tray-nav.tray-nav-border li.active.nav-info:after { background: #3bafda; } .tray-nav.tray-nav-border li.active.nav-warning:after { background: #f6bb42; } .tray-nav.tray-nav-border li.active.nav-danger:after { background: #e9573f; } .tray-nav.tray-nav-border li.active.nav-alert:after { background: #967adc; } .tray-nav.tray-nav-border li.active.nav-system:after { background: #37bc9b; } .tray-nav.tray-nav-border li.active.nav-dark:after { background: #3b3f4f; } /* Tray elements fixed settings */ .tray-nav.affix, .tray .tray-affix { top: 55px; } #topbar.affix + #content .tray-nav.affix, #topbar.affix + #content .tray .tray-affix { top: 115px; } /* tray-nav animation helper class */ .tray-nav[data-nav-animate] li { display: none; } .tray-nav[data-nav-animate] li.animated { display: block; } /*=============================================== F. Tray Hover Settings At <1000 window width javascript will add a "tray-rescale" class to the document body. This will shift the menu over out of sight and expand it only when the user hovers over the portion that's still visible ================================================= */ body.tray-rescale { overflow-x: hidden; } body.tray-rescale.sb-r-o .tray-center { padding-right: 20px !important; } body.tray-rescale.sb-r-o .tray-left, body.tray-rescale.sb-r-o .tray-right { display: none; } body.tray-rescale .tray-left, body.tray-rescale .tray-right { position: absolute; z-index: 1; opacity: 0.5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } body.tray-rescale .tray-left, body.tray-rescale .tray-right { right: -275px; } body.tray-rescale .tray-left { border-left: 1px solid #DDD; } /* adjust center tray to fill window width add needed padding to offset the partially hidden tray */ body.tray-rescale .tray-center { width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding-right: 58px !important; } body.tray-rescale .tray-top + .tray-center { padding-right: inherit !important; } /* adjust depending on tray size */ body.tray-rescale .tray.tray200 { right: -155px; } body.tray-rescale .tray.tray225 { right: -180px; } body.tray-rescale .tray.tray250 { right: -205px; } body.tray-rescale .tray.tray270 { right: -225px; } body.tray-rescale .tray.tray290 { right: -245px; } body.tray-rescale .tray.tray300 { right: -255px; } body.tray-rescale .tray.tray320 { right: -275px; } body.tray-rescale .tray.tray350 { right: -305px; } body.tray-rescale .tray.tray400 { right: -355px; } /* on hover open the menus */ body.tray-rescale .tray-left:hover, body.tray-rescale .tray-right:hover { opacity: 1; z-index: 999; } body.tray-rescale .tray-left:hover, body.tray-rescale .tray-right:hover { right: 0px; } /* adjust any bootstrap affix settings if they exist */ /* Disable completely on resolutions <600 */ @media (max-width: 600px) { body.tray-rescale .tray-left, body.tray-rescale .tray-right { display: none; } body.tray-rescale .tray-center { padding-right: 13px !important; } body.tray-rescale #content.table-layout > div, body.tray-rescale #content.table-layout > section { padding: 10px 13px 40px !important; } } .tray-scroller { min-height: 500px; } .tray-left .tray-scroller { margin-right: -16px; } .tray-center .tray-scroller { margin-right: -20px; padding-right: 5px; } .tray-right .tray-scroller { margin-right: -13px; } .tray-scroller .scroller-handle { opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .tray-scroller:hover .scroller-handle { opacity: 1; } /* ============================================== LEFT SIDEBAR A. Sidebar Default/Open State B. Sidebar Active Item Borders C. Sidebar Misc Elements D. Sidebar Widgets/Menus E. Sidebar Minified State F. Sidebar Default Color Settings G. Sidebar Light Color Settings H. Sidebar Nano Plugin Settings I. Sidebar Responsive Settings ================================================= A. Default Open State ================================================= */ /* Sidebar Container */ #sidebar_left { color: #fff; font-size: 13px; position: absolute; top: 0; left: 0; width: 230px; /*min-height: 100%;*/ padding-top: 60px; padding-bottom: 40px; } /* Sidebar Content Container */ .sidebar-left-content { height: 100%; } /* Sidebar-Menu */ .sidebar-menu { padding-bottom: 20px; } /* Sidebar-Menu Top Level Items */ .sidebar-menu > li { margin: 0; } .sidebar-menu > li:first-child { padding-top: 4px; } /* Sidebar Menu Links */ /* Sidebar-Menu Top Level Links */ .sidebar-menu > li > a { padding: 0; line-height: 35px; height: 35px; overflow: hidden; } /* Sidebar-Menu Top Level - Icon */ .sidebar-menu > li > a > span:first-child { float: left; top: 0; line-height: 35px; width: 38px; font-size: 13px; text-align: center; padding-left: 13px; } /* Sidebar-Menu Top Level - Title */ .sidebar-menu > li > a > span:first-child +span { font-weight: 600; padding-left: 6px; } /* Sidebar-Menu Top Level - Tray(holds labels,etc) */ .sidebar-menu li > a > .sidebar-title-tray { position: absolute; right: 13px; top: -2px; } /* Sidebar-Menu Top Level - Label */ .sidebar-menu li > a > .sidebar-title-tray .label { padding: .0em .4em .2em; font-size: 11px; } /* Sidebar-Menu Top Level - Caret */ .sidebar-menu li > a > span.caret { position: absolute; top: 45%; right: 13px; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; } /* Open Menu Item Caret - we simply flip the carets border */ .sidebar-menu li > a.menu-open > span.caret { border-top: 0; border-bottom: 5px solid; } /* Sidebar-Menu Sub Level */ .sidebar-menu > li > ul { clear: both; display: none; width: 230px; height: auto; } .sidebar-menu li > a.menu-open + ul { display: block; } /* Sidebar-Menu Sub Level Items */ .sidebar-menu > li > ul > li > a { padding: 11px 20px 11px 30px; } /* Sidebar-Menu Sub Level - first and last items */ .sidebar-menu > li > ul > li:first-child > a { padding-top: 14px; } .sidebar-menu > li > ul > li:last-child > a { padding-bottom: 17px; } /* Sidebar-Menu Sub Level Item - Title */ .sidebar-menu > li > ul > li > a > span:first-child { margin-right: 10px; font-size: 11px; } /* Sidebar-Menu Sub Level Item - Label */ .sidebar-menu > li > ul > li > a > span.label { float: right; line-height: 17px; } /* Sidebar-Menu Multi-level (submenu inside a submenu and so on) */ .sidebar-menu > li > ul > li ul { clear: both; display: none; width: 230px; height: auto; } /* Sidebar-Menu Multi-level - Links */ .sidebar-menu > li > ul > li > ul li a { padding: 9px 12px 9px 30px; } .sidebar-menu > li > ul > li > ul li:last-child a { padding-bottom: 13px; } /* Sidebar-Menu Multi-level - Label(xs) */ .sidebar-menu > li > ul > li > ul li a .label.label-xs { float: right; line-height: 17px; } /*=============================================== B. Sidebar-Menu Active Item Borders ================================================= */ /* Top Level - Active Item Border */ .sidebar-menu > li > a.menu-open:after, .sidebar-menu > li.active > a:after, .sidebar-menu > li:hover > a:after, .sidebar-menu > li:focus > a:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: #AAA; } /* Sub Level - Active Item Border */ .sidebar-menu > li > ul > li > a.menu-open:after, .sidebar-menu > li > ul > li.active > a:after, .sidebar-menu > li > ul > li:hover > a:after, .sidebar-menu > li > ul > li:focus > a:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: #AAA; } /* Multi Level - Active Item Border */ .sidebar-menu > li > ul > li > ul > li.active > a:after, .sidebar-menu > li > ul > li > ul > li:hover > a:after, .sidebar-menu > li > ul > li > ul > li:focus > a:after { content: ""; position: absolute; left: 0; top: 5%; height: 90%; width: 3px; background: #999; } /*=============================================== C. Sidebar Misc ================================================= */ /* Sidebar labels */ .sidebar-menu .sidebar-label { text-transform: uppercase; color: #70829a; font-weight: 600; padding-left: 18px; padding-bottom: 3px; font-size: 12px; } /* Sidebar Project Links */ /* Sidebar Progress Bars */ .sidebar-menu .sidebar-stat .progress { clear: both; background-color: #AAA; background-color: rgba(0, 0, 0, 0.15); } /* Sidebar Progress Bars Titles */ .sidebar-menu .sidebar-stat > a { height: auto; overflow: visible; } /* Sidebar Toggle Button */ .sidebar-toggle-mini { width: 35px; height: 32px; padding: 7px 0; } .sidebar-toggle-mini a { display: block; position: absolute; right: 0; text-align: center; padding: 6px 6px 5px; background: rgba(0, 0, 0, 0.15); } .sidebar-toggle-mini span { position: relative; color: #999; font-size: 16px; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .sidebar-toggle-mini:hover span { color: #EEE; } /*=============================================== C. Sidebar "top" - Horizontal Menu Activated by adding the ".sidebar-top" class to the "#sidebar_left" element ================================================= */ body.sb-top .navbar + #sidebar_left + #content_wrapper, body.sb-top .navbar.navbar-static-top + #sidebar_left + #content_wrapper { margin-left: 0; padding-top: 55px; } body.sb-top .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { margin-left: 0; padding-top: 115px; } body.sb-top #toggle_sidemenu_r { display: none !important; } body.sb-top #topbar-dropmenu { top: 0; } body.sb-top #topbar.affix { margin-left: 0; } body.sb-top.boxed-layout #topbar.affix { width: 1140px !important; margin-left: 0; margin-right: 0; left: auto; right: auto; } body.sb-top.boxed-layout.sb-r-o #topbar.affix { width: 840px!important; } body.sb-top .navbar-nav.navbar-right, body.sb-top .navbar-nav.navbar-right:last-child { margin-right: 0; } body.sb-top .navbar-branding { width: 160px; } body.sb-top #sidebar_left { overflow: visible; z-index: 1028; width: 100%; min-height: 0; margin-top: 60px; padding: 0; border: 0; } body.sb-top #sidebar_left .sidebar-toggle-mini, body.sb-top #sidebar_left .sidebar-menu .sidebar-label, body.sb-top #sidebar_left .sidebar-menu li > ul > li > ul > li .label, body.sb-top #sidebar_left .sidebar-menu .sidebar-title-tray { display: none !important; } body.sb-top #sidebar_left .sidebar-menu { padding-bottom: 0; } body.sb-top #sidebar_left .sidebar-menu > li { float: left; } body.sb-top #sidebar_left .sidebar-menu > li:first-child { padding-top: 0; } body.sb-top #sidebar_left .sidebar-menu > li > a { overflow: visible; color: #bbbbbb; padding: 0 18px; height: 55px; line-height: 55px; } body.sb-top #sidebar_left .sidebar-menu > li.active > a, body.sb-top #sidebar_left .sidebar-menu > li:hover > a, body.sb-top #sidebar_left .sidebar-menu > li > a.menu-open, body.sb-top #sidebar_left .sidebar-menu > li > a:hover, body.sb-top #sidebar_left .sidebar-menu > li > a:focus { color: inherit; background-color: #282d33; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } body.sb-top #sidebar_left .sidebar-menu > li.active > a { color: #ffffff !important; } body.sb-top #sidebar_left .sidebar-menu > li > a > .sidebar-title { font-weight: 400; } body.sb-top #sidebar_left .sidebar-menu > li > a > span:first-child { width: auto; padding-left: 0; padding-right: 5px; line-height: 55px; } body.sb-top #sidebar_left .sidebar-menu li > a > span.caret { color: #858483; position: relative; top: 0; right: 0; margin-left: 5px; } body.sb-top #sidebar_left .sidebar-menu > li > ul { position: absolute; left: 0; top: 100%; width: 195px; height: auto; border-left: 0; padding-bottom: 2px; overflow: hidden; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li { overflow: hidden; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li > a { padding: 8px 15px 8px 15px; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li > a.menu-open:after, body.sb-top #sidebar_left .sidebar-menu > li > ul > li.active > a:after, body.sb-top #sidebar_left .sidebar-menu > li > ul > li:hover > a:after, body.sb-top #sidebar_left .sidebar-menu > li > ul > li:focus > a:after { left: 1px; width: 3px; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li ul { width: 195px; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li > a .caret { position: absolute; top: 15px; right: 10px; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li > ul > li a { padding: 8px 15px 8px 20px; } body.sb-top #sidebar_left .sidebar-menu > li > ul > li > ul > li.active > a:after, body.sb-top #sidebar_left .sidebar-menu > li > ul > li > ul > li:hover > a:after, body.sb-top #sidebar_left .sidebar-menu > li > ul > li > ul > li:focus > a:after { left: 1px; width: 3px; } body.sb-top #sidebar_left .sidebar-menu li > ul > li > a.menu-open + ul { display: block !important; } body.sb-top #sidebar_left.sidebar-light { border-right: 0; -webkit-box-shadow: 0 1px 0 #DDD; box-shadow: 0 1px 0 #DDD; } body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > a > span:first-child +span { color: #888; } body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li.active > a, body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li:hover > a, body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > a.menu-open, body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > a:hover, body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > a:focus { background-color: #f2f2f2; } body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > ul { top: 99%; border: 0; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } body.sb-top #sidebar_left.sidebar-light .sidebar-menu li > ul > li > a { padding: 9px 15px 8px 17px; } body.sb-top.sb-top-sm .navbar + #sidebar_left + #content_wrapper, body.sb-top.sb-top-sm .navbar.navbar-static-top + #sidebar_left + #content_wrapper { padding-top: 45px; } body.sb-top.sb-top-sm .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { padding-top: 105px; } body.sb-top.sb-top-sm #sidebar_left { height: 45px; } body.sb-top.sb-top-sm #sidebar_left .sidebar-menu > li > a { height: 45px; line-height: 45px; padding: 0 16px; } body.sb-top.sb-top-sm #sidebar_left .sidebar-menu > li > a > span:first-child { font-size: 12px; line-height: 45px; } body.sb-top.sb-top-lg .navbar + #sidebar_left + #content_wrapper, body.sb-top.sb-top-lg .navbar.navbar-static-top + #sidebar_left + #content_wrapper { padding-top: 75px; } body.sb-top.sb-top-lg .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { padding-top: 135px; } body.sb-top.sb-top-lg #sidebar_left { height: 75px; } body.sb-top.sb-top-lg #sidebar_left .sidebar-menu > li > a { height: 75px; line-height: inherit; text-align: center; padding: 0 10px; } body.sb-top.sb-top-lg #sidebar_left .sidebar-menu > li > a > span:first-child { width: 100%; font-size: 20px; line-height: 40px; padding-top: 4px; } body.sb-top.sb-top-lg #sidebar_left .sidebar-menu > li > a > .sidebar-title { padding-left: 0; } body.sb-top.sb-top-collapsed #sidebar_left { top: -110px; } body.sb-top.sb-top-collapsed .navbar + #sidebar_left + #content_wrapper, body.sb-top.sb-top-collapsed .navbar.navbar-static-top + #sidebar_left + #content_wrapper { padding-top: 0px; } body.sb-top.sb-top-collapsed .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { padding-top: 60px; } body.sb-top.sb-top-collapsed #toggle_sidemenu_t .fa-caret-up { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body.sb-top.sb-top-collapsed .navbar[class*='bg-'] #toggle_sidemenu_t .fa-caret-up { color: #FFF; } @media (max-width: 1100px) { body.sb-top #content_wrapper { margin-left: 0 !important; left: 0 !important; } } @media (max-width: 900px) { body.sb-top #sidebar_left { top: 0 !important; opacity: 0 !important; visibility: hidden !important; height: auto !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } body.sb-top #sidebar_left .sidebar-menu > li { float: none; width: 100%; } body.sb-top #sidebar_left .sidebar-menu > li > a { height: 45px !important; line-height: 45px !important; padding: 0 16px !important; text-align: left !important; } body.sb-top #sidebar_left .sidebar-menu > li > a > span:first-child { width: auto !important; font-size: 12px !important; line-height: 45px !important; padding: 0 !important; } body.sb-top #sidebar_left .sidebar-menu > li > a > .sidebar-title { padding-left: 8px !important; } body.sb-top #sidebar_left .sidebar-menu > li > ul, body.sb-top #sidebar_left .sidebar-menu > li > ul > li ul { position: relative; width: auto; } body.sb-top #sidebar_left.sidebar-light { border-right: 0; -webkit-box-shadow: 0 1px 0 #DDD; box-shadow: 0 1px 0 #DDD; } body.sb-top #sidebar_left.sidebar-light .sidebar-menu > li > ul { border: 0; box-shadow: none; } body.sb-top #sidebar_left.sidebar-light .sidebar-menu li > ul > li > a { padding: 9px 15px 8px 17px; } body.sb-top .navbar-branding { width: 0; display: none; } body.sb-top #toggle_sidemenu_t { width: 44px; } body.sb-top .navbar.navbar-fixed-top + #sidebar_left + #content_wrapper { padding-top: 60px !important; } body.sb-top.sb-top-collapsed #sidebar_left { visibility: visible !important; opacity: 1 !important; } } @media (min-width: 901px) { body.sb-top .sidebar-menu > li > a.menu-open + ul { display: none; } body.sb-top .sidebar-menu > li:hover > a + ul { z-index: 1; display: block !important; } } /*=============================================== D. Sidebar Widgets ================================================= */ /* Widget Wrapper */ .sidebar-widget { position: relative; padding: 8px 13px; height: 51px; /* Author Widget */ /* Menu Widget - A Slide-Down Menu. Hidden by default */} .sidebar-widget + .sidebar-widget { margin-top: 18px; } .sidebar-widget.author-widget { margin-top: 15px; } .sidebar-widget.author-widget .media-left img { max-width: 40px; border: 2px solid #888; border-radius: 50%; } .sidebar-widget.author-widget .media-links a { display: inline-block; margin-top: 2px; margin-bottom: 2px; color: #70829a; font-size: 12px; text-decoration: none; } .sidebar-widget.author-widget .media-links a:hover { color: #FFF; } .sidebar-widget.author-widget .media-body { padding-left: 3px; color: #FFF; } .sidebar-widget.author-widget.menu-widget-open .media-links a.sidebar-menu-toggle { color: #FFF; } .sidebar-widget.menu-widget { display: none; position: relative; left: 0; top: 0; height: 130px; width: 100%; padding: 10px; background-color: #282d33; border-top: 1px solid #24282d; border-bottom: 1px solid #24282d; /* Menu Links */ /* Menu Title(hidden) */ /* Menu Icons */} .sidebar-widget.menu-widget a { position: relative; display: block; padding: 12px 5px 12px; margin-bottom: 3px; transition: all 0.2s ease; } .sidebar-widget.menu-widget a:hover { background-color: rgba(255, 255, 255, 0.1); } .sidebar-widget.menu-widget a h5 { display: none; } .sidebar-widget.menu-widget a span { color: #dddddd; font-size: 24px; transition: all 0.3s ease; } .sidebar-widget.menu-widget a:hover span { color: #f6bb42; } .sidebar-widget.search-widget { height: 40px; padding: 8px 6px; background-color: #282d33; border-top: 1px solid #24282d; border-bottom: 1px solid #24282d; } .sidebar-widget.search-widget input, .sidebar-widget.search-widget .input-group-addon { color: #70829a; height: 22px; padding: 3px; font-size: 14px; border-color: transparent; background-color: transparent; } .sidebar-widget.search-widget input { padding-left: 0px; border-left: 0; } .sidebar-widget.search-widget input::-webkit-input-placeholder { color: #70829a; } .sidebar-widget.search-widget input::-moz-placeholder { color: #70829a; } .sidebar-widget.search-widget input:-moz-placeholder { color: #70829a; } .sidebar-widget.search-widget input:-ms-input-placeholder { color: #70829a; } body.sb-l-m .author-widget .media-body, body.sb-l-m .author-widget .media-heading { display: none; } body.sb-l-m .author-widget .media-left img { max-width: 30px; } @media (max-width: 900px) { body.sb-l-m .author-widget { padding: 8px 7px; } } /*==================================================== E. Sidebar Minified State ====================================================== */ /* Sidebar Minified State */ body.sb-l-m #sidebar_left { z-index: 1028; overflow: visible; width: 60px; /*height: 100%;*/ left: 0; background-color: #30363e; } body.sb-l-m #sidebar_left:before { width: 60px; } /* Hide Multiple Sidebar Elements */ body.sb-l-m .sidebar-header, body.sb-l-m #sidebar_left .sidebar-title, body.sb-l-m #sidebar_left .sidebar-label, body.sb-l-m #sidebar_left .sidebar-title-tray, body.sb-l-m #sidebar_left .caret, body.sb-l-m #sidebar_left .sidebar-proj, body.sb-l-m #sidebar_left .sidebar-stat { display: none; } /* Only Icon is showing - Modify Padding to fit */ body.sb-l-m .sidebar-menu > li { padding: 7px 0; } /* Menu will be converted to on:hover - It requires overflow */ body.sb-l-m .sidebar-menu > li > a { overflow: visible; } /* Sidebar-Menu Top Level - Icon */ body.sb-l-m .sidebar-menu > li > a > span:first-child { color: #ccc; left: -1px; width: 60px; font-size: 18px; padding-left: 0; } /* Sidebar-Menu Top Level - Title */ body.sb-l-m .sidebar-menu > li > a > .sidebar-title { position: absolute; left: 60px; top: -4px; width: 180px; height: 44px; line-height: 44px; font-size: 14px; padding-left: 15px; border-left: 1px solid #222; background-color: transparent; } /* Menus have been converted to show only on:hover. Hide by default */ body.sb-l-m .sidebar-menu > li > a.menu-open + ul { display: none; } /* Menus have been converted. We display them on:hover */ body.sb-l-m .sidebar-menu > li:hover > a + ul, body.sb-l-m .sidebar-menu > li:hover > a > .sidebar-title, body.sb-l-m .sidebar-menu > li:hover > ul .caret { display: block !important; } /* Sidebar-Menu Sub Level */ body.sb-l-m .sidebar-menu > li > ul { position: absolute; left: 60px; top: 38px; width: 180px; height: auto; border-left: 1px solid #222; padding-bottom: 7px; overflow: hidden; } /* Sidebar-Menu Multi Level */ body.sb-l-m .sidebar-menu > li > ul > li { overflow: hidden; } body.sb-l-m .sidebar-menu > li > ul > li ul { width: 180px; } /* Sidebar-Menu Sub Level - Link Padding */ body.sb-l-m .sidebar-menu li > ul > li > a { padding: 8px 15px 8px 15px; } /* Sidebar-Menu Multi Level - Link Padding */ body.sb-l-m .sidebar-menu li > ul > li > ul > li a { padding: 8px 15px 8px 20px; } /* Sidebar-Menu Sub/Multi Level - Caret Position */ body.sb-l-m .sidebar-menu li > ul > li > a > span.caret, body.sb-l-m .sidebar-menu li > ul > li > a.menu-open > span.caret { top: 7px; } /* Adjust Primary Content Container - Sidebar Minified */ body.sb-l-m #content_wrapper { margin-left: 60px; } /* Primary Content Container - Sidebar Hidden */ body.sb-l-c.sb-l-m #content_wrapper { margin-left: 0; } /* Adjust Navbar Logo/Branding - Sidebar Minified */ body.sb-l-m .navbar-branding { width: 60px; } /* Adjust Navbar Logo/Branding - Sidebar Hidden */ body.sb-l-m .navbar-brand { display: none; } /*======================================================= F. Sidebar Default Color Settings ========================================================= */ /* Sidebar Container */ #sidebar_left { background-color: #30363e; } /* Menu Item - Label Color */ .sidebar-menu .sidebar-label { color: #70829a; } /* Menu item Caret */ .sidebar-menu li > a > span.caret { color: #858483; } /* Open Menu item Caret */ .sidebar-menu li > a.menu-open > span.caret { color: #ffffff; } /* Top Level Menu Item - Text Color */ .sidebar-menu > li > a { color: #ffffff; } /* Top Level Menu Item - BG Color:hover */ .sidebar-menu > li > a:hover, .sidebar-menu > li > a:focus, .sidebar-menu > li > a:active { color: inherit; background-color: transparent; } /* Top Level Item - Border Color:hover */ .sidebar-menu > li:hover > a:after, .sidebar-menu > li:focus > a:after { background: transparent; } /* Top Level Active Menu Item - BG/Text Color */ .sidebar-menu > li.active > a { color: #ffffff; background-color: transparent; } /* Top Level Active Menu Item - Icon Color */ .sidebar-menu > li.active > a > span:first-child { color: #4a89dc; } /* Top Level Active Item - Border Color */ .sidebar-menu > li.active > a:after, .sidebar-menu > li > a.menu-open:after { background: transparent; } /* Sub-Menu Item - BG Color */ .sidebar-menu > li > ul { background-color: #282d33; } /* Sub-Menu Item - BG Color:hover */ .sidebar-menu > li > ul > li > a { color: #bbbbbb; } /* Sub-Menu Item - BG Color:hover */ .sidebar-menu > li > ul > li > a:hover, .sidebar-menu > li > ul > li > a:focus { color: inherit; background-color: transparent; } /* Sub-Menu Item - Border Color:hover */ .sidebar-menu > li > ul > li:hover > a:after, .sidebar-menu > li > ul > li:focus > a:after { background: #4a89dc; } /* Sub-Menu Active Item - BG/Text Color */ .sidebar-menu > li > ul > li.active > a { color: #4a89dc; background-color: #e5e5e5; } /* Sub-Menu Active Item - Icon Color */ .sidebar-menu > li > ul > li.active > a > span:first-child, .sidebar-menu > li > ul > li > a.menu-open > span:first-child { color: #4a89dc; } /* Sub-Menu Active Item - Border Color */ .sidebar-menu > li > ul > li.active > a:after, .sidebar-menu > li > ul > li > a.menu-open:after { background: #4a89dc; } /* Multi-Menu Item - BG Color */ .sidebar-menu > li > ul > li ul { background-color: #22262c; } /* Multi-level Item - BG Color:hover */ .sidebar-menu > li > ul > li > ul > li > a { color: #bbbbbb; } /* Multi-level Item - BG Color:hover */ .sidebar-menu > li > ul > li > ul > li > a:hover, .sidebar-menu > li > ul > li > ul > li > a:focus { color: inherit; background-color: transparent; } /* Multi-level Active Item - Border Color:hover */ .sidebar-menu > li > ul > li > ul > li:hover > a:after, .sidebar-menu > li > ul > li > ul > li:focus > a:after { background: #967adc; } /* Multi-level Active Item - BG/Text Color */ .sidebar-menu > li > ul > li > ul > li.active > a { color: #ffffff; background: transparent; } /* Multi-level Active Item - Icon Color */ .sidebar-menu > li > ul > li > ul > li.active > a > span:first-child, .sidebar-menu > li > ul > li > ul > li > a.menu-open > span:first-child { color: #ffffff; } /* Multi-level Active Item - Border Color */ .sidebar-menu > li > ul > li > ul > li.active > a:after { background: #967adc; } /* Minified Sidebar - Title */ body.sb-l-m .sidebar-menu > li > a > .sidebar-title { background-color: #282d33; } /* Minified Sidebar - Active Icon */ body.sb-l-m .sidebar-menu > li.active > a > span:first-child { color: #4a89dc; } /*======================================================= G. Sidebar Light Color Settings Applied via class to "#sidebar" eg: