@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
.brand-logo {
  font-family: 'Kalam', cursive;
}

a.brand-logo { text-decoration: none; }

.button {
float: left;
width: 1rem;
height: 1rem;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

.bianco {background-color: white; border: 1px solid white;}
.grigio {background-color: lightgrey;}
.celeste {background-color: green;}
.arancione {background-color: #FF9900; border: 1px solid black;}
.rosso {background-color: red;}
.blu {background-color: blue;}

.libero {background-color: lightgray;}
.occupato {background-color: red;}
.presente {background-color: green;}

.cmdbutton {
    padding: 5px 20px; 
    color: white; 
    background-color: #224faa; 
    font-size: 14px; 
    border-radius: 8px;
}

.cmdbutton:hover {
    background-color: green;
}

@media only screen and (max-width: 600px) {
  .cmdbutton {
    font-size: 20px;
    width:100%!important;
    margin-bottom:20px;
    display:block;
    text-align:center;
  }
}

/* Popup container */
.popup {
  color: #224faa;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  
  /* The actual popup */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: 80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
  }
  
  @keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
  }