:root{--color-blue: #007bff;--color-lightyellow: #fff3cd;--color-yellow: #ffc107;--color-darkyellow: #856404;--color-red: #dc3545;--color-lightgreen: #d4edda;--color-darkgreen: #155724;--color-grey: #6c757d;--color-lightgrey: #dfdfdf;--color-black: #2e2529;--color-white: #f7f7f7}body{font-family:sans-serif;color:var(--color-black);margin:0}body .cardholder{display:flex;gap:.8em;flex-direction:column;margin:1em;user-select:none}body .cardholder .card{display:flex;flex-direction:column;border-radius:.3em;border:1px solid var(--color-lightgrey);overflow:hidden}body .cardholder .card .card-header{font-weight:bold;font-size:1.2em;background-color:var(--color-white);padding:.5em 1em}body .cardholder .card .card-body{padding:.8em;border-top:1px solid var(--color-lightgrey)}body .cardholder .card .card-body .card-content{display:flex;flex-direction:column;gap:.4em}body .cardholder .card .card-body .card-content .info{padding:1em;background-color:var(--color-lightyellow);color:var(--color-darkyellow)}body .cardholder .card .card-body .card-content .success{padding:1em;background-color:var(--color-lightgreen);color:var(--color-darkgreen)}body .cardholder .card .card-body .card-content .hidden{display:none}body .cardholder .card .card-body .card-content .media-input-field{display:flex;flex-direction:column}body .cardholder .card .card-body .card-content .media-input-field h4{margin:.4em}body .cardholder .card .card-body .card-content .media-input-field input{padding:.4em .8em;border:1px solid var(--color-lightgrey)}body .cardholder .card .card-body .card-content #playlist{display:flex;flex-direction:column;gap:.8em;margin:.8em 0}body .cardholder .card .card-body .card-content #playlist .playlist-item{padding:.4em .8em;position:relative;border:1px solid var(--color-lightgrey);background-color:var(--color-white);word-wrap:break-word}body .cardholder .card .card-body .card-content #playlist .playlist-item>div{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body .cardholder .card .card-body .card-content #playlist .playlist-item>div:first-child{font-weight:bold}body .cardholder .btn-container{display:flex;align-items:center}body .cardholder .btn-container .btn{position:relative;width:fit-content;margin:.3em;padding:.4em .8em;border-radius:.3em;cursor:pointer;white-space:nowrap;z-index:1}body .cardholder .btn-container .btn.btn-primary{background-color:var(--color-blue);color:var(--color-white)}body .cardholder .btn-container .btn.btn-secondary{background-color:var(--color-grey);color:var(--color-white)}body .cardholder .btn-container .btn.btn-info{background-color:var(--color-yellow);color:var(--color-black)}body .cardholder .btn-container .btn.btn-alert{background-color:var(--color-red);color:var(--color-white)}body .cardholder .btn-container .btn.btn-disabled{opacity:.5;cursor:not-allowed}body .cardholder .btn-container .btn.btn-right{margin-left:auto}body .cardholder .btn-container .btn:not(.btn-disabled):hover::after{display:block;content:"";width:calc(100% + .3em);height:calc(100% + .3em);background:inherit;position:absolute;top:-0.15em;left:-0.15em;z-index:-1;border-radius:.4em;opacity:.5}body .cardholder .btn-container .time{width:80px}body .cardholder .btn-container .time:last-child{text-align:right}body .cardholder .btn-container .progress{-webkit-appearance:none;appearance:none;width:100%;margin:0 .4em;border:1px solid var(--color-lightgrey);border-radius:.3em;cursor:pointer}body .cardholder .btn-container .progress::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.2em;height:1.2em;background:var(--color-blue);border-radius:.3em}body .cardholder .btn-container .progress.slider::-moz-range-thumb{width:1.2em;height:1.2em;background:var(--color-blue);border-radius:.3em}body .cardholder .btn-container.wrap{flex-wrap:wrap}body .cardholder .btn-container.hidden{display:none}