/**
 * Theming
 */
.fjs-container {
  --color-grey-225-10-15: hsl(225, 10%, 15%);
  --color-grey-225-10-35: hsl(225, 10%, 35%);
  --color-grey-225-10-55: hsl(225, 10%, 55%);
  --color-grey-225-10-75: hsl(225, 10%, 75%);
  --color-grey-225-10-80: hsl(225, 10%, 80%);
  --color-grey-225-10-85: hsl(225, 10%, 85%);
  --color-grey-225-10-90: hsl(225, 10%, 90%);
  --color-grey-225-10-95: hsl(225, 10%, 95%); 
  --color-grey-225-10-97: hsl(225, 10%, 97%);

  --color-blue-205-100-45: hsl(205, 100%, 45%);
  --color-blue-205-100-50: hsl(205, 100%, 50%);
  --color-blue-205-100-80: hsl(205, 100%, 80%);
  --color-blue-205-100-95: hsl(205, 100%, 95%);

  --color-green-150-86-44: hsl(150, 86%, 44%);

  --color-red-360-100-40: hsl(360, 100%, 40%);
  --color-red-360-100-45: hsl(360, 100%, 45%);
  --color-red-360-100-92: hsl(360, 100%, 92%);
  --color-red-360-100-97: hsl(360, 100%, 97%);

  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%); 

  --color-background: var(--color-white);
  --color-background-disabled: var(--color-grey-225-10-95);
  --color-text: var(--color-grey-225-10-15);
  --color-text-light: var(--color-grey-225-10-35);
  --color-text-lighter: var(--color-grey-225-10-55);
  --color-text-inverted: var(--color-white);
  --color-borders: var(--color-grey-225-10-55);
  --color-borders-disabled: var(--color-grey-225-10-75);
  --color-warning: var(--color-red-360-100-45);
  --color-accent: var(--color-blue-205-100-45);
  --color-accent-dark: var(--color-blue-205-100-45);

  --font-family: 'IBM Plex Sans', sans-serif;

  height: 100%;
}

/**
 * Layout styles
 */
.fjs-container .fjs-vertical-layout {
  display: flex;
  flex-direction: column;
}

.fjs-container .fjs-columns {
  display: flex;
  flex-direction: row;
}

.fjs-container .fjs-column {
  flex-grow: 1;
}

.fjs-container img {
  max-width: 100%;
}

/**
 * Visual styles
 */
.fjs-container .fjs-form {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;

  color: var(--color-text);
  background-color: var(--color-background);

  position: relative;
}

.fjs-container .fjs-form * {
  box-sizing: border-box;
}

.fjs-container .fjs-form-field {
  margin: 16px;
}

.fjs-container .fjs-form-field-placeholder {
  color: var(--color-text-light);
}

.fjs-container .fjs-input,
.fjs-container .fjs-textarea,
.fjs-container .fjs-select {
  border-color: var(--color-borders);
  background-color: var(--color-background);
}
.fjs-container .fjs-input::placeholder,
.fjs-container .fjs-textarea::placeholder,
.fjs-container .fjs-select > option:disabled,
.fjs-container .fjs-select [disabled] {
  font-style: italic;
  letter-spacing: .25px;

  color: var(--color-text-lighter);
}

.fjs-container .fjs-form-field-label {
  display: flex;
  align-items: center;
}

.fjs-container .fjs-form-field-description {
  display: block;
  color: var(--color-text-lighter);
}

.fjs-container .fjs-form-field-label,
.fjs-container .fjs-form-field-description {
  margin: 4px 0;
}

.fjs-container .fjs-form-field.required label::after,
.fjs-container .fjs-form-field.required .group-title::after {
  content: "*";
}

.fjs-container .fjs-checkbox.group.required label::after,
.fjs-container .fjs-radio.required label::after {
  display: none;
}

.fjs-container .fjs-input[type=text],
.fjs-container .fjs-input[type=number],
.fjs-container .fjs-button[type=submit],
.fjs-container .fjs-button[type=reset],
.fjs-container .fjs-textarea,
.fjs-container .fjs-select {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 4px 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
}

.fjs-container .fjs-textarea {
  height: 90px;
}

.fjs-container .fjs-radio {
  display: flex;
  flex-direction: column;
}

.fjs-container .fjs-input[type=checkbox],
.fjs-container .fjs-input[type=radio] {
  margin: 6px 10px 6px 4px;
}

.fjs-container .fjs-button[type=submit] {
  color: var(--color-text-inverted);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.fjs-container .fjs-button[type=reset] {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-borders);
}

.fjs-container .fjs-button[type=submit],
.fjs-container .fjs-button[type=reset] {
  min-width: 100px;
  width: auto;
}

.fjs-container .fjs-button[type=submit] {
  font-weight: 600;
}

.fjs-container .fjs-input[type=text]:focus,
.fjs-container .fjs-input[type=number]:focus,
.fjs-container .fjs-button[type=submit]:focus,
.fjs-container .fjs-button[type=reset]:focus,
.fjs-container .fjs-textarea:focus,
.fjs-container .fjs-select:focus {
  outline: none;
  padding: 7px;
  border-width: 2px;
}

.fjs-container .fjs-button[type=submit]:focus {
  border-color: var(--color-accent-dark);
}

.fjs-container .fjs-input:disabled,
.fjs-container .fjs-textarea:disabled,
.fjs-container .fjs-select:disabled {
  background-color: var(--color-background-disabled);
  border-color: var(--color-borders-disabled);
}

.fjs-container .fjs-button[type=submit]:disabled,
.fjs-container .fjs-button[type=reset]:disabled {
  color: var(--text-light);
  background-color: var(--color-background-disabled);
  border-color: var(--color-borders-disabled);
}

.fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
.fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
.fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea {
  border-color: var(--color-warning);
}

.fjs-container .fjs-form-field-error {
  color: var(--color-warning);
}

.fjs-container .fjs-form-field-error > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.fjs-container .fjs-form-field-error > ul > li {
  list-style-type: none;
}

.fjs-container .fjs-form-field-text a {
  color: var(--color-blue-205-100-45);
}