:root {
  /* Font Colors */
  --vida-fontcolor-dark-blue: #465a74; /* $fontcolor_dark_blue */
  --vida-fontcolor-standard: #222; /* $fontcolor_standard - brighter black */
  --vida-fontcolor-black: #000; /* $fontcolor_black */
  --vida-fontcolor-black-rgb: 0,0,0; /* $fontcolor_black */
  --vida-fontcolor-white: #fff; /* $fontcolor_white */
  --vida-fontcolor-white-rgb: 255,255,255; /* $fontcolor_white */

  --vida-fontcolor-grey-very-light: #eee; /* ddr */
  --vida-fontcolor-grey-very-light-rgb: 238, 238, 238; /* ddr */
  --vida-fontcolor-grey-light: #ccc; /* $fontcolor_grey_light */
  --vida-fontcolor-grey-middle: #999; /* $fontcolor_grey_middle */
  --vida-fontcolor-grey-middle-dark: #777; /* $fontcolor_grey_middle_dark */
  --vida-fontcolor-grey-dark: #555; /* $fontcolor_grey_dark */

  /* Vida Blue */
  --vida-vidablue1: #e6f7ff; /* $vidablue1 - 95% */
  --vida-vidablue2: #99dfff; /* $vidablue2 - 80% */
  --vida-vidablue3: #4dc6ff; /* $vidablue3 - 65% */
  --vida-vidablue4: #00aeff; /* $vidablue4 - 50% (button & TEXT color) */
  --vida-vidablue5: #009de6; /* $vidablue5 - 45% */
  --vida-vidablue6: #008bcc; /* $vidablue6 - 40% */
  --vida-vidablue7: #007ab3; /* $vidablue7 - 35% */

  /* Vida Green */
  --vida-vidagreen4: #1ACE6E; /* $vidagreen4 - 50% (button & TEXT color) */

  /* Blue */
  --vida-blue1: #E5EFFF; /* $blue1 - 95% */
  --vida-blue2: #C3D7F6; /* $blue2 - 80% */
  --vida-blue3: #9ABBEE; /* $blue3 - 65% */
  --vida-blue4: #6C99E0; /* $blue4 - 50% */
  --vida-blue5: #497ED3; /* $blue5 - 45% */
  --vida-blue6: #2966C5; /* $blue6 - 40% */
  --vida-blue7: #0D4AAA; /* $blue7 - 35% */

  --vida-light-blue-box-background: #F7FDFF;
  --vida-light-blue-box-border: #E6F7FF;

  /* Red */
  --vida-red1: #FFD9DA; /* $red1 - 95% */
  --vida-red2: #FEB4B6; /* $red2 - 85% */
  --vida-red3: #FD8E91; /* $red3 - 75% */
  --vida-red4: #F66266; /* $red4 - 65% */
  --vida-red5: #DD3B41; /* $red5 - 60% */
  --vida-red6: #BD1A1F; /* $red6 - 55% */
  --vida-red7: #97070A; /* $red7 - 45% */

  /* Pink */
  --vida-pink1: #fff; /* $pink1 - 95% */
  --vida-pink2: #fff; /* $pink2 - 85% */
  --vida-pink3: #fff; /* $pink3 - 75% */
  --vida-pink4: #fff; /* $pink4 - 65% */
  --vida-pink5: #FA86C0; /* $pink5 - 60% */
  --vida-pink6: #F55EAB; /* $pink6 - 55% */
  --vida-pink7: #EB3A94; /* $pink7 - 45% */

  /* Yellow */
  --vida-yellow1: #FFEACA; /* $yellow1 - 95% */
  --vida-yellow2: #FFDBA2; /* $yellow2 - 85% */
  --vida-yellow3: #FFCC7C; /* $yellow3 - 75% */
  --vida-yellow4: #FAB952; /* $yellow4 - 68% */
  --vida-yellow5: #EA9F28; /* $yellow5 - 60% */
  --vida-yellow6: #C17B0E; /* $yellow6 - 50% */
  --vida-yellow7: #995E00; /* $yellow7 - 45% */

  /* Green */
  --vida-green1: #D4F5E4; /* $green1 - 95% */
  --vida-green2: #A2E2C1; /* $green2 - 80% */
  --vida-green3: #73C99D; /* $green3 - 65% */
  --vida-green4: #47AE79; /* $green4 - 50% */
  --vida-green5: #2B9B63; /* $green5 - 45% */
  --vida-green6: #14854C; /* $green6 - 40% */
  --vida-green7: #056A37; /* $green7 - 35% */

  /* Orange */
  --vida-orange1: #FFE4D0; /* $orange1 - 95% */
  --vida-orange2: #FFCEA9; /* $orange2 - 85% */
  --vida-orange3: #FFB983; /* $orange3 - 75% */
  --vida-orange4: #FFA159; /* $orange4 - 65% */
  --vida-orange5: #fe8c34; /* $orange5 - 60% */
  --vida-orange6: #E66808; /* $orange6 - 55% */
  --vida-orange7: #B24D00; /* $orange7 - 45% */

  /* Violette */
  --vida-violette1: #FDF5FE; /* $violette1 - 95% */
  --vida-violette2: #F0CFF3; /* $violette2 - 85% */
  --vida-violette3: #DAA0DE; /* $violette3 - 75% */
  --vida-violette4: #BB6AC1; /* $violette4 - 65% */
  --vida-violette5: #9d43a3; /* $violette5 - 55% */
  --vida-violette6: #8A2A91; /* $violette6 - 45% */
  --vida-violette7: #721479; /* $violette7 - 35% */

  /* Grey */
  --vida-grey1: #f2f2f2; /* $grey1 - 95% */
  --vida-grey2: #d9d9d9; /* $grey2 - 85% */
  --vida-grey3: #bfbfbf; /* $grey3 - 75% */
  --vida-grey4: #a6a6a6; /* $grey4 - 65% */
  --vida-grey5: #999999; /* $grey5 - 60% */
  --vida-grey6: #8c8c8c; /* $grey6 - 55% */
  --vida-grey7: #737373; /* $grey7 - 45% */

  /* Other */
  --vida-other1: #3069C5; /* $other1 */
  --vida-other2: #fff; /* $other2 - PURE WHITE!!!!! */
  --vida-other3: #FFB8BF; /* $other3 - pink left */
  --vida-other4: #5AC5F6; /* $other4 - blue left */
  --vida-other5: #5FCC5D; /* $other5 - green left */
  --vida-other6: #FECC4C; /* $other6 - yellow left */
  --vida-other7: #99DFFF; /* $other7 - lightblue left */
  --vida-other8: #eee; /* $other8 - frame light_grey */

  --vida-quickcheck-gradient1-start: var(--vida-orange4);
  --vida-quickcheck-gradient1-end: var(--vida-red5);
  --vida-quickcheck-gradient2-start: var(--vida-other3);
  --vida-quickcheck-gradient2-end: var(--vida-pink6);
  --vida-quickcheck-gradient3-start: var(--vida-pink5);
  --vida-quickcheck-gradient3-end: var(--vida-red5);
  --vida-quickcheck-gradient4-start: var(--vida-red3);
  --vida-quickcheck-gradient4-end: var(--vida-red5);
  --vida-quickcheck-gradient5-start: var(--vida-yellow3);
  --vida-quickcheck-gradient5-end: var(--vida-yellow5);
  --vida-quickcheck-gradient6-start: var(--vida-vidablue3);
  --vida-quickcheck-gradient6-end: var(--vida-blue5);
  --vida-quickcheck-gradient7-start: var(--vida-vidablue2);
  --vida-quickcheck-gradient7-end: var(--vida-blue4);
  --vida-quickcheck-gradient8-start: var(--vida-other5);
  --vida-quickcheck-gradient8-end: var(--vida-green5);
  --vida-quickcheck-gradient9-start: var(--vida-other5);
  --vida-quickcheck-gradient9-end: var(--vida-green3);


  --bs-white-rgb: var(--vida-fontcolor-white-rgb);
  --bs-light-rgb: var(--vida-fontcolor-grey-very-light-rgb);
  --bs-dark-rgb: var(--vida-fontcolor-black-rgb);
}

