/* ============================================================================== */
/* Modal Settings */
/* ============================================================================== */

/* ================================ ALL MODALS ================================= */
div[id^="af-modal-"].af-modal.modal {
  width: 100%;
  margin: 0 auto;
  z-index: 99999;
}
.af-modal .modal-dialog {
  margin: 20px auto;
  /* margin-top: 200px; */
  width: auto;
  max-width: 800px;
}
.af-modal .modal-content {
  background: #fff;
  color: #000;
  max-width:800px;
  width: 100%;
  margin: 0 auto;
}
.af-modal .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.af-modal .af-modal-exit-icon svg {
  cursor: pointer;
  position: absolute;
  z-index: 999;
  right: -12px;
  top: -12px;
}
.af-modal .container {
  width: 100% !important;
}
/* ================================ ALL MODAL HEADERS ================================= */
.af-modal .af-modal-header {
  padding: 25px 15px 20px 15px;
}
.af-modal .af-modal-main-image {
  min-height: 180px;
  height: auto;
  max-width: 100%;
}
.af-modal .af-modal-title  {
  padding: 0 15px 0 5px;
  align-self: center;
}
.af-modal .af-modal-title h2 {
  text-transform: uppercase;
  font-weight: 400;
  border-bottom: 1px solid #707070;
  margin-bottom: 15px;
}
.af-modal .af-modal-title h2 span {
  font-weight: 600;
}
.af-modal p.af-modal-vehicle-title span.af-year {
  font-weight: 600;
}
.af-modal .af-modal-title p {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1.5;
  text-transform: capitalize;
}
.af-modal p.af-modal-vehicle-title  {
  font-size: 18px;
  text-transform: capitalize;
}

.af-modal .af-modal-payment-options {
  padding-bottom: 20px;
  color: #383838;
}
.af-modal .af-modal-discount-options {
  padding: 20px 15px;
}
.af-modal .af-modal-discount-options .af-h3, .af-modal .af-modal-selects .af-h3 {
  font-size:18px;
}
.af-modal .af-details-form-inputs .af-h3 {
  font-size:22px;
}

/* ================================ ALL MODAL FORMS ================================= */

.af-modal .af-form-modal .af-form-container {
  max-width: 100%;
  padding:10px 30px 30px 30px;
}
.af-modal .af-form-modal .af-form-container .af-form-content {
  margin:0 0 20px 0;
}
.af-modal .form-group:last-of-type {
  margin: 0;
}
.af-modal .af-form-modal label {
  text-align: left;
}

.af-modal .af-form-modal label input,
.af-modal .af-form-modal label textarea,
.af-modal .af-form-modal label select {
  margin-top: .5rem;
}
.af-modal-discount-options .af-modal-selects h3 {
  margin-bottom: 5px;
}
.af-modal .af-form-modal h3 {
  text-align: left;
  padding: 0 30px;
  text-transform:uppercase;
}

/* hide labels for everything except checkbox */
.af-modal .af-form-modal .form-group input[type="text"] + label, .af-modal .af-form-modal input[type="tel"] + label, .af-modal .af-form-modal .form-group input[type="email"] + label, .af-modal .af-form-modal .form-group textarea + label {
  display: none;
}

/* style for all inputs/select/textarea */
div[id^="af-modal-"].af-modal input, div[id^="af-modal-"].af-modal select, div[id^="af-modal-"].af-modal textarea {
  border-radius: 0;
  margin-bottom:5px;
  border: 1px solid #CBCBCB;
  padding: 10px 20px;
  color: #707070;
}
div[id^="af-modal-"].af-modal input {
  color: #707070;
  height: 44px;
}
div[id^="af-modal-"].af-modal select {
  height: 47px;
  width: 100%;
  font-size: 14px;
  box-shadow: 0px 3px 3px rgba(0,0,0,.15);
}
div[id^="af-modal-"].af-modal.af-contact-modal select {
  box-shadow: none;
}

/* Placeholder text color -- selectors need to be separate to work. */
div[id^="af-modal-"] ::-webkit-input-placeholder {
  color: #707070;
}
div[id^="af-modal-"] :-moz-placeholder {
  color: #707070;
}
div[id^="af-modal-"] ::-moz-placeholder {
  color: #707070;
  opacity: 1;
  /* Since FF19 lowers the opacity of the placeholder by default */
}
div[id^="af-modal-"]:-ms-input-placeholder {
  color: #707070;
}
div[id^="af-modal-"].af-modal textarea {
  background: #fff;
  height: 100px;
}

