/* page-node-type-smachine */

a.form-item__description {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  font-size: 0.66rem;
  line-height: 1.0625rem;
}

.field--name-field-structure .field__label {
  float: left;
  font-weight: normal;
}

.field--name-field-structure .field__label::after {
    content: ':';
}

.page-node-type-smachine #block-control {
  width: 90%;
  text-align: left;
  float: none;
  font-size: 1em;
  padding-left: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  margin: 6px auto;
}

.page-node-type-smachine #report.wrapper-control { /* verificare se esiste ancora */
  width: 62px;
  padding: 0px 10px;
}

.page-node-type-smachine .top-icons { /* top icons esistono solo nelle tabs - verificare */
  background-repeat: no-repeat ;
  background-size: 50%;
  background-position-x: center;
  background-position-y: center;  
  }
  
  .page-node-type-smachine .top-icons .sep {
    width: 80%;
    padding: 2px;
  }

.page-node-type-smachine #button-stop { /* non dovrebbe più essere necessario - verificare */
    display: block;
    width: 100%;
    position: relative;
    float: none;
    clear: both;
}



.page-node-type-smachine #button-stop a.button-emergency {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14pt;
}

.page-node-type-smachine #container.node-device {
  clear: both;
  min-width: 1000px;
  margin: auto;
}

.page-node-type-smachine #block-control {
  width: 358px;
  border-radius: 16px;
  float: left;
  margin: 20px 5px;
  padding: 5px 15px;
}

.page-node-type-smachine #block-control .machine-label {
  margin: 4px 10px;
}

#life, #machine, #alert {
  margin: 14px 0px 14px 14px !important;
}

.page-node-type-smachine #block-control .top-icons {
  width: 28%;
  float: left;
  height: 100px;
  border-radius: 10px;
  border: 1px solid #cacaca;
}

.page-node-type-smachine a .machine-label,
.page-node-type-smachine .machine-label,
.page-node-type-smachine .status-text {
  color: #fff;
}

.page-node-type-smachine #block-control .status-text {
  font-weight: bold;
  padding-top: 46px;
  text-align: center;
}

.page-node-type-smachine #block-control .background-bar {
  width: 84%;
  height: 2px;
  margin: 5px auto;
}


#stop {
  width: 35px;
  height: 35px;
  float: right;
  border: 1px solid #f00;
  background: #f00;
  border-radius: 20px;
  text-align: center;
  font-size: 2em;
}

.page-node-type-smachine #life {
  background-image: url(https://www.sanification.it/machine/images/life.svg);
}

.page-node-type-smachine .on #machine {
  background-image: url(https://www.sanification.it/machine/images/machine-on.svg);
}

.page-node-type-smachine .off #machine {
  background-image: url(https://www.sanification.it/machine/images/machine.svg);
}

.page-node-type-smachine #machine { /* for test */
  background-image: url(https://www.sanification.it/machine/images/machine.svg);
}

.page-node-type-smachine #alert {
  background-image: url(https://www.sanification.it/machine/images/alert.svg);
}

#block-control .circle-progress-bar {
  width: 118px;
  float: left;
}

#block-control .progressbar {
  display: inline-block;
  width: 280px;
  margin: 0px;
}

#block-control .circle {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center;
}

#block-control .circle:after {
  width: 120px;
  height: 120px;
  content: "";
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 30px;
  left: 30px;
}

#block-control .circle canvas {
  vertical-align: middle;
  border-radius: 50%;
}

#block-control .circle div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -48px;
  width: 100%;
  text-align: center;
  line-height: 0px;
  font-size: 10pt;
  font-family: arial;
  font-weight: bold;
}

#block-control .circle span {
  display: block;
  margin-top: 12px;
}

/* css verificati */
.page-node-type-smachine #block-control {
  border: 1px solid transparent;
  background: #8181f5;
}



/* ---- CREARE UN CSS A PARTE ----
------- CAMBIO COLORI IN FUNZIONE DELL'ATTIVITÀ IN CORSO ----- */

