:root {
   --primary: #0B95FF;
 }
@media (prefers-color-scheme: dark) {
/* @media only screen and (max-width: 1400px) {  */
   :root {
      --primary: #0465af;
   }
   html {
      background-color: black;
   }
   body{
      background-color: black;
      color: white;
   }
   /* *{
      color: white !important;
      border-color: #222 !important;
   } */
   *:not(a):not(ol):not(ul):not(li):not(.dashboard-users):not(.dashboard-bldg):not(h1):not(.default_role_text):not(button):not(.tab-heading):not(.switch):not(.info):not(.success):not(.warning):not(.error):not(.validation):not(.confirm):not(.left):not(.right):not(.page_heading):not(.page_subheading):not(.login_user):not(.user_name):not(.role_name):not(b):not(.slider){
      background-color: #000 !important;
      border-color: #222 !important;
      color: white !important;
   }
   header > section.top > .left,
   header > section.top > .right {
      background-color: #222 !important;
   }
   header > section.bottom > .left {
      background-color: #007edf !important;
   }
   .info, .success, .warning, .error, .validation, .confirm {
      opacity: 70%;
   }
   #nav_menu_container ul li ul a{
      color: white !important;
   }
   #nav_menu_container{
      background-color: #222 !important;
   }
   #nav_menu_container ul li ul{
      background-color: #222 !important;
      border: 2px solid #555;
      box-shadow: none;
      /* color: white !important; */
   }
   #nav_menu_container ul li ul li:hover{
      background-color: #444;
      /* color: white !important; */
   }
   .slide-menu-handle {
      box-shadow: 0 0 1px 1px #888;
      opacity: 100%;
      transition: box-shadow .25s ease-in-out;
   }
   .slide-menu-handle:hover {
      box-shadow: 0 0px 10px 1px #FFF;
   }
   .ui-dialog-titlebar.ui-widget-header{
      background: #555 !important;
      border: 1px solid#555 !important;
   }
   .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
      border: none !important;
      background: none;
   }
   button.ui-button.ui-button.ui-dialog-titlebar-close span:nth-child(1) {
      border: 1px solid #555;
   }
   button.ui-button.ui-button.ui-dialog-titlebar-close span:nth-child(2) {
      display: none;
   }
   .ui-dialog.ui-widget {
      box-shadow: none;
   }
   .ui-widget-overlay {
      background: none;
   }
   .ui-widget-content {
      background: none;
   }
   footer{
      background: linear-gradient(#555,#111);
   }
   div.pager, 
   div.mvc-report,
   .popup-menu {
      background-color: #555;
   }
   .toggle-popup-menu {
      color: #31bbff;
   }
   .switchlayer {
      background-color: #555;
   }
   input[type="checkbox"]:checked ~ .switchlayer {
      background-color: #004564;
   }
   text {
      fill: white !important;
   }
   ul.token-input-list {
      background-color: black;
   }
   /*Will not work due to iframe embed*/
   /* .g-recaptcha .rc-anchor{
      background: #222 !important;
      color: #fff !important;
      border: 1px solid #525252 !important;
   } */
   path.gauge {
      fill : #555555;
   }
   .meter-menu.top {
      background-image: 
         linear-gradient(to right, #000, #000),
         linear-gradient(to right, #000, #000),
         linear-gradient(to right, rgb(191, 191, 191), rgba(255, 255, 255, 0)),
         linear-gradient(to right, rgba(255, 255, 255, 0), rgb(191, 191, 191))
         !important;
   }
   a.button.bldg.selected, a.button.meter.selected {
      background-color: rgb(89, 182, 255) !important;
      border-color: rgb(89, 182, 255)  !important;
   }
}
body {
   font-size:9pt;
}
.page-pre-loader {
   background: url(watereye-waterutility.svg) center no-repeat #fff;
   background-size: 200px;
}
table.mvc-report th, table.mvc-report td {
   padding: 5px;   
   padding-right: 15px;
}
.login_container {
   padding:0;
   font-size:12pt;
}
.login_container h1 {
   font-style: normal;
   color: #0b95ff;
}
.login_container .instructions,
#register_form_container, 
#register_request_form_container, 
#password_reset_form_container, 
#user_activate_form_container {
   width:420px;
   text-align:center;
}
.login_banner {
   /* background-image: url('watereye-faircape-H260px.svg'); */
   background-image: url('watereye-waterutility-H260px.svg');
   height: 260px;
   background-size: contain;
   width:auto;
}
.login_user .role_name .org {
   display:none;
}
#login_select_user_role .info {
   background-color: #ebf5ff;
   border-radius: 0;
   border: 0;
   color: #007edf;
}
#login_form button {
   /* background: #0b95ff; */
   background: var(--primary);
   border: 0;
   border-radius: 5px;
   color: #fff;
   cursor: pointer;
   padding: 7px 25px;
   text-align: center;
   text-transform: uppercase;
   margin: 0px;
   margin-top: 30px;
   vertical-align: baseline;
   width: 100%;
}
#login_form table.tabular-form > tbody > tr > td:first-child {
   padding:0
}
.app_body .ui-dialog .ui-dialog-titlebar {
   background: white;
   border: none;
}
.app_body .ui-dialog .ui-button.ui-dialog-titlebar-close {
   /* display: none; */
   background-color: #f6f6f6;
}
.app_body .ui-dialog .ui-dialog-buttonpane {
   border: none;
   margin: 0px;
   padding: 0px;
}
.app_body .ui-dialog .ui-dialog-buttonset {
   text-align: center;
   float: none;
}
.app_body .ui-dialog .ui-button {
   /* background: #0b95ff; */
   background: var(--primary);
   border-radius: 5px;
   color: white;
}
.app_body .ui-dialog .confirm {
   background-color: #ebf5ff;
   border-radius: 0;
   border: 0;
   color: #2F53D3;
   margin: 0px;
}
.app_body .login.biometrics {
   /* font-size: 0px; */
   background-image: url('biometrics.svg') !important;
   background-repeat: no-repeat !important;
   background-position: 10px center !important;
   height: 35px !important;
   text-align: center !important;
   padding-right: 0px !important;
   padding-left: 55px !important;
   background-size: 45px auto !important;
}
header.nosession .banner {   
   background-image: url('watereye-waterutility.svg');
   height: 280px;
   background-size: auto;
}
button.calltoaction {
   /* background: #0b95ff; */
   background: var(--primary);
   border:none;
}
button.login {
   font-size: 14pt;
   box-shadow: none;
}
header > section.top > .left {       
   background-image: url('watereye-waterutility-text-straddled.svg');
   background-color:white;
   background-size: auto;
}
header > section.top > .right {
   background-color: #d9d9d9;
}
header > section.bottom > .left {    
   /* background-color: #0b95ff; */
   background-color: var(--primary);
}
header > section.bottom > .right {    
   background-color: #007edf;
}
#nav_menu_meter_index  {
   background-image: url('navbar_meter.svg');
}
#nav_menu_report_type_index  {
   background-image: url('navbar_reports.svg');
}
#nav_menu_admin  {
   background-image: url('navbar_admin.svg');
}
#nav_menu_account  {
   background-image: url('navbar_account.svg');
}
#nav_menu_help  {
background-image: url('navbar_help.svg');
}
#nav_menu_dashboard_admin,
#nav_menu_dashboard_bldg_admin,
#nav_menu_dashboard_consumer {
   background-image: url('navbar_home.svg');
}
#nav_menu > li {
   background-size: 30px;
}
a,
span.link {
   /* color: #0b95ff; */
   color: var(--primary);
   text-decoration: none;
}
a:hover,
span.link {
   color: #007edf;
   cursor: pointer;
}
.info {
   border-radius: 5px;
}
form.data_input, .form_container {
   background-color:white;
}
div.pager.top {
   margin-top: 10px;
}
#page_menu {
   margin:auto;
   text-align: left;
   padding: 5px;
   border-radius: 7px;
}
#page_menu ul.menu_list > li {
   padding-right: 5px;
}
#page_menu #download_excel a {
   background-image: url('export_excel.svg');
}
#page_menu #download_csv a {
   background-image: url('export_csv.svg');
}
#page_menu #download_pdf a {
   background-image: url('export_pdf.svg');
}
#page_menu .add_entity a {
   background-image: url('page_menu-add_entity.svg');
}
#page_menu ul.menu_list #toggle_search_form {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   display:inline-block;
   width:36px;
   height: 36px;
   font-size: 0;
   vertical-align: middle;
   background-image: url('page_menu-search.svg');
   margin: auto;
}
button, .button, a.button, span.button {
   /* background-color: #0b95ff; */
   background-color: var(--primary);
   /* border: 2px solid #0b95ff; */
   border: 2px solid var(--primary);
}
table.mvc-report.meter_reading > tbody > tr.estimate > td {
   color: #c9c9c9;
} 
.meter_dashboard_container {
   width:460px;
   min-height:400px;
   margin: auto;
}
.meter_dashboard_container .meter_consumption_details {
   margin-top:10px;
   border-top:2px solid #CCC;
   border-bottom:2px solid #CCC;
   padding:10px;
}
.meter_dashboard_container .meter_consumption_details tr > td:first-child {
   font-weight: bold;
}
.meter_dashboard_container .meter_consumption_details tr > td {
   padding:3px;
   font-size:9pt;
}
.meter_dashboard_container .meter_alarm {
   background-color: #ffe6d0;
   color: #B76D2B;
   padding: 5px;
   text-align: center;
}
.meter_dashboard_container .meter_alarm .alarm_type {
   font-weight: bold;
   font-size: 14pt;
}
.meter_dashboard_container .meter_alarm .alarm_history {
}
.slide-menu-content ul > li.meter_alarm {
   background-color: #ffe6d0;
}
.slide-menu-content ul > li.meter_alarm > a {
   color: #B76D2B;
}

