/* !!! SPECIFIC FORM CUSTOMIZATION !!! */

.Pagination__price { display: none; }

/* * 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-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-color-orange: 255, 152, 0; /* #FF9800 */
  --st-color-red: 238, 37, 45; /* #ee252d */

  --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;

  --paperform-fields-gap: 8px;
  --paperform-check-vert-correction: 3px;
}

/* * TEXT */

/* Padding to align text fith field */
.__unstyled,
.__header-one,
.__header-two {
  padding: 0 var(--paperform-fields-gap);
}

/* 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;
  
}

/* * CARD */

.Paperform__Container,
.Paperform__Container.editor.editor--live {
  max-width: 940px;
  background: white;
  width: 100%;
  max-width: 940px;
  margin: 24px auto;
  padding: 48px 12px 48px;
  border-radius: var(--st-card-border-radius);
}
/* Disable Paperform's default styles. !important used because Paperform uses it */
@media all and (max-width: 600px) {
  .__standardMode figure.fieldSection {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* * QUESTION CONTAINER */

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

.LiveField .LiveField__container {
  /* We do this to make it possible to place two fields in a row */
  padding: 16px var(--paperform-fields-gap);
}

/* * 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,
textarea.LiveField__input[rows]:focus,
textarea.LiveField__input[rows]:focus:hover {
  border-color: rgb(var(--st-color-primary));
  box-shadow: 0 0 0 2px rgba(var(--st-color-primary), .5);
}

/* * TEXTAREA */
/* Turn-on multi-line option in text-type question to activate it */

textarea.LiveField__input[rows] {
  background-color: var(--st-color-white);
  padding: 4px 8px;
  border-bottom-color: var(--st-color-text-disabled);
}

textarea.LiveField__input[rows]:hover {
  background-color: var(--st-color-white);
}

/* * 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 */
/* We use checkboxe's shape because it may be used for multiple choice */

.Choices__choice.btn-default,
.Choices__choice.btn-raised,
.Choices__choice.btn-raised.btn-default {
  display: flex;
  align-items: flex-start; /* To align labels od items with multiple lines */
  justify-content: flex-start;

  height: auto;
  line-height: normal;
  margin: 8px 0;
  padding: 0;

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

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

.Choices__label {
  font-weight: 500;
  white-space: normal;
  text-align: left;
  line-height: 24px; /* 16/24 */
}

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

/* Trigger */
.Choices__choice:before {
    flex-shrink: 0;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: calc(var(--st-form-border-radius) / 2);
    margin-right: 6px;
    margin-top: var(--paperform-check-vert-correction);

    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjc5MyA0LjI5M2ExIDEgMCAwIDEgMS40OTcgMS4zMmwtLjA4My4wOTQtNiA2YTEgMSAwIDAgMS0xLjMyLjA4M2wtLjA5NC0uMDgzLTMtM2ExIDEgMCAwIDEgMS4zMi0xLjQ5N2wuMDk0LjA4M0w2LjUgOS41ODVsNS4yOTMtNS4yOTJaIiBmaWxsPSIjRkZGIi8+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(0,0,0, .15);
    transition: .3s all;
}

/* Active checkbox */

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

/* Trigger active */
.Choices__choice.btn-raised.btn-primary:before {
  background-size: 16px;
  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;
}

/* * ERROR BOX */
.LiveField--submiterror .LiveField__input:not(.LiveField__input--manualfocus),
.LiveField--submiterror .Address__input--error .LiveField__input,
.LiveField--submiterror textarea.LiveField__input[rows][rows='1'] {
  border-color: rgb(var(--st-color-red));
}

.LiveField__error {
  margin: 0 var(--paperform-fields-gap);
  padding: 0 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: none;
  color: rgb(var(--st-color-red));
  background: rgba(var(--st-color-red), .1);
  border-radius: calc(var(--st-form-border-radius) / 2);
}

/* * SUBMIT BUTTON */

.submit {
  padding: 0 var(--paperform-fields-gap);
}

.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;
}

/* * PAGINATION */

.Pagination__btn.btn-raised {
  box-shadow: none;
}

.Pagination__btn.btn-raised i {
  margin: 0;
}

/* Price tag inside of an anvigation button */
.Pagination__price {
  top: 0;
  margin-left: -14px;
  border-radius: 6px;
}

.Pagination .Pagination__btn.btn-raised:first-child {
  border-top-left-radius: var(--st-form-border-radius)!important; /* Paperform uses !important */
  border-bottom-left-radius: var(--st-form-border-radius)!important;
}

.Pagination .Pagination__btn.btn-raised:last-child {
  border-top-right-radius: var(--st-form-border-radius)!important;
  border-bottom-right-radius: var(--st-form-border-radius)!important;
}

/* File uploader */

.MultipleFiles  {
    
    margin: 1px;
  
  border-radius: var(--st-form-border-radius);
  vertical-align: middle;
  font-weight: 600 !important;
    
}


    
.MultipleFiles .BtnV2,
.MultipleFiles .BtnV2.Btn--raised {
     background: #EBEDF0;
      border-radius: 8px;
      box-shadow: none !important;
      font-weight: 600 !important;
      color: #1F2B3F !important;
      font-family: DM Sans !important;
      margin-bottom: 8px !important;
}


/* Add text to first pagination button */
.editor .Pagination button:only-child.Pagination__btn.Pagination__btn--next:before {
    content: "Start Registration";
    color: white;
    vertical-align: top;
    padding-bottom: 2px;
}