/*Menu navigation*/
/* Menu Button (Top-Left) */
.menu-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  color: #F8F9FB;
  border: none;
  padding: 3px 15px;
  font-size: 24px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
  /*just underneath the .small-fixed element*/
  transition: background 0.3s;
}



/* Menu Panel */
/* Menu Panel (Always Start Hidden) */
.menu-panel {
  position: fixed;
  top: 54px;
  left: -100%;
  /* Completely off-screen */
  width: 50%;
  max-width: 280px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(5px);
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  transition: left 0.4s ease-in-out;
  z-index: 1002;
  visibility: hidden;
  /* Ensure it’s not rendered */
  opacity: 0;
  /* Make it invisible */
  pointer-events: none;
  /* Prevent accidental clicks */
}

/* Hide menu until JS is fully loaded */
.js-enabled .menu-panel {
  visibility: hidden;
}

/* Ensure the menu is only visible when toggled */
.menu-panel.active {
  left: 0;
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  z-index: 100000;
}

/* Adjust for mobile */
@media (max-width: 600px) {
  .menu-panel {
    width: 75%;
    max-width: none;
  }
}

/* When menu is open */
.menu-panel.active {
  left: 0;

  overflow-y: scroll;
  /* allow vertical scrolling but hide the scroll bar since its ugly */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge (legacy) */
}

.menu-panel.active::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, newer Edge */
}

/* Menu Sections */
.menu-section {
  margin-bottom: 20px;
}

.menu-section h3 {
  font-size: 14px;
  color: #FE5301;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 5px;
}

/* Menu Links */
.menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-links li {
  margin: 10px 0;
}

.menu-links a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 8px;
  transition: color 0.3s;
}

.menu-links a:hover {
  color: #FE5301;
}

.menu-links i {
  margin-right: 10px;
  font-size: 18px;
}

/* Login Button */
.login-btn {
  display: block;
  /*  width: 100%;*/
  padding: 10px;
  text-align: center;
  background: #FE5301;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
  margin-top: 10px;
}

.login-btn:hover {
  background: #d94b00;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1001;
}



/* Close Menu Button */
.close-menu {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  transition: opacity 0.3s;
}

.close-menu:hover {
  opacity: 0.7;
}


/*For forward and rewind 5s buttons*/
.control-button-container {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: transparent;
  color: #f2f2f2;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
}

.rewind-button {
  left: 85px;
}

.forward-button {
  right: 85px;
}


#imagesearchresults {

  display: none;
}

#vidboximage {
  /*neededd to prevent videoboximage elements from appearing on load with empty contents*/

}

.first-span-block {
  display: block !important;
  /* Override any other 'display' properties */
  width: 100%;
  max-width: 1000px;
  /*max-width: 800px;*/
  height: auto;
  /* For an aspect ratio, or set a specific height */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Your additional styling */
}

.first-span-block .vid-title {
  /* width: 780px !important;*/
  /* set this to the same width as the span of first-span-block, so the text spans across the whole span */
}

.landscape-span-block {
  width: 560px;
  /* Or whatever width you prefer */
  height: auto;
  /* For an aspect ratio, or set a specific height */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Your additional styling */
}

.first-span-block .fa.fa-external-link {
  /* we dont want the external icon displayed for the first playing video */
  display: none;
}

.youtube-external-link {
  text-decoration: none;
}


.youtube-external-link:hover {
  text-decoration: none;
}

/* Desktop devices*/
@media (min-width: 769px) {

  .share-button,
  .download-button,
  .wishlist-button,
  .comments-button,
  .transcript-button,
  .pip-button,
  .subscriber-button,
  .channel-text,
  .ai-button,
  .loop-button,
  .view-comments-button,
  .audio-mode-button,
  .cast-button {
    font-size: 13px !important;

  }
}

.channel-text {
  font-family: "Raleway", sans-serif;
  background-color: transparent;
  border: none;
  color: #f8f9fa;
  margin-right: 3px;

  font-weight: 550;
  cursor: pointer;
  font-size: 11px;
  /* padding: 0; */
  /* padding-right: 5px; */
  /* margin-right: 10px; */
  /* padding-top: 10px; */
  /* padding-bottom: 15px; */
  /* margin-bottom: 7px; */
  /* flex-grow: 1; */
  text-decoration: none !important;
  width: 100%;
  min-width: 60px;
  word-break: break-word;
  /* Fallback for older browsers - trying to squeeze cast button in */

  overflow-wrap: break-word;
  /* Allows breaking long words */

  white-space: normal;
  /* Allow text to wrap */
}

