body {
    font-family: 'Chivo', sans-serif !important;
    outline: 0;
    color:var(--body-color);
}


/* start BOOTSTRAP OVERRIDE */
.apptitle:before{
	content: var(--text-title-application);
}

.logo{
		width:116px;
		height:40px;
	   background-image:  var(--logo-title-application);
	   background-repeat: no-repeat;
}

.logoelsteam{
	width:246px;
	height:80px;
	background-image:  var(--logo-title-application-elsteam);
	background-repeat: no-repeat;
}

.fa-eye{
	position: absolute;
	right: 10px;
	top: 42px;
	background-repeat: no-repeat;
}

/* Visibility rules */
.hide {display: none !important;}
/*.show {display: flex !important;}*/
/*.collapse.show {display: block !important;}*/
.invisible {visibility: hidden;}
.hidden {display: none !important;}
.no-padding{padding: 0 !important;}
.no-padding-left{padding-left: 0 !important;}
.no-padding-right{padding-right: 0 !important;}
.no-padding-top{padding-top: 0 !important;}
.no-padding-bottom{padding-bottom: 0 !important;}
.no-margin{margin: 0 !important;}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xl {display: none !important;}
.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-xs-table,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,
.visible-sm-table,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-md-table,.visible-lg-block,.visible-lg-inline,
.visible-lg-inline-block,.visible-lg-table,.visible-xl-block,.visible-xl-inline,.visible-xl-inline-block,.visible-xl-table{display: none !important;}

.btn{padding: .375rem;}

button:focus{outline: 0;}
.btn.focus, .btn:focus{outline: 0;box-shadow: none;}

.btn.disabled, .btn:disabled{opacity: 1;}

.bg-dark{
    background:  var( --main-bg-dark); 
    background: -moz-linear-gradient(top,var( --main-bg-dark) 0%, var( --main-bg-dark1) 5%,  var( --main-bg-dark2) 14%, var(--main-bg-dark3) 14%, var( --main-bg-dark4) 15%, var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%, var( --main-bg-dark7) 20%, var( --main-bg-dark8) 20%, var( --main-bg-dark9) 22%, var( --main-bg-dark10) 29%, var(--main-bg-dark11)  55%, var(--main-bg-dark12) 100%);
    background: -webkit-linear-gradient(top, var( --main-bg-dark) 0%,var( --main-bg-dark1) 5%,var( --main-bg-dark2) 14%,var(--main-bg-dark3) 14%,var( --main-bg-dark4) 15%,var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%,var( --main-bg-dark7) 20%,var( --main-bg-dark8) 20%,var( --main-bg-dark9) 22%,var( --main-bg-dark10)  29%,var(--main-bg-dark11) 55%,var(--main-bg-dark12)  100%);
    background: linear-gradient(to bottom, var( --main-bg-dark) 0%,var( --main-bg-dark1) 5%,var( --main-bg-dark2) 14%,var(--main-bg-dark3) 14%,var( --main-bg-dark4) 15%,var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%,var( --main-bg-dark7) 20%,var( --main-bg-dark8) 20%,var( --main-bg-dark9) 22%,var( --main-bg-dark10)  29%,var(--main-bg-dark11) 55%,var(--main-bg-dark12)  100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--main-bg-dark-filter1), endColorstr=var(--main-bg-dark-filter1),GradientType=0 );
}

