@charset "utf-8";

/*------------------------------------------------------------------
MODULO ARTICLES - NAVEGAÇÃO NAS PÁGINAS CATEGORIA STAGES
------------------------------------------------------------------*/
.module.filter-module {
  /* overflow: scroll; */
  overflow-x: auto;
}

.filter-module ul.mod-articles.mod-list {
  display: flex;
  list-style: none;  
  justify-content: space-around;
  margin-top: 70px;
  margin-bottom: 0px;
  padding: 0 !important;
}
.filter-module ul.mod-articles.mod-list li {
  border-right: 0px solid #dee0e4;
  text-transform: uppercase;
  width: 100%;
  margin: auto;
  text-align: center;
  height: 90px;
  background-color: #fff;
}
.filter-module ul.mod-articles.mod-list li:last-child {
  border-right: 0px solid #dee0e4;
}
.filter-module ul.mod-articles.mod-list li a {
  text-decoration: none;
  color: #394251;
  font-size: .9rem;
  font-family: "bould";
  font-weight: 500;
  min-width: 80px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  border-bottom-color: #293657;
}
.filter-module ul.mod-articles.mod-list li a:hover{
  background-color: #EEE;
  color: #394251;
}
.filter-module ul.mod-articles.mod-list li a:focus{
  background-color: #515b73;
  color: #FFF;
}
.filter-module ul.mod-articles.mod-list li a.active{
  background-color: #293657;
  color: #FFF;
  font-weight: 600;
}
.filter-module ul.mod-articles.mod-list li a.active:hover{
  background-color: #293657;
  color: #FFF;
}
.filter-module ul.mod-articles.mod-list li[data-stage-state="pending"] a{
  border-bottom: 4px solid #515b73;
}
.filter-module ul.mod-articles.mod-list li[data-stage-state="active"] a{
  border-bottom-color: #e3ff21;
  border-bottom-color: #d5f400;
  border-bottom-color: #b7f400;
}
/* .filter-module ul.mod-articles.mod-list li[data-stage-state="active"] a:hover{
  border-bottom: 4px solid #62dc0b;
}
.filter-module ul.mod-articles.mod-list li[data-stage-state="active"] a:focus{
  border-bottom: 4px solid #62dc0b;
} */
.filter-module ul.mod-articles.mod-list li[data-stage-state="active"] a.active,
.filter-module ul.mod-articles.mod-list li[data-stage-state="active"] a.active:hover{
  background-color: #293257;
  border-bottom-color: #d5f400;
}
/* .filter-module ul.mod-articles.mod-list li[data-stage-state="completed"] a{
  border-bottom: 4px solid #293657;;
} */
.filter-module ul.mod-articles.mod-list li[data-stage-state="canceled"] a{
  border-bottom: 4px solid #bfbfbf;
}

.filter-module ul li a div {
  line-height: 1.5;
}
.filter-module .stage-week-day {
  color: #adadad;
  font-weight: 400;
}
.filter-module .overall .stage-week-day {
  display: none;
}


/*------------------------------------------------------------------
CUSTOM TEMPLATE - TABS NAVIGATION
------------------------------------------------------------------*/

/* Tab Navigation */
.rally-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
}
.rally-tab {
    padding: 8px 25px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease;
    margin-bottom: -2px;
}
.rally-tab:hover {
    color: #333;
    background: #f5f5f5;
}
.rally-tab.active {
    color: #000;
    border-bottom-color: #007bff; /* Your brand color */
    border-bottom-color: #0088ff;
    border-bottom-color: rgb(70, 134, 244);
    font-weight: 700;
}
/* Tab Content */
.rally-tab-content {
    display: none;
}
.rally-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*tab animation*/
/* Fade in tabs on page load */
.rally-tabs,
.rally-tab-content {
    animation: fadeInOnLoad 0.8s ease-out;
}

@keyframes fadeInOnLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Existing tab switch animation (keep this) */
.rally-tab-content.active {
    display: block;
    animation: fadeIn 0.8s ease; /* This is for tab switching */
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*------------------------------------------------------------------
  CUSTOM TEMPLATE - TITULO DA STAGE
------------------------------------------------------------------*/
.stage-info {
  margin-bottom: 10px;
  color: #1b1b2b;
  font-weight: 500;
}

/*------------------------------------------------------------------
CUSTOM TEMPLATE - TITULOS DAS TABELAS
------------------------------------------------------------------*/
.menu-pag-resultados #main-content-area main {
  padding-top: 20px;
}
.overall-table-title {
  margin-bottom: 22px;
}
h2.table-title{display: none;}


/*------------------------------------------------------------------
H1 TITULO DA PÁGINA E TABELA
------------------------------------------------------------------*/

