@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

:root {
  --brand: #ff5a28;
  --additional-brand: #244d50;
  --error: #d60f23;
  --success: #0fbe98;
  --blue: #6eaad2;
  --grey: #e6e7e8;
  --dark-grey: #505050;
  --white: #fff;
  --dark: #333;
  --primary-font: "Work Sans";
  --additional-font: "Metropolis";

  --header-color: var(--additional-brand);
  --header-contrast-color: var(--header-color);
  --header-line-height: 1.125;
  --header-font-family: var(--additional-font);
  --header-font-size-primary: 1.75rem;
  --header-font-size-additional: 1.5rem;
  --header-font-weight-primary: 700;
  --header-font-weight-additional: 700;

  --text-color: var(--dark);
  --text-contrast-color: var(--text-color);
  --text-line-height: 1.5;
  --text-font-family: var(--primary-font);
  --text-font-size: 0.875rem;
  --text-font-weight: 300;

  --highlight-color: var(--brand);
  --list-bullet-color: var(--highlight-color);
  --list-bullet-border-radius: 50%;
  --frame-shadow: 0 1.5rem 6rem rgba(0, 0, 0, 0.1);

  --loader-content: "";
  --loader-spacing: 4rem;
  --loader-color-primary: var(--brand);
  --loader-color-additional: var(--grey);
  --loader-text-color: var(--brand);

  --progress-bar-background: var(--grey);
  --progress-bar-color: var(--brand);
  --progress-bar-height: 0.25rem;

  --button-font-family: var(--additional-font);
  --button-font-size: 0.75rem;
  --button-font-weigth: 700;
  --button-line-height: 1.5;
  --button-border-radius: 1.5rem;
  --button-text-transform: uppercase;
  --button-padding: 0.75rem 0.5rem;
  --button-opacity: 1;
  --button-shadow-size: 0 0.5rem 1rem;
  --button-shadow-opacity: 0.3;
  --button-opacity-hover: 0.9;
  --button-shadow-opacity-hover: 0.15;
  --button-brand-color: var(--brand);

  --button-primary-background: var(--button-brand-color);
  --button-primary-color: var(--white);
  --button-primary-border: none;
  --button-primary-border-radius: var(--button-border-radius);
  --button-primary-text-transform: var(--button-text-transform);
  --button-primary-padding: var(--button-padding);
  --button-primary-opacity: var(--button-opacity);
  --button-primary-shadow-color: var(--button-brand-color);
  --button-primary-shadow-size: var(--button-shadow-size);
  --button-primary-shadow-opacity: var(--button-shadow-opacity);
  --button-primary-background-hover: var(--button-primary-background);
  --button-primary-color-hover: var(--button-primary-color);
  --button-primary-border-hover: var(--button-primary-border);
  --button-primary-opacity-hover: var(--button-opacity-hover);
  --button-primary-shadow-color-hover: var(--button-primary-shadow-color);
  --button-primary-shadow-opacity-hover: var(--button-shadow-opacity-hover);

	--button-primary-background-color-disabled: #EDF1F5;
	--button-primary-color-disabled: #96A0AE;

  --button-additional-background: transparent;
  --button-additional-color: var(--button-brand-color);
  --button-additional-border: 1px solid var(--button-brand-color);
  --button-additional-border-radius: var(--button-border-radius);
  --button-additional-text-transform: var(--button-text-transform);
  --button-additional-padding: var(--button-padding);
  --button-additional-opacity: var(--button-opacity);
  --button-additional-shadow-color: var(--button-brand-color);
  --button-additional-shadow-size: var(--button-shadow-size);
  --button-additional-shadow-opacity: var(--button-shadow-opacity);
  --button-additional-background-hover: var(--button-additional-background);
  --button-additional-color-hover: var(--button-additional-color);
  --button-additional-border-hover: var(--button-additional-border);
  --button-additional-opacity-hover: var(--button-opacity-hover);
  --button-additional-shadow-color-hover: var(--button-additional-shadow-color);
  --button-additional-shadow-opacity-hover: var(--button-shadow-opacity-hover);

  --text-input-label-color: var(--text-color);
  --text-input-color: var(--text-color);
  --text-input-background: #f7f7f7;
  --text-input-underline-color: #bdbdbd;

  --check-box-mark-color: #40444a;

  --popup-border: none;
  --popup-border-radius: 1.5rem;
  --popup-shadow-color: var(--dark);
  --popup-shadow-size: 0 0.5rem 1rem;
  --popup-shadow-opacity: 0.15;

  --page-color: var(--white);
  --page-time: 0.3s;
  --camera-time: 0.2s;
  --frame-time: 0.2s;

  --mask-opacity: 0.3;
  --mask: rgba(0, 0, 0, var(--mask-opacity));

  --document-color: var(--grey);
  --document-color-hover: var(--brand);
  --document-time: 0.2s;

  --input-color: var(--grey);
  --input-time: 0.3s;

  --message-text: var(--white);
  --message-shadow: #000;
  --message-show-time: 0.75s;
  --message-hide-time: 0.5s;

  --face-spinner-color: var(--brand);

  --logo-top: 1rem;
  --logo-left: 2rem;
  --logo-height: 5rem;
  --logo-width: 9.375rem;

  --file-upload-color: var(--brand);

  --icon-color: var(--brand);

  --check-box-mark-color: #40444a;

  color: var(--text-color);
  line-height: var(--text-line-height);
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-size: 16px;
}