.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  margin-right: 10px;
}
.switch input { display: none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--slider-background);
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background-color: var(--slider-background-before);
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--input-checked);
}
input:checked + .slider:before {
  transform: translateX(24px);
}
.switch-label-text {
  font-weight: bold;
  vertical-align: middle;
  position: relative;
  top: -12px;
  color: var(--input-text);
}
@media (max-width: 768px) {
	.col-sm-8 {
		margin-left:120px !important;
	  }
	 
	.card-img{
		padding-right:20px;
	}

}
.btn-primary {
    background: var(--button-primary-background);
    color: var(--button-primary-text);
}


.checkbox-toggle input[type="checkbox"] {
  display: none;
}

.checkbox-toggle .slider {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  vertical-align: middle;
  margin-right: 10px;
  transition: background-color 0.2s ease;
}

.checkbox-toggle .slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background: var(--input-background);
  border-radius: 50%;
  transition: 0.2s;
}

.checkbox-toggle input:checked + .slider {
  background-color: var(--input-checked);
}

.checkbox-toggle input:checked + .slider::before {
  transform: translateX(22px);
}

.col-md-1{
	padding-left:0px;
	padding-right:0px;
	min-width:80px;
}
.sidebar-block ul li {
	padding-left:0px !important;
	padding-right:0px !important;
}
nav>li>a {
    text-shadow: 0 -1px 0 red;
}
nav>li>a:hover{
	background:var(--link-hover);
}
.user_bit{
	color: var(--link-hover);
}
.user_bit:hover{
	color: var(--link-hover);
}
.navbar-nav>.open>a {
	background: var(--link-hover);
	color: var(--link-active-text)
}

video::-webkit-media-controls-panel {
   background-image: none !important;
   filter: brightness(0.9);
  }
body {
  background: var(--page-background);
  font-family: Arial, Helvetica, sans-serif;
}

.feed-content-stats {
  border-top: 1px solid var(--card-border);
  font-size: 11px;
  margin-top: 10px;
  padding: 0px;
  padding-left: 19px;
}

.user-slide-wrapper {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  position: fixed;
  inset: 0;
  background: var(slider-wrapper);
  z-index: 1055;
}

.user-slide-wrapper.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.user-slide-menu {
  position: absolute;
  right: 0;
  width: 80vw;
  max-width: 300px;
  height: 100vh;
  background: var(--slider-background-before);
  box-shadow: -2px 0 8px var(--slider-box-shadow);
  transform: translateX(100%);
  transition: transform 0.7s ease;
  padding: 20px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
}

.user-slide-wrapper.active .user-slide-menu {
  transform: translateX(0);
}

.user-slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-background);
  color: var(--header-text);
  padding:10px;
}

.user-slide-header span {
  cursor: pointer;
  font-size: 24px;
}

#closeUserMenu{
  /* size + shape */
  width:32px;
  height:32px;
  border-radius:50%;
  padding:0;

  /* centring the “×” nicely */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:18px;

  /* theming */
  background:var(--button-close-background);
  color:var(--button-close-text);
  border:1px solid var(--button-close-border);
  cursor:pointer;
}

#closeUserMenu:hover{ background:var(--button-close-background-hover); }

#closeUserMenu:focus{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}


#closeUserMenu:hover{
	background:var(--button-close-background-hover);
}

.user-slide-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.user-slide-links li {
  margin-bottom: 7px;
}

.user-slide-links a {
  text-decoration: none;
  color: var(--button-primary-text-off);
  background:var(--button-primary-background-off);
  font-size: 16px;
  display: block;
  padding: 6px 0;
}
/* HERE */
.user-slide-links a:hover {
  color: var(--link-hover);
}

.user-slide-links li.active a {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border-radius: 4px;
  padding-left: 12px;
}

.user-slide-links li.active a:hover {
  color: var(--link-active-text);
  text-decoration: none;
}

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
  .menu-icon-mobile{
	  font-size:20px;
	  padding-bottom:1px;
  }
  .btn-default {
	  color:#a50364;
  }
}
/* Hide on large screens */
.show-on-mobile {
  display: none !important;
}

/* Show only on mobile */
@media (max-width: 767px) {
  .show-on-mobile {
    display: list-item !important;
  }
}
.modal-header {
    background: var(--header-background);
    border-radius: 4px 4px 0px 0px;
    color: var(--header-text);
}
.emoji-icon {
    color: #a00361 !important; /* or any dark colour you prefer */
    font-size: 18px; /* optional */
}


.box-header {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.box-header-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

.box-header-avatar,
.box-header-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 50;
    color: var(--header-text);
}

.box-header-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--header-text);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.box-header-name {
    margin-left: 70px; /* to give space next to avatar */
    font-size: 18px;
    font-weight: bold;
	background: var(--header-background);
	color: var(--header-text);
	padding-left: 10px;
	padding-right:10px;
	padding-top:10px;
	border-radius: 15px;
	
}

