.colorRick_dialog
{
    --width:256px;
    --height:256px;
    --width-hue:15px;
    --width-opacity:15px;
    --pad-opacity:10px;
    --pad:10px;
    --colorblock-height:20px;
    --inputcontainer-height:120px;

    background-color: #333;
    width:calc(var(--width) + var(--pad-opacity) + 3 * var(--pad) + var(--width-hue) + var(--width-opacity));
    height:calc(var(--height) + var(--colorblock-height) + 30px + var(--inputcontainer-height));
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    z-index: 999999;

}

.colorRick_dialog *
{
    font-size: 13px;
}

.colorRick_area
{
    width:var(--width);
    height:var(--height);
    left:var(--pad);
    top:var(--pad);
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(0, 255, 11));
    position: absolute;
    cursor:pointer;
}

.colorRick_brightness
{
    background: linear-gradient(hsla(0,0%,100%,0),#000);
    width:100%;
    height:100%;
    pointer-events: none;
}

.colorRick_eyeDrop
{
    cursor:pointer;
    top:calc(var(--pad) + var(--pad) + var(--height));
    margin-top:3px;
    height:var(--width-hue);
    width:var(--width-hue);
    background-color:#aaa;
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m9.22 13.59 5.32-5.31-2.95-2.95-7.3 7.3a.71.71 0 0 0 0 1l1.94 1.94a.73.73 0 0 0 1 0ZM12.42 4.5l2.85-2.85a2.09 2.09 0 0 1 2.95 0h0a2.09 2.09 0 0 1 0 2.95l-2.85 2.84M10.38 4.12l5.36 5.36M5.01 14.86l-2.1 2.09M12.04 10.8H6.15M1.92 18.97h0'/%3E%3Cpath style='fill:none' d='M0 0h20v20H0z'/%3E%3C/svg%3E");
    position: absolute;
    left:calc(var(--width) + var(--pad) + var(--pad));
}

.colorRick_eyeDrop:hover
{
    background-color:#fff;
}


.colorRick_hue
{
    cursor:pointer;
    top:var(--pad);
    background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red);
    height:var(--height);

    width:var(--width-hue);
    position: absolute;
    left:calc(var(--width) + var(--pad) + var(--pad));
}

.colorRick_opacity
{
    cursor:pointer;
    top:var(--pad);
    background:linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
    height:var(--height);

    width:var(--width-opacity);
    position: absolute;
    left:calc(var(--width) + var(--pad) + var(--pad) + var(--pad) + var(--width-hue));
}

.colorRick_preview
{
    position: absolute;
    width:calc(var(--width) / 10 * 9);
    height:var(--colorblock-height);
    top:calc(var(--height) + 20px);
    margin-left:10px;
}

.colorRick_preview_orig
{
    margin-left:calc(calc(var(--width) / 10 * 9) + 10px);
    width:calc(var(--width) / 10);
    cursor:pointer;
}

.colorRick_cursor
{
    width:4px;
    height:4px;
    border:1px solid transparent;
    background-color: white;
    position: absolute;
    pointer-events: none;
    border-radius: 100%;
}

.colorRick_cursor_hue,.colorRick_cursor_opacity
{
    position: absolute;
    width:19px;
    margin-left: -2px;
    height:0px;
    border-top:1px solid white;
    border-bottom:1px solid white;
    position: absolute;
    pointer-events: none;
}

.colorRick_inputcontainer
{
    position: absolute;

    height:var(--inputcontainer-height);
    /* top:250px; */
    top:calc(var(--height) + 20px + 20px + 10px);
    left:0px;
    width:100%;
    background-color: #000;
    padding:10px;
}

.colorRick_inputcontainer table
{
    width:var(--width);
}

.colorRick_inputcontainer, .colorRick_inputcontainer table
{
    color:#999;
}

.colorRick_input
{
    background-color: #444;
    border:0px solid transparent;
    opacity: 1;
    color:#ddd;
}

.colorRick_input_small
{
    width:60px;
    margin-left:8px;
}

.colorRick_input_hex
{
    width:60px;
}

.opacity_title
{
    width:60px;
    display:inline-block;
    margin-left:6px;
}

.colorRick_invalid
{
    opacity: 0.5;
}

.colorRick_inputcontainer table
{
    /* width:90%; */
}

.colorRick_inputcontainer table,.colorRick_inputcontainer table td, .colorRick_inputcontainer table tr
{
    /* pointer-events: none; */
    user-select: none;

    vertical-align: top;
}

.colorRick_inputcontainer table td.right
{
    text-align: right;
    height: 30px;
}
