body{
	background-color:rgb(7,215,139);
	margin: 0;
}

@font-face {
	font-family: 'lcd';
	src: url('data:application/x-font-woff;charset=utf-8;base64,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'); format('woff')
}


#right-container {
	/*position: relative;*/
	width: 20%;
	height: 100vh;
	border: 0px solid red;
	box-sizing: border-box;
	float:right;	
}

#stats-container {
	background-color:rgb(236,27,85);
	width: 100%;
	height: 20%;
	border-radius: 5px;
	box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75);
	display: table;
	border: 0px solid green;
	box-sizing: border-box;
}

#reg-times {
	background-color:rgb(1,138,86);
	width: 100%;
	height: 79%;
	margin-top: 2%;
	border-radius: 5px;
	box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75);
	/*display: table;*/
	border: 0px solid lightblue;
	box-sizing: border-box;
}

#show-times-btn-container {
	position: fixed;
	right: 0;
	top: 24vh;
	display: none;
	transition: 0.3s;
	z-index: 0;
}
#show-times-btn-container button {
	font-size: 4vh;
}

#table-stats-container {
	border: 0px solid purple;
	box-sizing: border-box;
	padding: 0px 5px;
	height:99%;
	/*width: 99%;*/
	overflow: auto;
	display: table-cell;
	vertical-align: middle;
	position: relative;
}

#table-stats {
	border: 2px solid black;
	border-collapse: collapse;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.stats-name {
	border: 2px solid black;
	font-weight: bold;
	/*font-size: 16px;*/
	font-size: 2.4vh;
	line-height: 2.4vh;
	padding-left: 0px;
	width: 50%;
}

.stats-value {
	border: 2px solid black;
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 16px;*/
	font-size: 2.4vh;
	line-height: 2.4vh;
	width: 50%;
	text-align: center;
}

#table-times {
	border: 2px solid black;
	border-collapse: collapse;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.4vh;
	line-height: 2.4vh;
}

#table-times th{
	border: 2px solid black;
	font-weight:bold;
	/*font-size:20px;*/
}

#table-times-container {
	border: 0px solid blue;
	border-collapse: collapse;
	padding: 6px 5px;
	height: 97%;
	overflow: auto;
		/*display: table-cell;
		vertical-align: top;*/
}

#table-times td{
	border: 2px solid black;
	text-align: center;
}

#table-times .time-cell:hover {
	font-style: italic;
	cursor: pointer;
	background-color: rgb(230,226,11);
}

.DeleteBtn {
	background-color: rgb(1,138,86);
	cursor: pointer;
	width:100%;
	padding: 1px 2px;
	border: 0px dotted white;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 16px;*/
	font-size: 2.4vh;
}

.DeleteBtn:hover {
	background-color: rgb(230,226,11);
	/*box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75);*/
}

/*download-btn to be hidden when there's no data --> Javascript*/
#download-btn {
	background-color: rgb(7,215,139);
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	margin: 10px auto;
	opacity: 0.85;
	border: 1px solid black;
	font-size: 2.4vh;
}

#download-btn:hover {
	box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.75);
	border: 2px solid black;
}

.reset-times {
	background-color: rgb(1,138,86);
	cursor: pointer;
	width:100%;
	padding: 1px 2px;
	border: 0px dotted white;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 2.4vh;
}

.reset-times:hover {
	background-color: rgb(230,226,11);
}

.myscroll::-webkit-scrollbar {
	display: none;
}

#main-container {
	width: 80%;
	border: 0px solid red;
	box-sizing: border-box;
	height: 100vh;
}

#top-bar-container{
	border: 0px solid palevioletred;
	box-sizing: border-box;
}

#menu-icon-container{
	border: 0px solid salmon;
	box-sizing: border-box;
	float: left;
	height: calc(20vh + 3*4px);
	display: table;
	margin-left: 1.5vw;
}

#menu-icon {
	display: table-cell;
	vertical-align: middle;
	border: 0px solid lightseagreen;
	box-sizing: border-box;
}

#menu-btn {
	background-color: rgb(7,215,139);
	cursor: pointer;
	border: 0;
	border-radius: 50%;
	padding: 7px 10px;
	transition: 0.3s;
}
#menu-btn:hover{
	background-color: rgba(1, 138, 85, 0.582);
}

