@import url(//fonts.googleapis.com/css?family=Maven+Pro:400,700);

body, td, input, select {
   font-family: 'Maven Pro', sans-serif;
   color: #353535;
   font-size: 14px;
}

#logo {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 150px;
   height: 40px;
   z-index: 9999;
   border: 1px solid #cdcbcb;
   background-color: #5f7165;
   box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-image: url(../../../../images/casper_logo.svg);
}

/*
 * Panels
 */
.casper-panel-container {
   //overflow-x: hidden;
   //overflow-y: auto;
   position: absolute;
   top: 10px;
   left: 0;
   //bottom: 0;
   width: 330px;
   padding-left: 10px;
   transition: left 750ms 250ms ease-in-out;
   -ms-overflow-style: -ms-autohiding-scrollbar;
}

.casper-panel-container::-webkit-scrollbar {
   display: none;
}

.casper-panel-container > * {
   pointer-events: auto;
}

.expanded-settings .casper-panel-container,
.expanded-userguide .casper-panel-container,
.expanded-usersettings .casper-panel-container {
   left: -330px;
   transition: left 750ms ease-in-out 0s;
}

.minimized-panel-container {
   position: absolute;
   right: 10px;
   width: 40px;
   bottom: 60px;
   //-webkit-transform: translateY(-50%);
   //-moz-transform: translateY(-50%);
   //-ms-transform: translateY(-50%);
   //transform: translateY(-50%);
}

.casper-panel, .login {
   position: relative;
   width: 100%;
   float: left;
   min-height: 40px;
   margin-bottom: 5px;
   border: 1px solid #cdcbcb;
   background-color: #f9f9f9;
   box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
   transition: height 0.5s ease-out;
}
/*
.casper-panel:before {
   content: "";
   height: 40px;
   width: 0;
   left: 0px;
   position: absolute;
   top: 0;
   background-color: #5f7165;
   transition: all 0.2s 0.3s ease-out;
   cursor: pointer;
}

.casper-panel.hover:before {
   left: -12px;
   width: 12px;
}

.casper-panel:after {
   content: "\e61f";
   position: absolute;
   top: 0;
   font-family: icomoon;
   font-size: 28px;
   line-height: normal;
   width: 0;
   left: 0px;
   height: 28px;
   margin-top: 5px;
   text-indent: -7px;
   color: #fff;
   transition: all 0.2s 0.3s ease-out;
   overflow: hidden;
   cursor: pointer;
}

.casper-panel.hover:after {
   left: -12px;
   width: 12px;
}
*/

/*
 * casper panel icon
 */
