/* * How to start */

/*
  - Login Paperform
  - Find SimpleKit Playground
  - Click the Waterdrop icon > UI Elements > Custom CSS
  - Edit, then copy/paste this code there
  - In other flows import the theme from SimpleKit Playground
*/

/* * INITIAL CUSTOMISATION */

/*
  SET COLORS:

  Active color: #2399F0
  Text color: rgba(0,14,36,.87);
  Warning color: #FF9800

  SET FONT:

  Google Fonts > Montserrat  to emulate Proxima Nova
  500 — replaces Regular
  600 — replaces Semibold
*/

:root {
  --st-form-border-radius: 8px;
  --st-check-vert-correction: 2px;
  
  --st-basic-blue: 0, 14, 36; /* #001b48 */
  --st-color-primary: 35, 153, 240; /* #2399F0 */
  --st-color-text-primary:   rgba(0, 14, 36, .87);
  --st-color-text-disabled:  rgba(var(--st-basic-blue), .32);
  --st-color-white: rgba(255,255,255, 1);

  --st-card-border-radius: 12px;

  --st-form-border-radius: 8px;
  --st-form-item-height: 32px;
  --st-form-item-height-large: 48px;
  --st-form-font-size: 16px;
  --st-form-font-size-small: 14px;
  --st-form-item-background: rgba(var(--st-basic-blue),.08);

  --segm-wrap-p: 3px;
}

/* * TEXT */

/* Body */
.__unstyled {
  color: var(--st-color-text-primary);
  font-size: 16px;
  line-height: 22px;
}

/* H1 */
.__header-one {
  /* Same as Headline */
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
}

/* H2 */
.__header-two {
  font-size: 20px;
  line-height: 30px;
  font-family: var(--st-font-semibold);
}

/* * CARD */

.Paperform__Container,
.Paperform__Container.editor.editor--live {
  max-width: 940px;
  background: white;
  width: 100%;
  max-width: 940px;
  margin: 48px auto;
  padding: 48px 12px 48px;
  border-radius: var(--st-card-border-radius);
}

/* * QUESTION CONTAINER */

.LiveField,
.LiveField.LiveField--active {
  box-shadow: none;
}

.LiveField .LiveField__container {
  padding: 16px 0;
}

/* * LABEL */

.LiveField__header {
  color: var(--st-color-text-primary);
  font-weight: 600 !important;
/* We have to use !important because Paperform uses it */
  font-weight: 600 !important;
  font-size:  14px;
  line-height: 2em;
  display: block;
}

/* * TEXT FIELDS */

.LiveField__input,
textarea.LiveField__input,
.LiveField__input:not(.LiveField__input--manualfocus),
textarea.LiveField__input[rows="1"],
.LiveField__input--manualfocus:not(:focus) {
  /* Remove OS and browser stylings */
  appearance: none;

  color: var(--st-color-text-primary);

  width: 100%;
  border: 1px solid var(--st-color-text-disabled);
  border-radius: var(--st-form-border-radius);
  background-color: var(--st-color-white);

  box-sizing: border-box;
  padding: 0 8px;
  margin: 0px;

  /* Outline */
  outline: none;
  box-shadow: 0 0 0 0 transparent;
  transition: .3s box-shadow;
}

/* Hover */
.LiveField__input:hover:not(:disabled),
textarea.LiveField__input:hover:not(:disabled),
.LiveField__input--manualfocus:hover:not(:disabled) {
  box-shadow: 0 0 0 2px rgba(var(--st-color-primary), .2);
}

/* Focus */

.LiveField__input:focus,
.LiveField__input:focus:hover,
textarea.LiveField__input:focus,
textarea.LiveField__input:focus:hover,
.LiveField__input--manualfocus:focus,
.LiveField__input--manualfocus:focus:hover {
  border-color: rgb(var(--st-color-primary));
  box-shadow: 0 0 0 2px rgba(var(--st-color-primary), .5);
}

/* * SELECT FIELD */

.Select-control,
.is-open > .Select-control {
  background-color: white;
}

/* Text vertical align */
.Select-value {
  display: flex;
  align-items: center;
}

/* Focus */

.Select.is-focused {
  border-color: rgb(var(--st-color-primary));
}

/* * RADIO BUTTONS */

.Choices__choice.btn-default,
.Choices__choice.btn-raised,
.Choices__choice.btn-raised.btn-default {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0;

  background-color: transparent;
  box-shadow: none;

  /* Cancel :active transformations */
  transform: none;
  opacity: 1;
}

.Choices__label {
  font-weight: 500;
}

/* Hide default Paperform icon */
.ChoicesQuestion.Choices .Choices__choice .material-icons {
  display: none;
}

.Choices__choice:before {
  flex-shrink: 0;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 6px;
  margin-top: -var(--st-check-vert-correction);

  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00IC00KSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PGNpcmNsZSBmaWxsPSIjRkZGIiBjeD0iOCIgY3k9IjgiIHI9IjQiLz48L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;

  background-size: 1px;
  border: 1px solid var(--st-color-text-disabled);
  background-color: var(--st-color-white);
  box-shadow: inset 0 0 3px rgba(black, .15);
  transition: .3s all;
}

/* Active checkbox */

.Choices__choice.btn-raised.btn-primary {
  color: var(--st-color-text-primary);
}

.Choices__choice.btn-raised.btn-primary:before {
  background-size: 8px;
  background-color: rgb(var(--st-color-primary));
  box-shadow: inset 0 0 3px rgba(black, 0);
  border-color: rgb(var(--st-color-primary));
}

/* * YES-NO CONTROL */

.YesNo {
  display: inline-flex;
  margin: 1px;
  height: var(--st-form-item-height);
  box-sizing: border-box;
  padding: var(--segm-wrap-p);
  background: var(--st-form-item-background);
  border-radius: var(--st-form-border-radius);
  vertical-align: middle;
}

.YesNo__button,
.YesNo .btn-raised.btn-default,
.YesNo .btn-raised.btn-primary {
  display: block;
  box-sizing: border-box;
  padding: 0 8px;
  line-height: calc(var(--st-form-item-height) - 8px);
  font-size: var(--st-form-font-size-small);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  color: var(--st-color-text-primary);

  background-color: transparent;
  border-radius: calc(var(--st-form-border-radius) - var(--segm-wrap-p));

  height: auto;
  text-transform: none;
}

.YesNo__button:hover,
.YesNo .btn-raised.btn-default:hover,
.YesNo .btn-raised.btn-primary:hover {
  box-shadow: none;
}

/* Active */

.YesNo .btn-raised.btn-primary {
  cursor: default;
  background-color: var(--st-color-white);
  box-shadow: 0 0 2px var(--st-color-text-secondary);
  transition: .1s linear background-color, shadow;
  outline: none;
}

/* * SUBMIT BUTTON */

.btn-raised {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--st-form-border-radius);
  
  box-sizing: border-box;
  padding: 0 16px;
  
  line-height: calc(var(--st-form-item-height-large) - 2px); /* -2px for borders */
  height: calc(var(--st-form-item-height-large) - 2px);
  font-size: var(--st-form-font-size);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  margin: 1px;

  border-width: 1px;
  border-style: solid;
  border-color: transparent;

  box-shadow: none;
}

.submit .btn-raised,
.submit .btn-raised:hover,
.submit .btn-raised.btn-primary,
.submit .btn-raised.btn-primary:hover {
  /* We have to use !important because Paperform uses it */
  font-weight: 600 !important;
  box-shadow: none;
  padding: 0 16px;
}