@-webkit-keyframes modalShow {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0.001%);
            transform: translateY(0.001%);
  }
}@keyframes modalShow {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0.001%);
            transform: translateY(0.001%);
  }
}
.modal {
  top: 0;
  z-index: 1000;
  display: none;
  position: fixed;
  width: 100vw;
  height: 100%;
}

#bannerLoadingBox {
  display: none;
}

.modal-container {
  position: fixed;
  left: 50%;
  top: 50%;
  padding: 20px;
  width: 550px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #ffffff 0 0 no-repeat padding-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1137254902);
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1137254902);
  border: 1px solid #e2e2e2;
  border-radius: 13px;
}

.popup-title {
  font: normal normal bold 17px/26px Poppins;
  color: #39325a;
}

.title-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.title-left img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.title-left svg {
  margin-right: 10px;
}

.title-right {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url(https://static-alter1.vidnoz.com/web/fr/img/magic-animate/winIconClose.webp);
  background-size: cover;
  cursor: pointer;
}

.modal-box {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.modal-box .right-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.error-icon-box {
  margin-right: 20px;
  width: 56px;
  height: 56px;
}

.closeModal {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  width: 156px;
  height: 32px;
  color: #ffffff;
  line-height: 32px;
  background: #6d4dff 0 0 no-repeat padding-box;
  border-radius: 25px;
  text-align: center;
  opacity: 1;
  font: normal normal medium 18px/40px Poppins;
  color: #FFFFFF;
}

.popup-content {
  font: normal normal 300 14px/21px Poppins;
  color: #39325a;
}

.error-title {
  font: normal normal bold 17px/26px Poppins;
  color: #39325a;
}

.success-title {
  font: normal normal bold 17px/26px Poppins;
  color: #000000;
}

.bottom-btns-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  font: normal normal 500 16px/22px Roboto;
  color: #21242C;
}

.modal.share .bottom-btns-box {
  display: none;
}

@media (max-width: 1200px) {
  .modal-container {
    /* animation: modalShow 0.5s ease forwards; */
    /* padding: 0.4rem .4rem .8rem .4rem; */
    border-radius: 3.2vw !important;
    width: 72vw;
    min-width: 72vw;
    position: fixed;
    /* bottom: 0; */
    top: 50%;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .success-title, .error-title {
    font: normal normal bold 4.26vw/6.4vw Poppins;
  }
  .title-left {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .title-left img {
    margin: 0 0 3.2vw 0;
    width: 16.5vw;
    height: 16.5vw;
  }
  .popup-title {
    font: normal normal normal 0.36rem/0.48rem Roboto;
  }
  .popup-title svg {
    width: 0.3rem;
    height: 0.3rem;
  }
  .popup-content {
    width: 100%;
    font: normal normal normal 3.2vw/4.6vw Poppins;
    text-align: center;
    color: #656565;
    margin: 3.2vw 0;
  }
  .bottom-btns-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .modal-container .bottom-btns-box div {
    height: 1rem;
    font: normal normal 500 0.33rem/0.44rem Roboto;
    letter-spacing: 0px;
    color: #CFCFCF;
    width: 100%;
    /* margin: 0.34rem 0 0 0; */
  }
  .modal-container .bottom-btns-box button {
    height: 11.7vw !important;
    width: 100%;
    margin: 0.34rem 0 0 0;
  }
  .closeModal {
    border-radius: 1.6vw;
    font: normal normal 500 4.2vw/6.2vw Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
  }
}
@media (min-width: 1200px) {
  .modal-container {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}