.alert-container {
    position: fixed;
    top: 59px;
    right: 5px;
    z-index: 1000;
}

.custom-alert {
    position: relative;
    padding: 10px 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
    display: flex;
    align-items: flex-start;
    min-width: 210px;
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s ease;
}

.custom-alert.hide {
    transform: translateX(100%);
    opacity: 0;
}

.alert-success {
    background-color: #d8fde1;
    color: #42a942;
}

.alert-error {
    background-color: #f8d7da;
    color: #b34045;
}

.alert-warning {
    /* background-color: #FF9800; */
    /* background-color: #fefefe; */
    color: #eeb335;
    background-color: #fff3cd;
}

.alert-info {
    /* background-color: #2196F3; */
    color: #4091d7;
    background-color: #d1ecf1;
}

.alert-icon {
    margin-right: 15px;
    font-size: 24px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight:600;
    letter-spacing: 0.03rem;
    /* margin-bottom: 5px; */
}

.alert-message {
    font-size: 14px;
    margin-bottom: 0.2rem;
    letter-spacing: 0.03rem;
}

.alert-close {
    margin-left: 15px;
    cursor: pointer;
    font-size: 20px;
    opacity: 0.8;
    margin-top: -0.3rem;
}

.alert-close:hover {
    opacity: 1;
}

.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    width: 100%;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

/* .alert-progress.success {
    background-color: rgb(160, 218, 67);
}
.alert-progress.warning {
    background-color: rgb(248, 206, 116);
}
.alert-progress.info {
    background-color: rgba(62, 159, 238, 0.952);
}
.alert-progress.error {
    background-color: rgba(243, 56, 56, 0.925);
}
.alert-progress-bar {
    height: 100%;
    background-color: rgba(252, 252, 252, 0.925);
    width: 100%;
    animation: progress 23s linear forwards;
} */
 .alert-progress-bar {
    height: 100%;
    width: 0%;
    animation: sweet_progress 3s linear forwards;
}

/* Remove the separate progress background classes and apply colors directly to the bar custom-alert alert-error*/
.alert-success .alert-progress-bar {
    background-color: #40c58e; /* Green for success */
}

.alert-error .alert-progress-bar {
    background-color: #F44336; /* Red for error */
}

.alert-warning .alert-progress-bar {
    background-color: #FF9800; /* Orange for warning */
}

.alert-info .alert-progress-bar {
    background-color: #2196F3; /* Blue for info */
}
@keyframes sweet_progress {
    from { width: 0%; }
    to { width: 100%; }
}