* {
      margin: 8px;
    }

    .bodyClass {
        display: contents;
    }

    #header {
      position: relative;
    }

    .container {
      text-align: center;
    }

    .typesource-google-link {
        position: relative;
        top: 10px;
        right: 17px;
        font-size: 18px;
        border: 1px solid #2babee;
        border-radius: 3px;
        padding: 15px 8px;
        font-family: 'Poppins', sans-serif;
        text-decoration: none;
        color: #2babee;
        display: inline-block;
    }

    .button {
        /*position: relative;*/
        top: 10px;
        right: 17px;
        font-size: 23px;
        border: 1px solid #2babee;
        border-radius: 3px;
        padding: 15px 8px;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        text-decoration: none;
        color: #2babee;
        display: inline-block;
    }

    .typesource-google-link:hover
    {
      color: #fff;
      background-color: #2babee;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 60%;
      border: 1px solid #ddd;
      display: unset;
    }

    h2 {
        color: #2b2b2b;
        font-family: 'Poppins', sans-serif;
    }

    h2#nomegrafico {
		text-align:left;
		font-size:90%;
    }

    p {
        color: #2b2b2b;
        font-family: 'Roboto', sans-serif;
    }
	
	thead {
      text-align: center;
      padding: 8px;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.04em;
      color: white;
      background-color: #4CAF50
    }

    th {
      text-align: center;
      padding: 8px;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.04em;
      color: white;
      background-color: #4CAF50
    }
    td {
      text-align: center;
      padding: 8px;
      font-family: 'Roboto', sans-serif;
    }

    button {
      text-align: left;
      padding: 8px;
      cursor: pointer;
    }

    tr:nth-child(even){background-color: #f2f2f2}

    /*+++++++++++++++++++++++++++++++++++++++TAB STYLE+++++++++++++++++++++++++++++++++++++++*/
    /* Style the tab */
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
      background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
      background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
      animation: fadeEffect 0.5s; /* Fading effect takes 0.5 seconds */
    }

    /* Go from zero to full opacity */
    @keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    /*+++++++++++++++++++++++++++++++++++++++TAB STYLE+++++++++++++++++++++++++++++++++++++++*/

    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 12px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
    }

    .button2 {
      background-color: white; 
      color: #008CBA; 
      border: 2px solid #008CBA;
      display: inline-block;
    }

    .button2:hover {
      background-color: #008CBA;
      color: white;
    }

    .button-container {
      text-align: center;
    }
/*
    [class~=alarm] {
      color: red;
    }*/
    div.rosso, div.ocra, div.verde, div.ghiaccio {
      color: red;
      margin:0;
      font-weight: bold;
      animation:blinkingText 1.8s infinite;
    }
    @keyframes blinkingText{
        0%{     opacity: 1;    }
        50%{    opacity: 0;    }
        100%{   opacity: 1;    }
    }

    div.ocra {
      color: orange;
    }

	div.verde {
      color: green;
    }

	div.ghiaccio {
      color: #007FFF;
    }
    @keyframes blinkingText{
        0%{     opacity: 1;    }
        50%{    opacity: 0;    }
        100%{   opacity: 1;    }
    }

    #imageWrapper {
      position: relative;
      height: 500px;
    }

    /* height is for display purposes only */
    #bottomImage {
      position: absolute;
      bottom: 0;
    }

    div#specs {
      text-align: justify;
      font-family: 'Roboto', sans-serif;
      color: grey;
    }

    #footerLogo {
      margin: 0px -10px -10px;
      width: 200px;
      bottom: 0;
      right: 0;
      position: fixed;
    }

    .maplink {
      color: #4CAF50;
    }

    .maplink:visited {
      color: #4CAF50;
    }

    /*a[target="_blank"]:after {
      content: " (external)";
    }*/

	#nav {
		margin: 40px;
	}
	
	#nav a {
		line-height: 3.5;
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		color: black;
		text-decoration: none;
		border-radius: 5px;
		padding: 10px 20px; /*8px 16px;*/
		margin: -2px;
		transition: background-color .3s;
	}
	
	#nav a.active-nav {
		background-color: #4caf50; /*dodgerblue;*/
		color: white;
	}
	
	#nav a:hover:not(.active-nav) {background-color: #ddd;}
	
	.tabcontent {
		margin: -8px 8px 0px 8px;
	}
	
	.tab button {
		margin: 8px;
	}
	
	.tab button.active {
		outline-color: #f1f1f1;
	}
	
	strong {
		margin: 0px;
	}
	
	.colLiveData {
		height: 48px;
	}