* {
	-webkit-tap-highlight-color: transparent;
}

html {
	width: 100%;
}

body {
	overscroll-behavior: none;
	touch-action: manipulation;
	font-size: 1rem;
	font-family: 'Roboto', sans-serif;
	color: var(--on-light);
	background-color: var(--brand-050);
	background-position: center top;
	background-size: cover;
	overflow-x: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

body,
html {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden;
}

@supports (height: 100svh) {

	html,
	body {
		height: 100svh;
	}
}

main {
	flex-grow: 1;
	overflow-y: auto;
}

a {
	text-decoration: none !important;
	color: var(--brand-700);
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn {
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child
/*,
.btn:last-child*/

 {
	margin-bottom: 0;
}

.container {
	padding-left: 1em;
	padding-right: 1em;
}

#nickname::placeholder {
	font-size: 0.7rem;
}

.bg-dark {
	background-color: var(--brand-300) !important;
}

.bg-none {
	background: transparent !important;
}

.link {
	color: var(--text-900);
	font-size: .7em;
}

.text-secondary-custom {
	color: var(--text-500);
}

.text-secondary2 {
	text-align: center;
}

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

.font-weight-medium {
	font-weight: 500;
}

.bg-info-gradient {
	background: #696cd4;
	background: -moz-linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
	background: -webkit-linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
	background: linear-gradient(45deg, #696cd4 0%, #80d4ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#696cd4', endColorstr='#80d4ff', GradientType=1);
}

.w-300 {
	max-width: 360px;
	width: 300px;
}

.bottom-center {
	position: fixed;
	bottom: 30px;
	left: 0;
	right: 0;
	width: auto;
	z-index: 999;
	margin: 0 auto;
}

.background {
	background-position: center center;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.small-font {
	font-size: 14px;
	line-height: 22px;
}

.extra-small-font {
	font-size: 90%;
	line-height: 30px;
}

.transition,
.header,
main,
.floating-form-group>.floating-label,
.floating-form-group .floating-input,
.filter,
.menu-push-content .main-menu,
.btn.colorsettings,
.sidebar-right {
	transition: all ease 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
}

.vm {
	vertical-align: middle;
	color: var(--text-600);


}

.border-color {
	border-color: rgba(47, 45, 81, 0.05) !important;
}

.z-1 {
	z-index: 1;
}

.map-view-map {
	position: fixed;
	z-index: 0;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	border: 0;
}

.map-view {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 30px;
	left: 0;
}

.map-box {
	width: 100%;
	height: 120px;
	border-radius: 15px;
	overflow: hidden;
}

.top-30 {
	top: -35px;
	position: relative;
}

.no-caret:after {
	display: none;
}

.dropdown-menu {
	border: 0;
	border-radius: 15px;
	padding: 0.9375rem;
}

.dropdown-menu .dropdown-item {
	border-radius: 15px;
}

::-webkit-scrollbar {
	width: 0px;
	height: 2px;
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: rgba(97, 33, 210, 0.3);
}

::-webkit-scrollbar-track {
	border-radius: 5px;
	background: rgba(97, 33, 210, 0.05);
}

a.card {
	text-decoration: none;
}

main {
	display: block;
	width: 100%;
	top: 0;
	z-index: 1;
	margin: .5em 0 4em 0;
}

.logo-loading {
	text-align: center;
}

.logo-loading img {
	max-width: 100px;
	margin-bottom: 0.9375rem;
}

.logo-loading h3 {
	color: var(--text-900);
	font-size: 30px;
}

.loader-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.loader-ellipsis div {
	position: absolute;
	top: 30px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-700);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader-ellipsis div:nth-child(1) {
	left: 8px;
	animation: loader-ellipsis1 0.6s infinite;
}

.loader-ellipsis div:nth-child(2) {
	left: 8px;
	animation: loader-ellipsis2 0.6s infinite;
}

.loader-ellipsis div:nth-child(3) {
	left: 32px;
	animation: loader-ellipsis2 0.6s infinite;
}

.loader-ellipsis div:nth-child(4) {
	left: 56px;
	animation: loader-ellipsis3 0.6s infinite;
}

@keyframes loader-ellipsis1 {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes loader-ellipsis3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes loader-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(24px, 0);
	}
}

.loader-display {
	position: fixed;
	top: 0;
	left: 0;
	background: url("../img/background2.png") var(--brand-050) fixed;
	background-position: center top;
	background-size: cover;
	z-index: 9999;
}

.icon-size-16 {
	width: 18px;
	height: 18px;
}

.icon-size-12 {
	width: 12px;
	height: 12px;
}

.icon-size-20 {
	width: 20px;
	height: 20px;
}

.icon-size-24 {
	width: 24px;
	height: 24px;
}

.icon-size-26 {
	width: 26px;
	height: 26px;
}

.icon-size-30 {
	width: 30px;
	height: 30px;
}

.icon-size-32 {
	width: 32px;
	height: 32px;
}

.btn-close.icon-size-32 {
	width: 32px !important;
	height: 32px !important;
}

.icon-size-40 {
	width: 40px;
	height: 40px;
}

.icon-size-48 {
	width: 48px;
	height: 48px;
}

.icon-size-96 {
	width: 96px;
}

.icon {
	border-radius: 50%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
}

.icon.icon-48 {
	height: 48px;
	width: 48px;
	line-height: 44px;
}

.icon.icon-35 {
	height: 35px;
	width: 35px;
	line-height: 25px;
}

.icon>span {
	vertical-align: middle;
}

.icon-white {
	filter: invert(1);
}

.icon.icon-44 {
	height: 34px;
	width: 34px;
	line-height: 30px;
}

.icon.icon-44>span {
	font-size: 22px;
}

.icon.icon-100 {
	height: 5em;
	width: 5em;
	line-height: 5em;
}

.icon.icon-100>span {
	font-size: 50px;
}

.icon.rounded {
	border-radius: 15px;
}

.text-dark svg path,
.text-dark svg polyline,
.text-dark svg line,
.text-dark svg rect,
.text-dark svg circle,
.text-dark svg polygon,
.text-white svg path,
.text-white svg polyline,
.text-white svg line,
.text-white svg rect,
.text-white svg circle,
.text-white svg polygon,
.text-danger svg path,
.text-danger svg polyline,
.text-danger svg line,
.text-danger svg rect,
.text-danger svg circle,
.text-danger svg polygon,
.text-secondary svg path,
.text-secondary svg polyline,
.text-secondary svg line,
.text-secondary svg rect,
.text-secondary svg circle,
.text-secondary svg polygon {
	stroke: currentColor !important;
	fill: currentColor;
}

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

.text-white {
	color: var(--brand-050) !important;
}

.text-danger {
	color: var(--state-error) !important;
}

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

.image-circle {
	text-align: center;
	width: 100%;
	padding: 1.25rem 0.9375rem 2.5rem 0.9375rem;
	margin-bottom: 1.25rem;
	position: relative;
}

.image-circle>figure {
	height: 300px;
	width: 300px;
	display: inline-block;
	margin: 0 auto;
	border-radius: 150px;
	vertical-align: top;
}

.image-circle>.icon {
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
	margin: 0 auto -2.5rem auto;
}

footer {
	position: fixed;
	bottom: .1em;
	left: 0;
	width: 100%;
	padding: .5em;
	z-index: 99;
	border-top: .05em solid var(--header-divider);
	background-color: var(--on-brand);
}

.login-box {
	max-width: 350px;
	margin: 0 auto;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	-webkit-outline: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
}

.form-control:focus {
	outline: none;
	box-shadow: none;
}

.form-control {
	line-height: 24px;
	font-size: 16px;
	height: auto;
}

.form-control::placeholder {
	color: var(--text-500);
	font-weight: 400;
	font-size: .8em;
	opacity: .7;
}

#item-description,
#template-description {
	max-height: 4rem;
	overflow-y: auto;
	resize: none;
	transition: height 0.3s ease;

}

#item-description.is-overflow {
	overflow-y: auto;
	box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, .08),
		inset 0 10px 10px -10px rgba(0, 0, 0, .06);
	padding-bottom: .5rem;
}

#item-description,
#template-description {
	-webkit-overflow-scrolling: touch;
}

#item-description-hint {
	font-size: 0.7rem;
	color: var(--text-500);
	margin-top: 0.25rem;
}

#item-description::placeholder {
	color: var(--text-300);
	font-size: 0.8rem;
}

.floating-form-group {
	position: relative;
	z-index: 1;
}

.floating-form-group>.floating-label {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.floating-form-group .floating-input {
	/*background: transparent;*/
	border-radius: 0.5rem;
	border-width: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--border-400) 30%, transparent);
	padding: 0.5em 0;
	line-height: 24px;
	z-index: 2;
}

