downnone1a, button, input {
text-decoration: none;
transition: all .5s ease;
}

.wrapper {
height: 100vh;
}

.bs-popover-top.show {
display: block !important;
opacity: 1;
}

.map-panel {
position: relative;
z-index: 1;
height: 100%;
transition: all .5s ease;
outline: none;
width: 100%;
}

.popover {
z-index: 9999999 !important;
}

.tooltipPopOver {
position: absolute;
bottom: 48px;
padding: 7px;
box-shadow: rgba(0, 0, 0, 0.27) 0px 0px 3px;
border-radius: 4px;
width: 220px;
font-size: 12px;
left: 56%;
margin-left: -122px;
z-index: 9999;
}

.tooltipPopOver table td, .tooltipPopOver table th {
font-size: 12px;
}

.tooltipPopOver:before {
content: "";
content: "";
bottom: -10px;
left: 40%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #eee;
position: absolute;
}

[data-toggle="popover"] {
position: relative;
cursor: pointer;
display: inline-block;
}

.tooltipPopOver:after {
content: "";
display: block;
bottom: -8px;
left: 41%;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
position: absolute;
}

.scrolledTable1 {
overflow-y: auto;
clear: both;
}

.map-panel.map-panel-expand {
margin-left: 400px;
width: calc(100% - 400px);
transition: all .5s ease;
}

.map-panel .map {
height: 100%;
}

#header {
font-size: 12px;
}

.header {
padding: 0 20px;
position: fixed;
left: 0;
top: 0;
z-index: 4;
width: 100%;
height: 64px;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, .04);
}

.header .logo {
float: left;
margin-top: 10px;
}

.header .navigation-menu {
width: 650px;
margin: 0 auto;
}

.header .navigation-menu .navbar {
padding: 0;
}

.header .navigation-menu .navbar-light .navbar-nav .nav-link {
color: #fff;
padding: 18px 30px;
border-top: 4px solid transparent;
}

.header .navigation-menu .navbar .navbar-nav .nav-link:hover {
color: #00CCBE;
}

.header .navigation-menu .navbar-light .navbar-nav .show>.nav-link,
.header .navigation-menu .navbar-light .navbar-nav .active>.nav-link,
.header .navigation-menu .navbar-light .navbar-nav .nav-link.show,
.header .navigation-menu .navbar-light .navbar-nav .nav-link.active {
color: #00CCBE;
border-top: 4px solid #00CCBE;
}

.header .dropdown-menu {
margin: 0;
padding: 0;
font-size: 14px;
text-align: left;
border: 0;
border-radius: 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, .1), 0 1px 5px rgba(0, 0, 0, .1);
}

.header .dropdown-menu .dropdown-item {
color: #1f3559;
padding: 10px;
border-bottom: 1px solid #efefef;
}

.header .dropdown-menu .dropdown-item:last-child {
border-bottom: 0;
}

.header .dropdown-menu .dropdown-item:hover, .header .dropdown-menu .dropdown-item:focus
{
color: #1f3559;
outline: none;
}

.header .profile-menu {
float: right;
margin-top: 4px;
position: relative;
z-index: 1;
}

.header .profile-menu .navbar-nav .nav-link {
color: #fff;
}

.header .profile-menu .navbar-nav .nav-link .profile-pic {
float: left;
margin-right: 10px;
margin-top: 8px;
}

.header .profile-menu .navbar-nav .dropdown-toggle::after {
margin-top: 20px;
}

.filter-main {
padding: 10px 20px 0;
position: relative;
z-index: 3;
}

.filter-input-sec .filtet-text-sec {
float: left;
width: 100%;
}

.filter-input-sec .filtet-text-sec form {
margin-bottom: 0;
}

.filter-input-sec .filtet-btn-sec .btn-primary {
height: 38px;
font-size: 14px;
}

.filter-main .form-group .form-control {
margin-bottom: 20px;
}

.main-body {
position: relative;
/*overflow-y: hidden; */
}

.main-body.main-report {
position: relative;
height: calc(100vh - 123px);
padding: 20px;
}

.main-body-sec {

}

.left-panel {
position: absolute;
left: -400px;
width: 400px;
top: 0;
transition: all .5s ease;
box-shadow: 0 1px 5px rgba(0, 0, 0, .1), 0 1px 5px rgba(0, 0, 0, .1);
z-index: 2;
}

.bg-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.75);
z-index: 999;
display: none;
}

.left-panel .left-panel-head {
text-transform: uppercase;
padding: 7px 20px;
font-size: 12px;
font-weight: 600;
position: relative;
height: 32px;
}

.card-header .btn-link.collapsed {

}

.card-header .btn-link.collapsed i {
transform: rotate(180deg);
transition: all 0.3s;
}

.left-panel .left-panel-head select {
text-transform: uppercase;
font-size: 14px;
padding: 0;
width: 100px;
border: 0;
margin-top: -8px;
margin-left: -3px;
}

.left-panel .left-panel-head select option {
text-transform: capitalize;
}

.left-panel .left-panel-head .form-control:focus {
outline: none;
box-shadow: none;
}

.left-panel.left-panel-collapse {
left: 0;
}

.left-panel.left-panel-collapse .collapse-trigger {
opacity: 1;
}

.collapse-trigger i {
font-size: 32px;
}

.left-panel .left-panel-head .l-p-h-left {
float: left;
}

.left-panel .left-panel-head .l-p-h-left a {
cursor: pointer;
}

.left-panel .left-panel-head .l-p-h-left a i, .left-panel .left-panel-head .l-p-h-left a span
{
vertical-align: middle;
}

.left-panel .left-panel-body {
height: calc(100vh - 186px);
overflow-y: auto;
}

.dashboard-data-placeholder {
position: relative;
}

.dashboard-data-placeholder .device-list-dd {
float: right;
position: absolute;
right: 10px;
top: 18px;
z-index: 1;
}

.dashboard-data-placeholder .device-list-dd .form-control {
font-size: 12px;
}

.device-list {
margin: 0;
padding: 0;
list-style: none;
}

.device-list.device-list-not li a {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
width: 100%;
}

.device-list li a {
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
}

.device-list li a#switchsummaryhref {
display: flex;
align-items: center;
border-bottom: none;
}

h2#alldevicescityid {
font-weight: 600;
color: #10141d;
}

h2#device_id {
margin-right: 10px;
font-size: 14px;
padding: 3px 10px;
border-radius: 4px;
display: inline-flex;
font-weight: 600;
}

.device_shref {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
align-items: center;
}

.device_shref>span {
padding: 8px;
text-align: center;
}

.device_shref>span p {
margin-bottom: 0
}

.device_shref .idT_sec {
font-weight: 600;
font-size: 14px;
}

.signal_line {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
height: 28px;
padding: 5px 0px !important;
align-items: baseline;
}

.signal_line>span {
width: 3px;
margin: 0px 1px;
background: #ccc
}

.signal_line>span.T-one {
height: 25%
}

.signal_line>span.T-two {
height: 50%
}

.signal_line>span.T-three {
height: 75%
}

.signal_line>span.T-four {
height: 100%
}

#refresh-dash {
cursor: pointer;
}

.signal_line>span.activeLine {

}

.signal_line.inactiveRed_4>span {
background: red
}

.signal_line_panel {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
height: 28px;
padding: 5px 0px !important;
align-items: baseline;
}

.signal_line_panel>span {
width: 3px;
margin: 0px 1px;
background: #ccc
}

.signal_line_panel>span.T-one {
height: 25%
}

.signal_line_panel>span.T-two {
height: 50%
}

.signal_line_panel>span.T-three {
height: 75%
}

.signal_line_panel>span.T-four {
height: 100%
}

.signal_line_panel.active_4>span {
background: green
}

.signal_line_panel>span.activeLine {

}

.signal_line_panel.inactiveRed_4>span {
background: red
}

.device-list li a#switchsummaryhref {
display: block;
}

.device-list li a#switchsummaryhref  p {
font-size: 12px;
padding-left: 10px;
}

h2#total_devices {
border-radius: 6px;
padding: 2px 10px;
margin-right: 10px;
}

.device-list li a i, .device-list.device-list-not li a #alldevicescityid,
.device-list li a p {
margin-left: auto;
}

.device-list li a {
padding: 10px 20px;
position: relative;
}

.device-list li a:hover {
text-decoration: none;
cursor: pointer;
}

.device-list li a h2 {
font-size: 13px;
margin-bottom: 0;
font-weight: 600;
}

.device-list li a p {
font-size: 14px;;
margin: 0;
}

.device-list li a b {
position: absolute;
right: 10px;
top: 30px;
}

.device-list li a .signal-icon {
position: absolute;
top: 5px;
right: 10px;
}
/* .device-list li a .signal-icon.green-sig-ic {
    color: #0bae54;
}
.device-list li a .signal-icon.red-sig-ic  {
    color: #f20000;
} */
.master-sec {
position: absolute;
z-index: 9999;
right: 36px;
top: 6px;
}

.master-sec .btn-primary {
font-size: 12px;
height: 30px;
}

.master-sec .btn-primary i, .master-sec .btn-primary span {
vertical-align: middle;
}

.srch_dv, .cur_dv {
display: none;
}

.master-main {
width: 320px;
height: 297px;
overflow: hidden;
border-radius: 4px;
position: relative;
box-shadow: 0 3px 20px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .1);
}

.master-main .close-link {
right: 10px;
top: 10px;
position: absolute;
cursor: pointer;
}

.master-main .master-main-head {
padding: 10px 20px;
}

.master-main .master-main-head h2 {
font-size: 18px;
margin-bottom: 0;
}

.master-main .master-main-body {
padding: 10px 20px;
}

.box {
float: left;
}

/*gauge*/
.circle {
max-width: 200px;
margin: 20px auto 10px;
position: relative;
}

.circle-frame {
overflow: hidden;
position: relative;
z-index: 10;
}

.circle-bg {
width: 200px;
height: 100px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-moz-border-radius: 200px 200px 0 0;
-webkit-border-radius: 200px 200px 0 0;
border-radius: 200px 200px 0 0;
-moz-box-shadow: inset 0 3px 12px 0 rgba(0, 0, 12, 0.1);
-webkit-box-shadow: inset 0 3px 12px 0 rgba(0, 0, 12, 0.1);
box-shadow: inset 0 3px 12px 0 rgba(0, 0, 12, 0.1);
}

.circle-fill {
width: 200px;
height: 100px;
background: #d3222e;
position: absolute;
top: 0px;
left: 0;
/*.transition(all);*/
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-moz-border-radius: 200px 200px 0 0;
-webkit-border-radius: 200px 200px 0 0;
border-radius: 200px 200px 0 0;
}

.circle-mask {
width: 100px;
height: 50px;
position: absolute;
bottom: 0;
left: 50px;
-webkit-box-shadow: 0 3px 12px 0 0 0 0 0.1px;
-moz-box-shadow: 0 3px 12px 0 0 0 0 0.1px;
box-shadow: 0 3px 12px 0 0 0 0 0.1px;
-moz-box-shadow: 0 3px 12px 0 rgba(0, 0, 12, 0.1);
-webkit-box-shadow: 0 3px 12px 0 rgba(0, 0, 12, 0.1);
box-shadow: 0 3px 12px 0 rgba(0, 0, 12, 0.1);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-moz-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 0 0;
border-radius: 100px 100px 0 0;
}

.value {
position: absolute;
bottom: -3px;
left: 0;
right: 0;
text-align: center;
color: red;
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: bold;
}

.circle-label {
padding: 20px 30px 0;
border-top: 1px solid #eee;
margin: 40px -40px 0;
color: #666;
font-size: 14px;
font-family: "Montserrat", sans-serif;
line-height: 21px;
}

.circle-label+.circle-label {
margin-top: 20px;
}

.master-main-body input#rangeSlidr_2 {
opacity: 0;
}

