/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.errorlist {
padding: 0;
}

.couponerror {
margin: 0 auto 20px auto;
color: red;
font-weight: 700;
padding: 10px;
background-color: rgba(255, 110, 110, 0.46);
border-radius: 4px;
}

.paymenttiming {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #a3a3a3;
padding: 10px;
border-radius: 2px;
margin-top: 20px;
}

.timingicon {
color: white;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.securestorage {
font-size: 12px;
margin-top: 15px;
}

.quotenotes {
text-align: left;
margin-top: 20px;
}

.timingicon .glyphicon {
margin: auto;
font-size: 26px;
}

.timingmessage {
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
text-align: left;
margin-left: 10px;
color: white;
margin: auto auto auto 10px;
}

.stripeobjects .timingicon, .stripeobjects .timingmessage {
margin-top: 0;
}

.paymentboxinner {
background-color: white;
padding: 50px;
border: 1px solid #c7c7c7;
border-radius: 4px;
margin-bottom: 30px;
}

.paymentbox input, .paymentbox select {
border: 1px solid #d4d4d4;
background-color: white;
}

.paymentbox .btn {
display: block;
border-radius: 2px;
-webkit-transition: all 280ms ease-in-out;
-o-transition: all 280ms ease-in-out;
transition: all 280ms ease-in-out;
color: #fff !important;
padding: 10px 0;
width: 180px;
font-size: 14px;
text-align: center;
font-weight: 600;
letter-spacing: 0;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
margin: 20px auto 0 auto;
border: none;
}

.redmessage {
color: red;
font-weight: 700;
}

.paymentbox img {
margin: 15px 0 10px 0;
}

.paymentbox .btn.btn-danger{
background-color: red;
}

.paymentbox .btn.btn-success{
background-color: green;
}

.paymentbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.paymentboxinner {
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}

.paymentboxinner:first-child {
margin-right: 20px;
}

.paymentboxinner:second-child {
margin-left: 20px;
}

.paymentheader {
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}

.paymentheader2 {
font-weight: 600;
}

.paymentline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
text-align: left;
}

.paymentline1 {
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}

.paymentline1.item {
margin-left: 10px;
}

.paymentline2 {
width: 80px;
text-align: right;
padding-right: 5px;
}

.paymentline2.larger {
width: 90px;
}

.subtotalrule{
border-top: 1px solid #d6d6d6;
margin-left: 7px;
width: 100%;
text-align: left;
}

.paymentline.total {
margin-top: 20px;
background: none;
}

.paymentline1.subtotal, .paymentline2.subtotal {
border-top: 1px solid #d6d6d6;
 background: none;
}

.paymentboxinner2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}

.paymentboxinner3 {
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}

.paymentboxinner.paymentboxinner2 {
border: none;
padding: 0;
}

.paymentboxinner3 {
background-color: white;
padding: 50px;
border: 1px solid #c7c7c7;
border-radius: 4px;
margin-bottom: 30px;
}

.paymentboxinner3.offline {
margin-bottom: 0;
}

.paymentboxinner3.creditcard {
margin-bottom: 20px;
}

.paymentboxinner3.creditcard2 {
margin-bottom: 0;
}

.paymentoption input, .paymentoption .paymentname {
    display: inline-block;
}

.paymentoption .paymentname {
width: 150px;
text-align: left;
}

.topmargin {
margin-top: 10px;
}

.freq {
font-weight: 400;
display: inline;
}

.paymentline1.paymentheader2.frequency {
margin-bottom: 10px;
}

.stripeimage {width: 250px;}

.mainbox img.stripeimage {
-webkit-box-shadow: none;
        box-shadow: none;
}

.paymentbox img { 
    margin: 20px 10px 0 10px;
}

.offlinepayform, #payment-form {
margin-bottom: 0;
}



@media (max-width: 1200px) {
    
   .paymentbox {
    display: block;
    } 
    
    .paymentboxinner {
    /* max-width: 600px; */
    margin: 0 auto;
    }
    
    .paymentboxinner:first-child {
    margin: 0 auto 20px auto;
    }

    .paymentboxinner:second-child {
    margin: 0 auto;
    }
    
    .paymentboxinner, .paymentboxinner3 {
    padding: 15px;
    }
    

    
}

