/************************************************
Color Variables
************************************************/

:root {
  --beneblue: rgba(0, 185, 242, 1);
  --benebluemild: rgba(64, 202, 245, 1);
  --benebluelight: rgba(127, 220, 248, 1);
  --beneblueextralight: rgba(217, 245, 253, 1);
  --benebluemultiply: rgba(0, 67, 115, 1);

  --BAgreen: rgba(92, 160, 56, 1);
  --BAgreenmild: rgba(114, 175, 80, 1);
  --BAgreenlight: rgba(160, 206, 136, 1);
  --BAgreenextralight: rgba(197, 228, 181, 1);
  --BAgreenmultiply: rgba(57, 98, 34, 1);

  --benebrown: rgba(153, 76, 0, 1);
  --benebrownmild: rgba(178, 121, 64, 1);
  --benebrownlight: rgba(204, 165, 127, 1);
  --benebrownextralight: rgba(229, 211, 196, 1);

  --benepurple: rgba(111, 71, 171, 1);
  --benepurplemild: rgba(200, 163, 255, 1);
  --benepurplelight: rgba(221, 199, 255, 1);
  --benepurpleextralight: rgba(240, 229, 255, 1);
  --benepurplemultiply: rgba(65, 27, 134, 1);

  --beneorange: rgba(255, 140, 25, 1);
  --beneorangemild: rgba(255, 198, 131, 1);
  --beneorangelight: rgba(255, 232, 202, 1);
  --beneorangemultiply: rgba(194, 62, 1, 1);

  --benegraydark: rgba(96, 96, 96, 1);
  --benegray: rgba(200, 200, 200, 1);
  --benegraylight: rgba(225, 225, 225, 1);
  --benegrayextralight: rgba(245, 245, 245, 1);

  --legupgreen: rgba(134, 189, 74, 1);
  --legupgreenmild: rgba(164, 205, 119, 1);
  --legupgreenlight: rgba(194, 222, 164, 1);
  --legupgreenextralight: rgba(225, 238, 209, 1);
  --legupgreenmultiply: rgba(47, 94, 14, 1);

  --leguppink: rgba(210, 87, 145, 1);
  --leguppinkmild: rgba(221, 129, 172, 1);
  --leguppinklight: rgba(232, 170, 200, 1);
  --leguppinkextralight: rgba(250, 229, 239, 1);
  --leguppinkmultiply: rgba(119, 29, 80, 1);

  --primary: var(--beneblue);
  --primarymild: var(--benebluemild);
  --primarylight: var(--benebluelight);
  --primaryextralight: var(--beneblueextralight);

  --secondary: var(--beneorange);
  --secondarymild: var(--legupgreenmild);
  --secondarylight: var(--legupgreenlight);
  --secondaryextralight: var(--legupgreenextralight);

}


/************************************************
Background Colors
************************************************/


.beneblueBG {background-color: var(--beneblue);}
.orangeBG {background-color: var(--beneorange);}
.BAgreenBG {background-color: var(--BAgreen);}
.leguppinkBG {background-color: var(--leguppink);}
.legupgreenBG {background-color: var(--legupgreen);}
.grayBG {background-color: var(--benegray);}
.whiteBG66 {background-color: rgba(255, 255, 255, 0.8); border-radius: 20px;}

.mildbeneblueBG {background-color: var(--benebluemild);}
.mildorangeBG {background-color: var(--beneorangemild);}
.mildBAgreenBG {background-color: var(--BAgreenmild);}
.mildleguppinkBG {background-color: var(--leguppinkmild);}
.mildlegupgreenBG {background-color: var(--legupgreenmild);}

.lightbeneblueBG {background-color: var(--benebluelight);}
.lightorangeBG {background-color: var(--beneorangelight);}
.lightBAgreenBG {background-color: var(--BAgreenlight);}
.lightlegupgreenBG {background-color: var(--legupgreenlight);}
.lightleguppinkBG {background-color: var(--leguppinklight);}
.lightbrownBG {background-color: var(--benebrownlight);}
.lightgrayBG {background-color: var(--benegraylight);}
.lightpurpleBG {background-color: var(--benepurplelight);}

.multiplyblueBG {background-color: var(--benebluemultiply);}
.multiplyorangeBG {background-color: var(--beneorangemultiply);}
.multiplyBAgreenBG {background-color: var(--BAgreenmultiply);}
.multiplypurpleBG {background-color: var(--benepurplemultiply);}
.multiplypinkBG {background-color: var(--leguppinkmultiply);}
.multiplygreenBG {background-color: var(--legupgreenmultiply);}

.extralightbeneblueBG {background-color: var(--beneblueextralight);}
.extralightlegupgreenBG {background-color: var(--legupgreenextralight);}
.extralightBAgreenBG {background-color: var(--BAgreenextralight);}
.extralightleguppinkBG {background-color: var(--leguppinkextralight);}
.extralightgrayBG {background-color: var(--benegrayextralight);}
.extralightpurpleBG {background-color: var(--benepurpleextralight);}


/***** definition of primary and secondary colors and shades ********/
.primaryBG {background-color: var(--primary);}
.primarymildBG {background-color: var(--primarymild);}
.primarylightBG {background-color: var(--primarylight);}
.primaryextralightBG {background-color: var(--primaryextralight);}

.secondaryBG {background-color: var(--secondary);}
.secondarymildBG {background-color: var(--secondarymild);}
.secondarylightBG {background-color: var(--secondarylight);}
.secondaryextralightBG {background-color: var(--secondaryextralight);}




/************************************************
Border Colors
************************************************/

.lightgrayBG .roundcornerborder {border-color: var(--benegraydark);}
.extralightBAgreenBG .roundcornerborder {border-color: var(--BAgreen);}
.extralightlegupgreenBG .roundcornerborder {border-color: var(--legupgreen);}
.extralightleguppinkBG .roundcornerborder {border-color: var(--leguppink);}
.lightorangeBG .roundcornerborder, .lightorangeBG.roundcornerborder {border-color: var(--beneorange);}
.primaryextralightBG .roundcornerborder {border-color: var(--primary);}
.secondaryextralightBG .roundcornerborder {border-color: var(--secondary);}