/* ***************************************** */
/* Meta Menu (Top right) */
/* ***************************************** */

.meta-menu {
    display: none;
    position: absolute;
    right: 10px;
    top: 20px;
    width: auto;
}

@media (min-width: 960px) {
    .meta-menu {
        display: flex;
    }
}

.meta-menu.show {
    display: flex;
}

.meta-menu a {
    font-weight: normal;
    color: black;
}

.meta-menu span {
    vertical-align: text-bottom;
    padding: 0 0.2rem;
}

.meta-menu .meta-menu__help span,
.meta-menu .pageheader-togglesearch span {
    display: none;
}
.meta-menu.show .meta-menu__help span,
.meta-menu.show .pageheader-togglesearch span {
    display: none;
}

.hide-menu-search .menu-search-mobile {
    display: none !important;
}

.meta-menu > li {
    position: relative;
    padding: 5px 16px 0 16px;
}

.meta-menu > li:first-of-type {
    padding-top: 0;
}

@media (min-width: 1200px) {
    .meta-menu .meta-menu__help span,
    .meta-menu .pageheader-togglesearch span {
        display: inline;
    }

    .meta-menu > li {
        padding: 0 16px;
    }
}

.meta-menu a:hover,
.meta-menu a:hover span,
.meta-menu__customer-portal.is-active span {
    text-decoration: none;
    color: #1964a3;
}

.meta-menu li {
    list-style: none;
}

.meta-menu > li:first-of-type {
    margin-right: 0;
}

.meta-menu__customer-portal:before,
.meta-menu__help:before {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 21px;
    width: 21px;
    height: 21px;
    content: ""
}

.meta-menu__help:before {
    background-image: url(../icons/bew/icon_hilfe.svg);
}

.meta-menu__help:hover:before {
    background: #1964a3;
    -webkit-mask-image: url(../icons/bew/icon_hilfe.svg);
    mask-image: url(../icons/bew/icon_hilfe.svg);
}

.meta-menu__customer-portal:before {
    background-image: url(../icons/icon-kundenportal.svg);
}

.meta-menu__customer-portal:hover:before {
    background: #726898;
    -webkit-mask-image: url(../icons/icon-kundenportal.svg);
    mask-image: url(../icons/icon-kundenportal.svg);
}

.meta-menu__customer-portal.is-active:before {
    background: #726898;
    -webkit-mask-image: url(../icons/icon-kundenportal.svg);
    mask-image: url(../icons/icon-kundenportal.svg);
}

.meta-menu__customer-portal ~ ul {
    max-height: 0;
    transition: max-height 0.25s ease-out;
    overflow: hidden;
    position: absolute;
    top: 30px;
    left: -56px;
    width: 15.5rem;
    background-color: #EAE9F0;
}

.meta-menu__customer-portal.is-active ~ ul {
    max-height: 200px;
    transition: max-height 0.3s ease-in;
    z-index: 100;
}

.meta-menu__customer-portal ~ ul li {
    padding: 0.5rem;
}

.meta-menu__customer-portal.is-active ~ ul li:hover {
    background-color: #726898;
}

.meta-menu__customer-portal.is-active ~ ul li:hover a {
    color: white;
}

/* Searchbox */

.meta-menu .search-box {
    position: absolute;
    width: 100%;
    z-index: 12;
    background-color: #fff;
    top: 66px;
    border-top: 3px solid #e1e1e1
}

.meta-menu .search-box.search-box__flyout {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0)
}

.meta-menu .search-box.search-box__flyout.search-box__flyout-show {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1)
}

.meta-menu .search-box .search-box__input {
    box-shadow: 0 1px 0 #ddd;
    margin-top: 9px;
}

.meta-menu .search-box .search-box__input .search-input {
    background-color: #fff;
    height: 66px;
    padding-right: -webkit-calc(45px + 100px);
    padding-right: calc(45px + 100px)
}

.meta-menu .search-box .search-box__clear {
    background-color: #fff;
    padding: 1.5rem .7rem;
    right: 100px;
    height: 66px
}

.meta-menu .search-box .ui-menu .ui-menu-item {
    height: 66px;
    padding: 1.1rem 20px
}

.search-box .search-box__clear {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: .75rem .7rem;
    background-color: #EAE9F0;
    height: 45px;
    width: 45px
}

.navbar-main .menu_levels .search-box .search-box__clear .toggle-submenu:before, .search-box .search-box__clear .icon, .search-box .search-box__clear .navbar-main .menu_levels .toggle-submenu:before {
    font-size: 1.125rem;
    display: none;
    color: #005c63
}

.search-box .search-box__clear.visible {
    cursor: pointer
}

.navbar-main .menu_levels .search-box .search-box__clear.visible .toggle-submenu:before, .search-box .search-box__clear.visible .icon, .search-box .search-box__clear.visible .navbar-main .menu_levels .toggle-submenu:before {
    display: block
}

.search-box .search-box__submit {
    height: 66px;
    width: 100px;
    position: absolute;
    right: 0;
    top: 0
}

