* {
  box-sizing: border-box;
  color: white;
  font-family: Inter;
}
body {
  background: linear-gradient(#282248, #383065);
  min-height: 100vh;
  padding: 20px;
  margin: 0;
  /* background-attachment: fixed; */
  overflow-x: hidden;
}
.hide {
    display: none !important;
}
.container-logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.container-logo a {
  text-align: center;
}
.infoComp img {
    width: 30px;
}
img.survaivo_logo_4ed {
  width: 40%;
  margin-left: -20px;
}
.container-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-direction: column;
}
.loading-spinner {
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Assicurati che lo spinner sia sopra gli altri contenuti */
  pointer-events: none;       /* lo spinner non blocca i click sotto */
  z-index: 1;
}
#countdown {
  font-size: 40px;
  font-style: italic;
  font-weight: 900;
  color: #00e8da;
}
.text-countdown {
    text-transform: uppercase;
    font-size: 15px;
}
input#terms {
    width: 6%;
    height: 20px;
    position: relative;
    top: 4px;
}
.giornataMatches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 100%;
    margin-top: 15px;
}
.giornataMatches .singleMatch .boxLogo {
    width:45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7px;
}
.giornataMatches .singleMatch .boxLogo img {
    width:100%;
}
.singleMatch {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    background-color: #221B3A;
    border-radius: 10px;
    gap: 10px;
    padding: 0 10px;
}
.homeTeam, .awayTeam {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    padding: 9px 0;
}
.squadraSelezionata {
    font-weight: 700;
    border: 2px solid #00e8da;
    border-radius: 7px;
    padding: 6px;
    opacity: 1 !important;
}
.vite {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.vite img {
  width: 70px;
  margin: 0 5px;
}
.text-vite {
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin-top: 9px;
  font-size: 20px;
}
.slick-slide {
  background-color: white;
  width: 50px !important;
  height: 50px !important;
  border-radius: 5px;
  border: 2px solid #00e8da;
  margin: 0 0 6px 6px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.slick-slide img {
  width: 40px;
}
.slick-track {
  width: 100% !important;
}
.giornata.slick-slide {
  background-color: transparent;
}
.giornata.slick-slide .scelta-round {
  font-size: 30px;
  color: #00e8da;
  margin-top: -5px;
}
h4 {
  width: 100%;
  text-align: center;
  background-color: #383065;
  font-size: 17px;
  margin-bottom: 15px;
}
h4#le-tue-scelte {
  background-image: url(../images/piu.png);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: right;
}
h4#le-tue-scelte.aperto {
  background-color: #1F003E;
  background-image: url(../images/meno.png);
}
.disabilitato {
  opacity: 0.2;
  pointer-events: none;
}
.giusto,
.pending,
.sbagliato {
  position: relative;
}
.giusto::after,
.selezionato::after {
  content: "";
  width: 18px;
  height: 18px;
  background: #00ac56 url(../images/giusto.png) center no-repeat;
  background-size: 60%;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
}
.pending::after {
  content: "";
  width: 18px;
  height: 18px;
  background: #00e8da url(../images/pending.png) center no-repeat;
  background-size: 60%;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
}
.sbagliato::after {
  content: "";
  width: 18px;
  height: 18px;
  background: #ac0000 url(../images/sbagliato.png) center no-repeat;
  background-size: 60%;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
}
.selezionato img {
  border: 4px solid #00ac56 !important;
}
.slick-list {
  overflow: visible !important;
}
.container-scelte.slick-initialized.slick-slider button {
  display: none !important;
}
.container-fai-scelta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 7px;
}
.team-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.team-selector img {
  width: 60px;
  background: white;
  border-radius: 10px;
  border: 2px solid #00e8da;
  padding: 4px;
}
.opposite {
  width: 100%;
  text-align: center;
  font-size: 9px;
}
.button-acquamarine {
  text-align: center;
  width: 100%;
  border-radius: 10px;
  color: #383065;
  border: none;
  background-color: #00e8da;
  margin-bottom: 40px;
  cursor:pointer;
  border: double 7px #383065;
  font-size: 20px !important;
  margin-top: 20px;
  line-height: 37px;
  padding: 6px 0px 7px;
  text-transform: uppercase;
}
.container-scelta-fatta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.text-scelta-fatta {
  text-transform: uppercase;
  font-size: 28px;
  margin-right: 20px;
}
.giornata-scelta {
  font-size: 46px;
  color: #00e8da;
  border: 3px solid #00e8da;
  width: 64px;
  height: 65px;
  border-radius: 7px;
  text-align: center;
  line-height: 50px;
}
.img-scelta-fatta {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top: 20px;
    background-color: #221B3A;
    padding: 30px;
    border-radius: 10px;
}
.img-scelta-fatta img {
  width:60%;
}
.forza-scelta {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 40px;
  margin-top: 20px;
  font-weight: 900;
  font-style: italic;
}
.pannello-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.tastoRegolamento.pannello-login, .aggiungiAccount.pannello-login {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #383065;
    padding-top: 10px;
    padding: 10px 10px 0;
}
.aggiungiAccount.pannello-login {
  bottom:90px;
}
.pannello-login a {
    background-color: #00e8da;
    border-radius: 10px;
    color: #383065;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    line-height: 37px;
    /* height: 50px; */
    border: 7px double #383065 !important;
    padding: 6px 0 7px 0;
}

