
/* SIDEBAR PLAYER */

#sidebar_player
{
  position: relative;
  padding-bottom: 15px;
}

#sidebar_player_toggle
{
  font-size: 0.6875rem;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
}

#sidebar_player_toggle_show,
#sidebar_player_toggle_hide
{
  display: none;
}

#sidebar_player:hover #sidebar_player_toggle_hide
{
  display: block;
}

#sidebar_player.closed #sidebar_player_toggle_hide
{
  display: none !important;
}

#sidebar_player.closed #sidebar_player_toggle_show
{
  display: block !important;
}

#sidebar_player_main
{
  text-align: center;
  background-color: rgba(0,0,0,0.3);
  height: 200px;
  overflow: hidden;
  border-radius: 5px;
  flex: none;
}

#sidebar_player.closed #sidebar_player_main
{
  display: none;
}

#sidebar_player_draghere
{
  color: #555753;
  font-size: 6em;
  line-height: 196px; 
  border-radius: 5px;
  border-width: 2px;
  height: 196px;
}

#sidebar_player_draghere:empty::after
{
  font-family: "Font Awesome 5 Free";
  content: "\f144";
}

#sidebar_player video
{
  width: 360px;
  max-height: 196px;
}

#sidebar_search
{
  margin-top: 5px;
  font-size: 0.9em;

  flex: auto;
  display: flex;
  flex-direction: column;

  z-index:10000;
}


/* SIDEBAR SEARCH CONTAINERS */

#sidebar_search_playlist_container
{
  background-color: #555753;
  /* display: flex; done by js */
  flex: auto;
}

#sidebar_search_media_container
{
  flex: auto;
  display: flex;
}

#sidebar_search_media_container > *, #sidebar_search_playlist_container > *
{ 
  flex: none; /* some children flex settings overridden below */
}

.sidebar_search_media_container_basic
{
  background-color: #555753;
}

.sidebar_search_media_container_detailed
{
  background: #555753;
}


#sidebar_search_media_results_container, #sidebar_search_playlist_results_container
{
/*
  overflow-y: scroll;
  overflow-x: hidden;
*/
  flex: 1 1 0px;
}

#sidebar_search_media_container,#sidebar_search_playlist_container
{
  clear: both;
  z-index: 2;
  position: relative;
  top: 0;
  padding: 10px;
  border-radius: 0px 5px 5px 5px;
  flex-direction: column;
  margin-bottom: 20px;
}

.sidebar_search_detailed
{
  margin-left: -530px;
}

body.sidebar-left .sidebar_search_detailed
{
  margin-left: 0;
  margin-right: -530px;
}

#media_detailed_toggle_right
{
  display: none;
}

#media_detailed_toggle_left
{
  display: inline;
}

.sidebar_search_media_container_detailed #media_detailed_toggle_right
{
  display: inline;
}

.sidebar_search_media_container_detailed #media_detailed_toggle_left
{
  display: none;
}

body.sidebar-left #media_detailed_toggle_right
{
  display: inline;
}

body.sidebar-left #media_detailed_toggle_left
{
  display: none;
}

body.sidebar-left .sidebar_search_media_container_detailed #media_detailed_toggle_right
{
  display: none;
}

body.sidebar-left .sidebar_search_media_container_detailed #media_detailed_toggle_left
{
  display: inline;
}


/* SIDEBAR SEARCH TABS AND BUTTONS */

#sidebar_search_tab_media,#sidebar_search_tab_playlist
{
  width: 150px;
  border-radius: 5px 5px 0px 0px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
}

#sidebar_search_tabs
{
  font-size: 1.2em;
  text-transform:lowercase;
  flex: 0 0 auto;
  display: flex;
}

#sidebar_search_tabs a
{
  color: #eeeeec;
}

#sidebar_search_tabs a:hover
{
  text-decoration: none;
}

#sidebar_search_media_form, #sidebar_search_playlist_form
{
  padding: 5px;
  text-align: center;
}

#sidebar_search_media_filters
{
  padding-right: 10px;
}

#sidebar_search_tab_media
{
  position: relative;
  top: 0px;
  left: 0px;
  /* z-index: 10; */
}

#sidebar_search_tab_playlist
{
  position: relative;
  top: 0px;
  left: -10px;
  /* z-index: 5; */
} 

.sidebar_search_tab
{
  background-color: #888a85;
  z-index: 1;
}

.sidebar_search_tab.selected
{
  background-color: #555753;
  z-index: 15;
}


#sidebar_search_media_buttons, #sidebar_search_media_select_buttons, #sidebar_search_playlist_buttons, #sidebar_search_playlist_select_buttons
{
  text-align: center;
  padding-bottom: 5px;
  margin: 0px -3px;
}

#sidebar_search_media_buttons, #sidebar_search_playlist_buttons
{
  padding-top: 4px;
}

#sidebar_search_media_select_buttons, #sidebar_search_playlist_select_buttons
{
  padding-top: 10px;
}

.sidebar_search_media_buttons_sep, .sidebar_search_playlist_buttons_sep
{
  border-left: 1px solid #aaa;
  padding-left: 5px;
} 

#sidebar_search_media_input
{
  max-width: 155px;
}

#sidebar_search_media_mode
{
  margin: 3px 0;
}

/* SIDEBAR SEARCH RESULTS */
#sidebar_search_media_headings,
#sidebar_search_playlist_headings,
#sidebar_search_playlist_results,
#sidebar_search_media_results
{
  border-collapse: collapse;
}

