/*
main.css
author: Felix Harst

The style definitions for the main page

*/

@font-face {
	font-family: 'Montserrat Medium';
	src: url("../fonts/montserrat/Montserrat-Medium.ttf");
}

@font-face {
	font-family: 'Montserrat Regular';
	src: url("../fonts/montserrat/Montserrat-Regular.ttf");
}

@font-face {
	font-family: 'Montserrat Light';
	src: url("../fonts/montserrat/Montserrat-Light.ttf");
}


/* Class definitions */

body.disable-scroll {
	height: 100vh;
	overflow: hidden;
}

div.input-upload-filelist-entry {
	text-align: left;
	width: 100%;
	height: 2em;
	line-height: 2em;
}

/* the following stylings should be synchronized with the div.searchresult-item definitions */
div.fileview-item {
	background-color: white;
	/*height: 3rem;*/
	cursor: pointer;
	font-size: 1rem;
	border-radius: 0.64em;	/* Has to be adopted to the border radius of the .tree-item */
	height: 3rem;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
div.fileview-item:hover, div.searchresult-item:hover {
	background-color: rgba(183, 199, 217, 0.4);
}
div.fileview-item:active, div.searchresult-item:active {
	background-color: rgba(183, 199, 217, 1.0);
}
div.fileview-item.selected, div.searchresult-item.selected {
	background-color: rgba(183, 199, 217, 0.7);
}
div.fileview-item.selected + div.fileview-item.selected, div.searchresult-item.selected + div.searchresult-item.selected {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
div.fileview-item.selected.next-sibling-selected, div.searchresult-item.selected.next-sibling-selected {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

p.input-upload-filelist-entry-filename {
	margin: auto 1em;
	font-size: 0.8em;

	/* clamping to one line */
	display: inline;	/* IE Backup */
	display: -webkit-inline-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;

	max-height: 100%;
	max-width: calc(100% - 10rem);
}

p.input-upload-filelist-entry-filesize {
	margin: auto auto auto auto;
	float: right;
	font-size: 0.8em;
	width: 5rem;
	text-align: right;
	line-height: inherit;
}

/* definitions for the checkbox in the filelist view and header */
div.fileview-column-checkbox input {
	margin: 0 0.8rem;
	height: 1em;
	width: 1em;
	cursor: pointer;
}
div.fileview-column-checkbox label {
	display: flex;
	align-items: center;
	height: 100%;
}
#fileview-tableheader div.fileview-column-checkbox input {
	margin-bottom: 0;
}
#fileview-tableheader div.fileview-column-checkbox label::after {
	content:  "";
	height: 1.3em;
	background-color: #c0c0c0;
	width: 1px;
	margin: auto;
}

.fileview-column-filename {
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	flex: 7;

	color: #202e53;
	
	padding-left: 0.8rem;
}
.searchresult-item .fileview-column-filename {
	margin: auto;
}
p.fileview-column-filename {
	/* limit the filename to one line */
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-ms-box-orient: vertical;
	-webkit-box-orient: vertical;
	overflow-y: hidden;
	margin: auto;

	font-family: "Montserrat Light";
}

/* remove the padding left for filenames in the search results */
.searchresult-item .fileview-column-filename > p.fileview-column-filename {
	padding-left: 0;
	margin-top: 0.3rem;
}

p.fileview-column-uploaddate {

	margin: auto;

	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	flex: 2;
	max-width: 11rem;

	color: #202e53;
	font-family: "Montserrat Light";
}

.fileview-column-status {

	margin: auto;

	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	flex: 1;
	max-width: 4rem;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;

	color: #202e53;
	font-family: "Montserrat Light";
}

div.fileview-column-status-ocr {
	height: 0.7rem;
	width: 0.7rem;
	border-radius: 50%;
	margin: auto;
}

div.no-ocr .fileview-column-status-ocr, div.no-ocr #statusdot-docProperties-ocrstatus {
	background-color: #AAAAAA;
}
div.ocr-running .fileview-column-status-ocr, div.ocr-running #statusdot-docProperties-ocrstatus {
	background-color: #3377CC;
}
div.ocr-successful .fileview-column-status-ocr, div.ocr-successful #statusdot-docProperties-ocrstatus {
	background-color: #00CC00;
}
div.ocr-failed .fileview-column-status-ocr, div.ocr-failed #statusdot-docProperties-ocrstatus {
	background-color: #FF0000;
}
div.waiting-for-ocr .fileview-column-status-ocr, div.waiting-for-ocr #statusdot-docProperties-ocrstatus {
	background-color: #FFCC00;
}

