form.nForms {
    max-width:1400px;
    margin:2em auto;
    --nf-br:6px;
    --nf-border-color:var(--border-input, #7d7d7d);
    --nf-color-input:var(--color-input, #000);
    --nf-input-font:var(--font-weight-input, normal) var(--font-size-input, 1em) var(--font-family-input, inherit), serif, system-ui;
    --nf-submit-bck:var(--background-submit, #3180e5);
    --nf-submit-col:#fff;
    --nf-submit-radius:4px;
    --nf-submit-border:1px solid var(--nf-submit-bck);
    --nf-submit-font:var(--font-weight-submit, 600) 1em var(--font-family-input, inherit), serif, system-ui;

    --nf-checkbox-color:var(--nf-border-color);
    --nf-checkbox-border:2px solid var(--nf-checkbox-color);

    --nf-border-area-error:#c42525;
    --nf-background-area-error:#ffc0c0;
    --nf-color-area-error:#c42525;

    --nf-color-error:red;
    --nf-color-req-marker:#b2b2b2;/* #c42525 */
    --nf-font-req-marker:bold 14px/1 monospace;

    --nf-plh-color:silver;
    --nf-plh-color-on:var(--nf-border-color);
}
.content-text .nForms li::before {content:none;}
.content-text .nForms p,
.content-text .nForms ul,
.content-text .nForms li,
.content-text .nForms ol {all:revert;padding:0;margin:0;}
.nForms .title-nForms {font-weight:bold;font-size:1.5em;margin-bottom:1em;}
.nForms .nf-group.hide {display:none;}
.nForms .nf-group>header {margin-bottom:.5em;font-size:1.4em;font-weight:600;}
.nForms .nf-elements_line,
.nForms .nf-groups_line {display:flex;gap:10px;align-items:start;}
.nForms .nf-elements_line+.nf-elements_line,
.nForms .nf-groups_line+.nf-groups_line {margin-top:20px;}
.nForms .nf-elements_line>*,
.nForms .nf-groups_line>* {flex:1 0;}
.nForms input.nf-text,
.nForms select,
.nForms textarea {
    font:var(--nf-input-font);
    width:100%;
    box-sizing:border-box;
    color:var(--nf-color-input);
    outline:none;
    padding:12px 10px;
    border:1px solid var(--nf-border-color);
    border-radius:var(--nf-br);
}

.nForms.plh input.nf-text,
.nForms .nf-field-input:has(button.show-password) input.nf-text,
.nForms.plh select,
.nForms.plh textarea {
    border-radius:0;
    border:none;
    padding-inline:4px;
}

.nForms .nf-field-title {margin-bottom:1px;display:block;font-weight:600;font-size:1.1em;}

.nForms select {background-color:#fff;}
.nForms textarea {resize:vertical;overflow:auto;}
.nForms textarea[rows] {height:auto !important;}

.nForms .select-styled:has(>svg),
.nForms .select-styled[data-placeholder] {display:block;position:relative;z-index:0;}
.nForms .select-styled svg {pointer-events:none;position:absolute;width:20px;height:20px;right:0;top:0;bottom:0;margin-block:auto;vertical-align:top;}
.nForms .select-styled select {appearance:none}
.nForms .select-styled[data-title] select {padding-block:24px 5px;}
.nForms .select-styled[data-title]::before {content:attr(data-title);position:absolute;top:5px;left:5px;font-size:12px;background-color:#fff;color:var(--nf-plh-color-on);}

.nForms [type="submit"] {
    transition:all .2s;
    cursor:pointer;
    border:var(--nf-submit-border);
    background-color:var(--nf-submit-bck);
    color:var(--nf-submit-col);
    border-radius:var(--nf-submit-radius);
    outline:none;
    font:var(--nf-submit-font);
    padding:.8em 1.5em;
}
.nForms [type="submit"]:hover {
    background-color:var(--nf-submit-col);
    color:var(--nf-submit-bck);
}

.nForms .nf-field-desc {font-size:.8em;color:#8c8c8c;}
.nForms .nf-field-wrap+.nf-field-desc {margin-top:1px;font-style:italic;}
.nForms .nf-field-error {font-size:.8em;color:var(--nf-color-error);}
.nForms .nf-field-error:empty {display:none;}
.nForms .nf-field-wrap {position:relative;z-index:0;}
.nForms .nf-field-input {display:block;position:relative;z-index:0;}
.nForms label:not(.label) {display:block;}
.nForms.plh .nf-field-wrap,
.nForms:not(.plh) .nf-field-input:has(button.show-password) {border-radius:var(--nf-br);border:1px solid var(--nf-border-color);padding-inline:var(--nf-br);}
.nForms.plh .nf-field-wrap:has([data-placeholder]) {background-color:#fff;}

.nForms .nf-field-input:has(button.show-password) {display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center;}
.nForms button.show-password {cursor:pointer;border:none;outline:none;background:transparent;display:flex;place-items:center;}
.nForms button.show-password>svg {fill:#c8c8c8;aspect-ratio:1;width:20px;}
.nForms button.show-password:hover>svg {fill:#959595;}
.nForms button.show-password:not(.show)>svg:first-child {display:none;}
.nForms button.show-password.show>svg:last-child {display:none;}

.nForms.plh .nf-field-wrap.error,
.nForms:not(.plh) .nf-field-input:has(button.show-password) {border-color:red;}
.nForms .nf-field-wrap.req .nf-field-input:not(.select-styled)::after {content:'*';right:var(--nf-br);top:0;bottom:0;color:var(--nf-color-req-marker);position:absolute;z-index:1;pointer-events:none;height:15px;aspect-ratio:1;display:block;margin-block:auto;text-align:center;font:var(--nf-font-req-marker);}
.nForms.plh .nf-field-wrap.req .nf-field-input:not(.select-styled)::after {right:0;}
.nForms .nf-field-wrap.req:has(button.show-password) .nf-field-input::after{right:30px;}
.nForms.plh .nf-field-wrap.req:has(button.show-password) .nf-field-input::after{right:25px;}
.nForms .nf-field-wrap.req .nf-field-input:has(textarea)::after {bottom:auto;top:10px;}

/* checkbox */
.nForms .nf-element:has(>.nf-chb-wrap),
.nForms .nf-element:has(>.nf-checkbox-list) {container:nf-checkbox-list / inline-size;background-color:#f7f7f7;padding:1em 10px;border-radius:var(--nf-br);box-sizing:border-box;max-width:100%;}
.nForms .nf-element:has(>.nf-chb-wrap.req) {display:grid;grid-template-columns:1fr auto;gap:10px;}
.nForms .nf-element:has(>.nf-chb-wrap.req)::after,
.nForms .nf-checkbox-list.req header::after {content:"*";color:var(--nf-color-req-marker);font:var(--nf-font-req-marker);}
.nForms .nf-chb-wrap.req+.nf-field-error {order:1;}
.nForms .nf-chb-wrap {display:grid;grid-template-columns:auto 1fr;gap:2px 10px;}
.nForms .nf-chb-wrap .label {display:grid;grid-template-columns:subgrid;grid-column:span 2;}
.nForms .nf-chb-wrap label.label {cursor:pointer;}
.nForms .nf-chb-wrap.rodo .label {font-size:.8em;}
.nForms .nf-chb-wrap .nf-field-desc {font-size:.8em;grid-column-start:2;color:#8c8c8c;}
.nForms .nf-checkbox-list header {margin-bottom:15px;}
.nForms .nf-checkbox-list.req header {display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center;}
.nForms .nf-checkbox-list .nf-field-desc {margin-block:-10px 15px;}
.nForms .nf-chb-wrap-list {display:flex;flex-wrap:wrap;gap:5px 10px;}
.nForms .nf-chb-wrap-list>.nf-chb-wrap {flex:0 0 auto;gap:2px 5px;}
.nForms input.nf-checkbox {background-color:#fff;cursor:pointer;display:inline-block;appearance:none;width:18px;aspect-ratio:1;border:var(--nf-checkbox-border);border-radius:2px;box-sizing:border-box;position:relative;z-index:0;}
.nForms input.nf-checkbox::after {content:'';position:absolute;z-index:0;inset:2px;transform:scale(0);opacity:0;background-color:var(--nf-checkbox-color);transition:opacity 0s linear 50ms, transform 50ms;}
.nForms input.nf-checkbox:checked::after {transform:scale(1);opacity:1;transition:transform 50ms;}
.nForms input.nf-checkbox.shift {aspect-ratio:5/3;width:40px;border-radius:2em;border:2px solid #b3b3b3;background-color:#e3e3e3;transition:all 100ms;}
.nForms input.nf-checkbox.shift::after {inset:2px auto 2px 2px;aspect-ratio:1;border-radius:50%;transform:none;opacity:1;background-color:#b3b3b3;transition:all 100ms;}
.nForms input.nf-checkbox.shift:checked {border-color:var(--nf-checkbox-color);background-color:var(--nf-checkbox-color);}
.nForms input.nf-checkbox.shift:checked::after {left:calc(100% - 18px);border-color:var(--nf-checkbox-color);background-color:#fff;}

.nForms input.nf-radio {background-color:#fff;cursor:pointer;display:inline-block;appearance:none;width:18px;aspect-ratio:1;border:var(--nf-checkbox-border);border-radius:50%;box-sizing:border-box;position:relative;z-index:0;}
.nForms input.nf-radio::after {content:'';position:absolute;z-index:0;inset:2px;transform:scale(0);opacity:0;background-color:var(--nf-checkbox-color);transition:opacity 0s linear 50ms, transform 50ms;border-radius:50%;}
.nForms input.nf-radio:checked::after {transform:scale(1);opacity:1;transition:transform 50ms;}

@container nf-checkbox-list (width < 400px) {
    .nf-chb-wrap-list {flex-direction:column;}
}

/* EOT - checkbox */

.nForms [data-placeholder] {border:none !important;box-shadow:none !important;}
.nForms [data-placeholder].required::before {content:none;}
.nForms [data-placeholder]::after {left:4px;}
.nForms [data-placeholder] {
    padding-inline:0 !important;
    input.nf-text, select, textarea {padding-block: 22px 5px;}
}
.nForms.plh .nf-field-wrap.error [data-placeholder]:has(input:not(:placeholder-shown),input:focus)::after {color:red;}

.nf-upload {container:nf-upload / inline-size;background-color:#f7f7f7;padding:1em 10px;border-radius:var(--nf-br);box-sizing:border-box;max-width:100%;border:2px dashed #e8e8e8;}
.nf-upload.is-dragover {background-color:#f9fcff;border-color:#87bcfa;}

.nf-upload>header {margin-bottom:15px;font-size:1.2em;}
.nf-upload.required>header {display:grid;grid-template-columns:1fr auto;gap:10px;}
.nf-upload.required>header::after {content:'*';color:var(--nf-color-req-marker);pointer-events:none;font:var(--nf-font-req-marker);}
.nf-upload>header+.nf-field-desc {margin-block:-10px 15px;}
.nf-upload-area input[type="file"] {visibility:hidden;position:absolute;}
.nf-add-file {display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;}
.nForms .nf-upload ul {list-style:none;display:flex;gap:10px;flex-wrap:wrap;}
.nForms .nf-upload li {flex:0 0 auto;box-sizing:border-box;width:120px;}
.nf-upload li header {position:absolute;z-index:0;display:grid;inset:2px 2px auto;grid-template-columns:1fr auto;gap:2px;align-items:center;}
.nf-upload li header .ipw {position:relative;z-index:0;border:var(--nf-submit-border);background-color:#fff;overflow:hidden;}
.nf-upload li header .ipw.hide {visibility:hidden;}
.nf-upload li header .ipw span {overflow:hidden;width:0;background-color:var(--nf-border-color);height:5px;display:block;}
.nf-upload li header button {all:revert;margin:0;padding:0;color:#ee0909;border:1px solid currentColor;outline:none;cursor:pointer;font-size:16px;font-weight:bold;background-color:rgba(255, 255, 255, 0.5);line-height:1;border-radius:50%;width:20px;aspect-ratio:1;}
.nf-upload li header button:hover {color:#9e0404;background-color:#fff;}
.nf-upload li>div {border:1px solid var(--background-submit);border-radius:4px;background-color:#fff;position:relative;z-index:0;margin-bottom:2px;aspect-ratio:1;overflow:hidden;}
.nf-upload li>div:has(svg) {display:grid;align-items:center;justify-content:center;}
.nf-upload li.load>div::before {content:'';position:absolute;z-index:2;inset:0;width:25px;aspect-ratio:1;border-radius:50%;margin:auto;box-sizing:border-box;border-color:var(--nf-submit-bck) transparent var(--nf-submit-bck) var(--nf-submit-bck);border-width:2px;border-style:solid;animation:rotate .4s linear infinite;}
.nf-upload li.load>div::after {content:'';position:absolute;z-index:1;inset:0;background-color:#fff;}
.nf-upload li>div img {width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;}
@keyframes rotate { 100% {transform: rotate(360deg);} }
.nf-upload li>div svg {fill:#dbdbdb;width:30px;}
.nf-upload ul footer {display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;white-space:nowrap;font-size:13px;}
.nf-upload ul footer .name {overflow:hidden;text-overflow:ellipsis;text-align:right;}
.nf-upload .nf-upload-error {font-size:13px;margin-top:1em;padding:10px;border-radius:4px;border:1px solid var(--nf-border-area-error);background-color:var(--nf-background-area-error);color:var(--nf-color-area-error)}
.nf-upload .nf-upload-error:empty {display:none;}
.nf-upload .nf-field-error {margin-top:1em;}

.nf-message {display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:center;margin-bottom:1em;padding:1.5em 1em;background-color:#72c344;border:2px solid #3b7b17;color:#193509;font-weight:600;border-radius:6px;}
.nf-message svg {fill:currentColor;align-self:start;}
.nf-message.error {border-color:var(--nf-border-area-error);color:var(--nf-color-area-error);background-color:var(--nf-background-area-error)}

.nForms .nf-element.submit.right {text-align:right;}
.nForms .nf-element.submit.justify [type="submit"] {width:100%;box-sizing:border-box;}

.nf-element.token:has(>.nf-token-wrap) {container:nf-token-wrap / inline-size;}
.nf-token-wrap {display:grid;grid-template-columns:211px auto 1fr;gap:5px;align-items:center;}
.nf-token-wrap button[type="button"] {font:var(--nf-input-font);place-self:normal start;background-color:#f7f7f7;border:1px solid #e8e8e8;border-radius:6px;color:var(--nf-border-color);place-items:center;padding:5px;display:grid;grid-template-columns:auto auto;gap:5px;cursor:pointer;outline:none;}
.nf-token-wrap button[type="button"] svg {width:25px;height:25px;vertical-align:top;fill:currentColor}
.nf-token-wrap>span {overflow:hidden;width:211px;aspect-ratio:3.459;position:relative;z-index:0;border:1px solid var(--nf-border-color);border-radius:4px;}
.nf-token-wrap>span.load::before {content:'';position:absolute;z-index:2;inset:0;width:25px;aspect-ratio:1;border-radius:50%;margin:auto;box-sizing:border-box;border-color:var(--nf-submit-bck) transparent var(--nf-submit-bck) var(--nf-submit-bck);border-width:2px;border-style:solid;animation:rotate .4s linear infinite;}
.nf-token-wrap>span img {vertical-align:top;width:100%;height:100%;object-fit:cover;}
.nf-token-wrap>span.load img {opacity:0;}
.nf-token-wrap>.nf-field-error {grid-column:span 3;}

@container nf-token-wrap (width < 500px) {
    .nf-token-wrap {grid-template-columns:211px auto}
    .nf-token-wrap>.nf-field-wrap {grid-column:span 2;}
    .nf-token-wrap>.nf-field-error {grid-column:span 2;}
}
@container nf-upload (width < 500px) {
    .nf-add-file {grid-template-columns:auto;}
}