.floating-form-group .floating-input:focus,
.floating-form-group .floating-input:focus:active {
	border-bottom: 1px solid var(--brand-100);

}

.checkbox-boxed {
	display: none;
}

.checkbox-boxed+.checkbox-lable {
	cursor: pointer;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 15px;
	margin-bottom: 0;
	gap: 8px;
}

.checkbox-boxed+.checkbox-lable span {
	display: block;
}

.checkbox-boxed+.checkbox-lable .p {
	padding: 5px 0;
	line-height: 16px;
	font-size: 12px;
	display: block;
	margin: 0;
}

.checkbox-boxed:checked+.checkbox-lable {
	background: var(--brand-300);
	color: var(--on-brand);
	font-weight: 600;
}

.custom-control-input:checked~.custom-control-label::before {
	color: var(--text-0);
	border-color: var(--brand-800);
	background-color: var(--brand-800);
	margin-left: 1em;
}

.custom-control-input.switch-success:checked+.custom-control-label::before {
	background-color: var(--state-success);
	border-color: var(--state-success);
}

.custom-control-input.switch-info:checked+.custom-control-label::before {
	background-color: var(--state-info, var(--accent-300));
	border-color: var(--state-info, var(--accent-300));
}

.custom-control-input.switch-danger:checked+.custom-control-label::before {
	background-color: var(--state-error);
	border-color: var(--state-error);
}

.custom-control-input.switch-primary:checked+.custom-control-label::before {
	background-color: var(--brand-400);
	border-color: var(--brand-400);
}

.custom-control-input.switch-warning:checked+.custom-control-label::before {
	background-color: var(--state-warning);
	border-color: var(--state-warning);
}

.my-item-template,
#block-user-container .card-body,
.card {
	border: 0;
	border-radius: 0.9rem;
	box-shadow: var(--shadow-sm, 0 0 10px color-mix(in srgb, var(--ink-900) 5%, transparent));
	-webkit-box-shadow: var(--shadow-sm, 0 0 5px color-mix(in srgb, var(--ink-900) 5%, transparent));
	-moz-box-shadow: var(--shadow-sm, 0 3px 5px color-mix(in srgb, var(--ink-900) 5%, transparent));
	-ms-box-shadow: var(--shadow-sm, 0 3px 5px color-mix(in srgb, var(--ink-900) 5%, transparent));
	z-index: 1;
}

.card .card-header {
	border: 0;
	border-radius: 15px 15px 0 0;
	background: transparent;
	padding: .3em 1em;
}

.card .card-footer {
	border: 0;
	border-radius: 0 0 15px 15px;
	background: transparent;
	padding: 0.625rem 0.9375rem;
}

.card .card-body-wrap {
	border: 1px dashed color-mix(in srgb, var(--text-0) 50%, transparent);
	margin: 5px;
	display: block;
	border-radius: 15px;
}

.card-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-height: 1px;
	padding: 1.25rem;
}

.card .card-body {
	border: 0;
	padding: 0.625rem 0.625rem;
}

.swiper-products {
	margin-bottom: -0.625rem;
}

.swiper-products .swiper-slide {
	width: 100%;
	padding: 0;
}

.product-card-large {
	width: 100%;
	height: auto;
}

.product-card-large .product-image-large {
	overflow: hidden;
	height: 20em;
	width: 100%;
	display: block;
	position: relative;
}

.product-card-large .product-image-large .tag-images-count {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
	padding: 5px 0.625rem;
	border-radius: 15px;
	font-size: 12px;
}

.product-card-large .product-image-large .tag-images-count span {
	margin-left: 5px;
}

.product-card-large .product-image-large .small-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1;
}

.product-image-small {
	border-radius: 5px;
	overflow: hidden;
	height: 5.5em;
	width: 5.5em;
	display: block;
	position: relative;
	background-size: cover;
	background-position: center;
}

.product-image-small:focus-within {
	outline: none;
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--brand-500) 25%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 4%, transparent);
	border-radius: 6px;
}

.product-image-block {
	border-radius: 15px;
	overflow: hidden;
	height: 3em;
	width: 3em;
}

.product-image-xs {
	border-radius: 10px;
	overflow: hidden;
	height: 2em;
	width: 2em;
}

.favorite-sp {
	top: .2em;
	position: absolute;
	z-index: 1;
	padding: 0.25em 0.4em;
	border-radius: 15px;
	font-size: 70%;
	opacity: 0.85;
	box-shadow: 0 2px 5px color-mix(in srgb, var(--ink-900) 15%, transparent);
}

.list-view-item .favorite-sp,
.thumb-view-item .favorite-sp {
	right: .1em;
}

.card-view-item .favorite-sp {
	left: .1em;
}

.product-image-small .small-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1;
}

.btn.top-btn-active {
	padding: 0px;
	height: 34px;
	width: 34px;
	text-align: center;
	opacity: .8;
	z-index: 99;
}

.btn.top-btn-active span {
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
}

.upcoming {
	position: absolute;
	top: 0.5em;
	left: -0.5125em;
	background: var(--brand-solid);
	color: var(--text-0);
	padding: 0.125em 0.5em;
	border-radius: 0.1875em 0.1875em 0.1875em 0;
	box-shadow: 0 0.125em 0.25em color-mix(in srgb, var(--ink-900) 8%, transparent);
	font-size: 0.65rem;
	z-index: 3;
}

.upcoming p {
	font-size: 0.75rem;
	color: var(--brand-050);

}

.upcoming::after {
	content: "";
	height: 5px;
	width: 4px;
	position: absolute;
	left: 0;
	bottom: -5px;
	border-right: 5px solid var(--ink-900);
	border-bottom: 5px solid transparent;
}

.btn {
	border: none;
	border-radius: 0.625rem;
	font-size: 0.875rem;
	padding: 0.375rem 1.25rem;
	line-height: 1.2;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
	transition: background .15s ease, filter .15s ease, transform .06s ease;
}

.btn:disabled,
.btn.disabled {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
	color: var(--on-dark);
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--ring-shadow);
}

a.btn {
	text-decoration: none;
}

.btn.btn-block {
	display: block;
	width: 100%;
}

.btn.btn-sm {
	font-size: 75%;
	padding: 0.6em 0.2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 5.5em;
	min-width: 4.5em;
	color: var(--text-600);
	line-height: 0.6em;
	background-color: var(--surface-150);
	font-weight: 500;
}

.btn.btn-sm.btn-xs {
	font-size: 70%;
	max-width: 4em;
	min-width: 4em;
}

.btn .icon {
	width: 1.125rem;
	height: 1.125rem;
	display: inline-block;
}

.btn-link {

	font-size: .825rem;
	font-weight: 500;
	color: var(--brand-400);
}

.btn .btn-primary {
	background: var(--brand);
	color: var(--on-brand);
}

.btn-accent {
	background: var(--accent);
	color: var(--on-brand);
}

.btn-accent:hover {
	filter: brightness(.8);
}

.btn-accent:active {
	background: var(--accent-solid);
	transform: scale(.98);
	color: var(--brand-050);
}

.btn-accent:disabled {
	background: var(--cta-disabled-bg) !important;
	color: var(--cta-disabled-text) !important;
	opacity: .8 !important;
	cursor: not-allowed;
}

.btn-secondary:disabled,
.btn-create:disabled
{
	background: var(--brand-050);
	color: var(--fg-muted);
	border: 1px solid var(--brand-100);
}

.btn-danger {
	background: var(--danger);
	color: var(--brand-050);
}

