// $main_color: #ff8b00;
$main_color: #7A797E;
$main_yellow: #EFFB35;
$main_blue: #1C5BE6;
$main_black: #231F20;
$main_grey_darker: #43434B;
$main_grey: #7A797E;

// ------------------------------------------------------------------------------------------------

html, body
{
	font-family: Rubik;
}

body
{
	margin: 0;
	padding: 0;
	cursor: default;
}

a
{
	color: $main_black;	
}

table
{
	a:hover
	{
		color: $main_black !important;	
		text-decoration: underline;
	}
}

h1, h2, h3, h4, h5
{
	font-family: Rubik;
	font-weight: bold;
}

.modal
{
	.modal-header
	{
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background-color: #f1f1f1;
		border-bottom: 1px solid #dddddd;

		h1
		{
			margin: 0;
			font-weight: normal;
		}

		button
		{
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translate(0, -50%);
			width: 50px;
			height: 50px;
			font-size: 45px;
			background-color: #F44336;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease;
			cursor: pointer;
			color: #ffffff;
			border-radius: 5px;
			outline: none;
			border: none;
	
			&:hover
			{
				background-color: #ba000d;
			}
		}
	}

	.modal-body
	{
		
	}

	.modal-footer
	{
		justify-content: center;

		.btn-cancel 
		{
			background-color: #f44336;
			border: none;
			outline: none;
			color: white;
			font-weight: bold;
			width: 200px;
			padding: 10px 0;
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
			border-radius: 5px;
		}

		.btn-utama 
		{
			background-color: #66bb6a;
			border: none;
			outline: none;
			color: white;
			font-weight: bold;
			width: 200px;
			padding: 10px 0;
			-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
		}
	}
}

#flag
{
	img
	{
		width: 20px;
	}

	li img
	{
		width: 25px;
	}
}

.btn-utama
{
	outline: none;
	font-weight: bold;
	width: 200px;
	padding: 10px 0;
	transition: all 0.2s ease;
	border-radius: 5px;
	background-color: white;
	color: $main_grey_darker;
    border: 1px solid #E0E0E0;

	&:hover
	{		
		background-color: $main_grey_darker;
		color: white;
	}

	&:disabled
	{
		cursor: no-drop;
		background-color: $main_grey_darker;
	}

	&:focus, &:active
	{
		border: 1px solid #E0E0E0;
		outline: none;
	}
}

.site-logo
{
	a
	{
		img
		{
			width: 100px;
		}
	}
}

button.nav-link
{
	width: 100%;
	text-align: left;
	border: none;
	color: grey !important;
	background-color: transparent;

	&:hover
	{
		background-color: #F8F9FA;
	}
}

.div_login
{
	height: 100vh;
	width: 100%;
	
	.container
	{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.row
		{
			margin: 10px 0;

			&:nth-of-type(3)
			{
				margin-top: 50px;
			}

			i
			{
				position: absolute; 
				top: 0; 
				font-size: 150px; 
				color: $main_grey_darker; 
				opacity: 0.2;
			}

			h2
			{
				font-size: 50px;
			}
		}
	}
}

.block-heading-1
{
	h2
	{
		color: $main_black;
	}
}

#div_form
{
	margin-top: 10px;
	padding: 0 0 50px 0;
	background-color: white;
	border-bottom: 1px solid rgb(230, 230, 230);
	box-shadow: 2px 2px 5px 0 #d3d3d3;

	.row
	{
		margin-top: 10px;
		padding: 0 20px;
		
		.col-md-6, .col-md-7, .col-md-12
		{
			margin-top: 20px;
		}
	}

	#judul_form
	{
		padding: 0;
		margin: 0;

		.col-sm-12
		{
			padding: 0;
		}

		h1
		{
			margin: 0;
			padding: 20px 40px;
			background-color: #d0d0d0;
			color: $main_grey;
		}
	}

	input
	{
		&:disabled
		{
			opacity: 0.5;
			border: 1px solid rgb(230, 230, 230);
		}
	}

	.keterangan_jumlah_official
	{
		position: absolute;
		left: -220px;
		top: 25%;
		width: 220px;
		background-color: white;
		border: 1px solid #ffcc8d;
		box-shadow: 2px 2px 5px 0 #d3d3d3;
		display: none;
		
		div
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			h4
			{
				text-align: center;

				&:first-child
				{
					font-size: 15px;
					background-color: #ffcc8d;
					margin: 0;
					padding: 0;
					width: 100%;
					padding: 5px 20px;
				}

				&:last-child
				{
					font-size: 18px;
					margin: 0;
					padding: 0;
					width: 100%;
					padding: 15px 20px;
				}
			}
		}

		&::after 
		{
			content: " ";
			position: absolute;
			top: 50%; 
			right: -21px;
			transform: translate(0, -50%);;
			margin-left: -5px;
			border-width: 10px;
			border-style: solid;
			border-color: transparent transparent transparent #ffcc8d;
		}
	}
}

#intro
{
	// .background_image
	// {
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	background-image: url("../images/bg_intro.jpg");
	// 	// background-attachment: fixed;
	// 	background-position: center;
	// 	background-size: cover;
	// 	// filter: blur(1px);
	// 	z-index: -2;
	// }

	// min-height: 100vh;
	// min-width: 100vh;
	// position: absolute;
	// left: 50%;
	// top: 50%;
	// transform: translate(-50%);

	h1	
	{
		color: $main_grey_darker;
	}
}

.filter
{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	// background-color: rgba(0, 0, 0, 0.5);
	z-index: -1;
}

.ftco-cover-1.overlay
{
	p
	{
		color: #939393;
	}

	::after
	{
		background-color: rgba(129, 46, 46, 0.712);
	}
}

.site-navbar .site-navigation .site-menu
{
	li
	{
		a 
		{
			color: $main_grey_darker !important;
			position: relative;
		
			&:hover
			{
				color: $main_color!important;
			}

			.cart_counting
			{
				position: absolute;
				top: 7px;
				right: -15px;
				font-size: 12px;
				background-color: #D32F2F;
				color: white;
				border-radius: 50%;
				width: 25px;
				text-align: center;
				border: 2px solid white;
				font-weight: bold;
			}
		}
	}

	.site-menu
	{
		.has-children .dropdown li a
		{
			color: $main_grey_darker !important;
		}
	}
}

.sticky-wrapper 
{
	.site-navbar
	{
		background-color: transparent;
	}
	.shrink 
	{
		background-color: white;
		box-shadow: 0 1px 5px #e6e6e6;
	}
}

#visi_motto
{
	position: relative;

	.row
	{
		justify-content: center;
		align-items: flex-start;
	}

	.content_items
	{
		background-color: white;
		position: relative;
		box-shadow: 10px 10px 5px #eeeeee;

		.icon
		{
			position: absolute;
			top: -5px;
			right: 20px;
			background-color: #eee;
			border-bottom-right-radius: 50%;
			padding: 20px 20px 15px 20px;
			border-bottom-left-radius: 50%;
			border-top: 5px solid grey;

			i
			{
				font-size: 20px;
				color: $main_grey;
			}
		}

		.title
		{		
			padding: 30px 80px 20px 20px;

			h5
			{
				color: $main_grey_darker;
				margin: 0;
			}

			.line
			{
				width: 80%;
				height: 5px;
				background-color: grey;
				margin-top: 8px;
			}
		}

		p
		{
			margin: 0;
			padding: 10px 20px 20px 20px;
			// background-color: #eee;
			// border-top-left-radius: 20px;
			// border-top-right-radius: 50px;
		}
	}

	.col-md-4
	{
		margin: 10px 0;
	}
}

#best_sell
{	
	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	#items
	{
		transition: all 0.2s ease;
		padding-bottom: 20px;
		border: 1px solid #eeeeee;
		box-shadow: 10px 10px 1px #eeeeee;
		margin: 0 10px;

		.content_items
		{
			width: 100%;
			height: 300px;

			img
			{
				object-fit: cover;
				object-position: center;
				width: 100%;
				height: 100%;
			}
		}

		h5
		{
			margin: 0;
			margin-top: 20px;
			color: $main_grey_darker;
			font-weight: normal;
			padding: 0 20px;
		}

		h6
		{
			margin: 0;
			margin-top: 10px;
			color: $main_grey_darker;
			font-weight: bold;
			padding: 0 20px;
		}

		.div_btn
		{
			margin-top: 30px;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.btn-utama
			{
				width: 50%;
				border-radius: 10px;
				margin: 0 5px;

				i
				{
					margin-right: 5px;
					vertical-align: text-top;
				}

				.fa-info-circle
				{
					font-size: 20px;
				}
			}
		}

		&:hover
		{
			border: 1px solid #eeeeee;
			box-shadow: 10px 10px 1px #eeeeee;
		}
	}

	.col-md-4
	{
		margin: 10px 0;
	}

	.icon
	{
		position: absolute;
		top: 35%;
		left: 35%;
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 200px;
		}
	}
}

#training
{
	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		right: 0;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		font-size: 200px;
		color: #2121;
	}

	.row
	{
		&:nth-of-type(2)
		{
			justify-content: center;
		}
	}

	.col-md-5
	{
		margin: 10px 0;
	}

	#image
	{
		width: 100%;

		img
		{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	#desc
	{
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

#social_media
{
	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		left: 35%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 200px;
		}
	}

	.instagram_post
	{
		.row
		{
			display: flex;
			justify-content: center;
			align-items: center;

			#items
			{
				height: 200px;
				margin-top: 30px;

				a
				{
					display: block;
					width: 100%;
					height: 100%;
				
					img
					{
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}
			}
		}
	}
}

#category_products
{
	padding-top: 150px;
	
	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		left: 35%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 200px;
		}
	}

	.category
	{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		
		.item
		{
			display: flex;
			flex: 1;
			position: relative;

			a
			{
				display: block;
				border-left: 1px solid #eee;
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				background-color: white;
				padding: 20px 5px 20px 5px;
				flex: 1;
				transition: all 0.2s ease;

				&:nth-of-type(6)
				{
					border-right: 1px solid #eee;
				}
	
				&:hover
				{
					background-color: $main_grey_darker;
	
					h5
					{
						color: white;
					}
				}
			}

			h5
			{
				margin: 0;
				font-size: 15px;
				color: $main_grey;
				text-align: center;
			}

			.sub_item
			{
				position: absolute;
				left: 0;
				right: 0;
				top: 60px;
				z-index: 1;
				display: none;
			}

			#triangle_up 
			{
				position: absolute;
				left: 0;
				right: 0;
				width: 0;
				height: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 100px solid red;
			}
		}

		#active_item
		{
			a
			{
				background-color: $main_grey_darker;

				h5
				{
					color: white;
				}
			}

			.sub_item
			{
				a
				{
					display: block;
					border-left: 1px solid #eee;
					border-top: 1px solid #eee;
					border-bottom: 1px solid #eee;
					background-color: white;
					padding: 20px 5px 20px 5px;
					flex: 1;
					transition: all 0.2s ease;
	
					&:nth-of-type(6)
					{
						border-right: 1px solid #eee;
					}
		
					&:hover
					{
						background-color: $main_grey_darker;
		
						h5
						{
							color: white;
						}
					}
				}
	
				h5
				{
					margin: 0;
					font-size: 15px;
					color: $main_grey;
					text-align: center;
				}
			}
		}
	}

	.header
	{
		margin-top: 10px;
		width: 100%;
		position: relative;

		.sorting
		{
			width: 200px;
		}

		.total
		{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);

			p
			{
				margin: 0;
			}
		}
	}

	.footer
	{
		margin-top: 100px;
		margin-bottom: 100px;
		width: 100%;
		position: relative;

		.numeric
		{
			display: flex;
			flex-direction: row;

			.numer
			{
				a, button
				{
					display: block;
					padding: 10px 20px;
					border: 1px solid #E0E0E0;
					margin: 0 5px;
					background-color: white;
					color: $main_black;
					transition: all 0.2s ease;

					&:hover
					{		
						background-color: $main_grey_darker;
						color: white;
					}

					#disabled
					{
						cursor: no-drop;
					}
				}

				#disabled
				{
					cursor: no-drop !important;
					color: white;
					background-color: $main_grey;

					&:hover
					{		
						background-color: $main_grey;
						color: white;
					}
				}

				#active_page
				{
					background-color: $main_grey_darker;
					color: white;
				}

				&:nth-of-type(1)
				{
					margin: 0 5px 0 0;
				}
			}
		}

		.total
		{
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);

			p
			{
				margin: 0;
			}
		}
	}

	.list_products
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 10px;
		width: 100%;

		&:not(:nth-of-type(1))
		{
			margin-top: 50px;
		}

		#items
		{
			transition: all 0.2s ease;
			flex: 1;
			max-width: 22.5%;
			margin: 0 20px;
			border: 1px solid #eeeeee;
			background-color: white;
			box-shadow: 10px 10px 1px #eeeeee;

			&:nth-of-type(1)
			{
				margin: 0;
				margin-right: 20px;
			}
			
			&:nth-of-type(4)
			{
				margin: 0;
				margin-left: 20px;
			}

			.content_items
			{
				width: 100%;
				height: 300px;

				img
				{
					object-fit: cover;
					object-position: center;
					width: 100%;
					height: 100%;
				}
			}

			h5
			{
				margin: 0;
				margin-top: 20px;
				color: $main_grey_darker;
				font-weight: normal;
				padding: 0 20px;
				font-size: 17px;
				height: 60px;
			}

			h6
			{
				margin: 0;
				color: $main_grey_darker;
				font-weight: bold;
				padding: 0 20px;
				font-size: 15px;
				padding-bottom: 20px;
			}
		}
	}
}

