/* VARS */

:root {

    /* Colors */
    --color-primary: #1043FA;
    --color-primary-100: #3272F0;
    --color-primary-300: #2D58F5;
    --color-primary-400: #1043FA;
    --color-primary-450: #0F2BD6;
    --color-primary-500: #0228B9;
    --color-primary-600: #0D0095;
    --color-primary-700: #0E0C84;
    --color-primary-800: #0A095B;
    
    --color-primary-op-600: #3E5EF2;

    --color-primary-hsl: 227 96% 52%;
    
    --color-primary-op-600-hsl: 229 87% 60%;
    --color-dark-primary: #EAF3FE;
    
    --color-button: #21A35B;
    --color-button-secondary: var(--color-dark-primary);

    --color-yellow: #f4edd2;
    --color-red: #cb0a17;
    --color-success: #21A35B;
    --color-gray: #77777D;
    --color-dark-gray: #5d5d5d;

    --color-grey-100: #F7F7F7;
    --color-grey-200:#E9E9E9;

    /* Partido en edición: fondo que contraste con la tarjeta blanca */
    --color-match-editing-bg: #dff5e8;

    --color-white: #fff;
    --color-black: #0A0A16;

    --color-black-hsl:  240 38% 6%;
    --color-white-hsl:  0 0% 100%;

    /* Button hover shadow (primary) */
    --shadow-size: 1em;
    --shadow-color: var(--color-primary);

}
@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-white);
  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: "Roboto", sans-serif;
  font-weight: 400;
  color: var(--color-dark-gray);
}

p {
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", "Roboto", sans-serif;
}

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;
}


/* VARS  */


:root {
  --br: 24px;
  --br-min: 8px;

  --space-y: 2.5rem;
  --space-y-min: .5rem;
}

/* BACKGROUND */
.app-bg{
  width: min(100%, 100vw);
  height: min(100%, 100vh);
  position: fixed;
  left: 0;
  top: 0;
  background: linear-gradient(105deg,var(--color-primary-400) 60%,var(--color-primary-600) 150%);
  z-index: -1;

}

.app-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, transparent, var(--color-primary-600) 150%);
  height: 60vh;
  z-index: -1;
  pointer-events: none;
}

.app-bg-shape{
  position: absolute;
  left: 50%;
  transform: translate(-33%, -19%) rotate(342deg);
  width: 100%;
  height: 100%;
  background-image: url(/images/bg-shape.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .3;
  filter: blur(1rem);
  z-index: -1;
  pointer-events: none;
}

/* 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 .day:first-child {
  margin-top: 0;
}

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

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

.fader .fade.hide {
  opacity: 0;
  pointer-events: none;
}

.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 {
  font-size: clamp(1.1rem, 1.45vw, 1.313rem);
  line-height: 1;
  text-align: center;
  font-weight: 500;
  color: var(--color-white);
}

.subtitle.login {
  color: var(--color-black);
}

.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: 2rem;
  box-shadow: 0 .8rem .8rem -.4rem hsl(var(--color-black-hsl) / 10%)
}

#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-inline: auto;
  padding: 11px 11px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-white);
  margin-top: 10px;
}



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

.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-button);
  border: .1rem solid var(--color-button);
}

.button.button.edit-btn .icon svg {
  stroke: currentColor;
}


.light-btn {
  background: var(--color-white) !important;
  color: var(--color-button) !important;
  font-weight: 500;
}



.button.save-btn {
  background: var(--color-button);
  font-weight: 500;
  color: var(--color-white);
}

.button.disabled {
  opacity: 0.5;
}

.btn-close {
  width: max-content;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 15px 30px;
  font-size: 1.5em;
  font-weight: 500;
  border-radius: 5px;
}

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

.button:hover:not(.disabled):not(:disabled),
.btn-close:hover:not(.disabled):not(:disabled),
input[type="submit"]:hover:not(.disabled):not(:disabled) {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary);
  box-shadow: 0 .5em var(--shadow-size) -.375em var(--shadow-color);
}

.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;
}

/* BANNER CAROUSEL */
.banner-carousel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
}

.carousel-track {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 1.1rem;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: auto;
  overflow: hidden;
}

