/**************** NORMALIZE ****************//**************** NORMALIZE ****************//**************** NORMALIZE ****************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, div, details, fieldset, figcaption, figure, form, footer, h1, h2, h3, h4, h5, h6, header, hgroup, legend, menu, nav, section {display: block; position: relative;}

html {direction: ltr; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; box-sizing: border-box;}
body {direction: ltr; font-family: sans-serif; font-style: normal; font-weight: normal; font-stretch: 100%; font-size: 100%; line-height: 1; text-align: start; letter-spacing: 0px; background-color: hsla(0,0%,100%,1);}
html[dir="rtl"] {direction: rtl;} html[dir="rtl"] body {direction: rtl;}
*, *:before, *:after {box-sizing: inherit;}
a {text-decoration: none; background-color: transparent;}
h1, h2, h3, h4, h5, h6 {font-size: inherit; font-weight: inherit;}
b, i {font-style: inherit; font-weight: inherit;}
ol, ul {display: block; position: relative; list-style: none;} li {display: block; position: relative; list-style-type: none; box-sizing: border-box;}
blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
video:fullscreen {object-fit: contain !important;}

input, select {vertical-align: middle;} textarea {resize: none;} input[disabled] {cursor: default;} input::-moz-focus-inner {border: 0; padding: 0;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;} input[type="number"] {appearance: textfield;}
input[type="number"].arrows::-webkit-outer-spin-button, input[type="number"].arrows::-webkit-inner-spin-button {-webkit-appearance: auto;} input[type="number"].arrows {appearance: auto;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
html[dir="rtl"] input[type="date"] {text-align: right;} html[dir="rtl"] input[type="tel"] {direction: ltr; text-align: right;} html[dir="rtl"] input[type="tel"]:placeholder-shown {direction: rtl; text-align: right;}



/**************** ISO CLASSES ****************//**************** ISO CLASSES ****************//**************** ISO CLASSES ****************/

.iso-block {display: block !important;} .iso-inline {display: inline !important;} .iso-inblock {display: inline-block !important;}
.iso-overflow {overflow: hidden !important;} .iso-clear:after {content: ""; display: block; width: 0px; height: 0px; clear: both; visibility: hidden;}
.iso-hide {display: none !important; opacity: 0 !important; pointer-events: none !important;} .iso-wait {opacity: 0.5; cursor: default; pointer-events: none;}
.iso-nopoint {pointer-events: none;} .iso-scroll-hide {-ms-overflow-style: none; scrollbar-width: none;} .iso-scroll-hide::-webkit-scrollbar {display: none;}

.iso-text-start {text-align: start !important;} .iso-text-start input, .iso-text-start textarea {text-align: start !important;} 
.iso-text-end {text-align: end !important;} .iso-text-end input, .iso-text-end textarea {text-align: end !important;} 
.iso-text-left {text-align: left !important;} .iso-text-left input, .iso-text-left textarea {text-align: left !important;} 
.iso-text-right {text-align: right !important;} .iso-text-right input, .iso-text-right textarea {text-align: right !important;}
.iso-text-center {text-align: center !important;} .iso-text-center input, .iso-text-center textarea {text-align: center !important;}
.iso-text-uppercase {text-transform: uppercase;} .iso-text-capitalize {text-transform: capitalize;}
.iso-text-break {word-wrap: break-word; word-break: break-word; overflow-wrap: anywhere;}
.iso-text-nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.iso-text-for-copy {width: 1px; height: 1px; opacity: 0; overflow: hidden;}

@keyframes iso-sync-rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }



/**************** FLEX CLASSES ****************//**************** FLEX CLASSES ****************//**************** FLEX CLASSES ****************/

[class~="flex"], [class^="flex-"], [class*=" flex-"] {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start;}
[class~="flex"] > *, [class^="flex-"] > *, [class*=" flex-"] > * {flex: 0 0 auto;}
[class~="flex"] > .nofix, [class^="flex-"] > .nofix, [class*=" flex-"] > .nofix {flex: 1 1 auto; width: auto; min-width: 0px; max-width: 100%;}

