.app_popover {
        position: absolute;
        width: 100%;
	height: 100%;
        background: rgba(0, 0, 0, 0.8);
        top: 0px;
        -webkit-backdrop-filter: blur(2px) grayscale(0.5);
        backdrop-filter: blur(2px) grayscale(0.5);
}

@font-face {
        font-family: 'PT Mono';
        src: url("https://mdt-01.tfhcdn.net/assets/fonts/PT_Mono/PTMono-Regular.woff2") format("woff2"),
        url("https://mdt-01.tfhcdn.net/assets/fonts/PT_Mono/PTMono-Regular.woff") format("woff");
}

body,html {
	background-color: #454545;
	background-color: var(--main-bg-color, #454545);
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        height: 100%;
        font-family: Helvetica, sans-serif;
}

#user_banner {
	font-family: 'PT Mono';
	color: #ddd;
	padding: 7px;

	position: fixed;
	left: 0px;
	top: 0px;
	top: calc(0px + env(safe-area-inset-top));

	z-index: 5;

	background: rgba(45, 45, 45, 0.9);
	width: 350px;
	max-width: 90%;
	border-radius: 0px 0px 20px 0px;
	min-height: 25px;
}

.app_module_popup {
	color: #fff;
	width: 100%;
	max-width: 450px;
	border-radius: 15px 15px 0px 0px;
	position: fixed;
	bottom: 0px;
	bottom: calc(0px - env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(45, 45, 45, 0.9);
	z-index: 5;
}
.app_module {
	width: 550px;
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 250px;
}

div {
	box-sizing: border-box;
}
a:hover {
	text-decoration: none;
}
a {
	color: #113;
	text-decoration: underline;
}
#msg_status {
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 12px;
}
.wt_msg_container {
	margin-top: 12px;
	margin-bottom: 18px;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	font-size: 10pt;
	text-align: right;
}
.wt_video_container {
	text-align: left;
}
.yt_container {
	text-align: center;
	margin-bottom: 3px;
	margin-top: 5px;
}

.wt_msg {
	background: rgba(255, 255, 255, 0.95);
	font-size: 12pt;
	color: #000;
	border-radius: 12px;
	padding: 12px 25px 12px 25px;
	margin-top: 0px;
	margin-bottom: 5px;
	text-align: left;

	line-break: strict;
/*	word-break: break-all; */
	overflow-wrap: break-word;
}

body {
        padding: 0px 0px 0px 0px;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
/*        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); */
}
.app_container {
	height: 100%;
	height: calc(100% + env(safe-area-inset-bottom));
	padding-bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
	overflow-y: scroll;
}
#topbar-tint {
        position: fixed;
        top: 0px;
        height: 0px;
        height: env(safe-area-inset-top);
        background-color: rgba( 0, 0, 0, 0.55);
        width: 100%;
        z-index: 30000;
}



#shadowOverlay {
	-webkit-backdrop-filter: blur(2px) grayscale(0.5);
        backdrop-filter: blur(2px) grayscale(0.5);

	z-index: 500;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: rgba(51, 51, 51, 0.7);
	display: none;
}
.popup_module {
        width: 95%;
        max-width: 700px;
        height: 90%;
        top: 2%;
        background: #aaa;
        position: fixed;

        display: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1000;
        border: 1px solid #333;
        box-sizing: border-box;
}

/* small*/
@media not all and (min-width: 700px) {
.popup_module {
        padding: 0px;
        height: 100%;
        width: 100%;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
}
}


/* big */
@media only all and (min-width: 700px) {
.popup_module {
        left: 50%;
        transform: translateX(-50%);
        padding-bottom: 15px;
        padding-top: 5px;
        padding-right: 15px;
        padding-left: 15px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px;
}
}

.mapboxgl-ctrl-top-right {
	margin-top: 80px;
	margin-top: calc(80px + env(safe-area-inset-top));
}

/* big */
@media only all and (min-width: 700px) {
	#navbar {
		position: fixed;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 12px;
		width: 450px;
		padding: 5px 12px 5px 12px;
	}
}

/* small */
@media not all and (min-width: 700px) {
	#navbar {
		position: fixed;
		bottom: 0px;
		padding-bottom: 5px;
		padding-bottom: calc(5px + env(safe-area-inset-bottom) );

		width: 100%;
		padding-top: 5px;
	}
	.mapboxgl-ctrl-bottom-right {
		margin-bottom: 65px;
		margin-bottom: calc(65px - env(safe-area-inset-bottom));
	}
}

#navbar {
/*	background: #333E48; */
	background-color: #111;
	background: var(--navbar-color, rgba(45, 45, 45, 0.9));
	background: ;
	color: #fff;
}

#navbar {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.navitem_bar {
	width: 55px;
	height: 55px;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	display: flex;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	animate: 0.5s;
}
.navitem_bar[data-selected=true] {
	color: #454545;
	color: var(--main-bg-color, #454545);
	background-color: #fdfeff;
}
.navitem_bar[data-selected=true]:hover {
	color: #454545;
	color: var(--main-bg-color, #454545);
	background-color: #fff;
}
.navitem_bar:hover {
	color: #fff;
	background-color: #858585;
	background-color: var(--hover-light-color, #858585);
}
#app_welcome {
	padding-bottom: 200px;
}
.logo_hold {
        padding: calc(env(safe-area-inset-top) + 25px) env(safe-area-inset-right) 30px env(safe-area-inset-left);
        padding: 25px 0px 25px 0px;
	background-color: #FAFAFA;
	background-color: var(--header-bg-color, #FAFAFA);

	width: 100%;
	text-align: center;
}
.app_content_dark {
	background-color: #454545;
	background-color: var(--main-bg-color, #454545);
	color: #fff;
}

.flexy {
	margin: 15px;
	max-width: 100%;
}
.flex_content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

input[type=submit], input[type=button] {
        -webkit-appearance: none;
        white-space: normal;

        font-size: 16pt;
        width: 300px;
	max-width: 100%;

        border-radius: 12px;
        background-color: #fff;
	color: #454545;
	color: var(--main-bg-color, #454545);
        border: 1px solid #000;
        padding: 4px;
        cursor: pointer;
}
input[type=text],input[type=password],input[type=tel],input[type=number] {
        border-radius: 10px;
        padding: 4px;
        color: #000;
        background-color: #fff;
        max-width: 100%;
	width: 300px;
        z-index: 1001;
        border: 1px solid #111;
        font-size: 16pt;
        text-align: center;
}
#login_status {
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
}