.table-striped {
margin-top: 50px;
background-color: silver;
}
#cc_item_hex, #cc_item_websafe, #cc_item_rgb, #cc_item_rgba, #cc_item_prgb, #cc_item_hsl,#cc_item_hsla,#cc_item_cmyk,#cc_item_hsb,#cc_item_xyz,#cc_item_lab,#cc_item_prgba {
width: 90% !important;
}
input:focus {
outline: none;
outline-color: #fff
}
.cc_bottom {
margin-top: 15px
}
.cc_item {
width: 450px;
height: 40px;
position: relative;
float: left;
margin: 0 15px 5px 0
}
.cc_item .output {
display: table-cell;
vertical-align: middle;
width: 400px;
text-align: center
}
.cc_item input {
background: #f5f5f5;
padding: 0 2%;
height: 40px;
border: none;
text-align: left;
width: 96%;
background: #444;
color: #eee;
position: relative
}
.cc_item label {
background: #DDDDDD;
height: 40px;
display: table-cell;
vertical-align: middle;
padding-right: 12px;
width: 18%;
text-align: right;
cursor: pointer
}
.cc_item input,
.cc_item label,
.cc_choise select,
.cc_input input,
.cc_input label {
font-size: 16px
}
.cc_top_left {
position: relative;
padding: 16px;
width: 418px;
background: #DDDDDD;
float: left;
}
.cc_choise {
font-size: 18px;
float: left;
padding-bottom: 10px;
width: 30%;
margin-left: 16px
}
.cc_choise select {
height: 38px;
width: 100%;
border: none;
margin: 0 0 0 4px;
padding-left: 5px;
background: #e1e1e1
}
.cc_choise select:focus {
background: #fff
}
@-moz-document url-prefix() {
.cc_choise select {
padding-top: 5px
}
}
.cc_input {
text-align:center;
width: 100%;
margin: 6px 0 0 16px;
display: none
}
#cc_hex {
display: block
}
.cc_input input:focus {
background: #fff
}
.cc_input input {
height: 38px;
margin: 0;
padding: 0;
background: #e1e1e1;
color: #333;
border: none;
float: left
}
#cc_hex input {
padding: 0 4px;
}
#cc_rgb input,
#cc_prgb input,
#cc_hsl input,
#cc_hsb input,
#cc_lab input,
#cc_xyz input {
width: 84px;
text-align: center
}
#cc_rgba input,
#cc_prgba input,
#cc_hsla input,
#cc_cmyk input {
width: 58px;
text-align: center
}
#cc_rgb input:last-child,
#cc_prgb input:last-child,
#cc_hsl input:last-child,
#cc_hsb input:last-child,
#cc_lab input:last-child,
#cc_xyz input:last-child {
padding-left: 1px
}
.cc_input label {
font-weight: normal;
background: #FFF;
padding: 8px 6px;
height: 20px;
color: #ccc;
border: 0px solid #555;
border-right: none;
float: left;
text-align: center;
cursor: pointer
}