.pag-resultados .page-header {
  background: #394251;
  padding-left: 20px;
  box-shadow: rgba(125, 128, 136, 0.54) 0px 0px 10px 0px;
}
.pag-resultados .page-header h1 {
  margin: 0;
  font-size: 1.85rem;
  color: #FFF;
  font-weight: 600;
  padding: .2rem 0;
}
.pag-resultados .rally-table-container{
    box-shadow: rgba(125, 128, 136, 0.54) 0px 0px 10px 0px;
}



/*------------------------------------------------------------------
TABELA RALLY
------------------------------------------------------------------*/

/*REGRAS GERAIS*/
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  font-family: sans-serif;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border: solid .1rem var(--gray-400);
}
caption {
  caption-side: top;
  text-align: left;
  font-weight: bold;
  font-size: 1.1em;
  padding-bottom: 0.5em;
  color: #333;
}
thead {
  border-bottom: 0px solid #ddd;
}
thead th {
  text-align: left;
  padding: 0.75em;
  font-weight: 600;
  vertical-align: bottom;
  height: 50px;
}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody td {
  padding: 0.75em 0;
  border-bottom: 1px solid #eee;
}
tbody tr:hover {
  background-color: #f0f0f0;
}
td, th {
  vertical-align: top;
}

/*parecem ser regras criadas por mim estavam no joomla.css*/
.table th {
  font-weight:500
}
.table thead th {
  white-space:nowrap;
  border-bottom-width:1px
}
.table th,
.table td {
  vertical-align:middle
}
.table th label,
.table td label {
  margin-bottom:0
}



/*/////////////////////////////////////////////////////////////////

ALL RALLY TABLES
/////////////////////////////////////////////////////////////////*/

/*todas as tabelas do Raly*/
table.rally-table thead{
    font-size: .8rem;
}
table.rally-table tbody {
  font-size: .8rem;
}
table.rally-table td{
  vertical-align: middle;
}
table.rally-table thead {
    position: sticky !important;
    top: 0px !important;
    z-index: 3 !important;
    border: none !important;
    padding: 50px 0;
    background-color: hsl(20, 6%, 90%);
    color: hsl(21.8, 6.4%, 66.5%);
    font-size: .85rem;
}
.tcol-05.stage-time {
  display: none;
}



/*/////////////////////////////////////////////////////////////////

  RALLY STAGE TABLES
/////////////////////////////////////////////////////////////////*/

.rally-table-container{
  border: solid .1em var(--gray-400);
}

@media (max-width: 576px) {
  .rally-table-container {
    max-height: 480px;
    width: 100%;
    background-color: #FFF;
    overflow-x: auto;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    position: relative;
  }
  .shadow-div {
    display: block;
  }
  .hold-shadow-div{
    position: relative;
    overflow: hidden;
  }
  .shadow-div {
    padding: 20px;
    background-color: #FFF;
    box-shadow: rgb(175, 177, 179) 0px 0px 15px 0px;
    width: 100%;
    position: absolute;
    bottom: -40px;
    display: none;
  }
}

@media (max-width: 330px) {
    #numero,
    .stage-table.stage .tcol-04 {
      display: none;
    }
}
@media (max-width: 360px) {
    #bandeira,
    .stage-table.stage .nation-flag {
      display: none;
    }
}
@media (max-width: 420px) {  
    #penalty,
    .tcol-08 {
      display: none;
    }
} 
@media (max-width: 576px) {
    #co-piloto,
    .stage-table.stage .tcol-03 {
    display: none;
    }
    
    #grupo,
    .stage-table.stage .tcol-06 {
      display: none;
    }
}
@media (max-width: 720px) {
    .stage-table.stage .nome,
    .stage-table.stage .marca,
    .stage-table.stage .modelo{
    display: none;
    }
    table.stage-table.stage .tcol-05 {
      width: 45px;
      min-width: 45px;
      max-width: 45px;
    }
}
/* @media (max-width: 768px) {
    .stage-table.stage .nome{
    display: none;
    }
} */
@media (max-width: 992px) {
    .stage-table.stage .marca{
    display: none;
    }
    .stage-table.stage .nome{
    display: none;
    }
}
/*inicial dos nomes dos pilotos*/
@media (min-width: 992px) {
    .stage-table.stage .inicial{
    display: none;
    }
}

/* 
  POSITION
*/
table.stage-table.stage .tcol-01 {
  width: 50px;
  min-width: 40px;
  text-align: center;
  padding-left: .1rem;
  padding-right: .1rem;
  font-weight: 800;
}
table.stage-table.stage td.position{
  font-weight: bold;
  font-size: 1rem;
  line-height: normal;
  background-color: hsl(68, 100%, 78%); 
  background-color: #EDFF94;
}
table.stage-table.stage tbody tr:hover td.position {
  background-color: #e2ef84;
}

/* 
  TEAM #NUMBER 
*/
table.stage-table.stage .tcol-04 {
  width: 50px;
  min-width: 50px;
  padding-left: 5px;
  padding-right: 10px;
  text-align: center;
}
table td.car-number {  
  text-align: center;
}
table td.car-number span{  
  margin-right: -1px;
}

/* 
  DRIVER / CO-DRIVER
*/
table th.pilot,
table th.co-pilot{
  padding-left: 0;
  padding-right: 0;
}
table.stage-table.stage .nation-flag {
  position: relative;
  padding-left: 34px;
}
table.stage-table.stage .tcol-02,
table.stage-table.stage .tcol-03 {
  width: 230px;
  min-width: 80px;
  /* padding-left: 15px; */
}
table.stage-table.stage td .driver-wrapper {
  display: flex;
  align-content: center;
}
table.stage-table.stage td .driver-wrapper .inicial,
table.stage-table.stage td .driver-wrapper .nome {
  padding-right: 5px;
}
/*bandeirinha*/
table.stage-table.stage .nation-flag {
  position: relative;
  padding-left: 30px;
  width: 22px;
  height: 22px;
}
table.stage-table.stage .nation-flag::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  top: -1px;
  bottom: inherit;
  margin: auto 0;
  left: 0;
}
/*
 Drivers Links 
*/
.driver-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.driver-link:hover {
    text-decoration: underline;
    /* color: #007bff; */
}