.carousel-slide img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-slide a {
  display: block;
  height: 100%;
  cursor: pointer;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-arrow-left {
  left: 8px;
}

.carousel-arrow-right {
  right: 8px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 4px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active {
  background: var(--color-white);
  transform: scale(1.2);
}

@media (min-width: 980px) {
  .banner-carousel {
    margin-bottom: 0;
    margin-top: 40px;
  }
}

.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: 16px;
}

#jugadores .styled-form {
  margin: auto;
}

.ranking-create-group-fab {
  position: fixed;
  right: 16px;
  bottom: 104px;
  z-index: 46;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--color-button);
  box-shadow: 0 8px 20px rgba(10, 10, 22, 0.2);
}

.ranking-create-group-fab .icon {
  font-size: 16px;
}

@media (min-width: 768px) {
  .ranking-create-group-fab {
    right: calc((100vw - 600px) / 2 + 30px);
  }
}



.styled-form .label {
  display: block;
  margin-top: 20px;
}

.styled-form .label .text {
  display: block;
  color: var(--color-gray);
  font-size: 15px;
  margin: 0 0 10px;
  text-align: left;
  transition: opacity 300ms ease-out;
}

.styled-form .label.is-optional .text {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.styled-form .label .optional-tag {
  display: inline-flex;
  font-size: .75rem;
  color: var(--color-gray);
}

.styled-form .label .required-mark {
  color: var(--color-red);
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: text-top;
}

.styled-form .label.is-required .text {
  font-weight: 500;
}

.styled-form .label .input:not([type="checkbox"]):not([type="radio"]),
.styled-form .label .select-holder {
  display: block;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
  border-radius: 20px;
  background-color: var(--color-white);
}

.styled-form .label .input:not([type="checkbox"]):not([type="radio"]) {
  color: var(--color-dark-gray);
  border: 0.1rem solid var(--color-grey-200);
}

.styled-form .label .input:not([type="checkbox"]):not([type="radio"]):focus,
.styled-form .label .select-holder:focus-within {
  box-shadow: 0 0 0 2px var(--color-button);
}


.styled-form .label .select-holder {
  position: relative;
  color: var(--color-black);
}

.styled-form .label .select-holder:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 45%;
  width: 6px;
  height: 6px;
  border: solid var(--color-black);
  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 {
  width: 100%;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  color: var(--color-gray);
}

.styled-form .label.switch-row {
  display: flex;
  align-items: center;
  padding-bottom: 0;
  box-shadow: none;
}

.styled-form .label.switch-row .text {
  margin-right: .5rem;
  margin-bottom: 0;
  opacity: 1;
}

.styled-form .label.switch-row .switch {
  padding-top: 0;
}

.styled-form .label.switch-row .slider {
  top: 0;
}

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

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

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

.styled-form .label .input::-moz-placeholder {
  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;
  margin-bottom: 25x;
  font-size: 1.2em;
  color: var(--color-yellow);
}

.styled-form .submit-holder {
  margin-top: var(--space-y);
  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: block;
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 90px;
  z-index: 1000;
  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: 16px;
  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);
}

html.info-popup-open,
body.info-popup-open {
  overflow: hidden;
}

body.info-popup-open {
  position: fixed;
  width: 100%;
}

