<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000"/>

<meta http-equiv="origin-trial" content="AnRmlrcHLsudj8aGL4wuYT8DJjLQ4QMy7JFOn+hfB/q0j2R0ll7P1wxl3a9cAO5+FsJg/qj8qN4Ijv6LgmLWeA8AAAB2eyJvcmlnaW4iOiJodHRwczovL2JlYXRwb3J0LmNvbTo0NDMiLCJmZWF0dXJlIjoiVW5yZXN0cmljdGVkU2hhcmVkQXJyYXlCdWZmZXIiLCJleHBpcnkiOjE2Mzk1MjYzOTksImlzU3ViZG9tYWluIjp0cnVlfQ==">

<meta name="Description" content="Beatport DJ is the world's first web based DJ application built from the ground up for music discovery and playlist management." />
<meta name="Keywords" content="youdj, dj online, mix online, cloud djing, cloud dj, mixer, online dj player, web dj, dj software, mixing software, mix mp3, online music, mp3, mixer, dj, disc jockey, party, html5, beatmatching, sync, bpm, beat, radio, webradio, dvs, vinyl, traktor, serato, mixvibes, virtualdj, scratch, playlist, soundcloud" />
<meta name="Author" content="YouDJ" />
<base target="_blank">

<title>Beatport DJ</title>
<link rel="icon" type="image/png" sizes="32x32" href="/picx_bp/bpdj_32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/picx_bp/bpdj_16.png">
<link rel="apple-touch-icon" href="/picx_bp/bpdj_192.png">
<link rel="manifest" href="/bpdj.webmanifest">

<meta property="fb:app_id" content="371510306225184" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dj.beatport.com" />
<meta property="og:title" content="Beatport DJ" />
<meta property="og:image" content="https://dj.beatport.com/picx_bp/facebook.png" />
<meta property="og:description" content="Beatport DJ is the world's first web based DJ application built from the ground up for music discovery and playlist management." />

<link rel="stylesheet" type="text/css" href="/_style_bp.css?_=v766"></script>
<link href="/static/css/main.01c44fbf.chunk.css" rel="stylesheet">

<script type="text/javascript" src="/jquery.js?_=minimize0"></script>
<script type="text/javascript" src="/index_bp.js?_=v80"></script>

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-651667-95', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>

</head>

<body bgcolor="#19191B">

<!-- MAIN ------------------------------------------------------------------------------------------------------------------------------------------------------>

<div id="blurfirst" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1050; overflow: hidden auto; text-align: center; background: rgba(18, 18, 18, 0.96) !important;  background-size: 4px 4px !important; display: none " ></div>
<!-- <script> if (localStorage.getItem('fl')) { document.body.removeChild(document.getElementById('blurfirst'));  } else { document.getElementById('blurfirst').style.display = `block`; } </script> -->

<div id="big_bg" class="big_bg" style="display:none;"></div>
<div id="tooltip" class="tooltip" style="position:absolute; z-index:2002; display:none; top:0px; left:0px; width:400px;"></div>
<div id="tooltip_close" onmousedown="closeToolTips()" style="position:absolute; z-index:2000; display:none; background:rgba(0,0,0,0); top:0px; left:0px; width:100%; height:100%"></div>
<div id="browser" class="browser nicefont" style="display:none; position:absolute; bottom:0px; left:0px; z-index:9999; opacity:0;"></div>
<div id="custom_drag_layer"></div>

