body {
    overflow-x: hidden;
    width:100%;
 	height:100%;
 	min-height:100%;
}

 html
 {
 	width:100%;
 	height:100%;
 	min-height:100%;
 }

#wrapper
{
	width: 100%;
	height: 100%;
}

.top-nav
{
	position: fixed;
    z-index:2;
    top: 0;
    width: 100%;
    height:40px;
    margin: 0;
    padding: 0 15px;    
    background-color: white;
    border-bottom: 1px solid #ccc;
}

#sidebar-wrapper a, #sidebar-wrapper h3{
	-webkit-transition : opacity 0.1s;
    transition : opacity 0.1s;    
    text-decoration: none;
	color: #d0cccc;	
}
/* Sidebar Styles */

#sidebar-wrapper
{
    z-index: 1;
    position: fixed;
	width:40px;
	height:100%;
	display: inline-block;
	
	-webkit-transition : width 0.1s;
    transition : width 0.1s;    
    background-color: #232323;
}
li {
	list-style: none;
	padding:10px;
}

#sidebar-wrapper.toggled 
{
	
	width:250px;
}

#waveform-box
{
	left:40px;
	padding-right: 40px;	
    -webkit-transition : all 0.1s;
    transition : all 0.1s;
}
.table.entrys
{
	left:250px;
	padding-right: 250px;
	-webkit-transition : left 1s;
    transition : left 1s;
}

#waveform-box.toggled, .table.entrys.toggled
{
	left:250px;
	padding-right: 250px;
}

.sidebar-nav {
    position: fixed;
    top: 40px;
    height:100%;
    width: 40px;
    color: #696565;
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-transition : width 1s;
    transition : width 1s;
}

/*dropdown css for menu button in artist page and more*/
 .dropdown{
     display: inline-block
 }

 .dropdown-content
 {
     display: none;
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
 }

 .dropdown-content a:hover
 {
     background-color: #f1f1f1;

 }

 .dropdown:hover .dropdown-content
 {
     display: block;

 }


 #sidebar-wrapper.toggled .menu-text
 {
     opacity: 1;
     display:block;
 }

 .menu-text
 {
     opacity: 0;
     display:none;

 }


 #sidebar-wrapper .sidebar-nav .sub-menu ,  #sidebar-wrapper .sidebar-nav .has-submenu .glyphicon
 {
     display:none;
 }

 #sidebar-wrapper.toggled .sidebar-nav .sub-menu.toggled ,  #sidebar-wrapper.toggled .sidebar-nav .has-submenu .glyphicon
 {
     display:inline-block;
 }

.sidebar-nav li
{
	width:40px;
    min-height: 40px;
}

 #sidebar-wrapper.toggled .sidebar-nav li
 {
     width:250px;
     max-height: none;
     display:inline-block;
 }

 .sidebar-nav li a
 {
    visibility:hidden;
     display:none;

 }

 #sidebar-wrapper.toggled .sidebar-nav li a
 {
     visibility:visible;
     display:inline-block;;
 }

 .dropdown a{
	 text-decoration: none;
 }

#user-img
{
	border-radius: 50%;
	width:32px;
	border : 2px solid #a8a5a5;
	margin-right:5px;
}

 .contacts-wrapper
  {
	  position: fixed;
	  width: 0px;
	  height: 100%;
	  right: 0px;
	  top: 40px;
	  background-color: #232323;
	  color: #d0cccc;

	  -webkit-transition : all 0.1s;
	  transition : all 0.1s;
  }

 .contacts-wrapper.toggled{
	 width:150px;
 }

 .user_playlist
  {
	 position: fixed;
	 width: 0px;
	 height: 100%;
	 right: 0px;
	 top: 40px;
	 background-color: #232323;
     color: #d0cccc;

	 -webkit-transition : all 0.1s;
	 transition : all 0.1s;
  }

 .user_playlist.toggled{
	 width:150px;
 }

 .contacts-wrapper ul{
	 padding: 0px;
 }

 .contacts-wrapper img{
	 float:left;
 }

 #online-people
{
	width:32px;
	margin-right:5px;
}

