html {
	font-family: "Lucida Sans", sans-serif;
	font-family: "Century Gothic", "Lucida Sans", sans-serif;

	background-color: powderblue;
	color: steelblue;

	margin: 0;
	padding: 0;
}

body {
	height: 100%
	overflow: hidden;
}

h1, h2, h3, h4  {
	overflow: hidden;
	font-weight: lighter;
	margin: 10px;
	/*padding: 0px;*/
	flex: 1 1 auto;
}

.primary-title1 {
	letter-spacing: 0.36em; 
	font-weight: bold;
}

.secondary-title2 {
	font-size: 0.7em;
}

.tertiary-title {
	display: inline-block;
	/*
	padding-left: 15px;
	padding-right: 15px;*
	*/
}

a.hosting:link, a.contact:link {
	/*text-decoration: none;*/
	/*border-bottom: .2em sing white;	*/
	color: white;
}

a.hosting:visited, a.contact:visited {
	/*text-decoration: none;*/
	/*border-bottom: .2em sing white;	*/
	color: silver;
}

@media (max-width: 1920px) {
  /*h1 {
    font-size: 1.5em;
  }*/
  .text-container p {
    font-size: 0.875em;
  }
}

/* Medienabfrage für kleinere Bildschirme */
@media (max-width: 768px) {
  /*h1 {
    font-size: 1.5em;
  }*/
  .text-container p {
    font-size: 0.875em;
  }
}



/* Medienabfrage für sehr kleine Bildschirme */
@media (max-width: 480px) {
  /*
  h1 {
    font-size: 1.2em;
  }
  */
  .text-container p {
    font-size: 0.75em;
  }
}
#tabSpringRate_ID, 
#tabMaterial_ID,
#tabManufacturing_ID,
#tabApplication_ID,
#tabBucklingSafety_ID,
#tabBoundaries_ID,
#tabGrid_ID,
#tabOptions_ID {

	width: 230px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 5px 0px;
	
	border-style: solid;
	border-width: 1px;
	border-color: steelblue; /* Vererbung nicht hingekriegt */ 
	border-radius: 2px;
	/*overflow-y: auto;*/

}


#tabSpringRate_ID:not(:target) .inhalt,
#tabSpringRate_ID:not(:target) .hide,
#tabSpringRate_ID:target .show {
	display: none;
}

#tabSpringRate_ID:target .inhalt {
	display: block;
}


#tabMaterial_ID:not(:target) .inhalt,
#tabMaterial_ID:not(:target) .hide,
#tabMaterial_ID:target .show {
	display: none;
}


#tabMaterial_ID:target .inhalt {
	display: block;
}


#tabManufacturing_ID:not(:target) .inhalt,
#tabManufacturing_ID:not(:target) .hide,
#tabManufacturing_ID:target .show {
	display: none;
}

#tabManufacturing_ID:target .inhalt {
	display: block;
}


#tabApplication_ID:not(:target) .inhalt,
#tabApplication_ID:not(:target) .hide,
#tabApplication_ID:target .show {
	display: none;
}

#tabApplication_ID:target .inhalt {
	display: block;
}


#tabBucklingSafety_ID:not(:target) .inhalt,
#tabBucklingSafety_ID:not(:target) .hide,
#tabBucklingSafety_ID:target .show {
	display: none;
}

#tabBucklingSafety_ID:target .inhalt {
	display: block;
}


#tabBoundaries_ID:not(:target) .inhalt,
#tabBoundaries_ID:not(:target) .hide,
#tabBoundaries_ID:target .show {
	display: none;
}

#tabBoundaries_ID:target .inhalt {
	display: block;
}



#tabGrid_ID:not(:target) .inhalt,
#tabGrid_ID:not(:target) .hide,
#tabGrid_ID:target .show {
	display: none;
}

#tabGrid_ID:target .inhalt {
	display: block;
}


