/* Default form styles */
label {
  font-size: 20px;
  display: none;
}
#hide_input{
  animation-duration: 1s;
    animation-name: fadeIn;
    color: #363636;
    margin: 5px;
}

input,
textarea,
select {
  --horizontall-side-padding: 1vw;
  --vertical-side-padding: 1.5vh;
  --input-font-size: max(0.9vw, 14px);
  --input-background-color: #fff;
  --input-base-color: #fff;
  --input-border: 1px solid var(--input-base-color);


  width: 100%;
  font-family: "Roboto", sans-serif;

  outline: none;
  color: var(--input-base-color);
  background-color: var(--input-background-color);
  font-size: var(--input-font-size);
  border: var(--input-border);
  padding: var(--vertical-side-padding) var(--horizontall-side-padding);
  border-radius: var(--input-border-radius);
}

.checkbox_item_input{
	width: 20px;
	height: 20px;
}
input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 0px;
  height: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
outline: none;

 border:none;
}

input[type=checkbox]:checked:before {
      content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 20px;
/*   background-color: #445768;   */
  transition: all 0.2s linear;
}


input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 3px;
 /*  background-color: #445768; */
 top: 0;
 left: 0;
}


input[type=checkbox]:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: solid #c12126;
  border-width: 0 0px 0px 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  top: 0px;
  left: 40px;
  transition: all 0.2s linear;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 12px;
  height: 21px;
  border: solid #c12126;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: -2px;
  left: 12px;
}
/* input,
textarea {
  --input-base-color: #777;
  color: var(--input-base-color);
} */

::placeholder {
  --placeholder-base-color: #fff;
  color: var(--placeholder-base-color);
}
.form-inner_popup .clear_form::placeholder {
  --placeholder-base-color: #363636;
  color: var(--placeholder-base-color);
}
.form-inner_popup .inner_popup::placeholder {
  --placeholder-base-color: #363636;
  color: var(--placeholder-base-color);
}

.form-inner__item_popup{
  border: 1px solid #363636;
  color: #363636;
}
.form-inner__item_popup .hidden_textarea::placeholder {
  --placeholder-base-color: #363636;
  color: var(--placeholder-base-color);
}


.form-inner__item_popup textarea {
 
  color:#363636 ;
}

.checkbox_item_popup input[type=checkbox]:checked:before {
  content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #363636;
border-radius: 20px;
/*   background-color: #445768;   */
transition: all 0.2s linear;
}
.form-inner_popup select {
  
  --input-base-color: #363636;
  
  --input-border-radius: 5px;
}
.form-inner__item select .elements{
  --input-base-color: #ffffff;
}
.checkbox_item_popup input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #363636;
border-radius: 3px;
/*  background-color: #445768; */
}


.form-inner_popup input{
  --input-base-color: #363636;
  font-weight: 400;
 }



textarea {
  resize: none;
}

select,
input[type="submit"] {
  cursor: pointer;
}

input[type="submit"] {
  --input-background-color: var(--main-color);
  --button-width: 60%;
  --input-base-color: #fff;
  border: none;
  width: var(--button-width);
  text-transform: uppercase;
  color: #fff !important;
}

input[type="submit"].button--full {
  --button-width: 100%;
}
input[type=submit]:hover{
  color: #cf2222 !important;
  border: 1px solid #cf2222;
}

/* Form wrapper */

/* .form--wrapper {
  display: flex;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.form--wrapper.hidden {
  display: none;
} */

/* Form */
.form {
  

  /* --form-background-color: #fff; */
  --form-min-width: 35vw;
  --form-max-width: 100%;
  --form-inner-gap: 1.75vh;
  --form-inner-width: 35%;

  display: flex;
  /* background-color: var(--form-background-color); */
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
  min-width: var(--form-min-width);
  max-width: var(--form-max-width);
  margin: 0 auto;

  width: var(--form-inner-width);
  /* display: none; */
}

.form.hidden {
  display: none;
}

/* Close button */
.close-button {
  --size-close-button: 2.5rem;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--size-close-button);
  height: var(--size-close-button);
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.close-button--wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.close-button__item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 2px;
  width: 80%;
  background-color: #363636;
  transform: translate(-50%, -1px);
}

