/*----- Componant: Top Navigation Bar ----- */
$header-height: 4.5625rem;
$width-sidebar: 12.5rem;
$width-toggleopen: 5rem;
.app-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index:1030;
	border-bottom: 0.0625rem solid $border;
	background: var(--bs-white);
	transition: padding-left 0.3s ease;
  .profile_header .dropdown_arrow_hide::after{
    display: none;
  }
}
.header-brand-img {
	vertical-align: middle;
	width: auto;
	max-width: 7.5rem;
}

@media (min-width: 992px) {
	.app-header {
		padding-right: 0;
		padding-left: $width-sidebar;
		// z-index: 9;
	}
}


// ////////////////

.pv-notification-main {
	position: relative;
	display: inline-block;
	cursor: pointer;
  
	svg {
	  fill:$light-black;
	  width: 22px;
	  height: 22px;
	  transition: fill 0.2s ease-in-out;

	  &:hover{
		opacity: 1;
		animation: bounce 0.5s ease; /* Add a bouncing animation on hover */
		color: #842029;
	  }
	}
  
	.pv-notification-badge {
	  position: absolute;
	  top: 0;
	  left: 100%;
	  transform: translate(-50%, -50%);
	  border-radius: 50%;
	  width:fit-content;
	  height: fit-content;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #dc3545;
	  color: #000;
	  font-size: 14px;
	  font-weight: bold;
	//   transition: all 0.3s ease-in-out;
	  opacity: 0.5;
	  pointer-events: none;
	  padding:5px 10px;
	}
  
	&:hover {
	  svg {
		fill:$primary-color;
		transform: scale(1.1); /* Add a slight zoom effect on hover */
	  }
  
	  .pv-notification-badge {
		opacity: 1;
		animation: bounce 0.5s ease infinite; /* Add a bouncing animation on hover */
		color: #842029;
		padding:6px 12px;
	  }
	}

  
	/* Additional animations */
	@keyframes bounce {
	  0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	  }
	  40% {
		transform: translateY(-12px);
	  }
	  60% {
		transform: translateY(-6px);
	  }
	}
  
	@keyframes rotate {
	  0% {
		transform: rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg); /* Add a rotating animation on hover */
	  }
	}
  }
  .pv-notification-col {
	border: 1px solid var(--bs-border-color);
}