@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family: alte;
    src: url(../fonts/AlteHaasGroteskBold.ttf);
}
@font-face {
    font-family: vice-city;
    src: url(../fonts/GTVCS-Book.otf);
}
html, body {
	overflow: -ms-autohiding-scrollbar; /* For Internet Explorer and Edge */
	overflow: scrollbar; /* For other browsers */
}
::-webkit-scrollbar {
	display: none;
}
html {
	overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { 
    width: 0;
    height: 0;
}
body {
	background-color: #11082b;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url(../images/blurry-gradient-haikei.png);
	font-family: 'Roboto';
}
p {
	margin-bottom: 0.25rem;
}

hr {
	color: #312c57;
	opacity: 1;
}

.header {
    padding: 0.65rem;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: transparent;
    color: white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #312c57;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.phone-container {
	min-width: 375px; /* Standard mobile width */
	max-width: 540px; /* Standard mobile width */
	margin: 0 auto;
	height: 100vh;
	background-color: rgba(214, 167, 255, 0.05);
     color: rgba(231, 231, 231, 1);
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}
.logo {
	max-width: 150px;
	margin: 40px auto;
}
.text-gradient-primary {
    position: relative;
    display: inline-block;
    color: transparent;
    /* background: linear-gradient(74deg, #93c3ff 0, #9ea9fd 9%, #d2a8a8 20%, #ff8f8f 24%, #9ea9fd 35%, #93c3ff 44%, #9ea9fd 50%, #ffc5c5 56%, #d2a8a8 75%, #ffc5c5 100%); */
	background: linear-gradient(74deg, #be93ff 0, #db9efd 9%, #ffd333 20%, #ffd400 24%, #db9efd 35%, #be93ff 44%, #db9efd 50%, #ffcf86 56%, #ffd333 75%, #ffcf86 100%);
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.text-gradient-golden {
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(74deg, #ffd400 0, #ffa500 9%, #ffe76e 20%, #ffd400 24%, #ffa500 35%, #ffd400 44%, #ffa500 50%, #ffd400 56%, #ffa500 75%, #ffe76e 100%);
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.form-control {
	background-color: rgba(214, 167, 255, 0.05);
	color: white;
	border-color: #312c57;
}

.form-control:active, .form-control:focus {
	outline: none;
	box-shadow: none;
	background-color: transparent;
	border-color: #ffc500;
	color: white;
}

.form-control:disabled, .form-control.disabled {
background-color: #170e2d;
color: #312c57;
}

.form-floating label {
	color: #fff !important;
}
 
.phone-container .form-floating label {
     color: #ffc500 !important;
 }
 
.form-floating label::after {
     background-color: transparent !important;
 }
.form-floating label::after {
	background-color: transparent !important;
}
.group-container {
	--animate-duration: 0.24s;
}
.animate__durationExcluded {
	--animate-duration: 1s !important;
}

.card-bg-extreme_aces {

}

.card-bg-unstoppable_closers {
	background: rgb(54,83,48);
	background: -moz-linear-gradient(347deg, rgba(54,83,48,0.07886904761904767) 0%, rgba(88,200,54,0.2945553221288515) 60%, rgba(45,214,72,0.5214460784313726) 91%);
	background: -webkit-linear-gradient(347deg, rgba(54,83,48,0.07886904761904767) 0%, rgba(88,200,54,0.2945553221288515) 60%, rgba(45,214,72,0.5214460784313726) 91%);
	background: linear-gradient(347deg, rgba(54,83,48,0.07886904761904767) 0%, rgba(88,200,54,0.2945553221288515) 60%, rgba(45,214,72,0.5214460784313726) 91%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#365330",endColorstr="#2dd648",GradientType=1);
}

.btn {
	position: relative;
	font-weight: bold;
	overflow: hidden;
	transition: 0.08s;
}
.btn-lg {
	/* font-family: 'vice-city'; */
	font-size: 16px;
	padding: 12px;
}

.btn-primary {
    background-color: rgb(114 0 189 / 75%);
    border: 2px solid transparent;
    border-top: 1px solid rgb(135 135 135 / 25%);
}

.btn-primary:hover {
    background-color: rgba(92, 11, 147, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgb(135 135 135 / 25%);
}

.btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible, .btn-primary:disabled, .btn-primary.disabled {
    background-color: rgba(92, 11, 147, 0.75) !important;
    border: 2px solid transparent !important;
    border-top: 1px solid rgb(135 135 135 / 25%) !important;
}

.btn-secondary {
    background-color: rgba(49, 44, 87, 0.5);
    border: 2px solid transparent;
    border-top: 1px solid rgba(88, 88, 88, 0.25);
}

.btn-secondary:hover {
    background-color: rgba(49, 44, 87, 0.75);
    border: 2px solid transparent;
    border-top: 1px solid rgba(88, 88, 88, 0.25);
}

.btn-outline-primary {
	background-color: rgba(214, 167, 255, 0.05) !important;
	border: 1px solid #312c57 !important;
	color: #fff !important;
}

.btn-outline-primary:hover {
	background-color: #312c57 !important;
	border: 1px solid #312c57 !important;
	color: #fff !important;
}

.btn-outline-primary:active, .btn-outline-primary:focus {
	background-color: #312c57 !important;
	border: 1px solid #312c57 !important;
	color: #fff !important;
}

span.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 300ms linear;
	background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

.team-name-a {
	font-weight: bold;
	font-size: 24px;
}

.team-name-b {
	font-weight: bold;
	font-size: 40px;
}

.backdrop-image {
	position: absolute;
    left: 100px;
    top: 15px;
	z-index: 0;
	pointer-events: none;
	filter: blur(12px);
}

#range-leaderboard-table-container {
	/* font-family: "IBM Plex Mono", serif; */
}

#range-leaderboard-table-container .grand-total {
	font-family: "IBM Plex Mono", serif;
	font-size: 38px;
}

#range-leaderboard-table-container .grand-total td.extreme_aces {
	background: rgb(253,255,216);
	background: -moz-radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(142,123,63,1) 91%);
	background: -webkit-radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(142,123,63,1) 91%);
	background: radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(142,123,63,1) 91%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdffd8",endColorstr="#8e7b3f",GradientType=1);
}

#range-leaderboard-table-container .grand-total td.unstoppable_closers {
	background: rgb(253,255,216);
	background: -moz-radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(76,142,63,1) 91%);
	background: -webkit-radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(76,142,63,1) 91%);
	background: radial-gradient(circle, rgba(253,255,216,1) 0%, rgba(76,142,63,1) 91%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdffd8",endColorstr="#4c8e3f",GradientType=1);
}

