/* -------------------------------------------- */
/* Bosch Extranet Relaunch 2017 */
/* Version: 1.50 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: STAGE SETUP */
/* !-------------------------------------------- */
 
/* !-------------------------------------------- */
/* !Color dictionary */
/* !-------------------------------------------- */

/* 
MAIN COLORS
Red #E20015 226,0,21
Fuchsia #B90276 185,2,118
Violet #50237F 80,35,127
Dark Blue #005691 0,86,145
Light Blue #008ECF 0,142,207
Turquoise #00A8B0 0,168,176
Light Green #78BE20 120,190,32
Light Green W75 #DDEFC7 221,239,199
Dark Green #006249 0,98,73
Dark Green W75 #BFD8D1 191,216,209

SUPPORT COLORS
Dark Gray #525F6B 82,95,107
Dark Gray 75% #7D8790 125,135,144
Dark Gray 50% #A8AFB5 168,175,181
Dark Gray 25% #D4D7DA 212,215,218
Light Gray #BFC0C2 191,192,194
Light Gray 75% #CFD0D1 207,208,209
Light Gray 50% #DFDFE0 223,223,224
Light Gray 25% #EFEFF0 239,239,240 

ALERT COLORS
Warning W75 #FEEBC5 254,235,197
Warning #FCAF17 252,175,23
Success #78BE20 120,190,32
Error #E20015 226,0,21
*/

/* !-------------------------------------------- */
/* !STAGE: General layout */
/* !-------------------------------------------- */

/* --- General containers */
.stage {
    min-height: 100%;
    font-family: "Bosch Sans", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
    font-size: 16px;
    color: #000;
}

.actor {
    position: relative;
}

.actor:after, 
.ensemble:after {
    content: "";
    display: table;
    clear: both;
}

/* IE11 fix: for some strange reason, display: table doesn't clear the floats for 2-column layouts */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .actor:after, 
    .ensemble:after {
        display: block;
    }
}

/* Version info for development environments */
.stage > .env-version {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 50%;
    height: 15px;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    letter-spacing: 0.1em;
    width: auto;
    white-space: nowrap;
    padding: 0 15px 0 15px;
    cursor: default;
    background: rgba(255,255,255,0.7);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

html.version-hidden .env-version {
    background-color: transparent;
    color: transparent;
}

/* --- Header container */
#ensemble_head:before {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    content: "";
    display: block;
    height: 15px;
    background: transparent url("./img/back/supergraphic.svg") center no-repeat;
    background-size: cover;
}

/* Make entire header sticky for long pages */
#ensemble_head.expression-minimal {
    position: fixed;
    z-index: 1000;
    top: 15px;
    left: 0;
    width: 100%;
}

/* Marker for development environment */
html:not(.env-production):not(.version-hidden) .stage:not(.stage-embedded):before {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    width: 100%;
    content: "";
    display: block;
    height: 15px;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, #fff 10px, #fff 20px);
    opacity: 0.4;
}

/* --- Header: Identity actor */
#ensemble_head #actor_identity {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 15px auto 5px auto;
    height: 90px;
}

#ensemble_head #actor_identity:only-child {
    margin-bottom: 15px;
}

/* Vanishes for long pages */
#ensemble_head.expression-minimal #actor_identity {
    display: none;
}

/* --- Header: Navigation actor */
#actor_nav .nav-primary, 
#actor_nav .nav-search .search-options {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

 /* for too narrow viewports */
 @media only screen and (max-width: 1199px) {
    #actor_nav .nav-search .search-options {
        padding-left: 0;
    }
}

#actor_nav .nav-search {
    min-width: 1200px;
}

/* --- Main content container */
#ensemble_head.expression-minimal + #ensemble_main {
    padding-top: 169px;
}

/* --- Footer */
#ensemble_foot {
    padding-top: 64px;
    position: relative;
    min-width: 1200px;
}

#ensemble_foot:after {
    content: "";
    display: block;
    height: 15px;
    background: transparent url("./img/back/supergraphic.svg") center no-repeat;
    background-size: cover;
}

/* Marker for development environment */
html:not(.env-production):not(.version-hidden) #ensemble_foot:before {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    display: block;
    height: 15px;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, #fff 10px, #fff 20px);
    opacity: 0.4;
}

#ensemble_foot #actor_pagetools {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}


/* !-------------------------------------------- */
/* !STAGE MODE: Administration mode (to support the temporary implementation of the legacy Page Editor */
/* !-------------------------------------------- */

/* --- Indicate lacking functionality for entire header & footer */
.stage.stage-enables-admin #ensemble_head .actor, 
.stage.stage-enables-admin #ensemble_foot .actor {
    cursor: not-allowed;
}