.registrati-button {
  background-color: white !important;
  margin-bottom: 30px !important;
}
.outline-button {
  background-color: transparent !important;
  color: #fff !important;
}
.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.form label {
  width: 100%;
  margin-bottom: 10px;
}
.form input {
  line-height: 45px;
  border-radius: 10px;
  border: aliceblue;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  width: 100%;
  color: #383065;
}
input#password,
input#confermapassword {
  text-transform: none;
}
form#scegliAccount {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 10px;
}
#scegliAccount input#account_scelti {
    font-size: 60px;
    width: 30%;
    text-align: center;
    border-radius: 10px;
}
p.infosmall {
    font-size: 13px;
    line-height: 22px;
    opacity: 0.5;
    margin-top: -15px;
}
div#boxCompetitions {
    display: flex;
    flex-direction: column;
    gap:10px;
    padding-bottom: 60px;
    margin-top: 30px;
}
div#boxCompetitions .allComp {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.infoComp {
    position: relative;
    width: 100%;
}
.boxComp {
  border-radius: 10px;
  padding: 12px 12px 17px;
    background-color: #221B3A;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.aggregateComps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.boxCompTitle {
    border-radius: 10px;
    padding: 10px 17px 12px;
    color:#221B3A;
    background-color: #00e8da;
    display: flex;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 4px;
    font-size: 14px;
    cursor: pointer;
    background-image: url('/images/caret-down.svg');
    background-repeat: no-repeat;
    background-position: 97% 6px;
    background-size: 15px;
}
#upcomingComps .boxCompTitle {
  color:#221B3A;
  background-color: #FFB800;
}
.statusComp {
    width: 10px;
    border-radius: 10px;
    height: 20px;
    background-color: #FFB800;
}
.statusComp.greenComp, .statusAccount.alive, .esitoPositivo {
  background-color: #00B76A;
}
.statusComp.redComp, .statusAccount.notAlive, .esitoNegativo {
  background-color: #B70000;
}
.statusComp.waitingComp, .statusAccount.waitLife, .esitoInAttesa {
  background-color: #FFB800;
}
.scelteNascoste {
display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 0;
  justify-items: center;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.listaAccount {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    justify-items: flex-start;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
    font-size: 13px;
    text-transform: lowercase;
}
.listaAccount.open {
  max-height: 2000px;
}
.sceglienteAccount {
    position: relative;
}
.sceglienteAccount:nth-of-type(1), .sceglienteAccount:nth-of-type(2) {
    margin-top: 20px;
}
.boxSceltaLogo {
    width: 40px;
    gap:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
}
.boxSceltaLogo img {
    width: 100%;
}
.esitoScelta {
    width: 100%;
    height: 6px;
    border-radius: 10px;
}
.statusAccount {
    height: 37px;
    width: 10px;
    background-color: #FFB800;
    border-radius: 10px;
}
.nomeAccount {
    font-weight: 800;
    text-transform: lowercase;
}
.sceltedegliAvversari .nomeAccount {
    text-transform: capitalize;
}
.infoAccount .accountsUserMini {
    margin-top: 3px;
    font-weight: 300;
}
.nomeComp {
    font-size: 17px;
    margin-bottom: 10px;
}
.accountBox {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
.incorsoComp {
    color: white;
    font-size: 9px;
    margin-bottom: 8px;
    position: absolute;
    top: 0px;
    right: 0;
    background-color: red;
    padding: 1.5px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 800;
}
.accountsComp {
    color: #00e8da;
    font-size: 12px;
    margin-bottom: 8px;
    position: absolute;
    top: 20px;
    right: 0;
}
.accountsUser {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 3px;
}
.accountsUserMini {
    font-size: 12px;
}
.boxLogoScelto {
    background-color: transparent;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 10px;
    top: -5px;
}
.scelteAvversari.boxLogoScelto {
    width: 50px;
    height: 50px;
    top: -5px;
}
.pageLive .scelteAvversari.boxLogoScelto {
    width: 40px;
}
.scelteNumero {
    font-weight: 300;
    display: inline-block;
    margin-left: 5px;
}
.boxLogoScelto img {
  width: 100%;
}
.mini-button {
    background: transparent;
    box-shadow: none;
    border: solid 1px #383065;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 5px;
    font-size: 12px;
    padding: 7px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.accountSingle {
  border-radius: 10px;
  padding: 12px 17px 14px;
    background-color: #221B3A;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: all;
}
.pageLive .accountSingle {
    padding: 6px 17px 8px;
}
.accountSingle.superstiti {
  gap: 0px;
}
.accountSingle .visibleInfo {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.contAccount {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    padding-bottom: 160px;
}
h2 {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #00e8da;
}
.container-bentornato {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-bottom: 10px;
}
.bentornato {
    text-transform: uppercase;
      margin-top: 20px;
    font-weight: 200;
    font-size: 14px;
    text-align: center;
}
.nomepubblico {
    font-size: 20px;
    font-weight: 600;
}
a.linkSemplice {
    text-align: center;
    width: 18%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #221B3A;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 12px;
    padding: 2px 0 2px 0;
}
/* Active state of the mobile menu (when it's visible) */
.mobile-menu.active {
  left: 0; /* Slide in from the left */
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%; /* Start off-screen to the left */
  background: linear-gradient(#383065,#282248);
  width: 100vw;
  height: 100vh;
  padding: 50px;
  display: flex;
  flex-direction: column;
  font-size: 41px;
  text-transform: uppercase;
  z-index: 1;
  transition: left 0.4s ease; /* Use a transition for smooth animation */
}
.mobile-menu a {
  text-decoration: none;
  margin-bottom: 15px;
  width: 100%;
  display: block;
  font-size: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #383065;
}
.mobile-menu img.survaivo_logo_4ed {
  width: calc(40% + 50px);
  margin-left: -20px;
}
.footer {
  margin-top: 50px;
  margin-bottom: 30px; 
}
.piccolo {
  font-size: 10px;
  width: 100%;
  text-align: center;
  position: relative;
  float: left;
  text-decoration: none;
  margin-top: 20px;
}
.hamburger {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 65px;
  padding: 20px;
}
.close {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 65px;
  padding: 20px;
}
.accordion {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 20px auto;
  position: relative;
}
.accordion-item {
  border: none;
  margin-bottom: 20px;
  background-color: #00e8da;
  cursor: pointer;
  transition: none;
  border-radius: 10px;
  height: auto;
  padding: 3px 0 6px;
}
.accordion-content {
  display: none !important;
  padding: 20px 15px 10px;
}
.accordion-header-single {
  display: flex;
  background-image: url(../images/piu-viola.png);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: 273px 5px;
}
.accordion-item.attivo .accordion-header-single {
  background-image: url(../images/meno.png);
}
.counter-ids {
  margin-left: 10px;
  color: #383065;
  font-size: 21px;
  line-height: 25px;
}
.nome-squadra {
  color: #383065;
  text-transform: uppercase;
  font-size: 25px;
  padding-left: 60px;
  line-height: 25px;
}
.accordion-item-logo {
  width: 45px;
  height: 45px;
  margin-left: 8px;
  position: absolute;
  margin-top: -8px;
}
.accordion-item.attivo {
  background-color: #383065;
}
.accordion-item.attivo .accordion-header-single .nome-squadra,
.accordion-item.attivo .accordion-header-single .counter-ids {
  color: white;
}
.accordion-item.attivo .accordion-content {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}
.accordion-item.attivo .accordion-content .accordion-content-single-player {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 0 3px;
}
.accordion-item .accordion-content img {
  width: 20px;
  margin: 0 0px;
}
.accordion-item.attivo
  .accordion-content
  .accordion-content-single-player
  .vite {
  margin-top: 0;
  display: block;
  width: auto;
}
.accordion-item-header-single {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background-image: url(../images/piu.png);
  background-size: 18px;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 0 4px;
}
.accordion-item.attivo .accordion-item-header-single {
  background-image: url(../images/meno.png);
}
.accordion-item-header-single .accordion-item-header-single-nomevite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.accordion-item-header-single-nome {
  font-size: 18px;
  text-transform: lowercase;
}
.nome-player-scelta {
  text-transform: lowercase;
}
.accordion-item-header-single .vite img {
  width: 30px;
  margin: 0 1px;
}
.accordion-item-header-single .vite {
  display: block;
  width: auto;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}
.accordion-item.users {
  border: none;
  margin-bottom: 5px;
  background-color: transparent;
  cursor: pointer;
  transition: none;
  border-radius: 0px;
  height: auto;
  padding: 3px 0 6px;
}
.accordion-item.users.attivo .accordion-content {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  background: #383065;
  width: 100%;
  padding: 5px 10px 9px;
  border-radius: 8px;
  margin-top: 8px;
}
.accordion-scelte-single-player {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 0 6px;
}
.accordion-scelta-giornata {
  width: 9.5%;
  text-align: right;
  margin-left: 2px !important;
}
.accordion-scelte-single-player div {
  margin-right: 10px;
  position: relative;
  display: block;
  margin-left: 10px;
}
.accordion-scelta-squadra {
  flex: 1;
}
img.accordion-scelta-esito {
  border-radius: 50%;
  padding: 4px;
}
img.accordion-scelta-esito.giusto {
  background-color: #00ac56;
}
img.accordion-scelta-esito.sbagliato {
  background-color: #ac0000;
}
.messaggio-errore-login {
    text-align: center;
    margin-top: 30px;
    font-weight: 300;
    line-height: 24px;
    font-size: 15px;
}
.messaggio-completare-iscrizione {
  margin-top: 30px;
  font-size: 25px;
  text-align: center;
}
.messaggio-fine {
  margin: 20px;
  font-size: 25px;
  background-color: #00072d;
  padding: 5px 10px 10px;
  border-radius: 10px;
}
#form-scelta .button-acquamarine {
  margin-top: 30px;
}
div#scelta-multi-account {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
div#scelta-multi-account div {
  color: #00e8da;
  border: 2px solid #00e8da;
  text-align: center;
  border-radius: 10px;
  margin: 0 3px;
  width: 100%;
  font-size: 28px;
  height: 47px;
  line-height: 39px;
  margin-top: 10px;
}
label.domanda-account {
  font-size: 24px;
  text-align: center;
}
.multi-account.selected,
.accounts_container div.selected {
  background-color: #00e8da;
  color: #00072d !important;
  border-color: #00072d !important;
}
.accounts_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
}
.accounts_container .nomipubblici {
  color: #00e8da;
  border: 2px solid #00e8da;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 8px;
  width: 100%;
  font-size: 22px;
  height: 47px;
  line-height: 39px;
}
.accounts_container .single-account {
  display: flex;
  width: 100%;
}
.accounts_container .single-account img.teamlogo {
  width: 47px;
  background: white;
  border-radius: 10px;
  border: 2px solid #00e8da;
  padding: 4px;
  height: 47px;
  margin-left: 5px;
}
.button-acquamarine-small {
  font-size: 25px;
  text-align: center;
  width: 100%;
  border-radius: 10px;
  color: #383065;
  border: none;
  background-color: white;
  margin-bottom: 0px;
  line-height: 30px;
  padding: 1px 0 6px;
}
.button-transparent-small {
  font-size: 25px;
  text-align: center;
  width: 100%;
  border-radius: 10px;
  border: 2px solid #00e8da !important;
  color: #00e8da;
  border: none;
  background-color: transparent;
  margin-bottom: 0px;
  line-height: 30px;
  padding: 1px 0 6px;
}
span.count-superstiti {
  color: #00e8da;
}
.regolamento-testo {
  text-align: justify;
}
.regolamento-testo h3 {
  color: #00e8da;
  text-transform: uppercase;
}
.regolamento-testo p {
  line-height: 22px;
}
#content-satispay img {
  width: 100%;
}
.container-methods {
  display: flex;
  flex-direction: column;
}
.container-methods div {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
#content-paypal a {
  text-transform: uppercase;
  text-decoration: none;
}
#selected-reclutante-button {
  border: 1px solid #00e8da !important;
  background: transparent !important;
  color: #fff !important;
  margin-top: 10px !important;
}
.disclaimer-account {
  margin-bottom: 10px;
}
.ui-menu .ui-menu-item-wrapper {
  color: #00072d !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #00e8da !important;
  background: #00e8da !important;
  font-weight: normal;
  color: #00072d !important;
}
.footerMenuComp {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 2;
    gap: 3px;
    left: 0px;
}
.footerMenuComp a {
    background-color: #221B3A;
    width: 100%;
    padding: 14px 0 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.footerMenuComp a img {
    width: 40%;
}
.footerMenuComp a .nomeIcona {
    text-decoration: none;
    font-weight: 700;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
}
.pageLive.contAccount {
    margin-top: 10px;
}
.esitoGara {
  display: flex;
  gap:5px;
}
.esitoGara > button {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    opacity:0.1;
    border:none;
}
.esitoVerde {
  background-color: #00B76A;
}
.esitoRosso {
  background-color: #B70000;
}
div#superstitiInMemoriam {
    display: flex;
    gap: 10px;
}
div#superstitiInMemoriam > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    background-color: #221B3A;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    flex-direction: column;
    padding: 7px;
}
.countCount, .countCount span {
    color: #00e8da;
    font-weight: 600;
}
.titolettoCount {
    text-transform: uppercase;
    font-size: 12px;
}
.rebuy_label {
    color: #383065;
    font-size: 9px;
    margin-bottom: 5px;
    position: relative;
    top: 0px;
    right: 0;
    background-color: #00e8da;
    padding: 1.5px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 800;
    width:fit-content;
}

