.aio-sdk-form {
    --aio-sdk-form-padding: 30px 30px 20px;

    --aio-sdk-form-layout-gap: var(--aio-sdk-input-margin);

    --aio-sdk-form-steps-gap: 60px;
    --aio-sdk-form-steps-margin: 15px;
    --aio-sdk-form-step-diameter: 35px;

    --aio-sdk-form-step-font-size: var(--aio-sdk-input-font-size);
    --aio-sdk-form-step-line-color: var(--aio-sdk-input-bg);
    --aio-sdk-form-step-bg: var(--aio-sdk-input-bg);
    --aio-sdk-form-step-border: var(--aio-sdk-submit-bg);
    --aio-sdk-form-step-color: var(--aio-sdk-input-color);

    --aio-sdk-form-step-active-bg: var(--aio-sdk-submit-bg);
    --aio-sdk-form-step-active-border: var(--aio-sdk-submit-bg) ;
    --aio-sdk-form-step-active-color: var(--aio-sdk-submit-color);

    --aio-sdk-input-label-color: black;
    --aio-sdk-input-label-font-size: 1em;
    --aio-sdk-input-label-margin : 3px;

    --aio-sdk-input-margin: 15px;
    --aio-sdk-input-bg: white;
    --aio-sdk-input-font-size: 1em;
    --aio-sdk-input-border: #ced4da;
    --aio-sdk-input-border-radius: 0px;
    --aio-sdk-input-padding: 15px 20px;
    --aio-sdk-input-color: black;

    --aio-sdk-input-textarea-size: 100px;
    --aio-sdk-input-checkbox-gap: 5px;

    --aio-sdk-submit-bg: #60359b;
    --aio-sdk-submit-padding: var(--aio-sdk-input-padding);
    --aio-sdk-submit-border: transparent;
    --aio-sdk-submit-border-radius: 0px;
    --aio-sdk-submit-color: white;
    --aio-sdk-submit-font-size: var(--aio-sdk-input-font-size);

    box-sizing: border-box;
    padding: var(--aio-sdk-form-padding);
    position: relative;
    width: 100%;
}


.aio-sdk-form .aio-sdk-form-hidden{
    display: none !important;
}
.aio-sdk-form.aio-sdk-form-loading {
    filter: grayscale(100%);
}

.aio-sdk-form .aio-sdk-input-container {
    box-sizing: border-box;
    position: relative;
    margin-bottom: var(--aio-sdk-input-margin);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--aio-sdk-input-label-margin);
}

.aio-sdk-form .aio-sdk-input {
    color: var(--aio-sdk-input-color);
    background-color: var(--aio-sdk-input-bg);
    border: 1px solid var(--aio-sdk-input-border);
    padding: var(--aio-sdk-input-padding);
    border-radius: var(--aio-sdk-input-border-radius);

    font-size: var(--aio-sdk-input-font-size);

    font-weight: 400;
    display: block;
    width: 100%;
    outline: 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}


.aio-sdk-form .aio-sdk-steps-container{
    display: flex;
    width:100%;
    justify-content: center;
    gap: var(--aio-sdk-form-steps-gap);
    margin-bottom: var(--aio-sdk-form-steps-margin);
}

