:root {
    --color-theme: forestgreen;
}

html, body {
    padding: 0;
    margin: 0;
}

body {
    padding: 0 10px;
    background-image: url("../images/bright_squares.png");
}

* {
    box-sizing: border-box;
}

.body {
    font: 12px Arial, Helvetica, sans-serif;
}

.modal {
    background-image: url("../images/bright_squares.png") !important;
    max-width: 640px;
}

.modal h2 {
    font: 16px Arial, Helvetica, sans-serif;
    text-align: left;
    border-bottom: dotted 1px #000;
}

.modal span {
    font: 12px Arial, Helvetica, sans-serif;
    color: #4b5555;
    text-align: left;
    display: block;
    margin-bottom: 10px;
}

.modal table {
   width: 100%;
}

.graph-container {
    margin-bottom: 30px;
}

.graph-container h1 {
    font: 16px Arial, Helvetica, sans-serif;
    text-align: left;
}

.graph-container h2 {
    font: 16px Arial, Helvetica, sans-serif;
    text-align: left;
    border-bottom: dotted 1px #000;
    color: black;
}

.graph-container h3 {
    font: 12px Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: normal;
    font-style: italic;
    display: inline;
    color: dimgray;
}

.graph-container span {
    font: 12px Arial, Helvetica, sans-serif;
    color: #4b5555;
    text-align: left;
    display: block;
    margin-bottom: 10px;
}

.graph-container > .author {
    margin-top: 20px;
    color: #000;
}

.date {
    font: 10px Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    margin: none;
    padding: none;
}

svg {
    box-sizing: content-box;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
}

.axis {
    font: 8px sans-serif;
}

.axis path,

.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.value {
    font: 12px Arial, Helvetica, sans-serif;
    color: #000;
}

.bar {
}

.bar:hover {
    fill: var(--color-theme);
}

.marquee {
    font: 12px Arial, Helvetica, sans-serif;
    color: #000;
    overflow: hidden;
    width:500px;
    margin: 0 auto;
    margin-bottom: 20px;
    letter-spacing: 5px;
    height: 20px;
}

.icon {
    display: inline;
    font-size: 22px;
    color: darkslategray;
}

.icon_blanc {
    display: inline;
    font-size: 12px;
    color: dimgray;
}

.blanc {
    font: 12px Arial, Helvetica, sans-serif;
    color: dimgray;
    text-align: center;
    font-style: italic;
}

.court {
    background-color: lightgray;
    border-top: 1px dotted black;
    border-bottom: 1px dotted black;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #800000;
    text-align: center;
    font-style: italic;
}

.isole {
    background-color: lightgray;
    border-top: 1px dashed; black;
    border-bottom: 1px dashed; black;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #800000;
    text-align: center;
    font-weight: bold;
}

table {
    margin: 10px auto;
    padding: 10px;
    border-collapse: collapse;
    border-spacing: 0;
    font: 12px Arial, Helvetica, sans-serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

table thead th {
    background-color: lightgray;
    color: #000;
    border: solid 1px dimgray;
    text-align: center;
    height: 30px;
}

table tbody th {
    background-color: lightgray;
    color: #000;
    border: solid 1px dimgray;
    text-align: center;
    height: 30px;
    width: 25%;
}
table tbody td {
    border: solid 1px dimgray;
    color: #000;
    margin: 0px;
    padding: 0px;
    height: 28px;
    text-align: center;
}

table tr {
    background-color: white;
}

table tr:hover {
    background-color: whitesmoke;
}

a {
    color: var(--color-theme);
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: var(--color-theme);
    cursor: pointer;
}

.transmit tbody tr:first-child th {
    padding-top: 10px;
} 

.transmit td {
    width:70%;
} 

.elsewhere-table td:nth-child(1) {
    background-color: lightgray;
}

.elsewhere-table th:nth-child(1) {
    background-color: whitesmoke;
    font-weight: normal;
}

.elsewhere-table tr:hover {
    background-color: whitesmoke;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}

@media (min-width: 1024px) {
    .axis {
        font: 12px Arial, Helvetica, sans-serif;
    }

    .columns {
        font-size: 0;
    }

    .columns > * {
        display: inline-block;
        vertical-align: top;
    }

    .columns > *:first-child {
        width: 62%;
        margin-right: 8%;
    }

    .columns > *:last-child {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 30%;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        background-image: url("../images/hexellence.png");
    }

    .columns > *:last-child table {
        width: 90%;
        margin-right:auto;
        margin-left:0px
    }

    .graph-container {
        margin-bottom: 30px;
        padding: 0 30px;
    }

    .scrollbar-hidden {
        width: calc(100 + 20px);
        margin-right: -20px;
        height: 100vh;
        overflow: auto;
    }
}

.center-clock {
    margin: 0 auto;
    width:240px;
}

.clock {
    margin: 0;
    padding-top: 10px;
}

.flip-clock-wrapper {
    height: 60px;
}

.flip-clock-wrapper ul {width: 40px;height: 60px;margin: 0 2px;}
.flip-clock-wrapper ul li {line-height: 60px;}
.flip-clock-wrapper ul li a div div.inn {border-radius: 3px;font-size: 50px;}
.flip-clock-wrapper ul li a div.down {border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
.flip-clock-wrapper ul li a div.up:after {top: 29px;height: 2px;}
.flip-clock-dot {width: 8px; height: 8px; border-radius: 50%;}
.flip-clock-dot.top {top: 15px;}
.flip-clock-dot.bottom {bottom: 45px;}