.badgeRebuy {
    background-color: #00e8da;
    color: #383065;
    font-weight: 800;
    border-radius: 20px;
    height: 20px;
    width: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    text-transform: uppercase;
}
.badgeRebuyMini {
    right: -20px !important;
    font-size: 12px;
    width: 15px;
    height: 15px;
}
button.mini-button.rebuy-button {
    letter-spacing: 0px;
    background-color: transparent;
    color: #00e8da;;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 10px;
    border-color: #00e8da;;
    font-size:10px;
}
body.Sottosopra {
  background: url('../images/bgstranger.webp');
  background-size: 100%;
}
.Sottosopra .giornataMatches .singleMatch .boxLogo img, .Sottosopra .img-scelta-fatta img, .Sottosopra .boxLogoScelto img, .Sottosopra .boxSceltaLogo img {
    transform: rotate(180deg);
}
.Sottosopra .accountSingle {
    background-color: rgba(0, 0, 0, 0.9);
}
.Sottosopra img.survaivo_logo_4ed {
    width: 60%;
    margin-left: 0;
}
.Sottosopra .aggiungiAccount.pannello-login {
  background-color: rgba(0, 0, 0, 0.9);
}
.Sottosopra .pannello-login a {
 border-color: #ff1100 !important;
}
.Sottosopra .footerMenuComp a {
  background-color: rgba(0, 0, 0, 0.9);
}
.Sottosopra .mini-button {
     border-color: #ff1100 !important;
}
.Sottosopra .singleMatch, .Sottosopra .img-scelta-fatta {
  background-color: rgba(0, 0, 0, 0.9);
}
.surv-totomondiale-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 150px;
    padding: 0 26px;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    background: #000b1f;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
    isolation: isolate;
    margin-top: 20px;
}

