/* Limit image in the card title*/
.card-img-top {
  max-width: 4rem;
  height: 4rem;
  padding-top: 5px;
}

/* decorate links in card */
.card a {
  text-decoration: none;
}
.card li:hover {
  background: lightgray;
}
.card-title {
  font-weight: unset;
}

/* Special boxes for cards */ 
.card {
  box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.2);
  transition: transform .2s;
}

.card:hover {
  box-shadow: 0px 2px 15px 1px rgba(0,0,0,0.3);
}

/* on large screen we want card to be approx of the same size */
@media (min-width:768px) {
  .navigator-container .card {
    min-height: 300px;
  }
  /* disable push to bottom on the card */
  .navigator-container .card .card-body {
    flex: unset;
  }

}

/* limit icon size in the card li */
.navigator-container .card > ul > li > a > div > div > img {
    max-height: 20px;
    max-width: 20px;
}

.navigator-container .card li {
  padding: 0.2rem 1rem;
}

/* A "nice" workaround to let us keep l2 level permanently open
 * but hide child ul's not underneath current selection.
 * The only eventually open issue is that this way the whole child tree is 
 * open including all subtrees.
 */
.docs-sidebar-toc li.toctree-l2:not(.current) > ul {
    display: none;
}

/* Card Design */

.container-docsportal {
  display: flex;
  align-items: stretch;
  align-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 2em;
  gap: 1em; /* needs to be substracted from item size */
}

@media (min-width: 768px) {
  .item-docsportal {
    flex-basis: calc(33.333% - 1em); /* needs gap in container-docsportal */
    box-sizing: border-box;
    align-self: stretch;
  }
}

@media (max-width: 767.98px) {
  .item-docsportal {
    flex-basis: calc(100% - 1em); /* needs gap in container-docsportal */
    box-sizing: border-box;
    align-self: stretch;
  }
}

.item-docsportal>.list-group:last-child {
  margin-bottom: 1em;
}

.item-docsportal>.card-body {
  flex: none;
}

/* End Card-Design */