.form-flow-chart {
--num-size: 70px;
--shape-gray: #c1c1c1;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
max-width: 700px;
}
.form-flow-chart__item {
position: relative;
}
.form-flow-chart__item:not(:last-child):before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: calc(var(--num-size) / 2);
left: 50%;
transform: translateY(-50%);
width: 100%;
height: 2px;
background-color: var(--shape-gray);
}
.form-flow-chart__num {
display: grid;
place-items: center;
margin-right: auto;
margin-left: auto;
width: var(--num-size);
height: var(--num-size);
border: 2px solid var(--shape-gray);
border-radius: 50%;
background-color: var(--shape-gray);
color: #fff;
font-size: 2em;
font-weight: bold;
letter-spacing: 1px;
}
.form-flow-chart__txt {
margin-top: 0.5em;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
.mw_wp_form_input .input-flow .form-flow-chart__num,
.mw_wp_form_confirm .confirm-flow .form-flow-chart__num,
.mw_wp_form_complete .complete-flow .form-flow-chart__num {
border-color: transparent;
background-color: #187fc4;
}
@media (max-width: 768px) {
.form-flow-chart {
--num-size: 50px;
}
}
