:root {
	--color-primary: #1A75BB;
	--color-text-primary: #353535;
	--arrow-top: 20px;
}

.site-footer {
	z-index: 888;
}

.king-leftmenu {
	position: fixed;
	top: 0 !important;
	z-index: 12;
	padding-right: 0 !important;
	padding-left: 0 !important;
	padding-top: 137px !important;
	padding-bottom: 500px !important;
	height: 100vh !important;
	left: unset !important;
	visibility: visible !important;
	min-width: unset !important;
	max-width: unset !important;
	width: 90px !important;
	opacity: 1;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	box-shadow: 0px 4px 4px 0px #00000040;

	&::-webkit-scrollbar {
		display: none;
	}

	.menu-item {
		margin-bottom: 10px;
		padding: 10px 3px;
		border-radius: 10px;
		background: inherit;
		cursor: pointer;

		a {
			display: flex;
			flex-direction: column;
			line-height: 1;
			font-size: 13px;
			transition: font-size 0.4s ease-in;
			text-align: center;
			color: var(--color-text-primary);

			span:first-child {

				&:has(i),
				&:has(img) {
					margin-bottom: 10px;
				}

				i {
					margin: 0 !important;
				}

				i,
				&:has(img) {
					width: 35px;
					height: 35px;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					background: #F5F6F8;
					border-radius: 10px;
				}

				img {
					width: 65%;
				}
			}

			span:last-child {
				transition: letter-spacing 0.3s ease-out, text-shadow 0.3s ease-out;
			}
		}
	}

	.menu-item.menu-item-has-children::after {
		content: '';
		position: absolute;
		top: 0;
		right: -20px;
		width: 40px;
		height: 100%;
	}

	.menu-item.menu-item-has-children::before {
		margin-right: 10px;
		visibility: hidden;
	}

	.current-menu-ancestor,
	.current-menu-parent,
	.current-menu-item,
	.menu-item:hover {
		background: linear-gradient(to bottom, #cae7ff 0%, #f0f9ff 100%);

		>a {
			>span:first-child {

				i,
				&:has(img) {
					background: #ffff;
					box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px;
				}

				i {
					color: var(--color-primary);
				}

				img {
					filter: brightness(0) saturate(100%) invert(34%) sepia(97%) saturate(831%) hue-rotate(176deg) brightness(89%) contrast(89%);
				}
			}

			>span:last-child {
				letter-spacing: .3px;
				text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
			}
		}
	}

	.current-menu-ancestor>a,
	.current-menu-parent>a,
	.current-menu-item>a {
		font-weight: normal;
	}

	.menu-item-has-children .sub-menu {
		position: fixed;
		min-width: 240px;
		width: fit-content;
		max-width: 400px;
		margin: 0;
		border-radius: 10px;
		padding: 15px 15px 15px 20px;

		.menu-item {
			padding: 10px 14px;
			border-left: 3px solid var(--color-primary);
			border-radius: 10px;

			a {
				display: block;
				text-align: left;
			}
		}

		.menu-item:first-child {
			margin-top: 0;
		}

		.menu-item:last-child {
			margin-bottom: 0;
		}

		.current-menu-ancestor,
		.current-menu-parent,
		.current-menu-item,
		.menu-item:hover {
			background: linear-gradient(to right, #cae7ff 0%, #f0f9ff 100%);
		}
	}

	.menu-item-has-children .sub-menu::before {
		content: '';
		position: absolute;
		left: -10px;
		top: var(--arrow-top);
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 12px solid white;
		filter: drop-shadow(-2px 1px 2px rgba(0, 0, 0, 0.1));
	}

	#menu-leftmenu,
	#menu-leftmenu-khmer-cambodia {
		>.menu-item:first-child {
			margin-top: 10px;
		}
	}

	.king-mobile-search {
		display: none !important;
	}
}

body:has(#wpadminbar) {
	.king-leftmenu {
		padding-top: 169px !important;
	}

	&:has(.king-header-topbar.is-hidden) {
		.king-leftmenu {
			padding-top: 119px !important;
		}
	}
}

body:not(:has(#wpadminbar)) {
	&:has(.king-header-topbar.is-hidden) .king-leftmenu {
		padding-top: 87px !important;
	}
}

.header-template-09 .king-leftmenu {
	padding-bottom: 0;
}

.admin-bar .king-leftmenu {
	margin-top: 0;
}

.menu-item a {
	align-items: center;
	text-decoration: none !important;
}

.king-leftmenu:has(.reorder-row) {
	width: 240px !important;

	.menu-item {
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px 10px;

		a {
			flex-direction: row;
			font-size: 15px;
			white-space: nowrap;

			span:first-of-type {
				margin-right: 10px;
				margin-bottom: 0 !important;
			}
		}
	}

	.current-menu-ancestor,
	.current-menu-parent,
	.current-menu-item,
	.menu-item:hover {
		background: linear-gradient(to right, #cae7ff 0%, #f0f9ff 100%);
	}

	.menu-item-has-children .sub-menu {
		margin-left: 10px;

		.menu-item {
			padding: 10px 14px;
		}
	}

	.menu-item.menu-item-has-children::before {
		visibility: visible;
		transform: rotate(-90deg);
		margin: 0;
		right: 10px;
		top: 27%;
	}

	.menu-item:has(.sectionlabel) {
		.sectionlabel {
			font-size: 10px !important;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 5px !important;
			white-space: nowrap;
		}
	}
}

.king-leftmenu .menu-item:has(.sectionlabel) {
	background: none !important;
	padding-bottom: 0;
	cursor: unset;

	.sectionlabel {
		font-size: 8px !important;
		text-shadow: none !important;
		letter-spacing: unset !important;
		margin-bottom: 5px;
		margin-left: -5px;
		margin-right: -5px;
		transition: font-size 0.4s ease-in;
	}

	>a {
		margin: 0 5px;
		border-bottom: 1px solid transparent;
		border-image-source: linear-gradient(to bottom right, #b6b6b6, #f3f3f3);
		border-image-slice: 1;
		cursor: unset;
	}
}

.king-header {
	padding: 0;
}

.site-header .king-header-topbar {
	opacity: 1 !important;
}

.king-header,
.site-header .king-header-topbar {
	transition: transform 0.3s ease-in-out;
}

.king-leftmenu-toggle-v2 {
	width: 90px;
	padding-left: 35px;
}

body {
	position: relative;
}

@media (max-width: 767px) {
	.header-template-09 .king-leftmenu {
		left: -300px !important;
    }

	.king-leftmenu {
		width: 240px !important;
		-webkit-transition: all 0.8s cubic-bezier(.46, .03, .52, .96) !important;
		-moz-transition: all 0.8s cubic-bezier(.46,.03,.52,.96) !important;
		transition: all 0.4s cubic-bezier(.46, .03, .52, .96) !important;


		.menu-item {
			margin-left: 10px;
			margin-right: 10px;
			padding: 10px 10px;

			a {
				flex-direction: row;
				font-size: 15px;
				white-space: nowrap;

				span:first-of-type {
					margin-right: 10px;
					margin-bottom: 0 !important;
				}
			}
		}

		.current-menu-ancestor,
		.current-menu-parent,
		.current-menu-item,
		.menu-item:hover {
			background: linear-gradient(to right, #cae7ff 0%, #f0f9ff 100%);
		}

		.menu-item-has-children .sub-menu {
			margin-left: 10px;

			.menu-item {
				margin-left: 0;
				margin-right: 0;
				padding: 10px 14px;
			}
		}

		.menu-item.menu-item-has-children::before {
			visibility: visible;
			transform: rotate(-90deg);
			margin: 0;
			right: 10px;
			top: 27%;
		}

		.menu-item:has(.sectionlabel) {
			.sectionlabel {
				font-size: 10px !important;
				margin-left: 0;
				margin-right: 0;
				margin-bottom: 5px !important;
				white-space: nowrap;
			}
		}
	}

	.king-leftmenu:has(.reorder-row) {
		left: 0 !important;
	}

	.menu-item-has-children .sub-menu {
		min-width: 200px !important;
		width: fit-content !important;
        max-width: 80% !important;
	}

	.moved-sub-menu-leftsidebar.sub-menu {
		margin-left: 10px;

		.menu-item {
			margin-left: 0;
			margin-right: 0;
			padding: 10px 14px;
		}
	}

	.moved-sub-menu-leftsidebar.sub-menu {
		min-width: 200px !important;
		width: fit-content !important;
        max-width: 80% !important;
	}
}

.moved-sub-menu-leftsidebar.sub-menu::before {
		content: '';
		position: absolute;
		left: -10px;
		top: var(--arrow-top);
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 12px solid white;
		filter: drop-shadow(-2px 1px 2px rgba(0, 0, 0, 0.1));
	}

/* Mobile: Arrow pointing up (when submenu is below parent) */
.moved-sub-menu-leftsidebar.sub-menu.mobile-submenu::before,
.king-leftmenu .menu-item-has-children .sub-menu.mobile-submenu::before {
    content: '';
    position: absolute;
    left: var(--arrow-left);
    top: -18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid white;
    filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.1));
}

/* Mobile: Arrow pointing down (when submenu is above parent) */
.moved-sub-menu-leftsidebar.sub-menu.mobile-submenu.submenu-above::before,
.king-leftmenu .menu-item-has-children .sub-menu.mobile-submenu.submenu-above::before {
    top: auto;
    bottom: -10px;
    border-bottom: none;
    border-top: 12px solid white;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
}

.moved-sub-menu-leftsidebar.sub-menu a,
.moved-sub-menu-leftsidebar.sub-menu a span:first-of-type,
.king-leftmenu .menu-item.menu-item-has-children .sub-menu a,
.king-leftmenu .menu-item.menu-item-has-children .sub-menu a span:first-of-type {
	line-height: 1.75;
	white-space: break-spaces;
}







.moved-sub-menu-leftsidebar.sub-menu {
	position: fixed;
	min-width: 240px;
	width: fit-content;
	max-width: 400px;
	margin: 0;
	border-radius: 10px;
	padding: 15px 15px 15px 20px;
	background: #fff;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px;
	z-index: 9999 !important;
	opacity: 0;
	visibility: hidden;
	display: none;

	.menu-item {
		padding: 10px 14px;
		border-left: 3px solid var(--color-primary);
		border-radius: 10px;

		a {
			display: block;
			text-align: left;

			span:last-child {
				transition: letter-spacing 0.3s ease-out, text-shadow 0.3s ease-out;
			}
		}

	}

	.menu-item {
		margin-bottom: 10px;
	}

	.menu-item:first-child {
		margin-top: 0;
	}

	.menu-item:last-child {
		margin-bottom: 0;
	}

	.current-menu-ancestor,
	.current-menu-parent,
	.current-menu-item,
	.menu-item:hover {
		background: linear-gradient(to right, #cae7ff 0%, #f0f9ff 100%);
	}
}

.moved-sub-menu-leftsidebar.sub-menu.show-submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body:has(.king-leftmenu:has(.reorder-row)) {
	.moved-sub-menu-leftsidebar.sub-menu {
		margin-left: 10px;

		.menu-item {
			padding: 10px 14px;
		}
	}
}

.moved-sub-menu-leftsidebar .current-menu-ancestor,
.moved-sub-menu-leftsidebar .current-menu-parent,
.moved-sub-menu-leftsidebar .current-menu-item,
.moved-sub-menu-leftsidebar .menu-item:hover {
	background: linear-gradient(to bottom, #cae7ff 0%, #f0f9ff 100%);

	>a {
		>span:first-child {

			i,
			&:has(img) {
				background: #ffff;
				box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 1px;
			}

			i {
				color: var(--color-primary);
			}

			img {
				filter: brightness(0) saturate(100%) invert(34%) sepia(97%) saturate(831%) hue-rotate(176deg) brightness(89%) contrast(89%);
			}
		}

		>span:last-child {
			letter-spacing: .3px;
			text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
		}
	}
}