@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');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&family=Public+Sans:wght@100&display=swap');
@font-face {
    font-family: alte;
    src: url(../fonts/AlteHaasGroteskBold.ttf);
}
@font-face {
    font-family: vice-city;
    src: url(../fonts/GTVCS-Book.otf);
}
:root {
    --color-primary: #312c57;
}
html, body {
    font-size: 12px;
	overflow: -ms-autohiding-scrollbar; /* For Internet Explorer and Edge */
	/* overflow: scrollbar; */
}
::-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';
    display: block;
    overflow-x: hidden;
}
p {
	margin-bottom: 0.25rem;
}

hr {
	color: var(--color-primary);
	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 var(--color-primary);
    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);
	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: var(--color-primary);
}

.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: var(--color-primary);
}

.form-control::placeholder {
	color: var(--color-primary);
}

.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;
}
.group-containers {
	padding-left: 20px;
	padding-right: 20px;
}
.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: 1.2rem;
	padding: 12px;
}

.btn-primary {
    background-color: rgba(114, 0, 189, 0.75);
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(135, 135, 135, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    background-color: rgba(92, 11, 147, 0.75);
}

.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;
}

.btn-secondary {
    background-color: rgba(49, 44, 87, 0.5);
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-secondary:hover {
    background-color: rgba(49, 44, 87, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:focus-visible {
    background-color: #333052 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-danger {
    background-color: #dc3546b0;
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(135, 135, 135, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-danger:hover {
    background-color: #fa3548b0;
}

.btn-danger:active,
.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:disabled,
.btn-danger.disabled {
    background-color: rgba(92, 11, 147, 0.75) !important;
}

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

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

.btn-outline-primary:active, .btn-outline-primary:focus {
	background-color: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !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.4);
}

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

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

.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 var(--color-primary);
     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: 3rem;
	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: 100%;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--color-primary);
}

.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: 1rem;
	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;
}

.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-group-text {
	background-color: rgba(0, 0, 0, 0.16);
    color: white;
    border: 1px solid #1d152d;
}

.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;
	-webkit-transition: transform 0.16s ease-in-out !important;
	-moz-transition: transform 0.16s ease-in-out !important;
	-ms-transition: transform 0.16s ease-in-out !important;
	-o-transition: transform 0.16s ease-in-out !important;
}

.offcanvas: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 40s linear infinite;
    opacity: 0.25;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.offcanvas:after {
    z-index: -1;
    /* content: ''; */
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
	/* background: #19123a; */
    left: 0;
    top: 0;
}

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

.offcanvas-backdrop.show {
	opacity: 1;
	backdrop-filter: blur(16px);
	background-color: rgba(0, 0, 0, 0.33);
}

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: 3rem;
    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: 3rem;
}

.card-tiltable {
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
}

main .card-hoverable:hover {
    /* outline: 1px solid var(--color-primary);
    outline-offset: 1px; */
    cursor: pointer;
}

.card {
	border: 1px solid var(--color-primary);
	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 var(--color-primary);
	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 var(--color-primary);
}

.summary-title {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-primary);
}

.summary-label {
    font-weight: 500;
    color: #9592af;
	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 var(--color-primary);
    /* 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: 130px;
} */
@media (max-width: 575.98px) {
	.species-filter-starts_with-btn-container {
		display: flex;
        flex-wrap: wrap !important;
        width: 100%;
        justify-content: center;
        padding: 1rem;
	}

	.species-list-wrapper {
		margin-top: 55%;
	}
}

.hr-with-text {
	text-align: center;
	border-bottom: 1px solid var(--color-primary);
	line-height: 0;
	margin: 2rem 0;
}

.hr-with-text span {
	background: #130d22;
	padding: 0 10px;
	font-size: 1.2rem;
	color: var(--color-primary);
}

.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% 50%;
    }
    100% {
        background-position: 400% 50%;
    }
}

.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 var(--color-primary);
    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 var(--color-primary);
    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: var(--color-primary);
    width: 78px;
    height: 78px;
    top: -13px;
    left: 0px;
    z-index: 1;
}

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

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

