html * {
    box-sizing: border-box;
}

body, button, input, label, img, menu, a, a:visited {
    all: unset;
    color: inherit;
    text-decoration: none;
    padding: 0;
}

a {
    display: inline;
}

button:focus, button:active, button:focus *, button:active * {
    outline: none !important;
}

button::-moz-focus-inner {
  border: 0;
}

@font-face {
    font-family: "Ubuntu";
    src: url(/website/fonts/Ubuntu-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Pacifico";
    src: url(/website/fonts/Pacifico-Regular.ttf) format("truetype");
}

:root {
    --color_bg_top_bar: #2c3645;
    --color_tx_top_bar: #ddd;
    --color_bg_body: #e2e7f7;
    --color_tx_body: #13171e;
    --top_bar_max_width: 450px;
    --estrofe_spacing: 1.5rem;
}

html {
    font-family: Ubuntu;
    background: var(--color_bg_body);
    height: 100%;
}

body {
    min-height: 100%;
}

main_button_container {
    display: block;
    position: relative;
    width: 2.5rem;
    margin-right: 0.5rem;
    height: 100%;
}

button.home {
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #0f1a2f;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #606375;
    width: 100%;
    height: 100%;
    color: var(--color_tx_top_bar);
    font-size: 1.5rem;
    z-index: 1;
    position: relative;
}

button.home:hover {
    border-color: #bbb;
    cursor: pointer;
    color: #fff;
}

main_button_container.active button.home {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

main_button_container menu {
    all: unset;
    position: absolute;
    display: none;
    top: calc(100% - 1px);
    background-color: #0f1a2f;
    padding: .5em;
    border: 1px solid #606375;
    border-radius: 0 .2em .2em .2em;
    font-size: 1.2rem;
}

main_button_container.active menu {
    display: block;
}

menu {
    --button-justify-content: flex-start;
    --button-padding: .4em .3em;
    --button-border-radius: .2em;
    --button-font-weight: bold;
    --button-text-transform: uppercase;
    --button-hover-color: #fff;
    --button-hover-bg: var(--color_bg_top_bar);
    --button-white-space: nowrap;
}

menu i {
    font-size: 1.4rem;
    width: 1.7rem;
}

main_button_container menu menu_option {
    all: unset;
    display: flex;
    align-items: center;
    padding: .4em .3em;
    cursor: pointer;
    border-radius: .2em;
    font-weight: bold;
    white-space: nowrap;
}

main_button_container menu menu_option i {
    font-size: 1.4rem !important;
    width: 1.7rem;
}

main_button_container menu hr {
    border: none;
    border-top: 2px solid #606375;
    margin: 5px 0;
}

menu hr:first-child, menu hr:last-child {
    display: none;
}

main_button_container menu menu_option:hover {
    color: #fff;
    background: var(--color_bg_top_bar);
}

top_area {
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #2c3645;
    color: var(--color_tx_top_bar);
    padding-top: 0.5rem;
}

top_bar {
    display: flex;
    width: 100%;
    padding: 0 0.9rem;
    height: 2.5rem;
    margin-bottom: 3px;
}

search_bar_container {
    display: block;
    height: 100%;
    border: 1px solid #606375;
    border-radius: 4px;
    flex-grow: 1;
}

#search_bar {
    display: block;
    padding-left: 4px;
    height: 100%;
    line-height: 0;
    width: 100%;
    min-width: 50px;
}

#search_bar::placeholder {
    color: white;
    opacity: 0.8;
}

button.search_bar {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 4px;
    cursor: text;
    color: #ddd;
}

button.search_bar:hover {
    color: white;
}

.music_list {
    width: 100%;
    color: #223037;
    padding: 0 0.9rem;
}

.music_list entry {
    display: flex;
    align-items: center;
    
    width: 100%;
    border: 1px solid #3b628c;
    border-radius: 6px;
    margin-top: 0.5rem;
    background: white;
}

