* {
	font-family: "Noto Sans JP", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

input,
button {
	border: none;
}

body.indexPage ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin-bottom: 0 !important;
}

body.indexPage img {
	vertical-align: unset !important;
}

/* menu-button */
.fixed-menu-button {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1000;
}

.fixed-menu-button.has-unread::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	width: 25px;
	height: 25px;
	background: url(/images/marcheProducts_unread.png) 0 0 / 100% no-repeat;
}

.fixed-menu-button span,
.fixed-menu-button span::before,
.fixed-menu-button span::after {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	content: "";
	background-color: #7691cd;
	width: 24px;
	height: 3px;
	border-radius: 2px;
}

.fixed-menu-button span::before {
	background-color: #e86a8e;
	top: -8px;
	transform: translateX(-50%);
}

.fixed-menu-button span::after {
	background-color: #4cc2a7;
	top: 8px;
	transform: translateX(-50%);
}

/* menu */
.menu-container {
	position: relative;
	z-index: 1010;
}

.menu-container .menu-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu-container.open .menu-backdrop {
	display: block;
}

.menu-inner {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #eee;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	height: 100%;
	transform: translateX(-100%);
	transition: 0.5s;
}

.menu-container.open .menu-inner {
	transform: translateX(0);
}

.menu-close-wrapper {
	display: flex;
	justify-content: start;
	padding: 0 20px;
	margin: 23px 0;
	column-gap: 75px;
	align-items: flex-end;
}

.menu-close-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.menu-close-button .close-icon {
	position: relative;
	width: 36px;
	height: 36px;
}

.menu-close-button .close-icon::before,
.menu-close-button .close-icon::after {
	content: "";
	position: absolute;
	background-color: #000;
	top: 50%;
	left: 50%;
	width: 45px;
	height: 5px;
}

.menu-close-button .close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close-button .close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-close-button span {
	font-size: 13px;
	font-weight: 900;
}

.menu-logo {
	width: 144px;
	height: 44px;
}

.user-account-wrapper {
	min-height: 60px;
	padding: 0 15px;
	margin-bottom: 30px;
}

.user-account-wrapper .user-account {
	display: flex;
	align-items: center;
}

.user-account .user-image {
	width: 60px;
	height: 60px;
	padding: 5px;
}

.user-account .user-image img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.user-account .user-name {
	font-weight: 500;
	margin-left: 10px;
}

.menu-contents-wrapper {
	overflow-y: auto;
	overscroll-behavior: none;
}

.menu-list {
	list-style: none;
}

.menu-list li {
	font-size: 13px;
	line-height: 36px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.menu-list li a,
.menu-list li button {
	position: relative;
	display: block;
	color: #000;
	font-weight: 500;
	width: 100%;
	padding: 0 15px;
	text-align: start;
	text-decoration: none;
}

.menu-list li#showMarcheProductList.has-unread a {
	position: relative;
	padding-left: 34px;
}

.menu-list li#showMarcheProductList.has-unread a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	background: url(/images/marcheProducts_unread.png) 0 0 / 100% no-repeat;
}

.menu-list li a::after,
.menu-list li button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #4b4b4b;
	border-right: 2px solid #4b4b4b;
	transform: translateY(-50%) rotate(45deg);
}

.list-group {
	width: 100%;
}

/* modal */
.primaryModal .modal-dialog {
	max-width: 700px;
	height: 100%;
	margin: 0 auto;
	padding: 0 8px;
}

.primaryModal .primaryModal-content * {
	font-family: "M PLUS 1", sans-serif;
}

.primaryModal .primaryModal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	background-clip: padding-box;
	width: 100%;
	max-height: 90%;
	padding: 10px;
	text-align: center;
	border: 1px solid #c5d8ff;
	border-radius: 20px;
	outline: 5px solid rgba(197, 216, 255, 0.25);
	outline-offset: -12px;
	box-shadow: 0 0 0 12px rgba(227, 227, 227, 0.7);
	pointer-events: auto;
}

