body {
    background: var(--bs-body-bg);
}

.stripe {
    /* margin: 1.5rem 0; */
    /* Use border-top border-3 in the element class */
    border-color: var(--Primary--pale) !important;
}

/* 37 main sections */
section#this-week,
section#festival,
section#instruments,
    section#flute,
    section#oboe,
    section#clarinet,
    section#alto-saxophone,
    section#trumpet,
    section#french-horn,
    section#trombone,
    section#euphonium,
    section#tuba,
    section#percussion,
section#videos,
section#classes,
    section#canterbury,
        section#concert-details-canterbury,
    section#coventry,
        section#concert-details-coventry,
    section#husmann,
        section#concert-details-husmann,
section#play-along,
    section#go-for-excellence,
    section#duets,
    section#book-1,
    section#book-2,
    section#festival,
    section#concert-december,
    section#concert-may,
section#handouts,
    section#practice-tips,
    section#note-charts,
    section#concert-songs,
    section#worksheets,
    section#staff-paper,
    section#festival-songs,
section#supplies,
section#contact,
/* plus 5 more sections in "See Also" sidebar = 42 total */
section#parents-drop-off,
section#what-to-practice,
section#concert-details-december,
section#festival-details-february,
section#concert-details-may,
/* plus all pages with objectives-and-activities ~14 + 42 = 56 total */
section#objectives-and-activities,
/* plus 7 occasionally linked pages for > join > news > faq = 63 */
section#join,
    section#matching-game,
    section#order-supplies,
    section#register-with-d47,
    section#try-instruments,
section#news,
section#faq,
/* plus ~ 20 "unlinked" pages... including > events [calendar] 19 more = 64 */
section#events-calendar,
    /* 6 more playlists for classes > elementary and classes > middle-school repertoire = 70 total */
    section#elementary-schools,
    section#middle-school-6th-grade,
    section#middle-school-7th-grade,
    section#middle-school-8th-grade,
    section#middle-school-jazz,
    section#middle-school-percussion,
    /* 2 more playlists for play > irish and play > music [star wars] - 72 total */
    section#irish,
    section#music,
    /* 11 error pages = 83 total */
    section#error {
    border-color: var(--Primary--paler) !important;
    /* border-bootom is there BUT it's invisible with paler color same as bg */
}

.more-handouts {
    border-top: 3px solid var(--Primary--pale) !important;
}

/* Page Titles -- Card Titles -- Footer Headings */
h1 {
    /* Primary Default for Bootstrap #0d6efd */
    color: #0d6efd !important;
    /* catch any h1 elements not marked up with text-primary */
}

h3 {
    color: var(--Secondary) !important;
}

h5 {
    color: var(--Secondary) !important;
}

h6 {
    color: var(--Primary) !important;
}

/* Card Titles */
.card-subtitle {
    color: var(--Secondary) !important;
}

/* "Primary" */
/* Page Titles */
.text-primary {
    color: var(--Primary) !important;
}

.bg-primary {
    background-color: var(--Primary) !important;
    /* see also, .navbar, .navbar-nav */
}

.text-bg-primary {
    background-color: var(--Primary) !important;
    color: var(--Light) !important;
}

.link-primary {
    color: var(--Primary--light) !important;
}

.link-primary:hover, .link-primary:focus {
    color: var(--Primary) !important;
}

/* "Secondary" */
/* Sidebar Headings -- Page Subheadings */
.text-secondary {
    color: var(--Gray) !important;
    color: var(--Secondary) !important;
}

.bg-secondary {
    background-color: var(--Gray) !important;
    background-color: var(--Secondary) !important;
}

.text-bg-secondary {
    /* Badge Rounded Pill */
    background-color: var(--Gray) !important;
    background-color: var(--Secondary) !important;
    color: var(--Light) !important;
}

.link-secondary {
    color: var(--Gray) !important;
    color: var(--Secondary--light) !important;
}

.link-secondary:hover,
.link-secondary:focus {
    color: var(--Secondary) !important;
}

