@import "font.css";
/* rsvp */
.rsvp{
  padding: 3em 0;
  @media (max-width: 767px) {
    padding: 4em 0;
  }
  @media (max-width: 767px) {
    padding: 2.5em 0;
  }
}
.thankyou-componentwrapper, .wishes-componentwrapper {
  box-shadow: none !important;
  margin: 0 auto;
  width: 90%;

  @media (max-width: 480px) {
    max-width: 600px;
    width: 80%;
  }
}
  .wishes-componentwrapper{
    max-width: 660px;
    @media (max-width: 480px) {
      max-width: 600px;
    }
  }
  .thankyou-componentwrapper{
    min-width: 770px;
    @media (max-width: 767px) {
      min-width: 0;
    }
  }
.thankyou-component, .wishes-component {
  z-index: 1;
  position: relative;

  display: flex;
  flex-direction: column;

  border: none;

  min-height: 40vw;
  max-width: 1200px;

  margin: 0 auto;
  
  box-shadow: none !important;


  padding: 2% 10%;

  @media (max-width: 767px) {
    padding: 10% 8%;
    min-height: 0;
    height: auto;
  }
  @media (max-width: 480px) {
    max-width: 600px;
    text-align: center;
    padding: 10% 8%;
    min-height: 0;
  }

}
.thankyou-component{
  background-image: url("../aset/rsvpsummary-2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  @media (max-width: 767px) {
    background-size: cover;
  }
  @media (max-width: 670px) {
    padding: 8% 7%;
  }
  @media (max-width: 480px) {
    padding: 16% 8%;
    background-image: url("../aset/rsvpsummary-2-xs.svg");
    background-size: cover;
  }
}
.wishes-component{
  padding: 0% 8%;
  justify-content: center;
  background-color: #4f5b6c;
}
.rsvpsummary-wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;

  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  @media (max-width: 1600px) {
    top: 45%;
  }
  @media (max-width: 1400px) {
    top: 50%;
  }
  @media (max-width: 767px) {
    position: relative;
    transform: translate(-50%);
    width: auto;
  }
  @media (max-width: 480px) {
    display: block;
    transform: translate(-50%,-3%);
  }
}
.backbawah{
  z-index: -5;
  background-image: url("../aset/rsvpsummary-2-xs.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-size: cover;

  height: 10em;
  width: 100%;

  display: none;
  @media (max-width: 767px) {
    display: block;
    margin: -4em auto 0;
  }
  @media (max-width: 480px) {
    display: block;
    margin: -9em auto 0;
  }
}
/* .backkanan{
  z-index: -5;
  background-image: url("../aset/rsvp-2/rsvpsummary-2-right.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-size: cover;

  height: 10em;
  width: 100%;
  margin: -7em auto 0;
  @media (max-width: 480px) {
    display: none;
  }
} */
.modal-body-subtitle{
  display: block;
  @media (max-width: 670px) {
    display: none;
  }
  @media (max-width: 480px) {
    display: none;
  }
}
.title670-wrapper{
  display: none;
  @media (max-width: 670px) {
    display: block;
  }
  @media (max-width: 480px) {
    display: none;
  }
}
.rsvptitle, .summarytitle, .summarytitle670{
    text-transform: uppercase;
    font-size: 3em;
    font-family: "chillen" !important;
    letter-spacing: 3px;
    color: #fff;
}
.summarytitle, .summarytitle670{
    font-size: 2.5em;
    margin-bottom: 0.3em;
    white-space: nowrap;
    @media (max-width: 925px) {
      font-size: 2em;
      margin-bottom: 0.5em;
    }
    @media (max-width: 767px) {
      font-size: 2.3em;
      white-space: normal;
    }
    @media (max-width: 670px) {
      border-bottom: 1px solid #b6b6b6;
      padding-bottom: 0.3em;
    }
    @media (max-width: 480px) {
      border: none;
      padding-bottom: 0;
      font-size: 2em;
    }
}
.rsvptitle{
  text-align: center;
  font-size: 3.2em;
  margin-top: 1em;
  @media (max-width: 767px) {
    font-size: 2.2em;
  }
}
.rsvpnametitle, .rsvpname{
  color: #fff;
  font-family: 'Baskerville Normal';
  font-size: 1em;
  text-transform: uppercase;
  @media (max-width: 925px) {
    font-size: 1em;
  }
  @media (max-width: 767px) {
    font-size: 24px;
    text-transform: none;
  }
  @media (max-width: 480px) {
    font-size: 4.5vw;
    letter-spacing: 1px;
    text-transform: none;
  }
}
.fullnametext {
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  text-transform: capitalize;
  line-height: 1;
  margin-bottom: 1em;

  text-align: center;
  color: #bebebe;
  margin-top: 0.4em;
}
.rsvppoint{
  text-transform: uppercase;
  color: #fff;
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
  font-size: 1.2em;
  @media (max-width: 480px) {
    padding: 0 20px;
    font-size: 3.6vw;
  }
}
.rsvpanswer{
  font-size: 0.9em;
  color: #fff;
  font-family: "Average", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  padding-left: 20px;
  @media (max-width: 767px) {
    font-size: 1em;
  }
  @media (max-width: 670px) {
    padding-left: 0;
  }
  @media (max-width: 480px) {
    font-size: 0.8em;
    padding-left: 0;
  }
}

.wishes-title{
    font-size: 11px !important;
    color: #a9a9a9 !important;
    margin-bottom: 2px;
    margin-top: 6px;
}

/* logo on top */
.initial-wrapper {
  width: 100%;
  height: 45px;
  display: none;
  @media (max-width: 480px) {
    display: block;
    height: 8vw;
  }
}
/* name below */
.rsvpsum-p-wrapper{
  display: none;
  font-family: "Average Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #727272;
  margin-top: -5px;
  z-index: 5;
  font-size: 4vw;
  @media (max-width: 480px) {
    display: block;
  }
}
/* QR Code image */
.modal-qrcode-wrapper{
  position: relative;
  width: 100%;

  display: flex;
  justify-content: end;
  align-items: flex-end;

  margin-left: 10vw;
  @media (max-width: 1200px) {
    margin-left: 7vw;
  }
  @media (max-width: 1100px) {
    margin-left: 5vw;
  }
  @media (max-width: 1000px) {
    margin-left: 4vw;
  }
  @media (max-width: 925px) {
    margin-left: 8vw;
  }
  @media (max-width: 767px) {
    flex-direction: column;
    margin-left: 10vw;
  }
  @media (max-width: 670px) {
    margin-left: 10%;
    padding-bottom: 5%;
  }
  @media (max-width: 600px) {
    margin-left: 5%;
  }
  @media (max-width: 480px) {
    flex-direction: column;
    padding: 10% 0 19%;
    justify-content: center;
    align-items: center;

    background-image: url("../aset/qrcodebackground-1.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    margin-left: 0;
    padding-bottom: auto;
  }
}
.modal-qrcode-wrapper::before{
  content: 'JUL';
  position: absolute;
  bottom: 4px;
  left: 8px;

  font-size: 3vw;
  font-family: "Average Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #FFF;
  display: none;
  @media (max-width: 480px) {
    display: block;
  }
}
.modal-qrcode-wrapper::after{
  content: '2025';
  position: absolute;
  bottom: 4px;
  right: 8px;

  font-size: 3vw;
  font-family: "Average Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #FFF;
  display: none;
  @media (max-width: 480px) {
    display: block;
  }
}
.modal-qrcode {


  overflow: hidden;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0.2em;

  max-width: 370px;
  width: 27vw;
  height: auto;
  @media (max-width: 1200px) {
    width: 30vw;
  }
  @media (max-width: 780px) {
    width: 33vw;
  }
  @media (max-width: 767px) {
    max-width: 240px;
    width: 100%;
  }
  @media (max-width: 480px) {
    max-width: 300px;
    width: 100%;
  }
}
.modal-qrcode img {
  width: 120% !important;
  height: 120% !important;
  object-fit: contain !important;
  object-position: center;
}
/* QR Code download buttton */
  .downloadqr-btn, .submitrsvp-btn{
      outline: none;
      border: none;
      
      text-align: center;
      background-color: #fff;
      color: #4F5B6C;
      padding: 10px 32px;
      text-transform: uppercase;

      font-family: "Average", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.05em;
      white-space: nowrap;
  }
    @media (max-width: 480px) {
        .downloadqr-btn, .submitrsvp-btn{
          padding: 11px 40px;
        }
    }
  .downloadqr-btn{
    margin-top: 1em;
    @media (max-width: 925px) {
      font-size: 0.8em;
    }
    @media (max-width: 760px) {
      margin-top: 1.5em;
    }
    @media (max-width: 670px) {
      margin-top: 2em;
    }
    @media (max-width: 480px) {
      display: none;
      margin-top: 1em;
    }
  }
  .submitrsvp-btn{
    margin-bottom: 4em;
    @media (max-width: 480px) {
      margin-bottom: 2.5em;
    }
  }
/* confirmation and attending pax */
.confandattpax {
  display: block;
  @media (max-width: 480px) {
    display: flex;
    justify-content: center;
  }
}
.rsvpsummary-point{
  display: flex;
  @media (max-width: 670px) {
    align-items: flex-start;
    flex-direction: column;
  }
  @media (max-width: 480px) {
    display: block;
  }
}

.submitrsvp-btn p{
    font-size: 16px;
}
.changersvp-btn {
  margin-top: 1.6em;

  text-transform: uppercase;
  color: #fff;
  font-family: "Bacasime Antique", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.95em;
  white-space: nowrap;
}
.changersvp-btn span{
  color: #fff;
  white-space: nowrap;
  font-family: "Average", serif;
  font-weight: 400;
  font-style: normal;
  display: block;
}
.modal-body-submit{
  margin-top: 1.6em;
  display: flex;
  justify-content: center;
}

/* #region Form CSS */
.form-group {
    position: relative;
    border-bottom: 1px solid #b6b6b6;
}
  .form-group.focus {
    border-bottom: 2px solid #937259 !important;
  }
  .form-group .input-title {
    position: absolute;
    max-width: calc(100% - (2 * 8px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    left: 0px;
    top: 13px;
    padding: 0 16px;
    transition: 250ms;
    user-select: none;
    pointer-events: none;
    z-index: 1;
    font-size: 16px;
    color: #6c6c6c;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
  }
  .form-group .input-value,
  .form-group .date-value {
    box-sizing: border-box;
    height: 50px;
    border-radius: 4px 4px 0 0;
  }
  .form-group .input-value:focus,
  .form-group .date-value:focus {
    background-color: #ebebeb;
  }
  .form-group .input-value-phone {
    padding-top: 21px;
    padding-bottom: 8px;
    border-radius: 4px 4px 0 0;
  }
  .form-group .input-role {
    box-sizing: border-box;
    height: 50px;
    border-radius: 4px 4px 0 0;
    padding: 0 16px;
  }
  .form-group .textarea-value {
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
  }
  .form-group .textarea-value:focus {
    background-color: #ebebeb;
  }
  .form-group.focus .input-title {
    color: #937259;
  }
  .form-group.select-title {
    background-color: transparent;
  }
  .form-group.select-title select {
    border: none;
  }
  .form-group.active .input-title {
    top: 0;
    left: 0;
    font-size: 11px !important;
    padding: 6px 16px 0 0;
    color: #a9a9a9 !important;
  }
  .form-group.active .input-value,
  .form-group.active .textarea-value {
    padding-top: 20px;
    padding-bottom: 6px;
  }
  .form-group.active .date-value {
    padding-top: 20px;
    padding-bottom: 6px;
    padding-left: 14px;
  }
  
.form-group {
    width: 100%;
    label{
        display: block;
        width: 100%;
        font-size: 14px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: #937259;
        text-align: left;
    }
    select{
        color: black;
        width: 100%;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 16px;
        outline: none !important;
        background-color: transparent !important;
        color: #e0e0e0;
        appearance: none;
    }
  
    textarea{
        resize: vertical;
        width: 100%;
        display: block;
        outline: none;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        border: none;
        background-color: transparent;
        color: #e0e0e0;
        min-height: 100px;
        max-height: 200px;
    }
  
    #count{ 
        text-align: right;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 12px;
        color: #6c6c6c;
    }
}
/* #endregion */

/* #region Modal Gallery */
  .image-previous, .image-next {
    position: absolute;
    top: 44%;
    font-size: 26px;
    color: #fff;
    text-shadow: 1px 1px 18px #000;
  }
  .image-previous { 
    left: -10px;
  }
  .image-next { 
    right: -10px;
  }
  .image-preview {
    max-height: 90vh;
    max-width: 100%;
    height: auto;
  }
  .modal#modalGallery{
    padding: 0px !important;
    box-shadow: none !important;
    background: transparent !important;
  }
/* #endregion */

/* #region RSVP summary */
  .modal-body-summary-list{
    margin-bottom: 1.2em;
    @media (max-width: 480px) {
      margin: 1.2em;
    }
  }
  .modal-body-summary-list-title{
    @media (max-width: 480px) {
      margin-bottom: 0.4em;
    }
  }
  .attpaxtitle{
    @media (max-width: 670px) {
      margin-top: 1em;
    }
    @media (max-width: 480px) {
      margin-top: 0;
    }
  }
/* #endregion */