div.tabbed-labels {
    background-color: rgba(244, 239, 239, 0.3);

}

div.tabbed-set {
    border-radius: 5%;

}

div.tabbed-content {
    background-color: rgba(244, 239, 239, 0.2);
    padding: .5em;
    border-radius: .5em;
}

/* popup */

.popup-container {
    position: relative;
    display: inline-block;
}

.popup-trigger {
    cursor: pointer;
    color: var(--md-accent-fg-color);
    font-weight: 500;
}

.popup-content {
    display: none;
    position: absolute;
    top: 1.8em;
    left: 0;
    background-color: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    border: 1px solid var(--md-typeset-border-color);
    border-radius: 0.3rem;
    box-shadow: var(--md-shadow-z2);
    padding: 0.8rem 1rem;
    min-width: 800px;
    z-index: 100;
}

.popup-container:hover .popup-content {
    display: block;
}

.popup-content {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.popup-container:hover .popup-content {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* form */

input,
button {
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    border: 1px solid var(--md-typeset-border-color);
    border-radius: 0.25rem;
    padding: 0.4rem 0.6rem;
}

div.cards li p:first-of-type {
    background-color: #eee3bc22;
}

div.grid>.card li {
    border: .05rem solid #00b8d4;
}