/*Desktop tienen mas de mil px y mobiles pueden tener del orden de 300px
.despues de modificar correr stylus style.styl que genera style.css. Lo de style2.*  es anticuado*/
html {
  font-size: 12px;
  font-family: "Times New Roman", "DejaVu Serif", serif;
  display: flex;
}
@media (min-width: 480px) {
  html {
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  html {
    font-size: 15px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}
body {
  margin: 0 0 0 0;
  background: #eee;
}
ul,
ol,
dl,
p,
a {
  font-size: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  font-weight: normal;
}
/*sin unidad para relacionarlo con el tamano del font */
li,
p {
  line-height: 1rem;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2.25rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.75rem;
}
h5 {
  font-size: 1.5rem;
}
h6 {
  font-size: 1.25rem;
}
option {
  overflow: visible;
}
input {
  cursor: pointer;
}
#TableResources {
  width: 100%;
  border-collapse: collapse;
}
#TableResources tr:nth-child(odd) {
  background-color: #b8d1f3;
}
#TableResources tr:nth-child(even) {
  background-color: #dae5f4;
}
#TableResources th,
td {
  border: 1px solid #000;
  border-collapse: collapse;
  font-size: 10px;
  padding: 4px;
}
a {
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
  text-shadow: 0 0 2px #999;
}
/*pasados de index.php para evitar inline*/
.A {
  background: linear-gradient(to bottom, #969696, rgba(200,220,200,0));
}
.B {
  border-bottom: 1px solid #00f;
  border-left: 1px solid #00f;
}
.x {
  display: flex;
  flex-direction: row;
}
.titLanguage {
  align-self: flex-start;
}
.ctrelem {
  overflow: visible;
}
.oculto {
  display: none;
}
.seleccion {
  font-weight: bold;
}
.plevel {
  height: 100px;
}
.username {
  height: 15px;
}
.session {
  font-size: 4px;
  padding: 0px 0px;
  border: none;
  color: #afafaf;
  background-color: #afafaf;
}
/* hasta aqui*/
.buLangnav {
  width: 2.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0.5rem;
}
.langnav {
  display: none;
  flex-flow: column;
  overflow: hidden;
}
/*  background-color: #333*/
.langnav a {
  display: block;
  color: #1212f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/*
.langnav a:hover 
  background-color: #ddd
  color: black
*/
.active {
  background-color: #4caf50;
  color: #fff;
}
.langnav.disp {
  display: block;
}
.falang {
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
}
/*
@media screen and (max-width: 600px) 
  .langnav a:not(:first-child) 
    display: none
  
  .langnav a.icon 
    float: right
    display: block
  

@media screen and (max-width: 600px) 
  .langnav.responsive 
    position: relative
  
  .langnav.responsive .icon 
    position: absolute
    right: 0
    top: 0
  
  .langnav.responsive a 
    float: none
    display: block
    text-align: left
*/
/*  background-color: #333*/
/*
.accordion-header
    background-color: #eee
    color: #444
    cursor: pointer
    padding: 18px
    width: 100%
    text-align: left
    border: none
    outline: none
    transition: 0.4s

.accordion-content
    padding: 0 18px
    background-color: white
    display: none
    overflow: hidden

.active, .accordion:hover
   background-color: #ccc

.accordion-header:after 
    content: '\9660'
    font-size: 13px
    color: #777
    float: right
    margin-left: 5px


.active:after 
    content: "\9654"
*/
.topnav {
  overflow: hidden;
}
/*  background-color: #333*/
.topnav a {
  float: left;
  display: block;
  color: #1212f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/*
.topnav a:hover 
  background-color: #ddd
  color: black
*/
.active {
  background-color: #4caf50;
  color: #fff;
}
.topnav .icon {
  display: none;
}
.fa {
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
}
/*
@media screen and (max-width: 600px) 
  .topnav a:not(:first-child) 
    display: none
  
  .topnav a.icon 
    float: right
    display: block
  

@media screen and (max-width: 600px) 
  .topnav.responsive 
    position: relative
  
  .topnav.responsive .icon 
    position: absolute
    right: 0
    top: 0
  
  .topnav.responsive a 
    float: none
    display: block
    text-align: left



.topnav a 
  float: left
  display: block
  color: #1212f2
  text-align: center
  padding: 14px 16px
  text-decoration: none
  font-size: 17px

/*
.topnav a:hover 
  background-color: #ddd
  color: black
*/
.active {
  background-color: #4caf50;
  color: #fff;
}
.topnav .icon {
  display: none;
}
.fa {
  display: inline-block;
  font-size: inherit;
  text-rendering: auto;
}
/*
@media screen and (max-width: 600px) 
  .topnav a:not(:first-child) 
    display: none
  
  .topnav a.icon 
    float: right
    display: block
  

@media screen and (max-width: 600px) 
  .topnav.responsive 
    position: relative
  
  .topnav.responsive .icon 
    position: absolute
    right: 0
    top: 0
  
  .topnav.responsive a 
    float: none
    display: block
    text-align: left



.grid-container 
  display: grid
  grid-template-columns: 1fr
  grid-column-gap: 2px

@media (max-width: 480px) 
  .grid-container 
    grid-template-columns: 1fr
    grid-column-gap: 2px
  

@media (min-width: 768px) 
  .grid-container 
    grid-template-columns: 1fr
    grid-column-gap: 1px
  

@media (min-width: 992px) 
  .grid-container 
    grid-template-columns: 1fr 4fr 
    grid-column-gap: 1px
  

@media (min-width: 1200px) 
  .grid-container 
    grid-template-columns: 1fr 4fr 
    grid-column-gap: 1px
  

=========hasta aqui ok==================*/
.box {
  border: 1px solid #ddd;
}
/*cursor*/
.ctrButton:hover {
  cursor: pointer;
}
#tablaobrascuerpo tr:hover {
  cursor: pointer;
}
/*------------------*/
.tab {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.tab button {
  background-color: #aab;
  float: left;
  border: 1px solid #aaf;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/*
.tab button:hover 
    background-color: #ddd

*/
.tab button.active {
  background-color: #ccc;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent p,
button {
  display: inline;
}
.gBotones {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.gBoton {
  width: 12rem;
  margin-top: 0.75rem;
}
footer {
  display: flex;
  flex-flow: row nowrap;
  background: rgba(200,220,220,0);
  margin: 5px 5px 5px 5px;
}
/*top,right,bottom,left*/
/*font-size:x-small; mdium,xx-small,x-small,,small,large,xlarge,xx-large,smaller,larger, hay mas*/
footer ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
}
footer ul li {
  float: left;
  padding: 5px;
  font-size: smaller;
}
/* menu reponsible tomado des://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav. esta en com../html..*/
/* imagenes*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/*termina plantilla general y comienza principal.tpl*/
/*lista de partes principales. se usa tambien en otrossitios.tpl*/
.ul-h {
  overflow: hidden;
}
.mw-headline {
  float: left;
  display: block;
  text-align: left;
  padding: 8px;
  line-height: 2rem;
  margin-bottom: 1rem;
}
/*listas tipos de obras*/
.hflex-containerP {
  order: 3;
  display: flex;
  flex-flow: row nowrap;
  width: 680px;
  align-self: flex-start;
  min-height: auto;
}
/*opciones align-self: auto,flex-strt,flex-end,center,baseline,stretch*/
/* lista composisitores, generos, tipos de archivos*/
.vflex-containerP {
  display: flex;
  flex-flow: column wrap;
  flex: 0 0 33%;
}
.listaP {
  overflow: hidden;
  list-style-type: square;
}
.listaP li {
  line-height: 1.5rem;
}
.ctrelem {
  cursor: pointer;
}
.pBoton {
  background: transparent url("../images/spr.png") no-repeat scroll 0 0;
  background-position: -8px -198px;
  border-width: 0;
  cursor: pointer;
  margin-top: 0.75rem;
}
/*inicialmente invisible, cuando se envia una repuesta pasa a display: flex*/
.hgr-content {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
/* control y historia css de svg . Nose usa ya*/
#player1 {
  transform: scale(0.5, 0.5) translate(0, 200px);
  width: 200px;
}
#makeSelectablePlayer {
  display: inline-block;
  background-color: #7b38d8;
  border-radius: 5px;
  border: 4px double #ccc;
  color: #eee;
  text-align: center;
  font-size: 28px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
/*no funcional porque actua sobre id interno y eso no se puede con libboard

#history 
  transform:scale(0.15,-0.15) 
*/
/*translate(100px,-2500px)*/
/*contenerdor de history*/
#historyContent {
  width: 200px;
}
.popup {
  position: relative;
  display: block;
  cursor: pointer;
  text-align: left;
}
.popup .popuptext {
  visibility: hidden;
  width: 210px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 5%;
  margin-left: -10px;
  font-size: 10px;
}
/*  bottom: 125%*/
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}