/*
/ main.css
*/

:root {
	--theme-color-a: rgba(125,163,20,1);
	--theme-color-a-05: rgba(125,163,20,0.5);
	--theme-color-a-02: rgba(125,163,20,0.2);
	--theme-color-a-01: rgba(125,163,20,0.1);
	--theme-highlight: red;

	--mdc-theme-primary: rgba(125,163,20,1);
}

/* theme styles */

.highlight-fg { color:var(--theme-highlight); }
.highlight-bg { background-color:var(--theme-highlight); }

.error-fg { color:var(--mdc-theme-error) !important; }
.error-bg { background-color:var(--mdc-theme-error) !important; color:white !important; }
.error-bg a { color:black; }

.warning-fg { color:orange !important; }
.warning-bg { background-color:orange !important; color:white !important; }
.warning-bg a { color:black; }

.success-fg { color:var(--theme-color-a) !important; }
.success-bg { background-color:var(--theme-color-a) !important; color:white !important; }
.success-be  a { color:black; }

/* base styles */

* { font-family:Arial,Sans; }
body { background-color:#EEEEEE; padding:0px; margin:0px; }
a { color: var(--theme-color-a); }

.overlay { display:none; position:fixed; top:0px; left:0px; height:100%; width:100%; background:rgba(0,0,0,0.2); z-index:9000; }
#loading { text-align:center; }
#loading * { margin-top:33%; }

#header { position:fixed; top:0px; left:0px; padding:10px; width:calc(100% - 20px); background-color:#FFFFFF; z-index:1000; }
#content { }
#footer { width:calc(100% - 100px); padding:50px; background-color:#555555; }
#footer * { color:white; }

#menu .menu { float:right; background-color:white; padding:10px; }
.menuitem { text-decoration:none; color:black; font-size:14pt; padding:10px; }
.menuitem:hover { background-color:var(--theme-color-a-05); }
.menuitem.active { color:var(--theme-highlight); }
.menuitem-sub { display:none !important; }

#menu_sub { display:none; position:fixed; top:60px; left:0px; padding:10px; width:calc(100% - 20px); background-color:var(--theme-color-a); z-index:500; }
#menu_sub .menuitem-sub { display:inline !important; color:white; padding:5px; margin-left:5px; margin-right:5px; }
#menu_sub .menuitem-sub:hover { background-color:transparent; }
#menu_sub .menuitem-sub.active { color:black; }
.menu-sub {}

.menu-overview .menuitem-sub { display:inline-block !important; width:33%; font-size:14pt; text-align:center; vertical-align:middle; background-color:#EEEEEE; border:1px solid var(--theme-color-a); margin-right:10px; margin-bottom:10px; padding-top:20px; padding-bottom:20px; }
.menu-overview .menuitem-sub:hover { background-color:var(--theme-color-a-05); }

.pagebutton { }

#title { text-decoration:none; color:black; margin:6px; font-size:18pt; max-width:50%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:30px; vertical-align:middle; }

#sidebar { display:none; background-color:white; padding:10px; position:fixed; top:0px; left:0px; width:70%; z-index:900; }
#sidebar .menu { width:100%; }
#sidebar .menuitem { display:block; }
#sidebar_toggle { display:none; }

.banner { width:100%; height:150px; background-color:#999999; }
#content[data-page="/home"] .banner { background-color:black; height:fit-content; padding:20px; width:calc(100% - 40px); }
#content[data-page="/home"] .banner img { height:100px; }

.content { padding:50px; }

.footeritem { text-decoration:none; color:black; font-size:12pt; padding:10px; }

.left-align { text-align:left; }
.center-align { text-align:center; }
.right-align { text-align:right; }

.left { float:left; }
.right { float:right; }
.clear { float:none; clear:both; }

.hidden { display:none; }
.block { display:block; }
.inline { display:inline; }
.inline-block { display:inline-block; }
.block-important { display:block !important; }
.inline-important { display:inline !important; }
.inline-block-important { display:inline-block !important; }

.blinking { animation:blinking 1s steps(10, start) infinite; }
@keyframes blinking { to { opacity:0.1; filter:alpha(opacity = 10); } }
.rotate { animation:rotate 1s steps(36, start) infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

form { margin-bottom:0px; }

/* additional styles */

.logged-in { display:none; }
.logged-out { display:none; }

.col1 { width:calc(100% - 4px); margin:2px; }
.col2 { width:calc(50% - 4px); margin:2px; }
.col3 { width:calc(33% - 4px); margin:2px; }
.col4 { width:calc(25% - 4px); margin:2px; }

.card { display:inline-block; background-color:white; text-align:left; margin-bottom:10px; padding:10px; }
/*.dialog { display:inline-block; background-color:var(--theme-color-a-02); text-align:left; margin-bottom:10px; padding:10px; }*/
.card-title { padding:10px; font-size:14pt; }
.card-text { padding:10px; }
.card-content { padding:10px; }
.card input { display:block; margin-top:5px; }
.card-hidden { display:none; }
.card > h1 { padding:10px; padding-top:0px; padding-bottom:0px; color:var(--theme-color-a); display:inline-block; }
.card > .icon { width:50px; height:50px; display:inline-block; float:right; margin:15px; }

.pwa-button { cursor:pointer; }
.pwa-message-installed { color:var(--theme-color-a); font-size:18pt; }
.pwa-message-install { color:orange; font-size:18pt; }

.option { border:1px solid lightgrey; border-radius:5px; color:black; margin:5px; }
.option:not(.disabled) { cursor:pointer; }
.option:not(.disabled):hover { background-color:var(--theme-color-a-02); }
.option.disabled { color:grey; }
.option.selected { background-color:var(--theme-color-a-05); }
.option-inner { padding:15px; }

.api-loading { display:none; }
.api-error { display:none; }
.api-success { display:none; }

/* application specific styles */

.signature { background-color:var(--theme-color-a-02); color:var(--theme-color-a-01); border-bottom:3px solid var(--theme-color-a); }

.testresult.positive { color:var(--mdc-theme-error) !important; }
.testresult.negative { color:var(--theme-color-a) !important; }
.testresult.invalid { color:orange !important; }
.testresult.positive::before { content:"Positiv"; }
.testresult.negative::before { content:"Negativ"; }
.testresult.invalid::before { content:"Ungueltig"; }

.category-button { white-space:pre-wrap; height:70px; display:inline; float:left; }
#category_title { }
#category_description { white-space:pre-line; }

body[data-page="/home"] #header .pagebutton.btn-back { display:none; }

#report_text { white-space:pre-line; }
#report_category { font-size:9pt; }
#uploads a { text-decoration:none; }

.message-sender { font-size:9pt; }
.message-box.left-align .message { background-color:#e7e7e7; }
.message-box.right-align .message { background-color:#d8e3b9; }
.message-date { font-size:9pt; text-align:right; }

.report-list-box { position:relative; }
.report-list-box:hover { background-color:#f7f7f7; cursor:pointer; }
.report-list-subject { font-weight:bold; }
.report-list-category { font-size:9pt; }
.report-list-date { font-size:9pt; }
.report-list-status { font-weight:bold; position: absolute; top:10px; right:10px; }
.report-list-status[data-status=new] { color:blue; }
.report-list-status[data-status=check] { color:orange; }
.report-list-status[data-status=wait] { color:gray; }
.report-list-status[data-status=closed] { color:green; }

.report-status-title { position:relative; }

.warning-bg .card-content { overflow:hidden; text-overflow:ellipsis; }

/* responsive styles */

@media screen and (min-width:951px) {
	.mobile { display:none; }
	#sidebar { display:none !important; }
	.responsive-show { display:none; }
}

@media screen and (max-width:950px) {
	.no-mobile { display:none; }
	#title { font-size:4vw; max-width:100%; font-weight:bold; }
	#menu { display:none !important; }
	#sidebar_toggle { display:inline; }
	.col1 { width:100%; margin-left:0px; margin-right:0px; }
	.col2 { width:100%; margin-left:0px; margin-right:0px; }
	.col3 { width:100%; margin-left:0px; margin-right:0px; }
	.col4 { width:100%; margin-left:0px; margin-right:0px; }
	.menu-overview .menuitem-sub { width:calc(100% - 20px); }
	.content { padding:20px; }

	.message-box .col2 { width:80%; }

	.responsive-hide { display:none; }
	table.responsive { width:100%; }
	table.responsive thead { display:none; }
	table.responsive tbody > tr > td { display:block; width:100%; padding:5px; border-bottom:none; }
	table.responsive tbody > tr > td:last-child { display:block; width:100%; padding:5px; border-bottom:1px solid grey; }
	table.responsive tbody > tr:last-child > td:last-child { border-bottom:none; }
	table.responsive tbody > tr:last-child > td { }
}