/*define colors*/
:root {
	--violet: rgb(95,15,64);
	--crimson: rgb(154,3,30);
	--orange: rgb(251,139,36);
	--autumn-leaf: rgb(227,100,20);
	--dark-teal: rgb(15,76,92);
	--cyan: rgb(0, 128, 192);
}

.violet, .crimson, .orange, .autumn-leaf, .teal {
	background-color: var(--violet);
	width: 19%;
	height: 500px;
	display:inline-block;
	margin:0;
	padding: 0;
	text-align:center;
	color:white;
	font-size: 2em;
}

.crimson {
	background-color: var(--crimson);
}

.orange {
	background-color: var(--orange);
}

.autumn-leaf {
	background-color: var(--autumn-leaf);
}

.teal {
	background-color: var(--dark-teal);
}
/*
.navbar-default, .footer {
	background: #5F0F40;
	background: linear-gradient(180deg,rgba(95, 15, 64, 1) 0%, rgba(154, 3, 30, 1) 58%, rgba(227, 100, 20, 1) 100%);
	border-color: var(--crimson);
}

.footer {
	background: linear-gradient(180deg,rgba(227, 100, 20, 1) 0%, rgba(154, 3, 30, 1) 58%, rgba(95, 15, 64, 1) 100%);
}
*/
.bubblegum-sans-regular {
  font-family: "Bubblegum Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.download-btn {
    display: inline-flex; /* Allows icon and text to align nicely */
    align-items: center; /* Vertically centers the items */
    justify-content: center;
	/*background-color: rgb(0, 128, 192);*/
    color: white;
	color: rgb(0, 128, 192);
	margin: 0 5px 0 0;
    padding: 1px 4px;
    text-decoration: none; /* Removes default link underline */
    font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
    cursor: pointer;
	/*
	background-image: linear-gradient(#54b4eb, #2fa4e7 60%, #1d9ce5);
  	background-repeat: no-repeat;
	text-shadow: 0 1px 0 rgba(0,0,0,0.1);
	transition: background-color 0.3s;
	border-radius: 8px;
	border-color: transparent;
	*/
}

#shortcuts {
	padding: 0.25em;
	text-align: center;
	background-color: rgb(174,215,255);
	background-color:white;
}

#shortcuts p.header {
	color: var(--cyan);
}

p.keyboard {
    display: inline-flex; /* Allows icon and text to align nicely */
    align-items: center; /* Vertically centers the items */
    justify-content: center;
	margin: 0 5px 0 0;
    padding: 0px 4px;
    text-decoration: none; /* Removes default link underline */
    font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
 }

.download-btn:hover {
    /*background-color: white;
    color: rgb(0, 128, 192);*/
	color:black;
	text-decoration:none;
	/*background-color: rgb(2, 28, 53);*/
}

.material-symbols-outlined {
    margin-right: 0px; /* Space between the icon and text */
    font-size: 20px; /* Adjust icon size */
}

h1 {
	font-size: 1.5em;
	margin: 0.5em 0 0 0;
	padding: 0 0 0 0;
}

h2 {
	font-size: 1.25em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

h3 {
	font-size: 1em;
	}

h1, h2, h3 {
	font-family: "Bubblegum Sans", sans-serif;
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: var(--dark-teal);
}

label.required {
	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: var(--dark-teal);
}

.heading-row {
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
	border-bottom: 1px solid rgb(0, 128, 192);
	color: rgb(0, 128, 192);
	color: var(--dark-teal);
	font-size: 1.5em;
	font-weight: 400;
	text-transform:uppercase;
	margin: 0.5em 0 0em 0;
	padding: 0 15px 0 0;
}

.letter-div {
	margin: 0.5em 0;
}

div.song-row {
	margin: 0.5em 0 1em 0;
}

.audio-column {
	border-right: 1px solid var(--cyan);
}

#featured-song {
	border: 0px solid rgb(0, 128, 192);
	padding: 0;
	margin-top: 15px;
	width: 100%;
	}

