/*!
 * @author René Maas
 */

.tx-winkel-products [data-toggle="collapse"] > svg:first-child,
.fce-menu_abstract [data-toggle="collapse"] > .accordion-icon > svg:first-child,
.tradeshow-countrybox [data-toggle="collapse"] > svg:first-child,
.tx-winkel-address [data-toggle="collapse"] > svg:first-child,
.faq [data-toggle="collapse"] > .accordion-icon > svg:first-child,
.maskFaq [data-toggle="collapse"] > svg:first-child,
#hoseReelConfigurator .h1b span > svg:first-child {
    display: none;
}

.tx-winkel-products [data-toggle="collapse"] > svg:last-child,
.fce-menu_abstract [data-toggle="collapse"] > .accordion-icon > svg:last-child,
.tradeshow-countrybox [data-toggle="collapse"] > svg:last-child,
.tx-winkel-address [data-toggle="collapse"] > svg:last-child,
.faq [data-toggle="collapse"] > .accordion-icon > svg:last-child,
.maskFaq [data-toggle="collapse"] > svg:last-child,
#hoseReelConfigurator .h1b span > svg:last-child {
    display: inline-block;
}

.tx-winkel-products [data-toggle="collapse"].collapsed > svg:first-child,
.fce-menu_abstract [data-toggle="collapse"].collapsed > .accordion-icon > svg:first-child,
.tradeshow-countrybox [data-toggle="collapse"].collapsed > svg:first-child,
.tx-winkel-address [data-toggle="collapse"].collapsed > svg:first-child,
.faq [data-toggle="collapse"].collapsed > .accordion-icon > svg:first-child,
.maskFaq [data-toggle="collapse"].collapsed > svg:first-child,
#hoseReelConfigurator .h1b.collapsed span > svg:first-child {
    display: inline-block;
}

.tx-winkel-products [data-toggle="collapse"].collapsed > svg:last-child,
.fce-menu_abstract [data-toggle="collapse"].collapsed > .accordion-icon > svg:last-child,
.tradeshow-countrybox [data-toggle="collapse"].collapsed > svg:last-child,
.tx-winkel-address [data-toggle="collapse"].collapsed > svg:last-child,
.faq [data-toggle="collapse"].collapsed > .accordion-icon > svg:last-child,
.maskFaq [data-toggle="collapse"].collapsed > svg:last-child,
#hoseReelConfigurator .h1b.collapsed span > svg:last-child {
    display: none;
}

.tx-winkel-products .badge-diameter {
    width: calc(92% - 0px + 1.5rem);
    min-width: calc(2 * 23% + (2 - 1) * .5rem - 2 * 1px);
}

@media (max-width: 992px) {
    .tx-winkel-products .div-openlist .badge-diameter {
        width: calc(100% - .25rem) !important;
    }
}

/** BOM **/
#bom {

    width:              65%;
    position:           fixed;
    top:                120px;
    right:              calc(-65% + 63px);
    /*z-index: 8000;*/
    z-index:            1039;

    -webkit-transition: all .25s ease-out;
    -o-transition:      all .25s ease-out;
    transition:         all .25s ease-out;
}

#bom.active {
    right: 0;
}

@media (max-width: 992px) {
    #bom.active {
        top:    0;
        width:  calc(100% + 77px);
        height: 100%;
    }

    #bom.active #bom-content {
        min-height: 100vh;
        max-height: 100vh !important;
    }

    #bom .bomTextIntro {
        display: none;
    }
}

.stickybom {
    width:                             63px;
    float:                             left;
    background-color:                  #428bca;
    -webkit-border-top-left-radius:    5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft:        5px;
    -moz-border-radius-bottomleft:     5px;
    border-top-left-radius:            5px;
    border-bottom-left-radius:         5px;
    box-shadow:                        0 10px 10px grey;
}

