@import '../../styles/theme.less';

.myStep {
	&-item {
		position: relative;
		padding-bottom: 34px;

		&-success {
			background-color: @main-color;

			&::after {
				border-color: #bfbfbf;
			}
		}

		&-success1 {
			background-color: @main-color;

			&::after {
				border-color: #bfbfbf;
			}
		}

		&-noStarted {
			background-color: #1890ff;

			&::after {
				border-color: #1890ff;
			}
		}

		&-noStarted1 {
			background-color: rgba(185, 99, 211, 1);

			&::after {
				border-color: rgba(185, 99, 211, 1);
			}
		}

		&-icon {
			float: left;
			margin-right: 8px;
			font-size: 12px;
			line-height: 12px;
			width: 22px;
			height: 22px;
			padding: 5px;
			border-radius: 50%;
			color: #ffffff;
		}

		&-icon1 {
			float: left;
			margin-right: 8px;
			font-size: 12px;
			line-height: 12px;
			width: 52px;
			height: 52px;
			padding: 4px !important;
			border-radius: 5px;
			color: #ffffff;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}

		&-img {
			width: 16px;
			height: 16px;
			background-color: #ffffff;
			border-radius: 50%;
			position: absolute;
			right: -4px;
			bottom: 0;
		}

		&-divider {
			position: absolute;
			top: 56px; //52+4
			left: 24px;
			width: 2px;
			bottom: 4px;

			&::after {
				content: '';
				display: inline-block;
				height: 100%;
				border-left: 2px solid;
				border-color: @divider-color;
			}

			&-success {
				&::after {
					border-color: @divider-color;
				}
			}
		}

		&-divider1 {
			position: absolute;
			top: 0;
			left: 24px;
			width: 3px;
			height: 32px+52px+30px;
			padding-top: 22px;

			&::after {
				content: '';
				display: inline-block;
				height: 32px+52px+30px;
				border-left: 2px solid;
				border-color: @divider-color;
			}

			&-success {
				&::after {
					border-color: @divider-color;
				}
			}
		}

		&-divider2 {
			position: absolute;
			top: 0;
			left: 24px;
			width: 3px;
			height: 32px+52px+60px;
			padding-top: 22px;

			&::after {
				content: '';
				display: inline-block;
				height: 32px+52px+60px;
				border-left: 2px solid;
				border-color: @divider-color;
			}

			&-success {
				&::after {
					border-color: @divider-color;
				}
			}
		}

		&-right {
			overflow: hidden;
		}

		// &-title {
		// 	font-weight: 600;
		// }ｔｉｔｌｅ

		&-title {
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			word-break: break-all;
			word-wrap: break-word;
		}

		&-p {
			margin-top: 4px;
			display: flex;
			align-items: flex-start;

			&-flex {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 8px;

				&-title {
					font-size: 12px;
					line-height: 20px;
					color: @text-color-secondary;
				}
			}

			&-yy {
				display: flex;
				flex-direction: column;
				margin-top: 8px;
				background: #f3f2f7;
				border-radius: 5px;
				padding: 4px 8px;
				color: rgba(0, 0, 0, 0.5);

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

		&-textArea {
			max-width: 200px;
			flex: 1;
			overflow: hidden;
		}

		div.ant-typography {
			margin: 0;
		}

		&-noread {
			display: inline-block;
			padding: 3px 8px;
			background: #ffece8;
			border-radius: 5px;
			color: #F53F3F;
			margin-top: 8px;
		}

		&-read {
			display: inline-block;
			padding: 3px 8px;
			color: #00B42A;
			background: #e8ffea;
			border-radius: 5px;
			margin-top: 8px;
		}
	}
}

.tabBtn {
	display: flex;
	margin-bottom: 12px;

	&-btn {
		height: 32px;
		background: #ffffff;
		border: 1px solid #e5e6eb;
		border-radius: 4px;
		color: #171A1D;
		padding: 0 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&-active {
		color: #1a6fb8;
		border-color: #1a6fb8;
	}

	&-unit {
		height: 32px;
		border-radius: 21px;
		color: #1D2129;
		padding: 0 12px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&-unitActive {
		background: #f3f2f7;
		color: #1a6fb8;
	}
}