@charset "utf-8";

/**
 * -----------------------------------------------------------------------------
 * com_muscol	Music Collection component for Joomla
 * -----------------------------------------------------------------------------
 *
 * @package		Muscol
 * @copyright	Copyright (C) 2009 - 2016 JoomlaThat!. All rights reserved.
 * @license		http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL v2 or later
 * @author		JoomlaThat!
 * website		http://www.joomlathat.com
 * support		support@joomlathat.com
 */

 a.song_link{
    width:100%;
    display:block;
}

.rule_sep{
    height:5px;
    border-top:1px solid #999999;
    margin-left:200px;
    margin-right:200px;
}
.imatge_gran{

    width:100%;
    border:1px solid #CCCCCC;
}
.div_imatge_gran{
    text-align:left;
    padding-bottom:5px;
}

.albumYear {
	font-weight: normal;
    vertical-align: top;
}

h2.artista_disc{

    font-weight:normal;
    padding:0px;
    font-size:22px;
}
h2.artista_disc img{
    max-height:40px;
}

h1.album_disc{

    font-weight:normal;
    padding:0px;
    font-size:24px;
}
h1.album_disc img{
    max-height:50px;
}
.subtitle_disc{
    color:#999999;
}
.nom_song{
    text-align:left;
    padding-left:10px;
    color:#666;
}
.num_song{
    width:20px;
    text-align:right;
    color:#666;
    padding-top:2px;
}

.buttons_song{
    text-align:left;
    padding-left:10px;
    color:#666;
}
.song_player{
    text-align:left;
    padding-left:10px;
    color:#666;
    width:80px;
}
.time_song_total{
    text-align:right;
    padding-left:20px;
    color:#666;
}
.disc_label{
    border-bottom:1px solid #006699; color:#006699;
    margin-bottom:3px;
    padding-bottom:3px;
}
.year_disc{
    font-size:16px;
    line-height:34px;
    color:#999999;
}
.date_disc{
    font-size:18px;
    color:#999999;
    padding-left:20px;
}
.date_disc img{
    vertical-align:bottom;
    padding-bottom:4px;
    border:none;
}
.year_disc img{

    border:none;
}
.year_disc a,.year_disc a:link,.year_disc a:visited{
    color:#999999;
}
.year_disc a:hover{
    color:#666666;
}
.taula_next_album{
	width:100%;
	-moz-border-radius:4px;
	padding:5px;
	background-color:#f9f9f9;
	border:1px solid #dfdfdf;
}
.taula_next_album a img{
    vertical-align:middle;
    border:1px solid #cccccc;
}
.taula_next_album a:hover img{
    vertical-align:middle;
    border:1px solid #000000;

}
.prev_album{
    text-align:left;
    width:33%;
}
td.prev_album a:hover{
/*color:#FF0000;
background-color:#fffeee;*/
}
.next_album{
    text-align:right;
    width:33%;
}
td.next_album a:hover{
/*color:#FF0000;
background-color:#fffeee;*/
}
.next_album_type{
    width:33%;
    text-align:center;
    color:#CCCCCC;
}
.no_songs{
    padding:5px;
    color:#999999;
}

/********************* DETAILS ************************/

.disc_details{
	margin-bottom:10px;
}

table.details{
	border-bottom:1px solid #eeeeee;
	border-right:1px solid #eeeeee;
	font-size:12px;
}
table.details table td{
	border-top:1px solid #eeeeee;
}
td.label_detailed_album{

	padding-left:1px;
	width:30%;
	color:#999;
}
.value_detailed_album{
    white-space: normal;
    padding-left:1px;
    padding-right:1px;
}

/******************** grid view *********************/



ul.albums {
    display:inline-block;
}

ul.albums li {
    float:left;
    width:117px;
    margin:5px;
    display:block;
}

ul.albums img{
    border:1px solid #CCCCCC;

}
ul.albums li div{
    height:117px;
    display:table-cell;
    vertical-align:bottom;
}
ul.albums li a, ul.albums li a:visited {
    display:block;
    width:117px;
}

