@charset "UTF-8";
html {
  font-size: calc(6px + 5 * ((100vw - 790px) / 1800));
  width: 100%;
  height: 100%;
  min-width: 790px;
  min-height: 600px; 
}

body {
  font-family: 'Encode Sans Semi Expanded', sans-serif;
  background: #dfe7efb3;
  height: 100%; 
}
.bg-header{
    background-color:#1a237e;
    font-size: 4rem;
}

h2 {
  font-size: 2rem;
  font-weight: 100; 
}

h1 {
  font-size: 2.5rem;
  letter-spacing: 0.1rem; }

button {
  font-size: 2rem;
  color: white;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border: 0;
  }


audio {
  display: none; }

/** Main containers **/
#container,
#container-left,
#container-right,
#container-left-info {
  height:92%;
  /*
  display: flex;
  justify-content: center;
  align-items: center; 
  */
}

#container-left {
  position: relative; 
}
#container-right{
  padding-top: 150px;
}

#container-left,
#container-right {
  width: 50%; 
  float: left;
}

#container-left-info {
  position: relative;
  /* flex-direction: column; */
  /* flex-flow: column; */
  background: #663;
  width: 200px;
  margin: 0 auto;
  display: none;
}

#container-left-info > h1 {
  font-size: 4.5rem;
  color:#705252;
  text-shadow: 0px 1px 1px black;
  z-index: 1; 
}

#participante{
  font-size: 2rem!important;
  padding-left: 50px;
  text-transform: capitalize;
}

#container-left-info > img {
  display: none;
  position: absolute;
  bottom: 0;
  width: 65rem; }

/** Mixin con CSS para ordenar los items en circulo**/
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5c7ced;
  border-radius: 50%;
  font-size: 3rem;
  color: white;
  border: 1px solid white;
 }

.container-left-circle {
  height: 100%;
  /*position: relative; */
}
  .container-left-circle > * {
    /* style of every circle*/
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    margin: -3rem;
   }

  .container-left-circle > :nth-of-type(1) {
    transform: rotate(-90deg) translate(23rem) rotate(90deg); }
  .container-left-circle > :nth-of-type(2) {
    transform: rotate(-76.15385deg) translate(23rem) rotate(76.15385deg); }
  .container-left-circle > :nth-of-type(3) {
    transform: rotate(-62.30769deg) translate(23rem) rotate(62.30769deg); }
  .container-left-circle > :nth-of-type(4) {
    transform: rotate(-48.46154deg) translate(23rem) rotate(48.46154deg); }
  .container-left-circle > :nth-of-type(5) {
    transform: rotate(-34.61538deg) translate(23rem) rotate(34.61538deg); }
  .container-left-circle > :nth-of-type(6) {
    transform: rotate(-20.76923deg) translate(23rem) rotate(20.76923deg); }
  .container-left-circle > :nth-of-type(7) {
    transform: rotate(-6.92308deg) translate(23rem) rotate(6.92308deg); }
  .container-left-circle > :nth-of-type(8) {
    transform: rotate(6.92308deg) translate(23rem) rotate(-6.92308deg); }
  .container-left-circle > :nth-of-type(9) {
    transform: rotate(20.76923deg) translate(23rem) rotate(-20.76923deg); }
  .container-left-circle > :nth-of-type(10) {
    transform: rotate(34.61538deg) translate(23rem) rotate(-34.61538deg); }
  .container-left-circle > :nth-of-type(11) {
    transform: rotate(48.46154deg) translate(23rem) rotate(-48.46154deg); }
  .container-left-circle > :nth-of-type(12) {
    transform: rotate(62.30769deg) translate(23rem) rotate(-62.30769deg); }
  .container-left-circle > :nth-of-type(13) {
    transform: rotate(76.15385deg) translate(23rem) rotate(-76.15385deg); }
  .container-left-circle > :nth-of-type(14) {
    transform: rotate(90deg) translate(23rem) rotate(-90deg); }
  .container-left-circle > :nth-of-type(15) {
    transform: rotate(103.84615deg) translate(23rem) rotate(-103.84615deg); }
  .container-left-circle > :nth-of-type(16) {
    transform: rotate(117.69231deg) translate(23rem) rotate(-117.69231deg); }
  .container-left-circle > :nth-of-type(17) {
    transform: rotate(131.53846deg) translate(23rem) rotate(-131.53846deg); }
  .container-left-circle > :nth-of-type(18) {
    transform: rotate(145.38462deg) translate(23rem) rotate(-145.38462deg); }
  .container-left-circle > :nth-of-type(19) {
    transform: rotate(159.23077deg) translate(23rem) rotate(-159.23077deg); }
  .container-left-circle > :nth-of-type(20) {
    transform: rotate(173.07692deg) translate(23rem) rotate(-173.07692deg); }
  .container-left-circle > :nth-of-type(21) {
    transform: rotate(186.92308deg) translate(23rem) rotate(-186.92308deg); }
  .container-left-circle > :nth-of-type(22) {
    transform: rotate(200.76923deg) translate(23rem) rotate(-200.76923deg); }
  .container-left-circle > :nth-of-type(23) {
    transform: rotate(214.61538deg) translate(23rem) rotate(-214.61538deg); }
  .container-left-circle > :nth-of-type(24) {
    transform: rotate(228.46154deg) translate(23rem) rotate(-228.46154deg); }
  .container-left-circle > :nth-of-type(25) {
    transform: rotate(242.30769deg) translate(23rem) rotate(-242.30769deg); }
  .container-left-circle > :nth-of-type(26) {
    transform: rotate(256.15385deg) translate(23rem) rotate(-256.15385deg); }