.cc_top_right div {
font-size: 16px;
height: 30px;
width: 100%;
xborder: 1px red solid;
margin-bottom: 6px
}
.cc_top_right select,
.cc_top_right input {
margin: 0 6px 0 0;
padding: 0;
border: none !important;
height: 45px !important;
width: 45px !important;
background: #e1e1e1 !important;
text-align: center
}
.cc_top_right select:focus,
.cc_top_right input:focus {
background: #fff !important
}
.cc_top_right label {
padding-left: 4px
}
.cc_top_right #cc_bgcolor {
display: inline-block;
float: left;
width: 45px;
height: 26px;
cursor: pointer;

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAZCAYAAACl8achAAAAPUlEQVR42u3UMQ0AAAgDMPybwhoGJmAhJeHb0Webybfhm3LQ0O/Q7cCYg4b+hjZ50NBKZ6ehoU0eNHRB7gAi9ppqbhAgqAAAAABJRU5ErkJggg==');
}
.cc_top_right input {
border: none;
background: #DDDDDD;
width: 100%;
height: 100%
}
.cc_color {
float: right;
top: 0;
width: 86px;
height: 86px
}
.cc_color div {
cursor: pointer;
width: 100%;
height: 100%;
border: 1px #333 solid;
background: #e80e0e;
}
input::-ms-clear {
display: none
}
input[type=number]::-webkit-inner-spin-button {
opacity: 1
}
.cc_help_full {
width: 100%
}
.cc_help_full div {
font-size: 12px;
float: left;
background: #DDDDDD;
margin: 3px;
padding: 7px;
text-align: center;
width: 17.85%;
font-size: 16px;
display: none
}
.cc_help_full div:hover {
background: #333
}
ol.css {
list-style-type: none;
margin: 0;
padding: 12px;
background: #DDDDDD;
display: inline-block
}
ol.css li {
padding: 0;
margin: 0;
white-space: pre;
opacity: 0.9;
font-size: 14px
}
ol.css li .pre1 {
color: #FF6400
}
ol.css li .pre2 {
color: #8DA6CE
}
ol.css li .pre3 {
color: #D8FA3C
}
.cp {
position: absolute;
width: 346px;
height: 170px;
overflow: hidden;
display: none;
font-family: Arial, Helvetica, sans-serif;
background: #ebebeb;
border: 1px solid #bbb;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none
}
.cp_color {
position: absolute;
left: 7px;
top: 7px;
width: 156px;
height: 156px;
overflow: hidden;
outline: #aaa solid 1px;
cursor: crosshair
}
.cp_color_overlay1 {
position: absolute;
left: 0;
top: 0;
width: 156px;
height: 156px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0, transparent 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, transparent));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0, transparent 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0, transparent 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0, transparent 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, transparent 100%);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#ffffff', endColorstr='#00ffffff')
}
.cp_color_overlay2 {
position: absolute;
left: 0;
top: 0;
width: 156px;
height: 156px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";
background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 1)));
background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0)
}
.cp_selector_outer {
background: 0 0;
position: absolute;
width: 11px;
height: 11px;
margin: -6px 0 0 -6px;
border: 1px solid #000;
border-radius: 50%
}
.cp_selector_inner {
position: absolute;
width: 9px;
height: 9px;
border: 1px solid #fff;
border-radius: 50%
}
.cp_hue {
position: absolute;
top: 6px;
left: 175px;
width: 19px;
height: 156px;
border: 1px solid #aaa;
cursor: n-resize
}
.cp_hue_arrs {
position: absolute;
left: -8px;
width: 35px;
height: 7px;
margin: -7px 0 0
}
.cp_hue_larr {
position: absolute;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 7px solid #858585
}
.cp_hue_rarr {
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 7px solid #858585
}
.cp_new_color {
position: absolute;
left: 207px;
top: 6px;
width: 60px;
height: 27px;
background: red;
border: 1px solid #8f8f8f
}
.cp_current_color {
position: absolute;
left: 277px;
top: 6px;
width: 60px;
height: 27px;
background: red;
border: 1px solid #8f8f8f
}
.cp_field,
.cp_hex_field {
position: absolute;
height: 20px;
width: 60px;
overflow: hidden;
background: #f3f3f3;
color: #b8b8b8;
font-size: 12px;
border: 1px solid #bdbdbd
}
.cp_rgb_r {
top: 40px;
left: 207px
}
.cp_rgb_g {
top: 67px;
left: 207px
}
.cp_rgb_b {
top: 94px;
left: 207px
}
.cp_hsb_h {
top: 40px;
left: 277px
}
.cp_hsb_s {
top: 67px;
left: 277px
}
.cp_hsb_b {
top: 94px;
left: 277px
}
.cp_hex_field {
width: 68px;
left: 207px;
top: 121px
}
.cp_focus {
border-color: #999
}
.cp_field_letter {
position: absolute;
width: 12px;
height: 20px;
line-height: 20px;
padding-left: 4px;
background: #efefef;
border-right: 1px solid #bdbdbd;
font-weight: 700;
color: #777
}
.cp_field input,
.cp_hex_field input {
position: absolute;
right: 11px;
margin: 0;
padding: 0;
height: 20px;
line-height: 20px;
background: 0 0;
border: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #555;
text-align: right;
outline: 0
}
.cp_hex_field input {
right: 4px
}
.cp_field_arrs {
position: absolute;
top: 0;
right: 0;
width: 9px;
height: 21px;
cursor: n-resize
}
.cp_field_uarr {
position: absolute;
top: 5px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #959595
}
.cp_field_darr {
position: absolute;
bottom: 5px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #959595
}
.cp_submit {
position: absolute;
left: 207px;
top: 149px;
width: 130px;
height: 22px;
line-height: 22px;
background: #efefef;
text-align: center;
color: #555;
font-size: 12px;
font-weight: 700;
border: 1px solid #bdbdbd;
}
.cp_submit:hover {
background: #f3f3f3;
border-color: #999;
cursor: pointer
}
.cp_full_ns .cp_current_color,
.cp_full_ns .cp_submit {
display: none
}
.cp_full_ns .cp_new_color {
width: 130px;
height: 25px
}
.cp_full_ns .cp_hsb_h,
.cp_full_ns .cp_rgb_r {
top: 42px
}
.cp_full_ns .cp_hsb_s,
.cp_full_ns .cp_rgb_g {
top: 73px
}
.cp_full_ns .cp_hsb_b,
.cp_full_ns .cp_rgb_b {
top: 104px
}
.cp_full_ns .cp_hex_field {
top: 135px
}
.cp_rgbhex .cp_hsb_b,
.cp_rgbhex .cp_hsb_h,
.cp_rgbhex .cp_hsb_s {
display: none
}
.cp_rgbhex {
width: 282px
}
.cp_rgbhex .cp_field,
.cp_rgbhex .cp_submit {
width: 68px
}
.cp_rgbhex .cp_new_color {
width: 34px;
border-right: none
}
.cp_rgbhex .cp_current_color {
width: 34px;
left: 240px;
border-left: none
}
.cp_rgbhex_ns .cp_current_color,
.cp_rgbhex_ns .cp_submit {
display: none
}
.cp_rgbhex_ns .cp_new_color {
width: 68px;
border: 1px solid #8f8f8f
}
.cp_rgbhex_ns .cp_rgb_r {
top: 42px
}
.cp_rgbhex_ns .cp_rgb_g {
top: 73px
}
.cp_rgbhex_ns .cp_rgb_b {
top: 104px
}
.cp_rgbhex_ns .cp_hex_field {
top: 135px
}
.cp_hex .cp_hsb_b,
.cp_hex .cp_hsb_h,
.cp_hex .cp_hsb_s,
.cp_hex .cp_rgb_b,
.cp_hex .cp_rgb_g,
.cp_hex .cp_rgb_r {
display: none
}
.cp_hex {
width: 206px;
height: 170px
}
.cp_hex .cp_hex_field {
width: 72px;
height: 25px;
top: 168px;
left: 80px
}
.cp_hex .cp_hex_field div,
.cp_hex .cp_hex_field input {
height: 25px;
line-height: 25px
}
.cp_hex .cp_new_color {
left: 9px;
top: 168px;
width: 30px;
border-right: none
}
.cp_hex .cp_current_color {
left: 39px;
top: 168px;
width: 30px;
border-left: none
}
.cp_hex .cp_submit {
left: 164px;
top: 168px;
width: 30px;
height: 25px;
line-height: 25px
}
.cp_hex_ns .cp_current_color,
.cp_hex_ns .cp_submit {
display: none
}
.cp_hex_ns .cp_hex_field {
width: 80px
}
.cp_hex_ns .cp_new_color {
width: 60px;
border: 1px solid #8f8f8f
}
.cp_dark {
background: #161616;
border-color: #2a2a2a
}
.cp_dark .cp_color {
outline-color: #333
}
.cp_dark .cp_hue {
border-color: #555
}
.cp_dark .cp_field,
.cp_dark .cp_hex_field {
background: #101010;
border-color: #2d2d2d
}
.cp_dark .cp_field_letter {
background: #131313;
border-color: #2d2d2d;
color: #696969
}
.cp_dark .cp_field input,
.cp_dark .cp_hex_field input {
color: #7a7a7a
}
.cp_dark .cp_field_uarr {
border-bottom-color: #696969
}
.cp_dark .cp_field_darr {
border-top-color: #696969
}
.cp_dark .cp_focus {
border-color: #444
}
.cp_dark .cp_submit {
background: #131313;
border-color: #2d2d2d;
color: #7a7a7a
}
.cp_dark .cp_submit:hover {
background-color: #101010;
border-color: #444
}
.cp_new_color,
.cp_hex_field {
display: none
}
.cp_new_color.cp_cc_bg {
display: block
}
.cp_hex_field.cp_cc_bg {
display: block;
width: 82px !important;
}
.cp_hex.cp_cc_bg {
width: 207px;
height: 201px
}

@media(max-width:468px) {
.table th, .table td {
padding: 8px 0px 3px 8px !important;
}}