.modal {
  padding:0;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.65);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;


/* max-height: calc(100vh - 210px); */
max-height: calc(100vh);
overflow-y: auto;

/* /overflow: scroll; */
}
.modal-content-wrapper {
/* overflow-y: scroll; */
width:auto;
}

.modal-nav {
width:auto;
}
.modal-content {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 0%);
background-color: white;
padding: 1rem 1.5rem;
margin-bottom: 40px;
width: 40rem;
max-width:90%;
/* width:auto; */
border-radius: 0.5rem;
/* overflow-y: scroll; */
}
.modal-nav a {
margin: 10px;
}
/* .close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
} */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal-pros, .modal-cons {
width:auto;
}



.alert {
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}

.alert-danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442;
}

.alert-success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d;
}

.modal-nav {
text-align: center;
}