h1 {font-size: 30px; margin-bottom: 1px; }
    h4 {font-size: 20px; margin-top: 2px; margin-bottom: 2px;}	
    h5 {font-size: 12px; margin-top: 2px; margin-bottom: 2px;}	
    
    body {margin:0;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	main {
  flex-grow: 1; /* Dehnt sich auf den verfügbaren Platz aus */
	}
	  footer {
		margin-top: auto; /* Schiebt den Footer nach unten, um den gesamten freien Platz einzunehmen */
		position: relative;
		}
	/* --- Dropdown List */
	ul{
        width : 680px;
        padding: 0;
        list-style: none;
        background: #f2f2f2;
	}
	ul li{
        display: inline-block;
        position: relative;
        line-height: 15px;
        text-align: left;
		font-size: 16px;
	}
	ul li a{
		display: block;
		padding: 8px 15px;
		color: #333;
		text-decoration: none;
	}
	ul li a:hover{
		color: #fff;
		background: #939393;
	}
	ul li ul.dropdown{
		min-width: 10%; /* Set width of the dropdown */
		background: #f2f2f2;
		display: none;
		position: absolute;
		/*z-index: 999;*/	
		left: 0;
	}
	ul li:hover ul.dropdown{
	    display: block; /* Display the dropdown */
	}

    /*------- Nachrichten  -------------------------------------------------*/
    .MessageLine{
        color: rgb(255, 123, 0);
        font-size: medium;
    }
    /*------- Neue Zeile  -------------------------------------------------*/
    #NeueFahrt {       
        width: 100%;
        @media screen and (min-width:1024px) {
            table-layout: auto;
            /*width: 100%;*/
            width: 100%;
            /*font-family: "arial" ,Arial, Helvetica;*/
            font-size: small;
            border: 1px solid;}
        @media screen and (min-width:1920px) {
            table-layout: auto;
            width: 85%;
            font-family: "arial" ,Arial, Helvetica;
            font-size: small;
            border: 1px solid;}
    }
    #NeueFahrt th {
        /*height: 15px;*/
        background-color: rgb(124, 145, 250);
        color: white;
        border: 1px solid #ddd;
        padding: 1px;
        text-align: center;
        font-size: small;
    }
    #NeueFahrt td {
        border: 1px;
        padding: 1px ;
        text-align: left;
        font-size : small;
        white-space:nowrap;
    }    
    /*------- Fahrtenbuch  ------------------------------------------------*/
    #T_Fahrtenbuch{
        table-layout: auto; 
        /*width: 100%;
        @media screen and (min-width:1024px) {
            width: 100%;}
        @media screen and (min-width:1920px) {
            width: 85%;}*/
        font-family: "arial" ,Arial, Helvetica; 
        font-size: small;
        border: 1px solid;
    }
    #T_Fahrtenbuch tr:hover {
    background-color: lightblue;
    color: darkblue;
    }
    #T_Fahrtenbuch th {
        position: sticky;
        z-index: 1;
        top: 0;
        background-color: rgb(30, 139, 255);
        color: white;
        border: 1px solid #ddd;
        padding: 1px;
        text-align: center;
        font-size: small;
    }
    #T_Fahrtenbuch td {
        border: 1px;
        padding: 1px;
        text-align: left;
        font-size : small;
        white-space:nowrap;
    }

    /*------- Boote  -------------------------------------------------*/
    #Boote{
        font-family: "arial" ,Arial, Helvetica;
        font-size: medium;
        border: 1px solid;
        border-collapse: collapse; 
        /*width: 100%;*/
    }
    #Boote tr:hover {
    background-color: lightblue;
    color: darkblue;
    }
    #Boote th {
        position: sticky;
        z-index: 1;
        top: 0;
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 4px;
        text-align: center;
    }
    #Boote td {
        border: 1px solid #ddd;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
    }
    /*------- Strecken  -------------------------------------------------
    kommeniert am 7.6.25 ersetzt duch CLS_FahrtenBuch
    #T_Strecken{
        font-family: "arial" ,Arial, Helvetica;
        font-size: medium;
        border: 1px solid;
    }
    #T_Strecken th {
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 4px;
        text-align: center;
    }
    #T_Strecken td {
        border: 1px solid #ddd;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
    }*/
    /* Verleih*/
    
    /*------------------------------------------------------------------------*/
    .CLS_DLG_Strecke {
        z-index: 1; /* Sit on top */
        padding-top: 1px; /* Location of the box */
        padding-left: 1px; /* Location of the box */
        left: 0;
        top: 0;
        width: 50%; 
        height: 90%; 
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(82, 168, 199); /* Fallback color */
        }
    .CLS_content{
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
    }
    .CLS_boxFeldVariabel{
        float: none; /* key */
        width: auto; /* key */
        height: 100%;
        overflow: hidden; /* key */
        border: 1px solid orange;
    }
    .CLS_boxFeldVariabel input{
        width: 100%;
        height: 100%;
    }

    /* Container für den Scroll bei dem der Header stahen bleibt*/
    
    .table-container {
        /*height: 500px;
        @media screen and (min-width:1920px) {
            height: 800px;
        }*/
        /*wdth eingefügt, damit keine horizontale scroll box*/
        width : 1980px;
        /*overflow-y: scroll; */
        border: 1px solid #ccc;
    }
    /*------- Mitglieder  -------------------------------------------------*/
    #Mitglieder{
        font-family: "arial" ,Arial, Helvetica;
        font-size: medium;
        border: 1px solid;
        border-collapse: collapse; 
        width: 100%;
    }
    #Mitglieder tr:hover {
    background-color: lightblue;
    color: darkblue;
    }
    #Mitglieder th {
        position: sticky;
        z-index: 1;
        top: 0;
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 2px;
        text-align: center;
    }
    #Mitglieder td {
        border: 1px solid #ddd;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
    }
   /* .Mitglieder_Head*/
    /*.MitgliederBody*/
    /*-- Spaltenbreiten Fahrtenbuch */
    .colKopieren{width: 30px;}
    .colFaDatumV{width: 90px;}
    .colFaZeitV{width: 50px;}
    .colFaGewaesser{width: 100px;}
    .colFaStrecke{width: 218px;}
    .colFaKm{width: 66px;}
    .colFaBoot{width: 150px;}
    .colFaPaddler{width: 180px;}
    .colFaDaEnde{width: 122px;}
    .colFaZeEnde{width: 60px;}
    .colFaKomm{width: 207px;}
    .colFaFlusspunkte{width: 66px;}
    .colFaGemeinschaftsfahrtPunkte{width: 66px;}
    .colFaAktion{width: 170px;}

    /* Drachenboot */
    .colDrDatumV{width: 90px;}
    .colDrZeitV{width: 50px;}
    .colDrGewaesser{width: 100px;}
    .colDrStrecke{width: 108px;}
    .colDrKm{width: 66px;}
    .colDrBoot{width: 150px;}
    .colDrTeam{width: 121px;}
    .colDrTrainer{width: 141px;}    
    .colDrDaEnde{width: 122px;}
    .colDrZeEnde{width: 60px;}
    .colDrKomm{width: 207px;}
    .colDrrFlusspunkte{width: 66px;}
    .colDrGemeinschaftsfahrtPunkte{width: 66px;}
    .colDrAktion{width: 170px;}
    /*------- Select  -------------------------------------------------------*/
    #tableSelect{
        font-family: "arial" ,Arial, Helvetica;
        width: 20%;
    }
    #tableSelect th {
        padding: 1px;
        text-align: left;
        font-size: small;
        font-weight: lighter;
    }
    /*------- Passwort  ----*/
    #tableSelect td {
        padding: 1px;
        text-align: left;
        font-size : normal;
        white-space:nowrap;
    }
    /*----- Select --------*/
    .Filter-container {
        display: flex;
        align-items: flex-end;
    }
    .Filter-container {
        left: 0;
    }
    /*------- Login  ----*/
    #sLogin{
        font-family: "arial" ,Arial, Helvetica;
        border-collapse: collapse;
        width: 60%;
        font-size: large;
        color: red;
    }
    /*------- Titel Boxen  ---- */
    headerMain{
        width: 100%;
    }
    header{
        width: 100%;
        display: flex;
        flex-direction: row;
    }
    header1Bild{
        flex: 1 1 4%;
    }
    header2Titel{
        width : 65%;
        border: 1px ;
        margin: 0;
        flex: 1 1 65%; 
    }
    header3InfoBox{
        width : 65%;
        border: 1px ;
        margin: 0;
        flex: 1 1 25%; 
    }
    /*--   navigation bar tabs ------------------------------------*/
    /* Style the tab */
    .tab {
        width : 65%;
        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;
    }
    /*---Fahrtenbuch Kopieren Tabelle---------------------------------- */
    #DLG_Kopieren{
        display:none; /* Hidden by default */
        /*position: fixed; /* Stay in place */
        z-index: 100; /* Sit on top */
        padding-top: 1px; /* Location of the box */
        padding-left: 1px; /* Location of the box */
        left: 0;
        top: 0;
        /*width: 40%; 
        height: 80%; */
        /*overflow: auto; /* Enable scroll if needed */
        background-color: rgb(151, 190, 205); /* Fallback color */
        /*background-color: #00000040; /* Black w/ opacity */
        }
    #T_FahrtKopieren{
        font-family: "arial" ,Arial, Helvetica;
        font-size: medium;
        border: 1px solid;
    }
    #T_FahrtKopieren th {
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 4px;
        text-align: center;
    }
    #T_FahrtKopieren td {
        border: 1px solid #ddd;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
    }
    /*-----------------------------------------------------------------------*/
    #DLG_KopierenMulti{
        display:none; /* Hidden by default */
        /*position: fixed; /* Stay in place */
        z-index: 100; /* Sit on top */
        padding-top: 1px; /* Location of the box */
        padding-left: 1px; /* Location of the box */
        left: 0;
        top: 0;
        /*width: 40%; 
        height: 80%; */
        /*overflow: auto; /* Enable scroll if needed */
        background-color: rgb(151, 190, 205); /* Fallback color */
        /*background-color: #00000040; /* Black w/ opacity */
        }
    #T_FahrtKopierenMulti{
        font-family: "arial" ,Arial, Helvetica;
        font-size: medium;
        border: 1px solid;
    }
    #T_FahrtKopierenMulti th {
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 4px;
        text-align: center;
    }
    #T_FahrtKopierenMulti td {
        border: 1px solid #ddd;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
    }
    /*------- Planung  und Verleih -------------------------------------------------*/
    .CLS_FahrtenBuch{
        table-layout: auto;
        /*width: 100%;
        @media screen and (min-width:1024px) {
            width: 100%;}
        @media screen and (min-width:1920px) {
            width: 85%;}
        /*font-family: "arial" ,Arial, Helvetica;*/
        font-size: small;
        border: 1px solid;
    }
    .CLS_FahrtenBuch tr:hover {
    background-color: lightblue;
    color: darkblue;
    }
    .CLS_FahrtenBuch th {
        position: sticky;
        z-index: 1;
        top: 0;
        background-color: rgb(30, 139, 255);
        color: white;
        border: 2px solid #ddd;
        padding: 2px;
        text-align: center;
        font-size: small;
    }
    .CLS_FahrtenBuch td {
        /*display: table-cell;
        vertical-align: top;*/
        border: 1px;
        padding: 1px;
        text-align: left;
        font-size : medium;
        white-space:nowrap;
        /*width:100%;*/
    }
   /* .CLS_FahrtenBuch tbody {
      display: block;
      flex: 1 1 auto;
      /*max-height: 1000px; /* Höhe der scrollbaren Tabelle 
      overflow-y: auto;
    }
    /*--- class buttons*/
    .CLS_redButton {
        background-color: rgb(233, 107, 78);
    }
    /*--------------------------------------------------------*/
    #CLS_DLG_SendenMail{
        display:none; /* Hidden by default */
        /*position: fixed; /* Stay in place */
        z-index: 100; /* Sit on top */
        padding-top: 1px; /* Location of the box */
        padding-left: 1px; /* Location of the box */
        left: 0;
        top: 0;
        /*width: 40%; 
        height: 80%; */
        /*overflow: auto; /* Enable scroll if needed */
        background-color: rgb(151, 190, 205); /* Fallback color */
        /*background-color: #00000040; /* Black w/ opacity */
        }