:root {
  --max-width: 100%;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --primary-glow: conic-gradient(
    from 180deg at 50% 50%,
    #16abff33 0deg,
    #0885ff33 55deg,
    #54d6ff33 120deg,
    #0071ff33 160deg,
    transparent 360deg
  );
  --secondary-glow: radial-gradient(
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(
    #00000080,
    #00000040,
    #00000030,
    #00000020,
    #00000010,
    #00000010,
    #00000080
  );

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 255, 255, 255;
  --card-border-rgb: 131, 134, 135;
}

._parpadea {  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(
      to bottom right,
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0),
      rgba(1, 65, 255, 0.3)
    );

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(
      #ffffff80,
      #ffffff40,
      #ffffff30,
      #ffffff20,
      #ffffff10,
      #ffffff10,
      #ffffff80
    );

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
    
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: none;
}



@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

/* ESTILOS CREADOS PARA LA APP*/

._mostrar{
  display: block;
}

._ocultar{
  display: none;
}

._iconoclass_diagrama{
  background-image: url('/recursos/icons/icono_diagrama.png');
  background-size: 100% 100%;
  color: rgba(255,255,255,0);
}
._iconoclass_compas{
  background-image: url('/recursos/icons/icono_compas.png');
  background-size: 100% 100%;
  color: rgba(255,255,255,0);
}
._iconoclass_cancion{
  background-image: url('/recursos/icons/icono_cancion.png');
  background-size: 100% 100%;
  color: rgba(255,255,255,0);
}
._iconoclass_partitura{
  background-image: url('/recursos/icons/icono_partitura.png');
  background-size: 100% 100%;
  color: rgba(255,255,255,0);
}
._vie_general {
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  height: auto; 
  max-height: 100%; 
  margin: auto; 
  overflow: auto; 
  z-index: 1; 
  top: 0; 
  left: 0;
}
._vie_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  min-height: 10vh;
  background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.7));
}
._vie_main_cab {
  display: flex;
  flex-direction: row;
  width: 100%;
}
._vie_main_sub {
  float: left; 
  width: 48%; 
  margin: 10px; 
  padding: 10px;
}
._vie_main_sub_ip {
  float: left; 
  width: 96%; 
  margin: 10px; 
  padding: 10px;
}
._vie_main_grid {
  float: left; 
  width: 48%; 
  margin: 10px; 
  padding: 10px;
}
._vie_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50%, auto));
  width: var(--max-width);
  max-width: 100%;
  margin: 10px 20px;
  color: rgba(255,255,255,1);
}
._vie_grid_a {
  display: grid;
  grid-template-columns: repeat(4, minmax(25%, auto));
  width: var(--max-width);
  max-width: 100%;
  margin: 10px 20px;
  color: rgba(255,255,255,1);
}
._vie_grid_apre {
  display: grid;
  grid-template-columns: repeat(4, minmax(25%, auto));
  width: var(--max-width);
  max-width: 100%;
  margin: 10px 20px;
  color: rgba(255,255,255,1);
}
._vie_gricuer_cal{
  float: left;
  width: 800px;
}
._vie_card {
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius);
  background: rgba(var(--card-rgb), 0);
  border: 1px solid rgba(var(--card-border-rgb), 0);
  transition: background 200ms, border 200ms;
  cursor: pointer;
  margin: 10px;
}
._vie_card span {
  display: inline-block;
  transition: transform 200ms;
}
._vie_card p {
  margin: 0;
  opacity: 0.6;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 40ch;
  padding: 0;
}
._vie_cabecera {
  float: left; 
  width: 100%; 
  border-radius: 5px 5px 0px 0px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color: #666666; 
  margin: 10px 0px 0px 0px;
  border-color: white; 
  border-width: 1px 1px 0px 1px; 
  border-style: solid;
}
._vie_cabecera_sub {
  float: left;
  padding: 5px 10px;
}
._vie_seccion {
  float: left; 
  width: 100%; 
  border-radius: 0px 0px 0px 0px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color: rgba(255,255,255,0); 
  margin: 0px; 
  border-color: white; 
  border-width: 0px 1px 0px 1px; 
  border-style: solid;
}
._vie_pievie {
  float: left; 
  width: 100%; 
  border-radius: 0px 0px 5px 5px; 
  height: auto; 
  padding: 10px; 
  color: white; 
  background-color:#0d6efd; 
  margin-bottom: 10px; 
  border-width: 0px 1px 1px 1px; 
  border-style: solid;
}
._vie_color1 {
  color: rgba(113,210,253,1);
}
._vie_color11 {
  color: rgb(45, 86, 104);
}
._vie_bgcolor1 {
  background-color: rgba(255,255,255,0.1);
}
._vie_bgcolor11 {
  background-color: rgba(113,210,253,1);
}
._vie_bodyemergente {
  position: fixed; 
  overflow: auto; 
  display: flex; 
  justify-content: center; 
  top: 0px; 
  width: 100%; 
  height: auto; 
  max-height: 100%; 
  background-color: rgba(255,255,255,0.8);
  z-index: 2;
}
._vie_acordesobre {
  position: relative; 
  overflow: auto; 
  display: flex; 
  justify-content: center; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.1);
  z-index: 3;
}
._cce_menuacordes {
  float: left;
  width: 25%;
}
._cce_menuacordes_ {
  float: left;
  width: 100%;
}
._cce_sectrabajo {
  float: left;
  width: 73%;
  margin: 0px 1%;
  border-color: silver; 
  border-width: 1px; 
  border-style: solid;
  border-radius: 5px;
}