.stage.stage-enables-admin #ensemble_head .actor *, 
.stage.stage-enables-admin #ensemble_foot .actor * {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none; /* kills any clicking on void links + buttons */
}

/* --- Make room for an admin side bar */
.stage.stage-enables-admin {
    background: #ccc;
}

.stage.stage-enables-admin #ensemble_head, 
.stage.stage-enables-admin #ensemble_main, 
.stage.stage-enables-admin #ensemble_foot {
    width: 1200px;
    background: #fff;
}

/* --- Admin side-bar */
.stage #ensemble_tools {
    display: none;
}

.stage.stage-enables-admin #ensemble_tools {
    display: block;
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 1215px;
    width: calc(100vw - 1230px);
    height: calc(100vh - 45px);
}

/* !-------------------------------------------- */
/* !STAGE MODE: Active overlays */
/* !-------------------------------------------- */

/* --- Initialize blocking layer */
#ensemble_overlay {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(191,192,194,0.4);
}

#ensemble_head.expression-minimal ~ #ensemble_overlay {
    z-index: 1100; /* higher than a collapsed + fixed header */
}

.stage .ensemble:not(#ensemble_overlay) {
    -webkit-filter: none;
            filter: none; /* use "none" to avoid creating new stacking contexts */
/*     transition: filter ease 1s; animating this property causes performance hit on older devices */
}

/* --- Active overlay layer */
.stage.overlay-active {
    overflow: hidden;
    height: 100%;
}

.stage.overlay-active .ensemble:not(#ensemble_overlay) {
    -webkit-filter: blur(15px);
            filter: blur(15px);
/*     transition: filter ease 1s; */
}

.stage.overlay-active #ensemble_overlay {
    display: block;
}

/* IE11 doesn't support the filter property, so we're dimming the background instead */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .stage .ensemble:not(#ensemble_overlay) {
        opacity: 1;
/*         transition: opacity ease 1s; */
    }

    .stage.overlay-active .ensemble:not(#ensemble_overlay) {
        opacity: 0.3;
/*         transition: opacity ease 1s; */
    }
}

/* --- Contained actor with overlay content */
#ensemble_overlay .actor {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    max-height: calc(100vh - 130px); /* These 130px are part of some calc() formulas for overlays with inner scroll container */
    overflow: hidden;
}

#ensemble_overlay #actor_latency {
    left: 32px;
    height: 300px;
    right: 32px;
}

#ensemble_overlay #actor_modal_state {
    width: 270px;
    margin-left: -130px;
    max-height: none;
    overflow: visible;
}

#ensemble_overlay #actor_modal_state.expression-wide {
    width: 360px;
    margin-left: -180px;
}

#ensemble_overlay #actor_video {
    width: 699px;
    height: 416px;
    max-height: none;
    margin-left: -350px;
}

/* Overlays with inner scroll containers */
#ensemble_overlay #actor_purchase {
    width: 750px;
    margin-left: -375px;
}

#ensemble_overlay #actor_productpeek {
    width: 1140px;
    margin-left: -570px;
}

#ensemble_overlay #actor_promopeek {
    width: 910px;
    margin-left: -455px;
}

#ensemble_overlay #actor_material_list {
    width: 750px;
    margin-left: -375px;
}

#ensemble_overlay #actor_quicklinks {
    width: 750px;
    margin-left: -375px;
}

#ensemble_overlay #actor_notif_condition {
    width: 750px;
    margin-left: -375px;
}

/* These actors can occur in a <framed> version of the login page */
/* In this situation, the vh unit and top position are not reliable and need an override */
#ensemble_overlay #actor_password_recovery {
    width: 750px;
    margin-left: -375px;
}

#ensemble_overlay #actor_inquiry {
    width: 750px;
    margin-left: -375px;
}

/* !-------------------------------------------- */
/* !STAGE: Login & Homepage (common components) */
/* !-------------------------------------------- */

#ensemble_main .actor.substance-boxmatrix {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 64px auto 64px auto;
}


/* !-------------------------------------------- */
/* !STAGE: Login */
/* !-------------------------------------------- */

.stage-login #ensemble_main #actor_authentication {
    min-width: 1200px;
}

.stage-login #ensemble_main #actor_authentication .authentication-blocks {
    width: 1170px;
    margin: 0 auto 0 auto;
}

/* Working with padding-top here because this actor will be scrolled to */
.stage-login #ensemble_main #actor_terms {
    width: 1170px;
    padding: 64px 115px 0 115px;
    margin: 0 auto 64px auto;
}