/* The div tag containing the actions */
div.fileview-column-action, p.fileview-column-action {
	margin: auto;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	flex: 1;
	max-width: 6rem;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;

	color: #202e53;
	font-family: "Montserrat Light";
}

div.fileview-column-action {
	/*display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;*/
	height: 1.3rem;
	gap: 0.5em;
}

div.fileview-column-action > a {
	height: 100%;
}

button.action-share {
	border: none;
	height: 100%;
	padding: 0;
	box-sizing: content-box;
	background: none;
}

/* Link buttons of some actions */
img.fileview-column-action {
	height: 100%;
	max-width: 100%;
}

img.fileview-column-action:hover {
	opacity: 0.7;
}

img.fileview-column-action:active {
	opacity: 0.2;
}

p.tree-separator {
	margin-left: 2rem;
	margin-right: 2rem;
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.5rem;
	padding-top: 0.5rem;
	color: #202e53;
}

#fileview-tableheader p {
	font-size: 0.8rem;
	font-weight: 700;
	/*color: #667b9a;*/
	color: #202e53;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

a.input-upload-filelist-entry-deletebutton {
	margin: auto 1em auto 1em;
	float: right;
	width: 1rem;
	text-align: center;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

a.input-upload-filelist-entry-deletebutton:hover {
	opacity: 0.85;
	cursor: pointer;
}

a.input-upload-filelist-entry-deletebutton:active {
	opacity: 0.5;
}

#input-upload-deactivateOCR:checked {
	accent-color: #f6a500;
}

#search-container {
    border: solid 1px #667b9a;
	border-radius: 1rem;
	font-size: 1rem;
	text-align: center;
	height: 2.5rem;
	min-width: 55%;
	max-width: 100%;
    
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	overflow: hidden;
}
#search-container.active, #search-container.active:hover {
	border: solid 1px #202e53;
	box-shadow: 0 0 5px 0 #667b9a;
	-moz-box-shadow: 0 0 5px 0 #667b9a;
	-webkit-box-shadow: 0 0 5px 0 #667b9a;
}
#search-container:hover {
	border: solid 1px #202e53; 
	outline: none;
	box-shadow: 0 0 5px -3px #667b9a;
	-moz-box-shadow: 0 0 5px -3px #667b9a;
	-webkit-box-shadow: 0 0 5px -3px #667b9a;
}

#search-icon {
	height: 1.3rem;
	margin: auto 0.7rem;
	align-self: center;
}

#search-textfield {
    flex: 1;
    border: none;
    font-size: inherit;
    margin: 0;
    background: none;
	/*padding: 0.5em;
	border: solid 1px #667b9a;
	border-radius: 0.64em;	/* Has to be adopted to the border radius of the .tree-item */
    /*font-size: 1rem;
	text-align: center;*/
}
/*#search-textfield:focus {
	border: solid 1px #202e53;
	outline: none;
	box-shadow: 0 0 5px 0 #667b9a;
	-moz-box-shadow: 0 0 5px 0 #667b9a;
	-webkit-box-shadow: 0 0 5px 0 #667b9a;
}*/
#search-dropdown-timespan {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	cursor: pointer;
    font-size: 0.8em;
    color: #667b9a;
	padding-right: 2.3em;

	/* The arrow */
	background-image:
		linear-gradient(45deg, transparent 50%, #667b9a 50%),
		linear-gradient(135deg, #667b9a 50%, transparent 50%);
	background-position:
		calc(100% - 1.5em) 1.25em,
		calc(100% - 1em) 1.25em;
	background-size:
		0.5em 0.5em,
		0.5em 0.5em;
	background-repeat: no-repeat;
}
#search-dropdown-timespan:hover {
	opacity: 0.7;
}

#search-allow-similar-results + label {
	font-size: 0.8em;
}

#search-button {
	padding: 0 1.5rem;
	border: none;
	background-color: #202e53;
	font-size: 0.9em;
	color: white;
	margin: 0;
	cursor: pointer;
}
#search-button:hover {
	opacity: 0.85;
}
#search-button:active {
	opacity: 0.5;
}


/*
	Search Results
*/

/* the following stylings should be synchronized with the div.fileview-item definitions */
div.searchresult-item {
	background-color: white;
	cursor: pointer;
	font-size: 1rem;
	border-radius: 0.64em;	/* Has to be adopted to the border radius of the .tree-item */

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	min-height: 3rem;
}

