.page-link {
	width: auto !important;
	padding: 5px;
}

@keyframes floating {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

.whatsapp-float {
	position: fixed;
	bottom: 20px;
	left: 20px;
	/* Tombol di kiri */
	z-index: 1000;
	background-color: #25d366;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	animation: floating 3s ease-in-out infinite;
	/* Tambahkan animasi floating */
	transition: transform 0.3s ease-in-out;
}

.whatsapp-float img {
	width: 35px;
	height: 35px;
}

.whatsapp-float:hover {
	transform: scale(1.1);
	/* Efek zoom saat hover */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Custom Colors */
.dropdown-item:hover,
.dropdown-item:focus {
	color: var(--custom-primary-color);
}
.link-dark:hover,
a.text-reset:hover,
.text-reset a:hover {
	color: var(--custom-primary-color) !important;
}

/* Dark Mode Hack */
/* .content-wrapper agar hanya diterapkan dalam konten halaman */
.dark-mode .content-wrapper {
	background-color: #212529;
	color: white;
}

.dark-mode .content-wrapper .bg-light {
	background-color: #212529 !important;
	color: white !important;
}

/* Heading */
.dark-mode .content-wrapper h1:not(.no-dark-mode),
.dark-mode .content-wrapper h2:not(.no-dark-mode),
.dark-mode .content-wrapper h3:not(.no-dark-mode),
.dark-mode .content-wrapper h4:not(.no-dark-mode),
.dark-mode .content-wrapper h5:not(.no-dark-mode),
.dark-mode .content-wrapper h6:not(.no-dark-mode) {
	/* color: #b5d0ff !important; */
	color: var(--custom-primary-dark-color) !important;
}

.dark-mode .content-wrapper .text-dark:not(.no-dark-mode),
.dark-mode .content-wrapper .link-dark,
.dark-mode .content-wrapper .link-body {
	color: #fab758 !important;
}

/* .post-header h1 untuk heading halaman */
.dark-mode .content-wrapper .post-header h1 {
	color: #fff !important;
}

/* .modal-dialog untuk heading dalam modal */
.dark-mode .content-wrapper .modal-dialog h1,
.dark-mode .content-wrapper .modal-dialog h2,
.dark-mode .content-wrapper .modal-dialog h3,
.dark-mode .content-wrapper .modal-dialog h4,
.dark-mode .content-wrapper .modal-dialog h5,
.dark-mode .content-wrapper .modal-dialog h6 {
	color: #343f52 !important;
}

.dark-mode .content-wrapper .modal-dialog .text-dark {
	color: #343f52 !important;
}

/* Navbar */
.dark-mode .navbar.fixed {
	background-color: #212529 !important;
	color: white !important;
}

.dark-mode .navbar.fixed .hamburger {
	filter: brightness(0) invert(1);
}

.dark-mode .nav-link {
	color: white !important;
}

/* min-width agar hanya diterapkan saat navbar-expand-lg */
@media (min-width: 992px) {
	.dark-mode .nav-item .dropdown-menu {
		background-color: #212529 !important;
	}
	.dark-mode .nav-item .dropdown-item {
		color: white;
	}
	.dark-mode .nav-item .dropdown-item:hover {
		color: var(--custom-primary-dark-color);
	}
}

/* Counter */
.dark-mode .content-wrapper .bg-soft-primary {
	background-color: #2d2e30 !important;
}

.dark-mode .content-wrapper .wrapper.bg-soft-primary.angled.lower-start::after,
.dark-mode
	.content-wrapper
	.wrapper.bg-soft-primary.angled.upper-start::before {
	border-left-color: #2d2e30;
}

/* Card */
.dark-mode .content-wrapper .card {
	background-color: #212529 !important;
	color: white !important;
}

/* Icon */
.dark-mode .content-wrapper .icon-svg {
	filter: invert(1) sepia(1) saturate(5) brightness(2) hue-rotate(10deg);
}

.dark-mode .content-wrapper .social:not(.no-dark-mode) .uil,
.dark-mode .content-wrapper .social:not(.no-dark-mode) svg {
	filter: invert(1) sepia(1) saturate(5) brightness(2) hue-rotate(10deg);
}

/* Background Decoration */
.dark-mode .content-wrapper .bg-decoration {
	background-color: #373531 !important;
}

/* Post */
.post .post-content {
	color: black !important;
}

.dark-mode .content-wrapper .post .post-content {
	color: white !important;
}

.dark-mode .content-wrapper .post-category.text-line:not(.text-white)::before {
	background: var(--custom-primary-dark-color);
}

.dark-mode .content-wrapper .post-category.text-line:not(.text-white) a {
	color: var(--custom-primary-dark-color);
}

/* Hashtag */
.dark-mode .content-wrapper .btn-soft-ash {
	background-color: #eeeff0;
}

/* Input */
.dark-mode .content-wrapper .form-control {
	background-color: #212529 !important;
	color: white !important;
	border-color: #495057 !important;
}

.dark-mode .content-wrapper .form-control:focus {
	border-color: #9fbcf0;
}

.dark-mode .content-wrapper .form-control option {
	color: white !important;
}

/* Pagination */
.dark-mode .content-wrapper .pagination .page-link {
	background-color: #212529 !important;
	border-color: #212529 !important;
}

/* Table */
.dark-mode .content-wrapper table th,
.dark-mode .content-wrapper table td {
	color: white !important;
}

/* .span_wrapper untuk panah sort */
.dark-mode .content-wrapper table th[data-sortby] .span_wrapper {
	filter: invert(1);
}

/* Social Media */
.dark-mode .content-wrapper .post-card,
.dark-mode .content-wrapper .ig-card,
.dark-mode .content-wrapper .youtube-card {
	border-color: #1b1f22 !important;
}

/* .dark-mode .content-wrapper .post-caption, */
.dark-mode .content-wrapper .ig-caption/*,
.dark-mode .content-wrapper .youtube-caption*/ {
	background-color: #1b1f22 !important;
}

.dark-mode .content-wrapper .post-title {
	/* color: #b5d0ff !important; */
	color: var(--custom-primary-dark-color) !important;
}

/* .dark-mode .content-wrapper .title-link {
	color: white;
} */

.dark-mode .content-wrapper .title-link:hover {
	/* color: #3f78e0; */
	color: var(--custom-primary-dark-color);
}

/* Share */
.dark-mode .content-wrapper .dropdown-menu {
	background-color: #212529 !important;
}

.dark-mode .content-wrapper .dropdown-item {
	color: white;
}

.dark-mode .content-wrapper .dropdown-item:hover {
	color: var(--custom-primary-dark-color);
}

/* Video */
.video-text {
	color: black !important;
}

.dark-mode .content-wrapper .video-text {
	color: white !important;
}

.dark-mode .read-more-link,
.dark-mode .read-more-link:hover {
	color: var(--custom-primary-dark-color);
}