/* Font Awesome Icon Default */
.text-gray,
.link-gray {
    color: #6c757d !important;
    color: var(--Gray) !important;
}

.text-light,
.link-light {
    color: var(--Primary--lightest) !important;
}


.carousel-background {
    border: 2px solid var(--Primary--lighter) !important;
    border-radius: 1rem;
    background: linear-gradient(0deg, var(--Primary--lightest), #fff);  
}

/* Dropdown Menus */
.dropdown-menu-dark {
    background: var(--Dark) !important;
    background: var(--Dark--800) !important;
    background: var(--Primary) !important;
}

.dropdown-menu-dark li a {
    color: var(--Primary--lightest) !important;
}

.dropdown-menu-dark li a:hover {
    background: var(--Dark--700) !important;
    background: var(--Primary--lighter) !important;
    color: var(--Primary--palest) !important;
}

/* TOP MENU */
.navbar,
.navbar-nav {
    background: var(--Primary) !important;
    color: var(--Light) !important;
}

.navbar-nav li a {
    /* padding: 0.375rem 0 0.25rem !important; */
    color: var(--Primary--lightest) !important;
}

.navbar-nav li a:hover,
.navbar-nav li a:focus {
    background: linear-gradient(var(--Primary--lighter), var(--Primary--lightest), #fff) !important;
    background: var(--Darker) !important;
    color: var(--Primary--pale) !important;
    /* color: #c0c000 !important; */
}

.navbar-nav li a.active {
    /* background: linear-gradient(180deg, var(--Primary), var(--Primary--lightest), #fff) !important; */
    background: var(--Primary--dark) !important;
    /* border: #ff0 dotted 0.25rem !important; */
    /* background: #fff !important; */
    /* background: url("../images/monthly-themes/07-july/us-flag-waving.png") !important; */
    /* background: url("../images/monthly-themes/10-october/cobweb0.jpg") !important; */
    background-repeat: no-repeat !important;
    background-size: 230px auto !important; 
    /* color: #c0c000 !important; */
}
  
.navbar-brand {
    background: none !important;
    color: var(--Primary--lightest) !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--Primary--pale) !important;
}

.navbar-toggler {
    background: var(--Dark) !important;
    color: var(--Light) !important;
    background: var(--Primary--lightest) !important;
    color: var(--Primary) !important;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background: var(--Primary--pale) !important;
    color: var(--Primary--light) !important;
}

/* Buttons */
.btn-primary {
    background: var(--Primary) !important;
    color: var(--Primary--pale) !important;
    border: 2px solid var(--Primary--light) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--Primary--dark) !important;
    color: var(--Primary--pale) !important;
    border: 2px solid var(--Primary--lighter) !important;
}

.btn-secondary {
    background-color: var(--Secondary) !important;
    color: #fff !important;
    color: var(--Secondary--palest) !important;
    border: 2px solid var(--Secondary--light) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--Secondary--dark) !important;
    color: #fff !important;
    color: var(--Secondary--palest) !important;
    border: 2px solid var(--Secondary--lighter) !important;
}

.buttons {
    color: var(--Primary);
}

.player {
    border: 2px solid var(--Primary--lighter) !important;
    background: linear-gradient(180deg, var(--Primary--pale), var(--Primary--paler));
}
  
.track-art {
    background-image: URL("../images/classes/elementary/full-band/band.jpg");
    border: 2px solid var(--Primary--lighter);
}
  
.track-name {
    color: var(--Primary);
    font-weight: 500 !important;
}
  
.track-artist {
    color: var(--Primary);
    font-weight: 800 !important;
}
  
/* Modify the appearance of the slider */
.seek_slider,
.volume_slider {
    background: var(--Primary--lighter);
    /* might need to be darker */
}
  
/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
    background: var(--Primary);
}
  
.current-time,
.total-duration {
    color: var(--Primary);
}
  
i.fa-volume-down,
i.fa-volume-up {
    color: transparent;
    color: var(--Primary);
}
  
#pick-a-page .list-group-item-action {
    border-top: 1px solid var(--Primary--lightest) !important;
    border-right: 1px solid var(--Primary--lightest);
}
  
