/* CSS Document Customizing Check-In*/

* {
  box-sizing: border-box;
}

html, body {
    --primary: #ffffff;
    --secondary: #243d51;
	--third: #c7348b;
    --add-lightgrey: #D8DFE6 /*#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);

	--header-footer-color: var(--primary);

	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 {
	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);
}



/* Begruessung*/
.hallo {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color: var(--secondary);
	font-size: 300%;
	font-weight: bold;
	vertical-align: bottom;
}

.TN-Titel {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1.8vw;
	font-weight: bold;
	color: var(--secondary);
}

/* Hervorheben */
.high {
	font-size: 1.8vw;
	font-weight: bold;
	color: var(--third);
}

.high-date {
	font-size: 1.5vw;
	font-weight: bold;
	color: var(--secondary);
}

.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);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border-radius: 1.5em 1.5em 0 0;
	font-weight:bold; 
	/*font-size: 40px;*/
	min-width: 4em;
	/*max-width: 200px;*/
}
.TN-Anzeige_light {
	/*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;
	font-weight:bold; 
	
	background: #FFFFFF;
	color: var(--secondary);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border-radius: 1.5em 1.5em 0 0;

	/*font-size: 40px;*/
	min-width: 4em;
	/*max-width: 200px;*/
	
	overflow: auto;
}

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

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

ul, li { display: inline; /* li nebeneinander anzeigen */
    list-style-type: none; /* ohne Aufzählungspunkte */
	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;
	justify-content: 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: #F2F2FA; /*#FFFFFF;*/
	color: var(--secondary);

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

	border:2px solid #c7348b;
	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: #F2F2FA; /*#FFFFFF;*/
	color: var(--secondary);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border: 2px solid #c7348b;
	border-radius: 12px;
}

.Box-RVFit-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: #F2F2FA; /*#FFFFFF;*/
	color: var(--secondary);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	border: 2px solid #c7348b;
	border-radius: 12px;
}

.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 weißer Pfeil - Robins Version */
.back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 80px;
    width: 4vw;
    min-width: 50px;
    max-height: 80px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background: var(--third);
    border-radius: 50%;
    margin-bottom: 0.5em;
}


/* zurueck Pfeil Position und Größe */
.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: #c7348b;
	font-weight:bold;
	font-size: 300%;
}


/* Robins Version */
.img-logo-details {
    margin-top: 1.5em;
    width: 14vw;
    max-width: 350px;
    margin-bottom: 1.5em;
}

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

/* kein Umbruch, sondern Abkürzung durch ... */
.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 #c7348b;
	background: aliceblue;
	border-radius: 15px;
	cursor: crosshair;
}