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-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
}

main_button_container.active menu {
    display: block;
}

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: 1px solid #606375;
}

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;
}

.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;
    color: #ddd;
}

controls_container button {
    cursor: pointer;
}

share_music_button_container, controls_container controls_left {
    width: 3rem;
}

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.2rem;
    color: #ddd;
    font-weight: bold;
}

controls button i {
    height: 1.3rem;
}

controls button {
    cursor: pointer;
    width: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
}

controls_container button:hover {
    color: white;
}
    
controls button.select_tone {
    width: 3.2rem;
}

controls 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: 1rem;
    font-weight: bold;
    background: #9eb1d7;
    color: #25314d;
    
    border-radius: 0 0 16px 16px;
    border: 3px solid #2c3645;
    border-top: none;
    padding: 3px;
}

tone_selector_area > div {
    display: flex;
}

tone_selector_area button {
    display: flex;
    justify-content: center;
    width: 2.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%;
    padding-left: 0.9rem;
    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 {
    display: block;
    font-weight: bold;
    font-size: 1.3em;
    color: #242c38;
}

music versao descricao {
    display: inline-block;
    color: #5c6a84;
    font-size: 0.8em;
}

music versao vid {
    display: inline-block;
    color: #99a8c5;
    margin-left: .5rem;
    cursor: pointer;
    font-size: 1.5rem;
}

music versao vid: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;
}

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;
}

@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 {
        font-size: 18pt !important;
        margin: 0;
    }
    
    html.print music_body cifra {
        display: flex;
        flex-direction: column;
        max-height: 272mm;
        flex-wrap: wrap;
        -border: 1px solid black;
    }
    
    html.print music_body cifra > * {
        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 body > div {
        min-height: unset !important;
        height: 100%;
        max-height: 100%;
        align-items: flex-start;
    }
    
    html.print footer_container {
        display: none;
    }