:root {
  --font-size-vh: 1vh;
}

#createStoreModal {
  font-family: "Poppins", sans-serif !important;
  background-color: white !important;
}

@media (max-width: 767px) {
  #createStoreModal .modal-content {
    height: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  #createStoreModal .modal-content {
    height: 100vh !important;
  }
}

#create-store-modal-form-submit {
  font-size: calc(1.7 * var(--font-size-vh)) !important;
  width: 100%;
  margin-bottom: 1.8vh !important;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem !important;
  gap: 3vh;
}

.country-select {
  width: 100%;
}

.country-select input {
  width: 100%;
  border: 1px solid #e6eaef;
  border-radius: 0.25rem;
  padding-top: 0.9em;
  padding-right: 1em !important;
  padding-bottom: 0.9em;
  padding-left: 4em !important;
}

.country-select .country-list,
.country-select .flag-dropdown {
  width: 100%;
}

.country-select .selected-flag {
  padding-left: 1rem;
  width: 100% !important;
}

#create-store-modal-form-login {
  font-size: calc(2 * var(--font-size-vh)) !important;
}

#create-store-modal-header {
  margin-bottom: 3vh !important;
}

#createStoreModalLabel {
  font-size: calc(3.5 * var(--font-size-vh)) !important;
  margin-bottom: 3vh !important;
}

#create-store-modal-sublabel {
  font-size: calc(2 * var(--font-size-vh)) !important;
  font-weight: 400;
}

#create-store-form-captcha {
  width: 100% !important;
  margin-bottom: 2.5vh !important;
}

#create-store-modal-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5.5vh !important;
  gap: 3vh !important;
  animation-delay: 0.25s;
  background: white;
  border-radius: 16px;
}

#create-store-modal-card-image {
  animation-delay: 0.25s;
  border-radius: 8px;
  width: 24vh;
}

#create-store-modal-card-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1vh;
  width: 100%;
  animation-delay: 0.25s;
}

#create-store-modal-card-description div {
  width: 100%;
  height: 0.7vh;
  animation-delay: 0.25s;
}

#create-store-modal-card-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-delay: 0.25s;
  background-color: #071e3f99;
  border-radius: 4px;
  height: 4.5vh;
  font-size: calc(1.8 * var(--font-size-vh));
  color: white;
}

#create-store-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.8vh;
  font-size: calc(2 * var(--font-size-vh));
}

.create-store-form-field {
  margin-bottom: 2vh !important;
  width: 100% !important;
}

.form-label {
  font-size: calc(1.8 * var(--font-size-vh)) !important;
  margin-bottom: 1vh !important;
}

.form-control {
  font-size: clamp(0.935rem, 1.3vh, 1.3rem) !important;
}

.invalid-feedback {
  font-size: calc(1.5 * var(--font-size-vh)) !important;
}

.start-store-form .btn {
  font-size: clamp(0.935rem, 1.3vh, 1.3rem) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

#create-store-modal-images {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1vh;
  gap: 1vh;
}

#create-store-modal-images img {
  height: 6vh;
  width: auto;
  margin-bottom: 5vh;
}

@media (min-width: 576px) {
  #create-store-form {
    width: 75% !important;
  }

  #create-store-modal-header {
    width: 75% !important;
  }
}

@media (max-width: 575px) {
  .start-store-form:has(.border) .border {
    border: 0 !important;
    box-shadow: none;
    background-color: transparent !important;
  }

  .start-store-form .start-store {
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0.3rem !important;
    justify-content: center;
    width: fit-content;
  }

  #create-store-modal-header,
  #createStoreModalHeader {
    width: 100% !important;
  }
}

@media (min-width: 2560px) {
  #create-store-form,
  #createStoreModalHeader {
    width: 50% !important;
  }

  #create-store-modal-header {
    width: 50% !important;
  }
}

@media (min-width: 768px) {
  .ml-lg-custom {
    margin-left: 24px !important;
  }

  .px-lg-custom {
    padding-left: 112px !important;
    padding-right: 112px !important;
  }
}