:root {
  /* Breakpoints */
  --mobile_v: 319px;
  --mobile: 479px;
  --moblet: 767px;
  --tablet: 992px;
  --desktop: 1200px;
  --bigDesktop: 1600px;

  /* Colors */
  --first-dark: #1F2229;
  --second-dark: #2C303B;

  --line-height: 20px;
  --font-size: 14px;

  --main-blue: #0F8DCB;
  --main-blue-hover: #0E86C2;
  --dark-blue: #0B6C9C;
  --darkest-blue: #042b3f;
  --black: #000;
  --dark-grey-text: #4F4F4F;
  --medium-grey-text: #888888;
  --white: #FFF;
  --light-grey: #F9F9F9;

  --main-grey: #E6E6E6;
  --main-grey-hover: #EEEEEE;

  --dark-grey: #CCCCCC;

  --main-orange: #FFBE00;
  --main-orange-text: #967a1c;

  --main-red: #D30C1E;
  --main-red-text: #ffcfd4;

  --main-green: #0fac1e;
  --main-green-text: #bbf0c0;

  --main-alert: #F5F8A3;

  /* Alerts */
  --red-alert: #cb1230;
  --red-alert-hover: #b3102b; /* Fallback */
  --red-alert-hover: color-mix(in srgb, var(--red-alert), black 5%);
  --red-alert-text: #FFF;

  --green-alert: #43FF36;
  --green-alert-hover: #3ae02e; /* Fallback */
  --green-alert-hover: color-mix(in srgb, var(--green-alert), black 5%);
  --green-alert-text: #094d04;

  --blue-alert: #42CFFF;
  --orange-alert: #F7E867;

  /* Grayscale */
  --gray-darker: #222;
  --gray-dark: #333;
  --gray: #555;
  --gray-light: #999;
  --gray-lighter: #eee;

  /* Brand Colors */
  --brand-primary: #428BCA;
  --brand-success: #5CB85C;
  --brand-info: #5BC0DE;
  --brand-warning: #F0AD4E;
  --brand-danger: #D9534F;

  /* Buttons */
  --button-default-bg: #E7E7E7;
  --button-default-bg-hover: #d2d2d2; /* Fallback */
  --button-default-bg-hover: color-mix(in srgb, var(--button-default-bg), black 5%);
  --button-default-color: #444444;

  --button-white-bg: #FFFFFF;
  --button-white-bg-hover: #e6e6e6; /* Fallback */
  --button-white-bg-hover: color-mix(in srgb, var(--button-white-bg), black 5%);
  --button-white-color: #444444;

  --button-black-bg: #131313;
  --button-black-bg-hover: #0f0f0f; /* Fallback */
  --button-black-bg-hover: color-mix(in srgb, var(--button-black-bg), black 5%);
  --button-black-color: #EAEAEA;

  --button-green-bg: #0FAC1E;
  --button-green-bg-hover: #0d9619; /* Fallback */
  --button-green-bg-hover: color-mix(in srgb, var(--button-green-bg), black 5%);
  --button-green-color: #B5F6A6;

  --button-red-bg: #D30C1E;
  --button-red-bg-hover: #b90a19; /* Fallback */
  --button-red-bg-hover: color-mix(in srgb, var(--button-red-bg), black 5%);
  --button-red-color: #F6FAFF;

  --button-blue-bg: #0B6C9C;
  --button-blue-bg-hover: #0a6190; /* Fallback */
  --button-blue-bg-hover: color-mix(in srgb, var(--button-blue-bg), black 5%);
  --button-blue-color: #F6FAFF;

  --button-orange-bg: #FFBE00;
  --button-orange-bg-hover: #e6ab00; /* Fallback */
  --button-orange-bg-hover: color-mix(in srgb, var(--button-orange-bg), black 5%);
  --button-orange-color: var(--darkest-blue);

  --button-yellow-bg: #ffe32b;
  --button-yellow-bg-hover: #e6cb27; /* Fallback */
  --button-yellow-bg-hover: color-mix(in srgb, var(--button-yellow-bg), black 5%);
  --button-yellow-color: var(--darkest-blue);

  --button-info-bg: #A2E0FF;
  --button-info-bg-hover: #91c8e6; /* Fallback */
  --button-info-bg-hover: color-mix(in srgb, var(--button-info-bg), black 5%);
  --button-info-color: #074195;

  /* Labels */
  --label-default-bg: var(--gray-light);
  --label-primary-bg: var(--brand-primary);
  --label-success-bg: var(--brand-success);
  --label-info-bg: var(--brand-info);
  --label-warning-bg: var(--brand-warning);
  --label-danger-bg: var(--brand-danger);
  --label-color: #FFF;
  --label-link-hover-color: #FFF;

  /* Font Sizes */
  --font-size-small: 10px;
  --font-size-medium: 12px;
  --font-size: 14px;
  --font-size-big: 20px;

  /* Layout */
  --nav-height: 45px;
  --nav-height-multiply: 1.4;
  --logo-width: 100px;
  --right-menu-width: 100px;

  /* Border */
  --border-radius: 2px;




  /* Define color variables */
  --main-grey: #e6e6e6;
  --light-grey: #f9f9f9;
  --main-green: #0fac1e;
  --main-red: #d30c1e;
  --hover-bg-color: #efff82;
  --text-color: #555555;
  --border-color: #dfdfdf;
  --shadow-color: rgba(0, 0, 0, 0.75);

  /* Spacing and sizing variables */
  --padding-small: 4px;
  --padding-medium: 10px;
  --border-radius: 2px;
  --font-size-small: 13px;
  --line-height: 26px;
}