@import "~bootstrap/scss/bootstrap.scss";

aol-map { position:absolute;width:100%;height:calc( 100vh );}

.arrow {
  top: 3rem;
}

.popover {
  max-height:22rem;
  min-width:15rem;
}

.popover-body {
  max-height:19rem;
  overflow:hidden;
  overflow-y:auto;
}

.card-title {
  font-size:1rem;
}

.menu-card {
  margin-left:-7px;
  padding-left:7px;
  margin-right:-7px;
  padding-right:7px;
  margin-bottom:7px;
}

.icon-top {
  font-size: 6rem;
  text-align: center;
  height: 9.75rem;
}

.icon-top i {
  padding-top: 1.875rem;
}

.card-title {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.viewport-container {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  margin-bottom:4em;
  pointer-events: none;
}


.control-container {
  float:right;
  margin-right: 1em;
  pointer-events: all;
}

.fullscreen .viewport-container {
  margin-bottom: 1em;
}

.side-panel-container {
  position: absolute;
  top:0em;
  bottom: 3em;
  width: 100%;
  pointer-events: none;
}

.fullscreen .side-panel-container {
  bottom:0;
}


switch2d3d {
  position: absolute;
  right: 1em;
  bottom: 1em;
}

.panel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.panel-top {
  display: block;
  height:0;
}

.panel-bottom {
  overflow:auto;
  flex:1;
}

.no-results {
  font-weight:bold;
}

.no-results > span {
  font-style:italic;
}

div.header {
  display:flex;
  padding-top:1em;
  margin-bottom:1em;
}

div.header button {
  margin-left:1em;
}

.logo {
  overflow: hidden;
  max-height: 2.5em;
}

.slide-container {
  display: none;
  pointer-events: all;
  width: 100%;
  overflow: hidden;
}

.dataLayerSlide {
  width:100%
}

.slide-container.showDataLayerSlide {
  display: block;
}

timespan {
  position: absolute;
  transition: left 0.5s;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

timespan.menuVisible {
  left: 22rem;
}

:host ::ng-deep .timespan div.clearfix {
  transition: height 0.5s;
}


@media screen and (min-width:44rem) {
  .panel-top {
    height: 8.1rem;
  }

  .side-panel-container {
    width: auto;
  }
}

.map {
  transition: margin-left 0.3s;
}

.shortcut-icon {
  display: inline-block;
  text-align: center;
  margin: 0.5rem;
  cursor:pointer;
}

.shortcut-icon > .icon {
  width: 3rem;
  height: 3rem;
  background-color: #731e64;
  display: inline-block;
  text-align: center;
  line-height: 3rem;
  color: #ffffff;
  font-size: 2rem;
}

.shortcut-icon > .caption {
  text-align: center;
  width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: theme-color();
}

.shortcut-icon > .farm-icon {
  background-color: #731E64;
}

.shortcut-icon > .trijntje-icon {
  background-color: #FAA33F;
}

/*.panel-visible {
  margin-left:22rem;
}*/