/* style for index */
.mt-head-box{
   margin-top: 240px;
}
.img-vector{
   position: absolute;
   object-fit: none;
   overflow: hidden;
   left: 0;
}
.img-vector-box1{
   width: 255px; height: 380px; border-radius: 15px;
}
.img-box1-1{
   left: 90px;
   position: absolute;
}
.img-box1-2{
   width: 130%;
   position: absolute;
}
.img-box1-3{
   width: 130%;
   position: absolute;
}
.img-vector-box2{
   width: 275px; 
   height: 350px; 
   top: -35px;
}
.img-box2-1{
   position: absolute;
   left: 25px; 
   top: 36px; 
   width: 55%;
}
.img-box2-2{
   position: absolute;
   width: 75%; 
   top: 70px; 
   left: -3px;
}
.img-box2-3{
   position: absolute;
   width: 90%; 
   left: 90px; 
   top: -10px;
}
.img-vector-box3{
   width: 200px; 
   height: 225px; 
   top: 13px;
}
.img-box3-1{
   position: absolute;
   left: 0px; 
   top: -5px; 
   width: 90%;
}
.img-box3-2{
   position: absolute;
   left: 50px; 
   top: 125px; 
   width: 50%
}
.img-box3-3{
   position: absolute;
   left: 100px; 
   top: -5px; 
   width: 90%;
}
.box-black{
background: linear-gradient(180deg, rgba(28, 22, 21, 0.2) 0%, #302626 80%);
height: auto;
border-radius: 15px;
min-height: 380px;
}
/* end style for index */
.stepwizard-step p {
   margin-top: 0px;
   color:#d9d7d5;
}
.stepwizard-row {
   display: table-row;
}
.stepwizard {
   display: table;
   width: 100%;
   position: relative;
}
.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
   opacity:1 !important;
}
.stepwizard-step {
   display: table-cell;
   text-align: center;
   position: relative;
   min-width: 95px;
}
/* .progress{
   top: 18px;
   bottom: 0;
   position: absolute;
   content:" ";
   width: 80%;
   left:14%;
   height: 2px;
   z-index: 0;
} */

.progressCar {
   top: 18px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 80%;
   left: 10%;
   height: 2px;
   z-index: 0;
   }
   
 .progress {
   top: 18px;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 75%;
   left: 12%;
   height: 2px;
   z-index: 0;
   }

