/*------------------*/
/* Inputs           */
/*------------------*/
.input-field {--int-height: 3.5rem;--int-pd: 1rem;--font-size: var(--text-sm);display: block;position: relative;text-align: left;line-height: 0;font-size: var(--font-size);--bg-color: var(--clr-white);}
.input-field_grey{
    --bg-color: var(--bg-light);
}
.input {position: relative;z-index: 1;font-weight: 300;font-size: var(--font-size);line-height: var(--int-height);height: var(--int-height);padding: var(--int-pd);text-overflow: ellipsis;color: var(--clr-title);border-radius: var(--rd-1);background-color: var(--bg-color);border: 0.125rem solid var(--bg-color);transition: var(--transition-1);}
textarea.input {height: 7.25rem;line-height: 1.1em;}
.input-error {font-size: 0.75rem;line-height: 1.16em;font-weight: 400;color: var(--clr-red);margin-top: 0.25rem;display: none;}
.input-success {font-size: 0.75rem;line-height: 1.16em;font-weight: 400;color: var(--clr-primary);margin-top: 0.25rem;display: none;}
.input-field.focus {z-index: 5;}
.input-field:where(.focus) .input {border-color: var(--clr-primary);}
.input-field.invalid:not(.value) .input,
.input-field.invalid-email .input {border-color: var(--clr-red);}
.input-field.invalid:not(.value) .input-error,
.input-field.invalid-email .input-error {display: block;}
@media (max-width: 991px) {
.input-field {--int-height: 2.875rem;--int-pd: 0.875rem;}
}
@media (min-width: 1200px) {
    .input-field .input:hover {border-color: var(--clr-primary);}
}
/*--------------------*/
/*  Autofill          */
/*--------------------*/
.input-field.focus .input:not(textarea):-webkit-autofill,
.input-field.value .input:not(textarea):-webkit-autofill,
.input-field.focus .input:not(textarea):-webkit-autofill:hover,
.input-field.value .input:not(textarea):-webkit-autofill:hover,
.input-field.focus .input:not(textarea):-webkit-autofill:focus,
.input-field.value .input:not(textarea):-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {border: 0;-webkit-text-fill-color: var(--clr-title);-webkit-box-shadow: inset 0 0 0 0.0625rem var(--clr-title),inset 0 0 6.25rem var(--clr-white);-webkit-transition: background-color 5000s ease-in-out 0s;transition: background-color 5000s ease-in-out 0s;}
/*--------------------*/
/*  Checkbox & Radio  */
/*--------------------*/
.ch-box-wrap {--ch-size: 1rem;--lh-size: calc(var(--ch-size) * 1.25);display: flex;flex-wrap: wrap;gap: var(--lh-size);}
.ch-box {cursor: pointer;gap: calc(var(--ch-size) / 2);display: inline-flex;align-items: center;font-size: var(--ch-size);line-height: var(--lh-size);text-align: left;}
.ch-box a {display: inline;color: var(--clr-title);font-weight: 400;text-decoration: underline;text-decoration-color: currentColor;}
.ch-box input[type=radio],
.ch-box input[type=checkbox] {position: relative;cursor: pointer;display: inline-block;align-self: start;color: var(--clr-title);width: var(--lh-size);height: var(--lh-size);flex-shrink: 0;border-radius: 0.25rem;border: 0.0625rem solid currentColor;}
.ch-box input[type=radio]::before,
.ch-box input[type=checkbox]::before {content: "";position: absolute;top: 50%;left: 50%;display: block;width: 0.875rem;height: 0.875rem;transform: translate(-50%, -50%) scale(0);transition: var(--transition-1);border-radius: inherit;background-color: currentColor;}
.ch-box input[type=radio]:checked:before,
.ch-box input[type=checkbox]:checked:before {transform: translate(-50%, -50%) scale(1);}
.ch-box input[type=radio] {border-radius: 100%;}
@media (min-width: 1200px) {
.ch-box a:not(.btn):hover {text-decoration-color: transparent;}
}
@media (min-width: 1200px) and (max-width: 1440px) {
.ch-box-wrap {--lh-size: calc(var(--ch-size) * 1.334);}
.ch-box-wrap input[type=radio]:before,
.ch-box-wrap input[type=checkbox]:before {width: 0.834rem;height: 0.834rem;}
}
@media (max-width: 575px) {
.ch-box-wrap {align-items: flex-start;flex-direction: column;}
}
/*------------------*/
/* Select           */
/*------------------*/
.SumoSelect {--sel-p: 1rem;--sel-h: 3.5rem;--sel-fz: var(--text-sm);--sel-items: 4;--opt-p: 0.625rem;--opt-lh: calc(var(--sel-fz) * 1.125);--max-height: calc((var(--sel-p) * 2 + var(--opt-lh)) * var(--sel-items) + var(--sel-p) - 0.25rem);cursor: pointer;z-index: 1;width: 100%;}
.SumoUnder {z-index: 0;padding: 0;margin: 0;line-height: 0;font-size: 0;display: none;backface-visibility: hidden;}
.SumoSelect > .CaptionCont {z-index: 1;text-align: left;height: var(--sel-h);padding: var(--sel-p);padding-right: calc(var(--sel-p) * 3);background: var(--bg-color);border-radius: var(--rd-1);color: var(--clr-title);border: 0.0625rem solid var(--bg-color);transition: var(--transition-1);}
.SumoSelect > .CaptionCont > span {cursor: pointer;padding-right: 0;font-size: var(--sel-fz);font-weight: 400;line-height: 1.33em;color: currentColor;backface-visibility: hidden;}
.SumoSelect > .CaptionCont > span.placeholder {font-style: normal;font-weight: 300;color: var(--clr-text);}
.SumoSelect > .CaptionCont > label {display: inline-block;cursor: pointer;width: 1.25rem;height: 1.25rem;color: currentColor;right: var(--sel-p);bottom: auto;top: 50%;transform: translateY(-50%);transition: var(--transition-1);}
.SumoSelect > .CaptionCont > label i {background-image: none;opacity: 1;width: 0.625rem;height: 0.625rem;top: 40%;left: 50%;right: auto;bottom: auto;color: currentColor;border-right: 0.125rem solid currentColor;border-bottom: 0.125rem solid currentColor;border-radius: 0.125rem;transform: translate(-50%, -50%) rotate(45deg);}
.ios .SumoSelect > .CaptionCont > span {line-height: 1.2em;}
.SumoSelect > .optWrapper {display: block;overflow: auto;z-index: 2;padding: 0;top: 100%;left: 0;width: 100%;border: 0.0625rem solid var(--bg-color);border-top: none;border-radius: var(--rd-1);opacity: 0;visibility: hidden;backface-visibility: hidden;background-color: var(--bg-color);box-shadow: none;transition: 0s;}
.SumoSelect > .optWrapper > .options {font-size: var(--sel-fz);max-height: var(--max-height);padding: 0.25rem;border-radius: 0 !important;}
.SumoSelect > .optWrapper > .options li.opt {padding: 0;border-bottom: 0;border-radius: var(--rd-1);background-color: transparent !important;}
.SumoSelect > .optWrapper > .options li label {white-space: unset;text-align: left;border-radius: var(--rd-1);padding: var(--sel-p);font-size: var(--sel-fz);line-height: var(--opt-lh);font-weight: 400;letter-spacing: -0.02em;color: var(--clr-text);transition: var(--transition-1);}
.SumoSelect > .optWrapper > .options li.opt.selected label {background-color: var(--clr-grey);color: var(--clr-title);}
.SumoSelect > .optWrapper > .options > .opt.disabled:first-child {display: none !important;}
.SumoSelect > .optWrapper > .options li.group > label {padding: var(--opt-p) var(--sel-p);font-weight: 600;}
.SumoSelect > .optWrapper > .options li ul li.opt {padding-left: var(--opt-p);}
.SumoSelect:focus > .CaptionCont,
.SumoSelect:hover > .CaptionCont {box-shadow: none;border-color: var(--clr-primary);}
.SumoSelect.open > .CaptionCont {border-color: var(--clr-white);}
.SumoSelect.open > .CaptionCont > label {transform: translateY(-50%) rotateX(180deg);}
.SumoSelect.open > .optWrapper {top: 100%;opacity: 1;visibility: visible;transition: var(--transition-1);transition-delay: 0.2s;}
.SumoSelect.disabled {opacity: 0.5;}
.SumoSelect.disabled > .CaptionCont {cursor: not-allowed;}
.SumoSelect.disabled > .CaptionCont > span {cursor: not-allowed;}