#detail_product
{
	padding-top: 150px;
	
	.col-md-6
	{
		margin: 0;
		padding: 0;
	}

	.img
	{
		width: 100%;
		height: 500px;
		position: relative;

		img
		{
			width: 100%;
			height: 80%;
			object-position: center;
			object-fit: cover;
		}

		.img_gallery
		{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			img
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}

	.desc
	{
		margin-left: 40px;
		margin-top: 0;

		.content_desc
		{
			h2
			{
				color: $main_grey_darker;
				margin: 0;
			}
		
			p
			{
				margin-top: 10px;
			}
		}

		.line
		{
			width: 80%;
			height: 2px;
			background-color: grey;
			margin-top: 8px;
		}

		.variasi
		{
			margin-top: 40px;

			h5
			{
				color: $main_grey;
				margin: 0;
				font-size: 15px;
			}
		}

		h6
		{
			margin: 20px 0 0 0;
			padding: 0;
			color: $main_grey_darker;
			font-weight: bold;
			font-size: 30px;
		}

		.count
		{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 1rem;
			margin-top: 10px;

			.count_act
			{
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			input
			{
				margin: 0 1px;
				max-width: 100px;
				height: 40px;
				text-align: center;
			}

			button
			{
				outline: none;
				font-weight: bold;
				width: 50px;
				padding: 0;
				transition: all 0.2s ease;
				border-radius: 5px;
				background-color: white;
				color: $main_grey;
				border: 1px solid #E0E0E0;
			
				&:hover
				{		
					background-color: $main_grey_darker;
					color: white;
				}
			
				&:disabled
				{
					cursor: no-drop;
					background-color: $main_grey_darker;
				}
			
				&:focus, &:active
				{
					border: 1px solid #E0E0E0;
					outline: none;
				}

				h4
				{
					margin: 0;
					font-size: 25px;
				}
			}

			h6
			{
				margin: 0;
				padding: 0;
				width: 100%;
				text-align: right;
			}
		}

		.list_berat
		{
			ul
			{
				li
				{
					background-color: white;
					padding: 10px 20px;
					display: inline-block;
					border: 1px solid #E0E0E0;
					font-weight: bold;
					color: $main_grey;
					transition: all 0.2s ease;
					cursor: pointer;
					border-radius: 10px;

					&:hover
					{
						background-color: $main_grey_darker;
						color: white;
					}
				}

				.active
				{
					background-color: $main_grey_darker;
					color: white;
				}
			}
		}

		.div_btn
		{
			margin-top: 40px;
			width: 100%;

			.btn-utama
			{
				width: 100%;
			}
		}
	}
}

#promo_bundling
{
	padding-top: 150px;
	padding-bottom: 300px;
	
	.col-md-12
	{
		margin: 0;
		padding: 0;
	}

	.img
	{
		width: 100%;
		position: relative;

		img
		{
			width: 100%;
			object-position: center;
			object-fit: cover;
		}
	}

	.title
	{
		// margin-left: 40px;
		// margin-top: 20px;
		
		h2
		{
			color: $main_grey_darker;
			margin: 0;
			font-size: 25px;

			#startfrom
			{
				font-size: 50px;
			}

			#prices
			{
				font-size: 70px;
    			color: #43434B;
			}
		}
	}		

	#startfrom
	{
		font-size: 30px;
	}

	.icon
	{
		position: absolute;
		top: 55px;
		left: 20%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 150px;
		}
	}

	.category
	{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
		.item
		{
			// display: flex;
			// flex: auto
			width: 200px;
			position: relative;

			button
			{
				display: block;
				border: 1px solid #eee;
				background-color: white;
				padding: 20px 5px 20px 5px;
				flex: 1;
				transition: all 0.2s ease;
				width: 100%;
				outline: none;

				&:nth-of-type(6)
				{
					border-right: 1px solid #eee;
				}
	
				&:hover
				{
					background-color: $main_grey_darker;
	
					h5
					{
						color: white;
					}
				}
			}

			h5
			{
				margin: 0;
				font-size: 15px;
				color: $main_grey;
				text-align: center;
			}
		}

		.active_item
		{
			button
			{
				background-color: $main_grey_darker;

				h5
				{
					color: white;
				}
			}

			.sub_item
			{
				button
				{
					display: block;
					border-left: 1px solid #eee;
					border-top: 1px solid #eee;
					border-bottom: 1px solid #eee;
					background-color: white;
					padding: 20px 5px 20px 5px;
					flex: 1;
					transition: all 0.2s ease;
	
					&:nth-of-type(6)
					{
						border-right: 1px solid #eee;
					}
		
					&:hover
					{
						background-color: $main_grey_darker;
		
						h5
						{
							color: white;
						}
					}
				}
	
				h5
				{
					margin: 0;
					font-size: 15px;
					color: $main_grey;
					text-align: center;
				}
			}
		}
	}

	.display
	{
		p
		{
			font-size: 25px;

			b
			{
				color: #43434B;
				text-decoration: underline;
			}
		}
	}

	.div_btn
	{
		margin-top: 40px;
		width: 100%;

		.btn-utama
		{
			width: 100%;
		}
	}

	.div_desc_bundling
	{
		table 
		{
			width: 100%;

			td
			{
				padding: 0;
			}
		}

		.div_box
		{
			// background-color: white;
			// color: #43434B;
			// border: 1px solid teal;
			box-shadow: 10px 10px 1px #eeeeee;
			text-align: center;
			max-width: 350px;

			.intro
			{
				padding: 10px 20px;
				background-color: white;
				color: #43434B;
				// border: 1px solid teal;

				.title_intro
				{
					font-size: 20px;
					font-weight: bold;
				}

				.title_price
				{
					font-size: 15px;
					// text-decoration: line-through;
					color: #BDBDBD;
					// text-align: right;
				}
			}

			.bundle
			{
				padding: 10px 20px;
				background-color: teal;
				color: white;
				margin-top: 10px;

				h1
				{
					margin: 0;
					font-size: 25px;
				}
			}

			.promo_text
			{
				padding: 30px 20px 20px 20px;
				background-color: white;

				h1
				{
					margin: 0;
					font-size: 20px;
					color: #43434B;
				}

				h4
				{
					margin: 0;
					color: #E53935;
					font-size: 40px;
					text-decoration: underline;
				}
			}

			.bundle_product
			{
				padding: 10px 20px;
				background-color: white;
				color: #43434B;
				// border: 1px solid teal;

				.title_intro
				{
					font-size: 20px;
					font-weight: bold;
				}

				.title_price
				{
					// text-decoration: line-through;
					font-size: 15px;
					color: #BDBDBD;
					// text-align: right;
				}
			}

			.promo_price
			{
				a, button
				{
					width: 100%;
					padding: 10px 30px;
					font-size: 20px;
					background-color: #4CAF50 !important;
					color: white;
					border-radius: 0;
			
					i
					{
						margin-right: 10px;
						font-size: 30px;
						vertical-align: sub;
						position: unset;
						color: white !important;
						opacity: 1;
					}
			
					&:hover
					{		
						transition: 0.2s ease;
						background-color: #59d25d !important;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 767px)
{
	#detail_product .desc
	{
		margin-left: 0;
		margin-top: 30px;
	}
}

@media only screen and (max-width: 410px)
{
	#detail_product .desc
	{
		.count
		{
			align-items: start;
			flex-direction: column;

			h6
			{
				text-align: left;
				margin-left: 0;
			}
		}
	}
}

#others
{
	padding-bottom: 200px;

	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		left: 35%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 200px;
		}
	}

	.list_products
	{
		margin-top: 20px;
		width: 100%;
	
		#items
		{
			transition: all 0.2s ease;
			padding: 0;

			#divs
			{
				margin: 10px 20px;
				border: 1px solid #eeeeee;
				background-color: white;
				box-shadow: 10px 10px 1px #eeeeee;
			}
	
			.content_items
			{
				width: 100%;
				height: 300px;
	
				img
				{
					object-fit: cover;
					object-position: center;
					width: 100%;
					height: 100%;
				}
			}
	
			h5
			{
				margin: 0;
				margin-top: 20px;
				color: #43434B;
				font-weight: normal;
				padding: 0 20px;
				font-size: 17px;
				height: 60px;
			}
	
			h6
			{
				margin: 0;
				color: $main_grey_darker;
				font-weight: bold;
				padding: 0 20px;
				font-size: 15px;
				padding-bottom: 20px;
			}
	
			.div_btn
			{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
	
				.btn-utama
				{
					width: 100%;
					border-radius: 0;
	
					i
					{
						margin-right: 5px;
						vertical-align: text-top;
					}
				}
			}
		}
	}
}

@media (min-width: 768px)
{
	#others .container 
	{
		max-width: 100%;
		padding: 0;
	}

	#others .list_products #items #divs
	{
		margin: 0;
	}
}

@media (min-width: 992px)
{
	#others .container 
	{
		max-width: 960px;
		padding-right: 15px;
    	padding-left: 15px;
	}

	#others .list_products #items #divs
	{
		margin: 0 20px;
	}
}

@media (min-width: 1200px)
{
	#others .container 
	{
		max-width: 1140px;
		padding-right: 15px;
    	padding-left: 15px;
	}

	#others .list_products #items #divs
	{
		margin: 0 20px;
	}
}

#cart
{
	h2
	{
		color: $main_grey_darker;
		margin: 0;
	}

	p
	{
		margin-top: 10px;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		right: 10%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #2121;

		i
		{
			font-size: 150px;
		}
	}

	.total
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 50px;

		h2
		{
			&:nth-of-type(1)
			{
				margin-right: 50px;
			}
		}
	}

	.list_cart
	{
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;

		.items
		{
			margin-top: 25px;
			display: flex;
			flex-direction: row;
			width: 100%;
			max-width: 700px;
			background-color: white;
			padding: 20px 50px;
			box-shadow: 10px 10px 1px #eeeeee;
			position: relative;

			#delete_cart
			{
				padding: 5px 5px;
				width: 200px;
				background-color: #D32F2F;
				color: white;
				margin-top: 20px;

				&:hover
				{
					background-color: #E57373;
				}
			}

			img
			{
				width: 150px;
				height: 100%;
				object-fit: contain;
				object-position: top;
			}

			.desc
			{
				display: flex;
				flex-direction: column;
				margin-left: 20px;

				h5
				{
					margin: 0;
					padding: 0;
					color: #43434B;
				}
				
				p
				{
					margin: 0;
					padding: 0;
					color: #43434B;
				}

				#harga
				{
					margin-top: 5px;
				}
		
				#add_min
				{
					margin-top: 15px;
					display: flex;
					flex-direction: row;

					span
					{
						color: #43434B;
						width: 30px; 
						text-align: center;
					}
		
					.btn-utama
					{
						padding: 0px 5px;
						width: 30px;
						text-align: center;
						margin: 0 10px;
		
						&:nth-of-type(1)
						{
							margin-left: 0;
						}
					}
				}
			}
		}
	}

	#div_btn
	{
		margin-top: 10px;
		width: 100%;
		display: flex;
		justify-content: center;

		a, button
		{
			width: auto;
			padding: 20px 30px;
			font-size: 20px;
			background-color: #4CAF50;
			color: white;
	
			i
			{
				margin-right: 10px;
				font-size: 30px;
				vertical-align: sub;
				position: unset;
				color: white !important;
				opacity: 1;
			}
	
			&:hover
			{		
				transition: 0.2s ease;
				background-color: #81C784;
			}
		}
	}
}


.form_promo_text
{
	h1
	{
		margin: 0;
		font-size: 28px;
		color: #939393;
	}

	h2
	{
		margin: 0;
		font-size: 23px;
		color: #43434B;
	}

	h3
	{
		margin: 0;
		color: #E53935;
		font-size: 40px;
		text-decoration: underline;
	}
}

@media only screen and (max-width: 575px)
{
	#cart .list_cart .items
	{
		padding: 20px;

		img
		{
			width: 100px;
		}	
	}
}

@media only screen and (max-width: 415px)
{
	#div_form .row 
	{
		padding: 0;
	}

	#cart 
	{
		.list_cart .items
		{
			flex-direction: column;

			.desc
			{
				margin-left: 0;
				margin-top: 10px;
			}

			img
			{
				width: 100%;
			}
		}

		.total
		{
			h2
			{
				font-size: 20px;

				&:nth-of-type(1)
				{
					margin-right: 30px;
				}
			}
		}
	}

	#div_btn
	{
		a, button
		{
			padding: 10px 10px !important;
			font-size: 17px !important;
		}

		i
		{
			display: none;
		}
	}
}

.div_index_master
{
	margin: 0;
	padding: 150px 0 50px 0;

	.container
	{
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 100%;

		#info_form
		{
			background-color: #00800026;
			padding: 30px 20px 20px 20px !important;
			position: relative;
			
			ol
			{
				margin: 0 0 0 15px;
				padding: 0;
				display: block;
		
				li
				{
					list-style: inherit;
					padding-left: 10px;
				}
			}
		
			i:not(.btn_info_aja)
			{
				position: absolute;
				bottom: 0px;
				right: 20px;
				font-size: 210px;
				color: #00350018;
			}

			.btn_info_aja
			{
				color: white;
				padding: 5px;
				text-align: center;
				background-color: $main_color;
				width: 30px;
			}
			
			.fa-user-edit, .fa-address-book, .fa-edit, .fa-file-invoice
			{
				background-color: #7cb342;
			}
			
			.fa-user-times, .fa-info-circle, .fa-trash
			{
				background-color: #f44336;
			}
			
			.fa-calendar-check
			{
				background-color: #607d8b;
			}
			
			.fa-medal
			{
				background-color: #03a9f4;
			}
		}

		#tab_sub_kategori
		{
			width: 100%;
			margin-top: 20px;

			li
			{
				a
				{
					width: 200px;
					padding: 10px 20px;
					color: $main_black;
					display: block;
					background-color: white;
					transition: all 0.2s ease;
					
					&:hover
					{
						color: white;
						background-color: $main_grey_darker;
					}
				}
			}

			.active
			{
				a
				{
					background-color: $main_black;
					color: white;
				}
			}
		}

		#tab_content
		{
			width: 100%;
			background-color: white;
			padding: 40px 50px;
			box-shadow: 0px 2px 1px 0 #d3d3d3;

			h3
			{
				color: $main_black;
			}

			p
			{
				color: $main_grey_darker;
			}

			h5
			{
				margin: 0;
				padding: 0;
				color: $main_grey_darker;
				font-weight: normal;
			}

			ol
			{
				margin-left: 20px;

				li
				{
					list-style: decimal;
					color: $main_grey_darker;
				}
			}

			ul li
			{
				color: $main_grey_darker;
			}
		}
	}

	.div_dataTable
	{
		margin: 0;
		padding: 20px 10px;

		table
		{
			width: 100%;

			#masih_ada
			{
				padding: 5px 15px;
				background-color: #7cb342;
				color: white;
			}

			#sudah_full
			{
				padding: 5px 15px;
				background-color: #F44336;
				color: white;
			}

			.btn-utama
			{
				font-size: 17px;
				padding: 0px 10px;
				width: 50px;
				text-align: center;

				&:hover
				{
					color: white !important;

					i
					{
						color: white !important;
					}
				}
			}
		}

		.btn_info_2
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #607d8b;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #b0bec5;
				}

				&:disabled
				{
					background-color: #b0bec5;
				}
			}
		}

		.btn_info_1
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #03a9f4;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #81d4fa;
				}

				&:disabled
				{
					background-color: #81d4fa;
				}
			}
		}

		.btn_info
		{
			padding-left: 0 !important;
			padding-right: 5px !important;
		}
		
		.btn_edit
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #7cb342;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #aee571;
				}

				&:disabled
				{
					background-color: #aee571;
				}
			}
		}

		.btn_delete
		{
			padding-left: 0 !important;
			padding-right: 10px !important;
		
			.btn-utama
			{
				background-color: #f44336;
				color: white;
				display: block;
				transition: all 0.2s ease;
		
				&:hover
				{
					background-color: #ff7961;
				}

				&:disabled
				{
					background-color: #ff7961;
				}
			}
		}
	}
}

