@charset "utf-8";

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

.page-header {
    background: #3a5073;
  background: #394251;
  padding-left: 20px;
  box-shadow: rgba(125, 128, 136, 0.54) 0px 0px 10px 0px;
}
.page-header h1 {
  margin: 0;
  font-size: 1.85rem;
  color: #FFF;
  font-weight: 600;
  padding: .2rem 0;
}
.rally-table-container{
    box-shadow: rgba(125, 128, 136, 0.54) 0px 0px 10px 0px;
}
/*Navigation buttons*/
/*PAGINATION*/
nav.pagenavigation .btn-secondary.next, nav.pagenavigation .btn-secondary.previous {
  border: .15rem solid;
  box-shadow: rgba(125, 128, 136, 0.5) 0px 0px 4px 0px;
}
.itemid-128 nav.pagenavigation {
  margin: 1rem 0 0;
}


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

/*REGRAS GERAIS*/
table {
  width: 100%;
  border-collapse: collapse;
  /* margin: 2em 0; */
  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 {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
}
thead th {
  text-align: left;
  padding: 0.75em;
  font-weight: 600;
  color: #222;
}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody td {
  padding: 0.75em 0;
  border-bottom: 1px solid #eee;
  color: #444;
}
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
}
/************************************************/


.titalo {
  background-color: #fff;
  margin: 0;
  padding: 15px;
    padding-left: 15px;
  font-size: 1.5rem;
  padding-left: 34px;
}

table#rally  {
    margin: 0 !important;
    font-size: .9rem;
}
table#rally thead   {
    position: sticky;
    top: 0px; /* distance from top of page */
    background: #f4f4f4; /* keep background visible over rows */
    z-index: 3; /* ensure header is above body rows */
    border: solid .1rem var(--gray-400);
    box-shadow: rgba(125, 128, 136, 0.6) 0px 0px 12px 0px;
}
/*regra para mostra e esconder o tag br*/
br.breakline{
    display: none;
  }
@media (max-width: 992px) {
    table#rally  {
    font-size: .85rem;
    }
    .breakline{
    display: inline;
  }
}
@media (max-width: 576px) {
    .rally-container {
      width: 100%;
      background-color: gray;
      height: 600px;
      overflow-x: auto;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
  }
  table#rally thead   {
      position:sticky;
      top: 0px;
      background: #f4f4f4; 
      z-index: 3; 
      border: solid .1rem var(--gray-400);
  }
}
.rally-table-container {
      width: 100%;
      background-color: gray;
      height: 650px;
      overflow-x: auto;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
  }

/*
th.tcol-01
td.tcol-01
*/

/* POSITION */
table#rally .tcol-01 {
  background: #e0e0f2;
  background: #fcffa9;
  width: 40px;
  text-align: center;
  padding-left: .1rem;
  padding-right: .1rem;
  font-weight: 800;
}
table#rally .tcol-02 {
  width: 240px;
}
/* #NUMBER */
table#rally .tcol-04 {  
  /* background: #e0e0f2; */
  width: 40px;
  text-align: center;
  padding-left: .1rem;
  padding-right: .1rem;
  font-weight: 800;
  color:#222;
}

/* CLASS/GRP */
table#rally .tcol-06 {
  width: 40px;
  text-align: left;
  padding-left: .5rem;
  padding-right: .5rem;
  /* background-color: #f1f4fa; */
}
table#rally tbody .tcol-06 {
  font-size: .75rem;
  font-weight: bold;
}

/*TIME*/
table#rally .tcol-07 {

  width: 100px;
  text-align: center;
  padding-left: .1rem;
  padding-right: .1rem;
}
table#rally .tcol-07, 
table#rally .tcol-08, 
table#rally .tcol-09, 
table#rally .tcol-10 {
  width: 75px;
  text-align: right;
  padding-left: .3rem;
  padding-right: .3rem;
  /* background-color: #e0e0f2; */
}
table#rally .tcol-09, 
table#rally .tcol-08{
  display: none;
}

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

/*todas as tabelas do Raly*/
table.rally-tables tbody{
    font-size: .9rem;
}
#rally-team-table {
  margin-top: 5px;
}
/*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: #fcffa9; 
} 
table.team-table tbody tr:hover td.position {
  background-color: #eff381;
}
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; 
    /* background-color: pink; */
}
table.team-table td.time-dif{
    padding: 0.9em 1em 0.5em 0;
    font-size: .78rem;
    color: rgb(78, 81, 218);
}

table.rally-tables .stage-km span::after,
table.rally-tables .stage-speed span::after {
  font-size: .67rem;
}
table.rally-tables .stage-km span::after {
  content: " km";
}
table.rally-tables .stage-speed span::after {
  content: " km/h";
}
table.rally-tables tr[data-withdrawal="sim"]{
    background-color: rgb(249, 236, 234);
    background-color: rgb(253, 245, 244);
    border: .1rem solid #ffc0b9;
    background-color: #a9fffb;
}
table.rally-tables tr[data-withdrawal="sim"] td{
    color: salmon;
    background-color: rgb(253, 245, 244);
}
table.rally-tables tr.team-stage-row[data-withdrawal="sim"] .stage-speed span::after{
    content: "DESISTÊNCIA";
    /* color: salmon; */
    /* font-size: .9rem; */
}
/* table.rally-tables .stage-name {
     display: none;
   } */
