/* -------------------------------------------- */
/* Bosch Extranet Relaunch 2017 */
/* Version: 1.116 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: ACTORS for Header & Footer */
/* !-------------------------------------------- */

/* !-------------------------------------------- */
/* !ACTOR: Identity */
/* !-------------------------------------------- */

/* --- Logo and subbrand */
#actor_identity #stage_logo {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 18px;
    width: 170px;
    height: auto;
}

#actor_identity #stage_logo p {
    display: none;
}

#actor_identity #stage_title {
    position: absolute;
    right: 15px;
    top: 58px;
    font-size: 24px;
    font-weight: 200;
}

/* --- Tool navigation */
#actor_identity .identity-tools {
    float: right;
    margin-top: 10px;
}

#actor_identity .identity-tools:after {
    content: "";
    display: table;
    clear: both;
}

#actor_identity .identity-tools .cell {
    float: left;
    font-size: 12px;
    padding: 0 15px 0 15px;
    height: 30px;
    font-weight: 400;
    border-left: 1px solid #dfdfe0;
}

#actor_identity .identity-tools .cell .menu-action {
    line-height: 30px;
}

#actor_identity .identity-tools .cell:first-child {
    border: none;
}

#actor_identity .identity-tools .cell:last-child {
    padding-right: 0;
}

/* Normal links */
#actor_identity .identity-tools .tool-link {
}

/* Flyout controllers and hosts */
#actor_identity .identity-tools .tool-view .data-action {
    font-weight: bold;
}

#actor_identity .identity-tools .tool-view.flyout-active:before {
    left: auto;
    right: 50px;
}

#actor_identity .identity-tools .flyout-controller {
    padding-right: 16px;
    position: relative;
    height: 100%;
    background-position: left -85px;
}

#actor_identity .identity-tools .flyout-controller[disabled="disabled"] {
    padding-right: 0;
    padding-left: 0;
    background: none;
    color: #000;
}

#actor_identity .identity-tools .flyout-controller:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 16px;
    height: 8px;
    background: transparent url("./img/icon/icon_util_dropdown_black.svg") right center no-repeat;
    background-size: 10px;
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

#actor_identity .identity-tools .flyout-controller.flyout-active:after {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

#actor_identity .identity-tools .flyout-controller:hover,
#actor_identity .identity-tools .flyout-controller.flyout-active {
    background-position: left -5px;
}

#actor_identity .identity-tools .flyout-controller[disabled="disabled"]:after {
    display: none;
}

#actor_identity .identity-chooser {
    width: 260px;
    right: 15px;
    top: 43px;
    padding: 12px 0 12px 0;
}

#actor_identity .identity-dialog {
    width: 360px;
    top: 34px;
    bottom: auto;
    left: 50%;
    margin-left: -180px;
    padding: 0;
}

/* --- Simple chooser flyouts for view mode and language */
#actor_identity .identity-chooser .menu-action {
    padding: 16px 24px 16px 24px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: block;
    width: 100%;
}

#actor_identity .identity-chooser .cell { 
    transition: background 0.3s ease;
}

#actor_identity .identity-chooser .cell:hover, 
#actor_identity .identity-chooser .cell.item-active {
    background: #EFEFF0;
    transition: background 0.3s ease;
}

/* --- Flyout for customer selection */
#actor_identity .identity-dialog .customer-search {
    padding: 32px 32px 24px 32px;
    border-bottom: 1px solid #dfdfe0;
    margin-bottom: 8px;
}

/* Search field */
#actor_identity .identity-dialog .customer-search > .field-entry {
    margin-bottom: 24px;
}

/* Advanced filters: Expander */
#actor_identity .identity-dialog .customer-search > .data-action {
    font-size: 14px;
    line-height: 20px;
}

#actor_identity .identity-dialog .search-advanced {
    display: none;
}

#actor_identity .identity-dialog .search-advanced:after {
    content: "";
    display: table;
    clear: both;
}

#actor_identity .identity-dialog .customer-search.item-active .search-advanced {
    display: block;
    margin-top: 16px;
}

/* Advanced filters: fields */
#actor_identity .identity-dialog .search-advanced .field-entry:first-child {
    float: none;
    width: 100%;
    margin-bottom: 16px;
}

#actor_identity .identity-dialog .search-advanced .field-entry {
    float: left;
    width: calc(50% - 12px);
}

#actor_identity .identity-dialog .search-advanced .field-entry:first-child + .field-entry {
    margin-right: 24px;
}

/* Customer list */
#actor_identity .identity-dialog .customer-list {
    max-height: calc(100vh - 250px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#actor_identity .identity-dialog .customer-search.item-active + .customer-list {
    max-height: calc(100vh - 400px);
}

#actor_identity .identity-dialog .customer-item {
    font-size: 14px;
    line-height: 20px;
    padding: 16px 32px 16px 32px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#actor_identity .identity-dialog .customer-item:hover, 
#actor_identity .identity-dialog .customer-item.item-active {
    background: #EFEFF0;
    transition: background 0.3s ease;
}

#actor_identity .identity-dialog .customer-id {
    font-size: 12px;
    line-height: 18px;
}

#actor_identity .identity-dialog .customer-warning .customer-id {
    color: #FCAF17;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
}

#actor_identity .identity-dialog .customer-warning .customer-id:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.7ex;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #FCAF17;
}

#actor_identity .identity-dialog .customer-name {
    font-weight: bold;
}

/* !-------------------------------------------- */
/* !ACTOR: Navigation */
/* Reacts to expressions of superior #ensemble_head: (default), minimal */
/* !-------------------------------------------- */

#actor_nav { 
    background: #fff;
}

#ensemble_head.expression-minimal #actor_nav { 
    border-bottom: 1px solid #dfdfe0;
}

/* --- Primary sections */
#actor_nav .nav-primary {
    font-size: 18px;
    position: relative; /* Stacking context for mega flyouts */
}

#actor_nav .nav-primary:after {
    content: "";
    display: table;
    clear: both;
}

#actor_nav .nav-primary .primary-sections {
    float: left;
}

#actor_nav .nav-primary .primary-sections .cell {
    position: relative;
    float: left;
    margin-right: 25px;
    border-bottom: 3px solid transparent;
    transition: border 0.3s ease;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-sections .cell:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-sections .cell.item-active {
    border-color: #005691;
    transition: border 0.3s ease;
}

#actor_nav .nav-primary .primary-sections .menu-action {
    display: block;
    padding: 15px;
    font-weight: 400;
}

#actor_nav .nav-primary .primary-sections .cell:first-child .menu-action {
    padding-left: 0;
}

/* --- Primary tools */
#actor_nav .nav-primary .primary-tools {
    float: right;
}

#actor_nav .nav-primary .primary-tools .cell {
    float: left;
    margin-left: 10px;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: border 0.3s ease;
}

/* Detailed positioning for Order History */
#actor_nav .nav-primary .primary-tools .tools-history {
    margin-right: 10px;
}

/* Detailed positioning for Account */
#actor_nav .nav-primary .primary-tools .tools-account .menu-action {
    margin-left: 8px;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-account .menu-action {
    background-position: 0 9px;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-account .menu-action:hover,
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-account.item-active .menu-action {
    background-position: 0 -71px;
}

#actor_nav .nav-primary .primary-tools .tools-account:before {
    left: 30px;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-account:before {
    left: 28px;
}

/* Divider lines */
#actor_nav .nav-primary .primary-tools .cell:nth-child(2):after, 
#actor_nav .nav-primary .primary-tools .cell:nth-last-child(2):after {
    content: "";
    display: block;
    position: absolute;
    left: -15px;
    top: 12px;
    background: #D4D7DA;
    width: 2px;
    height: 36px;
}

#actor_nav .nav-primary .primary-tools .cell:nth-last-child(2):after {
    left: -2px;
}

/* Special tools and placeholder space, only visible for collapsed headers */
#actor_nav .nav-primary .primary-tools .tools-pagetop {
    display: none;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-pagetop {
    display: block;
    margin-left: 52px; /* Makes room for QuickAdd icon from search navigation */
}

