@font-face {
    font-family: 'Consolas';
    src: url('../_fontes/consola.ttf');
}

@font-face {
    font-family: Arial;
    src: url('../_fontes/arial.ttf');
}

@font-face {
    font-family: Roboto;
    src: url('../_fontes/Roboto-Regular.ttf');
}

/* @font-face {
    font-family: 'Liberation Mono';
    src: url('../../_fontes/LiberationMono-Regular.ttf');
} */

body * {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

html {
    scrollbar-width: none;
    /* ParaFirefox */
    -ms-overflow-style: none;
    /* Para Internet Explorer e Edge */
}

html::-webkit-scrollbar {
    width: 0px;
    /* Para Chrome, Safari, e Opera */
}

.container {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    /* align-content: center; */

    /*** Define Tamanho Para Centralizar Sem Quebrar ***/
    height: 100%;
    min-height: 100vh;

    /* width: 96.97vw; */
    width: 100vw;

    /* padding: 1vw; */

    /* background-color: rgb(200, 140, 140); */
}

.cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 1vw 0;
    /* background-color: aqua; */
}

.cabecalho h1,
.cabecalho h2,
.cabecalho h3 {
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

.cabecalho h1 {
    font-size: 2.6vw;
    color: #DA1C1C;
}

.cabecalho h2 {
    font-family: Arial, sans-serif;
    font-size: 3.5vw;
    /* font-weight: 900; */
    color: rgb(61, 61, 255);
    font-weight: 600;
    /* letter-spacing: 0.15vw; */

    /* -webkit-text-stroke-width: 0.03vw; */
    /* -webkit-text-stroke-color: rgb(255, 255, 255); */
    /* text-shadow: 0.3vw 0.3vw 0.5vw #484848; */

    /* text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; */

    -webkit-text-stroke-color: rgb(255, 255, 255);
    -webkit-text-stroke-width: 0.03vw;
    text-shadow:
        0.3vw 0.3vw 0.5vw white,
        0.3vw 0.3vw 0.5vw #080808;


}

.cabecalho h3 {
    font-size: 3vw;
    color: #009900;
}

.cabecalho .lnk-frase {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5vw;
    color: blue;
    font-weight: 600;
    line-height: 1.25;
    padding-left: 1vw;
    padding-right: 1.8vw;
}

.link-frase i {
    color: black;
    font-size: 2.5vw;
}

.cabecalho .link-frase {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.cabecalho .lnk-frase {
    text-decoration: none;
}

.cores-tab p {
    font-size: 3.5vw;
    font-weight: 600;
    letter-spacing: 0.8vw;
}

/**** Corpo do Solo ****************************************/

.corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 98%;

    /* padding: 1vw; */
    background-color: green;
}

.bloco-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    width: 100vw;
    /* padding: 1.5vw 1.5vw 1.5vw 1.5vw; */
    padding: 1.6vw 0 1.6vw 1.6vw;

    /* border para completar altura com bloco-tabs */
    border-top: 0.075vw solid #aaa;
    border-bottom: 0.075vw solid #aaa;
}

.bloco-tabs:nth-child(even) {
    background-color: #d4eefe;
}

.bloco-tabs:nth-child(odd) {
    background-color: #D5F5E3;
}

.item-tabs {
    display: flex;
    flex-direction: column;
    /* background-color: #0099004b; */
}

.mao-esq {
    display: flex;
    justify-items: center;
    align-items: flex-end;

    padding-left: 2.75vw;
    margin-top: -0.3vw;
    /* background-color: aliceblue; */
}

.tab-nr {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* font-size: 1vw; */
    font-weight: 600;
    line-height: 0.84;
    color: black;

    width: 3vw;

    text-shadow: 0.1vw 0.1vw 0.4vw #414141;

    /* background-color: #aaa; */
}

.tab-nr p {
    color: rgb(31, 35, 255);
    font-family: 'Consolas';
}

.tab-dedos pre {
    display: flex;

    font-family: 'Consolas';
    line-height: 0.87;
    line-height: 0.85;
}

.tab-dedos .cor-dedos {
    display: none;
}

.td-acorde {
    color: mediumblue;
    font-weight: 600;
}

.tab {
    font-family: 'Consolas';
    /* font-family: 'Courier New'; */

    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.5) 0.5vw 0.5vw 0.5vw;
    border: 0.25vw solid #000;

    padding-top: 0.4vw;
    padding-bottom: -0.35vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;

    width: fit-content;
}

.tab p {
    line-height: 0.95;
}

.tab p:nth-child(1) {
    margin-top: 0.30vw;
}

.tab p:nth-child(5) {
    margin-bottom: 0.30vw;
}

/*** Espaço Entre Colunas de Tabs ***/
.esp-tab {
    width: 2.4vw;
}

.cor {
    display: none;
}

.duracao {
    display: none;
}

/**** Audio ************************************************/

/* .player-ultimo {
    width: fit-content;
    padding: 1.4vw 0;
} */

.player {
    display: flex;
    justify-content: flex-start;

    margin-top: 0.4vw;
    border: 0.11vw solid black;
    border-radius: 50vw;
    width: 100%;
}

.player-ultimo {
    margin: 1vw 1vw;
    width: 97%;
}

.cores-tab p {
    font-size: 3.5vw;
    font-weight: 600;
    letter-spacing: 0.8vw;
}

.cor-a {
    text-decoration: underline;
}

/*** = - Espaco de Tempo Maior ***/
.tab mark {
    background-color: rgb(235, 235, 235);
}

.aviso,
.aviso-rodape {
    border: 0.2vw solid black;
    background-color: rgb(255, 255, 221);
    border-radius: 0.4vw;
    width: fit-content;
    padding: 0 1vw;
    margin-bottom: 1.2vw;
    text-align: center;
}

.aviso-rodape {
    margin-top: 1vw;
    margin-bottom: 0vw;
}

.aviso p,
.aviso-rodape p {
    font-size: 2vw;
    font-weight: 500;
    letter-spacing: 0.06vw;
}


/*** Tab ***/
.tab {
    /*** Fonte - Ajuste à Largura Tela *******/
    font-size: var(--tab_font-size);
    letter-spacing: var(--tab_letter-spacing);
}

.mao-esq {
    padding-left: var(--mao-esq_padding-left);
}

.tab-nr p {
    font-size: var(--tab-dedos_pre_font-size);
}

.tab-dedos {
    margin-left: var(--tab-dedos_margin-left);
}

.tab-dedos pre {
    font-size: var(--tab-dedos_pre_font-size);
    letter-spacing: var(--tab-dedos_pre_letter-spacing);
}

/************************/
/**** Cores das Tabs ****/
/************************/

.tabCor-a {
    color: #1E90FF;
}

.tabCor-b {
    color: blue;
}

.tabCor-c {
    color: DarkSlateGray;
}

.tabCor-d {
    color: #FF4500;
}

.tabCor-e {
    color: #8B3A62;
}

.tabCor-f {
    color: #8B7D7B;
    ;
}

.tabCor-p {
    color: #000000;
}

.tabCor-q {
    color: #00008b;
}

.tabCor-r {
    color: #017070;
}

.tabCor-s {
    color: green;
}

.tabCor-t {
    color: #7b68ee;
}

.tabCor-u {
    color: blueviolet;
}

.tabCor-v {
    color: darkorange;
}

.tabCor-x {
    color: #cd0202;
}

.tabCor-y {
    color: steelblue;
}

.tabCor-z {
    color: sienna;
}

/* Cor da Cifra da Corda */
.tabCor-0 {
    font-weight: 700;
}