.btn-danger:hover {
	background: linear-gradient(90deg, #FF3B3F 0%, #FF6B70 100%);
}

.btn-danger:active {
	background: linear-gradient(90deg, #E53945 0%, #FF5A5F 100%);
	transform: scale(.98);
}

.btn-create {
	background: var(--surface-muted);
	color: var(--fg);
	border: 1px solid var(--divider);
	font-size: .85rem;
}

.btn-natural {
	background: var(--surface-muted);
	color: var(--fg);
	border: 1px solid var(--divider);
	font-size: .85rem;
	white-space: nowrap;
}

.btn-natural:hover {
	border-color: var(--brand-300);
}

.btn-natural:active {
	background: var(--brand-200);
	border-color: var(--brand-400);
	transform: scale(.98);
}

.btn-create:hover {
	/*background: var(--brand-100);*/
	border-color: var(--brand-300);
}

.btn-create:hover:not(:disabled):not(.disabled)

.btn-create:active {
	background: var(--brand-200);
	border-color: var(--brand-400);
	transform: scale(.98);
}

.btn-secondary {
	background: var(--brand-200);
	color: var(--brand-500);
	padding: .375rem .875rem;
}

.btn-secondary:hover {
	background: var(--brand-300);
	border-color: var(--brand-400);
}

.btn-secondary:active {
	background: var(--brand-400);
	color: var(--brand-700);
}

.btn i,
.btn .material-icons {
	vertical-align: middle;
}

.btn.small-btn {
	height: 34px;
	vertical-align: middle;
	width: 34px;
	text-align: center;
	padding: 0;
}

.btn.small-btn-24 {
	height: 24px;
	vertical-align: middle;
	width: 24px;
	text-align: center;
	padding: 0;
}

@media screen and (min-width: 767px) {
	.list-view-item .product-image-small {
		width: 85%;
	}
}

@media screen and (max-width: 376px) {
	#nickname::placeholder {
		font-size: 0.68rem;
	}
}

@media screen and (min-width: 400px) {
	.card-view-item .product-image-small {
		height: 6.1em;
		width: 6.1em;
	}

	.title-item-width {
		max-width: 12em !important;
	}
}

@media screen and (max-width: 370px) {
	.product-image-small {
		height: 4.8em;
		width: 4.8em;
	}

	.container {
		padding-left: 0.9375rem;
		padding-right: 0.9375rem;
	}

	.swiper-products .swiper-slide:first-child {
		padding-left: 0.9375rem;
	}

	.swiper-products .swiper-slide:last-child {
		padding-right: 0.9375rem;
	}

	.product-card-large {
		width: 290px;
		height: auto;
	}

	.mt-4,
	.my-4 {
		margin-top: 1.0rem !important;
	}

	.mb-4,
	.my-4 {
		margin-bottom: 1.0rem !important;
	}

	.image-circle>figure {
		height: 200px;
		width: 200px;
	}

	.image-circle {
		padding: 0px 0.9375rem 1.25rem 0.9375rem;
	}

	.image-circle>.icon {
		margin: 0 auto -3.75rem auto;
	}
}

.item-view {
	border-radius: 0;
}

.item-view .gallery-container .card,
#favorite-item-list .card,
#other-user-items .card {
	box-shadow: var(--shadow-sm);
	background-color: var(--surface-25);
}

.card-view-margin-bottom {
	margin-bottom: .5em !important;
}

.half-margin {
	margin-top: .5em !important;
}

.template-name-item {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .85rem;
	line-height: 1.35;
	color: var(--item-tile-accent);
	font-weight: 600;
}

.center-item {
	justify-content: center !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sub-text-item-on {
	padding-left: 0 !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	display: -ms-flexbox !important;
	display: flex !important;
}

.sub-page-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 .5em;
	z-index: 99;
	background-color: white;
	background-size: cover;
	opacity: .9;
}

.sub-page-header h6 {
	font-size: 1.125rem;
	font-weight: 700;
}

.product-image-top {
	border-radius: 15px;
	overflow: hidden;
	width: 100%;
	display: block;
	position: relative;
}

.product-image-top:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2em;
	width: 100%;
	background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0) 35%, #cdeeff 100%);
	background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 35%, #cdeeff 100%);
	background: linear-gradient(0deg, rgba(255, 255, 255, 0) 35%, #cdeeff 100%);
	z-index: 1;
}

.product-image-top .tag-images-count {
	position: absolute;
	bottom: 40px;
	left: 15px;
	z-index: 1;
	padding: 5px 0.625rem;
	border-radius: 15px;
	font-size: 12px;
}

.product-image-top .tag-images-count span {
	margin-left: 5px;
}

.product-image-top .small-btn-wrap {
	position: absolute;
	bottom: 50px;
	right: 25px;
	z-index: 1;
}

.full-height {
	height: 100%;
}

.row-scroll {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	margin: 0;
	padding: 0.625rem 0;
	box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.row-scroll::-webkit-scrollbar {
	display: none;
}

.detail-top-title {
	padding: .3em 0;
}

.detail-top-title-2 {
	padding: .5em 0;
}

.list-view-item .no-gutters .col-auto:first-child {
	text-align: left;
}

.list-view-item .no-gutters .col-auto {
	text-align: center;
	padding: .1em;
}

.list-view-text-row {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	padding: 0.625rem 0;
	box-sizing: border-box;
}

.view-toggle {
	line-height: 20px;
}

.noline-footer {
	padding: 0;
	border-top: 0;
	border-radius: 0 !important;
}

.item-margin-left-xs {
	margin-right: .5em;
}

.item-margin-right-xs {
	margin-left: .5em;
}

.alert-custom {
	position: relative;
	padding: 0.2em 0.3rem;
	border: 1px solid var(--border-200);
	font-size: 0.7em;
	line-height: 2em;
	margin-bottom: 0;
	max-width: 10em;
}

.padding-zero {
	padding: 0 1em 0 0 !important;
}

.card-body-custom {
	border: 0;
	padding: 0 1em 1em 1em !important
}

.tag-text {
	padding-right: 1em;
}

.top-z-index {
	border-bottom: 1px solid rgba(153, 153, 153, 0.3);
}

.down-z-index {
	z-index: -1;
}

.dropdown-menu-custom {
	width: 100%;
	height: 5em;
	overflow-y: auto;
}

.card-body-seperate {
	border-bottom: 1px solid color-mix(in srgb, var(--border-300) 30%, transparent);
	margin: 0 1em 1em 1em !important;
}

.full-width {
	width: 100%;
}

.dropdown-custom {
	border: 1px solid var(--border-200);
}

.input-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: none;
	border-radius: 10px;
	padding: 0.4rem 0.6rem;
	margin-bottom: 0.4rem;
	flex-wrap: nowrap;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 3%, transparent),
		0 1px 0 color-mix(in srgb, var(--ink-900) 2%, transparent);
}

.input-container .title.form-control.type {
	width: auto;
	max-width: 12em;
	flex: 0 0 auto;
	border: 0;
	background: var(--t-bg, var(--surface-100));
	color: var(--t-fg, var(--text-800));
	border-radius: 8px;
	height: 1.7rem;
	line-height: 1.7rem;
	padding: 0 0.75rem;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: none;
	box-shadow: inset 0 0 0 1px var(--t-bg, var(--border-200));
}

.input-container .title.form-control.type:focus {
	outline: none;
	box-shadow: none;
}

.input-container>.col.d-flex {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0;
}

.input-container .input-field {
	border: none;
	border-radius: 10px;
	height: 1.7rem;
	line-height: 1.7rem;
	padding: 0 0.75rem;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 3%, transparent);
	caret-color: var(--brand-600);
}

.input-container .input-field:focus {
	box-shadow:
		inset 0 0 0 1px var(--brand-200),
		0 0 0 3px color-mix(in srgb, var(--brand-200) 35%, transparent);
	outline: none;
}

.input-container .input-field::placeholder {
	color: var(--text-500);
}

.input-container .text-seperate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.25rem;
	font-weight: 700;
	color: var(--text-500);
	user-select: none;
}

.title-badge {
	display: inline-block;
	min-width: 84px;
	max-width: 12em;
	height: 1.7rem;
	line-height: 1.7rem;
	padding: 0 0.75rem;
	border-radius: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	text-align: center;
	background: var(--t-bg, var(--surface-100));
	color: var(--t-fg, var(--text-800));
	font-size: 0.795rem;
	opacity: 0.85;
}

.input-container .custom-control.custom-switch.col,
.input-container .custom-control.custom-switch.col-6 {
	width: auto !important;
	flex: 0 0 auto !important;
}

.input-field.is-static {
	display: inline-flex;
	align-items: center;
	height: 1.7rem;
	line-height: 3.4rem;
	padding: 0 0.75rem;
	border-radius: 10px;
	background: var(--surface-25);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-900) 8%, transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.725rem;
}

.custom-control.custom-switch {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-height: 1.7rem;
}

.custom-control-input {
	transform: translateY(0);
	margin-top: 0;
}

.custom-control-label {
	line-height: 1.7rem;
	font-size: .875rem;
}

.input-container:focus-within {
	outline: none;
	box-shadow: none;
}

.input-container .form-control:disabled {
	background: var(--surface-100);
	color: var(--text-500);
	font-size: 0.875rem;
}

.small-close {
	font-size: .875em;
	font-weight: 400;
	opacity: .55;
	transition: opacity .16s ease, background-color .16s ease;
}

.input-container.has-reorder-controls .small-close {
	background-color: transparent;
	box-shadow: none;
}

.input-container.has-reorder-controls .small-close:hover,
.input-container.has-reorder-controls .small-close:focus-visible {
	opacity: .82;
}

.template-field-reorder-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
}

.template-field-reorder-btn {
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	touch-action: manipulation;
	transition:
		background-color .16s ease,
		color .16s ease,
		opacity .16s ease,
		transform .16s ease,
		box-shadow .16s ease;
}

