:root {
    --form-max-width: 600px;
    --form-elements-spacing: 16px;
    --form-footer-margin-top: 24px;

    --form-input-border-radius: 8px;
}

form {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.form-element-config {
    display: none;
}

/* form config */

.form-config {
    display: none;
}

/* form body */

.form-slider {
    display: block;
    width: 100%;
    position: relative;
    -webkit-transition: height 0.2s, width 0.2s;
    -moz-transition: height 0.2s, width 0.2s;
    -ms-transition: height 0.2s, width 0.2s;
    -o-transition: height 0.2s, width 0.2s;
    transition: height 0.2s, width 0.2s;
}

.form-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -moz-transition: opacity 0.2s, -moz-transform 0.2s;
    -ms-transition: opacity 0.2s, -ms-transform 0.2s;
    -o-transition: opacity 0.2s, -o-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
}

.form-slider .form-body {
    display: none;
}

.form-body-selected {
    display: flex !important;
}

.form-body-hidden,
.new-form-body {
    top: 0;
    position: absolute;
    opacity: 0;
}

.form-body-hidden-right,
.new-form-body-right {
    right: 0px;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
}

.form-body-hidden-left,
.new-form-body-left {
    left: 0px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.form-layout {
    display: flex;
    width: 100%;
    max-width: var(--form-max-width);
    flex-direction: column;
    gap: var(--form-elements-spacing);
}

/* form footer */

.form-slider-footer,
.form-footer {
    margin-top: var(--form-footer-margin-top);
}

.form-slider-footer {
    display: block;
    width: 100%;
    max-width: var(--form-max-width);
    position: relative;
    -webkit-transition: height 0.2s, width 0.2s;
    -moz-transition: height 0.2s, width 0.2s;
    -ms-transition: height 0.2s, width 0.2s;
    -o-transition: height 0.2s, width 0.2s;
    transition: height 0.2s, width 0.2s;
}

.form-footer {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.form-slider-footer .form-footer {
    margin-top: 0px;
}

.form-footer .btn {
    margin: 0px;
}

.form-slider-footer .form-footer {
    display: none;
}

.form-footer-selected {
    display: flex !important;
}

.form-footer-hidden,
.new-form-footer {
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    opacity: 0;
}

/* form errors */

.form-errors-wrp {
    display: table;
    width: 100%;
}

.form-errors-txt {
    color: var(--color-text-red);
    font-size: 14.5px;
    letter-spacing: 0.4px;
}

/* elements */

.form-element-title {
    display: block;
    color: var(--color-text);
    font-size: 12.5px;
    letter-spacing: 0.5px;
    width: 100%;
}

.form-element-note {
    color: var(--color-text-50);
    font-size: 12px;
    letter-spacing: 0.4px;
}

.form-element-details {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.form-element-details-hide-because-autosave {
    display: none !important;
}

.form-element-wrp {
    display: block;
    width: 100%;
}

.form-element-visibility-hidden {
    display: none;
}

/* output state */

.form-output-state-wrp {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 52px;
    padding-bottom: 42px;
}

.form-output-state-icon-wrp {
    display: table;
    width: 100%;
}

.form-output-state-icon-wrp svg {
    display: table;
    width: 75px;
    max-width: 100%;
    margin: auto;
}

.form-output-state-txt {
    font-size: 16px;
    width: 100%;
    text-align: center;
    margin-top: 18px;
}

/* input, select, textarea */

.input-type-hidden,
.hidden-textarea {
    display: none !important;
}

.input-layout,
.select-layout,
.textarea-layout,
.map-form-layout,
.range-layout,
.scale-layout {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.input-title-wrp,
.select-title-wrp,
.textarea-title-wrp,
.map-form-title-wrp,
.scale-title-wrp {
    margin-bottom: 3px;
}

.input-details-wrp,
.select-details-wrp,
.textarea-details-wrp,
.map-form-details-wrp,
.range-details-wrp,
.scale-details-wrp {
    margin-top: 3px;
}

.input-expandable-wrp,
.input-expandable-inputs {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.input-expandable-add-more-btn {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.input-expandable-remove-btn {
    display: flex;
    align-items: center;
}

.input-expandable-remove-btn button {
    height: 32px;
    width: 12px;
    background-color: var(--color-text);
    -webkit-mask-image: url(../../../../media/icons/solid/cross.svg);
    mask-image: url(../../../../media/icons/solid/cross.svg);
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.35;
    -webkit-transition: opacity 0.15s;
    -moz-transition: opacity 0.15s;
    -ms-transition: opacity 0.15s;
    -o-transition: opacity 0.15s;
    transition: opacity 0.15s;
}

.input-expandable-remove-btn button:hover,
.input-expandable-remove-btn button:focus {
    opacity: 0.8;
}

.input-expandable-remove-btn button:disabled {
    opacity: 0.15 !important;
}

.input-list-layout {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 8px;
}

.input-field-wrp,
.select-field-wrp,
.textarea-field-wrp,
.map-form-wrp {
    display: table;
    width: 100%;
}

.input-field,
.select-field,
.textarea-field,
.input-files-wrp {
    width: 100%;
    font-size: 15px;
    letter-spacing: 0.35px;
    background-color: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    border-radius: var(--form-input-border-radius);
    padding: 10px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* Removes arrows from input type="number" */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* autofill */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border-color: var(--color-input-border);
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0px 100px var(--color-input-background) inset;
}

/* placeholder */

.input-field::placeholder,
.select-field::placeholder,
.textarea-field::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-input-placeholder);
    opacity: 1;
    /* Firefox */
}

.input-field:-ms-input-placeholder,
.select-field:-ms-input-placeholder,
.textarea-field:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--color-input-placeholder);
}

.input-field::-ms-input-placeholder,
.select-field::-ms-input-placeholder,
.textarea-field::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--color-input-placeholder);
}

