/*!
 * Radiohost AIO skins: shared mechanics, loaded with every skin.
 * Skinned widgets do not load their default stylesheets, so this file covers what the widget scripts
 * rely on: hiding (.a-hide), spinners, player panels, podcast episode sliders, tabs, marquee and forms.
 * It also resets what the libraries loaded by the widgets (Bootstrap 4, DataTables, jQuery UI) set for the
 * same class names and the skins leave alone.
 */
.rh-skin{display:block;container-type:inline-size;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}
.rh-skin *,.rh-skin *::before,.rh-skin *::after{box-sizing:border-box}
.rh-skin :is(h1,h2,h3,h4,h5,h6,p,ul,ol,figure){margin:0;padding:0}
.rh-skin ul{list-style:none}
.rh-skin img{display:block;max-width:100%}
.rh-skin small{font-size:smaller;font-weight:inherit}
.rh-skin a{text-decoration:none}
.rh-skin button{font:inherit}
.rh-skin .a-hide{display:none!important}
.rh-skin .rhs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rh-skin .fa-spinner,.rh-skin .rhwp-loading i{animation:rhsSpin 1.1s linear infinite}
@keyframes rhsSpin{to{transform:rotate(360deg)}}
@keyframes rhsPulse{0%{box-shadow:0 0 0 0 var(--rhs-pulse,rgba(255,59,48,.55))}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes rhsEq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@keyframes rhsTicker{to{transform:translateX(-50%)}}
@keyframes rhsRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* icon buttons (<i> elements with Font Awesome classes) */
.rh-skin [role=button]{cursor:pointer;user-select:none}

/* player: loading screen, history and recordings panels */
/* sizes from the player configurator (SkinsModule::sizeVars): a width is a width limited to the container
   (max-width:100%), a height is only a minimum, so the skin grows with its content and nothing is cut. The width
   goes on .rh-skin, the query container of the skin layout, so a 320 px player gets the narrow layout. */
.rh-skin[data-rh-widget=player]{width:min(var(--rhs-bg-w,100%),var(--rhs-wr-w,100%));max-width:100%;min-height:var(--rhs-bg-h,0)}
.rh-skin .rhwp-player{position:relative;display:block;width:auto;max-width:100%;height:auto;min-height:var(--rhs-wr-h,0)}
.rh-skin .rhwp-player .rhwp-wrapper{position:relative;display:block;width:auto;max-width:100%;height:auto;min-height:var(--rhs-wr-h,0)}
/* header_height / footer_height: minimum height of the now-playing block of each skin and of the now/next presenters */
.rh-skin .rhwp-player :is(.pu-hero,.an-top,.sz-w--music,.md-oled,.ap-player,.pw-wavecard){min-height:var(--rhs-head-h,auto)}
.rh-skin .rhwp-player :has(>.rhwp-dj-now+.rhwp-dj-next){min-height:var(--rhs-foot-h,auto)}
.rh-skin .rhwp-player .rhwp-loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.rh-skin .rhwp-player .rhwp-body{overflow:auto}
.rh-skin .rhwp-player .rhs-toggle-body{display:none}
.rh-skin .rhwp-player .rhs-toggle-body.active{display:block}
.rh-skin .rhwp-player .rhwp-wrapper>audio{display:block;width:100%;margin:12px 0}
.rh-skin .rhwp-cover,.rh-skin .rhwp-dj-avatar,.rh-skin .rhwp-song-cover{background-size:cover;background-position:center;background-repeat:no-repeat}
.rh-skin .rhwp-body ul li{display:flex;align-items:center}
.rh-skin .rhwp-recording-meta{flex:1;min-width:0}
.rh-skin .rhwp-recording-duration{display:flex;align-items:center;gap:10px}
.rh-skin .recording-progress-wrapper{position:relative;flex:1;max-width:240px;height:6px;cursor:pointer;overflow:hidden}
.rh-skin .recording-progress-bar,.rh-skin .a-recording-progress-wrapper .recording-progress-bar{position:absolute;top:0;left:0;height:100%;pointer-events:none}
.rh-skin .rhwp-tag{display:inline-block;cursor:pointer}
.rh-skin .recording-load-more{width:100%;cursor:pointer}

/* oscilloscope (skins.js) */
.rh-skin .rhs-scope{position:relative;overflow:hidden}
.rh-skin .rhs-scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rh-skin .rhs-scope .rhs-lbl{position:absolute;left:14px;bottom:10px;z-index:1;pointer-events:none}
.rh-skin .rhs-open.off{opacity:.4;pointer-events:none}

/* volume slider (jQuery UI, its theme stylesheet is loaded by the player) */
.rh-skin .rhwp-volume-slider{position:relative;flex:1;height:4px;border:0;border-radius:9px;cursor:pointer;touch-action:none}
.rh-skin .rhwp-volume-slider .ui-slider-range{position:absolute;top:0;left:0;height:100%;border-radius:9px}
.rh-skin .rhwp-volume-slider .ui-slider-handle{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:0;border-radius:50%;outline:none;cursor:grab}

/* agenda */
.rh-skin .rh-agenda .a-calendar-switch{cursor:pointer}
.rh-skin .rh-agenda .a-event{position:relative}
.rh-skin .rh-agenda .a-event-content-more{display:none}
.rh-skin .rh-agenda .a-event.a-open .a-event-content-more{display:block}

/* podcast episode: sliders (values from JS in CSS variables) */
.rh-skin .range-container{--range-container-height:16px;--range-height:4px;--hover-range-height:6px;--thumb-height:14px;
  height:var(--range-container-height);display:flex;align-items:center;flex:1;cursor:pointer;touch-action:none}
.rh-skin .range-container .range{position:relative;width:100%;height:var(--range-height);border-radius:10px;background:var(--range-bg-color);transition:height .15s}
.rh-skin .range-container:hover .range{height:var(--hover-range-height)}
.rh-skin .range-container .range>span{position:absolute;left:0;top:0;bottom:0;height:auto;border-radius:10px}
.rh-skin .range-container .range .preview{right:calc(100% - var(--preview-position,0) * 100%);background:var(--preview-color);display:none}
.rh-skin .range-container:hover .range .preview{display:block}
.rh-skin .range-container .range .buffered{right:calc(100% - var(--buffer-position,0) * 100%);background:var(--buffer-color)}
.rh-skin .range-container .range .progress{right:calc(100% - var(--progress-position,0) * 100%);background:var(--progress-color)}
.rh-skin .range-container .range .thumb-indicator{right:auto;bottom:auto;top:50%;left:calc(var(--progress-position,0) * 100%);width:var(--thumb-height);height:var(--thumb-height);border-radius:50%;transform:translate(-50%,-50%);background:var(--thumb-color);z-index:2}
.rh-skin .time-skip{position:relative;display:inline-grid;place-items:center;cursor:pointer}
.rh-skin .time-skip svg{fill:currentColor}
.rh-skin .time-skip span{position:absolute;inset:0;display:grid;place-items:center}
.rh-skin .time-skip.disabled,.rh-skin .change-podcast.disabled{opacity:.35;pointer-events:none}
.rh-skin .cursor-pointer{cursor:pointer}

/* recordings: DataTables with its Bootstrap 4 markup (.row, .col-*, .nav-tabs, .pagination). The widget loads the
   DataTables stylesheets and, unless switched off in the settings, Bootstrap 4. Skin stylesheets print after them
   (SkinsModule::printStylesLast); the rules below reset what the skins do not set themselves. */
/* DataTables writes the width it measured inline (0px for a table in a hidden tab) */
.rh-skin .rh-recordings table{width:100%!important;max-width:none;margin:0;border:0;border-collapse:separate;border-spacing:0;box-sizing:border-box}
.rh-skin .rh-recordings tr{background:none}
.rh-skin .rh-recordings :is(th,td){box-sizing:border-box;border-top:0;border-bottom:0}
.rh-skin .rh-recordings .tab-pane{display:none}
.rh-skin .rh-recordings .tab-pane.active{display:block}
.rh-skin .rh-recordings .nav-item{margin:0}
.rh-skin .rh-recordings .nav-link{margin:0;border:0}
.rh-skin .rh-recordings .dataTables_wrapper .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0}
.rh-skin .rh-recordings .dataTables_wrapper .row>*{flex:0 1 auto;width:auto;max-width:100%;min-width:0;padding:0;position:static}
.rh-skin .rh-recordings .dataTables_wrapper .row>:only-child{flex:1 1 100%}
.rh-skin .rh-recordings :is(.dataTables_length,.dataTables_filter,.dataTables_info,.dataTables_paginate){float:none;margin:0;padding:0;color:inherit;text-align:start;white-space:normal}
.rh-skin .rh-recordings :is(.dataTables_length,.dataTables_filter) label{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-weight:inherit;white-space:nowrap}
.rh-skin .rh-recordings :is(.dataTables_length,.dataTables_filter) :is(select,input){display:block;width:auto;min-width:0}
.rh-skin .rh-recordings .dataTables_filter input{flex:1 1 auto}
.rh-skin .rh-recordings .pagination{display:flex;gap:4px;padding:0;margin:0;list-style:none}
.rh-skin .rh-recordings .dataTables_wrapper .dataTables_paginate .paginate_button{min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.rh-skin .rh-recordings .page-link{position:static;margin:0;border:0;line-height:inherit}
.rh-skin .rh-recordings .page-item.disabled .page-link{opacity:.45;pointer-events:none}
.rh-skin .rh-recordings .a-recording-progress-wrapper{position:relative;height:6px;max-width:260px;cursor:pointer;overflow:hidden}

/* greetings: ticker driven by jQuery.marquee */
.rh-skin .rh-greetings-marquee{overflow:hidden;white-space:nowrap}
.rh-skin .rh-greetings-marquee:empty{display:none}
/* widget-greetings.js appends this notice when the list cannot be loaded, also under the form, which works without it */
.rh-skin .rh-greetings>.a-notice{display:block;flex:1 1 auto;min-width:0;max-width:100%;font-size:.875em;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.rh-skin .rh-greetings>.a-notice .a-notice{display:inline}
.rh-skin .rh-greetings-form-wrapper~.a-notice{display:none}

/* forms (Bootstrap 4 positions .form-check-input absolutely) */
.rh-skin label{margin-bottom:0}
.rh-skin .form-group{display:block}
.rh-skin .form-check{position:relative;display:flex;align-items:center;gap:10px}
.rh-skin .form-check-input{position:static;margin:0;flex:none}
.rh-skin progress{display:block;width:100%}

@media (prefers-reduced-motion:reduce){
  .rh-skin *,.rh-skin *::before,.rh-skin *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}