/* General styling */
body {
  font-family: serif;
  background-color: #f4f6f9;
  color: #333;
}

h1 {
  font-size: 14px;
  margin-bottom: 10px;
}

p {
  margin-top: -10px;
}
.heading {
  width: max-width;
  color: #cc5500;
}

.headerTitle{
  padding: 2px;
}

.Hamburger_Btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;

}
.Hamburger {
  display: none;
}


#inputCityDiv,#onlyDiv,#durationDiv,#specializationDiv,#lastquaDiv,#percentageDiv,#backlogDiv,#specializationText,
#organization,#inyears,#cours{display: none;}


/* Sidebar styling */
.sidebar {
  color: white;
  height: max-height;
  margin-top: -13px;
  min-width: 200px !important;
  
}

.sidebar-header {
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
}

.sidebar .nav-item .nav-link {
  font-size: 16px;
  color: #b8c2cc;
  transition: background-color 0.3s ease;
}

.sidebar .nav-item .nav-link:hover {
  background-color: #495057;
  color: white;
}
/* Main content styling */
.main-content {
  margin-left: 0px;
  padding: 20px;
  background-color: #041e42;
  margin-top: -12px;
}

.card {
  border-radius: 10px;
  border: none;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card .display-6 {
  font-size: 28px;
  font-weight: bold;
}

.btn-primary {
  background-color: #cc5500;
  border: none;
  border-radius: 10px;
  padding: 5px 15px;
}

.btn:hover {
  background-color: #ed9121;
}

/* Badge styling */
.badge {
  font-size: 14px;
  padding: 5px 10px;
  background-color: #e9ecef;
  color: #333;
  border-radius: 15px;
}

.category {
  font-size: 14px;
  margin-bottom: 5px;
}

/* Box shadows for cards */
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Customize the scroll bar */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: #343a40;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 10px;
}
.active{
  background-color: #CC5500 !important;
  color: #FFFFFF !important;
}
span.datetime {
  font-size: 10px;
  color: gray;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
  .header {
    width: 100%;
  }
  .Hamburger {
    display: block;
  }

  .button {
    visibility: visible;
  }
 

  .sidebar.active {
    left: 0px;
  }

  

  .sidebar .nav-item .nav-link {
    text-align: start;
  }
}