:root {
	--color-primary: #1c548c;
}

@media (min-width: 768px) {
	#modules .item {
		flex-basis: 15%;
	}
	#modules .item.select {
		flex-basis: 40%;
	}
}

.expand_toggle {
	display: block; position: absolute;
	right: 1rem; top: 1rem;
	font-size: 1.25rem;
	cursor: pointer;
}
.expand_toggle .icon {
	display: block;
	rotate: 0deg;
	color: #333;
	transition: rotate 0.25s;
}
.expand_toggle.open .icon {
	rotate: 180deg;
	color: #999;
}
.expand_toggle .icon i { font-family: "Font Awesome 6 Pro"; font-weight: 900; }
.expand_toggle.open .icon i { font-weight: 300; }
.expand_toggle .icon i::before { content: "\f055"; }
.expand_toggle.open .icon i::before { content: "\f056"; }

.tabsbar {
	display: block;
	margin: 0 0 1.5rem 0;
	border-bottom: 3px solid #111;
}
.tabsbar .tabs {
	display: flex; gap: 0.5rem;
}
.tabsbar .tabs .tab {
	flex: 0 0 fit-content; position: relative;
	padding: 1rem 1.5rem;
	background: #ddd;
	color: #333; font-weight: 600;
	cursor: pointer;
}
.tabsbar .tabs .tab.active {
	background: #333;
	color: #fff;
}
.tabblock {
	display: none;
}
.tabblock.active {
	display: block;
}

.filterbar {
	display: flex; align-items: center; gap: 0.5rem;
	margin-bottom: 1.125rem; padding-bottom: 0.25rem;
	border-bottom: 1px solid #777;

}
.filterbar span {
	flex: 0 0 fit-content;
}
.filterbar .label {
	flex: 1 1 auto;
	display: block;
	padding: 0.25rem 0.5rem;
	font-size: 0.9375rem; text-align: right;
}
.filterbar .filter button {
	display: block;
	padding: 0.25rem 0.5rem;
	background: #e5e5e5; border: 1px solid #ddd;
	font-size: 1rem; color: #333; line-height: 1; white-space: nowrap;
	cursor: pointer;
}

.scrollblock {
	display: block; position: relative; overflow: scroll;
	max-height: 7rem; margin: 1.125rem 0 0 0; padding: 1rem;
	background: #e5e5e5; border: 1px solid #ccc;
}

.toggleblock {
	display: block;
	margin: 0.5rem 0 0 0; padding: 0.5rem;
	background: #eee; /* box-shadow: 0 0 1px #555; */ border: 1px solid #ddd;
}
.toggleblock:first-child {
	margin-top: 0;
}
.toggleblock .toggleitem {
	display: flex; gap: 0.5rem; align-items: center;
	margin: 0.5rem 0 0 0;
}
.toggleblock .toggleitem:first-child {
	margin-top: 0;
}
.toggleblock .toggleitem.disabled {
	opacity: 0.45;
}
.toggleblock .toggleitem .toggle {
	flex: 0 0 fit-content;
	height: 1.5rem;
}
.toggleblock .toggleitem .toggle .switch {
	display: inline-block; position: relative;
	width: 2.5rem; height: 1.5rem;
	background: #fff; box-shadow: 0 0 1px #333 inset;
}
.toggleblock .toggleitem .toggle .switch .knob {
	display: block; position: absolute;
	top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem;
	background: #ccc;
	transition: left 0.25s, background-color 0.1s;
}
.toggleblock .toggleitem .toggle .knob:after {
	content: "";
	display: block; position: absolute;
	top: 0; right: 0; width: 1rem;
	font-family: "Font Awesome 6 Pro"; font-size: 0.9375rem; font-weight: 900; line-height: 1rem; text-align: center; color: #fff;
}
.toggleblock .toggleitem.checked .toggle .knob {
	left: 1.25rem;
	background: #090;
}
.toggleblock .toggleitem.checked .toggle .knob:after {
	content: "\f00c";
	width: 0.9375rem;
	font-size: 0.625rem;
}
.toggleblock .toggleitem.syncing .toggle .knob {
	left: 0.625rem;
	border-radius: 1rem;
}
.toggleblock .toggleitem.syncing .toggle .knob:after {
	content: "\e1d4";
	font-size: 0.625rem;
}
.toggleblock .toggleitem.locked .toggle .knob:after {
	content: "\f023";
	font-size: 0.625rem;
}
.toggleblock .toggleitem .label {
	flex: 1 1 auto;
}
.toggleblock .toggleitem .label .note {
	color: #555;
}

.pickblock {
	display: block;
	margin: 0.5rem 0 0 0; 
	background: #eee; /* box-shadow: 0 0 1px #555; */ border: 1px solid #ddd;
}
.pickblock:first-child {
	margin-top: 0;
}
.pickblock .pickitem {
	display: flex; gap: 0.5rem; align-items: center;
	padding: 0.75rem;
	border-top: 1px solid #ddd;
	cursor: pointer;
}
.pickblock .pickitem:first-child {
	border-top: none;
}
.pickblock .pickitem .ctrl {
	display: block; position: relative;
	width: 1.25rem; height: 1.25rem;
}
.pickblock .pickitem .ctrl .icon {
	display: block; position: relative;
	width: 1.25rem; height: 1.25rem;
}
.pickblock .pickitem .ctrl .icon:after {
	content: "\f055";
	display: block; position: absolute;
	top: 0; left: 0; width: 1rem;
	font-family: "Font Awesome 6 Pro"; font-size: 1.25rem; font-weight: 900; line-height: 1.25rem; text-align: center; color: #000;
}
.pickblock .pickitem.syncing .ctrl .icon:after {
	content: "\e10a";
	font-weight: 300;
}
.pickblock .pickitem.picked .ctrl .icon:after {
	content: "\f058";
	font-weight: 400;
}
.pickblock .pickitem .label {
	flex: 1 1 auto;
}
.pickblock .pickitem .label .note {
	color: #555;
}
.pickblock .pickitem.disabled .label {
	opacity: 0.3;
}

.answerblock {
}
.answerblock .answeritem {
	display: flex; align-items: center;
	padding: 1rem 0;
	border-top: 1px solid #ccc;
}
.answerblock .answeritem .info {
	flex: 1 1 auto;
}
.answerblock .answeritem .label {
	display: block;
	font-weight: 600;
}
.answerblock .answeritem .description {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
}
.answerblock .answeritem .icon {
	flex: 0 0 1.375rem;
	margin-left: 1rem;
	font-size: 0.9375rem; color: #777;
}
.answerblock .answeritem .answer {
	flex: 0 0 12rem;
	position: relative;
}
.answerblock .answeritem .answer.suffixed input {
	padding-right: 5rem;
	text-align: right;
}
.answerblock .answeritem .answer .suffix {
	display: block; position: absolute;
	right: 0.75rem; bottom: calc(0.75rem + 1px);
	color: #999; line-height: 1.5rem;
}

.guides {
	padding: 0.75rem;
	border: 1px solid #ddd; border-left: none; border-right: none;
}
.guides .guide {
	margin-top: 0.5rem;
}
.guides .guide:first-child {
	margin-top: 0;
}
.guides .guide i {
	width: 1rem; margin-right: 0.375rem;
}
.guides .guide .note {
	margin-left: 0.375rem;
	color: #555;
}