@import 'modal-plot.css';
@import 'header.css';
@import 'footer.css';

html, body, div#main_wrapper {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border: 2px black solid;
}

div#main_wrapper {
  display: flex;
  flex-direction: column;
}


/* content */
div#main_content {
  height: 70%;
  display: flex;
}

section {
  height: 100%;
}

section#summary > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

section#plots {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
/*  min-width: 100%;*/
}


section#plots > div.menu {
  text-align: center;
  height: 10%;
  width: 100%;
}

section#plots > div.drop-plot {
  text-align: center;
  height: 90%;
  width: 100%;
}

img#main {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: block;
}

div.quickview {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

div.quickview > img{
  max-width: 50%;
  height: 100%;
}