:root {
    --scrollbarBG: #444;
    --thumbBG: #303030;

    --emmetChorusColor: #981b27;
    --emmetChorusHoverColor: #7a161f;
    --emmetChorusActiveColor: #70141d;
    --emmetBridgeColor: #003e80;
    --emmetBridgeHoverColor: #003266;
    --emmetBridgeActiveColor: #002e5e;
}

/*****************
*** Scrollbars ***
*****************/

body, #emmet-song-modal .modal-body {
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar, #emmet-song-modal .modal-body::-webkit-scrollbar {
    width: auto;
}
body::-webkit-scrollbar-track, #emmet-song-modal .modal-body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb, #emmet-song-modal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}

/*************
*** Common ***
*************/

h2 {
    margin-bottom: 16px;
}
h4 {
    margin-top: 24px;
    margin-bottom: 4px;
}
.small {
    font-size: 12px;
}
.emmet-lang-tag {
    text-transform: uppercase;
}
.emmet-alert-with-tips ul {
    padding-left: 20px;
}
.emmet-has-records-icon {
    margin-left: 5px;
    font-size: 75%;
    color: #666;
}
.emmet-page {
    display: none;
}
.dropdown-menu span.oi {
    width: 16px;
    text-align: center;
    margin-right: 2px;
}
.emmet-jumpto-songno::-webkit-search-cancel-button {
    display: none;
}
.emmet-icon {
    margin-right: 3px;
}
.emmet-collapser-btn:after {
    content: '\25B4';
    margin-left: 0.25em;
}
.emmet-collapser-btn.collapsed:after {
    content: '\25BE';
}

/*************
*** Navbar ***
*************/

nav.emmet-nav {
    z-index: 10;
}

nav.emmet-nav .navbar-brand img {
    height: 35px; width: auto;
}

/****************
*** Home page ***
****************/

#emmet-p-main .emmet-logo {
    text-align: center;
}
#emmet-p-main .emmet-logo > div {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    font-size: 22.5px;
}
#emmet-p-main .emmet-logo img {
    height: 40px; width: auto;
    margin-right: 10px;
}
#emmet-p-main .emmet-logo span {
    vertical-align: bottom;
}
#emmet-p-main .emmet-main-forms {
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    text-align: center;
}
#emmet-p-main .emmet-main-forms h5 {
    margin-top: 15px;
    margin-bottom: 10px;
}
#emmet-p-main .emmet-main-forms .emmet-form-block {
    display: inline-block;
    margin-right: 0px !important;
    margin-bottom: 10px !important;
    margin-top: 0px !important;
}
#emmet-p-main hr {
    background-color: #666;
    margin: 20px 0px;
}
#emmet-p-main .emmet-main-latest-changes {
    text-align: left;
}
#emmet-p-main .emmet-main-latest-changes * {
    margin-bottom: 0px;
}
#emmet-p-main .emmet-main-latest-changes p {
    margin-top: 1em;
}
#emmet-p-main .emmet-main-latest-changes > p:first-child,
#emmet-p-main .emmet-main-latest-changes > h5 {
    margin-top: 0px;
}

/*****************
*** Song modal ***
*****************/

/* Modal */

#emmet-song-modal h5.modal-title {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
#emmet-song-modal h5.modal-title:after {
    content: '';
    position: absolute;
    top: 0px; right: 0px;
    width: 50px; height: 100%;
    pointer-events: none;
    background-image: -webkit-linear-gradient(right, rgba(68, 68, 68, 1), rgba(68, 68, 68, 0));
	background-image: -moz-linear-gradient(right, rgba(68, 68, 68, 1), rgba(68, 68, 68, 0));
	background-image: -ms-linear-gradient(right, rgba(68, 68, 68, 1), rgba(68, 68, 68, 0));
	background-image: -o-linear-gradient(right, rgba(68, 68, 68, 1), rgba(68, 68, 68, 0));
	background-image: linear-gradient(to left, rgba(68, 68, 68, 1), rgba(68, 68, 68, 0));
}

/* Toolbar */

.emmet-song-toolbar ul.nav {
    padding-left: 5px; padding-right: 5px;
}
.emmet-song-toolbar a.nav-link {
    padding-left: 10px; padding-right: 10px;
    min-width: 1em; box-sizing: content-box;
    text-align: center;
}
.emmet-song-toolbar a.nav-link.disabled {
    color: #666;
}
.emmet-song-toolbar a.nav-link.emmet-lang-btn.disabled:after {
    display: none;
}
.emmet-song-toolbar a.nav-link.active {
    border-radius: 0px;
}
.emmet-song-toolbar .emmet-song-play-progress {
    width: calc(100% + 6px); height: 2px;
    margin: 0px -3px -2px -3px;
}

