@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    src: url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-400.woff2) format("woff2"),
	     url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-400.woff) format("woff")
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: 700;
    src: url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-700.woff2) format("woff2"),
	     url(https://s.brightspace.com/lib/fonts/0.5.0/assets/Lato-700.woff) format("woff")
}

:root {
	--background: #fff;
	--accent: #006fbf;
	--accent-back: rgba(0, 111, 191, 0.05);
	--accent-hover: #004489;
	--base: #e3e9f1;
	--base-hover: #cdd5dc;
	--elementtext: #494c4e;
	--border: #868c8f;
	--text: #494c4e;
	--table-background: #f9fbff;
	--table-border: #cdd5dc;
	--badge-text: #fff;
	--badge-background: #888;
	--error: #cd2026;
	--error-back: rgba(205, 32, 38, 0.05);
}

* {
	margin: 0;
	padding: 0;
}


html {
	background: #eee;
}
html, body {
	font-size: 20px;
}

body {
	background: #fff;
	min-height: 100%;
}

body:not(.wide) #content, body:not(.wide) .guttered, body:not(.wide) footer div {
	margin: 0 auto;
	max-width: 1230px;
}

body, p, h1, h2, h3, h4, h5, h6, input, select, option, textarea, ::file-selector-button {
	font-family: Lato, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: normal;
	font-size: .95rem;
	color: var(--text);
}

textarea {
	padding: .5em;
	width: calc(100% - 1em - 2px);
	height: 12em;
	resize: vertical;
}

h1 {
	font-size: 40px;
	margin-bottom: 30px;
}

h2 {
	font-size: 27px;
	margin-bottom: 15px;
}

h3 {
	font-weight: bold;
	font-size: 18px;
	border-bottom: 1px solid #b1b9be;
	padding-bottom: 15px;
	margin-bottom: 15px;
}


#content {
	padding: 1em 30px;
	background: #fff;
	min-height: 30em;
}

