:root {
    --nextdrop-required: var(--brand-500, var(--brand, var(--ride-primary, #fbbf24)));
    --nextdrop-required-strong: var(--brand-600, var(--brand-hover, var(--ride-primary-dark, #d97706)));
    --nextdrop-required-soft: rgba(251, 191, 36, .16);
    --nextdrop-required-ring: rgba(251, 191, 36, .26);
}

.dark {
    --nextdrop-required: #facc15;
    --nextdrop-required-strong: #fbbf24;
    --nextdrop-required-soft: rgba(250, 204, 21, .18);
    --nextdrop-required-ring: rgba(250, 204, 21, .30);
}

form label .required,
form .required,
form .required-mark,
form .required-indicator,
form .form-required,
form .field-required,
form [data-required-indicator],
form abbr[title="required"],
form abbr[title="Required"],
.admin-main form label b,
.admin-main form label span b,
.admin-main form > span b,
.admin-main form [class*="field"] > span b,
.merchant-main form label b,
.merchant-main form label span b,
.merchant-main form [class*="field"] > span b,
.merchant-auth-main form label b,
.merchant-auth-main form label span b,
.merchant-auth-main form [class*="field"] > span b,
.ride-main form label b,
.ride-main form label span b,
.ride-main form [class*="field"] > span b {
    color: var(--nextdrop-required) !important;
    font-weight: 900;
}

form .required-label,
form label.is-required,
form [data-required-label] {
    color: var(--nextdrop-required-strong) !important;
}

form input[required]:not(.is-invalid):not([aria-invalid="true"]):focus,
form select[required]:not(.is-invalid):not([aria-invalid="true"]):focus,
form textarea[required]:not(.is-invalid):not([aria-invalid="true"]):focus,
form [aria-required="true"]:not(.is-invalid):not([aria-invalid="true"]):focus {
    border-color: var(--nextdrop-required) !important;
    box-shadow: 0 0 0 3px var(--nextdrop-required-ring) !important;
    outline-color: var(--nextdrop-required);
}

form .required-field input:not(.is-invalid):not([aria-invalid="true"]),
form .required-field select:not(.is-invalid):not([aria-invalid="true"]),
form .required-field textarea:not(.is-invalid):not([aria-invalid="true"]),
form [data-required-field] input:not(.is-invalid):not([aria-invalid="true"]),
form [data-required-field] select:not(.is-invalid):not([aria-invalid="true"]),
form [data-required-field] textarea:not(.is-invalid):not([aria-invalid="true"]) {
    border-color: var(--nextdrop-required);
}

form input[required][type="checkbox"],
form input[required][type="radio"],
form input[aria-required="true"][type="checkbox"],
form input[aria-required="true"][type="radio"] {
    accent-color: var(--nextdrop-required);
}

form .required-icon,
form [data-required-icon],
.status-required {
    background: var(--nextdrop-required-soft) !important;
    border-color: var(--nextdrop-required) !important;
    color: var(--nextdrop-required-strong) !important;
}