:root {
    --color1: linear-gradient( 90deg, rgb(0, 142, 208,0.3) 0%, rgb(0, 142, 208,0.1) 100%);
    --color2: linear-gradient( 90deg, rgb(0, 142, 208,0.7) 0%, rgb(0, 142, 208,0.3) 100%);
    --color3: linear-gradient( 90deg, rgb(0, 142, 208,0.7) 0%, rgb(0, 142, 208,0.3) 100%);
    --color1Template: #e3dbff61;
    --color2Template: linear-gradient( 90deg, #e3dbff 0%, #e3dbffa8 100%);
    --color3Template: linear-gradient( 90deg, #b49eff 0%, #e3dbffa8 100%);
    --color1NotVisible: rgb(125,125,125,0.5);
    --color2NotVisible: rgb(125,125,125,0.75);
    --color3NotVisible: rgb(125,125,125,0.3); 
    /*--color3: linear-gradient( 90deg, rgb(0, 142, 208,0.2) 0%, rgb(0, 142, 208,0.05) 100%);*/
    --colorTree1: rgb(0, 142, 208,0.2);
    --colorTree2: rgb(0, 142, 208,0.2);
    /*--colorTree2: rgb(0, 142, 208,0.5);*/
    --colorTree3: rgb(0, 142, 208,0.3);
    --colorText1: rgb(0 142 208);
}

.folderColor {
    color: var(--colorText1);
}

.table1 {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    .table1 td, th {
        border: 1px solid #dddddd !important;
        text-align: left;
        padding: 4px;
        vertical-align: middle;
    }

    .table1 tr:nth-child(even) {
        background-color: #dddddd;
    }

.header {
    height: 40px;
    width: 250px;
    background-color: #008ED0;
    display: flex;
    flex-wrap: nowrap !important; 
}

.header1_lang::before {
    content: "SGlibrary";
}

.header2_lang::before {
    content: "SGlibrary";
}

.treehover {
    color: var(--colorText1);
    border: 1px;
    border-color: transparent;
    border-style: solid;
}

    .treehover:hover {
        background-color: var(--colorTree1);
        border-radius: 0.25rem;
        border-color: #008ED0;
    }

.treeselected {
    background-color: var(--colorTree2);
    border-radius: 0.25rem;
    border-color: #008ED0;
}

.treehoverdrag {
    background-color: var(--colorTree3);
}

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    border-radius: 0.25rem;
    cursor: col-resize;
    user-select: none;
    background-color: #008ED0;
    height: 100%;
}

    .resizer:hover, .resizing {
        background-color: rgb(0, 142, 208,0.5);
    }

.CClibraryItemMainStyle {
}

    .CClibraryItemMainStyle .card {
        border-color: black;
        width: var(--widthHeight);
        height: var(--widthHeight);
        margin-bottom: 3px;
        margin-right: 3px;
    }

    .CClibraryItemMainStyle:hover > .tooltip-wrapper {
        /*display: initial;*/
        visibility: visible;
        opacity: 1;
    }

.CClibraryItem {
    display: inline-block;
    vertical-align: top;
}

    .CClibraryItem .card {
    }

    .CClibraryItem:hover > .card {
        background-image: var(--color1);
    }

    .CClibraryItem:hover > .tooltip-wrapper {
    }

.CClibraryItemSelected {
}

    .CClibraryItemSelected .card {
        background-image: var(--color2);
    }

    .CClibraryItemSelected:hover > .card {
        background-image: var(--color3);
    }

    .CClibraryItemSelected:hover > .tooltip-wrapper {
    }

.CClibraryItemNotVisible {
    display: inline-block;
    vertical-align: top;
}

    .CClibraryItemNotVisible .card {
        background: var(--color1NotVisible);
    }

    .CClibraryItemNotVisible:hover > .card {
        background-color: var(--color3NotVisible);
        opacity: 0.5;
    }

    .CClibraryItemNotVisible:hover > .tooltip-wrapper {
    }

.CClibraryItemSelectedNotVisible {
}

    .CClibraryItemSelectedNotVisible .card {
        background: var(--color2NotVisible)
    }

    .CClibraryItemSelectedNotVisible:hover > .card {
        background-color: var(--color3NotVisible)
    }

    .CClibraryItemSelectedNotVisible:hover > .tooltip-wrapper {
    }

.CClibraryItemTemplate {
    display: inline-block;
    vertical-align: top;
}

    .CClibraryItemTemplate .card {
        background: var(--color1Template);
    }

    .CClibraryItemTemplate:hover > .card {
        background-image: var(--color2Template);
    }

    .CClibraryItemTemplate:hover > .tooltip-wrapper {
    }

.CClibraryItemTemplateSelected {
}

    .CClibraryItemTemplateSelected .card {
        background-image: var(--color3Template);
    }

    .CClibraryItemTemplateSelected:hover > .card {
        background-image: var(--color2Template);
    }

    .CClibraryItemTemplateSelected:hover > .tooltip-wrapper {
    }


.CClibraryItemManufacturer {
    display: inline-block;
    vertical-align: top;
}

    .CClibraryItemManufacturer .card {
    }

    .CClibraryItemManufacturer:hover > .card {
        background-image: linear-gradient( 90deg, rgb(212,2,6,0.5) 0%, rgb(254,185,125,0.5) 100%)
    }

    .CClibraryItemManufacturer:hover > .tooltip-wrapper {
    }

.CClibraryItemSelectedManufacturer {
}

    .CClibraryItemSelectedManufacturer .card {
        background-image: linear-gradient( 90deg, rgb(212,2,6,0.5) 0%, rgb(254,185,125,0.5) 80%)
    }

    .CClibraryItemSelectedManufacturer:hover > .card {
        background-image: linear-gradient( 90deg, rgb(212,2,6,0.3) 0%, rgb(254,185,125,0.3) 80%)
    }

    .CClibraryItemSelectedManufacturer:hover > .tooltip-wrapper {
    }