@charset "utf-8";

ul.flow {
	overflow: hidden;
	margin-bottom: 20px;
}

ul.flow li {
	padding: 0 5px;
}

ul.flow>li:not(:last-child)::after {
	content: "▼";
	display: flex;
	justify-content: center;

	padding-bottom: 0.50rem !important;

	color: rgba(125 160 210/ 1.00);
	font-size: 2.00rem;
}

ul.flow li h3 {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: center;
	height: 36px;
	background: rgb(187, 187, 187);
	background: linear-gradient(0deg, rgba(187, 187, 187, 1) 0%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 100%);
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;

	color: rgba(255 255 255/ 1.00);
	font-size: 1.15rem;
	font-weight: bold;
}

ul.flow li:not(:nth-child(5)) h3::before {
	content: "";

	width: 60px;
	height: 30px;
	margin-right: 10px;
	margin-left: 0.50rem;
	border: solid 2px rgba(125 160 210/ 1.00);
	border-radius: 3px;
}

ul.flow li:nth-child(5) h3::before {
	content: "";

	margin-right: 10px;
	margin-left: 0.50rem;
}

ul.flow li:nth-child(1) h3::before {
	background: white url(../img/first-todo/flow/icon1.png) left bottom repeat-x;
}

ul.flow li:nth-child(2) h3::before {
	background: white url(../img/first-todo/flow/icon2.png) left bottom repeat-x;
}

ul.flow li:nth-child(3) h3::before {
	background: white url(../img/first-todo/flow/icon3.png) left bottom repeat-x;
}

ul.flow li:nth-child(4) h3::before {
	background: white url(../img/first-todo/flow/icon4.png) left bottom repeat-x;
}

ul.flow li:nth-child(6) h3::before {
	background: white url(../img/first-todo/flow/icon6.png) left bottom repeat-x;
}

ul.flow li article {
	color: #555 !important;
	padding: 10px 10px 10px 25px;
	margin-top: 5px !important;
	margin-top: 7px !important;
	background: url(../img/test3.gif) 6px 0 repeat-y;
}

ul.flow li p {
	margin-bottom: 0.50rem !important;
}

ul.flow h4 {
	display: flex;
	align-items: center;
	padding: 0.50rem 0.75rem 0 0.50rem !important;
	margin-bottom: 0.50rem !important;
	background: #F0F0F5;
	border-bottom: 1px dotted rgba(180 180 180/ 1.00);
	color: #003E9D !important;
	font-size: 1.15rem;
	font-weight: bold;
}

ul.flow li ol {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}


ul.flow li ol>li {
	width: calc(100% / 2 - 0.50rem);
	border: 1px solid rgba(220 220 220/ 1.00);
}

ul.flow li ol>li:nth-child(1) {
	width: 100%;
    margin-bottom: 15px !important;
}


ul.flow li ol>li h4 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: start;
	align-items: start;
}

ul.flow li ol>li h4 > span > * {
	white-space: nowrap;
}

ul.flow li ol>li h4::before {
	content: "";

	width: 60px;
	height: 30px;
	margin: 0 10px 0.50rem 0.50rem;
	border: solid 2px rgba(125 160 210/ 1.00);
	border-radius: 3px;

}

ul.flow li ol>li:nth-child(1) h4::before {
	background: white url(../img/first-todo/flow/icon5.png) left bottom repeat-x;
}

ul.flow li ol>li:nth-child(2) h4::before {
	background: white url(../img/first-todo/flow/icon5_1_1.png) left bottom repeat-x;
}

ul.flow li ol>li:nth-child(3) h4::before {
	background: white url(../img/first-todo/flow/icon5_2.png) left bottom repeat-x;
}

ul.flow li ol>li h4>span>strong {
	color: #003E9D !important;
	font-size: 1.10rem;
	font-weight: bold;
}

ul.flow li ol>li h4>span>span {
	font-size: 85%;
}