.surv-totomondiale-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 7, 24, .96) 0%, rgba(0, 14, 36, .86) 48%, rgba(0, 10, 30, .72) 100%),
        radial-gradient(circle at 82% 50%, rgba(33, 229, 139, .18), transparent 34%),
        radial-gradient(circle at 15% 50%, rgba(0, 212, 255, .12), transparent 32%);
}

.surv-tm-banner-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 20% 40%, rgba(33, 229, 139, .16), transparent 28%),
        radial-gradient(circle at 72% 22%, rgba(0, 212, 255, .16), transparent 30%),
        radial-gradient(circle at 92% 80%, rgba(255, 59, 95, .13), transparent 32%),
        linear-gradient(135deg, #000716 0%, #031a3d 50%, #010918 100%);
    animation: survTmBgMove 7s ease-in-out infinite alternate;
}

.surv-tm-grid {
    position: absolute;
    inset: -40px;
    opacity: .10;
    background-image:
        linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: rotate(-8deg);
    animation: survTmGridMove 14s linear infinite;
}

.surv-tm-orb {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    filter: blur(7px);
    opacity: .54;
}

.surv-tm-orb-1 {
    right: 70px;
    top: -60px;
    background: rgba(33, 229, 139, .28);
    animation: survTmOrb1 6s ease-in-out infinite alternate;
}

