/* VARS */

:root {

    /* Colors */
    --color-primary: #0064E1;
    --color-dark-primary: #093993;
    --color-button: var(--color-primary);
    --color-button-secondary: var(--color-dark-primary);

    --color-yellow: #f4edd2;
    --color-red: #cb0a17;
    --color-success: #9ec702;
    --color-gray: #77777D;
    --color-dark-gray: #5d5d5d;
    --color-white: #fff;
    --color-black: #000;

}
@import "colors.css";

/* MIXINS */
/* COLOR */
/* FONT */
/* EASINGS */
/* TRANSITIONS */
.non-structure-transition,
a,
input[type="submit"],
button {
  transition: color 240ms ease-out, background 240ms ease-out,
    border 240ms ease-out, opacity 240ms ease-out, box-shadow 240ms ease-out;
}

/* STRUCTURE */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/*body {
  line-height: 1;
}*/
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}


/* MIXINS */
/* COLOR */
/* FONT */
/* EASINGS */
/* TRANSITIONS */
.non-structure-transition,
a,
input[type="submit"],
button {
  transition: color 240ms ease-out, background 240ms ease-out,
    border 240ms ease-out, opacity 240ms ease-out, box-shadow 240ms ease-out;
}

/* STRUCTURE */
/* BODY */
body {
  background-color: var(--color-gray);
  background-image: url("images/pattern.png");
  background-size: cover;
  background-position: center top;
  background-repeat: repeat-y;
  height: 100vh;
  font-size: 62.5%;
}

body,
input,
textarea,
select,
button,
.switch {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: var(--color-dark-gray);
}

p {
  text-rendering: optimizeLegibility;
}

strong {
  font-weight: 600;
}

u {
  text-decoration: underline;
}

em {
  font-style: italic;
}

input,
textarea,
select,
button,
.switch {
  border: none;
  outline: none;
  resize: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
button,
.switch {
  -webkit-appearance: none;
}

button {
  overflow: visible;
}

a,
input[type="submit"],
button {
  color: var(--color-gray);
  -webkit-tap-highlight-color: rgba(203, 10, 23, 0);
  outline: none;
  cursor: pointer;
}

/* CHECKBOX */
.switch {
  position: relative;
  display: block;
  width: 38px;
  height: 21px;
  padding-top: 18px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 18px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-gray);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 21px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--color-primary);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--color-primary);
}

input:checked+.slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

/* GENERAL */
.notVisible {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.align-m:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.align-m>.align {
  display: inline-block;
  vertical-align: middle;
}

.img {
  background: no-repeat center/cover;
}

.wrapper {
  width: 100%;
  max-width: 600px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.wrapper:has(.logos-container) {
  max-width: 100%;
}

.wrapper .logos-container {
  max-width: 100%;
  height: 100%;
  vertical-align: middle;
}

.container {
  padding: 40px 0;
}

.container .day {
  margin-top: 40px;
}

.container .day:first-child {
  margin-top: 0;
}

/* Fade - Loading */
.innerload {
  position: relative;
}

.fader .fade {
  opacity: 1;
  transition: opacity 200ms ease-out;
}

.fader .fade.hide {
  opacity: 0;
}

.loader {
  display: none;
  margin-top: 35px;
  text-align: center;
  z-index: 51;
}

.innerload:before,
.loader:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  height: 46px;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--color-white);
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.innerload:before {
  display: none;
  margin: 0 auto;
  margin-top: 35px;
}

.innerload.loading:before,
.loader.loading {
  display: block;
}

.innerload.loading:before,
.loader.loading:before {
  -webkit-animation: loading 700ms linear infinite;
  -moz-animation: loading 700ms linear infinite;
  animation: loading 700ms linear infinite;
}

.subtitle {
  color: var(--color-yellow);
  font-size: 1.3em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.collapse {
  color: var(--color-yellow);
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.collapsable-title {
  display: flex;
  justify-content: space-around;
}

.terms {
  color: var(--color-yellow);
  font-size: 1.2em;
  line-height: 1.2;
  font-weight: normal;
  letter-spacing: 0.08em;
  margin-top: 10px;
  padding: 15px;
  text-align: left;
}

.bordered-item {
  /* background: rgba(40, 56, 179, 0.15); */
  border-radius: 7px;
  /* box-shadow: 0px 4px 0 rgba(25, 11, 14, 0.2); */
}

#profile .bordered-item p.subtitle {
  font-size: 1.2em;
}

#profile .bordered-item ol {
  padding: 20px 0 0px 20px;
}

#profile .terms.rank.bordered-item p {
  padding-top: 20px;
}

#profile .bordered-item li {
  padding-bottom: 20px;
}

#profile .bordered-item li:last-child {
  padding-bottom: 0px;
}

.rules-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  box-shadow: 0px 4px 0 rgba(25, 11, 14, 0.2);
  margin-bottom: 40px;
  display: flex;
  padding: 20px !important;
}

.rules-item img {
  margin: auto;
  max-width: 220px;
  max-height: 300px;
}

/* .bordered-item[data-status="user"] {
  background: rgba(40, 56, 179, 0.6);
  border: 2px solid #89ad05;
  box-shadow: 0px 2px 0 rgb(137 173 5 / 46%);
} */

.bordered-item .loader,
.login .loader {
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bordered-item .loader:before,
.login .loader:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -23px;
  margin-top: -22px;
}

.bordered-item .loader.loading+.holder,
.login .loader.loading+.holder {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.login .loader.loading+.holder {
  opacity: 0.15;
}

.login .loader:before {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--color-gray);
}

.button {
  margin: 0 auto;
  margin-top: 15px;
  padding: 5px 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 20px;
  font-size: 1.15em;
  color: var(--color-white);
  box-shadow: 0px 2px 0 var(--color-black);
}

