/* Core */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*::before, *::after {
	box-sizing: inherit;
}

html {
	height: -webkit-fill-available;
}

body {
	display: flex;
	flex-direction: column;
	maxt-width: 1440px;
	margin: 0 auto;
	height: 100vh;
	height: -webkit-fill-available;
	max-width: var(--app_max_width);
	border: none;
}

.div_screen {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	border: none;
}

.div_header {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

.div_header input {
	width: 100%;
	border: none;
	color: var(--app_input_foreground_color);
	background-color: transparent;
	font-size:  var(--app_input_font_size);
	outline: none;
	margin-top: 6px;
	text-decoration: none;
}

.div_top_toolbar {
	display: flex;
	width: 100%;
	flex-direction: row;
}

.div_top_toolbar [data-id='div_left'] {
	display: flex;
	width: 100%;
	padding: 8px 4px 8px 4px;
	justify-content: left;
}

.div_top_toolbar [data-id='div_center'] {
	display: flex;
	width: 100%;
	padding: 8px 4px 8px 4px;
	justify-content: center;
}

.div_top_toolbar [data-id='div_right'] {
	display: flex;
	width: 100%;
	padding: 8px 4px 8px 4px;
	justify-content: right;
}

.div_main {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border: none;
	overflow: auto;
	text-align: justify;
}

.div_main::-webkit-scrollbar {
    display: none;
}

.div_main {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.div_footer {
	display: flex;
	width: 100%;
	height: auto;
}

.div_bottom_toolbar {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-evenly;
	padding-bottom: 8px;
	padding-top: 8px;
}

img {
/*
	width: 100%;
	height: 100%;
*/
	opacity: 0;
	transition: opacity .5s ease-out;
	cursor: pointer;
}

.fade-in {
	opacity: 1;
	transition: opacity .5s ease-out;
	z-index: 10
}

.fade-out {
	opacity: 0;
	transition: opacity .5s ease-out;
	z-index: 0;
}

@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;} 
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;} 
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}