/* Pop-up box to modify times */
#modify-times-container {
	background-color: rgba(173, 216, 230,0.95);/* rgba(230,226,11,0.95); */
	border: 4px solid darkslateblue;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75);
	display: inline-block;
	min-width: 40vw;
	min-height: 50vh;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: calc(-25vh);
	margin-left: calc(-20vw);
	z-index: 3;
	padding-bottom: 4vh;
	display: none;
}
#modify-times-container a {
	/* padding: 8px 8px 8px 32px; */
	text-decoration: none;
	font-size: 25px;
	color: #111;
	display: block;
	transition: 0.3s;
}
#modify-times-container .closebtn {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 36px;
	width: auto;
	height: auto;
	border-radius: 50%;
	padding: 0px 10.5px;
	/* padding-right: 20px;
	padding-left: 20px; */
}
#modify-times-container .closebtn:hover {
	background-color: rgba(252, 252, 252, 0.8);
	font-weight: bold;
}

#modify-times-container h1{
	font-size: 20vh;
	color: #111;
	text-align: center;
	font-family: 'lcd';
	margin: 4vh 0 0 0;
	padding: 0 1vw;
}

#modify-times-container h2{
	font-size: 3vh;
	color: #111;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0vh 0;
	padding: 0 1vw;
}

#modify-times-container h3{
	font-size: 2vh;
	color: #111;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	margin: 2vh 0 0 0;
	font-style: italic;
	padding: 0 1vw;
}

.number-input {
	width: 60px;
}

#modify-times-table{
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 auto;
	font-size: 2.5vh;
}

#modify-times-table .main-btn {
	display: block;
	margin: 0 auto;
	width: 40px;
}

#modify-times-table .apply-btn {
	width: 60px;
	margin-left: 3px;
}

#modify-times-table td {
	padding: 0 5px;
}

#modify-times-table .subheader {
	text-align: left;
	text-decoration: underline;
}

#modify-times-table label {
	padding-left: 3px;
}

#modify-times-table .b-d {
	border: 0px dotted salmon;
	box-sizing: border-box;
}

/* The sidebar menu */
.sidebar {
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 2; /* Stay on top */
	top: 0;
	left: 0;
	background-color: beige; /* Black*/
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
  }
  
/* The sidebar links */
.sidebar a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #111;
	display: block;
	transition: 0.3s;
}
.sidebar button {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #111;
	display: block;
	transition: 0.3s;
}
  
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
	color: #111;
}
  
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
	position: absolute;
	top: 0;
	right: 2px;
	font-size: 36px;
	margin-left: 50px;
	border-radius: 50%;
	padding-right: 20px;
	padding-left: 20px;
}
.sidebar .closebtn:hover {
	background-color: rgba(252, 252, 252, 0.8);
	font-weight: bold;
}

.sidebar-item {
	margin-bottom: 1px;
}
.sidebar-item:hover {
	transition: 0.3s;
	background-color: rgba(252, 252, 252, 0.8);
}

#sidebar-Timer {
	background-color: burlywood;
	cursor: pointer;
}

.sidebar-text {
	display: inline;
	position: absolute;
	left: 75px;
	font-family: Helvetica, Arial, sans-serif;
	width: 60%;
	text-align: left;
}
.sidebar-text:hover {
	font-weight: bold;
	transition: 0.3s;
}

.dropdown-arrow {
	display: inline-block; 
	font-size: 1rem;
	position: absolute;
	top: 3px;
	right: 0px;
}

.dropdown-container {
	display: none;
	background-color: rgb(223, 191, 151);
	font-family: Helvetica, Arial, sans-serif;
	
}

.dropdown-container a {
	color: bisque;/* #818181;*/
	border-top: 0px solid beige;
	box-sizing: border-box;	
	padding-left: 75px;
	font-size: 18px;
}
.dropdown-container a:hover {
	color: #111;
	font-weight: bold;
}

#logo-container {
	/*float:left;*/
	border: 0px solid green;
	box-sizing: border-box;
	/*z-index: 0;*/
}

.logo {
	height: 20vh;
}

#scramble-container {
	border: 0px solid yellow;
	box-sizing: border-box;
	min-height: calc(2*2.3vh + 4.7vh);
}

#scramble-container h1 {
	text-align: center;
	padding: 5px calc(2*4vh + 1vw);
	font-size: 4vh;
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
	display: ;
}

#timer-container {
	border: 0px solid pink;
	box-sizing: border-box;
}

