/* IMPORT FONTS */
@font-face {
	font-family: 'Lato';
	src: url('../assets/fonts/Lato-Bold.woff2') format('woff2'),
		 url('../assets/fonts/Lato-Bold.woff') format('woff'),
		 url('../assets/fonts/Lato-Bold.ttf') format('ttf');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url('../assets/fonts/Lato-Semibold.woff2') format('woff2'),
		 url('../assets/fonts/Lato-Semibold.woff') format('woff'),
		 url('../assets/fonts/Lato-Semibold.ttf') format('ttf');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url('../assets/fonts/Lato-Regular.woff2') format('woff2'),
		 url('../assets/fonts/Lato-Regular.woff') format('woff'),
		 url('../assets/fonts/Lato-Regular.ttf') format('ttf');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url('../assets/fonts/Lato-Light.woff2') format('woff2'),
		 url('../assets/fonts/Lato-Light.woff') format('woff'),
		 url('../assets/fonts/Lato-Light.ttf') format('ttf');
	font-weight: 300;
	font-style: normal;
}

/* GLOBAL SETUP */
:root {
	--black: #232323;
	--black-2: #353535;
	--black-3: #616161;
	--black-text: #444444;
	--white: #FFFFFF;
	--primary: #4387F6;
	--primary-light: #a0c1f5;
	--primary-light-2: #C7DBFC;
	--primary-lighter: #e8eef8;
	--primary-lighter-2: #F6F9FF;
	--primary-hover: #3973D1;
	--primary-active: #366CC5;
	--grey-5: #f8f8f8;
	--grey-4: #f5f5f5;
	--grey-3: #e7e7e7;
	--grey-2: #d1d1d1;
	--grey-1: #b0b0b0;
	--outline: #f5F5F5;
	--disabled: #e7e7e7;
	
	--green: #3D6922;
	--green-success: #68AD35;
	--green-light: #E3F4D3;
	--error: #F64343;
	--error-hover: #e43939;
	--error-active: #d12828;
	--error-light: #FBE4D9;
	--error-lighter: #FFF9F9;
	--processing: #FFCA1E;
	--yellow: #AC8600;
	--yellow-light: #FFF2C5;

	--base-url: 'https://artdex.leopi.cloud/v_3_0/';

}

/* BASIC CSS RESET */

body {
	font-family: "Lato", sans-serif !important;
	background-color: var(--white);
}

p {
	margin: 0;
	color: var(--black-text);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: var(--black);
	text-decoration: none;
}

a:link,
a:visited {
	color: var(--black);
}

button.primary-link,
a.primary-link,
a.primary-link:link,
a.primary-link:visited {
	color: var(--black) !important;
	text-decoration: none;
	transition: color .2s ease;
}

button.primary-link:hover,
button.primary-link:active,
button.primary-link.active,
a.primary-link:hover,
a.primary-link:active,
a.primary-link.active {
	color: var(--primary) !important;
}

ol.list-disc {
	list-style: disc;
}

ol.list-disc li::marker {
	font-size: 14px;
}

ul.primary-disc li {
	padding-left: 24px;
	position: relative;
}

ul.primary-disc li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 500px;
	background-color: var(--primary);
}

button {
	border: none;
	font-family: inherit;
}

i {
	line-height: 1 !important;
}

.placeholder {
    display: inline-block;
    min-height: 0em;
    vertical-align: middle;
    cursor: auto;
    background-color: transparent;
    opacity: 1;
}

/* TYPOGRAPHY */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	color: var(--black);
	font-weight: 700;
	margin: 0;
}

.p-sm, .p-md, .p-lg {
	font-weight: 400;
} 

.fw-light {
	font-weight: 300 !important;
}

.fw-regular {
	font-weight: 400 !important;
}

.fw-semibold {
	font-weight: 600 !important;
}

.fw-bold {
	font-weight: 700 !important;
}

.h1 {
	font-size: 28px;
	line-height: normal;
}

.h2 {
	font-size: 24px;
	line-height: normal;
}

.h3 {
	font-size: 20px;
	line-height: normal;
}

.h4 {
	font-size: 18px;
	line-height: normal;
}

.h5 {
	font-size: 16px;
	line-height: normal;
}

.h6 {
	font-size: 14px;
	line-height: normal;
}

.p-xs {
	font-size: 14px;
	line-height: normal;
}

.p-sm {
	font-size: 14px;
	line-height: normal; 
}

.p-md {
	font-size: 16px;
	line-height: normal;
}

.p-lg {
	font-size: 18px;
	line-height: normal;
}

.p-xl {
	font-size: 20px;
	line-height: normal;
}

.p-xxl {
	font-size: 24px;
	line-height: normal;
}

.sub-text {
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 33.6px;
}

.text-overflow {
    max-width: 200px;   /* ili koliko ti treba */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.h1 {
		font-size: 32px;
	}
	
	.h2 {
		font-size: 28px;
	}
	
	.h3 {
		font-size: 20px;
	}
	
	.h4 {
		font-size: 18px;
	}
	
	.h5 {
		font-size: 16px;
	}
	
	.h6 {
		font-size: 14px;
	}

	.sub-text {
		font-size: 20px;
	}
}

@media (min-width: 1200px) {
	.h1 {
		font-size: 46px;
	}
	
	.h2 {
		font-size: 32px;
	}
	
	.h3 {
		font-size: 24px;
	}
	
	.h4 {
		font-size: 20px;
	}
	
	.h5 {
		font-size: 18px;
	}

	.h6 {
		font-size: 16px;
	}
	
	.sub-text {
		font-size: 24px;
	}

	.p-xs {
		font-size: 14px;
	}
	
	.p-sm {
		font-size: 16px; 
	}
	
	.p-md {
		font-size: 18px;
	}
	
	.p-lg {
		font-size: 20px;
	}
	
	.p-xl {
		font-size: 24px;
	}
	
	.p-xxl {
		font-size: 28px;
	}

}


/* ELEMENT STYLES */


.icon-size-50 {
	font-size: 38px;
}

.icon-size-40 {
	font-size: 30px;
}

.line-height-15 {
	line-height: 1.5;
}

.dashed-separator {
	border-bottom: 1px dashed var(--outline);
}

.border {
	--bs-border-color: var(--grey-3) !important;
}

.border-top {
	--bs-border-color: var(--grey-3) !important;
}

.border-bottom {
	--bs-border-color: var(--grey-3) !important;
}

.btn-fixed-width {
	width: 183px !important;
}

.primary-btn,
a.primary-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	font-size: 16px;
	background-color: var(--primary);
	border: 1px solid var(--primary);
	color: var(--white);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease;
}

.primary-btn a,
a.primary-btn a {
	color: var(--white);
}

.primary-btn:hover,
a.primary-btn:hover {
	background-color: var(--primary-hover);
	border: 1px solid var(--primary-hover);
}

.primary-btn:active,
a.primary-btn:active {
	background-color: var(--primary-active);
	border: 1px solid var(--primary-active);
}

.primary-btn:disabled,
a.primary-btn:disabled {
	color: var(--grey-1);
	background-color: var(--grey-3);
	border: 1px solid var(--grey-3);
}

.primary-light-btn,
a.primary-light-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	font-size: 16px;
	background-color: var(--primary-lighter-2);
	border: 1px solid var(--primary);
	color: var(--primary);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease;
}

.primary-light-btn a,
a.primary-light-btn a {
	color: var(--primary);
}

.primary-light-btn:hover,
a.primary-light-btn:hover {
	background-color: var(--primary);
	border: 1px solid var(--primary);
	color: var(--white);
}

.primary-light-btn:active,
a.primary-light-btn:active {
	background-color: var(--primary-active);
	border: 1px solid var(--primary-active);
	color: var(--white);
}

.primary-light-btn:disabled,
a.primary-light-btn:disabled {
	color: var(--grey-1);
	background-color: var(--grey-3);
	border: 1px solid var(--grey-3);
}

.primary-light-btn:hover a,
.primary-light-btn:active a,
a.primary-light-btn:hover a,
a.primary-light-btn:active a {
	color: var(--white);
}

.primary-outline-btn,
a.primary-outline-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	text-wrap: nowrap;
	font-size: 16px;
	background-color: var(--white);
	border: 1px solid var(--primary);
	color: var(--primary);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease;
}

.primary-outline-btn a,
a.primary-outline-btn a {
	color: var(--primary);
}

.primary-outline-btn:hover,
a.primary-outline-btn:hover {
	background-color: var(--primary-hover);
	border: 1px solid var(--primary-hover);
	color: var(--white);
}

.primary-outline-btn:hover a,
a.primary-outline-btn:hover a {
	color: var(--white);
}

.primary-outline-btn:active,
a.primary-outline-btn:active {
	background-color: var(--primary-active);
	border: 1px solid var(--primary-active);
	color: var(--white);
}

.primary-outline-btn:disabled,
a.primary-outline-btn:disabled {
	color: var(--grey-2);
	background-color: var(--white);
	border: 1px solid var(--grey-4);
}

.danger-outline-btn,
a.danger-outline-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	font-size: 16px;
	background-color: var(--white);
	border: 1px solid var(--error);
	color: var(--error);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease;
}

.danger-outline-btn a,
a.danger-outline-btn a {
	color: var(--primary);
}

.danger-outline-btn:hover,
a.danger-outline-btn:hover {
	background-color: var(--error-hover);
	border: 1px solid var(--error-hover);
	color: var(--white);
}

.danger-outline-btn:hover a,
a.danger-outline-btn:hover a {
	color: var(--white);
}

.danger-outline-btn:active,
a.danger-outline-btn:active {
	background-color: var(--error-active);
	border: 1px solid var(--error-active);
	color: var(--white);
}

.danger-outline-btn:disabled,
a.danger-outline-btn:disabled {
	color: var(--grey-2);
	background-color: var(--white);
	border: 1px solid var(--grey-4);
}

.secondary-btn,
a.secondary-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	font-size: 16px;
	background-color: var(--white);
	border: 1px solid var(--grey-3);
	color: var(--black-text);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.secondary-btn.active{
    color:var(--primary);
}

.secondary-btn a,
a.secondary-btn a {
	color: var(--black-text);
}

.secondary-btn:hover,
a.secondary-btn:hover {
	border: 1px solid var(--black-text);
}

.secondary-btn:active,
a.secondary-btn:active {
	background-color: var(--grey-4);
	border: 1px solid var(--black-text);
}

.secondary-btn:disabled,
a.secondary-btn:disabled {
	color: var(--grey-2);
	background-color: var(--white);
	border: 1px solid var(--grey-3);
}


.danger-btn,
a.danger-btn {
	display: block;
	text-align: center;
	padding: 15px 16px;
	line-height: 1;
	width: 100%;
	font-size: 18px;
	background-color: var(--error);
	border: 1px solid var(--error);
	color: var(--white);
	border-radius: 0px;
	font-size: 16px;
	font-weight: 700;
	transition: color .2s ease, background-color .2s ease;
}

.danger-btn a,
a.danger-btn a {
	color: var(--white);
}

.danger-btn:hover,
a.danger-btn:hover {
	background-color: var(--error-hover);
	border: 1px solid var(--error-hover);
}

.danger-btn:active,
a.danger-btn:active {
	background-color: var(--error-active);
	border: 1px solid var(--error-active);
}

.danger-btn:disabled,
a.danger-btn:disabled {
	color: var(--grey-1);
	background-color: var(--grey-3);
	border: 1px solid var(--grey-3);
}


.round-btn {
	display: block;
	padding: 10px 12px;
	background-color: var(--white);
	border-radius: 500px;
	font-size: 16px;
	font-weight: 400;
	border: 1px solid var(--outline);
	transition: color .2s ease, background-color .2s ease;
}

.round-btn:hover {
	background-color: var(--grey-1);
}

.round-btn:active,
.round-btn.active {
	background-color: var(--primary-light);
}

.round-btn:active .add-icon,
.round-btn.active .add-icon {
	background-color: var(--white);
	color: var(--primary);
}

a.login-primary-btn,
.login-primary-btn {
	cursor: pointer;
	display: block;
	padding: 14px 26px;
	background-color: var(--black);
	color: var(--white);
	border: 1px solid var(--black);
	border-radius: 3px;
	transition: background-color .2s ease, color .2s ease;
}

a.login-primary-btn:hover,
.login-primary-btn:hover {
	cursor: pointer;
	background-color: var(--white);
	color: var(--black);
}

a.login-primary-btn:active,
.login-primary-btn:active {
	cursor: pointer;
	background-color: var(--black-text);
	color: var(--white);
}

a.login-primary-clr-btn,
.login-primary-clr-btn {
	cursor: pointer;
	display: block;
	padding: 14px 26px;
	background-color: var(--primary);
	color: var(--white);
	border: 1px solid var(--primary);
	border-radius: 3px;
	transition: background-color .2s ease, color .2s ease;
}

