/* General settings for view-port and headings */
html, body {
	overflow-x:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
}

body {
	position:static;
	background-image:url("includes/bakgrund.jpg");
	background-size:cover;
	margin:0;
	font-family:sans-serif;
}

h1 {
	text-align:center;
}

/* Settings for main pane when logged in (shrinks to menu button at top right of screen */

#mainPane.loggedIn {
	width:30px;
	height:30px;
	right:0;
	top:0;
	margin:0;
	padding:0;
	z-index:10;
	border-radius:0;
	cursor:pointer;
}

/* Settings for navigation field at top of screen */

#navigation {
	position:fixed;
	color:white;
	top:0;
	left:0;
	width:100%;
	height:20px;
	background:#006677;
	padding:5px;
	z-index:5;
	cursor:default;
}

/* Settings for each specific element in the navigation row */

.navigationElement {
	display:inline-block;
}

.navigationElement:not(.active) span {
	cursor:pointer;
}

.navigationElement.active span {
	font-weight:bold;
}

/* Settings for panes */

.pane {
	position:absolute;
	margin:5%;
	padding:20px;
	background:rgba(255,255,255,0.8);
	border-radius:10px;
	width:85%;
	z-index:-10;
}

/* Settings for new panes, positions it outside of viewport while preparing content */

.newpane {
	left:105%;
}

/* Settings for login window */

#login {
	margin-left:auto;
	margin-right:auto;
	width:100px;
}

/* Settings for input fields in login window */

#login input {
	width:95px;
	border:none;
}

/* Settings for the login button displayed in the login window */

#loginbutton {
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
	width:60px;
	height:60px;
	border-radius:30px;
	background:rgb(0,153,180);
	text-align:center;
	padding-top:0px;
}

#loginbutton:hover {
	background:rgb(0,180,210);
}

#loginbutton p {
	padding-top:15px;
	user-select:none;
	color:white;
}

/* Size and position of the login button image in the login window */

#loginImg {
	width:40px;
	margin-top:17px;
}

/* Settings for the error message field in the login window */

#loginErrorMessage {
	text-align:center;
}

/* Size of the user image at the top of the user image */

#userMenuImg {
	width:20px;
	padding:5px;
}

/* Settings for the dropdown user menu */

#userMenu {
	position:absolute;
	top:-50px;
	right:0px;
	width:100px;
	height:80px;
	background:rgba(0,50,64,0.9);	
}

#userMenu.visible {
	top:30px;

}

/* Settings for individual entries on the user menu */

#userMenu div {
	padding-right:5px;
	padding-top:10px;
	text-align:right;
	height:30px;
	color:white;
	cursor:pointer;
}

#userMenu div:hover {
	background:rgba(0,25,32,0.9);

}

/* Settings for navigation buttons in panes */

.navigationButton {
	display:inline-block;
	width:120px;
	text-align:center;
	margin:5px;
	padding:5px;
	border-radius:5px;
	cursor:pointer;
}

.navigationButton:hover {
	background:rgba(0,0,0,.05);
}

.navigationButton img {
	width:75%;
	height:80px;
}

/* Settings for tables and elements within tables */

.tableView .table {
	position:relative;
}

.tableView .row {
	display:flex;
	flex-wrap:wrap;
}
 
.tableView .cell {
	display:inline-block;
	hyphens:auto;
}

.tableView .cell.data {
	top:20px;
	cursor:pointer;
}

.tableView .cell.width1 {
	flex:1;
}

.tableView .cell.width2 {
	flex:2;
}

.tableView .cell.width3 {
	flex:3;
}

.tableView .cell.width4 {
	flex:4;
}

/* Settings for new entries */

.cell.dataEntry select, .cell.dataEntry input, .cell.dataTableEntry select, .cell.dataTableEntry input  {
    width: 85%;
}

div[contenteditable] {
	background:rgba(255,255,255,0.5);
}

/* Settings for selectable columns */

.tableView .cell.selectableColumn {
	flex:0 0 25px;
}

.tableView .cell.data.selectableColumn {
	font-size:24px;
}

.tableView .cell.data.selectableColumn:not(.selected)::before {
	content:"○";
}

.tableView .cell.data.selectableColumn.selected::before {
	content:"●";
}

/* Settings for expandable data interaction */

.tableView .cell.expandDataColumn {
	flex:0 0 25px;
}

.tableView .cell.data.expandDataColumn {
	padding-left:5px;
	transition-duration:0.3s;
}

.tableView .cell.data.expandDataColumn::before {
	content:"▶";
}

.tableView .cell.data.expandDataColumn.open {
	transform:rotate(90deg);
}

