/* acordes no final do rodape nao sao mostrados em tela <768px */
.gc-chords {
  display: none;
}

/* nota no meio da letra da musica */
.gc-note {
  color: #75529e !important;
  cursor: pointer;
  font-weight: bold !important;
}

/**
 * Forca o modal a nao ficar visivel na tela.
 * Foi feito desse jeito pra poder ficar com o efeito de transicao,
 * pois quando se usa display:none, o efeito nao executa
 */
#gc-varying-modal {
  left: -99999em;
  position: absolute;
}

@media(min-width:768px) {

  /* Grid das notas no rodape */
  .gc-chords {
    display: flex;
    flex-wrap: wrap;
    padding: 0 !important;
    width: 100%;
  }

  /* Coluna de uma nota no rodape */
  .gc-chord {
    padding-bottom: 20px;
    padding-right: 0;
    padding-top: 15px;
    width: 20%;
  }

  /* Lista de imagens de uma nota. Somente a nota selecionada eh mostrada */
  .gc-chord__images-list {
    list-style: none;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }

  .gc-chord__images-item {
    display: none;
    list-style: none;
    margin: 0 15px 0 0 !important;
    padding: 0 !important;
  }

  .gc-chord__images-item--active {
    display: block !important;
  }

  .gc-chord__image {
    display: block;
    width: 100%;
  }

  /* botao de variar acorde */
  .gc-chord__varying-btn {
    background: #fff;
    border-radius: 3px;
    border: solid 1px #E0E0E0;
    box-sizing: border-box;
    color: #424242;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    height: 32px;
    line-height: 30px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    text-align: center;
    visibility: hidden;
    width: 80%;
  }

  .gc-chord:hover {
    border: solid 1px #E0E0E0;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18);

  }

  .gc-chord:hover .gc-chord__varying-btn {
    display: block;
    visibility: visible;
  }

  /* modal de variacao da nota */
  #gc-modal-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .gc-modal-images {
    padding-bottom: 20px;
    padding-top: 10px;
  }

  .gc-modal-images:hover {
    border: solid 1px #E0E0E0;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18);
  }

  .gc-modal-image {
    cursor: pointer;
    margin-right: 15px;
  }
}

@media(min-width:992px) {
  .gc-chord {
    padding-bottom: 20px;
    width: 16.666%;
  }
}

@media(min-width:1024px) {
  .gc-chord {
    width: 12.5%;
  }
}

/* alteracao do tema padrao do Tippy */
.tippy-tooltip.light-theme {
  background: #fff;
  border: solid 1px #E0E0E0;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18);
  padding-bottom: 25px;
  padding-right: 15px;
  padding-top: 15px;
}


.tippy-popper[x-placement^='top'] .tippy-tooltip.light-theme .tippy-arrow {
  border-top-color: #fff;

}

.tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-theme .tippy-arrow {
  border-bottom-color: #fff;
}

.tippy-popper[x-placement^='left'] .tippy-tooltip.light-theme .tippy-arrow {
  border-left-color: #fff;
}

.tippy-popper[x-placement^='right'] .tippy-tooltip.light-theme .tippy-arrow {
  border-right-color: #fff;
}

/**
 * altera o tamanho padrao do modal,
 * senao ele fica com tamanho fixo independente do conteudo
 */
.tingle-modal-box {
  width: auto !important;
}
/*
     FILE ARCHIVED ON 17:34:17 Sep 04, 2021 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 09:06:59 Sep 13, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.712
  exclusion.robots: 0.105
  exclusion.robots.policy: 0.091
  esindex: 0.009
  cdx.remote: 37.777
  LoadShardBlock: 125.563 (3)
  PetaboxLoader3.datanode: 124.383 (5)
  PetaboxLoader3.resolve: 90.791 (2)
  load_resource: 120.824
  loaddict: 52.762
*/