.primaryModal .primaryModal-content .primaryModal-close {
	position: absolute;
	width: 51px;
	height: 51px;
	top: -21px;
	right: -21px;
	background: linear-gradient(90deg, #c9d6ff, #e2e2e2);
	border: 1px solid #c9d2f2;
	border-radius: 50%;
	outline: 1px solid #fff;
	outline-offset: -4px;
	cursor: pointer;
}

.primaryModal .primaryModal-content .primaryModal-close::before,
.primaryModal .primaryModal-content .primaryModal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	width: 25px;
	height: 3px;
}

.primaryModal .primaryModal-content .primaryModal-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.primaryModal .primaryModal-content .primaryModal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-content-body {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	margin: 7px 0;
}

.modal-content-body::-webkit-scrollbar {
	display: none;
}

.modal-content-body .modal-content-inner {
	max-width: 450px;
	margin: 0 auto;
	padding: 32px 7px 16px;
}

.modal-content-body .modal-content-inner .modal-title {
	margin-bottom: 14px;
}

.modal-content-body .modal-content-inner .modal-title .title-spot-name,
.title-spotGroups-name,
.title-marcheProducts {
	color: #83aafa;
	font-size: 22px;
	line-height: 1.2;
	-webkit-text-stroke: 2px #fff;
	paint-order: stroke;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}

.modal-content-body .modal-content-inner .modal-title span {
	position: relative;
	color: #83aafa;
	font-size: 12px;
	padding-left: 15px;
}

.modal-content-body .modal-content-inner .modal-title span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url(/images/spot_icon.png) 0 0 / 100% no-repeat;
	width: 10px;
	height: 13px;
}

.modal-content-body .rally-title-wrapper {
	color: #6b7278;
	margin-bottom: 16px;
}

.modal-content-body .rally-title-wrapper .rally-title-head {
	position: relative;
	display: inline-block;
	font-size: 10px;
	padding: 0 15px;
	margin-bottom: 4px;
}

.modal-content-body .rally-title-wrapper .rally-title-head::before,
.modal-content-body .rally-title-wrapper .rally-title-head::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	background-color: #6b7278;
	height: 1px;
	width: 10px;
}

.modal-content-body .rally-title-wrapper .rally-title-head::before {
	left: 0;
}

.modal-content-body .rally-title-wrapper .rally-title-head::after {
	right: 0;
}

.modal-content-body .rally-title-wrapper .rally-title {
	font-size: 14px;
	font-weight: bold;
}

.modal-content-body .modal-close-wrapper .modal-close {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background-color: #70a2fc;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	width: 210px;
	padding: 10px 0;
	border-radius: 3px;
}

.modal-content-body .summary-info {
	font-weight: bold;
	max-width: 250px;
	margin: 0 auto 16px;
	padding: 6px 4px;
	outline: 1px solid #ebf0ff;
	outline-offset: -4px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
	border-radius: 4px;
}

.modal-content-body .summary-info-head {
	color: #ed8891;
	font-size: 10px;
}

.modal-content-body .summary-info-content {
	display: flex;
	justify-content: center;
	background: linear-gradient(90deg, #cc2b5e 0%, #753a88 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 15px;
}

.modal-content-body .log-button-wrapper {
	max-width: 350px;
	margin: 0 auto;
}

.modal-content-body .log-button {
	display: block;
	background: url(/images/btn_log_pc.png) 0 0 / contain no-repeat;
	width: 100%;
	padding-top: 19%;
}

@media screen and (max-width: 768px) {
	.primaryModal .primaryModal-content {
		width: 94%;
		margin: 0 auto;
	}

	.primaryModal .primaryModal-content .primaryModal-close {
		top: -16px;
		right: -16px;
	}

	.modal-content-body .modal-close-wrapper .modal-close {
		width: 105px;
	}

	.modal-content-body .log-button {
		background: url(/images/btn_log_sp.png) 0 0 / contain no-repeat;
		padding-top: 24%;
	}
}

/* spot-modal */
.spot-modal-content .spot-image-wrapper {
	margin-bottom: 16px;
}

.spot-modal-content .spot-image-wrapper img {
	display: block;
	width: 100%;
}

.spot-modal-content .checkin-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	max-width: 275px;
	margin: 16px auto;
}

