/* ==================================================================================== */
/* Settings for interface colours
/* ==================================================================================== */

:root {
/* dark controls */
    --interface-color: black;
    --interface-color-inverse: white;
    --time-bar-track: rgba(0,0,0,0.2); 
	--time-bar-track-progress: rgba(0,0,0,0.9);
	--playlist-on: rgba(0,0,0,0.1);
	--playlist-hover: rgba(0,0,0,0.2);
	--playlist-text-color: black;
	--playlist-play-color: white;
/* white controls */
/*    --interface-color: white;
    --interface-color-inverse: black;
    --time-bar-track: rgba(255,255,255,0.2); 
	--time-bar-track-progress: rgba(0,0,0,0.9);
	--playlist-on: rgba(255,255,255,0.1);
	--playlist-hover: rgba(255,255,255,0.2);
	--playlist-text-color: white;
	--playlist-play-color: black;*/
}	

/* ==================================================================================== */
/* PLAYLIST PAGE */
/* ==================================================================================== */

.haptic-track-info{
	width: 100%;
	padding: 0 32px;
}
.haptic-track-title{
	font-size: 24px;
}

.haptic-playlist{

}
.haptic-playlist ul{
	padding: 8px;
	clear: both;
	max-height: 300px;
	overflow-y: auto;
}
.haptic-playlist li{	
	display: flex;
	padding: 12px 0;
	position: relative;
	border-radius: 4px;
}
.haptic-playlist li .number{
	min-width: 32px;
	text-align: center;
	position: relative;
}
.haptic-playlist ul li.playing{
	background: rgba( 17,24,39,0.6 );
}
.haptic-playlist ul li:hover{
	background: rgba( 17,24,39,1 );
	cursor: pointer;
}
.haptic-playlist ul li:hover .number{
	color:black;	
}	
.haptic-playlist ul li:hover .number::after{		
	position: absolute;	
	display: block;
	padding: 0;
	margin: 0;
	content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white; /* Change color as needed */
    cursor: pointer;
	top: 4px;
	left: 50%;
	margin-left: -6px;
}
.haptic-playlist li .title{
}
.haptic-track-cover{
	background-color: #444;
	background-size: cover;
	width: 200px;
	height: 200px;

	border-radius: 12px;
	border:2px solid #111;
	box-shadow: 6px 12px 12px rgba(0,0,0,0.3);
	margin-bottom: 12px;
/*	float: left;*/
}
.haptic-track-time{
	padding: 6px 0;
	font-size: 12px;
	position: relative;
	display: flex;	
	align-items: center;
}
.haptic-time-bar{
	display: block;
	position: relative;
    overflow: hidden;
	margin: 6px;
	height: 8px;
	background: #666;
	border-radius: 8px;
	width: 100%;

}
.haptic-time-bar-percent{
	pointer-events: none;
	position: absolute;
	width: 0;
	top: 0;
	left: 0;
	bottom: 0;
	border-radius: 8px;

	background: red;
}

.haptic-play,
.haptic-record{
	position: relative;
	border-radius: 50%;
	border: none;
	background: white;
	width: 60px;
	height: 60px;
	margin: 10px;
	transition: transform 0.25s;
}
.haptic-play:hover,
.haptic-record:hover{
	transition: transform 0.25s;
	opacity: 0.8;
}

.haptic-pause,
.haptic-next,
.haptic-prev,
.haptic-pause,
.haptic-mute,
.haptic-ff,
.haptic-rw{
	position: relative;
	border-radius: 50%;
	border: none;
	width: 26px;
	height: 26px;
	transition: transform 0.25s;
}
.haptic-ff,
.haptic-rw{
	width: 30px;
	height: 30px;
}

.haptic-play:hover,
.haptic-record:hover,
.haptic-pause:hover,
.haptic-next:hover,
.haptic-prev:hover,
.haptic-pause:hover,
.haptic-mute:hover,
.haptic-ff:hover,
.haptic-rw:hover{
	opacity: 1;	
	transform: scale(1.2);
}

