.dynamic-page form {
    display:block;
}

form label {
    display: block;
    margin: 16px 0;
    width: 95%;
    max-width: 600px;
}

form label input[type="text"], form textarea, input.dynamic-page {
    font:inherit;
    display:block;
    width:37em;
    padding:8px;
    margin-top:6px;
    border:1px solid rgba(0,0,0,0.5);
    border-radius: 8px;
}

form label.checkbox-label {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.6em;
    clear:both;
}

form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--form-background);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1px solid currentColor;
    border-radius: 0.15em;
    display: grid;
    place-content: center;
}

form input[type="checkbox"]:checked {
    border:1px solid var(--accent-color);
}

form input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    background-color: CanvasText;
}

form input[type="checkbox"]:checked::before {
    transform: scale(1.0);
}

form input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

form input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);

    color: var(--form-control-disabled);
    cursor: not-allowed;
}

.dynamic-page .character-count {
    display:inline-block;
    border-radius:8px;
    padding:6px 12px;
    margin:8px 0 12px 0;
    font-weight:500;
    background-color:rgba(88, 0, 224, 0.24);
    font-size:0.9em;
    float:right;
}

.character-count.warning {
    text-align:center;
    margin:12px auto 12px auto;
    padding: 22px;
    float:none;
    display:block;
}

.character-count.warning a {
    text-decoration:none;
    display:inline-block;
    padding:8px 12px;
    margin-top:12px;
    background-color:rgba(88, 0, 224, 1);
    color:white;
    border-radius: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.character-count.warning a:hover {
    background-color:rgba(76, 0, 194, 1);
}

.dynamic-page form button {
    border:none;
    background-color:rgba(88, 0, 224, 1);
    padding:12px 24px;
    font:inherit;
    font-weight: bolder;
    text-transform: uppercase;
    border-radius: 12px;
    color:white;
    cursor:pointer;
    transition:120ms background-color ease-in-out;
}

.dynamic-page form button:hover {
    background-color:rgba(76, 0, 194, 1);
}
.dynamic-page form button.disabled:hover {
    background-color:rgba(88, 0, 224, 1);
}

.dynamic-page form label.topic-label select {
    display:block;
    margin-top:12px;
    font:inherit;
    width:38em;
}

.dynamic-page form button.disabled {
    opacity: 0.7;
    cursor:default!important;
}

.dynamic-page .banner {
    display:block;
    padding:12px;
    border-radius:12px;
    text-align: center;
    margin:0 auto 32px auto;
}

.dynamic-page .banner {
    color:rgb(185, 140, 255);
    background-color:rgba(100, 17, 228, 0.16);
    border:1px solid rgba(82, 55, 124, 0.35);
}

.dynamic-page .banner.error {
    color:rgb(255, 98, 98);
    background-color:rgba(255,0,0,0.1);
}

.dynamic-page .banner-bottom {
    margin-top:32px;
}

.feedback-audio-link {
    font-size:0.7em;
    opacity: 0.8;
}

@media screen and (max-width: 900px) {
    .dynamic-page form label.topic-label select,
    form label input[type="text"],
    form textarea
    {
        width:100%;
    }

    .dynamic-page form.disabled label
    {
        opacity:0.1;
    }

    .dynamic-page form.disabled button {
        display:none;
    }
}