padma-assets 0.1.32 → 0.2.0

data/app/assets/stylesheets/common/custom.scss

@@ -0,0 +1,1611 @@
+@import "variables";
+@import "../custom/colors";
+
+// Declare new variables
+$font-color-th: #666;
+$font-color-th-link: #2c69b8;
+
+.table {
+	border-top: 4px solid #ebebeb;
+	> caption + thead > tr:first-child > td,
+	> caption + thead > tr:first-child > th,
+	> colgroup + thead > tr:first-child > td,
+	> colgroup + thead > tr:first-child > th,
+	> thead:first-child > tr:first-child > td,
+	> thead:first-child > tr:first-child > th {
+		border-bottom: 1px solid #ebebeb;
+	}
+	> thead > tr > th,
+	> tbody > tr > th {
+		border-bottom-width: 1px;
+		color: $font-color-th;
+		font: {
+			family: $font-family-base;
+			size: $font-size-base-xs;
+			weight: bold;
+		}
+		text-transform: uppercase;
+		vertical-align: middle;
+		> p {
+			display: table;
+			width: 100%;
+			> a {
+				display: table-cell;
+				max-width: 200px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				@media (max-width: $screen-sm-min - 1) {
+					max-width: 100px;
+				}
+				&.asc,
+				&.desc {
+					position: relative;
+					padding-right: 20px;
+					&:after {
+						font: {
+							family: "Glyphicons Halflings";
+							style: normal;
+							weight: 400;
+						}
+						line-height: 1;
+					    -webkit-font-smoothing: antialiased;
+    					-moz-osx-font-smoothing: grayscale;
+    					position: absolute;
+    					right: 0;
+    					top: 1px;
+					}
+				}
+				&.desc:after {
+					content: "\e252";
+				}
+				&.asc:after {
+					content: "\e253";
+				}
+			}
+		}
+		a {
+			color: $font-color-th-link;
+			cursor: pointer;
+			&:hover,
+			&:focus,
+			&.focus {
+				color: darken($font-color-th-link, 10%);
+			}
+		}
+	}
+	> thead,
+	> tbody {
+		> tr {
+			> th,
+			> td {
+				border: none;
+				padding-bottom: 18px;
+				padding-top: 18px;
+			}
+		}
+	}
+	> tbody,
+	> tfoot {
+		> tr {
+			> th:first-child {
+				color: $font-color-th;
+			}
+			> td {
+				color: $gray-base;
+				font: {
+					family: $font-family-base;
+					size: $font-size-base-sm;
+				}
+				&.td-checkbox,
+				&.td-radio {
+					width: 1%;
+				}
+				&.td-actions {
+					text-align: right;
+					vertical-align: middle;
+				}
+				&.pending {
+					background-color: darken($bg-lightgrey, 10%);
+				}
+				.progress {
+					margin: 0;
+				}
+			}
+		}
+	}
+}
+
+.table-hover {
+	> tbody {
+		> tr {
+			&:hover {
+				> th,
+				> td {
+					background-color: $bg-lightgrey;
+				}
+			}
+		}
+	}
+}
+
+.table-bordered {
+	> thead,
+	> tbody,
+	> tfoot {
+		> tr {
+			> th,
+			> td {
+				border: 1px solid #ddd;
+			}
+		}
+	}
+}
+
+.table-noborder {
+	> thead,
+	> tbody,
+	> tfoot {
+		> tr {
+			> th,
+			> td {
+				border: none;
+			}
+		}
+	}
+}
+
+// table-sticky js
+.sticky-wrap {
+	margin-bottom: 15px;
+	overflow-x: auto;
+	overflow-y: hidden;
+	position: relative;
+	width: 100%;
+	.sticky-thead,
+	.sticky-col,
+	.sticky-intersect {
+		font-weight: bold;
+		left: 0;
+		opacity: 0;
+		position: absolute;
+		-webkit-transition: .25s cubic-bezier(0.1, 0.82, 0.25, 1);
+		transition: .25s cubic-bezier(0.1, 0.82, 0.25, 1);
+		top: 0;
+		width: auto; // Prevent table from stretching to full size
+	}
+	.sticky-thead {
+		box-shadow: 0 2px 2px -1px rgba(#000, .1);
+		width: 100% !important; // Force width - problem in webkit.
+	}
+	.sticky-intersect {
+		opacity: 1;
+		th {
+			background-color: #f2f2f2;
+			color: #4D4D4D;
+		}
+	}
+}
+
+.table-striped {
+	> tbody {
+		> tr {
+			&:nth-child(odd){
+				background-color: transparent;
+			}
+			&:nth-child(even) {
+				background-color: #f5f5f5;
+			}
+		}
+	}
+}
+
+.sticky-thead {
+	> thead {
+		> tr {
+			> th,
+			> td {
+				background-color: #fff;
+				border: 1px solid #ddd;
+				color: $font-color-th;
+				font: {
+					size: $font-size-base-xs;
+				}
+				padding: 8px;
+				text-transform: uppercase;
+				> p {
+					display: table;
+					width: 100%;
+					> a {
+						display: table-cell;
+						max-width: 200px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						@media (max-width: $screen-sm-min - 1) {
+							max-width: 100px;
+						}
+						&.asc,
+						&.desc {
+							position: relative;
+							padding-right: 20px;
+							&:after {
+								font: {
+									family: "Glyphicons Halflings";
+									style: normal;
+									weight: 400;
+								}
+								line-height: 1;
+							    -webkit-font-smoothing: antialiased;
+		    					-moz-osx-font-smoothing: grayscale;
+		    					position: absolute;
+		    					right: 0;
+		    					top: 1px;
+							}
+						}
+						&.desc:after {
+							content: "\e252";
+						}
+						&.asc:after {
+							content: "\e253";
+						}
+					}
+				}
+				a {
+					color: $font-color-th-link;
+					cursor: pointer;
+					&:hover,
+					&:focus,
+					&.focus {
+						color: darken($font-color-th-link, 10%);
+					}
+				}
+			}
+		}
+	}
+}
+
+// Not needed for sticky header/column functionality
+.sticky-wrap.overflow-y {
+	overflow-y: auto;
+	max-height: 50vh;
+}
+
+
+// Forms
+// Declare new variables
+$font-color-select: #e5e9ec;
+.control-label {
+	&.control-label-block {
+		display: block;
+	}
+}
+
+.form-horizontal {
+	.multiselect-container {
+		.checkbox,
+		.radio {
+			min-height: inherit;
+		}
+	}
+}
+
+.form-inline {
+	margin-bottom: 10px;
+	.control-label {
+		display: inline-block;
+		padding-right: 10px;
+		vertical-align: middle;
+	}
+	select {
+		display: inline-block;
+		vertical-align: middle;
+		width: auto;
+	}
+}
+
+.form-group {
+	&:empty {
+		margin-bottom: 0;
+	}
+	.help-block {
+		color: $font-color-help-addon;
+		font: {
+			size: ($font-size-base-xs + 1);
+		}
+	}
+	+ .checkbox {
+		margin-top: 0;
+	}
+}
+
+.form-group-inline {
+	display: inline-block;
+	vertical-align: middle;
+	+ .form-group-inline {
+		margin-left: 10px;
+	}
+}
+
+.input-group {
+	> select {
+		&,
+		&.form-control {
+			display: inline-block;
+			float: left;
+			vertical-align: middle;
+			width: auto;
+			z-index: 1;
+			+ select,
+			+ select.form-control {
+				margin-left: -2px;
+			}
+			&:hover:not(:focus),
+			&:focus {
+				z-index: 2;
+			}
+		}
+	}
+}
+
+// Feedback states
+$warning-border-color: #e4d045;
+$error-border-color: #d9534f;
+.form-control-feedback {
+	top: 0;
+	height: 32px;
+	width: 32px;
+}
+
+.has-success {
+	.help-block,
+	.control-label,
+	.radio,
+	.checkbox,
+	.radio-inline,
+	.checkbox-inline,
+	&.radio label,
+	&.checkbox label,
+	&.radio-inline label,
+	&.checkbox-inline label {
+		color: $success;
+	}
+	.form-control {
+		border-color: $success;
+	}
+	.form-control-feedback {
+		color: $success;
+	}
+}
+
+.has-warning {
+	.help-block,
+	.control-label,
+	.radio,
+	.checkbox,
+	.radio-inline,
+	.checkbox-inline,
+	&.radio label,
+	&.checkbox label,
+	&.radio-inline label,
+	&.checkbox-inline label {
+		color: $warning;
+	}
+	.form-control {
+		border-color: $warning-border-color;
+	}
+	.form-control-feedback {
+		color: $warning;
+	}
+}
+
+.has-error {
+	.help-block,
+	.control-label,
+	.radio,
+	.checkbox,
+	.radio-inline,
+	.checkbox-inline,
+	&.radio label,
+	&.checkbox label,
+	&.radio-inline label,
+	&.checkbox-inline label {
+		color: $error;
+	}
+	.form-control {
+		border-color: $error-border-color;
+	}
+	.form-control-feedback {
+		color: $error;
+	}
+}
+
+label {
+	&,
+	&.label {
+		color: $font-color-base;
+		display: block;
+		font: {
+			size: $font-size-base-md;
+			weight: normal;
+		}
+	}
+}
+
+.radio {
+	input[type='radio'] {
+		margin-left: 0;
+		margin-top: 2px;
+	}
+	&.disabled,
+	&[disabled],
+	&[disabled='disabled'] {
+		opacity: .7;
+	}
+	> label {
+		> input[type='radio'] {
+			margin-left: -20px;
+		}
+	}
+}
+
+.checkbox {
+	input[type='checkbox'] {
+		margin-left: 0;
+		margin-top: 2px;
+	}
+	&.disabled,
+	&[disabled],
+	&[disabled='disabled'] {
+		opacity: .7;
+	}
+	> label {
+		> input[type='checkbox'] {
+			margin-left: -20px;
+		}
+	}
+}
+
+.form-control,
+input[type="text"],
+.uneditable-input,
+select,
+textarea,
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+    background-color: #fff;
+    background-image: none;
+    border: 2px solid $bordergrey;
+    border-radius: 4px;
+    box-shadow: 0 0 0 3px transparent;
+    color: #555;
+	display: block;
+    font: {
+		family: $font-family-base;
+		size: $font-size-base-md;
+	}
+    height: 34px;
+    line-height: 1.42857143;
+    padding: 6px 12px;
+    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+    width: 100%;
+	&:hover {
+		box-shadow: 0 0 0 3px #f5f5f5;
+	}
+	&:focus {
+	    border-color: #66afe9;
+	    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+	    outline: 0;
+		&:hover {
+			box-shadow: inset 0 1px 1px rgba(#000, .075), 0 0 8px rgba(102,175,233,.6);
+		}
+	}
+	&[disabled],
+	&[readonly],
+	fieldset[disabled] & {
+		background-color: $bg-form-control-disabled;
+		border-color: $border-form-control-disabled;
+		box-shadow: none;
+	}
+	&::-moz-placeholder {
+		color: #ccc;
+		font: {
+			family: $font-family-base;
+		}
+		opacity: 1;
+	}
+	&:-moz-placeholder {
+		color: #ccc;
+		font: {
+			family: $font-family-base;
+		}
+		opacity: 1;
+	}
+	&:-ms-input-placeholder {
+		color: #ccc;
+		font: {
+			family: $font-family-base;
+		}
+	}
+	&::-webkit-input-placeholder {
+		color: #ccc;
+		font: {
+			family: $font-family-base;
+		}
+	}
+}
+
+// Select container
+select {
+	&,
+	&.form-control {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-o-appearance: none;
+		appearance: none;
+		background-repeat: no-repeat;
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wseCx8GwMZRrQAAAKBJREFUSMft1dEOgjAMheG/A2GJKO//mMpENLP1AQyYCUKMO9cn+ZI2acXMWDOqSggBWRsGiDFuAwM4NkqGM5zh34fLlLLFK93lZjpx7MR59gcvpSwIS1lTFwPd8BhpFPi24h36wagdddPK0RcjaEuzc/KlHTuqFzwNBeZ8J+UeTnYeSEZnwgCGKrg0cwk4H5AMZzjD/wLHGNeHVZW+73kCVHo70xteukkAAAAASUVORK5CYII=);
+		background-position: right center;
+		line-height: normal;
+		padding-right: 30px;
+	}
+}
+
+.select {
+	background-color: #fff;
+	border-radius: 4px;
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	&[class*='col-'] {
+		float: none;
+		padding-left: 0;
+		padding-right: 0;
+	}
+	> select {
+		background-color: transparent;
+	  	line-height: normal;
+		padding-right: 30px;
+		position: relative;
+		-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+		width: 100%;
+		background-repeat: no-repeat;
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wseCx8GwMZRrQAAAKBJREFUSMft1dEOgjAMheG/A2GJKO//mMpENLP1AQyYCUKMO9cn+ZI2acXMWDOqSggBWRsGiDFuAwM4NkqGM5zh34fLlLLFK93lZjpx7MR59gcvpSwIS1lTFwPd8BhpFPi24h36wagdddPK0RcjaEuzc/KlHTuqFzwNBeZ8J+UeTnYeSEZnwgCGKrg0cwk4H5AMZzjD/wLHGNeHVZW+73kCVHo70xteukkAAAAASUVORK5CYII=);
+		background-position: right center;
+		z-index: 2;
+		&:focus {
+			border-color: #66afe9;
+			outline: 0;
+		}
+		&::-ms-expand {
+			display: none;
+		}
+	}
+}
+
+// Custom IE8 - IE9
+.ie8,
+.ie9 {
+	.select {
+		> select {
+			padding-right: 12px;
+		}
+	}
+	&:after {
+		display: none;
+	}
+}
+
+.input-file {
+	margin-bottom: 10px;
+	input[type='file'] {
+		display: none;
+		opacity: 0;
+	}
+}
+
+.input-file-name {
+	display: inline-block;
+	color: $gray-dark;
+	font: {
+		family: $font-family-base;
+		size: $font-size-base-md;
+	}
+	margin-left: 10px;
+	max-width: 400px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+// Pagination
+.pagination {
+	margin-bottom: 15px;
+	margin-top: 15px;
+	> li {
+		display: inline-block;
+		vertical-align: middle;
+		> a,
+		> span {
+			border: none;
+			display: inline-block;
+			float: none;
+			&:focus,
+			&:hover {
+				background-color: $bg-lightgrey;
+			}
+		}
+		&.active {
+			> a,
+			> span {
+				&,
+				&:focus,
+				&:hover {
+					background-color: $bg-btn-primary;
+					font: {
+						weight: bold;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Dropdown
+// Declare new variables for Dropdown
+$bg-dropdown-responsive: #1e5788;
+.dropdown-menu {
+	> .active {
+		> a,
+		> a:focus,
+		> a:hover {
+			background-color: #f5f5f5;
+			color: #000;
+		}
+	}
+	> li {
+		&.dropdown-form {
+			font: {
+				family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+			}
+			padding: 3px 10px;
+			@media (max-width: 767) {
+				padding: 10px;
+			}
+		}
+		+ .dropdown-header {
+			margin-top: 6px;
+			@media (max-width: 767px) {
+				margin: 0;
+			}
+		}
+	}
+	&.multiselect-container {
+		padding-bottom: 5px;
+		padding-top: 5px;
+		> li {
+			> a {
+				padding: 0;
+				label {
+					&.checkbox,
+					&.radio {
+						padding: 3px 20px 3px 40px;
+					}
+				}
+				.checkbox {
+					input[type='checkbox'] {
+						margin-left: -20px;
+						margin-top: 4px;
+					}
+				}
+				.radio {
+					input[type='radio'] {
+						margin-left: -20px;
+						margin-top: 4px;
+					}
+				}
+			}
+			&.active {
+				&,
+				&:hover,
+				&:hover:focus {
+					> a {
+					    background-color: #337ab7;
+					    color: #fff;
+					    text-decoration: none;
+					    outline: 0;
+					    .checkbox,
+					    .radio {
+					    	color: #fff;
+					    }
+					}
+				}
+			}
+		}
+	}
+}
+
+.dropdown-header {
+	color: #666;
+	font-size: 12px;
+	margin-bottom: 6px;
+	overflow: hidden;
+	padding: 7.5px 20px;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	white-space: nowrap;
+	@media (max-width: 767px) {
+		background-color: $bg-dropdown-responsive;
+		border: none;
+		color: #fff;
+		margin: 0;
+		text-align: center;
+	}
+}
+
+// Nav
+// Declare new variables
+$nav-tab-active-hover-bg: #fff;
+$nav-tab-active: #6abbeb;
+$nav-tab-default-hover: #eee;
+$nav-tab-border-bottom-hover: #ddd;
+.nav {
+	> li {
+		> a {
+			@media (max-width: 884px) {
+				padding-left: 8px;
+				padding-right: 8px;
+				-webkit-transition: padding .2s ease-in;
+				transition: padding .2s ease-in;
+			}
+			@media (min-width: 768px) and (max-width: 883px) {
+				padding-left: 6px;
+				padding-right: 6px;
+				-webkit-transition: padding .2s ease-in;
+				transition: padding .2s ease-in;
+			}
+		}
+	}
+}
+
+.nav-tabs {
+	margin: 20px 0 0;
+	border-bottom-color: #ebebeb;
+	> li {
+		float: left;
+		// Actual tabs (as links)
+		> a {
+			border: none;
+			border-top: 4px solid transparent;
+			border-radius: 0;
+			font: {
+				family: $font-family-base;
+				size: $font-size-base-md;
+			}
+			line-height: $font-line-height-default;
+			margin-right: 2px;
+			&:hover {
+				background-color: $nav-tab-default-hover;
+				border-top-color: $nav-tab-border-bottom-hover;
+			}
+			&.btn {
+				border-top-width: 0;
+			}
+			&.del {
+				padding: 0;
+				position: absolute;
+				right: 4px;
+				top: 11px;
+				visibility: hidden;
+			}
+			.badge {
+				-webkit-background-clip: padding-box;
+				background-clip: padding-box;
+				border-radius: 2px;
+				font: {
+					size: 11px;
+					weight: normal;
+				}
+				line-height: 15px;
+				min-height: 13px;
+				padding: 1px 3px;
+				text-shadow: 0 -1px 0 rgba(#000, .4);
+				vertical-align: text-top;
+				width: 15px;
+			}
+		}
+		&:hover {
+			> a.del {
+				border: none;
+				visibility: visible;
+			}
+		}
+		&.active {
+			> a,
+			> a:hover,
+			> a:focus {
+				border-top: 4px solid;
+				border-color: $nav-tab-active #ebebeb #fff;
+				color: $gray-base;
+				cursor: default;
+				font: {
+					weight: bold;
+				}
+			}
+		}
+	}
+	&.nav-justified {
+		display: table;
+		-webkit-margin-start: -1px;
+		table-layout: fixed;
+		> li {
+		    width: 100%;
+			> a {
+				border-top: 4px solid transparent;
+				border-radius: 0;
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				&:hover {
+					background-color: $nav-tab-default-hover;
+					border-top-color: $nav-tab-border-bottom-hover;
+				}
+				&.close {
+					background-color: transparent;
+					border: none;
+					cursor: pointer;
+					display: inline-block;
+					opacity: 0;
+					padding: 0;
+					position: absolute;
+					right: 5px;
+					text-align: center;
+					top: 15px;
+					-webkit-transform: scale(.6);
+					transform: scale(.6);
+					-webkit-transition: opacity .25s ease-in, transform .2s cubic-bezier(.1,.82,.25,1);
+					transition: opacity .25s ease-in, transform .2s cubic-bezier(.1,.82,.25,1);
+					width: 15px;
+				}
+			}
+			&.active > a {
+				&,
+				&:hover,
+				&:focus {
+					background-color: $nav-tab-active-hover-bg;
+					border-top: 4px solid;
+					border-color: $nav-tab-active #ebebeb #fff;
+					color: $gray-base;
+					cursor: default;
+					font: {
+						weight: bold;
+					}
+					&.close {
+						background-color: transparent;
+						border: none;
+						cursor: pointer;
+					}
+				}
+			}
+		}
+	}
+}
+
+.tab-content {
+	> .tab-pane {
+		padding: 10px;
+		position: relative;
+	}
+}
+
+.tab-content-border {
+	border-color: #ebebeb;
+	border-style: solid;
+	border-width: 0 1px 1px 1px;
+}
+
+.tab-pane-footer {
+	background-color: $bg-panel;
+	color: $gray-dark;
+	font: {
+		size: $font-size-base-sm;
+	}
+	margin: 0;
+	padding: 5px;
+}
+
+// Navbar
+.navbar {
+	border: none;
+	border-radius: 0;
+	margin: 0;
+}
+
+.navbar-toggle {
+	border-radius: 0;
+	border: none;
+	margin-bottom: 17px;
+	margin-top: 17px;
+	margin-right: 17px;
+	&:active,
+	&:active:focus,
+	&:focus,
+	&:hover {
+		background-color: rgba(#000,.1);
+		outline: none;
+	}
+}
+
+.navbar-inverse {
+	.navbar-collapse,
+	.navbar-form {
+		border: none;
+	}
+	.navbar-toggle {
+		background-color: rgba(#000,.1);
+		-webkit-transition: background-color 150ms ease;
+		transition: background-color 150ms ease;
+		&.collapsed {
+			background-color: transparent;
+		}
+		&:focus,
+		&:hover {
+			background-color: rgba(#000,.1);
+		}
+	}
+}
+
+.navbar-collapse {
+	box-shadow: none;
+}
+
+@media (max-width: 767px) {
+	.navbar-collapse {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+// Labels
+// Declare new variables for Labels
+$bg-label-default: #1f9dd9;
+$icon-label-default: #1a77a3;
+$icon-hover-label-default: #104a66;
+.label-primary {
+	background-color: $bg-label-default;
+	a {
+		cursor: pointer;
+		text-decoration: none;
+		&.glyphicon {
+			color: $icon-label-default;
+			margin: 0;
+			top: 2px;
+			&:hover {
+				color: $icon-hover-label-default;
+			}
+		}
+	}
+}
+
+/*
+ * Base
+ */
+ul {
+	margin: 0;
+	padding: 0;
+}
+
+hr {
+	margin-bottom: 10px;
+	margin-top: 10px;
+}
+
+.hr-dotted {
+	border-style: dotted;
+}
+
+.hr-dashed {
+	border-style: dashed;
+}
+
+// Buttons
+$font-color-default: #525252;
+$font-color-secondary: $font-color-default;
+$font-color-warning: #74511e;
+$font-color-secondary-disabled: $bg-btn-default;
+
+.btn {
+	border-radius: 3px;
+	font: {
+		family: $font-family-base;
+		size: $font-size-base-md;
+	}
+	padding: $padding-base-btn-default;
+	&:active,
+	&.active,
+	&:active:focus,
+	&:focus,
+	&.focus {
+		outline: 0;
+	}
+	&:active,
+	&.active,
+	&:active:focus {
+		background-image: none;
+		box-shadow: inset 0 3px 5px rgba(#000, .125);
+	}
+}
+
+$buttons: "primary" $bg-btn-primary,
+		  "default" $bg-btn-default,
+		  "secondary" $bg-btn-secondary,
+		  "info" $bg-btn-secondary,
+		  "success" $bg-btn-success,
+		  "danger" $bg-btn-danger,
+		  "warning" $bg-btn-warning;
+
+@each $btn in $buttons {
+	.btn-#{nth($btn, 1)} {
+		background-color: nth($btn, 2);
+		border-color: nth($btn, 2);
+  	&:active,
+  	&.active,
+  	&:active:focus {
+  		background-color: darken(nth($btn, 2), 5%);
+  		border-color: darken(nth($btn, 2), 5%);
+		}
+		&:hover,
+		&:focus,
+		&.focus {
+			background-color: darken(nth($btn, 2), 5%);
+  		border-color: darken(nth($btn, 2), 5%);
+		}
+		&.disabled,
+		&[disabled],
+		fieldset[disabled] & {
+			background-color: nth($btn, 2);
+			border-color: nth($btn, 2);
+		}
+	}
+}
+
+.btn-default {
+	color: $font-color-default;
+}
+.btn-default + .btn-primary {
+	margin:0 0 0 10px;
+}
+
+.btn-secondary,
+.btn-info {
+	color: $font-color-secondary;
+	&:hover,
+	&:focus,
+	&.focus {
+		color: $font-color-secondary;
+	}
+	&.disabled,
+	&[disabled],
+	fieldset[disabled] & {
+		color: $font-color-secondary-disabled;
+	}
+}
+
+.btn-warning {
+	color: $font-color-warning;
+	&:hover,
+	&:focus,
+	&.focus {
+		color: $font-color-warning;
+	}
+}
+
+.open {
+	> .dropdown-toggle {
+		&.btn-default {
+			background-color: $bg-btn-default;
+			color: $gray-dark;
+		}
+		&.btn-primary {
+			background-color: $bg-btn-primary;
+		}
+		&.btn-secondary,
+		&.btn-info {
+			background-color: $bg-btn-secondary;
+			color: $font-color-secondary;
+		}
+		&.btn-success {
+			background-color: $bg-btn-success;
+		}
+		&.btn-danger {
+			background-color: $bg-btn-danger;
+		}
+	}
+}
+
+.btn-xs {
+	font: {
+		size: $font-size-base-sm;
+	}
+	line-height: $font-line-height-xs;
+	padding: $padding-base-btn-xs;
+}
+
+.btn-sm {
+	line-height: $font-line-height-default;
+	padding: $padding-base-btn-sm;
+}
+
+.btn-upper {
+	font: {
+		size: 14px;
+		weight: bold;
+	}
+	padding: $padding-base-btn-upper;
+	text-transform: uppercase;
+	color:#ffffff;
+}
+
+.btn-group {
+	&.bootstrap-select {
+		margin: 0;
+	}
+	.btn {
+		+ .btn {
+			position: relative;
+			&:before {
+				background-color: rgba(#000, .05);
+				content: '';
+				bottom: 5px;
+				left: -1px;
+				position: absolute;
+				top: 5px;
+				width: 1px;
+			}
+		}
+	}
+}
+
+.btn-glyphicon {
+	&:before {
+		display: inline-block;
+		content: '';
+		font: {
+			family: "Glyphicons Halflings";
+			style: normal;
+			weight: normal;
+		}
+		line-height: 1;
+		position: relative;
+		top: 1px;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		padding-right: 3px;
+	}
+}
+
+.avatar {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	border: 1px solid #ddd;
+	border-radius: 2px;
+	width: 40px;
+	height: 40px;
+	-webkit-box-align: center;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	-webkit-justify-content: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	overflow: hidden;
+	padding: 2px;
+	margin: 0 auto;
+	> img {
+		border-radius: 1px;
+		max-width: 100%;
+	}
+	> .male {
+		background-image: url('../images/userphoto_default_male.png');
+		background-repeat: no-repeat;
+		background-position: center center;
+	}
+	> .female {
+		background-image: url('../images/female_placeholder.jpg');
+		background-repeat: no-repeat;
+		background-position: center center;
+	}
+}
+
+.avatar-lg {
+	width: 100%;
+}
+
+// alert
+.alert-message-inline {
+	display: inline-block;
+}
+
+.alert-md {
+	padding: 10px;
+}
+
+// Alert
+$alerts: "success" $bg-alert-success,
+		 "info"    $bg-alert-info,
+		 "warning" $bg-alert-warning,
+		 "danger"  $bg-alert-danger;
+
+@each $alert in $alerts {
+	.alert-#{nth($alert, 1)} {
+		background-color: lighten(nth($alert, 2), 40%);
+		border-color: lighten(nth($alert, 2), 30%);
+		color: darken(nth($alert, 2), 10%);
+		.alert-link,
+		strong {
+			color: darken(nth($alert, 2), 20%);
+		}
+	}
+}
+
+// Panels
+// Declare new variables for panel
+$card-body-bg: #ebebeb;
+$card-body-font-color: #4d4d4d;
+
+.panel {
+	border-radius: 0;
+	box-shadow: none;
+	margin-bottom: 10px;
+	position: relative;
+}
+
+.panel-heading {
+	.btn-xs {
+		font: {
+			size: 11px;
+		}
+		line-height: normal;
+		padding: 4px 10px;
+	}
+}
+
+.panel-body {
+	padding: 10px;
+}
+
+// Popover
+.popover {
+	border-color: rgba(#000, .1);
+	border-radius: 3px;
+	min-width: 85px;
+}
+
+.popover-content {
+	.popover-footer {
+		border-top: 1px solid rgba(#000, .1);
+		margin: 5px -15px -9px;
+	}
+}
+
+// Background text
+@each $v in (primary, success, info, warning, danger) {
+	.bg-#{$v} {
+		padding: 4px 6px;
+	}
+}
+
+// Label
+* {
+	&[class*='label-'] {
+		display: inline-block;
+		font: {
+			size: 80%;
+			weight: 700;
+		}
+		vertical-align: middle;
+	}
+}
+
+// Helpers
+
+// Texts
+.text-grey {
+	color: #999;
+}
+
+// Modal
+.modal {
+	&.modal-fixed-footer {
+		.modal-dialog {
+			height: 85%;
+			left: 10px;
+			margin: auto;
+			position: absolute;
+			right: 10px;
+			top: 30px;
+		}
+		.modal-content {
+			height: 100%;
+			position: relative;
+			.modal-body {
+				height: calc(100% - 121px);
+				overflow-y: auto;
+				position: absolute;
+				width: 100%;
+			}
+		}
+		.modal-footer {
+			bottom: 0;
+			position: absolute;
+			width: 100%;
+		}
+	}
+}
+.modal-body {
+	form {
+		.form-group {
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+
+.modal-footer {
+	.bt {
+		display: inline-block;
+		vertical-align: middle;
+	}
+}
+
+// Fix bug when modal is open
+.modal-backdrop {
+	bottom: 0;
+	position: fixed;
+	z-index: 1000;
+}
+
+// Well
+.well {
+	background-color: #f8f8f8;
+	border-color: #ccc;
+	box-shadow: none;
+}
+
+// Custom chosen-container plugin
+.chosen-container {
+	@media (min-width: 992px) {
+		min-width: 220px;
+	}
+	@media (min-width: 1200px) {
+		min-width: 250px;
+	}
+	&.chosen-container-active {
+		ul.chosen-choices {
+			border-color: #66afe9;
+			box-shadow: inset 0 1px 1px rgba(#000, .075), 0 0 8px rgba(102, 175, 233, .6);
+		}
+	}
+}
+.chosen-container-multi {
+	ul.chosen-choices {
+		background-color: #fff;
+		border: 2px solid #ebebeb;
+		border-radius: 4px;
+		font: {
+			family: $font-family-base;
+			size: $font-size-base-md;
+		}
+		height: auto !important;
+		min-height: 38px !important;
+		min-height: inherit;
+		padding: 0 12px;
+		li.search-field {
+			input[type='text'] {
+				line-height: 1.42857143;
+				height: 34px;
+				margin: 0;
+				padding: 6px 0;
+				width: auto !important;
+			}
+		}
+ 		li.search-choice {
+ 			background-color: $bg-panel;
+ 			background-image: none;
+ 			border: none;
+ 			box-shadow: none;
+ 			color: #525252;
+			font: {
+				size: $font-size-base-xs;
+				weight: bold;
+			}
+ 			margin: 4.5px 2px;
+ 			padding: 6px 20px 6px 5px;
+ 			&:first-child {
+ 				margin-left: 0;
+ 			}
+ 			+ .search-field {
+ 				margin-left: 7.5px;
+ 			}
+ 			.search-choice-close {
+ 				background-position: -49px 1px;
+ 				right: 0;
+ 				top: 6px;
+ 				&:hover {
+ 					background-position: -49px -10px;
+ 				}
+ 			}
+ 		}
+	}
+}
+
+
+// Custom plugin bootstrap-select
+.bootstrap-select {
+	&[class*="span"],
+	&[class*="col-"] {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+// Custom editable-field
+.editable-field {
+	-webkit-transition: box-shadow 150ms ease-in 0ms;
+	transition: box-shadow 150ms ease-in 0ms;
+	border-radius: 2.01px;
+	cursor: text;
+	display: inline-block;
+	max-width: 100%;
+	box-shadow: 0 0 0 0 transparent;
+	padding: 2px 30px 2px 5px;
+	position: relative;
+	vertical-align: top;
+	word-break: break-word;
+	&:after {
+		background-color: #f0f0f0;
+		border-left: 1px solid #ccc;
+		font: {
+			family: "Glyphicons Halflings";
+			size: 13px;
+			style: normal;
+			weight: 400;
+		}
+		opacity: 0;
+  		line-height: 1;
+  		-webkit-font-smoothing: antialiased;
+  		-moz-osx-font-smoothing: grayscale;
+		content: "\270f";
+		padding: 5px;
+		position: absolute;
+		text-align: center;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		-webkit-transition: opacity 150ms ease-in 0ms;
+		transition: opacity 150ms ease-in 0ms;
+	}
+	&:hover,
+	&.saving {
+		background-color: #fff;
+		box-shadow: 0 0 0 1px #ccc;
+	}
+	&:hover {
+		&:after {
+			opacity: 1;
+		}
+	}
+}
+
+// Custom Datepicker
+$bg-day-active: #0971b7;
+.datepicker {
+	table {
+		thead {
+			> tr {
+				> th {
+					color: #333;
+					vertical-align: middle;
+					&.prev,
+					&.next {
+						font: normal normal normal 0px/1 'Glyphicons Halflings';
+						text-rendering: auto;
+	    				-webkit-font-smoothing: antialiased;
+	    				-moz-osx-font-smoothing: grayscale;
+	    				&:before {
+	    					font: {
+	    						size: 10px;
+	    					}
+	    				}
+					}
+					&.prev:before {
+						content: "\e079";
+					}
+					&.next:before {
+						content: "\e080";
+					}
+				}
+			}
+		}
+		tr {
+			td {
+				color: #333;
+				span {
+					height: 40px;
+					line-height: 40px;
+				}
+			}
+		}
+	}
+}
+
+.datepicker-days {
+	thead {
+		> tr {
+			&:last-child {
+				> th {
+					font: {
+						size: 10px;
+						weight: normal;
+					}
+					height: 20px;
+					padding: 0;
+					text-transform: uppercase;
+				}
+			}
+		}
+	}
+	tbody {
+		> tr {
+			.day {
+				&.today {
+					background-color: $bg-lightgrey;
+					&:hover,
+					&:focus,
+					&:active {
+						&:hover {
+							background-color: darken($bg-lightgrey, 5%);
+						}
+					}
+				}
+				&.active,
+				&.today {
+					&.active {
+						&:hover,
+						&:focus {
+							background-color: $bg-day-active;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+// Custom Select2 plugin
+.select2-dropdown {
+	border-color: rgba(#000, .1);
+	border-radius: 0;
+	box-shadow: 0 6px 12px rgba(#000, .175); // Add box shadow
+}