@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

:root {
  --font-family: "Inter", sans-serif;
  --font-family1: "Inter", sans-serif;
  --font-family2: "Inter", sans-serif;
  --color1: #e71b36;
  --color2: #e71b36;
  --color3: #f8492a;
  --color4: #d6559e;
  --color5: #d14f50;
  --color6: #06ca20;
  --inputColor: light-dark(#e71b36, #000f38);
  --text-color: light-dark(#0f0f0f, #e0e0e0);
  --bg-color: light-dark(#ffffff, #121212);
  --radius: 20px;
  --inputRadius: 30px;
  --btnRadius: 30px;
  --section-space-x: clamp(1.5rem, 4vw, 3rem);
  --section-space-y: clamp(1.5rem, 4vw, 4rem);
  --section-max-width: 100%;
  --container-max-width: 100%;
  --highlight: var(--color1);
  --white: #ffffff;
  --lightGray: #fafafa;
  --borderGray: #f3f5f7;
  --visibleGray: #e2e2e2;
  --textGray: #898989;
  --gray: #454545;
  --darkGray: #242323;
  --black: #0a0a0a;
  --red: #ec4c4c;
  --green: #3cc274;
  --blue: #546bd4;
  --yellow: #f5a905;
  --inputColor1: color-mix(in srgb, var(--inputColor), var(--bg-color) 97%);
  --inputColor2: color-mix(in srgb, var(--inputColor), var(--bg-color) 90%);
  --inputColor3: color-mix(in srgb, var(--inputColor), var(--bg-color) 70%);
  --inputColor4: color-mix(in srgb, var(--inputColor), var(--bg-color) 50%);
  --inputColor5: color-mix(in srgb, var(--inputColor), var(--bg-color) 30%);
  --input-size: .75rem;
  --gradient1: linear-gradient(53deg, rgb(255, 41, 70) 0%, rgb(255, 36, 28) 100%);
  --gradient2: linear-gradient(to right top, #111118, #13151a, #15181c, #181b1e, #1b1e20, #1c1f21, #1d1f22, #1e2023, #1d1f23, #1c1e22, #1b1c22, #1b1b21);
  --gradient3: radial-gradient(at 98.6% 68.3%, #ecffd4 0px, transparent 50%), radial-gradient(at 4.8% 63.1%, #f2f5ff 0px, transparent 50%), radial-gradient(at 7.8% 85.1%, #bdd4ff 0px, transparent 50%), radial-gradient(at 21% 80.7%, #c9dcff 0px, transparent 50%), radial-gradient(at 64.3% 80.3%, #eaffe6 0px, transparent 50%);
  --transition1: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition2: all .5s cubic-bezier(0.77, 0, 0.175, 1);
  --transition3: 0.7s cubic-bezier(0.37, 0, 0.63, 1);
  --shadow-1: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --shadow-2: rgba(0, 0, 0, 0.075) 0px 3px 6px, rgba(0, 0, 0, 0.116) 0px 3px 6px;
  --shadow-3: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --shade-1: color-mix(in srgb, var(--bg-color), #fdfdfd 80%);
  --shade-2: color-mix(in srgb, var(--bg-color), #ecf0ef 70%);
  --shade-3: color-mix(in srgb, var(--bg-color), #d9dfde 50%);
  --shade-4: color-mix(in srgb, var(--bg-color), #b0b6b1 40%);
  --shade-5: color-mix(in srgb, var(--bg-color), #8a8e8b 20%)
}

.section {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.sectionLeft,
.section-left {
  clear: both;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.sectionRight,
.section-right {
  clear: both;
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.innerSection {
  width: 100%;
  padding-right: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-left: clamp(0px, (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  margin: 0 auto
}

.sectionPadding {
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y)
}

.sectionPaddingTop {
  padding-top: var(--section-space-y)
}

.sectionPaddingBottom {
  padding-bottom: var(--section-space-y)
}

.btnDiv {
  margin-top: 1.413rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: clamp(16px, 1.5vw, 20px)
}

.btnDiv a,
.btnDiv button {
  margin: 0
}

a,
button,
[type=button] {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: inherit;
  background-color: rgba(0, 0, 0, 0);
  -webkit-writing-mode: horizontal-tb;
  text-rendering: auto;
  list-style: 1;
  cursor: pointer
}

a:disabled,
button:disabled,
[type=button]:disabled {
  font-weight: 500;
  color: var(--gray);
  background-color: var(--borderGray);
  border: 1px solid var(--borderGray);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .8;
  pointer-events: none;
  cursor: not-allowed
}

a img,
button img,
[type=button] img {
  margin: 0
}

a *,
button *,
[type=button] * {
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.enquiryForm form .btnDiv .backBtn,
.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback],
.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback],
.addonModules .addonModulesBtnDiv .addModuleBtn,
.fileWrapper .uploadedFilesContainer .deleteFileButton,
.linkBtn,
.textBtn,
.outlinedBtn,
.btn2,
.filledTonalBtn,
.filledBtn,
.btn1,
.btn {
  margin-top: 1.413rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  text-align: center;
  border-radius: var(--btnRadius);
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
  -webkit-transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), background-color .5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-box-shadow .5s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn,
.btn1 {
  color: var(--white);
  font-weight: 500;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  background-color: var(--color1);
  border: 1px solid var(--color1);
  -webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .2);
  box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .2)
}

.filledBtn:hover,
.btn1:hover {
  color: var(--white);
  -webkit-filter: brightness(110%);
  filter: brightness(110%);
  border: 1px solid rgba(0, 0, 0, 0);
  -webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .2);
  box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .2);
  -webkit-transition: background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter .5s ease-in, -webkit-box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter .5s ease-in, -webkit-box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: filter .5s ease-in, background-color .3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter .5s ease-in, -webkit-box-shadow .3s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.filledBtn:active,
.btn1:active {
  -webkit-filter: brightness(105%);
  filter: brightness(105%)
}

.filledBtn:visited,
.btn1:visited {
  -webkit-filter: brightness(90%);
  filter: brightness(90%)
}

.filledBtn.secondary,
.btn1.secondary {
  background-color: var(--color2);
  border: 1px solid var(--color2)
}

.filledBtn.tertiary,
.btn1.tertiary {
  background-color: var(--color3);
  border: 1px solid var(--color3)
}

.filledBtn.black,
.btn1.black {
  color: var(--white);
  background-color: var(--black);
  border: 1px solid var(--darkGray)
}

.filledBtn.white,
.btn1.white {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--borderGray)
}

.filledBtn.red,
.btn1.red {
  color: var(--white);
  background-color: var(--red);
  border: 1px solid var(--red)
}

.filledBtn.green,
.btn1.green {
  color: var(--white);
  background-color: var(--green);
  border: 1px solid var(--green)
}

.filledBtn.blue,
.btn1.blue {
  color: var(--white);
  background-color: var(--blue);
  border: 1px solid var(--blue)
}

.filledBtn.elevated,
.btn1.elevated {
  -webkit-box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px hsla(0, 0%, 100%, .048), inset 0 1px 1px hsla(0, 0%, 100%, .2) !important;
  box-shadow: 0 4px 4px rgba(8, 8, 8, .08), 0 1px 2px rgba(8, 8, 8, .2), inset 0 6px 12px hsla(0, 0%, 100%, .048), inset 0 1px 1px hsla(0, 0%, 100%, .2) !important
}

.filledBtn.elevated:hover,
.btn1.elevated:hover {
  -webkit-box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px hsla(0, 0%, 100%, .12), inset 0 1px 1px hsla(0, 0%, 100%, .2) !important;
  box-shadow: 0 1px 1px rgba(8, 8, 8, .08), 0 1px 1px rgba(8, 8, 8, .2), inset 0 6px 12px hsla(0, 0%, 100%, .12), inset 0 1px 1px hsla(0, 0%, 100%, .2) !important
}

.filledBtn .loader::before,
.btn1 .loader::before {
  border-color: var(--white)
}

.filledTonalBtn {
  color: var(--color1);
  background-color: var(--color1)
}

.outlinedBtn,
.btn2 {
  font-weight: 500;
  color: var(--color1);
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--color1)
}

.outlinedBtn:hover,
.btn2:hover {
  opacity: .8
}

.outlinedBtn.secondary,
.btn2.secondary {
  border: 1px solid var(--color2)
}

.outlinedBtn.tertiary,
.btn2.tertiary {
  border: 1px solid var(--color3)
}

.outlinedBtn.black,
.btn2.black {
  color: var(--black);
  border: 1px solid var(--black)
}

.outlinedBtn.white,
.btn2.white {
  color: var(--white);
  border: 1px solid var(--white)
}

.outlinedBtn.gray,
.btn2.gray {
  color: var(--textGray);
  border: 1px solid var(--textGray)
}

.outlinedBtn.red,
.btn2.red {
  color: var(--red);
  border: 1px solid var(--red)
}

.outlinedBtn.green,
.btn2.green {
  color: var(--green);
  border: 1px solid var(--green)
}

.outlinedBtn.blue,
.btn2.blue {
  color: var(--blue);
  border: 1px solid var(--blue)
}

.textBtn {
  color: var(--color1);
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0
}

.textBtn:disabled {
  border-color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0)
}

.textBtn:hover {
  color: var(--white)
}

.textBtn.secondary {
  color: var(--color2)
}

.textBtn.tertiary {
  color: var(--color3)
}

.textBtn.black {
  color: var(--black)
}

.textBtn.white {
  color: var(--white)
}

.textBtn.red {
  color: var(--red)
}

.textBtn.green {
  color: var(--green)
}

.textBtn.blue {
  color: var(--blue)
}

.linkBtn:disabled {
  border-color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0)
}

.linkBtn:hover {
  color: var(--white)
}

.loader {
  display: none;
  width: 15px;
  height: 15px
}

.loader::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0);
  border-width: 2px;
  border-style: solid;
  border-top: 2px solid rgba(0, 0, 0, 0) !important;
  border-radius: 100%;
  -webkit-animation: loader1 .35s linear infinite;
  animation: loader1 .35s linear infinite
}

@-webkit-keyframes loader1 {
  0% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
    transform: translate(0%, 0%) rotate(0deg)
  }

  100% {
    -webkit-transform: translate(0%, 0%) rotate(360deg);
    transform: translate(0%, 0%) rotate(360deg)
  }
}

@keyframes loader1 {
  0% {
    -webkit-transform: translate(0%, 0%) rotate(0deg);
    transform: translate(0%, 0%) rotate(0deg)
  }

  100% {
    -webkit-transform: translate(0%, 0%) rotate(360deg);
    transform: translate(0%, 0%) rotate(360deg)
  }
}

.xxsBtn {
  height: clamp(20px, 5vw, 24px);
  font-size: .878rem;
  padding: 0 8px
}

.xxsIcon {
  height: clamp(20px, 5vw, 24px);
  width: clamp(20px, 5vw, 24px);
  font-size: .878rem
}

.xsBtn {
  height: clamp(25px, 5.5vw, 28px);
  font-size: .937rem;
  padding: 0 16px
}

.xsIcon {
  height: clamp(25px, 5.5vw, 28px);
  height: clamp(25px, 5.5vw, 28px);
  font-size: .937rem
}

.smBtn,
.fileWrapper .uploadedFilesContainer .deleteFileButton {
  height: clamp(29px, 6vw, 32px);
  font-size: .878rem;
  padding: 0 20px
}

.smIcon {
  height: clamp(29px, 6vw, 32px);
  width: clamp(29px, 6vw, 32px);
  font-size: .878rem
}

.mdBtn {
  height: clamp(32px, 6vw, 40px);
  font-size: .878rem;
  padding: 0 16px
}

.mdIcon {
  height: clamp(32px, 6vw, 40px);
  width: clamp(32px, 6vw, 40px);
  font-size: .878rem
}

.lgBtn,
.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback],
.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback],
.addonModules .addonModulesBtnDiv .addModuleBtn {
  height: clamp(45px, 6vw, 48px);
  font-size: .937rem;
  padding: 0 20px
}

.lgIcon {
  height: clamp(45px, 6vw, 48px);
  width: clamp(45px, 6vw, 48px);
  font-size: .937rem
}

.xlBtn {
  height: clamp(53px, 6.5vw, 56px);
  font-size: 1rem;
  padding: 0 24px
}

.xlIcon {
  height: clamp(53px, 6.5vw, 56px);
  width: clamp(53px, 6.5vw, 56px);
  font-size: 1rem
}

.xxlBtn {
  height: clamp(61px, 7vw, 64px);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  padding: 0 28px
}

.xxlIcon {
  height: clamp(61px, 7vw, 64px);
  width: clamp(61px, 7vw, 64px);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
}

.xsCard {
  width: 24.5%;
  min-width: 100px;
  margin-right: .75%;
  margin-left: .75%
}

.smCard {
  width: 49.5%;
  min-width: 100px
}

@media(min-width: 1024px) {
  .smCard {
    width: 32.5%
  }
}

.mdCard {
  width: 100%
}

@media(min-width: 1024px) {
  .mdCard {
    width: 49.5%
  }
}

.xxlCard {
  width: 100%
}

.xlDiv {
  width: 100%;
  min-width: 100%
}

.lgDiv {
  width: 100%;
  min-width: 100%
}

@media(min-width: 768px) {
  .lgDiv {
    width: 49%;
    min-width: 49%
  }
}

@media(min-width: 1024px) {
  .lgDiv {
    width: 74%;
    min-width: 74%
  }
}

.mdDiv {
  width: 100%;
  min-width: 100%
}

@media(min-width: 768px) {
  .mdDiv {
    width: 49%;
    min-width: 49%
  }
}

.smDiv {
  width: 49%;
  min-width: 49%
}

@media(min-width: 768px) {
  .smDiv {
    width: 31.3%;
    min-width: 31.3%
  }
}

.xsDiv {
  width: 49%;
  min-width: 49%
}

@media(min-width: 768px) {
  .xsDiv {
    width: 24%;
    min-width: 24%
  }
}

.xxsDiv {
  width: 18%;
  min-width: 100px
}

::-moz-selection {
  color: var(--white);
  background-color: var(--highlight)
}

::selection {
  color: var(--white);
  background-color: var(--highlight)
}

[mode] .messageBox {
  padding: .5rem 1rem
}

[mode] .messageBox:empty {
  display: none
}

[mode] .messageBox::before {
  display: none;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 100%;
  font-size: .937rem;
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
  line-height: 1
}

[mode=alert] textarea,
[mode=alert] input:not([type=checkbox]):not([type=radio]) {
  border-color: #e78971;
  -webkit-box-shadow: #fddad4 0px 0px 0px 1px;
  box-shadow: #fddad4 0px 0px 0px 1px
}

[mode=alert] .messageBox {
  background-color: #fff1e7;
  color: #ce6122
}

[mode=alert] .messageBox::before {
  content: "";
  color: #dd573f
}

[mode=error] textarea,
[mode=error] input:not([type=checkbox]):not([type=radio]) {
  border-color: #ffb0b0;
  -webkit-box-shadow: #ffe1e1 0px 0px 0px 1px;
  box-shadow: #ffe1e1 0px 0px 0px 1px
}

[mode=error] .messageBox {
  background-color: #ffe7e7;
  color: #ce2222
}

[mode=error] .messageBox::before {
  content: "";
  color: #dd3f3f
}

[mode=success] textarea,
[mode=success] input:not([type=checkbox]):not([type=radio]) {
  border-color: #81d781;
  -webkit-box-shadow: #cbffcb 0px 0px 0px 1px;
  box-shadow: #cbffcb 0px 0px 0px 1px
}

[mode=success] .messageBox {
  background-color: #e8ffe7;
  color: #169c04
}

[mode=success] .messageBox::before {
  content: "";
  color: #3fdd3f
}

[mode=warning] textarea,
[mode=warning] input:not([type=checkbox]):not([type=radio]) {
  border-color: #d7af81;
  -webkit-box-shadow: #ffe7cb 0px 0px 0px 1px;
  box-shadow: #ffe7cb 0px 0px 0px 1px
}

[mode=warning] .messageBox {
  background-color: #fffbe7;
  color: #9c8004
}

[mode=warning] .messageBox::before {
  content: "";
  color: #dd713f
}

[mode=info] .messageBox::before {
  content: "";
  color: #d4d4d4
}

[mode=note] .messageBox::before {
  content: "";
  color: #dfdfdf
}

.messageBox {
  width: 100%;
  min-width: 100%;
  margin-top: 10px;
  color: var(--black);
  font-size: .733rem;
  font-weight: 500;
  border-radius: var(--inputRadius)
}

.messageBox::first-letter {
  text-transform: uppercase
}

.messageBox:empty {
  padding: 0;
  margin-top: 0
}

.formDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%
}

form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%
}

label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--gray);
  font-family: var(--font-family);
  font-size: .878rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: .25rem;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

input,
textarea,
select,
datalist,
selected,
item {
  width: 100%;
  padding: var(--input-size);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-color);
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
datalist::-webkit-input-placeholder,
selected::-webkit-input-placeholder,
item::-webkit-input-placeholder {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  opacity: .65
}

input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
datalist::-moz-placeholder,
selected::-moz-placeholder,
item::-moz-placeholder {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  opacity: .65
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder,
datalist:-ms-input-placeholder,
selected:-ms-input-placeholder,
item:-ms-input-placeholder {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  opacity: .65
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder,
select::-ms-input-placeholder,
datalist::-ms-input-placeholder,
selected::-ms-input-placeholder,
item::-ms-input-placeholder {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  opacity: .65
}

input::placeholder,
textarea::placeholder,
select::placeholder,
datalist::placeholder,
selected::placeholder,
item::placeholder {
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  opacity: .65
}

[country-code]::before {
  content: attr(country-code);
  position: absolute;
  top: 32px;
  left: var(--input-size);
  z-index: 1;
  padding-right: .5rem;
  font-weight: 500;
  border-right: 1px solid var(--inputColor3)
}

[country-code] label {
  left: 60px
}

[country-code] input {
  padding-left: 60px
}

select {
  background-color: rgba(0, 0, 0, 0);
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto
}

textarea {
  min-height: 100px;
  min-width: 100%;
  max-width: 100%;
  vertical-align: top;
  overflow: auto;
  resize: none
}

datalist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

datalist ::-webkit-calendar-picker-indicator {
  display: none;
  background-color: inherit;
  opacity: 0
}

[type=radio],
[type=checkbox],
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  width: 100%
}

::-webkit-calendar-picker-indicator {
  opacity: .6;
  -webkit-filter: invert(0.8);
  filter: invert(0.8)
}

[type=date],
[type=datetime],
[type=time],
[type=datetime-local] {
  text-transform: uppercase
}

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

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

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
  outline: 0 none;
  background: ˇ;
  -webkit-text-fill-color: rgba(0, 0, 0, 0) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s
}

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

input[type=file] {
  text-indent: 11%;
  text-align: center;
  color: var(--black);
  border: 2px dashed var(--inputColor2) !important
}

input[type=file]:hover,
input[type=file]:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important
}

input[type=file]:invalid {
  text-indent: 0
}

input[type=file]:valid {
  text-indent: 12%;
  color: var(--inputColor)
}

input[type=file]:valid::before {
  opacity: 0
}

input[type=file]::-webkit-file-upload-button {
  opacity: 0;
  width: 0;
  margin: 0
}

input[type=file]::file-selector-button {
  opacity: 0;
  width: 0;
  margin: 0
}

input[type=file]::before {
  content: "Upload File";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 20% center;
  background-size: contain;
  pointer-events: none;
  background-color: var(--white);
  text-align: center;
  text-indent: 15px
}

.range-slider .irs {
  width: 100%
}

.range-slider .irs-to,
.range-slider .irs-from {
  background-color: var(--darkGray)
}

.range-slider .irs-single {
  background-color: var(--darkGray)
}

.range-slider .irs--round .irs-bar {
  background-color: var(--inputColor3)
}

.range-slider .irs--round .irs-handle {
  border: 4px solid var(--inputColor4)
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {

  input[type=checkbox],
  input[type=radio] {
    --active: var(--inputColor5);
    --active-inner: #fff;
    --focus: 2px var(--inputColor4);
    --border: var(--borderGray);
    --border-hover: var(--inputColor3);
    --background: var(--white);
    --disabled: var(--inputColor1);
    --disabled-inner: var(--inputColor1);
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    padding: .5rem;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }

  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    left: -1px;
    top: -1px;
    position: absolute;
    -webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease)
  }

  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
  }

  input[type=checkbox]:checked+label,
  input[type=radio]:checked+label {
    color: var(--black) !important
  }

  input[type=checkbox]:checked+label::before,
  input[type=radio]:checked+label::before {
    border: 3px solid var(--color4) !important;
    -webkit-box-shadow: 2px 4px 16px rgba(0, 0, 0, .16) !important;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .16) !important
  }

  input[type=checkbox]:checked+label span,
  input[type=radio]:checked+label span {
    text-shadow: none
  }

  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: .9
  }

  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border)
  }

  input[type=checkbox]:disabled+label,
  input[type=radio]:disabled+label {
    cursor: not-allowed
  }

  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover)
  }

  input[type=checkbox]:focus,
  input[type=radio]:focus {
    -webkit-box-shadow: 0 0 0 var(--focus);
    box-shadow: 0 0 0 var(--focus)
  }

  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: 20px;
    min-width: 20px;
    height: 20px
  }

  input[type=checkbox]:not(.switch):after,
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0)
  }

  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1
  }

  input[type=checkbox]+label,
  input[type=radio]+label {
    font-size: .733rem;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: .5rem
  }

  input[type=checkbox]:not(.switch) {
    border-radius: var(--inputRadius)
  }

  input[type=checkbox]:not(.switch):after {
    width: 4px;
    height: 8px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 2px;
    -webkit-transform: rotate(var(--r, 20deg));
    transform: rotate(var(--r, 20deg))
  }

  input[type=checkbox]:not(.switch):checked {
    --r: 43deg
  }

  input[type=checkbox].switch {
    width: 38px !important;
    border-radius: 11px;
    background: var(--b, var(--background)) !important;
    -webkit-transition-delay: unset !important;
    transition-delay: unset !important
  }

  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    -webkit-transform: translateX(var(--x, 0));
    transform: translateX(var(--x, 0))
  }

  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px
  }

  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: .6
  }

  input[type=radio] {
    border-radius: 50%
  }

  input[type=radio]:after {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    -webkit-transform: scale(var(--s, 0.7));
    transform: scale(var(--s, 0.7))
  }

  input[type=radio]:checked {
    --s: .5
  }
}

