/** General **/
body {
    font-family: Roboto, sans-serif;
    color      : rgb(87, 87, 86);
    height     : 100%;
}

/*
@media ( max-width : 767px) {
    .infolayer {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
    }
}
*/

input[type=number] {
    -moz-appearance: textfield;
}

.show-print {
    display: none;
}

#mainForm {
    height: 100%;
}

.page-wrapper {
    margin  : 0;
    position: relative;
    height  : 100%;
}

.full_height {
    min-height: calc(100vh - 243px);
}

.container {
    max-width   : 996px;
    margin-left : auto;
    margin-right: auto;
}

.container-fluid {
    margin-left  : auto;
    margin-right : auto;
    padding-left : 0px;
    padding-right: 0px;
}

.map_container {
    padding-left : 18px;
    padding-right: 18px;
}

.light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.no_padding {
    padding-left : 0px;
    padding-right: 0px;
}

/** Default: Large Devices, Wide Screens **/
.visible-xxs-block {
    display: none;
}

/** Header */
.logos {
    padding-top   : 1.0rem;
    padding-bottom: 2.0rem;
}

.logo_nrw_best img {
    /*max-width: 160px;*/
    height        : auto;
    vertical-align: middle;
}

.logo_germansite img {
    max-width     : 225px;
    height        : auto;
    vertical-align: middle;
}

/** Language Menu */
.language-menu i {
    color: rgb(91, 108, 127);
}

.language-menu-desktop {
    padding-right: 4.2rem;
    padding-top  : 1.5rem;
    font-size    : 1.1rem;
}

.language-menu-desktop .language-menu {
    padding-left: 1rem;
}

.language-menu-desktop .language-menu i {
    padding-right: 0.5rem
}

.language-menu-desktop .language-menu a {
    color: rgb(168, 168, 167);
}

.language-menu-mobile ul {
    list-style: outside none none;
    padding   : 0;
}

.language-menu-mobile .nav-tabs {
    border-color: transparent;
}

.language-menu-mobile .language-menu>a,
.language-menu-mobile .language-menu:visited>a,
.language-menu-mobile .language-menu:hover>a,
.language-menu-mobile .language-menu:focus>a {
    background-color: transparent;
    border-color    : transparent;
}

.language-menu-mobile li.language-menu a.dropdown-toggle {
    padding-right: 5px;
    padding-left : 5px;
}

.language-menu-mobile .nav .open>a,
.language-menu-mobile .nav .open>a:hover,
.language-menu-mobile .nav .open>a:focus {
    background-color: transparent;
    border-color    : #B5B5B5;
}

.language-menu-mobile .dropdown-menu {
    background-clip   : padding-box;
    background-color  : rgba(50, 72, 95, 0.7);
    border            : 0;
    border-radius     : 0;
    -webkit-box-shadow: none;
    -moz-box-shadow   : none;
    box-shadow        : none;
    min-width         : 50px;
    margin-right      : 2px;
}

.language-menu-mobile .dropdown-menu a {
    color    : #fff;
    font-size: 1.1rem;
    padding  : 5px;
}

.language-menu-mobile .dropdown-menu a:hover,
.language-menu-mobile .dropdown-menu a:focus {
    color           : #fff;
    text-decoration : underline;
    background-color: transparent;
}

/** Karte NRW in Europa */
.map_europe {
    margin        : 0;
    padding-bottom: 1.0rem;
    text-align    : center;
    max-height    : 630rem;
}

.pickgradient {
    position: relative;
    display : inline-block;
}

.pickgradient::after {
    content         : '';
    position        : absolute;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    display         : inline-block;
    background-color: transparent;
    /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 90%,
            rgba(255, 255, 255, 1));
    /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(to right, rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 90%,
            rgba(255, 255, 255, 1));
    /* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(to right, rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 90%,
            rgba(255, 255, 255, 1));
    /* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 90%,
            rgba(255, 255, 255, 1));
    /* Standard syntax; must be last */
}

.map_europe img {
    max-width: 100%;
    height   : auto;
}

/** Main */
.main-menu {
    line-height  : 1em;
    margin       : 18px -9px 0;
    position     : relative;
    padding      : 0;
    /*margin     : 0;
    z-index      : 100;
    */
}

.main-menu::after {
    clear  : both;
    content: "";
    display: block;
}

.main-menu>li {
    display: block;
    float  : left;
    padding: 0 9px 18px;
    width  : 33%;
}

