.hrm-payroll-bp{
	height:100%;

	.none-detail{
		height:100%;
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;

		i{
			font-size: 50px;
		}

		span{
			font-size: 14px;
			margin-top: 10px;
		}
	}

	.ellipsis{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	.payroll-detail{
		width: 500px;
		position: relative;
		margin-left: 50%;
		left:-250px;	

		.img {
			width: 100%;
			height:213px;
			margin-top: 20px;
		}

		.detail-wrap{
			width:100%;
			margin-top: 10px;

			.detail{
				.detail-first-col{
					float: left;
				}

				.detail-other-col{
					overflow-x: auto;
					white-space:nowrap;

					.other-col-item{
						display: inline-block;
					}

					.detail-cell{
						text-align: center;
					}
				}

				.detail-cell{
					padding: 8px;
					border: 1px solid #333;
				}

				.detail-horizontal-title{
					background-color: #eee;
					min-width: 80px;
				}

				.detail-vertical-title{
					.ellipsis;

					background-color: #eee;
					width:120px;
				}

				.clear-top-border{
					margin-top:-1px;
				}

				.clear-left-border{
					margin-left: -1px;
				}

			}
		}

	}
}