/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: .67em 0; }
figcaption, figure, main{ display: block; }
figure{ margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active,a:hover{outline-width:0}
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
audio,video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style:none; }
svg:not(:root) { overflow: hidden;}
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; padding: 4px; color: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{ border-style:none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline:1px dotted ButtonText; }
fieldset { border: 1px solid #c0c0c0; margin:0 2px; padding: .35em .625em .75em; }
legend { box-sizing: border-box; color:inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button{ height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
details, menu { display: block; }
summary { display:list-item }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }

optgroup { font-weight: 700 }
table { border-collapse: collapse; border-spacing: 0; }
td, th, ul, ol { padding: 0; }
blockquote { color: #777; margin: 10px 0 20px 15px; padding: 5px 0 5px 15px; border-left: 3px solid #cccccc; }
blockquote p { color: #777; }
blockquote cite { display: block; color: #555555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a { color: #555555; }
blockquote cite a:visited { color: #555555; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
iframe { border: 0; }

*, :before, :after { box-sizing: border-box; }
html { font-size: 1em; height: 100%; }
body { font-family: 'Open Sans', Verdana, Tahoma, Arial, sans-serif; line-height: 1.6; text-align: left; color: #555555; background-color: #ffffff; height: 100%; text-rendering: optimizeLegibility !important; }
nav ul, nav ol, #nav ul, #navbar ul, #nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

.cfix:after { content: ""; display: table; clear: both; }
.img_resp { display: block; width: auto; max-width: 100%; height: auto; }
[role="button"] { cursor: pointer; }

/* ----------------------------------------------------------------------------
    Containers & Grid
----------------------------------------------------------------------------- */
.wrap { width: 100%; }
.container, .row {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    transition: all 0.3s ease 0s;
}
.container.boxed {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 1230px;
    background: #e1e1e1;
}
.row {
    clear: both;
    width: auto;
    max-width: 1200px;
}
.container.fluid {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 1200px;
    transition: all 0.3s ease 0s;
}
.col-xs-1 .row, .col-xs-2 .row, .col-xs-3 .row, .col-xs-4 .row, .col-xs-5 .row, .col-xs-6 .row, .col-xs-7 .row, .col-xs-8 .row, .col-xs-9 .row, .col-xs-10 .row, .col-xs-11 .row, .col-xs-12 .row, .col-sm-1 .row, .col-sm-2 .row, .col-sm-3 .row, .col-sm-4 .row, .col-sm-5 .row, .col-sm-6 .row, .col-sm-7 .row, .col-sm-8 .row, .col-sm-9 .row, .col-sm-10 .row, .col-sm-11 .row, .col-sm-12 .row, .col-md-1 .row, .col-md-2 .row, .col-md-3 .row, .col-md-4 .row, .col-md-5 .row, .col-md-6 .row, .col-md-7 .row, .col-md-8 .row, .col-md-9 .row, .col-md-10 .row, .col-md-11 .row, .col-md-12 .row, .col-lg-1 .row, .col-lg-2 .row, .col-lg-3 .row, .col-lg-4 .row, .col-lg-5 .row, .col-lg-6 .row, .col-lg-7 .row, .col-lg-8 .row, .col-lg-9 .row, .col-lg-10 .row, .col-lg-11 .row, .col-lg-12 .row, .col-xl-1 .row, .col-xl-2 .row, .col-xl-3 .row, .col-xl-4 .row, .col-xl-5 .row, .col-xl-6 .row, .col-xl-7 .row, .col-xl-8 .row, .col-xl-9 .row, .col-xl-10 .row, .col-xl-11 .row, .col-xl-12 .row {
    width: auto !important;
    margin-top: 0;
    margin-bottom: 0;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding: 15px;
    width: 100%;
    transition: all 0.3s ease 0s;
}
.centered, .center_block {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.container:after, .row:after, .col-xs-1:after, .col-xs-2:after, .col-xs-3:after, .col-xs-4:after, .col-xs-5:after, .col-xs-6:after, .col-xs-7:after, .col-xs-8:after, .col-xs-9:after, .col-xs-10:after, .col-xs-11:after, .col-xs-12:after, .col-sm-1:after, .col-sm-2:after, .col-sm-3:after, .col-sm-4:after, .col-sm-5:after, .col-sm-6:after, .col-sm-7:after, .col-sm-8:after, .col-sm-9:after, .col-sm-10:after, .col-sm-11:after, .col-sm-12:after, .col-md-1:after, .col-md-2:after, .col-md-3:after, .col-md-4:after, .col-md-5:after, .col-md-6:after, .col-md-7:after, .col-md-8:after, .col-md-9:after, .col-md-10:after, .col-md-11:after, .col-md-12:after, .col-lg-1:after, .col-lg-2:after, .col-lg-3:after, .col-lg-4:after, .col-lg-5:after, .col-lg-6:after, .col-lg-7:after, .col-lg-8:after, .col-lg-9:after, .col-lg-10:after, .col-lg-11:after, .col-lg-12:after, .col-xl-1:after, .col-xl-2:after, .col-xl-3:after, .col-xl-4:after, .col-xl-5:after, .col-xl-6:after, .col-xl-7:after, .col-xl-8:after, .col-xl-9:after, .col-xl-10:after, .col-xl-11:after, .col-xl-12:after {
    content: "";
    display: table;
    clear: both;
}

.hide, .hidden { display: none !important; }
.show { display: block !important; }
.invisible { visibility: hidden; }
.text_hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
.affix { position: fixed; }
.float_left { float: left; }
.float_right { float: right; }
.center { text-align: center; }
.clear { clear: both; }
.clear_left { clear: left; }
.clear_right { clear: right; }

.col-xs-1 { width: 8.33333333% }
.col-xs-2 { width: 16.66666667% }
.col-xs-3 { width: 25% }
.col-xs-4 { width: 33.33333333% }
.col-xs-5 { width: 41.66666667% }
.col-xs-6 { width: 50% }
.col-xs-7 { width: 58.33333333% }
.col-xs-8 { width: 66.66666667% }
.col-xs-9 { width: 75% }
.col-xs-10 { width: 83.33333333% }
.col-xs-11 { width: 91.66666667% }
.col-xs-12 { width: 100% }
.offset-xs-0 { margin-left: 0% }
.offset-xs-1 { margin-left: 8.33333333% }
.offset-xs-2 { margin-left: 16.66666667% }
.offset-xs-3 { margin-left: 25% }
.offset-xs-4 { margin-left: 33.33333333% }
.offset-xs-5 { margin-left: 41.66666667% }
.offset-xs-6 { margin-left: 50% }
.offset-xs-7 { margin-left: 58.33333333% }
.offset-xs-8 { margin-left: 66.66666667% }
.offset-xs-9 { margin-left: 75% }
.offset-xs-10 { margin-left: 83.33333333% }
.offset-xs-11 { margin-left: 91.66666667% }
.offset-xs-12 { margin-left: 100% }
.pull-xs-0 { right: auto }
.pull-xs-1 { right: 8.33333333% }
.pull-xs-2 { right: 16.66666667% }
.pull-xs-3 { right: 25% }
.pull-xs-4 { right: 33.33333333% }
.pull-xs-5 { right: 41.66666667% }
.pull-xs-6 { right: 50% }
.pull-xs-7 { right: 58.33333333% }
.pull-xs-8 { right: 66.66666667% }
.pull-xs-9 { right: 75% }
.pull-xs-10 { right: 83.33333333% }
.pull-xs-11 { right: 91.66666667% }
.pull-xs-12 { right: 100% }
.push-xs-0 { left: auto }
.push-xs-1 { left: 8.33333333% }
.push-xs-2 { left: 16.66666667% }
.push-xs-3 { left: 25% }
.push-xs-4 { left: 33.33333333% }
.push-xs-5 { left: 41.66666667% }
.push-xs-6 { left: 50% }
.push-xs-7 { left: 58.33333333% }
.push-xs-8 { left: 66.66666667% }
.push-xs-9 { left: 75% }
.push-xs-10 { left: 83.33333333% }
.push-xs-11 { left: 91.66666667% }
.push-xs-12 { left: 100% }
.centered-xs {
    float: none;
    clear: both;
    margin-right: auto;
    margin-left: auto;
}
.uncentered-xs {
    float: left;
    margin-right: 0;
    margin-left: 0;
}

/* ----------------------------------------------------------------------------
    NAVIGATION MENU - FLEX DIV VERSION
----------------------------------------------------------------------------- */
.menu-item {
    position: relative;
}
.menu-item:first-child {
    border-top: 0;
}
.menu-item.right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-top: 5px;
}
input:focus {
    outline: 2px solid #89cb72;
}
input[type="range"] {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  background: #666;
  border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
  height: 15px;
  background: #666;
  border-radius: 16px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #fff;
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px #89cb72;
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px #89cb72;
}


.submenu {
    color: white;
    text-transform: none;
    margin-left: 0;
    margin-top: 3px;
}
#selectVerses {
    text-transform: none;
    width: 290px;
    background: transparent;
    color: white;
    position: relative;
    border: none;
    outline: none;
    font-size: 15px;
}
#verseSelector, #textSelector {
    border-radius: 6px;
    border: 1px #888 solid;
    background: #555;
    width: 310px;
    margin-bottom: 15px;
}
.refreshBtn {
    margin: 2px 5px 0px 0px;
    padding: 0;
    font-size: 14px;
    float: right;
}
@media (min-width: 48em) {
    .menuPanel {
        width: 800px;
        max-width: 98vw;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .menu-item {
        min-width: 230px;
        max-width: 360px;
        padding: 5px 15px;
    }
    .menu-item.right {
        justify-content: flex-end;
        align-items: center;
        padding-top: 5px;
        margin-top: 0;
    }
}
nav ul, nav li, #nav ul, #nav li {
    display: none !important;
}
            .awesomplete {
                position: relative !important;
            }
            .awesomplete mark {
                background: #ffd966;
            }
            
            .awesomplete ul li[aria-selected="true"] mark,
            .awesomplete ul li:hover mark {
                background: #ffd966;
            }
            
            #sidenav { position: relative; z-index: 1000; }
            #sidenav input, #sidenav select, #sidenav textarea, #sidenav label { background: #555; }
            #sidenav .awesomplete, div.awesomplete input, select#selMet  { width: 310px; height: 35px; display: inline-block; }
            #sidenav .awesomplete ul,
            #sidenav .awesomplete ul[role="listbox"] {
                position: absolute;
                left: 8px;
                top: 100%;
                z-index: 99999 !important; 
                min-width: 160px;
                width: 310px;
                color: white;
                border: 1px solid white;
                border-radius: 6px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                display: block;
                opacity: 1;
                max-height: 1000px;
                pointer-events: auto;
            }
            #sidenav .awesomplete ul[role="listbox"] li {
                color: white;
                padding: 6px 12px;
                border: none;
                cursor: pointer;
                pointer-events: auto;
                z-index: 100000 !important;
                /* optional: */
                position: relative;
            }
            #sidenav .awesomplete ul[role="listbox"] li[aria-selected="true"],
            #sidenav .awesomplete ul[role="listbox"] li:hover,
            #sidenav .awesomplete ul[role="listbox"] li:active {
                background: #89cb72;
                color: black;
            }
            #sidenav .awesomplete ul[role="listbox"] {
                background: linear-gradient(to bottom right, #555, hsla(0, 0%, 40%, .8))!important;
            }
            
            #sidenav .awesomplete li:hover,
            #sidenav .awesomplete li[aria-selected="true"] {
                background: #666 !important;
                color: #6fc252 !important;
            }
            #sidenav .awesomplete input, input #pstext, select#selMet  {
                color: white;
                border: 1px #888 solid;
                border-radius: 6px;
            }
            #tunes div.awesomplete {
                margin-left: -19px;
                margin-top: -3px;
                border-radius: 6px;
            }
            #sidenav {
              height: 100%;
              width: 0;
              position: fixed;
              top: 0;
              right: 0;
              background-color: #555;
              transition: width 0.5s;
              box-shadow: -2px 0 8px rgba(0,0,0,0.2);
              overflow-y: auto;
              height: 100vh;
            }
            #sidenav .closebtn {
              position: absolute;
              top: 10px;
              right: 18px;
              font-size: 36px;
              color: #fff;
              cursor: pointer;
              z-index: 1201;
            }
            #verses {
                margin: 0px 0px 0px 8px;
            }
            .sidenavNote {
                font-size:15px;
                font-style:italic;
                margin:0 0 0.8em -10px;
            }
            .sidenavSubmenuNote {
                font-size:15px;
                font-style:italic;
                margin:-15px 0 0.8em 0px;
            }
            .menuPanel {
              height: 100%;    
              width: 330px;
              padding: 0;
              margin: 0;
              color: #fff;
              display: flex;
              flex-direction: column;
              width: 100%;
              background: #444;
              border-radius: 0 0 4px 4px;
              opacity: 1;
              overflow: hidden;
              gap: 12px;
            }
            .menu-item {
              margin: 0;
              display: block;
              color: #fff;
              padding: 10px 15px;
            }
            .menuHead {
              color: #fff;
              font-weight: 700;
              font-size: 20px;
              margin-bottom: 2px;
              font-family: 'Open Sans', 'Helvetica Neue', Tahoma, Arial, sans-serif;
            }
            .menuSpan {
              text-transform: none;
              margin-left: 6px;
              color: white;
              border-radius: 4px;
              z-index: 2000;
              padding:2px 0px 0px 0px;
              width: 270px;
              height: 35px;
            }
            input.initial, .menuSpan input, #tunes input, .awesomplete input, .awesomplete input {
              width: 270px;
              height: 35px;
              background-color: #555555;
              color: white;
              border: 1px solid #888;
              border-radius: 6px;
              font-weight: normal;
              transition: background 0.2s linear 0s;
              padding: 5px 10px;
            }
            
            input#pstune::placeholder {
               color: #fff; 
               opacity: 1;
               font-size: 0.9em;
            }
            
            input:focus { outline: 2px solid #89cb72; }
            .submenu { color: white; text-transform: none; margin-left: 0px; margin-top: 3px; }
            #selectVerses, #psTextList {
              text-transform: none;
              width: 310px;
              background: transparent;
              color: white;
              position: relative;
              border: none;
              outline: none;
              font-size: 16px;
            }
            .verseGroup {
                white-space:nowrap;
            }
            #verses {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.4s cubic-bezier(.4,0,.2,1);
              /* Optionally: */
              opacity: 0;
              transition-property: max-height, opacity;
              transition-duration: 0.4s;
            }
            #verses.expanded {
              max-height: none;
              overflow: visible;
              padding-right: 0;
              opacity: 1;
            }
            .goBtn {
              margin: -1px 8px 0px 8px;
              width: 35px;
              color: #89cb72;
              font-size: 15px;
              text-align: center;
              float: left;
            }
            .submitbtn {
              border: none;
              outline: none;
              background-color: #444;
              font-family: inherit;
              text-align: center;
              padding: 2px 2px 5px 2px;
              cursor: pointer;
              color: #6fc252;
              border-radius: 3px;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.04em;
            }
            .displayGroup {
              text-transform: none;
              margin-left: 8px;
              display: inline-block;
            }
            /* Hamburger button */
            #menutoggle {
              position: fixed;
              top: 8px;
              right: 6px;
              width: 46px;
              height: 46px;
              background: #555;
              color: #fff;
              border-radius: 5px;
              font-size: 32px;
              cursor: pointer;
              z-index: 1300;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 2px 7px rgba(0,0,0,0.2);
              border: none;
            }

            /* Push main content left when sidenav is open */
            #main {
              transition: margin-right 0.5s;
              padding: 16px;
            }
            .vl {
                display: inline-block; 
                padding: 1px 8px 6px 2px; 
                border-right: 2px solid #000;
            }

