.hf-form-preview .hf-form-error {
    padding: 100px 0;
    text-align: center;
}

.hf-form-custom-style .hf-form-preview {
    background: var(--hf-form-bg-color, transparent);
    box-shadow: var(--hf-form-shadow-x, 0) var(--hf-form-shadow-y, 0) var(--hf-form-shadow-blur, 0) var(--hf-form-shadow-spread, 0) var(--hf-form-shadow-color, transparent);
    padding: var(--hf-form-padding-top, 0) var(--hf-form-padding-right, 0) var(--hf-form-padding-bottom, 0) var(--hf-form-padding-left, 0);
    border-top: var(--hf-form-border-top, 0) solid var(--hf-form-border-color, transparent);
    border-right: var(--hf-form-border-right, 0) solid var(--hf-form-border-color, transparent);
    border-bottom: var(--hf-form-border-bottom, 0) solid var(--hf-form-border-color, transparent);
    border-left: var(--hf-form-border-left, 0) solid var(--hf-form-border-color, transparent);
    border-radius: var(--hf-form-border-radius-top, 0) var(--hf-form-border-radius-right, 0) var(--hf-form-border-radius-bottom, 0) var(--hf-form-border-radius-left, 0);
}

.hf-container * {
    box-sizing: border-box;
}

.hf-container img {
    max-width: 100%;
    vertical-align: middle;
}

.hf-hidden {
    display: none;
}

