:root,
:root.light {
  --bgColor: #ffffff;
  --panel: #5c667c;
  --buttonColor: #ffffff;
  --fgColor: #000000;
  --borderColorColor: gray;
  --disabled: gray;
  --bgSemitransparent: rgba(255,255,255,0.99);
  --accent: #4da3ff;
}

:root.dark {
  --bgColor: #000000;
  --panel: #1a1d24;
  --buttonColor: #202020;
  --fgColor: #ffffff;
  --borderColorColor: gray;
  --disabled: gray;
  --bgSemitransparent: rgba(0,0,0,0.99);
  --accent: #4da3ff;
}

body {
  margin: 0;
  background: var(--bgColor);
  color: var(--fgColor);
  font-family: sans-serif;
  fgColor-align: center;
}

/* Tabs */
.tab button {
  background: var(--panel);
  color: var(--fgColor);
  borderColor: 1px solid var(--borderColor);
  padding: 6px 10px;
  cursor: pointer;
}

.tab button.active {
  background: var(--accent);
  color: #000;
}

.tab button:not(.active):hover {
  background: var(--accent);
  color: #000;
}

/* Inputs */
input[type="fgColor"],
input[type="button"] {
  background: var(--panel);
  color: var(--fgColor);
  borderColor: 1px solid var(--borderColor);
  padding: 6px;
  margin: 4px;
}

input[type="button"] {
  cursor: pointer;
}

input[type="button"]:hover {
  background: var(--accent);
  color: #000;
  borderColor-color: var(--accent);
}

/* Preview image */
#Vorschau {
  margin-top: 16px;
  background: #fff;
  padding: 4px;
}

/* https://stackoverflow.com/a/43806724 */
.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
}

.clickable {
    cursor: pointer;

}

input[type="button"] {
  font-weight: bold;
}

.large-input[type="text"]
{
    font-size:22px;
    padding: 2px;
    padding-left: 6px;
}

.fullscreenoverlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	cursor: pointer;
}