.tableView .expandDataSpacer {
	width:100%;
	height:0px;
}

.tableView .expandDataField {
	width:100%;
    padding: 0 10px 10px 10px;
    border: solid;
    border-radius: 0 0 5px 5px;
    border-color: rgba(100,100,100,1);
    border-width: 0px 1px 1px 1px;
	transition-duration:0.3s;
}

.tableView .expandDataField .imageDiv img {
	max-width:50%;
	max-height:300px;
}

/* Settings for cells in headers */

.tableView .cell.header {
	font-weight:bold;
	cursor:pointer;
	vertical-align:bottom;
}

.tableView .row.header {
	background:rgba(0,102,119,0.3);
	position:absolute;
	width:100%;
}

.expandDataTable .row.header {
	position:relative;
}

.expandDataTable.row.unused .removeRow {
	opacity:0;
}

.expandDataTable.row.unused .anymetadata {
	opacity:0;
}

.metadata.row.unused .removeRow {
	opacity:0;
}

/* Settings for header menus */

.tableView .cell.headermenu {
	height:0px;
	overflow:hidden;
	background:rgba(0,102,119,0.9);
	position:relative;
	z-index:10;
	color:white;
	vertical-align:top;
	flex:
}

.tableView .row.headermenu {
	top:19px;
	position:absolute;
	width:96%;
}

.menuOption {
	cursor:pointer;
}

.menuOption:hover {
	background:rgba(255,255,255,0.1);
}

.filterRange input {
	width:80%;
}

.saveNewEntry {
	position:absolute;
	left:100%;
	color:rgb(33,33,230);
	cursor:pointer;
}

/* Style for tables contents */

.tableView .row.data:nth-child(3) {
	margin-top:19px;
}

.tableView .row.data:nth-child(2n) {
	background:rgba(255,255,255,0.3);
}

.tableView .row.data:hover {
	background:rgba(255,255,255,0.7) !important;	
}

.tableView .row.data {
	position:relative;
}

.table.clickable .row.data {
	cursor:pointer;
}

/* Style for expanded data */

.expandDataElement {
    display: inline-block;
    vertical-align: text-top;
}

.expandDataElement .label {
	font-weight:bold;
}

/* Style for sum rows */

.tableView .row.sum {
	position:relative;
	top:20px;
	border-top:1px solid rgb(0,153,180);
	font-weight:bold;
}

/* Settings for interaction buttons below tables */

.tableView .interactionButton {
	display:inline-block;
	width:150px;
	height:70px;
	background:rgba(200,150,150,0.7);
	border-radius:10px;
	margin:20px;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
}

.tableView .imageUploadButton, .tableView .imageUploadPasteField {
	display:inline-block;
	width:150px;
	height:40px;
	background:rgba(200,150,150,0.7);
	border-radius:10px;
	margin:20px;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
}

.tableView .interactionButton:hover,.tableView .imageUploadButton:hover {
	background:rgba(200,150,150,1);
}

.tableView .imageUploadPasteField:focus {
	background:rgba(200,150,150,1);
}

.imageContainer {
    position: relative;
    display: inline-block;
	width: 50%;
}

.imageContainer img {
    display: block;
	width: 100%;
}

.imageRemoveIcon {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    color: #ff0000; /* Red text */
    font-size: 16px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%; /* Makes it circular */
    cursor: pointer;
    display: none; /* Initially hidden */
}

.imageContainer:hover .imageRemoveIcon {
    display: block;
}

.tableView .buttonDescription {
	display:flex;
	height:100%;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}


.hidden {
	transition-duration:0.3s;
	display:none !important;
}

.windowTable .header {
	font-weight:bold;
}

.windowTable .cell {
	width:120px;
	display:inline-block;
}

.justify-right {
	text-align:right;
}

.justify-left {
	text-align:left;
}

.justify-center {
	text-align:center;
}

.paneView .cell {
	display:inline-block;
}

.paneView .fieldname {
	width:20%;
}

.paneView .fieldcontents {
	width:70%;
}

.paneView .fieldcontents img {
	width:70%;
}

.paneView .row {
	border-bottom:1px solid rgba(0,153,180,0.2);
	vertical-align:top;
}

.paneView .row img {
	margin-top:2px;
}

.paneView .row img[src='includes/pdf.svg'] {
	width:50px;
}

.selectedSums {
	position:fixed;
	background:rgba(255,255,255,0.7);
	width:20%;
	margin-left:40%;
	margin-right:40%;
	text-align:center;
	bottom:-5px;
	height:40px;
	border-radius:5px;
}

#cpErrorMessage {
	padding-top:5px;
}