/*///////////////////////////////////////////////////
///////////// Styles for THE SYSTEM /////////////////
////////// (c) Jan Mirus 2020   /////////////////////
///// Set your own custom colors in "settings"  /////
///////////////////////////////////////////////////*/

/******* Colors and shadows, either user settings from db or default values  *******/
:root {
	--dark:     rgba(55,75,65,1); 					/* bg for header, control elems */
	--subtle:	rgba(198,215,205,1);                /* background for containers */
	--contrast: rgba(100,150,120,1);			/* text color for comments - needs to work on dark and on light */
	--bleak: 	rgba(100,100,100,1);
	--info:     rgba(255,255,180,.9);/* modals, message box */
	--highlight:rgba(255,255,0,.3); 	/* highlight table cells etc. */
    --softlight:rgba(180,255,120,.2); 	/* soft-highlight table cells etc. */
	--light: 	white;
	--paper:    rgba(255,255,240,1); 	/* Input elements */
	--table:    rgba(236,236,236,1); 	/* Table cell bg */
	--uh:red;						/* text color for warnings */
	--hm:yellow;					/* button mouseover text */
	--go:green;						/* text color when there's a go */
	--tableover:rgba(55,75,65,0.1);
    
    --shadow_subtle: 1px   2px 2px  0 rgba(0,0,0,0.2);
    --shadow_strong: 1px   2px 5px  0 rgba(0,0,0,0.5); 
    --shadow_deep:   1.5px 3px 5px  0 rgba(0,0,0,.45);
    --shadow_soft:   1.5px 3px 10px 0 rgba(0,0,0,0.6);
    --shadow_inset: inset 1px 1px 4px 0px rgba(107,107,107,1)             
}


/******* General *******/ 

*, *:before, *:after  { box-sizing: border-box; vertical-align:top; font-family: 'Overpass', Arial, sans-serif; }
html, body { height: 100%; font-family:'Overpass', Arial, sans-serif; font-size:95%; margin:0; vertical-align:top; }
body { position:relative; min-height:100%; }
a {	text-decoration: none; }
span { padding:0 }

/*** basic formats for fonts and backgrounds.  ***/

h1 		{ font-size:36px;  }
h2 		{ font-size:28px; font-weight:800; margin:8px 0; }
h3 		{ font-size:18px; margin:6px 0 3px 0; }
h4		{ font-size:15px; }
.tiny 	{ font-size:12px; color: var(--light); }
.subtle, .subtle a { font-size:10px; color:var(--gray); }

fieldset { display: inline-block; max-width: 100%; }
fieldset.half 		{ width: 47%; }
fieldset.overview 	{ width: 30%; }

.comment, .comment a, td:before  { color:var(--contrast); font-weight:lighter; font-size:11px; font-style:italic; display:block; }

.uh 	{ color:var(--uh); 	font-weight:bold;  }
.hm 	{ color:var(--hm); font-weight:normal;	font-size: 15px; }
.go 	{ color:var(--go);	font-weight:bold; }

header, footer 		{ color:var(--light); background:var(--dark); }
header a, footer a  { color:var(--light); }

.uoh 	   { background:var(--hm); }
.info 	   { background:var(--info);	box-shadow:var(--shadow_deep); }
.highlight { background:var(--highlight) !important; }
.softlight { background:var(--softlight) !important; }
.negative .msg, .negative a { color:var(--light); }
.negative a { text-decoration:underline; }

th 		  { font-size: 12px }
table, tr {	font-size: 14px }

@media (max-width: 550px) { h1 { font-size:30px; } } /* Mobile */

/****** Header ******/
.full 	{ display:flex; justify-content:space-between; width:100%; padding: 7px; margin: 0 0 15px 0; } 
footer { display:block; position:fixed; height:16px; text-align:center; left:0; right:0; font-size:58%; font-weight:lighter; bottom:0; }
.headerblock { display:flex; flex-wrap:nowrap; } /* blocks within header next to each other */
#badge	{ display:block; text-align:center; float:left; margin-right:15px; } /* holds logo */
#badge * { display:block; }
#badge img { height:44px; margin-right:12px; }
.headerblock p { margin:0 5px 0 0; }