body.dark-mode {
  /* Font Colors */
  --vida-fontcolor-dark-blue: #B4C8E8; /* $fontcolor_dark_blue */
  --vida-fontcolor-standard: #DDD; /* $fontcolor_standard - brighter black */
  --vida-fontcolor-black: #FFF; /* $fontcolor_black */
  --vida-fontcolor-black-rgb: 255,255,255; /* $fontcolor_black */
  --vida-fontcolor-white: #17191B; /* $fontcolor_white */
  --vida-fontcolor-white-rgb: 23, 25, 27; /* $fontcolor_white */

  --vida-fontcolor-grey-very-light: #1C1C1C; /* ddr */
  --vida-fontcolor-grey-very-light-rgb: 28, 28, 28; /* ddr */
  --vida-fontcolor-grey-light: #333333; /* $fontcolor_grey_light */
  --vida-fontcolor-grey-middle: #666666; /* $fontcolor_grey_middle */
  --vida-fontcolor-grey-middle-dark: #888888; /* $fontcolor_grey_middle_dark */
  --vida-fontcolor-grey-dark: #AAA; /* $fontcolor_grey_dark */

  /* Vida Blue */
  --vida-vidablue1: #0D2C3D; /* $vidablue1 - 95% */
  --vida-vidablue2: #1A6D99; /* $vidablue2 - 80% */
  --vida-vidablue3: #2590C7; /* $vidablue3 - 65% */
  --vida-vidablue4: #00AEFF; /* $vidablue4 - 50% (button & TEXT color) */
  --vida-vidablue5: #33BDEE; /* $vidablue5 - 45% */
  --vida-vidablue6: #46C0FF; /* $vidablue6 - 40% */
  --vida-vidablue7: #6ACDFF; /* $vidablue7 - 35% */

  /* Vida Green */
  --vida-vidagreen4: #1ACE6E; /* $vidagreen4 - 50% (button & TEXT color) */

  /* Blue */
  --vida-blue1: #0D2A54; /* $blue1 - 95% */
  --vida-blue2: #14396C; /* $blue2 - 80% */
  --vida-blue3: #1B4D85; /* $blue3 - 65% */
  --vida-blue4: #2466A3; /* $blue4 - 50% */
  --vida-blue5: #3A84C4; /* $blue5 - 45% */
  --vida-blue6: #5BA3E5; /* $blue6 - 40% */
  --vida-blue7: #6ACDFF; /* $blue7 - 35% */

  /* Red */
  --vida-red1: #3D1212; /* $red1 - 95% */
  --vida-red2: #5A1A1A; /* $red2 - 85% */
  --vida-red3: #7A2020; /* $red3 - 75% */
  --vida-red4: #9B2A2A; /* $red4 - 65% */
  --vida-red5: #DE2F2F; /* $red5 - 60% */
  --vida-red6: #FF3535; /* $red6 - 55% */
  --vida-red7: #FF8080; /* $red7 - 45% */

  /* Pink */
  --vida-pink1: #fff; /* $pink1 - 95% */
  --vida-pink2: #fff; /* $pink2 - 85% */
  --vida-pink3: #fff; /* $pink3 - 75% */
  --vida-pink4: #fff; /* $pink4 - 65% */
  --vida-pink5: #E60B67; /* $pink5 - 60% */
  --vida-pink6: #E43991; /* $pink6 - 55% */
  --vida-pink7: #F780C7; /* $pink7 - 45% */

  /* Yellow */
  --vida-yellow1: #3D3310; /* $yellow1 - 95% */
  --vida-yellow2: #5B4D14; /* $yellow2 - 85% */
  --vida-yellow3: #7D6618; /* $yellow3 - 75% */
  --vida-yellow4: #A3821D; /* $yellow4 - 68% */
  --vida-yellow5: #C79F29; /* $yellow5 - 60% */
  --vida-yellow6: #E6BC3D; /* $yellow6 - 50% */
  --vida-yellow7: #EEC944; /* $yellow7 - 45% */

  --vida-light-blue-box-background: #030f29;
  --vida-light-blue-box-border: #06132e;

  /* Green */
  --vida-green1: #123D2D; /* $green1 - 95% */
  --vida-green2: #1D6D50; /* $green2 - 80% */
  --vida-green3: #2B8B66; /* $green3 - 65% */
  --vida-green4: #3DC28C; /* $green4 - 50% */
  --vida-green5: #52D99A; /* $green5 - 45% */
  --vida-green6: #66EEB0; /* $green6 - 40% */
  --vida-green7: #77FFC0; /* $green7 - 35% */

  /* Orange */
  --vida-orange1: #392313; /* $orange1 - 95% */
  --vida-orange2: #5C3417; /* $orange2 - 85% */
  --vida-orange3: #804717; /* $orange3 - 75% */
  --vida-orange4: #D5680D; /* $orange4 - 65% */
  --vida-orange5: #EC730A; /* $orange5 - 60% */
  --vida-orange6: #F4933B; /* $orange6 - 55% */
  --vida-orange7: #FFB347; /* $orange7 - 45% */

  /* Violette */
  --vida-violette1: #241C4A; /* $violette1 - 95% */
  --vida-violette2: #33255E; /* $violette2 - 85% */
  --vida-violette3: #4A3191; /* $violette3 - 75% */
  --vida-violette4: #6744B3; /* $violette4 - 65% */
  --vida-violette5: #835FCA; /* $violette5 - 55% */
  --vida-violette6: #A47BDF; /* $violette6 - 45% */
  --vida-violette7: #B98EFF; /* $violette7 - 35% */

  /* Grey */
  --vida-grey1: #2A2A2A; /* $grey1 - 95% */
  --vida-grey2: #3B3B3B; /* $grey2 - 85% */
  --vida-grey3: #4C4C4C; /* $grey3 - 75% */
  --vida-grey4: #6A6A6A; /* $grey4 - 65% */
  --vida-grey5: #999999; /* $grey5 - 60% */
  --vida-grey6: #8C8C8C; /* $grey6 - 55% */
  --vida-grey7: #BFBFBF; /* $grey7 - 45% */

  /* Other */
  --vida-other1: #5595FA; /* $other1 */
  --vida-other2: #fff; /* $other2 - PURE WHITE!!!!! */
  --vida-other3: #F67682; /* $other3 - pink left */
  --vida-other4: #1CA6E5; /* $other4 - blue left */
  --vida-other5: #1CCC19; /* $other5 - green left */
  --vida-other6: #E8AB0E; /* $other6 - yellow left */
  --vida-other7: #99DFFF; /* $other7 - lightblue left */
  --vida-other8: #eee; /* $other8 - frame light_grey */

  --vida-quickcheck-gradient1-start: var(--vida-orange4);
  --vida-quickcheck-gradient1-end: var(--vida-red5);
  --vida-quickcheck-gradient2-start: var(--vida-other3);
  --vida-quickcheck-gradient2-end: var(--vida-pink6);
  --vida-quickcheck-gradient3-start: var(--vida-pink5);
  --vida-quickcheck-gradient3-end: var(--vida-red5);
  --vida-quickcheck-gradient4-start: var(--vida-red3);
  --vida-quickcheck-gradient4-end: var(--vida-red5);
  --vida-quickcheck-gradient5-start: var(--vida-yellow3);
  --vida-quickcheck-gradient5-end: var(--vida-yellow5);
  --vida-quickcheck-gradient6-start: var(--vida-vidablue3);
  --vida-quickcheck-gradient6-end: var(--vida-blue5);
  --vida-quickcheck-gradient7-start: var(--vida-vidablue2);
  --vida-quickcheck-gradient7-end: var(--vida-blue4);
  --vida-quickcheck-gradient8-end: var(--vida-other5);
  --vida-quickcheck-gradient8-start: var(--vida-green5);
  --vida-quickcheck-gradient9-start: var(--vida-other5);
  --vida-quickcheck-gradient9-end: var(--vida-green3);

  --bs-white-rgb: var(--vida-fontcolor-white-rgb);
  --bs-light-rgb: var(--vida-fontcolor-grey-very-light-rgb);
  --bs-dark-rgb: var(--vida-fontcolor-black-rgb);
}