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

/* !-------------------------------------------- */
/* !COMPONENT: Emphasized text */
/* !-------------------------------------------- */

/* Slightly stronger selector to block leaks from 3rd-party libraries like ext.js */
.stage em {
    font-style: normal;
    font-weight: 700;
}

/* !-------------------------------------------- */
/* !COMPONENT: Links & Buttons */
/* !-------------------------------------------- */

/* --- Initalize abstract buttons and links */
button, input[type="submit"], input[type="button"] {
    border: none;
    border-radius: 0;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 200;
    text-align: inherit;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
}

button:focus {
    outline: none; /* removes outline in Chrome */
}

/* Firefox older than v58 basically freezes line-height to an arbitrary value, so we have to adjust a bit */
button, input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top: -1px;
    margin-bottom: -1px;
}

a {
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
}

/* --- Menu items */
.menu-action {
    display: inline-block;
    text-decoration: none;
    color: #000;
    transition: color ease 0.3s;
}

.menu-action:hover, 
.item-active > .menu-action, 
.flyout-active > .menu-action {
    color: #005691;
    transition: color ease 0.3s;
}

.menu-action.action-inverse {
    color: #fff;
    transition: opacity ease 0.3s;
}

.menu-action.action-inverse:hover, 
.item-active > .menu-action.action-inverse, 
.flyout-active > .menu-action.action-inverse {
    opacity: 0.5;
    transition: opacity ease 0.3s;
}

.menu-action.action-icon {
    width: 45px;
    height: 100%;
    overflow: hidden;
    text-indent: -1000em;
    background: transparent center 9px no-repeat;
}

.menu-action.action-icon:hover, 
.item-active .menu-action.action-icon {
    background-position: center -71px;
}

.menu-action[disabled="disabled"] {
    opacity: 0.5;
    cursor: default;
}

.menu-action[disabled="disabled"]:hover {
    color: inherit;
}

/* Icons for standard menu actions*/
.tools-notifications .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_nav_notification.svg");
}
.tools-chat .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_nav_contact.svg");
}
.tools-lists .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_tool_list.svg");
}
.tools-carts .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_nav_cart.svg");
}
.tools-account .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_nav_account.svg");
}
.tools-pagetop .menu-action.action-icon, 
.nav-pagetop .menu-action.action-icon {
    background-image: url("./img/icon/iconsprite_nav_pagetop.svg");
}

.nav-pagetop .menu-action.action-icon {
    background-size: 170%;
    background-position: center -28px;
}

.nav-pagetop .menu-action.action-icon:hover {
    background-position: center -181px;
}

/* Icons for menu actions which are changed from text to icon */
#ensemble_head.expression-minimal #actor_nav .tools-history .menu-action {
    width: 52px;
    height: 100%;
    overflow: hidden;
    text-indent: -1000em;
    background: transparent center 9px no-repeat;
    background-image: url("./img/icon/iconsprite_nav_history.svg");
}

#ensemble_head.expression-minimal #actor_nav .nav-search .search-quickadd .menu-action {
    width: 52px;
    height: 100%;
    overflow: hidden;
    text-indent: -1000em;
    background: transparent center 9px no-repeat;
    background-image: url("./img/icon/iconsprite_nav_quickadd.svg");
}

#ensemble_head.expression-minimal #actor_nav .tools-history .menu-action:hover, 
#ensemble_head.expression-minimal #actor_nav .tools-history.item-active .menu-action, 
#ensemble_head.expression-minimal #actor_nav .nav-search .search-quickadd .menu-action:hover, 
#ensemble_head.expression-minimal #actor_nav .nav-search .search-quickadd.flyout-active .menu-action {
    opacity: 1;
    background-position: center -71px;
}

/* --- Outgoing activity */
.share-action {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #000;
    overflow: hidden;
    background: transparent center -1px no-repeat;
    text-indent: -1000em;
    text-align: left;
    transition: border ease 0.3s;
}

.share-action:hover, 
.share-action.item-active, 
.share-action.flyout-active {
    border-color: #005691;
    background-position: center -81px;
    transition: border ease 0.3s;
}

.share-action.icon-share {
    background-image: url("./img/icon/iconsprite_share_social.svg");
}
.share-action.icon-email {
    background-image: url("./img/icon/iconsprite_share_email.svg");
}
.share-action.icon-print {
    background-image: url("./img/icon/iconsprite_share_print.svg");
}
.share-action.icon-download {
    background-image: url("./img/icon/iconsprite_share_download.svg");
}
.share-action.icon-twitter {
    background-image: url("./img/icon/iconsprite_share_link_twitter.svg");
}
.share-action.icon-youtube {
    background-image: url("./img/icon/iconsprite_share_link_youtube.svg");
}
.share-action.icon-facebook {
    background-image: url("./img/icon/iconsprite_share_link_facebook.svg");
}

/* --- Inline data actions */
.data-action {
    display: inline-block;
    color: #005691;
    text-decoration: none;
    text-align: left;
    overflow: hidden;
    transition: color ease 0.3s;
    vertical-align: top;
}

