@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
  vertical-align: baseline;
}

.disabled {
  color: #666;
  cursor: default;
}

.body {
  margin: 10px 0 0 0;
}

.container {
  font-family: 'Manrope', sans-serif;
  font-size: 1em;
  color: #202020; /* Dark Grey */
}

/* logo and top portion */
.marching-order-logo {
  width: 200px;
  display: block;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
}

.blue-line {
  margin-top: 20px;
  margin-bottom: 12px;
  border: 1px solid #000000; /* Light Blue */
}

/* Filler MarchingOrderProfessionals */
.mo-title {
  transition: none 0s ease 0s;
  font-weight: 700;
  font-size: 40px;
}

.marching-word {
  color: #202020; /* Dark Grey */
}

.voice-words {
  color: #202020; /* Dark Grey */
}

.marching-text {
  padding: 30px;
}

.marching-text h1 {
  color: #202020; /* Dark Grey */
  font-weight: 700;
  font-size: 35px;
}

.grad-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hat-image {
  transform: rotate(20deg);
  width: 150px;
}

/* buttons for audio */
.small-toggle-btn {
  display: flex;
  box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
  align-items: center;
  border: 1px solid #F6F3EF; /* White Chalk */
  border-radius: 2px;
  cursor: pointer;
  height: 35px;
  margin: 3px auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 180px;
  background-color: #FFFFFF; /* White */
}

.small-toggle-btn:hover {
  display: flex;
  box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.3);
  align-items: center;
  border: 1px solid #FF582D; /* Exuberant Orange instead of Light Blue */
  border-radius: 2px;
  cursor: pointer;
  height: 35px;
  margin: 3px auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 180px;
}

.small-play-btn, .small-pause-btn {
  padding: 0 10px;
  color: #202020; /* Dark Grey */
}

.small-toggle-btn:hover .small-play-btn,
.small-toggle-btn:hover .small-pause-btn {
  color: #FF582D; /* Exuberant Orange */
}

/* Ensure icons are properly aligned */
.small-play-btn i, .small-pause-btn i {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}

.small-toggle-btn:hover {
  border: 1px solid #FF582D; /* Exuberant Orange */
  color: #FF582D; /* Exuberant Orange */
  border-radius: 2px;
}

.small-toggle-btn.active-player {
  border: 1px solid #FF582D; /* Exuberant Orange */
  box-shadow: 0 0 5px 0 rgba(255, 88, 45, 0.3);
}

.small-toggle-btn.active-player .small-play-btn,
.small-toggle-btn.active-player .small-pause-btn,
.small-toggle-btn.active-player .track-title a {
  color: #FF582D; /* Exuberant Orange */
}

/* reader info display */
.name {
  margin: 0px;
  color: #202020; /* Dark Grey */
}

.reader-info {
  padding: 30px 0px 30px 0px;
}

.textinfo {
  margin: 0px 25px;
}

h4 {
  font-size: 26px;
  font-family: 'Manrope', sans-serif;
  font-weight: bold;
  color: #202020; /* Dark Grey */
}

h5 {
  font-size: 18px;
  font-family: 'Manrope', sans-serif;
  color: #202020; /* Dark Grey */
  font-weight: bold;
}

body .container .play-list .play-list-row .small-toggle-btn .small-play-btn {
  display: inline-block;
  vertical-align: baseline;
}

body .container .play-list .play-list-row .small-toggle-btn .small-pause-btn {
  display: inline-block;
  vertical-align: baseline;
}

body .container .play-list .play-list-row .track-number {
  display: inline-block;
  vertical-align: baseline;
}

body .container .play-list .play-list-row .track-title {
  display: inline-block;
  vertical-align: baseline;
}

body .container .play-list .play-list-row .track-title .playlist-track {
  text-decoration: none;
  color: #202020; /* Dark Grey */
}

body .container .play-list .play-list-row .track-title .playlist-track:hover {
  text-decoration: underline;
  color: #FF582D; /* Exuberant Orange */
}

body .container .play-list .play-list-row .track-title.active-track {
  font-weight: bold;
}

body .container .play-list .play-list-row:before, 
body .container .play-list .play-list-row:after {
  content: " ";
  display: table;
  vertical-align: baseline;
}

body .container .play-list .play-list-row:after {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

a {
  color: #202020; /* Dark Grey */
  text-decoration: none !important;
}

a:hover {
  color: #FF582D; /* Exuberant Orange */
}

.title {
  text-align: center;
  margin-top: 15px;
  font-size: 22px;
}

.filterDiv {
  float: left;
  background-color: #202020; /* Dark Grey */
  color: #FFFFFF; /* White */
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.reader-grid {
  display: grid;
  grid-template-columns: .5fr 2fr;
}

.play-list {
  max-width: 150px;
}

#show_details {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#show_details h1 {
  color: #202020; /* Dark Grey */
  margin-bottom: 10px;
}

.readerPhoto {
  max-width: 300px;
  float: left;
  width: 300px;
  margin: 10px 20px 10px 0px;
}

#myBtnContainer {
  display: flex;
  margin-bottom: 10px;
}

