/* Sidebar --------------------------------*/
body.no-sidebar .index-content					{position:absolute;top:100px;right:40px;left:40px;bottom:60px;z-index:-3}
body.no-sidebar #player,
body.no-sidebar #player_info,
body.no-sidebar #playlist 						{right:40px;left:40px}
.index-content									{position:absolute;top:100px;right:220px;left:40px;bottom:60px;z-index:-3}
.index-tab										{padding-bottom:180px!important}

/* MUSIC ----------------------------------*/
#music											{padding-top:10px;cursor:pointer;width:100%;margin:0 auto}
#music .folderContent 							{margin-bottom:5px;border-top:1px solid #888;border-bottom:1px solid #888;width:100%!important;color:#fff}
.album-title > div								{position:relative;float:left;width:80px;height:80px;z-index:0;overflow:hidden;background-size:cover;background-repeat:no-repeat}
.album-title > div:before						{position:absolute;top:-20px;left:-20px;content:'';width:80px;height:80px;border-radius:80px;border:20px solid #222}
.album-title									{position:relative;cursor:pointer;height:80px;min-height:80px;line-height:80px;font-size:20px;text-align:center;border-bottom:#373737 1px groove;display:block;color:#fff;background-color:#222}
.album-title:after								{position:absolute;top:20px;right:33px;content:attr(data-tracknum);font-size:12px;line-height:20px;border-radius:20px;display:inline-block;min-width:20px;width:auto;min-height:20px;height:auto;border:1px solid #222}

.album p 										{float:left}
.album .add_all 								{float:left;color:#999999;font-size:11px;padding:7px 0;text-align:center}
.album .add_all:before 							{content:"";position:relative;top:0;left:0;height:28px;width:28px;background:url(../images/audio/addall.png) no-repeat top center}
.album .add_all:hover 							{color:#6B6B6B}
.native_lang									{display:block;line-height:50px;margin-left:5px;font-size:20px}
.title											{display:none}
.add 											{display:none;background:url(../images/audio/plus.png) no-repeat top center;z-index:99;width:26px;height:26px;float:right;margin:10px 0 0 0}
.play											{background:url(../images/audio/play.png) no-repeat top center;z-index:99;width:26px;height:26px;float:right;margin:10px 10px 0 0}
.download										{background:url(../images/audio/download.png) no-repeat top center;z-index:99;width:26px;height:26px;float:right;margin:10px 0 0 0}

/* PLAYER CONTROLS ------------------------*/
#player_controls 								{position:fixed;bottom:0;left:0;right:0}
#player											{width:auto;background:#222;height:30px}
#player_info									{height:30px;width:auto;background:#222;color:#fff}
#playlist										{display:none;background:url(../images/audio/thumb-list-bg.png) repeat-x #222;width:auto;height:140px;overflow-x:scroll;white-space:nowrap}
#playlist li									{cursor:pointer;list-style:none;display:inline-block;margin:10px 20px 0 0;width:auto;opacity:.4}
#playlist img									{opacity:0;position:absolute;z-index:250}
#playlist li .remove							{opacity:0;cursor:pointer;z-index:500;background:#222;color:#fff;padding:3px;position:relative;top:0px;margin-right:-10px}
#playlist li:hover .remove,.selected_item		{opacity:1}
#playlist li[data-native]:link,
#playlist li[data-native]:visited				{position:relative;text-decoration:none}
#playlist li[data-native]:after					{content:attr(data-native);position:relative;top:25px;width:auto;line-height:40px;color:white;background:#222;padding:25px 15px;white-space:nowrap;border:2px solid #222;z-index:99!important}
#playlist li[data-native]:hover:before,
#playlist li[data-native]:hover:after			{border:2px dotted #ccc}
#playlist li[data-native].selected_item:after	{border:2px solid #ccc}

#clear											{background:url(../images/audio/clear.png) no-repeat top center;display:inline-block;cursor:pointer;float:right;margin:2px 0 0 0;width:26px;height:26px;z-index:99}
#song_title										{display:inline-block;text-transform:capitalize;font-size:12px;padding:10px 0 0 5px}

@media only screen and (max-width:1000px)	{
body.no-sidebar .index-content					{top:100px;right:10px;left:10px;bottom:60px;z-index:-3}
body.no-sidebar #player_info,
body.no-sidebar #playlist 							{right:10px;left:10px}
body.no-sidebar #player 							{bottom:28px;right:0;left:0}
.index-content										{top:100px;right:180px;left:10px;bottom:60px;z-index:-3}
#player_controls 									{bottom:0px;left:10px;right:10px}}
@media only screen and (max-width:800px)	{
body.no-sidebar .index-content,
.index-content										{top:40px;right:0px;left:0px;bottom:60px;z-index:-3}
.jaf-container div ul li 							{width:100%;margin:0}}
@media only screen and (max-width:400px)	{
.album 												{margin-left:3%;width:30%;margin-bottom:1.5%;display:inline-block}}

.mejs-container 									{position:relative;background:#222;font-family:Helvetica, Arial;text-align:left;vertical-align:top;text-indent:0;width:100%!important}
.me-plugin 											{position:absolute}
.mejs-embed,
.mejs-embed body 									{width:100%;height:100%;background:#222;overflow:hidden}
.mejs-container-fullscreen 							{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video 					{width:100%;height:100%}
.mejs-background 									{position:absolute;top:0;left:0}
.mejs-mediaelement 									{position:absolute;top:0;left:0;width:100%;height:100%}
.mejs-poster 										{position:absolute;top:0;left:0}
.mejs-poster img 									{border:0;padding:0;border:0;display:block}
.mejs-overlay 										{position:absolute;top:0;left:0}
.mejs-overlay-play 									{cursor:pointer}
.mejs-overlay-button 								{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px}
.no-svg .mejs-overlay-button 						{background-image:url(../images/audio/bigplay.png)}
.mejs-overlay:hover .mejs-overlay-button 			{background-position:0 -100px}
.mejs-overlay-loading 								{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#222;background:rgba(0, 0, 0, 0.9)}
.mejs-overlay-loading span 							{display:block;width:80px;height:80px;background:transparent url(../images/audio/loading.gif) 50% 50% no-repeat}
.mejs-container .mejs-controls 						{position:absolute;list-style-type:none;bottom:0;left:0;background:rgba(0, 0, 0, 0.7);height:30px;width:100%}
.mejs-container .mejs-controls div 					{list-style-type:none;background-image:none;display:block;float:left;width:26px;height:26px;font-size:11px;line-height:11px;background:0;font-family:Helvetica, Arial;border:0}
.mejs-controls .mejs-button button 					{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:transparent url(../images/audio/controls.svg) no-repeat}
.no-svg .mejs-controls .mejs-button button 			{background-image:url(../images/audio/controls.png)}
.mejs-controls .mejs-button button:focus 			{outline:solid 1px yellow}
.mejs-container .mejs-controls .mejs-time 			{color:#fff;display:block;height:17px;width:auto;padding:8px 3px 0 3px ;overflow:hidden;text-align:center;padding:auto 4px;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
.mejs-container .mejs-controls .mejs-time span 		{font-size:11px;color:#fff;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}

.mejs-play {}
.mejs-pause {}

.mejs-controls div.mejs-time-rail 													{width:200px;padding-top:5px}
.mejs-controls .mejs-time-rail span 												{display:block;position:absolute;width:180px;height:10px;cursor:pointer}
.mejs-controls .mejs-time-rail .mejs-time-total 									{margin:5px;background:#222;background:rgba(50,50,50,0.8)}
.mejs-controls .mejs-time-rail .mejs-time-buffering 								{width:100%}
.mejs-controls .mejs-time-rail .mejs-time-loaded 									{background:#3caac8;background:rgba(60,170,200,0.8);width:0}
.mejs-controls .mejs-time-rail .mejs-time-current 									{width:0;background:#fff;background:rgba(255,255,255,0.8)}
.mejs-controls .mejs-time-rail .mejs-time-handle 									{display:none;position:absolute;margin:0;width:10px;background:#fff;cursor:pointer;border:solid 2px #222;top:-2px;text-align:center}
.mejs-controls .mejs-time-rail .mejs-time-float 									{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #222;top:-26px;margin-left:-18px;text-align:center;color:#111}
.mejs-controls .mejs-time-rail .mejs-time-float-current 							{margin:2px;width:30px;display:block;text-align:center;left:0}
.mejs-controls .mejs-time-rail .mejs-time-float-corner 								{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent transparent;top:15px;left:13px}
.mejs-controls .mejs-fullscreen-button button 										{background-position:-32px 0}
.mejs-controls .mejs-unfullscreen button 											{background-position:-32px -16px}
.mejs-controls .mejs-volume-button 													{}
.mejs-controls .mejs-mute button 													{background-position:-16px -16px}
.mejs-controls .mejs-unmute button 													{background-position:-16px 0}
.mejs-controls .mejs-volume-button 													{position:relative}
.mejs-controls .mejs-volume-button .mejs-volume-slider 								{display:none;height:115px;width:25px;background:rgba(50, 50, 50, 0.7);top:-115px;left:0;z-index:1;position:absolute;margin:0}
.mejs-controls .mejs-volume-button:hover 											{}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total 			{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255, 255, 255, 0.5);margin:0}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current 		{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255, 255, 255, 0.9);margin:0}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle 			{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255, 255, 255, 0.9);cursor:N-resize;margin:0}
.mejs-controls div.mejs-horizontal-volume-slider 									{height:26px;width:60px;position:relative}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total 		{position:absolute;left:0;top:11px;width:50px;height:8px;font-size:1px;background:#222;background:rgba(50,50,50,0.8)}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current 		{position:absolute;left:0;top:11px;width:50px;height:8px;font-size:1px;background:#fff;background:rgba(255,255,255,0.8)}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle 		{display:none}
.mejs-controls .mejs-captions-button 												{position:relative}
.mejs-controls .mejs-captions-button button 										{background-position:-48px 0}
.mejs-controls .mejs-captions-button .mejs-captions-selector 						{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:rgba(50,50,50,0.7);border:solid 1px transparent;padding:10px;overflow:hidden}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul 					{display:block;list-style-type:none !important;overflow:hidden}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li 					{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input			{clear:both;float:left;margin:3px 3px 0 5px}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label 			{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica, arial;font-size:10px}
.mejs-controls .mejs-captions-button .mejs-captions-translations 					{font-size:10px;margin:0 0 5px 0}
.mejs-chapters 																		{position:absolute;top:0;left:0;-xborder-right:solid 1px #fff;width:10000px;z-index:1}
.mejs-chapters .mejs-chapter 														{position:absolute;float:left;background:#222;background:rgba(0, 0, 0, 0.7);overflow:hidden;border:0}
.mejs-chapters .mejs-chapter .mejs-chapter-block 									{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #222;border-bottom:solid 1px #222;cursor:pointer}
.mejs-chapters .mejs-chapter .mejs-chapter-block-last 								{border-right:none}
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover 								{background:#666;background:rgba(102,102,102, 0.7)}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title 							{font-size:12px;font-weight:bold;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px 0;line-height:12px}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan 						{font-size:12px;line-height:12px;margin:3px 0 4px 0;display:block;white-space:nowrap;text-overflow:ellipsis}
.mejs-captions-layer 																{position:absolute;bottom:0;left:0;text-align:center; line-height:22px;font-size:12px;color:#fff}
.mejs-captions-layer a 																{color:#fff;text-decoration:underline}
.mejs-captions-layer[lang=ar] 														{font-size:20px;font-weight:normal}
.mejs-captions-position 															{position:absolute;width:100%;bottom:15px;left:0}
.mejs-captions-position-hover 														{bottom:45px}
.mejs-captions-text 																{padding:3px 5px;background:rgba(20, 20, 20, 0.8)}
.mejs-clear 																		{clear:both}
.me-cannotplay {}
.me-cannotplay a 																	{color:#fff;font-weight:bold}
.me-cannotplay span 																{padding:15px;display:block}
.mejs-controls .mejs-loop-off button 												{background-position:-64px -16px}
.mejs-controls .mejs-loop-on button 												{background-position:-64px 0}
.mejs-controls .mejs-backlight-off button 											{background-position:-80px -16px}
.mejs-controls .mejs-backlight-on button 											{background-position:-80px 0}
.mejs-controls .mejs-picturecontrols-button 										{background-position:-96px 0}
.mejs-contextmenu 																	{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}
.mejs-contextmenu .mejs-contextmenu-separator 										{height:1px;font-size:0;margin:5px 6px;background:#222}
.mejs-contextmenu .mejs-contextmenu-item 											{font-family:Helvetica, Arial;font-size:12px;padding:4px 6px;cursor:pointer;color:#222}
.mejs-contextmenu .mejs-contextmenu-item:hover 										{background:#2C7C91;color:#fff}
.mejs-controls .mejs-sourcechooser-button 											{position:relative}
.mejs-controls .mejs-sourcechooser-button button 									{background-position:-128px 0}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector 				{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:rgba(50,50,50,0.7);border:solid 1px transparent;padding:10px;overflow:hidden}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul 			{display:block;list-style-type:none !important;overflow:hidden}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li 		{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input 	{clear:both;float:left;margin:3px 3px 0 5px}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label 	{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:helvetica, arial;font-size:10px}