@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


body {
  font-family: "Roboto", Arial;
}

.responsive 
{
	width: 100%;
	height: auto;
}

h2 {
  font-weight: 600;
  color: darkblue;
  margin-bottom: 20px;
  padding-left: 10px;
  text-transform: uppercase;
}

h3 {
  font-weight: 600;
  color: darkblue;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* styles hoofdmenu */
.nav-link{
  color:#FFFFFF !important;
	font-size:18px;
}

/* styles hoofdmenu */
.nav-link:hover {
  color:#f3d009 !important;
  font-weight: bold;
}

/* styles hoofdmenu */
/*
.navbar {
  padding-top: 3px;
  padding-bottom: 3px;
}
*/

/* styles hoofdmenu */
.navbar-brand {
  padding-top: 0;
  padding-bottom:0;
} 

.navbar-brand img {
  width: 200px;
  border: none;
  margin: 0;
} 

header {
  border: 0px;
  margin: 0px;
  padding: 0px;
  border-radius:0px;
  width: 100%;
}

table {
  margin-bottom: 10px;
}

.grid-container {
  max-width: 1000px;
  display: grid;
  grid-template-columns:auto 1fr;
  column-gap: 0;
  row-gap: 2px;
  margin-bottom: 30px;
  margin-top:0;
}

.grid-item {
  display: grid; /* wordt ingesteld als grid om de items vertikaal te aligneren */
  align-items: center;  /* wordt ingesteld als grid om de items vertikaal te aligneren */
  padding: 2px 5px 2px 2px;
  background-color: #f5f5f5; 
}

.grid-container-activit {
  display: grid;
  grid-template-columns:auto 1fr;
  column-gap: 0;
  row-gap: 2px;  
}

.grid-item-activit {
  padding: 0 5px 0 2px;  
  background-color: #f5f5f5;
  text-align: right;
}

thead {
  background-color: #007BFF;
  color:#FFFFFF;
}

.sponsors-div {
  display: block;
  margin-top: 0px;
  padding: 20px 0px 20px 0px;
  margin-bottom: 10px;
}

.media-div { /* opmaak facebook en strava logo*/
  display: block;
  margin-top: 10px;
  padding: 20px 0px 20px 0px;
  margin-bottom: 10px;
}

.admin-menu-div {
  background-color: #000055;
  padding-left: 230px;
}

.footer {
  background-color:#000000; 
  color:#bbb; 
  height:90px;
  text-align: center;
  margin-top: 40px;
}

.footer a {
  color:#bbb;
}

.footer a:hover {
  color:#fad507;
  text-decoration: none;
}

img {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  max-width: 100%;
}

.logo:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  transform: scale(1.02); 
  transition: transform .2s; /* Animation */
  transition-duration: 0.4s;  /* zorgt voor enige duur van het hover effect*/
  transition-delay: 0.1s;     /* zorgt voor enige vertraging bij de start van het hover effect*/
}

img.reset {
  border: 0px;
  padding: 0px;
  border-radius: 0px;
  box-shadow: none;
}



input::placeholder {
  opacity: 0.5 !important;
}

.box-shadow {
  box-shadow: 1px 5px 8px lightgrey;
}

/* styles loader op alle paginas */
#preloader
  {
    background: #fff url(../afbeeldingen/icons/loader.gif) no-repeat center center;
    background-size: 8%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 9999; /* Onder de loader, boven de rest van de content */
  }

  /* blank het menu tijdens het lopen van de loader */
  #preloader .container-fluid {
    display: none;
  }

 /* hou het admin menu vast net onder het leden menu - sticky*/
  @supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top2 {
      position: -webkit-sticky;
      position: sticky;
      top: 62px;
      z-index: 1019;
    }
  } 

  /* Zorg dat dropdown ook opent bij hover */
      .dropdown:hover > .dropdown-menu {
        display: block;
      }

      /* Submenu styling */
      .dropdown-submenu {
        position: relative;
      }

      .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
        display: none;
      }

      /* Submenu openen bij hover */
      .dropdown-submenu:hover > .dropdown-menu {
        display: block;
      }



  /* wijzig de left padding van het admin menu bij schermresoluties < 1500 px */
  @media only screen and (max-width: 1500px) {
    .admin-menu-div {
      padding-left: 50px;
    }




  }