:root
	{
    --header-height: 4rem;
    --footer-height: 4rem;
    --title-height: 4rem;
	--bs-box-shadow: 0 0rem 1rem rgba(0, 0, 0, 0.95);
	/*
	--bs-primary-rgb: 12, 69, 35;
	--bs-secondary-rgb: 100, 80, 15;
	*/
	--hue-a:100;
	--hue-b:40;

	--bs-theme-bg-rgb:50,50,50;
	--bs-theme-color-rgb:200,200,200;
	}

html,body#body { height:100dvh; margin:0; }

#body { background-size:cover; background-position:center; background-repeat:no-repeat; }
#body a	{ text-decoration:none; }
#body[data-bs-theme="light"]
	{
	}

#body[data-bs-theme="dark"]
	{
	--bs-theme-color-rgb:50,50,50;
	--bs-theme-bg-rgb:200,200,200;
	}

#body #header, #body #footer
	{
	height:var(--header-height); min-height:var(--header-height); width:100%;
	background-color:rgba(var(--bs-theme-color-rgb),1); color:rgb(var(--bs-theme-bg-rgb),1);

	.btn { color:rgb(var(--bs-theme-bg-rgb)); }
	}


#body #header	{ z-index: 1040; border-bottom:1px #88888820 solid; }


#body #footer	{ z-index: 1039; border-top:1px #88888820 solid; flex-shrink: 0; }
#body #footer .btn	{ font-size:1.5rem; padding-top:4px; padding-bottom:4px; }
#body #footer .btn-group>.btn	{ font-size:1.25rem; }



#body #main { height: calc( 100svh - var(--header-height) - var(--footer-height) ); backdrop-filter:blur(8px);  }
#body #main>.page { background-color:rgba(0,0,0,0.40);  }

#body .badge	{ --bs-badge-color:rgb(var(--bs-theme-bg-rgb)); border:1px rgba(var(--bs-theme-bg-rgb),.25) solid; padding:5px 8px 7px 8px; }

#body .username	{ --bs-btn-color:rgb(var(--bs-theme-bg-rgb)); border:1px rgba(var(--bs-theme-bg-rgb),.25) solid; padding:0.25rem 0.75rem 0.25rem 0.75rem; margin:0 0.25rem 0.25rem 0; }
#body .avatar	{ display:block; aspect-ratio:1/1; border-radius:.75rem; background-color:rgba(0,0,0,.5); border:1px background-color:rgba(0,0,0,.5) solid; }



#body .line
	{

	.space, .room, .user, .message, .information { display:block; background-color:rgba(var(--bs-theme-color-rgb),0.5); color:var(--bs-theme-bg-rgb); --bs-btn-border-color:rgba(var(--bs-theme-bg-rgb),.25) border-radius:1rem; border-radius:.90rem; }

	.space			{ padding:0.50rem; }
	.room			{ padding:0.50rem; }
	.user			{ padding:0.50rem; }
	.message		{ padding:0.75rem; }
	.information	{ padding:0.75rem; }
	}


html[data-bs-theme=dark] #body #main { background: rgba(0,0,0,0.5); }
html[data-bs-theme=light] #body #main { background: rgba(255,255,255,0.5); }


[data-list-cards=horizontal]	{ overflow-x:scroll; }
[data-list-cards=vertical]		{ overflow-y:scroll; }

[data-height-body] { min-height:100dvh; }
[data-height-content] { min-height: calc( 100dvh - var(--header-height) - var(--footer-height) );  }

[data-lazy]:not(img),.avatar { background-size: cover; background-position: center center; }

.pointer	{ cursor:pointer; }

@keyframes fadein { from { opacity:0; } to { opacity:1; } }
.anim_fade_in { animation: fadein .3s ease-in; }

@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.anim_rotate { animation: spin 0.5s linear infinite; display:inline-block; }

@keyframes shake
	{
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
	20%, 40%, 60%, 80% { transform: translateX(10px); }
	}
.anim_shake { animation: shake 0.5s ease-in-out; animation-iteration-count: 5; }

#body .leaflet-control-attribution	{ display:none; }

fieldset
	{
	border:1px var(--bs-border-color-translucent) solid;
	border-radius:4px;
	padding:0.25rem 0.5rem 0.5rem 0.5rem;
	legend
		{
		float:inherit; width:inherit; margin:0; padding:0 0.25rem; font-size:0.75rem;
		}
	}