html, body {margin: 0; padding: 0; height: 100%; }
body {
  background-color: #000;
  color: #fff;
  font-family: Times, "Times New Roman", serif;
}
a { color: #e3d25f; text-decoration: none; font-weight: bold }
a:hover { text-decoration: underline }
.logo {
  display: block;
  width: 155px;
  height: 100px;
  background-color: transparent;
  background-image: url(elogo100.png);
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -2022px;
  z-index: 2;
  position: relative;
}
#nameset {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 22px;
  color: #e3d25f;
  margin: 20px 0 8px 0;
}
#meta {
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 14px;
  text-align: center;
}
.content {
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.playerwrap {
  width: 100%;
  flex: 1;
  display: flex;
  position: relative;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
}
#equalizerwrap {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
}

#equalizerbg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 2px;
	background: rgba(0, 0, 0, 0.3);
	z-index: 7;
}
#equalizerbg.hidden {
	display: none;
}
#equalizer {
	padding: 20px;
	background: #000;
	box-shadow: #000 0 10px 20px;
	list-style-type: none;
	margin: 0;
}
#equalizer li {
	margin-bottom: 10px;
	color: #ccc;
}
#equalizer li input {
	width: 100%;
	height: 25px!important;
	border-radius: 13px;
}
.eqinfo {
	float: right;
}
#settings, #pleditorwrap {
  position: absolute;
  background: rgba(0,0,0,1);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 30px 10px 20px 0;
  overflow-y: auto;
  box-sizing: border-box;
}

#credentialwrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

