html, body {
    margin: 0;
    padding: 0;
    background-color: hsl(220, 50%, 94%);
}
html, input, button {
    font-family: 'Noto Sans', sans-serif;
    color: black;
}
h3 {
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.top-section {
    width: calc(100% - 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: hsl(220, 50%, 86%);
    border: solid black 2px;
    border-top: none;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.toggle-filters {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background-color: hsl(220, 35%, 75%);
}
.toggle-filters.active {
    border-bottom: solid black 2px;
    margin-bottom: 0.75rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#toggle-filters-arrow {
    display: inline-block;
    border: solid black;
    border-width: 0 3px 3px 0;
    padding: 5px;
    transform: translateY(-2px) rotate(45deg);
    -webkit-transform: translateY(-2px) rotate(45deg);
}
#toggle-filters-arrow.active {
    transform: translateY(4px) rotate(-135deg);
    -webkit-transform: translateY(4px) rotate(-135deg);
}
.filters {
    width: 100%;
    margin-bottom: 1rem;
    display: none;
    align-items: center;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto;
}
.filters.active {
    display: grid;
}
.filters > *:not(.filter-btns) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
}
.filters > :nth-child(1) {
    margin: 0 1rem 0 0;
}
.filters > :nth-child(2) {
    margin: 0 1rem;
}
.filters > :nth-child(3) {
    margin: 0 0 0 1rem;
}
.filter-field.checkbox {
	display: flex;
	align-items: center;
}
.search {
    grid-area: 2 / 1 / 2 / span 4;
}
.search h3 {
    margin-bottom: 0.375rem;
}
#search-input {
    width: 20rem;
}
.search .filter-field {
    margin-top: 0.375rem;
}
.filter-btns {
    grid-area: 3 / 1 / 3 / span 4;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 1024px) {
    .filters {
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto;
    }
    .filters > :nth-child(1),
	.filters > :nth-child(2),
	.filters > :nth-child(3) {
	    margin: 0;
	}
    .search {
        grid-area: 5 / 1 / 5 / span 1;
    }
    .search > input {
        width: 80%;
    }
    .filter-btns {
        grid-area: 6 / 1 / 6 / span 1;
    }
}
.songbooks-loading.done {
    display: none;
}
input[type=checkbox],
input[type=radio] {
    width: 1rem;
    height: 1rem;
}
input[type=text],
input[type=date] {
    -webkit-appearance: none;
    background-color: white;
    color: black;
    border: solid black 2px;
    border-radius: 0.375rem;
    width: 10rem;
    height: 1.5rem;
    padding: 0.125rem 0.25rem;
    font-size: 14px;
}
select {
    background-color: white;
    color: black;
    border: solid black 2px;
    border-radius: 0.375rem;
    width: 10rem;
    height: 2rem;
    padding: 0.125rem 0.25rem;
    margin-top: 0.5rem;
    font-size: 14px;
}
.filters button, .btn {
    margin: 0.5rem 0.5rem 0 0.5rem;
    padding: 0.25rem 1rem;
    background-color: hsl(220, 40%, 78%);
    border: solid black 2px;
    border-radius: 0.375rem;
}
.filters button:hover, .btn:hover {
    background-color: hsl(220, 40%, 86%);
    cursor: pointer;
}
.filter-field > :last-child,
.songbooks .filter-field > :last-child {
    padding-left: 0.25rem;
}
.search > input.error,
.filter-field.invalid > input {
    border: solid red 2px;
    border-radius: 0.375rem;
}
.filter-field.invalid::after {
    display: block;
    content: 'Invalid value';
    font-size: 0.8rem;
    color: red;
}
.search.error::after {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: pre;
    content: 'Failed to search through song text.\00000aAn error occured while fetching song lyrics.';
    font-size: 0.8rem;
    color: red;
}
.page-list {
    max-width: 31.188rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media only screen and (max-width: 1024px) {
    .page-list {
        max-width: 94vw;
    }
}
.page-list.top {
    margin: 1rem 0 0.5rem 0;
}
.page-list.bottom {
    margin: 0.5rem 0 1rem 0;
}
.page-arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    padding: 5px;
    margin: 0 0.5rem;
}
.page-arrow.disabled {
    border-color: hsl(0, 0%, 70%);
}
.page-arrow.previous {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.page-links {
    display: flex;
    align-items: center;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.page-links::-webkit-scrollbar {
    display: none;
}
.page-btn {
    border: solid black 2px;
    border-radius: 0.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    margin: 0 0.5rem;
    padding: 0 0.5rem;
    background-color: hsl(220, 40%, 78%);
    font-size: 14px;
}
.page-btn:hover {
    background-color: hsl(220, 40%, 86%);
}
.page-btn.active {
    background-color: hsl(220, 50%, 94%);
}
.page-arrow.next {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.songs-amt {
    margin: 2rem 0 0 0;
    color: black;
}
.songs-section.loading {
    display: none;
}
.songs-section {
    max-width: 94vw;
    border: solid black 2px;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    overflow-y: clip;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.songs-section::-webkit-scrollbar {
    display: none;
}
.song-title-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: inherit;
}
.song-title-inner-div,
.song-title-buttons {
    display: flex;
    align-items: center;
    background-color: inherit;
}
.song-title-inner-div {
    margin-right: 0.75rem;
}
.song-title {
    padding: 0;
    margin: 0;
    margin-right: 0.75rem;
}
.song-title-arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    width: 8px;
    height: 8px;
    transform: translateY(-2px) rotate(45deg);
    -webkit-transform: translateY(-2px) rotate(45deg);
}
.song-title-arrow.active {
    transform: translateY(4px) rotate(-135deg);
    -webkit-transform: translateY(4px) rotate(-135deg);
}
.song-text-tr:not(.active) {
    display: none;
}
.song-text-td {
    border: none;
}
.song-title-td.active {
    border-bottom-color: transparent;
}
.song-text-div {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.song-text-div.loading {
    padding-left: 1rem;
}
.song-text {
    white-space: pre;
}
.songs {
    border-collapse: collapse;
    width: max-content;
}
.arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.arrow {
    border: solid hsl(0, 0%, 70%);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 0.75rem;
}
.arrow.active {
    border-color: black;
}
.up.arrow {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down.arrow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.copy-button {
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: inherit;
}
.copy-icon {
    position: relative;
    width: 1.75rem;
    height: 1.25rem;
    background-color: inherit;
}
.hidden {
    display: none;
}
.copy-icon div {
    position: absolute;
    border: solid black 2px;
    border-radius: 4px;
    width: 0.5rem;
    height: 0.6rem;
    background-color: inherit;
}
.copy-icon div:nth-child(1) {
    top: 0;
    left: 0.35rem;
}
.copy-icon div:nth-child(2) {
    top: 0.25rem;
    right: 0.35rem;
}
.image-download-button {
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: inherit;
}
.image-download-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.checkmark-icon {
    position: relative;
    background-color: inherit;
    width: 1rem;
    height: 1.25rem;
    transform: translateX(28%) rotate(-45deg);
}
.checkmark-icon div:nth-child(1) {
    background-color: inherit;
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    width: 0.9rem;
    height: 0.5rem;
    border-top-right-radius: 0.6rem;
    z-index: 2;
}
.checkmark-icon div:nth-child(2) {
    background-color: black;
    position: absolute;
    top: 0;
    right: 0;
    width: 1rem;
    height: 0.6rem;
    border-top-right-radius: 0.6rem;
    z-index: 1;
}
.copy-button p,
.image-download-button p {
    font-size: 0.75rem;
    margin: 0;
    position: relative;
    top: -0.25rem;
    height: 0.5rem;
}
th p {
    margin: 0.25rem 0;
}
td, th {
    border: solid black 2px;
    padding: 0 0.5rem;
    background-color: inherit;
}
td, th {
    padding: 0.5rem;
}
tr:first-child > th {
    border-top: none;
}
tr:last-child > th,
tr:nth-last-child(2):not(.active) > td {
    border-bottom: none;
}
tr > *:first-child {
    border-left: none;
}
tr > *:last-child {
    border-right: none;
}
tr {
    background-color: hsl(220, 50%, 86%);
}
tr:nth-child(4n+2),
tr:nth-child(4n+3) {
    background-color: hsl(220, 50%, 94%);
}
th > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUp {
  from { transform: scale(0.9); }
  to { transform: scale(1); }
}
dialog {
  outline: none;
  border: solid black 2px;
  border-radius: 8px;
  background-color: hsl(220, 50%, 86%);
  margin: auto;
  padding: 1rem;
  box-sizing: border-box;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.33);
  animation: fadeIn 0.25s ease-out forwards;
}
dialog[open] {
  animation: fadeIn 0.25s ease-out forwards, scaleUp 0.25s ease-out forwards;
}
.dialog-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.output-img {
    max-width: calc(100vw - 5rem);
    max-height: calc(100vh - 5rem);
    object-fit: contain;
}
.download-btn,
.close-dialog-btn {
    text-decoration: none;
    color: black;
    font-size: 1rem;
    display: flex;
    padding: 0.25rem;
}
.download-btn {
    display: none; /* Hidden because downloading on IOS saves to files instead of photos */
    margin: 0 0.25rem 0 0;
}
.close-dialog-btn {
    margin: 0 0 0 0.25rem;
}
.dialog-btns {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
}
.dialog-btns svg {
    width: 1.25rem;
    height: 1.25rem;
}