:root {
  --primary: #3D5EE1;
  --secondary: #303972;
  --field: #b0d9ff;
  --text: black;
  --subtext: #9d9d9d;
  --label: #0d5190;
  --bg: rgb(255, 255, 255);
  --bg2: #f4f7fe;
  --bg3: rgba(255, 255, 255, 0.82);
  --border-color: #b0d9ff;
  --shadow: rgba(0, 0, 0, 0.15);
  --white: white;
  --bgsidebar: #0F0C1C;
  --textsidebar: #FFFFFF;
  --sidebarwidth: 17.5vw;
  --sidebarwidthClosed: 5vw;
  --sidebarminwidth: 17.5vw;
  --sidebarspace: 1%;
  --links: #25638f;

  --button: #2d3748;
  --layoutpadding: 3%;
  --border-radius: 10px;

  --utils_color_one: #fb7d5b;
  --utils_color_tow: #fcc43e;

  --presence: #31ce83;
  --absence: #ce3131;
  --lateArrival: #f0e43b;
  --earlyDeparture: #3D5EE1;
  --warning: #E93553;

  --bg4: #e6e5e5;
  --borderColor: #ffffff91;
  --opacity: #bcbcbc;
}

:root:has(.dark) {
  --primary: #3D5EE1;
  --secondary: #303972;
  --field: #b0d9ff;
  --text: white;
  --subtext: #9d9d9d;
  --label: #0d5190;
  --bg: rgb(51, 51, 51);
  --bg2: black;
  --bg3: rgba(255, 255, 255, 0.82);
  --border-color: #b0d9ff;
  --shadow: rgba(0, 0, 0, 0.15);
  --white: white;
  --bgsidebar: #0F0C1C;
  --textsidebar: #FFFFFF;
  --sidebarwidth: 14vw;
  --sidebarminwidth: 14vw;
  --sidebarspace: 1%;
  --links: #25638f;

  --button: #2d3748;
  --layoutpadding: 3%;
  --border-radius: 10px;

  --utils_color_one: #fb7d5b;
  --utils_color_tow: #fcc43e;

  --presence: #31ce83;
  --absence: #ce3131;
  --lateArrival: #f0e43b;
  --earlyDeparture: #3D5EE1;
}