/* BRAND */
.app-brand {
    align-items: center;
    color: inherit !important;
    display: flex;
    font-size: 1.33rem;
    gap: 0.75rem;
    margin-right: var(--bs-navbar-brand-margin-end);
    text-decoration: none;
    white-space: nowrap;
}

.app-brand > .pic {
    width: 40px;
    height: 40px;
}

/* BUTTON */
.btn-circle {
    width: 42px;
    height: 42px;
    line-height: 1;
    border-radius: 50%;
}

.btn-circle.btn-lg {
    width: 54px;
    height: 54px;
}

/* CDK_DRAG */
.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(var(--app-gray_1000), 0.2),
        0 8px 10px 1px rgba(var(--app-gray_1000), 0.14),
        0 3px 14px 2px rgba(var(--app-gray_1000), 0.12);
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

*.cdk-drop-list-dragging *:not(.cdk-drag-placeholder) {
    transform: translateZ(0);
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
    z-index: 9000 !important;
}

/* TABLE */
app-table tr:not(.hidden, .has-row-expand) {
    height: 55px; /* Works like min-height */
}

app-table th[sortable] {
    cursor: pointer;
    user-select: none;
}

app-table th[sortable]::before {
    content: '\F3CA';
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    margin-right: 4px;
    vertical-align: -0.125em;
}

app-table th[sortable].desc::before,
app-table th[sortable].asc::before {
    content: '\F57B';
}

app-table th[sortable].desc::before {
    content: '\F575';
}

/* CHART */
.ct-grid, .ct-label {
    stroke: rgba(var(--app-gray_1000), 0.5);
    fill: rgba(var(--app-gray_1000), 0.5);
    color: rgba(var(--app-gray_1000), 0.5);
}

/* TABS */
.nav-tabs {
    border-bottom: 1px solid rgba(var(--app-gray_100), 0.75);
}

.nav-tabs .nav-link {
    border: none;
    color: rgba(var(--app-gray_400), 1);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background-color: #0000;
    border: none;
    border-bottom: 2px solid rgba(var(--app-gray_1000), 1);
    color: rgba(var(--app-gray_1000), 1);
    font-weight: 700;
}