/* -------------------------------------------------------------
 * google fonts
 * -----------------------------------------------------------*/
/* roboto-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/roboto-v47-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: url("./fonts/roboto-v47-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/roboto-v47-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/roboto-v47-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/roboto-v47-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/roboto-v47-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/roboto-v47-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/roboto-v47-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/roboto-v47-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/roboto-v47-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/roboto-v47-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/roboto-v47-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/roboto-v47-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/roboto-v47-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/roboto-v47-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/roboto-v47-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/roboto-v47-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/roboto-v47-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/poppins-v23-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  src: url("./fonts/poppins-v23-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/poppins-v23-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/poppins-v23-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/poppins-v23-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/poppins-v23-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/poppins-v23-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/poppins-v23-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/poppins-v23-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/poppins-v23-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/poppins-v23-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/poppins-v23-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/poppins-v23-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/poppins-v23-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/poppins-v23-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/poppins-v23-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/poppins-v23-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/poppins-v23-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/source-code-pro-v23-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/source-code-pro-v23-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/source-code-pro-v23-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/source-code-pro-v23-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/source-code-pro-v23-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/source-code-pro-v23-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/source-code-pro-v23-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/source-code-pro-v23-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/source-code-pro-v23-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/source-code-pro-v23-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/source-code-pro-v23-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/source-code-pro-v23-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/source-code-pro-v23-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/source-code-pro-v23-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/source-code-pro-v23-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/source-code-pro-v23-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font:
    "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Source Code Pro", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #1e3a5f;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1e3a5f;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #f4c430;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #1e3a5f;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  font-family: var(--default-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
}

.timesheet-row-pending {
  position: relative;
  border-left: 4px solid #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.08),
    rgba(255, 193, 7, 0.08) 10px,
    rgba(255, 193, 7, 0.16) 10px,
    rgba(255, 193, 7, 0.16) 20px
  );
}

#offline-status-banner .badge {
  min-width: 40px;
}

#offline-status-banner .btn {
  white-space: nowrap;
}

.supervisor-status-message {
  display: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 600;
}

.supervisor-status-message.is-success {
  display: block;
  background: #e7f8ed;
  color: #1f6f3c;
  border: 1px solid #bce7c8;
}

.supervisor-status-message.is-warning {
  display: block;
  background: #fff6db;
  color: #8a5b00;
  border: 1px solid #ffe2a3;
}

.supervisor-status-message.is-error {
  display: block;
  background: #fdecec;
  color: #a12a2a;
  border: 1px solid #f7c0c0;
}

/* -------------------------------------------------------------
 * approval page sticky alerts
 * -----------------------------------------------------------*/
#approval-message {
  position: sticky;
  top: 70px;
  /* adjust based on navbar height */
  z-index: 1020;
}

#approval-message:empty {
  display: none;
}

/* -------------------------------------------------------------
 * htmx button loading state
 * -----------------------------------------------------------*/
.htmx-btn .loading-indicator {
  display: none;
}

.htmx-btn.htmx-request {
  pointer-events: none;
  opacity: 0.65;
}

.htmx-btn.htmx-request .label {
  display: none;
}

.htmx-btn.htmx-request .loading-indicator {
  display: flex;
}

/* -------------------------------------------------------------
 * generic htmx loading indicator
 * -----------------------------------------------------------*/
.htmx-indicator {
  opacity: 0;
  visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-in;
}

/* -------------------------------------------------------------
 * bootstrap tables
 * -----------------------------------------------------------*/
.h-400 {
  max-height: 400px;
}

/* =============================================================
 * DARK MODE OVERRIDES
 * Bootstrap 5.3+ handles most component colours automatically
 * via data-bs-theme="dark". The rules below only cover custom
 * variables and hardcoded colours used elsewhere in this file.
 * ============================================================*/
[data-bs-theme="dark"] {
  /* -- app custom properties -- */
  --background-color: #1a1d21;
  --default-color: #c9d1d9;
  --heading-color: #e6edf3;
  --accent-color: #f4c430;
  --surface-color: #1e2228;
  --contrast-color: #e6edf3;

  /* -- soften Bootstrap's dark palette --
   * The stock values (#212529 bg, #dee2e6 text, #495057 borders)
   * are high-contrast.  These overrides shift to a GitHub-style
   * softer dark that is easier on the eyes.  Because Tabulator's
   * Bootstrap 5 theme and all native <table> elements inherit
   * from these variables, everything benefits at once.
   * ---------------------------------------------------------- */
  --bs-body-bg: #1e2228;
  --bs-body-color: #c9d1d9;
  --bs-border-color: #3d434a;
  --bs-tertiary-bg: #272c33;
  --bs-secondary-bg: #2b3035;
  --bs-secondary-color: #8b949e;
  --bs-emphasis-color: #e6edf3;
  --bs-table-bg: #1e2228;
  --bs-table-color: #c9d1d9;
  --bs-table-border-color: #3d434a;
  --bs-table-striped-bg: #242930;
  --bs-table-striped-color: #c9d1d9;
  --bs-table-hover-bg: #2c323a;
  --bs-table-hover-color: #c9d1d9;
  --bs-table-active-bg: #2a3f5f;
  --bs-table-active-color: #c9d1d9;
}