button:hover,
.button:focus {
  opacity: 0.7;
}

.button.button.random-btn {
  background: var(--color-white);
  margin-right: 20px;
}

.button.random-all-btn {
  margin-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.random-all-btn .icon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 10px !important;
  background: url("images/dices.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.button.button.edit-btn {
  opacity: 0.85;
  box-shadow: 0px 2px 0 var(--color-black);
}

.light-btn {
  background: var(--color-white) !important;
  color: var(--color-dark-primary) !important;
}

.dark-btn {
  background: var(--color-dark-primary) !important;
  color: var(--color-white) !important;
}

.button.save-btn {
  background: var(--color-white);
  box-shadow: 0px 2px 0 var(--color-black);
  color: var(--color-dark-primary);
}

.button.disabled {
  opacity: 0.5;
}

.btn-close {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 15px 30px;
  font-size: 1.2em;
  box-sizing: border-box;
}

.btn-close.disabled:hover {
  opacity: 0.7;
}

.link {
  color: var(--color-gray);
  font-size: 1.2em;
  text-decoration: underline;
}

.link:hover,
.link:focus {
  opacity: 0.7;
}

.banner {
  display: block;
  max-width: 380px;
  height: 80px;
  margin: 40px auto;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
}

.banner img {
  max-width: 300px;
}

.placeholder {
  color: var(--color-yellow);
  text-align: center;
  max-width: 220px;
  margin-inline: auto;
  margin-top: 20px;
}

.placeholder .icon {
  display: block;
  font-size: 70px;
  margin-bottom: 20px;
}

.placeholder .title {
  display: block;
  font-size: 7em;
  text-transform: uppercase;
  line-height: 1.2;
}

.placeholder .text {
  font-size: 1.4em;
}

#jugadores .styled-form {
  max-width: 300px;
  margin: auto;
  padding: 0 30px 30px 30px;
}

#jugadores .select-group {
  color: var(--color-yellow) !important;
}

#jugadores .styled-form .label .select-holder:after {
  border-color: var(--color-yellow) !important;
}

/* STYLED FORM */
.styled-form {
  margin-top: 25px;
}

.styled-form .label {
  display: block;
  position: relative;
  margin-top: 15px;
  padding-bottom: 12px;
  cursor: pointer;
  text-transform: uppercase;
  border-bottom: 1px solid #e8e7e7;
}

.styled-form .label .text {
  position: absolute;
  top: 0;
  /*z-index: 1;*/
  color: var(--color-gray);
  font-size: 1em;
  letter-spacing: 0.1em;
  opacity: 0.3;
  text-align: left;
  transition: opacity 300ms ease-out;
}

.styled-form .label .input,
.styled-form .label select {
  display: block;
  width: 100%;
  padding-top: 18px;
  position: relative;
  z-index: 0;
  font-size: 1.4em;
  color: var(--color-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.styled-form .label .select-holder {
  position: relative;
}

.styled-form .label .select-holder:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: 3px;
  width: 6px;
  height: 6px;
  border: solid #0f507c;
  border-width: 0 2px 2px 0;
  -webkit-transition: border-color 200ms ease-out;
  -o-transition: border-color 200ms ease-out;
  transition: border-color 200ms ease-out;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  pointer-events: none;
}

.styled-form .label select {
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}

.styled-form .label .input:focus+.text {
  opacity: 1;
}

.styled-form .label .input[disabled="disabled"] {
  color: var(--color-gray) !important;
  opacity: 0.7 !important;
}

.styled-form .label .input::-webkit-input-placeholder {
  font-style: italic;
  color: var(--color-gray);
  opacity: 0.8;
}

.styled-form .label .input:-moz-placeholder {
  font-style: italic;
  color: var(--color-gray);
  opacity: 0.8;
}

.styled-form .label .input::-moz-placeholder {
  font-style: italic;
  color: var(--color-gray);
  opacity: 0.8;
}

.styled-form .label -ms-input-placeholder {
  font-style: italic;
  color: var(--color-gray);
  opacity: 0.8;
}

.styled-form label.error {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.2em;
  color: var(--color-red);
}

.styled-form label.success {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.2em;
  color: var(--color-yellow);
}

.styled-form .submit-holder {
  margin-top: 20px;
  text-align: center;
}

.styled-form .input.select-pais {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 6px 0;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.styled-form .input.select-pais input {
  position: absolute;
  left: -999999px;
  top: -9999999px;
}

.styled-form .input.select-pais .container {
  opacity: 0.4;
}

.styled-form .input.select-pais .holder {
  display: inline-block;
  vertical-align: middle;
  width: 37px;
  height: 24px;
  background-size: cover;
}

.styled-form .input.select-pais input[type="radio"]:checked+.container {
  opacity: 1;
}

.styled-form .input.select-pais .name {
  font-size: 0.9em;
}

#toast {
  display: none;
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 90px;
  z-index: 400;
  opacity: 0;
  text-align: center;
  transition: transform 500ms ease-out, opacity 300ms ease-out;
}

#toast.show {
  display: block;
  margin: 0 auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 350ms ease-out, opacity 300ms ease-out;
}

#toast .text {
  padding: 13px 20px;
  z-index: 1;
  border-radius: 30px;
  color: var(--color-gray);
  font-size: 1.2em;
  box-sizing: border-box;
  background-color: var(--color-white);
  box-shadow: 0px 15px 25px -5px rgba(0, 0, 0, 0.3);
}

#toast.error .text {
  color: var(--color-red);
}

#toast.success .text {
  color: var(--color-success);
}

/* HEADER */
#header {
  height: 60px;
}

