:root {
  --blue: #3a9ede;
  --red: #ff0000;
  --white: #ffffff;
  --green: #00ff00;
  --background: #1e1e1e;
  --font-size: 16px;
  --scale: 1;
}

body {
  background-color: var(--background, #1e1e1e);
  color: var(--white, #ffffff);
  font-family: Arial, sans-serif;
  font-size: calc(var(--font-size) * var(--scale));
}

#div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.input-field {
  border: calc(1px * var(--scale)) solid #ccc;
  min-height: calc(50px * var(--scale));
  padding: calc(10px * var(--scale));
  margin: calc(5px * var(--scale));
  border-radius: calc(5px * var(--scale));
}

.block {
  display: inline-block;
  background-color: transparent;
  border: calc(2px * var(--scale)) solid var(--blue, #3a9ede);
  padding: calc(10px * var(--scale));
  margin: calc(5px * var(--scale));
  cursor: pointer;
  color: var(--blue, #3a9ede);
  white-space: nowrap;
  width: fit-content;
  border-radius: calc(5px * var(--scale));
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
  cursor: move;
}

.block-in-input {
  display: inline-block;
  background-color: transparent;
  border: calc(2px * var(--scale)) solid var(--blue, #3a9ede);
  padding: calc(10px * var(--scale));
  margin: calc(2px * var(--scale));
  cursor: pointer;
  color: var(--blue);
  white-space: nowrap;
  -ms-user-select: None;
  -moz-user-select: None;
  -webkit-user-select: None;
  user-select: None;
  cursor: move;
}

.preview {
  border-radius: calc(5px * var(--scale)); /* Adding rounded corners */
  margin: calc(5px * var(--scale));
}

.delete-button {
  color: red;
  background: none;
  border: none;
  font-size: inherit;
  cursor: pointer;
}

.block-in-input.custom-editing {
  border: calc(2px * var(--scale)) solid var(--red, #ff0000) !important;
  
}

.block-in-input.selected {
  border: calc(2px * var(--scale)) solid var(--white, #ff0000) !important;
}
.block-in-input.custom {
  /* only mark the untere seite */
  border-bottom: calc(2px * var(--scale)) solid var(--red, #ff0000);
}

.not-draggable {
  cursor: default !important;
}

.spacer {
  display: inline-block;
  width: calc(20px * var(--scale));
}

.hide-cursor {
  cursor: none;
}