/*!
	STYLE LESS
	Roger @ planetoide.mx
*/
/* =General
-----------------------------------------------------------------------------*/
/*
	TOOLBOX
*/
[v-cloak] {
  display: none;
}
/* = Alignments
-----------------------------------------------------------------------------*/
.vertical-align {
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.horizontal-align {
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.center-align {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.centrador {
  position: relative;
  max-width: 1160px;
  margin: 0px auto;
  padding: 0px 30px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: 20;
}
.centrar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.centro {
  position: relative;
  z-index: 20;
}
.square {
  position: relative;
}
.square:after {
  display: block;
  content: '';
  padding-bottom: 100%;
}
/* = Layers
-----------------------------------------------------------------------------*/
.coverfull {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.blurcolor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.blurfoto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.ofhidden {
  overflow: hidden;
}
.borderbox {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* = Positions
-----------------------------------------------------------------------------*/
.fixed {
  position: fixed;
}
.overall {
  z-index: 100;
}
.relative {
  position: relative;
}
/* =Visual
-----------------------------------------------------------------------------*/
.dashed {
  border: 1px dashed black;
}
.blurry {
  filter: blur(4px);
  -webkit-filter: blur(4px);
  pointer-events: none;
}
/* =Flexbox
-----------------------------------------------------------------------------*/
.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* =Transition
-----------------------------------------------------------------------------*/
/* =Transforms
-----------------------------------------------------------------------------*/
/* =Colors
-----------------------------------------------------------------------------*/
/*
	PLUGINS
*/
/*
	GENERAL
*/
/* = General Items
-----------------------------------------------------------------------------*/
.centrador {
  padding: 0px 40px;
  max-width: 1260px;
}
body {
  margin: 0px;
}
section {
  position: relative;
}
img {
  display: block;
}
main {
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
dialog {
  position: relative;
  display: block;
  border: none;
  padding: 15px;
  margin: 0px;
  border-radius: 16px;
  background: white;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
.foto,
#foto {
  position: relative;
}
.foto .blurfoto,
#foto .blurfoto {
  background-size: cover !important;
}
a {
  text-decoration: none;
  color: inherit;
}
a:focus {
  outline: none;
}
button {
  cursor: pointer;
}
button:focus {
  outline: none;
}
button.boton {
  background: #19456E;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  border: 1px solid #19456E;
  align-items: center;
  padding: 0px 24px;
  border-radius: 24px;
  gap: 6px;
}
button.boton span {
  display: block;
  color: white;
  font-size: 16px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  letter-spacing: 0.6px;
}
button.ico {
  padding: 0px;
}
button.border {
  background: none;
  border: 1px solid #19456E;
}
button.border span {
  color: #19456E;
}
button.small {
  height: 32px;
  padding: 0px 16px;
}
button.small span {
  font-size: 14px;
}
.link {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.ico {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ico img {
  max-width: 100%;
}
.table {
  position: relative;
}
.table .theads {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.table .theads .thead {
  position: relative;
  padding: 12px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #F2F7FD;
}
.table .theads .thead span {
  display: block;
  color: #19456E;
  font-size: 14px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.table .theads .thead.right {
  text-align: right;
}
.table .row {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #BFBFBF;
}
.table .row:last-of-type {
  border-bottom: none;
}
.table .row .info {
  position: relative;
  padding: 12px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.table .row .info.tags {
  padding: 10px 12px;
}
.table .row .info .tag {
  position: relative;
  padding: 4px 8px;
  border-radius: 4px;
  background: #FEF3C7;
  width: max-content;
  height: auto;
  display: block;
  color: #19456E;
  font-size: 14px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  letter-spacing: 0.6px;
}
.table .row .info .tag.accepted {
  background: #D1FAE5;
}
.table .row .info .tag.rejected {
  background: #FEE2E2;
}
.table .row .info > span {
  display: block;
  color: #19456E;
  font-size: 16px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
}
.table .row .info.right span {
  text-align: right;
}
.table .row .info.right .tag {
  margin-left: auto;
}
header {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 40;
}
header .centrador {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .centrador button.back {
  position: absolute;
  top: 0;
  left: 30px;
}
header .centrador #logo {
  position: relative;
}
header .centrador #logo img {
  width: 160px;
}
#errorView {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #273237;
}
#errorView .content {
  width: 80%;
  max-width: 600px;
}
#errorView .content strong {
  font-family: 'Reem Kufi';
  color: white;
  font-size: 50px;
  display: block;
  text-align: center;
  pointer-events: none;
  opacity: 0.85;
}
#errorView .content span {
  font-family: 'Reem Kufi';
  color: white;
  font-size: 22px;
  pointer-events: none;
  letter-spacing: 0.2px;
  opacity: 0.2;
  display: block;
  text-align: center;
  line-height: 1.2;
}
#errorView .content img {
  width: 140px;
  margin: 70px auto 0px;
}
#alerts {
  position: fixed;
  z-index: 150;
  bottom: 30px;
  right: 20px;
  width: 1px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#alerts .alert {
  position: relative;
  min-width: 280px;
  margin-bottom: 10px;
  padding: 15px 40px 15px 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-transition: all 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: all 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: all 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transform: translate(100%, 0%);
  -moz-transform: translate(100%, 0%);
  -o-transform: translate(100%, 0%);
  -ms-transform: translate(100%, 0%);
  transform: translate(100%, 0%);
  opacity: 0;
  pointer-events: none;
}
#alerts .alert span {
  font-family: 'Stag Sans', sans-serif;
  font-weight: 500;
  display: block;
}
#alerts .alert i {
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  display: block;
  border-radius: 50%;
  color: #ffffff;
  opacity: 0.6;
  right: 15px;
}
#alerts .alert.showed {
  -webkit-transform: translate(0%, 0%);
  -moz-transform: translate(0%, 0%);
  -o-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
  pointer-events: all;
}
#alerts .alert.error {
  background: #FC4342;
}
#alerts .alert.error span {
  color: white;
}
#alerts .alert.info {
  background: #004671;
}
#alerts .alert.info span {
  color: #ffffff;
}
#alerts .alert:last-of-type {
  margin-bottom: 0px;
}
/*
	MEDIA SCREEN
*/
/* =Full Screen
-----------------------------------------------------------------------------*/
/* = Tablet Horizontal
-----------------------------------------------------------------------------*/
/* = Tablet Vertical / Movil Ancho
-----------------------------------------------------------------------------*/
/* = Mobile Small
-----------------------------------------------------------------------------*/
/* =Fonts
-----------------------------------------------------------------------------*/
@font-face {
  font-family: 'Stag Sans';
  src: url('../fonts/StagSans-Book.woff2') format('woff2'), url('../fonts/StagSans-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stag Sans';
  src: url('../fonts/StagSans-Medium.woff2') format('woff2'), url('../fonts/StagSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stag Sans';
  src: url('../fonts/StagSans-Light.woff2') format('woff2'), url('../fonts/StagSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/reemkufi/v28/2sDPZGJLip7W2J7v7wQZZE1I0yCmYzzQtuZnIGaV2g.ttf) format('truetype');
}
h1 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #19456E;
  font-size: 48px;
  display: block;
}
h2 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #19456E;
  font-size: 34px;
  display: block;
}
h3 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #19456E;
  display: block;
}
h4 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #19456E;
  display: block;
}
h5 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  font-size: 16px;
  color: #19456E;
  display: block;
}
h6 {
  margin: 0px;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  font-size: 14px;
  display: block;
}
p {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #19456E;
  margin: 0px;
  letter-spacing: 0.15px;
  line-height: 1.4;
}
/* = Forms
-----------------------------------------------------------------------------*/
#formulario,
.formulario {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#formulario .input,
.formulario .input {
  position: relative;
}
#formulario .input ::-webkit-input-placeholder,
.formulario .input ::-webkit-input-placeholder {
  color: #A3B5C5;
}
#formulario .input ::-moz-placeholder,
.formulario .input ::-moz-placeholder {
  color: #A3B5C5;
}
#formulario .input :-ms-input-placeholder,
.formulario .input :-ms-input-placeholder {
  color: #A3B5C5;
}
#formulario .input :-moz-placeholder,
.formulario .input :-moz-placeholder {
  color: #A3B5C5;
}
#formulario .input input,
.formulario .input input,
#formulario .input textarea,
.formulario .input textarea {
  display: block;
  width: 100%;
  background: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid #BFBFBF;
  height: 48px;
  border-radius: 24px;
  padding: 0px 20px;
  font-size: 16px;
  color: #595959;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
}
#formulario .input input:focus,
.formulario .input input:focus,
#formulario .input textarea:focus,
.formulario .input textarea:focus {
  outline: none;
}
#formulario .input .selector,
.formulario .input .selector {
  position: relative;
}
#formulario .input .selector select,
.formulario .input .selector select {
  display: block;
  width: 100%;
  background: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 48px;
  border-radius: 24px;
  padding: 0px 20px;
  color: #595959;
  font-family: 'Stag Sans', sans-serif;
  font-weight: normal;
  font-size: 16px;
}
#formulario .input .selector select:focus,
.formulario .input .selector select:focus {
  outline: none;
}
#formulario .input .selector .arrow,
.formulario .input .selector .arrow {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  background: white;
  pointer-events: none;
  border-radius: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
#formulario .input > label,
.formulario .input > label {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 400;
  color: #595959;
  font-size: 14px;
  margin-bottom: 4px;
}
#formulario .checkbox,
.formulario .checkbox {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
#formulario .checkbox .check,
.formulario .checkbox .check {
  position: relative;
  width: 17px;
  min-width: 17px;
  height: 17px;
  border: 1px solid #BFBFBF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  border-radius: 2px;
}
#formulario .checkbox .check input[type="checkbox"],
.formulario .checkbox .check input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  cursor: pointer;
  opacity: 0;
}
#formulario .checkbox .check img,
.formulario .checkbox .check img {
  opacity: 0;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  width: 17px;
  pointer-events: none;
}
#formulario .checkbox .check input[type="checkbox"]:checked + img,
.formulario .checkbox .check input[type="checkbox"]:checked + img {
  opacity: 1;
}
#formulario .checkbox label,
.formulario .checkbox label {
  display: block;
  color: #595959;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
}
#formulario .checkbox label a,
.formulario .checkbox label a {
  display: inline;
}
/* =Views
-----------------------------------------------------------------------------*/
#site main {
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
#site main #background {
  background-size: cover !important;
}
#site main #color {
  background: rgba(0, 0, 0, 0.2);
}
#site main dialog {
  width: 100%;
  max-width: 640px;
  padding: 64px;
  gap: 40px;
  align-items: center;
}
#site main dialog .title h2 {
  text-align: center;
}
#site main dialog .formulario {
  max-width: 320px;
  width: 100%;
}
#site main dialog .formulario .buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
#site main dialog#signup .formulario {
  max-width: 512px;
}
#site main dialog#signup .formulario #terms {
  justify-content: center;
}
#app {
  position: relative;
  background: #F2F2F2;
}
#app main {
  padding: 140px 30px 60px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}