.haptic-play::before,
.haptic-record::before,
.haptic-pause::before,
.haptic-next::before,
.haptic-prev::before,
.haptic-ff::before,
.haptic-rw::before,
.haptic-pause::before,
.haptic-mute::before{
	content: '';
	width: 100%;
	height: 100%;
	margin-left: -50%;
	margin-top: -50%;
	position: absolute;
	top: 50%;
	left: 50%;
	background: white;
	opacity: 0.8;
}
.haptic-record::before{
	background: red;
}


.haptic-play::before,
.haptic-record::before{
	width: 30px;
	height: 30px;
	margin-left: -15px;
	margin-top: -15px;
	opacity: 0.8;
}

.haptic-ff::before,
.haptic-rw::before{
	width: 30px;
	height: 30px;
	margin-left: -13px;
	margin-top: -13px;
}

.haptic-play::before{
/*	background: black;	*/
	background: rgba( 17,24,39,1 );
}
.haptic-record::before{
	background: red;
}

/* ------------------------------------------------------------------------------------ */
/* ICONS */
/* ------------------------------------------------------------------------------------ */
.haptic-play::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'	 viewBox='0 0 32 32' %3E%3Cpath d='M26.6,13.4L11.6,4.2C9.6,3,7,4.5,7,6.8v18.4c0,2.3,2.6,3.8,4.6,2.6l15.1-9.2C28.6,17.4,28.6,14.6,26.6,13.4z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.play .haptic-play::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;'%3E %3Cpath d='M13,30H8c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C14,29.6,13.6,30,13,30z'/%3E%3Cpath d='M24,30h-5c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C25,29.6,24.6,30,24,30z'/%3E%3C/svg%3E") center/cover no-repeat;
}

.haptic-record::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'	 viewBox='0 0 32 32' %3E%3Ccircle cx='16' cy='16' r='12.2' /%3E%3C/svg%3E") center/cover no-repeat;
}
.record .haptic-record::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;'%3E %3Cpath d='M13,30H8c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C14,29.6,13.6,30,13,30z'/%3E%3Cpath d='M24,30h-5c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C25,29.6,24.6,30,24,30z'/%3E%3C/svg%3E") center/cover no-repeat;
	background: red;
}