.master-main-body button {
cursor: pointer;
display: block;
width: 100%;
padding: 15px;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
border: none;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all;
-moz-transition: all;
-o-transition: all;
transition: all;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.gauge-submit>.btn-primary {
width: auto;
display: inline-block;
border-radius: 30px;
font-size: 14px;
box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}

.master-main-body input {
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
cursor: e-arrow;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
z-index: 200;
height: 100px;
}

.master-main-body input:focus {
border: none;
outline: none;
}

.master-main-body input:before {
content: attr(min);
position: absolute;
left: 3px;
bottom: 3px;
font-size: 15px;
font-weight: bold;
font-family: "Montserrat", sans-serif;
width: 50px;
text-align: center;
}

.master-main-body input:after {
content: attr(max);
position: absolute;
right: 3px;
bottom: 3px;
font-size: 15px;
font-weight: bold;
font-family: "Montserrat", sans-serif;
width: 50px;
text-align: center;
}

.master-main-body input::-webkit-slider-thumb {
opacity: 0.01;
}

.master-main-body input::-moz-slider-thumb {
opacity: 0.01;
}

.master-main .master-main-foot {
padding: 10px 20px;
}

.master-main .master-main-foot .pagination {
margin: 0 auto;
max-width: 118px;
}

.master-main .master-main-foot .pagination .page-item {
margin: 0 5px;
}

.master-main .master-main-foot .pagination .page-item .page-link {
font-size: 12px;
cursor: pointer;
}

.master-main .master-main-foot .pagination .page-item .page-link:hover {
color: #fff;
}

input[value="0"] ~ .circle-fill {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
background-color: #d3222e;
}

input[value="0"] ~ .circle-fill ~ .value {
color: #d3222e;
}

input[value="1"] ~ .circle-fill {
-moz-transform: rotate(-178.2deg);
-webkit-transform: rotate(-178.2deg);
-o-transform: rotate(-178.2deg);
-ms-transform: rotate(-178.2deg);
transform: rotate(-178.2deg);
background-color: #d4242d;
}

input[value="1"] ~ .circle-fill ~ .value {
color: #d4242d;
}

input[value="2"] ~ .circle-fill {
-moz-transform: rotate(-176.4deg);
-webkit-transform: rotate(-176.4deg);
-o-transform: rotate(-176.4deg);
-ms-transform: rotate(-176.4deg);
transform: rotate(-176.4deg);
background-color: #d4262c;
}

input[value="3"] ~ .circle-fill {
-moz-transform: rotate(-174.6deg);
-webkit-transform: rotate(-174.6deg);
-o-transform: rotate(-174.6deg);
-ms-transform: rotate(-174.6deg);
transform: rotate(-174.6deg);
background-color: #d5282c;
}

input[value="4"] ~ .circle-fill {
-moz-transform: rotate(-172.8deg);
-webkit-transform: rotate(-172.8deg);
-o-transform: rotate(-172.8deg);
-ms-transform: rotate(-172.8deg);
transform: rotate(-172.8deg);
background-color: #d52a2b;
}

input[value="5"] ~ .circle-fill {
-moz-transform: rotate(-171deg);
-webkit-transform: rotate(-171deg);
-o-transform: rotate(-171deg);
-ms-transform: rotate(-171deg);
transform: rotate(-171deg);
background-color: #d62c2a;
}

input[value="6"] ~ .circle-fill {
-moz-transform: rotate(-169.2deg);
-webkit-transform: rotate(-169.2deg);
-o-transform: rotate(-169.2deg);
-ms-transform: rotate(-169.2deg);
transform: rotate(-169.2deg);
background-color: #d62e29;
}

input[value="7"] ~ .circle-fill {
-moz-transform: rotate(-167.4deg);
-webkit-transform: rotate(-167.4deg);
-o-transform: rotate(-167.4deg);
-ms-transform: rotate(-167.4deg);
transform: rotate(-167.4deg);
background-color: #d73128;
}

input[value="8"] ~ .circle-fill {
-moz-transform: rotate(-165.6deg);
-webkit-transform: rotate(-165.6deg);
-o-transform: rotate(-165.6deg);
-ms-transform: rotate(-165.6deg);
transform: rotate(-165.6deg);
background-color: #d83327;
}

input[value="9"] ~ .circle-fill {
-moz-transform: rotate(-163.8deg);
-webkit-transform: rotate(-163.8deg);
-o-transform: rotate(-163.8deg);
-ms-transform: rotate(-163.8deg);
transform: rotate(-163.8deg);
background-color: #d83527;
}

input[value="10"] ~ .circle-fill {
-moz-transform: rotate(-162deg);
-webkit-transform: rotate(-162deg);
-o-transform: rotate(-162deg);
-ms-transform: rotate(-162deg);
transform: rotate(-162deg);
background-color: #d93726;
}

input[value="11"] ~ .circle-fill {
-moz-transform: rotate(-160.2deg);
-webkit-transform: rotate(-160.2deg);
-o-transform: rotate(-160.2deg);
-ms-transform: rotate(-160.2deg);
transform: rotate(-160.2deg);
background-color: #d93925;
}

input[value="12"] ~ .circle-fill {
-moz-transform: rotate(-158.4deg);
-webkit-transform: rotate(-158.4deg);
-o-transform: rotate(-158.4deg);
-ms-transform: rotate(-158.4deg);
transform: rotate(-158.4deg);
background-color: #da3b24;
}

input[value="13"] ~ .circle-fill {
-moz-transform: rotate(-156.6deg);
-webkit-transform: rotate(-156.6deg);
-o-transform: rotate(-156.6deg);
-ms-transform: rotate(-156.6deg);
transform: rotate(-156.6deg);
background-color: #db3d23;
}

input[value="14"] ~ .circle-fill {
-moz-transform: rotate(-154.8deg);
-webkit-transform: rotate(-154.8deg);
-o-transform: rotate(-154.8deg);
-ms-transform: rotate(-154.8deg);
transform: rotate(-154.8deg);
background-color: #db3f23;
}

input[value="15"] ~ .circle-fill {
-moz-transform: rotate(-153deg);
-webkit-transform: rotate(-153deg);
-o-transform: rotate(-153deg);
-ms-transform: rotate(-153deg);
transform: rotate(-153deg);
background-color: #dc4122;
}

input[value="16"] ~ .circle-fill {
-moz-transform: rotate(-151.2deg);
-webkit-transform: rotate(-151.2deg);
-o-transform: rotate(-151.2deg);
-ms-transform: rotate(-151.2deg);
transform: rotate(-151.2deg);
background-color: #dc4321;
}

input[value="17"] ~ .circle-fill {
-moz-transform: rotate(-149.4deg);
-webkit-transform: rotate(-149.4deg);
-o-transform: rotate(-149.4deg);
-ms-transform: rotate(-149.4deg);
transform: rotate(-149.4deg);
background-color: #dd4520;
}

input[value="18"] ~ .circle-fill {
-moz-transform: rotate(-147.6deg);
-webkit-transform: rotate(-147.6deg);
-o-transform: rotate(-147.6deg);
-ms-transform: rotate(-147.6deg);
transform: rotate(-147.6deg);
background-color: #dd471f;
}

input[value="19"] ~ .circle-fill {
-moz-transform: rotate(-145.8deg);
-webkit-transform: rotate(-145.8deg);
-o-transform: rotate(-145.8deg);
-ms-transform: rotate(-145.8deg);
transform: rotate(-145.8deg);
background-color: #de4a1e;
}

input[value="20"] ~ .circle-fill {
-moz-transform: rotate(-144deg);
-webkit-transform: rotate(-144deg);
-o-transform: rotate(-144deg);
-ms-transform: rotate(-144deg);
transform: rotate(-144deg);
background-color: #df4c1e;
}

input[value="21"] ~ .circle-fill {
-moz-transform: rotate(-142.2deg);
-webkit-transform: rotate(-142.2deg);
-o-transform: rotate(-142.2deg);
-ms-transform: rotate(-142.2deg);
transform: rotate(-142.2deg);
background-color: #df4e1d;
}

input[value="22"] ~ .circle-fill {
-moz-transform: rotate(-140.4deg);
-webkit-transform: rotate(-140.4deg);
-o-transform: rotate(-140.4deg);
-ms-transform: rotate(-140.4deg);
transform: rotate(-140.4deg);
background-color: #e0501c;
}

input[value="23"] ~ .circle-fill {
-moz-transform: rotate(-138.6deg);
-webkit-transform: rotate(-138.6deg);
-o-transform: rotate(-138.6deg);
-ms-transform: rotate(-138.6deg);
transform: rotate(-138.6deg);
background-color: #e0521b;
}

input[value="24"] ~ .circle-fill {
-moz-transform: rotate(-136.8deg);
-webkit-transform: rotate(-136.8deg);
-o-transform: rotate(-136.8deg);
-ms-transform: rotate(-136.8deg);
transform: rotate(-136.8deg);
background-color: #e1541a;
}

input[value="25"] ~ .circle-fill {
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
background-color: #e2561a;
}

input[value="26"] ~ .circle-fill {
-moz-transform: rotate(-133.2deg);
-webkit-transform: rotate(-133.2deg);
-o-transform: rotate(-133.2deg);
-ms-transform: rotate(-133.2deg);
transform: rotate(-133.2deg);
background-color: #e25819;
}

input[value="27"] ~ .circle-fill {
-moz-transform: rotate(-131.4deg);
-webkit-transform: rotate(-131.4deg);
-o-transform: rotate(-131.4deg);
-ms-transform: rotate(-131.4deg);
transform: rotate(-131.4deg);
background-color: #e35a18;
}

input[value="28"] ~ .circle-fill {
-moz-transform: rotate(-129.6deg);
-webkit-transform: rotate(-129.6deg);
-o-transform: rotate(-129.6deg);
-ms-transform: rotate(-129.6deg);
transform: rotate(-129.6deg);
background-color: #e35c17;
}

input[value="29"] ~ .circle-fill {
-moz-transform: rotate(-127.8deg);
-webkit-transform: rotate(-127.8deg);
-o-transform: rotate(-127.8deg);
-ms-transform: rotate(-127.8deg);
transform: rotate(-127.8deg);
background-color: #e45e16;
}

input[value="30"] ~ .circle-fill {
-moz-transform: rotate(-126deg);
-webkit-transform: rotate(-126deg);
-o-transform: rotate(-126deg);
-ms-transform: rotate(-126deg);
transform: rotate(-126deg);
background-color: #e46015;
}

input[value="31"] ~ .circle-fill {
-moz-transform: rotate(-124.2deg);
-webkit-transform: rotate(-124.2deg);
-o-transform: rotate(-124.2deg);
-ms-transform: rotate(-124.2deg);
transform: rotate(-124.2deg);
background-color: #e56215;
}

input[value="32"] ~ .circle-fill {
-moz-transform: rotate(-122.4deg);
-webkit-transform: rotate(-122.4deg);
-o-transform: rotate(-122.4deg);
-ms-transform: rotate(-122.4deg);
transform: rotate(-122.4deg);
background-color: #e66514;
}

input[value="33"] ~ .circle-fill {
-moz-transform: rotate(-120.6deg);
-webkit-transform: rotate(-120.6deg);
-o-transform: rotate(-120.6deg);
-ms-transform: rotate(-120.6deg);
transform: rotate(-120.6deg);
background-color: #e66713;
}

input[value="34"] ~ .circle-fill {
-moz-transform: rotate(-118.8deg);
-webkit-transform: rotate(-118.8deg);
-o-transform: rotate(-118.8deg);
-ms-transform: rotate(-118.8deg);
transform: rotate(-118.8deg);
background-color: #e76912;
}

input[value="35"] ~ .circle-fill {
-moz-transform: rotate(-117deg);
-webkit-transform: rotate(-117deg);
-o-transform: rotate(-117deg);
-ms-transform: rotate(-117deg);
transform: rotate(-117deg);
background-color: #e76b11;
}

input[value="36"] ~ .circle-fill {
-moz-transform: rotate(-115.2deg);
-webkit-transform: rotate(-115.2deg);
-o-transform: rotate(-115.2deg);
-ms-transform: rotate(-115.2deg);
transform: rotate(-115.2deg);
background-color: #e86d10;
}

input[value="37"] ~ .circle-fill {
-moz-transform: rotate(-113.4deg);
-webkit-transform: rotate(-113.4deg);
-o-transform: rotate(-113.4deg);
-ms-transform: rotate(-113.4deg);
transform: rotate(-113.4deg);
background-color: #e86f10;
}

input[value="38"] ~ .circle-fill {
-moz-transform: rotate(-111.6deg);
-webkit-transform: rotate(-111.6deg);
-o-transform: rotate(-111.6deg);
-ms-transform: rotate(-111.6deg);
transform: rotate(-111.6deg);
background-color: #e9710f;
}

input[value="39"] ~ .circle-fill {
-moz-transform: rotate(-109.8deg);
-webkit-transform: rotate(-109.8deg);
-o-transform: rotate(-109.8deg);
-ms-transform: rotate(-109.8deg);
transform: rotate(-109.8deg);
background-color: #ea730e;
}

input[value="40"] ~ .circle-fill {
-moz-transform: rotate(-108deg);
-webkit-transform: rotate(-108deg);
-o-transform: rotate(-108deg);
-ms-transform: rotate(-108deg);
transform: rotate(-108deg);
background-color: #ea750d;
}

input[value="41"] ~ .circle-fill {
-moz-transform: rotate(-106.2deg);
-webkit-transform: rotate(-106.2deg);
-o-transform: rotate(-106.2deg);
-ms-transform: rotate(-106.2deg);
transform: rotate(-106.2deg);
background-color: #eb770c;
}

input[value="42"] ~ .circle-fill {
-moz-transform: rotate(-104.4deg);
-webkit-transform: rotate(-104.4deg);
-o-transform: rotate(-104.4deg);
-ms-transform: rotate(-104.4deg);
transform: rotate(-104.4deg);
background-color: #eb790c;
}

input[value="43"] ~ .circle-fill {
-moz-transform: rotate(-102.6deg);
-webkit-transform: rotate(-102.6deg);
-o-transform: rotate(-102.6deg);
-ms-transform: rotate(-102.6deg);
transform: rotate(-102.6deg);
background-color: #ec7b0b;
}

input[value="44"] ~ .circle-fill {
-moz-transform: rotate(-100.8deg);
-webkit-transform: rotate(-100.8deg);
-o-transform: rotate(-100.8deg);
-ms-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
background-color: #ed7e0a;
}

input[value="45"] ~ .circle-fill {
-moz-transform: rotate(-99deg);
-webkit-transform: rotate(-99deg);
-o-transform: rotate(-99deg);
-ms-transform: rotate(-99deg);
transform: rotate(-99deg);
background-color: #ed8009;
}

input[value="46"] ~ .circle-fill {
-moz-transform: rotate(-97.2deg);
-webkit-transform: rotate(-97.2deg);
-o-transform: rotate(-97.2deg);
-ms-transform: rotate(-97.2deg);
transform: rotate(-97.2deg);
background-color: #ee8208;
}

input[value="47"] ~ .circle-fill {
-moz-transform: rotate(-95.4deg);
-webkit-transform: rotate(-95.4deg);
-o-transform: rotate(-95.4deg);
-ms-transform: rotate(-95.4deg);
transform: rotate(-95.4deg);
background-color: #ee8407;
}

input[value="48"] ~ .circle-fill {
-moz-transform: rotate(-93.6deg);
-webkit-transform: rotate(-93.6deg);
-o-transform: rotate(-93.6deg);
-ms-transform: rotate(-93.6deg);
transform: rotate(-93.6deg);
background-color: #ef8607;
}

input[value="49"] ~ .circle-fill {
-moz-transform: rotate(-91.8deg);
-webkit-transform: rotate(-91.8deg);
-o-transform: rotate(-91.8deg);
-ms-transform: rotate(-91.8deg);
transform: rotate(-91.8deg);
background-color: #ef8806;
}

input[value="50"] ~ .circle-fill {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: #f08a05;
}

input[value="51"] ~ .circle-fill {
-moz-transform: rotate(-88.2deg);
-webkit-transform: rotate(-88.2deg);
-o-transform: rotate(-88.2deg);
-ms-transform: rotate(-88.2deg);
transform: rotate(-88.2deg);
background-color: #ec8b06;
}

input[value="52"] ~ .circle-fill {
-moz-transform: rotate(-86.4deg);
-webkit-transform: rotate(-86.4deg);
-o-transform: rotate(-86.4deg);
-ms-transform: rotate(-86.4deg);
transform: rotate(-86.4deg);
background-color: #e98c07;
}

input[value="53"] ~ .circle-fill {
-moz-transform: rotate(-84.6deg);
-webkit-transform: rotate(-84.6deg);
-o-transform: rotate(-84.6deg);
-ms-transform: rotate(-84.6deg);
transform: rotate(-84.6deg);
background-color: #e58d08;
}

input[value="54"] ~ .circle-fill {
-moz-transform: rotate(-82.8deg);
-webkit-transform: rotate(-82.8deg);
-o-transform: rotate(-82.8deg);
-ms-transform: rotate(-82.8deg);
transform: rotate(-82.8deg);
background-color: #e18e09;
}

input[value="55"] ~ .circle-fill {
-moz-transform: rotate(-81deg);
-webkit-transform: rotate(-81deg);
-o-transform: rotate(-81deg);
-ms-transform: rotate(-81deg);
transform: rotate(-81deg);
background-color: #de8f0a;
}

input[value="56"] ~ .circle-fill {
-moz-transform: rotate(-79.2deg);
-webkit-transform: rotate(-79.2deg);
-o-transform: rotate(-79.2deg);
-ms-transform: rotate(-79.2deg);
transform: rotate(-79.2deg);
background-color: #da8f0b;
}

input[value="57"] ~ .circle-fill {
-moz-transform: rotate(-77.4deg);
-webkit-transform: rotate(-77.4deg);
-o-transform: rotate(-77.4deg);
-ms-transform: rotate(-77.4deg);
transform: rotate(-77.4deg);
background-color: #d6900c;
}

input[value="58"] ~ .circle-fill {
-moz-transform: rotate(-75.6deg);
-webkit-transform: rotate(-75.6deg);
-o-transform: rotate(-75.6deg);
-ms-transform: rotate(-75.6deg);
transform: rotate(-75.6deg);
background-color: #d2910d;
}

input[value="59"] ~ .circle-fill {
-moz-transform: rotate(-73.8deg);
-webkit-transform: rotate(-73.8deg);
-o-transform: rotate(-73.8deg);
-ms-transform: rotate(-73.8deg);
transform: rotate(-73.8deg);
background-color: #cf920e;
}

input[value="60"] ~ .circle-fill {
-moz-transform: rotate(-72deg);
-webkit-transform: rotate(-72deg);
-o-transform: rotate(-72deg);
-ms-transform: rotate(-72deg);
transform: rotate(-72deg);
background-color: #cb930f;
}

input[value="61"] ~ .circle-fill {
-moz-transform: rotate(-70.2deg);
-webkit-transform: rotate(-70.2deg);
-o-transform: rotate(-70.2deg);
-ms-transform: rotate(-70.2deg);
transform: rotate(-70.2deg);
background-color: #c79410;
}

input[value="62"] ~ .circle-fill {
-moz-transform: rotate(-68.4deg);
-webkit-transform: rotate(-68.4deg);
-o-transform: rotate(-68.4deg);
-ms-transform: rotate(-68.4deg);
transform: rotate(-68.4deg);
background-color: #c49511;
}

input[value="63"] ~ .circle-fill {
-moz-transform: rotate(-66.6deg);
-webkit-transform: rotate(-66.6deg);
-o-transform: rotate(-66.6deg);
-ms-transform: rotate(-66.6deg);
transform: rotate(-66.6deg);
background-color: #c09612;
}

input[value="64"] ~ .circle-fill {
-moz-transform: rotate(-64.8deg);
-webkit-transform: rotate(-64.8deg);
-o-transform: rotate(-64.8deg);
-ms-transform: rotate(-64.8deg);
transform: rotate(-64.8deg);
background-color: #bc9713;
}

input[value="65"] ~ .circle-fill {
-moz-transform: rotate(-63deg);
-webkit-transform: rotate(-63deg);
-o-transform: rotate(-63deg);
-ms-transform: rotate(-63deg);
transform: rotate(-63deg);
background-color: #b99814;
}

input[value="66"] ~ .circle-fill {
-moz-transform: rotate(-61.2deg);
-webkit-transform: rotate(-61.2deg);
-o-transform: rotate(-61.2deg);
-ms-transform: rotate(-61.2deg);
transform: rotate(-61.2deg);
background-color: #b59815;
}

input[value="67"] ~ .circle-fill {
-moz-transform: rotate(-59.4deg);
-webkit-transform: rotate(-59.4deg);
-o-transform: rotate(-59.4deg);
-ms-transform: rotate(-59.4deg);
transform: rotate(-59.4deg);
background-color: #b19916;
}

input[value="68"] ~ .circle-fill {
-moz-transform: rotate(-57.6deg);
-webkit-transform: rotate(-57.6deg);
-o-transform: rotate(-57.6deg);
-ms-transform: rotate(-57.6deg);
transform: rotate(-57.6deg);
background-color: #ad9a17;
}

input[value="69"] ~ .circle-fill {
-moz-transform: rotate(-55.8deg);
-webkit-transform: rotate(-55.8deg);
-o-transform: rotate(-55.8deg);
-ms-transform: rotate(-55.8deg);
transform: rotate(-55.8deg);
background-color: #aa9b18;
}

input[value="70"] ~ .circle-fill {
-moz-transform: rotate(-54deg);
-webkit-transform: rotate(-54deg);
-o-transform: rotate(-54deg);
-ms-transform: rotate(-54deg);
transform: rotate(-54deg);
background-color: #a69c19;
}

input[value="71"] ~ .circle-fill {
-moz-transform: rotate(-52.2deg);
-webkit-transform: rotate(-52.2deg);
-o-transform: rotate(-52.2deg);
-ms-transform: rotate(-52.2deg);
transform: rotate(-52.2deg);
background-color: #a29d1a;
}

input[value="72"] ~ .circle-fill {
-moz-transform: rotate(-50.4deg);
-webkit-transform: rotate(-50.4deg);
-o-transform: rotate(-50.4deg);
-ms-transform: rotate(-50.4deg);
transform: rotate(-50.4deg);
background-color: #9f9e1b;
}

input[value="73"] ~ .circle-fill {
-moz-transform: rotate(-48.6deg);
-webkit-transform: rotate(-48.6deg);
-o-transform: rotate(-48.6deg);
-ms-transform: rotate(-48.6deg);
transform: rotate(-48.6deg);
background-color: #9b9f1c;
}

input[value="74"] ~ .circle-fill {
-moz-transform: rotate(-46.8deg);
-webkit-transform: rotate(-46.8deg);
-o-transform: rotate(-46.8deg);
-ms-transform: rotate(-46.8deg);
transform: rotate(-46.8deg);
background-color: #97a01d;
}

input[value="75"] ~ .circle-fill {
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #94a11e;
}

input[value="76"] ~ .circle-fill {
-moz-transform: rotate(-43.2deg);
-webkit-transform: rotate(-43.2deg);
-o-transform: rotate(-43.2deg);
-ms-transform: rotate(-43.2deg);
transform: rotate(-43.2deg);
background-color: #90a11f;
}

input[value="77"] ~ .circle-fill {
-moz-transform: rotate(-41.4deg);
-webkit-transform: rotate(-41.4deg);
-o-transform: rotate(-41.4deg);
-ms-transform: rotate(-41.4deg);
transform: rotate(-41.4deg);
background-color: #8ca220;
}

input[value="78"] ~ .circle-fill {
-moz-transform: rotate(-39.6deg);
-webkit-transform: rotate(-39.6deg);
-o-transform: rotate(-39.6deg);
-ms-transform: rotate(-39.6deg);
transform: rotate(-39.6deg);
background-color: #88a321;
}

input[value="79"] ~ .circle-fill {
-moz-transform: rotate(-37.8deg);
-webkit-transform: rotate(-37.8deg);
-o-transform: rotate(-37.8deg);
-ms-transform: rotate(-37.8deg);
transform: rotate(-37.8deg);
background-color: #85a422;
}

input[value="80"] ~ .circle-fill {
-moz-transform: rotate(-36deg);
-webkit-transform: rotate(-36deg);
-o-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
transform: rotate(-36deg);
background-color: #81a523;
}

input[value="81"] ~ .circle-fill {
-moz-transform: rotate(-34.2deg);
-webkit-transform: rotate(-34.2deg);
-o-transform: rotate(-34.2deg);
-ms-transform: rotate(-34.2deg);
transform: rotate(-34.2deg);
background-color: #7da624;
}

input[value="82"] ~ .circle-fill {
-moz-transform: rotate(-32.4deg);
-webkit-transform: rotate(-32.4deg);
-o-transform: rotate(-32.4deg);
-ms-transform: rotate(-32.4deg);
transform: rotate(-32.4deg);
background-color: #7aa725;
}

input[value="83"] ~ .circle-fill {
-moz-transform: rotate(-30.6deg);
-webkit-transform: rotate(-30.6deg);
-o-transform: rotate(-30.6deg);
-ms-transform: rotate(-30.6deg);
transform: rotate(-30.6deg);
background-color: #76a826;
}

input[value="84"] ~ .circle-fill {
-moz-transform: rotate(-28.8deg);
-webkit-transform: rotate(-28.8deg);
-o-transform: rotate(-28.8deg);
-ms-transform: rotate(-28.8deg);
transform: rotate(-28.8deg);
background-color: #72a927;
}

input[value="85"] ~ .circle-fill {
-moz-transform: rotate(-27deg);
-webkit-transform: rotate(-27deg);
-o-transform: rotate(-27deg);
-ms-transform: rotate(-27deg);
transform: rotate(-27deg);
background-color: #6faa28;
}

input[value="86"] ~ .circle-fill {
-moz-transform: rotate(-25.2deg);
-webkit-transform: rotate(-25.2deg);
-o-transform: rotate(-25.2deg);
-ms-transform: rotate(-25.2deg);
transform: rotate(-25.2deg);
background-color: #6baa29;
}

input[value="87"] ~ .circle-fill {
-moz-transform: rotate(-23.4deg);
-webkit-transform: rotate(-23.4deg);
-o-transform: rotate(-23.4deg);
-ms-transform: rotate(-23.4deg);
transform: rotate(-23.4deg);
background-color: #67ab2a;
}

input[value="88"] ~ .circle-fill {
-moz-transform: rotate(-21.6deg);
-webkit-transform: rotate(-21.6deg);
-o-transform: rotate(-21.6deg);
-ms-transform: rotate(-21.6deg);
transform: rotate(-21.6deg);
background-color: #63ac2b;
}

input[value="89"] ~ .circle-fill {
-moz-transform: rotate(-19.8deg);
-webkit-transform: rotate(-19.8deg);
-o-transform: rotate(-19.8deg);
-ms-transform: rotate(-19.8deg);
transform: rotate(-19.8deg);
background-color: #60ad2c;
}

input[value="90"] ~ .circle-fill {
-moz-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg);
background-color: #5cae2d;
}

