html {
  box-sizing: border-box;

  /* http://stackoverflow.com/a/24376696 */
  width: 100%;
  height: 100%;
  position: fixed;
}

body {
   padding: 0;
   margin: 0;
   height: 100%;
}

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

#busy {
   display: none !important;
}

/*
 * Exception error message
 */

#error, noscript {
   z-index: 9999;
   width: 100%;
   box-sizing: border-box;
   padding-left: 10px;
   line-height: 35px;
   top: 0;
   height: 0;
   overflow: hidden;
   position: fixed;
   box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
   -webkit-transition: height 0.5s linear;
}

#error.active, noscript {
   height: 37px;
}

#error {
   background-color: rgb(255,181,86);
}

noscript {
   background-color: #EA5050;
   color: #fff;
}

/*
 * Flex helpers
 */

.flex-container {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
}

.flex-horizontal, .flex-longest-side {
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   -ms-flex-direction: row;
   flex-direction: row;
}

.flex-vertical, .flex-shortest-side {
   -webkit-box-direction: normal;
   -moz-box-direction: normal;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-flex-direction: column;
   flex-direction: column;
}

.flex-container > *, .flex-container > .flex-filled {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
}

.flex-container > .header, .flex-container > .footer, .flex-container > .flex-fixed {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
}

/*
 * Tooltips
 */
.casper-tooltip {
   display: inline-block;
   cursor: help;
   position: relative;
   -webkit-transform: translateZ(0);
   -webkit-font-smoothing: antialiased;
}

.casper-tooltip:after {
   content: "";
   border-bottom: 1px dashed #5f7165;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
}

.casper-tooltip-content {
   background-color: #fff;
   border: 1px solid #cdcbcb;
   white-space: nowrap;
   font-size: 12px;
   bottom: 100%;
   display: none;
   left: -50%;
   margin-bottom: 15px;
   opacity: 0;
   padding: 5px 10px;
   pointer-events: none;
   position: absolute;

   -webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
   -ms-transform: translateY(10px);
   transform: translateY(10px);

   -webkit-transition: opacity .25s ease-out, -webkit-transform .25s ease-out;
   -moz-transition: opacity .25s ease-out, -moz-transform .25s ease-out;
   -ms-transition: opacity .25s ease-out, -ms-transform .25s ease-out;
   transition: opacity .25s ease-out, transform .25s ease-out;
}

.casper-tooltip-content:after {
   border-bottom: 1px solid #cdcbcb;
   border-right: 1px solid #cdcbcb;
   background-color: #fff;
   bottom: -7px;
   content: "";
   left: 50%;
   margin-left: -7px;
   position: absolute;
   width: 14px;
   height: 14px;

   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);

   -webkit-transform-origin: 7px 7px;
   -moz-transform-origin: 7px 7px;
   -ms-transform-origin: 7px 7px;
   transform-origin: 7px 7px;

   z-index: -1;
}

.casper-tooltip-content span.casper-tooltip-label {
   font-weight: bold;
}

.expanded.casper-tooltip {
   z-index: 9999;
}

.expanded.casper-tooltip .casper-tooltip-content {
   opacity: 1;
   display: block;
   pointer-events: auto;

   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}

.top.casper-tooltip-content {
   bottom: auto;
   top: 100%;
   margin-top: 15px;
}

.top.casper-tooltip-content:after {
   bottom: auto;
   top: -7px;

   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.left.casper-tooltip-content {
   left: 0;
}

.left.casper-tooltip-content:after {
   left: 10px;
   margin-left: 0;
}

.right.casper-tooltip-content {
   left: auto;
   right: 0;
}

.right.casper-tooltip-content:after {
   left: auto;
   right: 10px;
   margin-left: 0;
}

.flight-details .casper-tooltip-content {
   width: 260px;
}
.flight-details .casper-tooltip-content > div {
   width: 240px;
}

/*
 * Misc
 */

[data-not-empty=""] {
   display: none !important;
}

[data-not-undefined="undefined"] {
   display: none !important;
}

/*
 * Home marker
 */
#home-marker {
   min-width: 30px;
   width: 30px;
   height: 30px;
   margin-left: -15px;
   margin-top: -30px;
   background-color: #0081B7;
   padding: 4px 0;
}

#home-marker:before {
   font-family: icomoon;
   content: "\e620";
   font-size: 25px;
   line-height: 20px;
   color: #fff;
}