/* ----------------------------------------------------------------------------
    CONTROLS BAR AND ICONS
----------------------------------------------------------------------------- */
#controls {
    display: none;
    position: absolute;
    left: 0px;
    padding: 0px 10px 0px 14px;
    background: #6fc252;
    border-bottom-right-radius: 5% 20px;
    z-index: 10;
    overflow: visible;
}
#controls a {
    padding: 3px 4px 0px 4px ;
    border-right: 0px;
    text-decoration: none;
    color: black;
}
#controls a:hover {
    fill: #eee !important;
    background: #6fc252;
    color: #eee;
}
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltiptext {
    visibility: hidden;
    max-width: 100px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0 10px;
    position: absolute;
    z-index: 1100;
    top: 120%;
    left: 10%;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9em;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-right: 2px;
}
.hamburger {
              position: fixed;
              top: 18px;
              right: 22px;
              width: 46px;
              height: 46px;
              padding: 0;
              border: none;
              background: #555;
              cursor: pointer;
              z-index: 1300;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              box-shadow: 0 2px 7px rgba(0,0,0,0.2);
            }
            .hamburger-box {
              width: 30px;
              height: 24px;
              display: inline-block;
              position: relative;
            }
            .hamburger-inner {
              display: block;
              top: 50%;
              margin-top: -2px;
              width: 30px;
              height: 4px;
              background-color: #fff;
              border-radius: 2px;
              position: absolute;
              transition: background-color 0.15s ease;
            }
            .hamburger-inner,
            .hamburger-inner::before,
            .hamburger-inner::after {
              width: 30px;
              height: 4px;
              background-color: #fff;
              border-radius: 2px;
              position: absolute;
              transition: all 0.3s cubic-bezier(.4,0,.2,1);
            }
            .hamburger-inner::before,
            .hamburger-inner::after {
              content: "";
              display: block;
            }
            .hamburger-inner::before {
              top: -10px;
            }
            .hamburger-inner::after {
              bottom: -10px;
            }
            
            /* ANIMATION TO X */
            .hamburger-inner {
              display: block;
              top: 50%;
              margin-top: -2px;
              width: 30px;
              height: 4px;
              background-color: #fff; /* This line is likely the culprit */
              border-radius: 2px;
              position: absolute;
              transition: background-color 0.15s ease;
            }
            
            .hamburger.is-active .hamburger-inner {
              background-color: transparent !important;
            }
            .hamburger.is-active .hamburger-inner::before {
              transform: translateY(10px) rotate(45deg);
            }
            .hamburger.is-active .hamburger-inner::after {
              transform: translateY(-10px) rotate(-45deg);
            }
            .hamburger.is-active .hamburger-inner,
            .hamburger.is-active .hamburger-inner::before,
            .hamburger.is-active .hamburger-inner::after {
              background-color: #fff;
            }
            