#app main #board {
  position: relative;
  max-width: 900px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#app main #board #top {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  width: 100%;
}
#app main #board #top dialog#rated {
  width: 45%;
  padding: 24px;
  gap: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
#app main #board #top dialog#rated .info {
  position: relative;
}
#app main #board #top dialog#rated .info h5 {
  margin-bottom: 8px;
}
#app main #board #top dialog#rated .info span {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #595959;
  font-size: 14px;
  line-height: 1.3;
}
#app main #board #top dialog#rated .buttons button {
  height: 24px;
}
#app main #board #top dialog#rated .buttons button span {
  margin-top: 2px;
}
#app main #board #top dialog#summary {
  width: 55%;
  padding: 24px;
  gap: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
#app main #board #top dialog#summary .info {
  position: relative;
}
#app main #board #top dialog#summary .info h5 {
  margin-bottom: 8px;
}
#app main #board #top dialog#summary .info span {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #595959;
  font-size: 14px;
  line-height: 1.3;
}
#app main #board dialog#tickets {
  width: 100%;
  padding: 24px;
}
#app main #board dialog#tickets .head {
  position: relative;
  min-height: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app main #board dialog#tickets .head .title {
  padding-left: 12px;
}
#app main #add {
  position: relative;
  max-width: 680px;
  width: 100%;
}
#app main #add dialog {
  padding: 40px;
  width: 100%;
  gap: 24px;
}
#app main #add dialog form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#app main #add dialog .title {
  position: relative;
}
#app main #add dialog .title h3 {
  text-align: center;
}
#app main #add dialog .loadarea {
  position: relative;
  border: 1px dashed #BFBFBF;
  border-radius: 16px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 40px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#app main #add dialog .loadarea img {
  margin-bottom: 16px;
}
#app main #add dialog .loadarea span {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #595959;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  margin-top: 4px;
}
#app main #add dialog .loadarea input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
  cursor: pointer;
}
#app main #add dialog .formulario .buttons {
  margin-top: 20px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}
