:root {
  --color-background-main: #f8fafc;
  --color-primary: #a78d78;
  --color-black: #000;
  --color-black1: #333;
  --color-white: #fff;
  --color-white-opacity: #ffffff47;
  --color-secondary: #fbb412;
  --color-gray: #e0e1e4;
  --color-gray2: #a2a2a2;
  --color-gray3: #9E9E9E;
  --color-blue: #1a1f36;
  --color-red: #CF2B24;
  --color-green: #82AD86;
  --color-yellow: #FFC107;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --box-shadow: 0 15px 35px 0 rgba(60, 66, 87, .08), 0 5px 15px 0 rgba(0, 0, 0, .12);
  --box-shadow2: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
  
  --border-radius-main: 8px;
  --input-border: 1px solid var(--color-gray);
  --input-border-radius: 4px;
  
  --default-transition: .25s;
  --color-transition: all var(--default-transition) ease-out;
  --background-transition: background var(--default-transition) ease-out;
  --opacity-transition: opacity var(--default-transition) ease-out;
  --tooltip-transition: opacity var(--default-transition) ease;
  
  --button-height: 40px;
  --button-width: 240px;

  --color-light-gray: #f3f3f3;
  --color-dark-gray: #ccc;
  --color-light-blue: #03a9f4;
  --color-progress-green: #c4ffc6;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
  --transition-fast: .4s ease;
  --transition-slow: .5s ease;
  
  --background-color: #fff;
  --checkbox-height: 25px;
}