:root {
	--red:#d64045;
	--yellow:#d9af04;
	--green:#43aa8b;
	--blue:#118AB2;
	
	--f1: 2em;
	--f2: 1.5em;
	--f3: 1em;
	
	--shadow:2px 1px 5px #00000044;
}

@font-face {
	font-family:Raleway;
	src:url(/source/font/Raleway.ttf);
}

* { font-family:Raleway; padding:0; margin:0; touch-action:manipulation; outline:none; }

::-webkit-scrollbar { width:10px; height:10px; background:transparent; }
::-webkit-scrollbar-thumb { border-radius:50px; background-color:#7775; }

ul { list-style:none }
a { text-decoration:none; }

strong { margin:0 5px; }
big { font-size:var(--f1); }
pre { white-space:pre-wrap; }

button { display:inline-block;margin:0;padding:0;border:none;background:transparent;cursor:pointer }


.warn {
	position:absolute;
	bottom:0;left:0;right:0;
	white-space:pre-wrap;
	padding:10px;
	background-color:var(--red);
	color: #fff;
	opacity:1.0;
	transition:opacity 1s;
}

/*
.logo-dotter {
	display:inline-block;
	background-color:transparent;
	background-image: url(/source/image/logo-dotter-white.png);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center;
}

.icon-dotter {
	display:inline-block;
	background-color:transparent;
	background-image: url(/source/image/icon-dotter-white.png);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center;
}
*/


/* configurações de estilo do app */

.app {
	font-size:var(--f3);
	background:#dae2e8;
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0ODAgNjQwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj48cGF0aCBzdHJva2U9IiNmZmYiIGQ9Ik0gNDEwIDQzNCBMIDQwMCA2MTYgTSAxOTUgNDAgTCA0NiAxOTkgTSAzMjUgMzYyIEwgMjQ4IDMzNiBNIDQ0MSAxMzMgTCAxOTUgNDAgTSA0NiAxOTkgTCAxMjUgNTMyIE0gMjM5IDIwOSBMIDQ2IDE5OSBNIDI0OCAzMzYgTCAzOTIgMzE5IE0gMjcgMzc5IEwgMjQ4IDMzNiBNIDExOCAxNzcgTCAzNDkgOTIgTSAyMzAgNTIwIEwgMjQ4IDMzNiBNIDMwIDUwNSBMIDM1NiAyNDMgTSAzNjkgNDUxIEwgMjczIDM1OSBNIDM1NiAyNDMgTCAxMjUgNTMyIE0gMTExIDMzNiBMIDQ0MyA1NTcgTSAzMjEgNTA4IEwgNzQgNzUgTSAxNzggMTg0IEwgNDYgMTk5IE0gMTM0IDM2MyBMIDc0IDc1IE0gMjkxIDI4OSBMIDI0OCAzMzYgTSAxMjUgNTMyIEwgMjkgMzE3IE0gNDAwIDYxNiBMIDIzMCA1MjAgTSA0NDMgNTU3IEwgMTc3IDEzIE0gODkgMzU3IEwgMjkgMzE3IE0gMjI1IDIgTCA4OSAzNTcgTSAyMzAgMzQ0IEwgNDIxIDIxMCBNIDY3IC0xMCBMIDM5MiAzMTkgTSA0MjEgMjEwIEwgMzAgNTA1IE0gNzQgNzUgTCAyMjUgMiBNIDM5MiAzMTkgTCA3NCA3NSBNIDM0OSA5MiBMIDE3NyAxMyBNIDI3MyAzNTkgTCAzOTIgMzE5IE0gMTc3IDEzIEwgMjMwIDM0NCBNIDI1MiAxMDYgTCAxMjUgNTMyIE0gMjkgMzE3IEwgNDQxIDEzMyBaIj48L3BhdGg+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTSA0MTAgNDM0IG0gNSwgMCBhIDUsIDUgMCAxLCAwIC0xMCwgMCBhIDUsIDUgMCAxLCAwIDEwLCAwIE0gMTk1IDQwIG0gNSwgMCBhIDUsIDUgMCAxLCAwIC0xMCwgMCBhIDUsIDUgMCAxLCAwIDEwLCAwIE0gMzI1IDM2MiBtIDMsIDAgYSAzLCAzIDAgMSwgMCAtNiwgMCBhIDMsIDMgMCAxLCAwIDYsIDAgTSA0NDEgMTMzIG0gMywgMCBhIDMsIDMgMCAxLCAwIC02LCAwIGEgMywgMyAwIDEsIDAgNiwgMCBNIDQ2IDE5OSBtIDYsIDAgYSA2LCA2IDAgMSwgMCAtMTIsIDAgYSA2LCA2IDAgMSwgMCAxMiwgMCBNIDIzOSAyMDkgbSA0LCAwIGEgNCwgNCAwIDEsIDAgLTgsIDAgYSA0LCA0IDAgMSwgMCA4LCAwIE0gMjQ4IDMzNiBtIDQsIDAgYSA0LCA0IDAgMSwgMCAtOCwgMCBhIDQsIDQgMCAxLCAwIDgsIDAgTSAyNyAzNzkgbSAyLCAwIGEgMiwgMiAwIDEsIDAgLTQsIDAgYSAyLCAyIDAgMSwgMCA0LCAwIE0gMTE4IDE3NyBtIDUsIDAgYSA1LCA1IDAgMSwgMCAtMTAsIDAgYSA1LCA1IDAgMSwgMCAxMCwgMCBNIDIzMCA1MjAgbSAyLCAwIGEgMiwgMiAwIDEsIDAgLTQsIDAgYSAyLCAyIDAgMSwgMCA0LCAwIE0gMzAgNTA1IG0gNCwgMCBhIDQsIDQgMCAxLCAwIC04LCAwIGEgNCwgNCAwIDEsIDAgOCwgMCBNIDM2OSA0NTEgbSA2LCAwIGEgNiwgNiAwIDEsIDAgLTEyLCAwIGEgNiwgNiAwIDEsIDAgMTIsIDAgTSAzNTYgMjQzIG0gNSwgMCBhIDUsIDUgMCAxLCAwIC0xMCwgMCBhIDUsIDUgMCAxLCAwIDEwLCAwIE0gMTExIDMzNiBtIDIsIDAgYSAyLCAyIDAgMSwgMCAtNCwgMCBhIDIsIDIgMCAxLCAwIDQsIDAgTSAzMjEgNTA4IG0gNiwgMCBhIDYsIDYgMCAxLCAwIC0xMiwgMCBhIDYsIDYgMCAxLCAwIDEyLCAwIE0gMTc4IDE4NCBtIDUsIDAgYSA1LCA1IDAgMSwgMCAtMTAsIDAgYSA1LCA1IDAgMSwgMCAxMCwgMCBNIDEzNCAzNjMgbSAyLCAwIGEgMiwgMiAwIDEsIDAgLTQsIDAgYSAyLCAyIDAgMSwgMCA0LCAwIE0gMjkxIDI4OSBtIDYsIDAgYSA2LCA2IDAgMSwgMCAtMTIsIDAgYSA2LCA2IDAgMSwgMCAxMiwgMCBNIDEyNSA1MzIgbSAzLCAwIGEgMywgMyAwIDEsIDAgLTYsIDAgYSAzLCAzIDAgMSwgMCA2LCAwIE0gNDAwIDYxNiBtIDQsIDAgYSA0LCA0IDAgMSwgMCAtOCwgMCBhIDQsIDQgMCAxLCAwIDgsIDAgTSA0NDMgNTU3IG0gNiwgMCBhIDYsIDYgMCAxLCAwIC0xMiwgMCBhIDYsIDYgMCAxLCAwIDEyLCAwIE0gODkgMzU3IG0gNCwgMCBhIDQsIDQgMCAxLCAwIC04LCAwIGEgNCwgNCAwIDEsIDAgOCwgMCBNIDIyNSAyIG0gMiwgMCBhIDIsIDIgMCAxLCAwIC00LCAwIGEgMiwgMiAwIDEsIDAgNCwgMCBNIDIzMCAzNDQgbSA0LCAwIGEgNCwgNCAwIDEsIDAgLTgsIDAgYSA0LCA0IDAgMSwgMCA4LCAwIE0gNjcgLTEwIG0gMywgMCBhIDMsIDMgMCAxLCAwIC02LCAwIGEgMywgMyAwIDEsIDAgNiwgMCBNIDQyMSAyMTAgbSA1LCAwIGEgNSwgNSAwIDEsIDAgLTEwLCAwIGEgNSwgNSAwIDEsIDAgMTAsIDAgTSA3NCA3NSBtIDIsIDAgYSAyLCAyIDAgMSwgMCAtNCwgMCBhIDIsIDIgMCAxLCAwIDQsIDAgTSAzOTIgMzE5IG0gNSwgMCBhIDUsIDUgMCAxLCAwIC0xMCwgMCBhIDUsIDUgMCAxLCAwIDEwLCAwIE0gMzQ5IDkyIG0gNiwgMCBhIDYsIDYgMCAxLCAwIC0xMiwgMCBhIDYsIDYgMCAxLCAwIDEyLCAwIE0gMjczIDM1OSBtIDYsIDAgYSA2LCA2IDAgMSwgMCAtMTIsIDAgYSA2LCA2IDAgMSwgMCAxMiwgMCBNIDE3NyAxMyBtIDQsIDAgYSA0LCA0IDAgMSwgMCAtOCwgMCBhIDQsIDQgMCAxLCAwIDgsIDAgTSAyNTIgMTA2IG0gNiwgMCBhIDYsIDYgMCAxLCAwIC0xMiwgMCBhIDYsIDYgMCAxLCAwIDEyLCAwIE0gMjkgMzE3IG0gNCwgMCBhIDQsIDQgMCAxLCAwIC04LCAwIGEgNCwgNCAwIDEsIDAgOCwgMCBaIj48L3BhdGg+PC9zdmc+);
}

.app .view > div, 
.app .view > center { padding:10px; }

.app .frame {
	background:white;
	border-radius:10px;
	box-shadow:2px 3px 15px #191919c0
}

.app #header { background:#222; color:#fff; }
.app #header .btn-icon { color:#fff; }

.app .frame .header,
.app .frame .footer { padding:5px; }

.app .frame .header button,
.app .frame .footer button { font-size:var(--f5); }

.app .frame .header:first-child{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom:1px solid #ddd;
}

.app .frame .footer:last-child {
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top:1px solid #ddd;
}

.app .loading::after{ border-top-color:var(--blue); }


.view .footer 
	{
		flex: auto;
		padding:1em 0;
		text-align:center;
		border-top:1px solid #fff;
		background-color: #222;
		
		background-image:url(/source/image/background-1.jpg);
		background-position:54% 58%;
	}

.view .footer a { display:inline-block;margin:10px; }
.view .footer a > div { background-size:100%; min-height:80px; min-width:200px; }
.view .footer pre { margin:5px 0;color:#fff; }


/* ... */


.dttrheader a > div { background-size:100%; min-height:30px; width:80px; }


.btn-std { 
	padding:7px 25px;
	margin:5px;
	border-radius:50px;
	font-size:1em;
	background-color:#ffffffee;
	box-shadow:var(--shadow);
}

.btn-icon { 
	padding:5px 10px;
	font-size:var(--f3);
}

.red { color:var(--red); }
.blue { color:var(--blue); }
.green { color:var(--green); }
.yellow { color:var(--yellow); }




/* ... */

.box {
	margin:10px;
	padding:10px;
	
	background:#fff7;
	backdrop-filter: blur(5px);
	
	border-radius:10px;
	box-shadow: 2px 3px 15px #777;
}



/* ... */


@media only screen and (min-width:740px) {
	
	.view > * { margin:0 15%; }
	.view .footer { margin:0; }
	
}

@media only screen and (min-width:920px) {
	
	.view > * { margin:0 20%; }
	.view .footer { margin:0; }
	
}



/* ... */

.box {
	margin:10px;
	padding:10px;
	
	background:#fff7;
	backdrop-filter: blur(5px);
	
	border-radius:10px;
	box-shadow: 2px 3px 15px #777;
}

.box textarea { width:calc( 100% - 12px ); padding:5px; min-height:100px; border-radius:10px; resize: none; }

.box table { width:100%; }
.box table th, .box table td { padding:5px; text-align:center; }

.box table input { width:90%; padding:5px 10px; border:1px solid #777; border-radius:60px; }


.box ul { padding:10px; }
.box ul pre { padding:10px; white-space:pre-wrap; }


.form { padding:10px; }
.form label { display:inline-block; padding:5px; }
.form strong { display:inline-block; width:120px; text-align:left; }
.form input { padding:5px 10px; border:1px solid #777; border-radius:60px; }


.chat li { padding:5px; }

.chat li:nth-of-type(odd) {
	text-align:right;
	color:#444;
}


/* ... */

.login
	{
		text-align:center;
		margin-top:1em;
		color: #000;
		background-color:
	}

.login > img { width:80% }

.login label
	{
		display:block;
		text-align:left;
		padding:10px 20px;
	 }

.login span { display:block }

.login input
	{
		display:block;
		padding:5px 10px;
		width:calc(100% - 20px);
		background:#fff;
		border:1px solid #777;
	/*	border-bottom:1px solid var(--color-theme0); */
		color: #222;
		transition:all .5s;
	}
	
.login input:focus 
	{ 
		color: var(--color-dotter);
		border-color: var(--color-dotter);
	}

.login > pre
	{
		padding:10px;
		font-size:12px;
	}

.login .warn-message 
	{
		display:block;
		margin:1em 0;
		color:var(--color-text0);
		background-color:var(--color-error);
	}








@media only screen and (max-width:430px) {
	
	.form label { display:block; }
	
}