body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.canvas-container {
  background-color: #ffffff;
}

.hex-container {
  position: absolute;
  left: 200px;
  top: 200px;
  font-family: Arial;
  font-weight: bold;
  font-size: 20px;
}

.hex-input-group {
  margin-bottom: 21px;
}

.hex-prefix {
  display: inline-block;
}

.hex-input {
  width: 30px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.hex-container-menu {
  border: 1px solid #767676;
  background-color: #ffffff;
  display: inline-block;
  padding: 7px;
}

.hex-prefix-menu {
  margin-left: 10px;
}

#hexInputMenu0 {
  margin-right: 33px;
  font-weight: bold;
}
#hexInputMenu1 {
  margin-right: 56px;
  font-weight: bold;
}
#hexInputMenu2 {
  margin-right: 33px;
  font-weight: bold;
}

.hex-input[disabled] {
  cursor: not-allowed;
}

.hidden {
  display: none;
}


.separator {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  border-top: 3px solid #000; /* Adjust the style of the separator as needed */
}

.menu-container {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 120px;
  background-color: #f5f5f5;
}

.dropdowns {
	position: relative;
  left: 100px;
	top: 20px;
}

.dropdown-menu {
  cursor: pointer;
  padding: 10px;
  font-size: 16px;
  width: 120px;
}
.dropdown-menu[disabled] {
  cursor: not-allowed;
}

.impressum-link {
  position: fixed;
  bottom: 10px;
  left: 10px
}
.datenschutz-link {
  position: fixed;
  bottom: 10px;
  left: 100px
}

.buttons {
  float: right;
  display: flex;
	position: relative;
  right: 100px;
	top: 20px;
}

.button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  margin-left: 10px;
  cursor: pointer;
  background-color: black;
  color: white;
  font-size: 16px;
}


.button:hover {
  background-color:#272727;
}

.button:active {
  transform: scale(0.9, 0.9);
}

.button[disabled] {
  cursor: not-allowed;
  background-color: #AAAAAA;
}
.button:active[disabled] {
  cursor: not-allowed;
  transform: scale(1, 1);
}

.center {
  text-align: center;
}

.row2 {
  position: fixed;
  bottom: 30px;
  left: 100px;
}

.checkbox {
  cursor: pointer;
}

.checkbox[disabled] {
  cursor: not-allowed;
}