.search-box .search-box__submit:before {
    content: "" !important;
    font-size: 1rem;
    margin-right: 5px;
}

.search-box form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.search-box .search-box__input {
    width: 100%;
    position: relative
}

.search-box .search-box__input .search-input {
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding-left: 20px;
    padding-right: 45px;
    font-size: 1rem;
    background-color: #EAE9F0;
    height: 45px
}

.search-box .search-box__input .search-input:focus {
    box-shadow: none;
    outline: 0
}

.search-box .search-box__input .search-input::-ms-clear {
    width: 0;
    height: 0;
    display: none
}

.search-box .ui-menu .ui-menu-item {
    height: 45px;
    padding: .75rem 20px;
    font-family: BEW, Helvetica, Arial, sans-serif;
    font-size: 1rem
}

.search-box .search-box__input .search-input::-webkit-input-placeholder {
    color: #000
}

.search-box .search-box__input .search-input::-moz-placeholder {
    color: #000
}

.search-box .search-box__input .search-input:-ms-input-placeholder {
    color: #000
}

.search-box .search-box__cancel {
    display: none
}

.search-box .search-box__input-error {
    color: #f93b18;
    bottom: -1.75rem;
    font-family: VattenfallHall, Helvetica, Arial, sans-serif;
    line-height: 1.4285714286
}

.search-box .widget .search-box__input-error {
    line-height: 1.3392857143
}

.meta-menu .search.search__active > a:first-child:before {
    content: "(" !important;
    color: #2071b5
}

@media (min-width: 768px) {
    .meta-menu .search-box {
        top: 80px
    }
}

.menu > ul > li.search-box-menu {
    flex: 0 1 auto;
}

.menu ul.show-on-mobile > li > .arrow-helper {
    padding: 3px 0;
}

@media (max-width: 959px) {
    .search-box-menu {
        display: none !important;
    }
}
@media (min-width: 960px) {
    .search-box .widget .search-box__input-error {
        font-size: 1.375rem;
        line-height: 1.2727272727
    }

    .meta-menu .search-box {
        height: 45px;
        width: 340px;
        right: 16px;
        top: -17px;
        border-top: none;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex
    }

    .meta-menu .search-box.search-box__flyout {
        -webkit-transform-origin: 340px;
        -ms-transform-origin: 340px;
        transform-origin: 340px;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0)
    }

    .meta-menu .search-box.search-box__flyout.search-box__flyout-show {
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1)
    }

    .meta-menu .search-box .search-box__clear {
        right: 0;
        padding: .75rem .7rem;
        background-color: #EAE9F0;
        height: 45px
    }

    .meta-menu .search-box .search-box__submit {
        visibility: hidden;
        position: absolute
    }

    .meta-menu .search-box .search-box__input {
        box-shadow: none
    }

    .meta-menu .search-box .search-box__input .search-input {
        background-color: #EAE9F0;
        height: 45px;
        font-size: 1.25rem;
        font-weight: 500;
        padding-right: 45px
    }

    .meta-menu .search-box .ui-menu .ui-menu-item {
        padding: .75rem 20px;
        font-size: .875rem;
        line-height: 1.5;
        height: 45px
    }

    .meta-menu .search-box .search-box__cancel {
        display: block;
        line-height: 90px;
        margin-top: 0px;
    }

    .navbar-main .menu_levels .meta-menu .search-box .search-box__cancel .toggle-submenu:before, .meta-menu .search-box .search-box__cancel .icon, .meta-menu .search-box .search-box__cancel .navbar-main .menu_levels .toggle-submenu:before {
        font-size: 1.25rem
    }

    .meta-menu .search.search__active > a:first-child:before {
        content: "7" !important;
        color: #2071b5;
        font-size: 1.2rem
    }
}

@media (min-width: 1440px) {
    .meta-menu .search-box {
        width: 440px
    }

    .meta-menu .search-box.search-box__flyout {
        -webkit-transform-origin: 440px;
        -ms-transform-origin: 440px;
        transform-origin: 440px
    }

    .meta-menu .search.search__active span {
        color: #2071b5
    }
}

.searchblock .search-box__search .icon-search {
    color: #005c63
}
.search-box .icon {
    background-color: white;
}

.icon-close:before {
    content: "\E079"!important;
    font-size: 1.45rem;
}

#search-close .icon {
    position: relative;
    cursor: pointer;
    top: -0.7rem;
}

#search-close:hover {
    color: #726898;
}

.pageheader-togglesearch {
    position: relative;
    display: inline-block;
    float: right;
    width: auto;
    height: 50px;
    margin: 0;
    cursor: pointer;
}

.pageheader-togglesearch:before {
    display: inline-block;
    margin: 0;
    background: url(../icons/bew/icon_search.svg) no-repeat;
    background-size: 20px;
    width: 21px;
    height: 21px;
    content: ""
}

.pageheader-togglesearch:hover:before {
    background-image: url(../icons/bew/icon_search_blue.svg);
}

img.icon {
    width: 32px;
}