.modalOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modalContent { background-color: #fff; padding: 20px; border-radius: 8px; max-width: 600px; width: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: relative; animation: fadeIn 0.3s ease; } .closeButton { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer; } h2 { font-size: 24px; margin-bottom: 15px; color: #333; } p { margin: 10px 0; font-size: 16px; color: #555; } .removeButton, .downloadButton { background-color: #ff4d4d; /* Red for remove */ border: none; color: white; padding: 10px 20px; margin-top: 15px; font-size: 16px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; } .downloadButton { background-color: #FFA500; /*background-color: #4CAF50;*/ } .removeButton:hover { background-color: #ff1a1a; } .downloadButton:hover { background-color: #e69500; /*background-color: #e59400;*/ /*background-color: #45a049;*/ } .pageButton { padding: 10px 15px; margin: 5px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; transition: background-color 0.2s; } .pageButton:hover { background-color: #f0f0f0; } .currentPage { font-size: 16px; margin: 0 10px; } .buttons { display: flex; justify-content: center; margin-top: 80px; } .buttonAccept, .buttonDecline { padding: 10px 30px; font-size: 18px; border: none; border-radius: 5px; margin: 0 10px; cursor: pointer; transition: background-color 0.3s; } .buttonAccept { /*background-color: #FFA500;*/ background-color: #4CAF50; color: white; } .buttonDecline { background-color: #ff4d4d; color: white; } .buttonAccept:hover { /*background-color: #e69500;*/ background-color: #45a049; } .buttonDecline:hover { background-color: #ff1a1a; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }