/* GENERAL */

:root {
  --main-color: #39a79e;
  --main-color-hover: #003854;
  --secondary-color: #fff;
  --text-color: #ffffffe6;
  --text-color-button: #000;
  --background: #24252b;
  --background-black: #000;
  --secondary-background: #24252b;
  --gray: #474747;
  --table-header: #363638;
  --search-background: #242424;
  --button-background: #66b22e;
  --cards-background: #363638;
  --navbar: #151419;
}

#planUpdate{
  display: none;
}

.form-check-input:checked {
  background-color: var(--button-background);
  border-color: var(--button-background);
}

* {
  -webkit-font-smoothing: antialiased;
}

.card-login-wait{
  margin-top: 80px;
}

body.body-login {
  background-color: var(--background-black) !important;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color);
  background: url('../img/background.svg') repeat, 
  var(--background); 
  background-size: 180px 180px; /* Define o tamanho do SVG (largura x altura) */
  background: cover;
}

body.capturing,
body.capturing * {
    color-scheme: normal !important;
    forced-color-adjust: none !important;
}

body.capturing {
  background: url('../img/background.svg') repeat, var(--background) !important;
  background-size: 180px 180px !important;
  color: var(--text-color) !important;
  min-height: 100vh !important;
  width: 100% !important;
  overflow: visible !important;
}

body.capturing #data-table,
body.capturing #chartContainer,
body.capturing #resultado {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    zoom: 1 !important;
    overflow: visible !important;
    background: transparent !important;
}

.btn {
  background-color: var(--gray);
  color:var(--text-color-button);
  border: none;
  border-radius: 50px;
  padding: 15px;
  font-size: 14px;
  font-weight: bold;
}

.btn:hover,
.btn.active {
  color: var(--text-color);
  background-color: var(--main-color-hover);
}

.btn .fa {
  color: var(--text-color);
}

.btn:hover .fa {
  color: var(--text-color);
}

.btn:not(:last-child) {
  margin-right: 10px;
}

.btn-primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--text-color-button);
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--main-color-hover) !important;
  border-color: var(--main-color-hover) !important;
}

h2 {
  font-weight: bold;
}

h3 {
  font-weight: bold;
}

a {
  cursor: pointer;
  color: var(--main-color);
}

a:hover {
  color: var(--main-color-hover);
}

label.standard-text {
  font-size: 16px;
  margin-bottom: 6px;
}

.block-content {
  margin-bottom: 40px;
}

#share-button {
  background-color: transparent;
  border: none;
  color: var(--text-color); 
  font-size: 24px;
  cursor: pointer; 
  padding: 0; 
  display: inline-flex; 
  align-items: center; 
  justify-content: flex-start;
  margin-top: 15px;
}

#share-button i {
  margin-right: 0; 
}

#share-button:hover {
  color: var(--button-background); 
}

.flex-grow-1 {
  flex-grow: 0 !important;
}


.black {
  background-color: var(--background);
}

.blue {
  background-color: var(--main-color);
}

.img-fluid {
  margin-right: auto !important;
  margin-left: auto !important;
}

.sobre.tag,
.intro.tag,
section,
footer {
  position: relative;
}

section a.tag,
footer a.tag {
  position: absolute;
  top: -80px;
}

.form-label {
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 0px;
}

div#avgDescription {
  margin-top: 30px;
}

#chartDescription {
  text-align: end; 
  font-weight: bold; 
}

#chartContainer {
  height: 350px; 
}

span#overText {
  color: var(--main-color);
}

span#underText {
  color: #ff7900;
} 

.table-row-below-avg {
  color: #fff;
}

.special-total-row {
  font-weight: bold; 
  text-align: center;
}

.special-total-row td {
  border-top: 2px solid #000; 
  padding: 10px; 
}

td.col-total {
  text-align: left;
}

.special-table {
  width: 100%;
  border: none; 
}

.special-table th, .special-table td {
  text-align: left; 
}


.special-table th:first-child, .special-table td:first-child {
    width: 3%;
    text-align: left;
}


.special-table th:nth-child(2), .special-table td:nth-child(2),
.special-table th:nth-child(3), .special-table td:nth-child(3),
.special-table th:nth-child(4), .special-table td:nth-child(4) {
  width: auto;
}

.special-table .new-col {
  text-align: left;
}

.card {
  width: 20px;
  height: 20px;
  border-radius: 1px;
  display: grid;
  margin: 0 auto;
}

.card.orange {
  background-color: #fd7e14;
}

.card.green {
  background-color: var(--button-background);
} 

.green-card {
  background-color: #39a79e;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: auto;
}

.orange-card {
  background-color: #fd7e14;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: auto;
}


/* menu superior */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: #151419;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-link {
  color: white !important;
}

.navbar-toggler {
  outline: none !important;
  color: var(--secondary-color);
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
  border: none;
}

.logo-navbar {
  max-height: 50px;
  width: 180px;
  display: block;
}

/* login e cadastro */

img.logo-login {
  width: 80%;
}

.btn-login-check {
  border-radius: 10px;
}

.mt-5 {
  margin-top: 1px !important;
}

.card-login, .side-text {
  margin: 0 auto; /* Centralizar o card e o side-text dentro da coluna */
  padding: 0; /* Garantir que não há padding que afete o alinhamento */
}

.check-payment, .side-text-check {
  margin: 0 auto; /* Centralizar o card e o side-text dentro da coluna */
  padding: 0; /* Garantir que não há padding que afete o alinhamento */
}

.check-edit, .side-text-check {
  margin: 0 auto; /* Centralizar o card e o side-text dentro da coluna */
  padding: 0; /* Garantir que não há padding que afete o alinhamento */
}


.card-login{
  background-color: #24252bba;
  padding: 60px;
  width: 90%; /* Ajuste a largura conforme necessário */
  margin-right: 2px;
}

.check-payment{
  background-color: var(--secondary-background);
  padding: 60px;
  width: 90%; /* Ajuste a largura conforme necessário */
  margin-right: 2px;
  margin-bottom: 50px;
  margin-top: 130px;
  border-radius: 6px;
}

.check-edit{
  background-color: var(--secondary-background);
  padding: 60px;
  width: 90%; /* Ajuste a largura conforme necessário */
  margin-right: 2px;
  margin-bottom: 50px;
  margin-top: 130px;
  border-radius: 6px;
}

.side-text {
  width: 15%;
  font-size: 4rem;
  font-weight: 700 !important;
  text-align: left;
  padding-right: 2rem;
  padding-left: 30px;
  margin-left: 2px;
  color: white;
  flex-shrink: 0;
  white-space: normal;
  align-content: center;
}

.side-text-check {
  width: 10%;
  font-size: 4rem;
  font-weight: 700 !important;
  text-align: left;
  padding-right: 2rem;
  padding-left: 30px;
  margin-left: 2px;
  color: white;
  flex-shrink: 0;
  white-space: normal;
  align-content: center;
}

button#btnLogin {
  width: 40%;
}

.forgot-passowrd{
  color: var(--text-color);
}

.change-mail{
  color: var(--text-color);
  float: right;
}

.password-toggle-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.form-group {
  margin-top: 10px;
}

.form-control {
  background-color: var(--background);
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
  border: 1px solid #80808061;
  border-radius: 8px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
  color: var(--text-color); 
  opacity: 1; 
}

.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
  color: black;
}

button#next {
  width: 100%;
}

button#validateCode {
  width: 100%;
}

button#login {
  width: 100%;
}

button#insertPassword {
  width: 100%;
}

.password-container {
  position: relative;
  width: 100%;
}

.password-container .form-control {
  padding-right: 2.5rem; 
}

.password-container .eye {
  position: absolute;
  top: 50%;
  right: 0.75rem; 
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--main-color-hover);
}

/* tela prematch*/

.player-name-prematch {
  white-space: nowrap;
  overflow: hidden;
  display: none;
  margin-bottom: 1px;
}

h2.heading-pre-match {
  text-align: center;
}

p.heading5-pre-match {
  margin-bottom: 2px;
}

