* {
    box-sizing: border-box;
}


html, body {
   /*height: 100%  this has no effect? */
    margin:0px;
    font-family: Verdana, sans-serif;
    
    
}

.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-container input[name="T21"], 
.input-container input[name="T22"]
 {
    display: inline-block;
    align-items: center;
    width: 40%; /* adjust this as needed */
    text-align:center;
    font-size: large;
}



button[type="submit"] {
    display: block;
    width: 80%;
    margin: 0px auto;
    
}
/* ### this section is for the reactive design of the input fields ### */
@media (max-width: 1062px) {
.container2 {
   
  width: 80%;
  margin: auto;
  display: block;
        
}

.container2 h1 {
    font-size: 18px;
}
.container2 p {
    font-size: 14px;
}
.inner {

    width: 80%;
}
.instructions h1 {
    font-size: 13px;
}
.instructions p  {
    font-size: 13px;
}




.vertical {

    display: block;


}

.horizontal {

    display: none;

}

}      
@media (min-width: 1062px) {
.container2 {
  
  width: 30%;
  min-width: 30%;
  margin: auto;

  margin-top: 50px;
  display: block;
        
}

.container2 h1 {
    font-size: 18px;
}
.container2 p  {
    font-size: 14px;
}
.inner {

    width: 50%;
}
.instructions h1 {
    font-size: 18px;
}
.instructions p  {
    font-size: 16px;
}




.vertical {

    display: none;


}

.horizontal {

    display: flex;

}


}

.container p {
  font-weight: normal;
  /*font-size: 30px;*/
  

}
      
/* CSS-Regeln für die Gestaltung der Eingabefelder und des Buttons */
input, button {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
}

/* CSS-Regel für die Hinzufügung eines Rahmens zu den Eingabefeldern */
input {
border: 1px solid #ccc;

}

button {
background-color: rgb(125, 186, 0);
color: white;
}




/* ### this is required to prepare the Sticky Footer ### */
.content {
    min-height: 100%;

}

.content-inside {
padding: 0px;
padding-bottom:130px;


}


/* ### this is the green top menue bar ### */
.topnav {
    position: fixed;
    top: 0%;
    left: 0%;
    height: 50px;
    width: 100%;
    padding-right: 20px;

    background-color:  rgb(124, 186, 0); /*#333;*/
    overflow: hidden;

    z-index: 999;
}

.topnav a {

    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

    /* Change the color of links on hover */
.topnav a:hover {

    background-color: #ddd;
    color: black;
}

    /* Create a right-aligned (split) link inside the navigation bar */
.topnav a.split {

    float: right;
    background-color: rgb(182, 10, 10);
    color: rgb(255, 255, 255);
}

.topnav a.split:hover {

    background-color: #ddd;
    color:rgb(182, 10, 10);
}

/* ### burger bar ### */
.top-bar {
    display: none;
}

/* ### this is the grey side menue bar ### */
.menu {
    display: none; 
    
}

 /* ### this is menue button ### */
.menu-btn {

    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    
}

/* ### this is the green bar ### */
.positioned-div {
    position: relative;
    top: 60px;
    padding-bottom: 60px;
    width: 100%;

}



.green-box {

    left: 0px;
    width: 100%;
    height: 250px;
    background-color: rgb(124, 186, 0);
    align-items: center;
    z-index: 0;
}



#logo {
    position: absolute;
    top: 40%;
    transform: translate(0 , -50%);
    padding-left: 70px;
    width: 500px;

}


/* ### this is the Footer Section ### */
.footer {
    height: 130px;
    margin-top: -130px;

}


.bottom-container {

position:relative;
bottom: 0; 
display: flex;
left: 0px;                
background-color: rgb(48, 48, 48);
padding: 0px;


}

.left-column {
position: relative;
top: 0px;

left: 0px;
width: 200px;
height: 130px;
background-color: rgba(48, 48, 48, 0.048);
color: white;
text-align: left;
padding: 25px;
font-size: 15px;
line-height: .8;


}

.right-column {
position: absolute;
top: 50%;
transform: translate(0% , -50%);
right: 0px;
width: 250px;
background-color: rgb(48, 48, 48);

}
.bottom_logo{

width: 200px;
height: auto;
margin-left: 30px;

}
a {
text-decoration: none; /* remove underline */
color: white; /* set text color to white */
display: block; /* display links as block elements to stack them */
line-height: 1.5;
}







