*,::before,::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline:none;
  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

body {
  font: 13.5px 'Quicksand',sans-serif;
  background: #00001a url('bg-splash.jpg') 50% 50%;
  background-repeat: no-repeat;background-attachment: fixed;
  color:#fcfcfe;position:relative;
}
input, select, textarea, button{font:13px/1 'Open Sans','Quicksand', sans-serif;color:#444}
a {cursor: pointer;text-decoration: none;background-color: transparent;}
img {vertical-align: middle;border-style: none;}

h1 {font-size: 20px;margin:20px auto}
h2 {font-size:18px !important}
h3 {font-size:15px !important}
h5 {font:600 22px/24px 'Quicksand', sans-serif;margin:5px 0 8px;}
h5 small {display:block;font-size:50%;color:#888}
.heading {font: 600 20px/1.4 'Quicksand',sans-serif;text-transform:uppercase;text-align:center;padding:3px 0;margin:12px 0;transition:all 1s;}

/***** Header *******/
header {background-color: rgba(0,0,0,0.95);border-bottom: 2px solid #00001a80;color:#fcfcfe;margin-left:-15px;}
header .inner-header {display: flex;justify-content:center;padding:6px 0 3px;margin:0 auto;}
header .inner-header > div {display:flex;align-items:center;width:50%;}
header .inner-header > div.left-col {padding-left:10px;}
header .inner-header > div.left-col > div {display:flex;flex-direction:column}
header .inner-header > div.left-col > #gravatar {margin-right:8px;border-radius:20px;box-shadow:0 0 0 1px #fcfcfc, 0 0 0 2.5px #fcfcfc;}
header .inner-header > .right-col {padding:0 15px;justify-content:flex-end;}
header .switchTheme, header .switchTheme.light {padding:3px;background:#1cc09f;border-radius: 25px;display: flex;}
header .switchTheme.dark {background: #004467;}
header .switchTheme.light .fa-sun-o   {color: #1cc09f;}
header .switchTheme.light #sun .fa-circle  {color: #fcfcfe;}
header .switchTheme.dark  .fa-sun-o   {color: #1cc09f;}
header .switchTheme.dark  #sun .fa-circle  {color: transparent;}
header .switchTheme.light .fa-moon-o {color: #004467;}
header .switchTheme.light #moon .fa-circle {color: transparent;}
header .switchTheme.dark  .fa-moon-o {color: #004467;}
header .switchTheme.dark  #moon .fa-circle {color: #b3c7d1;}
header .switchTheme.light #smScr .fa-circle {color: #fcfcfe;}
header .switchTheme.dark  #smScr .fa-circle {color: #b3c7d1;}
header .switchTheme .fa {font-weight: 600}
header .switchTheme span, header .switchTheme i {transition:all 0.8s ease-out}
header .switchTheme .fa-stack (width:24px;height:24px;line-height:24px)
header .switchTheme .fa-stack-2x (font-size:24px)
.installPanel {display:none;margin-left:10px;position:relative}
.installPanel button {font:13px 'Quicksand',sans-serif;border:none;}
.installPanel #buttonInstall {height:33px;background-color:#4285F4;color: #fff;border-radius:3px;width:130px;}
/* .installPanel #buttonClose {width:20px;height:20px;border-radius:10px;background-color:#ffffff;position:absolute;top:-9px;right:-9px;z-index:1000;display:none} */
header p {font:10px 'Quicksand',sans-serif}
header #screenNameHeader {font-weight:600;text-transform: uppercase;}
.menu-button {
  color: #fff;background-color:#004467;border-radius:3px;border:0;
  font-size:16px;text-align: center;vertical-align: middle;padding: 4px 12px;height:33px;
}
.notification {width:50px;font-size:16px;position:relative;text-align:center;cursor:pointer}
.notification .bubble {position:absolute;top:-3px;right:12px;width:12px;height:12px;border-radius:6px;text-align:center;line-height:11px;font-size:8px;background:red;}
.notification .noti-panel {position:absolute;top:30px;right:-60px;width:200px;height:auto;padding:8px 5px;z-index:101;background:white;color:#444;
    display:none;box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);}
.notification .noti-panel p {margin:6px 0;font-size:12px;}
.notification .noti-panel .arrow-up {
    position: absolute;top:-10px;z-index:102;right:80px;width:0;height: 0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #fff;}
footer {position:absolute;padding-top:95vh;left:calc(50% - 50px);z-index:-9999}

/* authentication */
.panel {
 width: 320px;height: 420px; background: rgba(0, 0, 0, 0.67);
 top: 350px;left: 50%;position: absolute;transform: translate(-50%,-50%);box-sizing: border-box;
 padding: 60px 30px;color: #fff;border-radius:5px;
}
.panel .icon{width: 96px;height: 96px;border-radius: 50%;position: absolute;top: -50px;left: calc(50% - 48px);}
.panel .heading {font-size:26px;font-weight:600;color:#2ecc71;padding:20px 0 30px;text-align:center}
.panel input {width: 100%;margin-bottom: 20px;}
.panel input[type="text"],
.panel input[type="password"] {border: none;border-bottom: 1px solid #fff;background:transparent;outline: none;
        height: 36px;color: #fff;font-size: 15px;padding-left:6px;margin-top:4px;border-radius: 5px;}
.panel p { margin: 0;padding: 0;font-weight: bold;}
.panel .loginButton{margin: 20px 0;width:100%;border:0;border-radius:5px;box-shadow:0 5px #13562f;background-color:#2ecc71;color:#fff;font:600 16px/36px 'Quicksand',sans-serif;}
.panel .loginButton:active {box-shadow: 0 2px #13562f;transform: translateY(3px)}
    
.mg-lr-15 {margin:auto 15px}
.bold {font-size:1.25em;font-weight:600}
.font13 {font-size:13px}
.font15 {font-size:15px}
.font18 {font-size:18px;}
.readonly {background-color:#f3f3f3}
.ref, .ref13 {font-size:10px;color:#ccc;display:block !important}
.ref13 {font-size: 13px;}
.green {color:#2ecc71}
.red {color:red}
.active {text-shadow:0 1px 2px #444;}
.textShadow {text-shadow: 1px 1px 2px rgba(0,0,0,0.3)}
.uppercase {text-transform: uppercase}
.block {display:block}
.float-right {float: right!important;}
/* wrapper */
.wrapper {display:flex;width:100%;overflow-x: hidden;}

.pace-done .navbar-static-side, .pace-done .nav-header, .pace-done li.active, .pace-done #page-wrapper, .pace-done .footer {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

#page-wrapper {
    padding-left:15px;
    position: relative !important;
    flex-shrink: 1;
    width: calc(100% - 220px);
    min-height: 100vh;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
@media (min-width: 768px) {
  #page-wrapper {
      position: inherit;
      min-height: 100vh;
  }
}
.gray-bg, .bg-muted {
    background-color: #f3f3f4;
}
/* Nav */
nav {width:220px;overflow:hidden;z-index:101;background-color: #2f4050;font-size: 13px;color: #676a6c;transition:width 0.2s;position:fixed;height:100%}
.nav {display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
.nav > li {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
}
.nav > li:hover {
  background: #293846;
}
.nav-header {
  padding: 33px 25px;
  text-align:center;
  background-color: #2f4050;
  background-image: url("header-profile.png");
  transition:all 0.2s;
}
.nav-header a {
    color: #DFE4ED;
}
.nav-header .text-muted {
    color: #8095a8 !important;
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}
.rounded-circle {
    border-radius: 50%!important;
    border:solid 3px white;
    margin:0 auto 5px;
}

.logo-element {
    text-align: center;
    display: none;
    padding: 18px 0;
}
.nav > li.active {
    border-left: 4px solid #19aa8d;
    background: #293846;
}
.nav > li.active > p {
  color: white;
}
.nav > li > p, .nav > li > a {
    color: #a7b1c2;
    font-weight: 600;
    padding: 14px 20px 14px 25px;
    display: block;
}
.nav > li > p i, .nav > li > a i {
    margin-right: 6px;
}
.nav .fa-angle-left {
    float: right;
    line-height: 1.42857;
}
.nav .collapse {
    display: none;
}
ul.nav-second-level {
    background: #293846;
}
.nav-second-level li, .nav-third-level li {
    border-bottom: none !important;
}
.nav-second-level li a {
    padding: 7px 10px 7px 10px;
    padding-left: 52px;
}
.label {
    background-color: #d1dade;
    color: #5e5e5e;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    padding: 3px 8px;
    text-shadow: none;
    border-radius: 0.25em;
    line-height: 1;
    white-space: nowrap;
}
.nav .label, .ibox .label {
    font-size: 10px;
}
.label-warning, .badge-warning {
    background-color: #f8ac59;
    color: #FFFFFF;
}
.label-primary, .badge-primary {
    background-color: #1ab394;
    color: #FFFFFF;
}
.label-info, .badge-info {
    background-color: #23c6c8;
    color: #FFFFFF;
}
.navbar-default .landing_link,.navbar-default .special_link {
  top: 44px;
}
.navbar-default .landing_link a {
    background: #1cc09f;
    color: white;
}
.navbar-default .landing_link a:hover {
  background: #17987e !important;
  color: white;
}
.navbar-default .landing_link a span.label {
    background: #fff;
    color: #1cc09f;
}
.navbar-default .special_link a {
    background: #1ab394;
    color: white;
}
.navbar-default .special_link a:hover {
  background: #17987e !important;
  color: white;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
    background-color: #293846;
    color: white;
}
body.mini-navbar .nav-header {padding:0 22px;height:125px;}
body.mini-navbar .logo-element {display: block;}
body.mini-navbar .navbar-static-side {width: 70px;height:100%;position:fixed;}
body.mini-navbar .profile-element,
body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav li p span,
body.mini-navbar .navbar-default .nav li a span { display: none;}
body.mini-navbar .navbar-default .nav > li > p,
body.mini-navbar .navbar-default .nav > li > a {font-size: 16px;text-align:center}
body.mini-navbar #page-wrapper {width: calc(100% - 70px);margin-left:70px;}


/***** Main body *******/
main {
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto 60px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.page {height:auto;transition:all 0.2s}
.page .col {
    box-sizing: border-box;width:100%;height:auto;margin:5px auto;padding: 10px;
    background: rgba(0,0,0,0.85);border-radius: 3px;
    display: flex;flex-direction: column;align-items: center;
}
.col .minirow {
  position:relative;display:flex;flex-direction:row;
  width: 100%;margin-top:10px;
  font-size:13px;
}

.minirow .col-33 {width: 33%;margin-bottom:10px;border-right:solid 1px #333;font-size:12px;}
.minirow .col-33:first-of-type{width:30%}
.minirow .col-33:last-of-type{width:36%;border-right:none}

/* main .col> p, main .col>div>p {justify-content: center;padding: 10px 0;background-color: #eeeeee15;line-height:19px;min-height:39px;text-align: center;} */

.large-graph-container {position:relative;width:100%;margin-top:15px}

.info_list {list-style:none;color:#fff;font:400 13px 'Quicksand',sans-serif;}
.info_list li {padding:6px 0;border-top:1px solid #333;display:flex;align-items:center;height:44px}
.info_list li span {display:inline-block}
.info_list li .fa {font-size:12px;width:1.5em}
.info_list li .sqr-bulletin::before {margin-right: 6px;content: "\f0c8";font:0.4em 'FontAwesome';color: #0F9D58;}
.info_list li > span:nth-of-type(1) {width:calc(100% - 224px);text-align:left} 
.info_list li > span {width:115px;text-align:right}

.info_list li > span.col-s {width:150px}
.info_list li > span.col-l {width:calc(100% - 150px)}
.info_list li > span table tr {line-height:18px;}
.info_list li > span table tr:nth-child(even) {background-color:rgba(255,255,255,0.1)}
.info_list li > span table td {width:33%}
.info_list li > span table span {width:50%;min-width:40px;}
.info_list li > span table span:nth-child(odd) {text-align: left}
.cP li {height:36px}
.stat-container, .doughnut-container, 
.chart-container, .graphs-container-current {margin:5px 10px;width:calc(100% - 20px);position:relative;} 
.total-cost-container, .daily-cost-container,
.total-percent-container, .daily-percent-container {top:0;left:0;position:relative;width:100%;height:calc(100% - 42px);z-index:100;}
.daily-percent-container {display:none}
.canvas {position:relative;transition:all 0.2s}
.first-container .canvas {height:164px;}
.stat-container .canvas, .doughnut-container .canvas {height:186px;}
.graph-title {text-align: center;font: 600 13.5px/36px 'Quicksand',sans-serif;background-color: #fff;color:#444;width:100%;}
.showLegend {min-height:calc(100vh - 360px);background-color:#fff;position:relative;transition:all 0.2s;width:100%;} 
.graphs-container {width:100%;color:#444;margin-top: 10px;position:relative;} 
.graphs-container .graph-container {vertical-align:top}

/** page2 **/
.col-4-h {width:100%;margin:0;padding:3px 0 5px;text-align:center;color:#444;background-color:#fff;border-radius:5px 5px 0 0;display:flex;align-items:center;justify-content:center} 
.col-4-h span {line-height:25px;margin:0 3px}
.col-4-h #total_e {font:600 22px 'Quicksand',sans-serif;}

.level-1-color {color: #4285F4} .level-2-color {color: #2ecc71} .level-3-color {color: #0F9D58}
.level-4-color {color: #f1c40f} .level-5-color {color: #f39c12} .level-6-color {color: #DB4437}
.level-0-bg,
.level-1-bg {background-color: #4285F4cc;border: solid 1px #4285F4;} .level-2-bg {background-color: #2ecc71bb;border: solid 1px #2ecc71;}
.level-3-bg {background-color: #0F9D58aa;border: solid 1px #0F9D58;} .level-4-bg {background-color: #f1c40fcc;border: solid 1px #f1c40f;} 
.level-5-bg {background-color: #f39c12cc;border: solid 1px #f39c12;} .level-6-bg {background-color: #DB4437cc;border: solid 1px #DB4437;}
.loading-bg {color: #fff;background-color:rgba(42, 168, 118,1)}
.loading-body  {color: #004085 !important;background-color:#fff}
  .greenButtonGroup {width:100%}
  .greenButton {text-align:center;margin:5px 0;background-color: #2ecc71bb !important;color:#fff;
                border-radius:5px;border: solid 1px #2ecc71;width:100%;font:600 13px/30px 'Quicksand',sans-serif;}
  .greenButtonMini {width: calc(50% - 2px);display:inline-block;}
  .greenButton .fa {margin-left:6px}

  .slick-prev, .slick-next {z-index:100;top:20px !important}
  .viewButton {width: calc(100%/4);border-bottom:solid 2px transparent;margin-top:5px;}
  .viewButton.active {background-color: #eeeeee15}
  .period-container {margin: 10px 0 0;width:100%;text-align:center;justify-content:center;border-radius: 5px;display:flex;font-weight:600;position:relative}
  .period-container button {border: none;background-color: #202020;color: #fcfcfe;font: 600 13px 'Quicksand', sans-serif;height:30px;}
  .period-container button i.fa:last-of-type {margin-left:8px}
  .period-container button span {display:none;}
  .period-container .period-panel {position:absolute;padding:10px;height:auto;background-color:#1c1a1e;z-index:101;display:none}
  .large-graph-container .inner-container {display:flex;justify-content: center;line-height:30px;}
  .period_button {width:30px;height:30px;text-align:center;font:600 15px/28px 'Open Sans',sans-serif;margin: 0 40px;background-color: rgba(255,255,255,0.1);}
  .period-panel ul li {width: calc(50% - 10px);display: inline-block;line-height: 30px;border: solid 1px #444;margin: 5px 2.5px;background-color:#eeeeee10}
  
  .customTime-container button {height:35px;width:calc(34% - 3px);text-shadow:0 0 3px #444;margin:0;}    
  .customTime-container .customRange {padding:4px 8px;background-color: #202020;font: 13px Quicksand,sans-serif;color:#fcfcfe;margin: 0 0 5px 5px;width:calc(100% - 30px);border:solid 1px #eeeeee15;}
  .customTime-container label {font-size:13px;width:25px;display:inline-block;text-align:right}
    
  .flatpickr-calendar {background-color:#fff}
  .flatpickr-confirm {color:#444;font:600 17px 'Quicksand',sans-serif}
  .flatpickr-time input {padding-right:8px}
  .flatpickr-time .numInputWrapper span {width:40px !important;height:100% !important;line-height: 100% !important;}
  .flatpickr-time .numInputWrapper span.arrowDown {top: 0 !important;left: 0 !important}
  .flatpickr-time .numInputWrapper span:after {font-family:'FontAwesome';font-size:15px;color:#444;margin-left:10px;border:none 0 !important;top:12px !important;}
  .flatpickr-time .numInputWrapper span.arrowDown:after {content: '\f056'}
  .flatpickr-time .numInputWrapper span.arrowUp:after {content: '\f055'}
    
  .page3 .col {background-color:#ffffff;color:#444;margin:5px auto;width: calc(100% - 20px);min-height: calc(100vh - 120px)}
  .col .container {font:13px/24px 'Quicksand',sans-serif;padding:10px 5px 5px;color:#444;width:100%;max-width:480px;}
  .col .container button {max-height:30px}
  .col .container p {font:600 12px/30px 'Quicksand',sans-serif;padding:0 3px;width:100%;margin-bottom: 5px;text-transform:uppercase}
  .col .container ol label {font-weight:600;width:calc(60% - 39px);font-size: 13px;}
  .col .container ol label small {font-weight:400;font-size:13px;}
  
  ol.info {width:100%}
  ol.info li {justify-content:initial;margin: 2px 0;background: #fcfcfc;padding: 0 5px;border:solid 1px transparent;}
  ol.info .selected {border: solid 1px #ccc;background: rgba(0,0,0,0.05);border-radius:3px}
  ol.info li * {margin-right:10px;height:30px;line-height:30px;}
  ol.info li label {width:fit-content !important;width: -moz-fit-content !important;}
  div.info_buttons {width:100%;display:flex}
  div.info_buttons button {height:30px;margin-top:5px;margin-bottom:5px;}
  #info_all_routes button {width:20px;height:20px;position:absolute;top:5px;right:0;border-radius:3px}
  .greenSkin {background-color:#2ecc71bb;border:1px solid;border-color:#2ecc7130 #2ecc71 #2ecc71 #2ecc7130;color:#fcfcfe}
  .redSkin {background-color:#DB443730;border:1px solid;border-color:#DB443730 #DB4437 #DB4437 #DB443730;color:#DB4437}
  #info_all_routes > div {width:100%;padding-left:3px;text-align:left;overflow:hidden;height:32px;border-top: 1px solid #eee;position:relative}
  #info_all_routes > div:last-of-type {border-bottom: 1px solid #eee;}
  #info_all_routes > div input[type=text] {border: 0;padding: 6px;font:13px/17px 'Open Sans', sans-serif;width:calc(100% - 125px);margin-top:1px}
  #info_all_routes > div input[type=text]:focus {background-color: #3ecd6420;}
  #info_all_routes > div > .fa-circle {margin-right:5px}
  #info_all_routes > div > .fa:last-of-type {position:absolute;top:10px;right:6px;color:#66666666}
  #info_all_routes > div > .lo {width:35px;display: inline-block}
  #info_all_routes > div:nth-of-type(1) {padding:3px 0;height:30px;font-weight: 600;font-size: 14px;}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(1) {width:30px;margin-left:4px}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(2) {width:54px;margin-left:10px;}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(3) {width:21px;}
  #info_all_routes > div > span {display:inline-block}

  .info_date {margin: 8px auto} 
  .info_date > div:first-of-type {font-size:12px;text-align:center;font-weight:600}
  .dateBox {display:inline-block;padding:4px 8px;width:calc(100%/7 - 5px);height:38px;line-height:22px;margin:0 5px 5px 0;}
  .dateBox {border:solid 1px #00000015;text-align:center;background:#eeeeee60;}
  .dateBox.active {background-color:#2196F3;color: white;font-weight: 700;}
     
  .level-7-color {color:#9467bd}
  .level-8-color {color:#bcbd22}

  ol.chart-values {width:100%;padding:10px 5px;background-color:#fff}
  ol li {
    display: flex;
    justify-content:space-between;
    margin: 5px 0;
    padding: 0;
    line-height: 30px;
    position: relative;
  }
  ol li.values {padding:5px 5px 0;line-height:14px;font-size:12px;border-top:1px solid #f8f8f8}
  ol li.values i.fa {font-size:10px;margin-right:4px}
  ol li:nth-of-type(1) span {font-weight:700}
  ol li.values:first-of-type {font-size:11px;}
  ol li.values>span {width:50px;text-align:right}
  ol li.values>span:nth-of-type(1) {width:calc(100% - 150px);text-align:left;}
  ol li:nth-of-type(1) span {color:#444;font:600 11px 'Quicksand',sans-serif}
  ol li:nth-of-type(2) span {text-decoration:underline;font-size: 12px}
  
  .combo {
    width:60%;height:30px;padding: 0 5px;
    font: 13px/1.42857143 'Open Sans','Quicksand',sans-serif;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  .combo_short {width:calc(40% - 26px)}
  .combo_shorter {width:52px}
  .editButton {width:60px;margin-left:5px;border-radius:5px;}
  
  .helpButton {width:20px;height:20px;border-radius:20px;box-shadow:0 0 3px white;font-size:12px;background-color:green;color:white;}
  #modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 1000;
  }
    
  #modal-content {
    position: relative;    
    width: auto;
    margin: calc(50vh - 190px) auto 0;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: .3rem;
    z-index: 1000;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.2s;
    animation-name: animatetop;
    animation-duration: 0.2s
  }

    #modal-content .modal-header {
      border: 0;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: start;
      align-items: flex-start;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid #dee2e6;
      border-top-left-radius: calc(0.3rem - 1px);
      border-top-right-radius: calc(0.3rem - 1px);
      color:#fff;
    }
    #modal-content .modal-header .heading {
      margin: 0;font-size:13px;padding:0;line-height:32px;
    }
    #modal-content .modal-header .close {
      padding: 1rem 1rem;
      margin: -1rem -1rem -1rem auto;
      float: right;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      text-shadow: 0 1px 0 #fff;
      color:#fff;
      background-color: transparent;
      border: 0;
    }
    #modal-content .modal-body {
      padding: 1rem;
      color: #444;
      position: relative;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
    }
    #modal-content .modal-body #modal-text {font:400 14px/22px 'Quicksand',sans-serif}
    #modal-content .modal-body div.text-center {text-align:center;}
    #modal-content .modal-body div.text-center i {margin-bottom:0.75rem;font-size:48px}
    #modal-content .modal-body div.text-center .fa-check {color:#00c851}
    #modal-content .modal-body div.text-center .fa-error {color:#DB4437}
    #modal-content .modal-body div.text-center .fa-warning {color:#f1c40f}
    #modal-content .modal-body div.text-center .fa-info {color:#4285F4}    
    #modal-content .modal-footer {
      justify-content: center !important;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: end;
      padding: .75rem;
      border-top: 1px solid #dee2e6;
      border-bottom-right-radius: calc(0.3rem - 1px);
      border-bottom-left-radius: calc(0.3rem - 1px);
    }
    #modal-content .modal-footer button {width: 80px;height: 30px;}
    #modal-background.modal-active, #modal-content.modal-active {display: block !important}
  
/* Customize the label (the container) */ .chkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin: 0 12px 12px 20px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */ .chkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */ .checkmark {
  position: absolute;
  top: -4px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */ .chkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */ .chkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;border-radius:3px;
}
/* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */ .chkbox-container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */ .chkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (max-width:350px) {
  
  .info {font-size:13px}
  main .icon {width:35px;height:35px;margin-right:10px;}
  h1 {font-size:1.3rem}
  .info_list li > span:nth-of-type(1) {width:calc(100% - 170px)}
  .info_list li > span:nth-of-type(2) {width:80px;font-size:16px}
  .info_list li > span:nth-of-type(3) {width:75px}
  .info_list li:first-of-type > span:nth-of-type(4) {padding-left:0}
  .col-4 {width:40%;padding:0;margin-left:3px}
  .col-1, .col-3 {width:30%}
  .col-3 {margin-left:3.5px}
  .dateBox {width:calc(100%/6 - 5px)}
  .dateBox:last-of-type {width:calc(100%/3 - 5px)}
  .page3 .col {margin:5px}
  .col .container {padding-right:2px}
  #route_info li label {max-width:112px;font-size:13px;}
  #info_all_routes > div > .lo {width: 30px;}
  .chkbox-container {padding-left: 20px;margin: 0 12px 12px 10px;}
  
  #info_all_routes > div input[type=text] {padding: 6px 0;width: calc(100% - 100px);}
  #info_all_routes > div:nth-of-type(1) {font-size:13px}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(1) {display:none}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(2) {margin-left:34px;}
  #info_all_routes > div:nth-of-type(1) > span:nth-of-type(3) {width:6px;}
}
.graphs-selection-container ul {display:flex;flex-direction:row}
.graphs-selection-container ul li {width:20%;}
.graphs-selection-container ul li {list-style:none;text-align:center;background-color:#ccc;color:#444;height:40px;font:600 14px/40px sans-serif;}
.graphs-selection-container ul li.active {background-color:#fff;color:#4dc247;text-shadow: 0 0 1px hsl(145, 63%, 36%), 1px 1px 0 hsl(145, 63%, 36%);}
.monthly-cost .canvas {width:100%;padding:5px 15px;min-height:250px}
@media (max-width:991px) {
  #page-wrapper {width:100%;padding:0}
  .page {margin:0 5px} 
  .page1 .col {min-height:1px}
  .page5 .col {min-height:1px;background-color:#fff}
  .page2 .large-graph-container {margin-top:0}
  .showLegend {min-height:260px}
  header {margin:0;}
  header .inner-header >.left-col {width:105px}
  header .inner-header >.right-col {width:calc(100% - 115px);padding:0 10px}
  .notification .noti-panel {right:-35px}
  .notification .noti-panel .arrow-up {right:55px}
  h1 {padding:0 10px}
  h1 #fromDateToDate,h1 #numOfDays {display:block;font-size:80%}
  main {width: 100%;    flex-direction: column;}
  main #current_info {width:100%}
  main div.minirow {margin-top:0;}
  .inner-header {width:100%}
  .dateBox {background-color: #ececec;}
  .customTime-container {width:100% !important}
  .period-container {display:block}
  .period-container > * > button {width:40%;height:35px}
  .period-container > * > .small {width:16%;}
  .large-graph-container .inner-container {justify-content: space-between;}
  .inner-container {width:100%}
  .period-container .period-panel {width:100%;}
  .period_button {margin:0}
  .info_list li.table-container, #cP_cost_detail_label, #cP_cost_detail {display:block;width:100%}
  #cP_total_energystyle {width:calc(150px - 33.3%)}
  .graph-title {border-radius: 5px 5px 0 0;}
  .graphs-container-current .canvas, .doughnut-container .canvas {min-height:300px}
  .lgScr {display:none !important}
}
@media (min-width:992px) {
  html {overflow-y:scroll;}
  .smScr {display:none}
  #page-wrapper {padding-left:15px;margin-left:220px;}
  .page {padding-right:15px}  
  h1 {margin:10px auto;}
  main { flex-direction:row; width:100%;margin:0 auto;align-items:flex-start;}
  .slick-initialized .slick-slide {display:flex;}
  .page1, .page3 {flex-direction:column}
  .page2, .page4, .page5 {flex-direction:row;position:relative}
  .page1 .col, .page2 .col {flex-direction:row;align-items:flex-start;min-height:340px}
  .page5 .col, .page2 .col {width:calc(50% - 10px);padding:15px;}
  .page1 .col {margin-top:5px}
  .page2 .col {margin-top:60px}
  .page5 .col {background-color:#fff;color:#444}
  .page2 h1 {position:absolute;top:0;left:calc(50% - 107px)}
  
  /* .page4 canvas {padding:0 10px} */
  .period-container button.viewButton {min-width:135px;margin-right:5px}
  .period-container button.viewButton.active {background-color:rgba(255,255,255,0.2)}
  .period-container button span {display:inline-block}
  .period-container #period_label {width:calc(100% - 440px);text-align:right;padding-right:15px;line-height:30px;font-weight:600;display:inline-block;}
  .period-container .inner-container {max-width:430px;display:inline-block;}
  .period-container .period-panel {top:30px;right:11px;width:423px}
  
  .custom-period button {width:calc(100% - 20px)}
  .viewButton {margin-top:0}
  .customTime-container .customRange {width:calc(100% - 70px)}
  
  .large-graph-container {position:relative;width:100%;}
  .page2 .col .large-graph-container {max-width:750px;margin:15px auto;padding: 0 25px 15px;}
  .graphs-selection-container>div {width:40px;height:40px;font: 18px/40px 'Quicksand';text-align:center;background:#fcfcfe;color:#444;}
  .graphs-selection-container ul li {width:100%;border-bottom:solid 1px #444}
  .chartView {width:40px;line-height:36px;margin:0 4px 0 0;border:none;border-radius:3px;}
  .slick-dotted.slick-slider {margin-bottom:0 !important}
  .col .slick-initialized .slick-slide {flex-direction: column}
  #toggleLegend {display:none}
  #current_info, .doughnut-container, .stat-container, .graphs-container-current {margin:0 30px;width:calc(100%/2);max-height:calc(50vh - 40px)}
  .doughnut-container .canvas:first-of-type {min-height:233px}
  .graphs-container-current .canvas {min-height:275px}
  #current_info .heading {display:block}
  
  .graphs-container-current {display:flex;flex-direction:row;}
  .graphs-container-current .inner-container {width: 100%;height: calc(100% - 42px);}
  .graphs-container-current #current-p-values {width: calc(35% - 10px);margin-left:10px;display:inline-block !important}
  
  .col .container {width:75%}
  .col .container p {padding:5px 0 10px;margin:10px 0;text-align:left;}
  .col .container ol label {font-size:14px;font-weight:400}
  
  ol li.values:first-of-type {padding-bottom: 14px;border-top:0}
  ol li.values > span {width:75px}
  ol li.values > span br {display:none}
  ol li.values > span:nth-of-type(4) {margin-left:6px}
  .page1 ol li.values {padding:7px 15px}
  .page4 ol li.values:first-of-type {padding-bottom:0}
  .page4 ol li.values>span {width:100px}
  .page4 ol li.values>span:nth-of-type(1) {width:calc(100% - 307px)}
  ol li label {width:250px;line-height:26px}
  .installPanel {display:none}
  #cP_cost_detail_label {width:30%;min-width:222px}
  #cP_cost_detail {width:70%;}
  #cP_cost_detail table {border:solid 1px #333;padding:6px}
}