/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  ._vie_card:hover {
    background: rgba(var(--card-rgb), 0.1);
    border: 1px solid rgba(var(--card-border-rgb), 0.15);
  }
  ._vie_card:hover span {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion) {
  ._vie_card:hover span {
    transform: none;
  }
}

/* Mobile */
@media (max-width: 500px) {
  ._vie_general {
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: auto; 
    max-height: 100%; 
    margin: auto; 
    overflow: auto; 
    z-index: 1; 
    top: 0; 
    left: 0;
  }
  ._vie_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    min-height: 10vh;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.7));
  }
  ._vie_main_cab {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  ._vie_main_sub {
    float: left; 
    width: 98%; 
    margin: 10px; 
    padding: 10px;
  }
  ._vie_main_sub_ip {
    float: left; 
    width: 98%; 
    margin: 10px; 
    padding: 10px;
  }
  ._vie_main_grid {
    float: left; 
    width: 98%; 
    margin: 0px 10px; 
    padding: 0px 10px;
  }
  ._vie_grid {
    grid-template-columns: 1fr;
    margin: 10px 0px;
    max-width: 96%;
    text-align: center;
    color: rgba(255,255,255,1);
  }
  ._vie_grid_a, ._vie_grid_apre {
    grid-template-columns: 1fr;
    margin: 10px 0px;
    max-width: 96%;
    text-align: center;
    color: rgba(255,255,255,1);
  }
  ._vie_gricuer_cal{
    float: left;
    width: 100%;
  }
  ._vie_card {
    padding: 1rem 0.5rem;
    cursor: pointer;
    margin: 10px;
  }
  ._vie_card span {
    display: inline-block;
    transition: transform 200ms;
  }
  ._vie_card p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 0;
  }
  ._vie_cabecera {
    float: left; 
    width: 100%; 
    border-radius: 5px 5px 0px 0px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color: #666666; 
    margin: 10px 0px 0px 0px;
    border-color: white; 
    border-width: 1px 1px 0px 1px; 
    border-style: solid;
  }
  ._vie_cabecera_sub {
    float: left;
    padding: 5px 10px;
  }
  ._vie_seccion {
    float: left; 
    width: 100%; 
    border-radius: 0px 0px 0px 0px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color: rgba(255,255,255,0); 
    margin: 0px; 
    border-color: white; 
    border-width: 0px 1px 0px 1px; 
    border-style: solid;
  }
  ._vie_pievie {
    float: left; 
    width: 100%; 
    border-radius: 0px 0px 5px 5px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color:#0d6efd; 
    margin-bottom: 10px; 
    border-width: 0px 1px 1px 1px; 
    border-style: solid;
  }
  ._cce_menuacordes {
    float: left;
    width: 100%;
    margin-bottom: 15px;
  }
  ._cce_sectrabajo {
    float: left;
    width: 100%;
  }
}

