#tree-grid > div{
    background-color: white;
    padding: 0.75rem;
    border-radius: 0.75rem;
}

#treeModal {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* For Safari */
}

#modalDescription::-webkit-scrollbar {
    width: 6px;
}

#modalDescription::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#modalDescription::-webkit-scrollbar-thumb {
    background-color: #22c55e; /* Tailwind green-500 */
    border-radius: 4px;
}

#modalDescription::-webkit-scrollbar-thumb:hover {
    background-color: #15803d; /* Tailwind green-700 */
}

#modalDescription {
    scrollbar-width: thin;
    scrollbar-color: #22c55e #f1f1f1;   /* For Firefox */
}

.line-clamp-3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.detail-container{
    min-width: 8rem;
}

.detail-container > div{
    color: #718096;
}

.tree-container > div > img{
    min-width: 6rem;
}

.tree-container{
    margin-bottom: 1rem;
}

@media (width < 767px) and (min-width:500px){
    .tree-container{
        margin-left: 4rem;
        margin-right: 4rem;
        flex-direction: row;
    }
}

.sentro{
    display: flex;
    justify-content: center;
}