/*#fbd94c*/
/*.material .nav-tabs { border-bottom: none!important;}*/
.material .nav-tabs { border-bottom:1px solid #eee; }
.material .laundry_tab{ margin-top: -2px;} 
.material .nav-tabs > li.active > a{ font-weight: 800; }
.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; padding: 13px 8px 12px; display: block; }
.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 .nav-tabs > li:first-child{  border-left: 1px solid  #eee;} */
.material .nav-tabs > li:last-child{  border-right:none !important}
.material .nav-tabs > li{  border-right: 1px solid  #eee; margin-top: 4px;} 

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

.material .nav-tabs > li.disabled{
    opacity: 0.4;
    pointer-events: none;
}

.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;
}
.text-auto1{ 
    left:10px;right:20px;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.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 ,.buttons-print, .buttons-csv,.buttons-copy{
    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); z-index: 1050!important  }
.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:400px}
#chemical_storic_chart{width:100%;height: 400px}
#compare_chemical_total_chart{ width:100%; height:400px}
#compare_chemical_storic_chart{width:100%;height: 400px }
.chartsTab #chemical_total_chart{ width:100%;height:190px!important}
.chartsTab #chemical_storic_chart{width:100%;height:260px!important}
.chartsTab #compare_chemical_total_chart{ width:100%; height:190px!important}
.chartsTab #compare_chemical_storic_chart{width:100%;height: 260px !important}

.role-icon{     
    display: inline-block;
    padding: 5px 30px 5px 10px;    
    border-radius: 3px;
    white-space: pre-line;
    position: relative;    
}
.badge.GLOBAL{ height: 14px; margin-right: 10px}
.role-icon.GLOBAL,.badge.GLOBAL{
    background-color: #26445c;
    color:#fff
}
.role-icon.REGION{
    background-color: #23517c;
    color:#fff
}
.role-icon.AREA{
    background-color: #005d9a;
    color:#fff
}
.role-icon.COUNTRY{
    background-color: #517eb4;
    color:#fff
}
.role-icon.LOCAL_AREA{
    background-color: #90a7cc;
    color:#fff
}
.role-icon.TECHNICAL{
    background-color: #c9d0e5;
    color:#666
}
.role-icon.APPLICATION{
    background-color: #e2e0e1;
    color:#666;    
}