/** contadores de puntos y de tiempo **/
#container-left-counters {
  position: absolute;
  left: 4rem;
  bottom: 110px;
  /*bottom: 5rem;*/
  display: flex;
  height: 17.5rem;
  width: 11rem;
  justify-content: space-between;
  flex-direction: column;
  align-items: center; }

#timer,
#score {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: #00c6b6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: white;
  border: 1px solid white; }

#score {
  width: 5rem;
  height: 5rem; 
}

#score,
#timer,
.circle {
/* 
 -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  text-shadow: 0px 1px 1px black; 
*/
}

/** Parte derecha **/
#container-right-rules,
#container-right-game,
#container-right-win,
#container-right-cancelGame,
#container-right-ranking {
  width: 85%;
  margin: 0 auto;
  /*height: 80%;*/
  background: #8a4949;
  text-align: center;
  background-color: white;
  color: #464444;
  box-shadow: 0px 4px 10px #ababab;
  border-radius: 5px;
}

#container-right-game {
  display: none;
  height: auto;
  /*border: 1rem solid #fac35f;*/
  
  padding: 2rem;
  /*border-radius: 0px 120px 0px 120px;
  -moz-border-radius: 35px 0px 35px 0px;
  -webkit-border-radius: 0px 120px 0px 120px;*/
  flex-wrap: wrap; }

#container-right-rules > div {
  height: 100%;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center; }

.green {
  background: linear-gradient(#37963b, #5aec8c); }

.red {
  background: linear-gradient(#B64139, #ff837a); }

#container-right-game > div {
  width: 100%; }

#container-right-game-questions,
#container-right-game-buttons {
  display: flex;
  align-items: center;
  justify-content: center; }

#container-right-game-questions {
 /* height: 60%;*/
  margin-right: 3rem; }

#container-right-game-buttons {
 padding: 20px 0;
}

#answer {
  width: 100%;
  font-size: 13px;
  padding: 10px;
  border: solid 1px #d1d1d1;
}
input#answer:focus-visible{
  outline: none!important;
}
input#answer:focus{
  border: solid 1px #b3b3b3;
 
}

/** ganar-cancelar juego- ranking */
#container-right-win,
#container-right-cancelGame,
#container-right-ranking {
  padding: 30px 0;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  display: none;
 }

