/* https://www.asciiart.eu/text-to-ascii-art */

/*   ____ _       _           _         ____ ____ ____   */
/*  / ___| | ___ | |__   __ _| | ___   / ___/ ___/ ___|  */
/* | |  _| |/ _ \| '_ \ / _` | |/ _ \ | |   \___ \___ \  */
/* | |_| | | (_) | |_) | (_| | |  __/ | |___ ___) |__) | */
/*  \____|_|\___/|_.__/ \__,_|_|\___|  \____|____/____/  */

main {
  padding-top: 0;
  /* Navbar is sticky (in document flow), geen extra padding nodig */
  flex: 1 0 auto;
  /* flex-grow: 1, flex-shrink: 0, flex-basis: auto — voorkomt krimpen van content */
  background: linear-gradient(
    to bottom, 
    var(--bs-primary), 
    #ffffff /* lichtere tint */
  );
}



html {
  scroll-padding-top: 70px;
  /* Zorg dat scrollbars verschijnen wanneer content overflowt (WCAG 1.4.10) */
  overflow: auto;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Ensure the body fills the viewport height */
}

/* Background overlay */
/* Background overlay */
.background-overlay {
  position: relative;
  width: 100%;
  max-width: 1080px;
  background: rgba(255, 255, 255, 0.8); /* wit met 80% dekking */
  padding: 30px; /* Optional padding */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  margin: 20px auto;
  border-radius: 20px;
}


ion-icon {
  pointer-events: none;
}

.bg-wit {
  background-color: #fff;
  color: #1F5181;
}

.card-label{
  font-size: 16px;
  margin-top: 10px;
  line-height: 24px;
  color: #212529;
}


/*  _   _                _            */
/* | | | | ___  __ _  __| | ___ _ __  */
/* | |_| |/ _ \/ _` |/ _` |/ _ \ '__| */
/* |  _  |  __/ (_| | (_| |  __/ |    */
/* |_| |_|\___|\__,_|\__,_|\___|_|    */


.navbar-custom {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  align-items: center;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 1030;
  flex-wrap: wrap;
}

.back-button-container {
  flex-shrink: 0;
  /* Prevents the back button container from shrinking */
  width: 50px;
  /* Static width to reserve space whether the button is there or not */
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 3px;
  margin-left: 10px;
  margin-right: 0px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background-color: #FFF;
}

/* Skip-link: verborgen tot focus via toetsenbord */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background-color: var(--bs-primary);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--bs-primary);
  outline-offset: -3px;
  color: #ffffff;
}

#main-content:focus {
  outline: none;
}

.logo {
  margin-top: 0px;
  padding-left: 0px;
  /* Adjust as necessary to position the logo where you want it relative to the end of the back button container */
  margin-left: 5px;
}

.logo img {
  height: 50px;
  width: auto;
}

.back-button i {
  font-size: 25px;
  /* Increased size of the icon */
  color: #129e99;
  /* You can change the color if needed */
}

.back-button:hover i {
  color: var(--bs-primary);
  /* Change icon color to white on hover */
}

.navigation-box {
  position: relative;
}

.navbar-right {
  display: flex;
  align-items: center;
  /* Zorg dat alles verticaal gecentreerd is */
  gap: 10px;
  /* Optioneel: Ruimte tussen de elementen */
}

.navbar-left {
  display: flex;
  align-items: center;
  /* Zorg dat alles verticaal gecentreerd is */
}


