html, body {
    overflow-x: hidden;
}

.bible-body, .about-body, .freq-dict-body, .learning-tool-body {
	margin-top: 4rem;
    background-color: var(--primary-white);
}

div.tool {
    text-align: center;
    border: 1px solid rgba(222, 226, 230, 0.825);
    border-radius: 1rem;
    width: 100%;
}
div.tool.index-tool {
    margin: 3rem 0;
}
div.tool#about{
    text-align: left;
}

div.tool#about h2 {
    text-align: center;
}

.spacer {
    height: 13rem;
}

.bible-spacer {
    height: 5.666rem;
}

.table-of-contents {
    height: 100%;
}

.table-of-contents li {
    list-style-type: none;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0;
    cursor: pointer;
    color: var(--primary-white);
    background-color: var(--primary-blue);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.table-of-contents li:hover {
    background-color: var(--secondary-blue);
}
.table-of-contents li:active, .table-of-contents li:active span {
    background-color: white;
    color: var(--primary-blue);
}

.table-of-contents li span {
    background-color: inherit;
    user-select: none;
    font-size: 0.75rem;
}

/* SECTION: tool-header */
div.tool-header {
    background-color: var(--primary-blue);
    color: var(--primary-white);
    padding: 1rem;
    border-radius: 1rem 1rem 0rem 0rem;
    /* font-family: 'Times New Roman'; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    user-select: none;
}

/* div.learning-tool-header {
    justify-content: center;
} */

div#about .tool-header {
    display: block;
    text-align: center;
}

.tool-header p {
    margin-bottom: 0px;
}

.tool-header-merge {
    position: fixed !important;
    display: block;
    top: 4rem;
    left: 0;
    width: 100% !important;
    z-index: 10000;
    border-radius: 0 !important;
    transition: left 1s ease;
    padding-top: 0 !important;
}

.tool-header-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 40rem;
}

.tool-header-center h1 {
    font-size: 2rem;
}

.tool-header-right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#toc-button {
    margin-right: 0 !important;
}
#settings-button, #toc-button, #about-button {
    height: 2.25rem;
}
#about-button {
    margin-left: 0.33rem;
}

div.settings {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

div.settings * {
    user-select: none;
}

div.settings div.row {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

div.settings h2 {
    font-size: 1.25rem;
}

div.settings div {
    /* margin-top: 0.25rem; */
    font-size: 2.25rem;
    user-select: none;
	/* padding: 0rem 1rem 0rem 1rem; */
}

div.font-family-settings button {
    height: 3.2815rem;
    width: 10.25rem;
    padding: 0.25rem 1.5rem;
    background-color: #365c8b;
    border: 1px solid rgba(255,255,255);
    border-radius: 1rem;
    margin-top: -.25rem;
}

.settings h2 {
    text-align: center;
}

.offcanvas {
    width: 15rem !important;
    z-index: 10001 !important;
}
/* !SECTION */

div.tool-content {
    padding: 1rem;
}
div.tool-content-table {
    padding: 0;
}

#set-smaller-size, #set-larger-size {
    font-family: 'Times New Roman';
    touch-action: manipulation;
}

#set-smaller-size:hover, #set-larger-size:hover,
#set-cantillation:hover, #set-without-cantillation:hover,
#male:hover, #female:hover {
    color: var(--primary-blue);
    background-color: var(--primary-white);
}

#set-without-cantillation {
    border: 1px solid var(--primary-white);
    border-left: 0px;
    padding: 0.25rem 1.5rem;
    border-radius: 0rem 1rem 1rem 0rem;
    transform: all 0.3s;
    cursor: pointer;
}

#set-cantillation {
    border: 1px solid var(--primary-white);
    padding: 0.25rem 1.5rem;
    border-radius: 1rem 0rem 0rem 1rem;
    cursor: pointer;
}

#set-without-cantillation, #set-cantillation {
    padding: 0.25rem 1.95rem;
    font-family: 'Times New Roman';
    touch-action: manipulation;
}

.set-on {
    color: var(--primary-blue);
    background-color: var(--primary-white);
    transition: all 0.3s ease;
}