a.login-primary-clr-btn:hover,
.login-primary-clr-btn:hover {
	cursor: pointer;
	background-color: var(--white);
	color: var(--primary);
}

a.login-primary-clr-btn:active,
.login-primary-clr-btn:active {
	cursor: pointer;
	background-color: var(--black-text);
	color: var(--white);
}


a.login-white-btn,
.login-white-btn {
	cursor: pointer;
	display: block;
	padding: 14px 26px;
	background-color: var(--white);
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: 3px;
	transition: background-color .2s ease, color .2s ease;
}

a.login-white-btn:hover,
.login-white-btn:hover {
	cursor: pointer;
	background-color: var(--grey-4);
	color: var(--black);
}

a.login-white-btn:active,
.login-white-btn:active {
	cursor: pointer;
	background-color: var(--grey-3);
	color: var(--black);
}

a.login-secondary-btn,
.login-secondary-btn {
	display: block;
	padding: 14px 26px;
	background-color: var(--white);
	color: var(--black);
	border: 1px solid var(--black);
	border-radius: 3px;
	transition: background-color .2s ease, color .2s ease;
}

nav .login-secondary-btn,
nav .login-primary-btn {
	padding: 12px 26px;
}

a.login-secondary-btn:hover,
.login-secondary-btn:hover {
	background-color: var(--black);
	color: var(--white);
}

a.login-secondary-btn:active,
.login-secondary-btn:active {
	background-color: var(--black-text);
	color: var(--white);
}

a.login-outline-btn,
.login-outline-btn {
	display: block;
	padding: 14px 26px;
	background-color: var(--white);
	color: black;
	border-radius: 3px;
	border: 1px solid var(--grey-3);
	transition: border .2s ease, background-color .2s ease;
}

a.login-outline-btn:hover,
.login-outline-btn:hover {
	border: 1px solid var(--black);
}

a.login-outline-btn:active,
.login-outline-btn:active {
	background-color: var(--outline);
}

a.login-outline-white-btn,
.login-outline-white-btn {
	display: block;
	padding: 14px 26px;
	background-color: transparent;
	color: var(--white) !important;
	border-radius: 3px;
	border: 1px solid var(--white);
	transition: color .2s ease, background-color .2s ease;
}

a.login-outline-white-btn:hover,
.login-outline-white-btn:hover {
	background-color: var(--white);
	color: var(--black) !important;
}

a.login-outline-white-btn:active,
.login-outline-white-btn:active {
	background-color: var(--outline);
}


@media(min-width: 768px) {
	.primary-btn,
	a.primary-btn {
		padding: 15px 24px;
		font-size: 18px;
		width: 183px;
	}

	.primary-outline-btn,
	a.primary-outline-btn {
		padding: 15px 24px;
		font-size: 18px;
		width: 183px;
	}

	.address-book-settings .primary-outline-btn,
	.address-book-settings a.primary-outline-btn {
		width: min-content;
	}

	.secondary-btn,
	a.secondary-btn {
		padding: 15px 24px;
		font-size: 18px;
		width: 183px;
	}

	.round-btn {
		padding: 6px 12px 6px 8px;
	}

	.icon-size-50 {
		font-size: 50px;
	}

	.icon-size-40 {
		font-size: 40px;
	}
}

.form-control {
	background-color: var(--grey-4);
	color: var(--black);
	padding: 14px 16px;
	border: 1px solid transparent;
	/*border-color: transparent !important;*/
	border-radius: 2px;
	line-height: 1;
}

.form-select {
	background-color: var(--grey-4);
	color: var(--grey-1);
	padding: 14px 16px;
	border: 1px solid transparent;
	border-color: transparent !important;
	border-radius: 2px;
	line-height: 1;

}

.form-control.input-control {
	border-color: var(--grey-3);
	padding: 16px 24px;
	border-radius: 3px;
	font-size: 18px;
}

.form-select.input-control {
	border-color: var(--grey-3);
	padding: 16px 24px;
	border-radius: 3px;
	font-size: 18px;
}

.form-select:focus .option-style {
	color: var(--black);
}

.form-select.selected {
	color: var(--black);
}

input[type=date].form-control {
	color: var(--grey-1);
}

input[type=date].form-control.selected {
	color: var(--black);
}

.form-select::placeholder,
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
	color: var(--grey-1);
	line-height: normal;
}


.form-control.with-icon-left,
.form-select.with-icon-left {
	padding-left: 60px;
}

.form-control.with-icon-left + button,
.form-select.with-icon-left + button {
	padding: 12px;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	width: min-content;
	z-index: 2;
}

.form-control.with-icon-left + i,
.form-select.with-icon-left + i {
	padding: 12px;
	font-size: 18px;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	width: min-content;
	z-index: 2;
}

.form-control.with-icon-right,
.form-select.with-icon-right {
	padding-right: 60px;
}

.form-control.with-icon-right + button,
.form-select.with-icon-right + button {
	padding: 12px;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: min-content;
	z-index: 2;
}

.form-control.with-icon-right + i,
.form-select.with-icon-right + i {
	padding: 12px;
	font-size: 18px;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: min-content;
	z-index: 2;
}


.form-control.input-control.with-icon,
.form-select.input-control.with-icon {
	padding-right: 60px;
}

.form-control.input-control.with-icon + button,
.form-select.input-control.with-icon + button {
	top: 50%;
	right: 24px;
	left: auto;
	transform: translateY(-50%);
	z-index: 2;
}

.form-control.input-control.with-icon + i,
.form-select.input-control.with-icon + i {
	top: 50%;
	right: 24px;
	left: auto;
	transform: translateY(-50%);
	z-index: 2;
}

.form-control::placeholder {
	color: var(--grey-1);
	font-size: 18px;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--primary) !important;
	background-color: var(--grey-4) !important;
	box-shadow: none;
}

.form-control.search-input {
	background-color: transparent !important;
	border-bottom: 1px solid var(--grey-2) !important;
	border-radius: 0 !important;
	transition: border-color .2s ease;
}

.form-control.search-input.active,
.form-control.search-input:focus {
	border-top-color: transparent !important;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: var(--black) !important;
}

.form-control.search-input.active + .header-search-btn i,
.form-control.search-input:focus + .header-search-btn i  {
	transition: color .2s ease;
}

.form-control.search-input.active + .header-search-btn i,
.form-control.search-input:focus + .header-search-btn i  {
	color: var(--black);
}


