/* Migrated from wwwroot/cssNotifications/cssNotifications.css
   - Fixed invalid selector: added missing dot before .dropdown-menu
   - Resolved contradictory overflow/position declarations in .notifications-dropdown
   - Removed redundant/illogical cursor: none declarations
   - Minor cleanup of duplicate properties
*/

.notifications-icon-and-text {
  position: relative;
  height: 120px;
  font-size: 25px;
  /*width: auto;*/
  color: #FAFAFA;
  line-height: 120px;
  transition: background-color 0.3s;
  width: 100px;
  text-align: center;
}

.dropdown.notifications {
  height: 120px;
    position: relative; /* anchor for absolutely positioned dropdown */
}

.notifications-bell-icon {
  font-size: 24px;
  position: relative;
  z-index: 2;
}

.notifications-icon-and-text.has-messages > .notifications-bell-icon {
  transform: rotate(24deg);
}

.notifications-bell-icon-circle {
  opacity: 0;
  position: absolute;
  top: 36px;
  left: 23px;
  width: 50px;
  height: 50px;
  background-color: #5F5F6A;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  cursor: default;
  transition: opacity 0.12s linear;
}

.notifications-icon-and-text:hover .notifications-bell-icon-circle {
  opacity: 1;
}

.notifications-icon-and-text > .bubble {
  display: none;
}

.notifications-icon-and-text.has-messages .bubble {
  /*display: block;*/
  letter-spacing: 0px;
  font-size: 15px;
  line-height: 24.75px;
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #FF6B58;
  border-radius: 50%;
  display: inline-block;
  top: 73.8px;
  margin-top: -35px;
  margin-left: -10.5px;
  opacity: 0.9;
  text-indent: 0px;
  text-align: center;
  cursor: default;
  z-index: 3;
}

.notifications-bell-hover-text-centerer {
  line-height: 0;
  position: absolute;
  width: 200px;
  left: 50px;
  margin-left: -100px;
  height: 30px;
  top: 80.4px;
  z-index: 4;
}

.notifications-bell-hover-text {
  opacity: 0;
  transition: opacity 0.2s linear;
  position: relative;
  display: inline-block;
  border-radius: 8px;
  background-color: #FFF;
  color: #656565;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  letter-spacing: initial;
  padding: 0px 5px 0px 5px;
  pointer-events: none;
  cursor: default;
}

.notifications-icon-and-text:hover .notifications-bell-hover-text {
  opacity: 1;
}

/* FIX: added missing dot before .dropdown-menu */
.notifications-icon-and-text.open .dropdown-menu {
  display: block;
}

.notifications-wrapper {
  position: absolute;
    top: 100%; /* place panel directly below the bell */
    right: 0;  /* align to the right edge of the bell container */
    z-index: 1000;
    display: none; /* hidden by default; shown when host has .open */
}

.notifications-dropdown {
  width: 400px;
  padding: 15px;
  background: #FAFAFA;
  color: #37607F;
  height: calc(100vh - 120px - 90px + 40px);
  border: none;
  margin-left: -2px;
  /* FIX: keep panel non-scrollable; internal container handles scroll */
  overflow: hidden;
  /* FIX: use fixed positioning (remove previous absolute) */
  /*position: fixed;*/
    position: relative; /* positioned within wrapper */
    pointer-events: auto; /* interactive when visible */
  list-style-type: none;
  /*right: -500px;*/
  transition: all linear 0.6s;
  /*pointer-events: none;*/
  /*top: 109px;*/
  border-radius: 9.9px;
  outline: 1px solid #CCCCCC;
}

.container-notifications {
  padding: 11px 7.7px 11px 5.5px;
  border-radius: 5.5px;
  background: #F2F2F2;
  overflow-y: scroll;
  outline: solid 5px #F2F2F2;
  height: calc(100vh - 120px - 70px - 90px - 15px);
  padding-bottom: 20px;
  margin-bottom: 5px;
  padding-right: 10px;
}

#NotificationsRefreshTarget.open .notifications-wrapper  {
  /*right: 0;*/
  /*pointer-events: unset;*/
    display:block;
}

.headline-notifications {
  line-height: initial;
  letter-spacing: 0.1px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 15px;
  width: 173px;
}

.show-only-unread-notifications-text {
  letter-spacing: 0.5px;
  line-height: initial;
  font-size: 12px;
  padding-left: 0px;
  padding-right: 10px;
  padding-top: 3.96px;
  text-align: right;
  width: 226px;
}

.mark-all-as-read-link {
    color: #37607F;
  letter-spacing: 0.5px;
  line-height: initial;
  font-size: 12px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 11px;
}

.mark-all-as-read-link a {
  color: inherit;
  cursor: pointer;
}

.mark-all-as-read-link a:hover {
  color: inherit;
  text-decoration: underline;
}

.header-notifications {
  min-height: 70px;
}

.toggle-group label.btn {
  border-radius: 0;
  background: #2E9AFE;
}

.toggle-handle.btn.btn-light {
  border-radius: 0;
}

.single-notification {
  background-color: #FAFAFA;
  border-radius: 11px;
  padding: 11px;
  letter-spacing: 1px;
  margin-bottom: 11px;
  font-size: 14px;
}