#pick-a-song .list-group-item-action {
    border-top: 1px solid var(--Primary--lightest) !important;
}

#pick-a-page .list-group-item-action,
#pick-a-song .list-group-item-action {
    color: var(--Primary) !important;
}

#pick-a-page .list-group-item-action:hover,
#pick-a-page .list-group-item-action:focus {
    background: linear-gradient(0deg, var(--Primary), var(--Primary--dark), var(--Primary));
    background: var(--Primary--lighter) !important;
    color: var(--Light) !important;
    color: var(--Primary--palest) !important;
}

#pick-a-song .list-group-item-action:hover,
#pick-a-song .list-group-item-action:focus {
    background: var(--Primary--lighter) !important;
    color: #fff !important;
    color: var(--Primary--palest) !important;
}

#pick-a-page .list-group-item-action.active {
    background: var(--Primary) !important;
    color: #fff !important;
    color: var(--Primary--paler) !important;
}

#pick-a-song .list-group-item-action.active {
    background: var(--Primary) !important;
    color: #fff !important;
    color: var(--Primary--paler) !important;
    /* background: #000 url("../images/monthly-themes/10-october/cobweb0.jpg") !important; */
    background-repeat: no-repeat !important;
    /* background-size: 230px auto !important;  */
    font-weight: 600;
}

.link-secondary,
.link-secondary a {
    color: var(--Primary) !important;
}

/* Sidebar Menu Items - Hover */
.list-group-item:hover,
.list-group-item:focus,
.link-secondary:hover,
.link-secondary:focus,
.link-secondary a:hover,
.link-secondary a:focus {
    background: var(--Primary--lighter) !important;
    color: #fff !important;
    cursor: pointer;
}

/* #whatPageAreWeOn:hover {
    background: transparent !important;
} */

/* Footer Links */
#footer .footer-heading {
    color: var(--Primary--light) !important;
  }

#site-map .link-secondary {
    color: var(--Primary--lighter) !important;
    /* color: var(--Primary--darker) !important;
    color: var(--Primary--dark) !important; */
}

#site-map .link-secondary:hover,
#site-map .link-secondary:focus {
    /* background: transparent !important; */
    color: var(--Primary--darker) !important;
    color: #fff !important;
    font-weight: 400;
}

#footer .btn-primary,
#must-have-handouts .btn-primary {
    background: var(--Primary) !important;
    color: var(--Primary--pale) !important;
    border: 2px solid var(--Primary--light) !important;
}

#footer .btn-primary:hover,
#footer .btn-primary:focus,
#must-have-handouts .btn-primary:hover,
#must-have-handouts .btn-primary:focus {
    background: var(--Primary--dark) !important;
    color: var(--Primary--pale) !important;
    border: 2px solid var(--Primary--lighter) !important;
}

/* Important for  */
#instruments_images,
#instruments_listen,
#instruments_festival {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* for Instrument images in <-- horizontal scroll table --> */
.grayscale {
  position: relative;
  top:0%;
  left:0%;
  /* filter: hue-rotate(180deg); */
  /* filter: brightness(74%); */
  /* filter: grayscale(100%); */
  /* filter: opacity(50%); */
  /* filter: blur(4px); */
  /* filter: invert(100%); */
  /* filter: sepia(100%); */
  /* filter: contrast(180%); */
  /* filter: saturate(7); */
  /* Animation */
  transition:.1s ease-in-out;
  transform: scale(1.00);
  padding-bottom: 0.5rem;
  border-bottom: 5px solid transparent;
}

.grayscale:hover,
.grayscaleactive,
.listenActive,
.instrumentActive,
.festivalActive,
.demoActive,
.repertoireActive {
  filter:grayscale(0%);
  transition:.1s ease-in-out;
  opacity: 1;
  /* filter: drop-shadow(8px 8px 10px gray); */
  transform: scale(1.00);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  padding-bottom: 0.5rem;
  border-bottom: 5px solid var(--Secondary--light);
}

video {
    background: var(--Dark--900);
    /* object-fit: cover; */
}