/*
 Zusätzliche Styles für den öffentlichen Bereich
*/

/*
    Anpassungen des Standardstils der Browser
*/

/* Akzentfarbe von Checkboxes und Radio Buttons */
input {
    accent-color: #3290ff;
}

/*
    Zusäzliche Klasse, um Elemente (Bilder) Rechtsbündig zu machen.
*/
.right-block {
    margin-left: auto;
}

/*
    BugFix: Aufhebung der angepassten Schriftgrössen für das Social-Media Content Item
*/
.social-media {
    font-size: 14px;
}

/*
    Gallery Content Item: Vertikaler Abstand zwischen dein Zeilen
*/
.portfolio-item {
    margin-bottom: 20px;
}
/*
    Gallery Content Item: Anpassungen Link für die Option "LinkForText"
*/
.portfolio-item-link a {
    text-decoration: none;
    color: inherit;
}

    .portfolio-item-link a:hover {
        text-decoration: none;
        color: inherit;
    }

.portfolio-item-link p,
.portfolio-item-link h1,
.portfolio-item-link h2,
.portfolio-item-link h3,
.portfolio-item-link h4,
.portfolio-item-link h6 {
    padding: 0 8px 4px;
}

.portfolio-item-link:hover {
    background: #333333;
    color: #fff;
    opacity: 0.7;
    overflow: hidden;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}


/* 
    Background Image Content Item
*/
.bg-img-content-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*
    Flip Book Content Item: Automasche Anpassung der Bildgrössen
*/

.FlipBookContainer {
    margin: 0 auto; /* FlipBookContainer zentrieren */
}

.FlipBook {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .FlipBook .page {
        height: 100%;
    }

        .FlipBook .page img {
            max-width: 100%;
            height: 100%;
        }

.FlipBookControl {
    padding-top: 2px;
    padding-bottom: 10px;
    text-align: center;
}

    .FlipBookControl span {
        cursor: pointer;
    }

    .FlipBookControl input {
        width: 30px;
        text-align: center;
    }

/*
jQuery tablesorter
*/

table.tablesorter thead tr .header {
    background-image: url(/Content/tablesorter/bg.gif);
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
    cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
    background-image: url(/Content/tablesorter/asc.gif);
}

table.tablesorter thead tr .headerSortDown {
    background-image: url(/Content/tablesorter/desc.gif);
}

/*
    DataTables
*/

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    background-repeat: no-repeat;
    background-position: center left;
}

/*
    Carousel Content Item
*/

/* 
    Bei Carousel mit einer min-height die Bilder rechts und links gleichmässig beschneiden statt quetschen 
*/
.cube-carousel .cube-carousel-item.minheight {
    overflow: hidden;
}

    .cube-carousel .cube-carousel-item.minheight img {
        position: relative;
        transform: translateX(-50%);
        left: 50%;
        width: 100%; /* Bugfix für IE 11.0 */
    }

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1;
    }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
}

/*
  Bootstrap 4 Sub-Sub-Navigation
  Quelle: https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation
*/
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }

#article-image-carousel .carousel-indicators {
    top: -20px;
    bottom: unset;
}

    #article-image-carousel .carousel-indicators li {
        background-color: #ccc;
    }

    #article-image-carousel .carousel-indicators .active {
        background-color: #333;
    }

/*
#article-image-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300f' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

#article-image-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300f' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
*/

#article-image-carousel .carousel-caption {
    color: black
}

/* Default Button */

.cube-button {
    color: black;
    background-color: lightgray;
    border-color: lightgray;
}

/* SHOP */

.cube-shop {
}

/* Default Button in Shop (Basket, Checkout, etc.) */
.cube-shop-button, .cube-shop-button:hover {
}

/* Button "Warenkorb" */
.cube-shop-basket-button {
}

/* Button "Zur Kasse" */
.cube-shop-checkout-button {
}

.cube-shop-index {
}

.cube-shop-search-field {
}

.cube-shop-left-area {
}

.cube-shop-accordion-button {
    width: 100%;
    border: 1.5px solid lightgray;
    border-radius: 5px;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    cursor: pointer;
    display: none;
    margin-bottom: 0.5em;
    color: gray;
}

.cube-shop-accordion {
}

.cube-shop-categories {
}

.cube-shop-category-box {
}

.cube-shop-category-header-image {
}

.cube-shop-category-description {
}

.cube-shop-category {
    padding: 0.25em 0;
    cursor: pointer;
}

    .cube-shop-category.active .cube-shop-category-name {
        font-weight: bold;
    }

.cube-shop-category-toggle {
    background-image: url('/Content/Images/filter-collapsed.svg');
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: left top;
    background-position-x: 0.15em;
    background-position-y: 0.5em;
    padding-left: 16px;
}

.expanded .cube-shop-category-toggle {
    background-image: url('/Content/Images/filter-expanded.svg');
}

.cube-shop-category-name {
    color: black !important;
    text-decoration: none !important;
}

