/* Popup styling */ .popup_licensekey { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #064b70; padding: 30px; border-radius: 8px; /* Rounded corners */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 1000; animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in animation */ } .popup_licensekey.show { display: block; } .popup-content { position: relative; } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 24px; /* Larger close button */ color: #333; cursor: pointer; transition: color 0.3s; /* Smooth color transition */ height: 1rem; width: 1rem; } .close-btn:hover { color: #e74c3c; /* Change color on hover */ } .blur-background { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Slightly darker background */ z-index: 999; animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in animation */ } /* Fade-in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Style for the form inside the popup */ .popup_licensekey form { display: flex; flex-direction: column; } .popup_licensekey input[type="file"] { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; } .popup_licensekey button { background-color: #3498db; /* Blue button */ color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; /* Smooth background color transition */ } .popup_licensekey button:hover { background-color: #2980b9; /* Darker blue on hover */ } .message { margin-top: 15px; font-size: 16px; color: #e74c3c; /* Error color */ }