input[value="91"] ~ .circle-fill {
-moz-transform: rotate(-16.2deg);
-webkit-transform: rotate(-16.2deg);
-o-transform: rotate(-16.2deg);
-ms-transform: rotate(-16.2deg);
transform: rotate(-16.2deg);
background-color: #58af2e;
}

input[value="92"] ~ .circle-fill {
-moz-transform: rotate(-14.4deg);
-webkit-transform: rotate(-14.4deg);
-o-transform: rotate(-14.4deg);
-ms-transform: rotate(-14.4deg);
transform: rotate(-14.4deg);
background-color: #55b02f;
}

input[value="93"] ~ .circle-fill {
-moz-transform: rotate(-12.6deg);
-webkit-transform: rotate(-12.6deg);
-o-transform: rotate(-12.6deg);
-ms-transform: rotate(-12.6deg);
transform: rotate(-12.6deg);
background-color: #51b130;
}

input[value="94"] ~ .circle-fill {
-moz-transform: rotate(-10.8deg);
-webkit-transform: rotate(-10.8deg);
-o-transform: rotate(-10.8deg);
-ms-transform: rotate(-10.8deg);
transform: rotate(-10.8deg);
background-color: #4db231;
}

input[value="95"] ~ .circle-fill {
-moz-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
transform: rotate(-9deg);
background-color: #4ab332;
}

input[value="96"] ~ .circle-fill {
-moz-transform: rotate(-7.2deg);
-webkit-transform: rotate(-7.2deg);
-o-transform: rotate(-7.2deg);
-ms-transform: rotate(-7.2deg);
transform: rotate(-7.2deg);
background-color: #46b333;
}

input[value="97"] ~ .circle-fill {
-moz-transform: rotate(-5.4deg);
-webkit-transform: rotate(-5.4deg);
-o-transform: rotate(-5.4deg);
-ms-transform: rotate(-5.4deg);
transform: rotate(-5.4deg);
background-color: #42b434;
}

input[value="98"] ~ .circle-fill {
-moz-transform: rotate(-3.6deg);
-webkit-transform: rotate(-3.6deg);
-o-transform: rotate(-3.6deg);
-ms-transform: rotate(-3.6deg);
transform: rotate(-3.6deg);
background-color: #3eb535;
}

input[value="98"] ~ .circle-fill ~ .value {
color: #3eb535;
}

input[value="99"] ~ .circle-fill {
-moz-transform: rotate(-1.8deg);
-webkit-transform: rotate(-1.8deg);
-o-transform: rotate(-1.8deg);
-ms-transform: rotate(-1.8deg);
transform: rotate(-1.8deg);
background-color: #3bb636;
}

input[value="100"] ~ .circle-fill {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
background-color: #37b737;
}

.device-accordion-sec .card {
border: 0;
border-radius: 0;
}

.device-accordion-sec .card-header {
padding: 0px 20px;
}

.device-accordion-sec .card-body {
padding: 0;
}

.device-detail-value {
padding-bottom: 30px;
}

.device-detail-list {
list-style: none;
margin: 0;
padding: 0;
}

.device-detail-list li {
display: inline-block;
margin-left: 10px;
margin-top: 30px;
width: 45%;
}

.device-detail-list li .d-d-l-item {
border: 1px solid transparent;
border-radius: 2px;
position: relative;
}

.device-detail-list li .d-d-l-item .gauge-bg {
width: 55px;
height: 55px;
background: transparent;
border-radius: 4px;
padding-top: 15px;
position: absolute;
top: -10px;
left: 10px;
border: 1px solid transparent;
box-shadow: 0 3px 30px rgba(0, 0, 0, .1), 0 3px 20px rgba(0, 0, 0, .1);
}

.device-detail-list li .d-d-l-item .gauge-data {
padding-left: 75px;
}

.device-detail-list li .d-d-l-item .gauge-data h3 {
font-size: 14px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 0;
}

.device-detail-list li .d-d-l-item .gauge-data p {
font-size: 10px;
}

.device-accordion-sec .card-header .btn-link {
color: #212121;
padding: 6px 20px;
font-size: 12px;
display: block;
width: 100%;
text-align: left;
font-weight: 600;
border-radius: 0;
line-height: 24px;
}

.device-accordion-sec .card-header .btn-link:focus {
outline-style: none;
box-shadow: none;
}

.card-header .btn-link.collapsed {
background: rgba(0, 0, 0, 0.03)
}

.card-header .btn-link {

}

.device-accordion-sec .card-header .btn-link:hover,
.device-accordion-sec .card-header .btn-link:focus {
text-decoration: none;
}

.device-accordion-sec .card-header .btn-link i {
float: right;
}

.device-accordion-sec .card-header {
padding: 0;
/* border-top: 1px solid rgba(0, 0, 0, 0.125);
margin-top: -1px; */
border-radius: 0;
border-bottom: none;
}

.device-accordion-sec .card-header .btn-link i {
float: right;
}

.device-detail-gauge .master-main {
width: 100%;
height: auto;
overflow: hidden;
border-radius: 4px;
position: relative;
box-shadow: none;
}

.device-detail-gauge .master-main .master-main-head {
padding: 10px 20px;
}

.device-detail-gauge .master-main .master-main-foot {
padding: 10px 20px;
background: transparent;
border-top: 1px solid #efefef;
}

.device-detail-gauge .master-sec .btn-primary {
border-radius: 30px;
font-size: 14px;
box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}

.device-list.device-list-static li a:hover {
background: transparent;
cursor: default;
}

.gauge-main-item {
width: 40px;
height: 20px;
margin: 0 auto;
}

.gauge {
position: relative;
width: 40px;
height: 20px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 4px solid #212121;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.pointer {
position: relative;
top: 8%;
left: 38%;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 13px solid #212121;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 35%;
transform-origin: center bottom;
transform: rotate(-100deg);
}

.animate {
-webkit-transition-duration: 1.5s;
-webkit-transition-property: 0 opacity;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
-moz-transition-property: 0 opacity;
-o-transition-property: 0 opacity;
transition-property: 0 opacity;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}

@
keyframes rotation1 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-75deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation2 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-50deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation3 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-25deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation4 {from { transform:rotate(-100deg);

}

to {
transform: rotate(0deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation5 {from { transform:rotate(-100deg);

}

to {
transform: rotate(25deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation6 {from { transform:rotate(-100deg);

}

to {
transform: rotate(50deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation7 {from { transform:rotate(-100deg);

}

to {
transform: rotate(75deg);
border-bottom-color: #212121;
}

}
@
keyframes rotation8 {from { transform:rotate(-100deg);

}

to {
transform: rotate(100deg);
border-bottom-color: #212121;
}

}
.autoAnimation1 {
animation: rotation1 1500ms 1s forwards;
-webkit-animation: rotation1 1500ms 1s forwards;
}

.autoAnimation2 {
animation: rotation2 1500ms 1s forwards;
-webkit-animation: rotation2 1500ms 1s forwards;
}

.autoAnimation3 {
animation: rotation3 1500ms 1s forwards;
-webkit-animation: rotation3 1500ms 1s forwards;
}

.autoAnimation4 {
animation: rotation4 1500ms 1s forwards;
-webkit-animation: rotation4 1500ms 1s forwards;
}

.autoAnimation5 {
animation: rotation5 1500ms 1s forwards;
-webkit-animation: rotation5 1500ms 1s forwards;
}

.autoAnimation6 {
animation: rotation6 1500ms 1s forwards;
-webkit-animation: rotation6 1500ms 1s forwards;
}

.autoAnimation7 {
animation: rotation7 1500ms 1s forwards;
-webkit-animation: rotation7 1500ms 1s forwards;
}

.autoAnimation8 {
animation: rotation8 1500ms 1s forwards;
-webkit-animation: rotation8 1500ms 1s forwards;
}

/*
.dim-set-sec {
    padding: 20px 20px 0;
}
*/
.dim-set-sec h2 {
font-size: 14px;
color: #212121;
}

.dim-set-list {
list-style: none;
padding: 0;
margin: 0;
}

.dim-set-list li {
display: block;
}

.dim-set-list .dim-set-item {
width: calc(100% - 60px);
float: left;
}

.dim-set-list .dim-set-item.dim-set-validity {
width: 100%;
}

.dim-set-list .dim-set-item .form-group {
margin-bottom: 0;
}

.dim-set-list .dim-set-item .form-group .form-control {
color: #212121;
background-color: #fff;
border: 1px solid #DEDEDE;
margin-bottom: 20px;
}

.btnSync {
font-size: 12px;
height: 30px;
padding: 1px 10px;
}

.btnCancel {
font-size: 12px;
height: 30px;
padding: 1px 10px;
}

.btnAdd, .btnDelete {
font-size: 14px;
height: 30px;
line-height: 26px;
padding: 2px;
}

.btnAdd:hover, .btnDelete:hover {
color: #fff !important;
background-color: #1f3559 !important;
border-color: #1f3559 !important;
}

.btnAdd:focus, .btnDelete:focus {
outline: none !important;
box-shadow: none;
}

.form-group {
margin-bottom: 10px;
}

.form-control {
font-size: 12px;
}

.form-control:focus {
outline: 0;
}

.attrTable select {
width: 80px;
margin-right: 15px;
}

.btnDelete .material-icons {
margin-top: -15px;
}

.collapse-trigger {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 32px;
text-align: center;
line-height: 22px;
padding-top: 1px;
cursor: pointer;
z-index: 1;
/* border: 1px solid #03b8b0; */
}

.collapse-trigger i {
font-size: 32px;
}

.dataTable {
font-size: 12px;
}

.dataTable thead th, .table thead th {
font-weight: 700;
font-size: 12px;
/* text-transform: uppercase; */
color: #212121;
}

.dataTable tbody tr:nth-of-type(odd), .table tbody tr:nth-of-type(odd) {
background-color: #f5f5f5;
}

.dataTable td, .dataTable th, .table td, .table th {
padding: 5px;
vertical-align: middle;
border-top: 1px solid #e1e8ee;
}

.table td {
font-size: 9px;
}

.history-table {
width: 100%;
overflow: auto;
padding: 20px;
}

.dataTables_wrapper .row+.row+.row {
height: auto;
}

.filter-input-sec.history-input-sec .filtet-text-sec {
width: 100%;
}

.page-link {
color: #1f3559;
}

.chart-sec {
padding: 0 50px;
overflow: hidden;
}

.left-panel .left-panel-head .btn-filter {
font-size: 14px;
vertical-align: middle;
padding: 3px 10px;
position: absolute;
right: 70px;
top: 10px;
}

.left-panel .left-panel-head .btn-filter i, .left-panel .left-panel-head .btn-filter span
{
vertical-align: middle;
}

.left-panel .left-panel-head .btn-filter:hover, .left-panel .left-panel-head .btn-filter:focus
{
color: #03B8B0;
background-color: #fff;
border-color: #fff;
outline: none;
box-shadow: none;
}

.filter-sec {
position: fixed;
background: #fff;
z-index: 999;
width: 400px;
height: calc(100vh - 45px);
top: 45px;
right: -400px;
transition: all .5s ease;
-webkit-box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.38);
box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.38);
}

.filter-sec.filterSlide {
right: 0;
}

.filter-sec .filter-sec-head h2 {
float: left;
font-size: 18px;
margin: 4px 0 0;
}

.filter-sec .filter-sec-head .close-btn {
float: right;
font-size: 18px;
color: #fff;
position: relative;
top: 0px;
}

.filter-sec .filter-sec-body {
height: calc(100% - 111px);
overflow-y: auto;
position: relative;
}

.filter-sec.filter-sec-alarms .filter-sec-body {
padding-top: 40px;
}

.filter-sec .filter-sec-body .filter-reset {
position: absolute;
right: 10px;
top: 10px;
color: #757575;
font-size: 14px;
}

.filter-sec .filter-sec-foot {
padding: 10px 20px;
border-top: 1px solid #efefef;
background: #efefef;
}

.filter-item {
position: relative;
border-bottom: 1px solid #efefef;
padding-bottom: 10px;
}

.filter-item .filter-item-head {
padding: 0 10px;
cursor: pointer;
}

.filter-item .filter-item-head h4 {
font-size: 14px;
color: #212121;
float: left;
margin: 15px 0 10px;
}

.filter-item .filter-item-head .filter-accordion {
color: #757575;
float: right;
margin-top: 10px;
}

.filter-item .filter-item-head.filterCollapse .filter-accordion .fa-angle-down:before
{
content: "\f106";
}

.filter-item .filter-item-head.filterCollapse .filter-accordion .fa-angle-up:before
{
content: "\f107";
}

.filter-list {
list-style: none;
padding: 0;
margin: 0;
}

.filter-list li {
padding: 5px 20px;
}

/* The container */
.chkContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 0;
cursor: pointer;
font-size: 12px;
color: #757575;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default checkbox */
.chkContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 1px;
left: 0;
height: 16px;
width: 16px;
border: 1px solid #afafaf;
}

/* On mouse-over, add a grey background color */
.chkContainer:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkContainer input:checked ~ .checkmark {
background-color: #afafaf;
border-color: #afafaf;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.chkContainer input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.chkContainer .checkmark:after {
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

.main-landing-page {
padding: 20px 20px 0;
}

.main-landing-page .landing-item-trigger {
display: block;
}

.main-landing-page .landing-item-trigger.main-placeholder {
cursor: default;
}

.main-landing-page .landing-item-trigger:hover {
text-decoration: none;
}

.main-landing-page .landing-item {
position: relative;
padding: 20px;
height: 230px;
color: #fff;
margin-bottom: 20px;
}

.main-landing-page .landing-item .main-placeholder-content {
display: none;
}

.main-landing-page .main-placeholder .landing-item, .main-landing-page .landing-item-trigger.active .landing-item
{
height: 480px;
}

.main-landing-page .main-placeholder .landing-item .main-placeholder-content
{
display: block;
}

.main-landing-page .main-placeholder.active .landing-item i {
position: absolute;
right: 10px;
top: 10px;
font-size: 192px;
width: 192px;
opacity: .1;
}

.main-landing-page .main-placeholder.active .landing-item>p {
display: none;
}

.main-landing-page .landing-item h2 {
font-size: 24px;
}

.main-landing-page .landing-item p {
font-size: 12px;
}

.main-landing-page .landing-item i {
font-size: 96px;
float: right;
opacity: .6;
width: 96px;
}

.main-landing-page .main-placeholder .landing-item i {
position: absolute;
right: 20px;
bottom: 20px;
}

.main-landing-page .landing-item.landing-item-admin p {
width: 323px;
}

.main-landing-page .landing-item.landing-item-admin i {
font-size: 192px;
width: 192px;
position: absolute;
bottom: 0;
right: 0;
}

.dashboard-trigger-sec {
position: absolute;
right: -30px;
top: 50%;
margin-top: -103px;
z-index: 2;
}

.dashboard-trigger {
writing-mode: vertical-rl;
text-orientation: sideways;
border-radius: 0 4px 4px 0;
color: #fff;
padding: 10px 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, .1), 0 1px 5px rgba(0, 0, 0, .1);
display: block;
cursor: pointer;
margin-top: 10px;
}

.device-accordion-sec .card.active>.card-header {
background-color: #d8f4f2;
}

.mob-showing-sec {
padding: 0 15px;
background: #03B8B0;
color: #fff;
font-size: 14px;
height: 34px;
position: relative;
display: none;
z-index: 3;
}

.mob-showing-sec .mob-filter-trigger {
display: inline-block;
padding: 5px 20px 5px 0;
color: #fff;
text-decoration: underline;
}

.mob-filter-close {
position: absolute;
right: 20px;
top: 10px;
color: #212121;
border: 1px solid #212121;
height: 24px;
width: 24px;
border-radius: 50%;
text-align: center;
padding-top: 2px;
display: none;
}

.mob-filter-close i {
font-size: 18px;
}

.left-panel.left-panel-collapse .bg-overlay {
display: none !important;
}

.main-landing-page .landing-item.full-screen {
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
left: 0;
top: 64px;
}

.more-dropdown {
top: 3px;
}

.more-dropdown .dropdown-toggle::after {
display: none;
}

.more-dropdown .btn {
padding: 0px 5px;
border: 0;
background: transparent;
}

.more-dropdown .btn:focus {
outline: none;
box-shadow: none;
}

.more-dropdown .dropdown-item {
cursor: pointer;
}

.confi-side-new {
padding: 20px;
}

#ConfiSide .confi-side-new {
padding: 10px 20px 0px;
}

#ConfiSide .confi-side-new .form-group {
margin-bottom: 0
}

#ConfiSide .confi-side-new:last-child {
padding-bottom: 20px
}

.confi-head {
width: 100%;
padding: 10px 20px;
background-color: #efefef;
}

.confi-head .back-trigger-sec a {
display: inline-block;
font-size: 16px;
color: #03B8B0;
}

.confi-head .back-trigger-sec a:hover {
text-decoration: none;
}

.confi-head .back-trigger-sec a i, .confi-head .back-trigger-sec a span
{
vertical-align: middle;
}

.confi-head .back-trigger-sec a span {
position: relative;
left: -5px;
}

.confi-head h1 {
font-size: 24px;
margin-bottom: 0;
margin-top: 5px;
}

.confi-head .btn-primary, .confi-head .btn-primary:focus, .confi-head .btn-primary:active
{
padding: 4px 10px;
font-size: 12px;
height: 32px;
}

.confi-head .btn-primary i, .confi-head .btn-primary:focus i,
.confi-head .btn-primary:active i {
font-size: 20px
}

.confi-head .dropdown.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #009c95;
border-color: #009c95;
}

.confi-head .switch-view {
margin-right: 10px;
}

.confi-head .switch-view .btn-primary {

}

.confi-head .btn-primary:hover, .confi-head .btn-primary:focus,
.confi-head .btn-primary:active, .master-sec .btn-primary:hover,
.master-sec .btn-primary:focus, .master-sec .btn-primary:active {
background: #03B8B0;
border-color: #03B8B0;
color: #fff;
outline: none;
box-shadow: none;
}

.confi-head .switch-view .btn-primary {

}

.confi-head .switch-view .dropdown-menu {
min-width: auto;
padding: 0;
border: 0;
border-radius: 0;
}

.confi-head .switch-view .dropdown-menu .dropdown-item {
color: #1f3559;
padding: 5px 28px 5px 16px;
border-bottom: 1px solid #efefef;
cursor: pointer;
font-size: 14px;
}

.confi-head .btn-primary i, .confi-head .btn-primary span {
vertical-align: middle;
}

.confi-head .btn-primary:not (:disabled ):not (.disabled ):active,
.confi-head  .btn-primary:not (:disabled ):not (.disabled ).active,
.master-sec .btn-primary:not (:disabled ):not (.disabled ):active,
.master-sec  .btn-primary:not (:disabled ):not (.disabled ).active {
background: #03B8B0;
border-color: #03B8B0;
color: #fff;
box-shadow: none;
}

.apply-schedule-info-sec {
padding: 20px;
}

.apply-schedule-item {
background: #f4f8ff;
color: #1f3559;
border-radius: 8px;
padding: 10px 10px;
border: 1px solid #e1e8ee;
position: relative;
}

.apply-schedule-item h3, .apply-schedule-item h2 {
font-size: 14px;
max-width: 150px;
font-weight: 800;
}

.apply-schedule-item .text_editor {
font-size: 14px;
max-width: 150px;
}

.apply-schedule-item p {
font-size: 14px;
margin-bottom: 0;
}

.apply-schedule-item i {
position: absolute;
right: 10px;
top: 11px;
font-size: 32px;
}

.main-body.main-schedule {
height: calc(100vh - 235px);
padding: 0 20px 20px;
}

.schedule-table-sec, .schedule-table-sec2 {

}

.scrolledTable1 {
border: 1px solid #e1e8ee;
}

.schedule-table-sec1 {
border: none
}

.schedule-table-sec .filter-main {
background: #efefef;
box-shadow: none;
}

.schedule-table-sec .filter-main .filter-input-sec .filtet-text-sec {
width: 100%;
}

.schedule-table-sec .history-table {
padding: 0;
height: calc(100vh - 355px);
}

.all-input-sec input {
vertical-align: middle;
}

.all-input-sec label {
margin-bottom: 0;
vertical-align: middle;
margin-left: 10px;
}

.main-body.main-schedule-new {
height: calc(100vh - 125px);
padding: 20px;
}

.schedule-table-sec1 .history-table {
height: calc(100vh - 160px);
padding: 20px 0 0;
overflow: hidden;
}

.dataTables_length, .dataTables_info {
margin-left: 10px !important;
}

.dataTables_filter, .dataTables_paginate {
margin-right: 10px !important;
}

.schedule-table-sec1 .dataTables_wrapper .row+.row {
height: calc(100vh - 270px);
}

.schedule-table-sec2 .history-table {
height: calc(100vh - 200px);
padding: 20px 0 0;
overflow: hidden;
}

.schedule-table-sec2 .dataTables_wrapper .row+.row {
height: calc(100vh - 315px);
}

.schedule-table-sec2 .dataTables_wrapper .row+.row+.row {
height: auto;
}

.main-landing-page.main-configuration-page .landing-item {
position: relative;
padding: 20px;
height: 125px;
margin-bottom: 20px;
border-radius: 10px;
}

.main-landing-page.main-configuration-page .landing-item h2 {
font-size: 20px;
width: 70%;
margin-bottom: 15px;
}

.main-landing-page.main-configuration-page .landing-item i {
font-size: 48px;
float: right;
opacity: .6;
width: 48px;
position: absolute;
top: 10px;
right: 20px;
}

.form-group label {
font-size: 12px;
color: #212121;
font-weight: 600;
margin-bottom: 0
}

.form-group label span {
color: #E83D39;
}

.form-group .error-div {
color: #E83D39;
font-size: 14px;
}

#analyticsModal .modal-header {
background: #c83772;
}

#mapModal .modal-header {
background: #9837ab;
}