nav 	 { display:inline-block; text-align:left; }
.navline { display:flex; flex-wrap:wrap; } /* row of navigation items */
nav img, header img { height:50px; width:auto; }
.navline a { margin-right:8px; }
nav a:hover { text-decoration:underline; }

.navmenu { display:flex; flex-wrap:nowrap; margin:2px 16px 2px 2px; padding:2px 2px 1px 6px; } /* row of nav items belonging to one menu */
.navmenu:not(.other) { border:1px solid white; }

.navmenu label { font-weight:800; margin-right:12px; }

#navline-mobile { display:none; }
#mobilenavbutton { display:none; cursor:pointer; }

#status { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; }
.statusblock { display:flex; justify-content:flex-end; flex-wrap:nowrap; } /* child of #status */ 
.statusblock > * { display:inline-block; margin-right:10px;}
.statusblock p { font-size:10px; white-space:nowrap; }
#mobilestatusbutton { display:none; }
#ajaxloader { width:40px; height:auto; opacity:0; }

@media (max-width: 550px) { /* Mobile */
	#badge img { margin:0;  }
   #badge img.minibadge { height: 0; }
	.navline { display:block; max-height:0; overflow:hidden; }
	.visible { display:block !important; max-height:350px; }
	.flex { display:flex !important; }
	.navline a { display:block; font-size:160%;  } 
	#navline-mobile { display:inline-block; }
   .navmenu { flex-wrap:wrap; }
   .ministatus { max-width: 0; }
	#status { flex-wrap:wrap; } 
	.statusblock:nth-child(2) { display:none; margin-top:20px; }
	#mobilenavbutton { display:inline-block; }
	#mobilestatusbutton { display:inline-block; right:0; }
   #badge img, .navline { transition: all 0.8s ease; }
} 


/****** Overview Page ********/

.overviewcontainer { display:flex; flex-wrap:wrap; justify-content:center; }
.menucontainer	{ display:flex; flex-wrap:wrap; justify-content:center; flex: 1 1 calc(14vw * var(--count)/2); height:15vw; margin:.5vw; background:var(--subtle); }
.menucontainer:not(.other) { padding-top:2.5vw; }
.menucontainer.other { background:none; }
.menucontainer h1 { position:absolute; margin-top:-2.1vw; color:var(--light); font-size:1.4vw; }
.overviewitem { height:5.4vw; margin:.3vw; padding:.7vw; background:var(--dark); color:var(--light); }
.overviewitem img {display:inline-block; width:auto; height:1.7vw; margin-right:.7vw; }
.overviewitem .name { font-size:.9vw; font-weight:800; }
.overviewitem .comment { color:var(--light); font-size:.5vw; }
.menucontainer.tools a, .menucontainer button { height:1.7vw; font-size: .9vw; }
.recentitem img { width:auto; height:3vw; }
.recentitem span img { height:1vw; width:auto; margin-left:.5vw; }
img.pin, img.pinned { position:relative; float:right; height:.8vw; width:auto; cursor:pointer; }
img.pin { filter: drop-shadow(1px 2px 2px rgba(0,0,0,.2)) }

.recentitem { margin-bottom:12px; }
.recentitem>div { background:rgba(255,0,0,.0) }
a .gallery.recent { color:black; }

