@import "fonts.css";

:root {
	--default-margin: 1.6rem;
	--default-big-margin: 2rem;
	--default-foreground: #000000;
	--default-background: #f3f3f3;
	--dark-background: #aaaabb;
	--dark-foreground: #292b60;
	--light-background: #f0f0f0;
	--light-foreground: #303030;
	--box-shadow-dark: #666666;
	--box-shadow-light: #bbbbbb;

	--dark-mode-foreground: #b8b6bd;
	--dark-mode-background: #1a162d;
}

::selection {
	background: #292b60;
	color: #ffffff;
}

body {
    width: 100%;
    min-width: 310px;
    min-height: 300px;
    font-family: 'Work Sans', sans-serif;
    font-size: 110%;
    background-color: var(--default-background);
    color: var(--default-foreground);
}

label { color: #333; }
label.login-label { display: none; }

h1 i, h2 i, h3 i { margin-left: 0.5em; }

h1, h2, h3 { margin-bottom: 0.5rem; }


i { font-style: normal; }

hr { margin: 1rem 0; border: 1px solid #ccc; clear: both; }

p { line-height: 1.5; }

a, .heading-link { color: #0330aa; }
a.small-link { font-size: 80%; }

/****************************** Common ******************************/

.done { text-decoration: line-through; -webkit-text-decoration: line-through; }

.hidden, .onlyprint { display: none; }
.visible { display: inline; }

.error {
	background-color: #aa0000;
	color: #ffffff;
	padding: 1rem;
}

.warning {
	background-color: #ffd51e;
	color: #333333;
	padding: 1rem;
}

.confirmation {
	background-color: #009688;
	color: #eeeeee;
	padding: 1rem;
}

.error, .warning, .confirmation {
	clear: both;
	border-radius: 3px;
	font-weight: bold;
}

.text-only-hidden { display: none; }
.no-decoration { text-decoration: none; }
.no-wrap { white-space: nowrap; }
.center { text-align: center; }
.pull-right { float: right; }
.pull-left { float: left; }
.smaller-text { font-size: 80%; }
.bigger-text { font-size: 120%; }
.small-top-margin { margin-top: 1rem; padding-top: 0; }
.extra-top-margin { margin-top: var(--default-big-margin); }
.extra-bottom-padding { padding-bottom: 3.5rem; }
.no-bottom-margin { margin-bottom: 0; }
.no-top-margin { margin-top: 0; padding-top: 0; }
.no-right-margin { margin-right: 0; }
.bottom-last-margin { margin-bottom: 5rem; }
.extra-left-margin-text { margin-left: 0.5em; }
.extra-right-margin-text { margin-right: 0.5em; }
.extra-right-margin { margin-right: 0.8rem; }
.extra-space-before { padding-left: 0.6rem; }
.extra-space-after { padding-right: 0.6rem; }

.scrollable { overflow-x: auto; }

.wrapper { padding-left: 1rem; padding-right: 1rem; }

/****************************** Colors ******************************/

.blue { background-color: #292b60; }
*.blue, *.blue a { color: #f0f0f0; }

.green { background-color: #8ee045; }
.green, .green strong a { color: #133f00; }

.yellow { color: #333333; background-color: #ffd51e; }

.dark-green, .dark-green a { background-color: #009688; color: #eeeeee; }

.purple { color: #47146e; }

.black { background-color: #222222; color: #ffffff; }

.light { background-color: var(--light-background); }

.dark { background-color: var(--dark-background); }
*.dark, *.dark a { color: #292b60; }
*.dark a.green-button { color: #133f00; }
*.dark a.dark-green-button { color: #eeeeee; }
*.dark a.blue-button { color: #ffffff; }

/****************************** Tables ******************************/

.parts-list, .parts-list-narrow { margin-bottom: 1rem; }

.parts-list { display: none; }

.search-list { margin-bottom: 6rem; }

table { width: 100%; box-sizing: content-box; }

table.table-full td { padding-top: 0.8rem; padding-bottom: 0.8rem; }

.table-recent { font-size: 85%; }

.table-narrow { font-size: 95%; }

table.table-admin-config td { padding-top: 1rem; padding-bottom: 1rem; }

a.sort-tr-link { text-decoration: none; display: inline-block; vertical-align: middle; }

th { text-align: left; vertical-align: middle; padding: 0.4rem 0.6rem; font-weight: bold; }

th.center, td.center { text-align: center; }

tr:nth-of-type(even) { background-color: #eaeaea; }

tr:target, tr:nth-of-type(even):target,
tr:target .description, tr:target .desc, tr:target .date-td, tr:target a {
	background-color: var(--dark-background);
	color: #030a20;
}

span.sort-link-narrow {
	display: inline-block;
	font-size: 90%;
	margin: 0.1rem 0.4rem 0 0;
}

td.fit-width, th.fit-width { width: 1%; white-space: nowrap; }
td.stretch-td, th.stretch-td { width: 99%; }

td { padding: 0.4rem 0.6rem; }

td a { text-decoration: none; }

td.right { text-align: right; }

span.date-td { font-size: 90%; color: #555; }
span.time { color: #777; font-size: 90%; }
span.description, span.desc { font-size: 85%; color: #777; }
span.tags-icon-td a { margin-right: 0.6rem; margin-top: 0.1rem; }
/*span.tags-icon-td,*/ td.edit-td { font-size: 100%; }

/****************************** Buttons ******************************/

button:focus { background-color: #0330aa; color: #ffffff; }

.btn {
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	padding: 0.8rem 1rem;
	border: 0;
	font-size: 1rem;
	padding: 0.9rem 1.4rem;
}

button.button-stretch { padding-left: 2.4rem; padding-right: 2.4rem; }

.green-button { background-color: #8ee045; color: #133f00; }
.dark-green-button { background-color: #009688; color: #eeeeee; }
.blue-button { background-color: #292b60; color: #ffffff; }
.purple-button { background-color: #47146e; color: #ffffff; }
.dark-button { background-color: #cccccc; color: #000000; }
.yellow-button { background-color: #ffd51e; color: #000000; }
.red-button { background-color: #aa0000; color: #ffffff; }
.black-button { background-color: #222222; color: #ffffff; }

.right-button { float: right; }

.form-button { margin: 0.4rem 0 1.1rem 0; }

/****************************** Header *******************************/
  
header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 0;
	margin-top: 0.7rem;
	padding: 0.7rem 0;
	background: 0;
}

header .logo-text, header #home-button, header .header-button {
	font-size: 1.5rem;
	/*font-family: sans-serif;*/
	font-weight: bold;
	text-decoration: none;
	color: var(--light-foreground);
}

p.logo-text { max-width: 300px; }

#home-button, .header-button {
	font-size: 1.7rem;		
	margin-right: 0.5rem;
	display: none;
}

header div p { margin: 0; }

header div p #menu-button {
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

header div p span#menu-button span,
span#menu-button span {
	/*vertical-align: middle;*/
	padding-bottom: 0.4rem;
	/*display: inline-block;*/
}

#menu-button {
	color: #f0f0f0;
	text-decoration: none;
	font-size: 150%;
	vertical-align: top;
	background-color: var(--light-foreground);
	padding: 0.3rem 0.6rem 0.2rem 0.6rem;
	-webkit-box-shadow: -3px 7px 16px -2px #444;
	box-shadow: -3px 7px 16px -2px #444;
	border-radius: 3px;
	cursor: pointer;
}

span#menu-button span {
	vertical-align: middle;
	display: none;
	font-size: 80%;
}

/******************************** Menu *******************************/

#menu {
	height: auto;
	min-height: 2500px;
	width: 0;
	position: fixed;
	z-index: 200;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.07s ease-in-out;
	padding-top: 3.0rem;
	font-size: 1.1rem;
	border: 0;
}

#menu a { text-decoration: none; }

#menu li {
	line-height: 2.2em;
	list-style-type: none;
	min-width: 200px;
}

#menu .btn {
	width: 88%;
	margin-top: 1.0em;
	padding: 0.4rem;
	font-size: 110%;
}

#menu #close-menu-button {
	position: absolute;
	top: var(--default-margin);
	right: var(--default-margin);
	font-size: 1.7rem;
}

#menu.light #close-menu-button i {
	color: var(--foreground-light);
}

#menu #close-menu-link {
	position: fixed;
	bottom: var(--default-margin);
	right: var(--default-margin);
	z-index: 210;
	visibility: hidden;
}

#menu a#close-menu-link {
	font-weight: bold;
}

#menu.dark {
	-webkit-box-shadow: 0 5px 10px var(--box-shadow-dark);
	box-shadow: 0 5px 10px var(--box-shadow-dark);  
}

#menu .logo-image {
	position: absolute;
	top: 1rem;
	left: var(--default-margin);
	height: 42px;
}

.add-button-fixed {
	position: fixed;
	right: 6.5rem;
	/*right: 50%;*/
	bottom: 0.8rem;
	z-index: 50;
}

.add-button img { width: 2.5rem; }
.add-button-fixed img { width: 3.5rem; }

#menu-diamond {
	position: fixed;
	right: 1.4rem;
	top: 1.4rem;
	width: 53px;
	height: 65px;
	min-height: 65px;
	border-radius: 3px;
	cursor: pointer;
	background: linear-gradient(to bottom, #47146e 0 20%, #4a4c82 20% 40%, #292b60 40% 60%, #f0f0f0 60% 100%);
	-webkit-box-shadow: -3px 7px 16px -2px #444;
	box-shadow: -3px 7px 16px -2px #444;
	transition: all linear 0.15s;
	text-align: center;
	z-index: 120;
	display: block;
}

#menu-diamond.menu-diamond-visible {
	opacity: 1;
	visibility: visible;
}

#menu-diamond.menu-diamond-hidden {
	opacity: 0;
	cursor: default;
	visibility: hidden;
}

#menu-diamond #menu-diamond-text {
	position: absolute;
	bottom: 6px;
	left: 8px;
	right: 8px;
	font-size: 0.8rem;
	text-align: center;
	font-weight: bold;
	color: #222222;
}
#menu-diamond-text::before {
	content: "meny";
}

/****************************** Forms ********************************/

input, textarea {
	border: 1px solid #bbb;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #f1f1f1;
	z-index: 100;
}

input { padding: 0.8em 0.6em; }

textarea { padding: 0.6em 0.4em; }

input.text-input, textarea.textarea-input,
textarea.textarea-full-width, input.text-input-short {
	width: 100%;
	display: block;
}

input.text-input, textarea.textarea-input, p.submit-input,
p.constrain-width, div.constrain-width, form.constrain-width,
hr.constrain-width, td.constrain-width {
	max-width: 650px;
}

input.text-input-short, p.submit-input-short { max-width: 370px; }

input.text-input-td {
	width: 100%;
	display: block;
	max-width: 650px;
}

::placeholder { color: #292b60; opacity: 0.5; }

textarea#addmany-parts { font-family: monospace; font-size: 120%; }

/****************************** Search ********************************/

#s { box-sizing: border-box; font-size: 110%; }

#s.input-full {
	position: relative;
	width: 100%;
	border-radius: 2px;
	border: 4px solid #cccccc;
}

#s.input-full-top {
	width: 50%;
	position: fixed;
	top: 0.7rem;
	left: 0.7rem;
	border-radius: 2px;
	border: 4px solid #cccccc;
	/*transition: 0.16s ease-in-out;*/
}

#s.input-full:focus { border: 4px solid #333333; outline: none; }
#s.input-full-top:focus { border: 4px solid #292b60; outline: none; }

#s-icon.icon-hidden {
	display: none;
}

#s-icon.icon-visible {
	position: fixed;
	top: 1.8rem;
	left: 55%;
}

.search-btn-group { padding-top: 0.4rem; }

.search-button span { display: none; }

.delete-button, .delete-button-relative, .duplicate-button, .duplicate-button-relative {
	cursor: pointer;
	text-align: center;
}

.delete-button-relative, .duplicate-button-relative {
	margin-bottom: 0.8rem;
}

.delete-button-relative span, .duplicate-button-relative span {
	display: none;
}

.delete-button {
	position: fixed;
	left: 5.8rem;
	bottom: 1.4rem;
	-webkit-box-shadow: -3px 7px 16px -2px #444;
	box-shadow: -3px 7px 16px -2px #444;
}

.duplicate-button {
	position: fixed;
	left: 1.4rem;
	bottom: 1.4rem;
	-webkit-box-shadow: -3px 7px 16px -2px #444;
	box-shadow: -3px 7px 16px -2px #444;
}

.duplicate-button-relative {
	margin-right: 0.8rem;
}

#go-to-top {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	cursor: pointer;
	-webkit-box-shadow: -3px 7px 16px -2px #444;
	box-shadow: -3px 7px 16px -2px #444;
	border-radius: 3px;
	width: 18px;
	height: 18px;
	padding: 9px 13px 16px 13px;
	background-color: var(--light-foreground);
	text-decoration: none;
	color: #f0f0f0;
	vertical-align: middle;
	font-size: 150%;
	transition: all linear 0.15s;
	z-index: 30;
}

#go-to-top.go-to-top-visible {
	opacity: 1;
	visibility: visible;
}

#go-to-top.go-to-top-hidden {
	opacity: 0;
	cursor: default;
	visibility: hidden;
}

a.tag {
	background-color: #cccccc;
	color: #000000;
	padding: 0.2rem 0.4rem 0.1rem 0.4rem;
	margin: 0 0 0.6rem 0.6rem;
	border-radius: 2px;
	text-decoration: none;
	display: inline-block;
}
a.tag i { font-size: 80%; color: #000; margin-left: 0.4rem; }
a.tag span { white-space: nowrap; opacity: 0.8; }

.nohits-image {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
}
.nohits-image i {
	font-size: 1000%;
	opacity: 0.02;
}

/*************************** Modules ***************************/

.loginform {
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
}

.loginform p { padding-bottom: 0.5rem; }

.loginform input.text-input {
	width: 100%;
	max-width: 500px;
	font-size: 120%;
	padding-left: 1rem;
	padding-right: 0rem;
	margin-bottom: 0;
	box-sizing: border-box;
}

.fixed-message {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	margin: 0;
	background-color: var(--dark-background);
	padding: 1.7rem 2.2rem 1.7rem 1.7rem;
	border-radius: 3px;
	z-index: 200;
	display: block;
}

.fixed-message .message-close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	cursor: pointer;
}

.site-message {
	max-width: 550px;
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding: 1.5rem;
	-webkit-box-shadow: -3px 7px 16px -2px #999;
	box-shadow: -3px 7px 16px -2px #999;
	border-radius: 3px;
}

.site-message-edit { font-size: 120%; margin: 0 0 1rem 1rem; }

.site-message-body { line-height: 1.3; }

.site-message-body ul,
.site-message-body ol,
.site-message-body li,
.site-message-body br { 
	margin: 0; 
}

.site-message-body h1,
.site-message-body h2,
.site-message-body h3,
.site-message-body h4,
.site-message-body h5,
.site-message-body h6 {
	margin-top: 1rem;
	margin-bottom: 0;
	padding: 0;
}

#overview-recent { max-width: 600px; }

/*************************** Media Queries ***************************/

@media only screen and (min-width: 390px) {
	.add-button-fixed {
		position: fixed;
		right: 48%;
		left: 46%;
		bottom: 0.8rem;
	}
}

@media only screen and (min-width: 500px) {
	span.sort-link-narrow { /*font-size: 100%;*/ margin-left: 0.5rem; }
	#s-icon.icon-visible { left: 54%; }
}

@media only screen and (min-width: 630px) {
	.search-button span { display: inline; }
	span#menu-button span { display: inline-block; }

	#home-button, .header-button { display: inline-block; margin-top: 0.1rem; }
	p.logo-text { max-width: 600px; }
}

@media only screen and (min-width: 750px) {

	.table-narrow { display: none; }

	.parts-list-narrow { display: none; }

	.parts-list { display: block; width: 100%; }

	button.delete-button { left: 10.6rem; }

	.delete-button-relative span, .duplicate-button-relative span {
		display: inline;
	}

	.add-button-fixed {
		right: 49%;
		left: 49%;
	}

	#s-icon.icon-visible { left: 53%; }
}

@media only screen and (min-width: 1100px) {
	#s-icon.icon-visible { left: 52%; }
}

@media only screen and (min-width: 1700px) {
	
	.wrapper { margin: 0 auto; max-width: 1860px; }

	header { padding-top: 1.2rem; }

	body { font-size: 140%; }

	a.logo-text { font-size: 2rem; }

	header #home-button, header .header-button { font-size: 2.1rem; }

	p.constrain-width, div.constrain-width, form.constrain-width,
	hr.constrain-width, td.constrain-width, input.text-input,
	textarea.textarea-input, p.submit-input {
		max-width: 1000px;
	}

	input.text-input-short, p.submit-input-short {
		max-width: 650px;
	}

	.btn { font-size: 120%; }

	button.delete-button { left: 12rem; font-size: 90%; }
	button.duplicate-button { font-size: 90%; }

	.add-button-fixed img { width: 4rem; }

	#menu-diamond {
		right: 1.7rem;
		bottom: 1.7rem;
		width: 100px;
		height: 120px;
		min-height: 120px;
		border-radius: 5px;
	}
	#menu-diamond #menu-diamond-text {
		bottom: 11px;
		left: 14px;
		right: 16px;
		font-size: 1.5rem;
	}

	#menu { font-size: 90%; }

	#go-to-top {
		width: 35px;
		height: 35px;
		padding: 15px 12px 15px 22px;
		font-size: 150%;
	}

	.site-message {
		margin-top: 3rem;
		margin-bottom: 3rem;
		padding: 1rem 1.5rem;
	}

	.site-message { max-width: 850px; }
	#overview-recent { max-width: 900px; }

	#s-icon.icon-visible { top: 2.1rem; }
}