.spot-modal-content .checkin-buttons button {
	display: block;
	width: 100%;
	padding-top: 60%;
}

.spot-modal-content .latlng-checkin-button,
.spot-modal-content .remote-checkin-button {
	position: relative;
}

.spot-modal-content .latlng-checkin-button {
	background: url(/images/btn_spot_checkin.png) 0 0 / contain no-repeat;
}

.spot-modal-content .latlng-checkin-button.finished {
	background: url(/images/btn_spot_checkin_finished.png) 0 0 / contain no-repeat;
}

.spot-modal-content .latlng-checkin-button.unable {
	background: url(/images/btn_spot_checkin_unable.png) 0 0 / contain no-repeat;
}

.spot-modal-content .remote-checkin-button {
	background: url(/images/btn_remote_checkin.png) 0 0 / contain no-repeat;
}

.spot-modal-content .remote-checkin-button.finished {
	background: url(/images/btn_remote_checkin_finished.png) 0 0 / contain no-repeat;
}

.spot-modal-content .remote-checkin-button.unable {
	background: url(/images/btn_remote_checkin_unable.png) 0 0 / contain no-repeat;
}

.marche-badge {
	position: absolute;
	width: 43px;
	top: -16%;
	left: 70%;
	pointer-events: none;
}

.spot-modal-content .marche-button-wrapper {
	width: 180px;
}

.spot-modal-content .marche-button-wrapper .marche-button {
	display: block;
	position: relative;
	background: url(/images/btn_marche.png) 0 0 / contain no-repeat;
	width: 100%;
	padding-top: 37%;
	margin: 0 auto;
}

.spot-modal-content .marche-button-wrapper .marche-button.unread-icon::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	width: 35px;
	height: 35px;
	background: url(/images/marcheProducts_unread.png) 0 0 / 100% no-repeat;
}

@media screen and (max-width: 768px) {
	.spot-modal-content .checkin-buttons {
		max-width: 300px;
	}

	.spot-modal-content .log-button-wrapper {
		max-width: 300px;
	}
}

/* histories-modal */

.histories-list .histories-item {
	position: relative;
	text-align: start;
	cursor: pointer;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(212, 212, 212, 0.5);
}

.histories-list .histories-item:not(:last-of-type) {
	margin-bottom: 5px;
}

.histories-list .histories-item::after {
	content: "";
	position: absolute;
	bottom: 7px;
	right: 9px;
	background: rgba(131, 170, 250, 0.5);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	width: 10px;
	height: 10px;
}

.histories-list .histories-item-head {
	color: #6b7278;
	font-size: 15px;
	font-weight: bold;
}

.histories-list .histories-item-head .spot-name,
.histories-list .histories-item-head .rally-title {
	margin-bottom: 5px;
}

.histories-list .histories-item-head .rally-title {
	color: #6288d9;
	font-size: 16px;
}

.histories-list .histories-item-head .place-name {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}

.histories-list .histories-item-head .place-name span {
	position: relative;
	color: #83aafa;
	font-size: 12px;
	font-weight: normal;
	padding-left: 13px;
	margin-left: 10px;
}

.histories-list .histories-item-head .place-name.place-only span {
	margin-left: 0;
}

.histories-list .histories-item-head .place-name span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url(/images/spot_icon.png) 0 0 / 100% no-repeat;
	width: 10px;
	height: 13px;
}

.histories-list .histories-item-content {
	display: flex;
}

.histories-list .histories-item-content .spot-image {
	width: 33%;
	line-height: 1;
}

