/* CustomAlert.css */

.alert-hub-container {
    --bg-primary: #007bff;
    --bg-secondary: #6c757d;
    --bg-success: #28a745;
    --bg-danger: #dc3535;
    --bg-warning: #ffc107;
    --bg-info: #17a2b8;
    --bg-light: #f8f9fa;
    --bg-dark: #343a40;
    --bg-muted: #6c757d;
    --bg-white: #fff;
    position: fixed;
    /* top: 20px;
    right: 20px; */
    padding: 10px;
    z-index: 99999;
}

.alert-hub-container.top-right {
    top: 20px;
    right: 20px;
}

.alert-hub-container.bottom-right {
    bottom: 20px;
    right: 20px;
}

.alert-hub-container.top-left {
    top: 20px;
    left: 20px;
}

.alert-hub-container.bottom-left {
    bottom: 20px;
    left: 20px;
}

.alert-hub {
    background-color: #f0f0f0;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* opacity: 1; */
}

.fade-in {
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

.fade-out {
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOutOpacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* Apply the slide-in animation to an element */

.slide-in {
    animation: slideIn 0.5s ease-in-out;
}


/* Keyframes animation for general slide-in */

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slideInLeft 0.5s linear;
}

.slide-out-left {
    animation: slideOutToLeft 0.5s linear;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.slide-in-right {
    animation: slideInRight 0.5s linear;
}

.slide-out-right {
    animation: slideOutToRight 0.5s linear;
}

@keyframes slideInRight {
    0% {
        transform: translateX(200%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(200%);
        opacity: 0;
    }
}

.alert-hub {
    display: flex;
    justify-content: space-evenly;
}

.alert-hub h2 {
    margin: 0;
    /* font-size: 18px; */
    font-size: medium;
}

.alert-hub p {
    max-lines: 3;
    margin: 5px 0;
    font-size: small;
    -webkit-line-clamp: 3;
}

.alert-hub svg {
    font-weight: bolder;
    cursor: pointer;
}

.alert-hub.primary {
    background-color: var(--bg-primary);
    color: white;
}

.alert-hub.info {
    background-color: var(--bg-info);
    color: white;
}

.alert-hub.success {
    background-color: var(--bg-success);
    color: white;
}

.alert-hub.warning {
    background-color: var(--bg-warning);
}

.alert-hub.error,
.alert-hub.danger {
    background-color: var(--bg-danger);
    color: white;
}

.alert-hub.dark {
    background-color: var(--bg-dark);
    color: white;
}


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
    .alert-hub-container {
        max-width: 80%;
    }
    .alert-hub-container.top-right {
        top: 20px;
        right: 0px;
    }
    .alert-hub-container.bottom-right {
        bottom: 20px;
        right: 0px;
    }
    .alert-hub-container.top-left {
        top: 20px;
        left: 0px;
    }
    .alert-hub-container.bottom-left {
        bottom: 20px;
        left: 0px;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .alert-hub-container {
        max-width: 40%;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .alert-hub-container {
        max-width: 30%;
    }
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .alert-hub-container {
        max-width: 30%;
    }
}


/* Extra extra large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {
    .alert-hub-container {
        max-width: 20%;
    }
}