/*============================ ICON ===========================*/

/***** BATTERY ICON *****/
.ion-battery-half,
.ion-battery-full,
.ion-battery-empty,
.ion-battery-low {
  color:#333333;
  font-size:24px;
}

.ion-battery-empty
{
  color:#d74548;
}

.ion-battery-half,
.ion-battery-low  {
  color:#ffc107;
}

.ion-battery-full {
  /*color:#00965e;*/
  color:#6bde44;
}

/***** SIGNAL ICON *****/
.sizing-box {
    height: 15px;
    width: 29px;}

.signal-bars {
  display: inline-block;
  font-size: 2px;
  margin-left: -10px;}

.signal-bars .bar {
  width: 5px;
  margin-left: 2px;
  min-height: 20%;
  display: inline-block;}

    /*
.signal-bars .bar.first-bar  { height: 20%; }
.signal-bars .bar.second-bar { height: 40%; }
.signal-bars .bar.third-bar  { height: 60%; }
.signal-bars .bar.fourth-bar { height: 80%; }
*/
.signal-bars .bar.empty-bar  { height: 0%; }
.signal-bars .bar.first-bar  { height: 20%; }
.signal-bars .bar.second-bar { height: 40%; }
.signal-bars .bar.third-bar  { height: 60%; }
.signal-bars .bar.fourth-bar { height: 80%; }
.signal-bars .bar.fifth-bar  { height: 99%; }

/*
.good .bar {
    background-color: #e74c3c;
    border: thin solid darken(#e74c3c, 50%);}
*/
.good .bar {
  background-color: #333333;
  border: thin solid darken(#f1c40f, 7%);
}
.bad .bar {
  background-color: #333333;
  border: thin solid darken(#e74c3c, 20%);
}
/*
.ok .bar {
  background-color: #16a085;
  border: thin solid darken(#16a085, 7%);
}
*/
.ok .bar {
  background-color: #333333;
  border: thin solid darken(#16a085, 7%);
}

.zero-bars .bar,
.four-bars .bar.fifth-bar,
.three-bars .bar.fifth-bar,
.three-bars .bar.fourth-bar,
.one-bar .bar:not(.first-bar),
.two-bars .bar:not(.first-bar):not(.second-bar) {
    background-color: #fafafa;
    border: thin solid #2f353f1a;}
   
   
/***** FILLING STATE ICON *****/ 
.table .filling_state {
}
.table-datatable .table>tbody>tr>td.filling_state {
	padding:0px 10px;
	line-height:45px;

}
.table-datatable .table>tbody>tr>td.filling_state span {
	vertical-align:middle;
	padding-left:30px;
}
.table-datatable .table>tbody>tr>td.filling_state i {
	font-size:28px;
	margin-top:10px;
	position:absolute;
	left:0px;
	top:-11px;
}

.table-datatable .table>tbody>tr>td.filling_state span {
	border: 1px solid #c8c8c9;
	padding: 0px 5px 0px 35px;
	border-radius: 3px;
	position:relative;
	display:inline-block;
	height:33px;
	min-width:90px;
    line-height: 33px;
	font-weight:500;
	text-align:left;
}

.table-datatable .table>tbody>tr>td.filling_state span.text-danger {
	border-color: #d74548;
}
.table-datatable .table>tbody>tr>td.filling_state span.text-warning {
	border-color: #f7c836;
}
.table-datatable .table>tbody>tr>td.filling_state span.text-success {
	border-color: #34c73b;
}
.table-datatable .table>tbody>tr>td.filling_state span.text-info {
	border-color: #3fb7ee;
	padding:0px 5px 0px 30px;
}

    
/*============================ RESPONSIVE ===========================*/

@media (max-width: 768px) {
    
    /* signal bar*/
    /*
    .sizing-box {
        height: 15px;
        width: 25px;
        margin-top: 5px;}
    
    .signal-bars {
        display: inline-block;}
    
    .signal-bars .bar {
        width: 14%;
        margin-left: 0px;
        min-height: 20%;
        display: inline-block;}
        
    .signal-bars .bar.first-bar  { height: 20%; }
    .signal-bars .bar.second-bar { height: 40%; }
    .signal-bars .bar.third-bar  { height: 60%; }
    .signal-bars .bar.fourth-bar { height: 80%; }
    .signal-bars .bar.fifth-bar  { height: 99%; }
 
    .good .bar {
      background-color: #f1c40f;
      border: thin solid darken(#f1c40f, 7%);
    }
    .bad .bar {
      background-color: #e74c3c;
      border: thin solid darken(#e74c3c, 20%);
    }
    .ok .bar {
      background-color: #16a085;
      border: thin solid darken(#16a085, 7%);
    }
    .four-bars .bar.fifth-bar,
    .three-bars .bar.fifth-bar,
    .three-bars .bar.fourth-bar,
    .one-bar .bar:not(.first-bar),
    .two-bars .bar:not(.first-bar):not(.second-bar) {
        background-color: #fafafa;
        border: thin solid #f3f3f3;}
  
}