/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27-Oct-2017, 15:38:13
    Author     : Weert and Weggemans
*/


.st3-map {
    z-index: 10;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

button.st3-header {
    cursor: pointer;
    background-color: #91a3c5;
    color: #424f5d;
    border: 0px;
}

button.st3-header-notactive {
    cursor: pointer;
    background-color: #424f5d;
    color: #91a3c5;
    border: 0px;
}


/** LIVE HEADER
 */
.st3-header-on {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    z-index: 18;
    position: absolute;
    left: 2em;
    top: 0em;
    width: 6em;
    height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    background-color: #91a3c5;
    color: #424f5d;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}
.st3-header-off {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    z-index: 18;
    position: absolute;
    left: 8em;
    top: 0em;
    width: 6em;
    height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    background-color: #424f5d;
    color: #91a3c5;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}

/** AIRPLANE PANEL
 */
.st3-control-left {
    font-size: 15px;
    z-index: 15;
    position: absolute;
    left: 0px;
    top: 2em;
    width: 14.9em;
    height: 90%;
    background-color: #91a3c5;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}

.st3-control-right {
    font-size: 15px;
    z-index: 15;
    float: right;
    position: absolute;
    right: 0;
    top: 2em;
    width: 300px;
    background-color: #91a3c5;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}
.st3-control-light {
    background-color: #91a3c5;
}

.st3-header-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 200;
    font-size: x-small;
    text-align: center;
    color: #8C939D;
}

.st3-header-medium {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: medium;
    text-align: center;
    color: #8C939D;
}

.st3-header-big-1-alt {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 200;
    font-size: larger;
    text-align: center;
    color: #424f5d;
}

.st3-header-small-alt {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 200;
    font-size: x-small;
    text-align: center;
    color: #424f5d;
}


.st3-value-medium {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-size: medium;
    text-align: center;
    color: #91a3c5;
}

.st3-value-dark-medium {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: medium;
    text-align: center;
    color: #424f5d;
}


.st3-value-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-size: x-small;
    text-align: center;
    color: #91a3c5;
}

.st3-value-normal {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: smaller;
    text-align: center;
    color: #91a3c5;
}

.st3-value-dark-normal {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: smaller;
    text-align: center;
    color: #424f5d;
}

.st3-value-dark-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: x-small;
    text-align: center;
    color: #424f5d;
}


/**********************************************************
  MINI MAP
  ****/

/*.st3-mini-map-image {*/
/*width : 300px;*/
/*height : 150%;*/
/*}*/

.mini-map-outsideWrapper {
    /*width:450px; height:347px;*/
    width: 300px;
    height: 346px;
    margin: 0px 0px;
    /*border:1px solid blue;*/
}

.mini-map-insideWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.st3-mini-map-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

/**********************************************************
  WINDOW INTERSECT COUNTING
  ****/
.st3-heightpanel {
    position: absolute;
    background-color: #424f5d;
    z-index: 20;
    width: 200px;
    height: 450px;
    border: 0px;
}

button.st3-control-destroy-button {
    z-index: 14;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d;
    border: 0px;
}

.st3-heightpanel-destroy-2-col {
    color: #8C939D;
    display: table-cell;
    border-right-width: 0px;
    width: 176px;
    height: 24px;
}

.st3-heightpanel-destroy {
    float: left;
    /*margin-right: 5px;*/
    color: #8C939D;
    z-index: 14;
    height: 24px;
    /*width: 24px;*/
    width: 100%;
}

.st3-control-button-destroy {
    height: 16px;
    width: 16px;
    cursor: pointer;
}

.st3-heightpanel-date-2-col {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: small;
    text-align: right;
    color: #8C939D;
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 50%;
    height: 20px;
    overflow: hidden;
}

.st3-heightpanel-time-2-value {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: small;
    text-align: left;
    color: #91a3c5;
    display: table-cell;
    border-right-width: 0px;
    float: right;
    width: 50%;
    height: 20px;
    overflow: hidden;
}


.st3-heightpanel-cell-2-col {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: medium;
    text-align: right;
    color: #8C939D;
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 45%;
    height: 30px;
    overflow: hidden;
}

.st3-heightpanel-cell-2-value {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: medium;
    text-align: left;
    color: #91a3c5;
    display: table-cell;
    border-right-width: 0px;
    float: right;
    width: 45%;
    height: 30px;
    overflow: hidden;
}

.canvas {
    z-index: 20;
    background-color: #424f5d;
    /*display: block;*/
}

.st3-heightpanel-fromto-box {
    display: table;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: x-small;
    text-align: left;
    padding-left: 16px;
    color: #91a3c5;
}

.st3-heightpanel-fromto {
    width: 50px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: small;
    color: #91a3c5;
}

.st3-heightpanel-fromto-value {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: small;
    color: #91a3c5;
}



/*********************************************************/


button.st3-germany {
    left: 0px;
    top: 0px;
    height: 3em;
    width: 3em;
    cursor: pointer;
    background-color: #91a3c5;
    color: #424f5d;
    transition: 0.5s;
    border: 0px;
}


/**********************************************************
  ACCORDION BUTTON
  ****/

.st3-control-button-1 {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}

.st3-control-button-2 {
    position: fixed;
    right: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}

.st3-control-button-3 {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}

.st3-control-button-address {
    position: fixed;
    right: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}

.st3-control-button-filter {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}

.st3-control-button-replay {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
}



button.st3-control-accordion {
    position: fixed;
    z-index: 14;
    left: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #91a3c5;
    color: #424f5d;
    border: 0px;
}

button.st3-control-accordion-address {
    position: fixed;
    z-index: 16;
    z-index: 16;
    right: 310px;
    top: 0px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d66;
    color: #EAD94E;
    border: 0px;
}

button.st3-control-accordion-replay {
    position: fixed;
    z-index: 14;
    right: 500px;
    top: 0px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d;
    color: #EAD94E;
    border: 0px;
}


button.st3-control-accordion-filter {
    position: fixed;
    z-index: 14;
    right: 300px;
    top: 0px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d;
    color: #EAD94E;
    border: 0px;
}

button.st3-control-accordion-minimap {
    position: fixed;
    z-index: 16;
    right: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d;
    color: #EAD94E;
    border: 0px;
}

button.st3-control-accordion-legend {
    position: fixed;
    z-index: 14;
    right: 0px;
    /*bottom: 70px;*/
    bottom: 90px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #aaaaaa;
    color: #EAD94E;
    border: 0px;
}


button.st3-control-accordion.active,
button.st3-control-accordion:hover {
    background-color: #91a3c5;
}



/**********************************************************
  TIME CONTROL
  ****/
.st3-current-time {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    text-align: center;
    background-color: #91a3c5;
    padding: 2px;    

}

/*************************************************************/

.st3-plane-info {
}

.st3-aircraft-image-box {
    border-bottom: 0px;
    height: 150px;
}
 
.st3-aircraft-image {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    background-position: 50%,50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    /*position: relative;*/
    /*margin: 0;*/
    /*background: #424f5d;*/
    /*width: auto;*/
    /*height: auto;*/
    /*max-width: 100%;*/
    /*max-height: 30em;*/
    /*vertical-align: bottom;*/
    /*display: block;*/
}

/******************************
  CALLSIGN BOX
  ****/
.st3-aircraft-info-callsign {
    display: table;
    background-color: #424f5d;
    height: 25px;
    width: 100%;    
    padding-top: 3%;
}



/******************************
  ROUTE BOX
  ****/
.st3-route-info {
    display: table;
    background-color: #424f5d;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

/******************************
  FLIGHT HEIGHTS BOX
  ****/
.st3-flight-heights {
    display: table;
    background-color: #424f5d;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

/******************************
  DARK BOX
  ****/
.st3-flight-dark-header {
    display: table;
    background-color: #424f5d;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}


/******************************
  FLIGHT FILTERS BOX
  ****/
.st3-flight-filters {
    background-color: #424f5d;
    width: 200px;
    font-size: 15px;
    z-index: 15;
    float: right;
    position: absolute;
    right: 300px;
    height: 100px;
    top: 2em;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}

.st3-filter-box {
    padding-left: 20%;
    padding-right: 20%;
}

.st3-filter {
    position: relative;
    display: block;
    border: hidden;
    background-color: #91a3c5;
    width: 100%;
    align-content: center;
}

/******************************
  FLIGHT REPLAY
  ****/

#replaySlider-id .slider-handle {
    /*background: #91a3c5;*/
    background: #cc6633;
    /* background: #8C939D; */
}

.st3-flight-replay {
    background-color: #424f5d;
    width: 420px;
    font-size: 15px;
    z-index: 15;
    float: right;
    position: absolute;
    right: 500px;
    height: 150px;
    top: 2em;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}

.st3-replay-box {
    padding-left: 3%;
    padding-right: 3%;
}

.st3-replay-controlsbox {
    /*padding-left: 3%;*/
    /*padding-right: 3%;*/
    width: 100%;
}


.st3-replay {
    position: relative;
    display: block;
    border: hidden;
    background-color: #91a3c5;
    width: 100%;
    align-content: center;
}

.st3-replay-image {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    /*top: 100px;*/
    /*left: 0px;*/
}



button.st3-replay {
    left: 0px;
    top: 0px;
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-color: #91a3c5;
    color: #424f5d;
    transition: 0.5s;
    border: 0px;
}

.btn {
    background-color: #8C939D; /*#91a3c5; */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 5px 1px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
    background-color: #424f5d;
}

.st3-replay-sliderbox {
    height: 20px;
    width: 400px;
}

.st3-replay-slider {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 60%;
    overflow: hidden;
    padding-left: 3%;
}

.st3-replay-time {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 40%;
    overflow: hidden;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.select-style {
    width: 70px;
    height: 38px;
    border-radius: 3px;
    float: right;
    margin-right: 5px;
    background-color: #8C939D;
    border: none; /* Remove borders */
    /*color: white; !* White text *!*/
    padding: 5px 1px; /* Some padding */
    font-size: 16px; /* Set a font size */
    color: #424f5d;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
    display: none;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}


/******************************
  TRAVEL BOX
  ****/
.st3-travel-box {
    display: table;
    background-color: #91a3c5;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}


/******************************
  AIRCRAFT INFO
  **/
.st3-aircraft-info {
    display: table;
    background-color: #424f5d;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.st3-aircraft-icon {
    max-width: 40%;
    max-height: 40%;
    padding-top: 10%;
}

.st3-aircraft-info-col {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 33%;
    overflow: hidden;
}

.st3-cell-2-col {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 50%;
    overflow: hidden;
}

.st3-cell-3-col {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 33%;
    overflow: hidden;
}

/******************************
  Aircraft selected and hovered popup
  **/
.st3-aircraft-popup {
    position: absolute;
    background-color: #424f5d;
    opacity: 0.9;
    filter:alpha(opacity=90);
      -moz-opacity:0.9;
      -khtml-opacity: 0.9;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 0px;
    border: 1px solid #91a3c5;
    bottom: 12px;
    left: -50px;
    min-width: 210px;
}

.st3-aircraft-popup:after, .st3-aircraft-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.st3-aircraft-popup:after {
    border-top-color: #424f5d;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.st3-aircraft-popup:before {
    border-top-color: #424f5d;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.st3-aircraft-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.st3-aircraft-popup-closer:after {
    content: "✖";
}

.st3-aircraft-popup-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: x-small;
    text-align: left;
    color: #8C939D;
}

st3-aircraft-popup-table {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 100%;
    overflow: hidden;
}

.st3-aircraft-popup-cell-2-col {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: x-small;
    text-align: right;
    color: #8C939D;
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 35%;
    overflow: hidden;
}

.st3-aircraft-popup-cell-2-value {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: x-small;
    text-align: left;
    color: #91a3c5;
    display: table-cell;
    border-right-width: 0px;
    float: right;
    width: 60%;
    overflow: hidden;
}


.st3-popup {
    position: absolute;
    background-color: #424f5d;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 0px;
    border: 1px solid #91a3c5;
    bottom: 12px;
    left: -50px;
    min-width: 130px;
}

.st3-popup:after, .st3-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.st3-popup:after {
    border-top-color: #424f5d;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.st3-popup:before {
    border-top-color: #424f5d;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.st3-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.st3-popup-closer:after {
    content: "✖";
}

.st3-popup-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: x-small;
    text-align: left;
    color: #8C939D;
}

.st3-dfs-logo-box {
    position: absolute;
    z-index: 15;
    /*right: 5px;*/
    bottom: 20px;
    right: 0;
    /*bottom: 0;*/
}

.st3-dfs-logo {
    -webkit-user-drag: none;
}

.st3-nlr-logo-box {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

.st3-nlr-logo {
    -webkit-user-drag: none;
}

.st3-pufferung {
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: xx-large;
    color: #424f5d;
    width: 100px;
    height: 50px;
    margin-left: -50px;
    margin-top: -25px;
}


/** SUMMARY PANEL
 ****************************************************
 */
.st3-control-left-summary {
    font-size: 15px;
    z-index: 15;
    position: absolute;
    left: 0px;
    top: 2em;
    width: 14.9em;
    height: 90%;
    background-color: #91a3c5;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
}

.st3-header-fromto-box {
    display: table;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: x-small;
    text-align: left;
    padding-left: 16px;
    color: #424f5d;
}


.st3-header-fromto {
    width: 50px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    font-size: small;
    color: #424f5d;
}

.st3-header-fromto-value {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: small;
    color: #424f5d;
}



/******************************
  DATE INPUT
  ****/
.st3-date-input {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    text-align: center;
    color: #424f5d;
    background-color: #cccccc;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    border: 0px;
}

/******************************
  RETRIEVE FLIGHTS
  ****/
.st3-retrieve-flights {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    text-align: center;
    color: #424f5d;
    background-color: #cccccc;
    border: #171a1d ridge thin;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    cursor: pointer;
}

.st3-retrieve-flights:disabled {
    color: #999999;
    background-color: #91a3c5;
}

.st3-cancel-flights {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    text-align: center;
    color: #424f5d;
    background-color: #cccccc;
    width: 100%;
    padding-top: 1%;
    padding-bottom: 1%;
    border: 0px;
    cursor: pointer;
}

.st3-cancel-flights:disabled {
    color: #999999;
    background-color: #91a3c5;
}


.st3-flight-type-option {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: small;
    width: 40%;
    height: 100%;
    /*color: #424f5d;*/
    /*background-color: #91a3c5;*/
}

.st3-flight-data-small {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: smaller;
    text-align: right;
    padding-left: 16px;
    color: #424f5d;
}

.st3-flightype {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
    text-align: center;
    color: #424f5d;
    background-color: #91a3c5;
    width: 100%;
    /*padding-top: 1%;*/
    /*padding-bottom: 1%;*/
    border: 0px;
}

/**********************************
 * LEGEND
 */

.st3-control-right-down {
    pointer-events: none;
    font-size: 15px;
    z-index: 15;
    float: right;
    position: absolute;
    right: 0;
    /*bottom: 6.5em;*/
    bottom: 115px;
    width: 140px;
    background-color: transparent;
    overflow: hidden;
    transition: 1.0s;
    max-height: 0%;
    /*border:1px solid white;*/
}

/*******************************
* TOOLTIP
 */

/*.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {*/
/*border-top-color: #ff3d31;*/
/*}*/


/*.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {*/
/*border-right-color: #ff3d31;*/
/*}*/


/*.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {*/
/*border-bottom-color: #ff3d31;*/
/*}*/


/*.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {*/
/*border-left-color: #ff3d31;*/
/*}*/

/*.tooltip.primary .tooltip-inner {*/
/*color: #fff;*/
/*background-color: #ff3d31;*/
/*}*/

.tooltip .tooltip-inner {
    background-color: #cc6633;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #cc6633;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #cc6633;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #cc6633;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #cc6633;
}

/*.tooltip.warning.left  .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {*/
/*border-left-color: #ec971f;*/
/*}*/

/*.tooltip.warning.right  .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {*/
/*border-right-color: #ec971f;*/
/*}*/

/*.tooltip.primary .tooltip-inner          {*/
/*background-color:    #31b0d5;*/
/*}*/
/*.tooltip.primary.top > .tooltip-arrow    { border-top-color:    #337ab7; }*/
/*.tooltip.primary.right > .tooltip-arrow  { border-right-color:  #337ab7; }*/
/*.tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }*/
/*.tooltip.primary.left > .tooltip-arrow   { border-left-color:   #337ab7; }*/

/*.tooltip.info .tooltip-inner          { background-color:    #31b0d5; }*/
/*.tooltip.info.top > .tooltip-arrow    { border-top-color:    #31b0d5; }*/
/*.tooltip.info.right > .tooltip-arrow  { border-right-color:  #31b0d5; }*/
/*.tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }*/
/*.tooltip.info.left > .tooltip-arrow   { border-left-color:   #31b0d5; }*/

/*.tooltip.success .tooltip-inner          { background-color:    #449d44; }*/
/*.tooltip.success.top > .tooltip-arrow    { border-top-color:    #449d44; }*/
/*.tooltip.success.right > .tooltip-arrow  { border-right-color:  #449d44; }*/
/*.tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; }*/
/*.tooltip.success.left > .tooltip-arrow   { border-left-color:   #449d44; }*/

/*.tooltip.warning .tooltip-inner          { background-color:    #ec971f; }*/
/*.tooltip.warning.top  .tooltip-arrow    { border-top-color:    #ec971f; }*/
/*.tooltip.warning.right  .tooltip-arrow  { border-right-color:  #ec971f; }*/
/*.tooltip.warning.bottom  .tooltip-arrow { border-bottom-color: #ec971f; }*/
/*.tooltip.warning.left  .tooltip-arrow   { border-left-color:   #ec971f; }*/

/*.tooltip.danger .tooltip-inner          { background-color:    #d9534f; }*/
/*.tooltip.danger.top > .tooltip-arrow    { border-top-color:    #d9534f; }*/
/*.tooltip.danger.right > .tooltip-arrow  { border-right-color:  #d9534f; }*/
/*.tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }*/
/*.tooltip.danger.left > .tooltip-arrow   { border-left-color:   #d9534f; }*/

/**********************************
 * LOGIN WINDOW
 */

/*!* Bordered form *!*/
/*form {*/
/*border: 3px solid #f1f1f1;*/
/*}*/

/* Full-width input fields */
.myinput[type=text], .myinput[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
.loginbtn {
    /*background-color: #4CAF50;*/
    background-color: #424f5d;
    /*background-color: #91a3c5;*/
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

.loginbtn:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    border: none;
    padding: 10px 18px;
    background-color: #f44336;
    color: white;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    /*position: relative;*/
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.logincontainer {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }

    .cancelbtn {
        width: 100%;
    }
}

/* The Modal (background) */
.loginmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 50; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.loginmodal-content {
    background-color: white;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 30%; /* Could be more or less, depending on screen size */
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 200;
}

.loginmodal-contentTitles {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: medium;
    color: #424f5d;
}

.loginmodal-wronguserpwd {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: medium;
    color: #c00000;
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/*
  Override the ol-scale-line
  see also ol.css for all ol-scale options
*/
.ol-scale-line {
    bottom: 20px;
}

/*
   Override the ol-attribution to put the OSM copyright text to the left instead of default right
   see also ol.css for all attribute options
*/
/*.ol-attribution {*/
/*left: 0px;*/
/*width: 200px;*/
/*text-align: left;*/
/*}*/

/*On request of DFS make the Openlayers copyright background completely transparent*/
.ol-attribution:not(.ol-collapsed) {
    background: rgba(255, 255, 255, 0.0);
}

/* On request of DFS: Put the copyright text a little higher*/
.ol-attribution.ol-uncollapsible {
    bottom: .3em;
    right: 0;
    border-radius: 4px 0 0
}

/*.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}*/
/*.ol-attribution ul{margin:0;padding:0 .5em;color:#000;text-shadow:0 0 2px #fff}*/
/*.ol-attribution li{display:inline;list-style:none}*/
/*.ol-attribution li:not(:last-child):after{content:" "}*/
/*.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}*/
/*.ol-attribution button,*/
/*.ol-attribution ul{display:inline-block}*/
/*.ol-attribution.ol-collapsed ul{display:none}*/
/*.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}*/
/*.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0}*/
/*.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}*/
/*.ol-attribution.ol-uncollapsible button{display:none}*/




/******************************
  USER LOGGED IN
  ****/

.user-info {
    display: table;
    background-color: #424f5d;
    width: 100%;
    /*padding-top: 2%;*/
    /*padding-bottom: 2%;*/

    background-color: #424f5d;
    width: 276px;
    font-size: 15px;
    z-index: 15;
    float: right;
    position: absolute;
    right: 24px;
    height: 24px;
}

.userinfo-cell-2-col {
    display: table-cell;
    border-right-width: 0px;
    float: left;
    width: 80%;
    overflow: hidden;
}

.userinfo-cell-2-value {
    display: table-cell;
    border-right-width: 0px;
    float: right;
    width: 20%;
    overflow: hidden;
}

button.st3-control-logout-button {
    z-index: 14;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-color: #424f5d;
    border: 0px;
}

.logoutimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 16px;
    width: 16px;
    cursor: pointer;
}