/**
 * Table of Contents
 * -----------------
 *
 * PAGE SETUP.................. all styles for the page layout
 * BOOSTRAP OVERRIDES.......... boostrap overrides of form components and elements
 * LOGIN PAGE.................. all styling for the login page
 * INQUIRY PAGE................ all styling for the order and item inquiry page
 * ORDER DETAILS............... all styling for order details partial
 * ITEM DETAILS................ all styling item details partial
 * HELPER CLASSES.............. singular classes for controlling styles form any html element
 * LOADING ANIMATION........... styling for circular loading animation
 *
*/


/*------------------------------------*\
    PAGE SETUP
\*------------------------------------*/
body {
    width: 900px;
    margin: 0 auto;
    padding: 40px 0 20px;
    border-top: none;
    border-bottom: none;
}

.section-title {
    font-size: 18px;
}

#header {
    margin-bottom: 25px;
}

#header h2 {
    font-weight: 700;
    font-size: 32px;
}
#header img {
    height: 80px;
    width: auto;
}




/*------------------------------------*\
    BOOTSTRAP OVERRIDES
\*------------------------------------*/
.radio-inline {
    padding-right: 10px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

@media (min-width: 0px) {
    .dl-horizontal dd {
        margin-left: 170px;
    }

    .dl-horizontal dt {
        float: left;
        width: 160px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}




/*------------------------------------*\
    LOGIN PAGE
\*------------------------------------*/
#login .section-title {
    margin-bottom: 20px;
}

#login {
    border: 1px solid #A2A2A2;
    padding: 15px;
}

#loginBtn {
    padding: 8px 40px;
}




/*------------------------------------*\
    INQUIRY PAGE
\*------------------------------------*/
#inquiry .col-xs-5 {
    width: 45.66666666666667% !important;
}

#inquiry .col {
    border: 1px solid #A2A2A2;
    min-height: 350px;
    padding: 15px;
    font-size: 13px;
}

#inquiry .form-group.clearfix {
    margin: 15px 0 10px;
}

#info p {
    margin-bottom: 10px;
    font-size: 11px;
    color: grey;
    margin-left: 15px;
    margin-right: 15px;
}

#info {
    background-color: #E8E8EE;
    padding-bottom: 10px;
}

#info #contactwhom {
    font-size:20px;
    color: grey;
    padding-bottom: 10px;
}

#email {
    margin-bottom: 15px;
    font-size: 13px;
    margin-left: 15px;
}

#rmaemail {
    margin-bottom: 15px;
    font-size: 13px;
    margin-left: 15px;
}

#email a {
    font-weight:bolder;
}

#rmaemail a {
    font-weight:bolder;
}

#pdfname {
    margin-bottom: 15px;
    font-weight:bolder;
    font-size: 13px;
    padding-bottom: 20px;
    margin-left: 15px;
}

#quote {
    height: 45px;
    line-height: 45px;
    background-color: #7D7D7D;
    margin: 25px 0;
}

#quote a {
    display: block;
    color: white;
    font-size: 13px;
    padding: 0 15px;
}

#quote a:focus,
#quote a:hover {
    text-decoration: none;
    color: white;
}

label.error {
    color: #a94442;
    font-size: 11px;
    font-weight: normal;
}

.highlight {
    background-color: #E8E8E8;
    padding: 1px 5px;
    color: #333;
}

.result {
    padding: 10px 0;    color: grey

    border-bottom: 1px solid #999999;
}

.result:last-child {
    border-bottom: none;
}




/*------------------------------------*\
    ORDER DETAILS
\*------------------------------------*/
.order dt {
    font-weight: normal;
}

.order .dl-horizontal {
    margin-bottom: 0;
}

.package {
    border: 1px solid #DADADA;
    margin: 10px auto;
    width: 270px;
    padding: 10px;
}

.package-number {
    text-align: left !important;
}

.package dt {
    width: 95px;
}
.package dd {
    margin-left: 105px;
}




/*------------------------------------*\
    ITEM DETAILS
\*------------------------------------*/
.notes-block,
.order-block {
    border: 1px solid #D2D2D2;
    color: #7B7B7B;
    padding: 7px;
}

.order-block,
.auth-block {
    margin-top: 25px;
}

.block 
{
    border: 1px solid #D2D2D2;
    padding: 8px;
}

.sprite-icon 
{
    display: inline-block;
    vertical-align: top;
}

.item-price {
    font-size: 16px;
    font-weight: bold;
}

.item-erp {
    font-size: 12px;
}

#orderQty {
    width: 65px;
    padding: 6px; 
}

#pricingResults .alert {
    padding: 4px 10px;
    margin-bottom: 0 !important;
}




/*------------------------------------*\
    HELPER CLASSES
\*------------------------------------*/
.padding-left-none { 
    padding-left: 0 !important 
}

.padding-right-none { 
    padding-right: 0 !important 
}

.padding-none {
    padding-left: 0 !important;
    padding-right: 0 !important 
}

.margin-tb-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.margin-tb-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.margin-t-15 {
    margin-top: 15px;
}

.margin-t-25 {
    margin-top: 25px;
}



/*------------------------------------*\
    LOADING ANIMATION
\*------------------------------------*/
.loading {
    display: none;
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.col.loading-active .loading {
    display: block;
}

.loading-anim {
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px;
    position: absolute;
    font-size: 7px;
    border-top: 1.21em solid rgba(0, 0, 0, 0.2);
    border-right: 1.21em solid rgba(0, 0, 0, 0.2);
    border-bottom: 1.21em solid rgba(0, 0, 0, 0.2);
    border-left: 1.21em solid #258cd1;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.loading-anim:after {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}