.histories-list .histories-item-content .spot-image img {
	width: 100%;
}

.histories-list .histories-item-content .checkin-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	color: #6b7278;
	font-size: 10px;
	margin-left: 12px;
	padding-right: 14px;
}

.histories-list .histories-item-content .checkin-details .checkin-detail {
	display: flex;
	align-items: center;
}

.histories-list .histories-item-content .checkin-detail .checkin-date-head {
	font-size: 8px;
	letter-spacing: -0.12em;
	margin-right: 5px;
	padding: 0 3px;
	border: 0.5px solid #6b7278;
	border-radius: 2px;
}

.histories-list .histories-item-content .checkin-detail .checkin-type {
	background: #83aafa;
	color: #fff;
	margin-left: 5px;
	padding: 2px 8px;
	border-radius: 3px;
}

.histories-list .histories-item-content .checkin-message {
	position: relative;
	background: linear-gradient(90deg, #c9d6ff 0%, #e2e2e2 100%);
	color: #43147c;
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 0;
	padding: 8px;
	border-radius: 7px;
}

.histories-list .histories-item-content .checkin-message::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -9px;
	transform: translateY(-50%);
	background: #c9d6ff;
	width: 10px;
	height: 14px;
	clip-path: polygon(0 0, 100% 20%, 100% 100%);
}

/* reward-modal */
.reward-modal-content .modal-content-body .modal-content-inner {
	padding: 16px 7px;
}

.reward-modal-content .modal-title {
	margin-top: 10px;
}

.reward-modal-content .checkin-message {
	position: relative;
	background: linear-gradient(90deg, #c9d6ff 0%, #e2e2e2 100%);
	color: #43147c;
	font-size: 14px;
	font-weight: bold;
	margin: 14px 0 4px;
	padding: 12px;
	border-radius: 7px;
	filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.2));
}

.reward-modal-content .checkin-message::before {
	content: "";
	position: absolute;
	top: -13px;
	left: 14%;
	background: #c9d6ff;
	width: 15px;
	height: 14px;
	clip-path: polygon(0 100%, 90% 0, 100% 100%);
}

.reward-modal-content .summary-info {
	margin: 16px auto;
}

@media screen and (max-width: 768px) {
	.reward-modal-content .summary-info {
		margin: 12px auto;
	}
}

/* marcheProducts-modal */
.marcheProducts-list .marcheProducts-list-item {
	position: relative;
	text-align: start;
	border-bottom: 1px solid rgba(212, 212, 212, 0.5);
}

.marcheProducts-list .marcheProducts-list-item a {
	display: block;
	text-decoration: none;
	padding-bottom: 16px;
}

.marcheProducts-list .marcheProducts-list-item:not(:last-of-type) {
	margin-bottom: 5px;
}

.marcheProducts-list .marcheProducts-list-item::after {
	content: "";
	position: absolute;
	bottom: 7px;
	right: 9px;
	background: rgba(131, 170, 250, 0.5);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	width: 10px;
	height: 10px;
}

.marcheProducts-list .marcheProducts-list-item .product-title {
	display: flex;
	align-items: center;
	color: #6288d9;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 7px;
}

.marcheProducts-list .marcheProducts-list-item .product-title .unread-icon {
	display: block;
	background-image: url(/images/marcheProducts_unread.png);
	background-size: 100%;
	width: 22px;
	height: 22px;
	margin-right: 7px;
}

.marcheProducts-list .products-item-content {
	display: flex;
}

.marcheProducts-list .products-item-content .product-img {
	width: 40px;
	height: 40px;
}

.marcheProducts-list .products-item-content .product-img img {
	width: 100%;
}

.marcheProducts-list .products-item-content .product-details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	color: #6b7278;
	font-size: 10px;
	margin-left: 12px;
	padding-right: 14px;
}

.marcheProducts-list .products-item-content .product-details .checkin-date {
	display: flex;
	align-items: center;
}

