.cal-container{
  width: 100%
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.cal-header{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1rem;
}

.cal-header a{
  width: 3rem;
}

.cal-header a:not([href]){
  color: #999;
}

.cal-header h4{
  margin-bottom: 0;
}

.day-names{
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin-bottom: 1rem;
  font-size: 16px;
}  

.day-names li{
  flex: 1;
  text-align: center;
  margin-bottom: 0;
}

.weekday-list{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  margin-bottom: 1rem;
}

.weekday-list a{
  color: #999;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}

.circle{
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  border-radius: 1000px;
  justify-content: center;
}

.circle.available{
  color: #222;
  background-color: #efefef;
}

.circle.limited{
  color: #222;
  background-color: #ffcd70;
}

.circle.full{
  color: #222;
  background-color: #ff7270;
}

.circle.legenda{
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  display: inline-block;
}

.icon-container.gray{
  color: #999;
}

.target{
  display: none;
}

.target:target{
  display: block;
}

tr:target{
  background-color:transparent;
  animation: highlight-row 5s ease-in-out;
}

@keyframes highlight-row {
  0%   { background-color: #DFF2BF; }
  100% { background-color: transparent; }
}
  
#master{
  display: none;
}

/* BEGIN GAUGE */
:root { --occupation: 0; } /* override this in HTML */
.gauge{
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke-width: 5px;
  stroke-linecap: round;
}
.gauge circle:first-child{
  stroke: #D1D1D1;
  stroke-dasharray: 1 1.5;
}
.gauge circle:last-child{
  stroke: #1EAEDB;
  stroke-dasharray: var(--occupation) 1.5;
  animation: dash .5s linear alternate;
}
.gauge circle{
  cx: 16;
  cy: 16;
  r: 13;
  fill: transparent;
  transform-origin: center;
  transform: rotate(150deg);
}
@keyframes dash{
  from{
    stroke-dasharray: 0 1.5;
  }
  to{
    stroke-dasharray: var(--occupation) 1.5;
  }
}   
/* END GAUGE */

/* BEGIN RESPONSIVE HIDE TABLE COLUMNS AND BITS ON NARROW SCREENS*/
h4 span:nth-of-type(2),
.results thead th:nth-of-type(3),
.results thead td:nth-of-type(4),
.results thead td:nth-of-type(5),
.results tbody th:nth-of-type(4),
.results tbody td:nth-of-type(4),
.results tbody td:nth-of-type(5),
.results tbody td:nth-of-type(2) div:nth-of-type(2),
.results thead td:nth-of-type(2) div span{
  display: none;
}


/* For devices larger than 550px */
@media (min-width: 550px) {
  h4 span:nth-of-type(2){
    display: inline;
  }
  h4 span:nth-of-type(3){
    display: none;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  #master{
    display: block;
  }
  .results thead th:nth-of-type(3),
  .results thead td:nth-of-type(4),
  .results thead td:nth-of-type(5),
  .results tbody th:nth-of-type(4),
  .results tbody td:nth-of-type(4),
  .results tbody td:nth-of-type(5){
    display: table-cell;
  }
  .results tbody td:nth-of-type(2) div:nth-of-type(2){
    display: block;
  }
  .results thead td:nth-of-type(2) div span{
    display: inline;
  }
}