.pet-banner {
	position: relative;
	border-radius: 4px;
	border: 1px solid var(--color-primary);
	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 var(--color-primary)2e;
	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: 1.5rem;
}

.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: 1rem;
    margin-top: 0px;
}

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

.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(4, 238, 255);
	--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-new_member {
    --badge-color: rgb(0, 255, 149);
	--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: 1.2rem;
    background: transparent;
    border: none;
    outline: none;
    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: var(--color-primary);
    z-index: 0;
}

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

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

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

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

.tewi-banner {
    border-radius: 4px;
    border: 1px solid var(--color-primary);
    padding: 16px;
    background: rgb(58 26 106) 16%;
    background: linear-gradient(50deg, rgb(58 26 106) 16%, rgb(58 26 106) 16%, rgba(255, 194, 194, 0) 62%);
    color: #fff;
}

.searchlight-container {
    position: absolute;
    width: 100%;
    height: 800px;
    background: transparent;
    overflow: hidden;
    top: 0px;
    left: 0px;
}

.searchlight-container .searchlight-bulb {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fefefe5c;
    border-radius: 50%;
    top: 24px;
    left: 95px;
    z-index: 7;
}

.searchlight-container .searchlight-target {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: #ffffff 0px 0px 24px 4px;
    backdrop-filter: blur(8px);
    border-radius: 50%;
    z-index: 6;
}

.searchlight-container .searchlight-beam {
    position: absolute;
    transform-origin: 0% 50%;
    background: radial-gradient(ellipse at left, rgba(255,255,255,0.4), rgba(255,255,0,0));
    clip-path: polygon(0% 40%, 100% 10%, 100% 90%, 0% 60%);
    z-index: 5;
    pointer-events: none;
}

.a-section, .b-section {
    position: absolute;
    font-family: 'Public Sans', sans-serif;
    left: 0px;
    width: 500px;
    z-index: 1;
    pointer-events: none;
}

.a-section-marquee-box {
    height: 180px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.a-section-marquee-box h2 {
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.66;
    font-size: 1em;
    font-weight: 100;
    flex-shrink: 0;
    padding: 0 10px;
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: a-text-scroll 35s linear infinite;
}
@keyframes a-text-scroll {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0%, 0, 0); }
}

.b-section-marquee-box {
    height: 180px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.b-section-marquee-box h2 {
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.66;
    font-size: 1em;
    font-weight: 100;
    flex-shrink: 0;
    padding: 0 10px;
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: b-text-scroll 35s linear infinite;
}
@keyframes b-text-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

.cerebrate-analyze-field-container {
    position: relative;
}

.cerebrate-analyze-field-container::after {
    content: '';
    background-color: #130d22;
    position: absolute;
    top: 0px;
    left: -1%;
    z-index: 20;
    width: 102%;
    height: 100%;
}

.cerebrate-analyze-field, .cerebrate-analyze-multibreed-field {
    z-index: 21;
}

.tewi-info_card-container {
    position: relative;
    border-radius: 8px;
}

.tewi-info_card-danger {
    background: #b0232c;
    background: linear-gradient(50deg,rgba(176, 35, 44, 1) 20%, rgba(208, 99, 105, 1) 45%, rgba(255, 194, 194, 0) 78%);
}

.tewi-info_card-primary {
    background: rgb(58 26 106) 16%;
    background: linear-gradient(50deg, rgb(58 26 106) 16%, rgb(58 26 106) 16%, rgba(255, 194, 194, 0) 62%);
}

.tewi-info_card-icon {
    position: absolute;
    top: -11px;
    left: 3px;
    font-size: 72px;
}

.tewi-info_card-icon {
    color: rgba(0, 0, 0, 0.2);
}

.tewi-info_card-text {
    color: white;
    font-weight: 400;
}

.tewi-button-group {
    position: relative;
    overflow: hidden;
}

.tewi-button-icon {
    position: absolute;
    top: -25px;
    left: 0px;
    font-size: 72px;
    color: var(--color-primary);
    z-index: 1;
}

.tewi-button-text {
    position: relative;
    margin-left: 65px;
    z-index: 2;
}


.vhc > .vhc_chkbx , .vhc_label{
    cursor: pointer;
}

.vrr > .vrr_chkbx , .vrr_label{
    cursor: pointer;
}

.bg-info {
    background-color: var(--color-primary) !important;
}

#topBreedsContainer ol {
    list-style: none;
    counter-reset: custom-ol;
    padding-left: 0;
}

