/* Style the tab */
.tab {
  overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  float: left;
  border-bottom: none;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 5px solid;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  outline: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  padding: 10px 12px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: inherit;
  .tooltip-text {visibility: visible;}
}

.tab button:visited {
  background-color: inherit;
  .tooltip-text {visibility: visible;}
}

/* Style the tab content */
.tabcontent {
display: none;
  padding: 6px 12px;
  font-family: Arial;
    border-top: 20px solid;
	border-right: 1px solid;
	border-left: 1px solid;
	border-bottom: 1px solid;
  }
 .tab1 {
 background-color: #ff9966;
 }
 
  .tab2 {
 background-color: #ccff99;
 }
 
  .tab3 {
 background-color: #ffff99;
 }
 
  .tab4 {
 background-color: #33cccc;
 }
 
  .tab5 {
 background-color: #99ff00; 
 }
 
  .tab6 {
 background-color: #ff00ff;
 }
 
   .tab7 {
 background-color: #ffccff;
 }
 
 .tab8 {
  background-color: #0099ff;
  }
 
 
  .color1 {
  border-top-color: #ff9966;
  }
  .color2 {
  border-top-color: #ccff99;
  }
  .color3 {
  border-top-color: #ffff99;
  }
  .color4 {
  border-top-color: #33cccc;
  }
  .color5 {
  border-top-color: #99ff00;
  }
  .color6 {
  border-top-color: #ff00ff;
  }
   .color7 {
  border-top-color: #ffccff;
  }
  .color8{
  border-top-color: #0099ff;
  }