/* INFO FAB + POPUP */
.info-fab-button {
  position: fixed;
  bottom: 82px;
  right: 16px;
  z-index: 60;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px 10px 16px;
  border: none;
  border-radius: 28px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-align: left;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.info-fab-button-icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("images/icons/circle-question-mark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.info-fab-button-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.info-fab-button-title {
  display: block;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.info-fab-button-text {
  display: block;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.9;
  white-space: nowrap;
}

.info-fab-button:active {
  transform: scale(0.98);
}

.terms-fab-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px;
  border: none;
  border-radius: 28px;
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  text-align: left;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.terms-fab-button--above-info {
  bottom: 140px;
}

.terms-fab-button-icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("images/icons/book-open.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.terms-fab-button-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.terms-fab-button-title {
  display: block;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.terms-fab-button-text {
  display: block;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.9;
  white-space: nowrap;
}

.terms-fab-button:active {
  transform: scale(0.98);
}

.terms-popup-body {
  font-size: 0.95em;
  line-height: 1.5;
}

.terms-popup-section {
  margin-bottom: 1.6rem;
}

.terms-popup-section:last-child {
  margin-bottom: 0;
}

.terms-popup-heading {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-size: 1.15em;
  font-weight: 600;
}

.terms-popup-section p {
  margin: 0 0 0.75rem;
}

.terms-popup-list {
  margin: 0 0 0.75rem;
  padding-left: 1.4rem;
}

.terms-popup-list li {
  margin-bottom: 0.35rem;
}

.login-terms-link {
  margin: 1rem 0 0;
  text-align: center;
}

.login-terms-link .link{
  font-size: 14px;
}


.info-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: hsl(from var(--color-black) h s l / 70%);
  backdrop-filter: blur(5px);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.info-popup {
  position: relative;
  width: 100%;
  max-width: 60rem;
  max-height: calc(100vh - 40px);
  padding: 60px 30px;
  border-radius: 12px;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 1.3em;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  overflow-y: auto;
}

.info-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.info-popup-close-icon:before,
.info-popup-close-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--color-dark-gray);
  transform-origin: center;
}

.info-popup-close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.info-popup-close-icon:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.info-popup-close-icon:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.info-popup-title {
  margin: 0 36px 8px 0;
  color: var(--color-primary);
  font-size: 1.5em;
  font-weight: 600;
}

.info-popup-body {
  margin-top: 1.4rem;
}

.info-popup-table {
  width: 100%;
  border-collapse: collapse;
}

.info-popup-table th,
.info-popup-table td {
  border: 1px solid hsl(from var(--color-dark-gray) h s l / 20%);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.info-popup-table th {
  font-weight: 600;
  color: var(--color-primary);
}

.info-popup-table td:last-child,
.info-popup-table th:last-child {
  text-align: center;
  white-space: nowrap;
}

.info-popup-table-highlight td {
  font-weight: 600;
  color: var(--color-primary);
}

.info-popup-note {
  margin-block: 1.4rem;
}

.info-popup-table-scroll {
  margin: 0 -4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.info-popup-table-examples {
  min-width: 520px;
}

.info-popup-table-examples th,
.info-popup-table-examples td {
  padding: 6px 8px;
}

.info-popup-table-examples td:first-child,
.info-popup-table-examples td:nth-child(2) {
  white-space: nowrap;
}

.info-popup-hit,
.info-popup-miss {
  white-space: nowrap;
}

.info-popup-footer {
  margin-top: 1.4rem;
}

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

#header .holder {
  width: 100%;
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  background: transparent;
  overflow: hidden;
}


#header .top {
  position: relative;
  z-index: 1;
  height: 60px;
  text-align: center;
}

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

#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: center;
  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/dlocal.svg") !important;
  height: 25px;
  margin-top: 2rem;
  color: var(--color-primary);
}


/* TABS */
#tabs {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 40;
}

#tabs .holder {
  position: relative;
  top: auto;
  left: auto;
  width: min(520px, calc(100vw - 30px));
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  box-sizing: border-box;
}

#tabs .holder.three,
#footer .holder.tabs {
  display: flex;
  align-items: stretch;
  transform: none;
  padding: .5rem;
  border: 1px solid var(--color-grey-200);
  border-radius: 20px;
  background: var(--color-white);
  box-sizing: border-box;
  height: auto;
}

#tabs .holder.three {
  margin-top: 2rem;
  overflow: hidden;
  box-shadow: none;
}


#tabs+.innerload {
  margin-top: 100px;
  height: calc(100vh - 125px - 92px - 56px);
  overflow: hidden;
}

.ranking-page>.innerload {
  margin-top: 0;
  height: calc(100vh - 92px - 56px);
  overflow: hidden;
}

#profile>.innerload {
  margin-top: 0;
  height: calc(100vh - 92px - 56px);
  overflow: hidden;
}

#tabs+.innerload .fade,
.ranking-page>.innerload .fade,
#profile>.innerload .fade {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom,
  transparent 0px,
  rgba(0, 0, 0, 0.06) 3px,
  rgba(0, 0, 0, 0.20) 6px,
  rgba(0, 0, 0, 0.45) 10px,
  rgba(0, 0, 0, 0.75) 14px,
  rgba(0, 0, 0, 0.92) 17px,
  #000 20px
);
mask-image: linear-gradient(to bottom,
  transparent 0px,
  rgba(0, 0, 0, 0.06) 3px,
  rgba(0, 0, 0, 0.20) 6px,
  rgba(0, 0, 0, 0.45) 10px,
  rgba(0, 0, 0, 0.75) 14px,
  rgba(0, 0, 0, 0.92) 17px,
  #000 20px
);
}

