/*
#84C2FF
#005DB7
#8E8E8E
#1E90FF
#3490E8
#51C3FF
*/
/*
#1E90FF
#05182A
#0A3055
#0F4880
#1460AA
#1978D4
*/
:root {
	/* colors */
	--pri-color: #1e90ff;
	--sec-color: #0F4880;
	--sec-color-faded: rgba(0, 89, 179, .3);
	--text-color: #333;
	--text-color2: #eee;
	--page-h2-title-bg:#eee;
	--page-h2-title-color:#333;
	
	--page-h3-title-bg:#84C2FF;
	--page-h3-title-color:#333;
	
	--list-odd-bg-color:#eee;
	--page-bg-color:#fff;
	--page-txt-color:#333;
	
	--red-x-color:#D4000E;
	--red-x-color-hover:darkred;
	
	--sidenav-txt-color-hover:#f1f1f1;
	
	--settings-line-color:#8E8E8E;
  
	/* buttons */
	--delete-btn-bgcolor: black;
	--delete-btn-color: red;

	/* height and withs */
	--topnav-height: 50px;
	--main-bottom-margin: 25px;
}

body{
	padding:0;
	margin:0;
	font-size:2rem;
	background-color:var(--page-bg-color);
	color:var(--page-txt-color);
}
ul{	
	margin:0;
	padding:0;
}
li{
	list-style:none;
}
li:nth-child(odd){
	background:var(--list-odd-bg-color);
}
input[type="checkbox"]{
	margin-right:10px;
	width:30px;
	height:30px;
	margin: 0 15px 0 0;
	float: left;
}
label{
	margin:0;
	font-weight:normal;
	display:block;
	padding:15px 10px 15px 15px;
}
button{
	background:var(--sec-color);
	color:var(--text-color2);
	padding:0 10px;
	margin:0;
	border:0;
	border-radius:5px;
	height:40px;
	line-height:40px;
}

.topnav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:var(--topnav-height);
	line-height:var(--topnav-height);
	background-color:var(--pri-color);
	color:var(--text-color2);
	padding:0 15px 0 2px;
	display:flex;
	z-index: 100;
}
.topnav > div.left{
	flex:0 0 50%;
}
.topnav > div.left img.toplogo{
	max-height:100%;
	margin:3px 0 0 0;
	float: left;
	width:115px;
	height:42px;
}
.topnav > div.right{
	flex:0 0 50%;
	text-align:right;
}
footer{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:var(--topnav-height);
	line-height:var(--topnav-height);	
	color:var(--text-color2);
	padding:0 0;	
	text-align:center;
}
footer button{	
	margin:5px 0;
	height: 50px;
    line-height: 50px;
}
footer .left{
	float:left;
	margin: 0 5px 0 0px;
    border-radius: 0 5px 0 0;	
}
footer .right{
	float:right;
	margin: 0 0px 0 5px;
    border-radius: 5px 0 0 0;
}
footer .timer{
	display:inline-block;
	font-size: 3rem;
	background: var(--sec-color);
    color: var(--text-color2);
    padding: 0 10px;
	border-radius: 5px 5px 0 0;
}
footer .timer span{
	-webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
li.title{
	text-align: left;
	font-weight: bold;
	padding:10px 10px;
}
li.title span{
	float:right;
	padding-right:5px;
	color:var(--sec-color);
}
li img{
	float:right;
	max-height:40px;
	vertical-align: middle;
	margin-top: -5px;
}
li img[data-src] {
  filter: blur(0.2em);
}

li img {
  filter: blur(0em);
  transition: filter 0.5s;
}
.set1, .set2, .set3{
	display:none;
}

.startstop{
	background:darkgreen;
}
.startstop.stop{
	background:darkred;
}
#resetBtn{
	background:black;
}
#skillrange{
	color:var(--text-color);
}
.toastmessage{
	position:fixed;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	padding:10px 20px;
	background:rgba(0, 0, 0, .8);
	color:var(--text-color2);
	border-radius:15px;
	min-width:200px;
	text-align:center;
	box-shadow:5px 5px 25px rgba(0, 0, 0, 0.5);
	z-index:5100;	
}
.toastmessage.big{
	top:50%;
	bottom:auto;
	padding:30px 50px;
	background:rgba(0, 0, 0, .8);
	font-size:2rem;
}
.toastmessage span,.toastmessage div,.toastmessage strong{
	font-size:inherit;
}
.toastmessage.txtleft{
	text-align:left;
}
a.redx{
	color:var(--red-x-color);
	text-decoration:none;
	font-size: 22px;
	margin-left:5px;
	float: left;
	height:48px;
	line-height:45px;
	font-family: monospace;
}
a.redx:hover{
	color:var(--red-x-color-hover);
}
.navmenu{
	background-color: transparent;
	border: none;
	cursor: pointer;
	/*display: flex;*/
	padding: 0;
	margin:2px 10px 0 10px;
	float: left;
}
.navmenu img{
	width: 30px;
    height: 40px;
	transition: all 0.25s ease-in-out;
}
.navmenu img.open{
	transform:rotate(90deg);
	transition: all 0.25s ease-in-out;
}
.overlay{
	position:fixed;
	inset:0 0 0 0;
	background:rgba(0, 0, 0, .6);
	display:none;
}
/* The side navigation menu */
.sidenav {
  height: calc(100% - 50px); /* 100% Full-height */
  width: 200px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 101; /* Stay on top */
  top: 50px; /* Stay at the top */
  left: -200px;
  background-color: var(--pri-color); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  /*padding-top: 50px;*/
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  /*margin-top:50px;*/
}

