/* CSS Document Customizing Check-In*/

* {
  box-sizing: border-box;
}

html, body {
    --primary: #ffffff;
    --secondary: #0072a8; /*dunkelblau*/
    --third: #91d59d; /*Mint*/
    --add-lightgrey: #d9d9d9;
    --add-midblue: #758c9e;
    --add-lightblue: #89d8f5;
    --add-lightpink: #ec91cf;
    --add-yellow: #f8ea45;
    --add-orange: #ffba77;
    --add-green: rgb(86,211,139);
    --add-steel: #46769E;
    --add-violet: rgb(63,8,112);
	--add-RVP: #0072a8; /*dunkelblau*/

	--header-footer-color: var(--primary);
	--highlight: #c7348b; /* NOVENTI pink*/

	width: 100%;
	height: 100%;
	margin:auto;
	background-color: var(--primary);
  	color: var(--secondary);
	  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }


a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer {
    cursor: pointer;
}

a:hover, a:active {
	color: var(--add-lightblue);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--secondary);
}

.font-hell {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--add-midblue);
}

.high {
	color: var(--highlight);
}

/* Def. Schriftgrößen für Textanzeige*/
.hallo {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--secondary);
	font-size: 350%;
	font-weight: bold;
}

.TN-Anzeige {
	/*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--secondary);
	background-color: var(--add-lightgrey);
	border-radius: 1.5em;
	font-weight:bold; 
	font-size: 200%;
	min-width: 30em;
	max-width: 90%;
}

img {
  margin: 0;
  padding: 2px;
}

hr{
  background-color: var(--third);
  height:1px;
}

ul, li { display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzaehlungspunkte */
	text-align: center;
	font-size: larger;
}

p {
	font-size: larger;
}

#container {
    margin: 0 auto;
/*	
    display:flex;
    align-items:center;
	
    flex-direction: column;
*/
}


.Rahmen {
	display:flex;
    align-items:center;
    flex-direction: column;

	min-width: 50rem;
	max-width: 90%;
	min-height: 500px;
	max-height: 100%;
	float:none;

	background: #FFFFFF;
	color: var(--secondary);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border-radius: 5rem;

	overflow: auto;
}

.Box-Anmeldung {
	display:flex;

    align-items:center;
    justify-content:center;
	
	flex-wrap: wrap;
	flex-direction: row;

	min-width: 48rem;
	max-width:80%;
	height: auto;
	float: none;

	padding: 5px 0 5px 0;

	background: aliceblue;
	color: var(--secondary);

	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

	border:2px solid var(--third);
	border-radius: 12px;
}

.Box-Trena-Anmeldung {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	min-width: 48rem;
	max-width: min(80%, 645px);
	height: auto;
	float: none;
	padding: 5px 0 5px 0;
	background: aliceblue;
	color: var(--secondary);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border:2px solid var(--third);
	border-radius: 12px;
}

.TN-Anzeige_light {
	display: none;
}

.Kursanzeige {
	font-size: 400%;
}

input[type="submit"], input[type="button"] {
	position: relative;
	margin-top:0.5rem;
	margin-bottom:10px;
	color: var(--primary);
	font-style: normal;
	font-weight: 500;
	font-size: 150%;
	
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;

	float:none
 }

.senden-text {	
	color: var(--primary);
	font-style: normal;
	font-weight: 500;
	font-size: 150%;

	padding: 1em;
	
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* button text fuer Unterschrift */
.unterschreiben {	
	color: var(--primary);
	font-style: normal;
	font-weight: 500;
	font-size: 180%;

	padding: 1em;
	
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.senden {
    display:flex;
    align-items:center;
    justify-content:center;
	
	min-width: 40rem;
	height: 7rem;
	
	background: var(--third);
	border-radius: 30.5px;
}

.loeschen {
    position:relative;
	
    display:flex;
    align-items:center;
    justify-content:center;

	min-width: 20rem;
	height: 7rem;
	font-weight: 500;
	
	text-align: center;
	text-decoration: none;

	background: var(--third);
	border-radius: 30.5px;
	opacity: 50%;
}

/* zurueck Pfeil, pink Kreis weisser Pfeil */
.back {
	position:relative;
	
    display:flex;
    align-items:center;
    justify-content:center;

	width: 80px;
	height: 80px;
	font-weight: 500;
	
	text-align: center;
	text-decoration: none;

	background: var(--third);
	border-radius: 50%;

	margin-bottom: 1em;
}

/* zurueck Pfeil Position und Groesse */
.img-back-details {
	position:absolute;
	width: 80px;
}

.form-design {
  display: block;
  width: 40rem;
  height: 7rem;
  background-color: #F4F4F4;
  background-image: none;
  border-radius: 30.5px;
}

.label-design {
	padding: 6px;
	font-size: 150%;
	color: #888888;
	text-align: center;
	background: #F4F4F4;;
  }

 
 .cell-width {
	min-width: 600px;
	max-width: 80%;
	min-height: 105px;
	max-height: 100%;
	color:var(--secondary);
}

.Notiz-Anzeige {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--add-orange);
	font-weight:bold;
}


.img-logo-details {
	margin-top: 1.5em;
	width: 100%;
	max-width: 550px;
	margin-bottom: 1.5em;
}


.img-footer-details {
	width: 100px;
}


.textoverflow {
	max-width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#header {
	position: fixed;
	left: 0;
	top: 0;
	height: 180px;
	width: 100%;
    margin: 0;
    padding: 10px;
	background-color: var(--header-footer-color);
	/*border-radius: 4rem 0rem;*/
    z-index: 200;
}


#footer {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 85px;
	width: 100%;
    margin: 0;
    padding: 1px;
	background-color: var(--header-footer-color);
    z-index: 200;
}

#sig-canvas {
	width: 100%;
	max-width: 820px;
	min-height: 460px;
	border: 2px solid var(--third);
	background: aliceblue;
	border-radius: 15px;
	cursor: crosshair;
}