#home-marker .tip {
   display: block;
}

#home-marker .tip:after {
   background-color: #0081B7;
}

/**
 * SVG
 */
.svg-button {
   cursor: pointer;
}
.svg-nmt-icon {
   cursor: pointer;
   display: block;
   transform-origin: 0px 0px;
}

.svg-nmt-icon[data-src='nmt'] {
   transition-duration: 0.5s;
   transition-property: transform, fill;
   transition-timing-function: ease-in-out;

   transform-origin: 30px 80px;
   transform: translate(-30px,-80px);

   height: 90px;
   width: 60px;
}

.svg-nmt-icon[data-src='nmt'] #noise_level {
   font-weight: bold;
   font-size: 25px;
   text-anchor: middle;
}

.svg-nmt-icon[data-src='nmt'] #shadow {
   fill: rgba(0,0,0,0.25);
}

/**
 * Period Panel
 */
.period-panel .period-editor {
   float: left;
   position: relative;
   width: 100%;
}

.period-panel .period-editor > .date-editor-container {
   float: inherit;
   position: inherit;
   width: 50%;
}

.period-panel .period-editor > .from-editor-container {
   padding-right: 2.5%;
}

.period-panel .period-editor > .upto-editor-container {
   padding-left: 2.5%;
}

.period-panel .from-editor,
.period-panel .upto-editor {
   background-color: #FFFFFF;
   border-radius: 3px;
   float: inherit;
   padding: 5px 30px 5px 5px;
   position: inherit;
   width: 100%;
}

.period-panel .from-editor > .datetime-input,
.period-panel .upto-editor > .datetime-input {
   border-width: 0px;
   font-size: 10pt;
   height: 20px;
   margin-right: 30px;
   text-align: right;
   width: 100%;
}

.period-panel .from-editor > .datetime-input:focus,
.period-panel .upto-editor > .datetime-input:focus {
   outline: none;
}

.period-panel .from-editor > .datetime-button,
.period-panel .upto-editor > .datetime-button {
   background-color: #3A443C;
   border-radius: 3px;
   height: 20px;
   padding: 3px;
   position: absolute;
   right: 5px;
   top: 5px;
   width: 20px;

   fill: #FFFFFF;
}

.period-panel .datetime-picker[data-role='picker'] {
   clear: both;
   float: left;
   height: 0px;
   position: relative;
   width: 47.5%;
   z-index: 9999;
}
.period-panel .datetime-picker[data-role='picker'][data-picker='from'] { margin-left: 0px; }
.period-panel .datetime-picker[data-role='picker'][data-picker='upto'] { margin-left: 52.5%; }

.period-panel .datetime-picker[data-role='picker'].open {
   opacity: 1;
   transition: margin-left 0.5s, opacity 0.5s;
}
.period-panel .datetime-picker[data-role='picker'].closed {
   opacity: 0;
   transition: opacity 0.5s;
}

/**
 * Pikaday
 */
.pika-table th {
   color: #919e95;
}

.pika-title .pika-label {
   color: #5f7165;
}
.is-today .pika-button {
   background-color: #919e95;
   border-radius: 3px;
   color: #FFFFFF;
   font-weight: bold;
}

.pika-button:hover {
   background: #5f7165;
   font-weight: bold;
}

/**
 * ZoomControl
 */
#map .control-container {
   position: absolute;
   right: 0;
   top: 0;
}

#map .control-container .control-button {
   box-sizing: border-box;
   clear: both;
   float: left;
   position: relative;
}

/**
 * Login Panel
 */
.login-panel .container {
   float: left;
   position: relative;
   width: 100%;
}

/**
 * Casper Button
 */
.casper-button {
   cursor: pointer;
   position: relative;
}

/**
 * Input list
 */
input[data-list] + .input-list[data-input] {
   float: left;
   overflow: hidden;
   position: relative;
   z-index: 999;
}

input[data-list] + .input-list[data-input].closed {
   height: 0;
   opacity: 0;

   transition: height .25s, opacity .05s ease .2s;
}
input[data-list] + .input-list[data-input].open {
   transition: height .25s, opacity .05s;
}

.input-list-option {
   cursor: pointer;
   float: left;
   position: relative;
   width: 100%;
}

.input-list-option * { pointer-events: none; }