/* -------------------------------------------- */
/* Bosch Extranet Relaunch 2017 */
/* Version: 1.135 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: BIG ACTOR-INDEPENDENT RESOURCES */
/* !-------------------------------------------- */

/* !-------------------------------------------- */
/* !COMPONENT: Custom select elements */
/* !-------------------------------------------- */

/* --- Container */
.substance-customselect {
    position: relative;
}

.substance-customselect > .field-container {
    padding-top: 18px;
}

.substance-customselect.flyout-active > .field-container {
    z-index: 51; /* above .flyout-host */
}

.substance-customselect.select-unlabeled .field-container {
    padding-top: 0;
}

/* --- Trigger button */
.substance-customselect .select-action {
    font-size: 14px;
    line-height: 14px;
    padding: 0 15px 4px 15px;
    height: 40px;
    background: #fff;
    border-bottom: 1px solid #CFD0D1;
    width: 100%;
    text-align: left;
}

.substance-customselect[disabled="disabled"] .select-action {
    color: #DFDFE0;
    background-color: rgba(255,255,255,0.7);
    border-color: #EFEFF0;
}

/* Dropdown arrow */
.substance-customselect:after {
    content: "";
    display: block;
    background: transparent url("./img/icon/icon_util_dropdown_black.svg") center no-repeat;
    width: 16px;
    height: 8px;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: 4px;
    pointer-events: none; /* allows click-through */
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

.substance-customselect.select-unlabeled:after {
    margin-top: -4px;
}

.substance-customselect.flyout-active:after {
    z-index: 51; /* above .flyout-host */
    -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;
}

/* --- Optional label */
.substance-customselect label {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    color: #000;
    position: absolute;
    top: 0;
    left: 15px;
}

/* --- Flyout host */
.substance-flyout.substance-customselect .flyout-host.select-options {
    margin-top: 0;
    font-size: 12px;
    line-height: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    max-height: calc(100vh - 160px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Select options */
.substance-customselect .select-options {
    background: #fff;
    width: 100%;
    transition: background 0.3s ease;
}

.substance-customselect .select-options .option-entry {
    cursor: pointer;
    padding: 8px 15px 8px 15px;
    padding: 15px;
    border-bottom: 1px solid #CFD0D1;
}

.substance-customselect .select-options .option-entry.item-active, 
.substance-customselect .select-options .option-entry:not(.entry-utility):hover {
    background: #EFEFF0;
    transition: background 0.3s ease;
}

/* Special rules for address lists */
.substance-customselect .select-options.select-address .option-entry .address-default {
    margin-bottom: 8px;
}

.substance-customselect .select-options.select-address .option-entry .address-title {
    font-weight: bold;
}

.substance-customselect .select-options.select-address .option-entry .address-id {
    margin-top: 8px;
    color: #525F6B;
}

/* !-------------------------------------------- */
/* !COMPONENT: Date picker (based on jQuery standard component) */
/* !-------------------------------------------- */

/* --- Trigger button */
/* reincarnation of button.data-action.action-icon.icon-calendar */
.field-container .ui-datepicker-trigger {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: transparent url("./img/icon/iconsprite_tool_calendar.svg") -5px -5px no-repeat;
	width: 32px; 
	height: 32px;
	text-indent: -1000em;
	display: inline-block;
	color: #005691;
	text-align: left;
	overflow: hidden;
	transition: color ease 0.3s;
}

.field-container .ui-datepicker-trigger:hover {
    color: #000;
    background-position: -5px -85px;
	transition: color ease 0.3s;
}

/* --- jQuery Date picker: General */
#ui-datepicker-div {
    font-weight: 400;
    margin-top: 8px;
    border-color: #bfc0c2;
    background: #fff !important;
    padding: 0;
    width: 360px;
}

#ui-datepicker-div, 
#ui-datepicker-div * {
    font-family: "Bosch Sans", "Helvetica", "Arial", sans-serif;
    border-radius: 0 !important;
}

/* --- jQuery Date picker: Header with navigation */
#ui-datepicker-div .ui-datepicker-header {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #bfc0c2 !important;
    padding: 16px 8px 16px 8px !important;
}

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
    margin: 0 48px 0 48px;
}

#ui-datepicker-div .ui-datepicker-header select {
    font-family: "Bosch Sans", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 12px;
	height: 21px;
	margin: 0;
	width: calc(50% - 8px);
	color: #000;
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
	appearance: menulist;
}

#ui-datepicker-div .ui-datepicker-header select + select {
    margin-left: 16px;
}

/* Paging buttons (adapted reincarnation of .page-action.action-dir-prev/next) */
#ui-datepicker-div .ui-datepicker-header a span {
    display: none;
}

#ui-datepicker-div .ui-datepicker-header a {
    top: 50%;
    margin-top: -27px;
    background: transparent url("./img/icon/iconsprite_util_link.svg") center 14px no-repeat;
    background-size: 35%;
    overflow: hidden;
    text-indent: -1000em;
    width: 32px;
    height: 53px;
    opacity: 0.2;
    cursor: pointer;
    transition: opacity ease 0.3s;
}

#ui-datepicker-div .ui-datepicker-header a:hover {
    border: none;
    background-color: transparent;
    opacity: 1;
    transition: opacity ease 0.3s;
}

#ui-datepicker-div .ui-datepicker-header .aui-datepicker-prev-hover, 
#ui-datepicker-div .ui-datepicker-header a.ui-datepicker-prev {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    left: 0;
}

#ui-datepicker-div .ui-datepicker-header a.ui-datepicker-next-hover, 
#ui-datepicker-div .ui-datepicker-header a.ui-datepicker-next {
    right: 0;
}

/* --- jQuery Date picker: Calendar sheet */
.ui-datepicker-calendar {
    width: auto;
    margin: 16px auto 16px auto;
}

.ui-datepicker-calendar, 
.ui-datepicker-calendar * {
    background-image: none !important;
}

#ui-datepicker-div .ui-datepicker-calendar td {
    text-align: center;
    border-bottom: 4px solid transparent;
}

/* Day names */
#ui-datepicker-div .ui-datepicker-calendar thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

#ui-datepicker-div .ui-datepicker-calendar thead span {
    display: inline-block;
    width: 40px;
}

/* Standard day field */
#ui-datepicker-div .ui-datepicker-calendar td a {
    border: none !important;
    text-align: center !important;
    font-size: 12px;
    padding: 0;
    display: inline-block;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default {
    background: transparent;
    color: #000;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50% !important;
    transition: background 0.3s ease, color 0.3s ease;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default:hover {
    background: #005691;
    color: #fff;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Today */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a {
    border: 1px solid #000 !important;
}

/* Unselectable days */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable {
    opacity: 1;
    -webkit-filter: none;
            filter: none;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span {
    display: inline-block;
    border: none;
    background: #EFEFF0;
    text-align: center;
    color: #CFD0D1;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 12px;
    line-height: 40px;
    border-radius: 50% !important;
}

/* --- jQuery Date picker: Footer with buttons */
#ui-datepicker-div .ui-datepicker-buttonpane {
    border-top: none;
    background: #EFEFF0;
    padding: 16px 8px 16px 8px;
    position: relative;
}

#ui-datepicker-div .ui-datepicker-buttonpane button {
    border: none;
    background: none;
    float: none;
    margin: 0;
}

#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
    background: none;
}

/* Today selector (reincarnation of button.primary-action.action-size-small) */
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-current {
    display: table;
    border-collapse: separate;
    margin: 0 auto 0 auto;
    color: #000;
    text-decoration: none;
    border: 1px solid #CFD0D1;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 20px 0 20px;
    transition: all ease 0.3s;
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    border-color: #000;
    transition: all ease 0.3s;
}

/* Close flyout (reincarnation of button.data-action.action-icon.icon-close) */
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    text-indent: -1000em;
    background: transparent url("./img/icon/iconsprite_tool_close.svg") left 0 no-repeat;
    transition: color ease 0.3s;
}

#ui-datepicker-div .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
    background-position: left -80px;
    transition: color ease 0.3s;
}

/* !-------------------------------------------- */
/* !COMPONENT: Custom checkbox elements */
/* !-------------------------------------------- */

.substance-customcheckbox {
    position: relative;
}

.substance-customcheckbox .checkbox-container input {
    visibility: hidden;
}

/* --- Hosting container */
.substance-customcheckbox .checkbox-container {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 0;
    display: block;
    height: 24px;
    width: 40px;
    background: #005691;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.substance-customcheckbox .checkbox-container.checkbox-state-off {
    background: #DFDFE0;
    transition: background 0.3s ease;
}

.substance-customcheckbox .checkbox-container:hover {
    background: #008ECF;
}

.substance-customcheckbox[disabled="disabled"] .checkbox-container {
    cursor: default;
    background: #EFEFF0;
}

/* --- Switch handle */
.substance-customcheckbox .checkbox-container:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
    background: #fff;
    border-radius: 50%;
    transition: right 0.3s ease;
}

.substance-customcheckbox .checkbox-container.checkbox-state-off:before {
    right: 18px;
    transition: right 0.3s ease;
}

.substance-customcheckbox .checkbox-container:active:before {
    right: 10px;
}

.substance-customcheckbox[disabled="disabled"] .checkbox-container:before {
    background: #BFC0C2;
}

/* --- Text for current state */
.substance-customcheckbox .checkbox-container .checkbox-value {
    display: block;
    position: absolute;
    right: 100%;
    text-align: right;
    margin-right: 8px;
    top: 0;
    line-height: 24px;
    color: #BFC0C2;
}

/* !-------------------------------------------- */
/* !COMPONENT: Search fields */
/* !-------------------------------------------- */

.substance-search.flyout-active input[type="text"] {
	padding-left: 40px;
}

.substance-search.flyout-active .data-action.icon-search {
	left: 4px;
    right: auto;
}

.substance-search .data-action.icon-close {
    position: absolute;
    display: none;
    bottom: 0;
    right: 0;
}

.substance-search.flyout-active .data-action.icon-close {
	display: block;
}

/* !-------------------------------------------- */
/* !COMPONENT: Box matrices */
/* !-------------------------------------------- */

/* --- Outer container */
.substance-boxmatrix + .substance-boxmatrix {
    margin-top: 32px;
}

/* --- Optional title */
.substance-boxmatrix .boxmatrix-title {
    font-weight: 200;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 32px;
}

/* --- Matrix layout */
.substance-boxmatrix .boxmatrix-list {
    font-size: 0.1px; /* trick to line up the .cells without gaps */
}

.substance-boxmatrix .boxmatrix-list .cell {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    margin: 0 30px 0 0;
}

/* All browsers except Safari have rounding issues, so we trim calc() a bit */
/* The list-size classes are overridden for #actor_service */
/* .list-size-1 gets extra-specific rules to allow nesting of additional .boxmatrix components inside its .cell */
.substance-boxmatrix .list-size-1 > .cell {
    width: 100%;
}

.substance-boxmatrix .list-size-2 .cell {
    width: calc(50% - (30px / 2) - 0.2px);
}

.substance-boxmatrix .list-size-3 .cell {
    width: calc((100% / 3) - (30px * 2) / 3 - 0.2px);
}

.substance-boxmatrix .list-size-4 .cell {
    width: calc(25% - (30px * 3) / 4 - 0.2px);
}

.substance-boxmatrix .list-size-5 .cell {
    width: calc(20% - (30px * 4) / 5 - 0.2px);
}

.substance-boxmatrix .list-size-1 > .cell, 
.substance-boxmatrix .list-size-2 .cell:nth-child(2n), 
.substance-boxmatrix .list-size-3 .cell:nth-child(3n), 
.substance-boxmatrix .list-size-4 .cell:nth-child(4n), 
.substance-boxmatrix .list-size-5 .cell:nth-child(5n) {
    margin-right: 0;
}

