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

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

main {
  padding-top: 70px;
  /* Add top padding to prevent content from being hidden under the navigation */
  flex: 1;
  background: var(--bs-primary)
}


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 {
  position: relative;
  width: 100%;
  max-width: 1080px;
  background: #ffffff;
  /* Light overlay with 70% opacity */
  padding: 30px;
  /* Optional padding */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow effect */
  margin: 20px auto;
}

ion-icon {
  pointer-events: none;
}

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




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


.navbar-custom {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  align-items: center;
  height: 60px;
}

.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;
}

.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: #151957;
  /* 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: #151957;
  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 6px rgba(0, 0, 0, 0.1); /* Example box-shadow */
}



.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: #151957;
}

.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;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

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

.navigation .menuToggle::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #151957;
  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 #151957;
}

.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;
}


/* | |    __ _ _ __   __| (_)_ __   __ _ ___ _ __   __ _  __ _(_)_ __   __ _  */
/* | |   / _` | '_ \ / _` | | '_ \ / _` / __| '_ \ / _` |/ _` | | '_ \ / _` | */
/* | |__| (_| | | | | (_| | | | | | (_| \__ \ |_) | (_| | (_| | | | | | (_| | */
/* |_____\__,_|_| |_|\__,_|_|_| |_|\__, |___/ .__/ \__,_|\__, |_|_| |_|\__,_| */
/*  / ___| ___| |__  _ __ _   _(_) |___/__ _|_|          |___/                */
/* | |  _ / _ \ '_ \| '__| | | | | |/ / _ \ '__|                              */
/* | |_| |  __/ |_) | |  | |_| | |   <  __/ |                                 */
/*  \____|\___|_.__/|_|   \__,_|_|_|\_\___|_|                                 */
/* 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: 0px;
  background: url(../images/Rijksoverheid.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 15vh;
  margin: 0px auto;
  margin-top: 100px;
  max-width: 1080px;
}

.Login section {
  width: 50%;
  background-color: #FFF;
  border-radius: 0px;
  padding: 50px 50px 50px 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);
}

.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: var(--bs-primary); /* Dark gray color for the close icon */
  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 */
}