.share-button,
.download-button,
.wishlist-button,
.comments-button,
.transcript-button,
.subscriber-button,
.pip-button,
.ai-button,
.loop-button,
.view-comments-button,
.audio-mode-button,
.cast-button {
  font-family: "Raleway", sans-serif;
  background-color: transparent;
  border: none;
  color: #f8f9fa;
  margin-right: 1px;
  /*- trying to squeeze cast button in */

  font-weight: 550;
  cursor: pointer;
  font-size: 8px;
  /*- trying to squeeze cast button in */
  /* padding: 0; */
  /* padding-right: 5px; */
  /* margin-right: 10px; */
  /* padding-top: 10px; */
  /* padding-bottom: 15px; */
  /* margin-bottom: 7px; */
  /* flex-grow: 1; */
}

#subscribe-channel,
#rss-channel {
  font-family: "Raleway", sans-serif;
  background-color: transparent;
  border: none;
  color: #f8f9fa;
  margin-right: 5px;

  font-weight: 550;
  cursor: pointer;
  font-size: 14px;

}

button.wishlist-button.active,
button.subscriber-button.active,
button#subscribe-channel.active,
button.loop-button.active,
button.pip-button.active,
button.audio-mode-button.active,
button.cast-button.active {
  color: #FE5301;
}

div.scrollmenuvid {
  overflow-x: hidden;
  overflow-y: hidden;
  /*height:100%;*/
  padding-top: 5px;
  /*white-space: nowrap;*/
  z-index: 1;
  text-align: center;
  /* This centers inline and inline-block elements within #scrollmenuvid */

}

#scrollmenuvid>* {
  text-align: left;
  /* Resets text alignment for direct children of #scrollmenuvid */
}

/* Scroll CSS */
.scrollmenuvid::-webkit-scrollbar {
  width: 2px;
  height: 8px;
  z-index: 9999;
}

.scrollmenuvid::-webkit-scrollbar-track {
  background: #343A40;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  z-index: 9999;
}

.scrollmenuvid::-webkit-scrollbar-thumb {
  background: #F8F9FA;
  visibility: hidden;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.scrollmenuvid:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

div.scrollmenuvid::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
  z-index: 9999;
}

.imghrefstyle:link {
  color: #00278E;

  border: 0;
  white-space: normal;
  word-wrap: break-word;
}

/* mouse over link */
.imghrefstyle:hover {
  color: #00278E;
  text-decoration: underline;
}

.imghrefstyle:visited {
  color: #6D59A3;
}

div.scrollmenuvid span {
  display: inline-block;
  vertical-align: top;
  position: relative;
  /* padding: 0; */
  border: 0;
  border-radius: 6px;
  /* margin-left: 5px;
  margin-right: 10px;*/
  /* margin-bottom: 30px; */
  /* margin-top: 20px; */
  /* height: 100%;*/
  background-color: #0F0F0F;
}

.span-container {
  /* this breaks small-fixed: filter: drop-shadow(0 0 4px #343A40);*/

  box-shadow: 0 0 8px #555;
}



/* Adjustments for mobile */
@media (max-width: 768px) {
  div.scrollmenuvid span {
    max-width: 100%;
    /* Allow the container to fill the screen on mobile */
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
  }

  div.scrollmenuvid img {
    width: 100%;
    /* height: auto;*/
    border-radius: 0px;

    object-fit: cover;
    aspect-ratio: 16 / 9;
  }
}

/* Desktop devices
@media (min-width: 769px) {
  .imgframe {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  } */
/* Ensure image fills the width of its container */
div.scrollmenuvid img {
  width: 100%;
  /* height: auto;*/
  border-radius: 6px 6px 0 0;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  /*becasue on mobile devices we adjust to 60vh so set it back to 100vh when page loads*/
}

/* Desktop devices */
@media (min-width: 769px) {
  div.scrollmenuvid>span:not(.first-span-block) {
    margin-top: 15px;
    margin-bottom: 15px;
    height: 100%;
    min-height: 420px;
    width: 100%;
    max-width: 520px;
    max-height: 100vh;
    /*becasue on mobile devices we adjust to 60vh so set it back to 100vh when page loads*/
  }
}

/* Desktop devices */
@media (min-width: 769px) {
  div.scrollmenuvid>span {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
  }
}