.navigation {
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 60px;
  height: auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.navigation.active {
  min-width: 250px;
  height: 100%;
}

.navigation .userBx {
  position: relative;
  width: calc(100% - 60px);
  /* Set initial width to fill space minus toggle button */
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  visibility: hidden;
  /* Initially hidden */
  transform: translateX(100%);
  /* Start off-screen to the right */
  transition: transform 0.5s ease;
  /* Animate transform and delay visibility */
  z-index: 1;
}

.navigation.active .userBx {
  transform: translateX(0%);
  /* Move into view */
  visibility: visible;
  /* Make visible immediately when transitioning */
  padding-left: 20px;
  z-index: 1;
}

.navigation .userBx .nav_username {
  color: #129e99;
  font-size: 0.9em;
  display: block;
  margin: 0;
}

.navigation .userBx .nav_rol {
  color: #555;
  font-size: 0.6em;
  display: block;
}

.menu {
  position: absolute;
  width: 100%;
  background: #fff;
  padding-left: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.3s ease; /* Combineer transform en box-shadow */
  /* Transition for moving down */
  transform: translateY(-100%);
  /* Start hidden above */
  visibility: hidden;
  z-index: 0;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
}

.menu.with-shadow {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 12px;   /* linker onderhoek */
  border-bottom-right-radius: 12px;  /* rechter onderhoek */
}





.menu li {
  list-style: none;
  padding-left: 0.5em;
  margin-bottom: 1em;
}

.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 1em;
  text-decoration: none;
  color: #808080;
  background-color: #ffffff;
}

.menu li a i {
  min-width: 1.5em;
  text-align: center;
}

.menu li a:hover {
  color: var(--bs-primary);
}

.menu li a ion-icon {
  font-size: 1.5em;
}

.navigation .menuToggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  border: none;
  box-shadow: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.navigation .menuToggle:focus {
  outline: none;
  box-shadow: none;
}

.navigation .menuToggle:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: -3px;
}

.navigation .menuToggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #808080;
  transform: translateY(-10px);
  box-shadow: 0 10px #129e99;
}

.navigation .menuToggle::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #129e99;
  transform: translateY(10px);
}

.navigation .menuToggle:hover::before {
  background: var(--bs-primary);
  /* Change the color to red on hover */
  box-shadow: 0 10px var(--bs-primary);
}

.navigation .menuToggle:hover::after {
  background: var(--bs-primary);
  /* Change the color to red on hover */
}

.navigation.active .menuToggle::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 #129e99;
}

.navigation.active .menuToggle::after {
  transform: translateY(0px) rotate(-45deg);
}

.navigation.active .menu {
  transition: transform 0.5s ease;
  /* Transition for moving down */
  transform: translateY(0);
  /* Slide down into view */
  visibility: visible;
  z-index: 0;
}

.model-pill {
  padding: 10px 20px !important;
  font-size: 1rem;
  margin-left: 10px;
  /* Add margin to separate the pills */
}

.org-pill {
  padding: 10px 20px !important;
  font-size: 1rem;
}

.org-switch-link {
  text-decoration: none;
  color: inherit;
}

.org-switch-link:hover .org-pill {
  opacity: 0.85;
  cursor: pointer;
}


/* | |    __ _ _ __   __| (_)_ __   __ _ ___ _ __   __ _  __ _(_)_ __   __ _  */
/* | |   / _` | '_ \ / _` | | '_ \ / _` / __| '_ \ / _` |/ _` | | '_ \ / _` | */
/* | |__| (_| | | | | (_| | | | | | (_| \__ \ |_) | (_| | (_| | | | | | (_| | */
/* |_____\__,_|_| |_|\__,_|_|_| |_|\__, |___/ .__/ \__,_|\__, |_|_| |_|\__,_| */
/*  / ___| ___| |__  _ __ _   _(_) |___/__ _|_|          |___/                */
/* | |  _ / _ \ '_ \| '__| | | | | |/ / _ \ '__|                              */
/* | |_| |  __/ |_) | |  | |_| | |   <  __/ |                                 */
/*  \____|\___|_.__/|_|   \__,_|_|_|\_\___|_|                                 */
/* Landingspagina gebruiker */

/* Header line styling */
.header-line {
  width: 40%;
  height: 3px;
  background-color:#15AEA4
}

/* Intro text styling */
.intro-text {
  max-width: 600px;
}

/* Card header styling for progress cards */
.card-header {
  background-color: #156082;
  /* Adjust to match your design */
}



/* ___       _                                     */
/*|_ _|_ __ | | ___   __ _ _ __   __ _  __ _  ___  */
/* | || '_ \| |/ _ \ / _` | '_ \ / _` |/ _` |/ _ \ */
/* | || | | | | (_) | (_| | |_) | (_| | (_| |  __/ */
/*|___|_| |_|_|\___/ \__, | .__/ \__,_|\__, |\___| */
/*                   |___/|_|          |___/       */