.substance-boxmatrix .list-size-1 > .cell + .cell, 
.substance-boxmatrix .list-size-2 .cell:nth-child(n+3), 
.substance-boxmatrix .list-size-3 .cell:nth-child(n+4), 
.substance-boxmatrix .list-size-4 .cell:nth-child(n+5), 
.substance-boxmatrix .list-size-5 .cell:nth-child(n+6) {
    margin-top: 32px;
}

/* Asymmetric matrix rows */
.substance-boxmatrix .list-size-1-2 .cell {
    width: calc((100% / 3) - (30px / 2) - 0.2px);
}

.substance-boxmatrix .list-size-1-2 .cell:nth-child(2n) {
    width: calc((100% / 3 * 2) - (30px / 2) - 0.2px);
    margin-right: 0;
}

.substance-boxmatrix .list-size-1-2 .cell:nth-child(n+3) {
    margin-top: 32px;
}

.substance-boxmatrix .list-size-2-1 .cell {
    width: calc((100% / 3 * 2) - (30px / 2) - 0.2px);
}

.substance-boxmatrix .list-size-2-1 .cell:nth-child(2n) {
    width: calc((100% / 3) - (30px / 2) - 0.2px);
    margin-right: 0;
}

.substance-boxmatrix .list-size-2-1 .cell:nth-child(n+3) {
    margin-top: 32px;
}

/* --- Content of matrix cell */
/* The :not() rules are preventing leaks into customized PE4 .cell containers */
.substance-boxmatrix .boxmatrix-list .cell:not(.substance-richtext) .substance-image, 
.substance-boxmatrix .boxmatrix-list .cell:not(.substance-richtext) .substance-video {
    width: 100%;
    margin-bottom: 32px;
}

.substance-boxmatrix .boxmatrix-list .cell:not(.substance-richtext):not(.substance-accordion) h2 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 100;
    margin-bottom: 24px;
}

.substance-boxmatrix .boxmatrix-list .cell:not(.substance-richtext) .link-action {
    font-size: 18px;
    line-height: 22px;
}

.substance-boxmatrix .boxmatrix-list .cell:not(.substance-richtext) p + .link-action {
    margin-top: 24px;
}

/* --- Show more button */
.substance-boxmatrix > .primary-action {
    display: table;
    margin: 32px auto 32px auto;
}

/* !-------------------------------------------- */
/* !COMPONENT: Image galleries */
/* Only used as a PE4 content-type, requires light wrapping in outer .substance-boxmatrix */
/* !-------------------------------------------- */

/* --- Image containers */
.substance-gallery .cell {
    position: relative;
}

.stage:not(.stage-enables-admin) .substance-gallery .cell:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* --- Delete button (only in admin mode) */
.substance-gallery .cell .data-action {
    display: none;
}

.stage-enables-admin .substance-gallery.item-active .cell .data-action {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgb(245,246,246);
    border: 10px solid rgb(245,246,246);
}

/* --- Content of image container */
.substance-boxmatrix .substance-gallery .boxmatrix-list .cell .substance-image {
    margin-bottom: 0;
}