ul.albums li a:hover img{ border:1px solid #000; }
ul.albums li a:hover span{ color:#000;}


ul.albums .name {
    display:block;
    padding-top:5px;
    color:#666666;
}
ul.albums span {
    font-size:12px;
    line-height:16px;
    text-align:left;
}

div.cd{
	height:117px;
}
div.dvd{
	height:164px;
}
a.cd{
	height:205px;
}
a.dvd{
	height:230px;
}

ul.albums .year{
    color:#999999;
    font-size:10px;
}
ul.albums .year img{
    border:none;
    vertical-align:middle;
    padding-bottom:4px;
}
ul.albums a:hover .year img{
    border:none;
}
.nom_artist_song{
	color:#999;
	padding-left:10px;
}
.num_hits{
	font-size:14px;
	font-family:"Trebuchet MS",Verdana,serif;
}
.disc_details h3 {
	border-bottom:1px solid #DDD;
	font-size: 18px;
    line-height: 22px;
    font-weight:400;
    height:auto;
    letter-spacing:normal;
    margin:0 0 10px;
    padding:0;
    text-indent:0;
    padding-bottom: 10px;
}
.disc_data{
	background:url(images/back_album_data.png) no-repeat;
	padding:5px;
	padding-right:15px;
	margin-bottom:0px;
}
.disc_data_bottom{
	background:url(images/back_album_data_bottom.png) no-repeat;
	height:4px;
	margin-bottom:5px;
}
.num_ratings{
	font-size:12px;
}

.muscol_edit{
	text-align:right;
	margin-bottom:4px;
}

/* NEW in 2.4*/
.table td.num_song, td.num_song{
	text-align:center;
}
.play_button{
	display:none;
}

tr.tr_song_link:hover .play_button, tr.info .play_button{
	display:inline ;
}

tr.tr_song_link:hover .song_position, tr.info .song_position{
	display:none;
}

.play_button:hover .icon-volume-up {
    background-position: -288px -72px;
}

.searchalbums select, .searchsongs select{
	width:120px;
}

.div_imatge_gran{
	position:relative;
}
.playbutton_div {
	position:absolute;
	width: 44px;
	height: 44px;
	top: 50%;
	left: 50%;
	background:none;
}

.play-lg {
	display: none;
	width: 44px;
	height: 44px;
	position:absolute;
	left:-21px;
	top:-21px;

	padding: 0;
	background: url(../images/playicons.png) ;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

.play-lg:hover{
	background-position: -44px 0;
}

.pause-lg {
	background-position: 0px -88px;
}
.pause-lg:hover {
	background-position: -44px -88px;
}

.div_imatge_gran:hover .play-lg{display:block;
}

.nom_song span.year{
	font-size: 12px;
    color: #999;
}

span.year img, .year_disc img{
	vertical-align:text-top;
}

tr.info td {
    background-color: #d9edf7;
}

.image_song_list {
    margin-right: 5px;
}
.pull-left {
    float: left;
}
.img-rounded {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

a.muscol_tags{
	text-decoration: none !important;
}

/* MFH hovering kleur tags album details */
a.muscol_tags:hover span{
	background-color: #888;
}

/* http://www.getmdl.io/components/index.html#cards-section */

.mdl-card__title {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #000;
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: stretch;
    -webkit-justify-content: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    line-height: normal;
    padding: 16px;
    -webkit-perspective-origin: 165px 56px;
    perspective-origin: 165px 56px;
    -webkit-transform-origin: 165px 56px;
    -ms-transform-origin: 165px 56px;
    transform-origin: 165px 56px;
    box-sizing: border-box;
}


.mdl-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    //min-height: 200px;
    overflow: hidden;

    z-index: 1;
    position: relative;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
}


.mdl-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}


.mdl-card__supporting-text {
    color: rgba(0,0,0,.54);
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    padding: 16px;
    width: 90%;
    padding-bottom:5px;
}


.mdl-card__actions.mdl-card--border {
    border-top: 1px solid rgba(0,0,0,.1);
}

.mdl-card__actions {
    font-size: 16px;
    line-height: normal;
    /*width: 100%;*/
    background-color: transparent;
    padding: 8px;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

.demo-card-wide > .mdl-card__menu {
    color: #fff;
}

.material-card.album-detailed .mdl-card__actions {
    overflow: hidden;
    position: absolute;
    left: 150px;
    right: 0px;
    top: 103px;
    display: flex;
}

.mdl-card__menu {
    position: absolute;
    right: 16px;
    top: 16px;
}

.card-actions .btn-toolbar{
    width: 100%;
}

.demo-card-wide.mdl-card {

}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 100px;
  background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}

.mdl-card__title-text{
	color:#000000;
	margin-top:0 !important;
	font-size:18px;
}

.demo-card-wide-album > .mdl-card__title {
  color: #fff;
  height: 500px;
  background: url('../assets/demos/welcome_card.jpg') center / cover;
}

.shadow-box{
	border-radius: 2px;

	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.2s ease-in-out;
}

.shadow-box:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.demo-card-wide-album.shadow-box:hover {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

a.demo-card-wide{
	text-decoration:none !important;
}

.songs-album-container-closed{
    display: block;
    height: 0;
    overflow: auto;
    transition: height 0.3s ease-in-out;
}

.songs-album-container-open{
    height: 325px;
    border-top: 1px solid #ddd;
}

.songs-album-container-closed table{
    margin-bottom: 0;
}

.albumthumb{
	width:100%;
}

.artist-profile-image{
	margin-top: -100px;
}
.artist-profile-image.sticky{
    position: fixed;
    width: 360px;
    top:167px;
}

.artist-background-image-wrapper{

    overflow: hidden;
    width: 100%;
    height: 300px;
    border-radius: 2px;
}

.artist-background-image{

    margin: -10px -10px -10px -10px;
    height: calc(100% + 20px);
}

.blur-background{
   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
   -o-filter: blur(10px);
   -ms-filter: blur(10px);
   filter: blur(10px);
}

.artist-header-wrapper{
    width: 100%;
    height: 100%;
    margin-bottom: 10px;

    position: relative;
}

.artist_header{

    width: 100%;
    height: 60px;
    padding-top: 40px;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    right: 15px;

    background-color: rgba(0,0,0,0);
    background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.46));
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.46));

}