.template-field-reorder-btn .bi {
	font-size: .925rem;
	pointer-events: none;
}

.template-field-reorder-btn:not(:disabled):hover {
	background: color-mix(in srgb, var(--surface-100) 56%, transparent);
	color: var(--text-700);
}

.template-field-reorder-btn:focus-visible {
	outline: none;
	background: color-mix(in srgb, var(--surface-100) 64%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-200) 24%, transparent);
	color: var(--text-700);
}

.template-field-reorder-btn:not(:disabled):active {
	transform: translateY(1px);
}

.template-field-reorder-btn:disabled {
	opacity: 0.24;
	cursor: not-allowed;
	background: transparent;
	color: var(--text-300);
}

.template-rating-input {
	display: flex;
	align-items: center;
	gap: .25rem;
	width: 100%;
	min-width: 0;
}

.template-rating-hidden {
	display: none !important;
}

.template-rating-stars,
.rating-readonly-stars {
	display: inline-flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
	white-space: nowrap;
}

.template-rating-star-btn {
	position: relative;
	--rating-empty-color: rgba(107, 114, 128, .42);
	--rating-filled-color: #d99a1e;
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	overflow: visible;
	text-shadow: none;
	touch-action: manipulation;
	transition: transform .16s ease;
}

.template-rating-star-btn::before {
	content: "★";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 1.2rem;
	margin-left: -.6rem;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--rating-empty-color);
	text-align: left;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.template-rating-star-btn::after {
	content: "★";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 0;
	margin-left: -.6rem;
	overflow: hidden;
	color: var(--rating-filled-color);
	font-size: 1.2rem;
	line-height: 1;
	transform: translateY(-50%);
	text-align: left;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

.template-rating-star-btn.is-half::after {
	width: .6rem;
}

.template-rating-star-btn.is-full::after {
	width: 1.2rem;
}

.template-rating-star-btn:not(:disabled):hover {
	background: transparent;
}

.template-rating-star-btn:not(:disabled):focus-visible {
	background: transparent;
	box-shadow: 0 0 0 2px color-mix(in srgb, #d99a1e 26%, transparent);
	outline: none;
}

.template-rating-star-btn:not(:disabled):active {
	transform: translateY(1px);
}

.template-rating-star-btn:disabled {
	opacity: .65;
	cursor: default;
}

body:has(#template-update-btn) #template-fields .template-rating-input,
body:has(.stepper-tabs.template-target) #template-fields .template-rating-input {
	gap: 0;
}

body:has(#template-update-btn) #template-fields .template-rating-stars,
body:has(.stepper-tabs.template-target) #template-fields .template-rating-stars {
	gap: 0;
}

body:has(#template-update-btn) #template-fields .template-rating-star-btn,
body:has(.stepper-tabs.template-target) #template-fields .template-rating-star-btn {
	width: 1.875rem;
	height: 2rem;
	min-width: 1.875rem;
	min-height: 2rem;
}

.rating-display-value {
	flex: 0 0 auto;
	color: var(--text-500);
	font-size: .74rem;
	line-height: 1;
	white-space: nowrap;
}

.rating-display,
.rating-preview-display,
.rating-review-display {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	vertical-align: middle;
}

.rating-readonly-star {
	position: relative;
	--rating-empty-color: rgba(107, 114, 128, .42);
	--rating-filled-color: #d99a1e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: .9rem;
	height: 1rem;
	color: transparent;
	line-height: 1;
	overflow: visible;
	text-shadow: none;
}

.rating-readonly-star::before {
	content: "★";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: .86rem;
	margin-left: -.43rem;
	font-size: .86rem;
	line-height: 1;
	color: var(--rating-empty-color);
	text-align: left;
	transform: translateY(-50%);
	z-index: 0;
}

.rating-readonly-star::after {
	content: "★";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 0;
	margin-left: -.43rem;
	overflow: hidden;
	color: var(--rating-filled-color);
	font-size: .86rem;
	line-height: 1;
	transform: translateY(-50%);
	text-align: left;
	white-space: nowrap;
	z-index: 1;
}

.rating-readonly-star.is-half::after {
	width: .43rem;
}

.rating-readonly-star.is-full::after {
	width: .86rem;
}

.template-score-input {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	min-width: 0;
}

.template-score-hidden {
	display: none !important;
}

.template-score-range {
	--score-fill-percent: 0%;
	flex: 1 1 auto;
	min-width: 0;
	height: 1.75rem;
	accent-color: var(--brand-500);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.template-score-range::-webkit-slider-runnable-track {
	height: .36rem;
	border-radius: 999px;
	background:
		linear-gradient(to bottom, #4F8FF9 0%, #6FA5F8 100%) 0 0 / var(--score-fill-percent) 100% no-repeat,
		color-mix(in srgb, var(--border-200) 62%, var(--surface-50));
}

.template-score-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: -.345rem;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: linear-gradient(to bottom, #4F8FF9 0%, #6FA5F8 100%);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-900) 20%, transparent);
}

.template-score-range::-moz-range-track {
	height: .36rem;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--border-200) 62%, var(--surface-50));
}

.template-score-range::-moz-range-progress {
	height: .36rem;
	border-radius: 999px;
	background: linear-gradient(to bottom, #4F8FF9 0%, #6FA5F8 100%);
}

.template-score-range::-moz-range-thumb {
	width: 1.05rem;
	height: 1.05rem;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: linear-gradient(to bottom, #4F8FF9 0%, #6FA5F8 100%);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-900) 20%, transparent);
}

.template-score-range:focus-visible {
	outline: none;
}

.template-score-range:focus-visible::-webkit-slider-runnable-track {
	box-shadow: 0 0 0 3px color-mix(in srgb, #4F8FF9 22%, transparent);
}

.template-score-range:focus-visible::-moz-range-track {
	box-shadow: 0 0 0 3px color-mix(in srgb, #4F8FF9 22%, transparent);
}

.template-score-value {
	flex: 0 0 auto;
	min-width: 2.9rem;
	color: var(--text-500);
	font-size: .76rem;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}

.template-score-input.is-disabled .template-score-range {
	opacity: .55;
	cursor: default;
}

.template-score-input.is-structure-preview {
	gap: 0;
}

.template-score-input.is-structure-preview .template-score-range {
	opacity: .58;
	cursor: default;
	pointer-events: none;
}

.score-display,
.score-preview-display {
	color: var(--text-700);
	font-size: .9em;
	line-height: 1.35;
	white-space: nowrap;
}

.template-archive-filter-bar {
	display: flex;
	gap: .375rem;
	overflow-x: auto;
	padding: .25rem .125rem .375rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.template-archive-filter-bar::-webkit-scrollbar {
	display: none;
}

.template-archive-filter-btn {
	flex: 0 0 auto;
	min-height: 2rem;
	padding: .35rem .75rem;
	border: 1px solid var(--border-200);
	border-radius: 999px;
	background: var(--surface-25);
	color: var(--text-600);
	font-size: .82rem;
	line-height: 1;
	white-space: nowrap;
}

.template-archive-filter-btn.is-active {
	border-color: var(--brand-300);
	background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-25));
	color: var(--brand-700);
	font-weight: 600;
}

.template-list-control-row {
	row-gap: .25rem;
}

.template-archive-filter-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 9rem;
	min-height: 2rem;
	padding: .2rem .15rem .2rem .55rem;
	border: 0;
	background: transparent;
	/*color: var(--text-700);
	font-size: .82rem;*/
	line-height: 1.2;
	white-space: nowrap;
}

.template-archive-filter-trigger::after {
	content: "▾";
	margin-left: .25rem;
	color: var(--text-900);
	font-size: .72rem;
	line-height: 1;
}

.template-archive-filter-trigger:hover,
.template-archive-filter-trigger:focus {
	color: var(--text-900);
	background: transparent;
}

#templateArchiveFilterLabel {
	display: inline-block;
	max-width: 6rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .8rem;
}

.template-archive-filter-option.active,
.template-archive-filter-option.is-active {
	color: var(--brand-700);
	background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-25));
	font-weight: 600;
}

.template-archive-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 1.2rem;
    min-height: 0;
    padding: 0 .45rem;
    border: 1px solid var(--border-200);
    border-radius: 999px;
    background: var(--surface-100);
    color: var(--text-500);
    font-size: .55rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
   transform: translateY(.07rem);
}


.tpl-item-fixed.is-archived {
	background: var(--surface-50);
}

.template-edit-footer-row {
	align-items: center;
}

.template-archive-action-btn {
	/*min-height: 2.75rem;*/
	border-color: var(--border-200);
	color: var(--text-600);
}