.substance-gallery .cell p {
    text-align: center;
    margin-top: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.substance-gallery .list-size-4 .cell p {
    margin-top: 8px;
    font-size: 12px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Carousels */
/* !-------------------------------------------- */

/* --- Containers */
.substance-carousel {
    position: relative;
}

.substance-carousel.carousel-embedded {
    overflow: hidden; /* prevents horizontal scrolling */
}

.substance-carousel .carousel-head, 
.substance-carousel .carousel-nav {
    width: 1170px;
    padding: 15px 15px 0 15px;
    margin: 0 auto 0 auto;
}

.substance-carousel.carousel-embedded .carousel-head, 
.substance-carousel.carousel-embedded .carousel-nav {
    width: 100%;
}

/* Container with carousel cells */
.substance-carousel:not(.carousel-single) .carousel-list {
    width: calc(1170px + 64px);
    max-width: 100%; /* prevents overflow for narrow viewports (e.g. on iOS devices) */
    display: table;
    table-layout: fixed;
    border-spacing: 32px 0;
    position: relative;
    padding: 15px 15px 0 15px;
    margin: 0 auto 0 auto;
    max-height: 1000px;
    transition: max-height 1s ease; /* for transition from loading state */
}

.substance-carousel.carousel-embedded .carousel-list {
    width: calc(100% + 64px);
    padding: 0 16px 0 16px;
    margin-top: 32px;
}

/* --- Loading state for list container */
.substance-carousel .carousel-list.list-loading {
    background: transparent url("./img/animations/waiting_small.gif") center no-repeat;
    height: 100px;
    max-height: 100px;
    transition: max-height 1s ease;
}

.substance-carousel .carousel-list.list-loading .cell {
    display: none;
}

/* --- Headlines + optional tab bars */
.substance-carousel .carousel-head {
    font-weight: 200;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 48px;
}

.substance-carousel .carousel-head + .substance-tab-bar {
    margin-top: -16px;
}

/* --- Carousel messages */
.substance-carousel .carousel-list .carousel-message {
    display: none;
}

.substance-carousel.carousel-unavailable .carousel-list .carousel-message {
    display: block;
}

.substance-carousel.carousel-unavailable .carousel-list .cell {
    display: none;
}

/* --- Visible cells */
.substance-carousel .carousel-list .cell {
    background: #fff;
    padding: 16px;
    position: relative;
    display: table-cell;
    vertical-align: top;
    width: 25%; /* Assuming 4 cells always visible */
}

.substance-carousel.carousel-embedded .carousel-list .cell {
    width: 50%; /* For embedded versions, only 2 cells visible */
    border: 1px solid #dfdfe0;
}

.substance-carousel .carousel-list .cell-missing {
    opacity: 0.3;
}

/* --- Carousel navigation */
.substance-carousel .carousel-nav {
    text-align: center;
    transition: opacity 0.3s ease;
}

/* Dot navigation */
.substance-carousel .carousel-nav.nav-pointed {
    margin: 24px auto 0 auto;
}

.substance-carousel.carousel-single .carousel-nav.nav-pointed {
    margin-top: 0;
}

.substance-carousel .carousel-nav > * {
    display: inline-block;
}

/* Temporary and permanent hiding for slow loading or missing carousels */
.substance-carousel .carousel-list.list-loading + .carousel-nav * {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.substance-carousel.carousel-unavailable .carousel-nav {
    display: none;
}

/* Arrow buttons */
.substance-carousel .carousel-nav .nav-page {
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.substance-carousel .carousel-nav:not(.nav-pointed) .nav-page, 
.substance-carousel.carousel-single .carousel-nav .nav-page {
    margin-top: -40px;
}

.substance-carousel.carousel-embedded .carousel-nav .nav-page {
    margin-top: 0;
}

.substance-carousel .carousel-nav .nav-page:first-child {
    left: 0;
}

.substance-carousel.carousel-embedded .carousel-nav .nav-page:first-child {
    left: 0;
}

.substance-carousel .carousel-nav .nav-page:last-child {
    right: 0;
}

.substance-carousel.carousel-embedded .carousel-nav .nav-page:last-child {
    right: 0;
}

/* Smaller arrow buttons for small (desktop) viewports */
@media only screen and (max-width: 1320px) {
    .substance-carousel:not(.carousel-embedded) .carousel-nav .page-action.action-dir-prev, 
    .substance-carousel:not(.carousel-embedded) .carousel-nav .page-action.action-dir-next {
        width: 40px;
        height: 56px;
        background-position: 54% -132px;
        background-size: 20px;
    }
    
    .substance-carousel:not(.carousel-embedded) .carousel-nav .page-action.action-dir-prev:hover, 
    .substance-carousel:not(.carousel-embedded) .carousel-nav .page-action.action-dir-next:hover {
        background-position: 54% -272px;
    }
}

/* --- Optional show more button */
.substance-carousel > .primary-action {
    display: table;
    margin: 32px auto 0 auto;
}

/* !-------------------------------------------- */
/* !COMPONENT: Carousel container for products */
/* !-------------------------------------------- */

.cell-product {
    font-size: 12px;
}

.substance-carousel .carousel-list .cell-product {
    padding-bottom: 72px;
}

/* --- Promotion flag */
.cell-product.product-promotion:before {
    content: "%";
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #005691;
    color: #005691;
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
}

/* --- Product information */
/* Product image */
.cell-product .product-image {
    margin-bottom: 8px;
}

/* Product title */
.cell-product .product-title {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 16px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    -ms-word-break: break-word;
}

.cell-product:not(.adaptive-height) .product-title {
    height: 44px;
    overflow: hidden;
}

/* Container for secondary product info */
.cell-product .molecule {
    margin-bottom: 16px;
}

.cell-product.product-promotion:not(.adaptive-height) .molecule {
    height: 83px;
    overflow: hidden;
}

/* Product ids */
.cell-product .product-id {
    margin-bottom: 16px;
}

.cell-product:not(.adaptive-height) .product-id {
    height: 15px;
    overflow: hidden;
}

/* Promotions and other markers */
.cell-product:not(.adaptive-height) .highlight-wrapper {
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-product .product-highlight {
    font-size: 14px;
    line-height: 20px;
}

.cell-product.adaptive-height .product-highlight {
    margin-bottom: 2px; /* for when many banners are wrapping into several lines */
}

/* Longer text description of product or current promotion */
.cell-product .product-label {
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
    color: #008ECF;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.cell-product:not(.adaptive-height) .product-label {
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Link to promotion conditions */


/* Product availability */
.cell-product .product-highlight + .product-availability, 
.cell-product .highlight-wrapper + .product-availability {
    margin-top: 16px; /* this is a fail-safe in case the .molecule wrapper above wasn't used */
}

.cell-product:not(.adaptive-height) .product-availability {
    height: 32px;
    overflow: hidden;
}

/* Product price */
.cell-product .substance-pricelist {
    margin-top: 16px;
}

.cell-product .substance-pricelist .price-entry.entry-total {
    border-top: none;
    padding-top: 0;
}

.cell-product .substance-pricelist .price-entry.entry-total .price-name {
    font-size: 16px;
    margin-right: 0;
    display: block;
}

.cell-product .substance-pricelist .price-entry.entry-total .price-value {
    font-size: 20px;
}

/* We shouldn't limit this height because long labels might require 2 lines per entry
.cell-product:not(.adaptive-height) .substance-pricelist {
    height: 41px;
    overflow: hidden;
}
*/

/* --- Action toolbar */
.cell-product .substance-toolchain {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.cell-product .substance-toolchain .toolchain-link:first-child:last-child {
    width: 100%;
}

.cell-product .substance-toolchain .toolchain-link:first-child:last-child .tool-action {
    width: 100%;
}

/* !-------------------------------------------- */
/* !COMPONENT: Tab bars */
/* !-------------------------------------------- */

/* --- Bar container */
.substance-tab-bar {
    border-bottom: 1px solid #dfdfe0;
    font-size: 16px;
    font-weight: 400;
}

.substance-tab-bar.tab-shaded {
    background: #EFEFF0;
    border-bottom: none;
}

.substance-tab-bar .tab-list {
    width: 1170px;
    padding: 0 15px 0 15px;
    margin: 0 auto 0 auto;
}

.substance-tab-bar.tab-embedded .tab-list {
    width: 100%;
    padding: 0;
}

.substance-tab-bar .tab-list:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Single tab */
.substance-tab-bar .tab-list .tab {
    float: left;
    height: 55px;
    line-height: 55px;
    margin-right: 64px;
    border-bottom: 2px solid transparent;
}

.substance-tab-bar .tab-list .tab .menu-action {
    display: block;
    width: 100%;
    height: 100%;
    font-weight: 400;
}

.substance-tab-bar .tab-list .tab em {
    font-weight: 200;
}

.substance-tab-bar .tab-list .item-active {
    border-bottom-color: #005691;
}

.substance-tab-bar .tab-list .item-active .menu-action {
    color: #005691;
}

/* !-------------------------------------------- */
/* !COMPONENT: Progress trackers */
/* !-------------------------------------------- */

/* --- Container layout */
.substance-progress {
    counter-reset: progress;
    font-size: 14px;
    line-height: 20px;
    padding-top: 20px;
}

.substance-progress:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Single step */
.substance-progress .progress-step {
    position: relative;
    float: left;
    text-align: center;
    counter-increment: progress;
    color: #bfc0c2;
    border-top: 2px solid #bfc0c2;
    padding-top: 32px;
}

.substance-progress .progress-step.step-active {
    color: #005691;
    border-color: #005691;
}

.substance-progress.progress-steps-2 .progress-step {
    width: 50%;
}

.substance-progress.progress-steps-3 .progress-step {
    width: calc(100% / 3);
}

/* IE11 doesn't do the rounding correctly in all situations */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .substance-progress.progress-steps-3 .progress-step {
        width: calc(100% / 3 - 0.1px);
    }
}

.substance-progress.progress-steps-4 .progress-step {
    width: 25%;
}

.substance-progress .progress-step:first-child {
    text-align: left;
}

.substance-progress .progress-step:last-child {
    text-align: right;
}

/* --- Step number */
.substance-progress .progress-step:before {
    content: counter(progress);
    display: block;
    border-radius: 50%;
    background: #bfc0c2;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    position: absolute;
    left: 50%;
    top: -21px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-weight: bold;
}

.substance-progress .progress-step.step-active:before {
    background: #005691;
}

.substance-progress .progress-step:first-child:before {
    left: 0;
    margin-left: 0;
}

.substance-progress .progress-step:last-child:before {
    left: auto;
    right: 0;
    margin-left: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: Pricelists */
/* !-------------------------------------------- */

/* --- Container layout */
.substance-pricelist:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Standard, table-like display */
.substance-pricelist .price-entry:not(:last-child) {
    margin-bottom: 12px;
}

.substance-pricelist .price-entry:after {
    content: "";
    display: table;
    clear: both;
}

.substance-pricelist .price-name {
    float: left;
    clear: both;
    font-size: 14px;
    font-weight: bold;
}

/* Actual price values */
.substance-pricelist .price-value {
    float: right;
    font-size: 20px;
}

.substance-pricelist .price-value.value-positive {
    color: #78BE20;
}

.substance-pricelist .price-value .value-unit {
    font-weight: 400;
}

.substance-pricelist .price-value.value-overridden, 
.substance-pricelist .price-value.value-overridden * {
    text-decoration: line-through;
}

/* Function entries for prices */
.substance-pricelist .price-function {
    display: inline-block;
    padding: 4px 0 4px 4px;
    margin-bottom: 6px;
}

/* --- Table-like display with small fonts */
.substance-pricelist.pricelist-small .price-name {
    font-weight: 400;
    font-size: 12px;
}

.substance-pricelist.pricelist-small .price-value {
    font-weight: 700;
    font-size: 14px;
}

/* --- Fancy dashboard display */
.substance-pricelist.pricelist-dashboard .price-name {
    font-weight: 400;
    font-size: 12px;
    line-height: 32px;
}

.substance-pricelist.pricelist-dashboard .price-value {
    color: #005691;
    font-weight: 100;
    font-size: 28px;
    line-height: 32px;
}

/* --- Total price */
.substance-pricelist.pricelist-total, 
.substance-pricelist .price-entry.entry-total {
    text-align: right;
}

.substance-pricelist .price-entry.entry-total {
    border-top: 1px solid #dfdfe0;
    padding-top: 8px;
}

.substance-pricelist.pricelist-total .price-name, 
.substance-pricelist .price-entry.entry-total .price-name {
    font-weight: 100;
    font-size: 20px;
    float: none;
    display: inline-block;
    margin-right: 0.3em;
}

.substance-pricelist.pricelist-total .price-value, 
.substance-pricelist .price-entry.entry-total .price-value {
    color: #005691;
    font-size: 28px;
    font-weight: bold;
    float: none;
    display: inline-block;
}

/* --- Small, embedded pricelists */
.substance-pricelist.pricelist-embedded .price-entry:not(:last-child) {
    margin-bottom: 5px;
}

.substance-pricelist.pricelist-embedded {
    text-align: right;
}

.substance-pricelist.pricelist-embedded .price-name {
    font-weight: 400;
    font-size: 12px;
    float: none;
    display: inline-block;
    margin-right: 0.3em;
}

.substance-pricelist.pricelist-embedded .price-value {
    font-weight: 700;
    font-size: 14px;
    float: none;
    display: inline-block;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyouts */
/* !-------------------------------------------- */

/* --- Container layout & visibility */
.substance-flyout {
    position: relative;
}

/* Directly dependent flyouts */
.substance-flyout > .flyout-host {
    position: absolute;
    bottom: 0;
    display: none;
    z-index: 50;
    overflow: hidden;
}

.substance-flyout.flyout-compact .flyout-host {
    bottom: auto;
    top: 100%;
    margin-top: 8px;
    right: 0;
}

.substance-flyout.flyout-horizontal > .flyout-host {
    top: auto;
    bottom: auto;
    right: calc(100% + 20px);
    width: 362px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.substance-flyout.flyout-horizontal.horizontal-right > .flyout-host {
    right: auto;
    left: calc(100% + 20px);
}

.substance-flyout.flyout-active > .flyout-host {
    display: block;
}

/* Separately hosted flyouts (outside of initiating .substance-flyout container) */
/* These are only used within #ensemble_head */
.substance-flyout.flyout-host {
    position: absolute;
    display: none;
    z-index: 50;
}

.substance-flyout.flyout-host.flyout-active {
    display: block;
}

/* --- Triangle connector for active flyout (on the initiating container) */
.substance-flyout.flyout-active:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    bottom: -12px;
    left: 50%;
    margin-left: -8px;
    z-index: 100;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg); 
}

.substance-flyout.flyout-host.flyout-active:before, 
.substance-flyout.flyout-compact.flyout-active:before {
    display: none;
}

.substance-flyout.flyout-horizontal.flyout-active:before {
    bottom: auto;
    top: 50%;
    left: -28px;
    margin-left: 0;
    margin-top: -8px;
}

.substance-flyout.flyout-horizontal.horizontal-right.flyout-active:before {
    left: auto;
    right: -28px;
}

/* --- Flyout target container */
.flyout-host {
    text-align: left;
    background: #fff;
}

.flyout-host.host-suggest, 
.substance-flyout.flyout-compact .flyout-host.host-suggest {
    margin-top: 0;
    width: 100%;
    border: 1px solid #bfc0c2;
}

.flyout-host.host-maxi {
    padding: 32px;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

.flyout-host.host-mini {
    padding: 32px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.flyout-compact .flyout-host.host-mini {
    padding: 0;
    width: 205px;
    border: 1px solid #bfc0c2;
    box-shadow: none;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout Selector (for Cart Add, Cart Move, List Add) */
/* !-------------------------------------------- */

/* --- General selector entries */
.substance-collection-selector .selector-option:hover {
    background: #EFEFF0;
    transition: background 0.3s ease;
}

.substance-collection-selector .selector-option:last-child {
    border-top: 1px solid #dfdfe0;
}

/* --- Dummy entry for messages */
.substance-collection-selector .selector-message {
    padding: 12px 16px 12px 16px;
    font-size: 14px;
    line-height: 20px;
}

/* --- Entries only used for product lists */
.substance-collection-selector.selector-list .selector-option {
    padding: 12px 16px 12px 16px;
    transition: background 0.3s ease;
    font-size: 14px;
    line-height: 20px;
}

/* Checkbox entries */
.substance-collection-selector.selector-list .selector-option.entry-checkbox .field-container {
    padding-left: 28px;
}

.substance-collection-selector.selector-list .selector-option.entry-checkbox input {
    position: absolute;
    left: 0;
    top: 0;
}

.substance-collection-selector.selector-list .selector-option em {
    font-weight: 400;
}

.substance-collection-selector.selector-list .selector-option.item-active em {
    font-weight: bold;
    color: #7D8790;
}

/* Inline creation of new lists */
.substance-collection-selector.selector-list .option-new .list-creator {
    display: none;
}

.substance-collection-selector.selector-list .option-new.item-active .list-creator {
    display: block;
}

.substance-collection-selector.selector-list .option-new.item-active .data-action.icon-add {
    display: none;
}

.substance-collection-selector.selector-list .option-new .icon-close {
    width: 28px;
    background-position: -10px 0;
}

.substance-collection-selector.selector-list .option-new .icon-close:hover {
    background-position: -10px -80px;
}

.substance-collection-selector.selector-list .option-new .field-container {
    display: inline-block;
    width: calc(100% - 32px);
}

.substance-collection-selector.selector-list .option-new .primary-action {
    display: block;
    width: 100%;
    margin-top: 16px;
}

/* --- Entries only used for cart lists */
.substance-collection-selector.selector-cart .selector-option:not(.option-new) .data-action, 
.substance-collection-selector.selector-cart .selector-option .link-action {
    display: block;
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
}

.substance-collection-selector.selector-cart .selector-option.option-new {
    display: block;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    line-height: 20px;
}

/* --- Entries only used for campaign-selection */
.substance-collection-selector.selector-campaigns .selector-option {
    border-top: none;
}

.substance-collection-selector.selector-campaigns .selector-option .data-action {
    display: block;
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout Selector (for product suggestions) */
/* !-------------------------------------------- */

.substance-product-selector {
    font-size: 14px;
    line-height: 20px;
}

/* --- Optional: Category filters for suggestions */
.substance-product-selector .substance-fieldlist {
    border-bottom: 1px solid #dfdfe0;
    padding: 8px 0 0 0;
}

.substance-product-selector .field-entry {
    padding: 0 12px 0 12px;
    margin-bottom: 8px;
}

/* --- List of suggested products */
.substance-product-selector .cell {
    padding: 12px 12px 10px 75px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}

.substance-product-selector .cell:hover,
.substance-product-selector .cell.selected {
    background: #EFEFF0;
    transition: background 0.3s ease;
}

.substance-product-selector .substance-image {
    display: block;
    position: absolute;
    left: 12px;
    top: 14px;
    width: 51px;
    height: 40px;
}

.substance-product-selector .product-title {
    font-weight: bold;
}

.substance-product-selector .product-id {
    color: #7D8790;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout Price changer */
/* !-------------------------------------------- */

.substance-price-edit {
    font-size: 14px;
    line-height: 20px;
}

.substance-price-edit > .icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

/* --- Wrapping container used when flyout is combined with price details */
.substance-price-edit .price-edit-container {
    padding: 32px;
    background: #EFEFF0;
}

.substance-price-edit .price-edit-container:after {
    content: "";
    display: block;
    clear: both;
}

/* --- Radio buttons for price correction type */
.substance-price-edit .price-edit-type {
    margin-bottom: 16px;
}

.substance-price-edit .price-edit-type:after {
    content: "";
    display: block;
    clear: both;
}

.substance-price-edit .price-edit-type .field-container {
    float: left;
    margin-right: 16px;
}

.substance-price-edit .price-edit-type .field-container:last-child {
    margin-right: 0;
}

/* --- Input field for amount */
.substance-price-edit .price-edit-amount input {
    width: 100%;
}

.substance-price-edit .primary-action {
    margin-top: 32px;
    float: right;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout Price details */
/* !-------------------------------------------- */

/* To make flyout padding clickable, we have to kill and recreate from its children */
.substance-price-details.flyout-host {
    padding: 0;
}

.substance-price-details > .icon-close {
    position: absolute;
    top: 0;
    right: 0;
}

.substance-price-details .substance-pricelist {
    margin-bottom: 0;
    padding: 32px;
}

.substance-price-details .substance-pricelist .price-value {
    float: right;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout with page tools for Page Editor */
/* !-------------------------------------------- */

/* To make flyout padding clickable, we have to kill and recreate from its children */
.substance-pe-pagetools.flyout-host {
    padding: 0;
}

.substance-pe-pagetools a {
	font-weight: normal;
}

/* Shield menu items from leaky #actor_sub_nav rules */
.substance-pe-pagetools .menu-action {
    padding-left: 0 !important;
}

.substance-pe-pagetools .menu-action:before {
    display: none !important;
}

/* --- Action lists */
.substance-pe-pagetools .pagetools-group {
    padding: 0 32px 0 32px;
}

.substance-pe-pagetools .pagetools-group:first-child {
    padding-top: 32px;
}

.substance-pe-pagetools .pagetools-group + .pagetools-group {
    margin-top: 16px;
    border-top: 1px solid #CFD0D1;
    padding-top: 16px;
}

.substance-pe-pagetools .tool-link + .tool-link {
    margin-top: 16px;
}

/* --- Delete action */
.substance-pe-pagetools .primary-action {
    margin: 32px 32px 32px 0;
    float: right;
}


/* !-------------------------------------------- */
/* !COMPONENT: Flyout with global tools for Page Editor */
/* !-------------------------------------------- */

/* To make flyout padding clickable, we have to kill and recreate from its children */
.substance-pe-globaltools.flyout-host {
    padding: 0;
}

.substance-pe-globaltools .globaltools-group {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 32px;
    padding: 0 32px 0 32px;
}

.substance-pe-globaltools .globaltools-group:first-child {
    padding-top: 32px;
}

.substance-pe-globaltools .globaltools-group:last-child {
    padding-bottom: 32px;
    margin-bottom: 0;
}

.substance-pe-globaltools .globaltools-group.group-tree {
    border: 1px solid #CFD0D1;
    padding: 8px;
    margin: 0 32px 32px 32px;
}

.substance-pe-globaltools .globaltools-group .tool-link + .tool-link {
    margin-top: 16px;
}

.substance-pe-globaltools .globaltools-group .field-entry + .field-entry {
    margin-top: 16px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Flyout with administrations tools for campaigns */
/* !-------------------------------------------- */

/* To make flyout padding clickable, we have to kill and recreate from its children */
.substance-campaign-tools.flyout-host {
    padding: 0;
}

/* --- Header with message */
.substance-campaign-tools .campaign-tools-header {
    padding: 32px 32px 0 32px;
}

.substance-campaign-tools h4 {
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    padding-bottom: 32px;
}

.substance-campaign-tools .substance-message {
    margin-bottom: 16px;
}

/* --- Side-by-side containers  */
.substance-campaign-tools .campaign-tools-editor {
    padding: 0 32px 0 32px;
    position: relative;
}

.substance-campaign-tools .campaign-tools-editor:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgb(245,246,246);
}

.substance-campaign-tools .campaign-tools-editor:after {
    content: "";
    display: block;
    clear: both;
}

.substance-campaign-tools .campaign-tools-editor .editor-properties {
    float: left;
    width: calc(50% - 16px);
    margin-right: 16px;
}

.substance-campaign-tools .campaign-tools-editor .editor-products {
    float: left;
    width: calc(50% - 16px);
    margin-left: 16px;
}

/* --- Campaign properties  */
.substance-campaign-tools .editor-properties .field-entry {
    margin-bottom: 16px;
}

/* Start + end date */
.substance-campaign-tools .editor-properties .field-entry.entry-date {
    float: left;
    width: calc(50% - 8px);
}

.substance-campaign-tools .editor-properties .field-entry.entry-date + .field-entry.entry-date {
    margin-left: 16px;
}

/* Public/Private switch */
.substance-campaign-tools .editor-properties .field-entry.substance-customcheckbox {
    clear: left;
    padding: 0 100px 0 15px;
    margin-bottom: 32px;
}

.substance-campaign-tools .editor-properties .field-entry.substance-customcheckbox label {
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 8px;
}

.substance-campaign-tools .editor-properties .field-entry.substance-customcheckbox p {
    font-size: 14px;
    font-weight: 200;
}

.substance-campaign-tools .editor-properties .field-entry.substance-customcheckbox .checkbox-container {
    top: 28px;
    margin-top: 0;
}

/* Banner selector */
.substance-campaign-tools .editor-properties .field-entry.entry-select {
    margin-top: 32px;
}

/* Image Uploader */
.substance-campaign-tools .editor-properties .field-entry.entry-bannerfile input, 
.substance-campaign-tools .editor-properties .field-entry.entry-bannerfile label {
    pointer-events: none;
}

.substance-campaign-tools .editor-properties .field-entry.entry-bannerfile .data-action {
    width: 100%;
    background-position: calc(100% + 5px) -5px;
}

.substance-campaign-tools .editor-properties .field-entry.entry-bannerfile .data-action:hover {
    background-position: calc(100% + 5px) -85px;
}

.substance-campaign-tools .editor-properties .field-entry.substance-uploader {
    display: none;
    margin-bottom: 0;
}

.substance-campaign-tools .editor-properties .field-entry.substance-uploader.item-active {
    display: block;
}

/* --- List of included products  */
/* Copy/Paste adding */
.substance-campaign-tools .editor-products > .field-entry .primary-action, 
.substance-campaign-tools .editor-products > .field-entry .tool-action {
    float: right;
}

.substance-campaign-tools .editor-products > .field-entry:after {
    content: "";
    display: block;
    clear: both;
}

/* Single-entry adding */
.substance-campaign-tools .editor-products > .field-entry {
    margin-top: 18px;
    margin-bottom: 16px;
}

.substance-campaign-tools .editor-products > .field-entry .field-container {
    width: calc(100% - 50px);
    float: left;
}

.substance-campaign-tools .editor-products > .field-entry.substance-flyout .flyout-host {
    width: calc(100% - 50px);
    left: 0;
}

/* Actual product list */
.substance-campaign-tools .editor-products .substance-table {
    position: relative;
}

.substance-campaign-tools .editor-products .substance-table tr:first-child {
    border-top: none;
}

.substance-campaign-tools .editor-products .substance-table td {
    padding: 8px 10px 8px 10px;
}

.substance-campaign-tools .editor-products .substance-table td:last-child {
    background: none;
    width: 50px;
    padding-right: 0;
}

/* --- Action buttons  */
.substance-campaign-tools .substance-toolchain {
    padding: 0 32px 0 32px;
}

/* Only needed to avoid margins which are click-transparent and close the flyout */
.substance-campaign-tools .substance-toolchain .toolchain-link {
    padding-top: 48px;
    padding-bottom: 32px;
}

.substance-campaign-tools .substance-toolchain .toolchain-link:first-child {
    float: left;
}

.substance-campaign-tools .substance-toolchain .toolchain-link:first-child .data-action {
    vertical-align: middle;
}

/* !-------------------------------------------- */
/* !COMPONENT: EMail sender */
/* !-------------------------------------------- */

.substance-emailer {
    font-size: 14px;
    line-height: 20px;
}

.substance-emailer .icon-close {
    position: absolute;
    right: 0;
    top: 0;
}

/* --- Mode visibility */
.substance-emailer .emailer-sender {
    display: block;
}

.substance-emailer .emailer-receipt {
    display: none;
    text-align: center;
}

.substance-emailer.emailer-done .emailer-sender {
    display: none;
}

.substance-emailer.emailer-done .emailer-receipt {
    display: block;
}

/* --- Sending form */
.substance-emailer h2 {
    font-size: 28px;
    line-height: 32px;
    font-weight: 200;
    margin-bottom: 16px;
}

.substance-emailer .field-entry {
    margin-bottom: 24px;
}

.substance-emailer .field-entry.entry-checkbox {
    margin-bottom: 32px;
}

/* --- Receipt */
.substance-emailer .emailer-receipt h2 {
    margin-bottom: 20px;
}

.substance-emailer .emailer-receipt .link-action {
    display: block;
    margin: 0 auto 24px auto;
}

/* !-------------------------------------------- */
/* !COMPONENT: Editable title <selects> for Cart and List Management */
/* !-------------------------------------------- */

/* Outmost container */
.substance-title-picker {
    position: relative;
    padding-right: 100px;
    padding-bottom: 7px;
    border-bottom: 1px solid #CFD0D1;
}

.substance-title-picker.picker-choosing, 
.substance-title-picker.picker-editing {
    border-bottom-color: transparent;
}

/* --- Static title */
.substance-title-picker .picker-current {
    background: #fff; /* block view on <select> underneath in IE11 */
    position: relative;
    z-index: 10;
    pointer-events: none; /* passes clicks through to <select>, firing a :focus event */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.substance-title-picker .picker-current:hover {
    cursor: default;
}

.substance-title-picker .picker-current > * {
    font-size: 28px;
    line-height: 32px;
    font-weight: 200;
}

/* Becomes invisible when selecting or editing happens */
.substance-title-picker.picker-choosing .picker-current, 
.substance-title-picker.picker-editing .picker-current {
    visibility: hidden;
    z-index: -1;
}

/* --- Selector for switching to different list */
.substance-title-picker .picker-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Becomes inivisble when editing happens */
.substance-title-picker.picker-editing .picker-select {
    display: none;
}

/* Select form element */
.substance-title-picker .picker-select select {
    padding-right: 100px;
}

.substance-title-picker.picker-choosing .picker-select select {
    padding-right: 35px;
}

/* --- Editor for current title of list */
.substance-title-picker .picker-editor {
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
}

/* Field container */
.substance-title-picker .picker-editor .field-container {
    display: none;
}

.substance-title-picker .picker-editor .field-container input {
    visibility: hidden;
}

.substance-title-picker.picker-editing .picker-editor .field-container {
    display: block;
}

.substance-title-picker.picker-editing .picker-editor .field-container input {
    visibility: visible;
}

/* Trigger button for editing mode */
.substance-title-picker .picker-editor .data-action {
    position: absolute;
    right: 50px;
    top: 17px;
}

.substance-title-picker.picker-choosing .picker-editor .data-action, 
.substance-title-picker.picker-editing .picker-editor .data-action {
    display: none;
}

/* Submit button for editing mode */
.substance-title-picker .picker-editor .primary-action {
    position: absolute;
    left: calc(100% + 8px);
    top: 18px;
    display: none;
}

.substance-title-picker.picker-editing .picker-editor .primary-action {
    display: block;
}

/* !-------------------------------------------- */
/* !COMPONENT: Toolchains */
/* !-------------------------------------------- */

.substance-toolchain {
    height: 40px;
    text-align: right;
    font-size: 1px;
}

.substance-toolchain:after {
    content: "";
    display: table;
    clear: both;
}

.substance-toolchain .toolchain-link {
    text-align: left;
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    line-height: 40px;
    vertical-align: top;
}

.substance-toolchain .toolchain-link:first-child {
    margin-left: 0;
}

.substance-toolchain .toolchain-link .field-container > input {
    vertical-align: top;
}

/* ---------------- */
/* --- TO DO: Remove this DIRTY HACK to hide tools which aren't used in a particular context but the component still offers them */
/* ---------------- */
.hide-list-add .tool-action.icon-list-add {
	display: none;
}


/* !-------------------------------------------- */
/* !COMPONENT: Page-centric sharing tools */
/* !-------------------------------------------- */

.substance-pageshare {
    font-size: 14px;
    line-height: 40px;
}

.substance-pageshare:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Standard circle container */
.substance-pageshare .cell {
    float: left;
    margin-left: 10px;
}

/* --- text-based video link */
.substance-pageshare .share-video .data-action {
    padding-left: 0;
    padding-right: 25px;
    background-position: right -40px;
    vertical-align: baseline;
    line-height: 20px;
}

.substance-pageshare .share-video .data-action:hover {
    background-position: right 0;
}

/* --- Used for .substance-emailer (needs padding fix to avoid click transparency) */
.substance-pageshare .flyout-host {
    top: 100%;
    bottom: auto;
    right: 0;
    width: 360px;
}

.substance-pageshare .flyout-host.substance-emailer {
    padding: 0;
}

.substance-pageshare .flyout-host.substance-emailer .emailer-sender, 
.substance-pageshare .flyout-host.substance-emailer .emailer-receipt {
    padding: 32px;
}

/* !-------------------------------------------- */
/* !COMPONENT: States of processing or availability */
/* !-------------------------------------------- */

/* Default grey color is used by .state-info */
.substance-item-state {
    display: inline-block;
    font-weight: 400;
    padding-left: 20px;
    position: relative;
    color: #525F6B;
    min-height: 20px; /* For cases where no text is provided */
}

.substance-item-state.state-prelaunch:empty {
	display: none;
}

.substance-item-state.state-ok {
    color: #78BE20;
}
.substance-item-state.state-mto, 
.substance-item-state.state-prelaunch, 
.substance-item-state.state-warn {
    color: #FCAF17;
}
.substance-item-state.state-crisis {
    color: #E20015;
}

/* --- Colored state icon */
/* Default grey color is used by .state-info */
.substance-item-state:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.7ex;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #525F6B;
}

.substance-item-state.state-ok:before {
    background-color: #78BE20;
}
.substance-item-state.state-mto:before, 
.substance-item-state.state-prelaunch:before, 
.substance-item-state.state-warn:before {
    background-color: #FCAF17;
}
.substance-item-state.state-crisis:before {
    background-color: #E20015;
}
.substance-item-state.state-info:before {
    background-color: #EFEFF0;
}

/* !-------------------------------------------- */
/* !COMPONENT: Notification entries */
/* !-------------------------------------------- */

.substance-notification {
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding-left: 30px;
    position: relative;
}

/* --- Colored state icon (assuming inheritance from .substance-state-item) */
.substance-notification:before {
    width: 14px;
    height: 14px;
    top: 4px;
    left: 0;
}

/* --- Pin icon */
.substance-notification.notification-pinned:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 20px;
    width: 20px;
    background: transparent url("./img/icon/iconsprite_tool_pin.svg") center -10px no-repeat;
}

/* --- Title of notification */
.substance-notification .notification-title {
    color: #000;
    margin-bottom: 16px;
}

.substance-notification.notification-pinned .notification-title {
    padding-right: 44px;
}

/* --- Tools */
.substance-notification .notification-tools {
    font-size: 12px;
    line-height: 20px;
    color: #525F6B;
}

.substance-notification .notification-tools .data-action {
    font-size: 14px;
    font-weight: 400;
    margin-left: 16px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Message bars */
/* !-------------------------------------------- */

/* --- Message container */
.substance-message {
    display: table;
    font-size: 14px;
    line-height: 40px;
    height: 40px; /* Basically means min-height for Firefox when message-text is empty */
    width: 100%;
    padding: 0 16px 0 16px;
    background: #EFEFF0 16px 10px no-repeat;
    background-size: 20px;
    position: relative;
    overflow: hidden;
}

.substance-message.message-dismissable {
    padding-right: 46px;
}

/* Typical states */
.substance-message.message-state-ok {
    padding-left: 46px;
    background-color: rgba(120,190,32,0.2);
    background-image: url("./img/icon/icon_state_ok.svg");
}
.substance-message.message-state-warn {
    padding-left: 46px;
    background-color: rgba(252,175,23,0.2);
    background-image: url("./img/icon/icon_state_warn.svg");
}
.substance-message.message-state-crisis {
    padding-left: 46px;
    background-color: rgba(226,0,21,0.2);
    background-image: url("./img/icon/icon_state_crisis.svg");
}

/* Special states */
.substance-message.message-state-info {
    padding-left: 46px;
    background-color: rgba(0,86,145,0.2);
    background-image: url("./img/icon/icon_state_info.svg");
}

.substance-message.message-undone {
    padding-left: 46px;
    background-image: url("./img/icon/iconsprite_tool_undo.svg");
    background-size: 40px;
    background-position: 8px 0;
}

/* --- Message text */
.substance-message .message-text {
    display: table-cell;
    font-weight: bold;
    line-height: 18px;
    padding: 11px 0 11px 0;
    vertical-align: top;
    width: 100%; /* press to the right as far as possible. A .data-action will stop extension */
}

.substance-message.message-state-info .message-text {
    color: #005691;
}
.substance-message.message-state-ok .message-text {
    color: #78BE20;
}
.substance-message.message-state-warn .message-text {
    color: #FCAF17;
}
.substance-message.message-state-crisis .message-text {
    color: #E20015;
}


/* --- Dismiss button and other actions */
.substance-message .data-action {
    display: table-cell;
    margin: 10px 0 0 16px;
    vertical-align: top;
    white-space: nowrap;
}

/* Extremely elaborate fix for IE11/Edge:
They expand the .data-action to full height (leaking the background) and disobey margins */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .substance-message .message-text:not(:last-child) {
        padding-right: 16px;
    }
    
    .substance-message .data-action {
        position: relative;
        top: 10px;
    }
    
    .substance-message .data-action:after {
        content: "";
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        background: #EFEFF0;
    }
    
    .substance-message.message-state-info .data-action:after {
        background-color: #CDDDE9;
    }
    .substance-message.message-state-ok .data-action:after {
        background-color: #E4F2D2;
    }
    .substance-message.message-state-warn .data-action:after {
        background-color: #FEEFD0;
    }
    .substance-message.message-state-crisis .data-action:after {
        background-color: #F9CDD0;
    }
}

@supports (-ms-ime-align:auto) and (color:unset) {
    .substance-message .message-text:not(:last-child) {
        padding-right: 16px;
    }
    
    .substance-message .data-action {
        position: relative;
        top: 10px;
    }
    
    .substance-message .data-action:after {
        content: "";
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        pointer-events: none;
        background: #EFEFF0;
    }
    
    .substance-message.message-state-info .data-action:after {
        background-color: #CDDDE9;
    }
    .substance-message.message-state-ok .data-action:after {
        background-color: #E4F2D2;
    }
    .substance-message.message-state-warn .data-action:after {
        background-color: #FEEFD0;
    }
    .substance-message.message-state-crisis .data-action:after {
        background-color: #F9CDD0;
    }
}

.substance-message.message-dismissable .data-action.icon-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}


/* !-------------------------------------------- */
/* !COMPONENT: Banner text */
/* !-------------------------------------------- */

/* .substance-mark is used within the Catalog application */
.substance-banner, 
.substance-mark {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    min-height: 28px;
    vertical-align: middle;
    color: #fff;
    text-transform: uppercase;
    padding: 4px 10px 4px 10px;
    background: linear-gradient(90deg, #005691, #008ECF);
}

/* Subtle banner variant */
.substance-banner.banner-light, 
.substance-mark {
    color: #000;
    background: #EFEFF0;
    text-transform: none;
}

/* Warning banner variant (NOTE: This is not part of the StyleGuide!!) */
.substance-banner.banner-warn {
    background: rgba(252,175,23,0.2);
    background: #FCAF17;
    color: #FCAF17;
    color: #fff;
    font-weight: 600;
}

/* Colorful banner variants */
.substance-banner.banner-strong {
    background: linear-gradient(90deg, #B90276, #50237F);
    background-image: linear-gradient(90deg, #005691, #008ECF);
    font-weight: bold;
}

.substance-banner.banner-strong.strong-2 {
    background-image: linear-gradient(90deg, #00A8B0, #78BE20);
}

.substance-banner.banner-strong.strong-3 {
    background-image: linear-gradient(90deg, #E20015, #B90276);
}


/* Outline banner variant */
.substance-banner.banner-inverse {
    color: #005691;
    background: none;
    border: 1px solid #47AADA;
    text-transform: none;
    line-height: 18px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Uploader with Drag & Drop */
/* !-------------------------------------------- */

/* --- Container with Drag & Drop area */
.substance-uploader {
    text-align: center;
    background: #EFEFF0;
    padding: 16px;
    border: 2px dashed #BFC0C2;
    border-radius: 12px;
    min-height: 30px;
    position: relative;
}

/* --- Helper text */
.substance-uploader p {
    margin: 18px 0 18px 0;
    color: #BFC0C2;
}

/* --- Optional label in a form context */
.substance-uploader.field-entry:not(.entry-unlabeled) {
    margin-top: 24px;
}

.substance-uploader.field-entry:not(.entry-unlabeled) label {
    position: absolute;
    top: -24px;
    left: 15px;
    font-size: 10px;
    font-weight: bold;
}

/* !-------------------------------------------- */
/* !COMPONENT: Video player */
/* !-------------------------------------------- */

/* --- Container */
.substance-video {
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Standard container aspect ratio: 16:9 */
.substance-video:not(.video-inline):before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

/* Still image (has to be landscape) */
.substance-video img {
    position: absolute;
    left: 0;
    height: auto;
    width: 100%;
    top: 50%;
    z-index: 5;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* --- Play button */
.substance-video .control-play {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}

.substance-video .control-play:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: -25px 0 0 -25px;
    background: transparent url("./img/icon/iconsprite_util_play.svg") center -200px no-repeat;
    z-index: 10;
    transition: background ease 0.3s;
}

.substance-video .control-play:hover:before {
    background-color: rgba(255,255,255,0.3);
    transition: background ease 0.3s;
}

/* !-------------------------------------------- */
/* !COMPONENT: Document download box */
/* !-------------------------------------------- */

.substance-doc {
    position: relative;
    font-size: 14px;
    line-height: 18px;
    padding-left: 64px;
    min-height: 95px; /* height of preview doc with suffix */
}

.substance-doc.doc-view-teaser {
    color: #fff;
}

.substance-doc.doc-view-main {
    line-height: 20px;
    padding-left: 80px;
}

/* --- Suffix symbol or document preview */
.substance-doc .doc-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 75px;
    padding-top: 31px;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    color: #005691;
    background: transparent url("./img/icon/iconsprite_doc_large.svg") -19px -177px no-repeat;
}

.substance-doc.doc-view-teaser .doc-type {
    color: #fff;
}

.substance-doc.doc-view-teaser .doc-type {
    background-position: -19px -354px;
}

/* Documents with content preview */
.substance-doc .doc-type.type-preview {
    background: none;
    overflow: hidden;
    height: 95px;
    padding: 0 0 20px 0;
}

.substance-doc .doc-type.type-preview:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75px;
    border: 1px solid #005691;
}

.substance-doc.doc-view-teaser .doc-type.type-preview:before {
    border-color: #fff;
}

.substance-doc .doc-type.type-preview img {
    height: 75px;
}

.substance-doc .doc-type.type-preview span {
    font-size: 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
}

/* --- Document properties */
.substance-doc .doc-title {
    font-weight: 200;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 16px;
}

.substance-doc.doc-view-main .doc-title {
    font-size: 28px;
    line-height: 32px;
}

.substance-doc.doc-view-teaser .doc-title {
    margin-bottom: 8px;
}

.substance-doc .doc-subtitle {
    font-size: 16px;
    margin-bottom: 16px;
}

.substance-doc .doc-date {
    display: inline-block;
    margin-bottom: 16px;
}

.substance-doc .doc-date:after {
    content: " – "
}

.substance-doc .doc-size {
    display: inline-block;
    margin-right: 16px;
}

/* --- Document categories */
.substance-doc .doc-tags {
    margin-bottom: 16px;
}

.substance-doc.doc-view-main .doc-tags {
    display: inline-block;
}

.substance-doc.doc-view-teaser .doc-tags {
    display: inline-block;
    margin-bottom: 0;
}

.substance-doc .doc-tags .cell {
    display: inline-block;
}

.substance-doc .doc-tags .cell:not(:last-child):after {
    content: ", ";
    color: #000;
}

.substance-doc.doc-view-teaser .doc-tags .cell:not(:last-child):after {
    color: #fff;
}

/* --- Document description */
.substance-doc .doc-description {
    margin-bottom: 16px;
    overflow: hidden;
}

.substance-doc.doc-view-teaser .doc-description {
    display: inline;
}

.substance-doc.doc-view-teaser .doc-description:before {
    content: " – ";
}

.substance-doc.doc-view-teaser .doc-description:after {
    content: "";
    display: block;
    height: 8px;
}

/* --- Actions and Links */
.substance-doc .data-action {
    display: block;
}

.substance-doc .data-action + .data-action {
    margin-top: 16px;
}

.substance-doc.doc-view-main .data-action {
    margin-top: 0;
}

.substance-doc.doc-view-teaser .data-action.icon-download, 
.substance-doc.doc-view-main .data-action.icon-download, 
.substance-doc.doc-view-main .data-action.icon-add-download {
    display: inline-block;
    margin-right: 16px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Download lists */
/* Used as PE4 content-type, based on .substance-doc */
/* !-------------------------------------------- */

/* --- Listing containers & content */
.substance-doclist .substance-doc {
    margin-bottom: 32px;
    overflow: hidden;
}

.substance-doclist .substance-doc .doc-title {
    word-break: break-all;
    -ms-word-break: break-all;
}

.substance-doclist .substance-doc .doc-size {
    margin-bottom: 8px;
    display: block;
}

/* --- Delete button (only in administration mode) */
.substance-doclist .substance-doc .data-action.icon-delete {
    display: none;
    margin-left: 16px;
    margin-top: 0;
}

.stage-enables-admin .substance-doclist.item-active .substance-doc .data-action.icon-download {
    display: inline-block;
    width: 40px;
}

.stage-enables-admin .substance-doclist.item-active .substance-doc .data-action.icon-delete {
    display: inline-block;
}

/* --- Input field instead of doc title (only in administration mode) */
.stage-enables-admin .substance-doclist.item-active .substance-doc .doc-title {
    display: none;
}

.substance-doclist .substance-doc .field-container {
    display: none;
    margin-bottom: 16px;
}

.stage-enables-admin .substance-doclist.item-active .substance-doc .field-container {
    display: block;
}

/* !-------------------------------------------- */
/* !COMPONENT: Header for MyAccount pages */
/* !-------------------------------------------- */

.substance-account-head {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    min-height: 40px; /* Edge case: No translations available, so no text components here. Keeps .substance-pageshare clickable */
}

/* --- Page headline */
.substance-account-head h1 {
    font-weight: 200;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 16px;
    max-width: calc(100% - 182px); /* not 100% safe – only enough if .substance-pageshare doesn't contain more than 3 standard buttons */
}

.substance-account-head h1 p {
    font-weight: 200;
}

.substance-account-head h1 + h1 {
    font-size: 24px;
    line-height: 28px;
    margin-top: -8px;
}

/* --- Introduction text */
.substance-account-head .head-message {
    margin-top: 32px;
}

.substance-account-head .head-message + .head-message {
    margin-top: 16px;
}

/* --- Optional sharing tools */
.substance-account-head .substance-pageshare {
    position: absolute;
    top: 0;
    right: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: Short order lists (MyAccount and homepage) */
/* !-------------------------------------------- */

.substance-order-list {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.substance-order-list .order-link {
    width: calc(50% - 32px);
    margin-right: 32px;
    float: left;
    clear: both;
}

.substance-order-list .substance-item-state {
    width: 50%;
    float: right;
}

.substance-order-list .order-id {
    font-size: 12px;
    line-height: 18px;
    color: #525f6b;
    margin-bottom: 24px;
}

.substance-order-list .order-id:last-child {
    margin-bottom: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: Key/Value displays for MyAccount pages */
/* !-------------------------------------------- */

.substance-account-data {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.substance-account-data:after {
    content: "";
    display: table;
    clear: both;
}

/* --- Outer container */
.substance-account-data.data-view-head, 
.substance-account-data.data-view-highlight {
    padding: 32px;
}

.substance-account-data.data-view-highlight {
    background: #EFEFF0;
}

/* --- Cells */
.substance-account-data .data-cell {
    float: left;
    margin-right: 32px;
}

.substance-account-data .data-cell:last-child, 
.substance-account-data.data-set-4 .data-cell:nth-child(4n), 
.substance-account-data.data-set-3 .data-cell:nth-child(3n) {
    margin-right: 0;
}

.substance-account-data.data-set-4 .data-cell:nth-child(4n+1), 
.substance-account-data.data-set-3 .data-cell:nth-child(3n+1) {
    clear: left;
}

.substance-account-data.data-set-4 .data-cell {
    width: calc(25% - (3 * 32px / 4));
}

.substance-account-data.data-set-3 .data-cell {
    width: calc((100% / 3) - (2 * 32px / 3) - 0.1px); /* incl. correction for IE11 */
}

.substance-account-data.data-set-3 .data-cell:nth-child(n+4), 
.substance-account-data.data-set-4 .data-cell:nth-child(n+5) {
    margin-top: 32px;
}

/* --- Cell titles */
.substance-account-data .cell-title {
    font-weight: bold;
    margin-bottom: 16px;
}

.substance-account-data.data-view-head .cell-title, 
.substance-account-data.data-view-highlight .cell-title {
    margin-bottom: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: vCards */
/* !-------------------------------------------- */

/* --- vcard Image */
.substance-vcard {
    font-size: 14px;
    line-height: 18px;
    position: relative;
}

.substance-vcard.vcard-illustrated {
    padding-left: 190px;
    min-height: 160px;
}

.substance-vcard.vcard-illustrated.vcard-vertical {
    padding-left: 86px;
    min-height: 70px;
}

.substance-vcard .substance-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
}

.substance-vcard.vcard-illustrated .substance-image {
    display: block;
}

.substance-vcard.vcard-vertical .substance-image {
    width: 70px;
    height: 70px;
}

/* --- vcard Data */
.substance-vcard p {
    margin-bottom: 12px;
}

.substance-vcard .vcard-role {
    font-weight: bold;
    margin-bottom: 32px;
}

.substance-vcard .vcard-phone {
    padding-left: 40px;
    min-height: 20px;
    background: transparent url("./img/icon/iconsprite_tool_phone.svg") left -10px no-repeat;
}

.substance-vcard .vcard-mail .data-action {
    word-break: break-all;
    -ms-word-break: break-all;
}

/* !-------------------------------------------- */
/* !COMPONENT: Accordion lists (e.g. for FAQ) */
/* .accordion-linear requires a different HTML structure */
/* Inner components of .accordion-linear may be used inside .substance-richtext containers */
/* !-------------------------------------------- */

/* --- Containers */
.substance-accordion .accordion-item, 
.substance-richtext .accordion-item {
    padding: 32px 0 32px 0;
    border-bottom: 1px solid #dfdfe0;
}

.substance-accordion .accordion-item:first-child {
    padding-top: 0;
}

/* Question */
.substance-accordion .accordion-item h2, 
.substance-richtext .accordion-item .data-action {
    font-size: 28px;
    font-weight: 200;
    line-height: 32px;
    display: inline-block;
    max-width: calc(100% - 100px);
    margin-bottom: 0; /* block leaks from other substances */
}

.substance-richtext .accordion-item {
    margin-bottom: 2em;
}

/* Expander button */
.substance-accordion .accordion-action, 
.substance-richtext .accordion-item .accordion-action {
    float: right;
}

.substance-richtext .accordion-content:not(.item-active) + .accordion-item {
    margin-top: -2em;
}

/* Reply containers */
.substance-accordion .accordion-item .accordion-content {
    display: none;
    margin-top: 32px;
    font-size: 16px;
    line-height: 20px;
    padding-right: 100px;
}

.substance-accordion.accordion-linear .accordion-content, 
.substance-richtext .accordion-content {
    display: none;
    margin-top: 32px;
    margin-right: 100px;
}

.substance-accordion.accordion-linear .accordion-content:not(.substance-richtext) {
    font-size: 16px;
    line-height: 20px;
}

.substance-accordion .accordion-item.item-active .accordion-content, 
.substance-accordion.accordion-linear .accordion-content.item-active, 
.substance-richtext .accordion-content.item-active {
    display: block;
}

.substance-accordion .accordion-item .content-item + .content-item, 
.substance-accordion.accordion-linear .accordion-content + .accordion-content, 
.substance-richtext .accordion-content + .accordion-content {
    padding-top: 32px;
    border-top: 1px solid #dfdfe0;
    margin-top: 32px;
}

/* ---- Content blocks */
.substance-accordion .accordion-item .accordion-content h3 {
    color: #005691;
    font-size: 20px;
    font-weight: 200;
    line-height: 24px;
    margin-bottom: 32px;
}

.substance-accordion .accordion-item .accordion-content p, 
.substance-accordion.accordion-linear .accordion-content:not(.substance-richtext) p {
    font-weight: 200;
    margin-bottom: 12px;
}

/* Embedded photos */
.substance-accordion .accordion-item .content-item.content-illustrated:after {
    content: "";
    display: table;
    clear: both;
}

.substance-accordion .accordion-item .content-item.content-illustrated .substance-image {
    width: 260px;
    margin-right: 30px;
    float: left;
}

.substance-accordion .accordion-item .content-item.content-illustrated .content-text {
    float: left;
    width: calc(100% - 290px);
}

/* !-------------------------------------------- */
/* !COMPONENT: Promotion entry (used in #actor_promo_list and in #actor_promopeek) */
/* !-------------------------------------------- */

/* --- Container layout */
.substance-promo-entry {
    position: relative;
    border-bottom: 1px solid #dfdfe0;
    margin-bottom: 32px;
}

#actor_promopeek .substance-promo-entry, 
.substance-promo-entry.item-active, 
.substance-promo-entry.item-admin {
    padding-bottom: 0;
    border-bottom: none;
}

.substance-promo-entry .promo-defaultbox {
    position: relative;
}

.substance-promo-entry .promo-defaultbox:after {
    content: "";
    display: block;
    clear: both;
}

.substance-promo-entry .promo-product {
    width: 426px;
    padding-left: 120px;
    float: left;
    margin-right: 30px;
    margin-bottom: 32px;
}

.substance-promo-entry .promo-conditions {
    width: 390px;
    float: left;
    margin-bottom: 32px;
    font-weight: 400;
}

/* --- Expandable promotion details */
.substance-promo-entry .promo-details {
    display: none;
    clear: both;
    border: 1px solid #dfdfe0;
    border-top: none;
    position: relative;
}

.substance-promo-entry .promo-details:after {
    content: "";
    display: table;
    clear: both;
}

.substance-promo-entry.item-active .promo-details {
    display: block;
}

.substance-promo-entry.item-active .promo-defaultbox {
    border-bottom: 1px solid #dfdfe0;
}

/* PROD ONLY: Display waiting animation until .promo-details container has been loaded and placed in the DOM */
.substance-promo-entry.item-active .promo-defaultbox:only-child:after {
    background: transparent url("./img/animations/waiting_small.gif") center no-repeat;
    height: 100px;
}
/* PROD ONLY: Display waiting animation until .promo-details container has been loaded and placed in the DOM */
.substance-promo-entry.item-admin .promo-defaultbox:only-child:after {
    background: transparent url("./img/animations/waiting_small.gif") center no-repeat;
    height: 100px;
}

/* Horizontal scrolling indicator */
.substance-promo-entry .promo-details.details-solo:not(.details-multicart):before {
    content: "";
    display: block;
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Containers for orders and benefits */
.substance-promo-entry .promo-details .details-order {
    width: 390px;
    float: left;
    padding: 26px 16px 20px 16px;
}

.substance-promo-entry .promo-details .details-benefit {
    width: 454px;
    float: left;
    padding: 26px 0 20px 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.substance-promo-entry .promo-details.details-multicart .details-benefit {
    padding-right: 16px;
    overflow: visible;
}

.substance-promo-entry .promo-details .details-combined {
    padding: 26px 0 20px 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.substance-promo-entry .promo-details.details-tabbed .details-benefit {
    padding-right: 16px;
}

.substance-promo-entry .promo-details.details-tabbed .promo-section {
    display: none;
}

.substance-promo-entry .promo-details.details-tabbed .promo-section.item-active {
    display: block;
}

/* --- Expandable campaign settings */
.substance-promo-entry .promo-campaign {
    display: none;
    clear: both;
    border: 1px solid #dfdfe0;
    border-top: none;
    position: relative;
    padding: 16px;
}

.substance-promo-entry.item-admin .promo-campaign {
    display: block;
}

.substance-promo-entry.item-admin .promo-defaultbox {
    border-bottom: 1px solid #dfdfe0;
}

/* --- Promotion description */
.substance-promo-entry .promo-product .substance-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
}

.substance-promo-entry .promo-product .promo-title {
    font-size: 18px;
    line-height: 22px;
    color: #005691;
    margin-bottom: 12px;
}

.substance-promo-entry .promo-product .promo-highlight {
    margin-bottom: 16px;
}

.substance-promo-entry .promo-product .promo-data {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 8px;
}

.substance-promo-entry .promo-product > .data-action {
    font-size: 14px;
    line-height: 16px;
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* PROD ONLY: Wait until .promo-details container has been loaded and placed in the DOM */
.substance-promo-entry.item-active .promo-defaultbox:not(:only-child) .promo-product > .primary-action {
    position: absolute;
    left: 120px;
    bottom: -1px;
    border-bottom: 1px solid #fff;
}

/* Firefox weirdly mangles border-width, so we'll place it slightly higher */
@-moz-document url-prefix() {
    .substance-promo-entry.item-active .promo-defaultbox:not(:only-child) .promo-product > .primary-action {
        bottom: 0;
    }
}

/* Hide the expander button when the promotion is shown in an overlay window */
#actor_promopeek .substance-promo-entry .promo-product .primary-action {
    display: none;
}

/* Variant: 2 expander buttons */
.substance-promo-entry .promo-product .substance-toolchain {
    text-align: left;
}

.substance-promo-entry.item-active .promo-defaultbox:not(:only-child) .promo-product .substance-toolchain, 
.substance-promo-entry.item-admin .promo-defaultbox:not(:only-child) .promo-product .substance-toolchain {
    position: absolute;
    left: 120px;
    bottom: -1px;
}

.substance-promo-entry.item-active .promo-defaultbox:not(:only-child) .promo-product .substance-toolchain .link-details .primary-action {
    border-bottom: 1px solid #fff;
}

.substance-promo-entry.item-admin .promo-defaultbox:not(:only-child) .promo-product .substance-toolchain .link-campaign .primary-action {
    border-bottom: 1px solid #fff;
}

/* --- Overview of promotion conditions */
.substance-promo-entry .promo-conditions .substance-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.substance-promo-entry .promo-conditions .substance-table td:last-child {
    background: #EFEFF0;
    padding-right: 32px;
}

.substance-promo-entry .promo-conditions .substance-table tr:last-child {
    border-bottom: 1px solid #dfdfe0;
}

.substance-promo-entry .promo-conditions em {
    color: #7D8790;
    font-weight: inherit;
}

/* --- Campaign assignment */
.substance-promo-entry .promo-campaign .substance-table {
    table-layout: auto;
}

.substance-promo-entry .promo-campaign .substance-table th, 
.substance-promo-entry .promo-campaign .substance-table td {
    padding: 8px 10px 10px 10px;
}

.substance-promo-entry .promo-campaign .substance-table td:first-child {
    width: 270px;
}

.substance-promo-entry .promo-campaign .substance-flyout {
    display: inline-block;
}

.substance-promo-entry .promo-campaign .link-list .atom {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* --- Promotion details: Header */
.substance-promo-entry .promo-details .details-header {
    font-size: 14px;
    line-height: 18px;
    padding: 8px 16px 8px 26px;
    border-bottom: 1px solid #dfdfe0;
}

.substance-promo-entry .promo-details:not(.details-tabbed) .details-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.substance-promo-entry .promo-details:not(.details-tabbed) .details-header .details-title {
    font-weight: bold;
    padding-right: 16px;
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: auto;
}

.substance-promo-entry .promo-details:not(.details-tabbed) .details-header .substance-toolchain {
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: content;
    white-space: nowrap;
}

.substance-promo-entry .promo-details:not(.details-tabbed) .details-header .substance-toolchain > * {
    white-space: normal;
}

/* Tab bar for tabbed promotion details */
.substance-promo-entry .promo-details.details-tabbed .details-header {
    border-bottom: none;
    padding-top: 26px;
    padding-left: 16px;
}

.substance-promo-entry .promo-details .details-header .substance-tab-bar {
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
    margin-top: 16px;
}

.substance-promo-entry .promo-details .details-header .substance-tab-bar .tab {
    margin-right: 32px;
    height: 40px;
    line-height: 40px;
}

/* --- Promotion details/Solo: General settings */
.substance-promo-entry .promo-details .details-order > p, 
.substance-promo-entry .promo-details .details-benefit > p {
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

.substance-promo-entry .promo-details.details-solo .substance-table {
    table-layout: auto;
    margin-top: 32px;
}

/* --- Promotion details/Solo: Order requirements */
.substance-promo-entry .promo-details.details-solo .details-order th {
    padding: 8px 10px 10px 10px;
} 

.substance-promo-entry .promo-details.details-solo .details-order td {
    font-size: 14px;
    line-height: 18px;
    padding: 8px 10px 8px 10px;
    vertical-align: middle;
} 

/* --- Promotion details/Solo: Benefits */
.substance-promo-entry .promo-details.details-solo .details-benefit th:first-child, 
.substance-promo-entry .promo-details.details-solo .details-benefit td:first-child {
    border-left: 1px solid #dfdfe0;
}

.substance-promo-entry .promo-details.details-solo .details-benefit th {
    padding: 10px 16px 10px 16px;
} 

.substance-promo-entry .promo-details.details-solo.details-multicart .details-benefit th {
    padding: 8px 10px 10px 10px;
} 

.substance-promo-entry .promo-details.details-solo .details-benefit td {
    padding: 16px;
    white-space: nowrap;
    vertical-align: middle;
} 

.substance-promo-entry .promo-details.details-solo.details-multicart .details-benefit td {
    padding: 8px 10px 8px 10px;
    white-space: normal;
}

/* --- Promotion details/Solo: Combined Order & Benefits table */
.substance-promo-entry .promo-details .details-combined > p {
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

.substance-promo-entry .promo-details .details-combined th:nth-child(1), 
.substance-promo-entry .promo-details .details-combined th:nth-child(2) {
    padding: 8px 10px 10px 10px;
} 

.substance-promo-entry .promo-details .details-combined td:nth-child(1), 
.substance-promo-entry .promo-details .details-combined td:nth-child(2) {
    font-size: 14px;
    line-height: 18px;
    padding: 8px 10px 8px 10px;
    vertical-align: middle;
} 

.substance-promo-entry .promo-details .details-combined .product-title {
    min-width: 240px;
}

.substance-promo-entry .promo-details .details-combined th:nth-child(3), 
.substance-promo-entry .promo-details .details-combined td:nth-child(3) {
    border-left: 16px solid #fff;
}

.substance-promo-entry .promo-details .details-combined td:nth-child(n+3) {
    padding: 16px;
    white-space: nowrap;
    vertical-align: middle;
} 

/* --- Promotion details/Tabbed: General settings */
.substance-promo-entry .promo-details.details-tabbed .promo-section.details-order > p:first-child {
    margin-bottom: 22px;
}

/* --- Promotion details/Tabbed: Standard table with discount */
.substance-promo-entry .table-promo-bulk {
    table-layout: auto;
    margin-top: 22px;
    margin-bottom: 16px;
    line-height: 16px;
}

.substance-promo-entry .table-promo-bulk th {
    padding: 0 10px 10px 10px;
}

.substance-promo-entry .table-promo-bulk td {
    padding: 8px 10px 8px 10px;
}

/* --- Promotion details/Tabbed: Material list */
.substance-promo-entry .promo-details .section-material.details-order p:first-child + p {
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 16px;
}

.substance-promo-entry .promo-details .section-material.details-order .primary-action {
    margin-left: 10px;
}

/* --- Promotion details/Tabbed: Multiple items */
.substance-promo-entry .promo-details .section-multiple.details-order .substance-table {
    table-layout: auto;
    margin-bottom: 8px;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table tbody tr {
    border-bottom: none;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table th {
    padding: 0 10px 10px 10px;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table th:nth-child(2n) {
    padding-left: 0;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table td {
    padding: 8px 10px 8px 10px;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table td:nth-child(2n) {
    padding-left: 0;
    background: none;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table .item-active td {
    padding-bottom: 4px;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-table .field-comment {
    padding-left: 0;
}

.substance-promo-entry .promo-details .section-multiple.details-order .field-entry.has-comment .flyout-host, 
.substance-promo-entry .promo-details .section-multiple.details-order .field-entry.has-error .flyout-host {
    margin-top: -23px;
}

.substance-promo-entry .promo-details .section-multiple.details-order > .data-action {
    font-size: 14px;
    line-height: 18px;
}

.substance-promo-entry .promo-details .section-multiple.details-order .substance-toolchain {
    margin-right: 10px;
    margin-top: 26px;
}

/* --- Promotion details/Tabbed: Upload */
.substance-promo-entry .promo-details .section-upload.details-order .upload-control, 
.substance-promo-entry .promo-details .section-upload.details-order .upload-explanation {
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

.substance-promo-entry .promo-details .section-upload.details-order .upload-control h3 {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.substance-promo-entry .promo-details .section-upload.details-order .upload-control .substance-uploader {
    padding-left: 10px;
    padding-right: 10px;
}

.substance-promo-entry .promo-details .section-upload.details-order .upload-explanation h3 {
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    margin-top: 22px;
    margin-bottom: 16px;
}

.substance-promo-entry .promo-details .section-upload.details-order .upload-explanation .substance-image {
    margin-top: 22px;
}

.substance-promo-entry .promo-details .section-upload.details-order .external-sample {
    padding-left: 40px;
    min-height: 40px;
    margin-top: 22px;
    margin-bottom: 10px;
    position: relative;
}

.substance-promo-entry .promo-details .section-upload.details-order .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;
}

.substance-promo-entry .promo-details .section-upload.details-order .external-sample .link-action {
    display: block;
}

/* --- Promotion details/Tabbed: Copy/Paste */
.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-control, 
.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-explanation {
    font-size: 14px;
    line-height: 18px;
    padding-left: 10px;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-control h3 {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-control .primary-action {
    margin-top: 12px;
    float: right;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-control:after {
    content: "";
    display: block;
    clear: right;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .copypaste-explanation h3 {
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    margin-top: 26px;
    margin-bottom: 12px;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .external-sample {
    margin-top: 16px;
    margin-bottom: 10px;
}

.substance-promo-entry .promo-details .section-copypaste.details-order .external-sample pre {
    color: #525F6B;
    font-weight: bold;
    padding: 16px;
    border: 1px solid #dfdfe0;
}

/* --- Promotion details/Tabbed: Upload & Copy/Paste / Upload confirmation */
.substance-promo-entry .promo-details .section-upload .control-confirmation, 
.substance-promo-entry .promo-details .section-copypaste .control-confirmation {
    display: none;
    text-align: right;
    margin-bottom: 64px;
}

.substance-promo-entry .promo-details .section-upload.control-has-data .control-confirmation, 
.substance-promo-entry .promo-details .section-copypaste.control-has-data .control-confirmation {
    display: block;
}

.substance-promo-entry .promo-details .section-upload.control-has-data .field-entry, 
.substance-promo-entry .promo-details .section-copypaste.control-has-data .field-entry {
    display: none;
}

.substance-promo-entry .promo-details .section-upload .control-confirmation .substance-message, 
.substance-promo-entry .promo-details .section-copypaste .control-confirmation .substance-message {
    margin-bottom: 16px;
    text-align: left;
}

.substance-promo-entry .promo-details .section-upload .control-confirmation .primary-action, 
.substance-promo-entry .promo-details .section-copypaste .control-confirmation .primary-action {
    margin-left: 16px;
    margin-top: 16px;
    vertical-align: top;
}

/* !-------------------------------------------- */
/* !COMPONENT: Structured text (from Markdown sources) */
/* !-------------------------------------------- */

.substance-richtext {
    font-size: 16px;
    line-height: 24px;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Legacy for overflow-wrap, used in Edge and IE11 */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.substance-richtext.richtext-inverse {
    color: #fff;
}

.substance-richtext.richtext-flattened {
    font-size: inherit;
    line-height: inherit;
}

.substance-richtext * {
    font-weight: 200;
}

.substance-richtext.richtext-flattened * {
    font-weight: inherit;
}

/* --- Truncated, flat snippets */
/* We're assuming font/lh 14/20 here because it's currently used in all instances */

.substance-richtext.richtext-flattened.richtext-truncated {
    overflow: hidden;
    position: relative;
}

.substance-richtext.richtext-flattened.richtext-truncated:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    width: 50%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

.substance-richtext.richtext-flattened.richtext-truncated.truncate-3 {
    max-height: 60px;
}

.substance-richtext.richtext-flattened.richtext-truncated.truncate-4 {
    max-height: 80px;
}

/* --- Headlines */
.substance-richtext h1 {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 1.15em;
}

.substance-richtext h2 {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 0.66em;
}

.substance-richtext h3 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 0.75em;
}

/* h5 + h6 shouldn't be used here */
.substance-richtext h4, 
.substance-richtext h5, 
.substance-richtext h6 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 1em;
}

.substance-richtext.richtext-flattened h1, 
.substance-richtext.richtext-flattened h2, 
.substance-richtext.richtext-flattened h3, 
.substance-richtext.richtext-flattened h4, 
.substance-richtext.richtext-flattened h5, 
.substance-richtext.richtext-flattened h6 {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

/* --- Paragraphs + emphasis */
.substance-richtext p {
    margin-bottom: 2em;
}

.substance-richtext.richtext-flattened p {
    display: inline;
    margin: 0;
}

.substance-richtext em, 
.substance-richtext b, 
.substance-richtext strong {
    font-weight: 700;
}

.substance-richtext i {
    font-style: normal;
}

.substance-richtext.richtext-flattened em, 
.substance-richtext.richtext-flattened b, 
.substance-richtext.richtext-flattened i, 
.substance-richtext.richtext-flattened strong {
    font-weight: inherit;
    text-decoration: none;
}

.substance-richtext del {
    font-weight: inherit;
}

.substance-richtext.richtext-flattened del {
    text-decoration: none;
}

/* --- Embedded links */
.substance-richtext a {
    font-weight: 400;
}

.substance-richtext a:not([class]) {
    color: #005691;
    transition: color ease 0.3s;
}

.substance-richtext .shoutbox a:not([class]), 
.substance-richtext.richtext-inverse a:not([class]) {
    color: #fff;
    text-decoration: underline;
    transition: opacity ease 0.3s;
}

.substance-richtext a:not([class]):hover {
    color: #000;
    transition: color ease 0.3s;
}

.substance-richtext .shoutbox a:not([class]):hover, 
.substance-richtext.richtext-inverse a:not([class]):hover {
    color: #fff;
    opacity: 0.75;
    transition: opacity ease 0.3s;
}

.substance-richtext.richtext-flattened a, 
.substance-richtext.richtext-flattened a:hover {
    font-weight: inherit;
    color: inherit;
    display: inline;
    cursor: default;
    opacity: 1;
    text-decoration: none;
}

/* --- Bullet lists */
.substance-richtext ul, 
.substance-richtext ol {
    margin-bottom: 2em;
}

.substance-richtext ol {
    counter-reset: li;
}

.substance-richtext.richtext-flattened ul, 
.substance-richtext.richtext-flattened ol {
    display: inline;
    margin: 0;
}

.substance-richtext li {
    padding-left: 32px;
    position: relative;
    margin-bottom: 1em;
}

.substance-richtext li:last-child {
    margin-bottom: 0;
}

.substance-richtext.richtext-flattened li {
    display: inline;
    padding: 0;
    margin: 0;
}
.substance-richtext li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 8px;
    height: 8px;
    width: 8px;
    background: rgba(0,0,0,0.3);
}

.substance-richtext ol li:before {
    top: 0;
    height: auto;
    width: auto;
    background: none;
    font-weight: 700;
    content: counter(li);
    counter-increment: li;
}

.substance-richtext.richtext-flattened li:before {
    display: none;
}

.substance-richtext li p {
    margin-bottom: 1em;
}

.substance-richtext.richtext-flattened li p {
    margin: 0;
}

/* --- Image & video containers */
.substance-richtext .substance-image,
.substance-richtext .substance-video {
    width: 100%;
    margin-bottom: 2em;
}


/* --- Quotations & special boxes */
.substance-richtext blockquote, 
.substance-richtext .infobox {
    margin: 0 0 32px 0;
    padding: 16px;
    border: 1px solid #dfdfe0;
}

.substance-richtext .shoutbox {
    margin: 0 0 32px 0;
    padding: 16px;
    background: linear-gradient(135deg, #005691, #018ece);
    color: #fff;
}


.substance-richtext blockquote *:last-child, 
.substance-richtext .shoutbox *:last-child, 
.substance-richtext .infobox *:last-child {
    margin-bottom: 0;
}

.substance-richtext.richtext-flattened blockquote, 
.substance-richtext.richtext-flattened .shoutbox, 
.substance-richtext.richtext-flattened .infobox {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

/* !-------------------------------------------- */
/* !COMPONENT: Stages */
/* !-------------------------------------------- */

/* --- Background */
.substance-stage {
    min-width: 1200px;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, #005691, #008ECF);
}

.substance-stage.stage-vertical {
    min-width: 0;
    width: 100%;
    height: 100%;
}

.substance-stage .stage-content {
    width: 1170px;
    padding: 32px 15px 32px 15px;
    margin: 0 auto 0 auto;
    color: #fff;
}

.substance-stage.stage-vertical .stage-content {
    width: 100%;
    padding: 32px 16px 32px 16px;
    margin: 200px 0 0 0;
    height: calc(100% - 200px);
}

/* --- Supergraphic 50:50 splits with image */
.substance-stage.stage-supergraphic {
    min-height: 336px;
    background: transparent url("./img/back/supergraphic_left_blue.svg") left center no-repeat;
    background-size: 65%;
}

.substance-stage.stage-supergraphic.stage-right {
    background-image: url("./img/back/supergraphic_right_blue.svg");
    background-position: right center;
    background-size: 70%;
}

.substance-stage.stage-type-2 {
    background-image: linear-gradient(90deg, #00A8B0, #78BE20);
}

.substance-stage.stage-type-2.stage-supergraphic {
    background-image: url("./img/back/supergraphic_left_green.svg");
    background-size: 60%;
}

.substance-stage.stage-type-2.stage-supergraphic.stage-right {
    background-image: url("./img/back/supergraphic_right_green.svg");
    background-size: 70%;
}

.substance-stage.stage-type-3 {
    background-image: linear-gradient(90deg, #E20015, #B90276);
}

.substance-stage.stage-type-3.stage-supergraphic {
    background-image: url("./img/back/supergraphic_left_red.svg");
    background-size: 70%;
}

.substance-stage.stage-type-3.stage-supergraphic.stage-right {
    background-image: url("./img/back/supergraphic_right_red.svg");
    background-size: 65%;
}

/* --- Supergraphic for vertical stage (not in outer container but in .stage-content) */
.substance-stage.stage-supergraphic.stage-vertical {
    background: none;
}

.substance-stage.stage-supergraphic.stage-vertical .stage-content {
    background: transparent url("./img/back/supergraphic_center_blue.svg") center no-repeat;
    background-size: cover;
}

.substance-stage.stage-type-2.stage-supergraphic.stage-vertical .stage-content {
    background-image: url("./img/back/supergraphic_center_green.svg");
}

.substance-stage.stage-type-3.stage-supergraphic.stage-vertical .stage-content {
    background-image: url("./img/back/supergraphic_center_red.svg");
}

/* --- Images are only allowed for supergraphic stages */
.substance-stage .substance-image {
    display: none;
}

.substance-stage.stage-supergraphic .substance-image {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: -1;
}

.substance-stage.stage-supergraphic.stage-right .substance-image {
    right: auto;
    left: 0;
}

/* Vertical placement */
.substance-stage.stage-supergraphic.stage-vertical .substance-image {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    -webkit-transform: none;
            transform: none;
    z-index: 1;
}

.substance-stage.stage-supergraphic.stage-vertical .substance-image img {
    height: auto;
    width: 100%;
}

/* --- Text content */
.substance-stage .stage-content {
    text-align: center;
    position: relative; /* context for invisible click-layer of .primary-action */
}

.substance-stage .stage-content .stage-title, 
.substance-stage .stage-content .stage-subline, 
.substance-stage .stage-content .stage-link {
    margin: 0 auto 24px auto;
    max-width: 50%;
}

.substance-stage .stage-content .stage-link {
    position: relative;
    z-index: 10;
}

.substance-stage .stage-content .stage-title {
    font-weight: 200;
    font-size: 24px;
    line-height: 32px;
}

.substance-stage .stage-content .stage-subline {
    font-size: 16px;
    line-height: 20px;
}

.substance-stage .stage-content .link-action {
    font-weight: 500;
}

/* Invisible click-layer */
.substance-stage:not(.stage-vertical) .stage-content .primary-action:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px; /* gets cut off by .stage-content height */
}

/* Vertical stage variant */
.substance-stage.stage-vertical .stage-content .stage-title, 
.substance-stage.stage-vertical .stage-content .stage-subline {
    margin: 0 0 24px 0;
    max-width: none;
}

/* Supergraphic: text block flushed to left */
.substance-stage.stage-supergraphic .stage-content {
    text-align: left;
}

.substance-stage.stage-supergraphic .stage-content .stage-title, 
.substance-stage.stage-supergraphic .stage-content .stage-subline, 
.substance-stage.stage-supergraphic .stage-content .stage-link {
    margin: 0 0 24px 0;
}

/* Supergraphic variant: text flushed right */
.substance-stage.stage-supergraphic.stage-right .stage-content .stage-title, 
.substance-stage.stage-supergraphic.stage-right .stage-content .stage-subline, 
.substance-stage.stage-supergraphic.stage-right .stage-content .stage-link, 
.substance-stage.stage-supergraphic.stage-right .stage-content .primary-action {
    margin-left: 50%;
}


/* !==== TO DO: this component needs review ==== */

/* !-------------------------------------------- */
/* !COMPONENT: Product presenter box for cycler etc. */
/* !-------------------------------------------- */

.product-list .cell-product .product-image {
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 228px;
    max-width: 228px;
    height: 142px;
    max-height: 142px;
}

.product-list .cell-product .product-description {
    height: 15px;
    max-height: 15px;
    margin-top: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#actor_welcome .product-list .cell-product .product-image {
    width: 100%;
    max-width: none;
}

.product-list .cell-product .product-image a {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
}

.product-list .cell-product .product-image img {
    max-width: 228px;
    max-height: 142px;
}

#actor_welcome .product-list .cell-product .product-image img {
    width: auto;
}

.product-list .cell-product .product-image.image-unavailable {
    background: linear-gradient(135deg, #fff, #EFEFF0);
}

/* WARNING: This element causes flickering in AJAX-updated .substance-carousel components */
/* We're applying display: none to this for carousel instances on the homepage */
.tool-chain-placeholder {
    height: 40px;
    margin-top: 16px;
    text-align: right;
}

.primary-action.show-variants {
    min-width: 196px;
    max-width: 196px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-list .substance-item-state::before  {
    top: 0.3ex; 
}