#act_more
{
	width: auto;
	font-weight: normal;
	font-size: 17px;
}

.not_found
{
	#div_img
	{
		padding: 100px 0 0 0;

		.container
		{		
			img
			{
				width: 400px;
			}
		}
	}

	.intro_keterangan_2
	{
		margin-top: 0;
	}
}

#intro_keterangan_2
{
	position: relative;

	h1
	{
		color: $main_grey;
	}

	i
	{
		position: absolute;
		top: 80%;
		left: 10%;
		transform: translate(0, -50%);
		font-size: 200px;
		color: #00350018;
	}

	.btn-utama
	{
		width: auto;
		display: inline-block;
		margin-top: 20px;
		font-size: 20px;
		padding: 20px 50px;
	
		&:hover
		{		
			transition: 0.2s ease;
			background-color: $main_grey;
		}
	}
}

form 
{
	.btn-utama
	{
		background-color: $main_black;
		color: white;

		i
		{
			color: white !important;
		}
	}
}

.site-mobile-menu
{
	a 
	{
		color: $main_grey_darker !important;
		position: relative;
	
		&:hover
		{
			color: $main_color!important;
		}

		.cart_counting
		{
			position: absolute;
			top: 7px;
			left: 35px;
			font-size: 12px;
			background-color: #D32F2F;
			color: white;
			border-radius: 50%;
			width: 25px;
			text-align: center;
			border: 2px solid white;
			font-weight: bold;
		}
	}
}

