/* The original color input retains its existing appearance and dimensions. */
#dd-color-dialog { --dd-green:#3f6047; color:#303830; background:#fffefa; border:1px solid #d7dfd3; border-radius:14px; padding:0; width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-shadow:0 20px 80px #0003; font:15px/1.5 system-ui,sans-serif; }
#dd-color-dialog::backdrop { background:rgb(25 35 27 / 45%); }
#dd-color-dialog * { box-sizing:border-box; }
#dd-color-dialog .dd-c-head { background:#edf1eb; padding:20px 24px; display:flex; justify-content:space-between; gap:16px; }
#dd-color-dialog h2 { font:28px/1.2 Georgia,serif; margin:0 0 5px; }
#dd-color-dialog p { margin:0; color:#63705e; }
#dd-color-dialog button { font:inherit; cursor:pointer; }
#dd-color-dialog .dd-c-close { border:0; background:transparent; color:#3f6047; font-size:26px; width:44px; height:44px; flex-shrink:0; }
#dd-color-dialog .dd-c-body { padding:22px 24px; display:grid; grid-template-columns:minmax(0,1fr) 235px; gap:24px; }
#dd-color-dialog h3 { font-size:14px; margin:0 0 10px; }
#dd-color-dialog .dd-c-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
#dd-color-dialog .dd-c-swatch { border:2px solid transparent; background:transparent; border-radius:7px; padding:5px; min-height:40px; min-width:0; }
#dd-color-dialog .dd-c-swatch span { display:block; height:26px; border-radius:4px; box-shadow:inset 0 0 0 1px #0003; }
#dd-color-dialog .dd-c-swatch[aria-pressed="true"] { border-color:var(--dd-green); }
#dd-color-dialog .dd-c-caption { min-height:26px; font-size:12px; padding-top:4px; }
#dd-color-dialog .dd-c-recent { margin-top:22px; }
#dd-color-dialog .dd-c-empty { font-size:13px; }
#dd-color-dialog .dd-c-custom { border-left:1px solid #d7dfd3; padding-left:20px; }
#dd-color-dialog .sp-container { background:transparent; border:0; width:100%; }
#dd-color-dialog .sp-picker-container { width:100%; padding:0; margin:0; border:0; float:none; }
#dd-color-dialog .sp-top { margin-bottom:12px; }
#dd-color-dialog .sp-dragger { width:12px; height:12px; border:2px solid white; border-radius:50%; box-shadow:0 0 0 1px #333; }
#dd-color-dialog .sp-slider { height:8px; border:2px solid white; opacity:1; background:transparent; box-shadow:0 0 0 1px #555; }
#dd-color-dialog label { display:block; font-size:13px; margin:10px 0 5px; }
#dd-color-dialog #dd-c-hex { width:100%; padding:10px 12px; border:1px solid #becbb7; border-radius:6px; font:16px ui-monospace,monospace; color:#303830; background:white; }
#dd-color-dialog #dd-c-error { color:#a32b28; font-size:13px; margin-top:8px; }
#dd-color-dialog .dd-c-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 24px; border-top:1px solid #d7dfd3; background:#f7f8f4; }
#dd-color-dialog .dd-c-preview { width:34px; height:34px; border:1px solid #0003; border-radius:5px; }
#dd-color-dialog #dd-c-value { margin-right:auto; font:13px ui-monospace,monospace; }
#dd-color-dialog .dd-c-btn { min-height:44px; padding:9px 16px; border:1px solid #bdcbb7; border-radius:6px; background:white; color:var(--dd-green); }
#dd-color-dialog .dd-c-apply { background:var(--dd-green); border-color:var(--dd-green); color:white; }
#dd-color-dialog :focus-visible { outline:3px solid #78966e; outline-offset:2px; }
input.dd-color-source {
    display: none !important;
}

.dd-color-trigger {
    appearance: none;
    -webkit-appearance: none;

    display: block;
    vertical-align: middle;
    width: 100%;
    max-width: 100%;
    min-width: 0;
/*    height: 38px;*/
    padding: 4px;
    box-sizing: border-box;

    background: #f5f5f5;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    cursor: pointer;
}
.color-picker-column {
  display: flex;
  flex-direction: column;
  min-height: 78px;
}

.color-picker-column > .dd-color-trigger {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 38px;
  display: flex;
}

.color-picker-column > .dd-color-trigger > span {
  flex: 1;
  height: auto;
  align-self: stretch;
}
.dd-color-trigger > span {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(0 0 0 / 20%);
    border-radius: 2px;
}

.dd-color-trigger:focus-visible {
    outline: 3px solid #78966e;
    outline-offset: 3px;
}

.dd-color-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media(max-width:575px) {
    #dd-color-dialog .dd-c-head { padding:16px; }
    #dd-color-dialog .dd-c-body { padding:16px; grid-template-columns:minmax(0,1fr); gap:20px; }
    #dd-color-dialog .dd-c-custom { border-left:0; border-top:1px solid #d7dfd3; padding:18px 0 0; }
    #dd-color-dialog .sp-container { max-width:280px; }
    #dd-color-dialog .dd-c-footer { padding:12px 16px; }
    #dd-color-dialog .dd-c-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
    #dd-color-dialog .dd-c-swatch { padding:4px; }
}