.bs-bb *{box-sizing:border-box}

.pos-r{position:relative}
.pos-f{position:fixed!important}

.of-h{overflow:hidden}

.rot-90{transform:rotate(90deg)}

.m-10{margin:10px}

.mt-a{margin-top:auto}
.mt-5{margin-top:5px}
.mt-10{margin-top:10px}
.mt-16{margin-top:15px}
.mt-20{margin-top:20px}
.mt-25{margin-top:25px}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mt-80{margin-top:80px}

.mb-5{margin-bottom:5px}
.mb-10{margin-bottom:10px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-25{margin-bottom:25px}
.mb-30{margin-bottom:30px}
.mb-40{margin-bottom:40px}
.mb-80{margin-bottom:80px}

.ml-5{margin-left:5px}
.ml-10{margin-left:10px}
.ml-20{margin-left:20px}
.ml-30{margin-left:30px}

.mr-5{margin-right:5px}
.mr-10{margin-right:10px}
.mr-20{margin-right:20px}

.p-10{padding:10px}
.p-16{padding:16px}
.p-20{padding:20px}

.gap-5{gap:5px}
.gap-10{gap:10px}
.gap-20{gap:20px}

.gap-top-4:not(:first-child){margin-top:4px}
.gap-top-8:not(:first-child){margin-top:8px}
.gap-top-16:not(:first-child){margin-top:16px}

.row-gap-5{row-gap:5px}
.row-gap-10{row-gap:10px}
.row-gap-16{row-gap:16px}
.row-gap-20{row-gap:20px}
.row-gap-25{row-gap:25px}

.column-gap-1{column-gap:1%}
.column-gap-2{column-gap:2%}
.column-gap-3{column-gap:3%}
.column-gap-4{column-gap:4%}
.column-gap-5{column-gap:5%}
.column-gap-10{column-gap:10%}
.column-gap-12{column-gap:12%}

.grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: end;
}

.flex-2-cols>*{flex-basis:48%}
.flex-3-cols>*{flex-basis:32%}

.w-20{width:20%}
.w-25{width:25%}
.w-50{width:49%}
.w-65{width:65%}
.w-70{width:70%}
.w-100{width:100%}
.w-fc{width:fit-content}

.full-width-mob{width:100%}

.h-100{height:100%}

.size_10 {
	width: 10px;
	height: 10px;
}
.size_12 {
	width: 12px;
	height: 12px;
}
.size_14 {
	width: 14px;
	height: 14px;
}
.size_16 {
	width: 16px;
	height: 16px;
}
.size_18 {
	width: 18px;
	height: 18px;
}
.size_20 {
	width: 20px;
	height: 20px;
}
.size_22 {
	width: 22px;
	height: 22px;
}
.size_24 {
	width: 24px;
	height: 24px;
}
.size_26 {
	width: 26px;
	height: 26px;
}
.size_30 {
	width: 30px;
	height: 30px;
}
.size_32 {
	width: 32px;
	height: 32px;
}
.size_36 {
	width: 36px;
	height: 36px;
}
.size_40 {
	width: 40px;
	height: 40px;
}
.size_44 {
	width: 44px;
	height: 44px;
}
.size_50 {
	width: 50px;
	height: 50px;
}
.size_64 {
	width: 64px;
	height: 64px;
}
.size_80 {
	width: 80px;
	height: 80px;
}
.size_90 {
	width: 90px;
	height: 90px;
}
.size_100 {
	width: 100px;
	height: 100px;
}
.size_120 {
	width: 120px;
	height: 120px;
}
.size_150 {
	width: 150px;
	height: 150px;
}
.size_400 {
	width: 400px;
	height: 400px;
}

.fw-400{font-weight:400}
.fw-500{font-weight:500}
.fw-600{font-weight:600}
.fw-700{font-weight:700}

.fsize-0_75{font-size:.75rem}
.fsize-0_875{font-size:.875rem}
.fsize-1{font-size:1rem}
.fsize-1_125{font-size:1.125rem}
.fsize-1_25{font-size:1.25rem}

.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}

.ws-n{white-space:nowrap}
.wb-bw{word-break:break-word}

.to-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.to-ellipsis-multiline {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.to-ellipsis-multiline[data-lines="1"] {
	-webkit-line-clamp: 1;
}
.to-ellipsis-multiline[data-lines="2"] {
	-webkit-line-clamp: 2;
}
.to-ellipsis-multiline[data-lines="3"] {
	-webkit-line-clamp: 3;
}

.shadow_s,
.shadow-on-hover_s:hover,
.shadow-on-hover_s:active {
	filter: drop-shadow(var(--box-shadow-s));
}
.shadow_m,
.shadow-on-hover_m:hover,
.shadow-on-hover_m:active {
	filter: drop-shadow(var(--box-shadow-l));
}

.c-white{color:var(--color-white)}
.c-blue{color:var(--color-blue)}
.c-blue-light{color:var(--color-blue-light)}
.c-red{color:var(--color-red)}
.c-yellow{color:var(--color-yellow)}
.c-gray-3{color:var(--color-gray-3)}
.c-gray-dark{color:var(--color-gray-dark)}
.c-brown{color:var(--color-brown)}

.fill_blue-light{fill:var(--color-blue-light)}
.fill_blue{fill:var(--color-blue)}
.fill_blue-dark{fill:var(--color-blue-dark)}
.fill_blue-gradient{fill:url(#blue-gradient) var(--color-blue)}
.fill_purple-light{fill:var(--color-purple-light)}
.fill_purple{fill:url(#purple-gradient) var(--color-purple)}
.fill_red{fill:var(--color-red)}
.fill_red-gradient{fill:url(#red-gradient) var(--color-red)}
.fill_green{fill:var(--color-green)}
.fill_yellow{fill:var(--color-yellow)}
.fill_yellow-2{fill:var(--color-yellow-2)}

.fill_white{fill:var(--color-white)}
.fill_translucent{fill:var(--color-translucent)}
.fill_gray-xlight{fill:var(--color-gray-xlight)}
.fill_gray-light{fill:var(--color-gray-light)}
.fill_gray-6{fill:var(--color-gray-6)}
.fill_gray-3{fill:var(--color-gray-3)}

.fill_gray{fill:var(--color-gray)}
.fill_gray-dark{fill:var(--color-gray-dark)}

.stroke_gray-light {
	stroke-width: 1px;
	stroke: var(--color-gray-light);
}
.stroke_gray {
	stroke-width: 1px;
	stroke: var(--color-gray);
}
.comma-separated:not(:first-child):not(.hidden-el)::before {
	content: ', ';
}
.slash-separated:not(:first-child):not(.hidden-el)::before {
	content: ' / ';
}
.line-separated:not(:first-child):not(.hidden-el)::before {
	content: '|';
	padding-inline: 10px;
	color: var(--color-gray);
}

@media (min-width: 768px) {
	.dn_min-768 {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.dn_min-1200 {
		display: none !important;
	}
	.full-width-mob {
		width: 49%;
	}
}

@media (max-width: 1199px) {
	.dn_max-1199 {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.fd-c_max-991 {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.dn_max-767 {
		display: none !important;
	}
	.of-h_max-767 {
		overflow: hidden;
	}
	.w-100_max-767 {
		width: 100%;
	}
	.fd-c_max-767 {
		flex-direction: column;
	}
	.gap-0_max-767 {
		gap: 0;
	}
}
@media (max-width: 575px) {
	.dn_max-575 {
		display: none !important;
	}
	.grid-2_max-575 {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.gap-5_max-575 {
		gap: 5px;
	}
}