/* Tabs in body */

#menutabs {
    padding-top: 25px;
    display: grid;
    grid-auto-flow: column;
    justify-content: start; 
    border: 0px solid #ccc;
}

#menutabs .tabs {
    margin: 15px 0;
    border: 5px solid #ccc;
    
}

.tab {
    max-height: 40px;
    border: 0px solid yellow;
}

#menutabs .tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    left: 1px;
    border-radius: 5px;
    cursor: pointer;
}

.tab [type="radio"] {
    opacity: 0;
    border: 0px solid #ccc;
}

.content {
    top: 8px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    overflow: hidden;
    margin-top: 3px;
}


/*.content label {
    background: #ffffff;
    padding: 0;
    border: 0;
}*/

/*.content > * {
 opacity: 0;
 transform: translateX(-100%);
  transition: all 0.2s ease;

}*/

#menutabs input[type="radio"]:focus ~ label  {
  /*outline: 1px solid #ccc;*/
  background: #ccc;
}

#menutabs input[type="radio"]:not(:checked) ~ label {
  outline: 1px solid #ccc;
  background: #ccc;
}

#menutabs input[type="radio"]:checked ~ label {
    outline: 0px solid #ccc;
    background: white;
}
/*

#menutabs input[type="radio"]:checked + label {
  background: #ccc;
  border-bottom: 5px solid black;
  border: 1px solid #ccc;
  z-index: 2;
}

#menutabs input[type="radio"]:checked ~ label ~ .content {
  z-index: 1;
  /*align-content: left;
  border: 1px solid #123456;
}
*/
/*#menutabs input[type="radio"]:checked + .content {
  opacity: 1;
  transform: translateX(0);
}*/

#menutabs .label {
    background: #ccc;
}