/* Notification icon - header */
.js_notification-wrapper {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 0 !important;
    margin-right: 30px;
}

.notification-header {
    border: none;
    background-color: transparent;
    outline: none !important;
    cursor: pointer;

}
.notification-header::focus {
    outline: none !important;
}

 .notification-container {
    position: relative;
}



.notification-header::after {
    content: '';
    position: absolute;
    bottom: -13px;
    right: -6px;
    border-bottom: 15px solid #fff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    z-index: 1;
    display: none;
    z-index: 99999;
}
.notification-header.active-bell::after{
    display: block;
}

.notification-container .total-notif {
	display: block;
    position: absolute;
    top: -4px;
    left: 17px;
    background-color: var(--main-color);
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 11px;
}

.notification-container .total-notif.has-notif {
	display: block;
}

.notification-container .notification-list,
.notification-container .page-notification-list {
    position: absolute;
    top: 32px;
    right: -20px;
    background-color: #fff;
    border: 1px solid #eee;
    width: 440px;
    border-radius: 8px;
    box-shadow: 3px 2px 14px 0px rgba(0,0,0, 0.1);
    max-height: 255px;
    z-index: 999;
    overflow: hidden;
    display: none;
}
.notification-container .page-notification-list {
    display: block;
    position: relative;
    top: initial;
    right: initial;
    width: 100%;
}


