register_modules/app/assets/stylesheets/register_module/module_store.scss

#module-store{
	margin-top: 100px;
	margin-bottom: 50px;
	margin-left: 20px;
	.filter{
		border: 1px solid #3e97f1;
		display: inline-block;
		background-color: #f0f0f0;
		// box-shadow: 5px 5px #cecece;
		width: 225px;
		min-height: 300px;
		color: #3e6fd4;
		border-radius: 5px;
		h3{
			background-color: #3e97f1;
			color: #fff;
			margin-top: 0px;
			padding-top: 10px;
			text-align: center;
			border-bottom: 1px solid #7c7c7c;
			padding-bottom: 10px;
			font-size: 20px;
			border-radius: 5px 5px 0 0;
			// box-shadow: 5px 0 #3e97f1;

		}
		.filter-checkbox{
			padding: 0;
			margin: 0 5px;
			padding-bottom: 5px;
			height: 15px;
		}
		label{
			margin-bottom: 0px;
		}
		.module-type {
			ul{
				margin-top: 20px;
				list-style: none;
				padding-left: 15px;
				li{
					margin-bottom: 10px;
				}
			}
		}
		.tag-filter{
			h4{
				margin-left: 10px;
				font-size: 17px;
				margin-top: 5px;
			}
			ul{
				margin-top: 20px;
				list-style: none;
				padding-left: 15px;
				li{
					margin-bottom: 10px;
				}
			}
		}
		.filter-column {
			padding: 10px;
			margin: 10px;
			padding-bottom: 15px;
			border-bottom: 1px dotted #7c7c7c;
		}
	}

	.app-holder{
		display: inline-block;
		vertical-align: top;
		margin-left: 50px;
		width: calc(100% - 300px);
		h3.heading{
			margin-top: 0px;
			margin-bottom: 35px;
			padding-bottom: 15px;
			border-bottom: 1px dotted #7d7d7d;
			color: #7d7d7d;
		}
		ul.app-list{
			list-style: none;
			li.app{
				display: inline-block;
				width: 200px;
				height: 250px;
				margin-right: 50px;
				margin-bottom: 75px;
				border-radius: 2px;
				color: #fff;
				text-align: center;
				

				&.optional{
					background-color: #cfb891;
					.icon {
						i{
							color: #a76664;
						}
					}
				}
				&.default{
					background-color: #99b0c7;	
					.icon {
						i{
							color: #3471af;
						}
					}
				}
				div.icon{
					// border: 1px solid #cecece;
					background-color: #fff;
					font-size: 6em;
					width: calc(100% - 10px);
					margin-top: 5px;
					margin-bottom: 10px;
					i.no-logo{
						font-size: 0.4em;
					}
				}
				div.app-info{
					margin-left: 20px;
					text-align: left;
					.name{
						font-size: 18px;
						font-weight: bold;
					}
				}
				div.module-type{
					display: inline;
					position: relative;
					bottom: -20px;
					padding: 0 10px;
					border-radius: 10px;
					// margin: 20px 5px 0 5px;
					// width: calc(100% - 10px);
					background-color: #fff;
					color: #7c7c7c;
					font-weight: bold;
					font-size: 16px;
				}
			}
		}
	}
}