select{color:var(--gfont-color);padding:12px 10px;font-family:var(--font-family-input);font-size:var(--font-size-input);font-weight:var(--font-weight-input);box-sizing:border-box;border:1px solid var(--border-input);outline:none;border-radius:6px;}
span.wrapSelect select,
span.select select{padding-right:40px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;}
span.wrapSelect,
span.select{display:block;box-sizing:border-box;box-shadow:0 0 0 1px var(--border-input);border-radius:6px;position:relative;background-repeat:no-repeat;background-size:0 0;background-position:-200px -200px;}
span.wrapSelect::after,
span.select::after{content:"\e114";font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;border-left:1px solid var(--border-input);position:absolute;width:40px;top:0;right:0;bottom:0;pointer-events:none;text-align:center;display:flex;align-items:center;justify-content:center;color:var(--border-input);}
span.wrapSelect:focus-within{box-shadow:0 0 0 2px var(--border-input);}
span.wrapSelect:focus-within::after{color:#ccc;}

span.select-styled {display:block;position:relative;z-index:0;}
span.select-styled[data-title]::before {content:attr(data-title);position:absolute;z-index:2;top:5px;left:10px;color:var(--border-input);font-size:12px;pointer-events: none;line-height:1;}
span.select-styled.disabled[data-title]::before,
span.select-styled[data-title]:has(>select:disabled)::before {color:#cfcfcf;}
span.select-styled::after {z-index:1;border-left:1px solid var(--border-input);pointer-events:none;content:'';background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4Ij48cGF0aCBkPSJNNDgwLTM0NCAyNDAtNTg0bDQzLTQzIDE5NyAxOTcgMTk3LTE5NyA0MyA0My0yNDAgMjQwWiIvPjwvc3ZnPg') no-repeat center/16px auto;position:absolute;right:0;top:2px;bottom:2px;display:flex;align-items:center;width:30px;justify-content:center;}
span.select-styled:has(>select[multiple])::after {content:none;}
span.select-styled:has(>select:disabled)::after {color:#cfcfcf;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjY2ZjZmNmIj48cGF0aCBkPSJNNDgwLTM0NCAyNDAtNTg0bDQzLTQzIDE5NyAxOTcgMTk3LTE5NyA0MyA0My0yNDAgMjQwWiIvPjwvc3ZnPg==');border-color:#a6a6a6;}
span.select-styled>select {min-height:100%;appearance:none;outline:none;box-sizing:border-box;cursor:pointer;position:relative;max-width:100%;padding:13px 35px 13px 10px;border: 1px solid var(--border-input);z-index: 1;width: 100%;background-color:#fff;font:inherit;height:auto;}
span.select-styled[data-title]>select {padding-block:22px 5px;}
span.select-styled.disabled>select,
span.select-styled>select:disabled {cursor:default;color:#a6a6a6;background-color:#f7f7f7;border-color:#a6a6a6;}
span.select-styled>select[multiple] {padding-right:0 !important;}

label.check,
label.checkbox,
label.radio {display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
label.check:has(>input:disabled),
label.checkbox:has(>input:disabled),
label.radio:has(>input:disabled) {cursor:default;color:#a6a6a6;}
label.check>input,
label.checkbox>input,
label.radio>input {appearance:none;width:20px;border-radius:6px;display:inline-block;aspect-ratio:1;border:1px solid var(--color-check);background-color:#fff;vertical-align:middle;cursor:pointer;flex:0 0 auto;position:relative;z-index:0;}
label.check>input[type="radio"],
label.radio>input {border-radius:50%;}
label.check>input[type="checkbox"]::before,
label.checkbox>input::before {transition:all .1s;content:'';opacity:0;visibility:hidden;position:absolute;left:5px;top:0;width:8px;height:15px;box-sizing:border-box;transform:rotate(45deg);border-style:solid;border-width:3px;border-color:transparent var(--color-check) var(--color-check) transparent;border-radius:3px;}
label.check>input[type="radio"]::before,
label.radio>input::before {transition:all .1s;content:'';opacity:0;visibility:hidden;position:absolute;inset:3px;box-sizing:border-box;border-radius:50%;background-color:var(--color-check);margin:auto;}
label.check>input:checked::before,
label.checkbox>input:checked::before,
label.radio>input:checked::before {opacity:1;visibility:visible;}
label.check>input:disabled,
label.checkbox>input:disabled,
label.radio>input:disabled {border-color:#a6a6a6;background-color:#f9f9f9;cursor:default;}
label.check>input[type="checkbox"]:disabled::before,
label.checkbox>input:disabled::before {border-color:transparent #ddd #ddd transparent;}
label.check>input[type="radio"]:disabled::before,
label.radio>input:disabled::before {background-color:#ddd;}
label.check span,
label.checkbox span,
label.radio span {flex:1 0 auto;}

input:not([type]).classic,
input[type="text"].classic,
input[type="email"].classic,
input[type="search"].classic,
input[type="password"].classic,
textarea.classic {
    padding:12px 10px;
    box-sizing:border-box;
    border:1px solid var(--border-input);
    outline:none;
    color:var(--color-input);
    font-family:var(--font-family-input), system-ui;
    font-size:var(--font-size-input);
    font-weight:var(--font-weight-input);
    border-radius:6px;
    &:is(textarea) {height:90px;overflow:auto;resize:vertical;}
    &.err {border-color:var(--color-error)}
    &:disabled {cursor:default;color:#a6a6a6;background-color:#f7f7f7;border-color:#a6a6a6;}
}

a.classic-button,
[type="submit"].classic,
[type="button"].classic {

    --b-color:var(--background-submit);
    &.secondary {--b-color:#d0d0d0;}
    &.danger {--b-color:#ac1515;}

    display:inline-block;
    transition:all 0.5s ease;
    background-color:var(--b-color);
    border:1px solid var(--b-color);
    color:#fff;
    font-family:var(--font-family-input), serif;
    font-size:var(--font-size-input);
    padding:12px 27px;
    border-radius:4px;
    font-weight:var(--font-weight-submit);
    cursor:pointer;
    outline:none;

    &:hover {color:var(--b-color);background-color:#fff;}
    &:disabled {background-color:#e8e8e8;color:#fff;border-color:#e8e8e8;cursor:default;transition:none;}

    &.light {color:var(--b-color);background-color:#fff;}
    &.light:hover {background-color:#deffcb;}
}
a.classic-button:has(svg),
[type="submit"].classic:has(svg),
[type="button"].classic:has(svg) {display:inline-flex;align-items:center;gap:5px;svg {fill:currentColor;};justify-content:center;}


[data-placeholder]:has(input) {background-color:#fff;display:flex;position:relative;z-index:0;border:solid 1px var(--border-input);transition:border-color 0.3s;box-sizing:border-box;align-items:center;gap:5px;border-radius:6px;}
[data-placeholder].err {border-color:#ee0909;}
[data-placeholder] input[type],
[data-placeholder] textarea {padding-block:22px 5px;background-color:transparent;border:none;transition:none;outline:none;flex:1 1 auto;box-shadow:none;max-width:100%;}
[data-placeholder]:has(:disabled) {border-color:#a6a6a6}
/*[data-placeholder] input:disabled,*/
/*[data-placeholder] textarea:disabled {background-color:#f2f2f2;color:#d4d4d4;user-select:none;}*/
[data-placeholder] ::placeholder {opacity:0;}
[data-placeholder]::after {transition:all .1s;content:attr(data-placeholder);position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#cacaca;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-family-input);font-size:var(--font-size-input);font-weight:var(--font-weight-input)}
[data-placeholder]:has(>textarea)::after {top:22px;transform:none;}
[data-placeholder].required::before {content:"*";margin-right:5px;line-height:1;color: #cc5757;font-size:14px;font-weight:bold;order:1;}
[data-placeholder].disabled::after {color:#cfcfcf;}
[data-placeholder].disabled:not(.on)::after {background-color:transparent;}

[data-placeholder]:has(textarea:not(:placeholder-shown),textarea:focus),
[data-placeholder]:has(input:not(:placeholder-shown),input:focus) {
    &::after {transform:translateY(-20px);font-size:12px;}
    &:not(:has(>:disabled))::after {color:var(--background-submit)}
    &.low::after {transform:translateY(-20px);}
    &.err::after {color:#ee0909;}
}