.surv-tm-orb-2 {
    right: -50px;
    bottom: -80px;
    background: rgba(0, 212, 255, .24);
    animation: survTmOrb2 7s ease-in-out infinite alternate;
}

.surv-tm-orb-3 {
    left: 52%;
    top: 40px;
    width: 110px;
    height: 110px;
    background: rgba(255, 212, 71, .16);
    animation: survTmOrb3 5s ease-in-out infinite alternate;
}

.surv-tm-banner-content {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    width: min(470px, 78%);
}

.surv-tm-banner-kicker {
    width: fit-content;
    padding: 0 3px;
    color: #9dffd1;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-shadow:
        0 0 10px rgba(33, 229, 139, .34),
        0 0 22px rgba(0, 212, 255, .16);
}

.surv-tm-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 94px;
    padding: 12px 22px;
    border-radius: 25px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .028)),
        rgba(0, 10, 30, .54);
    border: 1px solid rgba(140, 247, 200, .45);
    box-shadow:
        0 0 0 1px rgba(33, 229, 139, .11),
        0 0 24px rgba(33, 229, 139, .32),
        0 0 58px rgba(0, 212, 255, .18),
        inset 0 0 28px rgba(0, 0, 0, .22),
        inset 0 0 24px rgba(33, 229, 139, .08);
    animation: survTmLogoNeon 2.8s ease-in-out infinite;
}

