.map-container {position: relative; width: 100%;  border: 2px solid #333;}
.map-box {position: relative;} 
.map-img {width: 100%;}

.map-mini {width: 100%; margin: 0;}
.map-mini .button {width: 14.25%; margin: 0; float: left; position: relative;}
.map-mini .button div{position: absolute; font-size:0.7vw; width: 100%; top: 0; left: 0; text-align: center; padding-top: 40%; color: #333;}
.map-mini .button strong{font-size: 2vw; display: block; text-align: center;}

.map-mini .button.active div:after{color: #ffffff; content: '▼'; font-size: 1.5vw;}
@media (max-width: 767px){
.map-mini .button div{font-size:1.5vw;}
.map-mini .button strong{font-size: 4vw;}
.map-mini .button.active div:after{color: #ffffff; content: '▼'; font-size: 3vw;}
}

.map-mini .button img{background-color: #D1EBC9;}
.map-mini .button.active div{color: #ffffff;}
.map-mini .button.active img{background-color: #09a004;}

.map-mini .button.disabledlink img{background-color: #F1C1C1;}
.disabledlink {pointer-events: none;}


/* POSTI */

.tablepos {display: block; position: absolute; width: 22%; height: 12%;}

.tablepos .table {
  display: block;
    position: absolute;
    border: 2px solid #cccccc;
    background-color: #cccccc;
    border-radius: 0.5vw;
    width: 98%;
    height: 50%;
    top: 22%;
    left: 0%;
}

.sit {display: block; position: absolute; width: 23%; height: 23%;}

.sit-1 {top: -2%; left: 0%;}
.sit-2 {top: -2%; left: 25%;}
.sit-3 {top: -2%; left: 50%;}
.sit-4 {top: -2%; left: 75%;}
.sit-5 {top: 82%; left: 0%;}
.sit-6 {top: 82%; left: 25%;}
.sit-7 {top: 82%; left: 50%;}
.sit-8 {top: 82%; left: 75%;}

/* Hide the default checkbox */
.sit input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .sit {
    display: block;
    position: absolute;
    cursor: pointer;
    font-size: 20%;
    user-select: none;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    --clr: #08a003;
    position: relative;
    top: -30%;
    left: 0;
    height: 120%;
    width: 100%;
    background-color: #94d681;
    border-radius: 20%;
    transition: 300ms;
  }
 
  .sit input:disabled + .checkmark {
    background-color: #d68181;
  }

  /* When the checkbox is checked, add a blue background */
  .sit input:checked ~ .checkmark {
    background-color: var(--clr);
    border-radius: .5rem;
    animation: pulse 500ms ease-in-out;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .sit input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .sit .checkmark:after {
    left: 35%;
    top: 20%;
    width: 30%;
    height: 60%;
    border: solid #ffffff;
    border-width: 0 0.25vw 0.25vw 0;
    transform: rotate(45deg);
  }
  @media (max-width: 767px){
  .sit .checkmark:after {
    border-width: 0 0.6vw 0.6vw 0;
  }}
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 #0B6E4F90;
      rotate: 20deg;
    }
  
    50% {
      rotate: -20deg;
    }
  
    75% {
      box-shadow: 0 0 0 10px #0B6E4F60;
    }
  
    100% {
      box-shadow: 0 0 0 13px #0B6E4F30;
      rotate: 0;
    }
  }


.table-1  {top: 13%; left: 10%;}
.table-2  {top: 13%; left: 39%;}
.table-3  {top: 13%; left: 68%;}
.table-4  {top: 29%; left: 10%;}
.table-5  {top: 29%; left: 39%;}
.table-6  {top: 29%; left: 68%;}
.table-7  {top: 60%; left: 12%;}
.table-8  {top: 60%; left: 64%;}
.table-9  {top: 75%; left: 13%;}
.table-10  {top: 75%; left: 64%;}