.role-info{position: absolute; right: 3px; top:0px; font-size: 20px; padding:5px   }
.role-icon.GLOBAL .role-info, .role-icon.REGION .role-info, .role-icon.AREA .role-info, .role-icon.COUNTRY .role-info,.role-icon.LOCAL_AREA .role-info { color:#fff;}
.role-icon.TECHNICAL .role-info, .role-icon.APPLICATION .role-info{ color:#666;}

#treeviewContainer{overflow-y: auto;overflow-x: hidden; margin-top: 10px; margin-right: -16px}
.treeview .list-group-item{
    padding-left: 20px
}
.node-result .role-icon{
    background-color: #bb542a!important;
    color:#fff!important
}
.displaynone{
    display:none
}
.btn-disabled{
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}
.tooltip {
    z-index: 1030 !important;
}
@font-face
{
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.password
{
    font-size: 11px;
    font-family:dotsfont;
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;}
.advanced{border-bottom: 2px solid #E6E9ED;;margin-top: 10px; margin-bottom: 10px; padding-bottom:8px}
.panel-collapsable-header .clickable { color:#C5C7CB; cursor:pointer}
.table-container{ position: relative; min-height: 140px}
.table-loading{ margin: 0px; position:absolute;  text-align:center; left:0; right:0; top:0;bottom: 0px; display:none; z-index: 1040;  background-color:rgba(255, 255, 255,0.6)}
.table-loading i{margin-top: 10%; font-size: 40px; text-align:center}

#vpnError{ color:#bb532a}
.disclaimer-body{ max-height:200px; overflow-y: auto; overflow-x: hidden}
.badge-round{border-radius:50%;height: 14px; width:14px; min-width: 14px; background-color: transparent;margin-top: -3px; }
.badge-round.GOOD, .badge-round.CLEARED{ background-color:#5cb85c }
.badge-round.POOR, .badge-round.WARNING{ background-color:#fbd94c }
.badge-round.AVERAGE, .badge-round.SEVERE{ background-color:#ea8f32 }
.badge-round.CRITICAL{ background-color:#d1332e }
.badge-round.device-online{ background-color: #5cb85c}
.badge-round.device-offline{ background-color: #d9534f;}
.badge-round.device-busy{background-color: #f0ad4e}
.badge-round.device-none{background-color: #999}

.warning .alert-info{
    background-color:rgba(234,143,50,.9);
    border-color: #ea8f32!important;

} 

.sw-theme-arrows > ul.step-anchor > li.active > a{ background-color: #ea8f32!important; }
.sw-theme-arrows > ul.step-anchor > li.active > a:after {border-left: 30px solid #ea8f32!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.GLOBAL{ background-color: #26445c!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.GLOBAL:after {border-left: 30px solid #26445c!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.REGION{ background-color: #23517c!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.REGION:after {border-left: 30px solid #23517c!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.AREA{ background-color: #005d9a!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.AREA:after {border-left: 30px solid #005d9a!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.COUNTRY{ background-color: #517eb4!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.COUNTRY:after {border-left: 30px solid #517eb4!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.LOCAL_AREA{ background-color: #90a7cc!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.LOCAL_AREA:after {border-left: 30px solid #90a7cc!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.TECHNICAL{ background-color: #c9d0e5!important; color:#666!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.TECHNICAL:after {border-left: 30px solid #c9d0e5!important;}

.sw-theme-arrows > ul.step-anchor > li.done > a.APPLICATION{ background-color: #23517c!important}
.sw-theme-arrows > ul.step-anchor > li.done > a.APPLICATION:after {border-left: 30px solid #23517c!important;}

/*-------------- NEW LOOK  -----------------------------------------*/

body{     text-rendering: optimizeLegibility; 
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

}
.login-body{
    background-image: url('/images/style/login.jpg');
    background-position: center bottom;
    background-attachment: fixed
}
.login-box { 
    border-radius: 3px; -webkit-border-radius:3px;-moz-border-radius:3px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(222,235,244,0.8);
    padding: 15px
}
.login-box h1{  letter-spacing: 1px;font-size: 43px;color:#0075af; font-weight: 100; }
.login-box h4{  letter-spacing: 1px;font-weight: 100; color:#0075af;}
.login-box h6{   color:#0075af; font-size: 13px}
.login-box img{ height:45px; margin-top: -5px}
.login-input { background-color: #fff; padding: 6px;border-radius: 3px; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid rgba(222,235,244,1); text-align: left}
.login-input span{ padding-left: 3px; padding-right: 3px}
.login-input input{ border: none; width: 90%; background-color: #fff!important;-webkit-appearance: none; }
.login-input input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
}
.login-box select {
    position: relative;
    /* styling */
    background-color: white;
    border:none;
    width: 100%;
    display: inline-block;
    font: inherit;
    line-height: 1.5em; 


    /* reset */

    margin: 0;     
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select-arrow{ position: absolute;margin-top: 2px;margin-left: 6px; z-index: 1040}
/*----- menu_fixed contain the entire sidebar --------------------*/
.menu_fixed{ 
    background-image: url('/images/style/sidebar.jpg');
    background-position: center top;z-index: 1042 !important;
    background-repeat: no-repeat;
    background-color: #175287;
}
.navbar-fixed-top{ z-index: 1040!important}
/*----- scroll view is inside menu_fixed -------------------------*/
.scroll-view{ background: none !important;}
.left_col{  }


.nav_title{ background: none!important}
.alarm-type{ cursor: pointer}
.device-status, .alarm-type{ 
    display: block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.42857143;
    text-align: right;
    text-transform: uppercase;
    background-color: transparent!important;

}
.device-status.warning , .alarm-type.warning,.alarm-type.yellow{  color:#fbd94c!important}
.device-status.danger , .alarm-type.danger,.critical-alarms-count{   color:#d1332e}
.device-status.default, .alarm-type.default{  color:#73879C;}
.device-status.primary,   .alarm-type.primary{  color:#337ab7;}
.device-status.success{  color:#5cb85c}
.alarm-type.orange{color:#ffa500;}
.alarm-type.yellow{color:#f9f902;}
.wdp-badge-critical-alarms{
    background-color:#d1332e!important;
}
.wdp-badge-severe-alarms{
    background-color: #ea8f32!important
}
.wdp-badge-warning-alarms{
    background-color: #fbd94c!important
        /*  color: #bb532a!important;*/
}
.severe-alarms-count{color:#ea8f32}
.warning-alarms-count{   color:#fbd94c!important }
.count.green{ color:#5cb85c !important}
.application-header{
    margin-top: 50px;
    height: 120px; 
    margin-left: -20px; 
    margin-right: -20px; 
    color:#fff;
}
.application-header-compact{
    margin-top: 40px;
    height: 80px; 
    margin-left: -20px; 
    margin-right: -20px; 
    color:#fff;
}
.application-header.header-laundry, .application-header-compact.header-laundry{
    background-image: url('/images/style/header-laundry.jpg');
    background-position: 0px 0px;
    background-repeat: no-repeat
}
.header-dish{
    background-image: url('/images/style/header-dish.jpg');
    background-position: right bottom;
    background-repeat: no-repeat
}
.header-DISH{
    background-image: url('/images/style/header-dish.jpg');
    background-position: right bottom;
    background-repeat: no-repeat
}
.header-DRAIN{
    background-image: url('/images/style/header-drain.png');
    background-position: right bottom;
    background-repeat: no-repeat
}
.application-header.header-pool{
    background-image: url('/images/style/header-pool.jpg');
    background-position: 0px 0px;
    background-repeat: no-repeat
}
.application-header.header-technical{
    background-image: url('/images/style/header-technical.jpg');
    background-position: 0px 0px;
    background-repeat: no-repeat
}
.application-header.header-standard,.application-header-compact.header-standard{
    background-image: url('/images/style/header-standard.jpg');
    background-position: bottom left;
    background-repeat: no-repeat
}
.application-header h4 , .application-header-compact h4{
    border-radius:4px;
    display: table;  margin: 0px auto 0px auto; padding:8px; background-color: rgba(2,48,85,0.7)!important
}
.application-header h4 small, .application-header-compact h4 small{
    color:#fff
}
.nav_menu{background-color: #fff}
.ombra{
    -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
}

.profile_info span,.profile_info h2,.menu_section h3{
    color:#2562a9!important;
    text-shadow:none!important;
    width: 35%;
    padding-left: 0px; 
    text-align: center
}
/*  #1b4c86  */
.profile_info h2{
    text-align: left;
    width:100%;
     text-overflow: ellipsis;
    max-width:160px; overflow: hidden;
}
.nav.side-menu > li > a, .nav.child_menu > li > a.nav.side-menu > li > a, .nav.child_menu > li > a,.main_menu span.fa{ 
    color:#fff!important;
}


.nav-sm .side-menu > li:first-child > a{
    color:#2562a9!important

}
.nav.side-menu > li.current-page > a, .nav li li.current-page a{ 
    color:#fff!important
}
.nav.side-menu > li.active > a{ 
    background: rgb(47,120,177)!important;
    background-color: rgb(47,120,177)!important;
    color:#fff!important
}

#sidebar-menu .nav > li > a:hover, #sidebar-menu .nav .current-page{
    background-color:#2f78b1!important;
    color:#fff!important
}

#sidebar-menu .nav .current-page{
    color:#fff
}
.nav.side-menu > li.current-page, .nav.side-menu > li.active{
    border-right: 5px solid #1b4c86!important;

}
.nav_title img{
    height: 30px;
    margin-left: 15px;
}
#menu_toggle{
    color:rgb(37,98,169)
}
.profile_pic{
    text-align: center; 
}
.profile_pic i{
    color:#2562a9!important;
    font-size: 60px; 
    margin-top: 25px
}
.profile_info{
    color:#fff
}
#myNavbar i,#myNavbar a {
    color:#0075af!important;
}

.dosing-channel.dosing-channel-info-noarrow,.dosing-channel-alarm-noarrow,.dosing-channel-normal-noarrow{
    border-radius:12px 2px 2px 12px;

}
.dosing-channel-info-noarrow{
    margin-right: -7px
}
.dosing-channel-noworking{
    margin-left: -7px; border-radius: 2px
}

.nav-md ul.nav.child_menu li:before {
    background: #fff!important;
}
.nav-md ul.nav.child_menu li:after {
    border-left: 1px solid #fff!important
}

#organization-legend table th{ padding: 5px; margin: 2px; text-align: center;width: 13%;}
#organization-legend table{ width: 100%}
.content p{ font-size: 11px!important}
/*-------------- LED COLOR ------------------------------------*/
.led-green{     background-color: #5cb85c }
.led-yellow{    background-color: #fbd94c }
.led-red{       background-color: #d1332e /*#bd532a*/ }
.led-blue{      background-color: #00508f}
.red{color:#bd532a!important;}


/*-------------- NOTIFICATION  BANNER -------------------------*/
#banner{
    padding:15px;
    background-color: rgba(250,250,250,0.8);
    position: fixed;
    bottom:0;    

    z-index:1090;    
    transition: all .3s ease-out;
    max-height: 500px;
}
#banner.closed{ max-height: 0px; }
#banner .title{ margin-bottom: 5px; color:#005ea6}
.fadein, .fadeout {
    opacity: 0;
    -moz-transition: opacity 0.8s ease-in-out;
    -o-transition: opacity 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
}
.fadein {
    opacity: 1;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 99%;
}

.widget-dashed-border{ 
    border:1px dashed transparent; 
    margin-right:-1px!important; 
    margin-bottom: -1px;
    min-height: 250px;
    align-items: center;
    justify-content: center;
}
.widget-dashed-border .title{
    font-size: 13px;
}
.widget-dashed-border .subtitle{
    font-size: 12px
}



.widget-dashed-border:after {
    display: block;
    content: '';
    background: #eee;
    height: 1px;
    margin-bottom:1px;
    position:absolute;
    bottom:10px;
    left:20px;
    right:20px

}
.widget-setting{
    min-height: 160px
}
.widget-setting:after {
    display: block;
    content: '';
    background: #eee;
    height: 1px;
    margin-bottom:1px;
    position:absolute;
    bottom:10px;
    left:20px;
    right:20px

}

.label-PARKED,.label-SUSPENDED,.label-WORKING,.label-RUNNING,.label-ASSIGNED, .label-DEPLOY,.label-REMOVED,.label-DEPLOY_ERROR,.label-INSTOCK,.label-SUBSTITUTED,.label-MERGED{ 
    color:#fff;
    font-size: 11px!important
}
.label-PARKED{background-color: #31b0d5}
.label-SUSPENDED{background-color:#ea8f32}
.label-SUBSTITUTED{ background-color: #2562a9}
.label-WORKING,.label-RUNNING{background-color:#5cb85c}
.label-ASSIGNED, .label-DEPLOY{background-color:#337ab7}
.label-REMOVED{background-color:#bd532a}
.label-MERGED{background-color:#fbd94c;color:#333}
.label-INSTOCK{background-color: #31b0d5;}
.label-DEPLOY_ERROR{background-color:#bd532a}


.icon-PARKED,.icon-SUSPENDED,.icon-WORKING,.icon-RUNNING,.icon-ASSIGNED, .icon-DEPLOY,.icon-REMOVED,.icon-DEPLOY_ERROR,.icon-INSTOCK,.icon-SUBSTITUTED,.icon-MERGED{ 
   font-size: 1.2em!important; font-weight: ;
}
.icon-PARKED{color: #31b0d5}
.icon-SUSPENDED{color: #fbd94c}
.icon-SUBSTITUTED{ color: #2562a9}
.icon-WORKING,.icon-RUNNING{color:#5cb85c}
.icon-ASSIGNED, .icon-DEPLOY{color:#337ab7}
.icon-REMOVED{color:#bd532a}
.icon-MERGED{color:#ea8f32}
.icon-INSTOCK{color: #31b0d5;}
.icon-DEPLOY_ERROR{color:#bd532a}

.efficiency-bar{position:relative}
.autorefresh{font-size:12px!important; margin-top:3px}
/*-------------- BARRA SCORRIMENTO LATERALE --------------------------*/
.left_col .mCSB_scrollTools{ width: 16px!important}
.left_col .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:12px!important;}

[data-toggle~="collapse"] {
    cursor: pointer;
}

ul.simple { list-style-type: none}
ul.simple li{ list-style-image: none;list-style-type: none;}

body{ overflow-x: hidden}
.btn-device{ padding: 7px}
.right_col{
    overflow-x: hidden; 
    overflow-y: hidden
}
/*** custom checkboxes ***/
.customCheckbox{ background-color: #fff}
.customCheckbox label{font-size:14px; font-weight: 100 ; } 
.customCheckbox input[type=checkbox] + label{ margin-left: 10px; margin-right: 10px}
.customCheckbox input[type=checkbox] { display:none; } /* to hide the checkbox itself */

.customCheckbox input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    font-size:16px;
}

.customCheckbox input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
.customCheckbox input[type=checkbox] + label:before { letter-spacing: 13px; } /* space between checkbox and label */

.customCheckbox input[type=checkbox]:checked + label:before { content: "\f046"; color:#005ea6} /* checked icon */
.customCheckbox input[type=checkbox]:checked + label:before { letter-spacing: 10px; } /* allow space for check mark */
table.noborder{ border: none!important}
td.left{ text-align: left; border-left: 1px solid #ccc}
.accepted{ color:#5cb85c }
.not-accepted{ color:#bd532a}
.opaque{ opacity: 0.2}
#device-container {	
    width:100%;
    height: 80%;
    display: inline-flex;
    display: -webkit-inline-flex; ;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}
.group-box{
    border:1px solid #E6E9ED; background-color: #fcfcfc; margin-bottom:15px;
}
.group-box.running{    border: 1px solid #5cb85c; }
.group-box.error{ border: 1px solid #bb532a;}
.group-box .panel-default > .panel-heading{ background-color: #eee} 
.dispenser-box{
    border:1px solid #E6E9ED;
    border-bottom: none;
    padding:5px; background-color: #fbfbfb;
    min-height: 60px;
    position:relative;
    margin-left: -1px;margin-top: -1px; margin-right: -1px;
    margin-bottom: 4px
}
.device-box{
    border:1px solid #E6E9ED;
    padding:5px; background-color: #fff;
    min-height: 245px;
    position:relative;

}
.device-box .bottom-alarm{
    border-top: 1px solid #E6E9ED;
    position: absolute; bottom:0; left:5px; right:5px;
    padding-bottom: 4px; padding-top: 6px
}
.device-separator{ border-bottom: 1px solid #E6E9ED; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px}
.device-box .alarm-type{ text-align: center!important}
.dispenser-box.running,.device-box.running{  border: 1px solid #5cb85c; background-color: #edf7ed; }
.dispenser-box.running{ border-bottom: 1px solid #E6E9ED!important}
.dispenser-box.standby{ border-bottom: 1px solid #E6E9ED!important}
/*.dispenser-box.standby,.device-box.standby{  border: 1px solid #fbd94c; background-color: #fefae6}  -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 6px rgba(0,0,0,0.5);*/
.dispenser-box.error,.device-box.error{  border: 1px solid #bb532a; background-color: #faefea; }
.dispenser-box.error{  border-bottom: 1px solid #E6E9ED!important}
.dispenser-box.warning,.device-box.warning{   border:1px solid #fbd9b4; background-color:#fefae6; }
.dispenser-box.warning,.device-box.severe{   border:1px solid #ea8f32; background-color:#fdf2e8; }
.dispenser-box.critical,.device-box.critical{  border: 1px solid #bb532a; background-color: #faefea; }
.dispenser-box.warning,.dispenser-box.severe,.dispenser-box.critical{ border-bottom: none}
.device-box.standby .washer_running,.device-box.error .washer_running{display:none}
.device-box .washer_standby,.device-box.error .washer_standby{display:none}
.device-box.standby .washer_standby{display:block}
.device-box.standby .phase-dot,.device-box.error .phase-dot{display: none!important}
.device-box.error .washer_standby{display:block!important}
.efficiency-dot {
    height: 50px;
    width: 50px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    color:#666;
    margin-top: 4px
}

/*--------- DEVICE BOX WITH ALARM STATUS ---------------------*/

.group-box.CRITICAL,.dispenser-box.CRITICAL{
    border: 1px solid #bb532a!important; background-color: #faefea!important;
}
.group-box.SEVERE,.dispenser-box.SEVERE{
    border: 1px solid #ea8f32!important; background-color:#fdf2e8!important;
    /*border: 1px solid #fbd9b4!important; background-color:#fefae6!important;*/
}
.group-box.WARNING,.dispenser-box.WARNING{
    border: 1px solid #fbd9b4!important; background-color:#fefae6!important;
}
.tunnel-device-box.WARNING{
    border-top:1px solid #fbd9b4; 
    background-color:#fefae6!important;
}
.tunnel-device-box.SEVERE{
    border-top:1px solid  #ea8f32; 
    background-color:#fdf2e8!important;
}
.tunnel-device-box.CRITICAL{
    border-top:1px solid #bb532a; 
    background-color: #faefea!important;
}
.dispenser-box.CRITICAL,.dispenser-box.SEVERE,.dispenser-box.WARNING{ border-bottom: none !important;}


.ui-pnotify.SEVERE .ui-pnotify-container {
  background-color: #ea8f32 !important; opacity: 0.9
}
.ui-pnotify.SEVERE .ui-pnotify-title,
.ui-pnotify.SEVERE .ui-pnotify-text {
  color: #fff!important;
}
.ui-pnotify.SEVERE .alert-info{ border:1px solid #ea8f32}

.ui-pnotify.CRITICAL .ui-pnotify-container {
  background-color: #d1332e !important; opacity: 0.9
}
.ui-pnotify.CRITICAL .ui-pnotify-title,
.ui-pnotify.CRITICAL .ui-pnotify-text {
  color: #fff!important;
}
.ui-pnotify.CRITICAL .alert-info{ border:1px solid #d1332e}

.ui-pnotify.WARNING .ui-pnotify-container {
  background-color:#fbd94c  !important; opacity: 0.9
}
.ui-pnotify.WARNING .ui-pnotify-title,
.ui-pnotify.WARNING .ui-pnotify-text {
  color: #151515 !important;
}
.ui-pnotify.WARNING .alert-info{ border:1px solid #fbd94c }

.phase-dot {
    height: 25px;
    width: 25px;
    margin-bottom: 4px; margin-right: 2px; padding-top: 3px;
    border-radius: 50%;
    display: inline-block;
    color:#fff; 
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background-color: #ddd; 
    opacity: 0
}
.phase-dot.ended  {   background-color:#1ABB9C; }
.phase-dot.running  {   border: 1px solid #1ABB9C; color:#1ABB9C; }
.phase-dot.waiting{   
    border: 1px solid #1ABB9C; color:#1ABB9C;animation: blinker 2s step-start infinite;
    /*background-color:#fbd94c; */
}
.phase-dot.holding{   background-color:#fbd94c; }
/*  blinker 1s mean the animation duration of PHASES DOT for 1 seconds */
.phase-dot.flushing{ 
    animation: blinker 1s step-start infinite;
    background-color: #337ab7;}
/*  blinker 1s mean the animation duration of PHASES DOT for 1 seconds */
.phase-dot.dosing{
    animation: blinker 1s step-start infinite;
    background-color: #1ABB9C;}
.phase-dot.abort   { background-color: #d9534f;}
.phase-dot.holding {background-color: #ccc}
.phase-dot.severe{background-color:  #ea8f32}
.phase-dot.warning{ background-color: #fbd94c}
.phase-dot.yellow{ background-color: #fbd94c}
.device-box.standby .phase-dot{ opacity: 0!important}

.efficiency-dot h3{  margin-top: 16px; font-size: 16px; font-weight: bold;}
.efficiency-dot.red1{ background-color: #d9534f;color: #fff}
.efficiency-dot.yellow{ background-color: #fbd94c;color: #666 }
.efficiency-dot.green{ background-color: #26b99a;color: #fff }

.wdp-badge-no-alarms{ background-color: #26b99a;color:#666}
.settingBox{ min-height: 90px; border-bottom:1px dashed #E6E9ED;padding-top: 5px}
/* DEFAULT DEFINITION OF BLINKER ANIMATION 60% mean the time ON so 40% is the time OFF */
@keyframes blinker {
    60% {
        opacity: 0.4;
    }
}
.device-icon a{ cursor: pointer}
h5.longtext{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-sm {
    max-width: 300px;
}

.container.body .right_col.dwi{padding: 10px }
.installation-site{ margin-top: 60px; width:100%}

.installation-site .icon{
    color:#fff;
    background-color: #00508f;
    border-radius: 50%;
    display: inline-block;
    font-size:30px;
    width:50px; height: 50px;
    text-align: center;
    padding-top: 3px; 
    margin-top: 4px; 
    margin-left: 4px
}
.installation-site.icon-small {
    color: #fff;
    background-color:
    #00508f;
    border-radius: 50%;
    display: inline-block;
    font-size: 13px;
    width: 20px;
    height: 20px;
    text-align: center;
    padding-top: 1px;
    margin-top: 0px
}

.installation-site .group-box{
    padding-right: 10px;     padding-left: 5px; 
}
.installation-site .device-box{  margin-right: 0px; margin-bottom:10px} 
.device-box-footer{ background-color: #F2F5F7; padding-top: 5px; min-height: 30px;  position: absolute; left: 0px; right: 0px; bottom: 0px}
.shift-form input[readonly]
{
    background-color:#fff;
}
.echartGaugeContainer{ width:300px;min-height:100px;  background-color: #fff;position: relative; margin: 0 auto;  }
.echartGaugeContainer .gauge { width:100%; height:240px;}



td >  table td,td >  table { vertical-align: top}
.list-unstyled li{ overflow: hidden; width: 100%}
.efficiencyButtons{ position:absolute;right:2px;top:0px; z-index:1029; }
#tabArea .x_panel{ padding: 15px 5px;overflow-x: auto }

.tableScroller{ overflow-y: auto; }
.tableScroller table{ width:100%!important}
/* DEFINITION TO NEW LAUNDRY FOR DOSING CHANNEL COLOR
.dispenser-box .dosing-channel-info-noarrow, .dispenser-box .dosing-channel-noworking{
    background-color: transparent!important;
    border:1px solid #26b99a;
    color:#666
}
.dispenser-box .dosing-channel-noworking:after {
   
    border-left: 13px solid #26b99a;

}
*/

.device-box .progress{ margin-top: 2px; margin-bottom: 2px; background-color: #ccc}
.progress-text{position:absolute;top:0px; left:0px; right:0px; z-index:1040; text-align: center; color: #fff; font-weight: 800}



.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.bootstrap-dialog.type-yellow .modal-header{
    background-color: #fbd94c
}
#level-tree{ min-height: 200px}
#level-tree .list-group-item{ border:none}
.sw-container tab-content{ min-height: 200px!important}
.captchaContainer img {height:80px}
.captchaContainer h5{ text-align: left; font-size: 14px; margin-top: 0px }
.captchaContainer h6{ color:#73879C;text-align: left; font-size: 12px; margin-bottom: 0px}
div.dataTables_wrapper div.dataTables_processing{
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
    width: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    height: auto;
    border-color: transparent
}
div.dataTables_processing i{position:absolute;
  top:45%;
  left:50%; }
/*---------------------------------------- START DWI NEW WIDGET CSS SPEC -------------------------------------------------------------*/
.widgetContainer{ 
    width:100%;
    height: 100%;
    display: inline-flex;
    display: -webkit-inline-flex; ;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center

}
.widgetBox{ 
    border:1px dashed transparent; 
    margin-right:-1px!important; 
    margin-bottom: -1px;
    min-width: 250px;
    min-height: 200px;
    position: relative;
}
.widgetBox .title{
    font-size: 14px;
}
.widgetBox .subtitle{
    font-size: 12px
}

.widgetBox:after {
    display: block;
    content: '';
    background: #fff;
    height: 1px;
    margin-bottom:1px;
    position:absolute;
    bottom:10px;
    left:20px;
    right:20px
}
.group-box .widgetBox{ min-width: 160px; z-index: 2; min-height: 150px!important}

.group-box .widgetBox p{ margin-top: 5px; }
.group-box .widgetBox select{ z-index: 1}
.widgetBox.bordered{border: 1px solid #e1ebf4!important;}
.widgetBox .bordered{border: 1px solid #e1ebf4!important; position:absolute; top:2px; left:2px; right:2px; bottom:2px; z-index: 1; padding-left: 10px; padding-right: 10px}
.widgetBox .echartGaugeContainer{ background-color: transparent; }
.widgetBox .buttons{
    position: absolute; left: 5px; right: 5px; bottom: 0px; margin-bottom: 0px
}
.echartGaugeContainer.half{
    width:200px;
    height: 160px;margin-top: 20px
}
.echartGaugeContainer.three-quarter{
    width:220px;
    height: 175px;margin-top: 20px
}
.echartGaugeContainer .options{
    position: absolute; left: 0px; top:0px; font-size: 11px; z-index: 1030;
}
.echartGaugeContainer .title{ position: absolute; left: 0; right: 0; text-align: center;bottom:25px }
.echartGaugeContainer.three-quarter .title{ bottom: 17px}
.echartGaugeContainer.half .title{bottom:15px}



#chemical-chart-1, #chemical-chart-2,#chemical-chart-3,#chemical-chart-4{    padding-left: 0px; padding-right: 0px; margin-left: -10px ; margin-right: -10px}
.collapsedInfo{ font-size: 20px}
.collapsedInfo .warning{ color:#fbd94c}
.collapsedInfo .alarmed{ color:#d1332e}
.digitalDisplay{ border:1px solid #e1ebf4; color:#73879C; padding-top: 25px; padding-bottom: 10px; margin:2px; min-width: 160px;height: 120px; position: relative}
.digitalDisplay .value{ padding-bottom: 10px; font-size:18px; font-weight: bold; color:#337ab7; margin-top: 10px}
.digitalDisplay .options{
    position: absolute; top:4px; left: 2px;
}
.digitalDisplay .options,.onOffSwitch .options,.onOffSwitch .options,.onOffIndicator .options{ font-size: 11px} 
.digitalDisplay .text{font-size: 12px; position: absolute;left:0px; right: 0px; bottom: 2px}
.ledWidget{ min-width: 160px;height: 120px; margin: 2px; padding-top: 25px; border:1px solid #e1ebf4; position:relative}
.ledWidget .led-green,.ledWidget .led-red,.ledWidget .led-gray{ width: 20px; height: 20px; margin-top: 25px}
.ledWidget .options{
    position: absolute; top:2px; left: 2px;font-size: 11px
}

.ledWidget .ledText{ font-size: 12px; position: absolute;left:0px; right: 0px; bottom: 0px}
.collapsedInfo .value{ font-weight: 800; font-size: 20px}
.dwi-chart{  border:1px dashed #f1f1f1;  position: relative; margin-bottom: 10px;}
.dwi-chart .chart-canvas{min-height: 250px; }
.dwi-chart .summary-chart-canvas{min-height: 340px; }
.easy-pie-chart{ position: relative; margin-top: 10px; height: 180px}
.easy-pie-chart .easyPieChartValue{ position: absolute;left:0;right: 0; top:55px; }
.easy-pie-chart .easyPieChartValue:after { content: attr(data-magnitude)}
.easy-pie-chart canvas{ width: 130px; height: 130px }
.easy-pie-chart .title{
    position: absolute; left:0px; right:0px;  bottom: 30px; z-index: 10
}
.dwi-chart-options{ position: absolute; right: 0px; bottom: 0px}
.dwi-chart .chart-message{ position: absolute;left: 0px; right: 0px; top:40%; text-align: center; font-size: 14px}
.widgetHidden{ 
   /* opacity:0.5*/
   position: absolute!important; left:-3000px;
}
.sliderInput{ width:90px; margin-left: 1px}
.label-xs{font-size:10px}
.pump_widget1 {
    display: inline-block;
    position: relative;
    width: 70px;
    height: 70px;
    border:2px solid #999;
    border-radius: 50%;
    -moz-transform: scale(.9999);
}
.pump_widget1:before{
    position: absolute;
    width: 50px;height: 50px;    
    top:5px; left:8px;
    content:"\f256";
    color:#d1332e;
    opacity: 0.8;
    font: normal normal normal 50px/1 FontAwesome;
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    z-index: 10;
}
.pump_widget1:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin:0px;
    box-sizing: border-box;
    border: 33px solid #146197;
    border-color: #146197 transparent #146197 transparent;
    -moz-transform: scale(.9999);
}
.pump_widget1.rotating:before{ background-image: none;
    width: 70px;
    height: 70px;
    color:#5cb85c;
    content:"\f01e";
    font: normal normal normal 50px/1 FontAwesome;
    left:9px; top:8px
}
.pump_widget1.rotating:after{
    animation: rotating linear 1s infinite;
}
.pump_widget2{
    display: inline-block;
    position: relative;
    background-image: url("/images/engine.svg");
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
    width:75px;
    opacity: 0.6;
    height:75px;
}
.pump_widget2.rotating{
    animation: rotating linear 1s infinite;    
}

.pump_widget3{
    display: inline-block;
    position: relative;
    background-image: url("/images/engine1.png");
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
    width:75px;
    opacity: 0.6;
    height:75px;
    border:2px solid #999;
    border-radius: 50% /*50% 0 0 ; /* top left, top right, bottom right, bottom left */

}
.pump_widget3:after{
    content:"";
    background-image: url("/images/engine1.png");
    width:75px;
    opacity: 0.6;
    height:75px;
}
.pump_widget3.rotating{
    animation: rotating linear 5s infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes reverserotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes reverserotating {
    from {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    to {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.switch_widget{
    display: inline-block;
    position: relative;
   
    background-size:     cover;                     
    background-repeat:   no-repeat;
    background-position: center center; 
    width:73px;
    opacity: 0.6;
    height:38px;
}
.switch_widget.close{
    background-image: url("/images/switch_close.svg");
}
.switch_widget.open{
    background-image: url("/images/switch_open.svg");
}
.customItem{ }
.datepicker-days table thead tr:nth-child(2) th{ font-weight: bold}
.datepicker-days table thead tr:nth-child(3){ display: none}
.month_day_picker[readonly]{ background-color: #fff}
.onOffSwitch{ min-width: 160px;height:120px; margin: 2px; padding:2px; border:1px solid #e1ebf4; position:relative}
.onOffSwitch .switchText{ position: absolute; left:0px; right: 0px;bottom: 0px}
.onOffSwitch .switch_widget{margin-left: 40px; margin-right: 40px; margin-top: 15px  }
.onOffIndicator{ min-width: 160px;height:120px; margin: 2px; padding:2px; border:1px solid #e1ebf4; position:relative}
.onOffIndicator .pump_widget1{ margin-left: 45px; position: absolute; top:25px; left:0px}
.onOffIndicator .switchText{ position: absolute; left:0px; right: 0px;bottom: 0px}
.valve{ min-width: 160px;height:120px; margin: 5px; padding:2px; border:1px solid #e1ebf4; position:relative}
.valve .valve_widget{ margin-left: 35px; margin-top: 20px}
.widgetBox .form-control{ margin-bottom: 2px; }
.widgetBox.rangeSlider{width:360px;     height: 160px; }
.widgetBox.slider{width:240px;          height: 160px}
.widgetBox.combo{width:180px;           height: 160px}
.widgetBox.combo select{font-size: 12px}
.widgetBox.text{width:180px;            height: 160px}
.widgetBox.text input{font-size: 12px}
.widgetBox.command{width:120px;         height: 130px; min-height: 130px!important; }
.widgetBox.command p.bottomMargin{ margin-bottom: 35px;}
.widgetBox.boolean{width:120px;         height: 160px}
.widgetBox.calendar{width:120px;        height: 160px}
.widgetBox.timePicker{width:120px;      height: 160px}
.widgetBox.rangeSlider .buttons span{font-size: 11px}
.group-box .widgetBox .bottomMargin{margin-bottom:12px}
.group-box .widgetBox p{ text-align: center}

.valve_widget{width:80px; height: 80px; ;background-repeat:   no-repeat; background-size: contain;    background-position: center center; margin-bottom: 4px }
.valve_widget{ border:1px solid #ccc }
.valve_widget.closed{ background-image: url("/images/valveclose.svg"); }
.valve_widget.opened{ background-image: url("/images/valveopen.svg"); }

.valve .options{
    position: absolute; top:2px; left: 2px;font-size: 11px
}
.valve .valveText{ position: absolute; left:0px; right: 0px;bottom: 0px}
.widgetBox.notEnabled,
.digitalDisplay.notEnabled,
.ledWidget.notEnabled,
.onOffSwitch.notEnabled,
.onOffIndicator.notEnabled,
.valve.notEnabled
{ opacity: 0.5}
/*---------------------------------------- END DWI NEW WIDGET CSS SPEC -------------------------------------------------------------*/

/*------------------ tunnel CSS SPEC -------------------------------*/
.badge-blu{ background-color:#337ab7; color:#fff }
.badge-grey{ background-color: #999 !important}
.tunnel-device-box{
    border-top:1px solid #E6E9ED;   
    margin-top: -1px;
    padding:5px; background-color: #fff;
    position:relative;    
    width:100%
}
.tunnel-device-box.running{  border-color: #5cb85c; background-color: #edf7ed; }
.tunnel-device-box.fixed-border-top{ border-top:1px solid #E6E9ED!important}
.tunnel-dosing-channel h4{ font-size: 12px; padding-bottom: 2px;padding-top: 5px}
.tunnel-dosing-channel h5{ border-radius: 12px; background-color:#26b99a; height: 20px; margin-bottom: 3px; color: #fff;font-size: 11px; padding-top: 3px }
.tunnel-dosing-channel h6{ border-radius: 12px; background-color:#337ab7; height: 20px;color: #fff;font-size: 11px; padding-top: 3px; margin-bottom: 5px }
.chambers-container{  width:100%;
                      padding-left: 22px;
                      padding-right: 22px;
                      margin-top: 5px;
                      padding-top:1px;
                     display: flex;
                     display: -webkit-flex;
                     flex-flow: row wrap;
                     -webkit-flex-flow: row wrap;
                     align-items: center;
                     justify-content:  	flex-start;
                     -webkit-align-items: center;
}
.tunnel-dosing-channel h5.aborted{background-color: #d9534f;}
.chamber-box{ 
    border:1px solid #E6E9ED;              
    padding:1px; background-color: #f0f0f0;
    position:relative;
    width:86px;
    height: 180px;
    margin-left: 1px;
    margin-top: 1px;
    z-index: 10;
}
.chamber-box.inactive{ background-color: #fff; opacity: 0.7}
.chamber-box:first-child{
    
}
.chamber-box:first-child:after,
.chamber-box:first-child:before{
    content: "";
    display: block;
    position: absolute;   
    width: 0;
    height: 0; 
}
.chamber-box:first-child:before {   
    border-style: solid;     
    top:-1px;
    left:-26px;
    background: transparent;   
    border-width:  0 25px 25px 0;
    border-color: transparent #E6E9ED transparent transparent;
    z-index: 1;
}
.chamber-box:first-child:after {   
    border-style: solid;     
    top:0px;
    left:-24px;
    background: transparent;   
    border-width:  0 24px 23px 0;
    border-color: transparent #f0f0f0 transparent transparent;
     z-index: 1
}

.chamber-box h4{ 
    text-align: center; 
    font-weight: 800; 
    margin-bottom: 4px;
    font-size: 12px;
    border-radius: 50%; 
    background-color: #fff; 
    border:1px solid #E6E9ED;
    width: 30px;
    height: 30px; 
    margin-left: 27px;
    margin-top:2px;
    padding-top: 8px
}
.chamber-box h4.active{
    animation: blinker 1s step-start infinite;
    background-color: #26b99a;
    border-color:#26b99a;
    color:#fff;
}
.chamber-box h4.flushing{
    animation: blinker 1s step-start infinite;
    background-color: #337ab7;
    border-color:#337ab7;
    color:#fff;
}
.chamber-box h4.aborted{
    animation: blinker 1s step-start infinite;
    background-color: #d9534f;;
    border-color:#d9534f;;
    color:#fff;
}
.chamber-box p{text-align: center; font-size: 13px}
.chamber-box p.value{font-weight: 800; margin-bottom: 4px;  }

.signal{ position: relative;width:40px}
.signal .bar0,.signal .bar1,.signal .bar2,.signal .bar3,.signal .bar4,.signal .bar5,.signal .scanning{ position: absolute;  right: 0px; top:0px; bottom: 0px; background-color: #fff; opacity: 0.8}
.signal i{font-size: 30px}
.signal .bar0{ left: 0px }
.signal .bar1{ left: 5px }
.signal .bar2{ left: 10px }
.signal .bar3{ left: 16px }
.signal .bar4{ left: 21px }
.signal .bar5{ left: 30px }
.signal .scanning{
    animation: scanner 1s infinite ;
}
@keyframes scanner {
    0% { left: 0px }   
    100% {left: 100% }
}
td.details-control {
    background:none;
    cursor: pointer;
    text-align: center
}
.details-container table{ width: 40%}
tr.shown td.details-control {
    background:none;
}

.dwiLogo{
    color:#fff;
    background-color: #00508f;
    border-radius: 50%;
    display: inline-block;
    font-size:47px;
    font-weight: bold;
   
    width:65px; height: 65px;
    text-align: center;
    padding-top: 0px; 
    margin-top: 4px; 
    margin-left: 4px
}
input:-moz-read-only { /* For Firefox */
  cursor: not-allowed
}

input:read-only {
  cursor: not-allowed
}
.deepconfirm{
    cursor:pointer!important
}

.section_lock{
  display:none;
  position:absolute;
  top:0px;left:0px;right:0px; bottom:0px;
  opacity:0.4;
  background-color: #eee;
  z-index: 1039;
}

.rotate {

  transform: rotate(-45deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-45deg);

  /* Firefox */
  -moz-transform: rotate(-45deg);

  /* IE */
  -ms-transform: rotate(-45deg);

  /* Opera */
  -o-transform: rotate(-45deg);

  /* Internet Explorer */

}

.evidence {
    background-color: #ffffcc!important
}

.plan_indicator{
    position: absolute;
    right:0px;
    background-color:#e2e0e1;
    padding: 4px 10px;
    color:#666;
    font-weight: bold
}
.plan_indicator.top{
    top:0px
}
.plan_indicator.bottom{
    top:100%
}
.installation-site{  position:relative;}
.top30{ margin-top:30px; }
.top40{ margin-top:40px; }
.top10{ margin-top:10px; }
.red-icon{ font-size: 16px; color:#d1332e}
.red-text{ color:#d1332e}
.remove-icon{ font-size: 16px; padding-left: 4px; padding-right: 4px}
.list-group-horizontal .list-group-item {
    display: inline-block;border-color:#ccc!important;
}

.list-group-horizontal .list-group-item {
    
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
}
.list-group-horizontal.white .list-group-item{ 
    border-color: #fff!important
}
.list-group-item.item-sm {
    padding: 5px 10px!important
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
    border-right-width: 1px;
}
.statIcon{ 
    width:50px;
    height: 50px;
    min-height: 50px;
    display: inline-block;
    background-size: contain
}
.statIcon.Small{ 
    width:29px;
    height: 29px;
    min-height: 29px;
    display: inline-block;
    background-size: contain
}
.statIcon.approval{
    background-image: url('/images/statistics/approval_grey.png')
}
.statIcon.chemical{
    background-image: url('/images/statistics/chemical_grey.png')
}
.statIcon.water{
    background-image: url('/images/statistics/water_grey.png')
}
.statIcon.energy{
    background-image: url('/images/statistics/energy_grey.png')
}
.statIcon.linen{
    background-image: url('/images/statistics/linen_grey.png')
}
.statIcon.approval.green{
    background-image: url('/images/statistics/approval_green.png')
}
.statIcon.chemical.green{
    background-image: url('/images/statistics/chemical_green.png')
}
.statIcon.water.green{
    background-image: url('/images/statistics/water_green.png')
}
.statIcon.energy.green{
    background-image: url('/images/statistics/energy_green.png')
}
.statIcon.linen.green{
    background-image: url('/images/statistics/linen_green.png')
}
.statIcon.approval.red{
    background-image: url('/images/statistics/approval_red.png')
}
.statIcon.chemical.red{
    background-image: url('/images/statistics/chemical_red.png')
}
.statIcon.water.red{
    background-image: url('/images/statistics/water_red.png')
}
.statIcon.energy.red{
    background-image: url('/images/statistics/energy_red.png')
}
.statIcon.linen.red{
    background-image: url('/images/statistics/linen_red.png')
}
.table.table1 td, .table.table1 span{ margin-top: 5px}
.table.table1 td, .table.table1 th{ line-height: 25px!important; height:25px; vertical-align: middle!important; padding: 1px 4px 1px 4px!important}
.cursorPointer{ cursor: pointer!important}
.cursorNotAllowed{ cursor: not-allowed!important}
.eventsTimeline .legend{ font-size: 12px ; line-height: 12px}
.eventsTimeline .legend a{ cursor:pointer}
.eventsTimeline .channel{ border-bottom:2px solid #E6E9ED; font-size: 13px; font-weight: bold; padding-top:10px ; padding-bottom: 5px}
.eventsTimeline .channel a{ cursor: pointer}
.eventsTimeline .indicator{height: 12px; width: 12px; display: inline-block}


.FORMULA_START { background-color: #ea8f32}
.DOSING_REQUEST{ background-color: #000}
.DOSING_DELAY{ background-color: #fbd94c}
.DELAYED_DOSING{ background-color: #d1332e}
.DOSAGE{ background-color: #1ABB9C}
.DOSAGE_SKIPPED{ background-color: #888}
.DOSAGE_ERROR{ background-image: url('/images/redPattern.png'); background-repeat: repeat}
.FLUSHING{ background-color: #337ab7}

.not-visible{ color:#ddd!important}
.not-visible .FORMULA_START,
.not-visible .DOSING_REQUEST,
.not-visible .DOSING_DELAY, 
.not-visible .DELAYED_DOSING, 
.not-visible .DOSAGE,
.not-visible .DOSAGE_SKIPPED,
.not-visible .DOSAGE_ERROR,
.not-visible .FLUSHING{
    background-color: #eee;  background-image:none
}


.normal .chart-container{ min-height: 50vh}
.normal #statChart{ min-height: 430px;}

.fullScreen{ position: fixed; top:0px; left: 0px; right: 0px;z-index: 1050; background-color: #fff;width: 100%;height: 99.99%; }
.fullScreen .chart-container{ height: 99.9%}
.fullScreen #statChart{ height: 89%;}

.fullScreen .legend-container{ position: absolute; left:0px; right: 0px; bottom: 0px; border:1px solid red}
.legend table span{ line-height: 14px; display: inline-block; min-width: 16px}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect{ background-color: #fff}
#timelineModal .modal-header {
    cursor: move;
}
.daterangepicker { z-index: 100042}
.legendContainer{margin-left: 5%;margin-bottom: 15px}
.cursor{ cursor:pointer}
.legend-icon{ margin-bottom:6px;}
.legend-item{position:absolute;top:10px; font-weight: 800}
.legend-item.water{ color:#76bedf}
.legend-item.energy{ color:#d1595a}
.legend-item.chemical{ color:#90be71}
.legend-item.linen{ color: #fdd819}
.label-status{ color:#fff;font-size:12px}
.no-margin-bottom{ margin-bottom: 0px!important}
.no-padding-bottom{ padding-bottom: 0px!important}
.footer1{
    background-color: transparent
}
.btn-grey{ color:#73879c}

/*---- new seko web logo 30/11/2020 -----*/
.login-box img {
    height: 60px;
}
.nav_title img {
    height:45px;
    margin-left: 0px
}
.nav-sm .nav_title img {
    height:50px;
    margin-left: 5px
}


 .badge-round.INFO{ background-color:#5f9ac2 }
 
.expand-icon{padding:5px;font-size: 16px; margin-right: 5px}

.select2 li{ font-size: 11px!important;}
.relative{ position: relative!important}  
th.rotable{ min-height: 140px; height:150px; }
.text-right{ text-align: right;}
.text-center{text-align: center;}
.center_vertical{ vertical-align: middle; text-align: center;}
.rotate90 {    
    transform-origin: 0 50%;
    transform: rotate(-90deg); 
    white-space: nowrap; 
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    text-align: left;
    font-size: 11px;
}
#cycletable .tableTotal th{ height: 20px;} 
.light_blue{ color:#337ab7}
.dropdown-submenu {
    position: relative;
  }
  
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 2px 2px 2px;
-moz-border-radius: 0 2px 2px;
border-radius: 0 2px 2px 2px;
z-index: 10000;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #666;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #337ab7;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 2px 0 2px 2px;
-moz-border-radius: 2px 0 2px 2px;
border-radius: 2px 0 2px 2px;
}

.sw-theme-arrows>ul.step-anchor {
    margin-bottom: 15px!important;
}

.flex-container,
.h-flex-container,
.v-flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.flex-container,
.h-flex-container {
	flex-direction: row;
}
.v-flex-container {
	flex-direction: column;
}

.flex-none {
	flex: none;      /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
}
.flex-auto {
	flex: auto;      /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}
.flex-content {
	flex: content;   /* riempie automaticamente al contenuto: flex-basis: content; */
}
.flex-cell {
	flex: 1;
}
.cell-auto { flex: auto; border:1px solid red    }
.cell-1of1 { flex: 0 0 100%; align-self: center;     }
.cell-1of2 { flex: 0 0 50%;   align-self: center;     }
.cell-1of3 { flex: 0 0 33.333333%; align-self: center; }
.cell-1of4 { flex: 0 0 25%;        }
.cell-1of5 { flex: 0 0 20%; }
.cell-1of6 { flex: 0 0 15%; align-self: center;justify-content: center;;}
.cell-5of6 { flex: 0 0 85%;align-self: center; }
/* main-axis alignment */
.container-align-start {
	justify-content: flex-start;
}
.container-align-end {
	justify-content: flex-end;
}
.container-align-center {
	justify-content: center;
}
a.on-chart.disabled{ opacity: 0.4;   pointer-events: none; cursor:not-allowed;}
a.on-chart i{font-size: 18px;}
a.on-chart{color:#aaa}
a.on-chart.active i{color:#ff9900}

.device-section{ display: none; margin-top: -6px;}
.deviceSectionToggle i{ font-size: 18px; padding: 10px; }


.cloud_connected{
    position: relative;
    z-index: 1;
    color:#5cb85c;
    font-size: 40px;
}

.cloud_connected:after{
    position: absolute;
    width: 21px;height: 21px;    
    top:0px; left:30px;
    content:"\f058";
    color:#5cb85c;
   
    font: normal normal normal 20px/1 FontAwesome;
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    z-index: 10;
    border:2px solid #fff;
    border-radius: 50%;
}
.cloud_offline{
    position: relative;
    z-index: 1;
    color:#d1332e;
    font-size: 40px;
}

.cloud_offline:after{
    position: absolute;
    width: 21px;height: 21px;    
    
    top:0px; left:30px;
    content:"\f057";
    color:#d1332e;
   
    font: normal normal normal 20px/1 FontAwesome;
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    z-index: 10;
    border:2px solid #fff;
    border-radius: 50%;

}
fieldset.filters {
    border: 1px dashed #E6E9ED !important;
    padding: 10px;
    margin: 0 0 0 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
fieldset.filters legend {
    width: auto;
    border: none;
    margin:0px 0px 0px 0px; padding: 0px 10px 0px 10px;
    font-size: 13px;
}


.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice{
    display: none;
}
.searchSuggestions .dropdown-menu{ max-height:60vh; overflow-y: auto;}
.searchSuggestions .dropdown-menu li{ border-bottom: 1px solid #D9DEE4; }
.dropdown-menu li a{ padding:10px;}
.searchSuggestions .dropdown-menu li:last-child{ border-bottom: none;}

.alarm.fa{ font-size: 18px;}
.alarm.fa.WARNING{ color:#fbd94c }
.alarm.fa.SEVERE{ color:#ea8f32 }
.alarm.fa.CRITICAL{ color:#d1332e }

#chemicalsTable input, #chemicalsTable select{width: 100%;}
#chemicalsTable tr{ height: 45px;}
tr.highlight{  background-color: #fbd94c !important;height: 45px;}

#chemicalButtonsContainer table { margin: 0 !important; padding: 0!important; margin-left: 60px!important; width: 100%;}

#chemicalButtonsContainer table td {border: none !important;;max-width: 144px!important; min-width: 144px!important; width: 144px!important; text-align: center; padding: 0!important}
#chemicalButtonsContainer table td a{ }

.role-icon.APPLICATIONGROUP{
    background-color: #efefef;
    color:#666;   
    border: 1px solid #c9d0e5; 
}
.role-icon.APPLICATIONGROUP .fa{ font-size: 18px;color: #2562a9}

/* DEFAULT DEFINITION OF BLINKER ANIMATION 60% mean the time ON so 40% is the time OFF */
@keyframes blinker2 {
    50% {
        opacity: 0.4;
    }
}
.blink{
    animation: blinker2 0.4s step-start infinite;
}
.orange{ color:#ea8f32}

.list-group-item.node-treeview-organization-home:hover>.btn{ display: inline-block !important;}
.DRAIN{ position: relative;}
.DRAIN:after{
    position: absolute;
    width:20px;height: 20px;    
    top:-2px; left:27px;
    content:"\f1d8";
    color:#00508f;
    background-color:#fff;
    font: normal normal normal 14px/1 FontAwesome;
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    z-index: 10;
    border:2px solid #fff;
    border-radius: 50%;
}

.timeline .tags { top: 5px} 

.timeline .tag.warning{ background-color:#ea8f32 ;}
.timeline .tag.warning:after{border-left: 11px solid #ea8f32}
.timeline .tag.gray1 { background-color: #777}
.timeline .tag.gray1:after{border-left: 11px solid #777}

.badge-round.green { background-color: #1ABB9C;}
.badge-round.orange { background-color: #ea8f32;}
.badge-round.grey { background-color: #777;}

.timeline .opened{ display: none;}

.widgetContainer.PROBOX{ -webkit-align-items: start;-webkit-justify-content: start}
.echartGaugeContainer.PROBOX{ margin:0}

.imageWidget{ width:200px; text-align: center;}
.imageWidget img{height: 100px; }
.gaugeImage {height: 50px; position: absolute; bottom: 20px;left: 15px;}

#addressApplicationName{ color: #ffffff;}

.application-header.header-PROBOX{
    background-image: url('/images/style/header-probox.png');
    background-position: 0px 0px;
    background-repeat: no-repeat
}
.widgetContainer.DRAIN::after{display: none}