html,
body {
    height: 100%;
    background-image: url(/Ximages/GS.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
}

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
.treeView img {
    width: 20px;
    height: 20px;
    scroll-behavior:auto;
    
}
.v_scroll_box {
    background-color:none;
    width: auto;
    height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: center;
    padding: 4px;
}
.geeks {
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

    .geeks img {
        width: 100%;
        transition: 0.5s all ease-in-out;
    }

    .geeks:hover img {
        transform: scale(1.5);
    }


.parent {
    display: flex; /* displays flex-items (children) inline */
}



.child {
    flex-grow: 1; /* each flex-item grows and takes 1/3 of the parent's width */
    text-align: left;
    border: 1px solid;
}

.pp_shadowbox {
    width: fit-content;
    border: 1px solid #333;
    border-block-color: saddlebrown;
    box-shadow: 8px 8px 5px #444;
    padding: 4px 4px 8px 8px;
    background: rgb(248,249,253);
    background: radial-gradient(circle, rgba(248,249,253,1) 0%, #d1b234 100%);
    border-radius: 25px;
    border: 4px solid silver;
    padding: 2px;
    width: stretch;
    height: stretch;
}
.div_Tree {
    background-color: lightblue;
    height: 40px;
    width: 200px;
    overflow-y: auto;
}

.s_shadowbox {
    width: fit-content;
    border: 1px solid #333;
    border-block-color: saddlebrown;
    box-shadow: 8px 8px 5px #444;
    padding: 1px 1px 1px 1px;
    background: rgb(248,249,253);
    border-radius: 20px;
    border: 1px  inset groove gold;
    padding: 4px;
    width: stretch;
    height: stretch;
}

.b_shadowbox {
    width: fit-content;
    border: 1px solid #333;
    border-block-color: saddlebrown;
    box-shadow: 8px 8px 5px #444;
    padding: 10px 10px 10px 10px;
    background: rgb(248,249,253);
    border-radius: 20px;
    border: 1px solid gold;
    padding: 4px;
    width: stretch;
    height: stretch;
}

.p_shadowbox {
    width: fit-content;
    border: 1px solid #333;
    border-block-color: saddlebrown;
    box-shadow: 8px 8px 5px #444;
    padding: 10px 10px 10px 10px;
    background: rgb(248,249,253);
    background: radial-gradient(circle, rgba(248,249,253,1) 0%, rgba(23,52,186,1) 100%);
    border-radius: 25px;
    border: 4px solid gold;
    padding: 4px;
    width: stretch;
    height: stretch;
}

.tt_shadowbox {
    width: fit-content;
    border: 1px solid #333;
    border-block-color: saddlebrown;
    box-shadow: 8px 8px 5px #444;
    padding: 10px 10px 10px 10px;
    background: rgb(248,249,253);
    background: radial-gradient(circle, rgba(248,249,253,1) 0%, rgba(23,52,186,1) 100%);
    border-radius: 25px;
    border: 4px solid gold;
    padding: 4px;
    width: stretch;
    height: stretch;
}
.l_image {
    height: 220px;
    width: auto
}

.pimg {
    height: 40px;
    height: 40px;
}
* {
    box-sizing: border-box;
}

.img-zoom-container {
    position: relative;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /*set the size of the lens:*/
    width: 40px;
    height: 40px;
}

.img-zoom-result {
    border: 1px solid #d4d4d4;
    /*set the size of the result div:*/
    width: 300px;
    height: 300px;
}
.zoom:hover {
    transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }