.recipeAddedModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    opacity: 0;
    pointer-events: none;
}

.recipeAddedModal.active {
    opacity: 1;
    pointer-events: all;
    transition: 0.5s ease all;
}

.recipeAddedModal .customModalBody {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.bubbleicon {
    position: relative;
    width: 16.25rem;
    height: 16.25rem;
    border-radius: 9999px;
}

.bubbleicon i {
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.customModalBody .fa-times {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 2.5rem;
    cursor: pointer;
}

.bubbleicon .fa-check {
    border: 0.375rem solid white;
    border-radius: 9999px;
    font-size: 2.5rem;
    color: white;
    background: #FF6067;
    padding: 0.625rem;
    position: absolute;
    top: 10%;
    right: -10%;
    left: auto;
}