/*Color definitions*/
:root {
	--red: #ad0000;
	--green: #35701c;
	--greenlight: #8ee66a;
	--blue: #2176ff;
	--silver: #c0c0c0;
	--silverdark: #838996;
	--gold: #ffd700;
	--golddark: #d4af37;
}

html, body
{
	font-family: 'Merriweather', serif;
	font-size: 14px;
	color: black;
	line-height: 160%;
	background-color: var(--silver);
	margin:0px; 
	padding:0px;
	counter-reset: h2counter;
}
/* Mobile styling */
.mobilh1 {
	text-align: center;
	font-size: 60px;
}

.mobilbutton {
	font-size: 50px;
	border-radius: 20px;
	background-color: var(--golddark);
	color: black;
	padding: 30px;
}

.mobilchild {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.mobilcontainer {
	width: 100%;
	height: 200px;
	position: relative;
}

.mobilpopup {
	width: 90%;
	margin: auto;
	background-color: var(--silverdark);
	padding: 25px;
	display: none;
	font-size: 50px;
	border-radius: 20px;
	margin-top: 10px;
	line-height: 100%;
}

.mobildata {
	width: 90%;
	margin: auto;
	background-color: var(--silverdark);
	padding: 25px;
	display: none;
	font-size: 50px;
	border-radius: 20px;
	line-height: 100%;
}

.mobilinfo {
	width: 90%;
	margin: auto;
	background-color: var(--silverdark);
	padding: 25px;
	display: block;
	font-size: 50px;
	border-radius: 20px;
	line-height: 100%;
}

.mobildist {
	width: 90%;
	margin: auto;
	background-color: var(--silverdark);
	padding: 25px;
	display: none;
	font-size: 60px;
	text-align: center;
	border-radius: 20px;
	margin-top: 10px;
	border: 1px black solid;
	line-height: 100%;
}

.toc {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

/* Search bar */
.search {
  width: 500px;
  position: relative;
  display: flex;
  margin: auto;
  margin-bottom: 10px;
  border: solid var(--silver) 2px;
  padding: 12px 20px 12px 40px; /* Add some padding */
  border-radius: 10px;
  color: var(--silverdark);
  background-image: url('icons/icons8-search-filled-50.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  background-size: 20px;
}

.search:focus{
	outline: none;
	border: solid var(--silverdark) 2px;
}

.dropdown-menu {
	background-color: var(--silver);
	color: var(--silverdark);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 100%;
}

#myInput {
    background-image: url('icons/icons8-search-filled-50.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    background-size: 20px;
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 0;
}


/*Nudge style*/
.note {
	background: var(--gold);
    border-color: var(--golddark);
    padding-left: 25px;
    border-left-width: 5px;
    border-left-style: solid;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
    color: black;
}

/*About styles*/
.abhd {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 0px;
}

.abh1 {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 0px;
}

.abaf {
	text-indent: 20px;
	margin-bottom: -15px;
	text-align: left;
}


/*Info styles*/

.info {
	margin-top: 60px;
	margin-left: auto; 
	margin-right: auto;
	background-color: white;
	padding-top: 50px;
	padding-left: 200px;
	padding-right: 200px;
	padding-bottom: 50px;
	font-size: 14px;
	width: 600px;
}

.legalt {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 0px;
}

.bilag {
	text-align: center;
	font-weight: normal;
	font-size: 14px;
	font-style: italic;
	margin-bottom: -15px;
	margin-top: 30px;
}

.legals {
	text-align: center;
	font-weight: normal;
	font-size: 14px;
	font-style: italic;
	margin-bottom: -15px;
	margin-top: 30px;
	counter-reset: pcounter;
}

.legals::before {
    content: "§" counter(h2counter) "\0000a0";
    counter-increment: h2counter;
}

.part {
	text-indent: 20px;
	margin-bottom: -15px;
	text-align: left;
	counter-reset: psubcounter;
}

.part::before {
    content: counter(h2counter)"."counter(pcounter) "\0000a0";
    counter-increment: pcounter;
}

.subpart {
	text-indent: 40px;
	margin-bottom: -15px;
	text-align: left;
}

.subpart:before {
    content: counter(psubcounter, lower-alpha) "\0000a0";
    counter-increment: psubcounter;
}

.showhide {
	display: none;
}
  
/*Paragraf spacing*/

br {
	display: block; /* makes it have a width */
    content: " "; /* clears default height */
    margin-top: 14px; /* change this to whatever height you want it */
}


/*Author style*/

.author {
	color: var(--silverdark);
	font-style: italic;
	margin-top: 2px; 
	padding-top: 0;
}

/*links*/

a:link, a:visited, a:active {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*Traning list*/
.traininglist li {
	margin-left: -20px;
}

.traininglist ol, .traininglist li:not(:last-child) {
	margin-bottom: 15px;
}


/* profil linje */

.top {
	position: fixed;
	width: 100%;
	height: 60px;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.05);
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	font-size: 15px;
}

.top > div {
	flex: 1;
	min-width: 100px;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
}


/* main contents*/

header {
	position: fixed;
	width: 100%;
	height: 60px;
	left: 0px;
	top: 0px;
	background-color: var(--silverdark);
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	font-size: 15px;
}

header > div {
	flex: 1;
	min-width: 100px;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
}

footer{
	width:100%;
	height: 100px;
	position: fixed;
	text-align: center;
	bottom: 0;
	background-color: var(--silverdark);
	padding: 10px;
}

main{
	position: fixed;
	top: 60px;
	width: 100%;
	background-color: var(--silver);
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
}

main > div{
	flex: 1;
	min-width: 400px;
	height: 500px;
	margin:5px;
	padding: 20px;
	background-color: whitesmoke;
	border-radius: 20px;
	overflow-y: scroll;
}

::-webkit-scrollbar-thumb {
	background-color: var(--silverdark);
	border: 4px solid transparent;
	border-radius: 8px;
	background-clip: padding-box;  
  }

::-webkit-scrollbar {
	width: 16px;
  }

.wrapper {
	margin-top: 60px;
	background-color: var(--silver);
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
}

.wrapper > div {
	flex: 1;
	min-width: 400px;
	margin:5px;
	padding: 20px;
	background-color: whitesmoke;
	border-radius: 20px;
	overflow-y: scroll;
}

.wrapper > h1 {
	width: 100%;
	margin: 10px;
}

details summary > * {
	display: inline;
  }

.resetpass {
	margin-top: 50px;
	background-color: whitesmoke;
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
}

.resetpass > div {
	width: 350px;
	margin:auto;
	padding: 20px;
	background-color: #f7faff;
	border-radius: 20px;
	
}

.wide {
	border-radius: 20px;
	margin-top: 65px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:-45px;
	padding: 20px;
	background-color: whitesmoke;
}

.right {
	text-align: right;
	overflow-x: hidden;
	white-space: nowrap;
	direction:ltr;
}

.main-buttom {
	width: 100%;
	height:100px;
	padding: 10px;
	background-color: var(--silverdark);
	text-align: center;
	color: white;
}

/* lesson */
.lessoncontent {
	background-color: whitesmoke;
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.lessontext {
	background-color: var(--silver);
	width: 900px;
	padding: 20px;
	margin: auto;
}

.lessonauthor {
	color: var(--silverdark);
}

.lessoninput {
	border-radius: 20px;
	margin: 5px;
	padding: 20px;
	background-color: whitesmoke;
}


/* e-book */
.ebook {
	margin-top:60px;
	background-color: whitesmoke;
    display:flex;
}

.menu {
	position: fixed;
	top: 60px;
	left: 10px;
	display: inline-block;
}

.ebookmenu {
	background-color:whitesmoke;
    width: 200px;
    height:100%;
    top: 0;
    left: 0;
}

.ebookcontent {
	background-color: whitesmoke;
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	margin: 60px 0 0 200px;
  	padding: 0 30px;
  	overflow-y: scroll;
  	position: fixed;
  	left: 0;
  	top: 0;
  	height:100vh;
}

.ebookcontent > div {
	flex: 1;
	min-width: 500px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	margin-left: 5px;
	padding: 20px;
}

.ebookcontent h2 {
	font-size: 1.5em;
	font-weight: normal;
}

.ebookcontent summary {
	font-size: 1.5em;
	font-weight: normal;
}

.ebooktab {
	border-collapse: collapse;
	border: 1px solid black;
	table-layout: fixed;
  	width: 50%;
} 

.ebooktab th td{
	border: 1px solid black;
	padding: 5px;
}

/*ebook menu*/

details[open] summary ~ * {
	animation: sweep .5s ease-in-out;
  }
  
  @keyframes sweep {
	0%    {opacity: 0; margin-left: -10px}
	100%  {opacity: 1; margin-left: 0px}
  }

.ebookmenu details {
	width: 100%;
	margin: 0 auto ;
	background: #ffd45e;
	margin-bottom: .5rem;
	box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
	border-radius: 5px;
	overflow: hidden;
}

.ebookmenu summary {
	padding: 1rem;
	display: block;
	background: #ffd787;
	padding-left: 2.2rem;
	position: relative;
	cursor: pointer;
  }
  
.ebookmenu summary:before {
	content: '';
	border-width: .4rem;
	border-style: solid;
	border-color: transparent transparent transparent black;
	position: absolute;
	top: 1.3rem;
	left: 1rem;
	transform: rotate(0);
	transform-origin: .2rem 50%;
	transition: .25s transform ease;
  }
  
  /* THE MAGIC */
.ebookmenu details[open] > summary:before {
	transform: rotate(90deg);
  }
  
.ebookmenu details summary::-webkit-details-marker {
	display:none;
  }

.ebookmenu summary:hover {
	background-color: var(--golddark);
	color: black;
}

.ebookmenu h1 {
	padding: 5px;
}

.ebktab {
	width: 200px;
	table-layout: fixed;
	opacity: .999;
}

.ebktab tr {
    opacity: .999;
}

.ebktab td {
	border: none;
	position: relative;
	padding: 10px;
	background-color: #f9f5ca;
	color: #4f4f4f;
	opacity: .999;
	border-radius: 5px;
}

.ebktab td:hover {
	background-color: var(--gold);
}

.ebktab td span {
  width: 100%;
  height: 100%;
  display: block;
}

.mprogress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
    background-color: #3cb833;
    z-index: -1;
}

.mprogresshd {
	position: absolute;
	left: 0;
	height: 5px;
	bottom: 5px;
    background-color: #0aa500;
    z-index: -1;
    border-radius: 3px;
}

.mprogresshdbg {
	position: absolute;
	left: 0;
	height: 5px;
	bottom: 5px;
	width: 100%;
    background-color: #8ee66a;
    z-index: -1;
    border-radius: 3px;
}

.mtext {
	line-height: normal;
}



/*ebook headings */

.ebtitle {
	font-size: 2em;
	font-weight: normal;
	line-height: 120%;
}

.ebline {
	border: 1px solid #242d3a;
	width: 100%;
	margin-bottom: 0;
}

.ebauthor {
	font-size: 1em;
	float:right;
	margin-top: 0;
}

/*ebook boxes*/

.ebfeedback{
	display: none;
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    padding: 1px 10px 10px 10px;
    border-color: black;
    background-color: #ffcc00;
	margin-top: 20px;
}

.ebdef{
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    padding: 1px 10px 10px 10px;
    border-color: #249100;
    background-color: #7aba66;
	margin-top: 10px;
	margin-bottom: 10px;
}

.theorem{
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    padding: 1px 10px 10px 10px;
    border-color: #242d3a;
    background-color: #609cfc;
	margin-top: 10px;
	margin-bottom: 10px;
}

.example{
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    padding: 1px 10px 10px 10px;
    border-color: #303031;
    background-color: #ebebeb;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*ebook link*/

.ebklink {
	display: inline-block;
}

.ebklink span {
	text-decoration: none;
	display: block;
}

/*ebook bottons*/

.ebbtn {
	background-color: #f9f5ca;
	color: black;
	padding: 10px;
	border: solid 1px black;
}

.ebbtn:hover {
	background-color: #ffcc00;
	color: white;
}

/* GeoGebra applets */

.applet_ggb {
	position: relative; 
	display: block; 
	width: 600px; 
	height: 500px;
}


/*Videos frames

iframe {
    width:100%;
}*/

#opgave, #bar, #checkbtn, #newbtn, #goal {
	display: none;
}


/* Button */

.publicpromo {
	display: inline-block;
	border: solid black 1px;
	border-radius: 10px;
	width: 200px;
	height: 300px;
	margin: 10px;
	text-align: center;
	text-decoration: none;
}

.btn {
	display:inline-block;
	padding:0.35em 1.2em;
	border:0.1em solid var(--golddark);
	background-color: var(--gold);
	margin:0 0.3em 0.3em 0;
	border-radius:10px;
	box-sizing: border-box;
	text-decoration: none;
	color: black;
	text-align:center;
	transition: all 0.2s;
}

.btn:hover {
	color:#000000;
	background-color: whitesmoke;
}

input[type=submit] {
    display:inline-block;
	padding:0.35em 1.2em;
	text-decoration: none;
	color: black;
	text-align:center;
	transition: all 0.2s;
}

.ptbl {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 10px;
  width: 100%;
}

.ptbl td, .ptbl th {
  border: solid var(--silverdark) 1px;
  padding: 4px;
  text-align: left;
}

.ptbl th:after {
	float: right;
	background-image: url('icons/icons8-sort-50.png');
    background-size: 20px 20px;
    width: 20px; 
    height: 20px;
	content:"";
	background-repeat: no-repeat;
	margin-top: 3px;
}

.ptbl th:hover:after {
	background-image: url('icons/icons8-sort-filled-50.png');
}

.ptbl tr:hover {background-color: var(--silver);}

.ptbl th {
  padding: 4px;
  text-align: center;
  background-color: var(--silver);
  color: black;
  font-weight: normal;
}

/* top-left border-radius */
.ptbl tr:first-child th:first-child {
	border-top-left-radius: 10px;
  }

/* top-right border-radius */
.ptbl tr:first-child th:last-child {
	border-top-right-radius: 10px;
  }
  
  /* bottom-left border-radius */
  .ptbl tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
  }
  
  /* bottom-right border-radius */
  .ptbl tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
  }

/* Same as above without sort */
.ntbl {
	border-collapse: separate;
    border-spacing: 0;
	margin-bottom: 10px;
	width: 100%;
  }
  
  .ntbl td, .ntbl th {
	border: solid var(--silverdark) 1px;
	padding: 4px;
	text-align: left;
  }
  
  .ntbl tr:hover {background-color: var(--silver);}
  
  .ntbl th {
	padding: 4px;
	text-align: center;
	background-color: var(--silver);
	color: black;
	font-weight: normal;
  }
/* top-left border-radius */
.ntbl tr:first-child th:first-child {
	border-top-left-radius: 10px;
  }

/* top-right border-radius */
.ntbl tr:first-child th:last-child {
	border-top-right-radius: 10px;
  }
  
  /* bottom-left border-radius */
  .ntbl tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
  }
  
  /* bottom-right border-radius */
  .ntbl tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
  }