/* HEADER SEARCH RESULTS */
.header-search-results {
	position: static;
	width: 100%;
	padding-top: 6px;
	background-color: transparent;
}


.header-search-results .nav-tabs {
	flex-wrap: nowrap;
	border: none;
	border-bottom: 1px solid var(--grey-3);
	padding: 1px 0;
	overflow-x: auto;
}

@media (min-width: 992px) {
	.header-search-results {
		min-width: 350px;
		position: absolute;
		width: 99%;
		top: calc(100% + 10px);
		z-index: 1000;

		background-color: var(--white);
		border: 1px solid var(--grey-3);
		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
	}

	.header-search-results .nav-tabs {
		flex-wrap: nowrap;
		border: none;
		border-bottom: 1px solid var(--grey-3);
		padding: 1px 16px;
		overflow-x: auto;
	}
}

.header-search-results .nav-link {
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom-color: transparent;
	border-width: 2px;
	color: var(--grey-1);
	font-size: 16px;
	font-weight: 400;
}

.header-search-results .nav-link.active {
	border-bottom-color: var(--black) !important;
}

.header-search-results .search-results-wrapper {
	max-height: 400px;
	overflow-y: auto;
}

.header-search-results .search-results-wrapper ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.search-result-link {
	padding: 4px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--white);

	transition: background-color .2s ease;
}

.search-result-link:hover {
	background-color: var(--grey-5);
}

.result-link-img {
	width: 40px;
	height: 40px;

	flex-shrink: 0;
	border-radius: 200px;
	overflow: hidden;
}

.result-link-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media (min-width: 992px) {
	.search-result-link {
		padding: 4px 16px;
	}

	.result-link-img {
		width: 46px;
		height: 46px;
	}
}


/* HEADER NOTIFICATIONS */
.notifications-menu-mobile  {
	position: static;

	background-color: transparent;
	box-shadow: none;
	border: none;
	display: flex;
	flex-direction: column;
}

.mobile-notifications .offcanvas-header p {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.notifications-menu {
	position: absolute;
	top: 100%;
	right: -20px;
	min-width: 400px;

	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 120px); /* Alternative: Leave space for header */
	overflow: hidden;

	background-color: var(--white);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--grey-3);
	z-index: 1000;
}


.notifications-menu .dropdown button {
	color: var(--grey-2);
	transition: color .2s ease;
}

.notifications-menu .dropdown button:hover {
	color: var(--text-dark);
}

.notifications-holder {
	padding: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;

	flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: unset;
}

@media (min-width: 992px) {
	.notifications-holder {
		padding: 4px 10px;
	}
}

.notification-link {
	display: inline-block;
	text-align: start;
	padding: 10px;
	border-radius: 8px;
	background-color: var(--grey-5);
	color: var(--black) !important;
}

.notification-time {
	color: var(--grey-1) !important;
}


.notification-link.new-notification {
	background-color: var(--primary-lighter-2);
}

.notification-user-img {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 200px;
	overflow: hidden;
}

.notification-user-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.custom-input-group {
	display: flex;
	align-items: center;
	gap: 0;
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid transparent;
	transition: border-color .2s ease;
	height: 49px;
}

.custom-input-group:focus-within {
	border-color: var(--primary);
}

.custom-input-group .form-control,
.custom-input-group .form-select {
	height: 100%;
	border: none !important;
	border-radius: 0;
	line-height: 1 !important;
}

.custom-input-group .form-control {
	padding: 12.5px 16px 12.5px 0 !important;

}

.custom-input-group .form-select {
	max-width: 90px;
	padding: 14.5px 16px !important;
}

.show-password-icon {
	color: var(--grey-2);
}

.show-password-icon:hover {
	color: var(--grey-1);
}

.show-password-icon.active {
	color: var(--black);
}

textarea.form-control {
	resize: none;
}

/* Remove increment buttons for all number inputs */
input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    margin: 0;
}

/* Remove Webkit specific increment buttons */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Firefox specific increment buttons */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type=number]:focus {
	border-color: var(--black) !important;
}

input[type=number]:focus-visible {
	border-color: var(--black) !important;
}

::-webkit-calendar-picker-indicator {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="grey" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.form-select {
	font-size: 18px;
}

.form-select:focus {
	border-color: var(--black);
	box-shadow: none;
}

.form-select.select-input {
	background-color: var(--grey-4);
	color: var(--black);
	padding: 12px 16px;
	border: none;
	border-radius: 0;
}

.form-select {
	color: var(--grey-1);
}

.form-select.selected {
	color: var(--black);
}

.form-check {
	padding-left: 1.7rem;
}

.form-check .form-check-input,
.form-check .form-check-label {
	line-height: 1;
	border-radius: 2px;
}

.form-check-input[type=radio] {
	border-radius: 500px;
}

.form-check-input[role=switch] {
	background-color: var(--grey-2);
	border-color: var(--grey-2);
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
	font-size: 24px;
	width: 1.8em;
	border-radius: 30px;
	float: none;
	margin: 0;
}

.form-check-input[role=switch]:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

.form-check-input[role=switch]:focus {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
	box-shadow: none;
}

.form-check-input:not([role=switch]):checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

.form-check-input:not([role=switch]):focus {
	border-color: var(--primary);
}

.form-check-input:not([role=switch]):focus{
	box-shadow: none;
}

#onboarding-packages .form-check-input[role=switch] {
	background-color: var(--primary);
	border-color: var(--primary);
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
	font-size: 24px;
	width: 1.8em;
	float: none;
	margin: 0;
}

#onboarding-packages .form-check-input[role=switch]:checked {
	background-color: var(--primary);
	border-color: var(--primary);
}

#onboarding-packages .form-check-input[role=switch]:focus {
	border-color: var(--primary);
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

#onboarding-packages .form-check-input[role=switch]:focus{
	box-shadow: none;
}

.form-check-label.disabled {
	opacity: 0.5;
	cursor: default;
}

.form-check-box {
	padding: 20px 16px;
	padding-left: 44px;
	border-radius: 8px;
	border: 1px solid var(--outline);
	width: 100%;
}

.form-check-box.active {
	border-color: var(--primary);
}

.form-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--black);
}

@media(min-width: 768px) {
	.form-label {
		font-size: 18px;
	}
}


/* QUARTER + YEAR PICKER */
#yearpicker-dropdown {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid #ccc;
	max-height: 200px;
	overflow-y: auto;
	z-index: 1000;
}
#yearpicker-dropdown div {
	padding: 5px;
	cursor: pointer;
}
#yearpicker-dropdown div:hover {
	background-color: #f0f0f0;
}

