* {
	box-sizing: border-box;
	margin: auto;
	padding: 0px;
	line-height: 125%;
	font-family: arial;
	
}
html {
	overflow-y: auto;
	height: 100%;
	color: <?=$text_color?>;
	
}
body:before {
	content: "";
	position: fixed;
	background: <?=$background_color?>;
	left: 0;
	right: 20;
}
body.fds {
	
	width:100%;
	height: 100%;
	min-width: 212px;
	
	

}


footer.foot {
 min-width: 212px;
}


#logo {
  	text-align:left;
}

#username_logout {

   	float:right; 
   	font-size:18px; 
   	color:#FFD600;  
   	background:#00; 
   	margin-top:8px;
   	margin-right:8px;
   	margin-bottom:8px;
}

div.menu_element {
	display:inline-block;
	margin-right:16px;
}

div.menu_element:last-child {
  	margin-right:0px;
}

div.menu_element_m {

	height:32px;
	padding-top:3px;
}

div.menu_element_ml {
	
	padding:1px;
	background:#f2f2f2;
	
}

div.user_mobile, div.user_mobile_profile {
	display:none; 		
}

div.logbook_div {
  	text-align:center;  
  	display:none;

}

div.left_div {
 flex-direction: row;
}

.flexiback {

	  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1.0) 100%), url('../image/background.jpg') no-repeat;
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1.0))), url('../image/background.jpg') no-repeat;
	  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1.0) 100%), url('../image/background.jpg') no-repeat;
	  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1.0) 100%), url('../image/background.jpg') no-repeat;
	  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1.0) 100%), url('../image/background.jpg') no-repeat;
	  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 1.0) 100%), url('../image/background.jpg') no-repeat;
	  background-size: cover; 
	  background-repeat: no-repeat;
	  display:flex;
	  flex-direction: column;
	  align-items:center;
	  justify-content:center;
}


#logbook:link {
	font-family:Arial; 
	font-size:32px; 
 	text-decoration: none; 
 	color:#FFD600; 
}
#logbook:visited {
 	color:#FFD600; 
}
#logbook:hover {
 	color: #FF8000;
}
#logbook:active {
 	color: #FFAA00;
}

a.profile_edit:link {
	font-size:18px;
    color: #dddddd;
    text-decoration:none;
}
a.profile_edit:visited {
    color: #dddddd;
}
a.profile_edit:hover {
    color: #FF8000;
}
a.profile_edit:active {
    color: #FF8000;
}

a:link {
	font-size:12px;
    color: #22226d;
    text-decoration:none;
}
a:visited {
    color: #22226d;
}
a:hover {
    color: #FF8000;
}
a:active {
    color: #FF8000;
}

a.datalink:link {
	font-size:16px;
  color: #000;
  text-decoration:none;
}
a.datalink:visited {
  color: #000;
}
a.datalink:hover {
  color: #FF8000;
}
a.datalink:active {
  color: #FFAA00;
}

a[class*="uppermenuitem"]:link{
	font-size:20px;
  color: #000;
  text-decoration:none;
}
a[class*="uppermenuitem"]:visited{
  color: #000;
}
a[class*="uppermenuitem"]:hover {
  color: #FF8000;
}
a[class*="uppermenuitem"]:active{
  color: #FFAA00;
}

a[class*="lowermenuitem"]:link {
	font-size:18px;
  color: #000;
  text-decoration:none;
}
a[class*="lowermenuitem"]:visited{
  color: #000;
}
a[class*="lowermenuitem"]:hover {
  color: #FF8000;
}
a[class*="lowermenuitem"]:active{
  color: #FFAA00;
}

a.entries_top:link {
	font-size:19px;
    color: #000;
    text-decoration:none;
}
a.entries_top:visited{
    color: #000;
}
a.entries_top:hover {
    color: #FF8000;
}
a.entries_top:active{
   color: #FF8000;
}

a.entries_bottom:link {
	font-size:16px;
    color: #000;
    text-decoration:none;
}
a.entries_bottom:visited{
    color: #000;
}
a.entries_bottom:hover {
    color: #FF8000;
}
a.entries_bottom:active{
    color: #FF8000;
}

