/* sidebar.css */
@media (max-width: 768px) {

    #columnleft,
    #columnright {
        display: none !important;
    }

    .content {
        margin: 0 !important;
    }
}

@media (min-width: 769px) {
    #page-wrapper {
        display: grid;
        grid-template-columns: 240px 1fr 240px;
        gap: 20px;
    }

    #columnleft {
        grid-column: 1;
    }

    .content {
        grid-column: 2;
        margin: 0 !important;
    }

    #columnright {
        grid-column: 3;
    }
}

/* LEFT column */
#columnleft {
    background: rgba(255, 255, 255, 0.2);
    top: 0px;
    left: 0;
    float: left;
    width: 240px;
    padding: 10px;
    border: 1px solid lightgrey;
}

#columnleft.active {
    display: block;
}

/* RIGHT column */
#columnright {
    background: rgba(255, 255, 255, 0.2);
    top: 0px;
    right: 0;
    float: right;
    width: 240px;
    padding: 10px;
    border: 1px solid lightgrey;
}

#columnright.active {
    display: block;
}

/* Sidebar boxes */
#columnleft .roundrect,
#columnright .roundrect {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
}

/* Grid layout for desktop */
@media (min-width: 769px) {
    #page-wrapper {
        display: grid;
        grid-template-columns: 240px 1fr 240px;
        gap: 20px;
    }

    #columnleft {
        grid-column: 1;
        float: none;
        position: relative;
    }

    #columnright {
        grid-column: 3;
        float: none;
        position: relative;
    }
}