:root {
    --background-color-main1: #454545;
    --background-color-main2: #505050ff;
    --background-color-main3: #535353;
    --border-color-main1: #393939;
    --border-color-main2: #00000020;
    --border-color-main3: #00000030;
    --border-color-main4: #FFFFFF60;
    --displayLand: table-cell;
    --displayPort: none;
    --displayprint: none;
    --topbar-h: 6.5rem;
    --tooltipWidth: auto;
    --font-size-html: 8px;
    --selected-color: #00000020;
    --last-values: #FFFFFF30;
    --portiere: #fcd256;
    --portiereScuro: color-mix(in srgb, var(--portiere) 95%, black);
    --difensore: #ff7d73;
    --difensoreScuro: color-mix(in srgb, var(--difensore) 95%, black);
    --centrocampista: #4ab678;
    --centrocampistaScuro: color-mix(in srgb, var(--centrocampista) 95%, black);
    --attaccante: #4876f5;
    --attaccanteScuro: color-mix(in srgb, var(--attaccante) 95%, black);
}

@media (orientation: portrait) {
    :root {
        --displayLand: none;
        --displayPort: table-cell;
        --tooltipWidth: calc(100% - 40px);
    }
}

/* Landscape (orizzontale) */
@media (orientation: landscape) {
    :root {
        --displayLand: table-cell;
        --displayPort: none;
    }
}

@media screen and (orientation: landscape) and (min-width: 1200px) {
    :root {
        --displayLand: table-cell;
        --displayPort: none;
        --displayprint: flex;
    }
}

@media (max-width: 800px) {
    :root {
        --displayLand1: none;
        --displayPort: flex;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-html: 8px;
    }
}

.displayLandscape {
    display: var(--displayLand);
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.02);
}


::-webkit-scrollbar-thumb {
    background: #00000040;
    border-radius: 999px;
    border: 1px solid #9d9d9d;
}

::-webkit-scrollbar {
    width: 1.2rem;
}

/* Scrollbar orizzontale */
::-webkit-scrollbar:horizontal {
    height: 1.2rem;
}

/* body */
html {
    font-size: var(--font-size-html);
    scrollbar-width: thin;
}

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

