.mainContainer .siteplayer {
 position:absolute;
 left:0px;
 overflow:hidden;
 height:50px;
 width:600px;
 z-index:0;
}

.help {
 position:absolute;
 border: 2px solid black;
 left:0px;
 overflow:hidden;
 height:50px;
 width:600px;
 z-index:0;
}

 
.swiper-slide {
  /* position: relative; */
  width: 75px;
  height: 75px;
  border: 0px;
  margin: 0px;
 /* float: left */
}


.productViewer {
   vertical-align: top;
   display: table-row;
}

.productContainer {
   display: inline-block;
   vertical-align: top;
   position: relative;
   float: right;
}

.finePrint {
   font-size:10px;
   margin: 0px;
}


.signature {
  font: 400 12px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #000;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}


/* 
a.helium-buy-now { 
	line-height: 1 !important; 
	border-radius: 5px 5px 5px 5px !important;
	padding: 5px !important;
	margin: 1px !important;
	height: 12px !important;
	font-size: 11px !important;

}
*/

a.helium-buy-now { 
	line-height: 1 !important; 
}


/*
.imgborder {
	border: 1px solid black;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
}
*/

/* this is for the CD swiper */
.imgborder {
	margin: 4px;
	overflow: hidden;
	box-shadow: 0px 8px 6px -6px black;
	border-radius: 8px 8px 8px 8px; 
}



.secmenu ,  .secmenulast , .secmenufirst{
	background-color: #f9fafa;
	border-style: 1px solid gray;
	border-right: 1px solid gray;
	border-left: 1px solid gray;
	opacity: 1;
    	-webkit-box-shadow: 0px 1px 2px #000000;
        -moz-box-shadow: 0px 1px 2px #000000;
        box-shadow: 0px 1px 2px #000000;
}


.secmenulast {
	border-bottom: 1px solid gray;
}


.secmenufirst {
        border-top: 1px solid gray;
}   

/* target the sheet music form */
input[aria-controls="productTable"] { border-radius: 13px; height: 13px; font-size:12px; border: 1px solid gray; width: 250px; display:inline-block; background: url("/img/tinysearch.png") no-repeat scroll 8px 6px transparent; padding-left:30px; }
select[aria-controls="productTable"] { display:inline-block;  }
#productTable_length>label {
	margin-left:120px;
}




/* This is for the quotables 
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
/* width: 500px;
 * margin: 0.25em 0;
 * padding: 0.25em 40px;
 * 
line-height: 1.45;
position: relative;
color: #383838;
}

blockquote cite {
        font-size: 14px;
        font-style: bold;
        color: #246791;
        display: block;
        padding-left: 40px;
}

External CSS file: styles.css */

blockquote {
    font-family: 'Nunito', sans-serif; /* Example: Using Nunito font */
    font-size: 14px; /* Example: Setting the font size */
    color: #333; /* Example: Setting the text color */
    font-style: italic;
    /* ... other styles like margin, padding, etc. */
}

blockquote cite {
    font-family: 'Nunito', sans-serif; /* Optionally style the <cite> element as well */
    font-style: normal; /* Overriding default italic style for citations */
    color: #333; /* Example: Setting a different text color for the citation */
    /* ... other styles like font-size, padding, etc. */
}

blockquote:before {
display: block;
content: "\201C";
font-size: 50px;
position: absolute;
left: 0px;
top: 20px;
padding-left: 30px;
color: #7a7a7a;
}


