.tabcontainer {
    border: 2px solid var(--main-color);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    background: #222222;
    border-radius: var(--border-radius);
    overflow: hidden;

    .tabmenu {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        background: var(--panel-color);
        border-bottom: 2px solid var(--main-color);

        .item {
            height: 100%;
            padding: 0px 15px;
            display: flex;
            align-items: center;

            background: var(--main-secondary-color);
            border-right: 2px solid var(--main-color);

            user-select: none;
            transition-duration: .2s;
            cursor: pointer;

            &:hover {
                background: var(--main-hover-color);
            }
        }

        .item.active,
        .item.active :hover {
            background: var(--main-color);
            cursor: inherit;
        }
    }

    .tabpages {
        position: absolute;
        top: 32px;
        bottom: 0px;
        left: 0px;
        right: 0px;

        .item {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;

            transition-duration: .2s;
            display: none;
        }

        .item.padding {
            padding: 10px;
        }

        .item.active {
            display: inherit;
        }
    }
}