.latepoint-lightbox-w {
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  z-index: 999999;
  display: none;
  justify-content: center;
  align-items: center;
  grid-template-columns: min-content;
  grid-template-rows: 1fr;


  &.width-400 { grid-template-columns: 400px; }
  &.width-450 { grid-template-columns: 450px; }
  &.width-500 { grid-template-columns: 500px; }
  &.width-600 { grid-template-columns: 600px; }
  &.width-700 { grid-template-columns: 700px; }
  &.width-800 { grid-template-columns: 800px; }



  .latepoint-lightbox-heading {
    padding: 15px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #f8f8f8;
    display: flex;
    align-items: center;

    h2 {
      color: $headings-color;
      margin: 0px;
      font-size: $headings-font-size-xl;
      flex: 1;
    }
    .latepoint-lightbox-close {
      position: relative;
      line-height: 1;
      font-size: 20px;
      color: #333;
      text-decoration: none;
      display: block;
      outline: none;
      box-shadow: none;
      padding: 5px;
      i {
        display: block;
      }
      .latepoint-icon-x:before {
        content: "\e90a";
      }
      &:focus {
          outline: none;
      }
      &:hover {
        background-color: rgba(0,0,0,0.05);
        color: #000;
      }
    }
  }
  .latepoint-lightbox-footer {
    padding: 15px;
    border-top: 1px solid #eee;
  }

  button, input, select, textarea {
    font-family: $body-font-family;
    font-weight: $body-font-weight-normal;
    font-size: floor($font-size-base);
  }

  &.latepoint-border-radius-rounded {
    .latepoint-lightbox-i {
      border-radius: $rounded-borders-radius;
    }
  }

  .latepoint-lightbox-i {
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2), 0px 20px 50px rgba(0,0,0,0.4);
    max-height: 94vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    &.os-loading {
      .latepoint-lightbox-content {
        min-height: 100px;
        position: relative;
        > div {
          visibility: hidden;
        }
        &:before {
          @include loading-circle($brand-primary, 30px);
        }
        .lp-payment-method-content {
          display: none;
        }
      }
    }
    .latepoint-lightbox-content {
      padding: 30px;
      flex: 1;
      overflow: auto;
      position: relative;
      &.is-dotted {
        padding-top: 50px;
        &:before {
          content: "";
          height: 30px;
          background-image: radial-gradient(#ccc 1px, transparent 0);
          background-size: 10px 10px;
          background-color: #fff;
          display: block;
          position: absolute;
          top: 5px;
          left: 5px;
          right: 5px;
        }
      }
    }

    > .latepoint-lightbox-close {
      position: absolute;
      line-height: 1;
      top: 17px;
      right: 19px;
      font-size: 20px;
      color: #333;
      text-decoration: none;
      display: block;
      outline: none;
      box-shadow: none;
      padding: 5px;
      border-radius: $border-radius;
      i {
        display: block;
      }
      .latepoint-icon-x:before {
        content: "\e90a";
      }
      &:focus {
          outline: none;
      }
      &:hover {
      background-color: rgba(0,0,0,0.05);
        color: #000;
      }
    }
    .os-summary-contents-inner {
      overflow-y: auto;
    }
    .latepoint-summary-w .os-summary-contents {
      max-height: 100%;
    }
    .latepoint-booking-form-element {
      background-color: #fff;
      max-height: 100%;
      overflow: hidden;
      form.latepoint-form {
        max-height: 100%;
      }
      .latepoint-footer {
      }
    }
    z-index: 9999;
    border-radius: $border-radius-md;
    a {
      box-shadow: none;
      img {
        box-shadow: none;
      }
    }
  }
  &.latepoint-hide-side-panel {
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: $headings-font-family;
    font-weight: $headings-font-weight-normal;
    color: $brand-primary;
    text-transform: none;
    letter-spacing: 0px;
    line-height: 1.45;
  }

  h5 {
    font-size: floor($headings-font-size * 1.1);
  }
}

body.latepoint-lightbox-active {
  .latepoint-lightbox-w {
    display: grid;
  }
}