/* Tool highlighting */
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .cell:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .cell.item-active {
    border-bottom-color: #005691;
    transition: border 0.3s ease;
}

#actor_nav .nav-primary .primary-tools .menu-action {
    display: block;
    padding: 15px;
    font-weight: 400;
}

#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-pagetop:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-pagetop.item-active, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-notifications:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-notifications.item-active, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-chat:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-primary .primary-tools .tools-chat.item-active {
    border-bottom-color: transparent;
}

/* --- Counter on top of primary sections or tool icons */
#actor_nav .nav-primary .menu-action .cell-counter {
    background-color: #E20015;
    color: #fff;
    display: block;
    position: absolute;
    top: 8px;
    left: 5px;
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 900;
    line-height: 20px;
    padding: 0 4px 0 4px;
    text-align: center;
    text-indent: 0;
}

#actor_nav .nav-primary .menu-action .cell-counter.counter-zero {
    display: none;
}

/* Campaigns */
#actor_nav .nav-primary .primary-sections .menu-action .cell-counter {
    background-color: #E20015;
    left: auto;
    right: 0;
}

#actor_nav .nav-primary .primary-sections .item-active .menu-action .cell-counter {
    background-color: #008ECF;
}

/* Deprecated: Contact/Chat flyout */
#actor_nav .nav-primary .tools-chat .menu-action .cell-counter {
    background-color: #E20015;
    left: 0;
}

/* Notifications */
#actor_nav .nav-primary .tools-notifications .menu-action .cell-counter {
    background-color: #008ECF;
}

/* Product lists */
#actor_nav .nav-primary .tools-lists .menu-action .cell-counter {
    background-color: #008ECF;
    left: -1px;
}

/* Carts */
#actor_nav .nav-primary .tools-carts .menu-action .cell-counter {
    background-color: #E20015;
    left: -1px;
}

/* --- Search tools */
#actor_nav .nav-search {
    background: #005691;
    color: #fff;
    font-size: 18px;
    height: 55px;
    position: relative; /* Stacking context for mega flyouts */
}

#actor_nav .nav-search:after {
    content: "";
    display: table;
    clear: both;
}

#ensemble_head.expression-minimal #actor_nav .nav-search {
    height: 0;
}

#ensemble_head.expression-minimal #actor_nav .nav-search .search-options .cell {
    display: none;
}

/* Media Center & Quick Add buttons */
#actor_nav .nav-search .search-quickadd, 
#actor_nav .nav-search .search-media {
    float: right;
    height: 55px;
}

#actor_nav .nav-search .cell .menu-action {
    display: block;
    padding: 15px;
    font-size: 16px;
    font-weight: 400;
}

#actor_nav .nav-search .search-quickadd .menu-action {
    padding-right: 0;
}

#ensemble_head.expression-minimal #actor_nav .nav-search .search-options .search-quickadd {
    display: block;
    position: absolute;
    top: -56px;
    right: calc(50% - 525px);
}

/* Search input field and submit button */
#actor_nav .nav-search .search-box {
    float: left;
    width: 50%;
    height: 55px;
    position: relative;
}

#actor_nav .nav-search .search-box input {
    margin: 7px 0 0 0;
    border-radius: 0;
    height: 40px;
    padding-right: 40px;
}

#actor_nav .nav-search .search-box.field-waiting input {
    padding-right: 80px;
}

#actor_nav .nav-search .search-box.flyout-active:before {
    left: 32px; /* reposition arrow for an active flyout */
}

#actor_nav .nav-search .search-box .data-action.icon-search {
    position: absolute;
    right: 5px;
    top: 11px;
}

#actor_nav .nav-search .search-box .data-action.icon-close {
    bottom: 8px;
}

#actor_nav .nav-search .search-box.field-waiting .waiting-indicator {
    bottom: 8px;
    right: 40px;
}

#ensemble_head.expression-minimal #actor_nav .nav-search .search-options .search-box {
    display: block;
    position: absolute;
    top: -56px;
    right: calc(50% - 179px);
    width: 60px;
    overflow: hidden;
    padding-left: 60px;
    transition: width 0.5s ease;
}

#ensemble_head.expression-minimal #actor_nav .nav-search .search-box.item-active {
    padding-left: 0;
    width: 760px;
    transition: width 0.5s ease;
}

/* --- Small flyout containers, triggered by primary navigation */
#actor_nav .nav-sections-secondary {
    left: 0;
    right: 0;
    top: 55px;
    z-index: 60; /* a bit higher than 51, used by shipping destination flyout */
}

#actor_nav .nav-tools-secondary {
    right: 15px;
    width: 460px; /* 360px were specified */
    top: 55px;
    z-index: 60; /* a bit higher than 51, used by shipping destination flyout */
}

#ensemble_head.expression-minimal #actor_nav .nav-tools-secondary {
    max-height: calc(100vh - 92px);
    overflow: auto;
}

/* --- Mega flyout containers, triggered by primary navigation */
#actor_nav .nav-search-string, 
#actor_nav .nav-search-quickadd {
    width: 1140px;
    top: 55px;
    left: 50%;
    margin-left: -570px;
    color: #000;
    z-index: 60; /* a bit higher than 51, used by shipping destination flyout */
}

 /* for too narrow viewports */
@media only screen and (max-width: 1199px) {
    #actor_nav .nav-search-string, 
    #actor_nav .nav-search-quickadd {
        margin-left: -585px;
    }
}

/* Expand the mega flyouts immediately to full available height (use inner scroll container) */
#ensemble_head #actor_nav .nav-search-string {
    height: calc(100vh - 242px);
    overflow: hidden;
}

#ensemble_head #actor_nav .nav-search-quickadd {
    height: calc(100vh - 242px);
    overflow: hidden;
}

/* IE11 has some scrolling bugs, so we let the height extend automatically */
/* Use this mode for too narrow viewports too */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), only screen and (max-width: 1199px) {
    #ensemble_head #actor_nav .nav-search-quickadd {
        height: auto;
        overflow: visible;
    }
}

/* For collapsed headers, an inner scroll container is used */
/* max-height: substract height of header + desired padding-bottom */
#ensemble_head.expression-minimal #actor_nav .nav-search-string {
    top: 0;
    height: calc(100vh - 92px);
}

#ensemble_head.expression-minimal #actor_nav .nav-search-quickadd {
    top: 0;
    height: calc(100vh - 92px);
}

/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout: Notifications */
/* !-------------------------------------------- */

/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .toolbox-notifications {
    margin: -32px -32px -32px -32px;
    padding: 16px 32px 64px 32px;
}

#actor_nav .toolbox-notifications .notifications-list {
    border-bottom: 1px solid #dfdfe0;
}

#actor_nav .toolbox-notifications .substance-notification {
    padding: 24px 32px 24px 62px;
    margin: 0 -32px 0 -32px;
    transition: background-color 0.3s ease;
}

#actor_nav .toolbox-notifications .substance-notification:hover {
    background-color: #EFEFF0;
    transition: background 0.3s ease;
}

#actor_nav .toolbox-notifications .substance-notification:before {
    top: 28px;
    left: 32px;
}

#actor_nav .toolbox-notifications .substance-notification.notification-pinned:after {
    right: 32px;
    top: 24px;
}

#actor_nav .toolbox-notifications > .link-action {
    font-size: 14px;
    line-height: 20px;
    float: right;
    margin-top: 16px;
}

/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout: Contact/Chat */
/* This flyout is marked as DEPRECATED! */
/* This code should be merged and consolidated with the following flyout Account */
/* !-------------------------------------------- */

/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .toolbox-contact, 
#actor_nav .toolbox-assistance {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin: -32px;
    padding: 32px;
}

#actor_nav .toolbox-assistance {
    padding-bottom: 96px;
}

#actor_nav .toolbox-contact h3, 
#actor_nav .toolbox-assistance h3 {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 24px;
}

#actor_nav .toolbox-assistance h3 {
    border-top: 1px solid #dfdfe0;
    padding-top: 32px;
}

#actor_nav .toolbox-contact .substance-vcard {
    margin-bottom: 24px;
}