body {
    font-size: 2.1rem;
    font-family: Arial, sans-serif;
    background:
        url("../img/favpng_600h.png") no-repeat right bottom fixed,
        linear-gradient(to bottom, #efefef, #cccccc);
}

/* loader icon */
.loader {
    width: 2rem;
    height: 2rem;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 100px auto;
    user-select: none;
    outline: none !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* link */

a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
    font-weight: normal;
    background: none;
}

/* Controls */

#searchPlayer,
button,
.colControls label,
select {
    background-color: #ffffff;
    border-radius: 0.4rem;
    border: 2px solid #101010;
    cursor: pointer;
    color: #000000;
    font-family: Arial;
    font-size: 1.8rem;
    justify-content: center;
    text-decoration: none;
    height: 3.8rem;
    padding: 0.4rem;
}

/* secondary: bordo sottile e chiaro, per pulsanti, combo e caselle di testo */
button.secondary,
select.secondary,
input.secondary {
    border: 1px solid var(--border-color-main3);
    background-color: #ffffff50;
}

/* (stesso bordo per la combo .multiselect-btn: css/menu.css) */
select.secondary:focus {
    border: 1px solid var(--centrocampista) !important;
    outline: none;
}

button:hover {
    border: 2px solid #0e2b0b;
    background-color: var(--centrocampista);
    box-shadow: 0px 0px 0.5rem #00000080;
}

/* secondary al passaggio del mouse: resta il bordo sottile (button:hover lo farebbe nero da 2px) */
button.secondary:hover {
    border: 1px solid var(--centrocampista) !important;
    background-color: #4ab67880;
}

/* in scrittura: bordo e ombra come il pulsante secondary al passaggio del mouse */
input.secondary:focus {
    border: 1px solid var(--centrocampista);
    box-shadow: 0px 0px 0.5rem #00000080;
    outline: none;
}

button.running:disabled {
    background-color: var(--portiere) !important;
    color: #ec3801 !important;
    box-shadow: 0px 0px 0.5rem #00000080;
}

button.secondary:disabled,
select.secondary:disabled,
input.secondary:disabled {
    border: 1px solid #757575 !important;
}

label {
    cursor: default;
}

.searchBox:disabled,
input.secondary:disabled,
select:disabled,
button:disabled {
    background-color: #cccccc !important;
    color: #666666;
    border: 2px solid #757575 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.small-control button {
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #b9b9b9;
    font-size: 1.7rem;
    width: 10rem;
}

.small-control button:hover {
    background-color: var(--selected-color);
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    width: 100%;
}

.autoCompleteGray {
    color: #bdbdbd;
}

.autoCompleteGray:focus {
    color: #000000;
}

/* caselle di testo: stile base, senza bordo visibile (si integra in tabelle e righe).
   Con la classe "secondary" (sopra) hanno il bordo di button e select secondary */
input {
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background-color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    width: 100%;
    height: 3.8rem;
}

input.secondary {
    padding: 0 0.6rem;
}

input:focus {
    outline: none;
    border: 1px solid var(--border-color-main1);
    background-color: #ffffff;
}

.autocomplete {
    position: relative;
    display: inline-block;
    /* oppure una larghezza fissa */
}

.autocomplete-items {
    position: absolute;
    border: 1px solid var(--border-color-main1);
    border-top: none;
    z-index: 99;
    /* si adatta al contenitore .autocomplete */
    top: 100%;
    left: 0;
    box-sizing: border-box;
}

.autocomplete-items div {
    font-size: inherit;
    font-weight: inherit;
    padding: 2px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid var(--border-color-main2);
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.searchBox {
    border: 2px solid #000000FF !important;
    font-size: 2rem;
    width: 24rem;
    text-align: left;
    height: 3.8rem !important;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 0.4rem;
}

/* Tables */

table {
    font-size: 1.5rem;
}

table {
    table-layout: auto;
    border-spacing: 0;
    border-collapse: collapse;
}


.th-sortable {
    cursor: pointer;
}

.sortable th {
    position: relative;
}

.scroll-table {
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 0px solid var(--border-color-main2);
}

@media (min-height: 500px) {
    .scroll-table {
        max-height: calc(100dvh - 17rem - var(--topbar-h));
    }
}

.tbplayer {
    width: 100%;
    background-color: #ffffff20;
    border: 0px solid var(--border-color-main2);
    border-collapse: collapse;
}

.header {
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    background-color: var(--background-color-main2);
    border: none !important;
    text-align: center;
    height: 3.0rem;
}

.footer {
    color: rgb(0, 0, 0);
    background-color: #a0a0a0;
    text-align: center;
    padding: 0.5rem;
}

.tbplayer thead {
    background: var(--background-color-main2);
}

.tbplayer thead tr {
    position: sticky;
    top: 0;
    z-index: 5;
}

.tbplayer th {
    user-select: none;
    outline: none !important;
    border: none;
}

.tbplayer tfoot th {
    background-color: #a0a0a0;
}

.tbplayer th,
.tbplayer td {
    padding: 0.2rem;
    text-align: center;
}

.tbplayer td {
    border-bottom: 1px solid var(--border-color-main2);
}

.tbplayer.withOutBottonBorder tr:last-child td {
    border-bottom: none;
}

.tbplayer>tbody>tr:nth-child(even) {
    background-color: #FFFFFF40;
}

.tbplayer thead th.headerLast {
    background-color: var(--last-values);
}

.tbplayer tfoot {
    position: sticky;
    bottom: 0;
    z-index: 15;
    border-bottom: 0 !important;
}

@media (orientation: landscape) {

    .trdatarow:hover {
        background-color: var(--selected-color) !important;
        cursor: pointer;
    }
}

.note {
    font-size: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: rgb(118, 118, 118);
}

.displayLandscape {
    display: var(--displayLand) !important;
}

.displayPortrait {
    display: var(--displayPort) !important;
}

.displayPrint {
    display: var(--displayprint) !important;
}

/* Top bar */
.divtop {
    font-size: 3.2rem;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    padding: 1rem 2rem 1rem 1rem;
    align-items: center;
    box-sizing: border-box;
    height: var(--topbar-h);
    z-index: 1000;
    background-color: var(--background-color-main1);
    border: 0px solid #000000f0;
    box-shadow: 0px 4px 4px #00000050;
    color: white;
    align-items: center;
}

.icontopbar {
    width: 4rem;
    padding-right: 0.5rem;
}

/* solo l'icona della pagina porta alla home (il titolo accanto non è un link) */
.icontopbar-link {
    display: flex;
}

.colTitle {
    flex: 1;
}

.colControls {
    flex: none;
    display: flex;
    gap: 0.2rem;
    align-items: center;
    text-align: right;
    justify-content: right;
}

.label-combobox {
    font-size: 2.2rem;
}

.linea-verticale {
    width: 2px;
    height: 2rem;
    background-color: rgb(255, 255, 255);
    margin: 0 2px;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.9);
}

.streach {
    flex: 1;
}

@media (max-width: 914px) {
    .colTitle.streachable {
        flex: none;
    }

    .colControls.streachable {
        flex: 1;
    }
}

/* ---- Barra compatta (genLib.manageCompactToolbar) ------------------------
   Ogni barra gestita (.tb-managed) ha due viste: in quella compatta
   (.tb-compact) spariscono gli elementi .tb-full. Per la barra in alto lo
   stato è anche sul body (toolbar-managed / toolbar-compact): i pulsanti
   della pagina passano nel menu. body.toolbar-managed è già nell'HTML, così
   la barra in alto è corretta dal primo disegno, prima dello script. */
body.toolbar-managed:not(.toolbar-compact) #menuPage,
body.toolbar-compact #buttonsPage,
.tb-compact .tb-full {
    display: none !important;
}

/* vista completa: niente allargamento della combo (annulla la regola a 914px) */
body.toolbar-managed .divtop:not(.tb-compact) .colTitle.streachable,
.tb-managed:not(.tb-compact) .colTitle.streachable {
    flex: 1;
}

body.toolbar-managed .divtop:not(.tb-compact) .colControls.streachable,
.tb-managed:not(.tb-compact) .colControls.streachable {
    flex: none;
}

/* vista compatta: la combo principale (.streach) prende lo spazio libero */
.tb-compact .colTitle.streachable {
    flex: none;
}

.tb-compact .colControls.streachable {
    flex: 1;
    min-width: 0;
}

.tb-compact .colControls .streach {
    min-width: 0;
}

.iconToolbar {
    display: inline-flex;
    align-items: center;
    text-align: center;
    border: 2px solid #242424;
    line-height: 1;
    width: 3.8rem;
    height: 3.8rem;
}

/* pulsanti ◀ ▶ per passare alla squadra/giornata precedente o successiva:
   frecce della stessa dimensione di quella delle combo (.multiselect-btn::after, css/menu.css) */
#btnPrevRound,
#btnNextRound,
#btnPrevTeam,
#btnNextTeam {
    font-size: 1.3rem;
    line-height: 1.3rem;
}

