.charcoal-black {
  background-color: #000000 !important; }

.black {
  background-color: #000000 !important; }

.military-green {
  background-color: #404B34 !important; }

.dark-blue {
  background-color: #3e4f6e !important; }

.dark-grey {
  background-color: #575c5c !important; }

.dark-cyan {
  background-color: #1e6368 !important; }

.blue {
  background-color: #2a7ca0 !important; }

.baby-blue {
  background-color: #94c0e4 !important; }

.teal-blue {
  background-color: #43999a !important; }

.green {
  background-color: #60B287 !important; }

.mint-green {
  background-color: #7dba98 !important; }

.purple {
  background-color: #674969 !important; }

.red {
  background-color: #dc5455 !important; }

.coral-pink {
  background-color: #e17582 !important; }

.yellow {
  background-color: #ffe568 !important; }

.white {
  background-color: #ffffff !important; }

.pwhite {
  background-color: #ffffff !important; }

.pblack {
  background-color: #000000 !important; }

.pdark-blue {
  background-color: #424054 !important; }

.pred {
  background-color: #a4322f !important; }

.ppink {
  background-color: #edbdc8 !important; }

.shell-pink {
  background-color: #FAD6D3 !important; }

.pshell-pink {
  background-color: #FAD6D3 !important; }

.peach-pink {
  background-color: #FAD6D3 !important; }

.ppeach-pink {
  background-color: #FAD6D3 !important; }

.powder-blue {
  background-color: #C0D9EE !important; }

.ppowder-blue {
  background-color: #C0D9EE !important; }

.white-st-patrick-edition {
  background-color: #fff !important; }

.pwhite-st-patrick-edition {
  background-color: #fff !important; }

.black-st-patrick-edition {
  background-color: #000 !important; }

.pblack-st-patrick-edition {
  background-color: #000 !important; }

.dark-blue-st-patrick-edition {
  background-color: #424054 !important; }

.pdark-blue-st-patrick-edition {
  background-color: #424054 !important; }

.gold {
  background-color: #CEBE86 !important; }

.silver {
  background-color: #C9C8C9 !important; }

.color-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 15px; }
  .color-area .switch-area {
    width: 100%;
    margin: 0 0 10px 0;
    text-align: left; }

.circle-picker {
  width: 25px;
  height: 25px;
  padding: 3px;
  border-radius: 50%;
  margin-right: 10px;
  position: relative; }
  .circle-picker:first-child .color-text {
    left: 0; }
  .circle-picker.active, .circle-picker:hover {
    border: 1px solid #b3b3b3;
    cursor: pointer; }
    .circle-picker.active .circle-color:not(.white), .circle-picker.active circle-color:not(.transparent), .circle-picker:hover .circle-color:not(.white), .circle-picker:hover circle-color:not(.transparent) {
      border: none; }
    .circle-picker.active .color-text, .circle-picker:hover .color-text {
      display: block;
      color: #b3b3b3; }
    .circle-picker.active .black-half, .circle-picker.active .red-half, .circle-picker:hover .black-half, .circle-picker:hover .red-half {
      height: 9px;
      width: 18px;
      border-radius: 18px 18px 0 0; }
  .circle-picker .circle-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%; }
    .circle-picker .circle-color.white, .circle-picker .circle-color.pwhite, .circle-picker .circle-color.pwhite-st-patrick-edition, .circle-picker .circle-color.transparent {
      border: 1px solid #e2e2e2 !important; }
  .circle-picker .color-name {
    display: inline-block;
    font-size: 0.8rem;
    margin-top: 10px; }

.color-text {
  position: absolute;
  top: 30px;
  left: -35px;
  display: none;
  width: 100px;
  text-align: center;
  white-space: nowrap; }

.full-clear {
  border: 2px solid #e6e6e5;
  background: -webkit-linear-gradient(bottom, #e6e6e5 50%, #fff 50%);
  background: linear-gradient(to top, #e6e6e5 50%, #fff 50%); }

.clear-pink {
  border: 2px solid #f8cbcc;
  background: -webkit-linear-gradient(bottom, #f8cbcc 50%, #fff 50%);
  background: linear-gradient(to top, #f8cbcc 50%, #fff 50%); }

.clear-black {
  border: 2px solid #000;
  background: -webkit-linear-gradient(bottom, #000 50%, #fff 50%);
  background: linear-gradient(to top, #000 50%, #fff 50%); }

.charcoal-red {
  background: -webkit-linear-gradient(45deg, #000 50%, #dc5455 50%);
  background: linear-gradient(45deg, #000 50%, #dc5455 50%); }

.half-color {
  width: 30px;
  height: 30px; }