:root{ --alyv_yellow: #f1fd43; --max_page_width: 100%; --cssx_border_colors: #ffffff; --content_section_background_color: #f3f5f4; --title_background: var(--common_color_dark); --common_color_dark: #222222; --general_margins: 5px; --menu_section_height: 60px; --menu_buttons_margins: 2px; --menu_buttons_height: 46px; --menu_buttons_width: var(--menu_buttons_height); --menu_button_height: 18px; --menu_button_lines_height: 3px; --menu_button_flag_arm_color_red: #ff6666; --menu_button_flag_arm_color_blu: #1aa3ff; --menu_button_flag_arm_color_org:rgba(255,179,102,1); /* #ffb366 */ --menu_button_flag_usa_color_red: #ff6666; --menu_button_flag_usa_color_blu: #1aa3ff; --menu_button_flag_usa_color_wht: #ffffff; --menu_button_composer_text_color_regular: #ffffff; --menu_button_composer_text_color_active: var(--alyv_yellow); --menu_button_song_text_color_regular: #ffffff; --menu_button_song_text_color_active: var(--alyv_yellow); --menu_adjust_ui_timebar_width: 0px; --menu_adjust_ui_timebar_bottom: 0px; --menu_adjust_ui_trackinfo_top: 0px; --menu_adjust_ui_buttons_rotate: 0deg; --container_player_transform_y: 0px; --video_player_opacity: 1; --cssx_player_controls_background: rgb(34,34,34,0.50); --cssx_player_controls_inner_size: 16px; --cssx_player_controls_play_size_factor: 1.50; --cssx_player_controls_other_size_factor: 1.25; --cssx_player_controls_other_size_factor_2: 1.25; --cssx_player_controls_inner_color_hover: var(--alyv_yellow); --cssx_player_controls_inner_color_regular: #ffffff; --cssx_player_controls_inner_color_active: var(--alyv_yellow); --cssx_player_controls_inner_previous_color: var(--cssx_player_controls_inner_color_regular); --cssx_player_controls_inner_rewind_color: var(--cssx_player_controls_inner_color_regular); --cssx_player_controls_inner_play_color: var(--common_color_dark); --cssx_player_controls_inner_info_color: var(--common_color_dark); --cssx_player_controls_inner_forward_color: var(--cssx_player_controls_inner_color_regular); --cssx_player_controls_inner_next_color: var(--cssx_player_controls_inner_color_regular); --cssx_player_controls_selector_color: #ffffff; --cssx_player_controls_selector_dangle_factor: 1.75; --cssx_player_timbar_selector_shadow_ratio: 1; --cssx_composers_button_title_shadow_color: rgb(0, 0, 0, 0.8); --cssx_player_main_controls_album_title_inner_shadow_color: rgb(0, 0, 0, 0.8); --cssx_player_main_controls_song_title_inner_shadow_color: rgb(0, 0, 0, 0.8); --player_ui_backdrop_blur: 12px; --cssx_player_ui_navigation_indent: 0; --cssx_menu_adjust_buttons_rotate: (0deg); --cssx_menu_adjust_buttons_width: 12%; --padding_text_body: 15px; /* New auto-cssx compatible cssx variables */ --cssx_container_player_bottom_height: 210px; --cssx_container_player_top_margin_bottom: 0px; --cssx_container_player_top_distance_from_bottom: calc(var(--cssx_container_player_bottom_height) + var(--cssx_container_player_top_margin_bottom)); --cssx_player_container_player_dropShadow: 0px 0px 8px rgb(0, 0, 0, 0.85); --cssx_player_ui_color_regular: rgb(255, 255, 255, 1); --cssx_player_ui_color_hovered: var(--alyv_yellow); --cssx_player_ui_color_pressed: #000000; --cssx_player_ui_filter_regular: opacity(0.7); --cssx_player_ui_filter_hovered: opacity(0.7); --cssx_player_ui_filter_pressed: opacity(0.7); --cssx_player_main_controls_drop_shadow: drop-shadow( var(--cssx_player_main_controls_drop_shadow_x) var(--cssx_player_main_controls_drop_shadow_y) var(--cssx_player_main_controls_drop_shadow_r) var(--cssx_player_main_controls_drop_shadow_color) ); --cssx_player_main_controls_drop_shadow_x: 0px; --cssx_player_main_controls_drop_shadow_y: 0px; --cssx_player_main_controls_drop_shadow_r: 0px; --cssx_player_main_controls_drop_shadow_color: rgb(0, 0, 0, 0); --cssx_player_main_controls_buttons_fontIcon_size: 20vmin; --cssx_player_main_controls_buttons_play_fontIcon_size: 34vmin; --cssx_player_main_controls_buttons_other_fontIcon_size: 18px; --cssx_player_main_controls_buttons_small_fontIcon_size: 37px; --cssx_player_main_controls_buttons_small_play_fontIcon_size: 37px; --cssx_player_main_controls_previousTrack_fontIcon_color_inner: var(--cssx_player_main_controls_buttons_fontIcon_color_inner_regular); --cssx_player_main_controls_previousTrack_fontIcon_dropShadow_inner: var(--cssx_player_main_controls_fontIcon_drop_shadow_inner_regular); --cssx_player_main_controls_previousTrack_fontIcon_filter_inner: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_rewind_fontIcon_color_inner: var(--cssx_player_main_controls_buttons_fontIcon_color_inner_regular); --cssx_player_main_controls_rewind_fontIcon_dropShadow_inner: var(--cssx_player_main_controls_fontIcon_drop_shadow_inner_regular); --cssx_player_main_controls_play_fontIcon_color_inner: var(--cssx_player_main_controls_buttons_fontIcon_color_inner_regular); --cssx_player_main_controls_play_fontIcon_dropShadow_inner: var(--cssx_player_main_controls_fontIcon_drop_shadow_inner_regular); --cssx_player_main_controls_play_fontIcon_filter_inner: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_forward_fontIcon_color_inner: var(--cssx_player_main_controls_buttons_fontIcon_color_inner_regular); --cssx_player_main_controls_forward_fontIcon_dropShadow_inner: var(--cssx_player_main_controls_fontIcon_drop_shadow_inner_regular); --cssx_player_main_controls_nextTrack_fontIcon_color_inner: var(--cssx_player_main_controls_buttons_fontIcon_color_inner_regular); --cssx_player_main_controls_nextTrack_fontIcon_dropShadow_inner: var(--cssx_player_main_controls_fontIcon_drop_shadow_inner_regular); --cssx_player_main_controls_nextTrack_fontIcon_filter_inner: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_fontIcon_drop_shadow_inner_regular: var(--cssx_player_main_controls_buttons_fontIcon_shadow_x) var(--cssx_player_main_controls_buttons_fontIcon_shadow_y) var(--cssx_player_main_controls_buttons_fontIcon_shadow_r) var(--cssx_player_main_controls_buttons_fontIcon_shadow_color); --cssx_player_main_controls_fontIcon_drop_shadow_inner_pressed: unset; --cssx_player_main_controls_buttons_fontIcon_shadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_buttons_fontIcon_shadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_buttons_fontIcon_shadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_buttons_fontIcon_shadow_color: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_buttons_fontIcon_color_inner_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_buttons_fontIcon_color_inner_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_buttons_fontIcon_color_inner_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_buttons_fontIcon_filter_inner_regular: var(--cssx_player_ui_filter_regular); --cssx_player_main_controls_buttons_fontIcon_filter_inner_pressed: var(--cssx_player_ui_filter_pressed); --cssx_player_main_controls_buttons_fontIcon_filter_inner_hovered: var(--cssx_player_ui_filter_hovered); --cssx_player_main_controls_artist_title_color: var(--cssx_player_main_controls_artist_title_color_regular); --cssx_player_main_controls_artist_title_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_artist_title_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_artist_title_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_artist_title_fontFamily: 'Jost', sans-serif; --cssx_player_main_controls_artist_title_fontSize: 12pt; --cssx_player_main_controls_artist_title_fontWeight: 600; --cssx_player_main_controls_artist_title_fontStyle: normal; --cssx_player_main_controls_artist_title_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_artist_title_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_artist_title_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_artist_title_dropShadow_color: var(--cssx_player_main_controls_artist_title_dropShadow_color_regular); --cssx_player_main_controls_artist_title_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_artist_title_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_artist_title_filter: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_album_title_color: var(--cssx_player_main_controls_album_title_color_regular); --cssx_player_main_controls_album_title_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_album_title_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_album_title_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_album_title_fontFamily: 'Jost', sans-serif; --cssx_player_main_controls_album_title_fontSize: 12pt; --cssx_player_main_controls_album_title_fontWeight: 300; --cssx_player_main_controls_album_title_fontStyle: italic; --cssx_player_main_controls_album_title_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_album_title_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_album_title_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_album_title_dropShadow_color: var(--cssx_player_main_controls_album_title_dropShadow_color_regular); --cssx_player_main_controls_album_title_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_album_title_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_album_title_filter: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_song_title_color: var(--cssx_player_main_controls_song_title_color_regular); --cssx_player_main_controls_song_title_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_song_title_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_song_title_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_song_title_fontFamily: 'Jost', sans-serif; --cssx_player_main_controls_song_title_fontSize: 16pt; --cssx_player_main_controls_song_title_fontWeight: 500; --cssx_player_main_controls_song_title_fontStyle: normal; --cssx_player_main_controls_song_title_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_song_title_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_song_title_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_song_title_dropShadow_color: var(--cssx_player_main_controls_song_title_dropShadow_color_regular); --cssx_player_main_controls_song_title_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_song_title_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_song_title_filter: var(--cssx_player_main_controls_buttons_fontIcon_filter_inner_regular); --cssx_player_main_controls_share_color: var(--cssx_player_main_controls_share_color_regular); --cssx_player_main_controls_share_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_share_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_share_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_share_fontSize: 20px; --cssx_player_main_controls_share_transformX: -160px; --cssx_player_main_controls_share_transformY: 1px; --cssx_player_main_controls_share_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_share_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_share_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_share_dropShadow_color: var(--cssx_player_main_controls_share_dropShadow_color_regular); --cssx_player_main_controls_share_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_share_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_playpause_color: var(--cssx_player_main_controls_playpause_color_regular); --cssx_player_main_controls_playpause_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_playpause_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_playpause_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_playpause_fontSize: 20px; --cssx_player_main_controls_playpause_transformX: -160px; --cssx_player_main_controls_playpause_transformY: 1px; --cssx_player_main_controls_playpause_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_playpause_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_playpause_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_playpause_dropShadow_color: var(--cssx_player_main_controls_playpause_dropShadow_color_regular); --cssx_player_main_controls_playpause_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_playpause_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_download_color: var(--cssx_player_main_controls_download_color_regular); --cssx_player_main_controls_download_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_download_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_download_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_download_fontSize: 20px; --cssx_player_main_controls_download_transformX: -120px; --cssx_player_main_controls_download_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_download_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_download_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_download_dropShadow_color: var(--cssx_player_main_controls_download_dropShadow_color_regular); --cssx_player_main_controls_download_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_download_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_fullscreen_color: var(--cssx_player_main_controls_fullscreen_color_regular); --cssx_player_main_controls_fullscreen_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_fullscreen_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_fullscreen_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_fullscreen_fontSize: 20px; --cssx_player_main_controls_fullscreen_transformX: 160px; --cssx_player_main_controls_fullscreen_transformY: 1px; --cssx_player_main_controls_fullscreen_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_fullscreen_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_fullscreen_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_fullscreen_dropShadow_color: var(--cssx_player_main_controls_fullscreen_dropShadow_color_regular); --cssx_player_main_controls_fullscreen_dropShadow_color_regular: var(--cssx_player_main_controls_share_dropShadow_color_regular); --cssx_player_main_controls_fullscreen_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_fullscreen_inner_transformY: 3px; --cssx_player_main_controls_previous_color: var(--cssx_player_main_controls_previous_color_regular); --cssx_player_main_controls_previous_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_previous_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_previous_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_previous_fontSize: 20px; --cssx_player_main_controls_previous_transformX: -160px; --cssx_player_main_controls_previous_transformY: 1px; --cssx_player_main_controls_previous_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_previous_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_previous_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_previous_dropShadow_color: var(--cssx_player_main_controls_previous_dropShadow_color_regular); --cssx_player_main_controls_previous_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_previous_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_next_color: var(--cssx_player_main_controls_next_color_regular); --cssx_player_main_controls_next_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_next_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_next_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_next_fontSize: 20px; --cssx_player_main_controls_next_transformX: -160px; --cssx_player_main_controls_next_transformY: 1px; --cssx_player_main_controls_next_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_next_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_next_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_next_dropShadow_color: var(--cssx_player_main_controls_next_dropShadow_color_regular); --cssx_player_main_controls_next_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_next_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_like_color: var(--cssx_player_main_controls_like_color_regular); --cssx_player_main_controls_like_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_like_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_like_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_like_color_active: fuchsia; --cssx_player_main_controls_like_fontSize: 20px; --cssx_player_main_controls_like_transformX: -160px; --cssx_player_main_controls_like_transformY: 1px; --cssx_player_main_controls_like_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_like_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_like_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_like_dropShadow_color: var(--cssx_player_main_controls_like_dropShadow_color_regular); --cssx_player_main_controls_like_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_like_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_like_size: var(--cssx_player_main_controls_like_size_regular); --cssx_player_main_controls_like_size_regular: 1; --cssx_player_main_controls_like_size_active: 2; --cssx_player_main_controls_like_size_active_touch: 3.5; --cssx_player_main_controls_like_transition: var(--cssx_player_main_controls_like_transition_regular); --cssx_player_main_controls_like_transition_regular: 0s; --cssx_player_main_controls_like_transition_active: 0.5s; --cssx_player_main_controls_like_opacity: var(--cssx_player_main_controls_like_opacity_regular); --cssx_player_main_controls_like_opacity_regular: 1; --cssx_player_main_controls_like_opacity_hovered: 1; --cssx_player_main_controls_like_opacity_active: 1; --cssx_player_main_controls_cast_color: var(--cssx_player_main_controls_cast_color_regular); --cssx_player_main_controls_cast_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_cast_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_cast_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_cast_fontSize: 26px; --cssx_player_main_controls_cast_transformX: -120px; --cssx_player_main_controls_cast_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_cast_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_cast_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_cast_dropShadow_color: var(--cssx_player_main_controls_cast_dropShadow_color_regular); --cssx_player_main_controls_cast_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_cast_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_menu_color: var(--cssx_player_main_controls_menu_color_regular); --cssx_player_main_controls_menu_color_regular: var(--cssx_player_ui_color_regular); --cssx_player_main_controls_menu_color_hovered: var(--cssx_player_ui_color_hovered); --cssx_player_main_controls_menu_color_pressed: var(--cssx_player_ui_color_pressed); --cssx_player_main_controls_menu_fontSize: 20px; --cssx_player_main_controls_menu_transformX: -120px; --cssx_player_main_controls_menu_dropShadow_x: var(--cssx_player_main_controls_drop_shadow_x); --cssx_player_main_controls_menu_dropShadow_y: var(--cssx_player_main_controls_drop_shadow_y); --cssx_player_main_controls_menu_dropShadow_r: var(--cssx_player_main_controls_drop_shadow_r); --cssx_player_main_controls_menu_dropShadow_color: var(--cssx_player_main_controls_menu_dropShadow_color_regular); --cssx_player_main_controls_menu_dropShadow_color_regular: var(--cssx_player_main_controls_drop_shadow_color); --cssx_player_main_controls_menu_dropShadow_color_pressed: rgb(255, 255, 255, 0.8); --cssx_player_main_controls_alyv_color: var(--cssx_player_main_controls_alyv_color_regular); --cssx_player_main_controls_alyv_color_regular: #ffffff; --cssx_player_main_controls_alyv_color_hovered: var(--alyv_yellow); --cssx_player_main_controls_alyv_color_active: #000000; --cssx_player_main_controls_alyv_fontSize: var(--cssx_player_main_controls_alyv_fontSize_regular); --cssx_player_main_controls_alyv_fontSize_regular: 26px; --cssx_player_main_controls_alyv_fontSize_hovered: 20px; --cssx_player_main_controls_alyv_fontFamily: 'Jost', sans-serif; --cssx_player_main_controls_alyv_transformX: -120px; --cssx_player_main_controls_alyv_boxShadow: var(--cssx_player_main_controls_alyv_dropShadow_hovered); --cssx_player_main_controls_alyv_dropShadow: var(--cssx_player_main_controls_alyv_dropShadow_regular); --cssx_player_main_controls_alyv_dropShadow_regular: var(--cssx_player_main_controls_alyv_dropShadow_x) var(--cssx_player_main_controls_alyv_dropShadow_y) var(--cssx_player_main_controls_alyv_dropShadow_r) var(--cssx_player_main_controls_alyv_dropShadow_color); --cssx_player_main_controls_alyv_dropShadow_x: 0px; --cssx_player_main_controls_alyv_dropShadow_y: 0px; --cssx_player_main_controls_alyv_dropShadow_r: 2px; --cssx_player_main_controls_alyv_dropShadow_color: rgb(0 0 0 / 80%); --cssx_player_main_controls_alyv_dropShadow_hovered: 0px 0px 0px rgb(0 0 0 / 0%); --cssx_player_main_controls_alyv_opacity: var(--cssx_player_main_controls_alyv_opacity_regular); --cssx_player_main_controls_alyv_opacity_regular: 1; --cssx_player_main_controls_alyv_opacity_active: 1; --cssx_player_main_controls_alyv_opacity_hovered: 1; --cssx_player_main_controls_alyv_rotate:var(--cssx_player_main_controls_alyv_rotate_regular); --cssx_player_main_controls_alyv_rotate_regular: 0deg; --cssx_player_main_controls_alyv_rotate_active: 180deg; --cssx_player_main_controls_alyv_transition: var(--cssx_player_main_controls_alyv_transition_regular); --cssx_player_main_controls_alyv_transition_regular: 0s; --cssx_player_main_controls_alyv_transition_active: 0.5s; --cssx_player_main_controls_alyv_width: var(--cssx_player_main_controls_alyv_fontSize_regular); --cssx_player_main_controls_alyv_lineHeight: var(--cssx_player_main_controls_alyv_fontSize_regular); --cssx_player_main_controls_alyv_backgroundColor: var(--cssx_player_main_controls_alyv_backgroundColor_regular); --cssx_player_main_controls_alyv_backgroundColor_regular: transparent; --cssx_player_main_controls_alyv_backgroundColor_hovered: transparent; --cssx_player_main_controls_alyv_backgroundColor_active: var(--alyv_yellow); --cssx_player_main_controls_alyv_icon_marginTop: var(--cssx_player_main_controls_alyv_icon_marginTop_regular); --cssx_player_main_controls_alyv_icon_marginTop_regular: -6px; --cssx_player_main_controls_alyv_icon_marginTop_hovered: 0px; --cssx_player_main_controls_selector_drop_shadow_x: 0px; --cssx_player_main_controls_selector_drop_shadow_y: 0px; --cssx_player_main_controls_selector_drop_shadow_r: 8px; --cssx_player_main_controls_selector_drop_shadow_color: rgb(0, 0, 0, 0.8); --cssx_container_menu_content_textAlign: left; --cssx_artist_contact_email_position: absolute; --cssx_artist_contact_email_marginLeft: 50%; --cssx_artist_contact_email_transform: translateX(-50%); } ::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; /* make scrollbar transparent */ } .heading1{ font-family: Roboto; font-style: normal; font-weight: 700; font-size: 24px; color: #000000; text-align: left; line-height: 40px; padding-left: 10px; padding-right: 5px; } .heading2{ font-family: Roboto; font-style: normal; font-weight: 400; font-size: 18px; color: #000000; text-align: left; line-height: 30px; padding-left: 10px; padding-right: 5px; } .body_text { font-family: Roboto; font-style: normal; font-weight: 300; font-size: 16px; text-align: left; padding: 15px; color: #000000; line-height: 25px; padding-left: 10px; padding-right: 5px; } .body_text.am { font-family: 'arm_helvu'; font-weight: normal; font-style: normal; } body { background-color: #ffffff; } #background { position: absolute; top:0px; left:0px; width:100%; /*height:5000px;*/ height:100%; z-index: 0; } #container_main { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; } #canvas_bg { width:100%; height: 100%; filter: brightness(1.25) blur(50px); -webkit-filter: brightness(1.25) blur(50px); } #canvas_effects { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; backdrop-filter: blur(70px); -webkit-backdrop-filter: blur(70px); } .buttons { background-color: white; border: 0px; outline: 0px; opacity: 1; } .button_titles { color: white; width: 100%; text-align: left; font-family: 'pensum_displaybold'; font-style: normal; font-weight: normal; font-size: 26px; } .button_titles.am { font-family: 'arian_amu_serif'; font-weight: 800; font-style: normal; } .buttons:hover .button_titles{ /* color: var(--cssx_player_controls_inner_color_active); */ } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); font-family: Roboto; font-style: normal; font-weight: 300; font-size: 16px; text-align: left; z-index: 2; } .dropdown-content a { color: black; padding: 9px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: var(--cssx_player_controls_inner_color_regular); color: #ffffff; text-decoration: none; } #container_header { position: fixed; top: 0px; left: 50%; width: 100%; max-width: var(--max_page_width); height: calc(var(--menu_section_height) * 0); font-size: 0; transform: translate(-50%); z-index: 5; opacity: 1; } #menu_top_row{ position: fixed; top: 0px; left: 0px; width: 100%; border: 0px; /* background-color: var(--common_color_dark); background-image: linear-gradient(rgb(34,34,34,1) 40%,rgb(34,34,34,0.5)); */ } #menu_button { position: fixed; top: calc(var(--menu_section_height) / 2.25); right: 20px; width: 36px; height: 30px; /* height: var(--menu_section_height); background-color: #ffffff; */ border: 0px; border-radius: 0px; transform: translate(0%, 0%) rotate(0deg); cursor: hand; opacity: 1; z-index: 6; display: block; } .menu_button_lines { position: relative; display: block; width: 100%; height: var(--menu_button_lines_height); border: 0px; background-color: var(--cssx_border_colors); box-shadow: 1px 1px #000000; } .menu_button_lines.middle { margin-top: calc((var(--menu_button_height) - (1.5 * var(--menu_button_lines_height))) / 2); margin-bottom: calc((var(--menu_button_height) - (1.5 * var(--menu_button_lines_height))) / 2); } .menu_button_dots { display: inline-block; margin-top: 10px; width: var(--menu_button_lines_height); height: var(--menu_button_lines_height); border: 0px; background-color: var(--cssx_border_colors); border-radius: 50%; box-shadow: 1px 1px #000000; } .menu_button_dots.middle { margin-left: calc((var(--menu_button_height) - (1.5 * var(--menu_button_lines_height))) / 2); margin-right: calc((var(--menu_button_height) - (1.5 * var(--menu_button_lines_height))) / 2); } #menu_button_content { top: calc(var(--menu_section_height) - 18px); right: -12px; } .lang_selectors { position: absolute; top: calc(var(--menu_section_height) / 2); width: calc(var(--menu_buttons_width) - (2 * var(--general_margins))); height: calc(var(--menu_buttons_height) - (4 * var(--general_margins))); border:0px; border-radius: 0px; transform: translate(0%, -50%); opacity: 1; cursor: hand; z-index: 4; display: none; } #lang_selection{ height: var(--menu_section_height); } #lang_selecion_img{ height: 100%; } #lang_selection_left { right: calc((2 * var(--general_margins)) + (var(--menu_button_height) / 7)); z-index: 4; clip-path: polygon(0% 0%, 0% 100%, 100% 100%); transform: translate(0%, calc(-50% + 0px)); } #lang_selection_right { right: calc(2 * var(--general_margins)); clip-path: polygon(100% 0%, 0% 0%, 100% 100%); transform: translate(0%, calc(-50% - 0px)); } .lang { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); } #lang_left { background-image: linear-gradient( var(--menu_button_flag_arm_color_red) 0%, var(--menu_button_flag_arm_color_red) calc((100% / 3) * 1), var(--menu_button_flag_arm_color_blu) calc((100% / 3) * 1), var(--menu_button_flag_arm_color_blu) calc((100% / 3) * 2), var(--menu_button_flag_arm_color_org) calc((100% / 3) * 2), var(--menu_button_flag_arm_color_org) 100% ); opacity: 1; } #lang_right { background-image: linear-gradient( var(--menu_button_flag_usa_color_red) 0%, var(--menu_button_flag_usa_color_red) calc((100% / 7) * 1), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 1), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 2), var(--menu_button_flag_usa_color_red) calc((100% / 7) * 2), var(--menu_button_flag_usa_color_red) calc((100% / 7) * 3), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 3), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 4), var(--menu_button_flag_usa_color_red) calc((100% / 7) * 4), var(--menu_button_flag_usa_color_red) calc((100% / 7) * 5), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 5), var(--menu_button_flag_usa_color_wht) calc((100% / 7) * 6), var(--menu_button_flag_usa_color_red) calc((100% / 7) * 6), var(--menu_button_flag_usa_color_red) 100.00% ); opacity: 1; } #right_flag_layer { position: absolute; top: 0px; left: 0px; width: 40%; margin: 0px; border: 0px; height: calc((100% / 7) * 3); background-color: var(--menu_button_flag_usa_color_blu); z-index: 1; display: none; } #page_close_button { position: sticky; font-family: 'Manrope', sans-serif; text-align: center; width: 55px; height: 48px; font-size: 35px; top: 0px; left: 0%; color: #ffffff; text-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); cursor: hand; display: block; z-index: 2; } #container_menu { position: fixed; width: 100%; height: 24px; top: 0px; left: 0px; transition: 0.3s; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 3; opacity: 1; } #navigation_bar { position: fixed; width: 100%; max-width: 600px; height: 100vw; max-height: calc(100% - 260px); transform-origin: unset; text-align: right; top: 0px; left: 50%; transform: translate(-50%, 0px); z-index: 6; opacity: 1; transition: 0.2s; pointer-events: none; /* display: inline-flex; align-content: center; justify-content: center; align-items: center; */ } .navigation_bar_containers { /* width: 20%; text-align: -webkit-center; text-align: center; */ display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; cursor: pointer; } #navigation_bar_share_container { width: 0px; } #navigation_bar_alyv_container { position: absolute; top: 0px; left: 0px; width: 48px; height: 48px; pointer-events: auto; } #navigation_bar_like_container { position: absolute; top: 0px; right: 0px; width: 48px; height: 48px; pointer-events: auto; } #navigation_bar_cast_container { position: absolute; bottom: 0px; right: 0px; width: 48px; height: 48px; pointer-events: auto; } #navigation_bar_cast { width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; } #navigation_bar_cast_inner { align-content: center; justify-content: center; align-items: center; color: var(--cssx_player_main_controls_cast_color); font-size:var(--cssx_player_main_controls_cast_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_cast_dropShadow_x) var(--cssx_player_main_controls_cast_dropShadow_y) var(--cssx_player_main_controls_cast_dropShadow_r) var(--cssx_player_main_controls_cast_dropShadow_color) ); display: none; } #navigation_bar_download_container { width: 0px; } .navigation_bar_inner { color: white; text-shadow: 0px 0px 2px rgb(0 0 0 / 90%); opacity: 0.7; } .material-icons-sharp.navigation_bar_inner_icon { font-size: 20px; } #navigation_bar_share { display: none; } #navigation_bar_download { display: none; } #navigation_bar_icon { position: absolute; top: 9px; right: 10px; font-family: arial; font-size: 12px; margin-right: 20px; } .navigation_button { display: inline-block; background-color: unset; color: #000000; /* text-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); */ font-size: 46px; font-family: 'Manrope', sans-serif; font-weight: 800; margin-right: 30px; margin-left: 30px; cursor: hand; width: var(--cssx_menu_adjust_buttons_width); transform: rotate(var(--cssx_menu_adjust_buttons_rotate)); } #navigation_bar_alyv { /* position: absolute; height: 60px; width: 60px; right: 0px; transform: rotate(var(--cssx_menu_adjust_buttons_rotate)); opacity: 0.75; */ width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; } #navigation_bar_alyv_inner { /* position: relative; color: rgb(0, 0, 0, 0.8); top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: 1000; */ display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; color: var(--cssx_player_main_controls_alyv_color); background-color: var(--cssx_player_main_controls_alyv_backgroundColor); font-family: var(--cssx_player_main_controls_alyv_fontFamily); font-size: var(--cssx_player_main_controls_alyv_fontSize); text-shadow: var(--cssx_player_main_controls_alyv_dropShadow); box-shadow: var(--cssx_player_main_controls_alyv_boxShadow); opacity: var(--cssx_player_main_controls_alyv_opacity); transform: rotate(var(--cssx_player_main_controls_alyv_rotate)); width: var(--cssx_player_main_controls_alyv_width); height: var(--cssx_player_main_controls_alyv_lineHeight); border-radius: 50%; transition: var(--cssx_player_main_controls_alyv_transition); } #navigation_bar_alyv_inner_icon { /* position: absolute; */ font-family: 'Source Code Pro', monospace; margin-top: var(--cssx_player_main_controls_alyv_icon_marginTop); } #alyv_logo_img { width: 22px; height: 22px; border-radius: 50%; display: none; } #navigation_digital_stores { text-align: center; } #alyv_banner_container { background-color: #f1fd43; text-align: center; padding: 15px; width: 100vw; margin-left: 50%; transform: translateX(-50%); cursor: hand; } #alyv_banner { position: absolute; left: 50%; transform: translate(calc( -50% - 134px), 30px); font-family: 'Manrope', sans-serif; font-size: 14px; opacity: 0.5; } #alyv_banner_logo_img { height: 50px; } #container_footer { position: relative; background-color: #cccccc; width: 100%; height: 100px; width: 100vw; margin-left: 50%; transform: translateX(-50%); } /* #alyv_logo { transform: rotate(var(--cssx_menu_adjust_buttons_rotate)); opacity: 0.7; } #alyv_logo_img { width: 22px; height: 22px; border-radius: 50%; transform: translate(0%, 2px); box-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); } */ #container_menu_content_wrapper { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #eeeeee; overflow-x: hidden; overflow-y: scroll; z-index: 4; transform: translate(0%, 100%); transition: 0.4s; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 1; display: block; z-index: 5; } #container_menu_content { position: absolute; top: 0px; left: 50%; width: 72%; max-width: 640px; text-align: var(--cssx_container_menu_content_textAlign); font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 400; transform: translate(-50%, 0%); background-color: #eeeeee; } #artist_contact_email { position: var(--cssx_artist_contact_email_position); margin-left: var(--cssx_artist_contact_email_marginLeft); transform: var(--cssx_artist_contact_email_transform); } #content_page_title { font-size: 28px; } .about_download_link { vertical-align: bottom; position: absolute; padding-top: 0px; margin-left: 36px; } .about_download_link:link { color:black; background-color: unset; } .about_download_link:visited { color:black; } .about_download_link:hover { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } .about_download_link:active { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } .about_play_link { vertical-align: bottom; position: absolute; padding-top: 0px; margin-left: 6px; cursor: hand; } .about_play_link:link { color:black; background-color: unset; } .about_play_link:visited { color:black; } .about_play_link:hover { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } .about_play_link:active { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } .about_share { vertical-align: bottom; position: absolute; padding-top: 0px; margin-left: 32px; } .about_share:link { color:black; } .about_share:visited { color:black; } .about_share:hover { color:var(--alyv_yellow); text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.8); } .about_share:active { color:var(--alyv_yellow); text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.8); } .content_page_email:link { color:black; background-color: unset; padding-left: 4px; padding-right: 4px; } .content_page_email:visited { color:black; background-color: unset; } .content_page_email:hover { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } .content_page_email:active { /*color:var(--alyv_yellow); filter: drop-shadow(0px 0px 2px rgb(0, 0, 0, 0.8));*/ background-color: var(--alyv_yellow); } #player_ui_background { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-image: linear-gradient(0deg, rgb(0, 0, 0, 0.90) 0%, rgb(0, 0, 0, 0.1) 100%); /* background-color: 'grey'; mix-blend-mode: darken; backdrop-filter: blur(var(--player_ui_backdrop_blur)); -webkit-backdrop-filter: blur(var(--player_ui_backdrop_blur)); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: ease-in; transition: 0.5s; */ pointer-events: none; display: block; opacity: 1; z-index:1; } #container_player { position: absolute; top: 0px; left: 50%; width: 100%; height: 100%; /* max-width: calc(100vmax * 16 / 9); */ font-size: 0; transform: translate(-50%, 0%); z-index: 3; opacity: 1; } #container_player_top { position: absolute; display: flex; /* height: calc(100% - var(--cssx_container_player_top_distance_from_bottom)); */ height: 100vw; max-height: calc(100% - 260px); width: 100%; align-content: center; justify-content: center; align-items: center; } #container_video { position: relative; -webkit-filter: drop-shadow(var(--cssx_player_container_player_dropShadow)); filter: drop-shadow(var(--cssx_player_container_player_dropShadow)); height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; /* left: 50%; width: 100%; transform: translateX(-50%); */ } #video_player { height: 100%; opacity: var(--video_player_opacity); /* filter: drop-shadow(2px 4px 3px rgb(0,0,0,0.5)); */ background-color: transparent; /* box-shadow: var(--cssx_player_main_controls_previousTrack_fontIcon_dropShadow_inner); */ } #player_main_controls_fullscreen { position: absolute; display: inline-box; display: -webkit-inline-box; bottom: 4px; right: 0px; color: var(--cssx_player_main_controls_fullscreen_color); font-size:var(--cssx_player_main_controls_fullscreen_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_fullscreen_dropShadow_x) var(--cssx_player_main_controls_fullscreen_dropShadow_y) var(--cssx_player_main_controls_fullscreen_dropShadow_r) var(--cssx_player_main_controls_fullscreen_dropShadow_color) ); z-index: 3; display: none; } #container_player_bottom { position: absolute; width: 100%; bottom: 0px; /* height: var(--cssx_container_player_bottom_height); */ height: calc(100% - 100vw); min-height: 260px; display: flex; align-content: center; justify-content: center; align-items: center; } #player_ui { display: block; width: 100%; height: 100%; } #player_ui_navigation { width: 0%; height: calc(13vmin + 8vmin + 9vmin + (var(--menu_buttons_height) * 2) + 30px); height: 100%; position: fixed; overflow-x: hidden; top: 0px; left: 0px; color: rgb(255, 255, 255); transition-timing-function: ease-in; /*transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);*/ transition: 0.7s; /*put this before cubiz-bazier for weird magical effect*/ display: block; z-index:11; } .player_ui_navigation_wrapper { overflow-y: scroll; overflow-x: hidden; } .player_ui_navigation_content { position: absolute; width: 100%; left: 50%; transform: translate(calc(-50% + var(--cssx_player_ui_navigation_indent)), 0%); padding-bottom: 10px; } #player_ui_navigation_artists_album_wrapper { position: absolute; top: 0px; left: 0px; width: 100vw; height: calc(56px + ((100vh - 56px) * 0.3)); background-image: linear-gradient(130deg, rgb(0, 0, 0, 0.7) 0%, rgb(0, 0, 0, 0.2) 50%, rgb(0, 0, 0, 0) 95%); overflow-y: scroll; overflow-x: hidden; } #player_ui_navigation_artists_wrapper { padding-top: 11px; position: absolute; width: 100vw; height: 56px; font-size: 8.5vmin; font-size: 28px; font-weight: 500; box-sizing: border-box; box-shadow: 0px 0px 0px #000000; cursor: hand; /*background-image: linear-gradient(130deg, rgb(0, 0, 0, 0.7) 0%, rgb(0, 0, 0, 0.2) 50%, rgb(0, 0, 0, 0) 95%);*/ } #player_ui_navigation_artists_content { position: absolute; width: calc(100% - 48px); height: 61px; top: unset; left: calc(48px + var(--cssx_player_ui_navigation_indent)); font-family: 'Teko'; text-align: left; vertical-align: middle; white-space: nowrap; text-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); transform: unset; } #playlist_artist_row_playnow { position: absolute; top: 0px; left: calc(0px + var(--cssx_player_ui_navigation_indent)); font-family: 'Manrope', sans-serif; text-align: center; width: 48px; height: 38px; font-size: 22px; margin-top: 14px; text-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); } #playlist_artist_row_share { position: absolute; top: 0px; right: 0px; text-align: center; width: 38px; height: 38px; font-size: 22px; margin-top: 9px; margin-right: 6px; } #player_ui_navigation_albums_wrapper { padding-top: 12px; position: absolute; top: 56px; width: 100vw; height: calc((100vh - 56px) * 0.3); box-sizing: border-box; box-shadow: 0px 0px 0px #000000; /*background-image: linear-gradient(130deg, rgb(0, 0, 0, 0.7) 0%, rgb(0, 0, 0, 0.2) 50%, rgb(0, 0, 0, 0) 95%);*/ } #player_ui_navigation_albums_content { top: 14%; } .playlist_albums_row_td { height: 6vmin; height: 32px; } .playlist_albums_row { font-family: "Saira Semi Condensed"; font-size: 4vmin; font-size: 16px; font-weight: 400; text-align: left; vertical-align: center; color: rgb(255, 255, 255); cursor: hand; white-space: pre-wrap; line-height: 4vmin; line-height: 15px; background-color: transparent; } .playlist_albums_other_col { width: 7vmin; width: 30px; font-family: "Saira Semi Condensed"; font-size: 3vmin; font-size: 16px; text-align: center; color: rgb(255, 255, 255); cursor: hand; white-space: nowrap; line-height: 4vmin; line-height: 15px; } .playlist_albums_other_col_date { width: 7vmin; width: 48px; font-family: "Saira Semi Condensed"; vertical-align: center; font-size: 3vmin; font-size: 16px; text-align: center; color: rgb(255, 255, 255); cursor: hand; white-space: nowrap; opacity: 0.6; } #player_ui_navigation_songs_wrapper { padding-top: 12px; position: absolute; top: calc(56px + ((100vh - 56px) * 0.3)); width: 100vw; height: calc((100% - 56px) * 0.7); box-sizing: border-box; box-shadow: 0px 0px 0px #000000; cursor: hand; background-image: linear-gradient(130deg, rgb(0, 0, 0, 0.7) 0%, rgb(0, 0, 0, 0.2) 50%, rgb(0, 0, 0, 0) 95%); } #player_ui_navigation_songs_content { top: 7%; } .playlist_songs_row_td { height: 8.5vmin; height: 32px; } .playlist_songs_row { font-family: "Saira Semi Condensed"; font-size: 4vmin; font-size: 16px; font-weight: 400; text-align: left; vertical-align: center; color: rgb(255, 255, 255); cursor: hand; white-space: pre-wrap; line-height: 4vmin; line-height: 15px; background-color: transparent; } .playlist_songs_other_col { width: 7vmin; width: 48px; font-family: "Saira Semi Condensed"; vertical-align: center; font-size: 3vmin; font-size: 16px; text-align: center; color: rgb(255, 255, 255); cursor: hand; white-space: nowrap; opacity: 0.6; } #player_ui_track_info { position: absolute; width: 100%; bottom: 20px; } #track_info { text-align: center; } .player_track_info { width: 100%; background-color: unset; z-index: 1; } #player_main_controls_song_title { background-color: transparent; /* background-color: blue; */ height: 69px; display: flex; align-content: center; justify-content: center; align-items: center; line-height: 25px; } #player_main_controls_song_title_inner{ color: var(--cssx_player_main_controls_song_title_color); font-size: var(--cssx_player_main_controls_song_title_fontSize); font-family: var(--cssx_player_main_controls_song_title_fontFamily); font-weight: var(--cssx_player_main_controls_song_title_fontWeight); font-style: var(--cssx_player_main_controls_song_title_fontStyle); text-shadow: var(--cssx_player_main_controls_song_title_dropShadow_x) var(--cssx_player_main_controls_song_title_dropShadow_y) var(--cssx_player_main_controls_song_title_dropShadow_r) var(--cssx_player_main_controls_song_title_dropShadow_color); filter: var(--cssx_player_main_controls_song_title_filter); cursor: hand; } #player_main_controls_album_title { background-color: transparent; /* background-color: deeppink; */ height: 26px; } #player_main_controls_album_title_inner { color: var(--cssx_player_main_controls_album_title_color); font-family: var(--cssx_player_main_controls_album_title_fontFamily); font-weight: var(--cssx_player_main_controls_album_title_fontWeight); font-style: var(--cssx_player_main_controls_album_title_fontStyle); font-size: var(--cssx_player_main_controls_album_title_fontSize); text-shadow: var(--cssx_player_main_controls_album_title_dropShadow_x) var(--cssx_player_main_controls_album_title_dropShadow_y) var(--cssx_player_main_controls_album_title_dropShadow_r) var(--cssx_player_main_controls_album_title_dropShadow_color); background-color: unset; filter: var(--cssx_player_main_controls_album_title_filter); cursor: hand; } #composers_button { background-color: transparent; /* background-color: gold; */ height: 26px; } #composers_button_title { font-family: var(--cssx_player_main_controls_artist_title_fontFamily); font-size: var(--cssx_player_main_controls_artist_title_fontSize); font-weight: var(--cssx_player_main_controls_artist_title_fontWeight); font-style: var(--cssx_player_main_controls_artist_title_fontStyle); text-shadow: var(--cssx_player_main_controls_artist_title_dropShadow_x) var(--cssx_player_main_controls_artist_title_dropShadow_y) var(--cssx_player_main_controls_artist_title_dropShadow_r) var(--cssx_player_main_controls_artist_title_dropShadow_color) ; color: var(--cssx_player_main_controls_artist_title_color); filter: var(--cssx_player_main_controls_artist_title_filter); cursor: hand; } #player_ui_combined { width: 100%; text-align: center; text-align: -webkit-center; } #player_ui_buttons_and_time { /* text-align: center; text-align: -webkit-center; */ width: 100%; max-width: 600px; display: flex; align-content: center; justify-content: center; align-items: center; line-height: 25px; flex-direction: column; } #player_ui_buttons_small { display: inline-flex; height: calc(100% - 184px); width: 100%; max-width: 600px; /* background-color: aqua; */ z-index: 2; } #player_ui_timebar_container { /* background-color: crimson; */ height: 40px; width: 100%; display: flex; align-content: center; justify-content: center; align-items: center; line-height: 25px; } .player_main_controls_time_inner { color: rgb(255, 255, 255, 0.5); font-family: 'Roboto Mono', monospace; font-style: normal; font-weight: 500; font-size: 11px; } #navigation_bar_menu { width: 50px; height: 30px; display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; } #navigation_bar_menu_inner { color: var(--cssx_player_main_controls_menu_color); font-size:var(--cssx_player_main_controls_menu_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_menu_dropShadow_x) var(--cssx_player_main_controls_menu_dropShadow_y) var(--cssx_player_main_controls_menu_dropShadow_r) var(--cssx_player_main_controls_menu_dropShadow_color) ); } #player_main_controls_time_current { width: 30px; height: 100%; display: flex; align-content: center; align-items: center; line-height: 25px; justify-content: center; text-shadow: var(--cssx_player_main_controls_drop_shadow_x) var(--cssx_player_main_controls_drop_shadow_y) var(--cssx_player_main_controls_drop_shadow_r) var(--cssx_player_main_controls_drop_shadow_color); } #player_ui_timebar { display: inline-flex; width: calc(100% - 120px); margin-left: 20px; margin-right: 20px; background-color: unset; align-content: center; justify-content: center; align-items: center; flex-direction: column; z-index: 2; } #player_main_controls_timebar_background { position: relative; height: 6px; width: 100%; background-color: rgb(0, 0, 0, 0.2); } #player_main_controls_timebar_background_touch { position: absolute; left: 0px; width: 100%; height: 37px; opacity: 0.5; transform: translate(0px, calc(-50% + 3px)); } #player_main_controls_timebar { position: absolute; left: 0px; height: 6px; width: 0px; border-color: rgb(255, 255, 255, 0.4); background-color:rgb(255, 255, 255, 0.4); box-sizing: border-box; pointer-events: none; cursor: hand; z-index: 10; } #player_main_controls_timebar_selector { position: absolute; top: 50%; right: 0px; height: 18px; width: 18px; background-color: var(--cssx_player_controls_selector_color); box-sizing:content-box; border-radius: 50%; cursor: hand; pointer-events: auto; box-shadow: var(--cssx_player_main_controls_selector_drop_shadow_x) var(--cssx_player_main_controls_selector_drop_shadow_y) var(--cssx_player_main_controls_selector_drop_shadow_r) var(--cssx_player_main_controls_selector_drop_shadow_color); transform: translate(50%, -50%); } #player_main_controls_time_total { width: 30px; height: 100%; display: flex; align-content: center; align-items: center; line-height: 25px; justify-content: center; text-shadow: var(--cssx_player_main_controls_drop_shadow_x) var(--cssx_player_main_controls_drop_shadow_y) var(--cssx_player_main_controls_drop_shadow_r) var(--cssx_player_main_controls_drop_shadow_color); } #navigation_bar_like { width: 100%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; cursor: pointer; } #navigation_bar_like_inner { display: flex; align-content: center; justify-content: center; align-items: center; color: var(--cssx_player_main_controls_like_color); font-size:var(--cssx_player_main_controls_like_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_like_dropShadow_x) var(--cssx_player_main_controls_like_dropShadow_y) var(--cssx_player_main_controls_like_dropShadow_r) var(--cssx_player_main_controls_like_dropShadow_color) ); opacity: var(--cssx_player_main_controls_like_opacity); transform: scale( var(--cssx_player_main_controls_like_size) ); transition: var(--cssx_player_main_controls_like_transition); } #player_main_controls_share { position: relative; margin-right: 10px; color: var(--cssx_player_main_controls_share_color); font-size:var(--cssx_player_main_controls_share_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_share_dropShadow_x) var(--cssx_player_main_controls_share_dropShadow_y) var(--cssx_player_main_controls_share_dropShadow_r) var(--cssx_player_main_controls_share_dropShadow_color) ); display: none; } #player_main_controls_previous { position: relative; color: var(--cssx_player_main_controls_previous_color); font-size:var(--cssx_player_main_controls_previous_fontSize); width: 34%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; filter: drop-shadow( var(--cssx_player_main_controls_previous_dropShadow_x) var(--cssx_player_main_controls_previous_dropShadow_y) var(--cssx_player_main_controls_previous_dropShadow_r) var(--cssx_player_main_controls_previous_dropShadow_color) ); background-color: rgb(0, 0, 0, 0); } #player_main_controls_playpause { position: relative; color: var(--cssx_player_main_controls_playpause_color); font-size:var(--cssx_player_main_controls_playpause_fontSize); width: 32%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; filter: drop-shadow( var(--cssx_player_main_controls_playpause_dropShadow_x) var(--cssx_player_main_controls_playpause_dropShadow_y) var(--cssx_player_main_controls_playpause_dropShadow_r) var(--cssx_player_main_controls_playpause_dropShadow_color) ); background-color: rgb(0, 0, 0, 0); } #player_main_controls_next { position: relative; color: var(--cssx_player_main_controls_next_color); font-size:var(--cssx_player_main_controls_next_fontSize); width: 34%; height: 100%; display: flex; align-content: center; justify-content: center; align-items: center; filter: drop-shadow( var(--cssx_player_main_controls_next_dropShadow_x) var(--cssx_player_main_controls_next_dropShadow_y) var(--cssx_player_main_controls_next_dropShadow_r) var(--cssx_player_main_controls_next_dropShadow_color) ); background-color: rgb(0, 0, 0, 0); } #player_ui_times { position: relative; top: -2px; width: 100%; } #player_main_controls_download { position: relative; margin-left: 10px; color: var(--cssx_player_main_controls_download_color); font-size:var(--cssx_player_main_controls_download_fontSize); filter: drop-shadow( var(--cssx_player_main_controls_download_dropShadow_x) var(--cssx_player_main_controls_download_dropShadow_y) var(--cssx_player_main_controls_download_dropShadow_r) var(--cssx_player_main_controls_download_dropShadow_color) ); display: none; } .material-icons-sharp.player_button_icons { font-size: var(--cssx_player_main_controls_buttons_fontIcon_size); /* padding: 7px; */ display: unset; } .material-icons-sharp.player_button_icons.player_button_icons_play { font-size: var(--cssx_player_main_controls_buttons_play_fontIcon_size); display: unset; } .material-icons-sharp.player_button_icons.player_button_icons_other { font-size: var(--cssx_player_main_controls_buttons_other_fontIcon_size); display: unset; } .material-icons-sharp.player_button_icons.player_button_icons_small { font-size: var(--cssx_player_main_controls_buttons_small_fontIcon_size); display: unset; } .material-icons-sharp.player_button_icons.player_button_icons_small_play { font-size: var(--cssx_player_main_controls_buttons_small_play_fontIcon_size); display: unset; } #player_ui_buttons { position: absolute; width: 80vw; height: calc(100vh - var(--cssx_container_player_top_distance_from_bottom) - 72px); top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-content: center; justify-content: center; align-items: center; z-index: 2; display: none; } .playerbtn { display: inline-block; box-sizing: border-box; cursor: pointer; opacity: 1; } .player_main_control_buttons_inner{ cursor: hand; } #player_main_controls_previous_track { width: 33%; height: 100%; display: inline-flex; align-content: center; justify-content: center; align-items: center; } #player_main_controls_previous_inner{ color: var(--cssx_player_main_controls_previousTrack_fontIcon_color_inner); text-shadow: var(--cssx_player_main_controls_previousTrack_fontIcon_dropShadow_inner); filter: var(--cssx_player_main_controls_previousTrack_fontIcon_filter_inner); } #player_main_controls_rewind { display: none; } #player_main_controls_rewind_inner{ color: var(--cssx_player_main_controls_rewind_fontIcon_color_inner); text-shadow: var(--cssx_player_main_controls_rewind_fontIcon_dropShadow_inner); } #player_main_controls_play { width: 34%; height: 100%; display: inline-flex; align-content: center; justify-content: center; align-items: center; } #player_main_controls_play_inner { color: var(--cssx_player_main_controls_play_fontIcon_color_inner); text-shadow: var(--cssx_player_main_controls_play_fontIcon_dropShadow_inner); filter: var(--cssx_player_main_controls_play_fontIcon_filter_inner); } #player_main_controls_forward { display: none; } #player_main_controls_forward_inner{ color: var(--cssx_player_main_controls_forward_fontIcon_color_inner); text-shadow: var(--cssx_player_main_controls_forward_fontIcon_dropShadow_inner); } #player_main_controls_next_track { width: 33%; height: 100%; display: inline-flex; align-content: center; justify-content: center; align-items: center; } #player_main_controls_next_inner{ color: var(--cssx_player_main_controls_nextTrack_fontIcon_color_inner); text-shadow: var(--cssx_player_main_controls_nextTrack_fontIcon_dropShadow_inner); filter: var(--cssx_player_main_controls_nextTrack_fontIcon_filter_inner); } #audio_playlist_controls { position: absolute; top: var(--menu_section_height); left: 50%; height: calc(var(--menu_buttons_height) * 1); width: 100%; max-height: 270px; transform: translate(-50%); background-color: var(--cssx_player_controls_background); z-index: 2; display: none; } #audio_playlist_controls.visible { display: block; } #playlist_control_buttons{ position: fixed; top: 0px; width: 100%; height: 100%; } #player_main_controls_content { width: var(--menu_buttons_height); margin-left: var(--menu_buttons_margins); } #content_button_content{ top: var(--menu_buttons_height); cursor: hand; } #player_main_controls_info { top: 50%; left: calc((var(--menu_buttons_height) * 0.5)); width: calc(var(--menu_section_height) * 0.4); height: calc(var(--menu_section_height) * 0.4); background-color: #ffffff; transform: translate(-50%, -50%); border-radius: 50%; } #player_main_controls_content { display: none; } .player_btn_img{ vertical-align: middle; } .img_helper{ display: inline-block; height: 100%; vertical-align: middle; } #player_main_controls_content_inner{ position: relative; transform: translate(-50%,-50%) rotate(0deg); width: calc(var(--cssx_player_controls_inner_size) / 4); height: var(--cssx_player_controls_inner_size); box-sizing: border-box; border-style: solid; border-width: 0px 0px 0px calc(var(--cssx_player_controls_inner_size) / 4); border-color: var(--cssx_player_controls_inner_color_regular); transition: 0.5s; } #player_main_controls_content_inner::after{ content:''; position: absolute; transform: translate(-100%,0%) rotate(90deg); width: calc(var(--cssx_player_controls_inner_size) / 4); height: var(--cssx_player_controls_inner_size); box-sizing: border-box; border-style: solid; border-width: 0px 0px 0px calc(var(--cssx_player_controls_inner_size) / 4); border-color: inherit; } #player_main_controls_playlist_inner{ color: var(--cssx_player_controls_inner_color_regular); font-size: 14px; font-family: Roboto; font-style: normal; font-weight: 400; height: unset; } #player_main_controls_info_inner { position: absolute; color: var(--cssx_player_controls_inner_info_color); font-family: 'pensum_displaybold'; font-style: normal; font-weight: normal; font-size: 18px; height: 100%; left: 50%; transform: translate(-50%, -5%); opacity: 0.80; } #container_playlist { position: fixed; top: calc(var(--menu_section_height)); left: 50%; width: 100%; max-width: var(--max_page_width); background: transparent; pointer-events: none; transform: translate(-50%); overflow: hidden; z-index: 1; } #player_current_track { position: absolute; top: 0px; left: 50%; width: 100%; height: 100px; background-color: white; border-top: 1px solid var(--cssx_border_colors); transform: translate(-50%, -100%); opacity: 0.9; pointer-events: auto; transition: 0.3s; transition-timing-function: ease-in; } #playlist { display: none; } #container_data { position: absolute; top: var(--menu_section_height); left: 50%; width: 100%; max-width: var(--max_page_width); height: 10000px; background-color: var(--content_section_background_color); transform: translate(-50%); display: none; } #container_page_footer { position: fixed; width: 100%; height: 163px; left: 50%; bottom: 0px; transform: translate(-50%, 0%); z-index: 5; display: none; } #cookie_prompt { position: absolute; width: 100%; max-width: 400px; height: 100%; background-color: rgb(0, 0, 0, 0.7); left: 50%; transform: translate(-50%, 0%); } #cookie_prompt_message { position: absolute; width: 84%; height: 50px; left: 50%; top: 23px; color: #ffffff; transform: translate(-50%, 0%); font-family: 'Saira Semi Condensed'; font-size: 15px; } #cookie_prompt_message a { color: #ffffff; text-decoration: underline; } #cookie_prompt_message a:hover { color: #000000; background-color: #f1fd43; text-decoration: underline; } #cookie_prompt_message a:visited { color: #ffffff; background-color: unset; } #cookie_button_html { width: 100%; height: 100%; } #cookie_button { position: absolute; width: 84%; height: 50px; top: 87px; left: 50%; transform: translate(-50%, 0px); background-color: #ffffff; color: #000000; cursor: hand; } #cookie_button:hover { background-color: #f1fd43; color: #000000; } #cookie_button_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Saira Semi Condensed'; font-size: 18px; font-weight: 400; width: 100%; line-height: 18px; text-align: center; } #cookie_button_save { position: absolute; width: 20%; height: 50px; top: 87px; right: -10px; transform: translate(-50%, 0px); background-color: #ffffff; color: #000000; cursor: hand; } #cookie_button_save:hover { background-color: #f1fd43; color: #000000; } #cookie_button_save_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Saira Semi Condensed'; font-size: 18px; font-weight: 400; } #legal { position: absolute; left: 50%; top: 50%; font-family: Teko; font-size: 15px; font-weight: 300; color: #000000; /* text-shadow: 0px 2px 1px rgb(0, 0, 0, 0.8); */ width: 100%; text-align: center; transform: translate(-50%, -50%); } .footer_elements { display: inline-block; cursor: hand; } .footer_elements.separator { margin: 3px; } .footer_elements a { color: #000000; } .footer_elements a:hover { background-color: #f1fd43; text-decoration: none; } #container_cover { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; display: none; transition: all 1250ms cubic-bezier(0.890, 0.085, 0.915, -0.210); } #cover_logo { position: absolute; top: 50%; left: 50%; width: 100%; height: unset; object-fit: cover; transform: translate(-50%, -50%); transition: all 1250ms cubic-bezier(0.890, 0.085, 0.915, -0.210); } #load_status { position: fixed; top: 50%; left: 50%; z-index: 1; display: none; } #load_status_window{ position: absolute; width: 100px; height: 100px; border:130px solid black; transform: translate(-50%, -50%); z-index: 5; display: block; display: none; } @keyframes element_2 { from {transform: translatex(105px);} 20% {transform: translatex(0px);} to {transform: translatex(0px);} } #load_status_element_2{ position: absolute; top: -45px; left: -45px; width: 100px; height: 100px; border: 5px solid white; border-top-left-radius: 20px; transform: translatex(105px); z-index: 4; animation: element_2 3s; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: running; } @keyframes element_3 { from {transform: translatex(-100px);} 20% {transform: translatex(-100px);} 40% {transform: translatex(0px);} to {transform: translatex(0px);} } #load_status_element_3{ position: absolute; top: 0px; left: -65px; width: 100px; height: 100px; border: 5px solid white; border-top-right-radius: 20px; transform: translatex(-100px); z-index: 3; animation: element_3 3s; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: running; } @keyframes element_4 { from {opacity: 0;} 40% {opacity: 0;} 60% {opacity: 1;} to {opacity: 1;} } #load_status_element_4{ position: absolute; top: 100px; left: 0px; width: 300px; font-family: Roboto; font-style: normal; font-weight: 300; font-size: 14px; color: #ffffff; text-align: center; vertical-align: center; transform: translate(-50%, -50%); z-index: 6; opacity: 0; animation: element_4 3s; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: running; } #composer_poster { position: relative; width: 100%; display: block; } #artist_page_title{ position: absolute; top: 280px; left: 50%; transform: translate(-65px); font-family: "Lucida Calligraphy", cursive; font-size: 32px; font-weight: 650; letter-spacing: 0.5px; word-spacing: -1.4px; text-decoration: none; font-style: normal; font-variant: normal; color: #ffffff; text-shadow: -2px -2px 4px #170C9E; opacity: 0.85; z-index: 2; display: none; } #composer_title { position: relative; padding-bottom: 0px; } #composer_dates { position: relative; } #composer_bio { position: relative; } #more_composer_bio { position: relative; width: calc(100% - 20px); left: 10px; margin-bottom: 25px; border-bottom: 1px solid var(--cssx_border_colors); bottom: 0px; } #more_composer_bio::after { content: ''; position: absolute; height: 30px; width: 40px; left: 50%; transform: translate(-50%, -50%); background-color: var(--content_section_background_color); } #more_composer_bio_inner { position: absolute; left: 50%; transform: translate(calc(var(--cssx_player_controls_inner_size) / (-8) * 5), -50%) rotate(90deg); box-sizing: border-box; width: var(--cssx_player_controls_inner_size); height: var(--cssx_player_controls_inner_size); border-top-style: solid; border-top-width: calc(var(--cssx_player_controls_inner_size) / 2); border-top-color: transparent; border-bottom-style: solid; border-bottom-width: calc(var(--cssx_player_controls_inner_size) / 2); border-bottom-color: transparent; border-left-style: solid; border-left-width: var(--cssx_player_controls_inner_size); border-left-color: var(--cssx_player_controls_inner_color_regular); z-index: 2; cursor: hand; transition: 1s; } .category_titles { font-family: Sylfaen; font-style: italic; font-weight: normal; font-size: 26px; color: #ffffff; text-align: left; padding: 6px; background-color: var(--title_background); } .category_titles.am { font-family: Sylfaen; font-weight: bold; font-style: normal; } .record_title_col{ padding: 15px; } .song_titles { font-family: Geneva, sans-serif; font-family: Roboto; font-style: normal; font-weight: 700; font-size: 22px; color: #000000; vertical-align: top; /* width:20vw; */ } .song_titles.am { font-family: Sylfaen, Armenia, serif; } .record_subtitles{ font-family: Roboto; font-style: normal; font-weight: 300; font-size: 14px; color: #000000; vertical-align: top; } .record_subtitles.am{ font-family: Sylfaen, Armenia, serif; } .more_text { font-family: Roboto; font-style: normal; font-weight: 300; color: #000000; font-weight: 550; width: 100%; text-align: right; margin-right: 15px; font-size: 14px; cursor: hand; } .more_text.am{ font-family: Sylfaen, Armenia, serif; } .more_row{ height: 24px; } .data_values { font-family: Roboto; font-style: normal; font-weight: 300; font-size: 17px; color: #000000; /* width: 80vw; */ } .data_values.am{ font-family: Sylfaen, Armenia, serif; } .data_info { font-family: Roboto; font-style: normal; font-weight: 300; font-size: 14px; color: #000000; } .data_info.am{ font-family: Sylfaen, Armenia, serif; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } .data_value_table { border-collapse: collapse; width: 100%; } .record_separators { line-height: 25px; } .td_Scores { width: 20%; } .td_Lyrics { width: 5%; } .td_Recording { width: 34%; } .record_rows { /* border-bottom:1pt solid black; */ /* border:1pt solid black; */ padding: 15px; } .data_table { /* border:1pt solid black; */ border-collapse: collapse; width: 100%; } .data_indentation { width: 0px; /* border:1pt solid black; */ } .data_rows { height: 30px; } tr[class$="hide"] { display: none; } .main { position: relative; text-align: center; top: 0px; left: 0px; width: 100%; z-index: 1; } .data_icons:hover { cursor: hand; } .data_info:hover { cursor: hand; text-decoration: underline; color: blue; } .footer { position: absolute; height: 100px; width: 100%; margin-top: 30px; text-align: center; color: #ffffff; z-index: 1; display: none; } .footer a { color: #ffffff; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } #pop_up { position: fixed; top: 50%; left: 50%; width: 300px; height: 206px; transform: translate(-50%,-50%); background-color: #000000; border-radius: 10px; box-shadow: 4px 4px rgba(255, 255, 255, 0.3); z-index: 5; display: none; } #pop_up .pup_helper{ display: block; margin-top: 40px; } #pop_up .pup_options{ display: block; width: 200px; margin: auto; margin-top: 6px; padding: 8px; border:1pt solid white; border-radius: 6px; /* transform: translate(-50%,-50%); */ font-family: Roboto; font-style: normal; font-weight: 300; font-size: 16px; color: #ffffff; text-align: center; cursor: hand; } #pop_up .pup_options.am{ font-family: Sylfaen, Armenia, serif; } .icon_col{ text-align: center; width: 30px; } .song_separators{ height: 5px; border-bottom:1pt solid var(--cssx_border_colors); } #data_generator { display: none; } #alyv_generator { display: none; } #analytics_menu_top { position: sticky; top: 0px; left: 0px; width: 100%; height: 60px; background-color: white; z-index: 1; } #analytics_date_previous { position: absolute; top: 50%; left: calc(50% - 100px); transform: translate(-50%, -50%); cursor: hand; } #analytics_date { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: end; border: 1px solid black; } #analytics_date_next { position: absolute; top: 50%; left: calc(50% + 100px); transform: translate(-50%, -50%); cursor: hand; } .analytics_titles_tr { font-weight: 600; background-color: var(--alyv_yellow); } .analytics_titles_td { padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } #analytics_sessions_table { border: 1px solid rgb(0, 0, 0, 0.6); position: relative; left: 50%; transform: translate(-50%, 0%); margin-top: 50px; text-align: center; border-collapse: collapse; } .analyitics_sessions_title_td { text-align: right; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } .analyitics_sessions_td { padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } #analytics_links_table { border: 1px solid rgb(0, 0, 0, 0.6); position: relative; left: 50%; transform: translate(-50%, 0%); margin-top: 50px; text-align: center; border-collapse: collapse; } .analyitics_links_title_td { text-align: right; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } .analyitics_links_td { padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } #analytics_tracks_table { border: 1px solid rgb(0, 0, 0, 0.6); position: relative; left: 50%; transform: translate(-50%, 0%); margin-top: 50px; text-align: center; border-collapse: collapse; } .analyitics_tracks_title_td { text-align: right; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } .analyitics_tracks_td { padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; }