
.account-button {

    fill: #94a3b8;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}
.group:hover .account-button {

    fill: #1e293b;

    --tw-text-opacity: 1;

    color: rgb(71 85 105 / var(--tw-text-opacity, 1))
}
.sidebar-button {

    width: 4rem;

    height: 4rem;

    border-radius: 0.5rem;

    padding: 0.625rem !important
}
.sidebar-button path, .sidebar-button circle, .sidebar-button line, .sidebar-button rect {

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}
.sidebar-button .dashboard-icon path:nth-child(2) {

    stroke: #68B7EB
}
.sidebar-button .audit-icon g {

    stroke: #9EB93C
}
.sidebar-button .gallery-icon g {

    stroke: #FFAC2E
}
.sidebar-button .share-icon g {

    stroke: #68B7EB
}
.sidebar-button .support-icon g {

    stroke: #FF5142
}
.sidebar-button .storage-icon g {

    stroke: #9EB93C
}
.sidebar-button .stats-icon circle {

    stroke: #FF5142
}
.sidebar-button .qr-icon g {

    stroke: #FFAC2E
}
.sidebar-button .logout-icon g {

    stroke: #FF5142
}
.group:hover .sidebar-button:hover path,.group:hover  .sidebar-button:hover circle,.group:hover  .sidebar-button:hover rect {

    --tw-text-opacity: 1;

    color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}
.sidebar-button:hover .dashboard-icon path:nth-child(2),
        .sidebar-button:hover .audit-icon g,
        .sidebar-button:hover .storage-icon g,
        .sidebar-button:hover .gallery-icon g,
        .sidebar-button:hover .share-icon g,
        .sidebar-button:hover .qr-icon g,
        .sidebar-button:hover .logout-icon g,
        .sidebar-button:hover .support-icon g,
        .sidebar-button:hover .stats-icon circle {

    stroke: #475569
}

.tile-buttons {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

}
.tile-button {
    z-index: 10;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;

}
.tile-with-hover:hover .tile-button,
.tile-button:hover {
    border-color: rgb(71 85 105 / 0.9);
    background-color: rgb(71 85 105 / 0.9);
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
    --tw-backdrop-blur: blur(4px);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

}
.dashboard-grid {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;

}
@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        padding: 1.5rem;
        padding-top: 1rem;

    }

}
@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}
@media (min-width: 1280px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}
.dashboard-tile {
    overflow: hidden;
    border-radius: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));

}
.dashboard-tile.dashboard-tile-disabled {
    pointer-events: none;
    opacity: 0.5;

}
.dashboard-tile-square {
    aspect-ratio: 1;

}
.nfc-card-mockup {
    --tw-aspect-h: 2;
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 1;

}
.nfc-card-mockup > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}
.nfc-card-mockup {
    width: 100%;
    transform: rotate(35deg) translate3d(0%,10%,0);

}
.nfc-card-mockup .laser-mask {
    position: absolute;
    top: 0.5rem;
    left: 0px;
    z-index: 10;
    height: 100%;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;

}
.nfc-card-mockup .laser-beam {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 20;
    height: 100%;
    width: 0.25rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        box-shadow: 0 0 .5rem 0 red, 0 0 2rem 0 red;

}
.nfc-card-wind {
    position: relative;
    z-index: 2;

}
.nfc-card-wind line, .nfc-card-wind path {
        fill: none;
        stroke-width: 6;
        stroke-linecap: round;
        stroke-dasharray: 66, 66;
        stroke-dashoffset: 132;
        animation: nfcCardLineMove 1.1s infinite linear;
    }
.nfc-card-wind line:nth-child(1), .nfc-card-wind path:nth-child(1) { animation-delay: 0.4s; animation-duration: .8s; stroke-dasharray: 66, 100; stroke-dashoffset: 166; }
.nfc-card-wind line:nth-child(2), .nfc-card-wind path:nth-child(2) { animation-delay: 0.1s; animation-duration: 1.2s; }
.nfc-card-wind line:nth-child(3), .nfc-card-wind path:nth-child(3) { animation-delay: 0.2s; animation-duration: .7s; stroke-dasharray: 80, 100; stroke-dashoffset: 180; }
.nfc-card-wind line:nth-child(4), .nfc-card-wind path:nth-child(4) { animation-delay: 0.7s; animation-duration: .9s; }
.nfc-card-paper-plane path {
        stroke-width: 1.3;
    }
@keyframes nfcCardLineMove {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}
