#app{ /* Any screen dimension */
	height:100%;
	width:100vw;
	overflow:hidden;
	position:relative;
	display:grid;
	#app__panel--search{
		transition: 0.5s;
		position:absolute;
		z-index:1003;
		opacity:0;
		z-index:1003;
		background:  var(--color--white-0);
		box-shadow: 2px 0 2px 1px var(--transparent--white-0);
	}
	#app__foregroudPanel{
		transition: 0.5s;
		position:absolute;
		top:0;width:0;
		height:100vh;
		background:var(--transparent--white-0);
		z-index:1002;
		cursor:pointer;
	}
	#app__mainBar{grid-area:mainBar;
		display:grid;
		grid-template-areas:"brand . menu";
		grid-template-columns:min-content 1fr min-content;
		align-items:center;
		#app__brand{grid-area:brand;
			background:  var(--color--white-0);
		}
		#app__menu{grid-area:menu;
			background:  var(--color--white-0);
			display:flex;
			justify-content:flex-start;
			align-items:center;
		}
	}
	#app__switchToMain{grid-area:toMain;}
	#app__main__map{grid-area:map;
		background:var(--color--white-0);
		overflow:hidden;
	}
	#app__main__calendar{grid-area:calendar;
		height:100%;overflow:hidden;
		display:grid;
		grid-template-areas:"head" "content";
		grid-template-rows:max-content 1fr;
		background:var(--color--white-0);
		> ._head{grid-area:head;
			> ._title {
				background:  var(--color--green-0);
				color:       var(--color--white-0);
				font-weight: bold;
			}
		}
		> ._body{
			height:100%;overflow:auto;
			background  : var(--color--white-0);
			.calendar-empty{
				h1,
				p{
					color:var(--color--black-0);
				}
				p.opt{
					display:grid;
					width:100%;
					grid-template-areas:"title button";
					grid-template-columns:1fr max-content;
					> button{grid-area:button;}
					> ._title{grid-area:title;font-weight:bold;}
					> ._title:before{content:"- "}
				}
			}
		}
		&[data-dialog]{
			.UI_Button{
				opacity:0.2;
			}
		}
	}
	&[data-main="map"]{
		button[data-switchtomain="map"]{
			display:none;
		}
	}
	&[data-main="calendar"]{
		button[data-switchtomain="calendar"]{
			display:none;
		}
	}
	&[data-panelsearch="open"]{
		#app__panel--search{
			left:0;
			opacity:1;
		}
		#app__foregroudPanel{
			width:100vw;
		}
	}
}

#app{ /* Custom screen dimension */
	overflow-x:hidden;
	width:                 var(--SCR__APP__width);
	grid-template-areas:   var(--SCR__APP__grid-template-areas);
	grid-template-columns: var(--SCR__APP__grid-template-columns);
	grid-template-rows:    var(--SCR__APP__grid-template-rows);
	#app__panel--search{
		left:    var(--SCR__APP__PANELSEARCH__left);
		height:  var(--SCR__APP__PANELSEARCH__height);
		width:   var(--SCR__APP__PANELSEARCH__width);
		padding: var(--SCR__APP__PANELSEARCH__padding);
	}
	#app__mainBar{
		padding: var(--SCR__APP__MAINBAR__padding);
		gap:10px;
		#app__menu{
			gap: 5px;
		}
		#app__brand{
			.mini{display:none;}
			.full{
				.UI_I18n{display:none;}
				.UI_Icon{height:calc(261px * 0.1);width:calc(1171px * 0.1);}
			}
		}
		#app__menu{
			> .UI_Button{
				> .UI_I18n{
					display:var(--SCR__APP__MAINBAR__MENU__BUTTON__UI_I18n__DISPLAY);
				}
			}
		}
	}
	#app__panel--search{
		> ._body{
			> .UI_Tabulation{
				> ._head{
					> .UI_Tab{
						> .UI_IconI18n{
							> .UI_I18n{
								display:var(--SCR__APP__PANELSEARCH__BODY__TABULATION__HEAD__TAB__UI_I18n__DISPLAY);
							}
						}
					}
				}
			}
		}
	}
	#app__switchToMain{
		position:fixed;z-index:1001;
		display:    var(--SCR__APP__SWITCHTOMAIN__display);
		top:        var(--SCR__APP__SWITCHTOMAIN__top);
		transition: var(--SCR__APP__SWITCHTOMAIN__transition);
		.UI_I18n{display:none}
	}
	#app__main__calendar{
		gap:10px;
		padding:    var(--SCR__padding);
		transition: var(--SCR__transition);
		height:     var(--SCR__height);
		width:      var(--SCR__width);
		> ._head{grid-area:head;
			> ._title {
				border-width: 0;
				font-size:    20px;
				padding:      10px 6px;
				margin:       5px;
			}
		}
		> ._body{
			padding     : 0 5px;
			.calendar-empty{
				padding:40px 10px;
				h1{
					font-size:20px;
					margin-bottom:15px;
				}
				p{
					font-size:18px;
					margin-bottom:10px;
				}
			}
		}
	}
	#app__main__map{
		transition: var(--SCR__APP__MAIN__MAP__transition);
		height:     var(--SCR__APP__MAIN__MAP__height);
		width:      var(--SCR__APP__MAIN__MAP__width);
	}
}