#sidebar_search_media_results td, 
#sidebar_search_media_headings th, 
#sidebar_search_playlist_results td, 
#sidebar_search_playlist_headings th
{
  padding: 1px 10px 1px 0;
  text-align: left;
}

#sidebar_search_media_results .sidebar_search_media_type i
{
  position: relative;
  left: 3px;
}

#sidebar_search_media_headings th, 
#sidebar_search_playlist_headings th
{
  font-size: 0.9em;
  margin-top: 10px;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #aaa;
}

#sidebar_search_media_headings,
#sidebar_search_playlist_headings,
#sidebar_search_media_results,
#sidebar_search_playlist_results
{
  width: calc(100% - 10px);
  table-layout: fixed;
}

#sidebar_search_playlist_headings th:last-child 
{
  padding-right: 20px;
}

#sidebar_search_media_results td,
#sidebar_search_playlist_results td
{
  font-size: 0.8em;
  border-bottom: 1px solid #777;
  word-wrap: break-word;
  overflow: hidden;
}

#sidebar_search_media_results .sidebar_search_media_type
{
  width: 12px;
}

#sidebar_search_media_results .sidebar_search_media_artist
{
  width: 124px;
}

#sidebar_search_media_results .sidebar_search_media_title
{
  width: 124px;
}


#sidebar_search_media_results .sidebar_search_media_time
{
  width: 40px;
  padding-right: 0;
}

#sidebar_search_playlist_results .sidebar_search_playlist_name
{
  width: 150px;
}

#sidebar_search_playlist_results .sidebar_search_playlist_description
{
  width: 170px;
}

.sidebar_search_media_result, .sidebar_search_playlist_result
{
  cursor: pointer;
}


#sidebar_search_media_footer .num_results, #sidebar_search_playlist_footer .num_results
{
  font-weight: 600;
}

#sidebar_search_media_footer .results, #sidebar_search_playlist_footer .results
{
  text-align: center;
}

#sidebar_search_media_footer .details
{
  position: relative;
  z-index: 99;
}

.sidebar_search_noresults
{
  color: #999;
  text-align: left;
  font-size: 1.8em;
  padding: 20px 20px 20px 4px;
}

/* work for expanded view and collpased view, but a bit messy */
/* TODO display is a bit glitchy? */
/*
.sidebar_search_noresults
{
  width: 900px;
}
*/

.sidebar_search_media_artist
{
  width: 140px; /* see sidebar.js $(document).ready() */
}

.sidebar_search_media_title
{
  width: 140px; /* see sidebar.js $(document).ready() */
}

.sidebar_search_media_time
{
  width: 40px;
}

.sidebar_search_media_detailed_column
{
  width: 90px;
}

.sidebar_search_media_year
{
  width: 30px;
}

.sidebar_search_playlist_name
{
  width: 90px;
}

.sidebar_search_playlist_description
{
  width: 240px; /* see sidebar.js $(document).ready() */
}

#sidebar_search_media_footer, #sidebar_search_playlist_footer
{
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  width: 100%;
  font-size: 13px;
  padding: 3px 0;
  margin-bottom: 10px;
  position: relative;
}

#sidebar_search_media_footer .details, #sidebar_search_playlist_footer .details
{
  position: absolute;
  left: 0;

  a 
  {
    font-size: 13px;
    padding: 2px;
  }

}

body.sidebar-left #sidebar_search_media_footer .details, 
body.sidebar-left #sidebar_search_playlist_footer .details
{
  left: auto;
  right: 0;
  text-align: right;
}

#sidebar_search_media_loadmore, #sidebar_search_playlist_loadmore
{
  font-size: 0.8em;
  text-align: center;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 8px;
}

#sidebar_search_media_loading, #sidebar_search_playlist_loading
{
  font-size: 0.8em;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 8px;
}

/* SIDEBAR SEARCH RESULTS DRAGGING AND SELECTED */
.sidebar_search_media_selected, .sidebar_search_playlist_selected
{
  background: rgba(255,255,255,0.8);
  color: #000;
}

/* SIDEBAR CONTEXT MENU */
.context-menu
{
  padding: 5px;
  list-style-type: none;
  background: #333336;
  border-radius: 5px;
  z-index: 10002 !important;
}

.context-menu li
{
  padding: 4px;
  font-size: 0.8em;
}

/* MY SEARCHES */

#my_searches_history, #my_searches_history *
{
  cursor: pointer;
}

#my_searches_history_nosearches, #my_searches_saved_nosearches
{
  margin-top: -10px;
}

.my_searches_item
{
  padding: 10px 0;
  border-top: 1px solid #aaa;
}

.my_searches_item:last-child
{
  border-bottom: 1px solid #aaa;
  margin-bottom: 20px;
}

.my_searches_item:hover
{
  background-color: rgba(255,255,255,0.1);
}

.my_searches_item.context_menu_on
{
  background-color: rgba(255,255,255,0.2);
}

.my_searches_context_menu
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 5px;
  border: 1px solid #eeeeec;
  background-color: #333336;
  width: 125px;
  padding: 5px;
  cursor: pointer;
}

.my_searches_context_menu > div
{
  padding: 5px;
}

.media_search_item_default_text
{
  font-weight: bold;
  padding-bottom: 5px;
}

#edit_my_search_item_description
{
  height: 75px;
  margin-bottom: 15px;
}

.advanced_search{
  text-align: left;

}
.advanced_search select{
  width:auto;
}