#index_paket_usaha
{
	padding-top: 150px;

	h2
	{
		color: $main_grey_darker;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		right: 0;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		font-size: 200px;
		color: #2121;
	}

	#div_image_paket_1
	{
		img
		{
			width: 100%;
			height: 400px;
			object-fit: contain;
			object-position: right;
		}

		.col-lg-4
		{
			display: flex;
			flex-direction: column;
			justify-content: center;

			h5
			{
				font-size: 25px;
				color: $main_grey_darker;
				margin-bottom: 30px;
			}

			ul
			{
				margin-left: 30px;

				li
				{
					list-style-image: url('../images/check.png');
				}
			}

			#div_btn
			{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin: 0;
				padding: 0;

				div
				{
					padding: 0;
				}
		
				a
				{
					margin-top: 20px;
					width: 100%;
					padding: 10px 30px;
					font-size: 20px;
					background-color: #4CAF50 !important;
					color: white;
			
					i
					{
						margin-right: 10px;
						font-size: 30px;
						vertical-align: sub;
						position: unset;
						color: white !important;
						opacity: 1;
					}
			
					&:hover
					{		
						transition: 0.2s ease;
						background-color: #59d25d !important;
					}
				}
			}
		}
	}

	#div_image_paket_2
	{
		margin-top: 100px;
		margin-bottom: 200px;

		img
		{
			width: 100%;
			height: 400px;
			object-fit: contain;
			object-position: left;
		}

		.col-lg-4
		{
			display: flex;
			flex-direction: column;
			justify-content: center;

			h5
			{
				font-size: 25px;
				color: $main_grey_darker;
				margin-bottom: 30px;
			}

			ul
			{
				margin-left: 30px;

				li
				{
					list-style-image: url('../images/check.png');
				}
			}

			#div_btn
			{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin: 0;
				padding: 0;

				div
				{
					padding: 0;
				}
		
				a
				{
					margin-top: 20px;
					width: 100%;
					padding: 10px 30px;
					font-size: 20px;
					background-color: #4CAF50 !important;
					color: white;
			
					i
					{
						margin-right: 10px;
						font-size: 30px;
						vertical-align: sub;
						position: unset;
						color: white !important;
						opacity: 1;
					}
			
					&:hover
					{		
						transition: 0.2s ease;
						background-color: #59d25d !important;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 991px)
{
	#index_paket_usaha #div_image_paket_1 
	{
		.col-lg-4
		{
			margin-top: 30px;
			align-items: center;
		}

		img 
		{
			object-position: bottom;	
			height: 300px;
		}	
	}
	
	#index_paket_usaha #div_image_paket_2
	{
		flex-direction: column-reverse;

		.col-lg-4
		{
			margin-top: 30px;
			align-items: center;
		}

		img 
		{
			object-position: bottom;	
			height: 300px;
		}	
	}
}

#index_distributor
{
	padding-top: 150px;
	padding-bottom: 250px;

	h2
	{
		color: $main_grey_darker;
	}

	.icon
	{
		position: absolute;
		top: 50%;
		right: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		font-size: 100px;
		color: #2121;
	}

	#div_contents
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		#item
		{
			padding: 30px 30px 40px 30px;
			border: 1px solid #eeeeee;
			background-color: white;
			box-shadow: 10px 10px 1px #eeeeee;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			h2
			{
				margin-bottom: 20px;
			}

			table td
			{
				vertical-align: top;

				&:nth-of-type(1)
				{
					text-align: center;
				}
			}
		}
	}
}

#image_preview
{
	width: 100%;
	height: 100%;
}

.chat_wa
{
	position: fixed;
	bottom: 20px;
	right: 20px;

	.btn-utama
	{
		padding: 11px 15px;
		background-color: #4CAF50;
		border-radius: 50%;
		color: white;
		border: none;
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;

		i
		{
			font-size: 30px;
		}

		&:hover
		{
			background-color: #59d25d;
		}
	}
}

// ------------------------------------------------------------------------------------------------


nav #active a
{
	color: $main_color !important;
	font-weight: bold;
}

nav #active .dropdown li a
{
	color: inherit !important;
	font-weight: inherit;
}

/* width */
::-webkit-scrollbar 
{
	width: 5px;
}
  
/* Track */
::-webkit-scrollbar-track 
{
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb 
{
	background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover 
{
	background: #555;
}

textarea
{
	height: 200px;
	resize: none;
	color: #495057;

	&:disabled
	{
		opacity: 0.5;
		border: 1px solid rgb(230, 230, 230) !important;
		color: #c0c0c0;

		&::placeholder
		{
			opacity: 0.5 !important; 
		}
	}
}

.row
{
	margin: 0;
}

ul
{
	margin: 0;
	padding: 0;

	li
	{
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

ol
{
	margin: 0;
	padding: 0;

	li
	{
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.custom_swal_danger
{
	background-color: red !important;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: rgba(255, 0, 0, 0.5) !important;
	}

	&:focus 
	{ 
		overflow: hidden !important; 
		box-shadow: none !important;
	}
}

.custom_swal_success
{
	background-color: #7cb342 !important;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: rgba(124, 179, 66, 0.5) !important;
	}

	&:focus 
	{ 
		overflow: hidden !important; 
		box-shadow: none !important;
	}
}

.modal_detail
{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 105;
	height: 90vh;
	width: 800px;

	.modal_detail_content
	{
		width: 100%;
		height: 100%;
		background-color: white;

		.detail_title
		{
			height: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background-color: #f1f1f1;
			border-bottom: 1px solid #dddddd;

			h1
			{
				margin: 0;
			}

			.detail_close
			{
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translate(0, -50%);
				width: 50px;
				height: 50px;
				font-size: 45px;
				background-color: #F44336;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
				cursor: pointer;
				color: #ffffff;
				border-radius: 5px;
		
				&:hover
				{
					background-color: #ba000d;
				}
			}
		}


		.detail_content
		{
			width: 100%;
			height: 90%;
			max-height: 90%;
			overflow: auto;
			position: relative;
			padding: 20px 20px;
			background-color: #f5f5f5;

			#img_banner
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.headernya
			{
				background-color: white;
				box-shadow: 0px 2px 1px 0 #d3d3d3;
			}

			#div_perlombaan
			{
				li
				{
					list-style: decimal;
					margin: 10px 0 0 15px;
				}
			}

			li
			{
				margin-top: 10px;
				color: #212121;
				filter: blur(0.000001px);

				.btn_info_2
				{
					padding-left: 0 !important;
					padding-right: 0 !important;
		
					.btn-utama
					{
						background-color: #607d8b;
						color: white;
						transition: all 0.2s ease;
						display: block;
						height: auto;
						padding: 0px 15px;
						width: 100%;
						text-align: left;
				
						&:hover
						{
							background-color: #b0bec5;
						}
		
						&:disabled
						{
							background-color: #b0bec5;
						}

						i
						{
							width: 20px;
						}
					}
				}
		
				.btn_info_1
				{
					padding-left: 0 !important;
					padding-right: 0 !important;
		
					.btn-utama
					{
						background-color: #03a9f4;
						color: white;
						transition: all 0.2s ease;
						display: block;
						height: auto;
						padding: 0px 15px;
						width: 100%;
						text-align: left;
				
						&:hover
						{
							background-color: #81d4fa;
						}
		
						&:disabled
						{
							background-color: #81d4fa;
						}

						i
						{
							width: 20px;
						}
					}
				}
		
				.btn_info
				{
					padding-left: 0 !important;
					padding-right: 0 !important;
		
					.btn-utama
					{
						display: block;
						height: auto;
						padding: 0px 15px;
						width: 100%;
						text-align: left;

						i
						{
							width: 20px;
						}
					}
				}
				
				.btn_edit
				{
					padding-left: 0 !important;
					padding-right: 0 !important;
		
					.btn-utama
					{
						background-color: #7cb342;
						color: white;
						transition: all 0.2s ease;
						display: block;
						height: auto;
						padding: 0px 15px;
						width: 100%;
						text-align: left;
				
						&:hover
						{
							background-color: #aee571;
						}
		
						&:disabled
						{
							background-color: #aee571;
						}

						i
						{
							width: 20px;
						}
					}
				}
		
				.btn_delete
				{
					padding-left: 0 !important;
					padding-right: 0 !important;
				
					.btn-utama
					{
						background-color: #f44336;
						color: white;
						display: block;
						transition: all 0.2s ease;
						height: auto;
						padding: 0px 15px;
						width: 100%;
						text-align: left;
				
						&:hover
						{
							background-color: #ff7961;
						}
		
						&:disabled
						{
							background-color: #ff7961;
						}

						i
						{
							width: 20px;
						}
					}
				}
			}

			#lampiran
			{
				color: $main_color;

				table 
				{
					th
					{
						vertical-align: top;
					}
					
					td a
					{
						cursor: pointer;
						display: block;

						&:hover
						{
							text-decoration: underline;
						}
					}
				}

				h4
				{
					margin: 0;
				}
			}

			.belum_ada
			{
				color: #f44336;
			}
		}
	}
}

.modal_gallery
{
	display: none;
	position: fixed;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 105;
	height: 80vh;
	width: 800px;

	.modal_gallery_content
	{
		width: 100%;
		height: 100%;
		background-color: #fff;

		.gallery_title
		{
			height: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background-color: #f1f1f1;
			border-bottom: 1px solid #dddddd;

			.gallery_close
			{
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translate(0, -50%);
				width: 50px;
				height: 50px;
				font-size: 45px;
				background-color: #F44336;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
				cursor: pointer;
				color: #ffffff;
				border-radius: 5px;
		
				&:hover
				{
					background-color: #ba000d;
				}
			}
		}


		.gallery_header
		{
			width: 100%;
			height: 70%;
			position: relative;

			img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
			}

			.btn
			{
				position: absolute;
				bottom: 10px;
				left: 20%;
				right: 20%;

				button
				{
					width: 100%;
				}
			}
		}

		.gallery_footer
		{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 20%;

			h4
			{
				width: 100%;
				padding: 20px 5px;
				background-color: #ff8c0028;
				color: #212121;
				margin: 0;
				text-align: center;
				letter-spacing: 7px;
			}

			.owl-carousel 
			{
				height: 100%;

				.owl-stage-outer
				{
					width: 100%;
					height: 100%;
					padding: 0;

					.owl-stage
					{
						width: 100%;
						height: 100%;

						.owl-item
						{
							height: 100%;
						}
					}
				}
			}
				
			.owl-prev
			{
				transition: all 0.2s ease;
				position: absolute;
				left: -80px;
				top: 45%;
				transform: translate(0, -50%);
				font-weight: bold;
				font-size: 40px;
				padding: 0px 20px;
				background-color: $main_color;

				&:hover
				{
					background-color: #ffcc8d;
				}
			}

			.owl-next
			{
				transition: all 0.2s ease;
				position: absolute;
				right: -80px;
				top: 45%;
				transform: translate(0, -50%);
				font-weight: bold;
				font-size: 40px;
				padding: 0px 20px;
				background-color: $main_color;

				&:hover
				{
					background-color: #ffcc8d;
				}
			}

			.item
			{
				width: 100%;
				height: 100%;
				cursor: pointer;
				transition: 0.2s ease;

				&:hover
				{
					padding: 20px;
				}

				img
				{
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			}

			.loading_elipsis
			{
				display: block;
				position: absolute;
				top: 95%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}

.modal_pembatalan
{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 105;
	min-height: 50vh;
	width: 700px;

	.modal_pembatalan_content
	{
		width: 100%;
		height: 100%;
		background-color: white;

		.pembatalan_title
		{
			padding: 20px 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background-color: #f1f1f1;
			border-bottom: 1px solid #dddddd;

			h1
			{
				margin: 0;
				font-size: 35px;
			}

			.pembatalan_close
			{
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translate(0, -50%);
				width: 50px;
				height: 50px;
				font-size: 45px;
				background-color: #F44336;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
				cursor: pointer;
				color: #ffffff;
				border-radius: 5px;
		
				&:hover
				{
					background-color: #ba000d;
				}
			}
		}


		.pembatalan_content
		{
			width: 100%;
			max-height: 80vh;
			overflow: auto;
			position: relative;
			padding: 10px 20px 50px 20px;

			li
			{
				margin-top: 10px;
				color: #212121;
				filter: blur(0.000001px);
			}

			#lampiran
			{
				color: $main_color;

				table td a
				{
					cursor: pointer;
					display: block;

					&:hover
					{
						text-decoration: underline;
					}
				}

				h4
				{
					margin: 0;
				}
			}
		}
	}
}

.modal_selesai
{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 105;
	min-height: 50vh;
	width: 900px;

	.modal_selesai_content
	{
		width: 100%;
		height: 100%;
		background-color: white;

		.selesai_title
		{
			padding: 20px 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background-color: #f1f1f1;
			border-bottom: 1px solid #dddddd;

			h1
			{
				margin: 0;
				font-size: 35px;
			}

			.selesai_close
			{
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translate(0, -50%);
				width: 50px;
				height: 50px;
				font-size: 45px;
				background-color: #F44336;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
				cursor: pointer;
				color: #ffffff;
				border-radius: 5px;
		
				&:hover
				{
					background-color: #ba000d;
				}
			}
		}

		.selesai_content
		{
			width: 100%;
			max-height: 70vh;
			overflow: auto;
			position: relative;
			padding: 10px 20px;

			li
			{
				margin-top: 10px;
				color: #212121;
				filter: blur(0.000001px);
			}
		}

		.selesai_footer
		{
			padding: 20px 10px;
			background-color: #f1f1f1;
			border-bottom: 1px solid #dddddd;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.btn-cancel
			{
				background-color: #F44336;
				border: none;
				outline: none;
				color: white;
				font-weight: bold;
				width: 200px;
				padding: 10px 0;
				transition: all 0.2s ease;
				margin-right: 10px;

				i
				{
					margin-right: 5px;
					font-size: 15px;
				}

				&:hover
				{
					background-color: #ff7961;
				}
			}
			
			.btn-utama
			{
				i
				{
					margin-right: 5px;
					font-size: 15px;
				}
			}
		}
	}
}

.background_modal
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 104;
	background-color: rgba(88, 88, 88, 0.8);
}


.swal-text
{
	text-align: center;
}

.swal-loader
{
	background-color: white;
	height: auto;

	.swal-content
	{
		div
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	
			.ldio-gcefs0otrm
			{
				div
				{
					position: relative;
					left: 0;
				}
			}
		}

		h3
		{
			margin-top: 30px;
			letter-spacing: 30px;
		}
	}
}

.datepicker table tr td span.focused, .datepicker table tr td span.active.active
{
	background-color: $main_color;
	font-weight: bold;
	color: white;
}

.datepicker table tr td span
{
	transition: all 0.2s ease;

	&:hover
	{
		background-color: rgba(255, 140, 0, 0.2);
	}
}

.swal-wide
{
	width: 50% !important;
	min-height: 300px;

	.swal-title
	{
		position: relative;
		background-color: #f1f1f1;
		border-bottom: 1px solid #dddddd;
		padding-top: 20px;
		
		&:first-child
		{
			margin-top: 0;
		}

		&:not(:last-child)
		{
			margin-bottom: 0;
		}

	}

	.swal-content 
	{
		margin-top: 20px;

		div
		{
			text-align: left;
			padding: 0 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			ol li
			{
				list-style: inherit;
			}
		}
	}

	i
	{
		position: absolute;
		top: 20px;
		left: 50px;
		font-size: 150px;
		color: $main_color;
		opacity: 0.2;
	}
}

.block-counter-1
{
	background-color: white;
	padding: 50px 0;
	border: 1px solid #f6f5f5;
	box-shadow: 0px 2px 1px 0 #d3d3d3;
}

.sticky-wrapper
{
	position: fixed;
	// border-bottom: 1px solid rgb(230, 230, 230);
	// box-shadow: 2px 2px 5px 0 #d3d3d3;
}

#div_jadwal
{
	padding-top: 50px;

	.col-lg-12
	{
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		justify-content: center;

		p
		{
			margin: 0;
		}

		#intro_keterangan
		{
			margin-top: 10px;

			b
			{
				color: $main_color;
			}
		}

		h1
		{
			text-align: right;
			margin-bottom: 20px;
		}

		.btn-utama
		{
			margin-top: 20px;
		}
	}

	.background_image
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		filter: blur(10px);
		z-index: -2;
	}

	#banner
	{
		width: 100%;
		height: 400px;

		img
		{
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: center;
		}
	}

	#deskripsi
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

#selengkapnya
{
	text-decoration: underline;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover
	{
		color: $main_color;
	}
}

#deskripsi_mobile
{
	// display: none;
	width: 100%;
	margin-top: 50px;
	position: relative;
	min-height: 200px;

	i
	{
		position: absolute;
		top: 50px;
		left: 120px;
		font-size: 150px;
		color: $main_color;
		opacity: 0.2;
	}
}

#form_ended
{
	i
	{
		position: absolute;
		top: 30px;
		left: 80px;
		font-size: 220px;
		color: $main_color;
		opacity: 0.2;
	}
}

.div_jadwal_pelatihan_perlombaan
{
	margin: 0;
	padding: 150px 0 50px 0;

	.datepicker
	{
		border: 1px solid #f6f5f5 !important;
		box-shadow: 0px 2px 1px 0 #d3d3d3 !important;
	}

	&::before
	{
		background-image: url('../upload/pelatihan/1/EdXyOLkUwAA21UV.jpg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		filter: blur(8px);
	}

	.container
	{
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 100%;

		.image_banner
		{
			width: 400px;
			height: 200px;
			margin-bottom: 10px;

			img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
				border-radius: 20%;
			}
		}

		.owl-stage-outer
		{
			width: 100%;
			padding: 10px 0;
		}

		.div_tanggal
		{
			position: relative;
			transition: all 0.2s ease;
			margin: 0 3px;
			padding: 2px 0;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// border: 1px solid #f6f5f5;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			cursor: pointer;

			&:not(.tanggal_aktif):hover
			{
				background-color: #ff8c0046;
				transition: all 0.2s ease;
				border: none;
				box-shadow: none;
			}

			.bulannya
			{
				font-size: 15px;
				margin: 0;
				padding: 0;
			}

			.garis_penanda
			{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background-color: $main_color;
			}

			.tanggalnya
			{
				margin: 0;
				padding: 0;
				font-size: 20px;
				font-weight: bold;
			}

			.harinya
			{
				margin: 0;
				padding: 0;
				font-size: 12px;
				font-weight: normal;
			}
		}

		.div_tanggal_disabled
		{
			position: relative;
			transition: all 0.2s ease;
			margin: 0 3px;
			padding: 2px 0;
			background-color: #c8c8c881;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			cursor: pointer;

			&:not(.tanggal_aktif):hover
			{
				background-color: #ff8c0046;
				transition: all 0.2s ease;
				border: none;
				box-shadow: none;
			}

			.bulannya
			{
				font-size: 15px;
				margin: 0;
				padding: 0;
			}

			.garis_penanda
			{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background-color: rgb(121, 121, 121);
			}

			.tanggalnya
			{
				margin: 0;
				padding: 0;
				font-size: 20px;
				font-weight: bold;
			}

			.harinya
			{
				margin: 0;
				padding: 0;
				font-size: 12px;
				font-weight: normal;
			}
		}

		.div_tanggal_weekend
		{
			position: relative;
			transition: all 0.2s ease;
			margin: 0 3px;
			padding: 2px 0;
			background-color: #ff04003f;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			cursor: pointer;

			&:not(.tanggal_aktif):hover
			{
				background-color: #ff8c0046;
				transition: all 0.2s ease;
				border: none;
				box-shadow: none;
			}

			.bulannya
			{
				font-size: 15px;
				margin: 0;
				padding: 0;
				color: white;
			}

			.garis_penanda
			{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 3px;
				background-color: #ff3330;
			}

			.tanggalnya
			{
				margin: 0;
				padding: 0;
				font-size: 20px;
				font-weight: bold;
				color: white;
			}

			.harinya
			{
				margin: 0;
				padding: 0;
				font-size: 12px;
				font-weight: normal;
				color: white;
			}
		}

		.tanggal_aktif
		{
			background-color: $main_color;
			color: white;

			.garis_penanda
			{
				background-color: #a97029;
			}
		}
		
		.owl-prev
		{
			transition: all 0.2s ease;
			position: absolute;
			left: -80px;
			top: 45%;
			transform: translate(0, -50%);
			font-weight: bold;
			font-size: 40px;
			padding: 0px 20px;
			background-color: $main_color;
			box-shadow: 2px 2px 5px 0 #d3d3d3;

			&:hover
			{
				background-color: #ffcc8d;
			}
		}

		.owl-next
		{
			transition: all 0.2s ease;
			position: absolute;
			right: -80px;
			top: 45%;
			transform: translate(0, -50%);
			font-weight: bold;
			font-size: 40px;
			padding: 0px 20px;
			background-color: $main_color;
			box-shadow: 2px 2px 5px 0 #d3d3d3;

			&:hover
			{
				background-color: #ffcc8d;
			}
		}

		.disabled
		{
			cursor: no-drop !important;
		}

		#div_tanggal_bulanan
		{
			width: 100%;
		}

		.div_pelatihan_perlombaan
		{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.list_pelatihan_perlombaan
			{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: flex-start;
				padding: 0 20px;
				flex-wrap: nowrap;
				margin-bottom: 150px;

				.wrapper
				{
					flex: 1;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;				
					align-content: center; 
					justify-content: center;

					.items
					{
						flex: 0 0 300px;
						margin: 10px 10px;
						box-shadow: 5px 5px 10px 2px #999999;

						&:hover
						{	
							transition: 0.2s ease;
							box-shadow: 5px 5px 10px 2px #777777;
						}

						.banner
						{
							width: 100%;
							height: 200px;

							img
							{
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
							}
						}

						.heading
						{
							padding: 20px 20px;
							height: 100px;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: white;

							h3
							{
								margin: 0;
								text-align: center;
							}
						}

						ul
						{
							margin: 0;
							padding: 10px 0;
							background-color: rgb(230, 230, 230);

							li
							{
								list-style: none;
								margin: 0;
								padding: 0 5px 0 20px;

								i
								{
									width: 30px;
									text-align: center;
								}
							}
						}

						a
						{
							transition: all 0.2s ease;
							width: 100%;
							padding: 10px 0;
							margin: 0;
							background-color: $main_color;
							color: white;
							outline: none;
							border: none;
							font-weight: bold;
							display: inline-block;
							text-align: center;

							&:hover
							{
								background-color: #ff8b00a1;
								transition: all 0.2s ease;
							}
						}
					}
				}
			}
		}

		#info_form
		{
			background-color: #00800026;
			padding: 30px 20px 20px 20px !important;
			position: relative;
			
			ol
			{
				margin: 0 0 0 15px;
				padding: 0;
				display: block;
		
				li
				{
					list-style: inherit;
					padding-left: 10px;
				}
			}
		
			i:not(.btn_info_aja)
			{
				position: absolute;
				bottom: 0px;
				right: 20px;
				font-size: 210px;
				color: #00350018;
			}

			.btn_info_aja
			{
				color: white;
				padding: 5px;
				text-align: center;
				background-color: $main_color;
				width: 30px;
			}
			
			.fa-user-edit, .fa-address-book, .fa-edit
			{
				background-color: #7cb342;
			}
			
			.fa-user-times, .fa-info-circle, .fa-trash
			{
				background-color: #f44336;
			}
			
			.fa-calendar-check
			{
				background-color: #607d8b;
			}
			
			.fa-medal
			{
				background-color: #03a9f4;
			}
		}
	}

	#detail_pelatihan_perlombaan
	{
		margin-top: -150px;

		#margin-row 
		{
			.row
			{
				margin-top: 10px;

				.col-md-3, .col-md-4, .col-md-8, .col-lg-4, .col-lg-8
				{
					margin-top: 10px;
				}
			}
		}

		.items
		{
			background-color: white;
			border: 1px solid #f6f5f5;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			padding: 5px 50px;
			min-height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			transition: all 0.2s ease;

			i
			{
				position: absolute;
				bottom: 20px;
				left: 20px;
				font-size: 90px;
				color: $main_color;
				opacity: 0.2;
			}

			&:hover
			{
				background-color: #ff8b0088;
				border: 1px solid transparent;
				color: white;
			}

			p
			{
				line-height: 17px;
			}
		}

		.syarat
		{
			background-color: white;
			border: 1px solid #f6f5f5;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			padding: 20px 50px;
			min-height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			transition: all 0.2s ease;
			cursor: pointer;

			i
			{
				position: absolute;
				top: 40px;
				left: 20px;
				font-size: 90px;
				color: $main_color;
				opacity: 0.2;
			}

			ol
			{
				margin-left: 10px;

				li
				{
					list-style-type: inherit;
					line-height: 20px;
				}
			}

			&:hover
			{
				background-color: #ff8b0088;
				border: 1px solid transparent;
				color: white;
			}
		}
	}

	.div_dataTable
	{
		margin: 0;
		padding: 20px 10px;

		table
		{
			width: 100%;

			#masih_ada
			{
				padding: 5px 15px;
				background-color: #7cb342;
				color: white;
			}

			#sudah_full
			{
				padding: 5px 15px;
				background-color: #F44336;
				color: white;
			}

			.btn-utama
			{
				font-size: 17px;
				padding: 0px 10px;
				width: 50px;
				text-align: center;
			}
		}

		.btn_info_2
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #607d8b;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #b0bec5;
				}

				&:disabled
				{
					background-color: #b0bec5;
				}
			}
		}

		.btn_info_1
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #03a9f4;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #81d4fa;
				}

				&:disabled
				{
					background-color: #81d4fa;
				}
			}
		}

		.btn_info
		{
			padding-left: 0 !important;
			padding-right: 5px !important;
		}
		
		.btn_edit
		{
			padding-left: 0 !important;
			padding-right: 5px !important;

			.btn-utama
			{
				background-color: #7cb342;
				color: white;
				transition: all 0.2s ease;
				display: block;
		
				&:hover
				{
					background-color: #aee571;
				}

				&:disabled
				{
					background-color: #aee571;
				}
			}
		}

		.btn_delete
		{
			padding-left: 0 !important;
			padding-right: 10px !important;
		
			.btn-utama
			{
				background-color: #f44336;
				color: white;
				display: block;
				transition: all 0.2s ease;
		
				&:hover
				{
					background-color: #ff7961;
				}

				&:disabled
				{
					background-color: #ff7961;
				}
			}
		}
	}
}

#div_shadow
{
	position: relative;
	margin-bottom: 20px;
	width: 100%;

	#shadow
	{
		position: absolute;
		top: 10px;
		color: #e6e6e6;
		left: 50%;
		transform: translate(-50%, 0);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 20px;
		z-index: -1;
		width: 100%;
	}

	h2
	{
		letter-spacing: 10px;
		font-weight: 600;
	}
}

.nama_kegiatan
{
	opacity: 1 !important;
}



.form-group input[type="checkbox"] {
	display: none;
}

.form-group .btn_check {
	border: 1px solid rgba(255, 153, 0, 0.2);
	background-color: rgba(255, 153, 0, 0.2);
	-webkit-box-shadow: 2px 2px 5px 0 #d6d6d6;
	box-shadow: 2px 2px 5px 0 #d6d6d6;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	color: #ED7B17;
	font-size: 18px;
}

.form-group .btn_check:hover {
	color: #ED7B17;
}

.form-group .btn_check:focus {
	border-color: #ED7B17;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-group input[type="checkbox"] + .btn-group > label span {
	width: 20px;
	padding: 4.6px 0;
	vertical-align: middle;
	color: #ED7B17;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
	display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span:last-child {
	display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
	display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
	display: none;
}

.form-group input[type="checkbox"] + .btn-group > label:last-child {
	padding-top: 13px;
	vertical-align: middle;
	padding-right: 30px;
	background-color: white;
	border: 1px solid rgba(255, 153, 0, 0.2);
	text-align: left;
	-webkit-box-shadow: 2px 2px 5px 0 #d6d6d6;
	box-shadow: 2px 2px 5px 0 #d6d6d6;
	color: #495057;
}

.form-group input[type="checkbox"] + .btn-group > label:last-child:focus {
	border-color: #ED7B17;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-group input[type="checkbox"] + .btn-group > label:last-child textarea {
	width: 350px;
}

.prev_slick
{
	vertical-align: middle; 
	background-color: $main_color; 
	color: white; 
	padding: 5px 10px 3px 9px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: #ffcc8d; 
	}
}

.next_slick
{
	vertical-align: middle; 
	background-color: $main_color; 
	color: white; 
	padding: 5px 10px 3px 9px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: #ffcc8d; 
	}
}

.prev_owl
{
	vertical-align: middle; 
	background-color: $main_color; 
	color: white; 
	padding: 5px 10px 3px 9px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: #ffcc8d; 
	}
}

.next_owl
{
	vertical-align: middle; 
	background-color: $main_color; 
	color: white; 
	padding: 5px 10px 3px 9px;
	cursor: pointer;
	transition: all 0.2s ease;

	&:hover
	{
		background-color: #ffcc8d; 
	}
}

.slick-slide
{	
	margin: 0 50px 100px 50px;
	border-bottom: 1px solid rgb(230, 230, 230);
	box-shadow: 2px 2px 5px 0 #d3d3d3;
	background-color: white;
	width: 100%;
	
	.owl-theme
	{
		margin-top: 25px;
	}

	.slick_lomba_header
	{
		background-color: #ff8c0015;
		padding: 20px 50px 1px 160px;
		color: #777777;
		position: relative;

		.numero
		{
			position: absolute;
			top: 0;
			left: 0;
			height: 200px;
    		width: auto;
    		padding: 5px 20px;
			background-color: white;
			border: 10px solid #ff8c0015; 
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			h4
			{
				color: inherit;
				font-size: 80px;
				margin: 0;
			}

			hr
			{
				margin: 0;
				height: 5px;
				width: 100%;
				color: #212121;
			}

			h5
			{
				color: inherit;
				font-size: 20px;
				margin: 0;
			}
		}
	}

	.slick_lomba_item
	{
		padding-bottom: 100px;
		width: 100%;
	}

	.slick_lomba_content
	{
		width: 100%;

		.pads_1
		{
			padding: 20px 50px 0 160px;	

			.conts
			{
				padding-bottom: 20px;
				margin-bottom: 20px;
				border-right: 1px solid #2121;
				border-bottom: 1px solid #2121;
				box-shadow: 15px 15px 1px 0 #fafafa;
			}
		}

		.pads_2
		{
			padding: 20px 50px 0 50px;	
		}

		.info
		{
			background-color: #00800026;
			margin-top: 0 !important;
			padding: 10px 50px !important;
			position: relative;

			i
			{
				position: absolute;
				top: 10px;
				left: 20px;
				font-size: 80px;
				color: #00350018;
			}
		}

		.owl-stage
		{
			width: 100%;

			.owl-item
			{
				.list_non_active
				{
					text-align: center;
					background-color: #ff8c0015;
					border-top-left-radius: 5px;
					border-top-right-radius: 25px;
					border-top: 15px solid #ff8c0015;
					border-right: 5px solid #ff8c0015;
					transition: 0.2s ease;
					cursor: pointer;

					p
					{
						font-size: 20px;
						margin: 0;
						padding: 10px;
					}

					&:hover
					{
						background-color: #ffcc8d;
						border-top: 15px solid #2121;
						border-right: 5px solid #2121;
						border-top-left-radius: 10px;
						border-top-right-radius: 50px;
						border-bottom-right-radius: 10px;
						color: #5c5c5c;
					}
				}

				.list_active
				{
					text-align: center;
					background-color: #ffcc8d;
					border-top: 15px solid #2121;
					border-right: 5px solid #2121;
					border-top-left-radius: 10px;
					border-top-right-radius: 50px;
					border-bottom-right-radius: 10px;
					transition: 0.2s ease;
					cursor: default;

					p
					{
						font-size: 20px;
						margin: 0;
						padding: 10px;
						color: #5c5c5c;
					}
				}
			}
		}

		.owl-nav
		{
			margin: 0;
		}
				
		.owl-prev
		{
			transition: all 0.2s ease;
			position: absolute;
			left: -40px;
			top: 40%;
			transform: translate(0, -50%);
			font-weight: bold;
			font-size: 20px;
			padding: 0px 10px;
			background-color: $main_color;

			&:hover
			{
				background-color: #ffcc8d;
			}
		}

		.owl-next
		{
			transition: all 0.2s ease;
			position: absolute;
			right: -40px;
			top: 40%;
			transform: translate(0, -50%);
			font-weight: bold;
			font-size: 20px;
			padding: 0px 10px;
			background-color: $main_color;

			&:hover
			{
				background-color: #ffcc8d;
			}
		}
		
		ol
		{
			margin: 0 20px;

			li
			{
				list-style: inherit;
			}
		}

		.list_sub_persyaratan
		{
			padding: 30px 30px;
			border: 1px solid #2121;
			box-shadow: 15px 15px 1px 0 #fafafa;
			min-height: 420px;

			.sub_atas
			{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.sub_pendaftar
				{
					background-color: white;
					padding: 5px 50px;
					height: 200px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					transition: all 0.2s ease;
					margin-right: 50px;
					border-right: 1px solid #2121;
					border-bottom: 1px solid #2121;
					box-shadow: 15px 15px 1px 0 #fafafa;
		
					i
					{
						font-size: 90px;
						color: $main_color;
						opacity: 0.2;
					}
				}

				.sub_persyaratan
				{
					flex: 1;
				}
			}

			.intro_keterangan_daftar
			{
				margin: 50px 0 0 0;
				padding: 0;
			}

			.btn-utama
			{
				padding: 5px 10px;
				width: auto;

				&:disabled
				{
					background-color: #ffcc8d;
					cursor: no-drop;
				}
			}
		}

		.owl-carousel .owl-stage{display: flex;}
		.ganti_persyaratan
		{
			display: flex;
			flex: 1 0 auto;
			height: 100%;
		}
		.ganti_persyaratan .box
		{
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
		}

		p
		{
			margin: 0;
		}
	}
}

.slick-next
{
	position: absolute;
	top: 40px;
	right: 140px;
	transform: translate(0, -40%);
	z-index: 1;
	transition: all 0.2s ease;
	font-weight: bold;
    font-size: 50px;
    padding: 0px 20px;
	vertical-align: middle;
	background-color: $main_color;
	border: none;
	color: white;
	box-shadow: 5px 5px 2px 0 #d3d3d3;
	outline: none;

	&:hover
	{
		background-color: #ffcc8d;
	}

	&:focus
	{
		outline: none;
	}
}

.slick-prev
{
	position: absolute;
	top: 40px;
    left: 140px;
	transform: translate(0, -40%);
	z-index: 1;
	transition: all 0.2s ease;
	font-weight: bold;
    font-size: 50px;
    padding: 0px 20px;
	vertical-align: middle;
	background-color: $main_color;
	border: none;
	color: white;
	box-shadow: 5px 5px 2px 0 #d3d3d3;

	&:hover
	{
		background-color: #ffcc8d;
	}

	&:focus
	{
		outline: none;
	}
}

.slick-disabled
{	
	background-color: #ffcc8d;
	cursor: no-drop !important;
}

.kosongan
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 50px;

	.ilustrasi
	{
		display: flex;
		align-items: center;
		justify-content: center;

		img
		{
			width: 20%;
			min-width: 300px;
		}
	}

	h4
	{
		margin-top: 30px;
		font-size: 30px;
		letter-spacing: 10px;
		text-align: center;
	}
}

.loading
{
	display: none;
}

.content_loading
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100px 0;

	h4
	{
		margin-top: 30px;
		font-size: 30px;
		letter-spacing: 10px;
		text-align: center;
	}
}