.yearPicker {
	padding: 13px 16px;
	border-radius: 8px;
	font-size: 14px;
	width: 100%;
	background-color: transparent;
	border: 1px solid var(--outline);
	color: var(--grey-2);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.yearPicker.active {
	font-size: 16px;
	padding: 12px 16px;
	color: var(--black);
}

.yearPicker:focus {
	border-color: var(--primary);
	box-shadow: 0px 0px 0px 3px var(--primary-light);
}

.dropdown-container .dropdown-menu:not(.multiple-select .dropdown-menu) {
    min-width: 250px;
    text-align: center;
	border: 1px solid var(--outline);
	margin-top: 11px !important;
}

.custom-options-holder {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
}

button[data-options] {
	width: 100%;
}


/* PAGINATION */

.pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 48px;
	margin-bottom: 48px;
}

.pagination .page-link {
	padding: 10px 14px;
	font-size: 16px;
	background-color: var(--white);
	border: 1px solid var(--grey-3);
	color: var(--black);
	cursor: pointer;
}

.pagination .page-link:hover,
.pagination .page-link.active {
	background-color: var(--black);
	border: 1px solid var(--black);
	color: var(--white);
}

.pagination .page-link.disabled {
	background-color: var(--grey-3);
	border: 1px solid var(--grey-3);
	color: var(--grey-1);
}

.choose-page .form-control {
	width: 80px;
	background-color: var(--white);
	border: 1px solid var(--grey-3) !important;
	color: var(--black);
	transition: border-color .2s ease;
	font-size: 16px;
	padding: 10px;
	text-align: center;
}

.choose-page .form-control:focus {
	border-color: var(--primary) !important;
	background-color: var(--white) !important;
}



/* MEDIA UPLOAD */
.form-multimedia {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 48px 0;
	border: 1px dashed var(--outline);
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.form-multimedia:hover {
	border-color: var(--primary);
	background-color: var(--primary-lighter);
}

.border-radius-2 {
	border-radius: 2px;
}

.border-radius-3 {
	border-radius: 3px;
}

.border-radius-8 {
	border-radius: 8px;
}

.border-radius-pill {
	border-radius: 500px;
}

.add-icon {
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 500px;
	background-color: var(--primary);
	color: white;
	font-size: 25px;
	font-weight: 500;
	transition: color .2s ease, background-color .2s ease;
}

/* COLOR STYLES */
.bg-black {
	background-color: var(--black) !important;
}

.bg-black-2 {
	background-color: var(--black-2) !important;
}

.bg-white {
	background-color: var(--white);
}

.bg-grey-1 {
	background-color: var(--grey-1);
}

.bg-grey-2 {
	background-color: var(--grey-2);
}

.bg-grey-3 {
	background-color: var(--grey-3);
}

.bg-grey-4 {
	background-color: var(--grey-4);
}

.bg-grey-5 {
	background-color: var(--grey-5);
}

.bg-primary-clr {
	background-color: var(--primary);
}

.bg-primary-light {
	background-color: var(--primary-light);
}

.bg-primary-lighter {
	background-color: var(--primary-lighter);
}

.bg-primary-lighter-2 {
	background-color: var(--primary-lighter-2);
}

.bg-black-text {
	background-color: var(--black-text);
}

.bg-error {
	background-color: var(--error);
}

.bg-error-light {
	background-color: var(--error-light);
}

.bg-error-lighter {
	background-color: var(--error-lighter);
}

.bg-yellow {
	background-color: var(--yellow);
}

.bg-yellow-light {
	background-color: var(--yellow-light);
}

.bg-green {
	background-color: var(--green);
}

.bg-green-light {
	background-color: var(--green-light);
}

.border-line {
	border: 1px solid var(--outline);
}

.border-grey-2 {
	border: 1px solid var(--grey-2);
}

.border-primary-clr {
	border-color: var(--primary);
}

.black-text {
	color: var(--black);
}

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

.white-text {
	color: var(--white);
}

.error-text {
	color: var(--error);
}

.green-text {
	color: var(--green);
}

.yellow-text {
	color: var(--yellow);
}

.grey-text-1 {
	color: var(--grey-1);
}

.grey-text-2 {
	color: var(--grey-2);
}

.grey-text-3 {
	color: var(--grey-3);
}

.grey-text-dark {
	color: var(--black-text);
}


/* CUSTOM PADDING */
.p-10 {
	padding: 10px; 
}

.ps-10 {
	padding-left: 10px; 
}

.pe-10 {
	padding-right: 10px; 
}

.pb-10 {
	padding-bottom: 10px; 
}

.p-12 {
	padding: 12px; 
}

.ps-12 {
	padding-left: 12px; 
}

.pe-12 {
	padding-right: 12px; 
}

.pb-12 {
	padding-bottom: 12px; 
}

.pt-12 {
	padding-top: 12px; 
}

.py-12 {
	padding-top: 12px;
	padding-bottom: 12px;
}

.px-12 {
	padding-left: 12px;
	padding-right: 12px;
}

.p-20 {
	padding: 20px; 
}

.ps-20 {
	padding-left: 20px; 
}

.pe-20 {
	padding-right: 20px; 
}

.pb-20 {
	padding-bottom: 20px; 
}

.pt-20 {
	padding-top: 20px; 
}

.py-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.px-20 {
	padding-left: 20px;
	padding-right: 20px;
}

.p-32 {
	padding: 32px; 
}

.ps-32 {
	padding-left: 32px; 
}

.pe-32 {
	padding-right: 32px; 
}

.pb-32 {
	padding-bottom: 32px; 
}

.pt-32 {
	padding-top: 32px; 
}

.py-32 {
	padding-top: 32px;
	padding-bottom: 32px;
}

.px-32 {
	padding-left: 32px;
	padding-right: 32px;
}

.p-40 {
	padding: 40px; 
}

.ps-40 {
	padding-left: 40px; 
}

.pe-40 {
	padding-right: 40px; 
}

.pb-40 {
	padding-bottom: 40px; 
}

.pt-40 {
	padding-top: 40px; 
}

.py-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.px-40 {
	padding-left: 40px;
	padding-right: 40px;
}

.gap-12 {
	gap: 12px;
}

.gap-32 {
	gap: 32px;
}

.gx-40 {
	--bs-gutter-x: 40px;
}


/* PADDING 86px with media query */

.p-86 {
	padding: 64px; 
}

.ps-86 {
	padding-left: 64px; 
}

.pe-86 {
	padding-right: 64px; 
}

.pb-86 {
	padding-bottom: 64px; 
}

.pt-86 {
	padding-top: 64px; 
}

.py-86 {
	padding-top: 64px;
	padding-bottom: 64px;
}


@media (min-width: 992px) {
	.p-86 {
		padding: 72px; 
	}
	
	.ps-86 {
		padding-left: 72px; 
	}
	
	.pe-86 {
		padding-right: 72px; 
	}
	
	.pb-86 {
		padding-bottom: 72px; 
	}
	
	.pt-86 {
		padding-top: 72px; 
	}
	
	.py-86 {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

@media (min-width: 1200px) {
	.p-86 {
		padding: 86px; 
	}
	
	.ps-86 {
		padding-left: 86px; 
	}
	
	.pe-86 {
		padding-right: 86px; 
	}
	
	.pb-86 {
		padding-bottom: 86px; 
	}
	
	.pt-86 {
		padding-top: 86px; 
	}
	
	.py-86 {
		padding-top: 86px;
		padding-bottom: 86px;
	}
}

.m-32 {
	padding: 32px; 
}

.ms-32 {
	padding-left: 32px; 
}

.me-32 {
	padding-right: 32px; 
}

.mb-32 {
	padding-bottom: 32px; 
}

.mt-32 {
	padding-top: 32px; 
}

.my-32 {
	padding-top: 32px;
	padding-bottom: 32px;
}

.mx-32 {
	padding-left: 32px;
	padding-right: 32px;
}



/* GLOBAL PAGE STYLES */
.page-wrapper {
	padding-left: 16px;
	padding-right: 16px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.page-content {
	height: 100%;
	margin-top: 128px;
	padding-bottom: 24px;
	width: 100%;
}

@media (min-width: 768px) {
	.page-content {
		margin-top: 136px;
	}
}

@media (min-width: 992px) {
	.page-wrapper {
		max-width: 1140px;
	}

	.page-content {
		margin-top: 161px;
	}
}

@media (min-width: 1200px) {
	.page-wrapper {
		max-width: 1280px;
	}

	.page-content {
		margin-top: 181px;
	}
}

@media (min-width: 1400px) {
	.page-wrapper {
		max-width: 1420px;
	}
}

@media (min-width: 1600px) {
	.page-wrapper {
		max-width: 1620px;
	}
}

/*****************
	 HEADER
*****************/

/* PROFILE NAV */
.navbar-brand {
	width: 45px;
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
	--bs-offcanvas-zindex: 1112;
}

.offcanvas-backdrop {
	z-index: 1111;
}

body[data-modal-open="header-search"] .modal-backdrop {
    display: none;
}

.offcanvas-header .offcanvas-title {
	width: 40px;
}

.offcanvas-header .offcanvas-title img {
	width: 100%;
}

#nav-search-form {
	width: 100%;
}

#nav-search-form input {
	padding-left: 48px;
	padding-bottom: 16px;
	font-size: 16px;
	color: var(--black);
}

#nav-search-form .form-control:focus {
	box-shadow: none;
}

#nav-search-form .form-control::-webkit-search-cancel-button {
	background-color: red;
}


