.color-picker-container{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.color-palette{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;background:transparent;padding:0 .25rem .5rem;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAABlBMVEXl5eX////ixexJAAAAP0lEQVR42u3QsQkAAAzDsPb/p7tmzViQHxB42rYMAAAAAAAAAAAAAAAAAADwCvAUAAAAAAAAAAAAAAAAAACQHZeJEgGhaMOUAAAAAElFTkSuQmCC);background-size:24px;background-position:150% 150%}.color{display:block;border-radius:100rem;margin:.25rem;width:2rem;height:2rem;max-width:2rem;max-height:2rem;min-width:2rem;min-height:2rem;border:3px solid transparent;cursor:pointer;opacity:1;position:relative}.color:active,.color:focus{outline:none}.outline .color{background:transparent!important}.active-color-icon{opacity:0;border-radius:100%;padding:.1rem}.active .active-color-icon{opacity:1}.active-color-icon path{fill:#fff}.transparent .active-color-icon path,.white .active-color-icon path{fill:#000}canvas{-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.1);box-shadow:0 0 2px 0 rgba(0,0,0,.1)}.whiteboard-page>div:not(.context-menu):not(.vue-portal){background:#f1f3f5}.tool-icon.tool-color{padding:.25rem .75rem}.tool-icon.tool-color span{padding:0;display:inline-block;max-height:1.5rem;max-width:1.5rem;min-height:1.5rem;min-width:1.5rem;border-radius:2rem}.darkmode .tool-icon.tool-color span{border:1px solid #343a40}.lightmode .tool-icon.tool-color span{border:1px solid #f8f9fa}.cursor-box{background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0IiB2aWV3Qm94PSIwIDAgMTE4IDEzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwbDI3LjA4IDEzMi44NzMgMzMuOTk4LTQ4LjI0IDU2LjQyMy0xNS41OHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOC41ODkgMTEuODY1bDIxLjM1NiAxMDUuNjM3IDI2Ljg1LTM4LjU5MiA0NS4zNjItMTIuMDE1eiIvPjwvc3ZnPg==);background-size:contain;background-repeat:no-repeat;width:24px;height:24px;margin-left:-5px;padding-top:24px;position:absolute;z-index:10000;pointer-events:none}.cursor-box-name{color:#fff;background:#000;padding:4px 8px;position:relative;top:-30%;left:70%}.corners-soft .cursor-box-name{border-radius:3px}.corners-round .cursor-box-name{border-radius:1000px}.bg-picker-example{width:1.8rem;height:1.8rem;border:1px solid #dee2e6;margin-right:.5rem}