body {
      background-color: #f5f7fa;
    }

    /* Sidebar */
    .sidebar {
      height: 100vh;
      width: 240px;
      position: fixed;
      background-color: #0f7c8a;
      color: #fff;
      padding-top: 20px;
    }

    .sidebar h2 {
      padding: 0px 40px;
      margin-top: 8px;
      font-weight: bold;
    } 
    
    p{
      padding:0px 40px;
    }

    .sidebar a {
      display: flex;
      align-items: center;
      color: #cfe8ec;
      padding: 16px 40px;
      text-decoration: none;
    }

    .sidebar a:hover,
    .sidebar a.active {
      background-color: #e9f6f8;
      color: #0f7c8a;
    }

    .sidebar i {
      margin-right: 10px;
    }

    .signout {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
    }

    /* Main */
    .main {
      margin-left: 240px;
      padding: 20px;
    }

    .card-box {
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .welcome {
      font-size: 1.3rem;
      font-weight: 600;
    }

    /* Toggle Container */
    .view-toggle {
    display: flex;
    background-color: #E6F4F7;
    border-radius: 20px;
    padding: 3px;
    }

    /* Toggle Buttons */
    .view-toggle button {
    border: none;
    background: transparent;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #007A97;
    transition: 0.2s;
    }

    /* Active State */
    .view-toggle button.active {
    background-color: #007A97;
    color: #fff;
    }

    /* Hover */
    .view-toggle button:hover {
    background-color: #cce7ee;
    }