#settings h2, #pleditor h2{
  text-align: center;
  padding-top: 40px 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 26px;
  color: #e3d25f;
  overflow-y: auto;
}
#pleditor h2 {
	line-height: 48px;
	margin: 5px 0;
	padding-left: 48px;
}
#pleditor h2 span {
	display: block;
	float: right;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA2FBMVEUAAAC+pDnm12HXxVHk1l65mjLJskO9oTjo3GPEqD3cylWyljDfz1rOuknBpjq+oDbt4Gjz6W6zli/17HC1mTLw5Wupjyq8nTOuky3Tv07p22PGq0G1mDDx5Wzw42vj1l7ez1nFqUHCpz64mjKzljDx5WzHq0G1lzHby1a2mTHbyla7nTTXxVHUwU/LtEXIr0HFqj3DpzrApDm9nzW5mzKyli/063Dz6G7v5Wvi013g0FvdzVfZx1POuUi+ojjs4Gbo22PVwk/RvkzQu0qvky2skSyqjyvl119lX1m8AAAAKXRSTlMAAgKgoaCfo6KioaGgn5+fLaSko6OioqGhoEItLfX19fX19fX1pEJCLVUTdPcAAAEKSURBVDjL1ZLZdoJADEDJoKCiqHVt7b7DgOybIO72//+o9FSdSeWhr+YtuXdyMjkRLik6BOdwi/Obuy5BfPTygd7fx1GPcFym2ivfg7xFYTggJ656vnYFAm90wyiukQOv5/TImdGLF8sK+eWO5/ePnBmDxTJpkoJLdk6rjDOj9pWkIgHJcjzGkVGZ6cZ1y7LdEePYaOqrzdRy2jzHhmjOp7bK+Lmw/kcDlx8R84axnkuqSzUFynlmbiSAtq8FYyj9gmG2CgDVINgO4XwJabb64YWhbPc7BcqWdCjCeL/TZMBrTtJMPJVgGPh5nTc6DzNd5A+mT92nCTq5xwY+Ofn5HQ/x+fdoJ8IFxTeZ6Bp9c7k3QwAAAABJRU5ErkJggg==');
	width: 48px;
	height: 48px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	border-radius: 24px;
}
#pleditor h2 span:hover {
	background-color: #272727;
}
#pleheader {
  display: flex;
}
#pleheader span {
  padding: 8px;
  font-weight: bold;
  box-sizing: border-box;
  color: #e3d25f!important;
}
#pleheader .space {
  width: 70px;
}
#pleditor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 900px;
  height: 100%;
}
#settings::-webkit-scrollbar, #pleditorcontent::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #000;
}
#settings, #pleditorcontent {
	scrollbar-color: #e3d25f #000;
  scrollbar-width: thin;
}
#settings::-webkit-scrollbar-thumb, #pleditorcontent::-webkit-scrollbar-thumb {
  background: #e3d25f;
}
#pleditorcontent {
  flex: 1 1 auto;
  overflow-y: scroll;
  height: 0px;
  margin: 0;
  padding: 0 0px 0 0;
  list-style-type: none;
  border: #e3d25f 2px solid;
  box-sizing: border-box;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAABAAgMAAACrYYWUAAAACVBMVEUnJycAAAAtLS3JOrneAAAAGElEQVQI12NYtYKBZgBoOAiFhtAIAQ0HALK+GReOr3bpAAAAAElFTkSuQmCC');
}
.grabbable {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.pleitem {
  display: flex;
  justify-content: space-between;
  background: #000;
}
.pleitem span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  color: #d7d7d7;
  width: 40px;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  border: #2d2d2d 1px solid;
}
.pleitem input {
  font-family: Times, "Times New Roman", serif;
  background: #000;
  color: #e3d25f;
  height: 32px;
  line-height: 32px;
  text-indent: 8px;
  font-size: 18px;
  border: #2d2d2d 1px solid;
  font-weight: normal;
  box-sizing: border-box;
  margin-top: 4px;
  border-radius: 0px;
  outline: none;
  margin: 0;
}
#pleditorcontent li:nth-child(odd) input, #pleditorcontent li:nth-child(odd) span {
  background: #272727;
}
.plecheck {
  width: 30px!important;
}
.plecheck input {
  line-height: 10px;
  height: auto;
}
.plename {
  width: 300px;
}
.pleurl {
  flex: 1;
  color: #d7d7d7!important;
}
.pleovol {
  width: 53px;
  font-size: 16px!important;
}
#pleheader .pleovol {
  width: 62px;
}
.credentialitem {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.credentialitem span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: bold;
}
.credentialitem .textinput {
  width: 47%;
}
.credentialitem input {
  width: 100%;
  box-sizing: border-box;
  background: #272727;
  color: #e3d25f;
  padding: 6px 12px;
  font-size: 20px;
  border: #2d2d2d 1px solid;
  font-weight: normal;
  box-sizing: border-box;
  margin-top: 4px;
  border-radius: 0px;
}
.credentialitem label {
  text-transform: uppercase;
  color: #ccc;
}
.credentialitem input:focus {
  outline: none;
}
.formbuttons {
  display: flex;
  justify-content: space-around;
  max-width: 280px;
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
}
#pleditor .formbuttons {
  max-width: 100%;
}
.button {
  padding: 8px 22px;
  font-size: 18px;
  border: #e3d25f 2px solid;
  font-weight: normal;
  box-sizing: border-box;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  min-width: 120px;
  margin-left: 20px;
  text-transform: uppercase;
  color: #e3d25f;
  background: #272727;
}
.button:hover {
  background: #e3d25f;
  color: #000;
}
.button:active {
  position: relative;
  top: 2px;
}
#save_button {
  background: #e3d25f;
  color: #000;
}
#navbar {
  display: flex;
  width: 400px;
  justify-content: space-between;
  position: absolute;
  top: 0;
  padding: 30px 0 0;
  box-sizing: border-box;
}
.playerbyttonwrap {
  display: flex;
  width: 400px;
  justify-content: space-between;
  margin-top: 14px;
}
.playerbytton, .stopped, .playing {
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border: #e3d25f 2px solid;
  border-radius: 26px;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
}
.navbutton {
  border-color: transparent;
}
.navbutton:hover {
  border-color: #e3d25f;
}
.playerbytton:hover, .stopped:hover, .playing:hover {
  background-color: #272727;
}
.playerbytton:active, .stopped:active, .playing:active {
  position: relative;
  top: 2px;
}
.stopped {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAvVBMVEUAAADg0Vvez1fYx1Lr4V/q3l7l2F3o3F/h01nw52rr4WDx53Dez1nZyVL69o707Xju5Gbt42X38oXx6XP584n17X3t42v584fw6HX27nzs4Wzdz1Tx6HTw523h0lvez1naylXl11/m2GHj1V7f0FrdzVjq3WTn2mLZx1L38IDv5Wjo3GPi01zczFfcy1bz6m/s4Wf7+JP69o317nnt4mju42Pu5W7x6Gzw5Wvr32Xl2F/59If07HP38oTj1lmRTpVfAAAAHnRSTlMAEkkE/taStm377SkpKe3t7e3W1ra2tpKSbW1tSQQSPakHAAAA9klEQVQ4y82R2XaCMBRFtdLaWjvXWRMCQkhQQcIkDv//WSaRpWI0vnpe9+aek0XtgfL/fkdYLnt1vUCiz8FEJwQBiX7HOiHLA7Lu3JwSZTmN45SQfv2GkOdxGLpuyr6GjasCjcOV6/sWTtnf0xVhLTm2LGRb6abbVoUjn4Epom8vl1O2kheSw/kC0Z/XRlUQXGAAOTc9EyXPlSnEx4fPp5J73s64EMp66MxNzoHRGlUrGDrj0DCUkcy2geD8/AInzQ/lmWxWcrMQ69RsyvN20pLvUwXJQZiU5UoCfh669FiuCo6D6alcTVbQb16uEcTv0aXZrj1u9gzXJnV9YpvtAAAAAElFTkSuQmCC');
}
.playing {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAP1BMVEUAAADv42vy52369Ivu4Wnz6W7x5Wv162/79o/7+JLt32js3Gb48YP584j484Xn12L17Xv17XHq2mXz6XTk0mCFQY+JAAAAAXRSTlMAQObYZgAAALFJREFUOMvlz90OgyAMhmH+CqJQcXr/17p+3cySsjuwRyTvQ5O6Z815nmOM1pxrzD3KWHBd+/7aBPCaUvLegqEdoGufgfaNAdDzYoH2tTsXPfoEmvYb5BAmgPwFWXqoFqCnFAUgB5qAdgXIVCxgdO8VkPQJ/K5fAvoxA/QMgG433NfjuIr/hRYL0D+gHNJDtAA5KDiK9PwfUMUGku67BchUAChIT2zAgqm16itG5uYeNW/M9AgMwr5N0gAAAABJRU5ErkJggg==');
}
#prevbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABR1BMVEUAAADRu03Zxz7g0Fbn2lvx6Hbp22jXxFC/qTvo2WS2nTXFrkPt4WfbyUHl11rk1Vfs4Wbn11jj1FPYxT/27X/x53LVwj3TwDro2F3Wwz/byUnRvTzp3WbSvz/k1Fvq3GbezVTNuDvOu0DItDnh0FvJszzTv0rErjjezFrWwk7Xw1K/qDjbyVi7pDi3nzbZxVXTvlDBqUHKs0jezETcyUC9pT3t4GPq3FzWwVLj1E7FrUO/pz7u4mbi0F3o2VzcyFjUv1HOt0vIsEa7ojvTvjPNtyv17nzz6XTw5Wvi0l3ey1rax1Xl1VLXw1LSvU/Qu03h0Urgz0jDrEDVwjj38ILz6Xbx5m/q3Wnr3l/fzFvi0ljl1lbZxlLVwkDPu0DXxDvQuy7LtCrl1GHm1mDl1VrYxkzbyUfJs0XIsj/KtT3ItDvBqzvKsin8qlL8AAAAL3RSTlMAFv6t66tWVi0VCwX19e3t7Ozs7Ovr4uLU1MXFsbGvrZ6ejIx2dmRkWVk9PR4eFHLHxygAAAE0SURBVDjL7ZHndoJAFISVJCYxvffeKx0FxIYlKAhI1CT29Pb+v13KXV/C+QFzznyzZ+/d0EhD/feH/m4P2/AYuH4e3MzZHAt+cvwJbB6Amy22Y0M9pgkY6Hm/+yOuXeWtoJ4sUxjo5dzvxQrxrcq06NdfKCqdACCHgKkdrsPzMl1FwNVSslWh4sYDBpzoCdH+U91c0r16JR03SAw4zgbxq6o8TUtSVl9ItkyUk2SqDkC3u8798LJMS9ks05xH10N5OVUqAkBw0WP28wvlDJOJhfeFNxL1S88Y4Dh0yW3xg0F5Bm3ncjGhoFypAcB62ztfbhoZ0xTcMQ/qDUXRChiw/eUdxt7jlD98ZK3YeMWAbQXmelPQgu1MTxRqjwBYIn6s01k8fGQVA6IewrrdBYcOCY0EGgATKDjicNrzUgAAAABJRU5ErkJggg==');
}
#nextbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABCFBMVEUAAAC+ojXKsDi0mC/awzndxjvXwTTgzUjRuTTUvDjj1VbUvDrHrjHEqjLXxEu6ny/Sv0vWwTXhzkXUvjXq3lzl1lDRujPQujLbxj7RujTcyEfMtTPXwT7byUjRuDnJsTLSukDEqzHHqzm5oC/JsD+1mjDbxDfVwDS0ly+7nDO1mDDYwjW4mjLizULEqTzBpTnAozjUvTG3mTHFqz7fyTzKsDnUvjTSvDDq3Vjl1Evj0UbHrkDdxjvCpzq8njTIsEHgyz7awza/oTbQuTTs4V3k1lPn2VDMt0bQuUXLtUXKskPVvz7VvTvJsTO7oDDXxUzYwkDYwTzDpjrFqjjErDPDqzK/ozLCqTEl328YAAAAJnRSTlMAFVgI7ez7+sWuq6uMY1ctFfXs7Ovr4uLU1LGxr62ennZ2PT0eHggzQnUAAAEdSURBVDjL7ZFncsIwFITtQEJ6771KNrIt4QoOdmwTAoSQXu5/kzwZJE1mcgT215u3366kkTaV1OK6HA+v1RohMd1vr4oxrp1X/gG6TVESD+39SwHkAmj2X7o74xKbfbz5p3o550QCvUGv1jrROVAUaYCqK3xNFDB4vLvtx5szmpalqWmmHTS/BgAWwAP4nuO92se6b5qmZbnf4dxyBSuA+w5lQbuKSr9eNz7xbiiBFvgJZQUHwAfbML7wXqMhAc95p4w++Qt623Jd8J87cESoAMhD/yxcEvF6d4T5JVVDnNCEx2FEEP8Jt8pnRpEAbBb4PM4BaCdngP4FhtmSPh7zET64mqwjeUQG8YnIxoX8LPVMiAsd3WhSmGhTSf0Cx6gshxH98P4AAAAASUVORK5CYII=');
}
#volpbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABp1BMVEUAAADTv03byVXSvkzax1PYxEvbyVLWw07Svkrj0Ufr31vt4WPr317q3V7m2lvj1Vjm2mHdzE3cy1DRu0PbylHXxEzYxlHWw0/u5Gbs4V7r31nu5Gft4mPq3Vnq31/n2lfm2Fjn21zl11fo3WDk1lbj1VXl2FrdzErh0VPg0VPYxEXfz1Lcykzf0FTayEzWwUfcy0/ezlbfz1nUwEvPuUXXxVLGqjvNt0Xv52rs4V3s313k0kjs4V/o2lTm1lDp21fq3Vvu5Gnn2FPr3l3k003s4mfq317q3mHs4mbk1FHbx0Hp3mHo21/cx0Lfz0zdy0jo22Hfz07h0VDj1Vfezk7h01fk2F/YxEfj1Fvh0Vbj1F3g0FjQuD7h1FzZxk7g0lvdzVfez1nTv0nNt0XGrTzaylbYyFTYx1PXxVHt42XayVXv5Wjs4mbu42Ps4WHs4Fzez1np3Fjn2VXn22Dcy1fi0lDgz03w52ru5Wjq3mLk1l3o21rdzlbk1VTayFTo2VDWxFDk1U/dyknv5WXu42Dg0Vvs4Frq3lfk1lfg0Vbp21TUwU3gzUTlFyGcAAAAZXRSTlMAASgEEVk8JhX+9O7k1LaWjo1kTElFGQ78/Pzv5+XX0sm7uLe0sKWjmJCPiYV9cmppT0AtHRQUCPr69vby7+/t6+rq6OXf39zYzMrJwry4tLGxqpqaj4iGhXdsbGZeXllVNDQkGQe+VJQAAAGqSURBVDjLzdJlc9tAEIDh15Jsx2zHThxsqGkDDadJmZmZuZVkmSkOYxl+dCVZmlEyU3/s5Pm2s7d7t3fHvuN656URbygXEBrkj15drmSj/JN4Kx9423lexNbEbs9ylSjRxfd27Lko4TTdtpKdYnrpNZaHhWYcmrqW0xkBKfME0wyJQr9zwIFstXhMxNV2z4yfB5n3d9ineJnTtMxXuXgN6LqJIVwQGCwlqAuspBRFlouXkxA6ALTyeLWZ0XXrEJK2oaZlOV3VBqAvCJEIkz/GGF84gknQ9HJZUdSi1sqhU3DiIC3lIdwLh62Bs3q5nk+l8gki7XCuF6H8gJbaHavDkp5X9fzaF72DH/xGh0e4a1YHabGqGAuUfBj6umF4iEl9//Gdp9R1Voz6rY0rSegJma8Q255gZGeCuheZz1pubUs1JuzuxXB/c4a7vrjjJsP5lHpcxNUxaMbuS675k74552cIrv4ueJG+j2KaJe67jZOn/WdpCk/pDZaRP6/YZezb+jCxXx/s+NONuT0/tr901n36gohNZI9kT7m2HaOB2eubZ7w0FP/I//cX2VZVBFBJqXUAAAAASUVORK5CYII=');
}
#volmbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABd1BMVEUAAAC4njLo11PYxDrm00/hzlDaxEnIrUDHrUG9ojnk0Uvn1lHk0U3SvTPWwTfp2lnj0E3gzUniz0/dyEXj0VHgzU/bxkbaxUjfzVLey1HHsDTaxlHFrTq7ojLTu0i9ozXUvUyxlyyulSzNtEXGrECzmTDTvjLeykLq3Vzp2lnaxT7QujHm01HRuzPm1FPdyELYxEDNuC/WwTvLtS/l1Vfjz1Dm1ljaxkTJszDaxUbKtDLWwULVwELfzFLKszjey1LOuD7AqS/Zw0zKtDy7oyzHsDu+pjK5oC7Wv0zayFTXwk7XxFHTvU3TvU2pjyu9ojq6nze1mzO0mTLKr0LApDy2nDXUvzSxljHp2Vbhz0jgy0PMs0HaxTy+ozu8oDi4nTbQujLTvTGymDDr3Vvo2FnfzE7gzEbcyUDSvDbVwTXi0VXaxEzFrD/EqD/IsD7Cpj7OuD2+pTm6oDm+pDe7ozbMtzW5oTTKtDPIsTO+pTPCqjLFrjGuky/WrPCGAAAAT3RSTlMAJ/7+/bOWGQ4E/vby7u3s5OLX1Mm5tqWQjo5bS0A9NyUlFRQSEf377+/u7uvn5ubf3NjV09HMycK7uLaxl46IiIV7bGxeWVVPTTQoHgUEcf+/bgAAAS1JREFUOMvNzkV3wkAYheGLS4sVKS4F6u7ubgQCQQtJ8Lr7jy90l55Mlj082/fOdwad5yAkmUMznEEGsr4p9p11k/v5ImvYNxp1INni3txYLwRI3df/2fDCV9gjfWDshVfIEKlvEgbLTPxVoQMGVkXiLsc0mx+J52kAEwsig5Gv73Q6EX+a1AJWKwCNsEcZPs0nUqWH+gqwZAHUagjImNbzVIkq3tY06O0GulQQCDR+eyyWzHmh1gOjtj8XFPEU9Ri7SOb14heiBYoqtvp11gHYzYBzDULD9+1+R1u0wFwPgDCEdnK5WjZ/Q7fbuA3iHFk6r9QBchVhEDZXaXkQkcwGCPzKK+Uh/BkPSLblVRdc5WMQ2TMmz5DpDETa2cplxQkJp/PlwRNIOgri//0AbVY1/4adyuMAAAAASUVORK5CYII=');
}
#playlistbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABTVBMVEUAAADr4GLo3GTSvUrn2mLVwlDh0lLq32Xm2l/f0Ffi013o3Gbs4Wrg0VvXxlDf0Frz7Hncx0Dz63jfzUjm2Vjo3F3x6HPq4GTfzkrbyUXk2Fnx6XXu5W7y63fo3WLk11rw6HPVvTvr4Wnr4Gnf0VTv5nLUvUDZyEzs4m3v5XHo3GbMsjri1Fzl2WLUwEnHrDjaylPdzlfQukbXx1DGqjnWxE/r3mjYxlPPukjy6nTx6HHn2mPm2GHj1F3ez1nayFPfzUj07Xrw527u5W3u5Gns4mbg0Frdzljl1lPRvUnJsELGrT/s4mvq3mHk1l/h0lzm2VjczFfh0lLk1VDWxE/i0k7Tv03i0Uzgz0rNt0TKs0PdyULcxj/Eqj3Dpzvz63fr4Gfq3mfo3GPn22Dm2Vbby1XYyFHfy0Xbx0Tv5W3Tv0nZxEPTvT7Ruj7Irjt5kAYfAAAAOXRSTlMA+40mCQPLurZ0V01CPjYW/Pz6+Pf27+7r5uPi3t3Z0cnGw62roqGVhHt3dmtkXVNNREQ6MiwiHhGFwXcaAAABNUlEQVQ4y83SR3OCUBQFYHuNMb333nujWlCBBJQmgiHGrqn/f5mXZCZA5rr3bjjM+ebCm3me4Z2g/yw6oEomjn2RFa8oSUC5v702gzN1gmJTut4GQIZpEBTNdrqapvMcBMgiVaDlFJquBgOSJIimKE6vbnEqAJ4xfCnsOzq/RZkrgyDwl9UKADDMzmUQ4A5gQCBr50oaALgDGBDIvtg53YMA4wCPAGByv0//yYW/B4HcD7gOqUa63/8HAnHfQSyXR+lySuHvH55qlqsfWcSEeqOJQHBBMasIfFqufgwnSwW2g8CoxJvfC97XnWAZL1IlWi54EWjzaEHtwzp19DcZAl0EVm5F0CdCymvVfBs/dP3hhIAW0C1vAr3c7c5Nzu9cuc+whwkkkZ+NeQZOfHMjHE16hnS+AIiQOxEJiBv0AAAAAElFTkSuQmCC');
}
#eqbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAwFBMVEUAAAD27X/QvErn2WH27oH0633v43Hj01vcyk7w5XDj02HbyVf28IPx53Xu4m7s4Gni0ljgz1TayUvq3Wfo2mPy53Tt4G7s3Wrt4Gn27oDx5nP48of274Li0lT38YT17H306nru4mv59Irz6Hbr32bq3GTl1ljfz07v5G3p2mHo2l7gzl3m2Fvgz1LOuEzXxEDeylrczEvLtEjbykfZx0TVwj7SvznQuzXKtS7j02HcyVHSvVDZx07dzEzNuDTMtzDLJSoKAAAAGHRSTlMA4Uvh0tLS0tJLS0vh4eHh4eHh0tJLS0sGkbICAAAA4klEQVQ4y83Sx9KCMBSG4SN2/XtNCCGEKgjYe7v/uzJRR8YZOePSd5l5FpkvgSet+/PdQUE1Dt5Q4A/7Jty0PCzms8F0EmU8TOMzcCi1CrDXYDKKeBgmARANhAYlyf7KA6x3Il9R0Gk0/u8cG62WAVhf2/UHCqJxHkJJc7WBBikEPumZniOoZdk2uwI10giycZ5AQKQGtABFPN/EgPWZ8SoKjGazC4/1V6+3UVBxnAoKKJE23KTemadJ7BNpmp5QgNjAmOtewU5/lOQy0gkwYK4CJVmyx/BLCvGCgnat9gvP1BGHfhnUEswA0wAAAABJRU5ErkJggg==');
}
#settingsbutton {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAB8lBMVEUAAACDbR+QdyKgkjzEqirCrDWReCCyp0WJciCJcyKYhzChkzqTgS3Vw0G6oSe6oSjRw0q1nCm8oy3TyFO4nyrIuEKxlyfHu0qiiSKegyGijCyRdyKmlziomjqklTexqEmvpkmKdiXFrCzJry7n3mLf0lLXxUPHrS7cz0/KrzDZy0rPuDfBpyrn32jSwEDKsjTEqi3BqCzIsDTp4264nynPv0Pj3GfWyU/c01yzmybh2mSulSS+pi/Zz1rBrDazmSiqkCXFt0Pa1GOliiOtkynNxFTZ0mOpkCrBtUmqkivIv1OpkyybgSK+s0rJwlqplzKUeyGQdx++tU6ypUHCu1WWfSOnmDjCvFexpkSahCqNdSGHcB+XgimonECAax7OtDDLsC7Hrivt42js4mXq3l3h0Uy8oC/38Xv07XPv5Wvt5GPs4mHn21jez1fm2FLXxVDUwUneyULLtEHbxT7JrzzFqDS/oDTUuTPDpjH59ILz63Hp3GLi1Vzf0Frh0lbby1DUwk/ezUfSvUPQu0PNszvBpTrZwDjVvDfKsDa7nTPVujLRtjHPtDG2mS+xlS7Jry3Eqiz27nfx6W/k12Dq4F7bylXYx07j1E3Qu0rhz0fMtkTJsUHcxz/Vvj/Otj/Eqj7NsTTRtjPHqjO+oDLApDC+pCyMAG9RAAAAX3RSTlMADUYD/NtgQy4hFxQK+fTt49/e1tTT0bizqGVOSEE8Jg8G/vz6+vr49/f29vX09PTz8vHv6efm5uXl4eDf2NXRysbCu7i1s6Keko+Li31zcXFwal9dWU9NS0s+OjcbEJmukO4AAAFySURBVDjLYhiCIJZdlguXnLyXrUpWdkpOXiqvnTcnhnSIVUZVUnXt1PyGGc3Nc9vahUJRpMON06uSJtfU5ubWTysomt9aVhrfzc8El2Z2q0zPrE5OTs5OURUwVSssbl9Q2pvWnygJU+BXOTEpc1KmsEcwN0+YjCKXlLtgfEJa39JENpgKp/SMDAv2CHEBjbzpM+do27gwSZskTEiUQNhhphskLzwlpa6+YNbskpKOhfFinAF81kiOVFBwTc6qyW/IL2ia11La2VkRryTByIjsDfak7Nw6YBDosbLql3f1LOmbwBKNGg6+WSk5orLMXFKRPMxMYgn9iYHoIQWYuLmMnChvYXFbl7o9B5OlJGZQczumNjaVtJaVVcQnOscxYFGglVpU1NKxqCKtN4GPEVtsyTUWFhuJiBjGJ7BwYI9Pf9YYBkYehihBNpzJwVOzvFvHB096ESpfnBbvgEcBo0FPPL8iviTHoczCiT9RskkzDEcAAG+FX5nDaQtoAAAAAElFTkSuQmCC');
}
.infowrap {
  display: flex;
  width: 400px;
  justify-content: space-around;
  font-size: 14px;
  margin: 16px 0;
}
#volrange, .slider {
  overflow: hidden;
  width: 432px;
  margin-top: 34px;
  background: linear-gradient(to right, #bfa73e 0%, #bfa73e 0%, #272727 0%, #272727 100%);
  border: solid 2px #e3d25f;
  border-radius: 13px;
  height: 25px!important;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}