.vertical-center{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.anchor-test{
	margin-top: -130px;
	padding-bottom: 130px;
	display: block;
}

@media (max-width: 575px) {
    .visible-xs {display: flex !important;}
    table.visible-xs, .visible-xs-table {display: table !important;}
    tr.visible-xs {display: table-row !important;}
    th.visible-xs,  td.visible-xs {display: table-cell !important;}
    .visible-xs-block {display: block !important;}
    .visible-xs-inline {display: inline !important;}
    .visible-xs-inline-block {display: inline-block!important;}
    .hidden-xs {display: none !important;}
}

@media (min-width: 576px) and (max-width: 767px) {
    .visible-sm {display: flex !important;}
    table.visible-sm, .visible-sm-table {display: table !important;}
    tr.visible-sm {display: table-row !important;}
    th.visible-sm,  td.visible-sm {display: table-cell !important;}
    .visible-sm-block {display: block !important;}
    .visible-sm-inline {display: inline !important;}
    .visible-sm-inline-block {display: inline-block !important;}
    .hidden-sm {display: none !important;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-md {display: flex !important;}
    table.visible-md, .visible-md-table {display: table !important;}
    tr.visible-md {display: table-row !important;}
    th.visible-md,  td.visible-md {display: table-cell !important;}
    .visible-md-block {display: block !important;}
    .visible-md-inline {display: inline !important;}
    .visible-md-inline-block {display: inline-block !important;}
    .hidden-md {display: none !important;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-lg {display: flex !important;}
    table.visible-lg, .visible-lg-table {display: table !important;}
    tr.visible-lg {display: table-row !important;}
    th.visible-lg, td.visible-lg {display: table-cell !important;}
    .visible-lg-block {display: block !important;}
    .visible-lg-inline {display: inline !important;}
    .visible-lg-inline-block {display: inline-block !important;}
    .hidden-lg {display: none !important;}
}
    
@media (min-width: 1200px) {
    .visible-xl {display: flex !important;}
    table.visible-xl, .visible-xl-table {display: table !important;}
    tr.visible-xl {display: table-row !important;}
    th.visible-xl, td.visible-xl {display: table-cell !important;}
    .visible-xl-block {display: block !important;}
    .visible-xl-inline {display: inline !important;}
    .visible-xl-inline-block {display: inline-block !important;}
    .hidden-xl {display: none !important;}
}

/* end BOOTSTRAP OVERRIDE */


/* Mobile first development */
body{padding-top: 56px;background-color: var(--body-bg);}

body.login{
    background: var(--login-bg); /* fallback */
    background: -webkit-linear-gradient(var(--login-bg-gradinet), var(--login-bg));
    background: -o-linear-gradient(var(--login-bg-gradinet), var(--login-bg));
    background: -moz-linear-gradient(var(--login-bg-gradinet), var(--login-bg));
    background: linear-gradient(var(--login-bg-gradinet), var(--login-bg)); 
    height: 100vh;
}

.plantgroup-header{
    background-color:  var(--plantgroup-header-bg);
    color: var(--headers-text-color);
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
    padding: 10px 0;
}

.ajdust-anchor{
	margin-top: 60px;        /* Size of fixed header */
	padding-bottom: -60px; 
	display: block; 
}

.plantgroup-header .plant-name{
    text-align: left;
    line-height: 26px;
}
.device-header{
    display: flex;
    padding-top: 10px;
    padding-bottom: 25px;
} 

.device-header .signal, .device-header .mail{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    height: 32px;
    float: left;
    display: inline-block;
}
.device-header .signal.disconnected{background-image:var(--signal-disconnected-icon) ;}
.device-header .signal.power0{background-image: var(--signal-signa-power0);}
.device-header .signal.power1{background-image:  var(--signal-signa-power1);}
.device-header .signal.power2{background-image:  var(--signal-signa-power2);}
.device-header .signal.power3{background-image:  var(--signal-signa-power3);}
.device-header .signal.eth{background-image:  var(--signal-signa-eth);}
.device-header .signal.nolink{background-image: var(--signal-err-link);}
.device-header .mail.active{background-image: var(--mail-active);}
.device-header .mail.disabled{background-image: var(--mail-disabled);}

.nolinkicon{background-image: var(--signal-err-link);}

.device-commands{display: flex;width: 100%;} 
.device-item{
    border-bottom: 1px solid var(--device-item-border-bottom) ;
    padding: 0;
}
.device-item:last-child{border-bottom: 0;}

.device-info{width: 100%}
.device-header .info-btn{
    background-image:  var(--device-header-info-btn) ;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: contain;
    height: 32px;
}
.device-header .password-btn{
    background-image:  var(--locked-blue-icon);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: contain;
    height: 32px;
    cursor: pointer;
}


.device-header .clock-btn{
    background-image:  var(--clock-blue-icon);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: contain;
    height: 32px;
    cursor: pointer;
}





.command-btn{margin-bottom: 20px;}
.command-btn .btn{padding: 0;border: 0;width: 100%; color:var(--body-color);}
.command-btn .icon{
    width: 56px;
    height: 56px;
    background-color: rgba(128, 128, 128, 0.1);
    background-repeat: no-repeat;
    background-position: center;
/*    background-size: contain;*/
    border-radius: 4px;
    position: relative;
    margin: 0 auto;
}

.icon:hover{
 background-color: rgba(0,0,0,.1);
}
.ultradisabled{
    opacity: 1 !important;
    filter: none !important;
    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

.opacitydisabled{
    opacity: 1 !important;
    color:  var(--opacity-color-disabled)  ;
}

.opacitydisabled.device-header .info-btn{background-image:  var(--info-grey-icon);}
.opacitydisabled.device-header .manual-btn{background-image:  var(--info-grey-icon);}
.opacitydisabled.device-header .password-btn{background-image: var( --info-locked-grey-icon);}
.opacitydisabled.device-header .clock-btn{background-image: var(--clock-grey-icon);}
.opacitydisabled.device-header .mail{opacity: 0.5;}

.temperaturedisabled{opacity: 0.2;}


.command-btn .icon.icon-alarm{background-image: var(--icon-alarm-icon);}
.command-btn .icon.icon-service{background-image: var(--icon-icon-service);}
.command-btn .icon.icon-realtime{background-image:var(--icon-icon-realtime);}
.command-btn .icon.icon-programs{background-image:var(--icon-icon-programs);}



.command-btn .icon.icon-parameters{background-image: var(--icon-icon-parameters);}
.command-btn .icon.icon-history{background-image: var(--icon-icon-history);}
.command-btn .icon.icon-graph{background-image: var(--icon-icon-graph);}

.command-btn .disabled .icon.icon-alarm, .ultradisabled .icon.icon-alarm{background-image: var(--disabled-icon-alarm) !important;}
.command-btn .disabled .icon.icon-service, .ultradisabled .icon.icon-service{background-image: var(--disabled-icon-service) !important;}
.command-btn .disabled .icon.icon-realtime, .ultradisabled .icon.icon-realtime{background-image: var(--disabled-icon-realtime) !important;}
.command-btn .disabled .icon.icon-realtime, .ultradisabled .icon.icon-programs{background-image: var(--disabled-icon-programs) !important;}
.command-btn .disabled .icon.icon-parameters, .ultradisabled .icon.icon-parameters{background-image: var(--disabled-icon-parameters) !important;}
.command-btn .disabled .icon.icon-history, .ultradisabled .icon.icon-history{background-image: var(--disabled-icon-history) !important;}
.command-btn .disabled .icon.icon-graph, .ultradisabled .icon.icon-graph{background-image: var(--disabled-icon-graph) !important;}
.command-btn .icon.icon-historyenabled{background-image: var(--disabled-icon-historyenabled);}
.command-btn .icon.icon-graphenabled{background-image: var( --disabled-icon-graphenabled);}

.command-btn a span{
    color: var( --command--btn-color);
    font-size: 11px;
    line-height: 14px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
}

.command-btn a.disabled span, .ultradisabled .command-btn a span, .ultradisabled .temperature{
    color: var(--opacity-color-disabled);
}

.textdisabled{
	color:var(--opacity-color-disabled) !important;
}

.ultradisabled .command-btn a{
   
}


.ultraenabled {
 pointer-events: all !important;
}
.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color:  var(--command--btn-color);
}

.has-alarm .icon-alarm:before{
    content: var(--danger-grey-icon) ;
    background-size:contain;
    position: absolute;
    right: -12%;
    top: -5px;
    z-index: 99;

        
}


.numberCircle {
  color: var(--body-bg) !important;
     font-size: 0.9rem !important;
     padding-top:5px;
}



.has-wifi .has-2wifi .has-3wifi .has-offline .has-alarm .disabled .icon-alarm:before, .has-alarm .ultradisabled .icon-alarm:before{
    content: '';
}

.has-alarm .device-header-xs .alarm{
    background-image: var(--icon-alarm-xs);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}


.has-wifi .device-header-xs .alarm{
    background-image: var(--icon-signal-p1b); 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}


.has-2wifi .device-header-xs .alarm{
    background-image: var(--icon-signal-p2b);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}


.has-3wifi .device-header-xs .alarm{
    background-image: var(--icon-signal-p3b);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.has-nokey .device-header-xs .alarm{
    background-image: var(--icon-nokey);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}


.has-eth .device-header-xs .alarm{
    background-image: var(--signal-signa-eth);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.has-offline .device-header-xs .alarm{
    background-image: var(--icon-disconnected-32p); 
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.nolink .device-header-xs .alarm{
    background-image: var(--icon-signal-err-link) ;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.device-header-xs{
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
    padding: 13px 0 13px 0;
} 
.device-header-xs .toggle-btn{
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.device-header-xs[aria-expanded="false"] .toggle-btn{background-image: var(--arrow_down_grey);}
.device-header-xs[aria-expanded="true"] .toggle-btn{background-image: var(--arrow_up_grey);}
.device-header-xs .temperature{
    font-size: 12px;
    color:  var(--preview-temperature-color);
}

.controls button[type="submit"]{
    width: 100%;
    background-color: var(--button-submit-background-first-color);
    border-color: var(--button-submit-background-first-color);
    -webkit-box-shadow: 0 2px var(--button-submit-background-color);
    box-shadow: 0 2px var(--button-submit-background-color);
    text-transform: uppercase;
}

.controls button[type="submit"]:not(:disabled):not(.disabled):active{
    background-color: var(--button-submit-background-color);
    border-color:var(--button-submit-background-color);
}

.form-group{margin-bottom: 25px;}


.form-control, .form-control:focus{
    text-align: left;
    
    background-color: var(--headers-text-color);
   /*background: transparent;
   color: var(--headers-text-color);*/
    border-color: var(--form-border-color);
    box-shadow: none;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
    padding-top: 9px;
    /*padding-bottom: 9px;*/
}
.form-control::placeholder{color: var(--form-color-placeholder) }


.form-group .control-label{
    color: var(--headers-text-color);
    font-size: 15px;
    line-height: 20px;
}
.form-group .control-label.username{
    padding-left: 38px;
    background-image:  var(--icon-user);
    background-repeat: no-repeat;
    background-position: left center;
}

.form-group .control-label.password{
    padding-left: 38px;
    background-image: var(--icon-password);
    background-repeat: no-repeat;
    background-position: left center;
}

.form-group .control-label.email{
    padding-left: 38px;
    background-image: var(--icon-email);
    background-repeat: no-repeat;
    background-position: left center;
}


.login footer{
    background-color: var( --body-bg);
    position: fixed;
    bottom: 0;
    padding-top: 25px;
    padding-bottom: 25px;
}
.login footer span{
    float: left;
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
}
.login footer a{
    float: left;
    width: 100%;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: var(--button-submit-background-first-color);
}

.max-width-container{
    max-width: 1680px;
    margin: 0 auto;
}

@media (min-width: 768px){
    .device-info{display: flex !important;width: 100%;}
    .device-header .info-btn{background-position: 50% 50%;}
    .device-header .password-btn{background-position: 50% 50%;}
     .device-header .clock-btn{background-position: 50% 50%;}
    .device-item{padding: 8px 0 30px 0;}
    .device-header{padding-top: 0;padding-bottom: 0;line-height: 32px;margin-bottom: 30px;}
    body{padding-top: 70px;}
    .plantgroup-header{font-size: 21px;line-height: 25px;padding: 13px 0;}
    
  
      .plantgroup-header .plant-icon {  display:inline-block;}
    .plantgroup-header .plant-icon img{vertical-align: top;}
    .device-commands{padding-left: 15px;padding-right: 15px;}
    .device-commands .temperature{text-align: center;}
    .command-btn{padding: 0;text-align: center;margin-bottom: 0;}
    .command-btn a span{
        font-size: 13px;
        line-height: 16px;
        display: inline-block;
        max-width: 94%;
        overflow: hidden;
    }
    .form-group{margin-bottom: 43px;}
    .form-control, .form-control:focus{font-size: 18px;line-height: 22px;
       background-color:   var(--headers-text-color);
       color:var(--form-color); 
         
    }
    .login footer{padding-top: 30px;padding-bottom: 30px;}
    .login footer span{font-size: 18px;line-height: 23px;}
    .login footer a{font-size: 18px;line-height: 23px;}
    .form-group .control-label{font-size: 18px;line-height: 22px;}
}

@media (max-width: 767px){
    .device-header .signal, .device-header .mail, .device-header .password-btn, .device-header .info-btn{
        max-width: 65px;
        background-position: 50% 50%;
    }
    
 .device-header .clock-btn {
        max-width: 65px;
        background-position: 50% 50%;
    }
    
.device-header .info-btn{margin-left: auto;}
    
.numberCircle {
     padding-top:10px;
}
}

@media (max-width: 575px){
    .device-header .signal, .device-header .mail, .device-header .password-btn, .device-header .info-btn{
        max-width: 55px;
    }
}


/* HEADER */
.list-group-email{
    max-height: 220px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: content-box;
    padding-left:10px
}

.input-time{
	width: 50%;
	text-align: center;
}

body{
    padding-top: 20px;
}

/* top bar */
.navbar-dark {
/*    height: 58px;*/
    padding: 11px 0px;
}
.navbar-dark .navbar-brand{
    color: var(--dropdown-wrapper-color);
    font-size: 21px;
    margin: 0 35px 0 16px;
    padding: 0;
    position: relative;
    z-index: 200;
}

.navbar-brand:hover{
	color:var(--dropdown-wrapper-color) !important; 
   text-decoration:underline var(--dropdown-wrapper-color); 
}

/* links */
.navbar-nav .nav-item{
    padding: 9px 0;
    border-bottom: solid 1px rgba(255,255,255,0.5);
    margin: 0 20px;
    display: inline-block !important;
}
.nav-item.last-item{
    border-bottom: none;
}

.navbar-dark .main-link{
    font-size: 20px;
    font-weight: 300;
    color: rgba(255,255,255,0.8);
    padding-left: 46px;
    line-height: 28px;
    display: inline-block;
}

.scheduler-link{
    font-size: 20px;
    font-weight: 300;
    color: rgba(255,255,255,0.8);
    padding-left: 46px;
    line-height: 28px;
    display: inline-block;
}

.scheduler-link:hover{
    text-decoration: none;
    color:  var(--dropdown-wrapper-color);
}

/*
.dropdown-menu.show{
    display: block !important;
    margin-top: 0;
    position: relative;
    z-index: 20;   
}*/

.dropdown-wrapper{
    padding: 22px 0 18px 0;
    background-color: var(--dropdown-wrapper);
    box-shadow: 0 0 12px rgba(0,0,0,0.8);
    position: relative;
    z-index: 15;
}
.obscure{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;

    background: var(--obscure-bg-dark); /* Old browsers */
    background: -moz-linear-gradient(top, var(--obscure-bg-dark) 0%, var(--obscure-bg-dark1) 45%,  var(--obscure-bg-dark2) 71%, var(--obscure-bg-dark3) 78%, var(--obscure-bg-dark4) 80%, var(--obscure-bg-dark5) 80%, var(--obscure-bg-dark6) 81%, var(--obscure-bg-dark7) 83%, var(--obscure-bg-dark8) 85%, var(--obscure-bg-dark9) 86%, var(--obscure-bg-dark10) 86%, var(--obscure-bg-dark11) 95%, var( --main-bg-dark) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, var(--obscure-bg-dark) 0%, var(--obscure-bg-dark1) 45%, var(--obscure-bg-dark2) 71%,var(--obscure-bg-dark3) 78%,var(--obscure-bg-dark4) 80%,var(--obscure-bg-dark5) 80%,var(--obscure-bg-dark6) 81%,var(--obscure-bg-dark7) 83%,var(--obscure-bg-dark8) 85%,var(--obscure-bg-dark9) 86%,var(--obscure-bg-dark10) 86%,var(--obscure-bg-dark11) 95%,var( --main-bg-dark) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, var(--obscure-bg-dark) 0%, var(--obscure-bg-dark1) 45%, var(--obscure-bg-dark2) 71%,var(--obscure-bg-dark3) 78%,var(--obscure-bg-dark4) 80%,var(--obscure-bg-dark5) 80%,var(--obscure-bg-dark6) 81%,var(--obscure-bg-dark7) 83%,var(--obscure-bg-dark8) 85%,var(--obscure-bg-dark9) 86%,var(--obscure-bg-dark10) 86%,var(--obscure-bg-dark11) 95%,var( --main-bg-dark) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--obscure-bg-dark-filter1), endColorstr=var(--obscure-bg-dark-filter2),GradientType=0 ); /* IE6-9 */
}
.navbar-nav{
    position: relative;
    z-index: 20;
}
.dropdown-menu{border: 0;}
   
.dropdown .dropdown-item{
    font-weight: 300;
}
.dropdown .last-item{ border-bottom: none;}


/* icone voci menu 1 livello */
.icon-scan{ background:var(--scan-icon-scan)  top left no-repeat;}
.icon-add{ background: var(--add-icon-add) top left no-repeat;}
.icon-user{ background: var(--user-icon-user) top left no-repeat;}
.icon-lang{ background: var(--lang-icon-lang) top left no-repeat;}
.icon-logoutbar{ background: var(--icon-logoutbar) top left no-repeat;}
.icon-helpbar{ background: var(--icon-helpmanualbar) top left no-repeat;}
.icon-send-device{ background: var(--send-device) top left no-repeat;height:32px;width:32px;}
.icon-clock-edit{ background: var(--clock-edit-icon) top left no-repeat;height:32px;width:32px;}

/*icona scheduler*/
.icon-settings-white{ background: var(--icon-settings-white-26p)  0 50%  no-repeat; }

/* icone voci menu 2 livello chiare */
.icon-settings{ background: var(--settings-white-icon)  0 50%  no-repeat; }

.icon-account{ background:  var(--account-white-icon) 0 50%  no-repeat; }
.icon-user-block{ background:  var(--user-icon-user) 0 50%  no-repeat; }
.icon-alarms{ background:  var(--alarms-white-icon)  0 50%  no-repeat; }
.icon-reset { background:  var(--reset-white-icon)  0 50%  no-repeat; }


.icon-logout{ background:  var(--logout-white-icon)  0 50%  no-repeat; }
.icon-clock{ background:  var(--clock-white-icon)  0 50%  no-repeat; }
/* dropdown caret sopprime quello di default in mobile */
.dropdown-toggle::after{
    border: none;
}

.main-link{
    width: 98%;
}
a.main-link:hover{
    text-decoration: none;
    color:  var(--dropdown-wrapper-color);
}
a.main-link:hover .caret{
    border-top-color: var(--dropdown-wrapper-color);
}

.caret{/* caret mobile */
    border-top: 8px var(--headers-text-color) solid;
    border-left: 6px transparent solid;
    border-right: 6px transparent solid;
    float: right;
    margin-top: 12px;
}
.dropdown-wrapper .show .caret{/* caret mobile show */
    border-top: none;
    border-bottom: 8px var(--headers-text-color) solid;
    border-left: 6px transparent solid;
    border-right: 6px transparent solid;
}

.dropdown-user{padding: 0;
background-color: var(--dropdown-wrapper);
}

.dropdown-user .dropdown-item {
    margin: 0;
    color: #fff;
    padding: 0 0 0 46px;
}

.dropdown-user .dropdown-item span{
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.5);;
    padding: 10px 0;
    color: rgba(255,255,255,0.8);
}
.dropdown-user .last-item span{border-bottom: 0;}

.dropdown-lang{
    border: none;
    padding-left: 40px;
}
.dropdown-lang .dropdown-item{
    width: 110px;
    float: left;
    clear: none;
    border-radius: 5px;
    border: solid 1px  var(--dropdown-item-border-color);
    margin: 5px 10px 5px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    padding: 8px 20px 8px 20px;
    text-align: center;
}
.dropdown-wrapper .show .main-link, .dropdown-lang .selected{
    color: var(--dropdown-wrapper-color);
}
.dropdown-lang .dropdown-item:hover, .dropdown-user .dropdown-item:hover{
    background-color: var(--dropdown-item-color);
}

.navbar-dark .navbar-toggler{ border:none; }

.navbar-dark  button[aria-expanded="false"] .navbar-toggler-icon{
    background: transparent var(--hamburger);
}
.navbar-dark  button[aria-expanded="true"] .navbar-toggler-icon{
    background: transparent var(--close-svg-bar);
}

.navbar-nav .nav-item.hidden-sm{
    display: none !important;
}
.matte-bar{
   
    height: 60px;
    position: absolute;
    z-index: 150;
    top: 0px; 
    box-shadow: 0px 0px 8px #000;

       background:  var( --main-bg-dark); 
    background: -moz-linear-gradient(top,var( --main-bg-dark) 0%, var( --main-bg-dark1) 5%,  var( --main-bg-dark2) 14%, var(--main-bg-dark3) 14%, var( --main-bg-dark4) 15%, var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%, var( --main-bg-dark7) 20%, var( --main-bg-dark8) 20%, var( --main-bg-dark9) 22%, var( --main-bg-dark10) 29%, var(--main-bg-dark11)  55%, var(--main-bg-dark12) 100%);
    background: -webkit-linear-gradient(top, var( --main-bg-dark) 0%,var( --main-bg-dark1) 5%,var( --main-bg-dark2) 14%,var(--main-bg-dark3) 14%,var( --main-bg-dark4) 15%,var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%,var( --main-bg-dark7) 20%,var( --main-bg-dark8) 20%,var( --main-bg-dark9) 22%,var( --main-bg-dark10)  29%,var(--main-bg-dark11) 55%,var(--main-bg-dark12)  100%);
    background: linear-gradient(to bottom, var( --main-bg-dark) 0%,var( --main-bg-dark1) 5%,var( --main-bg-dark2) 14%,var(--main-bg-dark3) 14%,var( --main-bg-dark4) 15%,var( --main-bg-dark5) 17%,var( --main-bg-dark6) 19%,var( --main-bg-dark7) 20%,var( --main-bg-dark8) 20%,var( --main-bg-dark9) 22%,var( --main-bg-dark10)  29%,var(--main-bg-dark11) 55%,var(--main-bg-dark12)  100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--obscure-bg-dark-filter2), endColorstr=var(--obscure-bg-dark-filter1),GradientType=0 );
}
.navbar-toggler{
    position: relative;
    z-index: 200;
}


/* shadow bar */
.shadow-bar{
    background-color: #fff;
    height: 10px;
    position: absolute;
    z-index: 100;
    top: 48px; 
    box-shadow: 0px 0px 8px #000;
}

/* filter bar */
.filter-bar, .caption-bar{
    background-color: var(--filter-bar-caption-bar);
    height: 38px;
    margin-top: 40px;
    line-height: 38px;
     position: relative;
  z-index: 50;

}

  
    a.filter-link, a.filter-link:hover{
    font-size: 14px;
    font-weight: 300;
    background:  transparent url('../icons/filtersmall.svg')  -5px -4px no-repeat; 
    padding-left: 30px;
     margin-left: 12px;
    outline: 0;
}

a.filter-link-red, a.filter-link-red:hover{
    font-size: 14px;
    font-weight: 300;
      background:  transparent url('../icons/filtersmallx.svg')  -5px -4px no-repeat; 
    padding-left: 30px;
     margin-left: 12px;
    outline: 0;
}



   a.filter-font , a.filter-font :hover{
    font-size: 14px;
    font-weight: 300;
    color:var(--a-filter-link);
    outline: 0;
}

a.conn-link, a.conn-link:hover{
    font-size: 14px;
    font-weight: 300;
    color:var(--a-filter-link);
    padding-left: 10px;
    padding-right: 20px;
    outline: 0;
    background:  var(--signal-disconnected-icon-s)  -2px -6px no-repeat; 
}


a.right-index-link,a.right-index-link:hover{
  font-size: 14px;
    font-weight: 300;
    color:var(--a-filter-link);
    padding-right: 30px;
    outline: 0;
	
	}

.info-link, a.info-link:hover{
     font-size: 14px;
    font-weight: 300;
    color:var(--a-filter-link);
    padding-left: 30px;
    outline: 0;
}

/* VERSIONE LARGE */
@media (min-width: 992px){

    .navbar-dark {
        height: 70px;
        padding-top: 13px; 
        box-shadow: 0 0 10px #000
       
    }
    .navbar-dark .navbar-brand{
        margin-left: 15px;
        padding-top: 0;
        padding-bottom: 0;
         margin-top: -3px;
    }
    .navbar-dark .navbar-nav{
        padding: 0;
    }
    .navbar-nav .nav-item{
        border-bottom: none;
        margin: 0;
        padding: 0;
    }
    
    .navbar-dark .welcome{margin: 0 20px 0 0;}

    .navbar-dark .color1{ 
 color: var(--dropdown-wrapper-color);
}

    .navbar-dark .last-item{
        margin-right: 16px;
    }
    .bg-custom{
        background-color: transparent !important;
    }
    .navbar-dark .main-link{
        font-size: 14px;
        margin-left: 33px;
        padding-left: 30px;
    }
     .navbar-dark a.main-link:hover{
        text-decoration: underline;
        color:  var(--navbar-dark-a-main-link);
    }

    /* rimuove il flex */
    .navbar-nav, .navbar-expand-lg .navbar-collapse{
        display: inline-block !important;
        padding-top: 3px;
    }

    .dropdown-toggle::after{
        border-top: 8px var(--headers-text-color) solid;
        border-left: 6px transparent solid;
        border-right: 6px transparent solid;
        vertical-align: 1px;
    }
    .caret, .dropdown-wrapper .show .caret{
        border: none; 
    }


    .collapse{
         margin-top: 0px;
    }
    .obscure{
        display: none;
    }
    .dropdown-wrapper{
        width: auto;
        height: auto;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }
    .navbar-nav .nav-item.visible-lg{
        display: inline-block !important;
    }
    .matte-bar{
        display: none !important;
    }
    .shadow-bar{
        height: 50px;
        display: none !important;
    }

    /* tendine dropdown */
    .dropdown-menu{
        background-color:var(--body-bg);
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        border-radius: 0 0 .25rem .25rem;
        padding-top: 5px;
        padding-bottom: 5px;
    }
        
    .dropdown-user{
        left: 30px;
    }
    .dropdown-lang{
        left: -145px;
    }
    .dropdown .dropdown-item{
        color: var(--dropdown-user-dropdown-item-span);
        font-weight: 300;
        border-bottom: solid 1px rgba(0,0,0,0.3);
        padding-left:54px;
        margin-left: 0;
    }
    .dropdown-user .dropdown-item span{
        color: var(--dropdown-user-dropdown-item-span) ;
    }
    .dropdown .last-item{
         border-bottom: none;
    }
    .dropdown-lang {
        padding: 0;
        padding-left: 15px;
        padding-bottom: 5px;
    }
    .dropdown-lang .dropdown-item{
        width: 45%;
        float: left;
        clear: none;
        border-radius: 0px;
        color: var(--page-details-values-list-row-separator-color);
        font-weight: 300;
        border: none;
        border-top: solid 1px rgba(0,0,0,0.3);

        margin: 5px 10px 5px 0;
        font-size: 16px;
       
        padding: 4px 0 4px 0;
        text-align: center;
    }

    .dropdown-lang a:nth-child(1){border:none;}
    .dropdown-lang a:nth-child(2){border:none;}

     .dropdown-lang .dropdown-item:hover, .dropdown-user .dropdown-item:hover, .dropdown-lang .selected{
        background-color: transparent;
        color: var(--dropdown-wrapper-color);
     }
    /* icone voci menu 2 livello scure */
    .icon-settings{ background: var(--icon-settings-26p) 12px 50%  no-repeat; }
    .icon-account{ background: var(--icon-account-26p) 12px 50%  no-repeat; }
    .icon-user-block{ background:  var(--icon-user-block) 12px 50%  no-repeat; }
    
    
   .icon-alarms{ background: var(--icon-alarms-26p) 12px 50%  no-repeat; }
   .icon-alarms-red{fill:red; background: var(--icon-alarms-26p) 12px 50%  no-repeat; }
   .icon-scheduler-grey{ background: var(--icon-scheduler-grey-26p) 12px 50%  no-repeat; }
   .icon-scheduler-green{ background: var(--icon-scheduler-green-26p) 12px 50%  no-repeat; }
   .icon-scheduler-red{ background: var(--icon-scheduler-red-26p) 12px 50%  no-repeat; }
   .icon-reset{ background: var(--icon-reset-26p) 12px 50%  no-repeat; }
   .icon-logout{ background: var(--icon-logout-26p) 12px 50%  no-repeat; }
   .icon-clock{ background: var(--icon-clock-26p) 12px 50%  no-repeat; }
   .icon-users-list { background:  var(--users-grey-icon)  12px 50%  no-repeat; }
    
    .filter-bar, .caption-bar{
        height: 51px;
        line-height: 55px;
        margin-top: 50px;
    }
    
    a.filter-link, a.filter-link:hover{
        font-size: 18px;
    }
            
    a.filter-link-red, a.filter-link-red:hover{
        font-size: 18px;
    } 
    
    a.filter-font , a.filter-font :hover{
        font-size: 18px;
    
    }
    
    
    a.filter-link, a.filter-link:hover{
    background:  transparent url('../icons/filter.svg')  -5px -4px no-repeat; 
    padding-left: 30px;
     margin-left: 12px;
    outline: 0;
}

a.filter-link-red, a.filter-link-red:hover{
      background:  transparent url('../icons/filterx.svg')  -5px -4px no-repeat; 
    padding-left: 30px;
     margin-left: 12px;
    outline: 0;
}
    
       a.conn-link, a.conn-link:hover{
        font-size: 18px;
           padding-right: 20px;
    outline: 0;

         background:  var(--signal-disconnected-top)  -2px -6px no-repeat; 
    }
}

@media (min-width: 1696px){ /* max-width + 16 */
    .navbar-dark .navbar-brand{margin-left: 0;}
}




/* PAGE DETAILS */

body.page-details{
    padding-top: 70px; /* TEMP */
    background-color: var(--headers-text-color);
}

.page-navigation-bar{
/*    background-color: #23232e;*/
    line-height: 38px;
    position: relative;
    z-index: 50;
    color: var(--headers-text-color);
    padding-top: 20px;
}

.page-details .navbar-brand, .page-details .navbar-toggler{display: none;}
.page-details .device-name-xs{
    font-size: 16px;
    line-height: 18px;
    color: var(--headers-text-color);
    display: block;
    z-index: 200;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    text-decoration: none;
    background-image:var(--icon-close-scan-top);
    background-repeat: no-repeat;
    background-position: 95% 100%;
}


.page-details .page-navigation-bar .info-btn{background-image: var(--info-white-top) ;}
.page-details .page-navigation-bar .manual-btn{background-image: var(--manual-white-top) ;}
.page-details .page-navigation-bar .password-btn{background-image: var(--locked-white-top);}

.chip-white{background-image: var(--chip-white);}
.info-btn_white{background-image: var(--info-white-top);}
.manual-btn_white{background-image: var(--manual-white-top);}

/*Top Bar internal device*/
.page-details .device-header .signal.disconnected{background-image:  var(--disconnected-32p-white-top);}
.page-details .device-header .signal.power0{background-image: var(--signal-p0-32p-white-top);}
.page-details .device-header .signal.power1{background-image: var(--signal-p1-32p-white-top);}
.page-details .device-header .signal.power2{background-image: var(--signal-p2-32p-white-top);}
.page-details .device-header .signal.power3{background-image: var(--signal-p3-32p-white-top);}
.page-details .device-header .signal.eth{background-image: var(--signal-signa-eth-white);}
.page-details .device-header .signal.nolink{background-image: var(--signal-err-link);}
.page-details .device-header .mail.active{background-image: var(--mail-active-w-32p-white-top);}
.page-details .device-header .mail.disabled{background-image: var(--mail-active-w-32p-white-top);}

.page-details .device-name{
    font-size: 21px;
    line-height: 32px;
    font-weight: 300;
}
.page-details .device-name span{font-weight: 400;}

.page-details .command-btn{margin-bottom: 0;}
.page-details .command-btn .icon{
    background-color: var(--page-details-command-btn-icon);
}

.page-details .command-btn a span{
    color: var(--page-details-values-list-row);
    font-weight: 300;
}

.page-details .command-btn .icon-bg{
    background-color: var(--page-details-command-btn-icon);
    width: 56px;
    height: 56px;
    border-radius: 4px;
    position: relative;
    margin: 0 auto;
}


.page-details .command-btn .btn{
    max-width: 96px;
    padding-top: 10px;
    border-radius: 6px 6px 0 0;
}

.page-details .command-btn .icon{
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}

.page-details .command-btn .icon-alarm{background-image: var(--icon-alarm-icon);}
.page-details .command-btn .icon-service{background-image: var(--icon-icon-service);}
.page-details .command-btn .icon-realtime{background-image: var(--icon-icon-realtime);}
.page-details .command-btn .icon-programs{background-image: var(--icon-icon-programs);}
.page-details .command-btn .icon-parameters{background-image: var(--icon-icon-parameters);}
.page-details .command-btn .icon-history{background-image: var(--icon-icon-history);}
.page-details .command-btn .icon-graph{background-image: var(--icon-icon-graph);}

.page-details .command-btn.active .btn{background-color:   var(--page-details-command-btn-active) ;}
.page-details .command-btn.active .icon-bg{background-color: var(--button-submit-background-first-color);}
.page-details .command-btn.active .icon{opacity: 1;}
.page-details .command-btn.active .icon-alarm{background-image: var(--alarm-white-icon48p) ;}
.page-details .command-btn.active .icon-service{background-image:var(--service-white-icon48p) ;}
.page-details .command-btn.active .icon-realtime{background-image: var(--realtime-white-icon48p) ;}
.page-details .command-btn.active .icon-programs{background-image: var(--programs-white-icon48p) ;}
.page-details .command-btn.active .icon-parameters{background-image: var(--parameters-white-icon48p) ;}
.page-details .command-btn.active .icon-history{background-image: var(--history-white-icon48p) ;}
.page-details .command-btn.active .icon-graph{background-image: var(--graph-white-icon48p) ;}



/* QUANTITY QUERY */

/* at least 1, at most 8*/
.page-details .command-btn:nth-last-child(n+1):nth-last-child(-n+8):first-child, .page-details .command-btn:nth-last-child(n+1):nth-last-child(-n+8):first-child ~ .command-btn{min-width: 84px;}

/* at least 9 */
.page-details .command-btn:nth-last-child(n+9), .page-details .command-btn:nth-last-child(n+9) ~ .command-btn{min-width: 75px;}

/* at least 10 */
.page-details .command-btn:nth-last-child(n+10), .page-details .command-btn:nth-last-child(n+10) ~ .command-btn{min-width: 67px;}

/* at least 11 */
.page-details .command-btn:nth-last-child(n+11), .page-details .command-btn:nth-last-child(n+11) ~ .command-btn{min-width: auto;}


.page-details .section-header{
    background-color: var(--page-details-section-header);
    color: var(--button-submit-background-first-color);
    padding: 14px 0 0 0;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
}

.page-details .values-list{
    font-size: 15px;
    line-height: 19px;
    font-weight: 400;
    color:  var(--command--btn-color);
     word-wrap: break-word;
}

.page-details .values-list .row{
    padding: 8px 0;
    border-top: 1px solid var(--device-item-border-bottom) ;
    background-color: var(--page-details-values-list-row) ;
}
.page-details .values-list .row:first-of-type{border-top: 0;}

.page-details .values-list .row .max-width-container{
    width: 100%;
    display: flex;
}

.page-details .values-list .row.separator{
    padding: 14px 0;
    border-top: 0;
    background-color: var(--headers-text-color);
    font-size: 16px;
    font-weight: 300;
    color: var(--page-details-values-list-row-separator-color);
    text-align: center;
}

.row.sepa{
    padding: 14px 0;
    border-top: 0;
    background-color: var(--headers-text-color) !important;
    font-size: 16px;
    font-weight: 300;
    color: var(--page-details-values-list-row-separator-color);
}


.page-details .values-list .row.separator + .row{border-top: 0;}

.page-details .values-list .name{
    float: left;
}

.page-details .values-list .acronym{
    font-size: 13px;
    color: rgba(0, 0, 0, 0.5);
    float: left;
}

.page-details .values-list .value{
    font-size: 13px;
    line-height: 38px;
    text-align: right;
}

.page-details .values-list .tools .edit{
    display: block;
    width: 100%;
    height: 100%;
    background-image:var(--edit-grey-24p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
}



.page-details .results .dropdown-menu{
    background-color: var(  --body-bg);
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}


/* page HISTORY */
.history .source-select{
    background-color: var(--page-details-values-list-row);
    padding-top: 18px;
    padding-bottom: 25px;
}
/*
.history .source-select .title{
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    display: block;
    width: 100%;
    color: black;
}
.history .source-select .subtitle{
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
    display: block;
    width: 100%;
    color: #414042;
}
/*
.history .source-select .source-wrapper{text-align: center;}
.history .source-select .source-wrapper{text-align: right;}*/
/*.history .source-select .source-wrapper + .source-wrapper{text-align: left;}*/

.history .source-select .source{
    display: inline-block;
    padding: 25px 5px;
    text-align: center;
    cursor: pointer;
    opacity: 0.5;
}
.history .source-select .source.selected{opacity: 1;}

.history .source-select .source .icon{
    width: 108px;
    height: 108px;
    background-color: var(--history-source-select-source-icon-bg-color) ;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 5px;
}

.history .source-select .source .icon.device{background-image: var(--history-source-select-source-icon-device);}
.history .source-select .source .icon.server{background-image: var(--history-source-select-source-icon-server);}


.history .source-select .max-width-container{width: 100%;}
.history .source-select .source span{
    font-size: 11px;
    line-height: 14px;
}

.history .export{
    padding-top: 9px;
    padding-bottom: 15px;
}
.history .export .title{
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 18px;
}
.history .export .export-btn {
    font-size: 18px;
    line-height: 22px;
    display: inline-block;
    width: 127px;
    border: 1px solid var(--history-export-export-btn-color);
    border-radius: 3px;
    text-align: center;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px 2px;
}


.history .export .export-btn2 {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    width: 127px;
    border: 1px solid var(--history-export-export-btn-color);
    border-radius: 3px;
    text-align: center;
    background-color: var(--headers-text-color);
    float: left;
    margin-right: 10px;
    cursor: pointer;
    padding: 6px 2px;
}

.history .btn-group{
    padding-top: 9px;
    padding-bottom: 15px;
}

.history .btn-group .btn-secondary {
    font-size: 18px;
    line-height: 22px;
    display: inline-block;
    width: 153px;
    border: 1px solid var(--history-export-export-btn-color);
    border-radius: 3px;
    background-color: var(--headers-text-color) !important;
    text-align: center;
    float: left;
    margin-right: 10px;
    cursor: pointer;
    color: #212529 !important;
}

.history .export .export-btn2 :hover {
    background-color: var(--button-submit-background-first-color) !important;
}


.history .btn-group .btn-secondary:hover {
    background-color: var(--button-submit-background-first-color) !important;
}

.centeredexport{
	margin-left:auto;
	padding-bottom:0px !important;
}

.history .results{
    border-top: 1px solid var(--page-details-values-list-row-separator-color);
    padding-top: 15px;
}

.history .search-form{
    display: block;
    width: 100%;
}

.history .search-form .search-wrapper{float: left;}
.history .search-form .date-wrapper{float: left;}
.history .search-form .selectColumn-wrapper{
    float: left;
    padding: 0 10px;
}

.history .search-form .selectColumn-wrapper .caret, .history .search-form .date-wrapper .caret{
    border-top: 8px var(--page-details-values-list-row-separator-color) solid;
    top: 15px;
    margin-left: 5px;
    position: absolute;
    margin-top: 0;
}

.history #selectColumn, .history #daterange{
    font-size: 14px;
    line-height: 26px;
    white-space: normal;
    background-color: var(--headers-text-color);
    border: 0;
}
.history .search-form .selectColumn-wrapper .dropdown-toggle::after, .history .search-form .date-wrapper .dropdown-toggle::after{border-top: 8px #3e3e48 solid;}


.history .selectColumn-wrapper .form-check{
    padding: 10px 40px 10px 10px;
    float: left;
    clear: both;
    width: 100%;
    border-bottom: 1px solid var(--page-details-values-list-row-separator-color);
}

.history .selectColumn-wrapper .form-check:last-child{border-bottom: 0;}

.history .selectColumn-wrapper .form-check-label{
    margin-bottom: 0;
    float: left;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.form-check-input-email{
	margin-bottom: 0;
    float: center;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.history .selectColumn-wrapper .form-check-input{
    position: absolute;
    margin: 0;
    float: left;
    top: 13px;
    right: 12px;
}

.history .search-form .search-terms-group{
    border: 1px solid var(--history-search-form-search-terms-group);
    border-radius: 5px;
    width: 100%;
}
.history .search-form .search-terms{
    font-size: 15px;
    line-height: 18px;
    color: var(--history-search-form-search-terms-group);
    border: 0;
}
.history .search-form .search-terms::placeholder{color: var(--history-search-form-search-terms-group);}

.history .search-form button[type="submit"]{
    background-image: var(--history-search-form) ;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
}



.glyphicon{
	    width: 20px;
    height: 20px;
    
}

.glyphicon-arrow-left{
	 background:transparent url('../icons/arrow_left_dark.svg') center center no-repeat;
display: inline-block;
  background-repeat: no-repeat;
    background-position: 50% 50%;
}

.glyphicon-arrow-right {
 background:transparent url('../icons/arrow_right_dark.svg') center center no-repeat;
display: inline-block;
  background-repeat: no-repeat;
    background-position: 50% 50%;
}


.glyphicon-chevron-left {
 background:url('../icons/arrow_left_dark.svg');
    width:20px;
    height:20px;
   
}
.glyphicon-chevron-right {
 background:url('../icons/arrow_left_dark.svg');
    width:20px;
    height:20px;
}

.dateCol{
    min-width: 125px;
}

div.dataTables_scrollHeadInner{
	margin:auto;
}

div.dataTables_wrapper {
    margin: auto;
}

.dataTables_paginate .paginate_button
{
	padding: 0.0em 0em !important;
}

.export-btn2_wrap
{
	padding: 0.5em
}

div.dt-button-collection-title
{
	text-align:center;
	padding:0.3em 0 0.5em;
	font-size:0.9em
}

a.dt-button.dropdown-item.buttons-columnVisibility, a.buttons-columnVisibility.active, .buttons-columnVisibility:active {
    color: #16181b !important;
    text-decoration: none !important;
    background-color: #007bff !important;
    background: linear-gradient(to bottom, rgba(153,153,153,0.1) 0%, rgba(0,0,0,0.1) 100%) !important;
    -webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

div.dataTables_length {
	margin-left: 2em;
	padding-top: 9px !important;
	padding-bottom: 15px !important;
}


div.dataTables_wrapper div.dataTables_filter{
    padding-top: 9px !important;
	padding-bottom: 15px !important;
}

div.dt-button-collection.dropdown-menu{
	overflow-y: auto !important;
	max-height: 500px !important;
}
/*
.history .results-list .dateCol{
    min-width: 135px;
}
.history .results-list table th, .history .results-list table td{
    padding-left: 0;
    padding-right: 20px;
}
.history .results-list table th{
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    vertical-align: top;
}

.history .results-list table td{
    font-weight: 300;
    font-size: 13px;
    line-height: 17px;
}

*/
.history .ion-ios-arrow-left{
    width: 100%;
    height: 20px;
    background-image: url('../icons/arrow_left_dark.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: block;
}
.arrow-left{
	 background: url('../icons/arrow_left_dark.svg') no-repeat;
   width: 20px;
   height: 20px;
   border: none;
   display:inline-block;
}
.arrow-right{
	 background: url('../icons/arrow_left_dark.svg') no-repeat;
   width: 20px;
   height: 20px;
   border: none;
   display:inline-block;
}
.history .ion-ios-arrow-right{
    width: 100%;
    height: 20px;
    background-image: url('../icons/arrow_right_dark.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: block;
}

/*Daterangepicker Non Usato*/
.daterangepicker td.in-range, .daterangepicker td.available:focus, .daterangepicker td.available:hover{background-color: rgba(23, 102, 147, 0.2);}
.daterangepicker td.active, .daterangepicker td.active:focus, .daterangepicker td.active:hover{background-color: #176693;}

.daterangepicker.dropdown-menu{
    background-color: var(--headers-text-color);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    border: 1px solid rgba(0,0,0,.15);
}

.history .date-wrapper .form-control, .history .date-wrapper .form-control:focus,
.daterangepicker .form-control, .daterangepicker .form-control:focus
{
    color: #333;
}


.daterangepicker .ranges{
    border: 0;
    box-shadow: none;
}

.daterangepicker .ranges .range_inputs{padding: 10px;}

.daterangepicker .btn-primary, .daterangepicker .btn-primary:hover, .daterangepicker .btn-primary:focus, .daterangepicker .btn-primary.disabled, .daterangepicker .btn-primary:disabled{
    background-color: var(--button-submit-background-first-color);
    border-color: var(--button-submit-background-first-color);
}


@media (max-width: 800px){
    /* fix datepicker bug */
    .daterangepicker.dropdown-menu{
        left: 0 !important;
    }
}

@media (max-width: 991px){
    body.page-details{
        padding-top: 60px; /* TEMP */
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .page-details .navbar-toggler{display: inline-block;}
}
@media (min-width: 768px){
    .page-details .navbar-brand{display: inline-block;}
    .page-details .device-name-xs{display: none;}
    
    .page-details .section-header{font-size: 18px;line-height: 22px;padding: 26px 0;}
    .page-details .values-list{font-size: 16px;line-height: 24px;}
    .page-details .values-list .row{padding: 14px 0;}
    .page-details .values-list .acronym{padding-left: 8px;font-size: 14px;}
    .page-details .values-list .value{font-size: inherit;line-height: inherit;text-align: left;}
    .page-details .values-list .row.separator{font-size: 18px;}
    
/*  .history .source-select .source .icon{width: 90px;height: 90px;} */
    .history .source-select .source{float: left;padding-left: 0;padding-right: 0;margin-right: 10px;max-width: 90px;}
    .history .source-select .source .icon{width: 90px;height: 90px;}
    .history .source-select .source span{font-size: 13px;line-height: 16px;display: inline-block;padding-top: 12px;}
    .history .source-select .source-wrapper{text-align: left;}
    .history .source-select .title{font-size: 18px;line-height: 22px;}
    .history .source-select .title{font-size: 18px;line-height: 22px;}
    
    .history .export .title{font-size: 18px; line-height: 22px;}
    .history .export .export-btn{padding: 11px 2px;}
    
    .history .results{padding-top: 20px;}
    
    .history .search-form{display: flex;width: 100%;}
    .history .search-form .search-wrapper{float: none;}
    .history .search-form .date-wrapper{float: none;}
    .history .search-form .selectColumn-wrapper{float: none;}
    
    .history .search-form .search-terms-group{max-width: 400px;}
    
    .daterangepicker .ranges{width: 120px;}
    
}

@media (min-width: 992px){
    .history .search-form button[type="submit"]{width: 42px;height: 42px;}
    .history .search-form .search-terms{font-size: 18px;line-height: 22px;}
    .history #selectColumn, .history #daterange{font-size: 18px; line-height: 34px;}
    .history .results-list table th{font-size: 16px;line-height: 20px;}
    .history .results-list table td{font-size: 14px;line-height: 18px;}
}



/* TABS NAVIGATION : Tab on top when size is  mobile*/

.tabs-navigation::-webkit-scrollbar {
    height: 0px;  
    background: transparent; 
}
.tabs-navigation::-webkit-scrollbar-thumb {
    background: transparent;
}
.tabs-navigation{
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.tabs-navigation ul{
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    width: auto;
}
.tabs-navigation ul li{
    display: inline-block;
    text-align: left;
    padding-right: 20px;
    text-transform: uppercase;
    height: 39px;
}
.tabs-navigation ul li a{
    display: block;
    width: 100%;
    height: 100%;
    color: var(--page-details-values-list-row);
    text-decoration: none;
}

.tabs-navigation ul li a.selected{
    border-bottom: 5px solid var(--button-submit-background-first-color);
    color: var(--button-submit-background-first-color);
}


/* MODAL */
.modal{
    position: fixed;
    z-index: 10000;
    top: 0;
    background-color: var(--modal-background-color) ;
}
.modal-dialog{
    margin-top: 10%;
}

.modal-content{
     background-color: var(--modal-content-background-color);
     padding: 0 15px;

 }
.modal-header{
    border-bottom: solid 1px var(--modal-header-border-bottom);
}
.modal-body{text-align: center;  color: var(--page-details-values-list-row-separator-color);}
.modal-body .caption{
    padding-top: 10px;
    font-size: 13px;
    line-height: 14px;
    color: var(--page-details-values-list-row-separator-color);
    font-weight: 300;
}


.modal-body .input-group{
    width: auto;
    margin: 10px auto;
    min-width: 150px;
}

.modal-body .input-group select{
   /* background-color: transparent;*/
    border: 1px solid var(--page-details-values-list-row-separator-color);
}

.modal-body .input-group select:focus{
    box-shadow: none;
    border-color: inherit;
}

.modal-body input[type="text"]{
    border-radius: 5px;
    padding: 5px 17px;
   /* background-color: transparent;*/
    border: solid 1px  var(--modal-body-input-color);
    font-size: 18px;

    }

.modal-footer{
    border-top: solid 1px var(--modal-body-input-color);
    padding: 1em 0;
}
.modal-header .close{
    background: transparent var(--modal-icon-svg) center center no-repeat;
}

.modal .btn-danger, .modal .btn-cancel{
   
    font-size: 18px;
    text-transform: uppercase;
    padding: 6px 17px ;
    width: 48%;
}
.modal .btn-danger{
    background-color: var(--modal-btn-danger-background);
    border-color: var(--modal-btn-danger-border);
    color: #fff;
}
.modal .btn-cancel{
    background-color: transparent;
    border-color: transparent;
    color: var(--modal-btn-cancel);
}
.modal-title{
    font-weight: 300;
    font-size: 18px;
      color: var(--page-details-values-list-row-separator-color);
}

.modal-subtitle{
    font-weight: 300;
    font-size: 18px;
      color: var(--page-details-values-list-row-separator-color);
}


@media (min-width: 768px){
    .modal-body .caption{font-size: 14px;line-height: 15px;}
}


/* PAGE PROFILE */

body.profile{
    padding-top: 60px; /* TEMP */
    background-color: var(  --body-bg);
}

body.profile.alarms{
    padding-top: 20px;
}

.profile .plant-name {font-size: 18px;line-height: 36px;}
.profile .plantgroup-header .plant-icon img{margin-top: 4px; }
.profile .plantgroup-header .modal-title{color: var(--profile-plantgroup-header-modal-title);}
.profile .plantgroup-header .edit-icon{
    height: 36px;
}

.profile .plantgroup-header .add-btn{
    display: inline-block;
    width: 100%;
    height: 36px;
    background-color: var(--button-submit-background-first-color);
    font-size: 14px;
    line-height: 36px;
    color: var(--headers-text-color);
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0px 2px var(--button-box-shadow-btn) ;
    text-decoration: none;
}

.profile .plantgroup-header .edit-icon .icon{
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background-color: var(--profile-plantgroup-header-color);
    background-image:var(--profile-plantgroup-header-edit-icon);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.profile .device-item {padding: 14px 0;}
.profile .device-item .device-name{
    color: var(--profile-device-item-device-name-color);
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 7px;
}
.profile .device-item .caption{
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 14px;
    font-weight: 300;
    color: #58595B;
}

.profile .device-item .tools{
	text-align: center;
	padding-right: 0px;
	padding-left: 0px;
	}
.profile .device-item .tools .edit{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/edit_dark_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .reset{
    display: block;
    width: 100%;
    height: 100%;
     background-image: url('../icons/reset_grey_24p.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .erase{
    display: block;
    width: 100%;
    height: 100%;
     background-image: url('../icons/erase_grey_24p.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .nosignal{
    display: block;
    width: 100%;
    height: 100%;
     background-image: url('../icons/disconnected_32p.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.nosignaltop{
    display: block;
    width: 100%;
    height: 100%;
     background-image: url('../icons/disconnected_32p.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.editwhite{
	display: block;
    background-image: url(../icons/edit_white_24p.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-size: 24px 24px; 
}

.editwhiteplant{   
display: inline-block;
width: 36px;
height: 36px;
border-radius: 5px;
background-color: transparent;
background-image: url(../icons/edit_white_24p.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
    
}

.sendpasswordtoDevice{   
display: inline-block;
width: 36px;
height: 27px;

border-radius: 5px;
background-color: transparent;
background-image: var(--locked-white-top);
background-repeat: no-repeat;
background-position: 50% 50%;
    
}


.downloadwhiteplant{   
display: inline-block;
width: 36px;
height: 36px;
border-radius: 5px;
background-color: transparent;
background-image: url(../icons/download_white_24p.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
    
}



.deletewhiteplant{   
display: inline-block;
width: 36px;
height: 36px;
border-radius: 5px;
background-color: transparent;
background-image: url(../icons/delete_white_24p.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
    
}


   

.calendarclock{
		display: block;
    background-image: url(../icons/calendarclock.svg);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-size: 24px 24px; 
	
	
}



.profile .device-item .tools .delete{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/delete_red_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .isprincipal{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/cog_grey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


.profile .device-item .tools .icon-calendar{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-calendar);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-calendar-green{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-calendar-green);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-calendar-grey{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-calendar-grey);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-alarm{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-alarms-26p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-alarm-grey{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-alarms-26p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: invert(81%) sepia(0%) saturate(36%) hue-rotate(274deg) brightness(91%) contrast(99%);
}

.profile .device-item .tools .icon-scheduler-grey{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-scheduler-grey-26p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-scheduler-green{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-scheduler-green-26p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .icon-scheduler-disabled{
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--icon-scheduler-disabled-26p);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .enabled{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/enabled_grey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.profile .device-item .tools .notenabled{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/not_enabled_grey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


.profile .device-item .tools .isnotprincipal{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/cog_lightgrey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .device-item .tools .keygrey{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/key_grey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.profile .device-item .tools .keylightgrey{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/key_lightgrey_24p.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile .caption-bar{
    font-size: 13px;
    color: #D0D1D2;
    font-weight: 300;
}

.profile.alarms .plant-name{
    padding: 0;
    font-size: 15px;
    white-space: nowrap;
}

.profile.alarms .disableall-btn{
    display: inline-block;
    width: 100%;
    height: 36px;
    background-color: var(--profile-alarms-disableall-btn);
    font-size: 14px;
    line-height: 36px;
    color: var(--headers-text-color);
    text-transform: uppercase;
    border-radius: 5px;
    box-shadow: 0px 2px #7D141E;
    text-decoration: none;
}



.profile.alarms .device-item .alarmsEnabled{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/mail_active_green.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile.alarms .device-item .alarmsEnabledGreen{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/mail_active_green2.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.profile.alarms .device-item .alarmsDisabled{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../icons/mail_disabled_red.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

@media (min-width: 768px){
    .profile .device-item .device-name{
        font-size: 18px;
        line-height: 22px;
    }
    .profile .device-item .caption{
        font-size: 13px;
        line-height: 15px;
    }
    
    .profile .plantgroup-header .add-btn{font-size: 18px;}
    
    .profile .caption-bar{
        font-size: 15px;
    }
    
    .profile.alarms .plant-name{
        padding: 0 15px;
        font-size: 18px;
        white-space: normal;
    }
}
@media (min-width: 992px){
    body.profile{
        padding-top: 70px; /* TEMP */
    }
}


/* PAGE NEW ACCOUNT */

body.newaccount{
    padding-top: 60px;
}

.form-register{padding-top: 30px;}
.form-register .fileUpload {
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    color: var(--headers-text-color);
    width: 100%;
    background-color: var(--button-submit-background-first-color);
    border-color: var(--button-submit-background-first-color);
    -webkit-box-shadow: 0 2px var(--button-submit-background-color);
    box-shadow: 0 2px var(--button-submit-background-color);
    text-transform: uppercase;
}
.form-register .fileUpload input.upload {
    max-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.form-register .selectedFile{
    color: var(--form-color-placeholder);
    font-weight: 300;
    display: block;
    width: 100%;
    text-align: center;
}

.form-register .controls button[type="submit"]{
    width: 100%;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-transform: uppercase;
    color: var(--button-submit-background-first-color);
}

.form-register .controls button[type="submit"]:not(:disabled):not(.disabled):active{
    background-color: transparent;
    border: 0;
}

@media (min-width: 992px){
    body.newaccount{padding-top: 70px;}
}


/* PAGE ADD PLANT */

body.add-plant{padding-top: 60px;}

.form-addplant{padding-top: 30px;}
.form-addplant .fileUpload {
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    color: var(--headers-text-color);
    width: 100%;
    background-color: var(--button-submit-background-first-color);
    border-color: var(--button-submit-background-first-color);
    -webkit-box-shadow: 0 2px var(--button-submit-background-color);
    box-shadow: 0 2px var(--button-submit-background-color);
    text-transform: uppercase;
}
.form-addplant .fileUpload input.upload {
    max-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.white{
	 color: var(--headers-text-color);
}
.white a{
	 color: var(--headers-text-color);
	 text-decoration:none;
	 
}

.white a:hover{
	 color: var(--headers-text-color);
	 text-decoration:none;
}


.form-addplant .selectedFile{
    color: #3E3E48;
    font-weight: 300;
    display: block;
    width: 100%;
    text-align: center;
}

.form-addplant .controls button[type="submit"]{
    width: 100%;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-transform: uppercase;
    color: var(--button-submit-background-first-color);
}

.form-addplant .form-control, .form-addplant .form-control:focus{
    color: #3E3E48;
    border-color: #3E3E48;
}
.form-addplant .form-control::placeholder{
    color: #3E3E48;
}
.form-addplant .controls button[type="submit"]:not(:disabled):not(.disabled):active{
    background-color: transparent;
    border: 0;
}

@media (min-width: 992px){
    body.add-plant{padding-top: 70px;}
}


/* PAGE DEVICE INFO */

.info-device .results-list table th, .info-device .results-list table td{
    padding-left: 0;
    padding-right: 20px;
}
.info-device .results-list table th{
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    vertical-align: top;
}

.info-device .results-list table td{
    font-weight: 300;
    font-size: 13px;
    line-height: 17px;
}

@media (min-width: 768px){
	
	.modal-content{
        width: auto !important;
    max-width: 353px !important;
	}
	
    .info-device .results-list table th{
        font-size: 18px;
        line-height: 22px;
    }

    .info-device .results-list table td{
        font-size: 15px;
        line-height: 18px;
    }
}
 .margin-top {
   transition: transform 250ms ease-in-out;
 }
 
 .fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s linear;
}

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s linear;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}



.btn-grey {
  color: #fff;
  background-color: rgb(71,71,81);
  border-color: rgb(71,71,81);
}

.btn-grey:hover {
  color: rgb(71,71,81);
  background-color: #fff;
  border-color: #fff;
}

.btn-grey:focus, .btn-grey.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-grey.disabled, .btn-grey:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-grey:not(:disabled):not(.disabled):active, .btn-grey:not(:disabled):not(.disabled).active,
.show > .btn-grey.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-grey:not(:disabled):not(.disabled):active:focus, .btn-grey:not(:disabled):not(.disabled).active:focus,
.show > .btn-grey.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
}
/*
.icon-exportwhite{
  width: auto;
  height: 49px;
  background:  var(--icon-exportwhite) no-repeat;
    background-size: contain;
}
/*
.icon-orangesync{
  width: auto;
  height: 49px;
  background:  url('../icons/orangesync.svg') no-repeat;
    background-size: contain;
}

.icon-savedisksvg{
  width: auto;
  height: 49px;
  background:  url('../icons/savedisksvg.svg') no-repeat;
    background-size: contain;
}
*/
.input-group-spinner{
	margin:0px 0px 0px 0px;
	width: auto;
}

.btn-primary-trans {
	color:#262631;
  background-color:rgb(241,142,30);
  border-color: rgb(241,142,30);
}

#scollTop{
  background-color: #d7d7d7;
  border: medium none;
  border-radius: 8px;
  bottom: 10px;
   color: var(--dropdown-wrapper-color);
  cursor: pointer;
  display: none;
  outline: medium none;
  padding: 10px 15px 7px;
  position: fixed;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  opacity : 0.6;
}

#scollTop:hover {
 opacity:1;
}
.badge-orange {
  color: #262631;
  background-color: var(--dropdown-wrapper-color);
}

.badge-orange[href]:hover, .badge-orange[href]:focus {
  color: #262631;
  text-decoration: none;
  background-color: var(--dropdown-wrapper-color);
}

.text-nowrap {
    white-space: nowrap;
}

.radiolist{
	list-style: none;
}

.radioblock{
display:inline-block;	
}

/* loading dots */

.loading:after {
  content: ' .';
  animation: dots 3s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: var(--headers-text-color);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 var(--headers-text-color),
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 var(--headers-text-color),
      .5em 0 0 white;}}

.btn-outline-orange {
  color: #ffffff ;
  background-color: transparent;
  background-image: none;
  border-color: transparent;
   border-top:none;
   border-left:none;
   border-right:none;
  border-top-right-radius:0px;
   border-top-left-radius:0px;
 border-bottom-right-radius:0px;
 border-bottom-left-radius:0px;
text-transform: uppercase;
font-size: small;
 border-width: 4px;
}

.btn-outline-orange:hover {
  color: #ffffff ;
  background-color: transparent;
  background-image: none;
  border-color: rgb(240, 141, 29);
   border-width: 4px;
   border-top:none;
   border-left:none;
   border-right:none;
  border-top-right-radius:0px;
   border-top-left-radius:0px;
 border-bottom-right-radius:0px;
 border-bottom-left-radius:0px;
}

.btn-outline-orange:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 141, 29, 0.5);
}

.btn-outline-orange.disabled, .btn-ou	tline-secondary:disabled {
  color: rgb(240, 141, 29);
  background-color: transparent;
}

.btn-outline-orange:not(:disabled):not(.disabled):active, .btn-outline-orange:not(:disabled):not(.disabled).active,
.show > .btn-outline-orange.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-sorange:not(:disabled):not(.disabled):active:focus, .btn-outline-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-orange.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}


.hamburger {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 1.1em;
    margin-right: 0.3em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
    color: #fff;
}

.hamburger:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

.whitebackground-color{
	 background-color: var(--headers-text-color);
}

.divtablebg{
    background-color: var(--page-details-values-list-row) !important ;
}

.divtablerow{
    padding: 8px 0;
    border-top: 1px solid var(--device-item-border-bottom) ;
    background-color: var(--page-details-values-list-row) ;
}


.addButton{
	position:fixed;
	bottom:60px; 
	right: 20px;
	width:6%;
}


@media  screen and (max-width: 520px) and (min-width: 240px) {

	.addButton{
	width:20%;
}
}


@media  screen and (max-width: 799px) and (min-width: 520px) {

	.addButton{
	width:12%;
}
}


@media screen and (max-width: 1480px) and (min-width: 800px) {

	.addButton{
	width:8%;
}
}

.badge-notify{
   position:relative;
   top: 19px !important;
   left: 14px;
}
.smalltextCaption{
	   display: block;
    width: 100%;
    font-size: 12px;
    line-height: 14px;
    font-weight: 300;
    color: rgb(52, 58, 64);
	
}

.color-light-red {
  color: #FA283B;
}
.color-orange {
  color: rgb(241, 142, 30) !important;
}


.color-red {
  color: var(--profile-alarms-disableall-btn) !important;
}

.color-green {
  color: #2fc723 !important;
}

.icon-X{
font-size: 18px;
padding-right: 25px;
outline: 0;
 background:transparent url('../icons/X_32p.svg') -2px -6px no-repeat;
 
}  

.no-corner-filter-index{
	border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
height:41px !important;
}

.searchButton{
width: 100% !important;
}
.easy-autocomplete{

  width:65% !important;
  
}


.badge-orange2 {
  color: rgb(33, 37, 41) !important;
  background-color: var(--dropdown-wrapper-color);
}

.badge-orange2[href]:hover, .badge-orange2[href]:focus {
  color: #262631 !important;
}

.noclick{
	pointer-events: none;
}

.orange-evco-bg {
	background-color: #f18e1e !important;
}

.blue-evco-text {
	color: #0056b3 !important;
}

.selected-background {
  background-color: rgba(128, 128, 128, 0.1);
}




.btn-green {
  color: #fff;
  background-color: rgb(72,97,1);
  border-color: rgb(41,69,18);
}

.btn-green:hover {
  color: rgb(71,71,81);
  background-color: #fff;
  border-color: #fff;
}

.btn-green:focus, .btn-green.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-green.disabled, .btn-green:disabled {
  color: #fff;
  background-color: #486101;
  border-color: #294512;
}

.btn-green:not(:disabled):not(.disabled):active, .btn-green:not(:disabled):not(.disabled).active,
.show > .btn-green.dropdown-toggle {
  color: #fff;
  background-color: #294512;
  border-color: #486101;
}

.btn-green:not(:disabled):not(.disabled):active:focus, .btn-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-green.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}


 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
} 


.smartlabel{
    background-image: url('/resources/icons/smart_label_host_2019.svg') ;
 width: 160px; height: 60px;
 }