.main-menu>li:hover>a,
.main-menu>li.active>a {
    background-color: rgba(50, 72, 95, 0.85);
    color           : #fff;
}

.main-menu>li>a {
    background-color: #fff;
    border-radius   : 8px 8px 0 0;
    color           : rgb(91, 108, 127);
    display         : block;
    font-size       : 1.3rem;
    line-height     : 2rem;
    font-weight     : 500;
    overflow        : hidden;
    padding         : 8px 0;
    text-align      : center;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.breadcrumb {
    background-color: transparent;
    border-radius   : 0;
    font-size       : 1.3rem;
    padding         : 8px 18px;
}

.breadcrumb a {
    color: #5b6c7f;
}

.breadcrumb span.separator {
    /* cyan */
    color: rgb(0, 159, 227);
}

.margin_top {
    margin-top: 1.5rem;
}

.padding_top {
    padding-top: 1.5rem;
}

.padding_bottom {
    padding-bottom: 1.5rem;
}

.headline {
    font-size: 4.8rem;
}

.sub_headline {
    font-size : 2.4rem;
    margin-top: 0;
}

.flowing_text p,
.flowing_text span,
.flowing_text ul {
    font-size    : 1.8rem;
    line-height  : 1.4;
    margin-bottom: 1.2rem;
}

.flowing_text p em,
.flowing_text p a {
    font-style : normal;
    /* cyan */
    color      : rgb(0, 159, 227);
    /* Medium */
    font-weight: 500;
}

.flowing_text p a.allCz {
    color          : rgb(87, 87, 86);
    text-decoration: none;
    font-weight    : normal;
}

.full_width {
    width        : 100%;
    margin-top   : 2.6rem;
    margin-bottom: 2.6rem;
    height       : 3.8rem;
}

.button,
.button:link,
.button:visited,
.button:hover,
.button:focus,
.button:active {
    /* Orange */
    color           : rgb(231, 81, 18);
    border-color    : rgb(231, 81, 18);
    background-color: transparent;
}

.button i {
    font-size   : 2.2rem;
    padding-left: 3.2rem;
}

.button span {
    font-family: Roboto, sans-serif;
    font-size  : 1.4rem;
    font-weight: 500;
    padding    : 0;
    color      : rgb(231, 81, 18);
}

.contact {
    border-left   : 1px solid rgb(168, 168, 167);
    min-width     : 220px;
    padding-bottom: 10rem;
}

.contact a {
    color: rgb(87, 87, 86);
}

.contact h2.contact_headline {
    color         : rgb(91, 108, 127);
    font-size     : 1.1rem;
    text-transform: uppercase;
    margin-top    : 0;
}

.contact i.fa-stack-2x {
    color    : rgb(238, 238, 238);
    font-size: 2.8rem;
}

.contact i.fa-stack-1x {
    color    : rgb(0, 159, 227);
    font-size: 1.4rem;
}

.contact_content i {
    padding-right: 1rem;
    /* Orange */
    color        : rgb(231, 81, 18);
    font-size    : 1.6rem;
}

hr {
    border-color: rgb(168, 168, 167) -moz-use-text-color -moz-use-text-color;
}

.app_note,
.app_buttons {
    max-width: 220px;
}

.app_note img {
    max-height   : 5.0rem;
    border       : 1px solid rgb(168, 168, 167);
    border-radius: 4px;
    display      : block;
    float        : left;
    margin-right : 15px;
}

.app_note span {
    font-size  : 1.8rem;
    line-height: 1.4;
}

.app_buttons img {
    max-height: 2.6rem;
    margin-top: 2.0rem;
}

.app_buttons img.img_right {
    margin-left: 2rem;
}

.grey_fluid {
    /* hellgrau */
    background-color: rgb(238, 238, 238);
}

.content-box {
    padding-top   : 2.5rem;
    padding-bottom: 5rem;
    padding-left  : 1.8rem;
    padding-right : 1.8rem;
}

/** Main */
.ui-widget {
    color      : #222222;
    font-family: FiraSans, sans-serif;
    font-size  : 14px;
    font-weight: normal;
    line-height: 16px;
}

#mapmenu {
    font-size: 1.3rem;
}

#mapmenu label {
    font-weight: normal;
}

.panel-heading.mode_btn {
    cursor: pointer;
}

