div.tabulate {
    position: relative;

    div.tabs {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        border: solid var(--taurusNetworkDarkBlue) 1px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: var(--borderRadius);

        > div {
            border-radius: var(--borderRadius);
            padding: 10px;
            flex: 1;
            text-align: center;
            cursor: pointer;

            &.active {
                background-color: #B9D8E5;
                font-weight: bold;
            }

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            user-select: none;

            svg {
                height: 15px;
            }
        }
    }

    div.tab {
        display: none;

        &.active {
            display: var(--displayMode, 'block');
        }
    }

    div.loading {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        z-index: 1;

        svg {
            height: 60%;
        }
    }

    &.loading {
        div.loading {
            display: flex;
            cursor: not-allowed;
        }

        div.tab, div.tabs > div {
            opacity: 0.5;
        }
    }
}