.customModal .modal-content {
background-color: #fff;
color: #212121;
}

.customModal .modal-dialog {
max-width: 800px;
}

.customModal .modal-header {
border-bottom: 1px solid #fff;
padding: 10px 20px;
background: #c83772;
}

.customModal .modal-header .modal-title {
color: #fff;
}

.customModal .modal-header .modal-title .material-icons {
vertical-align: middle;
width: 24px;
position: relative;
top: -2px;
}

.customModal .close {
color: #fff;
text-shadow: none;
opacity: .75;
margin-top: -9px;
}

.customModal .modal-body {
padding: 10px 20px;
}

.custom-modal-body>p {
font-size: 14px;
}

.screenshot-sec {
margin: 20px 0;
}

.screenshot-list {
list-style: none;
padding: 0;
margin: 0;
}

.screenshot-list li {
display: inline-block;
width: 32%;
margin: 0 2px;
}

.screenshot-list li .screenshot-item .screenshot-item-img img {
max-width: 100%;
}

.screenshot-list li .screenshot-item {
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
}

.screenshot-list li .screenshot-item p {
margin: 10px 0;
font-size: 14px;
}

.login-form-sec {
width: 450px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 6px 10px 16px -3px #e6e6e6;
-webkit-box-shadow: 6px 10px 16px -3px #ffaa01;
-moz-box-shadow: 6px 10px 16px -3px #e6e6e6;
-ms-box-shadow: 6px 10px 16px -3px #e6e6e6;
}

.login-form-sec .form-control {
color: #212121;
background-color: #efefef;
border: 1px solid #efefef;
}

.login-form-sec label {
color: #757575;
}

.login-form-sec P {
color: #212121;
}

.login-form-sec .btn-primary, .login-form-sec .btn-primary:hover,
.login-form-sec .btn-primary:focus, .login-form-sec .btn-primary:not (:disabled
):not (.disabled ):active {
color: #fff;
background-color: #ffaa01;
border-color: #ffaa01;
outline: none;
box-shadow: none;
}

.map-loc-sec {
width: 100%;
height: 200px;
overflow: hidden;
}

.wm-current-loc {
font-size: 14px;
color: #1f3559;
}

.wm-current-loc p {
font-size: 16px;
color: #212121;
margin-bottom: 0;
}

.wm-current-loc i {
vertical-align: middle;
}

/*responsive*/
@media only screen and (max-width : 425px) {
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate
{
text-align: left !important;
}
div.dataTables_wrapper div.dataTables_paginate {
float: left;
margin-top: 10px !important;
}
.dataTables_filter, .dataTables_paginate {
margin-left: 10px !important;
}
div.dataTables_wrapper div.dataTables_filter label {
width: 100%;
}
div.dataTables_wrapper div.dataTables_filter input {
width: calc(100% - 60px) !important;
}
.schedule-table-sec2 .dataTables_wrapper .row+.row {
height: calc(100vh - 400px) !important;
}
.schedule-table-sec1 .dataTables_wrapper .row+.row {
height: calc(100vh - 360px);
}
}