#volrange::-webkit-slider-thumb, .slider::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background-color: transparent;
  border: 0;
}
#volrange::-moz-range-thumb, .slider::-moz-range-thumb {
  width: 10px;
  -moz-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background-color: transparent;
  border: 0;
}
input[type=range]::-moz-range-track {
  background-color: transparent;
}
.slider {
  width: 400px;
  margin-top: 4px;
}
#playlist {
  width: 400px;
  scroll-behavior: smooth;
  overflow: auto;
  margin: 0 0 0 0;
  padding: 0;
  list-style-type: none;
  border: solid 1px #e3d25f;
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
  box-sizing: border-box;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABOAQMAAAAw4lVwAAAABlBMVEUnJycAAADxyujSAAAADklEQVQI12OgLjhATQgAdZgdQbNqrBUAAAAASUVORK5CYII=');
  scrollbar-color: #e3d25f #000;
  scrollbar-width: thin;
}
#playlist::-webkit-scrollbarr {
  width: 5px;
  height: 8px;
  background-color: #000;
}
#playlist::-webkit-scrollbar-thumb {
  background: #e3d25f;
}
#playlist li {
  text-transform: uppercase;
  font-size: 20px;
  padding: 8px 16px;
  color: #bfa73e;
  cursor: pointer;
  position: relative;
  background: #000;
}
#playlist li span {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 10px;
  background: #000;
  width: 44px;
  box-sizing: border-box;
  text-align: right;
  font-size: 14px;
  vertical-align: middle;
}
#playlist li:nth-child(odd), #playlist li:nth-child(odd) span {
  background: #272727;
}

#playlist li:hover, #playlist li:hover span {
  color: #fff;
  background: #323232;
}
#playlist li.active, #playlist li.active span {
  background: #bfa73e;
  color: #000;
}
#copy {
  padding-top: 14px;
  font-size: 14px;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@media screen and (max-width: 480px) {
 .content { padding: 20px; }
 #playlist { width: 100%; }
 #playlist li { font-size: 16px; }
 #volrange { width: 100%; margin-top: 24px;}
 .playerbyttonwrap { width: 100%; margin-top: 8px; }
 #navbar { width: 100%; padding: 20px 20px 0 20px; }
 #meta { margin-bottom: 8px; }
 .infowrap {width: 100%; padding: 0 10px;}
 .logo { width: 100px; height: 65px; background-size: cover; }
 #copy { font-size: 10px; padding-top: 10px; }
}
@media screen and (max-width: 480px) {
  .playerbytton, #playbutton {
    width: 42px;
    height: 42px;
    background-size: 75%;
  }
}