.team-image-prematch {
  width: 30px;
  height: auto;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

.paragraphs-odds {
  margin-top: 11px;
}

.btn-padrao.options-prematch {
  width: 100%;
  background-color: var(--button-background);
  color: var(--text-color-button);
  font-weight: 700;
  margin-right: 10px;
  padding: 5px;
  border: none;
  border-radius: 50px;
}

.container.pre-match {
  align-items: center;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  margin-top: 80px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

.options {
  display: flex;
  justify-content: center;
}

.options button:hover {
  background-color: var(--main-color-hover);
  color: var(--text-color);
}

.featured-player-title {
  position: relative;
  left: 0;
  padding: 2px 5px;
  z-index: 1;
  margin-bottom: 10px;
  font-weight: 600;
}

.fixture-item {
  background-color: var(--cards-background) ;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
}

p.odds-title {
  font-size: 15px;
  font-weight: 600;
}

.before-fixture-left {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  margin-right: 10px;
  margin-bottom: 25px;
}

.fixture-left {
  display: flex;
  align-items: flex-start; 
  flex: 1;
  margin-right: 10px;
  text-align: left;
}

.fixture-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  max-width: 500px; 
  white-space: normal; 
  word-break: break-word;
  overflow: hidden;
  min-height: 40px; 
}

.div-up,
.div-down {
  white-space: normal; 
  overflow: visible; 
  text-overflow: initial; 
  margin-bottom: 10px;
}

.team-name-short {
  display: none; 
}

.team-name-full {
  display: inline; 
}


.player-name-prematch-full {
  display: inline;
}

.fixture-time-title {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  display: block;
}

/* .team-image {
  width: 30px;
  height: auto;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border: 2px solid gray;
} */

.team-image{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border: 2px solid gray;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

.team-image-prematch {
  width: 30px;
  height: auto;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

p.odds-prematch {
  margin-bottom: 2px;
  font-size: 12px;
}

p.heading5-pre-match {
  margin-bottom: 2px;
}
  
/* gráfico */

.container.players {
  margin-top: 77px;
}

.input-group .btn {
  position: relative;
  z-index: 1;
}

.category {
  margin-bottom: 10px;
}

.input-group.mb-3.search-app {
  margin-top: 10px;
  color: var(--text-color);
}

select#statistic {
  background-color: var(--search-background) ;
  border: 1px solid #898a8e;
  color: var(--text-color);
  padding: 10px;
  width: 75%;
}

.block-label {
  display: block;
}


text{
  white-space: pre;
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  fill: var(--text-color) !important;
  cursor: default;
}

/* avatar */

.player-container {
  display: flex;
  align-items: center;
}

p.player-profile-text.btn.btn-padrao {
  padding: 7px !important;
}

.player-image img {
  width: 86px;
  margin-right: 15px;
  margin-top: 15px;
  object-position: center;
  object-fit: cover;
  object-position: center;
  border: 3px solid gray !important;
}

.rounded-circle {
  border-radius: 50%!important;
  border: 3px solid gray !important;
}

.rectangular-image {
  border: none;
  border-radius: 50%!important;
}

.player-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.player-info p {
  margin: 0;
  margin-top: 5px; /* Ajuste de margem para espaçamento */
  font-size: 14px;
}

.player-team img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

@media (max-width: 575px){
  p.player-profile-text.btn.btn-padrao {
    margin-left: 105px;
}
}
/* tables */

table {
  width: 100%;
  height: auto;
}

th {
  text-transform: lowercase; 
}

.align-right {
  text-align: right;
}

.data-table {
  width: 100%;
  max-width: 1500px; /* Defina o tamanho máximo da tabela */
  margin: 0 auto; /* Centraliza a tabela na tela */
  border-collapse: collapse; /* Remove espaços entre células */
  font-size: 14px;
  margin-top: 40px;
}

.data-table,
.data-table td {
  padding: 1.5px; /* Espaçamento interno */
}

.data-table th {
  background-color: var(--table-header);
  text-transform: capitalize;
}

table.data-table.filter-table {
  margin-top: 40px;
}

td.align-content{
  text-align: center;
}

th.col-value {
  width: 15%;
  text-align: end;
}

.table-row-black {
  background-color: #00000029;
  color: white;
}

.table-row-green {
  background-color: #000000;
  color: white;
}

.highlight {
    background-color: #66b22e6e;
    color: white;
}

.orange-row {
  background-color: #ff770070;
}


img.football-icon {
  width: 16px;
  margin-right: 5px;
}

.highlight img.football-icon {
  display: inline;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3),
.data-table th:nth-child(4),
.data-table td:nth-child(4) {
    width: 70px; 
    text-align: center;
}

.total-value-cell {
  text-align: center !important;
}

.special-table-center {
  width: 100%;
  border-collapse: collapse;
}

.special-table-center th:nth-child(1),
.special-table-center td:nth-child(1) {
  text-align: center;
  padding: 3px;
}

.special-table-center th:nth-child(2), /* Matches */
.special-table-center td:nth-child(2),
.special-table-center th:nth-child(3), /* League */
.special-table-center td:nth-child(3),
.special-table-center th:nth-child(4), /* Date */
.special-table-center td:nth-child(4),
.special-table-center th:nth-child(5), /* Season */
.special-table-center td:nth-child(5),
.special-table-center th:nth-child(6), /* Value */
.special-table-center td:nth-child(6) {
  width: calc((100% - 50px) / 5); /* Divide a largura restante entre as 5 colunas */
}

.special-table-center th:nth-child(4),
.special-table-center td:nth-child(4),
.special-table-center th:nth-child(5), 
.special-table-center td:nth-child(5),
.special-table-center th:nth-child(6), 
.special-table-center td:nth-child(6) {
    width: calc((100% - 50px) / 5); /* Divide a largura restante entre as colunas */
    text-align: center; 
    white-space: nowrap;
}


th.col-home-away {
  width: 3%;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
  text-align: center;
}

th.align-right {
  width: 5%;
  text-align: right;
}

/* Lista de jogadores */

.col-sm.player-container {
  background-color: var(--cards-background);
  border-radius: 15px;
  padding-left: 20px;
  padding-bottom: 10px
}
 
/* filtros */
p.tag-location {
  margin-bottom: 1px;
}

.hidden-label {
  display: none;
}

label.form-check-label {
  padding: 16px;
}


button.select2-selection__clear {
  display: none !important;
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
  margin-top: 5px !important;
}
    
.select2-container--default .select2-selection--single {
  background-color: #242424 !important;
  border: 1px solid #242424 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000;
  line-height: 28px;
}

span.selection {
  width: 100% !important;
  padding: 5px;
  display: block !important;
  background-color: #242424;
  border: 1px solid #898a8e;
  border-radius: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 28px;
}

.select2-dropdown {
  border: 1px solid #585858 !important;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #585858 !important;
  color: #fff;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--main-color) !important;
  color: white;
}

input.select2-search__field {
  background: #242424 !important;
}

.select2-search--dropdown {
  display: block;
  background-color: var(--background);
  padding: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff; 
}

.select2-container--default .select2-results__option {
  background-color: #242424; 
  color: #fff; 
}

.select2-container--default .select2-results__option--highlighted {
  background-color: #242424; 
  color: #fff; 
}

/* remove background branco do select que está selecionado */
 .select2-container--default .select2-results__option--selected {
  background-color: var(--main-color) !important;
}

.toggle.ios, .toggle-on.ios, .toggle-off.ios { 
  border-radius: 20rem; 
}

.toggle.ios .toggle-handle {
   border-radius: 20rem; 
}

/* select#teamSelect {
  background-color: var(--search-background);
  border: var(--search-background);
  color: var(--text-color);
  width: 30%;
  display: inline;
  margin-left: 10px;
  visibility: hidden;
  padding: 7px;
  border: 1px solid gray;
  border-radius: 10px;
} */

select#teamSelect {
  background-color: var(--search-background);
  border: var(--search-background);
  color: var(--text-color);
  width: 30%;
  display: none; /* Alterado de inline para none */
  margin-left: 10px;
  padding: 7px;
  border: 1px solid gray;
  border-radius: 10px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

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

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.h2h-select {
  display: none;
  margin-top: 10px;
}

.h2h-select.show {
  display: block;
}

.h2h-button.no-search {
  margin-top: 20px;
}

span.select2.select2-container.select2-container--default {
  width: 200px !important;
}

.select2-container--default .select2-results__option--selected {
 background-color: none !important; 
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  height: 26px;
  margin-right: 1px !important;
  padding-right: 0px;
}

.button-search {
  display: grid;
}

.leagues-filter label {
  color: #fff; /* Cor do texto do label para o modo escuro */
}

.form-select.bg-dark.text-light {
  border: 1px solid #444; /* Ajusta a borda para combinar com o modo escuro */
}

/* span.league-tag {
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
  border-radius: 50px;
} */

#league-tags-container {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px; 
  align-items: center;
}

.league-tag {
  padding: 3px 11px 4px 10px;
  background-color: var(--button-background);
  color: var(--text-color-button);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap; 
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
  border-radius: 50px;
}

.league-tag.selected {
  background-color: var(--main-color-hover); 
  color: #fff; 
  border: 1px solid var(--main-color-hover); 
}

.league-tag:hover {
  background-color: var(--main-color-hover);
  color: var(--text-color);
}

.container-filters-tags {
  display: flex;
  gap: 16px; 
  align-items: flex-start; 
}

.container-filters-tags > div {
  flex: 1 1 auto; 
  min-width: 250px; 
}

.with-search {
  display: flex;
  flex-direction: column; 
  align-items: flex-start;
}

.button-search label {
  margin-bottom: 5px; 
}

#teamSelectNew {
  width: 100%; 
  max-width: 400px; 
}