@media only screen and (max-width : 768px) {
.header .navigation-menu {
margin-left: 0;
position: absolute;
left: 0;
top: 14px;
width: 100%;
}
.header {
box-shadow: 0 1px 5px rgba(0, 0, 0, .1), 0 1px 5px rgba(0, 0, 0, .1);
}
.header .logo {
margin-left: 25px;
}
.header .navigation-menu .navbar-light .navbar-toggler {
color: #fff;
border-color: transparent;
}
.header .navigation-menu .navbar-light .navbar-toggler {
color: #fff;
border-color: transparent;
outline: none;
}
.header .navigation-menu .navbar .navbar-collapse {
background-color: #1f3559;
position: relative;
top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.header .navigation-menu .navbar-light .navbar-nav .show>.nav-link,
.header .navigation-menu .navbar-light .navbar-nav .active>.nav-link,
.header .navigation-menu .navbar-light .navbar-nav .nav-link.show,
.header .navigation-menu .navbar-light .navbar-nav .nav-link.active {
color: #fff;
border-top: 1px solid transparent;
background-color: #00CCBE;
}
.header .navigation-menu .navbar-light .navbar-nav .nav-link {
color: #fff;
padding: 10px 30px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.filter-sec {
right: -100vh;
}
.filter-sec.filterSlide {
width: 100%;
}
}

@media only screen and (max-width : 1024px) {
.left-panel {
width: 100%;
left: -100%;
}
.left-panel.left-panel-collapse {
width: 90%;
border-right: 1px solid rgba(33, 33, 33, .5);
}
.left-panel.left-panel-collapse .bg-overlay {
display: block !important;
z-index: -1;
}
.filter-input-sec .filtet-text-sec {
width: 100%;
}
.filter-input-sec .filtet-btn-sec {
float: left;
width: 100%;
margin-bottom: 20px;
}
.filter-input-sec .filtet-btn-sec .btn-primary {
width: 100%;
}
.header .dropdown-menu {
box-shadow: none;
}
.header .dropdown-menu .dropdown-item {
border-top: 1px solid rgba(255, 255, 255, 0.3);
padding: 10px 30px;
}
.filter-main {
width: 100%;
position: absolute;
top: 64px;
display: none;
}
.mob-showing-sec, .mob-filter-close {
display: block;
}
.mob-showing-sec .mob-filter-trigger:hover, .mob-showing-sec .mob-filter-trigger:focus
{
color: #fff;
}
.main-body {
height: calc(100vh - 98px);
}
.left-panel .left-panel-body {
height: calc(100vh - 148px);
}
.left-panel .left-panel-head {
background: #efefef;
color: #212121;
}
.main-landing-page .main-placeholder .landing-item {
height: 230px;
}
.main-landing-page .landing-item-trigger.activeM .landing-item {
height: auto;
}
.main-landing-page .landing-item-trigger.activeM .landing-item .main-placeholder-content
{
display: block;
}
.main-landing-page .landing-item-trigger.activeM .landing-item i,
.main-landing-page .landing-item-trigger.activeM .landing-item>p {
display: none;
}
.login-form-sec {
width: auto;
}
.screenshot-list li {
width: 100%;
margin: 0;
margin-bottom: 20px;
}
.screenshot-list li:last-child {
margin-bottom: 0;
}
.left-panel .left-panel-head .btn-filter {
color: #1f3559;
border-color: #1f3559;
}
.main-body.main-report {
height: calc(100vh - 124px);
}
.schedule-table-sec2 .history-table {
height: calc(100vh - 195px);
}
.dataTables_wrapper .row+.row+.row {
height: auto !important;
}
.apply-schedule-item {
padding: 5px 10px;
margin-bottom: 10px;
}
.apply-schedule-item.last-item {
margin-bottom: 0;
}
.apply-schedule-item h3 {
font-size: 16px;
margin-bottom: 0;
}
.apply-schedule-item i {
right: 10px;
top: 24px;
font-size: 24px;
}
.confi-head h1 {
font-size: 20px;
}
.dataTable td, .dataTable th, .table td, .table th {
padding: 10px 5px;
}
.schedule-table-sec, .schedule-table-sec1, .schedule-table-sec2 {
position: relative;
}
.schedule-table-sec .filter-main {
position: fixed;
top: 64px;
display: none;
left: 0;
}
.main-body.main-schedule {
height: calc(100vh - 385px);
}
.schedule-table-sec .filter-main .filter-input-sec .filtet-btn-sec {
display: block !important;
}
.schedule-table-sec .history-table {
height: calc(100vh - 395px);
}
.schedule-table-sec2 .dataTables_wrapper .row+.row {
height: calc(100vh - 265px);
}
}

@media only screen and (min-width : 769px) and (max-width : 1024px) {
.apply-schedule-item {
margin-bottom: 10px;
}
.apply-schedule-item.last-item {
margin-bottom: 0;
}
.header .navigation-menu {
margin-left: 25px;
}
.header .navigation-menu .navbar-light .navbar-nav .nav-link {
padding: 18px 15px;
font-size: 14px;
}
}

/*expanded dashboard*/
.shadow {
box-shadow: 0 0 6px rgba(0, 0, 0, .1) !important;
}

.mb20 {
margin-bottom: 20px;
}

.exp-dash-sec {
padding: 20px;
background-color: #F3F3F3;
}

.exp-dash-sec .confi-head {
width: 100%;
padding: 0;
margin-bottom: 10px;
background-color: transparent;
}

.power-detail-item {
border-radius: 4px;
color: #212121;
padding: 20px;
height: 115px;
margin-bottom: 30px;
background-color: #fff;
}

.voltage-power {
background-color: #FD8C00;
}

.power-detail-item.voltage-power .badge-light {
color: #FD8C00;
background-color: #fff;
}

.voltage-current {
background-color: #45A34B;
}

.power-detail-item.voltage-current .badge-light {
color: #45A34B;
background-color: #fff;
}

.voltage-wattage {
background-color: #E83D39;
}

.power-detail-item.voltage-wattage .badge-light {
color: #E83D39;
background-color: #fff;
}

.voltage-pf {
background-color: #05ADC1;
}

.power-detail-item.voltage-pf .badge-light {
color: #05ADC1;
background-color: #fff;
}

.power-detail-item .p-d-text h2 {
font-size: 24px;
}

.power-detail-item .p-d-text p {
font-size: 14px;
margin-bottom: 0;
opacity: .7;
}

.power-detail-item .p-d-text .p-d-comp {
font-size: 12px;
margin-top: 20px;
}

.power-detail-item .p-d-icon {
float: right;
margin-top: 25px;
}

.power-detail-item .p-d-text {
margin-top: 10px;
}

.power-detail-item .p-d-icon .gauge-main-exp-dash .gauge-main-item {
width: 60px;
height: 30px;
margin: 0;
}

.power-detail-item .p-d-icon .gauge-main-exp-dash .gauge-main-item .gauge
{
width: 60px;
height: 30px;
border-color: #fff;
border-width: 6px;
}

.power-detail-item .p-d-icon .gauge-main-exp-dash .gauge-main-item .gauge .pointer
{
position: relative;
top: 50%;
margin-top: -3px;
left: 50%;
margin-left: -3px;
border-bottom-color: #fff;
}

.dashboard-exp-sec {
background-color: #fff;
padding: 15px 20px 13px;
border-radius: 4px;
margin-bottom: 20px;
}

.height_b .list_led_t {
height: 34px;
}

.dashboard-exp-sec h2 {
font-size: 18px;
}

.dashboard-exp-sec .chart-style {
height: 300px;
opacity: .9;
}

.history-tab-view .nav-pills .nav-link {
border-radius: 4px 4px 0 0;
padding: 5px 50px;
color: #212121;
background-color: #efefef;
border: 1px solid #e1e8ee;
border-bottom: 0;
}

.history-tab-view .nav-pills .nav-link.active, .history-tab-view .nav-pills .show>.nav-link
{
color: #fff;
background-color: #03b8b0;
border-color: #009c95;
}

.view-chart-sec {
border: 1px solid #e1e8ee;
}

.view-chart-sec>div {
height: calc(100vh - 200px);
}

.device-schedule-sec {
padding: 20px;
}

.master-device-list h3 {
font-size: 18px;
margin-left: 10px;
}

.master-device-list .table thead th label, .master-device-list .table tbody td label
{
margin-bottom: 0;
}

.form-control.form-error {
border-color: #df0000 !important;
}

.schedule-table-sec .filter-main .form-group .form-control {
margin-bottom: 0;
}

@media only screen and (max-width : 768px) {
.history-tab-view .nav-pills .nav-link {
padding: 5px 30px;
}
}

@
keyframes rotationExp1 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-75deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp2 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-50deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp3 {from { transform:rotate(-100deg);

}

to {
transform: rotate(-25deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp4 {from { transform:rotate(-100deg);

}

to {
transform: rotate(0deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp5 {from { transform:rotate(-100deg);

}

to {
transform: rotate(25deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp6 {from { transform:rotate(-100deg);

}

to {
transform: rotate(50deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp7 {from { transform:rotate(-100deg);

}

to {
transform: rotate(75deg);
border-bottom-color: #fff;
}

}
@
keyframes rotationExp8 {from { transform:rotate(-100deg);

}

to {
transform: rotate(100deg);
border-bottom-color: #fff;
}

}
.autoAnimationExp1 {
animation: rotationExp1 1500ms 1s forwards;
-webkit-animation: rotationExp1 1500ms 1s forwards;
}

.autoAnimationExp2 {
animation: rotationExp2 1500ms 1s forwards;
-webkit-animation: rotationExp2 1500ms 1s forwards;
}

.autoAnimationExp3 {
animation: rotationExp3 1500ms 1s forwards;
-webkit-animation: rotationExp3 1500ms 1s forwards;
}

.autoAnimationExp4 {
animation: rotationExp4 1500ms 1s forwards;
-webkit-animation: rotationExp4 1500ms 1s forwards;
}

.autoAnimationExp5 {
animation: rotationExp5 1500ms 1s forwards;
-webkit-animation: rotationExp5 1500ms 1s forwards;
}

.autoAnimationExp6 {
animation: rotationExp6 1500ms 1s forwards;
-webkit-animation: rotationExp6 1500ms 1s forwards;
}

.autoAnimationExp7 {
animation: rotationExp7 1500ms 1s forwards;
-webkit-animation: rotationExp7 1500ms 1s forwards;
}

.autoAnimationExp8 {
animation: rotationExp8 1500ms 1s forwards;
-webkit-animation: rotationExp8 1500ms 1s forwards;
}

.apply-schedule-item h2 {
cursor: pointer;
}

.stage-sec {
position: absolute;
background: #fff;
left: 0;
top: 40px;
z-index: 4;
width: 100%;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
}

.stage-sec ul {
list-style: none;
padding: 0;
margin: 0;
}

.stage-sec ul li {
display: block;
}

.stage-sec ul li:hover {
background-color: #f8f9fa;
}

.stage-sec ul li>h3, .stage-sec ul li>h2 {
padding: 5px 20px;
margin-bottom: 0;
max-width: 50%;
font-size: 16px;
float: left;
}

.stage-sec ul li>h2 {
max-width: 100%;
width: 100%;
}

.apply-schedule-item .stage-sec ul li>.apply-input {
max-width: 50%;
padding: 9px 15px;
width: 50%;
float: left;
font-size: 12px;
margin-left: 0;
margin-bottom: 0;
font-weight: 400;
}

.stage-sec:before {
content: '';
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #1f3559;
position: absolute;
left: 30px;
top: -7px;
}

.app-schedule-sec .app-schedule-item {
padding-top: 15px;
}

.apply-schedule-item .apply-input:focus {
border: none;
outline: none;
box-shadow: none;
}

.apply-schedule-item .apply-input {
font-size: 14px;
max-width: 150px;
background: transparent;
border: 0;
margin-top: 0;
margin-bottom: 0.5rem;
font-family: inherit;
font-weight: 800;
line-height: 1.2;
color: inherit;
padding-left: 5px;
margin-left: -5px;
}

.apply-schedule-info-sec {
padding: 20px 0px;
}

.apply-schedule-info-sec .row {
margin: 0
}

.apply-schedule-info-sec .row>div {
padding: 0px 5px;
}

.apply-schedule-info-sec .row>div:first-child {
padding-left: 0px
}

.apply-schedule-info-sec .row>div:last-child {
padding-right: 0px
}

.power-detail-item.time-bg {
background-size: cover !important;
padding: 15px 20px;
}

.power-detail-item.dawn-bg {
background: url(../images/dawn_bg.png) 0 -16px no-repeat;
}

.power-detail-item.day-bg {
background: url(../images/day_bg.png) 0 -65px no-repeat;
}

.power-detail-item.dusk-bg {
background: url(../images/dusk_bg.png) 0 -30px no-repeat;
}

.power-detail-item.night-bg {
background: url(../images/night_bg.png) 0 -50px no-repeat;
}

.power-detail-item .p-d-icon .p-d-icon-item {
width: 48px;
height: 48px;
border-radius: 50%;
text-align: center;
padding-top: 12px;
color: #fff;
}

.sunrise-head {
margin-top: 20px;
}

.sunrise-head .sun-item h4 {
font-size: 18px;
}

.sunrise-head .sun-item p {
font-size: 14px;
opacity: .7;
margin-bottom: 0;
}

.sunrise-body {
position: relative;
top: -55px;
}

.sunrise-body ul {
margin-bottom: 0;
}

.sunrise-body ul li {
text-align: center;
width: 100%;
}

.sunrise-body ul li .sun-img {
width: 24px;
height: 24px;
display: inline-block;
margin-bottom: 10px;
}

.sunrise-body ul li .sun-img img {
max-width: 100%;
}

.sunrise-body ul li p {
font-size: 30px;
margin-bottom: 0;
font-weight: 700;
}

/* .cusDataTable thead {
    float: left;
    width: 100%;
}
.cusDataTable tbody {
    float: left;
    width: 100%;
    height: 300px;
    overflow-y: auto;
}
.cusDataTable thead tr, .cusDataTable tbody tr {
    display: flex;
}
.cusDataTable tbody tr td {
    min-width: 200px;
}
.cusDataTable thead tr th {
    min-width: 180px;
}



.appSchHeight.cusDataTable tbody {
    height: calc(100vh - 503px);
}
.appSchHeight.cusDataTable thead tr th, .appSchHeight.cusDataTable thead tr th, .appSchHeight.cusDataTable tbody tr td, .appSchHeight.cusDataTable tbody tr td {
    width: 33.333333%;
} */

/* table.dataTable thead .sorting_asc { */
/*   background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left; */
/* } */
/* table.dataTable thead .sorting_desc { */
/*   background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left; */
/* } */
/* table.dataTable thead .sorting { */
/*   background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left; */
/* } */
.custom-modal .modal-dialog {
max-width: 360px;
}

.custom-modal .modal-header {
padding: 0;
border: 0;
}

.custom-modal .modal-header .close {
position: absolute;
padding: 10px;
top: 15px;
right: 16px;
z-index: 1;
}

.custom-modal .modal-body {
padding: 10px 30px;
}

.alert-box .alert-icon {
width: 48px;
height: 48px;
border: 2px solid transparent;
border-radius: 50%;
text-align: center;
padding-top: 10px;
margin: 0 auto;
margin-top: 10px;
}

.alert-box.confirm-box .alert-icon {
border-color: #f15e5e;
color: #f15e5e;
}

.alert-box.success-box .alert-icon {
border-color: #00aa66;
color: #00aa66;
}

.alert-box.error-box .alert-icon {
border-color: #E83D39;
color: #E83D39;
}

.alert-box h3 {
font-size: 22px;
color: #212121;
margin: 10px 0;
}

.alert-box p {
color: #757575;
font-size: 14px;
}

.main-modal-control {
margin-bottom: 20px;
}

table.fixedHeader-floating.no-footer {
top: 64px !important;
}

.filter-accordion-sec .accordion-main-body {
padding: 6px 20px 0;
}

.common-table-new {
/*   overflow: auto;
height: calc(100% - 82px );  */
width: 100%;
}

#Gattop3 {
position: absolute;
display: block;
top: 45%;
color: #fff;
width: 100%;
z-index: 999;
text-align: center;
font-weight: 600;
}

#history_table td {
white-space: nowrap;
padding: 7px 10px;
}

.common-table-new .common-table-item {
padding-top: 10px;
padding-bottom: 10px;
}

.width100 {
min-width: 100px;
}

.width200 {
min-width: 150px;
}

.width250 {
min-width: 300px;
}

.common-table-new .dataTables_wrapper .dataTables_filter input,
.common-table-new .dataTables_wrapper .dataTables_length select {
color: #212121;
background-color: #fff;
border: 1px solid #DEDEDE;
border-radius: 4px;
}

.common-table-new table.dataTable.row-border tbody th, .common-table-new table.dataTable.row-border tbody td,
.common-table-new table.dataTable.display tbody th, .common-table-new table.dataTable.display tbody td
{
border-top: 1px solid #e1e8ee;
}

.common-table-new table.dataTable.display tbody tr.odd>.sorting_1,
.common-table-new table.dataTable.order-column.stripe tbody tr.odd>.sorting_1
{
background-color: transparent;
}

.common-table-new table.dataTable.display tbody tr.even>.sorting_1,
.common-table-new table.dataTable.order-column.stripe tbody tr.even>.sorting_1
{
background-color: transparent;
}

.common-table-new table.dataTable.display tbody tr:hover>.sorting_1,
.common-table-new table.dataTable.order-column.hover tbody tr:hover>.sorting_1
{
background-color: transparent;
}

.common-table-new .dataTables_wrapper .dataTables_paginate .paginate_button
{
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 3px 12px;
margin-left: -1px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333 !important;
border: 1px solid #dee2e6;
border-radius: 0;
}

.common-table-new .dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
color: white !important;
border: 1px solid #1f3559;
background: #1f3559;
}

.common-table-new .dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0;
margin-top: 10px;
}

.common-table-new .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.common-table-new .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.common-table-new .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active
{
cursor: default;
color: #666 !important;
border: 1px solid #dee2e6;
background: transparent;
box-shadow: none;
}

.common-table-new table.dataTable thead th, .common-table-new table.dataTable thead td
{
border-bottom: 1px solid #e1e8ee;
}

.common-table-new table.dataTable.no-footer {
border-bottom: 1px solid #e1e8ee;
}

.common-table-new table.dataTable tbody th, .common-table-new table.dataTable tbody td
{
padding: 2px 10px;
font-size: 11px;
border-bottom: none;
border-left: none;
}

table.dataTable thead th, table.dataTable thead td {
border-bottom: 1px solid #e1e8ee !important;
}

.device-detail-sec {
padding: 15px 20px;
color: #757575;
}

.device-detail-sec .d-d-text p {
font-size: 14px;
}

.device-detail-sec .d-d-img {
width: 72px;
height: 72px;
display: inline-block;
margin: 20px 0;
}

.device-detail-sec .d-d-img>img {
max-width: 100%;
}

.custom-breadcrumb {
float: left;
width: 100%;
}

.custom-breadcrumb .breadcrumb {
padding: 0;
margin: 0;
}

.custom-breadcrumb .breadcrumb .breadcrumb-item a {
font-size: 14px;
color: #1f3559;
}

.custom-breadcrumb .breadcrumb .breadcrumb-item.active {
color: #6c757d;
font-size: 14px;
}

.custom-breadcrumb .breadcrumb {
padding: 0;
margin: 0;
background-color: transparent;
}

.active-device-trigger {
text-align: right;
padding: 10px;
background: #e8e8e8;
}

.active-device-trigger {
text-align: right;
padding: 10px;
}

.active-device-trigger button {
color: #fff;
border: 0;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
line-height: 1.5;
cursor: pointer;
}

.device-status-main {
position: relative;
}

.device-status-main .device-status-control {
position: absolute;
top: 50%;
width: 100%;
padding: 0 10px;
}

.device-status-main .device-status-control a {
background-color: #ffffff;
width: 32px;
height: 32px;
display: inline-block;
text-align: center;
padding-top: 5px;
cursor: pointer;
}

.device-status-main .device-status-control a.prev-c {
float: left;
}

.device-status-main .device-status-control a.next-c {
float: right;
}

.dis-control {
pointer-events: none;
opacity: .5;
}

.pages-sec .filterList {
padding: 20px 10px 10px 20px;
}

.pages-sec .filterList li {
width: 25%;
padding-bottom: 10px;
}

.filter-sec .filter-sec-body .reportSec.userForm {
padding: 0;
background: #f3f4f6;
}

.filter-sec .filter-sec-body .reportSec.userForm .form-control {
background: #fff;
}

.filterContainer {
float: left;
width: 100%;
margin-top: 0;
position: static;
background: #fff;
height: calc(100vh - 185px);
}

.parentnameSec {
float: left;
width: 100%;
background: #f3f4f6;
border: 1px solid #efefef;
padding: 10px 13px 0px 18px;
}

.filterLeft {
float: left;
width: 170px;
background: #efefef;
position: static;
height: 100%;
z-index: 1;
}

.filterLeft .nav-pills {
float: left;
width: 100%;
padding: 0;
}

.filterLeft .nav-pills li {
float: left;
width: 100%;
}

.filterLeft .nav-pills li a {
color: #65666b;
font-size: 12px;
float: left;
width: 100%;
padding: 10px;
padding-left: 20px;
border-bottom: 1px solid #efefef;
position: relative;
}

.filterLeft .nav-pills li a:hover {
text-decoration: none;
}

.filterLeft .nav-pills li a.active {
background: #fff;
}

.filter-sec .filter-sec-body .tab-content {
margin-left: 170px;
position: relative;
padding: 0;
}

.filter-sec .filter-sec-body .tab-content .active {
opacity: 1;
}

.filter-sec .filter-sec-body .tab-content h5 {
font-size: 12px;
margin-bottom: 0;
color: rgba(0, 0, 0, 0.8);
margin-top: 0;
position: relative;
padding: 20px 10px 0 20px;
}

.sAllLink {
position: absolute;
right: 15px;
top: 20px;
font-size: 11px;
color: #1f75dc;
text-decoration: underline;
}

.sAllLink:hover {
text-decoration: none;
}

.filterList {
float: left;
width: 100%;
padding: 20px 10px 20px 20px;
margin: 0;
background: #fff;
}

.filterList li {
float: left;
width: 100%;
list-style: none;
padding-bottom: 5px;
}

.filterList li label {
font-size: 12px;
line-height: 16px;
color: rgb(33, 33, 33, 0.8);
cursor: pointer;
margin-bottom: 0;
}

.filterList li label .filterColor {
padding: 2px 10px;
font-size: 11px;
color: #24293C;
border-radius: 20px;
display: inline-block;
margin-left: 5px;
}

.filterList li label small {
padding: 2px 10px;
font-size: 11px;
color: #24293C;
border-radius: 20px;
display: inline-block;
margin-left: 5px;
}

.filterList li input[type="checkbox"] {
appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
display: inline-block;
border: none;
width: 15px;
height: 15px;
background: url(../images/chk-box.png) 0 0 no-repeat;
vertical-align: middle;
transition: background 0s;
margin-right: 8px;
margin-top: 1px;
float: left;
}

.filterList li input[type="checkbox"]:checked {
background: url(../images/chk-box.png) -15px 0px no-repeat;
}

.menuitemshow:before {
position: absolute;
content: "";
left: 6px;
top: 17px;
z-index: 99;
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
background: url(../images/tick_Icon.png) 0 0px no-repeat;
background-size: 12px;
}

.subfilterList {
float: left;
width: 100%;
padding: 5px 0 0 15px;
margin: 0;
}

.subfilterList li {
float: left;
width: 100%;
list-style: none;
padding-bottom: 5px;
}

.subfilterList li label {
font-size: 11px;
color: rgb(33, 33, 33, 0.8);
cursor: pointer;
margin-bottom: 0;
}

.subfilterList li input[type="checkbox"] {
appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
display: inline-block;
border: none;
width: 15px;
height: 15px;
background: url(../images/chk-box.png) 0 0 no-repeat;
vertical-align: middle;
transition: background 0s;
margin-right: 8px;
margin-top: -2px;
}

.subfilterList li input[type="checkbox"]:checked {
background: url(../images/chk-box.png) -15px 0px no-repeat;
}

.userfilter-sec.filter-sec .filter-sec-foot {
position: relative;
z-index: 9;
}
/* filter section ends here */
.form-control.error-control {
border-color: red;
}

.role-name-div {
padding: 10px 15px 0;
}

.pages-sec .multi-page .filterList {
padding-top: 10px;
}

.multi-page, .multi-zone {
width: 100%;
float: left;
}

.multi-page h2 {
margin: 0 0 0 20px;
font-size: 14px;
}

.multi-zone .filterList {
padding: 10px 10px 10px 20px;
}

.plus-btn, .plus-btn:hover, .plus-btn:focus {
color: rgba(0, 0, 0, 0.8);
}

.plus-btn i {
vertical-align: middle;
font-size: 21px;
margin-right: 5px;
}

.plus-btn span {
vertical-align: middle;
}

.filter-sec.hierarchy-sec {
width: 800px;
right: 50%;
margin-right: -375px;
top: 10%;
height: 500px;
}

.filter-sec.hierarchy-sec .dim-set-sec {
float: left;
margin-right: 10px;
}

.filter-sec.hierarchy-sec .dim-set-sec:last-child {
margin-right: 0;
}

.filter-sec.hierarchy-sec .dim-set-sec .form-control {
width: 124px;
}

.filter-sec.hierarchy-sec .dim-set-sec .form-control.active {
border-color: #03b8b0;
}

.filter-sec.hierarchy-sec .filter-sec-body {
height: calc(100% - 105px);
}

.btnAcc {
background-color: #03b8b0 !important;
border-color: #03b8b0 !important;
padding: 8px 20px;
border-radius: 30px;
}

.hierarchy-sec .hierarchy-item {
float: left;
}

.hierarchy-list-main {
list-style: none;
margin: 0;
padding: 0;
}

.hierarchy-list-main .btnAdd i.material-icons {
font-size: 20px;
}

.hierarchy-list-main li {
margin-bottom: 15px;
position: relative;
}

.hierarchy-list-main li:after {
content: '';
width: 1px;
background-color: #212121;
position: absolute;
height: 100%;
top: 0;
left: 12px;
}

.hierarchy-list-main li .btnAdd {
float: left;
position: relative;
}

.hierarchy-list-main li>.hierarchy-list-main li .btnAdd:before {
content: '';
width: 25px;
background-color: #212121;
position: absolute;
height: 1px;
top: 12px;
left: -25px;
}

.hierarchy-list-main li .btnAdd, .hierarchy-list-main li .btnDelete {
background-color: #fff !important;
position: relative;
z-index: 1;
height: 27px;
}

.hierarchy-list-main li .btnAdd:hover, .hierarchy-list-main li .btnDelete:hover
{
color: #fff !important;
background-color: #1f3559 !important;
border-color: #1f3559 !important;
}

.hierarchy-list-main li>.hierarchy-list-main {
margin-top: 10px;
margin-left: 37px;
}
/*.hierarchy-list-main li > .hierarchy-list-main:before {
    content: '';
    width: 50px;
    background-color: #fff;
    position: absolute;
    height: calc(100% - 70px);
    top: 70px;
    left: 0;
    z-index: 1;
}*/
.hierarchy-list-main li .hierarchy-input {
float: left;
position: relative;
}

.hierarchy-list-main li .hierarchy-input .form-control {
max-width: 175px;
float: left;
margin: 0 5px;
height: 26px;
}
/* .hierarchy-list-main li .hierarchy-input .form-control:first-child {
    margin: 0 5px;
} */
.hierarchy-list-main li .hierarchy-input .sublabel-link {
position: absolute;
bottom: -3px;
right: 10px;
font-size: 14px;
text-decoration: underline;
}

.hierarchy-list-main li .hierarchy-input .sublabel-link i {
vertical-align: middle;
}

.notification-sec {
position: relative;
width: 24px;
}

.notification-sec i {
font-size: 24px;
}

.notification-sec i.clr-red {
color: red;
}

.notification-sec i.clr-blue {
color: blue;
}

.notification-sec i.clr-green {
color: green;
}

.notification-sec i.clr-yellow {
color: yellow;
}

.notification-sec .badge {
background-color: red;
position: absolute;
top: -8px;
right: -11px;
border: 1px solid #fff;
}

/* -------------------------------------------------- */
.ccms_txt {
color: #2f5391;
text-decoration: underline;
font-weight: 600;
}

.ccms_head {
width: 100%;
padding: 12px;
background: #efefef;
color: #212121;
}

.ccms_head h2 {
font-size: 17px;
font-weight: 600;
display: inline-block;
margin-bottom: 0;
}

.ccms_head h2 label, .ccms_head .righttxt span {
margin-bottom: 0;
}

.ccms_head .lefttxt {
float: left;
}

.ccms_head .righttxt {
float: right;
}

.switchdetails {
border: 1px solid #e1e8ee;
}

.summary_box {
min-height: 386px;
padding: 10px;
border-right: 1px solid #e1e8ee;
}

.switchdetails.row {
margin-left: 0;
margin-right: 0;
}

.switchdetails .col-xs-12, .switchdetails .col-sm-12, .switchdetails .col-md-3,
.switchdetails .col-lg-3, .switchdetails .col-md-6 {
padding: 0;
}

.bulb img {
width: 40px;
float: left;
}

.bulb span {
float: left;
line-height: 40px;
padding-left: 10px;
}

.summary_box .labeltxt {
padding-right: 7px;
font-weight: 700;
line-height: 17px;
font-size: 13px;
}

.summary_box .row {
margin: 0 0 10px 0;
}

.summary_box input {
width: 100%;
height: 35px;
text-align: center;
font-weight: 400;
border: 1px solid #DEDEDE;
}

.locationicon {
width: 25px;
margin: 0 auto;
}

.blue_title {
width: 100%;
background: #2f5391;
padding: 7px 10px;
color: #fff;
font-weight: 600;
border-radius: 4px;
margin-bottom: 20px;
}

.twobox .ltxt {
width: 120px;
float: left;
line-height: 34px;
color: #2f5391;
font-weight: 600;
}

.switchsummarymodalclass .modal-header {
padding: 10px 20px;
background-color: #03B8B0;
color: #fff;
}

.switchsummarymodalclass .modal-header .close {
color: #fff;
opacity: 1;
}

.switchsummarymodalclass .modal-header .modal-title {
font-size: 18px;
}

.switchsummarymodalclass .modal-footer {
padding: 10px 20px;
border-top: 1px solid #efefef;
background: #efefef;
}

.switchsummarymodalclass .modal-lg {
max-width: 1100px;
}

.h_title {
color: #1f3559;
font-weight: 700;
margin-bottom: 10px;
margin-top: 10px;
font-size: 14px;
}

.scroll_table {
overflow: auto;
}

.switch_point_summary input {
width: 100%;
height: 16px;
border: none;
text-align: left;
font-weight: 600;
background-color: transparent;
}

.switch_point_summary .table {
margin-bottom: 0;
}

.switch_point_summary .table.form-group {
margin-bottom: 15px;
}

.switch_point_summary .table>thead>tr>th {
color: #545454;
background: #d8f4f2;
}

.switch_point_summary .table>tbody>tr:nth-child(2n) {
background: none;
}

.switch_point_summary .table>tbody>tr:hover {
background: none;
}

.switch_point_summary .table tr td:first-child {
width: 125px;
}

.scrolltable .row {
margin: 0;
}

.scrolltable .col-xs-12, .scrolltable .col-sm-12, .scrolltable .col-md-10,
.scrolltable .col-lg-10 {
padding-left: 0;
padding-right: 0
}

.switch_point_summary .table>thead>tr>th, .table>tbody>tr>th,
.switch_point_summary .table>tfoot>tr>th, .switch_point_summary .table>thead>tr>td,
.switch_point_summary .table>tbody>tr>td, .switch_point_summary .table>tfoot>tr>td
{
white-space: nowrap;
vertical-align: middle;
border: 1px solid #ccc;
font-size: 11px;
line-height: 15px;
}

.tableoverlay ul {
padding: 0;
list-style: none;
}

.tableoverlay ul li {
margin-bottom: 5px;
font-size: 11px;
}

.tableoverlay .table td {
font-size: 10px;
}

.tableoverlay .table thead th {
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
color: #212121;
background: #d4d4d4;
padding: 5px 10px;
}

#ui-id-1 {
max-height: 300px;
overflow: hidden;
overflow-y: auto;
}

#master-control-panel .checkmark {
display: none;
}

.bulk-upload-sec {
margin-top: 2%;
}

.bulk-form {
/* width: 400px; */
margin: 0 auto 50px;
}

.sample-files {
text-align: center;
}

.sample-files .sample-files-item {
display: inline-block;
margin-right: 10px;
}

.sample-files .sample-files-item a {
display: inline-block;
margin-right: 10px;
}

.create-hierarchy-link {
font-size: 14px;
text-decoration: underline;
}

.create-hierarchy-link i {
vertical-align: middle;
}

.confi-side-new .form-group p {
font-size: 12px;
color: #797979;
}

.confi-side-new .form-group p strong {
color: #212121;
}

.rotate-360 {
-webkit-animation: rotation 2s linear infinite;
/*  -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); */
}

@
keyframes rotation {from { transform:rotate(0deg);

}

to {
transform: rotate(359deg);
}

}
.form-toggle i {
font-size: 32px;
vertical-align: middle;
margin: 0 0px;
cursor: pointer;
}

.form-toggle i.ilcOff {
color: #ccc;
}

#device-list-panel .notification-sec {
position: absolute;
top: 15px;
right: 90px;
}

#device-list-panel .device-list li a .signal-icon {
top: 10px;
}

.hierarchy-view-sec {
overflow-x: auto;
border: 1px solid #DEDEDE;
border-radius: 0.25rem;
}

.hierarchy-view-item {
padding: 10px;
min-width: 550px;
}

.hierarchy-view-item .hierarchy-view-item-label {
background: #efefef;
margin: -10px -10px 0;
padding: 5px 10px 0;
}

.hierarchy-view-item-label label {
float: left;
margin-left: 80px;
}

.hierarchy-view-item-label label:first-child {
margin-left: 0;
}

.hierarchy-view-list-state, .hierarchy-view-list-city,
.hierarchy-view-list-ward {
margin: 0;
padding: 0;
list-style: none;
}

.hierarchy-view-list-state>li {
display: block;
}

.hierarchy-view-list-state>li .h-v-l-item input {
vertical-align: middle;
margin-right: 10px;
}

.hierarchy-view-list-state li .h-v-l-item label {
font-weight: 400;
}

.hierarchy-view-list-state>li .hierarchy-view-list-city,
.hierarchy-view-list-state>li .hierarchy-view-list-city>li .hierarchy-view-list-ward
{
margin-left: 110px;
}

/************************Rgb_device_Details *******************/
.Rgb_device_Details .d-flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
padding: 0px 5px;
}

.Rgb_device_Details .d-flex li {
max-width: 33%;
margin: 30px 5px 10px;
}

.Rgb_device_Details   .device-detail-list li .d-d-l-item .gauge-bg {
width: 35px;
height: 35px
}

.Rgb_device_Details .device-detail-list li .d-d-l-item .gauge-data {
padding-left: 50px;
}

.Rgb_device_Details .gauge {
position: relative;
width: 30px;
height: 15px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 3px solid #212121;
border-bottom: 0;
}

.Rgb_device_Details   .device-detail-list li .d-d-l-item .gauge-bg {
padding-top: 8px
}

.Rgb_device_Details   .device-detail-list li .gauge-main-item {
width: 30px;
height: 20px;
}

.Rgb_device_Details  .pointer {
top: -4px;
}

.mt-0 {
margin-top: 0
}

.clasTitleB {
font-weight: 600;
text-align: center;
}

.device-detail-list li.blueGauge .d-d-l-item .gauge-bg {
background-image: linear-gradient(to right, #2480d0, #61b5ff);
border-color: #429ae7;
}

.device-detail-list li.YellowGauge .d-d-l-item .gauge-bg {
background-image: linear-gradient(to right, #ff9900, #eccf00);
border-color: #ff9b00;
}

.device-detail-list li.YellowGauge .d-d-l-item {
border-color: #ff9b00;
}

.device-detail-list li.blueGauge .d-d-l-item {
border-color: #429ae7;
}

.Map_and_powerFactor   .color_font_list {
font-size: 45px;
color: #fff;
}

.Map_and_powerFactor .device-detail-list li .d-d-l-item .gauge-bg {
padding-top: 5px;
}

.Map_and_powerFactor  .gauge-main-item {
width: auto;
height: auto;
margin: 0 auto;
text-align: center;
}

.Map_and_powerFactor .device-detail-list li .d-d-l-item .gauge-data h3 {
font-size: 21px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 0;
height: 50px;
line-height: 43px;
}

.On_device_Section .GreenGGauge>div.d-d-l-item {
border: 1px solid #359e48;
box-shadow: 0 3px 5px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .1);
border-radius: 2px;
background-color: #fff;
position: relative;
}

.On_device_Section    li.GreenGGauge .d-d-l-item .gauge-bg {
background: #359e48;
border-color: #1b792c;
}

.Off_device_Section  li.redSGauge .d-d-l-item .gauge-bg {
background: #f57480;
border-color: #ea3747;
}

.Map_and_powerFactor  li .d-d-l-item {
border: 1px solid transparent;
border-radius: 2px;
background-color: #ffffff;
position: relative;
}

.Off_device_Section  li.redSGauge .d-d-l-item {
border: 1px solid #ea3747;
box-shadow: 0 3px 5px rgba(0, 0, 0, .1), 0 3px 5px rgba(0, 0, 0, .1);
background-color: #fff;
}

.Map_and_powerFactor   .On_device_Section h3, .Map_and_powerFactor   .On_device_Section h3,
.Map_and_powerFactor   .device-detail-list li h3 {
margin: 0px !important;
height: auto !important;
line-height: 20px !important;
padding-bottom: 10px;
color: #444;
font-size: 16px !important;
}

.Map_and_powerFactor .device-detail-list li {
margin-top: 25px;
}

.total_off, .total_on {
padding-top: 10px;
color: #999;
font-size: 14px;
}

.area_listhoz {
/* display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; */

}

.section_col_1 {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
background: #fff;
border-radius: 4px;
margin: 0px 7px 10px;
text-align: left;
padding: 0;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
color: #3c3b3b;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
flex: 1 1 auto;
height: 38px;
align-items: center;
padding-left: 10px;
overflow: hidden;
}

.row_Value {
margin-left: auto;
line-height: 34px;
}

.row_Value {
background: #566379
}
/*.A-tP_1 .row_Value {
background: #2e7e9c;
}

.A-tP_2 .row_Value{
background: #da2b33;
}

.A-tP_3 .row_Value {
background: #00b5ea;
}

.A-tP_4 .row_Value{
background: #e0ae53;
}

.A-tP_5 .row_Value {
background: #2774b7;
}

.A-tP_6  .row_Value{
background: #798231;
}
*/
.tex_up {
font-size: 12px;
font-weight: 600;
}

.reading_Top .power-detail-item {
height: 71px;
padding: 1px 20px;
}

.reading_Top .sunrise-body ul li .sun-img {
margin-bottom: 0
}

.reading_Top  .sunrise-body ul li p {
font-size: 20px;
margin-bottom: 0;
}

.row_Value {
font-weight: 600;
/* padding: 0px 0px; */
font-size: 16px;
height: 100%;
flex: 0 0 27%;
padding: 2px 4px;
color: #fff;
text-align: center;
}

.mapContainer {
width: 100%;
}

.list_led_t {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
align-items: center;
}

.list_led_t h3 {
font-size: 15px;
font-weight: 700;
margin-bottom: 3px
}

.list_led_t .total_on {
padding-top: 0px;
}

.list_led_t .text-faulty {
padding-top: 1px;
color: #999;
font-size: 14px;
}

.list_led_t .Val_faulty {
font-size: 14px;
font-weight: bold;
color: #a90000;
border-radius: 100%;
height: 26px;
width: 26px;
text-align: center;
border: #ffb5b5 1px solid;
margin-bottom: 5px;
line-height: 25px;
background: #ffe2e2;
}

.Map_and_powerFactor .style_level i {
color: red;
margin: 20px 4px 22px 24px;
}

.locationarea_section .power-detail-item {
height: 80px;
padding: 10px;
margin-bottom: 17px;
}

.locationarea_section  .sunrise-head {
margin-top: 0px;
}

.locationarea_section img {
max-width: 100%;
max-height: 170px;
margin: auto
}

.sunrise-body ul li .sun-img {
margin-bottom: 2px
}

.cityName_area {
font-size: 16px;
font-weight: 600;
text-align: center;
padding: 3px 0px;
}

.Maparea_section_2 {
height: calc(538px - 104px);
width: 100%;
background: url(../images/map_2.png) right center no-repeat;
border: #fff 5px solid;
box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 10px;
}

.map_oneTouch {
position: relative;
}

.titleSection {
padding: 5px 15px 10px;
text-align: center;
font-weight: 600;
font-size: 14px;
color: red;
display: block
}

.cityBgGround {
background: url(../images/The-Gateway-of-India.jpg) center no-repeat;
background-size: cover;
height: 135px;
width: 100%;
}

.legendSec {
float: left;
width: 100%;
padding-left: 15px;
margin-bottom: 00px;
font-size: 11px;
background: #fff;
z-index: 9991;
position: relative;
}

.legendSec span {
vertical-align: middle
}

.legendSec li {
float: left;
list-style: none;
padding-right: 5px;
}

.legendSec li img {
height: 20px;
}

#tableArea .table-bordered {
border: 1px solid #dee2e6;
height: 240px;
WIDTH: 100%;
overflow: AUTO;
DISPLAY: block;
}

.list_led_t h3.circle_b {
background: #eaeaea;
border-radius: 100%;
height: 32px;
width: 32px;
text-align: center;
line-height: 30px;
}

#tableArea .table-bordered tbody {
width: 100%;
display: table;
}

#tableArea .table-bordered td {
white-space: normal;
word-break: break-word;
}

.loaderAatha {
position: fixed;
height: 100%;
width: 100vw;
z-index: 9999;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
text-align: center;
align-content: center;
text-align: center;
top: 0;
left: 0;
}

.loader {
border-radius: 50%;
border-top: 8px solid #3498db;
width: 60px;
height: 60px;
-webkit-animation: spin 1s linear infinite; /* Safari */
animation: spin 1s linear infinite;
margin: auto;
}

.rowArea_sec .box_list_t2 {
font-size: 14px;
}

.Map_and_powerFactor .rowArea_sec>div i {
font-size: 18px;
color: #000;
margin-right: 10px;
vertical-align: middle
}

.rowArea_sec .box_list_t1 {
background: #fdd1d0;
color: #000;
margin-bottom: 10px;
border-radius: 4px;
padding: 5px 10px;
font-size: 14px;
}

.rowArea_sec .box_list_t2 {
background-image: linear-gradient(to right, #b9d6ef, #e9f0f7);
border-color: #bdd8f0;
color: #000;
font-size: 14px;
margin-bottom: 10px;
border-radius: 4px;
padding: 5px 10px;
}

.rowArea_sec .box_list_t3 {
background-image: linear-gradient(to right, #f7deb9, #fffbdf);
border-color: #ffe2b5;
color: #000;
font-size: 14px;
margin-bottom: 10px;
border-radius: 4px;
padding: 5px 10px;
}

.countTotal {
margin-left: auto;
font-size: 16px;
font-weight: 600;
background: #fff;
padding: 0px 20px;
border-radius: 4px;
flex: 0 0 69px;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px;
}

.b-f {
margin-right: 5px;
}

.b-f img {
height: 24px;
}

.class-Value_l {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
width: 100%;
padding-bottom: 20px;
flex-wrap: wrap;
}

.class-Value_l {
padding: 0px 5px 20px;
max-width: 207px;
margin: 0 auto;
}

.class-Value_l .on_Section {
color: #000;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 4px;
width: 100%;
margin-bottom: 15px;
font-weight: 600;
}

.class-Value_l .off_Section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 4px;
margin-left: auto;
font-weight: 600;
width: 100%;
}

.class-Value_l .off_Section i {
padding: 5px 10px;
margin-right: 7px;
}

.class-Value_l .on_Section i {
padding: 5px 10px;
margin-right: 7px;
}

.class-Value_l .on_Section .ON-Val_T {
margin-left: auto;
background-color: #5bc847;
color: #fff !important;
padding: 3px 7px;
margin-right: 4px;
border-radius: 4px;
font-weight: 600;
}

.class-Value_l .off_Section .OFF-Val_T {
margin-left: auto;
background-color: #ff5d4d;
color: #fff !important;
padding: 3px 7px;
margin-right: 4px;
border-radius: 4px;
font-weight: 600;
}
/* Safari */
@
-webkit-keyframes spin { 0% {
-webkit-transform: rotate(0deg);
}
100%{ -webkit-transform:rotate(360deg);

}
}@keyframes spin { 0% {
transform: rotate(0deg);
}100%{
transform:rotate(360deg);
}
}

/***************************New Style CSS - 23-1-2020********************************************/
@import
url('https://fonts.googleapis.com/css?family=Roboto:300,400,500i,700,900&display=swap')
;

body {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 400;
padding: 0px 0px;
background: #f3f3f3;
}

html, body {
height: 100%;
}

h1 {
font-size: 22px;
}

h2 {
font-family: 18px;
}

.sidebarnave {
width: 222px;
position: fixed;
height: 100%;
left: 0px;
top: 0px;
box-shadow: rgba(0, 0, 0, 0.1) 3px 0px 6px;
padding-bottom: 48px;
}

a:hover {
text-decoration: none;
}

.topLogo {
padding: 15px 15px 20px;
}

.userSection {
padding: 15px;
}

.subText {
opacity: 1
}

.userSection h4 {
font-size: 15px;
color: #fff;
}

.subText {
font-size: 12px;
}

.mainMenuArea ul {
margin: 0px;
padding: 0px;
}

.mainMenuArea li {
display: block;
position: relative;
}

.top_barnav {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
z-index: 999;
padding-left: 222px;
}

.top_barnav>div {
padding: 5px 20px;
height: 45px;
}

.buttonarea {
display: inline-flex;
align-items: center;
}

.buttonarea a {
font-size: 12px;
padding: 4px 20px;
}

.buttonarea a i {
vertical-align: top;
font-size: 18px;
}

.top_barnav>div h1 {
margin: 0px;
padding: 7px 5px;
}

.dissun {
vertical-align: sub;
}

.mainMenuArea>ul>li>a {
display: block;
padding: 10px 30px 10px 35px;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
position: relative;
}

img {
max-width: 100%;
}

.mainMenuArea>ul>li>a i.material-icons.l_i {
position: absolute;
font-size: 20px;
left: 10px;
top: 10px;
}

.mainMenuArea>ul>li>a img:first-child {

}

.mainMenuArea>ul>li>a i.img_arrow {
position: absolute;
transition: all 0.6s;
right: 6px;
}

.mainMenuArea ul.level-2>li>a {
display: block;
padding: 8px 25px;
color: rgba(226, 226, 226, 0.6);
font-size: 12px;
font-weight: 400;
white-space: initial;
}

.mainMenuArea ul.level-2>li>a img {
margin-right: 5px;
}

.mainMenuArea ul>li>a img {
transition: all 0.3s;
vertical-align: sub;
}

.mainMenuArea ul>li.addClassA>a i.img_arrow {
transform: rotate(-540deg)
}

.mainContainer {
padding: 47px 0px 15px 222px;
height: 100%;
}

.filter_area_list {
margin-bottom: 1px;
}

.mainContainer h1 {
font-size: 18px;
padding: 1px 6px 4px;
}

.mainPanel {
height: 100%;
}

.mainContainer .map_C {
background: #fff;
padding: 15px 15px 0;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
height: calc(100vh - 60px);
overflow: auto;
align-items: center;
}

.inner_uploadBox {
width: 100%;
flex: 0 0 100%;
flex-wrap: wrap;
}

.mainContainer .map_C.innerBoxupload {
background: #fff url("../images/Icon ionic-ios-image.png") center center
no-repeat;
}

.copyWriteBox {
position: absolute;
right: 5px;
bottom: 10px;
background: url("../images/list_4_copy_mapmyindia.png") center center
no-repeat;
width: 151px;
height: 51px;
}

.inner_imageFill {
height: calc(100vh - 128px);
background: #fff;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex: 0 0 100%;
}

.inner_section {
text-align: left;
background: #c3c2c2;
padding: 7px 15px 0px;
margin: 0 -15px;
}

.topText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1px 15px;
font-size: 14px;
align-items: center;
background: linear-gradient(45deg, #009fc3, #00ad95);
}

.topText .tip_txt {
margin-left: auto;
border-radius: 4px;
padding: 1px 10px;
background: #f3f3f3;
font-weight: 600;
}

.txt {
font-weight: 600;
color: #fff;
}

.txt i {
vertical-align: middle;
font-size: 20px;
}

.inerCardL {
background: #fff;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px;
border-radius: 8px;
overflow: hidden
}

.contentAt-1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: green;
}

.txt-1-t {
padding: 10px;
color: #797979;
border-right: #e2e2e2 1px solid;
flex: 0 0 100%;
height: 248px;
}

.list_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.label_listName {
font-size: 12px;
font-weight: 600;
color: #000;
text-align: center;
margin-top: 8px;
}

.list_box .list_box {
flex: 0 0 30%;
margin-right: 3%;
font-size: 11px;
padding: 0px 0px 0px 4px;
border-radius: 3px;
line-height: 26px;
font-weight: 600;
}

.list_box .list_box .val_box {
font-weight: 600;
font-size: 12px;
padding: 3px 8px;
line-height: 20px;
margin-left: auto;
}

.color_green {
color: #3dad5f;
}

.txt-1-t i {
vertical-align: middle
}

.txt-1-t span {
float: right;
padding: 5px 10px;
}

.txt-1-t .colorRed, .colorRed {
color: #E16D6D
}

.buttonarea a.top_button_b {
background: rgba(255, 255, 255, 0.7);
color: rgba(0, 0, 0, 0.74);
border-radius: 4px;
padding: 3px 10px;
display: block
}

.buttonarea a.top_button_b:hover {
opacity: 0.8
}

.dissun img {
vertical-align: inherit;
margin: 0px 5px 0 25px;
}

.dalign i {
vertical-align: bottom;
font-size: 18px;
margin-left: 30px;
}

.dalign {
padding-top: 3px;
vertical-align: bottom;
}

.tableList_aath {
position: absolute;
bottom: -4px;
right: 5px;
z-index: 9991;
width: 265px;
/* display: none; */
}

.legen_onMap {
position: absolute;
top: 5px;
left: 5px;
z-index: 9990;
width: 420px;
background: rgba(255, 255, 255, 0.7);
max-width: 100%;
padding: 7px 0px 0px 2px;
border-radius: 0px 0px 4px 0;
box-shadow: rgba(0, 0, 0, 00.1) 0px 0px 10px;
}

.main-landing-page {
overflow: auto;
height: calc(100vh - 92px);
}

.innerBGS {
background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
border-radius: 8px;
padding: 15px;
height: 219px;
overflow-y: auto;
/* min-height: 237px; */
}

@
-moz-document url-prefix() { .innerBGS { height:238px;

}

}
.value_txt {
float: right;
margin-left: 3px;
border-radius: 4px;
padding: 1px 7px;
color: #000;
background: #fff !important;
}

.btn-onetouch {
height: 28px;
padding: 2px 16px;
background: #252f4266;
color: #fff;
font-size: 12px;
}

.innerCont {
padding: 0px 15px;
}

#site-content {
overflow: auto;
height: calc(100vh - 84px);
}

.main-body-sec {
background: #fff;
/* height:calc(100vh - 143px); */
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
border-radius: 8px;
padding: 10px;
overflow: auto;
margin: 10px;
}

.btn:focus {
outline-style: none !important;
}

#alert_table_div {
background: #fff;
height: calc(100vh - 210px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
border-radius: 8px;
padding: 10px;
overflow: auto;
}

.hist_sec #geography-filter-dash  .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
padding: 5px 10px;
}

.main-body-sec .main-body {

}

.buttonBox  .form-control {
color: #212121;
background-color: #fff;
border: navajowhite;
font-size: 12px;
height: 26px;
margin: 0;
}

button.buttons-excel.buttons-html5, button.buttons-pdf.buttons-html5 {
margin: 0px 15px 5px 0;
height: 25px;
padding: 5px 10px;
}

.dataTables_length select{
    padding : 3px;
}

.searchBoxSec  h3 {
font-size: 18px;
padding: 1px 0px 10px
}

.dt-buttons  a.dt-button {
margin: 0px 5px;
border: none;
border-radius: 2px;
padding: 2px 10px;
background: #777;
color: #fff;
vertical-align: middle;
display: inline-block
}

.progress {
height: 5px;
}

.CapCity {

}

.txt-1-t.colorRed {
border-right: none
}

.b-r-4 {
border-radius: 6px !important;
}

.left_displayTbox .img-auto {
padding: 3px 5px;
border-radius: 3px;
margin-bottom: 10px;
height: 27px;
cursor: pointer;
}

.left_displayTbox .img-auto .title_p_l {
padding: 1px 0px;
float: left;
font-weight: 500;
}

.date-f-t {
white-space: nowrap;
}

.display_b_CityName {
/* height: 100%; */
justify-content: center;
flex-wrap: wrap;
}

.CityDisplay {
font-size: 22px;
font-weight: 600;
color: #444;
padding-top: px;
height: 30px;
margin-bottom: 45px;
}

#alertresult {
position: relative;
}

