body{background-color:#fff; font-size:14px; color:black; font-family: 'Lato';}

@font-face {
	font-family: 'sourcesans';
	src: url('../fonts/sourcesans.eot');
	src: local('☺'), url('../fonts/sourcesans.woff') format('woff'), url('../fonts/sourcesans.ttf') format('truetype'), url('../fonts/sourcesans.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DBHeavent-Med';
	src: url('../fonts/DBHeavent-Med.eot');
	src: local('☺'), url('../fonts/DBHeavent-Med.woff') format('woff'), url('../fonts/DBHeavent-Med.ttf') format('truetype'), url('../fonts/DBHeavent-Med.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'DBHeaventt-Light';
	src: url('../fonts/DBHeaventt-Light.eot');
	src: local('☺'), url('../fonts/DBHeaventt-Light.woff') format('woff'), url('../fonts/DBHeaventt-Light.ttf') format('truetype'), url('../fonts/DBHeaventt-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'FontAwesome';
	src: url('../fonts/fontawesome-webfont.eot');
	src: local('☺'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

:focus {outline:none;}
.clearfix{clear:both;}

/*LOGIN*/

/* making the video fullscreen  */
#video-background {  position: fixed;  right: 0;   bottom: 0;  min-width: 100%;   min-height: 100%;  width: auto;   height: auto;  z-index: -100;}
.col-centered { margin: 0 auto;   margin-top:100px;}
.login-form { background-color: rgba(255, 255, 255, 0.9);  padding: 30px 30px 20px;  border-radius: 2px; }
.login-form label { text-transform: uppercase;}
.login-form .btn { width: 100%; text-transform: uppercase; font-size: 14px; padding: 10px; border: 0px; font-weight:bold; margin-bottom:5px; font-family: lato; cursor:pointer;}
.login-content { max-width: 60%;    margin: 8vh auto;}
/*.login-form label a { color: #ff2e44;}
.register-link a { color: #ff2e44;}*/
.login-logo { text-align: left; margin-bottom: 15px;}
.responsive {  width: 100%;  height: auto;}
#video-background {position: fixed; min-width: 100%; min-height: 100%; object-fit: cover;}


.gj-datepicker-bootstrap [role=right-icon] button {border:0 !important; box-shadow:none !important;}

.datepic {float:left;}

.stripes {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    background: linear-gradient(150deg,#53f 15%,#05d5ff 70%,#a6ffcb 94%);
}

/*DASHBOARD หลอดไฟ*/
.circle_white{ border-radius: 50%; width: 100px; height: 100px;  background: rgba(255, 255, 255, 0.17); position:relative;}
.circle_white img {display:block;  position: absolute;  top: 20%; left:25%;}
.count_light_on1{font-family: 'DBHeavent-Med'; line-height:25px; margin-bottom:0; letter-spacing:0.03em; }
.count_light_on2 {font-family: 'DBHeaventt-Light'; color: #8898aa; line-height:25px;margin-bottom:0; letter-spacing:0.03em;}
.css-bar {  position: relative;  display: inline-block;  border-radius: 50%;    box-sizing: content-box;    width: 80px;    height: 80px;   background-color: #f3f3f3; }
.css-bar img {display: block;    position: absolute;    top: 20%;    left: 20%;}
.box-lamp{padding:10px;}
.s-bar{width: 90%; height: 3px; margin:0 auto; border-radius:20%}


/*GRAPH DASHBOARD ค่าพลังงานย้อนหลัง*/

/*==================================================
            GRAPH
====================================================*/
.box-title {font-family: 'DBHeavent-Med'; letter-spacing:0.03em; }
.sparkline-title{font-family: 'DBHeaventt-Light'; color:white; letter-spacing:0.03em;}
.sparkline-number{color:white;  line-height: 25px;  margin-bottom: 0px;}
.text-po select{font-family: 'DBHeaventt-Light'; font-size:22px;}
#datepicker::placeholder,#startDate::placeholder,#endDate::placeholder  {font-family: 'DBHeaventt-Light'; font-size:22px;}
.bg-light-green{background-color: #8BC34A !important;  color: #fff;}
.btn-success{color:#fff;background-color:#8BC34A;border-color:#8BC34A;} .btn-success:hover{color:#fff;background-color:#8BC34A;border-color:#8BC34A;}
.btn-danger{color:#fff;background-color:#E91E63;border-color:#E91E63;}
.btn-teal {color:#fff;background-color:#009688;border-color:#009688;}.btn-teal:hover{color:#fff;background-color:#009688;border-color:#009688;box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);}
.bg-teal { background-color: #009688 !important;    color: #fff;}
.btn-blue, .btn-blue.disabled {    background: #26c6da;    border: 1px solid #26c6da;
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
    -webkit-transition: 0.2s ease-in;    -o-transition: 0.2s ease-in;    transition: 0.2s ease-in;}
.btn-red, .btn-red.disabled {    background: #fc4b6c;    border: 1px solid #fc4b6c;    -webkit-transition: 0.2s ease-in;    -o-transition: 0.2s ease-in;    transition: 0.2s ease-in;}
.fi-on{color: rgb(5, 202, 71); font-weight: bold;}
.fi-off{color: rgb(240, 69, 69); }


/* Flot Charts  ====================================== */
.bg-pink {  background-color: #E91E63 !important;  color: #fff; }
.bg-pink .content .text,  .bg-pink .content .number {    color: #fff !important; }
.bg-orange {    background-color: #ff8800;  color: #fff;}
.bg-light-red {    background-color: #e94c53;  color: #fff; padding: 10px;}
.btn-red , .btn-red:hover{background-color: #e94c53; border:0;}
.bg-light-blue {    background-color: #04b6a3;  color: #fff; padding: 10px;}
.btn-light-blue , .btn-light-blue:hover{background-color: #04b6a3;  color: #fff; }
.bg-success2 {
    background-color: #5cb85c;
}

/* icon setting */
.putt{top: 40px;   right: 20px;     border: 1px solid #e9ecef;    border-radius: 2px;   box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);}
.putt a{font-family: 'DBHeaventt-Light';  font-size:20px; line-height:25px;  padding: .2rem 0.5rem; margin:0;}

.setting{position:absolute; right:5px; z-index:1;}
.putt2{top: 20px;   right: 0px;     border: 1px solid #e9ecef;    border-radius: 2px;   box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);}
.putt2 a{font-family: 'DBHeaventt-Light';  font-size:20px; line-height:25px;  padding: .2rem 0.5rem; margin:0;}
.btn-white {    color: #efa1c6;    background-color: transparent;    border-color: 0;}

.bg-notification{background-image:url("../assets/images/background/profile-bg.jpg");}
.alert-title{font-family: 'DBHeaventt-Light'; letter-spacing:0.03em; line-height: 22px;}
.num-time{ font-size: 12px;    display: block;margin-top: -8px;     text-overflow: ellipsis; overflow: hidden;    color: #67757c;    white-space: nowrap;}

/* notification */
.dropdown-title {    border-bottom: 1px solid rgba(0, 0, 0, 0.1);    color: #263238;    font-size: 13px;    font-weight: 800;    padding: 5px 20px 10px;    text-align: center;}
.notif-box .notif-center a .notif-content .block {  font-family: 'DBHeaventt-Light';  font-size: 19px;   letter-spacing:0.03em;  line-height: 20px;    display: block;}
.navbar .navbar-nav .notification {    position: absolute;    background-color: #ff646d;    text-align: center;    border-radius: 10px;    min-width: 17px;    height: 17px;    font-size: 11px;    color: #ffffff;
    font-weight: bold;    line-height: 17px;    top: 15px;    right: 12px;}
.navbar .navbar-nav .nav-item .nav-link i {    font-size: 22px;    width: 30px;    vertical-align: middle;  margin-right: 10px;}
.notif-box {   width: 230px;    padding-bottom: 0px; }
.dropdown-menu.show {    display: block;}
.dropdown-menu {    border: 1px solid rgba(120, 130, 140, 0.13);    border-radius: 0;    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;    -webkit-box-shadow: 0 !important;
    -moz-box-shadow: 0 !important;    padding-bottom: 8px;    margin-top: 0;}
.notif-box .notif-center a {    display: flex;    border-bottom: 1px solid #eaeaea;    color: #4d585f;}
.notif-box .notif-center a:hover{background-color:#f3f6f6;}
.notif-box .notif-center a .notif-content .time {    color: #7d8c95;    font-size: 12px;}
.notif-box .notif-center a .notif-content {    padding: 10px 15px 10px 0;}
.notif-box .notif-center a .notif-icon {    display: inline-flex;    width: 40px;    height: 37px;    margin: 10px;    align-items: center;    justify-content: center;    background: #eee;    border-radius: 50%;}
.notif-box .notif-center a .notif-img {    display: inline-flex;    width: 50px;    height: 35px;    margin: 10px;    align-items: center;    justify-content: center;    background: #eee;    border-radius: 50%;}
.notif-box .notif-center a .notif-img img {    width: 100%;    height: 100%;    border-radius: 50%;}
.notif-box .see-all {color: #718e9d;  font-size: 13px;     padding-left: 15px;}
.notif-box .see-all:hover{color: blue; }
.notif-box .see-all i { padding-top:5px;   float: right;  }
.submenu-profile{  width: 180px; font-family: 'DBHeaventt-Light';  font-size: 22px;  display: block;padding:10px; border-bottom: 1px solid #eaeaea;  }
.submenu-profile a {   color: #4d585f; }
.submenu-profile:hover{background-color:#f3f6f6;}

.language-select {margin-top: 30px; margin-left: 10px; margin-right: 10px; }
.language-i {    padding: 5px;    display: block;    font-size: 22px;    vertical-align: top;    line-height: 15px;}
.language-i:hover{background-color:#f3f6f6;}
.language-select .dropdown-menu{ min-width: 0px;margin-top: 20px; margin-left: -20px;}

/* TASKS */
.form-check-sign:hover:before {  border: 1px solid #ccc !important;}
.form-check {  padding-left: 0.75rem;}
.form-check-input {  position: relative;  margin-top: .3rem;}
.checkbox label .toggle, .checkbox-inline .toggle {  margin-left: -20px;  margin-right: 5px;}



.card-tasks .table td{font-family: 'DBHeaventt-Light';font-size: 22px; letter-spacing:0.03em;  vertical-align: middle;     padding: 8px}
.card-tasks .table thead th {   border-top: 1px solid #f4f4f4;    background: #fafafa !important; font-weight:bold;    vertical-align: bottom;    border-bottom: 2px solid #dee2e6;     padding: 8px}

.todo{font-family: 'DBHeaventt-Light';font-size: 18px; }
.todo-group{font-family: 'DBHeaventt-Light';font-size: 20px; }

.m-b-20 {margin-bottom: 0px !important;}
.odd{background-color:#f5f7f7;}
.dropzone{border: 2px solid transparent !important;    background-color: #eee !important;}
.b-r{margin-top: 10px;}
.fontswitch{font-family: 'DBHeavent-Med';font-size: 22px; letter-spacing:0.03em;}
.value-light {    padding: 0;    font-size: 20px;    text-align: center;    background: #eee;    border-radius: 6px;    margin-left: 27px;    margin-top: 3px;}

/*  DIM  */
#slider3 .slider-track-high, #slider5c .slider-track-high {    background-image: linear-gradient(to bottom, #e9e9e9 0%, #e1dede 100%); }
.bg-light-icon {    font-family: 'DBHeaventt-Light';  letter-spacing:0.03em;  font-size: 22px;    background-color: #F2F2F2;    border-radius: 2px;    padding-top: 2px;}
.bg-light-icon img {    margin-bottom: 9px;    margin-left: 20px;}
.bg-dim{background-color: #f2f3f8; padding: 10px; border-radius: 10px;}
.addled{font-family: 'DBHeaventt-Light';font-size: 22px; letter-spacing: 1px; padding: 0;; }
.pad-light:before,.pad-light:after {top:1px !important; left:8px!important;}


/*     MODAL  */
.modal-dialog{max-width:800px;}
.modal-content{ border-radius:0; }
.modal .modal-content .modal-body {  color: #777;   padding: 15px 25px;}
.modal-body {  position: relative;}
.modal .modal-footer {    border: none;}
.modal-footer {    padding: 15px;    text-align: right;}
.modal-footer .btn + .btn {    margin-bottom: 0;    margin-left: 5px;}
.infoled{margin: 0 auto;  margin-bottom: 20px;}
.infoled button{font-family: 'DBHeaventt-Light';font-size: 22px;letter-spacing:1;}

.btn-close {   background:white; font-weight:bold;  color: #333;transition: 0.5s;}
.btn-close:hover { background:#ccc;}

.box-lamp2{border:1px solid #e8e9e9; display:inline-block; border-radius:3px;}
.lamp{float:left; width: 7%;text-align:center;  display:inline-block; }
.lamp:hover{background:#eff3f3; border-radius:2px; cursor:pointer; }
.lamp img {width: 60%; text-align:center; margin:5px; }
.emei-led{ float:left;font-family: 'DBHeavent-Med';font-size: 19px !important;  }
.emei-led .input-group-addon{font-size: 20px !important;}
.emei {margin-bottom:-10px; float:left;}
.emei .input-group-addon{ font-size: 13px !important; padding: 5px 5px !important; line-height:20px; }
.emei .input-group .form-control { font-size: 14px !important;  padding: 5px 5px !important; line-height:20px; }
.count_light_on3{color:black;font-size: 24px;  font-family: 'DBHeaventt-Light';    }
.w2{max-width: 1024px;}
.choose{float:left;font-family: 'DBHeavent-Med';font-size: 19px ;}
.choose label{font-family: 'DBHeavent-Med';font-size: 20px ; float: right;}
.bg-choose{background-color: #f2f3f8; padding: 10px; border-radius: 10px; height: 60px; margin-bottom: 10px;}

/* DRAGGABLE CARDS */
.drag-list{  overflow:hidden;  margin:10px auto;  width:100%;}
.drag-item{ cursor:pointer; width: 45%; float:left;  padding:10px 20px;  text-align:left;  color:#555;  background:#f7f7f7;  border:1px solid #eee;  box-sizing:border-box;  transition:0.25s;
    border-color: #d7dfe3;    border-radius: 4px;    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05); margin: 20px; }
.drag-start{  opacity:0.8;}
.drag-enter{  opacity:0.5;  transform-scale:(0.9);}
.group-title1 {    font-family: 'DBHeavent-Med';    letter-spacing: 0.03em;}
.box-group{margin:0; padding:5px;float: left;}
.line01{border-top:1px solid #e9e9e9; line-height:1px; margin-top: -10px;}
.w-5 {width:5%; text-align:center;}
.color1{color:#0384a9; font-size:16px;}
.card-subtitle1{font-family: 'DBHeaventt-Light';   color:#158db0; font-size:20px; letter-spacing: 0.03em;}
#login-form small.help-block { color: red; }
#validateForm small.help-block{ color: red; }
form .error {	color: #ff0000; text-transform: lowercase;	}
#language i {position: absolute; font-size: 20px; top: -5px;    right: -10px;}
.notificat{width:68px; height: 68px;}
.noti{width: 85%;}

/* GROUP DASHBOARD */
.group-d{float:left;padding: 5px;}

.criteria{border:1px solid #e9e9e9; padding: 10px; border-radius: 4px; margin-left: 10px; margin-top: -10px; max-width: 98%;}
.maintence img{width: 50px;}
.pic-maintence{padding: 10px; float:left;}
.main{font-family: 'DBHeavent-Med'; font-size:24px; letter-spacing: 0.03em; }
.fix{font-family: 'DBHeaventt-Light'; font-size:22px; letter-spacing: 1px; padding: 30px;  margin:20px;border-radius: 4px; margin: 0 auto; }
.fix-col{float:left; background-color: #f2f3f8; padding-bottom: 10px;}