.custombutton {
  color: black; 
  font-size:19px; 
  padding:6px; 
  border-radius:5px; 
  border: none; 
  background-color: #fafafa;
  border: 2px solid #dddddd;
  line-height:1.0;
}

.custombutton:hover {
  color: #d12;
  border: 2px solid #ddcccc;
}

.custombutton:disabled {
  color: #ccc;
  border: 2px solid #cccccc;
}

.customdownloadbutton {
  color: black; 
  font-size:19px; 
  padding:6px; 
  border-radius:5px; 
  border: none; 
  background-color: #fafafa;
  border: 2px solid #dddddd;
  line-height:1.0;
}

.customdownloadbutton:hover {
  color: #d12;
  border: 2px solid #ddcccc;
}

.customdownloadbutton:disabled {
  color: #ccc;
  border: 2px solid #cccccc;
}

.customuploadbutton {
  color: black; 
  font-size:19px; 
  padding:6px; 
  border-radius:5px; 
  border: none; 
  background-color: #fafafa;
  border: 2px solid #dddddd;
  line-height:1.0;
}

.customuploadbutton:hover {
  color: #d12;
  border: 2px solid #ddcccc;
}

.customuploadbutton:disabled {
  color: #ccc;
  border: 2px solid #cccccc;
}

.customconnectbutton {
  color: black; 
  font-size:19px; 
  padding:6px; 
  border-radius:5px; 
  border: none; 
  background-color: #fafafa;
  border: 2px solid #dddddd;
  line-height:1.0;
}

.customconnectbutton:hover {
  color: #d12;
  border: 2px solid #ddcccc;
}

.customconnectbutton:disabled {
  color: #ccc;
  border: 2px solid #cccccc;
}

/* Style the list (remove margins and bullets, etc) */
ul.filterList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width:auto;
}

/* Style the list items */
ul.filterList li {
  border: 1px solid #ddd;
  border-radius:5px;
  margin: 2px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 3px;
  padding-right:24px;
  padding-left:5px;
  text-decoration: none;
  font-size: 15px;
  color: black;
  display: block;
  position: relative;
  
}

/* Add a light grey background color on hover */
ul.filterList li:hover {
  background-color: #eee;
}

/* Style the close button (span) */
.close_kite, .close_rocket, .close_location, .close_aads, .close_containers, .close_mains, .close_reserves, .close_aircraft, .close_dropzones, .close_skill, .close_instructor, .close_tunnel, .close_basecontainer, .close_basecanopy, .close_basepilotchute, .close_basesuit, .close_basebuilding, .close_baseantenna, .close_basespan, .close_baseearth {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 3px 5px;
  transform: translate(0%, -50%);
}

/* Style the list (remove margins and bullets, etc) */
ul.closeable {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width:auto;
}

/* Style the list items */
ul.closeable li {
  border: 1px solid #ddd;
  border-radius:5px;
  margin: 2px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 3px;
  padding-right:24px;
  padding-left:5px;
  text-decoration: none;
  font-size: 15px;
  color: black;
  display: block;
  position: relative;
  
}

/* Add a light grey background color on hover */
ul.closeable li:hover {
  background-color: #eee;
}

/* Style the list (remove margins and bullets, etc) */
ul.closeable_entry_item {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width:auto;
  display:inline;
}

/* Style the list items */
ul.closeable_entry_item li {
  border: 1px solid #ddd;
  border-radius:5px;
  margin: 2px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 3px;
  padding-right:24px;
  padding-left:5px;
  text-decoration: none;
  font-size: 15px;
  color: black;
 display:inline;
  position: relative;
  
}

/* Add a light grey background color on hover */
ul.closeable_entry_item li:hover {
  background-color: #eee;
}

