:root {
    --header-height:            160px;
    --header-menu-bar:          50px;
    --header-font-color:        white;
    --header-background:        #405060;
    --header-navi-background:   #6080a0;
    --customer-selector-width:  calc( 0.25 * var( --page-min-width ) );
}

div.header {
    background-color:   var( --header-background );
    color:              var( --header-font-color );
    margin:             0px;
    padding:            0px;
    height:             var( --header-height );
    margin-bottom:      20px;
}

.header-content {
    margin:             0px auto 0px auto;
}

.contact-bar {
    float:              right;
    margin:             auto;
    padding:            20px;
    height:             calc( var( --header-height ) - var( --header-menu-bar ) );
}

.header-contact {
    font-size:          var( --font-small );
}

.header-contact.address::before {
    content:            "\00a0\f3c5\00a0";
    font-family:        "FontAwesome Solid";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.header-contact.email::before {
    content:            "\00a0\f0e0\00a0";
    font-family:        "FontAwesome Regular";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.header-contact.name::before {
    content:            "\00a0\f5b7";
    font-family:        "FontAwesome Solid";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.header-contact.phone::before {
    content:            "\00a0\f095\00a0";
    font-family:        "FontAwesome Solid";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.title-bar, .title-bar-content {
    margin:             0px auto 0px auto;
    height:             calc( var( --header-height ) - var( --header-menu-bar ) );
}

.title-bar-content {
    width:              var( --page-min-width );
}

.title-bar--logo {
    max-height:         calc( var( --header-height ) - var( --header-menu-bar ) - 20px );
    max-width:          100px;
    display:            inline-block;
    vertical-align:     middle;
}

.title-bar--title {
    float:              left;
    max-width:          calc( var( --page-min-width ) - var( --customer-selector-width ) - 3 * var( --common-space ) );
    width:              calc( var( --page-min-width ) - var( --customer-selector-width ) - 3 * var( --common-space ) );
}

.title-bar--selector {
    float:              right;
}

.title-bar--select-container {
    position:           relative;
    top:                30%;
    bottom:             30%;
    height:             40%;
    margin:             0px;
    padding:            0px;
    width:              var( --customer-selector-width );
    max-width:          var( --customer-selector-width );
}

.title-bar--customer-selection {
    height:             100%;
    width:              100%;
    font-family:        var( --common-font );
    font-size:          var( --font-normal );
    padding:            0px calc( 0.33 * var( --common-space ) );
    background:         var( --header-background );
    color:              var( --header-font-color );
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius:      15px;
    /* border-color:       var( --header-font-color ); */
    border:             2.5px solid var( --header-navi-background );
}

.title-bar--customer-option {
    color:              var( --header-font-color );
    box-shadow: 0 0 10px 100px yellow inset;
}

select.title-bar--customer-selection option:hover {
    box-shadow: 0 0 10px 100px yellow inset;
}

.title-bar.title {
    display:            inline-block;
    margin-left:        20px;
    font-size:          var( --font-large );
    height:             unset;
    line-height:        calc( ( var( --header-height ) - var( --header-menu-bar ) - 10px ) );
    color:              var( --header-font-color );
}

.navi-bar {
    background-color:   var( --header-navi-background );
    height:             var( --header-menu-bar );
    margin:             0px;
    padding:            0px;
    /* margin-top:         auto; */
}

.navi-bar-content {
    width:              var( --page-min-width );
    margin:             0px auto 0px auto;
    padding-left:       10px;
}

ul.navi-bar.list {
    float:              right;
}

.navi-bar.list-item {
    list-style-type:    none;
    margin-right:       calc( 0.5 * var( --header-menu-bar ) );
    line-height:        var( --header-menu-bar );
    float:              left;
}

.navi-bar-item {
    color:              var( --header-font-color );
}

.navi-bar.organization {
    width:              100%;
}