#featured-song-content {
	padding: 10px;
	}

#featured-song-banner {
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:block;
	text-align: center;
	background-color: white;
	color: rgb(0, 128, 192);
	border-bottom: 0px solid rgb(0, 128, 192);
	font-size: 1.25em;
	font-weight: 400;
	text-transform:uppercase;
	margin: 1em 25% 0;
	padding: 0 15px;
}

#featured-song-text {
	padding: 5px;
	font-size:1.15em;
	}
	
h2.featured {
	text-align:center;
	margin: 0.25em 0 0 0;
}

div.featured-header {
	padding: 5px;
}

p.featured-composers {
	text-align: center;
}

p.heading-text {
	margin: 0;
	padding: 0;
}

p.song-title {
	text-transform:capitalize;
	font-weight:700;
	margin: 0;
}

.heading-row span {
	margin-top: 0;
	padding-top: 0;
}

.lyric-sheet-column {
	border-right: 1px solid rgb(0, 128, 192);
}

.song-summary {
	padding-left: 0px;
}

.lyric-sheet-column img {
	width: 100%;
	border: 1px solid black;
}

.lyrics-column img {
	width: 100%;
}

.leadsheets-column {
	/*border-left: 1px solid rgb(0, 128, 192);*/
}

.heading-column {
	padding:0;
	margin: 0;
}

#youtube-video {
	margin: 0 0 0.5em 0;
}

ul.media-list {
  list-style: none; /* Remove default marker */
  list-style-type: square;
  list-style-position: inside;
  /*padding: 0;
  margin: 0;*/
}


ul.media-list li {
  /* position: relative; Container for absolute positioning */
  /* padding-left: 1em; Make space for the custom marker */
  line-height: 1; /*Optional: adjust as needed */
}

ul.media-list li::marker {
	color: var(--violet);
	font-size: 1em;
	margin:0;
	padding:0;
}

ul.media-list li.selected::marker {
	color: var(--autumn-leaf);
}

/*ul.media-list li::before {*/
	 /* content: "\25FC";Unicode for a medium filled-in square */
	/*position: absolute;
	font-size: 1em;
	color: rgb(63,36,90); 
	color: var(--violet);
	left: 0;
	top: 50%;
	transform: translateY(-50%); 
}

#audio-list ul.media-list li::before {
	top: 25%;
}
*/
/*for list item without a link (i.e., currently selected item)
ul.media-list li.selected::before {*/
	 /* content: "\266A";Unicode for an eighth note */
	/* content: "\25FC"; Unicode for a medium filled-in square */
	/*color: rgb(245,132,36); /*gold*/
	/*color: var(--autumn-leaf);
	left: 0;
}
*/
ul.song-list {
	list-style-type: none;
	padding: 0;
}

ul.song-list:first-child {
	margin: 0;
}

ul.song-list li {
	margin: 0 0 0.5em 0;
}

ul.composer-list ul.song-list {
	margin-top: 0;
	margin-bottom: 2em;
	padding:0;
}

ul.song-list h3 {
	font-size: 1em;
	margin: 1em 0 0 0;
}

ul.composer-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.composer-list li {
	margin: 0 0 0 0;
}

ul.composer-list li ul.song-list {
}

a {
	color: rgb(0, 128, 192);
	color: var(--teal);
}

p.pdf-name {
	margin:0;
}

#breadcrumbs, .header, .alpha, .sorted, #songs-nav, .download-button {
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	text-transform: lowercase;
	/*get rid of space between navbar and page content*/
	margin-bottom: 1em;
	margin-top: 0;
	color: rgb(0, 128, 192);
}

p.alpha {
	margin:0;
	padding:0;
}

#breadcrumbs {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	font-size: 1em;
}

.sorted {
	margin-bottom: 0;
}

#song-container {
	position:relative;
}

