#modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
z-index: 9999;
}
#modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
text-align: center;
}
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
z-index: 9999;
}
#loader:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
border: 5px solid #f3f3f3;
border-top-color: #3498db;
animation: spin 2s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}