/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #ffffff;
}

/* Style the buttons inside the tab */
.tab button {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 28px;
  margin: 0.1rem;
  width: 36px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  text-align: center;
}

.tab button:hover,
.tab button:focus {
    background-color: #434143;
    color: #fcfcfb;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width: auto;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-top: 1px solid #ccc;
}

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
  color: #333;
}

.topright:hover {color: #de3d27;}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}