@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

::-webkit-calendar-picker-indicator{ display: none; }
::-webkit-scrollbar{ width: 10px}
::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 8px #2b3455; box-shadow: inset 0 0 8px #2b3455; -moz-box-shadow: inset 0 0 8px #2b3455; border-radius:10px;}
::-webkit-scrollbar-thumb{ border-radius:10px; -webkit-box-shadow: inset 0 0 8px #2b2d5b; box-shadow: inset 0 0 8px #2b2d5b; -moz-box-shadow: inset 0 0 8px #2b2d5b;}

.table-enolgas-scroller{ overflow: auto;}
.table-enolgas-scroller::-webkit-scrollbar{ width: 8px}
.table-enolgas-scroller::-webkit-scrollbar-track{ -webkit-box-shadow:inset 0 0 10px #262e48; box-shadow:inset 0 0 10px #262e48; -moz-box-shadow:inset 0 0 10px #262e48; border-radius:10px;}
.table-enolgas-scroller::-webkit-scrollbar-thumb{ border-radius:10px; -webkit-box-shadow:inset 0 0 36px #9094b6; box-shadow:inset 0 0 36px #9094b6; -moz-box-shadow:inset 0 0 36px #9094b6;}
.bluebox-table-wrapper{ height: 300px;}

body{ color: #1b1b1b; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 500; position: static; height: 100%; width: 100%; background-color: #fff }
input[type="date"]::-webkit-calendar-picker-indicator{ appearance: none;}
input:focus{ outline: none;}
p{ margin: 0; line-height: 25px; font-size: 1.143em;}
p + p{ margin-top: 15px;}
img { max-width: 100%; }
ul, li { margin: 0; padding: 0; list-style: none; }
a, a:hover,a:focus, button, button:hover, button:focus{ transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; text-decoration: none; outline: none; color: inherit;}
/*a, a:hover,a:focus{ color: #10d3c5;}*/
h1, h2, h3, h4, h5, h6{ font-weight: 700;}
h1{ font-size: 2em;}
.table-wrap { display: table; table-layout: fixed; width: 100%; }
.table-wrap aside{ display: table-cell; vertical-align: middle; float: none; }
input::placeholder{ overflow: visible;}
::placeholder{ opacity: 1;}
.btn, .btn:active, .btn:focus, .btn:hover{ opacity: 1; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
button:focus{ outline: none;}
.dropdown button.dropdown-toggle:after{ display: none;}
.blue-bg-with-radius{ background: #2b3455; border-radius: 10px; color: #fff;}
.white-bg-box{ background: #fff; color: #2b3455; border: 1px solid #bac2ce;}
.no-padding{ padding: 0 !important;}
.med-width-sec{ max-width: 1050px;}
.small-width-sec{ max-width: 800px;}
em.required{ color: #f23e49;}
table{ -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar;}
.green-txt{ color: #10d3c5;}
.alarm, .red-txt{ color: #f23e49;}

.email-txt{ word-break: break-all;}
.small-heading{ font-size: 1.143em;}
.switch { position: relative; display: inline-block; width: 43px; height: 17px;}
.switch input{ opacity: 0; width: 0; height: 0;}
.switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f23e49; -webkit-transition: .4s;
  transition: .4s; border-radius: 34px;}
.switch-slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 0; bottom: 0; background-color: white;
  -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
.home-status-off i{ color: #f23e49;}
.home-status-on i{ color: #10d3c5;}
input:checked + .switch-slider { background-color: #10d3c5;}
input:focus + .switch-slider { box-shadow: 0 0 1px #10d3c5;}
.off input:checked + .switch-slider { background-color: #f23e49;}
.off input:focus + .switch-slider { box-shadow: 0 0 1px #f23e49;}

input:checked + .switch-slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}

input[type=range] { -webkit-appearance: none; margin: 10px 0; width: 100%;}
input[type=range]:focus { outline: none;}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12.8px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #262e48;  border-radius: 25px; border: 0px solid #000101;}
input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; width: 25px;
  height: 25px; border-radius: 50%; background: #97aabc; background: -moz-linear-gradient(top,  #97aabc 0%, #a5b8ca 51%, #90a3b5 100%); background: -webkit-linear-gradient(top,  #97aabc 0%,#a5b8ca 51%,#90a3b5 100%); background: linear-gradient(to bottom,  #97aabc 0%,#a5b8ca 51%,#90a3b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97aabc', endColorstr='#90a3b5',GradientType=0 );
  cursor: pointer; -webkit-appearance: none; margin-top: -6px;}
input[type=range]:focus::-webkit-slider-runnable-track { background: #262e48;}
input[type=range]::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #262e48; border-radius: 25px; border: 0px solid #000101;}
input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px;
  background: #65001c; cursor: pointer;}
input[type=range]::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0;
  color: transparent;}
input[type=range]::-ms-fill-lower{ background: #262e48; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;}
input[type=range]::-ms-fill-upper{ background: #262e48; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;}
input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer;}
input[type=range]:focus::-ms-fill-lower{ background: #262e48;}
input[type=range]:focus::-ms-fill-upper{ background: #262e48;}

.enolgas-def-form label{ display: block; margin: 0 0 5px;}
.enolgas-def-form input[type="text"]:focus,
.enolgas-def-form input[type="email"]:focus,
.enolgas-def-form input[type="password"]:focus,
.enolgas-def-form textarea:focus,
.enolgas-def-form select:focus,
.enolgas-def-form input:focus:invalid:focus,
.enolgas-def-form textarea:focus:invalid:focus,
.enolgas-def-form select:focus:invalid:focus{
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; outline: none;
}
.enolgas-def-form input[type="text"],
.enolgas-def-form input[type="email"],
.enolgas-def-form input[type="password"],
.enolgas-def-form input[type="number"],
.enolgas-def-form input[type="date"],
.enolgas-def-form textarea,
.enolgas-def-form select{ border: none !important; height: 51px; border-radius: 5px; margin: 0; padding: 0 10px; color: #000; font-size: 1.286em; width: 100%; max-width: 100%; display: block; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
.enolgas-def-form .input{ width: 100%; margin: 0 0 13px;}
.enolgas-def-form select, .eng-select{ background: #fff url(../img/arrow-down-icon.png) no-repeat right 12px center !important; appearance: none; -webkit-appearance: none;
    -moz-appearance: none;  cursor: pointer; padding-right: 25px;}
.enolgas-def-form textarea{ height: 85px; padding-top: 10px;}
.enolgas-def-form select:invalid,
.enolgas-def-form select option:first-child{ color: #888;}
.enolgas-def-form select:invalid option:not(:first-child){color: #000;}

.message{ text-align: center; cursor: pointer; font-size: 1.2em; display: block; font-weight: normal; padding: 0 15px; height: 40px; line-height: 40px; transition: height 300ms ease-out 0s; color: #fff;}
.message.error{ background: #f23e49;}
.message.error:before{ content: "\f057"; font-family: "Font Awesome 5 Pro"; margin: 0 10px 0 0;}
.message.hidden{ height: 0;}
.message.success{ background: #2b3455;}

.navbar-left{ position: fixed; left: 0; top: 0 !important; width: 305px; height: auto; bottom: 0; z-index: 2; background-color: #2b2d5b; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; margin: 0}
.content-container{ padding-left: 305px; margin-top: 0; min-height: 100vh; /* height: calc(100% - 60px); height: 100%; */  width: 100%;  transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; background: #edf1f7; }
.navbar-left .logo-sec{ padding: 40px 53px;}
.left-side-nav ul li{}
.left-side-nav ul li a span{ font-size: 1.1em; padding: 13px 30px 13px 54px; color: #b8bce1; position: relative; display: block;}
.left-side-nav ul ul{ padding: 10px 0;}
.left-side-nav ul ul li a{ color: #fff; padding: 9px 25px; text-align: left;  display: block;}
.left-side-nav ul li.has-sub > a span:after{ content: "\f105"; font-family: "Font Awesome 5 pro"; position: absolute; right: 16px; }
.left-side-nav ul li a i{ position: absolute; top: 19px; left: 14px;}
.left-side-nav ul li.active a,
.left-side-nav ul li a span:hover,
.left-side-nav ul li.has-sub:hover a span{ background: #1b1d3d; color: #fff;}
.left-side-nav ul ul li a:hover{ background: #2b2d5b;}
.left-side-nav ul li.active a:after{ display: none;}
.left-side-nav ul ul li a span { padding: 0; background: none !important;}

.top-bar{ margin: 0; align-items: center; background: #fff; padding: 0 30px;}
.top-bar .top-bar-left{ padding: 24px 0 0; display: flex;}
.top-bar-left ul{ display: flex;}
.top-bar-left .floor-list ul li{ padding: 0 20px;}
.top-bar-left .floor-list ul li a{ font-size: 1.1em; color: #888888; font-weight: normal; padding: 10px 0 28px; border-bottom: 4px solid transparent; display: inline-block; position: relative;}
.top-bar-left .floor-list ul li a.active, .top-bar-left .floor-list ul li:hover a{ color: #10d3c5; border-bottom: 4px solid #10d3c5;}
.top-bar-left .floor-list ul li a.active{ font-weight: 700;}
.top-bar-left .floor-list ul li a i.fa-exclamation-triangle{ position: absolute; color: #f23e49; top: -10px; right: 0; font-weight: 700;}
.top-bar-left .floor-list ul li a i.fa-exclamation-triangle.warning{ color: #ffff00; }
.top-bar .top-bar-right{ text-align: right; padding-top: 28px; padding-bottom: 28px;}
.top-bar-right .top-bar-links{ display: inline-block; border-right: 1px solid #ccc; padding-right: 15px; vertical-align: top;}
.top-bar-links ul li{ display: inline-block; vertical-align: middle;}
.top-bar-links a{ font-size: 1.1em; padding: 0 0 0 20px; position: relative;}
.top-bar-right a em{ background: #f23e49; color: #fff; text-align: center; width: 15px; height: 15px; border-radius: 50%; display: block;
    font-size: 0.571em; font-style: normal; position: absolute; top: -5px; right: -5px;}
.top-bar-links .dropdown-toggle:after{ display: none;}
ul.notifications{ min-width: 200px; padding: 10px;}
.top-bar-dropdown{ display: inline-block;}
.top-bar-dropdown ul.dropdown-menu{ min-width: 180px; left: auto !important; right: 0;}
.top-bar-dropdown button.dropdown-toggle{ background: none; border: none; font-size: 1.286em; padding: 0; margin: 0 0 0 6px; font-weight: 600;}
.top-bar-dropdown button.dropdown-toggle:focus,
.top-bar-dropdown button.dropdown-toggle:active{ border: none !important; background: none !important; box-shadow: none !important;}

.property-address{ padding: 13px 0 8px; background: #c9d1dd; text-align: center; font-size: 1.286em;}
.property-address p span{ padding: 0 24px;}
.property-address .dropdown{ display: inline-block;}
.property-address .dropdown-menu{ min-width: 294px; margin-left: -269px;}
.dropdown button{ border: none; background: none;}
.dropdown button i.fas.fa-caret-square-down{ color: #2b3455;}
.dropdown ul li a{ padding: 4px 15px; font-size: 1em; display: block;}
.dropdown ul li + li a{ border-top: 1px solid #c9d1dd;}
.dropdown ul li.active a, .dropdown ul li a:hover{ color: #fff; background: #10d3c5;}
.dropdown ul li a i{ margin-right: 4px;}
.dropdown-with-arrows ul li a{ position: relative; color: #1b1b1b; padding: 4px 26px 4px 15px;}
.dropdown-with-arrows ul li a:before{ content: "\f105"; font-family: "Font Awesome 5 pro"; position: absolute; right: 13px;}
.floor-drop-down button{ padding-top: 10px; font-size: 1.286em;}
.floor-drop-down ul.dropdown-menu { display: none;}
.floor-drop-down ul.dropdown-menu.show{ display: block;}
.floor-drop-down ul.dropdown-menu li{ padding: 0;}
.floor-drop-down ul.dropdown-menu li{ border-bottom: none;}
.floor-drop-down li.dropdown a, .floor-drop-down li.dropdown:hover a{ border-bottom: none; color: #1b1b1b; font-weight: normal;}
.floor-drop-down ul.dropdown-menu li:hover a{ border-bottom: none; color: #fff; font-weight: normal;}
.main-body{ padding: 36px 30px 28px; min-height: calc( 100vh - 141px );}
.enolgas-accordion .card-header button{ background: none; border: none; position: absolute; right: 22px; font-size: 1.714em; padding: 0 10px; margin-top: 2px;}
.enolgas-accordion .card-header button[aria-expanded="true"]{ transform: rotate(180deg);}
.enolgas-accordion .card-header .row{ padding-right: 50px; align-items: center;}
.card-header .card-header-right{ text-align: right;}
.card-header-left{ font-size: 1.714em; font-weight: 700;}
.enolgas-accordion .card-header{ background: #fff; border: none;}
.enolgas-accordion .card{ margin: 13px 0 0; border-radius: 6px !important; border: 1px solid #d7dbe1;}
.enolgas-accordion .card .card-body{ padding: 0 10px;}
.enolgas-accordion .card .card-body .card-body-in{ border-top: 1px solid #d7dbe1;}
.inline-radio span{ margin: 0 0 0 10px;}
.inline-radio span input[type="radio"]{ position: relative; top: 2px; margin: 0;}
.inline-radio span label{ margin: 0; padding: 0 0 0 7px}
.water-pressure-sec{ padding: 0 0 26px;}
.water-pressure-sec aside{ padding: 0;}
/*.water-pressure-sec aside + aside{ border-left: 1px solid #8b90b7;}*/
.water-pressure-sec aside + aside:before { background: #8b90b7; content: ""; width: 1px; height: 96%; position: absolute; top: 20px; z-index: 2; left: 0;}
.gauge-heading{ font-size: 1.143em; color: #fff; font-weight: 700; text-align: center; display: block; position: relative; margin-top: -51px;}
.gauge-heading i{ display: block; color: #f23e49; font-size: 2.143em; margin: 0 0 5px;}
.cold .gauge-heading i{ color: #6bdbff;}
.unit-accordion .card-body h2{ color: #333; margin-top: 18px;}

.status-box{ padding: 11px 0; margin: 0; align-items: center; position: relative;}
.status-box .row{ margin: 0; height: 120px; align-items: center;}
.status-box .status-box-left{ justify-content: center;}
.status-box .status-box-left,
.status-box .status-box-right{ position: static; height: 100%; display: flex; align-items: center;}
.status-box .status-box-left{ text-align: center; border-right: 1px solid #b8bce1;}
.status-box-left i{ font-size: 5.143em;}
.status-box .switch{ position: absolute; right: 17px; top: 18px;}
.status-box span.text{ font-size: 1.143em; color: #b8bce1; display: block}

.status-box span.text em{ display: block; font-style: normal; font-size: 2.24em; line-height: 1.3em; font-weight: 700; color: #fff; }
.status-box-main aside{ padding: 0;}
.status-box-main .system-status{ padding-left: 12px;}
.valve-txt{ background: url(../img/on-valve-img.png) no-repeat 0 0; width: 113px; height: 59px; font-size: 1.286em; font-weight: 700; color: #fff; line-height: 59px; text-transform: uppercase; text-align: center;}
.valve-off .valve-txt{ background: url(../img/off-valve-img.png) no-repeat 0 0; width: 59px; height: 113px; line-height: 113px; margin: auto;}
.valve-on, .status-active .valve-off{ display: none;}
.status-active .valve-on{ display: flex;}
.status-active .home-status-off, .home-status-on{ display: none;}
.status-active .home-status-on{ display: flex;}

.status-icon{ font-size: 2em; position: absolute; right: 20px; top: 14px; line-height: 1em;}
.system-status-danger{ color: #f23e49;}
.system-status .blue-bg-with-radius{ position: relative; text-align: center; padding: 20px 20px 18px;}
.system-status-water{ font-size: 5.143em; color: #f23e49; border-bottom: 1px solid #b8bce1; padding: 0 0 15px;}
.more-info{ text-align: right;}
.more-info button{ color: #b8bce1; text-decoration: underline; background: none; border: none;}
.more-info button:hover{ color: #10d3c5;}
.system-status .blue-bg-with-radius{ min-height: 334px;}
.system-status span.text{ color: #b8bce1; font-size: 1.143em; padding: 23px 0 43px; display: block;}
.system-status span.text em{ color: #fff; font-size: 2.571em; font-style: normal; display: block; font-weight: 700;}
.leak-active .leak-detected{ display: block;}
.leak-active .no-leak-detected, .leak-detected{ display: none;}
.no-leak-detected .system-status-water,
.no-leak-detected .status-icon{ color: #10d3c5;}
.leak-detected .system-status-water,
.leak-detected .status-icon{color: #fff;}

.dashboard-mid-right .blue-bg-with-radius{ padding: 0 0 0 70px;}
.graph-count-main{ align-items: center; padding: 29px 0 0; width: 680px;}
.graph-count-main .count-number{ font-size: 2.571em; font-weight: 700; text-align: center; white-space: nowrap; margin-right: 5px;}
.graph-count-main p{ color: #b8bce1; margin: 0 0 8px;}
.graph-count{ background-image: url(../img/graph-count-bar-blue.png); background-repeat: no-repeat; background-position: 0 0; height: 32px; position: relative;}
.count-purple{ background-image: url(../img/graph-count-bar-purple.png);}
.count-sea-blue{ background-image: url(../img/graph-count-bar-sea-blue.png);}
.count-light-sea-blue{ background-image: url(../img/graph-count-bar-light-sea-blue.png);}
/*.count-44{ width: 22%;}
.count-120{ width: 60%;}
.count-50{ width: 25%;}
.count-180{ width: 90%;}*/
.count-items{ background-repeat: no-repeat; background-position: 0 0; height: 32px; position: absolute; font-size: 0;}
.count-graph{ -ms-flex: 0 0 536px; flex: 0 0 536px; max-width: 536px;}
.graph-count-wrapper{ width: 680px; overflow: auto; max-width: 100%;}
.graph-count-wrapper::-webkit-scrollbar{ width: 2px; height: 14px;}
.graph-count-wrapper::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 10px 10px 50px #fefefe; -webkit-box-shadow: inset 10px 10px 50px #fefefe; -moz-box-shadow: inset 10px 10px 50px #fefefe; border: 3px solid #ccc;}
.graph-count-wrapper::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0px 10px 80px #cccccc; -webkit-box-shadow: inset 0px 10px 80px #cccccc; -moz-box-shadow: inset 0px 10px 80px #cccccc; border-radius: 10px;}

.dashboard-leads .status-box{ padding: 14px 0; margin: 17px 0 0;}
.dashboard-leads .status-box span.text em{ font-size: 1.614em;}
.status-box.active .status-icon, .status-box.active .chrg-percentage i{ color: #10d3c5;}
.status-box.danger .status-icon, .status-box.danger .chrg-percentage i{ color: #f23e49;}
.status-box.warning .status-icon, .status-box.warning .chrg-percentage i{ color: #eee32f;}
.dashboard-leads aside{ padding: 0 6px;}
.graph-prices{ padding-top: 0;}
.graph-prices ul{display: flex; max-width: 120%; width: 110%;}
.graph-prices ul li{width: 9.09%;color: #b8bce1;font-size: 0.714em; border-top: 1px solid #B8BCE1;}
.graph-prices ul li:last-child{ border-top: none;}
.graph-prices ul li:before{width: 1px;height: 5px;background: #b8bce1;display: block;content: "";}
.dashboard-leads{ margin: 0 -6px; padding: 0 0 15px;}
.dashboard-leads .status-box .status-box-left{ min-height: 103px; align-items: center; flex-direction: inherit; justify-content: center;}
.dashboard-leads .status-box .status-box-left,
.dashboard-leads .status-box .status-box-right{ padding-top: 0; padding-bottom: 0; display: flex;}
.dashboard-leads .status-box .status-box-right{ flex-direction: column; align-items: flex-start;}
.dashboard-top-right,
.dashboard-mid-right{ padding-left: 0;}
.unit-accordion .card-body-in{ padding-right: 10px;}
.blue-chart{ background: #2b3455; border-radius: 10px; padding-top: 20px;}
.blue-chart span.y-axis-text{ position: absolute; color: #6bdbff; font-size: 12px; font-weight: 700; transform: rotate(270deg); top: 50%; left: 0;}
.blue-chart span.y-axis-pressure-text{ left: -20px;}
.apexcharts-toolbar{ display: none !important;}
.heading-with-right-text{ display: flex; align-items: center;}
.heading-with-right-text h2{ width: 70%;}
.hot-cold{ margin-top: 8px; width: 30%; text-align: right;}
.hot-cold span{ width: 43px; height: 17px; display: inline-block; background: #f23e49; color: #000; font-weight: 700; text-align: center; font-size: 0.857em; text-transform: uppercase;}
.hot-cold span + span{ background: #6bdbff;}
.chart-sec{ min-height: auto !important;}
.db-graphs .row{ margin: 0 -6px;}
.db-graphs aside{ padding: 0 6px;}
.blue-chart g [aria-labelledby="id-66-title"],
.blue-chart g [aria-labelledby="id-216-title"],
.blue-chart g [aria-labelledby="id-366-title"],
.blue-chart g [aria-labelledby="id-516-title"],
.blue-chart g [aria-labelledby="id-666-title"],
.blue-chart g [aria-labelledby="id-816-title"],
.pressure-gauges g [aria-labelledby="id-1086-title"],
.pressure-gauges g [aria-labelledby="id-971-title"],
.pressure-gauges g [aria-labelledby="id-1201-title"],
.pressure-gauges g [aria-labelledby="id-1316-title"],
.pressure-gauges g [aria-labelledby="id-722-title"]{display: none;}
.chart-sec{ width: 100%; height: 220px; color: #fff; padding: 0 0 0 10px}
.blue-chart g text{ fill: #fff;}
.blue-chart g tspan { font-size: 0.857em;}
/*g [aria-labelledby="id-66-title"] {display: none;}
#id-145 g[role="menuitem"] { fill: #f44653; stroke: #f44653;}
#id-127 g[role="menuitem"] { fill: #90e7ff; stroke: #90e7ff;}
g text{ fill: #fff;}
g tspan{ font-size: 12px;}*/

.pressure-gauges{ width: 100%; height: 200px;}

/* Login */
.login-main{ background-image: url(../img/water-drops-bg.png); background-repeat: no-repeat; background-position: center; padding: 106px 0; position: relative; overflow: hidden;}
.login-main:before{ content: ""; /*background: #edf1f7;*/ width: 0; height: 0; border-top: 1070px solid #edf1f7; border-right: 1900px solid transparent; display: block; position: absolute; top: 0; z-index: -1;}
.login-box-wrapper{ display: table; width: 100%; table-layout: fixed; max-width: 520px; margin: auto;}
.login-box{ box-shadow: 0px 0px 16px 1px rgba(142, 146, 192, 1); border-radius: 6px; background: #2b2e5b; position: relative; display: table-cell; vertical-align: top; padding: 40px 30px 40px;}
.login-box:before{ content: ""; width: 100%; height: 100%; background: url(../img/login-box-bg.png) no-repeat 0 0; background-size: cover; position: absolute; left: 0; top: 0; opacity: 0.1;}
.login-box .login-box-in{ position: relative;}
.login-logo-sec{ text-align: center; margin: 0 0 35px;}
.login-logo-sec img{ max-width: 166px;}
.login-form .form-row{ margin: 0 0 10px;}
.login-form .form-row label{ display: none;}
.login-form .form-row .input{ width: 100%;}
.login-form .form-field{ height: 53px; border-radius: 6px; background: #fff; font-size: 1.286em; padding: 0 14px; display: block; width: 100%; max-width: 100%; border: none !important; margin: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
.remember-btns{ font-size: 0.857em; }
.remember-btns label{ color: #fff; font-size: 1em;}
.remember-btns input{ position: relative; top: 3px; margin-right: 6px;}
.remember-btns aside + aside{ text-align: right; color: #fff;}
.remember-btns a{ color: #fff; }
.remember-btns span{ color: #fff; padding: 0 6px;}
.login-form button{ display: block; width: 213px; padding: 0; margin: auto; background: #10d3c5; text-transform: uppercase; font-size: 1.286em; color: #fff; line-height: 53px; font-weight: 700; margin-top: 30px; border: none; border-radius: 35px;}
.login-form button:hover{ background: #11b3a7;}
.social-login{ text-align: center; padding: 106px 0 60px;}
.social-login span{ display: block; font-size: 1.286em; color: #fff; margin: 0 0 22px;}
.social-login ul{ margin: 0 -12px;}
.social-login ul li{ display: inline-block; padding: 0 12px;}
.social-login ul li a{ width: 61px; height: 61px; line-height: 61px; display: block; font-size: 2.286em; border-radius: 50%; color: #fff;}
.social-login ul li a.facebook{ background: #3b5998;}
.social-login ul li a.twitter{ background: #55acee;}
.social-login ul li a.linkedin{ background: #007bb5;}
.social-login ul li a.google{ background: #dd4b39;}
.social-login ul li a.facebook:hover{ background: #2d4780;}
.social-login ul li a.twitter:hover{ background: #3e92d2;}
.social-login ul li a.linkedin:hover{ background: #036898;}
.social-login ul li a.google:hover{ background: #d03e2c;}

.copy-right{ background: #c9d1dd; padding: 14px 0; font-size: 1.286em; text-align: center;}

.overview-box-in a{ /*width: 5%;*/ display: inline-block; text-align: center; padding: 0 3px; line-height: 39px; border-bottom: 1px solid #c9d1dd; border-right: 1px solid #c9d1dd; color: #333; font-size: 1.286em; font-weight: 700; background: #fff;}
.brdr-title{ font-size: 1.429em; padding: 0 0 12px; margin: 0 0 17px; border-bottom: 1px solid #b8bce1;}
.blue-bg-box{ padding: 25px 20px;}
.overview-box .overview-box-in{ background: #fff;}
@-webkit-keyframes blinkyellow {
0%, 49% {
    background-color: #fff;
}
50%, 100% {
    background-color: #eee32f;
}
}
@-webkit-keyframes blinkred {
0%, 49% {
    background-color: #fff;
}
50%, 100% {
    background-color: #f23e49;
}
}
.overview-box-in a.yellow-blink{ background: #eee32f; -webkit-animation: blinkyellow 1s infinite; -moz-animation: blinkyellow 1s infinite; -o-animation: blinkyellow 1s infinite; animation: blinkyellow 1s infinite;}
.overview-box-in a.red-blink{ background: #f23e49; -webkit-animation: blinkred 1s infinite; -moz-animation: blinkred 1s infinite; -o-animation: blinkred 1s infinite; animation: blinkred 1s infinite;}
.overview-box{ max-width: 815px;}
.overview-cont p{ position: relative; font-size: 1.143em; font-weight: 700; line-height: 31px; padding: 0 0 0 80px; margin: 0 0 10px;}
.overview-cont p em{ width: 68px; height: 31px; border: 1px solid #b8bce1; background: #f23e49; position: absolute; left: 0; display: block; border-radius: 3px; margin: 0 0 10px; line-height: 31px; top: 50%; margin-top: -15px;}
.overview-cont p.yellow-blink-cont em{ background: #eee22c;}
.overview-cont { padding: 25px 0 0;}
.mobile-header{ display: none;}
.mob-top-bar-right{ display: none;}
.mobile-logo{ display: none;}
.header-nav{ padding: 0;}
.prof-setting-edit{ display: flex; padding: 15px 26px 0;}
.prof-setting-edit span{ color: #b8bce1; display: block; width: 50%; font-size: 1.286em;}
.prof-setting-edit span + span{ text-align: right;}
.profile-img{ text-align: center;}
.profile-img .profile-img-in{ position: relative;} 
.profile-img img { border-radius: 50%;}
.profile-box .social-login{ padding: 21px 0 30px;}
.profile-img h2{ font-size: 1.714em; margin: 10px 0 0;}
.profile-img p{ color: #b8bce1; font-size: 1.286em;}
table.profile-details{ background: #3a4469; width: 100%; padding: 26px 0 15px; display: block; font-size: 1.143em;}
table.profile-details tbody,
table.profile-details tbody tr{ width: 100%; display: table;}
table.profile-details tr th{ width: 30%; padding: 0 15px 0 23px; vertical-align: top;}
table.profile-details tr td{ width: 70%; text-align: right; padding: 0 20px 13px 20px;}
table.profile-details tr td a:hover{ color: #10d3c5;}
.brdr-radius-btn{ text-align: center; padding: 30px 0;}
.brdr-radius-btn button, .brdr-radius-btn a{ border: 2px solid #b8bce1; background: none; border-radius: 35px; padding: 0 52px; line-height: 40px; font-size: 1.143em; display: inline-block;}
.brdr-radius-btn button:hover, .brdr-radius-btn a:hover{ color: #10d3c5; border-color: #10d3c5;}
.profile-cont ul li h3 { font-size: 1em; margin: 0;}
ul.user-logs, ul.linked-user{ overflow: auto; height: 267px;}
ul.user-logs li{ border-bottom: 1px solid #b8bce1;}
ul.user-logs li + li{ padding-top: 10px;}
ul.user-logs li p + p{ margin: 0 0 10px;}
ul.linked-user li{ display: flex; padding-bottom: 15px; border-bottom: 1px solid #b8bce1; align-items: center;}
ul.linked-user li + li{ padding-top: 15px }
ul.linked-user li figure{ margin: 0 12px 0 0;}
ul.linked-user li figure img{ width: 47px; height: 47px; border-radius: 50%;}
table.inline-table{ width: 100%; font-size: 1.143em}
table.inline-table tr th,
table.inline-table tr td{ padding: 5px 0;}
table.inline-table tr th{ width: 40%; line-height: normal;}
table.inline-table tr td{ text-align: right; width: 60%; padding-left: 15px;}

.profile-activities ul li{ padding: 0 0 6px;}
.profile-acnt-info, .profile-activities{ margin: 27px 0 0;}
.profile-wrapper{ margin: 0 -14px;}
.profile-wrapper .profile-cont{ padding-left: 5px;}
.profile-cont .row{ margin: 0 -10px;}
.profile-cont .profile-cont-box{ padding: 0 10px;}
.profile-wrapper .blue-bg-with-radius{ height: 100%; min-height: 362px;}
.title-right-icon{ position: relative;}
.title-right-icon button, .title-right-icon a{ position: absolute; background: none; border: none; position: absolute; right: 0; font-size: 0.9em; padding: 0; color: #b8bce1;}
.units-table-wrapper{ overflow: auto; height: 270px;}
.units-table-wrapper table.units-table tr th,
.units-table-wrapper table.units-table tr td{ text-align: left; width: auto; padding: 0 5px;}
.units-table-wrapper table.units-table tr td{ border-bottom: 1px solid #b8bce1; padding-top: 8px; padding-bottom: 8px;}
.actions span{ padding: 0 6px;}
.actions span + span{ border-left: 1px solid #fff;}

.property-details aside:nth-child(1){ -ms-flex: 0 0 34%; flex: 0 0 34%; max-width: 34%;}
.property-details aside:nth-child(2){ -ms-flex: 0 0 26%; flex: 0 0 26%; max-width: 26%;}
.property-details aside:nth-child(3){ -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
.heading-with-pad{ padding: 25px 20px 8px;}
.sensor-details .profile-img{ width: 202px; height: 202px; background: #f4f4f4; margin: auto; border-radius: 50%; overflow: hidden; padding: 20px; margin-bottom: 46px;}
.sensor-details .profile-img img{ border-radius: 0;}
.sensor-details table.profile-details tr td .active{ color: #10d3c5; text-transform: uppercase;}
.sensor-details .profile-cont table tr td a,
.system-view-wrapper .profile-cont table tr td a{ color: #10d3c5; text-decoration: underline;}
.sensor-details .profile-cont table tr th{ width: 30%;}
.sensor-details .profile-cont table tr td{ width: 70%;}
.log-scroll-table{ height: 390px; overflow-y: auto;}
.log-scroll-table table tr th{ font-weight: normal;}
.log-scroll-table table tr th,
.log-scroll-table table tr td{ padding: 18px 10px; border-bottom: 1px solid #fff;}

/*.profile-cont table tr th, .profile-cont table tr td { vertical-align: top;}*/
.notify-box form{ padding-top: 10px;}
.chkbox-row{ position: relative; padding: 0 0 0 23px; margin: 0 0 10px;}
.chkbox-row input{ position: absolute; left: 0; top: 7px;}
.chkbox-row label{ font-size: 1.143em; margin: 0; color: #fff;}

.profile-cont .watercost-box table tr th{ font-weight: normal; width: 70%;}
.profile-cont .watercost-box table tr td{ width: 30%;}
.watercost-box table tr td input,
.water-bill-box form span input{ border-radius: 6px; width: 106px; height: 32px; display: inline-block; border: none; text-align: center; margin: 0 0 8px;}
.profile-cont .device-status-box table tr td{ width: auto; text-align: left; border-bottom: 1px solid #fff; padding: 10px;}
.profile-cont .device-status-box table tr:last-child td{ border-bottom: none;}
.device-status-box table tr td.device-img{ font-size: 2.571em; color: #a6b9cc; text-align: center;}
.device-status-box table tr td h3{ font-size: 1em; margin: 0;}
.device-status-box table tr td.check-icon{ font-size: 2em; color: #10d3c5; text-align: right;}
.device-status-box table tr td.device-img img{ max-height: 57px;}
.system-set-wrapper .profile-cont-box{ margin-bottom: 20px;}
.threshold-bar{ width: 100%; height: 12px; border: 1px solid #9eb1c3; border-radius: 35px; background: #262e48; position: relative; margin-top: 10px;}
.threshold-bar-in{ width: 25px; height: 25px; border-radius: 50%; position: absolute; top: -8px; border: 1px solid #262e48; background: #97aabc; background: -moz-linear-gradient(top,  #97aabc 0%, #a5b8ca 51%, #90a3b5 100%); background: -webkit-linear-gradient(top,  #97aabc 0%,#a5b8ca 51%,#90a3b5 100%); background: linear-gradient(to bottom,  #97aabc 0%,#a5b8ca 51%,#90a3b5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97aabc', endColorstr='#90a3b5',GradientType=0 );}
.threshold-data{ margin: 0 0 25px;}
.notify-box .brdr-radius-btn{ padding-top: 80px;}
span.icon-action{ position: relative;}
span.icon-action a{ left: 7px; position: absolute; z-index: 1; top: 0; font-size: 0; width: 14px; height: 20px; line-height: 20px; display: block;}
.device-status-box table.sensor_table{ width: 100%; transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease;}
.device-status-box .sensor_div{ border-bottom: 1px solid #fff; width: 100%;}
.device-status-box table.sensor_table:hover { background: #1c264c;}
.threshold-data input{ width: 100%; border: 1px solid #9eb1c3; border-radius: 25px;}
.status-txt{ text-transform: uppercase;}
.profile-cont .sensor-list-box{ max-width: 780px; padding: 0;}
.units-table-wrapper table.units-table tr .actions{ min-width: 100px;}
.chage-pwd-link{ text-align: right;}
.chage-pwd-link a{ color: #0fd3c5; text-decoration: underline; font-size: 1.286em;}
.enolgas-def-form .required label:after{ content: "*"; color: #f23e49; margin-left: 2px;}
.reset-pwd h2{font-size: 1.429em; padding: 0; margin: 0 0 15px; font-family: 'Open Sans', sans-serif; font-weight: 600; text-align: center; color: #fff;}
.reset-pwd .login-box { padding-bottom: 50px; height: 660px; vertical-align: middle;}
.reset-pwd.login-main{ min-height: calc( 100vh - 55px );}
.return-log-link{ text-align: right; color: #fff;}
.return-log-link a:hover{ color: #10d3c5;}
form .row .phone-code-field { margin: 0 0 13px;}
.phone-code-field .code-field{ -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%;}
.phone-code-field .phone-field { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; padding-left: 15px;}
form .row .row.state-zip{ margin: 0 -5px;}
.state-zip .input:last-child{ width: 30%}
.state-zip .input{ width: 70%; padding: 0 5px;}


.round-gauge-wrapper { height: 298px; width: 309px; position: relative; background: #2b3455; overflow: hidden; margin: 0 auto; }
  .round-gauge-pin { position: absolute; top: 0; color: #fff; left: 50% }
  .circle { margin: auto; position: absolute; top: 10px; left: 0; bottom: 0; right: 0;height: 155px; width: 155px; background-color: #2b3455; border-radius: 200px; color: #fff; text-align: center; z-index: 1;}
  .arrow-circle-wrapper { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 200px; width: 200px; transform: rotate(-128deg) }
  .arrow { width: 0; height: 0; border-bottom: 50px solid #f23e49; border-left: 9px solid transparent; border-right: 9px solid transparent;
    position: absolute; margin: auto; top: -150px; left: 0; bottom: 0; right: 0 }
  .triangle {position: absolute; bottom: -15px; left: 0%; width: 0px; height: 0px; border-left: 155px solid transparent; border-right: 155px solid transparent; border-bottom: 155px solid #2b3455;}
  .gauge-white {width: 253px;height: 253px;margin: 28px auto 0 auto;border-radius: 500px;background: #fff;/* background: url(./numbers.png) #fff no-repeat; */}
  .circle p {width: 80%; margin: 38px auto 0 auto; font-size: 1.3em;}
  .circle p span {display: block; position: relative;}
  .circle p span#gaugeNumber {font-size: 1.9em; display: inline-block; border-bottom: solid 1px #fff; margin-bottom: 2px;}
  .circle p span#gaugeUnits {}
  .gauge-white .ticks {position: absolute;width: 90%;height: 92%;top: 18px;left: 15.3px;}
  .gauge-white .ticks .tithe {transform: rotate(calc(15deg * var(--gauge-tithe-tick) - 
30deg));background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 3%,#2b3455 0%,#2b3455 6%,rgba(0,0,0,0) 6%);position: relative;}
  /*.gauge-white .ticks .tithe:nth-child(2n) {background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 3%,#2b3455 0%,#2b3455 8%,rgba(0,0,0,0) 8%);}*/
  .gauge-white .ticks .tithe/*:nth-child(2n)*/:after, .gauge-white .ticks .min:after, .gauge-white .ticks .max:after {position: absolute;counter-reset: variable var(--tick-number);content: counter(variable);color: #2b3455;margin: -6px 0 0 25px;font-size: .8em;transform: rotate(calc(-1 * (15deg * var(--gauge-tithe-tick) - 30deg)));}
  .gauge-white .ticks .min, .gauge-white .ticks .mid, .gauge-white .ticks .max {background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#2b3455 4%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .gauge-white .ticks .min {transform: rotate(-31deg);}
  .gauge-white .ticks .mid {transform: rotate(90deg);}
  .gauge-white .ticks .max {transform: rotate(212deg);} 
  .gauge-white .ticks .min:after {transform: rotate(31deg);}
  .gauge-white .ticks .max:after {transform: rotate(-210deg);}
  svg {height: 100%; width: 100%;}
  circle {stroke-width: 3px; fill: transparent;}
  #red{stroke: red; /*stroke-dasharray: 74.5, 284;*/ /* length of arc, circumference of circle */ /*stroke-dashoffset: -159.75;*/ /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #orange{stroke: orange; stroke-dasharray: 92.5, 214.7; /* length of arc, circumference of circle */ stroke-dashoffset: -219; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #green{stroke: green; stroke-dasharray: 128.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -91.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */}

  .circle p span {display: block; position: relative;}
  .circle p span.gauge-number{font-size: 1.7em; display: inline-block; border-bottom: solid 1px #fff; margin-bottom: 2px; padding: 0 0 10px;}
  
  /*.round-gauge-wrapper{ height: 298px; width: 309px; position: relative; overflow: hidden;}
  .round-gauge-pin { position: absolute; top: 0; color: #fff; left: 50% }
  .circle { margin: auto; position: absolute; top: 10px; left: 0; bottom: 0; right: 0;height: 155px; width: 155px; background-color: #2b3455; border-radius: 200px; color: #fff; text-align: center; z-index: 1;}
  .arrow-circle-wrapper { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 200px; width: 200px; transform: rotate(-128deg) }
  .arrow { width: 0; height: 0; border-bottom: 50px solid #f23e49; border-left: 9px solid transparent; border-right: 9px solid transparent;
    position: absolute; margin: auto; top: -150px; left: 0; bottom: 0; right: 0 }
  .triangle {position: absolute; bottom: -15px; left: 0%; width: 0px; height: 0px; border-left: 155px solid transparent; border-right: 155px solid transparent; border-bottom: 155px solid #2b3455;}
  .gauge-white {width: 253px;height: 253px;margin: 28px auto 0 auto;border-radius: 500px;background: #fff;/* background: url(./numbers.png) #fff no-repeat; */}
 /* .circle p {width: 80%; margin: 38px auto 0 auto; font-size: 1.3em;}
  .circle p span {display: block; position: relative;}
  .circle p span.gauge-number{font-size: 1.7em; display: inline-block; border-bottom: solid 1px #fff; margin-bottom: 2px; padding: 0 0 10px;}
  .gauge-white .ticks { position: absolute;width: 90%;height: 92%;top: 18px;left: 15.3px;}
  .gauge-white .ticks .tithe {transform: rotate(calc(15deg * var(--gauge-tithe-tick) - 
30deg));background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 3%,#2b3455 0%,#2b3455 6%,rgba(0,0,0,0) 6%);position: relative;}*/
  
  .flow-imp .gauge-white .ticks .tithe/*:nth-child(2n)*/:after,
  .flow-imp .gauge-white .ticks .min:after,
  .flow-imp .gauge-white .ticks .max:after {position: absolute;counter-reset: variable var(--tick-number);content: counter(variable);color: #2b3455;margin: -6px 0 0 25px;font-size: .8em;transform: rotate(calc(-1 * (15deg * var(--gauge-tithe-tick) - 30deg)));}
  .flow-imp .gauge-white .ticks .min,
  .flow-imp .gauge-white .ticks .mid,
  .flow-imp .gauge-white .ticks .max {background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#2b3455 4%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .flow-imp .gauge-white .ticks .min {transform: rotate(-31deg);}
  .flow-imp .gauge-white .ticks .mid {transform: rotate(90deg);}
  .flow-imp .gauge-white .ticks .max {transform: rotate(212deg);} 
  .flow-imp .gauge-white .ticks .min:after {transform: rotate(31deg);}
  .flow-imp .gauge-white .ticks .max:after {transform: rotate(-210deg);}
  svg {height: 100%; width: 100%;}
  circle {stroke-width: 3px; fill: transparent;}
  #red{stroke: red; /*stroke-dasharray: 74.5, 284;*/ /* length of arc, circumference of circle */ /*stroke-dashoffset: -159.75;*/ /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #orange{stroke: orange; stroke-dasharray: 92.5, 214.7; /* length of arc, circumference of circle */ stroke-dashoffset: -219; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #green{stroke: green; stroke-dasharray: 128.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -91.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */}  


  .pre-imp .gauge-white .ticks .tithe:after{ content: "";}
  .pre-imp .gauge-white .ticks .tithe:nth-child(2n) {background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 3%,#2b3455 0%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .pre-imp .gauge-white .ticks .tithe:nth-child(2n):after,
  .pre-imp .gauge-white .ticks .min:after,
  .pre-imp .gauge-white .ticks .max:after{position: absolute;counter-reset: variable var(--tick-number);content: counter(variable);color: #2b3455;margin: -6px 0 0 25px;font-size: .8em;transform: rotate(calc(-1 * (15deg * var(--gauge-tithe-tick) - 30deg)));}
  
  .pre-imp .gauge-white .ticks .min, .pre-imp .gauge-white .ticks .mid, .pre-imp .gauge-white .ticks .max {background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#2b3455 4%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .pre-imp .gauge-white .ticks .min {transform: rotate(-31deg);}
  .pre-imp .gauge-white .ticks .mid {transform: rotate(90deg);}
  .pre-imp .gauge-white .ticks .max {transform: rotate(208deg);} 
  .pre-imp .gauge-white .ticks .min:after {transform: rotate(31deg);}
  .pre-imp .gauge-white .ticks .max:after {transform: rotate(-211deg);}

  /*.pre-imp .gauge-white .ticks .tithe:after,
  .pre-imp .gauge-white .ticks .min:after,
  .pre-imp .gauge-white .ticks .max:after{ content: "";}*/

  .pre-met .gauge-white .ticks .tithe:nth-child(2n) {background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 3%,#2b3455 0%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .pre-met .gauge-white .ticks .tithe:nth-child(2n):after,
  .pre-met .gauge-white .ticks .min:after,
  .pre-met .gauge-white .ticks .max:after {position: absolute;counter-reset: variable var(--tick-number);content: counter(variable);color: #2b3455;margin: -6px 0 0 25px;font-size: .8em;transform: rotate(calc(-1 * (15deg * var(--gauge-tithe-tick) - 30deg)));}
  .pre-met .gauge-white .ticks .min,
  .pre-met .gauge-white .ticks .mid,
  .pre-met .gauge-white .ticks .max {background: #000;position: relative;left: 0;top: 50%;width: 100%;height: 1%;margin-bottom: -1%;background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 4%,#2b3455 4%,#2b3455 8%,rgba(0,0,0,0) 8%);}
  .pre-met .gauge-white .ticks .min {transform: rotate(-31deg);}
  .pre-met .gauge-white .ticks .mid {transform: rotate(90deg);}
  .pre-met .gauge-white .ticks .max {transform: rotate(219deg);} 
  .pre-met .gauge-white .ticks .min:after {transform: rotate(31deg);}
  .pre-met .gauge-white .ticks .max:after {transform: rotate(-208deg);}

  #red.prs-imp-color{stroke: red; /*stroke-dasharray: 74.5, 284;*/ /* length of arc, circumference of circle */ /*stroke-dashoffset: -159.75;*/ /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #orange.prs-imp-color{stroke: orange; stroke-dasharray: 137.5, 278; /* length of arc, circumference of circle */ stroke-dashoffset: -280; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #green.prs-imp-color{stroke: green; stroke-dasharray: 188.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -91.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */}

  #orange.prs-met-color{stroke: orange; stroke-dasharray: 125.5, 290; /* length of arc, circumference of circle */ stroke-dashoffset: -304; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #green.prs-met-color{stroke: green; stroke-dasharray: 211.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -91.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */}

  #orange.flow-met-color{stroke: orange; stroke-dasharray: 107.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -196; /* offset of arc from start point (1/2 arc length + 1/4 circumference) */}
  #green.flow-met-color{stroke: green; stroke-dasharray: 103.5, 284; /* length of arc, circumference of circle */ stroke-dashoffset: -91.75; /* offset of arc from start point (1/2 arc length + 3/4 circumference) */}

.cold .arrow{ border-bottom-color: #6bdbff;}
.gauges-left{ flex: 0 0 645px; max-width: 645px; -ms-flex: 0 0 645px;}
.gauges-right-div{ flex: 0 0 calc( 100% - 645px ); max-width: calc( 100% - 645px );}

.property-address em{ font-style: normal;}
.help-center-grids ul li{ margin: 0 0 8px;}
.help-center-grids ul li a{ display: block; background: #fff; color: #000; border-radius: 5px; position: relative; padding: 11px 25px 11px 40px; line-height: 23px; font-weight: 600; font-size: 1.143em;}
.help-center-grids ul li a:hover{ background: #c9d1dd;}
.help-center-grids ul li a i{ position: absolute; left: 12px; top: 14px;}
.help-center-grids ul li a:after{ content: "\f105"; font-family: "Font Awesome 5 Pro"; position: absolute; right: 16px; top: 50%; line-height: normal; margin-top: -9px; font-weight: normal;}
.heading-cont-sec h3{ font-size: 1.143em; font-weight: 700;}
.heading-cont-sec p{ margin-bottom: 15px;}
.heading-cont-sec a{ color: #10d3c5; text-decoration: underline; word-break: break-all;}
.download-link{ text-align: center; padding: 20px 0;}
.download-link a{ background: #2b3455; border-radius: 35px; font-size: 1.143em; color: #fff; text-decoration: none; padding: 8px 20px; display: inline-block;}
.download-link a:hover{ background: #1d274e;}
.download-link a:before{ content: "\f1c1"; font-family: "Font Awesome 5 pro"; margin-right: 8px;}

.accordion-header,.accordion-body { background: #edf1f7;}
.accordion-header { padding: 10px 40px 10px 10px; border-bottom: 1px solid #b8bce1; background: #edf1f7; cursor: pointer; font-size: 1.143em; font-weight: 600; transition: all .3s; color: #1b1b1b; border-radius: 7px; position: relative;}
.accordion__item { margin: 0 0 8px;}
.accordion__item .accordion__item { border-bottom: 1px solid rgba(0, 0, 0, 0.08);}
.accordion-header:hover { position: relative; z-index: 5;}
.accordion-body { background: #edf1f7; display: none; color: #1b1b1b;  border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}
.accordion-body__contents { padding: 5px 15px 30px;}
.accordion__item.active:last-child .accordion-header { border-radius: none;}
.accordion:first-child > .accordion__item > .accordion-header { border-bottom: 1px solid transparent;}
.accordion__item > .accordion-header:after { content: "\f078"; font-family: "Font Awesome 5 pro"; position: absolute; top: 12px; right: 20px; transition: .3s all; transform: rotate(0deg);}
.accordion__item.active > .accordion-header:after { transform: rotate(-180deg);}
.units-table-wrapper{ height: 450px;}
.accordion-body__contents ul li { padding-top: 15px;}
.js-accordion-item.active .accordion-header{ border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.sys-status .sys-status-txt em{ display: block; font-style: normal; font-weight: normal;}
.sys-status .icon-first, .sys-status .icon-last{ position: absolute; font-size: 2.143em; top: 5px; left: 0;}
.sys-status .icon-last{ left: auto; right: 0; top: 0;}
.sys-status .sys-status-txt{ font-size: 1em; font-weight: 700; display: block; line-height: normal;}
.sys-status-row{ position: relative; padding: 0 45px 0 60px;}
.sys-status ul li h3{ margin: 0 0 20px;}
.sys-status ul li .row{ margin: 0 -30px;}
.sys-status ul li aside{ padding: 0 30px;}
.sys-status ul li{ border-bottom: 1px solid #b8bce1; padding: 0 0 21px;}
.sys-status ul li + li{ padding-top: 21px;}
.floor-list ul{ display: none;}
.floor-list ul.active{ display: flex;}
.main-wrapper{ min-height: calc( 100vh - 55px );}
.modal-content{ color: #1b1b1b;}
.modal-popup-md{ max-width: 900px; text-align: left;}
.modal-header{ align-items: center; padding: 8px 15px;}
.modal-title{ font-size: 1.714em; font-weight: 700;}
table.enolgas-table{ width: 100%; font-size: 1.143em;}
table.enolgas-table thead tr th{ padding: 0 5px;}
table.enolgas-table tbody tr td{ padding: 14px 5px; border-bottom: 1px solid #b8bce1;}
.enolgas-table-wrapper{ height: 450px;}
.pagination{ justify-content: flex-end;}
.pagination li.prev{ padding: 0 20px 0 0;}
.paginator p{ text-align: right; margin-top: 10px;}
.heading-with-input{ display: flex; justify-content: space-between; padding: 0 0 12px; margin: 0 0 17px; align-items: center; border-bottom: 1px solid #b8bce1;}
.heading-with-input h2{ border: none; padding: 0; margin: 0;}
.heading-with-input input{ height: 38px; border-radius: 5px; background: #fff; margin: 0;}

.metric-sec .imperial-gauges, .metric-gauges{ display: none;}
.metric-sec .metric-gauges{ display: block;}
g[aria-labelledby = "id-966-title"], g[aria-labelledby = "id-1266-title"], g[aria-labelledby = "id-1416-title"], g[aria-labelledby = "id-1716-title"], g[aria-labelledby = "id-1116-title"], g[aria-labelledby = "id-1566-title"], g[aria-labelledby = "id-1866-title"], g[aria-labelledby = "id-2016-title"], g[aria-labelledby = "id-2166-title"], g[aria-labelledby = "id-2316-title"]{display: none;}


.history-wrapper .heading-with-right-text h2{ margin: 0;}
.history-wrapper .hot-cold{ margin-top: 0; text-align: left;}
.history-wrapper select.eng-select{ width: auto; border: 1px solid #888 !important; padding-right: 60px;}
.history-wrapper aside form{ padding-left: 40px;}
.history-wrapper .chart-sec-wrapper{ margin-top: 16px; position: relative;}
.history-wrapper .metricwp-sec,
.history-wrapper .metricwu-sec{ display: none;}
.eng-select:focus{ outline: none;}
.water-bill-box form span{ display: block; padding: 20px 0 0; font-size: 1.143em;}
.water-bill-box form span input{ margin: 0;}
.water-bill-box form span em{ font-style: normal; padding: 0 10px; display: inline-block;}
.water-bill-box form span select{ display: inline-block; width: auto; box-shadow: none; min-width: 137px; height: 32px; border-radius: 5px;}
.water-bill-box form .brdr-radius-btn{ padding-top: 110px; padding-bottom: 0;}

.no-data { position: absolute; top: 50%; margin-left: 32%;}
.no-data-long { margin-left: 40%;}

input[type="file"].add_sensor_icon {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    width: 200px;
    border-radius: 8px;
}

.sensor-dropdown {
  width: 100%;
}
.btn.btn-secondary.dropdown-toggle.sensor-dropdown-btn {
    border: none !important;
    height: 51px;
    border-radius: 5px !important;
    margin: 0;
    padding: 0 10px;
    color: #000;
    font-size: 1.286em;
    width: 100%;
    max-width: 100%;
    display: block;
    box-shadow: none;
    -webkit-box-shadow: none;
    background: #fff url(../img/arrow-down-icon.png) no-repeat right 12px center !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 25px;
    text-align: left;
}
.sensor-dropdown-menu {
  width: 100%;
  max-width: none;
}
.sensor-dropdown-menu .dropdown-item {
  /*display: inline;*/
  margin: 2.5px;
  width: 103px;
  float: left;
  clear: none;
}
.sensor-dropdown-menu .dropdown-item img {
  margin: 5px 2.5px 5px 2.5px;
}
.sensor-dropdown-menu .dropdown-item:active {
    background-color: #fff;
}
.sensor-dropdown-menu .dropdown-item:hover {
    background-color: #fff;
}
.sensor-dropdown-menu .dropdown-item:hover img, .sensor-dropdown-menu .dropdown-item.active-sensor img {
    border: 2px solid #ccc;
}