/*}


/* mobile  landscape styling */
.imgframelandscape {
  width: 100vw !important;
  /* 100% of the viewport's width */
  height: 100vh !important;
  /* 100% of the viewport's height */
  position: fixed;
  /* to cover the entire window */
  top: 0;
  left: 0;
  z-index: 100000000000000000000;
}

div.scrollmenuvid a:hover {

  z-index: 1;
}

.overlay {

  position: absolute;

  opacity: 0.5;
  /*top: 22%;*/
  top: 18%;
  left: 40%;
  transform: translate(0%, 0%);
  /*now set to inline-block via javascript - see vidpopulatenew.js*/
  display: none;
  width: 80px;
  height: 80px;

  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHRpdGxlPlBsYXlfNDB4NDA8L3RpdGxlPjxwYXRoIGQ9Ik0yMCAuODMzYTE5LjE2NyAxOS4xNjcgMCAxIDAgMTkuMTY3IDE5LjE2NyAxOS4xNjcgMTkuMTY3IDAgMCAwLTE5LjE2Ny0xOS4xNjd6IiBvcGFjaXR5PSIuNiIvPjxwYXRoIGQ9Ik0yMCAyYTE4IDE4IDAgMSAxLTE4IDE4IDE4LjAyIDE4LjAyIDAgMCAxIDE4LTE4bTAtMmEyMCAyMCAwIDEgMCAyMCAyMCAyMCAyMCAwIDAgMC0yMC0yMHptOC4wNzIgMjAuOWExLjY3MSAxLjY3MSAwIDAgMS0uNTEzLjUxM2wtOS45OSA2LjM1N2ExLjY3MSAxLjY3MSAwIDAgMS0yLjU2OS0xLjQxM3YtMTIuNzE1YTEuNjcxIDEuNjcxIDAgMCAxIDIuNTY5LTEuNDFsOS45OSA2LjM1OGExLjY3MSAxLjY3MSAwIDAgMSAuNTEzIDIuMzF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);


}

div.scrollmenuvid a:hover .overlay {
  opacity: 1;
}

.vidlinks {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /*display: block;
   text-align: left; */
  height: 100%;
  padding-left: 8px;
  /*padding-right: 5px;*/
  padding-bottom: 15px;
  position: relative;
  /*added bc new comments button (view-comments-button) was shifting the imgplaybutt shifted down the screen if comments open (without video playing)*/
}




.vidlinks .vid-title,
.vidlinks .vid-title a {
  width: 99%;
  font-weight: 500;

  color: #F8F9FA !important;
  margin-top: 5px;
  /*padding-left: 5px;*/
}

/* Mobile devices */
@media (max-width: 768px) {

  .vidlinks .vid-title,
  .vidlinks .vid-title a {
    max-width: 99%;

  }
}

/* Desktop devices */
@media (min-width: 769px) {

  .vidlinks .vid-title,
  .vidlinks .vid-title a {
    /* max-width: 380px;*/
    max-width: 99%;
    font-size: 16px;
  }
}


.imglinks {
  white-space: normal;
  max-width: 250px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
  /* text-align: left; */
  height: 100px;
  padding-left: 10px;
  padding-right: 5px;
}

.imglinks .img-title {
  display: block;
}

.imgsearchtitle {

  max-width: 250px;
  padding: 10px;
  font-size: 80%;

}

.vid-info,
.vid-info a {
  display: flex;
  justify-content: space-between;
  color: #AAAAAA !important;
  /*margin-left: 5px;*/
  margin-right: 5px;
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: 0px;
}

.vid-duration {
  font-size: 10px !important;
  display: inline-block;
  margin-top: 0px;
  font-size: 10px;
}



.vid-views {
  flex: 1;
  text-align: left;
  font-size: 10px;
}

.vid-age {
  /*  flex: 1;
  text-align: right;
  margin-right:5px;*/
  color: #343A40 !important;
  font-size: 10px;
}

/* Desktop devices*/
@media (min-width: 769px) {

  .vid-info,
  .vid-info a {
    font-size: 12px;
  }

  .vid-duration {
    font-size: 12px !important;

  }

  .vid-views {
    font-size: 12px !important;
  }

  .vid-age {
    font-size: 12px !important;
  }
}

/*View more images*/
#viewallmedia {
  border-radius: 10px;
  border: 1px solid #F8F9FA;
  padding: 10px;
  width: 200px;
  height: 20px;
  text-align: center;

  position: relative;
  top: 120px;
  background-color: #F8F9FA;
  text-decoration: none !important;
  color: #343A40
}

