@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");

/* ------------------------------
   SAFE GLOBAL VARIABLES & BASICS
   ------------------------------ */


* html {
  --svg-icon-size: 20.0mm;
 
}

body {
  display: flex;
  flex-direction: column;
  color: var(--menu-bar-background);

}



label {
  color: grey;
  font-weight: bold;
  margin-left: -10px;
}

main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-layout {
  position: absolute;
  left: 0px;
  top: 0px;
  padding-top: 18px;
  padding-bottom: 40px;
  padding-left: 8px;
  padding-right: 8px;
  width: 160px;
  height: 95px;
  text-align: center;
  cursor: hand;

}

.logo-image {
  width: 90px;
  height: 80px;
  padding-bottom: 10px;
  margin-top: -10px;
}

h1 {
  color: #e74c3c;
  margin-bottom: 0.5rem;
}


:root,
.theme-light {

  --menu-bar-background: var(--font-color); 
  --menu-bar-background-accent: #5a82cd;
  --carousel-indicator-bar-background: #f2f2f2;
  --color-menu-dark: var(--menu-bar-background);
  --color-page-background: #ffffff;
  --color-primary: #9db7f3;
  --color-widget-background: #8091e8;
  --color-widget-accent: #0479e7;
  --color-widget-font: #F2F2EF;
  --color-accent-light: #ffffff;
  --color-accent-hover: #c7dbf5;
  --color-accent-selected: #b6cdf3;
  --color-accent-not-selected: #f2f2f2;
  --color-accent-dark: #dde1fcf7;
  --sub-heading-font-color: #1c213c;
  --side-menu-background-color: var(--color-accent);
  --side-menu-font-color: var(--font-color);
  --question-heading-color: #7498ed;
  --font-color: #4f7eb7;
  --font-color-hover: #6384a1;
  --color-accent: #efefef;
  --color-inactive: rgb(230, 228, 228);
  --color-key-heading-background: #e5f6ff;
  --font-color-lighter: #4d94c0;
  --tooltip-font-color: #F2F2EF;
  --hamburger-menu-background: var(--color-widget-accent);
  --hamburger-menu-background-light: var(--color-accent-light);
  --hamburger-menu-hover-color: #59aef3;
  --hamburger-menu-font-color: #1c213c;
  --honeycomb-low-color: #E3F2FD;
  --honeycomb-moderate-color: #BBDEFB;
  --honeycomb-high-color: #90CAF9;
  --honeycomb-veryhigh-color: #64B5F6;
  --icon-backcolor: #030D3A;
  --icon-level1-forecolor: #F2F2EF;
  --icon-level1-backcolor: #2c484f;
  --icon-level2-forecolor: #F2F2EF;
  --icon-level2-backcolor: #1c3862;
  --status-acceptable-backcolor: #BBDEFB;
  --status-not-acceptable-backcolor: #FF8A65;
  --status-incomplete-backcolor: #ffc38c;
  --status-not-applicable-backcolor: #E0E0E0;
  --status-not-answered-backcolor: #9575CD;
  --status-low-backcolor: #f2de28;
  --status-moderate-backcolor: #f19812;
  --status-moderate-text-color: #fc7202;
  --status-not-acceptable-text-color: #FF8A65;
  --status-acceptable-text-color: #025502;
  --status-high-backcolor: #fa3f06;
  --status-veryhigh-backcolor: purple;
  --status-critical-backcolor: purple;
  --status-not-answered-backcolor-light: rgb(236, 217, 236);
  --status-low-importance-backcolor: #FFF59D;
  --world-map-ocean-color: #d5e5f8;

  --hawkstream-logo-eye: #FF8181;
  --hawk-primary-light: #f3c9c9;
  --hawk-primary-accent: #ab4f51;
  --hawk-highlight: #f7a24b;
  --hawk-highlight-bg: #fff3e0;
  --hawk-text-light: #ffffff;
  --hawk-text-dark: #000047;
  --hawk-acceptable: #3a867f;

  /* Badge colors */
  --status-not-applicable-darker-backcolor: #f1f3f5;
  --status-not-applicable-darker-text-color: #495057;
  --status-not-applicable-darker-border-color: #adb5bd;

  --status-low-risk-badge-backcolor: #d1e7dd;
--status-low-risk-badge-text-color: #0f5132;
--status-low-risk-badge-border-color: #a3cfbb;

--status-moderate-risk-badge-backcolor: #fff3cd;
--status-moderate-risk-badge-text-color: #664d03;
--status-moderate-risk-badge-border-color: #ffda6a;

--status-high-risk-badge-backcolor: #f8d7da;
--status-high-risk-badge-text-color: #842029;
--status-high-risk-badge-border-color: #f1aeb5;

--status-severe-risk-badge-backcolor: #e9d5ff;
--status-severe-risk-badge-text-color: #581c87;
--status-severe-risk-badge-border-color: #c084fc;
}

