/*
 * File: steadystatestyle.css
 * Author: Brooke Bullek (June 2017), Daniel Prudente (June 2012)
 *		   Under the supervision of Margot Vigeant, Bucknell University
 * (c) Margot Vigeant 2017
*/

body {
  background-color: #cda26f !important;
}

h1 {
  font-family: "Times New Roman";
  font-weight: bold;
  font-size: 24px; /* Fallback in case viewport width doesn't work */
  color: #000000;
}

img {
  /* Prevent user from dragging images around */
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.container-fluid, .row, .content {
  width: 100%;
  padding: 0%;
}

/* Set height of the grid */
.row.content {
  height: 100%;
  width: 100%;
}

.glyphicon {
  font-size: calc(1em + 0.3vw);
}

/* On mobile screens (width < 1024px) */
@media screen and (max-width: 1023px) and (orientation: portrait) {
  .row.content {height:400px;}

  /* Positioning/scaling of images when screen is small enough to be "folded" */
  img {min-width: 0px !important;}

  .glyphicon {top: -50% !important;}

  .experiment, .head, .panel_container {
    min-width: 320px !important;
    min-height: 0px !important;
    width: 100% !important;
    height: 100% !important;
    left: 0% !important;
  }

  .beakers, .colorScale {
    min-width: 0px !important;
  }

  .button_box1 {
    left: 0% !important;
    top: 22% !important;
    min-width: 17vw !important;
    position: relative;
  }

  .button_box_item {
    font-size: calc(5px + 0.8vw) !important;
    margin: 1px !important;
  }

  #addDropButton, #getMeasurementButton, #emptyBeakerButton {
    font-size: calc(2.2px + 0.8vw) !important;
  }

  #experimentMain {
    width: 100% !important;
    height: auto !important;
  }

  .stopwatch {height: 155% !important;}
  .flowRate {height: 55% !important;}

  #clock {font-size: calc(8px + 0.8vw) !important;}
  #output {height: 38% !important;}

  /*#colorScaleLabel {font-size: calc(8px + 0.1vw) !important;}*/
}

/*********************************************************************************
 *         Default positioning/scaling of images (Laptop/desktop --> 1024px+)
 ********************************************************************************/

.head, .experiment, .panel_container {
  position: relative;
  left: 30%;
  min-width: 500px;
  width: 40%;
}

.experiment {
  /* These dimensions scale with the resolution of experiment_main.png */
  min-height: 441px;
  height: 35.27vw;
  margin: 0;
}

.beaker_wrapper {
  position: relative;
  padding: 11%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.beakers, .colorScale {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.config_container {
  height: 100%;
  width: 100%;
}

.flowRate {
  position: absolute;
  bottom: 155%;
  margin-right: 3%;
  width: 32%;
  height: 60%;
}

.flowRate_helper {
  position: relative;
  display: block;
}

.stopwatch {
  position: absolute;
  margin-left: 3%;
  display: block;
  bottom: 5%;
  height: 160%;
  width: 32%;
  border: 2px solid #4848f2;
  background-color: #1010a0;
}

.button_box1 {
  position: absolute;
  top: 29%;
  left: -6%;
  width: 8%;
  min-width: 120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.button_box2 {
  display: flex;
  margin: 0 auto;
  width: 85%;
  justify-content: center;
  align-items: center;
}

.cough_drop_box {
  position: absolute;
  width: 13.5%;
  display: flex;
}

.cough_drop_box_row_1 {
  left: 40.3%;
  top: 55.8%;
}

.cough_drop_box_row_2 {
  left: 39.3%;
  top: 57%;
}

.help_info_box {
  display: flex;
}

/* The following images have a parent container with display:flex; which allows them
 * to act as elements in an array that expand dynamically to fill their container. */

.button_box_item {
  flex-grow: 1;
  padding-left: 2%;
  padding-right: 2%;
  font-size: calc(5px + 0.3vw);
  margin: 2px;
  z-index: 3;
  position: relative;
}

.flowRate_item {
  margin: 0px;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(8px + 0.3vw);
  font-weight: normal;
  flex-grow: 1;
}

.cough_drop_top_row, .cough_drop_bottom_row {
  flex-shrink: 1;
  /*margin: 1px;*/
  width: 16%;
  height: 100%;
}

#helpButton, #infoButton {
  max-height: calc(calc(5px + 0.4vw) * 2.5);
}

#startstopbutton {min-width: 0px;}
#splitbutton {min-width: 0px;}
#resetbutton {min-width: 0px;}

/* The following images are position:absolute with respect to their parent container
 * (which is relative). This allows them to shrink and grow in size while still being
 * positioned proportionately relative to one another. */

.beaker-img {
  position: absolute;
  min-width: 38px;
  width: 17.5%;
  left: 0%;
}

.faucetFlow {
  position: absolute;
  width: 7.5%;
  height: 30%;
  top: 30%;
  left: 42.5%;
  z-index: -1;
}

.solution {
  position: absolute;
  top: 93.5%;
  left: 42%;
  width: 7%;
  z-index: -2;
}

#whiteBox {
  z-index: -1 !important;
}

#buchnerFunnelFront, #buchnerFunnelBack {
  position: absolute;
  width: 15%;
  left: 38.5%;
  top: 52.3%;
  z-index: 1;
}

