.calculator .file-input{

  display: none;

}



/* The container must be positioned relative: */

.step-select {

  position: relative;

  font-family: Arial;

}



.step-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: "";

  top: 0;

  right: 0;

  width: 64px;

  height: 100%;

  background-color: var(--black);

  background-image: url(../img/select-arrow.svg);

  background-position: center;

  background-repeat: no-repeat;

}

.backmodal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9;
    opacity: 0.7;
 }

.backmodal2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9;
    opacity: 0.7;
 }

.backmodal div{
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    position: absolute;
    display: block;
    content: "";
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-image: inherit !important;
    background-position: center center;
    background-size: cover;
    line-height: 1;
    text-align: center;
    font-size: 2em;
    display: inline-block;
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #003366;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

.backmodal .two{
    max-width: 100%;
    height: auto;
    margin: auto;
    display: block;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    position: absolute;
    display: block;
    content: "";
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-image: inherit !important;
    background-position: center center;
    background-size: cover;
    line-height: 1;
    text-align: center;
    font-size: 2em;
    display: inline-block;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #fedb01;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/* Point the arrow upwards when the select box is open (active): */

.select-selected.select-arrow-active:after {

  border-color: transparent transparent #fff transparent;

  transform: rotate(180deg);

}



/* style the items (options), including the selected item: */

.select-items div,.select-selected {

  font-weight: 400;

  font-size: 24px;

  color: var(--black);

  border: 2px solid var(--black);

  padding: 19px 64px 18px 24px;

  line-height: 1;

  position: relative;

  background: #fff;

}

.select-items div{

  border: none;

  z-index: 9;

  cursor: pointer;

  padding: 18px 24px;

}

/* Style items (options): */

.select-items {

  position: absolute;

  top: 100%;

  left: 0;

  max-height: 262px;

  overflow: auto;

  right: 0;

  z-index: 99;

  border: 2px solid var(--black);

  border-top: none;

}



/* 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);*/

  color: var(--yellow);

}

.select-items div:after{

  content: '';

  width: calc(100% - 48px);

  height: 1px;

  display: block;

  background: #0000003b;

  position: absolute;

  bottom: 0;

}

.select-items div:last-child:after{

  content: '';

  display: none;

}

/* Hide the browser's default checkbox */

.lb_container input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: 6px;

  left: 0;

  height: 30px;

  width: 30px;

  background-color: #fff;

  border: 2px solid var(--black);

}



/* On mouse-over, add a grey background color */

.lb_container:hover input ~ .checkmark {

  background-color: #cccccc6b;

}



/* When the checkbox is checked, add a blue background */