.iconToolbar.secondary {
    border: 1px solid var(--border-color-main3);
}

.iconToolbar img {
    width: 3.8rem;
}

.iconToolbarImageEnabled {
    filter: grayscale(100%) brightness(1) opacity(1);
}

.iconToolbarImageDisabled {
    filter: grayscale(100%) brightness(1) opacity(0.3);
}

/* immagini "spente" nelle tabelle (es. squadra senza partita, giocatore fuori rosa):
   in grigio e attenuate. contrast(0.5) avvicina chiari e scuri a un grigio medio, così
   anche i loghi molto chiari (es. bianco/celeste) restano visibili come quelli scuri.
   Uso: attributo data-off sull'immagine */
img[data-off] {
    filter: grayscale(100%) contrast(0.2) brightness(1.0);
    opacity: 0.2;
}

.flexbox1 {
    display: flex;
    align-items: center;
}

.flexbox2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexbox3 {
    display: flex;
    justify-content: left;
    align-items: center;
}

.divplayers {
    box-shadow: 0px 5px 5px #a7a7a7;
    width: 100%;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid var(--border-color-main2);
    border-radius: 5px;
}

.titolo-sezione {
    color: white;
    text-shadow: 0 0px 4px rgba(0, 0, 0, 0.9);
}

.maincontent {
    padding: calc(var(--topbar-h) + 2.0rem) 1rem 1rem 1rem;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
    align-items: start;
    gap: 1.5rem;
    padding-bottom: 1rem;
}

.grid-no-repeat {
    grid-template-columns: 1fr;
}

.cornice {
    background-color: #ffffff80;
    padding: 0px;
    border-radius: 0.5rem;
    border: 1px solid #00000015;
    opacity: 1;
    animation: fadeIn 1s forwards;
    max-width: calc(100vw - 2.5rem);
    box-shadow: 0px 0px 0.5rem #00000020;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
}

