.header-action .notification-user .notification-dropdown-btn .notification-count {
  text-align: center;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-white);
  border-radius: 50%;
  height: 22px;
  width: 22px;
  line-height: 19px;
  position: absolute;
  top: -30px;
  right: -12px;
}
.header-action .notification-user .notification-dropdown-btn {
  font-size: 30px;
}
.header-action .notification-user .notification-dropdown-btn i {
  font-weight: 200;
}

.header-action .notification-user {
  position: relative;
}

.header-action .notification-user .notification-user-dropdown {
  position: fixed;
  right: -600px;
  top: 0;
  bottom: 0;
  z-index: 101;
  transition: all .5s cubic-bezier(0.55, 0, 0.1, 1);
}

.header-action .notification-user .notification-user-dropdown .notification-content-wrap {
  background-color: var(--color-white);
  width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header-action .notification-user .notification-user-dropdown .notification-header {
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #f6f7fb;
}

.header-action .notification-user .notification-user-dropdown .notification-header .header-title {
  font-size: 26px;
  color: #27272e;
  margin-bottom: 0;
}

.header-action .notification-user .notification-user-dropdown .notification-header .notification-close {
  height: 40px;
  width: 40px;
  font-size: 16px;
  color: var(--color_black);
  border-radius: 50%;
}

.header-action .notification-user .notification-user-dropdown ul {
  max-height: calc(100vh - 113px);
  overflow: auto;
}

.header-action .notification-user .notification-user-dropdown ul::-webkit-scrollbar-track
{
	background: #f1f1f1;
  border-radius: 10px;
  transition: .5s;
}

.header-action .notification-user .notification-user-dropdown ul::-webkit-scrollbar
{
	width: 8px;
  border-radius: 10px;
}

.header-action .notification-user .notification-user-dropdown ul::-webkit-scrollbar-thumb
{
	background: var(--color-lightest);
  border-radius: 10px;
  transition: .5s;
}

.header-action .notification-user .notification-user-dropdown ul li {
  padding: 15px 20px 15px 30px;
  border-bottom: 1px solid #eeeeee;
}

.header-action .notification-user .notification-user-dropdown.open {
    right: 0;
}

@media only screen and (max-width: 767px) {
  .header-action .notification-user .notification-user-dropdown {
    width: 100%;
    right: -100%;
  }
  .header-action .notification-user .notification-user-dropdown .notification-header {
    padding: 20px;
  }
  .header-action .notification-user .notification-user-dropdown .notification-content-wrap {
    width: 100%;
  }
  .header-action .notification-user .notification-user-dropdown ul li {
    padding: 15px 20px;
  }
  .header-action .notification-user .notification-user-dropdown.open {
    padding-bottom: 57px;
  }
}

@media only screen and (max-width: 479px) {
  .header-action .notification-user .notification-dropdown-btn {
    font-size: 22px;
  }
  .header-action .notification-user .notification-dropdown-btn .notification-count {
    top: -22px;
  }
}

.header-action .notification-user .notification-user-dropdown ul {
  list-style: none;
  padding-left: 0;
}

.header-action .notification-user .notification-user-dropdown li {
  margin: 0;
}
.header-action .notification-user .notification-user-dropdown li.unread {
  background: #F5F5F5;
}
.header-action .notification-user .notification-user-dropdown li a {
  font-size: 16px;
  color: var(--color-primary);
  /* display: block; */
}
.header-action .notification-user .notification-user-dropdown li a p {
  font-weight: 600;
  font-size: 13px;
}
.header-action .notification-user .notification-user-dropdown li:hover > a {
  color: var(--color-primary);
}
.header-action .notification-user .notification-user-dropdown .axil-btn {
  padding: 10px 35px;
  width: 100%;
}
.header-action .notification-user .notification-user-dropdown .reg-footer .btn-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.header-action .notification-user .notification-user-dropdown .load-more {
  text-align: center;
  display: none;
}
.header-action .notification-user .notification-user-dropdown .btn-load-more {
  font-size: 14px;
}

.header-action .notification-user .notification-user-dropdown .btn-load-more:focus {
  border-color: #faf9fa;
}

.header-action .notification-user .notification-user-dropdown .btn-load-more:active {
  border-color: #babbbc;
}

.axil-mainmenu .preview-notification-new {
    background-color: red;
    padding: 8px;
    text-align: center;
    color: #fff;
    position: fixed;
    width: 200px;
    height: 100px;
    z-index: 1000;
    left: 14px;
    border-radius: 10px;
    cursor: pointer;
    animation: change-color-anim 5s linear infinite;
}
.bell{
    display:block;
    width: 40px;
    height: 40px;
    font-size: 40px;
    margin: 10px auto 0;
    color: #9e9e9e;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@keyframes change-color-anim {
    0%,100%{
        background-color: red;
    }
    50%{
        background-color: orange;
    }
}
@-webkit-keyframes ring {
    0% { -webkit-transform: rotateZ(0); }
    1% { -webkit-transform: rotateZ(30deg); }
    3% { -webkit-transform: rotateZ(-28deg); }
    5% { -webkit-transform: rotateZ(34deg); }
    7% { -webkit-transform: rotateZ(-32deg); }
    9% { -webkit-transform: rotateZ(30deg); }
    11% { -webkit-transform: rotateZ(-28deg); }
    13% { -webkit-transform: rotateZ(26deg); }
    15% { -webkit-transform: rotateZ(-24deg); }
    17% { -webkit-transform: rotateZ(22deg); }
    19% { -webkit-transform: rotateZ(-20deg); }
    21% { -webkit-transform: rotateZ(18deg); }
    23% { -webkit-transform: rotateZ(-16deg); }
    25% { -webkit-transform: rotateZ(14deg); }
    27% { -webkit-transform: rotateZ(-12deg); }
    29% { -webkit-transform: rotateZ(10deg); }
    31% { -webkit-transform: rotateZ(-8deg); }
    33% { -webkit-transform: rotateZ(6deg); }
    35% { -webkit-transform: rotateZ(-4deg); }
    37% { -webkit-transform: rotateZ(2deg); }
    39% { -webkit-transform: rotateZ(-1deg); }
    41% { -webkit-transform: rotateZ(1deg); }

    43% { -webkit-transform: rotateZ(0); }
    100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
    0% { -moz-transform: rotate(0); }
    1% { -moz-transform: rotate(30deg); }
    3% { -moz-transform: rotate(-28deg); }
    5% { -moz-transform: rotate(34deg); }
    7% { -moz-transform: rotate(-32deg); }
    9% { -moz-transform: rotate(30deg); }
    11% { -moz-transform: rotate(-28deg); }
    13% { -moz-transform: rotate(26deg); }
    15% { -moz-transform: rotate(-24deg); }
    17% { -moz-transform: rotate(22deg); }
    19% { -moz-transform: rotate(-20deg); }
    21% { -moz-transform: rotate(18deg); }
    23% { -moz-transform: rotate(-16deg); }
    25% { -moz-transform: rotate(14deg); }
    27% { -moz-transform: rotate(-12deg); }
    29% { -moz-transform: rotate(10deg); }
    31% { -moz-transform: rotate(-8deg); }
    33% { -moz-transform: rotate(6deg); }
    35% { -moz-transform: rotate(-4deg); }
    37% { -moz-transform: rotate(2deg); }
    39% { -moz-transform: rotate(-1deg); }
    41% { -moz-transform: rotate(1deg); }

    43% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
}

@keyframes ring {
    0% { transform: rotate(0); }
    1% { transform: rotate(30deg); }
    3% { transform: rotate(-28deg); }
    5% { transform: rotate(34deg); }
    7% { transform: rotate(-32deg); }
    9% { transform: rotate(30deg); }
    11% { transform: rotate(-28deg); }
    13% { transform: rotate(26deg); }
    15% { transform: rotate(-24deg); }
    17% { transform: rotate(22deg); }
    19% { transform: rotate(-20deg); }
    21% { transform: rotate(18deg); }
    23% { transform: rotate(-16deg); }
    25% { transform: rotate(14deg); }
    27% { transform: rotate(-12deg); }
    29% { transform: rotate(10deg); }
    31% { transform: rotate(-8deg); }
    33% { transform: rotate(6deg); }
    35% { transform: rotate(-4deg); }
    37% { transform: rotate(2deg); }
    39% { transform: rotate(-1deg); }
    41% { transform: rotate(1deg); }

    43% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

#kt_modal_notification-detail .modal-content .modal-header {
  padding: 15px 10px 15px 20px;
}

#kt_modal_notification-detail .modal-content .modal-header h2 {
  margin-bottom: 0;
    font-size: 24px;
    font-weight: 600 !important;
}

#kt_modal_notification-detail .modal-content .modal-body {
  padding: 20px 0;
}

#kt_modal_notification-detail .modal-content .modal-body .text-center {
  padding-top: 3rem;
}

#kt_modal_notification-detail .modal-content .modal-body .text-center button {
  font-size: 16px;
  line-height: 28px;
  max-width: 120px;
  background: #009ef7;
  border-color: #009ef7;
}

.indicator-progress {
  display: none;

  [data-kt-indicator="on"] > & {
      display: inline-block;
  }
}

.indicator-label {
  [data-kt-indicator="on"] > & {
      display: none;
  }
}