.haptic-pause::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;'%3E %3Cpath d='M13,30H8c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C14,29.6,13.6,30,13,30z'/%3E%3Cpath d='M24,30h-5c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h5c0.6,0,1,0.4,1,1v26C25,29.6,24.6,30,24,30z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.haptic-prev::before,
.haptic-next::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32'%3E %3Cpath d='M21.6,13.4l-15-9.2C4.6,3,2,4.5,2,6.8v18.4c0,2.3,2.6,3.8,4.6,2.6l15.1-9.2C23.6,17.4,23.6,14.6,21.6,13.4z'/%3E %3Cpath d='M27.2,30h-1.5c-1.5,0-2.8-1.2-2.8-2.8V4.8C23,3.2,24.2,2,25.8,2h1.5C28.8,2,30,3.2,30,4.8v22.5C30,28.8,28.8,30,27.2,30z'/%3E %3C/svg%3E ") center/cover no-repeat;
}
.haptic-prev::before{
	transform: rotate(180deg);
}
.haptic-ff::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32'%3E%3Cpath d='M27.4,14.9h-1.2C25.7,8.8,20.5,4,14.3,4c-6.6,0-12,5.4-12,12s5.4,12,12,12c0.6,0,1-0.4,1-1s-0.4-1-1-1 c-5.1,0-9.4-3.9-9.9-9C3.8,11.5,7.8,6.6,13.3,6.1c5.5-0.6,10.4,3.4,10.9,8.9h-1.3c-0.5,0-0.8,0.5-0.5,0.9l2.2,3.9 c0.2,0.4,0.8,0.4,1.1,0l2.2-3.9C28.2,15.5,27.9,14.9,27.4,14.9z'/%3E %3Cpath d='M10.4,21.1c0.6,0,1-0.5,1-1v-7.6c0-0.6-0.5-1-1-1h0c-0.3,0-0.6,0.1-1,0.2l-1.3,0.4c-0.4,0.1-0.7,0.5-0.7,0.9 c0,0.5,0.4,0.9,0.9,0.9c0.1,0,0.3,0,0.4-0.1l0.7-0.2V20C9.4,20.6,9.8,21.1,10.4,21.1z'/%3E %3Cpath d='M16,14.8c-0.5,0-0.9,0.1-1.2,0.2l0.1-1.6h3.2c0.5,0,0.9-0.4,0.9-0.9s-0.4-0.9-0.9-0.9H14c-0.5,0-0.9,0.4-0.9,0.9l-0.2,3.2 c0,0.4,0.1,0.6,0.4,0.8c0.4,0.3,0.7,0.4,0.9,0.4c0.3,0,0.6-0.2,1.4-0.2c1,0,1.7,0.5,1.7,1.3v0c0,0.8-0.7,1.3-1.5,1.3 c-0.7,0-1.2-0.2-1.8-0.6c-0.2-0.1-0.3-0.2-0.6-0.2c-0.5,0-1,0.5-1,1c0,0.4,0.2,0.6,0.4,0.8c0.8,0.5,1.7,0.9,3,0.9 c2.1,0,3.5-1.3,3.5-3.3v0C19.3,15.7,17.9,14.8,16,14.8z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.haptic-rw::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' %3E %3Cpath d='M16,4C9.8,4,4.6,8.8,4.1,14.9H2.9c-0.5,0-0.8,0.5-0.5,0.9l2.2,3.9c0.2,0.4,0.8,0.4,1.1,0l2.2-3.9c0.2-0.4-0.1-0.9-0.5-0.9 H6.1C6.6,9.5,11.5,5.5,17,6.1c5.5,0.6,9.5,5.5,8.9,10.9c-0.5,5.1-4.8,9-9.9,9c-0.6,0-1,0.4-1,1s0.4,1,1,1c6.6,0,12-5.4,12-12 S22.6,4,16,4z'/%3E %3Cpath d='M12.5,11.4L12.5,11.4c-0.3,0-0.6,0.1-1,0.2l-1.3,0.4c-0.4,0.1-0.7,0.5-0.7,0.9c0,0.5,0.4,0.9,0.9,0.9c0.1,0,0.3,0,0.4-0.1 l0.7-0.2V20c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1v-7.6C13.5,11.8,13.1,11.4,12.5,11.4z'/%3E %3Cpath d='M21.4,17.9L21.4,17.9c0-2.2-1.4-3.1-3.3-3.1c-0.5,0-0.9,0.1-1.2,0.2l0.1-1.6h3.2c0.5,0,0.9-0.4,0.9-0.9s-0.4-0.9-0.9-0.9 h-4.1c-0.5,0-0.9,0.4-0.9,0.9l-0.2,3.2c0,0.4,0.1,0.6,0.4,0.8c0.4,0.3,0.7,0.4,0.9,0.4c0.3,0,0.6-0.2,1.4-0.2c1,0,1.7,0.5,1.7,1.3 v0c0,0.8-0.7,1.3-1.5,1.3c-0.7,0-1.2-0.2-1.8-0.6c-0.2-0.1-0.3-0.2-0.6-0.2c-0.5,0-1,0.5-1,1c0,0.4,0.2,0.6,0.4,0.8 c0.8,0.5,1.7,0.9,3,0.9C20,21.1,21.4,19.9,21.4,17.9z'/%3E %3C/svg%3E") center/cover no-repeat;
}
.haptic-mute::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32'%3E %3Cpath d='M23.5,2.1c-0.3-0.2-0.7-0.2-1,0L6.7,11H3c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h3.7l15.8,8.9C22.7,30,22.8,30,23,30 c0.6,0,1-0.4,1-1V3C24,2.6,23.8,2.3,23.5,2.1z'/%3E %3Cpath d='M25,18.1c0,0.6,0.4,1,1,1c1.3,0,2.3-1.3,2.3-3s-1-3-2.3-3c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.1,0.1,0.3,0.4,0.3,1.1 c0,0.6-0.2,1-0.3,1C25.4,17.1,25,17.5,25,18.1z'/%3E %3Cpath d='M26,10c-0.6,0-1,0.4-1,1s0.4,1,1,1c1.7,0,3,1.8,3,4c0,2.2-1.3,4-3,4c-0.6,0-1,0.4-1,1s0.4,1,1,1c2.8,0,5-2.7,5-6 C31,12.7,28.8,10,26,10z'/%3E %3C/svg%3E") center/cover no-repeat;
}
.muted .haptic-mute::before{
	mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32'%3E %3Cpath d='M25.5,2.2c-0.3-0.2-0.7-0.2-1,0L6.8,11H3c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h3.8l17.8,8.9C24.7,30,24.8,30,25,30 c0.2,0,0.4-0.1,0.5-0.1c0.3-0.2,0.5-0.5,0.5-0.9V3C26,2.7,25.8,2.3,25.5,2.2z M19.7,18.3c0.4,0.4,0.4,1,0,1.4c0,0,0,0,0,0 c-0.4,0.4-1,0.4-1.4,0c0,0,0,0,0,0L16,17.4l-2.3,2.3c-0.4,0.4-1,0.4-1.4,0c0,0,0,0,0,0c-0.4-0.4-0.4-1,0-1.4c0,0,0,0,0,0l2.3-2.3 l-2.3-2.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l2.3,2.3l2.3-2.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L17.4,16L19.7,18.3z'/%3E %3C/svg%3E") center/cover no-repeat;
}

