@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  src: url('../assets/fonts/Satoshi-Light.otf');
  font-weight: 300;
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  src: url('../assets/fonts/Satoshi-Regular.otf');
  font-weight: 400;
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  src: url('../assets/fonts/Satoshi-Medium.otf');
  font-weight: 500;
}

@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  src: url('../assets/fonts/Satoshi-Bold.otf');
  font-weight: 700;
}

:root {

  --font-family: 'Satoshi', sans-serif;
  --font-weight--default: 400;

  /* Colors */
  --c-bg: #F5F6F9;
  --c-bg-pri: #F5F6F9;
  --c-bg-sec: #F5F6F9;
  --c-bg-opacity: rgba(241, 241, 247, 0.9);
  --c-background-mask: #ffffff;
  --c-background-side: #F5F6F9;
  --c-background-light-red: #F62B6819;
  --c-text: #121213;
  --c-text-sec: rgba(13, 45, 95, 0.85);
  --c-text-text: #7068ac;
  --c-text-description: rgba(18, 18, 19, 0.6);
  --c-text-understate: #707070;
  --c-text-proposal: #180958;
  --c-select: #160e52;
  --c-select-rev: #fff;
  --c-select-pri: #160e52;
  --c-select-pri-rev: #fff;
  --c-select-sec: #7068ac;
  --c-select-sec-rev: #fff;
  --c-emphasize: #744BDA;
  --c-emphasize-pri: #744BDA;
  --c-cancel-image-upload: #12121399;
  --c-cancel-image-upload-backround: #888;
  
  --c-emphasize-rev: #fff;
  --c-emphasize-sec: #744BDA;
  --c-button-normal: #ffffff;
  --c-button-hover: #5E40AA;
  --c-button-text-hover: #3A6AA2;
  --c-bg-normal: #ffffff;
  --c-bg-second: #F8F8FB;
  --c-font-title: #0D2D5F;
  --c-font-sub-title: #707070;
  --c-border-normal: #0D2D5F;
  --c-text-menu: #0D2D5F;
  --c-err: #F62B68;
  --c-success: #00A86B;
  --c-link: #4C49C0;
  --c-text-sub: #3A6AA2;
  --c-link-visited: #3A6AA2;
  --c-textbox-selected: #0D2D5F;
  --c-textbox-hover: #E3E0F3;
  --c-header-text-selected: #0D2D5F;
  --c-text-selected: #0D2D5F;
  --c-header-text-not-selected: #3A6AA2;
  --text-disabled: var(--c-text-understate);
  --backdrop: rgba(13, 45, 95, 0.28);
  --transition-switch: cubic-bezier(.5, .01, 0, 1);
  --transition-page: cubic-bezier(.65, 0, .13, 1);
  --transition-flip-in: cubic-bezier(0, 1, 1, 1);

  /* Controls */
  --input-bg: #ffffff;
  --input-fg: #121213;
  --input-disabled-fg: var(--text-disabled);
  --input-disabled-opac: 0.3;
  --input-shadow: 0px 3px 6px rgba(25, 72, 146, 0.06);
  --input-font-size: 2.5rem;
  --input-height: 7rem;
  --input-radius: min(1rem, 10px);
  --input-outline: none;
  --input-border: none;
  --input-padding: 0 1rem;
  --border-line: 1px solid #DDDCE5;
  --input-border-self: 1px solid #DDDCE5;
  --input-border-self-error: 2px solid #F62B68;

  --btn-pri-bg: var(--c-emphasize);
  --btn-pri-text: var(--c-emphasize-rev);
  --btn-sec-bg: transparent;
  --btn-sec-text: var(--c-emphasize);

  --btn-bg: var(--c-bg-sec);
  --btn-margin: 0;
  --btn-text-size: 2.5rem;
  --btn-font-size: 2.5rem;
  --btn-min-height: 4rem;
  --btn-active-bg: #fff;
  --btn-text: #fff;
  --c-add-item: #091f43;
  --btn-border-bar: 2px solid #DDDCE5;
  --btn-normal: #fff;
  --btn-active-text: #0D2D5F;
  --btn-disabled-color: #C1C1C1;
  --btn-hover: #E3E0F3;
  --btn-c-bg-selected: #0D2D5F;
  --btn-c-text-selected: #0D2D5F;

  /* Typo */
  --font-family: 'Satoshi', sans-serif;
  --header-bg: var(--c-select);
  --header-text: var(--c-emphasize-sec);
  --header-text-pri: var(--header-text);
  --header-text-sec: var(--c-select-rev);
  --font-weight-default: 400;
  --font-weight-emphasize: 500;
  --input-font-weight: 400;

  /* Specs */
  --btn-border: 2px solid var(--c-emphasize);
  --widget-border: 1px solid #DDDCE5;
  --widget-shadow: 0px 3px 6px rgba(17, 0, 143, 0.059);
  --widget-border-radius: 0.8rem;
  --c-font-text-title: #96969c;
  --header-height: 14rem;
}