/* ICONA MAIN FUNCTION */
/* main function è l'icona main function
.field-main-function-  | Off
.field-main-function-1 | Stand-by
.field-main-function-2 | Ozonation
.field-main-function-3 | Decay
.field-main-function-4 | Ionization
*/

.page-node-type-smachine #block-control .field-main-function-  { background-color: #a2a2a2; }
.page-node-type-smachine #block-control .field-main-function-2 { background-color: #00c3ff; }
.page-node-type-smachine #block-control .field-main-function-2 { background-color: #127a9a; }
.page-node-type-smachine #block-control .field-main-function-3 { background-color: #04d011; }
.page-node-type-smachine #block-control .field-main-function-4 { background-color: #cdd004; }


/* ICONA LIFE COMPONENTS */
/* .field-life-value- */
.page-node-type-smachine #block-control .field-life-value-,
.page-node-type-smachine #block-control .field-life-value-0 { background-color: #ff0000; } /* allarme = uno o più componenti a fine vita */
.page-node-type-smachine #block-control .field-life-value-1 { background-color: #ffff00; } /* alert = uno o più componenti mezzo ciclo vita */
.page-node-type-smachine #block-control .field-life-value-2 { background-color: #04d011; } /* good = nessun componente è sotto la soglia */


/* ICONA ALLARME GENERALE */
/* .field-alert-value- */
.page-node-type-smachine #block-control .field-alert-value-1 { background-color: #ff0000; }
.page-node-type-smachine #block-control .field-alert-value-0 { background-color: #04d011; }


/* ICONA ALLARME CONNESSIONE/ALIMENTAZIONE */
/* .field-connect-alert (campo non presente) 
.page-node-type-smachine #block-control.connect-alert .field-alert-value-1,
.page-node-type-smachine #block-control.connect-alert .field-alert-value-0,
.page-node-type-smachine #footer .time-difference-alert { background-color: #ff0000; } /* allarme = il matching tra data e ora invio/ricezione API/macchina non collima * /
*/


/* colorazioni sfondi stato macchina */
/* .main-  | Off */
.page-node-type-smachine .main- #sensor-block .background-icons,
.page-node-type-smachine .main- .sensor-wrapper,
.page-node-type-smachine .main- .status-bar,
.page-node-type-smachine .main- .background-bar,
.page-node-type-smachine .main- #block-control,
.page-node-type-smachine .main- .bottom-box {
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.page-node-type-smachine .main- #block-control .field-life-value-,
.page-node-type-smachine .main- #block-control .field-life-value-1,
.page-node-type-smachine .main- #block-control .field-life-value-2,
.page-node-type-smachine .main- #block-control .field-alert-value-0,
.page-node-type-smachine .main- #block-control .field-alert-value-1,
.page-node-type-smachine .main- #block-control .field-main-function-,
.page-node-type-smachine .main- #block-control .field-main-function-1,
.page-node-type-smachine .main- #block-control .field-main-function-2,
.page-node-type-smachine .main- #block-control .field-main-function-3,
.page-node-type-smachine .main- #block-control .field-main-function-4,
.page-node-type-smachine .main- #block-control .field-alert-value-,
.page-node-type-smachine .main- #block-control .field-alert-value-0,
.page-node-type-smachine .main- #block-control .field-alert-value-1,
.page-node-type-smachine .main- #block-control .machine-label,
.page-node-type-smachine .main- #stop,
.page-node-type-smachine .main-1 #stop {
  background-color: #ebebeb !important;
  color: #000 !important;
  border-color: #dedede !important;
}

.page-node-type-smachine .main- #sensor-block .status-text,
.page-node-type-smachine .main- #block-control .status-text {
  font-size: 0.01em;
  color: transparent;
}

.page-node-type-smachine .main- #sensor-block .background-icons {
  background: #6e6e6e;
}

.page-node-type-smachine .main- #sensor-block .background-bar {
  display: none;
}