#header .holder {
  width: 100%;
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  background: var(--color-white);
}

#header .top {
  height: 60px;
  text-align: center;
}

#header .top .logo,
.login .logo .img {
  display: block;
  width: 162px;
  position: relative;
  top: -1px;
  background: no-repeat center/contain;
  background-image: url("images/iso.png");
}

#header .top .logo:not(.logos-container .logo):before,
.login .logo .img:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 18.085%;
}

#header .top .logos-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#header .top .logos-container .logo {
  background-repeat: no-repeat;
  background-size: contain;
}

/* Aumentamos la especificidad para el logo-left */
#header .top .logos-container .logo.logo-left {
  background-image: none !important;
  height: 60px;
  width: auto;
  color: var(--color-primary);
}

#header .top .logos-container .logo-left svg {
  height: 100%;
  width: auto;
  fill: currentColor;
  display: block;
}

#header .top .logo-right {
  background-image: url("images/iso.png") !important;
  height: 40px;
  background-position: right;
  color: var(--color-primary);
}


/* TABS */
#tabs {
  height: 45px;
}

#tabs .holder {
  height: 45px;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  background: var(--color-gray);
  z-index: 50;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
}

#tabs .tab {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

#tabs .tab.three {
  width: 33.33333%;
}

#tabs .tabs.three {
  width: 33.33333%;
}

#tabs .tab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

#tabs .holder.three:before,
#tabs .holder.three:after {
  content: "";
  position: absolute;
  left: 33.33333%;
  height: 100%;
  width: 1px;
  background: var(--color-black);
  opacity: 0.15;
}

#tabs .holder.three:after {
  left: 66.66666%;
}

#tabs .tab.active:before {
  opacity: 0.4;
  transition: opacity 300ms ease-out;
}

#tabs .tab .icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  font-size: 1.6em;
  color: var(--color-white);
  opacity: 0.6;
}

#tabs .tab .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.1em;
  color: var(--color-white);
  opacity: 0.8;
}

#tabs .tab.active .text {
  font-weight: 600;
  opacity: 1;
}

#tabs .tab.active .icon {
  opacity: 1;
}

#tabs .tab.active .text {
  font-weight: 600;
  opacity: 1;
}

#tabs .tab.active .icon {
  opacity: 1;
}

#tabs.tabs-group {
  margin-top: 20px;
}

#tabs.tabs-group .holder {
  position: relative;
  overflow: hidden;
}

.view-content {
  display: none;
  opacity: 0;
  transform: translate3d(0, -80px, 0);
  transition: transform 300ms ease-in, opacity 300ms ease-out;
}

.view-content.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 450ms ease-out, opacity 400ms ease-out;
}

/* MATCHES LIST */
.matches-list {
  margin-top: 20px;
}

.matches-list .match {
  margin-top: 20px;
  padding: 22px 15px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
}

.matches-list .match[data-status="notplayed"] {
  opacity: 0.5;
}

.matches-list .match:first-child {
  margin-top: 0;
}

.matches-list .match .info {
  text-align: center;
  font-size: 1.2em;
  color: var(--color-yellow);
  text-transform: uppercase;
}

.matches-list .match .info span {
  display: block;
  margin-top: 3px;
  font-size: 0.9em;
}

.matches-list .match .content {
  margin-top: 10px;
}

.matches-list .match .inline,
.matches-list .match .country,
.matches-list .match .input-holder {
  display: inline-block;
  vertical-align: middle;
}

.matches-list .match .icon {
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.matches-list .match .name {
  display: block;
  margin-top: 5px;
  color: var(--color-yellow);
  font-size: 1.4em;
  font-weight: 600;
  text-transform: uppercase;
}

.matches-list .match .input {
  width: 33px;
  height: 33px;
  margin: 0 6px;
  border-radius: 5px;
  color: var(--color-white);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
  line-height: 33px;
  transition: background 300ms ease-out, box-shadow 300ms ease-out;
}

.matches-list .match .input:focus {
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.53);
}

.matches-list .match .input[disabled="disabled"] {
  color: var(--color-white) !important;
  opacity: 1 !important;
}

.matches-list .match[data-status="changing"] .input {
  background: rgba(25, 11, 14, 0.22);
}

.matches-list .match .result {
  display: block;
  font-size: 1.2em;
  color: var(--color-yellow);
}

.matches-list .match .versus {
  padding: 8px;
  background: rgba(81, 31, 37, 0.3);
  border-radius: 50%;
  font-size: 1.4em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-yellow);
  box-sizing: border-box;
  box-shadow: 0px 2px 0 rgba(25, 11, 14, 0.4);
}

.matches-list .match[data-status="changing"] .button.edit-btn {
  display: none;
}

.matches-list .match[data-status="showing"] .button.save-btn {
  display: none;
}

.matches-list .match .share {
  margin-top: 24px;
  color: var(--color-yellow);
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.share .icon {
  margin-right: 2px;
}

.matches-list .match .final-result {
  font-style: italic;
  color: var(--color-yellow);
  font-size: 1.2em;
  margin-top: 5px;
}

.matches-list .match label.error {
  display: block;
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-yellow);
}

/* GROUP LIST */
.group-list {
  counter-reset: ranking;
}

.group-container {
  margin-bottom: 50px;
}

/* RANKING LIST */
.ranking-list {
  counter-reset: ranking;
}

.ranking-list .rank {
  position: relative;
  margin-top: 20px;
  padding: 30px 20px;
  box-sizing: border-box;
  border-radius: 1.1rem;
  counter-increment: ranking;
}

.ranking-list .rank:first-child {
  margin-top: 20px;
}

