.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 20px}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:60px;border-radius:3px;box-shadow:var(--black--opacity) 0 1px 2px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:56px;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:10px;border:none;appearance:none;width:40px;height:60px;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-4px;border-top:8px solid transparent;border-left:10px solid var(--white);border-bottom:8px solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:14px;margin-top:-7px;margin-right:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:14px;margin-top:-7px;margin-left:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:10px 20px 10px 70px;height:44px;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 1px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:5px}.default__artist:not(:empty):before{content:" \2013  "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:56px;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:60px;text-align:left;background:transparent;color:var(--white);line-height:10px;height:var(--progress-bar-height);pointer-events:none;font-size:10px;padding:5px 5px 5px 10px;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:2px;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:5px;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-2px;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:20px;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:20px;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:20px;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:40px;width:16px;height:60px;z-index:2}.default__mute{display:block;width:16px;height:16px;font-size:0;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:4px;height:3px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:4px;max-width:100%;height:4px;position:absolute;content:"";top:50%;margin-top:-4px;right:50%;margin-right:-2px;border-top:4px solid transparent;border-right:4px solid var(--white);border-bottom:4px solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:16px;position:absolute;top:16px;left:0;z-index:3;width:44px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:16px;position:absolute;top:0;left:0;background:var(--greyDark);width:44px}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:44px solid var(--black);border-bottom:16px solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:16px;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:16px;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:15px;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:15px;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:15px;cursor:pointer}