#mapmenu .panel-heading:hover,
#mapmenu .panel-heading[aria-expanded="true"] {
    background-color: rgba(50, 72, 95, 0.85);
    color           : #fff;
}

#mapmenu .panel-heading:hover>a,
#mapmenu .panel-heading a[aria-expanded="true"] {
    color           : #fff;
    background-color: transparent;
}

/* #mapmenu .panel-collapse[aria-expanded="true"] { */
/*     border: 1px solid rgb(91, 108, 127); */
/* } */
#mapmenu .panel-heading:hover>a {
    text-decoration: underline;
}

#mapmenu .panel-heading a {
    background-color: #fff;
    color           : rgb(91, 108, 127);
}

#mapmenu .panel-heading {
    background-color: #fff;
    border-radius   : 8px 8px 0 0;
    color           : rgb(91, 108, 127);
    display         : block;
    font-size       : 1.3rem;
    line-height     : 2rem;
    font-weight     : 500;
    overflow        : hidden;
    padding         : 8px 0;
    text-align      : center;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

#mapmenu .panel,
#mapmenu .panel-body {
    border    : none;
    background: transparent;
    box-shadow: none;
}

#mapmenu .nav-tabs {
    border-bottom: 1px solid rgb(91, 108, 127);
}

#mapmenu .nav-tabs>li>a:hover {
    border-bottom-color: rgb(91, 108, 127);
}

#mapmenu .nav-tabs>li.active>a:hover {
    border-bottom-color: rgb(238, 238, 238);
}

#mapmenu .nav-tabs>li.active>a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors  : none;
    -moz-border-right-colors : none;
    -moz-border-top-colors   : none;
    background-color         : transparent;
    border-color             : rgb(91, 108, 127);
    border-bottom-color      : rgb(238, 238, 238);
    border-image             : none;
    border-style             : solid;
    border-width             : 1px;
    color                    : rgb(91, 108, 127);
    cursor                   : default;
}

li.search a,
li.searchresults a {
    color: rgb(87, 87, 86);
}

.searchbox_btn {
    font-family: Roboto, sans-serif;
    color      : rgb(87, 87, 86);
}

.searchbox_btn span {
    font-weight: normal;
    font-size  : 1.3rem;
}

.searchbox_traffic .form-group {
    max-width    : 25%;
    min-width    : 100px;
    margin-bottom: 5px;
}

.searchbox_traffic label {
    font-weight: normal;
}

.searchbox_checkbox label {
    font-weight : normal;
    padding-left: 5px;
}

.searchResultList,
.searchResultList div {
    font-family     : Roboto, sans-serif;
    color           : rgb(87, 87, 86);
    background-color: transparent;
    background-image: none;
    font-size       : 1.4rem;
    border          : none;
    text-align      : left;
}

.searchResultList {
    padding-top: 1rem;
}

.searchResultList a {
    color: rgb(87, 87, 86);
}

.searchResultList a:HOVER,
a:FOCUS,
a:ACTIVE {
    color: rgb(0, 159, 227);
}

.searchResultList ul {
    list-style-type    : '> ';
    list-style-position: outside;
    color              : rgb(0, 159, 227);
    margin-left        : -2rem;
}

.searchResultList span.ui-state-default,
.searchResultList select.ui-state-default {
    background : none;
    font-family: Roboto, sans-serif;
    color      : rgb(87, 87, 86);
    font-size  : 1.4rem;
}

.searchResultList span.ui-state-default {
    border: none;
}

.searchResultList select,
.searchResultList select.ui-state-focus {
    border: 1px solid rgb(87, 87, 86);
}

.data_source {
    font-size: 1.1rem;
}

/** Infobox und infolayer */
#infobox,
.infolayer {
    font-size       : 1.3rem;
    font-weight     : normal;
    background-color: transparent;
    border          : none;
}

#infobox .button,
.infolayer .button {
    font-size  : 1.3rem;
    font-weight: normal;
    padding    : 0.3em 1em;
}

#infobox {
    top : 4.5em;
    left: 3.5em;
}

.infolayer,
.dialog {
    position: absolute;
    top     : 0.7em;
    left    : 2.8em;
}


