body {
   font-family:Arial, sans-serif;
   margin:0;
   padding:0;
   background-color:#f4f4f4;
   color:#333;
}
header {
   max-width:1000px;
   background-color:white;
   color:#808000;
   margin:auto;
   padding:1rem 0;
   text-align:center;
   font-weight:bold;
   font-size:1.67em;
}
@media (max-width:600px) {
   header {
      font-size:1.33em;
   }
}

footer {
   position:fixed;
   bottom:0;
   width:100%;
/*   max-height:40px;*/
   background-color:#333;
   color:white;
   padding:10px 5px;
   text-align:center;
   opacity:0.85;
   overflow:hidden;
}
@media (max-width:600px) {
   #body_div {
      min-height:calc(100vh - 40px);
   }
   footer {
      position:static;
      margin-top:auto;
   }
}

a {
   color:#808000;
}
a:hover {
   color:#bbbb99; 
   text-decoration:underline;
}

header a, header a:hover  {
  color:inherit; /* blue colors for links too */
  text-decoration:inherit; /* no underline */
}

input[type=text],
input[type=email],
textarea,
select,
td {
   font-size:1em;
}

.notify0,
.notify1 {
   max-width:1000px;
   margin:11px auto;
   text-align:center;
   border-radius:10px;
   padding:10px;
   /*font-size:inherit;*/
   border:1px solid darkgreen;
   line-height:1.5em;
}
.notify1 {
   background:#ffffee;
   color:darkgreen;
}
.notify0 {
   background:#ffadad;
   color:darkred;
}

input[type=text],
input[type=email],
textarea,
select {
   border:1px solid gray;
   border-radius:3px;
   font-family:inherit;
}
select {
   background:#F5F5F5;
}
input[type=text],
input[type=email],
textarea {
	width:400px;
}
@media (max-width:600px) {
   input[type=text],
	input[type=email],
	textarea {
      width:300px;
   }
}
.bad_input {
   background-color:#ffe3b7;
   border:1px red solid;
   color:red;
}