/* ### Responsive layout ### */
@media only screen and (max-width: 1500px) {

.green-box{
height: 150px;
}
#logo {
top: 35%;
padding-left: 42px;
width: 311px;
}

}



/* ### Responsive layout ### */
/* start the vertical menue here */
@media only screen and (max-width: 1020px) and (min-height: 450px){


.positioned-div {
position: relative;
top: 60px;
padding-bottom: 60px;
width: 100%;


}

.green-box{
height: 150px;

}

#logo {
top: 35%;
padding-left: 42px;
width: 311px;
}

.topnav  {
display: none;

}

.topnav a {
display: none;
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}

.top-bar {
position: fixed;

top: 0%;
left: 0%;
height: 50px;
width: 100%;

z-index: 1;

background-color:rgba(125, 186, 0, 1); /*#333;*/
display: flex;
align-items: center;
}

/* Menu Container */
.menu {
display: block;
position: absolute;

margin-block-start: 150px;
height: 320px;
width: 250px;
position: fixed;
z-index: 995;
top: 60px;
right:-250px;
background-color:rgba(28, 29, 27, 0.95); /*#333;*/
overflow-x: hidden;
transition: 0.5s;
}

.menu-pos {
position:absolute;
top: 10px;
}

/* Menu Items */
.menu a {

padding: 8px 8px 8px 32px;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 17px;
color: #f1eeee;
display: block;
transition: 0.3s;
z-index: 995;
}

/* Menu button */
.menu-btn {
position: absolute;
right: 0;
margin-left: 20px;
font-size: 20px;
color: white;
cursor: pointer;
}


/* Menu button */
.right_menu-btn {
position: absolute;
right: 0;
margin-left: 20px;
font-size: 20px;
color: white;
cursor: pointer;
}

.menu-open .menu {
right: 0;
}


.menu a:hover {

background-color: #ddd;
color: black;
}

.menu a.split {


background-color: rgb(179, 6, 6);
color: rgb(255, 255, 255);
}

.menu a.split:hover {

background-color: #ddd;
color:rgb(180, 13, 13);
}


h1 {
font-size: 20px;
word-break: break-all;
}


}

@media only screen and (max-width: 1020px) and (max-height: 450px){


.positioned-div {
position: relative;
top: 60px;
padding-bottom: 60px;
width: 100%;


}

.green-box{
height: 150px;

}

#logo {
top: 35%;
padding-left: 42px;
width: 311px;
}


.topnav  {
display: none;

}

.topnav a {
display: none;
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.top-bar {
position: fixed;

top: 0%;
left: 0%;
height: 50px;
width: 100%;

z-index: 1;

background-color:rgba(125, 186, 0, 1); /*#333;*/
display: flex;
align-items: center;
}

/* Menu Container */
.menu {
display: block;
position: absolute;

margin-block-start: 0px;
height: 320px;
width: 250px;
position: fixed;
z-index: 995;
top: 60px;
right:-250px;
background-color:rgba(28, 29, 27, 0.95); /*#333;*/
overflow-x: hidden;
transition: 0.5s;

}
.menu-pos {
position:absolute;
top: 10px;


}

/* Menu Items */
.menu a {

padding: 8px 8px 8px 32px;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 17px;
color: #f1eeee;
display: block;
transition: 0.3s;
z-index: 995;
}

/* Menu button */
.menu-btn {
position: absolute;
right: 0;
margin-left: 20px;
font-size: 20px;
color: white;
cursor: pointer;
}

/* Menu button */
.right_menu-btn {
position: absolute;
right: 0;
margin-left: 20px;
font-size: 20px;
color: white;
cursor: pointer;
}

.menu-open .menu {
right: 0;
}


.menu a:hover {

background-color: #ddd;
color: black;
}

/* Create a right-aligned (split) link inside the navigation bar */
.menu a.split {


background-color: rgb(179, 6, 6);
color: rgb(255, 255, 255);
}

.menu a.split:hover {

background-color: #ddd;
color:rgb(180, 13, 13);
}



h1 {
font-size: 20px;
word-break: break-all;
}
}