/* Tablet and Smaller Desktop */
@media (min-width: 501px) and (max-width: 1000px) {
  ._vie_general {
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: auto; 
    max-height: 100%; 
    margin: auto; 
    overflow: auto; 
    z-index: 1; 
    top: 0; 
    left: 0;
  }
  ._vie_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    min-height: 10vh;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.7));
  }
  ._vie_main_cab {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  ._vie_main_sub {
    float: left; 
    width: 96%; 
    margin: 10px; 
    padding: 10px;
  }
  ._vie_main_sub_ip {
    float: left; 
    width: 96%; 
    margin: 10px; 
    padding: 10px;
  }
  ._vie_main_grid {
    float: left; 
    width: 96%; 
    margin: 10px; 
    padding: 10px;
  }
  ._vie_grid {
    grid-template-columns: repeat(2, 50%);
    color: rgba(255,255,255,1);
  }
  ._vie_grid_a {
    grid-template-columns: repeat(4, 25%);
    color: rgba(255,255,255,1);
  }
  ._vie_grid_apre {
    grid-template-columns: repeat(1, 90%);
    color: rgba(255,255,255,1);
  }
  ._vie_gricuer_cal{
    float: left;
  }
  ._vie_card {
    padding: 1rem 0.5rem;
    cursor: pointer;
    margin: 10px;
  }
  ._vie_card span {
    display: inline-block;
    transition: transform 200ms;
  }
  ._vie_card p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 0;
  }
  ._vie_cabecera {
    float: left; 
    width: 100%; 
    border-radius: 5px 5px 0px 0px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color: #666666; 
    margin: 10px 0px 0px 0px;
    border-color: white; 
    border-width: 1px 1px 0px 1px; 
    border-style: solid;
  }
  ._vie_cabecera_sub {
    float: left;
    padding: 5px 10px;
  }
  ._vie_seccion {
    float: left; 
    width: 100%; 
    border-radius: 0px 0px 0px 0px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color: rgba(255,255,255,0); 
    margin: 0px; 
    border-color: white; 
    border-width: 0px 1px 0px 1px; 
    border-style: solid;
  }
  ._vie_pievie {
    float: left; 
    width: 100%; 
    border-radius: 0px 0px 5px 5px; 
    height: auto; 
    padding: 10px; 
    color: white; 
    background-color:#0d6efd; 
    margin-bottom: 10px; 
    border-width: 0px 1px 1px 1px; 
    border-style: solid;
  }
  ._cce_menuacordes {
    float: left;
    width: 100%;
    margin-bottom: 15px;
  }
  ._cce_sectrabajo {
    float: left;
    width: 100%;
  }
}


._bpu_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  min-height: 10vh;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.8) 50%, rgba(33,37,41,1));
}
._bpu_center {
  float: left;
  padding: 0.7rem 0;
  font-size: 1.7em;
}
._bpu_logbus {
  float: left;
  width: auto;
  padding: 5px;
}
._bpu_conpub{
  float: left;
  width: auto;
  margin: 5px 15px;
  height: 90px;
  color: #666666;
  border-color: rgba(13,110,253,0.5);
  border-width: 1px;
  border-style: solid;
  border-radius: 10PX;
  padding: 0px 20px;
}
._bpu_paddlog{
  float: left;
  width: auto;
  color: rgba(13,110,253,1);
  padding: 0px 15px;
}


/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  
}

@media (prefers-reduced-motion) {
  
}