.haptic-track-time .haptic-ff{
	margin-left: 14px;
}
.haptic-track-time .haptic-rw{
	margin-right: 14px;
}



/* ------------------------------------------------------------------------------------ */

#haptic-audio-player{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	color: var(--playlist-text-color);
}
.haptic-visualizer-container{
	position: absolute;
	top: 300px;
	left: 0;
	right: 0;		
	z-index: 0;
	opacity: 0.5;
}
.haptic-visualizer-container canvas{
	width: 100%;
	height: auto;
	min-height: 300%;
}
.haptic-rest-of-player{
	position: relative;
	z-index: 1;
}

.haptic-track-cover-container{
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 2rem;
/*		margin-bottom: 2rem;*/
}
.haptic-track-cover {
    content: '';
    position: relative;
    width: 60%;     
    height: 0;      
    padding-bottom: 60%;
    border-radius: 0;
    box-shadow: none;
    border: 2px solid var(--interface-color);
	background-size: cover;
	background-position: 50%;
    z-index: 2;
}

.haptic-track-cover::before {
/*	    content: '';*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 100%;
    height: 0;      
    border: 2px solid var(--interface-color); 
    box-shadow: none;
    border-radius: 0;
    background: var(--interface-color-inverse);
    z-index: auto;
    transform: translateX(-10px) translateY(10px);
}

.haptic-track-info{
	padding: 0;
}
.haptic-track-info{
	font-size: inherit;
	text-align: center;
}
.haptic-track-title{
    font-size: 160%;	
    line-height: 1.2;    
    min-height: 5rem;
    display: flex;
    justify-content: center;
    align-items: end;
    padding-bottom: 1rem;
}

.haptic-track-time{
	font-size: 80%;
}
.haptic-time-bar{
	background: var(--time-bar-track);
}
.haptic-time-bar-percent{
	background: var(--time-bar-track-progress);		
}
.haptic-controls{
	padding: 0;
    display: flex;
    margin: 0;
    justify-content: space-between;
    align-items: center;
}
.haptic-controls .centerset{
	display: flex;
	align-items: center;
	justify-content: center;	
}
.haptic-pause, .haptic-next, .haptic-prev, .haptic-pause, .haptic-mute, .haptic-ff, .haptic-rw{
	background: transparent;
	position: relative;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius:0;
	cursor: pointer;
}
.haptic-ff::before, .haptic-rw::before{
	background: var(--interface-color);
	position: absolute;
	width: 3rem;
	height: 3rem;		
	top: 0.8rem;
	left: 0.9rem;
}
.haptic-next::before, .haptic-prev::before{
	background: var(--interface-color);		
	top: 2rem;
	left: 2rem;
	width: 2rem;
	height: 2rem;	
}
.haptic-play{
	width: 5rem;
	height: 5rem;
	background: var(--interface-color);		
	cursor: pointer;
}
.haptic-play::before{
	background: var(--playlist-play-color);
	opacity: 1;
	width: 33px;
    height: 33px;
    margin-left: -16px;
    margin-top: -16px;
}
.haptic-playlist ul li.playing{
	background: var(--playlist-on);
}
.haptic-playlist ul li:hover{
	background: var(--playlist-hover);
}	
.haptic-playlist ul li:hover .number{
	color: transparent;
}
.haptic-playlist ul li:hover .number::after{
	width: 0rem;
	height: 0rem;
	border-top: 0.6rem solid transparent;
	border-bottom: 0.6rem solid transparent;
	border-left: 1rem solid var(--interface-color);
	top: 0.3rem;
}
.haptic-playlist li .number{
	min-width: 3rem;
}

@media (min-width: 640px) {
	.haptic-rest-of-player{
		display: flex;
		flex-wrap: wrap;
	}
	.haptic-visualizer-container{
		left: 35%;
		bottom: auto;
		top: 0;
	}

	.haptic-track-cover-container{
		width: 30%;
		justify-content: start;
	}
	.haptic-track-info{
		width: 60%;
		margin-top: 1rem;
		margin-left: 5%;
	}
	.haptic-track-cover{
		width: 100%;	
		padding-bottom: 100%;
	}	
	.haptic-playlist{
		width: 100%;
	}
	.haptic-playlist ul{
		width: 100%;
		max-height: none;
		min-width: none;
		padding-left: 0;
	}
}

@media (min-width: 782px) {
	.haptic-track-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.haptic-playlist{
		width: 65%;
		margin-left: 35%;
	}
}


/* ==================================================================================== */
/* SEARCH PAGE */
/* ==================================================================================== */

.acp-search-form{
	margin-bottom: 4rem !important;
}

@media (min-width: 1200px) {
	.select2-container--default .select2-selection--single .select2-selection__rendered{
		line-height: 1.5;
	}
}
@media only screen and (max-width: 800px) {
    .select2-container--default .select2-search--inline {
        display: none;
    }
}

.acp-search-tags-container,
.acp-search-categories-container,
.acp-search-text-container{
	display: flex;
	flex-direction: column;
}
.acp-search-button-container{
	display: flex;
	flex-direction: column;
}
.acp-search-button{
	min-height: 60px;
}

.acp-search-button-container label,
.acp-search-text-container label,
.acp-search-categories-container label,
.acp-search-tags-container label{
	display: block;
	font-size: 75%;	
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.acp-search-tags,
.acp-search-categories{
	padding: 1rem;
}
.acp-search-text{
	display: block;
	width: auto;	
	min-height: 60px;
	box-sizing: border-box;
	font-size: 1.3rem;
}
.acp-search-button-container{
}

/* ------------------------------------------------------------------------------------ */
/* SELECT2 FUDGE */
.select2-container .select2-search__field, .select2-container .select2-selection {
	font-size: 1.3rem !important;	
}
.select2-selection.select2-selection--multiple{
	min-height: 60px;
}
.select2-container .select2-selection--multiple .select2-selection__rendered{
	font-size: 1rem;
}
.select2-container .select2-dropdown{
	padding: 0 !important;
}
.select2-container .select2-container--default .select2-selection--multiple .select2-selection__choice{
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 5px !important;
	margin-bottom: 5px !important;
}
.select2-container .select2-selection__choice{
	padding: 5px 5px 5px 20px !important;
}
.select2-dropdown {
/*    top: 32px !important;*/
}
body.admin-bar .select2-dropdown {
    margin-top: 32px; /* Adjust this value based on your requirements */
}
@media screen and (max-width: 782px) {
    body.admin-bar .select2-dropdown {
        margin-top: 46px; /* The admin bar is taller on smaller screens */
    }
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}
.select2-dropdown.select2-dropdown--below{
	padding: 0;
}
.select2-container .select2-selection.select2-selection--single,
.select2-container .select2-selection.select2-selection--multiple,
.select2-container .select2-dropdown, .select2-container .select2-selection{
	padding: 10px;
    min-height: 60px;
    line-height: 1;
    align-items: center;
    box-sizing: border-box;
}
.select2-container .select2-selection.select2-selection--single{
	display: flex;
}
.select2-container .select2-results__option{
	font-size: 1.3rem;	
	padding: 0.5rem;	
}
.select2-container,
.select2-container .select2-results__options{
	font-size: 1.3rem;	
}
.select2-container .select2-dropdown{
	font-size: 1.3rem;		
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	padding: 4px!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
	padding-left: 8px!important;	
}
/* ------------------------------------------------------------------------------------ */

@media (min-width: 782px) {

	#acp-search-form{
		display: flex;
	}
	.acp-search-tags-container,
	.acp-search-categories-container,
	.acp-search-text-container{
		margin-right: 1rem;
		width: 25%;	
	}
	.acp-search-button-container{
		width: 20%;
	}
	.acp-thumbnail{

	}
}
@media (min-width: 1100px) {
	.select2-container .select2-selection.select2-selection--single,
	.acp-search-text{
		font-size: 1.3rem;
	}
}

.acp-search-result{
	width: 100%;
	height: 100%;
	position: relative;
}
.acp-thumbnail{
	height: 0;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
	background-size: cover;
	margin-bottom: 2rem;
}
.acp-thumbnail img{
	width: 100%;
	height: auto;
}
.acp-search-result .acp-text-area{
	padding-bottom: 5rem;
}
.acp-search-result .api-title{
	margin-top: 0;
}
.acp-patreon-locked{
	width: 1.3rem;
	position: absolute;
	top: 5px;
	right: 15px;
}
.acp-search-result .api-link{}
.acp-search-result .acp-excerpt{}
.acp-search-result .acp-tags{
	display: none;
}
.acp-categories{}
.acp-cta{
	position: absolute;
	bottom: 1rem;
}
.acp-cta-link{}

#acp-search-results{
	display: grid;
	grid-gap: 2rem; 		
	grid-template-columns: repeat(1, 1fr); /* three equal-width columns */
	padding-top: 4rem;
	margin-bottom: 2rem;
}
.acp-load-more-container{
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 2px solid rgba(0,0,0,0.6);
	margin-bottom: 8rem;
}
.acp-load-more{

}
@media (min-width: 782px) {
	#acp-search-results{
		grid-template-columns: repeat(3, 1fr); /* three equal-width columns */
	}

	.acp-search-result{

	}
}

