:root {
    --page-bg: #edf1f5;
    --panel: #ffffff;
    --text: #20252b;
    --muted: #68737e;
    --border: #d6dde4;
    --header: #253342;

    --bet365: #087c47;
    --bet365-dark: #06663b;
    --bet365-light: #e7f6ef;

    --bet18: #1769aa;
    --bet18-dark: #12598f;
    --bet18-light: #e7f2fb;

    --sisal: #d97800;
    --sisal-dark: #b96500;
    --sisal-light: #fff2df;

    --betovo: #7139a6;
    --betovo-dark: #5f2f8f;
    --betovo-light: #f2eafb;

    --success: #16843e;
    --warning: #b46900;
    --danger: #c62828;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--page-bg);
    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

.pagina-comparatore {
    width: calc(100% - 80px);
    max-width: 1600px;
    min-width: 1380px;

    margin: 12px auto 40px;

    overflow: hidden;

    background: var(--panel);

    border: 1px solid #c8d1d9;
    border-radius: 7px;

    box-shadow:
        0 3px 14px rgba(31, 42, 53, 0.09);
}

.intestazione-comparatore {
    min-height: 78px;

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    background: #ffffff;

    border-bottom: 1px solid var(--border);
}

.intestazione-comparatore h1 {
    margin: 0 0 6px;

    font-size: 24px;
    line-height: 1.1;
}

.intestazione-comparatore p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.aggiornamento {
    flex-shrink: 0;

    color: var(--muted);

    font-size: 12px;
    white-space: nowrap;
}

.comparatore-wrapper {
    width: 100%;
    overflow-x: auto;
}

#tabella-comparatore {
    width: 100%;
    min-width: 1450px;

    border-collapse: collapse;
    table-layout: fixed;
}

/* =========================
   HEADER GENERALE
   ========================= */

#tabella-comparatore th {
    height: 36px;

    padding: 0 5px;

    color: #ffffff;
    background: var(--header);

    border-right:
        1px solid rgba(255, 255, 255, 0.16);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);

    font-size: 10px;
    font-weight: 700;

    text-align: center;
    text-transform: uppercase;
}

#tabella-comparatore th:last-child {
    border-right: 0;
}

#tabella-comparatore th.bookmaker {
    height: 40px;

    font-size: 13px;
    letter-spacing: 0.02em;
}

/* Header principale bookmaker */

#tabella-comparatore th.bookmaker.bet365 {
    background: var(--bet365);
}

#tabella-comparatore th.bookmaker.bet18 {
    background: var(--bet18);
}

#tabella-comparatore th.bookmaker.sisal {
    background: var(--sisal);
}

#tabella-comparatore th.bookmaker.betovo {
    background: var(--betovo);
}

/* Seconda riga header */

#tabella-comparatore th.bet365-sub {
    background: var(--bet365-dark);
}

#tabella-comparatore th.bet18-sub {
    background: var(--bet18-dark);
}

#tabella-comparatore th.sisal-sub {
    background: var(--sisal-dark);
}

#tabella-comparatore th.betovo-sub {
    background: var(--betovo-dark);
}

#tabella-comparatore th.aggio-heading {
    width: 68px;

    border-left:
        1px dashed rgba(255, 255, 255, 0.35);
}

/* =========================
   LARGHEZZE COLONNE
   ========================= */

.col-data {
    width: 85px;
}

.col-ora {
    width: 60px;
}

.col-partita {
    width: 245px;
}

/*
 * 16 colonne bookmaker:
 * 1, X, 2 e aggio per ogni piattaforma.
 */
.riga-esiti th:not(.aggio-heading) {
    width: 68px;
}

/* =========================
   CELLE GENERALI
   ========================= */

#tabella-comparatore td {
    height: 48px;

    padding: 0 7px;

    background: #ffffff;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    vertical-align: middle;
}

#tabella-comparatore td:last-child {
    border-right: 0;
}

/*
 * Le celle bookmaker hanno il proprio colore,
 * quindi l'alternanza viene applicata soltanto
 * alle prime tre colonne informative.
 */