#set-larger-size {
    border: 1px solid var(--primary-white);
    border-left: 0px;
    padding: 0.25rem 1.5rem;
    border-radius: 0rem 1rem 1rem 0rem;
    transform: all 0.3s;
    cursor: pointer;
}

#set-smaller-size {
    border: 1px solid var(--primary-white);
    padding: 0.25rem 1.5rem;
    border-radius: 1rem 0rem 0rem 1rem;
    cursor: pointer;
}

#set-smaller-size span {
    font-size: 1.4rem;
}

#abbr-title {
    font-size: 1.25rem;
    margin: 0.5rem 0 0.5rem 0;
}

.abbr-submenu {
	display: flex;
	flex-direction: row;
}

.abbr-submenu>div {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    margin: 0.5rem;
}

.vertical-divider {
	background-color: lightgray;
	width: .25rem;
	height: 8rem;
}

.abbr-additional {
    display: flex;
    flex-direction: column;
    align-items: left;
}

#prev-chapter, #next-chapter {
    position: absolute;
    min-width: 10rem;
    background-color: var(--secondary-blue);
}

#prev-chapter {
    left: 4.25rem;
}

#next-chapter {
    right: 4.25rem;
}

#prev-chapter button, #next-chapter button {
    padding: 0.25rem 1.5rem;
    border-radius: 0.375rem;
    height: 2.25rem;
    width: 100%;
}

#prev-chapter-mobile, #next-chapter-mobile {
    display: none;
}

#mobile-chapter-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-blue);
}

#table-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-blue);
    width: 100%;
}

#table-header-settings {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-blue);
    width: 100%;
    padding: 0.25rem 1rem 0.25rem 1rem;
    height: 2.75rem;
}

/* SECTION: dropdown */
.dropdown-menu {
    position: absolute;
    z-index: 9999 !important;
    padding: 0.5rem;
}

.dropdown-submenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.settings-dropdown-menu {
    top: 3.75rem;
    right: 1rem;
}

.tool-header-merge .settings-dropdown-menu {
    top: 2.75rem;
}
/* !SECTION */

/* SECTION: smaller devices */
@media (max-width: 1199px) {
    .tool {
        margin-top: 2rem !important;
    }

    #chapter-header {
        font-size: 1.5rem;
    }

    .tool-header-center {
        max-width: 15rem;
    }

    .settings-dropdown-menu {
        top: 4.25rem;
        right: 1rem;
        z-index: 100 !important;
    }

    .tool-header-merge .settings-dropdown-menu {
        top: 3.25rem !important;
    }
}
/* !SECTION */

/* SECTION: specifically mobile devices (as opposed to just smaller devices) */
@media (max-width: 767px) {
    .tool {
        margin: 2rem 0 0 0 !important;
        width: 100%;
    }

    #chapter-header {
        font-size: 1.5rem;
    }

    .settings-dropdown-menu {
        width: 22rem;
    }
     
    .settings .row {
        padding: 0 20rem 0 20rem;
    }
    .settings .row div div * {
        text-align: center;
    }

    .abbr-submenu div p {
        font-size: 0.85rem;
    }

    #prev-chapter, #next-chapter {
        display: none;
    }
    #prev-chapter-mobile, #next-chapter-mobile {
        display: block;
    }
    #prev-chapter-mobile button, #next-chapter-mobile button {
        min-width: 8rem;
        font-size: 0.75rem;
    }
    #prev-chapter-mobile button {
        margin: 0 0 1rem 1rem;
    }
    #next-chapter-mobile button {
        margin: 0 1rem 1rem 0;
    }
    .chapter-mobile-merge {
        position: fixed;
        top: 7.25rem;
		left: 0;
		width: 100%;
    }
}
/* !SECTION */

/* SECTION: dark mode */
@media (prefers-color-scheme: dark) {
    div.tool {
        border: 1px solid rgba(256,256,256,0.7);
    }

    .dropdown-item {
        color: white;
    }

    div.cantillation-settings span:not(.set-on) {
        background-color: var(--primary-black);
    }

    .offcanvas * {
        background-color: var(--primary-black);
        color: white;
    }

    .offcanvas .btn-close {
        background-color: #cfe2ff;
    }
    
    .offcanvas .accordion-button::after {
        background-color: #cfe2ff;
        border-radius: 0.25rem;
    }
}
/* !SECTION */