﻿/* header styling */
.accountHeader{
    background-image: url('../../images/products_Header_Sample.jpg');
    background-size: cover;
    position: relative;
}

.container form{
    margin-bottom:282px;
}

.quoteHeadings{
    width:80%;
    margin:50px auto 15px auto;
    padding:5px;
    border-bottom:2px solid black;
}
.quoteHeadings p{
    display:inline-block;
    font-size:22px;
}

.noQuoteItems{
    width:80%;
    margin:0 auto;
    padding-bottom:50px;
}

.catalogHeading {
    width: 26%;
}

.supplierHeading {
    width: 18%;
}

.descriptionHeading {
    width: 33%;
}

.quantityHeading {
    width: 11%;
}

.itemCatalogNumber {
    width: 26%;
}

.itemSupplier {
    width: 18%;
}

.itemDescription {
    width: 33%;
}

.itemQuantity {
    width: 15%;
}

.quoteItemRow{
    width:80%;
    margin:0 auto;
}
.quoteItemRow ul li{
    display:inline-block;
    padding:5px;
}
.single-line{
    width:50px;
}
.removeLink{
    font-size:13px;
}
.confirmDelete{
    background-color:#E4E4E4;
    padding:15px 0 15px 0;
}
.confirmDelete .ui-dialog-titlebar{
    text-align:center;
}
.confirmDelete .ui-dialog-buttonpane{
    text-align: center;
}
.deleteButton{
    color: white;
    background-color: #0098d6;
    padding: 8px 16px;
    font-size:20px;
}
.confirmButton{
    margin-right:20px;
}

.quoteFooter {
    width: 80%;
    height: 50px;
    padding-bottom: 70px;
    display: block;
    margin: auto;
}

.shoppingButton{
    float:right;
    margin-left:20px;
}

.shippingButton{
    float:right;
    border:none;
    padding: 11px 16px;
}

.shippingButton:hover{
    cursor:pointer;
}

@media (max-width:767px){
    .quoteHeadings, .quoteItemRow{
        width:90%;
    }

    .container form .quoteHeadings p{
        font-size:13px;
    }

    .quoteItemRow ul li{
        font-size:12px;
    }

    .quoteItemRow ul .itemCatalogNumber, .quoteHeadings .catalogHeading{
        width:28%;
    }

    .quoteItemRow ul .itemSupplier, .quoteHeadings .supplierHeading{
        width:20%;
    }

    .quoteItemRow ul .itemDescription, .quoteHeadings .descriptionHeading{
        width:30%;
    }

    .itemQuantity input{
        width:35px;
    }

    .container form{
        margin-bottom:50px;
    }
}

@media (min-width:768px) and (max-width:900px){
    .container form{
        margin-bottom:27%;
    }
}

@media screen and (max-width:1300px){
    .quoteHeadings p{
        font-size:16px;
    }
    .quoteItemRow{
        font-size:14px;
    }
    .removeLink{
        font-size:11px;
    }
    .catalogHeading{
        width:23%;
    }
    .supplierHeading{
        width:15%;
     }
    .descriptionHeading{
        width:35%;
    }
    .quantityHeading{
        width:14%;
    }
    .priceHeading{
        width:10%;
        text-align:right;
    }
    .itemCatalogNumber{
        width:23%;
    }
    .itemSupplier{
        width:13%;
    }
    .itemDescription{
        width:35%;
    }
    .itemQuantity{
        width:17%;
    }
    .itemPrice{
        width:10%;
        text-align:right;
    }
}