div.searchresult-item-wordlist {
	display: block;
	width: 100%;
	margin: 0.1rem auto 0.3rem;
}

div.searchresult-item-wordlist p {

	display: inline-block;

	font-family: 'Montserrat Light';
	font-size: 0.75em;

	color: white;
	background-color: #667b9a;
	border-radius: 0.3rem;
	padding: 0.1rem 0.4rem;
	margin: auto 0.4rem auto 0;
}


/* 
	Individual definitions
*/

/* The main page */

/* BEGIN outer containers */

#main-container {
	flex: 1;
	min-height: 35rem;
	margin: 0;
	padding: var(--tile-gap);

	/* for the two containers to be able to fill the whole space */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
}

#news-container {
	/*z-index: 3;*/
	text-align: center;
	/*margin: 1vw 2vw;*/
	/*border: solid #667b9a 3px;*/
	box-shadow: 0px 0px 0.5em -0.2em #202e53;
	-moz-box-shadow: 0px 0px 0.5em -0.2em #202e53;
	-webkit-box-shadow: 0px 0px 0.5em -0.2em #202e53;
	/*border-radius: 2em;*/
	padding: 0 1em;
	background-color: white;

	flex: none;
	/*height: 10em;*/
}

/* END outer containers */

/* BEGIN inner containers */

#tree-container {

	flex: 1;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;

	min-height: 0;
	overflow-x: auto;
	position: relative;
}
#fileview-container {
	flex: 3;

	/*background-color: white;*/

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
}

#left-tool-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#tree-button-container {
	flex: none;
	text-align: center;
	background: var(--background-color-dark);
}

#fileview-tableheader {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin: 0 var(--tile-border-radius);
}

#fileview-table-container {
	flex: 1;

	margin: 0 var(--tile-border-radius);
	border-top: solid 1px #202e53;
	border-bottom: solid 1px #202e53;
	overflow-y: scroll;
}

/* the search indicator */
#fileview-search-indicator, #fileview-search-noresult {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
#fileview-search-indicator.hidden, #fileview-search-noresult.hidden {
	display: none;
}
#fileview-search-indicator > *, #fileview-search-noresult > * {
	margin: 1rem auto;
}
#fileview-search-indicator div.loading-indicator-container {
	width: 7rem;
	height: 7rem;
}
#fileview-search-indicator div.loading-indicator {
	border-width: 0.6rem;
}
#fileview-search-indicator div.loading-indicator-container {
	background: url(../images/search_icon.png) center /37% no-repeat;
}

#fileview-search-noresult > img {
	max-height: 16rem;
	height: 35%;
}
@media screen and (max-height: 40rem) {
	#fileview-search-noresult > img {
		display: none;
	}
}

#fileview-descriptiontext {
	text-align: center;
	margin-top: 2rem;
	height: 3.42rem;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;

	color: #667b9a;
}

#multi-selection-toolbar {
	position: absolute;
	bottom: 4rem;
	right: 50%;
	background-color: white;
	box-shadow: 0 0 5px 0 #202e53;
	border-radius: 5rem;
	transform: translateX(-50%);
	padding: 0.5rem;
}
#multi-selection-toolbar button {
	height: 1.5rem;
	width: 2.5rem;
}
#multi-selection-toolbar button.download {
	background: url(../images/icon_download_200.png) center / 60% no-repeat;
	border: none;
}
#multi-selection-toolbar button.share {
	background: url(../images/icon_share_200.png) center / 60% no-repeat;
	border: none;
}
#fileview-table-container-inner {
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}

#fileview-tablefooter {
	padding: 0.5rem 0;
	font-size: 0.8em;
}
#fileview-tablefooter>div {
	margin: auto;
}
#fileview-tablefooter button {
	height: 1rem;
	border: none;
	margin: 0 10px;
}
#fileview-tablefooter input {
	width: 2em;
	font-size: 1em;
	font-weight: bold;
	padding: 0;	
	margin: auto 5px;
	text-align: center;
}

/* END inner containers */

/* BEGIN user interaction items */

#button-addfolder {
	margin: 1em auto 0rem auto;
	width: 100%;
	min-height: 25px;
	height: 2rem;
	border: none;
	background-color: transparent;
	color: #e0e0e0;
	font-size: 0.9rem;
	cursor: pointer;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
}
#button-addfolder:hover {
	opacity: 0.7;
}
#button-addfolder:active {
	opacity: 0.4;
}
#button-addfolder img {
	height: 1.2em;
	margin-right: 10px;
}
#button-addfolder p {
	line-height: 0.8rem;
}