.box-header-name .blog-date {
    font-size: 14px;
    opacity: 0.85;
	margin-bottom:0px;
}
@media (max-width: 767px) {
	.white-12{
		margin-left:15px;
	}
  .box-header-avatar,
  .box-header-name {
    bottom: 10px; /* move closer to bottom edge */
  }

  .box-header-avatar img {
    width: 40px;
    height: 40px;
    border: 1px solid var(--header-border);
  }

  .box-header-name {
    margin-left: 50px;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .box-header-name .blog-date {
    font-size: 12px;
  }
}


.feed-content-stats{
	margin-left:10px;
}
a {
    color: var(--badge-text);
    text-decoration: none;
}
.faded-icon {
    color: var(--playlist-icon-inactive);
}
.faded-icon-feed {
    color: var(--button-primary-text-off);
}
.feed-content-stats {
    border-top: 1px solid var(--badge-border);
}
.active-comment-like {
    font-weight: bold;
    color: var(--link-active-text);
}
a:hover, a:focus {
    color: var(--link-hover-text);
    text-decoration: underline;
}


.typing-indicator{
  display:none;
  position:absolute;
  left:10px;
  bottom:45px;
  color: var(--typing);
}

.typing-indicator{ font-size:20px; margin:6px 8px; min-height:18px; }
.typing-indicator::after{ content:' '; display:inline-block; width:2ch; text-align:left; animation: typingDots 1.2s steps(4) infinite; }
@keyframes typingDots{ 0%{content:' '} 25%{content:' .'} 50%{content:' ..'} 75%{content:' ...'} 100%{content:' '} }

.qrbox-12{
	padding-right:20px !important;
}
.page-block-page {
    margin-top: 0px;
}

/* stop */

            *{
                margin:0;
                padding:0;
                border:0;
            }
            a{ 
                text-decoration: none; 
            }

            .hap-music-player-force-hidden{
                opacity: 0!important;
                display: none;
                pointer-events:none!important;
            }


            #hap-wrapper{
                position:fixed;
                width:100%;
                max-width: none;
                bottom:-500px;
                left:0;
                font-family: Arial, Helvetica, sans-serif;
                min-width: 310px;   
                line-height:normal!important;
                z-index:50;
                display: none;
            }


            *{
                margin:0;
                padding:0;
                border:0;
            }
            a{ 
                text-decoration: none; 
            }

            .hap-music-player-force-hidden{
                opacity: 0!important;
                display: none;
                pointer-events:none!important;
            }


            #hap-wrapper{
                position:fixed;
                width:100%;
                max-width: none;
                bottom:-500px;
                left:0;
                font-family: Arial, Helvetica, sans-serif;
                min-width: 310px;   
                line-height:normal!important;
                z-index:50;
                display: none;
            }




    .album-scroll {
      display: flex;
      overflow-x: auto;
      padding: 10px 0;
      gap: 15px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .album-item {
      flex: 0 0 auto;
      width: 150px;
      scroll-snap-align: start;
      position: relative;
    }

    .album-item img {
      width: 100%;
      height: auto;
      border-radius: 6px 6px 0 0;
      display: block;
    }

    .album-play-button {
      position: absolute;
      top: 35%;
      left: 50%;
	  width: 50px;        /* force equal width/height */
		height: 50px;
      transform: translate(-50%, -50%);
      font-size: 30px;
      background-color: rgba(0, 0, 0, 0.2);
      color: var(--player-buttons);
    padding-top: 7px;
    padding-left: 12px;

      border-radius: 100%;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .album-play-button:hover {
      background-color: var(--player-buttons-hover);
      color: white;
    }

    .album-name {
		font-size: 12px;
		font-weight: bold;
		background: var(--card-background);
		color: var(--card-text);
		padding: 6px 10px;
		border-radius: 10px;
		text-align: center;
		height: 45px;
		overflow: hidden;
		position: relative;
    }


    .album-plays {
      font-size: 10px;
      font-weight: normal;
      text-align: left;
      position: absolute;
      bottom: 4px;
      left: 10px;
      right: 10px;
      color: var(--player-text);
    }
	.player-small {
      font-size: 10px;
      font-weight: normal;
      text-align: left;
      position: relative;
      bottom: 4px;
      left: 10px;
      right: 10px;
      color: var(--player-text);
    }
	
	#hap-playlist-list {
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
}

#playlist-audio2 {
  display: flex;
  flex-direction: column;
  gap: 8px; /* space between items (optional) */
}





/* Keep thumbnail at fixed size */
.hap-playlist-item-content {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.hap-playlist-thumb {
  flex: 0 0 auto;
  width: 50px;
  height: 35px;
  overflow: hidden;
  border-radius: 6px;
  border:1px solid var(--player-border);
}

.hap-thumbimg {
  height: 35px;
  width: 50px;
  object-fit: cover;
  display: block;
}

/* Title block sits to the right */
.hap-playlist-info {
  flex: 1 1 auto;
  padding-left: 10px;
  color: var(--player-buttons);
}

.hap-playlist-title-wrap {
  display: block;
  align-items: baseline;
  flex-wrap: wrap;
}



.hap-playlist-title-num {
  margin-right: 5px;
  font-weight: bold;
  color: var(--playlist-text);
}

.hap-playlist-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--playlist-title);
  line-height:1.5;
}

/* Stats bar */
.hap-stats {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 12px 0;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--playlist-text);
}

.hap-play-count,
.hap-like-count,
.hap-download-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--playlist-text);
  cursor: pointer;
}

.hap-stats i {
  font-size: 14px !important;
  color: var(--playlist-text);
  line-height: 1;
}

.hap-stats span {
  color: var(--playlist-text);
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Highlight for selected track */
.hap-playlist-item-selected .hap-stats i,
.hap-playlist-item-selected .hap-stats span {
  color: var(--playlist-text);
}

	@media all and (orientation:landscape) and (max-width: 940px){
      /* Styles for Landscape screen */
  
 body::before {
    content: "Please rotate your device to portrait.";
    position: fixed;
    top: 0;
    left: 0;
	bottom:0;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: var(--playlist-text);
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
	padding-top:0;
    z-index: 99999;

  }

  body > *:not(:first-child) {
    display: none !important;
  }
}


@media (max-width: 576px) {
	
  .hap-playlist-item-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
  }

  .hap-thumbimg {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
  }

  .hap-playlist-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
  }


  .hap-playlist-title-wrap {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }

  .hap-playlist-title-num {
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
  }

  .hap-stats {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .hap-stats i,
  .hap-stats span {
    font-size: 13px !important;
    line-height: 1;
  }

  .hap-playlist-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }
  
  
}


.hap-playlist-inner {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left:0;
  margin-right:0;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;                 /* enable vertical scroll */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  overscroll-behavior: contain;    /* prevent pull-to-refresh */
  touch-action: pan-y;             /* allow vertical swiping only */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}


.hap-playlist-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.hap-playlist-item {
  touch-action: auto !important;
}

.hap-playlist-item {
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE10+/Edge */
  user-select: none;          /* Standard */
  touch-callout: none;        /* iOS Safari */
}






.hap-fixed .hap-playlist-item-selected {
    background: var(--playlist-playing);
}
 

.hap-fixed .hap-playlist-item:hover {
    background: var(--playlist-hover);
}

