.ldpp{position:relative;width:640px;height:600px;margin:auto;overflow:hidden}.ldpp{position:relative;width:100%;height:100%}.ldpp .navbar{position:absolute;z-index:1;top:0;left:0;padding:30px 40px 25px;margin-bottom:20px;border-bottom:1px solid #eee;background:#fff;width:100%}.ldpp .navbar .inner{width:100%}.ldpp .navbar .nav-link{cursor:pointer}.ldpp div[data-panel=view] .ldp,.ldpp div[data-panel=mypal] .ldp{width:calc(50% - 20px);margin:0 10px 5px;padding:10px 10px 2px}.ldpp div[data-panel=view] .ldp .name,.ldpp div[data-panel=mypal] .ldp .name{font-size:.875em;text-align:left}.ldpp .panel:nth-child(1){transform:translate(0,0) translateZ(1px)}.ldpp .panel:nth-child(2){transform:translate(100%,0) translateZ(1px)}.ldpp .panel:nth-child(3){transform:translate(200%,0) translateZ(1px)}.ldpp .panels{position:relative;transition:transform .5s ease-in-out;width:100%;height:100%;text-align:center}.ldpp .panel{position:absolute;top:0;left:0;padding:110px 10px 20px;width:100%;height:100%;overflow-y:scroll}.ldpp .panel.active{display:block}.ldpp .panel>.inner{text-align:center}.ldpp .panel>.inner:after{content:" ";display:inline-block;width:280px;height:1px;margin:0 10px 11px}.ldpp .panel[data-panel=edit]{padding-bottom:0}.ldpp .panel[data-panel=edit] .edit>.inner{padding:20px 20px 0}.ldpp .panel[data-panel=edit] .ldp{margin:7px 0;padding:0 20px 0}.ldpp .panel[data-panel=edit] .ldp,.ldpe .ldp{width:100%}.ldpp .panel[data-panel=edit] .ldp .name,.ldpe .ldp .name{display:none}.ldpp .panel[data-panel=edit] .ldp .colors,.ldpe .ldp .colors{height:120px;border:1px solid #fff;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,0.2);overflow:visible}.ldpp .panel[data-panel=edit] .ldp .color:first-child,.ldpe .ldp .color:first-child{border-radius:5px 0 0 5px}.ldpp .panel[data-panel=edit] .ldp .color:last-child,.ldpe .ldp .color:last-child{border-radius:0 5px 5px 0}.ldpp .panel[data-panel=edit] .ldp .color,.ldpe .ldp .color{transition:flex .3s ease-in-out;position:relative}.ldpp .panel[data-panel=edit] .ldp .color.dark *[data-action],.ldpe .ldp .color.dark *[data-action]{color:#fff}.ldpp .panel[data-panel=edit] .ldp .color *[data-action],.ldpe .ldp .color *[data-action]{opacity:0;width:20px;margin:auto;height:100%;text-align:center;display:flex;flex-direction:column;justify-content:space-around;color:#444}.ldpp .panel[data-panel=edit] .ldp .color *[data-action] i,.ldpe .ldp .color *[data-action] i{flex:0 0 auto;cursor:pointer}.ldpp .panel[data-panel=edit] .ldp .color.active *[data-action],.ldpe .ldp .color.active *[data-action]{opacity:1}.ldpp .panel[data-panel=edit] .ldp .color.active,.ldpe .ldp .color.active{transform:scale(1.02);border-radius:3px;border:2px solid #000;box-shadow:inset 0 0 0 4px #fff,0 2px 4px 0 rgba(0,0,0,0.3);z-index:1;position:relative}.ldpp .panel[data-panel=edit] .ldp .color.active:after,.ldpe .ldp .color.active:after{content:" ";width:20px;height:20px;position:absolute;bottom:0;transform:translate(-50%,50%) rotate(45deg);background:currentColor;left:50%;display:block;box-shadow:2px 2px 2px rgba(0,0,0,0.1);border-right:2px solid rgba(0,0,0,0.2);border-bottom:2px solid rgba(0,0,0,0.2);display:none}.ldpp .panel[data-panel=edit] .ldColorPicker,.ldpe .ldColorPicker{width:100%;height:calc(10.9875em + 1rem - 7px);display:inline-block;vertical-align:top;margin-top:0}.ldpp .panel[data-panel=edit] .ldColorPicker .ldcp-panel,.ldpe .ldColorPicker .ldcp-panel{padding:0}.ldpp .panel[data-panel=edit] .value,.ldpe .value{margin:1.2125em 0 .1em}.ldpp .panel[data-panel=edit] .value:last-child,.ldpe .value:last-child{margin-bottom:0}.ldpp .panel[data-panel=edit] .edit,.ldpe .edit{text-align:left;margin-top:0}.ldpp .panel[data-panel=edit] .edit>.inner,.ldpe .edit>.inner{padding-top:20px}.ldpp .panel[data-panel=edit]>.foot,.ldpe>.foot{padding:0 20px;width:100%;text-align:left}.ldpp .panel[data-panel=edit] .ldrs,.ldpe .ldrs{margin-top:-3px}.ldpp .panel[data-panel=edit] .label-group,.ldpe .label-group{position:relative;font-size:.75em;line-height:1.75em}.ldpp .panel[data-panel=mypal] .btn-load{position:relative;width:50%;margin:20px auto;cursor:pointer}.ldpe .ldp{padding:0;margin:0}.ldpp .row.config,.ldpe .row.config{display:none}.ldpp .row.config.active,.ldpe .row.config.active{display:flex}.ldpe .ldColorPicker{z-index:1 !important}.ldp{display:inline-block;position:relative}.ldp .colors{cursor:pointer;position:relative;box-shadow:0 0 0 1px #fff,0 0 1px 1px rgba(0,0,0,0.2);width:100%;border-radius:3px;overflow:hidden;display:flex;flex-wrap:nowrap}.ldp .color{flex:1 1 0;display:inline-block;width:0;height:100%}.ldp .color:first-child,.ldp .ctrl+.color{border-radius:3px 0 0 3px}.ldp .color:last-child{border-radius:0 3px 3px 0}.ldp .ctrl{position:absolute;z-index:1;display:flex;flex-wrap:nowrap;justify-content:center;padding:3px;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;transition:opacity ease-in-out .2s;text-align:center}.ldp .ctrl *[data-action]{color:rgba(255,255,255,0.7);height:100%;flex:1 1 0;line-height:1em;font-size:.8em;display:flex;text-decoration:none;align-items:center;justify-content:center;flex-direction:column}.ldp .ctrl *[data-action] i{font-size:1.1em;margin-bottom:.1em}.ldp .ctrl *[data-action]:hover{color:#fff;background:rgba(255,255,255,0.3)}.ldp .ctrl *[data-action]:first-child,.ldp .ctrl .ctrl+*[data-action]{border-radius:3px 0 0 3px}.ldp .ctrl *[data-action]:last-child{border-radius:0 3px 3px 0}.ldp .name{text-transform:capitalize;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.ldp:hover .ctrl{opacity:1;opacity:1}.ldp{width:15em}.ldp .colors{height:calc(1.5em + 0.75rem + 2px)}.ldp.ldp-sm{font-size:.875rem}.ldp.ldp-sm .colors{height:calc(1.5em + 0.5rem + 1.7px)}.ldp.ldp-lg{font-size:1.25rem}.ldp.ldp-lg .colors{height:calc(1.5em + 1rem + 2px)}