.close_kite:hover, .close_rocket:hover, .close_location:hover, .close_aads:hover, .close_containers:hover, .close_mains:hover, .close_reserves:hover, .close_aircraft:hover, .close_dropzones:hover, .close_skill:hover, .close_instructor:hover, .close_tunnel:hover, .close_basecontainer:hover, .close_basecanopy:hover, .close_basepilotchute:hover, .close_basesuit:hover, .close_basebuilding:hover, .close_baseantenna:hover, .close_basespan:hover, .close_baseearth:hover {background: #bbb; color:#a00;}

input.editing_long {
border: 1px solid #aaa;
  border-radius: 4px;
  padding:5px;
 background:white;
 font-size:16px;
 color:#6a6a6a;
 width:114px;
 line-height:1.0;
}

input.editing, input.editingprofile {
	border: 1px solid #aaa;
  border-radius: 4px;
  padding:5px;
 	background:white;
 	font-size:16px;
 	color:#6a6a6a;
 	width:64px;
 	line-height:1.0;
}

div.editing_div_lines {
	color:#000;
	font-size: 16px;
}


div.entry {
display:inline;


padding:5px;

 font-size:16px;
 color:#000;

}

div.entry_div_lines {
	color:#777;
	font-size: 16px;
}
.select-css {
	font-size: 16px;
	color:#6a6a6a;
	padding:5px;
	padding-right:26px;
	margin-bottom:5px;
	box-sizing: border-box;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"292.4" height%3D"292.4"%3E%3Cpath fill%3D"%236A6A6A" d%3D"M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
	display: none;
}
.select-css:hover {
	border-color: #888;
}
.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}
.select-css option {
	font-weight:normal;
}


.checkboxcontainer input {
  display: none;
}

.checkboxcontainer {
  display: inline-block;
  padding-left: 25px;
  position: relative;
  cursor: pointer;
  user-select: none;
  font-weight:normal;
}

.checkboxcontainer .checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #aaa;
  border-radius: 5px;
}

.checkboxcontainer input:checked + .checkmark {
  background-color: #aaa;
  border: 1px solid #aaa;
}

.checkboxcontainer input:indeterminate + .checkmark {
  background-color: #1390e5;
  border: 1px solid #1390e5;
}