.options-dropdown {
	padding: 8px;
	border-radius: 0;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.options-dropdown li button,
.options-dropdown li a {
	background-color: var(--white);
	transition: background-color .2s ease;
	padding: 8px;
}

.suboptions-dropdown li button,
.suboptions-dropdown li a {
	background-color: var(--white);
	transition: background-color .2s ease;
	padding: 4px 8px;
}

.options-dropdown li button:hover,
.options-dropdown li button.active,
.options-dropdown li a:hover,
.options-dropdown li a.active {
	background-color: var(--grey-4);
}

.suboptions-dropdown li button:hover,
.suboptions-dropdown li button.active,
.suboptions-dropdown li a:hover,
.suboptions-dropdown li a.active {
	background-color: transparent;
	color: var(--black-text) !important;
}

.options-dropdown li button i,
.options-dropdown li a i,
.options-dropdown li button,
.options-dropdown li a {
	color: var(--black-text) !important;
	transition: color .2s ease;
}

.options-dropdown li button:hover i,
.options-dropdown li button.active i,
.options-dropdown li a:hover i,
.options-dropdown li a.active i,
.options-dropdown li button:hover,
.options-dropdown li button.active,
.options-dropdown li a:hover,
.options-dropdown li a.active {
	color: var(--black) !important;
}

.options-dropdown .dropdown-item.no-icon {
	display: block;
}

.options-dropdown .dropdown-item i {
	justify-self: center;
}


.header-search-btn {
	position: absolute;
	font-size: 25px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--grey-1);
}


.dropdown-menu[data-bs-popper] {
    top: 100%;
    right: 0;
	left: auto;
}

.dropdown-toggle::after {
	display: none;
}

.profile-nav .dropdown-menu {
	border-radius: 0;
	box-shadow: 6px 4px 20px 6px rgba(35, 35, 35, 0.05);
	border-color: var(--outline);
}

.nav-item > .dropdown-menu .dropdown-item {
	padding: 17px 20px;
	border-top: 1px solid var(--grey-4);
}

.profile-nav .nav-link i {
	font-size: 24px;
}

@media (max-width: 992px) {
	.navbar-nav .nav-link:not(.submenu-toggler) {
		display: grid !important;
		grid-template-columns: 28px 1fr !important;
		gap: 10px !important;
	}
	
	.navbar-nav .nav-link i {
		font-size: 20px;
		justify-self: center;
	}

	.navbar-nav .nav-link.submenu-toggler span:nth-child(1) {
		display: grid !important;
		grid-template-columns: 28px 1fr !important;
		gap: 10px !important;
	}
}

.nav-link .submenu-icon {
	transform: rotate(0);
	transition: transform .2s ease;
}

.nav-link[aria-expanded="true"] .submenu-icon {
	transform: rotate(-180deg);
}

.profile-types .dropdown-menu .dropdown-item {
	padding: 12px 40px 12px 20px;
	border-top: none;
	color: var(--grey-1);
}

.profile-types .dropdown-menu .dropdown-item:hover {
	color: var(--black);
	background-color: transparent;
}

.profile-types > .dropdown-item:active h5,
.profile-types > .dropdown-item:active p {
	color: var(--white);
}

.header-sublinks-holder {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 12px;
	background-color: var(--white);

	display: none;
	grid-template-columns: 1fr;
	gap: 8px;
	box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
	.header-sublinks-holder {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		padding: 20px;
	}
}

