.quote-ui-block {
  background-image: url('../images/box.png');
  background-repeat: no-repeat;
  background-position: center;
}

.move-calc-wrapper .btn {
  height: 54px !important;
  background: var(--Colors-Dark-blue, rgba(15, 10, 82, 1)) !important;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.move-calc-wrapper .btn p {
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.quote-ui-block-flex{
display: flex;
    align-items: center;
    justify-content: center;
}

.move-calc-wrapper .btn p::after {
  margin-top: 2px;
  /* margin-left: 10px; */
  content: '';
  width: 13px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='18' viewBox='0 0 17 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.42893 9.29031H15.5711M15.5711 9.29031L8.5 2.21924M15.5711 9.29031L8.5 16.3614' stroke='white' stroke-width='1.76777' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.move-calc-wrapper .option {
  font-family: 'Manrope' !important;
  font-weight: 500;
  font-style: normal;
  font-size: 14px !important;
  line-height: 24px;
  letter-spacing: 0px;
  vertical-align: middle;
}

.sf-calculate-wrapper #step1 select,
.sf-calculate-wrapper #step1 input,
.sf-calculate-wrapper #step2 #edit-type-from,
.sf-calculate-wrapper #step2 #edit-type-to,
.sf-calculate-wrapper input,
.sf-calculate-wrapper select {
  font-family: "Manrope" !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 140% !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  border-radius: 16px !important;
  background-color: var(--white);
  color: var(--primary-alt) !important;
  font-style: normal !important;
  border: 2px solid #EEEDFD !important;
}

.step-title {
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 20px !important;
  line-height: 120%;
  letter-spacing: -0.1px;
  text-transform: none !important;
  text-align: center;
  margin: 0;
  color: var(--Font-Heading, rgba(15, 10, 82, 1));
}

/* .ng-binding{
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 20px !important;
  line-height: 150%;
  letter-spacing: -0.1px;
  text-transform: capitalize !important;
  text-align: center;
  margin: 0;
color: var(--Font-Heading, rgba(15, 10, 82, 1));
} */


#zip_code_search h2{
    font-family: 'Manrope';
  font-weight: 700;
  font-size: 20px !important;
  line-height: 150%;
  letter-spacing: -0.1px;
  text-transform: capitalize !important;
  text-align: center;
  margin: 0;
  color: var(--Font-Heading, rgba(15, 10, 82, 1));
}

.er-picker__box {
  position: relative;
  left: 13%;
  top: -42px !important;
  padding: 20px 24px;
  max-width: 280px;
  height: 278px;
  border-radius: 12px;
  border: 1px solid rgba(238, 237, 253, 0.75);
  box-shadow: 0px 8px 8px -4px rgba(58, 53, 76, 0.03),
              0px 20px 24px -4px rgba(58, 53, 76, 0.08);
              
}

.er-picker__month,
.er-picker__year {
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.03px;
  text-align: center;
  font-style: normal;
  color: rgba(15, 10, 82, 1);
}

.er-picker__weekday {
  font-family: 'Inter';
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.03px;
  text-align: center;
  width: 40px;
}

.calendarDay1 {
  width: 40px;
  height: 40px;
  opacity: 1;
  border-radius: 12px;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.03px;
  text-align: center;
  background-color: white;
  color: var(--Colors-Dark-blue, rgba(15, 10, 82, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.er-picker--focused .er-picker__day--highlighted{
  background-color: rgba(144, 147, 227, 1) !important;
    color: white;
}

.calendarTypeTitle {
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.03px;
  text-align: center;
  font-style: normal;
  color: rgba(15, 10, 82, 1);
  display: none;
}

.er-picker__footer {
  display: none;
}

.er-picker--opened .er-picker__frame {
  top: 33% !important;
}

.move-calc-wrapper select#edit-service {
      font-family: 'Inter';
      font-weight: 400;
      font-size: 14px;
      line-height: 140%;
      letter-spacing: -3%;
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px;
      color: var(--colors-grey-50, rgba(70, 72, 112, 0.5)) !important; 

}

.move-calc-wrapper select#edit-service option{
  font-family: 'Manrope';
font-weight: 500;
font-style: Medium;
font-size: 14px !important;
line-height: 24px;
letter-spacing: 0;
vertical-align: middle;
color: var(--Colors-Dark-blue, rgba(15, 10, 82, 1));

}

.calendarDay5,
div.calendarDayPast {
  border: none;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

.er-picker__nav--next:before {
  border-left: .75em solid #eeeeee;
}

.er-picker__nav--prev:before {
  border-right: .75em solid #eeeeee;
}

.sf-calculate-wrapper .toolbar{
  display: flex;
  justify-content: space-between;
}

.search-zip-modal input#getZipCode{
    background: rgba(15, 10, 82, 1) !important;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  color: white !important;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  border: none;
}

.sf-calculate-wrapper .toolbar button {
  background: rgba(15, 10, 82, 1) !important;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  color: white !important;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
}

.pull-right{
background-color: white !important;
}

.sf-calculate-wrapper #calc-info-steps .MoveSizeBtn {
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  vertical-align: middle;
  height: 30px;
  display: flex;
  align-items: center;
  border: none !important;
}

.sf-calculate-wrapper #calc-info-steps .MoveSizeBtn:hover:before{
     display: none;
}

.sf-calculate-wrapper #calc-info-steps .MoveSizeBtn:hover {
  background-color: var(--colors-light-purple-75, rgba(238, 237, 253, 0.75)) !important;

}


