#organ_section{

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.organ{
    padding: 9px 11px;
    margin: 10px;
    background: #eaeaea;
    color: #6d388d;
    border: 1px solid;
    border-radius: 3px;
}

.organ:hover{

    outline:1px solid #6d388d;
    cursor: pointer;
}


.metabolite_category {
    display: grid;
    grid-template-columns: repeat(auto-fit, 180px);
    gap:8px; /* Optional: adjust the gap between grid items */
    justify-items: start;
    margin-left:10px ;
}

#metabolite_sections{

    margin-left: 15px;
}

.metabolite{

    width: 180px;
    height: 180px;
    padding: 10px;
    background: rgb(247 247 247);
    border-radius: 3px;
    border: 1px solid #e8e8e8;
}

.metabolite:hover{

    outline:2px solid #6d388d;
    cursor: pointer;
}

.metabolite:hover .name{

    color: black;
}

.metabolite .name{

    text-align: center;
    color: #6d388d;
    font-size: 12px;
}

.hidden{

    display: none;
}

.mol_preview{

    width: 160px;
    height: 160px;
    margin: 0 auto;
}

h3.category_name{

    position: sticky;
    top: 60px;
    background: white;
    padding: 20px 0px;
    margin: 0;
    margin-top: 4px;
    margin-bottom: 22px;
    border-bottom: 1px solid #d1d1d1;
    color:#6d388d;
}