@import url("./global-config.css");

:root {
  --primary: rgba(0, 120, 255, 1);
  --secondary: rgba(255, 165, 0, 1);
  --tertiary: rgba(0, 87, 255, 1);
  --success: rgba(86, 197, 104, 1);
  --selected: rgba(0, 194, 255, 1);
  --hint: rgba(255, 165, 0, 1);
  --failure: rgba(235, 87, 87, 1);
  --text: rgba(78, 97, 122, 1);
  --text2: rgba(255, 255, 255, 1);
  --text3: rgba(206, 222, 245, 1);
  --text4: rgba(255, 255, 255, 1);
  --text5: rgba(255, 255, 255, 1);
  --textBtn: rgba(255, 255, 255, 1);
  --border: rgba(69, 113, 190, 1);
  --background1: rgba(239, 246, 255, 1);
  --background2: rgba(44, 70, 116, 1);
  --background3: rgba(27, 68, 124, 1);
  --background4: rgba(0, 63, 183, 1);
  --background5: rgba(24, 57, 109, 1);
  --backgroundfb: rgb(12 39 92 / 20%);
  --background5L1350: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), linear-gradient(0deg, var(--background5), var(--background5));
  --background5L850: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(0deg, var(--background5), var(--background5));  

  --font-size: 14px;
  --default-width: 1100px;
  --register-bg: rgb(255, 255, 255);
  --default-width: 100%;
  --primary-filter: brightness(0) saturate(100%) invert(27%) sepia(99%) saturate(3041%) hue-rotate(215deg) brightness(101%) contrast(101%);
  --secondary-filter: brightness(0) saturate(100%) invert(9%) sepia(91%) saturate(2605%) hue-rotate(219deg) brightness(91%) contrast(110%);
  --text2-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(180deg) brightness(103%) contrast(103%);
  --text3-filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(594%) hue-rotate(181deg) brightness(100%) contrast(96%);
  --text5-filter: brightness(0) saturate(100%) invert(99%) sepia(16%) saturate(2%) hue-rotate(225deg) brightness(116%) contrast(100%);

  /* DARK SHADES (Overlay Colors) */
  --dark-d100: rgba(23, 23, 23, 0.9);
  --dark-d200: rgba(23, 23, 23, 0.8);
  --dark-d300: rgba(23, 23, 23, 0.7);
  --dark-d500: rgba(23, 23, 23, 0.5);
  --dark-d700: rgba(23, 23, 23, 0.3);
  --dark-d1200: rgba(255, 255, 255, 0.2);

  /* LIGHT SHADES (Overlay Colors) */
  --light-l100: rgba(255, 255, 255, 0.9);
  --light-l300: rgba(255, 255, 255, 0.7);
  --light-l600: rgba(255, 255, 255, 0.4);
  --light-l850: rgba(255, 255, 255, 0.15);
  --light-l950: rgba(255, 255, 255, 0.05);
  --light-l1350: rgba(0, 0, 0, 0.35);

  /* PRIMARY COLOR GRADIENTS */
  --primary-d100: linear-gradient(0deg, var(--dark-d100) 0%, var(--dark-d100) 100%), var(--primary);
  --primary-d200: linear-gradient(0deg, var(--dark-d200) 0%, var(--dark-d200) 100%), var(--primary);
  --primary-d300: linear-gradient(0deg, var(--dark-d300) 0%, var(--dark-d300) 100%), var(--primary);
  --primary-d500: linear-gradient(0deg, var(--dark-d500) 0%, var(--dark-d500) 100%), var(--primary);
  --primary-d700: linear-gradient(0deg, var(--dark-d700) 0%, var(--dark-d700) 100%), var(--primary);
  --primary-d1200: linear-gradient(0deg, var(--dark-d1200) 0%, var(--dark-d1200) 100%), var(--primary);

  /* SECONDARY COLOR GRADIENTS */
  --secondary-d100: linear-gradient(0deg, var(--dark-d100) 0%, var(--dark-d100) 100%), var(--secondary);
  --secondary-d200: linear-gradient(0deg, var(--dark-d200) 0%, var(--dark-d200) 100%), var(--secondary);
  --secondary-d300: linear-gradient(0deg, var(--dark-d300) 0%, var(--dark-d300) 100%), var(--secondary);
  --secondary-d500: linear-gradient(0deg, var(--dark-d500) 0%, var(--dark-d500) 100%), var(--secondary);
  --secondary-d700: linear-gradient(0deg, var(--dark-d700) 0%, var(--dark-d700) 100%), var(--secondary);
  --secondary-d1200: linear-gradient(0deg, var(--dark-d1200) 0%, var(--dark-d1200) 100%), var(--secondary);

  /* TERTIARY COLOR GRADIENTS */
  --tertiary-d100: linear-gradient(0deg, var(--dark-d100) 0%, var(--dark-d100) 100%), var(--tertiary);
  --tertiary-d200: linear-gradient(0deg, var(--dark-d200) 0%, var(--dark-d200) 100%), var(--tertiary);
  --tertiary-d300: linear-gradient(0deg, var(--dark-d300) 0%, var(--dark-d300) 100%), var(--tertiary);
  --tertiary-d500: linear-gradient(0deg, var(--dark-d500) 0%, var(--dark-d500) 100%), var(--tertiary);
  --tertiary-d700: linear-gradient(0deg, var(--dark-d700) 0%, var(--dark-d700) 100%), var(--tertiary);
  --tertiary-d1200: linear-gradient(0deg, var(--dark-d1200) 0%, var(--dark-d1200) 100%), var(--tertiary);

  /* BACKGROUND 1 GRADIENTS */
  --bg1-l100: linear-gradient(0deg, var(--light-l100) 0%, var(--light-l100) 100%), var(--background1);
  --bg1-l300: linear-gradient(0deg, var(--light-l300) 0%, var(--light-l300) 100%), var(--background1);
  --bg1-l600: linear-gradient(0deg, var(--light-l600) 0%, var(--light-l600) 100%), var(--background1);
  --bg1-l850: linear-gradient(0deg, var(--light-l850) 0%, var(--light-l850) 100%), var(--background1);
  --bg1-l950: linear-gradient(0deg, var(--light-l950) 0%, var(--light-l950) 100%), var(--background1);
  --bg1-l1350: linear-gradient(0deg, var(--light-l1350) 0%, var(--light-l1350) 100%), var(--background1);

  /* BACKGROUND 4 GRADIENTS */
  --bg4-l100: linear-gradient(0deg, var(--light-l100) 0%, var(--light-l100) 100%), var(--background4);
  --bg4-l300: linear-gradient(0deg, var(--light-l300) 0%, var(--light-l300) 100%), var(--background4);
  --bg4-l600: linear-gradient(0deg, var(--light-l600) 0%, var(--light-l600) 100%), var(--background4);
  --bg4-l850: linear-gradient(0deg, var(--light-l850) 0%, var(--light-l850) 100%), var(--background4);
  --bg4-l950: linear-gradient(0deg, var(--light-l950) 0%, var(--light-l950) 100%), var(--background4);
  --bg4-l1350: linear-gradient(0deg, var(--light-l1350) 0%, var(--light-l1350) 100%), var(--background4);

  /* BACKGROUND 5 GRADIENTS */
  --bg5-l100: linear-gradient(0deg, var(--light-l100) 0%, var(--light-l100) 100%), var(--background5);
  --bg5-l300: linear-gradient(0deg, var(--light-l300) 0%, var(--light-l300) 100%), var(--background5);
  --bg5-l600: linear-gradient(0deg, var(--light-l600) 0%, var(--light-l600) 100%), var(--background5);
  --bg5-l850: linear-gradient(0deg, var(--light-l850) 0%, var(--light-l850) 100%), var(--background5);
  --bg5-l950: linear-gradient(0deg, var(--light-l950) 0%, var(--light-l950) 100%), var(--background5);
  --bg5-l1350: linear-gradient(0deg, var(--light-l1350) 0%, var(--light-l1350) 100%), var(--background5);

  /* BORDER GRADIENTS */
  --border-d300: linear-gradient(0deg, var(--dark-d300) 0%, var(--dark-d300) 100%), var(--border);
  --border-d500: linear-gradient(0deg, var(--dark-d500) 0%, var(--dark-d500) 100%), var(--border);
  --border-d700: linear-gradient(0deg, var(--dark-d700) 0%, var(--dark-d700) 100%), var(--border);
  --border-d1200: linear-gradient(0deg, var(--dark-d1200) 0%, var(--dark-d1200) 100%), var(--border);
}
:root {
  --bg-opacity: 0;
  --bg-base-color: var(--primary);

  --bo-t: 0;
  --bo-l: 0;
  --bo-w: 100%;
  --bo-h: 2px;
  --bo-z: 1;
  --bo-opacity: 0;
  --bo-base-color: var(--border);
}