/* ------------------------------
   BASE TYPOGRAPHY & BODY
   ------------------------------ */
body {
  font-family: Calibri, sans-serif;
  background-color: var(--color-page-background);
  color: var(--menu-bar-background);

}

label {
  color: grey;
  font-weight: bold;
}



/* =====================================================================
   HEADER (LIGHT)
===================================================================== */
header {
  background-color: #ffffff;
  border-bottom: 2px solid var(--hawk-primary-light);
  color: var(--menu-bar-background);
}

.text-hawk {
  color: var(--menu-bar-background) !important;
}

.border-hawk {
  border-color: var(--menu-bar-background) !important;
}

.icon-accent {
  filter: invert(34%) sepia(80%) saturate(300%) hue-rotate(-5deg) brightness(1.1);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.icon-accent:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

header .nav-link {
  color: var(--menu-bar-background);
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

header .nav-link:hover,
header .nav-link.active {
  color: var(--hawk-primary-accent);
  text-decoration: underline;
}

header select {
  border: 1px solid var(--hawk-primary-light);
  background-color: #fff;
  color: var(--hawk-primary-accent);
  font-size: 0.85rem;
}

header select:focus {
  border-color: var(--menu-bar-background);
  box-shadow: 0 0 0 0.15rem rgba(220, 81, 82, 0.25);
}

@media (max-width: 992px) {

  header .d-flex.align-items-center,
  header .nav {
    flex-wrap: wrap;
  }

  header select {
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* Scopes the theme to this menu */
.dropdown-menu {
  --bs-dropdown-link-color: var(--menu-bar-background);
  --bs-dropdown-link-hover-color: var(--menu-bar-background);
  --bs-dropdown-link-active-color: var(--menu-bar-background);

}

.dropdown-menu a.dropdown-item {
  color: var(--menu-bar-background) !important;
}

.navbar .nav-link,
.dropdown-menu .dropdown-item {
  font-size: 1rem;
  /* default ~16px */

}


.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus,
.dropdown-menu a.dropdown-item.active {
  color: var(--menu-bar-background) !important;
  background-color: transparent;

  /* optional */
}

/* If using navbar-light/dark, they can override .nav-link */
.navbar .nav-link.dropdown-toggle {
  color: var(--menu-bar-background) !important;
}



footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}


/* =====================================================================
   FOOTER (LIGHT)
===================================================================== */


footer a {
  color: var(--menu-bar-background);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-accent-light);
  text-decoration: underline;
}

footer .version-tag {
  color: var(--color-accent-light);
  font-weight: 600;
}

@media (max-width: 100%) {
  footer .container-fluid {
    flex-direction: column !important;
    text-align: center;
    gap: 0.25rem;
  }
}

/* Consistent Hawkstream Green Tick Across All Pipelines */
.hawk-tick {
  color: var(--hawk-acceptable) !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.hawk-tick svg {
  stroke: var(--hawk-acceptable) !important;
  color: var(--hawk-acceptable) !important;
}

.btn-custom {
  background-color: var(--menu-bar-background);
  /* your custom color */
  color: #fff;
  /* text color for contrast */
}

.btn-custom:hover {
  background-color: var(--menu-bar-background-accent);
  /* optional hover effect */
  color: #fff;
}

.modal-body-margins {
  padding: 3rem !important;
  /* or whatever you want */
}

.fit-text {
  display: block;
  /* makes the div wrap tightly around its contents */
  padding: 3px;
  /* add your desired padding */
  /* optional */
  border-radius: 6px;
  /* optional */
}

/* ============================================================
   MODAL HEADER ICON ALIGNMENT
   HS-MARKER:MODAL-HEADER-ICON-ALIGNMENT-V1
============================================================ */

.modal-title  {
    font-size: 1.75rem;
    
}

.modal-title .material-symbols-outlined {
   font-size: 2rem;
    
    vertical-align: -0.4rem;
}