.ranking-list .rank .text {
  padding: 0 70px 0 50px;
  position: relative;
  box-sizing: border-box;
}

.ranking-list .rank .mini {
  padding: 0 105px 0 50px !important;
}

.ranking-list .rank .text:before,
.ranking-list .rank .before {
  content: counter(ranking);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  font-size: 1.6em;
  line-height: 0.8;
  font-weight: 600;
  color: var(--color-yellow);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
}

.ranking-list .rank .xs-number .before {
  font-size: 0.9em !important;
}

.ranking-list .rank .sm-number .before {
  font-size: 1.4em !important;
}


.ranking-list .rank.champion .text:before {
  content: "";
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAM1BMVEUAAAD07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dL07dKsTPnGAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAApVJREFUeAHNlYGuo7wOhJ1gEhOceN7/aS8JWC3atHSlu9L/SW0DZDTjyTmC/m8IHpF/JJ4/e9gQVxHh+ItzZBFZIzmh4MTwiG8p4bI1QEVE+y99RQEbWwGL1516pcjP4nwZ1nMrwwJxUdVtQ6WvVGybqhamYGAi2rBRhkNfgZO7bEThCAgziz6LdWwEIkOHOAqKz8T0hcU7KZA41gAJ0k9idnGC0EhZXfz0J+aPXVxPN79J2fPP2fykBOIz8wp95fqCgn2xnlsLcoTRIHyv2xB8Ec+Qgo0aFur4Yk5E89YbbZARtVLBRoMdiT6yYvfZC9VzBCCuaN7Etmzrx77E860RuNwyGU4Fo8qnxt2MVhjlK0VCI/GagZ5iipuRQqj5fIYUjo8PbYg0I8HNLBwf8kEbZdiQZOwFmSZ4mdGQqfn4FPpSUcOZLc1zB4xEoUK7XXidAZZgp1p7bp6m1lNrYUHv1yn9zqFeRn0CnXadiJZD233Ke6SKGpYGSOz1YWLNMIoCtGVsppu6390BVINuskz+KawC2LvHm9bVloh3dNZkQndWdHamZK59o9sqE3Ha0RJw9w4Ne+pPtZvTn2QDNMVeTdkK3SioRDEpYJmmxIKONiDTjQw0RadE+gMWHunSbhik+xEPbE/h6d3JzNkn8zYyM9MUd7572Xr1bO85oiR6ZFHYMhYGXd6PrHKgR3bs/vNCccD0Ec/FgBzc924V5kFmQOmKe2HL5I3z3blCZaCo9CLwQs8AYf4ieGbu/DP8mtkbmyaen3/0tuOtyjkho/J9av++0O1zThzMxc8sFaYemQ+A13ekGfPzF9yB0O8Imr7R/lIs88sn5ECh4rwu6Rl8hJ5BkyntJ7HSFP2Piz/yr8V/wf8A5DI31Z9tUO4AAAAASUVORK5CYII=);
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank.my-group .text:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 388.227 388.227' style='enable-background:new 0 0 388.227 388.227;fill: %23fff;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M194.113,190.505c36.691,0,66.438-36.129,66.438-80.695c0-44.567-9.768-80.696-66.438-80.696 c-56.672,0-66.438,36.129-66.438,80.696C127.676,154.376,157.422,190.505,194.113,190.505z'/%3E%3Cpath d='M319.455,310.459c-1.229-77.637-11.369-99.759-88.959-113.763c0,0-10.924,13.917-36.381,13.917 c-25.457,0-36.379-13.917-36.379-13.917c-76.744,13.85-87.502,35.645-88.916,111.24c-0.115,6.173-0.168,6.497-0.189,5.78 c0.004,1.343,0.01,3.826,0.01,8.157c0,0,18.473,37.239,125.475,37.239s125.477-37.239,125.477-37.239 c0-2.782,0.002-4.718,0.004-6.033C319.576,316.283,319.533,315.424,319.455,310.459z'/%3E%3Cpath d='M286.313,176.097c29.801,0,53.959-29.343,53.959-65.539c0-36.197-7.932-65.54-53.959-65.54 c-7.742,0-14.404,0.833-20.135,2.388c10.631,19.598,12.088,43.402,12.088,62.403c0,21.514-5.832,42.054-16.572,59.061 C269.076,173.48,277.441,176.097,286.313,176.097z'/%3E%3Cpath d='M388.111,273.521c-1-63.055-9.234-81.022-72.252-92.396c0,0-8.871,11.304-29.547,11.304c-0.855,0-1.684-0.026-2.5-0.063 c13.137,5.923,25.088,14.17,33.889,26.238c15.215,20.863,18.713,48.889,19.435,90.062c42.397-8.378,51.086-25.873,51.086-25.873 c0-2.28,0-3.844,0.004-4.913C388.209,278.256,388.174,277.582,388.111,273.521z'/%3E%3Cpath d='M101.912,176.097c8.873,0,17.236-2.617,24.621-7.226c-10.74-17.007-16.572-37.547-16.572-59.061 c0-19.002,1.457-42.806,12.086-62.403c-5.73-1.555-12.391-2.388-20.135-2.388c-46.027,0-53.957,29.343-53.957,65.54 C47.955,146.754,72.113,176.097,101.912,176.097z'/%3E%3Cpath d='M104.412,192.365c-0.814,0.037-1.643,0.063-2.5,0.063c-20.676,0-29.547-11.304-29.547-11.304 c-63.016,11.374-71.252,29.34-72.25,92.396c-0.065,4.062-0.098,4.735-0.115,4.358c0.002,1.069,0.004,2.633,0.004,4.913 c0,0,8.69,17.495,51.084,25.873c0.725-41.172,4.221-69.198,19.438-90.062C79.326,206.536,91.275,198.288,104.412,192.365z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  border-radius: 0;
  opacity: .8;
  background-color: transparent;
  background-size: contain;
}