.data-action:hover, 
.data-action.flyout-active {
    color: #000;
    transition: color ease 0.3s;
}

.data-action.action-inverse, 
.shoutbox .data-action {
    color: #fff;
    transition: opacity ease 0.3s;
}

.data-action.action-inverse:hover, 
.shoutbox .data-action:hover {
    opacity: 0.5;
    transition: opacity ease 0.3s;
}

.data-action[disabled="disabled"] {
    opacity: 0.5;
    cursor: default;
}

.data-action[disabled="disabled"]:hover {
    color: #005691;
}

.data-action.action-texticon, 
.data-action.action-texticon[disabled="disabled"]:hover {
    padding-left: 40px;
    background: transparent left -90px no-repeat;
    min-height: 20px;
    line-height: 20px;
}

.data-action.action-icon {
    width: 32px;
    height: 32px;
    text-indent: -1000em;
    background: transparent -5px -5px no-repeat;
}

.data-action.action-texticon:hover, 
.data-action.action-texticon.flyout-active {
    background-position: left -10px;
}

.data-action.action-icon:hover, 
.data-action.action-icon.flyout-active {
    background-position: -5px -85px;
}

.data-action.action-inverse.action-texticon, 
.data-action.action-inverse.action-texticon:hover, 
.shoutbox .data-action.action-texticon, 
.shoutbox .data-action.action-texticon:hover {
    background-position: left -170px;
}

.field-entry.entry-inverse .data-action.action-icon, 
.field-entry.entry-inverse .data-action.action-icon:hover, 
.data-action.action-inverse.action-icon, 
.data-action.action-inverse.action-icon:hover {
    background-position: -5px -165px;
}

.data-action.icon-search {
    background-image: url("./img/icon/iconsprite_tool_search.svg");
}
.data-action.icon-calendar {
    background-image: url("./img/icon/iconsprite_tool_calendar.svg");
}
.data-action.icon-edit {
    background-image: url("./img/icon/iconsprite_tool_edit.svg");
}
.data-action.icon-filter {
    background-image: url("./img/icon/iconsprite_tool_filter.svg");
}
.data-action.icon-notification {
    background-image: url("./img/icon/iconsprite_tool_notification.svg");
}
.data-action.icon-notification.item-active {
    background-image: url("./img/icon/iconsprite_tool_notification_off.svg");
}
.data-action.icon-reveal {
    background-image: url("./img/icon/iconsprite_tool_notification_off.svg");
}
.data-action.icon-reveal.item-active {
    background-image: url("./img/icon/iconsprite_tool_notification.svg");
}
.data-action.icon-doc {
    background-image: url("./img/icon/iconsprite_tool_doc.svg");
}
.data-action.icon-info {
    background-image: url("./img/icon/iconsprite_tool_info.svg");
}
.data-action.icon-rss {
    background-image: url("./img/icon/iconsprite_tool_rss.svg");
}
.data-action.icon-reset {
    background-image: url("./img/icon/iconsprite_tool_reset.svg");
}
.data-action.icon-compare {
    background-image: url("./img/icon/iconsprite_tool_compare.svg");
}
.data-action.icon-phone {
    background-image: url("./img/icon/iconsprite_tool_phone.svg");
}
.data-action.icon-email {
    background-image: url("./img/icon/iconsprite_share_email.svg");
}
.data-action.icon-compare {
    background-image: url("./img/icon/iconsprite_tool_compare.svg");
}
.data-action.icon-add-download {
    background-image: url("./img/icon/iconsprite_tool_download_add.svg");
}
.data-action.icon-download {
    background-image: url("./img/icon/iconsprite_tool_download.svg");
}
.data-action.icon-upload {
    background-image: url("./img/icon/iconsprite_tool_upload.svg");
}
.data-action.icon-undo {
    background-image: url("./img/icon/iconsprite_tool_undo.svg");
}
.data-action.icon-delete {
    background-image: url("./img/icon/iconsprite_tool_delete.svg");
}
.data-action.icon-logout {
    background-image: url("./img/icon/iconsprite_tool_logout.svg");
}
.data-action.icon-warning {
    background-image: url("./img/icon/iconsprite_tool_warning.svg");
}
.data-action.icon-preference {
    background-image: url("./img/icon/iconsprite_tool_preference.svg");
}
.data-action.icon-view-list {
    background-image: url("./img/icon/iconsprite_tool_view_list.svg");
}
.data-action.icon-view-grid {
    background-image: url("./img/icon/iconsprite_tool_view_grid.svg");
}
.data-action.icon-add {
    background-image: url("./img/icon/iconsprite_tool_add.svg");
}

/* Logout */
.data-action.action-texticon.icon-add-download {
    min-height: 25px;
}

/* Add to download list */
.data-action.action-texticon.icon-logout {
    min-height: 24px;
}

/* DEPRECATED: Adding / was used for recommended products in QuickAdd mega-flyout
If ever needed again, this should rather use iconsprite_nav_quickadd (already has circle)

.data-action.action-icon.icon-add {
    border-radius: 50%;
    border: 1px solid #000;
}

.data-action.action-icon.icon-add:hover {
    border-color: #005691;
}
*/
 
