/**
 * Styles for the Notes application frontend.
 *
 * (C) Thomas Weber 2021 tom-vibrant@gmx.de
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

.iconGrey {
	color: lightgrey;
}

.iconRed {
	color: red;
}

.iconOrange {
	color: orange;
}

.iconBlue {
	color: lightblue;
}

.iconGreen {
	color: lightgreen;
}

.deprecated {
	color: orange;
	font-style: italic;
}

.doc-label {
	text-align: center;	
	border-radius: 100px;
}

.doc-hashtag {
	text-align: center;	
	border-radius: 4px !important;
}

.doc-label-menuoption {
	width: 16px;
	height: 16px;
	float: right;
	margin-left: 2px;
}

.doc-label-labellist {
	width: 18px;
	height: 18px;
}

#uploadDialog {
	z-index: 99999;
}

/**
 * Editor
 */
div.tox-tinymce {
	border: 0px;
}

/**
 * Versions
 */
.versionButton {
	opacity: 0.6;
	margin: 5px;
	cursor: pointer;
	float: left;
}

.versionButton:hover {
	opacity: 1.0;
} 

#versiondata {
	padding: 10px 0px 0 20px;
	background-color: white;
	overflow: auto;
	width: 100%;
}

#conflictData {
	padding: 10px 0px 0 20px;
	background-color: white;
	overflow: auto;
	width: 100%;
}

.trashitemicon {
	padding-right: 5px;
}

/**
 * Settings
 */
.settingsForm {
	padding: 10px 0px 0 20px;
	font-size: 16px;
}

.settingsLabel {

}

.colorinput {
	font-size: 16px;
}

.settings-button {
	margin: 5px;
}

.settings-explanation {
	margin: 5px;
	padding-left: 5px;
	color: grey;
}

.settingsHdCol {
	min-width: 180px;	
}
	
/**
 * Preview for attachments
 */

.preview {
	width: 100%;
	height: 99%;
	
	border: 0;
	padding: 0;
	margin: 0;
	
	object-fit: scale-down;
}

.textpreview {
	padding: 10px;
	font-family: Courier;
}

#previewteaser {
	padding: 10px;
}

/**
 * Console view
 */
#console {
	background-color: black;
	font-family: Courier;
	padding: 10px;
	color: lightblue;
	overflow: auto;
	white-space: nowrap; /*pre-wrap;*/
	max-width: 100%;
	padding-bottom: 80px;
	z-index: 9999;
} 

.console-emptyline {
	color: black;
}

.console-type-I {
}
.console-type-S {
	color: #8cff66;
}
.console-type-W {
	color: orange;
}
.console-type-E {
	color: red;
}
.console-type-J {
	color: grey;
}
.console-type-B {
	color: #00000000;
}

/**
 * Login
 */
#login {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
}

#loginContainer {
	position: absolute; 
	left: 50%;
	top: 50%;
}

#loginForm {
	position: relative; 
	top: -50%;
	left: -50%;
	min-width: 300px; 
	font-size: 16px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	padding: 12px;
	border-radius: 5px;
	background-color: lightgrey;
	text-align: center;
}

#trustInput {
	width: 30px;
}

.userLoginTable {
	width: 100%;
	text-align: left;
}

.loginInput {
	width: 100%;
}

#loginText {
	margin-bottom: 10px;
}

.loginButton {
	margin-top: 10px;
	margin-right: 10px;
}

#cdbEndpointSelect {
	width: 200px;
}

#dbLink {
	width: 100%;
	margin-top: 10px;
}

/**
 * Profile select screen
 */
#profileSelection {
	width: 100%;	
 	text-align: center;
 	display: block;
}

.profileSelectBtn {
 	display: block;
 	padding: 10px;
 	max-width: 400px;
}

.profileSelectBtnFixed {
 	display: block;
 	padding: 10px;
 	width: 100%;
}
 
#profileList {
	margin-left: 10px;
}

.profileDocContent {
    border-top: 2px solid grey;
}

.profileSelectElementContainer {
	min-width: 300px;
}

.profileSelectStatusIcons {
	margin-right: 5px;	
}

.profileSelectStatusCloseLink {
	margin-left: 5px;	
}

/**
 * Conflicts
 */
.conflictAddedIcon {
	color: darkgreen;
}

.conflictRemovedIcon {
	color: red;
}

