.popup-sm{
  width: 20vw;
  height: 20vh;
  left: 40vw;
  top: 40vh;
}
.popup-md{
  width: 50vw;
  height: 50vh;
  top: 25vh;
  left: 25vw;
}
.popup-lg{
  width: 80vw;
  height: 80vw;
  top: 10vh;
  left: 10vw;
}

.popup{
position: absolute;
padding: 20px;
background-color: white;
overflow: scroll;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
margin: 0px !important;
box-sizing: border-box;
}

.popup-close-me{
width: 30px;
height: 30px;
font-size: 20px;
cursor: pointer;
color: gray;
line-height: 20px;
position: absolute;
top: 5px;
right: 10px;
background-color: #f2f2f2;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}

.popup-bkgd{
position: fixed;
top:0;
height: 100vh;
width: 100vw;
background: rgba(20,20,20,.3);
}