@media (max-width: 550px) { /* Mobile */
   .menucontainer { flex-basis:100vw; height:auto; margin:2vw 0; }
   .menucontainer:not(.other) { padding-top:10vw; padding-bottom:1.5vw;}
   .menucontainer h1 { margin-top:-8vw; font-size:6.4vw; }
	.overviewitem { display:flex; justify-content:space-between; width:100%; height:auto; margin:1.5vw 2vw; padding:1.5vw; }
	.overviewitem .name { font-size:24px; }
   .overviewitem .comment { display:none; }
   .menucontainer.tools a, .menucontainer button { height:auto; font-size: 6vw; }
	.overviewitem img { height:40px; margin:6px 12px 6px 6px; }
   .recentitem a img { width:auto; height:15vw; } /* item preview (first 3 mapped images) */
   .recentitem span img { height:4vw; width:auto; margin-left:7px; } /* section icons */
}


/****** Interactive Elements ******/

#controls { display:flex; flex-wrap:wrap; max-width:100%; margin-bottom:15px; }
.control_el, .control_el tr { margin: 0 8px 8px 0; padding:12px; background:var(--dark); color:var(--light); }
.control_el img { float:left; width:40px; height:auto; margin-right:18px; fill:rgb(255,255,255); cursor:pointer; } /* visible control el icon */
.control_el.active>img , button.active img, button:hover img { filter: brightness(90%) sepia(100%) hue-rotate(10deg) saturate(1000%) } /* this is a hack to make a white icon yellow */
.control_el p { margin:0 0 5px 10px; white-space:nowrap; font-size:18px; font-weight:700; }
.control_max { display:none; max-width:100%; }
.control_head { margin-bottom:10px; }
.control_el .comment, .control_el label, .control_el p, .control_el h4, .overviewitem h3 { margin-left:10px; color:var(--light); }
.control_el table, .control_el tr, .control_el td, control_el table.input, .control_el .input td { background:none; border:none; }
.control_el table, .control_el tr, .control_el td {  }
.update .control_max { display:block; }


.tr_height input[type=text] { width: 200px; } /* when does this happen?? */
.msg_main input, .msg_main .input input[type=text], .msg_main input[type=text], .msg_main input[type=submit] { margin:10px 0; width:100%; text-align:center; font-size:20px; }
.gallery .toggleAllTRHeight { display:none; }

button, input[type=submit] { margin:3px; padding:5px; font-size:15px; border:0;	color:var(--light); background:rgba(0,0,0,.7);	line-height:1; cursor:pointer; box-shadow:var(--shadow_strong); }
table button, table input[type=submit] { padding:2px; font-size:11px; }
button:hover, input[type=submit]:hover 										  { color: var(--hm); }
button:disabled, input[type=submit]:disabled { background:rgb(150,150,150); box-shadow:none; cursor:default; }
button img, .control_el button img { width:auto; height:20px; margin:2px; }
input, select, textarea { margin:3px; border:none; background:var(--paper); box-shadow: var(--shadow_inset); font-size:14px; word-wrap:break-word; }
.dialog input[type=text] { width:100%; }
input.newtag, .tr_height input.newtag { margin:3px; width:108px; font-size:11px; }

div.shortie { display:inline-block;	margin:3px;	padding: 0px 2px; color:black; background: rgba(255,255,255,.9); font-weight: 300;	box-shadow: var(--shadow_subtle) }
span.remove 		{ color: gray; cursor: pointer; }
span.remove:hover 	{ color: red; }

.status { margin-right: 20px;	font-size: 10px; }
.status img { height: 40px;	width: auto; }

#msgbox { /* message box, not displayed unless called by js */
	position: fixed; overflow: auto; display: none;	width: 240px; height: auto;	max-height: 90vh; z-index: 100;
	bottom: 20px; right: 20px;	padding: 5px; font-size: 10px;	cursor: pointer; }
.msgbreak {	display: block;	width: 100%; }

select 		{ max-width: 120px; }
h2 select 	{ max-width: 500px; font-size:inherit; font-weight:inherit; }