.hap-fixed .hap-playback-rate-toggle-inner {
    color: var(--player-text);
    background: var(--player-background);
}
.hap-fixed .hap-progress-level {
    position: absolute;
    background: var(--player-progress-bar);
    top: 0;
    height: 100%;
}
.hap-fixed .hap-progress-bg {
    position: relative;
    background: var(--player-progress-bar-loading);
    width: 100%;
    top: 11px;
    height: 7px;
}




.track-image-message {
  display: none; /* shown via JS when needed */

  background: var(--playlist-background);
  color: var(--playlist-title);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-style: italic;
  text-align: center;
  margin-top: 0px;
}

.hap-playlist-default .hap-playlist-title-wrap {
    cursor: pointer;
    display: unset !important; 
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
}

.hap-playlist-artist{
	color: var(--playlist-text);
}


.track-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--slider-background);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
  z-index: 99999;
}

.track-modal-content {
  background: var(--slider-background);
  width: 100%;
  max-width: 480px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 15px var(--slider-box-shadow);
  font-family: sans-serif;
}

/* Image and title overlay */
.track-header {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.track-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-title-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, var(--slider-box-shadow), transparent);
  color: var(--slider-text);
  text-align: center;
  padding: 10px;
}

.track-title-overlay h2 {
  margin: 0;
  font-size: 22px;
}

.track-title-overlay h4 {
  margin: 4px 0 0;
  font-weight: normal;
}

.track-stats-grid {
  display: flex;
  justify-content: space-between; /* Align items with space between */
  padding: 15px 10px;
  background: var(--badge-background);
  text-align: center;
  gap: 10px;
  flex-wrap: wrap;
}

.track-stat {
  width: calc(25% - 10px); /* 4 items in a row, minus gap */
  box-sizing: border-box;
}

.track-stat .stat-label {
  font-weight: bold;
}

.track-stat div {
  margin-bottom: 5px;
}

.author-image {
  position: absolute;
  bottom: 10px;  /* Adjusts the image's position from the bottom */
  left: 10px;    /* Adjusts the image's position from the left */
  width: 60px !important;   /* Set the width of the author image */
  height: 60px !important;  /* Set the height of the author image */
  border-radius: 50%; /* Makes the image circular */
  border: 1px solid var(--header-border); /* Optional: adds a border around the image */
  object-fit: cover; /* Ensures the author image is contained in the circle */
}

/* Optional: If you want to adjust layout for smaller screens */
@media (max-width: 768px) {
  .track-stat {
    width: calc(50% - 10px); /* 2 items per row for smaller screens */
  }
  .author-image {
    width: 50px; /* Make the author image smaller on mobile */
    height: 50px;
    bottom: 10px; /* Adjust bottom margin for smaller screens */
    left: 10px;   /* Adjust left margin for smaller screens */
  }
}

@media (max-width: 480px) {
  .track-stat {
    width: 100%; /* Stack all items in a single column on very small screens */
  }
}


.track-stat {
  flex: 1;
  min-width: 50px;
}

.stat-label {
  font-weight: bold;
  font-size: 14px;
  color: var(--badge-text);
  margin-bottom: 4px;
}

/* Description */
.track-description {
  padding: 15px;
  font-size: 15px;
  color: var(--player-text);
}

/* Close button */
.track-modal-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1000; /* Ensure it sits on top */
}

.close-btn {
  background: var(--button-close-background);
  border: none;
  font-size: 16px; /* Adjust size for the X */
  color: var(--button-close-text);
  cursor: pointer;
  padding: 8px 12px; /* Increase padding for wider button */

  text-align: center;
  display: inline-block; /* Ensure it behaves like a block-level element */

  border-radius: 50%; /* Optional: makes the button round if you want */
}

.close-btn:hover {
  color: var(--button-close-background-hover); /* Optional: Change color on hover for better interactivity */
}



/* Basic Style */
.edit-btn {
  background-color: var(--button-primary-background); 
  color: var(--button-primary-text);
  border: none; /* No border */
  padding: 12px 24px; /* Padding for larger button */
  font-size: 16px; /* Font size */
  font-weight: bold; /* Make the text bold */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s, transform 0.2s ease-in-out; /* Smooth transition for hover effect */
  text-align: center; /* Center align text */
  display: inline-block; /* Make button inline but block-level for easy styling */
}

/* Hover Effect */
.edit-btn:hover {
  background-color: var(--button-primary-background-hover); /* Darker blue when hovered */
  transform: scale(1.05); /* Slight zoom-in effect */
}

/* Focus Effect (for accessibility) */
.edit-btn:focus {
  outline: none; /* Remove the default focus outline */
  box-shadow: 0 0 0 3px var(--button-shadow-color);/* Add a glow when focused */
}

/* Mobile Enhancements */
@media (max-width: 767px) {
  /* Edit Button for Small Screens */
  .edit-btn {
    padding: 6px 12px;  /* Smaller padding for mobile */
    font-size: 14px;     /* Smaller font size */
  }
}

/* Desktop Enhancements */
@media (min-width: 768px) {
	
  .track-modal-content {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    max-width: 720px;
  }

  .track-stats-grid {
    padding: 20px 30px;
  }

  .track-description {
    padding: 20px 30px;
    font-size: 16px;
  }

  .track-header {
    height: 280px;
  }

  .track-title-overlay h2 {
    font-size: 26px;
  }
  
  .track-image-message {
    font-size: 15px;
  }
}



.hap-playlist-item {
  position: relative;
  padding-right: 150px; /* space for all icon groups */
}

.playlist-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  z-index: 9999;
}

/* Each icon + number pair */
.icon-group {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 55px;              /* fixed width so columns line up */
  justify-content: flex-start; /* left align inside the group */
}

/* Numbers always white */
.icon-group span[class*="-count"] {
  color: var(--playlist-text);
}

/* Favourite / Like clickable icons */
.pl-favourite, .glyphicon-info-sign,
.pl-like {
  cursor: pointer;
  user-select: none;
}

/* Active state (y) = white */
.pl-favourite.active,
.pl-like.active {
  color: var(--playlist-icon-active);
}

/* Inactive state (n) = grey */
.pl-favourite:not(.active),
.pl-like:not(.active) {
  color: var(--playlist-icon-inactive);
}