.marcheProducts-list .products-item-content .product-details .checkin-date-head {
	font-size: 8px;
	letter-spacing: -0.12em;
	margin-right: 5px;
	padding: 0 3px;
	border: 0.5px solid #6b7278;
	border-radius: 2px;
}

.marcheProducts-list .products-item-content .product-details .checkin-spot-name {
	font-size: 12px;
	font-weight: bold;
}

/* keyword-modal */
.keywordModal-modal-content .keyword-input-wrapper {
	margin: 40px 0 16px;
}

.keywordModal-modal-content .keyword-input-wrapper .keyword-input-head {
	color: #f9579e;
	font-size: 24px;
	font-weight: 900;
}

.keywordModal-modal-content .keyword-input-wrapper .keyword-input-head p {
	color: #6b7278;
	font-size: 12px;
	font-weight: normal;
	margin: 5px 0 10px;
}

.keywordModal-modal-content .keyword-input-wrapper .keyword-input {
	margin-bottom: 16px;
}

.keywordModal-modal-content .keyword-input-wrapper input {
	background-color: #f8f8f8;
	font-size: 14px;
	text-align: center;
	padding: 10px 15px;
	width: 100%;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.keywordModal-modal-content .keyword-input-wrapper input::placeholder {
	color: #d5d5d5;
}

.keywordModal-modal-content .keyword-input-wrapper input:focus-visible {
	border: 1px solid transparent;
	outline: 2px solid rgba(253, 88, 107, 0.5);
}

.keywordModal-modal-content .keyword-input-wrapper .keyword-submit-button {
	display: block;
	background: url(/images/btn_keyword_submit.png) 0 0 / contain no-repeat;
	width: 204px;
	height: 60px;
	margin: 0 auto;
}

/* error-modal */
.errorModal-modal-content .error-wrapper .error-img {
	display: block;
	width: 154px;
	margin: 0 auto;
}

.errorModal-modal-content .error-wrapper .error-message {
	color: #6b7278;
	font-size: 18px;
	margin-bottom: 16px;
}

#spotGroupsbtn,
#allSpotbtn {
	width: 137px;
	padding-top: 42%;
}

#spotGroupsbtn {
	position: relative;
	background: url(/images/btn_rally.png) 5px 0 / 100% no-repeat;
}

#allSpotbtn {
	background: url(/images/btn_rally_close.png) 5px 0 / 100% no-repeat;
}

#spotGroupsbtn.has-unread::before {
	content: "";
	position: absolute;
	top: -4px;
	right: 0px;
	width: 32px;
	height: 32px;
	background: url(/images/marcheProducts_unread.png) 0 0 / 100% no-repeat;
}

.yl-spot {
	position: relative;
}

.yl-spot svg {
	position: absolute;
}

.yl-spot svg.yl-spot-marker {
	left: -28px;
	top: -56px;
}

