/* Bestaande CSS voor fonts, badges en andere componenten */

/* Tabs Styling */
.md-tabs {
  background-color: #01689b;
  color: white !important;
  height: 75px;
}

.md-tabs .md-grid {
  background-color: #01689b;
  color: white;
}

.md-tabs__item--active {
  background-color: #01689b;
}

.md-header .md-icon svg {
  fill: #01689b;
}

.md-tabs__link {
  text-decoration:none;
  color: #FFFFFF;
  opacity: 100%;
  display: block;      /* Maakt de <a> een blok-element */
  width: 100%;         /* Vul de volledige breedte van de <li> */
  height: 100%;        /* Vul de volledige hoogte van de <li> */
  text-align: center;  /* Optioneel, zorgt dat tekst gecentreerd blijft */
  font-size: 1.2rem;
  padding-top: 5px;
}

@media (min-width: 1220px) {
  .md-tabs__link {
    font-size: 22px;
    padding-top: 9px;
  }

  .md-tabs__item {
    height: 3.7rem;
  }
}

@media (min-width: 1600px) {
  .md-tabs__link {
    font-size: 25px;
    padding-top: 3px;
  }

  .md-tabs__item {
    height: 2.7rem;
  }
}

@media (min-width: 2000px) {
  .md-tabs__link {
    font-size: 25px;
    padding-top: 2px;
  }

  .md-tabs__item {
    height: 2.7rem;
  }
}

/* Header Styling */
.md-header {
  background-color: white;
  height: auto;
  align-content: center;
}

h1{
  color: #01689b !important;
}

.md-header__inner {
  height: 125px;
}

.md-header--shadow {
  box-shadow: none;
}

.md-header__button.md-logo img {
  height: 50px; /* Adjust to the desired height */
  width: auto; /* Keeps the aspect ratio */
}

.md-header__topic {
  display: none;
}

/* Ensure hover effect is applied to the link itself */
.md-tabs__list .md-tabs__item .md-tabs__link:hover {
  color: #fff !important; /* Same color as active */
  background-color: #01689b !important;
}

/* Apply color and background on both link and item on hover */
.md-tabs__item:hover,
.md-tabs__item:hover .md-tabs__link,
.md-tabs__link:hover {
  color: #fff !important; /* Set text color to blue */
  background-color: #01689b !important; /* Set background color to light blue */
}

.md-tabs__item:hover .md-tabs__link {
  color: #fff !important; /* Zorgt ervoor dat de link blauw blijft als je over het tab-item zweeft */
}

.md-tabs__item:hover {
  background-color: #01689b; /* Achtergrondkleur bij hover op het hele tab-item */
  color: #fff !important;
}

/* Apply hover effect to the tab item */
.md-tabs__item:hover {
  background-color: #01689b !important;
  color: #fff !important;
}
/* Active tab styling */
.md-tabs .md-tabs__list .md-tabs__item--active .md-tabs__link {
  color: #fff !important; /* Active color */
  background-color: #01689b !important; /* Active background */
}

.md-search__input{
  background: #fff;
  color: #01689b;
  border: #01689b solid 1px;
  border-radius: 5px;
}

.md-search__form{
  color: #01689b;
}

.md-search__input::placeholder {
  color: #333333; /* Set your desired color */
  opacity: 1; /* Ensures the color appears as expected */
  font-size: .8rem;
  font-family: "ROsanswebtextregular" !important;
}

.md-search__input+.md-search__icon{
  color: #333333;
}

.md-search__suggest{
  color: #01689b;
}


.md-header__source{
  color: #01689b;
}

.md-search__overlay{
  color: #01689b;
}

.md-typeset a {
  color: #01689b;
}

.md-ellipsis{
  color: #01689b;
}

:root {
  --md-typeset-a-color: #01689b;
}

.md-nav__title{
  color: #01689b;
}

.md-nav--primary .md-nav__title[for=__drawer] {
  background-color: #FFF;
  color: #FFF;
  font-weight: 700;
}

@media screen and (max-width: 59.9844em) {
  .md-nav__source {
      background-color: #FFF;
  }
}

.md-source__repository .md-source__repository--active{
  color: #01689b;
}

@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav__item--active>.md-nav__link {
      color: #01689b;
  }
}

@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav__title {
      background-color: #fff;
      color: #01689b;
      cursor: pointer;
      height: 5.6rem;
      line-height: 2.4rem;
      padding: 3rem .8rem .2rem;
      position: relative;
      white-space: nowrap;
  }
}

.md-main__inner {
  display: flex;
  height: 100%;
  margin-top: 0;
}