/* Plays & Playlists icons always white */
.glyphicon-headphones, .glyphicon-info-sign,
.glyphicon-list {
  color: var(--player-buttons);
}



@media (max-width: 768px) {
  .playlist-icons .icon-counters {
    display: none !important;
  }
  .playlist-icons .icon-group {
    width: 25px; /* Tight but still tappable */
  }
  .hap-fixed .hap-playlist-inner {
    margin: 0px;
	}
	.hap-playlist-item-content {
        gap: 0px;
        padding: 8px 12px;
    }
	.icon-group:has(.glyphicon-info-sign) {
		display: none !important;
	}
	
	
	.hap-playlist-info {
    max-width: calc(100% - 140px); /* leaves space for right-side icons */
    overflow: hidden;
	}
	  .hap-playlist-title-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hap-playlist-title,
  .hap-playlist-artist {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
	
	
}

/* Hide Perfect Scrollbar's vertical rail & thumb */
.hap-playlist-inner .ps__rail-y,
.hap-playlist-inner .ps__thumb-y {
  display: none !important;
}

/* Some themes fade them in on hover—keep them gone */
.hap-playlist-inner.ps:hover .ps__rail-y,
.hap-playlist-inner.ps:hover .ps__thumb-y {
  display: none !important;
}


/* Make whole containers comfy to tap/click */
.icon-group {
  padding: 6px 8px;
  cursor: pointer;
}


/* ======================================================= */




.gesture-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--slider-wrapper);
  justify-content: center;
  align-items: center;
  
}

.gesture-modal-content {
  background: var(--slider-background);
  padding: 20px;
  max-width: 300px;
  width: 90%;
  border-radius: 15px;
  text-align: left;
  font-size: 18px;
  box-shadow: 0 0 10px var(--slider-box-shadow);
}

.gesture-modal-toggle {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
.toggle-labels {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
button#closeGestureModal {
  margin-top: 15px;
  padding: 8px 12px;
  border: none;
  background: var(--button-close-background);
  color: var(--button-close-text);
  border-radius: 5px;
  cursor: pointer;
}

/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--slider-background-before);
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--input-checked);
  color: var(--input-checked-text);
}

input:checked + .slider:before {
  transform: translateX(18px);
}

/* gesture overrides — must come last */
#hap-playlist-list,
.hap-playlist-inner { touch-action: pan-y !important; -ms-touch-action: pan-y !important; }

.hap-playlist-item { touch-action: pan-y !important; }

</style>
		<style>
		/* Lock page scroll when fullscreen playlist is on */
		body.hap-no-scroll { overflow: hidden; }

		/* Full-height wrapper */
		#hap-wrapper.hap-fh {
		  position: fixed; /* overlay the page */
		  inset: 0;        /* top/right/bottom/left: 0 */
		  width: 100vw;
		  height: 100vh;
		  z-index: 5;   /* above everything */
		}

		/* Make the outer container fill the viewport and split vertically */
		#hap-wrapper.hap-fh .hap-player-outer {
		  height: 100%;
		  display: flex;
		  flex-direction: column;
		}

		/* Keep the control bar area natural height */
		#hap-wrapper.hap-fh .hap-player-holder {
		  flex: 0 0 auto;
		}

		/* Let the playlist fill the rest */
		#hap-wrapper.hap-fh .hap-playlist-holder {
		  flex: 1 1 auto;
		  max-height: none;   /* remove any plugin max-height */
		  height: auto;
		}

		/* Ensure the scrollable area actually fills */
		#hap-wrapper.hap-fh .hap-playlist-inner {
		  height: 100%;
		}
		.hap-fixed .hap-playlist-inner {
			max-height: calc(100% - 60px) !important;
		}
		.icon-group {
		  touch-action: manipulation;   /* kill 300ms delay / gesture synthesis */
		  -webkit-tap-highlight-color: transparent;
		  -webkit-user-select: none;
		  user-select: none;
		  cursor: pointer;
		}


.hap-fixed .hap-thumbimg {
    -webkit-backface-visibility: hidden;
    filter: grayscale(5%);
}

.hap-fixed .hap-player-holder {
	background: var(--player-background);
}
.hap-fixed .hap-player-holder{

  background: var(--header-background) var(--header-background-image, none) no-repeat
              50px 50% / calc(100% - 50px) 100%;
}

.hap-fixed .hap-playlist-item {
    margin-bottom: 0px;
}
.hap-fixed .hap-playlist-inner {
	margin:0;
}
.hap-fixed .hap-playlist-item {
    padding: 0px;
}


/* Modal PL: enable truncation on mobile only */
@media (max-width: 767.98px) {
  #playlistModal .qrb-playlist-item-content { display: flex; align-items: center; gap: .5rem; }
  #playlistModal .qrb-playlist-thumb { flex: 0 0 40px; }              /* your thumb width */
  #playlistModal .qrb-playlist-info { flex: 1 1 auto; min-width: 0; } 
  #playlistModal .qrb-playlist-title-wrap { width: 100%; }

  #playlistModal .qrb-playlist-title,
  #playlistModal .qrb-playlist-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }
}
.qr-playlist-item {
  display: flex;
  align-items: center;
  padding: 0px;
  border-bottom: 1px solid var(--playlist-border);
  color: var(--playlist-text);
}

.qr-playlist-item img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  object-fit: cover;
  border-radius: 4px;
}

.qr-playlist-item .playlist-icons {
  margin-left: auto;
  display: flex;
  gap: 8px;
}


/* keep your existing .hap-fh block as-is */
#hap-wrapper.hap-fh {
  transition: transform .25s ease, opacity .25s ease; /* animate only in full mode */
  transform: translateY(0);
  opacity: 1;
}

/* seed state so the open animates from off-canvas */
#hap-wrapper.hap-preopen {
  transform: translateY(100%);
  opacity: 0;
}

/* optional micro-optimisation */
#hap-wrapper { will-change: transform, opacity; }


/* Sticky header */
#playlistModal .modal-header { position:sticky; top:0; z-index:2; background:var(--slider-background); }

