* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body, html {
  min-height: 100%;
  width: 100%
}

body { background-color: #adb4c1; font-family:'Roboto'; }

.container {
  margin: auto;
  height: 90%;
  width: 90%;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  box-shadow: 0vw 0.5vw 1.5vw 0.5vw grey
}

.bar {
  background-color: #9ca2b1;
  flex: 0.15;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-flow: column
}

.bar .row {
  flex: 1;
  display: flex;
  flex-flow: row;
  background-color: #b5c4ce;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px
}

.bar .row.active a { background-color: #adb4c1 }

.bar .row a {
  color: black;
  flex: 0.1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background-color: #b5c4ce
}

.bar .row a.fill { background-color: #b5c4ce }

.bar .row a.fill:hover { background-color: #b5c4ce }

.bar .row a:hover { background-color: #c7dfdd }

.bar .row a.far-left { border-top-left-radius: 10px }

.bar .row a.far-right { border-top-right-radius: 10px }

.bar .row a.ext { font-size: 2vw }

.bar .row a.active {
  background-color: #adb4c1;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px
}

.bar .row a i { font-size: 1.6vw }

.bar .row a i.fa.fa-font.fore {
  color: #ff6961;
  text-decoration: underline
}

.bar .row a i.fa.fa-font.back { background: #779ecb }

#editor {
  background-color: #fff;
  flex: 0.85;
  padding: 1vw;
  border: none
}

.hidden { display: none }