.order-form-msk {
	padding: 60px 0px;
	position: relative;
}
.order-form-msk .wrapper{
	z-index: 2;
	position: relative;
}
.order-form-msk:after{
	content: "";
	position: absolute;
	display: block;
	height: 100%;
	width: 100vw;
	top: 0;
	left: calc(-1*(100vw - 100%)/2);
	margin: auto;
	background-image: linear-gradient(to bottom, rgba(129,129,129,0.5), rgba(129,129,129,0.5)), url(/wp-content/themes/cargo777/img/form-order-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}
.oc-wrap {
	background-color: rgba(0,0,0,0.7);
  backdrop-filter: blur(30px);
	color: #fff;
}
.oc-header {
	padding: 6rem;	
}
.oc-body {
	display: flex;
	background-color: #fff;
	color: #333;
	width: 100%;
}
.oc-steps {
	flex: 1;
	padding: 6rem;
}
.oc-nav {
	flex: none;
	width: 30rem;
	padding: 4rem 0;
	background-color: #f0f2f5;
	position: relative;
}
.oc-nav-steps {
	position: sticky;
	top: 6rem;
}
.step-link {
  border: 0;
  background: none;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
	transition: all ease-in-out 0.15s;
}
.step-circle {
  width: 3rem;
  line-height: 3rem;
  border-radius: 50%;
  background: #888;
  color: #fff;
  font-weight: 700;
}
.step.active .step-link {
	background: #fff;
}
.step:not(.locked):not(.active) .step-link:hover {
	background: #ddd;	
}
.step.locked .step-link:hover {
	cursor: auto;
}
.step-label {
	text-align: left;
	line-height: 1;
}
.step.active .step-label {
	font-weight: 700;
}
.step.locked {
	opacity: 0.5;
}
h2.oc-title {
	color: #fff;
	font-size: 4rem;
	line-height: 1.25;
	margin: 0 0 3rem;
}
.oc-subtitle {
	font-size: 2rem;
	line-height: 1.25!important;
	color: #ddd;
	margin: 0;
	text-align: left!important;
}
.oc-subtitle p {
  font-size: 18px;
  text-align: left;
}
.oc-subtitle p a {
  color: lightgreen !important;
}
.oc-step {
	display: none;
}
.oc-step.active {
	display: block;
}
h3.oc-step-title {
	font-size: 2.5rem;
	line-height: 1.25;
	margin: 0 0 3rem;
	text-transform: uppercase;
	font-weight: 700;
}
h3.oc-step-title span {
	display: inline-block;
  line-height: 1;
  border-bottom: 2px solid #333;
}
.oc-row {
	display: flex;
	gap: 2rem;
	padding: 2rem 0;
}
.oc-row:not(:last-child) {	
	border-bottom: 1px solid #eee;
}
.ocr-label {
	flex: 1;
	line-height: 1.1;
	font-weight: 700;
}
.oc-row.required .ocr-label:after {
	content: ' *';
}
.ocr-wrap {
	flex: 2;
}
.ocr-wrap input {
	margin: 0;
	width: 100%;
}
.ocr-wrap textarea {
	margin: 0;
	width: 100%;
	max-width: 0;
  min-width: 100%;
}
.ocr-wrap select {
	width: 100%;
	margin: 0;
	appearance: none;
  background-image: url(../../../img/arrow-bot-black.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center;
  text-transform: uppercase;
}
.ocr-wrap input, .ocr-wrap textarea, .ocr-wrap select {
	border: 1px solid #bbb;
	border-radius: 0;
	background-color: #fff;
	transition: all ease-in-out 0.15s;
}
.ocr-wrap input:focus, .ocr-wrap textarea:focus, .ocr-wrap select:focus,
.ocr-wrap input:focus-visible, .ocr-wrap textarea:focus-visible, .ocr-wrap select:focus-visible {
	border-color: #333;
	outline: none !important;
}
.ocr-input:not(:last-child) {
	margin-bottom: 1rem;
}
.ocr-input input {
	position: absolute;
  z-index: -1;
  opacity: 0;
	width: 0;
}
.ocr-input label {
	margin: 0;
  padding: 0 0 0 3rem;
  line-height: 1.5;
  position: relative;
  font-size: 1.8rem;
	font-weight: 400;
}
.ocr-input label:hover {
	cursor: pointer;
}
.ocr-input label:before {
	content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 2rem;
  height: 2rem;  
	background-color: #e8e8e8;
	border: 0;
}
.ocr-radio label:before {
	border-radius: 50%;
}
.ocr-radio input:checked + label:before {
	background-color: #fff;	
	border: 7px solid #333;
}
.ocr-field:not(:last-child) {
	margin-bottom: 1rem;
}
.ocr-checkbox input:checked + label:before {
	background-color: #333;
	background-image: url(../../../img/check-white.svg);
  background-repeat: no-repeat;
  background-position: center;
}
#oc-row-metric .ocr-wrap {
	display: flex;
	gap: 2rem;		
}
#oc-row-metric .ocr-field {
	flex: 1;	
	position: relative;
	margin-bottom: 0;
}
#oc-row-metric .ocr-field + .ocr-field:before {
  content: '×';
  position: absolute;
 	top: 1rem;
  left: -1.5rem;
  font-size: 2rem;
  color: #666;
}	
.ocr-info {
	display: none;
	padding: 2rem 2rem 1rem;
	background-color: #f0f2f5;
	margin-top: 2rem;
	font-weight: 700;
}
.ocr-info.active {
	display: block;
}
.ocr-info-title {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-right: 3rem;
}
.ocr-info-item p {
	line-height: 1.25;
	margin-bottom: 1rem;
}
.ocr-info-item ul li,
.ocr-info-item ol li {
	margin-bottom: 1rem;
	line-height: 1.25;
}
.ocr-info-item ul li:last-child,
.ocr-info-item ol li:last-child {
	margin-bottom: 0;
}
.success-message {
	display: none;
	text-align: center;	
	animation: fadeIn 0.8s ease;
}
.success-message p {
	text-align: center;
}
.success-message.show {
	display: block;
}
.ocr-error {
	color: #e74c3c;
	font-size: 14px;
	margin-top: 5px;
	display: none;
	line-height: 1;
}
.ocr-error.show {
	display: block;
}
.oc-form-buttons {
	display: flex;
	margin-top: 2rem;
	justify-content: space-between;
}
.oc-btn {
  display: block;
  padding: 0.5rem 2rem;
  font-size: 2.4rem;
  text-transform: uppercase;
  font-family: 'Bebas Neue';
  font-weight: 700;
  border: 0;
  transition: all ease-in-out 0.15s;
}
.oc-btn:hover {
	cursor: pointer;
}
.oc-form-buttons .btn-prev {
	color: #333;
  background: #eee;
}
.oc-form-buttons .btn-next,
.oc-form-buttons .btn-submit {
	color: #fff;
  background: #333;
}
#oc-result {
	padding: 3rem;
	background-color: #f0f2f5;
	display: none;
}
#oc-result.active {
	display: block;
}
h3#result-title {  
  margin: 0 0 3rem;
}
#result-sum {
  display: flex;
  gap: 4rem;
  border: 1px solid #333;
  padding: 2rem;
}
.rsum-item {
  flex: 1;
}
.rsum-item span {
  font-size: 3rem;
  font-weight: 700;
}
#result-info {
  display: flex;
  gap: 4rem;
}
.ocri-body {
  flex: 1;
	margin-top: 2rem;
	display: flex;
  flex-direction: column;
}
.ocri-title {
  font-weight: 700;
  margin-bottom: 1rem;
}
.ocri-list {
	flex: 1;
}
.ocri-item {
  display: flex;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
}
.ocri-list > .ocri-item:last-child {
  border: 0;
	padding-bottom: 1rem;
}
.ocri-item.total {
  border-bottom: 0;
  padding: 1rem 0 0;
  font-weight: 700;
  border-top: 1px solid #333;
}
.oc-form-progress {
	margin-top: 2rem;
}

@media(max-width:1024px) {	
	.oc-header {
		padding: 3rem;
	}
	.oc-steps {
		padding: 3rem;
	}
	.oc-row {		
		gap: 1rem;		
		flex-direction: column;
	}
	.oc-nav {
		width: 24rem;
	}
	.step-link {
		padding: 1.5rem;
	}
}
@media(max-width:640px) {
	.oc-header {
		padding: 3rem;
	}
	h2.oc-title {
		font-size: 3rem;
		margin-bottom: 2rem;
	}
	.oc-body {
		flex-direction: column-reverse;
	}
	.oc-steps {
    padding: 2rem;		
  }
	.oc-nav {
		padding: 2rem;
		width: 100%;
	}
	h3.oc-step-title {
		margin-bottom: 1rem;
	}
}

/* Tel input */
.iti {
	width: 100%;
}
.iti__tel-input {
	padding-left: 48px!important;
}