.artist_header h1.name_artist{
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    padding: 0px;
    bottom: 0px;
    position: absolute;
    padding-left: 10px;
}

.artist_buttons {
    bottom: 0;
    right: 15px;
    max-width: 100%;
    position: absolute;
    width: 100%;
    text-align: right;
    padding: 10px;
    padding-left: 10px;
}

/* from google music */

.material-card {
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    background-color: white;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 2px;
    cursor: default;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

a.material-card{
    cursor: pointer;
}

.material-shadow-z1 {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
    transition: box-shadow 0.28s cubic-bezier(0.4,0,0.2,1);
}

.material-card .image {
    width: 100%;
    height: 100%;
    vertical-align: top;
    border-radius: 2px 2px 0 0;
    height: auto;
}

.material-card .imagediv {
 border-radius: 2px 2px 0 0;
 height: 100%;
}

.material-card .image-wrapper {
    border-radius: 2px 2px 0 0;
    position: relative;
    width: 100%;
}

.material-card .image-wrapper {
    padding-top: 100%;
}

.material-card .image-inner-wrapper {
    position: absolute;
    top: 0;
}

.material-card .image-inner-wrapper {
    border-radius: 2px 2px 0 0;
    width: 100%;
    height: 100%;
}

.material-card.album-detailed .image-inner-wrapper {
    border-radius: 2px 0 0 2px;
}

.material-card.album-detailed .image-wrapper {
    border-radius: 2px 0 0 2px;
    position: relative;
    width: 150px;
    height: 150px;
}

.material-card.album-detailed .imagediv {
 border-radius: 2px 0 0 2px;
}

.material-card.album-detailed .image-wrapper{
    padding-top: initial;
}

.card-artist-album .image-wrapper .imagediv{
    width: 100%;
    height: auto;
}

.material-card .details {
    padding: 15px;
    position: relative;
}

.material-card.album-detailed .details {
    overflow: hidden;
    position: absolute;
    left: 150px;
    right: 0px;
    /*bottom: 0px;*/
    top: 0px;
    display: flex;
}

.main-card-open{

    box-shadow: 0 4px 4px -1px rgba(0,0,0,0.37);
    -webkit-box-shadow: 0 4px 4px -1px rgba(0,0,0,.1);

}

.album-detailed{
    margin-bottom: 15px;
}

.material-card .details-inner {
	white-space: initial;
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.material-card a.details-inner {
    text-decoration: none;
}

.material-card .details .btn-more-options.menu-anchor {
	position: absolute;
	top: 8px;
	right: 0;
	width: 26px;
	height: 26px;
	padding: 4px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	cursor: pointer;
	color: #212121;
}

.material-card:hover .details .btn-more-options.menu-anchor {
	opacity: 1;
}

.btn-more-options {
	display: inline-block;
	position: relative;
	padding: 8px;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	z-index: 0;
	line-height: 1;
	width: 40px;
	height: 40px;
	box-sizing: border-box !important;
}

.moreOptionsIcon.iron-icon-0 {
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	fill: currentcolor;
	stroke: none;
	width: 100%;
	height: 100%;
}

.moreOptionsIcon {
	position: relative;
	vertical-align: middle;
}

.btn-more-options:active {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #EEEEEE;
}

.material-card .title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: #212121;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.material-card.album-detailed .title {

    font-size: 18px;
    line-height: 22px;
    max-height: 44px;
}

.fade-out:after {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 30px;
	content: "";
	background-image: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
	background-image: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	background-image: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	background-image: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	background-image: -o-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1));
	background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#00ffffff',EndColorStr='#ffffff');
}