.content_sub_perlombaan
{
	.sub_perlombaan
	{
		padding-bottom: 45px;
		margin-top: 20px;
		margin-bottom: 0 !important;
		background-color: white;
		box-shadow: 15px 15px 1px 0 #efefef;

		#sub_perlombaan_header
		{
			background-color: #ff8c0015;
			color: #777777;
			position: relative;
			margin: 0 !important;
			padding: 15px 20px !important;

			h1
			{
				font-size: 25px; 
				margin: 0 60px 0 60px;
			}

			p
			{
				margin: 15px 60px 0 60px;

				.next_slick, .prev_slick
				{
					vertical-align: baseline;
					padding: 0px 10px 0px 9px;
				}
			}

			.numero
			{
				position: absolute;
				top: 0;
				left: 0;
				height: 110px;
				width: auto;
				padding: 5px 20px;
				background-color: white;
				border: 10px solid #ff8c0015; 
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
	
				h4
				{
					color: inherit;
					font-size: 30px;
					margin: 0;
				}
	
				hr
				{
					margin: 0;
					height: 5px;
					width: 100%;
					color: #212121;
				}
	
				h5
				{
					color: inherit;
					font-size: 20px;
					margin: 0;
				}
			}
		}

		.sub_perlombaan_close
		{
			position: absolute;
			top: -10px;
			right: -10px;
			width: 50px;
			height: 50px;
			font-size: 50px;
			background-color: #F44336;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease;
			cursor: pointer;
			color: #ffffff;
			border-radius: 5px;
	
			&:hover
			{
				background-color: #ba000d;
			}
		}
	}
	
	.sub_perlombaan:not(:first-child)
	{
		margin-top: 30px;
	}

	.slick-next
	{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -70%);
		z-index: 1;
		transition: all 0.2s ease;
		font-weight: bold;
		font-size: 40px;
    	padding: 0px 10px;
		vertical-align: middle;
		background-color: $main_color;
		border: none;
		color: white;
		box-shadow: 5px 5px 2px 0 #d3d3d3;
		outline: none;
	
		&:hover
		{
			background-color: #ffcc8d;
		}
	
		&:focus
		{
			outline: none;
		}
	}
	
	.slick-prev
	{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -70%);
		z-index: 1;
		transition: all 0.2s ease;
		font-weight: bold;
		font-size: 40px;
    	padding: 0px 10px;
		vertical-align: middle;
		background-color: $main_color;
		border: none;
		color: white;
		box-shadow: 5px 5px 2px 0 #d3d3d3;
	
		&:hover
		{
			background-color: #ffcc8d;
		}
	
		&:focus
		{
			outline: none;
		}
	}
}