.flex-rerow {flex-direction: row-reverse;} .flex-column {flex-direction: column;} .flex-recolumn {flex-direction: column-reverse;}
.flex-nowrap {flex-wrap: nowrap;} .flex-rewrap {flex-wrap: wrap-reverse;} .flex-end {justify-content: flex-end;}
.flex-between {justify-content: space-between;} .flex-around {justify-content: space-around;} .flex-center {justify-content: center;}
.flex-iend {align-items: flex-end;} .flex-icenter {align-items: center;} .flex-ibaseline {align-items: baseline;} .flex-istretch {align-items: stretch;}
.flex-cend {align-content: flex-end;} .flex-ccenter {align-content: center;}  .flex-cbetween {align-content: space-between;} .flex-caround {align-content: space-around;}
.flex-vcenter {align-items: center; align-content: center;} .flex-acenter {justify-content: center; align-items: center; align-content: center;}



/**************** POPUP ****************//**************** POPUP ****************//**************** POPUP ****************/

#noclick {display: none; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 99999999999999999999;}






/**************** SCROLLBAR ****************//**************** SCROLLBAR ****************//**************** SCROLLBAR ****************/

body.noscroll {overflow: hidden !important;}

.scrollbar {width: 100%; height: 100%;}
.scrollfix {width: 100%;}

body > .oscroll-theme-body {
    --os-size: 12px;
    --os-padding-perpendicular: 0px;

    --os-track-border-radius: 0px;
    --os-track-bg: hsla(0,0%,0%,0.18);
    --os-track-bg-hover: hsla(0,0%,0%,0.18);
    --os-track-bg-active: hsla(0,0%,0%,0.18);

    --os-handle-bg: hsla(0,0%,0%,0.36);
    --os-handle-bg-hover: hsla(0,0%,0%,0.36);
    --os-handle-bg-active: hsla(0,0%,0%,0.36);
    --os-handle-border-radius: 0px;
    --os-handle-min-size: 30px;
}

.scrollbar > .oscroll-theme-scrollbar {
    --os-size: 9px;
    --os-padding-perpendicular: 0px;

    --os-track-border-radius: 0px;
    --os-track-bg: hsla(0,0%,0%,0.18);
    --os-track-bg-hover: hsla(0,0%,0%,0.18);
    --os-track-bg-active: hsla(0,0%,0%,0.18);

    --os-handle-bg: hsla(0,0%,0%,0.36);
    --os-handle-bg-hover: hsla(0,0%,0%,0.36);
    --os-handle-bg-active: hsla(0,0%,0%,0.36);
    --os-handle-border-radius: 0px;
    --os-handle-min-size: 30px;
}

.scrollbar > .oscroll-theme-touch {
    --os-size: 9px;
    --os-padding-perpendicular: 0px;

    --os-track-border-radius: 0px;
    --os-track-bg: hsla(0,0%,100%,0.12);
    --os-track-bg-hover: hsla(0,0%,100%,0.12);
    --os-track-bg-active: hsla(0,0%,100%,0.12);

    --os-handle-bg: hsla(0,0%,100%,0.24);
    --os-handle-bg-hover: hsla(0,0%,100%,0.24);
    --os-handle-bg-active: hsla(0,0%,100%,0.24);
    --os-handle-border-radius: 0px;
    --os-handle-min-size: 30px;
}



/**************** BUTTON ****************//**************** BUTTON ****************//**************** BUTTON ****************/

button, input[type="button"], input[type="submit"], input[type="reset"] {all: unset; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;}
:is(button, .button) {
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
  gap: 12px; position: relative; height: 48px; font-weight: 700; font-size: 16px; line-height: 1; text-align: center; color: var(--blue-dark); background-color: var(--yellow); border-radius: 12px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-sizing: border-box; cursor: pointer;
}
:is(button, .button) > i {
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
  position: relative; aspect-ratio: 1; width: 18px;
}
:is(button, .button) > i > svg {display: block; width: 100%; height: 100%; fill: var(--white);}
:is(button, .button) > b {display: block; flex: 1 1 auto; width: auto; min-width: 0px; max-width: 100%; font-weight: inherit; color: inherit;}

:is(button, .button).icon {gap: 0px;}
:is(button, .button).list {text-align: start;}

:is(button, .button).border {color: var(--blue-dark); background-color: transparent; border-style: solid; border-width: 2px; border-color: var(--yellow);}
:is(button, .button).border > i > svg {fill: var(--yellow);}
:is(button, .button).round {padding: 0px 30px; border-radius: 9999px;}



