:root {
  --max-width: 500px;
  --color-fg: #333;
  --color-border: #ddd;
  --color-btn: #2d5f3e;
  --color-btn-hover: #1e4029;
  --color-error: #d32f2f;
  --html-font-size: 62.5%;
  --body-font-size: 1.4rem;
  --font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  --line-height: 1.6;
  --input-border-radius: 4px;
  --btn-border-radius: 4px;
}

html {
  font-size: var(--html-font-size);
  margin: 0px;
  padding: 0px;
}

body {
  font-size: var(--body-font-size);
  font-family: var(--font-family);
  line-height: var(--line-height);
  color: var(--color-fg);
  margin: 0px;
  padding: 20px;
  background-color: #fff;
}

.m-center {
  margin: auto;
}

.max-width {
  max-width: var(--max-width);
}

/********* FORM STYLING *********/
.fs-kb-host-send-email {
  max-width: var(--max-width);
  padding: 0px;
}

.fs-kb-form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.fs-kb-form-row label {
  display: none;
  /* Labels hidden as per screen print, using placeholders instead */
}

.fs-kb-form-row input,
.fs-kb-form-row textarea {
  background: #fff;
  border-radius: var(--input-border-radius);
  border: 1px solid var(--color-border);
  box-shadow: none;
  display: block;
  font-size: 1.4rem;
  font-family: var(--font-family);
  margin: 0;
  padding: 12px 15px;
  width: 100%;
  box-sizing: border-box;
  color: var(--color-fg);
  transition: border-color 0.2s ease;
}

.fs-kb-form-row input:focus,
.fs-kb-form-row textarea:focus {
  border-color: #999;
  outline: none;
}

.fs-kb-form-row input::placeholder,
.fs-kb-form-row textarea::placeholder {
  color: #999;
}

.fs-kb-form-row textarea {
  resize: vertical;
  min-height: 120px;
}

.fs-kb-input-invalid {
  border-color: var(--color-error) !important;
}

.fs-kb-validerror {
  color: var(--color-error);
  font-size: 1.4rem;
  margin-top: 5px;
}

/********* FILE UPLOAD *********/
.fs-kb-form-row-note {
  font-size: 1.4rem;
  color: #666;
  margin-bottom: 10px;
}

#fsKBFile {
  color: var(--color-btn);
  text-decoration: underline;
  cursor: pointer;
  outline: 0;
  font-size: 1.6rem;
  display: inline-block;
  padding: 5px 0;
  transition: color 0.2s ease;
}

#fsKBFile:hover {
  color: var(--color-btn-hover);
}

#fsKBFilesHost {
  margin-bottom: 15px;
}

.fsKBFileDiv {
  background-color: #f5f5f5;
  padding: 10px 15px;
  font-size: 1.4rem;
  display: flex;
  margin-bottom: 8px;
  border-radius: var(--input-border-radius);
  border: 1px solid var(--color-border);
}

.fsKBFileDiv-Error {
  background-color: #ffebee;
  border-color: var(--color-error);
}

.fsKBFileDiv-Error .fsKBFileDiv-Text span {
  color: var(--color-error);
}

.fsKBFileDiv-Text {
  flex-grow: 1;
  word-break: break-word;
}

.fsKBFileDiv-Del {
  color: var(--color-btn);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 15px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.fsKBFileDiv-Del:hover {
  color: var(--color-error);
}

/********* CAPTCHA *********/
#fsKBCaptcha {
  max-width: 80px;
}

#fskb_captcha_error {
  color: var(--color-error);
  font-size: 1.4rem;
  margin-bottom: 15px;
}

/********* SUBMIT BUTTON *********/
.fs-kb-but {
  background-color: var(--color-btn);
  color: #fff;
  border: none;
  border-radius: var(--btn-border-radius);
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--font-family);
  padding: 14px 45px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-transform: none;
}

.fs-kb-but:hover:not(:disabled) {
  background-color: var(--color-btn-hover);
}

.fs-kb-but:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fs-kb-form-row-submitbut {
  text-align: left;
  display: block;
  margin-top: 20px;
}

/********* ERROR & LOADING STATES *********/
.fs-kb-form-submit-error {
  color: var(--color-error);
  font-size: 1.4rem;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #ffebee;
  border-radius: var(--input-border-radius);
}

.fs-kb-form-submit-anim {
  height: 20px;
  max-height: 20px;
  background-repeat: no-repeat;
  background-image: url(data:image/gif;base64,R0lGODlhKwALAJECAMrCtfHr4f///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzQjVDMzU3NjgwQjExRUU5MkFFQjcwNTI1QjU4NkQ0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzQjVDMzU4NjgwQjExRUU5MkFFQjcwNTI1QjU4NkQ0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjNCNUMzNTU2ODBCMTFFRTkyQUVCNzA1MjVCNTg2RDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjNCNUMzNTY2ODBCMTFFRTkyQUVCNzA1MjVCNTg2RDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQJCgACACwAAAAAKwALAAACMlSOKMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64YCAyTBUAACH5BAkKAAIALAAAAAArAAsAAAI9FI4oyxIPYWOxmoTBrHzzmGHe94xkmJifyqFKQ0pwHLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgACACwAAAAAKwALAAACPVSOKMsCD2FjqZpqW9xv4g8GE7d54XmMpNSgqLoCpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAgAsAAAAACsACwAAAkBUjijLltkYmJS6Bxt+sfq5ZUyoNJ9HHlEadCfFrqn7ArE2m7Wdj/2y45FkQ13t5itKdshFUxC8YCLOEBX6EhQAADs=);
  background-position: center center;
  display: none;
  margin-bottom: 15px;
}

/********* SUCCESS PAGE *********/
.success-message {
  text-align: center;
  padding: 40px 20px;
}

.success-message h1 {
  color: var(--color-btn);
  font-size: 2.4rem;
  margin-bottom: 15px;
}

.success-message p {
  font-size: 1.6rem;
  color: #666;
}

/********* RESPONSIVE *********/
@media (max-width: 600px) {
  body {
    padding: 15px;
  }

  .fs-kb-form-row input,
  .fs-kb-form-row textarea {
    font-size: 1.6rem;
  }

  .fs-kb-but {
    width: 100%;
  }
}