#bom-content {
    position:    relative;
    background:  #f5f5f5;
    /*margin: 0 0 20px 60px;*/
    /*padding: 20px 20px 75px 20px;*/
    /*border-left: 15px solid #428bca;*/
    /*height: 25%;*/
    color:       #595959;
    text-shadow: 0 1px 0 #fff;
    /*box-shadow: 0 10px 10px grey;*/
    /*overflow-y: scroll;*/
}

.bomtbl {
    text-align:       center;
    background-color: white;
}

.bomtdbtn {
    text-align:       right !important;
    background-color: #d9e7f0;
}

.bomth th {
    text-align: left !important;
}

.bomheader {
    background-color: #428bca;
    color:            white;
    font-weight:      400;
}

.bomh2 {
    color: #3e3e3e;
}

.bom-btn {
    top:      10px;
    bottom:   50px;
    position: absolute;
    bottom:   25px;
    right:    25px;
    height:   35px;
}

.panel-heading-bom {
    text-align:              right !important;
    color:                   #333;
    background-color:        #d9e7f0;
    border-color:            #ddd;
    padding:                 10px 15px;
    border-bottom:           1px solid transparent;
    border-top-left-radius:  3px;
    border-top-right-radius: 3px;
}

.bigbom {
    font-size: 24px;
    margin:    10px;
}

.bigbom:after {
    content:     "\f03a";
    font-family: 'FontAwesome', sans-serif;
}

.tablecenter td {
    vertical-align: middle !important;
}

#bom .table-container {
    max-height:    275px;
    overflow-y:    auto;
    margin-bottom: 25px;
}

#bom .table-container table {
    margin-bottom: 0;
}

#bom table td.has-error {
    background: #c44747;
    transition: background 400ms;
}

.bomstatusmessage {
    border-color:     #428bca;
    background-color: #fff;
    background-image: none;
    border:           1px solid;
    border-radius:    4px;
    display:          inline-block;
    font-size:        14px;
    color:            #428bca !important;
    font-weight:      400;
    line-height:      1.42857;
    margin-bottom:    0;
    padding:          6px 12px;
    text-align:       center;
    vertical-align:   middle;
    white-space:      nowrap;
}

.bomdatafield {
    position:         absolute;
    top:              20px;
    left:             20px;
    box-shadow:       0 5px 5px grey;
    background-color: white;
    width:            calc(95%);
    width:            calc(100% - 40px);
}

.bomSlider {
    font-size:   16px;
    line-height: 25px;
}

.bomrow {
    background-color: white;
    opacity:          1.00 !important; /* modern browser */
    -moz-opacity:     1.00 !important; /* older Mozilla browser */
    -ms-filter:       "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; /* IE8 in Standard Compliant Mode */
    filter:           alpha(opacity=100) !important; /* IE5.x -7.0 */

}

.bom-closebtn {
    position: absolute;
    top:      9px;
    right:    7px;
}

.glyphicon.glyphicon-spin {
    -webkit-animation: glyphicon-spin 1s infinite linear;
    animation:         glyphicon-spin 1s infinite linear;
}

.blink {
    -webkit-animation: blink 650ms linear infinite;
    animation:         blink 650ms linear infinite;
}

.bomWaitingSlider {
    position:   absolute;
    top:        0;
    left:       0;
    background: #fff;
    background: rgba(255, 255, 255, .85);
    width:      100%;
}

.bomWaitingSlider ul {
    background:        #fff;
    position:          absolute;
    top:               50%;
    left:              50%;
    -webkit-transform: translate(-50%, -50%);
    transform:         translate(-50%, -50%);
}

.img-sticky {
    position: -webkit-sticky;
    position: sticky;
    top:      10px;
}

@-webkit-keyframes glyphicon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:         rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform:         rotate(359deg);
    }
}

@keyframes glyphicon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:         rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform:         rotate(359deg);
    }
}

@-webkit-keyframes blink {
    50% {
        opacity: 0.0;
    }
}

@keyframes blink {
    50% {
        opacity: 0.0;
    }
}