.show-more-small {
  display: none;
}

.show-more-expanded {
  display: none;
}

.single-notification.long-message .show-more {
  display: block;
}

.single-notification.long-message:hover .show-more {
  display: none;
}

.single-notification.expanded-notification .show-more-small {
  display: none;
}

.single-notification.expanded-notification .show-more-expanded {
  display: block;
}

.single-notification .show-more-small {
  display: block;
}

.single-notification .show-more-expanded {
  display: none;
}

.single-notification .show-more {
  display: none;
  color: #00AEEF;
  text-decoration: underline;
  letter-spacing: 0.1px;
  cursor: pointer;
}

.notification-message-text {
  letter-spacing: 0.4px;
  max-height: 100px;
  overflow-y: hidden;
}

.notification-message-text:hover {
  letter-spacing: 0.4px;
  max-height: unset;
  overflow-y: unset;
}

.single-notification.expanded-notification .notification-message-text {
  max-height: 1000px;
}

.single-notification.long-message:hover .notification-message-text {
  max-height: 1000px;
}

.single-notification .message-from {
  letter-spacing: 0;
  font-size: 12px;
}

.single-notification .notification-date {
    letter-spacing: 0;
    font-size: 12px;
}

.single-notification .sender-name {
  font-weight: bold;
  letter-spacing: 0;
  font-size: 12px;
}

.single-notification .wrapper-to-position-blue {
  width: 17px;
  display: inline-block;
  position: relative;
}

.single-notification .dot {
  position: absolute;
  height: 17px;
  width: 17px;
  margin-top: -11.9px;
  margin-left: 0.85px;
  background-color: #2E9AFE;
  border-radius: 50%;
  display: inline-block;
}

.notification-top-dot {
  position: relative;
  height: 14px;
  width: 14px;
  background-color: unset;
  border: 2px solid #CCCCCC;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.9;
  color: #FAFAFA;
  transform: translate(7px, -8.4px);
  cursor: pointer;
  pointer-events: all;
}

.unread .notification-top-dot {
  background-color: #CCCCCC;
}

/* For read notifications, keep showing the hollow grey circle (no fill).
   Previously this indicator was hidden for read items, which contradicted
   the requirement. By not overriding display here, the base style renders
   the same-sized grey circle. */

.top-line-notification {
  height: 17px;
  text-align: right;
}

.refresh-button {
  height: 20px;
  bottom: 0;
}

* {
  scrollbar-width: auto;
  scrollbar-color: #C1D9E3 #FAFAFA;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #FAFAFA;
}

*::-webkit-scrollbar-thumb {
  background-color: #C1D9E3;
  border-radius: 11px;
  border: 3px solid #C1D9E3;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15.6px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #464653;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14.1px;
  width: 14.1px;
  left: 0.6px;
  bottom: 0.3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #4E6B6E;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(14.1px);
  -ms-transform: translateX(14.1px);
  transform: translateX(14.1px);
}

.slider.round {
  border-radius: 15.6px;
}

.slider.round:before {
  border-radius: 50%;
}

.x-and-hook-in-switch {
  position: absolute;
  color: white;
  z-index: 10;
  font-size: 10.2px;
  top: 3px;
}

.small-switch .fa-check {
  left: 3.99999px;
}

.small-switch .fa-xmark {
  left: 18px;
}

.next-20-messages {
  letter-spacing: initial;
  line-height: initial;
  font-size: 11px;
  padding-top: 10px;
  padding-left: 7px;
  color: #777777;
}

.next-20-messages a {
  color: inherit;
  cursor: pointer;
}

.next-20-messages a:hover {
  color: inherit;
  text-decoration: underline;
}

.notifications-wrapper.no-unread-messages.only-show-unread .next-20-messages {
  display: none;
}

.only-show-unread .was-read {
  display: none;
}

.no-unread-messages-display-container {
  display: none;
  text-align: center;
}

.notifications-wrapper.no-unread-messages.only-show-unread .no-unread-messages-display-container {
  display: block;
}

.no-unread-messages-text {
  letter-spacing: initial;
  line-height: initial;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 7px;
  color: #444; /* FIX: keep single desired color */
}

#NoUnreadMessagesDog {
  display: none;
}

#NoUnreadMessagesDog.show-dog {
  display: block;
}

#NoUnreadMessagesDog.hide-dog {
  display: none;
}

.dog-image {
  display: inline-block;
  margin-top: 40px;
  width: 60px;
  height: 60px;
  background-image: url(../images/dog.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Empty state for notifications list */
.notifications-empty-state {
  /* Place near the top of the list */
  display: block;
  margin: 16px 16px 8px 16px; /* margin to each side */
  text-align: center;
}

.notifications-empty-state .dog-image {
  margin-top: 8px; /* smaller gap in the compact empty state */
}

.notifications-empty-text {
  margin-top: 8px;
  font-size: 12px; /* small text below the image */
  color: #666;
}

/* Text shown when there are no more notifications to load */
.no-more-notifications-text {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: #777777;
}

li a.notification-link {
  transition: unset;
  cursor: pointer;
}

a.notification-link {
  color: unset;
}