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

@media screen and (max-width: 660px) {
.flex-item_tree {border: 1px solid; margin: .5em;padding: 1.5em}
.flex-item_results {border: 1px solid; margin: .5em;padding: .5em}
}

@media screen and (min-width: 661px) and (max-width: 739px) {
.flex-item_tree {float : left; border: 1px solid; margin: .5em;padding: 1.5em; width: 300px; height: 70%; overflow-y: scroll;}
.flex-item_results {border: 1px solid; margin: .5em;padding: .5em; width: calc(100%-300px); height: 70%; overflow-y: scroll;}
html {height: 100%}
body {height:98%} 
}

@media screen and (min-width: 740px) {
.flex-item_tree {float : left; border: 1px solid; margin: .5em;padding: .5em; width: 430px; height: 70%; overflow-y: scroll;}
.flex-item_results {border: 1px solid; margin: .5em;padding: .5em; width: calc(100%-430px); height: 70%; overflow-y: scroll;}
html {height: 100%}
body {height:98%} 
}

* {
  font-family: 'Rationale', serif;
  }

logo {
  float:left;
  margin-left: 5%;
  }

hr { 
  width: 90%; 
  height: 2px; 
  text-align: center; 
  margin: 1em auto;
  color: blue;
  background: teal;
  clear: both;
  }

nav {
  float:right;
  margin-right: 5%;
  }

nav_item {
  margin-right: 1em;
  font-size: x-large;
  }

categorytree {
  text-align: left;
  }

main {
  clear:both;
  text-align: center;
  font-size: larger;
  margin-right: 10%;
  margin-left: 10%;
  }

p {
  margin-right: 10%;
  margin-left: 10%;
  }

footer {
  text-align: center;
  font-size: medium;
  }

btn {
  background: #308AF1;
  box-shadow: #174172 1px 1px 0px;
  color: #FFFFFF;
  letter-spacing: 1px;
  border-radius: 5px;
  outline: none;
  border: none;
  padding-left: 1em;
  padding-right: 1em;
  font-size: x-large;
  text-decoration: none;
  }

fieldset {
  white-space : nowrap;
  text-align : left;
  }

roadmapdateOK {
  background:#00FF00;
  box-shadow:#174172 1px 1px 0px;
  color: #FFFFFF;
  letter-spacing:1px;
  border-radius:10px;
  outline: none;
  border: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: x-large;
  text-decoration: none;
  }

roadmapdate {
  background:#0000FF;
  box-shadow:#174172 1px 1px 0px;
  color: #FFFFFF;
  letter-spacing:1px;
  border-radius:10px;
  outline: none;
  border: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: x-large;
  text-decoration: none;
  }

roadmaptext {
  font-size: x-large;
  }

table {
  margin: auto;
  border: thin solid grey;
  }

th {
  background-color: #666; 
  color: #fff;
   }

tr {
  background-color: #d7e7bf;
  color: #000;
   }

tr:nth-child(odd) {
  background-color: #c3d5a8;
  }

studyint {
  background-color: lightblue;
}

studyobs {
  background-color: #fff733;
}

colorgreen { 
  color: green;
}

colorred { 
  color: red;
}

button { 
  padding: 2px;
}

.input_edit {
  border: 1px solid;
  background-color: #f1f1f1;
  padding: 2px;
  font-size: medium;
  text-align: center;
  border-radius: 3px;
}

/*the container must be positioned relative:*/

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid;
  background-color: #f1f1f1;
  padding: 5px;
  font-size: x-large;
  border-radius: 5px;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 2000;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

.button {
  display: inline-block;
  letter-spacing: 1px;
  padding: 5px 50px;
  font-size: x-large;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  box-shadow: 5px 5px #BBB;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 3px 3px #999;
  transform: translateY(1px);
}