@media (max-width: 420px) {
	.input-container.has-reorder-controls .title.form-control.type {
		max-width: 8.5em;
	}

	.template-field-reorder-controls {
		gap: 0.125rem;
	}

	.template-field-reorder-btn {
		width: 2.125rem;
		height: 2.125rem;
		min-width: 2.125rem;
		min-height: 2.125rem;
	}

	.template-rating-input {
		gap: 0;
	}

	.template-rating-star-btn {
		width: 2.25rem;
		height: 2.25rem;
		min-width: 2.25rem;
		min-height: 2.25rem;
	}

	body:has(#template-update-btn) #template-fields .template-rating-star-btn,
	body:has(.stepper-tabs.template-target) #template-fields .template-rating-star-btn {
		width: 1.75rem;
		height: 2rem;
		min-width: 1.75rem;
		min-height: 2rem;
	}

	.template-score-input {
		gap: .35rem;
	}

	.template-score-value {
		min-width: 2.5rem;
		font-size: .72rem;
	}

}

.zero-top-margin {
	margin-top: 0;
}

.login-container {
	padding: 1rem 1.5rem;
}

.login-box-custom {
	width: 100%;
	background-color: var(--surface-50);
	border-radius: 8px;
}

.login-text-field {
	border: 1px solid color-mix(in srgb, var(--border-300) 30%, transparent);
}

.sub-small-text {
	color: var(--text-500);
	font-size: 0.8em;
}

.sub-small-text2 {
	color: var(--text-900);
	font-size: 0.75rem;
	line-height: 1.4;
}

.sub-small-text3 {
	font-size: 0.7rem;
}

.btn.btn-change-small {
	background-color: var(--surface-100);
	border-color: var(--border-200);
	border-radius: 1em;
	color: var(--text-900);
	font-size: 0.65rem;
}

.btn.btn-edit-light {
	border-color: var(--text-500);
	width: 100%;
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
}

.fs-0-7 {
	font-size: .65em;
}

.fs-0-8 {
	font-size: .75em;
}

.fs-0-9 {
	font-size: .95em !important;
}

.align-btn {
	margin: .5em -1em .5em auto;
	display: flex;
	justify-content: flex-end;
}

.info-icon {
	display: inline-block;
	width: .8em;
	height: .8em;
	background-color: transparent;
	content: url(../img/icons/info.svg);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.user-more-btn {
	width: 1.5em;
	height: 1.5em;
	background-size: cover;
	background-position: center;
	border: none;
	user-select: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s;
	background-image: url(../img/icons/menu-vertical-more.svg);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.favorite-btn.active {
	background-image: url(../img/icons/heart-full.svg);
	transform: scale(1.1);
}

.favorite-btn {
	width: 1.7em;
	height: 1.7em;

	/*	width: 2em;
	height: 2em;*/
	background-size: cover;
	background-position: center;
	border: none;
	user-select: none;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s;
	background-image: url(../img/icons/heart-outline.svg);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.favorite-btn-xs {
	width: 1.4em;
	height: 1.4em;
}

.favorite-btn-small {
	width: 1.5em;
	height: 1.5em;
}

.favorite-btn-normal {
	width: 2em;
	height: 2em;
}

.favorite-btn-large {
	width: 2.5em;
	height: 2.5em;
	float: right;
}

.favorite-btn:focus {
	outline: none;
}

#my-tag-list .tag-name {
	overflow: visible;
	max-width: 20em;
	font-size: 75%;
	margin: 0 .3em;
}

.item-detail-title {
	font-weight: 600;
	min-width: 0;
	max-width: min(25em, 100%);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*color: var(--brand-solid);*/
}

.detail-title-custom {
	max-width: min(15em, 100%);
}

.app-header .header-row > .header-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.app-header .header-row > .header-back,
.app-header .header-row > .header-avatar,
.app-header .header-row > .header-action,
.app-header .header-row > .header-actions {
	flex: 0 0 auto;
}

.app-header .header-row > .header-action > *,
.app-header .header-row > .header-actions > *,
.card-header .row > .col-auto,
.card-header .row > .col-auto > * {
	flex: 0 0 auto;
}

.card-header .row > .col {
	min-width: 0;
}

.app-header .header-title h6,
.app-header .header-title .item-detail-title,
.app-header .header-title .item-detail-title p {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-header .header-title .item-detail-title {
	display: block;
}

.item-detail-tempate-name {
	font-weight: 600;
	max-width: 25em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#profile-header {
	max-height: 10vh;
	overflow-y: hidden;
	overflow-x: hidden;
}

#other-user-items,
#favorite-item-list {
	max-height: 48vh;
	overflow-y: auto;
	overflow-x: hidden;
}

#search-result {
	max-height: 80vh;
	height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
}

#other-user-tag {
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-wrap: nowrap;
	align-content: flex-start;
	font-size: 85%;
	max-height: 5em;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	touch-action: pan-x;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

@media (max-height: 660px) {
	#favorite-item-list {
		max-height: 47vh;
	}
}

@media (max-height: 700px) {
	#profile-header {
		max-height: 10.5vh;
	}

	#other-user-items {
		max-height: 55vh;
		/*max-height: 48vh;*/
	}

	#favorite-item-list {
		max-height: 44vh;
	}

	#other-user-tag {
		max-height: 10vh;
		font-size: 75%;
	}

	#search-result {
		max-height: 77vh;
		height: 77vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

@media (min-height: 740px) {
	#other-user-items {
		max-height: 65vh;
	}

	#favorite-item-list {
		max-height: 53vh;
	}
}

@media (min-height: 800px) {
	#profile-header {
		max-height: 9vh;
	}

	#other-user-items {
		max-height: 65vh;
	}

	#favorite-item-list {
		max-height: 59vh;
	}

	#search-result {
		max-height: 83vh;
		height: 83vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

@media (min-height: 845px) {
	#other-user-items {
		max-height: 67vh;
	}
}

@media (min-height: 844px) {
	#search-result {
		max-height: 82vh;
		height: 82vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

@media (min-height: 900px) {
	#profile-header {
		max-height: 8vh;
	}

	#other-user-items {
		max-height: 68.3vh;
	}


	#search-result {
		max-height: 84vh;
		height: 84vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

#my-favorite-items {
	max-height: 67vh;
	height: 62vh;
	overflow-y: auto;
	overflow-x: hidden;
}

@media (min-height: 741px) {
	#my-favorite-items {
		max-height: 78vh;
		height: 70vh;
	}
}

.horizontal-scroll {
	overflow-x: auto;
	white-space: nowrap;
}

.horizontal-scroll .row {
	display: flex;
	flex-wrap: nowrap;
}

.horizontal-scroll .col-auto {
	display: inline-block;
}

.item-share-btn {
	background-image: url(../img/icons/share-social-outline.svg);
}

.item-detail-lh {
	line-height: .5em;
	border-radius: 10px !important;
}

.item-detail-btn {
	width: 22px;
	height: 22px;
}

.item-detail-small-btn {
	width: .8em;
	height: .8em;
}

.a-text {
	color: var(--accent-600);
}

.float-start {
	float: left;
}

.search-area {
	position: relative;
	display: inline-block;
	width: 100%;
}

.search {
	width: 100%;
	padding-right: 2.1875rem;
	border: 0;
	background-color: var(--surface-100);
}

.clear-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--on-brand-neutral);
	color: var(--tag-back);
	border: none;
	font-size: 16px;
	cursor: pointer;
	display: none;
	border-radius: 10px;
	text-align: center;
	line-height: 19px;
	opacity: 0.4;
}

.modal-body .clear-btn {
	right: 6.5em;
	top: 5.5%;
}

@media (max-height: 668px) {
	.modal-body .clear-btn {
		right: 6.5em;
		top: 7.5%;
	}
}

.clear-btn:hover {
	background: color-mix(in srgb, var(--text-600) 85%, var(--surface-0));
}

.checkbox-lable {
	display: flex;
	align-items: center;
	gap: 8px;
}

.image-boxed img {
	width: 1em;
	height: 1em;
	vertical-align: text-top;
}

.checkbox-boxed:checked+.checkbox-lable .image-boxed img {
	filter: brightness(0) invert(1);
}

.card-merge-middle {
	border-radius: 0 0 15px 15px;
}

.scroll-container {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}

.list-group-item {
	border: 1px solid var(--border-200);
	border-radius: 10px;
	margin: 0.25em 0;
}

.list-group-item+.list-group-item {
	border: 1px solid var(--border-200);
}

.tag-view-item {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 12rem;
}

@media (min-width: 340px) {
	.tag-view-item {
		max-width: 11.5rem;
	}
}

@media (min-width: 390px) {
	.tag-view-item {
		max-width: 14rem;
	}
}

@media (min-width: 420px) {
	.tag-view-item {
		max-width: 16rem;
	}
}

@media (min-width: 540px) {
	.tag-view-item {
		max-width: 20rem;
	}
}

