﻿.content-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.toolbar {
    padding: 0.5rem 0.5rem;
    margin-bottom: 1rem;
}

    .toolbar .custom-item {
        display: flex;
        height: 100%;
        margin: 0 0.5rem;
    }
    
    .toolbar .title {
        font-size: var(--dxbl-toolbar-title-font-size);
        line-height: var(--dxbl-toolbar-title-line-height);
        font-weight: var(--dxbl-toolbar-title-font-weight);
        margin: auto 0;
    }

.request-list-root {
    flex-grow: 1;
    height: 90%;
}

.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;
}

    .card:not(.toolbar) {
        padding: 1.5rem;
        margin-bottom: 0.25rem;
    }

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.request-list {
    max-height: 100%;
    border-radius: 0.25rem;
}

.add-icon {
    mask-image: url("/images/icons/add.svg");
}

.column-chooser-icon {
    mask-image: url("/images/icons/column-chooser.svg");
}

.export-icon {
    mask-image: url("/images/icons/arrow-export-up.svg");
}

.search-textbox-item {
    max-width: 12.5rem;
}

.pinned-icon {
    mask-image: url("/images/icons/lock-closed.svg");
}

.unpinned-icon {
    mask-image: url("/images/icons/lock-open.svg");
}

.close-icon {
    mask-image: url("/images/icons/dismiss.svg");
}

.standalone-btn {
    --dxbl-btn-padding-x: 0.5em;
}

.request-list-drawer {
    --dxbl-drawer-panel-body-padding-x: 1.5rem;
    --dxbl-drawer-panel-header-padding-x: 1.5rem;
    --dxbl-drawer-separator-border-style: none;
}

.request-details-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
}

.request-details-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.small-size .request-details {
    width: 17.25rem;
}

.medium-size .request-details {
    width: 20.625rem;
}

.large-size .request-details {
    width: 24rem;
}

.sub-item {
    font-size: 0.8em;
}