/* 
  TEAM CAR 
*/
table.stage-table.stage .tcol-05 {
  width: 295px;
  min-width: 40px;
}
table td.team-car {
  font-size: .73rem;
}
table td.team-car .team-car-wrapper{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
table td.team-car .car-logo {
  margin-right: 8px;
}
table td.team-car .car-logo,
table td.team-car .car-logo::before {
  width: 35px;
  height: 35px;
  bottom: 0;
}

table td.team-car .car-model {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  margin-right: 20px;
  font-family: Arial, sans-serif;
  line-height: inherit;
  text-transform: uppercase;
  align-items: center;
}
table td.team-car .car-model .marca {
  font-weight: 500;
  padding-left: 0px;
  margin-right: 5px;
}
/* 
  GRUPO (Class/Group)
*/
table.stage-table.stage .tcol-06 {
  text-align: left;
  padding-left: .3rem;
  padding-right: .3rem;
  /* background-color: #f1f4fa; */
}
.stage-table.stage td.team-group {
  font-size: .73rem;
  font-weight: bold;
}
/*
  COL TEMPOS
*/
table.rally-table .stage-time,
table.rally-table .stage-penalty,
table.rally-table .stage-total-time,
table.rally-table .time-dif {
  max-width: 80px;
  min-width: 70px;
  width: 80px;
}

.stage-table.stage .tcol-07{
  display: none;
}

table.rally-table th.stage-time,
table.rally-table th.stage-penalty,
table.rally-table th.stage-total-time,
table.rally-table th.time-dif {
  text-align: right !important;
  padding-right: 10px !important;
}

table.rally-table td.stage-time,
table.rally-table td.stage-penalty,
table.rally-table td.stage-total-time,
table.rally-table td.time-dif {
  text-align: right;
  padding-left: 0rem;
  padding-right: .5rem;
}
table.rally-table td.stage-penalty {
  text-align: center;
  text-align: right;
  padding-left: 0rem;
  padding-right: 1rem;
}

/* table.rally-table .stage-time{
  background-color: #d7fffd !important;
}
table.rally-table .stage-penalty{
  background-color: #fff4d4 !important;
}
table.rally-table .stage-total-time{
  background-color: #e7ffd7 !important;
}
table.rally-table .time-dif{
  background-color: #e7ecff !important;
} */

/*
  DIFFERENCE
*/
/* table tr th:last-child,
table tr td:last-child{
  padding-right: 10px !important;
} */
table.rally-table td.time-dif{
  font-size: .8rem;
}
@media (max-width: 576px) {
    .rally-container {
      width: 100%;
      background-color: gray;
      height: 600px;
      overflow-x: auto;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
  }
}


/*--------------------------------------------------------
TEAM TABLES
---------------------------------------------------------*/

.rally-team-performance-wrapper .rally-table-container {
  border: solid .0em var(--gray-400);
  margin-top: 12px;
}
/*tabela da página Equipa*/
table.team-table .stage-km, 
table.team-table .stage-speed,
table.team-table .stage-time,
table.team-table .stage-penalty,
table.team-table .stage-total-time,
table.team-table .time-dif{
  text-align: right;
}
/* table.team-table .stage-time{
    display: none;
} */
table.team-table .stage-id,
table.team-table .stage-name{
  text-align: left;
}
table.team-table td.stage-id{
  font-weight: bold;
}
table.team-table .position{
  text-align: center;
  width: 60px;
}
table.team-table td.position{
  font-weight: bold;
  font-size: 1rem;
  line-height: normal;
  background-color: hsl(68, 100%, 78%); 
  background-color: #EDFF94;
  
} 
table.team-table tbody tr:hover td.position {
  background-color: #e2ef84;
}
table.team-table .stage-id{
    width: 75px;
    padding: 0.75em 0 0.75em 0.75em;
}
table.team-table td.stage-id{
    /* background-color: #a9fffb; */
}
table.team-table .stage-name{ 
    width: 200px;
    font-size: .8rem;
}
table.team-table td.stage-name{ 
    font-weight: 500;
    /* background-color: #a9fffb; */
    text-transform: uppercase;
}
table.team-table .stage-km{ 
    width: 60px;
}
table.team-table td.stage-km{ 
    padding: 0.75em 0;
    /* background-color: #dea9ff; */
}
table.team-table .stage-speed{ 
    max-width: 100%;
}
table.team-table .stage-time,
table.team-table .stage-penalty,
table.team-table .stage-total-time{
    width: 85px;
}
/* table.team-table .stage-total-time{
    padding: 0.75em 0 0.75em 0.75em;
    font-weight: 600;
} */
/* table.team-table .time-dif{
    padding: 0.75em 1em 0.75em 0;
    width: 70px; 
} */
table.team-table td.time-dif{
    padding: 0.9em 1em 0.5em 0;
    font-size: .78rem;
    color: rgb(78, 81, 218);
}

table.rally-table .stage-km span::after,
table.rally-table .stage-speed span::after {
  font-size: .67rem;
}
table.rally-table .stage-km span::after {
  content: " km";
}
table.rally-table .stage-speed span::after {
  content: " km/h";
}

/*STAGE ACTIVA*/
table.rally-table tr[data-stage-state="active"] {
  border: .15rem solid #cce900;
  background-color: #faffdc;
}

/*EQUIPA EM COMPETIÇÃO*/
table.rally-table tr[data-team-state="in-action"] {
  border: .15rem solid #cce900;
  background-color: #f3ff9d42;
  background-color: #f7ff9d42;
}
table.rally-table tr[data-team-state="in-action"] td{
      color: rgb(97, 117, 0);
    /* background-color: rgb(244, 253, 244); */
}
table.team-table tbody tr[data-team-state="in-action"]:hover td.position {
  /* background-color: rgb(245, 253, 244); */
}
table.rally-table tr[data-team-state="withdrawn"] td span.avg-speed,
table.rally-table tr[data-team-state="in-action"] td span.avg-speed{
    display: none;
}
/*DESISTENCIA*/
table.rally-table tr[data-team-state="withdrawn"] {
    background-color: rgb(249, 236, 234);
    background-color: rgb(253, 245, 244);
    border: .1rem solid #ffc0b9;
    /* background-color is set at the <td> level */
}
table.rally-table tr[data-team-state="withdrawn"] td{
    color: salmon;
    background-color: rgb(253, 245, 244);
}
table.team-table tbody tr[data-team-state="withdrawn"]:hover td.position {
  background-color: rgb(253, 245, 244);
}

/*------------------------------------------------------------------
  TESTES DO CLAUDE
------------------------------------------------------------------*/
/* Style for competing teams (no time yet, not withdrawn) */
tr[data-competing="yes"][data-withdrawal="no"] {
    /* background-color: rgb(245, 253, 244);
    border: .1rem solid #56aa53; */
    border: .15rem solid #cce900;
    background-color: #faffdc;
    font-style: italic;
    /* opacity: 0.8; */
}

/* Style for withdrawn teams */
table.rally-table tr[data-withdrawal="yes"] {
    background-color: rgb(253, 245, 244);
    border: .1rem solid #ffc0b9;
    border: .1rem solid #ffcbc5;
}
table.rally-table tr[data-withdrawal="yes"] td.position{
    background-color: rgb(253, 245, 244);
}
table.rally-table tr[data-withdrawal="yes"]:hover td.position{
    background-color: rgb(253, 245, 244) !important;
}
table.rally-table tr[data-withdrawal="yes"] td{
    color: salmon;
    color: #f09086;
    background-color: rgb(253, 245, 244);
}
table.rally-table tr[data-withdrawal="yes"] td .nation-flag,
table.rally-table tr[data-withdrawal="yes"] td .car-logo {
    filter: grayscale(80%);
    opacity: .45;
}

@media (max-width: 768px) {
   table.rally-table .stage-name,
   table.rally-table .stage-penalty {
     display: none;
   }
}