#operatore {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#operatore td, #operatore th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

#operatore tr:nth-child(even){background-color: #f2f2f2;}

#operatore tr:hover {background-color: #ddd;}

#operatore th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #367d38;
  color: white;
}

#legenda {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#results {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#results td, #results th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

#results tr:nth-child(even){background-color: #f2f2f2;}

#results tr:hover {background-color: #ddd;}

#results th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

div.test_status {position: relative; width: 80px; height: 80px; border-radius: 40px}
div.quarter { position: absolute; width: 40px; height: 40px; transition: transform .5s, opacity .5s; }
div.quarter.left-top { left: 0; top: 0; background-color: #BBB; border-top-left-radius: 40px; text-align: center}
div.quarter.right-top { left: 40px; top: 0; background-color: #BBB; border-top-right-radius: 40px; text-align: center}
div.quarter.left-bottom { left: 0; top: 40px; background-color: #999; border-bottom-left-radius: 40px; text-align: center}
div.quarter.right-bottom { left: 40px; top: 40px; background-color: #999; border-bottom-right-radius: 40px; text-align: center}
div.test_status:hover div.quarter { opacity: .2; }
div.quarter:hover { opacity: 1 !important; transform: scale(1.2) }

div.label {position: relative; display: inline-block; margin: auto; padding: 10px; z-index: 0}

a:link { text-decoration: none; color: #4CAF50}
a:visited { text-decoration: none; color: #4CAF50}
a:active  { text-decoration: none; color: #6efa74}
a:hover { text-decoration: none; color: #60d665}

div.test_status a { color: #224f24 }
div.test_status a:hover { color: #307033 }

/* Tooltip text */
.tooltiptext {
  visibility: hidden;
  width: 110px;
  background-color: #4CAF50;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: small;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.label:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext::after {
  content: " ";
  position: absolute;
  top: 40%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #4CAF50 transparent transparent;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  color: gray;
}

#footer {
    padding: 1em 0 1em 0;
    background: #dce317;
    text-align: center;
    color: #110c0c;
}

body {
    padding-top: 2em;
}

body:before {
  content:'';
  position:fixed;
  left:0;
  top:2rem;
  bottom:2rem;
  z-index:1220;
  display:block;
  width:.5em;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9Ii0wLjAwMjY4NTI4IDAgMTQgMTAwMyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4gbWVldCI+PHJlY3QgeD0iLTYuNDY0IiB5PSItOTAuOTI4IiBzdHlsZT0idmVjdG9yLWVmZmVjdDogbm9uLXNjYWxpbmctc3Ryb2tlOyIgd2lkdGg9IjMwIiBoZWlnaHQ9IjE3MyIgZmlsbD0iI0M4MEEwRiIgaWQ9ImU0X3JlY3RhbmdsZSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMC42MjE3MTQgLTIuMTU0NjcgMjMxLjU5OSkiIHJ5PSIwIiByeD0iMCIvPjxyZWN0IHg9Ii02LjQ2NCIgeT0iLTIuMDkwIiBpZD0iZTFfcmVjdGFuZ2xlIiBzdHlsZT0idmVjdG9yLWVmZmVjdDogbm9uLXNjYWxpbmctc3Ryb2tlOyAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNzMiIGZpbGw9IiNlNmUxMDAiIHJ5PSIwIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxLjAzMDYgLTIuMTU0NjcgMC44NTMwMDUpIiByeD0iMCIvPjxyZWN0IHg9Ii02LjQ2NCIgeT0iMzQzLjEzNyIgc3R5bGU9IiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjE3MyIgZmlsbD0iI0ZGMDAxRSIgaWQ9ImUzX3JlY3RhbmdsZSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMi40OTY1NiAtMi4xNTQ2NyAtNTc0LjI2NykiIHJ5PSIwIiByeD0iMCIvPjxyZWN0IHg9Ii04LjYxOCIgeT0iODI4Ljk4NSIgc3R5bGU9InZlY3Rvci1lZmZlY3Q6IG5vbi1zY2FsaW5nLXN0cm9rZTsiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNzMiIGZpbGw9IiNCRUVGRUIiIGlkPSJlNV9yZWN0YW5nbGUiIHJ5PSIwIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxLjA2MTIgMCAtNjMuMDkxOCkiIHJ4PSIwIi8+PHJlY3QgeD0iLTYuNDY0IiB5PSI4ODguNjgyIiBzdHlsZT0idmVjdG9yLWVmZmVjdDogbm9uLXNjYWxpbmctc3Ryb2tlOyIgd2lkdGg9IjMwIiBoZWlnaHQ9IjE3MyIgZmlsbD0iI0E1MEYxNCIgaWQ9ImUyX3JlY3RhbmdsZSIgcnk9IjAiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDAuNjA0ODU3IC0yLjE1NDY3IDE3My45OTkpIiByeD0iMCIvPjwvc3ZnPg==');
  background-repeat:no-repeat;
  background-size:contain
}

.alert {
  max-width: 50vh;
  margin: 0 auto;
}

.form-floating > label {
  top: -.85rem !important;
}

.form-floating > .form-control {
  padding: 1.75rem 0.75rem .5rem !important;
}

.form-floating > .form-control:focus ~ label {
  transform: scale(.75) translateY(-.2rem) translateX(.15rem) !important;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  transform: scale(.75) translateY(.8rem) translateX(.15rem) !important;
}

.header-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logos .btn {
  color: #0d6efd;
}