/* Beginn CSS Document */
 
 /* CI Vorlagen:
 
 hellgrün (body-background): d3e6c6
 dark-grey (Schrift): 666666
 dark-green: #669966
 hellgrau: #D8D8D8
 
 */
body {
	font-family:Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:18px;
	font-color:silver;
	overflow-x: hidden;
	}
/* +++++++++++ DIVs +++++++++++++++++++++++*/
#insta {
	position:fixed;
	margin-top:-10px;
	margin-left:-5px;
	z-index:1000;
	}
	
#verticalcenter {
	position:fixed;
	background:white;
	margin-left:25%;
	width:50%;
	height:101%;
	margin-top:-10px;
	opacity: 0.9;
	}

#header {
	position:absolute;
	padding-top:-40px;
	width:30%;
	height:90px;
	overflow:hidden;
	text-align:left;
	}
	
#navigation {
	position:absolute;
	margin-left:40%;
	width:auto;
	height:50px;
	z-index: 9;
		}
		
#upcenter {
	position:absolute;
	background:white;
	margin-top:40px;
	margin-left:20%;
	width:77%;
	height:85%;
	border-radius:20px;
	padding:5px;
	/*border:1px solid #CCCCCC;*/
	border:1px solid #CCCCCC;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	overflow-x: hidden;
	}
	
#upleftbesidemap {
	position:absolute;
	background:white;
	margin-top:40px;
	margin-left:1%;
	padding:5px;
	width:17%;
	height:85%;
	border-radius:20px;
	border:1px solid #CCCCCC;
	z-index:1;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
#contentcenter {
	position:absolute;
	margin-top:44%;
	margin-left:1%;
	width:94%;
	height:90%;
	padding:5px;
	border:none;
	border-radius:20px;
	/*
	overflow-x: hidden;
	background:#CCCCCC;
	text-align:center;
	box-shadow: 3px 3px 6px black;
	*/
	}

.left {
	position:absolute;
	width:40%;
	height:100%;
	margin-left: 1%;
	padding: 10px;
	overflow:scroll;
	}
.right {
	position:fixed;
	width:50%;
	height:100%;
	margin-left: 50%;
	overflow:hidden;
	padding:30px;
 	}
	
		
.listcontentJourney {
	position:relative;
	background:white;
	margin-top:20px;
	width:600px;
	height:600px;
	padding:10px;
	border-radius:50%;
	box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.4);
	text-align: center;
	/*
	border: 1px double;
	overflow:hidden;
	margin-top:30px;
	margin-bottom:30px;
	*/
	}

.listcontentStopp {
	position:relative;
	background:white;
	margin-top:20px;
	width:600px;
	height:400px;
	padding:10px;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	/*
	border: 1px double;
	overflow:hidden;
	margin-top:30px;
	margin-bottom:30px;
	*/
	}

.listcontentTrip {
	position:relative;
	background:white;
	margin-top:20px;
	text-align:center;
	width:600px;
	height:100px;
	padding:10px;
	white-space:nowrap;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	/*
	border: 1px double;
	margin-top:30px;
	margin-bottom:30px;
	*/
	}

.middle {
	width:90%;
	text-align:center;
	}

.footer {
	position:absolute;
	margin-top: 90%;
	margin-left: -10px;
	display: flex;
	justify-content: space-between; /* Abstand zwischen den Blöcken */
	align-items: center;            /* vertikal mittig */
	max-height: 12%;
	padding: 5px;
	background:#333333;               /* Beispiel-Hintergrund */
	flex-wrap: wrap;
	width:100%;                /* erlaubt Umbruch bei kleinen Bildschirmen */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.footerTab {
  flex: 1;                        /* alle Spalten gleich breit */
  padding: 10px;
  text-align: center;
}

.footerTab h1, 
.footerTab h3, 
.footerTab h5 {
  margin: 0;
}


#poi_search {
	position:absolute;
	margin-top:1%;
	margin-left:4%;
	width:80%;
	height:5%;
	z-index:10;
	text-align:right;
	}
#city_search {
	position:absolute;
	margin-top:44%;
	width:99%;
	height:20px;
	z-index:10;
	text-align:right;
	}
	
#foot {
	position:relative;
	bottom:10px;
	min-height:100px;
	}	

#tripnr {
	position:absolute;
	top:-200px;
	left:85%;
	height:auto;
	width:auto;
	z-index:-1;
	}
	
