@charset "utf-8";
/* CSS Document */

/* Hosting a downloaded Google font*/
@font-face {
  font-family: 'Cookie';
  src: url('/fonts/Cookie-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


body{
  font-family: Arial, Helvetica, sans-serif;
   background-color: #f4f4f4;
   margin: 0px;
   padding: 0px;
}


body#loginPage {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  margin: 4vh 0px;
}


/* Login form */
#loginContainer {
  background-color: #fff;
  padding: 212px 20px 20px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 360px;
  background-image: url("/images/formBG2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}


#loginContainer h2{
  text-align: center;
  color: #333;
}

.formGroup{
  margin-bottom: 20px;
}

.formGroup input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.buttonContainer{
  text-align: center;
  margin-top: 20px;
}

.buttonContainer input[type="submit"]{
  background-color: #4e4e4e;
  color: #fff;
  padding: 10px 60px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.1s ease;
}

.buttonContainer input[type="submit"]:hover{
  background-color: #000;
}

.buttonContiner input[type="submit"]:focus{
  outline: none;
}

/* Show password checkbox area */
.checkboxContainer {
  margin-top: 10px; /* Adjust as needed */
  display: flex;
  align-items: center; /* Aligns items vertically center */
}

.checkboxContainer input[type="checkbox"] {
  margin-right: 5px; /* Space between checkbox and label */
  width: fit-content;
}



.centeredImage{
  display: block;
  margin: 0px auto;
}



#contentWrap {
  width: 100vw;
  max-width: 1024px;
  margin: auto;
  background-color: #4f4f4f;
  color: #fff;
  background: rgb(160,160,160);
  background: linear-gradient(58deg, rgba(160,160,160,1) 30%, rgba(0,0,0,1)90%);
}


/* The area below page header, outside of sonbook where we just need a simple webpage look. */
#pageContent {
  background-color: #fff;
  color: #333;
  padding: 60px;
  min-height: 60vh;
}


#pageContent ul li {
  padding-bottom: 20px;
  line-height: 1.5;
}





#topStrip {
  padding: 6px 20px 0px 20px;
  color: #fff;
  text-align: right;
  background-color: #333;
  text-transform: uppercase;
}




#topStrip a {
  color: #fff;
  text-decoration: none;
}


#topStrip ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Aligns menu items to the right */
}

#topStrip ul li {
    float: left;
}

#topStrip ul li a {
    display: block;
    color: white; /* Text color */
    text-align: center;
    padding: 14px 16px; /* Spacing around the text */
    text-decoration: none;
}

/* Change the link color to #111 (darker) on hover */
#topStrip ul li a:hover {
    background-color: #111;
}



/* Style the page top image */
img.pageBanner {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 124; /* Adjust the values to match your image's aspect ratio */
  max-width: 1024px;
}


/* Style anchor row, where we insert an alphanumeric anchor text for the alphabetic menu */
/* Having to use !important here to override the Datatables CSS settings. */
/* .anchorRow {
  background-color: #fff!important;
}
*/

.anchorRow td {
  border-top: 3px solid #a7a1a1 !important;
}


.anchorRow h1 {
  font-family: "Cookie", cursive;
  font-weight: 400;
  font-style: normal;
  color: #000;
  padding: 0px 20px;
  margin: 0px;
  text-align: left;
  font-size: 3rem;
}



#menu_alphabetical ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
}


#menu_alphabetical li {
  display: inline-block;
  border: 1px solid #fff;
  padding: 20px 12px;
  margin: 0px;
  cursor: pointer;
  background-color: #33333394;
  color: #fff;
  font-size: 1.2rem;
}



#menu_alphabetical li:link, #menu_alphabetical li:visited{
  background-color: #000;
  color: #fff;
  text-decoration: none;
}


#menu_alphabetical li:hover {
  background-color: #f1f3f4;
  box-shadow: 0px 4px 40px #000;
  color: #000000;
}



/* Random and clear links */

#randomButtons {
  display: flex;
  justify-content: center;
  align-items: center;
}

a#randomLink {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #fff;
}

a:link#randomLink {
  border: 1px solid #fff;
}

a:hover#randomLink {
  border: 1px solid #000;
}


.image-link {
  width: 205px;
  height: 36px;
  background-image: url("/images/btn_recolaRoulette.webp");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}

.image-link:hover {
  background-position: bottom;
}



.button-link {
  background-color: #525252;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  margin: 8px;
  border: 1px solid white;
}


