.app { position:fixed;left:0;right:0;top:0;bottom:0; }

.app > div { width:100%;height:100%;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:space-evenly;align-items:stretch; }

.app .toolbar { display:flex;align-content:flex-start;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch; }
.app .toolbar > div { display:flex;flex:1 auto; align-items:center; padding:5px; }
.app .toolbar > div:first-child { justify-content:flex-start; max-width:20%; }
.app .toolbar > div:nth-child(2) { justify-content:center; max-width:60%; }
.app .toolbar > div:last-child { justify-content:flex-end; max-width:20%; }

.app .views { height:100%; overflow-y:auto }
.app .view { min-height:100%; }

.app > .over { position:fixed;left:0;top:0;background:#222a;backdrop-filter: blur(5px); }

/* ... */

.app .frame {position:fixed;left:0;right:0;top:10%;margin:auto;}

.app .frame .main { display:block;overflow:auto;scrollbar-width:thin; }

.app .frame .header,
.app .frame .footer {display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;}

/* ... */

.app .loading { display:inline-block;text-align:center; }

.app .loading::after{ content:"";display:inline-block;width:50px;height:50px;border-radius:50%;border:5px solid transparent;animation:loading-spinner linear infinite;animation-duration:.85s; }

@keyframes loading-spinner { 
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}