/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


:root{
	--font-family-base: 'HelveticaNeueLT Std', sans-serif;

	--color-base-lightest: #BDBDBD;
	--color-base-lighter: #999;
	--color-base-light: #4F4F4F;
	--color-base: #3F3F3F;
	--color-base-dark: #333;
	--color-base-darker: #1C1B1F;

	--color-primary: var(--x-color-primary, #D41E20);
	--color-primary-hover: var(--x-color-primary-hover, #BC171F);

	--color-secondary-light: #F5F6F8;
	--color-secondary: #828282;
	--color-secondary-hover: #777;

	--color-success: #22A850;
	--color-success-hover: #168E3F;

	--color-danger-light: #B10C1F;
	--color-danger: #721720;
	--color-danger-hover: #580E15;

	--color-warning-light: #faedd0;
	--color-warning: #F7A112;
	--color-warning-hover: #E99811;

	--color-info-light: #007CF8;
	--color-info: #1076EC;
	--color-info-hover: #0A6DD1;
	--color-info-dark: #2971D5;

	--color-light: #E0E0E0;
	--color-light-hover: #D5D5D5;

	--color-dark: #002D44;
	--color-dark-hover: #032032;

	--color-muted: var(--color-base-lightest);


	--color-link: var(--color-info);


	--container-size-1: 400px;
	--container-size-2: 760px;
	--container-size-3: 1000px;
	--container-size-4: 1080px;
	--container-size-5: 1134px;
	--container-size-6: 1262px;
	--container-size-7: 1844px;

	--content-padding-x: var(--content-padding-x-1);
	--content-padding-x-1: 20px;
	--content-padding-x-2: 20px;

	--content-padding-y: var(--content-padding-y-1);
	--content-padding-y-1: 48px;
	--content-padding-y-2: 60px;

	--btn-size: var(--btn-size-md);
	--btn-size-xs: 26px;
	--btn-size-sm: 30px;
	--btn-size-md: 38px;
	--btn-size-lg: 44px;

	--fs-h1: 30px;
	--fs-h2: 22px;
	--fs-h3: 20px;
	--fs-h4: 18px;
	--fs-h5: 16px;
	--fs-h6: 14px;

	--fs-text: var(--fs-text2);
	--fs-text1: 16px;
	--fs-text2: 14px;
	--fs-text3: 12px;
	--fs-text4: 10px;

	--transition-color: color .15s ease-in-out;
	--transition-bg-color: background-color .15s ease-in-out;
	--transition-border-color: border-color .15s ease-in-out;
	--transition-shadow: box-shadow .15s ease-in-out;


	--bg-header: var(--x-bg-header, var(--color-dark));
	--bg-menu: var(--x-bg-menu, var(--color-info));
	--bg-hello-bar: var(--x-bg-hello-bar, #B5C7E5);
	--color-hello-bar: var(--x-color-hello-bar, var(--color-dark));
	--color-breadcrumbs-active: var(--x-color-breadcrumbs-active, var(--color-info));

	/*--text-primary: var(--x-text-primary, var(--color-primary));*/
}

@media (min-width: 1600px) {
	:root{
		--content-padding-x-2: 38px;
	}
}


/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
	margin: 0;
	padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
	display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

.pointer-events-auto{
    pointer-events: auto !important;
}
/* ----- */

html,body{
	width: 100%;
	height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
	display: block;
	max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
	cursor: pointer;
	outline: none !important;
}
button,select{text-transform: inherit;}

a,a:hover,a:focus{text-decoration: none;}
a.is-active{cursor: default;}

.disabled{opacity: 0.5; pointer-events: none;}
.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
	height: 100% !important;
	overflow: hidden;
}

.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

/* ----- */

.text-nocase{text-transform: none !important;}

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
	background: #fff;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;

	color: var(--color-base);
	font-size: 14px;
	word-break: break-word;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body,input,textarea,button{
	font-family: var(--font-family-base);
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid{
	width: 100%;
	padding-left: var(--content-padding-x);
	padding-right: var(--content-padding-x);
	margin: 0 auto;
}

.container .container-xxs,
.container .container-xs,
.container .container-sm,
.container .container-md,
.container .container-lg,
.container .container-xl{
	padding-left: 0;
	padding-right: 0;
}

.container,
.container-md,
.t63-section[data-content-size="md"] .container{
	max-width: calc(var(--container-size-4) + var(--content-padding-x) * 2);
}
.container .container-md{
	max-width: var(--container-size-4);
}

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
	max-width: calc(var(--container-size-1) + var(--content-padding-x) * 2);
}
.container .container-xxs{
	max-width: var(--container-size-1);
}

.container-xs,
.t63-section[data-content-size="xs"] .container{
	max-width: calc(var(--container-size-2) + var(--content-padding-x) * 2);
}
.container .container-xs{
	max-width: var(--container-size-2);
}

.container-sm,
.t63-section[data-content-size="sm"] .container{
	max-width: calc(var(--container-size-3) + var(--content-padding-x) * 2);
}
.container .container-sm{
	max-width: var(--container-size-3);
}

/*.container-md,
.t63-section[data-content-size="md"] .container{
	max-width: calc(var(--container-size-4) + var(--content-padding-x) * 2);
}
.container .container-md{
	max-width: var(--container-size-4);
}*/

.container-lg{
	max-width: calc(var(--container-size-5) + var(--content-padding-x) * 2);
}
.container .container-lg{
	max-width: var(--container-size-5);
}

.container-xl{
	max-width: calc(var(--container-size-6) + var(--content-padding-x) * 2);
}
.container .container-xl{
	max-width: var(--container-size-6);
}

.container-xxl{
	max-width: calc(var(--container-size-7) + var(--content-padding-x) * 2);
}
.container .container-xxl{
	max-width: var(--container-size-7);
}

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
	max-width: 100%;
}

/*.t63-section[data-content-size="xs"] .text-col .t63-article{
	max-width: 225px;
}
.t63-section[data-content-size="sm"] .text-col .t63-article{
	max-width: 355px;
}
.t63-section[data-content-size="md"] .text-col .t63-article{
	max-width: 525px;
}
.t63-section[data-content-size="lg"] .text-col .t63-article{
	max-width: 575px;
}*/
/* ----------- /container ----------- */


/* ----------- row ----------- */
@media (min-width: 1600px) {
	.col-3xl {
		flex: 1 0 0%;
	}
	.col-3xl-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-3xl-1 {
		flex: 0 0 auto;
		width: 8.333333%;
	}
	.col-3xl-2 {
		flex: 0 0 auto;
		width: 16.666667%;
	}
	.col-3xl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-3xl-4 {
		flex: 0 0 auto;
		width: 33.333333%;
	}
	.col-3xl-5 {
		flex: 0 0 auto;
		width: 41.666667%;
	}
	.col-3xl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-3xl-7 {
		flex: 0 0 auto;
		width: 58.333333%;
	}
	.col-3xl-8 {
		flex: 0 0 auto;
		width: 66.666667%;
	}
	.col-3xl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-3xl-10 {
		flex: 0 0 auto;
		max-width: 83.333333%;
	}
	.col-3xl-11 {
		flex: 0 0 auto;
		width: 91.666667%;
	}
	.col-3xl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (min-width: 1800px) {
	.col-4xl {
		flex: 1 0 0%;
	}
	.col-4xl-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-4xl-1 {
		flex: 0 0 auto;
		width: 8.333333%;
	}
	.col-4xl-2 {
		flex: 0 0 auto;
		width: 16.666667%;
	}
	.col-4xl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-4xl-4 {
		flex: 0 0 auto;
		width: 33.333333%;
	}
	.col-4xl-5 {
		flex: 0 0 auto;
		width: 41.666667%;
	}
	.col-4xl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-4xl-7 {
		flex: 0 0 auto;
		width: 58.333333%;
	}
	.col-4xl-8 {
		flex: 0 0 auto;
		width: 66.666667%;
	}
	.col-4xl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-4xl-10 {
		flex: 0 0 auto;
		max-width: 83.333333%;
	}
	.col-4xl-11 {
		flex: 0 0 auto;
		width: 91.666667%;
	}
	.col-4xl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

.row:not([class*="g-"]):not([class*="gx-"]){
	--bs-gutter-x: 20px;
}
.row.gy{
	--bs-gutter-y: 20px;
}

/*.g-1, .gx-1 {
	--bs-gutter-x: 0.25rem;
}
.g-1, .gy-1 {
	--bs-gutter-y: 0.25rem;
}

.g-2, .gx-2 {
	--bs-gutter-x: 0.5rem;
}
.g-2, .gy-2 {
	--bs-gutter-y: 0.5rem;
}

.g-3, .gx-3 {
	--bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
	--bs-gutter-y: 1rem;
}

.g-4, .gx-4 {
	--bs-gutter-x: 1.5rem;
}
.g-4, .gy-4 {
	--bs-gutter-y: 1.5rem;
}

.g-5, .gx-5 {
	--bs-gutter-x: 3rem;
}
.g-5, .gy-5 {
	--bs-gutter-y: 3rem;
}*/

.grid-items-stretch > div{
	display: flex;
	flex-direction: column;
}
.grid-items-stretch > div > *{
	flex-grow: 1;
}

.row-separator-dash{
	display: flex;
	justify-content: center;
	width: 14px;
	align-self: center;
	color: var(--color-base);
	font-size: 14px;
}
/* ----------- /row ----------- */


/* ----------- table ----------- */
.table{
	--bs-table-color: #000;
	--bs-table-border-color: var(--color-base-lightest);
	--td-px: 5px;
	--td-py: 10px;
	margin-bottom: 0;
}
.table th,
.table td{
	border-bottom-width: 0;
	padding: var(--td-py) var(--td-px);

	color: #000;
	font-size: 12px;
	vertical-align: middle;
}
.table th{
	font-weight: bold;
}
.table td{
	border-top-width: 1px;
}
.table tr:last-child td{
	border-bottom-width: 1px;
}

.table td .tr-accordion-toggle-btn{
	display: flex;
}
.tr-accordion-toggle-btn > i{
	transition: transform 0.2s ease;
}
.tr-accordion-toggle-btn.is-active > i{
	transform: rotate(-180deg);
}

.tr-accordion-body{
	padding: 0;
}
.tr-accordion-body td{
	--bs-table-bg: var(--color-secondary-light);
	border: 0;
	padding: 0;
}
.card .tr-accordion-body td{
	--bs-table-bg: #fff;
}

.tr-accordion-body-content{
	padding: var(--td-py) var(--td-px);
}


/* row table */
.row-table{
	border-bottom: 1px solid var(--color-base-lightest);

	color: #000;
	font-size: 12px;
}

.row-table .row-tr{
	align-items: center;
	min-height: 38px;
	border-top: 1px solid var(--color-base-lightest);
	margin: 0;
}
.row-table .row-tr > div{
	padding: 5px 10px;
}

.row-table .row-table-head{
	border-top: 0;
	font-weight: bold;
}

.row-table .col-title{
	display: block;
	font-weight: bold;
}

.row-table a:not(.link):not(.btn){
	color: inherit;
}
.row-table a:not(.link):not(.btn):hover{
	text-decoration: underline;
}

.row-table .accordion-item-body{
	background-color: var(--color-secondary-light);
	padding: 20px;
}
.card .row-table .accordion-item-body{
	background-color: #fff;
}

@media (max-width: 767px) {
	.row-table .row-table-head{
		display: none;
	}
	.row-table .row-tr{
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/* div table */
/*.div-table{
	display: table;
	width: 100%;
	border-bottom: 1px solid var(--color-base-lightest);
}
.div-table .tr{
	display: table-row;
}
.div-table .th,
.div-table .td{
	display: table-cell;
	padding: 5px 10px;

	color: #000;
	font-size: 12px;
}
.div-table .th{
	font-weight: bold;
}
.div-table .td{
	height: 38px;
	border-top: 1px solid var(--color-base-lightest);
	vertical-align: middle;
}

.div-table .th:not([class*="col-"]),
.div-table .td:not([class*="col-"]){
	max-width: 100px;
}*/
/* ----------- /table ----------- */


/* ----------- icons ----------- */
img.i-chevron{
	flex-shrink: 0;
	width: 10px;
}

.i-xs{
	font-size: 16px !important;
}
.i-sm{
	font-size: 18px !important;
}
.i-md{
	font-size: 24px !important;
}
.i-lg{
	font-size: 26px !important;
}
.i-xl{
	font-size: 32px !important;
}

img.i-xs{
	height: 16px !important;
}
img.i-sm{
	height: 18px !important;
}
img.i-md{
	height: 24px !important;
}
img.i-lg{
	height: 26px !important;
}
img.i-xl{
	height: 32px !important;
}
/* ----------- /icons ----------- */


/* ----------- rotate ----------- */
.r-45{
	transform: rotate(45deg);
}
.r-90{
	transform: rotate(90deg);
}
.r-180{
	transform: rotate(180deg);
}
.r-270{
	transform: rotate(270deg);
}
.r-360{
	transform: rotate(360deg);
}
/* ----------- /rotate ----------- */


/* ----------- width ----------- */
.w-1{
	min-width: 96px !important;
}
.w-2{
	min-width: 122px !important;
}
.w-3{
	min-width: 152px !important;
}
.w-4{
	min-width: 186px !important;
}

@media (min-width: 576px) {
	.w-sm-1{
		min-width: 96px !important;
	}
	.w-sm-2{
		min-width: 122px !important;
	}
	.w-sm-3{
		min-width: 152px !important;
	}
	.w-sm-4{
		min-width: 186px !important;
	}
}
@media (min-width: 768px) {
	.w-md-1{
		min-width: 96px !important;
	}
	.w-md-2{
		min-width: 122px !important;
	}
	.w-md-3{
		min-width: 152px !important;
	}
	.w-md-4{
		min-width: 186px !important;
	}
}
@media (min-width: 992px) {
	.w-lg-1{
		min-width: 96px !important;
	}
	.w-lg-2{
		min-width: 122px !important;
	}
	.w-lg-3{
		min-width: 152px !important;
	}
	.w-lg-4{
		min-width: 186px !important;
	}
}
/* ----------- width ----------- */


/* ----------- colors ----------- */
.text-white{
	color: #fff !important;
}
.text-black{
	color: #000 !important;
}

.text-base-light{
	color: var(--color-base-light) !important;
}
.text-base{
	color: var(--color-base) !important;
}
.text-base-dark{
	color: var(--color-base-dark) !important;
}

.text-muted{
	color: var(--color-muted) !important;
}

.text-primary{
	color: var(--color-primary) !important;
}
.text-secondary{
	color: var(--color-secondary) !important;
}
.text-success{
	color: var(--color-success) !important;
}
.text-danger{
	color: var(--color-danger) !important;
}
.text-warning{
	color: var(--color-warning) !important;
}
.text-info{
	color: var(--color-info) !important;
}
.text-dark{
	color: var(--color-dark) !important;
}

.link-primary,
.link-primary:hover{
	color: var(--color-primary) !important;
	text-decoration-color: var(--color-primary) !important;
}
.link-info,
.link-info:hover{
	color: var(--color-info) !important;
	text-decoration-color: var(--color-info) !important;
}


.bg-primary{
	background-color: var(--color-primary) !important;
}
.bg-secondary{
	background-color: var(--color-secondary) !important;
}
.bg-success{
	background-color: var(--color-success) !important;
}
.bg-warning{
	background-color: var(--color-warning) !important;
}
.bg-warning-light{
	background-color: var(--color-warning-light) !important;
}
.bg-info{
	background-color: var(--color-info) !important;
}
.bg-light{
	background-color: var(--color-light) !important;
}

.bg-stripped,
.content-bg-dark{
	background-color: var(--color-secondary-light) !important;
}
/* ----------- /colors ----------- */


/* ----------- border ----------- */
.border-top{
	border-top: 1px solid var(--color-base-lightest) !important;
}
.border-bottom{
	border-bottom: 1px solid var(--color-base-lightest) !important;
}
.border-left{
	border-left: 1px solid var(--color-base-lightest) !important;
}
.border-right{
	border-right: 1px solid var(--color-base-lightest) !important;
}
/* ----------- border ----------- */


/* ==================== 3. layout ==================== */


.app{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
}


/* ---------- top bar ---------- */
.app-top-bar{
	background-color: #212123;
	color: #fff;
	font-size: 14px;
}
.app-top-bar .container{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
/* ---------- /top bar ---------- */


/* ---------- header ---------- */
.app-header{
	position: relative;
	z-index: 300;
}

.app-header > div{
	padding-left: var(--content-padding-x-2);
	padding-right: var(--content-padding-x-2);
	position: relative;
}

/* --- main wrap --- */
.app-header .main-wrap,
.app-header .main-wrap .col-right{
	display: flex;
	align-items: center;
}
.app-header .main-wrap{
	justify-content: space-between;
	height: 66px;
	background-color: var(--bg-header);
}

.app-header .col-left{
	display: flex;
	align-items: center;
	gap: 40px;
}
.app-header .col-left{
	color: var(--x-color-header, #fff);
	/*font-size: 15px;*/
}
.app-header .col-left a{
	color: inherit;
}

.app-header .logo img{
	max-height: 46px;
	object-fit: contain;
}

/* search */
.app-header .search-wrap{
	display: flex;
	width: 100%;
	max-width: 450px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.app-header .search-wrap > div{
	flex-grow: 1;
	position: relative;
}
.app-header .search-wrap .search-input{
	display: block;
	width: 100%;
	height: 38px;
	background-color: #fff;
	background-image: none;
	border: 1px solid #fff;
	border-radius: 8px;
	outline: none;
	padding: 0 36px 0 12px;

	color: var(--color-base);
	font-size: 14px;
}
.app-header .search-wrap .search-input::placeholder{
	color: #777;
}

.app-header .search-wrap .btn{
	background-color: transparent;
	border: 0;
	box-shadow: none;
}
.app-header .search-wrap .btn i{
	color: inherit;
	font-size: 24px;
}
.app-header .search-wrap .btn-search{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;

	color: #777;
}
.app-header .search-wrap .btn-search:hover{
	color: var(--color-base);
}
.app-header .search-wrap .btn-close{
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	padding: 0;
	opacity: 1;

	color: var(--x-color-header, #fff);
}

/* right col */
.app-header .main-wrap .col-right > *{
	margin-left: 5px;
}
.app-header .main-wrap .col-right .btn,
.app-header .main-wrap .col-right .icon-btn{
	min-width: 42px;
	min-height: 42px;
}
.app-header .main-wrap .col-right .btn{
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;
	--bs-btn-border-radius: 5px;

	--bs-btn-line-height: 1.2;
	/*padding: 0 12px;*/
	background-color: rgba(0,0,0,0.2);
	border-color: transparent;
	border-radius: 5px;

	color: #fff;
	font-size: 14px;
	text-align: left;
}
.app-header .main-wrap .col-right .btn > i{
	color: var(--color-primary);
	font-size: 24px;
}
.app-header .main-wrap .col-right .btn .i-chevron{
	margin-left: 12px;
}
.app-header .main-wrap .col-right .icon-btn > i{
	color: var(--x-color-header, #fff);
}

.app-header .user-dropdown .dropdown-menu{
	min-width: 180px;
}
.app-header .user-dropdown .btn-logout{
	color: var(--color-secondary);
}
.app-header .user-dropdown .item-with-icon{
	display: flex;
	align-items: center;
	height: 33px;
	padding: 0 9px;
	background-color: #F2F2F2;
	border-radius: 8px;
	margin-bottom: 10px;

	color: var(--color-base-dark);
	font-size: 12px;
	font-weight: bold;
}
.app-header .user-dropdown .item-with-icon > img{
	height: 19px;
}
.app-header .user-dropdown .dropdown-menu-item{
	padding-left: 9px;
}


/* --- navbar --- */
.app-header .nav-bar{
	display: flex;
	align-items: center;
	height: 38px;
	background-color: var(--bg-menu);
}
.app-header .nav-bar nav > ul{
	display: flex;
}
.app-header nav li{
	position: relative;
	z-index: 2;
}

.app-header nav .nav-item{
	display: flex;
	align-items: center;
	height: 28px;
	background-color: transparent;
	border-radius: 5px;
	padding: 0 12px;

	color: #fff;
	font-size: 14px;
}
.app-header nav button{
	border: none;
}
.desktop .app-header nav .nav-item:not(.active):hover{
	color: rgba(255,255,255,0.7);
}
.app-header nav .nav-item.active{
	background-color: rgba(255,255,255,0.3);
}

.app-header nav li .sub-nav{
	display: none;
	padding-top: 32px;
	position: absolute;
	top: 0;
	left: 0;
}
.app-header nav .sub-nav .sub-nav{
	padding-top: 0;
}

.app-header nav .sub-nav ul{
	/*width: 220px;
	background-color: #589FF2;*/
	width: 240px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
}
.app-header nav .sub-nav li{
	padding: 0 3px;
}
.app-header nav .sub-nav li:first-child{
	padding-top: 3px;
}
.app-header nav .sub-nav li:last-child{
	padding-bottom: 3px;
}

.app-header nav .sub-nav-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: transparent;
	border-radius: 3px;
	padding: 3px 3px 3px 10px;

	/*color: #fff;*/
	color: var(--color-base);
	font-size: 13px;
	text-align: left;
}
.app-header nav .sub-nav-item .fi{
	color: inherit;
	font-size: 12px;
	margin-left: 6px;
	transition: transform 0.15s ease-in-out;
}
.desktop .app-header nav li:hover > .sub-nav-item,
.app-header nav li.is-open > .sub-nav-item{
	/*background-color: #3B8BE9;*/
	background-color: var(--color-secondary-light);
}
.app-header nav li.is-open{
	background-color: rgba(255,255,255,0.1);
}
.app-header nav li.is-open > .sub-nav-item .fi{
	transform: rotate(-90deg);
}

.app-header .nav-bar .btn-cart{
	display: flex;
	align-items: center;
	min-height: 30px;
	background-color: rgba(255,255,255,0.3);
	border: 0;
	border-radius: 5px;
	padding: 0 10px;

	position: absolute;
	top: 4px;
	right: var(--content-padding-x-2);

	color: #fff;
	font-size: 12px;
}
.app-header .nav-bar .btn-cart .i-wrap{
	flex-shrink: 0;
	margin-right: 8px;
	position: relative;
}
.app-header .nav-bar .btn-cart .i-wrap img{
	display: block;
	height: 22px;
}
.app-header .nav-bar .btn-cart .i-wrap > span{
	width: 100%;
	padding-left: 1px;
	position: absolute;
	top: -3px;
	left: 0;

	color: var(--color-danger-light);
	/*font-size: 13px;*/
	font-weight: bold;
	font-style: normal;
	line-height: 1;
	letter-spacing: -1px;
	text-align: center;
}

/* --- hello bar --- */
.app-header .hello-bar{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background-color: var(--bg-hello-bar);

	padding-top: 5px;
	padding-bottom: 5px;

	color: var(--color-hello-bar);
	font-size: 12px;
	text-align: center;
}

.app-header .hello-bar .btn{
	min-height: auto;
	line-height: 18px;
}

@media (min-width: 768px) {
	/* --- main wrap --- */
	/* search */
	/*.app-header .search-wrap .btn-close{
		display: none !important;
	}*/
	/* right col */
	.app-header .main-wrap .col-right > *{
		margin-left: 10px;
	}
}
@media (min-width: 1100px) {
	/* --- main wrap --- */
	/* search */
	.app-header .search-wrap{
		width: 22%;
	}
	/* right col */
	.app-header .main-wrap .col-right .btn,
	.app-header .main-wrap .col-right .icon-btn{
		min-width: 44px;
		min-height: 44px;
	}
	.app-header .main-wrap .col-right .btn {
		--bs-btn-padding-x: 12px;
	}
	.app-header .main-wrap .col-right .btn > i{
		font-size: 28px;
	}
	.app-header .main-wrap .col-right > .btn-search,
	.app-header .search-wrap .btn-close{
		display: none; 
	}

	/* --- navbar --- */
	.app-header nav li .sub-nav{
		display: none;
		padding-top: 32px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.app-header nav .sub-nav .sub-nav{
		left: 100%;
		padding-left: 2px;
	}
	.app-header nav li:hover > .sub-nav{
		display: block;
	}
}
@media (min-width: 1200px) {
	/* --- main wrap --- */
	.app-header .main-wrap .col-right .btn > i{
		position: relative;
		top: -1px;
	}

	/* search */
	.app-header .search-wrap{
		width: 30%;
	}

	/* --- navbar --- */
	.app-header .nav-bar{
		justify-content: center;
	}
}

@media (max-width: 1099px) {
	/* --- main wrap --- */
	.app-header .search-wrap:not(.show),
	.app-header .main-wrap .col-right .btn > span,
	.app-header .main-wrap .col-right .btn > img{
		display: none;
	}

	.app-header .search-wrap{
		align-items: center;
		height: 100%;
		max-width: 100%;
		background-color: var(--x-bg-header, var(--color-dark));
		padding-left: var(--content-padding-x-2);
	}

	/* --- navbar --- */
	.app-header nav > ul > li:not(:first-child){
		display: none;
	}
	.app-header nav > ul > li:hover > .sub-nav{
		display: block;
	}
	.app-header nav > ul > li > .sub-nav > ul{
		max-height: calc(100vh - 140px);
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.app-header nav .sub-nav .sub-nav{
		position: relative;
	}
	.app-header nav .sub-nav .sub-nav ul{
		width: 100%;
		background-color: transparent;
	}
	.app-header nav .sub-nav-item .fi{
		transform: rotate(90deg);
	}
}
@media (max-width: 991px) {
	.app-header .main-wrap .col-right .btn > span{
		display: none;
	}
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
	flex-grow: 1;
	width: 100%;
	position: relative;
}

.section{
	padding-top: var(--content-padding-y);
	padding-bottom: var(--content-padding-y);
}

.title.section-title,
.title.page-title{
	color: var(--color-dark);
	font-size: 20px;
	line-height: 1.1;
}
.title.section-title{
	margin-bottom: 22px;
}
.title.page-title{
	margin-bottom: 24px;
}

/* spacing */
.content-pt-1,
.content-py-1{
	padding-top: var(--content-padding-y-1);
}
.content-pb-1,
.content-py-1{
	padding-bottom: var(--content-padding-y-1);
}

.content-pt-2,
.content-py-2{
	padding-top: var(--content-padding-y-2);
}
.content-pb-2,
.content-py-2{
	padding-bottom: var(--content-padding-y-2);
}

/* nav */
.page-nav-item{
	color: var(--color-base-light);
	font-size: 11px;
	font-weight: bold;

	transition: var(--transition-color);
}
.page-nav-item:hover,
.page-nav-item.active{
	color: var(--color-link);
}

@media (min-width: 768px) {
	.title.section-title,
	.title.page-title{
		font-size: 26px;
	}
}
@media (min-width: 992px) {
	.title.section-title,
	.title.page-title{
		font-size: 30px;
	}
	.title.page-title{
		margin-bottom: 44px;
	}

	/* nav */
	.page-nav{
		display: block !important;
	}
	.page-nav > .head{
		display: none;
	}
	.page-nav > ul{
		display: flex;
		justify-content: center;
		margin: 0 -6px 20px;
	}
	.page-nav > ul > li{
		padding: 0 6px;
	}
}

@media (max-width: 991px) {
	.page-nav{
		display: none;
		width: 100%;
		background-color: var(--color-secondary-light);
		border-radius: 8px;
		box-shadow: 0 10px 6px rgba(0,0,0,0.15);
		padding: 0 6px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 50;
	}

	.page-nav > .head{
		border-bottom: 1px solid var(--color-base-lightest);
	}
	.page-nav > .head .btn{
		min-width: auto;
		min-height: auto;
		border: 0;
		padding: 6px;

		color: var(--color-secondary);
		font-size: 14px;
		font-weight: 700;
	}
	.page-nav > .head .btn .fi{
		font-size: 22px;
		font-weight: 600;
	}
	.page-nav > .head .btn > span{
		margin-left: 4px;
	}

	.page-nav > ul{
		padding: 6px;
	}
	.page-nav li{
		display: flex;
	}
	.page-nav li a{
		padding: 6px 0;
	}
	.page-nav-item{
		font-size: 16px;
	}
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
	flex-shrink: 0;
	background-color: #303030;
	position: relative;
	z-index: 250;

	color: #B9B9B9;
}

.app-footer ul{
	list-style: none;
}

.app-footer a{
	color: inherit;
	transition: color 0.15s ease-in-out;
}
.app-footer a:hover{
	color: #fff;
}

.app-footer .title{
	margin-bottom: 10px;
	color: #fff;
	font-size: 20px;
	text-transform: none;
}

.app-footer .main-wrap{
	padding: 36px var(--content-padding-x-2) 16px;
	line-height: 24px;
}

.app-footer .social-media-item{
	flex-shrink: 0;
}
.app-footer .social-media-item img{
	display: block;
	height: 31px;
}

.app-footer .bottom-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 58px;
	background-color: #161415;
	padding-left: var(--content-padding-x-2);
	padding-right: var(--content-padding-x-2);
	font-size: 12px;
}
.app-footer .createdby{
	display: flex;
	align-items: center;
}
.app-footer .createdby > span{
	margin-right: 10px;
}
.app-footer .createdby img{
	display: block;
	height: 13px;
}

@media (min-width: 992px) {
	.app-footer .title{
		margin-bottom: 20px;
	}
}
/* ---------- /footer ---------- */


/* ---------- breadcrumbs ---------- */
.breadcrumbs ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumbs {
	background-color: var(--color-secondary-light);
	padding: 12px 0;

	color: var(--color-breadcrumbs-active);
	font-size: 14px;
	line-height: 18px;
}
.breadcrumbs li{
	display: flex;
	align-items: center;
}
.breadcrumbs li:not(:last-child)::after{
	content: "/";
	margin: auto 4px;
}
.breadcrumbs a{
	color: var(--color-base-lighter);
	transition: var(--transition-color);
}
.breadcrumbs a:hover{
	color: var(--color-base);
}
/* ---------- /breadcrumbs ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger,
.hamburger span,
.hamburger span::before,
.hamburger span::after{
	width: 18px;
}

.hamburger{
	flex-shrink: 0;
	display: block;
	height: 14px;
	background-color: transparent;
	border: 0;
	padding: 0;
	overflow: visible;
	position: relative;
	z-index: 50;
}
.hamburger:before{
	content: "";
	position: absolute;
	top: -12px;
	bottom: -12px;
	left: -12px;
	right: -12px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
	display: block;
	height: 1px;
	background-color: #000;
	position: absolute;
	transition: transform 0.15s ease;
}
.hamburger span{
	top: 0;
}
.hamburger span::before,
.hamburger span::after {
	content: "";
	display: block;
}
.hamburger span::before {
	width: 100%;
	top: 6px;
	transition-property: transform, opacity;
}
.hamburger span::after {
	top: 12px;
}

.hamburger.is-active span,
.nav-is-open .hamburger span{
	transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
.nav-is-open .hamburger span::before {
	transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
	opacity: 0;
}
.hamburger.is-active span::after,
.nav-is-open .hamburger span::after {
	transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
.nav-is-open .hamburger span,
.nav-is-open .hamburger span::before,
.nav-is-open .hamburger span::after{
	width: 21px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
	display: block;
	color: inherit;
	font-weight: bold;
}
.title{
	text-transform: uppercase;
}
.title *{
	font-weight: inherit;
	line-height: inherit;
}

.title:not(.slide-title):not(.full-featured) *:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not([class*="display-"]) {
	font-size: inherit;
}

.title a{
	color: inherit;
}

h1,.h1{
	font-size: var(--fs-h1);
	line-height: 1.1;
}
h2,.h2{
	font-size: var(--fs-h2);
}
h3,.h3{
	font-size: var(--fs-h3);
}
h4,.h4{
	font-size: var(--fs-h4);
}
h5,.h5{
	font-size: var(--fs-h5);
}
h6,.h6{
	font-size: var(--fs-h6);
}

.text,
.text-wrap{
	color: inherit;
	font-size: var(--fs-text);
}

.fs-1{
	font-size: var(--fs-text1) !important;
}
.fs-2{
	font-size: var(--fs-text2) !important;
}
.fs-3{
	font-size: var(--fs-text3) !important;
}
.fs-4{
	font-size: var(--fs-text4) !important;
}

/*@media (max-width: 1199px){
	html{
		font-size: 14px;
	}
}*/

html{
	font-size: 14px;
}

@media (min-width: 768px){
	html{
		font-size: 16px;
	}
}

.text-wrap:before,
.text-wrap:after {
	display: table;
	content: " ";
}
.text-wrap:after{
	clear:both;
}

.text-wrap > *{margin-bottom:18px;}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{padding-left:22px;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:10px;}

.text-wrap h1,
.text-wrap h2,
.text-wrap h3,
.text-wrap h4,
.text-wrap h5,
.text-wrap h6{
	margin-bottom: 6px;
}

.text-wrap img{
	max-width: 100%;
	height: auto;
	border-radius: 15px;
	margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
	margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
	margin-left: 15px;
}

.text-wrap hr{
	margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
	margin-top: 8px;
}

.link,
.link:hover,
.text-wrap a:not(.btn),
.text-wrap a:not(.btn):hover{
	color: var(--color-link);
}
.link,
.text-wrap a:not(.btn){
	text-decoration:underline;
}
.link:hover,
.text-wrap a:not(.btn):hover{
	text-decoration:none;
}
.text-hover-underline{
	text-decoration: none;
}
.text-hover-underline:hover{
	text-decoration: underline;
}

button.link{
	background: none;
	border: 0;
	padding: 0;
}

.text-wrap audio,
.text-wrap video{
	display: block;
	width: 100%;
	outline: none;
}
.text-wrap video{
	height: auto;
}

.text-wrap iframe{
	display: block;
	max-width: 100%;
}

.text-wrap table {
	width: 100%;
	border: 1px solid #dee2e6;
	color: inherit;
}
.text-wrap table th,
.text-wrap table td {
	border: 1px solid #dee2e6;
	padding: 0.75rem;
	vertical-align: top;
}
.text-wrap table thead th {
	border-bottom: 2px solid #dee2e6;
	vertical-align: bottom;
}
.text-wrap table tbody + tbody {
	border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
	border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
	border: 0;
	border-top: 1px solid #dee2e6;
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
	--bs-btn-padding-x: 1rem;
	/*--bs-btn-padding-y: 0.375rem;*/
	--bs-btn-border-radius: 8px;
	--bs-btn-disabled-opacity: 0.3;

	--bs-btn-font-family: var(--font-family-base);
	--bs-btn-font-size: 14px;
	--bs-btn-font-weight: 400;
	--bs-btn-line-height: 24px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-size);
	min-height: var(--btn-size);
}
.btn.text-uppercase{
	--bs-btn-font-weight: bold;
}

.btn > i{
	font-size: 22px;
}

.btn > i + span,
.btn > span + i{
	margin-left: 6px;
}

.icon-btn:not([class*="p-"]):not([class*="px-"]){
	padding: 0 !important;
}
.icon-btn:not(.btn){
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-size);
	min-height: var(--btn-size);
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.btn.size-xs,
.icon-btn.size-xs{
	min-width: var(--btn-size-xs);
	min-height: var(--btn-size-xs);
}
.btn.size-xs{
	--bs-btn-border-radius: 5px;

	padding: 0 8px;
	font-size: 10px;
}
.btn.size-sm,
.icon-btn.size-sm{
	min-width: var(--btn-size-sm);
	min-height: var(--btn-size-sm);
}
.btn.size-sm{
	border-radius: 6px;
	padding: 2px 12px;
	font-size: 12px;
}
.btn.size-lg,
.icon-btn.size-lg{
	min-width: var(--btn-size-lg);
	min-height: var(--btn-size-lg);
}

.btn.size-xs > i,
.icon-btn.size-xs > i{
	font-size: 18px;
}
.btn.size-sm > i,
.icon-btn.size-sm > i{
	font-size: 20px;
}
.btn.size-lg > i,
.icon-btn.size-lg > i{
	font-size: 26px;
}
.btn > i:first-child:last-child{
	margin: auto;
}

.btn.size-auto,
.icon-btn.size-auto{
	min-width: auto;
	min-height: auto;
}


.btn > img{
	height: 20px;
}
.btn > img + span,
.btn > span + img{
	margin-left: 8px;
}

/*.btn.size-sm > img{
	height: 18px;
}*/


/* white */
.btn-white{
	background-color: rgba(255,255,255,0.5);
	border-color: rgba(255,255,255,0.5);
}
.btn-white:hover{
	background-color: rgba(255,255,255,0.7);
}
.btn.btn-outline-white{
	border-color: #fff;
	color: #fff !important;
}
.btn.btn-outline-white:hover{
	background-color: #fff;
	border-color: #fff;
}

/* primary */
.btn-primary{
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-primary-hover);
	--bs-btn-hover-border-color: var(--color-primary-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-bg: var(--color-primary-hover);
	--bs-btn-active-border-color: var(--color-primary-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-bg: var(--color-primary);
	--bs-btn-disabled-border-color: var(--color-primary);
}

/* secondary */
.btn-secondary{
	--bs-btn-bg: var(--color-secondary);
	--bs-btn-border-color: var(--color-secondary);
	--bs-btn-hover-bg: var(--color-secondary-hover);
	--bs-btn-hover-border-color: var(--color-secondary-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-bg: var(--color-secondary-hover);
	--bs-btn-active-border-color: var(--color-secondary-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-bg: var(--color-secondary);
	--bs-btn-disabled-border-color: var(--color-secondary);
}

/* success */
.btn-success{
	--bs-btn-bg: var(--color-success);
	--bs-btn-border-color: var(--color-success);
	--bs-btn-hover-bg: var(--color-success-hover);
	--bs-btn-hover-border-color: var(--color-success-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-bg: var(--color-success-hover);
	--bs-btn-active-border-color: var(--color-success-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-bg: var(--color-success);
	--bs-btn-disabled-border-color: var(--color-success);
}

/* danger */
.btn-danger{
	--bs-btn-bg: var(--color-danger);
	--bs-btn-border-color: var(--color-danger);
	--bs-btn-hover-bg: var(--color-danger-hover);
	--bs-btn-hover-border-color: var(--color-danger-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-bg: var(--color-danger-hover);
	--bs-btn-active-border-color: var(--color-danger-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-bg: var(--color-danger);
	--bs-btn-disabled-border-color: var(--color-danger);
}

/* warning */
.btn-warning{
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--color-warning);
	--bs-btn-border-color: var(--color-warning);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--color-warning-hover);
	--bs-btn-hover-border-color: var(--color-warning-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--color-warning-hover);
	--bs-btn-active-border-color: var(--color-warning-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--color-warning);
	--bs-btn-disabled-border-color: var(--color-warning);
}

/* info */
.btn-info{
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--color-info-light);
	--bs-btn-border-color: var(--color-info-light);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--color-info-hover);
	--bs-btn-hover-border-color: var(--color-info-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--color-info-hover);
	--bs-btn-active-border-color: var(--color-info-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--color-info-light);
	--bs-btn-disabled-border-color: var(--color-info-light);
}

/* light */
.btn-light{
	--bs-btn-color: var(--color-base);
	--bs-btn-bg: var(--color-light);
	--bs-btn-border-color: var(--color-light);
	--bs-btn-hover-color: var(--color-base);
	--bs-btn-hover-bg: var(--color-light-hover);
	--bs-btn-hover-border-color: var(--color-light-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-color: var(--color-base);
	--bs-btn-active-bg: var(--color-light-hover);
	--bs-btn-active-border-color: var(--color-light-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: var(--color-base);
	--bs-btn-disabled-bg: var(--color-light);
	--bs-btn-disabled-border-color: var(--color-light);
}

/* dark */
.btn-dark{
	--bs-btn-bg: var(--color-dark);
	--bs-btn-border-color: var(--color-dark);
	--bs-btn-hover-bg: var(--color-dark-hover);
	--bs-btn-hover-border-color: var(--color-dark-hover);
	--bs-btn-focus-shadow-rgb: none;
	--bs-btn-active-bg: var(--color-dark-hover);
	--bs-btn-active-border-color: var(--color-dark-hover);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-bg: var(--color-dark);
	--bs-btn-disabled-border-color: var(--color-dark);
}


/* filters */
.btn.btn-filters{
	min-width: 73px;
	font-size: 14px;
}
.btn-filters:not(.is-active) > i,
.btn-filters.is-active > span{
	display: none;
}

/* hamburger */
.btn.btn-hamburger{
	min-width: 36px;
	min-height: 36px;
	background-color: var(--color-secondary-light) !important;
	border-color: var(--color-secondary-light) !important;
	padding: 0;
}
.btn.btn-hamburger > i{
	font-size: 22px;
}


/* is loading */
.btn.is-loading{
	background-image: url("../../images/icons/spinner_white.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px 28px;
	pointer-events: none;
}
.btn.is-loading > *{
	opacity: 0;
}

.link.is-loading{
	background-image: url("../../images/icons/spinner.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px 28px;
	pointer-events: none;
}
.link.is-loading > *{
	opacity: 0;
}

select.is-loading{
	background-image: url("../../images/icons/spinner.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 28px 28px;
	pointer-events: none;
}

/* btn-row */
/*.app-page .btn-row{
	margin: 20px 0;
}
.app-page .btn-row:last-child{
	margin-bottom: 0;
}
.app-page .btn-row > div{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: -6px;
	padding-right: -6px;
}
.app-page .btn-row > div .btn{
	margin: 6px;
}*/
/* ---------- /buttons ---------- */


/* ---------- badge ---------- */
.badge{
	--bs-badge-padding-x: 8px;
	--bs-badge-padding-y: 6px;
	--bs-badge-border-radius: 3px;

	--bs-badge-font-size: 12px;
}
.badge-border-radius-lg{
	--bs-badge-border-radius: 7px;
}

.badge.bg-light{
	--bs-badge-color: var(--color-base);
}
/* ---------- /badge ---------- */


/* ---------- tag ---------- */
.tag{
	display: inline-flex;
	align-items: stretch;
	background-color: var(--color-secondary);
	border-radius: 8px;
	padding: 0;

	color: #fff;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
}
.tag > span{
	padding: 5px 8px;
}
.tag button{
	background-color: transparent;
	border: 0;
	padding: 0 3px 0 0;
	color: inherit;
}
.tag button .fi{
	display: block;
	color: inherit;
	font-size: 16px;
}
/* ---------- /tag ---------- */


/* ---------- alert ---------- */
/* ---------- /alert ---------- */


/* ---------- pagination ---------- */
.pagination{
	display: block;
	margin: 30px 0;
}
.pagination:last-child{
	margin-bottom: 0;
}
.pagination ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.pagination li{
	padding-right: 3px;
	margin-bottom: 8px;
}
.pagination a{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	min-height: 25px;
	border-radius: 4px;

	color: #000;
	font-size: 12px;

	transition: var(--transition-color);
}
.pagination a:hover{
	color: var(--color-base-light);
}
.pagination a.active{
	background-color: var(--color-info);
	color: #fff;
}
/* ---------- /pagination ---------- */


/* ---------- form ---------- */
.form-group{
	margin-bottom: 10px;
}

.form-label{
	margin: 0 0 6px 5px;

	color: var(--color-base-light);
	font-size: 10px;
	font-weight: bold;
	line-height: 1.25;
	text-transform: uppercase;
}

.form-control,
.virtual-select .vscomp-toggle-button,
.virtual-select .vscomp-wrapper{
	font-family: var(--font-family-base);
}

.form-control,
.form-select,
.virtual-select .vscomp-toggle-button{
	height: var(--btn-size);
	border-radius: 8px;
	padding: .375rem .75rem;

	transition: all 0.2s ease;

	color: var(--color-base-light);
	font-size: 14px;
	font-weight: 400;
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus,
.virtual-select .vscomp-toggle-button,
.desktop .virtual-select .vscomp-wrapper:hover .vscomp-toggle-button,
.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
	background-color: #fff;
	border-color: var(--color-secondary-light);
	box-shadow: none;
}
.virtual-select .vscomp-wrapper:not(.has-value) .vscomp-value{
	color: var(--color-muted);
	opacity: 1;
}

.card .form-control,
.card .form-control:focus,
.card .form-select,
.card .form-select:focus,
.card .virtual-select .vscomp-toggle-button,
.card .desktop .virtual-select .vscomp-wrapper:hover .vscomp-toggle-button,
.card .virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.card .virtual-select.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
	border-color: #fff;
}
/*.form-select{
	!*--color: #f00;*!
	!*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");*!
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}*/


.form-control::placeholder{
	color: var(--color-muted);
}


.form-select,
.virtual-select .vscomp-arrow::after{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 12px auto;
}

.form-select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-position: right 12px center;
}
.form-select,
.virtual-select .vscomp-toggle-button{
	padding-right: 36px !important;
}

.app .virtual-select,
.modal .virtual-select{
	display: block;
	width: 100%;
	max-width: none;
}
.virtual-select.pop-comp-active{
	position: relative;
	z-index: 10;
}
.vscomp-wrapper.show-as-popup .vscomp-dropbox-container{
	z-index: 150 !important;
}
.virtual-select .vscomp-toggle-button{
	padding-top: 0;
	padding-bottom: 0;
}
.virtual-select .vscomp-value {
	height: 28px;
	line-height: 27px;
}
.virtual-select .vscomp-arrow{
	justify-content: flex-end;
	padding-right: 10px;
}
.virtual-select .vscomp-arrow::after{
	width: 15px;
	height: 15px;
	background-position: center;
	border: 0;
	margin: 0;
	transform: rotate(0deg);
	transition: transform 0.1s ease-in-out;
}
.virtual-select.pop-comp-active .vscomp-arrow::after{
	transform: rotate(-180deg);
}

.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select .vscomp-wrapper:focus .vscomp-toggle-button{
	box-shadow: none;
}

.virtual-select .pop-comp-wrapper{
	background-color: transparent;
	border: 1px solid var(--color-secondary-light);
	box-shadow: none;
}
.virtual-select .vscomp-dropbox{
	background-color: #fff;
	box-shadow: 0 10px 10px rgba(0,0,0,0.025);
	border-radius: 8px;
	padding: 10px 0;
}
.virtual-select .has-search-input .vscomp-dropbox{
	padding-top: 0;
}
.virtual-select .vscomp-wrapper:not(.show-as-popup) .vscomp-options-container{
	max-height: 210px !important;
}
.virtual-select .vscomp-option{
	background-color: transparent !important;
	padding: 0 .75rem;
	color: var(--color-base-lighter);
	font-size: 14px;
}
.virtual-select .vscomp-option:hover{
	background-color: #589FF2 !important;
	color: #fff;
}
.virtual-select .vscomp-option.selected{
	background-color: var(--color-info) !important;
	color: #fff;
}
.virtual-select .vscomp-wrapper.multiple .vscomp-option:not(.selected):hover .checkbox-icon::after{
	border-color: #fff;
}
.virtual-select .vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after{
	border-bottom-color: #fff;
	border-right-color: #fff;
}

.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button,
.virtual-select.pop-comp-active .vscomp-wrapper:focus .vscomp-toggle-button{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.desktop .virtual-select.pop-comp-active .vscomp-toggle-button{
	z-index: 55;
}
.desktop .virtual-select.pop-comp-active .pop-comp-wrapper,
.tablet .virtual-select.pop-comp-active .pop-comp-wrapper{
	z-index: 50;
}
.desktop .virtual-select.pop-comp-active .pop-comp-wrapper.position-bottom,
.tablet .virtual-select.pop-comp-active .pop-comp-wrapper.position-bottom{
	margin-top: -15px;
}
.desktop .virtual-select.pop-comp-active .pop-comp-wrapper.position-top,
.tablet .virtual-select.pop-comp-active .pop-comp-wrapper.position-top{
	margin-top: 15px;
}
.virtual-select .pop-comp-wrapper.position-top .vscomp-dropbox{
	padding: 10px 0 15px;
}

.virtual-select .vscomp-wrapper.show-as-popup .vscomp-dropbox-container{
	padding: 0 var(--content-padding-x);
}
.virtual-select .vscomp-wrapper.show-as-popup .vscomp-dropbox{
	width: 100%;
	padding: 10px 0;
}


textarea.form-control{
	height: auto !important;
	resize: none;
}


/* checkbox, radio */
.form-check{
	display: inline-flex;
	min-height: 16px;
	padding: 0;
}
.form-check .form-check-input{
	width: 16px;
	height: 16px;
	background-color: #fff;
	border-color: var(--color-base-lightest);
	margin: 2px 8px 0 0;
}
.form-check .form-check-input:focus{
	box-shadow: none;
}
.form-check .form-check-input:checked{
	background-color: var(--color-success);
	border-color: var(--color-success);
}
.form-check-reverse{
	flex-direction: row-reverse;
}
.form-check-reverse .form-check-input{
	margin-right: 0;
	margin-left: 8px;
}


/* toggler */
.form-toggler{
	display: inline-flex;
	position: relative;
	overflow: hidden;
	margin: 0;
}
.form-toggler input{
	opacity: 0;
	position: absolute;
	left: -100%;
}
.form-toggler > i{
	flex-shrink: 0;
	display: flex;
	width: 32px;
	height: 20px;
	background-color: var(--color-base-lightest);
	border-radius: 16px;
	padding: 2px;
	position: relative;
}
.form-toggler > i::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	border-radius: 50%;
	position: relative;
}
.form-toggler > i,
.form-toggler > i::before{
	transition: all 0.3s ease;
}
.form-toggler input:checked + i{
	background-color: var(--color-success);
}
.form-toggler input:checked + i::before{
	transform: translateX(12px);
}

.form-toggler > i + span,
.form-toggler > span + i{
	margin: auto 0 auto 10px;
	font-size: 14px;
}
.form-group .form-toggler{
	margin: 9px 0;
}

.form-toggler.size-sm > i{
	width: 23px;
	height: 13px;
	padding: 1px;
	top: 2px;
}
.form-toggler.size-sm > i::before{
	width: 11px;
	height: 11px;
}
.form-toggler.size-sm input:checked + i::before{
	transform: translateX(10px);
}
.form-toggler.size-sm > i + span,
.form-toggler.size-sm > span + i{
	margin-left: 8px;
	font-size: 12px;
}


/* form controls with icon-btn */
.input-with-icon-btn{
	position: relative;
}
.input-with-icon-btn .form-control{
	padding-right: 44px;
}
.input-with-icon-btn .icon-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
.input-with-icon-btn .icon-btn .fi{
	color: var(--color-secondary);
	font-size: 24px;
	transition: var(--transition-color);
}
.input-with-icon-btn .icon-btn:hover .fi{
	color: var(--color-base);
}

/*.password-visibility-toggle-btn{
	pointer-events: none;
}
.form-control:not(:placeholder-shown) ~ .password-visibility-toggle-btn,
.form-control:-webkit-autofill ~ .password-visibility-toggle-btn{
	pointer-events: auto;
}*/

/* input group */
.form-input-group{
	display: flex;
	background-color: #fff;
	border-radius: 8px;
}
.form-input-group .form-control{
	border: 0;
}
.form-input-group div.form-control{
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
}
.form-input-group .btn-wrap{
	flex-grow: 1;
	width: auto;
	background-color: transparent !important;
	border-color: transparent !important;
	border-radius: 0 !important;
}
.form-input-group .btn-wrap{
	flex-shrink: 0;
	display: flex;
	padding: 6px 10px 6px 0;
}
.form-input-group .btn-wrap .btn,
.form-input-group .btn-wrap .icon-btn{
	height: 100%;
	min-height: auto;
}
.form-input-group .btn-wrap .btn{
	border-radius: 5px;
	padding: 0 12px;

	font-size: 11px;
}
.form-input-group .btn-wrap .icon-btn{
	min-width: var(--btn-size-sm);
}
.form-input-group .btn-wrap .icon-btn .fi{
	color: var(--color-secondary);
	font-size: 20px;
}
.form-input-group .btn-wrap .icon-btn:hover .fi{
	color: var(--color-base);
}

/* file uploader */
.file-uploader div.form-control{
	padding-right: 0;
}
.file-uploader .btn-browse{
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.file-uploader .btn-browse input{
	opacity: 0;
	width: 0;
	position: absolute;
	top: 0;
	left: -100%;
}

.btn-file-uploader{
	position: relative;
}
.btn-file-uploader input[type=file]{
	opacity: 0;
	position: absolute;
	left: -100%;
}


/* otp */
.otp-inputs-row{
	display: flex;
	justify-content: center;
}
.otp-input-group .form-control{
	width: 38px;
	height: 38px;
	border-radius: 5px;
	padding-left: 0;
	padding-right: 0;
	margin: 0 5px;

	text-align: center;
}

.otp-input-group input::-webkit-outer-spin-button,
.otp-input-group input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.otp-input-group input[type=number] {
	-moz-appearance: textfield;
}
.otp-input-group .error-text{
	padding: 14px 0 0 0;
	text-align: center;
}


/* input icon */
.search-input,
.date-input{
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 16px auto;
}
.search-input{
	background-image: url(../../images/icons/search_gray.svg);
	padding-right: 26px;

}
.date-input{
	background-image: url(../../images/icons/calendar_month_gray.svg);
	padding-right: 24px;
}


/* error */
.error-text,
.invalid-feedback{
	display: none;
	padding: 2px 0 0 5px;
	color: var(--color-danger-light);
	font-size: 12px;
}
.has-error .error-text,
.has-error .invalid-feedback{
	display: block;
}
.form-control.is-invalid{
	background-image: none !important;
}
/* ---------- /form ---------- */


/* ---------- datepicker ---------- */
.air-datepicker{
	--adp-color: var(--color-base) !important;
	--adp-nav-color-secondary: var(--color-base-lighter) !important;
	--adp-day-name-color: var(--color-primary) !important;
	--adp-color-current-date: var(--color-primary) !important;
	--adp-cell-background-color-selected: var(--color-primary) !important;
	--adp-color-disabled: var(--color-base-lightest) !important;
	/*--adp-color-other-month: var(--color-base-lightest) !important;*/

	--adp-btn-color: var(--color-link) !important;
	--adp-btn-color-hover: var(--color-link) !important;
	--adp-btn-background-color-hover: var(--color-secondary-light) !important;
	--adp-font-size: 12px !important;
}
/* ---------- /datepicker ---------- */


/* ---------- bg-img ---------- */
.bg-img{
	display: block;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}
.bg-img:not(.ratio)::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.bg-img--cover{
	background-size: cover;
}
.bg-img--contain{
	background-size: contain;
}
.bg-img.fit-container{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* ---------- /bg-img ---------- */


/* ---------- ratio, fit ---------- */
.ratio{
	display: block;
	overflow: hidden;
}
.ratio img,
.ratio video,
.object-fit-cover{
	object-fit: cover;
}
.object-fit-contain{
	object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
	display: inline-flex;

	color: var(--color-base);
	font-size: 14px;
}
.item-with-icon > span{
	align-self: center;
}
.item-with-icon > img,
.item-with-icon > .fi{
	flex-shrink: 0;
}
.item-with-icon > img{
	height: 20px;
}
.item-with-icon img + span,
.item-with-icon .fi + span,
.item-with-icon span + img,
.item-with-icon span + .fi{
	margin-left: 10px;
}

.item-with-icon.size-lg{
	font-size: 16px;
}
.item-with-icon.size-lg > img{
	height: 24px;
}
/* ---------- /item with icon ---------- */


/* ---------- slick slider ---------- */
/*.slick-slide{
	outline: none;
}
.slick-arrow{
	display: block;
	width: 32px;
	height: 32px;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 32px auto;
	border: 0;
	outline: 0;
	overflow: hidden;
	text-indent: -9999px;

	position: absolute;
	top: 50%;
	z-index: 10;

	transform: translateY(-50%);
}
.slick-prev{
	background-image: url(../images/icons/arrow_left_white.svg);
	left: 10px;
}
.slick-next{
	background-image: url(../images/icons/arrow_right_white.svg);
	right: 10px;
}

.slick-slider .slick-dots{
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	position: absolute;
	bottom: 20px;
	left: 0;
}
.slick-slider .slick-dots li{
	margin: 0 4px;
}
.slick-slider .slick-dots button{
	display: block;
	width: 8px;
	height: 8px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 50%;
	outline: none !important;
	padding:0;
	overflow:hidden;
	text-indent:-9999px;
}
.slick-slider .slick-dots button:hover,
.slick-slider .slick-dots .slick-active button{
	background-color: #0d6efd !important;
	border-color: #0d6efd !important;
}*/
/* ---------- /slick slider ---------- */


/* ---------- card ---------- */
.card {
	--bs-card-border-radius: 8px;
	--bs-card-inner-border-radius: var(--bs-card-border-radius);

	background-color: var(--color-secondary-light);
	border: 0;
}
.card.rounded-0{
	--bs-card-border-radius: 0;
}

.content-bg-dark .card,
.bg-stripped .card{
	background-color: #fff;
}

.card-header{
	border-bottom: 0;
	padding: 8px 16px;
	font-size: 16px;
}
.card-header.border-bottom{
	background-color: transparent !important;
	border-bottom: 1px solid var(--color-base-lightest) !important;
}

.card-body {
	padding: 20px 16px;
}

.card-body .card-title,
.card-section-title{
	color: #000;
	font-size: 16px;
	margin-bottom: 10px;
}

.card-header .card-title{
	color: var(--color-base);
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}

.card hr{
	border-top-color: var(--color-base-lightest);
	margin: 16px 0;
	opacity: 1;
}

.card-section:not(:last-child){
	border-bottom: 1px solid var(--color-base-lightest);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.card.bg-white{
	background-color: #fff;
}
.card.bg-white .card-header{
	background-color: #E9E9EB;
	color: var(--color-base);
}
.card.bg-white .card-body{
	color: var(--color-base-light);
}

.card-selectable{
	cursor: pointer;
	position: relative;
}
.card-selectable::before,
.card-selectable::after{
	content: "";
	width: 19px;
	height: 19px;
	background: url(../../images/icons/success_gray.svg) center no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: 0;
}
.card-selectable.is-selected::before{
	background-image: url(../../images/icons/success.svg);
}
.card-selectable:hover::before,
.card-selectable.is-selected::before{
	opacity: 1;
}


.card.zig-zag-bottom{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.card.zig-zag-bottom:after{
	content: "";
	display: block;
	width: 100%;
	height: 20px;
	background: #fff url(../../images/zigzag_gray_light.svg) 0 0 repeat-x;
	/*background-size: 100% auto;*/
}

.card.bg-white.zig-zag-bottom:after{
	background: var(--color-secondary-light) url(../../images/zigzag_white.svg) 0 0 repeat-x;
}


/*.card-section {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 16px;
}
.card-section:last-child {
    border-bottom: 0;
}

.card-section-title {
    font-size: 16px;
    margin-bottom: 10px;
}
.card-section-title:last-child {
    margin-bottom: 0;
}*/
/* ---------- /card ---------- */


/* ---------- tabs ---------- */
.tab-nav {
	border-bottom: 1px solid var(--color-base-lightest);
}

.tab-nav li {
	padding-right: 30px;
	position: relative;
}
.tab-nav li:last-child{
	padding-right: 0;
}
.tab-nav a,
.tab-nav button{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	background-color: transparent;
	border: 0;
	padding: 4px 0;

	color: var(--color-base-light);
	font-size: 14px;
	line-height: 24px;
	text-transform: uppercase;
}
.tab-nav .active {
	font-weight: bold;
}

.tab-content {
	padding: 20px 0 10px;
}
/* ---------- /tabs ---------- */


/* ---------- dropdown ---------- */
.dropdown-menu{
	background-color: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
	padding: 9px;
}
.dropdown-menu ul{
	list-style: none;
}
button.dropdown-menu-item{
	background-color: transparent;
	border: 0;
}
.dropdown-menu-item{
	display: inline-flex;
	align-items: center;
	padding: 2px 0;
	color: var(--color-base);
	font-size: 12px;

	transition: var(--transition-color),var(--transition-bg-color);
}
.dropdown-menu-item > .fi{
	font-size: 18px;
	margin-right: 10px;
}
.dropdown-menu-item:hover{
	color: var(--color-link);
}
/* ---------- /dropdown ---------- */


/* ---------- modal ---------- */
.modal-backdrop{
	--bs-backdrop-opacity: 0.8;
}
.modal-dialog{
	--bs-modal-width: 542px;
	--modal-padding-x: 16px;
	--modal-padding-y: 20px;
}
.modal-sm{
	--bs-modal-width: 350px;
}
.modal-lg{
	--bs-modal-width: 620px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}
.modal-xl{
	--bs-modal-width: 900px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}
.modal-content{
	background-color: var(--color-secondary-light);
	border: 0;
	border-radius: 17px;
}
.modal-content.box-shadow{
	box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
}

.modal-close-btn{
	background-color: transparent;
	border: 0;
	padding: 8px;

	color: #777;
}
.modal-close-btn .fi{
	color: inherit;
	font-size: 18px;
}
.modal-close-btn:hover{
	color: var(--color-base);
}
.modal-content > .modal-close-btn{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.modal-title{
	color: #000;
	font-size: 14px;
}

.modal-header{
	padding-top: 36px;
}

.modal-body{
	padding: var(--modal-padding-y) var(--modal-padding-x);
}
/*.modal-body:first-child,
.modal-close-btn + .modal-body{
	padding-top: 24px;
}*/
/* ---------- /modal ---------- */


/* ---------- confirm modal ---------- */
.jconfirm .jconfirm-bg {
	background-color: #000 !important;
	opacity: .8 !important;
}
.jconfirm .jconfirm-box-container{
	width: 100%;
	max-width: 372px;
}
.jconfirm .jconfirm-box{
	background-color: var(--color-secondary-light) !important;
	box-shadow: none !important;
	border-radius: 17px !important;
	padding: 2.5rem 2rem !important;
}

.jconfirm .jconfirm-box div.jconfirm-title-c{
	padding-bottom: 1rem;

	color: var(--color-base);
	font-size: var(--fs-h2);
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane,
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
	overflow: visible !important;
	margin-bottom: 0;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
	color: var(--color-secondary);
	font-size: var(--fs-text);
	font-weight: normal;
	line-height: 1.5;
	text-align: center;
}
.jconfirm .jconfirm-box .jconfirm-buttons{
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 0 !important;
	margin-top: 1.5rem;
}

.jconfirm .jconfirm-box .jconfirm-buttons button{
	width: calc(50% - 5px);
	min-height: 38px;
	border-radius: 8px;
	padding: 0.375rem 1rem;
	margin: 0;

	font-size: 14px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default{
	background-color: var(--color-light) !important;
	color: var(--color-base) !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover{
	background-color: var(--color-light-hover) !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-danger{
	background-color: var(--color-primary) !important;
	color: #fff !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-danger:hover{
	background-color: var(--color-primary-hover) !important;
}
/* ---------- /confirm modal ---------- */


/* ---------- slider ---------- */
.swiper-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--color-secondary-light);
	border-radius: 50%;

	cursor: pointer;
	user-select: none;

	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);

	color: var(--color-base-dark);
	font-size: 20px;

	transition: var(--transition-color),var(--transition-bg-color);
}

.swiper-btn-prev{
	left: 10px;
}
.swiper-btn-next{
	right: 10px;
}

.swiper-btn .fi{
	display: block;
	color: inherit;
	font-size: inherit;
}
.swiper-btn-prev .fi{
	padding-right: 3px;
}
.swiper-btn-next .fi{
	padding-left: 3px;
}

.swiper-btn:hover{
	color: var(--color-info);
}

.swiper-button-disabled,
.swiper-button-lock,
.swiper:not(.swiper-initialized) .swiper-btn {
	display: none;
}

.swiper-pagination-bullet {
	--swiper-pagination-bullet-inactive-color: var(--color-dark);
	--swiper-pagination-color: var(--color-dark);
}

@media (min-width: 1400px) {
	.swiper-btn{
		width: 46px;
		height: 46px;
		font-size: 24px;
	}
}

/*@media (max-width: 767px) {
	.swiper-btn{
		display: none;
	}
}*/
/* ---------- /slider ---------- */


/* ---------- products ---------- */
.products-grid{
	--bs-gutter-y: 2.25rem;
}
.products-grid > div{
	display: flex;
	flex-direction: column;
}
.products-grid .products-grid-item{
	flex-grow: 1;
}

.products-grid-item,
.products-grid-item .info-wrap{
	display: flex;
	flex-direction: column;
}
.products-grid-item{
	background-color: var(--color-secondary-light);
	border-radius: 12px;
	padding: 7px 7px 0;
	position: relative;
}
.products-grid-item > figure{
	position: relative;
}
.products-grid-item .ratio{
	background-color: var(--color-secondary-light);
	border-radius: 8px;
}
.products-grid-item .ratio::before{
	padding-top: 100%;
}
.products-grid-item .ratio img{
	transition: transform 0.15s linear;
}
.products-grid-item .info-wrap{
	flex-grow: 1;
	min-height: 54px;
	padding: 10px 0 10px 5px;
}
.products-grid-item .product-title{
	margin: auto 0;
	color: var(--color-base);
	font-size: 14px;
}

.products-grid-item .badges-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.bg-stripped .products-grid-item,
.content-bg-dark .products-grid-item{
	background-color: #fff;
}

.products-grid-item:hover .ratio img{
	transform: scale(1.1);
}

@media (min-width: 992px) {
	.categories-grid-item .info-wrap{
		min-height: 58px;
	}
	.categories-grid-item .product-title{
		font-size: 16px;
	}
}
/* ---------- /products ---------- */


/* ---------- products carousel ---------- */
.products-carousel .swiper-btn-prev{
	left: 8px;
}
.products-carousel .swiper-btn-next{
	right: 8px;
}

.products-carousel .products-grid-item .info-wrap{
	min-height: 54px;
}
.products-carousel .products-grid-item .product-title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
}

@media (min-width: 1200px) {
	.swiper.products-carousel{
		--spcecing-x: 16px;

		padding: 0 var(--spcecing-x);
	}
	.products-carousel::before,
	.products-carousel::after{
		content: "";
		width: var(--spcecing-x);
		background-color: #fff;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 3;
	}
	.products-carousel::before,
	.products-carousel .swiper-btn-prev{
		left: 0;
	}
	.products-carousel::after,
	.products-carousel .swiper-btn-next{
		right: 0;
	}
	.products-carousel .swiper-btn{
		z-index: 5;
	}
}
@media (min-width: 1400px) {
	.swiper.products-carousel{
		--spcecing-x: 23px;
	}
}
@media (min-width: 1600px) {
	.swiper.products-carousel{
		--spcecing-x: 66px;
	}
}
/* ---------- /products carousel ---------- */


/* ---------- discount cards ---------- */
.row.discount-cards-row{
	--bs-gutter-x: 6px !important;
	--bs-gutter-y: 6px !important;
}
.discount-card{
	--bs-card-border-radius: 5px;

	background-color: #fff;
}
.discount-card .card-header,
.discount-card .card-body{
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
.discount-card .card-header{
	background-color: #E9E9EB;
	padding: 6px;
	color: var(--color-base);
	font-size: 14px;
}
.discount-card .card-body{
	padding: 11px 6px;
	color: var(--color-base-light);
	font-size: 12px;
}
/* ---------- /discount cards ---------- */


/* ---------- preview modal ---------- */

.preview-modal .modal-body{
	padding-top: 32px;
	padding-bottom: 20px;
}
.preview-modal .img-wrap::before{
	padding-top: 100%;
}
.preview-modal .img-wrap img{
	object-fit: contain;
}
@media (min-width: 576px) {
	.preview-modal .modal-dialog{
		--bs-modal-width: 604px;
		--modal-padding-x: 42px;

		padding-top: 54px;
		padding-bottom: 28px;
	}
}
/* ---------- /preview modal ---------- */


/* ---------- products list ---------- */
.products-list-item{
	--img-width: 100px;
	--col-start-width: calc(var(--img-width) + var(--bs-gutter-x));
	--controls-wrap-width: calc(170px + var(--bs-gutter-x));

	border-bottom: 1px solid var(--color-base-lightest);
	padding: 16px 8px;
	position: relative;
	color: var(--color-base-light);
	font-size: 12px;
}
.products-list-item:last-child{
	border-bottom: 0;
}

.products-list-item .col-start{
	width: var(--col-start-width);
}

.products-list-item .img-wrap,
.products-list-item .img-wrap img{
	width: 100%;
}
/*.products-list-item .img-wrap::before{
	padding-top: 100%;
}*/

.products-list-item .title{
	color: #000;
	font-size: 12px;
}

@media (min-width: 576px) {
	.products-list-item {
		--img-width: 79px;
	}
	.products-list-item > .row{
		min-height: 112px;
	}
	.products-list-item.size-lg > .row{
		min-height: 130px;
	}

	.products-list-item .img-wrap::before{
		padding-top: 142%;
	}

	.products-list-item .col-center{
		max-width: calc(100% - var(--col-start-width) - var(--controls-wrap-width));
	}
	.products-list-item .title{
		padding-top: 2px;
	}

	.products-list-item .col-end .row{
		justify-content: flex-end;
	}

	.products-list-item .col-end{
		position: absolute;
		top: 16px;
		right: 8px;

		text-align: right;
	}
	.products-list-item .col-end > *:first-child{
		line-height: 1.2;
	}

}
@media (min-width: 1200px) {
	.products-list-item .col-center{
		padding-left: 16px;
	}
}

@media (max-width: 575px) {
	.products-list-item .col-end{
		padding-top: 10px;
	}
	.products-list-item .col-end .btn{
		padding: 0;
	}
	.products-list-item .col-end .btn > span{
		display: none !important;
	}
}
/* ---------- /products list ---------- */


/* ---------- media items ---------- */
.media-grid{
	--bs-gutter-y: 2.25rem;
}
.media-grid > div{
	display: flex;
	flex-direction: column;
}
.media-grid .media-grid-item{
	flex-grow: 1;
}

.media-grid-item,
.media-grid-item .info-wrap{
	display: flex;
	flex-direction: column;
}
.media-grid-item{
	background-color: var(--color-secondary-light);
	border-radius: 12px;
	padding: 7px 7px 0;
	position: relative;
}
.media-grid-item > figure{
	position: relative;
}
.media-grid-item .ratio{
	background-color: var(--color-secondary-light);
	border-radius: 8px;
}
.media-grid-item .ratio::before{
	padding-top: 100%;
}
.media-grid-item .ratio img{
	transition: transform 0.15s linear;
}
.media-grid-item .info-wrap{
	flex-grow: 1;
	padding: 14px 0 14px 5px;
}
.media-grid-item .info-wrap a{
	color: inherit;
}
.media-grid-item .title{
	color: var(--color-base);
	font-size: 14px;
	text-transform: none;
}
.media-grid-item .text{
	margin-top: 8px;

	color: #717171;
	font-size: 13px;
}

.media-grid-item .badges-wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.bg-stripped .media-grid-item,
.content-bg-dark .media-grid-item{
	background-color: #fff;
}

.media-grid-item:hover .ratio img{
	transform: scale(1.1);
}

@media (min-width: 992px) {
	.media-grid-item .title{
		font-size: 16px;
	}
	.media-grid-item .text{
		font-size: 14px;
	}
}
/* ---------- /media items ---------- */




/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */
.main-slider .ratio::before{
	padding-top: 30.667%;
}

.mobile .main-slider{
	display: none !important;
}

@media (min-width: 768px) {
	.main-slider .ratio::before{
		height: 220px;
		padding-top: 0;
	}
}
@media (min-width: 1536px) {
	.main-slider .ratio::before{
		padding-top: 14.455%;
	}
}


@media (min-width: 1200px) {
	.main-slider .swiper-btn-prev{
		left: 14px;
	}
	.main-slider .swiper-btn-next{
		right: 14px;
	}

	/*.main-slider .ratio::before{
		height: 284px;
	}*/
}
@media (min-width: 1600px) {
	.main-slider .swiper-btn-prev{
		left: 28px;
	}
	.main-slider .swiper-btn-next{
		right: 28px;
	}
}

/*@media (max-width: 1199px) {
	.main-slider .ratio::before{
		padding-top: 52.56%;
	}
}*/
@media (max-width: 576px) {
	.section-main-slider + .section{
		padding-top: 20px;
	}
}
/* ---------- /home ---------- */


/* ---------- product details ---------- */
.product-details-container{
	padding-top: var(--content-padding-y);
}
.product-details-container:last-child{
	padding-bottom: var(--content-padding-y);
}

/* --- slider --- */
.product-slider-wrap{
	width: 100%;
	margin-bottom: 20px;
}

.product-slider-wrap .swiper-btn{
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}
.product-slider-wrap .img-wrap{
	background-color: var(--color-secondary-light);
}
.product-slider-wrap .video-wrap{
	background-color: #000;
}
.product-slider-wrap .img-wrap::before,
.product-slider-wrap .video-wrap::before{
	padding-top: 100%;
}

.product-slider-nav{
	margin-top: 18px;
}
.product-slider-nav .img-wrap{
	cursor: pointer;
}
.product-slider-nav .swiper-slide-thumb-active .img-wrap::after{
	content: "";
	width: 100%;
	height: 100%;
	border: 2px solid var(--color-primary);
	position: absolute;
	top: 0;
	left: 0;
}
.product-slider-nav .i-play{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	position: absolute;
	top: 0;
	left: 0;

	color: #fff;
	font-size: 44px;
	font-variation-settings: 'FILL' 1;
}

@media (min-width: 992px) {
	.product-details-container .row-main{
		--aside-col-width: calc(440px + var(--bs-gutter-x));
		--main-col-width: calc(100% - var(--aside-col-width));
	}
	.product-details-container .col-main{
		width: var(--main-col-width);
	}
}
@media (min-width: 1400px) {
	.product-slider-wrap .swiper-btn{
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
}
/* ---------- /product details ---------- */


/* ---------- cart ---------- */
.cart-container{
	padding-top: var(--content-padding-y);
}
.cart-container:last-child{
	padding-bottom: var(--content-padding-y);
}

@media (min-width: 992px) {
	.cart-container .row-main{
		--aside-col-width: calc(240px + var(--bs-gutter-x));
		--main-col-width: calc(100% - var(--aside-col-width));
	}
	.cart-container .row-main.col-aside-lg{
		--aside-col-width: calc(320px + var(--bs-gutter-x));
	}
	.cart-container .col-main{
		width: var(--main-col-width);
	}
	.cart-container .col-aside{
		width: var(--aside-col-width);
	}
}
/* ---------- /cart ---------- */


/* ---------- account ---------- */
.page-account{
	padding-top: var(--content-padding-y-1);
	padding-bottom: var(--content-padding-y-1);
}

.page-account .card-main{
	border-radius: 0;
}
.page-account .card-main .title{
	color: #000;
}
.page-account .card-main .form-group{
	margin-bottom: 20px;
}

.page-account .card-main .card-main-head{
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.page-account .filters-container{
		display: block !important;
	}
}
@media (min-width: 992px) {
	.page-account .card-main .page-title{
		margin-bottom: 24px;
	}
	.page-account .card-main-head .page-title{
		margin-bottom: 0;
	}
}
@media (min-width: 1059px) {
	.page-account .card-main > .card-body{
		padding: 30px 40px;
	}
}

@media (max-width: 767px) {
	/* filters */
	.page-account .filters-container{
		display: none;
		width: 100%;
		background-color: #F8F8F8;
		border-radius: 8px;
		box-shadow: 0 10px 4px rgba(0,0,0,0.12);
		padding: 16px;
		margin-top: 10px;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
	}
}


/* --- orders --- */
.orders-table .row-tr > div:nth-child(1){
	width: 44px;
}
.orders-table .row-tr > div:nth-child(2){
	width: 80px;
}
.orders-table .row-tr > div:nth-child(3){
	width: 150px;
}
.orders-table .row-tr > div:nth-child(4){
	width: 130px;
}
.orders-table .row-tr > div:nth-child(5){
	width: 108px;
}
.orders-table .row-tr > div:nth-child(6){
	width: 84px;
}
.orders-table .row-tr > div:nth-child(7){
	width: 70px;
}
.orders-table .row-tr > div:nth-child(8){
	width: 84px;
}
.orders-table .row-tr > div:last-child{
	margin-left: auto;
}

.orders-table .btn-toggle{
	min-width: auto;
	min-height: auto;
	border: none;
	padding: 0;
}
.orders-table .btn-toggle > i{
	font-size: 24px;
}
.orders-table .btn-toggle > span{
	margin-left: 2px;
}

@media (min-width: 576px) and (max-width: 767px) {
	.orders-table .row-tr > div:nth-child(1),
	.orders-table .row-tr > div:nth-child(2),
	.orders-table .row-tr > div:nth-child(3),
	.orders-table .row-tr > div:nth-child(4),
	.orders-table .row-tr > div:nth-child(5),
	.orders-table .row-tr > div:nth-child(8){
		width: 33.3333%;
	}

	.orders-table .row-tr > div:nth-child(3),
	.orders-table .row-tr > div:nth-child(5){
		text-align: center;
	}
	.orders-table .row-tr > div:nth-child(4),
	.orders-table .row-tr > div:nth-child(8){
		text-align: right;
	}

	.orders-table .row-tr > div:nth-child(5){
		order: 7;
		margin-left: auto;
	}
	.orders-table .row-tr > div:nth-child(6){
		width: auto;
		padding-right: 5px;
	}
	.orders-table .row-tr > div:nth-child(7){
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}
	.orders-table .row-tr > div:nth-child(8){
		order: 8;
	}

	/*.orders-table .row-table-head > div:nth-child(7){
		display: none;
	}*/
}
@media (min-width: 768px) and (max-width: 991px) {
	.orders-table .row-tr > div:nth-child(3){
		width: 160px;
	}
	.orders-table .row-tr > div:nth-child(4){
		width: 150px;
	}
	.orders-table .row-tr > div:nth-child(8){
		width: auto;
		margin-left: auto;
		text-align: right;
	}

	.orders-table .row-table-head > div:nth-child(7){
		display: none;
	}
}

@media (min-width: 992px) {
	.orders-table .btn-toggle{
		display: flex;
	}
	.orders-table .btn-toggle > span{
		display: none;
	}
}

@media (max-width: 991px) {
	.orders-table .row-tr > div:first-child,
	.orders-table .row-tr > div:last-child{
		order: 10;
		width: 50%;
	}
	.orders-table .row-table-head > div:first-child,
	.orders-table .row-table-head > div:last-child{
		display: none;
	}

	.orders-table .row-tr > div:nth-child(6){
		width: auto;
		padding-right: 5px;
	}
	.orders-table .row-tr > div:nth-child(7){
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}
}
@media (max-width: 575px) {
	.orders-table .row-tr > div:nth-child(3),
	.orders-table .row-tr > div:nth-child(5),
	.orders-table .row-tr > div:nth-child(8){
		text-align: right;
	}

	.orders-table .row-tr > div:nth-child(1){
		width: 35%;
		padding-left: 0;
	}

	.orders-table .row-tr > div:nth-child(2),
	.orders-table .row-tr > div:nth-child(5){
		width: 40%;
	}
	.orders-table .row-tr > div:nth-child(3),
	.orders-table .row-tr > div:nth-child(4),
	.orders-table .row-tr > div:nth-child(8){
		width: 60%;
	}
	.orders-table .row-tr > div:nth-child(8){
		margin-left: auto;
	}
	.orders-table .row-tr > div:last-child{
		flex-grow: 1;
		width: auto;
	}
}
@media (max-width: 349px) {
	.orders-table .row-tr > div:nth-child(8) {
		width: 55%;
	}
}


.orders-table .accordion-item-body{
	padding: 0 10px;
}

/* --- products --- */
.orders-list-product-item{
	display: flex;
	border-bottom: 1px solid var(--color-base-lightest);
	padding: 16px 0;

	color: var(--color-base);
	font-size: 12px;
}
.orders-list-product-item:last-child{
	border-bottom: 0;
}

.orders-list-product-item .img-wrap{
	flex-shrink: 0;
	width: 70px;
}
.orders-list-product-item .img-wrap .ratio::before{
	padding-top: 142%;
}

.orders-list-product-item .info-wrap{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding-left: 10px;
}

@media (min-width: 576px) {
	.orders-list-product-item .img-wrap{
		margin-left: 24px;
	}
	.orders-list-product-item .info-wrap{
		padding-left: 20px;
	}
}
@media (max-width: 349px) {
	.orders-list-product-item .img-wrap{
		width: 53px;
	}
}

/* --- */
.order-product-item{
	border-bottom: 1px solid var(--color-base-lightest);
	padding: 32px 0;
}
.order-product-item .img-wrap{
	width: 100%;
}
.order-product-item .img-wrap .ratio::before{
	padding-top: 142%;
}

.order-product-item .swiper-btn{
	width: 28px;
	height: 28px;
}
.order-product-item .swiper-btn-prev{
	left: 5px;
}
.order-product-item .swiper-btn-next{
	right: 5px;
}
.order-product-item .swiper-btn .fi{
	font-size: 14px;
	font-weight: 600;
}

@media (min-width: 576px) {
	.order-product-item .img-wrap{
		max-width: 210px;
	}
}
/* ---------- /account ---------- */


/* ---------- 404 ---------- */
.container-404{
	max-width: calc(756px + var(--content-padding-x) * 2);
}
.container .container-404{
	padding: 0;
}

.container-404 .card-body{
	padding: 40px 24px;
}
@media (min-width: 576px) {
	.container-404 .card-body{
		padding: 44px;
	}
}
@media (max-width: 767px) {
	.container-404 .card-body{
		text-align: center;
	}
}
/* ---------- /404 ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */





/* ---------- print ---------- */
.print-page-brake{
	page-break-inside: avoid;
	page-break-after: auto;
}

@media print {
	.app-top-bar,
	.app-header,
	.app-footer,
	.page-nav,
	.btn-hamburger,
	.card.zig-zag-bottom:after{
		display: none !important;
	}

	.card{
		background: none !important;
		border: none !important;
	}

	.title.section-title,
	.title.page-title {
		font-size: 24px;
	}

	.text,
	.text-wrap{
		font-size: 12px;
	}
}
/* ---------- /print ---------- */