.my-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-icon {
    max-width: 50%;
    max-height: 50%;
}

.ios-button {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: #000;
    background-color: #f7f6f6;
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 10px 20px;
    transition: background-color 0.3s ease;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.ios-button:hover {
    background-color: #d1d1d6;  /* Darker shade when hovered */
    color: #000;
}

.ios-button:active {
    background-color: #bdbdc1;  /*  Even darker shade when active */
    
    color: #000;
}

.table-container {
    border-radius: 1px;
    border: 0px solid #ccc;
    overflow: auto;
}


/* Costumize plotly dash DataTable Scrollbar */
::-webkit-scrollbar {
    /* width */
    width: 0.5em;

    /* height */
    height: 1em;

    /* Show position with slider */

    overflow: visible;

    /* background-color: #F5F5F5; */

    /* border-radius: 10px; */
    border-radius: 15px;

    /* border: 1px solid #ccc; */
    
    /* overflow: auto; */
    overflow: auto;

    /* margin: 0 0 1em 0; */
    margin: 0 0 1em 0;

    /* padding: 0 0 1em 0; */
    padding: 0 0 1em 2em;

    /* box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);

    /* background-color: #F5F5F5; */
    background-color: #F5F5F5;
}

/* Style the thumb */
::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-radius: 10px;
}

/* Style the track */
::-webkit-scrollbar-track {
    background: transparent;
}