/* ======= Dark Light Button Implementation =======*/

.toggle {
	--size: 1.4rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	width: var(--size);
	height: var(--size);
	box-shadow: inset calc(var(--size) * 0.40) calc(12px * -0.2) 0;
	border-radius: 999px;
	color: #000;
	transition: all 500ms;
}

.toggle:checked {
	--ray-size: calc(var(--size) * -0.4);
	--offset-orthogonal: calc(var(--size) * 0.65);
	--offset-diagonal: calc(var(--size) * 0.45);
	transform: scale(0.75);
	color: #fff;
	box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
}

.toggle {
	z-index: 1;
}

.toggle:checked ~ .background {
	--bg: white;
}

.toggle:checked ~ .title {
	--color: hsl(40, 100%, 50%);
}

.darkmode_checkbox {
	display: none;
}

.switch {
	background-color: rgba(0,0,0,.1);
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 30px;
	width: 55px;
  /* Scale the size to your need */
	transform: scale(0.7);
}

.switch .ball {
	background-color: var(--color_button);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: 26px;
	width: 26px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
}

.darkmode_checkbox:checked + .switch .ball {
	transform: translateX(24px);
}

.fa-moon {
	color: #fff;
}

.fa-sun {
	color: #000;
}

body.dark-theme {
	background: #16151d;
	color: #CCC;
}

.dark-theme header {
	background: var(--color-base-black);
	border-bottom: 1px solid #0b0a0d;
}

.dark-theme .site-nav .item > a {
	color: #fff !important;
}

.dark-theme .header-search-desktop-input, .dark-theme textarea#comment {
	color: #fff;
	background-color: #17151b;
	background-image: none;
	border: 1px solid #23202a;
}

.dark-theme .header-link-c {
	color: #fff!important;
}

.dark-theme .theme-dropdown-content, .dark-theme .header-search-result {
	color: #fff;
	background-color: #17151b;
	background-image: none;
	border: 1px solid #23202a;
}

.dark-theme .app-card-title a, .dark-theme .editor-content.text-gray-800 p {
	color: #fff;
}

.dark-theme .editor-content.text-gray-800 a, .dark-theme .read-more-area-content a {
	color: var(--text_blue);
}

.dark-theme .theme-dropdown-list li:not(:last-child) a {
	border-bottom: 1px solid #23202a;
}

.dark-theme .adB {
	background: #17151b;
	color: #fff;
	border: 2px dashed #fff;
}

.dark-theme section.border-gray {
	border-color: #23202a;
}

.dark-theme .chip-category {
	background-color: var(--color-base-black);
	color: #fff;
}

.dark-theme .chip-category, .dark-theme section.breadcrumb {
	background-color: #16151d;
	color: #fff;
}

.dark-theme .slider-nav::before {
	background: #23202a;
	color: #fff;
}

.dark-theme .text-black, .dark-theme .text-gray h1, .dark-theme .text-gray h2, .dark-theme .text-gray h3, .dark-theme .text-gray h4, .dark-theme .text-gray h5, .dark-theme .section-heading .font-semibold, .dark-theme .text-gray {
	color: #fff!important;
}

.dark-theme .flex.gap-4 svg path, .dark-theme .modal-close svg path {
	fill: #fff!important;
}

.dark-theme nav.breadcrumb p::before {
	content: "";
	border: solid #fff;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 2px;
	transform: rotate(-35deg);
	-webkit-transform: rotate(-35deg);
	margin: 0 8px 2px 8px;
}

.dark-theme .owl-modal-content {
	color: #fff;
	background-color: var(--color-base-black);
}

.dark-theme .bg-gray {
	color: #fff;
	background-color: #16151d;
}

.dark-theme .badge-title, .dark-theme .page-link {
	color: #fff;
}

.dark-theme div.border.border-gray-400.border-solid.p-3.rounded-4.text-gray-700.block, .dark-theme .blog-container h1, .dark-theme .blog-container h2, .dark-theme .blog-container h3, .dark-theme .blog-container h4, .dark-theme .blog-container h5, .dark-theme .lg\:fs-subtitle {
	color: #fff!important;
}

.dark-theme .bg-white {
	background-color: var(--color-base-black);
}

@media (max-width: 1199.98px) {
	.dark-theme .horizontal-menu .nav-bar, .dark-theme .mobile-nav-header {
		background: var(--color-base-black);
		color: #fff;
	}

	.dark-theme .mobile-nav-title {
		color: #fff;
	}

	.dark-theme .header-search-desktop-outer {
		background-color: var(--color-base-black);
		color: #fff;
		border-bottom: 1px solid var(--color-base-black);
	}

	.dark-theme .site-nav .item > a {
		border-bottom: 1px solid var(--color-base-black);
	}
}

.dark-theme .auth-section {
	background-color: #16151d;
	color: #fff;
	background-image: unset;
}

.dark-theme .login-button-fixed {
	background: var(--color-base-black);
	box-shadow: 0 1px 5px 5px #16151d20;
	color: #fff;
}

.dark-theme .login-button-fixed a, .dark-theme .panel-body a {
	color: #fff;
}

.dark-theme .login-button-fixed::after {
	border: 5px solid var(--color-base-black);
	border-bottom-color: rgba(255, 255, 255, 0);
	border-bottom-color: var(--color-base-black);
}
.dark-theme .panel {
	background: var(--color-base-black);
}

.dark-theme .border-default-light {
  border: solid 1px var(--color-base-black);
}