.s-c-p{border:1px dotted #ddd;width:130px;height:172px;box-shadow:-1px 1px 4px rgba(100,100,100,0.15)}.s-c-p.s-c-p-popup{border:1px solid #ddd;background-color:#fcfcfc;z-index:100500}.s-c-p.s-c-p-popup .s-c-p-arrow{position:absolute;width:0;height:0;color:#ddd}.s-c-p.s-c-p-popup .s-c-p-arrow .s-c-p-arrow-inner{position:absolute;width:0;height:0;color:#fcfcfc}.s-c-p .s-c-p-circle{position:absolute;top:5px;left:5px;width:120px;height:120px;background-image:url("images/color-circle.png");user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;background-size:120px 120px;border-radius:130px;box-shadow:-1px 1px 2px rgba(100,100,100,0.4) inset,-1px 1px 2px rgba(100,100,100,0.2)}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(-o-min-device-pixel-ratio:3/2){.s-c-p .s-c-p-circle{background-image:url("images/color-circle@2x.png")}}.s-c-p .s-c-p-circle .s-c-p-circle-inner{pointer-events:none;position:absolute;top:11px;left:11px;width:98px;height:98px;background-color:white;border-radius:98px;box-shadow:-1px 1px 2px rgba(100,100,100,0.4);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.s-c-p .s-c-p-circle-mark,.s-c-p .s-c-p-circle-mark:active,.s-c-p .s-c-p-circle-mark:hover{pointer-events:none;background-color:rgba(255,255,255,0.9);width:4px;height:4px;position:absolute;left:0;top:0;border-radius:0 0 4px 4px;transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.s-c-p .s-c-p-square{cursor:default;position:absolute;top:32px;left:32px;width:66px;height:66px;box-shadow:-1px 1px 4px rgba(100,100,100,0.3);-webkit-backface-visibility:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.s-c-p .s-c-p-square-mark{pointer-events:none;position:absolute;width:4px;height:4px;border:1px solid white;border-radius:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.s-c-p .s-c-p-color{position:absolute;top:132px;width:50px;text-align:center;font-size:10px;line-height:10px;height:12px;overflow:hidden}.s-c-p .s-c-p-color-old{left:15px;color:#eee}.s-c-p .s-c-p-color-new{left:65px;color:#666}.s-c-p .s-c-p-sample{position:absolute;top:145px;width:50px;height:15px;padding:4px 0 1px 0;cursor:pointer;text-align:center;font-size:12px;line-height:13px;overflow:hidden;border-radius:1px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;color:rgba(255,255,255,0.25)}.s-c-p .s-c-p-sample:hover{color:rgba(255,255,255,0.5)}.s-c-p .s-c-p-sample:active{box-shadow:0 0 10px rgba(50,50,50,0.3) inset;color:rgba(255,255,255,0.9)}.s-c-p .s-c-p-sample.s-c-p-light{color:rgba(0,0,0,0.25)}.s-c-p .s-c-p-sample.s-c-p-light:hover{color:rgba(0,0,0,0.5)}.s-c-p .s-c-p-sample.s-c-p-light:active{color:rgba(0,0,0,0.9)}.s-c-p .s-c-p-sample-old{left:15px}.s-c-p .s-c-p-sample-new{left:65px}.s-c-p .s-c-p-mode-switch{position:absolute;top:0;left:0;cursor:pointer;width:15px;height:14px;opacity:.2;background-size:120px 120px;background-image:url("images/color-circle.png");background-position:-39px -27px;transition:opacity 200ms;-webkit-transition:opacity 200ms;-o-transition:opacity 200ms}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(-o-min-device-pixel-ratio:3/2){.s-c-p .s-c-p-mode-switch{background-image:url("images/color-circle@2x.png")}}.s-c-p .s-c-p-mode-switch:hover,.s-c-p .s-c-p-mode-switch:active{opacity:1;transition:opacity 150ms;-webkit-transition:opacity 150ms;-o-transition:opacity 150ms}.s-c-p .s-c-p-color-texts{display:none}.s-c-p.s-c-p-mode-num .s-c-p-mode-switch{background-position:-66px -27px}.s-c-p.s-c-p-mode-num .s-c-p-circle,.s-c-p.s-c-p-mode-num .s-c-p-square,.s-c-p.s-c-p-mode-num .s-c-p-square-mark{display:none}.s-c-p.s-c-p-mode-num .s-c-p-color-texts{color:#333;display:block;padding:15px 0 0 0;font-size:14px;line-height:14px}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column{display:inline-block;width:55px}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column:nth-child(1){margin-left:10px}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column:nth-child(2){margin-left:2px}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column .s-c-p-row{padding:3px 0}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column .s-c-p-row label{display:inline-block;width:18px;height:18px;font-size:14px;line-height:16px;margin:0;padding:0;vertical-align:top}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column .s-c-p-row input{display:inline-block;width:25px;height:14px;font-size:12px;line-height:16px;margin:0;padding:1px 2px;box-shadow:0 0 3px rgba(100,100,100,0.05);vertical-align:top;color:#333;border:1px solid rgba(0,0,0,0.1);border-radius:1px;background-color:#fefefe;transition:border-color 300ms;-webkit-transition:border-color 300ms;-o-transition:border-color 300ms}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-column .s-c-p-row input:focus{border:1px solid rgba(0,0,0,0.30000000000000004);transition:border-color 300ms;-webkit-transition:border-color 300ms;-o-transition:border-color 300ms;outline:0}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-row-full{padding:6px 0 0 0}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-row-full input{margin:0 0 0 10px;width:104px;height:22px;font-size:20px;line-height:22px;text-align:center;padding:0;box-shadow:0 0 5px rgba(100,100,100,0.05);color:#333;border:1px solid rgba(0,0,0,0.1);border-radius:1px;background-color:#fefefe;transition:border-color 300ms;-webkit-transition:border-color 300ms;-o-transition:border-color 300ms}.s-c-p.s-c-p-mode-num .s-c-p-color-texts .s-c-p-row-full input:focus{border:1px solid rgba(0,0,0,0.30000000000000004);transition:border-color 300ms;-webkit-transition:border-color 300ms;-o-transition:border-color 300ms;outline:0}