/* CSS Document */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color:  white;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  position: fixed;
  width:100%;
  top:0;
  left:0;
  z-index: 10;
  margin-bottom:60px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
  font-size: 17px;
  color: #333;
  cursor: pointer;
  
}
.tab button:hover {
    text-decoration: underline;
    color:blue;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #3a3f46;
  color:white;
}

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

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

@media only screen and (max-width: 600px) {
	.tab button {
	  padding: 8px 10px;
	  font-size: 12px;
	}
}



.tab2  {
  overflow: hidden;
  border-bottom: thin solid #333;
  display:flex;
  justify-content:center;
  align-items: center;
  flex-wrap:wrap;
  width:100%;
  z-index: 2;
  min-height: 45px;    
}
.tab2 button {
  background-color: white;  
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  height: 48px;
  border-radius: 10px 10px 0px 0px;
  border: none;
  margin-left:3px;
  margin-right: 3px;
  margin-top:4px;
  position: static;
  top :0px;
}
.tab2 button:hover {
    text-decoration: underline;
    color:blue;
}
/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab2 button.active {
  background-color: dodgerblue;
  color:white;
  border-top: thick solid #333;
  border-left: thick solid #333;
  border-right: thick solid #333;
  border-bottom: none;
  border-style: inset;
  height: 45px;
}
/* Style the tab content */
.tab2content {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
@media only screen and (max-width: 600px) {
	.tab2 button {
	  padding: 8px 10px;
	  font-size: 12px;
	}
}
@media print {
    .tab2{
        display: none;
    }
}

/* Style the tab */
.tab3 {
  overflow: hidden;
  background-color: #f1f1f1;
  color:black;
  display:flex;
  justify-content: center ;
  border-bottom:  thin solid #999;
  padding-top:5px;
  min-height: 55px;
}

/* Style the buttons inside the tab */
.tablinks {
  background-color: inherit;
  border: none;
  border-radius: 10px 10px 0px 0px;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color:#999;
  margin-left:5px;
  margin-right: 5px;
}

/* Change background color of buttons on hover */
.tablinks:hover {
  background-color: #333;
  color: #fff;
}

/* Create an active/current tablink class */
.tab3 .active{
  color:#fff;
  background-color: #999;
  text-decoration: underline;
}
.tab3 .active a{
  color:#fff;
}

/* Style the tab content */
.tabcontent3 {
  padding: 12px;
  width:100%;
  display: none;
  background-color: #f1f1f1;
  color:#333;
  -webkit-animation: fadeEffect 0.2s;
  animation: fadeEffect 0.5s;  
}

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

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