/* Basic Reset */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
  
      /* Full-Screen Layout */
      html,
      body {
        width: 100%;
        height: 100%;
        font-family: 'Nunito Sans', Arial, sans-serif;
        display: flex;
        flex-direction: column;
      }
  
      /* Dashboard Container */
      .dashboard-container {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
      }
  
      /* Hamburger Menu */
      .hamburger-menu {
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
        background: rgb(50, 100, 225);
        border-radius: 5px;
        z-index: 1000;
        color: rgb(210, 225, 255);
      }
  
      .line {
        height: 2px;
        width: 100%;
        background-color: rgb(50, 100, 225);
        margin: 5px 0;
      }
  
      .menu-text:hover,
      .menu-text.active {
        color: white;
      }
  
      /* Main Content */
      .main-content {
        flex-grow: 1;
        padding: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: margin-left 0.3s ease-in-out;
      }
  
      /* Card */
      .custom-card {
        margin: 25px;
        color: black;
        border-radius: 5px !important;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;
      }
  
      .custom-card>img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
  
      .logoutButton-box a {
        display: inline-block;
        padding: 14px 28px;
        background-color: rgb(50, 100, 225);
        color: white;
        border-radius: 8px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
      }
  
      .logoutButton a:hover {
        background-color: #2e80d2;
      }
  
      /* Loading */
      .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 24px;
        background-color: rgb(240, 243, 253);
      }
  
      /* Spinner */
      .spinner {
        height: 160px;
        width: 160px;
        border-width: 16px;
      }
  
      @media (min-width: 1400px) {
        .container {
          max-width: 1650px;
        }
      }
  
      .magnifying-icon {
        color: #0070f3;
        font-size: 18px;
        margin: 0 10px;
      }
  
      /* Search Bar */
      .search {
        text-align: center;
        margin: 30px 0;
        position: relative;
        height: 40px;
      }

      .search-container {
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        width: 40px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        border-radius: 25px;
        background: transparent;
        transition: all 0.3s ease;
        animation: expandSearch 1s forwards;
        animation-delay: 0.5s;
        color: black;
      }

      .search-container:focus-within {
        border-color: #0070f3;
        box-shadow: 0 0 8px rgba(0, 112, 243, 0.8);
      }
  
      .search-container input {
        border: none;
        outline: none;
        color: black;
        background: transparent;
        width: 0;
        padding: 0;
        opacity: 0;
        font-size: 16px;
        transition: all 0.3s ease;
        animation: inputExpand 1s forwards;
        animation-delay: 1s;
      }
  
      .search-container input::placeholder {
        color: black;
      }

      @keyframes expandSearch {
        from {
          width: 40px;
        }
  
        to {
          width: 100%;
        }
      }

      @keyframes inputExpand {
        from {
          width: 0;
          padding: 0;
          opacity: 0;
        }
  
        to {
          width: 300px;
          padding: 10px 15px;
          opacity: 1;
        }
      }
  
      .rdt_Table {
        border: 1px solid lightgray;
      }