:root {
	--blue: rgb(35 150 245);
	--paleblue: rgb(180 220 250);
	--verypaleblue: rgb(230 243 255);
	--darkblue: rgb(3 99 178);
	--palegreen: rgb(240 252 239);
}

* {
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
}

body{
	background: rgb(255 255 255);
	margin:0 auto;
	padding:0;
	font-size: 100%;
}

.bgpaleblue {
	border: 3px solid white;
	background: var(--paleblue);
	border-radius: 6px;
	height: 100%;
}

.bgpalegreen {
	background: var(--palegreen);
	border-radius: 4px;
	height: 100%;
}

.greybkgd {
	background: rgb(230 230 230);
	height: 100%;
}
.not-displayed, a.not-displayed {
	display: none;
}	

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	color: var(--blue);
}

h1 {
	margin-top: 1.3em;
	margin-bottom: 0.7em;
	font-size: 1.8em;
	font-weight: 600;
	line-height: 1.2em
}

h2 {
	margin-top: 1.0em;
	margin-bottom: 0.7em;
	font-size: 1.3em;
	font-weight: 600;
}

h3 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 1.2em;
	font-weight: 600;
}

p {
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	font-size: 1em;
	line-height: 1.3em;
}

#attempts {
	color: var(--blue);
	font-weight: bold;
	font-size: 1.3em;
	margin-top: 0.5em;
}

dl {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
}

dt {
	color: var(--blue);
	display: block;
}

dd {
	margin-bottom: 0.3em;
	display: block;
	margin-left: 100px;
}

.smalltext {
	font-weight: 500; 
	font-size: 0.9em;
}

.bigtext {
	font-weight: 400; 
	font-size: 1.1em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

em{color: red;}

.greypara {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	font-size: 0.9em;
	color: rgb(110 110 110)
}

.box-left {
	min-height: 100%;
	padding-left: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	border-radius: 6px;
	border: 2px solid var(--blue);
	/*background-color: rgb(235 245 255);*/
}

.box-mid {
	min-height: 100%;
	padding: 0 15px 20px 15px;
	border-top: 2px solid var(--blue);
	border-radius: 6px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
}

.box-right {
	min-height: 100%;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 20px;
	border-radius: 6px;
	border-top: 2px solid var(--blue);
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
}

.box-br-pd {
	padding: 5px;
	border: 1px solid rgb(0,0,0);
}

.box-bgd {
	min-height: 100%;
	padding: 12px 12px 12px 12px;
}

.white-bgd {
	padding-top: 30px;
	text-align: center;
	background-color: rgb(255 255 255);
	min-height: 60px;
}

.sliderdiv {
	display: flex;
	justify-content: center; 
	margin-top: 20px;
}

.button-1 {
	background-color: var(--blue);
	color: white;
	font-weight: bold;
}

.button-2 {
	/* margin: 2px 0px; */
	/* padding: 2px 8px; */
	background-color: var(--blue);
	color: white;
}

.button-3 {
	background-color: var(--blue);
	padding: 2px 6px 4px 6px;
	color: #ffffff;
	border-style: solid;
	border-radius: 3px;
	border-width: 1px;
	border-color: #ffffff;
	font-size: 1em;
}
			
.button-3:hover {
	background-color: var(--darkblue);
}

.button-4 {
	background-color: MediumTurquoise;
	color: white;
	padding: 1px 6px 2px 6px;
}

.button-5 {
	background-color: MediumTurquoise;
	padding: 2px 6px 4px 6px;
	color: #ffffff;
	border-style: solid;
	border-radius: 3px;
	border-width: 1px;
	border-color: #ffffff;
	font-size: 1.1em;
}
			
#arrowDialog .button-3 {
	float: right;
	border-color: var(--darkblue);
}

.btngroup {
	overflow: hidden;
}

/* Style the buttons inside the group */
.btngroup button {
	background-color: var(--paleblue);
	width: 28px;
	margin-left: -3px;
	border: 1px solid #aaa;
	border-radius: 4px;
	padding: 3px 0;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	font-size: 17px;
}

/* Change background color of buttons on hover */
.btngroup button:hover {
	background-color: #ddd;
	border-color:  #aaa
}

/* Change background color of buttons when disabled */
.btngroup button:disabled {
	background-color: #efefef;
	border-color:  #aaa
}

/* Change background color of green tick and red X when button disabled */
.btngroup button:disabled .greentick:before, 
.btngroup button:disabled .greentick:after,
.btngroup button:disabled .redX:before, 
.btngroup button:disabled .redX:after {
	background-color: #aaa;
	//border-color:  #aaa
}