.ol-bg-dark {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, var(--bg-opacity)) 0%,
      rgba(0, 0, 0, var(--bg-opacity)) 100%),
    var(--bg-base-color);
}

.ol-bg-light {
  background: linear-gradient(0deg,
      rgba(255, 255, 255, var(--bg-opacity)) 0%,
      rgba(255, 255, 255, var(--bg-opacity)) 100%),
    var(--bg-base-color);
}

.ol-bo-dark {
  position: relative;
}

.ol-bo-dark::after {
  content: "";
  position: absolute;
  width: var(--bo-w);
  height: var(--bo-h);
  top: var(--bo-t);
  left: var(--bo-l);
  z-index: var(--bo-z);
  background: linear-gradient(0deg,
      rgba(0, 0, 0, var(--bo-opacity)) 0%,
      rgba(0, 0, 0, var(--bo-opacity)) 100%),
    var(--bo-base-color);
}

.ol-bo-light {
  position: relative;
}

.ol-bo-light::after {
  content: "";
  position: absolute;
  width: var(--bo-w);
  height: var(--bo-h);
  top: var(--bo-t);
  left: var(--bo-l);
  z-index: var(--bo-z);
  background: linear-gradient(0deg,
      rgba(255, 255, 255, var(--bo-opacity)) 0%,
      rgba(255, 255, 255, var(--bo-opacity)) 100%),
    var(--bo-base-color);
}

/**
  color system classes end
*/