h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: white;
  font-weight: 100;
}

h3 {
    font-size: 1.6em;
}

p.lead {
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.8);
}

a:link, a:visited, a:active {
    color: #4FECF9;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: white;
    text-decoration: none;
}

a.muted:link, a.muted:visited, a.muted:active {
  color: gray;
  text-decoration: underline;
}

a.muted:hover {
  color: white;
}

a > .show_hover {
  opacity: 0.0;
}

a:hover > .show_hover {
    opacity: 1.0;
}

body {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    background: #252626;
}

#footer {
    color: gray;
    text-align: center;
    padding: 10px;
    min-height: 200px;
    margin-top: 30px;
}

#container {
    min-height: 600px;
}

.flowlogo {
  position: absolute;
  display: inline-block;
  top: 7px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  cursor: pointer;
}

div.section {
  margin-top: 15px;
}

.map {
    min-height: 250px;
    margin: 10px 0;
}

/* Major Layout */

.vpad {
    margin: 10px 0;
}

.app-content {

}

/* Main */


.loadStatus {
    margin: 50px auto;
    width: 200px;
}

.loadStatus .message {
    display: block;
    text-align: center;
    color: #D2D2D4;
    font-size: 23px;
}

.loadStatus .holder {
    display: block;
    width: 200px;
    padding: 10px;
    margin: 20px auto;
}

.loadStatus .nil {
    display: block;
    margin: 0 auto;
}

.loader.large {
    display: block;
    height: 50px;
    margin: 0 auto;
}

.loader.large.hidden {
    display: none;
}

.goalDate:link, .goalDate:visited {
    display: block;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

.goalDate:hover {
    color: #F9D23D;
}

.goalDate:active {
    color: #FAE573;
}

.goalList {
    font-size: 1.3em;
}

.goalList li {
    list-style-type: square;
    transition: .4s linear color;
}

.goalList li:hover {
  color: white;
}

.TaskWidget div.wip {
  font-size: 1.3em;
  font-weight: 100;
  color: #F9D23D;
}

.progressBarHolder {
  display: block;
  height: 20px;
}

.progressBar {
    display: block;
    height: 2px;
    background: #444;
    position: relative;
    margin: 5px 0;
}

.progressBar .progress {
    position: absolute;
    background: #4FECF9;
    left: 0px;
    top: 0px;
    display: block;
    height: 100%;
    transition: .2s linear all;
    -webkit-transition: .4s linear all;
}

.bigProp {

}

.bigProp.clickable {
  opacity: 0.8;
  cursor: pointer;
}

.bigProp.clickable:hover {
  opacity: 1.0;
}

/* Project progress */

.progressBoxes {
    display: block;
    width: 99%;
    margin: 0px auto;
}

.progressBox_o {
    display: block;
    float: left;
    padding: 2px;
}

.progressBox_i {
    display: block;
    height: 5px;
    background: #888;
    cursor: pointer;
}

.progressBox_i.active {
    background: #4FECF9;
}

.progressBox_i:hover {
    background: #EFEFEF;
}

.progressBox_i:active {
    background: white;
}

.habitCelandar {

}

.habitCalendar > .habitDay {
  opacity: 0.7;
  background: gray;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 2px;
  font-size: 8px;
  text-align: center;
  color: white;
}

.habitCalendar > .habitDay.even_month {
  opacity: 0.5;
}

.habitCalendar > .habitDay:hover {
  opacity: 1.0;
}

.HabitWidget tr, .HabitWidget td, .HabitWidget th {
    background-color: none;
}

.HabitWidget td, .HabitWidget th {

}

.HabitWidget > table {
  background-color: rgba(0,0,0,0);
  border-collapse: collapse;
  border-spacing: 0;
}

.HabitWidget th, .HabitWidget td {
    text-align: center;
}

.HabitWidget th {
    color: #888;
    font-size: 0.8em;
}

.HabitWidget td > a {
  text-decoration: none;
}

.HabitWidget th.current-habit-week {
    color: white;
}

.HabitWidget span.target.target-near {
    color: #F9D23D;
}

.HabitWidget span.target.target-reached, .taskHUD span.target-reached {
    color: #22FF7A;
    font-weight: bold;
}

.LifeTimeline {
  display: block;
}

.LifeTimeline > .week {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 2px;
  padding: 0;
  opacity: 0.5;
  background: #555;
  transition: .4s linear opacity;
  position: relative;
}

.LifeTimeline > .week.future {
  opacity: 0.2;
}

.LifeTimeline > .week > .singleEvents {
  left: 4px;
  top: 4px;
  border-radius: 3.5px;
  width: 7px;
  height: 7px;
  background: #303030;
  position: absolute;
}

.LifeTimeline > .week:hover {
  opacity: 1.0;
}

.project-indicator {
  display: inline-block;
  margin: 0 5px 3px 5px;
  padding: 2px 5px;
  font-size: 0.65em;
  text-transform: uppercase;
}

/* Tasks */

.task-secondary > span {
  margin-right: 7px;
}

.task-secondary > .timed {
  color: #F9D23D;
}


/* Task HUD */

.taskHUD {
  background: rgba(0,0,0,0.7);
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 20px;
  z-index: 1000;
}

.taskHUD .hud-label {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: bold;
  font-size: 0.6em;
}

.taskHUD .name {
  color: #F9D23D;
  font-size: 1.4em;
}

.taskHUD .timers .time {
  color: white;
  font-size: 1.5em;
}

.taskHUD .timers .time.playing {
  color: #F9D23D;
}

.taskHUD .timers .time .playing-orb {
  background-color: #F9D23D;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 7px 4px 0;
  border-radius: 8px;
  animation: pulse .5s infinite alternate;
}

.taskHUD .timers .target {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1em;
}

.readable .sh {
  margin-right: 5px;
}

.empty {
    text-align: center;
    font-size: 1.8em;
    opacity: 0.5;
    margin: 40px;
}

.transparent {
  opacity: 0.5;
}

/* Tasks */

.taskList .task.done {
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.5);
}

/* Splash */

#splash {
}

.glow {
  opacity: 0.7;
}

.glow:hover {
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1.0;
  }
}

/* Timezone Picker */

.timezone-picker .timezone-picker-textfield > input {
}

/* MobileDialog fix */

.dialog-root {
  padding: 0 !important;
}

.dialog-root > div:first-child {
  height: 100%;
}

/* Used as wrapper */
.dialog-root > div:first-child > .dialog-content {
  transform: none !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Actual content */
.dialog-root > div:first-child > .dialog-content > div {
  width: 100%;
  max-width: 800px;
  max-height: 100%;

  display: flex;
  flex-direction: column;
}

.dialog-root > div:first-child > .dialog-content > div > .dialog-body {
  padding: 0 !important;
  border-top: solid #444 1px;
  border-bottom: solid #444 1px;
  display: flex;
}

.dialog-root > div:first-child > .dialog-content > div > .dialog-body > .dialog-scroll {
  padding: 0 16px 16px 16px;
  width: 100%;
  overflow: auto;
}

/* Pace */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/* For react-transition-group */

.fade-enter {
  position: fixed;
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}