.miniicon 	{ width: auto; height: 12px; margin: 2px; cursor: pointer; }
.mediumicon { width: auto; height: 24px; margin: 4px; cursor: pointer; }
.editbutton, .copybutton { visibility: hidden; } /* start edit mode */
.editbutton2 { display:none; } /*end edit mode */
td:hover .editbutton, td:hover .copybutton { visibility: visible; }

.nolink { pointer-events:none; cursor:pointer; } /* to deactivate links, e.g. in image > gallery view */

@media (max-width:550px) { /* Mobile */
	.control_el { max-width:100%; }
	.control_el img { margin:0; }
	.control_el p { white-space:normal; }
} 

@media (max-width:1024px) { /* Mobile and tablet */
	input[type=text], textarea { max-width:100%; }
	.editbutton { visibility:visible; float:right; margin-right:10px; }
	.overviewitem .name { font-size:24px; }
	.overviewitem img { height:40px; margin:6px 12px 6px 6px; }
} 


/******* Static dialogues *******/

.msg { position: relative; display:block; margin:30px auto; padding:5px 20px; box-shadow: var(--shadow_soft); }
.msg_main {	 width: 800px; max-width:100%;  }
.msg_full {  width: 96%; max-width:1860px; text-align:center;}


/******* Table layout *******/ 

table {	display:table; table-layout:fixed; max-width:100%; word-wrap:break-word; }
th, tr, .recentitem a { color:black; background:var(--table); border-collapse:collapse; vertical-align:top; text-align:left; padding:4px 8px; }
td[column=file] { padding:0; background:none; }
th, tr, td { border: 1px solid rgb(255,255,255); word-wrap: break-word; }
tr:hover { background:var(--tableover); }
table.input, .input th, .input td {	border:1px solid white; border-collapse:collapse; vertical-align:top; text-align:left; padding:6px; }
thead th { color: var(--light); background:var(--dark); cursor: pointer; } /* table head; pointer 'cause it's sortable */
table.detail { margin-bottom:40px; }

td.label { color: var(--light); background:var(--dark); font-weight: bold; }
.tr_height { display:inline-block; overflow: hidden;} 	/* div controlling table row height */
table:not(.detail) .tr_height { max-height:50px; }
table.images .tr_height { max-height: 110px; } 			/* a little more height for images */
.maxTR .tr_height, .images .max, table:not(.detail) .maxTR .tr_height, table.images.gallery .tr_height { max-height: 1000000px;} 		/* expanded table row */
.rotate90 { transform: rotate(90deg); } 			/* rotates by 90 degrees */
.nowrap { white-space: nowrap; }

img { width: 120px;	height: auto; }
.bigimg img { width: 180px; }
.inline img { width: auto; 	height: 80px; }
.modal img 	{ 								margin: 0 2px; }

div.lazy { width: 150px; height: 30px; background: yellow; }

.modal button, .modal img {	cursor: pointer; }
.thumb { width: 100px; height: auto; }
.percent { color:var(--light); font-weight:300; font-size:80%; font-style:italic; }
.total-amount { background:var(--dark); color:var(--light); }

/* main table in sectionview */
table.sectiontable { margin-bottom:30px; }
/*
th {
    position: relative;
}
th::before { content: ""; position: absolute; right: 0.5em; top: 50%; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; }
th.asc, th.desc { color:yellow; }
th.asc::before  { background-image: url('/system/img/down.svg'); }
th.desc::before { background-image: url('/system/img/up.svg'); }
*/

/* input table to save new items or update items */
.input input[type=text], textarea { width: 420px; }