<!-- HEADER -->
<div id="alpha1" style="display: flex; justify-content: center; position:absolute; width:100%; min-width:1410px; top:0px; height:32px; background:#000;">
	<div id="topbar" style="position:relative; width:100%; height:32px; max-width:1410px;">
		<a target="_self" href="/home"><svg style="position:absolute;left: -2px;top: -1px;" width="230" height="55" x="0" y="0" viewBox="220 250 380 112">
			<rect x="452.4" y="266.5" fill="#38383A" width="156.8" height="34.8"/>
			<path fill="#01FF8A" d="M477.2,275.1c1.2,0,2.2,0.2,3.1,0.7c0.9,0.4,1.6,1.1,2.1,1.9c0.5,0.8,0.7,1.8,0.7,2.9c0,1.1-0.2,2.1-0.7,2.9c-0.5,0.8-1.2,1.4-2.1,1.9c-0.9,0.4-1.9,0.7-3.1,0.7h-3.9v6.2h-2.8v-17.1L477.2,275.1L477.2,275.1z M473.3,283.5h3.7c1,0,1.8-0.3,2.4-0.8c0.6-0.6,0.9-1.3,0.9-2.2c0-0.9-0.3-1.7-0.9-2.2c-0.6-0.6-1.4-0.8-2.4-0.8h-3.7L473.3,283.5L473.3,283.5z"/>
			<path fill="#01FF8A" d="M496.2,279.7v12.5h-2.3l-0.3-1.6c-0.9,1.2-2.2,1.7-3.8,1.7c-1.5,0-2.7-0.4-3.6-1.4c-0.9-0.9-1.4-2.4-1.4-4.4v-6.9h2.6v6.6c0,1.2,0.2,2.2,0.7,2.8c0.5,0.7,1.2,0.9,2.2,0.9c1,0,1.8-0.4,2.4-1.1c0.6-0.8,0.8-1.7,0.8-3.1v-6.2L496.2,279.7L496.2,279.7z"/>
			<path fill="#01FF8A" d="M508.5,280.3c0.9,0.5,1.6,1.2,2.1,2.2c0.5,0.9,0.8,2.1,0.8,3.4c0,1.3-0.2,2.4-0.8,3.3c-0.6,0.9-1.2,1.7-2.1,2.3c-0.9,0.6-1.9,0.8-3.1,0.8c-0.9,0-1.7-0.2-2.4-0.6c-0.7-0.3-1.2-0.8-1.7-1.4l-0.3,1.8h-2.3v-17h2.6v6.4c1-1.3,2.3-2,4.1-2C506.6,279.5,507.6,279.8,508.5,280.3z M507.7,289c0.7-0.8,1-1.8,1-3s-0.3-2.2-1-3s-1.6-1.2-2.7-1.2c-1.1,0-1.9,0.4-2.6,1.2c-0.7,0.8-1,1.7-1,3c0,1.2,0.3,2.3,1,3.1c0.7,0.8,1.6,1.2,2.6,1.2C506.1,290.1,507,289.7,507.7,289z"/>
			<path fill="#01FF8A" d="M513.4,275.1h2.6v17.1h-2.6V275.1z"/>
			<path fill="#01FF8A" d="M521.2,275.1c0.3,0.3,0.4,0.7,0.4,1.1c0,0.4-0.2,0.8-0.4,1.1c-0.3,0.3-0.7,0.4-1.2,0.4c-0.4,0-0.8-0.2-1.2-0.4c-0.3-0.3-0.4-0.7-0.4-1.1c0-0.4,0.2-0.8,0.4-1.1c0.3-0.3,0.7-0.4,1.2-0.4C520.4,274.7,520.8,274.8,521.2,275.1z M518.7,279.7h2.6v12.5h-2.6V279.7z"/>
			<path fill="#01FF8A" d="M533.6,291.1c-1,0.8-2.3,1.2-3.9,1.2c-1.2,0-2.3-0.3-3.3-0.8c-0.9-0.6-1.7-1.3-2.2-2.3c-0.5-1-0.8-2.1-0.8-3.3s0.3-2.4,0.8-3.3c0.5-0.9,1.3-1.7,2.2-2.2c0.9-0.6,2.1-0.8,3.3-0.8c1.6,0,2.8,0.4,3.8,1.2c1,0.8,1.6,1.9,1.8,3.3h-2.7c-0.2-0.7-0.6-1.3-1.1-1.7c-0.6-0.4-1.2-0.7-2-0.7c-1.1,0-1.9,0.4-2.6,1.2s-0.9,1.7-0.9,3c0,1.2,0.3,2.2,0.9,3c0.7,0.8,1.5,1.2,2.6,1.2c0.8,0,1.5-0.2,2-0.7c0.6-0.4,0.9-1,1.1-1.7h2.7C535.2,289.1,534.6,290.3,533.6,291.1z"/>
			<path fill="#01FF8A" d="M550.3,275.1c1.9,0,3.3,0.4,4.3,1.2c1.1,0.8,1.6,1.9,1.6,3.3c0,1-0.3,1.8-0.8,2.5c-0.6,0.7-1.3,1.1-2.4,1.3c2.6,0.4,3.8,1.8,3.8,4c0,1.5-0.6,2.6-1.6,3.5c-1.1,0.8-2.7,1.3-4.7,1.3h-6.5v-17.1H550.3L550.3,275.1z M546.8,282.3h3.6c0.9,0,1.7-0.2,2.2-0.7s0.8-1.1,0.8-1.8c0-0.8-0.3-1.4-0.8-1.8c-0.6-0.4-1.3-0.7-2.2-0.7h-3.6V282.3z M546.8,289.8h3.7c1.1,0,1.9-0.2,2.6-0.7c0.6-0.4,0.9-1.1,0.9-1.8c0-0.8-0.3-1.5-0.9-1.9c-0.6-0.4-1.4-0.7-2.5-0.7h-3.7L546.8,289.8L546.8,289.8z"/>
			<path fill="#01FF8A" d="M559.1,282.6c0.5-0.9,1.2-1.7,2.2-2.3c0.9-0.6,1.9-0.8,3.2-0.8s2.3,0.2,3.2,0.7c0.9,0.5,1.6,1.2,2.2,2.1s0.8,1.9,0.8,3.2c0,0.3,0,0.7-0.1,1H561v0.1c0.1,1.1,0.4,1.9,1,2.6c0.6,0.7,1.4,0.9,2.4,0.9c0.8,0,1.5-0.2,2.1-0.6s0.9-0.9,1.1-1.6h2.6c-0.2,1.3-0.8,2.3-1.8,3.1c-1,0.8-2.3,1.2-3.7,1.2c-1.3,0-2.4-0.3-3.4-0.8c-0.9-0.6-1.7-1.3-2.3-2.2c-0.6-0.9-0.8-2.1-0.8-3.3C558.3,284.7,558.5,283.5,559.1,282.6z M567.8,284.6c-0.1-0.9-0.5-1.6-1.1-2.2c-0.6-0.5-1.4-0.8-2.3-0.8c-0.8,0-1.6,0.3-2.2,0.8c-0.6,0.6-1,1.2-1.1,2.1L567.8,284.6L567.8,284.6z"/>
			<path fill="#01FF8A" d="M572.7,282h-2.2v-2.3h2.2v-3.5h2.7v3.5h3v2.3h-3v6.5c0,0.5,0.1,0.8,0.3,1.1s0.6,0.3,1,0.3h2v2.3h-2.5c-1.2,0-2.1-0.3-2.6-0.8c-0.6-0.6-0.8-1.4-0.8-2.6L572.7,282L572.7,282z"/>
			<path fill="#01FF8A" d="M591.9,289.8v2.3h-1.4c-0.8,0-1.4-0.2-1.7-0.5c-0.3-0.3-0.6-0.8-0.6-1.5c-0.9,1.4-2.3,2.2-4.1,2.2c-1.4,0-2.5-0.3-3.3-0.9c-0.8-0.7-1.3-1.6-1.3-2.7c0-1.3,0.4-2.3,1.4-2.9c0.9-0.7,2.2-1.1,4-1.1h3.2v-0.8c0-0.7-0.2-1.2-0.7-1.6c-0.5-0.4-1.2-0.6-2-0.6c-0.8,0-1.4,0.2-1.9,0.5c-0.5,0.3-0.8,0.8-0.9,1.3H580c0.1-1.3,0.7-2.2,1.7-2.9c0.9-0.7,2.3-1.1,3.8-1.1c1.7,0,3,0.4,3.9,1.2c0.9,0.8,1.4,1.9,1.4,3.3v4.9c0,0.6,0.3,0.9,0.8,0.9H591.9L591.9,289.8z M587.9,286.6h-3.3c-0.8,0-1.4,0.2-1.9,0.5c-0.4,0.3-0.7,0.8-0.7,1.4c0,0.6,0.2,0.9,0.6,1.3c0.4,0.3,0.9,0.5,1.7,0.5c1.1,0,1.9-0.3,2.6-0.9s0.9-1.4,0.9-2.3L587.9,286.6L587.9,286.6z"/>
			<path fill="#FFFFFF" d="M213.6,266.4c3.8,0,6.8,0.8,8.9,2.4c2.1,1.6,3.2,3.8,3.2,6.7c0,2.1-0.6,3.8-1.7,5.2c-1.1,1.4-2.7,2.3-4.8,2.7c5.2,0.9,7.9,3.7,7.9,8.3c0,3-1.1,5.4-3.4,7.2c-2.3,1.7-5.5,2.6-9.6,2.6h-13.3v-35H213.6z M206.5,281.2h7.3c2,0,3.5-0.5,4.6-1.4c1.1-0.9,1.6-2.1,1.6-3.7c0-1.6-0.5-2.8-1.6-3.7c-1.1-0.9-2.6-1.3-4.6-1.3h-7.3V281.2z M206.5,296.5h7.6c2.3,0,4-0.5,5.2-1.4c1.2-0.9,1.8-2.2,1.8-3.8c0-1.7-0.6-3-1.9-4c-1.2-0.9-3-1.4-5.2-1.4h-7.6V296.5z"/>
			<path fill="#FFFFFF" d="M229.8,281.7c1.1-2,2.5-3.5,4.4-4.6c1.9-1.1,4-1.6,6.5-1.6c2.5,0,4.6,0.5,6.5,1.5c1.9,1,3.4,2.4,4.5,4.3c1.1,1.8,1.6,4,1.7,6.5c0,0.7-0.1,1.4-0.2,2.1h-19.3v0.3c0.1,2.2,0.8,4,2.1,5.3c1.3,1.3,3,2,5.1,2c1.7,0,3.1-0.4,4.2-1.2c1.1-0.8,1.9-1.9,2.3-3.3h5.4c-0.5,2.6-1.7,4.7-3.8,6.4c-2.1,1.7-4.6,2.5-7.7,2.5c-2.7,0-5-0.5-7-1.6c-2-1.1-3.5-2.6-4.6-4.6c-1.1-2-1.6-4.3-1.6-6.9C228.2,286,228.7,283.7,229.8,281.7z M247.8,285.8c-0.2-1.9-1-3.3-2.2-4.4c-1.3-1.1-2.8-1.6-4.7-1.6c-1.8,0-3.3,0.5-4.6,1.6c-1.3,1.1-2,2.5-2.2,4.3H247.8z"/>
			<path fill="#FFFFFF" d="M279.5,296.7v4.7h-2.9c-1.7,0-2.9-0.3-3.6-1.1c-0.7-0.7-1.1-1.7-1.1-3.1c-1.9,2.9-4.8,4.4-8.5,4.4c-2.9,0-5.2-0.7-6.9-2c-1.7-1.3-2.6-3.2-2.6-5.5c0-2.6,0.9-4.7,2.8-6.1c1.9-1.4,4.6-2.1,8.2-2.1h6.5v-1.6c0-1.4-0.5-2.6-1.5-3.4c-1-0.8-2.4-1.2-4.2-1.2c-1.6,0-2.9,0.3-3.9,1c-1,0.7-1.6,1.6-1.8,2.7h-5.3c0.3-2.6,1.4-4.6,3.4-6c2-1.4,4.6-2.1,7.9-2.1c3.4,0,6.1,0.8,8,2.4c1.9,1.6,2.8,3.9,2.8,6.9v10.1c0,1.2,0.6,1.8,1.7,1.8H279.5z M271.4,290h-6.7c-1.7,0-3,0.3-3.9,1c-0.9,0.7-1.4,1.6-1.4,2.9c0,1.1,0.4,2,1.3,2.7c0.9,0.7,2,1,3.5,1c2.2,0,4-0.6,5.2-1.8c1.3-1.2,1.9-2.8,1.9-4.8V290z"/>
			<path fill="#FFFFFF" d="M281.6,280.5h-4.5v-4.8h4.5v-7.2h5.5v7.2h6.2v4.8H287v13.4c0,1,0.2,1.7,0.6,2.1c0.4,0.4,1.1,0.6,2.1,0.6h4.1v4.8h-5.2c-2.4,0-4.2-0.6-5.3-1.7c-1.1-1.1-1.7-2.9-1.7-5.3V280.5z"/>
			<path fill="#FFFFFF" d="M315.2,277c1.8,1.1,3.3,2.6,4.3,4.6c1,2,1.6,4.3,1.6,7c0,2.6-0.5,4.9-1.6,6.9c-1,2-2.5,3.5-4.3,4.6c-1.8,1.1-3.9,1.6-6.3,1.6c-1.9,0-3.6-0.4-5-1.1c-1.4-0.7-2.5-1.7-3.4-2.9v13.6h-5.4v-35.6h4.7l0.7,3.8c2.1-2.7,4.9-4.1,8.4-4.1C311.2,275.5,313.3,276,315.2,277z M313.4,294.7c1.4-1.6,2.1-3.7,2.1-6.2c0-2.5-0.7-4.6-2.1-6.2c-1.4-1.6-3.2-2.4-5.4-2.4c-2.2,0-4,0.8-5.4,2.3c-1.4,1.6-2.1,3.6-2.1,6.1c0,2.6,0.7,4.7,2.1,6.3c1.4,1.6,3.2,2.4,5.4,2.4C310.2,297.1,312.1,296.3,313.4,294.7z"/>
			<path fill="#FFFFFF" d="M328.9,300c-2-1.1-3.5-2.6-4.6-4.6c-1.1-2-1.6-4.3-1.6-6.9c0-2.6,0.5-4.8,1.6-6.8c1.1-2,2.6-3.5,4.6-4.6c2-1.1,4.3-1.7,6.8-1.7c2.6,0,4.8,0.6,6.8,1.7c2,1.1,3.5,2.6,4.6,4.6c1.1,2,1.6,4.3,1.6,6.8c0,2.6-0.5,4.9-1.6,6.9c-1.1,2-2.6,3.5-4.6,4.6c-2,1.1-4.3,1.6-6.8,1.6C333.1,301.7,330.9,301.1,328.9,300z M341.2,294.7c1.4-1.6,2.1-3.6,2.1-6.1s-0.7-4.5-2.1-6.1c-1.4-1.6-3.2-2.4-5.5-2.4c-2.3,0-4.1,0.8-5.5,2.4c-1.4,1.6-2.1,3.6-2.1,6.1s0.7,4.5,2.1,6.1c1.4,1.6,3.2,2.4,5.5,2.4C338,297.1,339.8,296.3,341.2,294.7z"/>
			<path fill="#FFFFFF" d="M364.8,275.8v5.1h-2.4c-2.2,0-3.9,0.7-4.9,2.2c-1,1.5-1.5,3.3-1.5,5.5v12.9h-5.4v-25.6h4.8l0.6,3.9c0.7-1.2,1.7-2.1,2.9-2.8c1.2-0.7,2.7-1,4.7-1H364.8z"/>
			<path fill="#FFFFFF" d="M366.5,268.6h5.4v7.2h6.2v4.8h-6.2v13.4c0,1,0.2,1.7,0.6,2.1c0.4,0.4,1.1,0.6,2.1,0.6h4.1v4.8h-5.2c-2.4,0-4.2-0.6-5.3-1.7c-1.1-1.1-1.7-2.9-1.7-5.3V268.6z"/>
			<path fill="#01FF8A" d="M387.2,266.5v34.9h18.1c0,0,10.9-10.7,15.8-15.6c1.5-1.5,2.4-3.6,2.4-5.7v-13.5H387.2z M414.4,280.8l-12.6,12.4h-6.4v-18.3h19.6v4.3C415.1,279.7,414.9,280.3,414.4,280.8z"/>
			<path fill="#01FF8A" d="M426.6,301.4l7-7c3.3-3.3,5-7.4,5-12.2v-15.7h-8.3v15.7c0,2.5-0.9,4.7-2.6,6.4l-13,12.8H426.6z"/>
		</svg></a>
		<div id="menu_login" class="topbutton nicefont" style="position:absolute; right:236px; height:32px; line-height:32px; font-size:15px; text-align:left; padding:0px 8px 0 8px;" onmousedown="login_button(true)"></div>
		<svg id="menu_sidebar" class="topbutton" style="position:absolute; right:202px; top:0px; padding:5px 7.5px 5px 7.5px;" onmouseover="showToolTips(this,'sid',4)" onmouseout="closeToolTips()" onmousedown="sidebar_toggle()" viewBox="0 0 24 24" width="22" height="22"><path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19ZM4 6H8V18H4V6Z" /></svg>
		<svg id="menu_compact" class="topbutton" style="position:absolute; right:168px; top:0px; padding:5px 7.5px 5px 7.5px;" onmouseover="showToolTips(this,'com',4)" onmouseout="closeToolTips()" onmousedown="compact_toggle()" viewBox="0 0 24 24" width="22" height="22"><path d="M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19ZM4 6H20V10H4V6Z" /></svg>
		<svg id="menu_fullscreen" class="topbutton" style="position:absolute; right:134px; top:0px;  padding:2.5px 2.5px 2.5px 4.5px;" onmouseover="showToolTips(this,'ful',4)" onmouseout="closeToolTips()" onmousedown="fullscreen_toggle()" viewBox="0 0 24 24" width="27" height="27"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
		<svg id="menu_tooltips" width="22" height="22" viewBox="0 0 24 24" class="topbutton" style="position:absolute; right:100px; top:0px;  padding:6px 5.5px 4px 6.5px;" onmouseover="showToolTips(this,'too',4)" onmouseout="closeToolTips()" onmousedown="tooltips_toggle()"><path d="M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H5.17L4.58 16.59L4 17.17V4H20V16ZM6 12H18V14H6V12ZM6 9H18V11H6V9ZM6 6H12V8H6V6Z"/></svg>
		<svg id="menu_shortcuts" width="22" height="22" viewBox="0 0 24 24" class="topbutton" style="position:absolute; right:64px; top:0px;  padding:6px 5.5px 4px 6.5px;" onmouseover="showToolTips(this,'scs',4)" onmouseout="closeToolTips()" onmousedown="open_shortcuts()"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.6 5C7.6 4.44772 8.04772 4 8.6 4H15.4C15.9523 4 16.4 4.44771 16.4 5V10.8571H22C22.5523 10.8571 23 11.3049 23 11.8571V19C23 19.5523 22.5523 20 22 20H2C1.44772 20 1 19.5523 1 19V11.8571C1 11.3049 1.44771 10.8571 2 10.8571H7.6V5ZM9.8 6.28571H14.2V10.8571H9.8V6.28571ZM3.2 13.1429H7.6V17.7143H3.2V13.1429ZM14.2 13.1429H9.8V17.7143H14.2V13.1429ZM16.4 13.1429H20.8V17.7143H16.4V13.1429Z" /></svg>
		<svg id="menu_notifs" class="topbutton" style="position:absolute; right:32px; top:0px; padding:5px 5px 5px 7px;" onmouseover="showToolTips(this,'new',4)" onmouseout="closeToolTips()" onmousedown="event.stopPropagation(); notifications_show();"  viewBox="0 0 24 24" width="21.5" height="21.5"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
		<svg id="menu_settings" class="topbutton" style="position:absolute; right:0px; top:0px; padding:5px 6px 5px 6px;" onmouseover="showToolTips(this,'set',4)" onmouseout="closeToolTips()" onmousedown="settings_panel_show()" viewBox="0 0 24 24" width="22" height="22"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>
		<div id="notifs_badge" class="notifs_badge" style="display:none; position:absolute; right:35px; top:5px;"></div>
		<div id="notifs_area" class='notifs_area nicefont' style="display:none; position:absolute; right:0px; top:32px; height:400px; overflow-y:scroll; width:400px; z-index:1200;">Loading...</div>
	</div>
</div>


<!-- PLAYERS -->
<div id="alpha2" style="display: flex; justify-content: center; position:absolute; width:100%; left:0px; top:32px; height:316px; background: linear-gradient(#171719, #131315 30%); box-shadow: inset 0px 0.5px rgba(255, 255, 255, 0.05); z-index:50;">

	<!-- FREEMIUM -->
	<div id="fm-banner"></div>

	<div id="alpha2b" style="display:block; position:absolute; top:95px; left:0; width:100%; height:221px; box-shadow: inset 0px 0.5px rgba(255, 255, 255, 0.04), inset 0px -0.5px rgba(255, 255, 255, 0.04);  background:radial-gradient(circle at top center, #262628,  #242426);"></div>
	<div id="alpha2c" style="display:none; position:absolute; top:94.5px; left:0; width:100%; background:#1a1a1c; height:0.5px;"></div>

	<!-- PLAYER1 -->
	<div id="player" style="position:relative; width:1410px; height:316px;">

		<div id="player1a" style="position:absolute; top:10px; left:0px; width:575px; height:85px; z-index:2;">

			<div id="image1" style="position:absolute; top:-2px; left:9px; width:40px; height:40px; background:#171719"><img alt="" style="position:absolute; top:0px; left:0px; background:#09090B;" src="/picx_bp/vinyl_default1.png" width="40" height="40"></div>
			<div id="song1" class="song_text cropped nicefont" style="position:absolute;top:-2px;left:60px;width:430px;padding:1px 0px 3px 3px;">Load a song..</div>
			<div id="time1" class="time_text" style="position:absolute; top:-0.5px; right:0px;"><span id="time1a">0:00</span> / <span id="time1b">4:00</span></div>
			<div id="key1" class="key_text nicefont" style="position:absolute; top:21px; right:0px;"></font></div>
			<div id="tag1" class="tag_text cropped nicefont" style="position:absolute; top:21px; left:63px; width:480px;"></div>

			<canvas id="jump1_preview" style="position:absolute; top:39px; left:9px; opacity:0.5;" width="566" height="36"></canvas>

			<div id="jump1" class="pointer" style="position:absolute; top:39px; left:9px; width:566px; height:45px;">
				<div style="position:absolute; top:0px; left:-10px; width:15px; height:45px;"></div>
				<canvas id="jump1_canvas0" style="position:absolute; top:0px; left:0px; opacity:0.4;" width="566" height="36"></canvas>
				<canvas id="jump1_canvas1" style="position:absolute; top:0px; left:0px; clip:rect(0px,0px,40px,0px);" width="566" height="36"></canvas>
				<canvas id="jump1_canvas2" style="position:absolute; top:0px; left:0px; clip:rect(0px,0px,40px,0px);" width="566" height="36"></canvas>
				<svg id="jump1_outro" style="display:none; position:absolute; top:11px; left:0px;" width="3" height="25"><path stroke="#FFF" stroke-width="1" d="M1,0 v25" /></svg>
				<svg id="jump1_hover" style="display:none; position:absolute; top:11px; left:0px;" width="5" height="25"><path stroke="#FFF8" stroke-width="3" d="M1,0 v25" /></svg>
				<svg id="jump1_cursor" style="position:absolute; top:11px; left:0px;" width="5" height="25"><path stroke="#FFF" stroke-width="3" d="M1,0 v25" /></svg>
				<div id="jump1_hotcue" style="position:absolute; top:0px; left:0px;"></div>
			</div>

		</div>

		<div id="player1b" style="position:absolute; top:100px; left:0px; width:450px; height:212px; z-index:2;">

			<div id="vinyl1" style="position:absolute; top:7px;left: 157px;">
				<div id="vinyl1_center"  style="position:absolute; top:0px; left:0px; border: solid 10px #171719; background:#09090B; border-radius:50%; width:126px; height:126px;"><img alt="" style="position:absolute; top:0px; left:0px; background:#050505; clip-path: circle(63px at center);" src="/picx_bp/vinyl_default1.png" width="126" height="126"></div>
				<div id="vinyl1_area" style="position:absolute;top:-9px;left:-14px;cursor:grab;border-radius:50%;width:164px;height:157px;"></div>
				<div id="vinyl1_dot" style="position:absolute; top:0px; left:71px; width:2px; height:10px; background:#FFF; transform-origin:2px 73px;"></div>
			</div>

			<div id="backspin1" class="backspin" style="position:absolute;top:49px;left: 199px;width: 62px;height:62px;border-radius:50%;"></div>

			<div style="position:absolute;top: 5px;left:8px;width:46px;height:43px;background:#171719;"></div>
			<div id="bpm1" style="position:absolute; top:9px; left:8px; width:46px; font-size:14px; text-align:center; text-rendering:optimizeSpeed;">120.0</div>
			<div id="rate1" style="position:absolute; top:27px; left:8px; width:46px; font-size:12px; text-align:center; color:#999; word-spacing:-2px; text-rendering:optimizeSpeed;">&nbsp;0.0 %</div>

			<div id="pro1_pitch_bend-" style="position:absolute; left: 8px;top: 74px; width:22.5px;" class="butpro butpro1"><svg style="position:absolute;top:4px;left:5.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 8 1 L 2 6 L 8 11"/></svg></div>
			<div id="pro1_pitch_bend+" style="position:absolute; left: 31.5px;top: 74px; width:22.5px;" class="butpro butpro1"><svg style="position:absolute;top:4px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 2 1 L 8 6 L 2 11"/></svg></div>
			<div id="pro1_pitch_inc-" style="position:absolute; left: 8px;top: 51px; width:22.5px;" class="butpro butpro1"><svg style="position:absolute;top:9.5px;left:6.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 1 L 9 1"/></svg></div>
			<div id="pro1_pitch_inc+" style="position:absolute; left: 31.5px;top: 51px; width:22.5px;" class="butpro butpro1"><svg style="position:absolute;top:5.5px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 5 1 L 5 9 M 1 5 L 9 5"/></svg></div>

			<div id="pro1_hotcue1" style="position:absolute; left:65px; top:5px;" onmouseover="showToolTips(this,'cue',5,1,1)" onmouseout="closeToolTips()" class="butpro nicefont">1</div>
			<div id="pro1_hotcue2" style="position:absolute; left:65px; top:28px;" onmouseover="showToolTips(this,'cue',5,1,2)" onmouseout="closeToolTips()" class="butpro nicefont">2</div>
			<div id="pro1_hotcue3" style="position:absolute; left:65px; top:51px;" onmouseover="showToolTips(this,'cue',5,1,3)" onmouseout="closeToolTips()" class="butpro nicefont">3</div>
			<div id="pro1_hotcue4" style="position:absolute; left:65px; top:74px;" onmouseover="showToolTips(this,'cue',5,1,4)" onmouseout="closeToolTips()" class="butpro nicefont">4</div>
			<div id="pro1_hotcue5" style="position:absolute; left:102px; top:5px;" onmouseover="showToolTips(this,'cue',5,1,5)" onmouseout="closeToolTips()" class="butpro nicefont">5</div>
			<div id="pro1_hotcue6" style="position:absolute; left:102px; top:28px;" onmouseover="showToolTips(this,'cue',5,1,6)" onmouseout="closeToolTips()" class="butpro nicefont">6</div>
			<div id="pro1_hotcue7" style="position:absolute; left:102px; top:51px;" onmouseover="showToolTips(this,'cue',5,1,7)" onmouseout="closeToolTips()" class="butpro nicefont">7</div>
			<div id="pro1_hotcue8" style="position:absolute; left:102px; top:74px;" onmouseover="showToolTips(this,'cue',5,1,8)" onmouseout="closeToolTips()" class="butpro nicefont">8</div>
			<div id="pro1_hotcue1_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue2_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue3_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue4_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue5_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue6_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue7_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro1_hotcue8_del" style="display:none; position:absolute; left:0px; top:0px;"></div>

			<div id="pro1_jump-" style="position:absolute; left:65px; top:102px; width:23px;" class="butpro butpro1"><svg style="position:absolute;top:4px;left:5.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 8 1 L 2 6 L 8 11"/></svg></div>
			<div id="pro1_jump+" style="position:absolute; left:113px; top:102px; width:23px;" class="butpro butpro1"><svg style="position:absolute;top:4px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 2 1 L 8 6 L 2 11"/></svg></div>
			<div id="pro1_jump" style="position:absolute; left:89px; top:102px; width:23px;" class="butpro butpro1 nicefont">8</div>

			<div id="sfx1_toggle" class="button nicefont" style="height:30px;line-height:30px; width:71px;position:absolute;top: 130px;left:65px;">FX<div style="position:absolute;top:-2px;left: -3px;border-top-right-radius:8px;height: 38px;width: 37px;"></div></div>

			<div id="loop1" style="position:absolute; top:168px;left:47px;">
				<div class="button nicefont" id="loopB1" style="position:absolute; top:0px; left:18px; width:52px; text-align:center; border-radius: 1px 0 0 1px;"><svg style="position:relative; vertical-align:-5px; display:inline-block;" width="26" height="18"><path id="loopX1" style="stroke:#FFF;" fill="none" stroke-width="1" d="M16,3 h3 a2,2 0 0 1 2,2 v6 a2,2 0 0 1 -2,2 h-10 a2,2 0 0 1 -2,-2 v-6 a2,2 0 0 1 2,-2 h3" /><path id="loopY1" style="fill:#FFF;" stroke-width="0" d="M10.5,0.5 L10.5,6 L14,3 Z" /></svg> <span style="position:relative; left:-4px; font-size:14px; font-family:Arial;" id="loop_value1">4</span></div>
				<div class="button button3a" id="loopC1" style="position:absolute; top:0px; left:71px; width:18px; height:18.5px; stroke:#FFF; border-radius: 0 1px 0 0"><svg style="position:absolute;top:7px;left:4px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 5 L 5 1 L 9 5"/></svg></div>
				<div class="button button3a" id="loopA1" style="position:absolute; top:19.5px; left:71px; width:18px; height:18.5px; stroke:#FFF; border-radius: 0 0 1px 0""><svg style="position:absolute;top:6px;left:4px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 1 L 5 5 L 9 1"/></svg></div>
			</div>

			<div class="pro_board_clip" style="position:absolute;left:144px;top: 5px;">
				<div id="sfx1_board" class="pro_board" style="position:absolute; left:-210px; top:0px; background:#0a0a0c;">
					<div id="sfx1_area" style="position:absolute; top:23px; left:0px; width:156px; height:133px; background:#171719;">
						<div style="position:absolute; left:76.5px; top:0px; height:133px; width:0.5px; background:#2A2A2C;"></div>
						<div style="position:absolute; left:0px; top:66px; height:0.5px; width:156px; background:#2A2A2C;"></div>
						<div id="sfx1_cursor_clip" class="pointer" style="position:absolute; left:0px; top:0px; clip:rect(0px,156px,133px,0px); width:156px; height:133px;">
							<svg id="sfx1_cursor" height="29" width="29" style="position:absolute; top:0px; left:0px; transform:translate3d(0,0,0); stroke:#848484;"><path fill="none" stroke-width="1" d="M0,14 L28,14 M14,0 L14,28" /></svg>
						</div>
					</div>
					<div id="sfx1_select" class="nicefont" style="display:inline-block; height:24px; line-height:23px; padding:0 14px 0 6px; cursor:pointer; font-size:15px;"></div>
					<div id="sfx1_lock" class="sfx_lock" style="position:absolute;top: 5px; cursor:pointer; left: 137px;width:30px;height:24px;"><svg height="14" width="13.5" style="position:absolute;left: 0px;top: -1px;" viewBox="0 0 448 512"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg></div>
					<div id="sfx1_panel" class="nicefont" style="display:none; position:absolute; top:0px; left:0px;"></div>
				</div>
			</div>

			<div id="eq13" style="position:absolute; left:354px; top:160px;" class="eq eqa"><span class="eqc"></span></div><div id="kill13" style="position:absolute; left:355px; top:192px;" class="eqd nicefont"><span></span>filter</div>
			<div id="eq11" style="position:absolute; left:354px; top:54px;" class="eq eqa"><span class="eqc"></span></div><div id="kill11" style="position:absolute; left:355px; top:85px;" class="eqd nicefont"><span></span>&nbsp;mid</div>
			<div id="eq12" style="position:absolute; left:354px; top:107px;" class="eq eqa"><span class="eqc"></span></div><div id="kill12" style="position:absolute; left:355px; top:138px;" class="eqd nicefont"><span></span>&nbsp;low</div>
			<div id="eq14" style="position:absolute; left:354px; top:1px;" class="eq eqa"><span class="eqc"></span></div><div id="kill14" style="position:absolute; left:355px; top:32px;" class="eqd nicefont"><span></span>high</div>
			<div id="eq15" style="position:absolute; left:401px; top:1px;" class="eq eqa"><span class="eqc"></span></svg></div><div style="position:absolute; left:411px; top:32px;" class="eqd nicefont">gain</div>

			<div style="position:absolute;top:5px;left:323px">
				<svg style="position:absolute;top:8px;left:0px; fill:#050505;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg style="position:absolute;top:8px;left:9px; fill:#050505;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg id="peak1a" style="position:absolute;top:0px;left:0px; fill:#050505;" height="8" width="8"><rect x="1" y="0" width="6" height="6"></svg>
				<svg id="peak1b" style="position:absolute;top:0px;left:9px; fill:#050505;" height="8" width="8"><rect x="1" y="0" width="6" height="6"></svg>
				<svg id="vumeter1a" style="position:absolute;top:8px;left:0px; clip:rect(189px,8px,192px,0px); fill:#9B9B9B;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg id="vumeter1b" style="position:absolute;top:8px;left:9px; clip:rect(189px,8px,192px,0px); fill:#9B9B9B;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
			</div>

			<div id="fader1" class="pointer" style="position:absolute; width:50px; top:65px; left:402px;">
				<svg style="position:absolute;top:0px;left:0px;" height="145" width="40"><line x1="20" y1="2" x2="20" y2="137" stroke-width="3" stroke="#000"></line></svg>
				<div id="fader1_cursor" style="position: absolute; top: -1px; left: 5.5px; width: 29px; height: 16px; border-radius:1px; background: #FFF; box-shadow: #000 0px 0px 6px; transform: translate3d(0px, -4px, 0px);" class=""></div>
			</div>

			<div id="pitch1" class="pointer" style="position:absolute;width:50px;top:109px;left:10.5px;">
				<svg style="position:absolute;top: 1px;left: -2px;" width="6.5" height="3"><path stroke="#555" fill="none" stroke-width="1.2" d="M 0 1 L 6.5 1"></path></svg>
				<svg style="position:absolute;top: 87px;left: -2.5px;" width="7" height="10"><path stroke="#555" fill="none" stroke-width="1.2" d="M 3.5 1 L 3.5 8 M 0 4.5 L 7 4.5"></path></svg>
				<svg style="position:absolute;top:0px;left:0px;" height="100" width="40"><line x1="12" y1="46" x2="28" y2="46" stroke-width="2" stroke="#555"></line><line x1="20" y1="1" x2="20" y2="94" stroke-width="3" stroke="#000"></line></svg>
				<div id="pitch1_cursor" class="pitch_cursor" style="position: absolute;top: 45px;left: 7.5px;transform:translate3d(0px, -7px, 0px);"><svg style="position:absolute;top: 6.5px;left: 4px;" height="4" width="20"><line x1="1" y1="1" x2="18" y2="1" stroke-width="3" stroke="#FFF"></line></svg></div>
			</div>

			<div id="cue1" class="button button3a nicefont" style="position:absolute; top:168px; left:149px; font-size:15px; width: 72px;">Cue</div>

			<div id="play1" class="button" style="position:absolute;  top:168px; left:233px; width:72px;">
				<div id="play1c" style="position:absolute; top:0px; left:0px; width:72px; height:38px; background:#3A3A3C; display:none;"></div>
				<div id="play1b1" style="position:absolute; top:0px; left:0px; width:72px; height:38x; opacity:0.6; clip-path:inset(0 0 0 0);"><div id="play1b2" style="position:absolute; top:0px; left:0px; width:142px; height:40px;"></div></div>
				<svg id="play1a1" style="position: absolute; top: 12px; left: 30px; fill:#FFF; display: block;" width="13" height="17"><path d="M1,1 L1,14 L12,7.5 L1,1 Z"></path></svg>
				<svg id="play1a2" style="position: absolute; top: 12px; left: 30px; fill:#000; display: none;" width="20" height="17"><path d="M1,14 L3.5,14 L3.5,1 L1,1 Z M7.5,1 L7.5,14 L10,14 L10,1 Z"></path></svg>
			</div>

		</div>

		<!-- MIXER -->
		<div id="mixera" style="position:absolute; top:10px; left:596px; width:218px; height:85px; z-index:3;">

			<div id="master_label" class="nicefont" style="position:absolute;top:-35px;left: 6px;color: #777;font-size: 15px;letter-spacing: 0px;"><span style="font-size:14.5px">M</span>aster</div>
			<div id="master" class="master" style="position:absolute;top:-40px;left: 189px;"><svg id="mastera" class="mastera" height="7" width="4"><line x1="1" y1="1" x2="1" y2="6"></line></svg></div>

			<div id="master_volume" style="position:absolute;top: -34px;left: 63px;">
				<svg style="position:absolute;top:0px;left:0px; fill:#333335;" height="8" width="116"><rect x="0" y="1" width="116" height="6"></svg>
				<svg style="position:absolute;top:9px;left:0px; fill:#333335;" height="8" width="116"><rect x="0" y="1" width="116" height="6"></svg>
				<svg id="vumeter0a" style="position:absolute;top:0px;left:0px; clip:rect(0px,3px,8px,0px); fill:#9B9B9B;" height="8" width="116"><rect x="0" y="1" width="116" height="6"></svg>
				<svg id="vumeter0b" style="position:absolute;top:9px;left:0px; clip:rect(0px,3px,8px,0px); fill:#9B9B9B;" height="8" width="116"><rect x="0" y="1" width="116" height="6"></svg>
				<svg id="peak0a" style="position:absolute;top:0px;left:110px; fill:#333335;" height="8" width="8"><rect x="0" y="1" width="6" height="6"></svg>
				<svg id="peak0b" style="position:absolute;top:9px;left:110px; fill:#333335;" height="8" width="8"><rect x="0" y="1" width="6" height="6"></svg>
			</div>

			<div id="pro1_sync" onmouseover="showToolTips(this,'sync1',6)" onmouseout="closeToolTips(this)" style="position:absolute;left: 6px;top: 2px;" class="button buttonsync button_active1 nicefont">Sync</div>
			<div id="pro2_sync" onmouseover="showToolTips(this,'sync2',6)" onmouseout="closeToolTips(this)" style="position:absolute;left: 164px;top: 2px;" class="button buttonsync button_active2 nicefont">Sync</div>

			<div id="bpm_button" class="bpm_button" style="position:absolute; height:30px; width:102px; top:-2px; left:58px;"><div id="bpm_button_value"></div><div id="bpm_button_auto" class="nicefont" style="color:#71e59b; display:none;position: absolute;top: 27px;left: 24px;left: 23px;font-size: 8px;letter-spacing: 0.5px;">AUTOBPM ON</div></div>

			<div id="beatvisu" style="position:absolute; top:59px; left:6px;">
				<div style="position:absolute;width: 205px;height: 16px;top: 0px;left:0px;background:#29292b;"></div>
				<div id="beatvisu1" style="position:absolute; width: 205px;height: 8px;top: 0px;left:0px; background: #4EDF84; clip: rect(0px,0px,0px,0px);"></div>
				<div id="beatvisu2" style="position:absolute; width: 205px;height: 8px;top: 8px;left:0px; background: #31BAFF; clip: rect(0px,0px,0px,0px);"></div>
				<svg style="position:absolute;top: 0px;left:0px;" height="16" width="205"><line x1="51" y1="0" x2="51" y2="16" stroke-width="2" stroke="#131315"></line><line x1="103" y1="0" x2="103" y2="16" stroke-width="2" stroke="#131315"></line><line x1="154" y1="0" x2="154" y2="16" stroke-width="2" stroke="#131315"></line><line x1="0" y1="8" x2="205" y2="8" stroke-width="2" stroke="#131315"></line></svg>
			</div>

			<div id="phasevisu" style="display:none; position:absolute; top:39.5px; left:6px; width: 205px;height: 8px;background:#272729;">
				<div id="phasevisu_cursor" style="position:absolute; top:0px; left:102px; width:0px;height: 8px;"></div>
				<div style="position:absolute; top:0px; left:102px; width: 2px;height: 8px;background:#FFF;"></div>
			</div>

			<div id="bpm_menu" class="bpm_menu" style="display:none; position:absolute; top:36px; left:-44px;">
				<div id="bpm_menu_value" class="center" style="position:absolute; top:0px; left:0px; height:40px; line-height:41px; background:#000;"></div>
				<div onmousedown="bpm_menu(false)" class="bpm_menu_close" style="position:absolute; right:0px; top:0px; width:30px; height:30px"><svg style="position:absolute; left:9px; top:7px;" width="15" height="15"><path fill="none" stroke-width="2.5" d="M1,1 L14,14 M14,1 L1,14" /></svg></div>
				<div id="automix_panel" style="display:none; position:absolute; top:60px; left:0px; width:310px;">
					<div class="center" style="position:absolute; top:0px;">The mixer is currently automatically mixing :</div>
					<div id="automix_info" class="center" style="position:absolute; top:27px; color:#4EDF84;"></div>
					<div class="center" style="position:absolute; top:66px;"><a class='link_botton_green' onmouseup='automix_cancel()'>STOP AUTOMIX</a>&nbsp;&nbsp;<a class='link_botton_grey nextactive' onmouseup='automix_nextnow()'>next song ></a></div>
					<div class="center" style="position:absolute; top:127px;"><input onclick='settings_cb(this)' type='checkbox' id='a07b' class='css-checkbox'><label for='a07b' class='css-label' style='font-size:14px;'>enable random automixing</label></div>
				</div>
				<div id="bpm_panel" style="display:none; position:absolute; top:60px; left:0px; width:310px;">
					<div id="bpm_coef_info" class="center color1" style="display:none; position:absolute; top:0px;">...</div>
					<div id="bpm_coef" style="display:none; position:absolute; top:37px; left:10px; color:#999; background:#333335; width:290px; height:26px; cursor:pointer;">
						<svg style="position:absolute; top:12.5px; left:9px;" width="12" height="12"><path fill="none" stroke="#999" stroke-width="2" d="M 1 1 L 9 1"></path></svg>
						<div style="position:absolute; top:4px; left:272px; color:#999; font-size:20px;">+</div>
						<div style="position:absolute; top:0px; left:145px; background:#999; width:1px; height:26px;"></div>
						<div id="bpm_coef_cursor" class="bpm_cursor" style="position:absolute; top:0px; left:132px;"><div style="position:absolute; top:0px; left:12px; background:#FFF; width:2px; height:26px;"></div></div>
					</div>
					<div id="bpm_master" class="center color1" style="display:block; position:absolute;top:-2px;left:10px;width:290px;">manual bpm mode
						<div id="bpm_inc-" class="bpm_master" style="position:absolute;top:30px;left: 48px;"><svg style="position:absolute;top: 15px;left: 20px;" width="12" height="12"><path fill="none" stroke="#FFF" stroke-width="2" d="M 1 1 L 10 1"></path></svg></div>
						<input id="bpm_input" class="bpm_master" style="position:absolute;top:30px;left: 101px;width:73px;border:none;padding:0 17px 0 0;" type="text" autocomplete="off" value="- - -" minlength="2" maxlength="5">
						<div id="bpm_inc+" class="bpm_master" style="position:absolute;top:30px;left: 194px;">+</div>
						<svg style="position:absolute;top:39px;left: 170.5px;fill:#FFF;pointer-events:none; " viewBox="0 0 512 512" height="12" width="12"><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"></path></svg>
					</div>
					<div id="bpm_manual" class="center" style="display:none; position:absolute; color:#999;top:20px;left:10px;width:290px;"><u>info</u> : to adjust the BPM use the pitch sliders on each deck.</div>
					<div id="bpm_info" class="center" style="position:absolute; top:83px; color:#999">...</div>
					<div class="center" style="position:absolute; top:127px;"><input onclick="settings_cb(this)" type="checkbox" id="b06b" class="css-checkbox"><label for="b06b" class="css-label" style="font-size:14px;">enable AutoBPM</label><span class="info1" onmousedown="showToolTips(this,'b06')"></span><div id="bpm_dotrui_ghion"></div></div>
				</div>
			</div>

			<div id="arrow1" class="butarrow" style="position:absolute; top:271px; left: 10px; stroke:#FFF;" onmousedown="mixer_fadeto(1)"><svg style="position:absolute;top:5px;left:5.5px;" width="12" height="12"><path fill="none" stroke-width="1.5" d="M 8 1 L 2 6 L 8 11"/></svg></div>
			<div id="arrow2" class="butarrow" style="position:absolute; top:271px; left:192px; stroke:#FFF;" onmousedown="mixer_fadeto(2)"><svg style="position:absolute;top:5px;left:6.5px;" width="12" height="12"><path fill="none" stroke-width="1.5" d="M 2 1 L 8 6 L 2 11"/></div>

			<div id="crossfader" class="pointer" style="position:absolute;top: 262px;left: 36px;">
				<svg style="position:absolute;top:0px;left:0px;" height="40" width="150"><line x1="72" y1="12" x2="72" y2="28" stroke-width="3" stroke="#555"></line><line x1="6" y1="20" x2="139" y2="20" stroke-width="3" stroke="#000"></line></svg>
				<svg id="crossfader_colors" style="position:absolute;top:0px;left:0px;clip:rect(15px,72px,25px,72px);" height="40" width="150"><line x1="6" y1="20" x2="72" y2="20" stroke-width="3" stroke="#4EDF84"></line><line x1="72" y1="20" x2="139" y2="20" stroke-width="3" stroke="#31BAFF"></line></svg>
				<div id="crossfader_cursor" style="position: absolute; top: 6px; left: 75px; width: 16px; height: 27px; background: rgb(255, 255, 255); border-radius:1px; box-shadow: rgb(0, 0, 0) 0px 0px 6px; transform: translate3d(-11px, 0px, 0px);" class=""></div>
			</div>

		</div>

		<div id="mixerb" style="position:absolute; top:100px; left:462px; width:486px; height:212px; z-index:1;">

			<div class="button hpinactive" id="headphone1" onmousedown="headphone_button_toggle(1)" style="position:absolute;top: 178px;left:0px;width: 29px;height: 28px;fill:#999;"><svg style="position:absolute;top:4.5px;left:4.5px;" viewBox="0 0 24 24" width="20.5" height="20.5"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg></div>
			<div class="button hpinactive" id="headphone2" onmousedown="headphone_button_toggle(2)" style="position:absolute;top: 178px;right:0px;width: 29px;height: 28px;fill:#999;"><svg style="position:absolute;top:4.5px;left:4.5px;" viewBox="0 0 24 24" width="20.5" height="20.5"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg></div>

			<div style="position:absolute; left:-1px; top:4px; width: 100%; height: 160px; border: solid 0.5px #28282A;"></div>

			<div id="wave_content" style="position:absolute; left:0px; top:5px; clip-path: inset(0% 0% 0% 0%); width:486px; height:160px; background:#171719;">
				<canvas id="wave_canvas1" style="position:absolute; left:0px; top:0px;" width="3000" height="80"></canvas>
				<canvas id="wave_canvas2" style="position:absolute; left:0px; top:0px; clip:rect(81px,3000px,160px,0px);" width="3000" height="160"></canvas>
				<div style="position:absolute; background:#FFF; width:2px; height:160px; top:0px; left:242px;"></div>
				<div style="position:absolute; background:#2A2A2A; width:100%; height:2px; top:79px; left:0px;"></div>
				<div id="wave_area1" style="position:absolute; width:100%; height:80px; top:0px; left:0px; cursor:pointer;"></div>
				<div id="wave_area2" style="position:absolute; width:100%; height:80px; top:80px; left:0px; cursor:pointer;"></div>
				<div id="wave_zoom+" class="wavebutton" style="position:absolute; top:2px; right:2px;"><svg style="position:absolute;top:4px;left:3px;" width="20" height="20"><path fill="none" stroke-width="2" d="M 6.5 1 L 6.5 12 M 1 6.5 L 12 6.5"/></svg></div>
				<div id="wave_zoom-" class="wavebutton" style="position:absolute; top:2px; left:2px;"><svg style="position:absolute;top:4px;left:3px;" width="20" height="20"><path fill="none" stroke-width="2" d="M 1 6.5 L 12 6.5"/></svg></div>
				<div id="wave_edit1" onmousedown="editor(1,true)" class="wavebutton" style="position:absolute; bottom:2px; left:2px;"><svg style="position:absolute;top:4px;left:3.5px;" viewBox="0 0 512 512" height="12" width="12"><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"></path></svg></div>
				<div id="wave_edit2" onmousedown="editor(2,true)" class="wavebutton" style="position:absolute; bottom:2px; right:2px;"><svg style="position:absolute;top:4px;left:3.5px;" viewBox="0 0 512 512" height="12" width="12"><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"></path></svg></div>
				<div id="wave_editor1" class="editor_panel1" style="position:absolute; top:0px; left:-150px;"></div>
				<div id="wave_editor2" class="editor_panel2" style="position:absolute; top:0px; right:-150px;"></div>
			</div>

		</div>

		<!-- PLAYER2 -->
		<div id="player2a" style="position:absolute; top:10px; left:835px; width:575px; height:85px; z-index:2;">

			<div id="image2" style="position:absolute; top:-2px; right:9px; width:40px; height:40px; background:#171719"><img alt="" style="position:absolute; top:0px; left:0px; background:#09090B;" src="/picx_bp/vinyl_default2.png" width="40" height="40"></div>
			<div id="song2" class="song_text cropped nicefont" style="position:absolute;top:-2px;left:-3px;width:430px;padding:1px 0px 3px 3px;">Load a song..</div>
			<div id="time2" class="time_text" style="position:absolute; top:-0.5px; right:64px;"><span id="time2a">0:00</span> / <span id="time2b">4:00</span></div>
			<div id="key2" class="key_text nicefont" style="position:absolute; top:21px; right:64px;"></div>
			<div id="tag2" class="tag_text cropped nicefont" style="position:absolute; top:21px; left:0px; width:483px;"></div>

			<canvas id="jump2_preview" style="position:absolute; top:39px; left:0px; opacity:0.5;" width="566" height="36"></canvas>

			<div id="jump2" class="pointer" style="position:absolute; top:39px; left:0px; width:566px; height:45px;">
				<div style="position:absolute; top:0px; left:-10px; width:15px; height:45px;"></div>
				<canvas id="jump2_canvas0" style="position:absolute; top:0px; left:0px; opacity:0.4;" width="566" height="36"></canvas>
				<canvas id="jump2_canvas1" style="position:absolute; top:0px; left:0px; clip:rect(0px,0px,40px,0px);" width="566" height="36"></canvas>
				<canvas id="jump2_canvas2" style="position:absolute; top:0px; left:0px; clip:rect(0px,0px,40px,0px);" width="566" height="36"></canvas>
				<svg id="jump2_outro" style="display:none; position:absolute; top:11px; left:0px;" width="3" height="25"><path stroke="#FFF" stroke-width="1" d="M1,0 v25" /></svg>
				<svg id="jump2_hover" style="display:none; position:absolute; top:11px; left:0px;" width="5" height="25"><path stroke="#FFF8" stroke-width="3" d="M1,0 v25" /></svg>
				<svg id="jump2_cursor" style="position:absolute; top:11px; left:0px;" width="5" height="25"><path stroke="#FFF" stroke-width="3" d="M1,0 v25" /></svg>
				<div id="jump2_hotcue" style="position:absolute; top:0px; left:0px;"></div>
			</div>

		</div>

		<div id="player2b" style="position:absolute; top:100px; left:949px; width:450px; height:212px; z-index:2;">

			<div id="vinyl2" style="position:absolute; top:7px;left: 158px;">
				<div id="vinyl2_center"  style="position:absolute; top:0px; left:0px; border: solid 10px #171719; background:#09090B; border-radius:50%; width:126px; height:126px;"><img alt="" style="position:absolute; top:0px; left:0px; background:#050505; clip-path: circle(63px at center);" src="/picx_bp/vinyl_default2.png" width="126" height="126"></div>
				<div id="vinyl2_area" style="position:absolute;top:-9px;left:-14px;cursor:grab;border-radius:50%;width:164px;height:157px;"></div>
				<div id="vinyl2_dot" style="position:absolute; top:0px; left:71px; width:2px; height:10px; background:#FFF; transform-origin:2px 73px;"></div>
			</div>

			<div id="backspin2" class="backspin" style="position:absolute;top:49px;left: 199.5px;width: 62px;height:62px;border-radius:50%;"></div>

			<div style="position:absolute;top: 5px;left:406px;width:46px;height:43px;background:#171719;"></div>
			<div id="bpm2" style="position:absolute; top:9px; left:406px; width:46px; font-size:14px; text-align:center; text-rendering:optimizeSpeed;">120.0</div>
			<div id="rate2" style="position:absolute; top:27px; left:406px; width:46px; font-size:12px; text-align:center; color:#999; word-spacing:-2px; text-rendering:optimizeSpeed;">&nbsp;0.0 %</div>

			<div id="pro2_pitch_bend-" style="position:absolute; left: 406px;top: 74px; width:22.5px;" class="butpro butpro2"><svg style="position:absolute;top:4px;left:5.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 8 1 L 2 6 L 8 11"/></svg></div>
			<div id="pro2_pitch_bend+" style="position:absolute; left: 430px;top: 74px; width:22.5px;" class="butpro butpro2"><svg style="position:absolute;top:4px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 2 1 L 8 6 L 2 11"/></svg></div>
			<div id="pro2_pitch_inc-" style="position:absolute; left: 406px;top: 51px; width:22.5px;" class="butpro butpro2"><svg style="position:absolute;top:9.5px;left:6.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 1 L 9 1"/></svg></div>
			<div id="pro2_pitch_inc+" style="position:absolute; left: 430px;top: 51px; width:22.5px;" class="butpro butpro2"><svg style="position:absolute;top:5.5px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 5 1 L 5 9 M 1 5 L 9 5"/></svg></div>

			<div id="pro2_hotcue1" style="position:absolute; left:324px; top:5px;" onmouseover="showToolTips(this,'cue',5,1,1)" onmouseout="closeToolTips()" class="butpro nicefont">1</div>
			<div id="pro2_hotcue2" style="position:absolute; left:324px; top:28px;" onmouseover="showToolTips(this,'cue',5,1,2)" onmouseout="closeToolTips()" class="butpro nicefont">2</div>
			<div id="pro2_hotcue3" style="position:absolute; left:324px; top:51px;" onmouseover="showToolTips(this,'cue',5,1,3)" onmouseout="closeToolTips()" class="butpro nicefont">3</div>
			<div id="pro2_hotcue4" style="position:absolute; left:324px; top:74px;" onmouseover="showToolTips(this,'cue',5,1,4)" onmouseout="closeToolTips()" class="butpro nicefont">4</div>
			<div id="pro2_hotcue5" style="position:absolute; left:361px; top:5px;" onmouseover="showToolTips(this,'cue',5,1,5)" onmouseout="closeToolTips()" class="butpro nicefont">5</div>
			<div id="pro2_hotcue6" style="position:absolute; left:361px; top:28px;" onmouseover="showToolTips(this,'cue',5,1,6)" onmouseout="closeToolTips()" class="butpro nicefont">6</div>
			<div id="pro2_hotcue7" style="position:absolute; left:361px; top:51px;" onmouseover="showToolTips(this,'cue',5,1,7)" onmouseout="closeToolTips()" class="butpro nicefont">7</div>
			<div id="pro2_hotcue8" style="position:absolute; left:361px; top:74px;" onmouseover="showToolTips(this,'cue',5,1,8)" onmouseout="closeToolTips()" class="butpro nicefont">8</div>
			<div id="pro2_hotcue1_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue2_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue3_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue4_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue5_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue6_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue7_del" style="display:none; position:absolute; left:0px; top:0px;"></div>
			<div id="pro2_hotcue8_del" style="display:none; position:absolute; left:0px; top:0px;"></div>

			<div id="pro2_jump-" style="position:absolute; left:324px; top:102px; width:23px;" class="butpro butpro2"><svg style="position:absolute;top:4px;left:5.5px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 8 1 L 2 6 L 8 11"/></svg></div>
			<div id="pro2_jump+" style="position:absolute; left:372px; top:102px; width:23px;" class="butpro butpro2"><svg style="position:absolute;top:4px;left:6px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 2 1 L 8 6 L 2 11"/></svg></div>
			<div id="pro2_jump" style="position:absolute; left:348px; top:102px; width:23px;" class="butpro butpro2 nicefont">8</div>

			<div id="sfx2_toggle" class="button nicefont" style="height:30px;line-height:30px; width:71px;position:absolute;top: 130px;left:324px;">FX<div style="position:absolute;top:-2px;left: -3px;border-top-right-radius:8px;height: 38px;width: 37px;"></div></div>

			<div id="loop2" style="position:absolute; top:168px;left:306px;">
				<div class="button nicefont" id="loopB2" style="position:absolute; top:0px; left:18px; width:52px; text-align:center;"><svg style="position:relative; vertical-align:-5px; display:inline-block;" width="26" height="18"><path id="loopX2" style="stroke:#FFF;" fill="none" stroke-width="1" d="M16,3 h3 a2,2 0 0 1 2,2 v6 a2,2 0 0 1 -2,2 h-10 a2,2 0 0 1 -2,-2 v-6 a2,2 0 0 1 2,-2 h3" /><path id="loopY2" style="fill:#FFF;" stroke-width="0" d="M10.5,0.5 L10.5,6 L14,3 Z" /></svg> <span style="position:relative; left:-4px; font-size:14px; font-family:Arial;" id="loop_value2">4</span></div>
				<div class="button button3b" id="loopC2" style="position:absolute; top:0px; left:71px; width:18px; height:18.5px; stroke:#FFF; border-radius: 0 1px 0 0"><svg style="position:absolute;top:7px;left:4px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 5 L 5 1 L 9 5"/></svg></div>
				<div class="button button3b" id="loopA2" style="position:absolute; top:19.5px; left:71px; width:18px; height:18.5px; stroke:#FFF; border-radius: 0 0 1px 0""><svg style="position:absolute;top:6px;left:4px;" width="12" height="12"><path fill="none" stroke-width="1.2" d="M 1 1 L 5 5 L 9 1"/></svg></div>
			</div>

			<div class="pro_board_clip" style="position:absolute;left:112px;top: 5px;">
				<div id="sfx2_board" class="pro_board" style="position:absolute; left: 253.5px; top:0px; background:#0a0a0c;">
					<div id="sfx2_area" style="position:absolute; top:23px; left:0px; width:156px; height:133px; background:#171719;">
						<div style="position:absolute; left:76.5px; top:0px; height:133px; width:0.5px; background:#2A2A2C;"></div>
						<div style="position:absolute; left:0px; top:66px; height:0.5px; width:156px; background:#2A2A2C;"></div>
						<div id="sfx2_cursor_clip" class="pointer" style="position:absolute; left:0px; top:0px; clip:rect(0px,156px,133px,0px); width:156px; height:133px;">
							<svg id="sfx2_cursor" height="29" width="29" style="position:absolute; top:0px; left:0px; transform:translate3d(0,0,0); stroke:#848484;"><path fill="none" stroke-width="1" d="M0,14 L28,14 M14,0 L14,28" /></svg>
						</div>
					</div>
					<div id="sfx2_select" class="nicefont" style="display:inline-block; height:24px; line-height:23px; padding:0 14px 0 6px; cursor:pointer; font-size:15px;"></div>
					<div id="sfx2_lock" class="sfx_lock" style="position:absolute;top: 5px; cursor:pointer; left: 137px;width:30px;height:24px;"><svg height="14" width="13.5" style="position:absolute;left: 0px;top: -1px;" viewBox="0 0 448 512"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg></div>
					<div id="sfx2_panel" class="nicefont" style="display:none; position:absolute; top:0px; left:0px;"></div>
				</div>
			</div>

			<div id="eq23" style="position:absolute; left:64px; top:160px;" class="eq eqb"><span class="eqc"></span></div><div id="kill23" style="position:absolute; left:65px; top:192px;" class="eqd nicefont"><span></span>filter</div>
			<div id="eq21" style="position:absolute; left:64px; top:54px;" class="eq eqb"><span class="eqc"></span></div><div id="kill21" style="position:absolute; left:65px; top:85px;" class="eqd nicefont"><span></span>&nbsp;mid</div>
			<div id="eq22" style="position:absolute; left:64px; top:107px;" class="eq eqb"><span class="eqc"></span></div><div id="kill22" style="position:absolute; left:65px; top:138px;" class="eqd nicefont"><span></span>&nbsp;low</div>
			<div id="eq24" style="position:absolute; left:64px; top:1px;" class="eq eqb"><span class="eqc"></span></div><div id="kill24" style="position:absolute; left:65px; top:32px;" class="eqd nicefont"><span></span>high</div>
			<div id="eq25" style="position:absolute; left:18px; top:1px;" class="eq eqb"><span class="eqc"></span></div><div style="position:absolute; left:27px; top:32px;" class="eqd nicefont">gain</div>

			<div style="position:absolute;top:5px;left:120px">
				<svg style="position:absolute;top:8px;left:0px; fill:#050505;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg style="position:absolute;top:8px;left:9px; fill:#050505;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg id="peak2a" style="position:absolute;top:0px;left:0px; fill:#050505;" height="8" width="8"><rect x="1" y="0" width="6" height="6"></svg>
				<svg id="peak2b" style="position:absolute;top:0px;left:9px; fill:#050505;" height="8" width="8"><rect x="1" y="0" width="6" height="6"></svg>
				<svg id="vumeter2a" style="position:absolute;top:8px;left:0px; clip:rect(189px,8px,192px,0px); fill:#9B9B9B;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
				<svg id="vumeter2b" style="position:absolute;top:8px;left:9px; clip:rect(189px,8px,192px,0px); fill:#9B9B9B;" height="192" width="8"><rect x="1" y="0" width="6" height="192"></svg>
			</div>

			<div id="fader2" class="pointer" style="position:absolute; width:50px; top:65px; left:19px;">
				<svg style="position:absolute;top:0px;left:0px;" height="145" width="40"><line x1="20" y1="2" x2="20" y2="137" stroke-width="3" stroke="#000"></line></svg>
				<div id="fader2_cursor" style="position: absolute; top: -1px; left: 5.5px; width: 29px; height: 16px; border-radius:1px; background: #FFF; box-shadow: #000 0px 0px 6px; transform: translate3d(0px, -4px, 0px);" class=""></div>
			</div>

			<div id="pitch2" class="pointer" style="position:absolute;width:50px;top:109px;left:408px;">
				<svg style="position:absolute;top: 1px;left: 38px;" width="6.5" height="3"><path stroke="#555" fill="none" stroke-width="1.2" d="M 0 1 L 6.5 1"></path></svg>
				<svg style="position:absolute;top: 87px;left: 37.5px;" width="7" height="10"><path stroke="#555" fill="none" stroke-width="1.2" d="M 3.5 1 L 3.5 8 M 0 4.5 L 7 4.5"></path></svg>
				<svg style="position:absolute;top:0px;left:0px;" height="100" width="40"><line x1="12" y1="46" x2="28" y2="46" stroke-width="2" stroke="#555"></line><line x1="20" y1="1" x2="20" y2="94" stroke-width="3" stroke="#000"></line></svg>
				<div id="pitch2_cursor" class="pitch_cursor" style="position: absolute;top: 45px;left: 6.5px;transform:translate3d(0px, -7px, 0px);"><svg style="position:absolute;top: 6.5px;left: 4px;" height="4" width="20"><line x1="1" y1="1" x2="18" y2="1" stroke-width="3" stroke="#FFF"></line></svg></div>
			</div>

			<div id="cue2" class="button button3b nicefont" style="position:absolute; top:168px; left:239px; font-size:15px; width: 72px;">Cue</div>

			<div id="play2" class="button" style="position:absolute;  top:168px; left:155px; width:72px;">
				<div id="play2c" style="position:absolute; top:0px; left:0px; width:72px; height:38px; background:#3A3A3C; display:none;"></div>
				<div id="play2b1" style="position:absolute; top:0px; left:0px; width:72px; height:38x; opacity:0.6; clip-path:inset(0 0 0 0);"><div id="play2b2" style="position:absolute; top:0px; left:0px; width:142px; height:40px;"></div></div>
				<svg id="play2a1" style="position: absolute; top: 12px; left: 30px; fill:#FFF; display: block;" width="13" height="17"><path d="M1,1 L1,14 L12,7.5 L1,1 Z"></path></svg>
				<svg id="play2a2" style="position: absolute; top: 12px; left: 30px; fill:#000; display: none;" width="20" height="17"><path d="M1,14 L3.5,14 L3.5,1 L1,1 Z M7.5,1 L7.5,14 L10,14 L10,1 Z"></path></svg>
			</div>

		</div>

	</div>