#actor_nav .toolbox-assistance .link-action {
    margin-top: 24px;
}

#actor_nav .toolbox-assistance .primary-action {
    float: right;
    margin-top: 24px;
}

/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout: Account, Contacts + Assistance */
/* !-------------------------------------------- */

/* --- Containers and headlines */
/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .toolbox-account, 
#actor_nav .toolbox-quicklinks {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    position: relative;
    margin: -32px;
    padding: 32px;
}

#actor_nav .toolbox-account h3, 
#actor_nav .toolbox-quicklinks h3 {
    font-weight: 100;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 24px;
}

/* --- Shortcuts to account pages */
#actor_nav .toolbox-account {
    margin-bottom: 16px;
}

#actor_nav .toolbox-account .cell {
    margin-bottom: 16px;
}

/* Logout button */
#actor_nav .toolbox-account .link-logout {
    position: absolute;
    right: 32px;
    bottom: 44px;
    margin-bottom: 0;
}

/* --- NEW: Moved Bosch contact information */
#actor_nav .toolbox-account ~ .toolbox-contact {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* --- NEW: Moved Assistance & FAQ */
#actor_nav .toolbox-account ~ .toolbox-assistance {
    background: #EFEFF0;
}

#actor_nav .toolbox-account ~ .toolbox-assistance h3 {
    border-top: none;
    padding-top: 0;
}

/* --- Quicklinks */
#actor_nav .toolbox-quicklinks {
    background: #EFEFF0;
}

#actor_nav .toolbox-quicklinks .link-list:after {
    content: "";
    display: table;
    clear: both;
}

#actor_nav .toolbox-quicklinks .cell {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* Edit button */
#actor_nav .toolbox-quicklinks > .data-action {
    position: absolute;
    right: 32px;
    top: 35px;
}

/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout: Carts & Lists */
/* !-------------------------------------------- */

/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .toolbox-prodlist {
    font-size: 12px;
    line-height: 18px;
    margin: -32px;
    padding: 32px;
}

/* --- Message containers if user doesn't have any list/cart */
#actor_nav .toolbox-prodlist .prodlist-message {
    font-size: 14px;
    line-height: 20px;
    padding: 24px 0 24px 0;
}

#actor_nav .toolbox-prodlist .prodlist-message:last-child {
    padding-bottom: 0;
}

#actor_nav .toolbox-prodlist .prodlist-message p + p {
    margin-top: 1.2em;
}

/* --- Utility links */
#actor_nav .toolbox-prodlist .prodlist-utility {
    font-size: 16px;
    line-height: 20px;
    border-bottom: 1px solid #dfdfe0;
}

#actor_nav .toolbox-prodlist .prodlist-utility:last-of-type {
    border: none;
}

#actor_nav .toolbox-prodlist .prodlist-utility .link-action, 
#actor_nav .toolbox-prodlist .prodlist-utility .data-action {
    margin: 24px 0 24px 0;
}

/* --- Cart/List containers with expander */
#actor_nav .toolbox-prodlist .prodlist-item {
    border-bottom: 1px solid #dfdfe0;
}

#actor_nav .toolbox-prodlist .prodlist-item .prodlist-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 12px 0;
}

#actor_nav .toolbox-prodlist .prodlist-item:first-child .prodlist-control {
    margin-top: 0;
}

/* Collapser/Expander */
#actor_nav .toolbox-prodlist .data-action {
    font-size: 16px;
    line-height: 20px;
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: auto;
}

#actor_nav .toolbox-prodlist .data-action em {
    font-weight: 400;
}

/* Jump button to cart/list page */
#actor_nav .toolbox-prodlist .primary-action {
    margin-left: 16px;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
}

/* Container with products */
#actor_nav .toolbox-prodlist .prodlist-container {
    display: none;
    margin-top: 32px;
}

#actor_nav .toolbox-prodlist .prodlist-item.item-active .prodlist-container {
    display: block;
}

/* --- Product containers */
#actor_nav .toolbox-prodlist .prodlist-item .molecule:not(:first-child) {
    padding-top: 24px;
}

#actor_nav .toolbox-prodlist .prodlist-item .molecule:not(:last-child) {
    border-bottom: 1px solid #dfdfe0;
    padding-bottom: 24px;
}

#actor_nav .toolbox-prodlist .prodlist-item .prodlist-product:last-child {
    margin-bottom: 48px;
}

#actor_nav .toolbox-prodlist .prodlist-item .molecule:after {
    content: "";
    display: table;
    clear: both;
}

#actor_nav .toolbox-prodlist .prodlist-product .atom {
    float: left;
    overflow: hidden;
}

/* Delete button */
#actor_nav .toolbox-prodlist .prodlist-product .icon-delete {
    width: 20px;
    background-position: -10px -5px;
}

#actor_nav .toolbox-prodlist .prodlist-product .icon-delete:hover {
    background-position: -10px -85px;
}

/* Product image */
#actor_nav .toolbox-prodlist .prodlist-product .product-image {
    width: 64px;
    height: 50px;
    margin: 0 8px 0 8px;
}

/* Product title + id */
#actor_nav .toolbox-prodlist .prodlist-product .product-info {
    width: 162px;
    margin-right: 8px;
}

#actor_nav .toolbox-prodlist .prodlist-product .product-info .product-id:not(:first-child) {
    margin-top: 8px;
}

/* Product price */
#actor_nav .toolbox-prodlist .prodlist-product .substance-pricelist {
    float: right;
    width: 126px;
}

#actor_nav .toolbox-prodlist .prodlist-product .substance-pricelist .price-name {
    margin-right: 0;
    display: block;
}

#actor_nav .toolbox-prodlist .prodlist-product .substance-pricelist .price-value {
    display: block;
}

/* --- Summary per cart/list */
#actor_nav .toolbox-prodlist .prodlist-summary .link-action {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 48px;
}

/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout Global Search */
/* !-------------------------------------------- */

/* --- Help section (for empty search field with :focus) */
/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .nav-search-string .search-help {
    font-size: 14px;
    line-height: 20px;
    margin: -32px;
    padding: 32px;
}

/* Inner scroll container for collapsed headers */
#ensemble_head #actor_nav .nav-search-string .search-help {
    height: calc(100vh - 250px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#ensemble_head.expression-minimal #actor_nav .nav-search-string .search-help {
    height: calc(100vh - 100px);
}

/* Search examples and message */
#actor_nav .nav-search-string .search-help .help-examples + .substance-message {
    margin-top: 16px;
}

/* Search history */
#actor_nav .nav-search-string .search-help .help-history {
    margin-top: 16px;
    border-top: 1px solid #dfdfe0;
    padding-top: 24px;
}

#actor_nav .nav-search-string .search-help h2 {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 24px;
}

#actor_nav .nav-search-string .search-help .history-entry:not(:last-child) {
    margin-bottom: 16px;
}

#actor_nav .nav-search-string .search-help .link-action, 
#actor_nav .nav-search-string .search-help .data-action {
    font-weight: 400;
}

#actor_nav .nav-search-string .search-help .help-history .data-action {
    margin-top: 32px;
}

/* --- Results section with container switching for different search pools */
#actor_nav .nav-search-string .search-results {
    font-size: 14px;
    line-height: 20px;
    margin: -32px;
    overflow: hidden;
}

#actor_nav .nav-search-string .search-results:after {
    content: "";
    display: table;
    clear: both;
}

#actor_nav .nav-search-string .search-results .substance-tab-bar {
    padding-left: 32px;
    padding-top: 16px;
}

/* Section hiding and scrolling */
#actor_nav .nav-search-string .search-results .results-section {
    display: none;
}

#actor_nav .nav-search-string .search-results .results-section.item-active {
    display: block;
}

#ensemble_head #actor_nav .nav-search-string .search-results .results-section {
    height: calc(100vh - 305px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#ensemble_head.expression-minimal #actor_nav .nav-search-string .search-results .results-section {
    height: calc(100vh - 155px);
}