#searchModal button#executeSearchBtn {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  margin: 10px 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
#searchModal button#executeSearchBtn:hover {
  background-color: #45a049;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#searchModal button#executeSearchBtn:active {
  background-color: #3d8c40;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transform: translateY(1px);
}
#searchModal button#executeSearchBtn:disabled {
  background-color: #888;
  color: #eee;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.75;
  transform: none;
}

/* Cancel (red) – mirrors Search styling */
#searchModal button#closeSearchModalBtn, #closeMelodySearchModalBtn {
  background-color: #f44336;
  color: #fff;
  padding: 10px 20px;
  margin: 10px 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
#searchModal button#closeSearchModalBtn:hover {
  background-color: #da190b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#searchModal button#closeSearchModalBtn:active {
  background-color: #c21708;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transform: translateY(1px);
}
#searchModal button#closeSearchModalBtn:disabled {
  background-color: #888;
  color: #eee;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.75;
  transform: none;
}

/* Optional: consistent focus outline for accessibility */
#searchModal button#executeSearchBtn:focus,
#searchModal button#closeSearchModalBtn:focus {
  outline: 2px solid #89cb72;
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
    Typography, Grid, and Misc from original file
----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    margin: 1.2em 0 0.5em 0;
    padding: 0;
    color: #444444;
    font-family: 'Roboto Slab', 'Open Sans', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
    line-height: 1.3;
}
h1, .h1 { font-size: 1.602em; margin-top: 0; }
h2, .h2 { font-size: 1.424em; }
h3, .h3 { font-size: 1.266em; }
h4, .h4 { font-size: 1.125em; }
h5, .h5 { font-size: 1em; }
p { margin: 0 0 1.3em 0; }
ul, ol { margin-left: 35px; margin-top: 1em; margin-bottom: 1em; }
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h1 + ol, h2 + ol, h3 + ol, h4 + ol  { margin-top: 0; }
ul { list-style: disc outside; }
ol { list-style: decimal; }
ul.check, ul.star, ul.carrot { margin-left: 15px; list-style: none outside; }
ul.disc { list-style: disc outside; }
ul.circle { list-style: circle outside; }
ul.square { list-style: square outside; }
ul.check li, ul.star li, ul.carrot li { padding: 0 0 0 22px; }
ul.carrot li { padding: 0 0 0 16px; }
ul.check > li:before, ul.star > li:before, ul.carrot > li:before { display: inline-block; margin-top: 1px; margin-left: -22px; width: 22px; content: "\e840"; height: inherit; color: #0099FF; font-family: 'icons'; font-size: 14px; vertical-align: top; font-weight: normal !important; }
ul.star > li:before { content: "\e834"; }
ul.carrot > li:before { margin-top: -1px; margin-left: -16px; width: 16px; content: "\00BB"; color: inherit; font-size: inherit; }
ul.check li li, ul.star li li, ul.carrot li li { padding: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 5px 0 5px 25px; }
ol ol { list-style: lower-alpha; }
ol ul, ul ul { list-style: circle; }
ul ol { list-style: decimal; }
ul li, ol li { margin: 5px 0 5px 0; }
dl dt { font-weight: bold; }
@media (min-width: 48em) {
    h1, .h1 { font-size: 1.8em; }
    h2, .h2 { font-size: 1.55em; }
    h3, .h3 { font-size: 1.32em; }
    h4, .h4 { font-size: 1.125em; }
    h5, .h5 { font-size: 1em; }
}
@media (min-width: 62em) {
    h1, .h1 { font-size: 2.074em; }
    h2, .h2 { font-size: 1.728em; }
    h3, .h3 { font-size: 1.44em; }
    h4, .h4 { font-size: 1.2em; }
    h5, .h5 { font-size: 1.1em; }
}
@media (min-width: 75em) {
    h1, .h1 { font-size: 2.441em; }
    h2, .h2 { font-size: 1.953em; }
    h3, .h3 { font-size: 1.563em; }
    h4, .h4 { font-size: 1.25em; }
    h5, .h5 { font-size: 1.1em; }
}

/* Footbar and misc site-wide styles */
.footbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size:1.1em;
    margin: 20px 0;
}
.footbar-sm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size:0.8em;
}
.footbar a, .footbar-sm a { text-decoration: none; }
.footbar div { float: left; margin: 0 10px; }
/* --- Custom icons --- */
@font-face {
    font-family: 'icomoon';
    src:  url('/resources/fonts/customIcons/icomoon.eot?6pt79s');
    src:  url('/resources/fonts/customIcons/icomoon.eot?6pt79s#iefix') format('embedded-opentype'),
        url('/resources/fonts/customIcons/icomoon.ttf?6pt79s') format('truetype'),
        url('/resources/fonts/customIcons/icomoon.woff?6pt79s') format('woff'),
        url('/resources/fonts/customIcons/icomoon.svg?6pt79s#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 1.333em;
    vertical-align: -30%;
    text-transform: none;
    line-height: .75em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-file-pdf-o:before { content: "\e900"; }
.icon-document-file-pdf:before { content: "\e901"; }
.icon-document-file-pdf1:before { content: "\e902"; }
.icon-TransposeDwnArrow:before { content: "\e903"; }
.icon-TransposeUpArrow:before { content: "\e904"; }
/* --- CSS for the Paper Size Modal --- */
#paperSizeModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}
#paperSizeModal > div {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 350px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    text-align: center;
}
#paperSizeModal h2 { margin-top: 0; color: #333; }
#paperSizeModal label { margin-left: 5px; font-size: 1.1em; }
#paperSizeModal input[type="radio"] { margin-bottom: 10px; }
#paperSizeModal button { padding: 10px 20px; margin: 10px 5px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; }
#paperSizeModal button#generatePdfButton { background-color: #4CAF50; color: white; }
#paperSizeModal button#generatePdfButton:hover { background-color: #45a049; }
#paperSizeModal button#cancelPdfButton, #closeShareModalBtn, #closeSearchModalBtn { background-color: #f44336; color: white;border-radius: 6px;padding: 4px;}
#paperSizeModal button#cancelPdfButton:hover { background-color: #da190b; }

 #paperSizeModal, #shareModal, #searchModal, #melodySearchModal {
                display: none;
                position: fixed;
                z-index: 1400;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0,0,0,0.6);
                justify-content: center;
                align-items: center;
            }
            #paperSizeModal > div  {
                background-color: #fefefe;
                margin: auto;
                padding: 30px;
                border: 1px solid #888;
                width: 90%;
                max-width: 350px;
                border-radius: 8px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                text-align: center;
            }
            #shareModal > div  {
                background-color: #fefefe;
                margin: auto;
                padding: 30px;
                border: 1px solid #888;
                width: 90%;
                max-width: 350px;
                border-radius: 8px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                text-align: center;
            }
            #searchModal > div  {
                background-color: #fefefe;
                margin: auto;
                padding: 30px;
                border: 1px solid #888;
                width: 90%;
                max-width: 600px;
                border-radius: 8px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                text-align: center;
            }
            #melodySearchModal > div  {
                background-color: #fefefe;
                margin: auto;
                padding: 20px 10px;
                border: 1px solid #888;
                width: 100%;
                max-width: 600px;
                border-radius: 8px;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
                text-align: center;
            }
            #paperSizeModal h2, #shareModal h2, #searchModal h2, #melodySearchModal h2 {
                margin-top: 0;
                color: #333;
            }
            #paperSizeModal label, #shareModal label {
                margin-left: 5px;
                font-size: 1.1em;
            }
            #paperSizeModal input[type="radio"] {
                margin-bottom: 10px;
            }
            #paperSizeModal button, #shareModal button {
                padding: 10px 20px;
                margin: 10px 5px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1em;
            }
            #paperSizeModal button#generatePdfButton, #copyShareUrlBtn {
                background-color: #4CAF50;
                color: white;
            }
            #paperSizeModal button#generatePdfButton:hover, #copyShareUrlBtn:hover {
                background-color: #45a049;
            }
            #paperSizeModal button#cancelPdfButton, #closeShareModalBtn, #closeSearchModalBtn, #closeMelodySearchModalBtn {
                background-color: #f44336;
                color: white;
            }
            #paperSizeModal button#cancelPdfButton:hover, #closeShareModalBtn:hover, #closeSearchModalBtn:hover, #closeMelodySearchModalBtn:hover{
                background-color: #da190b;
            }
            
            /* Search link styling */
            #searchPhraseLink, #searchMelodyLink {
                display: inline-block;
                padding: 8px 12px;
                background: transparent;
                border: 1px solid #6fc252;
                border-radius: 6px;
                transition: all 0.2s ease;
            }
            #searchPhraseLink:hover, #searchMelodyLink:hover {
                background: #6fc252;
                color: white !important;
            }
            
            /* Melody search modal buttons */
            #melodySearchModal button#executeMelodySearchBtn {
                background-color: #4CAF50;
                color: white;
                padding: 10px 20px;
                margin: 10px 5px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1em;
                font-weight: 600;
            }
            #melodySearchModal button#executeMelodySearchBtn:hover {
                background-color: #45a049;
            }
            #melodySearchModal button#executeMelodySearchBtn:active {
                background-color: #3d8b40;
            }
            #melodySearchModal button#executeMelodySearchBtn:disabled {
                background-color: #cccccc;
                cursor: not-allowed;
            }
  