.surv-tm-logo-wrap::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 27px;
    background: linear-gradient(
        120deg,
        rgba(33, 229, 139, .80),
        rgba(0, 212, 255, .62),
        rgba(255, 212, 71, .46),
        rgba(33, 229, 139, .80)
    );
    background-size: 260% 260%;
    animation: survTmBorderFlow 4s linear infinite;
    opacity: .55;
}

.surv-tm-logo-wrap::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 19px;
    border: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
}

.surv-tm-banner-logo {
    display: block;
    width: 100%;
    max-height: 70px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 10px rgba(33, 229, 139, .38))
        drop-shadow(0 0 22px rgba(0, 212, 255, .24))
        drop-shadow(0 4px 14px rgba(0, 0, 0, .38));
}

/* Hover */

.surv-totomondiale-banner:hover .surv-tm-logo-wrap {
    transform: translateY(-1px);
}

.surv-totomondiale-banner:hover .surv-tm-banner-logo {
    filter:
        drop-shadow(0 0 13px rgba(33, 229, 139, .48))
        drop-shadow(0 0 28px rgba(0, 212, 255, .28))
        drop-shadow(0 4px 14px rgba(0, 0, 0, .42));
}

/* Animazioni */

@keyframes survTmBgMove {
    0% {
        transform: scale(1) translateX(0);
        filter: saturate(1);
    }

    100% {
        transform: scale(1.08) translateX(-18px);
        filter: saturate(1.14);
    }
}