/*Comments styling*/
.lightbox {
  display: none;
  width: 100%;
  background-color: #0F0F0F;
  padding-top: 50px;
  /*position: fixed;*/
  z-index: 11111111111;

}

/* Adjustments for mobile */
@media (max-width: 768px) {
  .lightbox {
    overflow-y: auto;
    /* Enables vertical scrolling if content overflows */
    /*max-height: 40vh;*/
    max-height: 100vh;
  }
}

/* Desktop devices*/
@media (min-width: 769px) {

  .lightbox r {
    max-height: 100% !important;
  }
}

.lightbox-content {
  /* border: 1px solid #aaa;*/
  background-color: transparent;
  margin: 0px auto;
  width: 100%;
}


.transcript-close-button,
.comments-close {
  display: none;
  color: #f8f9fa;

  float: right;
  /* font-size: 32px !important; */
  font-weight: bold;
  display: block;
  width: 30px;
  height: 30px;
  /* line-height: 30px; */
  text-align: center;
  /* border: 2px solid #aaa !important; */
  /* border-radius: 50% !important; */
  font-size: 1.5em;
  cursor: pointer;
  background-color: transparent !important;
  border-radius: 20% !important;
  margin-right: 10px !important;
  border: none;
}

.transcript-close-button:hover,
.transcript-close-button:focus,
.comments-close:hover,
.comments-close:focus {
  color: #888;
  text-decoration: none;
  cursor: pointer;
}

.comment {
  /* border: 1px solid #aaa; */
  /* margin: 10px; */
  padding: 5px;
  /* border-radius: 5px; */
  display: flex;
}

.comments-avatar {
  margin-right: 10px;
}

.comments-avatar img {
  height: 40px !important;
  width: 40px !important;
  border-radius: 30px !important;
  margin-top: 5px;
  margin-left: 5px;
}

.comments-content {
  flex: 0.95;
  /* Takes up most of the space but make sure words dont terminate right on edge*/
}


.comments-username {
  font-weight: bold;
  margin: 0;
}

.comments-time,
.comments-pinned {
  font-size: 0.8em;
  color: #aaa;
  vertical-align: middle !important;
  font-weight: normal !important;
}

.comments-text {
  margin-top: 5px;
}

.comments-text a {
  color: #f8f9fa;
  /* Sets the color of links to light gray/white */
  text-decoration: underline;
  /* Maintains the underline for clarity that these are clickable links */
}

.comments-text a:hover {
  color: #cccccc;
  /* Optional: change color on hover for visual feedback */
  text-decoration: none;
  /* Removes underline on hover */
}

.comments-likes {
  font-size: 0.9em;
  color: #ccc;
  /* Light grey for likes count */
    margin-top: 5px;
    margin-bottom: 10px;
}



.video-description-container {
  font-size: 14px !important;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  margin-top: 10px;
  margin-right: 10px;
  padding-bottom: 20px;
  background-color: #272727;
  border-radius: 12px;

}

/* stop Chrome/Edge “helpfully” keeping the old anchor in view */
#transcript-body {
  overflow-anchor: none;
  /* <── NEW  */
}

/* transcript specific */
.transcript-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #F8F9FA;
}

.transcript-toolbar-button {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: none;
  background-color: #F8F9FA;
  border-radius: 12px !important;
}

.transcript-cue {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.transcript-cue:hover {
  background: #383838;
}

.transcript-cue.transcript-active {

  background-color: #383838;

}

.transcript-ts {
  /* min-width: 25px; */
  color: #3ea6ff;
  text-align: right;
  margin-right: 5px;
}

.transcript-text {
  flex: 1;
  white-space: pre-wrap;
}

.transcript-match {
  background: #6a6a6a !important;
}

.transcript-nav {
  position: absolute;
  top: 6px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

#transcript-search-prev {
  right: 32px;
}

#transcript-search-next {
  right: 10px;
}

.video-description-container a {
  color: #F8F9FA !important;
  font-size: 14px !important;
}

/* Adjustments for mobile */
@media (max-width: 768px) {
  .video-description-container {
    overflow-y: auto;
    /* Enables vertical scrolling if content overflows */
    max-height: 100vh;

  }
}

/* Desktop devices*/
@media (min-width: 769px) {

  .video-description-container {
    max-height: 100% !important;
  }
}

