/* ============================================================================================== */
/* ========================================= menu drag slide ==================================== */
/* ============================================================================================== */

.menu-drag-slide-section,
.menu-drag-slide-inside,
.menu-drag-slide,
.menu-drag-slide-item,
.menu-drag-slide-btn {
	position: relative;
}

.menu-drag-slide-section,
.menu-drag-slide-inside,
.menu-drag-slide,
.menu-drag-slide .menu-drag-slide-btn {
	height: 45px;
}

.menu-drag-slide-inside>.container {
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.menu-drag-slide.slide-off {
	display: flex;
	flex-wrap: wrap;
}

.menu-drag-slide-btn {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.menu-drag-slide-btn.disable-click {
	cursor: no-drop;
}

.menu-drag-slide-btn.default-gap+.menu-drag-slide-btn.default-gap {
	margin-left: 20px;
}

.menu-drag-slide-btn.min-gap+.menu-drag-slide-btn.min-gap {
	margin-left: 10px;
}

.menu-drag-slide-btn.max-gap+.menu-drag-slide-btn.max-gap {
	margin-left: 25px;
}

.menu-drag-slide-btn>.inside {
	position: relative;
}

.menu-drag-slide-btn .icon {
	font-size: 110%;
	margin-right: 5px;
}

.menu-drag-slide-btn .icon+.text {
	margin-left: 5px;
}

.menu-drag-slide-center.is-center-only ul.splide-list {
	justify-content: center !important;
}

.menu-drag-slide-center.is-center-style ul.splide-list {
	justify-content: center;
}

.menu-drag-slide.none-gap .menu-drag-slide-item {
	padding: 0;
}

.menu-drag-slide.default-gap .menu-drag-slide-item {
	/* padding: 0 20px; */
	padding: 0 10px;
}

.menu-drag-slide.min-gap .menu-drag-slide-item {
	/* padding: 0 10px; */
	padding: 0 5px;
}

.menu-drag-slide.max-gap .menu-drag-slide-item {
	/* padding: 0 30px; */
	padding: 0 15px;
}

.menu-drag-slide .menu-drag-slide-item:first-child {
	padding-left: 0;
}

.menu-drag-slide .menu-drag-slide-item:last-child {
	padding-right: 0;
}

/* ----- format border  ----- */

.menu-drag-slide-section[class*="mds-style-border-"],
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-inside,
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide,
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide .menu-drag-slide-btn {
	height: 30px;
}


.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn {
	display: block;
	font-size: inherit;
	line-height: 30px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	color: rgba(var(--customize-color-black), 1);
	transition: color 0.2s ease;
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn:before {
	position: absolute;
	content: "";
	width: 100%;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: all 0.2s ease;
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.active:before {
	opacity: 1;
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.none-border:before {
	display: none !important;
}

.menu-drag-slide-section[class*="mds-style-border-"].hidden-border>.menu-drag-slide-inside {
	border: none !important;
}

/* border top */
.menu-drag-slide-section.mds-style-border-top .menu-drag-slide {
	top: -1px;
}

.menu-drag-slide-section.mds-style-border-top>.menu-drag-slide-inside {
	border-top-width: 1px;
	border-top-style: solid;
}

.menu-drag-slide-section.mds-style-border-top .menu-drag-slide-btn:before {
	top: 0;
}

.menu-drag-slide-section.text-color-black.mds-style-border-top>.menu-drag-slide-inside {
	border-top-color: rgba(var(--customize-color-black-dark), 0.2);
}

.menu-drag-slide-section.text-color-white.mds-style-border-top>.menu-drag-slide-inside {
	border-top-color: rgba(var(--customize-color-black-white-rgb), 0.3);
}

/* border bottom */
/* .menu-drag-slide-section.mds-style-border-bottom .menu-drag-slide {
    bottom: -1px;
} */
.menu-drag-slide-section.mds-style-border-bottom>.menu-drag-slide-inside {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.menu-drag-slide-section.mds-style-border-bottom .menu-drag-slide-btn:before {
	bottom: 0;
}

.menu-drag-slide-section.text-color-black.mds-style-border-bottom>.menu-drag-slide-inside {
	border-bottom-color: rgba(var(--customize-color-black-dark), 0.2);
}

.menu-drag-slide-section.text-color-white.mds-style-border-bottom>.menu-drag-slide-inside {
	border-bottom-color: rgba(var(--customize-color-black-white-rgb), 0.3);
}

/* color - black */
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-black:before {
	background-color: rgba(var(--customize-color-black-dark), 1);
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-black>.inside {
	color: rgba(var(--customize-color-black-dark), 0.5) !important;
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-black>.inside:hover,
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-black.active>.inside {
	color: rgba(var(--customize-color-black-dark), 1) !important;
}

/* color - white */
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-white:before {
	background-color: rgba(var(--customize-color-black-white-rgb), 1);
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-white>.this-btn {
	color: rgba(var(--customize-color-black-white-rgb), 0.5) !important;
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-white>.this-btn:hover,
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-white.active>.this-btn {
	color: rgba(var(--customize-color-black-white-rgb), 1) !important;
}

/* color - primary */
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-primary:before {
	background-color: rgba(var(--customize-color-primary), 1);
}

.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-primary:hover,
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-primary.active {
	color: rgba(var(--customize-color-primary), 1) !important;
}

/* --------------------------------------------------------------- */
/* ----------------------- style divider ------------------------- */
/* --------------------------------------------------------------- */

.mds-style-divider,
.mds-style-divider .menu-drag-slide-inside,
.mds-style-divider .menu-drag-slide {
	height: 50px;
}

.mds-style-divider.h-auto,
.mds-style-divider.h-auto .menu-drag-slide-inside,
.mds-style-divider.h-auto .menu-drag-slide {
	height: auto;
}

.mds-style-divider .menu-drag-slide-item {
	padding: 0 20px;
}

.mds-style-divider .menu-drag-slide-item+.menu-drag-slide-item:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-top: -10px;
	height: 20px;
	border-left-width: 1px;
	border-left-style: solid;
}

.mds-style-divider.text-color-white .menu-drag-slide-item+.menu-drag-slide-item:before {
	border-left-color: rgba(var(--customize-color-white), 0.2);
}

.mds-style-divider.text-color-black .menu-drag-slide-item+.menu-drag-slide-item:before {
	border-left-color: rgba(var(--customize-color-black-dark), 0.2);
}

/* bg */
.mds-style-divider.bg .menu-drag-slide-item {
	padding: 0 25px;
}

.mds-style-divider.bg .menu-drag-slide-btn {
	height: 35px;
}

.mds-style-divider.bg .menu-drag-slide-btn:before {
	position: absolute;
	content: "";
	width: calc(100% + 25px);
	height: 100%;
	top: 0;
	bottom: 0;
	left: -12.5px;
	right: -12.5px;
	border-radius: 20px;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 1;
}

.mds-style-divider.bg .menu-drag-slide-btn>.icon,
.mds-style-divider.bg .menu-drag-slide-btn>.text {
	position: relative;
	z-index: 2;
}

.mds-style-divider.bg .menu-drag-slide-btn>.icon+.text,
.mds-style-divider.bg .menu-drag-slide-btn>.text+.text {
	margin-left: 5px;
}

.mds-style-divider.bg .menu-drag-slide-btn:hover:before {
	opacity: 0.1;
}

.mds-style-divider.bg .menu-drag-slide-btn.active:before {
	opacity: 1;
}

/* white */
.mds-style-divider.bg.text-color-white .menu-drag-slide-btn:before {
	background-color: rgba(var(--customize-color-white), 1);
}

.mds-style-divider.bg.text-color-white .menu-drag-slide-btn.active {
	color: rgba(var(--customize-color-black), 1) !important;
}

/* black */
.mds-style-divider.bg.text-color-black .menu-drag-slide-btn:before {
	background-color: rgba(var(--customize-color-black), 1);
}

.mds-style-divider.bg.text-color-black .menu-drag-slide-btn.active {
	color: rgba(var(--customize-color-white), 1) !important;
}

/* --------------------------------------------------------------- */
/* ----------------------- style btn tabs ------------------------ */
/* --------------------------------------------------------------- */

.mds-style-btn-tabs,
.mds-style-btn-tabs .menu-drag-slide-inside,
.mds-style-btn-tabs .menu-drag-slide {
	height: 55px;
}

/* inside */
.mds-style-btn-tabs .menu-drag-slide-inside {
	display: flex;
	justify-content: center;
}

/* slide */
.mds-style-btn-tabs .menu-drag-slide>.splide-track {
	border-radius: 10px;
	overflow: hidden;
}

.mds-style-btn-tabs .menu-drag-slide {
	overflow: hidden;
	border-radius: 15px;
	padding: 5px;
	max-width: 100%;
}

.mds-style-btn-tabs li.menu-drag-slide-item+li.menu-drag-slide-item {
	margin-left: 10px;
}

.mds-style-btn-tabs li.menu-drag-slide-item+li.menu-drag-slide-item:before {
	position: absolute;
	content: "";
	top: 50%;
	left: -5px;
	margin-top: -15px;
	height: 30px;
	border-left-width: 1px;
	border-left-style: solid;
}

/* btn */
.mds-style-btn-tabs .menu-drag-slide-btn {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	/* align-items: baseline; */
	align-items: center;
	justify-content: center;
	height: 45px;
	font-size: 15px;
	line-height: 45px;
	padding: 0 20px;
	border-radius: 10px;
	border: none;
	outline: none !important;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: all 0.3s ease;
	opacity: 1;
}

.mds-style-btn-tabs .menu-drag-slide-btn.active,
.mds-style-btn-tabs .menu-drag-slide-btn:hover {
	opacity: 1;
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.internal-link.active {
	background-color: transparent;
	color: inherit;
}

/* color primary */
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary:active {
	background-color: rgba(var(--customize-color-primary), 0);
	color: inherit;
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary:hover,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.internal-link.active:hover {
	background-color: rgba(var(--customize-color-primary-light), 1);
	color: rgba(var(--customize-color-on-primary-light), 1);
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.active,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.active:active:hover {
	background-color: rgba(var(--customize-color-primary), 1);
	color: rgba(var(--customize-color-on-primary), 1);
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.active:hover {
	background-color: rgba(var(--customize-color-primary-hover), 1);
	color: rgba(var(--customize-color-on-primary-hover), 1);
}

/* color primary light */
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light:active {
	background-color: rgba(var(--customize-color-primary), 0);
	color: inherit;
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light:hover {
	background-color: rgba(var(--customize-color-primary), 0.15);
	color: rgba(var(--customize-color-primary), 1);
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light.active,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light.active:active:hover,
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary-light.active:hover {
	background-color: rgba(var(--customize-color-primary), 0.1);
	color: rgba(var(--customize-color-primary), 1);
}

/* color secondary */
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary {
	background-color: rgba(var(--customize-color-secondary), 0);
	color: inherit;
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary:hover,
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary.internal-link.active:hover {
	background-color: rgba(var(--customize-color-secondary-light), 1);
	color: rgba(var(--customize-color-on-secondary-light), 1);
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary.active,
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary.active:active:hover {
	background-color: rgba(var(--customize-color-secondary), 1);
	color: rgba(var(--customize-color-on-secondary), 1);
}

.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary.active:hover {
	background-color: rgba(var(--customize-color-secondary-hover), 1);
	color: rgba(var(--customize-color-on-secondary-hover), 1);
}

/**/
.bg-color-white li.menu-drag-slide-item+li.menu-drag-slide-item:before,
.bg-color-gray li.menu-drag-slide-item+li.menu-drag-slide-item:before,
.bg-color-gray-light li.menu-drag-slide-item+li.menu-drag-slide-item:before {
	border-left-color: rgba(var(--customize-color-black), 0.15);
}

/* .menu-drag-slide.bg-gradient {
	background: linear-gradient(to right, rgba(var(--customize-color-white),1), rgba(var(--customize-color-primary),1));
} */

/* highlight */
.mds-style-btn-tabs.hl {
	height: auto;
}

.mds-style-btn-tabs.hl .menu-drag-slide-inside {
	z-index: 2;
}

/* .mds-style-btn-tabs.hl, */
.mds-style-btn-tabs.hl .menu-drag-slide-inside,
.mds-style-btn-tabs.hl .menu-drag-slide {
	height: 59px;
}

.mds-style-btn-tabs.hl .menu-drag-slide {
	/* background: linear-gradient(to right, rgba(var(--customize-color-white), 1), rgba(var(--customize-color-primary), 0.08)); */
	background-color: rgba(var(--customize-color-white), 1);
	box-shadow: 0 10px 30px 0 rgba(var(--customize-color-primary), 0.2);
	border: 2px solid rgba(var(--customize-color-white), 1);
}

/* bg */
.mds-style-btn-tabs.hl.hl-bg {
	margin-bottom: 60px;
}

.mds-style-btn-tabs.hl.hl-bg .menu-drag-slide-bg {
	position: absolute;
	width: 100%;
	height: 150px;
	border-top: 1px solid rgba(var(--customize-color-gray), 0.2);
	background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(var(--customize-color-primary), 0.1) 0%, transparent 100%);
	top: 50%;
	left: 0;
	right: 0;
	z-index: -1;
}

/* --------------------------------------------------------------- */
/* ----------------------- style btn mini ------------------------ */
/* --------------------------------------------------------------- */

.mds-style-btn-mini,
.mds-style-btn-mini .menu-drag-slide-inside,
.mds-style-btn-mini .menu-drag-slide {
	height: 30px;
}

/* inside */
.mds-style-btn-mini .menu-drag-slide-inside {
	display: flex;
	justify-content: start;
}

.mds-style-btn-mini .menu-drag-slide {
	width: 100%;
}

.mds-style-btn-mini.enable-btn-arrows .splide-track {
	-webkit-mask-image: linear-gradient(to right, transparent 35px, black 35px, black calc(100% - 35px), transparent calc(100% - 35px));
	mask-image: linear-gradient(to right, transparent 35px, black 35px, black calc(100% - 35px), transparent calc(100% - 35px));
}

/* btn arrow */
.mds-style-btn-mini .splide-arrow {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 10px;
	font-size: 10px;
	background-color: rgba(var(--customize-color-black), 0.1);
	color: rgb(var(--customize-color-black), 1);
}

.mds-style-btn-mini .splide-arrow.splide-arrow-prev {
	padding-right: 0;
	left: 0;
}

.mds-style-btn-mini .splide-arrow.splide-arrow-next {
	padding-left: 0;
	right: 0;
}

.mds-style-btn-mini .splide-arrow:disabled {
	visibility: visible;
	opacity: 0.8;
	cursor: no-drop;
	filter: grayscale(100%);
}

.mds-style-btn-mini .splide-arrow:disabled.splide-arrow-prev,
.mds-style-btn-mini .splide-arrow:disabled.splide-arrow-next {
	color: rgb(var(--customize-color-black), 0.3);
}

/* btn */
.mds-style-btn-mini .menu-drag-slide-btn {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	/* align-items: baseline; */
	align-items: center;
	justify-content: center;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
	padding: 2px 10px 0 10px;
	border-radius: 10px;
	border: none;
	outline: none !important;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: all 0.3s ease;
	background-color: rgba(var(--customize-color-black), 0.1);
	opacity: 1;
}

.mds-style-btn-mini .menu-drag-slide-btn:hover {
	background-color: rgba(var(--customize-color-black), 0.2);
}

/* color primary */
.mds-style-btn-mini .menu-drag-slide-btn.color-primary {}

.mds-style-btn-mini .menu-drag-slide-btn.color-primary.active {
	background-color: rgba(var(--customize-color-primary), 1);
	color: rgba(var(--customize-color-on-primary), 1);
}

/* color secondary */
.mds-style-btn-mini .menu-drag-slide-btn.color-secondary {}

.mds-style-btn-mini .menu-drag-slide-btn.color-primary.active {
	background-color: rgba(var(--customize-color-secondary), 1);
	color: rgba(var(--customize-color-on-secondary), 1);
}


/* xxl */
@media (min-width: 1400px) {
	.menu-drag-slide-center.is-center-xxl ul.splide-list {
		justify-content: center;
	}
}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.menu-drag-slide-center.is-center-xl ul.splide-list {
		justify-content: center;
	}
}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.menu-drag-slide-center.is-center-lg ul.splide-list {
		justify-content: center;
	}
}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {
	.menu-drag-slide-center.is-center-md ul.splide-list {
		justify-content: center;
	}
}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {
	.menu-drag-slide-center.is-center-sm ul.splide-list {
		justify-content: center;
	}
}

/* xs */
@media (max-width: 575.98px) {
	.menu-drag-slide-center.is-center-xs ul.splide-list {
		justify-content: center;
	}
}

/* xs custom */
@media (max-width: 399.98px) {}