* {
	font-family: Arial, Helvetica, 宋体, 微軟正黑體, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, 宋体, 微軟正黑體, sans-serif;
	padding: 2px 0;
	margin: 2px 0;
}

/* .navbar-collapse {
	padding-right: 0;
	padding-left: 0;
} */
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand
	{
	margin-left: 0;
}

.navbar-brand {
	float: left;
	padding: 5px 15px;
	font-size: 18px;
	line-height: 40px;
	height: 50px;
}

.navbar-header {
	margin-left: 0 !important;
}

.navbar-header .logo {
	height: 40px;
}

.navbar {
	margin-bottom: 0;
}

.sub-navbar {
	margin: 55px 0 0;
	min-height: 30px !important;
	border: 0 !important;
}

.sub-navbar .container-fluid {
	padding-left: 0;
	padding-right: 0;
}

.sub-navbar .navbar-nav>li>a {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.sub-navbar .navbar-nav>li.active a {
	padding-bottom: 2px !important;
	border-bottom: 3px solid #1a8a48;
	color: #1a8a48;
	background-color: #fff;
}

.sub-navbar .navbar {
	min-height: 32px !important
}

.navbar-break {
	height: 0;
}

.alert>ul {
	padding-left: 20px;
}

.mainbar {
	min-height: 400px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin-top: 51px;
}

.mainbar .page-head {
	background-color: #f8f8f8;
	padding: 8px 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	box-shadow: inset 0 1px 1px #fff;
}

.mainbar .page-head h2 {
	font-weight: bold;
	font-size: 20px;
}

.mainbar .page-head>.breadcrumb {
	padding: 0;
	margin-top: 6px;
	margin-bottom: 6px;
	list-style: none;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.mainbar .matter {
	padding: 15px;
}

.matter .photo-box {
	max-height: 300px;
}

@media print {
	a[href]:after {
		content: normal;
	}
}

.home-page .btn-block {
	font-size: 30px;
	padding: 20px;
	margin: 15px 0;
}

.reports-page .btn-block {
	font-size: 24px;
	padding: 20px;
	margin: 15px 0;
}

.footer {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #23b0e2;
}

.footer p {
	color: #fff;
	margin: 0;
}

.footer a.lang {
	color: #fff;
	margin: 0 5px;
}

.copyright-content {
	padding: 10px;
	text-align: center;
}

a i.fa {
	margin-right: 5px;
}

.dropdown-menu a i.fa {
	width: 14px;
}

.grid-wrapper>.row {
	margin-top: 10px;
	margin-bottom: 10px;
}

.grid-wrapper .grid-total-records {
	padding-top: 7px;
	margin-bottom: 7px;
	margin-right: 20px;
	display: inline-block;
}

.grid-wrapper .grid-add-btn-wrapper {
	display: inline-block;
}

.grid-wrapper .grid-summary-row .add-on-btn {
	margin-left: 10px;
	margin-right: 10px;
}

.grid-wrapper .table {
	margin: 0px;
}

.grid-wrapper .pagination {
	float: right;
	margin: 10px 0;
}

.grid-wrapper table tr td {
	vertical-align: middle;
	padding: 6px;
}

.grid-wrapper table tr td a {
	margin-left: 5px;
}

.grid-wrapper table tr td a:first-child {
	margin-left: 0;
}

table td[data-grid-property="operation"] .btn.btn-sm {
	padding: 2px 6px;
}

.uppercase {
	text-transform: uppercase;
}

.details-section .details-section-title {
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #1b9cc9;
	padding: 10px;
}

.details-section-title .btn+.btn {
	margin-right: 5px;
}

.clear, .clearer {
	clear: both;
}

.t-invisible, .hide {
	display: none;
}

input[type=checkbox] {
	margin: 5px;
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

table.table tbody tr td>a {
	margin-right: 4px;
}

.form-group .readonly {
	background-color: #eee;
}

.help-block {
	margin-bottom: 0;
}

td.error {
	color: red;
}

.red {
	color: red;
}

.green {
	color: green;
}

.status_normal {
	color: inherit;
}

.status_warning {
	color: #CC9900;
}

.status_error {
	color: #f00;
}

.late {
	color: purple;
}

table.bean-display {
	margin-top: 5px;
	margin-bottom: 5px;
	border-collapse: collapse;
	border-left: 1px solid silver;
	border-top: silver solid 1px;
}

table.bean-display td {
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: 6px 8px;
}

.account-info .list-group {
	max-width: 350px;
}

.account-info .account-value {
	float: right;
}

.company-remind-init li {
	color: #333333;
	background-color: #fcf8e3;
}

.company-remind-init li a {
	position: relative;
	top: -5px;
	/* background-color: #faa54c;
	border-color: #db9633; */
}

/* .company-remind-init li a:hover {
	background-color: #f68b51;
	border-color: #db9633;
} */
div[data-container-type="alerts"] .pull-right {
	display: none;
}

/* roster-table  */
.roster-table TABLE.table.table-hover.table-bordered.table-striped THEAD TR TH
	{
	white-space: nowrap;
}

.roster-table .pre-one {
	height: 26px;
	line-height: 26px;
	width: 100%;
	min-width: 26px;
	padding: 0px;
}

/* .roster-table span.pre-two {
	color: red;
} */
.roster-table .pre-two {
	float: left;
	height: 13px;
	line-height: 13px;
	width: 100%;
	min-width: 26px;
	padding: 0px;
}

.roster-table table tbody tr td[data-grid-property="staffName"] {
	max-width: 190px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 2px;
}

.roster-table table tbody tr td[data-grid-property="month"] {
	text-align: center;
}

.roster-table table tbody tr td[data-grid-property="type"] {
	padding: 2px;
}

.my-roster-listing .roster-table table tbody tr td[data-grid-property="month"]
	{
	width: 150px;
	padding: 2px;
	text-align: center;
}

.roster-table table thead tr th {
	text-align: center;
	padding: 6px 2px;
}

.roster-table table tbody tr td {
	width: 26px;
	padding: 0;
	vertical-align: middle;
}

.roster-table .title {
	text-align: center;
	margin-bottom: 10px;
}

.roster-table .pre-cell {
	border: none;
	font-size: 12px;
	text-align: center;
	ime-mode: disabled;
	background-color: #ffffff;
}

.roster-table .pre-day-off {
	background-color: #9beaff;
}

.roster-table .pre-full-holiday {
	background-color: #c6f9ad;
}

.roster-table .pre-black {
	background-color: #999999;
}

.pre-note {
	width: 100%;
	clear: both;
	float: left;
	margin-bottom: 10px;
}

.pre-note .pre-title {
	margin-bottom: 10px;
	padding: 10px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #337ab7;
	padding: 10px;
}

.pre-note .pre-note-item {
	display: block;
	width: 446px;
	padding: 4px;
	height: 30px;
	line-height: 30px;
	float: left;
}

.pre-note .pre-note-item .item-text {
	height: 26px;
	line-height: 26px;
	float: left;
	padding-left: 8px;
}

.pre-note .pre-note-item .pre-normal {
	border: 1px solid silver;
	/* background-color: inherit; */
	width: 26px;
	height: 26px;
	float: left;
	line-height: 26px;
	text-align: center;
	color: inherit;
}

.pre-note .pre-note-item .pre-day-off {
	border: 1px solid silver;
	background-color: #9beaff;
	width: 26px;
	height: 26px;
	float: left;
}

.pre-note .pre-note-item .pre-full-holiday {
	border: 1px solid silver;
	background-color: #c6f9ad;
	width: 26px;
	height: 26px;
	float: left;
}

/* roster-table end */
.late {
	padding-top: 5px;
	padding-left: 5px;
	color: purple;
}

.attendance-listing table.time-text td {
	padding: 0;
	white-space: nowrap
}

.attendance-listing table.time-text td:first-child {
	padding-right: 10px;
	white-space: nowrap
}

.attendance-details div.ignore {
	float: left;
}

.attendance-details input[type=checkbox] {
	margin: 0 0 0 5px;
	width: 22px;
	height: 22px;
}

.attendance-details .modal-footer {
	text-align: center;
}

.form-control-no-border {
	display: block;
	height: 34px;
	padding: 6px 2px;
	font-size: 14px;
	line-height: 1.42857143;
}

.form-group-no-padding {
	padding: 0;
}

.duty-time-param .week {
	margin-right: 10px;
}

.login-section {
	width: 100%;
	max-width: 400px;
	margin: 10px auto;
}

.login-section .logo {
	max-width: 200px;
	height: auto;
	display: block;
	margin: 0 auto;
	padding: 20px 20px;
}

.login-section .panel .panel-heading {
	text-align: center;
}

.login-section .btn-block {
	margin-top: 30px;
}

.staff-login-section .login-tab {
	padding-top: 30px;
	text-align: center;
	font-size: 30px;
	color: #23b0e2;
}

.staff-login-section .login-contant .error {
	padding-top: 15px;
}

.staff-login-section .login-contant .alert {
	margin-bottom: 0px;
}

.staff-login-section .bottom {
	color: #8d8383;
}

.staff-login-section .bottom a {
	color: #8d8383;
}

.staff-login-section .bottom a:hover {
	color: #23b0e2;
}

.staff-login-section .bottom .vertical-line {
	margin: 0 5px;
	position: relative;
	bottom: 1px;
}

.company-register {
	width: 100%;
}

.company-register .register-section {
	width: 100%;
	margin: auto;
}

.company-register .register-section .alert {
	margin-top: 10px;
	margin-bottom: 10px;
}

.company-register .register-section .js-alert {
	border: 1px solid #ebccd1;
	background-color: #f2dede;
	color: #a94442;
	display: none;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 15px
}

.company-register .intl-tel-input {
	width: 100%;
	height: 50px;
}

.register-section .register-logo {
	max-width: 120px;
	height: auto;
	display: block;
	margin: 0 auto;
	padding: 20px 20px;
}

.register-section .title-span-content {
	padding: 15px;
	color: #000;
	font-size: 16px;
}

.register-section .reg-textfield {
	font-size: 18px;
	height: 50px;
}

.register-section #contract {
	margin-left: 0;
}

.register-section .content:hover {
	cursor: pointer;
}

.register-success {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

.register-success .email {
	color: #1b9cc9;
}

.activation {
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

.activation .email, .activation .companyId, .activation .hrManagerNo {
	color: #1b9cc9;
}

.mobile-device-listing .dropdown .dropdown-menu li .t-invisible {
	display: none;
}

.mobile-device-listing .dropdown .dropdown-menu li:hover {
	cursor: pointer;
}

.mobile-device-dialog .modal-footer {
	text-align: center;
}

/* index page */
.index-navbar {
	background-color: #fff;
	border-bottom: 1px solid silver;
	box-shadow: 0px 0px 10px #828282;
}

.index-navbar .navbar-right {
	margin-right: 0px;
}

.index-navbar li.group-link a {
	display: inline-block;
	padding: 15px 5px;
}

#public-border .content {
	display: none;
}

.index-mainbar {
	margin-top: 51px;
}

.index-mainbar .section-title {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}

.index-mainbar .smartime-title {
	padding: 20px 0px;
}

.index-mainbar .smartime-title p {
	font-size: 19px;
}

.index-mainbar .smartime-title a {
	padding: 8px 10px;
	border: 2px solid #23b0e2;
	font-size: 15px;
}

.smartime-footer {
	width: 100%;
	float: left;
	border-top: solid 1px #dedede;
}

.smartime-footer .footer-item {
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 16px;
	text-align: center;
}

.smartime-footer .footer-item a {
	color: #000;
}

.smartime-footer .footer-item a:hover {
	color: #157ea3;
}

.smartime-footer ul {
	width: 100%;
}

.smartime-footer ul .picture {
	width: 60%;
	padding: 5px 15px;
}

.smartime-footer ul .picture img {
	width: 35px;
	opacity: 0.5;
	display: none;
}

.smartime-footer ul:first li {
	margin-right: 0;
}

.smartime-footer ul .head {
	font-size: 17px;
	color: #23b0e2;
	padding: 0;
	cursor: pointer;
}

.smartime-footer ul li {
	list-style-type: none;
	float: left;
	padding: 3px 0;
	width: 100%;
}

.smartime-footer li:not (:first-child ):before {
	content: '|';
	margin-right: 5px;
}

.smartime-footer .none {
	display: none;
	overflow: hidden;
}

.smartime-footer .none a {
	color: #000;
}

.article {
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.5;
}

.article img {
	margin-bottom: 15px;
}

.article h2 {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: dashed 1px #1b9cc9;
	font-weight: bold;
}

.article h3 {
	color: #1b9cc9;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: bold;
}

.article h4 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}

.article p {
	margin: 5px 0 10px 0;
}

.article .highlight {
	font-weight: bold;
}

.article li {
	margin-bottom: 5px;
}

.index-mainbar .smartime-function {
	color: #fff;
	background-color: #23b0e2;
}

.index-mainbar .smartime-function .smartime-function-container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.index-mainbar .smartime-function .smartime-function-container .function-item
	{
	font-size: 22px;
	padding-bottom: 30px;
	text-align: center;
}

.index-mainbar .download-app {
	padding-top: 20px;
	padding-bottom: 20px;
}

.index-mainbar .download-app .title {
	text-align: center;
	height: 30px;
}

.index-mainbar .download-app .img-div {
	border: solid 1px #dedede;
	background-color: #fff;
	margin: 0 15%;
}

.index-mainbar .download-app .img-div img {
	width: 100%;
}

.index-mainbar .download-app .qr-code-name {
	text-align: center;
	font-size: 20px;
	padding: 10px;
}

.index-mainbar .function-introduction {
	margin-bottom: 35px;
}

.index-mainbar .function-introduction .title {
	font-size: 24px;
	padding: 10px;
	text-align: center;
	background-color: #cee1ec;
}

.admin-login {
	width: 100%;
}

#border .navbar-collapse {
	padding-right: 15px;
}

.navbar-inverse .navbar-nav {
	margin: 0;
}

.navbar-inverse .navbar-nav li {
	float: left;
}

.monthly-roster-listing .table-monthly-roster-listing {
	overflow: auto;
	min-height: 0.01%;
}

.punch-card-details .responsive-img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 10px;
}

