* { box-sizing:border-box; }
 html { width:100%;font-family:sans-serif; }
 body { background:#ddd;padding:0px;padding-left:0px;margin:0px;height:100%;transition:padding-left 0.5s ease-in-out; }
 body.open { padding-left:500px; }
        #svg-section {margin-bottom: 20px;}
        .gradient-wrapper {display: flex;align-items: flex-start;margin-bottom: 20px;border:1px solid #000;padding:10px;position:relative; }
        .preview-box {width: 50px;height: 50px;border: 1px solid #ccc;margin-right: 20px;transform:rotate(90deg)}
        .controls {display: flex;flex-direction: column;flex:1 1 auto; }
        .color-block {display: flex;align-items: center;margin-bottom: 10px;}
        .actions {margin-top: 10px;}
        svg { max-width:500px; }
        #outlines path,
        #details path { fill:#000000 !important }

        .custom-select {
            position: relative;
            width: 200px;
        }

        .custom-options {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #ccc;
            background: #fff;
            display: none;
            z-index: 100;
        }

        .custom-options div {
            display: flex;
            align-items: center;
            padding: 5px;
            cursor: pointer;
        }

        .custom-options div:hover {
            background-color: #f0f0f0;
        }

        .color-box {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            border: 1px solid #000;
        }

        .selected-option {
            display: flex;
            align-items: center;
            padding: 5px;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
        }
        .hover-box {
            position: absolute;
            background-color: #c1c1c1;
            color: white;
            padding: 10px;
            border-radius: 5px;
            border:1px solid #000;
            display: none;
            pointer-events: none; /* Makes the box non-interactive */
        }
        svg #svg-element path:hover { cursor:pointer; }





        #svg-section { position:relative;width:100%;max-width:600px;padding:0px 30px 0px 50px;height:100%; }
        #svg-section svg { width:100%;max-width:500px; }
        button { appearance:none;width:30px;height:30px;border:none;background:transparent;background-size:contain; }
        button:hover { cursor:pointer;opacity:0.6; }
        #saveButton { background:transparent url("/SVG/icon-download.svg");position:absolute;bottom:0;right:0;z-index:10; }
        #add-gradient { background:transparent url("/SVG/icon-add.svg"); }
        button.add-color { background:transparent url("/SVG/icon-add.svg"); }
        button.remove-container { position:absolute;top:10px;right:10px;background:transparent url("/SVG/icon-close.svg"); }
        button.remove-color { background:transparent url("/SVG/icon-close.svg");width:22px;height:22px;margin-left:10px; }
        button.apply { background:transparent url("/SVG/icon-brush.svg") no-repeat;margin-left:30px; }



        .wheel {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid #333;
  border-radius: 50%;
}

.knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.container-main { padding:60px;display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
#add-gradient { position:absolute;bottom:15px;right:15px;z-index:2;background:#ffffff url("/SVG/icon-add.svg");width:40px;height:40px; }
#main-container { height:100%;overflow-y:auto;background:#f1f1f1; }
#palette-dock { transition:left 0.5s ease-in-out;position:fixed;left:0;top:0;width:500px;height:100%;background:#fff;padding:15px 15px 70px; }
#palette-dock.closed { left:-500px; }
.show-hide { position:absolute;top:15px;right:-50px;transform:scaleX(-1);width:50px;height:50px;background:#fff url("/SVG/icon-arrows.svg") no-repeat;background-size:20px auto;background-position:center center;border-top-left-radius:20px;border-bottom-left-radius:20px; }
.show-hide:hover { cursor:pointer;width:60px;right:-60px; }
#palette-dock.closed .show-hide { transform:scaleX(1);border-radius:0px;border-bottom-right-radius:20px;border-top-right-radius:20px; }
#activebox { width:50px;height:50px;position:absolute;top:0;right:0;border:1px solid #000;background:#c1c1c1; }
#activebox::after { content:"";display:block;width:30px;height:30px;background:rgba(255,255,255,0.5) url("/SVG/icon-brush.svg") no-repeat center;background-size:24px auto;position:absolute;bottom:8px;left:9px; }



.color-block select,
.color-block input  { height:30px; }

#unitselect { position:fixed;top:15px;left:calc(50% - 100px);width:200px; }
#unitselect select { width:100%;height:30px; }

@media(max-width:768px){
    #palette-dock { width:calc(100% - 50px);left:auto;right:50px;transition:right 0.5s ease-in-out; }
    #palette-dock.closed { left:auto;right:100% }
    body.open { padding-left:0px; }
}