.material-card .sub-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    font-weight: 400;
    color: #616161;
    margin-top: 4px;
    text-decoration: none;
    outline: none;
}

.material-card.album-detailed .sub-title {

    font-size: 16px;
    line-height: 20px;
    white-space: normal;
    height: 20px;
}

.material-card.album-detailed .extra-info {

    display: block;
    overflow: hidden;

    height: 18px;
    font-weight: 400;
    color: #999;
    margin-top: 6px;
    text-decoration: none;
    outline: none;

    font-size: 14px;
    line-height: 18px;
    white-space: normal;
}

.material-card.album-detailed .extra-info>span:first-child {
    padding-right: 7px;
}
.material-card.album-detailed .extra-info>span:not(:first-child) {
    padding: 0 7px;
}

.material-card.material-shadow-z1.material-card-hover:hover,
.material-card.material-shadow-z1.material-card-hover.focused{
	box-shadow:0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3)
}

.material-card .details paper-icon-button.menu-anchor {
    position: absolute;
    top: 8px;
    right: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    cursor: pointer;
    color: #212121;
}

.material-card .play-button-container {
    position: absolute;
    height: 40px;
    width: 40px;
    right: 4px;
    bottom: 4px;
}

paper-icon-button {
    display: inline-block;
    position: relative;
    padding: 8px;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    z-index: 0;
}

paper-icon-button.paper-icon-button-0 #ink.paper-icon-button {
    color: #212121;
}

paper-icon-button #ink.paper-icon-button {
    opacity: 0.6;
}

