@import url("./base.css");
@import url("./layout.css");
@import url("./filters.css");
@import url("./table.css");
@import url("./modal.css?v=20251013-1200");
@import url("./forms.css");
@import url("./responsive.css");


@import url("../style.css");


@import url("./scrollbar-global.css");

@import url("./tooltip.css");

@import url("./hide-edit-buttons.css");
@import url("./fix-first-column.css");


@import url("./team-mode-fix.css");
@import url("./sticky-header-fix.css");
@import url("./first-column-hover-fix.css");
@import url("./remarks-column-fix.css");
@import url("./mobile-ranking-filter.css");
@import url("./mobile-modal-fix.css");
@import url("./select-center-fix.css");


:root {
  --table-cell-padding-x: 8px;
  --table-cell-padding-y: 6px;
}


table {
  table-layout: auto !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}


table th,
table td {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important; 
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  overflow: visible;
  text-overflow: clip;
  word-break: break-word; 
}





#rankingTable th.id-column,
#rankingTable td.id-column,
#rankingTable th.type-column,
#rankingTable td.type-column,
#rankingTable th.remarks-column,
#rankingTable td.remarks-column,
#rankingTable th.card-column,
#rankingTable td.card-column {
  width: 60px !important;
  max-width: none !important;
}


.table-container {
  overflow-x: auto;
}


@media (max-width: 768px) {
  table {
    width: 100% !important;
  }
  thead th,
  tbody td {
    white-space: normal !important;
  }
}


#rankingTable {
  table-layout: fixed !important;
  width: 100% !important;
}


#rankingTable th,
#rankingTable td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


html body .container .ranking-section .table-container #rankingTable thead th:nth-child(1),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(1) {
  width: 60px !important;
  max-width: 2% !important;
}


html body .container .ranking-section .table-container #rankingTable {
  table-layout: fixed !important;
}


html body .container .ranking-section .table-container #rankingTable th.type-column,
html body .container .ranking-section .table-container #rankingTable td.type-column { width: 60px !important; max-width: 2% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

html body .container .ranking-section .table-container #rankingTable th.employment-column,
html body .container .ranking-section .table-container #rankingTable td.employment-column,
html body .container .ranking-section .table-container #rankingTable th.job-column,
html body .container .ranking-section .table-container #rankingTable td.job-column,
html body .container .ranking-section .table-container #rankingTable th.card-column,
html body .container .ranking-section .table-container #rankingTable td.card-column,
html body .container .ranking-section .table-container #rankingTable th.battle-level-column,
html body .container .ranking-section .table-container #rankingTable td.battle-level-column,
html body .container .ranking-section .table-container #rankingTable th.main-attr-level-column,
html body .container .ranking-section .table-container #rankingTable td.main-attr-level-column {
  width: 65px !important;
  max-width: 5% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


html body .container .ranking-section .table-container #rankingTable th.id-column,
html body .container .ranking-section .table-container #rankingTable td.id-column { width: 12% !important; max-width: 12% !important; }

html body .container .ranking-section .table-container #rankingTable th.time-column,
html body .container .ranking-section .table-container #rankingTable td.time-column { width: 10% !important; max-width: 10% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

html body .container .ranking-section .table-container #rankingTable th.maps-column,
html body .container .ranking-section .table-container #rankingTable td.maps-column {
  width: 20% !important;
  max-width: 20% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}

html body .container .ranking-section .table-container #rankingTable th.remarks-column,
html body .container .ranking-section .table-container #rankingTable td.remarks-column {
  width: 31% !important;
  max-width: 31% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}


html body .container .ranking-section .table-container #rankingTable thead th,
html body .container .ranking-section .table-container #rankingTable tbody td {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}


html body .container .ranking-section .table-container #rankingTable thead th.dungeon-team-column,
html body .container .ranking-section .table-container #rankingTable tbody td.dungeon-team-column,
html body .container .ranking-section .table-container #rankingTable thead th.planet-team-column,
html body .container .ranking-section .table-container #rankingTable tbody td.planet-team-column {
  display: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}


#rankingTable th.maps-column,
#rankingTable td.maps-column,
#rankingTable th.remarks-column,
#rankingTable td.remarks-column {
  white-space: normal !important;
  word-break: break-word;
  text-overflow: clip !important;
}


 
#rankingTable thead th:nth-child(1),
#rankingTable tbody td:nth-child(1) { width: 60px !important; }

#rankingTable thead th:nth-child(2),
#rankingTable tbody td:nth-child(2) { width: 6% !important; }

#rankingTable thead th:nth-child(3),
#rankingTable tbody td:nth-child(3) { width: 65px !important; }

#rankingTable thead th:nth-child(4),
#rankingTable tbody td:nth-child(4) { width: 10% !important; }

#rankingTable thead th:nth-child(5),
#rankingTable tbody td:nth-child(5) { width: 12% !important; }

#rankingTable thead th:nth-child(6),
#rankingTable tbody td:nth-child(6) { width: 8% !important; }

#rankingTable thead th:nth-child(7),
#rankingTable tbody td:nth-child(7) { width: 10% !important; }

#rankingTable thead th:nth-child(8),
#rankingTable tbody td:nth-child(8) { width: 10% !important; }

#rankingTable thead th:nth-child(9),
#rankingTable tbody td:nth-child(9) { width: 14% !important; }

#rankingTable thead th:nth-child(10),
#rankingTable tbody td:nth-child(10) { width: 20% !important; }