@keyframes intense-sparkle {
	0%,
	100% {
		filter: drop-shadow(0 0 8px #ff064d) drop-shadow(0 0 15px rgba(255, 6, 77, 0.7));
	}
	25% {
		filter: drop-shadow(0 0 12px #ff064d) drop-shadow(0 0 35px #ff064d);
	}
	50% {
		filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 12px rgba(255, 6, 77, 0.6));
	}
}

svg.yl-spot-marker.available-marker {
	filter: drop-shadow(0px 3px 15px #ff064d);
}

svg.yl-spot-marker.available-marker.animate {
	animation: intense-sparkle 1.5s linear infinite;
}

.yl-spot svg.yl-spot-badge {
	left: -26px;
	top: -60px;
}

.yl-spot-name {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translate(-50%, -100%);
	white-space: nowrap;
	pointer-events: none;
}

.yl-spot-name--pill {
	padding: 6px 4px;
	border-radius: 4px;
	background: rgba(100, 100, 100, 0.8);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#currentPositionBtn {
	background: url(/images/icon_focus.png) 0 0 / 100% no-repeat;
	width: 50px;
	padding-top: 110%;
}

.spotrally-period {
	display: flex;
	align-items: center;
}

.spotrally-period .span-spot-rally {
	height: 16px;
	padding-left: 20px;
	margin-right: 8px;
}

.spotrally-period .span-spot-time {
	color: #6b7278;
	font-size: 15px;
}

#spotsOnGroups .list-group .list-spotGroup-item,
#spotGroups .list-group .list-spotGroup-item {
	> span {
		color: #6288d9;
		font-size: 14px;
		font-weight: bold;
	}
	div span {
		color: #6b7278;
	}

	.span-spotGroup-rally {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 93px;
		height: 16px;
		margin-right: 8px;
	}

	.span-spotGroup-time {
		font-size: 11px;
		font-weight: 49;
	}

	.span-spotGroup-checkin {
		font-size: 12px;
		font-weight: bold;
	}

	img {
		width: 40px;
		height: 40px;
	}

	.rally-list-name {
		font-size: 16px;
		font-weight: bold;
		color: #6288d9;
	}

	.address-icon {
		width: 11px;
		height: auto;
		margin-right: 3px;
	}

	.address-text {
		color: #83aafa;
		font-size: 12px;
		letter-spacing: -0.5px;
	}

	.checkin-badge {
		width: 70px;
		height: 12px;
		font-size: 8px;
		padding: 0;
		margin: 3px 0 5px 20px;
		color: #ffffff;
		background-color: #f9579e;
		border-radius: 5px;
	}

	.progress {
		background-color: #d9d9d9;
		margin-right: 5px;
		width: 100px;
		height: 14px;
		border-radius: 7px;

		.progress-bar {
			background-color: #83aafa;
		}
	}

	.spotGroup-marche-button {
		position: relative;
		background: url(/images/btn_marche.png) 0 0 / 100% no-repeat;
		width: 104px;
		height: 37px;
	}

	.spotGroup-marche-button.unread::before {
		content: "";
		position: absolute;
		top: -5px;
		left: -5px;
		background: url(/images/marcheProducts_unread.png) 0 0 / 100% no-repeat;
		width: 24px;
		height: 24px;
	}

	&.completed {
		> span {
			color: #f9579e;
		}

		.progress {
			background-color: #f9579e;
			display: grid;
			place-items: center;
			width: 103px;
			height: 17px;
			margin-right: 4px;
			border-radius: 9px;

			span {
				color: #fff;
				font-size: 10px;
			}
		}

		.span-spotGroup-checkin {
			color: #f9579e;
		}
	}

	position: relative;
	display: block;
	padding: 0.5rem 0.5rem;
	color: #212529;
	text-decoration: none;
	background-color: #fff;
	border-bottom: 1px solid rgba(212, 212, 212, 0.5);
}

.list-group .list-spotGroup-item::after {
	content: "";
	position: absolute;
	bottom: 5px;
	right: 0px;
	background: rgba(131, 170, 250, 0.5);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	width: 10px;
	height: 10px;
}

#spotsOnGroups .showButton,
#spotGroups .newest,
#marcheProducts .newest {
	border: 1px solid #2743b7;
	padding: 3px 12px;
	border-radius: 4px;
	margin: 6px 4px 15px 0;
	background: linear-gradient(90deg, #1488cc 0%, #2b32b2 100%);
	background-clip: text;
	color: transparent;
	font-weight: bold;
	font-size: 15px;
	box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.04);
	height: 30px;
}

#spotsOnGroups .showButton {
	display: flex;
	align-items: center;
	margin-top: 15px;
}

#spotsOnGroups .showButton img {
	margin-right: 5px;
}

#spotsOnGroups .rallyBackButton {
	width: 114px;
	height: 40px;
	font-size: 16px;
	color: white;
	background-color: #70a2fc;
	border-color: #70a2fc;
	margin-top: 27px;
}