.music_list entry .label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex-grow: 1;
    padding: 0.5rem;
    border-radius: 6px 0 0 6px;
    justify-content: flex-start;
    align-items: flex-start;
}

.music_list entry .label music_title {
    font-weight: bold;
}

.music_list entry .label begining,
.music_list entry .label composer,
.music_list entry .label version {
    font-size: 0.9rem;
    color: #676d77;
}

.music_list entry .label:hover {
    background: #f7f7fa;
}

.music_list entry .pin {
    display: flex;
    font-size: 2rem;
    padding: 0 .5em 0 .5em;
    align-self: stretch;
    align-items: center;
    border-radius: 0 6px 6px 0;
    --button-hover-bg: #f7f7fa;
}

.music_list entry .pin img {
    max-width: 25px;
}

controls_container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 0.9rem;
    --button-color: #ddd;
    --button-hover-color: white;
}

share_music_button_container, controls_container controls_left {
    width: 3rem;
    font-size: 1.2rem;
}

share_music_button_container {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    white-space: nowrap;
}

button.print, button.share_music {
    font-size: 1.4rem;
    cursor: pointer;
}

share_music_button_container tooltip {
    position: absolute;
    right: 0;
    height: 2rem;
    top: 2rem;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: default;
}

controls {
    font-size: 1.4rem;
    color: #ddd;
    font-weight: bold;
}

controls dd-button {
    width: 2.5rem;
    padding: 2px 0;
}

controls dd-button.select_tone {
    width: 3.2rem;
}

controls dd-button.select_tone.active {
    background: #9eb1d7;
    border-radius: 4px 4px 0 0;
    color: #0f1420;
}

tone_selector_area {
    position: absolute;
    display: flex;
    flex-direction: column;
    
    cursor: pointer;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    background: #9eb1d7;
    color: #25314d;
    
    border-radius: 0 0 16px 16px;
    border: 3px solid #2c3645;
    border-top: none;
    padding: 3px;
    z-index: 1;
}

tone_selector_area > div {
    display: flex;
}

tone_selector_area button {
    display: flex;
    justify-content: center;
    width: 4rem;
    border: 1px solid #9eb1d7;
    border-radius: 4px;
}

tone_selector_area button:hover {
    color: #0f1420;
    border-color: #2c3645;
}

tone_selector_area button.active {
    background: #2c3645;
    color: #dddddd;
}

music_area {
    margin-top: 1rem;
    color: #13171e;
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    padding: 0 0.5em;
    font-size: 1.3rem;
}

music estrofe, 
music refrao,
music intro,
music solo,
music instrumental,
music interludio,
music final {
    display: block;
    font-family: monospace;
    margin-bottom: var(--estrofe_spacing);
    white-space: pre;
    font-size: 1em;
}

music vez_container > label {
    font-size: 0.738em;
}

music refrao_container {
    display: block;
}

music refrao_container > label {
    font-size: 0.738em;
}

music refrao_container refrao, music vez1, music vez2 {
    display: block;
    margin-left: .8rem;
    padding-left: .8rem;
    border-left: 2px solid #5c6a84;
}

music refrao_container label.repetition {
    margin-top: calc(4px - var(--estrofe_spacing));
    margin-bottom: var(--estrofe_spacing);
    display: block;
}

music vez_container {
    display: block;
}

music vez_container.vez1 {
    margin-top: calc(4px - var(--estrofe_spacing));
}

music vez_container.vez2 {
    margin-bottom: var(--estrofe_spacing);
}

/*music titulo {*/
music .title {
    display: block;
    font-weight: bold;
    font-size: 1.6em;
    color: #242c38;
}

/*music versao descricao {*/
music .music-info {
    display: flex;
    align-items: center;
    color: #5c6a84;
    font-size: 0.8em;
    margin-bottom: 2em;
}

/*music versao vid {*/
music .vid {
    --button-display: inline;
    --button-width: max-content;
    --button-color: #99a8c5;
    --button-margin-left: .5rem;
    --button-font-size: 1.5rem;
    --button-hover-color: var(--color_tx_body);
}

