.channel-title {
  font-size: 20px;
  font-weight: 600;
  /* or bold */
  font-family: 'Helvetica' !important;
}

.sub-title {
  font-size: 14px;
  font-weight: 500;
  /* or bold */
  margin-bottom: 20px;
  /* space below title */
  font-family: 'Helvetica' !important;
  color: rgba(25, 26, 26, 0.52) !important;

}

.color-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.formlabel {
  font-weight: 400;
  font-size: 11px;
  height: 24px;
  font-family: 'Helvetica' !important;
  text-align: left;
}


.label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.color-input-wrapper {
  display: flex;
  align-items: left;
  gap: 16px;
}

/* Color box */
input[type="color"] {
  width: 32px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: transparent;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
  }
}

/* Hex input */
.hex-input {
  width: 200px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
  color: #111827;

  &:focus {
    outline: none;
    border-color: #834DD0;
    box-shadow: 0 0 0 0px rgba(99, 102, 241, 0.2);
  }
}