@font-face {
  font-family: Lato;
  @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

:root {
  --font: "Lato", sans-serif;
  --button-radius: 0.5em;

  --primary-color: #3eba7b;
  --primary-color-alpha: #3eba7b1f;
  --primary-hover-color: #30ba7b;
  --secondary-color: #447bd1;
  --secondary-hover-color: #3e7bd1;
  --palette-color-1: red;
  --palette-color-2: #547bd1;
  --palette-color-3: #005bbb; /* Verde saturo - RGB: 80/158/47*/
  --palette-color-4: #005bbb; /*Blu chiaro - RGB: 0/91/187*/
  --palette-color-5: #001a70;
   
  --red: #d94436;
  --orange: #F2C94C;
  --blue: #0a6abf;
  --green: #24b391;
  --black:#2F3032;
}


/* Personalizzazione dei colori */
/* .ui.red.label{
  background-color: var(--red)!important;
  border-color: var(--red)!important;
}

.ui.orange.label{
  background-color: var(--orange)!important;
  border-color: var(--orange)!important;
}

.ui.blue.label{
  background-color: var(--blue)!important;
  border-color: var(--blue)!important;
}

.ui.green.label{
  background-color: var(--green)!important;
  border-color: var(--green)!important;
}

.ui.basic.red.label{

} */


/* ---------- CUSTOM ---------- */
.container {
  display: flex;
}

.sidebar {
  flex: 0 0 200px; /* Larghezza fissa della sidebar */
}

.content {
  flex: 1; /* Il contenuto occupa lo spazio rimanente */
}




#login-div {
  background-image: url("/static/instances/ControlRoom/login-img-gradient.jpg");
  background-size: cover !important;
}

/* Style dei testi e titoli */
html {
  font-family: var(--font);
  /*   font-size: 62.5%; /* 1rem = 10px */
}

body {
  /*   font-size: 1.6rem; /* 16px */
  color: var(--black);
}

h1 {
  font-weight: 700;
  font-size: 2em;
  color: var(--black);

}

h2 {
  font-weight: 700;
  color: var(--black);

}

h3 {
  font-weight: 600;
  color: var(--black);

}

h4 {
  color: var(--black);
}


/* Primary button*/
.ui.green.button {
  background-color: var(--primary-color);
  border-radius: var(--button-radius);
}

.ui.green.button:hover {
  background-color: var(--primary-hover-color);
}

.ui.green.button:focus {
  background-color: var(--primary-hover-color);
}

/* Secondary button */
.ui.blue.button {
  background-color: var(--secondary-color);
  border-radius: var(--button-radius);
}

.ui.blue.button:hover {
  background-color: var(--secondary-hover-color);
}

.ui.blue.button:focus {
  background-color: var(--palette-color-2);
}

/* Inputs */

input[type="submit"] {
  background-color: var(--primary-color);
  color: white;
}

input[type="submit"]:hover {
  background-color: var(--primary-hover-color);
}

input {
  border-radius: 1rem !important;
}

#update_submit {
  background-color: var(--secondary-color);
}

#update_submit:hover {
  background-color: var(--secondary-hover-color);
}

select {
  border-radius: 0.5em;
}

.ui.orange.inverted.segment {
  background-color: var(--primary-color-alpha) !important;
  color: black !important;
  border: 1px solid rgba(34, 36, 38, 0.15) !important;
  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
}

.card_tag .description {
  margin-bottom: 0.5em;
}

/* Control Room */
.input-color {
  position: relative;
}
.input-color input {
  padding-left: 20px;
}
.input-color .color-box {
  width: 60px;
  height: 20px;
  display: inline-block;
  background-color: #ccc;
  position: relative;
  left: 5px;
  top: 5px;
  color: white;
  border-radius: 20px 20px 20px 20px;
}
.open-btn {
  padding: 10px;
  border: solid rgb(255, 253, 253);
  border-width: 0 3px 3px 0;
  display: inline-block;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.close-btn {
  padding: 10px;
  border: solid rgb(255, 253, 253);
  border-width: 0 3px 3px 0;
  display: inline-block;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}


/* Plug box style */
.faulted-bordered {
  border: solid 1px var(--red);
  border-radius: .5em;
  margin-right:0px!important;

}

.faulted-bordered h3{
  color:var(--red);
}

.available-bordered {
  border: solid 1px var(--green);
  border-radius: .5em;
  margin-right:0px!important;
}

.available-bordered h3{
  color: var(--green);
}

.preparing-bordered {
  border: solid 1px var(--blue);
  border-radius: .5em;
  margin-right:0px!important;

}

.preparing-bordered h3{
  color: var(--blue);
}

.charging-bordered {
  border: solid 1px var(--orange);
  border-radius: .5em;
  margin-right:0px!important;
}

.charging-bordered h3{
  color: var(--orange);
}

/* Classe che serve per stringere le colonne vuote in righe con n colonne */
.fitted{
  max-width: fit-content!important;
  margin-right: 1.5em;
}

.compact .row{
  padding-top: .5em!important;
  padding-bottom: .5em!important;
}
.ui.segment.compact{
  padding-top: .1em!important;
  padding-bottom: .1em!important;

}

.plugbox .grid{
  margin-bottom:1em;
}

/* Override dei colori con quelli del tema sviluppato */
/* FAULTED */
.ui.basic.red.label{
  color: var(--red)!important;
  border-color: var(--red)!important;
}

.ui.red.label, .ui.red.labels .label{
  background-color: var(--red)!important;
  border-color: var(--red)!important;
}

i.red.icon{
  color: var(--red)!important;
}

/* AVAILABLE */
.ui.basic.green.label{
  color: var(--green)!important;
  border-color: var(--green)!important;
}

.ui.green.label, .ui.green.labels .label{
  background-color: var(--green)!important;
  border-color: var(--green)!important;
}

i.green.icon{
  color: var(--green)!important;
}

/* CHARGING */
.ui.basic.orange.label{
  color: var(--orange)!important;
  border-color: var(--orange)!important;
}

.ui.orange.label, .ui.orange.labels .label{
  background-color: var(--orange)!important;
  border-color: var(--orange)!important;
}

i.orange.icon{
  color: var(--orange)!important;
}

/* PREPARING */
.ui.basic.blue.label{
  color: var(--blue)!important;
  border-color: var(--blue)!important;
}

.ui.blue.label, .ui.blue.labels .label{
  background-color: var(--blue)!important;
  border-color: var(--blue)!important;
}

i.blue.icon{
  color: var(--blue)!important;
}



.ui.warning.message{
  background-color: hsla(45,68%,62%, .1);
  color: var(--black);
  box-shadow: none!important;
  
}
.ui.warning.message .icon{
  color: var(--orange);

} 

.ui.warning.message .header{
  color: var(--black);
}

.borderless.segment{
  border: 0px!important;
  box-shadow: none!important;
}

.scrollable {
  min-height: auto;
  max-height: 30em;;
  overflow: auto;
  margin-bottom: 10em;
}

.fixed{
}