.cornice-int {
    border-radius: 4px;
    border: 0.7rem solid #ffffff5a;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cornice-int2 {
    background:
        linear-gradient(to bottom, #00000003, #00000008);
    height: 100%;
}

.cornice-int-rem {
    border-bottom: 0px;
}

.norow {
    font-size: 2rem;
    font-weight: bold;
    padding: 6rem 0rem 6rem 0rem;
    text-align: center;
}

.bottom-label {
    position: fixed;
    bottom: 10px;
    left: 10px;

    padding: 4px 10px;
    font-size: 12px;

    color: rgba(255, 255, 255, .7);
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(5px);

    border-radius: 4px;
    z-index: 9999;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.scrollable {
    overflow: scroll;
    overflow-y: hidden;
}

.iconTeam {
    height: 3.0rem;
    max-width: 4.0rem;
}


.iconTeamBig {
    width: 5.0rem;
    max-height: 5rem;
    margin-right: 2px;
}

.iconTeamSerieA {
    width: 2.5rem;
    max-height: 2.5rem;
    margin-right: 10px;
}

.editItem {
    width: 2.5rem;
    max-height: 2.5rem;
}

.nomeTeam {
    font-size: 2.3rem;
    font-weight: bold;
}

.coachTeam {
    font-size: 1.8rem;
    color: #393939;
}

.tooltip {
    position: absolute;
    background: linear-gradient(to bottom, var(--background-color-main3), var(--background-color-main2));
    background-repeat: no-repeat;
    box-shadow: 0px 0px 15px #00000090;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.7rem;
    display: none;
    z-index: 10000;
    opacity: 0;
    max-width: calc(100vw - 40px);
    animation: fadeIn 1s forwards;
    user-select: none;
    outline: none !important;
    border: 2px solid #e8e8e8;
}

.tooltip-width {
    width: var(--tooltipWidth);
    left: 0px;
}

/* X in alto a destra */
.tooltip-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    background: #00000040;
    border-radius: 50%;
}

.tooltip-close:hover {
    background: #ffffff40;
}

.barra-presenza {
    display: flex;
    max-width: 26rem;
    background-color: #FFF;
    border: 1px solid rgb(200, 200, 200);
    border-radius: 0.2rem;
    padding: 1px;
    user-select: none;
    outline: none !important;
}

.rank {
    background-color: var(--attaccante);
}

.rank-out {
    background-color: color-mix(in srgb, var(--attaccanteScuro) 40%, white);
}

.rank1 {
    background-color: var(--difensore);
}

.rank1-out {
    background-color: color-mix(in srgb, var(--difensoreScuro) 40%, white);
}

.rank2 {
    background-color: var(--portiere);
}

.rank2-out {
    background-color: color-mix(in srgb, var(--portiereScuro) 40%, white);
}

#toast {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--background-color-main2);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-family: Arial, sans-serif;
    opacity: 0;
    box-shadow: 0px 5px 5px #00000050;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#toast.show {
    visibility: visible;
    opacity: 1;
}

.arrow {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid rgb(255, 255, 255);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.arrow.asc {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

.arrow.desc {
    transform: translateY(-50%) rotate(0deg);
    opacity: 1;
}

.player-stat {
    font-size: 1.5rem;
    font-weight: bold;
}

.player-stat td {
    padding: 5px;
    text-align: center;
}

.player-stat-header td {
    text-align: center;
}

.player-stat-header div {
    padding: 5px;
    background-color: #04eb7857;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 0px 2px #0000005b;
}

.player-stat-giornate {
    color: #ff5f02;
    font-size: 1.4rem;
}

.player-stat-valori {
    text-align: center;
    font-size: 1.4rem;
}

.ruolo-cell {
    position: relative;
    padding: 0;
    width: 3rem;
}

.ruolo-box {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--portiere);
    border: 1px solid #00000030;
    border-radius: 2px;
}

.ruolo-box.formazioni {
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

.ruolo-box.U {
    background-color: #00000010;
    border: 1px solid #00000020;
}

.ruolo-box.P {
    background-color: var(--portiere);
    border: 1px solid #00000030;
}

.ruolo-box.outP {
    background-color: color-mix(in srgb, var(--portiere) 40%, white);
    border: 1px solid #00000010;
}

.ruolo-box.D,
.ruolo-box.DC {
    background-color: var(--difensore);
    border: 1px solid #00000040;
}

.ruolo-box.outD,
.ruolo-box.outDC {
    background-color: color-mix(in srgb, var(--difensore) 40%, white);
    border: 1px solid #00000030;
}

.ruolo-box.E {
    background-color: var(--difensore);
    background:
        linear-gradient(135deg,
            var(--difensore) 0%,
            var(--difensore) 35%,
            var(--centrocampista) 35%,
            var(--centrocampista)) padding-box,
        linear-gradient(135deg, var(--difensoreScuro) 0%, var(--difensoreScuro) 35%, var(--centrocampistaScuro) 35%, var(--centrocampistaScuro) 100%) border-box
}

.ruolo-box.outE {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--difensore) 40%, white) 0%,
            color-mix(in srgb, var(--difensore) 40%, white) 35%,
            color-mix(in srgb, var(--centrocampista) 40%, white) 35%,
            color-mix(in srgb, var(--centrocampista) 40%, white) 100%) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--difensoreScuro) 40%, white) 0%, color-mix(in srgb, var(--difensoreScuro) 40%, white) 35%, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 35%, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 100%) border-box
}

