/* Settings */
        :root {
            --global-margin:4px;
            --global-margin2:8px;
            --global-margin3:12px;
            --global-margin8:32px;
            --global-border-size:1px;
            --global-border-radius:3px;
            --global-spacing-x1:2px;
            --global-spacing-y1:2px;
            --global-spacing-x2:4px;
            --global-spacing-y2:4px;
            --global-spacing-x3:6px;
            --global-spacing-y3:6px;
            --global-spacing-x4:8px;
            --global-spacing-y4:8px;
            --global-spacing-x5:10px;
            --global-spacing-y5:10px;
            --global-spacing-x6:12px;
            --global-spacing-y6:12px;

            --color-bg-0:#F5FFF8;
            --color-bg-1:#E5EFE8;
            --color-bg-2:#054309;

            --color-primary-0:#288c2f;
            --color-primary-1:#315833;
            --color-primary-2:#054309;
            --color-primary-3:#7de284;
            --color-primary-4:#aee2b1;
            --color-primary-5:#022604;

            --color-secondary-a-0:#1f686c;
            --color-secondary-a-1:#254243;
            --color-secondary-a-2:#043133;
            --color-secondary-a-3:#79d6da;
            --color-secondary-a-4:#a8d8da;
            --color-secondary-a-5:#e5fbfc;

            --color-secondary-b-0:#7da62f;
            --color-secondary-b-1:#586839;
            --color-secondary-b-2:#304906;
            --color-secondary-b-3:#c5e981;
            --color-secondary-b-4:#d6e9b3;
            --color-secondary-b-5:#e6f9c3;
            --color-secondary-b-6:#e0eace;

            --color-complement-0:#b23633;
            --color-complement-1:#6f3f3e;
            --color-complement-2:#550806;
            --color-complement-3:#ec8583;
            --color-complement-4:#f7d4d4;
            --color-complement-5:#ecb6b5;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: var(--color-bg-1, pink);
            position:relative;
            margin: 0px;
            padding: 0px;
        }

        h1 {
          font-size: 24px;
        }
        h2 {
          font-size: 20px;
        }
        h3 {
          font-size: 20px;
        }
        h4 {
          font-size: 16px;
        }

        p {
          text-align: justify;
        }
        
        .achtung {
            color: var(--color-complement-0, red);
            background-color: var(--color-secondary-a-5, pink);
        }

        table {
          border-collapse: collapse;
          border: var(--global-border-size, 10px) solid var(--color-secondary-a-3, pink);
          width: 100%;
          font-size: 14px;
          text-align: center;
        }

        tr:nth-child(odd) {
          background-color: var(--color-secondary-a-5, pink);
        }
        tr:hover {
          background-color: var(--color-secondary-a-3, pink);
        }

        th {
          border: var(--global-border-size, 10px) solid var(--color-secondary-a-3, pink);
          background-color: var(--color-secondary-a-4, pink);
        }

        td {
          border: var(--global-border-size, 10px) solid var(--color-secondary-a-3, pink);
          padding: var(--global-spacing-y2, 10px) var(--global-spacing-x1, 10px) var(--global-spacing-y2, 10px) var(--global-spacing-x1, 10px);
        }

        hr {
            border: 0;
            margin-left: var(--global-margin8);
            margin-right: var(--global-margin8);
            height: var(--global-border-size, 10px);
            background: var(--color-secondary-b-5, pink);
            background-image: linear-gradient(to right, var(--color-secondary-b-5, pink), var(--color-secondary-b-2, pink), var(--color-secondary-b-5, pink));
        }

        .tableAlignleft {
            text-align: left;
        }

        img {
          border-radius: var(--global-spacing-x3, 50px);
          border: var(--global-border-size, 10px) solid var(--color-secondary-b-4, pink);
          padding: var(--global-spacing-x1, 50px);

          display: block;
          margin-left: auto;
          margin-right: auto;

          max-width: 100%;
          height: auto;
        }

        .container {
          /*border: 2px solid black;*/
        }

        .mapContainer{
          align-content: center;
          text-align: center;
          border  -radius: var(--global-spacing-x3, 50px);
          border: var(--global-border-size, 10px) solid var(--color-secondary-b-4, pink);
          padding: var(--global-spacing-x1, 50px);

          display: block;
          margin-left: auto;
          margin-right: auto;
        }

        /* Style the global header and footer*/
        .globalHeader, .globalFooter {
            color: var(--color-primary-2, red);
            background-color: var(--color-primary-3, pink);

            padding: var(--global-spacing-y1, 50px) var(--global-spacing-x4, 50px);
            margin: var(--global-spacing-y1, 50px) var(--global-spacing-x2, 50px);

            border: var(--global-border-size, 10px) solid var(--color-primary-2, pink);
            border-radius: var(--global-border-radius, 10px);

            text-align: center;

            background-image: url(img/background-3.jpg);
            background-position: left center;
            background-repeat: repeat-x;
        }

        /* Style the global frame */
        .globalFrame {
            color: var(--color-secondary-a-2, pink);
            background-color: var(--color-bg-0, pink);

            padding: var(--global-spacing-y1, 50px) 0px;
            border-spacing: var(--global-spacing-x2, 50px) 0px;
        }

        /* Clear floats after the columns */
        .globalFrame:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Style of the left panel inside global frame */
        .leftPanel {
            color: var(--color-secondary-b-2, pink);
            background-color: var(--color-secondary-b-3, pink);

            display: table-cell;
            /*float: left;*/
            width: 17%;
            /*max-width: 520px;*/
            min-width: 210px;

            border: var(--global-border-size, 10px) solid var(--color-secondary-b-2, pink);
            border-radius: var(--global-border-radius, 10px);

            vertical-align: top;
        }

        /* Style of the right panel inside global frame */
        .rightPanel {
            display: table-cell;
            /*float: left*/
            width: auto;
         }

        /* Style of the Primary menu */
        .primaryMenu {
            /*padding: var(--global-spacing-y1, 50px) var(--global-spacing-x2, 50px);*/
        }

        /* Style of the Secondary menu*/
        .secondaryMenu {
            color: var(--color-secondary-a-1, pink);
            background-color: var(--color-secondary-a-3, pink);

            overflow: hidden;

            border: var(--global-border-size, 10px) solid var(--color-secondary-a-2, pink);
            border-radius: var(--global-border-radius, 10px);
        }

        /* Style of the primary menu */
        .primaryMenu > ul {
            color: var(--color-secondary-b-2, pink);
            background-color: var(--color-secondary-b-4, pink);

            list-style-type: none;

            margin: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);
            padding: 0px;

            border: var(--global-border-size, 10px) solid var(--color-secondary-b-1, pink);
            border-radius: var(--global-border-radius, 10px);
        }

        .primaryMenu li a {
            display: block;
            color: var(--color-secondary-b-2, red);
            padding: var(--global-spacing-y4, 50px) var(--global-spacing-x4, 50px);
            text-decoration: none;
        }

        .primaryMenu li a.active {
            text-align: center;
            font-weight: bold;
        }

        .primaryMenu li a.selected {
            background-color: var(--color-complement-1, pink);
            color: var(--color-complement-4, pink);
        }

        .primaryMenu li a:hover:not(.active) {
            background-color: var(--color-secondary-b-1, pink);
            color: var(--color-secondary-b-4, pink);
        }

        /* Style of the primary menu */
        .primaryMenuInFrame > ul {

            list-style-type: none;

            margin: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);
            padding: 0px;

            border: var(--global-border-size, 10px) solid var(--color-secondary-b-1, pink);
            border-radius: var(--global-border-radius, 10px);
        }

        .primaryMenuInFrame li a {
            display: block;
            padding: var(--global-spacing-y2, 50px) var(--global-spacing-x1, 50px);
        }

        .primaryMenuInFrame li a.active {
            text-align: center;
            font-weight: bold;
        }

        /* Style the footer */
        .contentHeader {
            /*
            color: var(--color-secondary-b-2, pink);
            background-color: var(--color-secondary-b-3, pink);

            padding: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);

            border: 1px solid var(--color-secondary-b-2, pink);
            border-radius: var(--global-border-radius, 10px);
            */
        }

        /* Style the footer */
        .contentFooter {
            /*
            color: var(--color-secondary-b-2, pink);
            background-color: var(--color-secondary-b-3, pink);

            padding: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);

            border: 1px solid var(--color-secondary-b-2, pink);
            border-radius: var(--global-border-radius, 10px);
            */
        }

        /* Style the content body */
        .contentBody {

            margin-top: var(--global-spacing-x2, 50px);
            /*margin-bottom: var(--global-spacing-x2, 50px);*/

            padding: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);

            border: var(--global-border-size, 10px) solid var(--color-secondary-b-2, pink);
            border-radius: var(--global-border-radius, 10px);
        }

        /* Style the secondary menu links */
        .secondaryMenu a {
            float: left;
            display: block;
            color: var(--color-secondary-a-1, pink);
            text-align: center;
            padding: var(--global-spacing-y4, 50px) var(--global-spacing-x4, 50px);
            text-decoration: none;
        }

        .secondaryMenu a.hiddenalbe {
            display: none;
        }

        .secondaryMenu a.selected {
            color: var(--color-secondary-a-1, pink);
            background-color: var(--color-secondary-a-4, pink);
        }

        /* Change color on hover of secondary menu */
        .secondaryMenu a:hover {
            color: var(--color-secondary-a-3, pink);
            background-color: var(--color-secondary-a-2, pink);
        }

        /* Hide left panel with primary menu of small screen */
        @media (max-width: 600px) {
            /* Change layout of page:  make the blocks "stack on top of each other" instead of "next to each other" */
            /*.leftPanel,*/ .rightPanel {
                width: 98%;
                display: block;
                padding: 0px;
                margin: var(--global-spacing-y1, 50px) var(--global-spacing-x2, 50px);
            }
            /* Hide left navigation panel */
            .primaryMenu, .leftPanel {
                display: none;
            }
            .secondaryMenu a {
                padding: var(--global-spacing-y5, 50px) var(--global-spacing-x4, 50px);
            }
            
            /* Show optional elements in right navigation panel */
            .secondaryMenu a.hiddenalbe{
                display: block;
            }
            .primaryMenuInFrame li a {
                padding: var(--global-spacing-y2, 50px) var(--global-spacing-x2, 50px);
            }
            td {
                padding: var(--global-spacing-y4, 10px) var(--global-spacing-x1, 10px) var(--global-spacing-y4, 10px) var(--global-spacing-x1, 10px);
            }
            
        }

        /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
        @media (max-width: 340px) {
            .secondaryMenu a {
                float: none;
                width:100%;
            }
            .secondaryMenu a {
                padding: var(--global-spacing-y6, 50px) var(--global-spacing-x4, 50px);
            }
            .primaryMenuInFrame li a {
                padding: var(--global-spacing-y4, 50px) var(--global-spacing-x4, 50px);
            }
            td {
                padding: var(--global-spacing-y5, 10px) var(--global-spacing-x1, 10px) var(--global-spacing-y5, 10px) var(--global-spacing-x1, 10px);
            }
        }

        #buttonTop {
            display: none;    /* Hidden by default */
            position: fixed;  /* Fixed/sticky position */
            z-index: 99;      /* Make sure it does not overlap */
            outline: none;    /* Remove outline */
            cursor: pointer;  /* Add a mouse pointer on hover */

            bottom: var(--global-margin2, 30px);
            right: var(--global-margin3, 30px);

            color: var(--color-secondary-a-2, pink);
            background-color: transparent;

            /*background-color: var(--color-secondary-a-3, pink);*/

            border: var(--global-border-size, 10px) solid var(--color-secondary-a-3, pink);
            border-radius: var(--global-border-radius, 10px);

            padding: var(--global-spacing-y4, 50px) var(--global-spacing-x4, 50px);
        }

        #buttonTop:hover {
            color: var(--color-secondary-a-3, pink);
            background-color: var(--color-secondary-a-2, pink);
            border: var(--global-border-size, 10px) solid var(--color-secondary-a-1, pink);
        }