/* .page-node-type-smachine .main- #stop,
.page-node-type-smachine .main-1 #stop, */
.page-node-type-smachine .main- #block-control,
.page-node-type-smachine .main- #box-menu-program {            
pointer-events: none;
}



/* .main-1 | Stand-by * /
.main-1 #prog0, .main-1 #prog1, .main-1 #prog2, .main-1 #prog3,
.main-1 #prog4, .main-1 #prog5, .main-1 #prog6, .main-1 #prog7 {
  background: #f7f7f7;
}

.main-1 a.command-button {
  color: #d9d9d9;
}
*/

/* .program- programmi di sanificazione
  .program-0 (auto) #prog0
  .program-1 (breath) #prog1
  .program-2 (people) #prog2
  .program-3 (clean) #prog3
  .program-4 (prevention) #prog4
  .program-5 (disinfection) #prog5
  .program-6 (sterilization) #prog6
*/


.program-0 #prog1, 
.program-0 #prog2, 
.program-0 #prog3, 
.program-0 #prog4, 
.program-0 #prog5, 
.program-0 #prog6, 
.program-0 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-1 #prog0, 
.program-1 #prog2, 
.program-1 #prog3, 
.program-1 #prog4, 
.program-1 #prog5, 
.program-1 #prog6, 
.program-1 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-2 #prog0, 
.program-2 #prog1, 
.program-2 #prog3, 
.program-2 #prog4, 
.program-2 #prog5, 
.program-2 #prog6, 
.program-2 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-3 #prog0, 
.program-3 #prog1, 
.program-3 #prog2, 
.program-3 #prog4, 
.program-3 #prog5, 
.program-3 #prog6, 
.program-3 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-4 #prog0, 
.program-4 #prog1, 
.program-4 #prog2, 
.program-4 #prog3, 
.program-4 #prog5, 
.program-4 #prog6, 
.program-4 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-5 #prog0, 
.program-5 #prog1, 
.program-5 #prog2, 
.program-5 #prog3, 
.program-5 #prog4, 
.program-5 #prog6, 
.program-5 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-6 #prog0, 
.program-6 #prog1, 
.program-6 #prog2, 
.program-6 #prog3, 
.program-6 #prog4, 
.program-6 #prog5, 
.program-6 #prog7 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}

.program-7 #prog0, 
.program-7 #prog1, 
.program-7 #prog2, 
.program-7 #prog3, 
.program-7 #prog4, 
.program-7 #prog5, 
.program-7 #prog6 {
  pointer-events: none;
  background: #cacaca !important;
  border: none;
  color: #000 !important;
}



.page-node-type-smachine .main- .program- #sensor-block .background-icons,
.page-node-type-smachine .main- .program- #block-control,
.page-node-type-smachine .main- .program- #block-control .field-alert-value-0,
.page-node-type-smachine .main- .program- #block-control .field-alert-value-1,
.page-node-type-smachine .main- .program- #prog0,
.page-node-type-smachine .main- .program- #prog1, 
.page-node-type-smachine .main- .program- #prog2, 
.page-node-type-smachine .main- .program- #prog3, 
.page-node-type-smachine .main- .program- #prog4, 
.page-node-type-smachine .main- .program- #prog5, 
.page-node-type-smachine .main- .program- #prog6, 
.page-node-type-smachine .main- .program- #prog7 {
  border: 1px solid #cacaca;
  background-color: #6e6e6e;
  color: #000;
}


