.menu-alert-overlay {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100vh;
  background: #f6f6f6;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.5s ease-in-out;
  z-index: 99;
}
.menu-alert-overlay.active {
  right: 0;
}
.close-btn,
.clear-all-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #656565;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.menu-alert-overlay .close-btn:hover,
.menu-alert-overlay .clear-all-btn:hover {
  background-color: #fff;
}
.close-btn:focus,
.close-btn:active {
  border: none;
  outline: none;
}
/* title-container */
.alert-title-area .alert-title {
  font-weight: 600;
  font-size: 14px;
  color: #656565;
  text-transform: uppercase;
}
.alert-title-area .alert-title-icon {
  color: #656565;
  font-size: 20px;
}
.alert-title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-title-text {
  font-weight: 600;
  font-size: 14px;
  color: #856404;
  white-space: nowrap;
  text-transform: capitalize;
}
.alert-title-line {
  flex-grow: 1;
  height: 1px;
  background: #856404;
  border-radius: 4px;
}
.item-list,
.menu-item {
  list-style: none;
}
/* title-container */
.alert-item-area{
  height: 90%;
  overflow: auto;
}
.alert-item-area::-webkit-scrollbar {
  display: none;
}
.menu-alert-overlay .alert-card {
  border-radius: 6px;
  border: 1px solid #FFEEBA;
}
.alert-item-area .alert-title {
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
}
.alert-card .alert-icon {
  padding: 4px;
  border-radius: 50%;
  color: #856404;
  font-size: 18px;
}
.icon-area {
  text-align: center;
  background-color: #FFF5D6;
  border-right: 1px solid #FFEEBA;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.alert-text {
  font-weight: 600;
  font-size: 12px;
  text-transform: capitalize;
}
.alert-machine-details {
  min-width: 200px;
}
.alert-content .content-icon {
  font-size: 18px;
  color: #656565;
}
.content-icon {
  font-size: 8px;
  color: #656565;
}
.content-text {
  font-weight: 600;
  font-size: 12px;
  color: #656565;
  text-transform: capitalize;
}
/* #noAlert {
  display: none;
} */
.no-alert-icon {
  height: 80px;
  width: 80px;
}
.no-alert-text {
  font-weight: 600;
  font-size: 12px;
}
#AlertMainContent .loader-wrapper {
  position: relative;
  height: 200px; /* Or whatever your container height is */
  background-color: #f9f9f9; /* Optional */
}
#AlertMainContent .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: alertspin 0.8s linear infinite;
}
@keyframes alertspin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
#alertBell .oi-bell {
  animation: pulse 2s ease-out;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  40% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.3, 1.3, 1.3);
  }

  55% {
    transform: scale3d(1, 1, 1);
  }
  
  60% {
    transform: scale3d(1.3, 1.3, 1.3);
  }

  65% {
    transform: scale3d(1, 1, 1);
  }
}
.read-alerts,
.unread-alerts {
  font-weight: 500;
  font-size: 14px;
  border-radius: 20px;
  /* background-color: #eee; */
}
.unread-alerts {
  color: #0275D8;
  /* background-color: #D7ECFF; */
  background: linear-gradient(to right, #D7ECFF 0%, #FFFFFF 100%);
}
.read-alerts {
  color: #656565;
  background-color: #eee;
}