body {
  margin: 0;
}

a {
  text-decoration: none !important;

  &:focus {
    outline-color: #C1246B !important;
    box-shadow: 0 0 0 2px #C1246B !important;
    text-decoration: none !important;
  }
}


.navbar {
  background-color: #C1246B;
  height: 5rem;

  .logo-text {
    font-size: 2rem;
  }

  .sup-text {
    top: -12px;
  }
}

.full-height-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 40px;
}

@media (max-width: 767px) {

  /* Mobile-specific styles */
  .lyrics-page-container {
    padding: 10px 10px !important;
  }
}

.footer-container {
  border-top: .5px solid #C1246B;
  padding: 10px;

  .footer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;

    .footer-body {
      color: #C1246B;
    }

    .footer-caption {
      opacity: .6;
    }
  }
}

/**LyricsView**/
.lyrics-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px;

  .lyrics-title {
    font-weight: 00;
  }

  .lyrics-verse-container {
    margin-top: 12px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    /*align-items: center;*/
    .lyrics-line-container {
      p {
        margin-bottom: 5px;
        font-size: 20px;
      }
    }

    .lyrics-end-container {
      display: flex;
      gap: 10px;
      justify-content: center;

      .lyrics-end-item::before {
        content: "\1F338";
        opacity: .6;
      }
    }

  }
}


.not-found-container {
  padding: 20px;
  font-size: xx-large;
  color: red;
}

.gap-20 {
  gap: 20px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.link {
  color: #C1246B;

  &:hover {
    color: #9A1C55;
  }

  &:focus {
    outline-color: #C1246B !important;
  }
}

.link-btn {
  color: #C1246B;
  border-color: #C1246B;

  &:hover {
    background-color: #C1246B;
    border-color: #C1246B;
  }

  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #C1246B;
  }

  &:focus {
    box-shadow: 0 2px 0 #C1246B;
    outline-color: #C1246B !important;
  }
}

.alphabet-btn {
  border-radius: 50%;
  width: 50px;
}

.author-btn {
  border-radius: 25px;
}

.index-view {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .link {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    font-size: 18px;
  }
}

.floating-copy-btn {
  position: fixed;
  bottom: 90px;
  /* Adjust as needed */
  right: 20px;
  /* Adjust as needed */
  border-radius: 50%;
  /* Makes it circular */
  width: 60px;
  /* Adjust size */
  height: 60px;
  /* Adjust size */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  /* Ensure it stays on top */
  background-color: #C1246B;
  color: #FFF;

  &:hover {
    background-color: #C1246B !important;
    border-color: #C1246B !important;
    color: #FFF;
  }

  &:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #C1246B !important;
  }

  &:focus {
    box-shadow: 0 2px 0 #C1246B !important;
    outline-color: #C1246B !important;
  }
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
  background-color: #C1246B !important;
  border-color: #C1246B;
}

input,
input:hover,
input:active,
input:focus,
input:visited,
.form-control:focus {
  border-color: #C1246B;
  outline-color: #C1246B;
  box-shadow: none !important;
}

a,
a:hover,
a:active,
a:focus,
a:visited {
  border-color: none !important;
  outline-color: none !important;
  box-shadow: none !important;
}


.btn-icon {
  position: relative;
  left: -12px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px;
}

.btn-iconed {
  padding-top: 0;
  padding-bottom: 0;
}

.btn {
  margin-bottom: 10px;
}

.search-container {
  margin-top: 1em;
  padding: 10px 40px 0px 40px;
  display: flex;
  align-items: end;
  justify-content: end;

  .search-box {
    width: 35%;

    input {
      border-radius: 10px !important;
      height: 55px;
    }

  }
}

.search-result-ul {
  margin-top: 3.5em;
  width: 97%;
  position: absolute;
  padding: .2em;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  z-index: 9999;
  background-color: #FFF;

  li {
    list-style: none;
    align-items: center;
    padding: .5em;

    &.inactive {
      opacity: .6;
    }

    &:hover {
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.03) !important;
    }

    a {
      color: unset
    }
    &.selected{
      background-color: rgba(0, 0, 0, 0.07);
    }
  }
}

.search-loading-spinner {
  opacity: 0;
  position: relative;
  top: 12px;
  right: 45px;
  color: #C1246B;

  &.enable {
    opacity: .8;
  }

  &.disable {
    opacity: 0;
  }
}

.search-text-remove {
  position: relative;
  bottom: 12px;
  right: 40px;
  border: 0px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }
}

@media (max-width: 767px) {
  .search-container {

    .search-box{
      width: 100%
    }
  }
}