html,
body {
    height: 100%;
    margin: 0px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

h1 {
    color: #333366;
    font-size: 10pt;
    font-weight: bold;
}

h2 {
    color: #333366;
    font-size: 9pt;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    
    /* background-color: grey; */
}



/* impostazione della pagina come popup */
.popup {
    width: 800px;
    height: 600px;
    display: flex;
    flex-flow: column;
    gap: 5px;
    
    /* background-color: yellow; */
}



/* impostazione della pagina come full page */
.fullpage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    gap: 5px;
    
    /* background-color: yellow; */
}



/* stile dell'header del sito */
.header {
    flex: 0 1 auto;
    color: #FFFFFF;
    background-color: #da5e22;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    white-space: nowrap;
}



.menu {
    flex: 0 1 auto;
    color: #ffffff;
    background-color: #333366;
}

.menu ul {
    list-style-type: none;
    display: flex;
    flex-flow: row;
    /* gap: 5px; */
    margin-left: 5px;
    margin-right: 5px;
}
.menu li {
    /* float: left; */
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    color: #FFFFFF;
    font-weight: bold;
}
.menu li:hover {
    color: #333366;
    background-color: #FFFFFF; 
}
.menu li a {
    color: inherit;
    text-decoration: none;
}
.menu li.image {
    background-color: #ffffff; 
    padding-top: 0px; 
    padding-bottom: 0px;
    cursor: pointer;
}
.menu li.spazio {
    flex: 1 1 100%; 
    text-align: right;
}
.menu li.spazio:hover {
    color: #ffffff;
    background-color: #333366;
}



/* stile del titolo */
.title {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: solid 2px #da5e22;
}



/* contenuto principale della pagina */
.content {
    flex: 1 1 auto;
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
    
    /* background-color: white; */
}



/* divisione dell apagina in due colonne */
.twoColumns {
    display: flex; 
    flex-flow: row; 
    gap: 10px;
    height: 100%;
    
    /* background-color: cyan; */
}
/* colonna sinistra */
.twoColumns .left {
    width: 50%;
    overflow-y: auto;
    
    /* background-color: red; */
}
/* colonna destra */
.twoColumns .right {
    width: 50%;
    
    /* background-color: magenta; */
}

.scrollableTable {
    overflow-y: scroll; /* make the table scrollable if height is more than 200 px  */
    height: 150px; /* gives an initial height of 200px to the table */
    font-size: 8pt;
    border-top: solid 1px #333366;
    border-bottom: solid 1px #333366;
    /* margin-top: 5px; */
    margin-bottom: 5px;
    
    /* background-color: white; */
}

.scrollableTable thead th {
    position: sticky; /* make the table heads sticky */
    top: 0px; /* table head will be placed from the top of the table and sticks to it */
    width: 100%;
    /* color: white; */
    /* background-color: #333366; */
    color: #333366;
    background-color: #ffffff;
    font-weight: bold; 
    white-space: nowrap;
    /* border-top: solid 1px #333366; */
    /* border-bottom: solid 1px #333366; */
    /* cursor: pointer; */
}

.scrollableTable tbody tr {
    cursor: pointer;
}
.scrollableTable tbody tr:hover {
    color: #ffffff;
    background-color: #333366;
}
.scrollableTable tbody tr.selected {
    color: #ffffff;
    background-color: #da5e22;
}

.scrollableTable th, td {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.scrollableTable .faglia {
    /* width: auto; */
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.scrollableTable .segmento {
    width: auto;
    text-align: left;
    white-space: nowrap;
}

.scrollableTable .comportamento {
    width: 100%;
    text-align: left;
    white-space: nowrap;
}

.scrollableTable .data{ 
    /* width: 200px;  */
    width: auto;
    text-align: left;
    
    /* background-color: cyan; */
}

.scrollableTable .orario { 
    /* width:  200px;  */
    width: auto;
    text-align: center; 
    white-space: nowrap;
    
    /* background-color: yellow; */
}
.scrollableTable .mag { 
    /* width:  50px;  */
    width: auto;
    text-align: center; 

    /* background-color: cyan; */
}
.scrollableTable .i0 {
    /* width: 50px; */
    width: auto;
    text-align: center;

    /* background-color: yellow; */
}
.scrollableTable .sr {
    /* width:  50px;  */
    width: auto;
    text-align: center;

    /* background-color: cyan; */
}
.scrollableTable .epicarea {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    
    /* background-color: yellow; */
}
.scrollableTable .link {
    padding-top: 0px;
    padding-bottom: 0px;
}
.scrollableTable .message {
    text-align: center;
    color: red;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
}



.waitingbar {
    color: #ff0000;
    font-size: 9pt;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    visibility: hidden;
}



.grafico {
    height: 250px;
    margin-top: 5px;
    
    /* background-color: lime; */
}



.map {
    height: 100%; 
    background-color: #99cccc;
    border: solid thin black;
}
.map .info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.map .info h4 {
    margin: 0 0 5px;
    color: #777;
}
.map .legend {
    line-height: 18px;
    color: #555;
}
.map .legend i.line {
    width: 36px;
    height: 4px;
    margin-top: 7px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
.map .legend i.box {
    width: 12px;
    height:12px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}



/* stile del footer della pagina */
.footer {
    flex: 0 1 auto;
    color: #FFFFFF;
    background-color: #333366;
    font-size: 8pt;
    vertical-align: bottom;
    text-align: center;
    padding: 2px;
}
.footer a {
    color: inherit;
    text-decoration: none;
}
.footer a:visited {
    color: inherit;
}