</div>


<!-- MUSIC -->
<div id="alpha3" style="display: flex; justify-content: center; position:absolute; width:100%; min-width:1410px; top:32px; height:calc(100% - 32px); background: transparent; z-index:30;">
	<div id="DJAPPMM_container" style="position:relative; width:100%; height:100%; max-width:1410px;">
		<a title="Leave us your feedback" href="https://beatport.typeform.com/to/RfSsw1eh" target="_blank"><div class="feedback nicefont" style="position:absolute; left:15px; bottom:0px; z-index:4000; text-indent:22px;"><svg style="position:absolute; top:7px; left:7px;" height="18" viewBox="0 0 24 24" width="24"><path d="m20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 18 4-4h14c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm0 14h-14.83l-.59.59-.58.58v-13.17h16zm-9-4h2v2h-2zm0-6h2v4h-2z"/></svg> Feedback</div></a>
		<div id="DJAPPMM" refPlayer="alpha2"></div>
	</div>
</div>


<!-- ALL OVERLOW WINDOWS ------------------------------------------------------------------------------------------------------------------------------------------------------>

<div style="display:none;"><div id="trash"></div></div>

<div id="settings" style="width:980px; height:563px;" class="bigmsg nicefont">
	<div class="bigmsg_close" onmousedown="showBigDiv(null)">&#10005;</div>
	<div class="bigmsg_title boldfont">Settings</div>

	<div id="settings_icons" style="position:absolute; top:43px; left:0px; height:520px; width:80px; background:#0006;">
		<div id="settings_icon0" class="settings_icon" onmousedown="settings_panel_goto(0)"><i style="position:absolute; top:3px; left:25px; font-size:36px;" class="fas fa-user"></i><div style="position:absolute; top:57px; left:0px;" class="settings_icon_text">account</div></div>
		<div id="settings_icon1" class="settings_icon" onmousedown="settings_panel_goto(1)"><i style="position:absolute; top:1px; left:21px; font-size:37px;" class="fas fa-user-cog"></i><div style="position:absolute; top:57px; left:0px;" class="settings_icon_text">options</div></div>
		<div id="settings_icon2" class="settings_icon" onmousedown="settings_panel_goto(2)"><i style="position:absolute; top:-1px; left:19px; font-size:42px;" class="fas fa-volume-up"></i><div style="position:absolute; top:57px; left:0px;" class="settings_icon_text">audio</div></div>
		<div id="settings_icon3" class="settings_icon" onmousedown="settings_panel_goto(3)"><i style="position:absolute; top:0px; left:21px; font-size:40px;" class="fas fa-headphones"></i><div style="position:absolute; top:57px; left:0px; letter-spacing:-0.5px;" class="settings_icon_text">headphones</div></div>
		<div id="settings_icon4" class="settings_icon" onmousedown="settings_panel_goto(4)"><i style="position:absolute; top:0px; left:21px; font-size:38px;" class="fas fa-download"></i><div style="position:absolute; top:57px; left:0px;" class="settings_icon_text">shortcut</div></div>
		<div id="settings_icon5" class="settings_icon" onmousedown="settings_panel_goto(5)"><i style="position:absolute; top:30px; left:14px; font-size:26px;" class="fas fa-midi"></i><div style="position:absolute; top:57px; left:0px;" class="settings_icon_text">midi</div></div>
	</div>

	<div id="settings_panel" class="settings_panel" style="position:absolute; top:45px; left:80px; height:518px; width:870px; padding-left:30px; overflow-x:hidden; overflow-y:scroll;">
		<div style="position:absolute;right:22px;top:35px; color:#AAA; font-size:16px;">Beatport DJ v0.5.9</div>
		<table id="settings_table" width="840">
			<tr><td valign="top" colspan="2">
				<div class="settings_title" style="padding-top:30px; padding-bottom:0px;">Your LINK account</div>
				<div id="userinfo" style="font-size:16px; line-height:29px;"></div>
			</td></tr>
			<tr><td valign="top" width="420">
				<div class="settings_title" style="padding-top:40px; padding-bottom:10px;">Player settings</div>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="a03" class="css-checkbox" /><label for="a03" class="css-label">auto play at each song loading</label><span class="info1" onmousedown="showToolTips(this,'a03')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="a12" class="css-checkbox" /><label for="a12" class="css-label">enable load song security</label><span class="info1" onmousedown="showToolTips(this,'a12')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b05" class="css-checkbox" /><label for="b05" class="css-label">enable KEYLOCK all the time</label><span class="info1" onmousedown="showToolTips(this,'b05')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b20" class="css-checkbox" /><label for="b20" class="css-label">enable slowdown effect on stop</label><span class="info1" onmousedown="showToolTips(this,'b20')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b06" class="css-checkbox" /><label for="b06" class="css-label">enable AutoBPM</label><span class="info1" onmousedown="showToolTips(this,'b06')"></span></p>
			</td>
			<td valign="top">
				<div style="padding-top:57px; padding-bottom:10px;"></div>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="a13" class="css-checkbox" /><label for="a13" class="css-label">disable fullscreen automix</label><span class="info1" onmousedown="showToolTips(this,'a13')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b19" class="css-checkbox" /><label for="b19" class="css-label">disable quantized cues</label><span class="info1" onmousedown="showToolTips(this,'b19')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b07" class="css-checkbox" /><label for="b07" class="css-label">disable reset EQ at load</label><span class="info1" onmousedown="showToolTips(this,'b07')"></span></p>
				<p style="height:18px;"><input onclick='settings_cb(this)' type="checkbox" id="b16" class="css-checkbox" /><label for="b16" class="css-label">disable EQ isolator mode</label><span class="info1" onmousedown="showToolTips(this,'b16')"></span></p>
			</td></tr>
			<tr><td style="position:relative;" valign="top" colspan="2">
				<div class="settings_title" style="padding-top:40px; padding-bottom:15px;">Audio settings</div>
				<div id="audioinfo" style="font-size:16px; line-height:29px;"></div>
			</td></tr>
			<tr><td style="position:relative;" height="330" valign="top" colspan="2">
				<div class="settings_title" style="padding-top:43px; padding-bottom:15px;">Headphones settings<span class="info1" onmousedown="showToolTips(this,'b02')"></span></div>
				<div id="settings_hp0" onmousedown="settings_hp(0)" style="position:absolute; top:92px; left:0px;" class="settings_block settings_block1 settings_block_active"><div style='line-height:28px; font-size:20px; margin-top:40px; margin-bottom:17px;'>No headphones preview</div><span style="font-size:13px; line-height:16px; color:#888;">output 1 :<br>speakers stereo  output</span></div>
				<div id="settings_hp1" onmousedown="settings_hp(1)" style="position:absolute; top:92px; left:210px;" class="settings_block settings_block1"><div style='line-height:28px; font-size:19px; margin-top:40px; margin-bottom:20px;'>Headphones preview with mono Y splitter</div><span style="font-size:13px; line-height:16px; color:#888;">output 1 left channel :<br>speakers mono output<br><br>output 1 right channel :<br>headphones mono output</span></div>
				<div id="settings_hp2" onmousedown="settings_hp(2)" style="position:absolute; top:92px; left:420px;" class="settings_block settings_block1"><div style='line-height:23px; font-size:19px; margin-top:34px; margin-bottom:15px;'>Headphones preview with multichannel soundcard</div><span style="font-size:13px; line-height:16px; color:#888;">output 1 :<br>speakers stereo output<br><br>output 2 :<br>headphones stereo output</span></div>
				<div id="settings_hp3" onmousedown="settings_hp(3)" style="position:absolute; top:92px; left:630px;" class="settings_block settings_block1"><div style='line-height:28px; font-size:19px; margin-top:40px; margin-bottom:20px;'>Headphones preview with external mixer</div><span style="font-size:13px; line-height:16px; color:#888;">output 1 :<br>player 1 stereo output<br><br>output 2 :<br>player 2 stereo output</span></div>
			</td></tr>
			<tr><td style="position:relative; line-height:29px; font-size:16px;" height="100"  valign="top" colspan="2">
				<div class="settings_title" style="padding-top:40px; padding-bottom:10px;">Beatport DJ shortcut</div>
				Instead of accessing Beatport DJ on your browser, you can set a special shortcut on your computer. Launching the app from this shortcut will mimic the look and feel of a native app (no address bar...).<br><a style="margin-top:11px;margin-bottom:10px;" onmousedown="pwa_install()" class="link_botton_green">Install the Beatport DJ shortcut now</a>
			</td></tr>
			<tr><td valign="top" colspan="2">
				<div id="midipanel" style="font-size:16px; line-height:29px; margin-top:30px;"></div>
				<div id="cinfo" style="color:#AAA; padding:10px 0;"></div>
			</td></tr>
		</table>
	</div>
</div>


<div id="bigmsg" class="bigmsg">
	<div id="bigmsg0" class="bigmsg_close" onmouseup="showBigDiv(null)">&#10005;</div>
	<div id="bigmsg1" class="bigmsg_title"></div>
	<div id="bigmsg2" class="bigmsg_content" style="font-size:16px;"></div>
</div>

<script>beatport_init(); document_ready();</script>

<a style="display:none;" id="login-manager">Login</a> <!-- tu pourras me mettre une function pour afficer la fenetre de login? pour linstant je simule un click sur cette div -->

<script src="/static/js/preload.js"></script>
<script src="/static/js/2.d0341244.chunk.js"></script>
<script src="/static/js/main.faf5d891.chunk.js"></script>

</body>
</html>