.svg-panel-icon, .casper-panel-icon, .casper-panel-mini-icon { fill: #FFFFFF; }

.svg-panel-icon, .svg-button,
.casper-panel-icon, .casper-panel-mini-icon
{
   position: absolute;
   transform: translate(-50%, -50%);
   width: 20px;
}
.svg-panel-icon.left, .svg-button.left,
.svg-panel-icon.right, .svg-button.right {
   top: 20px;
}
.svg-panel-icon.left, .svg-button.left { left: 20px; }
.svg-panel-icon.right, .svg-button.right { right: 0px; }

.casper-panel > .casper-panel-icon,
.casper-panel > .casper-panel-mini-icon {
   display: none;
   left: 20px;
   top: 20px;
   z-index: 2;
}

.casper-panel:not(.minimized-panel) > .casper-panel-icon,
.minimized-panel > .casper-panel-mini-icon {
   display: block;
}

.casper-panel-minimize-container {
   height: 40px;
   left: -12px;
   overflow: hidden;
   position: absolute;
   top: 0px;
   width: 12px;
}

.casper-panel-minimize-container .casper-panel-minimizer {
   background-color: #5f7165;
   cursor: pointer;
   height: 100%;
   left: 12px;
   position: absolute;
   width: 12px;

   transition: left 0.25s ease-in-out;
}

.casper-panel:hover .casper-panel-minimizer {
   left: 0px;
}

.casper-panel-minimizer > [data-src='arrowThickL'] {
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 8px;
}
.casper-panel-minimizer > [data-src='arrowThickL'] > * {
   fill: #FFFFFF;
}

.fixed.casper-panel:before, .fixed.casper-panel:after {
   content: none;
}

.inactive.casper-panel {
   overflow: hidden;
   min-height: 0;
   height: 0px;
   border: none;
   margin-bottom: 0;
}

.minimizing-panel {
   min-height: 0;

   -webkit-animation: slide-out-panel 0.5s forwards, hide-panel 0.5s 0.5s forwards;
   -moz-animation: slide-out-panel 0.5s forwards, hide-panel 0.5s 0.5s forwards;
   -ms-animation: slide-out-panel 0.5s forwards, hide-panel 0.5s 0.5s forwards;
   animation: slide-out-panel 0.5s forwards, hide-panel 0.5s 0.5s forwards;
}

.maximizing-panel {
   max-height: 0;

   -webkit-transform: translate3d(-400px,0,0);
   -moz-transform: translate3d(-400px,0,0);
   -ms-transform: translate3d(-400px,0,0);
   transform: translate3d(-400px,0,0);

   -webkit-animation: show-panel 0.5s forwards, slide-in-panel 0.5s 0.5s forwards;
   -moz-animation: show-panel 0.5s forwards, slide-in-panel 0.5s 0.5s forwards;
   -ms-animation: show-panel 0.5s forwards, slide-in-panel 0.5s 0.5s forwards;
   animation: show-panel 0.5s forwards, slide-in-panel 0.5s 0.5s forwards;
}

@-webkit-keyframes slide-out-panel {
   100% {
      -webkit-transform: translate3d(-400px,0,0);
   }
}

@-moz-keyframes slide-out-panel {
   100% {
      -moz-transform: translate3d(-400px,0,0);
   }
}

@-ms-keyframes slide-out-panel {
   100% {
      -ms-transform: translate3d(-400px,0,0);
   }
}

@keyframes slide-out-panel {
   100% {
      transform: translate3d(-400px,0,0);
   }
}

@-webkit-keyframes slide-in-panel {
   100% {
      -webkit-transform: translate3d(0,0,0);
   }
}

@-moz-keyframes slide-in-panel {
   100% {
      -moz-transform: translate3d(0,0,0);
   }
}

@-ms-keyframes slide-in-panel {
   100% {
      -ms-transform: translate3d(0,0,0);
   }
}

@keyframes slide-in-panel {
   100% {
      transform: translate3d(0,0,0);
   }
}

@-webkit-keyframes hide-panel {
   100% {
      height: 0;
      border: none;
      margin-bottom: 0;
   }
}

@-moz-keyframes hide-panel {
   100% {
      height: 0;
      border: none;
      margin-bottom: 0;
   }
}

@-ms-keyframes hide-panel {
   100% {
      height: 0;
      border: none;
      margin-bottom: 0;
   }
}

@keyframes hide-panel {
   100% {
      height: 0;
      border: none;
      margin-bottom: 0;
   }
}

@-webkit-keyframes show-panel {
   100% {
      max-height: 100%;
   }
}

@-moz-keyframes show-panel {
   100% {
      max-height: 100%;
   }
}

@-ms-keyframes show-panel {
   100% {
      max-height: 100%;
   }
}

@keyframes show-panel {
   100% {
      max-height: 100%;
   }
}

.minimized-panel {
   background-color: #5f7165;
   height: 40px !important;
   width: 40px !important;
   overflow: hidden;
   cursor: pointer;

   -webkit-transform: translate3d(60px,0,0);
   -moz-transform: translate3d(60px,0,0);
   -ms-transform: translate3d(60px,0,0);
   transform: translate3d(60px,0,0);

   -webkit-animation: slide-in-panel 0.5s forwards;
   -moz-animation: slide-in-panel 0.5s forwards;
   -ms-animation: slide-in-panel 0.5s forwards;
   animation: slide-in-panel 0.5s forwards;
}

.inactive.minimized-panel {
   margin-bottom: 5px;
}

.minimized-panel > * {
   display: none;
}

/*
 * casper panel header
 */
.casper-panel-header {
   background-color: #5f7165;
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
   color: #fff;
   height: 40px;
   line-height: 20px;
   padding: 10px 10px 10px 40px;
   position: relative;
   white-space: nowrap;
   z-index: 1;
}
/*
.casper-panel-header[class*="icon-"] {
   padding-left: 36px;
}

.casper-panel-header[class*="icon-"]:before {
   position: absolute;
   left: 6px;
   top: 5px;
   font-size: 29px;
}
*/

.minimized-panel .casper-panel-header {
   display: block;
   color: transparent;
}

.minimized-panel .casper-panel-header:before {
   color: #fff;
}

.minimized-panel .casper-panel-header > * {
   display: none !important;
}

.casper-panel-content {
   padding: 5px 10px;
   min-height: 15px;
   overflow: hidden;
   opacity: 1;
   transition: height 0.5s ease-out, opacity 0.5s ease-out;
   transition-delay: 0s, 0.25s;
}

.collapsable.casper-panel-content {
   height: 15px;
}

.expanded.casper-panel-content,
.fixed-height.casper-panel-content {
   overflow: inherit;
}

.hidden.casper-panel-content {
   height: 0 !important;
   opacity: 0 !important;
   min-height: 0;
   padding: 0 10px;
   overflow: hidden;
}

.no-padding.casper-panel-content {
   padding: 0;
}

.casper-panel-content + .casper-panel-content {
   //box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
}

.casper-panel [data-role="collapse-all"] {
   display: block;
   position: absolute;
   transition: transform 0.5s linear;
   -webkit-transform: translate(-50%, -50%) rotate(180deg);
   -moz-transform: translate(-50%, -50%) rotate(180deg);
   -ms-transform: translate(-50%, -50%) rotate(180deg);
   transform: translate(-50%, -50%) rotate(180deg);
}

.collapsed.casper-panel [data-role="collapse-all"] {
   -webkit-transform: translate(-50%, -50%) rotate(0deg);
   -moz-transform: translate(-50%, -50%) rotate(0deg);
   -ms-transform: translate(-50%, -50%) rotate(0deg);
   transform: translate(-50%, -50%) rotate(0deg);
}

.casper-tabbed-panel {
}

.casper-tabbed-tabs {
   display: table;
   table-layout: fixed;
   width: 100%;
   list-style: none;
   padding: 0;
   margin: 0;
}

.casper-tabbed-tab {
   display: table-cell;
   position: relative;
   padding: 10px;
   background-color: #dde1de;
   color: #919e95;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
}
.casper-tabbed-tab .svg-icon {
   fill: #919e95;
}

.casper-tabbed-tab:not(.active):hover {
   background-color: #ececec;
   color: #78877d;
}
.casper-tabbed-tab:not(.active):hover .svg-icon {
   fill: #78877d;
}

.casper-tabbed-tab,
.casper-tabbed-tab .svg-icon,
.table-row-button
{
   -webkit-transition-property: background-color, color, fill;
   -webkit-transition-timing-function: linear;
   -webkit-transition-duration: 0.25s;

   -moz-transition-property: background-color, color, fill;
   -moz-transition-timing-function: linear;
   -moz-transition-duration: 0.25s;

   transition-property: background-color, color, fill;
   transition-timing-function: linear;
   transition-duration: 0.25s;
}

.casper-tabbed-tab[class*="icon-"]:before {
   font-weight: bold;
   font-size: 27px;
   position: relative;
   top: 5px;
   line-height: 0;
   padding-right: 5px;
}

.active.casper-tabbed-tab {
   background-color: #f9f9f9;
   color: #5f7165;
   cursor: auto;
}
.active.casper-tabbed-tab .svg-icon {
   fill: #5f7165;
}

.casper-tabbed-content {
   height: 0;
   overflow: hidden;
   transition: height 0.5s ease-out;
}

.table-row-button {
   display: table-cell;
   border: none;
   background-color: #dde1de;
   color: #919e95;
   padding: 10px;
}
.table-row-button:hover {
   background-color: #ececec;
   color: #78877d;
}

.table-row-button.active {
   background-color: #f9f9f9;
   color: #5f7165;
   font-weight: bold;
}

.casper-external-container {
   overflow: hidden;
   position: absolute;
   top: 10px;
   left: 0;
   bottom: 10px;
   width: 300px;
   margin-left: 10px;
   visibility: hidden;
   opacity: 0;
   z-index: 1;
   border-top: 1px solid #cdcbcb;
   transition: visibility 500ms linear 0,opacity 500ms linear 0;
}

[data-device="phone"] .casper-external-container,
[data-device="tablet"] .casper-external-container {
   overflow-y: auto;
}

.casper-external-container.casper-panel:before,
.casper-external-container .casper-panel:after  {
   content: none;
}

.casper-external-container > * {
   border-left: 1px solid #cdcbcb;
   border-right: 1px solid #cdcbcb;
   box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

.casper-external-container > *:last-of-type {
   border-bottom: 1px solid #cdcbcb;
}

.casper-external-container .casper-panel {
   border-top: none;
   border-bottom: none;
   margin-bottom: 0;
}

.casper-external-container .casper-panel:last-of-type {
   border-bottom: 1px solid #cdcbcb;
}

.casper-external-container .casper-panel .casper-panel-header {
   box-shadow: none;
   height: auto;
   text-transform: lowercase;
}

.casper-external-container .casper-panel-content {
   background-color: #f9f9f9;
   margin: 0px 10px;
   padding: 10px 0px;
}

.casper-external-container [data-setting] + [data-setting] {
   border-top: 1px solid rgba(95,113,101,.5);
}

.casper-userguide-container .casper-panel-content {
   font-size: 9pt;
}

.expanded-settings .casper-setting-container,
.expanded-userguide .casper-userguide-container,
.expanded-usersettings .casper-usersettings-container {
   visibility: visible;
   opacity: 1;
   transition: visibility 500ms linear 750ms,opacity 500ms linear 750ms;
}

button[class*="icon-"] {
   border: none;
   cursor: pointer;
   background-color: transparent;
   font-size: 30px;
   color: #5f7165;
   padding: 0;
   margin: 0;
   width: 40px;
   height: 44px;
}

button[class*="icon-"]:hover {
   color: #000;
}

button[class*="icon-"]:focus {
   outline: none;
}

.casper-panel-header button[class*="icon-"] {
   color: #f0f0f0;
   line-height: 44px;
}

.casper-panel-header button[class*="icon-"]:hover {
   color: #fff;
}

.right.casper-icon {
   position: absolute;
   top: 0;
   right: 0;
}

.time-current {
   box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
   position: relative;
   min-height: 40px;
   line-height: 30px;
}

[data-role="live"] {
   cursor: pointer;
}
[data-role="live"], [data-role="replay"] {
   padding-left: 40px;
}
[data-role="live"] > .svg-icon, [data-role="replay"] > .svg-icon {
   top: 50%;
   left: 20px;
}

[data-role="time"] {
   margin: 5px;
   border: 1px solid transparent;
   display: inline-block;
   padding: 0 5px;
   width: 250px;
   border-radius: 3px;
   cursor: pointer;
   white-space: nowrap;
}

[data-role="time"]:hover {
   background-color: #fff;
   border: 1px solid #cbcbcb;
}

.minimized-panel .time-panel {
   display: block;
}

.minimized-panel .time-panel > * {
   display: none;
}
/*
.minimized-panel .time-panel:before {
   content: "\e619";
   font-family: icomoon;
   display: block;
   font-size: 40px;
   line-height: 40px;
   color: #fff;
   background-color: #5f7165;
}
*/
.minimized-panel.legend-panel > div {
   display: block;
   height: 100%;
}

.minimized-panel.legend-panel .casper-palette {
   border-spacing: 0;
   display: block;
   height: 100%;
   padding: 0;
}

.minimized-panel.legend-panel .casper-panel-header {
   display: none;
}

.minimized-panel.legend-panel .casper-palette-header {
   display: none;
}

.minimized-panel.legend-panel .casper-palette-group,
.minimized-panel.legend-panel .casper-palette-table {
   height: 100%;
}

.minimized-panel.legend-panel .casper-palette-label {
   display: none;
}

.minimized-panel.legend-panel .casper-palette-item {
   float: left;
   margin: 0;
   height: 100%;
}

.minimized-panel.legend-panel .casper-palette-swatch {
   float: left;
   height: 100%;
   margin: 0;
   width: 100%;
}

.minimized-panel.legend-panel .casper-palette-swatch[style*="color"] {
   border: 10px solid;
}

.meteo-panel {
   height: 60px;
   font-size: 36px;
   line-height: 60px;
   color: #fff;
   position: relative;
}

.minimized-panel.meteo-panel .meteo-classification {
   display: block;
}

.meteo-panel:before {
   top: 50%;
   margin-top: -20px;
}

.meteo-panel:after {
   top: 50%;
   margin-top: -14px;
}

.meteo-classification {
   height: 58px;
   padding: 0 50% 0 90px;
}

.meteo-classification:before {
   font-family: icomoon;
   font-size: 50px;
   position: absolute;
   left: 20px;
   top: -5px;
}

.minimized-panel .meteo-classification:before {
   left: 8px;
   top: -13px;
   font-size: 30px !important;
}

.class-TS:before {
   content: "\e60e";
}

.class-SHRA:before {
   content: "\e60c";
}

.class-RAIN:before {
   content: "\e60b";
}

.class-SNOW:before {
   content: "\e60d";
}

.class-OVC:before {
   content: "\e601";
}

.sun-up.class-SCT:before, .sun-up.class-FEW:before {
   content: "\e602";
   top: 2px;
}

.minimized-panel .sun-up.class-SCT:before, .minimized-panel .sun-up.class-FEW:before {
   top: -9px;
   left: 6px;
}

.sun-down.class-SCT:before, .sun-down.class-FEW:before {
   content: "\e603";
   top: -1px;
}

.minimized-panel .sun-down.class-SCT:before, .minimized-panel .sun-down.class-FEW:before {
   top: -12px;
   left: 7px;
}

.sun-up.class-SKC:before {
   content: "\e604";
   top: -2px;
}

.minimized-panel .sun-up.class-SKC:before {
   top: -11px;
   left: 5px;
}

.sun-down.class-SKC:before {
   content: "\e60a";
   top: 0;
   font-size: 60px;
}

.minimized-panel .sun-down.class-SKC:before {
   top: -10px;
   left: 5px;
}

.meteo-classification:after {
   content: "\00b0";
}

.meteo-wind {
   position: absolute;
   width: 50%;
   top: 0;
   right: 0;
   height: 60px;
}

.meteo-winddir {
   position: absolute;
   top: 10px;
   left: 20px;
   display: inline-block;
   font-family: icomoon;
   width: 40px;
   height: 40px;
   border-radius: 20px;
   border: 3px solid rgba(255,255,255,0.2);
   transition: transform 1s ease-out;
   -webkit-transform-origin: 20px 20px;
   -moz-transform-origin: 20px 20px;
   -ms-transform-origin: 20px 20px;
   transform-origin: 20px 20px;
}

.meteo-winddir:before {
   position: relative;
   left: -10px;
   top: -2px;
   line-height: 38px;
   font-size: 60px;
   content: "\e61c";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.meteo-windspeed {
   margin-left: 70px;
}

.meteo-windspeed:after {
   content: "kts";
   font-size: 16px;
}

.sun-up.class-OVC, .sun-up.class-TS, .sun-up.class-RAIN, .sun-up.class-SNOW {
   background-color: rgb(123,141,166);
}

.sun-up.class-SCT, .sun-up.class-FEW, .sun-up.class-SHRA {
   background-color: rgb(99,149,183);
}

.sun-up.class-SKC {
   background-color: rgb(76,129,188);
}

.sun-down.class-OVC, .sun-down.class-TS, .sun-down.class-RAIN, .sun-down.class-SNOW {
   background-color: rgb(84,98,106);
}

.sun-down.class-SCT, .sun-down.class-FEW, .sun-down.class-SHRA {
   background-color: rgb(70,87,126);
}

.sun-down.class-SKC {
   background-color: rgb(35,44,113);
}


/**
 * Search panel
 */
.minimized-panel.search-panel button{
   display: block;
}

.search-panel input {
   background-color: #FFF;
   border: 1px solid #f0f0f0;
   border-radius: 3px;
   height: 30px;
   margin: 5px;
   padding: 0px 5px;
   width: 250px;
}

.search-panel input:focus, .search-panel input:hover {
   border: 1px solid #cbcbcb;
   outline: none;
}

.search-panel input:focus {
   box-shadow: inset -1px 1px 4px rgba(0,0,0,0.1);
}

.search-panel [data-role="submit"] > path {
   display: none;
}
.search-panel [data-role="submit"].icon-clear {
   padding: 3px;
}
.search-panel [data-role="submit"].icon-submit > #magnifier,
.search-panel [data-role="submit"].icon-clear > #cross {
   display: block;
}

.search-panel-results {
   max-height: 150px;
   overflow: auto;
   border-bottom: 5px solid transparent;
}

.search-panel-result {
   clear: both;
   cursor: default;
   float: left;
   height: 24px;
   position: relative;
   width: 100%;
}
.search-panel-result:hover > .hover {
   background-color: rgba(95,113,101,.5);
}

.search-panel-result > .container,
.search-panel-result > .hover {
   height: 100%;
   width: 100%;
}
.search-panel-result > .container {
   padding: 0px 10px;
   position: relative;
   z-index: 1;
}
.search-panel-result > .hover {
   left: 0;
   position: absolute;
   top: 0;
   z-index: 0;
}
.search-panel-result .svg-button {
   padding: 2px;
}
.search-panel-result .svg-button.right {
   top: 12px;
}
.search-panel-result .info {
   float: left;
   line-height: 24px;
   position: relative;
}

.search-panel-result.selected .svg-button,
.search-panel-result:hover .svg-button {
   fill: rgba(255,255,255,.667);
}
.search-panel-result.selected .svg-button:hover,
.search-panel-result:hover .svg-button:hover {
   fill: #FFF;
}

.search-panel-result:nth-child(2n+1) > .container {
   background-color: rgba(0,0,0,.1);
}

.search-panel-result .casper-icon {
   font-size: 20px;
   width: 20px;
   height: 20px;
   opacity: 0;
}

.search-panel-result:hover .casper-icon {
   opacity: 0.5;
}

.search-panel-result .casper-icon:hover {
   opacity: 1;
}

.search-panel-result:hover,
.search-panel-result.selected {
   color: #fff;
}
.search-panel-result.selected {
   background-color: #5f7165;
}

/**
 * home panel
 */
.minimized-panel.home-panel button:before {
   content: "\e620";
}

/**
 * flight panel
 */
.flight-panel img {
   width: 100%;
   max-height: 250px;
}

.aircraft-photo-container {
   max-height: 250px;
}

.flight-panel table {
   width: 100%;
   table-layout: fixed;
   word-wrap: break-word;
}

.flight-panel td {
   vertical-align: top;
}

.flight-details td:first-child {
   color: #000;
   white-space: nowrap;
   margin-right: 5px;
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.flight-details td:first-child:after {
   content: ":";
}

.airport.casper-tooltip {
   content: attr(data-airport);
}

.airport.casper-tooltip + .airport.casper-tooltip {
   margin-left: 20px;
}

.airport.casper-tooltip + .airport.casper-tooltip:before {
   content: "\2192";
   position: absolute;
   left: -20px;
   width: 20px;
   text-align: center;
}

.airport.casper-tooltip[data-airport=""] + .airport.casper-tooltip:before {
   content: "";
}

.airport.casper-tooltip + .airport.casper-tooltip[data-airport=""]:before {
   content: "";
}

.speed-container {
   display: table;
   table-layout: fixed;
   width: 100%;
   border-top: 1px solid #cdcbcb;
}

.speed-button {
   cursor: pointer;
   text-align: center;
}

.speed-button:after {
   content: "x";
}

.active.speed-button {
   cursor: default;
}

.disabled.speed-button {
   opacity: 0.5;
   cursor: not-allowed;
}

.datetime-editor {
   background-color: #f9f9f9;
   position: relative;
   min-height: 40px;
   z-index: 1;
}

.datetime-editor > .flex-container {
   padding-right: 30px;
}

.date-editor, .time-editor {
   display: inline-block;
   position: relative;
   margin: 5px;
}

.datetime-button {
   background-color: #dde1de;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border: 1px solid #f0f0f0;
   padding: 5px;
   right: -15px;
   top: 15px;
   width: 30px;
}

.datetime-input {
   border: 1px solid #f0f0f0;
   border-radius: 4px;
   padding: 0 30px 0 5px;
   width: 100%;
   background-color: transparent;
   height: 30px;
   outline: none;
}

.datetime-input[title] {
   background-color: rgb(255,181,86);
}

.datetime-input:hover, .datetime-input:focus {
   border: 1px solid #cbcbcb;
}

.datetime-input:hover + button.datetime-button, .datetime-input:focus + button.datetime-button {
   border: 1px solid #cbcbcb;
}

.datetime-input:focus {
   box-shadow: inset -1px 1px 4px rgba(0,0,0,0.1);
}

.right.datetime-set #pause {
   display: none;
}

.datetime-picker {
   border-top: 1px solid #cbcbcb;
   background-color: #f9f9f9;
}

.skip-container {
   display: table;
   table-layout: fixed;
   width: 100%;
   border-top: 1px solid #cdcbcb;
   padding: 3px 5px;
   border-spacing: 5px;
   line-height: initial;
}

.skip-button {
   background-color: #f9f9f9;
   cursor: pointer;
   text-align: center;
   border: 1px solid #f0f0f0;
   border-radius: 3px;
   padding: 2px;
}

.skip-button:hover {
   background-color: #fff;
   border: 1px solid #cbcbcb;
   color: #000;
}

.skip-button:before {
   content: '+' attr(data-preset);
   text-transform: lowercase;
}

.skip-button[data-offset^="-"]:before, .skip-button[data-offset^="+"]:before {
   content: attr(data-preset);
}

/* Checkboxes, lists of checkboxes */

.casper-setting-single label {
   line-height: 21px;
   display: inline-block;
}

.casper-setting-single input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   background-color: #fafafa;
   border: 1px solid #d3d3d3;
   border-radius: 26px;
   box-shadow: inset 0 0 0 1px #d3d3d3;
   cursor: pointer;
   height: 28px;
   position: relative;
   width: 44px;
   outline: none;
   vertical-align: top;
   transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
   float: right;
   margin-right: 10px;
}

.casper-setting-single input[type="checkbox"]:after {
   background-color: #fff;
   border: 1px solid #d3d3d3;
   border-radius: 24px;
   box-shadow: inset 0 -3px 3px hsla(0,0%,0%,.025), 0 1px 4px hsla(0,0%,0%,.15), 0 4px 4px hsla(0,0%,0%,.1);
   content: '';
   display: block;
   height: 24px;
   left: 0;
   position: absolute;
   right: 16px;
   top: 0;
   transition: border .25s .15s, left .25s .1s, right .15s .175s;
}

.casper-setting-single input[type="checkbox"]:checked {
   border-color: #53d76a;
   box-shadow: inset 0 0 0 13px #53d76a;
   padding-left: 18px;
   transition: border .25s, box-shadow .25s, padding .25s .15s;
}

.casper-setting-single input[type="checkbox"]:checked:after {
   border-color: #53d76a;
   left: 16px;
   right: 0;
   transition: border .25s, left .15s .25s, right .25s .175s;
}

.casper-setting-list input, .casper-setting-dropdown input {
   display: none;
}

.casper-setting-list label, .casper-setting-dropdown label {
   display: block;
   width: 100%;
   padding: 1px 0;
   position: relative;
   cursor: pointer;
   border-top: 1px solid #EFEFEF;
}

.casper-setting-dropdown {
   height: 30px;
   cursor: pointer;
   position: relative;
   white-space: nowrap;
}

.casper-setting-dropdown > label {
   display: none;
}

.casper-setting-dropdown:before {
   display: block;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   content: attr(data-summary);
   padding: 6px 10px;
}

.casper-setting-scroller {
   max-height: 215px;
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 10;
   position: absolute;
   top: 0;
   width: 100%;
   border: 1px solid #cdcbcb;
   background-color: #f9f9f9;
}

.no-padding label {
   padding: 6px 10px;
}

.casper-setting-list label:first-of-type, .casper-setting-dropdown label:first-of-type {
   border-top: none;
}

.casper-setting-dropdown label:last-of-type {
   border-bottom: 1px solid #cdcbcb;
}

.casper-setting-list input + label:hover:after, .casper-setting-dropdown input + label:hover:after {
   font-family: 'icomoon';
   content: "\e61d";
   color: #CCC;
   font-size: 16px;
   position: absolute;
   right: 10px;
}

.casper-setting-list input:checked + label:after, .casper-setting-dropdown input:checked + label:after {
   font-family: 'icomoon';
   content: "\e61d";
   color: #5EB337;
   font-size: 16px;
   position: absolute;
   right: 10px;
}

/* Hide non-standard flight filters */
#fl-class-VEH + label, #fl-class-IBK + label, #fl-class-TAX + label, #fl-class-LOC + label {
   display: none;
}

