/* toast bubble*/
.bubble {
    position: fixed;
    padding: 15px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: lighter;
    text-align: center;
    max-width: 100%;
    z-index: 3000;
}



.bubble-top {
    top: 5rem;
    left: 50%;
    transform: translate(-50%, 0);
}

.bubble-middle {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bubble-bottom {
    bottom: 5rem;
    left: 50%;
    transform: translate(-50%, 0);
}

.bubble-block {
    width: 100%;
}

.bubble-sm,
.bubble-md {
    width: 100%;
}

@media (min-width: 576px) {
    .bubble-sm-top {
        top: 5rem;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .bubble-sm {
        width: 300px;
    }

    .bubble-md {
        width: 500px;
    }
}

.bubble > div {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 0.25rem;
    padding: 1rem;
}

.bubble-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.bubble-primary hr {
    border-top-color: #9fcdff;
}

.bubble-primary .bubble-link {
    color: #002752;
}

.bubble-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.bubble-secondary hr {
    border-top-color: #c8cbcf;
}

.bubble-secondary .bubble-link {
    color: #202326;
}

.bubble-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.bubble-success hr {
    border-top-color: #b1dfbb;
}

.bubble-success .bubble-link {
    color: #0b2e13;
}

.bubble-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.bubble-info hr {
    border-top-color: #abdde5;
}

.bubble-info .bubble-link {
    color: #062c33;
}

.bubble-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.bubble-warning hr {
    border-top-color: #ffe8a1;
}

.bubble-warning .bubble-link {
    color: #533f03;
}

.bubble-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.bubble-danger hr {
    border-top-color: #f1b0b7;
}

.bubble-danger .bubble-link {
    color: #491217;
}