.tableAlignMiddle {
	vertical-align: middle !important;
}


.mce-window {
	max-width: 100%;
}

/**
 * Search
 */
.searchBar {
	font-size: 16px;
	position: relative;
}

.searchBarTree {
	background-color: darkgrey;
}

.searchBar input[type="text"] {
    border: 1px solid #d1d1d1;
    color: black;
    width: 100%;
    padding: 6px 15px 6px 15px;
  
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}

.searchBar input[type="text"]:focus {
}

.searchCancelButton {
	position: absolute;
	right: 20px;
	top: 17px;
	color: lightgrey;
	cursor: pointer;
}

.contentHeadline {
	padding-left: 8px;	
	padding-right: 8px;
	display: flex;	
}

.contentHeadlineText {
	flex: 1 1 auto;
}

.contentHeadlineButton {
	flex: 0 0 auto;
	cursor: pointer;
}

.listLink {
	cursor: pointer;
}

.listInactive {
	color: grey;
}

.pre {
	white-space: pre;
}

#checkList {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: white;
}

.checkMsgListHeader {
	float: left;
	padding-right: 20px;
	cursor: pointer;
}

.checkOutput {
	cursor: pointer;
}

.userbuttonselect {
	width: 100%;
}


.CodeMirror {
	width: 100%;
	height: 100%;
}

.settingsSelect {
	margin-right: 10px;
}

.prettyPageBody {
	font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
    line-height: 1.4;
    margin: 1rem;
}

.helpPageHeader {
    border-bottom: 2px solid grey;
}

/**
 * Favorites
 */
.favBar {
	height: 50px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 2px;
    
    background-color: darkgrey;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 6px 0 rgba(0, 0, 0, 0.19);

	z-index: 9977;
	position: relative;
}


.favoritesContainer {
	width: 100%;
	height: 100%;
	
	white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.favoritesContainer::-webkit-scrollbar {
	/* Hide scrollbar for Chrome, Safari and Opera */
	display: none;
}

.favoriteItem {
	position: relative;
	border-radius: 5px;
	display: inline-block;
	background-color: white;
	color: black;
	cursor: pointer;
}

.favoriteItemText {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 80%;
	text-overflow: fade;
	transform: translate(-50%, -50%);
	white-space: nowrap;
    overflow: hidden;
    text-align: center;
}
 
.selectedFavorite {
	display: none;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	
	background-color: red;
	opacity: 0.3;
	
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2), 0 2px 12px 0 rgba(0, 0, 0, 0.19);
}

.starredFavorite {
	position: absolute;
	top: 2px;
	left: 2px;
}

.beforeFavScrollTeaser {
	position: absolute;
	top: 0px;
	left: 0px;
	background: linear-gradient(to right, darkgrey, rgba(0,0,0,0));
}

.afterFavScrollTeaser {
	position: absolute;
	top: 0px;
	right: 0px;
	background: linear-gradient(to left, darkgrey, rgba(0,0,0,0));
}

/*
.favScrollTeaserIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: darkgrey; 
	background: lightgray;
	width: 22px;
	height: 22px;
	border-radius: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
*/

/**
 * Dialog stuff
 */
#setBgImageDialogB64DataInput {
	width: 100%;
}

.setBgImageDialogInputPreviewImg {
	width: auto;
	max-width: 100%;
	max-height: 300px;
	height: auto;
}

.setBgImageDialogInputPreviewInfo {
	margin-top: 10px;
}

/**
 * Graph stuff
 */
#graphContainer {
	height: 100%;
	background: #111;
}

#graphInfoPanel {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	font-size: 20px;
	padding-left: 10px;
	padding-right: 10px;
	background: white;
	border: 2px solid gray;
	border-radius: 5px;
}

.notesHashTag {
   color: white; 
   background: darkblue;
   cursor: pointer; 
   padding: 3px;
   border-radius: 4px;
}

.verifyRowDetail {
	background-color: #eee;
	padding-left: 10px;
}

.settingsCollapseIcon {
	padding-left: 5px;
	padding-right: 10px;
}

.attachmentPdfCanvas {
	height: 100%;
	width: 100%;
	position: absolute;
}

.attachmentPdfContainer {
	height: 100%;
	width: 100%;
	position: relative;
	text-align: center;
}

.attachmentPdfiumCanvas {
	border-bottom: 1px solid grey;
	
}