body {
    height: 100vh;
    display: grid;
    place-content: center;
    background: #004166;
}

body:has(> .showtic) {
    background: #000;
}

#widget {
    margin: auto;
    width: calc(480px + 5vw);
    height: calc(720px + 5vh);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
}

.c-button--large {
    width: 100%;
    height: 5rem;
    flex-direction: row;
}

.c-button > em {
    margin-right: 0.3em;
    margin-left: 0.3em;
    font-style: normal;
    text-decoration: underline;
    pointer-events: none; /* Make sure the emphasized text is treated as its parent (button) element */
}

/* Animations/transitions */
.slide-in-enter-active,
.slide-in-leave-active {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.slide-in-enter,
.slide-in-leave-to {
    opacity: 0;
    transform: translateX(-2rem);
}

.c-card__body + .c-card__body {
    display: none;
}

.c-label > a {
    font-weight: bold;
}

.c-form-control input[type="radio"] {
    width: auto;
}

.c-form-control input[type="date"] {
    min-height: 3em;
    text-align: left;
}

.c-form-control input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Some validation styling */
input:invalid {
    outline: 2px solid #d6334c;
}

input:valid ~ div:not(.c-tile) {
    display: block;
}

input:invalid ~ div:not(.c-tile),
input:placeholder-shown ~ div:not(.c-tile) {
    display: none;
}

/* Showtic theme */
#widget.showtic {
    --co-link: currentColor;
    --co-back: #000;
    --co-back-dim: #222;
    --co-back-selected: #444;
    --co-text: #fff;
    --co-text-dim: #ddd;
    --co-accent: #333;
    --co-accent-dark: #333;
    --co-accent-text: #fff;
    --co-secondary: #111;
    --co-secondary-dark: #111;
    --co-secondary-text: #fff;
}

#widget.showtic label,
#widget.showtic .c-tabs {
    --co-accent: #ddd;
}

#widget.showtic .c-tabs__tab--selected::after {
    background: var(--co-accent);
}

#widget.showtic .c-button:not(.c-button--primary) {
    --co-back-dim: #111;
    --co-accent-dark: #ddd;
}

#widget.showtic .c-box {
    filter: grayscale(1);
}

#widget.showtic .not-showtic {
    display: none;
}

@media (prefers-color-scheme: dark) {
    #widget.showtic .c-label {
        color: var(--co-accent);
    }
}
/* /Showtic theme */