#page-content-wrapper
{
	position:fixed;
	display: inline-block;
	width:98%;
	height:100%;
	top:40px;
    left:40px;
    overflow: scroll;

    z-index:0;

    -webkit-transition : left 0.02s;
    transition : left 0.2s;

    padding: 30px;
}
 #page-content-wrapper.toggled
 {
     left:250px;
 }


h1 {
	font-family: "Josefin Slab";
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.4px;
}
h3 {
	font-family: "Josefin Slab"!important;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 15.4px;
	padding-left:10px;
	border-bottom: 1px solid #696565;
}



.nav-search
{
	width:320px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 240px;
	margin-top: 0px;
}

 .nav-player
 {
     width: 35%;
     display: inline-block;
     vertical-align: middle;
     margin-left: 50px;
     margin-top: 0px;
     /*border: 1px solid blue;*/
 }

input[type="search"]
{
	background-color: #ececec;
	font-size:0.85em;
	padding:3px 6px;
}

.content
{
	margin:10px;
}

.widget-wrapper
{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

.widget
{
	/*max-width:312px;*/

	margin: 32px;
	display: inline-block;
	float: left;


    padding:5px!important;
}

/*

 .widget.col-md-6
 {
     max-width:30%;
 }
 .widget.col-md-10
 {
     max-width:50%;
 }

 .widget.col-md-12
 {
     max-width:80%;
 }
 */

.widget img
{
	width:128px; float: left; width: 34%;
}
.widget .amount {
	display: inline-block; padding-top: 10px; padding-left: 10px;  font-size:27px; font-weight: 900; width:56%
}
.widget .description
{
	padding-top: 10px; padding-left: 119px; font-size:20px; font-weight:lighter;
}

.artist
{
    padding:20px;
    border:1px solid lightgrey;
    cursor: pointer;
}

.recognize_segment_plugin .result
{
    padding-left: 20px;
    background: #232323;
    color: white;
    position: absolute;
    right: 40px;
    z-index: -1;
    border-bottom-left-radius: 10px;
}


body {
  background: #454a59;
}

.pulsating-circle {
	z-index:10000;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;
}
.pulsating-circle:before {
  content: '';
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 45px;
  background-color: #01a4e9;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
            transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}
@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}



.badge-num {
  box-sizing:border-box;
  font-family: 'Trebuchet MS', sans-serif;
  background: #0099FF;
  cursor:default;
  border-radius: 50%;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
  height: 24px;
  width: 24px;
  line-height:1.2em;
  top:0px;  
  border:2px solid #fff;
  position: absolute;
  text-align: center;
  
  box-shadow: 1px 1px 5px rgba(0,0,0, .2);
  animation: pulse 1.5s 1;
  z-index:10000;
}
.badge-num:after {
  content: '';
  position: absolute;
  top:-2px;
  left:-2px;
  border:2px solid rgba(0,155,243,.5);
  opacity:0;
  border-radius: 50%;
  width:100%;
  height:100%;
  animation: sonar 1.5s 1;
}
@keyframes sonar { 
  0% {transform: scale(.9); opacity:1;}
  100% {transform: scale(2);opacity: 0;}
}
@keyframes pulse {
  0% {transform: scale(1);}
  20% {transform: scale(1.4); } 
  50% {transform: scale(.9);} 
  80% {transform: scale(1.2);} 
  100% {transform: scale(1);}
}
#badge-envelope :before {
  font-size:45px;
  text-decoration: none;
}
.icon-hover {
  color: fade(white, 40%);
  transition: color 500ms ease;
  cursor: pointer;
}

.icon-hover:hover {
    color: fade(white, 70%);
}

#badge
{
  right: 172px;
}

#badge2
{
  right: 142px;
}