/* Create an active/current tablink class */
.btngroup button.active {
  background-color: #fff;
	border-color:  #888
}

.greentick{
    width:30px;
    height:30px;
    background-color:transparent;
    position:relative;
    border-radius:3px;
}
.greentick:before, .greentick:after{
    content:'';
    position:absolute;
    height:3px;
    background-color:#2e9001bd;
    border-radius:2px;
    top:11px;
}
.greentick:before{
    -webkit-transform:rotate(55deg);
    -moz-transform:rotate(55deg);
    width:7px;
    transform:rotate(55deg);
    left:2px;
	top:17px;
}		
.greentick:after{
    -webkit-transform:rotate(-55deg);
    -moz-transform:rotate(-55deg);
    width:23px;
    transform:rotate(-55deg);
    left:2px;
}
.redX{
    width:30px;
    height:30px;
    background-color: transparent;
    position:relative;
    border-radius:3px;
    /*box-shadow:2px 2px 4px 0 white;*/
}
.redX:before, .redX:after{
    content:'';
    position:absolute;
    width:27px;
    height:2px;
    background-color:#fd020299;
    border-radius:2px;
    top:11px;
    /*box-shadow:0 0 2px 0 #ccc;*/
}
.redX:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:-3px;
}		
.redX:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:-2px;
}

.centered {
	margin: auto;
	width: 95%;
	text-align: center;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.footer {
	margin-top: auto;
	font-size: 0.9em;
	padding: 20px 10px;
	background-color: rgb(40,60,100);
	color: var(--paleblue);
}

a {
	color: var(--blue);
}

.footer a {
	color: var(--paleblue);
}

.footer p {
	margin-top: 0.6em;
}

.ftrlink a {
	color: white;
	font-weight: 500;
	text-decoration: none;
}

.subheading{
  font-size: 14pt;
  font-weight: bold;
  color: rgb(60,120,175);
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

li::marker {
	font-weight: bold;
	color: var(--blue); /* bullet color */
}

ul.indented {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
	list-style-type: "✔";
	padding: 0px 0px 0px 24px;
}

li.indented {
  padding: 0px 0px 8px 12px;
}

ol.toplevel {
    padding: 0px 0px 0px 40px;
	margin-block-start: 0.5em;
	margin-block-end: 0;
	counter-reset: section;
}

ol li.toplevel {
	padding: 6px 0px 12px 10px;
}

ol.sublevel {
    padding: 0px 0px 0px 30px;
	margin-block-end: 1em;
	counter-reset: section;
}

ol li.sublevel {
	padding: 4px 0px 0px 8px;
}

ul.subsublevel {
    padding: 0px 0px 0px 24px;
	margin-block-end: 1em;
	counter-reset: section;
}

ul li.subsublevel {
	padding: 0px 0px 0px 6px;
}

ol.toplevel > li.toplevel {
  counter-increment: section;
}

ol.toplevel > li.toplevel > ol.sublevel {
  counter-reset: subsection;
}

ol.toplevel > li.toplevel > ol.sublevel > li.sublevel {
  counter-increment: subsection;
}

ol.toplevel > li.toplevel > ol.sublevel > li.sublevel::marker {
  content: counter(section) "." counter(subsection) " ";
  margin-inline-end: 0.2em;
}



.rs-control .rs-path-color { background-color: white; }

.rs-control .rs-bg-color { background-color: white; }

.rs-control .rs-handle { background-color: var(--blue); }

#slider2.rs-control .rs-range-color { background: linear-gradient( 0deg, #ffffff, var(--paleblue)); }

#slider2 .rs-tooltip  {
	font-family: "Noto Sans", sans-serif;
    margin-left: 45%;
    top: 145%;
    font-size: 1.2em;
    font-weight: 600;
	color: var(--blue);
}

#slider2  {
	height: 110px !important;
	width: 100% !important;
	overflow: hidden;
	padding: 0px;
}

#slider2 .rs-tooltip div  {
    text-align: center;
    border-radius: 4px;
    padding: 1px 5px 2px;
    margin-top: 4px;
}

#slider2 .rs-handle  {
    background-color: transparent;
    border: 8px solid transparent;
    border-right-color: var(--blue);
    margin: -6px 0px 0px -5px !important;
    border-width: 6px 85px 6px 4px;
}