.dsgvo {
   background-color:#e0e0e0;
   color:#333;
   text-align:justify;
   padding:10px 10px;
   margin:10px auto 10px;
   max-width:1000px;
   letter-spacing:0.3px;
   line-height:1.5em;
}
@media (max-width:600px) {
   .dsgvo {
      overflow:scroll;
      height:150px;
      resize:vertical;
      line-height:1.25em;
      background:linear-gradient(to bottom, gray -20%, #e0e0e0 10%, #F3F3F3 90%, gray 120%);
   }
}

.ctrl {
   white-space:nowrap;
   max-width:1000px;
   margin:auto;
   padding:5px 0px 20px;
}
.languages {
   display:inline-block;
   float:right;
   margin:10px 10px auto auto;
}
.resize {
   display:inline-block;
   white-space:nowrap;
   margin:auto auto auto 5px;
   height:30px;
   text-align:left;
}
.resize > div {
   display:none;
   color:inherit;
   margin:auto 0px;
   vertical-align:middle;
}
.font-smaller {
   font-size:1em;
   padding:5px;
   cursor:pointer;
}
.font-bigger {
   font-size:2em;
   cursor:pointer;
}

menu > li > div {
   width:100%;
}
.center_label {
   display:block;
   margin-left:auto;
   text-align:center;
   padding:8px;
   color:#900;
   width:100%;
   background:#eec;
   margin-bottom:20px;
   line-height:1.8em;
}
@media (max-width:600px) {
   .center_label {
      border-width:0px 30px;
      border-style:solid;
      border-color:#FFFFEE;s
   }
}
.center_label > span:first-child {
   font-size:1.5em;
   font-weight:bold;
}
.input_counter {
   width:40px;
   margin-left:5px;
   color:gray;
   vertical-align:top;
   display:inline-block;
}

.check_control ~ input[type=submit]:enabled,
.check_control:checked ~ input[type=submit]:disabled {
   display:none;
}
.check_control:checked ~ input[type=submit]:enabled,
.check_control ~ input[type=submit]:disabled {
   display:block;
}



table.rides {
   width:100%;
   border:0px;
   border-spacing:0px;
   margin:auto;
}
table.rides .light0 {
   background:white;
}
table.rides .light1 {
   background:#F5F5Dc;
}
table.rides th {
   background:#eeeecc;
   color:#990000;
   padding:5px 10px;
   text-align:center;
}
table.rides tr td {
   text-align:center;
   padding:3px 10px;
}
table.rides tr > td:first-child {
   white-space:nowrap;
}
@media (max-width:600px) {
   table.rides tr td {
      padding:2px 3px;
   }
}
table.rides tr > th:nth-child(2) {
   padding:0px 50px;
}
table.rides tr > td:nth-child(2) {
	overflow-wrap:break-word;
	word-break:break-word;
}
@media (max-width:600px) {
   table.rides tr > td:nth-child(2) {
      letter-spacing:-0.3px;
   }
}
table.rides tr a {
   border:0px;
   background:none;
   cursor:pointer;
   font-size:1.333em;
/*   padding:0px 7px;*/
   opacity:0.75;
   color:inherit;
}
table.rides tr a {
   text-decoration:none;
}
table.rides tr a:hover {
   opacity:1;
}



@media (max-width:600px) {
   .add_ride_form label > div {
      margin:0px 5px;
   }
}
.add_ride_table,
.confirmation_ride_table {
   border:0px;
   border-spacing:10px;
   max-width:600px;
   margin:auto;
}
.add_ride_table tr > td:nth-last-child(2),
.confirmation_ride_table tr > td:nth-last-child(2) {
   text-align:right;
   vertical-align:top;
   white-space:nowrap;
}
@media (max-width:600px) {
   .add_ride_table tr > td:first-child {
      white-space:normal;
   }
}
.confirmation_ride_table tr > td:nth-last-child(2) {
   font-weight:bold;
}
.add_ride_table tr > td:last-child {
   vertical-align:bottom;
}
.add_ride_table select {
   color:inherit;
}
.add_ride_form input[type=submit],
.confirmation_ride_box input[type=submit] {
   padding:10px 50px;
   font-size:1em;
   margin:auto;
}
.confirmation_ride_table tr:last-child > td {
   text-align:center;
   padding-top:5px;
}
.confirmation_ride_box {
   display:block;
   margin:20px auto 40px;
   background:#ffffee;
   box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
   padding:20px;
}
.del_please {
   max-width:600px;
}
.con_please {
   max-width:800px;
}
.sub_header {
   text-align:center;
   font-weight:bold;
   font-size:1.3em;
}



nav {
   background-color:#eeeecc;
   overflow:hidden;
   min-width:400px;
   max-width:1000px;
   margin:auto;
}
nav a {
   float:left;
   display:block;
   color:#990000;
   text-align:center;
   padding:14px 20px;
   text-decoration:none;
}
nav a:hover {
   background-color:#ccccaa;
   color:black;
   text-decoration:none;
}
nav a:active {
   background-color:#eeeecc;
   color:black;
   text-decoration:none;
}
nav a.clicked,
nav a.clicked:hover {
   background-color:#FFFFEE;
}

.container {
   margin:auto;
   max-width:1000px;
}
.container-content {
   display:none;
}
.container-content:target {
   display:block;
}

@media (max-width:600px) {
   nav a {
      float:none;
      width:100%;
      text-align:left;
      padding:7px 20px;
   }
}



/* Tab mit radio-Buttons */
.tabbed menu {
   list-style-type:none;
   display:block;
   padding-left:0;
   width:100%;
   border-bottom:0px;
   min-width:400px;
}

.tabbed > input,
.tabbed menu li {
   display:none;
}

.radio1:checked ~ menu .tab1,
.radio1_plus:checked ~ menu .tab1_plus,
.radio0:checked ~ menu .tab0,
.radio0_plus:checked ~ menu .tab0_plus {
   display:flex; justify-content:space-between; padding-bottom:2em; 
}

/* Visual Styles */
*,
*:after,
*:before {
   box-sizing:border-box;
}

.tabbed {
   width:100%;
   margin:0 auto;
}

.nav label {
   float:left;
   height:40px;
   line-height:40px;
   background-color:#eeeecc;
   text-transform:uppercase;
   vertical-align:middle;
}
.nav .label_plus {
   padding:5px 7px;
   margin-right:10px;
   margin-left:2px;
}
.nav .label_noplus {
   padding:0px 10px;
}
@media (min-width:600px) {
   .nav .label_plus {
      padding:5px;
   }
   .nav .label_noplus {
      padding:0px 25px;
   }
}
.nav .label_noplus:hover,
.nav .label_plus:hover {
   background-color:#ccccaa;
}
.nav .label_noplus:active,
.nav .label_plus:active {
   background-color:#eeeecc;
}
.radio1:checked ~ .nav label[for^="tab1"].label_noplus,
.radio1_plus:checked ~ .nav label[for^="tab1_plus"],
.radio0:checked ~ .nav label[for^="tab0"].label_noplus,
.radio0_plus:checked ~ .nav label[for^="tab0_plus"] {
   background-color:#FFFFEE;
   color:#111;
   position:relative;
   border-bottom:none;
}

.tabbed menu {
   clear:both;
}
.tabbed menu>li {
   padding:20px;
   width:100%;
   background-color:#ffffee;
   line-height:1.3em;
   color:#444;
   letter-spacing:0.3px;
}
@media (max-width:600px) {
   .tabbed menu>li {
      padding:30px 0px 0px;
      letter-spacing:0px;
   }
}
.radio1:checked ~ .nav label[for^="tab1"]:after,
.radio1_plus:checked ~ .nav label[for^="tab1_plus"]:after,
.radio0:checked ~ .nav label[for^="tab0"]:after,
.radio0_plus:checked ~ .nav label[for^="tab0_plus"]:after {
   content:"";
   display:block;
   position:absolute;
   height:2px;
   width:100%;
   background-color:none;
   left:0;
   bottom:-1px;
   border-bottom:0px solid silver;
}