.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.no-spin {
  -moz-appearance:textfield !important;
}

 .transition-height {
  transition: height 0.3s ease;
  overflow: hidden;  /* To ensure the content doesn't overflow during animation */
}


.rounded-lg {
  border-radius: 12px !important;
}


.horizontal-list-item {
  margin-right: 0.4em; /* Adjust as necessary */
  margin-left: 0.4em;  /* Adjust as necessary */
}

.text-orange {
  color: #d99800;
}

.text-green {
  color: green;
}

.text-red {
  color: red;
}

.bg-Barking{
  background-color: #d99800;
  /* color: white; */
}

.bg-Sleeping{
    background-color: green;
   
}

.bg-AtDoor{
    background-color: #0d6efd;
}

.confidence-container {
  margin-right: 0.4em;
  display: flex;
  align-items: center;
  gap: 5px; /* spacing between rectangles */
}

.confidence-rectangle {
  width: 10px;
  height: 20px;
  border-radius: 3px;
}

.duration-container {
  margin-right: 0.4em;
  display: flex;
  align-items: center;
  gap: 0px; /* spacing between rectangles */
}

.duration-rectangle {
  width: 3px;
  height: 20px;
  /* border-radius: 3px; */
}

@media (max-width: 426px) {
  .hide-on-mobile {
    display: none!important;
  }
}

@media (min-width: 426px) {
  .hide-on-web {
    display: none;
  }
}

.scrolable-body {
    max-height: 70vh; 
    overflow-y: auto;
}

/* Notification Cards Styling */
.notifications-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 2px;
}

.notifications-container::-webkit-scrollbar {
    width: 8px;
}

.notifications-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.notifications-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.notifications-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#notifications-list .card {
    transition: all 0.3s ease;
    animation: slideIn 0.3s ease-out;
}

#notifications-list .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#empty-notifications-message {
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

#empty-notifications-message i {
    color: #adb5bd;
}

/* Badge styling for notification number */
.badge.bg-primary {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
}

/* Icon styling in labels */
.form-label i {
    color: #6c757d;
    font-size: 0.85em;
}

/* Input group styling */
.input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
    font-size: 0.875rem;
    font-weight: 500;
}