@tailwind base;
@tailwind components;
@tailwind utilities;
body{
  font-family: 'Poppins', sans-serif;
  margin: 0px;
}
#dot-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

html {
  scroll-behavior: smooth;
}
.font-mont{
  font-family: "Montserrat", sans-serif !important;
}
.bg-header{
  background-image: url(/header.jpeg);
  background-position: center;
  background-size: cover;
  padding-top: 130px;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-position: center center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-yellow{
  background-color: #FDDF67;
}
.bg-circle{
  background-image: url(/assets/circle-636d0d0a717250a728c0541de7fdd84530f9ef72978a9406673822fabf45ed70.svg);
  background-position: center;
  background-size: cover;
}
.border-radius{
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 30%;
}
.text-orange{
  color: #FF914D;
}
.leading-3rem{
  line-height: 3rem !important;
}

.bg-orange{
  background-color: #FF914D;
}
.BtnFind {
  background: black;
  border-radius: 0 10px 10px 0;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 39px;
  height: 62px;
  margin: 0;
  min-width: auto;
  position: absolute;
  right: 0;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  top: 36px;
}
.prevBtnFind {
  background: black;
  border-radius: 0 10px 10px 0;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 39px;
  height: 62px;
  margin: 0;
  min-width: auto;
  position: absolute;
  right: 0;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  top: 36px;
}
.address-link{
  display: block;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 5px 4px 10px;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f1f1;
  text-align: left !important;
}
.address-link.selected{
  background-color: #e3e3e3;
}
.address-link:hover{
  background-color: #e3e3e3;
}
.prevaddress-link{
  display: block;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 5px 4px 10px;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid #f1f1f1;
  text-align: left !important;
}
.prevaddress-link.selected{
  background-color: #e3e3e3;
}
.prevaddress-link:hover{
  background-color: #e3e3e3;
}
.property{
  background: white !important;
  position: absolute;
  left: 0px;
  width: 85% !important;
  top: 100%;
  border: 1px solid #b1c9d7;
  z-index: 999;
  max-height: 300px;
  overflow-y: scroll;
  border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -ms-border-radius: 3px !important;
  -o-border-radius: 3px !important;
}
.prevproperty{
  background: white !important;
  position: absolute;
  left: 0px;
  width: 85% !important;
  top: 100%;
  border: 1px solid #b1c9d7;
  z-index: 999;
  max-height: 300px;
  overflow-y: scroll;
  border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -ms-border-radius: 3px !important;
  -o-border-radius: 3px !important;
}
.spinner-border{
  position: absolute;
  right: 4%;
  z-index: 333;
  top: 48%;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.2em solid #cbcbcb;
  border-right-color: transparent !important;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
@media (max-width: 520px) {
  .leading-3rem{
    line-height: 2rem !important;
  }
  .container{
    width: 93% !important;
  }
  .bg-header{
    padding-top: 60px;
    padding-bottom: 50px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .border-radius{
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
  }
 
}

.loader {
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 50%;
  color: #FF914D;
  animation: fill 1s ease-in infinite alternate;
}
.loader::before , .loader::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  left: 30px;
  top: 0;
  animation: fill 0.9s ease-in infinite alternate;
}

.loader::after {
  left: auto;
  right: 30px;
  animation-duration: 1.1s;
}

@keyframes fill {
 0% {  box-shadow: 0 0 0 2px inset }
 100%{ box-shadow: 0 0 0 10px inset }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.error, select.error {
  border-color: red;
}

.parsley-error-list {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}



.parsley-errors-list.filled {
  opacity: 1;
  position: absolute;
  bottom: -22px;
  font-size: 14px;
}
.step-enter {
  opacity: 0;
  transform: translateY(-10%);
}
.step-enter-active {
  opacity: 1;
  transform: translateY(0%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.step-exit {
  opacity: 1;
  transform: translateY(0%);
}
.step-exit-active {
  opacity: 0;
  transform: translateY(10%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite
}
.spinner::before , .spinner§::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #FFF;
  animation: prixClipFix 2s linear infinite ;
}
.spinner::after{
  inset: 8px;
  transform: rotate3d(90, 90, 0, 180deg );
  border-color: #FF3D00;
}

@keyframes rotate {
  0%   {transform: rotate(0deg)}
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.3s ease-in forwards;
}
.error-dob .parsley-error-list {
  margin-top: 0px;
  position: absolute;
}
#mileageForm{
  .relative-error{
    .parsley-errors-list.filled {
      opacity: 1;
      position: relative;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      bottom: -2px;
      width: 100%;
    }
  }
  .date-wrapper{
    .parsley-errors-list.filled {
      opacity: 1;
      position: absolute;
      font-size: 14px;
      bottom: 27px;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */