*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f4f4f4;
}

/* Sidebar */

.sidebar{
    position:fixed;
    top:0;
    left:0;

    width:260px;
    height:100vh;

    background:#1f2937;

    overflow-y:auto;
    overflow-x:hidden;

    padding:20px 0;

    display:flex;
    flex-direction:column;
}

/* Scrollbar */

.sidebar::-webkit-scrollbar{
    width:8px;
}

.sidebar::-webkit-scrollbar-track{
    background:#111827;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#4b5563;
    border-radius:10px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:#6b7280;
}

/* Logo */

.logo{
    color:white;
    font-size:24px;
    font-weight:bold;
    text-align:center;
    margin-bottom:30px;
}

/* Links */

.sidebar a{
    color:white;
    text-decoration:none;

    display:flex;
    align-items:center;

    gap:15px;

    padding:15px 25px;

    transition:.3s;
}

.sidebar a:hover{
    background:#374151;
    padding-left:35px;
}

.sidebar .active{
    background:#2563eb;
}

.sidebar i{
    width:20px;
    text-align:center;
}

/* Main content */

.content{
    margin-left:260px;
    padding:40px;
}

/* Demo box */

.box{
    margin-top:30px;
    height:1800px;
    background:linear-gradient(#ffffff,#dddddd);
    border-radius:10px;
}

/* Mobile */

.menu-btn{
    display:none;
}

@media(max-width:768px){

    .menu-btn{
        display:block;

        position:fixed;
        top:15px;
        left:15px;

        border:none;
        background:#000000;
        color:white;

        padding:10px 12px;
        font-size:20px;
        border-radius:6px;

        cursor:pointer;

        z-index:1001;
    }

    .sidebar{
        transform:translateX(-100%);
        transition:.3s;
        z-index:1000;
    }

    .sidebar.show{
        transform:translateX(0);
    }

    .content{
        margin-left:0;
        padding-top:70px;
    }
      
    /* Dragging Test */
    .app-window {
      position: absolute;
      user-select: none;
    }
    
    .drag-handle {
      cursor: grab;
    }
    
    .drag-handle:active {
      cursor: grabbing;
    }

}