#smalltable {
	background:white;
	width:300px;
	overflow:inherit;
	}
	
#help {
	position:absolute;
	margin-left:94%;
	margin-top:36%;
	}

.safetyPads {
	height: 430px;
	width: 24%;
	margin: 1%;
	padding:1%; 
	justify-content: center; /* horizontal */
	align-items: center;    /* vertikal */
	border-radius:20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	overflow: scroll;
	}

.safetyConcept {
	height: 330px;
	width: 96%;
	margin: 1%;
	padding:1%; 
	justify-content: center; /* horizontal */
	align-items: center;    /* vertikal */
	border-radius:20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
/************** Layout Reisen ***********************/

#nameJourney{
	position:absolute;
	width:90%;
	margin-left:5%;
	margin-top: 20px;
	height:100px;
	text-align: center;
	}
#durationJourney{
	position:absolute;
	margin-top:130px;
	width:70%;
	height:200px;
	text-align: center;
	}
#qrJourney{
	position:absolute;
	margin-top:120px;
	margin-left:70%;
	width:30%;
	height:200px;
	text-align: center;
	z-index:1;
	}
#buttonListJourneyEdit{
	position:relative;
	margin-top:100px;
	margin-left:-250px;
	width:100%;
	height:40px;
	white-space:nowrap;
	z-index:1;
	}
#buttonListJourneyPacklist{
	position:relative;
	margin-top:10px;
	margin-left:-280px;
	width:100%;
	height:40px;
	white-space:nowrap;
	z-index:1;
	}
#buttonListJourneyPrint{
	position:relative;
	margin-top:18px;
	margin-left:-260px;
	width:100%;
	height:40px;
	white-space:nowrap;
	z-index:1;
	}
#imageJourney{
	position:absolute;
	margin-top:210px;
	margin-left:-5%;
	width:110%;
	height:60%;
	text-align: center;
	}
.journeyImage {
	width:110%;
	height:60%;
	}

/**********************************************************/
#tripProfile {
	position:absolute;
	margin-top: 5%;
	margin-left: 56%;
	width: 200px;
	height: 165px;
	}

#distTrip{
	position:absolute;
	width:30%;
	margin-top: 30px;
	height: 40px;
	text-align: center;
	border:none;
	}

#driveTimeTrip{
	position:absolute;
	width:20%;
	margin-top: 10px;
	margin-left: 29%;
	height:40px;
	text-align: center;
	font-size: 30px;
	font-style: italic;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	}

#profileTrip{
	position:absolute;
	margin-top: 10%;
	margin-left: 50%;
	width:30%;
	height:40px;
	text-align: center;
	}

/**********************************************************/
#imageStopp{
	position:absolute;
	margin-left: 2%;
	margin-top:  0%;
	width: 300px;
	height: 300px;
	text-align: center;
	border-radius:50%;
	box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.4);
	}

#rangStopp{
	position:absolute;
	margin-top:0%;
	margin-left:50%;
	width: 180px;
	height:auto;
	white-spaces: nowrap;
	}

#nameStopp{
	position:absolute;
	margin-top: 10%;
	margin-left: 50%;
	width:40%;
	height: auto;
	}

#fromToStopp{
	position:absolute;
	margin-top: 30%;
	margin-left: 55%;
	width: 50%;
	}

#eventsStopp{
	position:absolute;
	margin-top: -1%;
	margin-left: 5%;
	width: 200px;
	height: auto;
	white-space:nowrap;
	}

#deleteStopp{
	position:relative;
	margin-top: 40%;
	margin-left: 3%;
	height: auto;
	width: auto;
	}
	
#notesStopp{
	position:absolute;
	margin-top: 40%;
	margin-left: 10%;
	width:100%;
	height: 30px;
	text-align: center;
	z-index: 10;
	}

#showRangStopp{
	position:absolute;
	margin-left: 10%;
	margin-top:  -20%;
	width: 100px;
	height: 100px;
	text-align: center;
	z-index:1;
	}


.list {
	background-image:url(../images/list.png);
	width:60px;
	height:70px;
	}
	
#login {
	text-align:right;
	width:100%;
	height:100%;
	}
	
#width_iframe_div {
	width:750px;
	}

/************** SCROLLBALKEN ***********************/

/* Gesamte Scrollleiste */
::-webkit-scrollbar {
  width: 20px;
  height: 12px;
}