.close-button__item--top {
  transform: translate(-50%, -1px) rotate(45deg);
}
.close-button__item--bottom {
  transform: translate(-50%, -1px) rotate(-45deg);
}

/* Form title */
.form-title {
  font-family: var(--base-font-family), sans-serif;
  font-size: max(2vw, 30px);
  text-align: center;
  /* max-width: 80%; */
}

/* Form description */

.form-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1vh;
  font-size: max(0.9vw, 14px);
}
/* Form inner */
.form-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
}

.form-inner__item {
  display: flex;
  
  gap: var(--form-inner-gap);
  align-items: center;
  width: 100%;
  position: relative;
}
.form-inner__item--full{
  border: 0.5px solid #ffffff45;
}
#state_requiredst{
  color: #363636;
  border: .5px solid #363636;
}


select {
  border: none;
}

.form_on_page select{
  color: #ffffff;
  background: #323232;
}

.form-inner__item--half {
  width: 100%;
}




/* Warranty form */

.log_warranty {
  --form-max-width: 40%;
  display: flex;
  flex-direction: column;
}

.log_warranty__description {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: max(0.9vw, 16px);
  font-weight: 600;
}

.btn_wrap_checks {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--main-color);
  max-width: 50%;
  width: 25%;
  cursor: pointer;
  border: none;
}

.btn_wrap_checks::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 1px;
  height: 60%;
}

.btn_wrap_checks__item {
  flex-grow: 1;
  padding: 0.75rem 0.5rem;
  min-width: 50%;
  color: #fff;
}

.check_wrap {
  --input-background-color: #fff;
  --input-base-color: #fff;
  --input-border: 1px solid var(--input-base-color);

  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  color: #363636;
  gap: min(5vw, 30%);
  padding: 0.75vh;
  border: var(--input-border);
  background-color: var(--input-background-color);
}

.check_wrap label {
  display: flex;
  gap: 0.5vw;
  align-items: center;
}
.check_wrap input[type="checkbox"] {
  width: auto;
}

/* Status message after submiting form */

.status {
  display: flex;
  flex-direction: column;
  font-size: max(1.25vw, 22px);
  background-color: var(--base-color);
  color: #363636;
  min-width: 70%;
  min-height: 5vh;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transform: translate(-100%, 0);
  width: 35%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease-in;
  align-self: center;
  text-align: center;
}

.status.visible {
  transform: translate(0%, 0);
  width: 85%;
  opacity: 1;
  visibility: visible;
  transition: all 0.75s ease-in;
  color: #cf2122;
}

@media screen and (max-width: 1080px) {
  .form {
    --form-min-width: 60vw;
    --form-inner-gap: 2.5vh;
  }

  /* .form-inner,
  .form-inner__item,
  .form-inner__item--half {
    --form-inner-gap: 2.5vh;
  } */

  input,
  textarea,
  select {
    --horizontall-side-padding: 1.5vw;
    --vertical-side-padding: 2vh;
  }
}

@media screen and (max-width: 650px) {
  .form {
    --form-min-width: 80%;
    --form-padding: 7.5vw;
    /* --form-inner-gap:  */
    height: 100%;
    justify-content: center;
  }

  .form-inner__item--half {
    width: 100%;
  }

  /* .form-inner__item {
    flex-direction: column;
  } */
  .contact-us-form .checkbox_item{
	  
    flex-direction: row;
  }
  
  .contact-us-form .checkbox_item label {
    width: calc(100% - 40px);
}
  
  input[type="submit"] {
    --button-width: 100%;
  }

  .status {
    background-color: #620202;
    min-width: 100%;
    padding: 1rem 1.5rem;
    color: #fff;
  }
}

@media screen and (max-width: 550px) {
  input,
  textarea,
  select {
    --vertical-side-padding: 2vh;
    --horizontall-side-padding: 2.5vw;
    --input-font-size: max(3vw, 16px);
  }
  .form {
    --form-min-width: 100%;

    width: 94%;
  }

  .form-inner,
  .form-inner__item,
  .form-inner__item--half {
    width: 100%;
    gap: 2.5vh;
  }
}