#root {
    display: none;
}

body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    #onlineReceptionStaticSkeletonContainer {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100dvh;
    }

    .static-skeleton-header {
        padding: 16px 20px 16px 16px;
        border-bottom: 1px solid #cccccc;
    }

    .static-skeleton-header,
    .static-skeleton-footer {
        background-color: #ffffff;
    }

    .static-skeleton-entry {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .static-skeleton-entry .static-skeleton-header-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .static-skeleton-entry .static-skeleton-logo,
    .static-skeleton-entry .static-skeleton-title,
    .static-skeleton-entry .static-skeleton-subtitle,
    .static-skeleton-footer .static-skeleton-footer-content {
        animation: skeleton 1.6s infinite linear;
        background: rgba(40, 40, 40, 0.08) linear-gradient(90deg, #fff0, #fff9, #fff0) no-repeat;
    }

    .static-skeleton-entry .static-skeleton-logo {
        width: 48px;
        height: 48px;
        border-radius: 100%;
    }

    .static-skeleton-entry .static-skeleton-title,
    .static-skeleton-entry .static-skeleton-subtitle {
        border-radius: 12px;
        width: 201px;
    }

    .static-skeleton-entry .static-skeleton-title {
        height: 24px;
    }

    .static-skeleton-entry .static-skeleton-subtitle {
        height: 16px;
    }

    .static-skeleton-main-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        background-color: rgba(40, 40, 40, 0.08);
        padding: 0;
    }

    .static-skeleton-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 16px;
        border-top: 1px solid #cccccc;
    }

    .static-skeleton-footer .static-skeleton-footer-content {
        border-radius: 28px;
        width: 100%;
        height: 96px;
    }

    .static-skeleton-main-content .static-skeleton-main-spinner {
        width: 40px;
        height: 40px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 4px solid #0074bc;
        animation:
            spinner-1 1s infinite linear alternate,
            spinner-2 2s infinite linear;
    }
}

@keyframes skeleton {
    0% {
        background-position: -300px;
    }
    100% {
        background-position: 200px;
    }
}

@keyframes spinner-1 {
    0% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }
    12.5% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }
    62.5% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
    }
}

@keyframes spinner-2 {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    49.99% {
        transform: scaleY(1) rotate(135deg);
    }
    50% {
        transform: scaleY(-1) rotate(0deg);
    }
    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}