.cube-shop-subcategories {
    margin-left: 1em;
}

.cube-shop-article-filters {
    user-select: none;
}

.cube-shop-article-filter {
    padding: 0.25em 0;
}

.cube-shop-article-filter-header {
}

.cube-shop-article-filter-toggle {
    background-image: url('/Content/Images/filter-collapsed.svg');
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: left top;
    background-position-x: 0.15em;
    background-position-y: 0.5em;
    padding-left: 16px;
    cursor: pointer;
}

.active .cube-shop-article-filter-toggle {
    background-image: url('/Content/Images/filter-expanded.svg');
}

.cube-shop-article-filter-body {
    margin-bottom: 0.5em;
    margin-left: 1.2em;
    display: none;
}

.active .cube-shop-article-filter-body {
    display: block;
}

.cube-shop-article-filter-yesno {
}

.cube-shop-article-filter-checkbox {
    margin: 0 2px 0 1px;
    vertical-align: middle;
}

.cube-shop-article-filter-label {
    margin: 0;
    vertical-align: middle;
}

.cube-shop-article-filter-title {
}

    .cube-shop-article-filter-title.active {
        font-weight: bolder;
    }

    .cube-shop-article-filter-title.disabled {
        color: gray;
    }

.cube-shop-article-filter-text {
}

.cube-shop-article-filter-text-option {
}

.cube-shop-article-filter-number {
}