.checkboxcontainer input:checked + .checkmark:after {
  content: "";
  position: absolute;
  height: 6px;
  width: 11px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkboxcontainer input:checked:disabled + .checkmark {
    border: 1px solid grey;
    background-color: grey;
}

.checkboxcontainer input:disabled + .checkmark {
    border: 1px solid grey;
}

.checkboxcontainer input:indeterminate + .checkmark:after {
  content: "";
  position: absolute;
  height: 0px;
  width: 11px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}

.container_rb {
	
  display: inline;
  position: relative;
  padding-left: 32px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight:normal;
}

/* Hide the browser's default radio button */
.container_rb input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark_rb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container_rb:hover input ~ .checkmark_rb {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container_rb input:checked ~ .checkmark_rb {
  background-color: #6a6a6a;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark_rb:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container_rb input:checked ~ .checkmark_rb:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container_rb .checkmark_rb:after {
 	top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.myProgressAdd {
	height: 20px;
  width: 33.3%;
  background-color: #eee;
  text-align:left;
  vertical-align:bottom;
}

.myBarAdd {
	display:inline-block;
  width: 0%;
  height: 20px;
  background-color: #33334b;

}

.mediaiframecontainer {
position:relative;padding-top:56.25%;width:100%;
}
.mediaiframe {
width:100%;height:100%;position:absolute;top:0;left:0;
}



.container_overlay {
  position: relative;
  width: 140px;
}

.overlay {
  position: absolute;
  top: 70;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  width: 140px;
   border-radius: 70px; 
  margin-top:14px;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
}

.container_overlay:hover .overlay {
  opacity: 0.75;
}



.text_overlay {
  color: #dddddd;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}



.dropdown-accept-decline {
  position: relative;
  display: inline-block;
	
}

.dropdown-content-accept-decline {
  display: none;
  border-radius:70px;
  position: absolute;
  background-color: #333;
 	left:0px;
 	top:0px;
 	min-width:140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-accept-decline a {
  color: black;
  padding-top: 26px;
  text-decoration: none;
  display: block;
  font-size:20px;
  border-top-left-radius:70px;
  border-top-right-radius:70px;
  height:70px;
  color:#fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.dropdown-content-accept-decline a:last-child {
	padding-top: 15px;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  border-bottom-left-radius:70px;
  border-bottom-right-radius:70px;
}


.dropdown-content-accept-decline a.accept:hover {background-color: #090; }
.dropdown-content-accept-decline a.decline:hover {background-color: #c00; }
.dropdown-accept-decline:hover .dropdown-content-accept-decline {display: block; opacity:0.7;}

.dropdown-request {
  position: relative;
  display: inline-block;
}

.dropdown-content-request {
  display: none;
  position: absolute;
  background-color: #333;
 	left:0px;
 	top:0px;
 	min-width:140px;
 	border-radius:70px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
}

.dropdown-content-request a {
  color: black;
  padding-top: 56px;
  text-decoration: none;
  display: block;
  font-size:22px;
  height:140px;
  border-radius:70px;
  color:#fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
   
}


.dropdown-content-request a.request:hover {background-color: #550; }
.dropdown-request:hover .dropdown-content-request {display: block; opacity:0.7;}


.dropdown-view-remove {
  position: relative;
  display: inline-block;
  

}

.dropdown-content-view-remove {
  display: none;
  border-radius:70px;
  position: absolute;
  background-color: #333;
 	left:0px;
 	top:0px;
 	min-width:140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-view-remove a {
  color: black;
  padding-top: 26px;
  text-decoration: none;
  display: block;
  font-size:20px;
  border-top-left-radius:70px;
  border-top-right-radius:70px;
  height:70px;
  color:#fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.dropdown-content-view-remove a:last-child {
	padding-top: 15px;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  border-bottom-left-radius:70px;
  border-bottom-right-radius:70px;
}

.dropdown-content-view-remove a.view:hover {background-color: #00c; }
.dropdown-content-view-remove a.remove:hover {background-color: #c00; }
.dropdown-view-remove:hover .dropdown-content-view-remove {display: block; opacity:0.7;}


.dropdown-remove {
  position: relative;
  display: inline-block;
	
}

.dropdown-content-remove {
  display: none;
  
  position: absolute;
  background-color: #333;
 	left:0px;
 	top:0px;
 	min-width:140px;
 	border-radius:70px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content-remove a {
  color: black;
  padding-top: 56px;
  text-decoration: none;
  display: block;
  font-size:20px;
  height:140px;
  border-radius:70px;
  color:#fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.dropdown-content-remove a.remove:hover {background-color: #c00;  }
.dropdown-remove:hover .dropdown-content-remove {display: block; opacity:0.7;}

.dropdown-view {
  position: relative;
  display: inline-block;
	
}

.dropdown-content-view {
  display: none;
  
  position: absolute;
  background-color: #333;
 	left:0px;
 	top:0px;
 	min-width:140px;
 	border-radius:70px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content-view a {
  color: black;
  padding-top: 56px;
  text-decoration: none;
  display: block;
  font-size:20px;
  height:140px;
  border-radius:70px;
  color:#fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.dropdown-content-view a.view:hover {background-color: #00c; }
.dropdown-view:hover .dropdown-content-view {display: block; opacity:0.7;}

.ui-autocomplete {
	float: left;
	box-shadow: 2px 2px 3px #888888;
  background: #FFF;
}
.ui-widget-content .ui-state-focus
{
    background: #fff;
    border: 2px solid #d12;
  	color:#d12;
}



.ui-datepicker {
   background: #fafafa;
   border: 1px solid #555;
   color: #000;
}
.ui-datepicker-header {
  background:  #FF8000;
  color: #fafafa;
  font-weight: bold;


  line-height: 30px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #111;
}

.ui-datepicker-calendar a.ui-state-default { background: #f0f0f0; color:#000;  border-color: #777;}
.ui-datepicker-calendar a.ui-state-hover { background:  #FFD600; } // Hovered date
.ui-datepicker-calendar a.ui-state-active { background:  #FFD600;} // Selected date


.clockpicker .input-group-addon{cursor:pointer;}
.clockpicker-moving{cursor:move;}
.clockpicker-align-left.popover>.arrow{left:25px;}
.clockpicker-align-top.popover>.arrow{top:17px;}
.clockpicker-align-right.popover>.arrow{left:auto;right:25px;}
.clockpicker-align-bottom.popover>.arrow{top:auto;bottom:6px;}

.clockpicker-popover .popover-title{background-color:white;color:#000;font-size:24px;font-weight:700;line-height:30px;text-align:center;}
.clockpicker-popover .popover-title span{cursor:pointer;color:#000;}
.clockpicker-popover .popover-content{background-color:#f8f8f8;padding:12px; color:#ff0;}
.popover-content:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
.clockpicker-plate{background-color:#fff;border:1px solid #ccc;border-radius:50%;width:200px;height:200px;overflow:visible;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.clockpicker-canvas,.clockpicker-dial{width:200px;height:200px;position:absolute;left:-1px;top:-1px}
.clockpicker-minutes{visibility:hidden}
.clockpicker-tick{border-radius:50%;color:#000;line-height:26px;text-align:center;width:26px;height:26px;position:absolute;cursor:pointer;}
.clockpicker-tick.active,.clockpicker-tick:hover{background-color:#c0e5f7;background-color:rgba(255,214,0,1);}
.clockpicker-button{background-image:none;background-color:#fff;border-width:1px 0 0;border-top-left-radius:0;border-top-right-radius:0;margin:0;padding:10px 0}
.clockpicker-button:hover{background-image:none;background-color:#ebebeb}
.clockpicker-button:focus{outline:0!important}
.clockpicker-dial{-webkit-transition:-webkit-transform 350ms,opacity 350ms;-moz-transition:-moz-transform 350ms,opacity 350ms;-ms-transition:-ms-transform 350ms,opacity 350ms;-o-transition:-o-transform 350ms,opacity 350ms;transition:transform 350ms,opacity 350ms}
.clockpicker-dial-out{opacity:0}
.clockpicker-hours.clockpicker-dial-out{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}
.clockpicker-minutes.clockpicker-dial-out{-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);-ms-transform:scale(.8,.8);-o-transform:scale(.8,.8);transform:scale(.8,.8)}
.clockpicker-canvas{-webkit-transition:opacity 175ms;-moz-transition:opacity 175ms;-ms-transition:opacity 175ms;-o-transition:opacity 175ms;transition:opacity 175ms}
.clockpicker-canvas-out{opacity:.25}
.clockpicker-canvas-bearing,.clockpicker-canvas-fg{stroke:none;fill:rgba(255,214,0,1);}
.clockpicker-canvas-bg{stroke:none;fill:rgba(255,214,0,1);}
.clockpicker-canvas-bg-trans{fill:rgba(255,214,0,1);}
.clockpicker-canvas line{stroke:#33334b;stroke-width:1;stroke-linecap:round;}
.clockpicker-button.am-button{margin:1px;padding:5px;border:1px solid rgba(0,0,0,.2);border-radius:4px;}
.clockpicker-button.pm-button{margin:1px 1px 1px 136px;padding:5px;border:1px solid rgba(0,0,0,.2);border-radius:4px;}










@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}














@media only screen and (max-width: 1450px) {
	div.location {display:none;}
}

@media only screen and (max-width: 1350px) {
	div.duration {display:none;}
}


@media only screen and (max-width: 832px) {

	#profileimagefront, #viewingimage, #eye {
	 margin-top:6px;
	 margin-bottom:6px;
	}

	div.left_side {
		order: 2;
	}

	div.location {display:inline;}
	div.duration {display:inline;}
	
	#username_logout  {
		width:100%;
		text-align:center;
		margin:0px;
		padding:0px;
		margin-right:0px;
		margin-top:0px; 
	}

	#logo {
		width:100%;
		text-align:center;
		margin:0px;
		padding:0px;
		margin-right:0px;
		margin-top:0px; 
	}

	div.user_full, div.user_full_profile {
		display:none; 
		background:#FF0;
	
	}
	
	div.upper_div_full, div.upper_div_profile, div.upper_div_full_profile {
		display:none; 
	}

	
	div.lower_div_full {
		display:none; 
	}

	div.user_mobile, div.user_mobile_profile {
		display:block; 		
		background:#dddddd;
	}

	div.menu_element {
		display:none; 
	}
	

	div.flex {
    flex-direction: column;
 		
	}

	div.left_side {
    background:#fafafc;
    width:100%;
	}
	div.right_side { 
  	width:100%;
	}
	

	
}

@media only screen and (max-width: 750px) {
	div.location {display:none;}
}

@media only screen and (max-width: 650px) {
	div.duration {display:none;}
}


@media only screen and (max-width: 550px) {
	div.altitude {display:none;}
}

/* Style the list (remove margins and bullets, etc) */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Style the list items */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

/* Add a light grey background color on hover */
ul li:hover {
  background-color: #eee;
}

/* Style the close button (span) */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {background: #bbb;}