@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

:root {
  /* Colors - Background & Surface */
  --app-background-color: #f2f3f4;
  --background-color: #e7e7e7;
  --disabled-control-background-color: #CDCDD4;
  --disabled-control-color: #efeff6;
  --footer-background-color: #33355e;
  --grid-even-row-color: #e8f0f8;
  --grid-odd-row-color: #FFFFFF;
  --title-bar-background-color: #ffffff;
  --tool-tip-background-color: hsla(213, 85%, 88%, 0.575);
  --white-background: #ffffff;

  /* Colors - Text & Foreground */
  --text-color: #333;
  --label-text-color: hsl(240, 1%, 30%);
  --hint-text-color: #666669;
  --agent-tools-text-color: #000000;
  --disabled-control-text-color: #fff;
  --primary-text-color: #ffffff;
  --text-on-secondary-color: #fff;
  --text-on-tertiary-color: #fff;

  /* Colors - Semantic States */
  --error-color: #bb0202;
  --success-color: #0ead69;
  --warning-color: #ffd23f;
  --info-color: #4f517d;
  --info-icon-color: #1a1c4a;

  /* Colors - Primary Theme */
  --primary-color: #1a1c4a;
  --primary-hover-color: hsl(238, 19%, 72%);
  --primary-button-background-color: #1a1c4a;
  --primary-button-hover-color: #48496e;

  /* Colors - Secondary Theme */
  --secondary-color: #006580;
  --secondary-hover-color: hsla(178, 100%, 37%, 0.5);

  /* Colors - Tertiary Theme */
  --tertiary-color: #CE0E2D;
  --tertiary-hover-color: #F4D7C5;

  /* Colors - Interactive & Borders */
  --border-color: #ced4da;
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --focus-ring-color: rgba(13, 110, 253, 0.25);
  --focus-ring-color-inverted: hsl(192, 26%, 77%);
  --sidenav-hover-color: #48496E;

  /* Typography - Font Family */
  --font-family-mont: "Montserrat", sans-serif;

  /* Typography - Font Size */
  --font-size: 1rem;
  --label-font-size: 1rem;
  --hint-font-size: 0.85rem;
  --font-size-medium: 1.25rem;
  --font-size-large: 1.5rem;
  --font-size-xlarge: 1.75rem;
  --font-size-xxlarge: 2rem;

  /* Typography - Font Weight */
  --font-weight-bold: bold;
  --font-weight-title: 500;
  --font-weight-sub-title: 400;
  --font-weight-header: 600;

  /* Typography - Line Height */
  --line-height: 1.5;

  /* Spacing & Borders */
  --border: 1px solid var(--border-color);
  --border-radius: 6px;
  --focus-ring-width: 0.25rem;

  /* Shadows & Effects */
  --box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  /* Layout & Dimensions */
  --logo-width: 150px;
  --logo-height: auto;
  --eapp-banner-top: 5rem;
}

  :root[data-theme="GSL"] {
    --footer-background-color: #58060C;
    --inactive-tab-color: #00539B;
    --info-icon-color: #3D5B65;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --menu-background-color: #58060C;
    --menu-hover-accent-border: #B51F1F;
    --popup-background-color: #796569;
    --primary-button-background-color: #deb408;
    --primary-button-hover-color: #fbe488;
    --primary-color: #58060C;
    --primary-text-color: #FFFFFF;
    --text-color: #000000;
    --title-bar-background-color: #FFFFFF;
    --logo-width: auto;
    --logo-height: 100px;
    --sidenav-hover-color: rgba(248, 231, 215, 0.5);
    --eapp-banner-top: 7.5rem;
  }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  /* font-size: var(--font-size-xxlarge); */
  font-weight: 600;
}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  background-color: var(--tool-tip-background-color);
  color: var(--text-color);
  font-size: var(--hint-font-size);
  position: absolute;
  padding: 1px 5px 2px 5px;
  bottom: -1.6em;
  left: 100%;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #949494;
  opacity: 0;
  border: var(--border);
  border-radius: var(--border-radius);
  font-variant: normal;
  z-index: 99999;
  visibility: hidden;
}

[data-title] {
  position: relative;
}

.logo-image {
  height: var(--logo-height);
  width: var(--logo-width);
}