.lb_container input:checked ~ .checkmark {

/*  background-color: #2196F3;*/

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.lb_container input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.lb_container .checkmark:after {

    left: 3px;

    top: 3px;

    width: 20px;

    height: 20px;

    background: var(--yellow);

}



:root {

	--yellow: #fedc00;

	--black: #231f20;

	--white: #fff;

}

.intro{

	position: relative;

	height: 790px;

  display: none;

}

.intro .bg{

	height: 100%;

  position: absolute;

  width: 50%;

  top: 0;

  right: 0;

  text-align: right;

  text-align: -webkit-right;

}

.intro-content{

	width: 50%;

	height: 100%;

	position: relative;

	padding: 128px 36px 0 0;

}

.calculator h3{

	font-family: Assistant-Regular;

	font-weight: 400;

	font-size: 64px;

	text-transform: uppercase;

	color: var(--black);

	margin-bottom: 60px;

  line-height: 1.4;

}



.lb_container {

	display: block;

	position: relative;

	padding-left: 50px;

	font-family: Assistant-Regular;

	margin-bottom: 32px;

	cursor: pointer;

	font-weight: 400;

	font-size: 32px;

	color: var(--black);

	line-height: 1.3;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

}

.intro .bg img{

  position: relative;

  top: 55px;

  right: 90px;

}

.calculator .intro .logo{

  position: absolute;

  top: 64px;

  right: 0;

  z-index: 1;

}



.step{

  display: none;

}

.steps-bar{

  padding: 64px 0 64px;

}

.steps-bar{

  display: none;

  position: relative;

}

.steps-bar .step-counter{

  display: flex;

  width: 100%;

/*  justify-content: space-between;*/

  flex-wrap: wrap;

  gap: 24px;

}

.steps-bar .step-counter .item{

  width: 170px;

}

.steps-bar .step-counter .item p{

  font-family: Assistant-Regular;

  font-weight: 400;

  font-size: 24px;

  color: #000;

}

.steps-bar .step-counter .bar{

  border-radius: 100px;

  background: var(--black); 

  opacity: 0.1;

  height: 10px;

  transition: 0.2s all;

}

.steps-bar .step-counter .item.active .bar{

  opacity: 0.5;

}

.steps-bar .step-counter .item.pass .bar{

  background: var(--yellow);

  opacity: 1;

}

.step-container{

  position: relative;

  padding: 64px 0 128px;

}

.step-container .logo{

  max-width: 117px;

  position: absolute;

  right: 0;

}

.steps h3{

  max-width: 1000px;

  margin-bottom: 64px;

}

.calculator label{

  font-weight: 400;

  font-family: Assistant-Regular;

  display: flex;

  flex-direction: column;

  font-size: 32px;

  color: var(--black);
  line-height: 1.3;
  height: auto;
  width: 100%;

}

.calculator input{

  padding: 8px;

  font-size: 30px;

  border: 2px solid var(--black);

  width: 100%;
  height: auto;

}

.calculator input[type="text"]:focus{
  border: 2px solid var(--black);
}

.half-container{

  display: flex;

  width: 100%;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;

}

.data-form{



}

.calculator .btn:focus{

   outline: 0

}

.calculator .btn{

  background: var(--black);

  cursor: pointer;

  font-weight: 700;

  font-size: 24px;

  color: var(--white);

  line-height: 1;

  padding: 24px 32px;

  border: none;

  border-radius: 0;

  transition: 0.2s all;

  display: block;

}

.calculator .btn:hover{

  opacity: 0.9;

}

.calculator .btn{

  font-size: 24px;

  font-weight: 700;

  padding: 24px 32px;

}

.calculator .btn.arrow{

  background: var(--black);

  cursor: pointer;

  color: var(--white);

  line-height: 1;

  border: none;

  border-radius: 0;

  transition: 0.2s all;

  display: flex;

  align-items: center;

  gap: 35px;

}

.calculator .btn.arrow.arrow-prev:before{

  content: '';

  position: relative;

  display: block;

  width: 32px;

  height: 14px;

  background: url(../img/arrow.svg)no-repeat center;

  background-size: contain;

}

.calculator .btn.arrow.arrow-after:after{

  content: '';

  position: relative;

  display: block;

  width: 32px;

  height: 14px;

  background: url(../img/arrow.svg)no-repeat center;

  background-size: contain;

  transform: rotate(180deg);

}

.calculator .navigate-buttons{

  display: flex;

  justify-content: space-between;

  margin: 64px 0 0 0;

}



.step-select-container{

  display: flex;

  gap: 24px;

  align-items: center;

  margin-bottom: 128px;

}

.step-select-container label{

  width: auto;

}

.step-select{

  width: 367px;

}



.max-half-container .half-container{

  max-width: 888px;

}

.calculator .choose_q{

  margin: 232px 0 0 0;

}

.btn span{

  font-weight: 400;

}

.navigate-buttons.choose_q{

  justify-content: unset;

  gap: 32px;

}

.calculator .files .file-input{

  padding: 0;

  font-weight: 600;

  font-size: 24px;

  color: transparent;

  border: 0;

  width: 100%;

}

.text-message-top{

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 32px;

}

.calculator .files label{

  display: flex;

  flex-direction: row;

  line-height: 1;

  align-items: center;

  font-weight: 600;

  font-size: 24px;

  color: var(--black);

  gap: 14px;

  cursor: pointer;

}

.calculator .files label img{

  margin-top: 5px;

}

.text-message-top span{

  font-weight: 700;

  font-size: 32px;

  color: var(--black);

}

textarea{

  width: 100%;

  height: 360px;

  padding: 32px;

  font-weight: 400;

  font-size: 24px;

}

.calculator p{

  font-weight: 400;

  font-size: 32px;

  color: var(--black);

}

.calculator .deside{

  margin-top: 144px;

}

.calculator .btn.decline, .calculator .btn.accept{

  display: flex;

  gap: 16px;

  align-items: center;

}

.calculator .btn.decline:after{

  content: '';

  position: relative;

  display: block;

  width: 18px;

  height: 18px;

  background: url(../img/decline.svg)no-repeat center;

  background-size: contain;

}

.calculator .btn.accept:after{

  content: '';

  position: relative;

  display: block;

  width: 19px;

  height: 14px;

  background: url(../img/accept.svg)no-repeat center;

  background-size: contain;

}
.variant{
  display: none;
}

@media (max-width: 1800px) {

  .steps-bar .step-counter {

    flex-wrap: nowrap;

  }

}

@media (max-width: 1600px) {

  .calculator h3{

    font-size: 54px;

    line-height: 1.3;

  }

  .steps h3 {

    max-width: 870px;

  }

}

@media (max-width: 1400px) {

  .calculator h3{

    font-size: 44px;

  }

  .lb_container{

    font-size: 26px;

  }

  .calculator label{

    font-size: 24px;

  }

  .calculator input{

    font-size: 22px;

  }

  .calculator .btn{

    font-size: 22px;

    padding: 20px 30px;

  }

  .select-items div, .select-selected {

    font-size: 22px;

    padding: 14px 64px 13px 24px;

  }

  .select-selected:after{

    width: 53px;

  }

  .text-message-top span{

    font-size: 24px;

  }

}

@media (max-width: 1200px) {

  .half-container{

    flex-wrap: wrap;

  }

  .half-container-top label{

    box-sizing: border-box;

    max-width: 50%;

    flex: 48%;

  }

  

}

@media (max-width: 1050px) {

  .steps h3 {

    max-width: 634px;

  }

}

@media (max-width: 768px) {

  .text-message-top span{

    font-size: 16px;

  }

  .step-container .logo{

    display: none;

  }

  .calculator label{

    font-size: 16px;

  }

  .intro-container{

    display: flex;

    flex-direction: column;

  }

  .intro-content{

    width: 100%;

    padding: 265px 0 0 0;

  }

  .calculator .intro .logo{

    position: relative;

    top: 100px;

    text-align: center;

    text-align: -webkit-center;

  }

  .intro .bg{

    height: 295px;

    width: 100%;

  }

  .calculator h3 {

    font-size: 32px;

  }

  textarea{

    height: 206px;

    padding: 16px;

    font-size: 14px;

  }

  .lb_container {

    font-size: 16px;

    padding-left: 28px;

    margin-bottom: 18px;

  }

  .checkmark{

    top: 2px;

    height: 16px;

    width: 16px;

    border: 1px solid var(--black);

  }

  .lb_container .checkmark:after {

    left: 2px;

    top: 2px;

    width: 10px;

    height: 10px;

  }

  .intro{

    height: auto;

  }

  .intro-content{

    padding-bottom: 123px;

    border-bottom: 1.50px solid #231f2030;

  }

  .step-container{

    border-bottom: 1.50px solid #231f2030;

  }

  .steps-bar .step-counter {

    flex-wrap: wrap;

  }

  .steps-bar .step-counter .item{

    width: 64px;

  }

  .steps-bar .step-counter .bar{

    height: 6px;

  }

  .steps-bar .step-counter .item p{

    font-size: 14px;

  }

  .steps-bar .step-counter{

    gap: 10px;

  }

  .step-container{

    padding: 32px 0 64px

  }

  .steps-bar {

    padding: 32px 0 32px;

  }

  .steps h3{

    margin-bottom: 40px;

  }

  .half-container label{

    font-size: 16px;

  }

  .calculator input {

    font-size: 15px;

  }

  .half-container{

    gap: 5px;

    row-gap: 16px;

  }

  .half-container{

    margin-bottom: 16px;

  }

  .calculator .navigate-buttons{

    margin: 32px 0 0 0;

  }

  .calculator .btn{

    padding: 10px 16px;

    font-size: 14px;

  }

  .calculator .navigate-buttons .btn.arrow:before, .calculator .navigate-buttons .btn.arrow:after{

    width: 16px;

    height: 7px;

  }

  .calculator .btn.arrow{

    gap: 13px;

  }

  .select-items div, .select-selected {

    font-size: 14px;

    padding: 11px 40px 11px 16px;

  }

  .select-selected:after{

    width: 40px;

  }

  .step-select-container{

    gap: 12px;

  }

  .step-select {

      width: 187px;

  }

  .select-selected:after{

    background-size: 12px;

  }

}

@media (max-width: 620px) {

  .steps-bar .step-counter{

    justify-content: unset;

  }

}



@media (max-width: 422px) {

  .navigate-buttons.choose_q{

    gap: 8px;

    flex-direction: column;

  }

}



.active{

  display: block; 

  align-items: center;

}