/* ================= *
 * ## Meteo Today ##
 * ================= */

.meteo-today .meteo-wind-speed-visual {
    height: 40px;
    position: relative;
    top: 50%;
    width: 40px;

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

.noise-today-bar .meteo-component .meteo-wind-speed-visual {
    float: left;
    height: 24px;
    margin: 1px 0;
    position: relative;
    width: 24px;
}

/* ============================= *
 * ## Noise Today Transitions ##
 * ============================= */

.noise-today-bar,
.noise-today-btn-container,
.noise-today-btn.btn-round,
.noise-today-btn.btn-round .icon {
    transition-delay: .33s;
    transition-duration: .33s;

    -webkit-transition-delay: .33s;
    -webkit-transition-duration: .33s;
}


/* ======================== *
 * ## Noise Today Button ##
 * ======================== */

.noise-today-btn-container { 
    transition-property: background;
    -webkit-transition-property: background;
}
.noise-today-open .noise-today-btn-container {
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.noise-today-btn.btn-round {
    margin: 20px;

    transition-property: background;
    -webkit-transition-property: background;
}
.noise-today-btn.noise-today-open.btn-round { 
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.noise-today-btn.btn-round .icon {
    height: 50%;
    stroke-width: 5px;
    width: 50%;

    transform: rotate(0deg);
    transition-property: transform;

    -webkit-transform: rotate(0deg);
    -webkit-transition-property: -webkit-transform;
}
.noise-today-btn.noise-today-open.btn-round .icon {
    transform: rotate(180deg);
    transition-delay: 0s;

    -webkit-transform: rotate(180deg);
    -webkit-transition-delay: 0s;
}

.noise-today .noise-today-btn {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    left: 50%;
    padding: 10px;
    position: absolute;
    width: 100px;

    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}
.noise-today .noise-today-btn > * { pointer-events: none; }

.noise-today .noise-today-btn .label {
    font-size: 13px;
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
}
.noise-today .noise-today-btn:hover .label { font-weight: bold; }



/* ===================== *
 * ## Noise Today Bar ##
 * ===================== */

.noise-today-bar {
    position: relative;

    transition-property: background;
    -webkit-transition-property: background;
}

.noise-today-bar.noise-today-open { 
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

.noise-today-bar .noise-today-bar-body {
    height: 80px;
    max-width: 1000px;
    padding: 26px 0;
    text-align: center;
    font-weight: bold;
}

.noise-today-bar .noise-today-bar-body .noise-today-elem,
.noise-today-bar .noise-today-bar-body .noise-today-text {
    float: left;
    height: 100%;
    position: relative;
}

.noise-today-bar .noise-today-bar-body .noise-today-elem:after,
.noise-today-bar .noise-today-bar-body .noise-today-text {
    line-height: 28px;
}

/*.noise-today-bar .noise-today-bar-body .noise-today-elem { padding-left: 40px; }*/

.noise-today-bar .noise-today-bar-body .noise-today-elem + .noise-today-elem { padding-left: 40px; }
.noise-today-bar .noise-today-bar-body .noise-today-elem + .noise-today-elem:after {
   content: "|";
   font-size: 16px;
   left: 0;
   margin-left: 18px;
   margin-right: 18px;
   position: absolute;
}

/*.noise-today-bar .noise-today-bar-body .noise-today-elem:last-child { padding-right: 0; }
.noise-today-bar .noise-today-bar-body .noise-today-elem:last-child:after { display: none; }*/

.noise-today-bar .noise-today-bar-body .noise-today-text {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

.noise-today-bar .meteo-component .role-visual {
    float: left;
    padding-left: 8px;
    position: relative;
}

.noise-today-bar .meteo-component .role-visual svg {
    height: 30px;
    width: 30px;
    position: relative;
    top: -2px;
}

.noise-today-bar .meteo-component .role-windDirVisual {
    float: left;
    height: 100%;
    position: relative;
    width: 26px;
}

.noise-today-bar .meteo-component .role-temperature,
.noise-today-bar .meteo-component .role-windSpeed {
    padding-left: 8px;
}

.noise-today-questions {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    min-height: 444px;

    /* IE styling */
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
}

.noise-today-questions div div {
    display: flex;
    display: -ms-flexbox;
}

.noise-today-question-container {
    cursor: pointer;
    height: 100%;
    min-height: 100px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.noise-today-questions a:first-child .noise-today-question-container { padding-top: 0; }
.noise-today-questions a:last-child .noise-today-question-container { padding-bottom: 0; }

.noise-today-question {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-left: 20px;
}

.noise-today-question span {
    font-size: 16px;
    font-weight: bold;
}

.noise-today-question::after {
    content: url(/config/products/noiselab/images/arrow-right-small.png);
    color: rgb(255, 255, 255);
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    padding: 10px;
    margin-left: 30px;
    height: 100%;
}

.noise-today-mobile {
    margin: 20px 0;
}

.noise-today-mobile .noise-today-mobile-item {
    width: 23%;
    height: 80px;
    display: flex;
    display: -ms-flexbox;
    vertical-align: middle;
    text-align: center;
    justify-content: center;
    text-decoration: none !important;
}

.noise-today-mobile .noise-today-mobile-item img path {
    fill: blue;
}

.noise-today-mobile .noise-today-mobile-item * {
    text-decoration: none !important;
    align-self: center;
}

.noise-today-mobile .noise-today-mobile-item span {
    text-transform: uppercase;
}

.noise-today-mobile .noise-today-mobile-item.active {
    text-decoration: none;
}

.noise-today-mobile .noise-today-mobile-item [data-fmtcode] { display: block; }
.noise-today-mobile .noise-today-mobile-item [data-fmtcode="e"] {
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
}

#noise-today-airplane {
    width: 60px;
    height: 50px;
}

#noise-today-info {
    width: 50px;
    height: 40px;
}

#noise-today-faq {
    width: 60px;
    height: 60px;
}


/* =========================== *
 * ## Noise Today Container ##
 * =========================== */

.noise-today-container {
    height: 0px;
    overflow: hidden;
    position: relative;
    width: 100%;

    transition-property: height;
    transition-duration: .33s;
    transition-delay: 0s;

    -webkit-transition-property: height;
    -webkit-transition-duration: .33s;
    -webkit-transition-delay: 0s;
}
.noise-today-container.noise-today-open { 
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}


/* ====================== *
 * ## Runway Use Today ##
 * ====================== */

.runway-use-today {
    float: left;
    position: relative;
    width: auto;
}

.runway-use-component .runways-svg line { stroke-width: 1px; }
.runway-use-today .noise-today-elem img { padding-right: 5px; }

.runway-use-today .noise-today-elem span {
    padding-right: 1px;
    padding-left: 5px;
    position: relative;
}
.runway-use-today .noise-today-elem span + span:before {
    content: ",";
    left: 0;
    position: absolute;
}

.runway-use-today .flight-icon {
    float: left;
    height: 100%;
    margin-right: 5px;
    padding: 4px;
    position: relative;
    width: 28px;
}

.runway-use-today .flight-icon.inbound {
    top: -2px;

    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.runway-use-today .flight-icon.outbound {
    top: 2px;

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