.button-link:hover, .button-link:focus {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}





table.dataTable tbody th, table.dataTable tbody td {
  padding: 0px;
}

.songbookTable {
  background-color: #fff;
  width: 100%;
}

/* The datatable wrapper */
#songbook{
  background-color: #fff;
  color: #000;
  font-size: 1.0em;
  padding: 20px;
}

#songbook ul li{
  list-style: none;
  padding: 0.25em 0px
  ;
}

#songbook_wrapper thead{
  background-color: #000;
}



#songbook tr{
  text-align: center;
}

#songbook tr:hover {
  background-color: #f6f6f6;
}

#songbook td {
  border-bottom: 1px solid #d9d9d9;
}
#songbook.display tr.even {
  background-color: #F9F9F9;
}

table {
  border-collapse: collapse; /* Merges adjacent cell borders */
  border-spacing: 0; /* Removes space between cells */
}

th {
  background-color: black;
  color: white;
  padding: .5rem 0px;
}

div#song-count {
  padding: 4px 0.5rem;
}



#songbook .playLinks{
  text-align: left;
}

/* Create the audio play/pause toggle button before each artist name. */

.playLinks li a {
  border: 3px solid transparent; /* Default link border */
  padding: 4px 12px;
  text-decoration: none; /* Remove underline from links */
  border-radius: 20px;
  color: black; /* Default text color */
}

.playLinks li a:hover, .playLinks li a:focus {
  border: 3px solid #3d6ac2; /* Blue border on hover and focus */
}

.playLinks li a:focus {
  outline: none; /* Remove default focus outline */
}


.playLinks li a:before {
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0.25em;
  margin-right: .5em;
}

.play-button:before {
  background-image: url('/images/icon_play.png'); /* Play icon */
}




/* The play button before each song */
#songbook .playButton {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  padding: 0px 5px 5px 0px;
}


#playHeader{
  width: 100%;
}


#bhh_audioPlayer {
  width: 100%;
  display: block;
/*  height: 30px; */
  margin: auto;
}


.nowPlaying {
  margin: 0px;
  padding: 10px 0px 0px 20px;
  font-size: 1.5em;
  text-shadow: 0px 5px 8px #000000;
}



  .input-with-icon {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .input-with-icon img {
    margin-right: 10px;
  }
  
  .input-with-icon input[type="text"] {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
  }

/* Search area styling  */
#songbook_filter {
  width: 35%;
  background-color: #fff;
  padding: 6px 10px;
  border-radius: 30px;
  background-image: url("/images/icon_search_gray.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px;
  margin: 10px 20px 10px 0px;
}


#songbook_filter input {
  padding: 3px 5px;
  background-color: transparent;
  margin: 0px 10px 0px 0px;
  width: 90%;
  border: none;
  font-size: 1rem;
}


/* Remove the dark border that appears when search field is active. */
.dataTables_wrapper .dataTables_filter input[type=search]:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

  /*
  
  Was working to get the height of the page to be perfect, but couldn't figure it out.
  Some clues are: The height is defined in the Datatables definition in the HTML page.
  The, we're trying to keep the scrolling area as large as possible at all screen sizes,
  while the footer text stays on the screen.

  
  
#songbook_wrapper{
  height: 100vh;
}


.dataTables_scrollBody {

    Getting the scrolling portion of the page to fill as much height as possible, leaving room for the datatables footer area.
    This is based on the site's header elements before the scrolling area being 1024px x 436px.
    Converting this height to vw:
    (436/1024) x 100 = 42.58vw

    height: calc(100vh - 42.58vw)!important;

}
*/



#songbook_wrapper a:link, #pageContent a:link, #songbook_wrapper a:visited, #pageContent a:visited {
  text-decoration: none;
  color: #2C68C7;
}

#songbook_wrapper a:hover, #pageContent a:hover{
  text-decoration: underline;
}

#songbook_wrapper a:active, #pageContent a:acvite, #songbook_wrapper a:focus, #pageConent a:focus{
  color: orange;
}

/* Datatables CSS Overrides */
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
  text-align: center;
}


/* Styles for the random song highlighter */
.highlighted {
  background-color: #f9ffc3db !important;
}

.highlighted td {
  border-top: 8px groove #3d6ac2 !important;
  border-bottom: 8px ridge #3d6ac2 !important;
}




/* Adding images to the main song listing */
.song-image {
	border: none;
	width: 12rem;
	display: block;
	margin: 4px auto;
	height: auto;
	padding: 0px;
}