/* --- supervisor status messages --- */
[data-bs-theme="dark"] .supervisor-status-message.is-success {
  background: #0d2818;
  color: #6ee7a0;
  border-color: #1a4731;
}

[data-bs-theme="dark"] .supervisor-status-message.is-warning {
  background: #332b00;
  color: #ffd54f;
  border-color: #5c4a00;
}

[data-bs-theme="dark"] .supervisor-status-message.is-error {
  background: #2d0f0f;
  color: #f88;
  border-color: #5c1a1a;
}

/* --- timesheet pending row --- */
[data-bs-theme="dark"] .timesheet-row-pending {
  border-left-color: #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.06),
    rgba(255, 193, 7, 0.06) 10px,
    rgba(255, 193, 7, 0.12) 10px,
    rgba(255, 193, 7, 0.12) 20px
  );
}

/* --- btn-outline-dark: swap to light tones in dark mode --- */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

/* --- theme toggle button --- */
#theme-toggle-btn {
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}

#theme-toggle-btn:hover {
  opacity: 0.75;
}

#theme-toggle-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(244, 196, 48, 0.45);
}

/* --- selectize overrides for dark mode --- */
[data-bs-theme="dark"] .selectize-input,
[data-bs-theme="dark"] .selectize-control.single .selectize-input.input-active {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input.full {
  background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .selectize-input.focus,
[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input.input-active.focus {
  border-color: #6ea8fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .selectize-input.dropdown-active::before {
  background: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input > input {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown,
[data-bs-theme="dark"] .selectize-dropdown.form-control {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active:not(.selected) {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active,
[data-bs-theme="dark"] .selectize-dropdown .selected {
  background-color: #0d6efd;
  color: #fff;
}

[data-bs-theme="dark"] .selectize-dropdown .option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .optgroup-header {
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .selectize-dropdown .create {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input > div {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input.disabled > div,
[data-bs-theme="dark"]
  .selectize-control.multi
  .selectize-input.disabled
  > div.active {
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .selectize-control .selectize-input.disabled {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow):after {
  border-color: var(--bs-body-color) transparent transparent transparent;
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow).dropdown-active:after {
  border-color: transparent transparent var(--bs-body-color) transparent;
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header {
  background: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header-close {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-clear_button .clear {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-remove_button .item .remove {
  border-left-color: var(--bs-border-color);
}

/* --- tabulator: softer dark mode ---
 * Tabulator's bootstrap5 theme hardcodes #212529 bg, #fff text,
 * and #4d5154 borders (many with !important) so the --bs-*
 * variable overrides above can't reach them.  We must override
 * every rule explicitly using the same values from our palette.
 * -----------------------------------------------------------*/
html[data-bs-theme="dark"] .tabulator {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header,
html[data-bs-theme="dark"] .tabulator:not(.thead-light) .tabulator-header {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator:not(.thead-light)
  .tabulator-header
  .tabulator-col {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* table-bordered variant: vertical column/cell separators */
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-header
  .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-tableholder
  .tabulator-table
  .tabulator-row
  .tabulator-cell {
  border-right-color: var(--bs-border-color);
}

/* frozen column edges */
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-left,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-right,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
  border-left-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="ascending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="descending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-top-color: var(--bs-body-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-header
    .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input:focus {
  background-color: var(--bs-secondary-bg);
  border-color: #6ea8fe;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-calcs-holder
  .tabulator-row {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row,
html[data-bs-theme="dark"] .tabulator .tabulator-cell {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* remove striped rows from all tabulator tables */
.tabulator .tabulator-row.tabulator-row-even {
  background-color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
    background-color: var(--bs-table-hover-bg);
  }

  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover .tabulator-cell {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected {
  background-color: var(--bs-table-active-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-calcs {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-row-header {
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder
  .tabulator-row {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-page:disabled {
  background: transparent;
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-footer
    .tabulator-page:not(.disabled):hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-emphasis-color);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-tableholder
  .tabulator-placeholder
  .tabulator-placeholder-contents {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .tabulator input {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-alert
  .tabulator-alert-msg.tabulator-alert-state-error {
  border-color: #f85149;
  color: #f85149;
}

html[data-bs-theme="dark"] .tabulator-popup-container {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list {
  background: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group {
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group span {
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator-menu
    .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator-menu .tabulator-menu-separator {
  border-color: var(--bs-border-color);
}

/* -------------------------------------------------------------
 * tabulator row highlights (theme-aware)
 * -----------------------------------------------------------*/
.tabulator .tabulator-row.tabulator-row-submitted,
.tabulator .tabulator-row.tabulator-row-submitted .tabulator-cell {
  background-color: #e8f5e9 !important;
}

.tabulator .tabulator-row.tabulator-row-total,
.tabulator .tabulator-row.tabulator-row-total .tabulator-cell {
  background-color: #f8f9fa !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-submitted,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-submitted
  .tabulator-cell {
  background-color: #1a3a2a !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-total,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-total
  .tabulator-cell {
  background-color: var(--bs-tertiary-bg) !important;
}