@import "components.css";

@keyframes highlight {
    from {
        background-color: var(--primary-color);
    }
}

::selection {
    background-color: var(--selection-color) !important;
}

::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.5rem;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--border-radius);
}

:target {
    animation: highlight 1000ms ease-out;
}

body {
    background-color: var(--background-color);
    color: var(--text-main);
}

* {
    font-family: var(--text-font-family);
    outline: none;
    line-height: normal;
}

p, div, span, label, a, footer, button, textarea, .k-textbox, th, td, mark {
    font-size: 16px;
}

mark {
    background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color) 50%);
    color: var(--text-main) !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    * {
        font-size: 14px;
    }

    p, span:not(.material-symbols-rounded), div, label, a, footer, button, textarea, .k-textbox, th, td, mark {
        font-size: 14px !important;
    }

    .btn-mobile-transparent {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--text-main) !important;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.k-window-title strong {
    font-size: 20px;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1440px;
}

@media (max-width: 1280px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

.px-6 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

.px-9 {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

h1, h2, h3, h4, h5, h6, strong {
    color: var(--text-main);
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

.blog-text h1,
.blog-text h2,
.blog-text h3,
.blog-text h4,
.blog-text h5,
.blog-text h6 {
    margin-bottom: revert;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--heading-font-family);
}

#search-autocomplete mark {
    font-size: inherit !important;
    font-family: var(--heading-font-family);
}

h1, .font-32 {
    font-size: 32px;
}

h2, .font-24 {
    font-size: 24px;
}

h3, .font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-18 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

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

.font-48 {
    font-size: 48px;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.btn {
    border-radius: 4px;
    width: fit-content;
}

body .btn-primary,
body .btn-primary:disabled,
body .btn-primary:active,
body .btn-primary:focus {
    background: var(--btn-primary-color) !important;
    border-color: var(--btn-primary-color) !important;
    color: var(--btn-primary-color-text) !important;
}

.btn-primary:hover {
    background: var(--btn-primary-color-hover) !important;
    border-color: var(--btn-primary-color-hover) !important;
    color: var(--btn-primary-color-text-hover) !important;
}

.btn-outline-primary,
.btn-outline-primary span {
    background: var(--btn-outline-primary-color) !important;
    border-color: var(--primary-dark) !important;
    color: var(--btn-outline-primary-color-text) !important;
    transition: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:hover span {
    background: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: var(--btn-outline-primary-color-text-hover) !important;
    transition: none;
}

.c-pointer:hover {
    cursor: pointer;
}

.btn-secondary,
.btn-secondary:disabled,
.btn-secondary:active,
.btn-secondary:focus {
    background: var(--btn-secondary-color) !important;
    border-color: var(--btn-secondary-color) !important;
    color: var(--btn-secondary-color-text) !important;
}

.btn-secondary:hover {
    background: var(--btn-secondary-color-hover) !important;
    border-color: var(--btn-secondary-color-hover) !important;
    color: var(--btn-secondary-color-text-hover) !important;
}

.btn-outline-secondary {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color-overlay-text) !important;
}

.btn-outline-secondary:hover {
    background: var(--secondary-color-hover) !important;
    border-color: var(--secondary-color-hover) !important;
    color: var(--secondary-color-overlay-text) !important;
}

.btn-tertiary,
.btn-tertiary:disabled,
.btn-tertiary:active,
.btn-tertiary:focus {
    background: var(--btn-tertiary-color) !important;
    border-color: var(--btn-tertiary-color) !important;
    color: var(--btn-tertiary-color-text) !important;
}

.btn-tertiary:hover {
    background: var(--btn-tertiary-color-hover) !important;
    border-color: var(--btn-tertiary-color) !important;
    color: var(--btn-tertiary-color-text-hover) !important;
}

.btn-outline-tertiary {
    background: var(--btn-tertiary-color) !important;
    border-color: var(--btn-tertiary-color) !important;
    color: var(--btn-tertiary-color-text) !important;
}

.btn-outline-tertiary:hover {
    background: var(--btn-tertiary-color-hover) !important;
    border-color: var(--btn-tertiary-color-hover) !important;
    color: var(--btn-tertiary-color-text-hover) !important;
}

.form-label-small {
    font-size: 12px;
    margin-bottom: .5rem !important;
}

.no-underline {
    text-decoration: unset !important;
}

.no-underline:hover,
.text-decoration-none:hover {
    text-decoration: underline !important;
}

.text-decoration-underline:hover {
    text-decoration: none !important;
}

.no-wrap {
    white-space: nowrap;
}

.outline-none:focus,
.outline-none:focus {
    outline: none !important;
    box-shadow: unset;
    border: 1px solid lightgray;
}

.ico {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.border {
    border: 1px solid var(--border-main) !important;
}

.border-0 {
    border: 0 !important;
}

.border-top {
    border-top: 1px solid var(--border-main) !important;
}

.border-top-0 {
    border-top: 0 !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-main) !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-left {
    border-left: 1px solid var(--border-main) !important;
}

.border-left-0 {
    border-left: 0 !important;
}

.border-right {
    border-right: 1px solid var(--border-main) !important;
}

.border-right-0 {
    border-right: 0 !important;
}

.border-horizontal {
    border-top: 1px solid var(--border-main) !important;
    border-bottom: 1px solid var(--border-main) !important;
}

.border-horizontal-0 {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.border-vertical {
    border-left: 1px solid var(--border-main) !important;
    border-right: 1px solid var(--border-main) !important;
}

.border-vertical-0 {
    border-left: 0 !important;
    border-right: 0 !important;
}

.border-primary {
    border-color: var(--border-main) !important;
}

.border-secondary {
    border-color: var(--border-secondary) !important;
}

.border-tertiary {
    border-color: var(--border-tertiary) !important;
}

.border-light {
    border-color: var(--border-main) !important;
}

.border-dark {
    border-color: var(--border-secondary) !important;
}

.btn, textarea, .form-control {
    box-shadow: none !important;
}

.validation-message {
    color: red;
    margin-top: .25rem;
}

.lh-1 {
    line-height: 0.25rem
}

.lh-2 {
    line-height: 0.75rem
}

.lh-3 {
    line-height: 1.25rem
}

.lh-4 {
    line-height: 2rem
}

.lh-5 {
    line-height: 3rem
}

/* Mobile */
@media (max-width: 576px) {
    .basket-intermedtext {
        width: calc(100vw - 90px);
    }

    .k-dialog-wrapper {
        width: 100vw;
    }

    .k-window {
        width: 100%;
        max-height: 100vh;
    }

    #ConditionsTable2 td.divider, .ArticleFacetList td {
        display: block;
    }

    .orderDetails {
        border-width: 0;
    }

    .orderDetails td, .orderDetails th {
        padding: 10px 1px 10px 1px !important;
    }

    .border-sm-0 {
        border: 0;
    }
}

.PosTable {
    width: auto !important;
}

.PosTable td {
    /*line-height: 21px;*/
    padding: 0 7px 0 0 !important;
    border: 0 !important;
    white-space: nowrap;
}

.PosTable tr:hover {
    background-color: transparent !important;
}

.absolute-centered {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background: var(--btn-tertiary-color);
    top: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
    z-index: 1;
}

.navigation img {
    height: 21px;
}

.ArtImg {
    max-width: 60px;
    max-height: 60px;
    cursor: pointer;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    11%, 90% {
        opacity: 1;
    }
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 999999;
}

.expand-container {
    border: var(--expand-container-border-width);
}

.expand-container span {
    font-size: 13px !important;
}

.loginWindow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 468px;
    min-height: 410px;
}

@media (max-width: 767px) {
    .loginWindow {
        height: 100vh;
        min-height: 100vh;
        width: 100vw;
        max-width: 100vw;
    }

    .sticky-div .btn {
        width: 100% !important;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }
}

.k-input-inner {
    width: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    color: inherit !important;
    background: none !important;
    font: inherit !important;
    flex: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-appearance: none !important;
}

.k-window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /*padding-bottom: 4px !important;*/
}

.k-window-content {
    padding-block: 0 !important;
}

.k-window.basket-selection .basket-selection-container {
    max-height: 30rem;
}

.k-window.basket-selection .basket-selection-new-basket {
    position: sticky;
    bottom: 0;
    background: var(--background-color);
}

.k-window.basket-selection .k-window-titlebar {
    background: var(--primary-color);
}

.k-window:not(.k-spez-window):not(.dispo-window) .k-window-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.k-window-content form {
    width: 100%;
}

.k-input-spinner {
    border-left: 1px solid var(--border-main)
}

.alert {
    margin-bottom: 0 !important;
}

.alert-secondary {
    background-color: var(--alert-secondary-bg-color);
    border-color: var(--alert-secondary-border-color);
    color: var(--alert-secondary-text-color);
}

.alert-dark {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

.alert p {
    margin-bottom: 0;
}

.intermedTextWindow {
    width: 100%;
    max-width: 800px;
}

.ConfiguratorWindow {
    width: 100%;
    max-width: 1190px;
    max-height: calc(100vh - 140px);
}

.ConfiguratorWindow .k-window-titlebar {
    padding: 14px 24px;
}

.ConfiguratorWindow .k-window-content, .ConfiguratorWindow .k-window-content:last-child {
    padding: 0 !important;
}


.article-image-tn:hover, .article-image-tn.selected {
    outline: 2px solid var(--border-main);
    outline-offset: 4px;
}

.art-price {
    color: var(--primary-text-color);
    font-size: 24px;
}

.filterbutton {
    border: 1px solid gray;
    cursor: pointer;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.btn:disabled:hover {
    cursor: default;
}


.text-general-link {
    color: #000;
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    letter-spacing: 0.5px;
}

.translate-y-1 {
    transform: translateY(1px);
}

.translate-y-2 {
    transform: translateY(2px);
}

.translate-y-n1 {
    transform: translateY(-1px);
}

.translate-y-n2 {
    transform: translateY(-2px);
}

.alert-success {
    background: #e0f3e1 !important;
    border: 1px dashed #6aaa6d !important;
}

.primary-border-radius {
    border-radius: var(--border-radius);
}

.register-success {
    background: #E0F3E1;
    color: black; 
    border: 1px dashed #6aaa6d;
}

.text-highlight {
    color: var(--text-secondary);
}

/* CENTER */

/* non-sortable headers */
.k-grid th.center-me {
    text-align: center;
}

/* sortable headers */
th.center-me .k-cell-inner > .k-link {
    justify-content: center;
}

/* RIGHT */

/* non-sortable headers */
.k-grid th.align-right {
    text-align: right;
}

/* sortable headers */
th.align-right .k-cell-inner > .k-link {
    justify-content: right;
}

/* unbound and non-filterable columns */
.k-grid-header th.align-right.right-padding {
    padding-right: 12px;
}

/* filterable grid, sortable non-filterable columns */
.k-grid-header th.align-right.right-padding > .k-cell-inner {
    margin-right: 0;
}

.k-maskedtextbox, .k-input {
    border: 1px solid var(--border-main) !important;
    border-radius: 4px !important;
    outline: none !important;
    box-shadow: none !important;
}

.k-input-inner {
    padding: .5rem 1rem !important;
}

.k-multiselect, .k-datepicker {
    padding: 0.125rem 0;
    background: var(--background-color) !important;
}

.k-maskedtextbox {
    width: 100% !important;
    padding: .5rem 1rem !important;
    padding-right: 1.75rem !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 4px !important;
    background: white !important;
}

.k-maskedtextbox .k-input-inner {
    padding: 0 !important;
}

.k-maskedtextbox.k-input-solid:not(.bucher-input) {
    border: 1px solid var(--border-main) !important;
    border-radius: 4px !important;
}

.k-multiselect:has(*:disabled),
.k-maskedtextbox:has(*:disabled) {
    background: var(--input-disabled-bg-color) !important;
}

.IndicatorStateIcon {
    height: 25px;
}

.k-listview {
    background-color: var(--background-color);
}

.toast, .toast-body p, .toast-body h5 {
    color: var(--text-main) !important;
    background-color: var(--background-color) !important;
}

.k-grid:not(.bucher-basket) th, .k-grid:not(.bucher-basket) td {
    border-top: 1px solid var(--border-main) !important;
    border-left: 1px solid var(--border-main) !important;
}

.k-grid:not(.bucher-basket) th:last-of-type,
.k-grid:not(.bucher-basket) td:last-of-type {
    border-right: 1px solid var(--border-main) !important;
}

.k-grid:not(.bucher-basket) tr:last-of-type td {
    border-bottom: 1px solid var(--border-main) !important;
}

.k-grid-header tr {
    background: var(--light-gray);
}

.company-manage-user-grid .k-grid-header {
    padding-right: 0 !important;
}

.company-manage-user-grid .k-grid-content {
    overflow: hidden;
}

.bucher-basket {
    border: 0;
}

.bucher-basket .k-grid {
    border-color: var(--border-main);
}

.bucher-basket .price-cell1 {
    width: 90px;
}

.bucher-basket .price-cell2 {
    width: 120px;
}

.bucher-basket tr.my-no-drag-class .k-drag-cell {
    pointer-events: none;
}

.bucher-basket tr.my-no-drag-class .k-drag-cell .k-icon {
    display: none;
}

.basket-positions {
    background: rgba(0, 0, 0, 0.1);
}
.basket-comnorm-positions {
    background: rgba(0, 0, 0, 0.1);
    grid-template-columns: 0.75fr repeat(3, 2fr);
}
.basket-error-positions {
    grid-template-columns: 0.29fr repeat(2, auto);
}

.grid-no-scroll .k-grid-content {
    overflow-y: auto;
}

.grid-no-scroll .k-grid-header,
.grid-no-scroll .k-grid-footer {
    padding-right: 0; /* version 2.26 and older requires !important here */
}

.documents-grid tr td:nth-child(4),
.documents-grid tr td:nth-child(5) {
    text-overflow: ellipsis;
    overflow: hidden;
    /*    white-space: nowrap;*/
}

.documents-grid .expand-icon {
    transition: transform 0.3s ease;
}

.documents-grid .expand-icon.row-expanded {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.line-20 {
    line-height: 20px;
}

.no-decoration {
    text-decoration: unset !important;
}

.no-decoration:hover {
    text-decoration: unset !important;
}

.text-main {
    color: var(--text-main);
}

.text-main-disabled {
    color: var(--text-main-disabled);
    font-size: 14px;
}

.border-main {
    border: 1px solid var(--border-main);
}

.k-scrollview {
    background-color: transparent;
}

.OnlyMAVisivle {
    color: orangered;
}

.w-80 {
    width: 80%;
}

.conditions-window {
    max-height: 80dvh;
}

.conditions-window .d-grid {
    grid-template-columns: 1fr 1fr;
}

.menu-bg-color {
    background-color: var(--menu-bg-color) !important;
}

.profile-image-div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
    background-color: white;
    overflow: hidden;
}

.profile-image {
    object-fit: cover;
    object-position: center;
    width: 65%;
}

/*.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    background-color: var(--btn-primary-border-color-hover);
    border-color: var(--btn-primary-border-color-hover);
}*/

.sticky-div {
    position: fixed;
    bottom: 0;
    background-color: var(--background-color);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: position 0.3s ease;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.evil-saldocitem {
    background-color: #fcffe3 !important;
}

.menu-item > .submenu-items {
    box-shadow: 0 50px 91px 0 rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 50px 91px 0 rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 50px 91px 0 rgba(0, 0, 0, 0.35);
}

.modal-backdrop.show {
    z-index: 9 !important; /* Fix for the glowing effects when opening the profile menu / modal */
}

.product-families .last-item {
    border-right: 0 !important;
}

@media screen and (min-width: 768px) {
    #header.collapsed:not(.showHierarchy) ~ #hierarchy-menu {
        max-height: 0;
        overflow: hidden;
    }
}

.inside-close-icon {
    z-index: 1;
    right: 10px;
    top: 20%;
}