@font-face {
	font-family: Jellee;
	src: url(../fonts/Jellee-Roman.otf);
	src: url(../fonts/Jellee-Roman.ttf);
}

@font-face {
	font-family: cc1;
	src: url(../fonts/cc1.woff2);
}

body {
  --bg: #fff;
  --bg-head: #fff;
  --fg: black;
}

body { font-family: system-ui; line-height: 2rem; margin: 0; padding: 0.3rem; background: #fff; }
.delete::before { content: '\2715';  }
.edit::before { content: '\270e'; }
.alreadyexists,.valuemissing { border: 1px solid orange; }
.alreadyexists + span.error { display: inline; }
.noscript { background: orange; padding: 0.5rem; }
.separator { height: 100%; border-right: 1px solid black; width: 0; padding: 0; margin-right: 1rem; }
input.privacysubmit:checked ~ .privacy { display: none; }
input.privacysubmit:checked ~ .privacyveil { z-index: -500; }
input.privacysubmit:not(:checked) ~ .privacy { display: block; position: fixed; top: 50vh; width: 50vw; /*! height: 50vh; */ background: white; transform: translate(50%,-50%); z-index: 500;}
input.privacysubmit:not(:checked) ~ .privacy ~ * { filter: blur(0.5rem); }
.privacy { border: 1px solid #90B4EE; border-radius: 1rem; }
.privacy label.choice { width: auto; color: black; }
.privacy label.choice h3 { display: inline-block; }
.privacy label.choice::before { content: '\25A1  '; color: #90B4EE; }
input.cloudon:checked ~ .privacy label.cloudon::before { content: '\25A3  '; }
input.cloudon:not(:checked) ~ .privacy label.cloudon { color: #808080; }
input.storageon:checked ~ .privacy label.storageon::before { content: '\25A3  '; }
input.storageon:not(:checked) ~ .privacy label.storageon { color: #808080; }
.privacy label.privacysubmit { width: 2rem; text-align: center; margin: 0 auto; border: 1px solid #90B4EE; border-radius: 1rem; padding: 0.5rem; }
.privacy hr { color: #90B4EE; }
.privacyveil { position: fixed; height: 100%; width: 100%; margin: 0; top: 0; left: 0; z-index: 499;}

.inline { display: inline;}
body > div > div .unsaved { padding: 0.5rem; background: orange; display: none; resize: none; }
.submit.button {
  position: relative;
  left: calc(100% - 4rem);
  border: 1px solid black;
  width: 1rem;
  padding: 0.5rem 1rem;
  margin: 1rem;
  border-radius: 1rem;
  background: linear-gradient(var(--bg-head),var(--bg));
}
.submit:hover, .edit:hover { color: #394BA5; }
.delete:hover { color: red; }
.submit.button.cloudsettings { display: contents; }
span.error { display: none; color: orange; font-size: 0.7rem; }
textarea { height: auto; }
td:first-child,th:first-child { display: none; }
label { display: block; width: 10rem; padding: 0.5rem; line-height: 1rem; padding-bottom: 0; }
input { width: 100%;}
p { /*! width: calc(100% - 30rem); */ }
body { display: flex; flex-direction: column; }
.body { display: flex; flex-direction: row; }
.body > div { display: flex; flex-direction: column; resize: horizontal; overflow: hidden; padding: 0.5rem; margin: 0.5rem; background: var(--bg); color: var(--fg); }
.body > div > div { resize: vertical; overflow: hidden; }
h2 { background: linear-gradient(var(--bg-head),var(--bg)); padding: 0.5rem; margin: 0; width: calc(100% - 1rem);}
h2 ~ div, h2 ~ form, h2 ~ table { background: var(--bg); }

.header { background: #fff; font-family: serif; color: #404040;}
.header h1 { background: #fff; margin: 0; padding: 0.5rem; font-family: Courier,monospace; font-variant-ligatures: none; text-align: center; text-shadow: 0.1rem 0.1rem #fff; }
.header .p { font-stretch: condensed; line-height: 1.5rem; width: auto; margin: 0 2rem 0 15rem; background: #ddd; padding: 0.5rem; border-radius: 0.5rem;}
.coredata { min-width: 1vw; width: 10vw; font-size: 0.7rem; --bg: linear-gradient(135deg, #B0D3FF,#A0C3FF); --fg: #2208B3;}
.coredata .name { font-weight: bold; }
.screenings { min-width: 28vw; flex-grow: 1; --bg: #dfd; }
.screenings .start, .screenings .end { width: 12rem;}
.screenings .submit.button:hover { filter: invert(96%); }
.control { --bg: #ddd; --fg: #505050; width: auto; }
.control div { background: var(--bg); }
.control table { border-collapse: collapse; }
.control thead { background: #fff; }
.control tr:nth-child(even) { background: #A6D8F9;}
.control td,th { padding: 0.2rem; text-align: left; }
.control th:hover { cursor: pointer; }
.control .json { background: #000; color: #a0a0a0; }
.col2 { columns: 2; }
.json { font-size: 0.7rem; word-break: break-all; line-height: 0.9rem;}
.duration { width: 4rem; }
.cloud input.apikey { opacity: 0; width: 0; padding: 0; margin: 0; }
.cloud div.apikey { position: fixed; top: 0; right: 1rem; background: #80c00080;border-radius: 0 0 1rem 1rem; padding: 0 1rem;}
#cloudon:not(:checked) ~ .cloud div.apikey label:not(.cloudsettings) { display: none; }
#cloudon:not(:checked) ~ .cloud div.apikey input { display: none; }
.cloud label.apikey:hover input.apikey { opacity: 1; width: 12.5rem; }
.cloud label.apikey::before { font-family: cc1; }
.cloud label.apikey.nocloud::before { content: '\2600  '; color: orange; }
.cloud label.apikey.cloud::before { content: '\2601  '; color: grey; }
.cloud label.apikey.cloud ~ label.submit.button.cloudy { display: contents; }
.cloud label.apikey.nocloud ~ label.submit.button.cloudy { display: none; }
.cloud label.submit.button.put.cloudy.changed { color: orange; }
.cloud label.apikey.nocloud ~ div.separator { display: none; }
.cloud .result { display: none; background: linear-gradient(135deg, #B0D3FF,#A0C3FF);; padding: 0.5rem; resize: none; border-radius: 1rem;}
.cloud .result.error { background: orange; color: black; }
.cloud .result ul { list-style-type: none; }
.cloud .result li span.getevent:hover { color: #394BA5; }
.cloud .result li span.delete:hover { color: red; }
.cloud .result li span.getevent::before { display: inline-block; content:' '; width: 1rem; height: 1rem; color: blue; margin-right: 0.5rem; }
.cloud .result li span.public::before { background: green; }
.cloud .result li span.private::before { background: black; }

.logo_wrapper { float: left; transform: rotate(-22deg); opacity: 0.5; width: 9rem; height: 10rem; }
.logo {width: 100%; height: 100%; color: #000; background: transparent; font-weight: 800; font-family: Jellee; font-size: 2.5rem; padding: 2rem; }

.eventname_wrapper { padding-left: 12rem;}