body {
          display: flex;
          flex-direction: column;
          margin: 0;
          padding: 0 !important;
          font-family: Arial, sans-serif;
          }

          /* Navbar Styles */
          #navbarss {
          background-color: #e74c3c;
          color: white;
          padding: 8px 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 40px;
          }

          #navbarss h1 {
          margin: 0;
          font-size: 14px;
          font-weight: bold;
          letter-spacing: 0.5px;
          }

          .navbar-icons {
          display: flex;
          gap: 12px;
          }

          .navbar-icons i {
          font-size: 14px;
          cursor: pointer;
          padding: 4px;
          border-radius: 2px;
          transition: background-color 0.3s;
          }

          .navbar-icons i:hover {
          background-color: rgba(255,255,255,0.2);
          }

          /* Main Content Area */
          .main-content {
          display: flex;
          flex: 1;
          height: 100vh;
          }

          .sidebar {
          width: 250px;
          background-color: #202020;
          color: white;
          height: 100vh;
          padding: 1em;
          overflow-y: auto;
          }

          .sidebar h2 {
          color: #e74c3c;
          font-size: 18px;
          margin-bottom: 10px;
          }

          .sidebar a {
          display: block;
          color: #ecf0f1;
          padding: 8px 0;
          text-decoration: none;
          }

          .sidebar a:hover {
          color: #3498db;
          }

          #swagger-ui {
          flex: 1;
          padding: 1em;
          background-color: #f5f5f5;
          overflow-y: auto;
          }

          li{
          list-style: none;
          }

          .postman-docs{
          margin-bottom: 3px;
          margin-top: 3px;
          font-size: 1.2rem;
          }

          
         
          .open-api {
          margin-bottom: 3px;
          margin-top: 3px;
          font-size: 1.2rem;
          color: #ecf0f1;
          cursor: pointer;
          transition: color 0.3s ease;
        }

        .open-api.clicked {
          color: red;
        }


          .postman-docs {
          display: block;
          color: #ecf0f1;
          padding: 8px 0;
          text-decoration: none;
          font-size: 1.2rem;
          }

          .postman-docs:hover {
          color: #3498db;
          }

          .delete-request {
            padding: 5px 8px;
            background-color: red;
            margin-right: 4px;
            border-radius: 8px;
            color: white;
          }

          .post-request {
            padding: 5px 8px;
            background-color: green;
            margin-right: 4px;
            border-radius: 8px;
            color: white;
          }

          .get-request {
            padding: 5px 8px;
            background-color: blue;
            margin-right: 8px;
            border-radius: 8px;
            color: white;
          }

          .put-request {
            padding: 5px 8px;
            background-color: yellow;
            color: black;
            margin-right: 4px;
            border-radius: 8px;
          }

/* <!-- ================================= here start the toggle button =================================     --> */

 /* Light Mode (default) */
            body.light-mode {
            background-color: #f5f5f5 !important;
            color: #121212 !important;
            }

            body.light-mode a {
              color: #fff;
            }
            body.light-mode a:hover {
              color: #3498db;
            }

            /* Dark Mode */
            body.dark-mode {
              background-color: #121212 !important;
              color: #ffffff !important;
            }

            body.dark-mode a {
              color: #ffffff;
            }
            body.dark-mode a:hover {
              color: #1e90ff;
            }

            body.dark-mode #swagger-ui {
              filter: invert(1) hue-rotate(180deg);
            }

            /* Collapsed sidebar */
            .sidebar.collapsed {
              width: 0;
              padding: 0;
              overflow: hidden;
              transition: all 0.3s ease;
            }

            /* Optional: transition effect */
            .sidebar {
              transition: all 0.3s ease;
            }


            #endpoint-list {
              transition: all 0.3s ease;
            }


/* <!--  ================================ home.htmls css ====================================================================  --> */
            #custom-home-container {
            flex: 1;
            padding: 1em;
            overflow-y: auto;
            box-sizing: border-box;
            transition: background-color 0.3s, color 0.3s;
          }

          body.light-mode #custom-home-container {
            background-color: #f5f5f5;
            color: #121212;
          }

          body.dark-mode #custom-home-container {
            background-color: #121212;
            color: #f5f5f5;
          }

/* 
<!-- ========================================= here home.csss ======================================== 
--> */
  

      #custom-search-container {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode #custom-search-container {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode #custom-search-container {
  background-color: #121212;
  color: #f5f5f5;
}

.search-content h1, 
.search-content h2 {
  margin-bottom: 0.5em;
}

.search-content p,
.search-content ul,
.search-content pre {
  margin-bottom: 1em;
}

.search-content ul {
  padding-left: 20px;
}

/*=========================================== Schema ========================================= */
.schema-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .schema-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .schema-content {
  background-color: #121212;
  color: #f5f5f5;
}


/* =======================================  View Record  ============================================== */


.record-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .record-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .record-content {
  background-color: #121212;
  color: #f5f5f5;
}


/*====================================  create record ============================== */

.record-create {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .create-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .create-content {
  background-color: #121212;
  color: #f5f5f5;
}


/*  ===================================== execute-content ===================================  */
.execute-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .execute-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .execute-content {
  background-color: #121212;
  color: #f5f5f5;
}

/* ========================================== Generate Token ================================================  */
.generate-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .generate-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .generate-content {
  background-color: #121212;
  color: #f5f5f5;
}


/*===========================================  Update content ====================================================  */

.update-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .update-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .update-content {
  background-color: #121212;
  color: #f5f5f5;
}


/* ===================================================== Delete content ========================================================= */

.delete-content {
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
}

body.light-mode .delete-content {
  background-color: #f5f5f5;
  color: #121212;
}

body.dark-mode .delete-content {
  background-color: #121212;
  color: #f5f5f5;
}



/* ====================================================================================  */

.open-api.active {
  color: red !important;
}