.withAside {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.withAside .container {
	flex-grow: 3;
}

.withAside aside {
	display: block;
	position: relative;

	min-width: 320px;
	width: 33%;
	max-width: 33%;
	background: var(--base);
	padding: 10px;
	flex-grow: 1;
}

aside .field {
	display: block;
	background: white;
	border-radius: 10px;
	padding: 20px;
}

p {
	margin-bottom: 1em;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

img.icon {
	max-width: 1rem;
	vertical-align: text-bottom;
}


.action, .btn, input[type=file]::file-selector-button {
	display: inline-block;

	border: none;
	border-radius: .3rem;
	font-size: .65rem;
	font-weight: bold;
	text-decoration: none;

	white-space: nowrap;
	cursor: pointer;
}

.action {
	color: var(--accent);

	padding: .3rem .6rem;
	margin-right: .6rem;

	line-height: 2;
}


.btn, input[type=file]::file-selector-button {
	color: var(--elementtext);
	background-color: var(--base);

	padding: .6rem 1.5rem;
	margin: .7rem .7rem .7rem 0;
}

input[type=file]::file-selector-button {
	background-image: url(img/upload.svg);
	background-size: 1rem;
	padding-left: 2.5rem;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 1rem;
	margin: 0 .7rem 0 0;
}

.action:hover, .btn:hover {
	text-decoration: none;
	background-color: var(--base-hover)
}

.btn:hover, input[type=file]::file-selector-button:hover {
	background-color: var(--base-hover);
	color: var(--elementtext);
	text-decoration: none;
}

.btn.primary {
	color: white;
	background-color: var(--accent);
}
.btn.primary:hover {
	background-color: var(--accent-hover);
	color: white;
}
.btn:focus {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
	outline: none;
}

.btn:disabled, .btn:hover:disabled{
	background-color: #ccc;
	opacity: .5;
	cursor: default;
}

.tabList {
	border-bottom: 1px solid var(--base);
	margin: 1em 0;
	font-size: .7rem;
}

.tabList .tab {
	padding: .5rem 1rem 0 1rem;
	margin: 0;
	white-space: nowrap;
	color: var(--text);
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.tabList .tab.active {
	text-decoration: none;
	color: var(--text);
	cursor: default;
}

.tabList .tab:not(.active):hover {
	text-decoration: none;
	color: var(--accent);
}

.tabList .tab.active::after {
	content: ' ';
	display: block;
	width: 100%;
	height: 4px;
	margin-top:10px;

	background: var(--accent);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.formStep {
	margin-bottom: 1rem;
}

.hint {
	width: 50%;
	font-size: 80%;
	margin: .5em 0;
	color: #666;
}

.formStep.fixed {
	position: fixed;
	bottom: 0;
	height: auto;
	width: 100%;
	left: 0;
	margin:0;
	background: rgba(255, 255, 255, .9);
	padding: 0 30px;
	box-shadow: rgba(32, 33, 34, 0.2) 0 -2px 4px;
}

.formStep.fixed .guttered{

}

.tableActionBar {
	margin-bottom: .25em;
	padding-left: .5em;
}

.miniActionBar {
	float: right;
}

.miniActionBar .btn {
	margin: 0 0 3px 3px;
	padding: .5em 1em;
}

legend {
	background: var(--base);
	border: none;
	padding: .5em 1em .5em 0;
	border-radius: 3px;
	position: absolute;
	top: .5em;
}

fieldset {
	position: relative;
	padding: 2.5em 1em 1em 1em;
	background: var(--base);
	border: none;
	border-radius: 10px;
	margin-top: .5em;
}

label, legend {
	display: block;
	font-size: .7rem;
	font-weight: bold;
	margin-bottom: .5em;
	color: var(--text);
}

label .instructions {
	font-weight: normal;
	display: block;
	margin-top: .5em;
}



label.inline {
	display: inline-block;
	vertical-align: 35%;
	font-weight: normal;
	padding-left: .5em;
}

label.tabular {
	font-size: inherit;
	vertical-align: inherit;
	margin-bottom: 0;
}

input, select {
	padding: .4rem .75rem;
	font-size: .8rem;
	line-height: 1.2rem;
	max-width: calc(100% - 1.5rem - 2px);
}

input[type=text], input[type=number], input[type=password], input[type=checkbox], input[type=datetime-local], input[type=email], textarea, select {
	border: 1px solid var(--border);
	border-radius: .3rem;
	box-shadow: inset 0 2px 0 0 rgb(181 189 194 / 20%);
	color: var(--text);
	vertical-align: 20%;
}

input[type=checkbox] {
	vertical-align: inherit
}

input[type=checkbox].tabular {
	vertical-align: -30%;
}

input[type=submit] {
	line-height: 1;
	border: none;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMSAyIDQuNSA0TTEwIDIgNS41IDYiIHN0cm9rZT0iIzU2NUE1QyIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=");
	background-repeat: no-repeat;
	background-position: center right 17px;
	padding-right: calc(30px + .8rem);
}

input[type=file] {
	padding: 0;
	width: 100%;
}

input[type=checkbox], input[type=radio] {
	padding: 0;
	width: 1.2rem;
	height: 1.2rem;
	background-color: white;
}
input[type=checkbox] {
	appearance: none;
}
input[type=checkbox]:checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23494C4E' d='M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

input[type=checkbox]:disabled, input[type=datetime-local]:disabled {
	background-color: #ccc;
	opacity: .5;
}

div.visual-table {
	border-radius: 10px;
	border: 1px solid var(--table-border);
	overflow: hidden;
}

div.visual-table table {
	width: 100%;
	border-collapse: collapse;
	border-style: hidden;
	font-size: .8rem;
	border-radius: 9px;
}

div.visual-table table th, div.visual-table table td {
	border: 1px solid var(--table-border);
	padding: .6rem 1rem;
	line-height: 2;
}

div.visual-table table th {
	background: var(--table-background);
	font-size: .6rem;
	font-weight: normal;
}

table.child-table {
	font-size: 90%;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
	overflow: hidden;
}

.error {
	box-shadow: inset 0px 0px 1px 1px var(--error)!important;
	background-color: var(--error-back)!important;
}

div.error {
	padding: 1em;
	border-radius: .3rem;
}

.highlight {
	box-shadow: inset 0px 0px 1px 1px var(--accent)!important;
	background-color: var(--accent-back)!important;
}

.notice {
	border-top: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	border-left: 6px solid var(--accent);
	border-radius: 6px;
	padding: 1em;
	margin: 1em 0;
}

.badge {
	color: var(--badge-text);
	background-color: var(--badge-background);
	padding: .2em .5em;
	border-radius: 6px;
}

.visualStep.inactive {
	opacity: .8;
}

.visualStep h2 {
	font-size: 20px;
	font-weight: bold;
	background: #f9fbff;
	border-bottom: 1px solid #cdd5dc;
	padding: 1rem;
	margin-bottom: 0;
}

.visualStep .container {
	padding: 1em ;
}

.spinner {
	animation: rotate 1.2s linear infinite;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 .5em;
	/* white:
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTksMThjLTUsMC05LTQtOS05YzAtNSw0LTksOS05YzAuOCwwLDEuNSwwLjcsMS41LDEuNVM5LjgsMyw5LDNDNS43LDMsMyw1LjcsMyw5czIuNyw2LDYsNnM2LTIuNyw2LTZjMC0xLjEtMC4zLTIuMS0wLjgtM2MtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNkMxNy42LDUuOSwxOCw3LjQsMTgsOUMxOCwxNCwxNCwxOCw5LDE4eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPgo=");*/
	/* textcol: */
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTksMThjLTUsMC05LTQtOS05YzAtNSw0LTksOS05YzAuOCwwLDEuNSwwLjcsMS41LDEuNVM5LjgsMyw5LDNDNS43LDMsMyw1LjcsMyw5czIuNyw2LDYsNnM2LTIuNyw2LTZjMC0xLjEtMC4zLTIuMS0wLjgtM2MtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNkMxNy42LDUuOSwxOCw3LjQsMTgsOUMxOCwxNCwxNCwxOCw5LDE4eiIgZmlsbD0iIzQ5NGM0ZSIvPjwvc3ZnPgo=");
	background-repeat: no-repeat;
}

.twoColumn {
	display: flex;
	flex-wrap: nowrap;
	column-gap: 1em;

	width: 100%;
}

.twoColumn .column {
	width: 47%;
}

.list_sort_items div.group_item {
	position: relative;
	display: block;
	padding: 0.75rem 2.5rem 0.75rem 1.25rem;
	margin-bottom: -1px;
	background-color: #fff;border: 1px solid rgba(0,0,0,.3);

}
.list_sort_items .header {
	position: absolute;
	top: -2.5em;
}

.list_sort_items {
	background: #efefef;
	border: 3px dashed rgba(0, 0, 0, .3);
	border-radius: .4rem;
	position: relative;
	top: 2em;
	min-height: 2em;
	padding-bottom:1px;
}

.list_sort_items div.group_item:hover {
	background-color: #fafafa;
}

.list_sort_items.empty:after {
	color: #888;
	font-style: italic;
	font-weight: bold;
	font-size: 90%;
	position: absolute;
	padding: .5em 1em;
	display: block;
}

.list_sort_items div.group_item:nth-child(2) {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

.list_sort_items div.group_item:last-child {
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.list_sort_items .ghost {
	background: #ccc;
}
.list_sort_items .drag {
	background: #f3eacc;
}

button.prefAction {
	position: absolute;
	display: block;
	right: 1em;
	top: .75em;
	width: 20px;
	background: #fafafa;
	border-style: none;
	border-radius: 5px;
	text-align: center;
	transition: .2s;
	line-height: .8;
}

button.prefAction:hover {
	background: #ccc;
}

footer {
	position: relative;
	bottom: 0;
	left: 0;
	display: block;
	background: #eee;
	padding: 2em 3em;
}

#list_available .removeGroup, #list_preferences .addGroup {
	display: none;
}


@media screen and (max-width: 768px) {
	.twoColumn {
		display: block;
		width: 100%;

		max-width: 100%;
	}
	.twoColumn .column {
		width: auto;
		max-width: none;
	}

	#list_available {
		margin-bottom: 4em;
	}

	input[type=text] {
		width: 100%;
	}

	footer {
		padding: 1em 1.5em;
	}

	.hint {
		width: auto;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}