/* The editor's color panel styles, copied from css/movidmo.css 2026-11-08 (.cp-*, .bubbledialog, .selectbutton, .colorbox) so /sketch/ can use the real panel without the editor's global CSS. */
.arrowcontainer{position: absolute; padding: 0px; text-align: center; background: transparent; width: auto; height: 8px;}
.bubbledialog{position: absolute; z-index: 1000; background: #f2f2f2; border: 2px solid #FC4A1A; border-radius: 10px; padding: 10px; box-shadow: 0 0 10px rgba(68,68,68,1);}
.bubbledialog *{overscroll-behavior: contain;}
.bubblecontainer{text-align: center; font-family: 'Open Sans', sans-serif !important; font-size: 14px; display: inline-block; width: auto; height: auto;}
.colorbox{display: inline-block; width: 100%; height: 100%; border: 1px solid silver; box-sizing: border-box; margin-bottom: 0px; margin-right: 0px; border-radius: 6px;}
.colorboxbg{position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; margin-bottom: 0px; margin-right: 0px; background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; background-size: 10px 10px, 10px 10px;}
.ved .ved-top > div:not(.bubbledialog){font-size: 13.5px !important; vertical-align: top !important;}
.ved .ved-top > div:not(.bubbledialog) + div:not(.bubbledialog){margin-left: 7px !important;}
.ved .oi-body .selectbutton{border-color: #dbe5e8; border-radius: 8px;}
.ved .oi-body .selectbutton:hover,.ved .oi-body .selectbutton:hover:enabled{border-color: #4abdac;}
.ved .oi-body .selectbutton:disabled{background: #f3f6f7; border-color: #e3edf0;}
.ved .oi-sectioned .selecttext > span{margin-left: 6px; vertical-align: middle;}
.ved .oi-sectioned .selecttext > i,.ved .oi-sectioned .selecttext > .layericon{color: #1a6b7a; vertical-align: middle;}
.ved .bubbledialog{background: #fff; border: 1px solid #cfdde1; border-radius: 12px; box-shadow: 0 14px 36px rgba(14,59,69,.18), 0 2px 6px rgba(14,59,69,.08);}
.ved .bubbledialog .banner{color: #5a6468; letter-spacing: .05em;}
.ved .shadowpresets .selectbutton{height: 30px; padding: 0 12px !important; border-radius: 999px; border-color: #d5e2e6; font-size: 13px; margin-right: 4px !important;}
.ved .shadowpresets .selectbutton:hover{border-color: #1a6b7a; background: #eef7f8;}
.ms-header .ms-filterbutton .selecttext,.ms-header .ms-source .selecttext{width: auto !important;}
.ms-filterbutton .selecttext i{color: #1a6b7a; margin-right: 6px;}
.ni-inline .selecttext{display: flex !important; align-items: center; height: auto !important; line-height: normal !important; overflow: visible !important;}
.ni-inline .selecttext > div{display: inline-flex !important; align-items: center;}
.selectbutton{display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; align-self: flex-start; flex-grow: 0; font-size: 14px; background: #ffffff; color: #444; padding: 4px; border: 1px solid #E3E3E3; height: 30px; line-height: 20px; border-radius: 5px; box-sizing: border-box; cursor: pointer; user-select: none; margin: 0px; position: relative; font-family: Open Sans, sans-serif; width: 100%;}
.selectbutton:hover{border-color: #FC4A1A;}
.selectbutton:hover:enabled{border-color: #FC4A1A;}
.selectbutton:hover:disabled{border-color: #E3E3E3;}
.selectbutton:focus{outline:0;}
.selectbutton:disabled{color: silver; background: #E3E3E3; cursor: default;}
.selecttext{flex: 1 1 auto; padding: 0px; width: calc(100% - 14px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 20px; line-height: 20px; vertical-align: top; font-size: 14px; text-align: center; margin-right: 4px;}
.selectarrow{flex: 0 1 auto; display: inline-block; padding: 0px; width: 9px; vertical-align: top;}
.animuicontrols .selectbutton{}
.icd .icd-fields .selectbutton{border-radius: 8px !important; border-color: #cfdde1 !important; height: 32px;}
.icd .icd-fields .selectbutton,.icd .icd-fields .selectbutton:disabled{background: #fff !important;}
.icd .icd-fields .selectbutton:disabled{opacity: .5; cursor: default;}
.cp-panel{padding: 0 !important;}
.cp-box{width: 264px; max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; padding: 12px; box-sizing: border-box; font-family: Poppins, sans-serif;}
.cp-head{display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.cp-chip{flex: none; width: 32px; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(14,59,69,.15); background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/10px 10px;}
.cp-hex{flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid #cfdde1; border-radius: 8px; padding: 0 10px; font: 500 13px Poppins, sans-serif; color: #0e3b45; text-transform: uppercase; box-sizing: border-box;}
.cp-hex:focus{outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(74,189,172,.2);}
.cp-alpha{flex: none; font: 500 11px Poppins, sans-serif; color: #55707a; min-width: 0;}
.cp-drop{flex: none; width: 32px; height: 32px; border: 1px solid #cfdde1; border-radius: 8px; background: #fff; color: #1a6b7a; cursor: pointer;}
.cp-drop:hover{background: #eef7f8; border-color: #1a6b7a;}
.cp-sec{margin-top: 10px;}
.cp-h{font: 600 11px Poppins, sans-serif; color: #55707a; letter-spacing: .02em; margin: 0 0 6px; text-align: left;}
.cp-grid{display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;}
.cp-sw{position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 7px; cursor: pointer; background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/8px 8px; box-shadow: inset 0 0 0 1px rgba(14,59,69,.14);}
.cp-sw:hover{transform: scale(1.08);}
.cp-sw.cp-on{box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a6b7a;}
.cp-none{background: #fff !important;}
.cp-none:after,.cp-chip.cp-none:after{content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; background: #e5484d; transform: translateX(-50%) rotate(45deg); border-radius: 2px;}
.cp-chip.cp-none{position: relative; background: #fff;}
.cp-plus{background: #eef7f8 !important; color: #1a6b7a; font-size: 11px; box-shadow: inset 0 0 0 1px #cfdde1 !important;}
.cp-plus.cp-on{background: #1a6b7a !important; color: #fff; box-shadow: none !important;}
.cp-photos{display: flex; flex-direction: column; gap: 6px;}
.cp-prow{display: grid; grid-template-columns: 44px repeat(8, 1fr); gap: 4px; align-items: center;}
.cp-thumb{width: 44px; height: 24px; border: 0; padding: 0; border-radius: 6px; background-size: cover; background-position: center; cursor: crosshair; box-shadow: inset 0 0 0 1px rgba(14,59,69,.15);}
.cp-prow .cp-sw{border-radius: 6px;}
.cp-custom{display: none; margin-top: 10px;}
.cp-custom.cp-open{display: block;}
.cp-sv{position: relative; height: 140px; border-radius: 8px; cursor: crosshair; touch-action: none; background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0));}
.cp-sv-dot{position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3); pointer-events: none;}
.cp-bar{position: relative; height: 12px; border-radius: 999px; margin-top: 10px; cursor: pointer; touch-action: none;}
.cp-hue{background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);}
.cp-alp{background: repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/8px 8px;}
.cp-alp-fill{position: absolute; inset: 0; border-radius: inherit;}
.cp-bar-dot{position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.3); pointer-events: none;}
.fd .fd-stylepart .fd-stylepick .selecttext{text-align: left !important; padding-left: 12px; font: 500 14px Poppins, sans-serif; color: #0e3b45;}
.ved div:has(> .searchbox) > .selectbutton{height: 36px !important; width: auto !important; min-width: 124px; margin: 0 !important; padding: 0 10px 0 14px; border: 1px solid #d5e2e6 !important; border-radius: 999px !important; background: #fff; display: inline-flex !important; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box;}
.ved div:has(> .searchbox) > .selectbutton:hover{border-color: #b9ccd1 !important;}
.ved div:has(> .searchbox) > .selectbutton .selecttext{font: 500 13.5px Poppins, sans-serif !important; color: #0e3b45; width: auto !important;}
.ved .ved-editgroup .selectbutton{margin-left: 5px;}
.cp-opacity{display: flex; align-items: center; gap: 10px; margin: 0 0 12px;}
.cp-opacity .cp-bar{flex: 1 1 auto; margin-top: 0;}
.cp-oplabel{flex: none; font: 500 11px Poppins, sans-serif; color: #55707a;}
.cp-opacity .cp-alpha{flex: none; min-width: 32px; text-align: right;}
.cp-opacity.cp-off{opacity: .45; pointer-events: none;}
.cp-cur{background: rgba(14,59,69,.05); border-radius: 10px; padding: 10px 10px 2px; margin-bottom: 14px;}
.cp-cur .cp-head{margin-bottom: 10px;}
.cp-cur .cp-custom{margin: 0 0 10px;}
.cp-cur .cp-opacity{margin-bottom: 10px;}
.cp-mix{flex: none; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; background: #eef7f8; color: #1a6b7a; box-shadow: inset 0 0 0 1px #cfdde1; font: 600 11.5px Poppins, sans-serif; letter-spacing: .01em;}
.cp-mix:hover{background: #e2f1f3;}
.cp-mix.cp-on{background: #1a6b7a; color: #fff; box-shadow: none;}
.ved .ved-save > div:not(.bubbledialog) + div:not(.bubbledialog){min-width: 48px; text-align: center !important;}
.ved .ved-save > div:not(.bubbledialog):first-of-type{width: 16px; overflow: hidden;}
.cp-head{flex-wrap: wrap;}
.cp-hex{min-width: 84px;}
.cp-mix{margin-left: auto;}
.cp-cur .cp-head{gap: 6px;}
.cp-cur .cp-chip{width: 28px; height: 28px; border-radius: 7px;}
.cp-cur .cp-hex{height: 30px; padding: 0 8px;}
.cp-cur .cp-drop{width: 30px; height: 30px;}
.cp-cur .cp-mix{height: 24px; padding: 0 8px; font-size: 11px;}
.cp-head{flex-wrap: nowrap;}
.cp-hex{flex: 1 1 84px; width: 84px;}
.mo-tool .bd-color-row .selectbutton{margin:0 !important}
.mo-tool button.bd-color-swatch .selecttext,.mo-tool button.bd-color-swatch .selectarrow{display:none !important}
.selectbutton.cs-button > .selectarrow{display:none !important}
.selectbutton.cs-button > .selecttext{margin:0 auto}
.selectbutton.cs-button{min-width:46px !important;justify-content:center}