body
		{
		background-color: #f1f2f5;
		/* -webkit-user-select: auto; CRAZY SAFARI BUG (with contenteditable divs): https://bugs.webkit.org/show_bug.cgi?id=85469 */
		}
		
	.rotate90
		{
	    -webkit-transform: rotate(90deg);
	    -moz-transform: rotate(90deg);
	    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	    transition: .2s;
		}
		
	.highightedComment
		{
		border: 1px dotted #0F78B8;
		box-sizing: border-box;
		}
		
	.myNewCommentAvatar
		{
		border-radius:50%;
		margin-right: 10px; 
		height: 40px;
		width: 40px;
		display: block;
		}
		
	.notifyContainer
		{
		padding: 15px;
		}
		
	.notifyTable	
		{
		font-weight: 400;
		border-left: 1px solid #EEEEEE;
		border-right: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		border-top: 1px solid #EEEEEE;
		border-radius: 5px;
		}
		
	.commentReplyInset
		{
		padding-left: 50px !important;
		}
		 
	.commentMenu
		{
		top: -2px;
		right: 31px !important;
		width: 190px;
		}
		
	.slapCommentReplyContainer
		{
		margin:5px 0px 5px 0px;
		display: none;
		}
		
	.slapsSearch
		{
		width: 160px;
		border: none;
		border-radius: 3px; 
		background: rgba(255,255,255,.15);
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0px 0px 0px 6px;
		font-weight: 400;
		height: 27px;
		line-height: 27px;
		white-space: nowrap;
		min-width: 0px;
		font-size: 14px;
		}
		
	.slapsSearch::placeholder
		{ /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: rgba(255,255,255,.5);
		opacity: 1; /* Firefox */
		}
		
	.atMentionDisplayName
		{
		font-weight: bold;
		font-size: 15px;
		}
		
	.atMentionUsername
		{
		font-weight: 400;
		font-size: 12px;
		margin-top: 5px;
		}
	
	.atMentionAvatar
		{
		height: 38px;
		width: 38px;
		border-radius: 50%;
		margin-right: 10px;
		background: #999999;
		}
		
	.atMentionContainer
		{
		padding: 5px;
		}
		
	.groupLeftScroll
		{
		position: absolute;
		left:0px;
		top: 0px;
		display: none;
		}

	.groupRightScroll
		{
		position: absolute;
		right:0px;
		top: 0px;
		display: none;
		}
		
	.groupCarouselContainer
		{
		position: relative;
		padding:0px 15px 0px 15px;
		box-sizing: border-box;
		margin-top: 15px;
		}
		
	.main-carousel
		{
		width: 100%;
		height: 100%;
		overflow-x: auto;
		display: flex;
		margin-bottom: 15px;
		box-sizing: border-box;
		}

	.main-carousel::-webkit-scrollbar {
	    width: 0px;
	    display: none;
	    background: transparent; /* make scrollbar transparent */
	}

	.carousel-cell
		{
		padding: 5px 15px 5px 15px;
		white-space: nowrap;
		box-sizing: border-box;
		font-weight: 400;
		border-radius: 50px;
		margin: 0px 2px 0px 0px;
		height: auto;
		background: #CCC;
		background: #FFFFFF;
		border:1px solid #CCCCCC;
		display: block;
	  -webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Old versions of Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome, Edge, Opera and Firefox */
		}

	.carousel-cell:hover
		{
		background: #FBFBFB;
		}

	.carousel-link, .carousel-link:visited {
		padding: 5px 15px 5px 15px;
		font-weight: 400;
		margin: 0px 2px 0px 0px;
		text-decoration: none;
		color: rgb(79, 80, 87);
	}

	.carousel-link:hover {
		border-radius: 50px;
		font-weight: 700;
		text-decoration: none;
	}

	.carousel-link i {
		margin-left: 0.25rem;
	}

	.carousel-scroll
		{
		padding: 5px 15px 5px 15px;
		box-sizing: border-box;
		font-weight: 400;
		display: block;
		background: #f1f2f5;
		border:1px solid #f1f2f5;
		cursor: pointer;
	  -webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Old versions of Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome, Edge, Opera and Firefox */
		}
		
	
	.carousel-cell.is-selected 
		{
		background: #0F78B8 !important;
		color: #FFFFFF !important;
		}
		
	.flickity-button:disabled
		{
		display: none;
		}
		
	.flickity-button, .flickity-button:hover 
		{
		background: #0F78B8;
		color: #FFFFFF;
		}
		
	.flickity-prev-next-button
		{
		width: 20px;
		height: 20px;
		}
		
	.flickity-prev-next-button.previous {
	}
	.flickity-prev-next-button.next {
	}
	
	.slapsBoxShadow
		{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.20);
		}
		
	.peopleRow
		{
		border-bottom: 1px solid #d8d8d8;
		padding:15px;
		font-weight: 400;
		line-height: 1.5em;
		}

	.peopleRow:hover, .groupRow:hover
		{
		background: rgba(15, 119, 184, 0.06);
		}
		
	.slapsBorderRadiusDesktop
		{
		border-radius: 5px !important;
		}
	
	.slapsMenuIcon
		{
		width: 25px;
		color: #999999;
		}
		
	.slapsPeopleList
		{
		display: flex;
		justify-content: left;
		align-items: top;
		font-size: 16px;
		}
				
	.slapCommentMetadata
		{
		display: inline-flex;
		flex-direction: row;
		min-width: 100%;
		line-height: 1em;
		}
		
	.commentMenuContainer
		{
		position: relative;
		}

	/*		
	.overflowShadow
		{
		background: 
		    linear-gradient(white 30%, rgba(255, 255, 255, 0)), 
		    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
		    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), 
		    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
		  background-repeat: no-repeat;
		  background-color: white;
		  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
		  background-attachment: local, local, scroll, scroll;
		}
	*/
	
	.overflowShadow
		{
		background-image: 
			linear-gradient(to right, white, white), 
			linear-gradient(to right, white, white), 
			linear-gradient(to right, rgba(0,0,0,.2), rgba(255, 255, 255, 0)), 
			linear-gradient(to left, rgba(0,0,0,.2), rgba(255, 255, 255, 0));
		background-position: left center, right center, left center, right center;
		background-repeat: no-repeat;
		background-color: white;
		background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
		background-attachment: local, local, scroll, scroll;
		}
	
		
	.slapCommentTimingContainer
		{
		display: flex;
		margin: 2px 0px 2px 0px;
		}
		
	.slapCommentTimingContainerInner
		{
		color: #7e7e7e;
		font-size: 12px;
		}
		
	.slapNavItemContainer
		{
		cursor: pointer;
		}
		
	.submenuSelected
		{
		border-bottom: 4px solid #bbbbbb !important;
		color: #333333;
		}
		
	.submenuTitle:hover
		{
		color: #666666;
		}
	
	.submenuItems
		{
		}
		
	.submenuItems::-webkit-scrollbar, .overflowShadow::-webkit-scrollbar, .overflowShadowHere::-webkit-scrollbar
		{
		display: none;
		}
		
	.submenuTitle
		{
		padding: 13px 20px 8px 20px
		} 
		
	.slapSocialIcons
		{
		height: 24px;
		width: 24px;
		border-radius: 5px;
		background: #CCCCCC;
		}
		
	.submenuContainer
		{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.20);
		border-radius: 5px;
		background: white;
		font-weight: 400;
		float: left;
		width: 250px;
		margin: 0px 0px 15px 0px;
		overflow: hidden;
		}
		
	.submenuContainerMain
		{
		border: 1px solid #bbbbbb;
		border-radius: 5px;
		background: white;
		font-weight: 400;
		float: right;
		width: 250px;
		margin: 14px 14px 0px 14px;
		}
		
	.submenuItem
		{
		text-decoration: none !important;
		color: inherit !important;
		flex: 20 0 auto;
		}
		
	.submenuItem:hover
		{
		background: rgba(15, 119, 184, 0.06);
		}
		
	.fireMenu
		{
		display:none;
		border-radius: 500px;
		left:20px;
		top:-70px;
		position:absolute;
		width: 180px;
		height:auto;
		background: white;
		border:1px solid #CCCCCC;
		box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.12);
		z-index: 10001;
		color: #333333;
		font-size: 12px;
		max-height: 195px;
		}
		
	.musicMenu
		{
		text-align: left;
		font-weight: 400;
		color: #333333; 
		font-size: 14px; 
		display: none;
		width: 250px;
		background: white;
		border:1px solid #CCCCCC;
		position: absolute;
		right: 15px;
		box-shadow: -2px 2px 3px 0px rgba(0, 0, 0, 0.12);
		max-height: 132px;
		overflow-y: auto;
		z-index: 1;
		}

	.slapsLogo	
		{
		}
		
	.slapFireCounter
		{
		font-size: 20px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 94, 0, 0.75);
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		transition: 1.5s;
		font-family: 'Press Start 2P';
		pointer-events: none;
		}
		
	.slapFireCounterActivate
		{
		transition: none !important;
		opacity: 100% !important;
		transition-timing-function: cubic-bezier(0, 0, 0, 1);
		}
		
	.blob {
		transform: scale(1);
		animation: pulse 1s;
		animation-iteration-count: 3;
	}
	
	@keyframes pulse {
		0% {
			transform: scale(1);
		}
	
		50% {
			transform: scale(1.2);
		}
	
		100% {
			transform: scale(1);
		}
	}		 
	.grow 
		{ 
		transition: all .1s ease-in-out; 
		}

	.grow:hover
		{ 
		transform: scale(1.03); 
		}
		
	.airhornImage, .airhornImage img, .airhornImgTag
		{
		transition:.2s;
		}
		
	.airhornImage:hover, .airhornImageHover
		{
		transform: scale(2); 
		}
		
	.ratioStar:before
		{
		content: '\f005';
		font-family: FontAwesome;
		}
		
	.ratioStar
		{
		-webkit-text-stroke: 1px #ff6d6d;
		color: yellow;
		}
		
	.slapHeaderFlex
		{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:10px 10px 10px 14px;
		box-sizing: border-box;
		}
		
	.pulsate
		{
		animation: pulsate 250ms linear;
		}

	@keyframes pulsate {
	    25% { transform: scale(2); }
	    75% { transform: scale(1); }
	}

	.slapBurgerContainer
		{
		position: relative;
		}

	.slapNavPulldown
		{
		position: absolute;
		background: transparent;
		color: #FFFFFF;
		width: 150px;
		font-size: 12px;
		font-weight: 400;
		z-index: 999999;
		border: 1px solid #dadada;
		margin-top: 5px;
		display: block;
		transition: .3s;
		display: none;
		background: #FFFFFF;
		color: #333333;
		right: 0;
		}
		
	.slapNavPulldownHamburger
		{
		position: relative;
		top: -2px;
		}
		
	.slapNavPulldownItem
		{
		padding: 10px;
		display: block;
		cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
		}
		
	.slapNavPulldownItem:hover
		{
		background: #ececec;
		}
		
	.slapNavPulldown a
		{
		text-decoration: none;
		color: unset;
		}
		
	.swal2-container
		{
		z-index: 1000000;
		}
		
	.musicMenuItem
		{
		padding:10px;
		cursor: pointer;
		display: block;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
		}
		
	.musicMenuItem:hover 
		{
		background-color: #f9f9f9;
		}
		
	.musicMenuItemAdmin
		{
		background: antiquewhite;
		}
		
	.musicMenuItemAdmin:hover
		{
		background: #f1e2ce;
		}
		
	.musicMenuItemModerator
		{
		background: lavender;
		}
		
	.musicMenuItemModerator:hover 
		{
		background: #e1e1ff;
		}
		
	.slapsLittleThumbs
		{
		width: 32px;
		height:32px;
		display: block;
  		border-radius: 0px;
  		display: block;
		}
		
	.slapsLoadMoreSpinner
		{
		height: 40px;
		-webkit-filter: invert(100%);
		filter: invert(100%); 
		}
		
	.slapsThatsAll
		{
		text-align:center;
		height:100px;
		padding-top:20px;
		font-size: 10px;
		}
		
	.footerStuff
		{
		display: none;
		}
		
	#putSongsHere
		{
		width: 100%;
		}
		
	.slapsHeader
		{
		margin: 0px 14px 0px 14px;
		padding:0;
		box-sizing: border-box;
		display: block;
		background: #004464;
		text-align: left;
		}
		
	.buttonActivated
		{
		background-color: #830fb8 !important;
		border: 1px solid #830fb8 !important;
		}
		
	span .buttonActivated
		{
		background-color: #830fb8;
		border: 1px solid #830fb8;
		}
		
	.buttonActivated:hover
		{
		background-color: #9219c9 !important;
		border: 1px solid #9219c9 !important;
		}


	.slapUserStatsSmall
		{
		max-width: 260px;
		display: flex;
		justify-content: space-around;
		flex-grow:1;
		align-items: center;
		margin: 0px 5px 0px 14px;
		line-height: 22px;
		}
		
	.slapDisplayName
		{
		font-weight: 700;	
		color: #4f5057;
		text-decoration: none;
		}
		
	.buttonActivatedWithCheck
		{
		background-color: #830fb8 !important;
		border: 1px solid #830fb8 !important;
		color: #FFFFFF !important;
		}
		
	.withCheck:before
		{
		content: '\f00c';
		font-family: FontAwesome;
		margin-right: 4px;
		}
		
	.buttonActivatedWithCheck:before 
		{
		content: '\f00c';
		font-family: FontAwesome;
		margin-right: 4px;
		}

	.buttonActivatedWithCheck:hover
		{
		background-color: #9219c9 !important;
		border: 1px solid #9219c9 !important;
		}

	.slapPlayer
		{
		position: relative;
		}
		
	.slapActionContainer
		{
		padding: 10px;
		}
		
	.slapActionContainerMargin
		{
		margin-right: 30px;
		}
		
	@keyframes barberpole
		{
		100%
			{
			background-position: 100% 100%;
			}
}
		
	.newAudioFile
		{
		display: none;
		text-transform:uppercase; 
		font-weight:bold;
		font-size:13px;
		padding:10px;
		position: absolute;
		border-top: 1px solid #EEEEEE;
		top: 0;
		left: 0;
		width: 100%;
		color: #333333;
		z-index: 9;
		box-sizing: border-box;
		background-image: repeating-linear-gradient(-45deg,#FFFFFF,#FFFFFF 5px,#EEEEEE 5px,#EEEEEE 10px);
		background-size: 200% 200%;
		animation: barberpole 10s linear infinite reverse;
		}
		
	.smallAvatar
		{
		height: 35px;
		width: 35px;
		border-radius: 3px;
		display: block;
		}
		
	.newAudioFileSpinner
		{
		display: inline-block;
		height: 14px;
		width: 14px;
		vertical-align: middle;
		position: relative;
		margin-top: -2px;
		margin-right: 4px;
		}
		
	.slapNavAvatar
		{
		height: 15px;
		width: 15px;
		border-radius: 50%;
		position: relative;
		margin-top: -2px; 
		vertical-align: middle;
		margin-right: 2px;
		}
	
	.showMoreBottom
		{
		padding: 8px 0px 8px 20px;
		font-weight: 400;
		font-size: 14px;
		display: none;
		}
	
	.slapGroupName
		{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		
	.musicPlayerDiv
		{
		display: flex;
		position: relative;
		}
		
	.slapTotalCommentsContainer
		{
		padding: 10px 15px 10px 20px;
		font-size: 14px;
		font-weight: 400;
		}
		
	.slapCommentContainer_popup
		{
		position: fixed !important;
		top: 0 !important;
		overflow: auto !important;
		width: 100% !important;
		background: #FFFFFF !important;
		z-index: 99999 !important;
		}
	.slapGroupMemberCount
		{
		font-weight: 400;
		text-transform: uppercase;
		font-size: 12px;
		margin-top: 5px;
		}
	
	.groupImage
		{
		width: 50px;
		height: 50px;
		display: block;
		}
		
	.groupRow
		{
		padding: 15px 15px 15px 15px;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		align-items: top;
		justify-content: left;
		border-bottom: 1px solid #d8d8d8;
		font-weight: 400;
		}
		
	.groupImage:hover
		{
		filter: brightness(105%);
		}
		
	.groupWordsContainer
		{
		text-align: left;
		padding: 0px 0px 0px 15px;
		box-sizing: border-box;
		flex: 1;
		}

	region.wavesurfer-region
		{
		background-color: transparent !important;
		cursor: auto !important;
		}

	region.wavesurfer-region[data-region-type="fire"]:before 
		{ /* neat! https://github.com/katspaugh/wavesurfer.js/issues/777 */
	    /* content: attr(data-region-type); */
	    content: "\f111";
	    font-family: FontAwesome;
	    color: #ffb200;
	    font-size: 7px;
	    position: absolute;
	    margin-left: -4px;
	    margin-top: 6px;
	    top: 0;
	    text-shadow: 0px 0px 1px black;
		}

	region.wavesurfer-region[data-region-type="comment"]:before 
		{ /* neat! https://github.com/katspaugh/wavesurfer.js/issues/777 */
	    /* content: attr(data-region-type); */
	    content: "\f111";
	    font-family: FontAwesome;
	    color: blue;
	    font-size: 7px;
	    position: absolute;
	    margin-left: -4px;
	    margin-top: 6px;
	    top: 0;
	    text-shadow: 0px 0px 1px black;
		}

	region.wavesurfer-region[data-region-type="heart"]:before 
		{ /* neat! https://github.com/katspaugh/wavesurfer.js/issues/777 */
	    /* content: attr(data-region-type); */
	    content: "\f111";
	    font-family: FontAwesome;
	    color: #d00000;
	    font-size: 7px;
	    position: absolute;
	    margin-left: -4px;
	    margin-top: 6px;
	    top: 0;
	    text-shadow: 0px 0px 1px black;
		}

	.wavesurfer-handle
		{
		display: none;
		}
		
	.slapGroupsContainer
		{
		padding: 13px 0px 0px 0px;
		font-size: 12px;
		}

	.whiteLinkNoUnderline
		{
		color:#FFFFFF !important;
		text-decoration: none !important;
		font-weight: 400;
		}
		
	.slapSpinner /* required <link href="/css/loaders.min.css" rel="stylesheet"> */
		{
		display: inline-block;
		transform: scale(0.3, 0.3);
		vertical-align: middle;
		margin-right: -13px;
		}
		
	.templateSlapIcon
		{
		display: inline-block;
		font-weight: 400;
		}
		
	.slapHashtag
		{
		background: #0F78B8;
		border: 1px solid #0F78B8;
		border-radius: 4px;
		font-weight: 400;
		color: #FFFFFF;
		display: inline-block;
		padding: 3px 7px 3px 7px;
		font-size: 12px;
		box-sizing: border-box;
		vertical-align: middle;		
		cursor: pointer;
		margin: 0px 2px 2px 0px;
		display: inline-block;
		float: left;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
		}
		
	.slapHashtagGray
		{
		background: #afafaf;
		border: 1px solid #afafaf;
		border-radius: 4px;
		font-weight: 400;
		color: #FFFFFF;
		display: inline-block;
		padding: 3px 7px 3px 7px;
		font-size: 12px;
		box-sizing: border-box;
		vertical-align: middle;		
		cursor: pointer;
		margin: 0px 2px 2px 0px;
		display: inline-block;
		float: left;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
		}
		
	.slapHashtagGray:hover 
		{
		background: #b9b9b9;
		}

	.slapHashtag:hover
		{
		background:#0884c5;
		}
		
	.slapHashtag:before 
		{ 
		}
		
	.groupFlexItem
		{
		height: 1em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: #666666;
		color: #FFFFFF;
		font-weight: 400;
		margin:5px;
		padding:10px 13px 14px 13px;
		display: block;
		border-radius: 100px;
		width: 200px;
		cursor: pointer;
		}

	.groupFlexItem:hover
		{
		background: #777777;
		}
		
	.slapNavBlueSelected
		{
		background: #0884c5;
		box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
		box-sizing: border-box;
		position: relative;
		top: 0px;
		/* border-top: 2px solid rgba(255, 255, 255, 0.2); */
		}

	.waveLoading
		{
		color: #FFFFFF;
		z-index: 99;
		width: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		bottom: 0;
		}
				
	.waveLoading img
		{
		height: 36px;
		width: 36px;
		}

	.slapNavFlex
		{
		display: flex;
		}

	.restartButton
		{
		display: none;
		margin-left: 23px;
		font-size: 30px;
		width: auto;
		}
		
	.slapNavReddish
		{
		background: #ef1210;
		color:#FFFFFF !important;
		text-decoration: none !important;
		font-weight: 400;
		display: inline-block;
		text-transform: uppercase;
		font-size: 10pt;
		padding:15px;
		float: left;
		}

	.slapNavBlue
		{
		color:#FFFFFF !important;
		text-decoration: none !important;
		font-weight: 400;
		text-transform: uppercase;
		font-size: 10pt;
		padding:15px;
		display: block;
		box-sizing: border-box;
		}
		
	.slapNavBlue:hover
		{
		background: #0884c5;
		}
		
	.slapNavBlueRounded
		{
		border-radius: 0px 0px 0px 5px;
		}

	.slapNavReddish:hover 
		{
		background-color: #f25856;
		}
		
	.slapWaveform
		{
		box-sizing: border-box; 
		position: relative;
		display: block;
		}
		
	.slapPageContainer
		{
		margin: 14px;
		border-radius: 5px 5px 0px 0px;
		min-height: 800px;
		background: #FFFFFF;
		}
		
	.slapsFullImage
		{
		border:1px solid rgba(255, 255, 255, 1);
		box-shadow:0px 0px 10px 4px rgba(0, 0, 0, 0.32);
		box-sizing: border-box;
		}
		
	.commentTimerContainer
		{
		border-radius: 3px;
		}

	.slapCommentContainer::-webkit-scrollbar {
	  -webkit-overflow-scrolling: auto;
	  width: 7px;
	}
	
	.slapCommentContainer::-webkit-scrollbar-track {
	  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	}
	
	.commentTiming
		{
		margin-bottom: 6px;
		font-size: 10px;
		margin-left: 61px;
		}
	
	.slapCommentContainer::-webkit-scrollbar-thumb {
	  border-radius: 4px;
	  background-color: rgba(0, 0, 0, .5);
	  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
	}
	
	.slapSongTitleContainer
		{
		font-size: inherit;
		font-weight: bold;
		margin-top: 2px;
		}
	
	#slapsWords
		{
		text-align:left;
		box-sizing: border-box;
		/* background: #0F78B8; */
		color:#FFFFFF;
		padding:10px 10px 10px 15px;
		position: relative;
		text-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.17);
		}
		
	.slapMobileShow
		{
		display: none;
		}
		
	.slapMobileShowBlock
		{
		display: none;
		}
		
	.commentAutoScrollIconContainer
		{
		text-align: center;
		position: absolute;
		width: 100%;
		bottom: 20px;
		display: none;
     	}
     	
     
     	
     .commentAutoScrollIcon
     	{
	 	background: #0F78B8;
	 	display: inline-block;
	 	border-radius: 500px;
	 	color: #FFFFFF;
	 	font-weight: 400;
	 	padding: 5px 10px 5px 10px;
	 	font-size: 10px;
	 	text-transform: uppercase;
	 	cursor: pointer;
     	}
     	
     .commentAutoScrollIcon:hover
     	{
	 	background:#0884c5;
     	}
     
    .commentAndTimerContainer
    	{
	    padding:5px 0px 7px 0px;
    	}
    	
    .slapCommentLike
    	{
	    padding: 13px;
	    cursor: pointer;
    	}
    	
    .slapCommentLike_0:before
    	{
		content: '\f08a';
		font-family: FontAwesome;
		font-size: 14px;
    	}
    	
    .slapCommentLike_1:before
    	{
		content: '\f004';
		font-family: FontAwesome;
		font-size: 14px;
		color: #d00000;
    	}
    	
    .slapCommentFormContainer
    	{
	    display: flex;
	    background: #ffffff;
	    padding:0px 15px 0px 15px;
	    box-sizing: border-box;
	    /* border-bottom: 1px solid #e5e5e5; */ 
	    /* border-top: 1px solid #e5e5e5; */
    	}
    	
    .slapCommentTotalLikes
    	{
	    font-size: 10px;
	    position: relative;
	    top:-15px;
	    pointer-events: none;
    	}
		
	.slapCommentActions
		{
		text-align: center;
		display: flex;
		}
		
	.slapCommentActionItem
		{
		color: #cacaca;
		cursor: pointer;
		display: inline-block;
		margin-right: 15px;
		font-weight: bold;
		font-size: 12px;
		}
		
	.slapCommentActionItem:hover 
		{
		color: #0F78B8;
		}
		
	.clampMore
		{
		cursor: pointer;
		text-decoration: none;
		color:#0071c7
		}
		
	.clampMore:hover
		{
		text-decoration: underline;
		}
	.slapCommentAvatarContainer
		{
		position: relative;	
		}
		
	.musicMenuOpener
		{
		padding: 15px;
		}
		
	.trackText
		{
		padding:16px 15px 15px 15px;
		}
		
	.titleAndNotes
		{
		padding: 0px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		overflow-wrap: anywhere;
		}
		
	.slapAutoscrollCheckbox
		{
		vertical-align: middle;
		}
		
	[contenteditable][placeholder]:empty:before 
		{
		content: attr(placeholder);
		position: absolute;
		background-color: transparent;
		}
		
	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	  color: #aaaaaa;
	  opacity: 1; /* Firefox */
	}
	
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	  color: #aaaaaa;
	}
	
	::-ms-input-placeholder { /* Microsoft Edge */
	  color: #aaaaaa;
	}
		
	.slapActions
		{
		float: left;
		color: #808080;
		font-weight: 400;
		}
		
	.centerPlayButtonContainer
		{
		display: none;
		border-radius:50%;
		font-size: 55px;
		background:#FFFFFF;
		width: 100px;
		height: 100px;
		position: absolute;
		z-index: 20000;
		left: calc(50% - 50px);
		top: calc(50% - 50px);
		text-align: center;
		box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.35);
		}
		
	.centerPlayButton
		{
		display: table-cell;
		vertical-align: middle;
		padding-left: 10px;
		color: #0F78B8;
		}
		
	.slapAvatarImg
		{
		width: 100%;
		border-radius: 5px 5px 0px 0px;
		cursor: pointer;
		display: block;
		}
	
	.slapInfoBoxInside
		{
		background: #FFFFFF;
		border-radius: 0px 0px 5px 5px;
		font-weight: 400;
		}
		
	.slapCommentsOuterContainer
		{
		border-radius: 0px 0px 5px 5px;
		margin-top:0px;
		padding: 5px 0px 0px 0px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-top: 1px solid #ececec;
		}
		
	.slapArtistNameContainer
		{
		font-size: inherit;
		font-weight: 400;
		font-size: 11px;
		}
		
	.slapInfoColumn
		{
		max-width: 320px;
		width:100%;
		border-radius: 5px 5px 5px 5px;
		margin-right: 14px;
		}	
		
	.slapSortCommentsSpinner
		{
		text-align: center;
		font-size: 29px;
		color: #AAAAAA;
		margin:15px 0px 15px 0px;
		}
		
	.slapSortCommentsContainer
		{
		display: none;
		text-align: right;
		text-transform: uppercase;
		font-size: 14px;
		box-sizing: border-box;
		position: relative;
		padding: 10px 0px 10px 0px;
		margin: 0px 15px 0px 15px;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
		}
		
	.slapColumnContainer
		{
		display: flex;
		text-align: left;
		height: 100%;
		margin:14px 14px 14px 14px;
		}
		
	.slapColumnContainerStandalone
		{
		}
	
	.slapColumnContainer textarea
		{
		font-family: "Lato",helvetica,arial,sans
		}
		
	.slapSortCommentsBy
		{
		display: none;
		padding:inherit;
		}
				
	.slapCommentBeef
		{
		transition: .75s;
		padding:10px;
		border-radius: 10px;
		background-color: #ecedef;
		font-weight: 400;
		/* max-width: calc(100% - 124px);  leaves room for heart emoji */
		max-width: 100%;
		display: inline-block;
		}
		
	.commentMenuEllipsis
		{
		padding: 14px 13px 13px 13px;
		cursor: pointer;
		color: #a7a7a7;
		}
		
	.slapCommentBeefContainer
		{
		flex: 1;
		}
		
	.slapCommentContainer
		{
		width: 100%;
		overflow: hidden; /* important */
		position: relative;
		box-sizing: border-box;
		-webkit-overflow-scrolling: auto;
		padding-top: 0px;
		}
	
	.slapCommentTemplateBlock
		{
		padding:4px 15px 4px 0px;
		box-sizing: border-box;
		display: inline-flex;
		min-width: 100%;
		transition: box-shadow 1000ms, background-color 500ms;
		transition-timing-function: linear;
		position: relative;
		word-wrap: break-word;
		word-break: break-word;
		}

	.slapComment
		{
		box-sizing:border-box;
		width: 100%;
		outline: none;
		border: none;
		}
		
	.slapCommentHighlight
		{
		background-color: rgba(15, 120, 184, 0.11);
		}
		
	.highlightComment .slapCommentBeef
		{
		transition: 0s;
		background-color: rgba(15, 120, 184, 0.30);
		box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
		}
		
	.slapCommentInfoBar
		{
		font-size: 10px;
		color: #909090;
		padding:4px 10px 0px 10px;
		border-radius:3px 3px 0px 0px;
		font-weight: 400;
		}
		
	.slapSortCommentsByContainer
		{
		float: right;
		}
		
	.slapCommentRight
		{
		float: right;
		}
		
	.slapCommentDot
		{
		float: left;
		}
		
	.slapCommentInlineText
		{
		display: inline-block;
		}
			
	.slapCommentTiming
		{
		display: inline-block;
		font-size: 12px;
		background:#a2a2a2;
		color: #FFFFFF;
		padding: 2px 4px 2px 4px;
		font-size: 10px;
		border-radius: 3px;
		margin-right: 5px;
		}
	
	.commentReplyNotification
		{
		font-weight: 400;
		margin: 4px 0px 0px 10px;
		display: none;
		font-size: 12px;
		text-transform: uppercase;
		}
		
	.slapCommentDate
		{
		display: inline-block;
		font-size: 12px;
		color:#7e7e7e;
		font-weight: 400;
		}
		
	.slapReplyLink
		{
		display: inline-block;
		font-size: 12px;
		color:#7e7e7e;
		cursor: pointer;
		font-weight: bold;
		}
		
	.slapLikeLink
		{
		display: inline-block;
		font-size: 12px;
		color:#7e7e7e;
		cursor: pointer;
		font-weight: bold;
		}
		
	.slapCommentName
		{
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		color:#7e7e7e;
		text-decoration: none;
		font-weight: bold;
		color: #333333;
		}
		
	.slapCommentName a
		{
		text-decoration: none;
		color: #4f5057;
		}
		
	.slapCommentName:hover
		{
		color:#0F78B8
		}
		
	.slapCommentText
		{
		white-space: pre-line;
		word-wrap: break-word;
		word-break: break-word;
		margin-top: 1px;
		}
		
	.slapCommentAvatar
		{
		border-radius:50%;
		margin-right: 12px; 
		height: 40px;
		width: 40px;
		display: block;
		margin-left: 15px;
		background: #CCCCCC;
		}
		
	.slapButtonBarContainer
		{
		background: #FFFFFF;
		border-bottom: 1px solid #ececec;
		/* padding:20px 20px 16px 15px; */
		}
		
	.slapCommentInput
		{
		font-size: 14px;
		line-height: 18px;
		border-radius:20px;
		max-height: 120px;
		height: 40px;
		resize: none;
		display: block;
		padding:10px 36px 8px 11px;
		box-sizing:border-box;
		background:#fcfcfc;
		width: 100%;
		outline: none;
		border: 1px solid #CCCCCC;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		}
		
	.playerBox
		{
		/* border: 1px solid #BBBBBB; */
		box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
		margin-bottom: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		-webkit-transform:translate3d(0,0,0); /* fixes iOS flickering animation (https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker/3934275#3934275) */
		}
		
	.playerBox:hover 
		{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.28);
		/* border: 1px solid #999999; */
		}
		
	.slapInfoBox
		{
		/* border: 1px solid #BBBBBB; */
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.20);
		border-radius: 5px;
		}
		
	.slapInfoBox:hover 
		{
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.28);
		}
		
	.slapButtonLink
		{
		color: inherit !important;
		}
		
	.slapSongNotes
		{
		margin-top: 10px;
		height: auto;
		font-weight: 400;
		white-space: pre-line;
		line-height: 1.3em;
		}
		
	.slapInfo	
		{
		padding:15px 20px 15px 20px;
		border-top: 1px solid #e7f6ff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		
	.slapSkillContainer
		{
		margin:0px 5px 5px 0px;
		text-transform: uppercase; 
		float: left;
		white-space: nowrap;
		overflow: auto;
		}
		
	.slapSkillRole
		{
		display: inline-block;
		font-size: 10px;
		background-color:#d9d9d9;
		border-radius: 500px 500px 500px 500px;
		padding:2px 6px 2px 6px;
		box-sizing: border-box;
		}
		
	.slapPillBlue
		{
		display: inline-block;
		font-size: 10px;
		background-color:#0F78B8;
		color: #FFFFFF;
		border-radius: 500px 500px 500px 500px;
		padding:2px 6px 2px 6px;
		box-sizing: border-box;
		cursor: pointer;
		}
		
	.slapPillBlue:hover
		{
		background:#0884c5;
		}

	a > .slapInfo:hover
		{
		background-color: #fbfdff
		}
		
	.slapFireIcon
		{
		height: 14px;
		transform: scale(1.3);
		margin-right: 0px;
		filter: grayscale(100%);
		position: relative;
		}
		
	.slapFireIconClone
		{
		color: #ff5500;
		font-size: 12px;
		font-weight: 400;
		}
	
	.slapFireIconForAnimation
		{
		height: 19px;
		filter: grayscale(100%);
		position: relative;
		}
	
	.slapFireIconColor
		{
		filter: grayscale(0%);
		}
		
	.slapProfilePic
		{
		width: 120px;
		height: 120px;
		display: block;
		border-radius: 0px 0px 0px 5px;
		cursor: pointer;
		}
		
	.slapPlayerControls
		{
		background: linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.6));
		position: absolute;
		bottom:-44px;
		left: 0;
		z-index: 1000;
		width: 100%;
		padding:8px 14px 8px 14px;
		box-sizing: border-box;
		text-align: left;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
		transition: .15s;
		}
		
 	.slapPlayerControlsLocked, .slapPlayer:hover .slapPlayerControls
		{
		bottom: 0px;
		}

	.slapTimerContainer
		{
		border-radius:0px 4px 0px 0px;
		display: inline-block;
		color:#FFFFFF;
		font-size: 13px;
		padding:10px;
		font-family: courier,sans;
		}
		
	.slap_arrow_box { /* http://www.cssarrowplease.com/ */
		position: relative;
		background: #0F78B8;
		display: none;
	}
	.slap_arrow_box:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(15, 120, 184, 0);
		border-left-color: #0F78B8;
		border-width: 7px;
		margin-top: -7px;
	}
		
	.slapTimer
		{
		/*
		float: right;
		line-height: 30px;
		font-family: 'Roboto Mono',helvetica,arial;
		display: inline-block;
		z-index: 100;
		color: #FFFFFF;
		vertical-align: middle;
		font-weight: bold;
		letter-spacing: 0px;
		*/
		font-family: 'Roboto Mono',helvetica,arial;
		display: inline-block;
		z-index: 9999;
		color: #FFFFFF;
		font-weight: bold;
		letter-spacing: 0px;
		position: absolute;
		right: 0px;
		padding: 3px 10px 0px 10px;
		bottom: 3px;
		transition: .2s;
		border-radius: 5px 0px 0px 0px;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
		}

	.slapTimerLocked, .slapPlayer:hover .slapTimer
		{
		bottom: 14px;
		background: none;
		}
		

	.slapWaveArtworkContainer
		{
		/* pointer-events: none; makes it so clicks pass through to wave layer underneath */
		/*
		z-index: 100;
		position: absolute;
		top:0;
		left: 15px;
		cursor: pointer; 
		*/
		border-right: 2px solid rgba(0, 0, 0, 0.74);
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		}
		
	.slapWaveArtwork
		{
		/*
		display: block;
		height: 100px;
		width: 100px;
		border-radius: 0px 0px 0px 0px;
		box-shadow:0px 0px 0px 2px #FFFFFF, 0px 0px 10px 2px rgba(0, 0, 0, 0.66); 
		background: rgba(0,0,0,0.33);
		*/
		display: block;
		height: 150px;
		width: 150px;
		overflow: hidden;
		}
		
	.slapWaveBackground
		{
		/*
		margin-left:-50px;
		margin-top:-150px;
		filter: blur(10px);
		-webkit-filter: blur(10px);
		background: #333333 url(https://source.unsplash.com/random/705x350?dark+blue) 450px 450px;
		background: #333333;
		height: 150%;
		width: 150%;
		*/
		background: #333333;
		height: 100%;
		width: 100%;
		}
		
	.myPlayButton
		{
		font-size: 30px;
		color: #FFFFFF;
		cursor: pointer;
		vertical-align: middle;
		}
		
	.myPlayButton:hover
		{
		color: #f4f4f4;
		}
		
	.myVolume
		{
		font-size: 30px;
		color: #FFFFFF;
		cursor: pointer;
		width: 27px;
		vertical-align: middle;
		}
		
	.myVolume:hover
		{
		color: #f4f4f4;
		}
		
	.slapButtonContainer
		{
		float: right;
		margin-top: 5px;
		padding-right: 20px;
		touch-action: manipulation;
		}
		
	.slapNotesText
		{
		font-family: 'Caladea', serif;
		font-size: 16pt;
		line-height: 1.5em; 
		max-width: 350px;
		overflow-y: auto;
		margin-top: 18px;
		min-width: 200px;
		}
		
	.slapsImageModalBackground
		{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: auto;
		position: fixed;
		background: rgba(0, 0, 0, 0.83);
		z-index: 999999;
		}
		
	.slapsCloseImageModal
		{
		position: absolute;
		left: 14px;
		top: 14px;
		font-size: 30px;
		cursor: pointer;
		z-index: 100000;
		}
		
	.slapsImageModalImage
		{
		max-width: 640px;
		width: 95%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		}
		
	.slapsDisplayName
		{
		font-size: 20px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding:20px 20px 20px 20px;
		box-sizing: border-box;
		}
		
	.slapsDisplayUsername
		{
		margin-top: 24px;
		}
		
	.slapsDisplayLocation
		{
		margin-top: 6px;
		color: #858585;
		}
		
	.slapUserStat
		{
		padding:5px 0px 5px 10px;
		box-sizing: border-box;
		font-weight: 400;
		border-bottom: 1px solid rgba(0, 0, 0, 0.09);
		}
		
	.slapAnswer
		{
		height: 40px;
		line-height: 40px;
		border-color: #999999;
		padding-left: 9px;
		}

	.slapArtistNotesBox
		{
		overflow-y: auto;
		height: 350px;
		position: relative; 
		font-size: 12pt;
		line-height: 1.6em;
		padding:25px 20px 20px 20px;
		box-sizing: border-box;
		background: #777777;
		color: #FFFFFF;
		box-shadow: inset 4px 1px 9px -6px #000000;
		}
		
	.slapNavLinkContainer
		{
		display: inline-block;
		text-transform: uppercase;
		font-size: 10pt;
		padding:15px;
		}
		
	.slapModalCloseButton
		{
		color: rgba(255, 255, 255, 0.85);
		}
		
	.slapModalCloseButton:hover
		{
		color: rgba(255, 255, 255, 1);
		}
		
	.slapNavContainer
		{
		font-size: 12pt;
		vertical-align: top;
		}
		
	.slapStatsContainer
		{
		text-transform: uppercase;
		font-size: 8pt;
		}

	.slapFlexContainer
		{
		display: block;
		width: 100%;
		text-align: left;
		box-sizing: border-box;
		}
		
	.slapFlex
		{
		display: flex;
		padding: 0px 20px 0px 20px;
		}
		
	.slapMusicWidth
		{
		width: 100%;
		}
		
	.slapQuestionsOuterContainer
		{

		}
	
	.slapQuestionsContainer
		{
		padding:20px 20px 20px 20px; 
		width: 100%;
		box-sizing: border-box;
		max-width: 865px;
		}

	.slapQuestionsContainer input[type="text"]
		{
		border-radius: 5px;
		background: #f2f3f5;
		border:1px solid #dfe1e5;
		font-size: 13px;
		}
	
	.slapDoneButton	
		{
		padding-left: 20px;
		padding-right: 20px;
		border-radius: 5px;
		}
	
	.slapQuestionsHeadline
		{
		padding:10px 20px 10px 20px;
		font-size: 18px;
		text-transform: uppercase;
		}
	
	.slapQuestionsDesc
		{
		margin-top: 5px;
		font-size: 12pt;		
		}
		
	.slapUploadTd
		{
		width: 200px;
		}
		
	.slapFromTheArtist
		{
		display: inline-block;
		background: #FFFFFF;
		color: #333333;
		padding: 5px 10px 5px 10px;
		line-height: 1em;
		margin-left: -6px;
		font-size: 8pt;
		}

	.fromTheArtistContainer
		{
		}
		
	.slapActionContainer
		{
		display: inline-block;
		padding: 10px 10px 10px 10px;
		font-size: 13px; /* 14 was line-wrapping in some cases */
		}
		
	.slapActionContainer:hover
		{
		}
		
	.slapDmContainer
		{
		display: inline-block;
		cursor: pointer;
		}
		
	.slapDmContainer:hover
		{
		color: #666666;
		}
		
	.slapAuthor
		{
		padding:10px;
		background: #FFFFFF;
		border-radius: 5px 5px 0px 0px;
		}
		
	.slapMusicBackgroundContainer
		{
		overflow: hidden;
		height: 150px;
		padding: 2% 0px 2% 0px;
		position: relative;
		box-sizing: border-box;
		background: #333333;
		}
	
	.slapNotes
		{
		border-radius: 4px;
		background: #666666;
		color: #FFFFFF;
		padding:20px;
		box-sizing: border-box;
		}
	
	.slapQaAnswer
		{
		padding: 2px 8px 2px 2px;
		line-height: 1.5em;
		white-space: normal;
		word-break: break-all;
		}
		
	.slapNotesContainer
		{
		margin-top: 10px;
		}

	.navContainer
		{
		/* border-bottom: 1px solid rgba(0, 0, 0, 0.21); */
		margin-top: -1px;
		background: #0F78B8;
		color: #FFFFFF;
		/* padding:1em; */
		margin:0px 14px 0px 14px;
		box-sizing: border-box;
		line-height: 1.8em;
		border-radius: 0px 0px 5px 5px;
		}

		/* Banner Notifications */

		.banner-notify {
			display: flex;
		}

		.banner-notify-icon {
			margin-right: 5px;
		}

		.banner-notify-text {
			flex: 1;
			margin-right: 5px;
		}

		.banner-notify-close {
			text-align: right;
			padding: 5px 0 0 0;
		}

		@media screen and (max-width: 380px) {
			.xs-hide {
				display: none;
			}
		}


