/**
  * Tabs Container
  */
.tabs-container {
  box-sizing: border-box; /* Add this property */
  padding: 0 2rem;
  top: 10vh;
    position: relative;

}

 /**
  * Tabs Block
  */
 .tabs-block {
     display: flex;
     align-items: center;
     justify-content: center;
     width:100%;
 }

 /**
  * Tabs
  */
 .tabs {
     display: flex;
     /* flex-wrap: wrap; */
     width: 100%;
     position: relative;

 }

 .tabs label {
    height: 7vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0rem 20px;
     border-right: 1px solid black;
     cursor: pointer;
     background-color: var(--white-2);
     color: #fff;
     font-family: Roboto, sans-serif;
     font-size: 1rem;
    font-weight: 300;
    max-width: 175px;
     transition: background-color ease 0.3s;
     letter-spacing: .25em;
     order: 1;
     width: auto;
     box-sizing: border-box;
 }

 .tabs label .material-icons {
     margin-right: 0.3rem;

 }

 .tabs .tab {
    top: 7vh;
    flex-grow: 1;
    visibility: hidden;
    position: absolute;
    color: #000;
    background-color: #fff;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    order: 9;
    width: calc(100% - 40px);
    height: calc(83vh - 4vh - 50px);
    overflow: hidden;
}

.tab > *{
flex: 1;
width:100%;
}

 .tabs .tab > *:not(:last-child) {
     /* margin-bottom: 0.8rem; */
 }

 .tabs [type=radio] {
     display: none;
 }
 /* .tabs [type=radio]:not(:checked) + label + .tab {
    display: none;
    width:100%;

 } */


 .tabs [type=radio]:checked + label {
     background-color: #fff;
     color: black;
     border-top: 4px solid var(--main-color);
     box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
     box-sizing: border-box;
     border-bottom: none;
 }

 .tabs [type=radio]:checked + label + .tab {
     display: flex;
     flex-direction: column;
     visibility: visible;
     z-index: 1;
  }

  .tab-flex{
    display: flex;
    flex-direction: column;
    min-height: -webkit-fill-available;
  }