/* iOS/Safari safety */
#playlistModal .modal-header{ position:-webkit-sticky; position:sticky; top:0; z-index:2; background:var(--slider-background); }

/* So scrollIntoView() / programmatic scrolls don't hide under the header */
#playlistModalBody{ scroll-padding-top:56px; }  /* set to your header height */


.hap-voice-search-microphone-btn{
}
.hap-voice-search-popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--slider-background-before);
    opacity: 0;
    display: none;
    transition: opacity 0.2s;
}
.hap-voice-search-popup-visible{
    opacity: 1;
}
.hap-voice-search-popup-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 100%;
    max-height: 300px;
    height: 100%;
    background-color: var(--slider-background);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.1);
}
.hap-voice-search-popup-close{
    position: absolute!important;
    top:10px;
    right: 10px;
    cursor: pointer;
}
.hap-voice-search-popup-info{
    font-size: 24px;
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
}
.hap-voice-search-popup-info{
    display: none;
}
.hap-voice-search-popup-info-waiting{
    display: block;
}
.hap-voice-search-panel-bottom{
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
}
.hap-voice-search-microphone-btn-wrap{
    position: relative;
    width: 60px;
    height: 60px;
}
.hap-voice-search-microphone-btn-popup{
    width: 100%;
    height: 100%!important;
    border-radius: 100%;
}
.hap-voice-search-microphone-btn-popup svg,
.hap-voice-search-microphone-btn-popup i{
    border-radius: 100%;
    color: var(--button-primary-text);
} 
.hap-voice-search-microphone-wrap-active .hap-voice-search-microphone-btn-popup{
    background-color: var(--button-danger-background);
    color: var(--button-danger-text);
    cursor: default;
}
.hap-voice-search-microphone-btn-pulse{
    width: 100%;
    height: 100%;
    background: var(--button-primary-text);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.hap-voice-search-microphone-wrap-active .hap-voice-search-microphone-btn-pulse{
    animation: ap_mic_pulsate infinite 1.5s;
}
@keyframes ap_mic_pulsate {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5, 1.5);
        opacity: 0;
    }
}



.icon-danger{ color: var(--danger); }
.qrb-fixed .qrb-playlist-item {
    padding: 0px;
}
.qrb-fixed .qrb-playlist-item {
    margin-bottom: 0px;
}

.qrb-fixed .qrb-playlist-item {
    font-size: 15px;
    padding: 4px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease-out;
}
.qrb-playlist-default .qrb-playlist-item {
    position: relative;
    top: 0px;
    left: 0px;
    font-size: 16px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 13px 0;
}
.qrb-playlist-default .qrb-playlist-item-wrap {
    flex: 1;
    display: flex
;
}


.qrb-fixed .qrb-playlist-item-content {
    color: var(--playlist-text);
}

.qrb-playlist-default .qrb-playlist-item-content {
    flex: 1;
    display: flex
;
    align-items: center;
    overflow: hidden;
    margin-right: 10px;
}
.qrb-playlist-item-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;

}



.qrb-fixed .qrb-playlist-thumb {
    height: 40px;
    width: 40px;
    border: 1px solid var(--playlist-border);
    margin-right: 5px;
}
.qrb-playlist-default .qrb-playlist-thumb {
    cursor: pointer;
    position: relative;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 5px;
}
.qrb-playlist-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
}


.qrb-playlist-default .qrb-playlist-info {
    flex: 1;
    display: flex
;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    margin-right: 10px;
}

.qrb-playlist-info {
    flex: 1 1 auto;
    padding-left: 10px;
    color: var(--playlist-title);
}


.qrb-fixed .qrb-playlist-item-selected .qrb-playlist-title-wrap {
    color: var(--playlist-text);
}

.qrb-playlist-default .qrb-playlist-title-wrap {
    cursor: pointer;
    display: unset !important;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
}
.qrb-playlist-info {
    flex: 1 1 auto;
    padding-left: 10px;
    color: var(--playlist-text);
}
.qrb-playlist-thumb > img.qrb-thumbimg {
  width: 100%;
  height: 100%;           /* override height:auto */
  object-fit: contain;    /* no cropping */
  object-position: center;
  display: block;         /* kill inline-gap */
}
.qrb-playlist-title, .qrb-playlist-artist{
	margin:0;
	margin-left:5px;
}

/* make the whole row a flex line */
.qrb-playlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background:var(--playlist-background);
}

/* let the left content take remaining space */
.qrb-playlist-item-wrap {
  flex: 1 1 auto;
  min-width: 0; /* prevents text pushing icons off-screen */
}

.qrb-playlist-icons{ align-items: flex-start; }
/* push icons to the right */
.qrb-playlist-icons {
  margin-left: auto;
  display: flex;
  align-items: left;
  gap: 25px;
  font-size: 16px;
  /* remove these if present */
  position: static;
  right: auto;
  top: auto;
  transform: none;
  z-index: auto;
  padding-right: 1px;

}
.qrb-icon-group{
	width:80px;
}
.qrb-icon-counters{
		color:var(--badge-text);
    }
.qrb-playlist-item:hover, .qrb-playlist-item-content:hover, .qrb-playlist-item-wrap:hover{
    background: var(--playlist-hover);
	}
	
	


/* Tabs-only: make inline SVG icons follow the button text colour */


.media-tabs .tab-button .icon,
.media-tabs .tab-button .icon * {
  stroke: currentColor !important;   /* override stroke="#fff", style="stroke:#fff", etc. */
}

/* Recolour filled shapes but keep real 'none' alone */
.media-tabs .tab-button .icon [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

/* Ensure the <svg> itself inherits the button's colour */
.media-tabs .tab-button .icon { color: inherit; }


#modalTrackTitle{
	font-size:18px;
}
/* Overlay + centered box (keeps it a real modal) */
#detailsModal.track-modal{display:none;position:fixed;inset:0;background:var(--slider-background-before);z-index:10550}
#detailsModal.track-modal.show{display:block}
#detailsModal .track-modal-content{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1000px,96vw);max-height:92vh;overflow:auto;
  border-radius:12px;padding:16px
}

