* {
    box-sizing: border-box;
}

:host {
    display: contents;
}

:host::after {
    content: '';
    grid-area: panel;
}

main {
    display: flex;
    flex-direction: column;
    grid-area: body;
    margin: 0 auto;
    width: 100%;
    max-width: var(--layout-content-max-width);
    min-height: var(--layout-min-body-height);
    height: 100%;
    padding: 30px 40px;
}

header {
    display: flex;
    flex-direction: row;
}

.header_right {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.header_right > * {
    margin-left: 10px;
}

.loading {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: 0.4s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion) {
    .loading {
        animation-duration: 0s;
    }
}