:root {
    --tpl-menu-w: 400px;
    --tpl-menu-color: rgba(255,255,255,0.8);
}

/* ------- LAYOUTS -------- */

.hbox {
    display: flex;
    flex-direction: row;

    overflow: auto;
}

.vbox {
    display: flex;
    flex-direction: column;

    overflow: auto;
}

/* ------------------------- */

.block-templating {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
}

.block-templating.showboxes {
    width: 100%;
    height: 100%;

    background-color: white;
}

.block-templating.showboxes .hbox {
    border: 1px solid black;
    /* background-image: url('images/hbox.png'); */
    background-color: rgba(100,100,255, 0.2);
    background-image: url('images/hbox.png');
    background-position: center;
    background-repeat: no-repeat;
    
    box-shadow: 0px 0px 2px black inset;
}

.block-templating.showboxes .vbox {
    border: 1px solid black;
    /* background-color: rgba(100,100,255, 0.4) */
    background-color: rgba(100,100,255, 0.2);
    
    background-image: url('images/vbox.png');
    background-position: center;
    background-repeat: no-repeat;
    
    box-shadow: 0px 0px 2px black inset;
}

.block-templating.showboxes .hbox.selected,
.block-templating.showboxes .vbox.selected{
    background-color: red;
}

.block-templating.showboxes .vbox:hover {
    background-color: rgba(100,100,255);
}

.block-templating.showboxes .tgui-module {
    cursor: pointer;
}

.block-templating.showboxes .tgui-module.selected {
    background-color: green;
}

.block-templating.showboxes .tgui-module:hover {
    background-color: green;
}

.block-templating .maincontent {
    width: 100%;
}

.block-templating .menu {
    width: var(--tpl-menu-w);
    height: 100%;
    
    /* position: absolute; */
    /* right: 0; */
    
    color: black;
    background-color: var(--tpl-menu-color);
    backdrop-filter: blur(5px);
    
    box-shadow: 1px 0 10px black;
    box-sizing: border-box;
    
    overflow: auto;
    
    z-index: 10000000; /* check if used */
}

.block-templating .menu .tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    height: 30px;
}

.block-templating .menu .tab-item {
    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    
    width: 100%;
    height: 100%;

    cursor: pointer;
    
    background-color: #333;
}

.block-templating .menu .tab-item.selected {
    color: black;
    background-color: transparent;
}

.block-templating .menu .tab-content {
    display: none;

    width: 100%;
    height: 100%;

    flex-direction: column;
    
    padding: 15px;
    box-sizing: border-box;
}

.block-templating .menu .tab-content.selected {
    display: flex;
}

.block-templating .menu .maincfg {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}

.block-templating .menu .tab-content > label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 5 0;
}

.block-templating .menu .tab-content[data-tab="dyncfg"] > * {
    display: flex;
    flex-direction: column
}

.block-templating .menu .tab-content[data-tab="dyncfg"] label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.block-templating .menu .tab-content[data-tab="dyncfg"] label > *:nth-child(1) {
    width: 150px;
}

.block-templating .menu .tab-content[data-tab="dyncfg"] label > *:nth-child(2) {
    width: 100%;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}