@keyframes survTmGridMove {
    0% {
        transform: rotate(-8deg) translateX(0);
    }

    100% {
        transform: rotate(-8deg) translateX(68px);
    }
}

@keyframes survTmOrb1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-34px, 28px) scale(1.16);
    }
}

@keyframes survTmOrb2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-48px, -16px) scale(1.12);
    }
}

@keyframes survTmOrb3 {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-18px) scale(1.18);
    }
}

@keyframes survTmLogoNeon {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(33, 229, 139, .10),
            0 0 22px rgba(33, 229, 139, .25),
            0 0 46px rgba(0, 212, 255, .14),
            inset 0 0 28px rgba(0, 0, 0, .22),
            inset 0 0 18px rgba(33, 229, 139, .06);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(33, 229, 139, .18),
            0 0 34px rgba(33, 229, 139, .42),
            0 0 70px rgba(0, 212, 255, .22),
            inset 0 0 30px rgba(0, 0, 0, .24),
            inset 0 0 24px rgba(33, 229, 139, .11);
    }
}

@keyframes survTmBorderFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 260% 50%;
    }
}

/* Mobile */

@media (max-width: 640px) {
    .surv-totomondiale-banner {
        height: 150px;
        padding: 0 16px;
        border-radius: 22px;
    }

    .surv-tm-banner-content {
        width: 100%;
        gap: 9px;
    }

    .surv-tm-banner-kicker {
        font-size: 11px;
        letter-spacing: .16em;
    }

    .surv-tm-logo-wrap {
        height: 92px;
        padding: 12px 16px;
        border-radius: 22px;
    }

    .surv-tm-logo-wrap::before {
        border-radius: 24px;
    }

    .surv-tm-banner-logo {
        max-height: 68px;
    }

    .surv-tm-orb-1 {
        right: 8px;
    }

    .surv-tm-orb-2 {
        right: -90px;
    }

    .surv-tm-orb-3 {
        display: none;
    }
}
.wrapped-banner {
  margin: 18px auto 24px;
  padding: 22px;
  border-radius: 24px;
  max-width: 980px;
  background:
    radial-gradient(circle at top left, rgba(255, 204, 51, 0.35), transparent 32%),
    linear-gradient(135deg, #383065 0%, #21153f 55%, #111 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  border: 2px solid rgba(255,255,255,0.16);
}

.wrapped-banner__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ffcc33;
  color: #21153f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wrapped-banner__title {
  font-family: "Asap Condensed", Inter, sans-serif;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.wrapped-banner__text {
  margin-top: 8px;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.4;
  opacity: 0.88;
}

.wrapped-banner__button { 
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #21153f;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  white-space: nowrap;
}

.wrapped-banner__button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

@media (max-width: 700px) {
  .wrapped-banner {
    margin: 14px 12px 22px;
    flex-direction: column;
    align-items: flex-start;
  }

  .wrapped-banner__button {
    width: 100%;
  }
}