@import url('https://fonts.googleapis.com/css?family=Ubuntu');

html, body {
    height: 100%;
}

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: #ff726B;
  font-family: 'Ubuntu', sans-serif;
  color: white;
  text-shadow: .5px .5px gray;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  overflow: hidden;
}

#flex-panel, #output-container {
  flex: 1 300px;
  min-width: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

h1 {
  /*margin-bottom: 5px;*/
  display:flex;
}

#flex-panel {
  background-color: #4FBEB2;
  font-weight: bold;
  border-radius: 0.4em;
  padding: 2em;
  padding-top: .5em;
  margin: 1em;
  flex: .5 0 0;
  overflow-y: scroll;
}

#output-container {
  border: 8px solid white;
  outline: gray solid 1px;
  margin: 1em;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 2 0 0;
  /*overflow: hidden;*/
}

input[type="radio"] {
  display: none;
}

.radioGroup input[type="radio"]:checked + label{
  background-color: rgba(0,0,0,0.2);
  padding: 5px 5px;
}

.radioGroup input[type="radio"]:hover + label{
  padding: 5px 5px;
}

.radioGroup label {
  margin-top: 20px;
  margin-bottom: 20px;
}

.dashboard-btn {
  margin: 5px 0;
  /*display:flex;*/
  text-align: left;
}

#example1 {
  background-color: #FFC76B;
  padding: 3em;
  display: flex;
  align-items: center;
}

#example2 {
  background-color: turquoise;
  padding: 3em;
  display: flex;
  align-items: center;
}

#example3 {
  background-color: #B6EA87;
  padding: 3em;
  display: flex;
  align-items: center;
}

footer {
  color: white;
  position: absolute;
  bottom: 0px;
  padding: 0px 50px 0px 0;
  text-align: right;
  width: 100%;
  bottom: -10px;
  font-size: .75em;
}
footer a {
  color: gray;
}
footer a:hover {
  color: #efefef;
}

/* responsive footer fix by Aalaap Ghag
This is where the magic happens */
@media (max-width: 767px) {

  footer  {
    padding-left: 0px;
    padding-right: 110px;
  }

  footer p {
    padding-right: 20px;
  }
}

@media screen and (max-width:700px) {
   .container {
       flex-wrap:nowrap;
       flex-direction: column;
   }

   #flex-panel {
     flex: 1.3 0 0;
   }

   h1 {
     font-size: 1rem;
     display: block;
     margin-bottom: 0;
     margin-top: 20px;
   }

   label {
     font-size: .5rem;
   }

   .dashboard-btn {
     margin: 0px;
     display: inline-block;
   }

   #example1 {
     padding: 1em;
     font-size: .75em;
   }

   #example2 {
     padding: 1em;
     font-size: .75em;
   }

   #example3 {
     padding: 1em;
     font-size: .75em;
   }
}