#button-upload {
	margin: 1.5rem 0.5rem;
	padding: 0.7rem 4rem;
	min-height: 25px;
	border: 0;
	border-radius: 1.2rem;
	background-color: #f6a500;
	color: #202e53;
	font-size: 0.9rem;
	cursor: pointer;
}
#button-upload:hover {
	opacity: 0.85;
}
#button-upload:active {
	opacity: 0.5;
}

#scrollbar-x-placeholder {
	overflow-y: scroll;
	opacity: 0;
}

/* END user interaction items */


/* The style definitions for the file upload */

#container-popover-upload {
	cursor: pointer;
}

#popover-upload {
	max-width: 90%;
	margin: auto;
	text-align: center;
	background-color: white;
	padding: 1em;
	border-radius: 2em;
	border: 3px solid #202e53;
}

#popover-upload-formcontainer {
	border: 2px solid #667b9a;
	border-radius: 1em;
	padding: 1em;
}

#form-upload {
	margin: 0;
	margin-top: 1.3em;
}

#input-upload-area {
	width: calc(100% - 2px);
	height: 10em;

	margin-bottom: 0.5em;
}

#input-upload-area.droppable {
	box-shadow: 0 0 1em 0 #202e53 inset;
	-webkit-box-shadow: 0 0 1em 0 #202e53 inset;
	-moz-box-shadow: 0 0 1em 0 #202e53 inset;
}

#container-upload-deactivateOCR {
	margin-top: 1.5rem;
}

#label-upload-deactivateOCR {
	/*vertical-align: middle;*/
	margin-left: 0.5rem;
	font-size: 0.9em;
}

#text-upload-deactivateOCR-explaination {
	font-size: 0.6em;
	margin-top: 0.5rem;
}

#form-button-upload {
	font-size: 0.9rem;
}

#progressbar-upload {
	width: 100%;
	height: 0.5em;
}

#button-abort-upload {
	font-size: 0.8rem;
}

#upload-errortext 
{
	color: red;
	font-size: 0.8em;
	margin-block: 0;
}

#upload-loading-indicator {
	height: 5em;
	width: 5em;
	margin-bottom: 1.5em;
	margin-top: 1em;
}


/* The definitions for the document properties popover */ 

#popover-docProperties-content {
	min-width: 70%;
	min-height: 100%;
	max-height: 100%;

	padding: 0 2rem 0 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: clip;

	position: relative;
	flex-direction: row;
}

#popover-docProperties-properties {
	min-width: 26rem;
    flex: 0.5;
    /* width: 6rem; */
    text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    flex-direction: column;
    /*padding: 0 1rem 1rem 0;*/
	margin-top: 1rem;
	margin-left: 2rem;
}
#popover-docProperties-properties > * {
	padding-right: 1rem;
}
#popover-docProperties-properties > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	overflow: auto;
	flex: 1;
	margin-bottom: 2rem;
}

/* the container for the PDF preview */
#popover-docProperties-preview {
	border-right: solid 1px #202e53;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	position: relative;
}

/* the actual preview object */ 
#popover-docProperties-preview > object {
	margin: 0;
	flex: 1;

	display: none;
}

/* the fallback tag for the preview object */
#popover-docProperties-preview > object > div {
	background-color: #667b9a;
	width: 100%;
}

/* the definition of the preview for when the loading indicator is hidden */
#popover-docProperties-preview > div.loading-indicator-container.hidden ~ object {
	display: block;
}

#popover-docProperties-preview > a {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	height: 3.5rem;
	width: 3.5rem;
	background: url('../images/icon_download_200.png') center / 50% no-repeat, #f6a500;
	border-radius: 50%;
	/*border: 2px solid #202e53;*/
	box-shadow: 0 0 5px 2px #202e53;
	-moz-box-shadow: 0 0 5px 2px #202e53;
	-webkit-box-shadow: 0 0 5px 2px #202e53;
}
#popover-docProperties-preview > a:hover {
	opacity: 0.75;
	cursor: pointer;
}
#popover-docProperties-preview > a:active {
	opacity: 0.5;
}


#label-docProperties-docTitle, #label-docProperties-folder, #label-docProperties-tags, #label-docProperties-description {
	margin: auto 10px auto 0;
	padding: 5px;
	text-align: right;
	width: 7rem;
}