/* Table list no position*/

.tablist {
  border-collapse: collapse;
  width: 100%;
}

.tablist td, .tablist th {
  border: none;
  padding: 4px;
  text-align: left;
}

.tablist tr:nth-child(even){background-color: #f2f2f2;}

.tablist tr:hover {background-color: #ddd;}

.tablist th {
  padding: 4px;
  text-align: center;
  background-color: #2176ff;
  color: white;
}

/*table maingoal*/

.maingoaltitle {
	font-size: 10pt;
	font-weight: bold;
}

/* progressbar */

.w3-border{
	display: block;
	border:1px solid black;
	margin: auto;
	height:20px;
	width:100px;
}

.w3-gray{
	display: block;
	background-color: rgb(53, 112, 28);
	height:20px;
	width: 0px;
}

/* forms */

.top-form-group {
	display: inline-block;
}

.top-input {
	font-size: 12px;
    width: 100px;
    padding: 3px;
    margin: 3px;
    box-sizing: border-box;
}

.form-group {
	display: block;
}

.help-block {
	margin-left: 5px;
	color: var(--red);
	display: block;
}

.control-form {
    border: none;
    border-radius: 4px;
    background-color: rgb(33, 118, 255);
    color: white;
    font-size: 16px;
    width: 200px;
}

.form-input {
	font-size: inherit;
	font-family: inherit;
	border: solid var(--silver) 1px;
    width: 300px;
    padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
  	border-radius: 10px;
}

.form-input:focus {
	outline: none;
	border: solid var(--silverdark) 1px;
}

.form-input-area {
	font-size: inherit;
	font-family: inherit;
    width: 300px;
    height: 200px;
    padding: 10px;
    margin-top: 5px;
	margin-bottom: 5px;
    border: solid var(--silver) 1px;
    border-radius: 10px;
    resize: none;
    overflow-y: hidden;
}

.form-input-area:focus {
	outline: none;
	border: solid var(--silverdark) 1px;
}

.form-label {
    width: 135px;
	display: flex;
	float: left;
	font-size: inherit;
	font-family: inherit;
	font-weight: normal;
	padding-top: 10px;
}

.form-select {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 10px;
	width: 320px;
	border: solid var(--silver) 1px;
	border-radius: 10px;
	font-size: inherit;
	font-weight: normal;
	font-family: inherit;
}

.form-select:focus {
	outline: none;
	border: solid var(--silverdark) 1px;
}

.top-form-group {
	display: inline-block;
}

.top-input {
	font-size: 12px;
    width: 100px;
    padding: 3px;
    margin: 3px;
    box-sizing: border-box;
}

.point-input {
  display: block;
  margin: 0;
  padding: 0.8px 1.6px;
  color: inherit;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: inherit;
  line-height: 1.2;
  border: none;
  border-radius: 4px;
  transition: box-shadow 300ms;
  background-color: #8ee66a;
}

.resetform {
  display: block;
  margin-top: 15px;
  padding: 5px;
  color: inherit;
  width: 340px;
  height: 35px;
  font-family: inherit;
  font-size: 20px;
  font-weight: inherit;
  line-height: 1.2;
  border: none;
  border-radius: 4px;
  transition: box-shadow 300ms;
  background-color: var(--silver);
}

/* form class setting */
.classsetting {
	background-color: var(--silver);
	width: 200px;
	border: none;
	padding: 5px;
	height: 25px;
	border-radius: 10px;
	outline: none;
	color: var(--blue);
	font-size: inherit;
	font-family: inherit;
}
  
.classsetting:focus{
	border: 2px solid var(--blue);
}

/* tool tips */

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

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -100px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

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

/* Book description */

.book {
	color: rgb(33, 118, 255);
	text-align: left;
	font-size: 12px;
	line-height: 100%;
	border-bottom: none;
}

/* Author public goals description */

.publicauthor {
	color: rgb(33, 118, 255);
	text-align: left;
	font-size: 12px;
	line-height: 100%;
	border-top: none;
}

.publicgoal {
	color: black;
	text-align: left;
	line-height: 100%;
	border-bottom: none;
}

/*Tool menu bar with icons*/

.toolmenu {
	padding: 10px;
	border: solid var(--silverdark) 1px;
	border-radius: 10px;
	background-color: var(--silver);
}

.save {
	width: 30px;
	height: 30px;
	background : url('icons/icons8-save-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	display: inline-block;
}

.save:hover {
	background : url('icons/icons8-save-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.savestay {
	width: 30px;
	height: 30px;
	background : url('icons/icons8-edit-file-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	display: inline-block;
}
.savestay:hover {
	background : url('icons/icons8-edit-file-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.book {
	width: 30px;
	height: 30px;
	background : url('icons/icons8-literature-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	display: inline-block;
}
.book:hover {
	background : url('icons/icons8-literature-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.copy {
	width: 30px;
	height: 30px;
	background : url('icons/icons8-copy-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: none;
	display: inline-block;
}
.copy:hover {
	background : url('icons/icons8-copy-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.delete {
	width: 30px;
	height: 30px;
	background : url('icons/icons8-cancel-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: flex;
	float: right;
}
.delete:hover {
	background : url('icons/icons8-cancel-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


/*Icons from icon8.com*/

.star {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-star-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}

.star:hover {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-star-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}

.attendance {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-attendance-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
.attendance:hover {
	background : url('icons/icons8-attendance-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	display: block;
}

.game {
	width: 25px;
	height: 25px;
	background : url('icons8-arcade-cabinet-48.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}

.video {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-video-call-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.video:hover {
	background : url('icons/icons8-video-call-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	vertical-align:middle;
	display: inline-block;
}

.novideo {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-no-video-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.novideo:hover {
	background : url('icons/icons8-no-video-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	vertical-align:middle;
	display: inline-block;
}

.hide {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-hide-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.hide:hover {
	background : url('icons/icons8-hide-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	vertical-align:middle;
	display: inline-block;
}

.visible {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-eye-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.visible:hover {
	background : url('icons/icons8-eye-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	vertical-align:middle;
	display: inline-block;
}

.settings {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-settings-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}
.settings:hover {
	background : url('icons/icons8-settings-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	vertical-align:middle;
	display: inline-block;
}

.literature {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-literature-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
.literature:hover {
	background : url('icons/icons8-literature-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	display: block;
}

.classroom {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-classroom-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.classroom:hover {
	background : url('icons/icons8-classroom-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.uv {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-brochure-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.uv:hover {
	background : url('icons/icons8-brochure-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.happy {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-happy-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.happy:hover {
	background : url('icons/icons8-happy-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
}

.feedbackyes {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-happy-green-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.feedbackyes:hover {
	background : url('icons/icons8-happy-green-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}

.feedbackno {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-sad-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.feedbackno:hover {
	background : url('icons/icons8-sad-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;	
	display: inline-block;
	vertical-align:middle;
}


.task {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-task-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.task:hover {
	background : url('icons/icons8-task-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.task_completed {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-task-completed-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.task_completed:hover {
	background : url('icons/icons8-task-completed-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
	
.cancel {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-cancel-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}
.cancel:hover {
	background : url('icons/icons8-cancel-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}

.cancellation {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-cancel-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.cancellation:hover {
	background : url('icons/icons8-cancel-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.add {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-add-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.add:hover {
	background : url('icons/icons8-add-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}

.sort {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-sort-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}
.sort:hover {
	background : url('icons/icons8-sort-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}

.progression {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-account-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.progression:hover {
	background : url('icons/icons8-account-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.correct {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-test-passed-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.correct:hover {
	background : url('icons/icons8-test-passed-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.timer {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-timer-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.timer:hover {
	background : url('icons/icons8-timer-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.sigma {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-sigma-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.sigma:hover {
	background : url('icons/icons8-sigma-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.calender {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-calendar-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.calender:hover {
	background : url('icons/icons8-calendar-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.name {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-tag-window-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.name:hover {
	background : url('icons/icons8-tag-window-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.pratice {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-track-and-field-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.pratice:hover {
	background : url('icons/icons8-track-and-field-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tasks {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-tasks-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.tasks:hover {
	background : url('icons/icons8-tasks-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.start {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-start-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}
.start:hover {
	background : url('icons/icons8-start-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: block;
}

.lock {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-lock-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.lock:hover {
	background : url('icons/icons8-lock-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.unlock {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-padlock-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.unlock:hover {
	background : url('icons/icons8-padlock-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ip {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-web-address-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.ip:hover {
	background : url('icons/icons8-web-address-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.substitute {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-player-change-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.substitute:hover {
	background : url('icons/icons8-player-change-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.folder {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-folder-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.folder:hover {
	background : url('icons/icons8-folder-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.create {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-create-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 10px;
}
.create:hover {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-create-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.edit {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-edit-file-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}
.edit:hover {
	width: 25px;
	height: 25px;
	background : url('icons/icons8-edit-file-filled-50.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}

.logout {
	background : url('icons/icons8-export-50.png');
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}

.logout:hover {
	background : url('icons/icons8-export-filled-50.png');
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}

.flowprotocol {
	background : url('icons/icons8-stack-overflow-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 10px;
}
.flowprotocol:hover {
	background : url('icons/icons8-stack-overflow-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.stats {
	background : url('../icons8-data-sheet-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 10px;
}
.stats:hover {
	background : url('../icons8-data-sheet-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.menu {
	background : url('icons/icons8-menu-rounded-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin:15px 10px 10px 205px;
}

.menu:hover {
	background : url('icons/icons8-menu-rounded-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


.pdf {
	background : url('icons/icons8-pdf-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-top: 10px;
}

.pdf:hover {
	background : url('icons/icons8-pdf-filled-50.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.on {
	display: inline-block;
	background : url('icons/icons8-toggle-on-30.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}

.off {
	display: inline-block;
	background : url('icons/icons8-toggle-off-30.png');
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	vertical-align:middle;
}

.draganddrop {
	background : url('icons/icons8-drag-reorder-filled-50.png');
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	vertical-align:middle;
	display: inline-block;
}