/* ==================================================================================== */
/* TAGS PAGE */
/* ==================================================================================== */
.acp-tags label{
	display: block;
	font-size: 75%;	
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}
.acp-tags-display {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    grid-gap: 2rem 3rem; 
    /* Adjust the gap between the grid items */
}
@media (min-width: 782px) {
	.acp-tags-display {
	    grid-template-columns: repeat(2, 1fr); /* Creates 2 columns with equal width */
	}
}
@media (min-width: 1024px) {
	.acp-tags-display {
	    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns with equal width */
	}
}
#acp-tag-search-form{
	margin-bottom: 3rem;
}
.acp-tag-display {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}

.acp-tags-search-text-container{
	position: relative;
	width: 100%;
/*	max-width: 600px;*/
}
.acp-tags-search{
	width: 100%;
	font-size: 1.3rem;
	min-height: 60px;
	box-sizing: border-box;
	padding-left: 1rem;
}
.acp-tags-display{

}
.acp-tag-display{

}
.acp-tag-title{	
	display: block;
	border-bottom: 2px solid rgba(0,0,0,0.5);
	padding-bottom: 1rem;
	margin-top: 0;
}
.acp-tag-link{
	text-decoration: none;
	position: relative;
/*	display: flex;*/
/*	align-items: end;*/
}
.acp-tag-link span{
	width: 100%;
}
.acp-tag-link .acp-tag-count{
	position: absolute;
	top: 0.5rem;
	padding-left: 0.5rem;
	font-size: min(max(1rem, 1.8vw), 1.3rem)
}
.acp-tag-link .acp-tag-count{
}
a.acp-tag-link-description:hover{
	background: none !important;
	text-decoration: underline;
}
acp-tag-link:hover{
	text-decoration: underline;
}
.acp-tag-link:hover small{
	text-decoration: none!important;
}
.acp-tag-description{

}