.input-field_grey .SumoSelect > .optWrapper > .options li.opt.selected label {background-color: var(--clr-white);}

@media (min-width: 1200px) {
    .input-field_grey .SumoSelect > .optWrapper > .options li.opt:hover label {background-color: var(--clr-white);}
.SumoSelect > .optWrapper > .options li.opt:hover label {background-color: var(--bg-light);}
}
@media (max-width: 991px) {
.SumoSelect {--sel-p: 0.875rem;--sel-h: 2.875rem;}
}
/*------------------*/
/* Form Block       */
/*------------------*/
.form-block {--space: 0.75rem;}
.form-block .row {--bs-gutter-x: var(--space);--bs-gutter-y: var(--space);}
.form-block > * {margin-bottom: var(--space);}
.form-block > *:last-child {margin-bottom: 0;}
.form-inner {position: relative;z-index: 1;}
.form-inner .form-block {--pd-out: var(--sp-sm);position: relative;overflow: hidden;background-color: #B6F7E1;border-radius: var(--rd-1);padding: var(--pd-out) var(--pd-out) 0 var(--pd-out);}
.form-inner .radius-wrap {--btn-height: 3.125rem;--wrap-width: 10.125rem;--pd: 0.375rem;position: relative;z-index: 1;display: block;width: calc(var(--wrap-width) + var(--pd) * 2);height: calc(var(--btn-height) + var(--pd) * 2);background: var(--clr-title);border-radius: var(--rd-1) 0 var(--rd-1) 0;box-shadow: 0.75rem 1rem var(--clr-title);margin-inline: auto calc(var(--pd-out) * -1);margin-top: var(--sp-sm);}
.form-inner .radius-wrap > .btn {position: absolute;right: var(--pd);bottom: var(--pd);width: var(--wrap-width);justify-content: flex-end;}
.form-inner .radius-wrap::before {content: "";position: absolute;top: calc(var(--rd-1) * -2);right: 0;background-color: #B6F7E1;width: calc(var(--rd-1) * 2);height: calc(var(--rd-1) * 2);border-radius: 0 0 var(--rd-1) 0;box-shadow: 0.25rem 0.25rem var(--clr-title);}
.form-inner .radius-wrap::after {content: "";position: absolute;bottom: 0;left: calc(var(--rd-1) * -2);background-color: #B6F7E1;width: calc(var(--rd-1) * 2);height: calc(var(--rd-1) * 2);border-radius: 0 0 var(--rd-1) 0;box-shadow: 0.25rem 0.25rem var(--clr-title);}
@media (max-width: 991px) {
.form-inner .radius-wrap {--btn-height: 2.875rem;--wrap-width: 9.375rem;}
}
.form-informer{
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem;
    border-radius: var(--rd-1);
    border: solid 1px var(--clr-border);
    background: var(--clr-white);
    font-size: var(--text-sm);
    line-height: 1.2;
    text-align: left;
}
.form-informer img{width: 1.5rem;flex-shrink: 0;}
/*------------------*/
/* File input       */
/*------------------*/
input[type=file] {
    display: none;
}

.file-input__box {
    display: block;
    position: relative;
    padding: 1.125rem 1.25rem;
    border-radius: var(--rd-1);
    background: var(--clr-white);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem;
    border: dashed 1px var(--clr-border);
    -webkit-transition: border var(--transition-1);
    transition: border var(--transition-1);
    cursor: pointer;
}

.file-input__box * {
    pointer-events: none;
}

.file-input__box.drag-enter {
    border-color: var(--clr-text);
}

.file-input__message {
    font-size: var(--text-s);
}

.file-input__loaded-files {
    padding-top: 0.75rem;
    gap: 0.5rem 0.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-transition: padding var(--transition-1);
    transition: padding var(--transition-1);
}

.file-input__loaded-files:empty {
    padding-top: 0;
}

.file-input__loaded-files_images {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    justify-items: center;
}

.file-input__loaded-files_images > * {
    max-width: 18.75rem;
    width: 100%;
}

@media (max-width: 575px) {
    .file-input__loaded-files_images {
        justify-items: center;
    }

    .file-input__loaded-files_images > * {
        max-width: 15.625rem;
        width: 100%;
    }
}

.file-input__file {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: var(--int-fs);
    gap: 0.625rem;
    position: relative;
}

.file-input__file .btn-close {
    --bw: 0.8em;
}

.file-input__file .btn-close::after, .file-input__file .btn-close::before {
    height: 1px;
}

.file-input__file.loading::before, .file-input__file.loading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--clr-border);
}

.file-input__file.loading::after {
    width: var(--loading-progress);
    background: var(--clr-primary);
}

.file-input__file-image {
    width: 1.111em;
    height: 1.111em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.file-input__file-image:empty {
    background: url(../img/icons/file.svg) no-repeat;
    background-size: 100% 100%;
}

.file-input__file-image .info-icon {
    display: block;
    margin-top: -0.05em;
}

.file-input__file-image .info-icon__text {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.invalid .file-input__file-image {
    background: none;
}

.loading .file-input__file-image {
    display: none;
}

.file-input__loaded-files_sortable .file-input__file_image-file .file-input__file-name {
    position: absolute;
    font-size: 0;
    width: 1.3rem;
    height: 2rem;
    background: url(../img/icons/drag-icon.svg) no-repeat;
    background-size: 0.5rem;
    background-position: center;
    top: 50%;
    right: 0.625rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}

.file-input__file_image-file {
    overflow: hidden;
    border-radius: var(--rd-1);
}

.file-input__file_image-file .file-input__file-name {
    display: none;
}

.file-input__file_image-file .file-input__remove-btn {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    left: unset;
    z-index: 2;
    --bw: 1.3rem;
}

.file-input__file_image-file .file-input__remove-btn::after, .file-input__file_image-file .file-input__remove-btn::before {
    height: 2px;
}

.file-input__file_image-file .info-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 var(--sp-xs);
    gap: 0.5rem;
}

.file-input__file_image-file .info-icon svg {
    width: 1.5rem;
}

.file-input__file_image-file .info-icon__text {
    display: block;
    max-width: 100%;
    width: 100% !important;
    position: relative;
    top: unset !important;
    left: unset !important;
    padding: 0;line-height: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none !important;
    transform: none !important;
    text-align: center;
    background: transparent;
}

.file-input__file_image-file .file-input__file-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.77;
    background: var(--bg-1);
}

.file-input__file_image-file .file-input__file-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, color-stop(-7.41%, #000), color-stop(18.93%, rgba(0, 0, 0, 0)));
    background: linear-gradient(270deg, #000 -7.41%, rgba(0, 0, 0, 0) 18.93%);
    -webkit-transition: opacity var(--transition-1);
    transition: opacity var(--transition-1);
}

.file-input__file_image-file .file-input__file-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.file-input__file_image-file.loading::after, .file-input__file_image-file.invalid::after {
    height: 3px;
}

.file-input__file_image-file.loading .file-input__file-image, .file-input__file_image-file.invalid .file-input__file-image {
    display: block;
}

.file-input__file_image-file.loading .file-input__file-image::after, .file-input__file_image-file.invalid .file-input__file-image::after {
    opacity: 0;
}
.file-input__file_image-file.invalid img{opacity: .1;}
.file-input__file_image-file.loading .file-input__file-name, .file-input__file_image-file.invalid .file-input__file-name {
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}

@media (hover: hover) {
    .file-input__box:hover {
        border-color: var(--clr-text);
    }
}