.root{position:relative;overflow:hidden;width:100%;min-width:290px;height:var(--widget-height);border:1px solid #ebebeb;border-radius:8px;--background-color:#fff;--font-color-primary:#232323;--font-color-secondary:#a0a0a0;--cover-image-border-color:#ebebeb;--icon-fast-forward:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#fast-forward-light-usage);--icon-share:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#share-light-usage);--icon-rewind:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#rewind-light-usage);--seek-bar-background-color:#ebebeb;--seek-bar-foreground-color:#09cef6;--audio-controller-element-spacing:10px;--audio-controller-height:32px;--cover-image-size:85px;--icon-share-size:24px;--kkbox-logo-height:9px;--kkbox-logo-margin-bottom:10px;--kkbox-logo-width:45px;--title-font-size:14px;--title-margin-bottom:5px;--widget-element-spacing:10px;--widget-height:176px;--widget-padding:15px;--seek-bar-height:3px;--seek-bar-input-range-height:20px}@media (min-width:520px){.root{--audio-controller-element-spacing:15px;--cover-image-size:125px;--title-font-size:16px;--title-margin-bottom:10px;--widget-element-spacing:15px}}.for-sm-only{display:block}@media (min-width:520px){.for-sm-only{display:none!important}}.for-lg-only{display:block}@media (max-width:519px){.for-lg-only{display:none!important}}@media screen and (prefers-color-scheme:dark){.root{--background-color:#232323;--font-color-primary:#fff;--font-color-secondary:#7d7d7d;--cover-image-border-color:#323232;--icon-fast-forward:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#fast-forward-dark-usage);--icon-share:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#share-dark-usage);--icon-rewind:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#rewind-dark-usage);--seek-bar-background-color:#4b4b4b;--seek-bar-foreground-color:#09cef6}}body.theme-dark .root{--background-color:#232323;--font-color-primary:#fff;--font-color-secondary:#7d7d7d;--cover-image-border-color:#323232;--icon-fast-forward:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#fast-forward-dark-usage);--icon-share:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#share-dark-usage);--icon-rewind:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#rewind-dark-usage);--seek-bar-background-color:#4b4b4b;--seek-bar-foreground-color:#09cef6}@media screen and (prefers-color-scheme:dark){body.theme-light .root{--background-color:#fff;--font-color-primary:#232323;--font-color-secondary:#a0a0a0;--cover-image-border-color:#ebebeb;--icon-fast-forward:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#fast-forward-light-usage);--icon-share:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#share-light-usage);--icon-rewind:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#rewind-light-usage);--seek-bar-background-color:#ebebeb;--seek-bar-foreground-color:#09cef6}}.widget{position:relative;z-index:5;overflow:hidden;flex-wrap:wrap;width:100%;height:100%;padding:var(--widget-padding);transition:padding .25s,background-color .25s,color .25s;color:var(--font-color-primary);background-color:var(--background-color)}.kkbox-logo-wrapper{position:absolute;top:var(--widget-padding);right:var(--widget-padding);left:var(--widget-padding);height:calc(var(--kkbox-logo-height) + var(--kkbox-logo-margin-bottom))}.kkbox-logo{display:block;width:var(--kkbox-logo-width);height:var(--kkbox-logo-height);margin-right:auto;margin-bottom:var(--kkbox-logo-margin-bottom);margin-left:auto;cursor:pointer;background-color:transparent;background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#kkbox-logo-usage);background-repeat:no-repeat;background-position:50% 50%;background-size:contain}.cover-image-wrapper{position:absolute;top:calc(var(--widget-padding) + var(--kkbox-logo-height) + var(--kkbox-logo-margin-bottom));left:var(--widget-padding);transition:top .25s,left .25s}.cover-image{width:var(--cover-image-size);transition:width .25s,height .25s;border:1px solid var(--cover-image-border-color);border-radius:8px}.cover-image,.info-wrapper{display:flex;height:var(--cover-image-size)}.info-wrapper{overflow:hidden;flex-direction:column;justify-content:center;margin-top:calc(var(--kkbox-logo-height) + var(--kkbox-logo-margin-bottom));margin-right:var(--icon-share-size);margin-left:var(--cover-image-size);padding-right:var(--widget-element-spacing);padding-left:var(--widget-element-spacing);transition:padding .25s,margin .25s,height .25s}@media (min-width:520px){.info-wrapper{height:calc(var(--cover-image-size) - var(--audio-controller-height))}}.title{font-size:var(--title-font-size);font-weight:700;line-height:142.8571428571%;margin-top:0;margin-bottom:var(--title-margin-bottom);transition:font-size .25s,margin-bottom .25s;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal;-webkit-line-clamp:2}.channel,.title{overflow:hidden;text-overflow:ellipsis}.channel{line-height:17px;margin-bottom:5px;white-space:nowrap;color:var(--font-color-secondary)}@media (min-width:520px){.channel{margin-bottom:0}}.channel .icon-explicit{font-size:12px;font-weight:700;line-height:17px;display:inline-block;transform:scale(.75);transform-origin:50% 50%;color:#a0a0a0}.channel .channel-title{font-size:12px;white-space:nowrap}.time-display{font-size:12px;cursor:pointer;color:var(--font-color-secondary)}.share-wrapper{position:absolute;top:calc(var(--widget-padding) + var(--kkbox-logo-height) + var(--kkbox-logo-margin-bottom));right:var(--widget-padding)}.btn{position:relative;width:24px;height:24px;padding:0;cursor:pointer;border:0;outline:0;background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;touch-action:manipulation}.btn-share{background-image:var(--icon-share)}.audio-controller{position:absolute;right:var(--widget-padding);bottom:var(--widget-padding);left:var(--widget-padding);display:flex;align-items:center;justify-content:space-between;height:var(--audio-controller-height);transition:left .25s,width .25s;text-align:center}@media (min-width:520px){.audio-controller{left:calc(var(--widget-padding) + var(--cover-image-size) + var(--widget-element-spacing))}}.audio-controller .control{display:flex;align-items:center;flex:0 0 auto;height:100%;padding-right:calc(var(--audio-controller-element-spacing)/2);padding-left:calc(var(--audio-controller-element-spacing)/2)}.audio-controller .control:first-child{padding-left:0}.audio-controller .control:last-child{padding-right:0}.audio-controller .btn-rewind{background-image:var(--icon-rewind)}.audio-controller .btn-fast-forward{background-image:var(--icon-fast-forward)}.audio-controller .btn-play{width:32px;height:32px;transition:background-image .25s;background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#play-usage)}@media (min-width:520px){.audio-controller .btn-play{margin-left:var(--audio-controller-element-spacing)}}.audio-controller .btn-play:hover{background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#play-hover-usage)}.audio-controller .btn-pause{width:32px;height:32px;transition:background-image .25s;background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#pause-usage)}@media (min-width:520px){.audio-controller .btn-pause{margin-left:var(--audio-controller-element-spacing)}}.audio-controller .btn-pause:hover{background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#pause-hover-usage)}.audio-controller .progress{display:flex;align-items:center;flex:1 0 110px;--value:0%}.audio-controller .progress input{width:100%;height:var(--seek-bar-input-range-height);margin:0;transition:opacity .25s;color:var(--seek-bar-foreground-color);border-radius:var(--seek-bar-height);outline:none;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.audio-controller .progress input::-webkit-slider-runnable-track{height:var(--seek-bar-height);-webkit-user-select:none;user-select:none;border:0;border-radius:var(--seek-bar-height);background-image:linear-gradient(90deg,var(--seek-bar-foreground-color) var(--value,0),var(--seek-bar-background-color) var(--value,0))}.audio-controller .progress input::-webkit-slider-thumb{width:var(--seek-bar-input-range-height);height:var(--seek-bar-input-range-height);margin-top:calc(var(--seek-bar-input-range-height)*-1/2);border:none;outline:none;background:none;box-shadow:none;-webkit-appearance:none;appearance:none}.audio-controller .progress input::-moz-range-progress{height:var(--seek-bar-height);border-radius:var(--seek-bar-height);background-color:var(--seek-bar-foreground-color)}.audio-controller .progress input::-moz-range-track{height:var(--seek-bar-height);background-color:var(--seek-bar-background-color)}.audio-controller .progress input::-moz-range-thumb{width:var(--seek-bar-input-range-height);height:var(--seek-bar-input-range-height);margin-top:calc(var(--seek-bar-input-range-height)*-1/2);border:none;background:none;-moz-appearance:none;appearance:none}.audio-controller .progress input::-ms-track{color:transparent}.audio-controller .progress input::-ms-fill-upper,.audio-controller .progress input::-ms-track{height:var(--seek-bar-height);background-color:var(--seek-bar-background-color)}.audio-controller .progress input::-ms-fill-lower{height:var(--seek-bar-height);background-color:var(--seek-bar-background-color)}.audio-controller .progress input::-ms-thumb{width:var(--seek-bar-input-range-height);height:var(--seek-bar-input-range-height);margin-top:calc(var(--seek-bar-input-range-height)*-1/2);border:none;background:none;appearance:none}.popup{position:absolute;z-index:0;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:15px;transition:opacity .25s,z-index .25s;opacity:0;color:#fff;background-color:rgba(0,0,0,.85)}.popup.active{z-index:10;opacity:1}.popup .icon-close-popup{position:absolute;top:15px;right:15px;width:24px;height:24px;cursor:pointer;background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#close-usage);background-repeat:no-repeat;background-position:50% 50%;background-size:contain}.popup .actions{display:flex;flex-wrap:wrap;width:calc(var(--action-width)*2);--action-width:125px}.popup-share .popup-title{font-size:12px;margin-top:0;margin-bottom:10px;text-align:center;color:#fff}.popup-share .action{font-size:14px;display:flex;align-items:center;flex:0 0 var(--action-width);width:var(--action-width);height:44px;padding:10px 5px;cursor:pointer;transition:opacity .25s;color:#fff}.popup-share .action:hover{opacity:.4}.popup-share .copy-url:before,.popup-share .share-to-facebook:before,.popup-share .share-to-line:before{display:inline-block;width:24px;height:24px;margin-right:5px;content:"";background-repeat:no-repeat;background-position:50% 50%;background-size:contain}.popup-share .share-to-line:before{background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#line-usage)}.popup-share .share-to-facebook:before{background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#facebook-usage)}.popup-share .copy-url:before{background-image:url(/https/podcast-cdn.kkbox.com/images/widget-icons.9a047cbc97a15b20da65.svg#copy-usage)}.popup-error{background-color:transparent}.popup-error .popup-title{font-size:14px;font-weight:700;line-height:142.8571428571%;margin-top:10px;margin-bottom:10px;padding-right:15px;padding-left:15px;text-align:center;color:var(--font-color-primary)}@media (min-width:520px){.popup-error .popup-title{margin-top:20px;margin-bottom:20px}}.popup-error .actions{justify-content:center;width:100%;--action-width:120px}.popup-error .action.listen-now{font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;width:var(--action-width);height:32px;transition:background-color .25s;text-decoration:none;color:#fff;border-radius:16px;background-color:#09cef6}.popup-error .action.listen-now:hover{background-color:#00b6e1}