@media only print {
	.onlyprint { display: block; }

	.noprint, #menu, #menu-diamond.menu-diamond-visible,
	#menu-diamond.menu-diamond-hidden,
	.parts-list-narrow, a.sort-tr-link i,
	.delete-button, .add-button, .add-button-fixed,
	.duplicate-button, #s, .search-btn-group,
	span.tags-icon-td, #s-dummy, .header-button, #menu-button {
		display: none;
	}

	body { background-color: #ffffff; }

	a { color: #000000; text-decoration: none; }

	hr { border: 3px solid #aaa; background-color: #aaa; }

	.page-break { page-break-before: always; }

	.parts-list, .date { display: block; }
	.logo-text { font-weight: bold; } 
}

/***************************** Dark mode *****************************/

body.dark-mode,
.dark-mode .logo-text,
.dark-mode input,
.dark-mode textarea,
.dark-mode ::placeholder,
.dark-mode #home-button, .dark-mode .header-button {
	color: var(--dark-mode-foreground);
	background-color: var(--dark-mode-background);
}

.dark-mode .nohits-image i {
	opacity: 0.05;
}

.dark-mode ::selection { background: #6974cb; }

.dark-mode button:focus { background-color: #6974cb; color: #ffffff; }

.dark-mode a { color: #6974cb; }
.dark-mode #menu a { color: #292b60; }
.dark-mode #menu a.blue-button { color: #ffffff; }

.dark-mode #s.input-full,
.dark-mode #s.input-full-top {
	border: 4px solid #b8b6bd; outline: none;
}
.dark-mode #s.input-full:focus,
.dark-mode #s.input-full-top:focus {
	border: 4px solid #b53ea1; outline: none;
}

.dark-mode a.tag {
	background-color: var(--dark-mode-foreground);
	color: var(--dark-mode-background);
}

.dark-mode .delete-button,
.dark-mode .duplicate-button,
.dark-mode #menu, 
.dark-mode #menu-diamond,
.dark-mode #go-to-top,
.dark-mode .site-message {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.dark-mode #menu-button,
.dark-mode #go-to-top,
.dark-mode .dark-button,
.dark-mode .black-button,
.dark-mode .duplicate-button,
.dark-mode .fixed-message {
	color: var(--dark-mode-background);
	background-color: var(--dark-mode-foreground);
}

.dark-mode .blue-button strong { color: #cacaca; }
.dark-mode .blue-button i { color: var(--dark-mode-foreground); }

.dark-mode .black-button strong { color: var(--dark-mode-background); }

.dark-mode #menu-diamond {
	background: linear-gradient(to bottom, #47146e 0 20%, #4a4c82 20% 40%, #292b60 40% 60%, #b8b6bd 60% 100%);
}

.dark-mode .purple-button,
.dark-mode hr,
.dark-mode label,
.dark-mode .date-td,
.dark-mode .description strong,
.dark-mode .desc strong,
.dark-mode .description,
.dark-mode .desc {
	color: var(--dark-mode-foreground);
}

.dark-mode .site-message a { color: #0330aa; }

.dark-mode .confirmation,
.dark-mode .dark-green,
.dark-mode .dark-green a { 
	background-color: #0a8090; color: #eeeeee;
}

.dark-mode input,
.dark-mode textarea {
	border: 1px solid #b8b6bd;
	background-color: #26203f;
}

.dark-mode tr:nth-of-type(even) { background-color: #26203f; }

tr:target, tr:nth-of-type(even):target,
tr:target .description, tr:target .desc, tr:target .date-td, tr:target a,
tr:target .description strong, tr:target .desc strong {
	background-color: var(--dark-mode-foreground);
	color: var(--dark-mode-background);
}