.notification-container .notification-list::after {
    position: absolute;
    content: '';
    width: 100%;
    bottom: 0px;
    background: linear-gradient(180deg, rgba(255,255,255,0.36318277310924374) 50%, rgba(255,255,255,1) 100%);
    height: 45px;
}
.notification-container .icon-right-arrow ,
.notification-page .icon-right-arrow {
   filter: var(--filter-main);
   content: url("data:image/svg+xml,%3Csvg width='16px' height='16px' viewBox='0 -6.5 36 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='icons' stroke='none' stroke-width='4' fill='none' fill-rule='evenodd'%3E%3Cg id='ui-gambling-website-lined-icnos-casinoshunter' transform='translate(-212.000000, -159.000000)' fill='%239c64f4' fill-rule='nonzero'%3E%3Cg id='square-filled' transform='translate(50.000000, 120.000000)'%3E%3Cpath d='M187.108012,39.2902857 L197.649804,49.7417043 L197.708994,49.7959169 C197.889141,49.9745543 197.986143,50.2044182 198,50.4382227 L198,50.5617773 C197.986143,50.7955818 197.889141,51.0254457 197.708994,51.2040831 L197.6571,51.2479803 L187.108012,61.7097143 C186.717694,62.0967619 186.084865,62.0967619 185.694547,61.7097143 C185.30423,61.3226668 185.30423,60.6951387 185.694547,60.3080911 L194.702666,51.3738496 L162.99947,51.3746291 C162.447478,51.3746291 162,50.9308997 162,50.3835318 C162,49.8361639 162.447478,49.3924345 162.99947,49.3924345 L194.46779,49.3916551 L185.694547,40.6919089 C185.30423,40.3048613 185.30423,39.6773332 185.694547,39.2902857 C186.084865,38.9032381 186.717694,38.9032381 187.108012,39.2902857 Z M197.115357,50.382693 L186.401279,61.0089027 L197.002151,50.5002046 L197.002252,50.4963719 L196.943142,50.442585 L196.882737,50.382693 L197.115357,50.382693 Z' id='right-arrow'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.notif-link {
    display: flex; 
    gap: 8px;
    font-size: 16px;
    font-weight: normal;
}
.notification-container .notif-date,
.notif-date {
    color: #8C8C8C;
    font-size: 16px;
    line-height: 24px;

}
.notification-container .notification-list .notification-heading {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.notification-container .notification-list {
   
}

 .notification-container .notification-list ul.notifications {
    padding: 0;
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    max-height: 255px;
    padding-bottom: 100px;
}

.notification-container .notification-list ul.notifications > li {
    padding: 24px;
    font-size: 14px;
    line-height: 1.3;
    position: relative;
}
.notification-container .notification-list ul.notifications > li.read {
    background: #fff;
}
.notification-container .notification-list ul.notifications > li.blank-notif {
    text-align: center;
    padding: 16px;
    background: whitesmoke;
    border: 10px solid #fff;
    border-radius: 20px;
    font-size: 16px;
    line-height: 16px;
}
.notification-container .notification-list ul.notifications > li a.read-btn {
    position: absolute;
    right: 15px;
    top: 15px;
}

.notification-container .page-notification-list ul.notifications > li a.read-btn  {
    right: 40px;
}

.notification-container .page-notification-list  ul.notifications > li a.delete-btn {
    position: absolute;
    right: 15px;
    top: 15px;
}
 .notification-container .notification-list ul.notifications > li:not(:last-child) {
/*	border-bottom: 1px solid #eee;*/
}

 .notification-container .notification-list ul.notifications > li .notif-author {
    font-weight: 500;
    color: var(--main-color);
    display: block;
    margin-bottom: 5px;
}

 .notification-container .notification-list ul.notifications > li .notif-title {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

 .notification-container .notification-list ul.notifications > li .notif-content {
    display: block;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400;
    margin-bottom: 5px;
}

.notification-container .notification-list .notification-footer .view-all {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
}
.notification-container .notification-list .notification-footer .view-all:hover
{
    color: var(--main-color);
}

@media only screen and (max-width: 600px) {
	.js_notification-wrapper {
	margin-right: 15px;
	}
}

.notification-page .loading {
    display: none;
}
.notification-page .notification-page-title {
    display: flex;
    margin-bottom: 45px;
    justify-content: space-between;
    align-items: center;
}
.notification-page .notification-page-title .mark-allread {
     color: var(--main-color) !important;
     font-size: 16px;
     cursor: pointer;
}
.notification-page h2 {
    color: #262626;
    font-family: var(--main-font);
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
}
.notification-page .avatar-author {
    width: 70px;

}
.notification-page .notif-contents {
    width: calc(100% - 315px);
}

.notification-page .notif-contents .notif-link:hover {
    color: var(--main-color);
}
.notification-page .notif-date {
    color: #8C8C8C;
    font-size: 16px;
    line-height: 24px;
}
.notification-page .notif-message{
    margin-bottom: 8px;
    margin-top: 8px;
    display: block;
}
.notification-page .notif-contents p {
    margin-bottom: 0px;
}
.notification-page .notif-action {
    width: 133px;
    position: absolute;
    right: 0px
}
.notif-action a {
    cursor: pointer;
}
.notif-action a.read-btn,
.notif-action span.read-label {
    border-radius: 16px;
    padding: 14px 16px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}

.notif-action span.read-label {
    border: 2px solid #DDDDDD;
    color: #DDDDDD !important;
    width: 100%;
}
.notif-action a.read-btn {
    border: 2px solid var(--main-color);
    color: var(--main-color) !important;
}
.notif-action a.read-btn:hover {
    color: var(--main-color) !important;
}
.notif-action a.read-btn:hover{
    background-color: var(--main-color);
    color: #fff !important;
}
.notification-page .avatar-author img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    object-fit: cover;

}
.notification-page .notification-list {
    display: flex;
    gap: 30px;
    margin-bottom: 35px;
}
.notification-lists.loadings {
    opacity: 0.5;
}

.long-operation-btn {
  font-weight: 700;
  width: 400px;
  margin: 0 auto;
  letter-spacing: 2px;
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-transform: uppercase;
  color: grey;
  border: 2px solid grey;
  transition: background-color 300ms ease 100ms, color 100ms ease 300ms, border-radius 300ms ease 100ms, width 300ms ease 100ms, border 300ms ease 100ms;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 40px;
  text-align: center;
}
.long-operation-btn span {
  transition: all 0.2s ease-in-out;
  padding: 8px 20px;
}
.long-operation-btn.show-feedback span:first-of-type {
  margin-top: -37px;
}
.long-operation-btn.long-operation-started {
  color: transparent;
  width: 40px;
  height: 40px;
  animation: rotate 500ms linear infinite;
  animation-delay: 300ms;
  background-color: transparent;
  border: 2px solid grey;
  border-radius: 150px;
  border-top-color: white;
  padding: 0;
  pointer-events: none;
  transition: background-color 300ms ease, color 100ms ease, border-radius 300ms ease, width 300ms ease, border 300ms ease;
}
.load-more-wrapper {
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    display: block;
}
.load-more-wrapper .load-more-button {
    padding: 10px 16px;
    border-radius: 4px;
    outline: none;
    border: none;
    background: var(--main-color);
    color: #fff;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.load-more-wrapper .load-more-button .icon-loading {
    content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
  display: none;
}

/* CSS for the notification popup */
.notification-popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: block;
    background-color: #fff;
width: 100%;
max-width: 960px;
min-height: 400px;
border-radius: 16px;
padding: 95px 120px;
  width: 90%;
  z-index: 9999;
  overflow: scroll;
      height: 90vh;
}
.notification-popup iframe {
    width: 100%;
    height: 460px;
    border-radius: 10px;
    border: none;
}
.notification-popup-content .notif-content * {
    margin-bottom: 10px;
}
.notification-popup-content .notif-content p {
    font-size: 16px;
    line-height: 26px;
}

.notification-popup p {
  margin: 0;
}

.notification-popup h3 {
  margin-top: 0;
}

.notification-popup-inner {
  overflow-y: auto;
  max-height: 300px; /* Set a maximum height if you want the popup to be scrollable */
}

.notification-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Style for the backdrop overlay (optional) */
.notification-popup {
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 999;
    content: '';
    height: 100%;
    width: 100%;
    display: none;
}
.notification-popup .notif-date,
.notification-popup .notif-excerpt {
    margin-bottom: 20px;
}
.notification-popup .notif-excerpt {
    font-size: 16;
    line-height: 26px;
}
.notification-popup .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 30px;
    color: #fff;
    background: var(--main-color);
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 100%;
    line-height: 40px;
}


@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}


@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
    .notification-page .notif-contents {
        width: 100%;

    }
    .notification-page .notification-list {
        display: block;
    }
    .notif-action {
        position: relative;
    }
    .notif-action a.read-btn,
    .notif-action span.read-label {
        border-radius: 16px;
        padding: 10px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
    }
    .notification-container .notification-list{
        width: 100vw;
        left: 0px;
        position: fixed;
        top: 50px
    }
  }