#profile > .innerload .fade {
  padding-top: 20px;
}

.group-page .innerload {
  --group-header-height: 60px;
  --group-bottom-nav-height: 92px;
  /* margin-top: 60px; */
  height: calc(100vh - var(--group-header-height));
  height: calc(100dvh - var(--group-header-height));
  height: calc(100svh - var(--group-header-height));
  overflow: hidden;
}

.group-page .innerload .fade {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: calc(var(--group-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
  -webkit-mask-image: linear-gradient(to bottom,
  transparent 0px,
  rgba(0, 0, 0, 0.06) 3px,
  rgba(0, 0, 0, 0.20) 6px,
  rgba(0, 0, 0, 0.45) 10px,
  rgba(0, 0, 0, 0.75) 14px,
  rgba(0, 0, 0, 0.92) 17px,
  #000 20px
);
mask-image: linear-gradient(to bottom,
  transparent 0px,
  rgba(0, 0, 0, 0.06) 3px,
  rgba(0, 0, 0, 0.20) 6px,
  rgba(0, 0, 0, 0.45) 10px,
  rgba(0, 0, 0, 0.75) 14px,
  rgba(0, 0, 0, 0.92) 17px,
  #000 20px
);
}


.group-page.group-popup-open .innerload .fade {
  -webkit-mask-image: none;
  mask-image: none;
}

#tabs .holder.three .tab.three,
#footer .holder.tabs .tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1;
  border-radius: 20px;
  padding-block: 1rem;
}

#tabs .holder.three .tab.three .icon,
#tabs .holder.three:before,
#tabs .holder.three:after,
#tabs .holder.three .tab.three:before {
  display: none;
  content: none;
}

/* Misma tipografía en todos los tabs (rem = raíz html, no del padre) */
#tabs .tab .text,
#footer .holder.tabs .tab .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
  transition: color 300ms ease-out;
}

#footer .holder.tabs .tab .icon {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-gray);
  vertical-align: middle;
  margin-bottom: .05rem;
  transition: color 300ms ease-out;
}
/* 
#tabs .holder.three .tab.three.active {
  padding-block: 1rem;
} */

#tabs .holder.three .tab.three.active {
  background: var(--color-primary);
}

#footer .holder.tabs .tab.active {
  background: var(--color-dark-primary);
}

#tabs .holder.three .tab.three.active .text {
  color: var(--color-white);
  opacity: 1;
}

#footer .holder.tabs .tab.active .text {
  color: var(--color-primary);
}

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


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

.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;
  margin-bottom: 40px;
}

.matches-list .match {
  margin-top: 20px;
  padding: 22px 15px;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out, background-color 240ms ease-out;
}

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

.matches-list .match[data-status="changing"] {
  border: 2px solid var(--color-button);
  box-shadow: 0 22px 50px -16px hsl(var(--color-black-hsl) / 38%);
}

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

.matches-list .match .info {
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: var(--color-black);
}

.matches-list .match .subtitle {
  margin-bottom: 20px;
  max-width: 19em;
  font-weight: 500;
  text-align: center;
  margin-inline: auto;
}

.matches-list .match .info span {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
  color: hsl(var(--color-black-hsl) / 80%);
}

.matches-list .match .match-time {
  font-size: .9rem;
  margin-bottom: 0;
  margin-top: 10px;
}

.matches-list .match .match-time strong {
  background-color: var(--color-dark-primary);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--color-primary);
  width: max-content;
  margin-inline: auto;
}

.matches-list .match .match-time .user-time-zone {
  font-size: 0.8rem;
}