#tabOptions_ID:not(:target) .inhalt,
#tabOptions_ID:not(:target) .hide,
#tabOptions_ID:target .show {
	display: none;
}

#tabOptions_ID:target .inhalt {
	display: block;
}


.show,
.hide {
	font-family: inherit;
	height: 2em;
	width: inherit;
	font-size: 1.2em;

	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	transition:background-color 0.5s, color 0.5s;
}

.hide {
	color: floralwhite;
	background-color: steelblue;	
}

.show {
	color: inherit;
	background-color: inherit; /*steelblue;*/
}

.errorhide {
	background-color: red;
	color:floralwhite;	
}

.errorshow {
	background-color: coral;
	color:floralwhite;	
}


.usedhide {
	background-color: orange;
	color:floralwhite;	
}

.usedshow {
	background-color: navajowhite;
	color:darkorange;	
}


.show:hover,
.hide:hover {
	background-color: steelblue;	
	color:floralwhite;	
	transition:0.7s all ease-in-out!important;
}

.errorhide:hover,
.errorshow:hover {
	background-color: red;	
	color:floralwhite;	
	transition:0.7s all ease-in-out!important;
}

.usedhide:hover,
.usedshow:hover {
	background-color: orange;	
	color:floralwhite;	
	transition:0.7s all ease-in-out!important;
}


fieldset {
	border: 0;
	padding: 0px 0px 10px 0px;
	margin: 0px 0px 0px 0px;
}


legend {
	margin: 0px 0px 0px 0px;
}

.legend_with_text {
	padding: 10px 0px 0px 10px;
}

.legend_without_text {
	padding: 0px 0px 0px 10px;
}


label {
	display: block;
	font-size: 0.9em;
	padding: 10px 0px 5px 20px;
	margin: 0px 0px 0px 0px;

	/*height: 1.2em;	*/
}


input[type="text"], select {
	display: block;
	border: 1px solid darkGray;
	border-radius: 3px;
    box-shadow: inset 0px 1px 3px #c5b8ac;
	

	font-size: 1.0em;
	height: 1.5em;
	
	padding: 0px 0.5em 0px 0.5em;
	margin: 0px 0px 0px 20px;

}

input[type="text"]::placeholder {
  color: red;
  opacity: 0.3; /* Firefox */
}


input[type="text"].fehlerhaft {
	background-color: #ff6aff;
}

input[type="text"].korrekt {
	background-color: #ffffff;
	
}




/*
input[type="checkbox"]:required:invalid + label { color: red; }
input[type="checkbox"]:required:valid + label { color: green; }
*/


input[type="checkbox"]:required {
	display: none;
}
input[type="checkbox"]:required:invalid + label::before {
	content: "\2610";
	padding-right: 0.2em;
	font-size: 1.6em;
	color: red;
}
input[type="checkbox"]:required:valid + label::before {
	content: "\2611";
	padding-right: 0.2em;
	font-size: 1.6em;
	color: green;
}

/*ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
}*/



/* Fade in des Inhaltes */
.tabcontent {
  animation: fadeinEffect 1s; /* Fading effect takes 1 second */
}

.ipVP2, .ipFederverformung {
  animation: fadeinEffect 1s; /* Fading effect takes 1 second */
	
}

/* Go from zero to full opacity */
@keyframes fadeinEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Go from full to zero opacity */
@keyframes fadeoutEffect {
  from {opacity: 1;}
  to {opacity: 0;}
}


.Textformat1 {
	color: #FFFFFF;		
}

.Textformat2 {
	color: #000000;		
}

.Textformat3 {
	/*border: 1px solid darkGray;*/
	color: red; /*#00f00f;		*/
	font-size: 0.8em;
	/*padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;*/
	
	/*font-family: Calibri, Candara, Verdana, sans-serif;*/
}



p.senkrecht {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}	