/* Login */


.login {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -100px;
   margin-top: -100px;
   width: 200px;
   height: 200px;
}

.login-form {
   padding: 50px 20px 10px;
}

.login-form:before {
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   text-align: center;
   width: 100%;
   height: 40px;
   background-color: #5f7165;
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
   color: #fff;
   background-repeat: no-repeat;
   background-position: 15px 50%;
   background-image: url(../../../../images/casper_logo.svg);
}

.login-form-row {
   margin: 5px 0;
}

.forgot-password-link {
   display: none;
}

.login-button {
   float: right;
   margin: 5px 5px 0 0;
}

.login input[type="text"], .login input[type="password"] {
   width: 160px;
}

/*
 * icons
 */
.icon-email:before {
   background-image: url("../images/mail_idle.svg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 24px;
   content: "";
   height: 40px;
   left: 0;
   position: absolute;
   top: 0;
   width: 40px;
}
.icon-email:hover:before {
   background-image: url("../images/mail_hover.svg");
}

/*
 * complaint
 */
.casper-complaint {
   font-size: 12px;
   line-height: 28px;
   margin: 5px 10px;
}

/*
 * Airport
 */
.casper-airport {
   line-height: 28px;
   margin: 5px 10px;
}

/*
 * clock picker 
 */
.clockpicker-popover {
   width: auto;
}
.clockpicker-popover .popover-content {
   width: 210px;
   margin: 0 auto;
}

.time-panel .svg-icon {
   position: absolute;
   width: 20px;

   transform: translate(-50%, -50%);
}

/*
 * svg-button
 */
.svg-button { 
   fill: #919e95;
   pointer-events: all;
}
.svg-button > * { pointer-events: none; }
.svg-button:hover { fill: #5f7165; }

.svg-button.white { fill: rgba(255,255,255,0.75); }
.svg-button.white:hover { fill: rgba(255,255,255,1); }

.svg-button[data-role='play'].icon-play  #pauseThin { display: none; }
.svg-button[data-role='play'].icon-play  #pauseThick { display: none; }
.svg-button[data-role='play'].icon-play  #playThick { display: none; }

.svg-button[data-role='play'].icon-play:hover  #playThin { display: none; }
.svg-button[data-role='play'].icon-play:hover  #playThick { display: block; }

.svg-button[data-role='play'].icon-pause  #pauseThick { display: none; }
.svg-button[data-role='play'].icon-pause  #playThin { display: none; }
.svg-button[data-role='play'].icon-pause  #playThick { display: none; }

.svg-button[data-role='play'].icon-pause:hover  #pauseThin { display: none; }
.svg-button[data-role='play'].icon-pause:hover  #pauseThick { display: block; }

.svg-button[data-role='userguide-toggle'] {
   right: 25px;
}

.casper-panel .svg-button[data-role="collapse-all"] {
   display: none;
}

/*
 * Location Overlay
 */
.casper-location-layer [data-role] {
   position: absolute;
   min-width: 20px;

   transform: translate(-50%, -50%);
}

.casper-location-layer .location-label {
   z-index: 9999;
   border-radius: 4px;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   padding: 0.4em;
   border: 1px solid #C6C6C6;
   width: auto;
   //min-width: 50px;
   color: #000;
   background-color: #5f7165;
   font-size: 80%;
   text-align: center;
   cursor: url(closedhand.cur), default;
   
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   
   left: 0px;
   top: 0px;
   
   transform-origin: 30px 30px;
   transform: translate(-50%, -100%);
}

.casper-location-layer .location-label .tip {
   position: absolute;
   bottom: -11px;
   left: 50%;
   margin-left: -6px;
   width: 12px;
   height: 12px;
   overflow: hidden;
   pointer-events: none;
}

.casper-location-layer .location-label .tip:after {
   background-color: #5f7165;
   border: 1px solid #C6C6C6;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
   content: "";
   left: 0px;
   height: 12px;
   position: absolute;
   top: -6px;
   width: 12px;
   
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.casper-location-layer .location-label .svg-icon {
   fill: #FFF;
   width: 20px;
}

/*
 * location panel
 */
.location-panel input {
   border: 1px solid #f0f0f0;
   background-color: white;
   padding: 5px;
   margin: 5px 0 0 5px;
   width: 250px;
   border-radius: 3px;
}

.location-panel input:focus, .location-panel input:hover {
   border: 1px solid #cbcbcb;
   outline: none;
}

.location-panel input:focus {
   box-shadow: inset -1px 1px 4px rgba(0,0,0,0.1);
}

.location-panel #location-icon > * { display: none; }
.location-panel #location-icon.location-search > #magnifier { display: block; }
.location-panel #location-icon.location-delete > #cross { display: block; }

/**
 * ZoomControl
 */
#map .control-container {
   margin-right: 10px;
   top: 75px;
}

.control-button {
   background-color: #FFF;
   cursor: pointer;
   height: 26px;
   padding: 5px;
   width: 26px;
}
.control-button:hover {
   background-color: #F4F4F4;
}

.control-container > .control-button,
.control-button-container {
   box-shadow: 0 1px 5px rgba(0,0,0,0.65);
   border-radius: 4px;
}

.control-container > .control-button,
.control-button-container .control-button:first-child {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
}

.control-container > .control-button.
.control-button-container .control-button:last-child {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
}

/**
 * User Management Panel
 */

.user-list-container, .user-list,
.user-header, .user-row, .user-cell {
   float: left;
   position: relative;
}

.user-list { 
   background-color: #FFF;
   border: 1px solid #e6e6e6;
   width: 100%;
}

.user-header, .user-row {
   clear: both;
   line-height: 24px;
   width: 100%;
}
.user-header {
   height: 32px;
   margin-bottom: 5px;
}
.user-row:nth-child(odd) {
   background-color: rgba(0,0,0,.05);
}

.user-cell[data-cell] > .container {
   float: left;
   height: 100%;
   line-height: inherit;
   padding: 4px 3px;
   position: relative;
   width: 100%;
}

.user-cell[data-cell] .user-input {
   display: block;
   min-height: 100%;
   outline-color: #5f7165;
   width: 100%;
}
.user-cell[data-cell] .user-input.error {
   border-color: rgba(255,0,0,.5) !important;
   color: #FF0000 !important;
   outline-color: #FF0000 !important;
}

.user-cell[data-cell='actions'] .action-button-container {
   float: left;
   position: relative;
   width: auto;
}

.action-button-container > .svg-button {
   float: left;
   height: 24px;
   padding: 4px;
   position: relative;
   width: 1vw;

   transform: translate(0,0);
}

.user-row:not(.user-edit) .user-input,
.user-row.user-edit .user-cell .user-value {
   display: none;
}

.action-button-container [data-edit-role='edit'] #save,
.action-button-container [data-edit-role='save'] #edit {
   display: none;
}

.action-button-container [data-edit-role='edit'] #edit #diagonal { opacity: .25; }
.action-button-container [data-edit-role='edit'] #edit #lines { opacity: .75; }

.action-button-container [data-edit-role='save'] #save #textBackground,
.action-button-container [data-edit-role='save'] #save #diskBackground {
   display: none;
}

