@charset "utf-8";

html[lang='zh-HK'] {
	body {
		font-family: $fontTC;
	}
}

html[lang='en-US'] {
	body {
		font-family: $fontEN;
	}
}

body {
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

p {	margin: 0 0 15px; }

a {
	color: #00bcd4;
	text-decoration: none;
	transition: color 0.4s;
	&:hover {
	  color: #1976d2;
	}
}

.text-center {
  text-align: center;
}
/* * Layout related * */








/* * Test Css * */
.top-bar {
  padding: 10px 15px;
  margin-bottom: 50px;
	&::after {
  	content: '';
  	display: block;
  	clear: both;
	}
	&-left {
  	float: left;
  	font-size: 1.5em;
	}
	&-right {
  	float: right;
	}
}

.top-bar a,
.nav a {
  margin: 0 8px;
}

.ab{
	&-left, &-right { 
		vertical-align: middle;
		span {
			display: inline-block;
			vertical-align: middle;
			color:#fff;
			&.avatar { 
				padding: 0 0 0 10px;
				img {  
					height: 30px !important;
	    		width: 30px !important;
					border: 2px solid #BBDEFB;
				}
			}
		} 
		.brand-logo {
			line-height: 48px;
			height: 48px;
			padding: 0 20px;
		}
	}
	&-left {
		width: 200px;
		background: #346eae;
	}
	&-right {}
}

.container {
  margin: 0 auto;
  text-align: center;
}

.card-heading {
  padding: 16px;
}

.field-line, .button-line {
  padding: 16px;
}

.error-message {
  padding: 0 16px;
  color: tomato;
}

.success-message {
  padding: 0 16px;
  color: green;
}

#mytable .table {
    padding: 0 !important;
}