/* !-------------------------------------------- */
/* !STAGE: Home */
/* !-------------------------------------------- */

.stage-home #ensemble_main #actor_welcome h1, 
.stage-home #ensemble_main #actor_welcome .welcome-announcement {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 32px auto;
}

.stage-home #ensemble_main #actor_welcome .welcome-dashboard {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

.stage-home #ensemble_main #actor_newsteaser h1 {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 32px auto;
}

.stage-home #ensemble_main #actor_newsteaser .newslist {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

/* for too narrow viewports */
.stage-home #ensemble_main .actor:not(.substance-boxmatrix) {
    min-width: 1200px;
}

/* --- Optional: Promoted PE pages */
.stage-home #ensemble_main #actor_pe_teaser {
    width: 100%;
}

.stage-home #ensemble_main #actor_pe_teaser .boxmatrix-title {
    width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.stage-home #ensemble_main #actor_pe_teaser .boxmatrix-list {
    width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* !-------------------------------------------- */
/* !STAGE: Cart */
/* !-------------------------------------------- */

.stage-cart #ensemble_main {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

/* --- Cart */
.stage-cart #ensemble_main #actor_cart {
    float: left;
    width: 748px;
    margin-right: 64px;
}

.stage-cart #ensemble_main #actor_cart_summary {
    float: left;
    width: 328px;
}

/* --- Checkout page */
.stage-cart #ensemble_main #actor_medialist, 
.stage-cart #ensemble_main #actor_order_confirm {
    float: left;
/*
    width: 848px;
    margin-right: 32px;
*/
    width: 748px;
    margin-right: 64px;
}

.stage-cart #ensemble_main #actor_checkout {
    float: left;
/*     width: 260px; */
    width: 328px;
}

/* IE11 fix: For some reason, IE11 doesn't give a shit for #ensemble_main width */
/* so we have to reach inside and correct the children's positioning */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .stage-cart #ensemble_main #actor_cart_head {
        width: 1140px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    .stage-cart #ensemble_main #actor_cart, 
    .stage-cart #ensemble_main #actor_medialist, 
    .stage-cart #ensemble_main #actor_order_confirm {
        margin-left: calc(50% - 570px);
    }
    
}

/* !-------------------------------------------- */
/* !STAGE: Order history */
/* !-------------------------------------------- */

/* --- Header */
#actor_history_head {
    margin-top: 64px;
    min-width: 1200px;
}

.stage-orders #ensemble_main #actor_history_head .history-title {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 24px auto;
}

.stage-orders #ensemble_main #actor_history_head .history-listcontrol {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 24px auto 0 auto;
}

 /* for too narrow viewports */
 @media only screen and (max-width: 1199px) {
    .stage-orders #ensemble_main #actor_history_head .history-title, 
    .stage-orders #ensemble_main #actor_history_head .history-listcontrol {
        padding-left: 0;
    }
}

/* --- Table */
.stage-orders #ensemble_main #actor_orderlist, 
.stage-orders #ensemble_main #actor_invoicelist, 
.stage-orders #ensemble_main #actor_deliverylist {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 48px auto 0 auto;
}

/* !-------------------------------------------- */
/* !STAGE: Promotions */
/* !-------------------------------------------- */

/* --- Wide list controller */
.stage-promotion #ensemble_main #actor_listcontrol {
    min-width: 1200px;
}

.stage-promotion #ensemble_main #actor_listcontrol .listcontrol-title, 
.stage-promotion #ensemble_main #actor_listcontrol .overview-list, 
.stage-promotion #ensemble_main #actor_listcontrol .listcontrol-filters {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

 /* for too narrow viewports */
 @media only screen and (max-width: 1199px) {
    .stage-promotion #ensemble_main #actor_listcontrol .listcontrol-title, 
    .stage-promotion #ensemble_main #actor_listcontrol .overview-list, 
    .stage-promotion #ensemble_main #actor_listcontrol .listcontrol-filters {
        padding-left: 0;
    }
}

.stage-promotion #ensemble_main #actor_listcontrol .listcontrol-title { 
    margin-top: 64px;
    margin-bottom: 32px; 
}

.stage-promotion #ensemble_main #actor_listcontrol .listcontrol-filters { 
    margin-top: 32px;
}

/* --- 2-column layout */
.stage-promotion #ensemble_main .section-wrapper {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 64px auto 0 auto;
}

.stage-promotion #ensemble_main #actor_filter {
    width: 250px;
    float: left;
}

.stage-promotion #ensemble_main #actor_promo_list {
    width: 846px;
    float: right;
}