/* Hide tooltips and remove hover highlight on touch devices */
@media (hover: none) and (pointer: coarse) {
  #controls a:hover,
  #controls a:active,
  #controls a:focus,
  .navbar a:hover,
  .navbar a:active,
  .navbar a:focus,
  .dropdown:hover .submitbtn,
  .dropdown:active .submitbtn,
  .dropdown:focus .submitbtn {
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
  }
}

/* Responsive Controls Bar: Mobile Portrait - Vertical Left Sidebar */
@media (max-width: 800px) and (orientation: portrait) {
  #controls {
    /* Vertical sidebar left */
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: calc(100vh + 12px);
    background: #6fc252;
    border-radius: 0 0 12px 0; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 100;
    box-shadow: 2px 0 12px rgba(0,0,0,0.10);
    padding: 10px 0;
  }
  #controls .vl {
    display: block;
    border-right: none;
    border-bottom: 2px solid #000;
    padding: 3px 2px 8px 0;
  }
  #controls a, #controls button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    font-size: 1.2em;
  }
  #controls .tooltiptext {
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 180px;
    font-size: 0.95em;
  }
}

/* Landscape or desktop: revert to horizontal controls, default styles */
@media (orientation: landscape), (min-width: 801px) {
  #controls {
    position: absolute;
    left: 0px;
    top: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    border-radius: 0 0 12px 0;
    box-shadow: none;
    padding: 0px 10px 0px 14px;
  }
  #controls .vl {
    display: inline-block;
    border-right: 2px solid #000;
    border-bottom: none;
    padding: 1px 8px 6px 2px; 
  }
  #controls a, #controls button {
    width: auto;
    height: auto;
    margin: 0 4px;
    font-size: 1.2em;
  }
  #controls .tooltiptext {
    left: 10%;
    top: 120%;
    transform: none;
    max-width: 100px;
    font-size: 0.9em;
  }
}