/* Close button (top-right of content box) */
#closeTrackDetailsModal{
  position:absolute;top:8px;right:8px;z-index:2;
  background:var(--button-close-background);border:1px solid var(--button-close-border);color:var(--button-close-text);
  border-radius:10px;padding:4px 10px;line-height:1;font-size:18px;cursor:pointer
}
#closeTrackDetailsModal:hover{border-color:var(--button-close-border);color:var(--button-close-background);}

/* Image + overlay polish */
#detailsModal .author-image{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#detailsModal .track-title-overlay{
  background:var(--slider-box-overlay);
  color:var(--slider-text);
}

/* Mobile layout nicety */
@media (max-width:767.98px){
  #detailsModal .track-image-pane{min-height:240px;margin-bottom:.5rem}
}

#detailsModal .track-modal-content{ box-sizing:border-box; overflow-x:hidden; }
#detailsModal img, #detailsModal svg{ max-width:100%; height:auto; }
#detailsModal .track-image-pane{ overflow:hidden; } /* just in case */


/* 100% width (keep normal height) */
#playlistModal .modal-dialog {
  width: 100%;          /* not 100vw (avoids horizontal scroll) */
  max-width: none;
  margin: 0;            /* remove the centered margins */
}
#playlistModal .modal-content { border-radius: 0; } /* optional, cleaner edge */

/* optional: manage body scroll so content doesn't overflow viewport */
#playlistModal .modal-body {
  max-height: calc(100vh - 100px); /* header+footer ≈ 100px; adjust if needed */
  width:100%;
}

/* if Bootstrap’s padding causes side gaps on some browsers: */
#playlistModal.modal { padding-left: 0 !important; padding-right: 0 !important; }

.qrb-pl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    
}
.qrb-pl-item-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.qrb-pl-item-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}
#playlistTrackModal #qrb-selected-track{display:block!important;background:var(--playlist-playing);}
#qrb-selected-track .media-left{float:left;margin-right:8px}
#qrb-selected-track .media-body{overflow:hidden} /* contain the left float */

/* QRB iOS-style switch (namespaced) */
.qrb-switch{position:relative;display:inline-block;width:44px;height:22px;vertical-align:middle}
.qrb-switch-input{opacity:0;width:0;height:0}
.qrb-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--input-unchecked);transition:.2s;border-radius:999px}
.qrb-switch-slider:before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;background:var(--input-background);transition:.2s;border-radius:50%}
.qrb-switch-input:checked + .qrb-switch-slider{background:var(--input-checked)} /* BS3 success */
.qrb-switch-input:focus + .qrb-switch-slider{box-shadow:var(--input-box-shadow)}
.qrb-switch-input:checked + .qrb-switch-slider:before{transform:translateX(22px)}
.qrb-switch-label-text{margin-left:8px;vertical-align:middle}
.tab-button{
  flex:0 0 auto;
  padding:10px 15px;
  background:var(--button-primary-background);
  color:var(--button-primary-text);
  cursor:pointer;
  font-size:16px;

  text-align:center;
  min-width:90px;
  /* requested */
  border:1px solid #ccc;
  border-bottom:0;
  border-radius:12px 12px 0 0; /* round top only */
}

.tab-button.active {
    background-color: var(--button-primary-text-hover);
    color: var(--button-primary-text-hover);
}
.tab-content-wrapper {
    background: var(--slider-wrapper);
}
.media-tabs-wrapper {
    background-color: var(--slider-wrapper);
}

@media (max-width: 768px) {
    .icon-counters, .info-sign, .hide-on-mobile{
		display: none !important;
    }
	.qrb-icon-group {
		width: 20px;
		margin-right:15px;
	}
	.qrb-playlist-icons {
		gap: 5px;
		width:100px;
	}
	.tab-content {
		padding: 0px;
	}
	.modal-dialog {
		width: 100%;
		padding: 0;
		margin: 0
	}
	
	.tab-button{
		min-width:50px;
	
	}
}



 
  .show-on-mobile { display: none !important; }

  .navbar-header{ position:relative; }
  .navbar-header .mobile-actions{
    position:absolute; right:50px; top:12px; display:flex; gap:10px; align-items:center;
  }
  .navbar-header .mobile-actions a.nav-icon{ padding:8px 6px; line-height:1; position:relative; }
  .navbar-header .mobile-actions a.nav-icon.active{ color:var(--button-primary-background); border-radius:4px; }
  #mobileSearchWrap{ display:none; padding:8px 0; }
  #mobileSearchWrap .input-group{ width:100%; }
  .notification-badge.small-text{ font-size:10px !important; position:absolute; top:5px; right:0; }
   @media (max-width:767px){
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: inline-block !important; }
	
	  #users_ajax_list{padding-right: 30px; }
  } 


.projects-text-bit {
    width: 200px !important;
}
.notification-box-bit, #chat-scroll {
    position: relative;
    width: 270px;
    padding-left: 5px;
}
.notification-icon-bit {
    float: left;
    margin-right: 5px;
    width: 27px;
}
#chat-scroll > p { text-align: center; }


/* keep the toggle bar visible and tidy */
.editor-togglebar { padding:4px 0; }
.qr-composer.is-hidden .js-composer-toggle { /* optional: make it look “off” */
  opacity:.85;
}

/* smooth collapse wrapper */
.composer-collapsible{
  overflow: hidden;
  height: auto;                 /* JS will set real numbers during anim */
  opacity: 1;
  transition: height 240ms ease, opacity 160ms ease;
  will-change: height;
}
.qr-composer.is-hidden .composer-collapsible{
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .composer-collapsible{ transition: none; }
}


.editor-textarea-wrapper{ background: var(--slider-wrapper);}