.fileinput-button {
    position:      relative;
    overflow:      hidden;
    display:       inline-block;
    margin-bottom: 5px;
}

.fileinput-button input {
    position:   absolute;
    top:        0;
    right:      0;
    margin:     0;
    opacity:    0;
    -ms-filter: 'alpha(opacity=0)';
    font-size:  200px !important;
    direction:  ltr;
    cursor:     pointer;
}

/* Fixes for IE < 8 */
@media screen\9 {
    .fileinput-button input {
        filter:    alpha(opacity=0);
        font-size: 100%;
        height:    100%;
    }
}

#jobMenuCarousel {
    position: relative;
}

#jobMenuCarousel .carousel-inner {
    padding-left:  30px;
    padding-right: 30px;
}

#jobMenuCarousel .carousel-item {
    height: auto;
}

#jobMenuCarousel .carousel-control-next, #jobMenuCarousel .carousel-control-prev {
    top:   0 !important;
    width: 30px;
}

.winkel-slider-carousel .carousel-mixed .carousel-control-prev, .winkel-slider-carousel .carousel-mixed .carousel-control-next {
    left:       10%;
    height:     40px;
    width:      40px;
    top:        auto !important;
    bottom:     0;
    background: rgba(255, 255, 255, .5);
    z-index:    20;
}

.winkel-slider-carousel .carousel-mixed .carousel-control-next {
    left: calc(10% + 40px + 10px);
}

.winkel-slider-carousel .carousel-mixed .carousel-control-prev span, .winkel-slider-carousel .carousel-mixed .carousel-control-next span {
    margin: 0;
}

.winkel-slider-carousel .carousel-indicators {
    margin-right: calc(10% + 40px + 40px + 10px + 10px);
    margin-left:  calc(10% + 40px + 40px + 10px + 10px);
}

#jobMenuCarousel .carousel-control-prev {
    left: 0;
}

#jobMenuCarousel .carousel-control-next {
    right: 0;
}

/* 991.98px = Bootstrap lg boundary. A plain 990px left 991px in a mixed state:
   the mobile rules had already stopped applying, the desktop ones had not started. */
@media screen and (max-width: 991.98px) {
    .tx-winkel-products .badge-diameter {
        width: 100% !important;
    }
}

.vimeo-wrapper.replay {
    position:       relative;
    pointer-events: auto;
}

.vimeo-wrapper.replay .loadingOverlay {
    /*background: #ffffff;*/
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    z-index:    10;

    text-align: center;
    color:      #fff;
    font-size:  50px;
}

.vimeo-wrapper.replay .replayButton {
    position:            absolute;
    top:                 50%;
    left:                50%;
    display:             inline-block;
    transform:           translateX(-50%) translateY(-50%);
    z-index:             5;
    font-size:           0;
    background-image:    url('/fileadmin/templates/2012/img/article/video/video-play-button-gray.svg');
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    width:               172px;
    height:              96px;
}

.vimeo-wrapper.replay .replayButton.expressbox {
    top: 35% !important;
}

.vimeo-wrapper.replay .loadingOverlay {
    background-image:    url('/lazyload/img/winkel-lazy-loading-1980x1080.png');
    background-repeat:   no-repeat;
    background-size:     cover;
    position:            absolute;
    background-position: center;
    top:                 0;
    left:                0;
    z-index:             1;
    width:               100%;
    height:              100%;
    display:             block;
}

.vimeo-wrapper a.replayButton:hover {
    background-image: url('/fileadmin/templates/2012/img/article/video/video-play-button-blue.svg');
}

#pagefooter {
    margin-left:  0;
    margin-right: 0;
}

.ot-xlf-image-carousel img {
    max-height: 500px;
    width:      auto;
    display:    block;
    margin:     0 auto;
}

.ot-xlf-image-carousel.heightCalculated {
    border: 1px solid rgba(196, 71, 71, 0.125);
}

.ot-xlf-image-carousel.heightCalculated .carousel-item .card {
    position:  absolute;
    width:     100%;
    top:       50%;
    transform: translateY(-50%);
    border:    0;
}

