/* ============================================================================================== */
/* ========================================= 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: 50px;
}
.menu-drag-slide-inside>.container {
	height: 100%;
}
.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 !important;
}
.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-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-btn {
	display: block;
	font-size: inherit;
	line-height: 50px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	color: rgba(var(--cpn-color-black),1);
	transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-ms-transition: color 0.2s ease;
	-o-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;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-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;
}

/* 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(--cpn-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(--cpn-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(--cpn-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(--cpn-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(--cpn-color-black-dark),1);
}
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-black>.inside {
	color: rgba(var(--cpn-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(--cpn-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(--cpn-color-black-white-rgb),1);
}
.menu-drag-slide-section[class*="mds-style-border-"] .menu-drag-slide-btn.color-white>.this-btn {
	color: rgba(var(--cpn-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(--cpn-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(--cpn-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(--cpn-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 .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(--cpn-color-white),0.2);
}
.mds-style-divider.text-color-black .menu-drag-slide-item+.menu-drag-slide-item:before {
	border-left-color: rgba(var(--cpn-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;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
	z-index: 1;
}
.mds-style-divider.bg .menu-drag-slide-btn>.text {
	position: relative;
	z-index: 2;
}
.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;
}
.mds-style-divider.bg.text-color-white .menu-drag-slide-btn:before {
	background-color: rgba(var(--cpn-color-white),1);
}
.mds-style-divider.bg.text-color-white .menu-drag-slide-btn.active {
	color: rgba(var(--cpn-color-black),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;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    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;
}

/* 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(--cpn-color-primary),0);
	color: inherit;
}
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary:hover {
	background-color: rgba(var(--cpn-color-primary-light),1);
	color: rgba(var(--cpn-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(--cpn-color-primary),1);
	color: rgba(var(--cpn-color-on-primary),1);
}
.mds-style-btn-tabs .menu-drag-slide-btn.color-primary.active:hover {
	background-color: rgba(var(--cpn-color-primary-hover),1);
	color: rgba(var(--cpn-color-on-primary-hover),1);
}

/* color secondary */
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary {
	background-color: rgba(var(--cpn-color-secondary),0);
	color: inherit;
}
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary:hover {
	background-color: rgba(var(--cpn-color-secondary-light),1);
	color: rgba(var(--cpn-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(--cpn-color-secondary),1);
	color: rgba(var(--cpn-color-on-secondary),1);
}
.mds-style-btn-tabs .menu-drag-slide-btn.color-secondary.active:hover {
	background-color: rgba(var(--cpn-color-secondary-hover),1);
	color: rgba(var(--cpn-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(--cpn-color-black), 0.15);
}

/* 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) {}