paper-ripple {
    display: block;
    position: absolute;
    border-radius: inherit;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.material-card .play-button-container paper-icon-button.play-button iron-icon {
    width: 18px;
    height: 18px;
    margin: 3px;
}

.material-card .play-button-container paper-icon-button.play-button,
.material-card .play-button-container paper-icon-button.play-indicator {
    color: white;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    right: 0;
    bottom: 0;
}

a.material-card, a.material-card:link, a.material-card:hover, .material-card a, .material-card a:hover{
    text-decoration: none;
}

.material-card.artist-profile-image .image-wrapper {
    padding-top: 75%;
}


/* SEARCH SUGGESTIONS */

.size32 {
    height: 48px;
    width: 48px;
    //padding: 8px 8px 8px 0;
    float: left;
    border-radius: 2px;
    margin-right: 10px;
}

.twitter-typeahead .typeahead-user-item-info {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitter-typeahead .name {

    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: #212121;
    text-decoration: none;
    outline: none;
}

.twitter-typeahead .subtitle {

    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    font-weight: 400;
    color: #616161;
    margin-top: 4px;
    text-decoration: none;
    outline: none;
}

.twitter-typeahead .section-name {
    margin: 10px 20px 5px 20px;
    padding: 3px 0;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
}

.twitter-typeahead .info_wrapper{
    padding-top:6px;
}

.tt-menu {
    //display: block !important;
}
.searchbox-container-small .tt-menu {
    width: calc(100% + 39px);
}

.tt-menu .tt-suggestion {

    padding: 4px 20px;
    height: 56px;

}

/* SEARCH */

.spinner {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: url(../images/spinner-rosetta-gray-32x32.gif) no-repeat 0 0;
}

#album_search_results, #song_search_results, #artist_search_results, .album_search_results {
    margin-right: -15px;
    margin-left: -15px;
}

.search-header {
    height: 36px;
    box-sizing: border-box;
    margin: 0 8px 12px 8px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

.search-header-inner {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;

}

.search-header-inner .title {
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #212121;
    cursor: default;
    margin: 0;
}

.clear_row{
    clear: both;
}

.song .info_wrapper{
    padding-top: 6px;
}

.song .name {

    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    color: #212121;
    text-decoration: none;
    outline: none;
}

.song .subtitle{

    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    font-weight: 400;
    color: #616161;
    margin-top: 4px;
    text-decoration: none;
    outline: none;
}

.song-image-wrapper {
    height: 48px;
    width: 48px;
    float: left;
    border-radius: 2px;
    margin-right: 10px;
}

.song-image-wrapper .imagediv {
 height: 100%;
 width: 100%;
 border-radius: 2px;
}

.tagsRow .twitter-typeahead {
	width: 47%;
	float: left;
}

.tagsRow .tm-tag {
	margin-bottom: 0 !important;
	margin-top: 3px;
}

.tagsRow .tm-tag:first-child {
    margin-left: 5px;
}

.templateSongLink:hover, .templateSongLink:focus {
	text-decoration: none;
}

.dropdown-content {
	min-width: 180px !important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !important;
	padding: 8px 0 !important;
	background-color: #ffffff;
	border-radius: 2px !important;
	border: 1px solid #ddd !important;
	top: 66%;
}

.dropdownRow {
	font-size: 14px;
	line-height: 40px;
	white-space: nowrap;
	transition: all 0.1s ease-in-out;
	color: #333;
	border: none !important;
	font-weight: normal;
}

.dropdown-content .dropdownRow:hover {
	background-color: #eeeeee !important;
}

.dropdownButton {
	border-radius: 0;
	background-color: #fff;
	text-align: left;
	height: 100%;
}

.dropdownSeparator {
	width: 100%;
	height: 1px;
	margin-top: 8px;
	background-color: #dddddd;
	margin-bottom: 8px;
	border-color: #dddddd !important;
}

.dropdownButton:hover {
	background-color: #eee !important;
}

.dropdownButton.btn-link {
	color: #333;
	text-decoration: none;
}

.show {
	display: block;
}

.modal-body {
	padding-top: 20px !important;
}

.modalInput {
	width: 100% !important;
}

#searchPlaylistsSpinner {
    display: none;
}

#otherPlaylistsModal .modal-body, .swapPlaylistsModal .modal-body {
	max-height: 350px;
	overflow-y: auto;
}

.onTheGoOption {
	font-size: 16px;
	padding: 1px 5px;
	color: #333 !important;
}

.saveOnTheGoButton {
    padding-top: 0;
    padding-bottom: 0;
}

.glyphicon-floppy-disk {
	margin-bottom: -2px;
}

@media (max-width: 767px) {
    .formatSelectContainer {
        padding-right: 0;
    }
    .genereSelectContainer {
        padding-right: 0;
        padding-left: 0;
    }
    .typeSelectContainer {
        padding-left: 0;
    }

    .optionPaddingTop {
        padding-top: 10px;
    }

}

/* NOTY */

.snackbar-group{
	margin-bottom: 20px !important;
}

.snackbar-group .noty_bar{
	cursor: default;
	background-color: #323232;
	z-index: 10000;
	border-radius: 2px;
	pointer-events: none;
}

.snackbar-group .noty_bar .noty_message{
	padding: 14px 24px;
	vertical-align: middle;
	color: #fff;
}

.list-group-item.snackbar-group{
    border: none !important;
}

/* PLAYER */

#album_player_search {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 1000;
    height: 36px;
}

.playPauseAlbumBtn {
	width: 40px;
    height: 40px;
    position: absolute;
    left: 4px;
    bottom: 4px;
    background-color:rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 100%;
    margin: auto;
    cursor: pointer;
    outline: none
}

.playPauseAlbumBtn:hover {
	background-color:rgba(0, 0, 0, 0.7);
}

.playPauseAlbumBtn.readyToPlay::after {
	content: '';
	display: inline-block;
	position: relative;
	top: 3px;
	left: 3px;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent white;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.playPauseAlbumBtn.playing {
	background-image: url('../images/playing_white.gif');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
}

.playPauseAlbumBtn.paused {
	background-image: url('../images/paused_white.gif');
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
}

.song-item:hover .playPauseSongBtn {
	display: block;
}

.playSongColumn {
	text-align: center;
	vertical-align: middle !important;
	width: 60px;
}

.playPauseSongBtn {
	width: 37px;
	height: 37px;
	display: none;
	position: relative;
	left: 0;
	top: -42px;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 100%;
	margin: auto;
	cursor: pointer;
	outline: none
}

.playPauseSongBtn:hover {
    background-color:rgba(0, 0, 0, 0.7);
}

.song-item .playPauseSongBtn::after {
	content: '';
	display: inline-block;
	position: relative;
	top: 10px;
	left: 13px;
	border-style: solid;
	border-width: 9px 0 9px 16px;
	border-color: transparent transparent transparent white;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.song-item.playing:hover .playPauseSongBtn:before, .song-item.playing:hover .playPauseSongBtn:after {
	content: '';
	display: inline-block;
	position: relative;
	border-color: white;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.song-item.playing:hover .playPauseSongBtn:before {
	top: 10px;
	left: 11px;
	border-style: solid;
	border-width: 9px 3px 9px 3px;
}

.song-item.playing:hover .playPauseSongBtn:after {
	top: 10px;
	left: 15px;
	border-style: solid;
	border-width: 9px 3px 9px 3px;
}

.play-indicator {
    position: relative;
    width: 48px!important;
    height: 48px!important;
    background-repeat: no-repeat;
    background-position: center;
    background-color: inherit;
    background-size: 40px 40px;
    background-image: url('../images/playing.gif');

    left: 0;
    top: 0;
    transform: translateZ(0);

    display: none;
}

.playing .play-indicator{
    display: block;
}

.paused .play-indicator{
    display: block;
    background-image: url('../images/paused.gif');
}

.album-detailed .image-wrapper .playPauseAlbumBtn,
.image-song-container .playPauseAlbumBtn{
    left: calc(50% - 20px);
    bottom: calc(50% - 20px);
}

/* SONG LINE */
.song-icons, .song-buy{
	text-align: center;
    vertical-align: middle !important;
    font-size: 15px;
    width: 68px;
}
.song-buy{
    text-align: right;
}

.song-icons span.glyphicon{
    padding-left: 4px;
    padding-right: 4px;
    color:#212121 !important;
}

.song-icons a:hover span.glyphicon{
    color:#000 !important;
}
.song-icons span.glyphicon.gray-icon{
    color:#999 !important;
}

.time_song{
    text-align:right;
    color: #999;
    font-size: 15px;
    vertical-align: middle !important;
    width: 42px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.song-icon-slot{
    width: 40px;
    vertical-align: middle !important;
    font-size: 16px;
}
.play-indicator-container{
    width: 34px;
    position: absolute;
    right: 0;
    top:0;
    padding-top: 8px;
    padding-bottom: 8px;
}
td.song{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 176px;
    position:relative;
}
.paused .play-indicator-container, .playing .play-indicator-container {
    background-color: #f5f5f5;
}
tr.active.paused:hover .play-indicator-container,
tr.active.playing:hover .play-indicator-container {
    background-color: #e8e8e8;
}

/* BIG SEARCH BAR */
#moreOptionsButton:focus, .btn:focus {
	outline: none;
}

.icon-more-options {
	margin-top: 2px;
}

#bigBarMoreOptions {
	display: none;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid #cccccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
    background-color: white;
}

.noPaddingRightCol {
	padding-right: 0;
}

.noPaddingLeftCol {
    padding-left: 0;
}

.moreOptionsRow {
	padding: 5px 0;
}

/* LETTER BAR */
#letterbar-group{
    margin-bottom: 30px;
}

.albums-artist .song-image-wrapper:nth-child(4) {
    margin-right: 0;
}

.albums-artist-wrapper{
    background-color: #f4f4f4;
    padding: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    border-top: 1px solid #e7e7e7;

}

.albums-artist{
    height: 80px;
    width: 238px;
}

[data-type~=artist] .image-inner-wrapper {
    background: url(../../../../images/artists/no_image.png) center / cover;
}

[data-type~=album] .image-inner-wrapper, [data-type~=album].song-image-wrapper {
    background: url(../../../../images/albums/no_image.png) center / cover;
}

[data-type~=song] .song-image-wrapper {
    background: url(../../../../images/albums/no_image.png) center / cover;
}


/* PLAYLISTS */

#onTheGoContainer {
	padding: 20px 15px;
	margin-bottom: 30px;
}