a.btn-circle {
   border-radius: 100%px;
}
a.btn.btn-circle.btn-defalt.btn-primary{
  border-radius: 100% !important;
}
p.head{
font-size: 1.75rem;
}
.head{
   font-size: 1.75rem;
}
.content{
   font-size: 1rem;
   color: #D9D7D5;
}
span.d-lg-inline{
   font-size: 1rem;
}   
.text-title{
   font-size: 1.5rem;
   margin: 1.8rem 0 0.5rem 0;
}
.fade {
   transition: opacity .15s linear;
}
.purple{
   color: #231964;
}
.fa-gradient {
	background: -webkit-gradient(linear, left top, left bottom, from(#FF7A00), to(#FF0000));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.car-position{
   top:200px;
}
.red{
   color: #CB333B;
}
.white{
   color: white;
}
.black{
   color: black;
}
.blue{
   color: #103D9F;
}
.justify-content-evenly {
   justify-content: space-evenly!important;
}
.justify-content-evenly2 {
   justify-content: center!important;
   padding-top: 120px;
}
.btn-radius{
   border-radius: 56px !important;
}
.footer{
   position: absolute;
   bottom: 10px;
}
.card-no-border{
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-clip: border-box;
}
.top-page{
   position: absolute;
   width: 102%;
   left: 0px;
   top: 75px;
   background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #96CDA0;
   border-radius: 0px 0px 160px 160px;
}
.car{
   width: 35%;
   filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
}
 .placeholder {
   position: absolute;
   left: 23px;
   top: -12px;
   background-color: white;
   padding: 0 3px;
   color: #231964;
   display: none;
 }
 .filter:focus ~ .placeholder,
 .filter:valid ~ .placeholder {
   display: inline;
   color: #d9d7d5;
 } 

 .filter:hover ~ .placeholder {
   display: inline;
   color: #231964;
 }

 .is-invalid:focus ~ .placeholder,
 .is-invalid:hover ~ .placeholder,
 .is-invalid ~ .placeholder  {
   display: inline;
   color: #CB333B;
 } 

 .custom-select-option:hover ~ .placeholder {
   display: inline;
   color: #231964;
 }

 input:focus::placeholder {
   color: transparent;
 }
 input:hover::placeholder {
   color: transparent;
 }

 input:required :after {
   content:" *";
   border: 1px solid #CB333B;
 }
 input[required] + label:after {
	color: #CB333B;
   border: 1px solid #CB333B;
}
.step-active {
   color: #fff !important;
   background-color: #231964 !important;
   border-color: #231964 !important;
   font-weight: bold;
 }
 .step-active-finish::after {
   color: #fff !important;
   background-color: #231964 !important;
   border-color: #231964 !important;
   display: block !important;
   position: absolute !important;
   font-family: "Font Awesome 5 Free";
   font-weight: bold;
   content: "\f00c";
   font-size: 14px !important;
   border-radius: 100%;
   height: 2.5rem;
   width: 2.5rem;
   padding-top: 10px;
}
.step-active-error::after {
   color: #fff !important;
   background-color: #CB333B !important;
   border-color: #CB333B !important;
   display: block !important;
   position: absolute !important;
   font-family: "Font Awesome 5 Free" !important;
   font-weight: inherit;
   content: "\21" !important;
   font-size: 14px !important;
   border-radius: 100%;
   height: 2.5rem;
   width: 2.5rem;
   padding-top: 10px;
}
.form-group-label {
   font-size: 18px;
   line-height: 1.5;
   color: #103D9F ;
}
.nowrap{
   white-space: nowrap;
}
.content-center{
   width: 75% !important;
   margin: auto !important;
}
.addon{
   border-right: 0px !important;
}
.text-gray{
   font-size: 1rem;
   color: #d9d7d5;
}
button.step-active ~ p{
   color: #231964 !important;
}
button.step-active-finish ~ p{
   color: #231964 !important;
}
button.step-active-error ~ p{
   color: #CB333B !important;
}
.text-bold{
   font-weight: bold;
}




.select-selected{
   border: 1px solid #d1d3e2;
   min-height: 2.4rem;
}
.custom-select-option {
   position: relative;
   /* border: 1px solid #d1d3e2; */
   border: transparent;
   border-radius: 0.35rem;
 }
 
 .custom-select-option select {
   display: none; 
 }
 
 .select-selected {
   background-color: #fff;
 }
 
 .select-selected:after {
   position: absolute;
   font-family: 'Font Awesome 5 Free';
   content: "\f107";
   font-weight: 600;
   top: 2px;
   right: 15px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-color: #fff transparent transparent transparent;
   color: #d9d7d5;
 }
 
 .select-selected.select-arrow-active:after {
   border-color: transparent transparent #fff transparent;
   font-family: 'Font Awesome 5 Free'; 
   content: "\f106";
   font-weight: 600;
 }
 
 .select-items div,.select-selected {
   color: #000;
   padding:  0.375rem 1.75rem 0.375rem 0.75rem;
   border: 1px solid ;
   /* border-color: transparent #eee #eee #eee; */
   border-color: transparent;
   cursor: pointer;
   user-select: none;
   border-radius: 0 0 5px 5px;
 }
 
 .select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    height: auto;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #eee;
    border-top: 0px;
    border-radius: 0 0 0.35rem 0.35rem;
  }
 
 .select-hide {
   display: none;
 }
 
 .select-items div:hover, .same-as-selected {
   background-color: #231964;
   color: #fff !important;
 }
 
 .select-items div:not(:last-of-type), .select-selected:not(:last-of-type) {
   border-bottom: 0px;
   border-radius: 0px;
   border-top: 0px;
 }

 .select-selected:first-of-type{
    border-radius: 5px !important;
    border: 1px solid #eee ;
 }
 .select-selected:first-of-type:hover,
 .select-selected:first-of-type:focus,
 .select-selected:first-of-type:active{
   border-radius: 5px !important;
   border: 1px solid #231964 !important;
}
 .select-selected:nth-child(2){
   border-radius: 0px !important;
   border-top : 0px !important;
}

 #myInputautocomplete-list > div{
    /* border: #231964 1px solid ; */
    border-top: 0px !important;
    border-radius: 0 0 20px 20px;
    padding: 10px;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    margin-top: -4px;
 }
 
 #myInputautocomplete-list > div:not(:last-of-type) {
  border-bottom: 0px !important;
  border-radius: 0px;
 }

