:host {
    display: block;
}

:host ::ng-deep .ngb-highlight {
    background-color: #ff0;
}

:host ::ng-deep th {
    white-space: nowrap;
}

.table {
    margin-bottom: 0;
    vertical-align: middle;
}

.animated {
    animation: forwards ease-out 300ms FadeIn;
    filter: blur(2px);
    left: -5px;
    opacity: 0;
    position: relative;
}

.animated:nth-child(1) { animation-delay: 20ms }
.animated:nth-child(2) { animation-delay: 40ms }
.animated:nth-child(3) { animation-delay: 60ms }
.animated:nth-child(4) { animation-delay: 80ms }
.animated:nth-child(5) { animation-delay: 100ms }
.animated:nth-child(6) { animation-delay: 120ms }
.animated:nth-child(7) { animation-delay: 140ms }
.animated:nth-child(8) { animation-delay: 160ms }
.animated:nth-child(9) { animation-delay: 180ms }
.animated:nth-child(10) { animation-delay: 200ms }
.animated:nth-child(11) { animation-delay: 220ms }
.animated:nth-child(12) { animation-delay: 240ms }
.animated:nth-child(13) { animation-delay: 260ms }
.animated:nth-child(14) { animation-delay: 280ms }
.animated:nth-child(15) { animation-delay: 300ms }
.animated:nth-child(16) { animation-delay: 320ms }
.animated:nth-child(17) { animation-delay: 340ms }
.animated:nth-child(18) { animation-delay: 360ms }
.animated:nth-child(19) { animation-delay: 380ms }
.animated:nth-child(20) { animation-delay: 400ms }
.animated:nth-child(21) { animation-delay: 420ms }
.animated:nth-child(22) { animation-delay: 440ms }
.animated:nth-child(23) { animation-delay: 460ms }
.animated:nth-child(24) { animation-delay: 480ms }
.animated:nth-child(25) { animation-delay: 500ms }
.animated:nth-child(26) { animation-delay: 520ms }
.animated:nth-child(27) { animation-delay: 540ms }
.animated:nth-child(28) { animation-delay: 560ms }
.animated:nth-child(29) { animation-delay: 580ms }
.animated:nth-child(30) { animation-delay: 600ms }
.animated:nth-child(31) { animation-delay: 620ms }
.animated:nth-child(32) { animation-delay: 640ms }
.animated:nth-child(33) { animation-delay: 660ms }
.animated:nth-child(34) { animation-delay: 680ms }
.animated:nth-child(35) { animation-delay: 700ms }
.animated:nth-child(36) { animation-delay: 720ms }
.animated:nth-child(37) { animation-delay: 740ms }
.animated:nth-child(38) { animation-delay: 760ms }
.animated:nth-child(39) { animation-delay: 780ms }
.animated:nth-child(40) { animation-delay: 800ms }
.animated:nth-child(41) { animation-delay: 820ms }
.animated:nth-child(42) { animation-delay: 840ms }
.animated:nth-child(43) { animation-delay: 860ms }
.animated:nth-child(44) { animation-delay: 880ms }
.animated:nth-child(45) { animation-delay: 900ms }
.animated:nth-child(46) { animation-delay: 920ms }
.animated:nth-child(47) { animation-delay: 940ms }
.animated:nth-child(48) { animation-delay: 960ms }
.animated:nth-child(49) { animation-delay: 980ms }
.animated:nth-child(50) { animation-delay: 1000ms }

@keyframes FadeIn {
    from {
        filter: blur(2px);
        left: -5px;
        opacity: 0;
    }
    to {
        filter: blur(0px);
        left: 0;
        opacity: 1;
    }
}

.row-expand {
    background: #0000 !important;
    border: none;
    padding: 0 !important;
}

.collapse-toggle::after {
    content: '\F283';
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
}

.collapse-toggle[aria-expanded="true"]::after {
    content: '\F27D';
}

.collapse-toggle.collapsed::after {
    content: '\F283';
}

tfoot {
    background: rgba(var(--app-gray_800), 1);
    color: rgba(var(--app-gray_0), 1)
}

.sticky-head {
    background: rgba(var(--app-gray_0), 1);
    box-shadow: 0 2px 16px 0 #0002;
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 650px) {

    thead {
        display: none;
    }
    
    :host ::ng-deep td {
        display: grid;
    }

    :host ::ng-deep td::before {
        content: attr(data-label);
        font-weight: bold;
    }
}

@media (min-width: 650px) {

    :host ::ng-deep .table > thead > tr > th:first-child,
    :host ::ng-deep .table > tbody > tr > td:not(.row-expand):first-child {
        padding-left: 1.5rem !important;
    }

    :host ::ng-deep .table > thead > tr > th:last-child,
    :host ::ng-deep .table > tbody > tr > td:not(.row-expand):last-child {
        padding-right: 1.5rem !important;
    }
}