#buchnerFunnelBack {
  position: absolute;
  top: 52% !important;
  z-index: -2 !important;
}

#faucetHandle {
  position: absolute;
  width: 15%;
  left: 75%;
  top: 56%;
  z-index: 2;
}

#solutionFlow {
  position: absolute;
  width: 1%;
  height: 35%;
  top: 58%;
  left: 45.5%;
  z-index: -3;
}

#faucetWaterBox, #faucetWaterBoxBlocker {
  position: absolute;
  top: 58.6%;
  left: 38.5%;
  width: 15%;
}

#faucetWaterBox {
  height: 5%;
  z-index: -1;
}

#faucetWaterBoxBlocker {
  height: 5.2%;
  width: 15.5%;
}

#beakerSaturated {
  position: absolute;
  width: 9%;
  left: 2%;
  top: 86%;
  z-index: 2;
}

/* Misc. properties */

#experimentMain {
  position: relative;
  height: 100%;
  z-index: 2;
}

#colorScale {
  position: relative;
  width: 90%;
  display: block;
  margin: auto;
}

#clock {
  font-size: 14pt;
  text-align: center;
  width: 50%;
  margin-top: 3%;
  margin-bottom: 3%;
}

#output {
  height: 45%;
  width: 85%;
  margin: auto;
  margin-top: 3%;
  margin-bottom: 3%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(8px + 0.3vw);
  color: black;
}

#faucetFlowRate { 
  width: 30%;
  height: calc(12px + 0.6vw);
  font-size: calc(8px + 0.4vw);
  margin-left: 1%;
  margin-right: 1%;
  z-index: 4;
  position: relative;
}

#faucetFlowRateRange {
  margin-left: 15%;
  font-size: calc(8px + 0.3vw) !important;
}

#help_box {
  position: absolute;
  width: 20%;
  top: 5%;
  left: 3%;
  font-size: calc(6px + 0.4vw);
  text-align: left;
  padding: 10px;
  visibility: hidden;
  /* Transition animation when toggling the help box */
  opacity: 0;
          transition: 0.6s;
  -webkit-transition: 0.6s;
          transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

#help_box.appear {
  visibility: visible;
  opacity: 1;
          transform: translateX(0);
  -webkit-transform: translateX(0);
}

/*#colorScaleLabel {
  position: relative;
  font-size: calc(12px + 0.1vw);
  color: #000000;
  margin-top: 1%;
}*/

/* For debugging */
/*.panel_container {border:1px solid red;}*/
/*.config_container {border:1px solid green;}*/
/*.experiment {border:1px solid black;}*/
/*#experimentMain {border:1px solid red;}*/
/*.beakers {border:1px solid blue;}*/
/*.colorScale {border:1px solid purple;}*/
/*.flowRate {border:1px solid purple;}*/