:root {
    --product-area-breadcrumb-height: 0vh;
}

@media only screen and (min-width: 1280px) {
    :root {
        --product-area-breadcrumb-height: 64px;
    }
}

@media only screen and (max-width: 1279.8px) {
    .product-breadcrumb {
        visibility: hidden;
    }
}

wi-footer {
    position: fixed;
    bottom: 0;
    height: var(--wi-footer-height);
}

.product-info-colors {
    background: var(--mud-wi-palette-accent-drawer-background);
    color: var(--mud-wi-palette-accent-drawer-text);
}

    .product-info-colors::-webkit-scrollbar-corner {
        background: var(--mud-wi-palette-accent-drawer-background);
    }

.product-breadcrumb {
    height: var(--product-area-breadcrumb-height);
}

.product-main-area {
    padding-left: 16px;
    padding-bottom: var(--mud-appbar-height);
    display: flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    height: calc(calc(100vh - var(--mud-appbar-height)) - var(--wi-footer-height) - var(--product-area-breadcrumb-height));
    overflow: scroll;
}

.left-menu-area {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    height: calc(100vh - var(--mud-appbar-height) - var(--product-area-breadcrumb-height));
}

.main-area {
    padding-left: 16px;
    /*padding-bottom: var(--mud-appbar-height);*/
    display: flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    height: calc(100vh - var(--mud-appbar-height) - var(--product-area-breadcrumb-height));
}

.main-area-with-footer {
}

.main-header {
    margin-bottom: 16px;
}

.main-content {
    overflow: scroll;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.main-footer {
    height: var(--wi-footer-height);
}

.productcalc-main-area {
    margin-left: 16px;
    left: 16px;
    padding-bottom: var(--mud-appbar-height);
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    max-height: calc(calc(100vh - var(--mud-appbar-height) - var(--product-area-breadcrumb-height)) - var(--mud-appbar-height) - 16px); /* AppBar und Footer */
    overflow: scroll;
}

.productcalc-main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-left: 16px;
    width: calc(calc(100% - calc(max(35%, 350px) + 16px)));
    height: var(--mud-appbar-height);
}

.productInfoContainer {
    position: fixed;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--mud-appbar-height) - var(--product-area-breadcrumb-height));
    flex-flow: row;
}

    .productInfoContainer .mud-container {
        padding-left: 0;
        padding-right: 0;
    }

.product-info-area {
    position: absolute;
    height: 100%;
    width: 100%;
}

.product-info-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    height: calc(100% - var(--mud-appbar-height));
    top: var(--mud-appbar-height);
    overflow: scroll;
}

.product-propertygroups-area {
    Position: inherit;
    left: 0;
    top: 0;
    max-height: calc(100vh - var(--mud-appbar-height) - var(--product-area-breadcrumb-height));
}

.int-value-field {
    max-width: 400px;
}

.numvaluepicker-valuelist-picker {
    width: 312px;
    height: 300px;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}

.protected {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.mud-icon-size-large {
    font-size: 3rem;
}
.mud-icon-size-medium {
    font-size: 2rem;
}
.mud-icon-size-small {
    font-size: 1.5rem;
}

.no-scroll-table .mud-table-container {
    overflow: hidden;
}

.order-info-overlay {
    position: fixed;
    width: 100%;
    left: 0px;
    height: calc(100% - var(--mud-appbar-height));
    top: var(--mud-appbar-height);
}

.product-info-icon-flipped {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.product-configurator-drawer div.mud-input-slot.mud-input-root {
    color: white;
}

.product-configurator-drawer .mud-input > input.mud-input-root {
    color: white;
}

.product-configurator-drawer .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: white;
}

.product-configurator-drawer .mud-table-root .mud-table-body .mud-table-cell {
    color: white;
    background-color: var(--mud-wi-palette-accent-drawer-background);
}

.product-configurator-drawer .mud-table-root .mud-table-head .mud-table-cell {
    color: white;
    background-color: var(--mud-wi-palette-accent-drawer-background);
}