* {
  margin: 0px;
  padding: 0px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}
:root {
  --backgroundColor: #f4f4f4;
  --textColor: white;
  --headerBackground: #efefef;
  --sectionBackground: #f4f4f4;
  --axisLineColor: #c8c8c8;
  --axisZeroColor: #646464;
  --axisTextColor: #646464;
}
@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: #1b1b1b;
    --textColo: #ddd;
    --headerBackground: #222222;
    --sectionBackground: #222222;
    --axisLineBackground: #444444;
    --axisLineColor: #444444;
    --axisZeroColor: #555555;
    --axisTextColor: #777777;
  }
}
html {
  width: 100%;
  font-family: HelveticaNeue-Light, Helvetica, sans-serif;
  /*background: (@toColor / 2 + @fromColor / 2) url("/images/noise.png");
  background: url("/images/noise.png"), -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 750, color-stop(0%, @fromColor), color-stop(100%, @toColor));
  background: url("/images/noise.png"), -webkit-radial-gradient(top center, @fromColor, @toColor 1250px);
  background: url("/images/noise.png"), -moz-radial-gradient(top center, @fromColor, @toColor 1250px);
  background: url("/images/noise.png"), -o-radial-gradient(top center, @fromColor, @toColor 1250px);
  
  background: url("/images/noise.png"), -ms-radial-gradient(top center, @fromColor, @toColor 1250px);
  background: url("/images/noise.png"), radial-gradient(top center, @fromColor, @toColor 1250px);
  */
  font-size: 10px;
  background-size: 125px 125px, auto;
  min-height: 100%;
  background: var(--backgroundColor);
  color: #777777;
}
body {
  font-weight: 100;
  font-size: 15px;
  font-size: 1.4rem;
}
header {
  background: rgba(0, 0, 0, 0.1);
  background: var(--headerBackground);
  padding-top: 150px;
}
header nav {
  font-size: 1.2rem;
  display: block;
  padding: 10px;
  text-align: center;
  margin-bottom: 30px;
}
header nav a {
  display: inline-block;
}
header nav a + a:before {
  content: '| ';
  color: #808080;
}
a {
  color: #64b4ff;
}
.Calendar {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.Calendar .Search {
  background: white;
  width: 20%;
  float: left;
  min-height: 200px;
  padding: 0px 20px 0px 0px;
  border-radius: 2px;
}
.Calendar .Search input {
  padding: 7px;
  width: 100%;
}
.Calendar .Search form button {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  padding: 7px;
  border-color: #0093fd;
  background: #64beff;
  float: right;
}
.Calendar .Search button:focus,
.Calendar .Search input:focus {
  outline: none;
  border-color: #64beff;
}
.Calendar .Search table {
  width: 100%;
}
.Calendar .Search table td {
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 5px 0px;
}
.Calendar .Search table button {
  border: 0px;
  background: none;
  width: 17px;
  height: 17px;
  padding: 0px;
  line-height: 11px;
  text-align: center;
  font-size: 1.3em;
}
.Calendar .Search table button:hover {
  color: #64beff;
}
.Calendar > table {
  border-collapse: separate;
  width: 80%;
}
.Calendar > table th {
  font-weight: 500;
  text-align: center;
}
.Calendar > table th,
.Calendar > table td {
  padding: 5px 0px;
  vertical-align: top;
  width: 14.285%;
}
.Calendar > table tbody > tr {
  height: 100px;
}
.Calendar > table td {
  background: rgba(0, 0, 0, 0.03);
}
.Calendar > table td:first-child,
.Calendar > table td:last-child {
  background: rgba(200, 0, 0, 0.03);
}
.Calendar > table h2 {
  font-size: 1em;
  font-weight: 500;
  padding: 0px 5px;
  text-align: right;
}
.Calendar > table h3 {
  font-size: 0.9em;
  font-weight: 100;
}
.Calendar > table span {
  font-size: 0.8em;
}
.Calendar > table ul {
  width: 100%;
  min-height: 62px;
}
.Calendar > table li {
  width: 100%;
  display: inline-block;
  min-height: 50px;
  vertical-align: top;
  padding: 5px 0px;
}
.Calendar > table li:nth-child(2n+1) {
  background: rgba(0, 0, 0, 0.01);
}
.Calendar > table img[src] {
  width: 52px;
  height: 52px;
  float: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0px 5px;
}
.Calendar > table .Today {
  background: rgba(200, 200, 0, 0.03);
}
address {
  font-size: 0.8em;
  text-align: right;
  font-style: italic;
}
address a {
  color: #646464;
}
a {
  text-decoration: none;
}
.note {
  box-shadow: 0px 1px 5px rgba(50, 50, 100, 0.2);
  background: #ffffff;
  width: 40em;
  max-width: 100%;
  margin: 0em auto 0em;
  padding: 1.5em;
  color: #282828;
}
.note h2,
.note h3 {
  line-height: 1em;
  font-weight: 100;
  font-size: 1.5rem;
  /*color:rgb(215,235,255);*/
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  border-bottom: 0px solid #dcdcdc;
  margin-bottom: 0.25em;
}
.note h3 {
  font-size: 1.2em;
}
.note p {
  text-align: justify;
}
.note p ~ p {
  text-indent: 1.5em;
}
.Chart {
  width: 100%;
  max-width: 800px;
  /*background: rgb(245,245,245);*/
}
.Chart canvas {
  width: 100%;
  height: 20rem;
}
.Chart dl {
  display: flex;
  width: 100%;
}
.Chart dl dt,
.Chart dl dd {
  flex: 1 1 auto;
}
.Chart dl dt {
  font-size: 1.1rem;
  line-height: 1.8rem;
  color: #737373;
  text-align: right;
  padding-right: 5px;
}
.Chart dl dt span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 5px;
}
#ParticleChart {
  max-width: 100%;
}
svg {
  width: 100%;
  height: 250px;
}
g.Scaled * {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-width: 2;
}
g.Scaled rect {
  stroke: black;
}
g.Scaled:hover polyline:not(:hover) {
  filter: url(#no-hover);
}
g.Scaled:hover polyline:hover {
  position: absolute;
  z-index: 1000;
}
g.Scaled polyline {
  stroke-linejoin: round;
  cursor: pointer;
}
text {
  fill: black;
  fill: #777777;
  stroke: none;
  font-size: 10px;
  cursor: default;
}
.Axis line {
  stroke: var(--axisLineColor);
  stroke-width: 0.5;
}
.Axis line.Zero {
  stroke: var(--axisZeroColor);
}
.Axis text {
  fill: var(--axisTextColor);
}
.CanvasChart .Colors li {
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
}
.CanvasChart .Colors li em:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 5px;
  display: inline-block;
}
.CanvasChart .Colors .C1 {
  stroke: #8000ff;
}
.CanvasChart .Colors .C1 em:before {
  background: #8000ff;
}
.CanvasChart .Colors .C2 {
  stroke: #0080ff;
}
.CanvasChart .Colors .C2 em:before {
  background: #0080ff;
}
.CanvasChart .Colors .C3 {
  stroke: #ff0080;
}
.CanvasChart .Colors .C3 em:before {
  background: #ff0080;
}
.CanvasChart .Colors .C4 {
  stroke: #00ff80;
}
.CanvasChart .Colors .C4 em:before {
  background: #00ff80;
}
.CanvasChart .Colors .C5 {
  stroke: #80ff00;
}
.CanvasChart .Colors .C5 em:before {
  background: #80ff00;
}
.CanvasChart .Colors .C6 {
  stroke: #ff8000;
}
.CanvasChart .Colors .C6 em:before {
  background: #ff8000;
}
.CanvasChart .Colors .C7 {
  stroke: #cc66ff;
}
.CanvasChart .Colors .C7 em:before {
  background: #cc66ff;
}
.CanvasChart .Colors .C8 {
  stroke: #66ccff;
}
.CanvasChart .Colors .C8 em:before {
  background: #66ccff;
}
.CanvasChart .Colors .C9 {
  stroke: #66ffcc;
}
.CanvasChart .Colors .C9 em:before {
  background: #66ffcc;
}
.CanvasChart .Colors .C10 {
  stroke: #ccff66;
}
.CanvasChart .Colors .C10 em:before {
  background: #ccff66;
}
.CanvasChart .Colors .C11 {
  stroke: #ffcc66;
}
.CanvasChart .Colors .C11 em:before {
  background: #ffcc66;
}
.CanvasChart .Colors .C12 {
  stroke: #ff66cc;
}
.CanvasChart .Colors .C12 em:before {
  background: #ff66cc;
}
body {
  text-align: center;
}
body * {
  text-align: left;
}
.DashBoard {
  display: block;
  width: 900px;
  max-width: 100%;
  margin-top: 0px;
  /*section {
		margin:0px;
		vertical-align: top;
		padding:20px;
		text-align: left;
		display: inline-block;
		color:rgb(100,100,100);
		border:1px solid rgb(240,240,240); // lightgray;
		border-left: 0px;
		border-top:0px;		
		width:300px;
		em:nth-child(3n) {
			border-right-width: 0px;
		}
		&:nth-last-child(1),
		&:nth-child(3n+2):nth-last-child(2),
		&:nth-child(3n+1):nth-last-child(2),
		&:nth-child(3n+1):nth-last-child(3) {
			border-bottom-width: 0px;
		}
		
		
		&:nth-child(2n) ul {
			//background:rgba(205,205,255,0.1);
		}
		ul {
			height:150px;
			overflow:auto;
			-webkit-overflow-scrolling: touch;
			//background:rgba(255,255,255,0.5);
			margin:0px 0px;
			border-radius: 2px;
			//box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		}
		li {
			padding:3px 0px;
			* {
				padding: 0px 5px;
			}

			img {
				padding:0px;
				max-width: 100%;
			}
			span {
				display: block;
				width: 100%;
			}
		}
		li:nth-child(2n+1) {
			//background: rgba(0,0,0,0.03);
		}
		
		
		h2 {
			font-weight: 100;
			font-size: 2.1rem;
			padding:2px 0px;
		}
		
		a.Edit {
			float:right;
			display: none;
		}
		&:hover a.Edit {
			display: block;
		}
		
		
	}*/
}
.DashBoard dl {
  width: 100%;
}
.DashBoard dt {
  font-size: 1.1rem;
  line-height: 1.8rem;
  color: #737373;
  text-align: right;
  margin-top: 12px;
  padding-right: 5px;
  width: 50%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -2px;
}
.DashBoard dd {
  margin-top: 10px;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.8rem;
  clear: right;
  white-space: pre-line;
}
.DashBoard dd span {
  display: block;
}
body > section,
main > div > section {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  width: 600px;
  padding: 0px;
  background: var(--sectionBackground);
}
body > section input,
main > div > section input,
body > section textarea,
main > div > section textarea,
body > section button,
main > div > section button {
  border: 1px solid #f0f0f0;
}
.Editor {
  padding: 10px;
}
.Editor label {
  float: left;
  padding: 5px 0px;
  display: block;
  width: 100%;
  line-height: 25px;
}
.Editor label input,
.Editor label textarea {
  float: right;
  width: 80%;
  padding: 5px;
  outline: none;
}
.Editor label textarea {
  height: 50px;
}
.Editor button {
  padding: 5px;
  background: white;
}
.Editor .Preview {
  overflow: auto;
  white-space: pre;
  width: 100%;
  display: block;
  height: 300px;
  max-height: 400px;
  border: 1px solid #f0f0f0;
  padding: 5px;
}
.Editor .Preview code {
  display: block;
}
.Editor h3 {
  font-family: HelveticaNeue-Light, Helvetica, Arial;
  font-weight: 100;
  padding: 10px 0px 5px;
}
.iTunes {
  margin: auto;
}
.iTunes table {
  border-collapse: collapse;
}
.iTunes form {
  padding: 5px;
  padding-bottom: 5px;
}
.iTunes input {
  border: 1px solid #f0f0f0;
  padding: 3px 5px;
  width: 30%;
  border-radius: 0px;
}
.iTunes input:focus,
.iTunes input:focus ~ button,
.iTunes select:focus ~ button,
.iTunes button:focus {
  outline: none;
  border-color: #cde1fa;
}
.iTunes input:focus ~ button,
.iTunes select:focus ~ button,
.iTunes button:focus {
  background: #cde1fa;
}
.iTunes select {
  -webkit-appearance: none;
  padding: 3px 5px;
  border-radius: 0px;
  border: 1px solid #f0f0f0;
  outline: none;
}
.iTunes select:focus {
  border-color: #cde1fa;
}
.iTunes button {
  width: auto;
  text-align: center;
  border: 1px solid #f0f0f0;
  border-left-width: 0px;
  padding: 3px 5px;
  background: #f0f0f0;
  outline: none;
}
.iTunes button:active {
  background: #9fc5f5;
  outline: none;
}
.iTunes tbody > tr:nth-child(2n) {
  background: rgba(0, 0, 0, 0.02);
}
.iTunes td {
  padding: 5px 10px;
}
.iTunes td img {
  width: 100px;
}
.Loading #ItemEditor {
  display: none;
}
@media only screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}
@media only screen and (max-width: 480px) {
  header nav {
    margin-bottom: 10px;
  }
  .Calendar {
    width: 100%;
  }
  .Calendar th {
    display: none;
  }
  .Calendar td {
    border-top: 1px dotted rgba(0, 0, 0, 0.2);
    display: block;
    width: 100%;
  }
  .Calendar td img[src] {
    width: 52px;
    height: 52px;
  }
  .DashBoard dl {
    padding: 0px 10px 10px;
  }
  .DashBoard dt {
    width: 80px;
    text-align: left;
  }
}
[v-cloak] {
  display: none;
}
@media only screen and (max-width: 1024px) {
  header {
    padding-top: 10px;
  }
  .Calendar img[src] {
    width: 27px;
    height: 27px;
    margin: 0px 3px;
    border: 0px;
  }
}