/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.bb-bag-icon {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.bb-bag-icon .fa-trash-alt {
    width: 20px;
}

.bb-bag-icon .submit-btn {
    padding: 10px 15px;
    background: #fff;
}

.bb-bag-icon a.submit-btn {
    font-size: 1em;
    width: auto;
    margin: 0 16px 0 0;
    display: flex;
    padding: 5px 15px;
    border: 2px solid #756b95;
    color: #756b95!important;
    border-radius: 10px;
    transition: all 0.3s ease;
    line-height: 2;
    cursor: pointer;
}

.bb-bag-icon a.submit-btn:hover {
    background: #756b95;
    color: #fff!important;
}

.bb-loading svg {
    display: none;
}

.bb-loading-icon {
    display: none;
}

.bb-loading .bb-loading-icon {
    display: block;
}

.bb-loading-icon {
    animation-name: bbspinner;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


/* add to bag styles */

.bb-add-to-bag {
    width: 70px;
    height: 70px;
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 10px;
}

.bb-add-to-bag svg {
    width: 46px;
    height: 44px;
    fill: #fff;
}



.bb-add-to-bag.bb-in-bag {
    background: #92ce6f;
}


.bb-add-to-bag:not(.bb-in-bag):hover {
    background: purple;
}

/* remove from bag styles */
.bb-remove-from-bag svg {
    width: 30px;
    height: 35px;
    padding: 5px 0;
    fill:  #756b95;
}

.bb-remove-from-bag:hover svg {
    fill:  #fff;
}

.bb-list-header {
    position: relative;  
}

.bb-bag-filter-button {
    position: absolute;
    top: 25px;
    right: 20px;
    padding: 10px 20px;
    background: #756b95;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}
.bb-bag-filter {
    display: none;
}
.bb-bag-filter.active {
    display: block;
    float: right;
    position: absolute;
    top: 100px;
    right: 40px;
    padding: 10px;
}

.bag-count {
    position: absolute;
    left: 20px;
    top: 25px;
    padding: 10px;
}

@media(min-width: 768px) {
    .bb-bag-filter-button {
        top: 50px;
        right: 40px;
    }
    .bag-count {
        top: 50px;
        left: unset;
        right: 140px;
    }
}



@keyframes bbspinner {
    0% {
        transform: rotate(0);
    }


    100% {
        transform: rotate(360deg);
    }
}


/* notify overrides */

.notifyjs-corner {
    z-index: 9999 !important;
}