.o_colorpicker_widget .o_color_pick_area {
  position: relative;
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 50%, transparent 50%, black 100%), linear-gradient(to right, #807f7f 0%, rgba(128, 127, 127, 0) 100%);
  cursor: crosshair;
}

.o_colorpicker_widget .o_color_pick_area .o_picker_pointer {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid white;
  box-shadow: 0px 0px 2px 1px #ced4da;
}

.o_colorpicker_widget .o_color_slider {
  position: relative;
  width: 18px;
  height: 200px;
  background: linear-gradient(#F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
  cursor: pointer;
}

.o_colorpicker_widget .o_color_slider .o_slider_pointer {
  position: absolute;
  top: auto;
  left: -4px;
  bottom: auto;
  right: auto;
  width: 23px;
  height: 6px;
  border: 1px solid white;
  box-shadow: 0px 0px 2px 1px #6c757d;
}

.o_colorpicker_widget .o_opacity_slider {
  position: relative;
  width: 18px;
  height: 200px;
  cursor: pointer;
}

.o_colorpicker_widget .o_opacity_slider .o_opacity_pointer {
  position: absolute;
  top: auto;
  left: -4px;
  bottom: auto;
  right: auto;
  width: 23px;
  height: 6px;
  border: 1px solid white;
  box-shadow: 0px 0px 2px 1px #6c757d;
}

.o_colorpicker_widget .o_opacity_slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-image: url("/web_editor/static/src/img/transparent.png");
}

.o_colorpicker_widget .o_color_picker_inputs {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;
}

.o_colorpicker_widget .o_color_picker_inputs > .form-row {
  flex: 1;
}

.o_colorpicker_widget .o_color_picker_inputs > .form-row .col {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column;
  justify-content: space-around;
}

.o_colorpicker_widget .o_color_picker_inputs .o_color_preview_parent {
  background-image: url("/web_editor/static/src/img/transparent.png");
}

.o_colorpicker_widget .o_color_picker_inputs .o_color_preview {
  padding: 0.375rem 1.2rem;
}

.o_colorpicker_widget .o_color_picker_inputs .form-group {
  margin-bottom: 0.3rem;
}

.o_colorpicker_widget .o_color_picker_inputs .form-group label {
  margin-bottom: 0px;
  font-size: 0.7rem;
  font-weight: bold;
}

.o_colorpicker_widget .o_color_picker_inputs .form-control {
  height: 24px !important;
  font-weight: bold;
}