/* MAIN-COLOR: #2F4070*/
/* HEADER-COLOR: #f4deff*/

html, body, .wrapper {
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: flex;
  flex-flow: column;
}

.ember-view {
  width: 100%; height: 100%;
}

#mapNav {
  width: 100%;
  /*height: 35px;*/
  flex: 0 1 35px;
  background: #2F4070;
  color: #f4deff;
  line-height: 1.1;
  font-weight: 700;
  padding: 5px;


}

#mapWrapper {
  /*width: 100%;
  height: 100%;*/
  flex: 1 1 auto;
}

#map {
  height: 100%;
  width: 100%;
}

#controlPanelWrapper {
   background: #fff;
   height: 63%;
   bottom: 0;
   width: 100%;
   padding: 0;
   margin: 0 auto;
}

.size-xl {
  font-size: 22px;
}

/* MAIN-COLOR: #2F4070*/
/* HEADER-COLOR: #f4deff*/

html, body, .wrapper {
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: flex;
  flex-flow: column;
}

.ember-view {
  width: 100%; height: 100%;
}

#mapNav {
  width: 100%;
  /*height: 35px;*/
  flex: 0 1 35px;
  background: #2F4070;
  color: #f4deff;
  line-height: 1.1;
  font-weight: 700;
  padding: 5px;


}

#mapWrapper {
  /*width: 100%;
  height: 100%;*/
  flex: 1 1 auto;
}

#map {
  height: 100%;
  width: 100%;
}

#controlPanelWrapper {
   background: #fff;
   height: 75%;
   bottom: 0;
   width: 100%;
   padding: 0;
   margin: 0 auto;

   /* Flex! Cool stuff. */
   display: flex;
   flex-flow: column;
}

#arrowPointerWrapper {
  flex: 0 1 33px;
  background: orange;
}

#controlPanel {
  background: lightblue;
  flex: 1 1 auto;
}

.size-xl {
  font-size: 22px;
}

Set up the constraints for the control panel layout
Set up the constraints for the control panel layout