#tabella-comparatore tbody tr:nth-child(even)
td.data,
#tabella-comparatore tbody tr:nth-child(even)
td.ora,
#tabella-comparatore tbody tr:nth-child(even)
td.partita {
    background: #f6f8fa;
}

#tabella-comparatore tbody tr:hover td {
    filter: brightness(0.97);
}

#tabella-comparatore td.data {
    color: #59636d;

    white-space: nowrap;
}

#tabella-comparatore td.ora {
    font-weight: 700;
    text-align: center;

    white-space: nowrap;
}

#tabella-comparatore td.partita {
    overflow: hidden;

    font-size: 13px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================
   QUOTE
   ========================= */

#tabella-comparatore td.quota {
    width: 68px;

    padding: 0 4px;

    overflow: visible;

    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

/* Bet365 */

#tabella-comparatore td.quota-bet365,
#tabella-comparatore td.aggio-bet365 {
    background: var(--bet365-light);
    color: var(--bet365);
}

/* 18Bet */

#tabella-comparatore td.quota-18bet,
#tabella-comparatore td.aggio-18bet {
    background: var(--bet18-light);
    color: var(--bet18);
}

/* Sisal */

#tabella-comparatore td.quota-sisal,
#tabella-comparatore td.aggio-sisal {
    background: var(--sisal-light);
    color: #a85b00;
}

/* Betovo */

#tabella-comparatore td.quota-betovo,
#tabella-comparatore td.aggio-betovo {
    background: var(--betovo-light);
    color: var(--betovo);
}

/* Separatore iniziale di ogni bookmaker */

#tabella-comparatore td.quota-bet365[data-esito="1"],
#tabella-comparatore td.quota-18bet[data-esito="1"],
#tabella-comparatore td.quota-sisal[data-esito="1"],
#tabella-comparatore td.quota-betovo[data-esito="1"] {
    border-left:
        3px solid rgba(35, 48, 60, 0.22);
}

/* =========================
   AGGIO
   ========================= */

#tabella-comparatore td.aggio {
    width: 68px;

    padding: 0 4px;

    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;

    text-align: center;
    white-space: nowrap;

    border-left:
        1px dashed rgba(35, 48, 60, 0.2);
}

#tabella-comparatore td.aggio-basso {
    color: var(--success);
}

#tabella-comparatore td.aggio-medio {
    color: var(--warning);
}

#tabella-comparatore td.aggio-alto {
    color: var(--danger);
}

/* =========================
   BET365 SUPERIORE A 18BET
   ========================= */

#tabella-comparatore td.bet365-migliore {
    position: relative;

    background: #cef2dd !important;
    color: #006c35 !important;

    box-shadow:
        inset 0 0 0 2px
        rgba(0, 140, 67, 0.42);
}

#tabella-comparatore td.bet365-migliore::after {
    content: "";

    position: absolute;
    top: 5px;
    right: 5px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00a651;

    box-shadow:
        0 0 0 3px
        rgba(0, 166, 81, 0.14);
}

/* =========================
   VARIAZIONE QUOTE
   ========================= */

#tabella-comparatore td.flash {
    background: #ffe066 !important;
    color: #20252b !important;

    animation:
        quotaAggiornata 2.2s ease-out;
}

#tabella-comparatore td.quota-su::before {
    content: "▲ ";

    color: #087c47;

    font-size: 8px;
}

#tabella-comparatore td.quota-giu::before {
    content: "▼ ";

    color: #c62828;

    font-size: 8px;
}

@keyframes quotaAggiornata {
    0% {
        background: #ffd43b;
        transform: scale(1.08);
    }

    60% {
        background: #ffe066;
    }

    100% {
        transform: scale(1);
    }
}

/* =========================
   MESSAGGI
   ========================= */

#tabella-comparatore tr.riga-messaggio td {
    height: 80px !important;

    background: #ffffff !important;
    color: var(--muted) !important;

    font-weight: 400 !important;
    text-align: center !important;
}