﻿#add-to-box-container {
    height: 18vw;
    box-sizing: border-box;
    padding-top: 0.4vw;
    padding-right: 0.6vw;
    padding-left: 0.8vw;
}

#add-to-box {
    background-color: #282828;
    height: 17.1vw;
    border-radius: 2vw;
}

#add-to-box-first-child {
    height: 5.7vw;
    font-size: 0;
    box-sizing: border-box;
    padding-top: 2.3vw;
    padding-right: 3.5vw;
    position: relative;
}

    #add-to-box-first-child::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 0.07vw;
        background-image: linear-gradient(to right, transparent, rgba(128, 128, 128, 0.3), transparent);
    }

    #add-to-box-first-child > div {
        display: inline-block;
        vertical-align: top;
    }

#quantity-container {
    font-size: 0;
    background-color: white;
    border-radius: 3vw;
    width: 7vw;
    height: 1.8vw;
}

    #quantity-container > div {
        display: inline-block;
        vertical-align: top;
        color: black;
    }

.change-quantity {
    width: 2vw;
    height: 2vw;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

#plus-quantity {
    background-image: url('../../images/boxmaker/desktop/product-details/plus.png');
    background-size: 60% 60%;
}

#quantity {
    width: 3vw;
    padding-top: 0.2vw;
}

    #quantity input {
        width: 100%;
        height: 1.3vw;
        font-size: 1.4vw;
        text-align: center;
        font-weight: 500;
        border: none;
    }

#minus-quantity {
    background-image: url('../../images/boxmaker/desktop/product-details/minus.png');
}

#descount-percent {
    background-color: #ed1c24;
    border-radius: 0.5vw;
    text-align: center;
    font-weight: bold;
    font-size: 1.1vw;
    margin-right: 1.6vw;
    width: 2.8vw;
    color: white;
    padding-top: 0.05vw;
    padding-right: 0.1vw;
    padding-bottom: 0.1vw;
}

#price {
    text-decoration: line-through;
    color: #ed1c24;
    font-size: 1.77vw;
    height: 3vw;
    box-sizing: border-box;
    padding-top: 0.8vw;
    padding-right: 5.1vw;
}

#discounted-price {
    height: 3.2vw;
    color: white;
    font-size: 1.47vw;
    font-weight: 400;
    padding-right: 4.4vw;
    padding-top: 0.1vw;
    position: relative;
    box-sizing: border-box;
}

    #discounted-price::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        height: 0.07vw;
        background-image: linear-gradient(to right, transparent, rgba(128, 128, 128, 0.3), transparent);
    }

#add-to-box-btn {
    height: 4vw;
    box-sizing: border-box;
    padding-top: 1.1vw;
    padding-right: 3.5vw;
}

    #add-to-box-btn > div {
        height: 2.6vw;
        width: 11.5vw;
        border-radius: 2vw;
        color: white;
        font-weight: 500;
        font-size: 1.1vw;
        background-color: #00b262;
        font-size: 1.45vw;
        position: relative;
    }

    #add-to-box-btn:not(.disabled) > div {
        text-align: center;
        cursor: pointer;
    }

    #add-to-box-btn.disabled {
    }

        #add-to-box-btn.disabled > div {
            font-size: 1.1vw;
            background-color: #6b737b;
            padding-top: 0.4vw;
            padding-right: 1.4vw;
            box-sizing: border-box;
        }
