* {
    margin: 0;
    padding: 0;
    max-width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    background: #f2f2f2;
    overflow-x: hidden;
}

/*h1, h2, h3, h4, h5, p, strong, span{}*/

/*      
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button   
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button

FONTE: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F
*/

#imgDesktop {
    display: none;
}

#imgMobile {
    display: block;
}

.pagina1 {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100vw;
}

.areaImg {
    position: relative;
    width: 100%;
}

.capa {
    display: flex;
    justify-content: center;
}

.imgLogo {
    position: absolute;
    left: 4%;
    top: 1%;
    width: 17%;
    z-index: 100;
}

.btMenu {
    display: none;
    position: absolute;
    right: 8%;
    top: 3%;
    z-index: 100;
    width: 10%;
}

.infoLivro {
    position: absolute;
    z-index: 100;
    top: 20%;
}

#nomeLivro {
    font-size: 2.6em;
    text-align: center;
    font-weight: 800;
    margin: 0 auto;
}

#nroCapitulo {
    font-size: 5em;
    text-align: center;
    font-weight: 800;
    margin: -5px auto;
}


.btsMuda {
    position: absolute;
    width: 10%;
    z-index: 120;
}

#btRetrocede {
    position: absolute;
    left: 5%;
    top: 35%;
}

#btAvanca {
    position: absolute;
    right: 5%;
    top: 35%;
}

.imgPlayer {
    width: 100vw;
    height: 100vh;
}

#player {
    display: none;
    margin-top: 10px;
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 90%;
}

.btPlayPause {
    position: absolute;
    bottom: 23%;
    display: flex;
    justify-content: center;
}

#btPlay {
    width: 35%;
}

#btPause {
    width: 35%;
    display: none;
}

.nomeVersao {
    position: absolute;
    z-index: 200;
    bottom: 7%;
    background: darkred;
    width: 70%;
    padding: 5px 15px;
    text-align: center;
    color: aliceblue;
    font-size: 1.1em;
    text-shadow: 1px 1px 5px black;
}


.menu {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    padding: 12px;
    background: khaki;
}

.menu img {
    width: 15%;
}

.versoes {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-top: 15px;
}

.versoes>input {
    height: 15px;
    width: 20px;
    margin-top: 4px;
    margin-left: 5px;
}

.versoes>span {
    font-size: 1.2em;
    font-weight: bold;
}

.nvi,
.rv {
    padding-left: 20px;
}

#btEscolher {
    display: none;
    margin-top: 30px;
    padding: 10px 0;
    width: 70%;
    font-weight: bold;
    background-color: rgb(255, 207, 149);
}

.h3 {
    background-color: darkred;
    color: white;
    text-shadow: 2px 1px 3px black;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    padding: 5px 0px;
}

.h4Escolher {
    margin-top: 10px;
}

.h4Capitulo {
    margin-bottom: 15px;
}

/* .h4Livro{} */

/* .cabecalho{} */

.cabecalho,
.cabecalhoCapitulos {
    padding: 7px;
    font-size: 1.3em;
}

.grades {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 10px 0;
}

.smallEscala {
    font-size: .8em;
    margin-top: 5px;
}

.smallEmVermelho {
    font-size: .8em;
    margin-top: -5px;
}

.gradeLivros,
.gradeCapitulos {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 92%;
    border: 2px solid black;
    background-color: #eeffcc;
}


.gradeLivros {
    margin-bottom: 20px;
}

.gradeCapitulos {
    background-color: antiquewhite;
    margin-top: 10px;
}

.quadriculaLivro,
.quadriculaCapitulo {
    /* largura de cada quadricula = (100% / 7) - 2px (bordas) */
    width: calc((100% / 7) - 2px);
    /* padding abaixo é para dar altura ao botão: */
    padding: 15px 0;
    text-align: center;
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    border: 1px dotted black;
}

.escala {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.escala>div {
    width: 15px;
    height: 15px;
    border: .3px solid black;
    background: #60172a;
}

.escala p {
    padding: 0 10px;
    font-family: 'Lato', sans-serif;
    font-size: .8em;
}

.pagina3 {
    margin-top: 7px;
}

.pagina3>div>h3 {
    margin-bottom: 10px;
}

details {
    width: 100%;
    background: burlywood;
    margin-top: 10px;
    padding: 7px 0;
}

details div {
    text-align: center;
    margin-top: 5px;
}

details p,
h2,
h3,
h4 {
    font-family: 'Lato', sans-serif;
}

details h4 {
    font-weight: normal;
}

summary {
    cursor: pointer;
    padding-left: 10px;
    color: darkred;
}

summary>* {
    display: inline;
}

summary>h4 {
    font-weight: bold;
    font-size: 1.2em;
}

.divPausa,
.divDesempenho,
.divCompartilha,
.divMais {
    display: flex;
    flex-flow: column;
    align-items: center;
    /*height: 84vh;*/
    height: 100vh;
}

.h4Pausa {
    margin-bottom: 20px;
}

.divPausa p {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}

.divPausa>input {
    margin: 20px auto;
    width: 50px;
    padding: 10px;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    color: rgb(92, 92, 92);
}

.divPausa>button {
    background-color: khaki;
    margin: 20px;
    width: 60%;
    padding: 7px 12px;
    font-family: 'Lato', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

.googleAgenda {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.googleTexto {
    padding: 10px;
}

#googleAgenda {
    width: 20%;
    margin-top: 10px;
}

#horarioGoogle {
    width: 30%;
    padding: 10px;
    font-size: 1.3em;
}

.divLeitura {
    display: flex;
    flex-flow: column;
    align-items: center;
}

#avisoFavoritos, #avisoErro{
    font-size: .7em;
    text-align: center;
    font-family: 'Lato', sans-serif;
    padding: 5px 20px;
}

