@font-face {
    font-family: 'MTS Sans';
    src: url('MTSSans-Medium.eot');
    src: local('MTS Sans Medium'), local('MTSSans-Medium'),
        url('MTSSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('MTSSans-Medium.woff2') format('woff2'),
        url('MTSSans-Medium.woff') format('woff'),
        url('MTSSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Sans';
    src: url('MTSSans-Bold.eot');
    src: local('MTS Sans Bold'), local('MTSSans-Bold'),
        url('MTSSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('MTSSans-Bold.woff2') format('woff2'),
        url('MTSSans-Bold.woff') format('woff'),
        url('MTSSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MTS Sans';
    src: url('MTSSans-Regular.eot');
    src: local('MTS Sans Regular'), local('MTSSans-Regular'),
        url('MTSSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('MTSSans-Regular.woff2') format('woff2'),
        url('MTSSans-Regular.woff') format('woff'),
        url('MTSSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
}

html,
body {
    padding: 0;
    margin: 0;
	color:#000;
}

p {
    margin: 0;
}

body {
    font-family: "MTS Sans", sans-serif;
    font-style: normal;
}
.head {
	padding:25px 0;
}
.container {
	width:100%;
	max-width:375px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 20px;
}
.step-range-line {
	padding:12px 0 25px 0;
	position:relative;
}
.step-range-line p {
	color: #969FA8;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	padding:0 0 5px 0;
}
.step-range-line p span {
	color:#000;
}
.step-range-line:after {
	content:'';
	position: absolute;
	left:0;
    bottom: 0;
	background: #E2E5EB;
	width: -webkit-fill-available;
    max-width: 375px;
	height:1px;
	margin:0 -20px 0 -20px;
}
.step-2,
.step-3 {
	display:none;
}
h2 {
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
}
h3 {
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
	padding:0 0 25px 0;
}
label {
	display:block;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 141.176% */
	padding:32px 0 16px 0;
}
label.upload-label {
	font-weight: 400;
}
select {
	border-radius: 16px;
	border: 1px solid #BBC1C7;
	padding:2px 16px;
	height:52px;
	width:100%;
	box-sizing:border-box;
}
textarea {
	border-radius: 16px;
	border: 1px solid #BBC1C7;
	width:100%;
	height:75px;
	padding:15px;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	resize: none;
	box-sizing: border-box;
}
label, input, textarea {
   transition: all 0.2s;
   touch-action: manipulation;
   transform-origin: left bottom;
   outline:none;
   scrollbar-width: thin;
}
input[type=text] {
	border-radius: 16px;
	border: 1px solid #BBC1C7;
	padding: 10px 16px 0 18px;
	height:52px;
	width:100%;
	box-sizing:border-box;
}
textarea::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar {
    width: 2px;
}
button.btn {
	border-radius: 8px;
	background: var(--Controls-Primary, #E30611);
	width:100%;
	text-align:center;
	color: #FFF;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	height:52px;
	border:0;
	outline:none;
	cursor:pointer;
	margin:32px 0;
}
button.previous-stage {
	border-radius: 8px;
	background: #E2E5EB;
	box-sizing:border-box;
	height:32px;
	outline:none;
	padding:6px 0;
	width:100%;
	color: #000;
	text-align: center;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 16px; /* 133.333% */
	border:0;
	margin:12px 0 0 0;
	cursor:pointer;
}
button.previous-stage svg {
	vertical-align:middle;
}
p.error {
	color: #F95721;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	padding: 10px 0 20px 0;
	display:none;
}
.field.has-error p.error {
	display:block;
}
.field.has-error input,
.field.has-error textarea, 
.field.has-error .select-selected {
	border: 1px solid #F95721;
}
.field.has-error input[type=range] {
	border:0;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5.01246 9C4.11226 9 3.66144 10.0766 4.29798 10.7062C4.29797 10.7062 4.29798 10.7062 4.29798 10.7062L7.4273 13.8016C9.58289 15.9339 10.6607 17 12 17C13.3393 17 14.4171 15.9339 16.5727 13.8016L19.702 10.7062C20.3386 10.0766 19.8877 9 18.9875 9C18.7196 9 18.4625 9.1053 18.2731 9.29274L15.1437 12.3882C14.0255 13.4942 13.3276 14.1786 12.7544 14.6112C12.2371 15.0016 12.0565 15.0012 12.0028 15.001L12 15.001L11.9973 15.001C11.9435 15.0012 11.7629 15.0016 11.2456 14.6112C10.6724 14.1786 9.97446 13.4942 8.85627 12.3882L5.72695 9.29274C5.72695 9.29274 5.72695 9.29274 5.72695 9.29274C5.53745 9.1053 5.28044 9 5.01246 9Z" fill="%23969FA8"/></svg>');
  top: 14px;
  right: 10px;
  width: 24px;
  height: 24px;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
	transform: rotate(180deg);
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.select-selected {
	border-radius: 16px;
	border: 1px solid #BBC1C7;
	padding:14px 16px;
	height:52px;
	width:100%;
	box-sizing:border-box;
	cursor: pointer;
	user-select: none;
	background:transparent;
	color: #18191C;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}
.not-changed + .select-selected {
	color: #969FA8;
}
/*style items (options):*/
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
  color: #18191C;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 141.176% */
}
.select-items div {
	color: #18191C;
	padding: 16px;
    border: 0;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
div.field {
	position:relative;
}
      input[type=text]:placeholder-shown + label,
      textarea:placeholder-shown + label{
        position:absolute;
		top:0;
		left:0;
		padding:15px;
		color: #969FA8;
		font-size: 17px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px; /* 141.176% */
      }
      /**
      * By default, the placeholder should be transparent. Also, it should
      * inherit the transition.
      */
      ::-webkit-input-placeholder{
        opacity: 0;
        transition: inherit;
      }
	        /**
      * Show the placeholder when the input is focused.
      */
      input[type=text]:focus::-webkit-input-placeholder,
      textarea:focus::-webkit-input-placeholder {
          opacity: 1;
		      padding: 15px 5px;
      }
      /**
      * When the element is focused, remove the label transform.
      * Also, do this when the placeholder is _not_ shown, i.e. when
      * there's something in the input at all.
      */
      input[type=text]:not(:placeholder-shown) + label,
      input[type=text]:focus + label,
      textarea:not(:placeholder-shown) + label,
      textarea:focus + label{
        cursor: pointer;
		color: #626C77;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
		padding: 0 15px;
		position: absolute;
		top: 1px;
		left: 4px;
		width: 95%;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16px;
      }
	  textarea:not(:placeholder-shown), 
	  textarea:focus {
		   padding: 15px 20px;
	  }
	  .field__clear {
		display:none;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 10px;
	  }
	  /* Show input clear on filled input items */
      input:not(:placeholder-shown) + label + .field__clear,
      textarea:not(:placeholder-shown) + label + .field__clear {
        display:block;
      }
.line-wrap {
border-radius: 2px;
background: var(--Neutral-Neutral-600, #E2E5EB);
height:8px;
width:100%;
position:relative;	
}
.line-wrap .line {
	border-radius: 2px;
	background: var(--Brand-MTS-Red, #E30611);
	position:absolute;
	height:100%;
	left:0;
}
.contact-field {
	margin:0 0 25px 0;
}
.contact-field label {
	background:transparent !important;
}
.checkbox-field {
	display: flex;
    align-items: baseline;
	margin: 25px 0;
}
.checkbox-field label {
	padding: 0 0 0 35px;
	color: #18191C;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	cursor:pointer;
}
.checkbox-field input[type="checkbox"] {
	appearance: none;
}
.checkbox-field input[type="checkbox"]::before {
	content:'';
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="1" y="1" width="22" height="22" rx="5" fill="white"/><rect x="1" y="1" width="22" height="22" rx="5" stroke="%23BBC1C7" stroke-width="2"/></svg>');
	width:24px;
	height:24px;
	position:absolute;
	top:5px;
	left:0;
	cursor:pointer;
}
.checkbox-field input[type="checkbox"]:checked::before, 
.checkbox-field.has-error input[type="checkbox"]:checked::before {
	background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="6" fill="%23E30611"/><path d="M18 8L10 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 12L10 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.checkbox-field.has-error input[type="checkbox"]::before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="1" y="1" width="22" height="22" rx="5" fill="white"/><rect x="1" y="1" width="22" height="22" rx="5" stroke="%23F95721" stroke-width="2"/></svg>');
}

        /* range */
        .range-input {
           appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 100%;
          cursor: pointer;
          outline: none;
          border-radius: 15px;
          height: 2px;
          background: #ccc;
        }
        
        .range-input::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none; 
          height: 24px;
          width: 24px;
          background-color: #fff;
          border-radius: 50%;
          border: none;
          transition: .2s ease-in-out;
          box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.05);
		  position:relative;
		  top:-1px;
        }
        
        .range-input::-moz-value {
          height: 24px;
          width: 24px;
          background-color: #E30611;
          border-radius: 50%;
          border: none;
          transition: .2s ease-in-out;
          box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.05);
        }
        
        .value {
          font-size: 16px;
			font-weight: 700;
			line-height: 19px;  
		  color:#E30611;
          width: 50px;
          text-align: center;
		  display:none;
        }
  
        .sliderticks {
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        } 
        .sliderticks span {
          display: flex;
          justify-content: center;
          width: 1px;
          height: 10px;
          background: #d3d3d3;
          line-height: 40px;
        }
        .range {
          display: flex;
          align-items: center;
          margin: 2rem 0;
           position: relative;
        }     
        .value {
          position: absolute;
          left: 0px;
          top: -30px;
          width: 20px;
          height: 20px;
          color: #E30611;
          pointer-events: none;
        }
		.num-range {
			display:flex;
			justify-content:space-between;
			font-size:12px;
			color: #9f9f9f;
			margin: -20px 5px 0 5px;
		}
		
		.num-range span {
			position:relative;
			left:1px;
		}


section .row{
  margin: 10px 0;
  background: #F2F3F7;
  list-style: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position:relative;
}
section .row .delete-file {
	position:absolute;
	right:15px;
	cursor:pointer;
}
section .row .error-file {
	color: #F95721 !important;
	font-size: 12px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 16px; /* 133.333% */
}
section .row i{
  color: #6990F2;
  font-size: 30px;
}
section .details span{
  font-size: 14px;
}
.progress-area .row .content{
  width: 100%;
  margin-left: 15px;
}
.progress-area .details{
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
.progress-area .content .progress-bar{
  height: 6px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress{
  height: 100%;
  width: 0%;
  background: #6990F2;
  border-radius: inherit;
}
.upload-area {
	color: #007CFF;
	text-align: center;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	width:100%;
	padding:12px 16px;
	border-radius: 8px;
	border: 2px dashed #E2E5EB;
	box-sizing:border-box;
	cursor:pointer;
}
.uploaded-area{
  max-height: 232px;
  overflow-y: scroll;
}
.uploaded-area.onprogress{
  max-height: 150px;
}
.uploaded-area::-webkit-scrollbar{
  width: 0px;
}
.uploaded-area .row .content{
  display: flex;
  align-items: center;
}
.uploaded-area .row .details{
  display: flex;
  margin-left: 15px;
  flex-direction: column;
}
.uploaded-area .row .details .size{
  color: #404040;
  font-size: 11px;
}
.uploaded-area i.fa-check{
  font-size: 16px;
}
.final-page .main-img {
	display:table;
	margin:55px auto 0 auto;
}
.final-page h2 {
	text-align:center;
	padding:16px 0;
}
.final-page p {
	text-align:center;
	color: #18191C;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 141.176% */
	padding:10px 0;
}
.final-page p a {
	text-decoration:none;
	color:#007CFF;
}
.final-page .final-link {
	text-decoration:none;
	border-radius: 6px;
	background: #E2E5EB;
	color: #000;
	text-align: center;
	font-size: 17px;
	font-style: normal;
	font-weight: 500;
	line-height: 27px; /* 141.176% */
	display:table;
	width:100%;
	padding:10px 0;
	box-sizing:border-box;
	margin:100px 20px 0 0px;
	height:50px;
	position: fixed;
    bottom: 30px;
	width: -webkit-fill-available;
    max-width: 335px;
}
.final-links-wrap {
	background: #F2F3F7;
	padding:35px 0;
	text-align:center;
	margin: 55px -20px 0 -20px;
	position:fixed;
	bottom:0;
	width: 100%;
    max-width: 375px;
}
.flex-line {
	display:flex;
	justify-content:space-between;
}
.final-links-wrap svg {
	border-radius:100%;
}
.final-links-wrap a {
	color: #000;
	text-decoration:none;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	padding:15px 0 0 0;
}
div.footer {
	padding:24px 0;
	position:relative;
	margin: 15px 0 0 0;
}
div.footer:before {
	content:'';
	position: absolute;
	left:0;
    top: 0;
	background: #E2E5EB;
	width: -webkit-fill-available;
    max-width: 375px;
	height:1px;
	margin:0 -20px 0 -20px;
}
div.footer .phone {
	color: #18191C;
	display:block;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 140% */
	text-decoration:none;
	margin:0 0 5px 0;
}
div.footer .mail {
	color: #969FA8;
	display:block;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	text-decoration:none;
	margin:0 0 35px 0;
}
div.footer a.footer-link {
	color: #626C77;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	text-decoration:none;
}
div.footer a.footer-link {
	padding:0 15px 0 0;
}
div.footer .chat {
	position:absolute;
	border-radius: 100px;
	background:  #FFF;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08), 0px 9px 10px 0px rgba(0, 0, 0, 0.08);
	padding:15px;
	top:auto;
	bottom: 50px;
    right: 10px;
	cursor:pointer;
	display:none;
}
div.footer .chat svg {
	vertical-align:middle;
}
div.copyright {
	padding: 16px 20px;
	width: -webkit-fill-available;
	margin:0 -20px 0 -20px;
    max-width: 375px;
	background: #F2F3F7;
	color: #969FA8;
	box-sizing:border-box;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px; /* 133.333% */
}
@media (max-height: 660px) {
 .final-links-wrap {
	 width: -webkit-fill-available;
	 position:relative;
 }
}

@media (max-height: 525px) {
.final-page .final-link {
	 width: -webkit-fill-available;
	 position:relative;
	 margin:50px 0 0 0;
 }
}