/** 
 *	
 */
:root {
	
/*	--color-theme0: #fff;
	--color-theme1: #bbb;
	
	--color-text0: #222;
	--color-text1: #111;
*/	
	--color-dotter:#2450a0;
	
	--color-error: #d40438;
	--color-warning: #e0c016;
	--color-success: #09b551;
	
/*	--logo-dotter: url(/source/image/logo-dotter.png);
	--logo-virtualid: url(/source/image/logo-virtualid.png);
	--icon-virtualid: url(/source/image/icon-virtualid.png);
*/

	--color-theme0: #222;
	--color-theme1: #444;
	
	--color-text0: #eee;
	--color-text1: #bbb;
	
	--logo-dotter: url("/source/image/logo-dotter-white.png");
	--logo-virtualid: url("/source/image/logo-virtualid-white.png");
	--icon-virtualid: url("/source/image/icon-virtualid-white.png");
		


}

/*
@media (prefers-color-scheme: dark) {

	:root {
		
		--color-theme0: #222;
		--color-theme1: #444;
		
		--color-text0: #eee;
		--color-text1: #bbb;
		
		--logo-dotter: url("/source/image/logo-dotter-white.png");
		--logo-virtualid: url("/source/image/logo-virtualid-white.png");
		--icon-virtualid: url("/source/image/icon-virtualid-white.png");
	
	}

}
*/

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

@font-face { font-family:montserrat-light; src:url(/source/font/Montserrat-Light.ttf); }

* { padding:0; margin:0; scrollbar-width:thin; scrollbar-color:var(--color-theme0) var(--color-theme1); }

::-webkit-scrollbar { width:10px; height:10px; background-color:var(--color-theme0); }
::-webkit-scrollbar-thumb { background-color:var(--color-theme1); }

div,li,label,td,th,button,input,select,pre,a,p,b,u,l,s,strong,big,small { font-family:montserrat-light; }


pre { white-space:pre-wrap; word-wrap:break-word }

button { background:transparent; border:none; cursor:pointer }

input, button { outline:none }

pre { white-space:pre-wrap; word-wrap:break-word; }

ol, ul, li { list-style:none }

table { border-collapse:collapse; border-spacing:0 }

iframe { border:none; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

a { text-decoration:none; cursor:pointer; color:var(--color-dotter); transition:all .5s; filter:brightness(80%); }
a:hover { filter:brightness(120%); }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

[class^=btn] {
	display: inline-block;
	padding:.5em 1em;
	border-radius:.3em;
	margin:.5em;
	word-break: break-word;

	-webkit-transition:all .35s;
	-moz-transition:all .35s;
	transition:all .5s;
	
	filter: brightness(75%);
}

[class^=btn] > span { display:block; }
[class^=btn] > b { padding:5px; }

[class^=btn]:hover { filter:brightness(100%); }
[class^=btn]:active { filter:brightness(120%); }

[class^=btn]:disabled { background-color:var(--color-theme0); color:var(--color-text0); cursor:default; }
[class^=btn]:disabled:hover { filter:brightness(85%); }

.btn-dark { background-color: var(--color-dotter); border:1px solid var(--color-dotter); color:#fff; }
.btn-light { background-color:rgba(255,255,255,.25); color: var(--color-dotter); }

/** */

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.empty {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAYSURBVBhXY/z69ev/d+/eMTCBCCEhIQYAcbgJrGQoufgAAAAASUVORK5CYII);
	background-size:50%;
	image-rendering: pixelated;
}

.empty > img {
	image-rendering: auto;
}
/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.logo-virtualid {
	display:inline-block;
	background-color:transparent;
	background-image:var(--logo-virtualid);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center;
}

.icon-virtualid {
	display:inline-block;
	background-color:transparent;
	background-image:var(--icon-virtualid);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center;
}

.logo-dotter {
	display:inline-block;
	background-color:transparent;
	background-image:var(--logo-dotter);
	background-size:auto auto;
	background-repeat:no-repeat;
	background-position:center;
}

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.toolbar > .header
	{
		display:flex;
		align-items:row;
		flex: auto;
		max-height:30px;
		padding:5px 10%;
		background-color: var(--color-theme0);
	}
.toolbar > .header .logo-virtualid { background-size:100%; background-position:left; height:30px; width:130px; }
.toolbar > .header .icon-virtualid { background-size:100%; height:30px; min-width:30px; display:none; }

.toolbar > .header > div 
	{
		display:flex;
		flex:auto;
		flex-direction: row-reverse;
        flex-wrap: nowrap;
		align-items: center;
	}

.toolbar > .header > div > a { padding:0 5px; margin:0 5px; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.view > .footer 
	{
		flex: auto;
		padding:1em 0;
		text-align:center;
		border-top:1px solid var(--color-text1);
		background-color: var(--color-theme1);
		
		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:var(--color-text0); }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.view > .content {
	min-height:500px;
	margin:0 10%;
	padding:10px;
	background-color:#fff;
}

.view > .content > .title {
	color:var(--color-dotter);
	margin:10px;
}

.view > .folder { position:relative; display:block; text-align:center; min-height:400px; background-color:transparent; background-image:url(/source/image/folder-1.jpg); background-size:auto auto; background-repeat:no-repeat; background-position:center 25% }
.view > .folder > img { position:absolute; right:0;left:0;top:0;bottom:25%; margin:auto; min-width:270px; max-width:65% }
.view > .folder > a { position:absolute; bottom:15%;left:0;right:0; margin:auto; padding:10px 15px; color:white; background-color:var(--color-dotter); opacity:.8;transition:all .3s }
.view > .folder > a:hover { opacity:1 }


.window .header { border-bottom:1px solid #444; }
.window .footer { border-top:1px solid #444; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */


@media  only screen and (max-width:480px) {
	.view > .content { margin:0; padding:0px; }
	.toolbar > .header .logo-virtualid { display:none; }
	.toolbar > .header .icon-virtualid { display:inline-block; }
}


/* ... */

.login
	{
		text-align:center;
		margin-top:1em;
		color: var(--color-theme0);
		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:100%;
		background:transparent;
		border:1px solid var(--color-theme0);
	/*	border-bottom:1px solid var(--color-theme0); */
		color: var(--color-theme0);
		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);
	}


/* ... */

.a-toolbar {
	display:block;
/*	background-color: #ddd; */
	background-color:var(--color-theme0);
	overflow-y:hidden;
	overflow-x:auto;
	white-space:nowrap;
	text-align:center;
}

.a-toolbar > button {
	display:inline;
	font-size:18px;
	padding:10px 0;
	width:5em;
	vertical-align:middle;
	margin:0;
	text-align:center;
	background-color:transparent;
	color:#fff; /*var(--color-dotter);*/
	transition:all .3s;
}

.a-toolbar > button:hover { background-color:var(--color-theme1) }

.a-toolbar > button small {
	display:block;
	padding-top:10px;
	font-size:12px;
	width:5em;
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}


/* */

ul.list { padding:10px; }
ul.list li:nth-of-type(odd) { background:#fafafa; }

.calendar #selected { background-color:var(--color-success); color:#fff; }


/* */


.info { padding:10px 10%; }

.info > label { display:block; padding:10px; }
.info > label > strong { padding:0 10px; }

.info iframe { display:block; min-height:350px; width:100%; padding:10xp 0; }

.info img { max-height:200px; max-width:800px; }
.info pre { padding:20px; }

@media only screen and (max-width:480px) {
	.info { padding:10px; }
	.info img { max-width:200px; }
}

@media only screen and (min-width:480px) {
	.form { margin: 0 10%; }
	.form input { max-width:300px; }
}