/* .ruolo-box.DC {
    background:
        linear-gradient(135deg,
            #ff5f02 0%,
            #ff5f02 65%,
            #00ae0f 65%,
            #00ae0f 100%) padding-box,
        linear-gradient(135deg, #b02a01 0%, #b02a01 65%, #02850d 65%, #02850d 100%) border-box
} */

.ruolo-box.C {
    background-color: var(--centrocampista);
    border: 1px solid #00000030;
}

.ruolo-box.outC {
    background-color: color-mix(in srgb, var(--centrocampista) 40%, white);
    border: 1px solid #00000010;
}

.ruolo-box.W {
    background:
        linear-gradient(135deg,
            var(--centrocampista) 0%,
            var(--centrocampista) 65%,
            var(--attaccante) 65%,
            var(--attaccante) 100%) padding-box,
        linear-gradient(135deg, var(--centrocampistaScuro) 0%, var(--centrocampistaScuro) 65%, var(--attaccanteScuro) 65%, var(--attaccanteScuro) 100%) border-box
}

.ruolo-box.outW {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--centrocampista) 40%, white) 0%,
            color-mix(in srgb, var(--centrocampista) 40%, white) 65%,
            color-mix(in srgb, var(--attaccante) 40%, white) 65%,
            color-mix(in srgb, var(--attaccante) 40%, white) 100%) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 0%, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 65%, color-mix(in srgb, var(--attaccanteScuro) 40%, white) 65%, color-mix(in srgb, var(--attaccanteScuro) 40%, white) 100%) border-box
}

.ruolo-box.T {
    background:
        linear-gradient(135deg,
            var(--centrocampista) 0%,
            var(--centrocampista) 35%,
            var(--attaccante) 35%,
            var(--attaccante) 100%) padding-box,
        linear-gradient(135deg, var(--centrocampistaScuro) 0%, var(--centrocampistaScuro) 35%, var(--attaccanteScuro) 35%, var(--attaccanteScuro) 100%) border-box
}

.ruolo-box.outT {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--centrocampista) 40%, white) 0%,
            color-mix(in srgb, var(--centrocampista) 40%, white) 35%,
            color-mix(in srgb, var(--attaccante) 40%, white) 35%,
            color-mix(in srgb, var(--attaccante) 40%, white) 100%) padding-box,
        linear-gradient(135deg, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 0%, color-mix(in srgb, var(--centrocampistaScuro) 40%, white) 35%, color-mix(in srgb, var(--attaccanteScuro) 40%, white) 35%, color-mix(in srgb, var(--attaccanteScuro) 40%, white) 100%) border-box
}

.ruolo-box.A {
    background-color: var(--attaccante);
    border: 1px solid #00000030;
}

.ruolo-box.outA {
    background-color: color-mix(in srgb, var(--attaccante) 40%, white);
    border: 1px solid #00000010;
}

.hr-left {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    padding: 3px 0;
    /* margine sinistro */
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

/* piccolo pezzo di linea a sinistra */
.hr-left::before {
    content: "";
    width: 1rem;
    /* lunghezza della linea a sinistra */
    height: 1px;
    /* spessore */
    background-color: #00000020;
    /* colore */
    margin-right: 0.5rem;
    /* spazio tra linea e testo */
}

/* linea lunga a destra */
.hr-left::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #00000020;
    margin-left: 0.5rem;
    /* spazio tra testo e linea lunga */
}

hr {
    border: none;
    height: 1px;
    background-color: #00000020;
    margin: 1rem;
    padding: 0;
}

::selection {
    background-color: var(--centrocampista);
    color: #000000;
}