.brxe-form, .bricks-search-form, .brxe-post-comments { width: 100%; } .form--light .form-group, .form--light .bricks-search-form .form-group, .form--light .brxe-post-comments .form-group, .form--dark .form-group, .form--dark .bricks-search-form .form-group, .form--dark .brxe-post-comments .form-group { padding: 0; } .form--light .form-group:not(.submit-button-wrapper), .form--light .bricks-search-form .form-group:not(.submit-button-wrapper), .form--light .brxe-post-comments .form-group:not(.submit-button-wrapper), .form--dark .form-group:not(.submit-button-wrapper), .form--dark .bricks-search-form .form-group:not(.submit-button-wrapper), .form--dark .brxe-post-comments .form-group:not(.submit-button-wrapper) { margin-block-end: var(--wsf-form-grid-gap); } .form--light .message, .form--light .bricks-search-form .message, .form--light .brxe-post-comments .message, .form--dark .message, .form--dark .bricks-search-form .message, .form--dark .brxe-post-comments .message { margin-block-start: var(--wsf-form-grid-gap); }  .form--light input[type="date"], .form--light input[type="datetime-local"], .form--light input[type="month"], .form--light input[type="password"], .form--light input[type="search"], .form--light input[type="time"], .form--light input[type="week"], .form--light input[type="email"], .form--light input[type="number"], .form--light input[type="tel"], .form--light input[type="text"], .form--light input[type="url"], .form--light select:not([multiple]):not([size]), .form--light .bricks-search-form input[type="date"], .form--light .bricks-search-form input[type="datetime-local"], .form--light .bricks-search-form input[type="month"], .form--light .bricks-search-form input[type="password"], .form--light .bricks-search-form input[type="search"], .form--light .bricks-search-form input[type="time"], .form--light .bricks-search-form input[type="week"], .form--light .bricks-search-form input[type="email"], .form--light .bricks-search-form input[type="number"], .form--light .bricks-search-form input[type="tel"], .form--light .bricks-search-form input[type="text"], .form--light .bricks-search-form input[type="url"], .form--light .bricks-search-form select:not([multiple]):not([size]), .form--light .brxe-post-comments input[type="date"], .form--light .brxe-post-comments input[type="datetime-local"], .form--light .brxe-post-comments input[type="month"], .form--light .brxe-post-comments input[type="password"], .form--light .brxe-post-comments input[type="search"], .form--light .brxe-post-comments input[type="time"], .form--light .brxe-post-comments input[type="week"], .form--light .brxe-post-comments input[type="email"], .form--light .brxe-post-comments input[type="number"], .form--light .brxe-post-comments input[type="tel"], .form--light .brxe-post-comments input[type="text"], .form--light .brxe-post-comments input[type="url"], .form--light .brxe-post-comments select:not([multiple]):not([size]), .form--dark input[type="date"], .form--dark input[type="datetime-local"], .form--dark input[type="month"], .form--dark input[type="password"], .form--dark input[type="search"], .form--dark input[type="time"], .form--dark input[type="week"], .form--dark input[type="email"], .form--dark input[type="number"], .form--dark input[type="tel"], .form--dark input[type="text"], .form--dark input[type="url"], .form--dark select:not([multiple]):not([size]), .form--dark .bricks-search-form input[type="date"], .form--dark .bricks-search-form input[type="datetime-local"], .form--dark .bricks-search-form input[type="month"], .form--dark .bricks-search-form input[type="password"], .form--dark .bricks-search-form input[type="search"], .form--dark .bricks-search-form input[type="time"], .form--dark .bricks-search-form input[type="week"], .form--dark .bricks-search-form input[type="email"], .form--dark .bricks-search-form input[type="number"], .form--dark .bricks-search-form input[type="tel"], .form--dark .bricks-search-form input[type="text"], .form--dark .bricks-search-form input[type="url"], .form--dark .bricks-search-form select:not([multiple]):not([size]), .form--dark .brxe-post-comments input[type="date"], .form--dark .brxe-post-comments input[type="datetime-local"], .form--dark .brxe-post-comments input[type="month"], .form--dark .brxe-post-comments input[type="password"], .form--dark .brxe-post-comments input[type="search"], .form--dark .brxe-post-comments input[type="time"], .form--dark .brxe-post-comments input[type="week"], .form--dark .brxe-post-comments input[type="email"], .form--dark .brxe-post-comments input[type="number"], .form--dark .brxe-post-comments input[type="tel"], .form--dark .brxe-post-comments input[type="text"], .form--dark .brxe-post-comments input[type="url"], .form--dark .brxe-post-comments select:not([multiple]):not([size]) { height: var(--wsf-field-height); }  .form--light label:not(.ff-el-form-check-label), .form--light div.label, .form--light .bricks-search-form label:not(.ff-el-form-check-label), .form--light .bricks-search-form div.label, .form--light .brxe-post-comments label:not(.ff-el-form-check-label), .form--light .brxe-post-comments div.label { background-color: transparent; color: var(--wsf-field-label-color); font-size: var(--wsf-field-label-font-size); font-style: var(--wsf-field-label-font-style); font-weight: var(--wsf-field-label-font-weight); letter-spacing: var(--wsf-field-label-letter-spacing); line-height: var(--wsf-field-label-line-height); margin-block-end: var(--wsf-field-label-gap); text-decoration: var(--wsf-field-label-text-decoration); text-transform: var(--wsf-field-label-text-transform); } .form--light .required:after, .form--light .bricks-search-form .required:after, .form--light .brxe-post-comments .required:after { color: var(--wsf-form-color-danger); }  .form--dark label:not(.ff-el-form-check-label), .form--dark div.label, .form--dark .bricks-search-form label:not(.ff-el-form-check-label), .form--dark .bricks-search-form div.label, .form--dark .brxe-post-comments label:not(.ff-el-form-check-label), .form--dark .brxe-post-comments div.label { background-color: transparent; color: var(--wsf-form-color-base-contrast); font-size: var(--wsf-field-label-font-size); font-style: var(--wsf-field-label-font-style); font-weight: var(--wsf-field-label-font-weight); letter-spacing: var(--wsf-field-label-letter-spacing); line-height: var(--wsf-field-label-line-height); margin-block-end: var(--wsf-field-label-gap); text-decoration: var(--wsf-field-label-text-decoration); text-transform: var(--wsf-field-label-text-transform); } .form--dark .required:after, .form--dark .bricks-search-form .required:after, .form--dark .brxe-post-comments .required:after { color: var(--wsf-form-color-danger); }  .form--light legend, .form--light .bricks-search-form legend, .form--light .brxe-post-comments legend { color: var(--wsf-section-legend-color); font-size: var(--wsf-section-legend-font-size); font-style: var(--wsf-section-legend-font-style); font-weight: var(--wsf-section-legend-font-weight); line-height: var(--wsf-section-legend-line-height); margin-bottom: var(--wsf-section-legend-gap); text-decoration: var(--wsf-section-legend-text-decoration); text-transform: var(--wsf-section-legend-text-transform); border: none; } .form--dark legend, .form--dark .bricks-search-form legend, .form--dark .brxe-post-comments legend { color: var(--wsf-form-color-base-contrast); font-size: var(--wsf-section-legend-font-size); font-style: var(--wsf-section-legend-font-style); font-weight: var(--wsf-section-legend-font-weight); line-height: var(--wsf-section-legend-line-height); margin-bottom: var(--wsf-section-legend-gap); text-decoration: var(--wsf-section-legend-text-decoration); text-transform: var(--wsf-section-legend-text-transform); border: none; }  .form--light .input, .form--light input:not([type="submit"]), .form--light select, .form--light textarea, .form--light .bricks-search-form .input, .form--light .bricks-search-form input:not([type="submit"]), .form--light .bricks-search-form select, .form--light .bricks-search-form textarea, .form--light .brxe-post-comments .input, .form--light .brxe-post-comments input:not([type="submit"]), .form--light .brxe-post-comments select, .form--light .brxe-post-comments textarea { background-color: var(--wsf-field-color-background); border-width: var(--wsf-field-border-width); border-style: var(--wsf-field-border-style); border-color: var(--wsf-field-border-color); border-radius: var(--wsf-field-border-radius); color: var(--wsf-field-color); font-size: var(--wsf-field-font-size); font-style: var(--wsf-field-font-style); font-weight: var(--wsf-field-font-weight); letter-spacing: var(--wsf-field-letter-spacing); line-height: var(--wsf-field-line-height); text-decoration: var(--wsf-field-text-decoration); text-transform: var(--wsf-field-text-transform); padding: var(--wsf-field-padding-vertical) var(--wsf-field-padding-horizontal); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); } .form--light .input:hover:not([data-wsf-legal]), .form--light .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light select:hover:not([data-wsf-legal]), .form--light select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light textarea:hover:not([data-wsf-legal]), .form--light textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:not([data-wsf-legal]), .form--light .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form select:hover:not([data-wsf-legal]), .form--light .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--light .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--light .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--light .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:not([data-wsf-legal]), .form--light .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--light .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--wsf-field-color-background-hover); border-color: var(--wsf-field-border-color-hover); color: var(--wsf-field-color-hover); } .form--light .input:focus, .form--light input:not([type="submit"]):focus, .form--light select:focus, .form--light textarea:focus, .form--light .bricks-search-form .input:focus, .form--light .bricks-search-form input:not([type="submit"]):focus, .form--light .bricks-search-form select:focus, .form--light .bricks-search-form textarea:focus, .form--light .brxe-post-comments .input:focus, .form--light .brxe-post-comments input:not([type="submit"]):focus, .form--light .brxe-post-comments select:focus, .form--light .brxe-post-comments textarea:focus { outline: none; background-color: var(--wsf-field-color-background-focus); border-color: var(--wsf-field-border-color-focus); color: var(--wsf-field-color-focus); box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); }  .form--dark .input, .form--dark input:not([type="submit"]), .form--dark select, .form--dark textarea, .form--dark .bricks-search-form .input, .form--dark .bricks-search-form input:not([type="submit"]), .form--dark .bricks-search-form select, .form--dark .bricks-search-form textarea, .form--dark .brxe-post-comments .input, .form--dark .brxe-post-comments input:not([type="submit"]), .form--dark .brxe-post-comments select, .form--dark .brxe-post-comments textarea { background-color: var(--wsf-field-color-background); border-width: var(--wsf-field-border-width); border-style: var(--wsf-field-border-style); border-color: var(--wsf-field-border-color); border-radius: var(--wsf-field-border-radius); color: var(--wsf-field-color); font-size: var(--wsf-field-font-size); font-style: var(--wsf-field-font-style); font-weight: var(--wsf-field-font-weight); letter-spacing: var(--wsf-field-letter-spacing); line-height: var(--wsf-field-line-height); text-decoration: var(--wsf-field-text-decoration); text-transform: var(--wsf-field-text-transform); padding: var(--wsf-field-padding-vertical) var(--wsf-field-padding-horizontal); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); } .form--dark .input:hover:not([data-wsf-legal]), .form--dark .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark select:hover:not([data-wsf-legal]), .form--dark select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark textarea:hover:not([data-wsf-legal]), .form--dark textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:not([data-wsf-legal]), .form--dark .bricks-search-form .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .bricks-search-form input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:not([data-wsf-legal]), .form--dark .bricks-search-form select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:not([data-wsf-legal]), .form--dark .bricks-search-form textarea:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments .input:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:not([data-wsf-legal]), .form--dark .brxe-post-comments input:not([type="submit"]):hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments select:hover:enabled:not(:focus):not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:not([data-wsf-legal]), .form--dark .brxe-post-comments textarea:hover:enabled:not(:focus):not([data-wsf-legal]) { background-color: var(--wsf-field-color-background-hover); border-color: var(--wsf-field-border-color-hover); color: var(--wsf-field-color-hover); } .form--dark .input:focus, .form--dark input:not([type="submit"]):focus, .form--dark select:focus, .form--dark textarea:focus, .form--dark .bricks-search-form .input:focus, .form--dark .bricks-search-form input:not([type="submit"]):focus, .form--dark .bricks-search-form select:focus, .form--dark .bricks-search-form textarea:focus, .form--dark .brxe-post-comments .input:focus, .form--dark .brxe-post-comments input:not([type="submit"]):focus, .form--dark .brxe-post-comments select:focus, .form--dark .brxe-post-comments textarea:focus { outline: none; background-color: var(--wsf-field-color-background-focus); border-color: var(--wsf-field-border-color-focus); color: var(--wsf-field-color-focus); box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); }  .form--light .input::placeholder, .form--light input:not([type="submit"])::placeholder, .form--light select::placeholder, .form--light textarea::placeholder, .form--light .bricks-search-form .input::placeholder, .form--light .bricks-search-form input:not([type="submit"])::placeholder, .form--light .bricks-search-form select::placeholder, .form--light .bricks-search-form textarea::placeholder, .form--light .brxe-post-comments .input::placeholder, .form--light .brxe-post-comments input:not([type="submit"])::placeholder, .form--light .brxe-post-comments select::placeholder, .form--light .brxe-post-comments textarea::placeholder { color: var(--wsf-field-color-placeholder); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); } .form--dark .input::placeholder, .form--dark input:not([type="submit"])::placeholder, .form--dark select::placeholder, .form--dark textarea::placeholder, .form--dark .bricks-search-form .input::placeholder, .form--dark .bricks-search-form input:not([type="submit"])::placeholder, .form--dark .bricks-search-form select::placeholder, .form--dark .bricks-search-form textarea::placeholder, .form--dark .brxe-post-comments .input::placeholder, .form--dark .brxe-post-comments input:not([type="submit"])::placeholder, .form--dark .brxe-post-comments select::placeholder, .form--dark .brxe-post-comments textarea::placeholder { color: var(--wsf-field-color-placeholder); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); }  .form--light textarea, .form--light .bricks-search-form textarea, .form--light .brxe-post-comments textarea, .form--dark textarea, .form--dark .bricks-search-form textarea, .form--dark .brxe-post-comments textarea { min-height: 8rem; resize: vertical; }  .form--light select, .form--light .bricks-search-form select, .form--light .brxe-post-comments select { background-image: none; cursor: pointer; appearance: none; } .form--light select:not(:has(+ span)), .form--light .bricks-search-form select:not(:has(+ span)), .form--light .brxe-post-comments select:not(:has(+ span)) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline fill='none' stroke='%23717171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' points='1,1.5 6,6.5 11,1.5'/%3E%3C/svg%3E"); background-position: right var(--wsf-field-padding-horizontal, 1em) center; background-repeat: no-repeat; background-size: 12px 8px; padding-right: calc(var(--wsf-field-padding-horizontal, 1em) + 24px); } .form--dark select, .form--dark .bricks-search-form select, .form--dark .brxe-post-comments select { background-image: none; cursor: pointer; appearance: none; } .form--dark select:not(:has(+ span)), .form--dark .bricks-search-form select:not(:has(+ span)), .form--dark .brxe-post-comments select:not(:has(+ span)) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline fill='none' stroke='%23b0b0b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' points='1,1.5 6,6.5 11,1.5'/%3E%3C/svg%3E"); background-position: right var(--wsf-field-padding-horizontal, 1em) center; background-repeat: no-repeat; background-size: 12px 8px; padding-right: calc(var(--wsf-field-padding-horizontal, 1em) + 24px); }  .form--light .bricks-button, .form--light .bricks-search-form .bricks-button, .form--light .brxe-post-comments .bricks-button { background: var(--wsf-form-color-primary); color: var(--wsf-form-color-base-contrast); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--wsf-form-font-size); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--wsf-field-border-radius); border-color: var(--wsf-form-color-primary); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .form--light .bricks-button:hover, .form--light .bricks-search-form .bricks-button:hover, .form--light .brxe-post-comments .bricks-button:hover { background: var(--primary-hover); color: var(--wsf-form-color-base-contrast); border-color: var(--primary-hover); } } .form--light .bricks-button:focus, .form--light .bricks-search-form .bricks-button:focus, .form--light .brxe-post-comments .bricks-button:focus { outline: none; box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); } .form--light .bricks-button.bricks-background-secondary, .form--light .bricks-search-form .bricks-button.bricks-background-secondary, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary { background: var(--wsf-form-color-secondary); border-color: var(--wsf-form-color-secondary); } @media (hover: hover) and (pointer: fine) { .form--light .bricks-button.bricks-background-secondary:hover, .form--light .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--light .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background: var(--secondary-hover, var(--wsf-form-color-secondary)); border-color: var(--secondary-hover, var(--wsf-form-color-secondary)); opacity: 0.9; } }  .form--dark .bricks-button, .form--dark .bricks-search-form .bricks-button, .form--dark .brxe-post-comments .bricks-button { background: var(--wsf-form-color-primary); color: var(--wsf-form-color-base-contrast); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--wsf-form-font-size); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--wsf-field-border-radius); border-color: var(--wsf-form-color-primary); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .form--dark .bricks-button:hover, .form--dark .bricks-search-form .bricks-button:hover, .form--dark .brxe-post-comments .bricks-button:hover { background: var(--primary-hover); color: var(--wsf-form-color-base-contrast); border-color: var(--primary-hover); } } .form--dark .bricks-button:focus, .form--dark .bricks-search-form .bricks-button:focus, .form--dark .brxe-post-comments .bricks-button:focus { outline: none; box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); } .form--dark .bricks-button.bricks-background-secondary, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary { background: var(--wsf-form-color-secondary); border-color: var(--wsf-form-color-secondary); } @media (hover: hover) and (pointer: fine) { .form--dark .bricks-button.bricks-background-secondary:hover, .form--dark .bricks-search-form .bricks-button.bricks-background-secondary:hover, .form--dark .brxe-post-comments .bricks-button.bricks-background-secondary:hover { background: var(--secondary-hover, var(--wsf-form-color-secondary)); border-color: var(--secondary-hover, var(--wsf-form-color-secondary)); opacity: 0.9; } }  .form--light input[type="file"], .form--light .bricks-search-form input[type="file"], .form--light .brxe-post-comments input[type="file"], .form--dark input[type="file"], .form--dark .bricks-search-form input[type="file"], .form--dark .brxe-post-comments input[type="file"] { padding: 0; } .form--light .choose-files, .form--light .bricks-search-form .choose-files, .form--light .brxe-post-comments .choose-files, .form--dark .choose-files, .form--dark .bricks-search-form .choose-files, .form--dark .brxe-post-comments .choose-files { background: var(--wsf-form-color-primary); color: var(--wsf-form-color-base-contrast); padding-block: var(--btn-padding-block); padding-inline: var(--btn-padding-inline); min-inline-size: var(--btn-min-width); line-height: var(--btn-line-height); font-size: var(--wsf-form-font-size); font-weight: var(--btn-font-weight); font-style: var(--btn-font-style); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); text-decoration: var(--btn-text-decoration); border-width: var(--btn-border-width); border-style: var(--btn-border-style); border-radius: var(--wsf-field-border-radius); border-color: var(--wsf-form-color-primary); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); justify-content: var(--btn-justify-content, center); text-align: var(--btn-text-align, center); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .form--light .choose-files:hover, .form--light .bricks-search-form .choose-files:hover, .form--light .brxe-post-comments .choose-files:hover, .form--dark .choose-files:hover, .form--dark .bricks-search-form .choose-files:hover, .form--dark .brxe-post-comments .choose-files:hover { background: var(--primary-hover); color: var(--wsf-form-color-base-contrast); border-color: var(--primary-hover); } } .form--light .choose-files:focus, .form--light .bricks-search-form .choose-files:focus, .form--light .brxe-post-comments .choose-files:focus, .form--dark .choose-files:focus, .form--dark .bricks-search-form .choose-files:focus, .form--dark .brxe-post-comments .choose-files:focus { outline: none; box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); } .form--light .file-result.show, .form--light .bricks-search-form .file-result.show, .form--light .brxe-post-comments .file-result.show, .form--dark .file-result.show, .form--dark .bricks-search-form .file-result.show, .form--dark .brxe-post-comments .file-result.show { font-size: var(--wsf-field-label-font-size); font-weight: var(--wsf-field-label-font-weight); line-height: var(--wsf-field-label-line-height); transition: var(--wsf-form-transition-speed) var(--wsf-form-transition-timing-function); } .form--light .file-result.show .remove:hover, .form--light .bricks-search-form .file-result.show .remove:hover, .form--light .brxe-post-comments .file-result.show .remove:hover, .form--dark .file-result.show .remove:hover, .form--dark .bricks-search-form .file-result.show .remove:hover, .form--dark .brxe-post-comments .file-result.show .remove:hover { background-color: var(--primary-hover); color: var(--wsf-form-color-base-contrast); border-color: var(--primary-hover); }  .form--light input[type="radio"], .form--light .bricks-search-form input[type="radio"], .form--light .brxe-post-comments input[type="radio"], .form--dark input[type="radio"], .form--dark .bricks-search-form input[type="radio"], .form--dark .brxe-post-comments input[type="radio"] { width: 1.4em; height: 1.4em; min-width: 1.4em; accent-color: var(--wsf-field-radio-checked-color, var(--primary)); cursor: pointer; } .form--light input[type="radio"] + label, .form--light .bricks-search-form input[type="radio"] + label, .form--light .brxe-post-comments input[type="radio"] + label { background-color: transparent; display: inline-block; color: var(--wsf-field-label-color); font-family: inherit; font-size: var(--wsf-field-font-size); font-weight: var(--wsf-field-font-weight); line-height: var(--wsf-field-line-height); margin: 0; padding-inline-start: var(--wsf-field-radio-gap-horizontal, 0.5em); cursor: pointer; } .form--dark input[type="radio"] + label, .form--dark .bricks-search-form input[type="radio"] + label, .form--dark .brxe-post-comments input[type="radio"] + label { background-color: transparent; display: inline-block; color: var(--wsf-form-color-base-contrast); font-family: inherit; font-size: var(--wsf-field-font-size); font-weight: var(--wsf-field-font-weight); line-height: var(--wsf-field-line-height); margin: 0; padding-inline-start: var(--wsf-field-radio-gap-horizontal, 0.5em); cursor: pointer; }  .form--light .options-wrapper li, .form--light .bricks-search-form .options-wrapper li, .form--light .brxe-post-comments .options-wrapper li { position: relative; } .form--light .options-wrapper li + li, .form--light .bricks-search-form .options-wrapper li + li, .form--light .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--wsf-field-checkbox-gap-vertical, 0.5em); } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--light .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--wsf-form-color-primary); box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); outline: 0; } .form--light input[type="checkbox"] + label, .form--light .bricks-search-form input[type="checkbox"] + label, .form--light .brxe-post-comments input[type="checkbox"] + label { background-color: unset; display: block; position: relative; color: var(--wsf-field-label-color); font-family: inherit; font-size: var(--wsf-field-font-size); font-weight: var(--wsf-field-font-weight); line-height: var(--wsf-field-line-height); margin: 0; padding-inline-start: calc(1.4em + var(--wsf-field-checkbox-gap-horizontal, 0.5em)); cursor: pointer; } .form--light input[type="checkbox"] + label:before, .form--light .bricks-search-form input[type="checkbox"] + label:before, .form--light .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--wsf-field-border-color); border-radius: var(--wsf-field-checkbox-border-radius, 0.2em); position: absolute; inset-block-start: 0; inset-inline-start: 0; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--wsf-field-checkbox-color-background, transparent); } .form--light input[type="checkbox"]:hover + label:before, .form--light .bricks-search-form input[type="checkbox"]:hover + label:before, .form--light .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--wsf-field-checkbox-checked-color-background); box-shadow: inset 0px 0px 0px 2px transparent; } .form--light input[type="checkbox"]:checked + label:before, .form--light .bricks-search-form input[type="checkbox"]:checked + label:before, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--wsf-field-checkbox-checked-color-background); box-shadow: 0 0 0 1px var(--wsf-field-border-color); } .form--light input[type="checkbox"]:checked + label:after, .form--light .bricks-search-form input[type="checkbox"]:checked + label:after, .form--light .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.4em; width: 1.4em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; }  .form--dark .options-wrapper li, .form--dark .bricks-search-form .options-wrapper li, .form--dark .brxe-post-comments .options-wrapper li { position: relative; } .form--dark .options-wrapper li + li, .form--dark .bricks-search-form .options-wrapper li + li, .form--dark .brxe-post-comments .options-wrapper li + li { margin-block-start: var(--wsf-field-checkbox-gap-vertical, 0.5em); } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input), .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) { width: 0px; height: 0px; padding: 0; margin: 0; opacity: 0; position: absolute; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus { outline: none; } .form--dark input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .bricks-search-form input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input):focus + label:before { border-color: var(--wsf-form-color-primary); box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-field-box-shadow-color-focus); outline: 0; } .form--dark input[type="checkbox"] + label, .form--dark .bricks-search-form input[type="checkbox"] + label, .form--dark .brxe-post-comments input[type="checkbox"] + label { background-color: unset; display: block; position: relative; color: var(--wsf-form-color-base-contrast); font-family: inherit; font-size: var(--wsf-field-font-size); font-weight: var(--wsf-field-font-weight); line-height: var(--wsf-field-line-height); margin: 0; padding-inline-start: calc(1.4em + var(--wsf-field-checkbox-gap-horizontal, 0.5em)); cursor: pointer; } .form--dark input[type="checkbox"] + label:before, .form--dark .bricks-search-form input[type="checkbox"] + label:before, .form--dark .brxe-post-comments input[type="checkbox"] + label:before { content: ""; display: block; width: 1.4em; height: 1.4em; border: 1px solid var(--wsf-field-border-color); border-radius: var(--wsf-field-checkbox-border-radius, 0.2em); position: absolute; inset-block-start: 0; inset-inline-start: 0; transition: all 0.2s, background 0.2s ease-in-out; background-color: var(--wsf-field-checkbox-color-background, transparent); } .form--dark input[type="checkbox"]:hover + label:before, .form--dark .bricks-search-form input[type="checkbox"]:hover + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:hover + label:before { background: var(--wsf-field-checkbox-checked-color-background); box-shadow: inset 0px 0px 0px 2px transparent; } .form--dark input[type="checkbox"]:checked + label:before, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:before, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:before { background: var(--wsf-field-checkbox-checked-color-background); box-shadow: 0 0 0 1px var(--wsf-field-border-color); } .form--dark input[type="checkbox"]:checked + label:after, .form--dark .bricks-search-form input[type="checkbox"]:checked + label:after, .form--dark .brxe-post-comments input[type="checkbox"]:checked + label:after { content: ""; cursor: pointer; display: inline-block; height: 1.4em; width: 1.4em; position: absolute; inset-block-start: 0; inset-inline-start: 0; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") 50% no-repeat; background-size: 50%; }  .form--light .help-text, .form--light .form-helper, .form--light .description, .form--light .bricks-search-form .help-text, .form--light .bricks-search-form .form-helper, .form--light .bricks-search-form .description, .form--light .brxe-post-comments .help-text, .form--light .brxe-post-comments .form-helper, .form--light .brxe-post-comments .description, .form--dark .help-text, .form--dark .form-helper, .form--dark .description, .form--dark .bricks-search-form .help-text, .form--dark .bricks-search-form .form-helper, .form--dark .bricks-search-form .description, .form--dark .brxe-post-comments .help-text, .form--dark .brxe-post-comments .form-helper, .form--dark .brxe-post-comments .description { display: block; color: var(--wsf-field-help-color); background-color: var(--wsf-field-help-color-background); font-size: var(--wsf-field-help-font-size); font-style: var(--wsf-field-help-font-style); font-weight: var(--wsf-field-help-font-weight); line-height: var(--wsf-field-help-line-height); text-decoration: var(--wsf-field-help-text-decoration); text-transform: var(--wsf-field-help-text-transform); margin-top: var(--wsf-field-help-gap); }  .form--light input.error, .form--light textarea.error, .form--light select.error, .form--light .bricks-search-form input.error, .form--light .bricks-search-form textarea.error, .form--light .bricks-search-form select.error, .form--light .brxe-post-comments input.error, .form--light .brxe-post-comments textarea.error, .form--light .brxe-post-comments select.error, .form--dark input.error, .form--dark textarea.error, .form--dark select.error, .form--dark .bricks-search-form input.error, .form--dark .bricks-search-form textarea.error, .form--dark .bricks-search-form select.error, .form--dark .brxe-post-comments input.error, .form--dark .brxe-post-comments textarea.error, .form--dark .brxe-post-comments select.error { border-color: var(--wsf-field-border-color-invalid); background-color: var(--wsf-field-color-background-invalid); color: var(--wsf-field-color-invalid); } .form--light input.error:focus, .form--light textarea.error:focus, .form--light select.error:focus, .form--light .bricks-search-form input.error:focus, .form--light .bricks-search-form textarea.error:focus, .form--light .bricks-search-form select.error:focus, .form--light .brxe-post-comments input.error:focus, .form--light .brxe-post-comments textarea.error:focus, .form--light .brxe-post-comments select.error:focus, .form--dark input.error:focus, .form--dark textarea.error:focus, .form--dark select.error:focus, .form--dark .bricks-search-form input.error:focus, .form--dark .bricks-search-form textarea.error:focus, .form--dark .bricks-search-form select.error:focus, .form--dark .brxe-post-comments input.error:focus, .form--dark .brxe-post-comments textarea.error:focus, .form--dark .brxe-post-comments select.error:focus { box-shadow: 0 0 0 var(--wsf-field-box-shadow-width-focus) var(--wsf-form-color-danger); } .form--light .error-message, .form--light .bricks-search-form .error-message, .form--light .brxe-post-comments .error-message, .form--dark .error-message, .form--dark .bricks-search-form .error-message, .form--dark .brxe-post-comments .error-message { color: var(--wsf-field-invalid-feedback-color); background-color: var(--wsf-field-invalid-feedback-color-background); font-size: var(--wsf-field-invalid-feedback-font-size); font-style: var(--wsf-field-invalid-feedback-font-style); font-weight: var(--wsf-field-invalid-feedback-font-weight); letter-spacing: var(--wsf-field-invalid-feedback-letter-spacing); line-height: var(--wsf-field-invalid-feedback-line-height); text-decoration: var(--wsf-field-invalid-feedback-text-decoration); text-transform: var(--wsf-field-invalid-feedback-text-transform); margin-top: var(--wsf-field-invalid-feedback-gap); } .form--light .success-message, .form--light .bricks-search-form .success-message, .form--light .brxe-post-comments .success-message, .form--dark .success-message, .form--dark .bricks-search-form .success-message, .form--dark .brxe-post-comments .success-message { color: var(--wsf-form-color-success); font-size: var(--wsf-form-font-size-small); margin-block: var(--wsf-form-grid-gap); }  .form--light input[type="range"], .form--light .bricks-search-form input[type="range"], .form--light .brxe-post-comments input[type="range"], .form--dark input[type="range"], .form--dark .bricks-search-form input[type="range"], .form--dark .brxe-post-comments input[type="range"] { width: 100%; height: var(--wsf-field-range-track-height); background: var(--wsf-field-range-track-color); border-radius: var(--wsf-field-range-track-border-radius); outline: none; cursor: pointer; appearance: none; } .form--light input[type="range"]::-webkit-slider-thumb, .form--dark input[type="range"]::-webkit-slider-thumb { appearance: none; width: var(--wsf-field-range-thumb-width); height: var(--wsf-field-range-thumb-height); background: var(--wsf-field-range-thumb-color); border-radius: 50%; cursor: pointer; } .form--light input[type="range"]::-moz-range-thumb, .form--dark input[type="range"]::-moz-range-thumb { width: var(--wsf-field-range-thumb-width); height: var(--wsf-field-range-thumb-height); background: var(--wsf-field-range-thumb-color); border-radius: 50%; border: none; cursor: pointer; }  main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--light) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_calendar td:hover, main:has(.form--dark) ~ .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: var(--wsf-form-color-primary) !important; }  .form--light .form-grid, .form--light .bricks-search-form .form-grid, .form--light .brxe-post-comments .form-grid, .form--dark .form-grid, .form--dark .bricks-search-form .form-grid, .form--dark .brxe-post-comments .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--wsf-form-grid-gap); }  @media (max-width: 768px) { .form--light .form-grid, .form--light .bricks-search-form .form-grid, .form--light .brxe-post-comments .form-grid, .form--dark .form-grid, .form--dark .bricks-search-form .form-grid, .form--dark .brxe-post-comments .form-grid { grid-template-columns: 1fr; } }