#organization-diagram .role-icon{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*-------------- MEDIA QUERY CSS-----------------------------------------*/

@media print {
    .tableprint{ -webkit-print-color-adjust: exact!important; }
    .tableprint table tbody  tr:nth-child(2n+1) td, .tableprint table  tbody  tr:nth-child(2n+1)  th {
        background-color:#eee!important;
        box-shadow: inset 0 0 0 1000px gold;
        -webkit-print-color-adjust: exact!important;
    }
    .tableprint table > thead > tr > th,.tableprint table > tfoot > tr > th{
        font-weight: 800
    }


}

/* Medium Devices, Desktops */
@media (min-width: 992px) { 
    .text-auto1{ width: 90%}
    .login-box{width: 320px;margin-top: 70px;}
    #banner{left:250px;right:250px}
    #treeviewContainer{ height:60vh;}
    .role-icon{ max-width: 100%}
    #organization-legend table th{width: 13%}
    .profile_details_spacer{ margin-top: 80px}
    .organization_detail{position: fixed; right: 34px; top:260px;width:25%}
    .responsive-clearfix{display: inline}
    .responsive-align-left{ text-align: left}
    .responsive-align-right{ text-align: right}
    .device-box{ min-width: 270px; margin: 4px; max-width: 270px}
    .installation-site .device-box{ max-width: 100%; margin:0px; margin-bottom: 5px}
    .efficiencyButtons{left:42%}
    .collapsedarea{ margin-top:30px}
    .dwiLogo{width:65px}
    .installation-site .device-box{ min-height: 140px;}
    .treeview span.indent{margin-left: 90px!important}
}
/* Small Devices, Tablets */
@media (min-width:768px) and (max-width: 991px) { 
    .text-auto1{ width: 200px}
    .login-box{width: 320px;margin-top: 70px;}
    #banner{left:250px;right:250px}
    .login-box{width: 320px;margin-top: 70px;}
    
    #treeviewContainer{ height:60vh;    }
    .ownerid{ max-width: 260px};
    #organization-legend table th{width: 13%}
    .profile_details_spacer{ margin-top: 80px}
    .organization_detail{position: fixed; right: 34px; top:260px;width:25%}
    .responsive-clearfix{display: inline}
    .responsive-align-left{ text-align: left}
    .responsive-align-right{ text-align: right}
    .device-box{ min-width: 270px; margin: 4px; max-width: 270px}
    .range_label {
        font-size:10px
    }
    .btn-group .btn-sm{
        font-size: 12px;
        padding: 5px 4px;
    }
    .efficiencyButtons{left:42%}
    .installation-site .device-box{ max-width: 100%}
    .collapsedarea{ margin-top:30px}
    .dwiLogo{width:65px}
    .installation-site .device-box{ min-height: 140px;}
}
@media (min-width: 322px) and (max-width: 767px) { 
    .range_label {
        font-size:10px
    }
    .navbar-nav .open .dropdown-menu{ width: unset}
    .app-menu{width:100%!important;}
    .app-menu a{text-align: right;}
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
        max-height: 600px!important
    }



    .profile_details{  }   
    .treeview span.indent {
        margin-left: 20px!important;
        margin-right: 20px!important;
    }
    #treeview-organization.treeview span.indent {
        margin-left: 10px!important;
        margin-right: 10px!important;
    }


    .profile_details_spacer{ margin-top: 0px}

    #chemical_total_chart{ height:400px}
    #chemical_storic_chart{height:400px}

    #compare_chemical_storic_chart{ height:400px}
    #compare_chemical_total_chart{ height:400px}



    .profile_details{  }
    .slider-input{ padding-top:45px}
    .login-box{width: 320px;margin-top: 70px;}
    #banner{left:250px;right:250px}
    .sw-theme-arrows > ul.step-anchor > li > a{
        text-align: left!important
    }
    
    #treeviewContainer{ height:60vh;  }
    .treeview span.indent{
        margin-left: 3px!important;
        margin-right: 3px!important;
    }
    .role-icon{ max-width: 70% }
    .role-icon.APPLICATION{          
        max-width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #organization-legend table th{width:30%}
    .device-status, .alarm-type{ text-align: left!important}
    .responsive-clearfix{ clear: both}
    .list-group-item > .badge{ float: none!important} 
    .responsive-align-left{ text-align: center}
    .responsive-align-right{ text-align: center}

    .device-box{ min-width: 100%;margin-bottom: 4px;max-width: 100%}
    .text-auto1{width:75%}
    .btn-group .btn-sm{
        font-size: 10px;
        padding: 7px 3px;
    }
    .modal-sm {
        margin-right: auto;
        margin-left: auto;
    }
    .efficiencyButtons{left:0px;  position: relative}
    .installation-site .device-box{ max-width: 100%}
    .collapsedarea{ margin-top:20px}
    .dwiLogo{width:65px}
    .installation-site .device-box{ min-height: 140px;}
    .searchSuggestionsMenu{ right: 0px!important;left:initial!important}
}
@media (min-width: 322px) and (max-width: 717px) { 
    ul.responsive-tabs li{
        float:none!important; width: 100%
    }
   .efficiencyButtons{left:0px; position: relative}
   .collapsedarea{ margin-top:20px}
    .dwiLogo{width:65px}
    .installation-site .device-box{ min-height: 140px;}
    .cell-1of6 { flex: 0 0 100%; align-self: center;}
    .cell-5of6 { flex: 0 0 100%; align-self: center;}
    .cell-1of3 { flex: 0 0 100%; align-self: center;}

    .digitalDisplay{ height: 70px; padding-top: 5px;}
    .digitalDisplay .value{ margin-top: 0px;}

    .ledWidget{height: 70px;padding-top: 5px; margin: 1px;}
    .ledWidget .led-green,.ledWidget .led-red,.ledWidget .led-gray{margin-top: 5px}

    .onOffSwitch{ height: 70px;}
    .onOffSwitch .switch_widget{ position:absolute;top:5px; margin-top: 0px;}

    .widgetBox.boolean{ height: 110px!important; min-height: 110px!important; min-width: 170px;}
    .group-box .widgetBox .bottomMargin{margin-bottom:6px}
    .widgetBox.boolean .bottomMargin{margin-bottom:-2px}
    .widgetBox.boolean .col-xs-12{ text-align: center;}
    .widgetBox.rangeSlider{ height: 130px!important; min-height: 120px!important;}

    .widgetBox.command{ height: 80px!important; min-height: 80px!important; min-width: 170px;}
    .widgetBox.command p.bottomMargin{ margin-bottom: 5px;}
    .device-box-footer{min-height: 60px;}

    .device-section{ margin-top: -12px;}
    .right_col{ padding: 0px!important;}
    .modal {       
        top: 90px;
    }
    .widgetBox.combo{width:180px;           height: 110px; min-height: 110px!important; }
    .group-box .widgetBox p{ font-size: 12px;}
}
@media (max-width: 321px) { 
    ul.responsive-tabs li{
        float:none!important; width: 100%
    }
    .navbar-nav .open .dropdown-menu{ width: unset}
    .app-menu{width:100%!important; }
    .app-menu a{text-align: right;}
    #organization-legend table th{ width: 100%}
    .sw-theme-arrows > ul.step-anchor > li > a{
        text-align: left!important
    }
    #banner{left:10px;right:10px}

    .profile_details{  }
    .role-icon{ max-width: 70%}
    .role-icon.APPLICATION{          
        max-width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-group .btn-sm{
        font-size: 10px;
        display:block;
        padding: 1px 3px;
    }

    .login-box img{ height:35px}
    .login-body{ background-size: cover!important}


    .profile_details{  }
    .slider-input{ margin-bottom:15px}
    .login-box{margin-top: 30px;}
    .efficiency-bar{ padding-bottom:90px}

    .widget-setting{ min-height: 180px!important }
    .list-group-item > .badge{ float: none!important} 
    #treeviewContainer{ height:100%;}
    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
        max-height: 600px!important
    }
    .title_left{ width: 100%!important}
    .page-title .title_left h3{
        font-size: 22px!important
    }
    #myNavbar{ max-width: 95%}
    .cron-period select,.cron-block-dow select{ width: 100%}
    .cron-block-time{display: block}
    .cron-block-time select{ width: 44%;margin-top: 10px;}
    .page-title .title_left{ width: 100%;}
    .title_left h3{font-size: 22px}
    .ui-pnotify{ right: 10px!important}
    .treeview span.indent{
        margin-left: 3px!important;
        margin-right: 3px!important;
    }

    .profile_details_spacer{ margin-top:1px}
    .device-status, .alarm-type{ text-align: left!important}
    .responsive-clearfix{ clear: both}
    .responsive-align-left{ text-align: center}
    .responsive-align-right{ text-align: center}
    .device-box{ min-width: 100%;margin-bottom: 4px}
    .text-auto1{width:75%}
    .modal-sm {
        margin-right: auto;
        margin-left: auto;
    }
    .efficiency-bar{margin-left:0px;}
    
    .installation-site .device-box{ max-width: 100%}
    .collapsedarea{ margin-top:0px}
    .dwiLogo{width:65px}
    .installation-site .device-box{ min-height: 140px;}

    .ledWidget{height: 70px;padding-top: 5px;}
    .ledWidget .led-green,.ledWidget .led-red,.ledWidget .led-gray{margin-top: 5px}

    .onOffSwitch{ height: 70px;}
    .onOffSwitch .switch_widget{ position:absolute;top:5px; margin-top: 0px;}

    .widgetBox.boolean{ height: 100px!important; min-height: 100px!important; min-width: 170px;}
    .group-box .widgetBox .bottomMargin{margin-bottom:6px}
    .widgetBox.boolean .bottomMargin{margin-bottom:-2px}
    .widgetBox.boolean .col-xs-12{ text-align: center;}
    .widgetBox.rangeSlider{ height: 130px!important; min-height: 120px!important;}

    .widgetBox.command{ height: 80px!important; min-height: 80px!important; min-width: 170px;}
    .widgetBox.command p.bottomMargin{ margin-bottom: 5px;}
    .device-box-footer{min-height: 60px;}

    .device-section{ margin-top: -12px;}
    .right_col{ padding: 0px!important;}
    .modal {       
        top: 90px;
    }
    .widgetBox.combo{width:180px;           height: 110px; min-height: 110px!important; }
    .group-box .widgetBox p{ font-size: 12px;}
}
@media (max-device-width:321px){
    .app-menu{width:100%!important;}
    .device-status, .alarm-type{ text-align: left!important}
    .collapsedarea{ margin-top:20px}
   .dwiLogo{width:65px}
   .installation-site .device-box{ min-height: 140px;}
};