#slider2 .rs-handle:before  {
    display: block;
    content: " ";
    position: absolute;
    height: 20px;
    width: 20px;
    background: var(--blue);
    right: -10px;
    bottom: -10px;
    border-radius: 100px;
}

nav{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 70px;
	background: var(--blue);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	z-index: 99;
}
nav .navbar{
	height: 100%;
	max-width: 1250px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: auto;
	/* background: red; */
	padding: 0 50px;
}
.navbar .logo a{
	font-size: 1.6em;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-style: italic;
}
nav .navbar .nav-links{
	line-height: 73px;
	height: 100%;
}
nav .navbar .links{
	display: flex;
}
nav .navbar .links li{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	padding: 0 10px;
	white-space: nowrap;
}
nav .navbar .links li a{
	height: 100%;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	font-size: 1.1em;
	font-weight: 500;
}
.links li:hover .mech-arrow,
.links li:hover .str-arrow,
.links li:hover .help-arrow,
.links li:hover .nomen-arrow{
	transform: rotate(180deg);
}

nav .navbar .links li .arrow{
	/* background: red; */
	height: 100%;
	width: 22px;
	line-height: 74px;
	text-align: center;
	display: inline-block;
	color: #fff;
	transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
	position: absolute;
	top: 70px;
	left: 0;
	line-height: 40px;
	background: var(--darkblue);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	border-radius: 0 0 4px 4px;
	display: none;
	z-index: 2;
}
nav .navbar .links li:hover .mech-sub-menu,
nav .navbar .links li:hover .str-sub-menu,
nav .navbar .links li:hover .help-sub-menu,
nav .navbar .links li:hover .nomen-sub-menu{
	display: block;
}
.navbar .links li .sub-menu li{
	padding: 0 22px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
	color: #fff;
	font-size: 15px;
	font-weight: 500;
}
.navbar .links li .sub-menu .help1sub-arrow,
.navbar .links li .sub-menu .help2sub-arrow{
	line-height: 40px;
}
.navbar .links li .help1sub-sub-menu,
.navbar .links li .help2sub-sub-menu{
	/* line-height: 40px; */
}
.navbar .links li .sub-menu .help1sub-sub-menu,
.navbar .links li .sub-menu .help2sub-sub-menu{
	position: absolute;
	top: 0;
	left: 100%;
	border-radius: 0 4px 4px 4px;
	z-index: 1;
	display: none;
}
.links li .sub-menu .more:hover .help1sub-sub-menu,
.links li .sub-menu .more:hover .help2sub-sub-menu{
	display: block;
}
.navbar .search-box{
	position: relative;
	height: 34px;
	/* width: 80px; */
}
.navbar .search-box a{
	color: white;
	text-decoration: none;
	padding-right: 8px;
	font-size: 1.1em;
}
.navbar .search-box i{
	vertical-align: middle;
}
/*            position: absolute;
	height: 100%;
	width: 100%;
	line-height: 40px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}
*/
.navbar .search-box .input-box{
	position: absolute;
	right: calc(100% - 40px);
	top: 80px;
	height: 60px;
	width: 300px;
	background: var(--darkblue);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
	top: 65px;
	opacity: 1;
	pointer-events: auto;
	background: var(--darkblue);
}
.search-box .input-box::before{
	content: '';
	position: absolute;
	height: 20px;
	width: 20px;
	background: var(--darkblue);
	right: 10px;
	top: -6px;
	transform: rotate(45deg);
}
.search-box .input-box input{
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 4px;
	transform: translate(-50%, -50%);
	height: 35px;
	width: 280px;
	outline: none;
	padding: 0 15px;
	font-size: 16px;
	border: none;
}
.navbar .nav-links .sidebar-logo{
	display: none;
}
.navbar .bx-menu{
	display: none;
}
@media (max-width:920px) {
	nav .navbar{
		max-width: 100%;
		padding: 0 25px;
	}
	
	nav .navbar .logo a{
		font-size: 1.5em;
	}
	nav .navbar .links li{
		padding: 0 6px;
		white-space: nowrap;
	}
	nav .navbar .links li a{
		font-size: 1.1em;
	}
}
@media (max-width:800px){
	nav{
		/* position: relative; */
	}
	.navbar .bx-menu{
		display: block;
	}
	nav .navbar .nav-links{
		position: fixed;
		top: 0;
		left: -100%;
		display: block;
		max-width: 270px;
		width: 100%;
		background: var(--blue);
		line-height: 40px;
		padding: 20px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		transition: all 0.5s ease;
		z-index: 1000;
	}
	.navbar .nav-links .sidebar-logo{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.sidebar-logo .logo-name{
		font-size: 1.3em;
		font-style: italic;
		color: #fff;
	}
	.sidebar-logo  i,
	.navbar .bx-menu{
		font-size: 25px;
		color: #fff;
	}
	nav .navbar .links{
		display: block;
		margin-top: 20px;
	}
	nav .navbar .links li .arrow{
		line-height: 40px;
	}
	nav .navbar .links li{
		display: block;
	}
	nav .navbar .links li .sub-menu{
		position: relative;
		top: 0;
		box-shadow: none;
		display: none;
	}
	nav .navbar .links li .sub-menu li{
		border-bottom: none;
		
	}
	.navbar .links li .sub-menu .help1sub-sub-menu,
	.navbar .links li .sub-menu .help2sub-sub-menu{
		display: none;
		position: relative;
		left: 0;
	}
	.navbar .links li .sub-menu .help1sub-sub-menu li,
	.navbar .links li .sub-menu .help2sub-sub-menu li {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.links li:hover .mech-arrow,
	.links li:hover .help-arrow,
	.links li:hover .nomen-arrow,
	.links li:hover .str-arrow {
		transform: rotate(0deg);
	}
	.navbar .links li .sub-menu .help1sub-sub-menu,
	.navbar .links li .sub-menu .help2sub-sub-menu {
		display: none;
	}
	.navbar .links li .sub-menu .more span{
		/* background: red; */
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}
	
	.links li .sub-menu .more:hover .help1sub-sub-menu,
	.links li .sub-menu .more:hover .help2sub-sub-menu{
		display: none;
	}
	nav .navbar .links li:hover .mech-sub-menu,
	nav .navbar .links li:hover .help-sub-menu,
	nav .navbar .links li:hover .str-sub-menu,
	nav .navbar .links li:hover .nomen-sub-menu{
		display: none;
	}
	.navbar .nav-links.show1 .links .mech-sub-menu,
	.navbar .nav-links.show4 .links .help-sub-menu,
	.navbar .nav-links.show3 .links .nomen-sub-menu,
	.navbar .nav-links.show6 .links .str-sub-menu,
	.navbar .nav-links.show2 .links .more .help1sub-sub-menu,
	.navbar .nav-links.show5 .links .more .help2sub-sub-menu{
		display: block;
	}
	.navbar .nav-links.show1 .links .mech-arrow,
	.navbar .nav-links.show4 .links .help-arrow,
	.navbar .nav-links.show3 .links .nomen-arrow,
	.navbar .nav-links.show6 .links .str-arrow{
		transform: rotate(180deg);
	}
	.navbar .nav-links.show2 .links .help1sub-arrow,
	.navbar .nav-links.show5 .links .help2sub-arrow{
		transform: rotate(90deg);
	}
	.button-3 {
		font-size: 1.0em;
	}
}
@media (max-width:370px){
	nav .navbar .nav-links{
		max-width: 100%;
	} 
}

.button-wrap {
	display: block;
	max-width: 300px;
	position: relative;
	margin: 0.6em 0 2em 0.5em;
}

.radio-btn {
	/* white-space: nowrap; */
	margin: 0.3em 0.1em;
}

.button-label {
	/* white-space: nowrap; */
	padding: 0.1em 0.3em 0.1em 0.1em;
	cursor: pointer;
	color: black;
	border-radius: 0.25em;
	transition: 0.3s;
	user-select: none;
	
	
	
	&:hover {
		background: gray;
	    color: white;
	}
	&:active {
		transform: translateY(2px);
	}
}

.no-box {
	/*white-space: nowrap;*/
	display: none;
}


.with-label:checked + .button-label {
	/*white-space: nowrap;*/
	background: #dbeefc;
}

#easy:checked + .button-label {
  background: #8BC34A;
  color: white;
  &:hover {
    background: green;
  }
}

#med:checked + .button-label {
  background: orange;
  color: white;
  &:hover {
    background: darkorange;
  }
}

#diff:checked + .button-label {
  background: #FF5722;
  color: white;
  &:hover {
    background: #E91E63;
  }
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 160px;
	background-color: var(--verypaleblue);
	/*color: blue;*/
	text-align: center;
	border-radius: 6px;
	padding: 3px 0;
	
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: -3px;
	left: 115%;
	/* bottom: 100%;
	left: 50%;
	margin-left: -80px; */
}

.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 100%; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent var(--verypaleblue) transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}