/* Form Container and Fields */
.hf-container,
.hf-grouped-field {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

.hf-form-custom-style .hf-container,
.hf-form-custom-style .hf-grouped-field {
    grid-gap: var(--hf-form-row-gap, 20px) var(--hf-form-column-gap, 20px);
}


.hf-container > * {
    grid-column: span 12 / span 12;
}

/* One grid cell holding fields stacked under each other. Flex, not grid, so
   the span classes the fields still carry have no effect inside it. */
.hf-column-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.hf-form-custom-style .hf-column-group {
    gap: var(--hf-form-row-gap, 20px);
}

.hf-grid-11 {
    grid-column: span 11 / span 11;
}

.hf-grid-10 {
    grid-column: span 10 / span 10;
}

.hf-grid-9 {
    grid-column: span 9 / span 9;
}

.hf-grid-8 {
    grid-column: span 8 / span 8;
}

.hf-grid-7 {
    grid-column: span 7 / span 7;
}

.hf-grid-6 {
    grid-column: span 6 / span 6;
}

.hf-grid-5 {
    grid-column: span 5 / span 5;
}

.hf-grid-4 {
    grid-column: span 4 / span 4;
}

.hf-grid-3 {
    grid-column: span 3/span 3;
}

.hf-grid-2 {
    grid-column: span 2/span 2;
}

.hf-grid-1 {
    grid-column: span 1/span 1;
}

/* Forms Title and Description */
.hf-form-tempate .hf-form-title {
    margin: 0 0 20px;
}

.hf-form-custom-style .hf-form-title {
    font-family: var(--hf-form-title-typo-font-family);
    font-size: var(--hf-form-title-typo-font-size, 30px);
    font-weight: var(--hf-form-title-typo-font-weight, 700);
    font-style: var(--hf-form-title-typo-font-style, normal);
    letter-spacing: var(--hf-form-title-typo-letter-spacing, normal);
    text-transform: var(--hf-form-title-typo-text-transform, inherit);
    text-decoration: var(--hf-form-title-typo-text-decoration, inherit);
    line-height: var(--hf-form-title-typo-line-height, 1.2);
    color: var(--hf-form-title-typo-font-color, #666);
    margin-bottom: var(--hf-form-title-spacing, 20px);
    margin-top: var(--hf-form-title-spacing-top, 0);
    margin-left: var(--hf-form-title-spacing-left, 0);
    margin-right: var(--hf-form-title-spacing-right, 0);
}

.hf-form-defaut-style .hf-form-title {
    font-size: 30px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
}

.hf-form-description p {
    margin: 0 0 0.7em
}

.hf-form-custom-style .hf-form-description p {
    font-family: var(--hf-form-desc-typo-font-family);
    font-size: var(--hf-form-desc-typo-font-size, 16px);
    font-weight: var(--hf-form-desc-typo-font-weight, 400);
    font-style: var(--hf-form-desc-typo-font-style, normal);
    letter-spacing: var(--hf-form-desc-typo-letter-spacing, normal);
    text-transform: var(--hf-form-desc-typo-text-transform, inherit);
    text-decoration: var(--hf-form-desc-typo-text-decoration, inherit);
    line-height: var(--hf-form-desc-typo-line-height, 1.2);
    color: var(--hf-form-desc-typo-font-color, #666);
}

.hf-form-default-style .hf-form-description p {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
}

.hf-form-tempate .hf-form-description {
    margin: 0 0 20px;
}

.hf-form-custom-style .hf-form-description {
    margin-bottom: var(--hf-form-desc-spacing, 20px);
    margin-top: var(--hf-form-desc-spacing-top, 0);
    margin-left: var(--hf-form-desc-spacing-left, 0);
    margin-right: var(--hf-form-desc-spacing-right, 0);
}

/* Forms */
.hf-container button,
.hf-container input[type="button"],
.hf-container input[type="reset"],
.hf-container input[type="submit"] {
    cursor: pointer;
}

.hf-form-custom-style .hf-container button,
.hf-form-custom-style .hf-container input[type="button"],
.hf-form-custom-style .hf-container input[type="reset"],
.hf-form-custom-style .hf-container input[type="submit"] {
    border-top: var(--hf-button-border-top, 0) var(--hf-button-border, solid) var(--hf-button-border-color-normal, #CCC);
    border-right: var(--hf-button-border-right, 0) var(--hf-button-border, solid) var(--hf-button-border-color-normal, #CCC);
    border-bottom: var(--hf-button-border-bottom, 0) var(--hf-button-border, solid) var(--hf-button-border-color-normal, #CCC);
    border-left: var(--hf-button-border-left, 0) var(--hf-button-border, solid) var(--hf-button-border-color-normal, #CCC);
    border-radius: var(--hf-button-border-radius-top, 3px) var(--hf-button-border-radius-right, 3px) var(--hf-button-border-radius-bottom, 3px) var(--hf-button-border-radius-left, 3px);
    padding: var(--hf-button-padding-top, 15px) var(--hf-button-padding-right, 30px) var(--hf-button-padding-bottom, 15px) var(--hf-button-padding-left, 30px);
    font-family: var(--hf-button-typo-font-family);
    font-size: var(--hf-button-typo-font-size, 14px);
    font-weight: var(--hf-button-typo-font-weight, 400);
    font-style: var(--hf-button-typo-font-style, normal);
    letter-spacing: var(--hf-button-typo-letter-spacing, normal);
    text-transform: var(--hf-button-typo-text-transform, inherit);
    text-decoration: var(--hf-button-typo-text-decoration, inherit);
    line-height: var(--hf-button-typo-line-height, 1.2);
    color: var(--hf-button-color-normal, #FFF);
    background-color: var(--hf-button-bg-color-normal, #000);
    box-shadow: var(--hf-button-shadow-normal-x, 0) var(--hf-button-shadow-normal-y, 0) var(--hf-button-shadow-normal-blur, 0) var(--hf-button-shadow-normal-spread, 0) var(--hf-button-shadow-normal-color, transparent);
    outline: 0;
    min-height: 0;
    height: auto;
}

.hf-form-default-style .hf-container button,
.hf-form-default-style .hf-container input[type="button"],
.hf-form-default-style .hf-container input[type="reset"],
.hf-form-default-style .hf-container input[type="submit"] {
    border: 0;
    border-radius: 3px;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    outline: 0;
    min-height: 0;
    height: auto;
    color: #FFF;
    background: #333;
}

.hf-form-custom-style .hf-container button:hover,
.hf-form-custom-style .hf-container input[type="button"]:hover,
.hf-form-custom-style .hf-container input[type="reset"]:hover,
.hf-form-custom-style .hf-container input[type="submit"]:hover {
    border-top: var(--hf-button-border-top, 0) var(--hf-button-border, solid) var(--hf-button-border-color-hover, var(--hf-button-border-color-normal, #CCC));
    border-right: var(--hf-button-border-right, 0) var(--hf-button-border, solid) var(--hf-button-border-color-hover, var(--hf-button-border-color-normal, #CCC));
    border-bottom: var(--hf-button-border-bottom, 0) var(--hf-button-border, solid) var(--hf-button-border-color-hover, var(--hf-button-border-color-normal, #CCC));
    border-left: var(--hf-button-border-left, 0) var(--hf-button-border, solid) var(--hf-button-border-color-hover, var(--hf-button-border-color-normal, #CCC));
    color: var(--hf-button-color-hover, var(--hf-button-color-normal, #FFF));
    background-color: var(--hf-button-bg-color-hover, var(--hf-button-bg-color-normal, #000));
    box-shadow: var(--hf-button-shadow-hover-x, var(--hf-button-shadow-normal-x, 0)) var(--hf-button-shadow-hover-y, var(--hf-button-shadow-normal-y, 0)) var(--hf-button-shadow-hover-blur, var(--hf-button-shadow-normal-blur, 0)) var(--hf-button-shadow-hover-spread, var(--hf-button-shadow-normal-spread, 0)) var(--hf-button-shadow-hover-color, var(--hf-button-shadow-normal-color, transparent));
}

.hf-container input[type="text"],
.hf-container input[type="email"],
.hf-container input[type="url"],
.hf-container input[type="password"],
.hf-container input[type="search"],
.hf-container input[type="number"],
.hf-container input[type="tel"],
.hf-container input[type="range"],
.hf-container input[type="date"],
.hf-container input[type="month"],
.hf-container input[type="week"],
.hf-container input[type="time"],
.hf-container input[type="datetime"],
.hf-container input[type="datetime-local"],
.hf-container input[type="color"],
.hf-container textarea,
.hf-container select {
    width: 100%;
    max-width: 100%;
    outline: 0;
}

.hf-form-custom-style .hf-container input[type="text"],
.hf-form-custom-style .hf-container input[type="email"],
.hf-form-custom-style .hf-container input[type="url"],
.hf-form-custom-style .hf-container input[type="password"],
.hf-form-custom-style .hf-container input[type="search"],
.hf-form-custom-style .hf-container input[type="number"],
.hf-form-custom-style .hf-container input[type="tel"],
.hf-form-custom-style .hf-container input[type="range"],
.hf-form-custom-style .hf-container input[type="date"],
.hf-form-custom-style .hf-container input[type="month"],
.hf-form-custom-style .hf-container input[type="week"],
.hf-form-custom-style .hf-container input[type="time"],
.hf-form-custom-style .hf-container input[type="datetime"],
.hf-form-custom-style .hf-container input[type="datetime-local"],
.hf-form-custom-style .hf-container input[type="color"],
.hf-form-custom-style .hf-container textarea,
.hf-form-custom-style .hf-container select {
    border-top: var(--hf-field-border-top, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-normal, #CCC);
    border-right: var(--hf-field-border-right, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-normal, #CCC);
    border-bottom: var(--hf-field-border-bottom, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-normal, #CCC);
    border-left: var(--hf-field-border-left, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-normal, #CCC);
    border-radius: var(--hf-field-border-radius-top, 3px) var(--hf-field-border-radius-right, 3px) var(--hf-field-border-radius-bottom, 3px) var(--hf-field-border-radius-left, 3px);
    padding: var(--hf-field-padding-top, 10px) var(--hf-field-padding-right, 10px) var(--hf-field-padding-bottom, 10px) var(--hf-field-padding-left, 10px);
    font-family: var(--hf-field-typo-font-family);
    font-size: var(--hf-field-typo-font-size, 14px);
    font-weight: var(--hf-field-typo-font-weight, 400);
    font-style: var(--hf-field-typo-font-style, bold);
    letter-spacing: var(--hf-field-typo-letter-spacing, normal);
    text-transform: var(--hf-field-typo-text-transform, inherit);
    text-decoration: var(--hf-field-typo-text-decoration, inherit);
    line-height: var(--hf-field-typo-line-height, 1.2);
    color: var(--hf-field-color-normal, #666);
    background-color: var(--hf-field-bg-color-normal, transparent);
    box-shadow: var(--hf-field-shadow-normal-x, 0) var(--hf-field-shadow-normal-y, 0) var(--hf-field-shadow-normal-blur, 0) var(--hf-field-shadow-normal-spread, 0) var(--hf-field-shadow-normal-color, transparent);
    outline: 0;
    min-height: 0;
    height: auto;
}

.hf-form-custom-style .hf-container input[type="text"]::placeholder,
.hf-form-custom-style .hf-container input[type="email"]::placeholder,
.hf-form-custom-style .hf-container input[type="url"]::placeholder,
.hf-form-custom-style .hf-container input[type="password"]::placeholder,
.hf-form-custom-style .hf-container input[type="search"]::placeholder,
.hf-form-custom-style .hf-container input[type="number"]::placeholder,
.hf-form-custom-style .hf-container input[type="tel"]::placeholder,
.hf-form-custom-style .hf-container input[type="range"]::placeholder,
.hf-form-custom-style .hf-container input[type="date"]::placeholder,
.hf-form-custom-style .hf-container input[type="month"]::placeholder,
.hf-form-custom-style .hf-container input[type="week"]::placeholder,
.hf-form-custom-style .hf-container input[type="time"]::placeholder,
.hf-form-custom-style .hf-container input[type="datetime"]::placeholder,
.hf-form-custom-style .hf-container input[type="datetime-local"]::placeholder,
.hf-form-custom-style .hf-container input[type="color"]::placeholder,
.hf-form-custom-style .hf-container textarea::placeholder,
.hf-form-custom-style .hf-container select::placeholder {
    color: var(--hf-field-color-normal, #666);
    opacity: 0.7;
}

.hf-form-default-style .hf-container input[type="text"],
.hf-form-default-style .hf-container input[type="email"],
.hf-form-default-style .hf-container input[type="url"],
.hf-form-default-style .hf-container input[type="password"],
.hf-form-default-style .hf-container input[type="search"],
.hf-form-default-style .hf-container input[type="number"],
.hf-form-default-style .hf-container input[type="tel"],
.hf-form-default-style .hf-container input[type="range"],
.hf-form-default-style .hf-container input[type="date"],
.hf-form-default-style .hf-container input[type="month"],
.hf-form-default-style .hf-container input[type="week"],
.hf-form-default-style .hf-container input[type="time"],
.hf-form-default-style .hf-container input[type="datetime"],
.hf-form-default-style .hf-container input[type="datetime-local"],
.hf-form-default-style .hf-container input[type="color"],
.hf-form-default-style .hf-container textarea,
.hf-form-default-style .hf-container select {
    border: 1px solid #CCC;
    border-radius: 3px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
    background-color: transparent;
    outline: 0;
    min-height: 0;
    height: auto;
}

.hf-form-custom-style .hf-container input[type="text"]:focus,
.hf-form-custom-style .hf-container input[type="email"]:focus,
.hf-form-custom-style .hf-container input[type="url"]:focus,
.hf-form-custom-style .hf-container input[type="password"]:focus,
.hf-form-custom-style .hf-container input[type="search"]:focus,
.hf-form-custom-style .hf-container input[type="number"]:focus,
.hf-form-custom-style .hf-container input[type="tel"]:focus,
.hf-form-custom-style .hf-container input[type="range"]:focus,
.hf-form-custom-style .hf-container input[type="date"]:focus,
.hf-form-custom-style .hf-container input[type="month"]:focus,
.hf-form-custom-style .hf-container input[type="week"]:focus,
.hf-form-custom-style .hf-container input[type="time"]:focus,
.hf-form-custom-style .hf-container input[type="datetime"]:focus,
.hf-form-custom-style .hf-container input[type="datetime-local"]:focus,
.hf-form-custom-style .hf-container input[type="color"]:focus,
.hf-form-custom-style .hf-container textarea:focus,
.hf-form-custom-style .hf-container select:focus {
    border-top: var(--hf-field-border-top, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    border-right: var(--hf-field-border-right, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    border-bottom: var(--hf-field-border-bottom, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    border-left: var(--hf-field-border-left, 1px) var(--hf-field-border, solid) var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
    color: var(--hf-field-color-focus, var(--hf-field-color-normal, inherit));
    background-color: var(--hf-field-bg-color-focus, var(--hf-field-bg-color-normal, transparent));
    box-shadow: var(--hf-field-shadow-focus-x, var(--hf-field-shadow-normal-x, 0)) var(--hf-field-shadow-focus-y, var(--hf-field-shadow-normal-y, 0)) var(--hf-field-shadow-focus-blur, var(--hf-field-shadow-normal-blur, 0)) var(--hf-field-shadow-focus-spread, var(--hf-field-shadow-normal-spread, 0)) var(--hf-field-shadow-focus-color, var(--hf-field-shadow-normal-color, transparent));
}

.hf-form-custom-style .hf-container input[type="text"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="email"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="url"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="password"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="search"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="number"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="tel"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="range"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="date"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="month"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="week"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="time"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="datetime"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="datetime-local"]::placeholder:focus,
.hf-form-custom-style .hf-container input[type="color"]::placeholder:focus,
.hf-form-custom-style .hf-container textarea::placeholder:focus,
.hf-form-custom-style .hf-container select::placeholder:focus {
    color: var(--hf-field-color-focus, var(--hf-field-color-normal, inherit));
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input.hf-field-focussed .mdi-minus,
.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input.hf-field-focussed .mdi-plus {
    border-color: var(--hf-field-border-color-focus, var(--hf-field-border-color-normal, #CCC));
}

.hf-form-default-style .hf-container input[type="text"]:focus,
.hf-form-default-style .hf-container input[type="email"]:focus,
.hf-form-default-style .hf-container input[type="url"]:focus,
.hf-form-default-style .hf-container input[type="password"]:focus,
.hf-form-default-style .hf-container input[type="search"]:focus,
.hf-form-default-style .hf-container input[type="number"]:focus,
.hf-form-default-style .hf-container input[type="tel"]:focus,
.hf-form-default-style .hf-container input[type="range"]:focus,
.hf-form-default-style .hf-container input[type="date"]:focus,
.hf-form-default-style .hf-container input[type="month"]:focus,
.hf-form-default-style .hf-container input[type="week"]:focus,
.hf-form-default-style .hf-container input[type="time"]:focus,
.hf-form-default-style .hf-container input[type="datetime"]:focus,
.hf-form-default-style .hf-container input[type="datetime-local"]:focus,
.hf-form-default-style .hf-container input[type="color"]:focus,
.hf-form-default-style .hf-container textarea:focus,
.hf-form-default-style .hf-container select:focus {
    border: 1px solid #BBB;
}

.hf-container .hf-field-label {
    margin-bottom: 8px;
}

.hf-container .hf-field-content {
    flex-grow: 1;
}

.hf-form-custom-style .hf-container .hf-field-label {
    display: block;
    font-family: var(--hf-label-typo-font-family);
    font-size: var(--hf-label-typo-font-size, 1em);
    font-weight: var(--hf-label-typo-font-weight, 400);
    font-style: var(--hf-label-typo-font-style, normal);
    letter-spacing: var(--hf-label-typo-letter-spacing, normal);
    text-transform: var(--hf-label-typo-text-transform, inherit);
    text-decoration: var(--hf-label-typo-text-decoration, inherit);
    line-height: var(--hf-label-typo-line-height, 1.2);
    color: var(--hf-label-typo-font-color, inherit);
    margin-bottom: var(--hf-label-spacing, 8px);
    margin-top: var(--hf-label-spacing-top, 0);
    margin-left: var(--hf-label-spacing-left, 0);
    margin-right: var(--hf-label-spacing-right, 0);
}

.hf-container .hf-field-label .hf-field-required {
    color: #FF0000;
}

.hf-form-custom-style .hf-container .hf-field-label .hf-field-required {
    color: var(--hf-label-required-color, #FF0000);
}

.hf-form-default-style .hf-container .hf-field-label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
    color: inherit;
}

.hf-container .hf-field-desc {
    font-size: 0.82em;
    margin-top: 5px;
}

.hf-form-custom-style .hf-container .hf-field-desc {
    font-family: var(--hf-desc-typo-font-family);
    font-size: var(--hf-desc-typo-font-size, 0.82em);
    font-weight: var(--hf-desc-typo-font-weight, 400);
    font-style: var(--hf-desc-typo-font-style, italic);
    letter-spacing: var(--hf-desc-typo-letter-spacing, normal);
    text-transform: var(--hf-desc-typo-text-transform, inherit);
    text-decoration: var(--hf-desc-typo-text-decoration, inherit);
    line-height: var(--hf-desc-typo-line-height, 1.2);
    color: var(--hf-desc-typo-font-color, inherit);
    margin-top: var(--hf-desc-spacing, 5px);
    margin-bottom: var(--hf-desc-spacing-bottom, 0);
    margin-left: var(--hf-desc-spacing-left, 0);
    margin-right: var(--hf-desc-spacing-right, 0);
}

.hf-form-default-style .hf-container .hf-field-desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
}

.hf-form-default-style .hashform-error-container .hf-field-label {
    color: #FF0000;
}

.hf-form-custom-style .hashform-error-container .hf-field-label {
    color: var(--hf-validation-typo-font-color, #FF0000);
}

.hf-form-custom-style .hashform-error-container input[type="text"],
.hf-form-custom-style .hashform-error-container input[type="email"],
.hf-form-custom-style .hashform-error-container input[type="url"],
.hf-form-custom-style .hashform-error-container input[type="password"],
.hf-form-custom-style .hashform-error-container input[type="search"],
.hf-form-custom-style .hashform-error-container input[type="number"],
.hf-form-custom-style .hashform-error-container input[type="tel"],
.hf-form-custom-style .hashform-error-container input[type="range"],
.hf-form-custom-style .hashform-error-container input[type="date"],
.hf-form-custom-style .hashform-error-container input[type="month"],
.hf-form-custom-style .hashform-error-container input[type="week"],
.hf-form-custom-style .hashform-error-container input[type="time"],
.hf-form-custom-style .hashform-error-container input[type="datetime"],
.hf-form-custom-style .hashform-error-container input[type="datetime-local"],
.hf-form-custom-style .hashform-error-container input[type="color"],
.hf-form-custom-style .hashform-error-container textarea,
.hf-form-custom-style .hashform-error-container select {
    border-color: var(--hf-validation-typo-font-color, #FF0000);
}

.hf-container .hf-error-msg {
    margin: 5px 0 0;
    color: #FF0000;
    display: block;
    background: none;
    font-size: 0.82em;
}

.hf-form-custom-style .hf-container .hf-error-msg {
    font-family: var(--hf-validation-typo-font-family);
    font-size: var(--hf-validation-typo-font-size, 0.82em);
    font-weight: var(--hf-validation-typo-font-weight, 400);
    font-style: var(--hf-validation-typo-font-style, normal);
    letter-spacing: var(--hf-validation-typo-letter-spacing, normal);
    text-transform: var(--hf-validation-typo-text-transform, inherit);
    text-decoration: var(--hf-validation-typo-text-decoration, inherit);
    line-height: var(--hf-validation-typo-line-height, 1.2);
    color: var(--hf-validation-typo-font-color, #FF0000);
    margin: var(--hf-validation-spacing, 5px) 0 0;
    text-align: var(--hf-validation-textalign, left);
}

.hf-form-default-style .hf-container .hf-error-msg {
    display: block;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
}

/* Label Position */
.hf-form-field .hf-field-container {
    display: flex;
    max-width: 100%;
    width: var(--hf-width, 100%);
}

.hf-form-field .hashform-field-type {
    flex-grow: 1;
}

.hf-form-field.hf-label-position-top .hf-field-container {
    flex-direction: column;
}

.hf-form-field.hf-label-position-left .hf-field-container,
.hf-form-field.hf-label-position-right .hf-field-container {
    gap: 20px;
}

.hf-form-field.hf-label-position-left .hf-field-label {
    width: 200px;
    flex: 0 0 200px;
    margin: 0;
}

.hf-form-field.hf-label-position-right .hf-field-label {
    width: 200px;
    flex: 0 0 200px;
    order: 2;
}

.hf-form-field.hf-label-position-hide .hf-field-label {
    display: none;
}

/* Label Alignment */
.hf-form-field.hf-label-alignment-right .hf-field-label {
    text-align: right;
}

.hf-form-field.hf-label-alignment-center .hf-field-label {
    text-align: center;
}

/* Text Alignment */
.hf-form-field.hf-text-alignment-center .hf-field-container {
    text-align: center;
}

.hf-form-field.hf-text-alignment-right .hf-field-container {
    text-align: right;
}

/* Field Alignment */
.hf-form-field.hf-field-alignment-center .hf-field-container {
    justify-content: center;
}

.hf-form-field.hf-field-alignment-right .hf-field-container {
    justify-content: flex-end;
}

/* Name Field */
.hf-form-field.hashform-field-type-name .hf-grouped-field .hf-subfield-element {
    grid-column: span 4 / span 4;
}

.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="first_last"] .hf-subfield-element,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="last_first"] .hf-subfield-element {
    grid-column: span 6 / span 6;
}

.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="full"] .hf-subfield-element {
    grid-column: span 12;
}

.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="full"] .hf-subfield-element-first,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="full"] .hf-subfield-element-middle,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="full"] .hf-subfield-element-last,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="first_last"] .hf-subfield-element-full,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="last_first"] .hf-subfield-element-full,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="first_middle_last"] .hf-subfield-element-full,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="first_last"] .hf-subfield-element-middle,
.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="last_first"] .hf-subfield-element-middle {
    display: none;
}

.hf-form-field.hashform-field-type-name .hf-grouped-field[data-name-layout="last_first"] .hf-subfield-element-last {
    order: -1;
}

/* Heading */
.hf-form-field.hashform-field-type-heading h1 {
    margin: 0;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h1,
.hf-form-custom-style .hf-form-field.hashform-field-type-heading h2,
.hf-form-custom-style .hf-form-field.hashform-field-type-heading h3,
.hf-form-custom-style .hf-form-field.hashform-field-type-heading h4,
.hf-form-custom-style .hf-form-field.hashform-field-type-heading h5,
.hf-form-custom-style .hf-form-field.hashform-field-type-heading h6 {
    font-family: var(--hf-heading-typo-font-family);
    font-weight: var(--hf-heading-typo-font-weight, 400);
    font-style: var(--hf-heading-typo-font-style, normal);
    letter-spacing: var(--hf-heading-typo-letter-spacing, normal);
    text-transform: var(--hf-heading-typo-text-transform, inherit);
    text-decoration: var(--hf-heading-typo-text-decoration, inherit);
    line-height: var(--hf-heading-typo-line-height, 1.2);
    color: var(--hf-heading-typo-font-color, inherit);
}

.hf-form-default-style .hf-form-field.hashform-field-type-heading h1,
.hf-form-default-style .hf-form-field.hashform-field-type-heading h2,
.hf-form-default-style .hf-form-field.hashform-field-type-heading h3,
.hf-form-default-style .hf-form-field.hashform-field-type-heading h4,
.hf-form-default-style .hf-form-field.hashform-field-type-heading h5,
.hf-form-default-style .hf-form-field.hashform-field-type-heading h6 {
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #333;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading {
    font-size: var(--hf-heading-typo-font-size, 34px);
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h1 {
    font-size: 1em;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h2 {
    font-size: 0.9em;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h3 {
    font-size: 0.8em;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h4 {
    font-size: 0.7em;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h5 {
    font-size: 0.6em;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-heading h6 {
    font-size: 0.5em;
}

/* paragraph */

/* One field can hold several paragraphs now, so they need space between them
   without adding space above the first or below the last. */
.hf-form-field.hashform-field-type-paragraph p {
    margin: 0 0 1em;
}

.hf-form-field.hashform-field-type-paragraph p:last-child {
    margin-bottom: 0;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-paragraph p {
    font-family: var(--hf-paragraph-typo-font-family);
    font-size: var(--hf-paragraph-typo-font-size, 13px);
    font-weight: var(--hf-paragraph-typo-font-weight, 400);
    font-style: var(--hf-paragraph-typo-font-style, normal);
    letter-spacing: var(--hf-paragraph-typo-letter-spacing, normal);
    text-transform: var(--hf-paragraph-typo-text-transform, inherit);
    text-decoration: var(--hf-paragraph-typo-text-decoration, inherit);
    line-height: var(--hf-paragraph-typo-line-height, 1.2);
    color: var(--hf-paragraph-typo-font-color, inherit);
}

.hf-form-default-style .hf-form-field.hashform-field-type-paragraph p {
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #333;
}

/* Select */
.hf-form-field.hf-auto-width select {
    width: auto;
}

/* Checkbox/Radio */
.hf-form-field.hashform-field-type-radio .hf-choice label,
.hf-form-field.hashform-field-type-checkbox .hf-choice label {
    cursor: pointer;
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.hf-form-field input[type="checkbox"],
.hf-form-field input[type="radio"] {
    margin: 0;
}

/* Checkbox/Radio/Image Select Grid */
.hf-form-field .hf-choice-container {
    display: grid;
    gap: 10px 30px;
}

.hf-form-custom-style .hf-form-field .hf-choice-container {
    font-family: var(--hf-field-typo-font-family);
    font-size: var(--hf-field-typo-font-size, 14px);
    font-weight: var(--hf-field-typo-font-weight, 400);
    font-style: var(--hf-field-typo-font-style, normal);
    letter-spacing: var(--hf-field-typo-letter-spacing, normal);
    text-transform: var(--hf-field-typo-text-transform, inherit);
    text-decoration: var(--hf-field-typo-text-decoration, inherit);
    line-height: var(--hf-field-typo-line-height, 1.2);
    color: var(--hf-field-color-normal, #666);
}

.hf-form-default-style .hf-form-field .hf-choice-container {
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: 1.2;
    color: #666;
}

.hf-form-field .hf-choice-container .hf-choice > label {
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.hf-form-field.hf-options-layout-inline .hf-choice-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hf-form-field.hf-options-layout-1.hf-choice-container {
    grid-template-columns: repeat(1, 1fr);
}

.hf-form-field.hf-options-layout-2 .hf-choice-container {
    grid-template-columns: repeat(2, 1fr);
}

.hf-form-field.hf-options-layout-3 .hf-choice-container {
    grid-template-columns: repeat(3, 1fr);
}

.hf-form-field.hf-options-layout-4 .hf-choice-container {
    grid-template-columns: repeat(4, 1fr);
}

.hf-form-field.hf-options-layout-5 .hf-choice-container {
    grid-template-columns: repeat(5, 1fr);
}

.hf-form-field.hf-options-layout-6 .hf-choice-container {
    grid-template-columns: repeat(6, 1fr);
}


/* Image Selector */
.hf-form-field.hashform-field-type-image_select .hf-choice-container {
    gap: 30px;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-checked {
    display: none;
}

.hf-form-field.hashform-field-type-image_select .hf-choice input:checked + .hf-field-is-container .hf-field-is-checked {
    display: flex;
}

.hf-form-field.hashform-field-type-image_select .hf-choice input {
    display: none;
}

.hf-form-field.hashform-field-type-image_select .hf-choice > label {
    cursor: pointer;
}

.hf-form-field .hf-field-is-container {
    position: relative;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-image .hf-field-is-checked {
    position: absolute;
    right: 10px;
    top: -10px;
    font-size: 25px;
    background: #FFF;
    border-radius: 50%;
    padding: 2px;
    color: green;
    height: 30px;
    width: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9;
    align-items: center;
    justify-content: center;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-image {
    min-height: 40px;
    position: relative;
    text-align: center;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-image:before {
    content: "NO IMAGE";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.4;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-image img {
    display: block;
    position: relative;
    margin: 0 auto;
}

.hf-form-field.hashform-field-type-image_select .hf-field-is-label {
    text-align: center;
    margin-top: 10px;
}

.hf-form-field.hf-options-layout-inline.hashform-field-type-image_select .hf-choice-container .hf-choice {
    width: var(--hf-image-width, 250px);
}

.hf-form-field.hf-options-layout-1.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(1, minmax(auto, var(--hf-image-width, 250px)));
}

.hf-form-field.hf-options-layout-2.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(2, minmax(auto, var(--hf-image-width, 250px)));
}

.hf-form-field.hf-options-layout-3.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(3, minmax(auto, var(--hf-image-width, 250px)));
}

.hf-form-field.hf-options-layout-4.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(4, minmax(auto, var(--hf-image-width, 250px)));
}

.hf-form-field.hf-options-layout-5.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(5, minmax(auto, var(--hf-image-width, 250px)));
}

.hf-form-field.hf-options-layout-6.hashform-field-type-image_select .hf-choice-container {
    grid-template-columns: repeat(6, minmax(auto, var(--hf-image-width, 250px)));
}

/* Image */
.hf-form-field.hashform-field-type-image .hf-field-container {
    width: 100%;
}

.hf-form-field.hashform-field-type-image .hf-field-content {
    flex-grow: 1;
    max-width: var(--hf-width);
}

.hf-form-field.hashform-field-type-image .hf-no-image-field {
    text-align: center;
    text-transform: uppercase;
    opacity: 0.4;
}

/* Time */
.hf-form-field.hashform-field-type-time .hf-flex-container {
    display: flex;
    gap: 10px;
}

.hf-form-field.hashform-field-type-time .hf-flex-container select {
    flex: 0 0 80px;
    width: 80px;
}

/* Star */
.hf-form-field.hashform-field-type-star .hf-choice-container {
    display: block !important;
    font-size: 25px;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-star .hf-choice-container {
    font-size: var(--hf-star-size, 25px);
}

.hf-form-field.hashform-field-type-star .hashform-star-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-star .hashform-star-group {
    gap: 0.4em;
}

.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating {
    cursor: pointer;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating {
    font-size: var(--hf-star-size, 25px);
}

.hf-form-default-style .hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating {
    font-size: 25px;
}

.hf-form-field.hashform-field-type-star .hashform-star-group input {
    display: none;
}

.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-checked .mdi-star-outline {
    color: #ffaa4a;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-checked .mdi-star-outline {
    color: var(--hf-star-color-active, #ffaa4a);
}

.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-hovered .mdi-star-outline:before,
.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-checked .mdi-star-outline:before {
    content: "\F04CE";
}

.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-non-hovered .mdi-star-outline:before {
    content: "\F04D2";
}

.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating .mdi-star-outline,
.hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-non-hovered .mdi-star-outline {
    color: #333;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating .mdi-star-outline,
.hf-form-custom-style .hf-form-field.hashform-field-type-star .hashform-star-group .hf-star-rating.hf-star-non-hovered .mdi-star-outline {
    color: var(--hf-star-color, #333);
}

/* Quantity */
.hf-form-field.hashform-field-type-spinner .hf-quantity-input {
    display: flex;
    font-size: 14px;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input {
    font-size: var(--hf-field-typo-font-size, 14px);
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input input {
    -moz-appearance: textfield;
    padding-left: 70px !important;
    padding-right: 70px !important;
    display: flex;
    text-align: center;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input input {
    padding-left: 3em !important;
    padding-right: 3em !important;
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input input::-webkit-outer-spin-button,
.hf-form-field.hashform-field-type-spinner .hf-quantity-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input span {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: #CCC;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input span {
    width: 3.5em;
    color: var(--hf-field-border-color-normal, #CCC);
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input span:before {
    font-size: 0.9em;
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input .mdi-minus {
    margin-right: -60px;
    border-right: 1px solid #EEE;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input .mdi-minus {
    margin-right: -3.5em;
    border-right: var(--hf-field-border-right, 1px) solid var(--hf-field-border-color-normal, #CCC);
}

.hf-form-field.hashform-field-type-spinner .hf-quantity-input .mdi-plus {
    margin-left: -60px;
    border-left: 1px solid #EEE;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-spinner .hf-quantity-input .mdi-plus {
    margin-left: -3.5em;
    border-left: var(--hf-field-border-right, 1px) solid var(--hf-field-border-color-normal, #CCC);
}

/* Divider */
.hf-form-field.hashform-field-type-separator .hf-field-container {
    width: 100%;
}

.hf-form-field.hashform-field-type-separator .hf-field-content {
    max-width: var(--hf-width);
}

/* An <hr>, so the break is announced rather than only drawn. Its own borders
   and margins are cleared, since the field writes the ones it wants inline. */
.hf-form-field.hashform-field-type-separator .hf-separator-border {
    border-color: #333;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    height: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-separator .hf-separator-border {
    border-color: var(--hf-divider-color, #333);
}

/* HTML */
.hf-form-field.hashform-field-type-html .hf-field-container {
    width: 100%;
}

.hf-form-field.hashform-field-type-html .hf-field-content {
    max-width: var(--hf-width);
}

/* Paragrah */
.hf-form-field.hashform-field-type-paragraph .hf-field-container {
    width: 100%;
}

.hf-form-field.hashform-field-type-paragraph .hf-field-content {
    max-width: var(--hf-width);
}

/* Custom HTML */
.hf-form-field.hashform-field-type-html .hf-field-content a {
    text-decoration: underline;
}

/* Heading */
.hf-form-field.hashform-field-type-heading .hf-field-container {
    width: 100%;
}

.hf-form-field.hashform-field-type-heading .hf-field-content {
    max-width: var(--hf-width);
}

/* Range Slider */
.hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap {
    width: 100%;
    display: flex;
    align-items: center;
}

.hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider {
    position: relative;
    flex-grow: 1;
    height: 4px;
    margin: 12px 0;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.5s;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider {
    height: var(--hf-range-height, 4px);
    background: var(--hf-range-color, rgba(0, 0, 0, 0.15));
}

.hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider .ui-slider-range {
    display: inline-block;
    position: absolute;
    top: 0;
    height: 100%;
    background: #13a1dc;
    border-radius: 5px;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider .ui-slider-range {
    background: var(--hf-range-color-active, #13a1dc);
}

.hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider .ui-slider-handle {
    height: 16px;
    width: 16px;
    background: #fff;
    border: none;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin: 0 0 0 -8px;
    transform: translateY(-50%);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9;
}

.hf-form-custom-style .hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider .ui-slider-handle {
    height: var(--hf-range-handle-size, 16px);
    width: var(--hf-range-handle-size, 16px);
    background: var(--hf-range-handle-color, #fff);
    margin: 0 0 0 calc(var(--hf-range-handle-size, 8px)/2 * -1);
}

.hf-form-field.hashform-field-type-range_slider .hf-range-slider-wrap .hf-range-slider + .hf-range-input-selector {
    margin-left: 10px;
    width: 80px;
    text-align: center;
}

.hf-form-field.hashform-field-type-range_slider .hf-typography-line-height-field .hf-range-slider + .hf-range-input-selector {
    margin-right: 20px
}

/* Submit Button */
.hf-submit-wrap {
    display: flex;
}

.hf-submit-btn-align-center.hf-submit-wrap {
    justify-content: center;
}

.hf-submit-btn-align-right.hf-submit-wrap {
    justify-content: flex-end;
}

.hf-submit-btn-align-stretch.hf-submit-wrap .hf-submit-button {
    width: 100%;
    justify-content: center;
}

.hf-submit-wrap .hf-submit-button {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-submit-wrap .hf-submit-button.hf-button-loading:after {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid;
    border-right-color: transparent;
    animation: hf-spin 0.4s infinite linear;
}

@keyframes hf-spin {
    to {
        transform: rotate(1turn)
    }
}

/* Form Success Message */
.hf-success-msg {
    display: block;
    background: #4BB543;
    color: #FFF;
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 3px;
    text-align: center;
}

.hf-failed-msg {
    display: block;
    background: #ff3333;
    color: #FFF;
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 3px;
    text-align: center;
}

/***********/
body.hashform_preview_page .hf-form-preview {
    max-width: 1100px;
    margin: 50px auto;
}



/* -----------------------------------------------------------------------------
 * Preview
 *
 * The submit button is rendered disabled on the preview page so a look at the
 * form cannot post an entry. It kept the full button styling though, so it
 * invited a click and then did nothing at all.
 *
 * This rule has nothing to do with the pickers. It was sitting inside the
 * picker block, between the section heading and the first datepicker rule, and
 * is lifted out to here so the block below is contiguous.
 * -------------------------------------------------------------------------- */
.hashform_preview_page .hashform-form button[disabled] {
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: .55;
}

/* =============================================================================
 * Pickers
 *
 * Both panels are moved to <body> as they open, so neither sits inside
 * #hf-container-{id} and neither can inherit the per form --hf-field-* tokens
 * through the cascade. frontend.js copies the three that matter onto whichever
 * panel is opening, which is what makes a picker follow the palette of the form
 * that was clicked even with several differently styled forms on one page. The
 * values below are the fallbacks for when that has not run - in the builder it
 * never runs - and they are declared once for all three panel shapes so the
 * pickers cannot drift apart.
 *
 * The bridge writes those custom properties as inline style properties, and an
 * inline declaration beats any selector, so the selectors here may be raised as
 * far as they need to go. What must never happen is an !important on a
 * --hf-pick-* declaration: an important stylesheet declaration outranks a
 * normal inline one, and every form on the site would collapse back to this
 * fallback palette.
 *
 *
 * Why the selectors look like this
 *
 * These class names are not ours. They belong to jQuery UI and to the bundled
 * timepicker, and any theme or plugin that ships a jQuery UI stylesheet writes
 * the same ones. A plain .ui-datepicker rule is specificity (0,1,0) and so is
 * theirs, which hands the panel to whichever stylesheet the page loads last.
 * Reordering the enqueue does not settle it either: the .admin-color-* variants
 * those sheets carry reach (0,3,1) and beat a plain rule outright.
 *
 * So the date panel is matched through #ui-datepicker-div, the single div
 * jQuery UI appends to <body> and reuses for every date input on the page. One
 * id outranks any number of classes, so every rule here lands at (1,x,y) and
 * wins on merit rather than on load order, without a single !important.
 *
 * The prefix is applied to every rule in the block without exception, including
 * all four media blocks. That is load bearing rather than tidiness: the block
 * relies on its own internal cascade, and raising some rules but not others
 * inverts it. The universal reset is the floor at (1,0,0) and every other rule
 * in the block carries at least one element or class on top of the id, so the
 * lightest thing that can override it is (1,0,1) - the table, thead, th and td
 * rules. Media queries contribute no specificity of their own, so an unraised
 * override inside one would silently lose to a raised base rule.
 * ========================================================================== */

#ui-datepicker-div.ui-datepicker,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper,
select.ui-timepicker-select.ui-timepicker-select {

    /*
     * The accent is #a3591b rather than the brand #dd823b because the panel
     * uses it as a fill behind a numeral and as the hue the state ink is drawn
     * from: #dd823b on white is 2.9:1 and fails both jobs, while #a3591b is
     * 5.2:1 and passes. Same hue, taken down far enough to be legible, exactly
     * as --hf-accent-text does for the rest of the admin. On the front end this
     * is replaced by whatever colour the form owner chose, which is why nothing
     * below trusts it to be readable on its own.
     */
    --hf-pick-accent: #a3591b;

    /*
     * Everything that has to be READ rather than merely seen is drawn in this,
     * never in the raw accent. It is the accent mixed 45% into black, which is
     * not an arbitrary ratio: mixing any sRGB colour 45% with black caps every
     * channel at 115, so the lightest result that can ever come out is #737373,
     * which is 4.74:1 against the panel. That is a floor for every possible
     * input colour including pure white, so the keyboard cursor, the focus
     * rings, today's ring, the arrow hover glyph and the selected chip's
     * keyline stay legible no matter what a site owner bridges in. The literal
     * is the resolved value for the default accent, for engines without
     * color-mix.
     */
    --hf-pick-accent-ink: #49280c;
    --hf-pick-accent-ink: color-mix(in srgb, var(--hf-pick-accent) 45%, #000);

    /*
     * The numeral on a filled chip. The fallback is white, which is correct for
     * the #a3591b default at 5.2:1; the second declaration replaces it wherever
     * relative colour syntax is understood and flips to black once the accent
     * is light. The switch is on OKLCh lightness rather than HSL lightness on
     * purpose - HSL lightness is not perceptual, and a saturated light hue like
     * #ffcc00 reports l=50% there and would wrongly keep white text. Multiplying
     * by infinity inside the lightness slot clamps to 0 or 1, and dropping the
     * chroma to 0 makes the result a true black or white rather than a tint.
     */
    --hf-pick-on-accent: #fff;
    --hf-pick-on-accent: oklch(from var(--hf-pick-accent) calc((.62 - l) * infinity) 0 h);

    --hf-pick-surface: #fff;
    --hf-pick-text: #1e2327;

    /*
     * Muted is 5.5:1 and carries the weekday row, the durations and the days
     * from the neighbouring month, which stay selectable when selectOtherMonths
     * is on and are therefore live content, not decoration. Faint is 3.2:1 and
     * is reserved for genuinely unavailable slots, which also carry a line
     * through them so the state never rests on telling two greys apart. Neither
     * is ever dimmed with opacity - the old .45 took other-month days to about
     * 1.9:1, which is not a shade, it is unreadable.
     */
    --hf-pick-muted: #646970;
    --hf-pick-faint: #8c9196;
    --hf-pick-border: #e2e5ea;

    --hf-pick-font: inherit;
    --hf-pick-font-size: 13px;

    /*
     * One padding value drives the panel gutter and one cell value drives both
     * the day chip and the panel's minimum width, so the grid, the header and
     * the panel edge stay on the same vertical lines when either changes. The
     * cell gap is 3px rather than 2px so the keyboard cursor ring, which sits
     * 2px outside a 36px chip, still clears its neighbour by 2px.
     */
    --hf-pick-pad: 12px;
    --hf-pick-cell-gap: 3px;
    --hf-pick-cell: 36px;
    --hf-pick-tap: 34px;

    --hf-pick-radius: 12px;
    --hf-pick-radius-control: 8px;

    /*
     * The 1px border is only 1.3:1 against a white page, so the shadow is what
     * actually separates the panel from what is behind it. It is load bearing
     * rather than decoration and must not be traded for a heavier border.
     */
    --hf-pick-shadow: 0 12px 28px -8px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .1);

    /*
     * Every transition in the block reads this one token, which is what lets
     * the reduced motion block at the end redefine it once instead of listing
     * selectors it could silently fall behind.
     */
    --hf-pick-transition: .15s ease;

    /*
     * Hover only, where the tint is a supplementary cue on top of a pointer
     * that is already there, so its contrast is not carrying a state on its
     * own. 16% is as far as it can go before the tint stops being a whisper.
     */
    --hf-pick-soft: rgba(163, 89, 27, .16);
    --hf-pick-soft: color-mix(in srgb, var(--hf-pick-accent) 16%, transparent);
}

/* -----------------------------------------------------------------------------
 * Date picker
 *
 * An inline datepicker renders as .ui-datepicker.ui-datepicker-inline in the
 * page and never inside #ui-datepicker-div, so nothing here matches it and it
 * is deliberately left alone. It is meant to sit in the page rather than float
 * over it, it may well belong to another plugin, and it could not have been
 * hardened by an id anyway - .ui-datepicker.ui-datepicker-inline is only
 * (0,2,0) and still loses to a theme's (0,3,1). Nothing in hash-form or
 * hash-form-pro creates one; all three .datepicker() calls are popups.
 * -------------------------------------------------------------------------- */

/* jQuery UI leaves it to a jQuery UI theme stylesheet to keep this div hidden
   until it is opened. WordPress does not enqueue one, so without this it
   rendered as an empty bordered box at the foot of every page carrying a date
   field. The script writes display inline when opening and closing, so this
   only supplies the state before it has ever been opened. */
#ui-datepicker-div {
    display: none;
    position: absolute;
}

#ui-datepicker-div.ui-datepicker {
    background-color: var(--hf-pick-surface);
    /* jQuery UI's own theme puts a sprite here through .ui-widget-content. */
    background-image: none;
    border: 1px solid var(--hf-pick-border);
    border-radius: var(--hf-pick-radius);
    box-shadow: var(--hf-pick-shadow);
    box-sizing: border-box;
    color: var(--hf-pick-text);
    font-family: var(--hf-pick-font);
    font-size: var(--hf-pick-font-size);
    line-height: 1.4;
    /* Clears the input rather than touching it. jQuery UI gives no class for
       the flipped-above state, so when the panel is pushed above a field near
       the foot of the viewport this margin lands on the wrong side. That one
       cannot be closed from CSS and is listed with the JS recommendations. */
    margin: 6px 0 0;
    /* Seven chips, each in a cell of its own gap, less the one gap the table is
       pulled out by at each end, plus the two gutters. Written from the tokens
       so the panel can never end up narrower than the grid it holds. */
    min-width: calc((var(--hf-pick-cell) + var(--hf-pick-cell-gap) * 2) * 7 - var(--hf-pick-cell-gap) * 2 + var(--hf-pick-pad) * 2);
    max-width: calc(100vw - 16px);
    padding: var(--hf-pick-pad);
    /* jQuery UI writes an inline em width whenever numberOfMonths is above one,
       sized for its own 17em-per-month layout rather than this one. An inline
       declaration can only be beaten by !important, and the flex rule further
       down lays the months out correctly without it. */
    width: auto !important;
    /* Also inline, recomputed on every open from the input's own stacking
       context, which in wp-admin is usually 0 or 1 and would put the panel
       behind #adminmenuwrap at 9990 and #wpadminbar at 99999. The value clears
       the plugin's own bulk edit dialog at 999999 as well, because a date field
       opened inside that dialog has to render above it and an exact tie there
       is decided by whichever element was appended to <body> last. */
    z-index: 1000001 !important;
}

/* The panel arrives carrying ui-widget, ui-widget-content, ui-corner-all and
   ui-helper-clearfix, and its children carry ui-corner-all and ui-icon, so a
   site with a full jQuery UI theme loaded brings sprite backgrounds, corner
   radii and cell colours with it. This flattens all of that in one pass at
   (1,0,0), the floor of the block, so every rule below still overrides it. The
   transparent background is what finally stops a theme colouring the weekend,
   today and current-day table cells behind the chips - nothing here declared a
   background on the cell before, so any sheet that painted it won by default
   rather than by weight. */
#ui-datepicker-div * {
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    float: none;
    font-family: inherit;
    padding: 0;
}

/* Dragging a selection across the calendar while clicking through months looks
   broken, so selection is switched off on the controls and the grid. It is
   deliberately not put on the panel as a whole: the month and year in the
   header are the one thing in the picker somebody may reasonably want to
   select and copy. */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div table {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- Header ---------- */

/* jQuery UI prints prev, then next, then the title. Flex order puts them back
   into reading order without touching the markup, and pairs the two arrows on
   the trailing edge so the month reads as a heading sitting on its grid rather
   than as a label squeezed between two buttons. .ui-widget-header is named
   alongside .ui-datepicker-header because a jQuery UI theme sheet paints the
   framework class, not the widget one. */
#ui-datepicker-div .ui-widget-header,
#ui-datepicker-div .ui-datepicker-header {
    align-items: center;
    background: none;
    border: none;
    color: var(--hf-pick-text);
    display: flex;
    font-weight: normal;
    /* Enough that the paired arrows cannot be mis-clicked for one another. */
    gap: 6px;
    padding: 0 0 var(--hf-pick-pad);
    position: relative;
}

/* jQuery UI adds ui-state-hover to the arrows through a delegated handler on
   the panel, which in a full jQuery UI theme repaints them. The arrows carry
   their own hover further down; this only stops the framework class doing
   anything on its own. */
#ui-datepicker-div .ui-datepicker-header .ui-state-hover {
    background: transparent;
    border-color: transparent;
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-title {
    align-items: center;
    color: var(--hf-pick-text);
    display: flex;
    /* Takes the slack so the arrows are pushed to the trailing edge. On a short
       month name that leaves an obvious gap between the two, which is the
       intent: the month starts on the same vertical line as the weekday row
       and the first chip, and the navigation stays where the hand expects it
       rather than moving with the length of the word. */
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    gap: 4px;
    line-height: 1.4;
    margin: 0;
    /* Without this the title refuses to shrink below the width of a long
       localised month name and pushes the arrows off the panel. */
    min-width: 0;
    order: 1;
    text-align: left;
}

/* The title is a select only for whichever of month and year was made
   changeable - the plugin turns the month on and leaves the year off - and
   both halves of every secondary month in a multi-month panel arrive as plain
   spans. They have to read identically. */
#ui-datepicker-div .ui-datepicker-title span.ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-title span.ui-datepicker-year {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

/* Given the plugin's own border, radius and chevron rather than left bare. A
   borderless select is either invisible as a control or shows an OS-drawn
   arrow floating in a transparent box, and it changes shape per platform,
   which made it the least legible thing in an otherwise precise panel. The
   chevron is drawn against --hf-pick-surface, which is never bridged, so a
   fixed muted grey is always the right colour for it. */
#ui-datepicker-div select.ui-datepicker-month,
#ui-datepicker-div select.ui-datepicker-year {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--hf-pick-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23646970' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    border: 1px solid var(--hf-pick-border);
    border-radius: var(--hf-pick-radius-control);
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    height: auto;
    line-height: 1.4;
    margin: 0;
    max-width: 46%;
    min-height: 0;
    min-width: 0;
    padding: 3px 26px 3px 8px;
    text-overflow: ellipsis;
    transition: border-color var(--hf-pick-transition);
    width: auto;
}

#ui-datepicker-div select.ui-datepicker-month:hover,
#ui-datepicker-div select.ui-datepicker-year:hover {
    border-color: var(--hf-pick-accent-ink);
}

/* A real ring rather than a 1px border colour change, which is not something a
   user can be expected to find, and keyed to :focus-visible so it stays off a
   mouse click. */
#ui-datepicker-div select.ui-datepicker-month:focus-visible,
#ui-datepicker-div select.ui-datepicker-year:focus-visible {
    border-color: var(--hf-pick-accent-ink);
    outline: 2px solid var(--hf-pick-accent-ink);
    outline-offset: 1px;
}

/* 34px rather than 28px so the header does not sit optically lighter and
   smaller than the 36px grid it heads. */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    align-items: center;
    border-radius: var(--hf-pick-radius-control);
    cursor: pointer;
    display: flex;
    flex: none;
    height: var(--hf-pick-tap);
    justify-content: center;
    /* jQuery UI's theme positions these absolutely inside the header. They are
       flex items here, so the offsets have to go. */
    left: auto;
    position: relative;
    right: auto;
    top: 0;
    transition: background-color var(--hf-pick-transition);
    width: var(--hf-pick-tap);
}

#ui-datepicker-div .ui-datepicker-prev {
    order: 2;
}

#ui-datepicker-div .ui-datepicker-next {
    order: 3;
}

/* jQuery UI adds both ui-state-hover and ui-datepicker-prev-hover on hover. The
   compound half is the one that carries the weight: the plain -prev-hover
   selector on its own would lose to the header rule above, which also matches
   the arrow. */
#ui-datepicker-div .ui-state-hover.ui-datepicker-prev,
#ui-datepicker-div .ui-state-hover.ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {
    background: var(--hf-pick-soft);
    border: none;
    left: auto;
    right: auto;
    top: 0;
}

/* Kept as insurance rather than as a live path: jQuery UI builds these anchors
   without an href, so they never take focus as things stand. If a host ever
   gives them one, the panel already behaves. */
#ui-datepicker-div .ui-datepicker-prev:focus-visible,
#ui-datepicker-div .ui-datepicker-next:focus-visible {
    outline: 2px solid var(--hf-pick-accent-ink);
    outline-offset: 1px;
}

#ui-datepicker-div .ui-datepicker-prev:before {
    content: "\f341";
}

#ui-datepicker-div .ui-datepicker-next:before {
    content: "\f345";
}

/* These anchors carry no href, so they are exposed as neither link nor button
   and their whole accessible name is the title attribute and the word inside
   this span. Hiding it with display:none took it out of the accessibility tree
   along with the picture and left month navigation announcing nothing at all,
   so it is clipped instead: gone from the page, still read out. The class on it
   is ui-icon, which in a jQuery UI theme means a sprite, so that is cleared. */
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    background: none;
    border: 0;
    clip-path: inset(50%);
    display: block;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Hidden rather than removed so the header keeps its shape when a minDate or
   maxDate takes one arrow out of play. */
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled {
    cursor: default;
    visibility: hidden;
}

#ui-datepicker-div .ui-datepicker-next:not(.ui-state-disabled):before,
#ui-datepicker-div .ui-datepicker-prev:not(.ui-state-disabled):before {
    color: var(--hf-pick-muted);
    font: normal 20px/1 "dashicons";
    height: 20px;
    width: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The ink rather than the raw accent, because on the front end the accent is
   the customer's colour and a hover state that comes out paler than its own
   rest state is worse than no hover state at all. */
#ui-datepicker-div .ui-datepicker-prev-hover:before,
#ui-datepicker-div .ui-datepicker-next-hover:before {
    color: var(--hf-pick-accent-ink);
    opacity: 1;
}

/* ---------- Grid ---------- */

/* Pulled out by one cell gap on each side so the chips, which sit inside a cell
   of their own padding, line up with the header and the panel edge instead of
   floating three pixels inside them.

   The width is written out from the same tokens as the panel's min-width rather
   than as a percentage of it. A table-layout:fixed table takes no width from
   its contents, so a percentage here left the panel — which jQuery UI positions
   absolutely and which is therefore sized to fit its contents — with nothing to
   size itself from: it fell through to max-width and opened the full width of
   the window. Seven cells, each in a gap of its own, comes to the same number
   the percentage was reaching for whenever the panel is at its minimum. */
#ui-datepicker-div table {
    border-collapse: collapse;
    font-size: var(--hf-pick-font-size);
    margin: 0 calc(var(--hf-pick-cell-gap) * -1);
    table-layout: fixed;
    width: calc((var(--hf-pick-cell) + var(--hf-pick-cell-gap) * 2) * 7);
}

#ui-datepicker-div thead {
    background: none;
    color: var(--hf-pick-muted);
}

#ui-datepicker-div th {
    color: var(--hf-pick-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 0 0 6px;
    text-align: center;
    text-transform: uppercase;
}

/* Weekends are not tinted. The grid carries no rules and no alternating fills;
   the only colour in it belongs to today and to the selected day, which is what
   makes those two readable at a glance. Stated rather than left unsaid, because
   tinting the weekend column is exactly the sort of thing a jQuery UI theme
   does uninvited. */
#ui-datepicker-div th.ui-datepicker-week-end {
    background: none;
    color: var(--hf-pick-muted);
}

#ui-datepicker-div td {
    background: none;
    border: none;
    padding: var(--hf-pick-cell-gap);
    text-align: center;
}

/* Covers both branches: a selectable day is an anchor, an unselectable one is a
   span, and a rule written against td a would silently miss every disabled cell
   and hand it back to whatever jQuery UI stylesheet the site has - which is
   precisely the failure that showed up in the builder. Tabular figures stop the
   columns shimmering as the month changes. */
#ui-datepicker-div td .ui-state-default {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--hf-pick-radius-control);
    color: var(--hf-pick-text);
    display: flex;
    font-variant-numeric: tabular-nums;
    font-weight: normal;
    height: var(--hf-pick-cell);
    justify-content: center;
    margin: 0 auto;
    /* Anchors nothing today, but keeps the chip a containing block so a future
       marker does not have to reflow the cell to get one. */
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--hf-pick-transition), color var(--hf-pick-transition);
    width: var(--hf-pick-cell);
}

/* jQuery UI also hangs ui-state-highlight on today's link, which in its own
   theme is a yellow notice background. Cleared at the same weight as hover so
   hovering today still paints. */
#ui-datepicker-div td .ui-state-highlight {
    background: transparent;
    border: none;
}

#ui-datepicker-div td .ui-state-hover {
    background: var(--hf-pick-soft);
    color: var(--hf-pick-text);
}

/* Today is a ring and a weight change rather than a fill, so it never competes
   with the selected day. The ring is 2px because at 1px it was much the fainter
   of the two next to a solid chip in the same hue, and it is drawn in the ink
   so it clears the 3:1 a non-text state indicator has to reach whatever accent
   a form owner bridged in. */
#ui-datepicker-div td.ui-datepicker-today .ui-state-default {
    box-shadow: inset 0 0 0 2px var(--hf-pick-accent-ink);
    color: var(--hf-pick-accent-ink);
    font-weight: 600;
}

/* One filled chip in the grid, and only one. The 1px keyline is not decoration:
   the fill is the form owner's colour on the front end and could be very pale,
   and the keyline is derived to be at least 4.7:1 against the panel, so the
   boundary of the chip is visible even when the fill is not. */
#ui-datepicker-div td.ui-datepicker-current-day .ui-state-default,
#ui-datepicker-div td .ui-state-active {
    background: var(--hf-pick-accent);
    box-shadow: inset 0 0 0 1px var(--hf-pick-accent-ink);
    color: var(--hf-pick-on-accent);
    font-weight: 600;
}

/* Today AND selected. Both classes co-occur, and without this the fill simply
   replaced the ring and today became unrecoverable on the one cell users most
   often look for it. A second ring drawn in the chip's own text colour reads as
   a deliberate concentric marker rather than as a seam, and it is guaranteed to
   contrast with the fill because that is what --hf-pick-on-accent is chosen for.
   Written as a compound so it wins on weight and not on its position in the
   block, which the two rules above no longer depend on either. */
#ui-datepicker-div td.ui-datepicker-today.ui-datepicker-current-day .ui-state-default,
#ui-datepicker-div td.ui-datepicker-today .ui-state-active {
    box-shadow: inset 0 0 0 1px var(--hf-pick-accent-ink), inset 0 0 0 3px var(--hf-pick-on-accent);
    color: var(--hf-pick-on-accent);
}

/* The selected day still has to answer the pointer, and the plain hover rule
   cannot reach it. Compound, so this does not rest on source order either. */
#ui-datepicker-div td.ui-datepicker-current-day .ui-state-hover,
#ui-datepicker-div td .ui-state-active.ui-state-hover {
    background: color-mix(in srgb, var(--hf-pick-accent) 85%, #000);
    color: var(--hf-pick-on-accent);
}

/* The keyboard cursor, and the most important rule in the block. jQuery UI
   never moves focus into the panel - tab closes it and every open and redraw
   pushes focus back onto the input - so the cell a keyboard user is standing on
   is marked with this class alone, and the library paints it by firing its own
   mouseover handler at it. Left alone that made the cursor identical to a mouse
   hover, a tint at about 1.1:1, which is not somewhere anyone can see they are.
   The ring sits outside the chip so it can never be mistaken for today's, which
   sits inside, and it is an outline rather than a box-shadow so it survives
   forced-colors mode. The :focus-visible half is insurance for the same reason
   as the arrows: it is not a live path today. */
#ui-datepicker-div td.ui-datepicker-days-cell-over .ui-state-default,
#ui-datepicker-div td .ui-state-default:focus-visible {
    outline: 2px solid var(--hf-pick-accent-ink);
    outline-offset: 2px;
}

/* Days from the neighbouring month are muted with a designed colour at 5.5:1
   rather than dimmed with opacity. They stay selectable whenever
   selectOtherMonths is on, so they are ordinary live content and the faint grey
   reserved for unavailable slots would be too dark a reading of them. */
#ui-datepicker-div td.ui-datepicker-other-month .ui-state-default,
#ui-datepicker-div td .ui-state-default.ui-priority-secondary {
    color: var(--hf-pick-muted);
    font-weight: normal;
    opacity: 1;
}

#ui-datepicker-div td.ui-datepicker-other-month .ui-state-hover,
#ui-datepicker-div td .ui-state-default.ui-priority-secondary.ui-state-hover {
    color: var(--hf-pick-text);
}

#ui-datepicker-div td.ui-state-disabled,
#ui-datepicker-div td.ui-datepicker-unselectable {
    cursor: default;
    opacity: 1;
}

/* Unavailable days. Disabled text is exempt from the contrast minimum, but
   exempt is not the same as usable, so this is a designed 3.2:1 rather than a
   by-product of stacking opacity. The line through the number is the part that
   matters: without it a day blocked by minDate or maxDate is separated from an
   ordinary neighbouring-month day only by one grey being darker than another,
   which is a comparison nobody should have to make against a neighbour. */
#ui-datepicker-div td.ui-state-disabled .ui-state-default,
#ui-datepicker-div td.ui-datepicker-unselectable .ui-state-default {
    background: transparent;
    box-shadow: none;
    color: var(--hf-pick-faint);
    cursor: default;
    font-weight: normal;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Only rendered when showWeek is on. Nothing in Hash Form turns it on, but the
   panel is shared with every other datepicker on the page and the option is
   global, so a third party can turn it on through $.datepicker.setDefaults. */
#ui-datepicker-div th.ui-datepicker-week-col,
#ui-datepicker-div td.ui-datepicker-week-col {
    color: var(--hf-pick-faint);
    font-size: 11px;
    font-weight: normal;
    padding-right: 6px;
    text-align: center;
}

/* ---------- Button pane ---------- */

/* Same reasoning: showButtonPanel is off in all three of the plugin's inits,
   but the div is shared and the defaults are global, so another plugin can put
   Today and Done buttons inside our panel. A few rules are cheaper than the
   bug report. */
#ui-datepicker-div .ui-datepicker-buttonpane {
    background: none;
    border-top: 1px solid var(--hf-pick-border);
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin: var(--hf-pick-pad) 0 0;
    padding: var(--hf-pick-pad) 0 0;
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--hf-pick-radius-control);
    color: var(--hf-pick-text);
    cursor: pointer;
    float: none;
    font-family: inherit;
    font-size: var(--hf-pick-font-size);
    font-weight: 500;
    line-height: 1.4;
    min-height: 32px;
    padding: 6px 12px;
    transition: background-color var(--hf-pick-transition), color var(--hf-pick-transition);
    width: auto;
}

/* jQuery UI dims a secondary button with opacity, which is the same unreadable
   result the other-month days used to have. */
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-priority-secondary {
    color: var(--hf-pick-muted);
    opacity: 1;
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-priority-primary {
    background: var(--hf-pick-accent);
    border-color: var(--hf-pick-accent-ink);
    color: var(--hf-pick-on-accent);
    font-weight: 600;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
    background: var(--hf-pick-soft);
    color: var(--hf-pick-text);
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-priority-primary:hover {
    background: color-mix(in srgb, var(--hf-pick-accent) 85%, #000);
    color: var(--hf-pick-on-accent);
}

#ui-datepicker-div .ui-datepicker-buttonpane button:focus-visible {
    outline: 2px solid var(--hf-pick-accent-ink);
    outline-offset: 1px;
}

/* ---------- Multiple months ---------- */

/* jQuery UI floats the month groups and clears them with ui-helper-clearfix.
   Flex does the same thing without the float that the reset above removes, and
   without depending on the inline em width that is forced to auto. */
#ui-datepicker-div.ui-datepicker-multi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hf-pick-pad);
}

#ui-datepicker-div.ui-datepicker-multi .ui-datepicker-group {
    flex: 1;
    float: none;
    width: auto;
}

#ui-datepicker-div .ui-datepicker-row-break {
    flex-basis: 100%;
    height: 0;
    width: 100%;
}

/* ---------- Right to left ---------- */

/* The flex order and the dashicons glyphs both assume a left to right header,
   so both are mirrored rather than left to the browser. The old pair of rules
   here were scoped to body.wp-admin, so the front end got nothing at all. */
#ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-title {
    text-align: right;
}

#ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-prev {
    order: 3;
}

#ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-next {
    order: 2;
}

#ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-prev:before {
    content: "\f345";
}

#ui-datepicker-div.ui-datepicker-rtl .ui-datepicker-next:before {
    content: "\f341";
}

#ui-datepicker-div.ui-datepicker-rtl select.ui-datepicker-month,
#ui-datepicker-div.ui-datepicker-rtl select.ui-datepicker-year {
    background-position: left 8px center;
    padding: 3px 8px 3px 26px;
}

#ui-datepicker-div.ui-datepicker-rtl th.ui-datepicker-week-col,
#ui-datepicker-div.ui-datepicker-rtl td.ui-datepicker-week-col {
    padding-left: 6px;
    padding-right: 0;
}

/* Parent input alignment. The panel is placed against the input's border box,
   which is one pixel wider than its text on each side. Raised with everything
   else because a theme shipping jQuery UI CSS ships this pair too, byte for
   byte, and used to win it on load order. */
body.wp-admin:not(.rtl) #ui-datepicker-div.ui-datepicker {
    margin-left: -1px;
}

body.wp-admin.rtl #ui-datepicker-div.ui-datepicker {
    margin-right: -1px;
}

/* -----------------------------------------------------------------------------
 * Time picker
 *
 * Replaces the stock jquery.timepicker stylesheet, which is deliberately not
 * enqueued. That sheet carried its own blue, its own grey and its own shadow,
 * so a date and a time field sitting next to each other looked like they came
 * from different plugins.
 *
 * The wrapper is appended to <body> as a sibling of #ui-datepicker-div, not
 * inside it, so the id above is no help here - #ui-datepicker-div
 * .ui-timepicker-wrapper matches nothing - and the class is repeated instead.
 * Three repetitions put every rule at (0,3,0) or higher, which clears the stock
 * sheet's heaviest selector at (0,3,1) and any admin-colour prefixed derivative
 * of it with two class weights to spare, so a copy of that sheet loading after
 * this one changes nothing.
 *
 * The repetition has to be kept on every rule: drop one on one rule and it
 * falls a whole class weight with no visible symptom until a competing sheet
 * turns up on a customer site. Nothing in CSS can enforce that, which is why
 * passing the library's own className option is the recommended way out and is
 * listed with the JS changes. It is deliberately not relied on here, because
 * the stylesheet has to keep working when the script does not.
 * -------------------------------------------------------------------------- */

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper {
    background: var(--hf-pick-surface);
    border: 1px solid var(--hf-pick-border);
    border-radius: var(--hf-pick-radius);
    box-shadow: var(--hf-pick-shadow);
    box-sizing: border-box;
    color: var(--hf-pick-text);
    font-family: var(--hf-pick-font);
    font-size: var(--hf-pick-font-size);
    line-height: 1.4;
    margin: 6px 0 0;
    /* The stock sheet capped this at 150px, about five slots. Roughly seven
       here, and the vh half keeps it inside a short viewport - a laptop in
       landscape, or a phone with the keyboard up - without a media query. */
    max-height: min(288px, 45vh);
    max-width: calc(100vw - 16px);
    outline: none;
    /* A dropdown that hands its momentum to the page underneath once it reaches
       the last slot feels broken. */
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    /* Left as auto so the library's listWidth option, which writes an inline
       width, still decides when it is used. */
    width: auto;
    /* No !important needed, unlike the date panel: this library writes display,
       position, top and left inline but never a z-index. Matched to the date
       panel so a form carrying both fields cannot have one picker land above a
       dialog and the other below it. */
    z-index: 1000001;

    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--hf-pick-muted) 45%, transparent) transparent;
}

/* The library adds this class when it opens the list above the input, and it
   works out where to put the panel by ADDING the wrapper's own margin-top into
   the offset - in both directions. Opening downward that margin is the gap.
   Opening upward the same positive margin pushed the list down over the field
   by exactly the six pixels that were meant to clear it, and zeroing the margin
   only makes the panel sit flush; a margin-bottom is inert, because jQuery's
   offset setter compensates for rendered margins and only margin-top reaches
   the formula. A negative margin-top is the one value that puts the gap back on
   the side it can be seen. Placed after the base rule, which it ties with. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-positioned-top {
    margin: -6px 0 0;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper::-webkit-scrollbar {
    width: 8px;
}

/* The thumb used to be drawn in the border grey, which is 1.26:1 on the white
   surface - present in the DOM, absent to the eye. The muted ink at low opacity
   reads as a scrollbar without becoming a second piece of colour in the panel. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--hf-pick-muted) 45%, transparent);
    border-radius: 999px;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A 36px row matches the day chip and clears the touch target minimum with room
   rather than by a pixel. Tabular figures for the same reason as the calendar:
   a column of proportional times sets ragged down a forty-eight row menu. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li {
    background: none;
    border: none;
    border-radius: var(--hf-pick-radius-control);
    box-shadow: none;
    color: var(--hf-pick-text);
    cursor: pointer;
    font-size: var(--hf-pick-font-size);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    list-style: none;
    margin: 0;
    padding: 9px 12px;
    position: relative;
    transition: background-color var(--hf-pick-transition), color var(--hf-pick-transition);
    white-space: nowrap;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li + li {
    margin-top: 1px;
}

/* The one piece of structure in a list that is otherwise forty-eight
   near-identical rows: a hairline where the morning ends. It is the only
   landmark the markup offers, since the library classes every row am or pm, and
   it costs nothing when the configured range sits entirely on one side of noon,
   because then no am row is ever followed by a pm row. Drawn as a positioned
   line rather than a border, because a border on an 8px rounded row curves up
   at both ends instead of sitting flat. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-am + li.ui-timepicker-pm {
    margin-top: 9px;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-am + li.ui-timepicker-pm:before {
    background: var(--hf-pick-border);
    content: "";
    height: 1px;
    left: 12px;
    position: absolute;
    right: 12px;
    top: -5px;
}

/* The library keeps ui-timepicker-selected on the chosen row while the pointer
   is elsewhere in the list, so hover has to win over it to read correctly. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li:hover {
    background: var(--hf-pick-soft);
    color: var(--hf-pick-text);
}

/* This class is doing two jobs at once: it marks the committed value and it is
   also the arrow-key cursor, because focus never leaves the input. It is filled
   so it can be found again after scrolling a long list, and it carries the same
   guaranteed keyline as the selected day for the same reason - on the front end
   the fill is the form owner's colour and the keyline is the part whose
   contrast is derived rather than hoped for. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper li.ui-timepicker-selected,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list .ui-timepicker-selected,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list:hover .ui-timepicker-selected {
    background: var(--hf-pick-accent);
    box-shadow: inset 0 0 0 1px var(--hf-pick-accent-ink);
    color: var(--hf-pick-on-accent);
    font-weight: 600;
}

/* Hovering the committed row itself. Compound so it wins on weight rather than
   on its position in the block. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected:hover {
    background: color-mix(in srgb, var(--hf-pick-accent) 85%, #000);
    color: var(--hf-pick-on-accent);
}

/* With showDuration on the library appends a span to the row. Laying the row
   out as a flex line puts the duration on the trailing edge, which the stock
   sheet faked with a fixed padding-right that went with it. */
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-wrapper .ui-timepicker-list li {
    display: flex;
    gap: var(--hf-pick-pad);
    justify-content: space-between;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-duration {
    color: var(--hf-pick-muted);
    margin-left: 6px;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li:hover .ui-timepicker-duration {
    color: var(--hf-pick-muted);
}

/* Full strength rather than dimmed. The duration is the second half of the
   row's meaning, and fading it against a filled chip pushed it under the
   threshold on exactly the row a user was most likely to be reading. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list .ui-timepicker-selected .ui-timepicker-duration {
    color: var(--hf-pick-on-accent);
    opacity: 1;
}

/* The empty row the noneOption setting prepends carries no am or pm class and
   no time, so it is marked as the absence of a choice rather than as one. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li[data-time=""] {
    color: var(--hf-pick-muted);
}

/* Same reasoning as the disabled day: a designed grey plus a line through the
   time, rather than an opacity that has to be compared against its neighbours
   to be understood. */
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    background: transparent;
    box-shadow: none;
    color: var(--hf-pick-faint);
    cursor: default;
    font-weight: normal;
    opacity: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-disabled .ui-timepicker-duration {
    color: var(--hf-pick-faint);
}

/* The useSelect rendering mode replaces the whole panel with a native select
   placed next to the input, inside the form rather than on <body>. It carries
   the tokens itself through the shared block at the top. Nothing in Hash Form
   turns useSelect on; this only stops it arriving unstyled, and it is kept at
   two class weights rather than given id weight, because that control lives
   inside the form and a form owner's own styling has to keep reaching it. */
select.ui-timepicker-select.ui-timepicker-select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--hf-pick-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23646970' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    border: 1px solid var(--hf-pick-border);
    border-radius: var(--hf-pick-radius-control);
    color: var(--hf-pick-text);
    font-family: var(--hf-pick-font);
    font-size: var(--hf-pick-font-size);
    min-height: 36px;
    padding: 6px 30px 6px 12px;
}

select.ui-timepicker-select.ui-timepicker-select:focus-visible {
    border-color: var(--hf-pick-accent-ink);
    outline: 2px solid var(--hf-pick-accent-ink);
    outline-offset: 1px;
}

/* -----------------------------------------------------------------------------
 * Pickers: small screens, motion, forced colours, print
 * -------------------------------------------------------------------------- */

/* Seven 36px chips plus their gutters and the panel padding comes to about
   312px, which is wider than a small phone in portrait once the panel is nudged
   away from the viewport edge. The chip shrinks to 32px, still well above the
   24px minimum target, and the header lets go of the month select so a long
   localised month name has somewhere to go. */
@media screen and (max-width:480px) {

    #ui-datepicker-div.ui-datepicker,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper,
    select.ui-timepicker-select.ui-timepicker-select {
        --hf-pick-cell: 32px;
        --hf-pick-tap: 32px;
        --hf-pick-pad: 8px;
    }

    #ui-datepicker-div select.ui-datepicker-month,
    #ui-datepicker-div select.ui-datepicker-year {
        max-width: none;
    }

    #ui-datepicker-div.ui-datepicker-multi {
        display: block;
    }

    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper {
        max-height: min(240px, 40vh);
    }
}

/* Every transition in the block reads --hf-pick-transition, so redefining that
   one token is enough and there is no list of selectors here to fall out of
   step with the rules above. The selector list is the token block's, repeated
   exactly, so it ties on specificity and wins on position. Not 0s: a zero
   duration never fires transitionend, and both jQuery and the timepicker listen
   for it in places. */
@media (prefers-reduced-motion: reduce) {

    #ui-datepicker-div.ui-datepicker,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper,
    select.ui-timepicker-select.ui-timepicker-select {
        --hf-pick-transition: .001ms linear;
    }
}

/* In forced colours mode the browser throws away background and colour, and
   drops box-shadow outright - so the selected chip loses its fill and today
   loses its ring entirely, which takes the state away from exactly the users
   most dependent on it. Both are restated in system colours, and today moves
   from a shadow to an outline so it survives. Disabled is restated too, because
   the strikethrough alone would be carrying it otherwise. */
@media (forced-colors: active) {

    #ui-datepicker-div.ui-datepicker,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper {
        border-color: ButtonBorder;
    }

    #ui-datepicker-div td.ui-datepicker-today .ui-state-default {
        box-shadow: none;
        outline: 2px solid CanvasText;
        outline-offset: -2px;
    }

    #ui-datepicker-div td.ui-datepicker-current-day .ui-state-default,
    #ui-datepicker-div td .ui-state-active,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper li.ui-timepicker-selected,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list .ui-timepicker-selected {
        background: Highlight;
        box-shadow: none;
        color: HighlightText;
        forced-color-adjust: none;
    }

    /* Today and selected at once: the concentric ring is redrawn in the
       highlight's own text colour so the two states stay separable. */
    #ui-datepicker-div td.ui-datepicker-today.ui-datepicker-current-day .ui-state-default,
    #ui-datepicker-div td.ui-datepicker-today .ui-state-active {
        outline: 2px solid HighlightText;
        outline-offset: -4px;
    }

    #ui-datepicker-div td.ui-datepicker-days-cell-over .ui-state-default,
    #ui-datepicker-div td .ui-state-default:focus-visible {
        outline-color: CanvasText;
    }

    #ui-datepicker-div td.ui-state-disabled .ui-state-default,
    #ui-datepicker-div td.ui-datepicker-unselectable .ui-state-default,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper .ui-timepicker-list li.ui-timepicker-disabled {
        color: GrayText;
    }
}

/* A panel that happens to be open when the page is printed would otherwise land
   in the middle of the printed form. Both libraries write display inline as
   they open, so this is the one place !important is unavoidable. */
@media print {

    #ui-datepicker-div,
    .ui-timepicker-wrapper.ui-timepicker-wrapper.ui-timepicker-wrapper {
        display: none !important;
    }
}

.hf-hashform-block {
    --hf-form-title-spacing: var(--hf-form-title-spacing-bottom);
    --hf-form-desc-spacing: var(--hf-form-desc-spacing-bottom);
    --hf-label-spacing: var(--hf-label-spacing-bottom);
    --hf-desc-spacing: var(--hf-desc-spacing-top);
}

.hf-hashform-block.hf-form-custom-style .hf-form-description {
    font-family: var(--hf-form-desc-typo-font-family);
    font-size: var(--hf-form-desc-typo-font-size, 16px);
    font-weight: var(--hf-form-desc-typo-font-weight, 400);
    font-style: var(--hf-form-desc-typo-font-style, normal);
    letter-spacing: var(--hf-form-desc-typo-letter-spacing, normal);
    text-transform: var(--hf-form-desc-typo-text-transform, inherit);
    text-decoration: var(--hf-form-desc-typo-text-decoration, inherit);
    line-height: var(--hf-form-desc-typo-line-height, 1.2);
    color: var(--hf-form-desc-typo-font-color, #666);
}

.hf-hashform-block.hf-form-custom-style .hf-form-field.hashform-field-type-paragraph {
    font-family: var(--hf-paragraph-typo-font-family);
    font-size: var(--hf-paragraph-typo-font-size, 13px);
    font-weight: var(--hf-paragraph-typo-font-weight, 400);
    font-style: var(--hf-paragraph-typo-font-style, normal);
    letter-spacing: var(--hf-paragraph-typo-letter-spacing, normal);
    text-transform: var(--hf-paragraph-typo-text-transform, inherit);
    text-decoration: var(--hf-paragraph-typo-text-decoration, inherit);
    line-height: var(--hf-paragraph-typo-line-height, 1.2);
    color: var(--hf-paragraph-typo-font-color, inherit);
}

@media screen and (max-width:1024px) {
    .hf-form-custom-style .hf-container .hf-field-label {
        font-size: var(--hf-label-typo-font-size-md, var(--hf-label-typo-font-size, 1em));
        letter-spacing: var(--hf-label-typo-letter-spacing-md, var(--hf-label-typo-letter-spacing, inherit));
        line-height: var(--hf-label-typo-line-height-md, var(--hf-label-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-container .hf-field-desc {
        font-size: var(--hf-desc-typo-font-size-md, var(--hf-desc-typo-font-size, 1em));
        letter-spacing: var(--hf-desc-typo-letter-spacing-md, var(--hf-desc-typo-letter-spacing, inherit));
        line-height: var(--hf-desc-typo-line-height-md, var(--hf-desc-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-container input[type="text"],
    .hf-form-custom-style .hf-container input[type="email"],
    .hf-form-custom-style .hf-container input[type="url"],
    .hf-form-custom-style .hf-container input[type="password"],
    .hf-form-custom-style .hf-container input[type="search"],
    .hf-form-custom-style .hf-container input[type="number"],
    .hf-form-custom-style .hf-container input[type="tel"],
    .hf-form-custom-style .hf-container input[type="range"],
    .hf-form-custom-style .hf-container input[type="date"],
    .hf-form-custom-style .hf-container input[type="month"],
    .hf-form-custom-style .hf-container input[type="week"],
    .hf-form-custom-style .hf-container input[type="time"],
    .hf-form-custom-style .hf-container input[type="datetime"],
    .hf-form-custom-style .hf-container input[type="datetime-local"],
    .hf-form-custom-style .hf-container input[type="color"],
    .hf-form-custom-style .hf-container textarea,
    .hf-form-custom-style .hf-container select {
        font-size: var(--hf-field-typo-font-size-md, var(--hf-field-typo-font-size, 1em));
        letter-spacing: var(--hf-field-typo-letter-spacing-md, var(--hf-field-typo-letter-spacing, inherit));
        line-height: var(--hf-field-typo-line-height-md, var(--hf-field-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-file-uploader .qq-upload-button {
        font-size: var(--hf-upload-typo-font-size-md, var(--hf-upload-typo-font-size, 1em));
        letter-spacing: var(--hf-upload-typo-letter-spacing-md, var(--hf-upload-typo-letter-spacing, inherit));
        line-height: var(--hf-upload-typo-line-height-md, var(--hf-upload-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-container button,
    .hf-form-custom-style .hf-container input[type="button"],
    .hf-form-custom-style .hf-container input[type="reset"],
    .hf-form-custom-style .hf-container input[type="submit"] {
        font-size: var(--hf-button-typo-font-size-md, var(--hf-button-typo-font-size, 1em));
        letter-spacing: var(--hf-button-typo-letter-spacing-md, var(--hf-button-typo-letter-spacing, inherit));
        line-height: var(--hf-button-typo-line-height-md, var(--hf-button-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-container .hf-error-msg {
        font-size: var(--hf-validation-typo-font-size-md, var(--hf-validation-typo-font-size, 1em));
        letter-spacing: var(--hf-validation-typo-letter-spacing-md, var(--hf-validation-typo-letter-spacing, inherit));
        line-height: var(--hf-validation-typo-line-height-md, var(--hf-validation-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-form-title {
        font-size: var(--hf-form-title-typo-font-size-md, var(--hf-form-title-typo-font-size, 1em));
        letter-spacing: var(--hf-form-title-typo-letter-spacing-md, var(--hf-form-title-typo-letter-spacing, inherit));
        line-height: var(--hf-form-title-typo-line-height-md, var(--hf-form-title-typo-line-height, inherit));
    }

    .hf-hashform-block.hf-form-custom-style .hf-form-description {
        font-size: var(--hf-form-desc-typo-font-size-md, var(--hf-form-desc-typo-font-size, 1em));
        letter-spacing: var(--hf-form-desc-typo-letter-spacing-md, var(--hf-form-desc-typo-letter-spacing, inherit));
        line-height: var(--hf-form-desc-typo-line-height-md, var(--hf-form-desc-typo-line-height, inherit));
    }

    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h1,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h2,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h3,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h4,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h5,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h6 {
        font-size: var(--hf-heading-typo-font-size-md, var(--hf-heading-typo-font-size, 1em));
        letter-spacing: var(--hf-heading-typo-letter-spacing-md, var(--hf-heading-typo-letter-spacing, inherit));
        line-height: var(--hf-heading-typo-line-height-md, var(--hf-heading-typo-line-height, inherit));
    }

    .hf-hashform-block.hf-form-custom-style .hf-form-field.hashform-field-type-paragraph {
        font-size: var(--hf-paragraph-typo-font-size-md, var(--hf-paragraph-typo-font-size, 1em));
        letter-spacing: var(--hf-paragraph-typo-letter-spacing-md, var(--hf-paragraph-typo-letter-spacing, inherit));
        line-height: var(--hf-paragraph-typo-line-height-md, var(--hf-paragraph-typo-line-height, inherit));
    }
}

@media screen and (max-width:767px) {

    /* Fields sit on a twelve column grid, and until now nothing collapsed it:
       two fields sharing a row stayed side by side on a phone, about 145px
       each on a 390px screen. .hf-grouped-field is the same grid one level
       down, holding the parts of an address or a name. The attribute
       selector out-weighs .hf-grid-N whatever order the rules end up in. */
    .hf-container > [class*="hf-grid-"],
    .hf-container .hf-grouped-field > [class*="hf-grid-"] {
        grid-column: span 12 / span 12;
    }

    .hf-form-custom-style .hf-container .hf-field-label {
        font-size: var(--hf-label-typo-font-size-sm, var(--hf-label-typo-font-size-md, var(--hf-label-typo-font-size, 1em)));
        letter-spacing: var(--hf-label-typo-letter-spacing-sm, var(--hf-label-typo-letter-spacing-md, var(--hf-label-typo-letter-spacing, inherit)));
        line-height: var(--hf-label-typo-line-height-sm, var(--hf-label-typo-line-height-md, var(--hf-label-typo-line-height, inherit)));
    }

    .hf-form-custom-style .hf-container .hf-field-desc {
        font-size: var(--hf-desc-typo-font-size-sm, var(--hf-desc-typo-font-size-md, var(--hf-desc-typo-font-size, 1em)));
        letter-spacing: var(--hf-desc-typo-letter-spacing-sm, var(--hf-desc-typo-letter-spacing-md, var(--hf-desc-typo-letter-spacing, inherit)));
        line-height: var(--hf-desc-typo-line-height-sm, var(--hf-desc-typo-line-height-md, var(--hf-desc-typo-line-height, inherit)));
    }

    .hf-form-custom-style .hf-container input[type="text"],
    .hf-form-custom-style .hf-container input[type="email"],
    .hf-form-custom-style .hf-container input[type="url"],
    .hf-form-custom-style .hf-container input[type="password"],
    .hf-form-custom-style .hf-container input[type="search"],
    .hf-form-custom-style .hf-container input[type="number"],
    .hf-form-custom-style .hf-container input[type="tel"],
    .hf-form-custom-style .hf-container input[type="range"],
    .hf-form-custom-style .hf-container input[type="date"],
    .hf-form-custom-style .hf-container input[type="month"],
    .hf-form-custom-style .hf-container input[type="week"],
    .hf-form-custom-style .hf-container input[type="time"],
    .hf-form-custom-style .hf-container input[type="datetime"],
    .hf-form-custom-style .hf-container input[type="datetime-local"],
    .hf-form-custom-style .hf-container input[type="color"],
    .hf-form-custom-style .hf-container textarea,
    .hf-form-custom-style .hf-container select {
        font-size: var(--hf-field-typo-font-size-sm, var(--hf-field-typo-font-size-md, var(--hf-field-typo-font-size, 1em)));
        letter-spacing: var(--hf-field-typo-letter-spacing-sm, var(--hf-field-typo-letter-spacing-md, var(--hf-field-typo-letter-spacing, inherit)));
        line-height: var(--hf-field-typo-line-height-sm, var(--hf-field-typo-line-height-md, var(--hf-field-typo-line-height, inherit)));
    }

    .hf-form-custom-style .hf-file-uploader .qq-upload-button {
        font-size: var(--hf-upload-typo-font-size-sm, var(--hf-upload-typo-font-size-md, var(--hf-upload-typo-font-size, 1em)));
        letter-spacing: var(--hf-upload-typo-letter-spacing-sm, var(--hf-upload-typo-letter-spacing-md, var(--hf-upload-typo-letter-spacing, inherit)));
        line-height: var(--hf-upload-typo-line-height-sm, var(--hf-upload-typo-line-height-md, var(--hf-upload-typo-line-height, inherit)));
    }

    .hf-form-custom-style .hf-container button,
    .hf-form-custom-style .hf-container input[type="button"],
    .hf-form-custom-style .hf-container input[type="reset"],
    .hf-form-custom-style .hf-container input[type="submit"] {
        font-size: var(--hf-button-typo-font-size-sm, var(--hf-button-typo-font-size-md, var(--hf-button-typo-font-size, 1em)));
        letter-spacing: var(--hf-button-typo-letter-spacing-sm, var(--hf-button-typo-letter-spacing-md, var(--hf-button-typo-letter-spacing, inherit)));
        line-height: var(--hf-button-typo-line-height-sm, var(--hf-button-typo-line-height-md, var(--hf-button-typo-line-height, inherit)))
    }

    .hf-form-custom-style .hf-container .hf-error-msg {
        font-size: var(--hf-validation-typo-font-size-sm, var(--hf-validation-typo-font-size-md, var(--hf-validation-typo-font-size, 1em)));
        letter-spacing: var(--hf-validation-typo-letter-spacing-sm, var(--hf-validation-typo-letter-spacing-md, var(--hf-validation-typo-letter-spacing, inherit)));
        line-height: var(--hf-validation-typo-line-height-sm, var(--hf-validation-typo-line-height-md, var(--hf-validation-typo-line-height, inherit)));
    }

    .hf-form-custom-style .hf-form-title {
        font-size: var(--hf-form-title-typo-font-size-sm, var(--hf-form-title-typo-font-size-md, var(--hf-form-title-typo-font-size, 1em)));
        letter-spacing: var(--hf-form-title-typo-letter-spacing-sm, var(--hf-form-title-typo-letter-spacing-md, var(--hf-form-title-typo-letter-spacing, inherit)));
        line-height: var(--hf-form-title-typo-line-height-sm, var(--hf-form-title-typo-line-height-md, var(--hf-form-title-typo-line-height, inherit)));
    }

    .hf-hashform-block.hf-form-custom-style .hf-form-description {
        font-size: var(--hf-form-desc-typo-font-size-sm, var(--hf-form-desc-typo-font-size-md, var(--hf-form-desc-typo-font-size, 1em)));
        letter-spacing: var(--hf-form-desc-typo-letter-spacing-sm, var(--hf-form-desc-typo-letter-spacing-md, var(--hf-form-desc-typo-letter-spacing, inherit)));
        line-height: var(--hf-form-desc-typo-line-height-sm, var(--hf-form-desc-typo-line-height-md, var(--hf-form-desc-typo-line-height, inherit)))
    }

    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h1,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h2,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h3,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h4,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h5,
    .hf-form-custom-style .hf-form-field.hashform-field-type-heading h6 {
        font-size: var(--hf-heading-typo-font-size-sm, var(--hf-heading-typo-font-size-md, var(--hf-heading-typo-font-size, 1em)));
        letter-spacing: var(--hf-heading-typo-letter-spacing-sm, var(--hf-heading-typo-letter-spacing-md, var(--hf-heading-typo-letter-spacing, inherit)));
        line-height: var(--hf-heading-typo-line-height-sm, var(--hf-heading-typo-line-height-md, var(--hf-heading-typo-line-height, inherit)));
    }

    .hf-hashform-block.hf-form-custom-style .hf-form-field.hashform-field-type-paragraph {
        font-size: var(--hf-paragraph-typo-font-size-sm, var(--hf-paragraph-typo-font-size-md, var(--hf-paragraph-typo-font-size, 1em)));
        letter-spacing: var(--hf-paragraph-typo-letter-spacing-sm, var(--hf-paragraph-typo-letter-spacing-md, var(--hf-paragraph-typo-letter-spacing, inherit)));
        line-height: var(--hf-paragraph-typo-line-height-sm, var(--hf-paragraph-typo-line-height-md, var(--hf-paragraph-typo-line-height, inherit)));
    }
}

body > .hf-form-tempate {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
}
/* Shown in place of a form that is closed, full or login-only. */
.hf-form-closed-msg {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    color: #50575e;
    padding: 16px 20px;
}