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

#process_info_card {
  position: absolute;
  max-width: 50em;
  z-index: 9;
}

#filter_card {
  position: absolute;
  max-width: 50em;
  right: 1em;
  z-index: 9;
}

#details_info {
  position: absolute;
  min-width: 50em;
  max-width: 70em;
  min-height: 10vh;
  max-height: 50vh;
  z-index: 9;
  top: 30%;

}

.bg-vgrey{
  background-color: #2d2d2dff;
  color: #FFF;
}

#details_body{
  overflow: auto;
}

#process_info_card_header, #filter_card_header, #details_info_header {
  cursor: move;
}

.overlay {
  background: rgb(0, 0, 0);
  opacity: 0.5;
  transition: 0.8s;
}

 html, body, #sigma-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

.menu {
  background-image: url("/assets/background.svg");
  background-position: center;
  background-size: cover;
} 

#main-menu{
    position: absolute;
    right: 1em;
    bottom: 1em;
}

#filter_card, #process_info_card, #details_info, #main-menu {
    font-size: 12px;
}

#filter_card_header, #process_info_card_header, #details_info_header{
  font-size: 14px;
}

#highlight-me {
  animation: glow 700ms 1;
  border-radius: 3px;
  padding: 2px 5px;
}

@keyframes glow {
  50% {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgb(255, 255, 255);
  }
}