/* iPhone landscape: the horizontal controls bar (position:absolute inside .col-sm-12)
   is clipped — only ~1/3 of its height shows. The bar extends below .col-sm-12's bottom;
   overflow:hidden on that column clips it. Override to visible so the bar is fully shown. */
@media (max-width: 1023px) and (orientation: landscape) {
  .col-sm-12 {
    overflow: visible;
  }
}

/* Switch to top tabs: hide the old vertical rail if it still exists */
.sidenav-tabs { display: none !important; }

/* Make the content column the scroll container */
#sidenav { overflow: hidden; } /* avoid double scrollbars on the shell */
.sidenav-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;               /* single scrollbar lives here */
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Horizontal top tab bar */
.sidenav-top-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 0px 8px;
  background: #444;
  position: sticky;   /* stays visible while content scrolls */
  top: 0;
  z-index: 5;
}

.top-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px 6px 0 0;
  background: #555;
  color: #fff;
  border: 1px solid #444;
  border-bottom: 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.top-tab:hover { background: #5f6f4f; }
.top-tab.active { background: #6fc252; color: #fff; }

.top-tab-icon {
  width: 34px;
  height: 34px;
  fill: currentColor;
  flex: 0 0 auto;
}

.top-tab-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

/* Top-tab tooltips */
.sidenav-top-tabs .top-tab {
  position: relative;               /* anchor for tooltip positioning */
}

.sidenav-top-tabs .top-tab::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px);            /* show below the tab */
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  z-index: 10;
}