music versao codigo {
    display: none;
}

music tom {
    display: none;
}

music id {
    display: none;
}

music_body {
    display: block;
    margin-top: 1rem;
}

music volta, music label {
    display: inline-block;
    font-family: monospace;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
    color: #5c6a84;
}

music parte {
    padding: 3px 2px;
}

music volta {
    display: inline-block;
    cursor: pointer;
    color: #465578;
    padding: 3px 2px;
    font-size: 0.738em;
}

music volta icon {
    font-size: 1em;
    padding-left: 4px;
}

music volta icon i {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

music volta:hover {
    color: var(--color_tx_body);
}

music chords {
    display: block;
    font-weight: bold;
    font-size: 0.82em;
}

music lyrics {
    display: block;
    font-size: 0.82em;
}

music {
    font-family: Outfit;
}

footer_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1.2rem;
    background: var(--color_bg_top_bar);
    color: var(--color_tx_top_bar);
    margin-top: 1rem;
    cursor: default;
}

logo_large {
    font-family: Pacifico;
    font-size: 2.5rem;
    cursor: default;
    border-radius: 8px;
    padding: 0 1rem;
}

menu {
    display: flex;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
}

menu_item {
    display: block;
    margin: 0 0.5rem;
    padding: .4rem;
    cursor: pointer;
    border-radius: 4px;
}

menu_item:hover {
    background: #0f1a2f;
    color: white;
}

.audio-controls-wrapper {
    position: absolute;
    top: 0;
    height: 120px;
    width: 100%;
    transition: transform ease-out 0.3s;
    background: var(--lightblue2);
}

.audio-controls {
    position: absolute;
    top: 0;
    width: 100%;
    height: 120px;
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lightblue2);
}

.audio-tracks-wrapper {
    background: var(--lightblue3);
    transition: transform ease-out 0.3s;
    font-size: 1.4rem;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
}

.audio-tracks-wrapper.show {
    transform: translateX(-50%) translateY(-100%);
}

.audio-controls-wrapper.show {
    transform: translateY(-100%);
}

.audio-tracks {
    overflow: auto;
    max-height: 40vh;
    padding: .5em 0;
    --button-border-width: 1px;
    --button-opacity: .5;
    --button-font-family: monospace;
    --button-padding: .25em .5em;
    --button-margin-right: .5em;
    --button-border-color: var(--darkblue1);
    --button-active-bg: #f4c796;
    --button-active-opacity: 1;
    --button-active-font-weight: bold;
}

.audio-player {
    display: flex;
    width: 100%;
    align-items: center;
    overflow: hidden;
    padding: 1em 1em 0 0;
}

.audio-player .btnPlayAudio {
    font-size: 2rem;
    min-width: 70px;
    max-width: 70px;
}

.audio-player .sldAudioSeeker {
    --slider-height: 20px;
    flex-grow: 1;
}

.audio-player .timeDisplay {
    font-family: monospace;
    font-size: 1.1rem;
    padding-left: 1em;
}

.audio-controls .btnAudioVolume {
    min-width: 50px;
    --button-justify-content: flex-start;
}

.audio-player .sldAudioVolume {
    --slider-height: 15px;
    width: 200px;
}

.audio-controls-wrapper.show,
.audio-tracks-wrapper.show {
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.audio-controls-wrapper .btnToggleAudioControls {
    position: absolute;
    right: 0;
    bottom: 100%;
    padding: .5em;
    font-size: 1.2rem;
    border-radius: .4em .4em 0 0;
    overflow: hidden;
    --button-bg: var(--lightblue1);
    z-index: 10;
    transition: background ease-out 0.3s;
}

.audio-controls-wrapper.show .btnToggleAudioControls {
    border-left: 1px solid #c8c8c8;
    border-top: 1px solid #c8c8c8;
    box-shadow: -1px -5px 5px rgba(0, 0, 0, 0.2);
    background: var(--lightblue2);
}

.audio-tracks-wrapper.show .btnToggleAudioControls {
    background: var(--lightblue3);
}

.audio-tracks-wrapper .track-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .3em 1em;
    --slider-height: 15px;
}

