@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

/* --- BASE STYLING --- */
body {
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  background-color: #ddffff;
  text-rendering: optimizeLegibility;
}

.page-header { text-align: center; margin: 24px 0 16px; }
.page-header .title { margin: 0 0 8px; font-weight: 700; font-size: 24px; font-style: italic; text-transform: lowercase; text-decoration: underline; }
.page-header .title::first-letter { text-transform: uppercase;}
.page-header .subtitle { margin-top: -6px; }
.page-header .meta { margin-top: -9px; padding-bottom: 12px; }

/* --- TABLE CORE --- */
.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  margin: auto;
  max-width: 600px; 
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

th {
  color: #D5DDE5;
  background: #1b1e24; 
  border-bottom: 4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size: 16px;
  padding: 12px;
}

/* Zebra Striping - Εφαρμόζεται αυτόματα σε ΟΛΑ τα tr της tbody */
tbody tr:nth-child(odd) td { 
  background: #EBEBEB !important; 
}

/* Hover Effect - Εξαιρούμε τα gaps */
/*tr:not(.hm-sep):hover td:not(.gap):not(.table-legend) {*/
tr:not(.hm-sep):hover td:not(.table-legend) {
  background: #4E5066 !important;
  color: #FFFFFF !important;
}

td {
  background: #FFFFFF;
  padding: 10px;
  text-align: right;
  vertical-align: middle;
  font-weight: 300;
  font-size: 14px;
  border: 1px solid #C1C3D1;
  color: #666B85;
}

/* --- SECTION LOGIC --- */

/* 1. The Gaps (Blue vertical space) */
.gap {
  width: 5px;
  min-width: 5px;
  padding: 0 !important;
  /*border: none !important;*/
  /*background: #ddffff !important;*/ /* Πάντα γαλάζιο */
}

/* 2. Column Sizing (%R and %I) */
.colR, .colI {
  font-size: 12px !important;
}

/* 3. Διαχωριστική Γραμμή Hospital Mean - FIXED */
.table-fill tr.hm-sep td {
  height: 5px;
  padding: 0;
  border: none;
  /* ΔΕΝ ορίζουμε background εδώ, το παίρνει από το nth-child(odd) */
}

/* Εξασφαλίζουμε ότι το gap παραμένει γαλάζιο ακόμα και μέσα στη γραμμή sep */
.table-fill tr.hm-sep td.gap {
  /*background: #ddffff !important; */
}

.ab-color { color: #cc0033; font-weight: 500; }
.table-legend { font-size: 12px; color: #888; text-align: right; padding: 10px; border: none; }