/* *,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */

/* body {
  background: #ea1d6f;
  font-size: 12px;
} */

/* body,
button,
input {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
} */

.modal textarea {
  --input-height: unset;
  --input-line-height: unset;
  --input-vpadding: unset;
  display: unset;
  height: unset;
  padding: unset;
  border: unset;
  outline: unset;
  color: unset;
  max-width: unset;
  background-color: unset;
  border: unset;
  -webkit-transition: unset;
  transition: unset;
  border-radius: unset;
}

.modal textarea:focus {
  color: #fff;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  border: none;
  border-bottom: 1px solid #666;
}

.modal textarea:-webkit-autofill,
.modal textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: unset;
  -webkit-transition: unset;
  transition: unset;
}

.modal textarea {
  /* font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px; */
  min-width: 375px;
  min-height: 80px;
  max-height: 200px;
}

.modal img,
.modal p,
.modal pre,
.modal table,
.modal blockquote,
.modal figure,
.modal figcaption,
.modal ul,
.modal ol,
.modal dl,
.modal form,
.modal fieldset,
.modal input,
.modal textarea,
.modal select,
.modal button,
.modal .btn,
.modal .video-container,
.modal .ss-custom-select {
  margin-bottom: unset;
}

.modal .btn,
.modal button,
.modal input[type="submit"],
.modal input[type="reset"],
.modal input[type="button"] {
  --btn-height: unset;

  display: unset;
  font-family: unset;
  font-weight: unset;
  font-size: unset;
  text-transform: uppercase;
  letter-spacing: unset;
  height: unset;
  line-height: unset;
  padding: unset;
  margin: unset;
  color: unset;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: unset;
  transition: unset;
  -webkit-font-smoothing: unset;
  -moz-osx-font-smoothing: unset;
  background-color: unset;
  border: unset;
}

.modal .btn:hover,
.modal button:hover,
.modal input[type="submit"]:hover,
.modal input[type="reset"]:hover,
.modal input[type="button"]:hover,
.modal .btn:focus,
.modal button:focus,
.modal input[type="submit"]:focus,
.modal input[type="reset"]:focus,
.modal input[type="button"]:focus {
  background-color: unset;
  border-color: unset;
  color: unset;
  outline: unset;
}

.modal #miniPacket,
.modal #basicPacket,
.modal #standardPacket,
.modal #premiumPacket,
.modal #exclusivePacket {
  display: none;
}

.modal #miniPacket.show,
.modal #basicPacket.show,
.modal #standardPacket.show,
.modal #premiumPacket.show,
.modal #exclusivePacket.show {
  display: flex;
}

.modal {
  display: none;
  position: fixed;
  top: 44px;
  width: 100%;
  height: 100%;
  flex: 0 1 700px;
  margin: auto;
  padding: 10px;
}

.modal.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal .content {
  position: relative;
  background: #333;
  border-radius: 15px;
  padding: 50px;
  display: flex;
  justify-content: space-between;
}


.modal .content-item-left,
.modal .content-item-right {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: fit-content;
}

.modal .content-item-left {
  min-width: 155px;
  margin-right: 50px;
}

.modal .item-header h2 {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 36px;
  margin: 0;
  margin-bottom: 41px;
}

.modal .item-body {
  display: flex;
  flex-direction: column;
  position: relative;
  color: #fff;
  font-size: 20px;
}

.modal .form-item {
  margin-bottom: 20px;
  position: relative;
}

.modal .form-item .errorMessage {
  color: red;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  bottom: -30px;
  left: 5px;
}

.modal .hide {
  display: none;
}

.modal .form-item:last-child {
  float: inline-end;
}

.modal .checkbox {
  display: flex;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.modal .checkbox input {
  min-width: 20px;
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 0;
  margin-right: 15px;
  cursor: pointer;
}

.modal .form-item-input {
  width: 100%;
  padding: 10px 5px;
  background: none;
  border: none;
  border-bottom: 1px solid #666;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.modal .form-item-input::placeholder {
  color: #666;
}

.modal .input-error {
  border-bottom: 1px solid red;
}

.modal .form-item-input:focus {
  border-bottom-color: #fff;
  transition: .3s;
}

.modal .form-item-submit {
  background: none !important;
  border: none !important;
  color: #fed400 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  outline: none !important;
  padding: 5px !important;
}

.modal .form-item-submit:hover {
  color: #fff;
  cursor: pointer;
  transition: .3s;
}

@media screen and (max-width: 600px) {
  .modal.show {
    z-index: 100;
  }

  .modal .content {
    flex-direction: column;
    padding: 20px;
  }

  .modal .item-body-item.left {
    margin-bottom: 30px;
    padding: 0;
  }

  .modal .item-header h2 {
    flex-direction: row;
  }

  .modal .item-body {
    margin-right: 12px;
  }

  .modal .form-item:first-child {
    margin-top: 15px;
  }

  .modal .form-item {
    margin-bottom: 15px;
  }

  .modal .item-header h2 {
    font-size: 26px;
    margin-bottom: 0px;
    white-space: break-spaces;
  }

  .modal .item-body {
    font-size: 16px;
  }

  .modal textarea {
    min-width: unset;
    min-height: 160px;
  }

  .modal .checkbox {
    font-size: var(--text-sm);
  }
}