html, body{
    		height: 100%;
    	}
		body{
			font-size: 13px;
			font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
			font-family: "DIN";
			font-family: "din-condensed", DINCondensed-Bold, sans-serif;
			margin: 0px;
			color: #494b4c;
		}
		body.fpopen:after{
			display: block;
			content:" ";
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: red;
			z-index: 5;
			display: none;
		}

		a:link{
			outline: none;
			color: gray;
		}
		a:hover{
			color: blue;
		}
		a:visited{
			color: gray;
		}
		a:active{
			color: gray;
		}
		a img{
			border: 0px;
		}
		tr td{
			
		}
		.flatpickr-calendar.static{
			transition: none;
		}
		.flatpickr-calendar,
		.flatpickr-calendar.static,
		.flatpickr-calendar.animate.open,
		.flatpickr-calendar.static.open{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
		}
		.flatpickr-calendar.static.open:after,
		.flatpickr-calendar.static.open:before{
			position: fixed;
			border:none;
			left: 0;
			top:0;
			right: 0;
			bottom:0;
			display: none;
			
		}
		.date-bar{
			position: fixed;
			top: 50%;
			background: #ededed;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 40px;
			font-size: 2em;
			z-index: 27;
			font-size: 30px;
		}
		.flatpickr-wrapper{
			display: block
		}
		.date-bar input{
			background: transparent;
			font-family: "din-condensed", DINCondensed-Bold, sans-serif;
			border:none;
			-webkit-appearance: none;
			height: 40px;
			line-height: 40px;
			font-size: 30px;
			display: inline-block;
			text-align: center;
			width: 100%;
			text-transform: uppercase;
			color: #494b4c;
		}
		body.fpopen .date-bar input{
			display: none;	
		}
		.date{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
		}
		.ds-jump{
			position: fixed;
			bottom: -55px;
			width: 100%;
			height: 100px;
			background: #e9e9e9;
			z-index: 28;
			transition: all .5s;
			cursor: pointer;
			padding-top: 10px;
			z-index: 18;
			font-size: 1.7em;
		}
		.ds-jump.show-jump,
		.ds-jump.show-jump-right{
			bottom: 0;
		}
		.ds-jump.show-jump-right{
			text-align: right;
		}
		.ds-jump span:last-child{
			display: none;
		}
		.ds-jump.show-jump-right span:first-child{
			display: none;
		}
		.ds-jump.show-jump-right span:last-child{
			display: inline;
		}
		.date-strip{
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			z-index: 20;
		}
		.ds-inner{
			white-space: nowrap;
			position: relative;
			transition: left .5s;
		}
		.ds-inner>div{
			width: 20%;
			box-sizing: border-box;
			border: 1px solid #fff;
			border-width: 0 1px;
			background: #5c5d5e;
			display: inline-block;
			height: 50px;
			height: auto;
			padding: 5px 0;
			text-align: center;
			color: #fff;
			text-transform: uppercase;
			font-size: 1.4em;
			transition: all .5s;
			cursor: pointer;
			position: relative;
			transform-origin: bottom center;
		}
		.ds-inner div.today:after{
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background: #b40000;
			content: " ";
		}
		.ds-inner>div.active{
			background:#494b4c;
			transform: scale(1.2);
			z-index: 1;
		}
		
		#settingsModal{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 30;
		}
		
		@media only print {
			#outer{

			}
		}
		
		@media screen, print{
			#outer{
				width: 800px;
				height: 1025px;
				margin: 0 auto;
				position: relative;
				margin-bottom: 50px;
			}
			table{
				width: 100%;
				height: 100%;
				
			}
			thead tr{
				height: 55px;
			}
			tbody{
	
			}
			thead tr{
				background: #7d7e82;
				color: #fff;
				text-transform: uppercase;
				vertical-align: bottom;
			}
			thead tr td{
				font-size: 12px;
				font-family: "DIN";
				font-family: "din-condensed";
				font-weight: 600;
				padding: 4px;
				border: 1px solid #fff;
			}
			tbody tr{
				background: #e6e6e6;
				
			}
			tbody tr td{
				width: 12%;
				padding: 4px;
				font-size: 12px;
				font-family: "DIN";
				font-family: "din-condensed";
				vertical-align: top;
				box-sizing: border-box;
				position: relative;
				font-weight: 200;
				border: 1px solid #fff;
			}
			
			tbody tr td:first-child,
			.race{
				font-size: 30px;
				vertical-align: top;
				font-family: "DIN";
				font-family: "din-condensed";
				font-weight: 600;
				line-height: .85em;
			}
			tbody tr td:first-child .week{
				font-weight: 600;
				font-size: 10px;
				white-space: nowrap;
			    line-height: 0.2em;
			    padding-top: 8px;
			}
			tbody tr td:first-child,
			tbody tr td:last-child{
				width: 8%;
			}
			tbody tr td:nth-child(4){
				padding-right: 20px;
			}
			tr:nth-child(even){
				background: #d6d7d9;
			}
			td.speed{
				background-color: #a3a4a8;
				color: #fff;
			}
			td.strength{
				background-color: #909195;
				color: #fff;
			}
			td.tempo{
				background-color: #6a6b6f;
				color: #fff;
			}

			.bracket{
				position: absolute;
				border: 1px solid #000;
				border-width: 1px 0 1px 1px;
				width: 3px;
				z-index: 2;
			}
			
			.label{
				position: absolute;
				top: 50%;
				left: 0%;
				font-size: .6em;
				padding: 0 5px;
				text-transform: uppercase;
				transform: translate(-53%, -50%) rotate(270deg);
			}
			.spd-bracket{
			    right: 80.1%;;
			    top: 11.3%;
			    bottom: 42.75%;
			}
			
			.beg .spd-bracket{
				top: 32.0%;	
			}
			.spd-bracket .label{
				background: #d6d7d9;
			}
			.str-bracket{
			    right: 80.1%;;
			    top: 58.1%;
			    bottom: 5.8%;
			}
			.str-bracket .label{
				background: #d6d7d9;
			}
			.temp-bracket{
			    right: 56.1%;
			    top: 16.4%;
			    bottom: 5.8%;
			}
			.beg .temp-bracket{
				top: 32.0%;	
			}
			.temp-bracket .label{
				background: #d6d7d9;
			}
			.mileage-border {
				position: absolute;
				right: 7.99%;
				bottom: .2%;
				top: 5.8%;
				border-left: 2px solid #494b4c;
				z-index: 2;
			}
			.check2{
				position: absolute;
				left: 3px;
				bottom: 3px;
				width: 10px;
				height: 10px;
				border:1px solid gray;
				border-radius: 100%;
				background: #fff;
				
			}
			.check{
				position: absolute;
				left: 1px;
				bottom:1px;
				width: 0;
				height: 0;
				border-bottom: 10px solid #fff;
				border-right: 10px solid transparent;
			}
			#header{
				font-weight: 600;
				text-align: center;
				height: 25px;
				width: 800px;
				margin: 0 auto;
				line-height: 25px;
				text-transform: uppercase;
			}
			
			.plan-selector{
				background: #fff;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				text-align: center;
				font-size: 30px;
				font-size: 5em;
				text-transform: uppercase;
			}
			div.ps-top{
				height: 50%;
				background: #494b4c;
				display: block;
				color: #fff;
				position: relative;
				cursor: pointer;
			}
			div.ps-bottom{
				height: 50%;
				background: #fff;
				display: block;
				position: absolute;
				top:50%;
				width: 100%;
				cursor: pointer;
			}
			.ps-copy{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
			}
			
			.day-modal{
				position: fixed;
				background: #fff;
				position: fixed;
				top: 33px;
				left: 0;
				right:0;
				bottom: 0;
				
				z-index: 10;
				text-align: left;
				font-size: 30px;
				font-size: 5em;
				text-transform: uppercase;
				overflow: scroll;
				-webkit-overflow-scrolling: touch;				
				padding-bottom: 120px;

			}
			.dm-next,
			.dm-prev{
				position: absolute;
				background: red;
				width: 25%;
				height: 100%;
				top: 0;
				z-index: 1;
				opacity: 0;
			}
			.dm-next{
				right: 0;
			}
			.dm-top{
				min-height: 127px;
				background: #494b4c;
				display: block;
				color: #fff;
				position: relative;
				font-family: 'EB Garamond', serif;
				text-transform: none;
				text-align: left;
				font-size: .7em;
			}
			
			a:link.dm-top,
			a:visited.dm-top,
			a:active.dm-top,
			a:hover.dm-top{
				color: #fff;
			}
			a:link.dm-date,
			a:visited.dm-date,
			a:active.dm-date,
			a:hover.dm-date{
				color: #494b4c;
			}
			.dm-date{
				position: absolute;
				bottom: 0;
				box-sizing: border-box;
				width: 100%;
			}
			.dm-date,
			.dm-desc{
				padding: 15px;
			}
			.dm-close{
				position: absolute;
				top: 0;
				right: 0;
				background: gray;
				width: 30px;
				height: 30px;
			}
			.dm-week-distance{
				font-style: italic;
				font-size: .7em;
			}
			.dm-distance{
				font-size: 1em;
				font-family: 'EB Garamond', serif;
				text-transform: none;
				line-height: .95em;
			}
			.dm-distance.speed{
				font-size: 1em;
			}
			.dm-plan-type{
				font-size: 2em;
				height: 1em;
			}
		}
		@media only print{
			.day-modal,
			.date-strip,
			.ds-jump{
				display: none;
			}
			#header img{
				display: none;
			}
		}
		@media only screen and (min-width : 801px) {
			.day-modal,
			.date-strip,
			.ds-jump{
				display: none;
			}
			#header img{
				height: .8em;
				margin-left: 3px;
				cursor: pointer;
				display: inline-block;
			}
			#header img.light{
				display: none;
			}
		}
		@media only screen and (max-width : 800px) {
			#outer{
				display: none;
			}
			#header{
				color: #fff;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				font-size: 1.8em;
				padding: 5px 0;
				background: rgba(255,255,255,.1);
				background: #5c5d5e;
				z-index: 25;
				line-height: 1.3em;
			}
			
			#header img{
				height: .7em;
				margin-left: 3px;
				cursor: pointer;
				display: inline-block;
			}
			#header img.dark{
				display: none;
			}
		}