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

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

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

		&-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 12px;
			border-radius: 5px;
			color: #ffffff;
			position: relative;
		}

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

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

			&::after {
				content: '';
				display: inline-block;
				height: 32px+52px;
				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: 22px;
		}

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