/* Colorpicker - BS5.3 Compatibility Fix */
.colorpicker {
    width: 356px;
    height: 176px;
    overflow: hidden;
    position: absolute;
    background: url(/templates/1/themeChanger/images/colorpicker_background.png);
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    z-index: 99999 !important; /* Bumped up for Navbar safety */
}

/* Ensure inputs don't inherit Bootstrap's large padding/borders */
.colorpicker input {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    position: absolute;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #898989;
    top: 4px;
    right: 11px;
    text-align: right;
    margin: 0;
    padding: 0 !important;
    height: 11px;
    outline: none;
    box-shadow: none !important;
}

/* --- 1. THE MAIN COLOR MAP --- */
.colorpicker_color { 
    width: 150px; height: 150px; left: 14px; top: 13px; 
    position: absolute; background: #f00; overflow: hidden; cursor: crosshair; 
}

/* If overlay image is missing, this CSS gradient simulates it */
.colorpicker_color div { 
    position: absolute; top: 0; left: 0; width: 150px; height: 150px; 
    background: url(/templates/1/themeChanger/images/colorpicker_overlay.png); 
    /* Fallback: Black/White overlay if image fails */
    background: linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent);
}

.colorpicker_color div div { 
    position: absolute; top: 0; left: 0; width: 11px; height: 11px; 
    overflow: hidden; background: url(/templates/1/themeChanger/images/colorpicker_select.gif); 
    margin: -5px 0 0 -5px; 
}

/* --- 2. THE HUE SLIDER (The Rainbow) --- */
.colorpicker_hue { 
    position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; 
    /* Since colorpicker_hue.png is missing, we DRAW the rainbow */
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%) !important;
}

.colorpicker_hue div { 
    position: absolute; width: 35px; height: 9px; overflow: hidden; 
    background: url(/templates/1/themeChanger/images/colorpicker_indic.gif) left top; 
    margin: -4px 0 0 0; left: 0px; 
}

/* --- 3. PREVIEW BOXES (Top Right) --- */
.colorpicker_new_color { 
    position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; 
    background: #f00; border: 1px solid #333; 
}

.colorpicker_current_color { 
    position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; 
    background: #f00; border: 1px solid #333;
}

/* --- 4. DATA FIELDS (The ones you have files for) --- */
.colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(/templates/1/themeChanger/images/colorpicker_hex.png) top; left: 212px; top: 142px; }
.colorpicker_hex input { right: 6px; }

.colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; }
.colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; }

.colorpicker_rgb_r { background-image: url(/templates/1/themeChanger/images/colorpicker_rgb_r.png); top: 52px; left: 212px; }
.colorpicker_rgb_g { background-image: url(/templates/1/themeChanger/images/colorpicker_rgb_g.png); top: 82px; left: 212px; }
.colorpicker_rgb_b { background-image: url(/templates/1/themeChanger/images/colorpicker_rgb_r.png); top: 112px; left: 212px; } /* Using _r as fallback */

.colorpicker_hsb_h { background-image: url(/templates/1/themeChanger/images/colorpicker_hsb_h.png); top: 52px; left: 282px; }
.colorpicker_hsb_s { background-image: url(/templates/1/themeChanger/images/colorpicker_hsb_s.png); top: 82px; left: 282px; }
.colorpicker_hsb_b { background-image: url(/templates/1/themeChanger/images/colorpicker_hsb_b.png); top: 112px; left: 282px; }

.colorpicker_submit { position: absolute; width: 22px; height: 22px; background: url(/templates/1/themeChanger/images/colorpicker_submit.png) top; left: 322px; top: 142px; overflow: hidden; cursor: pointer; }

/* Focus states */
.colorpicker_focus { background-position: center; }
.colorpicker_hex.colorpicker_focus { background-position: bottom; }
.colorpicker_submit.colorpicker_focus { background-position: bottom; }
.colorpicker_slider { background-position: bottom; }