*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f5f6fa;
    font-family:Arial, Helvetica, sans-serif;
}

/* Layout */

.wrapper{
    display:flex;
}

/* Sidebar */

.sidebar{

    width:260px;

    min-height:100vh;

    background:#1d3557;

    color:white;

}

.logo{

    padding:20px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}

.sidebar ul li a{

    display:block;

    color:white;

    padding:15px 20px;

    text-decoration:none;

}

.sidebar ul li a:hover{

    background:#274c77;

}

.sidebar i{

    width:25px;

}

/* Main */

.main-content{

    flex:1;

}

/* Navbar */

.top-navbar{

    background:white;

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

/* Content */

.page-content{

    padding:25px;

}

/* ===========================
   LOGIN PAGE
=========================== */

.login-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f4f6f9;
}

.login-card{
    width:420px;
    background:#fff;
    padding:35px;
    border-radius:15px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.login-card .form-control{
    height:50px;
}

.login-card .btn{
    height:50px;
    font-weight:600;
}


.course-column {
        width: 220px;
        min-width: 220px;
        max-width: 220px;
    }

    .course-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
        display: block;
    }