.swal-pengecekan
{
	.swal-title
	{
		position: relative;
		background-color: #f1f1f1;
		border-bottom: 1px solid #dddddd;
		padding-top: 20px;
	
		&:first-child
		{
			margin: 0;
		}
		&:not(:last-child)
		{
			margin: 0;
		}
	}

	.swal-content
	{
		margin: 20px 0 50px 0;
		padding: 0;

		.list
		{
			display: flex;
			flex-direction: row;
			justify-content: start;
			margin: 10px 20px;
			padding: 5px 50px;

			.animasi_loader
			{
				width: 40px;
				padding: 0;
				margin: 0;
			}

			.animasi_sukses
			{
				width: 40px;
				display: none;
				padding-right: 10px;

				i
				{
					font-size: 20px;
					padding-top: 5px;
					vertical-align: bottom;
					width: 30px;
					color: #8BC34A;
				}
			}

			.animasi_error
			{
				width: 40px;
				display: none;
				padding-right: 10px;

				i
				{
					font-size: 20px;
					padding-top: 5px;
					vertical-align: bottom;
					width: 30px;
					color: #F44336;
				}
			}

			#text
			{
				flex: 1;

				h4
				{
					text-align: left;
					font-size: 25px;
					margin: 0;
					color: #808080;
				}
			}
		}
	}
}

#timer
{
	font-size: 50px;
}

.status_sukses
{
	transition: all 2s ease;
	background-color: #00800026;
}

.status_error
{
	transition: all 2s ease;
	background-color: #83000033;

	#form_text_error
	{
		color: #F44336;
	}
}

#error_pencarian
{
	color: #F44336;
}

.selectric
{
	height: 55px !important;
	border: 1px solid rgb(230, 230, 230) !important;

	.label
	{
		font-size: 1rem;
	}

	span
	{
		height: 55px !important;
		line-height: 55px !important;
		color: $main_black !important;
		text-align: left !important;
		font-size: 1rem;
	}

	.button
	{
		height: 55px !important;
	}

	&:hover
	{
		color: white;

		.label
		{
			color: white !important;
		}
	}
}

.selectric-items 
{
	ul
	{
		border: 1px solid rgb(230, 230, 230) !important;
		
		li
		{
			color: $main_black;
			text-align: left !important;
			font-size: 1rem;
		}
	}
}

.selectric-disabled
{
	.selectric
	{
		&:hover
		{
			.label
			{
				color: $main_black !important;
			}
		}
	}
}

.selectric-open, .selectric-focus
{
	color: white;

	.selectric
	{
		span
		{
			color: white !important;
		}

		.button
		{
			color: white !important;
		}
	}
}

.selectric-scroll
{
	ul
	{
		li
		{
			&:nth-child(even)
			{
				background-color: #fafafa;
			}
			
			&:nth-child(odd)
			{
				background-color: white;
			}

			&:hover:not(:disabled)
			{
				background-color: $main_color;
				color: white;
			}
		}
	}
}

.div_persyaratan_umum
{
	ol
	{
		padding: 0;
		margin: 0;

		li
		{
			padding: 2px 10px;
			position: relative;
			font-size: 14px;
			transition: all 0.2s ease;
			list-style: inherit;

			.hapus
			{
				position: absolute;
				right: -30px;
				top: 0;
				padding: 2px 10px;
				cursor: pointer;
				transition: all 0.2s ease;

				&:hover
				{
					background-color: #ED7B17;
					color: white;
				}
			}

			&:hover
			{
				background-color: rgb(255, 196, 144);
			}
		}
	}
}

.inputan_syarat_custom
{
	padding: 0 10px;
	height: 21px;
	width: 50px;
	text-align: center;
	border: 1px solid rgb(212, 212, 212);
}

.textarea_syarat_custom
{
	height: 100px;
	max-height: 100px;
	width: 100%;
	overflow-y: auto;	
	overflow-x: auto;
	white-space: nowrap;
	resize: none;
	padding: 8px 10px;
}

.slim_select
{
	border: none;
	height: 55px;
	padding: 0;

	&:hover
	{
		border: none;
	}

	.ss-single-selected
	{
		height: 100% !important;
		border-radius: none;
	}

	.ss-list div.ss-option
	{
		transition: all 0.2s ease;

		&:nth-child(even)
		{
			background-color: #fafafa;
		}
		
		&:nth-child(odd)
		{
			background-color: white;
		}
		
		&:hover
		{
			background-color: $main_color !important;
			color: white !important;
		}
	}

	.ss-arrow span
	{
		border: solid $main_color !important;
		border-width: 0 2px 2px 0 !important;
	}
}

#indicator_form
{
	padding: 0; 
	margin: 20px 0 0 0;

	#left_indicator_form
	{
		padding: 0; 
		margin: 0; 
		display: flex;
		justify-content: center;

		button
		{
			width: auto;
			padding: 0 20px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			i
			{
				font-size: 30px;
			}

			h4
			{
				margin: 0 0 0 20px;
				font-size: 18px;
			}
		}
	}

	#right_indicator_form
	{
		padding: 0; 
		margin: 0; 
		display: flex;
		justify-content: center;

		button
		{
			width: auto;
			padding: 0 20px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			i
			{
				font-size: 30px;
			}

			h4
			{
				margin: 0 20px 0 0;
				font-size: 18px;
			}
		}
	}
}

#upload_file_peserta, #cari_file_peserta, #cari_file_peserta_edit, #upload_file_peserta_edit
{
	color: white;
}