@media (min-width: 1200px) {
	.header-sublinks-holder {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

.header-sublink {
	width: 100% !important;
	text-transform: none !important;
	text-align: start !important;
	padding: 16px;
	width: 100%;
	height: 100%;

	background-color: var(--white);
	border-radius: 8px;
	transition: background-color .2s ease;
}

.header-sublink p {
	text-wrap: auto;
	line-height: 1.5;
}

.header-sublink .sublink-icon {
	width: 48px;
	height: 48px;
	background-color: var(--white);
	border-radius: 8px;
	border: 1px solid var(--grey-3);
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items:center;
}

.header-sublink .sublink-icon i {
	color: var(--black);
}

.header-sublink:hover {
	background-color: var(--grey-4) !important;
}

.header-sublink.active {
	background-color: var(--grey-4) !important;
}

@media (max-width: 1200px) {
	.header-sublink {
		background-color: var(--grey-4) !important;
	}

	.header-sublink.active {
		background-color: var(--grey-3) !important;
	}
}

.header-nav-link:hover .header-sublinks-holder {
	display: grid;
}

/* STEPS (CART, MARKETPLACE, CART, DISCOVER) */
.steps-tabs-nav .tabs-navigation button {
	border: none;
}

.steps-tabs-nav .tabs-navigation.tabs-sub-navigation button {
	cursor: default;
	background-color: transparent;
	border: none;

	transition: color .2s ease;
}

.steps-tabs-nav .tabs-navigation.tabs-sub-navigation button.active {
	background-color: var(--white);
	color: var(--black);
}

.steps-tabs-nav .tabs-navigation.tabs-sub-navigation button:active {
	background-color: var(--white);
	color: var(--grey-1) !important;
}


.steps-tabs-nav .tabs-navigation.tabs-sub-navigation button:hover::before  {
	display: none;
}

.steps-tabs-nav .tabs-navigation.tabs-sub-navigation button.active::before {
    display: none;
}

.steps-tabs-nav .tab-list li:not(.active) {
	display: none;
}

@media (min-width: 992px) {
	.steps-tabs-nav .tab-list li:not(.active) {
		display: block;
	}
}

.steps-progress {
	margin-top: 10px;
	width: 100%;
	height: 5px;
	background-color: var(--grey-2);
	border-radius: 100px;
	overflow: hidden;
}

.steps-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 100px;

	background-color: var(--primary);
	transition: width .3s ease;
}

.step-number {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--grey-3);
	background-color: var(--white);
	border-radius: 8px;
	width: 40px;
	height: 40px;
}

.step-number.checked {
	background-color: var(--primary-lighter-2);
	color: var(--primary);
	position: relative;
}


.options-dropdown .dropdown-item {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 8px;
	align-items: center;
}

.options-dropdown .dropdown-item i {
	font-size: 18px;
}


.dropdown-item:focus, .dropdown-item:hover {
    color: var(--black);
    background-color: var(--grey-4);
}

.dropdown-item:active {
    background-color: var(--primary);
	color: var(--white) ;
}

.dropstart .dropdown-toggle::before {
	display: none;
}

.profile-types.dropstart .dropdown-menu[data-bs-popper] {
	right: 104%;
}

.my-account-submenu {
	--bs-dropdown-min-width: 300px;
}

.dropdown-item .user-img,
.navbar-nav .user-img {
	width: 50px;
	height: 50px;
	border-radius: 500px;
	overflow: hidden;
}

.dropdown-item .user-img img,
.navbar-nav .user-img img {
	object-fit: cover;
}

.fixed-top {
	z-index: 110;
}


#nav-search-modal .form-control {
	border-color: var(--grey-3) !important;
	padding: 16px 16px 16px 48px;
	line-height: 1.5;
}

#nav-search-modal .form-control::placeholder {
	line-height: 1.2;
}

#nav-search-modal .form-control:focus {
	background-color: var(--white) !important;
	border-color: var(--black) !important;
}

#nav-search-modal .form-control + button {
	transition: color .2s ease
}

#nav-search-modal .form-control:focus + button {
	color: var(--black) !important;
}

#nav-search-modal .header-search-btn {
	position: absolute;
	font-size: 20px;
	left: 10px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	color: var(--grey-1);
}

@media (min-width: 992px) {
	#nav-search-form {
		width: 70%;
	}

	.navbar-brand {
		width: 70px;
	}
}

@media (min-width: 1200px) {
	#nav-search-form {
		width: 50%;
	}

	.navbar-brand {
		width: 90px;
	}
}


/* PAGES NAV */
.pages-nav {
	background-color: var(--black);
}



.pages-nav > ul {
	overflow-x: auto;
}


.pages-nav li {
	width: auto;
}

.pages-nav li a {
	width: min-content;
	min-width: min-content;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 10px;
	text-transform: capitalize;
	display: inline-block;
	text-align: center;
	color: var(--grey-3);
	text-wrap: nowrap;
	transition: background-color .2s ease;
}

.pages-nav li a:hover,
.pages-nav li a.active {
	background-color: var(--black-3);
}

@media (min-width: 540px) {
	.pages-nav li {
		width: 100%;
	}

	.pages-nav li a {
		width: 100%;
		min-width: 82px;
	}
	
}

@media (min-width: 768px) {
	.pages-nav li a {
		font-size: 16px;
		padding: 14px 16px;
	}
	
}

@media (min-width: 992px) {
	.pages-nav li a {
		font-size: 18px;
		text-transform: uppercase;
	}
}

@media (min-width: 1200px) {
	.pages-nav li a {
		font-size: 20px;
	}
}



/*******************
		FOOTER		
********************/
footer {
	padding-top: 64px;
	padding-bottom: 54px;
}

.footer-link {
	color: var(--grey-1) !important;
	transition: color .2s ease;
}

.footer-link:hover {
	color: var(--grey-4) !important;
}

.footer-pages {
	width: 100%;
	flex: 0 0 60%;
}

.footer-newsletter {
	flex: 0 0 25%;
	width: 100%;
}

.copyright-text {
	border-top: 1px solid var(--black-2);
}

footer .input-group .form-control {
	border-radius: 0;
	background-color: var(--black-2);
	color: var(--grey-1);
	padding: 14px 16px;
	border: none;
}

footer .input-group .form-control:focus {
	border: none;
	box-shadow: none;
}

footer .input-group button {
	border-radius: 0;
	background-color: var(--black-2);
	color: var(--grey-1);
	padding: 14px 16px;
	font-smooth: 25px;
	border: none;
	flex-shrink: 0;
}