#spotGroups .newest,
#marcheProducts .newest {
	width: 83px;
}

#spotGroups .modal-content-body .modal-content-inner,
#spotsOnGroups .modal-content-body .modal-content-inner {
	padding: 27px 7px 7px;
}

/* Styles for favoriteColorModal & registerUserModal */
#favoriteColorModal .modal-header,
#registerUserModal .modal-header {
	position: relative;
	justify-content: center;
	border: 0;
}

#favoriteColorModal .modal-content,
#registerUserModal .modal-content {
	background-color: #ece9e6;
}

#favoriteColorModal .modal-footer,
#registerUserModal .modal-footer {
	justify-content: center;
	border: 0;
}

#favoriteColorModal button[type="submit"],
#registerUserModal button[type="submit"] {
	background-color: #ffffff;
	border-color: #d4d4d4;
}

#favoriteColorModal .custom-submit-button-hover:hover,
#registerUserModal .custom-submit-button-hover:hover {
	color: #464544 !important;
}

/* --- User Statistics View Styles --- */
.user-statistics-container * {
	font-family: "M PLUS 1", sans-serif;
}

.user-statistics-container {
	position: relative;
	margin: 15px;
	padding-top: 10px;
	width: 268px;
	pointer-events: all;
	transition:
		opacity 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
	opacity: 1;
	visibility: visible;
}

.user-statistics-container.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.user-profile-icon {
	position: absolute;
	top: -4px;
	right: -10px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(180deg, #ffb347 0%, #ffcc33 100%);
	border: 1px solid #5b7acc;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);
	z-index: 3;
	flex-shrink: 0;
}

.user-profile-icon img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.nationwide-label {
	position: relative;
	margin-left: auto;
	width: 186px;
	height: 30px;
	background: linear-gradient(90deg, #7474bf 0%, #348ac7 100%);
	border: 1px solid #5766a2;
	border-radius: 15px;
	z-index: 2;
	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.04);
	color: white;
	font-size: 16px;
	font-weight: bold;
	display: flex;
	justify-content: end;
	align-items: center;
	padding-right: 80px;
}

.stats-box {
	position: relative;
	background-color: #fefeff;
	outline: 1px solid #ebf0ff;
	outline-offset: -4px;
	border-radius: 4px;
	margin-top: 6px;
	margin-left: 28px;
	padding: 6px 4px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
	z-index: 1;
}

.stats-title {
	color: #ed8891;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 2px;
}

.stats-details {
	display: flex;
	justify-content: center;
	font-size: 15px;
	font-weight: bold;
	background: linear-gradient(90deg, #cc2b5e 0%, #753a88 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stats-details .separator {
	margin: 0 8px;
	font-weight: 300;
}

.rally-spot-container {
	position: absolute;
	top: 80px;
	left: 15px;
	width: 237px;
	background-color: #fff;
	border-radius: 4px;
	padding: 2px;
}

.rally-spot-container .rally-spot-fill {
	width: 100%;
	border: 2px solid #ebf0ff;
	border-radius: 4px;
}

.rally-spot-container .rally-spot-name {
	position: relative;
	width: 100%;
	margin-bottom: 3px;
	text-align: center;
	color: #83aafa;
	font-size: 18px;
	-webkit-text-stroke: 2px #fff;
	paint-order: stroke;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
	font-family: "M PLUS 1", sans-serif;
}

/* Unified Overlay effect & spinner */
.unified-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1060;

	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);

	transition: background-color 0.3s ease-in-out;
}

.unified-overlay.is-transparent {
	background-color: transparent;
}

.unified-overlay img {
	max-width: 90%;
	max-height: 90%;
}

.rewardEffect {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
}

.loading-container {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 2000;
}

.loading-container .loading-spinner {
	position: absolute;
	width: 4rem;
	height: 4rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.modal-lock-show,
.modal-lock-hide {
	position: absolute;
	z-index: 9999;
	width: 100%;
	height: 100%;
}