.nama_file
{
	cursor: default;

	&:hover, &:active, &:focus
	{
		border: 1px solid #e6e6e6;
	}
}

#info_form
{
	background-color: #00800026;
	margin-top: 0 !important;
	padding: 20px 20px !important;
	position: relative;
	
	ol
	{
		margin: 0 0 0 15px;
		padding: 0;
		display: block;

		li
		{
			list-style: inherit;
			padding-left: 10px;
		}
	}

	i:not(.btn_info_aja)
	{
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 200px;
		color: #00350018;
	}
}

#info_form_2
{
	background-color: #00800026;
	margin: 50px 0 0 0 !important;
	padding: 20px 20px !important;
	position: relative;

	div
	{
		margin: 0 !important;
	}
	
	ol
	{
		margin: 0 0 0 15px;
		padding: 0;
		display: block;

		li
		{
			list-style: inherit;
			padding-left: 10px;
		}
	}

	i
	{
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 100px;
		color: #00350018;
	}
}

#div_btn
{
	margin-top: 40px;
	padding-bottom: 200px;

	div
	{
		margin-top: 10px;
		position: relative;
		
		i
		{
			position: absolute;
			top: -20px;
			right: -130px;
			font-size: 80px;
			color: $main_color;
			opacity: 0.2;
			z-index: -1;
		}
	}
}

.div_gallery_foto_upload
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center;

	.items
	{
		width: 100px;
		height: 100px;
		margin: 10px;

		.btn_add_foto_gallery
		{
			width: 100%;
			height: 100%;

			.div_add_foto_gallery
			{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #e6e6e6;
				transition: all 0.2s ease;
				cursor: pointer;

				&:hover
				{
					background-color: #71bc42;
					color: white;
				}
			}
		}

		.image_upload
		{
			width: 100%;
			height: 100%;
			display: none;
			border: 1px solid #e6e6e6;

			img
			{
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
			}
		}
	}
}

#div_btn_login_registrasi
{
	margin-top: 40px;

	div
	{
		margin-top: 10px;
		position: relative;
		
		i
		{
			position: absolute;
			top: -20px;
			right: 110px;
			font-size: 80px;
			color: $main_color;
			opacity: 0.2;
			z-index: 0;
		}
	}
}

.link
{
	color: $main_color !important;
	transition: all 0.2s ease !important;
	cursor: pointer;

	&:hover
	{
		color: #ffcc8d !important;
	}
}

.btn_kalender
{
	width: 180px;
	min-width: 180px;
	transition: all 0.2s ease;
	cursor: pointer;
	background-color: white;
	box-shadow: 2px 2px 5px 0 #d3d3d3;
	border: 1px solid rgb(230, 230, 230);
	
	span
	{
		transition: all 0.2s ease;
		color: #939393;
	}

	i
	{
		transition: all 0.2s ease;
		margin-left: 10px;
		color: #939393;
	}

	&:hover
	{
		background-color: $main_color;
		color: white;
		border: 1px solid transparent;

		i
		{
			color: white;
		}
		
		span
		{
			color: white;
		}
	}
}

.btn_tambah_admin, .btn_pilih_bulan_tahun
{
	width: 240px;
	min-width: 180px;
	transition: all 0.2s ease;
	cursor: pointer;
	background-color: white;
	box-shadow: 2px 2px 5px 0 #d3d3d3;
	border: 1px solid rgb(230, 230, 230);
	display: inline-block;
	
	span
	{
		transition: all 0.2s ease;
		color: #939393;
		vertical-align: text-top;
	}

	i
	{
		transition: all 0.2s ease;
		margin-left: 10px;
		color: #939393;
	}

	&:hover
	{
		background-color: $main_color;
		color: white;
		border: 1px solid transparent;

		i
		{
			color: white;
		}
		
		span
		{
			color: white;
		}
	}
}

.pignose-calendar
{
	width: 400px !important;
	max-width: 400px !important;
}

#berita
{
	.content_berita
	{
		width: 100%;
		padding: 20px;
		background-color: white;
		border: 1px solid #f6f5f5;
		box-shadow: 0px 2px 1px 0 #d3d3d3;

		div
		{
			width: 100%;
			height: 200px;

			img
			{
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}

		h3
		{
			margin-top: 20px;
		}
	}
}

#profile
{
	.ftco-cover-1
	{
		height: 500px;
		min-height: 500px;

		.background_image
		{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: url("../images/surabaya_2.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			filter: blur(8px);
			z-index: -2;
		}
	}

	.div_info_profile
	{
		position: absolute;
		left: 50%;
		top: 300px;
		width: 900px;
		transform: translate(-50%, 0);

		.content_info
		{
			background-color: white;
			position: relative;
			width: 100%;
			min-height: 350px;
			padding: 0 20px;
			box-shadow: 15px 15px 1px 0 #efefef;
			

			.img_profile
			{
				position: absolute;
				top: -50px;
				left: 50px;
				width: 250px;
				height: 250px;
				padding: 10px;
				background-color: white;
				border: 1px solid #f6f5f5;
				box-shadow: 0px 2px 1px 0 #d3d3d3;

				img
				{
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			}

			.infonya
			{
				margin-left: 320px;
				padding-top: 20px;

				h4
				{
					font-size: 18px;
				}

				ul
				{
					margin-top: 20px;

					li
					{
						font-size: 20px;

						i
						{
							width: 35px;
							font-size: 25px;
						}
					}
				}
			}
			
			.menu
			{
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				width: 600px;

				ul
				{
					font-size: 0;

					li
					{
						display: inline-block;
						width: 200px;
						margin: 0;
						padding: 0;
						transition: all 0.2s ease;
						border: 1px solid #2121;

						&:hover 
						{
							border: 1px solid #ffcc8d;
							
							.list_menu_non_active
							{
								background-color: #ffcc8d;
								color: #f1f1f1;
							}
						}
					}
					
					.list_menu_non_active
					{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background-color: #ff8c0015;
						cursor: pointer;
						font-size: 15px;
						margin: 0;
						padding: 15px 10px 5px 10px;
						transition: all 0.2s ease;

						i
						{
							font-size: 35px;
							margin-bottom: 5px;
						}
					}

					.list_menu_active
					{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background-color: #ffcc8d;
						cursor: default;
						font-size: 15px;
						margin: 0;
						padding: 15px 10px 5px 10px;
						color: #5c5c5c;

						i
						{
							font-size: 35px;
							margin-bottom: 5px;
						}
					}
				}
			}
		}
	}
}

#div_list_pendaftaran
{
	padding-top: 80px;

	.container
	{
		background-color: white;
		padding: 50px 0 150px 0;
		border: 1px solid #f6f5f5;
		box-shadow: 0px 2px 1px 0 #d3d3d3;

		#list_kegiatan
		{
			font-size: 0;

			li
			{
				display: inline-block;
				width: 200px;
				font-weight: bold;
				border: 1px solid #f6f5f5;
				box-shadow: 0px 2px 1px 0 #d3d3d3;
			}
					
			.list_menu_non_active
			{
				background-color: #ff8c0015;
				transition: 0.2s ease;
				cursor: pointer;
				font-size: 20px;
				margin: 0;
				padding: 5px 10px;

				&:hover
				{
					background-color: #ffcc8d;
					color: #f1f1f1;
				}
			}

			.list_menu_active
			{
				background-color: #ffcc8d;
				transition: 0.2s ease;
				cursor: default;
				font-size: 20px;
				margin: 0;
				padding: 5px 10px;
				color: #5c5c5c;
			}
		}

		.list_content_pendaftaran
		{
			padding: 0 100px;

			.row
			{
				border: 1px solid #f6f5f5;
				box-shadow: 15px 15px 1px 0 #efefef;
				margin-top: 50px;

				// &:nth-child(odd)
				// {
				// 	background-color: #fffdf5;
				// }	

				#divs_image
				{
					padding: 0;
					background-color: #ff8c0010;
					border-right: 1px solid #f6f5f5;

					img
					{
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: center;
					}
				}

				#data_nope
				{
					padding: 50px 100px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					a
					{
						display: block;
						width: auto;
						padding: 10px 20px;
					}
				}

				#divs_keterangan
				{
					padding: 20px 30px 10px 30px;

					#header
					{
						font-size: 25px;
						margin: 0;
					}

					#tanggal_awal
					{
						font-size: 15px;
						margin: 0;
						color: $main_color;
					}

					.divs_kotakan
					{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 20px;

						.tanggals
						{
							margin-right: 3px;
						}

						.pendaftars
						{
							margin-left: 3px;
						}

						.tanggals, .pendaftars
						{
							border: 1px solid #f6f5f5;
							box-shadow: 0px 2px 1px 0 #d3d3d3;
							padding: 50px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background-color: white;
							height: 120px;
							transition: all 0.2s ease;
							position: relative;
							
							h1
							{
								font-size: 20px;
								text-align: center;
								font-weight: bold;
								margin: 0;
							}

							h4
							{
								margin: 10px 0 0 0;
								font-size: 17px;
								text-align: center;
								font-weight: normal;
							}

							i
							{
								position: absolute;
								top: 20px;
								left: 20px;
								font-size: 80px;
								color: $main_color;
								opacity: 0.2;
							}

							&:hover
							{
								background-color: #ff8b0088;
								border: 1px solid transparent;
								color: white;
							}
						}
					}
						
					.links
					{
						width: 100%;
						display: flex;
						margin-top: 20px;
						justify-content: flex-start;

						a
						{
							display: block;
							text-align: center;
							background-color: $main_color;
							border: none;
							outline: none;
							color: white;
							font-weight: bold;
							width: 200px;
							padding: 2px;
							transition: all 0.2s ease;
						
							&:hover
							{		
								background-color: #ffcc8d;
								color: white;
							}
						}
					}
				}
			}
		}
		
		#list_content_pendaftaran_perlombaan
		{
			display: none;
		}
	}
}

#info_detail_pendaftaran
{
	.ftco-cover-1
	{
		height: 500px;
		min-height: 500px;

		.background_image
		{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: url("../images/surabaya_2.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			filter: blur(8px);
			z-index: -2;
		}
	}

	.div_detail
	{
		position: absolute;
		left: 50%;
		top: 300px;
		width: 1000px;
		transform: translate(-50%, 0);

		.content_info
		{
			background-color: white;
			position: relative;
			width: 100%;
			padding: 0;
			box-shadow: 15px 15px 1px 0 #efefef;
			

			.img_profile
			{
				position: absolute;
				top: -50px;
				left: 50px;
				width: 250px;
				height: 250px;
				padding: 10px;
				background-color: white;
				border: 1px solid #f6f5f5;
				box-shadow: 0px 2px 1px 0 #d3d3d3;
				z-index: 1;

				img
				{
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: center;
				}
			}
		}

		.infonya
		{
			margin-left: 320px;
			padding-top: 20px;

			h2
			{
				margin: 0;
			}

			h4
			{
				font-size: 15px;
				margin: 0;
			}

			.status
			{
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: start;

				#title
				{
					font-size: 25px;
					color: #939393;
					font-weight: bold;
				}

				#nope
				{
					background-color: red;
					padding: 5px 20px;
					color: white;
					font-size: 18px;
					margin: 0 10px;
					font-weight: bold;
				}

				#finish
				{
					background-color: #00800026;
					padding: 5px 20px;
					color: #00350063;
					font-size: 18px;
					margin: 0 10px;
					font-weight: bold;
				}
				
				#selesai
				{
					background-color: #00800026;
					padding: 5px 20px;
					color: #00350063;
					font-size: 18px;
					font-weight: bold;
					transition: all 0.2s ease;
					cursor: pointer;

					&:hover
					{
						background-color: #0080007f;
						color: white;
					}
				}
				
				#cetak a
				{
					display: block;
					background-color: $main_color;
					padding: 5px 20px;
					color: white;
					font-size: 18px;
					font-weight: bold;
					transition: all 0.2s ease;
					cursor: pointer;

					&:hover
					{
						background-color: #d67600;
						color: white;
					}
				}
			}
		}

		#info_form
		{
			background-color: #00800026;
			margin-top: 10px !important;
			padding: 30px 20px 20px 20px !important;
			position: relative;
			
			ol
			{
				margin: 0 0 0 15px;
				padding: 0;
				display: block;
		
				li
				{
					list-style: inherit;
					padding-left: 10px;
				}
			}
		
			i:not(.btn_info_aja)
			{
				position: absolute;
				bottom: 0px;
				right: 20px;
				font-size: 210px;
				color: #00350018;
			}

			.btn_info_aja
			{
				color: white;
				padding: 5px;
				text-align: center;
				background-color: $main_color;
				width: 30px;
			}
			
			.fa-user-edit
			{
				background-color: #7cb342;
			}
			
			.fa-user-times, .fa-info-circle, .fa-trash
			{
				background-color: #f44336;
			}
		}
	}
}

#div_detail_pendaftaran
{
	margin-top: 300px;
	margin-bottom: 300px;
	z-index: 999999;

	.container
	{
		background-color: white;
		padding: 0;
		border: 1px solid #f6f5f5;
		box-shadow: 0px 2px 1px 0 #d3d3d3;

		#div_detail_pendaftaran_header
		{
			background-color: #f1f1f1;
			padding: 20px;
			margin: 20px 20px 0 20px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			h2
			{
				font-size: 30px;
				margin: 0;
				color: #5b5b5b;
				text-align: center;
			}

			a
			{
				padding: 10px 20px;
				width: 200px;
				margin-top: 5px;
				display: block;

				i
				{
					margin-right: 10px;
				}
			}
		}

		.div_dataTable
		{
			margin: 0;
			padding: 20px 10px;
	
			table
			{
				width: 100%;

				#masih_ada
				{
					padding: 5px 15px;
					background-color: #7cb342;
					color: white;
				}

				#sudah_full
				{
					padding: 5px 15px;
					background-color: #F44336;
					color: white;
				}
	
				.btn-utama
				{
					font-size: 17px;
					padding: 0px 10px;
					width: 50px;
					text-align: center;
				}
			}

			.btn_info
			{
				padding-left: 0 !important;
				padding-right: 5px !important;
			}
			
			.btn_edit
			{
				padding-left: 0 !important;
				padding-right: 5px !important;

				.btn-utama
				{
					background-color: #7cb342;
					color: white;
					transition: all 0.2s ease;
					display: block;
			
					&:hover
					{
						background-color: #aee571;
					}

					&:disabled
					{
						background-color: #aee571;
					}
				}
			}

			.btn_delete
			{
				padding-left: 0 !important;
				padding-right: 10px !important;
			
				.btn-utama
				{
					background-color: #f44336;
					color: white;
					display: block;
					transition: all 0.2s ease;
			
					&:hover
					{
						background-color: #ff7961;
					}

					&:disabled
					{
						background-color: #ff7961;
					}
				}
			}
		}
	}
}

div.dataTables_wrapper div.dataTables_filter input
{
	height: 30px;
}

.div_tampilan_kalender
{
	#list_tab
	{
		width: 100%;
		font-size: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		li
		{
			display: inline-block;
			width: 200px;
			font-weight: bold;
			border: 1px solid #f6f5f5;
			box-shadow: 0px 2px 1px 0 #d3d3d3;
			text-align: center;
		}
				
		.list_menu_non_active
		{
			background-color: #ff8c0015;
			transition: 0.2s ease;
			cursor: pointer;
			font-size: 20px;
			margin: 0;
			padding: 5px 10px;

			&:hover
			{
				background-color: #ffcc8d;
				color: #f1f1f1;
			}
		}

		.list_menu_active
		{
			background-color: #ffcc8d;
			transition: 0.2s ease;
			cursor: default;
			font-size: 20px;
			margin: 0;
			padding: 5px 10px;
			color: #5c5c5c;
		}
	}
}

.content_kalender
{
	table
	{
		border-collapse: collapse;

		thead
		{
			th
			{
				background-color: #c8c8c881;
				border: 1px solid rgb(240, 240, 240);
				color: rgb(85, 76, 76);

				h5
				{
					font-size: 13px;
					font-weight: bold;
				}
			}

			#weekend
			{	
				background-color: #ef535010;
			}
		}

		tbody
		{
			td
			{
				min-width: 180px;
				height: 150px;
				border: 1px solid rgb(240, 240, 240);
				transition: all 0.2s ease;
				position: relative;
				font-size: 13px;

				&:hover:not(#tanggal_sebelumnya)
				{
					background-color: #ff8c0028;
				}

				#tanggalnya
				{
					position: absolute;
					top: 10px;
					left: 10px;
					font-size: 15px;
					font-weight: bold;
					background-color: #00800026;
					padding: 2px 2px;
					width: 40px;
					border-radius: 5px;
					box-shadow: 2px 2px 1px 0 #d3d3d3;
					color: rgb(85, 76, 76);
				}

				ol
				{
					margin: 30px 0 0 0;
					
					li
					{
						margin-top: 2px;
						text-align: left;
						cursor: pointer;
					}
				}

				.perlombaan_published
				{
					padding: 0px 10px;
					background-color: #7cb342;
					color: white;
					transition: all 0.2s ease;

					&:hover
					{
						text-decoration: underline;
						background-color: #aee571;
					}
				}
	
				.perlombaan_nope_published
				{
					padding: 0px 10px;
					background-color: #03a9f4;
					color: white;
					transition: all 0.2s ease;

					&:hover
					{
						text-decoration: underline;
						background-color: #81d4fa;
					}
				}
			}

			#tanggal_weekend
			{
				background-color: #ef535010;

				#tanggalnya
				{
					background-color: #ff04003f;
					box-shadow: 2px 2px 1px 0 #b4b4b4;
				}
			}

			#tanggal_sebelumnya
			{
				background-color: #c8c8c84f;

				#tanggalnya
				{
					background-color: white;
					color: rgb(156, 156, 156);
				}
			}
		}
	}
}

.content_datatable
{
	display: none;
}

#sukses_img
{
	width: 400px;
}
	
#div_promo
{
	padding-top: 150px;
	
	.splide__list
	{
		li
		{
			padding: 0 100px;
		}
	}
}

// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------------------------------------------------------------------

@media only screen and (max-width: 1000px)
{
	.modal_detail
	{
		width: 90%;

		.modal_detail_content
		{
			.detail_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 30px;
				}
			}
		}
	}
}

@media only screen and (max-width: 920px)
{
	.modal_selesai
	{
		width: 90%;

		.modal_selesai_content
		{
			.selesai_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 30px;
				}
			}
		}
	}
}

@media only screen and (max-width: 935px) 
{
	.slick-slide .slick_lomba_content .list_sub_persyaratan 
	{
		.sub_atas
		{
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.sub_pendaftar
			{
				margin: 0;
				width: 200px;
				background-color: white;
				border: 1px solid #f6f5f5;
				box-shadow: 0px 2px 1px 0 #d3d3d3;
			}
		}
		
		.sub_persyaratan
		{
			margin-top: 20px;
		}
	}
}

@media only screen and (max-width: 900px)
{
	#div_promo
	{
		.container-fluid
		{
			padding: 0;
			
			.col-md-12
			{
				padding: 0 5px;
			}

			.splide__list
			{
				li
				{
					padding: 0;
				}
			}
		}
	}
}

@media only screen and (max-width: 770px)
{
	.modal_pembatalan
	{
		width: 90%;

		.modal_pembatalan_content
		{
			.pembatalan_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 30px;
				}
			}
		}
	}
}