.audio-tracks-wrapper .track-wrapper .track-name {
    opacity: .6;
    font-size: 1.1rem;
}

.controls-wrapper {
    /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);*/
}

.controls-wrapper .bottom-controls {
    display: flex;
    width: 100%;
    padding: 0 1.4em .4em 1.4em;
    justify-content: space-between;
    align-content: center;
    --button-width: max-content;
    --button-padding: .5em;
    --button-font-size: 1.2rem;
}

.controls-wrapper .volume-wrapper {
    display: flex;
    align-items: center;
    width: 70%;
    --slider-height: 15px;
}

.controls-wrapper .volume-wrapper .padding-right {
    font-family: monospace;
    white-space: pre;
    padding-right: 1em;
    font-size: 1.1rem;
}

.controls-wrapper .btnToggleAudioTracks {
    --button-opacity: .5;
    --button-hover-opacity: .8;
    --button-active-opacity: 1;
    --button-border-width: 1px;
    --button-border-radius: .3em;
    --button-active-border-color: var(--darkblue1);
}

.music_list dd-button.pin img {
    display: none;
}

.music_list dd-button.pin.pinned img.pinned {
    display: block;
}

.music_list dd-button.pin.unpinned img.unpinned {
    display: block;
}

@media(min-width: 600px) {
    top_bar {
        width: var(--top_bar_max_width);
    }
    
    controls_container {
        width: var(--top_bar_max_width);
    }
    
    .music_list {
        width: 60%;
    }
    
    music_area {
        width: unset;
        padding-left: unset;
    }
    
    tone_selector_area {
        flex-direction: row;
        align-items: flex-start;
    }
    
    tone_selector_area > div {
        flex-direction: column;
    }
    
    music_area {
        font-size: 1.3rem;
    }
}

@page {
  size: A4;
  margin: 0mm 10mm 0mm 0mm;
}
/*
@media print {
    music_area {
        max-height: calc(100% - 1rem);
        margin: 0;
    }

    music_area versao vid {
        display: none;
    }

    music_body {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        flex-wrap: wrap;
        -border: 1px solid black;
    }

    music_body > * {
        margin-right: 24pt;
    }

    top_area {
        display: none;
    }

    html {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 210mm;
        height: 297mm;
        min-width: 210mm;
        min-height: 297mm;
        -border: 6px solid blue;
    }

    body {
        display: block;
        width: 195mm;
        max-width: 195mm;
        height: 282mm;
        max-height: 282mm;
        min-height: unset;
        -border: 6px solid red;
    }

    body > div {
        min-height: unset !important;
        height: 100%;
        max-height: 100%;
    }

    footer_container {
        display: none;
    }
}*/

html.print music_area {
    margin: 0;
    padding: 0;
    max-height: 282mm;
    min-width: 50%;
    width: 50%;
    max-width: 50%;
}

html.print music_area music {
    display: flex;
    flex-direction: column;
    max-height: 282mm;
    flex-wrap: wrap;
    -border: 1px solid black;
}

html.print music_area music > * {
    margin-right: 24pt;
}

html.print top_area {
    display: none;
}

html.print {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210mm;
    height: 297mm;
    min-width: 210mm;
    min-height: 297mm;
    -border: 6px solid blue;
}

html.print body {
    display: block;
    width: 195mm;
    max-width: 195mm;
    height: 282mm;
    max-height: 282mm;
    min-height: unset;
    -border: 6px solid red;
}

html.print .main-content-container {
    height: 100% !important;
    overflow-x: hidden !important;
}

html.print .main-content-wrapper {
    min-height: unset !important;
    height: 100%;
    max-height: 100%;
    align-items: flex-start;
    width: 170mm !important;
}

html.print footer_container {
    display: none;
}

html.print .audio-controls-container {
    display: none;
}