/* Custom screen dimension */
#app{ 
	/* Global */
	--VAR__MAIN__CALENDAR_WIDTH: 400px;
	/* -- #app -- */
	--SCR__APP__width:                 100vw;
	--SCR__APP__grid-template-areas:   "mainBar  mainBar" "calendar map";
	--SCR__APP__grid-template-columns: var(--VAR__MAIN__CALENDAR_WIDTH) 1fr;
	--SCR__APP__grid-template-rows:    max-content 1fr;
	/* -- #app__panel--search -- */
	#app__panel--search{
		--SCR__APP__PANELSEARCH__width:   calc(var(--VAR__MAIN__CALENDAR_WIDTH) - 50px);
		--SCR__APP__PANELSEARCH__height:  100%;
		--SCR__APP__PANELSEARCH__padding: 0;
		--SCR__APP__PANELSEARCH__left:    calc(-1 * var(--VAR__MAIN__CALENDAR_WIDTH));
		--SCR__APP__PANELSEARCH__BODY__TABULATION__HEAD__TAB__UI_I18n__DISPLAY:block;
	}
	/* -- #app__mainBar -- */
	#app__mainBar{
		--SCR__APP__MAINBAR__padding: 10px 14px;
		--SCR__APP__MAINBAR__MENU__BUTTON__UI_I18n__DISPLAY: block;
	}
	/* -- #app__switchToMain -- */
	#app__switchToMain{
		--SCR__APP__SWITCHTOMAIN__display:    none;
		--SCR__APP__SWITCHTOMAIN__top:        0;
		--SCR__APP__SWITCHTOMAIN__transition: 0s;
	}
	/* -- #app__main__calendar */
	#app__main__calendar{
		--SCR__padding:    10px 5px;
		--SCR__width:      var(--VAR__MAIN__CALENDAR_WIDTH);
		--SCR__height:     100%;
		--SCR__transition: 0s;
		.date{
			--SCR__DATE__grid-template-areas:   "short full"
			                                    "short organisations"
			;
			--SCR__DATE__grid-template-columns: min-content 1fr;
			--SCR__DATE__gap:                   2px;
			> ._title-short{
				--SCR__DATE__TITLE__INNER__grid-template-areas:   "day month" "year year";
				--SCR__DATE__TITLE__INNER__grid-template-columns: min-content min-content;
				--SCR__DATE__TITLE__INNER__gap:                   0;
			}
			> ._title-full{
				--SCR__DATE__TITLE__INNER__grid-template-areas:   "day month" "year year";
				--SCR__DATE__TITLE__INNER__grid-template-columns: min-content min-content;
				--SCR__DATE__TITLE__INNER__gap:                   0;
			}
			.geolocation{
				--SCR__GEOLOCATION__grid-template-areas: "short full" "short activities";
			}
			.activity{
				--SCR__ACTIVITY__grid-template-areas:   
														"title			activitytypes" 
														"organisation	conditions" 
														"organisation	timelapses" 
														"organisation	toolbar" 
														"summary		summary"
														;
				--SCR__ACTIVITY__grid-template-columns: 1fr min-content;
				--SCR__ACTIVITY__grid-template-rows:    mincontent mincontent mincontent mincontent 1fr;
				--SCR__ACTIVITY__gap:                   0;
				.activitytypes{
					--SCR__ACTIVITYTYPES__flex-direction: row;
					--SCR__ACTIVITYTYPES__gap           : 5px;
				}
			}
		}
	}
	/* -- #app__main__map */
	#app__main__map{
		--SCR__APP__MAIN__MAP__width:      calc(100vw - var(--VAR__MAIN__CALENDAR_WIDTH));
		--SCR__APP__MAIN__MAP__height:     100%;
		--SCR__APP__MAIN__MAP__transition: 0.5s;
	}
}
.UI_Dialog{
	--SCR__UI_DIALOG__border-radius: 16px;
	--SCR__UI_DIALOG__border-width:  4px;
	--SCR__UI_DIALOG__width:         800px;
	--SCR__UI_DIALOG__height:        calc(100vh - 40px);
	--SCR__UI_DIALOG__margin-top:    10px;
	--SCR__UI_DIALOG__HEAD__padding:      7px 10px;
	--SCR__UI_DIALOG__HEAD__border-width: 0 0 2px 0;
	--SCR__UI_DIALOG__HEAD__grid-template-areas: "icon title . toolbar";
	--SCR__UI_DIALOG__HEAD__grid-template-columns: min-content max-content 1fr min-content;
	--SCR__UI_DIALOG__HEAD__TOOLBAR__gap: 5px;
	--SCR__UI_DIALOG__BODY__border-width: 0;
	--SCR__UI_DIALOG__BODY__padding:      7px 10px;
	--SCR__UI_DIALOG__FOOT__border-width:  2px 0 0 0;
}