.song-text {
	text-align:left;
	margin-top: 5px;
	font-size: 1.15em;
}

#alpha-index {
	position: sticky;
	top: 0;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background:white;
	z-index:50;
	display:block;
}

#alpha-index p {
	font-size: 2em;
	letter-spacing: 0px;
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#alpha-index a {
	text-decoration:underline
	}
	
p.alpha-header {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#alpha-index a:link {
	border: 0px solid red;
	padding: 0 2px 0 2px;
	margin: 0;
	text-decoration:underline;
}

#alpha-index a:visited  {
	color: rgb(0, 128, 192);
}

#alpha-index a:hover {
	background-color:#E1E1E1;
}

#alpha-index a:active  {
	background-color: rgb(0, 128, 192);
	color:white;
}

.header {
	font-size: 16px;
	color:#343434;
	margin-bottom: 0.5em;
}

p.header {
	margin-bottom:0;
}

/*
div.lyrics-column span.header, div.video-column span.header {
	color: rgb(0, 128, 192);
	border-bottom: 1px solid rgb(0, 128, 192);
}
*/
a.btn-link, a.btn-link:visited, a.btn-link:active  {
	text-decoration:none;
	color:white;
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	text-transform: lowercase;
	padding: 1px 10px;
	margin-bottom: 0.75em;
	border-radius: 8px;
}

a.btn-link:hover {
	color:black;
	text-decoration:none;
	background-color: rgb(2, 28, 53);
}

a.more-less{
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: lowercase;
}

div.leadsheet {
	margin-bottom:1em;
	margin-top: 5px;
}

li.login {
	position:absolute;
	right:0;
}

.composer {
	font-style: italic;
	color: rgb(47, 164, 231);
}

.song-notes {
	white-space: pre-wrap;
	display:block;
	font-style:italic;
	margin-bottom: 0em;
	font-size: 1.25em;
}

.all-song-notes {
	white-space: pre-wrap;
	display:inline;
	font-style:italic;
	margin-bottom: 0.5em;
	font-size: 1em;
}

.no-link {
	color:#CDCDCD;
}

#songs-nav {
	margin: 0 0 0.25em 0;
	font-size: 1em;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-container > div, div.preview-image, div.lyrics-preview-image {
  margin: 0px 10px 10px 0;
  padding: 0px;
  width: 25%;
  text-align: center;
}

div.leadsheets-preview-image {
	width: 175px;
}

div.leadsheets-preview-image a.btn-link{
	margin-top: 0.75em;
}

div.preview-image {
	position:relative;
}

div.preview-image a.btn {
	text-align: center;
	position: relative;
	bottom: 0px;
	margin: 0.25em 0;
}

div.lyrics-preview-image {
	width: 50%;
}

div.lyrics-preview-column img {
	width: 100%;
	margin-bottom: 0.5em;
	border: 1px solid black;
}

div.lyrics-preview-column {
	text-align: left;
	margin-top: 5px;
	/*border-right: 1px solid rgb(0, 128, 192);*/
}

div.download-buttons-div {
	text-align:center;
}

#lyrics-preview div.download-buttons-div {
	text-align:left;
}

div.video-column {
	border: 0px solid red;
}


/* Styles for screens up to 767px wide (e.g., mobile devices) */
@media screen and (max-width: 767px) {
  .flex-container > div, div.preview-image {
  width: 100%;
  }
}

.flex-container > div > img {
	width: 100%;
	border: 1px solid black;
	margin-bottom: 0.5em;
}

.video-flex-container {
	display: flex;
	/* Further flex properties for alignment and distribution */
	justify-content: center; /* Example: center the iframe horizontally */
	/*align-items: center; /* Example: center the iframe vertically */
	height: 50vh; Example: make the container full viewport height */
}