/* Der Teil der Scrollleiste, auf dem der Daumen läuft */
::-webkit-scrollbar-track {
 /*
  background: #f0f0f0;
 */
  border-radius: 10px;
}

/* Der Scroll-"Daumen" */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
/*   border: 2px solid #f0f0f0; Für Abstand zum Track */
}

/* Bei Hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.my-element {
  scrollbar-width: thin; /* oder auto, none */
  scrollbar-color: #888 #f0f0f0; /* thumb, track */
}
/************** TABLES ***********************/
.table {
	display:table;	
	}

.tr {
	display:table-row;
	}

.td {
	display:flex;
	padding:10px;
	vertical-align: middle;
	align-items: center;
	}

.cell_borderline {
	border:1px solid black;
	border-radius:5px;
	}

.between_cells {
	height:30px;
	}
	
.info {
	width:14px;
	height:14px;
	}

.middle {
	text-align:center;
	}

.pad {
	padding:10px;
	text-align:center;
	}


.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid #444;
  padding: 8px 12px;
}

.centerDiv {
	display: flex;
	justify-content: center; /* horizontal */
	align-items: center;    /* vertikal */
	height: 100vh;     
  }
	
/***************** PICs and ICONs **************/

.largeicon {
	width:200px;
	border-radius:150px;
	border:1px solid #CCCCCC;
	}

.mediumicon {
	width:80px;
	height:80px;
	border-radius:10px;
	border:1px solid #CCCCCC;
	}
	
.smallmediumicon {
	width:50px;
	height:50px;
	border-radius:10px;
	border:1px solid #CCCCCC;
	}


.smallicon {
	width:40px;
	height:40px;
	border-radius:20px;
	border:1px solid #CCCCCC;
	}

.smalliconnoboundary {
	width:20px;
	height:20px;
	}

.smallesticon {
	width:20px;
	height:20px;
	}

.empty {
	width:0px;
	}

.hlp_img {
	position:absolute;
	top:-25px;
	left:50%;
	z-index:1000;
	}

.object_image {
	width: 250px;
	max-height:250px;
	border-radius:10px;
	}

.themepic {
	width: 50px;
	}
/******************** FORMS *************************/
input[type='text'] {
	background:white;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	color:black;
	padding:10px;
	}
input[type='text']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}

input[type='password'] {
	background:white;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	color:black;
	padding:10px;
	}
input[type='password']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}

input[type='search'] {
	background:white;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	color:black;
	padding:10px;
	}
input[type='search']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}

input[type='datetime-local'] {
	background:white;
	border-radius: 20px;
	font-size:17px;
	color:black;
	width:150px;
	padding:10px;
	}
input[type='datetime-local']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}

input[type='file'] {
	background:white;
	border-radius: 20px;
	font-size:17px;
	color:black;
	width:150px;
	padding:10px;
	}
input[type='file']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}
	
input[type='submit'] {
	background:white;
	display:table-cell;
	vertical-align:middle;
	width:80%;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	color:black;
	padding:5px;
	}
input[type='submit']:focus {
	background:#A2E1AB;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:17px;
	padding:10px;
	}