#infobox .panel-heading,
.infolayer>.panel-heading,
.dialog .panel-heading {
    background-color: rgb(91, 108, 127);
    border-color    : rgb(91, 108, 127);
    border-radius   : 8px 8px 0 0;
    color           : #fff;
    display         : block;
    font-size       : 1.3rem;
    line-height     : 2rem;
    font-weight     : 500;
    overflow        : hidden;
    padding         : 8px 15px;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

#infobox .panel-heading span,
.infolayer>.panel-heading span,
.dialog>.panel-heading span {
    color: #fff;
}

.infolayer .panel-title,
.dialog .panel-title {
    font-size: 1.3rem;
}

#infobox .panel-body,
.infolayer>.panel-body,
.dialog>.panel-body {
    background-color: rgb(238, 238, 238);
    border          : 1px solid rgb(91, 108, 127);
    border-radius   : 0 0 8px 8px;
}

#legend .Parzellen img {
    opacity: 0.5;
    filter : alpha(opacity=50);
    /* For IE8 and earlier */
}

/** Contact Page **/
.simple_page_headline {
    /* cyan */
    color    : rgb(0, 159, 227);
    font-size: 2.8rem;
}

.contact_page_content span {
    font-size: 1.4rem;
}

.contact_page_content a,
.contact_page_content a:hover,
.contact_page_content a:active,
.contact_page_content a:visited,
.contact_page_content a:focus {
    color: rgb(0, 159, 227);
}

/** Partner Page **/
.partner_logo {
    max-height: 80px;
    max-width : 400px;
}

/** Login Page */
.login_form .control-label,
.login_form .form-control,
.login_form .btn span {
    font-size  : 1.3rem;
    font-weight: normal;
    padding    : 0;
}

.login_form input.form-control {
    max-width: 200px;
    height   : 2.8rem;
}

/** Expose */
.expose_title {
    font-size    : 2.8rem;
    font-weight  : 400;
    /* cyan */
    color        : rgb(0, 159, 227);
    margin-top   : 0;
    margin-bottom: 3.0rem;
}

.expose_subheadline {
    /* cyan */
    color    : rgb(0, 159, 227);
    font-size: 1.8rem;
}

.expose_maps {
    padding-left  : 18px;
    padding-right : 18px;
    padding-bottom: 20px;
    clear         : both;
}

.overview {
    width        : 33.33%;
    padding-right: 18px;
    float        : left;
}

.overview .municipal {
    padding-top: 16px;
}

.detail {
    width: 66.66%;
    float: right;
}

.expose_text {
    font-size  : 1.4rem;
    line-height: 1.6;
}

.expose_text section {
    padding-top   : 5px;
    padding-bottom: 5px;
}

.expose_text a {
    color: rgb(0, 159, 227);
}

.expose_text .col1 {
    width: 33%;
}

.expose_text dd {
    margin-bottom: 8px;
}

.expose_text .dl-horizontal dt {
    width       : 220px;
    margin-right: 2.0rem;
}

.expose_partner_logo {
    max-height: 50px;
    max-width : 200px !important;
}

@media print {

    .expose_partner_logo {
        max-height: unset;
        max-width : 200px !important;
        width     : 200px;
    }
}


/** Footer */
.footer_menu {
    background-color: rgb(91, 108, 127);
    color           : rgb(168, 168, 167);
    font-size       : 1.1rem;
    padding-top     : 2.0rem;
    padding-bottom  : 2.0rem;
    line-height     : 3.0rem;
}

.footer_menu a {
    color: rgb(168, 168, 167);
}

.social-icons-footer,
ul.meta-menu-footer {
    display    : inline-block;
    float      : right;
    margin-left: 2.7rem;
    text-align : right;
    list-style : outside none none;
    padding    : 0;
}

.social-icons-footer i {
    font-size   : 3.0rem;
    padding-left: 0.5rem;
}

ul.meta-menu-footer li {
    display: inline-block;
}

ul.meta-menu-footer li.last-item {
    padding: 0;
}

.menu-footer-seperator {
    padding: 0 8px;
}

/** Medium Devices, Desktops **/
@media only screen and (max-width: 992px) {

    /** Main */
    .headline {
        font-size: 3.6rem;
    }

    .sub_headline {
        font-size: 1.8rem;
    }

    .flowing_text p,
    .flowing_text span {
        font-size    : 1.5rem;
        line-height  : 1.3;
        margin-bottom: 1.3rem;
    }

    .app_note span {
        font-size  : 1.5rem;
        line-height: 1.4;
    }
}