#timer-container h1{
	/*font-size: 270px;*/
	font-size: 40vh;
	color: #111;
	text-align: center;
	margin: 32px auto;
	border: 0px solid orange;
	box-sizing: border-box;
	font-family: 'lcd';
}

#puzzle-select {
	position: fixed;
	top: 29.7vh;
	left: 1vw;
	border-color: rgb(1,138,86);/*rgb(145, 95, 2);*/
	border-radius: 10%;
	cursor: pointer;
	background-color: lightgreen; /*palegoldenrod;*/
	font-size: 2vh;
	width: calc(2*4vh); /*60px;*/
	height: 3vh; /*34px;*/
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align-last:center;
}

#puzzle-select:hover {
	/* box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75); */
	border-width: 1.5px;
}

#toggle-container {
	border: 0px solid lightgreen;
	box-sizing: border-box;
	/*float: left;
	margin-top: 2.3vh;
	margin-bottom: 2.3vh;
	margin-left: 1vw;*/
	position: fixed;
	top: 24vh;
	left: 1vw;
	z-index: 1;
}

/* Slider */
.switch {
	position: relative;
	/*display: inline-block;*/
	display: block;
	width: calc(2*4vh); /*60px;*/
	height: 4.7vh; /*34px;*/
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 4vh;/*26px;*/
	width: 4vh;/*26px;*/
	left: 0.7vh;/*4px;*/
	bottom: 0.39vh;/*4px;*/
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: rgb(1,138,86); /*#2196F3;*/
}

input:focus + .slider {
	box-shadow: 0 0 1px rgb(1,138,86); /*#2196F3;*/
}

input:checked + .slider:before {
	-webkit-transform: translateX(calc(8vh - 2*0.7vh - 4vh));/*translateX(26px);*/
	-ms-transform: translateX(calc(8vh - 2*0.7vh - 4vh));/*translateX(26px);*/
	transform: translateX(calc(8vh - 2*0.7vh - 4vh));/*translateX(26px);*/
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/* Tooltips */
.tooltiptext {
  visibility: hidden;
  background-color: grey;
  color: #fff;
  opacity: 0.85;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

#AO5-header-ts:hover .tooltiptext{
	visibility: visible;
	width: 12vw;
	left: ;
}

#AO12-header-ts:hover .tooltiptext{
	visibility: visible;
	width: 12vw;
	left: ;
}

#STDEV-header-ts:hover .tooltiptext{
	visibility: visible;
	width: 12vw;
	left: ;
}

[id="#-header-tt"]:hover .tooltiptext{
	visibility: visible;
	left: ;
	right: ;
	width: 14vw;
}

.info-symbol {
	font-size: ;
	font-weight: normal;
}

@media only screen and (max-width: 700px){
	#scramble-container{
		display: ;
	}

	#right-container {
		position: absolute;
		float: none;
		height: auto;
		width:200px;
		right: 0px;
		display: inline-flex;
	}
	
	#stats-container {
		width: 100%;
		padding: 3px 0px;
	}

	#table-stats-container {
		width: 100%;
	}

	#reg-times {
		position: fixed;
		right: 0;
		top: calc(7*2.4vh + 1%);
		display: none;
		width: 200px;
	}

	#main-container {
		width: 100%;
	}

	#timer-container h1{
		font-size: 30vh;
	}

	#download-btn {
		display: none;
	}

	#show-times-btn-container {
		display: block;
	}

	#modify-times-container {
		background-color: rgba(173, 216, 230,0.95);/* rgba(230,226,11,0.95); */
		border: 4px solid darkslateblue;
		box-sizing: border-box;
		border-radius: 5px;
		box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.75);
		display: inline-block;
		min-width: 40vw;
		min-height: 50vh;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: calc(-25vh);
		margin-left: calc(-40vw);
		z-index: 3;
		padding-bottom: 4vh;
		display: none;
	}
}


@media only screen and (max-device-width: 965px) and (min-device-width: 700px){
	#right-container {
		height: 100vh;
		width:270px;
	}
	
	#stats-container {
		width: 100%;
	}

	#table-stats-container {
		width: 100%;
	}

	#table-times-container {
		/*width: 100%;*/
	}

	#reg-times {
		/*display: none;*/
		width: 100%;
	}

	#main-container {
		width: 100%;
	}

	#timer-container h1{
	font-size: 30vh;
	}
}

/*	For Ipdad Pro	*/
@media only screen and (min-device-width: 800px) and (min-device-height: 1200px) {
	#right-container {

	}
	#main-container {
	}
}