/* .main-1 | Stand-by * /
.main-1 #prog0, .main-1 #prog1, .main-1 #prog2, .main-1 #prog3,
.main-1 #prog4, .main-1 #prog5, .main-1 #prog6, .main-1 #prog7 {
  background: #f7f7f7;
}

.main-1 a.command-button {
  color: #d9d9d9;
}


.main-1 .field_temp_value-class-10,
.main-1 .field_hum_value-class-10,
.main-1 .field_eco2_value-class-10,
.main-1 .field_tvoc_value-class-10,
.main-1 .field_h2_value-class-10,
.main-1 .field_ethanol_value-class-10,
.main-1 .field_ozone_value-class-10,
.main-1 .field_temp_value-class-9,
.main-1 .field_hum_value-class-9,
.main-1 .field_eco2_value-class-9,
.main-1 .field_tvoc_value-class-9,
.main-1 .field_h2_value-class-9,
.main-1 .field_ethanol_value-class-9,
.main-1 .field_ozone_value-class-9,
.main-1 .field_temp_value-class-8,
.main-1 .field_hum_value-class-8,
.main-1 .field_eco2_value-class-8,
.main-1 .field_tvoc_value-class-8,
.main-1 .field_h2_value-class-8,
.main-1 .field_ethanol_value-class-8,
.main-1 .field_ozone_value-class-8,
.main-1 .field_temp_value-class-7,
.main-1 .field_hum_value-class-7,
.main-1 .field_eco2_value-class-7,
.main-1 .field_tvoc_value-class-7,
.main-1 .field_h2_value-class-7,
.main-1 .field_ethanol_value-class-7,
.main-1 .field_ozone_value-class-7,
.main-1 .field_temp_value-class-6,
.main-1 .field_hum_value-class-6,
.main-1 .field_eco2_value-class-6,
.main-1 .field_tvoc_value-class-6,
.main-1 .field_h2_value-class-6,
.main-1 .field_ethanol_value-class-6,
.main-1 .field_ozone_value-class-6,
.main-1 .field_temp_value-class-5,
.main-1 .field_hum_value-class-5,
.main-1 .field_eco2_value-class-5,
.main-1 .field_tvoc_value-class-5,
.main-1 .field_h2_value-class-5,
.main-1 .field_ethanol_value-class-5,
.main-1 .field_ozone_value-class-5,
.main-1 .field_temp_value-class-4,
.main-1 .field_hum_value-class-4,
.main-1 .field_eco2_value-class-4,
.main-1 .field_tvoc_value-class-4,
.main-1 .field_h2_value-class-4,
.main-1 .field_ethanol_value-class-4,
.main-1 .field_ozone_value-class-4,
.main-1 .field_temp_value-class-3,
.main-1 .field_hum_value-class-3,
.main-1 .field_eco2_value-class-3,
.main-1 .field_tvoc_value-class-3,
.main-1 .field_h2_value-class-3,
.main-1 .field_ethanol_value-class-3,
.main-1 .field_ozone_value-class-3,
.main-1 .field_temp_value-class-2,
.main-1 .field_hum_value-class-2,
.main-1 .field_eco2_value-class-2,
.main-1 .field_tvoc_value-class-2,
.main-1 .field_h2_value-class-2,
.main-1 .field_ethanol_value-class-2,
.main-1 .field_ozone_value-class-2,
.main-1 .field_temp_value-class-1,
.main-1 .field_hum_value-class-1,
.main-1 .field_eco2_value-class-1,
.main-1 .field_tvoc_value-class-1,
.main-1 .field_h2_value-class-1,
.main-1 .field_ethanol_value-class-1,
.main-1 .field_ozone_value-class-1,
.main-1 .field_temp_value-class-0,
.main-1 .field_hum_value-class-0,
.main-1 .field_eco2_value-class-0,
.main-1 .field_tvoc_value-class-0,
.main-1 .field_h2_value-class-0,
.main-1 .field_ethanol_value-class-0,
.main-1 .field_ozone_value-class-0 {
    border: none;
    background: none;
}

.main-1 #sensor-block .machine-label, 
.main-1 #sensor-block .status-text {
  color: #d7d7d7;
}

/*
.main-2 | Ozonation
.main-3 | Decay
.main-4 | Ionization
*/

/* 
.field-function- .command-button {
  pointer-events: none;
  opacity: 0.5;  Opzionale: puoi anche aggiungere un'opacità per evidenziare che l'elemento è disabilitato 
}
*/