.aio-sdk-form .aio-sdk-step-container{
    display: flex;
    position: relative;
    color: var(--aio-sdk-form-step-color);
    font-size: var(--aio-sdk-form-step-font-size);
    border-color: var(--aio-sdk-form-step-border);
    background: var(--aio-sdk-form-step-bg);
    border-radius: 100%;
    text-align: center;
    width: var(--aio-sdk-form-step-diameter);
    height: var(--aio-sdk-form-step-diameter);
    border-width: 1px;
    border-style: solid;
    align-items: center;
    justify-content: center;
    transition: all 50ms ease-out;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.aio-sdk-form .aio-sdk-step-container:after{
    position: absolute;
    background: var(--aio-sdk-form-step-line-color);
    content: " ";
    top:50%;
    right:0;
    height:1px;
    width:var(--aio-sdk-form-steps-gap);
    margin-right:calc(var(--aio-sdk-form-steps-gap) * -1)
}

.aio-sdk-form .aio-sdk-step-container:last-child:after{
    display: none;
}

.aio-sdk-form .aio-sdk-step-container-active{
    color: var(--aio-sdk-form-step-active-color);
    border-color: var(--aio-sdk-form-step-active-border);
    background: var(--aio-sdk-form-step-active-bg);
}

.aio-sdk-form select.aio-sdk-input:invalid {
    font-size: var(--aio-sdk-input-font-size);
    color: gray;
}

.aio-sdk-form select.aio-sdk-input {
    font-size: var(--aio-sdk-input-font-size);

    font-weight: 400;
}



.aio-sdk-form .aio-sdk-input-container textarea{
    height: var(--aio-sdk-input-textarea-size);
    resize: none;
    font-size: var(--aio-sdk-input-font-size);

    font-weight: 400;
}

.aio-sdk-form .aio-sdk-input-checkbox-container{
    display: flex;
    align-items: start;
    flex-direction: row;
    gap: var(--aio-sdk-input-checkbox-gap);
    color: var(--aio-sdk-input-label-color);
    font-size: var(--aio-sdk-input-label-font-size);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.aio-sdk-form .aio-sdk-input-label{
    font-weight: bold;
    margin-bottom: var(--aio-sdk-input-label-margin);
    color: var(--aio-sdk-input-label-color);
    font-size: var(--aio-sdk-input-label-font-size);
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.aio-sdk-form .aio-sdk-input-checkbox-container label{
    cursor: pointer;
}

.aio-sdk-form .aio-sdk-layout-container{

}

.aio-sdk-form .aio-sdk-row-container{
    display: flex;
    gap: var(--aio-sdk-form-layout-gap);
}

.aio-sdk-form .aio-sdk-column-container{
    width: 100%;
}

.aio-sdk-form button[type=submit] {

    box-shadow: var(--aio-sdk-submit-bg) 0 0 0 0;
    background: var(--aio-sdk-submit-bg);
    border-color: var(--aio-sdk-submit-bg);
    color: var(--aio-sdk-submit-color);
    padding: var(--aio-sdk-submit-padding);
    border: 1px solid var(--aio-sdk-submit-border);
    border-radius: var(--aio-sdk-submit-border-radius);

    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--aio-sdk-submit-font-size);
    animation: 2s ease 0s infinite normal none running aio-sdk-pulsing;
    transition: 50ms ease-out;

    outline: 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.aio-sdk-form input[type=submit]:hover {
    background: hsl(from var(--aio-sdk-submit-bg) h s calc(l - 10));
}

@keyframes aio-sdk-pulsing {
    100% {
        box-shadow: transparent 0 0 0 10px
    }
}

.aio-sdk-form .itit-aio {
    width: 100%;
    display: block;
}

.itit-aio--container{
    z-index:10000;
}
:root {
  --iti-border-gray: #ccc;
  --iti-text-gray: #999;
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-border-color: var(--iti-border-gray);
  --iti-dialcode-color: var(--iti-text-gray);
  --iti-dropdown-bg: white;
  --iti-spacer-horizontal: 8px;
  --iti-flag-height: 15px;
  --iti-flag-width: 20px;
  --iti-border-width: 1px;
  --iti-arrow-height: 4px;
  --iti-arrow-width: 6px;
  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
  --iti-arrow-padding: 6px;
  --iti-arrow-color: #555;
  --iti-input-padding: 6px;
  --iti-right-hand-selected-country-padding: calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));
  --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));
  --iti-flag-sprite-height: 15px;
  --iti-mobile-popup-margin: 30px;
}