/* Small caret beneath the tooltip bubble */
.sidenav-top-tabs .top-tab::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 4px);
  border-width: 4px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  z-index: 10;
}

/* Show tooltip on hover or keyboard focus */
.sidenav-top-tabs .top-tab:hover::after,
.sidenav-top-tabs .top-tab:hover::before,
.sidenav-top-tabs .top-tab:focus::after,
.sidenav-top-tabs .top-tab:focus::before,
.sidenav-top-tabs .top-tab:focus-visible::after,
.sidenav-top-tabs .top-tab:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Hide tooltip for focused active tab (prevents "stuck" tooltip after click) */
.sidenav-top-tabs .top-tab.active:focus::after,
.sidenav-top-tabs .top-tab.active:focus::before {
  opacity: 0;
  visibility: hidden;
}

/* JS-controlled override: force-hide tooltip */
.sidenav-top-tabs .top-tab.no-tooltip::after,
.sidenav-top-tabs .top-tab.no-tooltip::before {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Optional: reduce tooltip font size slightly on very small widths */
@media (max-width: 380px) {
  .sidenav-top-tabs .top-tab::after {
    font-size: 11px;
  }
}

/* Panel heading inside each tab-panel */
.panel-heading {
  background: #555;
  border-bottom: 1px solid #444;
}

.panel-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #6fc252;
  padding: 10px;
  margin: 0px;
  color: white;
}

/* Keep the summary visible at the bottom while content scrolls */
.sidenav-summary {
  position: sticky;
  bottom: 0;
  background: #444;
  border-top: 2px solid #333;
  padding: 10px 12px;
  color: #fff;
  z-index: 5;
}

.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

.sidenav-summary h4 {
    color: #6fc252;
    font-size: 20px;
    margin-top: 5px;
}

/* Drawer height handling and grid layout for pinned summary */
#sidenav {
  height: 100vh;       /* fallback */
  height: 100dvh;      /* modern dynamic viewport unit */
  overflow: hidden;    /* prevent the shell from scrolling */
}

/* Let the inner container stretch */
.sidenav-container {
  height: 100%;
}

/* Lay out: [tabs][content scroll][summary] */
.sidenav-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  overflow: hidden;     /* no scroll here; only the middle area scrolls */
  min-height: 0;        /* allow the middle row to shrink and scroll */
}

/* Keep top tabs visible; they can remain sticky for extra safety */
.sidenav-top-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Make only the middle area scroll; override earlier rules */
.menuPanel {
  grid-row: 2;
  flex: initial;           /* override any previous flex */
  height: auto;            /* override earlier height:100% */
  min-height: 0;           /* critical for proper scrolling inside grids/flex */
  overflow-y: auto;        /* this is the single scrollbar */
  -webkit-overflow-scrolling: touch;
}

/* Pin the summary to the bottom row (no scroll) */
.sidenav-summary {
  grid-row: 3;
  position: relative;  /* no sticky to avoid old Safari quirks */
  bottom: auto;
}

#sidenav {
  top: 0;
  right: 0;
  bottom: 0;      /* anchor to bottom instead of using vh/dvh */
  height: auto;   /* let top/bottom define the height */
  overflow: hidden;
}

/* Grid layout stays; only the middle scrolls */
.sidenav-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Middle row (content) is the only scrollbar */
.menuPanel {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Bottom summary: pinned by grid, no sticky needed */
.sidenav-summary {
  grid-row: 3;
  position: relative;  /* no sticky to avoid old Safari quirks */
  bottom: auto;
}

#tunes.menuSpan {
  height: auto;           /* instead of fixed 31px */
  min-height: 31px;       /* preserves initial height look */
  padding-bottom: 6px;    /* breathing room for the suggestion */
  overflow: visible;      /* ensure long lines don’t clip */
}

/* Right-align the Next button and keep it below preceding content */
.next-btn-row {
  display:  flex;
  justify-content:  space-between;  /* ← Changed from flex-end */
  align-items: center;  /* ← Added for vertical alignment */
  margin-top: 10px;
  clear: both; 
  width: 100%;  /* ← Changed from 330px to use full width */
  padding: 0 8px;  /* ← Added for spacing from edges */
}

/* Next button (transparent, white, icon above text) */
.next-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: #555;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.next-btn svg { width: 28px; height: 28px; fill: currentColor; display: block; }
.next-btn:hover { opacity: 0.9; }
.next-btn:active { transform: translateY(1px); }
.next-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Drawer anchors and layout */
#sidenav {
  top: 0;
  right: 0;
  bottom: 0;
  height: auto;                 /* avoid vh/dvh quirks */
  overflow: hidden;
}

.sidenav-content {
  display: grid;
  grid-template-rows: auto 1fr auto;  /* [tabs][scrolling content][summary] */
  height: 100%;
  min-height: 0;
  overflow: hidden;                   /* only the middle area scrolls */
}