.video-flex-container iframe {
	width: 100%; /* Example: make iframe take full width of its flex item space */
	height: 100%;  /*Example: make iframe take full height of its flex item space */
	flex-grow: 1; /* Example: allow iframe to grow and fill available space */
	flex-shrink: 1; /* Example: allow iframe to shrink if needed */
	flex-basis: auto; /* Example: default size based on content or intrinsic dimensions */
	border: none; /* Optional: remove default iframe border */
	padding: 0 10px 0 0;
}

iframe {
	top: 0;
	left: 0; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	border: 0;
	}

div.video-div {
	left: 0; 
	width: 100%; 
	height: 0; 
	position: relative; 
	padding-bottom: 56.25%;
	margin: 0.5em 0 0 0;
	}

p.pdf-name {
	text-align:left;
}

img.preview {
	border: 2px solid white;
	margin-top: 5px;
}

img.preview:hover {
	border: 2px solid rgb(0, 128, 192);
}

div.video {
	left: 0; 
	width: 100%; 
	position: relative; 
	padding-bottom: 56.25%;
}

div.leadsheets-column span.header {
	margin: 0 0 1em 0;
	color: var(--dark-teal);
	font-weight:bold;
}

#audio-player {
	margin: 0 0 0 0;
}

.video-performer {
	margin: 0.25em 0 1em 0;
}

#backing-tracks, #biab {
	margin-top: 1em;
}

#backing-tracks audio, #audio-player audio {
	margin-top: 0.5em;
}

.lyric-sheet-column .header {
	color: var(--dark-teal);
	font-weight: bold;
}

.tilesWrap {
	display: inline-block;
	max-width:100%;
	padding: 0px;
	position: relative;
	vertical-align: top;
	margin: 1em 0 2em 0;
	background: white;
	text-align: left;
}

.tilesWrap img {
	padding: 3px 10px;
	padding: 10px 0;
	}

.tilesWrap:before {
	content: '';
	position: absolute;
	top: -6px;
	left: -2px;
	right: -2px;
	bottom: -6px;
	z-index: -1;
	background: var(--crimson);
	transform: skew(2deg, 3deg);
	background: var(--crimson);
	background: -webkit-linear-gradient(to right, var(--orange), var(--crimson));
	background: linear-gradient(to right, var(--cyan), var(--crimson));
}
.tilesWrap:after {
	content: '';
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.02);
}

#login-form, #login-form div.tilesWrap {
	padding: 0.5em;
	font-size:18px;
}

#login-form h1 {
	padding: 0.5em 0;
}

#submit-form, #submit-add {
	margin: 0.5em 0;
	text-decoration: none; /* Removes default link underline */
    font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
    cursor: pointer;
	}

#submit-add {
	margin: 0;
	align-items: bottom;
	}

#submit-add:hover {
	color:black;
	text-decoration:none;
}

#guest-login .form-control {
	font-size: 1em;
	color:black;
}

#guests {
	width: 100%;
	margin: 0.5em 0;
	border: 1px solid var(--cyan);
}

tr.table-header {
	background-color: var(--cyan);
	color: white;
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
	}

tr.shade {
	background-color: rgb(204,238,255);
	}

tr.no-shade {
	background-color: white;
	}

td {
	padding: 5px;
	}

a.remove-btn, input.remove-btn, .add-btn {
    display: inline-flex; /* Allows icon and text to align nicely */
    align-items: center; /* Vertically centers the items */
    justify-content: center;
	/*background-color: rgb(0, 128, 192);*/
    color: white;
	background-color: rgb(0, 128, 192);
	margin: 0;
    padding: 1px 4px;
    text-decoration: none; /* Removes default link underline */
    font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
    cursor: pointer;
}

#addGuest .form-control {
	color:black;
	}

#addGuest label {
	font-family: "Alegreya Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	text-transform:lowercase;
	color: var(--cyan);
}

.add-btn {
	align-items: bottom;
	display:flex;
	color:white;
	}

a.remove-btn:hover, add-btn {
	color:black;
	}

#add-guest {
	margin: 1em 0 1.5em;
}