.sticky-note-preload{transition:none!important}
.sticky-note-area__container{width:100%;height:100%;position:relative;overflow:auto;background:#dddddd;box-sizing:border-box}
.sticky-note{position:absolute;width:250px;height:200px;background:#ff8;padding:.5em .25em .75em 1em;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform 150ms cubic-bezier(.165,.84,.44,1);z-index:1;backface-visibility:hidden}
.sticky-note__text{height:calc(100% - 25px);margin-top:16px;position:relative;z-index:1}
.sticky-note__text textarea{background:transparent;font-size:20px;line-height:20px;user-select:none;border:none;width:100%;height:100%;resize:none;padding-right:5px}
.sticky-note__control{position:absolute;font-size:1.1em;cursor:pointer;opacity:0;transition:opacity 150ms ease-in-out}
.sticky-note:hover .sticky-note__control,.sticky-note:active .sticky-note__control{opacity:1}
.sticky-note__close{top:4px;right:4px;z-index:3}
.sticky-note__resize{bottom:4px;right:4px;cursor:se-resize;z-index:3}
.sticky-note__rotate{bottom:4px;left:4px;z-index:3}
.sticky-note__options{top:4px;left:34px;z-index:3}
.sticky-note__options-panel{display:none;position:absolute;top:30px;left:4px;width:calc(100% - 8px);height:auto;z-index:2}
.sticky-note__options-wrapper{display:flex;align-items:center;gap:4px}
.sticky-note__color-palette,.sticky-note__font-color-palette{position:absolute;top:24px;display:none;z-index:4}
.sticky-note__color-palette-panel,.sticky-note__font-color-palette-panel{display:flex;flex-wrap:wrap;width:96px;padding:4px;background:#fdfdfd;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.sticky-note__color,.sticky-note__font-color{margin:4px;width:14px;height:14px;border:1px solid #333}
.sticky-note__rotate-slider{position:absolute;z-index:5;border-radius:4px;overflow:hidden}