input:not([type=radio]):not([type=checkbox]),
textarea,
select,
datalist,
selector selected,
#noteInputElement,
.searchBar,
.dateRange,
.contactSummaryNote {
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor1);
  border-radius: var(--inputRadius);
  -webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0);
  -webkit-transition: border .35s, -webkit-box-shadow .5s !important;
  transition: border .35s, -webkit-box-shadow .5s !important;
  transition: border .35s, box-shadow .5s !important;
  transition: border .35s, box-shadow .5s, -webkit-box-shadow .5s !important
}

input:not([type=radio]):not([type=checkbox]):hover,
textarea:hover,
select:hover,
datalist:hover,
selector selected:hover,
#noteInputElement:hover,
.searchBar:hover,
.dateRange:hover,
.contactSummaryNote:hover {
  border: 1px solid var(--inputColor2)
}

input:not([type=radio]):not([type=checkbox]):focus,
textarea:focus,
select:focus,
datalist:focus,
selector selected:focus,
#noteInputElement:focus,
.searchBar:focus,
.dateRange:focus,
.contactSummaryNote:focus {
  outline: 0;
  background-color: var(--white);
  border: 1px solid var(--inputColor3);
  -webkit-box-shadow: 0 0 0 2.5px var(--inputColor3);
  box-shadow: 0 0 0 2.5px var(--inputColor3)
}

input:not([type=radio]):not([type=checkbox]):active,
textarea:active,
select:active,
datalist:active,
selector selected:active,
#noteInputElement:active,
.searchBar:active,
.dateRange:active,
.contactSummaryNote:active {
  background-color: var(--white);
  border: 1px solid var(--inputColor4)
}

input:not([type=radio]):not([type=checkbox]):visited,
textarea:visited,
select:visited,
datalist:visited,
selector selected:visited,
#noteInputElement:visited,
.searchBar:visited,
.dateRange:visited,
.contactSummaryNote:visited {
  background-color: var(--white);
  border: 1px solid var(--inputColor1)
}

.uploadInput,
.floatingLabel,
.inputDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 1.413rem
}

.uploadInput .inputBox [type=search],
.floatingLabel .inputBox [type=search],
.inputDiv .inputBox [type=search] {
  padding-right: 46px !important
}

.uploadInput .inputBox button,
.floatingLabel .inputBox button,
.inputDiv .inputBox button {
  height: clamp(32px, 6vw, 40px);
  font-size: .878rem;
  padding: 0 16px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: var(--inputRadius);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.uploadInput .inputBox button:hover i,
.floatingLabel .inputBox button:hover i,
.inputDiv .inputBox button:hover i {
  color: var(--color2)
}

.uploadInput .inputBox button i,
.floatingLabel .inputBox button i,
.inputDiv .inputBox button i {
  color: var(--color3);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.uploadInput selector,
.floatingLabel selector,
.inputDiv selector {
  width: 100%
}

.uploadInput .lgIcon,
.floatingLabel .lgIcon,
.inputDiv .lgIcon {
  position: absolute;
  top: 50%;
  right: 5px;
  z-index: 5;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: var(--inputRadius)
}

.inputDiv:has(textarea) .icon {
  top: 10px !important;
  bottom: unset !important
}

.inputDiv:has(.icon) label {
  left: 40px
}

.inputDiv:has(.icon) .icon {
  position: absolute;
  bottom: .75rem;
  left: 0;
  z-index: 1;
  color: inherit;
  opacity: .25
}

.inputDiv:has(.icon) input:not([type=radio]):not([type=checkbox]),
.inputDiv:has(.icon) textarea,
.inputDiv:has(.icon) select,
.inputDiv:has(.icon) datalist {
  padding-left: 40px !important
}

.inputDiv label {
  margin-bottom: 10px
}

.inputDiv input:not([type=radio]):not([type=checkbox]):-webkit-autofill,
.inputDiv textarea:-webkit-autofill,
.inputDiv select:-webkit-autofill,
.inputDiv datalist:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--inputColor1) inset !important;
  -webkit-text-fill-color: var(--black) !important
}

.inputDiv:has(.inputIcon) .inputIcon {
  position: absolute;
  top: 30px;
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  border-radius: inherit;
  width: 30px;
  height: 30px;
  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;
  color: inherit
}

.inputDiv:has(.inputIcon) label:not(:has(input)) {
  position: absolute;
  top: 6px;
  left: 50px;
  font-size: 14px;
  z-index: 1;
  color: inherit
}

.inputDiv:has(.inputIcon) input:not([type=radio]):not([type=checkbox]),
.inputDiv:has(.inputIcon) textarea,
.inputDiv:has(.inputIcon) select,
.inputDiv:has(.inputIcon) datalist,
.inputDiv:has(.inputIcon) selector selected,
.inputDiv:has(.inputIcon) select {
  padding-top: 27px;
  padding-left: 50px;
  padding-bottom: 7px
}

.floatingLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.floatingLabel label {
  position: absolute;
  top: 20px;
  left: 6px;
  padding: .25rem .5rem;
  pointer-events: none;
  display: block;
  z-index: 2
}

.floatingLabel input,
.floatingLabel textarea,
.floatingLabel select {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0)
}

.floatingLabel input::-webkit-input-placeholder,
.floatingLabel textarea::-webkit-input-placeholder,
.floatingLabel select::-webkit-input-placeholder {
  opacity: 0
}

.floatingLabel input::-moz-placeholder,
.floatingLabel textarea::-moz-placeholder,
.floatingLabel select::-moz-placeholder {
  opacity: 0
}

.floatingLabel input:-ms-input-placeholder,
.floatingLabel textarea:-ms-input-placeholder,
.floatingLabel select:-ms-input-placeholder {
  opacity: 0
}

.floatingLabel input::-ms-input-placeholder,
.floatingLabel textarea::-ms-input-placeholder,
.floatingLabel select::-ms-input-placeholder {
  opacity: 0
}

.floatingLabel input::placeholder,
.floatingLabel textarea::placeholder,
.floatingLabel select::placeholder {
  opacity: 0
}

.floatingLabel input:focus,
.floatingLabel input:valid,
.floatingLabel textarea:focus,
.floatingLabel textarea:valid,
.floatingLabel select:focus,
.floatingLabel select:valid {
  color: var(--black)
}

.floatingLabel input:focus::-webkit-input-placeholder,
.floatingLabel input:valid::-webkit-input-placeholder,
.floatingLabel textarea:focus::-webkit-input-placeholder,
.floatingLabel textarea:valid::-webkit-input-placeholder,
.floatingLabel select:focus::-webkit-input-placeholder,
.floatingLabel select:valid::-webkit-input-placeholder {
  opacity: 1
}

.floatingLabel input:focus::-moz-placeholder,
.floatingLabel input:valid::-moz-placeholder,
.floatingLabel textarea:focus::-moz-placeholder,
.floatingLabel textarea:valid::-moz-placeholder,
.floatingLabel select:focus::-moz-placeholder,
.floatingLabel select:valid::-moz-placeholder {
  opacity: 1
}

.floatingLabel input:focus:-ms-input-placeholder,
.floatingLabel input:valid:-ms-input-placeholder,
.floatingLabel textarea:focus:-ms-input-placeholder,
.floatingLabel textarea:valid:-ms-input-placeholder,
.floatingLabel select:focus:-ms-input-placeholder,
.floatingLabel select:valid:-ms-input-placeholder {
  opacity: 1
}

.floatingLabel input:focus::-ms-input-placeholder,
.floatingLabel input:valid::-ms-input-placeholder,
.floatingLabel textarea:focus::-ms-input-placeholder,
.floatingLabel textarea:valid::-ms-input-placeholder,
.floatingLabel select:focus::-ms-input-placeholder,
.floatingLabel select:valid::-ms-input-placeholder {
  opacity: 1
}

.floatingLabel input:focus::placeholder,
.floatingLabel input:valid::placeholder,
.floatingLabel textarea:focus::placeholder,
.floatingLabel textarea:valid::placeholder,
.floatingLabel select:focus::placeholder,
.floatingLabel select:valid::placeholder {
  opacity: 1
}

.floatingLabel input:focus~label,
.floatingLabel input:valid~label,
.floatingLabel textarea:focus~label,
.floatingLabel textarea:valid~label,
.floatingLabel select:focus~label,
.floatingLabel select:valid~label {
  top: -5px;
  color: var(--inputColor5);
  font-weight: 500;
  background-color: var(--white)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title,
.titleInput,
.smartInput {
  margin-bottom: 1rem
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input,
.titleInput input,
.smartInput input {
  color: var(--black);
  padding: .5rem 0;
  border: none;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px solid var(--borderGray);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0
}

@media(min-width: 768px) {

  .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input,
  .titleInput input,
  .smartInput input {
    font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
  }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:is(:hover, :focus, :active, :visited, :valid),
.titleInput input:is(:hover, :focus, :active, :visited, :valid),
.smartInput input:is(:hover, :focus, :active, :visited, :valid) {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-top: none;
  border-left: none;
  border-right: none
}

.titleInput:has(input:valid) label {
  display: none
}

.titleInput {
  width: 100%
}

.titleInput label {
  color: var(--highlight);
  display: block;
  margin-bottom: 0m
}

.titleInput input:not([type=radio]):not([type=checkbox]) {
  font-size: clamp(22.478848px, 15.7016421053px + 0.0141191789*100vw, 43.94px);
  font-weight: 500;
  padding-left: 5px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  caret-color: var(--inputColor5);
  -webkit-box-shadow: none;
  box-shadow: none;
  text-transform: capitalize
}

@media(min-width: 1024px) {
  .titleInput input:not([type=radio]):not([type=checkbox]) {
    font-size: clamp(25.17630976px, 15.0881970526px + 0.0210169015*100vw, 57.122px)
  }
}

@media(min-width: 1440px) {
  .titleInput input:not([type=radio]):not([type=checkbox]) {
    font-size: clamp(28.1974669312px, 13.6518459621px + 0.030303377*100vw, 74.2586px)
  }
}

.titleInput input:not([type=radio]):not([type=checkbox]):focus+.messageBox::after {
  display: none
}

.titleInput input:not([type=radio]):not([type=checkbox]):valid+.messageBox:after {
  display: none
}

.titleInput input:not([type=radio]):not([type=checkbox])::-webkit-input-placeholder {
  font-size: inherit;
  font-weight: 500;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.titleInput input:not([type=radio]):not([type=checkbox])::-moz-placeholder {
  font-size: inherit;
  font-weight: 500;
  -moz-transition: var(--transition1);
  transition: var(--transition1)
}

.titleInput input:not([type=radio]):not([type=checkbox]):-ms-input-placeholder {
  font-size: inherit;
  font-weight: 500;
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

.titleInput input:not([type=radio]):not([type=checkbox])::-ms-input-placeholder {
  font-size: inherit;
  font-weight: 500;
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

.titleInput input:not([type=radio]):not([type=checkbox])::placeholder {
  font-size: inherit;
  font-weight: 500;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.titleInput .messageBox:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: var(--inputColor5);
  left: 0;
  top: -5px;
  -webkit-transform: translateY(-130%);
  transform: translateY(-130%);
  -webkit-animation-name: blink;
  animation-name: blink;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  opacity: 1
}

@-webkit-keyframes blink {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes blink {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.horizontalInput,
.horizontalInputDiv .inputDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: .75rem
}

@media(min-width: 480px) {

  .horizontalInput,
  .horizontalInputDiv .inputDiv {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
  position: absolute;
  top: 8px;
  left: var(--input-size);
  z-index: 1
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) {
  min-width: auto;
  margin-bottom: 0;
  overflow: unset
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch])::after,
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch])::after {
  content: ""
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]),
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
  --active: var(--green) !important;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  margin-right: 0
}

.horizontalInput label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before,
.horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])):has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) scale(2);
  transform: translate(-50%, -50%) scale(2)
}

@media(min-width: 480px) {

  .horizontalInput label:not(:has([type=radio], [type=checkbox])),
  .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
    position: relative;
    top: unset;
    left: unset;
    width: auto;
    min-width: 200px;
    margin: 0;
    margin-top: 10px;
    font-size: 1rem
  }
}

@media(min-width: 768px) {

  .horizontalInput label:not(:has([type=radio], [type=checkbox])),
  .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox])) {
    font-size: .937rem
  }
}

@media(min-width: 480px) {

  .horizontalInput label:not(:has([type=radio], [type=checkbox]))::after,
  .horizontalInputDiv .inputDiv label:not(:has([type=radio], [type=checkbox]))::after {
    content: ":";
    color: var(--textGray);
    margin-left: auto;
    margin-right: 1rem;
    margin-bottom: 3px
  }
}

.horizontalInput input,
.horizontalInputDiv .inputDiv input,
.horizontalInput select,
.horizontalInputDiv .inputDiv select,
.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea,
.horizontalInput selector selected item,
.horizontalInputDiv .inputDiv selector selected item,
.horizontalInput .inputBox,
.horizontalInputDiv .inputDiv .inputBox,
.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
  padding-top: 30px;
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
}

@media(min-width: 480px) {

  .horizontalInput input,
  .horizontalInputDiv .inputDiv input,
  .horizontalInput select,
  .horizontalInputDiv .inputDiv select,
  .horizontalInput textarea,
  .horizontalInputDiv .inputDiv textarea,
  .horizontalInput selector selected item,
  .horizontalInputDiv .inputDiv selector selected item,
  .horizontalInput .inputBox,
  .horizontalInputDiv .inputDiv .inputBox,
  .horizontalInput .optionList,
  .horizontalInputDiv .inputDiv .optionList {
    padding-top: .7rem;
    font-size: 1rem
  }
}

.horizontalInput input:not([type=radio]):not([type=checkbox]),
.horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
.horizontalInput select,
.horizontalInputDiv .inputDiv select,
.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea,
.horizontalInput selector,
.horizontalInputDiv .inputDiv selector,
.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
  width: 100%
}

@media(min-width: 480px) {

  .horizontalInput input:not([type=radio]):not([type=checkbox]),
  .horizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
  .horizontalInput select,
  .horizontalInputDiv .inputDiv select,
  .horizontalInput textarea,
  .horizontalInputDiv .inputDiv textarea,
  .horizontalInput selector,
  .horizontalInputDiv .inputDiv selector,
  .horizontalInput .optionList,
  .horizontalInputDiv .inputDiv .optionList {
    width: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important
  }
}

.horizontalInput .optionList,
.horizontalInputDiv .inputDiv .optionList {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

.horizontalInput textarea,
.horizontalInputDiv .inputDiv textarea {
  min-width: auto
}

@media(min-width: 480px) {

  .horizontalInput input:not([type=date]),
  .horizontalInputDiv .inputDiv input:not([type=date]) {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
  }
}

.horizontalInput select,
.horizontalInputDiv .inputDiv select {
  width: auto;
  min-width: auto;
  border: none
}

.horizontalInput .messageBox,
.horizontalInputDiv .inputDiv .messageBox {
  width: 100%
}

.minimalHorizontalInputDiv .inputDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: .75rem
}

.minimalHorizontalInputDiv .inputDiv label {
  width: auto;
  min-width: 200px;
  margin: 0;
  font-size: 1rem
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) {
  min-width: auto;
  margin-bottom: 0;
  overflow: unset
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch])::after {
  content: ""
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox]) {
  --active: var(--green) !important;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  margin-right: 0
}

.minimalHorizontalInputDiv .inputDiv label:has([class=switch]) input:not([type=radio]):not([type=checkbox])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) scale(2);
  transform: translate(-50%, -50%) scale(2)
}

@media(min-width: 768px) {
  .minimalHorizontalInputDiv .inputDiv label {
    font-size: .937rem
  }
}

.minimalHorizontalInputDiv .inputDiv label::after {
  content: ":";
  color: var(--textGray);
  margin-left: auto;
  margin-right: 1rem;
  margin-bottom: 3px
}

.minimalHorizontalInputDiv .inputDiv input,
.minimalHorizontalInputDiv .inputDiv select,
.minimalHorizontalInputDiv .inputDiv textarea,
.minimalHorizontalInputDiv .inputDiv selector selected item {
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
}

@media(min-width: 480px) {

  .minimalHorizontalInputDiv .inputDiv input,
  .minimalHorizontalInputDiv .inputDiv select,
  .minimalHorizontalInputDiv .inputDiv textarea,
  .minimalHorizontalInputDiv .inputDiv selector selected item {
    font-size: 1rem
  }
}

.minimalHorizontalInputDiv .inputDiv input:not([type=radio]):not([type=checkbox]),
.minimalHorizontalInputDiv .inputDiv select,
.minimalHorizontalInputDiv .inputDiv textarea,
.minimalHorizontalInputDiv .inputDiv selector {
  width: auto !important;
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important
}

.minimalHorizontalInputDiv .inputDiv textarea {
  min-width: auto
}