/* Style the filter buttons */
.filterbybtn {
  border: none;
  background: none;
  padding: 5px 10px;
  margin: 10px 5px 10px 0px;
  color: #202020; /* Dark Grey */
  font-weight: bold;
  box-shadow: none;
  display: flex;
  align-items: center;
}

.center_h {
  display: flex;
}

.btn {
  border: none;
  outline: none; /* This is important to remove the focus outline */
  background-color: #FFFFFF; /* White */
  background-image: none;
  cursor: pointer;
  margin: 10px 5px;
  color: #202020; /* Dark Grey */
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
}

.btn:focus {
  outline: none; /* Additional outline removal for focus state */
  box-shadow: 0 0 5px 0 rgba(255, 88, 45, 0.3);
}

.btn:hover {
  background-color: #FF582D; /* Exuberant Orange */
  color: #FFFFFF; /* White */
}

.btn.active {
  background-color: #FF582D; /* Exuberant Orange */
  color: #FFFFFF; /* White */
  border: none;
  outline: none;
}

.btn.active:hover {
  background-color: #FF582D; /* Exuberant Orange */
  opacity: 0.9; /* Slight hover effect for active button */
  color: #FFFFFF;
  border: none !important;
  outline: none;
}
.specific_langauge {
  box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
  float: left;
  font-size: 12px;
  padding: 10px;
  text-align: center;
  color: #FFFFFF; /* White */
  position: relative;
  background: #FF582D; /* Exuberant Orange */
  max-width: 150px;
  width: auto;
  margin-bottom: 10px;
  border-radius: 25px 0px 0px 25px;
}

/* language bars on the side */
p.specific_language {
  text-align: center;
}

.language_position {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

.language {
  display: grid;
  padding: 50px 0px 0px 0px;
}

@media screen and (max-width: 700px) {
  .reader-grid {
    grid-template-columns: 1fr;
  }

  .filterbybtn {
    padding: 5px 10px;
    border-radius: 4px;
    margin: 10px 5px 10px 0px;
    border: none;
  }

  .play-list {
    max-width: 768px;
    margin: 5px;
    padding: 5px;
    height: 150px;
    overflow: auto;
    text-align: justify;
  }

  .marching-text h1 {
    color: #202020; /* Dark Grey */
    font-weight: 700;
  }

  .mo-title {
    transition: none 0s ease 0s;
    font-weight: 700;
    font-size: 40px;
  }

  .hat-image {
    transform: rotate(20deg);
    width: 80px;
  }

  .btn {
    border: none;
    outline: none;
    border: 1px solid #DDEEFF; /* Light Blue */
    box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
    background-color: #FFFFFF; /* White */
    background-image: none;
    cursor: pointer;
    color: #202020; /* Dark Grey */
    margin: 5px 5px;
  }

  .specific_langauge {
    box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
    float: left;
    font-size: 12px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF; /* White */
    position: relative;
    background: #FF582D; /* Exuberant Orange */
    width: auto;
    margin: 10px;
    border-radius: 5px 5px;
  }

  .language_position {
    display: inherit;
  }

  .language {
    display: inherit;
    padding: 0px;
  }

  #show_details {
    display: inherit;
  }
}

@media screen and (max-width: 990px) {
  .reader-grid {
    grid-template-columns: 1fr 2fr;
  }

  .marching-text h1 {
    color: #202020; /* Dark Grey */
    font-weight: 700;
    font-size: 35px;
  }

  .mo-title {
    transition: none 0s ease 0s;
    font-weight: 700;
    font-size: 40px;
  }

  .specific_langauge {
    box-shadow: 0 0 5px 0 rgba(32, 32, 32, 0.2);
    float: left;
    font-size: 12px;
    padding: 10px;
    text-align: center;
    color: #FFFFFF; /* White */
    position: relative;
    background: #FF582D; /* Exuberant Orange */
    width: auto;
    margin: 10px;
    border-radius: 5px 5px;
  }

.language_position {
    display: inherit;
  }

  .language {
    display: inherit;
    padding: 0px;
  }

  #show_details {
    display: inherit;
  }
}

/* Fix for incorrect closing braces in media queries */
@media screen and (max-width: 700px) {
  .reader-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Additional helper classes */
.center_h {
  display: flex;
  align-items: center;
}

/* Fix for JavaScript audio variable */
audio:focus {
  outline: none;
}

/* Hide during loading */
.hide {
  display: none;
}