.itit-aio {
  position: relative;
  display: inline-block;
}
.itit-aio * {
  box-sizing: border-box;
}
.itit-aio__hide {
  display: none;
}
.itit-aio__v-hide {
  visibility: hidden;
}
.itit-aio__a11y-text {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}
.itit-aio input.itit-aio__tel-input,
.itit-aio input.itit-aio__tel-input[type=text],
.itit-aio input.itit-aio__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: var(--iti-right-hand-selected-country-padding);
  margin-right: 0;
}
.itit-aio__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: var(--iti-border-width);
}
.itit-aio__selected-country {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.itit-aio__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.itit-aio__arrow {
  margin-left: var(--iti-arrow-padding);
  width: 0;
  height: 0;
  border-left: var(--iti-triangle-border) solid transparent;
  border-right: var(--iti-triangle-border) solid transparent;
  border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
[dir=rtl] .itit-aio__arrow {
  margin-right: var(--iti-arrow-padding);
  margin-left: 0;
}
.itit-aio__arrow--up {
  border-top: none;
  border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
}
.itit-aio__dropdown-content {
  border-radius: 3px;
  background-color: var(--iti-dropdown-bg);
}
.itit-aio--inline-dropdown .itit-aio__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-top: 3px;
  margin-left: calc(var(--iti-border-width) * -1);
  border: var(--iti-border-width) solid var(--iti-border-color);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.itit-aio__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  padding: 9px 12px;
}
.itit-aio__search-input + .itit-aio__country-list {
  border-top: 1px solid var(--iti-border-color);
}
.itit-aio__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.itit-aio--inline-dropdown .itit-aio__country-list {
  max-height: 185px;
}
.itit-aio--flexible-dropdown-width .itit-aio__country-list {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .itit-aio--flexible-dropdown-width .itit-aio__country-list {
    white-space: normal;
  }
}
.itit-aio__flag-box {
  display: inline-block;
  width: var(--iti-flag-width);
}
.itit-aio__country {
  display: flex;
  align-items: center;
  padding: 8px var(--iti-spacer-horizontal);
  outline: none;
}
.itit-aio__dial-code {
  color: var(--iti-dialcode-color);
}
.itit-aio__country.itit-aio__highlight {
  background-color: var(--iti-hover-color);
}
.itit-aio__flag-box, .itit-aio__country-name {
  margin-right: var(--iti-spacer-horizontal);
}
[dir=rtl] .itit-aio__flag-box, [dir=rtl] .itit-aio__country-name {
  margin-right: 0;
  margin-left: var(--iti-spacer-horizontal);
}
.itit-aio--allow-dropdown input.itit-aio__tel-input,
.itit-aio--allow-dropdown input.itit-aio__tel-input[type=text],
.itit-aio--allow-dropdown input.itit-aio__tel-input[type=tel] {
  padding-right: var(--iti-input-padding);
  padding-left: var(--iti-selected-country-arrow-padding);
  margin-left: 0;
}
[dir=rtl] .itit-aio--allow-dropdown input.itit-aio__tel-input,
[dir=rtl] .itit-aio--allow-dropdown input.itit-aio__tel-input[type=text],
[dir=rtl] .itit-aio--allow-dropdown input.itit-aio__tel-input[type=tel] {
  padding-right: var(--iti-selected-country-arrow-padding);
  padding-left: var(--iti-input-padding);
  margin-right: 0;
}
.itit-aio--allow-dropdown .itit-aio__country-container {
  right: auto;
  left: 0;
}
[dir=rtl] .itit-aio--allow-dropdown .itit-aio__country-container {
  right: 0;
  left: auto;
}
.itit-aio--allow-dropdown .itit-aio__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover, .itit-aio--allow-dropdown .itit-aio__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button {
  cursor: pointer;
}
.itit-aio--allow-dropdown .itit-aio__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .itit-aio__selected-country-primary:hover,
.itit-aio--allow-dropdown .itit-aio__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .itit-aio__selected-country:has(+ .itit-aio__dropdown-content:hover) .itit-aio__selected-country-primary {
  background-color: var(--iti-hover-color);
}
.itit-aio .itit-aio__selected-dial-code {
  margin-left: 4px;
}
[dir=rtl] .itit-aio .itit-aio__selected-dial-code {
  margin-left: 0;
  margin-right: 4px;
}
.itit-aio--container {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: var(--iti-border-width);
}
.itit-aio--container:hover {
  cursor: pointer;
}

.itit-aio--fullscreen-popup.itit-aio--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: var(--iti-mobile-popup-margin);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.itit-aio--fullscreen-popup .itit-aio__dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}
.itit-aio--fullscreen-popup .itit-aio__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.itit-aio__np {
  --iti-flag-width: 13px;
}

