html, body {
    height: 100%;
}

body {
    margin: 0;
    letter-spacing: var(--DS-letter-spacing-body-1);
    background-color: var(--DS-color-surface-neutral-subdued-rest);
}

*, ::after, ::before {
    box-sizing: border-box
}

.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    padding: 0.625rem;
    box-shadow: 0 0.125rem 0.25rem 0 #00000024, 0 0 0.125rem 0 #0000001F;
    z-index: 103;
    background-color: var(--DS-color-surface-neutral-default-rest);
}

    .header .header-content {
        display: flex;
    }

.main {
    flex: 1;
   
    overflow: auto;
}

    .main .main-content {
        height: 100%;
    }


.block-content {
    border-radius: 0.5rem;
    flex-grow: 0;
    margin: auto;
    max-width: 30rem;
    padding: 1.5rem;
    width: auto;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    background-color: var(--DS-color-surface-neutral-default-rest);
    background-clip: border-box;
    border: var(--DS-border-radius-10) solid var(--DS-color-border-neutral-default-rest);
    border-radius: 0.25rem;
}


.toolbar .custom-item {
    display: flex;
    height: 100%;
    margin: 0 0.5rem;
}

.toolbar .customer-item {
    display: flex;
    height: 100%;
    margin: 0 0.5rem;
    font-size: medium;
}

.toolbar .title {
    color: var(--DS-color-content-neutral-default-rest);
    font-family: var(--DS-font-family-sans-serif);
    font-weight: 400;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0 0.5rem;
    height: 100%;
}

.small-size .toolbar .title {
    font-size: var(--DS-font-size-subtitle-2);
    line-height: var(--DS-line-height-subtitle-2);
}

.medium-size .toolbar .title {
    font-size: var(--DS-font-size-subtitle-1);
    line-height: var(--DS-line-height-subtitle-1);
}

.large-size .toolbar .title {
    font-size: var(--DS-font-size-title-3);
    line-height: var(--DS-line-height-title-3);
}

.dxbl-drawer > .dxbl-drawer-panel .dxbl-drawer-footer {
    justify-content:left;
}
    
.wt-footer {
    
}

.wt-sidebar {
    
    flex: 1;
    width: 100%;
}


.wt-body {
    padding:4px;
}

.wt-logo {
    padding: 4px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
   
    width: 100%;
}

.wt-breadcrumbs {
    position: relative;
    height: 2.5rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-left: 4px;
   
}

.wt-breadcrumbs .items {
display: flex;
align-items: center;

}

.wt-breadcrumbs .items > * {
    display: inline-block;
    opacity: 0.6;
    margin-right: 0.8rem;
    white-space: nowrap;
}

.wt-breadcrumbs .items > a {
    color: inherit;
    text-decoration: none;
}

.wt-breadcrumbs .items > span {
    cursor: default;
}

.wt-breadcrumbs .items > span.separator {
border-style: solid;
border-width: 5px !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
border-color: currentColor;
width: 0;
height: 0;
margin-top: 0.1rem;
margin-right: 0.5rem;
}

.wt-breadcrumbs .items > span:last-child {
display: none;
}


/* Icons */
.icon {
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-position: center center;
    background-color: currentColor;
    opacity: var( --dxbl-icon-opacity);
}

.small-size .medium-icon {
    width: 1rem;
    height: 1rem;
}

.medium-size .medium-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.large-size .medium-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.hamburger-icon {
    mask-image: url("../images/icons/navigation.svg");
    -webkit-mask-image: url("../images/icons/navigation.svg");
}

.user-icon {
    mask-image: url("../images/icons/person.svg");
    -webkit-mask-image: url("../images/icons/person.svg");
}

.sign-out-icon {
    mask-image: url("../images/icons/sign-out.svg");
    -webkit-mask-image: url("../images/icons/sign-out.svg");
}

.manage-password-icon {
    mask-image: url("../images/icons/manage-password-fluent.svg");
    -webkit-mask-image: url("../images/icons/manage-password-fluent.svg");
}

.settings-icon {
    mask-image: url("../images/icons/settings-fluent.svg");
    -webkit-mask-image: url("../images/icons/settings-fluent.svg");
}

.users-icon {
    mask-image: url("../images/icons/user-fluent.svg");
    -webkit-mask-image: url("../images/icons/user-fluent.svg");
}

.auftraege-icon {
    mask-image: url("../images/icons/data-area.svg");
    -webkit-mask-image: url("../images/icons/data-area.svg");
}

.home-icon {
    mask-image: url("../images/icons/home.svg");
    -webkit-mask-image: url("../images/icons/home.svg");
}

.add-icon {
    mask-image: url("../images/icons/add.svg");
    -webkit-mask-image: url("../images/icons/add.svg");
}

.edit-icon {
    mask-image: url("../images/icons/edit.svg");
    -webkit-mask-image: url("../images/icons/edit.svg");
}

.delete-icon {
    mask-image: url("../images/icons/dismiss.svg");
    -webkit-mask-image: url("../images/icons/dismiss.svg");
}

.zuschlag-icon {
    mask-image: url("../images/icons/arrow-export-up.svg");
    -webkit-mask-image: url("../images/icons/arrow-export-up.svg");
}

.profile-icon {
    mask-image: url("../images/icons/data-usage.svg");
    -webkit-mask-image: url("../images/icons/data-usage.svg");
}

.excel-export-icon {
    mask-image: url("../images/icons/insert-column-break.svg");
    -webkit-mask-image: url("../images/icons/insert-column-break.svg");
}