.minimalHorizontalInputDiv .inputDiv input:not([type=date]) {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.minimalHorizontalInputDiv .inputDiv select {
  width: auto;
  min-width: auto;
  border: none
}

.minimalHorizontalInputDiv .inputDiv .messageBox {
  width: 100%
}

.actionInput selected {
  background-color: rgba(0, 0, 0, 0);
  border: none !important;
  padding: 0
}

.actionInput selected items {
  padding: 0
}

.actionInput selected item:not([value]) {
  min-height: 45px;
  border: 1px dashed var(--inputColor2);
  border-radius: var(--btnRadius);
  padding: 5px .7075rem
}

.inputBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.passwordShowIconDiv {
  position: absolute;
  top: 5px;
  right: 10px;
  width: 35px;
  height: 35px;
  padding: 5px;
  border-radius: 1rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.passwordShowIconDiv:hover {
  background-color: var(--lightGray)
}

.passwordShowIconDiv .hide {
  display: none
}

.passwordShowIconDiv .showIcon {
  display: block !important
}

.passwordShowIconDiv i {
  top: 3px;
  left: 5px;
  color: var(--textGray);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  display: none;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.passwordShowIconDiv i:hover {
  color: var(--color3)
}

.dateRange {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.dateRange i {
  color: var(--visibleGray);
  cursor: pointer
}

.dateRange .value {
  margin: 0 .5rem;
  margin-right: auto;
  cursor: pointer
}

.checkboxList input::before,
.radioList input::before {
  content: attr(data-label);
  color: var(--black);
  font-size: .878rem;
  margin-left: .7075rem
}

.checkBoxGridDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

.checkBoxGridDiv label {
  width: 48%;
  padding: 10px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: var(--inputRadius)
}

@media(min-width: 768px) {
  .checkBoxGridDiv label {
    width: 32%
  }
}

@media(min-width: 1024px) {
  .checkBoxGridDiv label {
    width: 23%
  }
}

.checkBoxGridDiv label i {
  color: var(--textGray);
  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;
  margin-bottom: 5px;
  pointer-events: none
}

.checkBoxGridDiv label .title {
  font-size: .937rem;
  pointer-events: none
}

.checkBoxGridDiv label .text {
  font-size: .733rem;
  pointer-events: none
}

.checkBoxGridDiv label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--inputRadius) !important;
  background-color: rgba(0, 0, 0, 0)
}

.checkBoxGridDiv label input::after {
  display: none
}

.inputCounter input[type=date]::-webkit-input-placeholder,
.inputCounter input[type=datetime-local]::-webkit-input-placeholder,
.inputCounter input[type=email]::-webkit-input-placeholder,
.inputCounter input[type=file]::-webkit-input-placeholder,
.inputCounter input[type=hidden]::-webkit-input-placeholder,
.inputCounter input[type=month]::-webkit-input-placeholder,
.inputCounter input[type=number]::-webkit-input-placeholder,
.inputCounter input[type=password]::-webkit-input-placeholder,
.inputCounter input[type=range]::-webkit-input-placeholder,
.inputCounter input[type=search]::-webkit-input-placeholder,
.inputCounter input[type=tel]::-webkit-input-placeholder,
.inputCounter input[type=text]::-webkit-input-placeholder,
.inputCounter input[type=time]::-webkit-input-placeholder,
.inputCounter input[type=url]::-webkit-input-placeholder,
.inputCounter input[type=week]::-webkit-input-placeholder,
.inputCounter textarea::-webkit-input-placeholder,
.inputCounter select::-webkit-input-placeholder,
.inputCounter datalist::-webkit-input-placeholder {
  opacity: 1
}

.inputCounter input[type=date]::-moz-placeholder,
.inputCounter input[type=datetime-local]::-moz-placeholder,
.inputCounter input[type=email]::-moz-placeholder,
.inputCounter input[type=file]::-moz-placeholder,
.inputCounter input[type=hidden]::-moz-placeholder,
.inputCounter input[type=month]::-moz-placeholder,
.inputCounter input[type=number]::-moz-placeholder,
.inputCounter input[type=password]::-moz-placeholder,
.inputCounter input[type=range]::-moz-placeholder,
.inputCounter input[type=search]::-moz-placeholder,
.inputCounter input[type=tel]::-moz-placeholder,
.inputCounter input[type=text]::-moz-placeholder,
.inputCounter input[type=time]::-moz-placeholder,
.inputCounter input[type=url]::-moz-placeholder,
.inputCounter input[type=week]::-moz-placeholder,
.inputCounter textarea::-moz-placeholder,
.inputCounter select::-moz-placeholder,
.inputCounter datalist::-moz-placeholder {
  opacity: 1
}

.inputCounter input[type=date]:-ms-input-placeholder,
.inputCounter input[type=datetime-local]:-ms-input-placeholder,
.inputCounter input[type=email]:-ms-input-placeholder,
.inputCounter input[type=file]:-ms-input-placeholder,
.inputCounter input[type=hidden]:-ms-input-placeholder,
.inputCounter input[type=month]:-ms-input-placeholder,
.inputCounter input[type=number]:-ms-input-placeholder,
.inputCounter input[type=password]:-ms-input-placeholder,
.inputCounter input[type=range]:-ms-input-placeholder,
.inputCounter input[type=search]:-ms-input-placeholder,
.inputCounter input[type=tel]:-ms-input-placeholder,
.inputCounter input[type=text]:-ms-input-placeholder,
.inputCounter input[type=time]:-ms-input-placeholder,
.inputCounter input[type=url]:-ms-input-placeholder,
.inputCounter input[type=week]:-ms-input-placeholder,
.inputCounter textarea:-ms-input-placeholder,
.inputCounter select:-ms-input-placeholder,
.inputCounter datalist:-ms-input-placeholder {
  opacity: 1
}

.inputCounter input[type=date]::-ms-input-placeholder,
.inputCounter input[type=datetime-local]::-ms-input-placeholder,
.inputCounter input[type=email]::-ms-input-placeholder,
.inputCounter input[type=file]::-ms-input-placeholder,
.inputCounter input[type=hidden]::-ms-input-placeholder,
.inputCounter input[type=month]::-ms-input-placeholder,
.inputCounter input[type=number]::-ms-input-placeholder,
.inputCounter input[type=password]::-ms-input-placeholder,
.inputCounter input[type=range]::-ms-input-placeholder,
.inputCounter input[type=search]::-ms-input-placeholder,
.inputCounter input[type=tel]::-ms-input-placeholder,
.inputCounter input[type=text]::-ms-input-placeholder,
.inputCounter input[type=time]::-ms-input-placeholder,
.inputCounter input[type=url]::-ms-input-placeholder,
.inputCounter input[type=week]::-ms-input-placeholder,
.inputCounter textarea::-ms-input-placeholder,
.inputCounter select::-ms-input-placeholder,
.inputCounter datalist::-ms-input-placeholder {
  opacity: 1
}

.inputCounter input[type=date]::placeholder,
.inputCounter input[type=datetime-local]::placeholder,
.inputCounter input[type=email]::placeholder,
.inputCounter input[type=file]::placeholder,
.inputCounter input[type=hidden]::placeholder,
.inputCounter input[type=month]::placeholder,
.inputCounter input[type=number]::placeholder,
.inputCounter input[type=password]::placeholder,
.inputCounter input[type=range]::placeholder,
.inputCounter input[type=search]::placeholder,
.inputCounter input[type=tel]::placeholder,
.inputCounter input[type=text]::placeholder,
.inputCounter input[type=time]::placeholder,
.inputCounter input[type=url]::placeholder,
.inputCounter input[type=week]::placeholder,
.inputCounter textarea::placeholder,
.inputCounter select::placeholder,
.inputCounter datalist::placeholder {
  opacity: 1
}

.inputCounter .inputBox:has(button) input {
  text-align: center
}

.inputCounter .inputBox button {
  position: absolute;
  right: 0;
  z-index: 1;
  border-left: 1px solid var(--borderGray);
  padding: .75rem .5rem
}

.inputCounter .inputBox button:hover {
  background-color: var(--black)
}

.inputCounter .inputBox button:hover i {
  color: var(--textGray)
}

.inputCounter .inputBox button:nth-child(1) {
  left: 0;
  right: unset;
  border: none;
  border-right: 1px solid var(--borderGray)
}

.inputCounter .inputBox button i {
  color: var(--gray)
}

.optionList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px
}

.optionList label {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100px;
  padding: var(--input-size);
  font-size: 1rem;
  z-index: 1;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.optionList label:has(:checked) {
  color: var(--inputColor)
}

.optionList label input[type=radio],
.optionList label input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--textGray);
  background-color: var(--white);
  border-radius: var(--inputRadius);
  padding: 0;
  margin: 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

@media(min-width: 768px) {

  .optionList label input[type=radio],
  .optionList label input[type=checkbox] {
    border: 1px solid var(--borderGray)
  }
}

.optionList label input[type=radio]:hover,
.optionList label input[type=checkbox]:hover {
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor1);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionList label input[type=radio]:hover::after,
.optionList label input[type=checkbox]:hover::after {
  color: var(--color1)
}

.optionList label input[type=radio]::after,
.optionList label input[type=checkbox]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: attr(data-label);
  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;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--darkGray);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.optionList label input[type=radio]:focus,
.optionList label input[type=radio]:active,
.optionList label input[type=checkbox]:focus,
.optionList label input[type=checkbox]:active {
  border: 1px solid var(--inputColor3);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  background-color: var(--inputColor1)
}

.optionList label input[type=radio]:focus::after,
.optionList label input[type=radio]:active::after,
.optionList label input[type=checkbox]:focus::after,
.optionList label input[type=checkbox]:active::after {
  color: var(--black)
}

.optionList label input[type=radio]:checked,
.optionList label input[type=checkbox]:checked {
  background-color: var(--white);
  border: 1px solid var(--inputColor5);
  -webkit-box-shadow: var(--inputColor4) 0px 0px 0px 1px;
  box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionList label input[type=radio]:checked::after,
.optionList label input[type=checkbox]:checked::after {
  color: var(--black)
}

.optionForm {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center
}

.optionForm label {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100px;
  padding: var(--input-size);
  font-size: 1rem;
  z-index: 1;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.optionForm label:has(:checked) {
  color: var(--inputColor)
}

.optionForm label input[type=radio],
.optionForm label input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--textGray);
  background-color: var(--white);
  border-radius: var(--inputRadius);
  padding: 0;
  margin: 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

@media(min-width: 768px) {

  .optionForm label input[type=radio],
  .optionForm label input[type=checkbox] {
    border: 1px solid var(--borderGray)
  }
}

.optionForm label input[type=radio]:hover,
.optionForm label input[type=checkbox]:hover {
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor1);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:hover::after,
.optionForm label input[type=checkbox]:hover::after {
  color: var(--color1)
}

.optionForm label input[type=radio]::after,
.optionForm label input[type=checkbox]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: attr(data-label);
  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;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--darkGray);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.optionForm label input[type=radio]:focus,
.optionForm label input[type=radio]:active,
.optionForm label input[type=checkbox]:focus,
.optionForm label input[type=checkbox]:active {
  border: 1px solid var(--inputColor3);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  background-color: var(--inputColor1)
}

.optionForm label input[type=radio]:focus::after,
.optionForm label input[type=radio]:active::after,
.optionForm label input[type=checkbox]:focus::after,
.optionForm label input[type=checkbox]:active::after {
  color: var(--black)
}

.optionForm label input[type=radio]:checked,
.optionForm label input[type=checkbox]:checked {
  background-color: var(--white);
  border: 1px solid var(--inputColor5);
  -webkit-box-shadow: var(--inputColor4) 0px 0px 0px 1px;
  box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.optionForm label input[type=radio]:checked::after,
.optionForm label input[type=checkbox]:checked::after {
  color: var(--black)
}

.optionForm label {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem
}

.optionForm .options {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 10px
}

.optionForm .options input[type=radio] {
  margin: 0;
  margin-bottom: 10px
}

.optionForm .options input[type=radio]:checked+.formDiv {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.optionForm .options .formDiv {
  display: none;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1rem;
  text-align: center
}

.optionForm .options .formDiv:empty {
  margin-top: 0
}

.optionForm .options .formDiv label {
  width: auto;
  text-align: left;
  margin-bottom: .5rem
}

.gridOptionInput {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  text-align: center;
  margin-top: 0
}

.gridOptionInput label {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100px;
  padding: var(--input-size);
  font-size: 1rem;
  z-index: 1;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.gridOptionInput label:has(:checked) {
  color: var(--inputColor)
}

.gridOptionInput label input[type=radio],
.gridOptionInput label input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--textGray);
  background-color: var(--white);
  border-radius: var(--inputRadius);
  padding: 0;
  margin: 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

@media(min-width: 768px) {

  .gridOptionInput label input[type=radio],
  .gridOptionInput label input[type=checkbox] {
    border: 1px solid var(--borderGray)
  }
}

.gridOptionInput label input[type=radio]:hover,
.gridOptionInput label input[type=checkbox]:hover {
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor1);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:hover::after,
.gridOptionInput label input[type=checkbox]:hover::after {
  color: var(--color1)
}

.gridOptionInput label input[type=radio]::after,
.gridOptionInput label input[type=checkbox]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: attr(data-label);
  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;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--darkGray);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.gridOptionInput label input[type=radio]:focus,
.gridOptionInput label input[type=radio]:active,
.gridOptionInput label input[type=checkbox]:focus,
.gridOptionInput label input[type=checkbox]:active {
  border: 1px solid var(--inputColor3);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  background-color: var(--inputColor1)
}

.gridOptionInput label input[type=radio]:focus::after,
.gridOptionInput label input[type=radio]:active::after,
.gridOptionInput label input[type=checkbox]:focus::after,
.gridOptionInput label input[type=checkbox]:active::after {
  color: var(--black)
}

.gridOptionInput label input[type=radio]:checked,
.gridOptionInput label input[type=checkbox]:checked {
  background-color: var(--white);
  border: 1px solid var(--inputColor5);
  -webkit-box-shadow: var(--inputColor4) 0px 0px 0px 1px;
  box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.gridOptionInput label input[type=radio]:checked::after,
.gridOptionInput label input[type=checkbox]:checked::after {
  color: var(--black)
}

.gridOptionInput label {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem
}

.gridOptionInput .options {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 10px
}

.gridOptionInput .options input[type=radio] {
  margin: 0;
  margin-bottom: 10px
}

.gridOptionInput .options input[type=radio]:checked+.formDiv {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.gridOptionInput .options .formDiv {
  display: none;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1rem;
  text-align: center
}

.gridOptionInput .options .formDiv:empty {
  margin-top: 0
}

.gridOptionInput .options .formDiv label {
  width: auto;
  text-align: left;
  margin-bottom: .5rem
}

.gridOptionInput .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 2%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1rem
}

.gridOptionInput .options label {
  min-height: 150px;
  width: 48%;
  margin-bottom: 10px;
  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;
  color: var(--black)
}

@media(min-width: 480px) {
  .gridOptionInput .options label {
    width: 31%;
    margin-bottom: 1rem
  }
}

.gridOptionInput .options label i,
.gridOptionInput .options label img {
  width: 50px;
  height: 50px;
  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;
  color: var(--textGray);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  border-radius: var(--radius);
  pointer-events: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.gridOptionInput .options label * {
  z-index: 10
}

.gridOptionInput .options label .text {
  margin-top: 1rem
}

.gridOptionInput .options label input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--borderGray);
  border-radius: var(--radius);
  margin: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.97);
  transform: translate(-50%, -50%) scale(0.97);
  z-index: 1
}

.gridOptionInput .options label input::after {
  height: auto;
  margin-top: 30px;
  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
}

.gridOptionInput .options label input:checked {
  background-color: var(--white);
  -webkit-box-shadow: var(--inputColor3) 0px 0px 0px 2px;
  box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridOptionInput .options label input:checked::after {
  color: var(--black)
}

.gridOptionInput .options label input:checked+i {
  color: var(--gray);
  background-color: var(--lightGray);
  border: 1px solid var(--borderGray)
}

.gridListOptionInput {
  margin-top: 0
}

.gridListOptionInput .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 1rem;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-top: 1rem
}

.gridListOptionInput .options label {
  width: auto;
  min-height: 55px;
  margin-bottom: 10px;
  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;
  cursor: pointer
}

@media(min-width: 480px) {
  .gridListOptionInput .options label {
    margin-bottom: 1rem
  }
}

