/******************** CSS Vertical Tabs *******************
 ******************* Author: Asif Mughal ******************/

.tabs-container{
   position: relative;
   background: #fff;
   width: 300px;
   height: 60vh;
   float: left;
   z-index: 20;

}
/* tabs names */
.tabs-container label{
   position: relative;
   padding: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: block;
   font-size: 15px;
   color: #000;
   cursor: pointer;
   user-select: none;
}

/* Hover effect on tabs names */
.tabs-container label:hover{
  background-color: rgba(255, 255, 255, 0.5);

}
/* Content area for tabs */
.tab-content{
   position: relative;
   background: #FFFFFF;
   width: calc(100% - 300px);
   min-height: 60vh;
   padding: 15px;
   float: left;
   box-sizing: border-box;
   z-index: 19;
   display: none;
}

.tab-content:after{
   content: "";
   clear: both;

}
 /* Hide input radio from users */
input[name="tab"]{
  display: none;
}
 /* Show tab when input checked */
input[name="tab"]:checked + .tab-content{
    display: block;
  animation: slide 0.5s forwards;

}

/* Slide animation for tab contents */
@keyframes slide{
    from{
        left: -100%;
        opacity: 0;
    }
    to{
        left: 0;
        opacity: 1;
    }

}