/* Apply the CSS to the second file */

#header {
  position: absolute;
  width: 220px;
}

#header .pro-sidebar {
  height: 100vh;
  color: #ff3f3f; /* Normal state color */
}

#header .closemenu {
  color: hsl(var(--gold)); /* Normal state color */
  position: absolute;
  right: 0;
  z-index: 9999;
  line-height: 20px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 22px;
  top: 55px;
  cursor: pointer;
}

#header .pro-sidebar {
  width: 100%;
  min-width: 100%;
}

#header .pro-sidebar.collapsed {
  width: 55px;
  min-width: 55px;
}

/* #header .pro-sidebar-inner {
  background: transparent;
  box-shadow: none;
} */

#header .pro-sidebar-inner .pro-sidebar-layout {
  overflow-y: hidden;
}

#header .pro-sidebar-inner .pro-sidebar-layout .logotext p {
  font-size: 20px;
  padding: 0 20px;
  color: #080000; /* Normal state color */
  font-weight: bold;
  transition: color 0.3s; /* Add a smooth color transition */
}

#header .pro-sidebar-inner .pro-sidebar-layout ul {
  padding: 0 5px;
}

#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item {
  color: #757575; /* Normal state color */
  margin: 10px 0px;
  font-weight: bold;
  transition: color 0.3s; /* Add a smooth color transition */
}

#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item .pro-icon-wrapper {
  color: #f80000; /* Normal state color */
  border-radius: 3px;
  transition: background-color 0.3s, color 0.3s; /* Add smooth transitions for background and text color */
}

#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item:hover,
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item:active {
  color: #c22d2d; 
}

#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item:hover .pro-icon-wrapper,
#header .pro-sidebar-inner .pro-sidebar-layout ul .pro-inner-item:active .pro-icon-wrapper {
  /* background-color: hsl(var(--gold));  */
  color: #757575; 
}

/* #header .pro-sidebar-inner .pro-sidebar-layout .active {
  background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
} */

#header .pro-sidebar .pro-sidebar-inner .pro-sidebar-layout .pro-sidebar-header {
  border-bottom: 0;
}

#header .pro-item-content{
  margin-left: 1px;
}

#header .pro-sidebar .pro-menu a
{
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  font-size: 16px;
}

#header .pro-sidebar .pro-menu a:hover
{
  color: hsl(var(--input));
}

#header .logo {
  padding: 20px;
}
#header .pro-inner-item {
 padding-left: 4px;
 padding-right: 0px;
}
@media only screen and (max-width: 720px) {
  html {
      overflow: hidden;
  }
}