/* Modern Alert Styles */
.alert-simple {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    transition: 0.5s;
    cursor: pointer;
}

.alert-simple>.start-icon {
    margin-right: 10px;
    min-width: 20px;
    text-align: center;
    font-size: 20px;
    display: inline-block;
}

.alert-simple .close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}

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

/* Success Alert */
.alert-simple.alert-success {
    border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12);
    box-shadow: 0px 0px 2px #259c08;
    color: #0ad406;
}

.alert-simple.alert-success:hover {
    background-color: rgba(7, 149, 66, 0.35);
}

.alert-simple.alert-success .greencross {
    font-size: 18px;
    color: #25ff0b;
}

/* Info Alert */
.alert-simple.alert-info {
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12);
    box-shadow: 0px 0px 2px #0396ff;
    color: #0396ff;
}

.alert-simple.alert-info:hover {
    background-color: rgba(7, 73, 149, 0.35);
}

.alert-simple.alert-info .blue-cross {
    font-size: 18px;
    color: #0bd2ff;
}

/* Warning Alert */
.alert-simple.alert-warning {
    border: 1px solid rgba(241, 142, 6, 0.81);
    background-color: rgba(220, 128, 1, 0.16);
    box-shadow: 0px 0px 2px #ffb103;
    color: #ffb103;
}

.alert-simple.alert-warning:hover {
    background-color: rgba(220, 128, 1, 0.33);
}

.alert-simple.alert-warning .warning {
    font-size: 18px;
    color: #ffb40b;
}

/* Danger/Error Alert */
.alert-simple.alert-danger {
    border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
    box-shadow: 0px 0px 2px #ff0303;
    color: #ff0303;
}

.alert-simple.alert-danger:hover {
    background-color: rgba(220, 17, 1, 0.33);
}

.alert-simple.alert-danger .danger {
    font-size: 18px;
    color: #ff0303;
}

/* Primary Alert */
.alert-simple.alert-primary {
    border: 1px solid rgba(6, 241, 226, 0.81);
    background-color: rgba(1, 204, 220, 0.16);
    box-shadow: 0px 0px 2px #03fff5;
    color: #03d0ff;
}

.alert-simple.alert-primary:hover {
    background-color: rgba(1, 204, 220, 0.33);
}

.alert-simple.alert-primary .alertprimary {
    font-size: 18px;
    color: #03d0ff;
}

/* Alert border indicator */
.alert-simple:before {
    content: '';
    position: absolute;
    width: 0;
    height: 20px;
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

/* Close icon blink animation */
.alert-simple .fa-times,
.alert-simple .bi-x {
    animation: blink-1 2s infinite both;
}

/* Blinking animation */
@keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

/* Font Awesome animations */
.faa-tada.animated {
    animation: tada 2s linear infinite !important;
}

.faa-shake.animated {
    animation: shake 2s linear infinite !important;
}

.faa-flash.animated {
    animation: flash 2s linear infinite !important;
}

.faa-pulse.animated {
    animation: pulse 2s linear infinite !important;
}

.faa-bounce.animated {
    animation: bounce 2s linear infinite !important;
}

@keyframes tada {
    0% {
        transform: scale(1);
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes flash {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}