mediacms/static/css/playlist.css

.notifications{position:fixed;bottom:0;left:0;height:auto!important;max-width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;z-index:5}.notifications>*{position:relative}.notification-item{display:table;width:288px;max-width:100%;min-height:48px;margin:12px;color:#f1f1f1;background-color:#323232;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-transition:opacity .5s linear;-o-transition:opacity .5s linear;-moz-transition:opacity .5s linear;transition:opacity .5s linear}.notification-item>*{display:table-cell;vertical-align:middle;line-height:20px;padding:8px 24px;overflow:hidden}.notification-item.hidden{opacity:0}.spinner-loader{position:relative;width:48px;height:48px}.spinner-loader.tiny{width:16px;height:16px}.spinner-loader.x-small{width:24px;height:24px}.spinner-loader.small{width:32px;height:32px}.spinner-loader.large{width:56px;height:56px}.spinner-loader.x-large{width:64px;height:64px}.spinner-loader:before{content:"";display:block;padding-top:100%}.spinner-loader svg{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;margin:auto;-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center;-webkit-animation:rotate 2s linear infinite;-moz-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.spinner-loader circle{stroke:var(--spinner-loader-color);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;-moz-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-moz-keyframes rotate{to{-moz-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);-moz-transform:rotate(1turn);-o-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@-moz-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.playlist-form-field.playlist-description.focused:after,.playlist-form-field.playlist-title.focused:after{background-color:var(--playlist-form-title-focused-bg-color)}.playlist-privacy{border-color:var(--playlist-privacy-border-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn{color:var(--playlist-form-cancel-button-text-color)}.playlist-form-wrap .playlist-form-actions button.cancel-btn:focus,.playlist-form-wrap .playlist-form-actions button.cancel-btn:hover{color:var(--playlist-form-cancel-button-hover-text-color)}.playlist-form-wrap input[type=text],.playlist-form-wrap textarea{color:var(--playlist-form-field-text-color);border-color:var(--playlist-form-field-border-color)}.playlist-form-wrap input[type=text]:focus,.playlist-form-wrap textarea:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.playlist-form-field.playlist-description,.playlist-form-field.playlist-title{position:relative}.playlist-form-field.playlist-description.focused:after,.playlist-form-field.playlist-title.focused:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block}.playlist-form-field.playlist-description.invalid:after,.playlist-form-field.playlist-title.invalid:after{content:"";position:absolute;bottom:-1px;width:100%;height:2px;display:block;background-color:rgba(255,0,0,.8)}.playlist-privacy{padding-bottom:12px;border-style:solid;border-width:0 0 1px}.playlist-form-wrap .playlist-form-field{position:relative;margin:16px 24px 0}.playlist-form-wrap .playlist-form-label{display:block;font-size:12px;line-height:20px;letter-spacing:.132px}.playlist-form-wrap .playlist-form-actions{position:relative;display:inline-block;width:100%;float:left;margin-top:4px;padding:8px}.playlist-form-wrap .playlist-form-actions button{height:40px;padding:10px 16px;font-size:14px;line-height:20px;letter-spacing:.007px;font-weight:500;border-width:0;background:none;position:relative;width:auto;float:left}.playlist-form-wrap .playlist-form-actions button.create-btn{float:right;color:var(--default-theme-color)}.playlist-form-wrap input[type=text],.playlist-form-wrap label,.playlist-form-wrap textarea{display:block;width:100%}.playlist-form-wrap textarea{min-width:100%;max-width:100%;min-height:21px;height:24px;line-height:21px;overflow-y:hidden;overflow-wrap:break-word;vertical-align:baseline;resize:none}.playlist-form-wrap input[type=text],.playlist-form-wrap textarea{padding:0 0 2px;font-size:14px;line-height:20px;border-width:0 0 1px;background:none;outline:0}.playlist-form-wrap input[type=text]::-webkit-input-placeholder,.playlist-form-wrap textarea::-webkit-input-placeholder{color:#909090;opacity:1}.playlist-form-wrap input[type=text]::-moz-placeholder,.playlist-form-wrap textarea::-moz-placeholder{color:#909090;opacity:1}.playlist-form-wrap input[type=text]:-ms-input-placeholder,.playlist-form-wrap textarea:-ms-input-placeholder{opacity:1}.playlist-form-wrap input[type=text]::-ms-input-placeholder,.playlist-form-wrap textarea::-ms-input-placeholder{opacity:1}.playlist-form-wrap input[type=text]::placeholder,.playlist-form-wrap textarea::placeholder{color:#909090;opacity:1}.playlist-form-wrap input[type=text]:-ms-input-placeholder,.playlist-form-wrap textarea:-ms-input-placeholder{color:#909090}.playlist-form-wrap input[type=text]::-ms-input-placeholder,.playlist-form-wrap textarea::-ms-input-placeholder{color:#909090}.playlist-form-wrap input[type=radio]{margin-right:16px;vertical-align:middle}.playlist-form-wrap label{padding:4px 0;font-size:14px;line-height:21px;cursor:pointer}#page-playlist{background-color:var(--playlist-page-bg-color)}.playlist-details{color:var(--playlist-page-details-text-color)}.playlist-details .playlist-thumb{background-color:var(--playlist-page-thumb-bg-color)}.playlist-details .playlist-title h1{color:var(--playlist-page-title-link-text-color)}.playlist-details .playlist-title h1 a{color:inherit}.playlist-details .playlist-actions .circle-icon-button{background-color:var(--playlist-page-actions-circle-icon-bg-color)}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu ul li button{color:var(--playlist-page-actions-nav-item-button-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:focus,.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:hover{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-hover-text-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:focus .material-icons,.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal:hover .material-icons{color:var(--playlist-page-actions-popup-message-bottom-cancel-button-icon-hover-text-color)}.playlist-details .playlist-status{color:var(--playlist-page-status-text-color);background-color:var(--playlist-page-status-bg-color)}.playlist-details .playlist-status .material-icons{color:var(--playlist-page-status-icon-text-color)}.playlist-details .playlist-description a{text-decoration:none}.playlist-details .playlist-author{border-top-color:var(--playlist-page-author-border-top-color)}.playlist-details .playlist-author .playlist-author-name a{color:var(--playlist-page-author-name-link-color)}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button{color:var(--playlist-page-author-edit-playlist-icon-button-text-color);background-color:var(--playlist-page-author-edit-playlist-icon-button-bg-color)}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button:active{color:var(--playlist-page-author-edit-playlist-icon-button-active-text-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap{color:var(--playlist-page-author-edit-playlist-form-wrap-text-color);background-color:var(--playlist-page-author-edit-playlist-form-wrap-bg-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-form-wrap{border-color:var(--playlist-page-author-edit-playlist-form-wrap-border-color)}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:active,.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:focus,.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button:hover{color:var(--playlist-page-author-edit-playlist-form-wrap-title-circle-icon-hover-text-color)}.playlist-details .playlist-author .playlist-author-thumb span{color:var(--playlist-page-author-edit-playlist-author-thumb-text-color);background-color:var(--playlist-page-author-edit-playlist-author-thumb-bg-color)}.playlist-details{background:var(--playlist-page-details-bg-color)}.playlist-videos-list{background:var(--playlist-page-video-list-bg-color)}.playlist-videos-list .item .item-content h3 span{background-color:var(--playlist-page-video-list-item-title-bg-color)}.playlist-videos-list .item:hover{background-color:var(--playlist-page-video-list-item-title-hover-bg-color)}.playlist-videos-list .item:hover .item-content h3 span{background-color:var(--playlist-page-video-list-item-title-hover-bg-color)}.playlist-videos-list .item:after{border-top-color:var(--playlist-page-video-list-item-after-bg-color)}.playlist-videos-list .item-order-number{color:var(--playlist-page-video-list-item-order-text-color)}.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:active,.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:focus,.playlist-videos-list .item-playlist-options-wrap .circle-icon-button:hover{color:var(--playlist-page-video-list-item-options-icon-hover-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-text-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:focus,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:hover{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-text-color)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:focus .material-icons,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal:hover .material-icons{color:var(--playlist-page-video-list-item-options-popup-cancel-removal-button-hover-icon-text-color)}.playlist-videos-list .item-playlist-drag .circle-icon-button{background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-drag .circle-icon-button:active,.playlist-videos-list .item-playlist-drag .circle-icon-button:focus,.playlist-videos-list .item-playlist-drag .circle-icon-button:hover{color:var(--playlist-page-video-list-item-options-icon-hover-color)}@media screen and (min-width:1008px){#page-playlist{position:absolute;top:0;left:0;right:0;bottom:0;display:block;height:100%}#page-playlist .page-main,#page-playlist .page-main-wrap,#page-playlist>*{height:100%}}#page-playlist .page-main{padding-bottom:0!important}@media screen and (min-width:1008px){#page-playlist .page-main{min-height:-webkit-calc(100vh - 56px);min-height:-moz-calc(100vh - 56px);min-height:calc(100vh - 56px)}}@media screen and (min-width:492px){#page-playlist .item-content{padding-right:48px}#page-playlist .item-main{display:block;width:auto}#page-playlist .item-main a{display:inline-block}#page-playlist .item-main h3{margin-top:12px;margin-bottom:8px}}@media screen and (min-width:492px) and (max-width:1008px){#page-playlist .item-main h3{margin-top:6px}}#page-playlist .items-list{max-width:100%}@media screen and (min-width:1008px){.page-main-wrap #page-playlist{position:relative;top:auto;left:auto;right:auto;bottom:auto}.page-main-wrap #page-playlist .page-main,.page-main-wrap #page-playlist .page-main-wrap,.page-main-wrap #page-playlist>*{height:100%}}.playlist-details{position:relative;display:block;width:100%;padding:24px 32px;font-size:14px;line-height:21px;overflow-wrap:break-word;white-space:pre-wrap}@media screen and (min-width:1008px){.playlist-details{width:420px;min-height:100%;max-height:100%;overflow:auto;min-height:-webkit-calc(100vh - 56px);min-height:-moz-calc(100vh - 56px);min-height:calc(100vh - 56px)}}.playlist-details .playlist-thumb{position:relative;margin-bottom:16px;background-position:50%;-moz-background-size:cover;background-size:cover}.playlist-details .playlist-thumb.no-thumb:before{position:absolute;top:50%;left:50%;margin:-2.25rem 0 0 -1.5rem;font-size:48px;line-height:1;padding:0;font-family:Material Icons;text-decoration:none;content:"\e43c"}.playlist-details .playlist-thumb>*{position:relative;display:block;width:100%;padding-bottom:56%}.playlist-details .playlist-thumb>*>*{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.playlist-details .playlist-thumb>*>* img{max-width:100%;height:auto;visibility:hidden}.playlist-details .playlist-thumb>*>* .play-all{position:absolute;bottom:0;left:0;right:0;display:block;text-align:center;color:hsla(0,0%,100%,.8);background-color:rgba(17,17,17,.8)}.playlist-details .playlist-thumb>*>* .play-all>*{display:table;width:100%;height:40px}.playlist-details .playlist-thumb>*>* .play-all>*>*{display:table-cell;vertical-align:middle;padding-top:2px}.playlist-details .playlist-thumb>*>* .play-all .material-icons{margin-right:8px;margin-bottom:2px}.playlist-details .playlist-thumb>*>* .play-all .play-all-label{margin-right:8px}.playlist-details .playlist-title h1{font-size:24px;font-weight:400;line-height:30px;margin:0 0 8px}.playlist-details .playlist-title h1 a{text-decoration:none}.playlist-details .playlist-meta{margin-bottom:4px}.playlist-details .playlist-meta>div{display:inline}.playlist-details .playlist-meta>div:before{content:"\2022";margin:0 6px}.playlist-details .playlist-meta>div:first-child:before{content:"";margin:0}.playlist-details .playlist-actions{position:relative}.playlist-details .playlist-actions a.circle-icon-button,.playlist-details .playlist-actions button.circle-icon-button{vertical-align:top;display:inline-block;margin-left:8px}.playlist-details .playlist-actions a.circle-icon-button:first-child,.playlist-details .playlist-actions button.circle-icon-button:first-child{margin-left:-8px}.playlist-details .playlist-actions .playlist-options-wrap .popup{position:absolute;top:100%;left:-8px;top:auto;bottom:100%;margin-bottom:4px}.playlist-details .playlist-actions .playlist-options-wrap.playlist-options-main .popup{width:180px}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu{padding:8px 0}.playlist-details .playlist-actions .playlist-options-wrap .popup-main .nav-menu ul li button{font-size:13px}.playlist-details .playlist-actions .popup-message-bottom button{position:relative;width:auto;padding:0;border:0}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal,.playlist-details .playlist-actions .popup-message-bottom button.proceed-playlist-removal{background-color:rgba(0,0,0,0)}.playlist-details .playlist-actions .popup-message-bottom button.proceed-playlist-removal{float:right;color:var(--default-theme-color)}.playlist-details .playlist-actions .popup-message-bottom button.cancel-playlist-removal{float:left}.playlist-details .playlist-status{position:relative;display:inline-block;margin:8px 0 4px;padding:2px 4px 1px;font-size:12px;font-weight:500;line-height:12px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.playlist-details .playlist-status .material-icons{font-size:13px;display:inline-block;margin:0 3px 1px 0}.playlist-details .playlist-status div{position:relative;display:inline-block}.playlist-details .playlist-status div:first-letter{text-transform:capitalize}.playlist-details .playlist-description{display:block;padding-top:8px;padding-bottom:0}.playlist-details .playlist-author{display:block;margin-top:16px;padding:16px 0;border-top-width:1px;border-top-style:solid}.playlist-details .playlist-author>*{display:table;width:100%}.playlist-details .playlist-author>*>*{display:table-cell;vertical-align:top}.playlist-details .playlist-author a{text-decoration:none}.playlist-details .playlist-author .playlist-author-thumb{width:48px}.playlist-details .playlist-author .playlist-author-thumb span{display:block;width:48px;height:48px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;overflow:hidden;margin-right:16px;background-position:50%;-moz-background-size:cover;background-size:cover;background-repeat:no-repeats}.playlist-details .playlist-author .playlist-author-thumb span img{width:100%;height:100%;visibility:hidden}.playlist-details .playlist-author .playlist-author-thumb span .material-icons{width:100%;height:100%;line-height:48px;text-align:center}.playlist-details .playlist-author .playlist-author-name{min-height:48px;vertical-align:middle}.playlist-details .playlist-author .playlist-author-name a{font-size:14px;font-weight:500}.playlist-details .playlist-author .edit-playlist{padding-left:16px;padding-top:4px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button{position:relative;float:right;width:auto;height:auto;display:inline-block;font-size:14px;font-weight:500;letter-spacing:.007px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*{-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*>*{display:table;padding:6px 16px}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button>*>*>*{display:table-cell;vertical-align:bottom;line-height:1.5}.playlist-details .playlist-author .edit-playlist>button.circle-icon-button .material-icons{line-height:1;padding-right:8px;vertical-align:bottom}.playlist-details .playlist-author .edit-playlist .popup{position:absolute}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap{position:relative;width:100%;max-width:280px;display:inline-block;text-align:initial}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title{height:52px;padding:16px 52px 15px 24px;line-height:20px;font-size:16px}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .edit-playlist-popup-title .circle-icon-button{position:absolute;top:6px;right:6px;background:none}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-form-wrap{border-width:1px 0 0;border-style:solid}.playlist-details .playlist-author .edit-playlist .edit-playlist-form-wrap .playlist-description{margin-top:16px}@media screen and (min-width:1008px){.playlist-videos-list{position:absolute;top:0;right:0;left:0;display:block;height:100%;overflow:auto;margin:0 0 0 420px}}.playlist-videos-list .item{position:relative;max-width:100%;padding:16px 24px 16px 36px;margin-bottom:0!important}.playlist-videos-list .item:after{content:"";position:absolute;display:block;bottom:0;left:36px;right:24px;border-top-width:1px;border-top-style:solid}.playlist-videos-list .item:first-child{margin-top:1px;padding-top:23px}.playlist-videos-list .item-order-number{position:absolute;top:0;left:0;bottom:0;display:block;width:36px;font-size:14px;font-weight:500;line-height:16px;padding-top:4px}.playlist-videos-list .item-order-number>div{display:table;width:100%;height:100%}.playlist-videos-list .item-order-number>div>div{display:table-cell;text-align:center;vertical-align:middle}@media screen and (min-width:492px){.playlist-videos-list .items-list-wrap{min-height:67px}.playlist-videos-list .item-content{min-height:67px!important}.playlist-videos-list .item-thumb{position:absolute!important;top:0!important;left:0!important;width:120px!important;height:67px!important;min-height:67px!important;padding-bottom:0}.playlist-videos-list .item-main{margin-left:128px!important}}.playlist-videos-list .item-playlist-options-wrap{position:relative;width:auto;height:auto;text-align:right}.playlist-videos-list .item-playlist-options-wrap .circle-icon-button{display:inline-block;background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-options-wrap .popup{position:absolute;bottom:100%;right:0}.playlist-videos-list .item-playlist-options-wrap.item-playlist-options-main .popup{width:16rem}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button{position:relative;width:auto;padding:0;border:0}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.cancel-playlist-removal,.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.proceed-playlist-removal{background-color:rgba(0,0,0,0)}.playlist-videos-list .item-playlist-options-wrap .popup-message-bottom button.proceed-playlist-removal{float:right;color:var(--default-theme-color)}@media screen and (min-width:492px){.playlist-videos-list .item-playlist-options-wrap{position:absolute;top:50%;right:24px;margin-top:-20px;text-align:initial}.playlist-videos-list .item-playlist-options-wrap .popup{bottom:auto;top:-12px;right:100%;margin-right:4px;margin-bottom:32px}}@media screen and (min-width:492px){.playlist-videos-list .item:last-child .item-playlist-options-wrap .popup,.playlist-videos-list .item:nth-last-child(2) .item-playlist-options-wrap .popup{top:auto;bottom:-40px}}@media screen and (min-width:492px){.playlist-videos-list .item:first-child .item-playlist-options-wrap .popup{top:-12px;bottom:auto}}.playlist-videos-list.draggable .item:hover .item-order-number:after{content:"drag_handle";position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-12px;font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;cursor:move}.playlist-videos-list.draggable .item:hover .item-order-number div div{visibility:hidden}.playlist-videos-list.draggable .items-list.on-dragging .item,.playlist-videos-list.draggable .items-list.on-dragging .item .item-content h3 span{background-color:var(--playlist-page-video-list-bg-color)}.playlist-videos-list.draggable .items-list.on-dragging .item .item-order-number:after{display:none!important}.playlist-videos-list.draggable .items-list.on-dragging .item .item-order-number div div{visibility:visible!important}