#app main #added {
  position: relative;
  max-width: 680px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app main #added dialog {
  padding: 40px;
  width: 100%;
  gap: 40px;
}
#app main #added dialog .text {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#app main #added dialog .text img {
  margin-bottom: 16px;
}
#app main #added dialog .text span {
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #595959;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  margin-top: 4px;
}
#app main #added dialog .buttons {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}
#app #ranking {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app #ranking #cerrador {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.1;
}
#app #ranking dialog {
  width: 90%;
  max-width: 660px;
  padding: 24px;
  gap: 8px;
}
#app #ranking dialog .close {
  position: absolute;
  bottom: 100%;
  left: 100%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 40;
}
#app #ranking dialog .head {
  position: relative;
  padding: 10px 0px;
}
#app #ranking dialog .head h2 {
  text-align: center;
}
#app #ranking dialog .head span {
  margin-top: 4px;
  display: block;
  font-family: 'Stag Sans', sans-serif;
  font-weight: 300;
  color: #595959;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
}
#app #ranking dialog .table.tops .row:nth-child(2) .info {
  background: #F9EDD2;
}
#app #ranking dialog .table.tops .row:nth-child(3) .info {
  background: #F2F2F2;
}
#app #ranking dialog .table.tops .row:nth-child(4) .info {
  background: #F6E2D4;
}
/* =Responsive
-----------------------------------------------------------------------------*/
/*
	MEDIA SCREEN
*/
/* =Full Screen
-----------------------------------------------------------------------------*/
/* = Tablet Horizontal
-----------------------------------------------------------------------------*/
/* = Tablet Vertical / Movil Ancho
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 820px) {
  #app main #board #top {
    flex-direction: column;
  }
  #app main #board #top dialog#rated {
    width: 100%;
  }
  #app main #board #top dialog#summary {
    width: 100%;
  }
}
/* = Mobile Small
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 430px) {
  #site main dialog {
    padding: 40px 24px;
  }
  #app main {
    padding: 140px 16px 60px;
  }
  #app main #board #top dialog#rated {
    flex-direction: column;
    align-items: flex-start;
  }
  #app main #board #top dialog#rated .info span br {
    display: none;
  }
  #app main #board #top dialog#summary {
    flex-direction: column;
    align-items: flex-start;
  }
  #app main #board #top dialog#summary .info span br {
    display: none;
  }
  #app main #board dialog#tickets {
    gap: 16px;
  }
  #app main #board dialog#tickets .head {
    min-height: 0px;
  }
  #app main #board dialog#tickets .head .title {
    padding-left: 0px;
  }
  #app main #board dialog#tickets .table {
    overflow-x: scroll;
  }
  #app main #board dialog#tickets .table .theads .thead {
    min-width: 130px;
  }
  #app main #board dialog#tickets .table .row .info {
    min-width: 130px;
  }
  #app #ranking dialog .table {
    overflow-x: scroll;
  }
  #app #ranking dialog .table .theads .thead:nth-child(even) {
    min-width: 180px;
  }
  #app #ranking dialog .table .row .info:nth-child(even) {
    min-width: 180px;
  }
  #app #ranking dialog .table .theads .thead:nth-child(odd) {
    min-width: 60px;
  }
  #app #ranking dialog .table .row .info:nth-child(odd) {
    min-width: 60px;
  }
  #app #ranking dialog .table .theads .thead:last-of-type {
    min-width: 100px;
  }
  #app #ranking dialog .table .row .info:last-of-type {
    min-width: 100px;
  }
  #app #ranking dialog .close {
    display: none;
  }
  header .centrador button.back {
    padding: 0px 7px;
    left: 16px;
  }
  header .centrador button.back span {
    display: none;
  }
  #app main #add dialog,
  #app main #added dialog {
    padding: 40px 24px;
  }
}