.ember-material-ui-input {
  border: 0;
  outline: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  width: 100%;
  max-width: 500px;
  height: 44px;
  position: relative; }
  .ember-material-ui-input span {
    position: absolute;
    left: 5px;
    bottom: 5px; }

.ember-material-ui-datetime-picker {
  background: #fff;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25);
  width: 280px;
  font-family: sans-serif;
  margin: 0 auto; }
  .ember-material-ui-datetime-picker .header {
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    background-color: #0097a7;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
    text-align: center; }
  .ember-material-ui-datetime-picker .display-date {
    padding: 16px 0;
    background-color: #00bcd4;
    color: #ffffff;
    text-align: center; }
    .ember-material-ui-datetime-picker .display-date .month {
      font-size: 22px;
      line-height: 24px;
      height: 24px;
      text-transform: uppercase; }
    .ember-material-ui-datetime-picker .display-date .day {
      margin: 6px 0;
      line-height: 58px;
      height: 58px;
      font-size: 58px; }
    .ember-material-ui-datetime-picker .display-date .year {
      font-size: 22px;
      line-height: 24px;
      height: 24px;
      text-transform: uppercase; }
    .ember-material-ui-datetime-picker .display-date .time i {
      margin-right: 5px; }
  .ember-material-ui-datetime-picker .toolbar {
    position: relative;
    height: 48px;
    text-align: center; }
    .ember-material-ui-datetime-picker .toolbar .title {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      line-height: 48px; }
    .ember-material-ui-datetime-picker .toolbar .toolbar-button {
      position: absolute;
      padding: 12px;
      width: 48px;
      height: 48px; }
      .ember-material-ui-datetime-picker .toolbar .toolbar-button:hover {
        cursor: pointer; }
      .ember-material-ui-datetime-picker .toolbar .toolbar-button.left {
        left: 0;
        top: 0; }
      .ember-material-ui-datetime-picker .toolbar .toolbar-button.right {
        right: 0;
        top: 0; }
  .ember-material-ui-datetime-picker .week {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    line-height: 12px;
    padding: 0 14px; }
    .ember-material-ui-datetime-picker .week::before {
      content: " ";
      display: table; }
    .ember-material-ui-datetime-picker .week .day {
      list-style: none;
      float: left;
      width: 32px;
      text-align: center;
      margin: 0 2px; }
  .ember-material-ui-datetime-picker .calendar-month {
    line-height: 32px;
    text-align: center;
    padding: 8px 14px 0 14px;
    background-color: #ffffff;
    overflow: hidden;
    height: 100%; }
  .ember-material-ui-datetime-picker .month-week {
    overflow: hidden;
    height: 100%; }
  .ember-material-ui-datetime-picker .day-button {
    position: relative;
    float: left;
    width: 36px;
    line-height: 32px;
    padding: 4px 2px;
    border: 0;
    background: none;
    cursor: pointer; }
    .ember-material-ui-datetime-picker .day-button .label {
      position: relative;
      color: #000; }
    .ember-material-ui-datetime-picker .day-button:focus {
      outline: none; }
  .ember-material-ui-datetime-picker .day-button .selected {
    position: absolute;
    background-color: #0097a7;
    height: 32px;
    width: 32px;
    opacity: 0;
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    left: 50%;
    margin-left: -16px; }
  .ember-material-ui-datetime-picker .day-button.is-current-day {
    color: #fff; }
    .ember-material-ui-datetime-picker .day-button.is-current-day .label {
      color: #fff; }
  .ember-material-ui-datetime-picker .day-button.is-current-day .selected {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  .ember-material-ui-datetime-picker .window-actions {
    text-align: right;
    padding: 10px; }
    .ember-material-ui-datetime-picker .window-actions div {
      display: inline-block;
      margin-right: 8px;
      color: #00bcd4;
      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      font-size: 14px;
      padding-top: 5px;
      margin-bottom: 15px;
      letter-spacing: 0;
      text-transform: uppercase;
      font-weight: 500;
      border-radius: 2px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: relative;
      overflow: hidden;
      background-color: #ffffff;
      line-height: 36px;
      min-width: 88px;
      padding: 0;
      margin: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      text-align: center; }
      .ember-material-ui-datetime-picker .window-actions div:hover {
        background-color: #defbff; }
  .ember-material-ui-datetime-picker .time-selector {
    height: 100%;
    overflow: hidden;
    padding: 40px; }
    .ember-material-ui-datetime-picker .time-selector .time {
      display: inline-block;
      vertical-align: middle;
      font-size: 30px;
      margin-right: 10px; }
    .ember-material-ui-datetime-picker .time-selector .hour, .ember-material-ui-datetime-picker .time-selector .minute {
      font-size: 40px;
      margin-top: 5px;
      text-align: center; }
    .ember-material-ui-datetime-picker .time-selector .control {
      margin-left: 10px; }
  .ember-material-ui-datetime-picker .month-view, .ember-material-ui-datetime-picker .year-view {
    height: 100%;
    overflow: hidden; }
    .ember-material-ui-datetime-picker .month-view .datetime-picker-button, .ember-material-ui-datetime-picker .year-view .datetime-picker-button {
      float: left;
      width: 25%;
      text-align: center;
      margin-bottom: 10px; }
      .ember-material-ui-datetime-picker .month-view .datetime-picker-button span, .ember-material-ui-datetime-picker .year-view .datetime-picker-button span {
        width: 80%;
        display: block;
        margin: 0 auto;
        line-height: 40px;
        border-radius: 6px; }
      .ember-material-ui-datetime-picker .month-view .datetime-picker-button.selected span, .ember-material-ui-datetime-picker .year-view .datetime-picker-button.selected span {
        background-color: #0097a7;
        color: #fff; }

@media screen and (max-width: 667px) {
  .is-portrait .ember-material-ui-datetime-picker .header {
    display: none; }
  .is-portrait .ember-material-ui-datetime-picker .display-date {
    padding: 5px 0; }
  .is-portrait .ember-material-ui-datetime-picker .display-date .month {
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle; }
  .is-portrait .ember-material-ui-datetime-picker .display-date .year {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    line-height: 20px;
    height: 20px; }
  .is-portrait .ember-material-ui-datetime-picker .display-date .day {
    margin: 0;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle; }
  .is-portrait .ember-material-ui-datetime-picker .toolbar {
    height: 30px; }
  .is-portrait .ember-material-ui-datetime-picker .day-button {
    line-height: 28px; }
  .is-portrait .ember-material-ui-datetime-picker .day-button .selected {
    width: 30px;
    height: 30px;
    margin-left: -15px; }
  .is-landscape .ember-material-ui-datetime-picker {
    width: 450px;
    position: relative; }
    .is-landscape .ember-material-ui-datetime-picker .header {
      display: block; }
    .is-landscape .ember-material-ui-datetime-picker .calendar {
      height: 100%;
      overflow: hidden;
      width: auto; }
    .is-landscape .ember-material-ui-datetime-picker .date-display {
      float: left;
      width: 160px; }
    .is-landscape .ember-material-ui-datetime-picker .calendar-container {
      float: left; }
    .is-landscape .ember-material-ui-datetime-picker .window-actions {
      position: absolute;
      bottom: 0;
      left: 30px; }
      .is-landscape .ember-material-ui-datetime-picker .window-actions div {
        display: block; } }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

.animated.bounceIn, .animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3); }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9); }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97); }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3); }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9); }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97); }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms; }

html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
  line-height: 1.3; }

html {
  box-sizing: border-box; }

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

h1 i {
  margin-right: 10px; }

a {
  color: #0097a7; }

code {
  color: #00bcd4; }

.content {
  padding: 20px; }

.note {
  margin-bottom: 400px; }

.notes {
  font-style: italic;
  font-size: 13px; }

.date-selector {
  border: 1px solid #ccc;
  padding: 40px;
  margin-bottom: 40px; }
  .date-selector h2 {
    font-size: 18px; }
  .date-selector input {
    font-size: 16px;
    padding: 10px 5px; }

.worm-hole-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center; }