@font-face {
	font-family: "CircleRegular";
	src: url("fonts/Circe-Regular.eot");
	src: url("fonts/Circe-Regular.eot?#iefix") format("embedded-opentype"),
	url("fonts/Circe-Regular.ttf") format("truetype");
}

.fancybox-iframe {
    max-height: calc( 100vh - 300px ) !important;
}

body {
  /*background-color: #333;*/
  /*background-image: url('../../xt/img/main-bg.jpg');*/
  background-color: #000;
  background-image: url('../../xt/img/neuroix-background-2.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  text-align:center;
  margin: 0px;
  padding: 0px;
}

.sandwich-home-icon a, .sandwich-home-icon a:visited, .sandwich-home-icon a:hover {
    font-size:40px;
    color: #9ce7f7;
    margin-right:15px;
}

.sandwich-home-icon a:hover { opacity:.7; }



.div-waveform-legend { padding:10px 0px; margin-bottom:30px; color:#ccc; font-family: 'Noto Sans HK', sans-serif; font-size:10px; }
.div-waveform-legend .legend-item { display:inline-block; width:100px; text-align:center; opacity:.5; }
.div-waveform-legend-alpha { color:lime;}
.div-waveform-legend-beta { color:#c200ff;}
.div-waveform-legend-theta1 { color:red;}
.div-waveform-legend-theta2 { color:blue;}
.div-waveform-legend-delta { color:fff;}

#analyzer {
	position:absolute;
	top:270px;
	width:100%;
}

.oscilloscope_l_container {
	display:table-cell;
	background-color:transparent; width: 50%; text-align:right
}

.oscilloscope_r_container {
	//margin-left:10px;
	display:table-cell;
	background-color:transparent; width: 50%; text-align:left
}


#oscilloscope_l {
	background-color:transparent;
	margin-right:215px;
	width: calc( 100% - 215px );
	height:400px;
	-webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

#oscilloscope_r {
	background-color:transparent;
	margin-left:216px;
	width: calc( 100% - 216px );
	height:400px;
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

p { color: #aaa; font-family: Arial; }
p.logo { text-align:left; margin: 0px; }

.content { background-color:transparent; }

.svg-map {
  /*left:300px;*/
  display:inline-block;
  /* background-image: url('../../xt/img/map-w.png'); */
  background-image: url('../../xt/img/brain-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index:999;
  /*   padding: 5%; */
}

.svg-canvas {
  /*left:-298px;*/
  display:block;
  /*background-image: url('../../xt/img/brain-map-trans.png');*/
  background-image: url('../../xt/img/map.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /*width:594px;
  height:688px;*/
  z-index:1;
  /*   padding: 5%; */
}

svg#polygons {
  position:relative;
  background-color: transparent;
  display: block;
  margin: auto;
  /* height: calc( 100vh - 81px ); */
  width: 100%;
  height: 100%;
}

svg#polygons path {
  stroke: white;
  stroke-width: 0px;
  stroke-opacity:0.5;
  fill-opacity:1;
}

path.polypath { fill-opacity:0.5; }

path.polyset-top1  { fill: #ff00ff; }
path.polyset-top2  { fill: #c900ff; }
path.polyset-top3  { fill: #9028dc; }
path.polyset-top4  { fill: #5a50c2; }
path.polyset-top1  { fill: #ff00ff; }
path.polyset-top2  { fill: #c900ff; }
path.polyset-top3  { fill: #9028dc; }
path.polyset-top4  { fill: #5a50c2; }
path.polyset-top5  { fill: #5e61b2; }
path.polyset-top5a { fill: #3f7e7d; }
path.polyset-top5b { fill: #4b717b; }
path.polyset-top6  { fill: #46ac42; }
path.polyset-top6a { fill: #24ab56; }
path.polyset-top7  { fill: #74861f; }
path.polyset-top7a { fill: #7e9524; }
path.polyset-top7b { fill: #7bb422; }
path.polyset-top7c { fill: #b69a2b; }
path.polyset-top7d { fill: #f1762c; }

.div-container {display:block; width:100%; min-height: calc( 100vh - 688px - 45px - 40px ); background-color:transparent;}

#waveform { }

#complex-space { }

.x.axis text,  .y.axis text { fill: #777; display:none; }

.y.axis .tick line, .x.axis .tick line { stroke-dasharray: 1,2; stroke: #555; }

.div-waveform-bg {
    background: url(../../xt/img/player.png) 20px top no-repeat;
    background-size: 0px 100%;
}

.div-container-scenatio #waveform {
    background: url(../img/player_edge.png) no-repeat;
    background-position: 20px 19px;
}

.div-container-scenatio #waveform, .div-waveform-legend {
    background-color: rgba(0,0,0,.5);
}

.div-container-time {
    display:none;
    position:absolute;
    top:60px;
    left:22px;
    color:#aaa;
    font-size:15px;
    font-family: 'Noto Sans HK', sans-serif;
    z-index:999;
    opacity:.5;
}

.header { display: table; width:100%;  }
.header-row { display: table-row; }
.header-cell { display: table-cell; width:50%; vertical-align:middle;}
.header-align-right { text-align:right; }
.header-sandw { display: inline-block; }
.header-sandw IMG { position: relative;  border: none; z-index:999; cursor:pointer; }


/* panel layout mechanics */
.clicker-sandw { position:relative;  z-index:1002; }
#clicker, #player { display:none; }

.panel-top-margin {
  margin-top:70px;
}

.emo_link:hover .panel-links-icon { opacity: 1; }

.panel-links-icon {
  width:33px;
  display:inline-block;
  font-size:17pt;
  padding-left:3px !important;
  opacity:.6;
}

.panel-links {
  text-align: center !important;
  margin-bottom: 12px;
  width: auto;
  padding-left: 0px !important;
}

.panel-links > A {
  color: #eee !important;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12pt;
  text-decoration: none;
}

.panel-links-index {
  display: inline-block;
  margin-bottom: 12px;
  width: auto;
  padding-left: 0px !important;
}

.panel-links-index > A {
  color: #eee !important;
  font-family: 'Noto Sans HK', sans-serif;
  font-size: 12pt;
  text-decoration: none;
}

.panel-wrap {
  position: fixed;
  top: 0px;
  bottom: 0;
  right: 0;
  width: 300px;
  height:100hv;
  transform: translateX(100%);
  transition: .3s ease-out;
  z-index:1001;
}
.panel {
  text-align:center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #eee;
  overflow: auto;
  padding: 1em;
  z-index:1001;
}

#clicker:checked ~ .panel-wrap {
  transform: translateX(0%);
}


/* .player-loader { display:inline-block; margin: 100px 0px; background: url(../img/loading_.gif) no-repeat; background-size: cover; width:100px; height:100px; opacity:0.5; } */

.player-loader { display:inline-block; margin: 100px 0px; background: url(../img/player_icon.png) no-repeat; background-size: cover; width:100px; height:100px; opacity:0.1; }
.player-icon { display:none; margin: 100px 0px; background: url(../img/player_icon.png) no-repeat; background-size: cover; width:100px; height:100px; opacity:0.5; cursor:pointer; }

.player-icon:hover { opacity:0.8; }

#player:checked ~ .player-label > .player-icon {
    background-image: url(../../xt/img/player_icon_sh.png);
    opacity:1;
}

.panel-settings > DIV { padding-left:40px; text-align:left; }

.panel-settings .container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Noto Sans HK', sans-serif;
  font-size:12pt;
}

.panel-settings .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.panel-settings .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border:3px solid rgba(255,255,255,0.5);
}

.panel-settings .container:hover input ~ .checkmark {
  border:3px solid rgba(255,255,255,0.9);
}

.panel-settings .container input:checked ~ .checkmark {
  border:3px solid rgba(255,255,255,1);
  background-color: #2196F3;
}

.panel-settings .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.panel-settings .container input:checked ~ .checkmark:after {
  display: block;
}

.panel-settings .container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hidden-element { visibility: hidden; }
.visible-element { visibility: visible; }

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(../../xt/img/stars.png) repeat top center !important;
  z-index:0;
}

.twinkling{
  background:transparent url(../../xt/img/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

@-webkit-keyframes MOVE-BG {
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(46px);
	}
}

@keyframes MOVE-BG {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(46px);
	}
}


.loading {
	font-family: 'Noto Sans HK', sans-serif;
	font-size:10px;
	height: auto;
    text-align: center;
    color: #888;
    position: relative;
    overflow: hidden;
	padding: 0rem;
	margin: 0%;
	font-style: normal;
}

.bg{
    position: absolute;
    left: -46px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;

  background: -webkit-repeating-linear-gradient(
    145deg,
    #010f61 1px,
    #232f78 2px,
    #232f78 11px,
    #010f61 12px,
    #010f61 20px
  );
  background: repeating-linear-gradient(
    -55deg,
    #010f61 1px,
    #232f78 2px,
    #232f78 11px,
    #010f61 12px,
    #010f61 20px
	);

  -webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: .6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

  animation-name: MOVE-BG;
	animation-duration: .6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.emuse_filelist {
  display:table;
  margin: 30px 0px;
  width: 100%;
}

.emuse_file {
  display: table-row;
  width: auto;
}

.emuse_fname, .emuse_fplot {
  display: table-cell;
  padding: 10px 20px;
  color: #eee;
  border-bottom: 2px solid rgba(0,0,0,.5);
}

.emuse_bg_1 { background-color: rgba(255,255,255,.1); }
.emuse_bg_2 { background-color: rgba(255,255,255,.15); }

.emuse_bg_1:hover, .emuse_bg_2:hover { background-color: rgba(255,255,255,.15); }

.emuse_fname {
  width: 70%;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}
.emuse_fplot { width: 30%; text-align: right; padding-right: 33px !important; }
.emuse_fnum, .emuse_fdate { color:#555;  font-weight: normal; }
.emuse_fnum { display:inline-block; width:30px; }
.emuse-logo {
  font-family: CircleRegular, sans-serif;
  height:40px;
  padding:20px;
  margin:0px;
  font-size: 34pt;
  text-align: left;
  line-height: 40px;
  background: linear-gradient(45deg, #8b4dc9 33%, #9ce7f7 66%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9ce7f7;
  display: table;
}

.emuse_fplot > A, .emuse_fplot > A:visited {
  color:#eee;
  text-decoration: none;
}

.emuse_fplot > A:hover {
  color:#9ce7f7;
}

@media( min-width:240px ) {
	.header-sandw { padding-right:5px; }
	#analyzer { display:none; }
	p.logo { padding:5px; }
	p.logo IMG { width:90px; }
	.svg-canvas { width:220px; height:255px; }
	.panel { background-color: rgba(70,70,70,0.95); }
	.div-container-scenatio { overflow-x:auto; }
}

@media( min-width:320px ) {
	.svg-canvas { width:300px; height:347px; }
}

@media( min-width:360px ) {
	p.logo IMG { width:100px; }
	.svg-canvas { width:340px; height:394px; }
}

@media( min-width:375px ) {
	.svg-canvas { width:355px; height:411px; }
}

@media( min-width:412px ) {
	p.logo IMG { width:120px; }
	.svg-canvas { width:392px; height:454px; }
}

@media( min-width:480px ) {
	.svg-canvas { width:460px; height:533px; }
}

@media( min-width:576px ) {
	p.logo IMG { width:140px; }
	.svg-canvas { width:556px; height:644px; }
}

@media( min-width:594px ) {
	.svg-canvas { width:574px; height:665px; }
}

@media( min-width:614px ) {
	.svg-canvas { width:594px; height:688px; }
}

@media( min-width:768px ) {
	.header-sandw { padding-right:20px; }
	p.logo { padding:20px; }
	p.logo IMG { width:auto; }
	#analyzer { display:table; }
	.panel { background-color: rgba(1,1,59,0.8); }
}

@media( min-width:992px ) { }

@media( min-width:1920px ) { .div-container-scenatio { overflow-x:hidden; } }

@media( min-width:120px ) { }