@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

* { margin:auto; padding:auto;}
body { font-family: 'Droid Sans', sans-serif; font-size:14px; }
.header { width:1140px; margin:auto; }
.container { width:1140px; height:auto; margin:auto; }
.nav2 { width:745px; height:50px;background: #163a84; float:left; }
.nav2 ul { list-style-type:none; }
.nav2 ul li a { float:left; line-height:50px; padding:0 8px 0 8px; margin-right:30px; text-decoration:none; color:#fff; }
.nav2 ul li a:hover { background:#007bad; color:#FFF; }
.nav2 ul li a.active { background:#007bad; color:#FFF; }

.dropdown { width:195px; height:auto; float:right;position: absolute; display: inline-block; }

dropdown{ height:50px; }
.arrow { background:url(images/arrow.png) no-repeat; }
.username { height: 20px; display: inline-block; float: right; margin-top: 17px; margin-right: 50px; }
.user-photo { width:50px; height:50px; border-radius:50%; border:1px solid #999; }
dropdown label, dropdown ul li{
  display: block;
  background: #dcdcdc;
  padding: 15px 20px;
  border-bottom:#BBB solid 1px;
}
dropdown label:hover, dropdown ul li:hover{
  /**background: #c8c6c6;**/
  /**color:#000;**/
  cursor: pointer;
}
dropdown label{
  color: #fff;
  position: relative;
  z-index: 2;
  height:20px;
  background: #163a84 !Important;
}
dropdown input{
  display: none;
}
dropdown input ~ ul{
  position: relative;
  visibility: hidden;
  opacity: 0;
  top: -20px;
  z-index: 1;
}
dropdown input:checked + label{
 background: #dcdcdc;  
  /**color:#000;**/
}

dropdown input:checked ~ ul{
  visibility: visible;
  opacity: 1;
  top:-6px;
  margin-left:0px;
}
dropdown ul li {background: #163a84 !important;}
.animate a {color:#fff;}
#label-tab-drop span.username{color:#fff;}
$colors: #E74C3C, #0072B5, #2C3E50;

@for $i from 1 through length($colors) {
  dropdown ul li:nth-child(#{$i}) {
    border-left: 4px solid nth($colors, $i);
    .fa{
      color: nth($colors, $i);
    }
    &:hover {
        background: nth($colors, $i);
        color: white;
      .fa{
        color: white; 
      }
    }
  }
}

.animate{
  -webkit-transition: height .3s;
  -moz-transition: height .3s;
  -ms-transition: height .3s;
  -ms-transition: height .3s;
  transition: height .3s;  
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
}

.left { width:260px; overflow:hidden; float:left; margin-top:10px; }
.left24 { width:260px; overflow:hidden; background:#f5f4f4; float:left; margin-top:10px; }
.search { width:260px; height:60px; border-bottom:1px solid #bcbcc1; }
.search .search-box { margin-left:10px; margin-top:10px; height:32px; width:205px; border:#999 solid 1px; background:url('images/search-icon.png') no-repeat 6px; padding-left:30px; }

.search p { line-height:60px; padding-left:50px; color:#7f7c7c; }
.details-ver { background:url(images/details.png) no-repeat 15px; }
.feedback { background:url(images/feedback.png) no-repeat 15px; }
.track-de { background:url(images/track-de.png) no-repeat 15px; }
.location { background:url(images/location.png) no-repeat 15px; }
.recommo { background:url(images/recommo.png) no-repeat 15px; }
.search:hover { background:#e7e6e7; cursor:pointer; }



.right {overflow:hidden;}
.song-suggestions { width:440px; height:40px; border:#d6d6d6 solid 1px; padding-left:15px; color:#007bad; font-size:16px; }
.count-song { width:425px; height:auto; }
.count-song .first { width:140px; height:auto; float:left; text-align:center; color:#615f5f; }
.count-song .second { width:140px; height:auto; float:right; color:#615f5f; }
.red-text { color:#ed6768; font-size:32px; font-family: 'Open Sans', sans-serif; font-weight:300; }
.blue { color:#007bad; font-size:32px; font-family: 'Open Sans', sans-serif; font-weight:300; }
.gray { color:#494949; font-size:32px; font-family: 'Open Sans', sans-serif; font-weight:300; }

.graph { width:665px; height:auto; }
.graph .top-down { width:325px; height:190px; float:left; border:1px solid #d6d6d6; border-radius:4px; margin-bottom:20px; }
.graph .top-down h2 { line-height:28px; margin-left:5px; margin-right:5px; border-bottom:1px solid #d6d6d6; padding-left:10px; font-size:14px; font-weight:normal; color:#686666; text-align:left; }
.graph .listenvsd { width:325px; height:190px; float:right; border:1px solid #d6d6d6; border-radius:4px; margin-bottom:20px; }
.graph .listenvsd h2 { line-height:28px; margin-left:5px; margin-right:5px; border-bottom:1px solid #d6d6d6; padding-left:10px; font-size:14px; font-weight:normal; color:#686666; text-align:left; }

.realtime { width:661px; height:200px; border:1px solid #d6d6d6; border-radius:4px; }
.clear { clear:both; }
.footer { width:940px; height:auto; margin:auto; background:url(images/Footer.jpg) no-repeat; }

.assign-artist-form { width:500px; overflow:hidden; margin:auto; margin-top:10px; }
.artist-suggestions { width:350px; height:38px; border:#d6d6d6 solid 1px; padding-left:15px; color:#007bad; font-size:16px; }
.assign-btn { background:#056c97; color: #FFF; height: 46px; margin-left: -5px; width: 100px; border: medium none; font-size:15px; }
.textfield { width:250px; height:30px; border:1px solid #d6d6d6; }
.select { width:265px; height:40px; border:1px solid #989898; padding-top: 9px; background-color: #F4F4F4; }
.textarea { width:250px; height:80px; border:1px solid #989898; }
.assign-artist-form table { color:#706d6d; }
.save-btn { background:#056c97; color: #FFF; height:35px; width:80px; border:medium none; font-size:15px; }
.cancel-btn { background:#d1d0d0; color: #FFF; height:35px; width:80px; border:medium none; font-size:15px; color:#3e3d3d; }


/* left side panel */

.blue-bg { background:#007bae; }
.red-bg { background:#b23921; }
.orange-bg { background:#b0ae01; }
.top-downloads { width:256px; height:250px; border:#d1d1d1 solid 1px; margin-top:15px; }
.top-downloads .heading2 { height:40px; color:#FFF; font-weight:normal; padding-left:10px; font-size:15px; }
.top-downloads .heading2 .title345 { width:50%; float:left; }
.top-downloads .heading2 .title345 p { line-height:40px; }
.top-downloads .heading2 .filter45 { width:50%; float:right; }
.small-filter { width: 70px; margin-top: 6px; margin-left: 49px; }
.small-filter2 {
    width: 70px;
    margin-left: 49px;
}
.all-songs { width:256px; height:200px; overflow-y: scroll; }
.song-list { line-height:20px; height:50px; padding-top:5px; border-bottom:#CCC solid 1px; padding-left:10px; }
.song-list-last { line-height:20px; height:50px; padding-top:5px; padding-left:10px; }
.small-size-song { font-size:13px; }

.waiting-for-approval { width:325px; overflow:hidden; float:left; border:#cccccc solid 1px; padding-bottom:10px; }
.title-approval { height:40px; background:#d1d0d0; line-height:40px; padding-left:10px; }
.title-approval .name43 { width:60%; float:left; }
.title-approval .filter43 { width:40%; float:right; }

.assign-artist { width:325px; overflow:hidden; float:right; border:#cccccc solid 1px; padding-bottom:10px; }
.assign-artist .profile1 { width:70px; height:auto; float:left; margin:5px; }
.username42 { margin-top:5px; padding-right:15px; color: #FFF; height:20px; padding-top:2px; padding-bottom:2px; border:medium none; font-size:15px; border-radius:4px; font-size:12px; background:url('images/cancel.png') no-repeat 50px center #056C97; }

/* //////////////////////////// Upload Page Style //////////////////////////// */

.upload-tracks23 { width:665px; overflow:hidden; margin-top:18px; }
.upload-tracks23 p { font-size:14px; line-height:20px; }
.upload-tracks23 ul {}
.upload-tracks23 ul li { font-size:14px; }
.packages-1 { width:150px; height:100px; background:#0e82b8; float:left; margin-right:15px; border-radius:4px; }
.packages-1:hover { cursor:pointer; }
.pack-name-title { height:40px; line-height:40px; text-align:center; color:#FFF; border-bottom:#2d87c4 solid 1px; }
.pack-name-cost { height:30px; line-height:30px; text-align:center; color:#FFF; margin-top:15px; background:#2d87c4; width:100px; border-radius:13px; }
.packages-2 { width:152px; height:100px; background:#0e82b8; float:left; }


.top-menu-navbar1{
    background-color: #737373;
    height: 50px;
    width: 100%;
}


.nav2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #737373;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    float: left;
    height: 50px;
    width: 745px;
}


.dropdown label{background-color: #737373 !important;}


td.listen_td.not_login { overflow: visible !important; }
#artists-tracks-list .artist-track-list-table .track-col a.play.donotallow_ i.fa.fa-play { opacity: 0.3;}
.ui-widget-content.jqgrow a.play.donotallow_,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_{cursor: not-allowed; position: relative;}
.listen_td.not_login a.play {
    position: relative;
    pointer-events: none;
    /*opacity: 0.35;*/
}
.ui-widget-content.jqgrow a.play.donotallow_ .player-play-btn,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_ .player-play-btn {opacity: 0.35; }
.ui-widget-content.jqgrow a.play.donotallow_:hover,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_:hover{ text-decoration: none; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85); }
.ui-widget-content.jqgrow a.play.donotallow_ span.custom_tooltip,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_ span.custom_tooltip { width: 150px; transition: all 0.5s ease 0s; color: #fff; font-size: 12px; display: none !important; position: absolute; top: -50px; background: #000; padding: 3px 20px; border-radius: 6px; opacity: 1 !important; z-index: 9999; left: -30px; overflow: visible !important; }
.ui-widget-content.jqgrow a.play.donotallow_:hover span.custom_tooltip,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_:hover span.custom_tooltip { display: block !important;}
.ui-widget-content.jqgrow a.play.donotallow_ span.custom_tooltip::before,
.artistdetail-white-bg .artists-tracks-list a.play.donotallow_ span.custom_tooltip::before
{ content:''; height: 8px; width: 8px; background: #000; position: absolute; bottom: -4px; left: 25%; opacity: 1; transform: rotate(45deg) }


.artistdetail-white-bg .artists-tracks-list span.custom_tooltip { width: 180px !important; left: 0 !important; padding: 0 !important; top: -40px !important; }
.artistdetail-white-bg .artists-tracks-list span.custom_tooltip::before{ left: 10% !important;}
td.more_td.remove_td { display: none; }
td.listen_td.not_login a::after {
    content: 'Please Sign in to play this song.';
    position: absolute;
    top: -50px;
    width: 200px;
    left: -30px;
    background:rgba(0, 0, 0, 0.78);
    color: #fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding: 3px;
    opacity: 1 !important;
    transition: all 0.5s ease 0s;
    visibility: hidden !important;
    font-size:12px;
}


td.listen_td.not_login a::before {
    content:''; height: 8px; width: 8px; background: #000; position: absolute; top: -30px; left: 25%; opacity: 1; transform: rotate(45deg); visibility: hidden; transition: all 0.3s ease 0s;
}
td.listen_td.not_login a {
    position: relative;
}

td.listen_td.not_login:hover a::after, td.listen_td.not_login:hover a::before{
    visibility: visible !important;
}