@media (min-width: 768px) {
	.tag-view-item {
		max-width: 35rem;
	}
}

@media (min-width: 820px) {
	.tag-view-item {
		max-width: 39rem;
	}
}

@media (min-width: 912px) {
	.tag-view-item {
		max-width: 44rem;
	}
}

@media (min-width: 1024px) {
	.tag-view-item {
		max-width: 50rem;
	}
}

.tag-name {
	white-space: nowrap;
	overflow: visible;
	text-overflow: unset;
	max-width: unset;
	font-weight: 500;
	opacity: .8;
	font-size: .72rem;
}

p.tag-name {
	outline-offset: 0.25em;
	border-radius: .35em;
	margin: .2em;
	max-width: 100%;
	height: 2em;
}

a.tag-name {
	font-weight: 400;
	outline: 0.095em solid var(--ink-900);
	outline-offset: 0.35em;
	border-radius: 0.35em;
	font-size: 0.75em;
	margin: 0 0.5em;
}

a.tag-name:first-child {
	margin-left: 0;
}

.tag-view-list .tag-name {
	font-size: 1rem;
}

.tag-view-list label,
.tag-view-list .tag-view-item {
	padding-top: 0.5em;
	font-size: 0.85rem;
}

.badge-primary {
	background-color: var(--accent-600);
	color: var(--on-brand);
	font-size: 0.8rem;
	opacity: .8;
}

.badge-mute {
	background-color: var(--fg-muted);
	color: var(--on-brand);
	font-size: 0.8rem;
	opacity: .8;
}

.text-dark-light {
	color: var(--text-600);
}

.tag-space-vh {
	height: 1.5em;
	line-height: 1.5;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: .25rem;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	touch-action: pan-x;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tag-space-vh::-webkit-scrollbar {
	display: none;
}

.tag-space-vh>* {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.tag-space-vh:focus-within {
	outline: 2px solid rgba(59, 130, 246, .35);
	outline-offset: 2px;
}

.tag-space-vh .badge,
#my-tag-list .badge,
.kv-body.hs .chip {
	background: color-mix(in srgb, var(--surface-0) 90%, var(--text-700) 7%) !important;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
	backdrop-filter: saturate(120%);
}

.tag-space-vh .badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

.tag-space-vh::-webkit-scrollbar {
	display: none;
}

.tag-gutter {
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
}

.search-tag-result .tag-space-vh {
	max-height: 1.5em;
	height: 1.5em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	align-items: center;
}

.more-btn-off,
.favorite-off {
	display: none;
}

.card.product-card-small,
.product-image-small,
.tag-space-vh .badge,
.more-options-btn {
	will-change: transform, box-shadow;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
	padding-right: 0;
	padding-left: 0;
}

.badge-secondary {
	color: var(--on-brand);
	background-color: var(--brand-500);
	opacity: .75;
}

.btn-close {
	width: 1em;
	height: 1em;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .7em;
}

.col-3 {
	flex: 0 0 25% !important;
	max-width: 25% !important;
}

.template-filter-view {
	width: 2.375em;
	height: 2.125em;
	border-radius: 0.5em;
	padding: 0.25em;
	border: 1px solid var(--border-200);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--surface-100);
	transition: background-color 0.2s, border-color 0.2s;
}

.template-filter-view img {
	width: 1.5em;
	height: 1.5em;
	opacity: 0.7;
}

#top-btn {
	position: fixed;
	bottom: 5.2em;
	top: auto;
	right: .5em;
	border-radius: 30px;
	padding: 0;
	height: 3em;
	width: 3em;
	text-align: center;
	z-index: 99;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
	pointer-events: none;
}

html.mychive-ios-app body[data-gallery] #top-btn,
body.mychive-ios-app[data-gallery] #top-btn {
	bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + .75rem);
}

@supports (-webkit-touch-callout: none) {
	body[data-gallery] #top-btn {
		bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + .75rem);
	}
}

.top-btn {
	background-color: var(--on-brand);
	border: none;
}

.main-start {
	position: sticky;
	top: 0;
	background: var(--on-brand);
	border-radius: 15px 15px 0 0;
	border-bottom: 1px solid var(--surface-100);
	z-index: 999;
}

.gallery-top {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	width: 100%;
}

.more-options-btn {
	position: absolute;
	top: .5em;
	right: 0;
	z-index: 10;
	padding: .5em;
}

.more-options-btn {
	position: absolute;
	top: .5em;
	right: 0;
	z-index: 10;
	padding: .5em;
}

.title-item-width {
	display: inline-block;
	max-width: 13em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: .1px;
	font-size: .95rem;
	color: var(--fg);
}

.card-view-item .title-item-width {
	text-align: center;
}

.card-view-item {
	display: flex;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.card-view-item>.card {
	flex: 1 1 auto;
	height: 100%;
}

.card-view-item .product-image-small {
	margin-block-start: .5rem;
	margin-block-end: .6rem;
	border-radius: .75rem;
	overflow: hidden;
}

.card-view-item .card {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: box-shadow .2s ease;
}

.card-view-item .card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.list-view-item .item-desc {
	margin-top: .25rem;
	margin-bottom: .25rem;
}

.block-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.3em;
	border-radius: 6px;
	font-size: .8em;
	color: var(--on-brand);
	margin-right: .5em;
}

.bg-soft-gray {
	background-color: var(--surface-100);
	color: var(--text-900);
	border-radius: 0.5em;
	padding: 0.4em 0.8em;
}

.py-1-custom {
	padding-top: .35rem !important;
	padding-bottom: .35rem !important;
}

#my-block-management {
	max-height: 44vh;
	margin-top: .5em;
	margin-bottom: 1em;
	overflow-y: auto;
}

.empty-message {
	font-size: 0.9em;
	color: var(--text-600);
	text-align: center;
	margin-top: 0.5em;
}

.remove-btn {
	background: none;
	border: none;
	color: var(--text-0);
	font-size: 1em;
	margin-left: 0.5em;
	cursor: pointer;
}

.bg-soft-gray .remove-btn {
	color: var(--text-900);
}

.block-toggle-btn {
	transition: background 0.2s, color 0.2s;
	text-align: center;
	width: 5.5em;
}

.block-toggle-btn.blocked {
	background-color: var(--danger-solid);
	border: none;
	color: var(--on-brand);
}

.block-toggle-btn.unblocked {
	background-color: var(--brand-400);
	border: none;
	color: white;
}

.tag-space-vh .highlight-tag {
	background-color: var(--brand-300) !important;
	color: var(--on-brand) !important;
	font-weight: 500;
}

.text-dark-custom {
	color: var(--on-dark-text);
}

.z-index-10 {
	z-index: 10;
}

.dropdown-toggle-custom {
	background: url(../img/icons/gallery-filter-ascending.svg) no-repeat center center;
	background-size: contain;
	/* 이미지 크기를 버튼에 맞게 조정 */
	background-repeat: no-repeat;
	/* 이미지 반복 방지 */
	text-align: left;
	/* 이미지 중앙 정렬 */
	width: 1.5rem;
	/* 버튼 크기 */
	height: 1.5rem;
	/* 버튼 크기 */
}


.dropdown-menu-template {
	display: block;
	position: absolute;
	z-index: 9999;
	background-color: var(--surface-100);
	padding: 0;
	border-radius: 5px;
}

.dropdown-item-template {
	padding: 0.5em;
	border-radius: 3px;
	font-size: 0.9em;
}

.dropdown-item-template:hover {
	background-color: var(--brand-500);
	color: var(--text-0);
	cursor: pointer;
}

.dropdown-item-template.active {
	background-color: var(--brand-700);
	color: var(--text-0);
}

.my-4_5 {
	margin: 1.75em 0;
}

.mt-4_5 {
	margin-top: 1.75em;
}

.none-radius {
	border-radius: 0 0 15px 15px;
	margin-bottom: 3.5em;
}

#search-empty-message {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--text-500);
	font-size: 1rem;
	z-index: 1;
}

#resultContainer {
	border-radius: 15px;
}

#template-container {
	overflow-y: auto;
}

.template-description-box {
	font-size: 0.65rem;
	color: var(--text-500);
	margin-top: 0.575rem;
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
}

.desc-text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	/*-webkit-line-clamp: 2;*/
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

.recent-template-scroll {
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
}


.recent-template-scroll::-webkit-scrollbar {
	display: none;
}

.recent-template-scroll::-webkit-scrollbar-thumb {
	background-color: var(--border-300);
	border-radius: 3px;
}

.recent-template-btn {
	display: inline-block;
	white-space: nowrap;

	align-items: center;
}