.container.tag-box {
  display: flex;
  flex-direction: column;
  margin-top: 35px;
}

.label-tagbox {
  margin-bottom: 5px;
}


/*  pergunteai search */

form.search-form {
  margin-top: 30px;
}

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

textarea {
  overflow: auto;
  resize: vertical;
  width: 100%;
  height: auto;
  min-height: 50px; 
  background-color: var(--background);
  color: var(--text-color);
  resize: none; 
  border: none;
  outline: none;
  display: none; /* textarea só deve aparecer após envio da pergunta, por padrão fica escondido*/
}

img.logo-pergunteai {
  width: 20%;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

input.input-ai{
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

/* loader toolbar*/

.loader-overlay-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Esmaecer os elementos da tela embaixo */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader-toolbar {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid var(--button-background);
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loader-text-toolbar {
  font-weight: bold;
  font-size: 16px;
  background: linear-gradient(90deg, #f1f1f1, #c0c0c0, #f1f1f1);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: loading 1.5s infinite;
}

.loader-text-toolbar span {
  animation: color-change 1.5s infinite;
}

.loader-text-toolbar span:nth-child(1) { animation-delay: 0s; }
.loader-text-toolbar span:nth-child(2) { animation-delay: 0.1s; }
.loader-text-toolbar span:nth-child(3) { animation-delay: 0.2s; }
.loader-text-toolbar span:nth-child(4) { animation-delay: 0.3s; }
.loader-text-toolbar span:nth-child(5) { animation-delay: 0.4s; }
.loader-text-toolbar span:nth-child(6) { animation-delay: 0.5s; }
.loader-text-toolbar span:nth-child(7) { animation-delay: 0.6s; }

@keyframes color-change {
  0% { color: #fff; }
  50% { color: #3498db; }
  100% { color: #fff; }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* alert */

.swal2-custom {
  background-color: #363638 !important; 
  color: var(--text-color) !important;           
}

.swal2-custom .swal2-title {
  color: var(--text-color) !important;            
}

.swal2-custom .swal2-confirm {
  background-color: var(--button-background) !important; 
  color: var(--text-color) !important;         
  border-radius: 10px;
}

.swal2-custom .swal2-icon.swal2-warning {
  color: #f8bb86 !important;          
  border-color: #f8bb86 !important;    
}

button.swal2-cancel.swal2-custom-cancel.swal2-styled {
  border-radius: 10px;
}

/*botão voltar*/


.page-header {
  position: relative;
  text-align: center; 
  padding: 16px;      
  margin-top: 70px;
}

.heading-page-one.leaderboard {
  display: inline-block; 
  margin: 0; 
  font-size: 24px;
  font-weight: bold;
}

/* Botão de voltar */
.back-button {
  position: absolute;
  left: 16px;       
  top: 50%;         
  transform: translateY(-50%);
  font-size: 30px;
  text-decoration: none;
  color: var(--button-background);
  cursor: pointer;
}

.back-button-edit {
  font-size: 30px;
  text-decoration: none;
  color: var(--button-background);
  cursor: pointer;
}

/* medias */

/* @media (max-width: 767px) {
  .block-content {
    margin-bottom: 25px;
  }
}
 */
 
@media (max-width: 768px){
  .special-table th:first-child, .special-table td:first-child {
    width: 2%;
  }
  .container.heading-welcome {
    margin-top: 80px !important;
  }
  .block-content {
    margin-bottom: 25px;
  }
  .input-group.mb-3.search-app {
    margin-top: 10px;
  }
}

@media (max-width: 300px) {
  .h2h-button {
      margin: 48px;
  }
}

@media (max-width: 500px ){
  select#teamSelect {
    width: 150px;
  }
  th.align-right {
    width: 17%;
  }
  .team-name-short {
    display: inline; 
  }

  .team-name-full {
      display: none; 
  }
  .player-name-prematch-full {
    display: none;
  }
  .player-name-prematch {
    display: inline;
  }
  select#statistic {  
    width: 100%;
  }
  .flex-grow-1 {
    flex-grow: 0.8 !important;
  }
}

@media screen and (min-width: 600px) {
  .card-login {
      margin-bottom: 50px;
      max-width: 500px;
  }
  
  .check-payment {
    margin-bottom: 50px;
    max-width: 700px !important;
  }
}

@media (min-width: 576px) {
  .text-sm-end {
      text-align: right !important;
      align-content: center !important;
  }
}

@media (min-width: 800px){
  img.logo-pergunteai {
      width: 10%;
  }
  span.select2.select2-container.select2-container--default {
    width: 200px !important;
  }
}

@media (min-width: 450px){
    img.football-icon {
      width: 16px;
      margin-right: 5px;
    }
}

@media (min-width: 900px){
  img.football-icon {
    width: 16px;
    margin-right: 5px;
  }
}

@media (min-width: 1000px){
  img.football-icon {
    width: 15px;
    margin-right: 5px;
  }

}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .nav-link {
      padding-right: .5rem;
      padding-left: .5rem;
      display: inline !important;
  }
  .side-text {
    width: 22%;
  }
  
}


@media (max-width: 1048px) {
  .side-text-check{
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .special-table-center th:nth-child(5),
  .special-table-center td:nth-child(5),
  .special-table-center th:nth-child(6), 
  .special-table-center td:nth-child(6) {
      width: 15%;
      word-wrap: break-word; 
  }
  
  .special-table-center th:nth-child(4), 
  .special-table-center td:nth-child(4),
  .special-table-center th:nth-child(5),
  .special-table-center td:nth-child(5),
  .special-table-center th:nth-child(6), 
  .special-table-center td:nth-child(6) {
      text-align: center; 
  }

  .special-table-center th:nth-child(2), 
  .special-table-center td:nth-child(2),
  .special-table-center th:nth-child(3), 
  .special-table-center td:nth-child(3),
  .special-table-center th:nth-child(4), 
  .special-table-center td:nth-child(4) {
    text-align: center;
  }

  .side-text {
        display: none;
  }

  .card-login{
    background-color: var(--secondary-background);
    padding: 40px;
    width: 100%;
  }
  .check-payment {
    background-color: var(--secondary-background);
    padding: 20px;
    width: 100%; 
  }

  .check-edit {
    background-color: var(--secondary-background);
    padding: 20px;
    width: 100%; 
  }

  .container-filters-tags > div {
    width: 100%; /* Força o elemento a ocupar a largura total */
    flex: none; /* Impede que o flex ajuste o tamanho automaticamente */
  }
  
  .container-filters-tags {
    display: flex;
    flex-direction: column; /* Garante que os elementos fiquem empilhados */
    align-items: flex-start;
    gap: 16px; /* Espaço entre os itens */
  }
  
  #league-tags-container {
    gap: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%; /* Certifique-se de que a largura permita a quebra */
  }
  
  
  .with-search {
    width: 100%; 
  }

  .league-tag{
    margin-bottom: 10px;
  }

  p.tag-location {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .container.tag-box {
    width: 100%;
    margin-top: 5px;
    padding-left: 0px;
  }

  .label-tagbox,
  .tag-location {
    margin-bottom: 5px;
  }
}

@media (min-width: 768px) {
  th.col-teams {
      width: 40%;
  }
  th.col-league {
    width: 20%;
  }
  th.col-date {
      width: 20%;
  }
  th.col-season {
      width: 5%;
  }
  th.col-value {
    width: 5%;
    text-align: center;
  }
}


.delete-fixture {
    color: white;
}
.delete-fixture:hover {
  color: red;
}