/* Adjustments for mobile */
@media (max-width: 768px) {
  #channelContainer {
    margin-bottom: 15px;

  }
}

/* Desktop devices*/
@media (min-width: 769px) {

  #channelContainer {
    margin-bottom: 15px;
  }
}

/*CSS for Translate submenu*/
/* Translate dropdown container */
.translate-menu-container {
  position: relative;
  display: inline-block;
}

/* Make the select look different when translate is selected */
#transcript-lang-select.translate-mode {
  background-color: #4285f4;
  color: white;
  border-color: #4285f4;
}

/* Translate submenu */
.translate-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2c2c2c;
  border: 1px solid #444;
  border-radius: 4px;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.translate-submenu.show {
  display: block;
}

/* Individual language options in submenu */
.translate-language-option {
  padding: 8px 12px;
  cursor: pointer;
  color: #F8F9FA;
  font-size: 14px;
  transition: background-color 0.2s;
}

.translate-language-option:hover {
  background-color: #3c3c3c;
}

.translate-language-option.active {
  background-color: #4285f4;
  font-weight: 500;
}

/* Loading overlay for translation */
.translate-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.translate-loading.show {
  display: flex;
}

.translate-spinner {
  border: 3px solid #333;
  border-top: 3px solid #4285f4;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.translate-progress {
  color: #4285f4;
  font-weight: bold;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

/* Cast Styling - Full overlay that sits above a single player iframe */
/* full-cover overlay above a single player */
.cast-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
}

/* container for iframe + close */
.cast-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* hides horizontal scrollbar */
}

.cast-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  /* hides horizontal scrollbar */
  border: none;
  /* optional, removes border */
}

.cast-close {
  position: absolute;
  top: 0px;
  right: 8px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.cast-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ddd;
  font: 14px/1 system-ui, Arial, sans-serif;
  pointer-events: none;
}



/* ===== Save-video to Playlist Styling ====================================== */
#playlist-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 9998;
  display: none;
}

#playlist-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  max-height: 80vh;
  overflow-y: auto;
  background: #1e1e1e;
  color: #f8f9fa;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, .45);
  z-index: 9999;
  overflow-x: hidden; /*only hide in x direction since user may have lots of playslist and need to vertically scroll on element*/
  display: none;

}

#playlist-modal h3 {
  margin: 0 0 30px;
  font-size: 1.1rem;
}

.playlist-checkbox {
  display: flex;
  align-items: center;
  margin: 6px 0;
}

.playlist-checkbox input {
  margin-right: 8px;
  width: 25px;
  height: 25px;
}

#new-playlist-form {
  margin-top: 14px;
  display: flex;
}

#new-playlist-form input {
  flex: 1;
  padding: 4px 6px;
  font-size: 1rem;
  background: #2b2b2b;
  border: 1px solid #444;
  color: #f8f9fa;
  border-radius: 4px;
}

#new-playlist-form button {
  margin-left: 6px;
  padding: 4px 10px;
  background: #888;
  border: none;
  color: #f8f9fa;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
}

#playlist-modal .close-btn {

  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.4em;
  color: #f8f9fa;
  cursor: pointer;
}

/* keeps the divider subtle but with a bit of breathing room */
#playlist-modal .pl-divider {
  border: 0;
  border-top: 1px solid #444;
  margin: 10px 0 6px;
}


/* Loop popup styling the dark overlay */
.lb-heading {
  font-size: 18px;
  margin: 10px 0 12px;
  text-align: center;
  color: #fff
}

.preview-box {
  display: flex;
  justify-content: center;
  bottom: 12px;
  width: 250px !important;
  height: 100%;
  border: none;
  margin: auto;
}

.slider-area {
  position: relative;
  height: 28px;
  margin: auto;
  width: 95%;
}

.track {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #555
}

.handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FE5301;
  position: absolute;
  top: 5px;
  cursor: ew-resize
}

.time-readout {
  display: flex;
  justify-content: space-between;
  color: #ccc;
  font-size: 12px;
  margin: auto;
}

.lb-btn {
  width: 100%;
  padding: 10px;
  background: #888;
  color: #f8f9fa;
  border: 1px solid #888;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

.fill {
  position: absolute;
  top: 12px;
  /* same top as .track */
  height: 4px;
  /* same height as .track */
  background: #FE5301;
  /* your orange */
  z-index: 1;
  /* below the round handles (handles are z-index:2) */
}