.hrm-payroll{
	height:100%;

	.greyBg{
		background: #eee;
	}

	.large-width{
		min-width: 200px !important;
	}

	.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;
		}
	}

	.payroll-detail{
		display: flex;
		flex-direction:column;
		align-items: center;

		img {
			width: 500px;
			height:213px;
			margin-top: 20px;
			border: 1px solid #E4E4E4;
		}

		.detail{
			width: 500px;
			margin-top: 15px;

			display: flex;
			flex-direction:column;
			overflow-x:auto;

			.detail-item{
				display: flex;

				& div{
					border: 1px solid #E4E4E4;
					padding: 5px;

					& p{
						text-align:left;
						display:inline-block;
					}
				}

				& div:first-child{
					width:120px;
					min-width: 120px;
				}

				& div:not(:first-child){
					margin-left: -1px;
					flex-grow: 1;
					text-align: center;
					word-break: break-all;

					min-width:90px;
				}
			}

			& div:not(:first-child){
				& div{
					margin-top:-1px;
				}
			}
		}

	}

}