input[type=range] { /* thank you http://danielstern.ca/range.css/#/ */
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(0, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0.9px 0.9px 1px rgba(0, 0, 49, 0), 0px 0px 0.9px rgba(0, 0, 75, 0);
  border: 0px solid rgba(0, 0, 30, 0);
  height: 14px;
  width: 14px;
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5.2px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(0, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0.9px 0.9px 1px rgba(0, 0, 49, 0), 0px 0px 0.9px rgba(0, 0, 75, 0);
  border: 0px solid rgba(0, 0, 30, 0);
  height: 14px;
  width: 14px;
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0.2px solid rgba(0, 1, 1, 0);
  border-radius: 2.6px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
  border: 0.2px solid rgba(0, 1, 1, 0);
  border-radius: 2.6px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0.9px 0.9px 1px rgba(0, 0, 49, 0), 0px 0px 0.9px rgba(0, 0, 75, 0);
  border: 0px solid rgba(0, 0, 30, 0);
  height: 14px;
  width: 14px;
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
  height: 4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}

.banner-container {
	padding: 14px 14px 0 14px;
}

.mixea-banner-link {
	cursor: pointer;
}

.mixea-banner-link:link, .mixea-banner-link:visited, .mixea-banner-link:hover, .mixea-banner-link:active {
	text-decoration: none;
}

.banner-body {
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	width: 100%;
	border-radius: 4px;
	background-image: url(/images/slaps/mixea-background-desk.png);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 30px 40px;
	justify-content: space-between;
	align-items: center;
}

.banner-body .mixea-logo {
	width: 100px;
}

.banner-body .distrokid-logo {
	width: 50px;
	margin-left: 2px;
}

.banner-body .banner-title {
	color: white;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	margin: auto 20px;
}

.banner-button {
	background-color: #C2410C;
	border-radius: 4px;
	color: white;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 22px;
	text-align: center;
}

.miniHeader
	{
	display: none;
	}
	
	
	@media screen and (max-width: 900px)
		{
		.optionalColumn
			{
			display: none;
			}
			
		.miniHeader /* browser too skinny for a column, so let's put some stuff in a header instead */
			{
			display: block;
			}
			
		.slapColumnContainer
			{
			flex-direction: column;
			}
			
		.miniHeaderButtons
			{
			max-width: 300px; 
			padding:15px 0px 0px 0px;
			box-sizing: border-box;
			display:flex;
			}
			
		.submenuContainer
			{
			float: none;
			width: auto;
			margin: 0px 0px 10px 0px;
			}
			
		.submenuContainerMain
			{
			width: auto;
			float: none;
			}
			
		}

	@media screen and (max-width: 580px)
		{
			
		body
			{
			/* background-image: linear-gradient(45deg, #9e9e9e 4.55%, #adadad 4.55%, #adadad 50%, #9e9e9e 50%, #9e9e9e 54.55%, #adadad 54.55%, #adadad 100%); */
			/* background-size: 15.56px 15.56px; */
			background: #666666;
			}
			
		.notifyContainer
			{
			padding: 0px;
			}
			
		.notifyTable	
			{
			border-left: none;
			border-right: none;
			border-radius: 0px;
			}


		.slapsSearch
			{
			width: 120px;
			}
			
		.groupCarouselContainer
			{
			position: relative;
			padding:0px;
			box-sizing: border-box;
			margin-top: 0px;
			background: #f1f2f5;
			}

		.groupLeftScroll, .groupRightScroll
			{
			top:10px; /* same as .groupCarouselContainerInner */
			}
			
		.groupCarouselContainerInner
			{
			padding-top: 10px; /* same as .groupLeftScroll, .groupRightScroll */
			background: #f1f2f5;
			}
			
		.carousel-scroll
			{
			background: #ffffff;
			border:1px solid #ffffff;
			}
			
		.flickity-button, .flickity-button:hover 
			{
			display: none;				
			}
			
		.carousel-cell, .carousel-cell:hover
			{
			padding: 5px 15px 5px 15px;
			font-size: 14px;
			background: #FFFFFF;
			margin: 0px 0px 0px 4px;
			}
						
		.main-carousel
			{
			background: #f1f2f5;
			margin-bottom: 0px;
			padding-bottom: 8px;
			}
			
		.peopleRow:hover, .groupRow:hover 
			{
			background: none;
			}
			
		.slapsBorderRadiusDesktop
			{
			border-radius: 0px !important;
			}
			
		.slapCommentDate
			{
			}

		.commentMenu
			{
			top: 5px;
			right: 33px;
			}

		.commentMenuEllipsis
			{
			padding: 17px 13px 13px 13px;
			}

		.slapCommentName
			{
			}

		.joinTitle
			{
			font-size: 16px;
			}
			
		.submenuContainer
			{
			box-shadow: none;
			margin: 0px;
			border: none;
			border-radius: 0px;
			border-bottom: 1px solid #bbbbbb;
			}
			
		.submenuContainerMain
			{
			margin: 0px;
			border: none;
			border-radius: 0px;
			border-bottom: 1px solid #bbbbbb;
			width: 100%;
			}
			
		.submenuItem:hover
			{
			background: transparent;
			}

			
		.slapFireCounter
			{
			font-size: 30px;
			}
			
		.trackText
			{
			padding:18px 15px 18px 15px;
			}

			
		.wrapperMenuMode
			{
			margin-left: -200px;
			}

		.slapsHeader
			{
			margin: 0px;
			padding: 0px;
			}
		
		.slapHeaderFlex
			{
			/* justify-content: flex-end; */
			}
			
		.slapsLogoContainer
			{
			/*
			position: absolute;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			*/
			}

		.slapNavPulldownItem:hover
			{
			background: #7d7d7d;
			}

		.slapBurgerContainer
			{
			position: inherit;
			}

		.slapsLogo
			{
			}
		
		.slapNavPulldownHamburger
			{
			padding:13px 17px 13px 15px;
			position: relative;
			bottom: -1px;
			top: auto;
			}
			
		.slapNavPulldown
			{
			right: -200px;
			margin-top: 0px;
			top: 0px;
			margin-top: 0px;
			width: 200px;
			box-sizing: border-box;
			border: none;
			height:100%;
			transition: .3s;
			display: block;
			background: transparent;
			color: #FFFFFF;
			}

		.slapNavPulldownOpen
			{
			right: 0px;
			transition: .3s;
			}
			
		.slapsLoadMoreSpinner
			{
			-webkit-filter: invert(0%);
			filter: invert(0%); 
			}
			
		.slapUserStatsSmall
			{
			max-width: 100%;
			}
			
		.miniHeaderButtons
			{
			max-width: 100%;
			}
						
		.newAudioFile
			{
			padding: 20px 15px 20px 15px;
			}
		
		.slapNavIcon
			{
			font-size: 18px;
			}
			
		.slapNavAvatar
			{
			height: 16px;
			width: 16px;
			margin-top: -8px;
			}
			
		.navContainer
			{
			position: sticky;
			top:-1px;
			z-index: 99999; /* one below the "more" menu (so the more menu is on top) */
			box-shadow: 0px 1px 0px 0px black;
			margin:-2px 0px 0px 0px;
			border-radius: 0px;
			border-bottom: none;
			font-size: 10pt;
			}
			
		.slapActionContainerMargin
			{
			margin-right: 0px;
			}

		.showMoreBottom
			{
			padding: 4px 0px 12px 20px;
			}
			
		.slapHomeIcon
			{
			padding:15px 0px 15px 0px !important;
			}
			

		.slapTotalCommentsContainer
			{
			padding: 10px 15px 0px 20px;
			}
			
		.slapArtworkOverlay
			{
			position: absolute;
			bottom:0;
			left: 0;
			width: 100%;
			height: 40%;
			background: linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.4))
			}
			
		.slapGroupsContainer
			{
			padding: 13px 0px 3px 0px
			}

		.slapCommentContainer
			{
			margin-top: 10px;	
			}

	    .commentAndTimerContainer
	    	{
		    padding:0px 0px 7px 0px;
	    	}

		.slapWaveform
			{
			/* visibility: hidden; */
			}
		
		.waveLoading img
			{
			height: 50px;
			width: 50px;
			}

		
		.slapNavItemContainer
			{
			width: 100%;
			}

		.slapMobileNavText
			{
			display: block !important;
			line-height: 6px;
			margin-top: 2px;
			}
			
		.myPlayButton
			{
			font-size: 40px;
			padding: 0px 0px 0px 18px;
			}

		.restartButton
			{
			font-size: 40px;
			}

		.slapMobileHide
			{
			display: none !important;
			}

		.slapNavFlex
			{
			justify-content: space-around;
			padding:0px 0px 0px 0px;
			box-sizing: border-box;
			}

		.mobileMixModeSeeThrough
			{
			mix-blend-mode: normal;
			z-index: 1;
			}
			
		.slapNavBlue
			{
			text-align: center;
			font-size: 10px;
			padding: 12px 5px 11px 5px;
			width: 100%;
			}
					
		canvas
			{
			background: transparent;
			}

		.slapWaveform
			{
			z-index: 1;
			}
			
		.slapOuterWave
			{
			background: transparent;
			}
			
		.footerStuff
			{
			background: #FFFFFF;
			}
		
		.slapMobileShow
			{
			display: inline-block;
			}
			
		.slapMobileShowBlock
			{
			display: block;
			}
			
		.slapPageContainer
			{
			margin: 0px;
			border-radius: 0px 0px 0px 0px;
			}

		.slapsFullImage
			{
			border: none;
			box-shadow: none;
			border-top:1px solid #505050;
			border-bottom:1px solid #505050;
			}

		.slapWaveArtworkContainer
			{
			pointer-events: none; /* makes it so clicks pass through to wave layer underneath */
			z-index: 1;
			position: absolute;
			top:0;
			left: 0;
			mix-blend-mode: normal;
			border-right: none;
			}
			
		.slapWaveArtwork
			{
			display: block;
			height: 100%;
			width: 100%;
			border-radius: 0px;
			box-shadow:none;
			}

		.slapTimer
			{
			bottom: 17px;
			background: none;
			}
			
		.slapSortCommentsContainer
			{
			}
			
		.slapButtonBarContainer
			{
			/* padding: 14px 15px 14px 15px; */
			font-size: 15px;
			font-weight: 600;
			line-height: 20px;
			padding-right: 10px;
			}
			
		.slapSongNotes
			{
			margin-top: 13px;
			overflow: hidden;
			/* max-height: 43px; */
			}
			
		.slapSongTitleContainer
			{
			font-size: inherit;
			margin-top: 0px;
			font-weight: bold;
			}

		.slapArtistNameContainer
			{
			font-size: inherit;
			}
			
		.slapPlayerContainer
			{
			box-shadow: none;
			}
			
		.slapAuthor
			{
			padding:12px 10px 10px 10px;
			background: #FFFFFF;
			border-radius: 0px 0px 0px 0px;
			}

		.slapCommentTemplateBlock
			{
			padding:0px 0px 8px 0px;
			}
			
		.slapActions
			{
			float: none;
			}
			
		.titleAndNotes
			{
			padding: 0px;
			}
			
		.slapPlayerControls
			{
			background: transparent;
			height: 64px;
			padding:0px 12px 0px 0px;
			line-height: 44px;
			border-top: none;
			bottom: 0;
			/* display: none; */
			}
			
		.slapTimerLocked, .slapPlayer:hover .slapTimer
			{
			bottom: 29px;
			background: none;
			}

		
		.centerPlayButtonContainer
			{
			/* display: table; */ 
			}
			
		.slapPlayer
			{
			display: inline-block;
			position: relative;
			width: 100%;
			}
			
		.slapPlayerDummy
			{
			margin-top: 100%;
			}
			
		.slapInfoBox
			{
			border: none !important;
			border-radius: 0px;
			}
			
		.slapInfoBoxInside
			{
			border-radius: 0px;
			margin-bottom: 15px;
			}
			
		.slapAutoscrollCheckbox
			{
			height: 10px;
			}
			
		.slapPlayerContainer
			{
			box-shadow: none;
			}
			
		.slapCommentsOuterContainer
			{
			border-radius: 0px;
			padding:0px;
			}
			
		.slapColumnContainer
			{
			display: block;
			text-align: left;
			height: 100%;
			margin:0px 0px 14px 0px;
			font-family: "Helvetica Neue","Roboto","Arial","Lato",helvetica,arial,sans;
			font-size: 13pt;
			font-weight: 400;
			}
			
		.slapColumnContainerStandalone
			{
			margin:0px 0px 0px 0px;
			}
			
		.slapColumnContainer textarea
			{
			font-family: "Helvetica Neue","Roboto","Arial","Lato",helvetica,arial,sans;
			}

		.slapAvatarImg
			{
			border-radius: 0px;
			}
			
		.slapInfoColumn
			{
			max-width: none;
			width:100%;
			border-radius: 0px;
			margin-right: 0px;
			}	
			
		.playerBox
			{
			border: none;
			border-radius: 0px;
			border: none !important;
			box-shadow: none !important;
			}

		.slapButtonContainer
			{
			float: none;
			text-align: right;
			margin-bottom: 10px;
			padding-right: 7px;
			}

		.slapNotesText
			{
			height: auto;
			}
	
		.slapFlex
			{
			display: block;
			}
	
		.slapNotesContainer
			{
			margin-top: -6px;
			}

		.slapNotes
			{
			border-radius: 0px;
			}

		.slapMusicBackgroundContainer
			{
			border-radius: 0px;
			position: absolute;top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			box-sizing: border-box;
			background: #000000;	
			padding: 63% 0px 65px 0px;
			}
			
		#slapsWords
			{
			}
			
		.fromTheArtistContainer
			{
			margin-top: 0px;
			}

		.slapArtistNotesBox
			{
			border-top: 1px solid #666666;
			border-bottom: 1px solid #666666;
			border-radius: 0px;
			margin-top: -3px;
			box-shadow: none;
			padding-bottom: 29px;
			height: auto;
			}
	
		.slapFromTheArtist
			{
			position: relative;
			display: inline-block;
			margin-bottom: 5px;
			}

		.slapUploadTd
			{
			width: auto;
			}
		
		.slapNavLinkContainer
			{
			display: block;
			}
			
		.slapFlex
			{
			display: block;
			padding:0px;
			}
			
		.slapQuestionsOuterContainer
			{
			margin-top: 0px;
			}
		
		.slapMusicWidth
			{
			width: 100%;
			}

		.slapQuestionsContainer
			{
			padding:20px 20px 20px 20px;
			}

		.slapDoneButton	
			{
			width: 100%;
			}

		.slapQuestionsHeadline
			{
			font-size: 14px;
			}
			
		.slapQuestionsDesc
			{
			margin-top: 5px;
			font-size: 13pt;		
			line-height: 1.4em;
			}

		.banner-container {
			padding: 10px 0;
		}

		.banner-body {
			flex-direction: column;
			background-image: url(/images/slaps/mixea-background-mobile.png);
			gap: 20px;
			font-size: 16px;
			padding: 20px 40px;
			border-radius: 0;
		}

		.logo-container {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.banner-body .mixea-logo {
			width: 70px;
		}

		.banner-body .banner-title {
			font-size: 16px;
		}

		.banner-button {
			font-size: 12px;
		}

	}
		
	@media screen and (min-width: 1155px) /* really big screens, 1155px and ABOVE */
		{
		
		.slapFlex
			{
			padding: 0px 0px 0px 0px;
			}
			
		.slapQuestionsHeadline
			{
			padding:10px 0px 10px 7px;
			}
		.slapButtonContainer
			{
			padding-right: 0px;
			}
		}
		
	.grid
		{
		grid-template-columns: repeat(5, 1fr);
		display: grid;
		grid-column-gap: 10px;
		}
		
	.grid .column
		{
		margin-bottom: 10px;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		}
		
@media screen and (min-width: 1155px)	
	{
	.grid
		{
		grid-template-columns: repeat(6, 1fr);
		}
	}

@media screen and (max-width: 909px)	
	{
	.grid
		{
		grid-template-columns: repeat(4, 1fr);
		}
	}

@media screen and (max-width: 720px)	
	{
	.grid
		{
		grid-template-columns: repeat(3, 1fr);
		}
	}

@media screen and (max-width: 580px)	
	{
	.grid
		{
		grid-template-columns: repeat(2, 1fr);
		}
	}