:root {
	--FuelYellow: #ffd700;
	--OrangeRoughy: #D4AF37;
	--Rajah: #f8cc7d;
	--HawaiianTan: #000000;
	--SepiaBlack: #1f0501;
	--NightRider: #251612;
	--IrishCoffee: #563e20;
	--Rebel: #fbc500;
	--Creole: #0b0501;
	--CodGray: #090707;
	--Pueblo: #7a1b13;
}

body {
	background-color: black;
}

/* Start Navbar */
nav.navbar-custom {
	background-color: var(--HawaiianTan);
}

nav .navbar-brand img {
	width: 7em;
	transition: 0.4s;
}

nav.navbar-custom.scroll .navbar-brand img {
	width: 3em;
}

nav.navbar-custom.scroll .collapse a {
	font-size: 1em;
}

nav.navbar-custom.scroll + .nav-text {
	font-size: 0.9em;
}

nav ul.navbar-nav {
	display: grid;
	grid-template-columns: repeat(2, 210px);
	justify-items: center;
	justify-content: center;
	gap: 1.5em;
}

nav .collapse ul li {
	width: 100%;
	text-align: center;
}

nav .collapse ul li a {
	color: #fbc500;
	font-weight: bold;
	font-size: 1.5em;
	padding: 0.5em 2em !important;
	border-radius: 50px;
		background-image: linear-gradient
		var(--Rajah),
		var(--FuelYellow) 13%,
		var(--OrangeRoughy),
		var(--HawaiianTan);
	box-shadow: 0 2px 4px var(--Rebel), 0 2px 4px var(--Rebel), inset 0 -2px 5px 1px var(--Rebel), inset 0 -1px 1px 1px var(--Rebel);
	text-shadow: 2.5px 2.5px rgba(0, 0, 0, 0.6);
	transition: 0.4s;
}

nav .collapse ul li a:hover, nav .collapse ul li a:focus {
	color: white;
	background-image: linear-gradient(var(--FuelYellow), var(--FuelYellow));
	transform: scale(110%);
}

nav .collapse ul li a.download {
	width: fit-content;
}

