/* css styles */
.table-responsive {
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
}

.table-responsive table {
    width: 100%;
}

.square-def {
    background-color: #e4f2fe;
    border: 3px solid #000;

    /* Better content fit */
    display: inline-block;
    /* Only take as much width as needed */
    padding: 8px 25px;
    /* More padding on sides, less on top/bottom */
    margin: 10px auto;
    /* Center the box */
    text-align: center;

    /* Ensure it's centered on the page */
    display: table;
    /* Table display for auto-sizing */
    margin-left: auto;
    margin-right: auto;

    /* Optional improvements */
    border-radius: 6px;
    /* Slightly rounded corners */
    min-width: 200px;
    /* Ensures very small equations still look good */
    max-width: 95%;
}

.square-tip {
    background-color: #d2f0d2;
    border: 3px solid #000;

    /* Better content fit */
    display: inline-block;
    /* Only take as much width as needed */
    padding: 8px 25px;
    /* More padding on sides, less on top/bottom */
    margin: 10px auto;
    /* Center the box */
    text-align: center;

    /* Ensure it's centered on the page */
    display: table;
    /* Table display for auto-sizing */
    margin-left: auto;
    margin-right: auto;

    /* Optional improvements */
    border-radius: 6px;
    /* Slightly rounded corners */
    min-width: 200px;
    /* Ensures very small equations still look good */
    max-width: 95%;
}

.square-objective {
    background-color: #e8fadb;
    border: 3px solid #000;

    /* Better content fit */
    display: inline-block;
    /* Only take as much width as needed */
    padding: 8px 25px;
    /* More padding on sides, less on top/bottom */
    margin: 10px auto;
    /* Center the box */
    text-align: center;

    /* Ensure it's centered on the page */
    display: table;
    /* Table display for auto-sizing */
    margin-left: auto;
    margin-right: auto;

    /* Optional improvements */
    border-radius: 6px;
    /* Slightly rounded corners */
    min-width: 200px;
    /* Ensures very small equations still look good */
    max-width: 95%;
}


.square-solution {
    background-color: #ece0ee;
    border: 3px solid #000;

    /* Better content fit */
    display: inline-block;
    /* Only take as much width as needed */
    padding: 8px 25px;
    /* More padding on sides, less on top/bottom */
    margin: 10px auto;
    /* Center the box */
    text-align: center;

    /* Ensure it's centered on the page */
    display: table;
    /* Table display for auto-sizing */
    margin-left: auto;
    margin-right: auto;

    /* Optional improvements */
    border-radius: 6px;
    /* Slightly rounded corners */
    min-width: 200px;
    /* Ensures very small equations still look good */
    max-width: 95%;
}