@keyframes slidein {
  from {
    margin-top: 0%;
	height: 0%;
/*	margin-left: 100%;
    width: 300%;
*/
  }

  to {
    margin-top: 50%;
	height: 100%;
/*	
    margin-left: 0%;
    width: 100%;
*/	
  }
}


/* Scrollbalken-Stil Chrome, Edge und Safari */
::-webkit-scrollbar {
  width: 3px; /* Breite des Scrollbalkens */
}

/* Schieberegler (Thumb) */
::-webkit-scrollbar-thumb {
  background-color: #888; /* Farbe des Schiebereglers */
  border-radius: 3px; /* Abgerundete Ecken */
}

/* Hintergrund des Scrollbalkens */
::-webkit-scrollbar-track {
  background: #f0f0f0; /* Hintergrundfarbe */
}









.maingrid {
	position: absolute;
	width: 98%;
	height: 98%;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 12% 83% 5%;
	grid-gap: 0px;
	/*background-color: green;*/
	
}


.header-logo, .header-title-primary, .header-titel-secondary, .header-titel-tertiary, .header-login, .header-title-primary-start-german, .header-titel-secondary-start-german, .header-titel-tertiary-start-german {
	display: flex;
	justify-content: center;
	align-items: center;	
	overflow: hidden;
}

.header-logo {
	grid-column: 1 / 2;
}

.header-title-primary {
	grid-column: 2 / 4;
}

.header-titel-secondary {
	grid-column: 4 / 6;
}

.header-titel-tertiary {
	grid-column: 6 / 11;
}

.header-login {
	grid-column: 11 / 13;
}

.header-logo, .header-title-primary, .header-titel-secondary, .header-titel-tertiary, .header-login {
	grid-row: 1 / 2;
}

#no-longer-current {
	padding: 10px 20px 10px 10px;
	/*font-weight: bold;*/
	color: red;
	font-size: 0.8em;
	/*margin: 25px 25px 25px 25px;*/
}

/* fast die Spalten 1 bis 12 und die Zeilen 1 bis 2 der Klasse .maingrid zusammen */
.formgrid-start, .formgrid-two-columns {
	grid-column: 1 / 13;
	grid-row: 1 / 3;
	position: absolute;
	width: 100%;
	height: 100%;

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	grid-gap: 0px;
	/*background-color: aqua;*/
	
}

/* Zerlegt das Grid, definiert in der Klasse .formgrid-start in 2 Spalten und 1 Zeile */
.form-start, .form-two-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.form-start-german, .form-start-english, .form-two-columns-column-1, .form-two-columns-column-2 {
	display: flex;
	height: 100%;
	/*justify-content: center;*/
	flex-direction: column;	

/*	align-items: center;*/

	overflow: hidden;

	padding-left: 15px;
	padding-right: 15px;

}

.form-start-german, .form-two-columns-column-1 {
	/*background-color: yellow;*/
	grid-column: 1 / 2;
	grid-row: 1 / 2
}

.form-start-english, .form-two-columns-column-2 {
	/*background-color: red;*/
	grid-column: 2 / 3;
	grid-row: 1 / 2
}

.form-start-german p, .form-start-english p, .form-two-columns-column-1 p, .form-two-columns-column-2 p {
	/*padding-left: 15px;
	padding-right: 15px;
	*/
	font-size: 1.0em;  
}

.titel-container {
	flex: 0 1 auto;
	display: flex; 
	align-items: center;
	flex-direction: column;


	justify-content: center; /* Horizontal zentrieren */	
    text-align: center; /* Text im Inneren zentrieren */	
	
	
	/*overflow: hidden;*/
	/*height: 20vh;*/
}

.titel-container-error {
	flex: 0 1 auto;
	display: flex; 
	align-items: center;
	flex-direction: column;


	justify-content: center; /* Horizontal zentrieren */	
    text-align: center; /* Text im Inneren zentrieren */	
	
	font-size: 2.0em;  
	font-weight: bold;
	color: red;

	padding: 15px 15px 15px 15px;
}

