/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 28 2024 | 15:33:58 */
/* Tab button form style */
:root {
	--primary-color: #121250;
	--secondary-color: yellow;
	--back-color: #f3f3f3; 
	--tab-char-color: #000;
	--tab-selected-char-color: #121250;
	--tab-height: 34px;
}

.tab-slider-container {
	position: relative;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tab-slider-tabs {
	display: flex;
	position: relative;
	background-color: var(--back-color);
	box-shadow: 2px 2px 5px grey;
	padding: 0.75rem;
	border-radius: 99px;
	height: var(--tab-height);
	* {
		z-index: 2;
	}
}




.tab-slider-tabs input[type="radio"] {
	display: none;

	&:checked {
		& + label {
			color: brown;

		}
	}
}

.tab-slider-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--tab-height);
	width: 200px;
	font-size: 1.25rem;
	font-weight: 500;
	border-radius: 99px;
	cursor: pointer;
	transition: color 0.15s ease-in;
	/* color: var(--tab-char-color); */
}

.tab-slider-tab.gssnet {
  font-size: 17px;
}

input[id="tab-slider-radio-1"] {
	&:checked {
		& ~ .tab-slider-glider {
			transform: translateX(0);
		}
	}
}

input[id="tab-slider-radio-2"] {
	&:checked {
		& ~ .tab-slider-glider {
			transform: translateX(100%);
		}
	}
}

input[id="tab-slider-radio-3"] {
	&:checked {
		& ~ .tab-slider-glider {
			transform: translateX(200%);
		}
	}
}

.tab-slider-glider {
	position: absolute;
	display: flex;
	height: var(--tab-height);
	width: 200px;
	background-color: #121250;
	z-index: 1;
	border-radius: 99px;
	transition: 0.25s ease-out;
}

@media (max-width: 700px) {
	.tab-slider-tabs {
		transform: scale(0.6);
		box-shadow: none;
	}
	.tab-slider-tab {
  		align-items: flex-end;
	}
}