/* Main style sheet */
@import "../fonts/fonts.css";

*::-moz-selection {background: #576e7a; color: #fff;}

html {overflow-y: scroll; height: 100%;}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fafafa; color: #333; margin: 0px; padding: 0px; letter-spacing: 0; font-family: "Poppins", "Source Sans Pro", Arial, sans-serif; font-size: 12px; height: 100%;}
input, select, textarea {font-family: "Poppins", "Source Sans Pro", Arial, sans-serif; font-size: 12px;}
a {color: #4293f3; text-decoration: none;}
a:hover {color: #3083e5;}

.clear {clear: both;}
.none {display: none !important;}

.compensate-for-scrollbar {margin-right: 0 !important;}

/* == ICONS == */
.main-header [class^="icon-"], .main-header [class*=" icon-"] { speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1em; min-width: 1em; display: inline-block; text-align: center; font-size: 16px; vertical-align: middle; position: relative; top: -1px;}

/*
.icon-home:before { content: url(../images/icons/new/icon_home_gray.png); }
.icon-gear:before { content: url(../images/icons/new/icon_gear_gray.png); }
.icon-file:before { content: url(../images/icons/new/icon_file_gray.png); }
.icon-file2:before { content: url(../images/icons/new/icon_file2_gray.png); }
.icon-check:before { content: url(../images/icons/new/icon_check_gray.png); }
.icon-settings:before { content: url(../images/icons/new/icon_settings_gray.png); }
.icon-pulse:before { content: url(../images/icons/new/icon_pulse_gray.png); }
.icon-exit:before { content: url(../images/icons/new/icon_exit_white.png); }
.icon-gate:before { content: url(../images/icons/new/icon_gate_gray.png); }

.icon-statistics{width:20px; height:20px; background: url(../images/icons/bar-chart-v2-x64-grayblue.png) center center no-repeat; background-size: cover; }
.icon-train { width:20px; height:20px; background: url(../images/icons/icon-train-gray.png) center center no-repeat; background-size: cover; }
*/

/* Main */
.main-wrapper {width: 100%; min-height: 100%; min-width: 768px; padding-bottom: 20px; }

/* Footer */
.main-footer {display: block; background: #fff; border-top: 1px solid #c7c8cc; box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.15);}
.main-footer > .label {display: block; height: 35px; line-height: 35px; font-size: 12px; color: #444; font-weight: bold; text-align: center;}

/* Header */
.main-header {display: table; left: 0px; top: 0px; width: 100%; z-index: 9; background: #282b31; padding: 0px 20px; }
.main-header > .inner { max-width: 1240px; min-height:46px; width: 100%; min-width: 700px; display: table; margin: 0 auto; padding: 0px 20px;}
.main-header > .inner > .cell-side {display: table-cell; width: 140px; vertical-align: middle; transition: 0.2s;}
.main-header > .inner > .cell-side:hover {opacity: 0.8;}
.main-header > .inner > .cell-side > img { max-height: 23px; display: block; float: left; max-width: 80%; height: 80%; margin-top: -5px; }
.main-header > .inner > .cell-central {display: table-cell;}
.main-header > .inner > .cell-central > .central {display: block; position: relative; font-size: 0px;}
.main-header > .inner > .cell-central > .central > .filler {display: inline-block; vertical-align: top; width: 1px; height: 46px;}

.main-sidebar > .menu > .section > li.inactive > a > span {color: #fff;}


.main-menu {display: flex; flex-flow: row nowrap; align-items: center;}
.main-menu > li {display: block; flex: 0 0 auto; text-transform: uppercase; }
.main-menu > li > .item {display: block; position: relative; height: 46px; padding: 1px 15px 0 48px; line-height: 46px; cursor: pointer; transition: all 0.15s ease-out;}
.main-menu > li > .item > .title {display: block; font-size: 12px; line-height: 46px; color: #f3f3f3; font-weight: 400;}
.main-menu > li > .item > i {position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background-position: center center; background-repeat: no-repeat; background-size: contain; margin-left: 4px; }

.main-menu > li > .item > i.icon-home { background-image: url(../images/icons/new/icon_home_white.svg); }
.main-menu > li > .item > i.icon-gear { background-image: url(../images/icons/new/icon_gear_white.svg); }
.main-menu > li > .item > i.icon-file { background-image: url(../images/icons/new/icon_file_gray.png); }
.main-menu > li > .item > i.icon-file2 { background-image: url(../images/icons/new/icon_reports_white.svg); }
.main-menu > li > .item > i.icon-check { background-image: url(../images/icons/new/icon_check_gray.png); }
.main-menu > li > .item > i.icon-settings { background-image: url(../images/icons/new/icon_settings_white.svg); }
.main-menu > li > .item > i.icon-pulse { background-image: url(../images/icons/new/icon_pulse_gray.png); }
.main-menu > li > .item > i.icon-exit { background-image: url(../images/icons/new/icon_exit_white.png); }
.main-menu > li > .item > i.icon-gate { background-image: url(../images/icons/new/icon_gate_gray.png); }
.main-menu > li > .item > i.icon-statistics { background-image: url(../images/icons/new/icon_statistics_white.svg); }
.main-menu > li > .item > i.icon-train { background-image: url(../images/icons/icon-train-gray.png); }

.main-menu > li > .item > .dropdown {display: none; position: absolute; z-index: 99; left: -15px; top: 46px; padding: 0 15px 15px 15px;}
.main-menu > li > .item > .dropdown > .inner {min-width: 150px; max-width: 220px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25)}
.main-menu > li > .item > .dropdown > .inner > .item {display: block; padding: 7px 14px; font-size: 14px; line-height: 18px; color: #111;}
.main-menu > li > .item > .dropdown > .inner > .item:hover {background: #f4f4f4;}
.main-menu > li > .item > .dropdown > .inner > .item.active {color: #000;}

.main-menu > li > .item:hover {background: #212328;}
.main-menu > li > .item:hover > .dropdown {display: block;}
.main-menu > li > .item.active {background: #212328; box-shadow: inset 0 4px 0 #7ecc2b;}

.header-controls {display: block; position: absolute; right: 0px; top: 0px; font-size: 0px;}
.header-controls > li {display: inline-block; vertical-align: top; position: relative;}
.header-controls > li.first {margin-left: 0px;}
.header-controls > li .icon {display: inline-block; vertical-align: top; width: 46px; line-height: 46px; font-size: 16px; text-align: center; color: #fff; cursor: pointer;}
.header-controls > li .icon:hover { background: #212328; }
.header-controls > li .icon i { top: 1px; }

.header-controls .quick-icon {display: block; position: relative; padding: 0px 10px 0px 10px; line-height: 46px; cursor: pointer;}
.header-controls .quick-icon > img {width: 24px; height: 24px;}
.header-controls .quick-icon.system > img {width: 20px; height: 20px;}
.header-controls .quick-icon > .attention {display: block; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); font-size: 10px;line-height: 10px; text-transform: uppercase; color: #94df44; font-weight: bold;}
.header-controls .quick-icon:hover {background: #212328;}

.header-controls .profile { display: block; padding: 0px 12px; line-height: 44px; font-size: 14px; color: #f3f3f3; font-weight: 400; cursor: pointer; height: 46px; padding-top: 1px; }
.header-controls .profile > img { border-radius: 15px; }
.header-controls .profile > .name { display: inline-block; vertical-align: middle; padding: 0 0 0 10px; height: 46px; padding-top: 1px; }
.header-controls .profile:hover { background: #212328; }

/* Profile/Password Form */

.profile-form,
.password-form { width: 100%; display: table; padding: 10px; }
.profile-form > div,
.password-form > div { display: table-row;}
.profile-form > div > label,
.profile-form > div > div,
.password-form > div > label,
.password-form > div > div { display: table-cell; padding: 6px; }
.profile-form .form-input,
.password-form .form-input { width: 100%; }
.profile-form > .buttons > div,
.password-form > .buttons > div { text-align: right;}

.profile-form > div > div.no-field { padding-left: 13px; }


/* Main content */
.wrapper { width: 100%; padding: 0; margin: 0; }
.container { width: 100%; max-width: 1240px; margin: 0px auto; padding: 0px 20px; position: relative; }


/* SIDEBAR NOT USED */
.main-sidebar > .menu {display: block; padding: 17px 0px;}
.main-sidebar > .menu > .items > .section {margin: 10px 0px 10px 0px;}
.main-sidebar > .menu > .items > .section.first {margin-top: 0px;}
.main-sidebar > .menu > .items > .section > .name {display: block; margin: 0px 0px 8px 0px; padding: 0px 20px; font-size: 10px; font-weight: bold; line-height: 15px; color: #888; text-transform: uppercase; cursor: default;}
.main-sidebar > .menu > .items > .item > a {display: block; padding: 10px 20px;}
.main-sidebar > .menu > .items > .item > a > i {display: block; float: left; top: 0px; width: 16px; line-height: 16px; margin-right: 15px; font-size: 16px; color: #c9c9c9;}
.main-sidebar > .menu > .items > .item > a > span {display: block; line-height: 16px; min-height: 16px; font-size: 13px; color: #c9c9c9; font-weight: bold;}
.main-sidebar > .menu > .items > .item:hover {background-color: #222d32;}
.main-sidebar > .menu > .items > .item > a:hover > i, .main-sidebar > .menu > .section > li > a:hover > span {color: #fff;}
.main-sidebar > .menu > .items > .item.inactive > a > i, .main-sidebar > .menu > .section > li.inactive > a > span {color: #4f575a;}
.main-sidebar > .menu > .items > .item.active {background-color: #455a64;}
.main-sidebar > .menu > .items > .item.active > a > i {color: #fff;}
.main-sidebar > .menu > .items > .item.active > a > span {color: #fff;}


/* Module */
.module-header {position: relative; padding: 0px 40px; background: #fff; border-bottom: 1px solid #ddd; font-size: 0px;}
.module-header > .module-title {display: block; overflow: hidden; height: 70px; line-height: 70px; font-size: 18px; font-weight: bold; color: #263238; cursor: default;}
.module-header > .module-actions {position: absolute; right: 20px; top: 17px; text-align: right;}

.general-no-records {display: block; font-size: 13px; line-height: 22px; color: #666; font-style: italic;}

.shadowed { -webkit-box-shadow: 0px 6px 10px 0px rgba(57, 63, 79, 0.1);
    -moz-box-shadow: 0px 6px 10px 0px rgba(57, 63, 79, 0.1);
    box-shadow: 0px 6px 10px 0px rgba(57, 63, 79, 0.1); }

/* POPUP */
.imperial-popup.default { border: 1px solid #dee2e5; border-radius: 0px; max-height: 90%; overflow: auto; }
.imperial-popup > .ui-inner > .ui-close { right: 9px; top: 9px;}
.imperial-popup.default > .ui-inner > .ui-content { min-height: 200px; min-width: 400px; padding: 0px; background: #f6f6f6; }
.imperial-popup.default > .ui-inner > .ui-content > div > header { width: 100%; background: #f0f2ef; min-height: 40px; line-height: 40px; font-weight: 600; font-size: 1.2em; padding-left: 15px;}
.imperial-popup.default > .ui-inner > .ui-content > div > header b { color: #90c141; }

/* JQPLOT OVERRIDE */
.jqplot-target { font-family: "Source Sans Pro", Arial, sans-serif; }

/* LOADING */
#custom-loading-overlay { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: #000; opacity: 0.4; filter: alpha(opacity=40); z-index: 1000; }
#custom-loading { width: 50px; height: 57px; position: absolute; top: 50%; left: 50%; margin: -28px 0 0 -25px; }

/* FORM INPUTS */
.form-button, .form-input, .form-select, .form-button, .form-checkbox {
    cursor: pointer; border-radius: 4px; border: 1px solid transparent; color: #282b31; transition: 0.2s;
    box-shadow: 0 6px 10px rgba(57, 63, 79, 0.1);
}

/* RETHEME ALL ELEMENTS */

.form-input:hover, .form-select:hover, .form-textarea:hover, .form-button:hover, .form-checkbox:hover,
.form-input:focus, .form-select:focus, .form-textarea:focus, .form-button:focus, .form-checkbox:focus,
select.imperial:hover, select.imperial:focus,
.imperial-select.default:hover .ui-selected, .imperial-select.default.opened .ui-selected,
.imperial-select.default .ui-selected:focus { border-color: #7ecc2b; }
.imperial-select.default .ui-inner .ui-items .ui-item { transition: 0.2s; }
.imperial-select.default .ui-inner .ui-items .ui-item.selected { background: #7ecc2b; }


.imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-header { background: #7ecc2b; }
.imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-weeks > .ui-week > .ui-day.selected, .imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-weeks > .ui-week > .ui-day.selected:hover { background: #7ecc2b; border-radius: 50%; }
.imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-weeks > .ui-week > .ui-day.active:hover, .imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-weeks > .ui-week > .ui-day.today, .imperial-datepicker.default > .ui-inner > .ui-months > .ui-month > .ui-weeks > .ui-week > .ui-day.today:hover { border-radius: 50%; }
.imperial-select.default .ui-inner .ui-search .ui-search-field:focus {border: 1px solid #7ecc2b;}

/* BUTTONS */
.form-button.blue,
button.blue,
.form-button.green,
button.green,
.form-button.red,
button.red {
    color: #fff;
    border-radius: 5px;
    background: #4293f3;
}

.form-button.green,
button.green {
    background: #7ecc2b;
}

.form-button.red, button.red {background: #bb1a1a;}

/* IM kit */
.im-table tr.head > th, .im-table tr.row > td {font-size: 12px;}

/* Module layout with/without sidebar */
.module-layout {display: flex; flex-flow: row nowrap; align-items: stretch;}
.module-layout.fixed {width: 1240px; margin: 0px auto;}
.module-layout > .sidebar {display: block; flex: 0 0 auto; width: 260px; padding: 20px 10px; background: #f1f2f4; border-right: 1px solid #e2e9f1;}
.module-layout > .sidebar > .menu > li > a {display: block; position: relative; padding: 8px 10px; color: #222; border-bottom: 1px solid #e5e5e5;}
.module-layout > .sidebar > .menu > li:hover > a {background: #e8e8e8; color: #000;}

.module-layout > .content {display: block; flex: 1 1 auto; padding: 20px 15px 50px 15px; background: #fcfcfc; box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.10), -1px 0px 3px rgba(0, 0, 0, 0.10);}
.module-layout > .content > .head {display: flex; flex-flow: row nowrap; align-items: center;}
.module-layout > .content > .head .title {display: block; flex: 1 1 auto; font-size: 28px; line-height: 36px; color: #b7b7b7; cursor: default;}
.module-layout > .content > .head .side {display: flex; flex: 1 1 auto; padding: 0px 2px; align-items: center; justify-content: flex-end;}
.module-layout > .content > .head .side > .cell {display: block; flex: 0 0 auto; padding: 0px 2px;}
.module-layout > .content > .head .side > .cell:last-child {padding-right: 0px;}
.module-layout > .content > .head .side > .cell > .im-button {margin: 0px 0px;}

.module-layout > .content > .controls {}

.im-button.disabled{opacity:0.25;}