span.strong-hover-shake:hover {
   animation: tilt-shaking 0.15s infinite;
 }
 
 span.gentle-hover-shake:hover {
   animation: tilt-shaking 0.25s infinite;
 }
 
 span.gentle-tilt-move-shake:hover {
   animation: tilt-n-move-shaking 0.25s infinite;
 }
 
 span.strong-tilt-move-shake:hover {
   animation: tilt-n-move-shaking 0.15s infinite;
 }
 
 span.constant-tilt-shake {
   animation: tilt-shaking 0.3s infinite;
 }
 
 span.vertical-shake {
   animation: vertical-shaking 0.35s infinite;
 }
 
 span.horizontal-shake {
   animation: horizontal-shaking 0.35s infinite;
 }
 
 span.rise-shake {
   animation: jump-shaking 0.83s infinite;
 }
 
 span.skew-shake-x {
   animation: skew-x-shake 1.3s infinite;
 }
 
 span.skew-shake-y {
   animation: skew-y-shake 1.3s infinite;
 }
 
 @keyframes tilt-shaking {
   0% { transform: rotate(0deg); }
   25% { transform: rotate(5deg); }
   50% { transform: rotate(0eg); }
   75% { transform: rotate(-5deg); }
   100% { transform: rotate(0deg); }
 }
 
 @keyframes tilt-n-move-shaking {
   0% { transform: translate(0, 0) rotate(0deg); }
   25% { transform: translate(5px, 5px) rotate(5deg); }
   50% { transform: translate(0, 0) rotate(0eg); }
   75% { transform: translate(-5px, 5px) rotate(-5deg); }
   100% { transform: translate(0, 0) rotate(0deg); }
 }
 
 @keyframes vertical-shaking {
   0% { transform: translateY(0) }
   25% { transform: translateY(5px) }
   50% { transform: translateY(-5px) }
   75% { transform: translateY(5px) }
   100% { transform: translateY(0) }
 }
 
 @keyframes horizontal-shaking {
   0% { transform: translateX(0) }
   25% { transform: translateX(5px) }
   50% { transform: translateX(-5px) }
   75% { transform: translateX(5px) }
   100% { transform: translateX(0) }
 }
 
 @keyframes jump-shaking {
   0% { transform: translateX(0) }
   25% { transform: translateY(-9px) }
   35% { transform: translateY(-9px) rotate(17deg) }
   55% { transform: translateY(-9px) rotate(-17deg) }
   65% { transform: translateY(-9px) rotate(17deg) }
   75% { transform: translateY(-9px) rotate(-17deg) }
   100% { transform: translateY(0) rotate(0) }
 }
 
 @keyframes skew-x-shake {
   0% { transform: skewX(-15deg); }
   5% { transform: skewX(15deg); }
   10% { transform: skewX(-15deg); }
   15% { transform: skewX(15deg); }
   20% { transform: skewX(0deg); }
   100% { transform: skewX(0deg); }  
 }
 
 @keyframes skew-y-shake {
   0% { transform: skewY(-15deg); }
   5% { transform: skewY(15deg); }
   10% { transform: skewY(-15deg); }
   15% { transform: skewY(15deg); }
   20% { transform: skewY(0deg); }
   100% { transform: skewY(0deg); }  
 }