/* Show more buttons below results table */
#actor_nav .nav-search-string .search-results .results-section .substance-table + .primary-action {
    display: table;
    margin: 32px auto 0 auto;
}

/* --- Results section: Products */
/* Faking a column background of infinite height w/o causing a scrollbar */
#actor_nav .nav-search-string .section-products {
    background: linear-gradient(to right, #fff, #fff 68.42%, rgb(245, 246, 246) 68.42%);
}

#actor_nav .nav-search-string .section-products:after {
    content: "";
    display: table;
    clear: left;
}

#actor_nav .nav-search-string .section-products .results-list {
    float: left;
    width: 780px;
    padding: 32px 0 32px 0;
}

#actor_nav .nav-search-string .section-products .results-inspector { 
    float: left;
    width: calc(100% - 780px);
    padding: 32px;
    background: rgb(245, 246, 246); /* spec'd but not part of Bosch system */
    position: relative;
}

/* Results table */
#actor_nav .nav-search-string .section-products .results-list .substance-table tr {
    border: none;
}

#actor_nav .nav-search-string .section-products .results-list .substance-table td {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 0 8px 32px;
    vertical-align: middle;
}

#actor_nav .nav-search-string .section-products .results-list .substance-table td:last-child {
    padding: 0 40px 0 32px;
}

#actor_nav .nav-search-string .section-products .results-list .item-active {
    background: rgb(245, 246, 246); /* spec'd but not part of Bosch system */
}

#actor_nav .nav-search-string .section-products .results-list td > .link-action {
    display: table-cell; /* with this trick, we can horizontally align link pairs */
    vertical-align: middle;
}

#actor_nav .nav-search-string .section-products .results-list .substance-banner {
    margin-right: 8px;
}

#actor_nav .nav-search-string .section-products .results-list .product-id {
    color: #525F6B;
    white-space: nowrap;
}

#actor_nav .nav-search-string .section-products .results-list .product-id em {
    color: #000;
    font-weight: inherit
}

#actor_nav .nav-search-string .section-products .results-list .product-highlight .product-price {
   font-weight: bold;
   white-space: nowrap;
   text-align: right;
}

#actor_nav .nav-search-string .section-products .results-list .substance-toolchain {
    display: none;
}

#actor_nav .nav-search-string .section-products .results-list .item-active .substance-toolchain {
    display: block;
    text-align: left;
}

#actor_nav .nav-search-string .section-products .results-list .item-active .substance-toolchain + .link-action {
    display: none;
}

/* Results section: Products / Categories list */
#actor_nav .nav-search-string .section-products h2 {
    font-size: 12px;
    line-height: 20px;
    border-top: 1px solid #dfdfe0;
    padding-top: 32px;
    margin: 32px 40px 24px 32px;
}

#actor_nav .nav-search-string .section-products .categories-entry {
    margin-bottom: 16px;
    margin-left: 32px;
}


/* Results section: Products / Inspector */
#actor_nav .nav-search-string .section-products .results-inspector h3 {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    margin: 32px 0 8px 0;
}

#actor_nav .nav-search-string .section-products .results-inspector .substance-table tr {
    border-color: #CFD0D1;
}

#actor_nav .nav-search-string .section-products .results-inspector .substance-table td {
    line-height: 20px;
    padding: 8px;
}


/* --- Results section: News */
#actor_nav .nav-search-string .section-news {
    padding: 32px;
}

#actor_nav .nav-search-string .section-news .substance-table tr:first-child {
    border-top: none;
}

#actor_nav .nav-search-string .section-news .substance-table td {
    font-size: 14px;
    line-height: 20px;
}

#actor_nav .nav-search-string .section-news .story-date, 
#actor_nav .nav-search-string .section-news .story-title {
    font-weight: 400;
}

#actor_nav .nav-search-string .section-news .story-content {
    width: 50%;
}

/* --- Results section: Docs */
#actor_nav .nav-search-string .section-docs {
    padding: 32px;
}

#actor_nav .nav-search-string .section-docs .substance-table tr:first-child {
    border-top: none;
}

#actor_nav .nav-search-string .section-docs .substance-table td {
    font-size: 14px;
    line-height: 20px;
}

#actor_nav .nav-search-string .section-docs .doc-date, 
#actor_nav .nav-search-string .section-docs .doc-title {
    font-weight: 400;
}

#actor_nav .nav-search-string .section-docs .doc-description {
    width: 50%;
}

/* --- Results section: Pages */
#actor_nav .nav-search-string .section-pages {
    padding: 32px;
}

#actor_nav .nav-search-string .section-pages .substance-table tr:first-child {
    border-top: none;
}

#actor_nav .nav-search-string .section-pages .substance-table td {
    font-size: 14px;
    line-height: 20px;
}

#actor_nav .nav-search-string .section-pages .page-date, 
#actor_nav .nav-search-string .section-pages .page-title {
    font-weight: 400;
}

#actor_nav .nav-search-string .section-pages .page-date {
    width: 200px;
}


/* !-------------------------------------------- */
/* !ACTOR COMPONENT: Flyout Quick Add */
/* !-------------------------------------------- */

#actor_nav .nav-search-quickadd > .icon-close {
    position: absolute;
    right: 0;
    top: 0;
}

/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .nav-search-quickadd .quickadd-section {
    display: none;
    margin: 0 -32px -32px -32px;
    padding: 0 32px 32px 32px;
}

#actor_nav .nav-search-quickadd .quickadd-section.item-active {
    display: block;
}

/* Scrollable height: subtract heights of header, margin-bottom of overlay container, headline, tab bar and padding-bottom inside overlay container */
/* For .quickadd-section.section-lines, we use a different scrolling container */
#ensemble_head #actor_nav .nav-search-quickadd .quickadd-section.section-upload,
#ensemble_head #actor_nav .nav-search-quickadd .quickadd-section.section-copypaste {
    height: calc(100vh - 348px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#ensemble_head.expression-minimal #actor_nav .nav-search-quickadd .quickadd-section.section-upload, 
#ensemble_head.expression-minimal #actor_nav .nav-search-quickadd .quickadd-section.section-copypaste {
    height: calc(100vh - 200px);
}

/* --- Headline and tab bar */
/* Killing + recreating padding is necessary to create a "safe click" area inside the flyout, evaluated by a click event handler */
#actor_nav .nav-search-quickadd .substance-tab-bar {
    margin: -32px -32px 0 -32px;
    padding: 16px 32px 0 32px;
}

/* --- List of new products */
/* Table becomes our scrolling container within the flyout */
#actor_nav .nav-search-quickadd .section-lines .lines-list {
    height: calc(100vh - 418px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#ensemble_head.expression-minimal #actor_nav .nav-search-quickadd .section-lines .lines-list {
    height: calc(100vh - 270px);
}

/* IE11 has some scrolling bugs, so we let the height extend automatically */
/* Use this mode for too narrow viewports too */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none), only screen and (max-width: 1199px) {
    #actor_nav .nav-search-quickadd .section-lines .lines-list {
        height: auto;
        overflow: visible;
    }
}

/* List entries */
#actor_nav .nav-search-quickadd .section-lines .lines-list tr {
    border-bottom: none;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list th {
    font-weight: normal;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list .item-controller {
    width: 40px;
    padding-left: 0;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list .product-data {
    font-size: 12px;
    line-height: 16px;
    color: #333;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list .product-label {
    font-size: 12px;
    line-height: 14px;
    color: #008ECF;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list .product-availability {
    font-size: 14px;
    line-height: 20px;
}

#actor_nav .nav-search-quickadd .section-lines .lines-list .price-value {
    display: block;
}

/* Pull down flyout position to avoid having the first one cut off by the tab bar */
#actor_nav .nav-search-quickadd .section-lines .lines-list .price-entry .flyout-host {
    top: -32px;
    -webkit-transform: none;
            transform: none;
}

/* Hide extended info from lines which didn't run through a price check */
#actor_nav .nav-search-quickadd .section-lines thead tr:not(.item-active) * {
    visibility: hidden;
}

#actor_nav .nav-search-quickadd .section-lines .line-item:not(.item-active) .item-checking * {
    display: none;
}

