/* Style the tab */
.tab {
    overflow: hidden;
    border: 0px solid #FFFFFF; /* No frame around tab area, less confusion on printout */
/*    background-color: #BFE2F6; */ /* Light blue background */
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: center; /* center buttons, left/center/right */
    border: 2px solid #BFE2F6; /* Not "none', set to match button.active's border size to prevent tab frame shrink than expand to size in transition animation */
    outline: none;
    cursor: pointer;
    padding: 4px 10px; /* vertical, horizontal */
    transition: 0.3s;  /* 0.3s */
    font-size: 15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #5995B8; /* #92C7E6 */
	color: White;
}

/* Create an active/current tablink class */
.tab button.active {
	border: 2px solid #B4704D; /* B4045F */
    background-color: #FFBB99;
	color: Black;  /* Fix active text color, prevent hover change */
}

/* Style the tab content (below the tab selector */
.tabcontent {
    display: none;
    padding: 6px 6px; /* 4: Top, Right, Bottom Left */ 
	                              /* 3: Top, Right&Left, Bottom */
								  /* 2: Top&Bottom, Right&Left */
								  /* 1: All four padding the same */
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
/*  border: 0px solid #000000; */  /* No border now */
/*  background-color: #BFE2F6; */  /* No BG color now */
}

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

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

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

.topright:hover {color: red;}