/* responsive */
@media (max-width: 576px){
   .car-position{
      top:45px !important;
   }
   .top-page{
      width: 127% !important;
      height: 90px !important;
      left: -30px !important;
      top: 70px !important;
   }
   .card-body{
      padding: 5px !important;
      zoom: 80%;
   }
   .btn{
      font-size: zoom 80%;
      width: 100% !important;
   }
   .img-box-sm{
      margin-left: 30px !important;
      margin-right: 30px !important;
      margin-bottom: 30px !important;
   }
   input.form-control{
      font-size: 1rem !important ;
   }
   .form-control {
      height: calc(1.5em + 1.2rem + 2px) !important;
   }
   .stepwizard-step {
      min-width: 70px !important;
  }
  .stepwizard {
   zoom: 75%;
   }
}
@media (min-width: 576px)  and (max-width: 768px){
   .card-body{
      padding: 5px !important;
      zoom: 75%;
   }
   .btn{
      font-size: zoom 90%;
      width: 30% !important;
   }
   .car-position{
      top:75px !important;
   }
   .top-page{
      width: 115% !important;
      height: 155px !important;
      left: -37px !important;
      top: 71px !important;
   }
   .ml-nav{
      margin-left: 1rem !important;
   }
   .mt-head-box {
      margin-top: 210px !important;
      }
   .img-box-sm{
      margin-left: 118px !important;
      margin-right: 118px !important;
      margin-bottom: 30px !important;
   }
   .img-box1-1{
      width: 50% !important;
      top: 35px !important;
      left: 135px !important;
   }
   .img-box1-2{
      width: 100% !important;
      left: 50px !important;
      top: 30px !important;
   }
   .img-box1-3{
      width: 100% !important;
      left: 50px !important;
      top: 30px !important;
   }
   .img-box2-3 {
      width: 80% !important;
      left: 115px !important;
      top: -10px !important;
   }
   .img-box2-2 {
      width: 70% !important;
      top: 55px !important;
      left: 18px !important;
   }
   .img-box2-1 {
      left: 35px !important;
      top: 25px !important;
      width: 51% !important;
   }
   .img-vector-box3 {
      width: 230px !important;
      top: -41px !important;
   }
   .img-box3-1 {
      left: 75px !important;
      top: -5px !important;
      width: 65% !important;
   }
   .img-box3-2 {
      left: 92px !important;
      top: 84px !important;
      width: 40% !important;
   }
   .img-box3-3 {
      left: 145px !important;
      top: -3px !important;
      width: 65% !important;
   }
   .form-control {
      height: calc(1.5em + 1.2rem + 2px) !important;
   }
   .stepwizard-step {
      min-width: 80px !important;
   }
  .stepwizard {
   zoom: 80%;
   }
 }
 @media (min-width: 768px) and (max-width: 992px)  {
   p.head{
      font-size: 20px !important;
   }
   .car-position{
      top:100px !important;
   }
   .top-page{
      height: 320px !important;
      position: absolute;
      width: 102%;
      left: 0px;
      top: 75px;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #96CDA0;
      border-radius: 0px 0px 160px 160px;
   }
   .ml-nav{
      margin-left: 7rem !important;
   }
   .mt-head-box{
      margin-top: 180px !important;
   }
   .box-black{
      min-height: 320px !important;
      height: 320px !important;
   }
   .img-box-sm{
      margin-left: 207px !important;
      margin-right: 207px !important;
      margin-bottom: 30px !important;
   }
   .img-vector-box1{
      height: 320px !important;
   }
   .img-box1-1{
      width: 50% !important;
      left: 70px !important;
   }
   .img-box1-2{
      width: 100% !important;
      left: 70px !important;
   }
   .img-box1-3{
      width: 100% !important;
      left: 70px !important;
   }
   .img-vector-box2 {
      width: 285px !important;
      }
   .img-box2-1 {
      left: 65px !important;
      top: 20px !important;
      width: 43% !important;
      }
   .img-box2-2 {
      width: 65% !important;
      top: 45px !important;
      left: 40px !important;
      }
   .img-box2-3 {
      width: 65% !important;
      left: 130px !important;
   }
   .img-vector-box3 {
      width: 230px !important;
      top: -41px !important;
   }
   .img-box3-1 {
      left: 75px !important;
      top: -5px !important;
      width: 65% !important;
      }
   .img-box3-2 {
      left: 92px !important;
      top: 84px !important;
      width: 40% !important;
   }
   .img-box3-3 {
      left: 145px !important;
      top: -3px !important;
      width: 65% !important;
   }
 }
 
 @media (min-width: 992px) {
   .car-position{
      top:100px !important;
   }
   .top-page{
      height: 320px !important;
      position: absolute;
      width: 102%;
      left: 0px;
      top: 75px;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #96CDA0;
      border-radius: 0px 0px 160px 160px;
   }
   .ml-nav{
      margin-left: 7rem !important;
   }
 }
 @media (min-width: 1200px) {
   .car-position{
      top:100px !important;
   }
   .top-page{
      height: 320px !important;
      position: absolute;
      width: 102%;
      left: 0px;
      top: 75px;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), #96CDA0;
      border-radius: 0px 0px 160px 160px;
   }
   .ml-nav{
      margin-left: 7rem !important;
   }
}
.btn{
   width: 25%;
}
.autocomplete-items div:hover {
   background-color: #e9e9e9; 
 }
 .autocomplete-items {
   position: absolute;
   width: 98%;
   background-color: #fff;
   z-index: 999;
   height: auto;
   max-height: 200px;
   overflow-y: scroll;
   border: 1px solid #eee;
   border-radius: 0 0 5px 5px;
 }
 .autocomplete-active {
   background-color: #231964  !important; 
   color: #ffffff; 
 }
 .text-error{
   color: black;
   margin-top: 5rem;
 }
 .fa-error{
   color: #fff;
   background: #CB333B;
   border: 3px solid #CB333B;
   border-radius: 50px;
   line-height: 48px;
   width: 55px;
   height: 55px;
   font-size: 3rem;
 }