/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.KzContainer__ {
  /* Kinzen theme properties */

  /* Background container */
  /* --kz-theme-background-color: 255, 246, 214; Default: 255, 255, 255 */
  --kz-theme-background-border-color: 255, 246, 214; /* Default: 224, 224, 224 */
  --kz-theme-background-border-width: 0; /* Default: 1px */
  --kz-theme-background-border-radius: 0; /* Default: 2px */

  /* Typography */
  --kz-theme-title-font-family: "Open Sans", sans-serif; /* Default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" */
  --kz-theme-title-font-weight: 200; /* Default: 700 */
  --kz-theme-title-font-size: 20px; /* Default: 18px */
  --kz-theme-text-font-family: "Open Sans", sans-serif; /* Default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" */

  /* Buttons and inputs */
  --kz-theme-topic-border-radius: 3px; /* Default: 48px */
  --kz-theme-button-border-radius: 3px; /* Default: 4px */
  --kz-theme-input-border-radius: 3px; /* Default: 4px */

  /* Accent and highlight colors */
  --kz-theme-accent-color: 251, 215, 111; /* Default: 0, 116, 217 */
}
 
/***** Custom CSS below *****/
.KzContainer__ {
  overflow-x: hidden !important;
  padding: 8px !important;
  height: auto;
}

/* ONBOARDING */
.KzOnboardingSignup {
  background: #000 url("https://kinzen-static.s3-eu-west-1.amazonaws.com/xxbAdqDvM9FeEsvPNrSytHc-splash-v2.jpg");
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: top -1vh left -30vw !important;
  width: 100% !important;
  font-size: 13px !important;
  margin: 0px !important;
  padding: 0px !important;
  height: 260px !important;
}

._KzOnboardingSplashContent__ {
  position: relative !important;
  right: 0 !important;
  height: 260px;
  width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: rgb(0,0,0) !important;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%) !important;
  margin: 0px !important;
}

._KzOnboardingContent__ {
  position: relative !important;
  bottom: 0 !important;
  right: 0 !important;
  height: 260px !important;
  width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: rgb(0,0,0) !important;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%) !important;
  margin: 0px !important;
}

._KzTopicContent {
  width: calc(100% - 10px) !important;
  margin-bottom: 8px !important;
  max-height: 480px;
  position: absolute !important;
  text-align: right !important;
  float: right;
}

._KzOnboardingContent__ ._KzTextTitle {
  width: 100% !important;
  text-align: right !important;
  padding: 0px !important;
}

._KzSplashContent {
  grid-column: 1 / 3 !important;
}

._KzOnboardingSplashContent__  ._KzTextTitle, ._KzTextTitle p {
  width: 160px;
  float: right;
  text-align: left;
  color: white !important;
  margin-left: 0px !important;
  font-size: 16px;
  padding: 0px !important;
}

._KzTextContent h1::before {
  background-color: transparent !important;
}

._KzOnboardingContent__ ._KzTextTitle {
  color: white !important;
  text-align: right !important;
}

._KzImage, .__KzImageContent {
  display: none;
}

._KzTextContent ._KzSplashIntroImage, ._KzSplashRefinementImage, ._KzTextCopy {
  display: none;
}

._KzTextContent {
  margin-bottom: 0px !important;
}

._KzInputContent {
  margin-bottom: 0px !important;
  width: 100%;
}

._KzFormInput {
  background-color: transparent !important;
  color: white !important;
  width: calc(100% - 113.6px) !important;
  max-width: 300px;
  border: 3px solid white;
  border-radius: 18px !important;
  font-size: 13px !important;
  padding: 4px 16px !important;
}

._KzFormInput::placeholder {
  color: white !important;
  font-size: 13px !important;
  opacity:  1 !important;
}

._KzFormInput:-moz-placeholder {
  color: white !important;
  font-size: 13px !important;
  opacity:  1 !important;
}

._KzFormInput:-ms-input-placeholder {
  color: white !important;
  font-size: 13px !important;
  opacity:  1 !important;
}

