/*color picker style */
#cp-container .cp-custom .colorpicker-saturation {
  width: 160px;
  height: 160px;
}
#cp-container .cp-custom .colorpicker-hue,
#cp-container .cp-custom .colorpicker-alpha {
  height: 160px;
  width: 25px;
}
#cp-container .cp-custom .colorpicker-color,
#cp-container .cp-custom .colorpicker-color div {
  width: 218px;
  height: 25px;
}
/*RGB Model style*/
#RGB-Model {
  margin: 10px;
}
#RGB-Model > div {
  padding: 0px 5px;
}
#RGB-Model .input-group {
  margin-bottom: 5px;
  margin-top: 5px;
}
#RGB-Model .input-group-addon {
  font-weight: bold;
  color: white;
  width: 40% !important;
  max-width: 100px !important;
  min-width: 50px !important;
}
#RGB-Model > input {
  padding-right: 6px;
}
#RGB-Model #red {
  border-color: red;
}
#RGB-Model #green {
  border-color: green;
}
#RGB-Model #blue {
  border-color: blue;
}
#RGB-Model #RGB-red > label {
  background-color: red;
  border-color: red;
}
#RGB-Model #RGB-green > label {
  background-color: green;
  border-color: green;
}
#RGB-Model #RGB-blue > label {
  background-color: blue;
  border-color: blue;
}
#RGB-Model #RGB-alpha > label {
  color: black;
}
#RGB-Model input[type='number'] {
  -moz-appearance: textfield;
}
#RGB-Model input::-webkit-outer-spin-button,
#RGB-Model input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* Color selector style */
.col-sm-1_5 {
  width: 12.5%;
  border: none;
  display: block;
  float: left;
  /* or text-align : center */
}
.box {
  width: 90%;
  height: 25px;
  background-color: orange;
  display: block;
  margin: 0px auto 3px;
  /* or display : inline-block; */
}
.box:hover {
  border: 3px solid black !important;
}
.box:focus {
  border: 3px solid black;
  outline: none;
}
#cpCustom .row {
  border-radius: 10px;
}
#cpCustom .row .box {
  box-shadow: 0px 0px 5px rgba(150, 150, 150, 0.7);
}