/* Lyrics */

.emmet-song {
    display: table;
    border-spacing: 0.466em 0.66em;
    margin-left: -0.466em; margin-top: -0.66em;
}
.emmet-song-verse {
    display: table-row;
}
.emmet-song-verse > * {
    display: table-cell;
}
.emmet-song-verse .emmet-header {
    background-color: #444;
    padding: 0.33em;
    border-radius: 0.4em;
    text-align: center;
}
.emmet-song-verse .emmet-header.emmet-chorus {
    background-color: var(--emmetChorusColor);
}
.emmet-song-verse .emmet-header.emmet-bridge {
    background-color: var(--emmetBridgeColor);
}
.emmet-song-verse .emmet-body {
    padding-bottom: 0.33em;
}
.emmet-song-verse .emmet-body.emmet-chorus {
    font-style: italic;
}
.emmet-song-verse .emmet-body p {
    margin-bottom: 0px;
    margin-left: 0.8em;
    text-indent: -0.8em;
}
.emmet-song-verse .emmet-body p::after {
    content: "";
    display: inline-block;
    width: 0px;
}
.emmet-song-size-s .emmet-song { font-size: 85%; }
.emmet-song-size-m .emmet-song { font-size: 100%; }
.emmet-song-size-l .emmet-song { font-size: 140%; }
.emmet-song-size-xl .emmet-song { font-size: 180%; }
.emmet-song-size-xxl .emmet-song { font-size: 220%; }

/* Details */

table.emmet-song-detail-section tr.spacer {
    height: 20px;
}
table.emmet-song-detail-section tr.header th {
    border-top: none;
}
table.emmet-song-detail-section tr th {
    white-space: nowrap;
}

/* Player */

.emmet-song-player {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.emmet-song-player .play-btn {
    margin-right: 10px;
}
.emmet-song-player .progress-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
}
.emmet-song-player .progress-panel .progress-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.emmet-song-player .progress-panel .progress-labels .media-title {
    flex-grow: 1;
}
.emmet-song-player .progress-panel .progress-labels .media-title span.oi {
    margin-right: 5px;
}
.emmet-song-player .progress-panel .progress-labels .progress-text {
    text-align: right;
}
.emmet-song-player .progress-panel .progress {
    width: 100%;
    cursor: pointer;
}
.emmet-song-player .progress-panel .progress .progress-bar {
    transition: width 0.2s ease;
}
.emmet-song-records {
    margin-bottom: 10px;
}
.emmet-song-record span.oi {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 5px;
}
.emmet-song-record .purpose-lang {
    float: right;
}
.emmet-song-record .purpose-name {
    font-weight: bold;
}
.emmet-song-record .purpose-desc, .emmet-song-record .purpose-note {
    margin-left: 25px;
    font-size: 12px;
}
.emmet-song-record .purpose-desc {
    color: #999;
    font-style: italic;
}
.emmet-song-help {
    margin-top: 15px;
    font-size: 12px;
    font-style: italic;
    text-align: right;
}
#emmet-song-change-modal button {
    width: 33%;
}

/************************
*** Table of Contents ***
************************/

#emmet-p-toc .emmet-toc-header {
    display: flex;
    align-items: stretch;
    margin-bottom: 1rem;
}
#emmet-p-toc .emmet-toc-header nav {
    flex-grow: 1;
}
#emmet-p-toc .emmet-toc-header nav .breadcrumb {
    margin: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
#emmet-p-toc .emmet-toc-header .emmet-toc-options-btn {
    height: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
#emmet-p-toc .emmet-toc-chapters {
    margin-bottom: 40px;
}
#emmet-p-toc .card-header {
    padding: 0;
}
#emmet-p-toc .card-header h5 {
    margin-bottom: 0px;
}
#emmet-p-toc .card-header h5 span.badge {
    vertical-align: bottom;
}
#emmet-p-toc .card-header a {
    text-decoration: none;
    color: inherit;
    padding: 12px;
    display: block;
}
#emmet-p-toc .emmet-toc-chapters .list-group-item {
    padding-left: 17px !important;
}

/**********************
*** Loading overlay ***
**********************/

#emmet-loading {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1035; /* Bootstrap modals (1040-1050) should be in front of it */
}
#emmet-loading > div {
    position: relative;
    top: 50%; transform: translateY(-50%);
    text-align: center;
    color: white;
}
#emmet-loading img.emmet-loading-logo {
    height: 70px; width: auto;
    margin-bottom: 10px;
}
#emmet-loading p.emmet-loading-text {
    font-size: 20px;
}
#emmet-fatal-modal code {
    color: black;
}

/********************
*** Search dialog ***
********************/