select {
	background:white;
	border: none; 
	border-radius: 10px;
	font-size:17px;
	color:black;
	padding:10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

selectWithoutShadow {
	background:white;
	border: none; 
	border-radius: 4px;
	color:#333333;
	font-size:17px;
	font-weight:normal;
	font-family:"Eras Light ITC", "Calibri Light", "Cascadia Mono Light";
	}

select:focus {
	background:#A2E1AB;
	}
	
textarea {
	font-family: Arial, Helvetica, sans-serif;
	background:white;
	border: 1px solid grey;
	border-radius: 20px;
	font-size:20px;
	color:black;
	padding:10px;
	}
textarea:focus {
	background:#A2E1AB;
	}

.submit_image {
	width:40px;
	height:100px;
	border:none;
	border-radius:20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.datum {
	background:white;
	border-radius: 20px;
	font-size:17px;
	color:black;
	width:150px;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-style:italic;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.textarea_large {
	width:100%;
	height:200px;
	font-size:12px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.textarea_small {
	width:20%;
	height:100px;
	padding:5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.datum {
	width: 300px;
	height: 30px;
	font-size:17px;
	border-radius:4px;
	border:none;
	font-size:17px;
	font-weight:normal;
	padding-right: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.submit {
	width:auto;
	height:30px;
	font-size:16px;
	border-radius:4px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}


.whitespaces_selecting_short {
	width:50px;
	height: 40px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.whitespaces_selecting_medium {
	width:100px;
	height: 40px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

.whitespaces_selecting_long {
	width:250px;
	height: 40px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
.whitespaces_texting_round {
	width:40px;
	height: 40px;
	font-size:12px;
	text-align:center;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
.whitespaces_texting_short {
	height: 40px;
	width:50px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.whitespaces_texting_medium {
	height: 40px;
	width:100px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.whitespaces_texting_long {
	height: 40px;
	width:250px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.greyspaces_texting_round {
	width:40px;
	height: 40px;
	font-size:12px;
	text-align:center;
	background:none;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
.greyspaces_texting_short {
	height: 40px;
	width:50px;
	background:none;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.greyspaces_texting_medium {
	height: 40px;
	width:100px;
	background:none;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.greyspaces_texting_long {
	height: 40px;
	width:250px;
	background:none;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	/*
	border: 1px solid silver;
	border-radius: 20px;
	*/
	}

.error {
      color: red;
      font-size: 0.9em;
    }
    input.invalid {
      border: 2px solid red;
    }
/******************** LETTERS *************************/

.title {
	font-family: "Weddingday", "Lifelogo Easy Regular", "Freestyle Script", "Lucida Handwriting", "Lucida Sans";
	font-size:40px;
	font-style:italic;
	color:#666666;
	text-outline: 3px 3px #999;	
	}

.subtitle {
	font-family: "Weddingday", "Lifelogo Easy Regular", "Freestyle Script", "Lucida Handwriting", "Lucida Sans";
	font-size:30px;
	font-style:italic;
	color:#666666;
	text-outline: 3px 3px #999;	
	}

.sitetitle {
	color:black;
	}

.headline {
	font-size:60px;
	font-style:italic;
	color:#666666;
	}

.subheadline {
	font-size:30px;
	font-style:italic;
	color:#CCCCCC;
	}
	
h1 {
	font-size:20px;
	font-stretch:expanded;
	color:#669966;
	}
.headline_color {
	color:#0099FF;
	}
h2 {
	font-size:17px;
	font-weight:normal;
	font-family:"Eras Light ITC", "Calibri Light", "Cascadia Mono Light";
	}
	
h3 {
	font-size:13px;
	font-weight:bolder;
	color:black;
	}

h4 {
	font-size:16px;
	font-weight:normal;
	}

h5 {
	font-size:8px;
	font-weight:normal;
	font-style:italic;
	}

h6 {
	font-family:"Lucida Calligraphy", "Freestyle Script", "Lucida Handwriting", "Lucida Sans";
	font-size:26px;
	color:#669966;
	}
	
a {
	text-decoration:none;
	color:#669966;
	font-stretch:semi-expanded;
	border:none;
	}

.small {
	font-size:12px;
	}
	
.smaller {
	font-size:10px;
	color:black;
	}
	
.important_notice {
	color:#FF0066;
	}
	
.values {
	color:0099FF;
	}
	
.largegrey {
	color:#CCCCCC;
	font-size:58px;
	}
	
.biggrey {
	color:#E4E4E4;
	font-size:688px;
	}

.largegreen {
	color:#669966;
	font-size:38px;
	}

.supersmall {
	color:black;
	font-size:8px;
	}

.footerlink {
	color:black;
	font-size:14px;
	}
	
.writeletters {
		font-family: "Weddingday", "Lifelogo Easy Regular", "Freestyle Script", "Lucida Handwriting", "Lucida Sans";
		font-size:23px;
		color:grey;
/*		background:white; */
		border-radius:10px;
	}

.rangLetters {
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:200px;
		color:#CCCCCC;
		opacity: 0.6; 
	}
/******************** BUTTONS und LINKS *************************/

.small_plastic {
	width:40px;
	height:40px;
	border-radius:20px;
	box-shadow: 2px 2px 5px black;	
	}
.small_plastic:hover {
	width:41px;
	height:41px;
	border-radius:20px;
	box-shadow: 3px 3px 6px black;	
	}
.smallest_plastic {
	width:20px;
	height:20px;
	border-radius:20px;
	box-shadow: 1px 1px 2px black;	
	}
.smallest_plastic:hover {
	width:21px;
	height:21px;
	border-radius:10px;
	box-shadow: 2px 2px 3px black;	
	}
 /* ************************** Tooltip container for index-site *************************************/

/* -------------
	 /* End CSS Document */