* {
  font-family: "Arimo", "Arial", Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arimo", "Arial", Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  padding: 0;
  margin: 0;
}

/**** Ícone do Menu ******************************************/
.cabecalho-cifra {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  /* width: 63.5vw; */

  width: 100%;
  height: fit-content;

  /* background-color: aquamarine; */
}

.cabecalho-cifra h4 {
  font-family: "Roboto", "Arimo", "Arial", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 2.5vw;

  color: #009900;
  line-height: 0.7;
  padding-bottom: 0.6vw;

  width: 100%;
  text-align: center;

  /* background-color: bisque; */
}

.cabecalho-cifra p {
  line-height: 1;
  margin: 0;
  padding: 0.2vw 0 0 0;
  text-align: center;
  width: 7vw;

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

.cabecalho-cifra i {
  font-size: 4vw;
}

.cabecalho-cifra #bt-modal {
  font-size: 4vw;
  padding: 0;
  margin-right: -0.2vw;

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

.cabecalho-cifra #bt-modal:hover {
  color: red;
}

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

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  padding-top: 2.4vw;
  padding-bottom: 1vw;
  background-color: white;
}

/***************************************/

@media screen and (max-width: 500px) {
  img {
    /*width: 880px;*/
    max-width: 98vw;
  }
}

@media screen and (min-width: 500px) and (max-width: 780px) {
  img {
    min-width: 30%;
    max-width: 44vw;
  }
}

/*@media screen and (min-width: 720px) and (max-width: 895px) {*/
@media screen and (min-width: 780px) and (max-width: 895px) {
  img {
    min-width: 230px;
    max-width: 41vw;
  }
}

@media screen and (min-width: 895px) {
  img {
    min-width: 242px;
    max-width: 30vw;
  }
}

/***************************************/

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

  /*max-width: 100vw;*/

  /*background-color: #ee0; /*** Amarelo ***/
}

.acordes-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.acorde-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-around;
  align-content: flex-end;

  margin: 0;

  padding: 0.8vw 1vw 1vw 1vw;

  background-color: #daf7a6;
}

.acorde {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: flex-end;

  margin-top: 0;
  padding: 0;
}

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

  /*background-color: #ddd;*/

  padding: 0;
  margin: 0;
}

.acorde p {
  font-family: "Consolas", Helvetica, sans-serif;
  font-weight: bolder;
  font-size: 2.2vw;
  text-align: center;
  color: #00f;
  margin: 0.4vw 0 0 0;
}

figure {
  margin: 0.8vw 1vw 1vw 1vw;
  gap: 1.8vw;
  padding: 0;

  height: auto;
  width: 100%;
  max-width: 98%;

  width: fit-content;

  /* box-shadow: rgba(0, 0, 0, 0.35) 0.8vw 0.8vw 0.8vw; */
  box-shadow: 0 0 0.6vw 0 #00000084;
}

img {
  /* border-radius: 0 0 0.15vw 0.15vw; */
  vertical-align: middle;

  width: 100%;
  height: 100%;

  /* -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out; */
}

.acordes-head h1 {
  font-family: "Roboto", "Arimo", "Arial", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 2.5vw;
  color: #da1c1c;
  line-height: 1;
}

.acordes-head h2 {
  font-family: "Roboto", "Arimo", "Arial", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 2.5vw;

  color: #009900;
  line-height: 0.7;
  margin-top: 0.4vw;
  margin-bottom: 1.6vw;
}

.acordes-head h3 {
  line-height: 0.7;
  font-size: 3vw;
  font-weight: 900;
  /* margin-top: 1vw;
  margin-bottom: 1vw; */

  line-height: 1.5;

  font-family: "Roboto", "Arimo", "Arial", Helvetica, sans-serif;
  color: blue;

  -webkit-text-stroke-width: 0.05vw;
  -webkit-text-stroke-color: rgb(255, 255, 255);
  text-shadow: 0.2vw 0.2vw 0.4vw #949494;
}

.pai-troca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0 0.2vw 1vw 0.2vw;

  margin: 2vw 1vw 1vw 1vw;

  /* border: 0.1vw solid #00000065; */

  border-radius: 0.6vw;
  background-color: rgb(224, 239, 255);

  box-shadow: 0 0 0.6vw 0 #24242465;
}

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

  width: 100%;
}

.troca h2 {
  line-height: 1;
  text-align: center;
}

.sequencia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  padding: 0 2vw 0 2vw;
  margin: 0 1.1vw 0.4vw 1.1vw;
  width: fit-content;

  border: 0.081vw solid #cbcbcb;
  border-radius: 0.3vw;
  background-color: #fff;
}

.sequencia p {
  font-size: 3vw;
  font-weight: 800;
  color: blue;

  margin: 0;
  padding-top: 1vw;
  padding-bottom: 1vw;

  line-height: 0.8;
  /* Parágrafo */
}

.relativa {
  color: #cc0000;
}

.sequencia i {
  font-size: 2vw;
  margin-left: 1.2vw;
  margin-right: 1.2vw;
}

.obs {
  padding: 0;
  margin: 0;
  line-height: 1;
  /* Entrelinha */
  margin-top: 1vw;
  font-size: 1.8vw;
  font-weight: 500;
  text-align: justify;
  color: mediumblue;
}

span {
  font-weight: bold;
  color: blue;
}

.botoes {
  display: flex;

  gap: 1vw;
  padding: 1vw 1vw 0 1vw;
}

.botoes button {
  font-size: 2vw;
  font-weight: 600;
  padding: 0.1vw 1vw 0.1vw 0.8vw;
  background-color: #a3a3a3;
  color: #fff;
  border: none;
  border-radius: 0.3vw;
  letter-spacing: 0.06vw;
  transition: 0.4s;
}

.botoes .bt-treinar {
  /* background-color: #1a7ec1; */
  background-color: #3498db;
}

.botoes .bt-pular {
  /* background-color: #27ae60; */
  background-color: #2ecc71;
}

.botoes .bt-cancelar {
  /* background-color: #566573; */
  background-color: #85929e;
}

/**** Botoes *******************************/
.botoes .bt {
  display: flex;
  align-content: center;
  align-items: center;
  width: fit-content;
}

.botoes .bt i {
  font-size: 2.5vw;
  line-height: 1.2;
  color: black;
  margin: 0;
  font-weight: 900;
}

.botoes .bt p {
  margin: 0;
}

.botoes .bt .material-icons {
  margin-right: 0.4vw;
}

.sequencia i {
  font-weight: 900;
}

/* ocultar botoes */
.botoes .bt-restart {
  display: none;
}

.botoes .bt-help {
  display: none;
}

.acordes-estudados {
  display: none;
  margin: 0.4vw 2vw 0 2vw;
  font-size: 2vw;
}