.table-container { overflow-x: auto; }


html body .container .ranking-section .table-container #rankingTable {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}


html body .container .ranking-section .table-container #rankingTable th,
html body .container .ranking-section .table-container #rankingTable td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


html body .container .ranking-section .table-container #rankingTable th.maps-column,
html body .container .ranking-section .table-container #rankingTable td.maps-column,
html body .container .ranking-section .table-container #rankingTable th.remarks-column,
html body .container .ranking-section .table-container #rankingTable td.remarks-column {
  white-space: normal !important;
  word-break: break-word !important;
  text-overflow: clip !important;
}





html body .container .ranking-section .table-container #rankingTable thead th:nth-child(1),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(1) { width: 60px !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(2),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(2) { width: 6% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(3),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(3) { width: 65px !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(4),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(4) { width: 10% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(5),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(5) { width: 12% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(6),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(6) { width: 8% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(7),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(7) { width: 10% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(8),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(8) { width: 8% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(9),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(9) { width: 12% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(10),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(10) { width: 24% !important; }


html body .container .ranking-section .table-container { overflow-x: auto !important; }


html body .container .ranking-section .table-container #rankingTable {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
}


html body .container .ranking-section .table-container #rankingTable th,
html body .container .ranking-section .table-container #rankingTable td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


html body .container .ranking-section .table-container #rankingTable th.maps-column,
html body .container .ranking-section .table-container #rankingTable td.maps-column,
html body .container .ranking-section .table-container #rankingTable th.remarks-column,
html body .container .ranking-section .table-container #rankingTable td.remarks-column {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
}


html body .container .ranking-section .table-container #rankingTable {
  table-layout: fixed !important;
  width: 100% !important;
}
html body .container .ranking-section .table-container #rankingTable thead th,
html body .container .ranking-section .table-container #rankingTable tbody td {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}



html body .container .ranking-section .table-container #rankingTable thead th:nth-child(1),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(1) { width: 60px !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(2),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(2) { width: 6% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(3),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(3) { width: 65px !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(4),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(4) { width: 10% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(5),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(5) { width: 12% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(6),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(6) { width: 8% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(7),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(7) { width: 10% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(8),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(8) { width: 10% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(9),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(9) { width: 14% !important; }

html body .container .ranking-section .table-container #rankingTable thead th:nth-child(10),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(10) { width: 20% !important; }


html body .container .ranking-section .table-container #rankingTable thead th:nth-child(1),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(1),
html body .container .ranking-section .table-container #rankingTable thead th:nth-child(2),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(2),
html body .container .ranking-section .table-container #rankingTable thead th:nth-child(3),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(3),
html body .container .ranking-section .table-container #rankingTable thead th:nth-child(6),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(6),
html body .container .ranking-section .table-container #rankingTable thead th:nth-child(7),
html body .container .ranking-section .table-container #rankingTable tbody td:nth-child(7) {
  width: 65px !important;          
  max-width: 5% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


@media (max-width: 820px) {
  
  .table-container { overflow-x: auto !important; }

  
  #rankingTable {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  
  html body .container .ranking-section .table-container #rankingTable thead th,
  html body .container .ranking-section .table-container #rankingTable tbody td {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body .container .ranking-section .table-container #rankingTable th.type-column,
  html body .container .ranking-section .table-container #rankingTable td.type-column,
  html body .container .ranking-section .table-container #rankingTable th.employment-column,
  html body .container .ranking-section .table-container #rankingTable td.employment-column,
  html body .container .ranking-section .table-container #rankingTable th.job-column,
  html body .container .ranking-section .table-container #rankingTable td.job-column,
  html body .container .ranking-section .table-container #rankingTable th.card-column,
  html body .container .ranking-section .table-container #rankingTable td.card-column,
  html body .container .ranking-section .table-container #rankingTable th.battle-level-column,
  html body .container .ranking-section .table-container #rankingTable td.battle-level-column,
  html body .container .ranking-section .table-container #rankingTable th.main-attr-level-column,
  html body .container .ranking-section .table-container #rankingTable td.main-attr-level-column,
  html body .container .ranking-section .table-container #rankingTable th.id-column,
  html body .container .ranking-section .table-container #rankingTable td.id-column,
  html body .container .ranking-section .table-container #rankingTable th.time-column,
  html body .container .ranking-section .table-container #rankingTable td.time-column,
  html body .container .ranking-section .table-container #rankingTable th.maps-column,
  html body .container .ranking-section .table-container #rankingTable td.maps-column,
  html body .container .ranking-section .table-container #rankingTable th.remarks-column,
  html body .container .ranking-section .table-container #rankingTable td.remarks-column {
    width: 65px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  
  #rankingTable thead th.job-column,
  #rankingTable tbody td.job-column,
  #rankingTable thead th:nth-child(3),
  #rankingTable tbody td:nth-child(3) {
    width: 65px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  
  #rankingTable thead th.id-column,
  #rankingTable tbody td.id-column,
  #rankingTable tbody td.id-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #rankingTable tbody td.id-cell { padding-right: 60px !important; position: relative !important; }

  
  #rankingTable th.maps-column,
  #rankingTable td.maps-column,
  #rankingTable th.remarks-column,
  #rankingTable td.remarks-column {
    white-space: normal !important;
    word-break: break-word !important;
    text-overflow: clip !important;
  }
}