/**** START OF SMALLER SCREEN ****/

@media only screen and (max-width: 690px) {
    .provelo-box {
        width: 280px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
        background-color: white;
        border-radius: 5px;
        display: flex;
        flex-flow: row nowrap;
        position: fixed;
        bottom: -200px;
        right: 20px;
        z-index: 10000;
    }
    .provelo-box .provelo-box-left {
        width: 20%;
        background-color: ;
        padding: 10px;
    }
    .provelo-box .provelo-box-right {
        width: 80%;
        background-color: ;
        padding: 10px;
    }
    .provelo-box .provelo-box-left .provelo-image {
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .provelo-box .provelo-box-right .provelo-customer-name {
        font-weight: bold;
        font-size: 13px;
    }
    .provelo-box .provelo-box-right .provelo-action {
        font-weight: normal;
        font-size: 12px;
    }
    .provelo-box .provelo-box-right .provelo-product-name {
        font-weight: bold;
        font-size: 13px;
    }
    .provelo-box .provelo-box-right .provelo-time {
        color: rgba(0, 0, 0, 0.5);
        font-size: 11px;
    }
    .provelo-box .provelo-box-right .view-btn {
        padding: 5px;
        font-size: 13px;
        background-color: mediumseagreen;
        color: white;
        position: absolute;
        right: 5px;
        bottom: 5px;
        border-radius: 3px;
    }
}


/**** END OF SMALLER SCREEN ****/


/**** START OF BIGGER SCREEN ****/

@media only screen and (min-width: 690px) {
    .provelo-box {
        width: 280px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
        background-color: white;
        border-radius: 5px;
        display: flex;
        flex-flow: row nowrap;
        position: fixed;
        bottom: -200px;
        right: 20px;
        z-index: 10000;
    }
    .provelo-box .provelo-box-left {
        width: 20%;
        background-color: ;
        padding: 10px;
    }
    .provelo-box .provelo-box-right {
        width: 80%;
        background-color: ;
        padding: 10px;
    }
    .provelo-box .provelo-box-left .provelo-image {
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .provelo-box .provelo-box-right .provelo-customer-name {
        font-weight: bold;
        font-size: 12px;
    }
    .provelo-box .provelo-box-right .provelo-action {
        font-weight: normal;
        font-size: 11px;
    }
    .provelo-box .provelo-box-right .provelo-product-name {
        font-weight: bold;
        font-size: 12px;
    }
    .provelo-box .provelo-box-right .provelo-time {
        color: rgba(0, 0, 0, 0.5);
        font-size: 9px;
    }
    .provelo-box .provelo-box-right .view-btn {
        padding: 5px;
        font-size: 14px;
        background-color: mediumseagreen;
        color: white;
        position: absolute;
        right: 5px;
        bottom: 5px;
        border-radius: 3px;
    }
}


/*** END OF BIGGER SCREEN ****/