#alertresult .alert-drp-buttons {
position: absolute;
top: -43px;
left: 185px;
}

.dropdown-menu li {
font-size: 12px;
padding: 2px 0px;
background: #f9f9f9;
}

.dropdown-menu li a {
display: block;
}

.dropdown-menu li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.1);
}

.list_T-2 {
display: block;
padding: 10px 5px;
}

.list_T-2 li {
display: inline-block;
margin-right: 20px;
font-weight: 500;
color: #212121;
}

.list_T-2 li:last-child {
margin-left: auto;
}

.list_T-2 ul {
margin: 0px;
padding: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.list_T-2 li span.PanelON {
background: green;
float: none;
padding: 0px;
vertical-align: middle;
border-radius: 100%;
height: 14px;
width: 14px;
display: inline-block;
}

.list_T-2 li span.PanelOFF {
background: red;
float: none;
padding: 0px;
vertical-align: middle;
border-radius: 100%;
height: 14px;
width: 14px;
display: inline-block;
}

select.form-control:not([size]):not([multiple]) {
height: auto;
}

.subText.logOut {
background: rgba(255, 255, 255, 0.68);
width: 76px;
padding: 2px 6px;
border-radius: 4px;
color: #000;
text-align: center;
}

.subText.logOut a {
color: #000;
}

.dataTable thead th, .table thead th {
vertical-align: text-bottom;
white-space: nowrap;
}

.table>tbody>tr:nth-child(2n) {
background: #fff;
}

body  .leaflet-popup-content-wrapper {
border: none;
margin: 0px;
border-radius: 6px !important;
padding: 0 !important;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
border: none;
padding: 0;
}
/* .tableoverlay .headding_T {background: linear-gradient(45deg, #009fc3, #00ad95);} */
.tableoverlay {
min-width: 250px;
}

.tableoverlay .header_top {
border-radius: 6px 6px 0 0;
}

body  .leaflet-container  a.leaflet-popup-close-button {
color: #fff;
top: 3px;
right: 4px;
}

.tableoverlay .table {
margin-bottom: 0px;
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
margin: 0px;
padding: 0px;
}

.header_top {
padding: 5px 25px 5px 10px;
border-radius: 10px 10px 0 0;
font-size: 11px;
color: #fff;
font-weight: 600;
align-items: center;
}

.popup_inner {
padding: 10px;
}

.map_oneTouch .leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 5px;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;
font: 18px/17px Tahoma, Verdana, sans-serif;
color: #ffffff !important;
text-decoration: none;
font-weight: bold;
background: transparent;
}