/* Closing/Clearing */
.data-action.icon-close, 
.data-action.icon-remove {
    background-image: url("./img/icon/iconsprite_tool_close.svg");
}

.data-action.action-icon.icon-close {
    width: 40px;
    height: 40px;
    background-position: left 0;
}

.data-action.action-icon.icon-close:hover {
    background-position: left -80px;
}

/* View switcher */
.data-action.action-icon.icon-view-list, 
.data-action.action-icon.icon-view-grid {
    width: 40px;
    height: 40px;
    background-position: center 0;
}

.data-action.action-icon.icon-view-list:hover, 
.data-action.action-icon.icon-view-list.item-active, 
.data-action.action-icon.icon-view-grid:hover, 
.data-action.action-icon.icon-view-grid.item-active {
    background-position: left -80px;
}

/* Expander/Collapser */
/* Note: actors_context.css contains a custom solution for #actor_sub_nav */
.data-action.icon-expand, 
.data-action.icon-multiexpand {
    position: relative;
}

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

.data-action.icon-multiexpand:before {
    background-image: url("./img/icon/icon_util_multidropdown_blue.svg");
}

.data-action.icon-expand:hover:before {
    background-image: url("./img/icon/icon_util_dropdown_black.svg");
}

.data-action.icon-multiexpand:hover:before {
    background-image: url("./img/icon/icon_util_multidropdown_black.svg");
}