/**
 * Stand Editor
 */
.stand-editor-container, .stand-editor-types, .stand-editor-type,
.stand-editor-type > .header,
.stand-editor-type > .content,
.stand-editor-type > .content .button-container,
.stand-editor-type > .output {
   float: left;
   position: relative;
}

.stand-editor-container .input-container > input {
   display: block;
   min-height: 100%;
   outline-color: #5f7165;
   width: 100%;
}

/**
 * Login Panel
 */

.login-panel {
   box-shadow: 0 0 4px rgba(0,0,0,.2);
   left: 50%;
   padding: 3px;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 300px;
}

/**
 * Casper Button
 */
.casper-button {
   background-color: #5F7165;
   box-shadow: 0 1px 4px rgba(0,0,0,.2);
   color: #FFF;
   float: left;
   height: 24px;
   line-height: 18px;
   padding: 3px 3px 3px 10px;
   pointer-events: all;
   min-width: 120px;

   transition: box-shadow .25s;
}
.casper-button:hover { box-shadow: 0 1px 4px rgba(0,0,0,.4); }

.casper-button > .label {
   display: block;
   float: left;
   height: 100%;
   line-height: inherit;
   margin-right: 20px;
   opacity: 0.75;
   text-align: left;
   text-transform: uppercase;

   transition: opacity .25s;
}
.casper-button:hover > .label { opacity: 1; }

.casper-button > .icon-container {
   float: right;
   height: 100%;
   padding: 2px;
   width: 1vw;
}

.casper-button > .icon-container > .icon {
   fill: #FFF;
   float: right;
   height: 100%;
   opacity: .75;
   width: 100%;

   transition: opacity .25s;
}
.casper-button:hover > .icon-container > .icon { opacity: 1; }


/* ==================== *
 * ## IE 10+ styling ##
 * ==================== */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .casper-button {
      line-height: 24px;
   }
}


/* ========================= *
 * ## IE Edge 12+ styling ##
 * ========================= */

 @supports (-ms-accelerator:true) {
}