/* List of meters rendered in meter/dashboard */
div.meter-menu {
   _width:300px;
   _min-height:50px;
   margin: auto;
   overflow: auto;
   white-space: nowrap;
}
.meter-menu.top {
   height: auto;
   /* overflow: auto; */
   _display: flex;
   /* flex-wrap: wrap; */
   text-align: center;
   align-content: center;
   /* justify-content: center; */
   background-image: 
      linear-gradient(to right, white, white), 
      linear-gradient(to right, white, white), 
      linear-gradient(to right, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0)), 
      linear-gradient(to left, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0));
   /* Shadows */
   /* Shadow covers */
   background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
   background-color: white;
   background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;
   background-attachment: local, local, scroll, scroll;
   
}
a.button.bldg {
   font-size: 8pt;
   padding: 0.2rem 1rem;
   background-image: url('button-bldg.svg');
   background-repeat: no-repeat;
   background-position: 0 center;
   background-size: 20px;
   padding-left: 26px;
}
a.button.meter {
   font-size: 8pt;
   padding: 0.2rem 1rem;
}
a.button.bldg.selected,
a.button.meter.selected {
   background-color: rgb(14, 107, 179);
   border-color: rgb(14, 107, 179);
   color: white !important;
}
a.button.meter_alarm {
   background-color: #ffe6d0;
   color: #B76D2B !important;
}