table,
td,
tr {
    width: 96%;
    margin: 10px auto;
    border: .1px solid lightgrey;
    /* Apague abaixo e veja a diferença */
    border-collapse: collapse;
    font-size: 1.1em;
}

/* Primeira coluna, ou primeira célula de cada linha (coluna do nro dos versículos) */
td:nth-child(1) {
    width: 12%;
    text-align: center;
}

/* Segunda coluna, ou segunda célula de cada linha (coluna do texto dos versículos) */
td:nth-child(2) {
    width: 76%;
    padding: 5px 10px;
}

/* Terceira coluna, ou terceira célula de cada linha (coluna do coração - favorito) */
td:nth-child(3) {
    width: 12%;
    text-align: center;
}

table tr:nth-child(even) {
    background-color: #f2f2f2;
}

table tr:hover {
    background-color: #ddd;
}

.iconeCoracao{
    width: 20px;
    height: 20px;
}

#msgMotivacao {
    padding: 0 40px;
}

.msgCompartilhe {
    text-align: center;
    font-size: 1.2em;
    padding: 10px 10%;
}

.redes {
    display: flex;
    flex-flow: column;
    padding: 15px;
}

.redes>div {
    display: flex;
    flex-flow: row;
}

.redes>div>p {
    padding: 6% 20px;
    font-weight: bold;
    /*background: #00b8e4;*/
}

.icons {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    cursor: pointer;
}

.divDesempenho {}

.areaGraficoPizza {}

.areaGraficoBarras {
    height: 360px;
}


#pizza1 {
    width: 90%;
    margin: 0 auto;
    /*margin-top: -25px;*/
}

#escolhaPeriodo {
    margin-top: 10px;
}

.cabecalhoPeriodo {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    /* margin-top: -5px; */
    /* margin-bottom: -10px; */
}

.cabecalhoPeriodo div {
    background: khaki;
    width: 33%;
    padding: 5px 0;
    font-weight: bold;
    border-style: groove;
}

#ult10Ouvido {
    /*background: chocolate;*/
}

.maisGraficos {
    margin-bottom: 100px;
}

#ajuste1 {
    color: brown;
}

#ajuste2 {
    text-align: center;
    padding-top: 10px;
    color: brown;
}

#escolheTipoGrafico {
    color: darkred;
    text-align: center;
    margin-top: 17px;
}

.btsMudaBarra {
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    margin: 15px auto;
}

.iconTipoGrafico {
    width: 15%;
    height: 15%;
}

.btsMais{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.btMais {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 250px;
    height: 100px;
    padding: 10px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    background: darkred;
    margin-top: 10px;
}

.btMais>span {
    padding-top: 12px;
    color: white;
}

.iconBtMais {
    width: 35px;
    height: 35px;
}

.fechaJanela {
    margin-top: 30px;
    padding-bottom: 30px;
    width: 7%;
}

/* reporte de erro na tradução do texto */
.reportarErros{
    padding: 30px;
}

.btsErros{
    display: flex;
    flex-flow: column;
    align-items: center;
}

.btsErros button{
    width: 300px;
    height: 40px;
    margin-bottom: 15px;
    font-weight: bold;
}

#btErrosWt{
    background: rgb(110, 255, 110);
}

#btErrosEm{
    background: rgb(255, 255, 0);
}


.montserrat {
    font-family: 'Montserrat', sans-serif;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.nunito {
    font-family: 'Nunito Sans', sans-serif;
}

.amarelo-sombra {
    color: gold;
    text-shadow: 1px 1px 5px black;
}

.violeta {
    color: #60172a;
}

.vermelho {
    color: darkred;
}

.destaque {
    color: black;
    font-weight: bold;
    background: yellow;
    padding: 1px 10px;
}

.negrito {
    font-weight: bold;
}

.negrito900 {
    font-weight: 900;
}

.normal {
    font-weight: normal;
}

.peq {
    font-size: .65em;
}

.centraliza {
    text-align: center;
}

.oculta {
    display: none;
}