/* ==================================================================================== */
/* GATE */
/* ==================================================================================== */
	#audio_custom_cover{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9998;
		background: rgba(0,0,0,0.6);
		transition: all	1s;
	}
	#audio_custom_gate{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999;
	}
	.audio_custom_gate_inner{
	    transform: translate(-50%, -50%); /* Centering the element */
		display: block;
		position: absolute;
		background: white;
		left: 50%;
		top: 50%;
    	padding: 1.5rem;
	    font-size: 0.85rem;
		width: 80%;
		max-width: 600px;
		border-radius: 1rem;
		max-height: 100vh;
		overflow-y: auto;
	}
	.audio_custom_gate_inner h2{
		margin-top: 0;
		margin-bottom: 0;
	}
	.acp-gate-label{
		display: block;
		margin: 0 1rem;
	}
	#audio_custom_confirm{
		width: 100%;
/*		text-align: center;*/
		padding-top: 2rem;
	}
	#audio_custom_confirm_button{
		margin: auto 2rem auto 0;
	}
	#audio_custom_gate fieldset{
		padding: 0;
		border: none;
	}
	#audio_custom_gate legend{

	}

	.audio_custom_gate_terms{
		font-size: 12px;	
		display: block;
		margin-top: 1rem;
		margin-bottom: -1rem;
	}
	.audio_custom_gate_terms a{
		margin: 0 0.5rem 0 -0.5rem ;
		padding: 0.5rem;
		display: inline-block;
	}

