:root {
--theme-bg: #FFFFFF;
--theme-bg-transparent: rgba(255, 255, 255, 0.6);
--theme-mask-hidden: rgba(0, 0, 0, 0);
--theme-mask-shown: rgba(0, 0, 0, 0.5);
--theme-mask-popups-hidden: rgba(255, 255, 255, 0);
--theme-mask-popups-shown: rgba(255, 255, 255, 0.8);
--theme-filelist-bg: #EEEEEE;
--theme-menu-highlight: #e2e2e2;
--theme-text: #323130;
--theme-textLight: #5F6368;
--theme-textLighter: #808080;
--theme-textDanger: #c53929;
--theme-textOnMain: #FFFFFF;
--theme-textOnLighter: #590099;
--theme-main: #590099;
--theme-lighter: #F0E1F3;
--theme-dark: #590099;
--theme-folder: #7d0099;
--hBCol: #E1E1E1;
--sBCol: #EBEBEB;
--sBr: 4px;
--mBr: 8px;
--lBr: 12px;
}

/* roboto/load.css */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(roboto/roboto-v29-latin-ext_latin-regular.woff2) format('woff2');;
	/* change version also inside \FileRun\UI\CSS::insertLink */
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/roboto-v29-latin-ext_latin-500.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(roboto/roboto-v29-latin-ext_latin-700.woff2) format('woff2');
}

/* ../wl/css/style.css */
body {
	margin: 0;
	font: 16px 'Roboto', Helvetica, sans-serif;
	color: var(--theme-text);
	background: var(--theme-body-bg, var(--theme-bg)) no-repeat center center fixed;
	background-size: cover;
	cursor:default;

	overflow: hidden;
	display: flex;
	height: 100vh;
	flex-direction: column;
}
a {
	text-decoration:none;
	color: var(--theme-main);
}
a:hover {text-decoration: underline;}

.main {
	flex: 1;
	overflow:auto;
	padding: 0 30px 60px 30px;
}

.header {
	min-height: 30px;
	background-color: var(--theme-bg);
	padding:10px;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
	z-index:99999;
}
.header .left {
	float:left;
	padding: 10px;
}
.header .right {
	float:right;
	margin: 5px 0;
}
.header .filename {
	color: var(--theme-textLight);
	font-size: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header .details {
	color: var(--theme-textLighter);
	display: inline-block;
	font-size: 14px;
	padding: 10px 20px;
}

.actionBtn {
	padding:10px 15px;
	display: inline-block;
	cursor: hand;
	border-radius: var(--sBr);
	background-color: var(--theme-main);
	color: var(--theme-textOnMain);
	transition: color 200ms cubic-bezier(0.4,0.0,0.2,1),background 200ms cubic-bezier(0.4,0.0,0.2,1),box-shadow 400ms cubic-bezier(0.4,0.0,0.2,1);
}
.actionBtn:hover {
	background: var(--theme-lighter);
	color: var(--theme-main);
	text-decoration: none;
}
.actionBtn:active {
	background-color: rgba(0, 0, 0, 0.26);
}

.breadCrumb {
	font-size:24px;
	padding: 1px 6px;
}
.breadCrumb:hover {
	text-decoration: none;
	background-color: rgba(0,0,0,.06);
}
.bcSep {
	color: var(--theme-textLighter);
	font-size:24px;
	margin-left:5px;
	margin-right:5px;
	display: inline-block;
}
.overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	z-index: 2;
	cursor: default;
}
.panel {
	position: absolute;
	background-color:var(--theme-bg);
	width: 400px;
	font-size:14px;
	border-radius: var(--mBr);
	box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding:20px;
}
.panel-contents {
	margin-bottom:20px;
	border-radius: var(--mBr);
	border:1px solid var(--hBCol);
	height:200px;
	width: 100%;
	overflow-y:auto;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.panel-contents div {margin:10px;}
.overlay#upload .panel {
	width: 80%;
}
.overlay#upload .panel-contents {
	height: 300px;
}

.acceptBtn {margin-right:10px;}

.extLabel {
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	border-radius: var(--sBr);
	font-weight: bold;
	background-color: var(--theme-bg-transparent);
	border: 1.5px solid var(--theme-folder);
	color: var(--theme-textLighter);
	padding: 2px 4px;
	max-width:50px;
	white-space:nowrap;
	overflow: hidden;
}

@media (max-width:480px)  {
	.panel {
		width: 80%;
	}
}
.cprt {
	position:fixed !important;
	bottom:0px !important;
	right:0px !important;
	z-index:99999 !important;
	display:flex !important;
	justify-content: center;
	width:100% !important;
	height:auto !important;
	visibility: visible !important;
}
.cprt a {
	font-weight:bold;
	text-decoration: none;
	visibility: visible !important;
	font-size:14px !important;
	display:flex !important;
	align-items: center;
	border-top-left-radius:var(--mBr);
	border-top-right-radius:var(--mBr);
	padding:10px;
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),
		0 8px 10px 1px rgba(0,0,0,.14),
		0 3px 14px 2px rgba(0,0,0,.12);
	user-select: none;
	cursor: pointer;
		background-color: rgba(255,255,255,0.6) !important;
		color: var(--theme-text) !important;
	backdrop-filter: blur(10px);
}
.cprt:hover a {
	background-color: var(--theme-lighter) !important;
}
.cprt img {
	margin-left:10px;
}