.tinyHeader {
    padding-top: 0 !important;
    transition:  all 200ms !important;
}

.tinyHeader .winkel-header figure {
    margin-top: 1rem;
    transition: all 200ms !important;
}

.winkel-header img.company_logo {
    height:     65px;
    transition: all 200ms !important;
}

.tinyHeader .winkel-header img.company_logo {
    height:     30px;
    transition: all 200ms !important;
}

.winkel-header .col-lg-8 > .mt-5 {
    transition: all 200ms !important;
}

.tinyHeader .winkel-header .col-lg-8 > .mt-5 {
    margin-top: 11px !important;
    transition: all 300ms !important;
}

.bomRequest {
    margin-bottom: 0 !important;
}

.ot-bootstrap4-new-row-outer-wrap {
    overflow: initial;
}

.ot-bootstrap4-new-row-outer-wrap .img-sticky {
    top: 150px;
}

.menu-fullwidth {
    width: 100%;
}

#winkel-mega-menu .navButtons {
    padding-left:  15px;
    padding-right: 15px;
}

#winkel-mega-menu .container-nav {
    margin-right: 0;
}

#winkel-mega-menu .col-lv2 {
    margin-right: 0 !important;
}

#winkel-mega-menu .col-lv2 > div {
    height: 100%;
}

#winkel-mega-menu .col-lv2 img {
    flex:  0 0 105px;
    width: 105px;
}

#winkel-mega-menu .col-lv2 svg {
    flex:          0 0 42px;
    margin-right:  0;
    padding-right: 1rem;
}

.show > .dropdown-menu {
    max-height: calc(100vh - 220px);
}

@media only screen and (max-width: 1199px) {
    #winkel-mega-menu .col-lv2 h2 {
        flex:      1;
        font-size: 1.5vw;
    }
}

@media only screen and (max-width: 1600px) {
    #bom {
        width: 80%;
        right: calc(-80% + 63px);
    }
}

/* 991.98px = Bootstrap lg boundary, see above */
@media only screen and (max-width: 991.98px) {
    #to-top {
        z-index: initial;
    }

    /*#bom, button[data-bom] {
        display: none !important;
    }*/
    .winkel-header {
        max-width: 100%;
    }

    .winkel-header > .row > .col-lg-4 {
        display: none !important;
    }

    .winkel-header > .row > .col-lg-8 .float-right {
        float: none !important;
    }

    .winkel-header > .row > .col-lg-8 > .mt-5 {
        margin-top: -50px !important;
    }

    #winkel-mega-menu .navbar-nav.level1 {
        overflow-y: auto;
        max-height: calc(100vh - 56px);
    }

    #winkel-mega-menu .navbar-nav.level1 .scrollable-menu, #winkel-mega-menu .navbar-nav.level1 .show > .dropdown-menu {
        max-height: initial;
    }
}

@media only screen and (max-width: 900px) {
    .winkel-header > .row > .col-lg-8 > .mt-5 span {
        display: none !important;
    }

    .winkel-header > .row > .col-lg-8 a {
        margin:     0.25rem !important;
        display:    block;
        text-align: center;
    }

    .winkel-header > .row > .col-lg-8 a.m-1 {
        margin-top: .4rem !important;
    }
}

@media only screen and (max-height: 800px) {
    #bom .bomTextIntro {
        display: none;
    }
}

.carousel-mixed .carousel-control-next, .carousel-mixed .carousel-control-prev {
    position:        absolute;
    top:             0 !important;
    bottom:          0;
    left:            0;
    z-index:         5;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           75px;
    height:          100%;
    color:           #fff;
    text-align:      center;
    opacity:         1;
    transition:      all 250ms ease;
    background:      rgba(255, 255, 255, .25);
}

.carousel-mixed .carousel-control-next:hover, .carousel-mixed .carousel-control-prev:hover {
    background: rgba(255, 255, 255, .75);
}

