style.scss

html {
  font-family: proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

section{
  flex: 0 1 auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  > *:not(:first-child){
	margin-left: 10px;
	margin-bottom: 1px;
  }
}

h3{
  font-size: 18px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

p{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.Component{
  margin-top: 5px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  &.InfoBrowser{
	max-width: 800px;
  }
}

.invisible{
  visibility: hidden;
}

.markdowned{
  font-size: 1.2em;
  max-width: 100%;
}

.flexRowDistribute{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flexRowStacked{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
//  align-items: flex-end;
}

.flexContentVariable {
	flex: 1 1 auto;
}

.browserControls {
	flex: 1 1 auto;
	flex-basis: 80px;
	max-width: 200px;
}

.flexContentFixed{
  flex: 0 0  auto;
}

$base-green: scale-color(#5cb83c, $lightness: 10%);
$base-veryBright: scale_color($base-green, $lightness: 80%);
$base-veryDark: scale_color($base-green, $lightness: -60%);
$tr-highlight-darken: -10%;
table{
  border-collapse: collapse;
  @media (max-device-width: 400px) {
    tr{
      height: 2em;
    }
  }
}

.infoTable {
  width: 100%;
  table-layout: fixed;
  thead {
    text-align: left;
    background: $base-green;
    & > tr > th {
      @extend .unselectable;
    }
  }

  tbody>tr {
	cursor: pointer;
	&:nth-child(odd) {
	  background: $base-veryBright;
	  &:hover{
		background: scale-color($base-veryBright, $lightness: $tr-highlight-darken);
	  }
	}
	&:hover {
	  background: scale-color(#ffffff, $lightness: $tr-highlight-darken);
	}
  }

  tbody>tr>td{
	padding-right: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	@media (max-device-width: 400px)  {
	  height: 30px;
	}
  }
}

.clickable{
  cursor: pointer;
}

.profileTable{
  margin: 0 auto;
  td, th{
    height: 1.5em;
  }
  >thead{
	text-align: left;
    background: $base-green;
  }
  >tbody > tr {
	  cursor: pointer;
	  &:hover {
		background: scale-color(#ffffff, $lightness: $tr-highlight-darken);
	  }
	  > td {
//		height: 1.5em;
		padding-right: 10px;
	  }
	  > td:nth-child(2){
		text-align: center;
	  }
  }
}

.navBar{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 500px;
  margin-left: auto ;
  margin-right: auto ;
  border-bottom: thick solid #000000;
  & > div{
	cursor: pointer;
	padding-left: 3px;
	padding-right: 3px;
	font-size: 16px;
	font-weight: bold;
	line-height: 2em;
	@media (min-width: 450px) {
	  font-size: 18px;
	}

	//  text-rendering: optimizeLegibility;
	&:hover{
	  background-color: lighten($base-green, 30%);
	}
	&.active{
	  background-color: $base-green;
	}
  }
}

@mixin hoverDark($col) {
  background: $col;
  &:hover {
	outline: 2px solid scale-color($col, $lightness: -30%);
  }
}

$danger-red: #d9534f;
button{
  //border: 2px solid transparent;
  @include hoverDark(lightgray);
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  margin: 1px;
  white-space: nowrap;
  font-size: inherit;
  text-align: center;
  @media (max-device-width: 400px) {
	min-width: 50px;
	min-height: 30px;
	margin-bottom: 5px;
  }
}

.buttonGood{
  @include hoverDark($base-green);
}

.buttonDanger{
  @include hoverDark($danger-red);
}

button:disabled{
  color: graytext;
  background: scale-color(lightgray, $lightness: +50%);
  cursor: default;
  outline: 0 !important;
}

.buttonSelected{
  outline: 2px solid #000000;
  &:hover{
    background: $base-green;
  }
}

.microbutton{
  width: 2em;
  padding: 0;
  margin-bottom: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

$intervalRed: rgba(255, 35, 15, 0.60);
$intervalYellow: #5f95d0;
.intervalMinutes{
  @include hoverDark(mix($intervalRed, $intervalYellow, 100%));
}
.intervalHours{
  @include hoverDark(mix($intervalRed, $intervalYellow, 75%));
}
.intervalDays{
  @include hoverDark(mix($intervalRed, $intervalYellow, 50%));
}
.intervalWeeks{
  @include hoverDark(mix($intervalRed, $intervalYellow, 25%));
}
.intervalMonths{
  @include hoverDark(mix($intervalRed, $intervalYellow, 0%));
}

.popup{
  background: lightgray;
  padding: 10px;
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  text-align: center;
}

#reviewStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 50px;
}

.reviewStatusElement{
  align-self: center;
}

.reviewStatusHeading{
  font-weight: bolder;
}

input, select, textarea{
  font-size: inherit;
  border: 1px solid #ccc;
  font-family: inherit;
}

@media (max-device-width: 400px)  {
  input, textarea{
	line-height: 1.7;
  }
}

textarea, select{
  overflow: hidden;
}

.illegalForm{
  background-color: rgb(255, 200, 200);
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

form{
  display: flex;
  flex-direction: column;
}

hr{
  border: 0;
  border-bottom: 2px dashed #D0D0D0;
  width: 100%;
}

.guessCorrect{
  color: #366e2f;
  background: #cbff9b;
}

.guessWrong{
  color: #89170a;
  background: #ffcebf;
}