.gridListOptionInput .options label i,
.gridListOptionInput .options label img {
  position: absolute;
  top: 50%;
  left: 7px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  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;
  color: var(--textGray);
  font-size: 1rem;
  padding: 10px;
  background-color: var(--lightGray);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: var(--radius);
  z-index: 10;
  pointer-events: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.gridListOptionInput .options label input {
  width: 100%;
  height: 100%;
  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-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid var(--borderGray);
  border-radius: var(--radius);
  margin: 0;
  padding-left: 55px;
  cursor: pointer
}

.gridListOptionInput .options label input::after {
  content: attr(data-label);
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: none;
  transform: none;
  cursor: pointer
}

.gridListOptionInput .options label input:checked {
  background-color: var(--white);
  -webkit-box-shadow: var(--inputColor3) 0px 0px 0px 2px;
  box-shadow: var(--inputColor3) 0px 0px 0px 2px
}

.gridListOptionInput .options label input:checked::after {
  color: var(--black)
}

.gridListOptionInput .options label input:checked+i {
  color: var(--gray);
  background-color: var(--lightGray);
  border: 1px solid var(--borderGray)
}

.uploadInput:hover .inputBox {
  border: 1px dashed var(--inputColor4)
}

.uploadInput:hover .inputBox label {
  color: var(--inputColor4)
}

.uploadInput .inputBox {
  min-height: 200px;
  background-color: var(--lightGray);
  border: 1px dashed var(--inputColor3);
  border-radius: var(--inputRadius);
  overflow: hidden;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.uploadInput .inputBox label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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;
  color: var(--inputColor5);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  pointer-events: none;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.uploadInput .inputBox label i {
  margin-right: .5rem;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.uploadInput .inputBox input {
  opacity: 0;
  z-index: 1;
  cursor: pointer
}

.inputEditor {
  padding-top: 0
}

.inputEditor .ql-container.ql-snow {
  border: 1px solid var(--inputBorder) !important;
  border-radius: var(--inputRadius)
}

.inputEditor .ql-toolbar.ql-snow {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  border: none;
  border-top: 1px solid var(--borderGray);
  border-radius: .25rem
}

.inputEditor textarea {
  height: 200px;
  border: 1px solid var(--inputBorder) !important;
  padding-bottom: 2.83rem !important
}

.taskListForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0
}

.taskListForm .content {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y)
}

.taskListForm .inputDiv {
  margin: 0;
  width: 100%;
  -webkit-box-align: unset;
  -ms-flex-align: unset;
  align-items: unset;
  border-bottom: 1px solid var(--borderGray)
}

@media(min-width: 1024px) {
  .taskListForm .inputDiv {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
  }
}

.taskListForm .inputDiv:nth-child(even) {
  background: var(--inputColor1)
}

.taskListForm .inputDiv :is(h2, h3, h4, h5, p) {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  margin: 0;
  font-weight: 400;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media(min-width: 1024px) {
  .taskListForm .inputDiv :is(h2, h3, h4, h5, p) {
    border-right: 1px solid var(--borderGray)
  }
}

.taskListForm .inputDiv .inputBox {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center
}

.taskListForm .inputDiv .inputBox label {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100px;
  padding: var(--input-size);
  font-size: 1rem;
  z-index: 1;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.taskListForm .inputDiv .inputBox label:has(:checked) {
  color: var(--inputColor)
}

.taskListForm .inputDiv .inputBox label input[type=radio],
.taskListForm .inputDiv .inputBox label input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 1px solid var(--textGray);
  background-color: var(--white);
  border-radius: var(--inputRadius);
  padding: 0;
  margin: 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

@media(min-width: 768px) {

  .taskListForm .inputDiv .inputBox label input[type=radio],
  .taskListForm .inputDiv .inputBox label input[type=checkbox] {
    border: 1px solid var(--borderGray)
  }
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:hover {
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor1);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:hover::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:hover::after {
  color: var(--color1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: attr(data-label);
  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;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--darkGray);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus,
.taskListForm .inputDiv .inputBox label input[type=radio]:active,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:focus,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:active {
  border: 1px solid var(--inputColor3);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  box-shadow: var(--inputColor2) 0px 0px 0px 1px;
  background-color: var(--inputColor1)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:focus::after,
.taskListForm .inputDiv .inputBox label input[type=radio]:active::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:focus::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:active::after {
  color: var(--black)
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:checked {
  background-color: var(--white);
  border: 1px solid var(--inputColor5);
  -webkit-box-shadow: var(--inputColor4) 0px 0px 0px 1px;
  box-shadow: var(--inputColor4) 0px 0px 0px 1px
}

.taskListForm .inputDiv .inputBox label input[type=radio]:checked::after,
.taskListForm .inputDiv .inputBox label input[type=checkbox]:checked::after {
  color: var(--black)
}

@media(min-width: 1024px) {
  .taskListForm .inputDiv .inputBox {
    width: 335px;
    text-align: center
  }
}

.taskListForm .inputDiv .inputBox [type=file] {
  width: 100%
}

.taskListForm .btnDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end
}

[drag_scroll] {
  overflow-x: auto;
  white-space: nowrap;
  cursor: -webkit-grab;
  cursor: grab;
  scroll-behavior: smooth
}

[drag_scroll].active {
  cursor: -webkit-grabbing;
  cursor: grabbing
}

[data-tooltip] {
  overflow: initial
}

[data-tooltip]:not([data-tooltip]):before {
  display: none
}

[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

[data-tooltip]:focus {
  z-index: 999
}

[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  [data-tooltip]:hover {
    z-index: 999
  }

  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

[data-tooltip-top] {
  overflow: initial
}

[data-tooltip-top]:not([data-tooltip]):before {
  display: none
}

[data-tooltip-top]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

[data-tooltip-top]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

[data-tooltip-top]:focus {
  z-index: 999
}

[data-tooltip-top]:focus::before,
[data-tooltip-top]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  [data-tooltip-top]:hover {
    z-index: 999
  }

  [data-tooltip-top]:hover::before,
  [data-tooltip-top]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

[data-tooltip-top]::before {
  top: unset;
  right: unset;
  bottom: 100%;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

[data-tooltip-top]::after {
  top: 0;
  right: unset;
  bottom: unset;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg)
}

[data-tooltip-bottom] {
  overflow: initial
}

[data-tooltip-bottom]:not([data-tooltip]):before {
  display: none
}

[data-tooltip-bottom]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

[data-tooltip-bottom]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

[data-tooltip-bottom]:focus {
  z-index: 999
}

[data-tooltip-bottom]:focus::before,
[data-tooltip-bottom]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  [data-tooltip-bottom]:hover {
    z-index: 999
  }

  [data-tooltip-bottom]:hover::before,
  [data-tooltip-bottom]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

[data-tooltip-bottom]::before {
  bottom: unset;
  right: unset;
  top: 100%;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

[data-tooltip-bottom]::after {
  top: unset;
  right: unset;
  bottom: 0;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

[data-tooltip-left] {
  overflow: initial
}

[data-tooltip-left]:not([data-tooltip]):before {
  display: none
}

[data-tooltip-left]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

[data-tooltip-left]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

[data-tooltip-left]:focus {
  z-index: 999
}

[data-tooltip-left]:focus::before,
[data-tooltip-left]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  [data-tooltip-left]:hover {
    z-index: 999
  }

  [data-tooltip-left]:hover::before,
  [data-tooltip-left]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

[data-tooltip-left]::before {
  top: unset;
  left: unset;
  bottom: 50%;
  right: 100%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateY(50%);
  transform: translateY(50%)
}

[data-tooltip-left]::after {
  top: unset;
  right: unset;
  bottom: 50%;
  left: -3px;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateY(50%) rotate(90deg);
  transform: translateY(50%) rotate(90deg)
}

[data-tooltip-right] {
  overflow: initial
}

[data-tooltip-right]:not([data-tooltip]):before {
  display: none
}

[data-tooltip-right]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

[data-tooltip-right]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

[data-tooltip-right]:focus {
  z-index: 999
}

[data-tooltip-right]:focus::before,
[data-tooltip-right]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  [data-tooltip-right]:hover {
    z-index: 999
  }

  [data-tooltip-right]:hover::before,
  [data-tooltip-right]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

[data-tooltip-right]::before {
  top: unset;
  right: unset;
  bottom: 50%;
  left: 100%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateY(50%);
  transform: translateY(50%)
}

[data-tooltip-right]::after {
  top: unset;
  left: unset;
  bottom: 50%;
  right: -3px;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateY(50%) rotate(-90deg);
  transform: translateY(50%) rotate(-90deg)
}

.moreBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: .25rem;
  cursor: pointer
}

.moreBtn:hover .moreIcon {
  opacity: .5
}

.moreBtn:hover .btnMenuDiv {
  display: block;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  pointer-events: all
}

.moreBtn .moreIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--gray);
  font-size: .733rem;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.moreBtn .btnMenuDiv {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  padding-top: 2rem;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.moreBtn .btnMenuDiv:hover {
  display: block;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  pointer-events: all
}

.moreBtn .btnMenuDiv .btnMenu {
  width: 100%;
  display: block;
  background-color: var(--shade-1);
  border-radius: var(--radius);
  border: 1px solid var(--shade-1);
  text-align: left;
  -webkit-box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px;
  box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px;
  overflow: hidden
}

.moreBtn .btnMenuDiv .btnMenu .changeStatusBtn::before {
  display: none
}

.moreBtn .btnMenuDiv .btnMenu label input {
  margin-right: 1rem;
  -webkit-transform: none;
  transform: none
}

.moreBtn .btnMenuDiv .btnMenu label input::before {
  display: none
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 1rem clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  margin: 0;
  color: var(--text-color);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 400;
  white-space: nowrap;
  z-index: 1;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  .moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) {
    font-size: 1rem;
    padding: 1rem .7075rem
  }
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(var(--shade-2)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, var(--shade-2) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):hover {
  color: var(--text-color)
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):hover::before {
  opacity: 1
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):nth-child(1) {
  padding-top: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3):nth-last-child(1) {
  padding-bottom: 1.413rem
}

.moreBtn .btnMenuDiv .btnMenu a:not(.filledBtn, .outlinedBtn, .tonedBtn, .btn1, .btn2, .btn3, .btn3) i {
  font-size: .733rem;
  line-height: 1
}

.moreBtn .btnMenuDiv .btnMenu .filledBtn,
.moreBtn .btnMenuDiv .btnMenu .outlinedBtn,
.moreBtn .btnMenuDiv .btnMenu .btn1,
.moreBtn .btnMenuDiv .btnMenu .btn2,
.moreBtn .btnMenuDiv .btnMenu .btn3,
.moreBtn .btnMenuDiv .btnMenu .btn3 {
  width: calc(100% - 20px);
  margin: 10px;
  padding: .75rem .8rem !important;
  font-size: 1rem
}

.tabMenuNav {
  width: auto;
  overflow-x: auto;
  background-color: var(--white);
  --tab-width-mobile: 100px;
  --tab-width-web: 100px
}

.tabMenuNav .tabMenuDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  width: auto;
  margin: 0 auto
}

.tabMenuNav .tabMenuDiv:hover .tabMenu::before {
  background-color: rgba(0, 0, 0, 0)
}

.tabMenuNav .tabMenuDiv:hover .tabMenuBorder {
  background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu {
  width: var(--tab-width-mobile);
  min-width: var(--tab-width-mobile);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--textGray);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  white-space: nowrap;
  padding: 1rem .5rem;
  border-radius: .7075rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {
  .tabMenuNav .tabMenuDiv .tabMenu {
    font-size: 1rem;
    padding: .7075rem 1rem;
    width: var(--tab-width-web);
    min-width: var(--tab-width-web)
  }
}

.tabMenuNav .tabMenuDiv .tabMenu::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover {
  color: var(--color1)
}

.tabMenuNav .tabMenuDiv .tabMenu:hover~.tabMenuBorder {
  background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenu:active~.tabMenuBorder {
  background-color: var(--highlight);
  opacity: .5;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out
}

.tabMenuNav .tabMenuDiv .tabMenu img {
  width: 25px
}

.tabMenuNav .tabMenuDiv .tabMenu i {
  top: 1px;
  font-size: .878rem
}

.tabMenuNav .tabMenuDiv .tabMenu i,
.tabMenuNav .tabMenuDiv .tabMenu img {
  margin-right: 10px
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1).active~.tabMenuBorder {
  -webkit-transform: translateX(0%);
  transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(1):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(0%);
  transform: translateX(0%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2).active~.tabMenuBorder {
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(2):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3).active~.tabMenuBorder {
  -webkit-transform: translateX(200%);
  transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(3):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(200%);
  transform: translateX(200%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4).active~.tabMenuBorder {
  -webkit-transform: translateX(300%);
  transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(4):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(300%);
  transform: translateX(300%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5).active~.tabMenuBorder {
  -webkit-transform: translateX(400%);
  transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(5):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(400%);
  transform: translateX(400%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6).active~.tabMenuBorder {
  -webkit-transform: translateX(500%);
  transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(6):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(500%);
  transform: translateX(500%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7).active~.tabMenuBorder {
  -webkit-transform: translateX(600%);
  transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(7):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(600%);
  transform: translateX(600%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8).active~.tabMenuBorder {
  -webkit-transform: translateX(700%);
  transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):hover~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):focus~.active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active~.tabMenuBorder,
.tabMenuNav .tabMenuDiv .tabMenu:nth-child(8):active~.active~.tabMenuBorder {
  -webkit-transform: translateX(700%);
  transform: translateX(700%)
}

.tabMenuNav .tabMenuDiv .activeTabMenu {
  color: var(--black);
  font-weight: 500
}

.tabMenuNav .tabMenuDiv .activeTabMenu::before {
  background-color: var(--highlight)
}

.tabMenuNav .tabMenuDiv .tabMenuBorder {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: var(--tab-width-mobile);
  min-width: var(--tab-width-mobile);
  margin: 0;
  border: 0;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 375ms ease-out;
  transition: all 375ms ease-out;
  will-change: transform, background
}

@media(min-width: 768px) {
  .tabMenuNav .tabMenuDiv .tabMenuBorder {
    width: var(--tab-width-web);
    min-width: var(--tab-width-web)
  }
}

.tabBarWrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  left: 0;
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

.tabBarWrapper .tabBarSlide {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 0
}

.tabBarWrapper .tabBarSlide:nth-child(1) {
  height: auto
}

.dropDownDiv,
.dropSection {
  width: 100%;
  margin: 0 auto
}

.dropDownDiv .dropList,
.dropSection .dropList {
  display: block
}

.dropDownDiv .dropList .dropBox,
.dropSection .dropList .dropBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.dropDownDiv .dropList .dropBox .moreBtn,
.dropSection .dropList .dropBox .moreBtn {
  margin-left: auto;
  padding: 1rem
}

.dropDownDiv .dropList .dropBox div,
.dropSection .dropList .dropBox div {
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div i,
.dropSection .dropList .dropBox div i {
  color: inherit;
  font-size: .878rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.dropDownDiv .dropList .dropBox div .dropRemove,
.dropSection .dropList .dropBox div .dropRemove {
  display: none
}

.dropDownDiv .dropList .dropContent,
.dropSection .dropList .dropContent {
  display: none;
  width: 100%
}

.dropDownDiv .dropList .dropContent p:nth-child(1),
.dropSection .dropList .dropContent p:nth-child(1) {
  margin-top: 0
}

.multiStepForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  counter-reset: form-steps
}

.multiStepForm .multiStepSummary {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  width: 100%;
  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;
  z-index: 1;
  background: var(--bgShadeWeb)
}

@media(min-width: 1200px) {
  .multiStepForm .multiStepSummary {
    position: fixed;
    top: 0;
    left: var(--menuBarWidth);
    min-height: 100vh;
    width: 400px;
    max-width: 400px
  }
}

@media(min-width: 1440px) {
  .multiStepForm .multiStepSummary {
    padding: 5.65rem;
    width: 500px;
    max-width: 500px
  }
}

.multiStepForm .multiStepSummary .headingDiv {
  text-align: center;
  margin-bottom: 2rem
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary .headingDiv {
    text-align: left;
    margin-bottom: 50px
  }
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb {
  margin-bottom: 10px
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a {
  color: var(--black);
  font-size: .878rem;
  padding-right: 15px;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:hover {
  color: var(--highlight)
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a::after {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "";
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  opacity: .7
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:nth-last-child(1) {
  padding-right: 0;
  color: var(--highlight);
  pointer-events: none
}

.multiStepForm .multiStepSummary .headingDiv .breadcrumb a:nth-last-child(1)::after {
  display: none
}

.multiStepForm .multiStepSummary .headingDiv .heading {
  margin: 0;
  font-weight: 400
}

.multiStepForm .multiStepSummary .headingDiv p {
  opacity: .8
}

.multiStepForm .multiStepSummary ul {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  width: 100%;
  margin-bottom: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul {
    position: relative;
    left: unset;
    bottom: unset;
    -webkit-transform: none;
    transform: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
}

.multiStepForm .multiStepSummary ul .tabMenu {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 40px;
  --bg-shade-visibility: 1;
  --bg-shade-bg-color: light-dark(#ffffffc7, #000000c9);
  --bg-shade-blur: blur(40px);
  --bg-shade-border: 1px solid #ffffff0d;
  --bg-shade-border-top: 1px solid #f1f6ff3d;
  --bg-shade-border-bottom: 1px solid #fcfdff17;
  --bg-shade-shadow: inset 0 3px 25px -0.5px #f6faff0f
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: var(--bg-shade-visibility);
  backdrop-filter: var(--bg-shade-blur);
  background-color: var(--bg-shade-bg-color);
  border: var(--bg-shade-border);
  border-top: var(--bg-shade-border-top);
  border-bottom: var(--bg-shade-border-bottom);
  -webkit-box-shadow: var(--bg-shade-shadow);
  box-shadow: var(--bg-shade-shadow);
  border-radius: inherit;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul .tabMenu {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    padding-left: 60px;
    margin-bottom: .7075rem
  }
}

.multiStepForm .multiStepSummary ul .tabMenu::before {
  counter-increment: form-steps;
  content: counter(form-steps);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  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;
  color: var(--black);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  background-color: rgba(251, 255, 250, .3568627451);
  border: 1px solid var(--highlight);
  border-radius: 100%;
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul .tabMenu::before {
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
  }
}

.multiStepForm .multiStepSummary ul .tabMenu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  width: 91%;
  height: 1px;
  border-bottom: 2px dashed var(--borderGray);
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul .tabMenu::after {
    top: 20px;
    left: 20px;
    width: 1px;
    height: 75%;
    border: none;
    border-left: 2px dashed var(--borderGray)
  }
}

.multiStepForm .multiStepSummary ul .tabMenu:nth-last-child(1)::after {
  display: none
}

.multiStepForm .multiStepSummary ul .tabMenu .title {
  display: none;
  margin: 0;
  color: var(--textGray);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 400
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul .tabMenu .title {
    display: block;
    font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
  }
}

.multiStepForm .multiStepSummary ul .tabMenu p {
  display: none;
  margin-top: 5px;
  color: var(--gray);
  font-size: .878rem;
  font-weight: 400
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary ul .tabMenu p {
    display: block;
    font-size: .937rem
  }
}

.multiStepForm .multiStepSummary ul .activeTabMenu::before {
  background-color: var(--highlight);
  border: 1px solid rgba(0, 0, 0, 0);
  color: var(--white);
  -webkit-box-shadow: hsla(0, 0%, 100%, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
  box-shadow: hsla(0, 0%, 100%, .1) 0px 1px 1px 0px inset, rgba(50, 50, 93, .25) 0px 50px 100px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px
}

.multiStepForm .multiStepSummary ul .activeTabMenu::after {
  border-left: 2px dashed var(--inputColor2)
}

.multiStepForm .multiStepSummary ul .activeTabMenu .title {
  color: var(--black);
  font-weight: 500
}

.multiStepForm .multiStepSummary dotlottie-player {
  display: none
}

@media(min-width: 1024px) {
  .multiStepForm .multiStepSummary dotlottie-player {
    display: block
  }
}

.multiStepForm .formWrapper {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--white)
}

@media(min-width: 1024px) {
  .multiStepForm .formWrapper {
    width: calc(100% - 400px);
    margin-left: auto
  }
}

@media(min-width: 1440px) {
  .multiStepForm .formWrapper {
    width: calc(100% - 500px)
  }
}

.multiStepForm .formWrapper .heading {
  margin: 0;
  display: block;
  width: 100%;
  margin-bottom: .7075rem
}

.multiStepForm .formWrapper .dropDownDiv {
  width: 100%;
  overflow: hidden;
  background-color: var(--white);
  border-radius: .7075rem
}

.multiStepForm .formWrapper .multiStepWrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer {
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  width: 100%;
  min-width: 100%;
  height: 0;
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%
}

@media(min-width: 1024px) {
  .multiStepForm .formWrapper .multiStepWrapper .formContainer {
    padding-left: 5.65rem;
    padding-right: 5.65rem
  }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer:nth-child(1) {
  height: auto;
  opacity: 1
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title {
  width: 100%;
  margin: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
  font-size: clamp(22.478848px, 15.7016421053px + 0.0141191789*100vw, 43.94px);
  padding-left: 5px;
  caret-color: var(--inputColor5);
  text-transform: capitalize
}

@media(min-width: 1024px) {
  .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
    font-size: clamp(25.17630976px, 15.0881970526px + 0.0210169015*100vw, 57.122px)
  }
}

@media(min-width: 1440px) {
  .multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input {
    font-size: clamp(28.1974669312px, 13.6518459621px + 0.030303377*100vw, 74.2586px)
  }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 60%;
  background-color: var(--inputColor5);
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:focus+.messageBox::after {
  display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:valid+.messageBox:after {
  display: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::-webkit-input-placeholder {
  font-size: inherit;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::-moz-placeholder {
  font-size: inherit;
  -moz-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input:-ms-input-placeholder {
  font-size: inherit;
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::-ms-input-placeholder {
  font-size: inherit;
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title input::placeholder {
  font-size: inherit;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .title .messageBox:after {
  content: "";
  display: block !important;
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: var(--inputColor5);
  left: 0;
  top: 0;
  -webkit-transform: translateY(-130%);
  transform: translateY(-130%);
  -webkit-animation-name: blink;
  animation-name: blink;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 1
}

@keyframes blink {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .titleDiv .text {
  max-width: 600px;
  line-height: 1.3;
  font-size: 1rem;
  font-weight: 400
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .detailsBox {
  padding: 0
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  gap: 0 2%
}

@media(min-width: 1024px) {
  .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
    width: calc(100% - 400px - var(--menuBarWidth));
    padding: .7075rem 2rem
  }
}

@media(min-width: 1440px) {
  .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv {
    width: calc(100% - 500px - var(--menuBarWidth))
  }
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 150%;
  background: #fff;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none
}

.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a,
.multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1
}

@media(min-width: 768px) {

  .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv a,
  .multiStepForm .formWrapper .multiStepWrapper .formContainer .multiStepBtnDiv button {
    max-width: 200px
  }
}

.multiStepForm .formWrapper .gridOptionInput,
.multiStepForm .formWrapper .optionForm {
  text-align: left
}

.multiStepForm .formWrapper .gridOptionInput label,
.multiStepForm .formWrapper .optionForm label {
  margin: 0
}

.multiStepForm .formWrapper .gridOptionInput .options,
.multiStepForm .formWrapper .optionForm .options {
  margin-top: 1rem;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

.multiStepForm .formWrapper .gridOptionInput .formDiv,
.multiStepForm .formWrapper .optionForm .formDiv {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 5px;
  background-color: var(--white)
}

.multiStepForm .formWrapper .gridOptionInput .formDiv label,
.multiStepForm .formWrapper .optionForm .formDiv label {
  margin-bottom: 10px
}

.multiStepForm .formWrapper .checkboxList,
.multiStepForm .formWrapper .radioList {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 1rem;
  border-radius: 5px;
  background-color: var(--lightGray)
}

.multiStepForm .formWrapper .checkboxList label,
.multiStepForm .formWrapper .radioList label {
  width: 100%;
  color: var(--black);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem
}

@media(min-width: 480px) {

  .multiStepForm .formWrapper .checkboxList label,
  .multiStepForm .formWrapper .radioList label {
    width: 50%
  }
}

@media(min-width: 480px) {

  .multiStepForm .formWrapper .checkboxList label:nth-child(odd),
  .multiStepForm .formWrapper .radioList label:nth-child(odd) {
    padding-right: 1rem
  }
}

.multiStepForm .formWrapper .checkboxList label:nth-last-child(1),
.multiStepForm .formWrapper .radioList label:nth-last-child(1) {
  margin-bottom: 0
}

@media(min-width: 480px) {

  .multiStepForm .formWrapper .checkboxList label:nth-last-child(2),
  .multiStepForm .formWrapper .radioList label:nth-last-child(2) {
    margin-bottom: 0
  }
}

.inputTable {
  width: 100%;
  background-color: var(--standard-bg-color);
  border-collapse: collapse;
  margin: 1rem 0
}

.inputTable [border=left] {
  border-left: 1px solid var(--borderGray)
}

.inputTable [border=right] {
  border-right: 1px solid var(--borderGray)
}

.inputTable th {
  padding: 10px 20px;
  font-size: .733rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 1px
}

@media(min-width: 1024px) {
  .inputTable th {
    padding: 10px .7075rem
  }
}

.inputTable .rowTitle {
  background-color: var(--inputColor1)
}

.inputTable tr {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  text-align: left
}

.inputTable tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0)
}

.inputTable tr:nth-last-child(1) .deleteFieldBtn,
.inputTable tr:nth-last-child(1) [rowGeneratorDeleteRowButton],
.inputTable tr:nth-last-child(1) [row_generator_delete_row_button] {
  display: none !important
}

.inputTable tr:nth-last-child(1) .addFieldBtn,
.inputTable tr:nth-last-child(1) [rowGeneratorAddRowButton],
.inputTable tr:nth-last-child(1) [row_generator_add_row_button] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.inputTable tr .deleteFieldBtn,
.inputTable tr [rowGeneratorDeleteRowButton],
.inputTable tr [row_generator_delete_row_button] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.inputTable tr .addFieldBtn,
.inputTable tr [rowGeneratorAddRowButton],
.inputTable tr [row_generator_add_row_button] {
  display: none
}

.inputTable td {
  border-bottom: 1px solid var(--borderGray)
}

.inputTable td [rowGeneratorCallback],
.inputTable td [row_generator_callback] {
  overflow: initial;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.inputTable td [rowGeneratorCallback]:not([data-tooltip]):before,
.inputTable td [row_generator_callback]:not([data-tooltip]):before {
  display: none
}

.inputTable td [rowGeneratorCallback]:before,
.inputTable td [row_generator_callback]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

.inputTable td [rowGeneratorCallback]::after,
.inputTable td [row_generator_callback]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

.inputTable td [rowGeneratorCallback]:focus,
.inputTable td [row_generator_callback]:focus {
  z-index: 999
}

.inputTable td [rowGeneratorCallback]:focus::before,
.inputTable td [rowGeneratorCallback]:focus::after,
.inputTable td [row_generator_callback]:focus::before,
.inputTable td [row_generator_callback]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {

  .inputTable td [rowGeneratorCallback]:hover,
  .inputTable td [row_generator_callback]:hover {
    z-index: 999
  }

  .inputTable td [rowGeneratorCallback]:hover::before,
  .inputTable td [rowGeneratorCallback]:hover::after,
  .inputTable td [row_generator_callback]:hover::before,
  .inputTable td [row_generator_callback]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

.inputTable td [rowGeneratorCallback]::before,
.inputTable td [row_generator_callback]::before {
  top: unset;
  right: unset;
  bottom: 100%;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.inputTable td [rowGeneratorCallback]::after,
.inputTable td [row_generator_callback]::after {
  top: 0;
  right: unset;
  bottom: unset;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg)
}

.inputTable td [rowGeneratorCallback]:hover,
.inputTable td [row_generator_callback]:hover {
  background-color: var(--inputColor1);
  color: var(--inputColor4)
}

.inputTable td [rowGeneratorCallback] i,
.inputTable td [row_generator_callback] i {
  margin: auto;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.checkboxDropDownGroup {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  z-index: 1
}

.checkboxDropDownGroup .heading {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  margin-bottom: .7075rem;
  border-left: 3px solid var(--highlight);
  padding-left: 10px;
  color: var(--black);
  font-weight: 500
}

.checkboxDropDownGroup .checkboxListDiv {
  width: 100%;
  margin: 0 auto;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 3%
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
  display: block
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 0;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .moreBtn {
  margin-left: auto;
  padding: 1rem
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div {
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div i {
  color: inherit;
  font-size: .878rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox div .dropRemove {
  display: none
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
  display: none;
  width: 100%
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent p:nth-child(1) {
  margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList {
  margin-bottom: 1.3333rem;
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

@media(min-width: 320px) {
  .checkboxDropDownGroup .checkboxListDiv .dropList {
    width: 48.5%
  }
}

@media(min-width: 768px) {
  .checkboxDropDownGroup .checkboxListDiv .dropList {
    width: 31%
  }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox {
  padding: 10px;
  padding-left: 1rem;
  background-color: var(--inputColor1);
  border: 1px solid var(--inputColor2);
  border-radius: var(--inputRadius);
  -webkit-box-shadow: var(--inputColor2) 0px 0px 0px 0px;
  box-shadow: var(--inputColor2) 0px 0px 0px 0px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .title {
  margin-top: 0
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn {
  width: 30px;
  height: 30px;
  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;
  background-color: var(--inputColor1);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0);
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media(min-width: 480px) {
  .checkboxDropDownGroup .checkboxListDiv .dropList .dropBox .arrowBtn .dropRemove::after {
    display: none
  }
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 2;
  display: none;
  padding: 10px 0;
  background-color: var(--white);
  border: 1px solid var(--borderGray);
  border-top: none;
  border-radius: var(--radius);
  -webkit-box-shadow: rgba(22, 23, 26, .103) 0px 15px 25px, rgba(0, 0, 0, .05) 0px 5px 10px;
  box-shadow: rgba(22, 23, 26, .103) 0px 15px 25px, rgba(0, 0, 0, .05) 0px 5px 10px
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label {
  padding: 10px 0;
  padding-left: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--lightGray);
  cursor: pointer
}

.checkboxDropDownGroup .checkboxListDiv .dropList .dropContent label:nth-last-child(1) {
  border-bottom: none
}

.addonModules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0
}

.addonModules .title {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  margin-bottom: 1rem;
  border-left: 3px solid var(--highlight);
  padding-left: 5px;
  color: var(--black);
  font-weight: 500
}

.addonModules .title::after {
  content: "";
  height: 1px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 1rem;
  background-color: var(--inputBorder)
}

.addonModules .addonModuleCard {
  width: 100%;
  background-color: var(--standard-bg-color);
  border-collapse: collapse;
  margin: 1rem 0;
  margin: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%;
  padding: 1.413rem;
  border: 1px solid var(--lightGray);
  border-radius: .7075rem;
  -webkit-box-shadow: rgba(0, 0, 0, .058) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px;
  box-shadow: rgba(0, 0, 0, .058) 0px 10px 15px -3px, rgba(0, 0, 0, .05) 0px 4px 6px -2px;
  margin-bottom: .7075rem
}

.addonModules .addonModuleCard [border=left] {
  border-left: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard [border=right] {
  border-right: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard th {
  padding: 10px 20px;
  font-size: .733rem;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 1px
}

@media(min-width: 1024px) {
  .addonModules .addonModuleCard th {
    padding: 10px .7075rem
  }
}

.addonModules .addonModuleCard .rowTitle {
  background-color: var(--inputColor1)
}

.addonModules .addonModuleCard tr {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  text-align: left
}

.addonModules .addonModuleCard tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0)
}

.addonModules .addonModuleCard tr:nth-last-child(1) .deleteFieldBtn,
.addonModules .addonModuleCard tr:nth-last-child(1) [rowGeneratorDeleteRowButton],
.addonModules .addonModuleCard tr:nth-last-child(1) [row_generator_delete_row_button] {
  display: none !important
}

.addonModules .addonModuleCard tr:nth-last-child(1) .addFieldBtn,
.addonModules .addonModuleCard tr:nth-last-child(1) [rowGeneratorAddRowButton],
.addonModules .addonModuleCard tr:nth-last-child(1) [row_generator_add_row_button] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.addonModules .addonModuleCard tr .deleteFieldBtn,
.addonModules .addonModuleCard tr [rowGeneratorDeleteRowButton],
.addonModules .addonModuleCard tr [row_generator_delete_row_button] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.addonModules .addonModuleCard tr .addFieldBtn,
.addonModules .addonModuleCard tr [rowGeneratorAddRowButton],
.addonModules .addonModuleCard tr [row_generator_add_row_button] {
  display: none
}

.addonModules .addonModuleCard td {
  border-bottom: 1px solid var(--borderGray)
}

.addonModules .addonModuleCard td [rowGeneratorCallback],
.addonModules .addonModuleCard td [row_generator_callback] {
  overflow: initial;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.addonModules .addonModuleCard td [rowGeneratorCallback]:not([data-tooltip]):before,
.addonModules .addonModuleCard td [row_generator_callback]:not([data-tooltip]):before {
  display: none
}

.addonModules .addonModuleCard td [rowGeneratorCallback]:before,
.addonModules .addonModuleCard td [row_generator_callback]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

.addonModules .addonModuleCard td [rowGeneratorCallback]::after,
.addonModules .addonModuleCard td [row_generator_callback]::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

.addonModules .addonModuleCard td [rowGeneratorCallback]:focus,
.addonModules .addonModuleCard td [row_generator_callback]:focus {
  z-index: 999
}

.addonModules .addonModuleCard td [rowGeneratorCallback]:focus::before,
.addonModules .addonModuleCard td [rowGeneratorCallback]:focus::after,
.addonModules .addonModuleCard td [row_generator_callback]:focus::before,
.addonModules .addonModuleCard td [row_generator_callback]:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {

  .addonModules .addonModuleCard td [rowGeneratorCallback]:hover,
  .addonModules .addonModuleCard td [row_generator_callback]:hover {
    z-index: 999
  }

  .addonModules .addonModuleCard td [rowGeneratorCallback]:hover::before,
  .addonModules .addonModuleCard td [rowGeneratorCallback]:hover::after,
  .addonModules .addonModuleCard td [row_generator_callback]:hover::before,
  .addonModules .addonModuleCard td [row_generator_callback]:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

.addonModules .addonModuleCard td [rowGeneratorCallback]::before,
.addonModules .addonModuleCard td [row_generator_callback]::before {
  top: unset;
  right: unset;
  bottom: 100%;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.addonModules .addonModuleCard td [rowGeneratorCallback]::after,
.addonModules .addonModuleCard td [row_generator_callback]::after {
  top: 0;
  right: unset;
  bottom: unset;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg)
}

.addonModules .addonModuleCard td [rowGeneratorCallback]:hover,
.addonModules .addonModuleCard td [row_generator_callback]:hover {
  background-color: var(--inputColor1);
  color: var(--inputColor4)
}

.addonModules .addonModuleCard td [rowGeneratorCallback] i,
.addonModules .addonModuleCard td [row_generator_callback] i {
  margin: auto;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.addonModules .addonModulesBtnDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1rem
}

.addonModules .addonModulesBtnDiv .addModuleBtn {
  color: var(--borderGray);
  font-weight: 500;
  background-color: var(--black);
  border: 1px solid var(--borderGray);
  border-radius: 3rem
}

.detailsBox {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 5px;
  margin: 0
}

.detailsBox .title {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  margin-bottom: 1rem;
  border-left: 3px solid var(--highlight);
  padding-left: 5px;
  color: var(--black);
  font-weight: 500
}

.detailsBox .title::after {
  content: "";
  height: 1px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 1rem;
  background-color: var(--shade-5)
}

.detailsBox .inputDiv label {
  color: var(--text-color);
  font-size: .878rem;
  margin-bottom: 5px;
  opacity: .7
}

.fileWrapper {
  width: 100%
}

.fileWrapper .fileContainer {
  width: 100%;
  border: 2px dashed var(--inputColor2);
  background-color: var(--inputColor1);
  padding: 2rem;
  border-radius: var(--radius);
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.fileWrapper .fileContainer:hover {
  border: 2px dashed var(--inputColor3)
}

.fileWrapper .fileContainer:hover:before {
  color: var(--inputColor5)
}

.fileWrapper .fileContainer:before {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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;
  text-align: center;
  color: var(--gray);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 500;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.fileWrapper .fileContainer input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

.fileWrapper .uploadedFilesContainer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: var(--inputColor1);
  padding: 1rem;
  border-radius: var(--radius);
  margin-top: 10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .7075rem 1rem;
  padding-right: 50px;
  border: 1px solid var(--lightGray);
  border-radius: var(--radius);
  background-color: var(--white);
  margin-top: 10px;
  -webkit-box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, .05) 0px 1px 2px 0px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:hover {
  -webkit-box-shadow: rgba(33, 35, 38, .1) 0px 10px 10px -10px;
  box-shadow: rgba(33, 35, 38, .1) 0px 10px 10px -10px
}

.fileWrapper .uploadedFilesContainer .uploadedFile:nth-child(1) {
  margin-top: 0
}

.fileWrapper .uploadedFilesContainer .deleteFileButton {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px;
  margin-left: 1rem;
  color: var(--black);
  border-radius: 0;
  border-left: 1px solid var(--borderGray);
  background-color: rgba(0, 0, 0, 0)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton:hover {
  color: var(--red)
}

.fileWrapper .uploadedFilesContainer .deleteFileButton i {
  -webkit-transform: none;
  transform: none
}

.fileWrapper .uploadedFilesContainer .noFileLabel {
  width: 100%;
  text-align: center;
  color: var(--gray);
  font-weight: 400
}

.tableDiv {
  width: 100%
}

table {
  width: 100%;
  display: table;
  border-spacing: 0;
  border-collapse: collapse
}

table tr {
  display: table-row;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

table th,
table td {
  border-collapse: collapse;
  background-clip: padding-box;
  text-align: left;
  padding: .25rem .75rem
}

table th:has(input, select, textarea, selector selected item),
table td:has(input, select, textarea, selector selected item) {
  padding: 0
}

table th:has(textarea),
table td:has(textarea) {
  min-width: 250px
}

table th:has(input, textarea),
table td:has(input, textarea) {
  padding-top: 0;
  padding-bottom: 0;
  z-index: 3 !important
}

table th:has(selector),
table td:has(selector) {
  z-index: 4 !important;
  padding: 0
}

table th:has(selector) selected item,
table td:has(selector) selected item {
  padding-top: 0;
  padding-bottom: 0
}

table th input:not([type=checkbox], [type=radio]),
table th select,
table th textarea,
table th selector selected item,
table td input:not([type=checkbox], [type=radio]),
table td select,
table td textarea,
table td selector selected item {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  padding: .65rem 20px;
  border: none !important;
  border-radius: 0;
  background: rgba(0, 0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0) !important
}

@media(min-width: 1024px) {

  table th input:not([type=checkbox], [type=radio]),
  table th select,
  table th textarea,
  table th selector selected item,
  table td input:not([type=checkbox], [type=radio]),
  table td select,
  table td textarea,
  table td selector selected item {
    padding: .65rem .7075rem
  }
}

table th input:not([type=checkbox], [type=radio]):focus,
table th input:not([type=checkbox], [type=radio]):active,
table th select:focus,
table th select:active,
table th textarea:focus,
table th textarea:active,
table th selector selected item:focus,
table th selector selected item:active,
table td input:not([type=checkbox], [type=radio]):focus,
table td input:not([type=checkbox], [type=radio]):active,
table td select:focus,
table td select:active,
table td textarea:focus,
table td textarea:active,
table td selector selected item:focus,
table td selector selected item:active {
  background: rgba(0, 0, 0, 0) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important
}

table th p,
table td p {
  margin: 0
}

table th selector,
table td selector {
  width: 100%;
  height: 100%
}

table th selector selected,
table td selector selected {
  width: inherit;
  height: inherit;
  background: inherit !important;
  border-color: rgba(0, 0, 0, 0) !important;
  border-radius: 0
}

table th selector selected items,
table td selector selected items {
  background: inherit !important;
  border-color: rgba(0, 0, 0, 0) !important
}

table th textarea,
table td textarea {
  height: 70px;
  min-height: 70px
}

table th textarea::-webkit-input-placeholder,
table td textarea::-webkit-input-placeholder {
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

table th textarea::-moz-placeholder,
table td textarea::-moz-placeholder {
  transform: translateY(50%);
  -moz-transition: var(--transition1);
  transition: var(--transition1)
}

table th textarea:-ms-input-placeholder,
table td textarea:-ms-input-placeholder {
  transform: translateY(50%);
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

table th textarea::-ms-input-placeholder,
table td textarea::-ms-input-placeholder {
  transform: translateY(50%);
  -ms-transition: var(--transition1);
  transition: var(--transition1)
}

table th textarea::placeholder,
table td textarea::placeholder {
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

table th textarea:focus::-webkit-input-placeholder,
table td textarea:focus::-webkit-input-placeholder {
  opacity: 0
}

table th textarea:focus::-moz-placeholder,
table td textarea:focus::-moz-placeholder {
  opacity: 0
}

table th textarea:focus:-ms-input-placeholder,
table td textarea:focus:-ms-input-placeholder {
  opacity: 0
}

table th textarea:focus::-ms-input-placeholder,
table td textarea:focus::-ms-input-placeholder {
  opacity: 0
}

table th textarea:focus::placeholder,
table td textarea:focus::placeholder {
  opacity: 0
}

table th input[type=time],
table td input[type=time] {
  font-size: clamp(25.17630976px, 15.0881970526px + 0.0210169015*100vw, 57.122px)
}

table td {
  border-bottom: 1px solid hsla(0, 0%, 100%, .5411764706);
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap
}

table td .xlIcon,
table td .lgIcon {
  overflow: initial
}

table td .xlIcon:not([data-tooltip]):before,
table td .lgIcon:not([data-tooltip]):before {
  display: none
}

table td .xlIcon:before,
table td .lgIcon:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
  z-index: 103;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  letter-spacing: .25px;
  text-transform: capitalize;
  background: var(--darkGray);
  backdrop-filter: blur(10px);
  padding: .5rem .76rem;
  border-radius: .25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

table td .xlIcon::after,
table td .lgIcon::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%) rotate(180deg);
  transform: translateX(50%) rotate(180deg);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid var(--darkGray);
  pointer-events: none;
  opacity: 0
}

table td .xlIcon:focus,
table td .lgIcon:focus {
  z-index: 999
}

table td .xlIcon:focus::before,
table td .xlIcon:focus::after,
table td .lgIcon:focus::before,
table td .lgIcon:focus::after {
  opacity: 1;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 768px) {

  table td .xlIcon:hover,
  table td .lgIcon:hover {
    z-index: 999
  }

  table td .xlIcon:hover::before,
  table td .xlIcon:hover::after,
  table td .lgIcon:hover::before,
  table td .lgIcon:hover::after {
    opacity: 1;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

table td .xlIcon::before,
table td .lgIcon::before {
  top: unset;
  right: unset;
  bottom: 100%;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

table td .xlIcon::after,
table td .lgIcon::after {
  top: 0;
  right: unset;
  bottom: unset;
  left: 50%;
  -webkit-transform: none;
  transform: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg)
}

[width=xxs] {
  width: 45px;
  min-width: 45px
}

[width=xs] {
  width: 75px;
  min-width: 75px
}

[width=sm] {
  width: 100px;
  min-width: 100px
}

[width=md] {
  width: 150px;
  min-width: 150px
}

[width=lg] {
  width: 200px;
  min-width: 200px
}

[width=xl] {
  width: 250px;
  min-width: 250px
}

[width=xxl] {
  width: 300px;
  min-width: 300px
}

[width=xxxl] {
  width: 350px;
  min-width: 350px
}

[align=left] {
  text-align: left
}

[align=center] {
  text-align: center !important
}

[align=center] * {
  margin: 0 auto;
  text-align: center
}

[align=right] {
  text-align: right
}

[align=justify] {
  text-align: justify
}

.textLimit {
  overflow: hidden
}

.name {
  color: var(--text-color);
  margin: 0;
  font-weight: 500;
  text-transform: capitalize;
  pointer-events: none;
  z-index: 2
}

.price {
  color: var(--text-color);
  margin: 0;
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 500;
  white-space: noWrap;
  pointer-events: none;
  z-index: 2
}

.price:empty {
  display: none
}

.price span {
  font-weight: 400
}

.cost {
  display: inline-block
}

.cost span {
  color: var(--text-color);
  text-align: right;
  display: block;
  font-weight: 400
}

.cost span:nth-child(1) {
  font-size: .878rem;
  font-weight: 500
}

.cost span:nth-child(2) {
  margin-top: .5rem;
  font-size: .667rem;
  font-weight: 400;
  padding-left: .25rem
}

.cost span:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 11px;
  background-color: var(--green);
  border-radius: var(--radius)
}

.datePeriod {
  color: var(--text-color)
}

.datePeriod span,
.datePeriod p {
  display: block;
  font-weight: 400;
  padding-left: .7rem
}

.datePeriod span::after,
.datePeriod p::after {
  content: "";
  position: absolute;
  top: 3px;
  left: -1.5px;
  width: 5px;
  height: 5px;
  z-index: 1;
  border-radius: var(--radius)
}

.datePeriod span::before,
.datePeriod p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--borderGray)
}

.datePeriod span:nth-child(1)::after,
.datePeriod p:nth-child(1)::after {
  background-color: #81c376
}

.datePeriod span:nth-child(2),
.datePeriod p:nth-child(2) {
  margin-top: .25rem
}

.datePeriod span:nth-child(2)::after,
.datePeriod p:nth-child(2)::after {
  background-color: #e57575
}

.contactActionList {
  margin-top: .5rem
}

.contactActionList .contactList {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: .25rem 0;
  z-index: 2
}

.contactActionList .contactList:hover .contactCopy {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.contactActionList .contactList:hover .contactCopy i {
  opacity: .5
}

.contactActionList .contactList:nth-last-child(1) {
  border-bottom: none
}

.contactActionList .contactList .phone,
.contactActionList .contactList .email,
.contactActionList .contactList .whatsapp {
  padding: .25rem 0
}

.contactActionList .contactList .contactCopy {
  opacity: 0;
  width: 25px;
  height: 25px;
  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;
  padding: .35rem;
  margin-left: .5rem;
  border-radius: var(--inputRadius);
  background-color: var(--inputColor1);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.contactActionList .contactList .contactCopy:hover i {
  opacity: 1;
  color: var(--text-color)
}

.contactActionList .contactList .contactCopy:focus,
.contactActionList .contactList .contactCopy:active {
  color: var(--standard-bg-color);
  background-color: var(--text-color)
}

.contactActionList .contactList .contactCopy i {
  color: var(--text-color);
  cursor: pointer
}

.email,
.whatsapp,
.phone,
.idText,
.dateText,
.timeText,
.subSourceText,
.sourceText,
.departmentText,
.addressText,
.locationText,
.userText {
  color: var(--text-color);
  display: inline-block;
  font-size: .937rem;
  font-weight: 500;
  white-space: noWrap;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.email:empty,
.whatsapp:empty,
.phone:empty,
.idText:empty,
.dateText:empty,
.timeText:empty,
.subSourceText:empty,
.sourceText:empty,
.departmentText:empty,
.addressText:empty,
.locationText:empty,
.userText:empty {
  margin: 0 !important
}

.email:empty::before,
.whatsapp:empty::before,
.phone:empty::before,
.idText:empty::before,
.dateText:empty::before,
.timeText:empty::before,
.subSourceText:empty::before,
.sourceText:empty::before,
.departmentText:empty::before,
.addressText:empty::before,
.locationText:empty::before,
.userText:empty::before {
  display: none !important
}

.email::before,
.whatsapp::before,
.phone::before,
.idText::before,
.dateText::before,
.timeText::before,
.subSourceText::before,
.sourceText::before,
.departmentText::before,
.addressText::before,
.locationText::before,
.userText::before {
  top: 2px;
  margin-right: .5rem;
  color: inherit;
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  opacity: .7
}

.userText {
  font-weight: 600;
  text-transform: capitalize;
  pointer-events: none;
  z-index: 2
}

.userText::before {
  content: ""
}

.addressText,
.locationText {
  font-size: .937rem;
  text-transform: capitalize;
  z-index: 2
}

.addressText::before,
.locationText::before {
  content: ""
}

.departmentText {
  text-transform: capitalize;
  pointer-events: none;
  z-index: 2
}

.departmentText::before {
  content: ""
}

.sourceText {
  font-weight: 400;
  text-transform: capitalize;
  pointer-events: none;
  pointer-events: none;
  z-index: 2
}

.sourceText::before {
  content: ""
}

.subSourceText {
  font-size: .733rem;
  text-transform: capitalize;
  font-weight: 400;
  margin-top: .5rem;
  pointer-events: none;
  pointer-events: none;
  z-index: 2
}

.subSourceText::before {
  display: none;
  opacity: 0;
  content: ""
}

.timeText {
  pointer-events: none;
  z-index: 2
}

.timeText::before {
  content: ""
}

.dateText {
  font-size: .878rem;
  pointer-events: none;
  opacity: .7;
  pointer-events: none;
  z-index: 2
}

.dateText::before {
  content: ""
}

.idText {
  font-size: .878rem;
  opacity: .7;
  pointer-events: none;
  z-index: 2
}

.idText::before {
  content: "#"
}

.phone {
  font-size: .95rem;
  letter-spacing: .5px;
  opacity: .95
}

.phone:hover {
  color: #293db1
}

.phone::before {
  content: ""
}

.whatsapp {
  font-size: .95rem;
  letter-spacing: .5px;
  opacity: .95
}

.whatsapp:hover {
  color: #293db1
}

.whatsapp::before {
  content: ""
}

.email {
  font-size: .95rem;
  letter-spacing: .5px;
  opacity: .95
}

.email:hover {
  color: #293db1
}

.email::before {
  content: ""
}

.messageText {
  z-index: 2
}

.messageText:hover .label {
  color: var(--color1)
}

.messageText:hover .message {
  display: block;
  z-index: 101
}

.messageText .label {
  color: var(--text-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: .733rem;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer
}

.messageText .label i {
  font-size: .733rem;
  color: inherit;
  padding-right: 5px;
  margin-right: 5px;
  border-right: 1px solid var(--inputColor3)
}

.messageText .message {
  color: var(--text-color);
  display: none;
  position: absolute;
  top: 100%;
  left: -1px;
  width: 300px;
  font-size: .937rem;
  font-weight: 400;
  line-height: 1.5 !important;
  white-space: wrap;
  background-color: var(--white);
  border: 1px solid var(--borderGray);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1rem
}

@media(min-width: 768px) {
  .messageText .message {
    width: 500px
  }
}

.sText {
  color: var(--text-color);
  display: block;
  font-size: .878rem;
  font-weight: 400;
  margin-bottom: .5rem;
  pointer-events: none;
  z-index: 2
}

.bText {
  color: var(--text-color);
  display: block;
  font-size: .937rem;
  margin: 0;
  pointer-events: none;
  z-index: 2
}

[reminder=active] {
  border: 1px solid #b6f3b6
}

[reminder=done] {
  background-color: #ecffef
}

[reminder=done] .btn {
  display: none
}

[reminder=cancel] {
  background-color: var(--lightGray);
  border: 1px solid var(--borderGray);
  opacity: .5
}

[reminder=cancel] .btn {
  display: none
}

[label] {
  height: 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  font-size: .733rem;
  font-weight: 500;
  padding: 5px;
  border-radius: 3px 0 0 3px
}

[label]:empty {
  padding: 0
}

[label]:empty:before {
  display: none
}

[label]::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  height: 0;
  display: inline-block;
  border: 12px solid #e8e9ee;
  border-right: 10px inset rgba(0, 0, 0, 0) !important
}

[label=red] {
  color: var(--white);
  background-color: #ff5b5b
}

[label=red]::after {
  border-color: #ff5b5b rgba(0, 0, 0, 0) #ff5b5b #ff5b5b
}

[label=orange] {
  color: var(--white);
  background-color: #ff8146
}

[label=orange]::after {
  border-color: #ff8146 rgba(0, 0, 0, 0) #ff8146 #ff8146
}

[label=yellow] {
  color: var(--darkGray);
  background-color: #fff75b
}

[label=yellow]::after {
  border-color: #fff75b rgba(0, 0, 0, 0) #fff75b #fff75b
}

[label=green] {
  color: var(--white);
  background-color: #36bb22
}

[label=green]::after {
  border-color: #36bb22 rgba(0, 0, 0, 0) #36bb22 #36bb22
}

[label=blue] {
  color: var(--white);
  background-color: #5b69ff
}

[label=blue]::after {
  border-color: #5b69ff rgba(0, 0, 0, 0) #5b69ff #5b69ff
}

[label=gray] {
  color: var(--darkGray);
  background-color: #e8e9ee
}

[label=gray]::after {
  border-color: #e8e9ee rgba(0, 0, 0, 0) #e8e9ee #e8e9ee
}

.timeShow {
  display: block
}

.popupWindow,
.centerPopupDiv,
.alertPopupDiv,
.messageDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.popupWindow .icon,
.centerPopupDiv .icon,
.alertPopupDiv .icon,
.messageDiv .icon {
  width: 100px;
  margin: 0 auto;
  font-size: clamp(25.17630976px, 15.0881970526px + 0.0210169015*100vw, 57.122px)
}

.popupWindow .image,
.centerPopupDiv .image,
.alertPopupDiv .image,
.messageDiv .image {
  width: 100%;
  max-width: 300px;
  margin: 0 auto
}

.popupWindow .subTitle,
.centerPopupDiv .subTitle,
.alertPopupDiv .subTitle,
.messageDiv .subTitle {
  color: var(--color1)
}

.popupWindow .name,
.popupWindow .subHeading,
.centerPopupDiv .name,
.centerPopupDiv .subHeading,
.alertPopupDiv .name,
.alertPopupDiv .subHeading,
.messageDiv .name,
.messageDiv .subHeading {
  display: block;
  margin-bottom: 0
}

.popupWindow .heading,
.popupWindow .title,
.centerPopupDiv .heading,
.centerPopupDiv .title,
.alertPopupDiv .heading,
.alertPopupDiv .title,
.messageDiv .heading,
.messageDiv .title {
  margin: 0;
  margin-bottom: 1rem
}

.popupWindow .heading,
.centerPopupDiv .heading,
.alertPopupDiv .heading,
.messageDiv .heading {
  display: block;
  color: var(--black);
  font-weight: 600
}

.popupWindow .text,
.centerPopupDiv .text,
.alertPopupDiv .text,
.messageDiv .text {
  font-size: .937rem
}

.popupWindow *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.centerPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.alertPopupDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty,
.messageDiv *:not(input):not(textarea):not(img):not(i):not(.viewBtn):not(.popupWindowClose):empty {
  display: none
}

.popupWindow p,
.centerPopupDiv p,
.alertPopupDiv p,
.messageDiv p {
  line-height: 1.3
}

.popupWindow .listDiv,
.centerPopupDiv .listDiv,
.alertPopupDiv .listDiv,
.messageDiv .listDiv {
  margin-top: 1rem
}

.popupWindow .listDiv li,
.centerPopupDiv .listDiv li,
.alertPopupDiv .listDiv li,
.messageDiv .listDiv li {
  color: var(--darkGray);
  font-size: .878rem;
  margin-bottom: 1rem;
  padding-left: 1rem
}

.popupWindow .listDiv li .sText,
.centerPopupDiv .listDiv li .sText,
.alertPopupDiv .listDiv li .sText,
.messageDiv .listDiv li .sText {
  margin-top: .25rem
}

.popupWindow .listDiv li::before,
.centerPopupDiv .listDiv li::before,
.alertPopupDiv .listDiv li::before,
.messageDiv .listDiv li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 5px;
  background-color: var(--color3);
  border-radius: var(--radius)
}

.popupWindow .tableList,
.centerPopupDiv .tableList,
.alertPopupDiv .tableList,
.messageDiv .tableList {
  width: 100%;
  margin-top: 1rem
}

.popupWindow .tableList li,
.centerPopupDiv .tableList li,
.alertPopupDiv .tableList li,
.messageDiv .tableList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: .5rem;
  padding-bottom: .5rem
}

.popupWindow .tableList li label,
.centerPopupDiv .tableList li label,
.alertPopupDiv .tableList li label,
.messageDiv .tableList li label {
  position: relative;
  top: 0;
  left: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
  color: var(--textGray);
  font-size: .878rem;
  font-weight: 400;
  padding: 0;
  line-height: 1.6
}

.popupWindow .tableList li p,
.centerPopupDiv .tableList li p,
.alertPopupDiv .tableList li p,
.messageDiv .tableList li p {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
  margin: 0;
  color: var(--darkGray);
  font-size: .878rem;
  font-weight: 500;
  line-height: 1.6
}

.popupWindow .tableList li span,
.centerPopupDiv .tableList li span,
.alertPopupDiv .tableList li span,
.messageDiv .tableList li span {
  color: var(--textGray);
  margin: 0 .5rem
}

.popupWindow .editDetailsBtn,
.centerPopupDiv .editDetailsBtn,
.alertPopupDiv .editDetailsBtn,
.messageDiv .editDetailsBtn {
  margin: 0;
  border-radius: var(--inputRadius);
  margin-left: auto
}

.popupWindow .tabMenuNav,
.centerPopupDiv .tabMenuNav,
.alertPopupDiv .tabMenuNav,
.messageDiv .tabMenuNav {
  padding: 1rem;
  padding-bottom: 0
}

.popupWindow #tabWrapper .tabBarSlide,
.centerPopupDiv #tabWrapper .tabBarSlide,
.alertPopupDiv #tabWrapper .tabBarSlide,
.messageDiv #tabWrapper .tabBarSlide {
  padding: 1rem
}

.popupWindow .popupCloseBg,
.centerPopupDiv .popupCloseBg,
.alertPopupDiv .popupCloseBg,
.messageDiv .popupCloseBg {
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .253);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in
}

.popupWindow .btnDiv,
.popupWindow .btnSection,
.centerPopupDiv .btnDiv,
.centerPopupDiv .btnSection,
.alertPopupDiv .btnDiv,
.alertPopupDiv .btnSection,
.messageDiv .btnDiv,
.messageDiv .btnSection {
  gap: 20px;
  margin-top: 2rem
}

.popupWindow .btnDiv a,
.popupWindow .btnDiv button,
.popupWindow .btnSection a,
.popupWindow .btnSection button,
.centerPopupDiv .btnDiv a,
.centerPopupDiv .btnDiv button,
.centerPopupDiv .btnSection a,
.centerPopupDiv .btnSection button,
.alertPopupDiv .btnDiv a,
.alertPopupDiv .btnDiv button,
.alertPopupDiv .btnSection a,
.alertPopupDiv .btnSection button,
.messageDiv .btnDiv a,
.messageDiv .btnDiv button,
.messageDiv .btnSection a,
.messageDiv .btnSection button {
  min-width: 150px;
  padding: 1rem;
  font-size: 1rem
}

.popupPadding {
  padding-left: 1rem;
  padding-right: 1rem
}

@media(min-width: 768px) {
  .popupPadding {
    padding-left: 2rem;
    padding-right: 2rem
  }
}

.infoMessagePopup,
.warningMessagePopup,
.successMessagePopup,
.errorMessagePopup,
.timeOutPopup,
.commonPopup,
.centerPopup,
[side-popup],
.sidePopup,
.infoAlertPopup,
.infoPopup,
.warningAlertPopup,
.warningPopup,
.successAlertPopup,
.successPopup,
.errorAlertPopup,
.alertPopup,
.alertPopup {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 305;
  width: 100%;
  height: 100vh;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.infoAlertPopup,
.infoPopup,
.warningAlertPopup,
.warningPopup,
.successAlertPopup,
.successPopup,
.errorAlertPopup,
.alertPopup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: auto;
  padding: 1rem;
  z-index: 380
}

.infoAlertPopup .alertPopupDiv,
.infoPopup .alertPopupDiv,
.warningAlertPopup .alertPopupDiv,
.warningPopup .alertPopupDiv,
.successAlertPopup .alertPopupDiv,
.successPopup .alertPopupDiv,
.errorAlertPopup .alertPopupDiv,
.alertPopup .alertPopupDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  width: 100%;
  max-width: 450px;
  height: auto;
  min-height: 300px;
  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;
  margin: auto;
  background-color: var(--white);
  -webkit-box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
  z-index: 115
}

.infoAlertPopup .alertPopupDiv .alertIcon,
.infoPopup .alertPopupDiv .alertIcon,
.warningAlertPopup .alertPopupDiv .alertIcon,
.warningPopup .alertPopupDiv .alertIcon,
.successAlertPopup .alertPopupDiv .alertIcon,
.successPopup .alertPopupDiv .alertIcon,
.errorAlertPopup .alertPopupDiv .alertIcon,
.alertPopup .alertPopupDiv .alertIcon {
  font-size: 1.413rem;
  margin-bottom: clamp(20.0704px, 15.7347368421px + 0.0090326316*100vw, 33.8px)
}

.infoAlertPopup .alertPopupDiv .heading,
.infoPopup .alertPopupDiv .heading,
.warningAlertPopup .alertPopupDiv .heading,
.warningPopup .alertPopupDiv .heading,
.successAlertPopup .alertPopupDiv .heading,
.successPopup .alertPopupDiv .heading,
.errorAlertPopup .alertPopupDiv .heading,
.alertPopup .alertPopupDiv .heading {
  color: var(--darkGray);
  font-size: clamp(28.1974669312px, 13.6518459621px + 0.030303377*100vw, 74.2586px);
  font-weight: 500;
  margin: 0;
  line-height: 1
}

.infoAlertPopup .alertPopupDiv .text,
.infoPopup .alertPopupDiv .text,
.warningAlertPopup .alertPopupDiv .text,
.warningPopup .alertPopupDiv .text,
.successAlertPopup .alertPopupDiv .text,
.successPopup .alertPopupDiv .text,
.errorAlertPopup .alertPopupDiv .text,
.alertPopup .alertPopupDiv .text {
  font-size: 1rem;
  text-transform: capitalize
}

.infoAlertPopup .popupCloseIcon,
.infoPopup .popupCloseIcon,
.warningAlertPopup .popupCloseIcon,
.warningPopup .popupCloseIcon,
.successAlertPopup .popupCloseIcon,
.successPopup .popupCloseIcon,
.errorAlertPopup .popupCloseIcon,
.alertPopup .popupCloseIcon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: .25rem;
  background-color: var(--lightGray);
  border-radius: var(--inputRadius);
  border: 1px solid var(--lightGray);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.infoAlertPopup .popupCloseIcon:hover,
.infoPopup .popupCloseIcon:hover,
.warningAlertPopup .popupCloseIcon:hover,
.warningPopup .popupCloseIcon:hover,
.successAlertPopup .popupCloseIcon:hover,
.successPopup .popupCloseIcon:hover,
.errorAlertPopup .popupCloseIcon:hover,
.alertPopup .popupCloseIcon:hover {
  background-color: var(--borderGray)
}

.infoAlertPopup .popupCloseIcon i,
.infoPopup .popupCloseIcon i,
.warningAlertPopup .popupCloseIcon i,
.warningPopup .popupCloseIcon i,
.successAlertPopup .popupCloseIcon i,
.successPopup .popupCloseIcon i,
.errorAlertPopup .popupCloseIcon i,
.alertPopup .popupCloseIcon i {
  color: var(--black);
  font-size: .667rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.infoAlertPopup .popupCloseBg,
.infoPopup .popupCloseBg,
.warningAlertPopup .popupCloseBg,
.warningPopup .popupCloseBg,
.successAlertPopup .popupCloseBg,
.successPopup .popupCloseBg,
.errorAlertPopup .popupCloseBg,
.alertPopup .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: rgba(0, 9, 27, .089);
  cursor: pointer;
  -webkit-transition: opacity .3s !important;
  transition: opacity .3s !important
}

.errorAlertPopup .alertIcon,
.alertPopup .alertIcon {
  color: var(--red)
}

.successAlertPopup .alertIcon,
.successPopup .alertIcon {
  color: var(--green)
}

.warningAlertPopup .alertIcon,
.warningPopup .alertIcon {
  color: #f3d571
}

.infoAlertPopup .alertIcon,
.infoPopup .alertIcon {
  color: var(--textGray)
}

[side-popup],
.sidePopup {
  min-height: 100vh;
  text-align: left;
  background-color: var(--white);
  border-left: 1px solid var(--borderGray);
  -webkit-box-shadow: rgba(50, 50, 93, .25) 0px 100px 10px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
  box-shadow: rgba(50, 50, 93, .25) 0px 100px 10px -20px, rgba(0, 0, 0, .3) 0px 30px 60px -30px;
  -webkit-transform: translateX(120%);
  transform: translateX(120%);
  overflow: auto
}

@media(min-width: 768px) {

  [side-popup],
  .sidePopup {
    max-width: 500px;
    -webkit-transform: translateX(800px);
    transform: translateX(800px)
  }
}

[side-popup] .popupCloseIcon,
.sidePopup .popupCloseIcon {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 30px;
  height: 30px;
  padding: 1rem;
  background-color: var(--color2);
  border-radius: var(--radius);
  border: 1px solid var(--borderGray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

[side-popup] .popupCloseIcon:hover,
.sidePopup .popupCloseIcon:hover {
  background-color: var(--color3)
}

[side-popup] .popupCloseIcon:hover i,
.sidePopup .popupCloseIcon:hover i {
  color: var(--white)
}

[side-popup] .popupCloseIcon i,
.sidePopup .popupCloseIcon i {
  color: var(--white);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

[side-popup] .sidePopupSection,
.sidePopup .sidePopupSection {
  z-index: 1;
  height: 100vh;
  background-color: var(--white)
}

[side-popup] .sidePopupSection .btnSection,
.sidePopup .sidePopupSection .btnSection {
  margin-top: clamp(20.0704px, 15.7347368421px + 0.0090326316*100vw, 33.8px)
}

[side-popup] .sidePopupSection .btnSection .btn,
.sidePopup .sidePopupSection .btnSection .btn {
  margin: 0;
  margin-right: 1rem !important
}

.commonPopup,
[center-popup],
.centerPopup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: auto;
  padding: 1rem
}

.commonPopup .centerPopupDiv,
[center-popup] .centerPopupDiv,
.centerPopup .centerPopupDiv {
  margin: auto;
  width: 100%;
  max-width: 500px;
  height: auto;
  min-height: 300px;
  padding: 2rem;
  background-color: var(--white);
  -webkit-box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  box-shadow: rgba(50, 50, 93, .034) 0px 50px 100px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
  z-index: 115
}

.commonPopup .popupCloseIcon,
[center-popup] .popupCloseIcon,
.centerPopup .popupCloseIcon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: .25rem;
  background-color: var(--lightGray);
  border-radius: var(--inputRadius);
  border: 1px solid var(--lightGray);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.commonPopup .popupCloseIcon:hover,
[center-popup] .popupCloseIcon:hover,
.centerPopup .popupCloseIcon:hover {
  background-color: var(--borderGray)
}

.commonPopup .popupCloseIcon:hover i,
[center-popup] .popupCloseIcon:hover i,
.centerPopup .popupCloseIcon:hover i {
  color: var(--color1)
}

.commonPopup .popupCloseIcon i,
[center-popup] .popupCloseIcon i,
.centerPopup .popupCloseIcon i {
  color: var(--color2);
  font-size: .667rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.commonPopup .popupCloseBg,
[center-popup] .popupCloseBg,
.centerPopup .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: rgba(0, 9, 27, .089);
  cursor: pointer;
  -webkit-transition: opacity .3s !important;
  transition: opacity .3s !important
}

.commonPopup {
  z-index: 380
}

.timeOutPopup {
  display: none;
  width: 100%;
  -webkit-transform: translateY(-100%) !important;
  transform: translateY(-100%) !important;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: auto;
  -webkit-animation: timeOutPopup 2.5s ease-out;
  animation: timeOutPopup 2.5s ease-out
}

@-webkit-keyframes timeOutPopup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  1% {
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }

  80% {
    opacity: 1
  }

  90% {
    -webkit-transform: none;
    transform: none
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

@keyframes timeOutPopup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  1% {
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }

  80% {
    opacity: 1
  }

  90% {
    -webkit-transform: none;
    transform: none
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

.timeOutPopup .timeOutPopupDiv {
  margin: 0 auto;
  margin-top: 5%;
  width: 100%;
  max-width: 500px;
  height: auto;
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-self: center;
  -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;
  background-color: var(--white);
  -webkit-box-shadow: rgba(50, 50, 93, .034) 0px 50px 200px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  box-shadow: rgba(50, 50, 93, .034) 0px 50px 200px -20px, rgba(0, 7, 36, .041) 0px 30px 60px -30px;
  border-radius: var(--radius);
  border: 1px solid var(--borderGray);
  text-align: center;
  overflow: hidden;
  z-index: 115
}

.timeOutPopup .timeOutPopupDiv .btnSection {
  margin-top: 2rem
}

.timeOutPopup .timeOutPopupDiv .btnSection .btn {
  margin: 0 .5rem
}

.timeOutPopup .popupCloseIcon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 30px;
  height: 30px;
  padding: 1rem;
  background-color: var(--lightGray);
  border-radius: var(--radius);
  border: 1px solid var(--borderGray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.timeOutPopup .popupCloseIcon:hover {
  background-color: var(--borderGray)
}

.timeOutPopup .popupCloseIcon:hover i {
  color: var(--color2)
}

.timeOutPopup .popupCloseIcon i {
  color: var(--color2);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.timeOutPopup .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: rgba(0, 9, 27, .24);
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.infoMessagePopup,
.warningMessagePopup,
.successMessagePopup,
.errorMessagePopup {
  position: fixed;
  top: unset;
  bottom: 2rem;
  right: 2rem;
  z-index: 110;
  width: 100%;
  height: auto;
  max-width: 400px;
  margin-left: auto;
  display: none;
  border-radius: var(--radius);
  border: 1px solid var(--borderGray);
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  -webkit-box-shadow: rgba(17, 12, 46, .062) 0px 48px 100px 0px;
  box-shadow: rgba(17, 12, 46, .062) 0px 48px 100px 0px;
  -webkit-transform: translateY(150%);
  transform: translateY(150%);
  overflow: hidden
}

.infoMessagePopup .messageDiv,
.warningMessagePopup .messageDiv,
.successMessagePopup .messageDiv,
.errorMessagePopup .messageDiv {
  padding: 1rem;
  padding-left: calc(70px + 1rem)
}

.infoMessagePopup .messageDiv .iconDiv,
.warningMessagePopup .messageDiv .iconDiv,
.successMessagePopup .messageDiv .iconDiv,
.errorMessagePopup .messageDiv .iconDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 100%;
  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;
  padding: 1rem;
  display: flex;
  align-items: center
}

.infoMessagePopup .messageDiv .iconDiv i,
.warningMessagePopup .messageDiv .iconDiv i,
.successMessagePopup .messageDiv .iconDiv i,
.errorMessagePopup .messageDiv .iconDiv i {
  margin: auto;
  font-size: clamp(28.1974669312px, 13.6518459621px + 0.030303377*100vw, 74.2586px)
}

.infoMessagePopup .messageDiv .title,
.warningMessagePopup .messageDiv .title,
.successMessagePopup .messageDiv .title,
.errorMessagePopup .messageDiv .title {
  margin: 0
}

.infoMessagePopup .messageDiv p,
.warningMessagePopup .messageDiv p,
.successMessagePopup .messageDiv p,
.errorMessagePopup .messageDiv p {
  margin-top: .5rem;
  color: var(--gray);
  font-size: .878rem;
  font-weight: 400;
  line-height: 1.4
}

.infoMessagePopup .popupClose,
.warningMessagePopup .popupClose,
.successMessagePopup .popupClose,
.errorMessagePopup .popupClose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

.infoMessagePopup .popupClose:hover,
.warningMessagePopup .popupClose:hover,
.successMessagePopup .popupClose:hover,
.errorMessagePopup .popupClose:hover {
  opacity: .5
}

.infoMessagePopup .popupClose i,
.warningMessagePopup .popupClose i,
.successMessagePopup .popupClose i,
.errorMessagePopup .popupClose i {
  font-size: .878rem;
  cursor: pointer
}

.errorMessagePopup .iconDiv {
  background-color: #ffd5d5;
  color: var(--red)
}

.successMessagePopup .iconDiv {
  background-color: #e9ffe9;
  color: #309130
}

.warningMessagePopup .iconDiv {
  background-color: #fff0c1;
  color: var(--white)
}

.infoMessagePopup .iconDiv {
  background-color: var(--lightGray);
  color: var(--gray)
}

.rightFloatingPopup {
  position: fixed;
  bottom: 0;
  right: 100%;
  z-index: 380;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0
}

.rightFloatingPopup.popupIntro .popupWindow {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.rightFloatingPopup .popupWindow {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 75vh;
  padding: var(--btnRadius) var(--btnRadius) 0 0;
  background-color: var(--white);
  border-top: 1px solid var(--borderGray);
  border-radius: 1rem 1rem 0 0;
  -webkit-box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  z-index: 2;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  scroll-behavior: auto;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms
}

.rightFloatingPopup .popupWindow::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 50px;
  height: 5px;
  border-radius: var(--radius);
  background-color: var(--borderGray);
  z-index: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none
}

@media(min-width: 1024px) {
  .rightFloatingPopup .popupWindow::before {
    display: none
  }
}

.rightFloatingPopup .popupWindow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 35px;
  height: 35px;
  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;
  color: var(--textGray);
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  padding: 5px;
  border-radius: 100%;
  background-color: var(--black);
  border: 1px solid var(--black);
  border-top: 1px solid var(--darkGray);
  opacity: 0;
  z-index: 1;
  -webkit-transform: translate(-50%, -150%);
  transform: translate(-50%, -150%);
  pointer-events: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 1024px) {
  .rightFloatingPopup .popupWindow::after {
    display: none
  }
}

.rightFloatingPopup .popupWindowClose,
.rightFloatingPopup .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 375ms ease-out;
  transition: all 375ms ease-out
}

@media(min-width: 1024px) {
  .rightFloatingPopup.popupIntro {
    -webkit-transform: none;
    transform: none
  }
}

.rightFloatingPopup .popupWindow {
  padding: 2rem 0;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

@media(min-width: 1024px) {
  .rightFloatingPopup .popupWindow {
    left: unset;
    right: 0;
    width: clamp(500px, 40vw, 600px);
    height: 100vh;
    max-height: 100vh;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-radius: 0;
    -webkit-transform: none;
    transform: none;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-box-shadow: rgba(0, 0, 0, .1) 10px 0 15px -3px, rgba(0, 0, 0, .05) 4px 0 6px -2px;
    box-shadow: rgba(0, 0, 0, .1) 10px 0 15px -3px, rgba(0, 0, 0, .05) 4px 0 6px -2px;
    overflow-y: auto
  }
}

.rightFloatingPopup .popupWindow .popupCloseIcon {
  display: none;
  position: absolute;
  top: .7075rem;
  right: .7075rem;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: var(--lightGray);
  border-radius: var(--radius);
  cursor: pointer
}

@media(min-width: 1024px) {
  .rightFloatingPopup .popupWindow .popupCloseIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}

.rightFloatingPopup .popupWindow .popupCloseIcon i {
  margin: auto;
  cursor: pointer
}

.rightFloatingPopup .popupWindow .heading {
  margin: 0;
  margin-bottom: .7075rem;
  width: 100%;
  text-align: center
}

.rightFloatingPopup .popupWindow .formDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%)
}

.rightFloatingPopup .popupWindow .btnDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 1rem
}

.rightFloatingPopup .popupWindow .btnDiv a,
.rightFloatingPopup .popupWindow .btnDiv button {
  margin: 0;
  width: 48%
}

@media(min-width: 1024px) {
  .rightFloatingPopup .popupWindowClose {
    opacity: 0
  }
}

.moreOptionPopup:hover .moreIcon {
  opacity: .8
}

.moreOptionPopup .partialDataUpdatePopup,
.moreOptionPopup .moreOptionView {
  position: fixed;
  bottom: 0;
  right: 100%;
  z-index: 380;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0
}

.moreOptionPopup .partialDataUpdatePopup.popupIntro .popupWindow,
.moreOptionPopup .moreOptionView.popupIntro .popupWindow {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow,
.moreOptionPopup .moreOptionView .popupWindow {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 75vh;
  padding: var(--btnRadius) var(--btnRadius) 0 0;
  background-color: var(--white);
  border-top: 1px solid var(--borderGray);
  border-radius: 1rem 1rem 0 0;
  -webkit-box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  z-index: 2;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  scroll-behavior: auto;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow::before,
.moreOptionPopup .moreOptionView .popupWindow::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 50px;
  height: 5px;
  border-radius: var(--radius);
  background-color: var(--borderGray);
  z-index: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none
}

@media(min-width: 1024px) {

  .moreOptionPopup .partialDataUpdatePopup .popupWindow::before,
  .moreOptionPopup .moreOptionView .popupWindow::before {
    display: none
  }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow::after,
.moreOptionPopup .moreOptionView .popupWindow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 35px;
  height: 35px;
  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;
  color: var(--textGray);
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  padding: 5px;
  border-radius: 100%;
  background-color: var(--black);
  border: 1px solid var(--black);
  border-top: 1px solid var(--darkGray);
  opacity: 0;
  z-index: 1;
  -webkit-transform: translate(-50%, -150%);
  transform: translate(-50%, -150%);
  pointer-events: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 1024px) {

  .moreOptionPopup .partialDataUpdatePopup .popupWindow::after,
  .moreOptionPopup .moreOptionView .popupWindow::after {
    display: none
  }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindowClose,
.moreOptionPopup .partialDataUpdatePopup .popupCloseBg,
.moreOptionPopup .moreOptionView .popupWindowClose,
.moreOptionPopup .moreOptionView .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 375ms ease-out;
  transition: all 375ms ease-out
}

@media(min-width: 768px) {

  .moreOptionPopup .partialDataUpdatePopup,
  .moreOptionPopup .moreOptionView {
    position: absolute;
    top: 100%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    display: none;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    padding: .7075rem;
    overflow: unset;
    pointer-events: none
  }
}

.moreOptionPopup .partialDataUpdatePopup .popupWindow,
.moreOptionPopup .moreOptionView .popupWindow {
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  padding-right: 0;
  padding-left: 0
}

@media(min-width: 768px) {

  .moreOptionPopup .partialDataUpdatePopup .popupWindow,
  .moreOptionPopup .moreOptionView .popupWindow {
    position: relative;
    min-width: 230px;
    min-height: auto;
    background-color: var(--shade-1);
    border-radius: var(--radius);
    border: 1px solid var(--shade-1);
    padding: 0;
    opacity: 0;
    -webkit-transform: none;
    transform: none;
    -webkit-box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px !important;
    box-shadow: rgba(50, 50, 93, .13) 0px 30px 60px -12px, rgba(0, 0, 0, .137) 0px 18px 36px -18px !important
  }
}

@media(min-width: 768px) {

  .moreOptionPopup .partialDataUpdatePopup .popupWindow:before,
  .moreOptionPopup .partialDataUpdatePopup .popupWindow:after,
  .moreOptionPopup .moreOptionView .popupWindow:before,
  .moreOptionPopup .moreOptionView .popupWindow:after {
    display: none
  }
}

@media(min-width: 768px) {

  .moreOptionPopup .partialDataUpdatePopup .popupWindowClose,
  .moreOptionPopup .moreOptionView .popupWindowClose {
    opacity: 0
  }
}

@media(min-width: 768px) {
  .moreOptionPopup .popupIntro {
    display: block;
    -webkit-transform: none;
    transform: none;
    right: 0;
    opacity: 1;
    pointer-events: all
  }
}

.moreOptionPopup .popupIntro .popupWindow {
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content
}

@media(min-width: 768px) {
  .moreOptionPopup .popupIntro .popupWindow {
    opacity: 1
  }
}

.moreOptionPopup .popupIntro .popupWindow a {
  -webkit-box-flex: unset;
  -ms-flex: unset;
  flex: unset
}

.moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn, .outlinedBtn, .tonedBtn, .textBtn) {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

@media(min-width: 768px) {
  .moreOptionPopup .popupIntro .popupWindow a:not(.filledBtn, .outlinedBtn, .tonedBtn, .textBtn) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }
}

.changeUserPopup,
.changeStatusPopup,
.partialDataUpdatePopup {
  position: fixed;
  bottom: 0;
  right: 100%;
  z-index: 380;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0
}

.changeUserPopup.popupIntro .popupWindow,
.changeStatusPopup.popupIntro .popupWindow,
.partialDataUpdatePopup.popupIntro .popupWindow {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1) !important
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 75vh;
  padding: var(--btnRadius) var(--btnRadius) 0 0;
  background-color: var(--white);
  border-top: 1px solid var(--borderGray);
  border-radius: 1rem 1rem 0 0;
  -webkit-box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
  z-index: 2;
  -webkit-transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all .6s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  scroll-behavior: auto;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms
}

.changeUserPopup .popupWindow::before,
.changeStatusPopup .popupWindow::before,
.partialDataUpdatePopup .popupWindow::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 50px;
  height: 5px;
  border-radius: var(--radius);
  background-color: var(--borderGray);
  z-index: 1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow::before,
  .changeStatusPopup .popupWindow::before,
  .partialDataUpdatePopup .popupWindow::before {
    display: none
  }
}

.changeUserPopup .popupWindow::after,
.changeStatusPopup .popupWindow::after,
.partialDataUpdatePopup .popupWindow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 35px;
  height: 35px;
  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;
  color: var(--textGray);
  font-family: var(--icon-style) !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  padding: 5px;
  border-radius: 100%;
  background-color: var(--black);
  border: 1px solid var(--black);
  border-top: 1px solid var(--darkGray);
  opacity: 0;
  z-index: 1;
  -webkit-transform: translate(-50%, -150%);
  transform: translate(-50%, -150%);
  pointer-events: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1)
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow::after,
  .changeStatusPopup .popupWindow::after,
  .partialDataUpdatePopup .popupWindow::after {
    display: none
  }
}

.changeUserPopup .popupWindowClose,
.changeUserPopup .popupCloseBg,
.changeStatusPopup .popupWindowClose,
.changeStatusPopup .popupCloseBg,
.partialDataUpdatePopup .popupWindowClose,
.partialDataUpdatePopup .popupCloseBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 375ms ease-out;
  transition: all 375ms ease-out
}

@media(min-width: 1024px) {

  .changeUserPopup,
  .changeStatusPopup,
  .partialDataUpdatePopup {
    position: fixed;
    bottom: 0;
    right: 100%;
    z-index: 380;
    width: 100%;
    height: 100vh;
    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;
    margin: 0;
    overflow: hidden
  }

  .changeUserPopup .popupWindow,
  .changeStatusPopup .popupWindow,
  .partialDataUpdatePopup .popupWindow {
    position: relative;
    bottom: unset;
    left: unset;
    width: 100%;
    max-width: 450px;
    min-height: 350px;
    max-height: 650px;
    padding: 2rem;
    background-color: var(--white);
    border-radius: var(--radius);
    -webkit-box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    box-shadow: rgba(50, 50, 93, 0) 0px -50px 100px -20px, rgba(0, 0, 0, 0) 0px -30px 60px -30px;
    z-index: 2;
    -webkit-transition: all 375ms ease-out;
    transition: all 375ms ease-out;
    -webkit-transform: translateY(110%) scale(0.95);
    transform: translateY(110%) scale(0.95)
  }

  .changeUserPopup .popupWindow::before,
  .changeStatusPopup .popupWindow::before,
  .partialDataUpdatePopup .popupWindow::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 50px;
    height: 5px;
    border-radius: var(--radius);
    background-color: var(--borderGray);
    z-index: 1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none
  }
}

@media(min-width: 1024px)and (min-width: 1024px) {

  .changeUserPopup .popupWindow::before,
  .changeStatusPopup .popupWindow::before,
  .partialDataUpdatePopup .popupWindow::before {
    display: none
  }
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow::after,
  .changeStatusPopup .popupWindow::after,
  .partialDataUpdatePopup .popupWindow::after {
    content: "";
    position: absolute;
    top: -50px;
    left: 50%;
    width: 25px;
    height: 25px;
    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;
    color: var(--borderGray);
    font-family: var(--icon-style) !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding: 5px;
    border-radius: 100%;
    background-color: var(--black);
    border: 1px solid var(--gray);
    opacity: 0;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    -webkit-transition: var(--transition1);
    transition: var(--transition1)
  }
}

@media(min-width: 1024px)and (min-width: 1024px) {

  .changeUserPopup .popupWindow::after,
  .changeStatusPopup .popupWindow::after,
  .partialDataUpdatePopup .popupWindow::after {
    display: none
  }
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindowClose,
  .changeStatusPopup .popupWindowClose,
  .partialDataUpdatePopup .popupWindowClose {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 375ms ease-out;
    transition: all 375ms ease-out;
    cursor: pointer
  }
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
  padding-top: 2rem
}

.changeUserPopup .popupWindow .heading,
.changeStatusPopup .popupWindow .heading,
.partialDataUpdatePopup .popupWindow .heading {
  margin: 0;
  margin-bottom: .7075rem;
  width: 100%;
  text-align: center
}

.changeUserPopup .popupWindow .popupCloseIcon,
.changeStatusPopup .popupWindow .popupCloseIcon,
.partialDataUpdatePopup .popupWindow .popupCloseIcon {
  display: none;
  position: absolute;
  top: .7075rem;
  right: .7075rem;
  z-index: 1;
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: var(--lightGray);
  border-radius: var(--radius);
  cursor: pointer
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow .popupCloseIcon,
  .changeStatusPopup .popupWindow .popupCloseIcon,
  .partialDataUpdatePopup .popupWindow .popupCloseIcon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}

.changeUserPopup .popupWindow .popupCloseIcon i,
.changeStatusPopup .popupWindow .popupCloseIcon i,
.partialDataUpdatePopup .popupWindow .popupCloseIcon i {
  margin: auto;
  cursor: pointer
}

.changeUserPopup .popupWindow .btnDiv,
.changeStatusPopup .popupWindow .btnDiv,
.partialDataUpdatePopup .popupWindow .btnDiv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 1rem
}

.changeUserPopup .popupWindow .btnDiv a,
.changeUserPopup .popupWindow .btnDiv button,
.changeStatusPopup .popupWindow .btnDiv a,
.changeStatusPopup .popupWindow .btnDiv button,
.partialDataUpdatePopup .popupWindow .btnDiv a,
.partialDataUpdatePopup .popupWindow .btnDiv button {
  margin: 0;
  width: 48%
}

.changeUserPopup .popupWindow,
.changeStatusPopup .popupWindow,
.partialDataUpdatePopup .popupWindow {
  min-height: 400px;
  padding: 0
}

.changeUserPopup .popupWindow .heading,
.changeStatusPopup .popupWindow .heading,
.partialDataUpdatePopup .popupWindow .heading {
  padding-top: var(--section-space-y);
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: 1rem
}

.changeUserPopup .popupWindow .heading::before,
.changeStatusPopup .popupWindow .heading::before,
.partialDataUpdatePopup .popupWindow .heading::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  border-radius: 1rem;
  background: var(--highlight)
}

.changeUserPopup .popupWindow .titleDiv,
.changeStatusPopup .popupWindow .titleDiv,
.partialDataUpdatePopup .popupWindow .titleDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: 2.83rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  margin: 0 !important
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow .titleDiv,
  .changeStatusPopup .popupWindow .titleDiv,
  .partialDataUpdatePopup .popupWindow .titleDiv {
    padding-top: 2rem
  }
}

.changeUserPopup .popupWindow .titleDiv .label,
.changeStatusPopup .popupWindow .titleDiv .label,
.partialDataUpdatePopup .popupWindow .titleDiv .label {
  margin: 0;
  color: var(--textGray);
  font-size: .878rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px
}

.changeUserPopup .popupWindow .scrollFormDiv,
.changeStatusPopup .popupWindow .scrollFormDiv,
.partialDataUpdatePopup .popupWindow .scrollFormDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  overflow-y: auto;
  max-height: 60vh;
  padding-bottom: 100px
}

@media(min-width: 1024px) {

  .changeUserPopup .popupWindow .scrollFormDiv,
  .changeStatusPopup .popupWindow .scrollFormDiv,
  .partialDataUpdatePopup .popupWindow .scrollFormDiv {
    max-height: 500px
  }
}

.changeUserPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1),
.changeStatusPopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1),
.partialDataUpdatePopup .popupWindow .scrollFormDiv .inputDiv:nth-last-child(1) {
  margin-bottom: 0
}

.changeUserPopup .popupWindow .formDiv,
.changeStatusPopup .popupWindow .formDiv,
.partialDataUpdatePopup .popupWindow .formDiv {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: 100px
}

.changeUserPopup .popupWindow .formDiv .inputDiv:nth-last-child(1),
.changeStatusPopup .popupWindow .formDiv .inputDiv:nth-last-child(1),
.partialDataUpdatePopup .popupWindow .formDiv .inputDiv:nth-last-child(1) {
  margin-bottom: 0
}

.changeUserPopup .popupWindow selector,
.changeStatusPopup .popupWindow selector,
.partialDataUpdatePopup .popupWindow selector {
  width: 100%
}

.changeUserPopup .popupWindow selector item,
.changeStatusPopup .popupWindow selector item,
.partialDataUpdatePopup .popupWindow selector item {
  width: 100%;
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  padding: 1rem .7075rem
}

.changeUserPopup .popupWindow selector selected,
.changeStatusPopup .popupWindow selector selected,
.partialDataUpdatePopup .popupWindow selector selected {
  width: inherit;
  border-radius: var(--radius)
}

.changeUserPopup .popupWindow .profileInput item,
.changeStatusPopup .popupWindow .profileInput item,
.partialDataUpdatePopup .popupWindow .profileInput item {
  min-height: 60px;
  padding: 5px .7075rem
}

.changeUserPopup .popupWindow .profileInput item img,
.changeStatusPopup .popupWindow .profileInput item img,
.partialDataUpdatePopup .popupWindow .profileInput item img {
  width: 50px;
  min-width: 50px;
  height: 50px
}

.changeUserPopup .popupWindow [multi] selected item,
.changeStatusPopup .popupWindow [multi] selected item,
.partialDataUpdatePopup .popupWindow [multi] selected item {
  padding: 5px
}

.changeUserPopup .popupWindow [multi] selected item img,
.changeStatusPopup .popupWindow [multi] selected item img,
.partialDataUpdatePopup .popupWindow [multi] selected item img {
  width: 40px;
  min-width: 40px;
  height: 40px
}

.changeUserPopup .popupWindow .avatarCenterView,
.changeStatusPopup .popupWindow .avatarCenterView,
.partialDataUpdatePopup .popupWindow .avatarCenterView {
  min-width: 260px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--inputColor1);
  border-radius: 2rem;
  margin-bottom: 1rem;
  overflow: hidden
}

.changeUserPopup .popupWindow .avatarCenterView::before,
.changeStatusPopup .popupWindow .avatarCenterView::before,
.partialDataUpdatePopup .popupWindow .avatarCenterView::before {
  position: absolute;
  top: 10px;
  left: calc(56px + 1rem);
  content: attr(data-label);
  display: block;
  color: var(--inputColor5);
  font-size: .733rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px
}

.changeUserPopup .popupWindow .avatarCenterView .avatar,
.changeStatusPopup .popupWindow .avatarCenterView .avatar,
.partialDataUpdatePopup .popupWindow .avatarCenterView .avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  overflow: hidden;
  margin: 6px;
  margin-right: 1rem
}

.changeUserPopup .popupWindow .avatarCenterView [src=""],
.changeStatusPopup .popupWindow .avatarCenterView [src=""],
.partialDataUpdatePopup .popupWindow .avatarCenterView [src=""] {
  display: none
}

.changeUserPopup .popupWindow .avatarCenterView .name,
.changeStatusPopup .popupWindow .avatarCenterView .name,
.partialDataUpdatePopup .popupWindow .avatarCenterView .name {
  margin: 0;
  margin-top: 17px;
  padding-right: .7075rem
}

.changeUserPopup .popupWindow .avatarCenterView .name:empty,
.changeStatusPopup .popupWindow .avatarCenterView .name:empty,
.partialDataUpdatePopup .popupWindow .avatarCenterView .name:empty {
  margin: 0;
  padding: 0
}

.changeUserPopup .popupWindow [type=date],
.changeUserPopup .popupWindow [type=datetime-local],
.changeStatusPopup .popupWindow [type=date],
.changeStatusPopup .popupWindow [type=datetime-local],
.partialDataUpdatePopup .popupWindow [type=date],
.partialDataUpdatePopup .popupWindow [type=datetime-local] {
  text-transform: uppercase
}

.changeUserPopup .popupWindow .btnSection,
.changeUserPopup .popupWindow .btnDiv,
.changeStatusPopup .popupWindow .btnSection,
.changeStatusPopup .popupWindow .btnDiv,
.partialDataUpdatePopup .popupWindow .btnSection,
.partialDataUpdatePopup .popupWindow .btnDiv {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-bottom: var(--section-space-y);
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0 2%;
  border-radius: inherit;
  background: inherit
}

.changeUserPopup .popupWindow .btnSection a,
.changeUserPopup .popupWindow .btnSection button,
.changeUserPopup .popupWindow .btnDiv a,
.changeUserPopup .popupWindow .btnDiv button,
.changeStatusPopup .popupWindow .btnSection a,
.changeStatusPopup .popupWindow .btnSection button,
.changeStatusPopup .popupWindow .btnDiv a,
.changeStatusPopup .popupWindow .btnDiv button,
.partialDataUpdatePopup .popupWindow .btnSection a,
.partialDataUpdatePopup .popupWindow .btnSection button,
.partialDataUpdatePopup .popupWindow .btnDiv a,
.partialDataUpdatePopup .popupWindow .btnDiv button {
  margin: 0;
  width: 48%
}

@media(min-width: 1024px) {
  .changeStatusPopup .popupWindow {
    overflow: hidden
  }
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--inputColor2)
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .label {
  margin: 0;
  color: var(--gray);
  font-size: .878rem;
  font-weight: 400;
  margin-bottom: 10px
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList .partialDataUpdateUserName {
  margin: 0;
  font-weight: 500
}

.changeStatusPopup .popupWindow .partialDataUpdateUserDetails .userDetailsList [status] {
  font-size: 1rem
}

.changeStatusPopup .popupWindow .changeStatusModule {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  margin-top: auto
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
  width: 100%;
  min-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-height: 60vh;
  width: 100%;
  min-width: 100%;
  overflow-y: auto
}

@media(min-width: 768px) {

  .changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer,
  .changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer {
    max-height: 400px
  }
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .reasonContainer:empty,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer:empty {
  display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover .activeStatus::after,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons:hover [active_status]::after {
  opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList {
  width: 100%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  color: var(--black);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 500;
  clear: both;
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-left: 3.9975rem;
  margin: 0;
  padding-top: 1.413rem;
  padding-bottom: 1.413rem;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid var(--lightGray);
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList * {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0;
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
  pointer-events: none;
  opacity: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList::before {
  content: "";
  position: absolute;
  top: 38%;
  left: 2rem;
  width: 10px;
  height: 10px;
  border-radius: .7075rem;
  z-index: 1;
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100%;
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .statusList input:focus {
  -webkit-box-shadow: none;
  box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  pointer-events: none
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::after,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::after {
  opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus::before,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status]::before {
  -webkit-animation: status-pulse 2s infinite;
  animation: status-pulse 2s infinite
}

.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons .activeStatus input::before,
.changeStatusPopup .popupWindow .changeStatusModule .primaryStatusReasons [active_status] input::before {
  content: "Current Status";
  position: absolute;
  top: 50%;
  right: .7075rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: var(--textGray);
  font-size: .667rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--lightGray);
  border: 1px solid var(--borderGray);
  border-radius: var(--radius);
  padding: 5px 10px
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList {
  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: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  color: var(--black);
  padding: 0 1rem;
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid var(--lightGray);
  -webkit-transition: var(--transition2);
  transition: var(--transition2);
  white-space: pre-line;
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:nth-last-of-type(1) {
  border-bottom: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList* {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList:hover input::after {
  opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  border: none;
  border-left: 5px solid rgba(0, 0, 0, 0);
  cursor: pointer
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input::after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(var(--borderGray)), to(rgba(0, 42, 51, 0)));
  background: linear-gradient(90deg, var(--borderGray) 0%, rgba(0, 42, 51, 0) 100%);
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: none;
  transform: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:focus {
  -webkit-box-shadow: none;
  box-shadow: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked {
  border-left: 5px solid var(--inputColor5);
  background: -webkit-gradient(linear, left top, right top, from(var(--inputColor1)), to(rgba(0, 42, 51, 0)));
  background: linear-gradient(90deg, var(--inputColor1) 0%, rgba(0, 42, 51, 0) 100%)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked::after {
  opacity: 1
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList input:checked+.title {
  color: var(--inputColor5)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList .title {
  margin: 0;
  display: block;
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 500
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p {
  font-weight: 500;
  margin-top: 5px;
  display: block;
  line-height: 1.3;
  opacity: .6
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .subStatusList p:empty {
  display: none
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv {
  width: 100%;
  margin: 0;
  margin-top: .7075rem;
  padding-top: .7075rem;
  border-top: 1px solid var(--borderGray)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::-webkit-input-placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::-webkit-input-placeholder {
  opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::-moz-placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::-moz-placeholder {
  opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input:-ms-input-placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea:-ms-input-placeholder {
  opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::-ms-input-placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::-ms-input-placeholder {
  opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv input::placeholder,
.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .reasonContainer .inputDiv textarea::placeholder {
  opacity: .5
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding-top: .7075rem;
  background-color: var(--white)
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv a.button {
  margin: 0
}

.changeStatusPopup .popupWindow .changeStatusModule .secondaryStatusReasons .btnDiv .backBtn i {
  top: 1px;
  margin: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.changeStatusPopup .popupWindow .formDiv {
  overflow: unset
}

.popupShow {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-transform: none !important;
  transform: none !important;
  opacity: 1 !important
}

.popupShow .popupCloseBg {
  width: 100% !important;
  opacity: 1 !important;
  pointer-events: all !important;
  cursor: pointer !important
}

.mobilePopupIntro,
.popupIntro {
  right: 0 !important
}

.mobilePopupIntro .popupWindow,
.popupIntro .popupWindow {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12) !important;
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12) !important;
  -webkit-transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.mobilePopupIntro .popupWindow::after,
.popupIntro .popupWindow::after {
  opacity: .85 !important
}

.mobilePopupIntro .popupWindowClose,
.mobilePopupIntro .popupCloseBg,
.popupIntro .popupWindowClose,
.popupIntro .popupCloseBg {
  display: block;
  background-color: rgba(0, 0, 0, .72) !important;
  -webkit-transition: opacity .4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transition: opacity .4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  -webkit-transition-delay: .375ms !important;
  transition-delay: .375ms !important;
  pointer-events: all !important
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  outline-style: none;
  -webkit-text-size-adjust: 100%;
  cursor: context-menu
}

*:before,
* :after {
  font-family: inherit
}

html:has(#dark:checked) {
  color-scheme: dark
}

@media(prefers-color-scheme: dark) {
  html:has(#dark:checked) .dashboardMainContainer .dashboardSection::before {
    color-scheme: dark;
    --bgShadeMobile: var(--bgShadeMobileDark) !important;
    background: var(--bgShadewebDark) !important
  }
}

html {
  color-scheme: light;
  width: 100vw;
  max-width: 100%;
  display: block;
  color: var(--text-color);
  background: var(--bg-color);
  scroll-behavior: smooth;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
  font-size: 16px
}

@media screen and (min-width: 300px) {
  html {
    font-size: calc(0.2352941176vw + 15.2941176471px)
  }
}

@media screen and (min-width: 2000px) {
  html {
    font-size: 20px
  }
}

.bodyIntro {
  height: 100vh !important;
  overflow: hidden !important
}

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  color: inherit;
  background: inherit;
  font-family: var(--font-family);
  line-height: 1.3;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
  scrollbar-color: var(--shade-3) var(--bg-color);
  overflow-y: auto
}

.bodyIntro {
  height: 100vh;
  overflow: hidden
}

.scrollTopIntro {
  top: -100% !important;
  -webkit-transition: all 575ms ease-out !important;
  transition: all 575ms ease-out !important
}

.scrollBottomIntro {
  bottom: -100% !important;
  -webkit-transition: all 575ms ease-in !important;
  transition: all 575ms ease-in !important
}

.m0 {
  margin: 0 !important
}

.p0 {
  padding: 0 !important
}

img {
  width: 100%;
  display: block;
  height: intrinsic;
  image-rendering: -webkit-optimize-contrast
}

.bgCover {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

a {
  text-decoration: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-underline-offset: .1em !important;
  text-decoration-thickness: .07em !important;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.bText {
  font-weight: 500
}

.nText {
  font-weight: 400
}

.lText {
  font-weight: 300
}

i {
  line-height: .6
}

button:focus,
[type=button]:focus {
  outline: 0
}

li {
  list-style-type: none
}

:is(h1, h2) {
  line-height: 1.2
}

p {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 500
}

h1 {
  font-size: clamp(28.1974669312px, 13.6518459621px + 0.030303377*100vw, 74.2586px)
}

h2 {
  font-size: clamp(25.17630976px, 15.0881970526px + 0.0210169015*100vw, 57.122px)
}

h3 {
  font-size: clamp(22.478848px, 15.7016421053px + 0.0141191789*100vw, 43.94px);
  line-height: 1.3
}

h4 {
  font-size: clamp(20.0704px, 15.7347368421px + 0.0090326316*100vw, 33.8px);
  line-height: 1.35
}

h5 {
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  line-height: 1.3
}

.errorPage {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  text-align: center
}

.errorPage .innerSection {
  min-height: 100vh;
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  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;
  justify-self: center
}

.errorPage .innerSection dotlottie-player {
  max-width: 500px
}

.errorPage .innerSection .content {
  z-index: 1;
  margin: auto
}

.errorPage .innerSection .code {
  position: absolute;
  top: -20vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 30vh;
  font-weight: 900;
  background: var(--borderGray);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--borderGray)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, var(--borderGray), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(0, 0, 0, 0)
}

.errorPage .innerSection .code:empty {
  display: none
}

.errorPage .innerSection .title {
  font-size: clamp(18px, 5vh, 60px) !important;
  line-height: 1.1
}

.errorPage .innerSection p {
  margin: 0 auto;
  margin-top: 1rem;
  max-width: 600px;
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  line-height: 1.3
}

.errorPage .innerSection .btnDiv {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.errorLogSection {
  list-style: none;
  padding: 0;
  margin: 0
}

.errorLogSection ul {
  padding: 5.65rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 30px 50px;
  counter-increment: titleCounter 1;
  border-bottom: 1px solid var(--borderGray)
}

.errorLogSection ul:nth-child(even) {
  background-color: var(--lightGray)
}

.errorLogSection ul::before {
  padding: 5.65rem 0;
  content: counter(titleCounter) ". ";
  position: absolute;
  top: -2px;
  left: 1rem;
  color: var(--black);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px)
}

.errorLogSection ul li {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
  width: 100%
}

.errorLogSection ul li:nth-child(1) {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  width: auto
}

.errorLogSection ul li:nth-child(2) {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: auto
}

.errorLogSection ul li:nth-child(2) p {
  color: #3b5fff
}

.errorLogSection ul li:nth-child(3) {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6
}

.errorLogSection ul li:nth-child(3) p {
  display: inline-block;
  color: #ff3b58
}

.errorLogSection ul li:nth-child(5) {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
  width: auto
}

.errorLogSection ul li:nth-child(9) {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
  width: auto
}

.errorLogSection ul li:nth-child(10) {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
  width: auto
}

.errorLogSection ul li .label,
.errorLogSection ul li h5 {
  margin: 0;
  color: var(--gray);
  font-size: .878rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px
}

.errorLogSection ul li p {
  color: var(--black);
  font-size: clamp(17.92px, 15.3684210526px + 0.0053157895*100vw, 26px);
  font-weight: 500;
  margin: 0;
  white-space: pre-line;
  line-height: 1.4
}

:root {
  --form-width: clamp(300px, 30vw, 550px)
}

.enquiryForm {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 999;
  will-change: transform;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform .7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform .7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform .7s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform .7s cubic-bezier(0.77, 0, 0.175, 1);
  scroll-behavior: auto;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  overflow: hidden;
  padding: 1vw;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  background: rgba(0, 0, 0, .295)
}

.enquiryForm.enquiryFormIntro {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms
}

.enquiryForm.enquiryFormCloseIntro {
  -webkit-transition: var(--transition2);
  transition: var(--transition2)
}

.enquiryForm .enquiryFormClose {
  position: absolute;
  top: .7075rem;
  right: .7075rem;
  z-index: 10;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0);
  -webkit-transition: var(--transition1);
  transition: var(--transition1);
  cursor: pointer
}

.enquiryForm .enquiryFormClose i {
  color: inherit;
  margin: auto;
  cursor: pointer
}

.enquiryForm form {
  margin: auto;
  height: auto;
  width: 100%;
  max-width: var(--section-max-width)
}

.enquiryForm .formContainer {
  width: 100%;
  overflow: hidden
}

.enquiryForm .tabBarWrapper {
  width: 100%;
  color: inherit;
  border-radius: inherit
}

.enquiryForm .tabBarWrapper .tabBarSlide {
  width: 100%;
  height: auto;
  clear: both;
  margin: 0 auto;
  padding-left: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-right: clamp(var(--section-space-x), (clamp(100%, 100%, var(--container-max-width)) - var(--section-max-width))/2, 100%);
  padding-bottom: var(--section-space-y);
  padding-top: var(--section-space-y);
  width: 100%;
  min-width: 100%;
  height: 0;
  border-radius: inherit;
  opacity: 0;
  color: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 2%
}

.enquiryForm .tabBarWrapper .tabBarSlide:nth-child(1) {
  height: auto;
  opacity: 1
}

.enquiryForm .logo {
  width: 100%;
  max-height: 100px;
  -o-object-fit: contain;
  object-fit: contain;
  margin: 0 auto;
  margin-bottom: .7075rem
}

.enquiryForm .titleDiv {
  width: 100%;
  margin-bottom: 1.413rem;
  text-align: center
}

@media(min-width: 768px) {
  .enquiryForm .titleDiv {
    margin-bottom: 2rem
  }
}

.enquiryForm .title {
  margin: 0 auto;
  color: inherit;
  line-height: 1.2
}

.enquiryForm .text {
  margin-top: 0;
  color: var(--gray);
  font-size: .937rem
}

.enquiryForm .inputDiv:has([country-code])::before {
  content: ""
}

.enquiryForm .inputDiv:has(label:has([type=checkbox])),
.enquiryForm .inputDiv:has(label:has([type=radio])) {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: unset;
  -ms-flex-align: unset;
  align-items: unset;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: auto;
  margin: 0;
  color: inherit
}

.enquiryForm .inputDiv:has(label:has([type=checkbox])) label,
.enquiryForm .inputDiv:has(label:has([type=radio])) label {
  margin: 0;
  color: inherit
}

.enquiryForm .inputDiv:has(label:has([type=checkbox])) input,
.enquiryForm .inputDiv:has(label:has([type=radio])) input {
  color: inherit
}

.enquiryForm input[type=date] {
  text-transform: uppercase
}

.enquiryForm .btnDiv {
  -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;
  justify-items: center;
  text-align: center
}

.enquiryForm .btnDiv a,
.enquiryForm .btnDiv button {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 1rem 1.413rem
}

.enquiryForm .btnDiv a input,
.enquiryForm .btnDiv button input {
  background: rgba(0, 0, 0, 0);
  color: inherit;
  border: none;
  font-weight: inherit;
  padding: 0
}

.enquiryForm iframe {
  width: 100%;
  overflow: unset !important
}

.enquiryForm .ep-iFrameContainer {
  width: 100%
}

.enquiryForm #_builder-form {
  max-width: 100% !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important
}

@media(min-width: 1200px) {
  .enquiryForm {
    padding-left: 0;
    border-left: 1px solid rgba(0, 0, 0, 0)
  }

  .enquiryForm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 100%;
    opacity: 1;
    background: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(49%, rgba(255, 255, 255, 0.5019607843)), to(rgba(255, 253, 229, 0)));
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5019607843) 49%, rgba(255, 253, 229, 0) 100%)
  }
}

.enquiryForm.enquiryFormIntro {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.enquiryForm.closeIntro {
  -webkit-transform: translateX(100%);
  transform: translateX(100%)
}

.enquiryForm .close,
.enquiryForm .enquiryFormClose {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--black);
  background: var(--lightGray);
  border: 1px solid var(--lightGray);
  border-radius: var(--radius)
}

.enquiryForm .close:hover,
.enquiryForm .enquiryFormClose:hover {
  border: 1px solid var(--color1)
}

.enquiryForm .logo {
  max-width: 150px
}

.enquiryForm .mainTitle {
  margin-top: 2rem;
  padding-bottom: 1.413rem
}

.enquiryForm .mainTitle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 50%;
  height: 5px;
  border-radius: var(--radius);
  background: var(--color1)
}

.enquiryForm .mainTitle span {
  display: block;
  font-weight: 600
}

.enquiryForm .title {
  color: inherit;
  font-family: var(--font-family1);
  font-weight: 500;
  margin-bottom: 1.413rem
}

.enquiryForm .title span {
  display: block;
  font-weight: 500
}

.enquiryForm .formContainer {
  margin: 0 auto;
  max-width: 800px;
  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: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  color: var(--black);
  background: var(--white);
  border-radius: var(--btnRadius);
  backdrop-filter: blur(30px);
  text-align: center
}

.enquiryForm form .inputIcon {
  color: var(--color2) !important
}

.enquiryForm form .icon {
  color: var(--color1) !important;
  opacity: 1 !important
}

.enquiryForm form .inputDiv:has(textarea) .icon {
  top: 3px !important
}

.enquiryForm form .inputDiv {
  gap: 10px
}

.enquiryForm form .inputDiv:has(input:not([type=radio]):not([type=checkbox]), textarea, select):hover label,
.enquiryForm form .inputDiv:has(input:not([type=radio]):not([type=checkbox]):focus, textarea:focus, select:focus) label {
  color: var(--color1)
}

.enquiryForm form .inputDiv label:has(:not(input)) {
  position: absolute;
  top: 10px;
  z-index: 2;
  left: 1rem
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]),
.enquiryForm form .inputDiv textarea,
.enquiryForm form .inputDiv select,
.enquiryForm form .inputDiv datalist,
.enquiryForm form .inputDiv selector selected,
.enquiryForm form .inputDiv select {
  padding: .7075rem 1rem
}

.enquiryForm form .inputDiv label {
  color: var(--black);
  font-size: .878rem;
  font-weight: 500;
  margin-bottom: 8px
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]),
.enquiryForm form .inputDiv textarea,
.enquiryForm form .inputDiv select,
.enquiryForm form .inputDiv datalist,
.enquiryForm form .inputDiv selector selected,
.enquiryForm form .inputDiv select {
  font-size: .878rem;
  font-weight: 300;
  color: var(--black);
  border-color: var(--borderGray);
  background: rgba(242, 240, 248, .4039215686);
  backdrop-filter: blur(10px)
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox])::-webkit-input-placeholder,
.enquiryForm form .inputDiv textarea::-webkit-input-placeholder,
.enquiryForm form .inputDiv select::-webkit-input-placeholder,
.enquiryForm form .inputDiv datalist::-webkit-input-placeholder,
.enquiryForm form .inputDiv selector selected::-webkit-input-placeholder,
.enquiryForm form .inputDiv select::-webkit-input-placeholder {
  color: var(--black);
  font-weight: 300
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox])::-moz-placeholder,
.enquiryForm form .inputDiv textarea::-moz-placeholder,
.enquiryForm form .inputDiv select::-moz-placeholder,
.enquiryForm form .inputDiv datalist::-moz-placeholder,
.enquiryForm form .inputDiv selector selected::-moz-placeholder,
.enquiryForm form .inputDiv select::-moz-placeholder {
  color: var(--black);
  font-weight: 300
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox]):-ms-input-placeholder,
.enquiryForm form .inputDiv textarea:-ms-input-placeholder,
.enquiryForm form .inputDiv select:-ms-input-placeholder,
.enquiryForm form .inputDiv datalist:-ms-input-placeholder,
.enquiryForm form .inputDiv selector selected:-ms-input-placeholder,
.enquiryForm form .inputDiv select:-ms-input-placeholder {
  color: var(--black);
  font-weight: 300
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox])::-ms-input-placeholder,
.enquiryForm form .inputDiv textarea::-ms-input-placeholder,
.enquiryForm form .inputDiv select::-ms-input-placeholder,
.enquiryForm form .inputDiv datalist::-ms-input-placeholder,
.enquiryForm form .inputDiv selector selected::-ms-input-placeholder,
.enquiryForm form .inputDiv select::-ms-input-placeholder {
  color: var(--black);
  font-weight: 300
}

.enquiryForm form .inputDiv input:not([type=radio]):not([type=checkbox])::placeholder,
.enquiryForm form .inputDiv textarea::placeholder,
.enquiryForm form .inputDiv select::placeholder,
.enquiryForm form .inputDiv datalist::placeholder,
.enquiryForm form .inputDiv selector selected::placeholder,
.enquiryForm form .inputDiv select::placeholder {
  color: var(--black);
  font-weight: 300
}

.enquiryForm form .inputDiv:has([type=checkbox]),
.enquiryForm form .inputDiv:has([type=radio]) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px
}

.enquiryForm form .inputDiv:has([type=checkbox]) label,
.enquiryForm form .inputDiv:has([type=radio]) label {
  letter-spacing: 0 !important;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-weight: 600;
  padding: .7075rem;
  background-color: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--borderGray)
}

@media(min-width: 1200px) {

  .enquiryForm form .inputDiv:has([type=checkbox]) label,
  .enquiryForm form .inputDiv:has([type=radio]) label {
    font-size: 18px
  }
}

.enquiryForm form .inputDiv:has([type=checkbox]) label:has(input:checked),
.enquiryForm form .inputDiv:has([type=radio]) label:has(input:checked) {
  background: var(--lightGray)
}

.enquiryForm form .inputDiv:has([type=checkbox]) label:hover,
.enquiryForm form .inputDiv:has([type=radio]) label:hover {
  background: var(--inputColor1)
}

.enquiryForm form .inputDiv:has([type=checkbox]) label input,
.enquiryForm form .inputDiv:has([type=radio]) label input {
  border-color: var(--black);
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.enquiryForm form .inputDiv:has([type=checkbox]) label input:checked,
.enquiryForm form .inputDiv:has([type=radio]) label input:checked {
  border-color: var(--inputColor4)
}

.enquiryForm form .checkboxListDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 25px
}

.enquiryForm form .checkboxListDiv label {
  position: relative;
  text-transform: capitalize;
  font-weight: 600 !important;
  letter-spacing: 0;
  cursor: pointer;
  margin-bottom: 3px
}

.enquiryForm form .checkboxListDiv label:nth-child(odd) {
  width: 30%
}

.enquiryForm form .checkboxListDiv label:nth-child(even) {
  width: 70%
}

.enquiryForm form .checkboxListDiv label input {
  border-radius: 5px
}

.enquiryForm form .btnDiv {
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.enquiryForm form .btnDiv .nextBtn {
  font-weight: 700;
  pointer-events: none;
  -webkit-filter: saturate(0);
  filter: saturate(0);
  opacity: .3
}

.enquiryForm form .btnDiv .nextBtn,
.enquiryForm form .btnDiv .backBtn,
.enquiryForm form .btnDiv .filledBtn {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0;
  font-weight: 500;
  background: var(--color1)
}

@media(min-width: 768px) {

  .enquiryForm form .btnDiv .nextBtn,
  .enquiryForm form .btnDiv .backBtn,
  .enquiryForm form .btnDiv .filledBtn {
    padding: 1rem;
    min-width: 150px
  }
}



.enquiryForm form .btnDiv .backBtn {
  color: var(--black);
  font-weight: 600;
  background: var(--borderGray);
  border: 1px solid var(--borderGray)
}

.enquiryForm form .note {
  background: var(--lightGray);
  font-size: .733rem;
  font-weight: 400;
  border-radius: var(--radius);
  padding: 20px;
  border-radius: calc(var(--radius) - 1rem)
}

@media(min-width: 320px) {
  .enquiryForm form .note {
    border-radius: calc(var(--radius) - .7075rem)
  }
}

.enquiryForm form .note span {
  font-weight: 600
}

.enquiryForm .tabBarWrapper {
  width: 100%;
  margin: 0 auto;
  gap: 0
}

.enquiryForm .tabBarWrapper .tabBarSlide {
  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: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 80svh !important;
  opacity: 1;
  overflow: auto
}

.enquiryForm .tabBarWrapper .tabBarSlide .inputDiv:has([type=checkbox]:checked)+.btnDiv .nextBtn,
.enquiryForm .tabBarWrapper .tabBarSlide .inputDiv:has([type=radio]:checked)+.btnDiv .nextBtn {
  pointer-events: all;
  opacity: 1;
  -webkit-filter: none;
  filter: none
}

.enquiryForm .formDiv {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important
}

.enquiryForm .offer {
  padding: 10px;
  background: var(--inputColor1);
  border: 1px dashed var(--inputColor3);
  border-radius: 20px;
  margin-top: .5rem;
  padding-left: 80px;
  text-align: left
}

.enquiryForm .offer img {
  position: absolute;
  top: 50%;
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px
}

.enquiryForm .offer .label {
  margin: 0;
  color: var(--color1);
  font-size: .878rem;
  font-weight: 500
}

.enquiryForm .offer p {
  margin-top: 5px;
  color: var(--gray);
  font-size: .733rem;
  font-weight: 400;
  line-height: 1.4
}