/* Mobile */
@media (max-width: 701px) {
  ._bpu_main {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.8) 50%, rgba(33,37,41,1));
  }
  ._bpu_center {
    float: left;
    width: 100%;
    padding: 0.3rem 0;
    font-size: 1.3em;
  }
  ._bpu_logbus {
    float: left;
    width: 100%;
    height: auto;
  }
  ._bpu_conpub{
    float: left;
    width: 100%;
    height: 90px;
    color: #666666;
    border-color: rgba(13,110,253,0.5);
    border-width: 1px;
    border-style: solid;
    border-radius: 10PX;
    padding: 10px;
    margin: 10px 0px;
  }
  ._bpu_paddlog{
    float: left;
    width: 100%;
    color: rgba(13,110,253,1);
    height: auto;
    padding: 10px;
  }
}
/* header de instrumentos */
._ins_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(25%, auto));
  width: var(--max-width);
  max-width: 100%;
  margin: 0px;
}
._ins_card {
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius);
  background: rgba(var(--card-rgb), 0);
  border: 1px solid rgba(var(--card-border-rgb), 0);
  transition: background 200ms, border 200ms;
}
._ins_card_s {
  padding: 1rem 1.2rem;
  border-radius: var(--border-radius);
  background: rgba(var(--card-rgb), 0.1);
  border: 1px solid rgba(var(--card-border-rgb), 0);
  transition: background 200ms, border 200ms;
}
._ins_card span {
  display: inline-block;
  transition: transform 200ms;
}
._ins_card p {
  margin: 0;
  opacity: 0.6;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 40ch;
  padding: 0;
}
/* Estilos Css para Instrumentos (Marco General) */
._ins_main {
  margin: 2%;
  float: left;
}
._ins_grillah {
  float: left;
  width: 88%;
  height: 77.78%;
  background-color: aqua;
}
._ins_grillav {
  float: left;
  height: 600px;
  width: 77.78%;
  background-color: aqua;
}
._ins_rotuloh {
  float: left;
  width: 12%;
  height: 77.78%;
}
._ins_rotulov {
  float: left;
  height: 12%;
  width: 77.78%;
}
._ins_trasteh {
  float: left;
  width: 88%;
  height: 22.22%;
}
._ins_trastev {
  float: left;
  height: 600px;
  width: 22.22%;
}
._ins_residuh{
  float: left;
  width: 12%;
  height: 22.22%;
}
._ins_residuv{
  float: left;
  height: 12%;
  width: 22.22%;
}
/* Trastes dimensión */
._ins_hordimtraste{
  float: left;
  background-size: 100% 100%;
}
._ins_verdimtraste{
  float: left;
  background-size: 100% 100%;
}
/* campos de notas en trastes*/
._ins_notsin, ._ins_notentra_0, ._ins_notentra_1, ._ins_notentra_2, ._ins_notentra_3, ._ins_notentra_4, ._ins_notentra_alaire_0, ._ins_notentra_alaire_1, ._ins_notentra_alaire_2, ._ins_notentra_alaire_3, ._ins_notentra_alaire_4{
  float: left;
  border-radius: 50%;
  text-align: center;
}
._ins_notentra_0{
  background-color: rgba(156,156,156,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_1{
  background-color: rgba(255,165,0,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_2{
  background-color: rgba(88, 111, 30,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_3{
  background-color: rgba(13,110,253,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_4{
  background-color: rgba(217,33,33,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_alaire_0{
  background-color: white;
  border: solid 2px rgba(156,156,156,0.7);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_alaire_1{
  background-color: white;
  border: solid 2px rgba(255,165,0,0.7);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_alaire_2{
  background-color: white;
  border: solid 2px rgba(88, 111, 30,1);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_alaire_3{
  background-color: white;
  border: solid 2px rgba(13,110,253,0.7);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_notentra_alaire_4{
  background-color: white;
  border: solid 2px rgba(217,33,33,0.7);
  box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.75);
}
._ins_rotuloaf{
  float: left;
  text-align: center;
}
._ins_afinador{
  float: left;
  text-align: center;
}
._ins_divrotul{
  float: left;
  background-size: 100% 100%;
}
/** css para listado de acordes **/
._men_ocul_lisediaco{
  float: left;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--max-width);
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
._men_ocul_edilis{
  float: left;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--max-width);
  top: 0;
  left: 0;
  z-index: 6;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  text-align: center;
}
._men_cerr_botocul{
  text-align: center; 
  width: 90px; 
  padding: 5px 10px; 
  font-size: 20px; 
  color: white; 
  background-color: red; 
  border-radius: 0px 0px 5px 5px;
  margin: 0px auto;
}
._men_cont_botocul{
  text-align: center; 
  width: 230px; 
  padding: 5px 10px; 
  font-size: 20px; 
  color: #1E84A6; 
  background-color: white; 
  border-radius: 5px;
  margin: 20px auto 0px auto;
}
._men_ocul_crelis{
  float: left;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--max-width);
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  text-align: center;
}
/***** CSS PARA PIANO *****/


/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  ._ins_card:hover {
    background: rgba(var(--card-rgb), 0.2);
    border: 1px solid rgba(var(--card-border-rgb), 0.15);
  }
  ._ins_card:hover span {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion) {
  ._ins_card:hover span {
    transform: none;
  }
}

/* Mobile */
@media (max-width: 701px) {
  /* header */
  ._ins_grid {
    grid-template-columns: 1fr;
    margin: 10px 0px;
    max-width: 100%;
    text-align: center;
  }
  ._ins_card {
    padding: 1rem 0.5rem;
  }
  ._ins_card span {
    display: inline-block;
    transition: transform 200ms;
  }
  ._ins_card p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 100%;
    padding: 0;
  }
  /* Estilos Css para Instrumentos (Marco General) */
  ._ins_main {
    width: 94%;
    height: auto;
    margin: 2% 3%;
    float: left;
  }
  ._ins_grillav {
    float: left;
    height: 600px;
    width: 85.00%;
    background-color: aqua;
  }
  ._ins_rotulov {
    float: left;
    height: 12%;
    width: 85.00%;
  }
  ._ins_trastev {
    float: left;
    height: 600px;
    width: 15.00%;
  }
  ._ins_residuv{
    float: left;
    height: 12%;
    width: 15.00%;
  }
  /** css para listado de acordes **/
  ._men_ocul_lisediaco{
    float: left;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--max-width);
    top: 0;
    left: 0;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
  }
  ._men_ocul_edilis{
    float: left;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--max-width);
    top: 0;
    left: 0;
    z-index: 6;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    text-align: center;
  }
  ._men_cerr_botocul{
    text-align: center; 
    width: 90px; 
    padding: 5px 10px; 
    font-size: 20px; 
    color: white; 
    background-color: red; 
    border-radius: 0px 0px 5px 5px;
    margin: 0px auto;
  }
  ._men_cont_botocul{
    text-align: center; 
    width: 230px; 
    padding: 5px 10px; 
    font-size: 20px; 
    color: #1E84A6; 
    background-color: white; 
    border-radius: 5px;
    margin: 20px auto 0px auto;
  }
  ._men_ocul_crelis{
    float: left;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--max-width);
    top: 0;
    left: 0;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    text-align: center;
  }
  /***** CSS PARA PIANO *****/
  
}

/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
  ._ins_grid {
    grid-template-columns: repeat(4, 100%);
  }
}