@media (max-width: 768px) {
   table.rally-tables .stage-name,
   table.rally-tables .stage-penalty {
     display: none;
   }
}

/*--------------------------------------------------------
JOOMLA DROPDOWN - LIST SEARCH FOR TEAMS
---------------------------------------------------------*/

/* Hide the checkbox */
.mod-articles-dropdown .teams-toggle {
    display: none;
}

/* Dropdown button/label */
.mod-articles-dropdown .teams-dropdown-label {
    display: block;
    padding: 12px 15px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    position: relative;
}

/* Arrow indicator */
.mod-articles-dropdown .teams-dropdown-label::after {
    content: "▼";
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
}

/* Container */
.mod-articles-dropdown {
    position: relative;
    max-width: 300px;
    margin: 1rem 0;
}

/* List collapsed by default - NOW WITH ABSOLUTE POSITIONING */
.mod-articles-dropdown .mod-articlescategory {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Expanded state */
.mod-articles-dropdown .teams-toggle:checked ~ .mod-articlescategory {
    max-height: 400px;
    overflow-y: auto;
}

/* Arrow rotation when open */
.mod-articles-dropdown .teams-toggle:checked ~ .teams-dropdown-label::after {
    transform: rotate(180deg);
}

/* Label border adjustment when open */
.mod-articles-dropdown .teams-toggle:checked ~ .teams-dropdown-label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* List items */
.mod-articles-dropdown .mod-articlescategory li {
    border-bottom: 1px solid #eee;
}

.mod-articles-dropdown .mod-articlescategory li:last-child {
    border-bottom: none;
}

/* Links */
.mod-articles-dropdown .mod-articles-category-title {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.mod-articles-dropdown .mod-articles-category-title:hover {
    background-color: #e8e8e8;
}

/* Scrollbar styling (webkit browsers) */
.mod-articles-dropdown .mod-articlescategory::-webkit-scrollbar {
    width: 8px;
}

.mod-articles-dropdown .mod-articlescategory::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mod-articles-dropdown .mod-articlescategory::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.mod-articles-dropdown .mod-articlescategory::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*--------------------------------------------------------
JOOMLA LIST SEARCH FOR TEAMS menu-x
---------------------------------------------------------*/

/* Arrow indicator */
.mod-articles-dropdown .teams-dropdown-label::after {
    content: "▼";
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
}

/* Container */
.mod-articles-droopdown {
  position: relative;
  max-width: 300px;
  margin: 1rem 0;
  
  
}
.mod-articles-droopdown ul.menu-x{
    display: inline !important;
}
.driver-info {
  line-height: 1.8rem;
}

.mod-articles-droopdown ul.menu-x li.item-dropdown > a{
    padding: 12px;
  background-color: #f0f0f0;
  color: #333;
  box-shadow: rgba(125, 128, 136, 0.3) 0px 0px 10px 0px;
  font-size: 1.1rem;
  border: .15rem solid #d8d8d8;
  text-decoration: none;
  position: relative;
}
.mod-articles-droopdown ul.menu-x li.item-dropdown > a::after {
  /* content: "▾";
  margin-left: 0.4em;
  font-size: 1rem;
  transition: transform 0.3s ease; */
  content: "▼";
  position: absolute;
  right: 15px;
  transition: transform 0.3s ease;
}
.mod-articles-droopdown ul.menu-x li.item-dropdown > a:hover:after {
  transform: rotate(180deg);
}
/* List collapsed by default - NOW WITH ABSOLUTE POSITIONING */
.mod-articles-droopdown .mod-articlescategory {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: white;
    max-height: 400px;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mod-articles-droopdown .nav-item.deeper.parent.item-dropdown {
  width: 100%;
}
 .mod-articles-droopdown a {
  width: 100%;
}
/* List items */
.mod-articles-droopdown .mod-articlescategory li {
    border-bottom: 1px solid #eee;
}

.mod-articles-droopdown .mod-articlescategory li:last-child {
    border-bottom: none;
}

/* Links */
.mod-articles-droopdown ul.menu-x ul.mod-menu__sub a.mod-articles-category-title {
    display: block;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Scrollbar styling (webkit browsers) */
.mod-articles-droopdown .mod-articlescategory::-webkit-scrollbar {
    width: 8px;
}
.mod-articles-droopdown .mod-articlescategory::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.mod-articles-droopdown .mod-articlescategory::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.mod-articles-droopdown .mod-articlescategory::-webkit-scrollbar-thumb:hover {
    background: #555;
}