body {
  background-color: white;
  color: black;
  font-family: sans-serif;
}
a {
  color: black;
}
.content {
}

#poll {
  max-width: 600px;
}

#metaTable {
  td {
    padding: 4px;
    margin: 4px;
  }
  tr {
    background-color: #eee;
  }
}

#addNews {
  padding: 8px;
  a {
    background-color: #ccc;
    padding: 6px;
    margin: 4px;
    border-radius: 10px;
  }
}

.splitzones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.drag-handle {
  padding: 8px;
  cursor: grab; /* Changes the cursor to indicate movability */

  user-select: none; /* Prevents text selection */
}

/* Style the drag handle on hover and active states for better feedback */
.drag-handle:hover,
.drag-handle:active {
  cursor: grabbing;
}

#addNews {
  max-width: 400px;
}

.red {
  background-color: #e57373; /* Lightened red */
  color: white;
}

.orange {
  background-color: #ffa726; /* Subtle orange */
  color: black;
}

.yellow {
  background-color: #fff176; /* Soft yellow */
  color: black;
}

.green {
  background-color: #81c784; /* Soft green */
  color: black;
}

.blue {
  background-color: #64b5f6; /* Soft blue */
  color: white;
}

.indigo {
  background-color: #7986cb; /* Soft indigo */
  color: white;
}

.violet {
  background-color: #ce93d8; /* Soft violet */
  color: white;
}

.pink {
  background-color: #f48fb1; /* Soft pink */
  color: black;
}

.brown {
  background-color: #a1887f; /* Light brown */
  color: white;
}

.black {
  background-color: #424242; /* Dark gray-black */
  color: white;
}

.white {
  background-color: #ffffff; /* White */
  color: black;
}

.gray {
  background-color: #bdbdbd; /* Mid-gray */
  color: black;
}

.cyan {
  background-color: #4dd0e1; /* Light cyan */
  color: black;
}

.teal {
  background-color: #4db6ac; /* Light teal */
  color: black;
}

.magenta {
  background-color: #ec407a; /* Subtle magenta */
  color: white;
}
.colorLink {
  padding: 2px;
}
.colorSquare {
width:50px; height:50px; cursor:pointer;
}