Darklearning.user.css

/* ==UserStyle==
@name			Darklearning
@namespace		https://github.com/RiedleroD/userstyles-riedler
@version		1.4.0
@description	Darker version of Elearning
@author			Riedler
@license		MPL-2.0
@homepageURL	https://github.com/RiedleroD/userstyles-riedler
@updateURL		https://github.com/RiedleroD/userstyles-riedler/raw/master/Darklearning.user.css
@preprocessor	stylus
@var	select	FI		"Focus Indicator"{
	"Clamps":"C",
	"Braces":"B",
	"Underbelly":"U",
	"Flat":"F",
	"Round":"R",
	"Encased":"E"
}
@var	select	PBCS	"ProgressBarCell Shape"{
	"Pronounced":"pron",
	"Teardrop":"tear",
	"Round":"rnd",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Rectangle":"rect",
	"Modifier debug":"debug_mod"
}
@var	select	PBCSm "ProgressBarCell Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	select	NBCS	"Course Navbar Cell Shape"{
	"Rectangle":"rect",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Round":"rnd",
	"Teardrop":"tear",
	"Pronounced":"pron",
	"Modifier debug":"debug_mod"
}
@var	select	NBCSm "Course Navbar Cell Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	select	NBS		"Course Navbar Shape"{
	"Rectangle":"rect",
	"Soft Edges":"sft",
	"Rounded":"rndd",
	"Round":"rnd",
	"Teardrop":"tear",
	"Pronounced":"pron",
	"Modifier debug":"debug_mod"
}
@var	select	NBSm "Course Navbar Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	checkbox	anon	"Anonymity (for screenshots)" 0
@var	select	EICC	"Embedded Image Color Correction"{
	"Recommended":"invert(0.86) hue-rotate(180deg)",
	"Full":"invert(1) hue-rotate(180deg)",
	"Dim":"brightness(0.8)",
	"Debug":"invert(1) hue-rotate(180deg) saturate(100)",
	"Off":"none"}
==/UserStyle== */

//color variables
bg0  = #000
bg1	 = #151515
bg2	 = #222
bg2_5= #252525
bg3	 = #333
bg3_5= #383838
bg4	 = #444
bg5	 = #555
bg6	 = #666
slc	 = #000
brd	 = #888
hbrd = #AAA
dtxt = #151515
txt	 = #AAA
htxt = #CCC
hhtxt= #FFF
mtxt = #899
lnk	 = #418BA4
hlnk = #6AC
btn	 = #418BA4
hbtn = #6AC
tru	 = #262
htru = #6C6
fals = #822
hfals= #F55
idk  = #A50
hidk = #FA0
cal0 = #533
cal1 = #535
cal2 = #553
cal3 = #555
cal4 = #353
pb	 = #669
c0	 = #66A
c1	 = #3C3
c2	 = #CC3
c3	 = #C33
c4   = #C73

irad = 0.3rem //input border radius
crad = 0.5rem //card border radius


svg_select_arrs="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1'%3E%3Cpath fill='"+rgba(txt,0.999)+"' stroke='"+rgba(txt,0.999)+"' d='M8 1 2 6h12zM2 10H14L8 15z'/%3E%3C/svg%3E"

barshape_base(name){
	if name=="pron"{
		return (0.5em) (0.5em) (1em) (1em)
	}else if name=="tear"{
		return (0) (0.5em) (0.5em) (0.5em)
	}else if name=="rnd"{
		return (1em) (1em) (1em) (1em)
	}else if name=="rndd"{
		return (0.5em) (0.5em) (0.5em) (0.5em)
	}else if name=="sft"{
		return (0.25em) (0.25em) (0.25em) (0.25em)
	}else if name=="rect"{
		return (0) (0) (0) (0)
	}else if name=="debug_mod"{
		return (0) (0.5em) (1em) (0.25em)
	}else{
		return (100%) (100%) (100%) (100%)
	}
}
barshape(name,mod){
	shape=barshape_base(name)
	if mod=="normal"{
		return (shape[0]) (shape[1]) (shape[2]) (shape[3])
	}else if mod=="hflip"{
		return (shape[3]) (shape[2]) (shape[1]) (shape[0])
	}else if mod=="vflip"{
		return (shape[1]) (shape[0]) (shape[3]) (shape[2])
	}else if mod=="rflip"{
		return (shape[0]) (shape[2]) (shape[1]) (shape[3])
	}else if mod=="lflip"{
		return (shape[3]) (shape[1]) (shape[2]) (shape[0])
	}else if mod=="tflip"{
		return (shape[1]) (shape[0]) (shape[2]) (shape[3])
	}else if mod=="bflip"{
		return (shape[0]) (shape[1]) (shape[3]) (shape[2])
	}else if mod=="r90"{
		return (shape[3]) (shape[0]) (shape[1]) (shape[2])
	}else if mod=="r180"{
		return (shape[2]) (shape[3]) (shape[0]) (shape[1])
	}else if mod=="r270"{
		return (shape[1]) (shape[2]) (shape[3]) (shape[0])
	}else{
		return (100%) (0) (100%) (0)
	}
}
lbarshape(name,mod){
	shape=barshape(name,mod)
	return (shape[0]) (0) (0) (shape[3])
}
rbarshape(name,mod){
	shape=barshape(name,mod)
	return (0) (shape[1]) (shape[2]) (0)
}
tbarshape(name,mod){
	shape=barshape(name,mod)
	return (shape[0]) (shape[1]) (0) (0)
}
bbarshape(name,mod){
	shape=barshape(name,mod)
	return (0) (0) (shape[2]) (shape[3])
}