/* --- List controller */
#actor_nav .nav-search-quickadd .section-lines .lines-control {
    font-size: 14px;
    line-height: 20px;
    margin-top: 32px;
    padding-left: 40px;
}

#actor_nav .nav-search-quickadd .section-lines .lines-control:after {
    content: "";
    display: table;
    clear: both;
}

#actor_nav .nav-search-quickadd .section-lines .lines-control .data-action + .data-action {
    margin-left: 16px;
}

#actor_nav .nav-search-quickadd .section-lines .lines-control .substance-toolchain {
    display: inline-block;
    float: right;
}

/* Expand the flyouts upwards */
#actor_nav .nav-search-quickadd .section-lines .lines-control .substance-toolchain .flyout-host {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
}

/* --- Product recommendations (this component has been deprecated)
#actor_nav .nav-search-quickadd .section-lines .lines-repeat h3 {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dfdfe0;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .repeat-item {
    float: left;
    width: calc((100% / 3) - (64px * 2 / 3));
    font-size: 14px;
    line-height: 20px;
    padding: 32px 0 0 124px;
    margin-right: 64px;
    position: relative;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .repeat-item:last-child {
    margin-right: 0;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .data-action {
    position: absolute;
    left: 0;
    top: 50%;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .product-image {
    position: absolute;
    top: 32px;
    left: 30px;
    width: 84px;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .product-id {
    font-size: 12px;
    line-height: 20px;
}

#actor_nav .nav-search-quickadd .section-lines .lines-repeat .substance-pricelist {
    text-align: left;
}
*/
 
/* --- Data Uploader */
#actor_nav .nav-search-quickadd .section-type-external .cell {
    float: left;
    width: calc(50% - 32px);
    margin-top: 32px;
    font-size: 14px;
    line-height: 20px;
}

#actor_nav .nav-search-quickadd .section-type-external .cell:first-child {
    margin-right: 64px;
}

#actor_nav .nav-search-quickadd .section-type-external h3 {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
}

#actor_nav .nav-search-quickadd .section-type-external .substance-image, 
#actor_nav .nav-search-quickadd .section-type-external .external-sample {
    margin-top: 32px;
}

#actor_nav .nav-search-quickadd .section-type-external .external-sample pre {
    color: #525F6B;
    font-weight: bold;
    padding: 16px;
    border: 1px solid #dfdfe0;
}

#actor_nav .nav-search-quickadd .section-upload .external-sample {
    padding-left: 40px;
    min-height: 40px;
    position: relative;
}

#actor_nav .nav-search-quickadd .section-upload .external-sample:before {
    content: "XLS";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    font-size: 8px;
    font-weight: 400;
    line-height: 40px;
    text-indent: 5px;
    background: transparent url("./img/icon/iconsprite_doc_medium.svg") -8px top no-repeat;
}

#actor_nav .nav-search-quickadd .section-upload .external-sample .link-action {
    display: block;
}

/* Copy/Paste Upload */
#actor_nav .nav-search-quickadd .section-copypaste .copypaste-control .field-entry {
    text-align: right;
}

#actor_nav .nav-search-quickadd .section-copypaste textarea {
    height: 20em;
}

#actor_nav .nav-search-quickadd .section-copypaste .primary-action {
    margin-top: 16px;
}

/* Upload confirmation */
#actor_nav .nav-search-quickadd .section-type-external .control-confirmation {
    display: none;
    text-align: right;
}

#actor_nav .nav-search-quickadd .section-type-external .control-has-data .control-confirmation {
    display: block;
}

#actor_nav .nav-search-quickadd .section-type-external .control-has-data .field-entry {
    display: none;
}

#actor_nav .nav-search-quickadd .section-type-external .control-confirmation .substance-message {
    margin-bottom: 16px;
    text-align: left;
}

#actor_nav .nav-search-quickadd .section-type-external .control-confirmation .primary-action {
    margin-left: 16px;
    margin-top: 16px;
    vertical-align: top;
}


/* !-------------------------------------------- */
/* !ACTOR: Page Tools */
/* !-------------------------------------------- */

#actor_pagetools:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Sharing tools */
#actor_pagetools .pagetools-share {
    float: left;
    width: 50%;
}

#actor_pagetools .pagetools-share .cell {
    display: inline-block;
    margin-right: 10px;
}

#actor_pagetools .pagetools-share .flyout-host {
    top: auto;
    bottom: 100%;
    left: 0;
    width: 360px;
}

#actor_pagetools .pagetools-share .substance-flyout:before {
    top: -12px;
}

/* --- Social media links */
#actor_pagetools .pagetools-follow {
    float: right;
    width: 50%;
    text-align: right;
}

#actor_pagetools .pagetools-follow .follow-title,
#actor_pagetools .pagetools-follow .follow-list,
#actor_pagetools .pagetools-follow .cell {
    display: inline-block;
    vertical-align: top;
}

#actor_pagetools .pagetools-follow .follow-title {
    width: auto;
    font-weight: bolder;
    line-height: 40px;
}

#actor_pagetools .pagetools-follow .cell {
    margin-left: 10px;
}


/* !-------------------------------------------- */
/* !ACTOR: Page Links */
/* !-------------------------------------------- */

#actor_pagelinks {
    border-top: 1px solid #dfdfe0;
    font-size: 12px;
    font-weight: bolder;
    padding-top: 15px;
    margin: 15px 0 15px 0;
}

#actor_pagelinks:after {
    content: "";
    display: table;
    clear: both;
}

#actor_pagelinks .pagelinks-owner, 
#actor_pagelinks .pagelinks-nav .cell {
    float: left;
    margin-right: 15px;
}

#actor_pagelinks .pagelinks-owner {
    font-weight: bolder; 
    margin-left: 15px;
}

#actor_pagelinks .pagelinks-nav .nav-pagetop {
    float: right;
}

/* !-------------------------------------------- */
/* !ACTOR: Blocking overlay due to long reponse times */
/* !-------------------------------------------- */

#actor_latency {
    background: transparent url("./img/animations/waiting.gif") center top no-repeat;
    padding-top: 270px;
    font-weight: 200;
    font-size: 24px;
    text-align: center;
}

/* !-------------------------------------------- */
/* !ACTOR: Modal dialog with state warning */
/* !Expressions: ok, warn, state */
/* !-------------------------------------------- */

#actor_modal_state {
    background: #fff;
    padding: 64px 30px 16px 30px;
    text-align: center;
}

/* --- State symbol */
#actor_modal_state:before {
    content: "";
    display: block;
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -32px;
    height: 68px;
    width: 68px;
    background: transparent center no-repeat;
    background-size: 100%;
}

#actor_modal_state.expression-ok:before {
    background-image: url("./img/icon/icon_state_ok.svg");
}
#actor_modal_state.expression-warn:before {
    background-image: url("./img/icon/icon_state_warn.svg");
}
#actor_modal_state.expression-crisis:before {
    background-image: url("./img/icon/icon_state_crisis.svg");
}

/* --- Headline and message */
#actor_modal_state h2 {
    font-weight: 200;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 24px;
}

#actor_modal_state .modal-message {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 24px;
}

/* --- Optional: Image and input field */
#actor_modal_state .substance-image {
    margin-bottom: 24px;
}

#actor_modal_state .field-entry {
    margin-bottom: 24px;
}

/* --- Buttons */
#actor_modal_state .primary-action {
    display: block;
    width: 100%;
}

#actor_modal_state .primary-action + .primary-action {
    margin-top: 16px;
}

/* !-------------------------------------------- */
/* !ACTOR: Product quick overview in overlay */
/* !-------------------------------------------- */

/* --- General containers */
#actor_productpeek {
    background: #fff;
}

#actor_productpeek > .data-action.icon-close {
    position: absolute;
    right: 0;
    top: 0;
}

#actor_productpeek .productpeek-head {
    padding: 0 32px 0 32px;
}