@media (min-width: 700px) {
  .audio_custom_gate_inner {
	font-size: 1.25rem;
	padding: 4rem;
  }
}

body.accessibility .lovebird-noise{
	opacity: 0;
}

/* ==================================================================================== */
/* HAPTICS SETTINGS/DISPLAY */
/* ==================================================================================== */
.haptic_status{
	display: flex;
    justify-content: center;
}
#haptic_status{
	position: relative;
	font-size: 11px;
	padding: 2px 6px 2px 24px;
	background: var(--interface-color);
	color:var(--playlist-play-color);
	border-radius: 10px;
}
#haptic_status span svg{
	position: absolute;
	left: 4px;
}



/* ==================================================================================== */
/* FAVE AND PLAY LATER */
/* ==================================================================================== */


/* ------------------------------------------------------------------------------------ */
/* FAVE ICONS */
/* ------------------------------------------------------------------------------------ */

.acp-pre-audio{
	display: flex;
    justify-content: flex-end;
    padding: 0 10px;
}

.acp-text-area {
	position: relative;
}
.acp-search-pre{
/* 	display: none; */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: right;
	margin-top: -4.5rem;
	margin-right: 0.5rem;
}

.play-later-toggle, .play-later-toggle.on{	
	position: relative;
	margin-left: 0.25rem;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: black;
}
.play-later-toggle::before, .play-later-toggle.on::before{	
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
    height: 1rem;
    top: 0.5rem;
    left: 0.5rem;
	content: '';
	background: white;
}
.favourite-toggle, .favourite-toggle.on{
	position: relative;
/* 	margin-left: 0.25rem; */
	display: inline-block;
	width: 2rem;
	height: 2rem;
}
.favourite-toggle::before, .favourite-toggle.on::before{	
	position: absolute;
	top: 0;
	left: 0;
	width: 2rem;
    height: 2rem;
	content: '';
	background: white;
}

.favourite-toggle::before{
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.favourite-toggle.on::before{
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.play-later-toggle::before{
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.play-later-toggle.on::before{
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/cover no-repeat;
}



/* ==================================================================================== */
/* SPIRALS */
/* ==================================================================================== */

.spiral {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, #000 10%, transparent 10% 20%, #000 20% 30%, transparent 30% 40%, #000 40%);
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}