.carousel-mixed .carousel-control-next {
    left:  auto;
    right: 0;
}

.carousel-mixed .carousel-control-next span {
    margin-left: -10px;
}

.carousel-mixed .carousel-control-prev span {
    margin-left: 10px;
}

.carousel-mixed .carousel-item {
    height: 500px !important;
}

.carousel-mixed .carousel-item .carousel-caption {
    left: 10%;
}

@media only screen and (max-width: 800px) {
    .winkel-slider-carousel {
        height: 350px !important;
    }

    .carousel-mixed .carousel-item {
        height: 350px !important;
    }
}

#bom #bom-content {
    height: 71px;
}

#bomClose {
    font-size: 18px;
    padding:   5px;
    cursor:    pointer;
}

#bom.active #bom-content {
    height: auto;
}

.popover-body {
    text-align: center;
}

.fixedTableHeader {
    height:          500px !important;
    overflow-y:      auto !important;
    display:         block;
    border-collapse: separate;
    border-spacing:  0;
}

.fixedTableHeader thead > tr th, .fixedTableHeader thead > tr td {
    position:         sticky;
    background-color: #fff;
    top:              0;
}

.custom-control-static:before {
    position:       static;
    display:        inline-block;
    vertical-align: -2px;
    margin-right:   0.75rem;
}

.button-group.d-flex > button {
    flex: 1;
}

#to-top {
    z-index: 98;
}

#menuOverlay {
    background: rgba(0, 0, 0, .75);
    position:   fixed;
    width:      100%;
    height:     100%;
    left:       0;
    top:        0;
    z-index:    99;
}

#sidebarClose {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top:      15px;
    right:    15px;
    z-index:  1;
    color: #fff;
    background-color: #428bca;
    border: 1px solid #428bca;
    text-align: center;
}

#sidebarClose:hover {
    background-color: #3278b3;
    border: 1px solid #3071a9;
}

.bomCount {
    display:       block;
    width:         auto;
    height:        auto;
    background:    #218838;
    border-radius: 50%;
    position:      absolute;
    top:           30px;
    font-size:     18px;
    font-weight:   bold;
    line-height:   1;
    padding:       0.2em 0.4em;
    color:         #fff;
    right:         3px;
    border:        2px solid #fff;
}


@media only screen and (max-width: 575px) {
    #sidebar {
        -webkit-transform: translateX(calc(100%));
        transform: translateX(calc(100%));
    }
}

@media only screen and (min-width: 575px) {
    #winkel-mega-menu .toggleSidebar {
        display: none;
    }
}

.accordionCountries a {
    display: block;
    text-decoration: none !important;
}

.accordionCountries a:not(.collapsed) .accordion-icon > svg:first-child {
    display: none;
}

.accordionCountries a.collapsed  .accordion-icon > svg:last-child {
    display: none;
}

@media only screen and (max-width: 768px) {
    .accordionCountries div.accordion-icon {
        float: none;
        position: relative!important;
        right: auto!important;
        left: auto!important;
        margin-top: 1em!important;
        margin-bottom: 0!important;
        display: inline-block!important;
    }

    .yesblock-white {
        text-align: left;
    }

    .accordion[data-bearing-group-uid] .card-header .advantages-partial {
        margin-bottom: 30px;
    }
    .accordion[data-bearing-group-uid] .card-header > .accordion-icon {
        order: 2;
        margin-bottom: 15px;
        margin-top: -10px;
    }
}

.accordion[data-bearing-group-uid] .card-header > a {
    display: block;
}

#winkel-mega-menu .toggleSidebar {
    margin-left: 10px;
}

#winkel-mega-menu .navbar-toggler {
    margin-left: auto;
}

#winkel-mega-menu .toggleSidebar svg {
    opacity: 1;
}

html #hoseReelConfigurator .technicalData table tr {
    display: table-row !important;
}

html #hoseReelConfigurator .technicalData table td {
    white-space: normal;
}