#input-docProperties-docTitle, #input-docProperties-folder, #input-docProperties-tags, #input-docProperties-description {
	margin: auto 0;
	padding: 5px;
	flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	width: 100%;
}

#input-docProperties-description {
	height: 10em;
	resize: none;
}

#docProperties-errortext {
	color: red;
	margin-block-start: 1rem;
	margin-block-end: 0rem;
}

#container-docProperties-ocrstatus {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}

#statusdot-docProperties-ocrstatus {
	height: 0.8rem;
	width: 0.8rem;
	margin: auto 0;
	border-radius: 50%;
}

#statustext-docProperties-ocrstatus {
	font-size: 0.8em;
	margin: auto;
	margin-left: 0.5rem;
	margin-right: 1rem;
}

#button-docProperties-ocrstatus-restart, #button-docProperties-ocrstatus-delete {
	background-color: #202e53;
	color: #E0E0E0;
	margin: auto 0;
	border: none;
	border-radius: 0.6em;
	padding: 0.4em 0.8em;
}
.popover-content #button-docProperties-ocrstatus-restart, .popover-content #button-docProperties-ocrstatus-delete {
	color: #202e53;
	background-color: #667b9a;
}

#container-docProperties-save {
	margin-bottom: 0;
}

#btn-docProperties-next, #btn-docProperties-previous {
	border: none;
	width: 3rem;
}

#btn-docProperties-next {
	background: url("/images/arrow_right_orange_180.png") center center / 2em no-repeat;
}

#btn-docProperties-previous {
	background: url("/images/arrow_left_orange_180.png") center center / 2em no-repeat;
}

#button-docProperties-abort, #button-docProperties-submit {
	margin: auto;
}

#form-docProperties {
	margin-top: 1.5rem;
}

#text-docProperties-saveAnd {
	width: 100%;
	margin-bottom: 1rem;
	opacity: 0.6;
}
#text-docProperties-saveAnd > div {
	background-color: #f6a500;
	flex: 1;
	margin: auto;
	height: 1px;
}
#text-docProperties-saveAnd > p {
	color: #f6a500;
	font-size: 0.7rem;
}

#text-docProperties-saveStatus {
	color: greenyellow;
	font-size: 0.7rem;
	margin: 0.5rem;
	transition: 0.2s;
}
#text-docProperties-saveStatus.hidden {
	opacity: 0;
	transition: 0.3s;
}

/*
	CONTEXT MENU
*/

/* container */
div.context-menu {	
	position: absolute;

	border-radius: 0.5em;
	border: 1px solid #667b9a;
	background-color: white;

	padding: 0.3em 0;
	
	box-shadow: 0 0 5px -3px black;
	-webkit-box-shadow: 0 0 5px -3px black;
	-moz-box-shadow: 0 0 5px -3px black;
}

/* items */
button.context-menu, a.context-menu {
	display: block;
	width: 100%;
	padding: 0.3em 0.8em;
	color: #202e53;
	background-color: transparent;
	border: none;
	font-size: 0.8rem;
	text-align: left;
	margin: 0;
}
button.context-menu:enabled:hover, a.context-menu:hover {
	background-color: rgba(183, 199, 217, 0.4);
}
button.context-menu.marked::after {
	content: '';
	display: block;
	height: 9px;
	width: 9px;
	border-radius: 50%;
	background-color: red;
	float: right;
	margin-top: 2px;
}
a.context-menu {
    text-decoration: none;
    font-family: 'Montserrat Medium';
}

/* ============================== */
/* PROFILE MENU */

#menu-profile {
	width: 13rem;
	padding: 0;
	overflow: hidden;
}
#menu-profile h4 {
	color: white;
	font-size: 0.8rem;
	margin: 0;
}
#menu-profile p
{
	color: #e0e0e0;
	font-size: 0.6em;
	margin: auto auto 0 0.7rem;
}