.link.meter_dashboard,
.link.meter_readings,
.link.bldg_dashboard {
   display: inline-block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   background-image: url('graphs.svg');
   height:30px;
   width: 30px;
   vertical-align: middle;
   margin-right: 5px;
}
.link.meter_dashboard,
.link.bldg_dashboard {
   background-image: url('graphs.svg');
}
.link.meter_readings {
   background-image: url('meter_readings.svg');
}
table.mvc-report.meter .link.meter_dashboard {
   height:20px;
   width: 20px;
}
.flex-parent {
   display: flex !important;
   flex-wrap: wrap;
   justify-content: center;
}
.flex-box {
   flex: 0 1 170px; /*  No stretching: */
   margin: 5px;
 }
div.dashboard {
   /* list-style-type: none; */
   padding: 0;
   margin:auto;
   display:block;
   margin-top: 25px;
   background-color:transparent;
}
div.dashboard li {
    display: inline-block;
}
div.dashboard > div {
   display: inline-block;
   _background-repeat: no-repeat;
   _background-position: center 0;
   _padding-top: 66px;
   _width: 120px;
   _text-align: center;
   margin: 5px;
   _font-size:12pt;
   _white-space: nowrap;
   /* background-color: #0b95ff; */
   background-color: var(--primary);
   border-radius: 10px;
   width:170px;
   margin-bottom: 30px;
   margin-right: 30px;
}
div.dashboard > div > h1 {
   color: white;
   margin: 0;
   margin-left: 10px;
   margin-bottom: 7px;
   margin-top: 5px;
   border-bottom: 1px solid white;
   margin-right: 10px;
   font-size: 10pt;
   height: 38px;
}
div.dashboard > div.dashboard-bldg {
    _background-image: url('dashboard-bldg.svg');
}
div.dashboard > div::after {
   content: "";
   background-repeat: no-repeat;
   background-position: center 0;
   background-size: contain;
   display: block;
   height: 64px;
   width: 64px;
   position: relative;
   right: -110px;
   top: 20px;
   border: 4px solid white;
   border-radius: 64px;
   margin-top: -30px;
}
div.dashboard > div.dashboard-bldg::after { 
   background-image: url('dashboard-bldg.svg');
}
div.dashboard > div.dashboard-add_user {
    background-image: url('dashboard-add_user.svg');
}
div.dashboard > div.dashboard-users::after {
    background-image: url('dashboard-users.svg');
}
div.dashboard > div > ul {
   padding-left:10px;
}
div.dashboard > div > ul > li {
   display: inline-block;
   height:30px;
   width:30px;
   background-repeat: no-repeat;
   background-position: center 0;
   background-size: contain;
   cursor:pointer;
   margin-right:5px;
}
div.dashboard > div > ul > li a {
   display: inline-block;
   height:30px;
   width:30px;
}
div.dashboard > div > ul > li.bldg_meters {
    background-image: url('dashboard-meters.svg'); 
}
div.dashboard > div > ul > li.users-search {
   background-image: url('dashboard-search.svg');
}
div.dashboard > div > ul > li.bldg_dashboard {
   background-image: url('dashboard-graphs.svg');
}
div.dashboard > div > ul > li.users-add {
   background-image: url('dashboard-add.svg');
}
div.dashboard > div > ul > li.bldg_common_area_consumption {
   background-image: url('dashboard-common_area_consumption.svg'); 
}
.ui-autocomplete {    
    height: 100px;    
    overflow: auto;
}
.ui-dialog.ui-widget {
    border-radius:0;
}
.ui-dialog-titlebar {
   border-radius:0;
}
#graph-tabs .tab-pane {
   padding-top: 0;
   padding-bottom: 0;
}
table.tabular-form tr.section, div.tabular-form {
   font-weight: bold;
   color: #007edf;
}
.slide-menu-handle.meters {
   background-image: url('meter.svg');
}
.slide-menu-content h1 {
   /* color: #0b95ff; */
   color: var(--primary);
   background-color: transparent;
   _border-bottom: 2px solid;
   padding-left: 5px;
}
.slide-menu-content ul {
   list-style-type: none;
   padding: 0;
   margin:auto;
   display:block;
   margin: 10px 5px 0px 5px;
   min-width: 228px;
}
.slide-menu-content ul > li {
   background-color: rgba(11,149,255,0.7);
   _opacity: 70%;
   border-radius: 5px;
   margin-bottom: 5px;
}
.slide-menu-content ul > li.selected {
   background-color: rgb(0, 126, 223);
}
.slide-menu-content ul > li:hover {
   opacity:50%;
}
.slide-menu-content ul > li > a{
   color: white;
   display: block;
   padding: 5px;
}
.meter_gauge_container {
   text-align: center;
   margin-top: 15px;
   margin-bottom: 10px;
}
.meter_gauge {
   height: 100px;
   max-width: 200px;
   display: inline-block;
   /* display: table-cell; */
}
.tab-heading {
   width: 100%;
   display: block;
   text-align: center;
   font-size: 15px;
   /* background: #0B95FF; */
   background: var(--primary);
   color: white;
   border-radius: 5px;
   line-height: 30px;
   margin-bottom: 10px;
}
.graph-tabs-container{
   margin-top: 15px;
   width: 100%;
   text-align: center;
   _max-height: 315px;
}
.slick-tabs {
   width: 95%;
}
.slick-prev,
.slick-next,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   background-color: transparent;
}
.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
   background-image: url('carousel-left-shift.svg');
}
.slick-next,
.slick-next:hover,
.slick-next:focus {
   background-image: url('carousel-right-shift.svg');
}
.slick-next::before,
.slick-prev::before {
   content: '';
}