.rank .group-stat {
  color: var(--color-yellow);
  padding-top: 3px;
  font-size: 1.3em;
}

.ranking-list .rank.estrella .text:before {
  content: "";
  background-image: url("images/estrella.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank.ok .text:before {
  content: "";
  background-image: url("images/ok.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank.mira .text:before {
  content: "";
  background-image: url("images/mira.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank.pelota .text:before {
  content: "";
  background-image: url("images/pelota.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank.error .text:before {
  content: "";
  background-image: url("images/error.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

.ranking-list .rank .text .subtitle,
.ranking-list .rank .text .caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.ranking-list .rank .text .caption {
  margin-top: 3px;
  color: var(--color-yellow);
  text-transform: uppercase;
  font-size: 1.1em;
}

.ranking-list .rank .text .points {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-bottom: -2px;
  transform: translateY(-50%);
  margin-top: 1px;
  text-align: right;
  font-size: 1em;
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
}

.ranking-list .rank .text .share {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 1px;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: normal;
}

.ranking-list .rank .text .points .num {
  display: block;
  font-size: 2em;
  line-height: 0.8;
  position: relative;
  right: -2px;
  margin-bottom: 2px;
}

.ranking-list .rank .text .points .stat {
  font-size: 2em;
  line-height: 0.8;
  position: relative;
  margin-right: 2px;
}

.ranking-list .rank .text .win {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  margin-bottom: -2px;
  transform: translateY(-50%);
  margin-top: 1px;
  text-align: right;
  font-size: 1em;
  color: var(--color-white);
  font-weight: 600;
}

.ranking-list .rank .text .win .prize {
  display: block;
  line-height: 0.8;
  position: relative;
  right: -2px;
  margin-bottom: 2px;
}

.ranking-list .rank.outside {
  margin-top: 80px;
}

.ranking-list .rank.outside:before {
  content: "";
  position: absolute;
  top: -52px;
  left: 50%;
  margin-left: -4px;
  height: 36px;
  background-repeat: repeat-y;
  width: 8px;
  background-image: url("images/outside.png");
  background-size: contain;
}

.ranking-list .rank.outside .text:before {
  content: "" !important;
}

.ranking-list .rank .before {
  content: "" !important;
}

/* PROFILE */
.profile #header .holder {
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
}

#profile .container {
  background: var(--color-white);
}

#profile .user-container {
  padding: 30px 0;
}

#profile .user-container:last-child {
  padding-top: 0px;
}

.points {
  color: #89ad05;
}

#profile .user-container .ranking-list .rank .text {
  padding-left: 0;
}

#profile .user-container .ranking-list .rank .text:before {
  display: none;
}

#profile .info .subtitle {
  color: var(--color-primary);
  text-align: left;
}

#profile .styled-form[data-status="editing"] .button.edit-btn {
  display: none;
}

#profile .styled-form[data-status="showing"] .button.save-btn {
  display: none;
}

#profile .close-btn {
  display: block;
  margin-top: 30px;
}

/* LOGIN */
.login .align-m {
  height: 100vh;
}

.login .align {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  box-sizing: border-box;
}

.login .align .logo-penca svg {
  display: block;
  margin: 0 auto;
  width: 50px;
}

.login .align .logo-penca .img {
  display: block;
  margin: 0 auto;
  padding-bottom: 45%;
  background-image: url("images/logo-penca-2026.svg");
  background-size: 35%;
}

.login .align .bg {
  position: relative;
  margin-top: 45px;
  padding: 35px 30px;
  background: var(--color-white);
  text-align: left;
  box-sizing: border-box;
}

.login .align .logo .img {
  width: 189px;
  margin: 0 auto;
}

.login .align .inputs {
  margin: 30px 0;
}

.login .align .links {
  margin-top: 20px;
  text-align: center;
}

.login .align .submit-holder {
  margin-top: 0;
}

.login .align .styled-form {
  box-shadow: 0 13px 31px rgba(0, 0, 0, 0.25);
}

/* Group */
.group .align {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.group .align-message label.success {
  color: var(--color-gray);
  width: 100%;
}

.group .align-message strong.success {
  color: var(--color-primary);
  display: inline-block;
  margin-top: 10px;
  font-size: 1.2em;
}

.group .align-message {
  padding: 15px 15px 25px 15px;
  background: #f5f3f3;
}

.group .align .bg {
  position: relative;
  margin-top: 45px;
  padding: 35px 30px;
  background: var(--color-white);
  text-align: left;
  box-sizing: border-box;
}

.group .align .inputs {
  margin: 30px 0;
}

.group .align .submit-holder {
  margin-top: 0;
}

.group .align .styled-form {
  box-shadow: 0 13px 31px rgba(0, 0, 0, 0.25);
}

.group .subtitle {
  margin-top: 25px;
  color: var(--color-gray);
}

.group .skip-btn {
  margin-top: 30px;
}

/* POLITICA */
#politica .content h2,
#politica .content h3,
#politica .content h4 {
  color: var(--color-white);
  font-weight: 700;
}

#politica .content h2 {
  font-size: 2.2em;
}

#politica .content h3 {
  font-size: 1.8em;
}

#politica .content h4 {
  font-size: 1.6em;
}

#politica .content p,
#politica .content a {
  margin-top: 10px;
  color: var(--color-white);
  font-size: 1.4em;
}

#politica .content a {
  font-weight: 700;
  text-decoration: underline;
}

#politica .content img {
  display: block;
  width: 100%;
  margin: 20px 0;
}

