/* Define more box colors */
        .orange-box {
            background-color: orange;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .blue-box {
            background-color: blue;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .green-box {
            background-color: green;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        /* Additional colors */
        .yellow-box {
            background-color: yellow;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }
        
        .yellow-gold {
    background-color: #FFD700;
    height: 100px; 
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}

.yellow-canary {
    background-color: #FFFF8F;
    height: 100px; 
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}

.yellow-mustard {
    background-color: #FFDB58;
    height: 100px; 
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}

.yellow-lemon {
    background-color: #FAFA33;
    height: 100px; 
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}

.yellow-pastel {
    background-color: #FFFAA0;
    height: 100px; 
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}


        .red-box {
            background-color: red;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .purple-box {
            background-color: purple;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .pink-box {
            background-color: pink;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .cyan-box {
            background-color: cyan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .magenta-box {
            background-color: magenta;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .teal-box {
            background-color: teal;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .lime-box {
            background-color: lime;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gold-box {
            background-color: gold;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .silver-box {
            background-color: silver;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .brown-box {
            background-color: brown;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

       .maroon-box {
    background-color: maroon;
    color: white;
    overflow: auto;
    padding: 10px;
    height: auto; /* Adjust height based on content */
}

        }

        .navy-box {
            background-color: navy;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gray-box {
            background-color: gray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .olive-box {
            background-color: olive;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .sky-blue-box {
            background-color: skyblue;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .indigo-box {
            background-color: indigo;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .violet-box {
            background-color: violet;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .turquoise-box {
            background-color: turquoise;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .beige-box {
            background-color: beige;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .tan-box {
            background-color: tan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .salmon-box {
            background-color: salmon;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .coral-box {
            background-color: coral;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .khaki-box {
            background-color: khaki;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .orchid-box {
            background-color: orchid;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .aquamarine-box {
            background-color: aquamarine;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .chartreuse-box {
            background-color: chartreuse;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .lavender-box {
            background-color: lavender;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .plum-box {
            background-color: plum;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .wheat-box {
            background-color: wheat;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .crimson-box {
            background-color: crimson;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-red-box {
            background-color: darkred;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .firebrick-box {
            background-color: firebrick;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .indian-red-box {
            background-color: indianred;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-coral-box {
            background-color: lightcoral;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-salmon-box {
            background-color: darksalmon;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-salmon-box {
            background-color: lightsalmon;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-orange-box {
            background-color: darkorange;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-pink-box {
            background-color: lightpink;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .hot-pink-box {
            background-color: hotpink;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .deep-pink-box {
            background-color: deeppink;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-violet-red-box {
            background-color: mediumvioletred;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .pale-violet-red-box {
            background-color: palevioletred;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .orchid-box {
            background-color: orchid;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .thistle-box {
            background-color: thistle;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .plum-box {
            background-color: plum;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .violet-box {
            background-color: violet;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-orchid-box {
            background-color: mediumorchid;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-orchid-box {
            background-color: darkorchid;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-violet-box {
            background-color: darkviolet;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .blue-violet-box {
            background-color: blueviolet;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-purple-box {
            background-color: mediumpurple;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-slate-blue-box {
            background-color: darkslateblue;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .indigo-box {
            background-color: indigo;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .slate-blue-box {
            background-color: slateblue;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-slate-blue-box {
            background-color: mediumslateblue;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .green-yellow-box {
            background-color: greenyellow;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .chartreuse-box {
            background-color: chartreuse;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .lawn-green-box {
            background-color: lawngreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .lime-box {
            background-color: lime;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .lime-green-box {
            background-color: limegreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .pale-green-box {
            background-color: palegreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-green-box {
            background-color: lightgreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-spring-green-box {
            background-color: mediumspringgreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .spring-green-box {
            background-color: springgreen;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-aquamarine-box {
            background-color: mediumaquamarine;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .aquamarine-box {
            background-color: aquamarine;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .cyan-box {
            background-color: cyan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-cyan-box {
            background-color: lightcyan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-turquoise-box {
            background-color: darkturquoise;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .turquoise-box {
            background-color: turquoise;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-turquoise-box {
            background-color: mediumturquoise;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .pale-turquoise-box {
            background-color: paleturquoise;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .aqua-box {
            background-color: aqua;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .cyan-box {
            background-color: cyan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-cyan-box {
            background-color: darkcyan;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .teal-box {
            background-color: teal;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }






        .dark-slate-gray-box {
            background-color: darkslategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .medium-slate-gray-box {
            background-color: mediumslategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .slate-gray-box {
            background-color: slategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-slate-gray-box {
            background-color: lightslategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gray-box {
            background-color: gray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dim-gray-box {
            background-color: dimgrey;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-gray-box {
            background-color: darkgray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .silver-box {
            background-color: silver;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-gray-box {
            background-color: lightgray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gainsboro-box {
            background-color: gainsboro;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .white-smoke-box {
            background-color: whitesmoke;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .white-box {
            background-color: white;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .black-box {
            background-color: black;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-slate-gray-box {
            background-color: darkslategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .slate-gray-box {
            background-color: slategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-slate-gray-box {
            background-color: lightslategray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gray-box {
            background-color: gray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dim-gray-box {
            background-color: dimgrey;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .dark-gray-box {
            background-color: darkgray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .silver-box {
            background-color: silver;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .light-gray-box {
            background-color: lightgray;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .gainsboro-box {
            background-color: gainsboro;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .white-smoke-box {
            background-color: whitesmoke;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .white-box {
            background-color: white;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

        .black-box {
            background-color: black;
            height: 100px; 
overflow: auto;
padding: 10px;
 height: auto; /* Adjust height based on content */
        }

  .rounded-panel10 {
    border-radius: 10px;
}
.rounded-panel20 {
    border-radius: 20px;
}