.page-container {
	padding: 20px;
	background-color: #f8f9fa;
}

.loader {
	height: 100px;
	aspect-ratio: 1;
	box-sizing: border-box;
	transform: rotate(45deg);
	display: grid;
	place-content: center;
	/*  clip-path: polygon(50% 0%, 100% 49%, 50% 100%, 0% 50%); */
	mask: conic-gradient(#000 0 10%), conic-gradient(#000 0 0) content-box exclude;
	overflow: hidden;
}
.loader:before {
	content: "";
	position: absolute;
	inset: 0;
	transform: scale(1.5);
	
	background: linear-gradient(
	0,
	transparent 0%,
	transparent 10%,
	transparent 40%,
	#DAA520 50%,
	#FFDF00 60%,
	#B8860B 60%
	);
	filter: blur(8px);
	animation: l3 3s linear infinite;
}

@keyframes l3 {
	to {
		rotate: 1turn;
	}
}

.item {
	background: linear-gradient(45deg, #FFDF00, #FFD700, #B8860B, #DAA520, #B8860B);
	height: 70px;
	width: 70px;
	border: 5px solid #f8f9fa;
	box-shadow: inset -8px -8px 0 #f8f9fa, inset 8px 8px 0 #f8f9fa;
	aspect-ratio: 1;
	z-index: 2;
	filter: unset;
	position: relative;
}
.item::after {
	top: 0;
	right: 0;
	display: block;
	width: 30px;
	height: 30px;
	background-color: red;
	border: 5px solid red;
}

.drop-zone {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 1px dashed #312c57;
     border-radius: 5px;
     background: rgba(214, 167, 255, 0.05);
     padding: 20px;
	 margin: 0 auto;
	 width: 95%;
     height: 300px;
     text-align: center;
     cursor: pointer;
     transition: background 0.2s ease;
     font-size: 1.2rem;
 }
 
 .drop-zone:hover {
      background: var(--color-muted);
 }
 
 .drop-zone.dragging {
      background: var(--color-primary);
 }
 #drop-zone img {
      padding-right: 25px;
 }

.drop-zone-img {
	--s: 50px; /* the size on the corner */
	--t: 5px;  /* the thickness of the border */
	--g: 20px; /* the gap between the border and image */

	padding: calc(var(--g) + var(--t));
	filter: drop-shadow(5px 5px 10px #000000);
	transition: .4s;
}
.drop-zone-img:hover {
	outline-offset: calc(-1*var(--g));
}
.drop-zone-single-primary-img {
	--s: 50px; /* the size on the corner */
	--t: 5px;  /* the thickness of the border */
	--g: 20px; /* the gap between the border and image */

	outline: var(--t) solid rgb(114 0 189 / 75%); /* the color here */
	outline-offset: calc(-1*var(--t));
	mask:
	conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
	0 0/calc(100% - var(--s)) calc(100% - var(--s)),
	conic-gradient(#000 0 0) content-box;

	filter: drop-shadow(0px 0px 0px transparent);
}
.drop-zone-multiple-primary-img {
	border: 2px solid #ffc500;
	border-radius: 5px;

	filter: drop-shadow(0px 0px 0px transparent);
}
.drop-message i {
	font-size: 36px;
	color: #ffc500;
}

select.form-control option {
	background-color: #222;
	color: #fff;
}

.phone-container .navbar {
	padding: 4px 16px;
	backdrop-filter: blur(16px); /* Apply blur effect to the background */
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-top: 0px;
	margin-bottom: 20px;
	border-bottom: 1px solid #312c57;
}

.pet-preview-image {
	object-fit: contain;
}

.pet-preview-image-backdrop {
	position: absolute;
	filter: blur(12px);
	z-index: -5;
	object-fit: contain;
	pointer-events: none;
	opacity: 0.5;
}

.banner-container {
	position: relative;
	border-radius: 16px;
	width: 95%;
	margin: 0 auto;
	font-size: 14px;
	overflow: hidden;
}

/* .banner-container .banner-icon {
	position: absolute;
	top: -8px;
	left: 6px;
	font-size: 47px;
	color: #403170;
	z-index: -1;
} */

.banner-info {
	background-color: rgba(151, 100, 255, 0.16);
}

.banner-warning {
	background-color: #2c0734;
}

.banner-danger {
	background-color: #b6010185;
}

.text-background-info {
	padding: 0.5rem 1rem;
	background-color: rgba(151, 100, 255, 0.16);
	border-radius: 8px;
	color: #fff;
}

.text-background-warning {
	padding: 0.5rem 1rem;
	background-color: #2c0734;
	border-radius: 8px;
	color: #fff;
}

.input-interactable-readonly {
	transition: background-color 0.3s ease;
}

.input-interactable-readonly:hover {
	cursor: pointer;
	background-color: rgba(214, 167, 255, 0.05) !important;
}

.offcanvas {
	background-color: #130d22;
	color: rgba(231, 231, 231, 1);
	transition: transform 0.16s ease-in-out; !important
}

.offcanvas-backdrop {
	background-color: transparent;
}

.offcanvas-backdrop.show {
	opacity: 1;
	backdrop-filter: blur(16px);
}

main .card {
    position: relative;
    background-color: rgba(214, 167, 255, 0.05);
    color: rgba(231, 231, 231, 1);
    margin-bottom: 0;
}

main .card .card-title {
    font-size: 32px;
    display: inline-block;
    margin-bottom: 0;
}

main .card .card-body {
    padding-bottom: 2rem;
}

main .card .card-icon {
	position: absolute;
    font-size: 96px;
    top: 0px;
    right: -5px;
    color: rgba(255, 255, 255, 0.04);
}

main .card .card-value {
	position: absolute;
    top: 19px;
    right: 28px;
    font-size: 39px;
}

main .card-hoverable:hover {
    /* outline: 1px solid #312c57;
    outline-offset: 1px; */
    cursor: pointer;
}

.card {
	border: 1px solid #312c57;
	background-color: rgba(214, 167, 255, 0.05);
	color: rgba(231, 231, 231, 1);
	margin-bottom: 0.5rem;
}

.card-interactable {
	transition: 0.08s;
}

.card-interactable:hover {
	cursor: pointer;
	border: 1px solid #67666f;
	background-color: rgba(0, 0, 0, 0.33);
}

.rotating {
    animation: rotate 48s linear infinite;
	transform-origin: center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.img-border-primary {
	border: 1px solid #312c57;
	background-color: rgba(214, 167, 255, 0.05);
}

.summary-section {
    background: rgba(214, 167, 255, 0.05);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #312c57;
}

.summary-title {
    border-bottom: 2px solid #312c57;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #312c57;
}

.summary-label {
    font-weight: 500;
    color: #312c57;
	align-content:center;
}

.summary-value {
    color: #fff;
    text-align: right;
    max-width: 60%;
}

.text-muted {
	color: #fff !important;
	opacity: 0.16;
}

.tewi-btn-icon {
    color: white;
    background-color: transparent;
    border-radius: 8px;
    border: none;
}

.tewi-btn-icon:hover {
    background-color: rgba(214, 167, 255, 0.05);
	outline: 1px solid #312c57;
    /* transform: scale(1.2); */
    cursor: pointer;
    transition: 0.08s;
}

.skeleton {
    background-color: rgba(49, 44, 87, 0.5);
    overflow: hidden;
    position: relative;
}

.skeleton:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(237,236,255,0.03) 0%, rgba(255,255,255,0.06) 35%, rgba(187,193,255,0.09) 100%);
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	animation: shine 1.33s ease infinite;
}

@keyframes shine {
	to {
		background-position: right -40px top 0;
	}
}

.species-list-wrapper {
	margin-top: 90px;
}

@media (max-width: 575.98px) {
	.species-filter-starts_with-btn-container {
		display: none !important;
	}

	.species-list-wrapper {
		margin-top: 40px;
	}
}

.hr-with-text {
	text-align: center;
	border-bottom: 1px solid #312c57;
	line-height: 0;
	margin: 2rem 0;
}

.hr-with-text span {
	background: #130d22;
	padding: 0 10px;
	font-size: 1.2rem;
	color: #312c57;
}

.glow-on-hover {
    position: relative;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #9d00ff, #6a00ff, #2b00ff, #0084ff, #00ffd5, #002bff, #7a00ff, #ff00c8, #9d00ff);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: transparent; */
	background: #19123a;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.glow-gradient {
    position: relative;
}

.glow-gradient:before {
    content: '';
    background: linear-gradient(45deg, #9d00ff, #6a00ff, #2b00ff, #0084ff, #00ffd5, #002bff, #7a00ff, #ff00c8, #9d00ff);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-gradient:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: transparent; */
	background: #19123a;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.image-container {
    position: relative;
    margin: 0 auto;
    width: 192px;
    height: 192px;
    border-radius: 192px;
    background: linear-gradient(0deg, #000, #272727);
}

.image-container:before, .image-container:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #914193, #efd534, #b873fe, #8035eb, #914193, #efd534, #b873fe, #8035eb, #914193, #efd534);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 192px;
    z-index: -1;
    animation: steam 40s linear infinite;
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.image-container:after {
    filter: blur(50px);
}

.iagd-circle-containers {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
	pointer-events: none;
}

.iagd-circle-01,
.iagd-circle-02,
.iagd-circle-03,
.iagd-circle-04,
.iagd-circle-05,
.iagd-circle-06,
.iagd-circle-07 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 8px dotted #312c57;
    animation: spin linear 600s infinite;
}

.iagd-circle-01 {
    width: 840px;
    height: 840px;
    opacity: 0.16;
}

.iagd-circle-02 {
    width: 860px;
    height: 860px;
    opacity: 0.14;
}

.iagd-circle-03 {
    width: 880px;
    height: 880px;
    opacity: 0.12;
}

.iagd-circle-04 {
    width: 900px;
    height: 900px;
    opacity: 0.10;
}

.iagd-circle-05 {
    width: 920px;
    height: 920px;
    opacity: 0.08;
}

.iagd-circle-06 {
    width: 940px;
    height: 940px;
    opacity: 0.06;
}

.iagd-circle-07 {
    width: 960px;
    height: 960px;
    opacity: 0.04;
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.profile-group-container {
    border-radius: 8px;
    border: 1px solid #312c57;
    background-color: rgba(0, 0, 0, 0.16);
}

.pet-breed-container {
    position: relative;
    text-align: left;
    padding-left: 56px;
    width: 100%;
	overflow: visible;
}

.pet-breed-icon {
    position: absolute;
    font-size: 60px;
    top: -19px;
    left: -10px;
    z-index: 2;
}

.pet-breed-background {
	position: absolute;
    content: '';
    border-radius: 64px;
    background-color: #312c57;
    width: 78px;
    height: 78px;
    top: -7px;
    left: 0px;
    z-index: 1;
}

.pet-breed-title {
    font-size: 22px;
    padding-left: 32px;
	margin-bottom: 0px;
}

.pet-breed-tooltip {
    font-size: 12px;
    opacity: 0.5;
    padding-left: 32px;
}

.pet-banner {
	position: relative;
	border-radius: 4px;
	border: 1px solid #312c57;
	overflow: hidden;
}

.pet-banner-image {
	width: 100%;
	height: 225px;
	object-fit: cover;
	object-position: 50% 20%;
}

.pet-banner-title {
	position: absolute;
    bottom: 0px;
    padding-top: 8px;
    padding-bottom: 4px;
    color: white;
    /* left: 8px; */
    width: 100%;
    background-color: rgba(0, 0, 0, 0.45);
}

.outlined-text {
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

.map-ripple {
	position: relative;
	overflow: hidden;
}

.map-ripple:before,
.map-ripple:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 4px solid #312c572e;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: map-ripple 12s linear infinite;
}

.map-ripple:after {
	animation-delay: 6s;
}

@keyframes map-ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(4);
		opacity: 0;
	}
}

.pet-profile-gallery-grid {
	display: grid;
	gap: 0.25rem;
	grid-template-columns: repeat(5, 1fr);
}

.pet-profile-gallery-grid-last {
	display: grid;
	gap: 0.25rem;
}

@media (max-width: 1200px) {
	.pet-profile-gallery-grid,
	.pet-profile-gallery-grid-last {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 992px) {
	.pet-profile-gallery-grid,
	.pet-profile-gallery-grid-last {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.pet-profile-gallery-grid,
	.pet-profile-gallery-grid-last {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.pet-profile-gallery-grid,
	.pet-profile-gallery-grid-last {
		grid-template-columns: repeat(1, 1fr);
	}
}

.profile-group-container-grid {
    display: grid;
    grid-template-columns: 50% 33.333% 16.667%;
    gap: 0.25rem;
}

@media (max-width: 768px) {
    .profile-group-container-grid {
        grid-template-columns: 100%;
    }

    .profile-group-container-grid > * {
        grid-column: 1;
        width: 100%;
    }
}

#map {
	width: 100%;
	height: 500px;
	transform: perspective(1000px) rotateX(60deg) scaleY(0.8);
	transform-origin: bottom center;
}

.pet-interact, .pet-interact-passive {
	width: 75px;
	height: 35px;
	overflow: hidden;
	position: relative;
	text-align: end;
	transition: all 0.12s cubic-bezier(.57,.21,.69,1.25);
	font-size: 18px;
}

.pet-interact img, .pet-interact-passive img {
	position: absolute;
	transition: all 0.12s cubic-bezier(.57,.21,.69,1.25);
}

.pet-interact span, .pet-interact-passive span {
	display: block;
    font-size: 14px;
    margin-top: 0px;
}

.iagd-badge {
	border: 1px solid;
	border-radius: 128px;
	height: 35px;
	align-content: center;
	padding: 8px;
	font-family: 'Roboto';
	font-size: 13px;
}

.iagd-badge-premium {
	--badge-color: rgba(255, 192, 203, 1);
	--badge-color-border: rgba(255, 192, 203, 0.12);
	--badge-color-background: rgba(255, 192, 203, 0.08);

	border-color: var(--badge-color-border);
	color: var(--badge-color);
	background-color: var(--badge-color-background);
}

.iagd-badge-early_member {
	--badge-color: rgb(192, 255, 200);
	--badge-color-border: rgba(192, 255, 200, 0.12);
	--badge-color-background: rgba(192, 255, 200, 0.08);

	border-color: var(--badge-color-border);
	color: var(--badge-color);
	background-color: var(--badge-color-background);
}

.iagd-badge-join_date {
	--badge-color: rgb(192, 255, 200);
	--badge-color-border: rgba(192, 255, 200, 0.12);
	--badge-color-background: rgba(192, 255, 200, 0.08);

	border-color: var(--badge-color-border);
	color: var(--badge-color);
	background-color: var(--badge-color-background);
}

.radio-btn-group {
    display: inline-flex;
    border-radius: 20px;
    overflow: hidden;
	background-color: rgba(49, 44, 87, 0.5);
    border: 2px solid transparent;
    border-top: 1px solid rgba(88, 88, 88, 0.25);
}

.radio-btn {
    position: relative;
    padding: 10px 20px;
	width: 100%;
	color: white;
    font-size: 16px;
    background: transparent;
    border: none;
    outline: none;
	overflow: hidden;
    z-index: 1;
}

.radio-btn:hover {
    background-color: rgba(49, 44, 87, 0.75);
}

.radio-btn.radio-btn-active {
	background-color: #0e0825fa;
}

.radio-btn:not(:last-child)::after {
    /* content: "";
    position: absolute;
    top: 0;
    right: -15px;
    width: 1px;
    height: 100%;
    background: white;
    transform: skewX(-30deg);
    border-right: 3px solid black;
    z-index: 2; */
}

.radio-btn:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 1px;
    height: 100%;
    background: #312c57;
    z-index: 0;
}

.tewi-toast {
	background-color: rgba(0, 0, 0, 0.36);
    color: #fff;
	border: 1px solid #b339d3;
	font-weight: bold;
    font-size: 18px;
}

.tewi-toast .toast-body {
	position: relative;
	overflow: hidden;
}

.tewi-toast .toast-body i {
	position: absolute;
    font-size: 48px;
    top: -8px;
    left: 0px;
    color: #b339d37d;
}

.tewi-toast .toast-body span {
	margin-left: 42px;
}

.qr-code-text {
	padding: 8px;
	background-color: rgba(0, 0, 0, 0.45);
	width: 100%;
}

.outlined-text {
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}