.text-container {
	flex: 0 1 auto; /* Nutzt den restlichen verfügbaren Platz und kann schrumpfen */
	min-height: 0; /* Stellt sicher, dass das Element auch weniger Platz einnehmen kann */
	overflow-y: auto; /* Scrollbalken hinzufügen, wenn der Inhalt den Container überläuft */
	margin-bottom: 10px;
	/*margin-right: 10px;*/
	padding-right: 15px;
	/*background-color: red;*/

}

.text-container-error {
	font-weight: bold;
	color: red;
            display: flex;
            justify-content: center; /* Horizontal zentrieren */
           /* align-items: center; */  /* Vertikal zentrieren */
           /* height: 100vh; */        /* Höhe des Containers */	
}

.button-container {
	flex: 0 1 auto;
	display: flex; 
	align-items: center;
	flex-direction: column;
}



.footer-left, .footer-middle, .footer-right, .footer-left-left-start, .footer-left-right-start, .footer-right-left-start, .footer-right-right-start {
	display: block;
	text-align: left;
	justify-content: center;
	align-items: center;
	margin: 5px 0px 0px 0px;
	font-size: 0.7em;
	color: white;
	background-color: steelblue;
	grid-row: 3 / 4;
	padding-left: 10px;
	padding-right: 10px;
	
}

.footer-left {
	grid-column: 1 / 6;
}

.footer-middle {
	grid-column: 6 / 10;
}

.footer-right {
	grid-column: 10 / 13;
}

.footer-left-left-start {
	grid-column: 1 / 6;
}

.footer-left-right-start {
	grid-column: 6 / 7;
}
.footer-right-left-start {
	grid-column: 7 / 12;
}

.footer-right-right-start {
	grid-column: 12 / 13;
}

/*	
.footer-left, .footer-middle, .footer-right, .footer-left-left-start, .footer-left-right-start, .footer-right-left-start, .footer-right-right-start {
	grid-row: 3 / 4;
}
*/





.springgrid-left, .springgrid-right {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: steelblue;
	margin: 0;
	padding: 5px;

}

.springgrid-left {
	grid-column: 1 / 11;
	grid-row: 2 / 3;
}

.springgrid-right {
	grid-column: 3 / 13;
	grid-row: 2 / 3;
}



.input-left, .input-right {
	display: flex;
	/*overflow-y: auto;*/

}

.input-left {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	justify-content: center;
  	margin-right: 10px;
}

.input-right {
	grid-column: 11 / 13;
	grid-row: 2 / 3;
	justify-content: center;
  	margin-left: 10px;
}

.submit-button {
	display: flex;
    flex-direction: column;	
	/*background-color: red;*/
	height: 15%;
	overflow-y: auto;
}

.tabs {
	display: flex;
    flex-direction: column;	
	/*background-color: yellow;*/
	height: 85%;
	overflow-y: auto;
  	overflow-x: hidden;
	padding-right: 10px; 
}


.apply-grid-025, .apply-grid-050, .apply-grid-075, .apply-grid-100 {
	display:none;
	font-size: 2.0em;
	color: floralwhite;
	padding: 30px;
}

.spring-grid-025, .spring-grid-050, .spring-grid-075, .spring-grid-100 {
	position: relative;
	width: 100%;
	height: 100%;

	display: grid;
	border-style: solid;
	border-color: black;
	background-color:black;
	grid-gap: 1px;
	overflow-y: auto;	
}


.apply-grid-025,
.spring-grid-025 {
	grid-template-columns: repeat(27, 1fr);
	grid-template-rows: repeat(27, 1fr);
}

.apply-grid-050,
.spring-grid-050 {
	grid-template-columns: repeat(52, 1fr);
	grid-template-rows: repeat(52, 1fr);
}

.apply-grid-075,
.spring-grid-075 {
	grid-template-columns: repeat(77, 1fr);
	grid-template-rows: repeat(77, 1fr);
}

.apply-grid-100,
.spring-grid-100 {
	grid-template-columns: repeat(102, 1fr);
	grid-template-rows: repeat(102, 1fr);
}


#spring_grid_left_corner {
	display:flex;
	grid-row: 1 / 3;
	grid-column: 1 / 3;
	background-color: powderblue;	
}


#spring-grid-row-description-025, #spring-grid-row-description-050,
#spring-grid-row-description-075, #spring-grid-row-description-100 {
	display:flex;
	grid-row: 1 / 2;
	font-size: 0.8em;
	background-color: powderblue;
	align-items: center;
	justify-content: center;
	padding: 5px 0px 5px 0px;
	cursor: default;	
}


#spring-grid-row-description-025 {
	grid-column: 3 / 28;
}

#spring-grid-row-description-050 {
	grid-column: 3 / 53;
}

#spring-grid-row-description-075 {
	grid-column: 3 / 78;
}

#spring-grid-row-description-100 {
	grid-column: 3 / 103;
}



.spring_row_values {
	display:flex;
	background-color: powderblue;
	font-size: 0.5em;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	padding: 5px 0px 5px 0px;
	cursor: default;
}


#spring_grid_column_description_025, #spring_grid_column_description_050,
#spring_grid_column_description_075, #spring_grid_column_description_100 {
	display: flex;
	grid-column: 1 / 2;	
	font-size: 0.8em;
	background-color: powderblue;
	align-items: center;
	justify-content: center;		
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	padding: 0px 5px 0px 5px;
	cursor: default;
}


#spring_grid_column_description_025 {
	grid-row: 3 / 28;
}

#spring_grid_column_description_050 {
	grid-row: 3 / 53;
}

#spring_grid_column_description_075 {
	grid-row: 3 / 78;
}

#spring_grid_column_description_100 {
	grid-row: 3 / 103;
}

.spring_column_values {
	display:flex;
	background-color: powderblue;
	font-size: 0.3em;
	align-items: center;
	justify-content: center;
	padding: 0px 5px 0px 5px;
	cursor: default;
}





.valid {
	background-color: lightgreen;
}

.invalid {
	background-color: red;
}

.optimal {
	background-color: green;
}

.invalid_primary_only {
	background-color: navajowhite;
}

.undefined {
	background-color: white;
}

input[type="submit"],
#SubmitButton,
input[type="button"],
.my_button_container a {
	font-family: inherit;
	height: 3em;
	/*width: 100%;*/
	width: 230px;
	font-size: 1.2em;
	background-color: lightskyblue; 
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	transition:background-color 0.5s, color 0.5s;

	padding: 0px 0px 0px 0px;
	margin: 0px 0px 5px 0px;

/*	margin: 25px 0px 0px 0px;
*/
	border-style: solid;
	border-width: 2px;
	border-color: steelblue; /* Vererbung nicht hingekriegt */ 
	border-radius: 2px;
}

input[type="submit"]:hover,
#SubmitButton:hover,
input[type="button"]:hover,
.my_button_container a:hover {
	background-color: steelblue;	
	color:floralwhite;	
}




/*
input[type="submit"],
#SubmitButton {
	font-family: inherit;
	height: 3em;
	width: 100%;

	font-size: 1.2em;
	background-color: lightskyblue; 
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	transition:background-color 0.5s, color 0.5s;

	margin: 25px 0px 0px 0px;
}

input[type="submit"]:hover,
#SubmitButton:hover {
	background-color: steelblue;	
	color:floralwhite;	
}
*/

.helpgrid_left {
	display: grid;
	grid-column: 1 / 11;
	grid-row: 2 / 3;
	grid-template-columns: 20% 60% 20%;
}

.helptextgrid_left_middle {
	grid-column: 2 / 3;
}