/* --- Layout (no <nav>; pure flex so nothing stacks) --- */
.qrb-header-row{ display:flex; align-items:center; }
.qrb-left{ flex:0 0 auto; }
.qrb-rhs{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.qrb-item{ display:inline-block; }
.qrb-item > a, .qrb-item > button, .qrb-item{ line-height:1; }
.qrb-rhs > a, .qrb-rhs > .qrb-item > a{ padding:15px 10px; display:inline-block; }

/* Avatar + name */
.qrb-user .user_avatar{ width:28px; height:28px; border-radius:50%; vertical-align:middle; }
.qrb-username{ margin-left:6px; vertical-align:middle; }

/* Hamburger default hidden on desktop */
.qrb-hamburger{ display:none; margin:8px 0 8px 8px; }

/* Dropdown menus align right from RHS */
.qrb-rhs .dropdown-menu{ right:0; left:auto; }

/* --- Mobile rules (≤767px) --- */
@media (max-width:767px){
  /* Replace name with hamburger */
  .qrb-username{ display:none; }          /* name hidden */
  .qrb-hamburger{ display:inline-block; } /* hamburger shown */

  /* Keep only 3 icons + (optional avatar) to the LEFT of hamburger */
  .qrb-user{ display:none; }              /* hide avatar block entirely on mobile to meet "3 icons" requirement */

  /* Tighter spacing */
  .qrb-rhs{ gap:2px; }
  .qrb-rhs > a, .qrb-rhs > .qrb-item > a{ padding:12px 8px; }
}

/* --- Desktop (≥768px): show avatar+name, hide hamburger --- */
@media (min-width:768px){
  .qrb-user{ display:inline-block; }
  .qrb-hamburger{ display:none; }
}
 .ui-autocomplete{ 
	max-width:250px !important;
 }
 


  /* --- Z-INDEX FIXES (dropdowns above sticky header & slide-in, below modals) --- */
  .navbar-header2{ z-index:1030; }          /* sticky header layer */
  #mainNav{ position:relative; z-index:1020; } /* slide-in/collapse layer */
  .qrb-rhs .dropdown-menu{ z-index:1040; }  /* dropdowns above header & slide-in */
  #mobileSearchWrap{ position:relative; z-index:1025; } /* search panel sits between */
  /* keep Bootstrap 3 modals on top (1050); no change needed */

/* Mobile tweaks: no left spacing for logo; no right spacing for hamburger */
@media (max-width:767px){
  /* remove container gutters so logo can sit flush left and hamburger flush right */
  .qrb-header-row{ padding-left:0; padding-right:0; }

  /* logo area: kill left padding/margin */
  .qrb-left{ margin-left:0; }
  .qrb-left .navbar-brand-two{ display:block; padding-left:0; margin-left:0; }
  .qrb-left .navbar-brand-two img{ display:block; }

  /* hamburger: kill right padding/margin (flush with edge) */
  .qrb-hamburger{ margin:0; padding:0; }

  /* ensure the RHS row itself has no right gutter */
  .qrb-rhs{ padding-right:0; }
}

  /* active look */
  #searchToggle.is-active{
    background:var(--link-active);
    color:var(--link-active-text);
    border-radius:4px; /* keep it neat against dark navbar */
  }
  /* ensure lucide/svg adopts the white */
  #searchToggle.is-active svg{
    color:var(--link-active-text); fill:currentColor; stroke:currentColor;
  }
  

.menu-left{
	text-align:left;
	padding-left:10px !important;
}
/* slide-down search row on mobile */
#mobileSearchWrap{ display:none; padding:8px 0; }
#mobileSearchWrap .input-group{ width:100%; }
.navbar-header2 a:hover {
    color: var(--link-hover-text);
	text-decoration:none;
	background:var(--link-hover);
}
.container-fluid {
    padding-right: 0px;
}



.feed-header {
    height: 40px;
}
.feed-header-user {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.feed-header-info {
    padding: 0;
    position: relative;
    margin-right: 30px;
}




/* Container stays normal; clearfix so floats don’t collapse */
.feed-content{ display:block; }
.feed-content::after{ content:""; display:block; clear:both; }


/* For devices with a minimum width of 992px (Large) */
@media screen and (min-width: 992px) {
.feed-content iframe{

  float:left;
  width:24%;                 /* mobile: 100% */
  height:150px;

  margin:0 0 12px;            /* vertical gap */
  box-sizing:border-box;
}
}



@media screen and (min-width: 768px) {
	.feed-content iframe{

	  float:left;
	  width:33%;                 /* mobile: 100% */
	  height:180px;
	}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  	.feed-content  iframe{

	  float:left;
	  width:50%;                 /* mobile: 100% */
	  height:200px;
	}
}
@media screen and (max-width: 400px) {
  	.feed-content  iframe{

	  float:left;
	  width:100%;                 /* mobile: 100% */
	  height:230px;
	}
}




/* Action bars never overlap */
.post-actions, .panel-footer{ clear:both; margin-top:8px; }



  /* Visual feedback for hamburger when active */
  #hamburgerToggle.active span {
    background-color: var(--link-bg-active);
  }

.space-layout{ display:flex; flex-wrap:wrap;  }
.space-left{ flex: 0 0 100%; }
.space-right{ flex: 0 0 100%; }
@media (min-width:992px){
  .space-left{  flex-basis: 33.333%; }
  .space-right{ flex-basis: 66.666%; }
}

/* 50/50 items in the loop, 100% on mobile */
.space-grid{
  display:flex;
  flex-wrap:wrap;
  margin:-8px;             /* gutter hack */
}
.space-grid .space-item{
  box-sizing:border-box;
  padding:8px;             /* gutter hack */
  flex: 1 1 100%;          /* mobile: full width */
  max-width:100%;
}
@media (min-width: 992px){
  .space-grid .space-item{
    flex: 0 0 50%;         /* desktop: 50/50 */
    max-width:50%;
  }
}

/* optional: neutralise any stray BS3 float junk inside .space-item */
.space-grid .space-item [class*="col-"]{ float:none; }

/* make images behave */
.space-grid img{ max-width:100%; height:auto; display:block; }





/* Only constrain height on desktop, where left is sticky */
@media (min-width: 992px){
  .space-left{ position: sticky; top: 110px; align-self: start; }
  .space-left .scroll-thin{
    max-height: calc(100vh - var(--sticky-top) - var(--gap-vert));
  }
}

/* your grid from earlier (kept minimal for context) */
.space-layout{ display:grid; grid-template-columns: 1fr; gap: var(--gap-vert); }
@media (min-width: 992px){ .space-layout{ grid-template-columns: 1fr 2fr; } }