._KzFormInput::-webkit-input-placeholder {
  color: white !important;
  font-size: 13px !important;
  opacity:  1 !important;
}

._KzFormError__ {
  margin-top: 8px !important;
  font-size: 10px !important;
}

._KzButton {
  line-height: 18px !important;
  float: none !important;
}

._KzButton span {
  font-size: 13px !important;
  font-weight: 700 !important;
}

._KzTextSubcopy p, ._KzTextSubcopy p a, ._KzTextSubcopy p a:hover {
  font-size: 10px;
  color: white !important;
}

._KzPrivacyContent {
  margin-top: 8px !important;
  width: 100%;
  text-align: left;
}

/* TOPIC REFINEMENT */
.KzUserTopicSelection {
  font-size: 10px !important;
  padding: 8px 8px 16px 8px !important;
  background-color: rgb(255,246,214) !important;
}

.KzUserTopicSelection ._KzTextTitle, ._KzTextTitle p {
  font-size: 16px !important;
  font-weight: 700 !important;
}

._KzSignal {
  margin-right: -1px;
  padding: 6px 8px;
  background-color: transparent !important;
  border: 1px solid black !important;
  color: black !important;
}

._KzSignal[data-selected=true] {
  /* Inverted colour below - the publisher accent is light */
  color: black !important;
  background-color: #FBD76F !important;
}

._NegativeIcon path, ._PositiveIcon path {
  /* Inverted colour below - the publisher accent is light */
  fill: black !important;
}

/* TYPOGRAPHY */
._KzTextButton {
  -ms-grid-column: 3 !important;
  -ms-grid-column-span: 1 !important;
  grid-column: 3 / 4 !important;
  -ms-grid-row: 2 !important;
  grid-row: 2 !important;
  -ms-grid-column-align: end;
  justify-self: end;
  -ms-grid-row-align: end;
  align-self: end;
  margin-bottom: 16px;
}

/* BUTTONS */
._KzButton {
  background-color: #FBD76F !important;
  font-weight: 700;
  color: #000000 !important;
  border-radius: 18px !important;
  opacity: 1 !important;
}

._KzButton:disabled  {
  opacity: 0.8 !important;
}

.topicOnboarding {
  color: white !important;
  padding: 6px 16px;
  background-color: transparent;
  border: 1px solid white !important;
  border-radius: 18px !important;
}

.topicOnboarding[data-signal='loading'] {
  padding: 7px 8px !important;
  color: white !important;
}

.topicOnboarding[data-selected="true"] {
  color: black !important;
  background-color: --kz-theme-accent-color !important;
  border: none !important;
  padding: 6px 8px;
}

/* BUTTONS */
._KzOnboardingTopic__ ._KzButtonTopic {
  border: 1px solid white !important;
}

._KzButtonTopic {
  padding: 6px 16px;
  background-color: transparent;
  border: 1px solid #141414 !important;
}

._KzButtonTopic[data-signal='loading'] {
  padding: 6px 8.5px;
}

._KzButtonTopic[data-selected="true"] {
  padding: 6px 8px;
}

/* Inverted colors and accents below where accent color is a light tint */
._KzButtonTopic[data-selected="true"] {
  /* Inverted colour below - the publisher accent is light */
  color: #141414 !important;
}

