/*--------------------*/
/*  Form Block        */
/*--------------------*/
.form-block {--space: 1rem;gap: var(--space);display: grid;justify-items: start;}
.form-block > * + * {margin-top: calc(var(--space) * 1.5);}
.form-block > * + *:is(.input-field) {margin-top: 0;}
.empty-space {display: none;}
.form-info {gap: 0.625rem;display: flex;padding: 0.5rem;text-align: left;border-radius: var(--rd-1);background-color: var(--clr-white);}
.form-info svg {width: 1.5rem;height: 1.5rem;flex-shrink: 0;color: var(--clr-primary);}
@media (min-width: 768px) {
.form-block {grid-template-columns: 1fr 1fr;}
.form-block > * {grid-column: span 2;}
.form-block .w-50 {grid-column: span 1;}
.empty-space {display: block;}
}
@media (max-width: 991px) {
.form-block {--space: 0.875rem;}
}
/*--------------------*/
/*  Inputs            */
/*--------------------*/
.input-field {--int-height: 3.75rem;--int-pd: 0.75rem;--font-size: var(--text-sm);width: 100%;display: block;position: relative;text-align: left;line-height: 0;}
.input {position: relative;z-index: 1;font-weight: 400;font-size: var(--font-size);line-height: 1.25em;height: var(--int-height);padding-top: calc(var(--int-height) - var(--int-pd) - 1.25em);padding-bottom: var(--int-pd);text-overflow: ellipsis;color: var(--clr-black);border-bottom: 0.125rem solid var(--clr-input);transition: var(--transition-1);}
textarea.input {line-height: 1.38em;padding-top: calc(var(--int-pd) + 0.25em);}
.input-placeholder {display: inline-block;pointer-events: none;position: absolute;text-align: left;z-index: 2;top: 0;left: 0;transform: translateY(calc(var(--int-height) - var(--int-pd) - 1.25em));font-size: var(--font-size);line-height: 1.25em;font-weight: 400;color: var(--clr-text);max-width: 100%;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;transition: var(--transition-1);}
textarea.input + .input-placeholder {transform: translateY(var(--int-pd));}
.input-pass-control {--size: 2rem;cursor: pointer;display: block;position: absolute;z-index: 3;top: calc((var(--int-height) - var(--size)) / 2);right: 0;width: var(--size);height: var(--size);background-size: 70%;background-position: center;background-repeat: no-repeat;background-image: url(../img/icons/icon-eye-off.svg);}
.input-pass-control.is-view {background-image: url(../img/icons/icon-eye.svg);}
.input-error {font-size: 0.75rem;line-height: 1.5em;font-weight: 400;color: var(--clr-red);margin-top: 0.25rem;display: none;text-align: left;}
.input-field.focus {z-index: 5;}
.input-field.focus .input-placeholder,
.input-field.value .input-placeholder {font-size: calc(var(--font-size) * 0.857144);transform: translateY(0%);}
.input-field:where(.focus) .input {border-color: var(--clr-black);}
.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: 1199px) {
.input-field {--int-height: 3.25rem;--int-pd: 0.625rem;}
}
@media (max-width: 767px) {
.input-field {--int-height: 3rem;--int-pd: 0.5rem;}
}
.code-input {gap: 0.75rem;display: inline-flex;width: 100%;}
.code-input .input {width: auto;flex: 1 1 auto;min-width: 0;padding: 0;text-align: center;}
.resend-code [disabled] {color: var(--clr-text);}
/*--------------------*/
/*  Checkbox & Radio  */
/*--------------------*/
.ch-box-wrap {display: flex;flex-wrap: wrap;gap: var(--sp-xs);}
.ch-box {--ch-size: var(--text-sm);--lh-size: calc(var(--ch-size) * 1.25);cursor: pointer;font-size: var(--ch-size);line-height: var(--lh-size);text-align: left;gap: calc(var(--ch-size) / 2);display: inline-flex;align-items: center;}
.ch-box a {color: var(--clr-primary);text-decoration: underline;text-decoration-color: transparent;}
.ch-box input[type=radio],
.ch-box input[type=checkbox] {display: inline-block;position: relative;vertical-align: text-top;color: var(--clr-input);height: var(--lh-size);width: var(--lh-size);flex-shrink: 0;align-self: baseline;border-radius: 0.25rem;border: 0.0625rem solid currentColor;}
.ch-box input[type=checkbox] {transition: background-color var(--transition-1);}
.ch-box input[type=checkbox]:before {content: "";position: absolute;top: 45%;left: 50%;display: block;width: 20%;height: 50%;transform: translate(-50%, -50%) rotate(45deg) scale(0);border-right: 0.125rem solid var(--clr-white);border-bottom: 0.125rem solid var(--clr-white);transition: var(--transition-1);}
.ch-box input[type=checkbox]:checked {background-color: var(--clr-primary);}
.ch-box input[type=checkbox]:checked:before {transform: translate(-50%, -50%) rotate(45deg) scale(1);}
.ch-box input[type=radio] {border-radius: 100%;}
.ch-box input[type=radio]:before {content: "";position: absolute;top: 50%;left: 50%;display: block;width: 65%;height: 65%;transform: translate(-50%, -50%) scale(0);border-radius: inherit;background-color: currentColor;transition: var(--transition-1);}
.ch-box input[type=radio]:checked {color: var(--clr-primary);}
.ch-box input[type=radio]:checked:before {transform: translate(-50%, -50%) scale(1);}
@media (min-width: 1200px) {
.ch-box a:not(.btn):hover {text-decoration-color: currentColor;}
}
@media (max-width: 575px) {
.ch-box-wrap {align-items: flex-start;flex-direction: column;}
}
/*--------------------*/
/*  Select            */
/*--------------------*/
.SumoSelect {--sel-p: 0.75rem;--sel-h: 3.75rem;--sel-fz: var(--text-sm);--sel-items: 5;--opt-p: 0.625rem;--opt-lh: calc(var(--sel-fz) * 1.25);--max-height: calc((var(--opt-p) * 2 + var(--opt-lh)) * var(--sel-items) + var(--opt-p) * 2);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;font-size: var(--sel-fz);text-align: left;height: var(--sel-h);padding-inline: 0;padding-top: calc(var(--sel-h) - var(--sel-p) - 1em);padding-bottom: var(--sel-p);background: transparent;border-radius: 0;color: var(--clr-black);border: none;box-shadow: none !important;border-bottom: 0.125rem solid var(--clr-input);transition: var(--transition-1);}
.SumoSelect > .CaptionCont > span {cursor: pointer;padding-right: 0;font-size: var(--sel-fz);font-weight: 400;line-height: 1.25em;color: currentColor;backface-visibility: hidden;}
.SumoSelect > .CaptionCont > span.placeholder {font-style: normal;color: var(--clr-text);display: none;}
.SumoSelect > .CaptionCont > label {display: inline-block;cursor: pointer;width: 1.25rem;height: 1.25rem;color: currentColor;right: 0;bottom: var(--sel-p);top: auto;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.0625rem solid currentColor;border-bottom: 0.0625rem solid currentColor;transform: translate(-50%, -50%) rotate(45deg);}
.SumoSelect > .optWrapper {display: block;overflow: auto;z-index: 2;padding: 0;top: 100%;left: 0;width: 100%;border: 0.125rem solid var(--clr-black);border-top: none;border-radius: 0;opacity: 0;visibility: hidden;backface-visibility: hidden;background-color: var(--bg-1);box-shadow: var(--box-shadow);transition: 0s;}
.SumoSelect > .optWrapper > .options {font-size: var(--sel-fz);max-height: var(--max-height);padding: var(--opt-p) 0;border-radius: 0 !important;}
.SumoSelect > .optWrapper > .options li.opt {padding: 0;border-bottom: 0;}
.SumoSelect > .optWrapper > .options li label {white-space: unset;text-align: left;padding: var(--opt-p) var(--sel-p);font-size: var(--sel-fz);line-height: var(--opt-lh);font-weight: 400;color: var(--clr-black);transition: var(--transition-1);}
.SumoSelect > .optWrapper > .options li.opt.selected label {color: var(--clr-primary);}
.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-black);}
.SumoSelect.open > .CaptionCont {border-color: var(--clr-black);border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
.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;}
@media (min-width: 1200px) {
.SumoSelect > .optWrapper > .options li.opt:hover {background-color: var(--clr-white);}
}
@media (max-width: 1199px) {
.SumoSelect {--sel-h: 3.25rem;--sel-p: 0.625rem;}
}
@media (max-width: 767px) {
.SumoSelect {--sel-h: 3rem;--sel-p: .5rem;}
}
/*--------------------*/
/*  Upload Files      */
/*--------------------*/
.upload-wrap {text-align: left;}
.upload-btn {position: relative;cursor: pointer;font-size: var(--text-sm);line-height: 1.25em;color: var(--clr-text);font-weight: 400;gap: 0.75em;display: flex;align-items: center;justify-content: center;transition: var(--transition-1);}
.upload-btn input {display: none;}
.upload-btn svg {width: 1.5em;height: 1.5rem;color: var(--clr-primary);}
.upload-btn.style-2 {flex-direction: column;text-align: center;width: 100%;padding: var(--sp-xs);border-radius: var(--rd-1);background-color: var(--clr-white);border: 0.125rem dashed var(--clr-secondary);}
.upload-files {gap: 0.625rem;display: flex;flex-wrap: wrap;}
* + .upload-files {margin-top: var(--sp-xs);}
.uploaded-file {width: 100%;font-size: var(--text-sm);line-height: 1.25em;font-weight: 400;color: var(--clr-text);transition: var(--transition-1);gap: 0.5rem;display: flex;align-items: center;word-wrap: break-word;}
.uploaded-file svg {width: 1.5em;height: 1.5em;}
.uploaded-image {position: relative;overflow: hidden;width: calc(var(--sp-sm) * 2.25);height: calc(var(--sp-sm) * 2.25);border-radius: var(--rd-1);}
.uploaded-image img {position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
.uploaded-image .delete-file {position: absolute;z-index: 1;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 35%;height: 35%;color: var(--clr-primary);border-radius: var(--rd-1);background-color: var(--clr-white);display: flex;align-items: center;justify-content: center;}
.uploaded-image .delete-file svg {width: 65%;height: 65%;}
.delete-file {flex-shrink: 0;cursor: pointer;color: var(--clr-text);transition: var(--transition-1);}
.upload-files:has(.uploaded-file) + .upload-btn:has(input:not([multiple])) {display: none;}
@media (min-width: 1200px) {
.upload-btn:hover {color: var(--clr-primary);border-color: var(--clr-primary);}
.delete-file:hover {color: var(--clr-red);}
}