/** Small Devices, Tablets **/
@media only screen and (max-width: 768px) {

    /** Main */
    .headline {
        font-size: 2.4rem;
    }

    .sub_headline {
        font-size: 1.4rem;
    }

    .flowing_text p,
    .flowing_text span {
        font-size    : 1.4rem;
        line-height  : 1.2;
        margin-bottom: 1.2rem;
    }

    .app_note span {
        font-size  : 1.4rem;
        line-height: 1.4;
    }

    .contact {
        border-left   : none;
        padding-bottom: 2rem;
    }

    /** Expose */
    .overview {
        width        : 100%;
        padding-right: 0px;
        float        : none;
    }

    .overview .regional {
        padding-right: 9px;
        width        : 50%;
        float        : left;
    }

    .overview .municipal {
        padding-top : 0px;
        padding-left: 9px;
        width       : 50%;
        float       : right;
    }

    .detail {
        padding-top: 16px;
        width      : 100%;
        float      : none;
    }

    /** Footer */
    .social-icons-footer {
        margin-left: 0;
    }

    .social-icons-footer i {
        font-size   : 2.0rem;
        padding-left: 0.3rem;
    }

    ul.meta-menu-footer {
        margin-left: 1rem;
    }

    .menu-footer-seperator {
        padding: 0 2px;
    }

    .grey_fluid {
        /* hellgrau */
        background-color: rgb(238, 238, 238);
    }

    .content-box {
        padding-top   : 1.5rem;
        padding-bottom: 1.5rem;
        margin-bottom : 1.5rem;
    }
}

/** Extra Small Devices, Phones **/
@media only screen and (max-width: 480px) {

    /** Header */
    .logos {
        padding-top   : 2.0rem;
        padding-bottom: 0;
    }

    .logo_germansite img {
        max-width     : 225px;
        max-height    : 40px;
        vertical-align: middle;
    }

    /** Main */
    .button,
    .button:link,
    .button:visited,
    .button:hover,
    .button:focus,
    .button:active {
        font-size    : 1.2rem;
        margin-bottom: 1.8rem;
        margin-top   : 1.4rem;
    }

    .button i {
        font-size   : 1.6rem;
        padding-left: 2.5rem;
    }

    .sub_headline {
        /* 14px */
        font-size  : 1.4rem;
        line-height: 1.4;
    }

    .flowing_text p,
    .flowing_text span {
        font-size    : 1.4rem;
        line-height  : 1.4;
        margin-bottom: 1.2rem;
    }

    .app_note span {
        font-size  : 1.4rem;
        line-height: 1.4;
    }

    .contact {
        border-left: none;
    }

    .grey_fluid {
        /* hellgrau */
        background-color: rgb(238, 238, 238);
    }

    .content-box {
        padding-top   : 1.5rem;
        padding-bottom: 1.5rem;
        margin-bottom : 1.5rem;
    }

    /**Footer */
    .footer_menu {
        font-size     : 0.9rem;
        padding-bottom: 2.0rem;
    }

    ul.meta-menu-footer {
        float      : left;
        margin-left: 0;
    }

    .menu-footer-seperator {
        padding: 0 2px;
    }

    .footer_top_link {
        height: 40px;
    }

    .footer_top_link a.footer-seitenanfang {
        background     : transparent url(../img/mobile-menu-seitenanfang-icon.png) scroll no-repeat 0 8px;
        display        : block;
        padding        : 10px 0 10px 28px;
        background-size: 17px 17px;
        color          : rgb(91, 108, 127);
        font-size      : 1.2rem;
        line-height    : 1.4rem;
    }

    /* Workaround for small devices before Bootstrap 4 */
    .visible-xxs-block {
        display: block;
    }

    .hidden-xxs {
        display: none;
    }

    .col-xxs-12 {
        width: 100%;
    }
}

.internalComment {
    background-color: yellow;
    color           : red;
}

/** Custom, iPhone Retina **/
@media only screen and (max-width: 320px) {}

/** map tools **/
.controlpanel_top {
    top : 7px;
    left: 45px;
}

/** transport connections**/
.transportconnections>tbody>.HIGHWAY~.HIGHWAY span.type {
    display: none;
}

.transportconnections>tbody>.AIRPORT~.AIRPORT span.type {
    display: none;
}

.transportconnections>tbody>.PORT~.PORT span.type {
    display: none;
}

.transportconnections>tbody>.RAIL_FREIGHT~.RAIL_FREIGHT span.type {
    display: none;
}