.popup_tooltip {
padding: 10px;
}

.popup_tooltip .dataTable td, .popup_tooltip .dataTable th,
.popup_tooltip .table td, .popup_tooltip .table th {
padding: 5px;
}

.device-accordion-sec .form-group label {
margin-bottom: 0;
font-weight: 600; vertical-align: text-bottom;
}

.list_box_val {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
align-items: flex-end;
height: 140px;
padding: 10px 20px
}

.CCMSBox_list {
height: 100%;
width: 40px;
margin-left: 5%;
flex: 0 0 40px;
position: relative;
}

.CCMSBox_list_lights {
height: 100%;
width: 40px;
margin-left: 5%;
flex: 0 0 40px;
position: relative;
}

/* .CCMSBox_list .div_upperVal:after, .CCMSBox_list .div_DownVal:after{    content: "235";
    position: absolute;
    display: block;
    top: 45%;
    color: #fff;
    width: 100%;
    z-index: 999;
    text-align: center;
    font-weight: 600;} */

/*  .CCMSBox_list_lights .div_upperVal:after, .CCMSBox_list_lights .div_DownVal:after{    content: "25";
    position: absolute;
    display: block;
    top: 45%;
    color: #fff;
    width: 100%;
    z-index: 999;
    text-align: center;
    font-weight: 600;} */

/*   .ILCBox_list .div_upperVal:after, .ILCBox_list .div_DownVal:after{    content: "25";
    position: absolute;
    display: block;
    top: 45%;
    color: #fff;
    width: 100%;
    z-index: 999;
    text-align: center;
    font-weight: 600;}
   
     .ILCBox_list_lights .div_upperVal:after, .ILCBox_list_lights .div_DownVal:after{    content: "25";
    position: absolute;
    display: block;
    top: 45%;
    color: #fff;
    width: 100%;
    z-index: 999;
    text-align: center;
    font-weight: 600;} */
.ILCBox_list {
height: 100%;
width: 40px;
flex: 0 0 40px;
position: relative;
margin-left: auto;
}

.ILCBox_list_lights {
height: 100%;
width: 40px;
flex: 0 0 40px;
position: relative;
margin-left: 20%;
}

.GaTeWayBox_list {
height: 100%;
width: 40px;
flex: 0 0 40px;
position: relative;
margin-left: auto;
}

.div_DownVal {
background: rgb(13, 121, 9);
width: 100%;
height: 50%;
position: relative;
background: linear-gradient(90deg, rgb(77, 130, 75) 0%, rgb(89, 185, 82)
5%, rgb(142, 224, 100) 50%, rgb(125, 185, 108) 96%, rgb(57, 138, 58)
100%)
}

.div_disc_b_DownVal {
background: rgb(13, 121, 9);
width: 100%;
height: 50%;
position: absolute;
bottom: 0px;
background: linear-gradient(90deg, rgba(13, 121, 9, 1) 0%,
rgba(71, 168, 64, 1) 5%, rgba(49, 228, 12, 1) 50%,
rgba(35, 185, 34, 1) 96%, rgba(6, 139, 8, 1) 100%);
}

.div_disc_b_DownVal {
position: absolute;
background: rgb(87, 181, 58);
bottom: -7px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991
}

.top_disc_area {
position: absolute;
background: rgb(255, 102, 102);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991
}

.top_disc_area_green {
position: absolute;
background: rgb(87, 181, 58);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}

.top_b_disc_area {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgba(157, 0, 0, 1) 0%,
rgba(194, 0, 0, 1) 5%, rgb(255, 62, 62) 50%, rgba(200, 0, 0, 1) 96%,
rgba(149, 0, 0, 1) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

.div_upperVal {
width: 100%;
height: 50%;
position: relative;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(219, 31, 31) 0%,
rgba(194, 0, 0, 1) 5%, rgb(255, 96, 96) 50%, rgb(209, 75, 75) 96%,
rgb(205, 4, 4) 100%);
z-index: 99;
}

.gateWay_colum {
	background:linear-gradient(

90deg
, rgb(77, 130, 75) 0%, rgb(89, 185, 82) 5%, rgb(142, 224, 100) 50%, rgb(125, 185, 108) 96%, rgb(57, 138, 58) 100%);
/* background: rgb(194, 194, 194);
background: linear-gradient(90deg, rgb(95, 95, 95) 0%, rgb(90, 90, 90)
5%, rgb(191, 191, 191) 50%, rgb(95, 95, 95) 96%, rgb(90, 90, 90) 100%); */
position: relative;
bottom: 0;
width: 100%;
height: 100%;
}

.div_gate_b_DownVal {
position: absolute;
/* background: rgb(86, 86, 86); */
background:linear-gradient(

90deg
, rgb(77, 130, 75) 0%, rgb(89, 185, 82) 5%, rgb(142, 224, 100) 50%, rgb(125, 185, 108) 96%, rgb(57, 138, 58) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

.div_gate_b_TopVal {
position: absolute;
/* background: rgb(197, 197, 197); */
background: linear-gradient(

90deg
, rgb(77, 130, 75) 0%, rgb(89, 185, 82) 5%, rgb(142, 224, 100) 50%, rgb(125, 185, 108) 96%, rgb(57, 138, 58) 100%);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

#upperCCmS .txt_low {
position: absolute;
display: block;
top: 45%;
color: #fff;
width: 100%;
z-index: 999;
text-align: center;
font-weight: 600;
}

#lowCCmS .txt_low_v, #lowILCBox .txt_low_3, #lowILc .txt_low_3,
#upperCCmS .txt_low, #upperILCBox .txt_low_2, #ccmsBoxUpper .txt_low,#gatewayBoxUpper .txt_low,#gatewayBoxDown .txt_low_v,
#ccmsBoxDown .txt_low_v, #ILCBoxUpper .txt_low, #ILCBoxLower .txt_low_v
{
position: absolute;
display: block;
top: 45%;
color: #fff;
width: 100%;
z-index: 999;
text-align: center;
font-weight: 600;
}

#resultTable_wrapper div.dt-buttons {
float: left;
top: -41px;
left: 0;
}

#ccmsBoxNone.div_DownVal_gray {
display: none;
background: rgb(13, 121, 9);
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(90deg, rgb(224, 224, 224) 0%,
rgb(226, 226, 226) 5%, rgb(255, 255, 255) 50%, rgb(230, 230, 230) 96%,
rgb(202, 202, 202) 100%)
}

#ccmsBoxNone {
height: 100%;
max-height: 100%;
}

#upperCCmSNone.div_DownVal_gray {
display: none;
background: rgb(13, 121, 9);
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(90deg, rgb(224, 224, 224) 0%,
rgb(226, 226, 226) 5%, rgb(255, 255, 255) 50%, rgb(230, 230, 230) 96%,
rgb(202, 202, 202) 100%)
}

#upperCCmSNone {
height: 100%;
max-height: 100%;
}

#upperILCBoxNone.div_DownVal_gray {
display: none;
background: rgb(13, 121, 9);
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(90deg, rgb(224, 224, 224) 0%,
rgb(226, 226, 226) 5%, rgb(255, 255, 255) 50%, rgb(230, 230, 230) 96%,
rgb(202, 202, 202) 100%)
}

#upperILCBoxNone {
height: 100%;
max-height: 100%;
}

#ILCBoxNone.div_DownVal_gray {
display: none;
background: rgb(13, 121, 9);
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(90deg, rgb(224, 224, 224) 0%,
rgb(226, 226, 226) 5%, rgb(255, 255, 255) 50%, rgb(230, 230, 230) 96%,
rgb(202, 202, 202) 100%)
}

#ILCBoxNone {
height: 100%;
max-height: 100%;
}

#downnone1 {
position: absolute;
display: block;
top: 45%;
color: #000;
width: 100%;
z-index: 999;
text-align: center;
font-weight: 600;
}

#ccmsBoxNone .top_disc_area_gray {
position: absolute;
background: rgb(228, 228, 228);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}

#ccmsBoxNone  .div_disc_gray_DownVal {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(216, 216, 216) 0%,
rgb(216, 216, 216) 5%, rgb(234, 234, 234) 50%, rgb(216, 216, 216) 96%,
rgb(216, 216, 216) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