/* Only the middle area scrolls */
.menuPanel {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pinned summary in bottom row (no sticky needed for Safari quirks) */
.sidenav-summary {
  grid-row: 3;
  position: relative;
  bottom: auto;
  background: #444;
  border-top: 2px solid #333;
  padding: 10px 12px;
  color: #fff;
  z-index: 5;
}

/* ===== Summary: two explicit columns via your new wrappers ===== */
.sidenav-summary {
  display: grid !important;
  grid-template-columns: 1fr auto;  /* left text | right button */
  gap: 8px 12px;
  align-items: start;
  text-align: left;
}

/* Left column stacks header + rows neatly with spacing */
#summaryText h4 {
  margin: 0 0 6px 0;
}

#summaryText .row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}

/* Optional label/value styling */
#summaryText .label { color: white; min-width: 64px; }
#summaryText .value { color: #fff; white-space: normal; word-break: break-word; }

/* Right column: Go button */
#summaryBtn {
  grid-column: 2;
  justify-self: end;
  align-self: start;
  text-align: center;
}

/* Go button look in the summary */
#summaryBtn .submitbtn {
  background: transparent;
  color: #6fc252;
  border: none;
  padding-top: 30px;
  cursor: pointer;
  margin-right: 15px;
}
#summaryBtn .submitbtn svg, #submit .submitbtn svg {
  width: 32px;
  height: 32px;
  fill: #6fc252;
  stroke: #6fc252;
  display: block;
  margin: 0 auto 4px;
}
#summaryBtn .submitbtn:hover svg { filter: brightness(1.1); }

@media (max-width: 380px) {
  #summaryBtn .submitbtn svg { width: 28px; height: 28px; }
}

/* ===== Next buttons (single definition) ===== */
.next-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  clear: both;
}

.next-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;        /* transparent per your spec */
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.next-btn svg { width: 28px; height: 28px; fill: currentColor; display: block; }
.next-btn:hover { opacity: 0.7; }
.next-btn:active { transform: translateY(1px); }
.next-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Tune suggestion box grows to fit content ===== */
#tunes.menuSpan {
  height: auto;
  min-height: 31px;
  padding-bottom: 6px;
  overflow: visible;
}

#sourceButtonContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-left: 8px;
}

.source-button {
  background: #666;
  color: white;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  text-align: center;
  min-width: 80px;
}

.source-button:hover {
  background: #a6d7a6;
  color: #444;
}

.source-button:active {
  transform: translateY(1px);
}

.source-button.active {
  background: #6fc252;
  color: white;
}

/* When controls are visible and in vertical left sidebar mode, push content right */
@media (max-width: 800px) and (orientation: portrait) {
  body.controls-visible .title,
  body.controls-visible #svg_output,
  body.controls-visible .container {
    margin-left: 30px; /* Match the width of #controls in portrait */
    transition: margin-left 0.3s ease;
  }
  
  /* Ensure the container doesn't overflow */
  body.controls-visible .container {
    max-width: calc(100% - 60px);
  }
}

/* Landscape or desktop: no offset needed (controls are at top) */
@media (orientation: landscape), (min-width: 801px) {
.col-sm-12, .col-lg-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Existing CSS stays the same for #selectPsalm */

#selectPsalm .accordion-caret {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 18px;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  background: url("data:image/svg+xml,%3Csvg%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%20fill%3D'none'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M6%204L12%209L6%2014'%20stroke%3D'%236fc151'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E") center center no-repeat;
}

#selectPsalm.open .accordion-caret {
  transform: translateY(-50%) rotate(90deg);
}

/* ⬇️ SIMPLIFIED: #texts container just needs to start hidden */
#texts {
  display: none;  /* Controlled by JS */
  margin-left: 0;
  margin-top: 8px;
}

/* ⬇️ NEW: Smooth transition for psalm buttons inside #texts */
#psalmButtons {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}

#psalmButtons.expanded {
  max-height: 2000px;
  overflow: visible;
  opacity: 1;
}


input::placeholder {
  color: #ddd; 
}

div #tuneButtons button, .source-button {
    width: 305px;
}

@media (orientation: landscape) and (max-width: 900px) {
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  #controls {
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }
  
  .container, .row {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Fix the portrait height calculation */
@media (max-width: 800px) and (orientation: portrait) {
  #controls {
    height: 100vh; /* Remove the + 12px */
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  #sidenav {
    max-width: 90vw !important;
  }
  
  #sidenav.open {
    width: min(360px, 90vw) !important;
  }
  
  .sidenav-container {
    max-width: 90vw;
  }
  
  .menuPanel {
    max-width: calc(90vw - 60px); /* Account for tab bar */
  }
  
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Original styling for single Next button - aligned right */
.next-btn-row {
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  margin-top:  10px;
  clear:  both; 
  width: 100%;
  padding: 0 8px;
}

/* Row with both Text Only and Next buttons - spaced apart */
.next-btn-row.has-two-btns {
  justify-content: space-between;
}

/* Text Only button - styled like Go button (green) with icon above label */
.text-only-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;
  color: #6fc252;
  border: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.text-only-btn svg { width: 28px; height: 28px; fill: currentColor; display: block; }
.text-only-btn:hover { opacity: 0.9; }
.text-only-btn:active { transform: translateY(1px); }

/* CETEIcean text output styling */
.cetei-text-output {
  padding: 20px;
  color: #222;
  font-family: 'Georgia', serif;
  font-size: 1.1em;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}
.cetei-text-output tei-lg,
.cetei-text-output tei-body > * {
  display: block;
  margin-bottom: 1.2em;
}
.cetei-text-output tei-l {
  display: block;
}
.cetei-text-output tei-teiheader { display: none; }
.cetei-text-output tei-title { font-size: 1.4em; font-weight: bold; display: block; margin-bottom: 0.3em; }
.cetei-text-output tei-author { font-style: italic; display: block; margin-bottom: 1em; }

/* NEW: Row with both Clear and Next buttons - spaced apart */
.clear-next-btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  clear: both; 
  width: 100%;
  padding: 0 8px;
}