.paymentmainbox.mainbox ul.paymenterror {
padding: 0;
}

@media (max-width: 480px) {

  .paymentmainbox.mainbox {
  padding: 0;  
  -webkit-box-shadow: none;  
          box-shadow: none;
  }

  .mainbox img.stripeimage {
  width: 70%;
  }

  .bookingsummaryinner,
  .bookingsummaryinner2,
  .paymentboxinner3 {
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
          box-shadow: 0 0 10px rgba(0,0,0,.1);
  border-radius: 4px;
  padding: 20px 10px;
  }
  
  .paymentboxinner, .paymentboxinner3 {  
  border: none;
  }

  .paymentmainbox.mainbox .paymenterror {
  margin-bottom: 0;
  }

}
    


/*Start of Stripe Form styles*/

.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  -webkit-box-shadow: 0 1px 3px 0 #e6ebf1;
          box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  -webkit-transition: -webkit-box-shadow 150ms ease;
  transition: -webkit-box-shadow 150ms ease;
  -o-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease, -webkit-box-shadow 150ms ease;
}

.StripeElement--focus {
  -webkit-box-shadow: 0 1px 3px 0 #cfd7df;
          box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.stripe {
width: 155px;
}




.examplecc {
font-family: sans-serif;
font-weight: 400;
font-size: 15px;
}

.examplestripe.StripeElement {
  padding: 5px 12px;   
}

.mainbox .examplecc img {
margin: 0;
-webkit-box-shadow: none;
        box-shadow: none;
width: 30px;
display: inline-block;
float: left;
margin-top: 5px;
}

.ccnum4, .ccnum12 {
display: inline-block;
margin-top: 5px;
float: left;
}

.ccnum4 {
margin-left: 10px;
}

.ccnum12 {
margin-left: 4px;
}

#card-errors {
font-weight: 700;
color: red;
}

.ccCCV, .ccexpire {
float: right;
margin-right: 15px;
margin-top: 5px;
}

.exampleccnumber  {
color: red;
font-weight: 700;
margin: 5px auto 0 auto;

}

.orderbutton.exampleccpayment {
width: 160px;
}

.stripeobjects div, .stripeobjects img {
margin-top: 30px;
}

.stripeobjects a {
display: block;
}

@media (max-width: 1200px) {
    
    .stripeobjects {
    margin-top: 10px;
    }
        
    .stripeobjects div {
    margin-top: 50px;
    }
    
    .stripeobjects img {
    margin-top: 0;
    }

    .stripeobjects .paymenttiming {
    margin: 20px auto;
    }

    .stripeobjects .timingmessage {
    margin: auto auto auto 10px;
    }

    
}

@media (max-width: 600px) {
    
    .stripeobjects {
    margin-top: 0;
    }
        
    .stripeobjects div, .stripeobjects img {
    margin: 20px auto 0 auto;
    display: block;    
    }

    .stripeobjects .paymenttiming {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }

    .timingicon .glyphicon {
    margin: auto !important;    
    }

    .timingmessage {
    margin: auto auto auto 10px !important;
    }

    .timingicon {
    margin: auto !important;
    }

  
    
}


@media (max-width: 400px) {
    .ccnum12 {
    display: none;
    } 
    
}

#quoterejectreason {
width: 100%;
height: 100px;
padding: 10px;
}


.addtip {
margin-top: 30px;

}

.addtip .tipline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
width: 200px;
}

.addtip .tipline input {
margin-right: 10px;
}

.addtip .tipline select, .addtip .tipline input {
-webkit-box-flex: 1;
-ms-flex: 1;
    flex: 1;
outline: none;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 3px 0 #e6ebf1;
        box-shadow: 0 1px 3px 0 #e6ebf1;

}

.addtip .tipline select::-webkit-input-placeholder{
color: #8b8b8b;
}

.addtip .tipline select::-moz-placeholder{
color: #8b8b8b;
}