.toolbar {
  border-radius: 16px;
}

.sf-calculate-wrapper #edit-service {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Manrope', sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: white;
  color: #0f0a52;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

select {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  padding: 12px 16px;
  color: #0f0a52;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: white;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;

}

.ng-scope {
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  vertical-align: middle;
}

.sf-calculate-wrapper .submit_btn,
.sf-calculate-wrapper .bottom-done-button {
  background: rgba(15, 10, 82, 1) !important;
  color: white;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 14px;
  vertical-align: middle;
  border-radius: 10px;
}

.sf-calculate-wrapper .form-slogan {
  padding-top: 32px;
  padding-bottom: 14px ;
}



.movecalController{
  width: auto;
}

.sf-calculate-wrapper{
      max-width: 546px !important;
      background: rgba(255, 255, 255, 1);
      border: 2px solid #fefefe;
      backdrop-filter: blur(10px);
      border-radius: 16px;
      margin-top: -14px;
      /* overflow-y: auto; */
    
}

.er-picker--opened .er-picker__holder{
  background: none;
}

.er-picker__header{
  margin-top: 0;
}

#request-form #step1 .submit_btn{
  /* margin-top: 84px !important; */
}

#request-form #step1 .submit_btn p{
  display: flex;
  align-items: flex-end;
}


.sf-calculate-wrapper #step1 select, .sf-calculate-wrapper #step1 input, .sf-calculate-wrapper #step2 #edit-type-from, .sf-calculate-wrapper #step2 #edit-type-to, .sf-calculate-wrapper input, .sf-calculate-wrapper select{
height: 56px;
}

#request-form .form-group select + i {
  border: none;
  background-image: url(../../public/icons/Vector-form.svg) !important;
  /* background-position: bottom; */
    background-size: unset;
    width: 13px;
    height: 8px;
    background-repeat: no-repeat;
    margin-top: 4px;
    margin-right: 13px;
}

.select_cross{
border: none;
  background-image: url(../../public/icons/Vector-form.svg);
  background-position: bottom;
    background-size: unset;
    width: 13px;
    height: 8px;
    background-repeat: no-repeat;
    margin-top: 9px;
    margin-right: 13px;
}


.ng-select .ng-dropdown-panel {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border: 1px solid #e2e2f4;
}

#request-form .submit_btn p{
  display: flex;
  align-items: center;
}


/* .icheckbox_square-green, .iradio_square-green :checked{
  background: rgba(15, 10, 82, 1) !important;

} */

/* .iCheck-helper{
  background: rgba(15, 10, 82, 1) !important;
} */

div#request-form .form-group{
  height: 56px;
}

div#request-form .input-group{
    height: 56px;
}

select:invalid {
  color: #999; 
}

.sf-calculate-wrapper #step1 select, .sf-calculate-wrapper #step1 input, .sf-calculate-wrapper #step2 #edit-type-from, .sf-calculate-wrapper #step2 #edit-type-to, .sf-calculate-wrapper input, .sf-calculate-wrapper select{
  font-family: 'Inter' !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 140% !important;