.data-action.icon-expand.item-active:before, 
.data-action.icon-multiexpand.item-active:before {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

.data-action.action-icon.icon-expand, 
.data-action.action-icon.icon-multiexpand {
    width: 24px;
    height: 15px;
}

.data-action.action-texticon.icon-expand, 
.data-action.action-texticon.icon-multiexpand {
    padding-left: 28px;
}

/* Video link */
.data-action.icon-video {
    background-image: url("./img/icon/iconsprite_util_play.svg");
    background-size: 20px;
}

.data-action.action-texticon.icon-video {
    padding-left: 28px;
}

/* --- Navigation links */
.link-action {
    display: inline-block;
    text-decoration: none;
    color: #005691;
    transition: color ease 0.3s;
}

.link-action.action-lined {
    text-decoration: underline;
}

.link-action:hover {
    color: #000;
    transition: color ease 0.3s;
}

.link-action.action-inverse, 
.shoutbox .link-action {
    color: #fff;
    transition: opacity ease 0.3s;
}

.link-action.action-inverse:hover, 
.shoutbox .link-action:hover {
    opacity: 0.7;
    transition: opacity ease 0.3s;
}

/* Placing the link icon */
.link-action.action-icon {
    padding-right: 20px;
    position: relative;
    vertical-align: top;
}

.link-action.action-external.action-icon {
    padding-right: 25px;
}

.link-action.action-icon:after {
    content: "";
    display: block;
    position: absolute;
    right: 5px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: transparent url("./img/icon/iconsprite_util_link.svg") no-repeat;
    background-position: right -56px;
    transition: right ease 0.3s;
}

.link-action.action-icon:hover:after {
    right: 0;
    background-position: right 0;
    transition: right ease 0.3s;
}

.link-action.action-external.action-icon:after {
    background-image: url("./img/icon/iconsprite_util_link_external.svg");
}

.link-action.action-inverse.action-icon:after, 
.link-action.action-inverse.action-icon:hover:after, 
.shoutbox .link-action.action-icon:after, 
.shoutbox .link-action.action-icon:hover:after {
    background-position: right top -112px;
}


/* --- Primary actions */
/* Defaults to ghost style */
.primary-action,
input.primary-action {
    font-weight: 400;
    display: inline-block;
    color: #000;
    text-decoration: none;
    border: 1px solid #CFD0D1;
    background-color: #fff;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    padding: 0 40px 0 40px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all ease 0.3s;
}

.primary-action:hover {
    border-color: #000;
    transition: all ease 0.3s;
}

/* Size variations */
.primary-action.action-size-small {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px 0 20px;
}

.primary-action.action-size-tiny {
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 10px;
}

/* Color variations */
.primary-action.action-inverse {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.primary-action.action-inverse:hover {
    background-color: rgba(255,255,255,0.05);
}

.primary-action.action-level-solid {
    font-weight: 500;
    background-color: #005691;
    color: #fff;
    border: none;
    border-bottom: 2px solid #008ECF;
}

.primary-action.action-level-solid:hover {
    background-color: #008ECF;
}

.primary-action.action-level-master {
    font-weight: 500;
    background-color: #E20015;
    color: #fff;
    border: none;
    border-bottom: 2px solid #B90276;
}

.primary-action.action-level-master:hover {
    background-color: #B90276;
}

/* Additional loading indicator */
.primary-action.action-loading {
    background-image: url("./img/animations/waiting_small.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    color: transparent; /* Make label invisible while keeping text-dependent width */
}

.primary-action.action-inverse.action-loading, 
.primary-action.action-level-solid.action-loading, 
.primary-action.action-level-master.action-loading {
    background-image: url("./img/animations/waiting_small_white.gif");
}

.primary-action.action-size-small.action-loading {
    background-size: 32px;
}

.primary-action.action-size-tiny.action-loading {
    background-size: 22px;
}

/* TEMPORARY: Disabled buttons */
.primary-action[disabled="disabled"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.primary-action[disabled="disabled"]:hover {
    background-color: #fff;
    color: #000;
}

.primary-action.action-level-solid[disabled="disabled"]:hover {
    background-color: #005691;
    color: #fff;
}

.primary-action.action-level-master[disabled="disabled"]:hover {
    background-color: #E20015;
    color: #fff;
}

/* --- Toolbox actions */
.tool-action, 
input.tool-action {
    position: relative;
    font-weight: 400;
    display: inline-block;
    color: #000;
    text-decoration: none;
    border: 1px solid #CFD0D1;
    background: transparent left 0 no-repeat;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    width: 60px;
    overflow: hidden;
    text-indent: -1000em;
    transition: all ease 0.3s;
}

.tool-action.action-texticon {
    width: auto;
    text-indent: 0;
    padding-left: 40px;
    padding-right: 20px;
}

.tool-action.action-texticon.flyout-controller {
    padding-right: 30px;
}

.tool-action:not([disabled="disabled"]):hover, 
.tool-action.flyout-active {
    border-color: #000;
    transition: all ease 0.3s;
}

/* Color variations */
.tool-action.action-level-solid {
}

.tool-action.action-level-master {
    font-weight: 500;
    background-color: #E20015;
    background-position: left -160px;
    color: #fff;
    border: none;
    border-bottom: 2px solid #B90276;
}

.tool-action.action-level-master:not([disabled="disabled"]):hover, 
.tool-action.action-level-master.flyout-active {
    background-color: #B90276;
    border-color: #B90276;
}

/* Icons */
.tool-action.icon-check {
    background-image: url("./img/icon/iconsprite_tool_check.svg");
}
.tool-action.icon-check-big {
    background-image: url("./img/icon/iconsprite_tool_check_big.svg");
    padding-left: 80px;
}
.tool-action.icon-list-add {
    background-image: url("./img/icon/iconsprite_tool_list.svg");
}
.tool-action.icon-cart-move {
    background-image: url("./img/icon/iconsprite_tool_cart_change.svg");
}
.tool-action.icon-cart-add {
    background-image: url("./img/icon/iconsprite_tool_cart_add.svg");
}
.tool-action.icon-download {
    background-image: url("./img/icon/iconsprite_tool_download.svg");
}
.tool-action.icon-list-add:not(.flyout-controller):not(.action-texticon), 
.tool-action.icon-cart-add:not(.flyout-controller):not(.action-texticon) {
    width: 40px;
}
.tool-action.icon-delete {
    background-image: url("./img/icon/iconsprite_tool_delete.svg");
    width: 40px;
}
.tool-action.icon-remove {
    background-image: url("./img/icon/iconsprite_tool_close.svg");
    width: 40px;
}
.tool-action.icon-back {
    background-image: url("./img/icon/iconsprite_tool_back.svg");
    width: 40px;
}
.tool-action.icon-edit {
    background-image: url("./img/icon/iconsprite_tool_edit.svg");
    width: 40px;
}
.tool-action.icon-add {
    background-image: url("./img/icon/iconsprite_tool_add.svg");
}

/* Additional loading indicator */
.tool-action.action-texticon.action-loading {
    background-image: url("./img/animations/waiting_small.gif");
    background-position: 5px;
    background-repeat: no-repeat;
    background-size: 25px;
}

/* Expanders for tools with flyout feature */
.tool-action.flyout-controller:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 24px;
    height: 15px;
    margin-top: -6px;
    background: transparent url("./img/icon/icon_util_dropdown_black.svg") center no-repeat;
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
}

.tool-action.action-level-master.flyout-controller:after {
    background-image: url("./img/icon/icon_util_dropdown_white.svg");
}

.tool-action.flyout-controller.flyout-active:after {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    transition: -webkit-transform ease 0.3s;
    transition: transform ease 0.3s;
    transition: transform ease 0.3s, -webkit-transform ease 0.3s;
    margin-top: -8px;
}

/* TEMPORARY EXECUTION: Disabled state */
.tool-action[disabled="disabled"] {
    opacity: 0.3;
    cursor: default;
}


/* --- Quicklinks */
.quick-action {
    display: inline-block;
    background-color: #005691;
    color: #fff;
    text-decoration: none;
    height: 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    padding: 0 8px 0 8px;
    transition: all ease 0.3s;
}

.quick-action:hover {
    background-color: #008ECF;
    transition: all ease 0.3s;
}

.quick-action.action-texticon {
    padding-right: 35px;
    background-position: right -5px top -165px;
    background-repeat: no-repeat;
}

.quick-action.icon-add {
    background-image: url("./img/icon/iconsprite_tool_add.svg");
}
.quick-action.icon-remove {
    background-image: url("./img/icon/iconsprite_tool_close.svg");
}

/* Muted display */
.quick-action.action-muted {
    background-color: #EFEFF0;
    background-position: right -5px top -5px;
    color: #000;
}

.quick-action.action-muted:hover {
    background-color: #DFDFE0;
}

/* Inverse display */
.quick-action.action-inverse {
    background-color: transparent;
    background-position: right -5px top -5px;
    border: 1px solid #CFD0D1;
    color: inherit;
}

.quick-action.action-inverse:hover {
    border-color: #000;
}

/* --- Paging controls */
.page-action {
    display: inline-block;
    text-decoration: none;
    color: #000;
    overflow: hidden;
}

/* Arrow buttons */
.page-action.action-dir-prev, 
.page-action.action-dir-next {
    background: #fff url("./img/icon/iconsprite_util_link.svg") no-repeat;
    background-position: 60% -204px;
    background-size: 31px;
    overflow: hidden;
    text-indent: -1000em;
    width: 56px;
    height: 88px;
    transition: background-color ease 0.3s;
}

.page-action.action-dir-prev {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

/*  The small variant is also triggerd by @media in substance_big.css */
.substance-carousel.carousel-embedded .page-action.action-dir-prev, 
.substance-carousel.carousel-embedded .page-action.action-dir-next, 
.substance-image.image-multiple .page-action.action-dir-prev, 
.substance-image.image-multiple .page-action.action-dir-next {
    width: 40px;
    height: 56px;
    background-position: 54% -132px;
    background-size: 20px;
}

/* Hover & active states */
.page-action.action-dir-prev:hover, 
.page-action.action-dir-next:hover {
    background-color: rgba(0,142,207,0.5);
    background-position: 60% -421px;
    transition: background-color ease 0.3s;
}

.substance-carousel.carousel-embedded .page-action.action-dir-prev:hover, 
.substance-carousel.carousel-embedded .page-action.action-dir-next:hover, 
.substance-image.image-multiple .page-action.action-dir-prev:hover, 
.substance-image.image-multiple .page-action.action-dir-next:hover {
    background-position: 54% -272px;
}

.page-action.action-dir-prev:active, 
.page-action.action-dir-next:active {
    background-color: rgba(0,142,207,1);
    transition: background-color ease 0.3s;
}

/* Pagination dots */
.page-action.action-dot {
    display: block;
    height: 40px;
    width: 40px;
    overflow: hidden;
    text-indent: -1000em;
    position: relative;
}

.page-action.action-dot:before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BFC0C2;
    top: 15px;
    left: 15px;
    transition: background ease 0.3s;
}

.page-action.action-dot:hover:before {
    background-color: #005691;
    transition: background ease 0.3s;
}

.page-action.action-dot.item-active:before {
    background-color: #005691;
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
}

/* Dots on dark backgrounds */
.carousel-inverse .page-action.action-dot:before, 
.carousel-inverse .page-action.action-dot.item-active:before {
    background: #fff;
    transition: opacity ease 0.3s;
}

.carousel-inverse .page-action.action-dot:hover:before {
    opacity: 0.5;
    transition: opacity ease 0.3s;
}

/* --- Sort controls */
.sort-action {
    position: relative;
    display: inline-block;
    text-align: left;
    padding-right: 19px;
}

.sort-action:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    background: transparent url("./img/icon/iconsprite_util_sort.svg") right 0 no-repeat;
}

.sort-action.action-dir-asc:after {
    background-position: right -56px;
}

.sort-action.action-dir-desc:after {
    background-position: right -112px;
}

.sort-action:hover:after {
    background-position: right -168px;
}

/* --- Accordion controls */
.accordion-action {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -1000em;
    overflow: hidden;
    background: transparent url("./img/icon/iconsprite_util_plus.svg") center -72px no-repeat;
}

.accordion-action:hover {
    background-position: center 0px;
}

.item-active > .accordion-action {
    background-image: url("./img/icon/iconsprite_util_minus.svg");
}

/* !-------------------------------------------- */
/* !COMPONENT: Form components */
/* !-------------------------------------------- */

/* --- Form containers */
.substance-form legend {
    font-size: 16px;
    margin-bottom: 32px;
}

.field-entry {
    position: relative;
}

.field-container {
    position: relative;
    vertical-align: top;
}

/* Fields with embedded action buttons */
.field-action .data-action {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.field-action input[disabled="disabled"] ~ .data-action {
    display: none;
}

/* Fields with waiting animation */
span.waiting-indicator {
    display: block; /* relies on inline-style to become visible */
    width: 40px;
    height: 40px;
    background-image: url("./img/animations/waiting_small.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
}

.field-waiting .waiting-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
}

.field-action.field-waiting .waiting-indicator {
    right: 40px;
}

.field-waiting input[disabled="disabled"] ~ .waiting-indicator {
    display: none;
}

/* Paired entries (used for QuickAdd) */
.field-entry.entry-paired:after {
    content: "";
    display: table;
    clear: both;
}

.field-entry.entry-paired > .field-container {
    float: left;
    width: calc(100% - 78px); /* assuming 2nd child is number input, limited to 70px width */
    margin-right: 8px;
}

.field-entry.entry-paired > .field-container + .field-container {
    width: auto;
    margin-right: 0;
}

/* --- Labels */
.field-entry label {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    /* color: #525F6B; Old value from field definitions */
    color: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.field-entry.entry-checkbox label, 
.field-entry.entry-radio label {
    color: #000;
}

.field-entry.entry-inverse label {
    color: #fff;
}

/* Pseudo-label for group of radio buttons or checkboxes */
.field-entry.entry-checkbox .field-title, 
.field-entry.entry-radio .field-title {
    color: #000;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    padding-left: 15px;
    margin-bottom: 8px;
}

/* Marking mandatory fields */
input[required="required"]:not([type="checkbox"]):not([type="radio"]) ~ label:after, 
textarea[required="required"] ~ label:after, 
select[required="required"] ~ label:after {
    content: " *";
    font-weight: bold;
}

.field-entry.entry-checkbox .field-title.title-required:after, 
.field-entry.entry-radio .field-title.title-required:after {
    content: " *";
    font-weight: bold;
}

/* Labels acting as placeholders and moving out on :focus or when field has value */
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container label {
    display: block;
    position: absolute;
    left: 15px;
    top: 26px; /* Down state, covering the field */
    font-size: 14px;
    opacity: 0.4;
    cursor: text;
    transition: all 0.3s ease;
}

.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container input:focus ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container textarea:focus ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container select ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container textarea.value-changed ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container input.value-changed ~ label {
    font-weight: bold;
    top: 0; /* Up state, above the field */
    transition: all 0.3s ease;
    opacity: 1;
    font-size: 10px;
}

/* Labels for disabled fields */
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container input[disabled="disabled"] ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container textarea[disabled="disabled"] ~ label, 
.field-entry:not(.entry-checkbox):not(.entry-radio) > .field-container select[disabled="disabled"] ~ label {
    opacity: 0.2;
}

input[type="radio"][disabled="disabled"] ~ label, 
input[type="checkbox"][disabled="disabled"] ~ label {
    opacity: 0.2;
}


/* --- Placeholders */
/* Note: IE11 and Edge have different selectors */
input::-webkit-input-placeholder {
    color: #000;
    opacity: 0.4;
}

input::-moz-placeholder {
    color: #000;
    opacity: 0.4;
}

input:-ms-input-placeholder {
    color: rgba(0,0,0,0.4) !important;
}

input::-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

textarea::-webkit-input-placeholder {
    color: #000;
    opacity: 0.4;
}

textarea::-moz-placeholder {
    color: #000;
    opacity: 0.4;
}

textarea:-ms-input-placeholder {
    color: rgba(0,0,0,0.4) !important;
}

textarea::-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

/* Hightlighted fields (we don't use placeholders for .entry-inverse fields) */
.field-highlight input::-webkit-input-placeholder {
    opacity: 0.6;
}

.field-highlight input::-moz-placeholder {
    opacity: 0.6;
}

.field-highlight input:-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

.field-highlight input::-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

.field-highlight textarea::-webkit-input-placeholder {
    opacity: 0.6;
}

.field-highlight textarea::-moz-placeholder {
    opacity: 0.6;
}

.field-highlight textarea:-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

.field-highlight textarea::-ms-input-placeholder {
    color: rgba(0,0,0,0.6) !important;
}

/* --- Text input fields */
input[type="text"], 
input[type="number"], 
input[type="password"] {
    font-family: inherit;
    font-size: 14px;
    font-weight: 200;
    line-height: 16px;
    outline: none;
    color: #000;
    border-radius: 0;
    margin: 18px 0 0 0;
    padding: 0 15px 0 15px;
    height: 40px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #CFD0D1;
    width: 100%;
    transition: all 0.3s ease;
}

input::-ms-clear, 
input::-ms-reveal {
    display: none; /* remove Clear/Value Display button for IE11 and Edge */
}

input[type="number"] {
    width: 70px; /* Should fit 4-digit numbers */
    padding-right: 5px; /* Leave space for incrementors */
    text-align: center;
}

.field-container.field-action input, 
.field-container.field-waiting input {
    padding-right: 40px; /* leave room for overlay field action button or waiting indicator */
}

.field-container.field-waiting.field-action input {
    padding-right: 80px;
}

.entry-unlabeled input {
    margin-top: 0;
}

input:focus {
    transition: all 0.3s ease;
    background-color: #EFEFF0;
}

/* Disabled input fields (prevent pseudo-buttons from being affected) */
input[disabled="disabled"]:not([type="button"]) {
    background-color: rgba(255,255,255,0.7);
    border-color: #EFEFF0;
    color: rgb(85,85,85);
}

/* Highlighted fields */
.field-highlight input {
    background-color: #EFEFF0;
}

.field-highlight input:focus {
    background-color: #DFDFE0;
}

.field-highlight input[disabled="disabled"] {
    background-color: #fff;
}

/* Fields on dark background */
.entry-inverse input {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.entry-inverse input:focus {
    background-color: rgba(255,255,255,0.2);
}

.entry-inverse input[disabled="disabled"]:not([type="button"]) {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

/* WebKit & Firefox browsers: Suppress browser styling for autofilled values */
/* Chrome v74ff: declare dummy animation to trigger a JS event */
input:-webkit-autofill {
    -webkit-animation-name: announce-autofill;
            animation-name: announce-autofill;
    box-shadow: 0 0 0 1000px #FEEBC5 inset;
}

@-webkit-keyframes announce-autofill {
    from {}
    to {}
}

@keyframes announce-autofill {
    from {}
    to {}
}

input:-moz-autofill {
    box-shadow: 0 0 0 1000px #FEEBC5 inset;
}

.entry-inverse input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #BFD8D1 inset;
}

.entry-inverse input:-moz-autofill {
    box-shadow: 0 0 0 1000px #BFD8D1 inset;
}

/* --- Text areas */
textarea {
    font-family: inherit;
    font-size: 14px;
    font-weight: 200;
    line-height: 16px;
    outline: none;
    color: inherit;
    border-radius: 0;
    margin: 18px 0 0 0;
    padding: 12px 15px 12px 15px;
    height: 40px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #CFD0D1;
    width: 100%;
    resize: none;
    overflow: auto; /* removes permanent scrollbars in IE */
    transition: all 0.5s ease;
}

.entry-unlabeled textarea {
    margin-top: 0;
}

textarea:focus {
    height: 100px; /* leaves space for 5 lines of text */
    background-color: #EFEFF0;
    transition: all 0.5s ease;
}

textarea[disabled="disabled"] {
    background-color: rgba(255,255,255,0.7);
    border-color: #EFEFF0;
    color: rgb(85,85,85);
}

/* IE11 + Edge don't give a shit about overflow: auto if elements have box-sizing: border-box */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    textarea {
        box-sizing: content-box;
        width: calc(100% - 30px);
        height: 15px;
        overflow: hidden;
    }

    textarea:focus {
        height: 75px;
        overflow: auto;
    }
}

@supports (-ms-ime-align:auto) and (color:unset) {
    textarea {
        box-sizing: content-box;
        width: calc(100% - 30px);
        height: 15px;
        overflow: hidden;
    }

    textarea:focus {
        height: 75px;
        overflow: auto;
    }
}

/* Highlighted fields */
.field-highlight textarea {
    background-color: #EFEFF0;
}

.field-highlight textarea:focus {
    background-color: #DFDFE0;
}

.field-highlight textarea[disabled="disabled"] {
    background-color: #fff;
    color: rgb(85,85,85);
}

/* --- Radio fields */
input[type="radio"] {
    height: 20px;
    width: 20px;
    margin: 0 8px 0 0;
}

input[type="radio"][disabled="disabled"] {
    opacity: 0.5;
}

/* --- Checkbox fields (most browsers will block the visual aspects of this styling) */
input[type="checkbox"] {
    height: 20px;
    width: 20px;
    margin: 0 8px 0 0;
    background-color: #f0f0f0;
    border-bottom: 1px solid #CFD0D1;
    position: relative;
    bottom: -3px;
}

input[type="checkbox"][disabled="disabled"] {
    opacity: 0.5;
}

/* --- Pulldown select fields */
select {
    font-family: inherit;
    font-size: 14px;
    font-weight: 200;
    line-height: 16px;
    outline: none;
    color: inherit;
    border-radius: 0;
    padding: 0 35px 4px 15px;
    margin: 18px 0 0 0;
    height: 40px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #CFD0D1;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s ease;
}

select::-ms-expand {
    display: none; /* suppress default dropdown arrow in IE11 */
}

.entry-unlabeled select {
    margin-top: 0;
}

select:focus {
    transition: all 0.3s ease;
    background-color: #EFEFF0;
}

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

/* Dropdown arrow */
.field-entry.entry-select: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: 33px;
    pointer-events: none; /* allows click-through */
}

.field-entry.entry-select.entry-unlabeled:after {
    top: 17px;
}

/* --- Field comments + error messages */
.field-entry .field-comment {
    clear: both;
    display: none;
    padding-top: 8px;
    padding-left: 15px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

.field-entry.has-comment .field-comment, 
.field-entry.has-validation .field-comment {
    display: block;
}

.field-entry.entry-checkbox > .field-comment, 
.field-entry.entry-radio > .field-comment {
    border-top: 1px solid #CFD0D1;
    margin-top: 8px;
}

/* Comment text */
.field-entry.has-validation .field-comment p {
    font-weight: 600;
}

/* State-dependent text color */
.field-entry.has-validation.validation-ok .field-comment p {
    color: #78BE20;
}

.field-entry.has-validation.validation-warn .field-comment p {
    color: #FCAF17;
}

.field-entry.has-validation.validation-crisis .field-comment p {
    color: #E20015;
}

.field-entry.entry-inverse.has-validation.validation-crisis .field-comment p {
    color: #FCAF17; /* standard red wouldn't be visible */
}

/* State-dependent borders */
.field-entry.has-validation.validation-ok input[type="text"], 
.field-entry.has-validation.validation-ok input[type="number"], 
.field-entry.has-validation.validation-ok input[type="password"], 
.field-entry.has-validation.validation-ok textarea, 
.field-entry.has-validation.validation-ok select, 
.field-entry.has-validation.validation-ok.entry-checkbox .field-comment, 
.field-entry.has-validation.validation-ok.entry-radio .field-comment {
    border-color: #78BE20;
}

.field-entry.has-validation.validation-warn input[type="text"], 
.field-entry.has-validation.validation-warn input[type="number"], 
.field-entry.has-validation.validation-warn input[type="password"], 
.field-entry.has-validation.validation-warn textarea, 
.field-entry.has-validation.validation-warn select, 
.field-entry.has-validation.validation-warn.entry-checkbox .field-comment, 
.field-entry.has-validation.validation-warn.entry-radio .field-comment {
    border-color: #FCAF17;
}

.field-entry.has-validation.validation-crisis input[type="text"], 
.field-entry.has-validation.validation-crisis input[type="number"], 
.field-entry.has-validation.validation-crisis input[type="password"], 
.field-entry.has-validation.validation-crisis textarea, 
.field-entry.has-validation.validation-crisis select, 
.field-entry.has-validation.validation-crisis.entry-checkbox .field-comment, 
.field-entry.has-validation.validation-crisis.entry-radio .field-comment {
    border-color: #E20015;
}

.field-entry.entry-inverse.has-validation.validation-crisis input[type="text"], 
.field-entry.entry-inverse.has-validation.validation-crisis input[type="number"], 
.field-entry.entry-inverse.has-validation.validation-crisis input[type="password"], 
.field-entry.entry-inverse.has-validation.validation-crisis textarea, 
.field-entry.entry-inverse.has-validation.validation-crisis select, 
.field-entry.entry-inverse.has-validation.validation-crisis.entry-checkbox .field-comment, 
.field-entry.entry-inverse.has-validation.validation-crisis.entry-radio .field-comment {
    border-color: #FCAF17; /* standard red wouldn't be visible */
}

/* !-------------------------------------------- */
/* !COMPONENT: Tables */
/* !-------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
}

.substance-table.table-text {
    table-layout: fixed;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* --- Column titles */
.substance-table th {
    text-align: left;
    vertical-align: bottom;
    padding: 8px 16px 8px 0;
    font-size: 12px;
    font-weight: 700;
}

.substance-table th.cell-numeric {
    text-align: right;
}

.substance-table.table-text th {
    padding-left: 16px;
}

.substance-table th:last-child {
    padding-right: 0;
}

/* Sort actions */
.substance-table th .sort-action {
    font-weight: 700;
}

.substance-table th.cell-numeric .sort-action {
    text-align: right;
}

/* Borders */
.substance-table thead tr {
    border-bottom: 2px solid #005691;
}

.substance-table.table-text thead tr {
    border-bottom: 1px solid #dfdfe0;
}

/* --- Body cells */
/* Borders */
.substance-table tbody tr:not(:last-child) {
    border-bottom: 1px solid #dfdfe0;
}

.substance-table tbody:first-child tr:first-child {
    border-top: 1px solid #dfdfe0;
}

/* Cell content */
.substance-table td {
    text-align: left;
    vertical-align: top;
    padding: 16px 16px 16px 0;
    font-size: 12px;
    line-height: 18px;
}

.substance-table td.cell-numeric {
    text-align: right;
}

.substance-table.table-text td {
    padding-left: 16px;
}

.substance-table td:last-child {
    padding-right: 0;
}

/* Cell highlighting */
.substance-table.table-text td:nth-child(2n) {
    background-color: #EFEFF0;
}

.substance-table tbody td.cell-highlight {
    font-weight: bold;
    color: #78BE20;
    background-color: rgba(120,190,32,0.2) !important;
}


/* !-------------------------------------------- */
/* !COMPONENT: Images */
/* !-------------------------------------------- */

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

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

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

/* --- Links around images */
.substance-image a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.3s ease;
}

.substance-image a:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* --- Image */
/* If no proportion class exists, we're assuming a portrait proportion */
/* Portrait proportion is the safest choice since it will never distort an image */
.substance-image img, 
.substance-image.image-portrait img {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

/* This treatment is for non-portrait landscape images which are taller than 16:9 . */
/* Images wider than 16:9 will be distorted (squeezed into available width) */
.substance-image.image-landscape img {
    top: 50%;
    left: 50%;
    height: 100%;
    max-width: 100%;
    width: auto;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}

/* This treatment is for landscape images in 16:9 proportion or even wider */
/* Any image less wide than 16:9 will be clipped in the vertical axis */
.substance-image.image-landscape-wide img {
    left: 0;
    height: auto;
    width: 100%;
    max-width: none;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* Leave space for paging controls */
.substance-image.image-multiple img {
    padding: 0 30px 0 30px;
}

/* --- Controls for multiples images */
.substance-image.image-multiple .page-action {
    position: absolute;
    top: 50%;
    margin-top: -26px;
}

.substance-image.image-multiple .page-action.action-dir-prev {
    left: 0;
}

.substance-image.image-multiple .page-action.action-dir-next {
    right: 0;
}