/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3-mag-2018, 9.53.50
    Author     : rantoniozzi
*/

.material .nav-tabs { border-bottom:1px solid #eee; }
.material .laundry_tab{ margin-top: -2px;} 
.material .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.material .nav-tabs > li > a { border: none; color: #666; }
.material .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #2A3F54 !important; background: transparent; }
.material .nav-tabs > li > a::after { content: ""; background: #ff9900; height:2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.material .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.material .tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.material .tab-pane { padding: 17px 0; }
.material .tab-content{padding:20px}

.material .scrtabs-tab-scroll-arrow{ border-left:none!important;border-right:none!important;border-bottom:1px solid #eee;margin-top: -1px;}

.profile_view {
    display: inline-block;
    padding:8px 0px 0px 0px;
    background: #fff;
    width: 100%;
    border-radius: 1px;

}
.ombra{
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.collapser {position: relative; width:20px; height: 12px} 
.collapser input{ border: 1px solid #fff; display: block; height:18px;width: 20px;display: none } 
.collapser .collapser-btn{
    position:absolute; left:0; top:0 ;
    color: #73879c;font-size: 18px;
    cursor: pointer; font-weight: 100;
    -webkit-transition: .9s;
    transition: .9s;
} 
.collapser .collapser-btn:after{
    position:absolute; left:0; top:0;
    font-family: FontAwesome; 
    content: "\f0e8";
    -webkit-transition: .9s;
    transition: .9s;
}
.collapser input:focus + .collapser-btn:after{content: "\f0e8"; }
.collapser input:checked + .collapser-btn:after{ content: "\f067"; }



.profile_view img{  max-height: 80px;margin: 0 auto; } 
.profile_view h5{ margin-bottom: 2px}

.profile_view .list-unstyled{ margin-bottom: 10px}
.profile_view .left{min-height: 120px}
.profile_view h4{ margin-top: 3px; font-size: 20px;margin-bottom: 10px}

.profile_view .right {padding-bottom:15px }
.profile_view .bottom {
    background: #F2F5F7;
    padding: 9px 0;
    border-top: 1px solid #E6E9ED;}
.profile_view.disabled{ background-color: #f0f0f0;cursor: not-allowed;}
.profile_view.disabled img{ opacity: 0.5} 
.profile_view .list-unstyled li{ padding-top: 4px; padding-bottom: 4px; font-size: 15px }
/*.nav-md .nav_menu{
     position: fixed!important;
    z-index: 10;
    right: 0px;
    left: 230px;

}
.nav-sm .nav_menu{
      position: fixed!important;
    z-index: 10;
    right: 0px;
    left: 230px;

}*/

.x_content .panel-group .panel {
    margin-bottom: 0;
    border-radius: 1px;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.05);
    box-shadow: 0 0px 0px rgba(0,0,0,.05);
}
.x_content .panel-group .panel h5{color:#73879C; font-size: 15px}
.accordion-toggle { position: relative;margin-left: 20px }
.accordion-toggle:before{position: absolute; left:-20px;font-family: FontAwesome; content: "\f068"; }
.accordion-toggle.collapsed:before{position: absolute; left:-20px;font-family: FontAwesome; content: "\f067 "; }

.list-unstyled span{ font-weight:700}
.btn-text{ position: relative; height: 30px; margin-right: 15px}
.text-auto{ 
    position:absolute;
    left:10px;right:20px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}


.tank{width		: 100%;
      height		: 270px;
      font-size	: 11px;
}

.input-group-addon{ border-radius: 1px; font-size: 11px; padding-left: 5px; padding-right: 5px}
.amcharts-chart-div a{ color:#fff}

.buttons-colvis{
    font-size: 12px;color:#73879C
}
ul.dt-button-collection.dropdown-menu{
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
ul.dt-button-collection.dropdown-menu > .active > a,
ul.dt-button-collection.dropdown-menu > .active > a:focus, 
ul.dt-button-collection.dropdown-menu > .active > a:hover{
    background-color: #fff;
    color:#73879C
}

ul.dt-button-collection.dropdown-menu > .active > a:before{
    position: absolute; left:6px;font-family: FontAwesome; content: "\f00c"; 
}

.modal-scrollable{
    max-height:75vh;
    overflow-y:auto;
}

.dosing-channel{
    box-sizing: border-box;
    white-space: nowrap;
    margin-top:5px;margin-right: 2px;    
    border-radius: 3px;
    font-size:13px;
    position:relative;
    min-width: 90px    ;
         border:1px solid transparent;
}
.dosing-animation{
    background-image: 
    repeating-linear-gradient(
     -45deg, 
      transparent, 
      transparent     5px,
      rgba(10,10,10,0.2) 5px,
      rgba(10,10,10,0.2) 10px
    )!important;
  background-size: 200% 200%;
  animation: barberpole 4s linear infinite;
}
@keyframes barberpole {
  100% {
    background-position: -100% 100%;
  }
}
.dosing-channel-default{
    margin-right: 15px;
    background-color: #fff;
    color:#333;
    display:block;
    padding:3px 3px 0px 3px;   
    
}
.dosing-channel-chemical{
    border:1px dashed #ddd;
    margin-right: 15px;
    background-color: #fff;
    color:#333;
    display:block;
    padding:3px 3px 0px 3px;   
    
}

/*.dosing-channel-default:after {
    position:absolute;
    right:-9px;top:10px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:-10px;
    margin-left: -10px;
    
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ddd;
}*/
.dosing-channel-alarm{
   
    padding:3px;   
    margin-right: 15px;
    background-color: #d9534f;
    color:#fff;
    display:block
}
.dosing-channel-alarm-noarrow{
   
    padding:3px;   
    
    background-color: #d9534f;
    color:#fff;
    display:block
}
.dosing-channel-alarm:after {
    position:absolute;
    right:-13px;top:0px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #d9534f;
}
.dosing-channel-normal{
    padding:3px;   
    background-color: #26b99a;
    margin-right: 15px;
    color:#fff;
    display:block
}
.dosing-channel-normal-noarrow{
    padding:3px;   
    background-color: #26b99a;
   
    color:#fff;
    display:block
}
.dosing-channel-normal:after {
    position:absolute;
    right:-13px;top:0px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #26b99a;
    
}
.dosing-channel-noworking {
    background-color: #337ab7;
    color:#fff;
    margin-right: 15px;
    display:block;
    padding:3px 6px 3px 6px;
  }
  .dosing-channel-noworking:after {
    position:absolute;
    right:-13px;top:0px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #337ab7;
    
}

.dosing-channel-info {
    background-color: #337ab7;
    color:#fff;
    float:left;
    padding:3px 6px 3px 6px;
  }
.dosing-channel-info-noarrow {
    background-color: #337ab7;
    color:#fff;
    display:block;
     padding:3px 6px 3px 6px;
    }
.dosing-channel-success {
    background-color: #26b99a;
    color:#fff;
    float:left;
    padding:3px 6px 3px 6px;
    
}

.device-icon{ font-size: 18px}
.device-icon .badge{ font-size: 14px}


/*-------------- CHARTS ELEMENT -----------------------------------------*/ 
.performance-gauge{ height:110px; margin-bottom: 10px; width:210px}
.chart-container{ position: relative}
.chart-loading{ position:absolute;  text-align:center; left:0; right:0; top:42%; display:none}
.chart-loading i{ font-size: 40px; text-align:center}
.chart-nodata{ text-align: center; position:absolute; top:45%;left:0; right:0; display:none}
.chart-nodata h4{text-align: center}

.whashing_donut{ min-height: 300px}

input[type=time]{ max-width:100px}
.tableTotal th{ font-weight: 600} 
.btn-yellow {
  background: #f9f902;
  color: #000;
  border: none;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-yellow:hover, .btn-yellow:focus {
 background: #f9f902;
}
.btn-yellow:active {
  background: #f9f902;
}
.btn-orange {
  background: #ffa500;
  color: #000;
  border: none;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.btn-orange:hover,.btn-orange:focus {
 background: #ffa500;
}
.btn-orange:active {
 background: #ffa500
}
.waitingContainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
    position:absolute;  z-index: 1031; top:0;left:0;right:0;bottom:0;
    background-color: rgba(255, 255, 255,0.8)
}
.waitingContainer i{font-size: 80px; color:#aaa}

.dataTables_processing { height: 70px;   background-color:rgba(255, 255, 255,0.8)  }
.dataTables_processing i{ font-size: 40px} 

table.dataTable tbody th,
table.dataTable tbody td {
    white-space: nowrap;
}

.page-header{border: 1px solid red; margin: 50px -20px 0px -20px; min-height:100px}



#chemical_total_chart{ width:100%;height:450px}
#chemical_storic_chart{width:100%x}
#compare_chemical_total_chart{ width:100%; height:450px}
#compare_chemical_storic_chart{width:100%; }
/*-------------- MEDIA QUERY CSS-----------------------------------------*/
@media (min-width: 322px) { 
    #chemical_total_chart{ height:450px}
#chemical_storic_chart{height:450px}
#compare_chemical_storic_chart{ height:450px}
    .profile_details{  }
    .slider-input{ padding-top:45px}
}
@media (max-width: 321px) { 
    #chemical_storic_chart{height:900px}
#compare_chemical_storic_chart{ height:900px}
    .profile_details{  }
    .slider-input{ margin-bottom:15px}
}