.itit-aio__va, .itit-aio__ch {
  --iti-flag-width: 15px;
}

.itit-aio__ne, .itit-aio__be {
  --iti-flag-width: 18px;
}

.itit-aio__mc {
  --iti-flag-width: 19px;
}

.itit-aio__zw, .itit-aio__ws, .itit-aio__vg, .itit-aio__uz, .itit-aio__uk, .itit-aio__tv, .itit-aio__to, .itit-aio__tl, .itit-aio__tk, .itit-aio__tj, .itit-aio__tc, .itit-aio__ta, .itit-aio__su, .itit-aio__st, .itit-aio__ss, .itit-aio__si, .itit-aio__sh, .itit-aio__sd, .itit-aio__sc, .itit-aio__sb, .itit-aio__ps, .itit-aio__pn, .itit-aio__ph, .itit-aio__om, .itit-aio__nz, .itit-aio__nu, .itit-aio__nr, .itit-aio__ng, .itit-aio__nf, .itit-aio__nc, .itit-aio__my, .itit-aio__ms, .itit-aio__mp, .itit-aio__mn, .itit-aio__mk, .itit-aio__me, .itit-aio__md, .itit-aio__ly, .itit-aio__lv, .itit-aio__lk, .itit-aio__lc, .itit-aio__kz, .itit-aio__ky, .itit-aio__kw, .itit-aio__kp, .itit-aio__ki, .itit-aio__jo, .itit-aio__jm, .itit-aio__io, .itit-aio__im, .itit-aio__ie, .itit-aio__hu, .itit-aio__hr, .itit-aio__hn, .itit-aio__hm, .itit-aio__gw, .itit-aio__gs, .itit-aio__gi, .itit-aio__gb, .itit-aio__fk, .itit-aio__fj, .itit-aio__et, .itit-aio__er, .itit-aio__eh, .itit-aio__dm, .itit-aio__dg, .itit-aio__cx, .itit-aio__cu, .itit-aio__ck, .itit-aio__cc, .itit-aio__ca, .itit-aio__by, .itit-aio__bs, .itit-aio__bn, .itit-aio__bm, .itit-aio__ba, .itit-aio__az, .itit-aio__au, .itit-aio__as, .itit-aio__am, .itit-aio__ai, .itit-aio__ae, .itit-aio__ac {
  --iti-flag-height: 10px;
}

.itit-aio__us, .itit-aio__um, .itit-aio__py, .itit-aio__mh, .itit-aio__lr, .itit-aio__gu, .itit-aio__fm {
  --iti-flag-height: 11px;
}

.itit-aio__vu, .itit-aio__tt, .itit-aio__sv, .itit-aio__ni, .itit-aio__mx, .itit-aio__lu, .itit-aio__lt, .itit-aio__li, .itit-aio__km, .itit-aio__kg, .itit-aio__je, .itit-aio__ir, .itit-aio__ht, .itit-aio__gy, .itit-aio__gd, .itit-aio__fi, .itit-aio__de, .itit-aio__cv, .itit-aio__cr, .itit-aio__cq, .itit-aio__bz, .itit-aio__bi, .itit-aio__bh, .itit-aio__bg, .itit-aio__bd {
  --iti-flag-height: 12px;
}

.itit-aio__tg, .itit-aio__se, .itit-aio__pw, .itit-aio__pl, .itit-aio__kh, .itit-aio__gt, .itit-aio__ee, .itit-aio__ax, .itit-aio__ar {
  --iti-flag-height: 13px;
}

.itit-aio__xk, .itit-aio__va, .itit-aio__sm, .itit-aio__sj, .itit-aio__pg, .itit-aio__np, .itit-aio__no, .itit-aio__ne, .itit-aio__mc, .itit-aio__is, .itit-aio__il, .itit-aio__ga, .itit-aio__fo, .itit-aio__dk, .itit-aio__ch, .itit-aio__cd, .itit-aio__bv, .itit-aio__be, .itit-aio__al {
  --iti-flag-height: 15px;
}