/* !-------------------------------------------- */
/* !STAGE: Campaigns */
/* !-------------------------------------------- */

.stage-campaign #ensemble_main #actor-campaign {
    min-width: 1200px;
}

.stage-campaign #ensemble_main .campaign-header {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 64px auto 32px auto;
    position: relative;
}

.stage-campaign #ensemble_main .campaign-list {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
    position: relative;
}

/* !-------------------------------------------- */
/* !STAGE: News & Documents */
/* !-------------------------------------------- */

/* --- Wide list controller */
.stage-news #ensemble_main #actor_listcontrol {
    min-width: 1200px;
}

.stage-news #ensemble_main #actor_listcontrol .listcontrol-title, 
.stage-news #ensemble_main #actor_listcontrol .overview-list, 
.stage-news #ensemble_main #actor_listcontrol .listcontrol-filters {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

 /* for too narrow viewports */
 @media only screen and (max-width: 1199px) {
    .stage-news #ensemble_main #actor_listcontrol .listcontrol-title, 
    .stage-news #ensemble_main #actor_listcontrol .overview-list, 
    .stage-news #ensemble_main #actor_listcontrol .listcontrol-filters {
        padding-left: 0;
    }
}

.stage-news #ensemble_main #actor_listcontrol .listcontrol-title { 
    margin-top: 64px;
    margin-bottom: 32px; 
}

.stage-news #ensemble_main #actor_listcontrol .listcontrol-filters { 
    margin-top: 32px;
}

/* --- 2-column layout */
.stage-news #ensemble_main .section-wrapper {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 64px auto 0 auto;
}

.stage-news #ensemble_main #actor_filter {
    width: 250px;
    float: left;
}

.stage-news #ensemble_main #actor_newslist {
    width: 846px;
    float: right;
}

/* --- 1-column layout */
.stage-news #ensemble_main #actor_news_story {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 64px auto 0 auto;
}

/* !-------------------------------------------- */
/* !STAGE: Services */
/* !-------------------------------------------- */

.stage-service #ensemble_main .section-wrapper {
    width: 1170px;
    padding: 64px 15px 0 15px;
    margin: 0 auto 64px auto;
}

.stage-service #ensemble_main .section-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.stage-service #ensemble_main #actor_sub_nav {
    width: 264px;
    float: left;
}

.stage-service #ensemble_main #actor_sub_nav + #actor_service {
    width: 846px;
    float: right;
}

/* Case when there's no subnavigation */
.stage-service #ensemble_main #actor_service:first-child {
    width: 100%;
    float: none;
}

/* --- Wide self-help actor */
.stage-service #ensemble_main #actor_selfhelp {
    min-width: 1200px;
}

.stage-service #actor_selfhelp .selfhelp-hotline {
    width: 570px;
    float: left;
    margin-left: calc(50% - 570px);
    padding-right: 110px;
}

.stage-service #actor_selfhelp .selfhelp-faq {
    width: 570px;
    float: left;
    padding-left: 110px;
}

/* IE11 doesn't work well with admin-mode (i.e. changes to #ensemble_main), so we have manually fix it */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .stage-service.stage-enables-admin #ensemble_main .section-wrapper {
        width: 1200px;
        margin-left: 0;
        margin-bottom: 0;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 64px;
        background: #fff;
    }
    
    .stage-service.stage-enables-admin #ensemble_main #actor_selfhelp {
        width: 1200px;
    }
}

/* !-------------------------------------------- */
/* !STAGE: My Account */
/* !-------------------------------------------- */

.stage-account #ensemble_main {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

.stage-account #ensemble_main #actor_sub_nav {
    width: 264px;
    float: left;
    margin-right: 30px;
    margin-top: 64px;
}

.stage-account #ensemble_main #actor_sub_nav + .actor {
    width: 846px;
    float: right;
    margin-top: 64px;
}

.stage-account #ensemble_main section.actor:last-of-type,
.stage-account #ensemble_main header.actor:last-of-type {
	width: 846px;
    float: right;
}

/* IE11 fix: For some reason, IE11 doesn't give a shit for #ensemble_main width */
/* so we have to reach inside and correct the children's positioning */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .stage-account #ensemble_main #actor_sub_nav {
        margin-left: calc(50% - 570px);
    }
    
    .stage-account #ensemble_main #actor_sub_nav + .actor {
        margin-right: calc(50% - 570px);
        margin-top: 48px;
    }
    
    .stage-account #ensemble_main section.actor:last-of-type,
    .stage-account #ensemble_main header.actor:last-of-type {
	margin-right: calc(50% - 570px);
    }
}