#header {
    position: relative;

    --logo-left: 23px;
    --logo-width: 120px;
    --logo-gap: 24px;
}

/* Logo: upper part of the header */
#logo {
    position: absolute;
    left: var(--logo-left) !important;
    top: 8px !important;
    transform: none !important;

    width: var(--logo-width) !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    background-image: url(/lizmap/index.php/view/media/getMedia?repository=in4safety&project=meteo_timemanager_light&path=media%2Fthemes%2Fdefault%2Fcss%2F/img/logo.png) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* Title aligned with the vertical centre of the logo */
#title {
    position: absolute;
    left: calc(
        var(--logo-left) +
        var(--logo-width) +
        var(--logo-gap)
    ) !important;
    top: 28px !important;
    transform: translateY(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Statement immediately below the logo */
#in4safety-header-note {
    position: absolute;
    left: var(--logo-left);
    top: 50px;

    width: 500px;
    z-index: 1005;

    color: #ffffff;
    font-size: 8px;
    font-weight: normal;
    line-height: 10px;
    text-align: left;
    white-space: nowrap;
}

/* Link below the statement */
#in4safety-header-link {
    position: absolute;
    left: var(--logo-left);
    top: 62px;
    width: var(--logo-width);

    display: block;
    z-index: 1005;

    color: #ffffff !important;
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    text-decoration: underline;
    white-space: nowrap;
}

#in4safety-header-link:hover,
#in4safety-header-link:focus {
    color: #ffffff !important;
    text-decoration: none;
}