.colorpalette {
    position: relative;
}

.color-picker {
    display: inline-block;
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

.color-picker .color-box {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 2em;
    height: 1.5em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.050000000000000044);
    z-index: 1;
    -webkit-transition: all 0.15s ease 0s;
    -moz-transition: all 0.15s ease 0s;
    -ms-transition: all 0.15s ease 0s;
    -o-transition: all 0.15s ease 0s;
    transition: all 0.15s ease 0s;
}

.color-picker .color-button-group {
    display: inline-block;
    position: relative;
    padding: 0.25em 0.5em;
    margin: 0 0 0 0.5em;
    border: 1px solid #6d8fb1;
    background: #fff;
    border-radius: 0.3em;
    cursor: pointer;
}

.color-picker .color-button-group .color-cue {
    border-radius: 0.25em;
    display: block;
    margin: 0;
    background-color: #000;
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    height: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15000000000000002) inset;
}

.color-picker .color-button-group .color-cue.invalid-color {
    background: rgba(255, 0, 0, 0.15000000000000002) !important;
}

.color-picker .color-button-group .color-cue-name {
    display: inline-block;
    margin-left: 2em;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.65);
    font-family: Monaco, monospace;
}

.color-picker .color-button-group .color-picker-input {
    padding: 0;
    color: #999;
    margin: 0 0 0 0.5em;
}

.color-picker .color-button-group .color-picker-input:focus {
    box-shadow: none;
    background: rgba(102, 204, 255, 0.15000000000000002);
}

.color-picker ul {
    padding: 0.5em;
    margin: 0;
    list-style: none;
}

.color-picker ul:after {
    content: "";
    display: block;
    clear: both;
}

.color-picker li {
    float: left;
    position: relative;
    padding: 0;
}

.color-picker li:hover .color-box {
    width: 2.2em;
    height: 1.7em;
    margin: -0.1em;
    z-index: 3;
    border-radius: 0.25em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.19999999999999996) inset,
        0 0 0 3px rgba(255, 255, 255, 0.6);
}

.color-picker li.light,
.color-picker li.medium,
.color-picker li.dark {
    display: none;
}

.color-picker li.previewer {
    float: right;
}

.color-picker li.highlight .color-box {
    border-color: #ffffff;
    box-shadow: 0 0 7px #99ccff;
}

.color-picker li:nth-child(7n + 1) {
    clear: left;
}

.color-picker li [type="radio"] {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
}

.color-picker li [type="radio"]:checked+.color-box {
    z-index: 2;
    border-radius: 0.25em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.050000000000000044) inset,
        0 0 0 0.25em #ffffff, 0 0 0.75em 0 rgba(0, 0, 0, 0.65);
}

.color-picker li span {
    display: none;
}

.color-picker .color-chips {
    display: none;
    opacity: 0;
    position: absolute;
    top: -0.3em;
    left: 2.85em;
    width: 15.1em;
    background: #333639;
    border: 2px solid #dadcde;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 0.5em;
    z-index: 2;
    -webkit-transition: opacity 0.25s ease 0.3s;
    -moz-transition: opacity 0.25s ease 0.3s;
    -ms-transition: opacity 0.25s ease 0.3s;
    -o-transition: opacity 0.25s ease 0.3s;
    transition: opacity 0.25s ease 0.3s;
}

.color-picker .color-chips .color-box:after {
    content: attr(data-title);
    position: absolute;
    top: 65%;
    left: 65%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    font-size: 0.85em;
    white-space: nowrap;
    line-height: 1;
    border-radius: 0.3em;
    opacity: 0;
    background-color: #f1efee;
    box-shadow: 0 0 0.3em 0 rgba(0, 0, 0, 0.35);
    padding: 0.3em 0.9em;
    color: #333639;
}

.color-picker .color-chips .color-box:hover:after {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.15s ease 0.5s;
    -moz-transition: all 0.15s ease 0.5s;
    -ms-transition: all 0.15s ease 0.5s;
    -o-transition: all 0.15s ease 0.5s;
    transition: all 0.15s ease 0.5s;
}

.color-picker .toggle {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
}

.color-picker .toggle-picker:checked~.color-chips {
    display: block;
    opacity: 1;
}

.color-picker .toggle-picker:checked~.color-button-group {
    box-shadow: 0 0 0.35em 0 #69c;
    border-color: #69c;
}

.color-picker .handle {
    display: inline-block;
    padding: 0.1em 0.85em;
    margin: 0.5em 0 0 0.5em;
    border-radius: 1em;
    line-height: 1;
    border: 0;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
    box-shadow: none;
    outline: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.color-picker .toggle:checked+.handle {
    box-shadow: 0 0 0 1px #69c, 0 0 0.5em 0 #69c;
    background: rgba(102, 153, 204, 0.35);
}

.color-picker .toggle-light:checked~ul .light {
    display: block;
}

.color-picker .toggle-medium:checked~ul .medium {
    display: block;
}

.color-picker .toggle-dark:checked~ul .dark {
    display: block;
}

.color-picker .close-picker {
    position: absolute;
    top: -0.7em;
    right: -0.7em;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(0, 0, 0, 0.15000000000000002);
    border-radius: 0.25em;
    color: #fff;
    line-height: 0.9em;
    font-size: 1.2em;
    z-index: 5;
    width: 1em;
    height: 1em;
    text-align: center;
    cursor: pointer;
}

.color-picker .close-picker:hover {
    background: #66ccff;
}

.color-picker .divider {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #575c61;
    padding: 0.5em;
    background: #1b1d1e url(striped.png) repeat 50% 50%;
    border-radius: 0 0 0.3em 0.3em;
    font-weight: 300;
}

.color-picker .divider .color-cue-name {
    padding: 0 0.5em 0 0;
    line-height: 2;
    color: rgba(255, 255, 255, 0.65);
}

.color-picker .divider-heading {
    text-transform: uppercase;
    font-size: 0.8em;
    color: #969699;
}

.color-picker .color-picker-input {
    padding: 0.35em 0.5em;
    margin: 0.2em;
    width: 7em;
    border: 0;
    border-radius: 0.3em;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.65);
    font-family: Monaco, monospace;
    box-shadow: none;
    outline: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.color-picker .color-picker-input:focus,
.color-picker .color-picker-input:active {
    box-shadow: 0 0 0 1px #69c, 0 0 0.5em 0 #69c;
}

.color-picker .no-hex-input .color-picker-input,
.color-picker .no-hex-input .hex-control {
    display: none;
}

.list-item-color {
    background-color: #000;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    border: 1px solid #000;
    cursor: pointer;
}