/* modals and no-side-panel-layout interface */

#modal-block .input-field,
#modal-block .select-field,
#modal-block .textarea-field,
.n-s-p-l-container-size .input-field,
.n-s-p-l-container-size .select-field,
.n-s-p-l-container-size .textarea-field {
    border-color: var(--color-input-border-modal);
    background-color: var(--color-input-background-modal);
}

#modal-block input:-webkit-autofill,
#modal-block input:-webkit-autofill:hover,
#modal-block input:-webkit-autofill:focus,
#modal-block textarea:-webkit-autofill,
#modal-block textarea:-webkit-autofill:hover,
#modal-block textarea:-webkit-autofill:focus,
#modal-block select:-webkit-autofill,
#modal-block select:-webkit-autofill:hover,
#modal-block select:-webkit-autofill:focus,
.n-s-p-l-container-size input:-webkit-autofill,
.n-s-p-l-container-size input:-webkit-autofill:hover,
.n-s-p-l-container-size input:-webkit-autofill:focus,
.n-s-p-l-container-size textarea:-webkit-autofill,
.n-s-p-l-container-size textarea:-webkit-autofill:hover,
.n-s-p-l-container-size textarea:-webkit-autofill:focus,
.n-s-p-l-container-size select:-webkit-autofill,
.n-s-p-l-container-size select:-webkit-autofill:hover,
.n-s-p-l-container-size select:-webkit-autofill:focus {
    border-color: var(--color-input-border-modal);
    background-color: var(--color-input-background-modal);
    -webkit-box-shadow: 0 0 0px 100px var(--color-input-background-modal) inset;
}

.input-field-type-search-wrp {
    position: relative;
}

.input-field-type-search-wrp::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    width: 18px;
    height: 18px;
    background-color: var(--color-input-placeholder);
    -webkit-mask-image: url(../../../../media/icons/outline/search.svg);
    mask-image: url(../../../../media/icons/outline/search.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.input-field-type-search-wrp input {
    padding-left: 44px;
    background-image: none !important;
}

.select-field-wrp {
    position: relative;
}

.select-field-wrp::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 12px;
    height: 12px;
    background-color: var(--color-text);
    -webkit-mask-image: url(../../../../media/icons/solid/arrow-bottom.svg);
    mask-image: url(../../../../media/icons/solid/arrow-bottom.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.select-field {
    padding-right: 32px;
    background-image: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-field-wrp:has(.select-field:disabled)::after {
    opacity: 0.75;
}

.select-field:disabled {
    opacity: 1;
    color: var(--color-text-75);
    cursor: default;
}

.select-field option {
    background-color: var(--color-select-field-background);
}

.textarea-field {
    display: block;
    min-height: 265px;
    overflow: hidden;
    resize: none;
}

.form-autosave-state-wrp {
    display: table;
    width: 100%;
    margin-top: 4px;
}

.form-autosave-state-loading-layout {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
}

.form-autosave-state-loading-img-wrp {
    display: table;
    margin-right: 5px;
}

.form-autosave-state-loading-img-wrp svg {
    height: 12px;
    width: 12px;
}

.form-autosave-state-loading-txt {
    color: var(--color-text-blue);
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3px;
}