#politica .content ul {
  margin-top: 15px;
}

#politica .content ul li {
  color: var(--color-white);
  font-size: 1.4em;
  position: relative;
  padding-left: 12px;
}

#politica .content ul li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--color-white);
}

/* TEAM SELECT */
.login .subtitle {
  margin-top: 25px;
  color: var(--color-gray);
}

.login .teams-list {
  margin-top: 30px;
}

.login .teams-list .team {
  position: relative;
  text-align: left;
  border-bottom: 1px solid #e8e7e7;
}

.login .teams-list .team:hover {
  background: #e8e7e7;
}

.login .teams-list .team label {
  display: block;
  padding: 25px 15px;
  box-sizing: border-box;
  cursor: pointer;
}

.login .teams-list .team .input {
  position: absolute;
  top: -99999px;
  left: -999999px;
}

.login .teams-list .team .icon {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -18px;
  left: 15px;
  width: 36px;
  height: 36px;
}

.login .teams-list .team .name {
  display: inline-block;
  max-width: 100%;
  padding-left: 50px;
  color: var(--color-dark-gray);
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  transition: color 300ms ease-out, font-weight 300ms ease-out;
}

.login .teams-list .team .input[type="radio"]:checked+.name {
  color: var(--color-yellow);
  font-weight: 600;
  position: relative;
}

.login .teams-list .team .input[type="radio"]:checked+.name:after {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e905";
  font-size: 12px;
  color: var(--color-red);
  margin-left: 8px;
}

/* FOOTER */
#footer {
  height: 50px;
}

#footer .holder {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0 -13px 31px rgba(0, 0, 0, 0.15);
}

#footer .holder:before,
#footer .holder:after {
  content: "";
  position: absolute;
  left: 33.33333%;
  height: 100%;
  width: 1px;
  background: var(--color-dark-gray);
  opacity: 0.15;
}

#footer .holder:after {
  left: 66.66666%;
}

#footer .tab {
  display: inline-block;
  vertical-align: top;
  width: 33.33333%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

#footer .tab.active:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
}

#footer .tab .icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  font-size: 1.6em;
  color: var(--color-dark-gray);
  transition: color 300ms ease-out;
}

#footer .tab .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 1em;
  color: var(--color-dark-gray);
  transition: color 300ms ease-out;
}

#footer .tab.active .text {
  font-weight: 600;
  color: var(--color-primary);
}

#footer .tab.active .icon {
  color: var(--color-primary);
}

@media (max-width: 375px) {
  .align-m:before {
    display: none;
  }
}


@media (min-width: 375px) {

  .top .align-m:before {
    display: none;
  }

  /* MATCHES LIST */
  .matches-list .match .input {
    margin: 0 12px;
  }
}

@media (min-width: 540px) {
  .styled-form .input.select-pais {
    width: 50%;
  }

  .rules-item img {
    max-width: 220px;
  }

  .banner img {
    max-width: 380px;
  }
}

@media (min-width: 768px) {
  .login .align-m .align {
    padding-top: 30px;
  }

  .login .align .logo-penca {
    display: block;
    margin: 0 auto;
    width: 250px;
  }

  /* TABS */
  #tabs .tab .text {
    font-size: 1.3em;
  }

  /* FOOTER */
  #footer .tab .text {
    font-size: 1.3em;
  }

  #footer .tab.active:before {
    height: 4px;
  }
}

@media (min-width: 980px) {
  .subtitle {
    font-size: 1.6em;
  }

  .container {
    padding: 60px 0;
  }

  .container .day {
    margin-top: 60px;
  }

  /* HEADER */
  #header,
  #header .holder,
  #header .holder .top,
  #header .holder .top .logos-container {
    height: 80px;
  }

  #header .holder .top .logo {
    width: 202px;
  }

  /* TABS */
  #tabs .holder {
    top: 80px;
  }

  #tabs.tabs-group .holder {
    top: 60px;
  }

  /* PROFILE */
  #profile .container {
    padding: 55px 0;
  }

  .login .align .bg {
    padding: 35px 60px;
  }

  .login .align .logo-penca .img {
    padding-bottom: 70%;
    background-size: 65%;
  }
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* MIXINS */
/* COLOR */
/* FONT */
/* EASINGS */
/* TRANSITIONS */
.non-structure-transition,
a,
input[type="submit"],
button {
  transition: color 240ms ease-out, background 240ms ease-out,
    border 240ms ease-out, opacity 240ms ease-out, box-shadow 240ms ease-out;
}

/* STRUCTURE */
body {
  background-color: var(--color-primary);
}

body,
input,
textarea,
select,
button,
.switch {
  font-family: "Poppins", sans-serif;
}

.button,
.btn-close {
  background: var(--color-button);
}

/* TEAMS LIST */
.login .teams-list .team label {
  text-align: center;
}

.login .teams-list .team .name {
  padding-left: 0;
  font-size: 1.4em;
}

/* LOGO */
#header .top .logo:not(.logos-container .logo),
.login .logo .img:not(.logos-container .logo) {
  width: 250px;
}

.login .subtitle {
  margin-top: 30px;
}

/* TABS */
#tabs .holder {
  background: var(--color-primary);
}

#tabs .tab.active:before {
  opacity: 0.4;
}

/* BORDERED ITEM */
.bordered-item {
  border-radius: 1.1rem;
  background: hsl(from var(--color-dark-primary) h s l / 70%);
}

.bordered-item[data-status="user"] {
  background: hsl(213 100% 44% / 45%);
}

/* MATCHES LIST */
.matches-list .match[data-status="changing"] .input {
  background-color: rgba(0, 0, 0, 0.31);
}

.matches-list .match .versus {
  background: rgba(0, 0, 0, 0.25);
}