#emmet-search-modal .emmet-advs-mode-list legend {
    padding-top: .5em;
    margin-bottom: .5em;
    font-size: 1.1rem;
}
#emmet-search-modal .emmet-advs-mode-list ul {
    display: table;
    width: 100%;
    padding-left: 0;
    margin-left: 0; margin-bottom: 0;
}
#emmet-search-modal .emmet-advs-mode-list ul > li {
    display: table-row;
    list-style-type: none;
}
#emmet-search-modal .emmet-advs-mode-list ul > li > div {
    margin-bottom: 10px;
    border: 1px solid #444;
    padding: 5px;
    border-radius: 5px;
}
#emmet-search-modal .emmet-advs-mode-list ul > li.emmet-active > div {
    background-color: #444;
}
#emmet-search-modal .emmet-advs-mode-list ul > li > div > * {
    display: table-cell;
    vertical-align: middle;
}
#emmet-search-modal .emmet-advs-mode-list ul > li > div > *:not(:first-child) {
    padding-left: .5em;
}
#emmet-search-modal .emmet-advs-mode-list ul > li span.oi {
    font-size: 1.5rem;
}
#emmet-search-modal .emmet-advs-mode-list ul > li > div > * label {
    display: block;
    margin-bottom: 0px;
}

/****************
*** Projector ***
****************/

#emmet-projector {
    display: none;
    flex-direction: column;
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    z-index: 991;
    background-color: var(--bs-body-bg);
    transition: display 1s linear;
}
#emmet-projector .emmet-proj-main {
    flex-grow: 1;
}
#emmet-projector #emmet-proj-main-outer img.emmet-proj-emmicon {
    display: none;
}
#emmet-projector #emmet-proj-main-outer.emmet-proj-idlebg-emmicon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
#emmet-projector #emmet-proj-main-outer.emmet-proj-idlebg-emmicon img.emmet-proj-emmicon {
    display: block;
    max-width: 70vw;
    max-height: 70vh;
    width: auto; height: auto;
}
#emmet-projector #emmet-proj-main-inner {
    overflow-y: scroll;
    padding: 1em;
    text-align: center;
}
#emmet-projector #emmet-proj-main-inner #emmet-proj-lyrics {
    display: inline-block;
    text-align: left;
    font-size: 300%;
}
#emmet-projector .emmet-proj-toolbar {
    display: flex;
    background-color: rgb(var(--bs-dark-rgb));
    padding: 0.8em;
}
#emmet-projector .emmet-proj-toolbar .toolbar-main {
    display: block;
    flex-grow: 1;
    min-width: 0;
    margin-right: 1em;
}
#emmet-projector input.form-control {
    background-color: var(--bs-body-bg);
    border-color: #444;
    color: var(--bs-body-color);
}
#emmet-projector #emmet-proj-verse-ctrl {
    position: relative;
}
#emmet-projector #emmet-proj-verse-ctrl-content {
    overflow-x: auto;
    scrollbar-width: none;
}
#emmet-projector #emmet-proj-verse-ctrl .emmet-shadow {
    display: none;
    position: absolute;
    top: 0;
    width: 1em; height: 100%;
}
#emmet-projector #emmet-proj-verse-ctrl .emmet-shadow-before {
    left: 0;
    background: linear-gradient(90deg, rgb(var(--bs-dark-rgb)), transparent);
}
#emmet-projector #emmet-proj-verse-ctrl .emmet-shadow-after {
    right: 0;
    background: linear-gradient(270deg, rgb(var(--bs-dark-rgb)), transparent);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-chorus {
    background-color: var(--emmetChorusColor);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-chorus:hover {
    background-color: var(--emmetChorusHoverColor);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-chorus.active {
    background-color: var(--emmetChorusActiveColor);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-bridge {
    background-color: var(--emmetBridgeColor);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-bridge:hover {
    background-color: var(--emmetBridgeHoverColor);
}
#emmet-projector #emmet-proj-verse-ctrl a.emmet-bridge.active {
    background-color: var(--emmetBridgeActiveColor);
}
.emmet-proj-fontsize-popover .popover-body {
    padding: 0.25rem 0.5rem;
}

/**************************
*** Bootstrap overrides ***
**************************/

:root {
    --bs-body-font-size: 0.9375rem;
    --bs-secondary-color: rgb(255, 255, 255);
}
.table {
    --bs-table-bg: transparent !important;
}
.list-group-item-action:hover {
    background-color: #393939;
}
span.badge {
    padding: 0.4em 0.4em 0.25em 0.4em;
    vertical-align: text-bottom;
}
h5 span.badge {
    padding-top: 0.5em;
    padding-bottom: 0.15em;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: '»';
}
.text-muted {
    color: #888 !important;
}