/* overall tyling */
.popover{
  max-width: 15cm;
}
p{
  max-width: 30cm;
}
ul{
  max-width: 30cm;
}
html {
  scroll-behavior: smooth;
}
.container{
  max-width:38cm;
}
/* quellen */
.quellen{
  max-width:30cm;
  font-size: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid #bbbbbb;
}
.quellen :target {
  background-color: #F4A041;
  border-radius: 0.2rem;
  padding: 4px;
}
a.highlight{
  background-color: #F4A041;
  border-radius: 0.2rem;
  padding: 4px;
}

/* table styling */
table.header td{
  margin:0;
  padding:0;
}
table.header{
  margin:10;
  padding:10;
}
.table {
  --bs-table-striped-bg: rgba(0, 0, 0, .1);
}

/* navbar */
.navbar-nav{
  --bs-nav-link-color: #cccccc;
  --bs-nav-link-hover-color: #fff;
}
nav.navbar{
  --bs-navbar-padding-y: 0;
}
.navbar-nav .nav-link.active, .navbar-nav .show > .nav-link {
  --bs-navbar-active-color: #fff;
}
.nav-item{
  color: var(--bs-nav-link-color);
}
div.header{
  z-index:1001;
  position: sticky;
  top: 0;
}
table.header>tbody>tr:first-child{
  height: 115px;
}
table.header>tbody>tr:last-child{
  height: 50px
}
td.navbar-container{
  position: relative;
  width: 100%;
  background-color: #064A98
}
td.navbar-container>div.container{
  max-width: none;
  position: absolute;
  z-index: 10;
  top: 50px;
  transform: translateY(-40px);
  min-height: 115px;
  align-content: baseline;
}
nav.navbar{
  background-color: #064A98;
  border-radius: .5em;
}
.webapps-menu span {
  font-size:34px;
  color: var(--bs-navbar-brand-hover-color);
}
.navbar-brand img {
  height: 75px;
}
button.navbar-toggler{
  border: 0px;
}
.dropdown-item{
  font-size: 20px;
  border-radius: var(--bs-dropdown-border-radius);;
}
div.lang-dropdown-menu{
  min-width: 0;
}
div.lang-dropdown-menu img {
  vertical-align: top;
  margin: 3px;
}
a.nav-link{
  font-size: 24px;
}

/* the expanded menu */
.navbar-container div.navbar-collapse.show, div.navbar-collapse.collapsing{
  padding-left: .7em;
  padding-right: .7em;
  overflow-x: hidden;

  & .nav-item {
    width: 100%;

    & .nav-link{
      overflow: hidden;
      white-space: wrap;
    }
  }
}
.navbar-container .navbar-nav{
  --bs-nav-link-padding-x: 0.15rem;
  --bs-nav-link-padding-y: .15rem;
}
.navbar-container .dropdown-menu{
  --bs-dropdown-item-padding-x: 0.25rem;
  --bs-dropdown-item-padding-y: 0.1rem;
  --bs-dropdown-link-active-bg: #5D6BAD;
  width: fit-content;
  padding: 0.5rem;
  margin-left: 1em;
}

/* footer */
.footer{
  z-index: 10;
}

/* navbar button animation */
.animated-icon2 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.animated-icon2 span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.animated-icon2 span {
  background: #e3f2fd;
}

.animated-icon2 span:nth-child(1) {
  top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
  top: 10px;
}

.animated-icon2 span:nth-child(4) {
  top: 20px;
}

.animated-icon2.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

.animated-icon2.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}

/* cards on home page */
  div.hydroapps-card{
    width: 20rem;
  }
  div.hydroapps-card > img.card-img-top{
    padding-top: 0.5rem;
    margin-top: auto;
    max-height: 15rem;
    display: block;
    width: auto;
    max-width: 98%;
  }
  div.hydroapps-card > div.card-body{
    flex-grow: 0;
    margin-top: auto !important;
  }
  div.hydroapps-card > i.bi-box-arrow-up-right{
    position: absolute;
    align-self: end;
    margin-right: 0.8rem !important;
    margin-top: 0.5rem !important;
    font-size: 1.5rem;
    align-self: flex-end !important;
    color: #004A99;
  }
  div.a.list-group-item {
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-action-hover-bg: #0d6efd;
  }