#ranking .wrapper,
#profile .wrapper {
  padding-bottom: 30px;
}

/* RANKING */
.ranking #header .holder {
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {

  /* LOGO */
  #header .top .logo,
  .login .logo .img {
    width: 250px !important;
  }
}

/* Flags */
.flag-qtr {
  background-image: url("images/teams/qatar.png");
}

.flag-can {
  background-image: url("images/teams/canada.png");
}

.flag-cmr {
  background-image: url("images/teams/camerun.png");
}

.flag-gha {
  background-image: url("images/teams/ghana.png");
}

.flag-cro {
  background-image: url("images/teams/croacia.png");
}

.flag-rus {
  background-image: url("images/teams/russia.png");
}

.flag-ksa {
  background-image: url("images/teams/arabiasaudita.png");
}

.flag-egi,
.flag-egy {
  background-image: url("images/teams/egipto.png");
}

.flag-hol {
  background-image: url("images/teams/paisesbajos.png");
}

.flag-uru {
  background-image: url("images/teams/uruguay.png");
}

.flag-chl {
  background-image: url("images/teams/chile.png");
}

.flag-jam {
  background-image: url("images/teams/jamaica.png");
}

.flag-pry {
  background-image: url("images/teams/paraguay.png");
}

.flag-srb {
  background-image: url("images/teams/serbia.png");
}

.flag-usa {
  background-image: url("images/teams/estadosunidos.png");
}

.flag-por {
  background-image: url("images/teams/portugal.png");
}

.flag-esp {
  background-image: url("images/teams/espana.png");
}

.flag-mar {
  background-image: url("images/teams/marruecos.png");
}

.flag-irn {
  background-image: url("images/teams/iran.png");
}

.flag-fra {
  background-image: url("images/teams/francia.png");
}

.flag-aus {
  background-image: url("images/teams/australia.png");
}

.flag-per {
  background-image: url("images/teams/peru.png");
}

.flag-din {
  background-image: url("images/teams/dinamarca.png");
}

.flag-arg {
  background-image: url("images/teams/argentina.png");
}

.flag-isl {
  background-image: url("images/teams/islandia.png");
}

.flag-nig {
  background-image: url("images/teams/nigeria.png");
}

.flag-bra {
  background-image: url("images/teams/brasil.png");
}

.flag-sui {
  background-image: url("images/teams/suiza.png");
}

.flag-cri {
  background-image: url("images/teams/costarica.png");
}

.flag-ser {
  background-image: url("images/teams/serbia.png");
}

.flag-ale {
  background-image: url("images/teams/alemania.png");
}

.flag-mex {
  background-image: url("images/teams/mexico.png");
}

.flag-sue {
  background-image: url("images/teams/suecia.png");
}

.flag-kor {
  background-image: url("images/teams/coreadelsur.png");
}

.flag-bel {
  background-image: url("images/teams/belgica.png");
}

.flag-pan {
  background-image: url("images/teams/panama.png");
}

.flag-tun {
  background-image: url("images/teams/tunez.png");
}

.flag-ing {
  background-image: url("images/teams/inglaterra.png");
}

.flag-pol {
  background-image: url("images/teams/polonia.png");
}

.flag-sen {
  background-image: url("images/teams/senegal.png");
}

.flag-col {
  background-image: url("images/teams/colombia.png");
}

.flag-jpn {
  background-image: url("images/teams/japon.png");
}

.flag-bol {
  background-image: url("images/teams/bolivia.png");
}

.flag-chi {
  background-image: url("images/teams/chile.png");
}

.flag-ecu {
  background-image: url("images/teams/ecuador.png");
}

.flag-par {
  background-image: url("images/teams/paraguay.png");
}

.flag-ven {
  background-image: url("images/teams/venezuela.png");
}

.flag-dom {
  background-image: url("images/teams/dominicana.png");
}

.flag-gua {
  background-image: url("images/teams/guatemala.png");
}

.flag-hon {
  background-image: url("images/teams/honduras.png");
}

.flag-sal {
  background-image: url("images/teams/salvador.png");
}

.flag-nic {
  background-image: url("images/teams/nicaragua.png");
}

.flag-gal {
  background-image: url("images/teams/gales.png");
}

.flag-alg,
.flag-dza {
  background-image: url("images/teams/argelia.png");
}

.flag-aut {
  background-image: url("images/teams/austria.png");
}

.flag-cpv {
  background-image: url("images/teams/caboverde.png");
}

.flag-civ {
  background-image: url("images/teams/costademarfil.png");
}

.flag-cuw {
  background-image: url("images/teams/curazao.png");
}

.flag-hai,
.flag-hti {
  background-image: url("images/teams/haiti.png");
}

.flag-jor {
  background-image: url("images/teams/jordania.png");
}

.flag-nor {
  background-image: url("images/teams/noruega.png");
}

.flag-nzl {
  background-image: url("images/teams/nuevazelanda.png");
}

.flag-rsa,
.flag-zaf,
.flag-sud {
  background-image: url("images/teams/sudafrica.png");
}

.flag-uzb {
  background-image: url("images/teams/uzbekistan.png");
}

.flag-sco {
  background-image: url("images/teams/escocia.png");
}

.flag-cmr {
  background-image: url("images/teams/camerun.png");
}

.flag-gha {
  background-image: url("images/teams/ghana.png");
}

.flag-cro {
  background-image: url("images/teams/croacia.png");
}

.flag-rus {
  background-image: url("images/teams/russia.png");
}

.flag-ksa {
  background-image: url("images/teams/arabiasaudita.png");
}

.flag-egi {
  background-image: url("images/teams/egipto.png");
}