.matches-list .match .info.random-all-intro {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

.matches-list .match .content {
  margin-block: 24px;
  display: flex;
  justify-content: center;
}


.matches-list .match .country {
  display: block;
}

.matches-list .match .inline {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.matches-list .match .country {
  margin-inline: 10px;
}

.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-black);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.matches-list .match .input {
  --_fz: 30px;
  width: var(--_fz);
  height: var(--_fz);
  /* margin-inline:6px; */
  border-radius: 5px;
  color: var(--color-black);
  font-size: var(--_fz);
  font-weight: 600;
  text-align: center;
  box-shadow: none;
  line-height: 33px;
  padding: .3rem;
  transition: background 300ms ease-out, box-shadow 300ms ease-out;
}

.matches-list .match .input:focus {
  box-shadow: 0 0 0 1px var(--color-primary);
}

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

.matches-list .match .input-holder,
.matches-list .match .score-holder {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matches-list .match .score {
  margin: 0;
  color: var(--color-black);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.matches-list .match[data-status="changing"] .input {
  background: var(--color-dark-primary);
}

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

.matches-list .match .versus {
  font-size: 3.4em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-inline: .75rem;
}

.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;
}

#finalizados .matches-list .match .prediction-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-grey-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

#finalizados .matches-list .match .prediction-values {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  text-align: left;
}

#finalizados .matches-list .match .prediction-points {
  margin: 0;
  margin-left: auto;
}

#finalizados .matches-list .match .prediction-points.is-positive {
  background: var(--color-match-editing-bg);
  border-radius: 999px;
  padding: 4px 10px;
}

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

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

.group-container {
  margin-top: 20px;
}

/* 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;
}

/* Decorative ring — bottom-left, clipped by card (except .outside: keeps connector visible) */
.rank.bordered-item {
  isolation: isolate;
}

.rank.bordered-item:not(.outside) {
  overflow: hidden;
}

.rank.bordered-item.outside::after {
  left: -32%;
  bottom: -26%;
}

.ranking-list .rank.bordered-item>.holder,
.ranking-list .rank.bordered-item>.loader,
#profile .user-container .rank.bordered-item>.holder,
#profile .user-container .rank.bordered-item>.loader,
#policy .terms.rank.bordered-item>p {
  position: relative;
  z-index: 1;
}

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

.ranking-list .rank .subtitle {
  color: var(--color-black);
}

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

.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-primary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--color-dark-primary);
}

.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("images/icons/ranking-trophy.svg");
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
}

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

.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;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}


.ranking-list .rank .text .caption {
  margin-top: 3px;
  color: var(--color-black);
  font-size: 14px;
}

.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: 14px;
  color: var(--color-gray);
  font-weight: 400;
  background: transparent;
}

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

.ranking-list .rank .text .points .num {
  display: block;
  font-size: 28px;
  line-height: 0.8;
  position: relative;
  right: -2px;
  color: var(--color-primary);
  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);
  padding: 35px 0;
  border-radius: 20px;
}

#profile .user-container {
  margin-bottom: var(--space-y);
}

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

.points {
  font-size: 15px;
  color: var(--color-primary);
  background-color: var(--color-dark-primary);
  width: max-content;
  margin-inline: auto;
  padding: 2px 6px;
  border-radius: var(--br);
  margin-block: 16px;
  font-weight: 500;
}

#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-black);
}

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

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

.c-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-button);
  cursor: pointer;
  padding: 6px 0;
  text-align: center;
  margin-inline: auto;
  margin-top: 10px;
}

#profile .c-link {
  color: var(--color-white);
}

.c-link:hover {
  opacity: 0.8;
}

.c-link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}



/* LOGIN */
html:has(.login),
body:has(.login) {
  height: auto;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow: hidden;
}