/* The navigation menu links */
.sidenav a:not(.closebtn) {
  padding: 8px 8px 8px 15px;
  text-decoration: none;
  font-size: 20px;
  color: var(--text-color2);
  display: block;
  transition: 0.3s;
  border-bottom:1px solid var(--sec-color-faded);
}
.sidenav a.sel{
	background:var(--sec-color);
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: var(--sidenav-txt-color-hover);
}
.sidenav a img{
	height:25px;
	vertical-align:sub;
	margin:0 10px 0 0;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 36px;
  margin-left: 50px;
  color:var(--text-color2);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
.main {
	transition: margin-left .5s;
	padding: 0;
	display:none;
	margin: var(--topnav-height) 0 var(--main-bottom-margin) 0;
}
.main.show{
	display:block;
}
.main.loading{
	
}
.main.loading > div{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
.main > p{
	padding:5px 10px 0px 10px;
}
.main > p.flex{
	display:flex;
}
.main > p.flex button{
	flex:auto;
}
h2{
	text-align: left;
    font-weight: bold;
    padding: 10px 10px;
	background: var(--page-h2-title-bg);
	font-size: 2rem;
	line-height: 1.42857143;
    color: var(--page-h2-title-color);
}
h3{
	text-align: left;
    font-weight: bold;
    padding: 10px 10px;	
	font-size: 1.5rem;
	line-height: 1.42857143;
    color: var(--page-h3-title-color);
	margin: 15px 0 15px 0;
    padding: 5px 10px;
	background: var(--page-h3-title-bg);
}
h3.first{
	margin: -10px 0 15px 0;
}
h3.martop0{
	margin-top:0;
}
h3.marbottom0{
	margin-bottom:0;
}
.formdiv{
	padding:5px 10px;
	display:flex;
}
#newweight, #newweightquick{
	padding:4px 10px 4px 10px;
	flex: auto;
}
#newweightbtn, #newweightbtnquick{
	/*flex:0 0;*/
	margin: 0 0 0 0;
	flex: auto;
	border-radius: 0px 5px 5px 0px;
}
.logsul{
	padding:0;
	margin:10px 0;
	font-size:1.5rem;
}
.logsul.start{
	margin:-15px 0 10px 0;
}
li.logliheader{
	display:flex;
	padding:5px 10px;
	font-weight: bold;
	background-color: var(--pri-color);
    color: var(--text-color2);
}
li.logliheader .logdate{
	flex:50%;
}
li.logliheader .logtimer{
	flex:25%;
}
li.logliheader .logvalue{
	flex:25%;
}
.logliheader span{
	text-transform:uppercase;	
}
.logli{
	display:flex;
	padding:10px 10px;
	align-items: center;
}
.logdate{
	flex:50%;
}
.logtimer{
	flex:25%;
	margin:0 5px;
}
.logvalue{
	flex:25%;
	text-align:right;
}
.loglinone{
	text-align: center;
    padding: 20px 0;
    font-size: 2rem;
}
.workoutgraph{
	/*height:100px;*/
	text-align:center;
}
#navabout{
	border-top: 1px solid var(--sec-color-faded);
	border-bottom:0;
	position: absolute;
    bottom: 45.56px;
	left:0;
	right:0;
}
#navsettings{
	border-top: 1px solid var(--sec-color-faded);
	border-bottom:0;
	position: absolute;
    bottom: 0;
	left:0;
	right:0;
}
#changelog{
	font-size:1.6rem;
}
#changelog h3{
	margin:15px -10px 15px -10px;
}
.dellogbtn{
	display:none;
	transition: all 0.25s ease-in-out;
	position: absolute;
    z-index: 2;
    right: 10px;
    color: var(--delete-btn-color);
    font-size: 2.5rem;
    background: var(--delete-btn-bgcolor);
    padding: 0;
    border-radius: 100%;
    line-height: 27px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.logli:active a.dellogbtn,
.logli:hover a.dellogbtn{
	display:inline-block;
	transition: all 0.25s ease-in-out;
}
.innermain{
	padding:5px 10px;
}
.settingsitem{
	border-bottom:1px solid var(--settings-line-color);
	padding: 10px 10px;
    margin: 0 -10px;
}
.settingsitem label{
	padding:0;
}
.settingsitem select,
.settingsitem input[type="checkbox"]{
	float:right;
}
.settingsitem input[type="checkbox"]{
	margin: 0 0 0 0;
}
.settingssection{
	display:flex;
	padding:5px 10px;
	background-color: var(--pri-color);
    color: var(--text-color2);
	margin: 0 -10px;
}
.settingssection.first{
	margin: -15px -10px 0 -10px;
}
hr{
	margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    border-top: 2px solid #ccc;
}
.bigline{
	border-top: 2px solid #ccc;
	height:2px;
	display:block;
	padding:0;
	margin:0;
}
.smallline{
	border-top: 1px solid #ccc;
	height:2px;
	display:block;
	padding:0;
	margin:0;
}
/*	LOADERS */
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #333;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*********************************************
	THEME : DARK
*********************************************/
body.dark{
	/* colors */
	--pri-color: #002040;
	--sec-color: #003366;
	--sec-color-faded: rgba(27, 51, 102, 1);
	--text-color: #333;
	--text-color2: #eee;
	--page-h2-title-bg:#222;
	--page-h2-title-color:#fff;	
	
	--list-odd-bg-color:#444;
	--page-bg-color:#333;
	--page-txt-color:#eee;
	
	--red-x-color:#D4000E;
	--red-x-color-hover:darkred;
	
	--sidenav-txt-color-hover:#f1f1f1;
	
	--settings-line-color:#8E8E8E;
  
	/* buttons */
	--delete-btn-bgcolor: black;
	--delete-btn-color: red;

	/* height and withs */
	--topnav-height: 50px;
}
body.dark li img{
	filter:invert(100%);
}
body.dark .workoutgraph{
	color:white;
}
body.dark select{
	color:var(--pri-color);
}
/*********************************************
	RESPONSIVE
*********************************************/
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}