diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 1f0cfc4..7b125f2 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -89,755 +89,4 @@
 
 
 
-/* [3] Card style -> container
----------------------------------*/
-#CONTAINER.card > div.card.container{
-
-	order: 2;
-	flex: 1 0 calc( 100% - 20em );
-
-	display: flex;
-	min-height: 100%;
-
-	// flex properties
-	flex-direction:  row;
-	justify-content: flex-start;
-	align-items:     stretch;
-	align-content:   flex-start;
-	flex-wrap:       wrap;
-
-	z-index: 101;
-	overflow: auto;
-
-
-	/* [3.1] Card style -> instant-search
-	---------------------------------*/
-	& > input.instant-search{
-
-		display: inline-block;
-		position: relative;
-
-		flex: 1 0 70%; // 70% to almost fill the line
-		height: 1.2em;
-
-		margin: 1em .5em;
-		padding: .5em 1em;
-
-		margin-right: 0;
-
-		border-radius: 3px / 3px;
-		background-color: #fff;
-
-		box-shadow: 0 2px 2px darken(#fff, 10%);
-
-		& + button.card.toggle{
-			display: inline-block;
-			position: relative;
-
-			flex: 0 0 calc( 2em - 2*.5em );
-
-			margin: 1em .5em;
-
-			font-weight: bold;
-
-		}
-
-	}
-
-	@keyframes bounce-up{
-		from{ transform: scale(.95); }
-		to{   transform: scale(1);  }
-	}
-
-	/* (1) Card container */
-	& > section{
-
-		flex: 1 1 20em;
-
-		display: flex;
-		position: relative;
-
-		margin: 1em .5em;
-		padding: 1.5em;
-
-		border-radius: 3px / 3px;
-		border: 1px solid transparent;
-		box-shadow: 0 1px 1px darken(#fff, 20%);
-
-		&:not([data-anim='0']){
-			animation: bounce-up .2s ease-out;
-		}
-
-
-		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
-		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
-		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }
-
-		// animation for incoming element
-		@keyframes incoming{
-			from{ transform: translateY(-2em);  opacity: 0; }
-			to{ transform: translateY(0); opacity: 1; }
-		}
-
-		// animation for outgoing element
-		@keyframes outgoing{
-			from{ transform: translateY(0);  opacity: 1; }
-			to{   transform: translateY(2em); opacity: 0; }
-		}
-
-		// animation to nav in
-		&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out forwards; }
-		&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
-
-		&[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; }
-
-
-		background-color: #fff;
-
-		color: $primary-color;
-
-		// flex
-		flex-direction:  column;
-		justify-content: space-between;
-		flex-wrap:       nowrap;
-
-		z-index: 102;
-
-
-		&[data-create]{
-			border: 1px solid $form-valid-color;
-		}
-
-		// hidden mode
-		&.search-hidden,
-		&.filter-hidden{ display: none; }
-
-
-		/* (2) REMOVE+EDIT+ADMIN button */
-		& > div.goo-menu{
-
-			$btn-size:  1.8em;
-			$btn-space: 0em;
-			$nb-btn:    3;
-			$nb-spc:    $nb-btn - 1;
-
-			$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
-
-			display: inline-block;
-			position: absolute;
-				top:    1em;
-				left:   calc( 100% - 1em - #{$btn-size} - .5em );
-				width:  $btn-size;
-				height: $btn-size;
-
-			-webkit-filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);
-			filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);
-
-			cursor: pointer;
-
-			z-index: 103;
-
-			/* (2.1) Pan all on hover */
-			&:hover{
-				left:   calc( 100% - 1em - #{$cont-w} - .5em - 1em );
-				width:  calc( #{$cont-w} + 1em );
-
-				/* (2.1.1) lighter color on hover */
-				& > div.remove[data-remove],
-				& > div.edit[data-edit],
-				& > div.enabled[data-enabled],
-				& > div.admin[data-admin]{
-					background-color: darken(#fff, 12%);
-
-					/* (2.1.2) displace all but 1st element */
-					&.edit[data-edit]{   left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
-					&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
-
-				}
-
-			}
-
-			/* (2.2) Design elements */
-			& > div.remove[data-remove],
-			& > div.edit[data-edit],
-			& > div.enabled[data-enabled],
-			& > div.admin[data-admin]{
-				display: inline-block;
-				position: absolute;
-					top:    0;
-					left:   calc( 100% - #{$btn-size} );
-					width:  $btn-size;
-					height: $btn-size;
-
-
-				border-radius: 50%;
-
-				transition: background-color .1s ease-in-out,
-							left .2s ease-in-out;
-
-				background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
-				background-size:  auto 50%;
-
-				cursor: pointer;
-
-				z-index: 103;
-
-				/* (2.1) Feedback */
-				&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
-
-				/* (2.2) EDIT button */
-				&.edit[data-edit]{
-					background-image: url('/asset/svg/a.svg@aaaaaa');
-					background-size: auto 60%;
-					z-index: 104;
-
-					&:hover{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
-				}
-
-				/* (2.3) ADMIN switch */
-				&.admin[data-admin]{
-					background-image: url('/asset/svg/admin-disabled.svg@aaaaaa');
-					z-index: 105;
-
-					&:hover{                  background-image: url('/asset/svg/admin-disabled.svg@555555'); }
-					&[data-active='1']{       background-image: url('/asset/svg/admin.svg@f4bd18'); }
-					&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4a118'); }
-				}
-
-				/* (2.3) DISABLED switch */
-				&.enabled[data-enabled]{
-					background-image: url('/asset/svg/bell-disabled.svg@aaaaaa');
-					z-index: 105;
-
-					&:hover{                  background-image: url('/asset/svg/bell-disabled.svg@555555'); }
-					&[data-active='1']{       background-image: url('/asset/svg/bell.svg@f4bd18'); }
-					&[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); }
-				}
-
-			}
-
-
-
-
-		}
-
-		/* (4) Card generic title */
-		& > span.category,
-		& > select.category{
-
-			display: block;
-			position: relative;
-			width: calc( 100% - 1em );
-
-			margin-bottom: .5em;
-
-			font-size: .7em;
-			color: darken($secondary-color, 10%);
-			text-transform: uppercase;
-			letter-spacing: .05em;
-
-			z-index: 102;
-
-		}
-
-		/* (4-edit) Card generic title (select) */
-		& > select.category{
-
-			width: calc( 100% + 1em );
-			height: 3em;
-			margin:  0;
-			padding: 0;
-			margin-left:   -.4em; // emulate no <select>
-			margin-top:    -1em; // replace as if not a select
-			margin-bottom: -.3em; // fix layout for following elements
-
-			// remove border
-			border: 0;
-			border-radius: 0;
-
-			// remove arrow
-			-webkit-appearance: none; /* Safari and Chrome */
-			-moz-appearance:    none; /* Firefox */
-			appearance:         none;
-
-			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em center no-repeat;
-			background-size: auto 80%;
-
-			font-size: .7em;
-			letter-spacing: .05em;
-			font-family: inherit;
-
-
-		}
-
-		/* (5) Card title */
-		& > h1{
-
-			display: flex;
-			position: relative;
-
-			color: darken($primary-color, 5%);
-			font-size: 1em;
-
-			// flex
-			flex-direction:  row;
-			justify-content: flex-start;
-			flex-wrap:       nowrap;
-
-			// &.warning:before{
-			// 	content: '';
-
-			// 	display: inline-block;
-			// 	position: relative;
-			// 		width: 1.2em;
-			// 		height: 1em;
-
-			// 	margin-right: .3em;
-
-			// 	background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
-			// 	background-size: auto 90%;
-
-			// 	text-anchor: center;
-			// }
-
-			/* (5-edit) Card title -> edit inputs */
-			& input{
-
-				display: inline-block;
-				position: relative;
-
-				width: 10em;
-				flex-shrink: 1;
-				flex-grow: 1;
-
-				margin: 0;
-				padding: 0;
-
-				border-radius: 0;
-				border: 0;
-
-				color: darken($primary-color, 5%);
-				font-size: 1em;
-				font-weight: bold;
-				font-family: inherit;
-
-
-				background: transparent;
-			}
-
-			/* (5.1) Sub-content */
-			& > span[data-visible]{
-
-				display: inline-block;
-				color: $secondary-color;
-
-				margin: 0;
-				margin-left: .5em;
-
-				transform: scale(.9);
-
-				white-space: nowrap;
-
-				&[data-visible='0']{ display: none; }
-
-				/* (5.1-edit) input*/
-				& > input{
-					text-align: center;
-				}
-
-			}
-
-		}
-
-		/* (6) Card 2-column array */
-		& > div.table{
-
-			display: flex;
-			position: relative;
-
-			margin-top: 1em;
-			padding: .5em;
-
-			border-radius: 3px / 3px;
-			border: 1px solid darken(#fff, 15%);
-
-			// flex properties
-			flex-direction: row;
-			justify-content: space-around;
-			align-items: center;
-			flex-wrap: nowrap;
-
-			/* (6.1) Column */
-			& > div{
-
-				display: flex;
-				position: relative;
-					height: 2.3em;
-
-				padding: 0 .4em;
-
-				border-left: 1px solid darken(#fff, 15%);
-
-				color: darken($secondary-color, 20%);
-
-				&:first-child{ border-left: 0; }
-
-				// flex properties
-				flex-direction: row;
-				justify-content: space-between;
-				align-items: center;
-				flex-wrap: nowrap;
-
-				/* (6.1.1) Column Emphasis */
-				& > span,
-				& > span:first-child{
-					display: block;
-					position: relative;
-
-					margin-right: .3em;
-
-					font-size: 1.5em;
-					letter-spacing: .05em;
-
-					/* (6.1.1-edit) Editable text entry */
-					& > input{
-						display: inline-block;
-						width: 2em;
-
-						margin: 0;
-						padding: 0;
-
-						font-size: .9em;
-						text-align: center;
-
-						border-radius: 0;
-						border:        0;
-					}
-				}
-
-				/* (6.2) Column Emphasis */
-				& > span:last-child{
-					display: block;
-					position: relative;
-					min-width: 4em;
-					max-width: 6em;
-
-					font-size: .8em;
-					letter-spacing: .05em;
-					text-transform: uppercase;
-
-					overflow: hidden;
-				}
-
-
-
-			}
-
-		}
-
-		/* (7) Card footer */
-		& > div.footer{
-
-			display: flex;
-			position: relative;
-				margin-top: 1.3em;
-				margin-left: -1.5em;
-				height: 3.5em;
-				//           100% + parent.margin - padding
-				width: calc( 100% + 2*1.5em - 2*2em );
-
-			// remove card bottom padding
-			margin-bottom: -1.5em;
-
-			padding: 0 2em;
-
-			border-top: 1px solid darken(#fff, 10%);
-			&:last-of-type{ border-radius: 0 0 3px 3px; }
-			background-color: #fafbfd;
-
-			// flex properties
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-			align-content: center;
-			flex-wrap: nowrap;
-
-
-			/* (7.1) Card footer element */
-			& > span{
-
-				display: flex;
-				position: relative;
-				height: 1.3em;
-
-				color: darken($secondary-color, 20%);
-
-				// center text
-				flex-direction: row;
-				justify-content: center;
-				align-items: center;
-				flex-wrap: nowrap;
-
-				&:before{
-					content: '';
-
-					display: inline-block;
-					position: relative;
-						width: 1.3em;
-						height: 1.3em;
-
-					margin-right: .4em;
-
-					background: transparent center center no-repeat;
-					background-size: 80% auto;
-
-				}
-
-				// specific icons
-				&.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); }
-				&.td:before{     background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); }
-				&.tp:before{     background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); }
-
-				// hover icons
-				&.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
-				&.td.active:before{     background-image: url('/asset/svg/td.svg@20b565'); }
-				&.tp.active:before{     background-image: url('/asset/svg/tp.svg@e85456'); }
-
-				& > span{
-					display: inline;
-
-					padding-left: .5em;
-					color: #bbb;
-
-					font-size: .9em;
-					text-transform: uppercase;
-				}
-
-				/* (7.1-edit) Card footer input */
-				& > input{
-					width: 2.5em;
-
-					margin: 0;
-					padding: 0;
-
-					border: 0;
-				}
-
-
-			}
-
-			/* (7.1-edit) Card button submit */
-			& > button{
-				margin: auto;
-			}
-
-			/* (7.2) Card footer separator */
-			& > hr{
-				display: block;
-				position: relative;
-					width: 1px;
-					height: 1em;
-
-				border: 0;
-				background-color: darken(#fff, 10%);
-			}
-		}
-
-		/* (8) Card sub */
-		& > div.sub{
-
-			display: inline-block;
-			margin-top: 1em;
-
-			color: lighten($primary-color, 20%);
-
-		}
-
-
-
-	}
-
-}
-
-
-
-
-/* [4] Card style -> filter
----------------------------------*/
-#CONTAINER.card > div.card.filter{
-
-	order: 1;
-	flex: 1 0 calc( 90% );
-
-	display: flex;
-	min-height: calc( 4em - 2*.5em - 2*.5em );
-
-	margin: .5em;
-	padding: .5em;
-
-	border-radius: 3px / 3px;
-	background-color: #fff;
-
-	// background-color: #0f0;
-
-	box-shadow: 0 2px 2px darken(#fff, 10%);
-
-	// flex
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	flex-wrap: wrap;
-
-	z-index: 110;
-
-	overflow: visible;
-	// overflow-y: visible;
-
-	/* (1) Filter Group */
-	& > div[title]{
-
-		flex: 0 1 5em;
-
-		display: block;
-		position: relative;
-
-		margin: .5em 1em;
-
-		/* (1.1) Title content */
-		& > div.fold-toggle{
-			content: attr(title);
-
-			display: inline-block;
-			position: relative;
-
-			padding-right: 1em;
-
-			font-size: .8em;
-			color: darken($secondary-color, 10%);
-			text-transform: uppercase;
-			letter-spacing: .05em;
-
-			cursor: pointer;
-
-			transition: color .2s ease-in-out;
-
-			&:hover{
-				color: $primary-color;
-			}
-
-			&[data-count]:after{
-				content: attr(data-count);
-
-				display: inline-block;
-				position: absolute;
-					margin-top: -.1em;
-					margin-left: .5em;
-					width:  1em;
-					height: clac( 1.5em - 2*.2em );
-
-				padding: .2em .5em;
-
-				border-radius: 3px;
-
-				background: $form-valid-color;
-
-				color: #fff;
-				font-size: .8em;
-				text-align: center;
-
-			}
-
-			// greyed when 0
-			&[data-count='0']:after{ background-color: #ddd; }
-
-		}
-
-
-
-		/* (1.2) Filter box */
-		& > div.fold{
-
-			display: none;
-			position: absolute;
-				width: 15em;
-				height: 15em;
-				margin-top: 2em;
-
-			border: 1px solid #ddd;
-			border-radius: 3px;
-
-			background-color: #fff;
-
-			flex-direction:  column;
-			justify-content: flex-start;
-			align-items:     stretch;
-			flex-wrap:       nowrap;
-
-			overflow: hidden;
-			overflow-y: auto;
-
-			/* (1.3) Filter item */
-			& > span{
-
-				display: block;
-				position: relative;
-
-				padding: .5em 0;
-				padding-left: 2em;
-
-				background-color: #fff;
-				&:hover{ background-color: darken(#fff,5%); }
-
-				&:nth-child(2n){
-					background-color: #f9f9f9;
-					&:hover{ background-color: darken(#f9f9f9,5%); }
-				}
-
-
-				-moz-user-select:    none;
-				-ms-user-select:     none;
-				-webkit-user-select: none;
-				user-select:         none;
-
-				cursor: pointer;
-
-				transition: background-color .2s ease-in-out;
-
-				/* (1.3.1) Pseudo-checkbox */
-				&:before{
-					content: '';
-
-					display: block;
-					position: absolute;
-						margin-top:  .2em;
-						margin-left: calc( .5em - 2em );
-						width:       calc( 1em - .2em );
-						height:      calc( 1em - .2em );
-
-					border-radius: 50%;
-					background: $form-valid-color;
-
-					transform: scale(0);
-					transition: transform .1s ease-in-out;
-
-					cursor: pointer;
-				}
-
-				/* (1.3.2) Active pseudo-checkbox */
-				&.active:before{
-					transform: scale(1);
-				}
-
-			}
-
-		}
-
-		// only show item box if filter_group has 'data-show'
-		& > div.fold-toggle[data-show='1'] + div.fold{
-			display: flex;
-		}
-
-	}
-
-
-}
\ No newline at end of file
+@import 'container/card';
\ No newline at end of file
diff --git a/webpack/scss/container/card.scss b/webpack/scss/container/card.scss
new file mode 100644
index 0000000..6e41ae1
--- /dev/null
+++ b/webpack/scss/container/card.scss
@@ -0,0 +1,756 @@
+@import '../constants';
+
+
+
+/* [3] Card style -> container
+---------------------------------*/
+#CONTAINER.card > div.card.container{
+
+	order: 2;
+	flex: 1 0 calc( 100% - 20em );
+
+	display: flex;
+	min-height: 100%;
+
+	// flex properties
+	flex-direction:  row;
+	justify-content: flex-start;
+	align-items:     stretch;
+	align-content:   flex-start;
+	flex-wrap:       wrap;
+
+	z-index: 101;
+	overflow: auto;
+
+
+	/* [3.1] Card style -> instant-search
+	---------------------------------*/
+	& > input.instant-search{
+
+		display: inline-block;
+		position: relative;
+
+		flex: 1 0 70%; // 70% to almost fill the line
+		height: 1.2em;
+
+		margin: 1em .5em;
+		padding: .5em 1em;
+
+		margin-right: 0;
+
+		border-radius: 3px / 3px;
+		background-color: #fff;
+
+		box-shadow: 0 2px 2px darken(#fff, 10%);
+
+		& + button.card.toggle{
+			display: inline-block;
+			position: relative;
+
+			flex: 0 0 calc( 2em - 2*.5em );
+
+			margin: 1em .5em;
+
+			font-weight: bold;
+
+		}
+
+	}
+
+	@keyframes bounce-up{
+		from{ transform: scale(.95); }
+		to{   transform: scale(1);  }
+	}
+
+	/* (1) Card container */
+	& > section{
+
+		flex: 1 1 20em;
+
+		display: flex;
+		position: relative;
+
+		margin: 1em .5em;
+		padding: 1.5em;
+
+		border-radius: 3px / 3px;
+		border: 1px solid transparent;
+		box-shadow: 0 1px 1px darken(#fff, 20%);
+
+		&:not([data-anim='0']){
+			animation: bounce-up .2s ease-out;
+		}
+
+
+		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
+		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
+		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }
+
+		// animation for incoming element
+		@keyframes incoming{
+			from{ transform: translateY(-2em);  opacity: 0; }
+			to{ transform: translateY(0); opacity: 1; }
+		}
+
+		// animation for outgoing element
+		@keyframes outgoing{
+			from{ transform: translateY(0);  opacity: 1; }
+			to{   transform: translateY(2em); opacity: 0; }
+		}
+
+		// animation to nav in
+		&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out forwards; }
+		&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
+
+		&[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; }
+
+
+		background-color: #fff;
+
+		color: $primary-color;
+
+		// flex
+		flex-direction:  column;
+		justify-content: space-between;
+		flex-wrap:       nowrap;
+
+		z-index: 102;
+
+
+		&[data-create]{
+			border: 1px solid $form-valid-color;
+		}
+
+		// hidden mode
+		&.search-hidden,
+		&.filter-hidden{ display: none; }
+
+
+		/* (2) REMOVE+EDIT+ADMIN button */
+		& > div.goo-menu{
+
+			$btn-size:  1.8em;
+			$btn-space: 0em;
+			$nb-btn:    3;
+			$nb-spc:    $nb-btn - 1;
+
+			$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
+
+			display: inline-block;
+			position: absolute;
+				top:    1em;
+				left:   calc( 100% - 1em - #{$btn-size} - .5em );
+				width:  $btn-size;
+				height: $btn-size;
+
+			-webkit-filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);
+			filter: url('/asset/svg/filter.svg#goo-menu') drop-shadow(-5px 0 0 #fff);
+
+			cursor: pointer;
+
+			z-index: 103;
+
+			/* (2.1) Pan all on hover */
+			&:hover{
+				left:   calc( 100% - 1em - #{$cont-w} - .5em - 1em );
+				width:  calc( #{$cont-w} + 1em );
+
+				/* (2.1.1) lighter color on hover */
+				& > div.remove[data-remove],
+				& > div.edit[data-edit],
+				& > div.enabled[data-enabled],
+				& > div.admin[data-admin]{
+					background-color: darken(#fff, 12%);
+
+					/* (2.1.2) displace all but 1st element */
+					&.edit[data-edit]{   left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
+					&.remove[data-remove]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
+
+				}
+
+			}
+
+			/* (2.2) Design elements */
+			& > div.remove[data-remove],
+			& > div.edit[data-edit],
+			& > div.enabled[data-enabled],
+			& > div.admin[data-admin]{
+				display: inline-block;
+				position: absolute;
+					top:    0;
+					left:   calc( 100% - #{$btn-size} );
+					width:  $btn-size;
+					height: $btn-size;
+
+
+				border-radius: 50%;
+
+				transition: background-color .1s ease-in-out,
+							left .2s ease-in-out;
+
+				background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
+				background-size:  auto 50%;
+
+				cursor: pointer;
+
+				z-index: 103;
+
+				/* (2.1) Feedback */
+				&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
+
+				/* (2.2) EDIT button */
+				&.edit[data-edit]{
+					background-image: url('/asset/svg/a.svg@aaaaaa');
+					background-size: auto 60%;
+					z-index: 104;
+
+					&:hover{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
+				}
+
+				/* (2.3) ADMIN switch */
+				&.admin[data-admin]{
+					background-image: url('/asset/svg/admin-disabled.svg@aaaaaa');
+					z-index: 105;
+
+					&:hover{                  background-image: url('/asset/svg/admin-disabled.svg@555555'); }
+					&[data-active='1']{       background-image: url('/asset/svg/admin.svg@f4bd18'); }
+					&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4a118'); }
+				}
+
+				/* (2.3) DISABLED switch */
+				&.enabled[data-enabled]{
+					background-image: url('/asset/svg/bell-disabled.svg@aaaaaa');
+					z-index: 105;
+
+					&:hover{                  background-image: url('/asset/svg/bell-disabled.svg@555555'); }
+					&[data-active='1']{       background-image: url('/asset/svg/bell.svg@f4bd18'); }
+					&[data-active='1']:hover{ background-image: url('/asset/svg/bell.svg@f4a118'); }
+				}
+
+			}
+
+
+
+
+		}
+
+		/* (4) Card generic title */
+		& > span.category,
+		& > select.category{
+
+			display: block;
+			position: relative;
+			width: calc( 100% - 1em );
+
+			margin-bottom: .5em;
+
+			font-size: .7em;
+			color: darken($secondary-color, 10%);
+			text-transform: uppercase;
+			letter-spacing: .05em;
+
+			z-index: 102;
+
+		}
+
+		/* (4-edit) Card generic title (select) */
+		& > select.category{
+
+			width: calc( 100% + 1em );
+			height: 3em;
+			margin:  0;
+			padding: 0;
+			margin-left:   -.4em; // emulate no <select>
+			margin-top:    -1em; // replace as if not a select
+			margin-bottom: -.3em; // fix layout for following elements
+
+			// remove border
+			border: 0;
+			border-radius: 0;
+
+			// remove arrow
+			-webkit-appearance: none; /* Safari and Chrome */
+			-moz-appearance:    none; /* Firefox */
+			appearance:         none;
+
+			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em center no-repeat;
+			background-size: auto 80%;
+
+			font-size: .7em;
+			letter-spacing: .05em;
+			font-family: inherit;
+
+
+		}
+
+		/* (5) Card title */
+		& > h1{
+
+			display: flex;
+			position: relative;
+
+			color: darken($primary-color, 5%);
+			font-size: 1em;
+
+			// flex
+			flex-direction:  row;
+			justify-content: flex-start;
+			flex-wrap:       nowrap;
+
+			// &.warning:before{
+			// 	content: '';
+
+			// 	display: inline-block;
+			// 	position: relative;
+			// 		width: 1.2em;
+			// 		height: 1em;
+
+			// 	margin-right: .3em;
+
+			// 	background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
+			// 	background-size: auto 90%;
+
+			// 	text-anchor: center;
+			// }
+
+			/* (5-edit) Card title -> edit inputs */
+			& input{
+
+				display: inline-block;
+				position: relative;
+
+				width: 10em;
+				flex-shrink: 1;
+				flex-grow: 1;
+
+				margin: 0;
+				padding: 0;
+
+				border-radius: 0;
+				border: 0;
+
+				color: darken($primary-color, 5%);
+				font-size: 1em;
+				font-weight: bold;
+				font-family: inherit;
+
+
+				background: transparent;
+			}
+
+			/* (5.1) Sub-content */
+			& > span[data-visible]{
+
+				display: inline-block;
+				color: $secondary-color;
+
+				margin: 0;
+				margin-left: .5em;
+
+				transform: scale(.9);
+
+				white-space: nowrap;
+
+				&[data-visible='0']{ display: none; }
+
+				/* (5.1-edit) input*/
+				& > input{
+					text-align: center;
+				}
+
+			}
+
+		}
+
+		/* (6) Card 2-column array */
+		& > div.table{
+
+			display: flex;
+			position: relative;
+
+			margin-top: 1em;
+			padding: .5em;
+
+			border-radius: 3px / 3px;
+			border: 1px solid darken(#fff, 15%);
+
+			// flex properties
+			flex-direction: row;
+			justify-content: space-around;
+			align-items: center;
+			flex-wrap: nowrap;
+
+			/* (6.1) Column */
+			& > div{
+
+				display: flex;
+				position: relative;
+					height: 2.3em;
+
+				padding: 0 .4em;
+
+				border-left: 1px solid darken(#fff, 15%);
+
+				color: darken($secondary-color, 20%);
+
+				&:first-child{ border-left: 0; }
+
+				// flex properties
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: nowrap;
+
+				/* (6.1.1) Column Emphasis */
+				& > span,
+				& > span:first-child{
+					display: block;
+					position: relative;
+
+					margin-right: .3em;
+
+					font-size: 1.5em;
+					letter-spacing: .05em;
+
+					/* (6.1.1-edit) Editable text entry */
+					& > input{
+						display: inline-block;
+						width: 2em;
+
+						margin: 0;
+						padding: 0;
+
+						font-size: .9em;
+						text-align: center;
+
+						border-radius: 0;
+						border:        0;
+					}
+				}
+
+				/* (6.2) Column Emphasis */
+				& > span:last-child{
+					display: block;
+					position: relative;
+					min-width: 4em;
+					max-width: 6em;
+
+					font-size: .8em;
+					letter-spacing: .05em;
+					text-transform: uppercase;
+
+					overflow: hidden;
+				}
+
+
+
+			}
+
+		}
+
+		/* (7) Card footer */
+		& > div.footer{
+
+			display: flex;
+			position: relative;
+				margin-top: 1.3em;
+				margin-left: -1.5em;
+				height: 3.5em;
+				//           100% + parent.margin - padding
+				width: calc( 100% + 2*1.5em - 2*2em );
+
+			// remove card bottom padding
+			margin-bottom: -1.5em;
+
+			padding: 0 2em;
+
+			border-top: 1px solid darken(#fff, 10%);
+			&:last-of-type{ border-radius: 0 0 3px 3px; }
+			background-color: #fafbfd;
+
+			// flex properties
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			align-content: center;
+			flex-wrap: nowrap;
+
+
+			/* (7.1) Card footer element */
+			& > span{
+
+				display: flex;
+				position: relative;
+				height: 1.3em;
+
+				color: darken($secondary-color, 20%);
+
+				// center text
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				flex-wrap: nowrap;
+
+				&:before{
+					content: '';
+
+					display: inline-block;
+					position: relative;
+						width: 1.3em;
+						height: 1.3em;
+
+					margin-right: .4em;
+
+					background: transparent center center no-repeat;
+					background-size: 80% auto;
+
+				}
+
+				// specific icons
+				&.course:before{ background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}'); }
+				&.td:before{     background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}'); }
+				&.tp:before{     background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}'); }
+
+				// hover icons
+				&.course.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
+				&.td.active:before{     background-image: url('/asset/svg/td.svg@20b565'); }
+				&.tp.active:before{     background-image: url('/asset/svg/tp.svg@e85456'); }
+
+				& > span{
+					display: inline;
+
+					padding-left: .5em;
+					color: #bbb;
+
+					font-size: .9em;
+					text-transform: uppercase;
+				}
+
+				/* (7.1-edit) Card footer input */
+				& > input{
+					width: 2.5em;
+
+					margin: 0;
+					padding: 0;
+
+					border: 0;
+				}
+
+
+			}
+
+			/* (7.1-edit) Card button submit */
+			& > button{
+				margin: auto;
+			}
+
+			/* (7.2) Card footer separator */
+			& > hr{
+				display: block;
+				position: relative;
+					width: 1px;
+					height: 1em;
+
+				border: 0;
+				background-color: darken(#fff, 10%);
+			}
+		}
+
+		/* (8) Card sub */
+		& > div.sub{
+
+			display: inline-block;
+			margin-top: 1em;
+
+			color: lighten($primary-color, 20%);
+
+		}
+
+
+
+	}
+
+}
+
+
+
+
+/* [4] Card style -> filter
+---------------------------------*/
+#CONTAINER.card > div.card.filter{
+
+	order: 1;
+	flex: 1 0 calc( 90% );
+
+	display: flex;
+	min-height: calc( 4em - 2*.5em - 2*.5em );
+
+	margin: .5em;
+	padding: .5em;
+
+	border-radius: 3px / 3px;
+	background-color: #fff;
+
+	// background-color: #0f0;
+
+	box-shadow: 0 2px 2px darken(#fff, 10%);
+
+	// flex
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	flex-wrap: wrap;
+
+	z-index: 110;
+
+	overflow: visible;
+	// overflow-y: visible;
+
+	/* (1) Filter Group */
+	& > div[title]{
+
+		flex: 0 1 5em;
+
+		display: block;
+		position: relative;
+
+		margin: .5em 1em;
+
+		/* (1.1) Title content */
+		& > div.fold-toggle{
+			content: attr(title);
+
+			display: inline-block;
+			position: relative;
+
+			padding-right: 1em;
+
+			font-size: .8em;
+			color: darken($secondary-color, 10%);
+			text-transform: uppercase;
+			letter-spacing: .05em;
+
+			cursor: pointer;
+
+			transition: color .2s ease-in-out;
+
+			&:hover{
+				color: $primary-color;
+			}
+
+			&[data-count]:after{
+				content: attr(data-count);
+
+				display: inline-block;
+				position: absolute;
+					margin-top: -.1em;
+					margin-left: .5em;
+					width:  1em;
+					height: clac( 1.5em - 2*.2em );
+
+				padding: .2em .5em;
+
+				border-radius: 3px;
+
+				background: $form-valid-color;
+
+				color: #fff;
+				font-size: .8em;
+				text-align: center;
+
+			}
+
+			// greyed when 0
+			&[data-count='0']:after{ background-color: #ddd; }
+
+		}
+
+
+
+		/* (1.2) Filter box */
+		& > div.fold{
+
+			display: none;
+			position: absolute;
+				width: 15em;
+				height: 15em;
+				margin-top: 2em;
+
+			border: 1px solid #ddd;
+			border-radius: 3px;
+
+			background-color: #fff;
+
+			flex-direction:  column;
+			justify-content: flex-start;
+			align-items:     stretch;
+			flex-wrap:       nowrap;
+
+			overflow: hidden;
+			overflow-y: auto;
+
+			/* (1.3) Filter item */
+			& > span{
+
+				display: block;
+				position: relative;
+
+				padding: .5em 0;
+				padding-left: 2em;
+
+				background-color: #fff;
+				&:hover{ background-color: darken(#fff,5%); }
+
+				&:nth-child(2n){
+					background-color: #f9f9f9;
+					&:hover{ background-color: darken(#f9f9f9,5%); }
+				}
+
+
+				-moz-user-select:    none;
+				-ms-user-select:     none;
+				-webkit-user-select: none;
+				user-select:         none;
+
+				cursor: pointer;
+
+				transition: background-color .2s ease-in-out;
+
+				/* (1.3.1) Pseudo-checkbox */
+				&:before{
+					content: '';
+
+					display: block;
+					position: absolute;
+						margin-top:  .2em;
+						margin-left: calc( .5em - 2em );
+						width:       calc( 1em - .2em );
+						height:      calc( 1em - .2em );
+
+					border-radius: 50%;
+					background: $form-valid-color;
+
+					transform: scale(0);
+					transition: transform .1s ease-in-out;
+
+					cursor: pointer;
+				}
+
+				/* (1.3.2) Active pseudo-checkbox */
+				&.active:before{
+					transform: scale(1);
+				}
+
+			}
+
+		}
+
+		// only show item box if filter_group has 'data-show'
+		& > div.fold-toggle[data-show='1'] + div.fold{
+			display: flex;
+		}
+
+	}
+
+
+}
\ No newline at end of file