body{  background-color: #E2DFDA; font-family: 'Roboto', sans-serif; color: #424242; }
.white-bg{ background-color: #fff; padding: 20px;}

/***************************************/
/************ PLAYER STYLES ************/
/***************************************/
.sm2-main-controls a{ cursor: pointer; }

/***************************************/
/************ HEADER STYLES ************/
/***************************************/
.colorful-header{  height: 8px;  }
.colorful-header > div{  width: 25%;  float: left;  height: 100%;  }
.colorful-header > div:nth-child(1){  background-color: #DE5765;  }
.colorful-header > div:nth-child(2){  background-color: #49BF85;  }
.colorful-header > div:nth-child(3){  background-color: #00ABD6;  }
.colorful-header > div:nth-child(4){  background-color: #DE578D;  }

.navbar-white{ background-color: #fff; border-color: #B4B4B4; border-radius: 0; color: #1E1E1E; }
.navbar-brand{ color: #424242;  font-weight: bold; font-size: 24px; }
.navbar-brand:hover{
    -webkit-animation: logo_color_change 2s infinite alternate;  -moz-animation: logo_color_change 2s infinite alternate;
    -o-animation: logo_color_change 2s infinite alternate;  animation: logo_color_change 2s infinite alternate;
}
.navbar-brand:active{
    -webkit-animation: logo_color_change 2s infinite alternate;  -moz-animation: logo_color_change 2s infinite alternate;
    -o-animation: logo_color_change 2s infinite alternate;  animation: logo_color_change 2s infinite alternate;
}
.navbar-brand:focus{
    -webkit-animation: logo_color_change 2s infinite alternate;  -moz-animation: logo_color_change 2s infinite alternate;
    -o-animation: logo_color_change 2s infinite alternate;  animation: logo_color_change 2s infinite alternate;
}
.navbar-brand > i{ font-weight: normal; }
.navbar-brand > i:before{ font-size: 32px;  }
#euphonize-main-navbar > .navbar-icons li{ width: 70px;  text-align: center; }
#euphonize-main-navbar > .navbar-icons > li > a{ min-height: 56px; font-size: 18px;  color: #424242;  padding-top: 20px; transition: background-color 0.25s linear, color 0.25s linear; }
#euphonize-main-navbar > .navbar-icons > li > a > span{ display: none; font-size: 11px; }
#euphonize-main-navbar > .navbar-icons > li > a:hover > i{ display: none; font-size: 12px; }
#euphonize-main-navbar > .navbar-icons > li > a:hover > span{ display: block; }
#euphonize-main-navbar > .navbar-icons > li > a:hover{  background-color: #00ABD6; color: #fff; }
#euphonize-main-navbar > .navbar-icons > li > a:active{  background-color: #00ABD6; color: #fff; }
#euphonize-main-navbar > .navbar-icons > li > a:focus{  background-color: #00ABD6; color: #fff; }

#euphonize-main-navbar > .navbar-right > li > a{ min-height: 56px; padding-left: 20px; }
.nav-search-btn{ font-size: 24px; color: #424242; border-left: 1px solid #ccc; }
#euphonize-main-navbar > .navbar-right > li > a.nav-search-btn:hover{ background-color: transparent; color: #424242; }

#euphonize-main-navbar > .navbar-right > li > a{ min-height: 56px; padding-left: 20px; }
.nav-search-btn{ font-size: 24px; color: #424242; border-left: 1px solid #ccc; }
#euphonize-main-navbar > .navbar-right > li > a.nav-search-btn:hover{ background-color: transparent; color: #424242; }

#euphonize-main-navbar > .navbar-right .navbar-btn{ margin-top: 12px;  margin-right: 10px;  min-height: 20px;  padding: 6px 15px;}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    margin-left: 0;
}
li.navbar-profile > a{ padding-bottom: 0; color: #424242; }
.navbar-profile > a > img{  width: 32px; height: 32px; margin-right: 5px; border: 1px solid #E2E2E2; }
li.navbar-profile > a:hover{ background: none; }
li.navbar-profile > .dropdown-menu{ padding: 0; }
li.navbar-profile > .dropdown-menu > li > a{ padding: 10px 20px; }
li.navbar-profile > .dropdown-menu > li > a:hover{ background-color: #424242; color: #fff; }
li.navbar-profile > .dropdown-menu > li > a > .fa{ margin-right: 8px; }
li.notification-dropdown > a{ color: #424242;  padding-top: 20px;  padding-bottom: 0;  width: 60px;  position: relative; }
li.notification-dropdown > .fa{ position: absolute;  bottom: 10px;  right: 15px;  color: #DE5765; }
@media only screen and (max-width: 767px) {
    #euphonize-main-navbar > .navbar-icons li{ width: 100%; }
    #euphonize-main-navbar > .navbar-icons li > a{ color: #424242; }
    #euphonize-main-navbar > .navbar-icons li > a > i{ display: none;  }
    #euphonize-main-navbar > .navbar-icons li > a > span{ display: block; }
    #euphonize-main-navbar > .navbar-right > li > a{ width: 100%; text-align: center; }
}

/***************************************/
/************ FOOTER STYLES ************/
/***************************************/
footer{ margin-top: 10px; width: 100%; margin-bottom: 50px; }

/***************************************/
/************ REGISTER & LOGIN *********/
/***************************************/

.register-ctr{ position: relative; background-color: #fff; overflow: hidden; padding: 25px; }
.register-form > .form-group{ position: relative; }
.register-form > .form-group > .fa { position: absolute;  top: 35px;  right: 15px; color: #A5A5A5; }

.login-ctr{ position: relative; background-color: #fff; overflow: hidden; padding: 25px; }
.login-form > .form-group{ position: relative; }
.login-form > .form-group > .fa { position: absolute;  top: 35px;  right: 15px; color: #A5A5A5; }

/***************************************/
/************ PROFILE ******************/
/***************************************/
.profileHeader{ position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; height: 350px; }
.profileHeaderOverlay{ height: 350px; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.35); width: 100%; }
.profileHeader > .img-circle{
    border: 3px solid; position: absolute; width: 128px; height: 128px; left: 0; right: 0; margin: 0 auto; top: 30px;
    -webkit-animation: border_color_change 2s infinite alternate;  -moz-animation: border_color_change 2s infinite alternate;
    -o-animation: border_color_change 2s infinite alternate;  animation: border_color_change 2s infinite alternate;
}
.profileHeaderInfo{
    text-align: center;  color: #fff;  position: absolute;  left: 0;  right: 0;  margin: 0 auto;
    top: 155px;  max-width: 100%; width: 350px;
}
.profileHeaderBasicDetails > .img-responsive{ display: inline-block; }
.profileSocialIcons{ margin-top: 25px; }
.profileSocialIcons > a{
    color: #fff;
    padding: 3px 5px;
    margin-right: 10px;
    text-align: center;
}
.profileSocialIcons > a:hover{
    -webkit-animation: logo_color_change 2s infinite alternate;  -moz-animation: logo_color_change 2s infinite alternate;
    -o-animation: logo_color_change 2s infinite alternate;  animation: logo_color_change 2s infinite alternate;
}
.profileNav{ display: table; table-layout: fixed; width: 100%;  }
.profileNav > a{
    display: table-cell; padding: 10px;  text-align: center;  color: #fff;
    background-color: #0B1318;  text-decoration: none; transition: background-color 0.2s linear;
}
.profileNav > a:hover{ background-color: #1FAE5B; }
.profileNav > a.active{ background-color: #1FAE5B; }
.btn-follow{ outline: none; position: absolute;  border-radius: 50%;  left: 25px;  top: -70px; border-color: transparent;  color: #424242; height: 40px;  width: 40px;  text-align: center; }
.btn-flag{ outline: none; position: absolute;  border-radius: 50%;  right: 25px;  top: -70px; padding-top: 10px; border-color: #fff;  color: #fff; background-color: transparent; height: 40px;  width: 40px;  text-align: center; }
.btn-flag:hover{ color: #424242; background-color: #fff; }
.btn-flag:active{ color: #424242; background-color: #fff; }
.btn-flag:focus{ color: #424242; background-color: #fff; }
a.userFollow{ word-wrap: break-word; }
a.userFollow > .img-responsive{ width: 100%; height: 150px; }
a.userFollow > h4{ color: #424242; text-decoration: none; }
a.userFollow:hover{ color: #424242; text-decoration: none; }
.pro-icon{
    -webkit-animation: logo_color_change 2s infinite alternate;  -moz-animation: logo_color_change 2s infinite alternate;
    -o-animation: logo_color_change 2s infinite alternate;  animation: logo_color_change 2s infinite alternate;
}
.btn-facebook, .btn-facebook:hover, .btn-facebook:focus{
    background-color: #395693;
    color: #fff;
}
/***************************************/
/************ INBOX ********************/
/***************************************/
.inbox > tbody > tr > td{ padding :15px; cursor: pointer; }
.msgCtr{ border: 1px solid #ccc; border-radius: 5px; height: 400px; max-height: 400px; overflow-y: scroll; margin-bottom: 5px; }
.emptyMessage{ text-align: center; color: #737373; font-weight: 300; font-style: italic; margin: 50px auto; width: 80%; }
.userMessageCtr { padding: 10px; border-bottom: 1px solid #ccc; }
.userMessageUsername { font-weight: bold; }
.userMessageCtr > p{ margin-top: 5px; }

/***************************************/
/************ ALERTS *******************/
/***************************************/
.notification-dropdown > .dropdown-menu{ border-top: 5px solid #00ABD6; min-width: 360px; overflow-y: scroll; max-height: 500px; }
.notification-dropdown > .dropdown-menu > li{ overflow: hidden; margin-bottom: 10px;  }
.notification-img{ width: 48px;  float: left;  margin-left: 5px; }
.notification-details{ margin-left: 60px; font-size: 13px; margin-top: 5px; }
.notification-details > span{ color: #A6A6A6; }

/***************************************/
/************ TRACKS *******************/
/***************************************/
.trackCtr{  overflow:hidden; margin-bottom: 25px;  padding-bottom: 20px;  border-bottom: 1px solid #ccc; }
.trackImg{ float: left; min-width: 100px; width: 100px; }
.trackImg .img-rounded{ width: 100%; display: block; margin: 0 auto; }
.trackInfoCtr{  padding-left: 20px; overflow: hidden; }
h3.trackTitle{ margin-top: 5px;  font-weight: bold;  font-size: 18px; }
h3.trackTitle > a{ color: #424242; text-decoration: none; }
h4.trackUser{ font-size: 13px;  font-weight: 300; }
h4.trackUser > a{ color: #424242; text-decoration: none; }
.trackDatePosted{ font-size: 14px; font-weight: bold; padding-top: 5px; }
.trackBtns{ margin-top: 15px; }
.trackBtns > .btn{ font-size: 12px; }
.latestCtr{ border-radius: 8px; min-height: 150px; border-bottom: 1px solid #DFDFDF;  border-left: 1px solid #ECECEC;  border-right: 1px solid #ECECEC; border-top: 5px solid; }


/***************************************/
/************ COMMENTS *****************/
/***************************************/
.singleComment{ width: 100%; overflow: hidden; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ccc; }
.singleCommentImg{ float: left; width: 10%; min-width: 75px; padding: 0 10px; }
.singleCommentImg > .img-circle{ width: 100%; }
.singleCommentMain{ width: 100%; }


/***************************************/
/************ PLAYLIST *****************/
/***************************************/
.playlistItem{ padding: 10px; margin-bottom: 10px; border-radius: 3px; cursor: pointer; }
.playlistItem:hover{ background-color: #49BF85; color: #fff; }
.userPlaylistCtr{ padding :10px; margin-bottom: 10px; }
.userPlaylistCtr > .btn{ margin-right: 5px; }

/***************************************/
/************ UPLOAD *******************/
/***************************************/
#trackDropzone{
    padding: 50px;  border: 3px dashed #ccc;  border-radius: 5px;  text-align: center;
    cursor: pointer;  transition: background-color 0.3s ease-in, color 0.3s linear, border 0.3s linear;
}
#trackDropzone > input[type=file]{ display: none; }
#trackDropzone > .fa{ font-size: 64px; }
#trackDropzone:hover {  background-color: #424242;  color: #fff;  border-color: transparent;  }
#trackPreviewCtr{ margin-top: 25px; }
.trackOverview{  padding: 10px;  margin-bottom: 15px;  border: 1px dashed #ccc;  background-color: #f4f4f4;  border-radius: 5px;  }
.license-group > a{ transition: background-color 0.3s ease-in, color 0.3s linear; }
.license-group > a:hover{ background-color: #49BF85;  color: #fff; }
.license-group > a:hover > h4.list-group-item-heading{ color: #fff; }
.license-group > a.license-item-active{ background-color: #49BF85;  color: #fff; }
.license-group > a.license-item-active > h4.list-group-item-heading{ color: #fff; }

/***************************************/
/************ PLAYLISTS ****************/
/***************************************/
.playlistSearchCtr{ padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 15px; }
.playlistSearchCtr > h4{ margin: 0; }
.playlistSearchTrackCount{ font-size: 14px;  color: #5E5D5D;  font-weight: 300;  font-style: italic;  }
.playlistSearchDetails{ font-size: 12px; }
.playlistSearchBtnCtr{ margin-top: 5px; }
.playlistSearchCtr > h4 > a{ color: #424242; text-decoration: none; }

/***************************************/
/**************** PRO ******************/
/***************************************/
.pricingTable > thead > tr > td{
    background-color: #00ABD6;  color: #fff;  font-size: 22px;  text-align: center;  padding: 25px 10px;
}
.pricingTable > tbody > tr > td{
    padding: 15px 0; font-weight: bold; text-align: center;
}
.pricingTable > tbody > tr > td:last-child{
    color: #49BF85;
}
/***************************************/
/************ UI ELEMENTS **************/
/***************************************/
.top-push-med{ margin-top: 50px; }
.btn-red{ background-color: #DE5765; color: #fff; border-bottom: 5px solid #DE5765; padding-top: 8px; transition: border-bottom .5s ease-in-out }
.btn-red:hover{ border-bottom: 5px solid #931824; color: #fff; }
.fb-hover:hover{ color: #3B579D; }
.twitter-hover:hover{ color: #28AAE1; }
.gp-hover:hover{ color: #DA4835; }
.btn-blue{ background-color: #00ABD6; color: #fff; }
.btn-blue:hover{ background-color: #0482A2 !important; color: #fff !important; }
.btn-blue:active{ background-color: #0482A2 !important; color: #fff !important; }
.btn-blue:focus{ background-color: #0482A2 !important; color: #fff !important; }
.btn-green{ background-color: #49BF85; color: #fff; }
.btn-green:hover{ background-color: #49BF85; color: #fff; }
.btn-green:active{ background-color: #49BF85; color: #fff; }
.btn-green:focus{ background-color: #49BF85; color: #fff; }
.btn-darkblue{ background-color: #014A5D; color: #fff; }
.btn-darkblue:active{ background-color: #014A5D; color: #fff; }
.btn-darkblue:focus{ background-color: #014A5D; color: #fff; }
.red-header{ border-left: 10px solid #DE5765; padding-left: 25px; }
.blue-header{ border-left: 10px solid #28A9E0; padding-left: 25px; }
.green-header{ border-left: 10px solid #49BF85; padding-left: 25px; }
.pho-tabs{ display: table; width: 100%; table-layout: fixed; padding: 0; background-color: #FBFAFA; }
.pho-tabs > li{ display: table-cell; padding: 15px; border: 1px solid #D7D7D7; text-align: center; cursor: pointer; }
.pho-tabs > li.active{ background-color: #49BF85; color: #fff; }
.pho-tab-panel{ display: none; }
.pho-tabpanels-ctr > .active{ display: block; }
.red-top-border{  border-top-color: #DE5765;  }
.green-top-border{  border-top-color: #49BF85;  }
.blue-top-border{  border-top-color: #00ABD6;  }
.pink-top-border{  border-top-color: #DE578D;  }
.genre-list-group .list-group-item{ border: none; background-color: transparent; transition: background-color 0.25s linear, color 0.25s linear; }
.genre-list-group a.list-group-item:hover{ background-color: #DE578D; color: #fff; }
.genre-list-group > a.active{ background-color: #DE578D; color: #fff; }
.genre-list-group > a.active:focus{ background-color: #DE578D; color: #fff; }
.orange{ color: #F58C65; }
.socialMediaItem[href^="http://facebook"]{ color: #395693 }
.socialMediaItem[href^="http://twitter"]{ color: #00acee }
.socialMediaItem[href^="http://youtube"]{ color: #cd332d }
.socialMediaItem[href^="http://instagram"]{ color: #3a688f }
.socialMediaItem[href^="http://plus.google"]{ color: #df4a32 }
.socialMediaItem[href^="http://pinterest"]{ color: #cb2027 }
.socialMediaItem{ display: block; width: 33%; padding: 20px 10px; margin-bottom: 10px; float: left;color:#424242;text-decoration: none;transition: all 0.25s linear; }
.socialMediaItem:hover{ color: #fff; background-color: #424242; }
.socialMediaItem:active{ color: #fff; background-color: #424242; }
.socialMediaItem:focus{ color: #fff; background-color: #424242; }
.btn-default:active,.btn-default:focus,.btn-flag:active,.btn-focus{
    outline: none;
}
ul.social-media-icons{ text-align: center; padding: 0; width: 100%; list-style-type: none; }
ul.social-media-icons > li{   line-height: 15px;  display: inline-block;  width: 30%; border: 1px solid #eee; background-color: #fff; transition: 0.3s all ease-in; }
ul.social-media-icons > li.facebook:hover{ background-color: #39599f; color: #fff; }
ul.social-media-icons > li.facebook:hover > a{ color: #fff; }
ul.social-media-icons > li.facebook:hover > a i{ background-color: #39599f; }
ul.social-media-icons > li.twitter:hover{ background-color: #45b0e3; color: #fff; }
ul.social-media-icons > li.twitter:hover > a{ color: #fff; }
ul.social-media-icons > li.twitter:hover > a i{ background-color: #45b0e3; }
ul.social-media-icons > li.google:hover{ background-color: #fa0101; color: #fff; }
ul.social-media-icons > li.google:hover > a{ color: #fff; }
ul.social-media-icons > li.google:hover > a i{ background-color: #fa0101; }
ul.social-media-icons > li.youtube:hover{ background-color: #cc181e; color: #fff; }
ul.social-media-icons > li.youtube:hover > a{ color: #fff; }
ul.social-media-icons > li.youtube:hover > a i{ background-color: #cc181e; }
ul.social-media-icons > li.soundcloud:hover{ background-color: #F76700; color: #fff; }
ul.social-media-icons > li.soundcloud:hover > a{ color: #fff; }
ul.social-media-icons > li.soundcloud:hover > a i{ background-color: #F76700; }
ul.social-media-icons > li.instagram:hover{ background-color: #517fa4; color: #fff; }
ul.social-media-icons > li.instagram:hover > a{ color: #fff; }
ul.social-media-icons > li.instagram:hover > a i{ background-color: #517fa4; }
ul.social-media-icons > li a{ color: #444; text-decoration: none; display: block; overflow: hidden; padding: 0 0 6px; }
ul.social-media-icons a i{
    font-size: 28px; margin: 8px auto; width: 50px; color: #FFF; height: 50px; line-height: 50px; transition: all 0.3s linear;
    display: block; text-align: center; background: #555; -webkit-border-radius: 50px; moz-border-radius: 50px; border-radius: 50px;
}
/***************************************/
/************ ANIMATIONS ***************/
/***************************************/
@-webkit-keyframes logo_color_change {
    0% { color: #DE5765; }
    33% { color: #49BF85; }
    66% { color: #00ABD6; }
    100% { color: #DE578D; }
}
@-moz-keyframes logo_color_change {
    0% { color: #DE5765; }
    33% { color: #49BF85; }
    66% { color: #00ABD6; }
    100% { color: #DE578D; }
}
@-ms-keyframes logo_color_change {
    0% { color: #DE5765; }
    33% { color: #49BF85; }
    66% { color: #00ABD6; }
    100% { color: #DE578D; }
}
@-o-keyframes logo_color_change {
    0% { color: #DE5765; }
    33% { color: #49BF85; }
    66% { color: #00ABD6; }
    100% { color: #DE578D; }
}
@keyframes logo_color_change {
    0% { color: #DE5765; }
    33% { color: #49BF85; }
    66% { color: #00ABD6; }
    100% { color: #DE578D; }
}
@-webkit-keyframes border_color_change {
    0% { border-color: #DE5765; }
    33% { border-color: #49BF85; }
    66% { border-color: #00ABD6; }
    100% { border-color: #DE578D; }
}
@-moz-keyframes border_color_change {
    0% { border-color: #DE5765; }
    33% { border-color: #49BF85; }
    66% { border-color: #00ABD6; }
    100% { border-color: #DE578D; }
}
@-ms-keyframes border_color_change {
    0% { border-color: #DE5765; }
    33% { border-color: #49BF85; }
    66% { border-color: #00ABD6; }
    100% { border-color: #DE578D; }
}
@-o-keyframes border_color_change {
    0% { border-color: #DE5765; }
    33% { border-color: #49BF85; }
    66% { border-color: #00ABD6; }
    100% { border-color: #DE578D; }
}
@keyframes border_color_change {
    0% { border-color: #DE5765; }
    33% { border-color: #49BF85; }
    66% { border-color: #00ABD6; }
    100% { border-color: #DE578D; }
}
/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.ui-view-container {
    position: relative;
    height: 65px;
}

[ui-view].ng-enter, [ui-view].ng-leave {
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

[ui-view].ng-enter {
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
    opacity: 0;
}

[ui-view].ng-enter-active {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

[ui-view].ng-leave {
    opacity: 1;
}

[ui-view].ng-leave-active {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
}