/**************** SELECT ****************//**************** SELECT ****************//**************** SELECT ****************/

.select {position: relative;}
.select .head {width: auto;}
.select .drop {display: none; position: absolute; opacity: 0; transform: translateY(-12px); transition: opacity ease 240ms, transform ease 240ms; z-index: 100;}
.select.open .drop {opacity: 1; transform: translateY(0);}



/**************** FORM BOX ****************//**************** FORM BOX ****************//**************** FORM BOX ****************/

input::placeholder, textarea::placeholder {color: var(--grey-text-light); transition: color linear 60ms;}
input:focus::placeholder, textarea:focus::placeholder {color: transparent;}

input.ltr {direction: ltr; text-align: right !important;}
input.ltr::placeholder {direction: rtl; unicode-bidi: plaintext; text-align: right !important;}

input[type="date"] {position: relative;}
input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: auto; height: auto; color: transparent; background: transparent;}

.form-box {width: 100%; padding: 12px; background-color: var(--white); border-radius: 18px;}

.form-box .form-title {width: 100%; padding: 12px; font-weight: 700; font-size: 24px; color: var(--yellow);}
.form-box .form-line {width: 100%; padding: 12px;}
.form-box .form-line i {display: block; width: 100%; height: 1px; background-color: var(--yellow);}

.form-box .field-box {width: 100%; padding: 12px;}
.form-box .field-box.w25pc {width: 25%;}
.form-box .field-box.w33pc {width: 33.33%;}
.form-box .field-box.w50pc {width: 50%;}
.form-box .field-box.w66pc {width: 66.66%;}
.form-box .field-box.w75pc {width: 75%;}

.form-box .field-box legend {display: block; width: 100%; height: 23px; padding: 0px 6px 9px 0px; font-weight: 700; font-size: 14px; color: var(--blue-dark); box-sizing: border-box;}
.form-box .field-box .field {width: 100%; height: 48px; background-color: var(--grey-main-bg); border: solid 1px var(--grey-main-br); border-radius: 12px; overflow: hidden;}
.form-box .field-box .field.textarea {height: 74px;}

.form-box .field-box .field input, .form-box .field-box .field select, .form-box .field-box .field textarea {
    display: block; width: 100%; height: 100%; font-family: 'IBM Plex Sans Hebrew', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; text-align: start; letter-spacing: 0px;
    color: var(--blue-dark); background-color: transparent; border: none; border-radius: 0px; outline: none;
}
.form-box .field-box .field input {padding: 0px 12px;}
.form-box .field-box .field textarea {padding: 6px 12px;}

.form-box .field-box .field.checker {height: auto; background-color: transparent; border: none; overflow: visible;}
.form-box .field-box .field .check-list {margin: -6px 0px -6px 0px;}
.form-box .field-box .field .check-box {padding: 6px 0px 6px 0px; user-select: none;}
.form-box .field-box .field .check-box .check {width: 18px; height: 18px; padding: 2px; background-color: var(--grey-main-bg); border: solid 1px var(--grey-main-br); border-radius: 4px; cursor: pointer;}
.form-box .field-box .field .check-box .check svg {display: block; width: 100%; height: 100%; fill: var(--yellow); opacity: 0;}
.form-box .field-box .field .check-box .name {height: 18px; padding: 0px 12px 0px 0px; font-weight: 700; font-size: 14px; line-height: 18px; color: var(--blue-dark); cursor: pointer;}
.form-box .field-box .field .check-box.sel .check {border-color: var(--yellow);}
.form-box .field-box .field .check-box.sel .check svg {opacity: 1;}

.form-box .field-box.focus legend {color: var(--blue-dark);}
.form-box .field-box.focus .field {border-color: var(--yellow);}

.form-box .field-box.error legend {color: var(--red-main-br);}
.form-box .field-box.error .field {border-color: var(--red-main-br);}


@media screen and (max-width: 800px) {
    .form-box {padding: 9px;}
    .form-box .form-title {padding: 12px 9px;}
    .form-box .form-line {padding: 9px;}
    .form-box .field-box {padding: 9px;}
}

@media screen and (max-width: 500px) {
    .form-box .field-box.w50pc {width: 100%;}
}