.mobile {
    display: none;
}

.desktop {
    display: block;
}

.basket-img{
    width:68px;
    display:inline-block;
}

.quoteref {
    font-weight: bolder;
}

.thleft {
    text-align: left;
}

.errorline {
    background-color: #737326;
    border: solid 2px #aaaa0d;
}

.line-error-msg {
    width: 100%;
    text-align: right;
    font-weight: bold;
}

.basket-headers {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--accord-light-grey);
    padding: 5px;
    font-weight: bold;
}

.basket-line {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--accord-light-grey);
    padding: 5px;
}
.product-col {
    width: calc(50% - 10px);
}
    .product-col div {
        display: inline-block;
        vertical-align: middle;
    }
.qty-col {
    width: calc(25% - 10px);
}
.price-col {
    width: calc(20% - 10px);
}
.bin-col {
    width: 5%;
}

#basket-head {
    background-color: var(--accord-blue);
    color: var(--accord-white);
    border: 1px solid var(--accord-white);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
}

#basket-items {
    padding: 10px 20px 10px 20px;
    background-color: var(--darkbg);
    border: 1px solid var(--accord-white);
    border-top: none;
    margin-bottom: 10px;
}

    #basket-items table {
        width: 100%;
        border-collapse: collapse;
        padding-left: 10px;
        padding-right: 10px;
    }

    #basket-items tr {
    }

    #basket-items td {
        padding: 5px;
        border-bottom: 1px solid rgb(188,202,213);
    }

#basket-totals {
    width: 50%;
    display:inline-block;
}

.btn-add {
    height: 25px;
    width: 25px;
    line-height: 13px;
    font-size: 25px;
    margin-right: 8px;
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    color: #129300;
    border: 2px solid #129300;
}

    .btn-add:hover {
        color: var(--accord-white);
        background-color: #129300;
    }

.btn-take {
    height: 25px;
    width: 25px;
    line-height: 13px;
    font-size: 25px;
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    color: #7d0000;
    border: 2px solid #7d0000;
}

    .btn-take:hover {
        color: var(--accord-white);
        background-color: #7d0000;
    }

.bin-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%230b62ae" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/> </svg>');
    display: inline-block;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: bottom;
}

    .bin-icon:hover {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23f58c24" viewBox="0 0 16 16"> <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/> <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/> </svg>');
    }

.txttotal {
    text-align: right;
}

.lastline{
    border-bottom:none !important;
}

#change_postcode_holder {
    margin-left: auto;
    width: 33%;
}
#change_postcode_holder button{
    width: 100%;
}

#basket-options {
    width: 33%;
}

#basket-options button {
        width: 100%;
    }

@media screen and (max-width: 760px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .btn-add {
        height: 40px;
        width: 40px;
        line-height: 25px;
        font-size: 40px;
    }

    .btn-take {
        height: 40px;
        width: 40px;
        line-height: 25px;
        font-size: 40px;
    }

    #change_postcode_holder {
        width: 100%;
    }

    #basket-options {
        width: 100%;
    }
}