._KzButtonTopic[data-selected="true"]:after {
  /* Inverted colour below - the publisher accent is light */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' fill-opacity='.8' fill-rule='evenodd' d='M4.2628044,8.71319195 L10.1131699,2.1626923 C10.2971149,1.95673394 10.613194,1.93888859 10.8191524,2.1228336 C10.8201569,2.12373075 10.8211578,2.12463195 10.822155,2.12553719 L10.844291,2.14563109 C11.0475888,2.33017474 11.0640418,2.64412751 10.881147,2.84890999 L4.68086412,9.79120294 C4.66821272,9.80536838 4.65493627,9.81864396 4.64111358,9.83102523 C4.63340485,9.83901318 4.62538094,9.84679989 4.61704272,9.85436891 L4.59490678,9.87446281 C4.39044157,10.0600661 4.07422856,10.0447755 3.88862525,9.84031033 C3.88772001,9.8393131 3.88681881,9.83831221 3.88592166,9.8373077 L1.11885296,6.739094 C0.935958157,6.53431152 0.952411185,6.22035875 1.15570904,6.0358151 L1.17784498,6.01572119 C1.38231019,5.83011788 1.6985232,5.84540847 1.88412652,6.04987368 C1.88503176,6.05087091 1.88593296,6.0518718 1.88683011,6.05287631 L4.2628044,8.71319195 Z'/%3E%3C/svg%3E%0A") !important;
}

._KzButtonTopic[data-selected="true"][data-signal="negative"]:after {
  /* Inverted colour below - the publisher accent is light */
  content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6C11 8.76142 8.76142 11 6 11ZM3.5 5.5C3.22386 5.5 3 5.72386 3 6C3 6.27614 3.22386 6.5 3.5 6.5H8.5C8.77614 6.5 9 6.27614 9 6C9 5.72386 8.77614 5.5 8.5 5.5H3.5Z' fill='black'/%3E%3C/svg%3E") !important;
}

._KzButtonTopic[disabled] {
  /* For inverted color */
  border: none !important;
}

._KzButtonTopic[disabled]:after {
  /* For inverted color */
  content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6' fill='transparent'/%3E%3C/svg%3E");
}

._KzButtonTopic[disabled][data-signal="negative"]:after, ._KzButtonTopic[disabled][data-signal="positive"]:after  {
  /* For inverted color */
  content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6C11 8.76142 8.76142 11 6 11ZM3.5 5.5C3.22386 5.5 3 5.72386 3 6C3 6.27614 3.22386 6.5 3.5 6.5H8.5C8.77614 6.5 9 6.27614 9 6C9 5.72386 8.77614 5.5 8.5 5.5H3.5Z' fill='transparent'/%3E%3C/svg%3E") !important;
}

@media only screen and (min-width: 600px) {

  .KzOnboardingSignup {
    background: #000 url("https://kinzen-static.s3-eu-west-1.amazonaws.com/xxbAdqDvM9FeEsvPNrSytHc-splash-v2.jpg");
    background-repeat: no-repeat;
    background-size: 60% !important;
    background-position: top -1vh left -8vw !important;
    width: 100% !important;
    max-width: 800px !important;
    height: 180px !important;
  }
  
  /* ONBOARDING */
  ._KzOnboardingSplashContent__, ._KzOnboardingContent__ {
    position: relative !important;
    top: 0 !important;
    float: right !important;
    height: 180px !important;
    width: 600px !important;
    padding: 20px 20px 20px 80px !important; 
    box-sizing: border-box !important;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%) !important;
  }

  ._KzOnboardingSplashContent__ ._KzTextTitle, ._KzTextTitle p {
    width: 100%;
    float: none;
    color: white !important;
    margin-left: 0px !important;
    font-size: 16px;
    padding: 0px !important;
    background-color: none !important;
  }

  ._KzOnboardingContent__ ._KzTextTitle {
    color: white !important;
    text-align: left !important;
  }

  ._KzSplashImageMobile, ._KzSplashImage   {
    width: 100% !important;
    min-width: 100% !important;
    min-height: auto !important;
    max-height: auto !important;
    -ms-grid-column: 1 !important;
    -ms-grid-column-span: 2 !important;
    grid-column: 1 / 3 !important;
    -ms-grid-row: 2 !important;
    grid-row: 2 !important;
    margin-top: -8px !important;
    -ms-grid-row-align: end !important;
    align-self: end !important;
  }

  /* REFINEMENT */
  ._KzTopicContent {
    grid-column: 1 / 4 !important;
    margin-bottom: 0px !important;
    position: relative !important;
    text-align: left !important;
  }
}