.addtip .tipline select:-ms-input-placeholder{
color: #8b8b8b;
}

.addtip .tipline select::-ms-input-placeholder{
color: #8b8b8b;
}

.addtip .tipline select::placeholder{
color: #8b8b8b;
}

.buttoncolor.removetipbutton {
background-color: red;
}

.buttoncolor.removetipbutton:hover {
background-color: darkred;
}

.orderbutton.tipbutton {
padding: 3px 12px;
height: 30px;
width: 120px;
}

.tipmessage {
display: none;
}

.tipmessage.showtipsuccess {
display: block;
color: green;
background-color: rgba(110, 255, 127, 0.46);
margin-bottom: 15px;
font-weight: 700;
list-style: none;
padding: 10px;
border-radius: 4px;
}

.tipmessage.showtipfailure {
display: block;
color: red;
background-color: #f2bbbb;
margin-bottom: 15px;
font-weight: 700;
list-style: none;
padding: 10px;
border-radius: 4px;
}

.tippaymentline {
margin-top: 20px;
}

@media (max-width: 360px) {


.addtip .tipline {
display: block;
width: 100%;
}

.addtip .tipline input {
margin: 0 0 10px 0;
}

.addtip .tipline select, .addtip .tipline input {
width: 100%;
}

.orderbutton.tipbutton { 
margin: 10px auto 0 auto;
padding: 5px 12px;
}

}

/* styling for photo submission formset */

.photoentryline {
margin-bottom: 0px;
text-align: left;
}

.photoentryline .changeimage.changeimageinputdiv{
display: inline-block;
}

.photoentryline .changeimage.changeimageinputdiv input{
margin-bottom: 5px;
width: 100%;
padding: 3px 3px 3px 3px;
}

.photoentryline input[type="text"]{
width: 100%;
padding: 3px 7px;
}

.requestphotoform{
margin-bottom: 0;
}

.requestphotoform .formsetbox{
margin-bottom: 30px;
display: none;
}

.requestphotoform .formsetbox.showformsetbox{
display: block;
}

.paymentboxinner3 .requestphotoform {
text-align: left;
}

.paymentboxinner3 .requestphotoform .paymentheader{
text-align: center;
}

.requestphotoform .orderbutton{
cursor: pointer;
margin: 0 auto 15px auto;
}

.requestphotoform .orderbutton:last-child{
margin: 0 auto;
}

.paymentboxinner3 .removetempimage{
position: relative;
bottom: 1px;
}

.paymentboxinner3 .changeimage.changeimageinputdiv{
  width: calc(100% - 76px);
  }

@media (max-width: 550px) {

  .paymentboxinner3 .removetempimage{
  display: block;
  margin: 2px 0 5px 0;
  }

  .paymentboxinner3 .changeimage.changeimageinputdiv{
  width: 100%;
  }

}

.paymentboxinner3.creditcard3.termsandconditions{
margin-bottom: 20px;
}

.quoteselection .termsandconditions .summernote{
height: 200px;
max-height: 200px;
overflow-y: scroll;
text-align: left;
}

.paymentbox .quoteselection .termsandconditions .summernote img{
margin: 20px auto 0 auto;
}


/*Start of formatting for quote request*/

.paymentbox.quoterequestpaymentbox{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
}

.paymentbox.quoterequestpaymentbox .paymentboxinner:first-child{
margin-right: 0;
margin-left: 20px;
}

.paymentbox.quoterequestpaymentbox.noimagesallowed{
display: block;
width: 100%;
}

@media (max-width: 1200px) {

  .paymentbox.quoterequestpaymentbox{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  }

  .paymentbox.quoterequestpaymentbox .paymentboxinner.paymentboxinner2{
  width: 100%;
  margin-bottom: 20px;
  }


  .paymentbox.quoterequestpaymentbox .paymentboxinner.paymentboxinner{
  margin-left: 0;
  }

}

@media (max-width: 360px) {

  .paymentbox.quoterequestpaymentbox .orderbutton[type="submit"]{
  display: block;
  margin-top: 10px;
  }

}

/*Start of formatting for quote request*/