/* ==== Tab Styles =================================================================== */

/* Style the wrapper class for everything in tabs */
.tab-wrapper {
	display: table;
	width: 99.5%;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 2px;
}

/* Style the tabs and horizontal tabs bar */
.tabs-bar {
	width: 8em;
	float: left;
}
.horizontal-tabs-bar {
	height: var(--size-9);
	overflow-y:hidden;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Style the buttons that are used to open the tab content in vertical and horizontal tabs */
.tabs-bar .tab-button, .horizontal-tabs-bar .horizontal-tab-button {
	position: relative;
	background-color: #fff;
	width: 100%;
	height: var(--size-10);
	cursor: pointer;
	margin: 0px 0px 12px 0px;
	transition: 0.5s;
	z-index: 1;
	outline: none;
	border: 1px solid #ccc;
	border-right-width: 0px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: var(--shadow);
}

/* Override styling for horizontal tab bar buttons */
.horizontal-tabs-bar .horizontal-tab-button {
	width: 25rem;
	height: var(--size-9);
	border: none;
	margin-top: var(--size-3);
	margin-right: var(--size--5);
	border-top-right-radius: 10px;
	border-bottom-left-radius: 0px;
	background-color: #ddd;
	transition: 0.1s;
}

/* Change background color of tab buttons on hover */
.tabs-bar .tab-button:hover {
	background-color: #ddd;
}

/* Show selected indicator for active tab (wide orange right border) */
.tabs-bar .tab-button.active {
	border-right-width: 15px;
	border-right-color: rgba(208, 123, 24, 1);
}

/* Show selected indicator for active horizontal tab (move to top and turn from grey to white) */
.horizontal-tabs-bar .horizontal-tab-button.active{
	z-index: 4;
	background-color: #FFFFFF;
}

/* Style the tab content for vertical and horizontal tabs */
.tab-content, .horizontal-tab-content{
	display: none;
	position: relative;
	margin-left: 8em !important;
	background-color: #ffffff;
	border: none;
	padding: var(--size-6);
	z-index: 1;
	box-shadow: var(--shadow);
}
.horizontal-tab-content{
	margin-left: 0;
}

.horizontal-tabs-bar .horizontal-tab-button.lightTab {
	background-color: #d5d9d8;
	z-index: 2;
}

.horizontal-tabs-bar .horizontal-tab-button.lighterTab {
	background-color: #e5e9e8;
	z-index: 3;
}

.horizontal-tabs-bar .horizontal-tab-button.activeTab {
	background-color: #ffffff;
	z-index: 4;
}

.tabs-bar-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: none;
	padding: 0;
	margin: 0;
	z-index: 3;
	background-color: var(--primary);
}

.tab-footer-button {
	font-size: 2em;
}

/* Handle small screens */
@media only screen and (max-width: 1110px) {
	.tabs-bar .tab-button {
		writing-mode: vertical-rl;
	}
	.tabs-bar .tab-button.active {
		border-right-width: var(--size-5);
	}
	.tabs-bar .tab-button span {
		writing-mode: vertical-rl; /* NOTE: Need to have this on the button and the inside span to better support different browsers. This one is for Chrome. */
		display: block;
		transform: rotate(180deg);
	}
}
@media only screen and (max-width: 850px) {
	.tabs-bar {
		width: 7em;
	}
	.tab-content {
		margin-left: 7em !important;
	}
}
@media only screen and (max-width: 600px) {
	.tabs-bar {
		width: 100%;
		position: fixed;
		top: 4.5rem;
		left: 100vw;
		z-index: 3;
		transition: 0.1s;
		background-color: var(--primary);
		height: 100%;
		padding: 1rem;
	}
	
	.tabs-bar.open {
		left: 0;	
	}
	
	.tab-content {
		margin-left: 0% !important;
		z-index: 0;
		overflow: scroll;
		-ms-overflow-style: none;  /* IE and Edge */
  		scrollbar-width: none;  /* Firefox */
	}
	
	.tab-content::-webkit-scrollbar {
	  display: none;
	}
	
	.tabs-bar .tab-button span {
		writing-mode: initial;
		display: block;
		transform: initial;
		font-size: 1.5em;
	}
	.tabs-bar-footer {
		display: block;
	}
	.tab-wrapper {
		display: block;
	}
}