.md5-hash-generator-container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
font-family: Arial, sans-serif;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.md5-hash-generator-container h2 {
color: #333;
font-size: 28px;
margin-bottom: 15px;
text-align: center;
}
.md5-hash-generator-container p {
color: #555;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
text-align: center;
}
.md5-form-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.file-upload-label {
display: inline-block;
background-color: #0073aa; color: white;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.file-upload-label:hover {
background-color: #005177;
}
.file-upload-label input[type="file"] {
display: none; }
.file-name-display {
font-style: italic;
color: #777;
font-size: 14px;
margin-top: 5px;
}
.generate-button {
background-color: #28a745; color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease, opacity 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.generate-button:hover:not(:disabled) {
background-color: #218838;
}
.generate-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
opacity: 0.7;
}
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #0073aa;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin-top: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.md5-result-area {
background-color: #e9f7ef;
border: 1px solid #d4edda;
border-radius: 5px;
padding: 20px;
margin-top: 25px;
text-align: center;
width: 100%;
}
.md5-result-area h3 {
color: #28a745;
font-size: 22px;
margin-bottom: 10px;
}
.md5-result-area code {
display: block;
background-color: #ffffff;
padding: 10px 15px;
border-radius: 5px;
border: 1px dashed #c3e6cb;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
word-break: break-all;
user-select: all; color: #333;
}
.copy-button {
background-color: #007bff; color: white;
padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
margin-top: 15px;
transition: background-color 0.3s ease;
}
.copy-button:hover {
background-color: #0056b3;
}
.error-message {
color: #dc3545; font-weight: bold;
margin-top: 15px;
text-align: center;
}