.nav-text {
	/* border-top: 8px solid var(--OrangeRoughy); */
	/* border-bottom: 8px solid var(--OrangeRoughy); */
	background-image: linear-gradient(white -35%, #000000 50%, black 65%);
	color: #fbc500;
	font-weight: bold;
	font-size: 1.3em;
	box-shadow: 0 2px 4px var(--Rebel), 0 2px 4px var(--Rebel), inset 0 -2px 5px 1px var(--Rebel), inset 0 -1px 1px 1px var(--Rebel);
	/* box-shadow: 0 1px 10px black; */
	transition: 0.4s;
}
/* End Navbar */

/* Start Content */
main {
	padding-top: 1.5rem!important;
	background-image: url(../../image/Background.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	/* position: relative; */
	margin-top: 168px;
	border-bottom: 8px solid var(--Rebel);
}

/* Start ScrollBar */
main > * ::-webkit-scrollbar {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 1px;
	width: 10px;
}

main > * ::-webkit-scrollbar-thumb {
	background-color: #d6dee1;
	border-radius: 20px;
}
/* End Scrollbar */

main.content {
	padding: 0 1em;
}

.content-container {
	width: 100%;
	max-width: 1600px;
	margin: auto;
}

/* Start Content Carousel */
.content-container .my-banner{
	margin-bottom: .5em;
	display: grid;
	grid-template-columns: 0.225fr 1fr 0.225fr;
}

.content-container .my-banner .banner-kiri img{
	width: 100%;
}

.content-container .my-banner .banner-tengah{
	width: 100%;
	padding: 0 1em;
	display: flex;
	flex-direction: column;
}

.content-container .my-banner .banner-tengah img{
	width: 100%;
	margin-bottom: 1em;
}

.content-container .my-banner .banner-kanan img{
	width: 100%;
}
/* End Content Carousel */

/* Start Mobile Button */
main .mobile-button {
	display: none;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: .6em 0;
}

main .mobile-button a {
	width: 49%;
	border-radius: 30px;
	text-align: center;
	color: #fbc500;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px black;
	background-image: linear-gradient(white -35%, #000000 50%, black 65%);
	background-image: linear-gradient
		var(--Rajah),
		var(--FuelYellow) 13%,
		var(--OrangeRoughy),
		var(--HawaiianTan);
	box-shadow: 0 2px 4px var(--Rebel), 0 2px 4px var(--Rebel), inset 0 -2px 5px 1px var(--Rebel), inset 0 -1px 1px 1px var(--Rebel);
	padding: .8em;
	margin: .25em 0;
}

main .mobile-button a:hover {
	background-image: linear-gradient(var(--FuelYellow), var(--FuelYellow));
}
/* End Mobile Button */

/* Start Slot Content */
main .provider-list {
	height: fit-content;
}

main .provider-list a {
	width: 100%;
	background-color: rgb(0, 0, 0);
	font-size: 1.05em;
	text-transform: uppercase;
	margin-bottom: 0.5em;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: white;
	box-shadow: 0 1px 4px var(--Rebel), 0 1px 4px var(--Rebel),
		inset 0 -2px 5px 1px var(--Rebel), inset 0 -1px 1px 1px var(--Rebel);
	background-image: linear-gradient
		var(--Rajah),
		var(--FuelYellow) 13%,
		var(--OrangeRoughy),
		var(--HawaiianTan);
	border-radius: 50px;
	font-weight: bold;
	padding: 0.3em 1.5em;
}

main .provider-list a:hover {
	background-image: linear-gradient(var(--FuelYellow), var(--FuelYellow));
	transform: scale(110%);
}

main .provider-list a.active-page span {
	color: yellow;
	/* text-decoration: underline; */
}

main .provider-list a.active-page span::before {
	content: ">>>";
	color: yellow;
}

main .provider-list a.active-page span::after {
	content: "<<<";
	color: yellow;
}

main .provider-list a span {
	text-shadow: 2.5px 2.5px rgba(0, 0, 0, 0.6);
}

main .provider-list a img {
	width: 100%;
	max-width: 3em;
	height: 3em;
	object-fit: contain;
}

main .all-slots .the-row {
	box-shadow: 3px 3px 15px black;
	overflow: auto;
}

main .all-slots-header {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	justify-items: center;
	background-image: linear-gradient(white -20%, var(--CodGray) 8%, white 500%);
	box-shadow: 0 1px 4px var(--CodGray), 0 1px 4px var(--CodGray),
		inset 0 -2px 5px 1px var(--CodGray), inset 0 -1px 1px 1px var(--CodGray);
}

main .all-slots-header div {
	width: 100%;
}

main .all-slots-header img {
	width: 100%;
}

main .slot-lists {
	background-color: rgba(27, 26, 26, 0.8);
	height: fit-content;
	padding: 1em;
    position: relative;
    overflow: auto;
}

main .slot-list {
	background-color: rgba(27, 26, 26, 0.8);
	padding: 1.45em;
	box-shadow: 5px 5px 15px black;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1em;
}

main .slot-list:has(table) {
	display: block;
	background-color: transparent;
	box-shadow: none;
}

main .slot-list table {
	color: white;
	width: 100%;
	text-align: center;
}

main .slot-list table th, main .slot-list table td {
	padding: 1em 0;
	border: 2px solid var(--CodGray);
}

main .slot-list table thead{
	background-color: var(--Rebel);
}


main .slot-list .slot-cards a {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

main .slot-list .slot-cards img {
	width: 100%;
	position: relative;
	box-shadow: 5px 5px 15px black;
}

main .slot-list .slot-cards .slot-inner-card {
	position: relative;
	width: 100%;
	/* height: 100%; */
}

main .slot-list .slot-cards .slot-inner-card span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: 600;
}

main .slot-list .slot-cards:hover .slot-inner-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
}

main .slot-list .slot-cards:hover .slot-inner-card span {
	display: flex;
	text-align: center;
	z-index: 1;
}

main .slot-list .slot-cards .slot-percentage {
	width: 85%;
	margin: auto;
	background-color: white;
	border-radius: 30px;
	box-shadow: 5px 5px 15px black;
	height: 20px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

main .slot-list .slot-cards .slot-percentage p {
	line-height: 19px;
	z-index: 3;
    font-size: .85em;
}

main .slot-list .slot-cards .slot-percentage-color {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	transition: 1s;
	height: 100%;
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
	background-size: 0.8rem 0.8rem;
    animation: progress-bar-stripes 2s linear infinite;
}

main .slot-list .slot-cards .slot-percentage-color.green {
	background-color: #079428;
}

main .slot-list .slot-cards .slot-percentage-color.yellow {
	background-color: #ad8200;
}

main .slot-list .slot-cards .slot-percentage-color.red {
	background-color: #b40315;
}

main .slot-lists .loading {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	top: 0;
	left: 0;
    right: 0;
    bottom: -1000px;
	display: none;
	justify-content: center;
	z-index: 9;
}

main .slot-lists:has(.loading.loading-appear) {
	overflow: hidden !important;
}

main .slot-lists .loading.loading-appear {
	display: flex;
}

main .slot-lists .load-circle {
	width: 70px;
	height: 70px;
	border-bottom: 5px solid var(--OrangeRoughy);
	border-right: 5px solid var(--OrangeRoughy);
	border-top: 5px solid var(--OrangeRoughy);
	border-left: 5px solid transparent;
	border-radius: 50%;
	animation: loading 1s infinite;
    margin-top: 450px;
}

main .all-slots select {
	display: none;
	width: 100% !important;
	padding: 0.5em;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px black;
	font-size: 1.2em;
	background-image: linear-gradient( var(--Rajah), var(--FuelYellow) 13%, var(--OrangeRoughy), var(--HawaiianTan) );
	/* background-image: linear-gradient( */
		var(--Rajah),
		var(--FuelYellow) 13%,
		var(--OrangeRoughy),
		var(--HawaiianTan);
	box-shadow: 0 1px 4px var(--Rebel), 0 1px 4px var(--Rebel),
		inset 0 -2px 5px 1px var(--Rebel), inset 0 -1px 1px 1px var(--Rebel);
}

main .all-slots option {
	background-color: var(--CodGray);
	font-weight: bold;
}

main .all-slots option:checked {
	background-color: var(--FuelYellow);
}

/* End Slot Content */
/* End Content */

/* Start Footer */
footer {
	background-color: var(--Creole);
	padding: 2.5em 1em 1.5em;
	color: white;
	text-align: justify;
}

footer .article-container {
	width: 100%;
	max-width: 1600px;
	margin: auto;
}

footer .article-container h1,
footer .article-container h2,
footer .article-container h3,
footer .article-container h4,
footer .article-container h5,
footer .article-container h6 {
	font-weight: bold;
	color: var(--Rebel);
	text-align: center;
}

footer .footer-text {
	display: block;
	text-align: center;
}
/* End Footer */

@media screen and (max-width: 1200px) {
	main .provider-list a {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 992px) {
	main .mobile-button {
		display: flex;
	}

	main .provider-list {
		display: none !important;
	}

	main .all-slots select {
		display: block;
	}

	.content-container .my-banner {
		display: block;
		margin-bottom: 0;
	}

	.content-container .my-banner .banner-tengah {
		padding: 0;
		margin-bottom: 0;
	}

	.content-container .my-banner .banner-tengah img {
		margin-bottom: .3em;
	}

	.content-container .my-banner .banner-kiri,
	.content-container .my-banner .banner-kanan {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	nav-text {
		font-size: 1em;
	}

	main .slot-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 576px) {
	main .all-slots-header {
		grid-template-columns: repeat(2, 1fr);
	}

	main .slot-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@keyframes loading {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes progress-bar-stripes {
    from  { background-position: 39px 0; }
    to    { background-position: 0 0; }
  }