footer .input-group button:focus {
	border: none;
	box-shadow: none;
}

footer #newsletter-form-btn {
	padding: 12px 22px;
	background-color: var(--primary);
	color: var(--white);
}

footer #newsletter-form-btn:hover {
	background-color: var(--primary-hover);
}

footer #newsletter-form-btn:active {
	background-color: var(--primary-active);
}

footer .social-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 46px;
	height: 46px;
	border-radius: 500px;
	background-color: transparent;
	color: var(--grey-1);
	transition: background-color .2s ease, color .2s ease;
}

footer .social-icon:hover {
	background-color: var(--black-2);
	color: var(--white);
}

@media (min-width: 640px) {
	.footer-newsletter {
		width: 50%;
	}
}

/********************************
		BREADCRUMBS
*********************************/

.breadcrumbs ul {
    display: flex;
    column-gap: 40px;
    padding: 10px 0;
    overflow: auto;
}

.breadcrumbs ul li {
    position: relative;
}

.breadcrumbs ul li:not(:last-child)::after {
    content: '/';
    /*font-family: 'Font Awesome 6 Pro';*/
    position: absolute;
    right: -25px;
    font-size: 18px;
    color: var(--black);
}
.breadcrumbs ul li a {
    color: var(--black);
    font-size: 16px;
}

.breadcrumbs ul li:last-child a {
    color: var(--black);
	font-weight: 700 !important;
}

.breadcrumbs ul li:last-child {
    color: var(--black);
	font-weight: 700 !important;
}



/********************************
		TABS NAVIGATION
*********************************/
.tabs-navigation a {
	padding: 12px;
	border: 1px solid var(--grey-4);
	color: var(--grey-1) !important;
	position: relative;
	/* width: 100%; */
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: capitalize;
	text-wrap: nowrap;
}

.tabs-navigation a:link,
.tabs-navigation a:visited {
	color: var(--grey-1) !important;
}

.tabs-navigation a:link:hover,
.tabs-navigation a:visited:hover,
.tabs-navigation a:link:active,
.tabs-navigation a:link.active,
.tabs-navigation a:visited:active,
.tabs-navigation a:visited.active {
	color: var(--black) !important;
}

.tabs-navigation.tabs-sub-navigation a.active,
.tabs-navigation.tabs-sub-navigation a:active,
.tabs-navigation.tabs-sub-navigation a:link.active,
.tabs-navigation.tabs-sub-navigation a:link:active,
.tabs-navigation.tabs-sub-navigation a:visited.active,
.tabs-navigation.tabs-sub-navigation a:visited:active,
.tabs-navigation.tabs-sub-navigation a:link:hover,
.tabs-navigation.tabs-sub-navigation a:visited:hover {
	background-color: var(--primary-lighter-2);
	color: var(--black) !important;
}



.tabs-navigation ul li:not(:last-child) a {
	border-right: none;
}


.tabs-navigation ul {
	overflow-x: auto;
}

.tabs-navigation ul li {
	/* width: 100%; */
	min-width: 160px;
}

.tabs-navigation.tabs-sub-navigation {
	width: 100%;
}

.tabs-navigation.tabs-sub-navigation ul {
	overflow-x: auto !important;
	min-width: auto;
}

.tabs-navigation.tabs-sub-navigation ul li {
	/* width: 100%; */
	min-width: auto;
}

.tabs-navigation a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0px;
	background-color: var(--black);
	transition: height .2s ease;
	text-wrap: nowrap;
}

.tabs-navigation.tabs-sub-navigation a::before {
	content: '';
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0px;
	background-color: var(--black);
	transition: height .2s ease;
	text-wrap: nowrap;
}

.tabs-navigation.tabs-sub-navigation a::before {
	background-color: var(--primary);
}


.tabs-navigation a:hover::before,
.tabs-navigation a.active::before {
	height: 3px;
	color: var(--black);
}

.coming-soon-wrapper {
	min-height: 250px;
}




@media (min-width: 768px) {
	.coming-soon-wrapper {
		min-height: 350px;
	}
}

@media (min-width: 1200px) {
	.coming-soon-wrapper {
		min-height: 500px;
	}
}

/**********************************************************************
                Snackbar
***********************************************************************/

#snackbar {
    visibility: hidden;
    width: 60%;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 1.5rem;
    position: fixed;
    z-index: 9990;
    left: 20%;
    bottom: 2rem;
}

.show-snackbar {
    visibility: visible !important;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


@media (max-width: 990px) {

    #snackbar {
        width: 90%;
        left: 4.5%;
    }
}


.fade-slide {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
    pointer-events: none;
}

.fade-slide.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: auto;
}


@media(min-width: 768px) {
	.tabs-navigation a {
		padding: 16px;
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.tabs-navigation.tabs-sub-navigation a {
		text-transform: capitalize;
	}

	.tabs-navigation ul li {
		/* width: 100%; */
		min-width: min-content;
	}
}

@media(min-width: 992px) {
	.tabs-navigation a {
		font-size: 18px;
	}
}


/* GLOBAL PAGES CHANGES */

/* ASIDE FILTERS */
.filters-wrapper .aside-show-more-btn {
	transition: color .2s ease;
}

.filters-wrapper .aside-show-more-btn:hover {
	color: var(--primary);
}


/* SEARCH INSIDE PAGES */
.members-search .discover-search {
	padding-left: 24px;
}

#organize-search-from .discover-search + .search-btn {
	color: var(--grey-1) !important;
}

#organize-search-from .discover-search:focus {
	border-bottom-color: var(--black) !important;
}

#organize-search-from .discover-search:focus + .search-btn {
	color: var(--black) !important;
}

/* MEMBER IMG */
.member-img,
.artwork-img {
	border: 1px solid var(--grey-3);
}


/* SELECTED FILTERS */
.selected-filters .filter {
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.selected-filters .filter i {
	transition: color .2s ease;
}

.selected-filters .filter:hover {
	background-color: var(--black);
	color: var(--white);
}

.selected-filters .filter:hover i {
	color: var(--white);
}

.sort-btn + .dropdown-menu label {
	padding: 8px;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.sort-btn + .dropdown-menu label i {
	display: none
}

.sort-btn + .dropdown-menu input[type=radio]:checked + label {
	background-color: var(--grey-4);
}

.sort-btn + .dropdown-menu input[type=radio]:checked + label i {
	display: inline-block;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
	z-index: 10;
}