@media screen and (max-width: 768px) {
     nav .navbar {
        position: fixed;
        display: block;
        left: 0;
        top: 50px;
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.911);
    }
    .navbar li {
        display: flex;
        width: 100%;
        text-align: center;
        border-radius: 0;
    }
   
    nav li a {
        color: white;
    }
    li .active {
        background-color: white;
        color: black;
    }
    nav a:hover {
        color: #9ACD32;
    }
    nav .navbar {
        display: none;
        transition: all .8s linear;
    }
    nav .navbar.opened {
        display: block;
    }
    nav .navbar.opened {
        width: 200px;
    }
    nav .logo p {
        color: yellowgreen;
    }
 
 
/* mode controller */
.navbar .mode-control{
    position: absolute;
    left: 5px;
    bottom: 10% !important; 
    width: 170px !important;
    justify-content: space-between !important;
    
}

    .logging-btn{
        
    display: flex !important;  
    align-items: center;
    justify-content: space-evenly !important;
    border-radius: 10px !important;
        position: absolute;
        bottom: 19% !important; 
        padding: 6px;
        height: 40px;
        
    }
    /* menu style */
    .menu {
        display: block;
        position: absolute;
        padding: 16px 10px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        background-color: yellowgreen;
    }
    .menu-btn {
        width: 25px;
        height: 2px;
        background-color: white;
        transition: all .3s ease-in-out;
    }
    .menu-btn::before,
    .menu-btn::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 2px;
        background-color: white;
        border-radius: 5px;
        transition: all .3s ease-in-out;
    }
    .menu-btn::before {
        transform: translateY(-7px);
    }
    .menu-btn::after {
        transform: translateY(7px);
    }
    .menu:hover {
        background-color: black;
    }
    .menu:active {
        opacity: .8;
    }
    /* close menu */
    .menu.opened .menu-btn {
        background: transparent;
        transform: translateX(-50px);
    }
    .menu.opened .menu-btn::before {
        transform: rotate(45deg) translate(35px, -35px)
    }
    .menu.opened .menu-btn::after {
        transform: rotate(-45deg) translate(35px, 35px)
    }
    .wrapper {
        margin-left: 0;
    }
    footer {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        display: inline-block;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .login-content .login-form {
        width: 90%!important;
        display: block;
        margin: 0 auto;
        margin-top: 150px!important
    }
  
    .display-table {
        /* width: 100%;
        margin: 2px 5px; */
    }
   
    .tab-content{
        padding: 25px 0 !important;
    }
    .table .st-status{
        width: 60px !important;
        padding: 4px 8px !important;
        font-size: 0.55rem !important;
    }
    .persona-tables-box, .display-tasks{
        font-size: 12px;
        padding: 0 ;
        display: block;
        margin: 0 auto;
    }
    .persona-table{
        /* width: 70%; */
        margin: 0 auto;
    }
    .persona-table .lg-screen-item{
        display: none;
    }
    .st-num img{
        width: 20px;
        height: 20px;
        opacity: 0.6;
        border-radius: 50px;
        border: 2px solid #ffff;
    }
    
}

@media screen and (min-width: 768px) {
    .mode-control{
        right: 10px;
        top: -10px;
    }
    .wrapper {
        margin-left: 60px;
    }
   
    .display-students, .display-tasks{
      /* font-size: 16px; */
    }
}