:root{
	--note-maincolor: #005f94;
	--note-lightcolor: #314b7d;
	--note-notificationbadge: #d13c3c;
}
.light-content .notification-btn {color:#FFF;}
.fullscreen-menu.no_transparency.head-scroll .notification-btn {color:#000;}
.notification-btn {display: inline-block; border:0; background:none; padding:14px; font-size: 16px; margin-top:10px;}

.popup-notification {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
  max-width: 95%;
  background: white;
  border-radius: 0px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  word-wrap: break-word;
  text-align: left;
  z-index: 99999;
  padding:20px;
}

.background-popup-notification {
  position: fixed;
  background-color: black;
  width: 500%;
  height: 500%;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: 99998;
  transition-duration: 0.3s;
}
.notification-buttons.p-row,
.popup-notification .p-row {
    display: flex;
    flex-wrap: wrap;        /* permette di andare a capo */
    margin-left: -15px;     /* come Bootstrap */
    margin-right: -15px;
}

.notification-buttons.p-row .col-btn,
.popup-notification .p-row .col-btn {
    width: 100%;             /* col-6 */
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}


@media (min-width: 768px) {
.notification-buttons.p-row .col-btn,
.popup-notification .p-row .col-btn  {
        width: 50%;
    }
}


.notification-buttons button,
.popup-notification button {width: 100%;}


#notification_edge .badge_active {background-color:var(--note-notificationbadge); color:#FFF; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 10px; border-radius: 50%;
	position: absolute; top:4px; right:-5px;
}
#notification_edge {position: relative;}
#notification_edge span.full {display: none;}
.button-notification { align-items: center;
	background-color: var(--note-lightcolor);
	border-radius:2px;
	color: #fff;
	display: flex;
	font-size: 16px;
	justify-content: center;
	padding: 10px 24px;
	text-decoration: none;
	transition: all .3s;
    border:0px;
}

button.button-notification:disabled,button.button-notification[disabled] {background-color: #d2d2d2; cursor: not-allowed}

#notificationModal .modal-content{border-radius: 0px; 	border-radius: 30px 0px 30px 30px;}

.paginate-notification.popup-notification {display: block!important;}

.popup-notification .notification-header {margin-bottom: 10px; text-align: center;}
.popup-notification .notification-header h3 {color:var(--note-lightcolor); font-size:22px; line-height: normal;}
.popup-notification .notification-footer {margin-top:10px;}

.popup-notification .notification-body {overflow-x: auto; max-height: 500px;}

.notification-list .badge {font-size: 12px; background: var(--note-lightcolor); color:#FFF; padding:5px 8px; border-radius: 0px}
.notification-list .badge.badge-updated {background-color: #fd9000}
.notification-list .badge.badge-custom {background-color: #00a1fd}
.notification-list .badge.badge-new {background-color:#79a641 }
ul.notification-list {padding:0px; margin:0px; list-style: none;}
ul.notification-list li {border-bottom:1px solid #efefef; padding: 20px 15px; display: flex; justify-content: center; align-items: center; transition: all 0.4s; /*border-radius: 20px 20px 0px 20px;*/}
ul.notification-list li.selected-one {background-color: #ffd1d1!important;}

ul.notification-list li:last-child {border:0px;}
ul.notification-list h4 {font-size: 18px; line-height: normal; color: var(--note-maincolor);}
ul.notification-list h4 a {text-decoration: none; color: var(--note-maincolor);}
ul.notification-list .check { width: 40px; }
ul.notification-list .go { width: 40px; margin-left: auto;}
ul.notification-list .go a {background:var(--note-lightcolor); width: 40px; height: 40px; line-height: 46px; text-align: center; display: block; border-radius: 20px; transition: all 0.4s;}
ul.notification-list .go a svg {fill:#FFF;}
ul.notification-list .go a:hover {background:var(--note-maincolor);}
ul.notification-list .text {width: 100%; margin-right: 10px;}
ul.notification-list .text p {font-size: 16px; line-height: 24px; margin-bottom:15px;}


/* Checkbox */
.notification-list input[type="checkbox"] { -webkit-appearance: none; appearance: none; background-color: #fff;margin: 0; }
.notification-list input[type="checkbox"] {appearance: none; background-color: #fff; margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 0.15em solid currentColor; border-radius: 0.15em; transform: translateY(-0.075em);}
.notification-list input[type="checkbox"] { display: grid; place-content: center; cursor: pointer; }

.notification-list input[type="checkbox"]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--note-lightcolor); }
.notification-list input[type="checkbox"]:checked::before { transform: scale(1);}
/* Checkbox */



.popup-notification .notification-overflow {background-color:rgba(255,255,255,0.9); position: absolute;top:0px; left:0px; bottom:0px; right:0px; width:100%; z-index: 9; background-image: url('loader.svg'); background-position: center center; background-repeat: no-repeat; display: none; transition: all 0.4s;}


.popup-notification .no-posts-available {height: 200px; text-align: center;justify-content: center; align-self: center;}
.popup-notification .no-posts-available .icon {height: 90px; width: 90px; margin-top:20px;}

.popup-notification .notification-close {background:var(--note-maincolor); position:absolute; width:40px; height:40px; text-align:center; line-height:50px; right:-20px; top:-20px; border-radius:40px; border:0px;}
.popup-notification .notification-close svg {fill:#FFF; width:20px; height:20px;}

.note-row {text-align: center; border-top:1px solid var(--note-lightcolor); margin-top:20px; padding-top:20px;}
.note-row a {font-weight: bold; text-decoration: none; color:var(--note-maincolor); transition: all 0.4s; display:inline-flex;}
.note-row a:hover {color:var(--note-lightcolor)}
.note-row a svg {width: 24px; height: 24px; margin-left: 5px;transition: all 0.4s;}
.note-row a:hover svg {margin-left:8px;}
.note-row p {margin-bottom:0px;}

/* Notification Page */
#user-notifications-actions,
.user-notifications-page-wrapper {max-width: 800px; margin:0 auto;}
.user-notifications-navigation {margin-bottom: 80px;}
.user-notifications-page-wrapper ul li.to-visit {background-color:#eeffec}
/*ul.notification-list li.visited {filter: saturate(0%); opacity: 0.5}*/
.notifications-page-overlay {background-image: url('loader.svg'); background-position: center center; background-repeat: no-repeat; width: 100%; min-height: 400px;}

#user-notifications-actions {margin-top: 20px; margin-bottom: 20px; display: none;}
#notification_edge:disabled {cursor: initial;}
/* Notification Page */


/* Datatable notification */
div.dataTables_wrapper div.dataTables_processing {height: auto!important;}
/* Datatable notification */

@media (max-width: 568px){
  ul.notification-list h4 {font-size: 16px!important;}
  ul.notification-list p {font-size:12px;}
  .popup-notification .notification-close {right:-10px; top:-10px;}
  .popup-notification {padding:15px;}
  .popup-notification ul.notification-list li {padding:10px; margin-bottom:10px;}
}



/* Ring animation */
#notification_edge span.full {
	-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;
}

@-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); }
}
/* Ring animation */