.playlistFilterCard {
	margin-left: 0;
	margin-right: 0;
    margin-bottom: 30px;
}

#playlistsSpinner {
    display: none;
}

#noMorePlaylists {
	display: none;
}

.playlist-dropdown{
    display: inline !important;
}

#playlistKeywordGroup {
	width: 100%;
}

#playlistKeyword {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#showAllPlaylists, #showMyPlaylists {
    line-height: 24px;
}

.whichPlaylistsGroup {
    min-width: 181px;
}

#showMyPlaylists {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.playlistOption {
	color: #333 !important;
}

.playlistOptionsDropdown {
	top: 100% !important;
	padding: 0 !important;
}

.playlistPlayer {
	margin-bottom: 10px;
}

.draggable-col {
	cursor: move;
	width: 50px;
	padding-right: 0 !important;
}

.editplaylist #title {
	width: 100%;
}

.saveOrderButton {
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 4px;
}

/* ALBUM PAGE */

.cap .title {
    font-size: 28px;
	/* new color for album title*/
	color: #f6c167;
	line-height: 32px;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 48px;
    font-weight: 400;
}

.cap .artist-name {
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin:0;
    font-weight: 400;
}

.artist-name a{
    color: #F47E00;

}
.artist-name a:hover, .artist-name a:focus{
    text-decoration: none;
}

.cap .sub-details .extra-info {
    margin-top: 4px;
    color: #616161;
    height: 16px;
}

/* RESPONSIVE */

@media (max-width: 767px){
    .artist-profile-image{
        margin-left: 0;
        margin-top: 0;
    }
    .artist-background-image-wrapper {
        height: 150px;
    }
    .material-card.artist-profile-image .image-wrapper {
        padding-top: 50%;
    }

    .whichPlaylistsGroup {
      margin-top: 10px;
  }

  .playPauseSongBtn {
    display: block;
}

}

@media (min-width: 768px){
    .artist-left-column{
        padding-left: 25px;
    }
}


.btn-success-outline {
    color: #5cb85c;
    background-color: transparent;
    background-image: none;
    border-color: #5cb85c;
}

.cap{
    margin: 0 0 32px;
}
.cap h1{
    margin: 0;
}

.cap .stars {
	margin-top: 5px;
}

.image-album{
    width: 100%;
}
.image-album-container{
    position: relative;
}
.image-song-container{
    position: relative;
}

/* OPTIONAL CARD */

.optional-card{
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    background-color: white;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 2px;
    cursor: default;
    vertical-align: top;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
    transition: box-shadow 0.28s cubic-bezier(0.4,0,0.2,1);
}

.optional-card .table{
    margin-bottom: 0;
    table-layout: fixed;
}

.optional-card .table>tbody>tr:first-child>td {
    border-top: none;
}

.optional-card.details {
    padding: 16px;
    position: relative;
    white-space: normal;
}

/* Facebook FB comments */

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
  min-width: 100% !important;
  width: 100% !important;
}

/* PLAYLISTS MODULE */

.playlistModuleTitle {
    margin-bottom: 15px;
}

.playlistModuleTitle a, .playlistModuleTitle a:hover {
    text-decoration: none;
    color: #333;
}

.noItemsInPlaylist {
    padding: 20px 15px;
    display: none;
}

.swapPlaylistDropdown {
    top: 50px;
}

.input-group-btn.noPaddingGroup {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}