.punch-card-details .map {
	height: 500px;
}

.punch-card-details #map-container {
	width: 100%;
	height: 100%;
}

.table-responsive-hidden {
	overflow: hidden;
}

.table-responsive-display {
	overflow: auto;
	min-height: 0.01%;
}

.remind {
	margin: 15px 15px 0 15px;
	max-width: 350px;
	padding: 10px 15px;
	border-color: #dddddd;
	color: #333333;
	background-color: #fcf8e3;
}

.remind a {
	float: right;
	position: relative;
	top: -5px;
	/* background-color: #faa54c;
	border-color: #db9633; */
}

/* .remind a:hover {
	background-color: #f68b51;
	border-color: #db9633;
} */
div.intl-tel-input {
	width: 100%;
	height: 34px;
}

table td[data-grid-property="operation"] .mt5 {
	margin-top: 5px;
}

@media ( min-width : 560px) {
	#public-border .content {
		display: block;
		float: right;
	}
	.index-mainbar .download-app .img-div {
		margin: 0;
	}
	.index-mainbar .smartime-title p {
		font-size: 28px;
	}
	.index-mainbar .smartime-title a {
		padding: 8px 12px;
		font-size: 20px;
	}
}

@media ( max-width : 768px) {
	.staff-login {
		width: 100%;
	}
	.staff-login-section .login-title {
		display: none;
	}
	.staff-login-section .logo {
		max-width: 100px;
		height: auto;
		display: block;
		margin: 30px auto;
	}
	.staff-login-section .login-tab {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	.grid-wrapper>.row>div>.pagination {
		float: none;
	}
	.index-mainbar .download-app {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.index-mainbar .download-app .title {
		text-align: left;
	}
	.index-mainbar .download-app .img-div {
		margin: 0;
	}
	.index-mainbar .download-app .qr-code-name {
		font-size: 16px;
	}
}

@media ( min-width : 768px) {
	.staff-login {
		width: 100%;
		background-image: url("/assets/meta/a1ec54ec/images/login-bg.jpg");
		background-attachment: fixed;
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.staff-login-section .login-title {
		display: block;
	}
	.staff-login-section .login-title .title-en {
		color: #fff;
		font-size: 65px;
	}
	.staff-login-section .login-title .title-zh {
		color: #fff;
		font-size: 40px;
	}
	.staff-login .staff-login-section {
		padding-top: 70px;
		width: 100%;
		max-width: 700px;
		margin: auto;
	}
	.staff-login .staff-login-section .matter {
		margin-left: 15px;
		margin-right: 15px;
	}
	.staff-login-section .login-contant {
		background-color: #fff;
		border: 1px solid silver;
		min-height: 380px;
		box-shadow: 0px 0px 10px #828282;
	}
	.staff-login-section .logo {
		max-width: 200px;
		height: auto;
		display: block;
		margin: 70px auto;
	}
	.staff-login-section .login-form {
		margin-top: 5px;
		border-left: 1px solid silver;
	}
	.company-register-bg {
		background-color: #23b0e2;
	}
	.company-register .register-section {
		width: 100%;
		max-width: 480px;
		margin: 50px auto;
		background-color: #FFF;
		border-radius: 5px;
		box-shadow: 0px 0px 20px #828282;
	}
	.register-section .register-logo {
		max-width: 190px;
		padding: 20px;
	}
	.smartime-footer {
		width: 100%;
		float: left;
		padding-top: 10px;
		border-top: solid 1px #dedede;
		/* background-image: url("/assets/meta/ff2cefd4/images/index/smartime_footer_bg.png"); */
	}
	.smartime-footer ul {
		float: left;
		width: 25%;
	}
	.smartime-footer ul .picture img {
		display: block;
	}
	.smartime-footer .none {
		display: block;
		padding-top: 10px;
		font-size: 18px;
	}
	.smartime-footer li.head {
		cursor: text;
	}
	.index-mainbar .smartime-title {
		padding: 60px 0px;
	}
	.index-mainbar .smartime-title p {
		font-size: 35px;
	}
	.index-mainbar .smartime-title a {
		padding: 8px 15px;
		font-size: 22px;
	}
	.index-mainbar .smartime-function .smartime-function-container {
		margin: auto;
		width: 500px;
	}
	.index-mainbar .download-app {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.index-mainbar .download-app .title {
		text-align: left;
	}
	.index-mainbar .function-introduction .title {
		font-size: 38px;
		padding: 20px;
	}
	.admin-login {
		width: 750px;
	}
	.table-responsive-display {
		overflow: hidden;
	}
	/* .navbar-header {
		float: none;
	}
	.navbar-toggle {
		display: block;
		margin-right: 0;
	}
	.navbar-collapse {
		display: none !important;
	}
	.navbar-collapse .navbar-nav {
		margin: 7.5px -15px;
		float: none;
	}
	.navbar-collapse.in {
		overflow-y: auto !important;
	}
	.navbar-right {
		float: left !important;
	} */
	/* TODO james 
	.navbar-toggle {
		display: block !important;
	}
	.navbar-nav>li {
		float: none !important;
	}
	.navbar-header {
		float: none !important;
	}
	.navbar-collapse.collapse {
		display: none !important;
	}*/
	.article img {
		max-height: 500px;
	}
}

@media ( min-width : 992px) {
	/* TODO james 
	.navbar-collapse.collapse {
		display: block !important;
	}
	.navbar-header {
		float: left !important;
	}
	.navbar-toggle {
		display: none !important;
	}
	.navbar-nav>li {
		float: left !important;
	}
	.navbar-nav {
		float: left;
		margin: 0;
	}
	.navbar-nav>li {
		float: left;
	}
	.navbar-nav>li>a {
		padding-top: 15px;
		padding-bottom: 15px;
	} */
	.index-mainbar .download-app .qr-code-name {
		font-size: 20px;
	}
	.index-mainbar .smartime-title {
		padding: 90px 0px;
	}
	.index-mainbar .smartime-title p {
		font-size: 55px;
	}
	.index-mainbar .smartime-function .smartime-function-container {
		margin: auto;
		width: 800px;
	}
	.admin-login {
		width: 970px;
	}
	/* .navbar-header {
		float: none;
	}
	.navbar-toggle {
		display: block;
		margin-right: 0;
	}
	.navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-collapse .navbar-nav li {
		float: none;
	} */
}

@media ( min-width : 1200px) { /* .navbar-header {
		float: left;
	}
	.navbar-toggle {
		display: none;
	}
	#border .navbar-collapse {
		display: block !important;
		padding-right: 0;
	}
	.navbar-collapse .navbar-nav {
		margin: 0;
		float: left;
	}
	.navbar-collapse .navbar-nav li {
		float: left;
	}
	.navbar-right {
		float: right !important;
	} */
}