#topBreedsContainer ol li {
    counter-increment: custom-ol;
    position: relative;
    padding-left: 2em;
}

#topBreedsContainer ol li::before {
    content: counter(custom-ol) ".";
    opacity: 0.33;
    position: absolute;
    left: 0;
    top: 0;
    font-size: inherit;
    margin-right: 0.5em;
}

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

.tree ul {
    margin-left: 20px;
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

.tree li {
    margin: 5px 0;
    position: relative;
}

.tree li::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 10px;
    width: 10px;
    height: 1px;
    background: #ccc;
}

.iagd-directory-nav {
    width: 100%;
}

.iagd-directory-nav .iagd-directory-btn {
    width: 100%;
    height: 48px;
    text-align: left;
    transition: 0.08s;
    overflow: hidden;
    position: relative;
}

.iagd-directory-nav .iagd-directory-btn span.iagd-directory-btn-text {
    display: inline-block;
    margin-left: 12px;
    font-weight: normal;
    transition: transform 0.08s;
}

/* Shine effect */
.iagd-directory-nav .iagd-directory-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.33) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    transition: none;
}

.iagd-directory-nav .iagd-directory-btn:hover::after {
    animation: shine-left-right 0.8s forwards;
}

.iagd-directory-title {
    color: #fff;
}

@keyframes shine-left-right {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

.badge {
    border-radius: 8px !important;
}

.bg-primary {
    background-color: #590299 !important;
}

.fade-circle {
    position: relative;
    -webkit-mask-image: radial-gradient(
        circle at left center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) 80%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: radial-gradient(
        circle at left center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) 80%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.fade-diagonal {
    position: relative;
    -webkit-mask-image: linear-gradient(
        45deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) 80%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(
        45deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0) 80%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.corner-fill {
    position: relative;
    overflow: hidden;
}

.corner-fill:before,
.corner-fill:after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    background: rgba(114, 0, 189, 0.75);
    transform: rotate(45deg);
}

.corner-fill:before {
    top: -36px;
    left: -36px;
}

.corner-fill:after {
    bottom: -36px;
    right: -36px;
}

@keyframes expandIn {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    60% {
        opacity: 1;
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.expandIn {
    animation: expandIn 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards;
}

.breadcrumb a {
    color: #ccc;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #ccc;
    content: "›";
    opacity: 0.5;
}

@media (min-width: 768px) {
    .sticky-column {
        position: sticky;
        top: 98px; /* adjust to match your navbar height */
        align-self: flex-start; /* prevents stretching in flexbox rows */
    }
}

.bg-studs_service_terms {
    background-color: #4a148c;
    background-image: url(../images/bg-studs_service_terms-compressed.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.bg-studs_service_terms .modal-header,
.bg-studs_service_terms .modal-footer {
    border-bottom: none;
    border-top: none;
}

.iagd-paper-modal {
    background-color: #1b1136;
    color: rgba(231, 231, 231, 1);
    position: relative;
    overflow: hidden;
}

.iagd-paper-modal:before,
.iagd-paper-modal:after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    background: rgba(114, 0, 189, 0.75);
    transform: rotate(45deg);
}

.iagd-paper-modal:before {
    top: -36px;
    left: -36px;
}

.iagd-paper-modal:after {
    bottom: -36px;
    right: -36px;
}

.iagd-paper-modal .modal-header,
.iagd-paper-modal .modal-footer {
    border-bottom: none;
    border-top: none;
}

.card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 192px;
    background-color: rgba(0, 0, 0, 0.16);
    z-index: 0;
    pointer-events: none;
}

.studs-view-service_terms {
    position: relative;
    z-index: 10;
}

.navbar {
    min-height: 64px;
}
#iagd_logo_img_button {

    cursor: pointer;
}

@keyframes bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.9); }
    50%  { transform: scale(1.1); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.pet-card:hover {
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}
a .pet-card {
    transition: background 0.2s ease;
}