#actor_productpeek .productpeek-info {
    padding: 0 32px 0 32px;
    margin-top: 32px;
    margin-bottom: 64px;
    min-height: calc(70vh - 388px);
    max-height: calc(100vh - 388px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#actor_productpeek .info-details {
    width: 730px;
    padding-right: 60px;
    display: table-cell;
    vertical-align: top;
}

#actor_productpeek .info-price {
    width: 340px;
    display: table-cell;
    vertical-align: top;
}

#actor_productpeek > .link-action {
    font-size: 16px;
    line-height: 20px;
    position: absolute;
    right: 32px;
    bottom: 32px;
}

/* --- Product header */
#actor_productpeek h1 {
    font-weight: 200;
    font-size: 28px;
    color: #005691;
    padding: 32px 32px 0 32px;
}

#actor_productpeek .productpeek-head .head-ids {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 32px;
}

#actor_productpeek .productpeek-head .head-ids > * {
    display: inline-block;
}

#actor_productpeek .productpeek-head .head-ids .product-id:after {
    content: " | ";
    display: inline-block;
    padding: 0 0.5em 0 0.5em;
    color: #D4D7DA;
}

#actor_productpeek .productpeek-head .product-brand {
    color: #005691;
}

#actor_productpeek .productpeek-head .product-highlight > * {
    display: inline-block;
    padding-right: 8px;
}

#actor_productpeek .productpeek-head .product-highlight > *:not(:first-child) {
    text-transform: none;
}

/* --- Product image and description */
#actor_productpeek .info-details .product-image {
    width: 340px;
    float: left;
    margin-bottom: 16px;
}

#actor_productpeek .info-details .product-descript {
    width: 310px;
    float: right;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 64px;
}

/* --- Product pricing */
#actor_productpeek .info-price .pricelist-total {
    margin: 16px 0 16px 0;
    padding-top: 16px;
    border-top: 2px solid #dfdfe0;
}

#actor_productpeek .info-price .product-availability {
    font-size: 12px;
    line-height: 16px;
    margin-top: 16px;
}

#actor_productpeek .info-price .availability-stock {
    float: left;
    display: inline-block;
}

#actor_productpeek .info-price .availability-delivery {
    float: right;
    display: inline-block;
}

#actor_productpeek .info-price .availability-express {
    margin-top: 32px;
    clear: both;
    border: 1px solid #dfdfe0;
    text-align: center;
    padding: 4px 16px 4px 16px;
}

#actor_productpeek .info-price .availability-express:before {
    display: none;
}

/* !-------------------------------------------- */
/* !ACTOR: Promotion quick overview in overlay */
/* !-------------------------------------------- */

/* --- General containers */
#actor_promopeek {
    background: #fff;
}

#actor_promopeek > .data-action.icon-close {
    position: absolute;
    right: 0;
    top: 0;
}

#actor_promopeek h1 {
    font-weight: 200;
    font-size: 28px;
    padding: 32px 32px 0 32px;
}

#actor_promopeek > .link-action {
    font-size: 16px;
    line-height: 20px;
    position: absolute;
    right: 32px;
    bottom: 32px;
}

/* --- Promotion/scrolling-container */
#actor_promopeek .substance-promo-entry {
    padding: 0 32px 0 32px;
    margin-top: 32px;
    margin-bottom: 72px;
    max-height: calc(100vh - 308px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#actor_promopeek .substance-promo-entry .promo-product, 
#actor_promopeek .substance-promo-entry .promo-conditions {
    margin-bottom: 0;
}

/* !-------------------------------------------- */
/* !ACTOR: Overlay after product purchase */
/* !-------------------------------------------- */

#actor_purchase {
    background: #fff;
}

#actor_purchase .scroll-container {
    max-height: calc(100vh - 194px);
    overflow: auto;
    overflow-x: hidden; /* Cut off overshooting of .substance-carousel w/o limiting its embedded flyouts's height */
    padding: 32px 32px 32px 32px;
    -webkit-overflow-scrolling: touch;
}

#actor_purchase .purchase-summary {
    margin-bottom: 64px;
}

#actor_purchase > .icon-close {
    position: absolute;
    right: 0;
    top: 0;
}

/* --- Summary of purchase effect */
#actor_purchase .summary-head {
    padding-bottom: 16px;
    border-bottom: 1px solid #dfdfe0;
}

#actor_purchase .summary-head h2 {
    font-weight: 200;
    font-size: 28px;
    line-height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 32px;
}

#actor_purchase .summary-head .summary-cart {
    display: inline-block;
    margin-right: 32px;
}

#actor_purchase .summary-head .summary-cart {
    border: 1px solid #dfdfe0;
}

#actor_purchase .summary-head .substance-pricelist {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

#actor_purchase .summary-head .substance-pricelist .price-name {
    display: block;
    font-size: 14px;
    line-height: 20px;
}

#actor_purchase .summary-head .substance-pricelist .price-value {
    display: block;
    font-size: 20px;
}


/* --- List of products to be added to cart */
#actor_purchase .substance-table {
    width: 100%;
}

#actor_purchase .substance-table th, 
#actor_purchase .substance-table td {
    padding: 32px 64px 16px 0;
}

#actor_purchase .substance-table th:last-child, 
#actor_purchase .substance-table td:last-child {
    padding-right: 0;
}

#actor_purchase .substance-table td:first-child {
    padding-right: 8px;
}

#actor_purchase .substance-table .substance-image {
    width: 100px;
}

#actor_purchase .substance-table .product-title {
    font-size: 16px;
    line-height: 20px;
}

#actor_purchase .substance-table .substance-pricelist {
    text-align: left;
}


/* --- Action buttons */
#actor_purchase .summary-action {
    text-align: right;
    margin-top: 32px;
}

#actor_purchase .summary-action .primary-action {
    margin-left: 16px;
    vertical-align: top;
}


/* --- Carousel of recommended products, matching the new cart entries */
#actor_purchase .purchase-recommended {
    overflow: visible;
}

#actor_purchase .purchase-recommended .carousel-head {
    font-weight: 200;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 16px;
}

#actor_purchase .purchase-recommended .product-image:before {
    padding-top: 36%;
}

#actor_purchase .purchase-recommended .cell-product .flyout-host {
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 8px;
}

/* !-------------------------------------------- */
/* !ACTOR: Overlay for material list (from Promotions) */
/* !-------------------------------------------- */

#actor_material_list {
    background: #fff;
}

#actor_material_list > .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_material_list .promo-title {
    font-size: 24px;
    font-weight: 200;
    line-height: 28px;
    margin-bottom: 32px;
    padding: 32px 32px 0 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#actor_material_list .scroll-container {
    max-height: calc(100vh - 252px);
    padding: 0 32px 0 32px;
    margin-bottom: 32px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- List header with promotion description */
#actor_material_list .list-header p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 16px;
}

#actor_material_list .list-header .promo-data {
    font-size: 28px;
    font-weight: 200;
    line-height: 32px;
    margin-bottom: 0;
}

#actor_material_list .list-header .promo-data + .promo-data {
    margin-bottom: 32px;
}

#actor_material_list .list-header .header-download {
    margin-bottom: 32px;
}

#actor_material_list .list-header .list-search {
    width: 250px;
    margin-bottom: 16px;
}

/* --- Control bar */
#actor_material_list .list-content .content-tools {
    font-size: 14px;
    line-height: 18px;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #dfdfe0;
    display: table;
    width: 100%;
}

#actor_material_list .list-content .content-tools > * {
    display: table-cell;
    vertical-align: middle;
}

#actor_material_list .list-content .content-tools .tools-title {
    width: 99%;
}

#actor_material_list .list-content .content-tools .tools-counter {
    padding: 0 16px 0 16px;
    white-space: nowrap;
    text-align: right;
}

/* --- Table with material list */
#actor_material_list .list-content .substance-table {
    table-layout: auto;
}

#actor_material_list .list-content .substance-table th {
    padding: 16px;
}

#actor_material_list .list-content .substance-table td {
    vertical-align: middle;
    padding: 8px 16px 8px 16px;
}

#actor_material_list .list-content .substance-table td:nth-child(2n) {
    color: #005691
}

