* {
  box-sizing: border-box;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.popup.active {
  display: inline-block;
}

.popup-content {
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  height: 640px;
  max-height: 80%;
  min-width: 520px;
  width: 45%;
  border: 1px solid rgb(22, 22, 22);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: top 250ms linear, opacity 200ms linear;
}

.popup-content.active {
  opacity: 1;
  top: 10% !important;
}

.popup-header {
  display: flex;
  width: 100%;
  height: 10%;
  align-items: center;
  justify-content: space-between;
  padding: 0 2%;
  background-color: rgb(48, 140, 216);
  color: #eee;
}

.popup-body {
  height: 80%;
  padding: 2%;
  overflow-y: auto;
  background-color: #eee;
}

.popup-footer {
  height: 10%;
  padding: 2%;
  display: flex;
  justify-content: flex-end;
  background-color: rgb(233, 233, 233);
}

.btn-close {
  cursor: pointer;
  font-size: 18px;
}