.btn.btn-active-recent {
	font-size: 0.8rem;
	padding: .35em .75em;
	max-width: 9em;
	min-width: 6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--brand-300);
	border: 1px solid var(--brand-300);
	;
	color: var(--brand-050);
	border-radius: 999px;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
}

.btn-active-recent::before {
	content: "✔";
	margin-right: 4px;
	color: var(--brand-050);
	font-size: 0.8rem;
}


.btn.btn-recent,
.btn.btn-preset {
	font-size: 0.75rem;
	padding: .35em .75em;
	max-width: 9em;
	min-width: 6em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 999px;
	transition: all 0.2s ease-in-out;
	box-shadow: none;
	vertical-align: middle;
}

.btn.btn-recent {
	background-color: var(--brand-100);
	border: 1px solid var(--brand-200);
	font-weight: 400;
	color: var(--brand-500);
}




.btn.btn-preset {
	background-color: var(--brand-050);
	border: 1px dashed var(--brand-400);
	font-weight: 400;
	color: var(--brand-600);
	padding: 0.35em 0.75em;
}

.btn.btn-preset:hover,
.btn.btn-preset:focus {
	background-color: var(--brand-100);
	border-color: var(--brand-100);
	color: var(--brand-600);
}

.btn.btn-neutral,
.btn.btn-neutral:hover,
.btn.btn-neutral:focus,
.btn.btn-neutral:active,
.btn.btn-neutral:focus-visible {
	background: var(--brand-neutral);
	color: var(--on-brand-neutral);
	border: 1px solid var(--border-100);
}

.btn.btn-neutral:disabled,
.btn.btn-neutral[disabled] {
	background: var(--surface-150) !important;
	color: var(--text-500) !important;
	border-color: var(--border-200) !important;
	opacity: 0;
	pointer-events: none;
}

.quick-select-label {
	font-size: 0.9rem;
	color: var(--brand-500);
	font-weight: 500;
	margin-bottom: 4px;
	display: inline-block;
}

.no-hover-temp:hover {
	background: inherit !important;
	color: inherit !important;
	border-color: inherit !important;
	box-shadow: none !important;
}

.template-preview-item {
	max-height: 23vh;
	overflow-y: auto;
	padding-right: 8px;
}

.profile-image {
	aspect-ratio: 1/1;
	border-radius: 50%;
	object-fit: cover;
	height: 3.3em;
	width: 3.3em;
	position: relative;
	overflow: hidden;
}

.footer.fixed-bottom {
	padding-bottom: max(.75rem, calc(env(safe-area-inset-bottom) + 6px));
	overflow: visible;
}

.footer .small {
	font-size: .75rem;
	margin-top: 0;
	color: var(--text-700);
}

.footer a.active .small {
	color: var(--brand-solid);
	font-weight: 700;
}

.footer .btn.dash-small-btn {
	min-height: 3rem;
	width: 100%;
	text-align: center;
	padding: 0;
	border: none;
	vertical-align: middle;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.125rem;
	background: transparent;
	color: var(--text-700);
	text-decoration: none;
	box-sizing: border-box;
}

.btn-tab {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	width: 100%;
	min-height: 3rem;
	padding: 0;
	border: 0;
	background: transparent;
	text-decoration: none;
	color: var(--text-700);
	box-sizing: border-box;
}

.btn-tab .icon,
.footer .btn.dash-small-btn .icon,
.footer .btn.dash-small-btn img,
.btn-tab img {
	width: 26px;
	height: 26px;
	display: block;
	margin: 0 auto;
}

.btn-tab .small,
.footer .btn.dash-small-btn .small {
	font-size: .75rem;
	line-height: 1.15;
}

.footer .btn-tab.active,
.footer .btn-tab:hover,
.footer .btn-tab:focus-visible,
.footer .btn.dash-small-btn.active,
.footer .btn.dash-small-btn:hover,
.footer .btn.dash-small-btn:focus-visible {
	color: var(--brand-solid);
}

.footer .btn-tab.active img,
.footer .btn-tab:hover img,
.footer .btn-tab:focus-visible img,
.footer .btn.dash-small-btn.active img,
.footer .btn.dash-small-btn:hover img,
.footer .btn.dash-small-btn:focus-visible img {
	transform: translateY(-1px) scale(1.04);
	filter: invert(36%) sepia(97%) saturate(1818%) hue-rotate(203deg) brightness(96%) contrast(101%);
	will-change: transform;
}

.footer .btn-tab.active,
.footer .btn.dash-small-btn.active {
	position: relative;
}

.footer .btn-tab.active::after,
.footer .btn.dash-small-btn.active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%) translateZ(0);
	width: 18px;
	height: 3px;
	border-radius: 3px;
	background: var(--brand-solid);
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

	.footer .btn-tab.active::after,
	.footer .btn.dash-small-btn.active::after {
		transition: transform .18s ease, opacity .18s ease, width .18s ease;
	}

	.footer .btn-tab:hover::after,
	.footer .btn.dash-small-btn:hover::after {
		width: 22px;
	}
}

.footer .btn-tab:focus-visible,
.footer .btn.dash-small-btn:focus-visible {
	outline: 2px solid var(--brand-solid);
	outline-offset: 2px;
	border-radius: 12px;
}

.type-badge {
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.3rem 0.55rem;
	border-radius: 9999px;
	border: 1px solid var(--brand-200);
	background: var(--brand-50);
	color: var(--brand-700);
	white-space: nowrap;
}

.field-label {
	font-weight: 600;
	color: #374151;
}

.field-label {
	font-weight: 600;
	color: #374151;
}

.type-text {
	--t-bg: #edf4f7;
	--t-bc: #d9e5eb;
	--t-fg: #4f6c78;
}

.type-number {
	--t-bg: #f6f1e7;
	--t-bc: #e8decd;
	--t-fg: #7a6647;
}

.type-amount {
	--t-bg: #f7eee8;
	--t-bc: #e9dbd1;
	--t-fg: #86614a;
}

.type-time {
	--t-bg: #f1eef7;
	--t-bc: #e1dbeb;
	--t-fg: #6b617f;
}

.type-date,
.type-period {
	--t-bg: #f4eef4;
	--t-bc: #e7dce7;
	--t-fg: #7a6678;
}

.type-checkbox {
	--t-bg: #e8f1ea;
	--t-bc: #d5e2d9;
	--t-fg: #5d7264;
}

.type-tel {
	--t-bg: #f3eef8;
	--t-bc: #e3dbec;
	--t-fg: #726587;
}

.type-email {
	--t-bg: #f2f0f8;
	--t-bc: #e0ddef;
	--t-fg: #67657f;
}

.type-url {
	--t-bg: #eef2f7;
	--t-bc: #dde4eb;
	--t-fg: #5f6d7b;
}

.type-rating {
	--t-bg: #fff3d9;
	--t-bc: #f0dfb8;
	--t-fg: #81632b;
}

.type-score {
	--t-bg: #eef4f3;
	--t-bc: #d7e5e1;
	--t-fg: #4f6f69;
}

.type-textarea {
	--t-bg: #eef2f5;
	--t-bc: #dde4ea;
	--t-fg: #5d6976;
}

.sr-removable {
	transition: max-height .25s ease, opacity .25s ease, margin .25s ease, padding .25s ease;
	overflow: hidden;
}

.sr-removable.is-removing {
	opacity: 0;
	max-height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.sr-removable {
		transition: none !important;
	}
}

.product-card-large .product-image-large {
	height: clamp(12rem, 30vh, 18rem);
	width: 100%;
	overflow: hidden;
	position: relative;
	display: block;
}

.product-card-large .product-image-large .background {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.fade-enter {
	opacity: 0;
	transition: opacity 1s ease;
}

.fade-enter.is-in {
	opacity: 1;
}

.img-fade {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.img-fade.loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.fade-enter,
	.img-fade {
		transition: none;
		opacity: 1;
	}
}

.view-thumb .product-card-small {
	padding: 0;
	border: none;
	box-shadow: none;
}

.view-thumb .product-image-small {
	width: 100%;
	aspect-ratio: 1/1;
	margin: 0;
	border-radius: .5rem;
	overflow: hidden;
}

.card,
.my-item-template,
#block-user-container .card-body {
	background-color: var(--surface-0);
	color: var(--text-900);
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--ink-900) 5%, transparent),
		0 1px 1px color-mix(in srgb, var(--ink-900) 2%, transparent);
	border: 1px solid var(--border-100);
}

body,
main,
header,
.loader-display {
	background: var(--surface-50);
	color: var(--text-900);
}

footer {
	background: var(--surface-100);
	color: var(--text-900);
}

h6 {
	color: var(--text-500);
}