/* !-------------------------------------------- */
/* !ACTOR: Filter (used by Promotions and News pages) */
/* Expressions: (default), admin */
/* !-------------------------------------------- */

#actor_filter h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 22px;
    margin-left: 16px;
    padding-right: 40px;
    background: transparent url("./img/icon/iconsprite_tool_info.svg") right -10px no-repeat;
    display: inline-block;
}

/* --- Collapsible filter groups */
#actor_filter .filter-group {
    position: relative;
}

/* Filter group expander/collapser */
#actor_filter .filter-group .data-action.icon-expand {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: #000;
    padding: 16px;
    border-bottom: 1px solid #dfdfe0;
    margin-bottom: 16px;
}

#actor_filter .filter-group .data-action.icon-expand:before {
    background-image: url("./img/icon/icon_util_dropdown_black.svg");
    right: 12px;
    left: auto;
    top: 50%;
    margin-top: -6px;
}

#actor_filter .filter-group .data-action.icon-expand:hover {
    color: #005691;
}

#actor_filter .filter-group .data-action.icon-expand:hover:before {
    background-image: url("./img/icon/icon_util_dropdown_blue.svg");
}

/* Admin mode with create button */
#actor_filter.expression-admin .filter-admin .data-action.icon-expand:before {
    right: 44px;
}

#actor_filter .filter-admin .data-action.icon-add {
    display: none;
}

#actor_filter.expression-admin .filter-admin .data-action.icon-add {
    display: block;
    position: absolute;
    top: 13px;
    right: 0;
}

/* List of filters in this group */
#actor_filter .filter-group > .substance-fieldlist {
    border-bottom: 1px solid #dfdfe0;
    display: none;
}

#actor_filter .filter-group.item-active > .substance-fieldlist {
    display: block;
}

/* --- Filter entries */
/* Selectors have to be very specific to avoid inheritance into flyout form content */
#actor_filter .filter-group > .substance-fieldlist > .field-entry {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    margin: 16px 36px 16px 16px;
}

#actor_filter .filter-group > .substance-fieldlist > .field-entry input[type="checkbox"], 
#actor_filter .filter-group > .substance-fieldlist > .field-entry input[type="radio"] {
    position: absolute;
    top: 0;
    right: -32px;
}

/* Admin mode with hidden entries */
#actor_filter .filter-admin .field-entry.admin-private {
    display: none;
}

#actor_filter.expression-admin .filter-admin .field-entry.admin-private {
    display: block;
}

#actor_filter.expression-admin .filter-admin .field-entry.admin-private > .field-container > label {
    color: #7D8790;
}

/* Admin mode with edit button */
#actor_filter.expression-admin .filter-admin .field-entry.entry-admin {
    padding-right: 32px;
}

#actor_filter .filter-group .field-entry .icon-edit {
    display: none;
}

#actor_filter.expression-admin .filter-admin .field-entry.entry-admin .icon-edit {
    display: block;
    position: absolute;
    top: -4px;
    right: -34px;
}

/* Flyout with campaign tools */
#actor_filter.expression-admin .filter-admin .field-entry.entry-admin.flyout-active:before {
    right: -52px;
    top: 12px;
}

#actor_filter.expression-admin .filter-admin .field-entry.entry-admin > .flyout-host {
    left: calc(100% + 42px);
    width: 884px;
    -webkit-transform: none;
            transform: none;
    top: -120px;
}

/* --- RSS subscribe button (only for some instances) */
#actor_filter > .data-action.icon-rss {
    font-size: 14px;
    line-height: 20px;
    margin-top: 32px;
}

/* !-------------------------------------------- */
/* !ACTOR: Overlay for password recovery */
/* !-------------------------------------------- */

#actor_password_recovery {
    background: #fff;
}

#actor_password_recovery .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_password_recovery h2 {
    font-weight: 200;
    font-size: 28px;
    line-height: 32px;
    padding: 32px;
}

/* This actor can occur in a <framed> version of the login page */
/* In this situation, the vh unit is not reliable and needs an override */
#actor_password_recovery .scroll-container {
    padding: 0 32px 32px 32px;
    max-height: calc(100vh - 258px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Intro & headlines */
#actor_password_recovery .recovery-intro {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 32px;
}

#actor_password_recovery .recovery-intro .substance-message {
    margin: 32px 0 32px 0;
}

#actor_password_recovery legend {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
}

/* --- Form fields */
#actor_password_recovery .substance-fieldlist:after {
    content: "";
    display: table;
    clear: both;
}

#actor_password_recovery .field-entry {
    width: calc(50% - 16px);
    float: left;
    margin-bottom: 32px;
    margin-right: 16px;
}

#actor_password_recovery .field-entry:nth-child(2n) {
    margin-right: 0;
    margin-left: 16px;
}

#actor_password_recovery .field-entry.entry-message {
    width: 100%;
    float: none;
    clear: both;
    margin-right: 0;
    margin-left: 0;
}

#actor_password_recovery .field-entry.entry-checkbox {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

/* --- Submit button */
#actor_password_recovery .recovery-action {
    text-align: right;
}

/* !-------------------------------------------- */
/* !ACTOR: Overlay for specific inquiry */
/* !-------------------------------------------- */

#actor_inquiry {
    background: #fff;
}

#actor_inquiry .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_inquiry h2 {
    font-weight: 200;
    font-size: 28px;
    line-height: 32px;
    padding: 32px;
}

#actor_inquiry > .link-action {
    position: absolute;
    top: 43px;
    right: 32px;
}

/* This actor can occur in a <framed> version of the login page */
/* In this situation, the vh unit is not reliable and needs an override */
#actor_inquiry .scroll-container {
    padding: 0 32px 32px 32px;
    max-height: calc(100vh - 258px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Intro & headlines */
#actor_inquiry .inquiry-intro {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 32px;
    position: relative;
}

#actor_inquiry .inquiry-intro .substance-message {
    margin: 32px 0 32px 0;
}

#actor_inquiry legend {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
}

/* --- Form fields */
#actor_inquiry .substance-fieldlist:after {
    content: "";
    display: table;
    clear: both;
}

#actor_inquiry .field-entry {
    width: calc(50% - 16px);
    float: left;
    margin-bottom: 32px;
    margin-right: 16px;
}

#actor_inquiry .field-entry:nth-child(2), 
#actor_inquiry .field-entry:nth-child(n+2):nth-child(odd) {
    margin-right: 0;
    margin-left: 16px;
}

#actor_inquiry .field-entry.entry-salutation {
    float: none;
    clear: both;
    margin-right: 0;
    margin-left: 0 !important;
}

#actor_inquiry .field-entry.entry-message {
    width: 100%;
    float: none;
    clear: both;
    margin-right: 0;
    margin-left: 0;
}

#actor_inquiry .field-entry.entry-checkbox {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

/* --- Submit button */
#actor_inquiry .inquiry-action {
    text-align: right;
}

/* !-------------------------------------------- */
/* !ACTOR: Editor for QuickLinks */
/* !-------------------------------------------- */

#actor_quicklinks {
    background: #fff;
}

#actor_quicklinks > .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_quicklinks h2 {
    font-weight: 200;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 32px;
    padding: 32px 32px 0 32px;
}

#actor_quicklinks .scroll-container {
    padding: 0 32px 0 32px;
    margin-bottom: 32px;
    max-height: calc(100vh - 258px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Containers */
#actor_quicklinks .molecule {
    width: calc(50% - 16px);
    float: left;
}

#actor_quicklinks .molecule:first-child {
    margin-right: 32px;
}

#actor_quicklinks .cell:after {
    content: "";
    display: table;
    clear: left;
}

/* --- Intro text */
#actor_quicklinks .cell h3 {
    font-weight: 200;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 16px;
}

#actor_quicklinks .cell p {
    font-size: 14px;
    line-height: 20px;
}

/* --- Quicklink lists */
#actor_quicklinks .cell .link-list {
    margin-top: 32px;
    border-top: 1px solid #dfdfe0;
    padding-top: 32px;
}

#actor_quicklinks .atom {
    display: inline-block;
    margin: 0 8px 8px 0;
}

