/* ================== *
 * ## Noise header ##
 * ================== */

#noise-header {
    min-height: 80px;
    position: relative;
    width: 100%;
}

.noise-container-header {
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0 auto;
}

.noise-container-header .col-md-8 {
    margin: 0 auto;
}

.navbar-toggler {
    padding: 1rem;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    height: 1.8em;
    width: 2.0em;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url('config/products/noiselab/images/menu-cross.svg');
    background-size: 30px 30px;
    filter: invert(100%)
}

.navbar-collapse.collapsing, .navbar-collapse.show {
    min-height: 100vh;
}

.navbar-collapse.show .navbar-nav .nav-item a.nav-link, .navbar-collapse.collapsing .navbar-nav .nav-item a.nav-link {
    font-size: 17px;
}

.noise-navbar .navbar-collapse.show .dropdown-menu {
    padding: .6rem 0 1.5rem 0;
}

.navbar-collapse.show .navbar-nav .nav-item a.dropdown-item, .navbar-collapse.collapsing .navbar-nav .nav-item a.dropdown-item {
    border: 0;
    font-size: 17px;
}

.noise-container-navbar {
    max-width: 1340px;
}

.noise-navbar .navbar-brand img {
    padding: 0
}

/* change the link color */
.noise-navbar .navbar-nav .nav-link {
    font-size: 14px;
    font-weight: bold;
}

/* change the color of active or hovered links */

.noise-navbar .dropdown-menu .dropdown-item {
    font-weight: bold;
    padding: .35rem 2.8rem .35rem .7rem;
}

.noise-navbar .dropdown-toggle::after { display: none; }
.noise-navbar-btn-search { cursor: pointer; }

.noise-navbar-btn-search div div {
    margin: 10px;
    border-radius: 25px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.noise-searchbar-toggler-closer {
    display: none;
}


.noise-searchbar-container {
    width: 100%;
}

.noise-searchbar-container .noise-searchbar {
    height: 100%;
}

#noise-header > .noise-searchbar-container {
    position: fixed;
    z-index: 10;
}

#noise-header > .noise-searchbar-container .noise-searchbar {
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0);
   display: flex;
   height: 80px;
   position: absolute;
   top: 0px;
   width: 100%;

   transition-property: box-shadow, top;
   transition-duration: .33s;

   -webkit-transition-property: box-shadow, top;
   -webkit-transition-duration: .33s;
}

.noise-navbar .noise-searchbar-container {
    padding: 30px 20px;
}

.noise-navbar .noise-searchbar-container .noise-searchbar {
    border-radius: 25px;
    border: 0;
    font-style: italic;
    overflow: hidden;
}

.noise-searchbar .f3-var {
    box-sizing: border-box;
    float: left;
    font-size: 22px;
    font-style: italic;
    height: 100%;
    position: relative;
    z-index: 1;
}

.noise-navbar-searchbox-mobile {
    padding: 30px 20px;
}

.noise-navbar-searchbox-mobile input {
    border-radius: 25px;
    border: 0;
    font-style: italic;
    background-image: url('config/products/noiselab/images/search.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: 46px 46px
}

.noise-header .f3-image, .noise-header:not(.iframe-header) > .f3-item-wrapper {
    align-items: center;
    display: flex;
    max-height: 200px;
}

.noise-header .f3-image-empty.f3-edit,
.noise-header.iframe-header .f3-item.f3-edit {
    min-height: 200px;
    width: 100%;
}
.noise-header .f3-image-empty:not(.f3-edit) { height: 0; }
.noise-header.iframe-header .f3-item p:first-of-type { margin-bottom: 0; }

.noise-header {
    overflow: hidden;
    position: relative;
}

.noise-header img {
   height: auto;
   position: relative;
   width: 100%;
   z-index: 0;
}

.noise-header .f3-image:not(.f3-edit):after {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.15);
    text-align: center;
    z-index: 1;
}

.f3-search-results {
    position: fixed;
    top: 160px;
    width: 100%;
    height: calc(100% - 160px);
    overflow: auto;
    margin: 0;
    padding: 0;
   z-index: 10000;
}

.f3-search-results li {
   background-color: #FFF;
    list-style: none;
    padding: 10px 60px 5px 40px;;
    border-top: 1px solid #ccc;
    position: relative;
}

.f3-search-results h1 {
    font-size: 16pt;
}

.f3-search-results h1 >a {
    color: inherit;
}

.f3-search-results li > a {
    content: "";
    width: 40px;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(../images/arrow-right-small.png);
    background-position: center center;
    background-repeat: no-repeat;
}

.menu-loep {
    width: 26px;
    margin-left: -2px;
}


/* ==================== *
 * ## Navigation Bar ##
 * ==================== */

body .navbar {
   align-items: flex-start;
   max-width: 100%;
   padding: 0;
}

.navbar .noise-navbar-section {
   flex: 1;
   float: left;
   height: 100%;
   position: relative;
}

.navbar .noise-navbar-section.left { order: 0; }
.navbar .noise-navbar-section.right {
   display: flex;
   justify-content: flex-end;
   order: 2;
}

.noise-navbar,
.noise-navbar .f3-item-wrapper { height: 100%; }

.noise-navbar {
   padding: 0;
   order: 1;
   text-transform: uppercase;
}

.noise-navbar .menu-wrapper {
   display: flex;
   flex-direction: row;
}

.noise-navbar .navbar-nav .nav-item .nav-link {
   display: flex;
   flex-direction: row;
   font-weight: bold;
   gap: 5px;
   padding: 0 11px;
   position: relative;
}