/* change checkbox style */
.af-modal-discount-options #af-discount-options input[type="checkbox"], .af-modal-discount-options #af-discount-options label, .af-form-modal input[type="checkbox"], .af-form-modal input[type="checkbox"] + label {
  font-size: 14px;
  min-height: 37px;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  vertical-align: sub;
  text-align: left;
}
.af-modal-discount-options #af-discount-options input[type="checkbox"] {
  margin: 0;
}
.af-modal-discount-options #af-discount-options label {
  margin-right: 10px;
}
.af-form-modal input[type="checkbox"], .af-form-modal input[type="checkbox"] + label {
  display: inline-block;
  padding-right: 30px;
}
.af-modal-discount-options #af-discount-options input[type=checkbox], .af-form-modal input[type=checkbox] {
  position: relative;
  height: 20px;
  width: 20px;
  margin: 0;
  vertical-align: middle;
  visibility: hidden;
}
.af-modal-discount-options #af-discount-options input[type=checkbox]:before, .af-form-modal input[type=checkbox]:before {
  visibility: visible;
  border: 1px solid #707070;
  height: 20px;
  width: 20px;
  padding: 0;
  content: '\00a0';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.af-modal-discount-options #af-discount-options input[type="checkbox"]:checked::before, .af-form-modal input[type="checkbox"]:checked::before  {
   width: 20px;
   height: 20px;
   transition: transform 0.28s ease;
}
.af-modal-discount-options #af-discount-options input[type="checkbox"]:focus::before, .af-form-modal input[type="checkbox"]:focus::before  {
   box-shadow: 0px 2px 3px #707070;
}
.af-modal-discount-options #af-discount-options input[type=checkbox]:after, .af-form-modal input[type=checkbox]:after {
  content: '';
  visibility: visible;
  display: block;
  width: 14px;
  height: 7px;
  border-bottom: 3px solid #E5001F;
  border-left: 3px solid #E5001F;
  -webkit-transform: rotate(-45deg) scale(0);
  -moz-transform: rotate(-45deg) scale(0);
  -ms-transform: rotate(-45deg) scale(0);
  transform: rotate(-45deg) scale(0);
  position: absolute;
  top: -3px;
  bottom: 0;
  margin: auto;
  left: 3px;
}

.af-modal-discount-options #af-discount-options input[type="checkbox"]:checked::after, .af-form-modal input[type="checkbox"]:checked::after {
  -webkit-transform: rotate(-45deg) scale(1);
  -moz-transform: rotate(-45deg) scale(1);
  -ms-transform: rotate(-45deg) scale(1);
  transform: rotate(-45deg) scale(1);
}

/*  form submit */
.af-modal .af-form-submit button{
  margin: 0;
}

/* ================================ ALL MODAL FOOTER ================================= */
.af-modal .af-modal-footer {
  padding: 25px 15px 30px 15px;
  font-size: 14px;
}
.af-modal .af-modal-footer p.af-modal-footer-title {
  font-weight: 600;
}
.af-modal .af-modal-footer p, .af-modal .af-modal-footer li {
  margin-bottom: 0;
  line-height: 2;
}
/* ================================ CONTACT MODAL ================================= */

/* ================================ OPTIONS MODAL ================================= */
#af-modal-options .af-modal-header {
  padding: 0 15px;
  background-color: #E9E9E9;
    border-bottom: 1px solid #cecece;
}
#af-modal-options .af-modal-title h2 {
  color: #000;
  padding: 20px 15px;
  font-size: 32px;
  text-transform: uppercase;
  border-bottom: none;
  margin-bottom: 0;
}
#af-modal-options .modal-body {
  padding: 40px 30px;
}
#af-modal-options .modal-body .af-h3 {
  margin-bottom: 0;
  border-bottom: 1px solid #aaa;
  padding-bottom: 15px;
}
#af-modal-options .af-h3 span {
  font-size: 16px;
  padding-left: 40px;
}
#af-modal-options .af-h3 span svg {
  height: 12px;
  width: 15px;
}
#af-modal-options .af-modal-options-list li {
  list-style: none;
  padding: 15px 20px;
  width: 100%;
  border-bottom: 1px dashed #707070;
  background: #fff;
}
#af-modal-options .af-modal-options-list li:nth-of-type(odd) {
    background-color: #F7F7F7;
}
#af-modal-options .af-modal-close-btn {
  margin: 0 auto;
  max-width: 200px;
}

#af-modal-lease .af-lease-info td:last-of-type {
  word-break: break-all;
}


@media (max-width: 767px) {
  div[id^="af-modal-"].af-modal {
    width: 100%;
    margin: 0 auto;
  }
  .af-modal .modal-dialog {
    max-width: 545px;
    margin-top: 100px;
  }
  .af-modal .af-modal-header {
    flex-direction: column;
  }
  .af-modal .af-modal-title {
    padding: 20px 15px 0 15px;
  }
  #af-modal-options .af-modal-title {
    padding: 0;
  }
  #af-modal-options .modal-body {
    padding: 30px 20px;
  }
  #af-modal-options .af-h3 span {
    display: block;
    padding-left: 0;
  }

  .af-modal .form-group input, .af-modal .form-group textarea, .af-modal .form-group select {
    margin-bottom: 15px;
  }
  .af-modal .form-group  {
    margin: 0;
  }
  .af-modal .form-group [class^="col-xs-"] {
    padding: 0;
  }
  .af-form-modal input[type=checkbox] + label:after {
    top: -20px;
  }

  .af-modal .form-horizontal .af-form-submit button {
    max-width: 100%;
  }

}

@media (min-width: 768px) {
  .af-modal .modal-dialog {
    max-width: 700px;
  }
  .af-modal .modal-content {
    width: calc(100% - 40px);
  }
  .af-modal .af-modal-main-image {
    height: 240px;
    max-width: 100%;
  }
  .af-modal .af-modal-title h2 {
    font-size: 28px;
  }
  .af-modal .af-modal-title h2 span {
    font-size: 38px;
  }
  .af-modal-discount-options #af-discount-options input[type="checkbox"], #af-discount-options label, .af-form-modal input[type="checkbox"], .af-form-modal input[type="checkbox"] + label {
    font-size: 14px;
  }
  .af-modal .form-horizontal .af-form-submit button {
    padding: 16px 40px;
  }
}

@media (min-width: 992px) {
  .af-modal .modal-dialog {
    max-width: 800px;
  }
    .af-modal-discount-options #af-discount-options input[type="checkbox"], #af-discount-options label, .af-form-modal input[type="checkbox"], .af-form-modal input[type="checkbox"] + label {
    font-size: 15px;
  }
}