.flag-hol {
  background-image: url("images/teams/paisesbajos.png");
}

.flag-uru {
  background-image: url("images/teams/uruguay.png");
}

.flag-chl {
  background-image: url("images/teams/chile.png");
}

.flag-jam {
  background-image: url("images/teams/jamaica.png");
}

.flag-pry {
  background-image: url("images/teams/paraguay.png");
}

.flag-srb {
  background-image: url("images/teams/serbia.png");
}

.flag-usa {
  background-image: url("images/teams/estadosunidos.png");
}

.flag-por {
  background-image: url("images/teams/portugal.png");
}

.flag-esp {
  background-image: url("images/teams/espana.png");
}

.flag-mar {
  background-image: url("images/teams/marruecos.png");
}

.flag-irn {
  background-image: url("images/teams/iran.png");
}

.flag-fra {
  background-image: url("images/teams/francia.png");
}

.flag-aus {
  background-image: url("images/teams/australia.png");
}

.flag-per {
  background-image: url("images/teams/peru.png");
}

.flag-din {
  background-image: url("images/teams/dinamarca.png");
}

.flag-arg {
  background-image: url("images/teams/argentina.png");
}

.flag-isl {
  background-image: url("images/teams/islandia.png");
}

.flag-nig {
  background-image: url("images/teams/nigeria.png");
}

.flag-bra {
  background-image: url("images/teams/brasil.png");
}

.flag-sui {
  background-image: url("images/teams/suiza.png");
}

.flag-cri {
  background-image: url("images/teams/costarica.png");
}

.flag-ser {
  background-image: url("images/teams/serbia.png");
}

.flag-ale {
  background-image: url("images/teams/alemania.png");
}

.flag-mex {
  background-image: url("images/teams/mexico.png");
}

.flag-sue {
  background-image: url("images/teams/suecia.png");
}

.flag-kor {
  background-image: url("images/teams/coreadelsur.png");
}

.flag-bel {
  background-image: url("images/teams/belgica.png");
}

.flag-pan {
  background-image: url("images/teams/panama.png");
}

.flag-tun {
  background-image: url("images/teams/tunez.png");
}

.flag-ing {
  background-image: url("images/teams/inglaterra.png");
}

.flag-pol {
  background-image: url("images/teams/polonia.png");
}

.flag-sen {
  background-image: url("images/teams/senegal.png");
}

.flag-col {
  background-image: url("images/teams/colombia.png");
}

.flag-jpn {
  background-image: url("images/teams/japon.png");
}

.flag-bol {
  background-image: url("images/teams/bolivia.png");
}

.flag-chi {
  background-image: url("images/teams/chile.png");
}

.flag-ecu {
  background-image: url("images/teams/ecuador.png");
}

.flag-par {
  background-image: url("images/teams/paraguay.png");
}

.flag-ven {
  background-image: url("images/teams/venezuela.png");
}

.flag-dom {
  background-image: url("images/teams/dominicana.png");
}

.flag-gua {
  background-image: url("images/teams/guatemala.png");
}

.flag-hon {
  background-image: url("images/teams/honduras.png");
}

.flag-sal {
  background-image: url("images/teams/salvador.png");
}

.flag-nic {
  background-image: url("images/teams/nicaragua.png");
}

.flag-gal {
  background-image: url("images/teams/gales.png");
}

.flag-alg {
  background-image: url("images/teams/argelia.png");
}

.flag-aut {
  background-image: url("images/teams/austria.png");
}

.flag-cpv {
  background-image: url("images/teams/caboverde.png");
}

.flag-civ {
  background-image: url("images/teams/costademarfil.png");
}

.flag-cuw {
  background-image: url("images/teams/curazao.png");
}

.flag-hai {
  background-image: url("images/teams/haiti.png");
}

.flag-jor {
  background-image: url("images/teams/jordania.png");
}

.flag-nor {
  background-image: url("images/teams/noruega.png");
}

.flag-nzl {
  background-image: url("images/teams/nuevazelanda.png");
}

.flag-rsa {
  background-image: url("images/teams/sudafrica.png");
}

.flag-uzb {
  background-image: url("images/teams/uzbekistan.png");
}

.flag-sco {
  background-image: url("images/teams/escocia.png");
}
.flag-cze {
  background-image: url("images/teams/cze.png");
}
.flag-bih {
  background-image: url("images/teams/bih.png");
}
.flag-tur {
  background-image: url("images/teams/tur.png");
}
.flag-swe {
  background-image: url("images/teams/swe.png");
}
.flag-irq {
  background-image: url("images/teams/irq.png");
}
.flag-cod {
  background-image: url("images/teams/cod.png");
}

@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?roazc");
  src: url("fonts/icomoon.eot?roazc#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?roazc") format("truetype"),
    url("fonts/icomoon.woff?roazc") format("woff"),
    url("fonts/icomoon.svg?roazc#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-compartir:before {
  content: "\e905";
}

.icon-correct:before {
  content: "\e907";
}

.icon-creargrupos:before {
  content: "\e902";
}

.icon-finalizados:before {
  content: "\e90b";
}

.icon-general:before {
  content: "\e903";
}

.icon-juez:before {
  content: "\e90a";
}

.icon-misgrupos:before {
  content: "\e901";
}

.icon-perfil:before {
  content: "\e908";
}

.icon-pronosticar:before {
  content: "\e909";
}

.icon-proximos:before {
  content: "\e900";
}

.icon-ranking:before {
  content: "\e906";
}

.icon-unirme:before {
  content: "\e904";
}

.developer-by {
  color: #bfbdbd;
  font-size: 1.1em;
  margin-top: 10px;
}

.developer-by a {
  color: #bfbdbd;
  font-weight: bold;
}