$light-grey: #a0a0a0;
$light-grey-10: #f8f8f8;
$btn-text-color: #f6f6f6;

$COLOR_LIGHT_GREEN: #96d550;
$COLOR_DARK_GREEN: #78aa40;
$COLOR_WHITE: #ffffff;
$COLOR_GREY: #f3f3f3;
$COLOR_DARK_GREY: #818181;
$COLOR_DARK_CYAN: #00a992;
$COLOR_BLACK: #000000;
$COLOR_LIGHT_DARK: #333333;
$COLOR_DARK_BLUE: #0f62a4;

$dark-80: #2c2e2f;

/*
 * CSS Variables: Used for whitelabel customization
 */
:root {
  /* Fonts */
  --fontFamily: Arial, sans-serif;

  /* Text sizes and weights */

  --textFontSize: 20px;
  --textFontWeight: 600;
  --textLineHeight: 1.5em;

  --textFontSize768px: 18px;
  --textFontWeight768px: bold;

  --textFontSize1024px: 18px;
  --textFontWeight1024px: bold;

  /* Headers sizes and weights */

  --h1FontSize: 2rem;
  --h1FontWeight: bold;

  --h1FontSize768px: 2rem;
  --h1FontWeight768px: bold;

  --h1FontSize1024px: 2rem;
  --h1FontWeight1024px: bold;

  --h2FontSize: 1.5rem;
  --h2FontWeight: bold;

  --h2FontSize768px: 1.5rem;
  --h2FontWeight768px: bold;

  --h2FontSize1024px: 1.5rem;
  --h2FontWeight1024px: bold;
  --h2Color: rgb(95, 95, 95);

  --h3FontSize: 1rem;
  --h3FontWeight: normal;
  --h3FontSize768px: 1rem;
  --h3FontWeight768px: normal;
  --h3FontSize1024px: 1rem;
  --h3FontWeight1024px: normal;

  /* Colors */
  --colorPrimary: #101c27;
  --colorSecondary: #13bf9f;

  /* Body */
  --bodyBG: #fafafa;
  --bodyFontColor: #868e96;
  --bodyPadding: 7vw 0vw 0vw 0vw;

  /* Main */
  --mainBG: transparent;
  --mainPadding: 0 0;

  /* Header */
  --headerBG: #ffffff;
  --headerFontColor: #000000;
  --headerActiveBG: #ffffff;
  --headerWidth: 100%;
  --headerBorderTop: 0px;
  --headerBoxShadowBottom: 0 2px 2px -1px gray;

  /* Footer */
  --footerBG: #101c27;
  --footerFontColor: #ffffff;
  --align-items: center;
  --margin-bottom: 0px;
  --background-color-social-icon: none;
  --opacity-item: 0.3;
  --opacity-item-hover: 0.9;
  --margin-left-item: 2.5em;
  --footer-padding: 50px 5vw 50px;
  --display-item: flex;
  --margin-icon: 0 0 0 1em;
  --max-width-logo: 420px;

  /* Anchor */
  --anchorFontColor: #13bf9f;
  --anchorFontColorHover: #008073;

  /* Hero */
  --heroBG: #eeeeee;

  /* Steps */
  --stepBG: #cccccc;
  --arrowColor: #13bf9f;

  /* ContactsCard */
  --contactsCardBG: #eeeeee;

  /* TestCases */
  --testCasesLeftSectionBG: #ffffff;
  --testCasesRightSectionBG: #eeeeee;
  --testCasesAnchorFontColor: #484848;
  --testCasesAnchorFontColorHover: #0984bf;

  /* Buttons */
  --buttonTextColor: #fff;
  --buttonBorderRadius: 3px;

  --buttonBgGradient1: #13b4bf;
  --buttonBgGradient2: #0a8f70;
  --buttonBG: linear-gradient(129.54deg, var(--buttonBgGradient1) 0%, var(--buttonBgGradient2) 100%);

  --buttonHoveredGradient1: #059c85;
  --buttonHoveredGradient2: #0a8f70;
  --buttonHovered: linear-gradient(129.54deg, var(--buttonHoveredGradient1) 0%, var(--buttonHoveredGradient2) 100%);

  --buttonClickedGradient1: #13b4bf;
  --buttonClickedGradient2: #008073;
  --buttonClicked: linear-gradient(129.54deg, var(--buttonClickedGradient1) 0%, var(--buttonClickedGradient2) 100%);

  /* Inputs */
  --inputBG: $COLOR_WHITE;
  --inputBorderStyleLeft: 1px solid #dcdcdc;
  --inputBorderStyleRight: 1px solid #dcdcdc;
  --inputBorderStyleBottom: 1px solid #dcdcdc;
  --inputBorderStyleTop: 1px solid #dcdcdc;
  --inputBorderRadius: 0.1rem;

  /* Selects */
  --selectBG: $COLOR_WHITE;
  --selectColor: #3b4151;
  --selectBorderStyleLeft: none;
  --selectBorderStyleRight: none;
  --selectBorderStyleBottom: none;
  --selectBorderStyleTop: none;
  --selectBorderRadius: none;

  /* Table */
  --tableColor: black;
  --tableBG: #fafafa;
  --tableStripedBG: #f3f3f3;
  --tableHeaderBG: #f3f3f3;

  --tableBorderStyleBottom: none;
  --tableBorderStyleLeft: none;
  --tableBorderStyleRight: none;
  --tableBorderStyleTop: none;

  /* Checkboxes */
  --checkBoxBGChecked: var(--colorPrimary);
  --checkBoxBG: #eee;
  --checkBoxBGHovered: #ccc;

  --checkBoxMarkColor: white;
  --checkBoxMarkLeft: 30%;
  --checkBoxMarkTop: 30%;
  --checkBoxMarkWidth: 7px;
  --checkBoxMarkHeight: 8px;

  /* Links */
  --anchorBGcolorHover: transparent;

  /* Background-image */
  --backgroundImage: none;

  /* List style */
  --listStyle: decimal;

  /* Image URL */
  --arrow-url: url('/assets/icons/arrow-down.svg');
}
