.modal-form-bg {
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.5); /* make it half transparent */
     position: relative;
     top: 0px;
     z-index: 1;
     display: none;  /* It will remain invisible until you open */
     justify-content: center; /*center horizontally*/
     align-items: center ; /* center vertically */
}

.modal-form-content {
     width:750px;
     /*height:500px;*/
     background-color: white;
     border: 1px solid grey;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 1px;
     padding: 15px;
     top: 50px; /* sets top position of popup relative to top of the page, in this case the popup is shifted down */
     position: absolute; /* relative to top of page */
 }

.modal-form-content-sm {
     width:350px;
     /*height:500px;*/
     background-color: white;
     border: 1px solid grey;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 1px;
     padding: 15px;
     top: 50px; /* sets top position of popup relative to top of the page, in this case the popup is shifted down */
     position: absolute; /* relative to top of page */
 }

.modal-form-title {
     padding-bottom: 20px; /* text padding */
     margin-bottom: 12px; /* div margin under border */
     border-bottom: 3px solid lightgrey; /* div border */
}

.modal-form-non-field-errors {
}

.close-modal-form {
     position: absolute;
     top: 5px;
     right: 14px;
     font-size: 25px;
     transform: rotate(45deg); /* will make + look like a nice x */
     cursor: pointer;
}