:root {
--timeline-bg: #ffffff;
--timeline-text: #111111;
--timeline-muted: rgba(0,0,0,0.55);
--timeline-line: rgba(0,0,0,0.08);
--timeline-dot: rgba(0,0,0,0.25);
--badge-fresh-bg: #e10600;
}
.timeline-item::before {
background: red !important;
left: 0 !important;
z-index: 99 !important;
} body.dark,
body[data-theme="dark"],
html.dark {
--timeline-bg: #0a0a0a;
--timeline-text: #ffffff;
--timeline-muted: rgba(255,255,255,0.55);
--timeline-line: rgba(255,255,255,0.08);
--timeline-dot: rgba(255,255,255,0.25);
--badge-fresh-bg: #e10600;
} #timeline-wrapper {
max-width: 960px;
margin: 0 auto;
padding: 40px 20px;
background: var(--timeline-bg);
color: var(--timeline-text);
} .timeline-day {
position: relative;
padding-left: 40px;
margin-bottom: 60px;
}
.timeline-day::before {
content: "";
position: absolute;
left: 14px;
top: 0;
bottom: 0;
width: 2px;
background: var(--timeline-line);
}
.timeline-day h2 {
margin-bottom: 28px;
font-size: 22px;
font-weight: 700;
color: var(--timeline-text);
} .timeline-item {
position: relative;
display: grid;
grid-template-columns: 60px auto;
grid-template-rows: auto auto auto auto;
column-gap: 18px;
row-gap: 4px;
margin-bottom: 22px;
padding-bottom: 22px;
} .timeline-item::before {
content: "";
position: absolute;
left: -34px;
top: 6px;
width: 10px;
height: 10px;
background: var(--timeline-dot);
border-radius: 50%;
} .timeline-item .time {
grid-row: span 4;
font-size: 14px;
text-align: right;
padding-top: 2px;
color: var(--timeline-muted);
} .timeline-item .game {
font-size: 13px;
font-weight: 600;
color: var(--timeline-text);
opacity: 0.9;
text-decoration: none;
}
.timeline-item .game:hover {
text-decoration: underline;
} .badge-fresh {
display: inline-block;
width: fit-content;
padding: 3px 10px;
margin: 2px 0 4px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
background: var(--badge-fresh-bg);
border-radius: 12px;
} .timeline-item .title {
font-size: 16px;
line-height: 1.45;
color: var(--timeline-text);
text-decoration: none;
}
.timeline-item .title:hover {
text-decoration: underline;
} .timeline-item .subtitle {
font-size: 14px;
line-height: 1.5;
margin-top: 4px;
color: var(--timeline-muted);
} #load-more-days {
display: block;
margin: 40px auto 0;
padding: 12px 26px;
background: transparent;
border: 1px solid var(--timeline-line);
color: var(--timeline-text);
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease, opacity 0.2s ease;
}
#load-more-days:hover {
background: rgba(0,0,0,0.04);
}
body.dark #load-more-days:hover,
body[data-theme="dark"] #load-more-days:hover,
html.dark #load-more-days:hover {
background: rgba(255,255,255,0.06);
} @media (max-width: 640px) {
.timeline-day {
padding-left: 28px;
}
.timeline-day::before {
left: 8px;
}
.timeline-item {
grid-template-columns: 50px auto;
column-gap: 12px;
}
.timeline-item::before {
left: -26px;
}
.timeline-item .title {
font-size: 15px;
}
}
.contenitore-vetrina {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 200px 250px auto;
grid-column-gap: 10px;
grid-row-gap: 20px;
}
.contenitoreRisultati {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto minmax(100px, 250px) 250px 250px auto;
grid-row-gap: 10px;
margin-top: 20px;
}
.contenitoreRisultati2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 250px 250px;
grid-row-gap: 10px;
}
.vetrina1 {
grid-column-start: 1;
grid-column-end: 2;
padding: 10px;
border-radius: 20px;
background-color: rgba(40,167,69,0.1);
overflow: scroll;
}
.vetrina2 {
grid-column-start: 2;
grid-column-end: 3;
padding: 10px;
border-radius: 20px;
background-color: rgba(82,190,255,0.1);
overflow: scroll;
}
.vetrina3 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
padding: 10px;
border-radius: 20px;
background-color: rgba(0,0,0,0.1);
overflow: scroll;
}
.vetrina4 {
padding: 0px 10px 10px 10px;
border-radius: 20px;
background-color: #fff;
overflow: scroll;
margin-bottom: 10px;
max-height: 310px;
border: 1px solid #e3e3e3;
} .vetrina3::-webkit-scrollbar, .vetrina4::-webkit-scrollbar, .vetrina1::-webkit-scrollbar, .vetrina2::-webkit-scrollbar,.vetrinaSearchGame::-webkit-scrollbar, .scheduling-r3c1::-webkit-scrollbar{
display: none;
} .vetrina3, .vetrina1, .vetrinaSearchGame, .vetrina2, .vetrina4, .scheduling-r3c1 {
-ms-overflow-style: none; scrollbar-width: none; }
.vetrinaForm {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
padding: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.1);
margin-bottom: 10px;
margin-top: 10px;
}
.vetrinaTitolo {
padding: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.1);
}
.vetrinaSearchGame {
padding: 10px;
border-radius: 20px;
background-color: rgba(0,0,0,0.1);
overflow: scroll;
}
.vetrinaFormPrenotazione {
padding: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.1);
margin-bottom: 10px;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover { background-color: #e9e9e9;
}
.autocomplete-active { background-color: DodgerBlue !important;
color: #ffffff;
}
.vetrinaCancellazione {
padding: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.1);
margin-bottom: 10px;
margin-top: 10px;
}
@media only screen and (max-width: 600px) {
.contenitore-vetrina {
grid-template-columns: 1fr;
grid-template-rows: 150px 150px 150px;
}
.vetrina1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
}
.vetrina2 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
}
.vetrina3 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
}
}
.scheduling {
display: inline-grid  ;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
border-radius: 10px;
margin: 5px;
}
.scheduling-r1c2 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
border-top:1px solid grey;
padding: 10px;
}
.scheduling-image {
grid-row-start: 2;
grid-column-start: 1;
padding: 5px;
}
.scheduling-r2c1 {
grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 2;
padding: 10px;
}
.scheduling-r2c2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
padding: 10px;
}
.scheduling-r3c1 {
grid-row-start: 4;
grid-column-start: 1;
grid-column-end: 3;
overflow: scroll;
padding: 10px;
}
.pallino {
padding: 5px;
border: 1px solid #fff;
text-align: center;
width: 25px;
height: 25px;
line-height: 13px;
border-radius: 50%;
margin-right: 10px;
display: inline-block;
font-size: 12px;
}
.obiettivi {
font-variant: small-caps;
font-weight: 800;
} .scheduling-r3c1::-webkit-scrollbar{
display: none;
} .scheduling-r3c1 {
-ms-overflow-style: none; scrollbar-width: none; }
.destinatari {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
font-size: 10px;
font-variant: small-caps;
}
@media only screen and (max-width: 600px) {
.scheduling {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.scheduling-r2c1 {
grid-row-start: 1;
grid-column-start: 1;
grid-column-end: 2;
padding: 10px;
}
.scheduling-image {
grid-row-start: 2;
grid-column-start: 1;
}
.scheduling-r1c2 {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: 2;
border-top:1px solid grey;
padding-top: 10px;
}
.scheduling-r2c2 {
grid-row-start: 3;
grid-column-start: 1;
padding: 10px;
}
.scheduling-r3c1 {
grid-row-start: 5;
grid-column-start: 1;
overflow: scroll;
}
}