::selection {
  background-color: #E3E0F3;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

html[device="desktop"] {
  font-size: 8px;
}

html[device="mobile"]:not([desktop]) {
  font-size: clamp(8px, 2vw, 12px);
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight--default);
  background: var(--c-bg);
  min-height: 100%;
  overflow-y: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}

body[new-landing-page="true"] {
  overflow-y: auto;
}

body main-view { transition: opacity 450ms linear; }
/* uncomment the next line to remove fadein effect */
/* body main-view[loading-state='landing-page-view'] { transition: unset; } */

body[is-busy] main-view,
body[is-busy] my-ahoy {
  /* opacity: 0.4; */
  pointer-events: none;
}

button {
  height: 4rem;
}

body[desktop] {
  --art-desktop-fix-w: 3rem;
  --art-desktop-fix-h: 5rem;
}

html[device="desktop"] {
  --input-value-width: 100%;
  --font-size-h2: 4rem;
  --input-height: 6.25rem;
  --artline-wrapper-left: -11.8rem;
  --artline-wrapper-right: 3.8rem;
  --artline-wrapper-top: -5rem;
  --artline-wrapper-height: auto;
  --artline-wrapper-transform: rotate(0deg);
  --display-none-ondesktop: none;
  --padding-block-start: 1rem;
  --height-errors: unset;
  --question-text-size: 2.25rem;
  --button-bar-height: 6.25rem;
  --button-bar-padding: 0 1.5rem;
  --question-text-padding-block-start: 2rem;
  --padding-block-start-address-question: 2rem;
  --question-text-padding-block-end: 2rem;
  --question-text-height: 3rem;
  --question-label-size: 2.25rem;
}

html[device="mobile"] {
  --input-value-transform: translateX(-5%);
  --input-value-width: 90%;
  --input-height: 7rem;
  --artline-wrapper-margin: 0 0 0 0;
  --artline-wrapper-right: 0rem;
  --artline-wrapper-top: -0.3rem;
  --artline-wrapper-width: 47rem;
  --artline-wrapper-transform: rotate(180deg);
  --padding-block-start: 1.6rem;
  --height-errors: 3rem;
  --input-font-weight: 500;
  --question-text-padding-block-start: 0;
  --padding-block-start-address-question: 0;
  --padding-block-end-address-question: 3rem;
  --question-text-padding-block-end: 2rem;
  --question-text-height: unset;

}

html[data-dir="rtl"] {
  --text-align: right;
  --align-close-btn: left;
  --float-align: right;
}

html[data-dir="ltr"] {
  --text-align: left;
  --align-close-btn: right;
  --float-align: left;
}

/* 
* this was commented out because it didn't look good on lighthouse.
* this has the custom logo for the chat button.

.zsiq_floatmain.siq_bL,
.zsiq_floatmain.siq_bR {
  z-index: 90 !important;
}

.zsiq_floatmain.siq_bR {
  bottom: 15px;
}


#zsiq_agtpic {
  background-image: url("chat.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#zsiq_agtpic:hover {
  opacity: 0.7;
}

#zsiq_agtpic::before {
  content: '';
}

#zsiq_float .zsiq_flt_rel {
  border: none;
  left: 3rem;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent !important;
} */