/* !-------------------------------------------- */
/* !ACTOR: Email notification T & C */
/* !-------------------------------------------- */

#actor_notif_condition {
    background: #fff;
}

#actor_notif_condition > .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_notif_condition h2 {
    font-weight: 200;
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 32px;
    padding: 32px 32px 0 32px;
}

#actor_notif_condition .scroll-container {
    padding: 0 32px 0 32px;
    margin-bottom: 32px;
    max-height: calc(100vh - 258px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#actor_notif_condition .condition-action .toolchain-link {
    margin-left: 48px;
}

#actor_notif_condition .condition-action .field-entry input {
    margin-top: 8px;
}

/* !-------------------------------------------- */
/* !ACTOR: Videoplayer */
/* !-------------------------------------------- */

#actor_video {
    background: #fff;
}

#actor_video > .data-action.icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

#actor_video .video-plugin {
    padding: 32px;
}

/* !-------------------------------------------- */
/* !ACTOR: Controlbar for Lists (used by Promotions and News) */
/* !-------------------------------------------- */

/* --- Headline */
#actor_listcontrol .listcontrol-title {
    position: relative;
}

#actor_listcontrol .listcontrol-title h1 {
    font-weight: 200;
    font-size: 36px;
    line-height: 40px;
}

/* Crosslink to campaign page */
#actor_listcontrol .listcontrol-title .primary-action {
    margin: 0;
    position: absolute;
    top: 0;
    right: 15px;
}

/* --- Results counter and sorting */
#actor_listcontrol .result-overview {
    background: #EFEFF0;
    font-size: 16px;
    line-height: 20px;
}

#actor_listcontrol .result-overview:after {
    content: "";
    display: table;
    clear: both;
}

#actor_listcontrol .result-overview .cell {
    padding: 16px 56px 16px 0;
    float: left;
}

#actor_listcontrol .result-overview .list-filter-count {
    padding-left: 40px;
    background: transparent url("./img/icon/iconsprite_tool_filter.svg") left 5px no-repeat;
}

/* Sort controller */
#actor_listcontrol .result-overview .cell.field-entry {
    padding: 8px 0 0 0;
    float: right;
}

#actor_listcontrol .result-overview .cell.field-entry:after {
    top: 22px;
}

#actor_listcontrol .result-overview .cell.field-entry select {
    background: transparent;
}

/* --- Filters and actions */
#actor_listcontrol .listcontrol-filters .filter-list {
    float: left;
    max-width: 860px; /* This is a guess: The adjacent .action could be wider and then we might get an overlap */
}

#actor_listcontrol .listcontrol-filters .cell {
    font-size: 14px;
    line-height: 20px;
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}

#actor_listcontrol .listcontrol-filters .data-action, 
#actor_listcontrol .listcontrol-filters .primary-action {
    font-size: 14px;
    line-height: 20px;
    float: right;
}

/* !-------------------------------------------- */
/* !ACTOR: Subnavigation with Admin mode */
/* Expressions: (default), admin */
/* !-------------------------------------------- */

/* --- Headlines */
#actor_sub_nav h3 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 32px;
    padding-left: 12px;
}

#actor_sub_nav h4 {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    padding: 40px 0 16px 12px;
    border-bottom: 1px solid #dfdfe0;
    margin-bottom: 16px;
    position: relative;
}

/* --- Special button for PE4 Global controls */
#actor_sub_nav .nav-admin > .data-action {
    display: none;
    font-size: 14px;
    line-height: 24px;
    margin-top: -24px;
    margin-bottom: 32px;
}

#actor_sub_nav.expression-admin .nav-admin .data-action {
    display: block;
}

/* Repositioning the flyout here because it can be very tall */
#actor_sub_nav.expression-admin .substance-pe-globaltools {
    top: -60px;
    -webkit-transform: none;
            transform: none;
}

/* --- Menu entries */
#actor_sub_nav .nav-group .cell {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 16px;
    padding-left: 12px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#actor_sub_nav .nav-group.group-major .cell {
    font-size: 16px;
}

#actor_sub_nav .nav-group.group-major .subgroup-end {
    padding-bottom: 32px;
}

/* Nested link lists */
#actor_sub_nav .nav-group.group-nested {
    display: none;
}

#actor_sub_nav .menu-action.icon-expand.item-active ~ .nav-group.group-nested {
    display: block;
}

#actor_sub_nav:not(.expression-admin) .menu-action.icon-expand.item-active ~ .nav-group.group-nested {
    margin-left: 22px; /* offset the padding-left */
}

#actor_sub_nav .nav-group.group-nested .atom {
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 12px;
    padding-left: 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Adjust position of flyout arrow because expandable container can become quite tall */
#actor_sub_nav .nav-group .flyout-active:before, 
#actor_sub_nav .nav-group .flyout-active:before {
    top: 10px;
}

/* Admin mode: Make room for additional controls */
#actor_sub_nav.expression-admin .nav-group:not(.group-major) .cell, 
#actor_sub_nav.expression-admin h4.substance-flyout {
    padding-right: 40px;
    padding-left: 20px;
}

#actor_sub_nav.expression-admin .nav-group.group-nested .atom {
    padding-right: 40px;
    padding-left: 20px;
    margin-right: -40px;
}

/* Drag & Drop handle */
#actor_sub_nav .nav-group .nav-draghandle, 
#actor_sub_nav h4 .nav-draghandle {
    display: none;
    position: absolute;
    left: 0;
    top: 2px;
    height: 40px;
    width: 16px;
    background: transparent url("./img/icon/iconsprite_util_sort.svg") right 0 no-repeat;
    cursor: move;
}

#actor_sub_nav h4 .nav-draghandle {
    top: 42px;
}

#actor_sub_nav.expression-admin .nav-group .nav-draghandle, 
#actor_sub_nav.expression-admin h4 .nav-draghandle {
    display: block;
}

#actor_sub_nav .nav-group .nav-draghandle:hover, 
#actor_sub_nav h4 .nav-draghandle:hover {
    background-position: right -168px;
}

/* Button for flyout menu */
#actor_sub_nav .nav-group .data-action.icon-edit {
    display: none;
    position: absolute;
    right: 0;
    top: -5px;
}

#actor_sub_nav h4 .data-action.icon-edit {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
}

#actor_sub_nav.expression-admin .nav-group .data-action.icon-edit, 
#actor_sub_nav.expression-admin h4 .data-action.icon-edit {
    display: block;
}

/* Navigation link */
#actor_sub_nav .nav-group .menu-action {
    font-weight: 400;
    position: relative;
    padding-left: 22px;
    overflow: hidden;
    max-width: 100%;
}

#actor_sub_nav .nav-group .menu-action:before {
    content: "";
    display: block;
    position: absolute;
    left: 3px;
    top: 6px;
    height: 8px;
    width: 8px;
    background: #DFDFE0;
    transition: background ease 0.3s;
}

#actor_sub_nav .nav-group.group-nested .menu-action:before {
    top: 5px;
}

/* Highlight state */
#actor_sub_nav .nav-group .menu-action:hover:before, 
#actor_sub_nav .nav-group .item-active > .menu-action:before {
    background: #005691;
    transition: background ease 0.3s;
}

/* <em> is only used for PE4 global control */
#actor_sub_nav .nav-group .menu-action em {
    font-weight: 400;
    color: #7D8790;
}

/* Navigation links controlling subpages */
#actor_sub_nav .nav-group .menu-action.item-active.icon-expand {
    margin-bottom: 12px;
}

#actor_sub_nav .nav-group .menu-action.icon-expand:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -5px;
    width: 24px;
    height: 15px;
    margin-top: -7px;
    background: transparent url("./img/icon/icon_util_dropdown_black.svg") center no-repeat;
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

#actor_sub_nav .nav-group .item-active > .menu-action.icon-expand:before, 
#actor_sub_nav .nav-group .menu-action.icon-expand:hover:before {
    background-image: url("./img/icon/icon_util_dropdown_blue.svg");
}

#actor_sub_nav .nav-group .menu-action.item-active.icon-expand:before {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}