#channels-picker-container #popup-body {
  font-size: 0.8em;
}

#channels-picker-container #channels-picker-color-list {
  margin-top: 0.5em;
  border-radius: 5px;
  padding: 0.2em 0;
}

#channels-picker-container .channel-picker-color-row {
  display: flex;
  align-items: center;
  line-height: 1.4em;
  gap: 1em;
  border-radius: 5px;
  padding: 0.2em 0.35em;
  margin: 0.25em;
  transition: background-color 0.2s;
  cursor: pointer;
}

#channels-picker-container .channel-picker-color-row:hover,
#channels-picker-container .channel-picker-color-row.selected {
  background-color: #494e60;
  transition: background-color 0.2s;
}

#channels-picker-container .channel-picker-color {
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
}

.toolbar-button.ophtha_color_picker::after {
  content: "";
  position: absolute;
  right: 0.4em;
  bottom: 0.3em;
  border: 0.2em solid transparent;
  transition: border-color 0.25s;
  border-radius: 5px;
}

#channels-picker-container .channel-picker-color.red {
  background-color: #ea4c3c;
}

.toolbar-button.ophtha_color_picker.color-red::after {
  border-color: #ea4c3c;
  transition: border-color 0.25s;
}

#channels-picker-container .channel-picker-color.green {
  background-color: #57ae52;
}

.toolbar-button.ophtha_color_picker.color-green::after {
  border-color: #57ae52;
  transition: border-color 0.25s;
}

#channels-picker-container .channel-picker-color.blue {
  background-color: #3874d0;
}

.toolbar-button.ophtha_color_picker.color-blue::after {
  border-color: #3874d0;
  transition: border-color 0.25s;
}

#channels-picker-container .channel-picker-color.yellow {
  background-color: #d3d300;
}

.toolbar-button.ophtha_color_picker.color-yellow::after {
  border-color: #d3d300;
  transition: border-color 0.25s;
}

#channels-picker-container .channel-picker-color.magenta {
  background-color: #ab00ab;
}

.toolbar-button.ophtha_color_picker.color-magenta::after {
  border-color: #ab00ab;
  transition: border-color 0.25s;
}

#channels-picker-container .channel-picker-color.cyan {
  background-color: #00cbcb;
}

.toolbar-button.ophtha_color_picker.color-cyan::after {
  border-color: #00cbcb;
  transition: border-color 0.25s;
}

#channels-picker-container #popup-actions {
  display: flex;
  gap: 1em;
  margin-top: 1em;
  justify-content: flex-end;
}

#channels-picker-container #popup-actions div {
  width: 5em;
  padding: 0.3em;
  cursor: pointer;
  border-radius: 3px;
  background-color: #515b65;
  text-align: center;
  transition: background-color 0.3s;
}

#channels-picker-container #popup-actions div:hover {
  background-color: #20a8d8;
}