/* Shared base styles for both Next and Clear buttons */
.clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.clear-btn svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.clear-btn:hover {
  background: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Clear button specific - text color changes to red on hover */
.clear-btn:hover {
  color: #ff6b6b ! important;
}

/* Piano Keyboard Styles */
#pianoKeyboard {
  position: relative;
  height: 140px;
  background: #2a2a2a;
  border-radius: 8px;
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.piano-keys-container {
  --key-gap: 2px;
  --num-white-keys: 12;
  --num-gaps: 11;
  --total-gap-width: calc(var(--num-gaps) * var(--key-gap));
  
  position: relative;
  display: flex;
  gap: var(--key-gap);
  width: 100%;
  height: 100%;
}

.piano-key {
  position: relative;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  transition: all 0.1s ease;
  user-select: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: bold;
  padding-bottom: 5px;
}

.piano-key.white {
  width: calc((100% - var(--total-gap-width)) / var(--num-white-keys));
  height: 100%;
  background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
  z-index: 1;
  color: #666;
  font-size: clamp(8px, 1vw, 14px); /* Responsive font size */
}

.piano-key.white:hover {
  background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
}

.piano-key.white:active,
.piano-key.white.active {
  background: linear-gradient(to bottom, #89cb72 0%, #6fc252 100%);
  color: white;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.piano-key.black {
  width: calc((100% - var(--total-gap-width)) / 18); /* Black keys sized proportionally smaller */
  height: 63.6%; /* 70/110 = 63.6% of white key height */
  background: linear-gradient(to bottom, #333 0%, #000 100%);
  position: absolute;
  z-index: 2;
  color: #ccc;
  border: 1px solid #000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-size: clamp(7px, 0.9vw, 12px); /* Responsive font size */
}

.piano-key.black:hover {
  background: linear-gradient(to bottom, #444 0%, #111 100%);
}

.piano-key.black:active,
.piano-key.black.active {
  background: linear-gradient(to bottom, #6fc252 0%, #5ab03d 100%);
  color: white;
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Black key positioning is now calculated dynamically in JavaScript */

#deletePitchBtn:hover {
  background-color:  #da190b;
}

#clearPitchesBtn:hover {
  background-color: #f57c00;
}

/* Pitch display styling */
#melodySearchInput {
  font-family: 'Courier New', monospace;
  font-size:  1.1em;
  letter-spacing: 2px;
  text-align: center;
}

/* Default styles for melody search modal elements */
#melodySearchModal button.search-mode-btn {
  padding: 12px;
}

#pianoContainer {
  margin: 10px auto;
}

#pianoContainer > div:first-child {
  margin-bottom: 3px;
}

#pianoKeyboard {
  padding: 10px;
}

#melodySearchModal input[type="text"] {
  padding: 8px;
}

#melodySearchModal #pitchSearchInterface > div,
#melodySearchModal #contourSearchInterface > div:not(:first-child) {
  margin: 10px auto;
}

#melodySearchModal #contourSearchInterface > div:first-child {
  margin: 20px auto;
}

#melodySearchModal .search-options {
  margin: 10px auto 0;
  padding: 10px;
}

#melodySearchModal .search-options button {
  padding: 8px;
}

#melodySearchModal button#deletePitchBtn,
#melodySearchModal button#clearPitchesBtn,
#melodySearchModal button#deleteContourBtn,
#melodySearchModal button#clearContourBtn {
  padding: 8px 15px;
}

#melodySearchModal > div > div:nth-last-child(3) {
  margin: 0 auto;
}

#melodySearchCount {
  padding: 0 10px;
  margin: 0 auto;
}

#melodySearchResults {
  margin: 0 auto;
}

/* Responsive design for mobile devices - make modals full width with reduced padding */
@media (max-width: 600px) {
  #melodySearchModal > div,
  #searchModal > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100vh;
    overflow-y: auto;
  }

  /* Reduce padding for toggle buttons on mobile */
  #melodySearchModal button.search-mode-btn {
    padding: 10px !important;
    font-size: 1.1em !important;
  }

  /* Make piano keyboard container use more space */
  #pianoContainer {
    width: 95% !important;
    margin: 8px auto !important;
  }

  /* Reduce keyboard padding */
  #pianoKeyboard {
    padding: 8px !important;
    height: 120px !important;
  }

  /* Adjust search options section */
  #melodySearchModal .search-options {
    padding: 8px !important;
    margin: 8px auto 0 !important;
  }

  /* Make buttons more compact */
  #melodySearchModal button#executeMelodySearchBtn,
  #melodySearchModal button#closeMelodySearchModalBtn {
    padding: 8px 15px !important;
    margin: 8px 3px !important;
    font-size: 0.95em !important;
  }
  
  /* Reduce margins for containers on mobile */
  #melodySearchModal #pitchSearchInterface > div,
  #melodySearchModal #contourSearchInterface > div {
    margin: 8px auto !important;
  }
  
  /* Input padding */
  #melodySearchModal input[type="text"] {
    padding: 6px !important;
  }
  
  /* Compact delete/clear buttons */
  #melodySearchModal button#deletePitchBtn,
  #melodySearchModal button#clearPitchesBtn,
  #melodySearchModal button#deleteContourBtn,
  #melodySearchModal button#clearContourBtn {
    padding: 6px 12px !important;
  }
}

/* Additional adjustments for very small screens (like older iPhones) */
@media (max-width: 400px) {
  #melodySearchModal > div,
  #searchModal > div {
    padding: 10px !important;
  }

  #melodySearchModal button.search-mode-btn {
    padding: 8px !important;
    font-size: 1em !important;
  }

  #pianoKeyboard {
    height: 100px !important;
  }
}

/* Responsive layout for melody search results */
.melody-result-item {
    /* Base styles defined in JavaScript inline styles */
}

.melody-result-play-btn {
    /* Base styles defined in JavaScript inline styles */
}

.melody-result-text {
    /* Base styles defined in JavaScript inline styles */
}

.melody-result-notation {
    /* Base styles defined in JavaScript inline styles */
}

/* Hide notation SVG on narrow displays (600px and below) */
@media (max-width: 600px) {
    .melody-result-notation {
        display: none !important;
    }
}