.matrix{
	.dashboard{
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Chrome/Safari/Opera */
		-khtml-user-select: none; /* Konqueror */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently
		not supported by any browser */
		::-webkit-scrollbar{
			display:none;
		}
		::-moz-scrollbar{
			display:none;
		}
		::-ms-scrollbar{
			display:none;
		}
		::scrollbar{
			display:none;
		}
		.viewCard, .createCard{
			float: left;
			height: 168px;
			width: 340px;//296px
			margin: 24px;
			border-radius: 3px;
			border: 1px solid #cccccc;
			position: relative;
		}
		.createCard{
			border: 1px dashed #cccccc;
			cursor: pointer;
			&>div{
				text-align: center;
				line-height: 166px;
				font-size: 32px;
				color: #57c5f7;
			}
		}
		.viewCard{
			.cardInfo {
				width: 100%;
				height: 100%;
				padding: 10px;

				.itemIndex{
					width: 30px;
				    height: 30px;
				    text-align: center;
				    line-height: 28px;
				    color: red;
				    border-radius: 30px;
				    border: 1px solid #ccc;
				    position: absolute;
				    top: -15px;
				    left: -15px;
				    background: #fff;
				}

				.btnBar{
					width: 100%;
					height: 30px;
					line-height: 30px;

					.btns{
						width: 100%;
						height: 100%;
						display: none;
						.rm, .field, .manager, .edit{
							float: right;
							color: #888888;
							margin-right: 10px;
							font-size: 18px;
							cursor: pointer;
							&:hover{
								color: #55A1F8;
							}
						}
					}
				}

				.info{
					height: 30px;
					line-height: 30px;
					margin-left: 20px;
					.label{
						width: 100px;
						position: absolute;
						left: 0;
						height: 100%;
					}
					.desc, a{
						position: absolute;
						left: 100px;
						right: 0px;
						height: 100%;
					}
					a{
					    overflow: hidden;
					    text-overflow: ellipsis;
					    -o-text-overflow: ellipsis;
					    white-space: nowrap;
					}
					.desc{
					    overflow: auto;
					    // text-overflow: ellipsis;
					    // -o-text-overflow: ellipsis;
					    // white-space: normal;
					    // word-wrap: break-word;
					    max-height: 80px;
					    height: 80px;
					    cursor: default; 
					}
				}
			}

			&:hover{
				border-color: #4073c2;
				.cardInfo {
					.itemIndex{
					    color: #fff;
					    border-radius: 30px;
					    border: 1px solid #4073c2;
					    background: #4073c2;
					}
					.btnBar{
						.btns{
							display: block;
						}
					}
				}
			}
		}
		.static{
			background: #f3fafe;
		}
	}

	.ant-spin-nested-loading{
		height: 100%;
		.ant-spin-container{
			height: 100%;
		}
	}
}

@media screen {
	@media (max-width: 1440px) {
		.matrix{
			.dashboard{
				.viewCard, .createCard{
					width: 296px;
				}
			}
		}
	}
	@media (max-width: 1680px) {
		.matrix{
			.dashboard{
				.viewCard, .createCard{
					width: 290px;
				}
			}
		}
	}
	@media (min-width: 1680px) {
		.matrix{
			.dashboard{
				.viewCard, .createCard{
					width: 368px;
				}
			}
		}
	}
}