.innerload:has(.login) {
  top: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.innerload:has(.login) .fade {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.innerload:has(.login) .login {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 1 0 auto;
  box-sizing: border-box;
}

.login > .wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.login .align-m {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

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

.login .align-m > .align {
  display: block;
  width: 100%;
}

.login .align {
  width: 100%;
  padding: max(50px, env(safe-area-inset-top, 0px)) 0
    max(50px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  box-sizing: border-box;
}

.login .align .styled-form,
.login .align .bg {
  width: 100%;
}

.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;
  padding: 35px 30px;
  background: var(--color-white);
  text-align: left;
  box-sizing: border-box;
  border-radius: 5px;
}

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

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

.login .align .subtitle,
.login .align .label .text,
.login .align .links .link {
  color: var(--color-black);
}

.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 .bg {
  position: relative;
  padding: 35px 30px;
  background: var(--color-white);
  text-align: left;
  box-sizing: border-box;
  border-radius: 20px;
}


.group .align-message label.success {
  font-size: 16px;
  color: var(--color-white);
  width: 100%;
}

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

.group .align-message {
  position: relative;
  padding: 15px 15px 25px 15px;
  background: var(--color-primary);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}

.group .align-message {
  position: relative;
  padding: 15px 15px 25px 15px;
  background: var(--color-primary);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}

.group .align-message::after {
  content: "";
  position: absolute;
  left: -10px;
  top: -30px;
  border: .3rem solid var(--color-dark-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  z-index: 1;
}

.group .align-message::before {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -20px;
  border: .7rem solid var(--color-dark-primary);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 1;
}

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


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

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

.group-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.group-popup-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--color-black-hsl) / 90%);
  z-index: 999;
}

.group-popup-container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100vh - 48px);
  border-radius: var(--br);
  height: auto;
  background: var(--color-white);
  z-index: 999;
}

@media (min-width: 768px) {
  /* .group-popup-container {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 560px;
    max-height: calc(100vh - 48px);
    border-radius: var(--br);
    height: auto;
  } */
}

.group-popup-container.full-screen {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
}

.group-popup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: var(--space-y);
}

.group-popup-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: .1rem solid var(--color-grey-200);
  border-radius: var(--br);
  padding: 3px;
}

.group-popup-tab {
  background: transparent;
  color: var(--color-black);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 1;
  padding: 12px 20px;
  border-radius: var(--br);
  transition: background-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out;
}

.group-popup-tab.active {
  color: var(--color-white);
  background: var(--color-primary);
  text-decoration: none;
  box-shadow: 0 2px 6px hsl(var(--color-black-hsl) / 20%);
}

.group-popup-close {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  background-image: url("images/icons/group-popup-close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: 0.9;
}

.group-popup-close:hover {
  opacity: 1;
}

.random-confirm-popup {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100vh - 48px);
  height: auto;
  border-radius: var(--br);
}

.random-confirm-popup .wrapper {
  padding: 0 16px 24px;
}

.random-confirm-body {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
}

.random-confirm-body .subtitle {
  margin-top: 0;
}

.random-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-y);
}

.random-confirm-actions .button {
  margin-inline: 0;
}



/* 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-block: 22px;
}

.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 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-sizing: border-box;
  pointer-events: none;
  background: transparent;
}

#footer .holder.tabs {
  pointer-events: auto;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  bottom: 0;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

#footer .holder.tabs:before,
#footer .holder.tabs:after {
  display: none;
  content: none;
}

#footer .holder.tabs .tab.active:before {
  display: none;
  content: none;
}

@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-inline: 20px;
  }
}

@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;
  }


}


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


  .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 {
    top: 80px;
  }

  #tabs+.innerload{
    margin-top: 100px;
    height: calc(100vh - 145px - 92px);
  }

  .ranking-page>.innerload {
    margin-top: 0;
    height: calc(100vh - 92px);
  }

  #profile>.innerload {
    margin-top: 16px;
    height: calc(100vh - 92px);
  }

  .group-page .innerload {
    --group-header-height: 80px;
    margin-top: 16px;
  }

  


  /* 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 */
html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
}


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

.button,
.btn-close {
  background: var(--color-button);
  border: .1rem solid 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: 125px;
}

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

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

/* BORDERED ITEM */
.bordered-item {
  border-radius: 20px;
  border: .1rem solid var(--color-grey-200);
  background-color: var(--color-white);
  position: relative;
  z-index: 2;
}

.bordered-item[data-status="user"] {
  border-radius: 20px;
  border: .1rem solid var(--color-grey-200);
  background-color: var(--color-white);
}

/* MATCHES LIST */
.matches-list .match[data-status="changing"] .input {
  background-color: var(--color-dark-primary);
}


@media (min-width: 768px) {

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

  /* Mismo ancho que el content box de .wrapper (600px − padding 30+30) */
  #tabs .holder {
    width: min(540px, calc(100vw - 60px));
    max-width: 540px;
  }

  #footer .holder.tabs {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 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;
}