/**** Gallery layout for tables: minimized tiles ****/
/* keep consistent with item preview for recent on main page */
.closeTile { display:none; margin-right:10px; font-size:28px; font-weight:bold; line-height:20px; cursor:pointer;}
table.gallery, .gallery tbody { border:none; border-collapse:collapse; }
.gallery tbody { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;  }
.gallery table, .gallery tr, .gallery td { border:none; padding:0; }
.gallery tr, .recentitem a { display:inline-block; box-shadow: var(--shadow_deep); position:relative; margin:5px; cursor:pointer; }
.gallery td { display:none; padding-left:10px; } /* in general, hide table cells ... */
.gallery td[column=id] { display:flex; }
.gallery td[column=id] .comment { line-height:22px; margin-right:4px; }
.gallery td[column=file], .gallery td[column=name], .gallery td[mapling_section="images"], .recentitem .name { display: block; padding-top:2px; font-size:.85vw; font-weight:700; } /* ... but show name/preview img and mapped imgs */
.gallery td[column=file] { padding-left:0; } /* No padding for preview image */
.gallery td[mapling_section="images"] .shortie { display:none; } /* in general, hide mapped images ... */
.gallery td[mapling_section="images"] .shortie:nth-child(-n+3) { display:inline-block; } /* ... but show first 3 */
.gallery td[mapling_section="images"] button, .gallery td[column=images] .remove, .gallery .toggleTRHeight { display:none; } /* hide all buttons */
table.gallery .tr_height { max-height:1000000px }
.gallery .shortie img { max-width:100px; max-height:100px; width:auto; height:auto; min-width:60px; min-height:60px; }
.gallery .bigimg img { width: 220px; box-shadow: 2px 2px 2px black; }
.galleryimg { height:485px; width:auto; margin:0 10px 10px 0; }

/**** Gallery layout or mobile table layout: maximized tile/tablerow ****/
.gallery tr.maxTR { display:flex; flex-wrap:wrap; width:30vw; margin-top:6px; }
.gallery tr.maxTR td { display:block; width:100%; cursor:default; border-bottom:1px solid white; }
.gallery tr.maxTR td:not(:nth-child(1)) { margin-top:1px; }
.gallery tr.maxTR td { display:block; } /* :not([column=file])*/
.gallery tr.maxTR td[column=id] { display:flex; justify-content:space-between; }
.gallery tr.maxTR td:not([column=id]):before { content: attr(label);  } /* Column label except for id */
.gallery tr.maxTR .bigimg img { width:100% }
.gallery tr.maxTR td[mapling_section="images"] .shortie { display:inline-block; max-width:130px; maxheight:130px;} /* show all mapped images, not only first 3 */
.gallery tr.maxTR td[mapling_section="images"] button, tr.maxTR td[mapling_section="images"] .remove { display:inline-block; } /* bring controls back */
.gallery tr.maxTR .closeTile { display:block; }

/**** Reduced table layout for tablet & mobile ***/
@media (max-width: 1024px) {
    table, tbody { width:100vw; }
    tr { width:100%; }
    th, td	{ display:none; } /* hide all columns ... */
    table:not(.gallery) td[column=id], td[column=file], td[column=name] { display:table-cell; } /* ... but id & name/preview */
    form.input th, form.input td { display:table-cell; } /* ... except for the input form. */
    td[column=id] { width:10%; }
	.toggleTRHeight { display:none; }
	.tr_height, .images .tr_height { max-height:1000000px; }
	.cellcontent { display:inline-block; }
    
    /* basically, repeat here most styles of .gallery tr.maxTR */
    tr.maxTR, .gallery tr.maxTR { width:100vw; }
    tr.maxTR td { display:block; cursor:default; border-bottom:1px solid white; }
    tr.maxTR td:not([column=id]):before { content: attr(label);  } /* Column label except for id */
    td[column=file] { width:80px; }
    table:not(.gallery) .bigimg img { max-width: 80px; max-height:80px; width:auto; height:auto; }
    tr.maxTR .closeTile { display:block; }
    
    .gallery tr { width:32vw; margin:0 0 2vw 0; }
    .gallery .bigimg img { width:32vw; }
    .gallery .shortie img { width:100%; height:auto; }
	
	/* main tables in sectionview */
	table.sectiontable, .sectiontable th, .sectiontable tr, .sectiontable td { border: none; }
	table.sectiontable, .sectiontable th { background:none; }
	.sectiontable thead	{ display:none; }
    
    /*
    .gallery.sectiontable td:nth-child(2) { width:100%; margin: 0; padding-top:3px; }
    .gallery td[column=images] { margin:0; padding:0; }
    .gallery div.shortie { padding:0; }
    .gallery img.editbutton { display:none; }
    */
    	
	/* detail table in itemview */
	table.detail, .detail th, .detail tr, .detail td { border: none; }
	table.detail, .detail th, .detail tr { background:none; }
	.detail td { background:var(--table); width:100%; padding:5px; }
	.detail td:nth-child(1) { display:none; }
	.detail td:before { content: attr(label);  } /* Since table headers are not displayed, we show the label this way */
	
	/* input table to save new items or update items */
	.input td { padding:0; }
	.input input[type=text], input[type=text], textarea { width:100%; }
	.input td:nth-child(1) { display:block; width:100%; padding:0; font-weight:lighter; font-size:11px; font-style:italic; /* same as .comment */ }
	.input td:nth-child(3) { display:none; } /* "Drag corner to change size" etc. */ 
	
	/* mapping table */ 
	.mapping thead { }
	.mapping td:nth-child(2) { width:80px; background:none; } /* id */
	
	/* Gallery */
	.galleryimg { width:46%; height:auto; }
} 