urlenc(x){
	x=''+x//in case it's not a string, it is now.
	x=replace('%','%25',x)
	x=replace(' ','%20',x)
	x=replace('"','%22',x)
	x=replace('#','%23',x)
	x=replace('\$','%24',x)
	x=replace('&','%26',x)
	x=replace('\/','%2F',x)
	x=replace('<','%3C',x)
	x=replace('>','%3E',x)
	x=replace('=','%3F',x)
	return x
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at(?!\\/archiv).*"), regexp("https?:\\/\\/moodle\\.necode\\.it(?!\\/archiv).*"){
	/*text selections*/
	::-moz-selection{/*for firefox and derivatives*/
		background:slc;
		color:htxt;
	}
	::selection{/*for most other browsers that support this*/
		background:slc;
		color:htxt;
	}
	/*scrollbars*/
	::-webkit-scrollbar,
	#page.drawers::-webkit-scrollbar{//scrollbars in chrome and safari
		&,
		&-track-piece{
			background-color:bg1 !important;
		}
		&-corner,
		&-thumb{
			background-color:bg3 !important;
			border-radius:0.4em;
			border:none;
		}
	}
	:root,
	#page.drawers{//actual standardized way, but ofc only Firefox implements it
		scrollbar-width:auto;
		scrollbar-color:bg3 bg1;
	}
	.visual-scroll-x,//so far only found in the quiz, but there's no telling if it's used in other places as well, so-
	.visual-scroll-y,{
		scrollbar-color:bg3 bg1 !important;
		&::-webkit-scrollbar-thumb{
			border:solid 1px bg0;
		}
		&::-webkit-scrollbar-track{
			border:none;
		}
	}
	/*animations*/
	@keyframes bg-pulse-grey{
		0%{background-color:brd}
		50%{background-color:hbrd}
		80%{background-color:hhbrd}
		100%{background-color:brd}
	}
	/*body*/
	:root,body,#page{
		background-color:bg1 !important;
		color-scheme:dark;
		color:txt;
	}
	#page.drawers .main-inner{
		border-radius:crad;
		overflow:visible;
		background-color:bg2;
	}
	#region-main{
		background-color:#0000;//nothing to see here
	}
	/*navbar*/
	.navbar{
		background-color:bg2 !important;
		border-radius:0 0 0.5em 0.5em;
	}
	.navbar.fixed-top{
		border-bottom:solid 1px bg1;
		& .navbar-brand .logo{
			filter:invert(0.86) hue-rotate(180deg);
		}
		& .divider{
			background-color:brd;
			border-left-color:brd !important;
		}
	}
	.primary-navigation .navigation .nav-link{
		color:lnk;
	}
	.navbar-light .navbar-nav{
		& .nav-link{
			color:lnk;
			&:hover,&:focus{
				color:hlnk;
			}
		}
		&:is(.show,.active) > .nav-link,
		& .nav-link:is(.show,.active){
			color:dtxt;
		}
	}
	.moremenu,
	.dropdownmoremenu {
		& .nav-link{
			&:hover,&:focus{
				background-color:bg3;
			}
			&.active{
				background-color:btn;
				color:dtxt;
				border-bottom:none;
				&:hover,&:focus{
					background-color:hlnk;
				}
			}
		}
		& .nav-tabs{
			background-color:#0000;
		}
	}
	/*secondary navbar*/
	.nav-tabs {
		border: none;
		background-color: bg3;
		border-radius:barshape(NBS,NBSm);
		padding:0.25em;
		.nav-link {
				border-radius: barshape(NBCS,NBCSm);
				margin-right: 0.15em;
				border: none;
				height:100%;
				padding:.33rem .75rem;
		}
		.nav-link:hover {
			background-color: bg4;
		}
		.nav-link.active,
		.nav-item.show .nav-link {
			background-color: btn;
			color: dtxt;
			outline: none;
		}
		&.active:not(.active_tree_node) {
			cursor:default;
			pointer-events:none;
		}
	}
	.secondary-navigation .navigation{
		border-top:none;
		border-bottom:none;
		height:auto;
		background-color:bg3;
		border-radius:barshape(NBS,NBSm);
		& .nav-tabs {
			& .nav-link {
				border-radius: barshape(NBCS,NBCSm);
			}
			& .nav-link:active,
			& .nav-link.active,
 			& .nav-item.show .nav-link {
				background-color: btn;
				color: dtxt;
				border-color: btn;
			}
		}
	}
	/*dropdown-menu*/
	.dropdown{
		&-menu{
			background-color:bg3;
			color:txt;
		}
		&-divider{
			border-top-color:brd;
		}
		&-item{
			&,
			&:focus{
				background-color:#0000;
				color:lnk;
			}
			&:hover{
				background-color:bg4;
				color:hlnk;
			}
		}
		&-header{
			color:txt;
		}
	}
	/*notification drawer*/
	.popover-region{
		&-container{
			background-color:bg3;
			border-color:brd;
			border-radius:irad;}
		&-toggle{
			&::after{
				border-bottom-color:bg3;
			}
			&::before{
				border-bottom-color:brd;
			}
		}
		&-header-container{
			border-bottom-color:brd;
		}
		&-footer-container{
			background-color:bg3;
			border-top-color:brd;
			border-radius:0 0 irad irad;
		}
	}
	.content-item-container{
		border-bottom-color:brd;
		color:txt;
		&:hover{
			background-color:bg4;
			color:htxt;}
		&.unread{
			background-color:bg4;}
		&.unread:hover{
			background-color:bg5;}
		& .content-item-footer .timestamp{
			color:txt;}
	}
	/*message drawer*/
	.message-app{
		background-color:bg2 !important;
		& .input-group{
			&>input,
			&-text{
				background-color:bg3 !important;
				border-color:brd;
				color:brd;
			}
			& .btn{
				border-color:brd;
			}
		}
		& .form-control:focus{
			color:txt;}
		& .card{
			background-color:bg2;}
		& .border-bottom{
			border-color:brd !important;}
		& .card.expanded .list-group .list-group-item{
			background-color:bg3;}
		&>.header-container>.bg-white{
			background-color:bg3 !important;}
		& .message{
			&.send{
				color:txt;
				background-color:bg5 !important;
			}
			&.received{
				color:txt;
				background-color:bg4 !important;
				& .tail{
					border-bottom-color:bg4;
				}
			}
			&.send .tail{
				border-bottom-color:bg5;
			}
			&:is(.send,/.received) .time{
				color:mtxt;
			}
		}
		& .nav-pills{
			border:solid brd 1px;
			&>.nav-item>a{
				&:not(.active){
					background-color:bg3;}
				&.active{
					background-color:bg4;}
			}
		}
		& .no-gutters{
		outline:solid 1px bg3;}
		& .content-message-container>div[data-region="self-conversation-message-container"]{
			background-color:bg4 !important;}
		&>div>div>div{
			outline:solid 1px bg3;}
		& .col-8>.footer-container>.bg-white{
			background-color:bg3 !important;
			border:none !important;}
		& button.btn-icon.btn-link{
			&:hover,
			&:focus{
				background-color:bg5 !important;
			}
		}
		& textarea.form-control{
			background-color:bg4 !important;
			border:none;
		}
		& .header-container>.bg-white{
			background-color:bg3 !important;
			border-color:bg3 !important;
		}
		& .body-container{
			& div[data-region="settings"]{
				background-color:bg2;
			}
			&>div.h-100.bg-white{
				background-color:bg2 !important;
			}
		}
		&>.footer-container>.bg-white{
			background-color:bg2 !important;
			border-color:brd !important;
		}
		&>.closewidget{
			background-color:bg3 !important;
			&>a{
				color:txt !important;
			}
		}
		& [data-region="contacts-container"]{
			background-color:bg3;}
		& [data-region="non-contacts-container"]{
			background-color:bg3;
			border-top-color:brd !important;}
		& div[data-region="all-contacts-container"] .text-right{
			background-color:bg3;
			border-top: solid 1px brd;
			&:hover{
				background-color:bg5;
			}
		}
		& div[data-region="confirm-dialogue"]{
			background-color:bg3 !important;
			border:solid 1px brd;
			border-radius:crad;
			& .btn-primary{
				&>span{
					color:htxt !important;
				}
				&:hover>span{
					color:hhtxt !important;
				}
			}
		}
	}
	/* generic color stuff */
	.bg-secondary{
		background-color:bg3 !important;
		/:is(a,button)&:is(:hover,/:focus){
			background-color:bg4 !important;
		}
	}
	.bg-danger {
		background-color: rgba(fals,0.5) !important;
	}
	.bg-warning {
		background-color: rgba(idk,0.5) !important;
		&.text-dark {
			color: txt !important;
		}
	}
	/* other stuff */
	.border{
		border-color:brd !important;
	}
	.list-group-item{
		background:bg3;
		border-color:brd;
		&-action{
			color:txt;
			&:hover,&:focus{
				background-color:bg4;
				color:htxt;
			}
		}
	}
	#conversation-actions-menu-button{
		color:brd;
		&:hover{
			background-color:bg5;
		}
		&:focus{
			background-color:bg6;
		}
	}
	.custom-control{
		&-label{
			cursor:pointer;
			&::before{
				background-color:brd;
			}
		}
		&-input{
			&:checked~^[0]-label::before{
				background-color:btn !important;
				border-color:btn !important;
				color:htxt;
				cursor:pointer;
			}
			&:not(:checked)~^[0]-label::before{
				background-color:bg3 !important;
				border-color:brd;
				cursor:pointer;
			}
		}
		.custom-switch &-input{
			&:checked~^[0]-label::after{
				background-color:htxt;
				cursor:pointer;
			}
			&:not(:checked)~^[0]-label::after{
				background-color:brd;
				cursor:pointer;
			}
		}
		.custom-radio &-input:checked~&-label::after{
			background-image:radial-gradient(ellipse at center,htxt 0%,htxt 75%,#0000 75%);
			border-radius:100%;
		}
	}
	.custom-select{
		color:txt;
		border-color:brd;
		border-radius:irad;
		background-color:bg3;
		background-image:url(svg_select_arrs);
		background-repeat:no-repeat;
		background-size:0.75em;
		cursor:pointer;
		&:disabled{
			color:txt;
			background-color:bg3;
			background-image:none;
			&:hover{
				color:txt;
				background-color:bg3;
			}
		}
		&:hover,
		&:focus{
			background-color:bg3;
			color:txt;
		}
		&:focus{
			border-color:btn;
			box-shadow:0 0 0 .2rem rgba(btn,.25);
		}
	}
	//see -> https://elearning.tgm.ac.at/user/index.php?id=5503
	.form-autocomplete-suggestions{
		background-color:bg1;
		border-color:brd;
		& li{
			color:txt;
			&:hover,&:focus,
			&[aria-selected="true"]{
				background-color:btn;
				color:htxt;
			}
			&[aria-selected="true"]{
				box-shadow:0 0 0 0.2rem rgba(btn,0.33);
			}
		}
	}
	.form-autocomplete-downarrow{
		color:txt;
		.form-control:hover+&{
			color:htxt;
		}
	}
	.switch input{
		&+label::before{
			background-color:brd;
		}
		&:checked + label::before{
			background-color:btn;
		}
	}
	/*footer*/
	#page-footer{
		color:txt !important;
		background-color:bg2 !important;
		border-top-left-radius:0.5em;
		border-top-right-radius:0.5em;
		& a{
			color:lnk;
			&:hover,
			&:focus{
				color:hlnk;
			}
			& .icon{
				color:txt;
			}
		}
		
		>.footer-content-debugging {
			color: txt !important;
			background-color: #0000 !important;
			
			.table-responsive {
				width: fit-content;
				
				>table {
					display: grid;
					border: solid 1px brd;
					gap: 1px;

					tr,
					thead,
					tbody {
						display: contents;
					}
					td, th {
						border: none;
						outline: solid 1px brd;
					}
					thead>tr:first-of-type,
					>tr:first-of-type {
						>td,
						>th {
							grid-row: 1;
						}
					}
					.bg-danger {
						outline-color: hfals;
						z-index: 1;
					}
					.bg-warning {
						outline-color: hidk;
						z-index: 1;
					}
				}
			}
		}
	}
	/*sideblocks*/
	.block{
		&.card{
			background-color:bg2;
		}
		&-timeline{
			& .list-group-item{
				background-color:#0000;
				&-action{
					color:txt;
					&:hover,
					&:focus,
					&:active{
						color:htxt;
						background-color:#0000;
					}
				}
			}
			& .event-name{
				color:lnk;
				font-weight:500;
				&:hover{
					color:hlnk;
				}
			}
			&>.border-bottom,
			& [data-region="event-list-content"]>[data-region="paged-content-container"]>[data-region="page-container"]>[data-region="paged-content-page"]>.border-bottom{
				border-bottom:none !important;
			}
			& [data-region="event-list-container"]>div>img{
				filter:invert(1) brightness(1.3);
			}
		}
		&_recentlyaccesseditems{
			& [data-region="recentlyaccesseditems-view-content"]>div>img{
				filter:invert(1) brightness(1.3);
			}
		}
		&_navigation,
		&_settings{
			& .block_tree{
				& .tree_item.branch,
				& ul,
				& p.hasicon{
					padding-left:0;
					margin-left:0;
				}
			}
		}
		& .block-cards{
			& a.coursename{
				color:lnk;
				&:hover,
				&:focus{
					color:hlnk;
				}
			}
			& span.categoryname{
				color:txt;
			}
			& .btn-link{
				color:txt;
				
			}
			& .btn.btn-link.btn-icon{
				&:hover,
				&:focus{
					background-color:bg4;
				}
			}
		}
		& .block-controls{
			& .dropdown-toggle{
				color:txt;
			}
		}
	}
	/*text*/
	textarea.form-control{
		background-color:bg5 !important;
		border:solid brd 1px;
		border-radius:irad;
	}
	.text-muted{
		color:mtxt !important;
	}
	.text-primary{
		color:btn !important;
	}
	caption{
		//the original style makes them look muted, but that just seems wrong
		color:htxt;
	}
	/*links*/
	a,
	a>span{
		color:lnk
	}
	a:hover,
	a:focus{
		&,
		&>span{
			color:hlnk;
		}
	}
	.aalink,
	a.autolink,
	#page-footer a:not([class]),
	.arrow_link,
	a:not([class]),
	.activityinstance > a{
		&.focus,
		&:focus{
			color:hlnk;
			if FI=="C"{
				background-color:#0000;
				box-shadow:0 -0.2rem brd,0 0.2rem brd;
				border-radius:0.3em;
			}else if FI=="B"{
				background-color:#0000;
				box-shadow:none
				outline:solid .2rem brd;
				outline-offset:1px;
				clip-path:polygon(
					-.2rem -.2rem,.2rem -.2rem,.2rem 0,calc(100% - .2rem) 0,
					calc(100% - .2rem) -.2rem,calc(100% + .2rem) -.2rem,calc(100% + .2rem) calc(100% + .2rem),
					calc(100% - .2rem) calc(100% + .2rem),calc(100% - .2rem) 100%,
					.2rem 100%,.2rem calc(100% + .2rem),-.2rem calc(100% + .2rem));
			}else if FI=="U"{
				background-color:#0000;
				box-shadow:0 0.2rem 0 brd;
				border-radius:0.3em;
			}else if FI=="F"{
				background-color:bg4;
				box-shadow:0 -.2rem bg4,0 .2rem brd;
			}else if FI=="R"{
				background-color:#0000;
				box-shadow:none;
				outline:solid 1px brd;
				outline-offset:2px;
				border-radius:0.3em;
			}else if FI=="E"{
				background-color:#0000;
				box-shadow:none;
				outline:solid 1px brd;
				outline-offset:2px;
			}
		}
	}
	.stretched-link::after{
		//I have zero idea what this is supposed to do, but it messes with my style, so it gotta go
		display:none;
	}
	/*Text with inline background coloring*/
	span[style*="background-color: rgb(125\, 159\, 211);"]{
		background-color:btn !important;
		color:dtxt !important;}
	span[style*="background-color: rgb(255\, 207\, 53);"],
	span[style*="background-color: rgb(152\, 202\, 62);"]{
		color:#000 !important;}
	span[style*="background-color: white;"]:not([class]){
		background-color:#0000 !important;}
	span[style*="background-color: rgb(239\, 69\, 64);"]{
		background-color:fals !important;}
	span[style*="color: rgb(239\, 69\, 64)"]{
		color:hfals !important;
		&[style*="background-color: rgb(255\, 255\, 255)"]{
			background-color:bg0 !important;
		}
	}
	span>span[style*="background-color: rgb(255\, 255\, 255)"],
    a[style*="background-color: rgb(255\, 255\, 255)"]{
		background-color:bg2 !important;
	}
	span[style*="color: rgb(51\, 51\, 51)"]{
		color:txt !important;
	}
	/*VPL badge*/
	div[style="float:right; right:10px; padding:8px; background-color: white;text-align:center;"]{
		background-color:bg3 !important;
		border-radius:irad;
		box-shadow:0 0 0.2rem 1px #000;
		transition:background-color 0.1s;
		cursor:pointer;
		&:hover{
			background-color:bg4 !important;
			& a{
				color:hlnk !important;
			}
		}
		& a:hover{
			text-decoration:none;
		}
	}
	/*random shit again*/
	.empty-placeholder-image-lg{
		filter:invert(1);
	}
	.dndupload-arrow{
		filter:invert(0.9) hue-rotate(180deg);
	}
	/*seems like a footer in some dialog boxes?*/
	.yui3-skin-sam .yui3-panel .yui3-widget-ft{
		background-color:#0000;
	}
	/*Buttons*/
	.close,
	.moodle-dialogue-base .closebutton{
		&:hover,
		&:focus{
			color:txt;
			opacity:1;
		}
	}
	.btn{
		border-radius:irad;
		color:txt;
		&:hover{
			color:htxt;
		}
		&-outline-secondary{
			border-color:brd;
			&:hover,
			&:focus{
				background-color:bg4;
				border-color:bg6;
				color:htxt;
			}
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
			.show > &.dropdown-toggle{
				background-color:brd;
				&,&>span{
					color:dtxt;
				}
			}
		}
		&-outline-success{
			border-color:tru;
			color:txt;
			&:hover{
				background-color:tru;
				border-color:tru;
				color:htru;
			}
			&:not(:disabled):not(.disabled):active{
				background-color:htru;
				border-color:htru;
				color:dtxt;
			}
		}
		&-success{
			background-color:tru;
			border-color:tru;
			color:htru;
			&:focus,&.focus{
				border-color:htru;
				color:htru;
				background-color:tru;
				box-shadow:none;
			}
			&:hover{
				background-color:htru;
				color:tru;
				border-color:htru;
			}
		}
		&-secondary{
			background-color:#FFF2;
			color:txt;
			border:none;
			&:hover{
				background-color:#FFF4;
				color:htxt;
				border-color:brd;}
			&:focus,
			&.focus{
				box-shadow:inset 0 0.1em 0 0 hbrd;
				outline:solid 1px brd;
				outline-offset:1px;
				background-color:brd;
				color:dtxt;}
			&.disabled,
			&:disabled{
				background-color:bg5;
				color:txt;}
		}
		&-primary{
			color:dtxt !important;
			background-color:btn;
			border:none;
			&:hover,
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
 			.show>&.dropdown-toggle{
				color:dtxt;
				background-color:hbtn;
			}
			&.close:hover>span{//TODO: find out where this is used
				color:hhtxt !important;
			}
			&:focus,
			&.focus{
				outline:none;
				box-shadow:0 0 1em hbtn;
				background-color:hbtn;
				color:dtxt;
			}
			&:focus-visible{
				outline:solid 1px hbtn;
				box-shadow:inset 0 0 0 1px dtxt;
				&:focus{
					box-shadow:inset 0 0 0 1px dtxt,0 0 1em hbtn;
				}
			}
			&:disabled,
			&.disabled{
				background-color:btn;
			}
		}
		&-light{
			color:txt;
			&:hover{
				color:lnk;
			}
			&.focus,
			&:focus{
				color:hlnk;
			}
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
			.show > &.dropdown-toggle{
				color:hlnk;
			}
		}
		
		&.btn-icon {
			&.icons-collapse-expand {
				background-color: bg2;
				color: btn;
				&:hover {
					outline-color: btn;
				}
			}
			&:hover,
			&:focus{
				background-color: bg3;
			}
		}
		&-link{
			color:lnk;
			&:hover{
				color:hlnk;
			}
		}
		&:disabled,
		&.disabled{
			opacity:1;
			filter:grayscale(0.25) brightness(0.75) contrast(0.75);
		}
	}
	.activity-add,
	.block-add{
		background-color:btn;
		color:dtxt;
		border:none;
		&:hover,&:focus{
			color:dtxt;
			background-color:hbtn;
			text-decoration:none;
		}
	}
	//pagination used in recentlyaccessedcourses on dashboard
	.pagination>.page-item{
		& .page-link{
			background-color:bg4;
			border-color:#0000;
			color:htxt;
			&:focus{
				box-shadow:none;
				z-index:0;
				color:lnk;
			}
			&:hover{
				background-color:bg5;
				border-color:brd;
				color:htxt;
				z-index:3;
			}
		}
		&.active,
		&.disabled{
			& .page-link{
				cursor:default;
				background-color:brd;
				&>span{
					color:txt;
				}
			}
		}
	}
	.preference-state-status-container>span{
		&.on-text,
		&.off-text{
			color:bg1 !important;
		}
	}
	.hover-tooltip{
		background-color:bg3 !important;
		border: solid 1px brd !important;
		&::after{
			border-top-color:bg3 !important;
			filter:drop-shadow(0 1px 0 brd);
		}
	}
	#goto-top-link>a.btn{
		background-color:bg3;
		border:none;
		box-shadow:0 0 0.2rem 1px bg0;
		transform:translate(-50%,-100%);
		&:hover{
			background-color:bg4;
		}
		&:focus{
			outline:none;
			box-shadow:0 0 0.2rem 1px lnk;
		}
		&>.icon{
			margin-right:0;
		}
	}
	/*drawer handle buttons*/
	.drawer-toggles .drawer-toggler .btn{
		background-color:bg3;
		&:hover{color:txt}
	}
	/*Dropdown menus*/
	.dropdown-item:active,.dropdown-item.active{
		background-color:bg4;}
	/*Some Settings tables*/
	.preferences-container .preference-table{//https://elearning.tgm.ac.at/message/notificationpreferences.php
		display:grid;
		width:90%;
		margin:0 auto;
		padding:1em 2em;
		grid-template-columns:10fr 1fr 1fr;
		//NOTE: I haven't found any preftables that aren't three columns wide, but they might exist
		border:none;
		background-color:bg3;
		border-radius:crad;
		overflow:clip;
		& thead,
		& tbody,
		& tr{
			display:contents;
		}
		& th,
		& td,
		& tr td:not(:first-child){
			width:auto;
			white-space:nowrap;
			border:none;
		}
		& tr th{
			border-left:none;
		}
		& thead th{
			background-color:bg4;
			margin:-1em -2em 0 -2em;
			padding-top:1.5em;
			border-bottom:solid 1px bg1;
		}
		& tbody th[colspan="3"]{
			grid-column:1/4;
			border-top:solid 1px brd;
		}
		& tbody tr:first-child th[colspan="3"]{
			border-top:none;
		}
		& tr.loading::before{
			display:none;
		}
		& .preference-state.loading{
			&>.custom-control{
				display:none;
			}
			&::before{
				display:inline-block;
				width:1em;
				height:1em;
			}
		}
	}
	/*php-generated code block with colors without classes*/
	div[style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"]{
		background-color:bg0 !important;
		& span[style*="color: #000080"]{
			color:c0 !important;
		}
		& span[style*="color: #008800"]{
			color:c1 !important;
		}
		& span[style*="color: #0000FF"]{
			color:c2 !important;
		}
		& span[style*="color: #FF0000"]{
			color:c3 !important;
		}
	}
	div[style="background-color: #e6e6e6; font-size: 0.75em; padding: 4px;"]{
		background-color:bg3 !important;
	}
	/*tooltips: popups that pop up when you hover over stuff with set tooltips*/
	.tooltip{
		&>&-inner{
			background-color:bg3;
			color:txt;
			border:solid 1px bg0;
			border-radius:0.25em;
			margin-left:-1px;
		}
		&>.arrow::before{
			border-right-color:bg3;
			filter:drop-shadow(-1px 0 0 bg0);
		}
	}
	/*popovers: the same, but with more complex content and a very annoying arrow*/
	.popover{
		background-color:bg1;
		color:txt;
		border:solid 1px bg4;
		border-radius:irad;
		&-header{
			background-color:bg2;
			border-bottom-color:#0000;
			border-radius:0.5em 0.5em 0 0;
			color:htxt !important;
		}
		&-body{
			color:txt;
			border-radius:0.5em;
		}
		& .border-bottom{
			border-bottom-color:bg4 !important;
		}
	}
	.bs-popover{
		//see https://elearning.tgm.ac.at/calendar/view.php?view=month
		&-top>.arrow,
		&-auto[x-placement^="top"]>.arrow{
			&::after{
				border-top-color:bg1;
			}
			&::before{
				border-top-color:bg4;
			}
		}
		//see above link
		&-bottom,
		&-auto[x-placement^="bottom"]{
			& .popover-header::before{
				border-bottom:solid 0.1em bg2;
			}
			&>.arrow::after{
				border-bottom-color:bg2;
			}
			&>.arrow::before{
				border-bottom-color:bg4;
			}
		}
		//see https://elearning.tgm.ac.at/course/view.php?id=5454&section=1
		&-left>.arrow,
		&-auto[x-placement^="left"]>.arrow{
			&::after{
				border-left-color:bg1;
			}
			&::before{
				border-left-color:bg4;
			}
		}
		//TODO: find out where this is used
		&-right>.arrow,
		&-auto[x-placement^="right"]>.arrow{
			&::after{
				border-right-color:bg1;
			}
			&::before{
				border-right-color:bg4;
			}
		}
	}
	/*Manually colored tables*/
	table[bgcolor="grey"]{
		background-color:bg4;
	}
	th[style*="background-color: rgb(146\, 208\, 80)"]{
		background-color:tru !important;
	}
	th[style*="background-color: #fef65b"]{
		background-color:idk !important;
	}
	/*sidedrawer*/
	.drawer{
		background-color:bg2;
	}
	.courseindex .courseindex-item{
		&:hover,
		&:focus,
		&:is(:hover,/:focus) .courseindex-link{
			color:txt;
		}
		.courseindex-chevron span,
		.courseindex-link{
			color:txt;
			&:hover{
				color:htxt;
			}
		}
		& .completioninfo.completion_complete{
			color:tru;
		}
		&.pageitem{
			background-color:btn;
			&>.courseindex-link,
			&>.courseindex-chevron span{color:dtxt}
			&:hover,&:focus{
				background-color:hbtn;
				&>.courseindex-link,
				&>.courseindex-chevron span{color:dtxt}
			}
			& .completioninfo{
				color:dtxt;
			}
		}
	}
	/* Activites */
	.activity {
		border-color: brd;
	}
	.activity-item:not(.activityinline){
		border:none;
	}
	.path-mod .activity-header:not(:empty){
		background-color:bg3;
		border-radius:0.5em;
	}
	.path-mod .activity-information .completion-info,
	.path-mod .activity-information .activity-dates{
		border-bottom-color:brd;
	}
	/*Activity icon button thingies*/
	.activityiconcontainer{
		background-color:bg3;
		&.content{
			background-color:c0;
			--f:invert(.9);
			--mbm:overlay;
		}
		&.communication{
			background-color:c1;
			--f:invert(.5);
			--mbm:multiply;
		}
		&.collaboration{
			background-color:c3;
			--f:invert(0.4);
			--mbm:multiply;
		}
		&.assessment{
			background-color:c4;
			--f:invert(.85);
			--mbm:overlay;
		}
		&>img:is(.activityicon,/.icon){
			mix-blend-mode:var(--mbm);
			filter:var(--f) !important;
		}
		&.modicon_studentquiz{
			//the original image is kinda bad ngl
			--f:invert(1) hue-rotate(180deg) saturate(1.5) brightness(0.85);
		}
	}
	/*Misc*/
	.otherstudent.highlight{
		outline:none;
		color:htxt;
	}
	.resourcelinkdetails{
		color:txt;
		filter:brightness(0.8);
	}
	#action-menu-toggle-0:hover .usertext{
		color:hlnk !important;//TODO: fix this mess by removing the catch-all text colorator
	}
	.userinitials{
		background-color:txt;
		color:dtxt;
		/#user-menu-toggle:hover &{background-color:htxt}
	}
	if(anon==1){
		.userinitials{
			font-size:0 !important;
			&::after{
				font-size:1rem;
				content:"AN";
			}
			&.size-100::after{
				font-size:1.875rem;
			}
		}
	}
	.mform fieldset{
		border-bottom-color:brd;
	}
	.matchtext{
		background-color:hbtn !important;
		color:bg3 !important;}
	.card{
		border-radius:crad;
		background-color:bg3;
		border:none;
		&-img{
			filter:EICC;}
		&-footer{
			background-color:bg3 !important;
		}
		&.rounded{
			border-radius:crad !important;
			& .card-header{
				border-radius:crad crad 0 0;
			}
			& .card-footer{
				border-radius:0 0 crad crad;
			}
		}
	}
	.alert{
		color:txt;
		&,//I hate moodle sometimes
		&-danger,
		&-info,
		&-success{
			border-radius:crad;
			& a:link,
			& a:visited{
				color:lnk;
				&:hover{color:hlnk}
			}
		}
		&-danger{
			border:solid 1px hfals;
			background-color:rgba(fals,0.5);
			color:hfals;
		}
		&-warning{
			border:solid 1px hidk;
			background-color:rgba(idk,0.5);
		}
		&-info{
			border:solid 1px pb;
			background-color:rgba(pb,0.5);
		}
		&-success{
			border:solid 1px htru;
			background-color:rgba(tru,0.5);
			color:htru;
		}
		&-secondary{
			border:solid 1px brd;
			background-color:rgba(brd,0.5);
			color:htxt;
		}
		&>.close{
			color:inherit;
		}
	}
	#page-mod-quiz-attempt #connection{
		&-error{
			background-color:fals;
			color:txt;
		}
		&-ok{
			background-color:tru;
			color:txt;
		}
	}
	.close,
	.moodle-dialogue-base .closebutton{
		text-shadow:none;
		opacity:1;
		color:txt;
		filter:none;
		transition:filter 0.2s;
		&:not(:disabled):not(.disabled):hover,
		&:not(:disabled):not(.disabled):focus{
			opacity:1;
			filter:drop-shadow(0 0 0.1em #000);
		}
	}
	.yui3-button{
		background-image:none;}
	div.comment-area textarea{
		background-color:bg3;
		border:solid 1px brd;
		border-radius:irad;
		padding:0.25em;
		line-height:100%;
		color:txt !important;}
	ul.comment-list>li{
		background-color:bg3 !important;
		border-radius:irad;
		& .text_to_html{
			color:txt;
		}
	}
	.comment-delete>a{
		&>i{
			color:fals;
			filter:brightness(1.5);
		}
		&:hover>i{
			color:fals;
			filter:brightness(2);}
	}
	#coursesearchbox{
		background-color:bg3;
		border-color:brd;
		color:txt;
	}
	.table,
	table.collection,
	table.flexible,
	.generaltable{
		& th,
		& td,
		& thead th{
			border-color:brd;
			color:txt;
		}
	}
	.table-dark {
		background-color: bg2;
	}
	.generaltable tbody tr{
		&:hover{
			color:txt;
			background-color:#0000;
		}
		&:nth-of-type(2n+1){
			background-color:#0000;
		}
		&:nth-of-type(2n){
			background-color:rgba(#FFF, 0.02);
		}
	}
	.yui3-datatable{
		& .yui3-datatable-header{
			background-color:bg3 !important;
			text-shadow:none;
			color:txt !important;
			border-bottom:solid 1px brd;
		}
		& .yui3-datatable-cell,
		& .yui3-datatable-header{
			border-left-color:brd;
		}
		& .yui3-datatable-sort-liner{
			display:flex;
			align-items:space-between;
			padding-right:1em;
			& .yui3-datatable-sort-indicator{
				background-image:url(svg_select_arrs);
				background-position:center right;
				background-size:100%;
				width:0.8em;
				height:0.8em;
			}
		}
		& .yui3-datatable-data>tr>td{
			background-color:bg3 !important;
		}
	}
	#id_comments{
		color:txt;
	}
	input[type="checkbox"]{
		appearance:none;
		min-width:1em;
		max-width:1em;
		min-height:1em;
		max-height:1em;
		border:0.12em solid hbrd;
		border-radius:irad;
		color:txt;
		&:checked:after{
			content:"";
			position:absolute;
			font: var(--fa-font-solid);
			font-size:85%;
		}
	}
	input[type="radio"]{
		appearance:none;
		min-width:1em;
		max-width:1em;
		min-height:1em;
		max-height:1em;
		background-image:radial-gradient(#0000 50%,hbrd 60%,#0000 70%);
		background-size:1em 1em;
		&:checked{
			background-image:radial-gradient(hbrd 30%, #0000 40%,#0000 50%,hbrd 60%,#0000 70%);
		}
	}
	input[type="file"]{
		cursor:pointer;/*not default for some reason?*/
		&::-webkit-file-upload-button{
			background-color:bg4;
			color:txt;
			border:none;
			border-radius:irad;
			cursor:pointer;
			&:hover{
				background-color:bg5;
				color:txt;
			}
		}
	}
	@supports (-moz-appearance:none){/*firefox-specific hack*/
		input[type="file"]{
			color:dtxt;
			filter:invert(0.8);}
	}
	.form-control{
		border-radius:irad;
		background-color:bg3;
		border-color:brd;
		color:txt;
		&:disabled,
		&[readonly],
		&[readonly]:hover{
			background-color:brd;
			color:dtxt;
			cursor:not-allowed;
		}
		&:hover,
		&:focus{
			background-color:bg4;
			color:txt;
		}
		&:focus{
			border-color:btn;
			box-shadow:0 0 0 .2rem rgba(btn,.25);
		}
		select&{
			appearance:none;
			background-image:url(svg_select_arrs);
			background-repeat:no-repeat;
			background-position:right center;
			background-origin:content-box;
			background-size:0.75rem;
			padding-right:0.25rem;
		}
	}
	.input-group{
		&>.form-control{
			&,
			&.border-right-0{
				border-radius:irad 0 0 irad;
			}
			&.border-left-0{
				border-radius:0 irad irad 0;
				&.border-right-0{
					border-radius:0;
				}
			}
		}
		&-prepend>span{
			border-radius:irad 0 0 irad;
		}
		&-append{
			border-radius:0 irad irad 0;
			overflow:hidden;
			&>.btn-primary{
				border:none;
				border-radius:0;
			}
		}
	}
	.border-bottom{
		border-bottom-color:brd !important;}
	.forumpost{
		border-color:brd;
		border-radius:crad;
	}
	/*codeblocks*/
	:not(pre)>code{
		color:txt;
		background-color:bg1;
		outline:solid 2px bg0;
		font-family:Monospace;
		font-size:1.08em;
		padding:0 0.1em;
	}
	pre{
		color:txt;
		background-color:bg1;
		border:solid 2px bg0;
	}
	.highlight{
		outline:solid 1px hlnk;}
	#qrcode>img{
		filter:none;
		background-color:#FFF;
		padding:4px;
	}
	/*Editor Atto*/
	div.editor_atto{
		& .icon{
			//TODO: check if this is even used outside the toolbar
			filter:invert(1) hue-rotate(180deg);
		}
		&_content{
			background-color:bg2 !important;
			border:none !important;
			border-bottom-left-radius:0.5em;
			border-bottom-right-radius:0.5em;
			resize:none;
			&_wrap{
				border-color:brd !important;
				border:solid 1px;
				border-top:none;
				color:txt;
				background-color:bg3;
				border-bottom-left-radius:0.5em;
				border-bottom-right-radius:0.5em;
			}
		}
		&_toolbar{
			background-color:bg2 !important;
			border-color:brd !important;
			border-top-left-radius:0.5em;
			border-top-right-radius:0.5em;
			& div.atto_group{
				overflow:clip;
			}
			& button{
				&:active,
				&.highlight{
					background-image:none;
					background-color:bg4;
					& .icon::before{
						color:htxt;
					}
				}
				&:hover{
					background-image:none;
					background-color:bg4;
					& .icon::before{
						color:htxt;
					}
				}
				&[disabled]{
					opacity:1;
					background-color:brd;
					& .icon::before{
						color:dtxt;
					}
				}
				& .icon {
					filter:none;
					color:txt;
				}
				&.atto_h5p_button>img {
					filter: invert(.65);
				}
				& + button{
					border-left-color:brd;
				}
			}
		}
		&_notification .atto_{//TODO get url for this
			&info,
			&warning{
				border-radius:0.5em;
				border-top-right-radius:0;
				border:solid 1px brd;
				margin-top:-1px;
			}
			&warning{
				background-color:fals;
			}
			&info{
				background-color:bg3;
			}
		}
	}
	.atto_group{
		background-color:bg3 !important;
		border:none !important;
		&>button{
			border-color:brd !important;
		}
	}
	/*Filemanager*/
	.filemanager{
		& .fp-navbar{
			background-color:bg3;
			border-radius:crad crad 0 0;
			border:none;
			border-bottom:solid 1px brd;
		}
		& &-container{
			background-color:bg3;
			border-radius: 0 0 crad crad;
			border:none !important;
		}
		& .yui3-datatable{
			&-header{
				border-bottom-color:brd !important;
			}
			&-even,
			&-odd{
				& .yui3-datatable-cell{
					background-color:bg2 !important;
					border-left-color:bg2 !important;
				}
			}
		}
		& .btn{
			background-color:bg5;
			color:lnk;
			&:hover{
				background-color:bg6;
				color:hlnk;
			}
			&:active{
				background-color:brd !important;
				color:hlnk;
			}
			&>.icon{
				vertical-align:middle;
			}
		}
		.moodle-dialogue & .fp-thumbnail{
			border:none;
			min-width:112px;
			background-color:#0000;
		}
		& .fp-content:focus{
			outline:none;
		}
		& .fp-treeview .fp-folder>tbody>tr>td{
			background-color:bg3;
		}
		& .fp-pathbar .fp-path-folder{
			background:none;
			&::before{
				display:inline-block;
				width:0;
				content:"";
				font:normal normal normal 14px/1 FontAwesome;
			}
		}
	}
	.filepicker{
		& .fp-navbar{
			border:solid 1px brd;
			border-bottom:none;
			border-bottom-left-radius:0;
			border-bottom-right-radius:0;
			padding-bottom:0;
		}
		& .fp-content{
			background-color:#0000;
			border:solid 1px brd;
			border-top:none;
			border-top-left-radius:0;
			border-top-right-radius:0;
			height:initial;
			padding-bottom:1em;
		}
		& .moodle-dialogue-bd{
			min-height:20vh;
			max-height:80vh;
			padding-bottom:1em;
			overflow-y:auto;
			& .file-picker{
				margin-bottom:1em;
			}
		}
	}
	.filepicker,
	.file-picker,
	.filemanager{
		& .fp-viewbar{ // TODO: was this just the sidebar?
			background-color:bg5;
			border-radius:irad;
			overflow:hidden;
			&>.btn{
				background-color:bg5;
				border-radius:0;
				color:lnk;
				&:focus{
					outline:none;
					box-shadow:none;
					outline-offset:0;
					color:hlnk;
				}
				&:hover{
					color:hlnk;
					background-color:bg6;
				}
				&.checked{
					background-color:btn;
					&>.icon{
						color:hlnk;
					}
				}
			}
			&:not(.disabled) a.checked{
				color:hlnk;
			}
		}
		
		& .fp-info .fp-thumbnail{
			border-radius:irad;
			box-shadow:0 0 0.5em bg0;
		}
		& .fp-thumbnail{
			border:none;
			min-width:112px;
			background-color:#0000;
			border-bottom:none;
			&>img{
				border:none;
			}
		}
		& .fp-iconview .fp-file{
			box-shadow:0 0 0.5em bg0;
			border-radius:irad irad 0 0;
			&name{
				background-color:bg3;
				border-top:none;
				border-radius: 0 0 irad irad;
				padding:0 0.1em 0.1em 0.1em;
				box-shadow:0 0 0.5em bg0;
				margin-bottom:0.5em;
				&-field{
					padding-left:1em;
					margin-left:-1em;
					padding-right:1em;
					margin-top:-3px;
					margin-right:-1em;
				}
			}
			&:hover .fp-filename-field{
				overflow:hidden;
				height:auto;
			}
		}
	}
	.fp-repo.nav-item.active>.nav-link {
		background-color: btn;
		& > span {
			color: dtxt;
		}
	}
	.dndupload-target{
		background-color:bg3 !important;}
	/*ace editor*/
	.ace-tm{
		background-color:bg0;
		color:txt;
		& .ace_gutter{
			background-color:bg2;
			color:txt;
			&-active-line{
				background-color:bg3;
				color:htxt;
			}
		}
		& .ace_marker-layer .ace_active-line{
			background-color:#FFF1;
		}
		& .ace_print-margin{
			background-color:brd;
		}
		& .ace_cursor{
			color:htxt;
		}
		& .ace_indent-guide{
			background-image:none;
			border-right:solid 1px brd;
		}
	}
	.ui_wrapper[style*="border: 1px solid darkgrey"]{
		border-color:brd !important;}
	/*Coderunner*/
	coderunner{//TODO - seems to only partially work
		.que.& div{
			&.^[0]-test-results.bad,
			&.pre_syntax_error,
			&.pre_question_error{
				background-color:fals;
				&.precheck{
					background:repeating-linear-gradient(0deg,rgba(hfals,0.5),rgba(fals,0.5) 8px,rgba(fals,0.5) 8px,rgba(hfals,0.5) 16px)
				}
			}
			&.^[0]-test-results{
				color:txt;
			}
		}
		.que.& tr{
			&.r0 td,
			&.r1 td{
				background-color:bg3;
			}
		}
		#page-question-type-&,
		.que.&{
			& table.^[0]-test-results,
			& table.^[0]examples{
				& th,
				& td{
					border-color:brd;
				}
				& .header{
					background-color:bg4;
				}
			}
			& div.^[0]-test-results.good,
			& tr.^[0]-failed-test.fixed{
				background-color:tru;
				&.precheck{
					background:repeating-linear-gradient(0deg,rgba(htru,0.5),rgba(tru,0.5) 8px,rgba(tru,0.5) 8px,rgba(htru,0.5) 16px)
				}
			}
			& div.ui_wrapper{
				background-color:bg1;
			}
		}
	}
	/*VPL IDE*/ //TODO: border radii
	#vpl_menu{
		border-radius:0.25em 0.25em 0 0;
	}
	#vpl_tabs{
		border-radius:0 0 0.25em 0.25em;
	}
	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default{
		border:none;
		background:bg4;
	}
	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active,
	a.ui-button:active,
	.ui-button:active,
	.ui-button.ui-state-active:hover{
		border:none;
		background:bg4;
		border-top:inset 1px brd;
		&>a{
			color:hlnk !important;
		}
	}
	.ui-corner-all{
		border-radius:0.25em;
	}
	.vpl_ide_tr{
		height:auto !important;
		border-radius:0 0 0.25em 0.25em;
		background:bg3;
	}
	.ui-widget-header{
		display:flex;
		border:none;
		background:bg3;
	}
	.ui-button{
		border:none;
		background:bg4;
		margin:1px;
		margin-right:calc(0.1em + 1px);
		&:hover{
			background:bg5;
		}
	}
	.ui-controlgroup-horizontal{
		margin:0 calc(0.1em + 1px) 0 1px;
		& .ui-button{
			margin-left:0;
			margin-right:0;
		}
	}
	.ui-widget.ui-widget-content{
		border:solid 1px #0000;
		background:bg3;
	}
	.ui-widget-content{
		color:txt;
		background:bg4;
	}
	.vpl_ide_file{
		margin-top:0;
	}
	.vpl_ide_closeicon{
		text-shadow:none;
	}
	//TODO: replace with custom icons
	.ui-state-active .ui-icon,
	.ui-button:active .ui-icon{
		filter:brightness(2);
	}
	.ui-icon,
	.ui-widget-content .ui-icon{
		filter:brightness(4);
	}
	.ui-state-hover .ui-icon,
	.ui-state-focus .ui-icon,
	.ui-button:hover .ui-icon,
	.ui-button:focus .ui-icon{
		filter:brightness(2);
	}
	.ui-dialog{
		& .ui-dialog-buttonpane button{
			color:txt;
			border:solid 1px #0000;
			border-color:#0000;//because of a css technicality
			background:bg4;
			&:hover{
				border-color:brd;
			}
		}
		& .ui-dialog-titlebar-close:hover{
			border:none;
			background:#0000;
		}
	}
	/*Calendar*/
	.maincalendar{
		& .calendarmonth{
			border-radius:0.5em;
			border-collapse:separate;
			td,th{
				border:solid 1px brd;
				border-left:none;
				border-top:none;
			}
			& :not(thead+tbody)>tr:first-of-type>:is(th,td){
				border-top:solid 1px brd;
				&:first-of-type{
					border-top-left-radius:0.25em;
				}
				&:last-of-type{
					border-top-right-radius:0.25em;
				}
			}
			& tr>:is(th,td):first-of-type{
				border-left:solid 1px brd;
			}
			& tbody>tr:last-of-type>:is(td,th){
				&:first-of-type{
					border-bottom-left-radius:0.25em;
				}
				&:last-of-type{
					border-bottom-right-radius:0.25em;
				}
			}
			& .clickable:hover{
				background-color:bg3;
			}
			& td.dayblank{
				background-color:bg4;
			}
			& th{
				background-color:btn;
				border-color:btn !important;
				&>span{color:dtxt}
			}
			& td.today .day-number-circle{
				background-color:bg3;
				color:txt;
			}
			/.path-mod-grouptool & .today,
			/.path-my & .today{
				background-color:#0000;
			}
		}
	}
	section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle{
		//wtf
		background-color:bg3;
	}
	calendarColors = {course:cal0,category:cal1,group:cal2,user:cal3,site:cal4,other:bg3}
	for $name,$color in calendarColors {
		.calendar_event_{$name}{
			background-color:$color;
			--cl:lighten($color,30);
			/.maincalendar .calendarmonth ul li .calendar-circle&{
				//misaligned, but whatever
				background-color:$color !important;
				border-color:var(--cl) !important;
				border-width:1px;
			}
			/.maincalendar &{
				border-color:$color;
			}
		}
	}
	.block .calendar_filters li span i{
		color:var(--cl) !important;
	}
	/*blockquotes*/
	#page-content blockquote,
	aside > section blockquote{
		border-left-color:btn;
		background-color:bg4;
		color:txt;
		border-radius:0 crad crad 0;
	}
	/*Replacement images + image manipulation*/
	.atto_image_button_text-bottom.img-responsive,
	.atto_image_button_text-top.img-responsive,/*most likely embedded images in 	assignment descriptions*/
	.qtext img,/*images in the question text, most of the time classless*/
	img[src*="mod_page"],/*images with mod_page in the source url, most of the images in courses have this*/
	.img-fluid,//probably mostly large images in modal lessons
	.region-main-content img:not([class]):not([src^="https://elearning.tgm.ac.at/theme/"]){/*images without class - a last resort, really*/
		filter:EICC;}
	img[src$="elearning.tgm.ac.at/theme/image.php/classic/core/"][src$="/i/loading_small"]{
		filter:invert(1);
	}
	.loading{
		background-image:none !important;
		&:before{
			content:"\00a0";
			background-image:url("https://elearning.tgm.ac.at/theme/image.php/classic/core/123456/i/loading_small");
			background-repeat:no-repeat;
			filter:invert(1);
		}
	}
	img[src="https://elearning.tgm.ac.at/theme/image.php/classic/core/1604966287/u/f1"]{
		filter:brightness(0.39) contrast(2)}
	#spinning_wheel{
		filter:invert(1) brightness(1.5);
	}
	img[src^="https://elearning.tgm.ac.at/theme/image.php/boost"]:is([src$="monologo"],/[src$="i/arrow-left"]){
		filter:invert(0.8);
	}
	img[src^="https://elearning.tgm.ac.at/theme/image.php/boost/block_completion_progress/"][src$="/cross"]{
		filter:invert(1) hue-rotate(180deg) contrast(0.75) saturate(1.5) brightness(0.9);
	}
	/*row where it displays what you've done and what you didn't. Normally only in course/view.php, but also in other places*/
	.barRow{
		& .progressBarCell{
			border:none;
			border-left:solid 1px bg2;
			border-radius:0;
			&[style*="background-color:#73A839"]{
				background-color:tru !important;
			}
			&[style*="background-color:#C71C22"]{
				background-color:fals !important;
			}
			&[style*="background-color:#FFCC00"]{
				background-color:idk !important;
			}
		}
		& .firstProgressBarCell{
			border-right:none !important;
			border-left:none;
			border-radius:lbarshape(PBCS,PBCSm) !important;
			&.lastProgressBarCell{
				border-radius:barshape(PBCS,PBCSm) !important;
			}
		}
		& .lastProgressBarCell{
			border-radius:rbarshape(PBCS,PBCSm) !important;
		}
	}
	 // don't ask
	.block_completion_progress{
		& .barModeScroll,
		& .barModeSqueeze{
			.progressBarCell{
				border:none;
				margin-left:1px;
				&.completed{
					background-color:tru;
				}
				&.submittedNotComplete{
					background-color:idk;
				}
				&.notCompleted{
					background-color:fals;
				}
				&:first-of-type{
					border-radius:lbarshape(PBCS,PBCSm);
					margin-left:0;
				}
				&:last-of-type{
					border-radius:rbarshape(PBCS,PBCSm);
					border-right:none;
				}
				&:only-of-type{
					border-radius:barshape(PBCS,PBCSm);
				}
			}
		}
	}
	/*flexitour*/
	span[data-flexitour="container"]{
		&[x-placement="top"],
		&[x-placement="top-start"]{
			& div[data-role="arrow"]::after{
				border-top-color:currentColor;
				box-shadow:0 -0.5em currentColor;
			}
		}
		&[x-placement="bottom"],
		&[x-placement="bottom-start"]{
			& div[data-role="arrow"]::after{
				border-bottom-color:currentColor;
				box-shadow:0 0.5em currentColor;
				.format-tiles &{
					color:lnk;
				}
			}
		}
		&[x-placement="right"],
		&[x-placement="right-start"]{
			& div[data-role="arrow"]::after{
				border-right-color:currentColor;
			}
		}
		&[x-placement="left"],
		&[x-placement="left-start"]{
			& div[data-role="arrow"]::after{
				border-left-color:currentColor;
			}
		}
		& div[data-role="arrow"]::after{
			color:bg3;
		}
		& .modal-dialog .modal-content{
			& .modal-header{
				border-radius:crad crad 0 0;
			}
			& .modal-footer{
				border-radius:0 0 crad crad;
			}
		}
	}
	/*badges*/
	.badge,
	.automatic-completion-conditions .badge,
	.path-mod .automatic-completion-conditions .badge{
		background-color:bg4;
		color:txt;
		padding:0 0.5em;
		border-radius:irad;
		mix-blend-mode:normal;//thanks
		&>i{
			z-index:3;
			position:relative;
			text-shadow:0 0 1px #000;
		}
		&-info{
			padding:0.25em 0.5em;
		}
		&>strong{
			display:inline-block;
			margin-left:-0.5em;
			padding:0.25em 0.25em 0.25em 0.5em;
			border-radius:irad 0 0 irad;
			z-index:2;
			position:relative;
			text-shadow:0 0 1px #000;
		}
		&-secondary>strong,
		&>strong{
			background-color:brd;
			color:dtxt;
		}
		&.alert-success{
			background-image:linear-gradient(to right,tru 25%,#0000 25%);
			border:none;
			&>strong{
				background-color:tru;
				color:htru;
			}
			&>i{
				color:htru;
			}
		}
		&.alert-danger{
			background-image:linear-gradient(to right,fals 25%,#0000 25%);
			border:none;
			&>strong{
				background-color:fals;
				color:hfals;
			}
			&>i{
				color:hfals;
			}
		}
		&.badge-light{
			background-color:bg4 !important;
		}
	}
	/*highlightjs*/
	.hljs{
		background-color:bg1;
		color:txt;
		box-shadow:inset 0 0 0 2px bg0;
		&-doctag,
		&-keyword,
		&-formula{
			color:c0;
		}
		&-string,
		&-regexp,
		&-addition,
		&-attribute,
		&-meta-string{
			color:c1;
		}
		&-attr,
		&-variable,
		&-template-variable,
		&-type,
		&-selector-class,
		&-selector-attr,
		&-selector-pseudo,
		&-number{
		 color:c2;
		}
		&-section,
		&-name,
		&-selector-tag,
		&-deletion,
		&-subst{
			color:c3;
		}
		&-built_in,
		&-class &-title{
			color:c4;
		}
	}
	/* popup dialogue windows, e.g. when the session runs out and elearning tells you to login again */
	.modal{
		&-header{
			background-color:bg3;
		}
		&-footer{
			background-color:bg3;
			border-color:brd;
		}
		&-content{
			background-color:bg3;
			border:none;
			border-radius:crad;
		}
	}
	.moodle-dialogue-base .moodle-dialogue-wrap{
		background-color:bg3;
		border-color:brd;
		border-radius:crad;
		overflow:hidden;
		& .moodle-dialogue-hd.yui3-widget-hd{
			color:txt;//resetting color:initial (fuck you)
		}
	}
	.moodle-dialogue-hd{//fixes titles that would otherwise extend outside the card
		word-break:break-word;
	}
	.modal-header,
	.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
	.path-mod-assign [data-region="grade-panel"] .popout>.col-md-3{
		border-color:brd;
	}
	/* search bars */
	.simplesearchform{
		& .btn-submit{
			background-color:bg3;
			border-color:brd;
			border-left:none;
			border-radius:0 irad irad 0;
			transition:none;
		}
		&:hover .btn-submit{
			background-color:bg4;
		}
	}
	/* genericocss, whatever that is */
	.filter_generico_warning{
		color:hidk;
		background-color:idk;
	}
	/*progress bar time descriptor*/
	//TODO: restyle
	.progressBarCell>.nowDiv{
		&>.icon{
			display:none;}
		&.lastHalfNow{
			background:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M0 0H16V16Z' fill='rgb(127,127,127)'/></svg>") no-repeat;
			background-position:5.5em 5px;
			padding-right:1.3em;}
		&.firstNow{
			background:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M16 0H0V16Z' fill='rgb(127,127,127)'/></svg>") no-repeat;
			background-position:0em 5px;
			padding-left:1.3em;
		}
	}
	/* raw html codeblock generated by hilite.me */
	div[style*="background: #ffffff"][style*="border: solid gray"][style*="border-width: .1em .1em .1em .8em"][style*="padding: .2em .6em"]{
		background-color:bg0 !important;
		border-color:brd !important;
		border-radius:0 crad crad 0;
		& span{
			&[style*="color: #000080"]{
				color:c0 !important;
			}
			&[style*="color: #008000"]{
				color:c1 !important;
			}
			&[style*="color: #ff0000"]{
				color:c3 !important;
			}
			&[style*="color: #0000ff"]{
				color:hbtn !important;
			}
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at/my/.*"), regexp("https?:\\/\\/moodle\\.necode\\.it/my/.*") {
	.dashboard-card{
		border-width:0;
		background-color:bg3;
		overflow:hidden;
	}
	.course{
		&-info-container{
			background-color:bg3;
		}
		&-menubtn{
			&:hover,&:focus{
				background-color:bg4 !important;
			}
		}
		&listitem{
			background-color:bg2;
			border-color:#0000;
			border-top-color:brd;
			border-bottom-color:brd;
		}
		&-summaryitem{
			background-color:bg3 !important;
			border:none !important;
		}
	}
	.block-myoverview>.container-fluid.p-0{
		margin-top:1.5em;
	}
	//welcoming heading which unfortunately contains the user's first name
	if(anon){
		#page-header>.w-100>.d-flex.align-items-center>h2.mb-3.mt-3{
			font-size:0;
			&:after{
				content:"Welcome back, Anon! 👋";
				font-size:1.875rem;
			}
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/?(\\?.*)?$"), regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/forum\\/discuss\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/?(\\?.*)?$"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/forum\\/discuss\\.php.*") {
	.sitelink{
		filter:invert(1) hue-rotate(180deg);}
	#login_username,
	#login_password{
		background-color:bg3 !important;
		color:txt !important;}
	.forumpost{
		border-color:brd !important;
		border-radius:crad;}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/login\\/index\\.php.*"), regexp("https?:\\/\\/moode\\.necode\\.it\\/login\\/index\\.php.*") {
	.mt-3{
		color:txt;}
	img.img-fluid{
		filter:invert(1) hue-rotate(180deg) brightness(0.9);}
	#modal{
		&-content{background-color:bg2;}
		&-header{border-bottom:none;}
		&-footer{border-top:none;}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/course\\/view\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/course\\/view\\.php.*") {
	#region-main{
		background-color:bg2;}
	.section{
		border-bottom-color:brd !important;
		& li.activity.hasinfo{
			border-bottom-color:brd;
		}
		&.current::before{
			border-color:btn;
		}
	}
	.course-section {
		.sectionname > a {
			color: htxt;
		}
		.section-item {
			border-color: brd;
		}
	}
	.progressEventInfo .iconInInfo{ /*Fixes a specific icon being distorted because someone forgot that width was set to 12px*/
		width:1.2em;
		height:1.2em;
	}
	.description .course-description-item{
		background-color:bg4;
	}
	/*These new tiles, ykwim*/
	.tiles{
		&>.tile,
		&>.section{
			background-color:bg2 !important;
		}
	}
	.format-tiles{
		& #header-overlay,
		& #window-overlay{
			background-color:#888;
			mix-blend-mode:multiply;
			opacity:1;
		}
		& #page .course-content ul li.section.main{
			background-color:bg2;
		}
		& li.activity button[data-action="change-completion-status"]{
			&>.completion-icon{
				outline:solid 3px #0000;
				transition:outline-color 300ms ease-in-out;
				border-radius:100%;
			}
			&:hover{
				border-color:#0000;
				&>.completion-icon-y{
					outline-color:rgba(htru,0.6);
				}
				&>.completion-icon-n{
					outline-color:txt;
				}
			}
		}
		& button.tiles-top-button{
			background-color:#0000;
			&:hover{
				background-color:bg4;
				border-radius:irad;
			}
		}
		& .sectiontitle h2{
			color:txt;
		}
		& .sectiontitle::after,
		& .tag-info{
			background-color:tru;
		}
		& .course-content{
			& ul.tiles .tile{
				transition:background-color 0.1s ease-in-out,all 0.1s ease-in-out;
				cursor:pointer;
				&:hover{
					transition:transform 0.1s ease-in-out
				}
			}
			& .section .activity:hover{
				background-color:bg3;
			}
			& .tile-bg{
				background-color:bg3;
			}
		}
		& ul.tiles .tile h3{
			color:txt;
		}
		& .tile-icon{
			position:relative;//no idea why this is needed
		}
		& .course-content ul.tiles .tile,
		& li.section:not(#section-0) .course-section-header{
			border-top-color:btn;
			border-top-width:0.25em;
			box-shadow:0.1em 0.2em 0.5em 0 bg0;
			&:hover{
				border-top-color:hbtn;
			}
		}
		/*activites in format tiles*/
		& li.subtile.activity{
			background-color:bg3;
			border:none;
			border-top:solid 0.25em;
			cursor:pointer;
			background-size:25% auto;
			border-radius:crad;
			&.page,
			&.url,
			&.resource{
				border-top-color:c0;
			}
			&.modsecurestreaming,
			&.resource.mp4,
			&.url.video{
				border-top-color:c1;
			}
			&.folder{
				border-top-color:c2;
			}
			&.resource.pdf{
				border-top-color:c3;
			}
			&.assign{
				border-top-color:c4;
			}
			& .activitytype{
				color:mtxt;
			}
			& a:not(.dropdown-item),
			/^[0] #page-content li.subtile.activity a:not(.dropdown-item){
				color:txt;
			}
			& .activitytitle a{
				background:linear-gradient(to bottom,bg4 85%,#0000);
			}
			&:hover{
				background-size:25% auto;
			}
		}
		/* the arrows in format tile thingies */
		/* possibly also applicable to .embed_cm_modal .embed_file_button */
		& .course-content .single-section .navigation-arrows{
			display:inline-flex;
			& .navigation-arrow{
				transition:none;
				opacity:1;
				margin:0 0.25em;
				border-radius:irad;
				display:inline-flex;
				justify-content:center;
				align-items:center;
				&>.dir-rtl-hide{
					display:flex;
					align-items:center;
				}
				&:not(.dimmed){
					background-color:bg3;
					&:hover{
						background-color:bg4;
						& .icon{
							filter:brightness(1.2);
						}
					}
				}
				&.dimmed:hover{
					background-color:#0000;
				}
				&:hover{
					transform:none;
					text-decoration:none;
				}
				& .icon{
					display:contents;
				}
			}
		}
		& .editor_atto_content_wrap{
			& h1,& h2,& h3,& h4{
				border-left-color:tru;
			}
		}
		/*completion checkboxes*/
		& .completioncheckbox{
			display:flex;
			border-color:brd;
			justify-content:center;
			align-items:center;
			transition:none;
			color:txt;
			& .icon{//why
				margin:0;
				width:auto !important;
				height:auto;
				color:inherit !important;
			}
			&.complete{
				background-color:tru;
				border-color:tru;
				color:htru;
			}
		}
		& li.activity button[data-action="change-completion-status"]:hover{
			border-color:brd;
			background-color:brd;
			transition:none;
			color:htxt !important;
		}
		& li.activity button[data-action="change-completion-status"].complete:hover{
			border-color:htru;
			background-color:htru;
			color:tru !important;
		}
		/*some small fixes for https://elearning.tgm.ac.at/course/view.php?id=5836*/
		& .badge-info{
			background-color:bg4;
		}
		& .tile a .availabilityinfo,
		& .availabilityinfo .badge{
			color:txt;
		}
	}
	.format-tiles ul.tiles .headerabovetiles button.selected,
	.headerabovetiles button:active,
	.headerabovetiles button:focus,
	.format-tiles .modal-header{
		background-color:btn;
		&,& h5{
			color:htxt;
		}
	}
	/*assignment wrappers*/
	.activity-wrapper.activity>.activity-item:not(.activityinline){
		background-color:bg3;
		border-radius:crad;
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/user\\/files\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/user\\/files\\.php.*") {
	.filemanager-container,
	.fp-navbar{
		background-color:bg3;
		border:none !important;}
	a.btn-sm{
		background-color:bg4;
		&:active,
		&.active,
		&:focus,
		&.checked{
			background-color:bg6 !important;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/grade\\/report\\/overview\\/index\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/grade\\/report\\/overview\\/index\\.php.*") {
	thead>tr>th{
		border-bottom:none !important;}
	table td,
	table th{
		border-color:brd !important;}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/message\\/output\\/popup\\/notifications\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/message\\/output\\/popup\\/notifications\\.php.*") {
	.content-item-container{
		background-color:bg2;
		color:txt;
		border-color:brd;
		&:first-child{
			border-top-left-radius:0.25rem;
		}
		&.selected{
			background-color:bg3;
			border-color:hbrd;
			color:htxt;
		}
		&.selector,
		&:hover{
			&.content-item-footer .timestamp{
				color:txt;
			}
		}
	}
	.notification-area{
		border-color:brd;
		& .control-area{
			border-right-color:brd;
		}
		& .content-area .header{
			border-bottom-color:brd;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/message\\/index\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/message\\/index\\.php.*") {
	#region-main .border-right.h-100{
		border-color:bg3 !important;}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/organizer\\/view\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/organizer\\/view\\.php.*") {
	#region-main .profile_tree>.node_category{
		background-color:bg3;
		border-radius:crad;}
	#organizer_main_cointainer{
		& span.countdown{
			&_normal{
				background-color:tru;
				color:htxt;
			}
			&_passed{
				background-color:bg4;
			}
			&_critical{
				background-color:fals;
			}
		}
		& tr.registered_slot td{
			background-color:tru !important;
			color:htxt;
		}
		
		& table tr.past_due td{
			background-color:bg4 !important;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/assign\\/view\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/assign\\/view\\.php.*") {
	/*Abgabestatus*/
	.path-mod-assign .submissionsummarytable{
		.c0{
			width:auto;
		}
		td.submission{
			&graded,
			&statussubmitted{
				background-color:tru;
				color:htru;
			}
			&notgraded{
				background-color:bg3;
				color:txt;
			}
			&statusdraft{
				background-color:idk;
				color:hidk;
			}
		}
		td.latesubmission,
		td.overdue{
			background-color:fals;
			color:hfals;
			&>font{
				color:hfals;
			}
		}
		td.earlysubmission{
			background-color:tru;
			color:htru;
		}
	}
	.feedbacktable,
	.submissionsummarytable{
		display:grid;
		grid-template-columns:1fr 5fr;
		tr,tbody,thead,table,
		.table-responsive{
			display:contents;
		}
		th,td{
			border:none;
			margin-bottom:1px;
		}
		th{
			background-color:bg4;
		}
		td{
			background-color:bg3;
		}
		tr:first-of-type{
			&>td,
			&>th{
				&:first-child{
					border-top-left-radius:crad;
				}
				&:last-child{
					border-top-right-radius:crad;
				}
			}
		}
		tr:last-of-type{
			&>td,
			&>th{
				margin-bottom:0;
				&:first-child{
					border-bottom-left-radius:crad;
				}
				&:last-child{
					border-bottom-right-radius:crad;
				}
			}
		}
	}
	#jump-to-activity{
		background-color:bg3;
		border-color:brd;
		color:txt;}
	/*Grading criteria in full assignment view*/
	//see -> https://elearning.tgm.ac.at/mod/assign/view.php?id=43871
	.gradingform_rubric .criteria>tbody{
		border-radius:crad;
		overflow:hidden;
		border:solid 1px brd;
	}
	.gradingform_rubric .criterion{
		border-color:brd;
		border-right:none;
		border-left:none;
		&.even{
			border:none;
			background:#0000;
			& td{
				background:bg4;
				&.description{
					background:bg5;
				}
			}
		}
		&.odd{
			& td{
				background:bg3;
				&.description{
					background:bg4;
				}
			}
		}
		&:last-of-type{
			border-bottom:none;
		}
		& .levels .level{
			border-left-color:brd;
			&.last{
				border-right:none;
			}
			&.checked{
				background:tru;
				border:none;
				border-left:solid 1px brd;
				& .score,
				& .score>span{
					color:htru;
				}
			}
			& .score{
				color:txt;
			}
			
		}
		& .remark{
			border-left:solid 1px brd;
		}
	}
	/*Another grading criteria form*/
	//see -> https://elearning.tgm.ac.at/mod/assign/view.php?id=208163
	.gradingform_guide .criterion{
		border:none;
		&.even{
			background-color:#0000;
			&>td{background-color:bg3}
		}
		&.odd{background-color:bg4}
		&.first>td{
			border-radius:irad irad 0 0;
		}
		&.last>td{
			border-radius:0 0 irad irad;
		}
		& .criteriondescriptionscore{
			background-color:bg6;
			color:dtxt;
			border-radius:50%;
			display:inline-block;
			width:1.5em;
			height:1.5em;
			vertical-align:baseline;
			text-align:center;
			padding:0.25em 0;
			line-height:1em;
			font-weight:bold;
		}
	}
	//annotated PDFs in assignments
	input[name="assignfeedback_editpdf_haschanges"]+.visibleifjs>a{
		color:lnk;
		transition:none;
		&:hover{
			color:hlnk;
			text-decoration:underline;
		}
	}
	.assignfeedback_editpdf_widget .pageheader{
		background-color:bg3;
		border-color:brd;
		& .toolbar,
		& .navigation-search,
		& .navigation-expcol,
		& .navigation{
			border-color:brd;
			overflow:hidden;
			background-color:#0000;
		}
		& .navigation button,
		& .navigation select + button{
			border-color:brd;
		}
		& button:hover{
			background-image:none;
			background-color:bg4;
			& img{
				filter:brightness(1.2);
			}
		}
		select{
			background-color:#0000;
			color:txt;
			&:hover{
				background-color:bg4;
				color:htxt;
			}
		}
	}
	.assignfeedback_editpdf_widget .drawingregion{
		background-color:bg3;
		border:none;
	}
	.assignfeedback_editpdf_commentsearch input[placeholder="Kommentare filtern..."]{
		//style is copied from login text inputs
		//TODO: deduplicate
		background-color:bg3;
		color:txt;
		border:solid 1px brd;
		border-radius:irad;
		padding:.375rem .75rem;
		font-size:.9375rem;
		line-height:1.5;
		transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
		&:focus{
			border-color:btn;
			box-shadow: 0 0 0 .2rem rgba(btn,.25);
			outline:none;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/user\\/preferences\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/user\\/preferences\\.php.*") {
	#region-main .card.mb-3{
		background-color:bg3;}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/admin\\/tool\\/dataprivacy\\/mydatarequests\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/admin\\/tool\\/dataprivacy\\/mydatarequests\\.php.*") {
	div[data-region="datarequests"]>.mt-1.mb-1>.btn.btn-primary{
		color:txt !important;}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/(student)?quiz.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/(student)?quiz.*") {
	.que.multichoice .answer{
		& div.r0,
		& div.r1{
			border-radius:irad;
			& .icon.fa{
				align-self:center;
			}
			& div[data-region="answer-label"]{
				cursor:pointer;
			}
			& input[disabled]+div[data-region="answer-label"]{
				cursor:not-allowed;
			}
		}
		& .incorrect{
			background-color:fals;
			border:solid 1px hfals;
			&, & p, & span,
			& .answernumber{
				color:hfals;
			}
		}
		& .correct{
			background-color:tru;
			border:solid 1px htru;
			&, & p, & span,
			& .answernumber{
				color:htru;
			}
		}
	}
	.que .formulation{
		background-color:bg3;
		color:txt;
		border-radius:crad;}
	.que .correct .custom-select{
		background-color:tru;}
	.que .incorrect .custom-select{
		background-color:fals;}
	.que .correctness{
		&.notanswered,
		&.incorrect{
			background-color:fals;
		}
		&.correct{
			background-color:tru;
		}
	}
	.que .outcome{
		background-color:bg3;
		color:txt;
		border-radius:crad;}
	.que .info{	
		background-color:bg3;	
		border-radius:crad;	
		border:none;}	
	.que.essay .qtype_essay{
		&_response.readonly{
			background-color:bg4;
			padding-left:0.2em;
			border-radius:irad;
		}
		&_monospaced{
			background-color:bg2;
			padding:0.25em;
			border-radius:irad;
			color:txt;
			border-color:brd;
		}
	}
	.que.ddwtos,
	.que.ddimageortext,
	form.mform fieldset#id_previewareaheader{
		& .group1{
			background-color:bg3;
		}
		& .draghome,
		& .drop{
			border-radius:irad;
			border-color:brd;
			&.active{
				border-color:brd;
			}
		}
		& .drop,
		& .dropzone,
		& .droparea .draghome,
		& .draghome.placed:not(.beingdragged){
			&:focus,
			&.valid-drag-over-drop{
				border-color:btn;
				box-shadow:0 0 5px 3px btn,inset 0 0 2px 0 btn;
			}
		}
		& img.dropbackground,
		& img.group1{
			filter:EICC;
		}
		& .draghome{
			width:fit-content !important;
			padding:0 0.5em;
		}
	}
	.que .answer{
		&>.correct>.specificfeedback{
			background-color:tru;
			border: solid 1px htru;
		}
		&>.incorrect>.specificfeedback{
			background-color:fals;
			border: solid 1px hfals;
		}
		&>div>.specificfeedback{
			border-radius:irad;
			margin:-1px -1px -1px 0;
			align-self:center;
			& p{
				margin:0;
			}
		}
	}
	.que.multianswer .feedbackspan{
		border-radius:0 0 crad crad;
		background:linear-gradient(to top,rgba(idk,0.9) 70%,rgba(idk,0.7) 80%,rgba(idk,0.3) 90%,rgba(idk,0) 100%);
		color:hidk;
		border:solid 1px hidk;
		border-top:none;
		box-shadow:0 0.2em 0.5em bg0,0 0.2em 0.2em idk;
	}
	.path-mod-quiz #mod_quiz_navblock{
		& a.qnbutton,
		& span.qnbutton,
		& .qnbutton{
			color:txt !important;
			background-color:bg4;
			&:hover{
				text-decoration:none;
			}
			&:focus-visible,
			&:focus,
			&:active{
				text-decoration:none;
				outline:solid 1px brd;
				box-shadow:none;
			}
			&.thispage{
				&>.thispageholder{
					outline:solid 1px brd;
				}
			}
			&>.thispageholder{
				border:none;
			}
			&.correct>.trafficlight{
				background-color:tru;
				background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.5 6.5'%3E%3Cpath fill='"+urlenc(htru)+"' d='M0 3.25l2.5 2.5 4-4-1-1-3 3-1.5-1.5z'/%3E%3C/svg%3E%0A");
			}
			&.partiallycorrect>.trafficlight{
				background-color:idk;
				background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Ccircle fill='"+urlenc(hidk)+"' r='12'/%3E%3C/svg%3E%0A");
			}
			&.incorrect
			&.notanswered,
			&.invalidanswer{
				&>.trafficlight{
					background-color:fals;
					background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath fill='"+urlenc(hfals)+"' d='M0 1l1-1 2 2 2-2 1 1-2 2 2 2-1 1-2-2-2 2-1-1 2-2z'/%3E%3C/svg%3E");
				}
			}
			&.notyetanswered>.trafficlight{
				background-color:bg4;
			}
			&.answersaved>.trafficlight,
			&.complete>.trafficlight,
			&.requiresgrading>.trafficlight{
				background-color:brd;
			}
			&.flagged>.thispageholder{
				background-position:top right;
			}
		}
		& a.qnbutton{
			transition:transform 0.1s;
			&:hover:not(.thispage){
				transform:scale(1.2);
			}
		}
		& .qnbuttons:not(.allquestionsononepage){
			.qnbutton.thispage{
				cursor:default;
			}
		}
		& .allquestionsononepage{
			& a.qnbutton.thispage,
			& span.qnbutton.thispage,
			& .qnbutton.thispage{
				&>.thispageholder{
					outline:none;
					border:none;
				}
			}
			& a.qnbutton.thispage{
				cursor:pointer;
				&:hover{
					transform:scale(1.2);
				}
			}
		}
	}
	table.quizreviewsummary{
		display:grid;
		grid-template-columns:auto auto;
		width:fit-content;
		border-radius:crad;
		overflow:hidden;
		tbody,tr{
			display:contents;
		}
		th.cell,
		td.cell{
			border:none;
			margin-bottom:1px;
			padding:0.25em 1em;
			width:auto;
			text-align:start;
		}
		.cell:first-child{
			background-color:bg4;
			padding-left:0.75em;
		}
		.cell:last-child{
			background-color:bg3;
			padding-right:0.75em;
		}
		tr:last-child .cell{
			margin-bottom:0;
		}
		p{
			margin-bottom:0;
		}
	}
	.answer>input[type="text"]{	
		background-color:bg4;
	}
	.subquestion input[type="text"]{
		background-color:bg4;
		border-color:brd;
		border-radius:irad;
		color:txt;
	}
	#quiz-timer-wrapper #quiz-timer{
		border-color:hidk;
		background-color:idk;
		color:hidk;
		& #quiz-time-left{
			color:inherit;
		}
		&.timeleft{
			&14,&15,&16{
				background-color:idk;
				color:hidk;
				border-color:hidk;
			}
			&9,&10,&11,&12,&13{
				background-color:fals;
				color:hfals;
				border-color:hfals;
			}
			&4,&5,&6,&7,&8{
				background-color:hfals;
				color:fals;
				border-color:fals;
			}
			&0,&1,&2,&3{
				background-color:#000;
				color:#F00;
				border-color:#F00;
				box-shadow:0 0 0 1px #000;
			}
			&0{
				font-size:0;
				&::after{
					font-size:1rem;
					color:#F00;
					content:"Game Over";
				}
			}
		}
	}
	input[type="text"],
	input[type="checkbox"],
	.custom-select{
		&.incorrect,
		&.notanswered,
		.incorrect>&,
		.notanswered>&{
			&,
			&:hover{
				background-color:fals;
				color:hfals;
				border-color:hfals;
				transition:none
			}
		}
		&.partiallycorrect,
		.partiallycorrect>&{
			&,
			&:hover{
				background-color:idk;
				color:hidk;
				border-color:hidk;
				transition:none
			}
		}
		&.correct,
		.correct>&{
			&,
			&:hover{
				background-color:tru;
				color:htru;
				border-color:htru;
				transition:none
			}
		}
	}
	input[type="radio"]{
		&.incorrect,
		&.notanswered,
		.incorrect>&,
		.notanswered>&{
			background-image: radial-gradient(hfals 30%,#0000 40%,#0000 50%, hfals 60%,#0000 70%);
		}
		&.partiallycorrect,
		.partiallycorrect>&{
			background-image: radial-gradient(hidk 30%,#0000 40%,#0000 50%, hidk 60%,#0000 70%);
		}
		&.correct,
		.correct>&{
			background-image: radial-gradient(htru 30%,#0000 40%,#0000 50%, htru 60%,#0000 70%);
		}
	}
	input,select{
		&:disabled,
		&[readonly]{
			cursor:not-allowed;
		}
	}
	//highlighted row in student rankings
	.path-mod-studentquiz .mod-studentquiz-summary-highlight{
		background-color:bg3;
	}
	/*summary table of quiz attempts*/
	#page-mod-quiz-view table.quizattemptsummary{
		display:grid;
		grid-template-columns:0fr;
		border-radius:crad;
		overflow:clip;
		thead,tbody,tr{
			display:contents;
		}
		th{
			grid-row:1;
			background-color:bg4;
			border:none;
		}
		td{
			background-color:bg3;
			border:none;
			margin-top:1px;
		}
		td:first-child,
		th:first-child{
			border-left:solid crad bg4;
		}
		tr.bestrow td{
			border-color:btn;
			background-color:bg3;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/user\\/index\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/user\\/index\\.php.*") {
	.filter-group{
		border:none !important;
		border-radius:irad;
		background-color:bg3 !important;
		& .bg-white.border{
			border:none !important;
			background-color:bg3 !important;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/lesson\\/view\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/lesson\\/view\\.php.*") {
	.no-overflow img[role="presentation"]{
		width:100%;
		margin:0;
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/studentquiz\\/view\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/studentquiz\\/view\\.php.*") {
	#categoryquestions{
		//table head
		& thead,
		&>tbody>tr.r1{
			background-color:bg3;
		}
		//various icons, mostly denoting the type of quiz
		& img.icon{
			&[title="CodeRunner"]{
				border-radius:irad;
				filter:saturate(0.6);
			}
			&[title="Multiple-Choice"],
			&[title="Zuordnung"],
			&[title="Wahr/Falsch"],
			&[src$="/state_new"]{
				filter:invert(0.75);
			}
		}
		//difficulty and rating bars
		& .difficultylevel svg,
		& .mod_studentquiz_ratingbar svg{
			& rect[fill="#fff"]{
				fill:bg0;
				stroke:bg0;
			}
			& rect[fill="#007bff"]{
				fill:btn;
				stroke:bg0;
				stroke-width:1px;
			}
			& path{
				fill:btn;
				stroke:bg0;
			}
		}
	}
	//question filters - basically toggle buttons
	.path-mod-studentquiz input[type="checkbox"].toggle{
		& + a,
		& + label a{
			border:solid 1px btn;
			background-color:bg3;
			color:btn;
		}
		&:checked + a,
		&:checked + label a{
			border:solid 1px hbtn;
			background-color:hbtn;
			color:dtxt;
		}
	}
	//weird thing which functions as a label and submit button at the same time - for the page count
	.btn[value="Seitengröße:"]{
		background-color:bg3;
		color:txt;
		border:solid 1px brd;
		border-right:none;
		border-radius:irad 0 0 irad;
		&:hover{
			background-color:bg4;
			color:htxt;
			border-color:hbrd;
		}
		&:focus{
			background-color:bg5;
			border-color:hbtn;
			color:hhtxt;
		}
		& + .form-control{
			border-radius:0 irad irad 0;
			border-left:none;
		}
	}
	//statistics sideblock with horrible progressbars and even worse colored spans
	#mod_studentquiz_statblock{
		& svg{
			//the feeling when you have to fix the style of a large buisness :'I
			overflow:visible; //otherwise the borders get clipped
		}
		& rect{
			stroke-width:1px !important;
			rx: irad !important;
			ry: irad !important;
		}
		& rect:last-of-type{
			fill:tru !important;
			stroke:htru !important;
		}
		& rect:nth-of-type(2){
			fill: fals !important;
			stroke: hfals !important;
		}
		& rect:first-of-type{
			fill:idk !important;
			stroke:hidk !important;
		}
	}
	.path-mod-studentquiz span.stat{
		//why do I need to do this?
		display:flex;
		line-height:0;
		align-items:center;
		&.approvals,
		&.last-attempt-correct{
			background-color:tru;
			color:htru;
		}
		&.disapprovals,
		&.last-attempt-incorrect{
			background-color:fals;
			color:hfals;
		}
		&.changed,
		&.never-answered{
			background-color:idk;
			color:hidk;
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/studentquiz\\/(attempt|commenthistory)\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/mod\\/studentquiz\\/(attempt|commenthistory)\\.php.*"){
	svg[width="100%"] rect{
		&:first-of-type{
			fill:bg3 !important;
		}
		&:nth-of-type(2){
			fill:btn !important;
		}
	}
	svg[width="100%"] text{
		fill:txt;
	}
	.btn[value="Abbrechen"]{
		color:hfals;
		background-color:fals;
		border:solid 1px hfals;
		&:hover{
			color:dtxt;
			background-color:hfals;
		}
		&:focus,
		&.focus{
			outline:none;
			box-shadow:0 0 1em hfals;
		}
		&:focus-visible{
			outline:none;
			box-shadow:inset 0 0 0 1px dtxt;
			&:focus{
				box-shadow:inset 0 0 0 1px dtxt,0 0 1em hfals;
			}
		}
	}
	.path-mod-studentquiz{
		& .studentquiz_behaviour{
			& .comment_list>div.studentquiz-comment-container{
				border-color:brd;
			}
			& .star,
			& .rate .rating .rateable.star-empty,
			& .rate .rating:hover .rateable.star-empty{
				filter:contrast(0.1) saturate(10) brightness(1) hue-rotate(-30deg);
			}
		}
		& .studentquiz-comment-container{
			& .no-comment{
				border-top-color:brd;
			}
			& .filter-desc.current,
			& .filter-asc.current{
				& .studentquiz-comment-filter-type i::before{
					filter:contrast(0.1) saturate(10) brightness(0.8) hue-rotate(-30deg);
				}
			}
			& .studentquiz-comment{
				&-item{
					border-top-color:brd;
				}
				&-author{
					color:txt;
				}
				&-expand,
				&-collapse{
					color:txt;
					background-color:bg3;
					border-color:brd;
					border-bottom:none;
					&[disabled],
					&[disabled]:hover{
						background-color:brd;
						border-color:brd;
						color:htxt
						&::after{
							filter:contrast(0) brightness(1.5);
						}
					}
					&:hover,
					&:focus,
					&:active{
						color:htxt;
						background-color:bg4;
						border-color:hbrd;
						border-bottom:none;
						&::after{
							filter:contrast(0) brightness(1.4);
						}
					}
					&::after {
						filter:contrast(0) brightness(1.15);
					}
				}
				&-text,
				&-text-deleted{
					background-color:bg3;
					border:solid 1px brd;
					border-radius:irad;
					color:txt;
				}
				&-postfragmentform{
					background-color:#0000;
					color:txt;
				}
			}
		}
	}
	img[src$="/switch_plus"],
	img[src$="/switch_minus"]{
		filter:contrast(0.1) saturate(10) brightness(0.8) hue-rotate(-30deg);
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/login\\/index\\.php.*"), regexp("https?:\\/\\/moodle\\.necode\\.it\\/login\\/index\\.php.*"){
	.pagelayout-login #page{
		background-image:none;
	}
	.login-container{
		background-color:bg3;
		border-radius:0.5em;
		& .login-divider{
			border-top-color:brd;
		}
		& .divider{
			background-color:brd;
			border-left-color:brd !important;
		}
	}
}