@font-face {
    font-family: SpaceAge3;
    src: url(../font/SpaceAge3Regular.woff);
}
:root {
    --theme-color: #8A2BE2; /*rgb(138,43,226);*/
    --dark-color: #000;
    --primary-color: #666;
    --secondary-color: #F5F5F5;
    --font-color: #999;
    --bg-color: #171612;
    --bg-secondary-color: #303030;
    --border-color: #303030;
    --heading-color: #F5F5F5;
    --heading-bg-color: #000000;
    --white: #ffffff;
    --black: #000000;
}
[data-theme="light"] {
    --theme-color: #8A2BE2; /*rgb(138,43,226);*/
    --dark-color: #CCC;
    --primary-color: #ffffff;
    --secondary-color: #303030;
    --font-color: #333;
    --bg-color: #f7f7f7;
    --bg-secondary-color: #ffffff;
    --border-color: #F5F5F5;
    --heading-color: #303030;
    --heading-bg-color: #ff6600;
	#historybutton a{
    --white: #000000;
    --black: #ffffff;
	}
}

* {
    padding: 0;
    margin: 0;
    outline: 0;
	list-style-type:none;
}
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    width: 100%;
  height: 100vh;
  padding-top:30px;
    overflow: hidden;
    background: var(--theme-color);
    background: -moz-linear-gradient(-45deg, var(--theme-color) 0%, #4389a2 100%);
    background: -webkit-linear-gradient(-45deg, var(--theme-color) 0%, #4389a2 100%);
    background: linear-gradient(135deg, var(--theme-color) 0%, #4389a2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--theme-color)', endColorstr='#4389a2', GradientType=1);
    font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    /*background-color:var(--bg-secondary-color);*/
    font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

    /*
    background-image:url("/img/bg_0360.jpg");
    background-size: auto 100%;
    background-repeat:no-repeat;
    background-position:center top;
    */
  }
#branding {
	font-family:SpaceAge3, Arial, sans-serif;
	font-size:2.25em;
	top:5px;
	width:100%;
	position:absolute !important;
	text-align:center;
	z-index:9;
}
/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010-2012 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 4.3 (jPlayer 2.2.0)
 * Date: 19th November 2012
 */
.player {
clear:both;
margin:20px 0 0;
}
div.jp-audio {

	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */

	font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */

	font-family:Verdana, Arial, sans-serif;
	line-height:1.6;
	color: #666;
}
div.jp-audio {
	width:100%;
}

div.jp-interface {
	position: relative;
	width:100%;
}

div.jp-audio div.jp-type-single div.jp-interface {
	height:80px;
}

/* @group CONTROLS */

div.jp-interface ul.jp-controls {
	margin:0;
	padding: 0;
	overflow:hidden;
}

div.jp-audio ul.jp-controls {
	width:100%;
}

div.jp-interface ul.jp-controls li {
	/*display:inline;
	float: left;*/
}

div.jp-interface ul.jp-controls a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}

div.jp-interface ul.jp-volumes {
	margin:0;
	padding: 0;
	overflow:hidden;
}

div.jp-audio ul.jp-volumes {
	width:100%;
}

div.jp-interface ul.jp-volumes li {
	/*display:inline;
	float: left;*/
}

div.jp-interface ul.jp-volumes a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
/*div.jp-interface ul.jp-volumes {
clear:both;
display:block;
margin-top:300px;
width:100%;
z-index:9;
}
div.jp-interface ul.jp-volumes li {
display:inline-block;
}
div.jp-interface ul.jp-volumes a {
display:inline-block;
}*/
a.jp-play,
a.jp-pause {
	width:200px;
	height:200px;
	margin:auto;
}

a.jp-play {
	background: url("/img/controls/play_arrow_black_24dp.svg") no-repeat;
	background-size:cover;
	margin-bottom: 30px;
}
a.jp-play:hover {
	background: url("/img/controls/play_arrow_black_24dp.svg") no-repeat;
	background-size:cover;
}
a.jp-pause {
	background: url("/img/controls/pause_white_24dp.svg") no-repeat;
	background-size:cover;
	margin-bottom: 50px; /* compensate for no border shading */
	display: none;
}
a.jp-pause:hover {
	background: url("/img/controls/pause_white_24dp.svg") no-repeat;
	background-size:cover;
}

/* @end */

/* @group volume controls */
a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
	width:30px;
	height:30px;
	margin-top:12px;
}

div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
	left: 10px;
	display:inline-block;
	float: left;
}

div.jp-audio a.jp-volume-max {
	display:block;
	position: absolute;
	right: 10px;
}

a.jp-mute {
	background: url("/img/controls/volume_mute_white_24dp.svg") no-repeat;
	background-size:cover;
}
a.jp-mute:hover {
	background: url("/img/controls/volume_mute_white_24dp.svg") no-repeat;
	background-size:cover;
}
a.jp-unmute {
	background: url("/img/controls/volume_off_white_24dp.svg") no-repeat;
	background-size:cover;
	display: none;
}
a.jp-unmute:hover {
	background: url("/img/controls/volume_off_white_24dp.svg") no-repeat;
	background-size:cover;
}
a.jp-volume-max {
	background: url("/img/controls/volume_up_white_24dp.svg") no-repeat;
	background-size:cover;
}
a.jp-volume-max:hover {
	background: url("/img/controls/volume_up_white_24dp.svg") no-repeat;
	background-size:cover;
}

li.jp-volume-bar {
	position: relative;
	overflow:hidden;
	background:#fff;/*var(--secondary-color);*/
	width:93px;
	height:8px;
	cursor: pointer;
}
div.jp-audio li.jp-volume-bar {
}
.jp-volume-bar-value {
	/*background: url("/img/jplayer-controls.gif") 0 -152px repeat-x;*/
	background:var(--theme-color);
	width:0px;
   max-width: -webkit-calc(100% - 80px);
    max-width:    -moz-calc(100% - 80px);
    max-width:         calc(100% - 80px);
	height:8px;
	margin:-20px 0 0 35px;
}

/* @end */

/* @group current time and duration */

div.jp-audio div.jp-time-holder {
	position:relative;
	top:15px;
	margin:auto;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
	/*left:85px;*/
	width: 100px;
}

div.jp-current-time {
	width: 100%;
	font-size:1.64em;
}
div.jp-current-time {
	float: left;
	display:inline;
}

/* @end */


div.jp-jplayer audio,
div.jp-jplayer {
	width:0px;
	height:0px;
}

div.jp-jplayer {
	background-color: #000000;
}


/* @group NO SOLUTION error feedback */

.jp-no-solution {
	padding:5px;
	font-size:.8em;
	background-color:#eee;
	border:2px solid #009be3;
	color:#000;
	display:none;
}

.jp-no-solution a {
	color:#000;
}

.jp-no-solution span {
	font-size:1em;
	display:block;
	text-align:center;
	font-weight:bold;
}

/* @end */

  /* Playing Animation */
  .anim {
    position: absolute;
    right: 5%;
    top: 50%;
    margin: -20px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: none;
  }
  .anim > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-animation: wavy 1s ease infinite forwards;
    animation: wavy 1s ease infinite forwards;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  }
  .anim .rect2 {
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
  }
  .anim .rect3 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }
  .anim .rect4 {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
  }
  .anim .rect5 {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
  }
  @-webkit-keyframes wavy {
    0% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
    50% {
      -webkit-transform: scaleY(0.6);
      transform: scaleY(0.6);
    }
    100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }
  @keyframes wavy {
    0% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
    50% {
      -webkit-transform: scaleY(0.6);
      transform: scaleY(0.6);
    }
    100% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }