/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100%;
  background: #e3f2fd;
}
html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  width: 100%; /* Ensure the width of the body is 100% */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.submenu {
  display: none; 
  padding-left: 20px;
}

img{
  padding-top: 20px;
  padding-bottom: 20px;
  width: 75%;
  max-width: 90%;
}
.image-input-wrapper {
  width: 50px !important;
  height: 50px !important;
}

.image-input-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

			/* Sidebar Styles */
			nav {
				width: 200px;
				transition: width 0.3s;
			}

			nav.open {
				width: 200px;
			}

			.sidebar {
				position: fixed;
				width: 100px;
				height: 100%;
				background: #333;
				padding: 10px 0;
				left: 0;
				top: 0;
				transition: width 0.3s;
				overflow-y: auto;
			}

			.sidebar-content {
				padding: 10px;
			}

			.nav-link {
				color: #fff;
				text-decoration: none;
				display: flex;
				align-items: center;
				padding: 10px;
			}

			.nav-link.active {
				background-color: #245590;
				border-left: 4px solid #ffffff;
			}

			.nav-link.active .icon-menu {
				color: white;
			}

			.nav-link.active .link {
				color: white;
			}

			.icon {
				margin-right: 10px;
			}

			.bottom-cotent {
				margin-top: auto;
			}

			/* Main content styles */
			.main-content {
				margin-left: 250px;
				padding: 20px;
			}

			.content {
				display: none;
			}

			.content.active {
				display: block;
			}
      
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99; 
  border: none;
  outline: none; 
  background-color: #245590;
  color: white; 
  cursor: pointer;
  padding: 15px; 
  border-radius: 20px; 
  font-size: 20px;
  transition: background-color 0.3s, transform 0.3s; 
}

#backToTopBtn:hover {
  background-color: #dee2e7; 
  color: #245590;
  transform: scale(1.1); 
}

nav .logo {
  display: flex;
  align-items: center;
  margin: 0 24px;
}
/* .logo .menu-icon {
  color: #333;
  font-size: 24px;
  margin-right: 20px;
  cursor: pointer;
} */

nav ul li span.icon {
  position: absolute;
  right: 15px; /* Position the icon to the right */
  transform: translateY(-50%); /* Center the icon vertically */
  font-size: 15px !important;
}
nav ul li:hover .icon {
  color: #fff; /* Change icon color on hover */
}

.icon-menu{
  font-size: 18px;
  color: #245590;
}

.logo .logo-name {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}
nav .sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 300px;
  padding: 20px 0;
  background-color: #fff;
  box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}
nav.open .sidebar {
  left: 0;
}
.sidebar .sidebar-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 0px;
}
.sidebar-content .list {
  list-style: none;
}
.lists{
  padding-left: 8px;
}
.list .nav-link {
  display: flex;
  align-items: start;
  margin: 0px 5px;
  padding: 15px 0px;
  padding-left: 10px;
  margin-right: 20px;
  border-radius: 0px;
  text-decoration: none;
}
.lists .nav-link:hover {
  background-color: #245590;
}
.nav-link .icon {
  margin-right: 13px;
  font-size: 23px;
  color: #245590;
}
.nav-link .link {
  font-size: 15px;
  color: #245590;
  font-weight: 400;
}
.lists .nav-link:hover .icon-menu,
.lists .nav-link:hover .link {
  color: #fff;
}
.overlay {
  position: fixed;
  top: 0;
  left: -100%;
  height: 1000vh;
  width: 200%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.3);
}
nav.open ~ .overlay {
  opacity: 1;
  left: 260px;
  pointer-events: auto;
}

/* scrollbar */
/* Custom scrollbar for Chrome, Safari and Opera */
.sidebar::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
  background: #ddddddd3; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Roundness of the scrollbar thumb */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color when hovered */
}

/* Custom scrollbar for Firefox */
.sidebar {
  scrollbar-width:thin; /* Make the scrollbar thin */
  scrollbar-color: #ddddddd3 #fff; /* Thumb color and track color */
}