letter-spacing: -0.3px !important;
color: var(--colors-grey-50, rgba(70, 72, 112, 0.5)) !important;

}


.select-wrapper {
  position: relative;
}
  select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    height: 56px !important;
    border-radius: 12px !important;
    font-size: 14px;
    font-family: 'Manrope', sans-serif;
    border: 1px solid #ccc;
    background-color: #fff;
  }

  .select-arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    pointer-events: none;

    background: url('data:image/svg+xml;utf8,<svg fill="%23525252" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>') no-repeat center;
    background-size: 100% 100%;
  }

div#request-form #step2 .fromtype i{
  border: none;
  background-image: url(../../public/icons/Vector-form.svg);
  background-position: bottom;
    background-size: unset;
    width: 13px;
    height: 8px;
    background-repeat: no-repeat;
    margin-top: 9px;
    margin-right: 13px;
}

.sf-calculate-wrapper #sf-move-size{
  border-radius: 12px;
  width: 100% !important;
  display: flex;
  justify-content: center;
    align-items: center;
    min-height: 56px;
    border: 2px solid var(--Colors-Light-purple, rgba(238, 237, 253, 1));
}

.move-size{
  height: fit-content;
}

.sf-calculate-wrapper #calc-info-steps .MoveSizeBtn:last-of-type{
  font-size: 14px !important;
}


div#request-form .form-control{
  height: 56px !important;
  /* background: var(--colors-white-75, rgba(255, 255, 255, 0.75)) !important; */
  border-radius: 12px !important;
  border: 2px solid var(--Colors-Light-purple, rgba(238, 237, 253, 1)) !important;
  color: #887c90 !important;
  /* padding-left: 60px !important; */
}
.sf-calculate-wrapper .back-link{
margin-top: 0 !important;
}

/* Media Queries */

@media (max-width: 576px) {

  .sf-calculate-wrapper .form-slogan{
    padding-top: 12px;
  }
#request-form #step1 .submit_btn{
  margin-top: 0 !important;
}
}


@media (max-width: 400px) {
  .step-title {
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }

  .er-picker__box {
    max-width: 343px;
    margin: 0 auto;
    position: relative !important;

  }

  .btn p::after {
    width: 14px;
    height: 14px;
  }
  .er-picker--opened .er-picker__box{
            left: 0px !important;
  }

  .success.desktopzip{
    font-size: 14px !important;
    /* padding: 0 !important; */
  }

  #slide_menu .bottom-done-button{
    padding: 8px 16px !important;
  }
}


 @media (max-width: 600px) {
.quote-ui-block{
  margin-top: 146px !important
}

}

span.desktopzip {
  padding: 0 !important;
}


#edit-size-move:focus {
  border-color: #eeecfa !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Підсвітка для невалідних інпутів Angular */
input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched,
textarea.ng-invalid.ng-touched,
div#sf-move-size.ng-invalid.ng-touched {
    background-color: #ffaa9d !important;
    border-color: #f63 !important;
}

/* Повертаємо рожеву підсвітку для полів з помилкою */
.sf-calculate-wrapper input.error,
.sf-calculate-wrapper select.error,
.sf-calculate-wrapper textarea.error {
    border: 1px solid #f63 !important;            /* як у оригінальному company.css */
    background-color: #ffaa9d !important;         /* рожевий фон */
    color: inherit !important;
}

/* На кроці 2 контейнер розміру (div#sf-move-size) теж отримує class="error" */
.sf-calculate-wrapper #sf-move-size.error .MoveSizeBtn {
    border-color: #f63 !important;
    background-color: #ffaa9d !important;
}

/* Кнопка, коли форма не валідна (Angular її робить disabled) */
.sf-calculate-wrapper .submit_btn[disabled],
.sf-calculate-wrapper .bottom-done-button[disabled],
.sf-calculate-wrapper .submit_btn.btn-error,
.sf-calculate-wrapper .bottom-done-button.btn-error {
    background-color: #ffaa9d !important;
    border-color: #FFB3B3 !important;
    color: #222 !important;
}