@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300);
@import url('font-awesome.min.css');
@import url('bootstrap.css');

/* Theme Style */
@import url('style.css');

/* Responsive Style */
@import url('responsive.css');

/* Shortcuts Css Codes */
@import url('shortcuts.css');

/* ================================================
Plugin Css
================================================ */
/* Awesome Bootstrap Checkbox */
@import url('plugin/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css');

/* Bootstrap Select */
@import url('plugin/bootstrap-select/bootstrap-select.css');

/* Bootstrap Select */
@import url('plugin/bootstrap-toggle/bootstrap-toggle.min.css');

/* Bootstrap wysihtml5 */
@import url('plugin/bootstrap-wysihtml5/bootstrap-wysihtml5.css');

/* Summernote */
@import url('plugin/summernote/summernote.css');
@import url('plugin/summernote/summernote-bs3.css');

/* Sweet Alert */
@import url('plugin/sweet-alert/sweet-alert.css');

/* Data Tables */
@import url('plugin/datatables/datatables.css');

/* Chartist */
@import url('plugin/chartist/chartist.min.css');

/* Rickshaw */
@import url('plugin/rickshaw/rickshaw.css');
@import url('plugin/rickshaw/detail.css');
@import url('plugin/rickshaw/graph.css');
@import url('plugin/rickshaw/legend.css');

/* Date Range Picker */
@import url('plugin/date-range-picker/daterangepicker-bs3.css');

/* Full Calendar */
@import url('plugin/fullcalendar/fullcalendar.css');

.tracklist .line { width:100%; border-bottom: 1px dashed rgb(224, 224, 224); padding-top:5px; padding-bottom:5px; }
.trackdetail {width:48%;display:inline-block; color:#58666e; opacity: 0.8;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.tracktitle {font-family: 'Montserrat', sans-serif;font-size: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.title { font-family: 'Montserrat', sans-serif;font-size: 15px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; }
.detail { font-size: 11px; color:rgb(175, 174, 174);white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.album-title { font-size: 14px;}
 .album-artist {  font-size: 10px; opacity: 0.8;}
 .album-artist, .album-title { font-family: 'Montserrat', sans-serif; color: #58666e;white-space: nowrap; }
 .album-text { display:inline-block;margin:5px;margin-top:10px;position: relative;left: 95px; }
.album {  background-color: #ffffff; height:90px;display: inline-block; width:32%; overflow:hidden;margin:0px!important} 
.album p { padding: 0px; margin:0px;}
.album button{ margin-right:3px;}
.album a { color:black;}
.album:hover {  background-color: #eeeeee; }
.album img {  background-image: url("/app/img/cover.png");background-size: cover;height:75px; width:75px; position: absolute;margin-top:8px;margin-left:8px; }
@media only screen and (max-width: 1024px) { 
    .album{width:48%; } 
    }
@media only screen and (max-width: 600px) {
.album-title { font-size: 14px;padding:5px; }
.album-artist { font-size: 11px;}
.album{width:98%; margin-top: 1px; margin-bottom:2px;}
}
.dot { height: 8px;
  width: 8px;
  border-radius: 60%;
  margin-right:2px;
  display: inline-block; }