/* Contingent usage display in Profile/Settings menu */
#menu-profile-currentUsage {
	border-bottom: solid 1px #667b9a;
	background-color: #202e53;
	padding: 0.5rem;
}
#menu-profile-currentUsage div.low {
	background-color: red;
}
#menu-profile-currentUsage span.low {
	color: red;
}
#menu-profile-currentUsage-bar {
	border-radius: 1rem;
	height: 0.4rem;
	overflow: hidden;
	background-color: #E0E0E0;
	margin: 0.6rem 0 0;
}
#menu-profile-currentUsage-bar > div {
	background-color: #F6A500;
	height: 100%;
	padding-left: 0.2rem;
}
#menu-profile-currentUsage > p {
	color: #e0e0e0;
	font-size: 0.7em;
	margin: 0.6rem 0.2rem auto;
	font-family: 'Montserrat Medium';
}
#menu-profile-currentUsage a.textbutton-orange {
	text-decoration: none;
	font-family: 'Montserrat Medium';
	font-size: 0.65em;
	padding: 0.2em 0.5em 0.2em 2em;
	display: inline-block;
	margin-top: 0.5em;
	background: url("/images/plus_icon_100.png") 0.5em/1em no-repeat , #f6a500 ;
}

/* Menu buttons */
#menu-profile-buttons {
	padding: 0.3rem 0;
}

/*
	INPUT MASK - CREATE FOLDER
*/

#input-mask-create-folder-container.hidden {
	display: none;
}

#input-mask-create-folder {
	min-width: 22rem;
}

#input-mask-create-folder > input {
	margin: 1rem;
}

#input-mask-create-folder-savebutton {
	display: block;

	font-size: 0.9rem;
}

#input-mask-create-folder-abortbutton {
	display: block;

	font-size: 0.8rem;
}

#input-mask-create-folder-duplHint {
    font-size: 0.8em;
    word-wrap: break-word;
    max-width: 100%;
    margin: auto;
    color: greenyellow;
}
#input-mask-create-folder-duplHint.hidden {
    display: none;
}


/*
	INPUT MASK - RENAME FOLDER
*/

#input-mask-rename-folder-container.hidden {
	display: none;
}

#input-mask-rename-folder {
	min-width: 22rem;
}

#input-mask-rename-folder > input {
	margin: 1rem;
}

#input-mask-rename-folder-savebutton {
	display: block;

	font-size: 0.9rem;
}

#input-mask-rename-folder-abortbutton {
	display: block;

	font-size: 0.8rem;
}


/*
	INPUT MASK - REMOVE FOLDER
*/

#input-mask-remove-folder-container.hidden {
	display: none;
}

#input-mask-remove-folder-savebutton {
	font-size: 0.9rem;
	background-color: darkred;
	color: white;
}

#input-mask-remove-folder-abortbutton {
	font-size: 0.9rem;
}


/*
	DROP AREA - BODY
*/
#droparea-fileupload-body {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(32, 46, 83, 30%);
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#droparea-fileupload-body.hidden {
	display: none;
}
#droparea-fileupload-body>h1 {
	color: #202e53; 
}
#droparea-fileupload-body > img {
	height: 4rem;
}


/*
	FILELIST SORTING
*/
p.sortable {
	cursor: pointer;
}

#fileview-tableheader > p.sorted-asc::after {
	background: url(../images/arrow_up_50.png) center / 100% no-repeat;
	content: "";
	padding: 5px;
	margin-left: 5px;
}
#fileview-tableheader > p.sorted-desc::after {
	background: url(../images/arrow_down_50.png) center / 100% no-repeat;
	content: "";
	padding: 5px;
	margin-left: 5px;
}


/*
	"SHARE FOLDER" POPOVER VIEW
*/

#popover-share-folder {
	max-width: max(40%, 30rem);
}

#popover-share-folder-container-results p {
	max-width: 90%;
	line-break: anywhere;
	margin: 1rem auto;
}

#popover-share-folder > h3 {
	margin: 1rem 3rem;
}

p.popover-share-link {
	font-size: 0.8em;
}

/*
	"SHARE FILE" POPOVER VIEW
*/

#popover-share-file {
	max-width: max(40%, 30rem);
}

#popover-share-file-container-results p {
	max-width: 90%;
	line-break: anywhere;
	margin: 1rem auto;
}
#popover-share-file-container-results p.popover-share-link {
	font-size: 0.85rem;
	margin: 0.2rem auto;
}

#popover-share-file > h3 {
	margin: 1rem 3rem;
}

p.popover-share-link {
	font-size: 0.8em;
}

/* copy link button */
.share-link-copybutton {
	margin-inline-start: 1rem;
	width: 5rem;
	border: solid 1px #667b9a;
	border-radius: 0.3rem;
	background-color: transparent;

	color: #667b9a;
}
.share-link-copybutton.done {
	color: #00E000;
	border-color: #00E000;
}