.text-dark,
.text-secondary,
.sub-small-text2,
.tag-text,
.float-start,
.dropdown-custom,
#currentSortLabel,
#templateArchiveFilterLabel,
#other-user-tag-title,
#my-block-users,
#my-block-items,
.with-draw,
#passwordModalLabel,
.desc-text,
.template-preview-temp-title,
#my-favorite-items-title,
.btn.btn-edit-light
 {
	color: var(--text-900) !important;
}

/*,
p:not(.tag-name)*/


.custom-control-label {
	color: var(--text-900);
}

.list-group .list-group-item {
	background-color: var(--surface-25);
	color: var(--text-900);
}

.dropdown-item,
.main-menu,
.menu-push-content.menu-open,
.menu-push-content .main-menu,
.menu-push-content .main-menu .menu-container {
	background: var(--surface-0);
}

.main-menu .menu-container {
	background: var(--surface-50);
}

.footer,
.sub-page-header {
	background: var(--surface-0);
}

.border-color,
table.no-border tfoot tr td,
.menu-active main {
	border-color: var(--ink-08);
}

.form-control {
	background: var(--surface-0);
	color: var(--text-900);
}

.form-control option {
	color: var(--text-900);
}

.floating-form-group>.floating-label {
	color: var(--paper-50);
}

.floating-form-group .floating-input {
	/*color: var(--text-900);*/
}

.floating-form-group .floating-input:focus,
.floating-form-group .floating-input:focus:active {
	border-bottom: 1px solid color-mix(in srgb, var(--text-900) 50%, transparent);
}


.floating-form-group .floating-input.is-invalid {
	border-bottom: 1px solid var(--danger);
	background-image: none;
}

.floating-form-group .floating-input.is-invalid:focus,
.floating-form-group .floating-input.is-invalid:focus:active {
	border-bottom: 1px solid var(--danger);
}

.floating-form-group .floating-input:focus+.floating-label,
.floating-form-group .floating-input:focus:active+.floating-label {
	color: var(--text-900);
}

.floating-form-group.active>.floating-label {
	color: var(--text-500);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .my-item-template,
html[data-theme="dark"] #block-user-container .card-body {
	border-color: var(--border-200);
	box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, var(--paper-10) 35%, transparent);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control {
	background: var(--input-bg);
	border-color: var(--input-border);
	color: var(--text-900);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea.form-control:focus,
html[data-theme="dark"] select.form-control:focus {
	border-color: color-mix(in srgb, var(--ring) 70%, var(--border-200));
	box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--ring) 22%, transparent);
}

html[data-theme="dark"] .floating-form-group .floating-input {
	border-bottom-color: var(--border-200);
}

html[data-theme="dark"] .list-group .list-group-item {
	border-color: var(--border-100);
}

html[data-theme="dark"] .item-view .gallery-container .card,
html[data-theme="dark"] #favorite-item-list .card,
html[data-theme="dark"] #other-user-items .card {
	background-color: var(--surface-100);
	border-color: var(--border-200);
}

html[data-theme="dark"] .tag-space-vh .badge,
html[data-theme="dark"] #my-tag-list .badge,
html[data-theme="dark"] .kv-body.hs .chip {
	border: 1px solid var(--border-100);
	background: color-mix(in srgb, var(--surface-100) 88%, var(--text-700) 6%) !important;
}

html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
	border-color: var(--border-200);
	box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .sub-page-header {
	border-bottom: 1px solid var(--border-200);
	box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .btn.disabled {
	background-color: var(--surface-150);
	border-color: var(--border-100);
	color: var(--text-500);
	opacity: .72;
}
html[data-theme="dark"] .template-field-reorder-btn {
	color: var(--text-500);
}

html[data-theme="dark"] .template-field-reorder-btn:not(:disabled):hover,
html[data-theme="dark"] .template-field-reorder-btn:focus-visible {
	background: color-mix(in srgb, var(--surface-200) 52%, transparent);
	color: var(--text-200);
}

.filter .filters-container {
	background-color: var(--surface-50);
}

.noUi-target {
	border-color: var(--paper-30);
}

.sidebar-right {
	background: var(--surface-100);
	color: var(--text-900);
}

#logout-btn {
	border-color: var(--tag-red);
	color: var(--tag-red);
	border-width: .1em;
}

#withdraw-btn {
	border-color: var(--border-200);
	color: var(--text-500);
	border-width: .1em;
	font-weight: 400;
}

.template-filter-view {
	background-color: var(--surface-100);
	border-color: var(--border-200);
}

.template-filter-view img {
	opacity: .8;
}

.main-start {
	border-bottom: 0;
}

.btn-neutral {
	background-color: var(--badge-secondary);
	color: var(--on-brand);
	border: 1px solid var(--badge-secondary);
}

/*.bg-dark {
	background: var(--badge-secondary) !important;
}
*/
/*.checkbox-boxed:checked+.checkbox-lable {
	background: var(--surface-100);
}*/

.checkbox-boxed:checked+.checkbox-lable span {
	font-weight: 500;
}

.quick-menu-label,
.text-muted {
	color: var(--text-900) !important;
}

html[data-theme="dark"] img:not(:is(.icon-white, .image-preview img, .favorite-user-profile, .favorite-title-icon, #modalImage, #image-gallery img, .sub-page-header .icon-size-26, .landing-img img, .header-title img, #favorites-scroller img, .swiper-lazy, #magazine-root img, #rc-images img, .upload-label-profile-image img, .item-search-thumb img, .item-search-confirm-thumb img)),
html[data-theme="dark"] i.invert-color,
html[data-theme="dark"] span.upload-profile-photo,
/*html[data-theme="dark"] label.upload-label-profile-image,*/
html[data-theme="dark"] a.dropdown-toggle-custom,
html[data-theme="dark"] button.btn-close:not(.blocked-tag *),
html[data-theme="dark"] img.icon-size-32,
html[data-theme="dark"] img.icon-size-24,
html[data-theme="dark"] button.user-more-btn,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] #block-items-container .text-muted.small,
html[data-theme="dark"] .random-icon,
/*html[data-theme="dark"] #favorite-btn.favorite-btn:not(.active),
html[data-theme="dark"] .favorite-btn:not(.active),*/
html[data-theme="dark"] .show-hide,
html[data-theme="dark"] .background.is-default-image,
html[data-theme="dark"] .background.is-default-image img {
	filter: invert(1);
}
 
#btn-draft,
.btn-cancel
{
	color: var(--text-900);
}

.border-none-top {
	border-top: none;

}

#tag-input {
	color: var(--text-500);
	/* 또는 현재보다 한 단계 연하게 */
}

.sub-card-label {
	font-size: 0.925rem;
}

.tag-empty-text {
	font-size: 0.75rem;
	padding-left: .1rem;
	color: var(--text-500);
}

.quick-template-bar {
	display: flex;
	align-items: center;
	
	gap: 0.375rem;
	min-width: 0;
}

.quick-template-fixed {
	flex: 0 0 auto;
}

.input-placeholder-center {
	text-align: center;
}

.input-placeholder-center::placeholder {
	text-align: center;
}

.item-view-lock-icon {
	width: 1rem;
	height: 1rem;
	margin-right: 0.35rem;
	flex: 0 0 auto;
}

.item-detail-title {
	display: flex;
	align-items: center;
}

.item-detail-title-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.item-detail-template-link {
	color: var(--brand-600, #2f6fed);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	word-break: break-all;
}

.item-detail-template-link:visited {
	color: var(--brand-600, #2f6fed);
}

#startGuideModal .modal-dialog {
	width: min(88vw, 26rem);
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}

#startGuideModal .start-guide-menu-item {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--text-900);
	font-size: 0.95rem;
	font-weight: 500;
	text-align: left;
}

#startGuideModal .start-guide-menu-item:hover,
#startGuideModal .start-guide-menu-item:focus {
	background: var(--surface-100);
	color: var(--text-900);
}

#startGuideModal .start-guide-menu-item:active {
	background: var(--brand-100);
}

.block-reason-modal-content .modal-header,
.block-reason-modal-content .modal-footer {
	border-color: var(--divider);
}


.block-reason-modal-content {
	background: var(--surface);
	color: var(--fg);
	border: 1px solid var(--divider);
	border-radius: 1rem;
}

.block-reason-desc {
	margin: .5rem;
	padding: 0 .1rem;
	color: var(--fg-muted);
	font-size: .675rem;
	line-height: 1.5;
}

.block-reason-textarea {
	min-height: 5.5rem;
	max-height: 8rem;
	resize: vertical;
	overflow-y: auto;
	background: var(--input-bg);
	color: var(--fg);
	border-color: var(--input-border);
	font-size: .9rem;
}

.block-reason-textarea::placeholder {
	color: var(--input-placeholder);
}

.block-reason-count {
	color: var(--fg-muted);
	font-size: .75rem;
	margin: .5rem;
}