#ILCBoxNone .top_disc_area_gray {
position: absolute;
background: rgb(228, 228, 228);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}

#ILCBoxNone  .div_disc_gray_DownVal {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(216, 216, 216) 0%,
rgb(216, 216, 216) 5%, rgb(234, 234, 234) 50%, rgb(216, 216, 216) 96%,
rgb(216, 216, 216) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

#upperILCBoxNone .top_disc_area_gray {
position: absolute;
background: rgb(228, 228, 228);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}

#upperILCBoxNone  .div_disc_gray_DownVal {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(216, 216, 216) 0%,
rgb(216, 216, 216) 5%, rgb(234, 234, 234) 50%, rgb(216, 216, 216) 96%,
rgb(216, 216, 216) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

#upperCCmSNone .top_disc_area_gray {
position: absolute;
background: rgb(228, 228, 228);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}

#upperCCmSNone  .div_disc_gray_DownVal {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(216, 216, 216) 0%,
rgb(216, 216, 216) 5%, rgb(234, 234, 234) 50%, rgb(216, 216, 216) 96%,
rgb(216, 216, 216) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}

#gatewayBoxNone.div_DownVal_gray {
display: none;
background: rgb(13, 121, 9);
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(90deg, rgb(224, 224, 224) 0%,
rgb(226, 226, 226) 5%, rgb(255, 255, 255) 50%, rgb(230, 230, 230) 96%,
rgb(202, 202, 202) 100%)
}
#gatewayBoxNone {
height: 100%;
max-height: 100%;
}
#gatewayBoxNone .top_disc_area_gray {
position: absolute;
background: rgb(228, 228, 228);
top: -9px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 1
}
#gatewayBoxNone  .div_disc_gray_DownVal {
position: absolute;
background: rgb(157, 0, 0);
background: linear-gradient(90deg, rgb(216, 216, 216) 0%,
rgb(216, 216, 216) 5%, rgb(234, 234, 234) 50%, rgb(216, 216, 216) 96%,
rgb(216, 216, 216) 100%);
bottom: -6px;
z-index: 99;
height: 16px;
width: 100%;
border-radius: 100%;
z-index: 991;
}
.div_upperVal {
max-height: 85%;
min-height: 15%;
}

.div_DownVal {
max-height: 85%;
min-height: 15%;
}

.LineChartArea, .uptimeLineChartArea {
display: none;
position: absolute;
top: -16px;
left: 0px;
background: #fff;
height: 245px;
width: 100%;
z-index: 98;
overflow: hidden;
border-radius: 8px;
transition: all 0.4s;
}

.headerArea {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
background: linear-gradient(45deg, #009fc3, #00ad95);
border-radius: 4px 4px 0 0;
padding: 5px 10px;
color: #fff;
font-weight: 500;
}

.click_button {
cursor: pointer;
}

.popover table {
margin: 0px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}

/***********************/

/**************/
.popover table th {
background-color: #f1f8f9;
}

.popover table td, .popover table th {
font-size: 11px;
padding: 5px 8px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}

.popover.bs-popover-top .arrow {
bottom: -20px;
margin-left: -8px
}

.popover.bs-popover-bottom .arrow {
top: -20px;
margin-left: -8px
}

.mainMenuArea {
max-height: calc(100vh - 169px);
overflow: auto;
}

/* width */
.mainMenuArea::-webkit-scrollbar {
width: 6px;
border-radius: 6px;
}

/* Track */
.mainMenuArea::-webkit-scrollbar-track {
background: #777;
border-radius: 6px;
}

/* Handle */
.mainMenuArea::-webkit-scrollbar-thumb {
background: #252f42;
border-radius: 6px;
}

/* Handle on hover */
.mainMenuArea::-webkit-scrollbar-thumb:hover {
background: #000;
}

.master-main-foot .page-link {
width: 50px;
padding: 0.5rem 0rem;
}

#energySavings_table th, #voltageCurrent_table th, #uptime_table th,
#rawData_table th {
text-align: center;
}

.daterangepicker td, .daterangepicker th {
font-size: 11px;
}

.ranges li {
font-size: 11px;
}

.form-control {
padding: 5px 7px;
}

.btnAwesome {
border: none;
color: white;
padding: 4px 6px;
font-size: 13px;
cursor: pointer;
margin: 2px 4px;
border-radius: 4px;
s
}

.btnAwesomeview {
background-color: #09b1ac;
border: none;
color: white;
padding: 4px 6px;
font-size: 13px;
cursor: pointer;
margin: 2px 4px;
border-radius: 4px;
}

.btnAwesomeDelete {
background-color: #ea3c3c;
border: none;
color: white;
padding: 4px 6px;
font-size: 13px;
cursor: pointer;
margin: 2px 4px;
border-radius: 4px;
}

.btnAwesomeDelete:hover {
background-color: darkred;
}

/////////////////////////////
.btn-GeoButton {
font-size: 13px;
background: #536bad;
color: #fff;
}

button:focus {
border: none;
box-shadow: none !important;
outerline: none !important
}

.btn-GeoButton:hover, .btn-dark:hover {
color: #fff !important;
opacity: 0.8
}

.botn_toggleButton {
padding: 0px;
border: none;
background: none;
}

.botn_toggleButton:after {
display: none
}

#geographys_table td {
vertical-align: middle
}

.toggleGeophaymodal .modal-header {
padding: 10px 20px;
background: linear-gradient(45deg, #222a40, #275f80);
color: #fff;
}

.toggleGeophaymodal .modal-header h3 {
font-size: 14px;
margin-bottom: 0px;
}

{
}
.toggleGeophaymodal .modal-header .close {
position: absolute;
padding: 10px;
top: 12px;
right: 16px;
z-index: 1;
color: #fff;
font-weight: 100;
box-shadow: none;
}

.btnSync i {
font-size: 14px;
vertical-align: middle
}

.Table_list td i {
vertical-align: middle;
font-size: 14px;
color: blue;
float: right;
cursor: pointer;
}

.tooltip {
pointer-events: none;
}

#myModal2 button {
width: 60px;
}

.InnerCG {
margin: 20px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px;
}

.InnerCG h5 {
font-size: 14px;
font-weight: 600
}

.BpinnerB {
padding: 5px 0 15px
}

.InnerCG label {
font-weight: 600
}

.trashButton {
padding: 5px 10px;
border: none;
background: #fff;
color: #777;
font-size: 18px;
}

.trashButton:hover {
color: red
}

.dataTables_wrapper  table.dataTable th {
padding-left: 10px;
}

.dataTables_wrapper  .table tr th input, .dataTables_wrapper  .table tr td input
{
vertical-align: middle;
margin-right: 5px;
}

.jh_snr {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
align-items: center;
margin-bottom: 8px;
padding: 3px 6px;
background: #ecf6f7;
}

.jh_snr>span {
display: flex;
flex: 0 0 33%
}

.jh_snr>span>div {
font-weight: 600;
padding-right: 5px
}

.jh_snr>span>p {
margin: 0px;
}

.signal_line {
height: 28px
}

.jh_snr>span.signal_line {
justify-content: flex-end;
padding: 0px !important;
height: 15px;
margin-left: auto;
}

.jh_snr>span#snr_id {
justify-content: center
}

/***************style changes 25-11-2020**************************/
input:focus, select:focus {
outline: none
}

.touchOnetitleBox {
position: relative;
}

.headDflex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
width: 100%;
align-items: center;
margin: 0;
padding: 0px 10px;
}

.headDflex .GetWaySelect {
width: 140px;
padding: 5px 0px 5px 10px;
border: #ccc 1px solid;
border-radius: 4px;
}

.filter-sec.TouchOneGTW {
position: absolute;
background: #fff;
z-index: 999;
width: 400px;
height: calc(100vh - 140px);
top: 0px
}

.color_title {
width: 100%;
background: #dedede;
padding: 5px 10px;
font-weight: 600;
margin: 20px 0;
}

/***************style changes 10-12-2020**************************/
.switch_popup {
position: relative;
display: inline-block;
width: 62px;
height: 18px;
vertical-align: middle;
margin-bottom: 0;
}

.switch_popup input {
opacity: 0;
width: 0;
height: 0;
}

.slider_popup {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 3px;
}

.slider_popup:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 3px;
}

.slider_popup:after {
display: block;
position: absolute;
left: 4px opacity:0px;
top: 2px;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider_popup:after {
content: "Lock";
opacity: 1px;
left: 4px
}

input:checked+.slider_popup.customSliderPopup:after {
content: "Show";
opacity: 1px;
left: 4px
}

input:checked+.slider_popup {
background-color: #fff;
}

.slider_popup .lockStyle {
position: absolute;
left: 20px;
top: 2px;
-webkit-transition: .4s;
transition: .4s;
color: #000;
}

input:checked+.slider_popup .lockStyle {
opacity: 0
}

input:focus+.slider_popup {
box-shadow: 0 0 1px #2196F3;
}

.buttonAreaMap {
position: absolute;
top: 2px;
-webkit-transition: .4s;
transition: .4s;
left: -130px;
z-index: 991
}

.buttonAreaMap  button.btn_dwonlaod {
font-size: 12px;
background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
border-radius: 3px;
margin: 10px 0px;
font-weight: 600;
padding: 4px 10px;
}

.buttonAreaMap  button.btn_dwonlaod:hover {
color: #000;
border-color: #000;
}

.buttonAreaMap  button.btn_dwonlaod i {
vertical-align: bottom;
font-size: 18px;
}

input:checked+.slider_popup:before {
-webkit-transform: translateX(43px);
-ms-transform: translateX(43px);
transform: translateX(43px);
}

.header_top.flexDiv {
display: flex;
}

.toggleButtonSwi {
margin-left: auto;
}

.map-panel  .buttonAreaMap {
right: 37px
}

.dropdown-menu.show {
display: block;
padding: 0;
border: none;
min-width: 103px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px;
border-radius: 3px;
}

.dropdown-menu.show a {
font-size: 12px;
padding: 5px 10px;
cursor: pointer;
}

.bycityGroup {
margin-left: 25px;
padding-top: 5px;
}

.bycityGroup input {
display: none
}

.bycityGroup li a {
padding: 5px 30px
}

.apply-schedule-item p {
font-size: 12px
}

.col-let {
flex: 0 0 41%;
padding-right: 10px
}

.col-let input.form-control, .col-let select.form-control {
margin-bottom: 3px;
height: 24px !important;
padding: 3px 10px;
}

.col-let p {
margin-bottom: 0px;
}

.tab_applySch .bycityGroup {
border-bottom: none
}

.tab_applySch .bycityGroup.nav-tabs .nav-link.active {
background: #efefef;
position: relative;
z-index: 1;
border-bottom-color: transparent;
}

.Menu_v {
float: left;
margin: 1px 6px 0 0;
display: none
}
.map-control {
    right: 10px;
}
.dissun span {
    margin-right: 5px;
}

#bulkupload{width:50%; margin: 0 auto 50px;}

@media only screen and (max-width:767px) {
.Menu_v {
float: left;
margin: 1px 6px 0 0;
display: block
}
.top_barnav>div h1 {
margin: 0px;
padding: 7px 1px;
text-align: left !important;
font-size: 16px;
float: left;
width: 30%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px !important;
}
.top_barnav>div {
padding: 5px !important;
}
.rightpanel {
float: right;
   text-align: right !important;
   width: auto;
   padding: 0;
   margin: 0px;
}
.top_barnavmob {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
z-index: 999;
}
.top_barnavmob>div {
padding: 5px 10px;
height: 45px;
background: linear-gradient(45deg, #121212, #000);
color: #fff;
box-shadow: rgb(0 0 0/ 5%) 0px 3px 5px;
}
.top_barnavmob>div h1 {
margin: 0px;
padding: 8px 0px;
float: left;
font-size: 16px;
}
.mainContainer {
padding-left: 0px;
padding-top: 45px;
}
.accordion-main-body .form-group-sec>div {
flex: 0 0 100%;
max-width: 50%;
}
.sidebarnave {
transition: all 0.3s;z-index: 999;
}
.sidebarnave {
left: -230px;z-index: 999;
}
.sidebarnave.mbiledropdown {
left: 0;
z-index: 999999;
top: 45px;
height: calc(100vh - 45px);
overflow: auto;
box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 50%);
}
body .top_barnav {
padding-left: 0px;
}
body  .top_barnav .row {
display: flex
}
.scrolledTable {
overflow: auto;
}
#resultTable_wrapper div.dt-buttons {
float: right !important;
top: -38px;
}
#resultTable_wrapper div.dt-buttons .dt-button:last-child, #alertresultTable_wrapper div.dt-buttons .dt-button:last-child {
margin-left: 15px;
margin-right: 0;
}
.map_oneTouch {
margin-left: 15px
}
.dashboard-exp-sec {
margin-top: 20px;
}
.dissun img {
margin: 0px 3px 0 8px;
}
.dissun span {
display: none;
}
.dalign span {
display: none;
}
#dash-curr-time {
display: inline-block;
}
.Menu_v {
float: left;
margin: 1px 2px 0 0;
}
.legendSec li {
width: 50%;
}
.map-panel.map-panel-expand {
margin-left: 0;
width: 100%;
}
.master-sec {
right: 20px;
}
#totalSwitchPanels {
padding-right: 15px !important;
margin-bottom: 1rem;
}
#totalStreetLights {
padding-left: 15px !important;
}
#device-list-panel .notification-sec {
right: 52px;
}
#site-content div.dt-buttons {
margin-top: 7px;
text-align: right !important;
float: right !important;
margin-bottom: 10px;
}
#site-content .dataTables_wrapper .dataTables_filter {
   float: left;
   margin-left: 0 !important;
   margin-right: 0 !important;
}
div.dt-buttons .buttons-excel {
   margin-right: 0;
}
.filter-accordion-sec .accordion-main-body {
padding: 6px 14px 0;
}
.form-control {
padding: 5px 2px;
}
.dissun {
padding-left: 0px !important;
padding-right: 0px !important;
}
.device-detail-list li {
flex: 0 0 46%;
}
.Rgb_device_Details .d-flex {
flex-wrap: wrap;
}
.Rgb_device_Details .d-flex li {
max-width: 50%;
margin: 20px 5px 10px;
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
   width: 240px !important;
}
.popup_tooltip, .popup_inner {
   padding: 10px;
   height: 160px;
   overflow: auto;
   background: #fff;
}
#site-content .filter-sec.hierarchy-sec, #site-content #filterSec.filter-sec.hierarchy-sec {
   width: calc(100% - 20px);
   right: 0;
   margin-right: 0;
   top: 10%;
   height: 440px;
   margin: 10px;
}
.main-body-map .main-body, .main-body-gateway .main-body {
height: calc(100vh - 270px) !important;
}
.main-body-map .left-panel .left-panel-body {
   height: calc(100vh - 300px);
}
.main-body-live .main-body {
   height: calc(100vh - 280px) !important;
}
#site-content #resultTable_filter {
position: relative;
   top: -20px;
   float: none;
}
.main-body-ctrl div.dt-buttons {
   float: right !important;
}
.main-body-ctrl .dataTables_filter {
   float: left;
}
#site-content #alertresultTable_filter {
  float: none;
}
#site-content div.dataTables_wrapper div.dataTables_filter input {
   width: calc(100% - 48px) !important;
}
#alertresultTable_filter label {
   margin: 20px 0 25px;
}
#site-content .dataTables_length {
margin-left: 0 !important;
}
#geography-filter-dash .userDateRange {
   padding-left: 0;
   padding-right: 0;
}
#resolveDiv {
padding-left: 15px;
   padding-right: 15px;
}
#showFOTAUpdate {
   margin-bottom: 0 !important;
}
#showFOTAUpdate .col-2 {
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
   max-width: 50%;
   margin-bottom: 0;
}
.confi-head h1 {
   font-size: 16px;
   padding: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 130px;
}
.btnAwesome {
   font-size: 12px !important;
   margin: 2px !important;
   padding: 4px !important;
}
.apply-schedule-item {
   margin-bottom: 0;
}
.custom-breadcrumb .breadcrumb .breadcrumb-item a, .custom-breadcrumb .breadcrumb .breadcrumb-item.active {
   font-size: 13px;
}
.sidebarnave > .bg-overlay {
z-index: 0;
   height: calc(100% - 45px);
   top: 45px;
}
.sidebarnave.mbiledropdown > .bg-overlay {
display: block;
}
.topLogo, .userSection {
position: relative;
z-index: 1;
}
.dalign i {
margin-left: 0;
}
.filter-sec.TouchOneGTW {
   width: 100%;
   height: calc(100vh - 257px);
}
.filter-sec .filter-sec-foot {
   position: fixed;
   width: 100%;
   bottom: 0;
}
.hierarchy-list-main li .btnAdd, .hierarchy-list-main li .btnDelete {
   position: absolute;
}
/* .hierarchy-list-main li .hierarchy-input {
   margin-left: 50px;
} */
.hierarchy-list-main li .hierarchy-input .form-control {
   max-width: 150px;
    margin-left: 50px;
}
.hierarchy-list-main li .hierarchy-input .sublabel-link {
   position: static;
   font-size: 12px;
   display: inline-block;
   float: left;
   width: 100%;
   padding-left: 50px;
}
.login_form .login_logo .mblogo {
   width: 180px;
}
.login-subhead {
   margin-bottom: 0;
}
.apply-schedule-item .d-flex .col-let:first-child {
   flex: 0 0 50%;
}
.master-sec input {
width: 120px;
}
.CityDisplay {
font-size: 20px;
height: 30px;
margin: 20px 0px;
text-align: center;
width: 100%;
}
.hist_sec #geography-filter-dash .col {
       flex: 0 0 50% !important;
max-width: 100%;
}
#addEmailBtn, #addPhoneBtn {
width: 78%;
    padding: 1px;
    font-size: 11px;
}
#bulkupload {
width: 100%
}
#app {
overflow: auto;
}
.filter-sec .filter-sec-foot {
bottom: 40px;
}
.d-bm {
    display:none !important;
}
}

.master-ILC
{
background-image: url(../images/dial1_img.png)!important;
    background-position: center;
    background-position: top!important;
    background-size: 266px 132px!important;
    background-repeat: no-repeat!important;
margin-top: 10px;
}

 .alerts-status {
    font-size: 10px;
    padding: 3px;
    text-align: justify
}
.alert-img
{
height:15px;
width:15px;
}