/* ---------- POLL: voting state ---------- */

/* clickable option row */
.feed-poll-answer.pretty{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--card-border); background:var(--card-background); border-radius:12px;
  padding:10px 12px; margin-bottom:10px; cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.feed-poll-answer.pretty:hover{
  background: var(--link-hover);
  border-color: var(--header-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* label text */
.feed-poll-answer-text label{
  display:block; margin:0; font-weight:500; color:var(--card-text); cursor:pointer;
}

/* hide actual inputs, keep them accessible */
.poll-input-hide{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}

/* ---------- POLL: results state ---------- */

.poll-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:6px;
}

/* emphasise the option the user voted for (text only);
   change/remove if you don’t want the cue */
.poll-row .is-mine{ color:var(--link-active-text); font-weight:700; }

/* bars */
.progress{
  height:22px; border-radius:10px; background:var(--player-progress-bar-loading);
  overflow:hidden; margin-bottom:12px;
}
.progress-bar{
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:8px; min-width:22px; font-weight:700;
}

/* default bar colour */
.progress-bar-primary{ background:linear-gradient(90deg,#cfd8dc,#b0bec5); color:#444; }

/* optional: highlight “my vote” bar; make same as default if you don’t want it */
.progress-bar-primary.mine{ background:var(--player-progress-bar); color:var(--player-text); }

/* ---------- small-screen tweaks ---------- */
@media (max-width: 767px){
  .feed-poll-answer.pretty{ padding:10px; }
  .poll-row{ gap:10px; }
}



.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-image: unset;
}
.search-option-user {
    border-left: 2px solid var(--input-background);
    margin-bottom: 0px !important;
	width:100%
}
.search-btn-qrb{
	width:100% !important;
}




.qrb-tabs{ position:relative; display:flex; flex-direction:column; gap:12px; }
.qrb-tablist{
  position:-webkit-sticky; position:sticky; top:var(--sticky-top);
  z-index:200; background:var(--button-primary-background); margin:0 0 8px 0; padding-bottom:8px; border-bottom:1px solid var(--button-shadow-color);
  display:flex; flex-wrap:wrap; gap:8px;
}
.qrb-tablist.is-stuck{ box-shadow:0 2px 8px var(--button-primary-background); }

.qrb-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--button-shadow-color); border-radius:10px; background:var(--button-primary-background); color:#333; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.qrb-tab svg{ width:18px; height:18px; }
.qrb-tab.is-active{ background:var(--button-primary-background); border-color:var(--button-primary-border); color:var(--button-primary-text); }
.qrb-tab:is(:hover,:focus-visible){ border-color:var(--button-primary-border) }

.qrb-panel{ padding:8px 0; }
.qrb-panel[hidden]{ display:none !important; }



/* container */
.fr-grid{ display:flex; flex-wrap:wrap; gap:16px; }

/* base card */
.fr-card{
  background:var(--card-background); border:1px solid var(--card-border); border-radius:14px; overflow:hidden;
  width:100%;
  box-shadow:0 1px 2px var(--card-shadow);
}

/* columns: 4/3/2 across as width grows */
@media (min-width:1200px){ .fr-card{ width:calc(25% - 12px);} }
@media (min-width:992px) and (max-width:1199px){ .fr-card{ width:calc(33.333% - 11px);} }
@media (min-width:768px) and (max-width:991px){ .fr-card{ width:calc(50% - 8px);} }

/* desktop cover (fills top of card) */
.fr-cover{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }

/* content area */
.fr-body{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.fr-meta{ display:flex; flex-direction:column; gap:4px; }
.fr-name{ font-weight:600; font-size:16px; color:var(--page-text); line-height:1.25; }
.fr-sub{ color:var(--card-text); font-size:12px; }

/* actions */
.fr-actions .btn{ border-radius:10px; font-weight:600; padding:6px 10px; }
.fr-actions .btn + .btn{ margin-top:8px; }



/* hover/focus so it doesn’t feel dead */
.fr-card:hover{ box-shadow:0 4px 12px var(--card-background); }
.fr-card .btn:focus{ outline:2px solid var(--card-background); outline-offset:2px; }
/* cover wrapper for positioning the overlay */
.fr-cover-wrap{ position:relative; }

/* overlay: avatar + name pill (desktop) */
.fr-overlay{
  position:absolute; left:5px; bottom:-12px;
  display:flex; align-items:center; gap:8px;
}
.fr-ov-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid var(--badge-border); box-shadow:0 2px 8px var(--input-box-shadow);
}
.fr-ov-name{
  display:inline-block; padding:4px 10px; border-radius:10px;
  font-weight:600; font-size:14px; color:#fff; background:#a50364; /* your brand accent */
  text-shadow:0 1px 1px var(--input-box-shadow);
}



/* desktop: column body, but align actions to the right */
.fr-body{ display:flex; gap:10px; padding:12px; }
/* desktop default is column in your CSS; make it a row so actions can sit right */
@media (min-width:768px){
  .fr-body{ flex-direction:row; align-items:center; }
  .fr-meta{ flex:1 1 auto; min-width:0; }
  .fr-actions{ flex:0 0 auto; }
}
@media (max-width:767px){
  .fr-body{ flex-direction:row; align-items:center; gap:12px; }
  .fr-meta{ flex:1 1 auto; }
  .fr-actions{ flex:0 0 auto; }
}
/* MOBILE: compact row list */
@media (max-width:767px){
  .fr-card{ width:100%; border-radius:12px; }
  .fr-cover{ display:none; }                            /* hide big image */
  .fr-body{ flex-direction:row; align-items:center; gap:12px; margin-left: 60px;}
  
  .fr-avatar{
    display:block; width:44px; height:44px; border-radius:50%;
    object-fit:cover; flex:0 0 44px;
	
  }
.fr-meta{ flex:1 1 auto; min-width:0;}

  .fr-name{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fr-actions{ flex:0 0 auto; }
  .fr-actions .btn{ margin-top:0; border-radius:8px; }
  .fr-overlay {
    position: absolute;
    left: 5px;
    bottom: -57px !important;
  }
  .fr-ov-name{
	  display:none !important;
  }
  
}