#left-container {
  width: 65vw;
  }

#right-container {
  width: 30vw;
  margin-left: 20px; }

#right-content {
  padding: 10px; }

#color-picker {
  position: relative; }

#color-picker-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; }

#color-data {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);
  margin-top: 20px;
  height: 35vh;
  justify-content: center;
  overflow-y: auto;
  }

#color-picker-data {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 25px 35px; }

#color-picker-circle {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  border: 5px solid #DDD; }

#color-picker-circle-color {
  width: 100%;
  height: 100%;
  border-radius: 50%; }

#color-picker-sliders {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  margin: 0 10px 0 80px; }

#color-picker-sliders > * {
  width: 100%;
  height: 30px; }

#color-picker-hue {
  background: url(../assets/spectrum-gradient.png);
  background-size: contain;
  background: -moz-linear-gradient(left, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);
  background: -webkit-linear-gradient(left, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);
  background: linear-gradient(to right, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); }

#color-picker-circle,
#color-picker-alpha {
  background: url("../assets/alpha-background.png") repeat;
  background: linear-gradient(45deg, #CDCDCD 25%, transparent 25%), linear-gradient(-45deg, #CDCDCD 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #CDCDCD 75%), linear-gradient(-45deg, transparent 75%, #CDCDCD 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

#color-picker-alpha-background {
  width: 100%;
  height: 100%;
  background: url(../assets/alpha-gradient.png);
  background-size: contain;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #000);
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #000);
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #000); }

#color-picker-hue .slider__scrubber,
#color-picker-alpha .slider__scrubber {
  /* width: 45px; */
  height: 45px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

.color-data-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  padding: 10px; }

.color-data-cell-header {
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 300; }

.color-data-cell-value {
  width: 200px; }

.color-data-cell-value:focus {
  border: 1px solid #00a1ff; }

.color-data-cell-value.error {
  border: 1px solid #b70707; }

.slider {
  position: relative;
  cursor: pointer; }

.slider__scrubber {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 0;
  z-index: 3;
  background: #FFFFFF;
  /* border-radius: 50%; */
  }

.right-content-row > label {
  margin-right: 5px; }

/*# sourceMappingURL=main.css.map */