.modal-container {
  display: flex;
  flex-direction: column;

  background: #FFF;
  border: 0.1rem solid #b5b5b5;
  position: fixed;
  top: 10rem;
  left: 52rem;

  width: 100rem;
  height: auto;
  border-radius: 0.5rem;

  z-index: 100;
}

.modal-container header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.1rem solid #E5E5E5;
  padding: 2rem;

  color: #3c3c3c;
}

.modal-container header button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 3rem;
  border: 0;
  transition: 0.2s ease-out;
}

.modal-container header button:hover {
  background: #E5E5E5;
}

.modal-container main {
  display: flex;
  flex-direction: column;
  padding: 2rem;

  color: #3c3c3c;
}

.modal-container footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem;

  border-top: 0.1rem solid #E5E5E5;
}