@media only screen and (max-width: 630px)
{
	.modal_pembatalan
	{
		.modal_pembatalan_content
		{
			.pembatalan_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 25px;
				}
			}

			.pembatalan_close
			{
				width: 30px !important;
				height: 30px !important;
				font-size: 25px !important;
			}
		}
	}
}

@media only screen and (max-width: 600px)
{
	.modal_detail
	{
		.modal_detail_content
		{
			.detail_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 25px;
				}
			}

			.detail_close
			{
				width: 30px !important;
				height: 30px !important;
				font-size: 25px !important;
			}
		}
	}
}

@media only screen and (max-width: 520px)
{
	.modal_pembatalan
	{
		width: 100%;

		.modal_pembatalan_content
		{
			.pembatalan_title
			{
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 20px;
				}
			}

			.pembatalan_content
			{
				padding: 10px 5px 50px 5px;
			}

			.pembatalan_close
			{
				width: 30px !important;
				height: 30px !important;
				font-size: 20px !important;
			}
		}
	}
}

@media only screen and (max-width: 440px)
{
	#sukses_img
	{
		width: 300px;
	}
}

@media only screen and (max-width: 410px)
{
	.modal_detail
	{
		width: 100%;

		.modal_detail_content
		{
			.detail_title
			{
				height: 5%;
				justify-content: flex-start;
				padding-left: 20px;

				h1
				{
					font-size: 20px;
				}
			}

			.detail_close
			{
				width: 20px !important;
				height: 20px !important;
				font-size: 25px !important;
			}

			.detail_content
			{
				height: 95%;
				max-height: 95%;
			}
		}
	}

	.modal_pembatalan
	{
		.modal_pembatalan_content
		{
			.pembatalan_title
			{
				justify-content: flex-start;
				padding-left: 20px;
				padding-right: 50px;
			}
		}
	}
}

@media only screen and (max-width: 340px)
{
	#sukses_img
	{
		width: 200px;
	}
}

// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------- ANIMASI -----------------------------------------------------------------------------------------------------------------------------------
@keyframes down_up
{
	0% { top: 30%; }
	50% { top: 55%; }
	100% { top: 50%; }
}

.down_up
{
	animation: down_up 0.5s ease forwards;
}

@keyframes down_up_close
{
	0% { top: 50%; }
	100% { top: 70%; }
}

.down_up_close
{
	animation: down_up_close 0.5s ease forwards;
}
@keyframes modal_gallery_open
{
	0% { top: 30%; }
	50% { top: 55%; }
	100% { top: 50%; }
}

.modal_gallery_open
{
	animation: modal_gallery_open 0.5s ease forwards;
}

@keyframes modal_gallery_close
{
	0% { top: 50%; }
	100% { top: 70%; }
}

.modal_gallery_close
{
	animation: modal_gallery_close 0.5s ease forwards;
}


// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// ------------------------------------------------------------- LOADER ------------------------------------------------------------------------------------------------------------------------------------
@keyframes ldio-gcefs0otrm 
{
	0% { transform: rotate(0deg) }
	50% { transform: rotate(180deg) }
	100% { transform: rotate(360deg) }
}

.ldio-gcefs0otrm div 
{
	position: absolute;
	animation: ldio-gcefs0otrm 1.1600000000000001s linear infinite;
	width: 80px;
	height: 80px;
	top: 10px;
	left: 10px;
	border-radius: 50%;
	box-shadow: 0 4.4px 0 0 $main_color;
	transform-origin: 40px 42.2px;
}

.loadingio-spinner-eclipse-ebjboqqcsm 
{
	width: 100px;
	height: 100px;
	display: inline-block;
	overflow: hidden;
	background: none;
}

.ldio-gcefs0otrm 
{
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
}

.ldio-gcefs0otrm div { box-sizing: content-box; }

.loading_elipsis {display: none;}
.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 107px;
  }
  .lds-ellipsis div {
	position: absolute;
	top: 50px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: $main_color;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
	0% {
	  transform: scale(0);
	}
	100% {
	  transform: scale(1);
	}
  }
  @keyframes lds-ellipsis3 {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0);
	}
  }
  @keyframes lds-ellipsis2 {
	0% {
	  transform: translate(0, 0);
	}
	100% {
	  transform: translate(24px, 0);
	}
  }
  
@keyframes ldio-jilsgzgnb7f {
	0% { opacity: 1 }
	100% { opacity: 0 }
  }
  .ldio-jilsgzgnb7f div {
	left: 47px;
	top: 24px;
	position: absolute;
	animation: ldio-jilsgzgnb7f linear 1s infinite;
	background: $main_color;
	width: 6px;
	height: 12px;
	border-radius: 3px / 6px;
	transform-origin: 3px 26px;
  }.ldio-jilsgzgnb7f div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -0.9166666666666666s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -0.8333333333333334s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.75s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.6666666666666666s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.5833333333333334s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.5s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.4166666666666667s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.3333333333333333s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.25s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.16666666666666666s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.08333333333333333s;
	background: $main_color;
  }.ldio-jilsgzgnb7f div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
	background: $main_color;
  }
  .loadingio-spinner-spinner-67y306xuze6 {
	width: 30px;
	height: 30px;
	display: inline-block;
	overflow: hidden;
	background: transparent;
  }
  .ldio-jilsgzgnb7f {
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(0) scale(0.3);
	backface-visibility: hidden;
	transform-origin: 0 0; /* see note above */
  }
  .ldio-jilsgzgnb7f div { box-sizing: content-box; }
  
// @media only screen and (max-width: 991px) 
// {
// 	#deskripsi
// 	{
// 		display: none;
// 	}

// 	#deskripsi_mobile
// 	{
// 		display: block;
// 	}
// }