/* The maker pages' own rules (Features/Maker): only what Bootstrap has no class for. The rest is utilities in the
 markup, on the theme of site.less. README, "Maker pages". */

/* A textarea filled like the site's text inputs (site.less, input[type="text"]). */
.filled-field {
    border-radius: 28px;
    border: none;
    background-color: rgba(63, 61, 126, 0.6) !important;
    color: #fff !important;
    font-size: 20px;
    padding: 14px 24px;
    min-height: 13.5em;
    line-height: 1.35;
    resize: vertical;
}

.filled-field::placeholder {
    color: rgba(181, 181, 225, 0.55);
    opacity: 1;
}

.filled-field:focus {
    box-shadow: 0 0 0 2px #9d98ff;
}

/* Bootstrap's invalid edge on a field the theme draws without a border (site.less input[type="text"], .filled-field). */
.edge-when-invalid.is-invalid {
    border: 2px solid var(--bs-form-invalid-border-color);
}

/* A box filled and rounded as the site's text inputs are. */
.filled-card {
    border-radius: 28px;
    background-color: rgba(63, 61, 126, 0.6);
}

/* A 44px disc in the Play violet, for a step's number. */
.violet-disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #9a97d5 1%, rgba(99, 95, 170, 0.7));
    color: #fff;
    font-weight: 900;
}

/* Equal buttons of a row. */
.min-w-104 {
    min-width: 104px;
}

.min-w-168 {
    min-width: 168px;
}

.min-h-44 {
    min-height: 44px;
}