#winning-cup {
  width: 26rem; }

#sad-emoji {
  width: 19rem; }

.container-right-title > h1 {
  font-size: 4rem;
  color: #ff0000a6; }

/** ranking */
#container-right-ranking > h1 {
  font-size: 4rem; }

#ranking-table {
  font-size: 2rem;
  width: 50rem;
  height: 37rem; }

/** atribución diseñadores */
#attribution {
  position: fixed;
  bottom: 1rem;
  right: 2rem;
  font-size: 1.5rem;
  color: white; }

@media all and (max-height: 717px) {
  p {
    margin: 1rem 0; 
  }
  #container-right-rules {
    height: 90%;
    width: 80%; 
  } 
}

  #container-right-rules{
    box-shadow: 0px 3px 10px #cbc9c9;
    border-radius: 10px;
    /* height: 60% !important;*/
    height: auto;
    padding: 30px 0;
  }

.form-control{
  font-size: 1.3rem;
  line-height: 2.5;
}
.form-floating{
  width: 100%;
}
#nom-archivo{
  font-size: 14px;
}

#msn-requerido,
#msn-text-min,
#msn-file,
#msn-file_incompleto,
#msn-file_error{
  font-size: 12px;
  text-align: left;
  width: 100%;
  color: #774f33;
  font-weight: 700;
}
#question{
  font-size: 14px;
}


input#name::placeholder {
 font-size: 14px;
}
.form-floating>label {
  font-size: 11px !important;
}


#botones-ranking{
  margin: 30px 0;
}
#btnExportar{
  padding: 10PX 20PX;
  background-color: #f1b903;
  border-radius: 20px;
  margin-left: 20px;
  font-size: 12px;
  text-transform: uppercase; 
}

/*
  Botones 
  Responder, Pasapalabra, Pausa, Finalizar
-----------------------------------------------------------------------*/
#play-game-button{
  font-size: 12px !important;
  text-transform: uppercase; 
}
#play-game-button,
.play-again-button,
#ranking-button {
  background-color: #00c6b6;
  padding: 10px 30px;
  border-radius: 20px; 
  font-size: 12px;
  text-transform: uppercase; 
  margin-right: 10px;
}

#submit-button[disabled],
#next-button[disabled],
#end-button[disabled]{
  cursor:  no-drop;
}

#submit-button[disabled],
#submit-button[disabled]:hover{
  background-color: rgb(146, 245, 237);
}
#submit-button {
  background-color: #00C6B6;
 }
 #submit-button:hover{
  background-color:#00bbac;
 }

#next-button[disabled],
#next-button[disabled]:hover{
  background-color: rgb(161, 177, 241);
}
#next-button {
  background-color: #5977EC;
 }
 #next-button:hover {
  background-color: rgb(61, 96, 235);
}

#end-button[disabled],
#end-button[disabled]:hover{
  background-color: rgb(243, 141, 180);
}
#end-button {
  background-color: #F42F7B;
}
#end-button:hover {
  background-color: #fb0160;
}
#pausa{
  background: #FD9405;
  padding: 1px 10px;
  color: #fff;
  cursor: pointer;
}
#pausa:hover {
  background: rgb(255, 156, 17);
}
#pausa{
  font-size: 11px !important;
  padding: 11px 15px !important;
  line-height: 1 !important;
}
#submit-button,#next-button,#end-button,#pausa{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
  line-height: 1.2;
  margin: 0.6rem;
  border-radius: 20px;
}

.transition-3{
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
}
.transition-1{
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  transition: all .1s linear;
}

.tableexport-caption{
  padding-top: 20px;
}
.tableexport-caption .button-default{
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 11px;
  text-transform: uppercase;
  background: #76d1db;
  -webkit-transition: .2s all linear;
  -moz-transition: .2s all linear;
  transition: .2s all linear;
}
.tableexport-caption .button-default:hover{
  background:#4fc0cd;
}