.Login {
  border-radius: 20px;
  background: 
    linear-gradient(
      rgba(var(--bs-primary-rgb), 0.4),   /* overlay in jouw primary kleur */
      rgba(var(--bs-primary-rgb), 0.4)
    ),
    url(../images/Rijksoverheid.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 100px auto 0;
  max-width: 1080px;
}


.Login section {
  width: 50%;
  background-color: #FFF;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 50px;
  box-shadow: 
    1.057px 1.52px 3.148px 0px rgba(0, 0, 0, 0.02),
    4.652px 6.689px 6.519px 0px rgba(0, 0, 0, 0.03),
    11.42px 16.419px 13px 0px rgba(0, 0, 0, 0.04),
    21.993px 31.622px 25.481px 0px rgba(0, 0, 0, 0.04),
    37.008px 53.211px 46.852px 0px rgba(0, 0, 0, 0.05),
    57.098px 82.097px 80px 0px rgba(0, 0, 0, 0.07);
}

/* Responsieve login bij hoge zoom (WCAG 1.4.10) */
@media (max-width: 600px) {
  .Login {
    margin: 20px auto 0;
    border-radius: 10px;
    max-width: 100%;
  }

  .Login section {
    width: 100%;
    border-radius: 10px;
    padding: 20px;
  }
}

.text {
  font-family: sans-serif !important;
}

body {
  font-family: sans-serif !important;
}




.dropdown_informatie {
  position: absolute;
  z-index:9999;
  display: none;
  background-color: #f9f9f9;
  width: 35%;
  left: 50%;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 0px;
  padding: 10px;
  padding-right: 20px;
  min-height: 80px;
  text-align: left;
}


.close-button {
  background-color: transparent; /* Transparent background for a clean look */
  border: none; /* Remove default button border */
  color: #ffffff; 
  font-size: 1.2rem; /* Larger size for better visibility */
  font-weight: bold; /* Bold for emphasis */
  cursor: pointer; /* Pointer cursor to indicate it's clickable */
  outline: none; /* Remove focus outline (we'll add a custom one) */
  position: absolute; /* For custom styling enhancements */
  padding: 0.5rem; /* Add padding for better click area */
  border-radius: 50%; /* Circular button */
  top: 2px;
  right: 5px;
  transition: transform 0.3s ease; /* Smooth hover effects */
}

.close-button:hover {
  transform: scale(1.3); /* Slightly enlarge button on hover */
}

.close-button:focus {
  outline: 2px solid var(--bs-primary); /* Blue outline for accessibility */
  outline-offset: 2px;
}

.close-button:active {
  transform: scale(0.9); /* Shrink slightly when clicked */
}

.password-rules {
    display: block;
    margin-top: 0;
    font-size: 0.85rem;
    color: #666;
}

.nav-tabs .nav-link {
    color: #ffffff;             
    background-color:var(--bs-primary);   
    border: 1px solid transparent;
    margin-right: 4px;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
}
.nav-tabs .nav-link:hover {
    color: #000000;            
    background-color: #ffffff;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: #ffffff;
    font-weight: bold;
}
footer{
  background-color: #D9ECEC;
}
.footer-container{
  max-width: 1080px;
  width: 100%;
  font-size: 0.9em;
  margin: auto;
}
.footer-container a{
  color: var(--bs-primary);
  text-decoration: none;
}
.footer-container a:hover{
  text-decoration: underline;
}
.small-text{
  font-size: 0.8em;
}
.background-overlay p a {
  color: var(--bs-primary);
  text-decoration: none;
}
.background-overlay p a:hover{
  text-decoration: underline;
}
.validation-error{
  margin-top: 5px;
}
.tooltip-inner p {
  margin-bottom: 0;
}

.slider-disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.slider-disabled::-webkit-slider-thumb {
    background: #bdbdbd;
}

.slider-disabled::-moz-range-thumb {
    background: #bdbdbd;
}

.slider-disabled::-webkit-slider-runnable-track {
    background: #d6d6d6;
}

.slider-disabled::-moz-range-track {
    background: #d6d6d6;
}


/* Zorg dat de nav-container responsief meegroeit */
.nav-container {
  width: 100%;
}


/* =====================================================
   Responsive / Reflow — WCAG 1.4.10
   Bij 400% zoom op 1280x1024 is het effectieve
   viewport ~320px breed. Onderstaande regels zorgen
   dat de navigatie zichtbaar en bereikbaar blijft.
   ===================================================== */

/* Zorg dat de sticky navbar verticaal kan meegroeien
   en horizontaal scrollbaar is als de inhoud niet past */
@media (max-width: 480px) {

  /* Navbar: laat hoogte automatisch meegroeien, sta
     horizontale scroll toe als fallback */
  .navbar-custom {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
  }

  /* Container in de navbar: vul volledige breedte */
  .navbar-custom > .container,
  .navbar-custom > .nav-container {
    max-width: 100% !important;
    flex-wrap: wrap;
    padding: 4px 8px !important;
  }

  /* Linker- en rechterkant: wrap als het niet past */
  .navbar-left,
  .navbar-right {
    flex-wrap: wrap;
    gap: 4px;
  }

  .navbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  /* Logo kleiner bij hoog zoomniveau */
  .logo img {
    height: 36px;
  }

  /* Pills: kleiner en in staat om te wrappen */
  .model-pill,
  .org-pill {
    padding: 4px 10px !important;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .modelselectedtag {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Hamburger menu: iets kleiner */
  .navigation .menuToggle {
    width: 48px;
    height: 48px;
  }

  /* Dropdown menu: beperk hoogte en maak scrollbaar
     zodat het niet buiten het viewport valt */
  .navigation.active .menu,
  .menu {
    max-height: 70vh;
    overflow-y: auto;
    width: 100vw;
    left: 0;
    right: 0;
    position: fixed;
    top: auto;
    transform: none !important;
    z-index: 9999;
    padding-right: 20px;
    border-radius: 0;
  }

  /* Wanneer menu niet actief is: verberg het via
     visibility, zonder transform */
  .navigation:not(.active) .menu {
    visibility: hidden;
    display: none;
  }

  .navigation.active .menu {
    visibility: visible !important;
    display: block;
  }

  /* Pas main padding aan (navbar is sticky, neemt eigen ruimte in) */
  main {
    padding-top: 0;
  }

  html {
    scroll-padding-top: 80px;
  }

  /* navigation-box: mag niet clippen */
  .navigation-box {
    overflow: visible;
  }

  .navigation {
    overflow: visible;
  }

  /* Broodkruimels en content: voorkom horizontale overflow */
  .background-overlay {
    max-width: 100%;
    padding: 12px;
    margin: 10px auto;
    border-radius: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Extra smal (bij extreme zoom, ~200px effectief) */
@media (max-width: 400px) {

  .navbar-custom {
    min-height: 40px !important;
    height: auto !important;
    padding: 2px 0 !important;
    flex-wrap: nowrap !important;
  }

  .navbar-custom > .container,
  .navbar-custom > .nav-container,
  .navbar-custom .container.nav-container {
    flex-wrap: nowrap !important;
    padding: 2px 4px !important;
    max-width: 100% !important;
  }

  .navbar-left,
  .navbar-right {
    flex-wrap: nowrap !important;
    gap: 2px;
  }

  .navbar-left {
    flex-shrink: 0;
  }

  .navbar-right {
    flex-shrink: 1;
    overflow: hidden;
  }

  /* Verberg de model/org pills bij extreme zoom - niet essentieel voor navigatie */
  .model-pill,
  .org-pill,
  .modelselectedtag {
    display: none !important;
  }

  .logo img {
    height: 28px;
  }

  /* Hamburger menu compacter */
  .navigation .menuToggle {
    width: 36px;
    height: 36px;
  }

  .navigation {
    width: 40px;
  }

  .back-button-container {
    width: 30px;
  }
}