/*
 * jquery token input
 */
ul.token-input-list {
   width:auto;
   width: 100%;
   display: inline-block;
   border: 1px solid #C8C8C8;
   padding: 4px;
}
li.token-input-token {
   background-color: #3daee9;
   color: white;
   font: inherit;
   font-weight:normal;   
}
li.token-input-token span {
   color: white;
   font-size:10pt;
}
div.token-input-dropdown {
   font-family: initial;   
}

/************************************
 * BREAKPOINT 480px
 ************************************/
@media only screen and (max-width: 860px) {  

   /* .login_banner {
      height:150px;
   } */ 
   header > section.bottom > .left .page_heading {
      font-size: 15px;
      padding: 0 5px 0 15px;
   }
   .tabular-form {
      font-size: 15px;
      line-height: 20px;
   }
   .data_input .tabular-form {
      margin-top: 5px;
      width: 100%;
      border-collapse:inherit; 
      border-spacing:.5em;
   }
   .data_input td {   
      display: table-row;
      white-space: normal !important;
   }
   .data_input td:first-child {
      padding-left:0;
      padding-right:0;
    }
   .data_input .form_field_label {
      font-size: 12pt;
      line-height: 20px;
   }
   .data_input select {
      font-size: 12pt;
      border: 1px solid #C7C8CA;
      padding: .2rem .5rem .2rem .5rem;
      border-radius: 4px;
      background-color: #F8F8F8;
      font-family: 'Open Sans', sans-serif;
   }
   .data_input input {
      border: 0;
      background: transparent;
      _color: white;
      padding: 5px;
      font-size: 12pt;
      border-bottom: 1px solid lightgray;
   }
   .login_banner {
      height:185px;
   } 
   /* .form_field_label {
      display: none;
   } */
   .login_container {
      max-width: 300px;
      width: 70%;
   }
   #login_form {
      margin-top: 40px;
   }
   #login_form input {
      border: 0;
      background: transparent;
      _color: white;
      padding: 5px;
      font-size: 14pt;
      border-bottom: 1px solid lightgray;
   }
   #login_form table.tabular-form td, div.tabular-form td.form_field_input {
      padding-bottom: 20px;
   }
   table.tabular-form > tbody > tr > td.form_field_label {
      font-size: 12pt;
   }
   header > section.top > .right{
      background-color:white ;
   }
   .meter_dashboard_container {
      width: 100%;
   }
   .graph-tabs-container {
      width: 100%;
      text-align: center;
      max-height: 300px;
   }
   .slick-tabs {
      max-width: 450px;
   }
   .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
      padding: .4em;
      font-size:9pt;
   }

   .login_container .instructions,
   #register_form_container, 
   #register_request_form_container, 
   #password_reset_form_container, 
   #user_activate_form_container {
      width:auto;
      min-width:auto;
   }

   #page_menu {
      width:auto;
      text-align:center;
      box-shadow: none;
      background: none;
   }

}
@media only screen and (max-width: 470px) {  
   header > section.top > .left {
      background-size: contain;
      width: 150px;
   }
   .slick-tabs {
      width: 95%;
   }
   .graph-tabs-container {
      width: 100%;
      text-align: center;
   }
   div.dashboard > div > h1 {
      font-size: 8pt;
   }
   div.dashboard > div::after {
      height: 40px;
      width: 40px;
      right: -100px;
      top: 20px;
      border: 2px solid white;
   }
   .flex-box {
      flex: 0 1 120px;
   }
   #nav_menu > li {
      background-size: 25px;
   }
}
@media only screen and (max-width: 404px) {  
   .graph-tabs-container {
      max-height: 315px;
   }
   .meter_gauge {
      width: 175px;
   }
}