#myLogin.modal {
  box-sizing: border-box;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

#myLogin.modal.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
}

#myLogin .modal-dialog {
  width: 100% !important;
  max-width: 600px !important;
  max-height: calc(100vh - 32px);
  margin: auto !important;
}

#myLogin .modal-content {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 0 !important;
}

#myLogin .modal-header,
#myLogin .modal-footer,
#myLogin .md-login-tab-btn,
#myLogin .md-login-input,
#myLogin .md-login-button,
#myLogin .btn,
#myLogin .close {
  border-radius: 0 !important;
}

#myLogin .modal-title {
  font-size: clamp(20px, 2.5vw, 26px) !important;
  line-height: 1.25 !important;
}

#myLogin .md-login-wrapper {
  margin: 16px auto !important;
}

#myLogin .md-login-tab-btn,
#myLogin .md-login-button {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

@media (max-width: 767px) {
  #myLogin .modal-body {
    padding: 16px;
  }

  #myLogin .md-login-wrapper {
    margin: 0 auto !important;
  }

  #myLogin .md-login-tabs {
    gap: 4px;
    margin-bottom: 20px;
  }

  #myLogin .md-login-tab-btn {
    min-height: 48px;
    padding: 8px 6px;
    font-size: 13px !important;
  }

  #myLogin .md-login-button {
    min-height: 44px;
  }

  #myLogin .modal-footer {
    padding: 12px 16px;
  }
}