/******** Tiles **********/
.tile {	position:relative; display:inline-block; width:auto; height:auto; margin:10px;	padding:0 5px 5px 5px;	background:var(--dark); color:var(--light); box-shadow:var(--shadow_deep); }
.tile.meep { border:3px solid yellow; }
.more, .none, .gallery .none, .gallery tr.none { display:none; }

.containercontainer {
	position: relative; display: block;
	width: 95vw;
	max-width: 1400px;
	margin:30px auto;
	background:var(--info);
	text-align:center;
	font-size: 120%; 
}
.container {
	position:relative; 
	display:inline-block;
	text-align:left;
	width:100%;
	vertical-align:top;
}
.margin { margin-left:15px; }
.box { position:relative; display:inline-block; background:none; width:24%; vertical-align:top; text-align:center;	padding:8px; }
.box textarea { width:100%; }
.conditional { display:none; background:none; }
.boxinbox { position:relative; width:100%; }
.mouseover { display:none; }
.interview:hover .mouseover { display:block; }
.sep_horiz { display:block; margin: 5px 5px; width:auto; height:0; border:1px solid white; }


/* The Modal (background) */
.modal {
	display: none; 						/* Hidden by default */
	position: fixed; 					/* Stay in place */
	z-index: 100; 						/* Sit on top */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%; 						/* Full width */
	height: 100%; 						/* Full height */
	overflow: auto; 					/* Enable scroll if needed */
	background-color: rgb(0,0,0); 		/* Fallback color */
	background-color: rgba(0,0,0,.5);
}
.dialog {
	top:10%;
    left:50%;
    transform: translate(-50%, 0);
	padding: 5px;
	width: auto;
	max-width: 600px;
}
.dialog.dynamic { max-width: 90vw; }
.close 		{ float: right;   color: var(--light); font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover, .close:focus 	{ color: var(--hm); text-decoration: none; }

.dialog_head { padding: 2px 16px; background:var(--dark); color: var(--light); }
.dialog_body { padding: 10px 16px; }

/* make thing DRAGGABLE */
.draggable { position: absolute; }
.handle { cursor: move; }

#recentmappings { display:none; }

/* mobile / small screen styles */
@media (min-width: 1450px)                       { } /* Large DT */
@media (min-width: 950px) and (max-width: 1450px){ } /* Desktop */ 
@media (min-width: 550px) and (max-width: 950px) { } /* Tablet */ 
@media (max-width: 550px)                        { .desktop, .control_el desktop { display:none; } } /* Mobile */


/* print styles */
@media print {
header { display: none !important; } 
}