.noise-navbar .navbar-nav .nav-item .nav-link,
.noise-navbar .navbar-nav .nav-item .nav-link > .nav-text {
   white-space: nowrap;
}

.noise-navbar .navbar-nav .nav-item .nav-link > .nav-icon {
   width: 20px;
}

.noise-navbar .dropdown-menu {
    border-radius: 0;
    border: 0;
    margin-top: 0;
    padding: 0;
}

.noise-navbar .dropdown-menu .dropdown-item {
    font-size: 13px;
    text-transform: none;
}

.noise-navbar .dropdown-menu li + li .dropdown-item {
    border-style: solid;
    border-width: 1px 0 0 0;
}

/* ## logo container ## */
.navbar-logo-container {
   height: 100%;
   padding: 10px;
   pointer-events: none;
   position: absolute;
   top: 0;
}
a.navbar-logo-container { pointer-events: all !important; }

.navbar-logo-container .icon {
    height: 100%;
    overflow: visible;
    //width: 100%;
}
.navbar-logo-container .icon #lines,
.navbar-logo-container .icon #visual {
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

/* ## combined ## */
.navbar-menu-btn-container,
.navbar-search-btn-container {
   align-items: center;
   background: var(--grey-lighter);
   display: flex;
   height: 100%;
   justify-content: center;

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

.noise-searchbar.search-bar-open, .noise-searchbar.search-bar-open label > * {
    /pointer-events: none;
}

.noise-searchbar.search-bar-open > * {
    /pointer-events: all;
}

/* ## menu button ## */
.navbar-menu-btn-container {
    transition-duration: .33s;
    -webkit-transition-duration: .33s;
}

.navbar-menu-btn-container .hamburger {
    float: left;
    left: 50%;
    padding: 0;
    position: relative;
    top: 50%;

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

.navbar-menu-btn-container .hamburger .hamburger-inner,
.navbar-menu-btn-container .hamburger .hamburger-inner::before,
.navbar-menu-btn-container .hamburger .hamburger-inner::after {
    border-radius: 3px;
    height: 3px;
}

/* ## search button ## */
.navbar-search-btn.btn-round {
   background: var(--white);
   justify-content: center;

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

.navbar-search-btn.btn-round .icon {
    height: 50%;
    overflow: visible;
    width: 50%;
}
.navbar-search-btn.btn-round .icon #cross {
    opacity: 0;
    stroke-width: 5px;

    transition-property: opacity .33s;
    -webkit-transition-property: opacity .33s;
}
.navbar-search-btn.btn-round .icon #magnifier { stroke-width: 3px; }

.navbar .navbar-search-btn.search-bar-open .icon #cross { opacity: 1; }
.navbar .navbar-search-btn.search-bar-open .icon #magnifier { opacity: 0; }


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

.meteo-item {
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

.meteo-item,
.meteo-item .meteo-info {
    float: left;
    position: relative;
}

.row-item-expand .meteo-item { height: 150px; }

.meteo-item .meteo-info .meteo-info-value {
    left: 50%;
    position: absolute;
    top: 50%;
    
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

.meteo-item .meteo-info .meteo-info-container,
.meteo-item .meteo-info .meteo-info-value-container {
    float: left;
    height: 100%;
    position: relative;
    width: 100%;
}

.meteo-item .meteo-info .meteo-info-value-container { padding-bottom: 24px; }

.meteo-item .meteo-info .meteo-info-label {
    bottom: 0;
    height: 24px;
    left: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.meteo-item .meteo-info .meteo-temperature,
.meteo-item .meteo-info .role-windSpeed {
    font-size: 2rem;
    font-weight: bolder;
    line-height: 1.5;
    text-align: center;
}

.meteo-item .meteo-info .role-temperature {
    padding-left: 5px;
    white-space: nowrap;
}

.meteo-item .meteo-info .role-visual,
.meteo-item .meteo-info .role-visual svg,
.meteo-item .meteo-info .role-windDirVisual,
.meteo-item .meteo-info .role-windDirVisual svg {
    float: left;
    height: 100%;
    position: relative;
    width: 100%;
}

.meteo-item .meteo-info .role-windSpeed {
    font-size: 1rem;
    line-height: 20px;
}

.meteo-item .meteo-info .role-windSpeedVisual {
    height: 100%;
    position: relative;
}

.meteo-item .meteo-info .role-windSpeedVisual svg { 
   height: 90%;
   left: 50%; 
   width: 46px;
}


/* =============== *
 * ## Runwayuse ##
 * =============== */

.row-item.runway-use .item-content { padding: .75rem 1.5rem; }

.runway-use-component,
.runway-use-component .visual-container,
.runway-use-component .role-visualContainer,
.runway-use-component .role-visualCurr {
    float: left;
    height: 100%;
    position: relative;
    width: 100%;
}

.runway-use-component .role-explanation { font-size: 13px; }

.runway-use-component .compass-container {
    position: absolute;
    top: 0;
    width: 20px;
}

.runway-use-component .compass-container.top-left { left: 0; }
.runway-use-component .compass-container.top-right { right: 0; }

.runway-use-component .compass-container .icon,
.runway-use-component .compass-container .label {
    float: left;
    position: relative;
}

.runway-use-component .compass-container .icon,
.runway-use-component .compass-container .label {
    width: 100%;
}


.runway-use-component .compass-container .icon { height: 20px; }
.runway-use-component .compass-container .label { text-align: center; }