icon-audiobook

@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: block; src: url(/design/font/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: block; src: url(/design/font/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: block; src: url(/design/font/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html,body{ margin: 0; width: 100%; height: 100%; font-family: 'Ubuntu', sans-serif; font-weight: 400; cursor: default; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-width: 1024px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } :root{ --music-icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --music-toggle-arrow: url('data:image/svg+xml,'); --story-icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --menu-overview: url('data:image/svg+xml,'); --menu-search: url('data:image/svg+xml,'); --menu-non-stop: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --menu-mymusic: url('data:image/svg+xml,'); --menu-tracks: url('data:image/svg+xml,'); --menu-playlists: url('data:image/svg+xml,'); --menu-queue: url('data:image/svg+xml,'); --menu-activate: url('data:image/svg+xml,'); --menu-search-icn: url('data:image/svg+xml,'); --player-prev-icn: url('data:image/svg+xml,'); --player-next-icn: url('data:image/svg+xml,'); --player-play-icn: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --player-pause-icn: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --player-fav-icn: url('data:image/svg+xml,'); --player-fav-icn-active: url('data:image/svg+xml,'); --player-more-icn: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --player-queue-icn: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); --player-repeat-icn: url('data:image/svg+xml,'); --player-shuffle-icn: url('data:image/svg+xml,'); --player-lyrics-icn: url('data:image/svg+xml,'); --mat-icn-person: url('data:image/svg+xml,'); --mat-icn-album: url('data:image/svg+xml,'); --action-btn-block: url('data:image/svg+xml,'); --action-btn-queue: url('data:image/svg+xml,'); --action-btn-add-plist: url('data:image/svg+xml,'); --action-btn-add: url('data:image/svg+xml,'); --action-btn-follow: url('data:image/svg+xml,'); --action-btn-check: url('data:image/svg+xml,'); --volume-icn-mute: url('data:image/svg+xml,'); --volume-icn-low: url('data:image/svg+xml,'); --volume-icn-med: url('data:image/svg+xml,'); --volume-icn-high: url('data:image/svg+xml,'); --profile-icn-add: url('data:image/svg+xml,'); } h1{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } select{ font-size: 13px; padding: 2px; min-width: 160px; } input::-ms-clear, input { outline: none; } .content_wrapper input::-ms-clear, .error_popup_wrapper input::-ms-clear{ display: none; } .mat-icon::before{ opacity: 0; } .mat-icon { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } .mat-icon::after{ opacity: 1; } div.header{ position: fixed; z-index: 11; top: 0px; left: 0px; right: 0px; height: 64px; min-width: 1024px; border-bottom: 1px solid #0e0e0e; } div.header div.fs-logo{ position: absolute; top: 14px; left: 16px; background-image: url('img/Familystream-icon-diag.svg'); height: 32px; width: 32px; background-size: auto 100%; background-repeat: no-repeat; font-weight: bold; } div.header div.nav_arrow_wrapper{ position: absolute; top: 22px; left: 69px; } div.header div.nav_arrow_wrapper span.mat-icon-svg svg{ height: 20px; } div.header div.nav_arrow_wrapper span.mat-icon-svg.available{ cursor: pointer; } div.header div.nav_arrow_wrapper span.mat-icon-svg.right{ padding-left: -4px; } div.header_centered{ position: relative; display: table; min-width: 550px; left: 50%; } div.header_centered .divider{ display: table-cell; width: 8px; } div.search{ position: relative; display: table-cell; top: 16px; border-style:solid; border-radius:18px; border-width:0px; height: 34px; --width: 350px; z-index: 15; } div.search.focus{ z-index:210; } div.search:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 18px; width: 18px; -webkit-mask: var(--menu-search-icn) no-repeat 100% 100%; mask: var(--menu-search-icn) no-repeat 100% 100%; background-color: #ece3ed; top: 8px; left: 13px; } div.search.focus:before{ background-color: var(--green-highligt2); } div.search input{ border: none; height: 30px; outline: none; font-size: 14px; position: absolute; top: 1px; left: 4px; right: 8px; text-indent: 34px; font-family: inherit; padding-top: 1px; background-color: transparent; color: inherit; } div.header div.top_message{ position: absolute; left: 300px; top: 00px; max-width: 500px; height: 40px; line-height: 50px; font-size: 14px; font-weight: bold; display: none; } div.header div.icons-right{ position: absolute; top: 0px; right: 0px; height: 100%; margin-right: 5px; } div.header div.icons-right div{ float: left; } div.header div.icons-right div.avatar{ height: 32px; width: 32px; margin-top: 14px; margin-left: 14px; border-radius: 50%; background-size: 100% auto; background-repeat: no-repeat; } div.header div.icons-right div.avatar .is_online{ height: 8px; width: 8px; border-radius: 50%; margin-left: 24px; opacity: 0; position: absolute; border: 1px solid white; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); } div.header div.icons-right div.avatar .is_online.show{ opacity: 1; } div.header div.icons-right div.avatar_img{ display: block; } div.header div.icons-right div.avatar_svg{ display: none; } div.header div.icons-right div.avatar_svg{ overflow: hidden; } div.header div.icons-right div.avatar_svg svg{ margin-top: -3px; margin-left: -3px; } div.header div.icons-right div.user{ white-space: nowrap; line-height: 65px; padding-left: 8px; } div.header div.icons-right div.logoff{ margin-left: 12px; margin-right: 9px; top: 21px; position: relative; cursor: pointer; } div.header div.icons-right div.logoff li{ font-size: 22px; } div.header div.icons-right div.devider{ position: relative; top: 18px; height: 26px; width: 1px; margin-left: 16px; display: none; border-left: 1px solid #666; } div.header div.music_story_toggle{ position: relative; line-height: 29px; display: table-cell; font-weight: bold; font-size: 12px; text-transform: uppercase; margin-right: 14px; border-radius: 24px; padding-left: 14px; padding-right: 5px; margin-right: 36px; width: 1px; top: 16px; } div.header div.music_story_toggle .icn_music{ width: 27px; height: 27px; position: absolute; top: 3px; left: 10px; } div.header div.music_story_toggle .icn_music:after{ content: var(--music-icon); } div.header div.music_story_toggle .icn_story{ width: 27px; height: 27px; position: absolute; top: 3px; left: 10px; } div.header div.music_story_toggle .icn_story:after{ content: var(--story-icon); } div.header div.music_story_toggle .icn.right{ width: 18px; height: 18px; position: absolute; top: 7px; right: 10px; } div.header div.music_story_toggle .icn.right:after{ content: var(--music-toggle-arrow); } div.header div.music_story_toggle .text{ display: block; margin-left: 32px; margin-right: 30px; position: relative; line-height: 34px; font-weight: 700; } div.header div.music_story_toggle:hover{ cursor: pointer; } div.header div.music_story_toggle div{ font-size: 30px; color: inherit; padding-right: 4px; } div.menu_wrapper{ position: fixed; z-index: 11; top: 64px; bottom: 150px; left: 0px; width: 240px; } div.menu_wrapper div.left_menu{ margin-top: 20px; position: relative; z-index: 2; } div.menu_wrapper div.left_menu div.item{ height: 36px; font-size: 16px; text-indent: 21px; --border-left: 4px solid; font-weight: 500; cursor: pointer; position: relative; } div.menu_wrapper div.left_menu div.left_menu_header{ height: 43px; font-size: 16px; text-indent: 23px; font-weight: 500; position: relative; color: #ece3ed; margin-top: 40px; } div.menu_wrapper div.left_menu div.item:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 20px; width: 20px; } div.menu_wrapper div.left_menu div.item.home:before{ -webkit-mask: var(--menu-overview) no-repeat 100% 100%; mask: var(--menu-overview) no-repeat 100% 100%; top: 8px; } div.menu_wrapper div.left_menu div.item.browse:before{ -webkit-mask: var(--menu-mymusic) no-repeat 100% 100%; mask: var(--menu-mymusic) no-repeat 100% 100%; top: 7px; } div.menu_wrapper div.left_menu div.item.non-stop:before{ -webkit-mask: var(--menu-non-stop) no-repeat 100% 100%; mask: var(--menu-non-stop) no-repeat 100% 100%; top: 7px; } div.menu_wrapper div.left_menu div.item.playlists:before{ -webkit-mask: var(--menu-playlists) no-repeat 100% 100%; mask: var(--menu-playlists) no-repeat 100% 100%; top: 8px; left: 22px; } div.menu_wrapper div.left_menu div.item.favorite:before{ -webkit-mask: var(--menu-mymusic) no-repeat 100% 100%; mask: var(--menu-mymusic) no-repeat 100% 100%; top: 7px; } div.menu_wrapper div.left_menu div.item.my_tracks:before{ -webkit-mask: var(--menu-tracks) no-repeat 100% 100%; mask: var(--menu-tracks) no-repeat 100% 100%; top: 8px; left: 17px; } div.menu_wrapper div.left_menu div.item.queue:before{ -webkit-mask: var(--menu-queue) no-repeat 100% 100%; mask: var(--menu-queue) no-repeat 100% 100%; top: 7px; } div.menu_wrapper div.left_menu div.item.activate:before{ -webkit-mask: var(--menu-activate) no-repeat 100% 100%; mask: var(--menu-activate) no-repeat 100% 100%; top: 4px; height: 22px; width: 22px; } div.menu_wrapper div.left_menu div.item span{ position: relative; line-height: 36px; left: 40px; } div.menu_wrapper div.left_menu div.left_menu_header span{ position: relative; line-height: 36px; } div.menu_wrapper div.left_menu div.item li{ font-size: 21px; position: relative; top: 4px; padding-right: 8px; } div.menu_wrapper div.left_menu div.item.disabled{ cursor: default; } div.menu_wrapper div.left_menu div.item.activate{ margin-top: 20px; } div.control_wrapper{ position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; height: 150px; border-top: 1px solid #0e0e0e; } div.control_container{ position: relative; top: 0px; right: 0px; height: 100%; min-width: 800px; max-width: 1400px; width: 70%; margin-left: auto; margin-right: auto; } div.control_container div.controls_block{ position: relative; top: 50px; border-radius: 10px; height: 80px; } div.control_container #album_art, div.control_container div.public_album_art{ position: absolute; top: 8px; left: 8px; width: 64px; height: 64px; background-image: url('/design/img/sys_art_placeholder.jpg'); background-size: 100% 100%; border-radius: 8px; } div.control_container div.public_album_art{ display: none; } body.public div.control_container div.public_album_art{ background-image: url('/design/img/Familystream-icon-diag.svg'); display: block; } body.public div.control_container #album_art{ display: none; } div.control_container #album_art.clickable:hover{ cursor: pointer; } div.control_container div.back{ position: absolute; top: 31px; left: 50%; margin-left: -60px; cursor: pointer; height: 22px; width: 22px; } div.control_container div.back:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 18px; width: 18px; -webkit-mask: var(--player-prev-icn) no-repeat 100% 100%; mask: var(--player-prev-icn) no-repeat 100% 100%; } div.control_container div.pause-play{ position: absolute; top: 10px; left: 50%; margin-left: -30px; cursor: pointer; } div.control_container div.pause-play.playing:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 60px; width: 60px; -webkit-mask: var(--player-pause-icn) no-repeat 100% 100%; mask: var(--player-pause-icn) no-repeat 100% 100%; } div.control_container div.pause-play.paused:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 60px; width: 60px; -webkit-mask: var(--player-play-icn) no-repeat 100% 100%; mask: var(--player-play-icn) no-repeat 100% 100%; } div.control_container div.next{ position: absolute; top: 31px; left: 50%; margin-left: 40px; cursor: pointer; height: 22px; width: 22px; } div.control_container div.next:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 18px; width: 18px; -webkit-mask: var(--player-next-icn) no-repeat 100% 100%; mask: var(--player-next-icn) no-repeat 100% 100%; } div.control_container div.like{ position: absolute; top: 28px; right: 52px; cursor: pointer; } div.control_container div.like.liked:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 24px; width: 24px; -webkit-mask: var(--player-fav-icn-active) no-repeat 100% 100%; mask: var(--player-fav-icn-active) no-repeat 100% 100%; } div.control_container div.like.unliked:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 24px; width: 24px; -webkit-mask: var(--player-fav-icn) no-repeat 100% 100%; mask: var(--player-fav-icn) no-repeat 100% 100%; } div.control_container div.lyrics_wrapper{ position: absolute; top: 30px; left: 50%; margin-left: 67px; right: 148px; text-align: center; } div.control_container div.lyrics{ display: inline-block; opacity: 0; text-align: left; font-weight: 700; text-transform: uppercase; } div.control_container div.lyrics:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 20px; width: 25px; -webkit-mask: var(--player-lyrics-icn) no-repeat 100% 100%; mask: var(--player-lyrics-icn) no-repeat 100% 100%; } div.control_container div.lyrics .lyrics_txt{ margin-left: 34px; line-height: 20px; } body.lib_story div.control_container div.lyrics{ right: 168px; } div.control_container div.lyrics.show{ opacity: 1; cursor: pointer; } body.public div.control_container div.like{ display: none; } body.public div.control_container div.lyrics{ display: none; } div.control_container div.bookmark{ position: absolute; opacity: 0; top: 22px; right: 120px; font-size: 24px; } body.public div.control_container div.bookmark{ display: none; } div.control_container div.bookmark.show{ opacity: 1; cursor: pointer; } div.control_container div.bookmark span.mat-icon-svg{ display: inline-block; top: 5px; right: 2px; width: 38px; } div.control_container div.bookmark span.mat-icon-svg.active{ display: none !important; } div.control_container div.bookmark.bookmark_active span.mat-icon-svg.active{ display: inline-block !important; } div.control_container div.bookmark.bookmark_active span.mat-icon-svg.inactive{ display: none !important; } div.control_container span.mat-icon-svg svg{ fill: #ece3ed; } div.control_container div.back.disabled, div.control_container div.pause-play.disabled, div.control_container div.next.disabled, div.control_container div.volume-icon.disabled{ cursor: default; } div.control_container div.track_info_box{ position: absolute; right: 50%; left: 85px; height:100%; margin-right:70px; } div.track_info_box div.fade{ position: absolute; height: 100%; width: 40px; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--play-control-container-bg) 100%); right: 0; } div.control_container div.track{ position: absolute; font-size: 18px; left: 0; top: 18px; right: 0; --padding-left: 85px; --padding-right: 70px; overflow: hidden; text-shadow: 0px 0px 1px #3aa399; } div.control_container div.track div.track_box{ float: left; white-space: nowrap; position: relative; } div.control_container div.artist{ position: absolute; font-size: 13px; left: 0px; top: 45px; right: 0; --padding-left: 85px; --padding-right: 70px; overflow: hidden; font-weight: 400; } div.control_container div.artist div.artist_box{ float: left; white-space: nowrap; position: relative; text-shadow: 0px 0px 1px #3aa399; } div.control_container div.sec_bar_wrapper{ position: absolute; display: table; font-size: 12px; left: 0px; top: 12px; width: 70%; min-width: 500px; padding-top: 6px; height: 20px; } div.control_container div.sec-played{ display: table-cell; width: 40px; } div.control_container div.sec-slider{ position: absolute; display: table-cell; left: 45px; right: 45px; min-width: 100px; top: 7px; } div.control_container div.sec-total{ display: table-cell; width: 40px; text-align: right; } div.control_container div.volume_bar_wrapper { position: absolute; font-size: 11px; left: 75%; top: 19px; right: 0; height: 10px; } div.control_container div.volume-icon{ position: absolute; font-size: 22px; top: -5px; cursor: pointer; } div.control_container div.volume-icon.high:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 28px; width: 28px; top: -3px; left: -6px; -webkit-mask: var(--volume-icn-high) no-repeat 100% 100%; mask: var(--volume-icn-high) no-repeat 100% 100%; } div.control_container div.volume-icon.med:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 28px; width: 28px; top: -3px; left: -8px; -webkit-mask: var(--volume-icn-med) no-repeat 100% 100%; mask: var(--volume-icn-med) no-repeat 100% 100%; } div.control_container div.volume-icon.low:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 28px; width: 28px; top: -3px; left: -10px; -webkit-mask: var(--volume-icn-low) no-repeat 100% 100%; mask: var(--volume-icn-low) no-repeat 100% 100%; } div.control_container div.volume-icon.mute:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 28px; width: 28px; top: -3px; left: -6px; -webkit-mask: var(--volume-icn-mute) no-repeat 100% 100%; mask: var(--volume-icn-mute) no-repeat 100% 100%; } div.control_container div.volume-slider, div.control_container div.master-volume{ position: absolute; left: 30px; right: 0px; --min-width: 100px; } div.control_container div.volume-slider{ right: 0px; } div.control_container div.master-volume{ top: 10px; } div.control_container div.shuffle-icon{ position: absolute; right: 150px; top: 30px; cursor: pointer; opacity: .4; } div.control_container div.shuffle-icon.active{ opacity: 1; } div.control_container div.shuffle-icon:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 20px; width: 25px; -webkit-mask: var(--player-shuffle-icn) no-repeat 100% 100%; mask: var(--player-shuffle-icn) no-repeat 100% 100%; } div.control_container div.repeat-icon{ position: absolute; right: 102px; top: 30px; cursor: pointer; opacity: .4; } div.control_container div.repeat-icon.active{ opacity: 1; } div.control_container div.repeat-icon:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 20px; width: 25px; -webkit-mask: var(--player-repeat-icn) no-repeat 100% 100%; mask: var(--player-repeat-icn) no-repeat 100% 100%; } div.control_container div.shuffle-icon div.active_dot, div.control_container div.repeat-icon div.active_dot{ opacity: 0; position: relative; top: 16px; left: 8px; } div.control_container div.shuffle-icon.active div.active_dot, div.control_container div.repeat-icon.active div.active_dot{ opacity: 1; } div.content_scroll_shade{ position: absolute; top: 0px; height: 20px; z-index: 8; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#000',GradientType=0 ); /* IE6-9 */ display: none; } div.item_menu_scroll_shade{ position: absolute; top: 0px; height: 20px; z-index: 8; background: -moz-linear-gradient(top, rgba(24,24,24,1) 0%, rgba(168,168,168,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(24,24,24,1) 0%,rgba(168,168,168,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(24,24,24,1) 0%,rgba(168,168,168,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#a8a8a8',GradientType=0 ); /* IE6-9 */ display: none; } div.item_menu_scroll_shade{ width: 240px; } div.content_scroll_shade{ left: 0px; right: 0px; } div.content_wrapper{ position: absolute; top: 64px; left: 240px; right: 0px; bottom: 150px; min-width: 604px; } div.content_wrapper div.item_menu{ bottom: 0px; width: 0px; overflow: hidden; border-right: 0px solid var(--true-black); } div.content_wrapper div.content{ position: absolute; left: 0px; right: 0px; border-left: 0px solid; } div.content_wrapper div.content.background{ background-position: bottom right; background-repeat: no-repeat; min-width: 604px; border-left: 0px solid; background-size: auto 120%; } div.content_wrapper.ItemMenu div.content{ --left: 210px; } div.content_wrapper div.item_menu{ font-size: 14px; text-indent: 20px; z-index: 11; overflow-y: none; position: relative; border-left: 1px solid #000000; } div.content_wrapper div.item_menu:hover{ --overflow-y: scroll; } div.content_wrapper div.item_menu div.spacer{ height: 20px; } div.content_wrapper div.item_menu div.Header{ --display: none; padding-top: 28px; padding-bottom: 10px; padding-left: 2px; width: 206px; text-transform: uppercase; } div.content_wrapper div.item_menu div.item{ position: relative; height: 32px; line-height: 32px; width: 98%; --border-left: 4px solid; overflow: hidden; z-index: 20; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; } div.content_wrapper div.item_menu div.item::first-letter{ text-transform: uppercase; } div.content_wrapper div.item_menu div.item div.overflow_shade{ position: absolute; height: 100%; width: 44px; top: 0px; right: 0px; display: none; } div.content_wrapper div.item_menu div.item:hover div.overflow_shade{ display: block; } div.content_wrapper div.item_menu div.item div.mat-icon{ position: absolute; right: 10px; top: 4px; text-indent: 0px; display: none; } div.content_wrapper div.item_menu div.item:hover div.mat-icon, div.content_wrapper div.item_menu div.item.hovered div.mat-icon{ display: block; } div.extra_menu{ position: fixed; z-index: 20; display: block; border: 1px solid black; left: 300px; top: 300px; -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2); border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; display: none; white-space: nowrap; } div.extra_menu div{ height: 30px; line-height: 30px; padding-left: 10px; padding-right: 60px; border-left: 4px solid; cursor: pointer; } div.content{ position: absolute; } div.ui-slider{ --float: left; position: relative; height: 5px; margin-top: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; outline: none; } div.ui-slider.disabled{ cursor: default; } div.ui-slider div.ui-slider-range{ position: absolute; height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; } div.ui-slider span.ui-slider-handle{ position: absolute; height: 6px; width: 6px; margin-top: -5px; margin-left: -5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 4px solid; cursor: pointer; outline: none; } div.ui-slider.disabled span.ui-slider-handle{ cursor: default; } div.ui-slider.disabled span{ display: none; } div.sec_bar_wrapper span.ui-slider-handle, div.volume_bar_wrapper span.ui-slider-handle{ opacity: 0; } div.ui-slider span.ui-state-hover, div.ui-slider span.ui-state-active, div.sec_bar_wrapper:hover span.ui-slider-handle, div.volume_bar_wrapper:hover span.ui-slider-handle{ opacity: 1; } div.ui-slider.disabled span.ui-state-hover, div.ui-slider.disabled span.ui-state-active, div.sec_bar_wrapper.disabled:hover span.ui-slider-handle, div.volume_bar_wrapper.disabled:hover span.ui-slider-handle{ display: none; } div.block_separator{ display: none; } div.ui-slider span.ui-state-hover, div.ui-slider span.ui-state-active{ outline: none; } div.background_shade, div.background_shade_disabled{ position: fixed; z-index: -10; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); opacity: 0; } div.background_shade.show, div.background_shade_disabled.show{ opacity: 1; z-index: 200; } div.search_popup_wrapper{ position: absolute; z-index: -20; width: 400px; top: 50px; left: 74px; padding-top: 10px; border: 1px solid; -webkit-box-shadow: 0px 0px 14px 8px rgba(125,0,0,0.15); -moz-box-shadow: 0px 0px 14px 8px rgba(0,0,0,0.15); box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.30); border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; overflow: auto; opacity: 0; } div.search_popup_wrapper div.header_title{ line-height: 26px; font-size: 14px; text-indent: 10px; position: float; border-left: 1px solid #3f3b44; border-right: 1px solid #3f3b44; } div.search_popup_wrapper div.item{ position: relative; height: 56px; border-bottom: 1px solid; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; cursor: pointer; } div.search_popup_wrapper div.name{ position: absolute; line-height: 56px; float: left; left: 56px; white-space: nowrap; } div.search_popup_wrapper .item.type-profile div.art, div.search_popup_wrapper div.placeholder{ position: absolute; height: 36px; width: 36px; border-radius: 18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; top: 10px; left: 9px; float: left; } div.search_popup_wrapper div.placeholder .icon.people{ left: 4px; top: 3px; position: relative; } div.search_popup_wrapper div.placeholder .icon.people:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 24px; width: 24px; -webkit-mask: var(--mat-icn-person) no-repeat 100% 100%; mask: var(--mat-icn-person) no-repeat 100% 100%; background-color: rgb(204, 204, 204); left: 2px; top: 2px; } div.search_popup_wrapper div.placeholder .icon.album{ left: 4px; top: 3px; position: relative; } div.search_popup_wrapper div.placeholder .icon.album:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 24px; width: 24px; -webkit-mask: var(--mat-icn-album) no-repeat 100% 100%; mask: var(--mat-icn-album) no-repeat 100% 100%; background-color: rgb(204, 204, 204); left: 2px; top: 2px; } div.search_popup_wrapper div.art{ position: relative; height: 36px; width: 36px; top: 10px; left: 9px; float: left; background-size: 100% 100%; background-repeat: no-repeat; } div.search_popup_wrapper .type-people div.art{ border-radius: 16px 16px 16px 16px; -moz-border-radius: 16px 16px 16px 16px; -webkit-border-radius: 16px 16px 16px 16px; } div.search_popup_wrapper div.item.no_result{ border: none; height: 18px; text-indent: 10px; font-size: 15px; cursor: default; } div.ScrollButtonLeft, div.ScrollButtonRight{ display: none; } div.horizon_scroll_blocks{ overflow-x:hidden; overflow-y:hidden; } .subtitle_show_more{ display: none; } .quick_plist{ display: none; } div.normal_blocks{ position: relative; } div.horizon_scroll_blocks .title, div.normal_blocks .title, div.radio .title, div.norm_list .title, div.artist_page .title, div.profile_page .title{ padding-top: 32px; padding-left: 35px; padding-bottom: 12px; font-weight: 700; } div.content_wrapper.page-id-home div.horizon_scroll_blocks:first-child .title{ --font-size: 32px; } div.content_wrapper.page-id-home div.horizon_scroll_blocks .title{ font-size: 24px; } div.content_wrapper.page-id-home div.horizon_scroll_blocks div.album .title, div.normal_blocks div.album .title{ font-size: 12px; } div.horizon_scroll_blocks .title::first-letter, div.normal_blocks .title::first-letter, div.radio .title::first-letter, div.norm_list .title::first-letter, div.artist_page .title::first-letter, div.profile_page .title::first-letter{ text-transform: uppercase; } div.norm_list .title{ padding-top: 0px; padding-left: 13px; } div.norm_list div.subject{ padding-left: 13px; } div.norm_list div.sub_title{ padding-left: 13px; margin-top: -12px; padding-bottom: 10px; } div.norm_list .title .mat-icon{ position: relative; top: 5px; margin-right: 6px; font-size: 33px; display: none; } div.horizon_scroll_blocks .title div.mat-icon, div.normal_blocks .title div.mat-icon, div.radio .title div.mat-icon{ top: 6px; padding-right: 8px; position: relative; font-size: 28px; } div.horizon_scroll_blocks .title div.mat-icon, div.normal_blocks .title div.mat-icon{ display: none; } div.horizon_scroll_blocks div.scroll{ width: 100%; position: relative; --overflow: hidden; white-space: nowrap; clear: both; padding-left: 27px; height: 200px; } div.normal_blocks div.scroll, div.norm_list div.scroll{ clear: both; padding-left: 27px; } div.content .title_copy{ display: none; } div.horizon_scroll_blocks div.subtitle_show_more{ display: inline-block; position: relative; top: -14px; margin-left: 35px; font-size:15px; white-space: nowrap; cursor: pointer; } div.horizon_scroll_blocks div.quick_plist{ display: inline-block; position: relative; top: -14px; margin-left: 35px; font-size:15px; white-space: nowrap; cursor: pointer; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft{ position: absolute; left: 0px; z-index: 10; width: 60px; height: 110%; opacity: 0; display: block; top: -5px; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft div.mat-icon{ --font-size: 60px; position: absolute; top: 50%; margin-top: -35px; right: 0px; cursor: pointer; } div.horizon_scroll_blocks div.scroll div.ScrollButtonRight{ position: absolute; right: 26px; z-index: 10; width: 60px; height: 110%; opacity: 0; display: block; top: -5px; } div.horizon_scroll_blocks div.scroll div.ScrollButtonRight div.mat-icon{ --font-size: 60px; position: absolute; top: 50%; margin-top: -35px; right: 0px; cursor: pointer; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft.hide, div.horizon_scroll_blocks div.scroll div.ScrollButtonRight.hide{ opacity: 0; display: none; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft.show, div.horizon_scroll_blocks div.scroll div.ScrollButtonRight.show{ opacity: 1; display: block; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft div.mat-icon, div.horizon_scroll_blocks div.scroll div.ScrollButtonRight div.mat-icon{ opacity: 0; } div.horizon_scroll_blocks div.scroll div.ScrollButtonLeft:hover div.mat-icon, div.horizon_scroll_blocks div.scroll div.ScrollButtonRight:hover div.mat-icon{ opacity: 1; } div.horizon_scroll_blocks div.scroll div.Blocker{ position: absolute; width: 100%; height: 100%; z-index: 5; display: none; } div.RadioAlbumShade{ display: none; } div.horizon_scroll_blocks .premium_flag, div.norm_albu_dspl .premium_flag, div.normal_blocks .premium_flag{ position: absolute; --background-image: url('img/premium_star.svg'); background-repeat: no-repeat; background-size: 36px 36px; background-position-x: 0px; background-position-y: 0px; --background-image: url('img/premium_flag.svg'); top: -1px; left: 4px; width: 36px; height: 36px; } div.horizon_scroll_blocks div.album, div.normal_blocks div.album{ position: relative; width: 200px; height: 200px; display: inline-block; margin-left: 8px; cursor: pointer; background-size: 100% auto; background-position: center center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; left: 0px; } div.normal_blocks div.album{ margin-bottom: 8px; } div.horizon_scroll_blocks.tile_size_small div.album, div.normal_blocks.tile_size_small div.album{ width: 120px; height: 120px; } div.horizon_scroll_blocks div.album.item-type-album::before, div.normal_blocks div.album.item-type-album::before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 120px; width: 120px; -webkit-mask: var(--mat-icn-album) no-repeat 100% 100%; mask: var(--mat-icn-album) no-repeat 100% 100%; background-color: #A8A8A8; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; } div.horizon_scroll_blocks div.album.item-type-artist::before, div.normal_blocks div.album.item-type-artist::before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 120px; width: 120px; -webkit-mask: var(--mat-icn-person) no-repeat 100% 100%; mask: var(--mat-icn-person) no-repeat 100% 100%; background-color: #A8A8A8; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; } div.horizon_scroll_blocks.tile_size_small div.album.item-type-album::before, div.normal_blocks.tile_size_small div.album.item-type-album::before{ height: 90px; width: 90px; margin-left: -45px; margin-top: -45px; } div.horizon_scroll_blocks.tile_size_small div.album.item-type-artist::before, div.normal_blocks.tile_size_small div.album.item-type-artist::before{ height: 90px; width: 90px; margin-left: -45px; margin-top: -45px; } div.horizon_scroll_blocks div.album .mat-icon.play, div.normal_blocks div.album .mat-icon.play{ position: absolute; font-size: 68px; left: 50%; margin-left: -34px; top: 50%; margin-top: -34px; opacity: 0; text-shadow: 0px 0px 5px 2px rgba(0,0,0,1); border-radius: 34px; -moz-border-radius: 34px; -webkit-border-radius: 34px; } div.horizon_scroll_blocks.tile_size_small div.album .album_favorite, div.normal_blocks.tile_size_small div.album .album_favorite{ display: none; } div.horizon_scroll_blocks div.album .album_favorite, div.normal_blocks div.album .album_favorite{ position: absolute; top: 5px; right: 5px; font-size: 22px; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 20px; background-color: rgba(0,0,0,.66); opacity: 0; } div.horizon_scroll_blocks div.album .album_favorite:before, div.normal_blocks div.album .album_favorite:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: 3px; height: 26px; width: 26px; -webkit-mask: var(--player-fav-icn) no-repeat 100% 100%; mask: var(--player-fav-icn) no-repeat 100% 100%; background-color: var(--green-highlight); } div.horizon_scroll_blocks div.album .album_favorite.is_fav:before, div.normal_blocks div.album .album_favorite.is_fav:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: 3px; height: 26px; width: 26px; -webkit-mask: var(--player-fav-icn-active) no-repeat 100% 100%; mask: var(--player-fav-icn-active) no-repeat 100% 100%; } div.horizon_scroll_blocks div.album .album_favorite:hover:before, div.normal_blocks div.album .album_favorite:hover:before{ background-color: var(--green-highligt2); } div.horizon_scroll_blocks div.album:hover .album_favorite, div.normal_blocks div.album:hover .album_favorite{ opacity: 1; } body.public div.horizon_scroll_blocks div.album:hover .album_favorite, body.public div.normal_blocks div.album:hover .album_favorite, div.horizon_scroll_blocks div.album.item-type-artist .album_favorite{ display: none; } div.horizon_scroll_blocks div.album div.art, div.normal_blocks div.album div.art{ position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } div.horizon_scroll_blocks div.album:hover, div.normal_blocks div.album:hover{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); transform:scale(1.06); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } div.horizon_scroll_blocks div.album.item-type-artist, div.horizon_scroll_blocks div.album.item-type-artist div.art{ border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } div.horizon_scroll_blocks div.album.item-type-artist:hover{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); transform:scale(1.06); border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } div.horizon_scroll_blocks div.album .title, div.normal_blocks div.album .title{ position: absolute; left: 0px; bottom: 0px; right: 0px; padding-left: 15px; padding-right: 15px; font-size: 12px; padding-bottom: 20px; white-space: normal; padding-top: 75px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); font-family: 'Ubuntu', sans-serif; text-transform: uppercase; font-weight: bold; line-height: 17px; opacity: 0; } div.horizon_scroll_blocks div.album:hover .title, div.normal_blocks div.album:hover .title{ opacity: 1; } div.horizon_scroll_blocks.tile_size_small div.album.item-type-album .title, div.normal_blocks.tile_size_small div.album.item-type-album .title{ display: none; } div.horizon_scroll_blocks div.album.item-type-artist .title{ text-align: center; text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); } div.horizon_scroll_blocks.tile_size_small div.album.item-type-artist .title, div.normal_blocks.tile_size_small div.album.item-type-artist .title{ font-size: 11px; padding-left: 0; padding-right: 0; } div.norm_albu_dspl, div.norm_list, div.horizon_scroll_blocks div.subject, div.artist_page, div.profile_page{ position: relative; padding-left: 30px; padding-right: 30px; margin-top: 30px; } div.norm_albu_dspl{ min-height: 400px; } div.profile_page{ min-height:300px; } div.horizon_scroll_blocks div.subject{ top: 28px; margin-top: 0px; } div.artist_page div.sub_title{ margin-left: 310px; display: none; } div.norm_albu_dspl div.album_art, div.norm_albu_dspl div.album_art_placeholder{ position: absolute; width: 200px; height: 200px; top: 4px; background-size: 100% auto; background-repeat: no-repeat; background-position: top left; z-index: 5; } div.norm_albu_dspl div.album_art div.art_enlarge{ position: relative; top: 0px; left: 0px; height: 100%; width: 100%; opacity: 0; cursor: pointer; } div.norm_albu_dspl div.album_art div.art_enlarge li{ position: relative; height: 40px; width: 40px; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; font-size: 27px; background-color: rgba(0, 0, 0, 0.75); border-radius: 20px; text-indent: 7px; line-height: 40px; } div.norm_albu_dspl div.subject, div.norm_albu_dspl .title, div.norm_albu_dspl div.sub_title, div.norm_albu_dspl div.track_wrapper, div.norm_albu_dspl div.cooperative_wrapper, div.norm_albu_dspl div.comment, div.norm_albu_dspl div.review_wrapper{ position: relative; padding-left: 250px; } div.norm_albu_dspl .title, div.norm_albu_dspl div.sub_title{ padding-right: 130px; } div.norm_albu_dspl div.cooperative_wrapper{ margin-top: 20px; } div.norm_albu_dspl div.subject, div.norm_list div.subject, div.artist_page div.subject, div.horizon_scroll_blocks div.subject{ height: 20px; text-transform: uppercase; } div.horizon_scroll_blocks div.subject{ padding-left: 35px; } div.norm_albu_dspl div.track_wrapper, div.norm_list div.track_wrapper{ min-height: 220px; display: table; margin-top: 30px; font-weight: 400; } div.norm_list div.track_wrapper{ margin-top: 10px; min-height: 10px; } div.norm_albu_dspl div.sub_title div.artist{ display: inline-block; cursor: pointer; } div.norm_albu_dspl div.track_wrapper div.track, div.norm_list div.track_wrapper div.track{ display: table; table-layout: fixed; width: 100%; } div.norm_albu_dspl div.track_wrapper div.track div, div.norm_list div.track_wrapper div.track div{ display: table-cell; font-size: 14px; padding-top: 6px; padding-bottom: 6px; padding-left: 15px; text-overflow: ellipsis; } div.norm_albu_dspl div.track_wrapper div.track.table-header, div.norm_list div.track_wrapper div.track.table-header{ border-bottom: 1px solid transparent; font-weight: 700; text-transform: uppercase; font-size: 12px; } div.norm_albu_dspl div.track_wrapper div.track.table-header div, div.norm_list div.track_wrapper div.track.table-header div{ font-size: inherit; } div.norm_albu_dspl div.track_wrapper div.track div.track_num, div.norm_list div.track_wrapper div.track div.track_num{ width: 35px; } div.norm_albu_dspl div.track_wrapper div.track div.time, div.norm_list div.track_wrapper div.track div.time{ width: 60px; font-weight: 700; } div.norm_albu_dspl div.track_wrapper div.track div.composer, div.norm_list div.track_wrapper div.track div.composer{ width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div.norm_albu_dspl div.track_wrapper div.track.highlight div.track_name, div.norm_list div.track_wrapper div.track.highlight div.track_name, div.norm_list div.track_wrapper div.track.highlight div.album_name{ white-space: nowrap; overflow: hidden; position: relative; font-weight: 700; text-overflow: ellipsis; } div.norm_albu_dspl div.track_wrapper div.track.highlight div.track_name:hover, div.norm_list div.track_wrapper div.track.highlight div.track_name:hover{ text-decoration: underline; cursor: pointer; } div.norm_albu_dspl div.track_wrapper div.track.highlight.blocked div.track_name:hover, div.norm_list div.track_wrapper div.track.highlight.blocked div.track_name:hover{ text-decoration: none; cursor: default; } body.public div.norm_list div.track_wrapper div.track.highlight div.track_name:hover{ cursor: default; text-decoration: none; } div.norm_albu_dspl div.track_wrapper div.track div.track_options, div.norm_list div.track_wrapper div.track div.track_options{ width: 30px; padding: 0; overflow: hidden; position: relative; } div.norm_albu_dspl div.track_wrapper div.track div.track_options div.mat-icon, div.norm_list div.track_wrapper div.track div.track_options div.mat-icon{ font-size: 24px; padding:0; top:4px; position: absolute; display: none; line-height:16px; cursor: pointer; } body.public div.norm_albu_dspl div.track_wrapper div.track div.track_options div.mat-icon, body.public div.norm_list div.track_wrapper div.track div.track_options div.mat-icon{ cursor: default; } body.public div.norm_albu_dspl div.track_wrapper div.track div.track_options, body.public div.norm_list div.track_wrapper div.track div.track_options{ display: none; } div.norm_albu_dspl div.extra_menu div{ padding-right: 25px; } div.norm_albu_dspl div.thumbs_wrapper, div.norm_list div.thumbs_wrapper, div.norm_list div.follow_plist_wrapper{ position: absolute; padding-left: 8px; padding-right: 8px; height: 36px; } div.norm_albu_dspl div.thumbs_wrapper{ right: 20px; top: 40px; } div.norm_list div.thumbs_wrapper{ right: 30px; top: 10px; } div.thumbs_wrapper div.thumbs_up, div.thumbs_wrapper div.thumbs_down{ display: inline-block; cursor: pointer; } div.thumbs_wrapper div.thumbs_up .mat-icon, div.thumbs_wrapper div.thumbs_down .mat-icon{ position: relative; padding-right: 5px; font-size: 22px; } div.thumbs_wrapper div.thumbs_up .mat-icon{ top: 5px; } div.thumbs_wrapper div.thumbs_down .mat-icon{ top: 8px; padding-left: 8px; } div.norm_list div.follow_plist_wrapper{ top: 10px; right: 150px; } div.follow_plist_wrapper .follow_plist_btn{ display: none; } div.follow_plist_wrapper .follow_plist_btn:hover{ cursor: pointer; } div.follow_plist_wrapper .follow_plist_btn.active{ display: block; } div.follow_plist_wrapper .follow_plist_btn .mat-icon{ font-size: 22px; position: relative; top: 6px; } div.follow_plist_wrapper .follow_plist_btn span{ position: relative; top: 1px; padding-left: 5px; padding-right: 1px; } div.norm_albu_dspl div.options{ position:absolute; top: 224px; z-index: 10; text-transform: uppercase; font-size: 12px; font-weight: 500; line-height:24px; } div.norm_albu_dspl div.options.disabled{ cursor: default; } div.artist_page div.options, div.profile_page div.options{ top: 270px; left: 70px; width: 210px; text-align: center; position: absolute; } div.norm_albu_dspl div.options .mat-icon{ position: relative; top: 7px; padding-right: 8px; } div.artist_page div.options .mat-icon, div.profile_page div.options .mat-icon{ position: relative; top: 5px; padding-right: 5px; } div.norm_albu_dspl div.cooperative{ border-top: 1px solid; border-bottom: 1px solid; padding-top: 10px; padding-bottom: 10px; position: relative; } div.norm_albu_dspl div.cooperative .mat-icon, div.artist_page div.cooperative .mat-icon{ position: absolute; top: 6px; left: 5px; padding-right: 10px; } div.norm_albu_dspl div.cooperative div.block, div.artist_page div.cooperative div.block{ position: relative; top: 0px; margin-left: 40px; right: 0px; display: block; } div.norm_albu_dspl div.cooperative div.coop, div.artist_page div.cooperative div.coop{ display: inline-block; } div.norm_albu_dspl div.cooperative div.coop:hover, div.artist_page div.cooperative div.coop:hover{ cursor: pointer; } div.norm_albu_dspl div.reviews{ top: 10px; position: relative; } div.norm_albu_dspl div.reviews div.header_wrapper{ margin-top: 6px; font-weight: bold; font-size: 14px; height: 30px; padding-left: 6px; padding-right: 15px; padding-bottom: 4px; } div.norm_albu_dspl div.reviews div.header_wrapper div.header_title{ float: left; padding-top: 6px; } div.norm_albu_dspl div.reviews div.header_wrapper div.show, div.norm_albu_dspl div.reviews div.header_wrapper div.hide{ padding-top: 6px; cursor: pointer; font-weight: 400; text-decoration: underline; } div.norm_albu_dspl div.reviews div.header_wrapper div.show{ display: none; } div.norm_albu_dspl div.reviews div.review_slide{ overflow: hidden; } div.norm_albu_dspl div.reviews div.add_review, div.norm_albu_dspl div.reviews div.review{ display: table; width: 100%; padding-bottom: 8px; } div.norm_albu_dspl div.reviews div.add_review{ padding-top: 6px; } div.norm_albu_dspl div.reviews div.review{ border-top: 1px solid; } div.norm_albu_dspl div.reviews div.add_review div.mat-icon, div.norm_albu_dspl div.reviews div.review div.mat-icon{ position: relative; display: table-cell; width: 40px; top: 10px; left: 5px; vertical-align: top; } div.norm_albu_dspl div.reviews div.review div.mat-icon{ left: 10px; top: 10px; } div.norm_albu_dspl div.reviews div.review div.avatar_wrapper, div.norm_albu_dspl div.reviews div.add_review div.avatar_wrapper{ position: relative; display: table-cell; width: 40px; left: 5px; border-radius: 50%; vertical-align: top; } div.norm_albu_dspl div.reviews div.review div.avatar_wrapper .avatar, div.norm_albu_dspl div.reviews div.add_review div.avatar_wrapper .avatar{ width: 35px; height: 35px; background-size: 100% auto; background-repeat: no-repeat; border-radius: 50%; position: relative; top: 10px; box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1); -webkit-box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1); } div.norm_albu_dspl div.reviews div.add_review div.block, div.norm_albu_dspl div.reviews div.review div.block{ display: table-cell; position: relative; } div.norm_albu_dspl div.reviews div.review div.block{ left: 8px; } div.norm_albu_dspl div.reviews div.review div.block div.text{ width: 90%; } div.norm_albu_dspl div.reviews div.review.JustAdded{ display: none; } div.artist_right_field{ display: none; } div.artist_page div.artist_right_field{ position: absolute; top: 0px; right: 0px; bottom: 0px; margin-left: 30px; } div.artist_page div.artist_plays_last_month{ position: relative; left: 20%; top: 40px; height: 180px; width: 180px; border: 2px solid var(--text-head); border-radius: 100px; display: block; text-align: center; font-size: 16px; text-transform: uppercase; font-weight: 700; line-height: 16px } div.artist_page div.artist_plays_last_month .counter{ font-size: 53px; padding-top: 30px; font-weight: 700; text-transform: lowercase; line-height: 53px; margin-top: 12px; margin-bottom: 5px; } div.artist_page div.artist_plays_last_month span{ display: inline-block; width: 80%; } div.norm_albu_dspl div.reviews div.report{ position: absolute; top: 50%; right: 19px; font-size: 11px; border-radius: 11px; white-space: nowrap; line-height: 22px; padding-left: 10px; padding-right: 10px; margin-top: -11px; opacity: 0; cursor: pointer; } div.norm_albu_dspl div.reviews div.add_review div.mat-icon li{ height: 28px; width: 27px; padding-left: 3px; padding-top: 2px; border-radius:16px; } div.norm_albu_dspl div.reviews div.add_review div.block{ display: table; width: 100%; height: 70px; } div.norm_albu_dspl div.reviews div.add_review div.block div.input{ display: table-cell; padding-top: 8px; padding-bottom: 13px; padding-right: 15px; padding-left: 10px; } div.norm_albu_dspl div.reviews div.add_review div.block div.input div.left_arrow{ width: 0px; height: 0px; position: absolute; left: 2px; top: 17px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid; } div.norm_albu_dspl div.reviews div.add_review div.block div.input textarea{ border: 0px; width: 100%; height: 100%; font-family: inherit; padding: 5px 10px; outline: none; resize: none; } div.norm_albu_dspl div.reviews div.add_review div.block div.post{ display: table-cell; width: 1px; white-space: nowrap; padding-left: 10px; padding-right: 10px; padding-bottom: 6px; vertical-align: bottom; } div.norm_albu_dspl div.reviews div.add_review div.block div.post div.button{ padding-top: 5px; padding-bottom: 1px; padding-left: 12px; padding-right: 8px; border-radius:13px; cursor: pointer; } div.norm_albu_dspl div.reviews div.add_review div.block div.post div.button .mat-icon{ display: inline-block; position: relative; top: -3px; width: 22px; font-size: 22px; } div.norm_albu_dspl div.reviews div.review div.user{ font-weight: bold; margin-top: 10px; margin-bottom: 8px; } div.norm_albu_dspl div.reviews div.review div.user div{ display: inline-block; } div.norm_albu_dspl div.reviews div.review div.user div.profile_link:hover{ cursor: pointer; } div.norm_albu_dspl div.reviews div.review div.user .mat-icon{ position: relative; font-size: 14px; top: 2px; margin-left: 4px; } div.norm_albu_dspl div.reviews div.more{ text-align: center; } div.norm_albu_dspl div.reviews div.more div.button{ white-space: nowrap; display: inline-block; cursor: pointer; position: relative; top: -10px; } div.norm_albu_dspl div.reviews div.more div.button div.mat-icon{ position: relative; top: 10px; font-size: 30px; } div.copyright{ display: none; } body.public div.copyright{ display: block; color: #636363; font-size: 10px; text-align: center; padding-bottom: 20px; position: absolute; bottom: 0px; width: 100%; z-index: 1; } div.content div.spacer{ height: 80px; } div.content div.radio{ height: 95%; width: 90%; position: relative; } div.content div.radio .title{ display: none; } div.content div.radio div.radio_shade{ position: absolute; top: 65%; width: 100%; margin-top: -50px; height: 100px; } div.content div.radio div.radio_shade div.top_shade{ top: 0px; position: absolute; left: 50%; margin-left: -520px; height: 50px; opacity: 0.35; width: 1000px; z-index:10; display: none; } div.content div.radio .title_copy{ display: block; font-size: 18px; position: absolute; top: 65%; padding-top: 85px; text-align: center; width: 100%; z-index: 12; } div.content div.radio div.subject{ font-size: 16px; position: absolute; top: 65%; padding-top: 120px; text-align: center; padding-left: 5%; padding-right: 5%; margin-top: 15px; padding-left: 20%; padding-right: 20%; z-index: 12; } div.content div.radio div.scroll div.album{ position: absolute; bottom: 44%; width: 100px; height: 100px; } div.content div.radio div.scroll div.album div.art{ width: 100%; height: 100%; background-size: 100% auto; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-repeat: no-repeat; } div.content div.radio div.scroll div.album div.RadioAlbumShade{ display: block; position: relative; bottom: 0px; width: 100%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; } div.content div.radio div.scroll div.album div.RadioAlbumShade{ -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.4))); mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, 0.4))); } div.content div.radio .album_favorite{ display: none; } div.content div.radio div.scroll div.RadioCounter1{ width: 300px; height: 300px; left: 30%; z-index: 10; opacity: 1; } div.content div.radio div.scroll div.RadioCounter1:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } div.content div.radio div.scroll div.RadioCounter2{ width: 264px; height: 264px; left: 30%; margin-left: 180px; z-index: 8; filter: brightness(80%); -moz-filter: brightness(80%); -webkit-filter: brightness(80%); margin-bottom: 15px; } div.content div.radio div.scroll div.RadioCounter2_disabled:hover{ z-index: 12; filter: brightness(100%); -moz-filter: brightness(100%); -webkit-filter: brightness(100%); width: 275px; height: 275px; } div.content div.radio div.scroll div.RadioCounter3{ width: 215px; height: 215px; left: 30%; margin-left: 305px; z-index: 6; filter: brightness(60%); -moz-filter: brightness(60%); -webkit-filter: brightness(60%); margin-bottom: 38px; } div.content div.radio div.scroll div.RadioCounter3_disabled:hover{ z-index: 12; filter: brightness(100%); -moz-filter: brightness(100%); -webkit-filter: brightness(100%); width: 225px; height: 225px; } div.content div.radio div.scroll div.RadioCounter4{ width: 170px; height: 170px; left: 30%; margin-left: 390px; z-index: 4; filter: brightness(40%); -moz-filter: brightness(40%); -webkit-filter: brightness(40%); margin-bottom: 58px; } div.content div.radio div.scroll div.album .title{ width: 100%; height: 100%; display: none; position: absolute; top: 0px; opacity: 0; padding: 0; } div.content div.radio div.play_button{ font-size: 50px; position: absolute; top: 65%; left: 50%; margin-left: -24px; margin-top: 25px; text-align: center; padding: auto; z-index: 12; } div.content div.radio div.play_button:hover{ cursor: pointer; } div.content div.radio div.play_button:before{ background-color: var(--green-highlight); } div.content div.radio div.play_button.playing:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 60px; width: 60px; -webkit-mask: var(--player-pause-icn) no-repeat 100% 100%; mask: var(--player-pause-icn) no-repeat 100% 100%; } div.content div.radio div.play_button.paused:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 60px; width: 60px; -webkit-mask: var(--player-play-icn) no-repeat 100% 100%; mask: var(--player-play-icn) no-repeat 100% 100%; } div.error_popup_wrapper, div.mmm_popup_wrapper, div.appsettings_wrapper, div.lyric_wrapper{ top: 0px; width: 100%; height: 100%; text-align: center; position: absolute; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); transform:scale(0); z-index: -20; opacity: 0; } div.error_popup_wrapper.show, div.mmm_popup_wrapper.show, div.appsettings_wrapper.show, div.lyric_wrapper.show{ z-index: 210; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); opacity: 1; } div.search_popup_wrapper.show{ opacity: 1; z-index: 210; } div.error_popup, div.mmm_popup, div.setting_popup{ position: relative; display: inline-block; top: 30%; text-align: left; -webkit-box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); padding: 20px; border: 1px solid; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; min-width: 450px; max-width: 50%; } div.lyric_wrapper_inner{ height: 100%; min-width: 800px; width: 90%; max-width: 900px; position: relative; display: inline-block; bottom: 40px; } div.lyric_popup{ position: relative; text-align: left; -webkit-box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); box-shadow: 0px 6px 13px 1px rgba(0,0,0,0.4); border: 1px solid; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; width: 100%; max-height: 75%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); overflow-y: auto; padding-left: 50px; padding-bottom: 20px; background-image: url("/img/lyrics_bg.webp"); background-color: inherit; background-color: #FBF2E3; } div.lyric_popup .title{ font-size: 28px; height: 80px; position: sticky; top: 0; color: #713F00; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-top: 30px; background-image: url("/img/lyrics_bg.webp"); background-color: inherit; } div.lyric_popup .title .album{ display: block; font-weight: 400; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: inherit; background-image: url("/img/lyrics_bg.webp"); color: #713F00; } div.lyric_popup .text{ white-space: pre-line; font-weight: 500; line-height: 1.8; font-size: 15px; padding-right: 20px; background-color: inherit; background-image: url("/img/lyrics_bg.webp"); color: #713F00; } div.lyric_popup .title .mat-icon.close{ position: absolute; top: 11px; right: 9px; cursor: pointer; opacity: 0.5; } div.lyric_popup .title .mat-icon.close svg{ fill: #713F00; } div.lyric_popup .title .mat-icon.close:hover{ opacity: 1; } div.lyric_popup.ps-container .ps-scrollbar-y{ background-color: #222025 !important; margin-right: 2px; width: 4px; } div.lyric_popup.ps-container:hover > .ps-scrollbar-y-rail{ opacity: 0.6; } div.lyric_popup .lyric_end_icn{ display: block; height: 55px; width: 100%; } div.lyric_popup .lyric_end_icn span{ font-style: italic; color: grey; font-size: 12px; } div.profile_popup_wrapper{ z-index: -20; position: absolute; opacity: 0; overflow-x: auto; overflow-y: hidden; } div.profile_popup_wrapper.show{ opacity: 1; z-index: 220; } div.profile_popup_wrapper{ height: 100%; width: 100%; } div.profile_popup_v2 { text-align: center; transform: translate(-50%, -50%); top: 50%; left: 50%; position: relative; padding-bottom: 20px; } div.profile_popup_v2 .profile_popup_icon{ background-image: url('/design/img/Familystream-icon-diag.svg'); height: 50px; background-size: auto 100%; background-repeat: no-repeat; background-position: center; margin-bottom: 20px; } div.profile_popup_v2 .profile_popup_text{ color: white; font-size: 30px; text-align: center; padding-bottom: 30px; } div.profile_popup_v2 .profile_wrapper{ white-space: nowrap; } div.profile_popup_v2 .profile_wrapper .profile{ display: inline-block; height: 310px; width: 220px; margin-left: 10px; margin-right: 10px; margin-top: 10px; position: relative; margin-bottom: 20px; vertical-align: top; text-align: center; cursor: pointer; border-radius: 10px; border: 1px solid transparent; } div.profile_popup_v2 .profile_wrapper .profile.current{ margin-left: 10px; margin-right: 10px; } div.profile_popup_v2 .profile_wrapper .profile div{ position: absolute; vertical-align: top; } div.profile_popup_v2 .profile_wrapper .profile div.icon, div.profile_popup_v2 .profile_wrapper .profile div.avatar{ width: 160px; height: 160px; border: 2px solid white; left: 50%; margin-left: -82px; top: 30px; border-radius: 100px; } div.profile_popup_v2 .profile_wrapper .profile div.avatar{ background-size: 100% auto; background-repeat: no-repeat; } div.profile_popup_v2 .profile_wrapper .profile .jdenticon_overflow{ overflow: hidden; } div.profile_popup_v2 .profile_wrapper .profile .jdenticon_overflow svg{ margin-top: -15px; margin-left: -15px; } div.profile_popup_v2 .profile_wrapper .profile div.avatar div.fs_icon{ width: 80px; height: 80px; --background-image: url('/design/img/favicon/android-chrome-192x192.png'); background-size: 100% auto; background-repeat: no-repeat; top: 40px; left: 40px; } div.profile_popup_v2 .profile_wrapper .profile div.display_name, div.profile_popup_v2 .profile_wrapper .profile div.free_slot_text{ font-size: 22px; top: 235px; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.73); white-space: normal; width: 100%; } div.profile_popup_v2 .profile_wrapper .profile .button{ padding-left: 15px; padding-right: 15px; line-height: 30px; text-align: center; border-radius: 15px; text-transform: uppercase; display: inline-block; top: 316px; position: relative; cursor: pointer; } div.profile_popup_v2 .profile_wrapper .profile.free .avatar{ background-color: transparent; border-color: #4FE3D4; } div.profile_popup_v2 .profile_wrapper .profile.free .avatar:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 54px; width: 54px; top: 48px; left: 59px; -webkit-mask: var(--profile-icn-add) no-repeat 100% 100%; mask: var(--profile-icn-add) no-repeat 100% 100%; background-color: #4FE3D4; } div.profile_popup_v2 .profile_wrapper .profile.free input, div.profile_popup_v2 .profile_wrapper .profile.free .save{ display: none; } div.profile_popup_v2 .profile_wrapper .profile.free .save{ top: 260px; } div.profile_popup_v2 .profile_wrapper .profile.free input{ position:absolute; width: 200px; left: 10px; top: 220px; font-family: inherit; font-size: 22px; text-align: center; background-color: transparent; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.73); border: 0px; } div.profile_popup_v2 .profile_popup_account_link{ color: #51E3D6; border: 1px solid #51E3D6; border-radius: 27px; display: inline-block; padding-left: 30px; line-height: 40px; padding-right: 30px; font-size: 14px; text-transform: uppercase; margin-top: 20px; } div.profile_popup_v2 .profile_popup_account_link:hover{ border-color:#51E3D6; background-color: #143935; color: #51E3D6; cursor: pointer; } div.error_popup div.dropdown_wrapper div.dropdown_item div.dropdown_item_add_input input, div.content_wrapper div.item_menu div.item_menu_input_wrapper input{ background-color: transparent; } div.error_popup div.mat-icon, div.profile_popup div.mat-icon, div.setting_popup div.mat-icon, div.mmm_popup div.mat-icon{ font-size: 40px; position: absolute; } div.error_popup div.error_header, div.profile_popup div.error_header, div.setting_popup div.error_header, div.mmm_popup div.error_header{ font-size: 18px; padding-left: 50px; padding-top: 2px; text-transform: uppercase; } div.error_popup div.text, div.profile_popup div.text, div.setting_popup div.text, div.mmm_popup div.text{ padding-left: 50px; margin-top: 0px; } div.error_popup div.dropdown_wrapper{ width: 100%; max-height: 350px; overflow: auto; margin-top: 15px; position: relative; } div.error_popup div.dropdown_wrapper div.dropdown_item{ height: 35px; border-left: 4px solid; font-family: inherit; line-height: 35px; cursor: pointer; } div.error_popup div.dropdown_wrapper div.dropdown_item div.name{ text-indent: 20px; } div.error_popup div.dropdown_wrapper div.dropdown_item div.name span{ text-indent: -4px; position: relative; top: 5px; padding-right: 1px; font-size: 21px; } div.error_popup div.textarea_wrapper, div.mmm_popup div.textarea_wrapper{ margin-top: 18px; margin-right: 6px; } div.error_popup div.textarea_wrapper textarea{ width: 100%; border: 0px; font-family: inherit; padding: 3px; color: inherit; } div.error_popup div.dropdown_wrapper div.dropdown_item div.dropdown_item_add_input input, div.setting_popup div.dropdown_wrapper div.dropdown_item div.dropdown_item_add_input input, div.content_wrapper div.item_menu div.item_menu_input_wrapper input{ height: 35px; width: 80%; font-family: inherit; text-indent: 20px; margin:0; padding:0; border: 0px; } div.content_wrapper div.item_menu div.item_menu_input_wrapper input{ text-indent: -1px; height: 32px; width: 180px; font-size: 15px; color: inherit; top: -2px; } div.error_popup input, div.error_popup select, div.setting_popup select{ float: left; } div.setting_popup select{ margin-top: 3px; } div.error_popup input, div.mmm_popup input{ font-family: inherit; text-indent: 4px; } div.error_popup input, div.mmm_popup input{ width: 240px; margin-left: 15px; margin-bottom: 20px; } div.error_popup div.dropdown_wrapper div.dropdown_item div.dropdown_item_add_input .mat-icon, div.content_wrapper div.item_menu div.item_menu_input_wrapper .mat-icon{ opacity: 0.4; float: right; padding-top: 6px; padding-right: 8px; } div.content_wrapper div.item_menu div.item_menu_input_wrapper span.mat-icon{ width: 18px; position: absolute; right: 7px; text-indent: 0px; } div.error_popup div.dropdown_wrapper div.dropdown_item div.dropdown_item_add_input .mat-icon:hover, div.content_wrapper div.item_menu div.item_menu_input_wrapper .mat-icon:hover{ cursor: pointer; opacity: 1; } div.error_popup div.button_wrapper, div.mmm_popup div.button_wrapper, div.setting_popup div.button_wrapper, div.lyric_popup div.button_wrapper{ margin-top: 25px; } div.error_popup div.button_wrapper div.button, div.mmm_popup div.button_wrapper div.button, div.setting_popup div.button_wrapper div.button, div.lyric_popup div.button_wrapper div.button{ float: left; line-height: 30px; padding-left: 15px; padding-right: 15px; margin-right: 10px; min-width: 80px; text-align: center; border-radius: 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; } div.error_popup div.button_wrapper div.button.right, div.setting_popup div.button_wrapper div.button.right{ float: right; margin-right: 0px; margin-left: 5px; } div.error_popup div.button_wrapper div.button:hover, div.mmm_popup div.button_wrapper div.button:hover, div.setting_popup div.button_wrapper div.button:hover, div.lyric_popup div.button_wrapper div.button:hover, div.error_popup div.button_wrapper div.button.ElementToEnter, div.mmm_popup div.button_wrapper div.button.ElementToEnter, div.setting_popup div.button_wrapper div.button.ElementToEnter{ cursor: pointer; -webkit-box-shadow: 0px 0px 10px 0px rgba(49,188,175,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(49,188,175,0.2); box-shadow: 0px 0px 8px 0px rgba(49,188,175,0.2); } .setting_popup .text{ margin-bottom: 20px; font-weight: 400; margin-top: 12px; } div.setting_popup div.setting{ display: inline-block; width: 100%; position: relative; height: 36px; padding-top: 5px; border-top: 1px dashed #666; } div.setting_popup:last-child div.setting{ border-bottom: 1px dashed #666; } div.setting_popup div.setting div.name{ position: absolute; margin-top: 6px; } div.setting_popup div.checkbox_switch_wrapper, div.setting_popup select{ position: absolute; right: 0px; } .adm{ position:relative; z-index: 230; color: red; display: none; background-color: rgba(0,0,0,0.5); } div.header div.user_dropdown_wrapper{ position: absolute; right: 15px; top: 50px; padding-bottom: 10px; padding-top: 10px; display: none; min-width: 250px; -webkit-box-shadow: 0px 0px 14px 8px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 14px 8px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.5); border: 1px solid #333; } div.header div.user_dropdown_wrapper div.item, div.header div.user_dropdown_wrapper div.item div.submenu_wrapper div.submenu_item{ height: 32px; padding-left: 13px; padding-right: 40px; white-space: nowrap; border-left: 4px solid; position: relative; cursor: pointer; --text-transform: uppercase; font-weight: 500; font-size: 14px; } div.header div.user_dropdown_wrapper div.item{ padding-bottom: 4px; } div.header div.user_dropdown_wrapper div.item li{ --font-size: 21px; position: relative; top: 7px; padding-right: 8px; } div.header div.user_dropdown_wrapper div.item div.submenu_wrapper{ position: absolute; width: 150px; left: -150px; z-index: 1; top: 0px; padding-bottom: 3px; display: none; -webkit-box-shadow: 0px 0px 14px 8px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 14px 8px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.5); border: 1px solid #333; } div.header div.user_dropdown_wrapper div.item:hover div.submenu_wrapper{ display: block; } div.header div.user_dropdown_wrapper div.item div.submenu_wrapper div.submenu_item{ line-height: 32px; } div.header div.user_dropdown_wrapper div.seperator{ height: 9px; position: relative; } div.header div.user_dropdown_wrapper div.seperator div.line{ position: absolute; left: 10px; right: 10px; top: 4px; height: 1px; } div.artist_page{ min-height: 325px; } div.artist_page.landscape_art_enabled{ min-height: 306px; } @media (min-height:800px) { div.artist_page.landscape_art_enabled{ min-height: 450px; } } div.artist_page div.avatar, div.profile_page div.avatar{ height: 210px; width: 210px; background-size: auto 100%; background-position: center center; -webkit-border-radius: 135px; -moz-border-radius: 135px; border-radius: 135px; position: absolute; top: 35px; left: 70px; } div.artist_page div.avatar .icon{ position: absolute; top: 7px; left: 16px; } div.artist_page div.avatar .icon:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: absolute; height: 120px; width: 120px; -webkit-mask: var(--mat-icn-person) no-repeat 100% 100%; mask: var(--mat-icn-person) no-repeat 100% 100%; background-color: rgb(204, 204, 204); } div.artist_page.landscape_art_enabled div.avatar .icon{ top: 10px; left: 18px; } div.artist_page.landscape_art_enabled div.avatar{ height: 150px; width: 150px; border-radius: 75px; left: 50%; margin-left: -75px; } @media (min-height:800px) { div.artist_page.landscape_art_enabled div.avatar{ height: 240px; width: 240px; margin-left: -120px; border-radius: 120px; } div.artist_page.landscape_art_enabled div.avatar .icon{ top: 22px; left: 31px; } div.artist_page div.avatar .icon:before{ height: 180px; width: 180px; } } div.artist_page div.avatar div.avatar_inner, div.profile_page div.avatar div.avatar_inner{ height: 100%; width: 100%; background-size: auto 100%; background-position: center center; -webkit-border-radius: 135px; -moz-border-radius: 135px; border-radius: 135px; position: absolute; } div.artist_page.landscape_art_enabled div.avatar_inner{ border-radius: 120px; } div.artist_page .social, div.profile_page .social, div.artist_page .concert_upcoming_wrapper{ position: relative; padding-left: 310px; } div.artist_page .options, div.profile_page .options{ position: relative; top: 200px; left: 69px; width: 210px; cursor: pointer; } .concert_upcoming{ display: none; } div.artist_page .concert_upcoming_wrapper{ padding-top: 9px; width: 50%; max-width: 550px; } div.artist_page .concert_upcoming{ display: table; font-weight: normal; cursor: pointer; width: 100%; } div.artist_page .concert_upcoming div{ display: table-cell; } div.artist_page .concert_upcoming .mat-icon{ position: relative; top: 6px; width: 20px; left: -3px; font-size: 22px; } div.artist_page .concert_upcoming .date, div.artist_page .concert_upcoming .name, div.artist_page .concert_upcoming .city{ font-style: italic; white-space: nowrap; } div.artist_page .concert_upcoming .date{ padding-right: 15px; width: 1px; } div.artist_page .concert_upcoming .name{ position: relative; cursor: pointer; } div.artist_page .concert_upcoming .name span{ text-overflow: ellipsis; position: absolute; max-width: 100%; bottom: 0px; overflow: hidden; padding-right: 3px; } div.artist_page .concert_upcoming .city{ text-align: right; width: 1px; padding-left: 15px; padding-right: 15px; } div.artist_page .social .item, div.profile_page .social .item{ background-repeat: no-repeat; background-position: left center; display: inline-block; text-indent: 21px; line-height: 20px; padding-right: 20px; height: 20px; } div.artist_page .artist_plays_last_month{ display: none; } .social .item.website{ background-image: url('/images/icon-website_16.png'); } .social .item.facebook{ background-image: url('/images/facebook-16.png'); } .social .item.instagram{ background-image: url('/images/instagram-16.png'); } .social .item.twitter{ background-image: url('/images/twitter-16.png'); } .social .hide_artist.hide{ background-image: url('/images/block-16.png'); } .social .hide_artist.unhide{ background-image: url('/images/show-16.png'); } .social a{ color: inherit; text-decoration: none; } .social .item:hover{ cursor: pointer; } div.artist_page div.avatar div.extra_shade, div.profile_page div.avatar div.extra_shade{ position: relative; height: 100%; width: 100%; -webkit-border-radius: 135px; -moz-border-radius: 135px; border-radius: 135px; } div.artist_page .title, div.profile_page .title{ margin-left: 310px; padding-top: 0px; padding-left: 0px; padding-bottom: 2px; } div.profile_page div.subject, div.artist_page div.subject{ margin-left: 310px; padding-top: 20px; padding-left: 0px; padding-bottom: 2px; } div.artist_page.landscape_art_enabled .title, div.norm_albu_dspl.v2 .title{ margin: 0; padding: 0; text-align: center; max-width: initial; position: relative; top: 190px; } @media (min-height:800px) { div.artist_page.landscape_art_enabled .title, div.norm_albu_dspl.v2 .title{ top: 300px; } } div.artist_page.landscape_art_enabled div.subject{ display: none; } div.artist_page .title .mat-icon, div.profile_page .title .mat-icon{ position: relative; font-size: 32px; top: 7px; padding-right: 5px; left: -4px; display: none; } div.artist_page.landscape_art_enabled div.biography{ display: none; } div.artist_page div.biography{ margin-left: 310px; margin-top: 18px; min-height: 200px; white-space: pre-wrap; font-size: 14px; line-height: 19px; width: 50%; max-width: 550px; font-weight: 400; overflow: hidden; } div.artist_page div.biography div.biography_show_more{ display: none; position: absolute; bottom: 14px; text-align: center; padding-top: 50px; padding-bottom: 10px; } div.artist_page div.biography div.biography_show_more .btn:hover{ cursor: pointer; display: inline-block; } div.artist_page div.cooperative_wrapper{ margin-left: 304px; position: relative; top: 20px; } div.artist_page div.cooperative_wrapper .mat-icon{ top: 0px; } div.artist_page div.cooperative_wrapper div.cooperative{ position: relative; } div.artist_page div.cooperative_wrapper div.cooperative div.block{ margin-left: 40px; top: 5px; } div.artist_page.landscape_art_enabled div.block_separator{ display: none; } div.artist_page div.block_separator{ --position: relative; left: 45px; margin-top: 42px; display: block; border-top: 2px solid #0D0D0D; border-bottom: 1px solid #575757; } .empty_block_text{ font-size: 24px; } div.content{ opacity: 0; } div.content.background, div.content.show{ opacity: 1; } div.content div.master_placeholder_wrapper{ --padding-left: 150px; --padding-right: 150px; text-align: center; font-size: 32px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } div.content div.master_placeholder_wrapper .no_items_icn.tracks:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: -130px; left: 50%; margin-left: -60px; height: 120px; width: 120px; -webkit-mask: var(--menu-tracks) no-repeat 100% 100%; mask: var(--menu-tracks) no-repeat 100% 100%; background-color: #8f8490; position: absolute; display: inline-block; } div.content div.master_placeholder_wrapper .no_items_icn.albums:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: -130px; left: 50%; margin-left: -60px; height: 120px; width: 120px; -webkit-mask: var(--menu-mymusic) no-repeat 100% 100%; mask: var(--menu-mymusic) no-repeat 100% 100%; background-color: #8f8490; position: absolute; display: inline-block; } div.content div.master_placeholder_wrapper .no_items_icn.lists:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: -130px; left: 50%; margin-left: -60px; height: 120px; width: 120px; -webkit-mask: var(--menu-playlists) no-repeat 100% 100%; mask: var(--menu-playlists) no-repeat 100% 100%; background-color: #8f8490; position: absolute; display: inline-block; } div.content div.master_placeholder_wrapper .text{ position: relative; text-align: center; width:100%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } div.content div.ui-sortable-helper{ -webkit-box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.75); box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.75); } div.content div.ui-sortable-placeholder{ display: table; width: 100%; height: 28px; background-color: #262626; } div.content div.track_wrapper div.track div.handle{ position: relative; width: 30px; padding-left: 7px; } div.content div.track_wrapper div.track div.handle .mat-icon{ font-size: 21px; padding:0; top:6px; position: absolute; display: none; line-height:16px; cursor: pointer; } div.content div.track_wrapper div.track div.track_name span.track_bookmark_icn { padding-right: 4px; font-weight: bold; display: none; } div.content div.track_wrapper div.track.bookmarked div.track_name span.track_bookmark_icn { display: inline-block; } div.enlarged_art_wrapper{ position: absolute; left: 50%; top: 50%; z-index: 210; display: none; opacity: 0; -webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.9); -mox-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.9); box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.9); } div.enlarged_art_wrapper .art{ background-repeat: no-repeat; height: 100%; width: 100%; opacity: 0; } div.enlarged_art_wrapper.show .art{ opacity: 1 } div.enlarged_art_wrapper.show{ opacity: 1; display: block; } .HomeArtistList{ margin-top: 40px; position: relative; } .HomeArtistList .headers{ padding-left: 3%; position: relative; } .HomeArtistList .headers .letter{ display: inline-block; width: 3.5%; font-size: 18px; border-bottom: 3px solid transparent; text-align: center; padding-bottom: 3px; cursor: pointer; } .HomeArtistList .LetterBlock{ margin-top: 15px; position: absolute; display: none; top: 30px; width: 100%; padding-bottom: 50px; } .HomeArtistList .LetterBlock .item{ height: 40px; position: relative; margin-top: 10px; margin-bottom: 10px; margin-left: 40px; margin-right: 20px; width: 450px; padding-right: 20px; border-left: 3px solid; cursor: pointer; } .HomeArtistList .LetterBlock .item .avatar{ height: 32px; width: 32px; position: absolute; border-radius: 16px 16px 16px 16px; -moz-border-radius: 16px 16px 16px 16px; -webkit-border-radius: 16px 16px 16px 16px; background-size: 100% 100%; background-repeat: no-repeat; top: 4px; left: 10px; } .HomeArtistList .LetterBlock .item .avatar.placeholder .mat-icon{ position: absolute; top: 3px; left: 4px; } .HomeArtistList .LetterBlock .item .name{ line-height: 40px; vertical-align: middle; left: 52px; position: absolute; white-space: nowrap; } .content_wrapper .col_wrapper .col_third{ width: 33%; display: inline-block; position: relative; vertical-align: top; } .content_wrapper .col_wrapper .col_third .scroll{ position: relative; } .content_wrapper .col_wrapper .col_third .scroll .scroll_shade_top, .content_wrapper .col_wrapper .col_third .scroll .scroll_shade_bottom{ position: absolute; height: 10px; width: 100%; display: none; } .content_wrapper .col_wrapper .col_third .scroll.ps-active-y .scroll_shade_top, .content_wrapper .col_wrapper .col_third .scroll.ps-active-y .scroll_shade_bottom{ display: block; } .content_wrapper .col_wrapper .col_third .scroll .scroll_shade_top{ position: absolute; top: 0px; opacity: 0; } .content_wrapper .col_wrapper .col_third .scroll .scroll_shade_bottom{ position: sticky; bottom: 0px; opacity: 1; } .content_wrapper .profile_page .col_wrapper{ position: relative; margin-left: 310px; } div.profile_page .col_wrapper .title{ margin-left: 0px; font-size: 16px; margin-bottom: 4px; text-transform: uppercase; padding-top: 0px; font-family: 'Ubuntu', sans-serif; } .content_wrapper .profile_page .plistItem, .content_wrapper .profile_page .profileFavoriteItem, .content_wrapper .profile_page .profileFollowItem{ margin-right: 20px; margin-bottom: 1px; height: 34px; position: relative; } .content_wrapper .profile_page .profileFollowItem{ height: 48px; } .content_wrapper .profile_page .profileFavoriteItem{ height: 60px; } .content_wrapper .profile_page .profileFavoriteItem .album_art{ height: 50px; width: 50px; background-size: 100% auto; background-repeat: no-repeat; left: 10px; top: 5px; } .content_wrapper .profile_page .profileFollowItem .avatar{ height: 32px; width: 32px; top: 8px; left: 10px; } .content_wrapper .profile_page .profileFollowItem .avatar .mat-icon{ font-size: 26px; top: 2px; left: 3px; } .content_wrapper .profile_page .plistItem:hover, .content_wrapper .profile_page .profileFavoriteItem:hover, .content_wrapper .profile_page .profileFollowItem:hover{ cursor: pointer; } .content_wrapper .profile_page .plistItem:hover div.name, .content_wrapper .profile_page .profileFavoriteItem:hover div.name, .content_wrapper .profile_page .profileFollowItem:hover div.name{ text-decoration: underline; } .content_wrapper .profile_page .profileFollowItem div.avatar .is_online{ height: 8px; width: 8px; border-radius: 50%; top: 1px; left: 24px; border: 1px solid white; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); box-shadow: 0px 1px 3px 0px rgba(0,0,0,1); } .content_wrapper .profile_page .plistItem div, .content_wrapper .profile_page .profileFavoriteItem div, .content_wrapper .profile_page .profileFollowItem div{ position: absolute; } .content_wrapper .profile_page .plistItem div.name{ top: 7px; left: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .content_wrapper .profile_page .profileFollowItem div.name{ top: 16px; left: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .content_wrapper .profile_page .profileFavoriteItem div.name{ top: 22px; left: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .content_wrapper .profile_page .plistItem div.thumbs_up{ right: 12px; top: 6px; } .content_wrapper .profile_page .plistItem div.thumbs_down{ right: 8px; top: 3px; } .content_wrapper .profile_page .plistItem div.thumbs_up .mat-icon, .content_wrapper .profile_page .plistItem div.thumbs_down .mat-icon{ font-size: 16px; position: relative; top: 3px; } .content_wrapper .profile_page .plistItem div.thumbs_up span, .content_wrapper .profile_page .plistItem div.thumbs_down span{ padding-left: 5px; } .content_wrapper .profile_page .plistItem div.thumbs_down .mat-icon{ top: 6px; } .content_wrapper .profile_page .avatar_upload .mat-icon.upload{ display: none; } .content_wrapper .profile_page .avatar_upload:hover{ cursor: pointer; } .content_wrapper .profile_page .avatar_upload:hover .mat-icon.upload{ display: block; } .content_wrapper .profile_page .avatar_upload:hover .mat-icon.person{ display: none; } .content_wrapper .profile_page .avatar_upload .save{ border-radius: 50%; border: 2px solid; position: relative; top: 160px; left: 160px; width: 40px; height: 40px; cursor: pointer; z-index: 4; display: none; } .content_wrapper .profile_page .avatar_upload .save:hover{ -webkit-box-shadow: 0px 0px 8px 0px rgba(49, 188, 175,1); -moz-box-shadow: 0px 0px 8px 0px rgba(49, 188, 175,1); box-shadow: 0px 0px 8px 0px rgba(49, 188, 175,1); } .content_wrapper .profile_page .avatar_upload .save .mat-icon{ font-size: 31px; left: 5px; top: 4px; } .cr-boundary{ display: none; border-radius: 50%; } .ps-scrollbar-y-rail{ z-index:120; } div.snackbar_wrapper{ position: fixed; bottom: -50px; left: 20px; z-index: 11; border-radius: 4px; padding-top: 14px; padding-left: 20px; padding-bottom: 14px; opacity: 0; overflow: hidden; word-wrap: none; white-space: nowrap; -webkit-box-shadow: 0px 4px 10px rgba(0,0,0,0.8); -moz-box-shadow: 0px 4px 10px rgba(0,0,0,0.8); box-shadow: 0px 4px 10px rgba(0,0,0,0.8); } div.snackbar_wrapper.show{ opacity: 100; bottom: 20px; } div.snackbar_wrapper .text{ padding-right: 60px; display: inline-block; word-wrap: none; white-space: nowrap; } div.snackbar_wrapper li{ position: absolute; top: 12px; right: -2px; padding-right: 14px; cursor: pointer; } .checkbox_switch { position: relative; display: inline-block; width: 46px; height: 20px; margin-top: 5px; } .checkbox_switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .checkbox_switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; } .checkbox_switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; background-color: white; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); } .checkbox_switch .slider.round { border-radius: 20px; left: 0; background-color: #aaa; } .checkbox_switch .slider.round:before { border-radius: 20px; } div.content_wrapper div.button_v2{ line-height: 36px; display: inline-block; border-radius: 18px; padding-left: 20px; padding-right: 20px; text-transform: uppercase; font-weight: 700; } div.content_wrapper div.button_v2 .mat-icon{ top: 5px; } div.subscribe_bottom_wrapper{ position: absolute; bottom: 16px; width: 100%; z-index: -10; -webkit-transition: opacity 0.15s ease; -moz-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; transition: opacity 0.15s ease; opacity: 0; } div.subscribe_bottom_wrapper .subscribe_bottom_inner{ position: relative; width: 80%; max-width: 1400px; color: white; margin-left: auto; margin-right: auto; border-radius: 18px; background: rgb(28,156,147); background: linear-gradient(56deg, rgba(28,156,147,1) 0%, rgba(29,123,139,1) 39%, rgba(29,117,137,1) 100%); -webkit-box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); padding-left: 40px; padding-right: 40px; padding-top: 18px; padding-bottom: 18px; display: table; } div.subscribe_bottom_wrapper .subscribe_bottom_inner span, div.subscribe_bottom_wrapper .subscribe_bottom_inner a{ font-size: 16px; text-transform: uppercase; display: table-cell; color: inherit; } div.subscribe_bottom_wrapper .subscribe_bottom_inner span.text-right{ width: 10px; white-space:nowrap; padding-right: 30px; } div.subscribe_bottom_wrapper .subscribe_bottom_inner a.btn{ cursor: pointer; background-color: white; border-radius: 40px; color: black; padding-left: 20px; padding-right: 20px; padding-top: 8px; padding-bottom: 8px; text-transform: initial; width: 10px; text-decoration: none; } div.subscribe_bottom_wrapper .subscribe_bottom_inner a.btn:hover{ background-color: #166272; color: white; } div.subscribe_overlay_wrapper{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: -10; -webkit-transition: opacity 0.15s ease; -moz-transition: opacity 0.15s ease; -o-transition: opacity 0.15s ease; transition: opacity 0.15s ease; opacity: 0; } div.subscribe_overlay_wrapper .subscribe_overlay_inner{ position: relative; margin-left: auto; margin-right: auto; top: 25%; border-radius: 18px; background: rgb(28,156,147); background: linear-gradient(56deg, rgba(28,156,147,1) 0%, rgba(29,123,139,1) 39%, rgba(29,117,137,1) 100%); -webkit-box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); box-shadow: 0px 0px 51px -6px rgba(0,0,0,1); } div.subscribe_overlay_wrapper .album-block{ display: inline-block; } div.subscribe_overlay_wrapper .album-block .img{ position: absolute; --top: 30px; --left: 30px; --right: 30px; --bottom: 30px; background-size: contain; background-repeat: no-repeat; background-position: left; -webkit-box-shadow: 0px 0px 27px -6px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 27px -6px rgba(0,0,0,0.75); box-shadow: 0px 0px 27px -6px rgba(0,0,0,0.75); } div.subscribe_overlay_wrapper .text-block{ display: inline-block; position: absolute; color: white; font-size: 14px; } div.subscribe_overlay_wrapper .text-block span{ display: block; } div.subscribe_overlay_wrapper .text-block .txt-1{ text-transform: uppercase; font-size: 1.1em; } div.subscribe_overlay_wrapper .text-block .txt-2{ text-transform: uppercase; font-size: 1.8em; } div.subscribe_overlay_wrapper .text-block .txt-3{ font-size: 1em; } div.subscribe_overlay_wrapper .text-block-bottom{ position: absolute; bottom: 0px; } div.subscribe_overlay_wrapper .text-block .txt-4{ text-transform: uppercase; font-size: 1.1em; } div.subscribe_overlay_wrapper .text-block .txt-5{ margin-bottom: 6px; padding-top: 16px; } div.subscribe_overlay_wrapper .text-block .txt-5 a.btn{ cursor: pointer; background-color: white; border-radius: 40px; color: black; padding-left: 20px; padding-right: 20px; padding-top: 8px; padding-bottom: 8px; text-transform: initial; width: 10px; display: inline; margin-right: 8px; text-decoration: none; } div.subscribe_overlay_wrapper .text-block .txt-5 a.btn:hover{ background-color: #166272; color: white; } div.subscribe_overlay_wrapper .text-block .txt-5 a{ color: white; } div.artist_page.landscape_art_enabled .social, div.artist_page.landscape_art_enabled .options{ display: none; } div.content .subtitle_v2{ display: none; color: #AFAFAF; line-height: 14px; font-weight: 400; } div.artist_page.landscape_art_enabled .subtitle_v2{ display: block; position: relative; text-align: center; top: 201px; } @media (min-height:800px) { div.artist_page.landscape_art_enabled .subtitle_v2{ top: 304px; } } div.content .action_btns{ display: none; } div.content .landscape_art_enabled .action_btns, div.norm_albu_dspl.v2 .options{ display: block; text-align: center; top: 206px; position: relative; } @media (min-height:800px) { div.content .landscape_art_enabled .action_btns, div.norm_albu_dspl.v2 .options{ top: 320px; } } div.norm_albu_dspl.v2 .options .btn .mat-icon{ display: none; } div.content .landscape_art_enabled .action_btns .btn, div.norm_albu_dspl.v2 .options .btn{ background-color: #484848; line-height: 28px; border-radius: 15px; display: inline-block; margin-left: 4px; margin-right: 4px; margin-top: 8px; padding-left: 14px; padding-right: 12px; font-weight: 700; text-transform: uppercase; font-size: 12px; cursor: pointer; } div.content .landscape_art_enabled .action_btns .btn:hover, div.norm_albu_dspl.v2 .options .btn:hover{ background-color: #646464; } div.content .landscape_art_enabled .action_btns .btn.btn_active, div.norm_albu_dspl.v2 .options .btn.btn_active{ background-color: #afafaf; color: #000000; } div.content .action_btns .btn:before, div.norm_albu_dspl.v2 .options .btn:before{ background-color: #ece3ed; } div.content .action_btns .btn.btn_active:before, div.norm_albu_dspl.v2 .options .btn.btn_active:before{ background-color: #000000; } div.content .action_btns .btn.follow_artist:before, div.content .action_btns .btn.unfollow_artist:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: -4px; height: 17px; width: 17px; -webkit-mask: var(--action-btn-follow) no-repeat 100% 100%; mask: var(--action-btn-follow) no-repeat 100% 100%; } div.content .action_btns .btn.hide_artist:before, div.content .action_btns .btn.hide_artist:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: -4px; height: 20px; width: 20px; -webkit-mask: var(--action-btn-block) no-repeat 100% 100%; mask: var(--action-btn-block) no-repeat 100% 100%; } div.norm_albu_dspl.v2 .options .btn.add_to_queue:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: -4px; height: 20px; width: 20px; -webkit-mask: var(--action-btn-queue) no-repeat 100% 100%; mask: var(--action-btn-queue) no-repeat 100% 100%; } div.norm_albu_dspl.v2 .options .btn.playlist_add:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 5px; left: -4px; height: 18px; width: 18px; -webkit-mask: var(--action-btn-add-plist) no-repeat 100% 100%; mask: var(--action-btn-add-plist) no-repeat 100% 100%; } div.norm_albu_dspl.v2 .options .btn.add_favorite:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 5px; left: -5px; height: 18px; width: 18px; -webkit-mask: var(--action-btn-add) no-repeat 100% 100%; mask: var(--action-btn-add) no-repeat 100% 100%; } div.norm_albu_dspl.v2 .options .btn.remove_favorite:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 6px; left: -5px; height: 14px; width: 14px; -webkit-mask: var(--action-btn-check) no-repeat 100% 100%; mask: var(--action-btn-check) no-repeat 100% 100%; } div.norm_albu_dspl.v2 .options .btn.block_album:before{ content: ''; -webkit-mask-size: cover; mask-size: cover; position: relative; float: left; top: 4px; left: -5px; height: 20px; width: 20px; -webkit-mask: var(--action-btn-block) no-repeat 100% 100%; mask: var(--action-btn-block) no-repeat 100% 100%; } div.content div.landscape_art{ position: absolute; top: -30px; left: -30px; right: -30px; height: 650px; background-size: cover; filter: blur(15px); -webkit-filter: blur(15px); } div.content div.landscape_art .landscape_art_shade{ position: absolute; top: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,1) 100%); } div.norm_albu_dspl.v2 div.subject{ display: none; } div.norm_albu_dspl.v2 .block_footer{ position: relative; width: 80%; max-width: 1400px; margin-left: auto; margin-right: auto; margin-top: 8px; color: #AFAFAF; font-weight: 400; padding-left: 30px; } div.norm_list .track_wrapper, div.norm_albu_dspl.v2 .track_wrapper{ position: relative; margin-top: 230px; padding-left: 0; width: 80%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-bottom: 10px; } @media (min-height:800px) { div.norm_list .track_wrapper, div.norm_albu_dspl.v2 .track_wrapper{ margin-top: 370px; } } div.norm_list .track_wrapper .table-header, div.norm_albu_dspl.v2 .track_wrapper .table-header{ color: white; } div.norm_albu_dspl.v2 .track_wrapper .track_num{ display: none; } div.norm_list .track_wrapper .highlight .track_name, div.norm_list .track_wrapper .highlight .album_name, div.norm_albu_dspl.v2 .track_wrapper .highlight .track_name{ font-weight: 400 !important; } div.norm_list .track_wrapper .highlight .composer, div.norm_albu_dspl.v2 .track_wrapper .highlight .composer{ color: #AFAFAF !important; } div.norm_list .track_wrapper .highlight .time, div.norm_albu_dspl.v2 .track_wrapper .highlight .time{ font-weight: 400 !important; color: #AFAFAF !important; } div.norm_list div.track_wrapper div.track.odd div.norm_albu_dspl.v2 div.track_wrapper div.track.odd{ background-color: #000000; } div.norm_albu_dspl.v2 div.album_art{ width: 180px; height: 180px; top: 0px; margin-left: 50%; left: -90px; border-radius: 10px; } @media (min-height:800px) { div.norm_albu_dspl.v2 div.album_art{ width: 240px; height: 240px; top: 30px; left: -120px; } } div.norm_albu_dspl.v2 div.sub_title{ padding: 0; text-align: center; top: 200px; color: #51E3D6; font-weight: 400; font-size: 16px; } @media (min-height:800px) { div.norm_albu_dspl.v2 div.sub_title{ top: 306px; } } div.norm_albu_dspl.v2 .thumbs_wrapper{ background-color: transparent; left: 0; right: 0; min-width: 450px; width: 80%; max-width: 480px; margin-left: auto; margin-right: auto; top: 80px; } @media (min-height:800px) { div.norm_albu_dspl.v2 .thumbs_wrapper{ top: 130px; max-width: 520px; } } div.norm_albu_dspl.v2 .thumbs_wrapper div.mat-icon{ display: none; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up, div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_down{ position: relative; background-color: rgb(0 0 0 / 45%); line-height: 34px; border-radius: 20px; padding-left: 20px; padding-right: 20px; min-width: 48px; text-align: right; font-weight: 700; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up.active, div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_down.active{ background-color: #D8D8D8; color: black; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up.active:before, div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_down.active:before{ background-color: black; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up{ float: right; } div.norm_albu_dspl.v2 .thumbs_wrapper div:hover{ color: white; }div.norm_albu_dspl.v2 .thumbs_wrapper div.active{ color: inherit; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up .thumb_up_icn{ position: absolute; background-image: url('/design/img/icon-thumb-up.svg'); background-size: 100% auto; height: 46px; width: 46px; background-repeat: no-repeat; top: -6px; left: 5px; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_up.active .thumb_up_icn{ background-image: url('/design/img/icon-thumb-up-active.svg'); } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_down .thumb_down_icn{ position: absolute; background-image: url('/design/img/icon-thumb-down.svg'); background-size: 100% auto; height: 46px; width: 46px; background-repeat: no-repeat; top: -7px; left: 6px; } div.norm_albu_dspl.v2 .thumbs_wrapper .thumbs_down.active .thumb_down_icn{ background-image: url('/design/img/icon-thumb-down-active.svg'); } div.norm_albu_dspl.v2 .cooperative_wrapper{ position: relative; padding-left: 0; width: 80%; max-width: 1400px; margin-left: auto; margin-right: auto; margin-top: 10px; }