: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: #F6F6F6;
--theme-menu-highlight: #e2e2e2;
--theme-text: #323130;
--theme-textLight: #5F6368;
--theme-textLighter: #808080;
--theme-textDanger: #c53929;
--theme-textOnMain: #FFFFFF;
--theme-textOnLighter: #2E7D32;
--theme-main: #0F9D58;
--theme-lighter: #C0EABF;
--theme-dark: #2E7D32;
--theme-folder: #2E7D32;
--hBCol: #E1E1E1;
--sBCol: #EBEBEB;
--sBr: 4px;
--mBr: 8px;
--lBr: 12px;
}
.cprt {
	position:fixed !important;
	bottom:0px !important;
	right:0px !important;
	z-index:99999 !important;
	display:flex !important;
	justify-content: center;
	width:100%;
	visibility: visible !important;
}
.cprt a {
	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 img {
	margin-left:10px;
}
	
/* roboto/load.css */
/*
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: local('Roboto Italic'), local('Roboto-Italic'),
	url(roboto/italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: swap;
}
*/
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal.woff2?v=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: swap;
	/* change version also inside \FileRun\UI\CSS::insertLink */
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-ext.woff2?v=1) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium.woff2?v=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-ext.woff2?v=1) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(roboto/bold.woff2?v=1) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Bold'), local('Roboto-Bold'), url(roboto/bold-ext.woff2?v=1) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	font-display: swap;
}

/* ../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%;
	}
}