.sidebar-link {
  color: #131a3099;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 12px;
}

/* Contact Page */

label.form-label {
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}
input.form-input {
  margin: 10px 0 0;
  padding: 10px 0;
  border-bottom: 1px solid #dcd3cb;
}
input.form-input::placeholder {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: middle;
}
.main-contact .custom-form__block {
  margin-bottom: 22px;
  &:last-child {
    margin-bottom: 0;
  }
}
.contactFormMessage {
  margin-bottom: 0;
  margin-top: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #dcd3cb;
}
.btn-submit {
  padding: 13px 31px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.contact-info__heading {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  margin-top: 76px;
  margin-bottom: 12px;
  @media (max-width: 749px) {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 12px;
  }
}
.contact-info p,
.contact-info a {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  color: #131a30bf;
}

/* End Contact Page */

/* shipping information */

.shipping-info .shipping-info__title {
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.2px;
  margin: 0;
  @media (max-width: 749px) {
    font-size: 24px;
    line-height: 32px;
  }
}
.shipping-info .shipping-info__heading {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  margin-top: 40px;
  margin-bottom: 32px;
  color: #131A30BF;
  @media (max-width: 749px) {
    font-size: 18px;
    line-height: 24px;
    margin-top: 32px;
    margin-bottom: 24px;
  }
}
.shipping-info .shipping-info__content p,
.shipping-info .shipping-info__content a {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  color: #131A30BF;
}
.shipping-info .shipping-info__content ul {
  list-style: disc;
}
.shipping-info .shipping-info__content ol {
  list-style: decimal;
}

/* End shipping information */

.order-status {
  background-color: #FFFFFF;
	.section-wrap {
		max-width: 1230px;
		padding: 50px 15px 150px;
		margin: 0px auto;
	}
	.section-header {
		text-align: center;
		.section-title {
			font-weight: 300;
			font-size: 40px;
			line-height: 1;
			margin-bottom: 50px;
		}
	}
	p {
		&.custom_texts {
			font-size: 18px;
			font-weight: 300 !important;
			line-height: 1.6;
			letter-spacing: normal;
			max-width: 600px;
			margin: 0 auto;
			text-align: center;
			padding-bottom: 70px;
		}
	}
	.w3-order-lookup {
		padding-bottom: 100px;
		#order-lookup-form {
			max-width: 600px;
			margin: 0px auto;
			label {
				display: none;
			}
			input {
				&:not([type="submit"]) {
					width: 100%;
					display: block;
					background-color: #f5f2ec;
					font-family: 'Azo Sans';
					font-size: 14px;
					letter-spacing: normal;
					line-height: 1.2;
					color: #000;
					// border: none;
					margin: 0px 0px 15px;
					padding: 10px 15px;
				}
				&:not([type="submit"])::-webkit-input-placeholder {
					font-family: 'Azo Sans';
					font-size: 14px;
					letter-spacing: normal;
					text-transform: uppercase;
					line-height: 1.2;
				}
				&:not([type="submit"]):-ms-input-placeholder {
					font-family: 'Azo Sans';
					font-size: 14px;
					letter-spacing: normal;
					line-height: 1.2;
					text-transform: uppercase;
				}
				&:not([type="submit"])::placeholder {
					font-family: 'Azo Sans';
					font-size: 14px;
					letter-spacing: normal;
					text-transform: uppercase;
					line-height: 1.2;
				}
			}
			input[type="submit"] {
				margin: 0px auto;
				display: table;
				color: #fff;
				border-color: #141a2d;
				font-size: 12px;
				letter-spacing: 0;
				text-transform: uppercase;
				transition: all 0.2s ease-in-out;
				padding: 10px 28px;
				margin-top: 30px;
				max-width: 190px;
				width: 100%;
				background-color: #141a2d;
			}
			input[type="submit"]:hover {
				background-color: transparent;
				border-color: #141a2d;
				color: #141a2d;
			}
		}
	}
	.section-footer {
		text-align: center;
		.section-footer-title {
			font-weight: 300 !important;
			letter-spacing: normal;
			font-size: 18px;
			margin-bottom: 30px;
		}
		.section-boutton-group {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			a {
				width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        background-color: #141a2d;
        color: #fff;
        position: relative;
        min-height: auto;
        height: auto;
        line-height: 1;
        max-width: 210px;
        font-size: 12px;
				&:not(:last-child) {
					margin-right: 5px;
				}
				&.icon_btn {
					padding-left: 60px;
				}
				&:hover {
					background-color: #fff;
					color: #141a2d;
					.button_icon {
						svg {
							path {
								fill: #141a2d;
							}
						}
					}
				}
				.button_icon {
					position: absolute;
					top: 50%;
					left: 10px;
					width: 40px;
					height: 40px;
					transform: translateY(-50%);
					svg {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
	.section-stap-box {
		padding-bottom: 100px;
	}
	.section-stap-box-wrap {
		display: flex;
		flex-wrap: wrap;
		z-index: 1;
		position: relative;
		.col {
			max-width: 25%;
			text-align: center;
			width: 100%;
		}
		&:after {
			content: "";
			width: 100%;
			max-width: 00%;
			display: block;
			height: 2px;
			background: #f6f6f4;
			position: absolute;
			z-index: -1;
			top: 24%;
			left: 9%;
		}
	}
	.col {
		.col-icon {
			padding-bottom: 20px;
			display: flex;
			justify-content: center;
		}
		&:not(.active) {
			.col-icon-wrap {
				width: 120px;
				height: 120px;
				display: flex;
				align-items: center;
				justify-content: center;
				svg {
					width: 80px;
					height: 80px;
				}
			}
		}
		&.active {
			.col-icon-wrap {
				width: 120px;
				height: 120px;
				border-radius: 100%;
				margin: 0px auto;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f6f6f4;
				border-color: #f6f6f4;
				svg {
					width: 80px;
					height: 80px;
				}
			}
		}
		.col-icon-wrap {
			background: #FFFFFF;
			border: 1px solid #c8c9cb;
			border-radius: 100%;
		}
		.col-details {
			h5 {
				text-transform: uppercase;
				line-height: 1;
				font-size: 18px;
			}
			p {
				letter-spacing: normal;
				line-height: 1.3;
				max-width: 260px;
				margin: 0 auto 5px;
			}
			.section-link {
				a {
					text-decoration: underline;
					color: #141a2d;
					letter-spacing: normal;
				}
			}
		}
	}
}
.order-status .col:not(.full) .col-details h5,
.order-status .col:not(.full) .col-details p,
.order-status .col:not(.full) .col-details .section-link a,
.order-status .col:not(.full) .col-icon-wrap svg {
	opacity: 0.3;
}

$background-color: #fff;

.order-status .section-stap-box-wrap.stap-two-active:after {
  max-width: 30%;
}
.order-status .section-stap-box-wrap.stap-three-active:after {
  max-width: 50%;
}
.order-status .section-stap-box-wrap.stap-four-active:after {
  max-width: 80%;
}

@media (min-width: 768px) {
	.order-status .section-stap-box-wrap.stap-two-active:after {
    max-width: 30%;
  }
  .order-status .section-stap-box-wrap.stap-three-active:after {
    max-width: 50%;
  }
  .order-status .section-stap-box-wrap.stap-four-active:after {
    max-width: 80%;
  }
}
@media only screen and (max-width: 1080px) {
	.order-status {
		padding: 100px 0px;
		.col {
			.col-details {
				p {
					padding: 0px 5px;
				}
			}
		}
	}
}
@media only screen and (max-width: 991px) {
	.order-status {
		.col {
			.col-icon-wrap {
				svg {
					width: 100px;
					height: 100px;
				}
			}
			&:not(.active) {
				.col-icon-wrap {
					width: 100px;
					height: 100px;
					svg {
						width: 60px;
						height: 60px;
					}
				}
			}
			.col-details {
				p {
					font-size: 12px;
					margin: 0px auto;
				}
				.section-link {
					a {
						font-size: 12px;
						margin: 0px auto;
					}
				}
			}
		}
		.col.active {
			.col-icon-wrap {
				width: 100px;
				height: 100px;
				svg {
					width: 60px;
					height: 60px;
				}
			}
		}
		.section-stap-box-wrap {
			&:after {
				height: 1px;
				top: 24%;
			}
		}
	}
}
@media only screen and (max-width: 860px) {
	.order-status {
		.section-header {
			.section-title {
				margin-bottom: 20px;
			}
		}
		.section-stap-box {
			padding-bottom: 60px;
		}
	}
}
@media only screen and (max-width: 767px) {
	.order-status {
		.section-stap-box-wrap {
			.col {
				max-width: 100%;
				padding-top: 5px;
				background-color: $background-color;
				&:not(:last-child) {
					margin-bottom: 60px;
				}
			}
			&:after {
				max-width: 1px;
				top: 0px;
				left: 0px;
				right: 0px;
				margin: 0px auto;
			}
		}
		.col {
			.col-icon {
				background-color: $background-color;
			}
			.col-details {
				background-color: $background-color;
				padding-bottom: 5px;
			}
		}
		.section-stap-box-wrap.stap-two-active {
			&:after {
				height: 30%;
			}
		}
		.section-stap-box-wrap.stap-three-active {
			&:after {
				height: 60%;
			}
		}
		.section-stap-box-wrap.stap-four-active {
			&:after {
				height: 100%;
			}
		}
		.section-header {
			.section-title {
				font-size: 30px;
				margin-bottom: 10px;
			}
		}
		p.custom_texts {
			font-size: 14px;
			padding-bottom: 40px;
		}
		padding: 60px 0px;
		.w3-order-lookup {
			#order-lookup-form {
				input {
					&:not([type=submit]) {
						margin-bottom: 10px;
					}
				}
				input[type=submit] {
					margin-top: 20px;
					max-width: 100%;
				}
			}
			padding-bottom: 60px;
		}
	}
}
@media only screen and (max-width: 540px) {
	.order-status {
		.section-footer {
			.section-boutton-group {
				flex-direction: column;
				align-items: center;
				a {
					&:not(:last-child) {
						margin: 0px 0px 5px;
					}
					max-width: 100%;
					.button_icon {
						position: static;
						transform: none;
						margin-right: 10px;
					}
				}
				a.icon_btn {
					padding-left: 20px;
					padding-top: 0;
					padding-bottom: 0;
				}
			}
			.section-footer-title {
				margin-bottom: 20px;
			}
		}
	}
}

