/* Android 2.3 :checked fix */
@keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
body {        
    animation: fake 1s infinite;
}

.worko-tabs {
    margin: auto;
  	width: 100%;
  
    .state{
      position: absolute;
      left: -10000px;
    }
  
    .flex-tabs{
      display: flex;
    	justify-content: flex-end;
      flex-wrap: wrap;
        
        .tab{
          flex-grow: 1;
        }
      
        .panel {
          display: none;
          width: 100%;
          flex-basis: auto;
      }
    }

    .tab {
	background-color: var(--tb-txt2);
	width: 120px;
    height: 10px;
    border: none;
	display: flex;
    font-family: var(--tb-head);
    font-size: 30px;
    justify-content: center;
    align-items: center;
		cursor: pointer;
      
        &:hover{
          background-color: var(--tb-hl1);
        }
    }  
}

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label,
#tab-five:checked ~ .tabs #tab-five-label{
	width: 120px;
    height: 10px;
	background: var(--tb-hl1);
	display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel,
#tab-five:checked ~ .tabs #tab-five-panel{
    display: block;
}

.tabwrap{
	display:flex;
	flex-direction: row;
	gap: 10px;
}


.tappanelwrap{
width: 100%;
	box-sizing: border-box;
}