.itit-aio__qa {
  --iti-flag-height: 8px;
}


.aio-sdk-modal {
    display: none;

    --aio-sdk-modal-max-width: 500px;

    --aio-sdk-modal-header-padding: 10px 20px;
    --aio-sdk-modal-body-padding: 20px 20px;
    --aio-sdk-modal-footer-padding: var(--aio-sdk-modal-header-padding);

    --aio-sdk-modal-backdrop-color: rgba(0, 0, 0, 0.5);
    --aio-sdk-modal-bg-color: white;
    --aio-sdk-modal-border: #ced4da;
    --aio-sdk-modal-border-radius: 0;

    --aio-sdk-modal-button-bg: #60359b;
    --aio-sdk-modal-button-color: white;
    --aio-sdk-modal-button-padding: 10px 15px;
    --aio-sdk-modal-button-border: #ced4da;
    --aio-sdk-modal-button-border-radius: 0px;

    --aio-sdk-modal-button-danger-bg: #ff1313;
    --aio-sdk-modal-button-danger-color: white;

    --aio-sdk-modal-button-success-bg: #0fac32;
    --aio-sdk-modal-button-success-color: white;

}

.aio-sdk-modal.aio-sdk-modal-opened {
    position: fixed;
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    overflow: hidden auto;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 999;
    background: var(--aio-sdk-modal-backdrop-color);
}

.aio-sdk-modal .aio-sdk-modal-content {
    max-width: var(--aio-sdk-modal-max-width);
    background: var(--aio-sdk-modal-bg-color);
    border: 1px solid var(--aio-sdk-modal-border);
    border-radius: var(--aio-sdk-modal-border-radius);
    overflow: hidden;
    position: relative;
    z-index: 1;
    min-height: 0;
    margin: auto;
}


.aio-sdk-modal .aio-sdk-modal-header {
    padding: var(--aio-sdk-modal-header-padding);
    background-color: #f4f5fd;
    border-bottom: 1px solid var(--aio-sdk-modal-border);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -.04em;
}

.aio-sdk-modal .aio-sdk-modal-body {
    padding: var(--aio-sdk-modal-body-padding);
}

.aio-sdk-modal .aio-sdk-modal-footer {
    padding: var(--aio-sdk-modal-footer-padding);
    background-color: #f4f5fd;
    border-top: 1px solid var(--aio-sdk-modal-border);
    display: flex;
    gap: 10px;
}

.aio-sdk-modal .aio-sdk-modal-button {
    box-shadow: var(--aio-sdk-modal-button-bg) 0 0 0 0;
    background: var(--aio-sdk-modal-button-bg);
    border-color: var(--aio-sdk-modal-button-bg);
    color: var(--aio-sdk-modal-button-color);
    padding: var(--aio-sdk-modal-button-padding);
    border: 1px solid var(--aio-sdk-modal-button-border);
    border-radius: var(--aio-sdk-modal-button-border-radius);

    text-transform: uppercase;
    font-weight: 700;
    animation: 2s ease 0s infinite normal none running aio-sdk-pulsing;
    transition: 50ms ease-out;

    outline: 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    width: 100%;
}

.aio-sdk-modal .aio-sdk-modal-button-success {
    box-shadow: var(--aio-sdk-modal-button-success-bg) 0 0 0 0;
    background: var(--aio-sdk-modal-button-success-bg);
    border-color: var(--aio-sdk-modal-button-success-bg);
    color: var(--aio-sdk-modal-button-success-color);
}

.aio-sdk-modal .aio-sdk-modal-button-danger {
    box-shadow: var(--aio-sdk-modal-button-danger-bg) 0 0 0 0;
    background: var(--aio-sdk-modal-button-danger-bg);
    border-color: var(--aio-sdk-modal-button-danger-bg);
    color: var(--aio-sdk-modal-button-danger-color);
}
