/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .d-none{
    display: none;
 }


/* Inline #14 | https://localhost/aura/franchise/?thankyou=true */

.thank-you-tick {
   background: #33BFF3;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   margin: auto;
 }
 
 .thank-you-tick svg {
   width: 60px;
   height: 60px;
 }
 
 .thankyou-page {
   height: 20vw;
   display: flex;
   flex-direction: column;
 }
 
 .thank-you-tick {
   width: 70px;
   height: 70px;
   margin: 0px auto 2%;
 }
 
 .thankyou-page h4 {
   max-width: 60%;
   text-align: ;
   margin: 0px auto 10%;
   line-height: 1.4em;
 }
 
 .thankyou-page {
   height: 25vw;
   align-items: center;
   justify-content: center;
 }
 

.loader-screen {
   position: absolute;
   height: 100%;
   top: 0px;
   left: 0px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .loader-screen img {
   width: 140px;
   }



   /**
   * Css Need to Move theme file ( For Dummy purpose )
   */
   .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #f8d7da !important;
  }
   .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
      color: #000;
      position: absolute;
      top: 1rem;
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
      width: calc(90% - 15px);
      display: block;
      margin: 0px;
      left: calc(5% + 15px);
      height: 40px;
    }
    #contactUs .contentArea .rightSide form {
      position: relative;
    }


    .d-flex {
      display: flex;
    }
    .flex-column{
      flex-direction: column;
    }
    .frm-group{
      margin-bottom: 1em;
    }

 .frm-group .error {
      font-size: .8em;
      color: red;
      bottom: 0px;
}

.child-group .error {
  font-size: .8em;
  color: red;
  bottom: 0px;
}

.loader {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.8);
	display: flex;
	align-items: center;
	justify-content: center;
  display: none;
  
}
.loader.active{
  display: flex;
}



.thankyou-message {
  display: none;
  flex-direction: column;
  margin: 5% auto 0px;
  text-align: center;
  max-width: 450px;
}


.thankyou-message svg {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
}

.thankyou-message {
  justify-content: center;
  align-items: center;
}
.thankyou-message.active {
  display: flex;
}

@media only screen and (max-width: 767px){
  .thankyou-message {
    margin-top: 3em;
  }
}