/* Allgemein
-----------------------------------------------------------------------------------*/

html {
	/* Mit diesen Einstellungen gibt es Problem mit dem Druchen und Zeichnen
	height: 100%;
	overflow: auto;
	*/
}

body {
	/* Mit diesen Einstellungen gibt es Problem mit dem Druchen und Zeichnen
	height: 100%;
	overflow: auto;
	*/
	accent-color: rgb(0,91,109);
	line-height: 1.3;
}

main {
    min-height: 20em; 
}

a {
	color: rgb(0,91,109);
}

div {
	display:inherit
}

.form-main { 
    margin: 0 auto; 
}



/* Pflichtfelder markieren
-----------------------------------------------------------------------------------*/

input:required,
select:required {
  border-width: 1.5px;
  border-color: rgb(246,160,0);
}
input:required:valid,
select:required:valid  {
  border-width: 1px;
  border-color: #dbdbdb;
}

input[type="radio"]:required + span {
	color: rgb(246,160,0);
}
input[type="radio"]:required:valid + span {
	color: unset;
}

input[type='checkbox']:required + label  {
  color: rgb(246,160,0);
}

input[type='checkbox']:required:checked + label {
  color: revert;
}



/* Drawing
-----------------------------------------------------------------------------------*/

canvas {
	border: 1px solid #ccc;
}

img#drawing_background { display: none; } 



/* CSS Framework Bulma
-----------------------------------------------------------------------------------*/

.title {
    font-size: 1.75em;   
	line-height: 1.5; 
	padding-left: 10px;
	padding-right: 10px; 	
}

.subtitle {
    font-weight: 500;  
	padding-left: 10px;
	padding-right: 10px; 	 
}

.text {
    display:inline;  
	padding-left: 10px;
	padding-right: 10px; 	   
}

.output {
    display:inline; 
	padding-left: 10px;
	padding-right: 10px;  
	font-weight:600; 
}

label {
	font-weight:600;
}

.control,
.linecontrol {
    font-size: 1em;     
}

.linecontrol {
	display: inline;     
}

.field {
	padding-top: 0.5em;
	padding-left: 10px;
	padding-right: 10px;     
}

.smallpadding {
	padding-top: 5px;
}

.nopadding {
	padding-top: 0px;
}

.field:not(:last-child) {
	margin-bottom: 0em;
}
input[type=range] {
	width: 100%;
}

select {
	width: 100%;
}

.select {
    width: 100%;     
}

.button {
	overflow: hidden;
	white-space: nowrap;
	display: block;
	text-overflow: ellipsis;
	box-shadow: 4px 4px 6px rgb(88, 88, 88);
}

article.message.output-box {
	display: none;
}

article.box.output-message {
	display: none;
}

.output-message {
	margin-left: auto;
	margin-right: auto;
	max-width: 25em;
}

.output-box {
	margin-left: auto;
	margin-right: auto;
	max-width: 30em;
}

.output-form {
	margin-left: auto;
	margin-right: auto;
	max-width: 30em;
}

@media (min-width: 0em) {
	/* Mehrzeilige Eingabe */
	main {
		margin: 1em;
	}

	line {
		display: block;
	}
}

@media (min-width: 30em) {
	/* Einzeilige Eingabe */
	main {
		margin: 2em;
	}

	line {
		display: flex;
		justify-content: space-between;
	}
	
	line > div {
		display: flex;
		align-items: center;
	}

	line > div > label {
		margin-right: 1em;
		white-space: nowrap;
	}
}

codeline {
	margin-top: 0.6em;
	margin-bottom: 0.4em;
	display: block;
}

buttonline {
	display: flex;
	align-items: center;
}

buttonline > .button {
	width: 15em;
}

buttonline > .button:first-child {
	margin-right: 1.5em;
}

buttonline > .button:last-child {
	margin-left: 1.5em;
}



/* Trendanalyse
-----------------------------------------------------------------------------------*/

.trendanalyse .button {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: whitesmoke;
	background-color:rgb(0,91,109);
	box-shadow: 4px 4px 6px black;
}

.trendanalyse img {
	width: 1.8em;
	margin-top: 0.15em;
}

buttontrendline {
	display: flex;
	align-items: center;
}

buttontrendline > .button:last-child {
	margin-left: 1.5em;
}