.cartbtn {
  background: #8f918e;
  background-image: -webkit-linear-gradient(top, #8f918e, #535453);
  background-image: -moz-linear-gradient(top, #8f918e, #535453);
  background-image: -ms-linear-gradient(top, #8f918e, #535453);
  background-image: -o-linear-gradient(top, #8f918e, #535453);
  background-image: linear-gradient(to bottom, #8f918e, #535453);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  text-shadow: 1px 1px 2px #666666;
  -webkit-box-shadow: 0px 3px 2px #666666;
  -moz-box-shadow: 0px 3px 2px #666666;
  box-shadow: 0px 3px 2px #666666;
  font-family: Arial;
  color: #FCFCFC;
  font-size: 12px;
  padding: 6px 6px 6px 6px;
  margin: 4px;
  text-decoration: none;
  font-weight: bold;
}

.cartbtn:hover  {
  color: #FFFFFF;
  // text-shadow: 0 0 1px #FFFFF0;
  // text-decoration: underline;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

.cartbtn:active {
  background: #535453;
  background-image: -webkit-linear-gradient(top, #535453, #282928);
  background-image: -moz-linear-gradient(top, #535453, #282928);
  background-image: -ms-linear-gradient(top, #535453, #282928);
  background-image: -o-linear-gradient(top, #535453, #282928);
  background-image: linear-gradient(to bottom, #535453, #282928);
  -moz-box-shadow: 0px 1px 2px #666666;
  box-shadow: 0px 1px 2px #666666;
  text-decoration: none;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}


#albumSelector {
    border: 1px solid #ced4da; /* Standard border */
    border-radius: 0.25rem; /* Rounded borders */
    padding: 0.375rem 1.75rem 0.375rem 0.75rem; /* Padding */
    height: calc(1.5em + 0.75rem + 2px); /* Height calculated for proper alignment */
    -webkit-appearance: none; /* Removes default styling on iOS */
    -moz-appearance: none; /* Removes default styling on Firefox */
    appearance: none; /* Removes default styling */
    background: url('data:image/svg+xml;charset=US-ASCII,<svg width="14" height="12" viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l6 6 6-6" stroke="%23aaa" stroke-width="2" fill="none" fill-rule="evenodd"/></svg>') no-repeat right 0.75rem center; /* Custom arrow icon */
    background-size: 0.65em auto, 100%; /* Size of the custom arrow */
    cursor: pointer; /* Cursor to indicate it's selectable */
    font-weight: bold;
    margin: 10px;
    width: 300px;
}

/* When the select box is focused, add a blue border */
#albumSelector:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.album-selector {
    display: flex;
    align-items: center; /* Aligns items vertically center */
}

/* You might need to adjust the margins and padding to align the tabs as needed */
#productCategoryTabs {
    display:inline-block;
    padding-left: 0; /* Removes padding if it's a UL */
}

.nav-item .nav-link {
    padding: 0.5rem 1rem; /* Adjust the padding to match the album selector's height */
}

.related-products:before {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px; /* Height of the fade effect */
    background: linear-gradient(to bottom, transparent, white); /* Fades to the color of the container */
}


/* Scrollbar track */
.related-products::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Scrollbar handle */
.related-products::-webkit-scrollbar-thumb {
    background: #888;
}

/* Scrollbar handle on hover */
.related-products::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.pagination-controls-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.related-products {
    margin-left: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pageInfo {
	font-size: 12px;
}

/* Album and Single toggle */
    /* The switch - the box around the slider */
    .switch {
      position: relative;
      display: inline-block;
      width: 30px; /* Reduced from 60px to 30px */
      height: 17px; /* Reduced from 34px to 17px */
    }

    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc; /* Neutral background color */
      transition: .133s; /* Made the transition 3x faster */
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 13px; /* Reduced from 26px to 13px */
      width: 13px; /* Reduced from 26px to 13px */
      left: 2px; /* Adjusted for the smaller size */
      bottom: 2px; /* Adjusted for the smaller size */
      background-color: white;
      transition: .133s; /* Made the transition 3x faster */
    }

    input:checked + .slider {
      background-color: #ccc; /* Changed to the same neutral color */
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #ccc; /* Adjusted to match the neutral color */
    }

    input:checked + .slider:before {
      transform: translateX(13px); /* Adjusted for the smaller size */
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 17px; /* Adjusted for the smaller size */
    }

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


    th {
    background-color: #9ea1a2;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

   th i {
    margin-left: 5px;
   }


    th.asc::after {
  content: " ▲";
}

th.desc::after {
  content: " ▼";
}
/* Add new styles from sheetmusic.html below */

/* Styles for positioning the sort icons right next to the header text */

@media (max-width: 600px) {
    th {
        padding-right: 15px;
    }

    th .fas {
        right: 5px;
    }
}

.container {
    margin: 0 auto;
    padding: 0px 15px;
    box-sizing: border-box;
}

.row.table-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.items-per-page-container,
.artist-filter-container,
.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.items-per-page-container label,
.artist-filter-container label {
    margin-right: 10px;
}

.modern-search-bar {
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
}

.modern-search-bar:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Pagination Controls */
#paginationControls {
    margin-top: 10px;
    text-align: center;
}

button.play-button {
    background: none;
    border: none;
    color: rgba(51, 51, 51, 0.7); /* Change the color and set transparency */
    font-size: 1.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button.play-button:hover {
    color: #007bff; /* Change the hover color if needed */
}

/* Select dropdown improvements */
.items-per-page-container select,
.artist-filter-container select {
    border-radius: 5px;
    padding: 8px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease;
    appearance: none; /* Removes the default dropdown arrow */
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px; /* Add some extra padding for the custom arrow */
}

.items-per-page-container select:focus,
.artist-filter-container select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/Lato-Italic.ttf') format('truetype');
}

/* Add more @font-face rules for other font styles and weights */
body.padding-top {
    background-color: #fff;
}
.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
}