.modal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1000;
}

.modalContent {
 background-color: white;
 padding: 20px;
 border-radius: 5px;
 max-width: 500px;
 width: 90%;
 max-height: 80vh;
 overflow-y: auto;
}

.modalContent ul {
 padding-left: 20px;
}

.modalContent li {
 margin-bottom: 10px;
 line-height: 1.5;
 font-size: 0.9rem;
}

.modalContent li:last-child {
 margin-bottom: 0;
}

.updateTitle {
 background-color: #f5f5f5;
 padding: 10px 15px;
 border-radius: 5px;
 display: inline-block;
 margin-bottom: 15px;
 color: #333;
 font-weight: 00;
}
.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
 cursor: pointer;
}

.close:hover,
.close:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}

.nameList {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.nameLink {
 display: inline-block;
 padding: 5px 10px;
 background-color: #f0f0f0;
 border-radius: 5px;
 text-decoration: none;
 color: #333;
}

.nameLink:hover {
 background-color: #e0e0e0;
}