.cube-shop-article-filter-number-box {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

    /* Chrome, Safari, Edge, Opera */
    .cube-shop-article-filter-number-box input::-webkit-outer-spin-button,
    .cube-shop-article-filter-number-box input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .cube-shop-article-filter-number-box input[type=number] {
        -moz-appearance: textfield;
    }

.cube-shop-article-filter-number-min {
    max-width: 4em;
    text-align: center;
}

.cube-shop-article-filter-number-separator {
}

.cube-shop-article-filter-number-max {
    max-width: 4em;
    text-align: center;
}

.cube-shop-article-filter-count {
    color: gray;
    font-size: smaller;
}

.cube-shop-main-area {
}

.cube-shop-breadcrumb {
}

.cube-shop-breadcrumb-box {
    display: inline-block;
}

.cube-shop-breadcrumb-item {
    display: inline-block;
    background-color: #cce3ff;
    border-radius: 5px;
    padding: 2px 8px 2px 8px;
    color: black !important;
    text-decoration: none !important;
    white-space: nowrap;
}

    .cube-shop-breadcrumb-item:hover {
        background-color: #99c7ff;
    }

.cube-shop-breadcrumb-item-separator {
    width: 10px;
    height: 10px;
    margin-left: 1px;
}

.cube-shop-category-breadcrumbs-button {
    display: inline-block;
    color: lightgray;
    padding: 0 6px 4px 6px;
    cursor: pointer;
}

.cube-shop-basket {
}

.cube-shop-category-list {
}

.cube-shop-category-list-row {
    margin-top: 2rem;
}

cube-shop-category-list-col {
}

.cube-shop-category-card {
}

.cube-shop-category-card-link {
}

.cube-shop-category-card-box {
}

.cube-shop-category-card-image {
}

.cube-shop-category-card-text {
}

.cube-shop-category-card-name{
}

.cube-shop-category-card-description {
}

.cube-shop-filter-breadcrumbs-item {
    display: inline-block;
    margin-top: 5px;
    background-color: #cce3ff;
    border-radius: 5px;
    padding: 2px 8px 2px 8px;
}

.cube-shop-filter-breadcrumbs-title {
}

.cube-shop-filter-breadcrumbs-value {
    font-weight: bold;
}

.cube-shop-filter-breadcrumbs-button {
    display: inline-block;
    margin-top: 5px;
    color: lightgray;
    padding: 0 6px 4px 6px;
    cursor: pointer;
}

.cube-shop-article-list-div {
}

.cube-shop-article-list-empty {
}

.cube-shop-article-list {
}

.cube-shop-article-list-item {
    cursor: pointer;
    padding: 1rem 0 1rem 1rem;
}

    .cube-shop-article-list-item:hover {
        background-color: #eee;
    }

.cube-shop-article-list-item-compact {
    padding: 0.2rem 0 0.2rem 1rem;
}

    .cube-shop-article-list-item-compact:hover {
    }

.cube-shop-article-box {
}

.cube-shop-article-details {
}

.cube-shop-article-images {
}

.cube-shop-article-image {
}

.cube-shop-article-image-name {
    margin-top: 5px;
}

.cube-shop-article-name {
}

.cube-shop-article-unit {
    background-image: url(/Content/Images/packing-icon.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 16px 16px;
    padding-left: 20px;
}

.cube-shop-article-number {
}

.cube-shop-article-description {
}

.cube-shop-article-attributes {
}

.cube-shop-article-attribute-title {
}

.cube-shop-article-attribute-value {
}

.cube-shop-article-col-number {
    padding-top: 0.2em;
    background-color: lightgray;
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.cube-shop-article-col-name {
    padding-top: 0.2em;
    background-color: lightgray;
}

.cube-shop-article-col-unit {
    padding-top: 0.2em;
    background-color: lightgray;
}

.cube-shop-article-col-price {
    padding-top: 0.2em;
    background-color: lightgray;
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

.cube-shop-article-col-details {
}

.cube-shop-article-col-order {
}


.cube-shop-article-stock {
    width: 1em;
    height: 1em;
    border-radius: 50%;
}

.cube-shop-article-stock-managed-available {
    background-color: green;
}

.cube-shop-article-stock-managed-soldout {
    background-color: red;
}

.cube-shop-article-stock-nostock-available {
    background-color: green;
}

.cube-shop-article-stock-nostock-soldout {
    background-color: orange;
}

.cube-shop-article-stock-externinstock-available {
    background-color: green;
}

.cube-shop-article-stock-externinstock-soldout {
    background-color: orange;
}

.cube-shop-article-stock-externoutofstock-available {
    background-color: green;
}

.cube-shop-article-stock-externoutofstock-soldout {
    background-color: red;
}

.cube-shop-article-stock-managed-available-text {
    color: green;
}

.cube-shop-article-stock-managed-soldout-text {
    color: red;
}

.cube-shop-article-stock-nostock-available-text {
    color: green;
}

.cube-shop-article-stock-nostock-soldout-text {
    color: orange;
}

.cube-shop-article-stock-externinstock-available-text {
    color: green;
}

.cube-shop-article-stock-externinstock-soldout-text {
    color: orange;
}

.cube-shop-article-stock-externoutofstock-available-text {
    color: green;
}

.cube-shop-article-stock-externoutofstock-soldout-text {
    color: red;
}

.cube-shop-article-details-link {
    border: 1px solid lightgray;
    border-radius: 0.35rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    cursor: pointer;
}

    .cube-shop-article-details-link:hover {
        color: white;
        background-color: rgb(108, 117, 125);
    }

.cube-shop-article-order-box {
}

.cube-shop-article-price-box {
    white-space: nowrap;
}

.cube-shop-article-price-alert {
}

.cube-shop-article-price {
}

.cube-shop-article-price-original {
}

.cube-shop-article-variations {
}

.cube-shop-article-order-box {
}

    .cube-shop-article-order-box .btn-increment {
    }

    .cube-shop-article-order-box .btn-decrement {
    }

.cube-shop-article-order-amount-field {
}

.cube-shop-article-order-button {
}

/* Order button in compact view */
.cube-shop-article-box .cube-shop-article-order-button {
    background: url('/Content/Images/basket-shop-icon.png');
    background-color: lightgrey;
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 2em;
}

    .cube-shop-article-box .cube-shop-article-order-button:hover {
        color: white;
        background-color: rgb(108, 117, 125);
    }

.cube-shop-article-order-confirm {
    display: none;
}

.cube-shop-pager {
    margin: 1em 0 1em 0;
    text-align: center;
}

.cube-shop-pager-button {
    margin: 0;
    min-width: 2em;
    height: 2em;
    border: 1px solid gray;
    border-radius: 4px;
    background-color: white;
    padding: 2px;
    color: gray;
    cursor: pointer;
}

    .cube-shop-pager-button.active {
        background-color: gray;
        color: white;
    }

.cube-shop-pager-space {
    display: inline;
    color: gray;
}

.cube-shop-summary {
}

.cube-shop-finish {
}

.cube-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3010;
    padding: 12px;
    background-color: lightgray;
    text-align: center;
    display: none;
}

.cube-cookie-banner-text {
}

.cube-cookie-banner-button {
    border: 1px solid gray;
    background-color: white;
    border-radius: 3px;
    margin-left: 10px;
}

    .cube-cookie-banner-button:hover {
        cursor: pointer;
    }

/* Mailform Content Item */

.cube-mailform-submit-button {
}

/* Newsletter Content Item */

.cube-newsletter {
    max-width: 360px;
}

.cube-newsletter-input {
}

.cube-newsletter-button {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.cube-newsletter-spinner {
    visibility: hidden;
}

.cube-newsletter-feedback {
    display: none;
    padding-left: 3px;
}

.cube-newsletter-feedback-success {
    color: green;
}

.cube-newsletter-feedback-error {
    color: red;
}

/* Pop-Up Banner */

.cube-popup-banner {
    display: none; /* set to 'flex' to show banner */
    position: fixed;
    z-index: 2010;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.33);
    /* center modal in view port */
    align-items: center;
    justify-content: center;
}

.cube-popup-banner-modal {
    /* center content in modal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

/* Bugfix für ekko-lightbox bei Verwendung von Bootstrap 4 */
.ekko-lightbox .modal-footer {
    display: block; /* überschreibt display: flex */
}

/*
    Tooltips in shop for availability and package units
*/
.tooltip > .tooltip-inner {
    min-width: 100px;
    max-width: 100%;
}