/*# Table of content
 ## MULTI STEP CSS
 #*/

:root {
    --brand-color: #E14E2C;
    --hover-color: #004272
}

.step_item {
    display: none;
}
.step_item.active {
    display: block;
}
/* step indicator css */
.step_indicator {
    width: 228px;
    margin: auto;
    height: 20px;
    display: block;
    position: relative;
    margin-bottom: 16px;
}
.step_indicator .line {
    width: 100%;
    height: 2px;
    background-color: var(--hover-color);
    margin: 9px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.step_circles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.step_circle {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    border: 4px solid white;
    outline: 1px solid var(--hover-color);
}
.step_circle.active,
.step_circle.completed {
    background-color: var(--hover-color);
}


/* Step Title and Content Style */
.step_title {
    color: #000000;
    font-size: 28px;
    text-align: center;
    line-height: 33px;
    margin-bottom: 10px;
}
.step_cont {
    text-align: center;
    font-size: 16px;
    line-height: 21px;
    color: #1A1A1A;
    margin-bottom: 20px;
}
.step_card h4 {
	font-size: 16px!important;
	font-weight: 700!important;
	margin-top: 8px;
	margin-bottom: 8px;
	color: #3A3A3A;
}

/* Step Field Item css */
.step_radio {
    display: none!important;
}
.step_fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.step_fields .single_item {
    flex: 0 0 auto;
    max-width: 100%;
}
#step1 .step_fields .single_item {
    width: 190px;
}

.step_fields .step_card {
    background-color: #ffffff;
    display: block;
    text-align: center;
    padding: 22px;
}

.step_fields .step_card.has_border {
    border: 1px solid #A9A9A9;
    border-radius: 12px;
}
.step_radio:checked + .step_card {
    background-color: #E14E2C29;
}


/* Next and Back Button Css */
.next_btn .next,
.back_btn .back {
    width: 90%;
    max-width: 352px;
    margin: 32px auto 13px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--brand-color);
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    border: none;
    outline: none;
    cursor: pointer;
	height: 48px!important;
}
.back_btn .back {
    max-width: 104px;
    color: #3A3A3A;
    background-color: #EDEDED;
    margin-top: 0;
}

/* Step Footer Css */
.step_footer {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
    max-width: 418px;
    margin: auto;
}
.step_footer span {
    text-align: center;
    display: block;
    font-size: 12px;
    line-height: 14px;
    color: #3A3A3A
}
/* Stem 2 CSS */
.size_options {
    display: none;
}
.step_radio:checked + .step_card .size_options {
    display: flex;
}
#step2 .step_radio:checked + .step_card {
    width: 390px;
    display: flex;
    align-items: center;
}
#step2 .size_thumbnail {
    width: 148px;
}
.field_label {
    width: 44px;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 14px;
    color: #1A1A1A;
    letter-spacing: 0;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
.size_label p {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 15px;
    letter-spacing: 0;
    text-transform: capitalize;
}

#step2 .size_options {
    text-align: left;
    padding-left: 20px;
    width: 160px;
    flex-direction: column;
    gap: 7px;
}
.size_option_field {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.size_field_row {
    display: flex;
    flex-direction: row;
    border: 1px solid #00000070
}
.size_options input {
    height: 30px;
    width: 53px!important;
    padding-left: 6px;
}
.size_field_row input, .size_field_row select {
    border: none;
    outline: none;
	border-radius: 0!important;
	background-color: #ffffff!important;
	padding: 0 0 0 6px!important;
	height: 30px!important;
}
.size_field_row select {
    border-left: 1px solid #00000070;
	font-size: 12px;
	width: 50px!important;
	padding-left: 0!important;
}


@media all and (max-width:767px) {
    #step2 .step_radio:checked + .step_card {
        flex-direction: column;
        width: auto;
        gap: 12px;
    }
    #step2 .size_options {
        padding-left: 0;
    }
	#step1 .step_fields .single_item,
	#step3 .step_fields .single_item {
		width: 140px;
	}
}


/* step 4 css */
#step4 .step_fields .single_item {
    width: 100%;
    max-width: 322px;
}
.zip_code_img {
    margin-top: 50px;
    margin-bottom: 32px;
}
.zip_code_img img {
    display: block;
    margin: auto;
}
.zip_input_wrapper {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(102, 102, 102, 0.5);
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 5px;
}
.zip_input_wrapper svg {
    display: block;
    margin: auto;
}
.zip_input_wrapper input {
    border: none;
    border-left: 1px solid rgba(102, 102, 102, 0.5)!important;
    height: 38px!important;
    padding-left: 12px!important;
    outline: none;
    border-radius: 0 6px 4px 0!important;
    background-color: #E8F0FE!important;
}
.zip_input_wrapper input:focus {
	border: none!important;
	border-left: 1px solid rgba(102, 102, 102, 0.5)!important;
}
#step4 .form_label {
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    display: block;
    margin-bottom: 6px;
	text-transform: capitalize;
	letter-spacing: 0;
}

/* step 5 css */
.form_fields {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    max-width: 500px;
    margin: auto;
}
.form_fields > div {
    padding: 0 5px;
    flex: 0 0 auto;
    max-width: 100%;
}
.w_50 {
    width: 50%;
}
.w_100 {
    width: 100%;
}
.form_fields input {
    width: 100%;
    height: 53px!important;
    background-color: #E8F0FE!important;
    margin-bottom: 14px;
    border: none!important;
    outline: none!important;
    padding-left: 12px!important;
    font-size: 16px!important;
    box-shadow: none!important;
}
.step_submit_notification {
    color: #3A3A3A;
    font-size: 14px;
    line-height: 16px;
    max-width: 540px;
    margin: 10px auto 0;
}

/* Success Message CSS */
.success_message {
    padding: 80px 0;
}.success_message {
    text-align: center;
}
.success_svg {
    width: 75px;
    height: 75px;
    background: linear-gradient(137.51deg, #319B42 35.1%, #113517 100%);
    font-size: 25px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px 10px #319B4229;
}
h2.success_heading {
    font-family: Roboto;
    font-weight: 700!important;
    font-size: 20px!important;
    text-align: center;
    margin-top: 34px!important;
}
p.cussess_description {
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 6px;
}
.success_icon_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}