﻿
@media screen and (max-width: 768px) {
    .headerContainer {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

.upLoadFileButton {
    appearance: button;
    -moz-appearance: button; /*Firefox */
    -webkit-appearance: button; /*Safari and Chrome*/
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, E#10776D), color-stop(1, #13A89) );
    background: -moz-linear-gradient( center top, #d81230 5%, #d1bc61 100% );
    background-color: #d81230;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-family: arial;
    font-size: 18px;
    height: 33px;
    text-decoration: none;
    margin-top: 5px;
    margin-left: 5px;
    min-width: 65px !important;
    text-decoration: none !important;
    vertical-align: top;
    line-height: 2px;
    border: 0;
    outline: 0;
    max-width: 100%;
    padding: 6px 25px;
}

.removeBgButton {
    appearance: button;
    -moz-appearance: button; /*Firefox */
    -webkit-appearance: button; /*Safari and Chrome*/
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, E#10776D), color-stop(1, #13A89) );
    background: -moz-linear-gradient( center top, #d81230 5%, #d1bc61 100% );
    background-color: #d81230;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-family: arial;
    font-size: 18px;
    height: 33px;
    text-decoration: none;
    margin-top: 5px;
    margin-left: 5px;
    min-width: 65px !important;
    text-decoration: none !important;
    vertical-align: top;
    line-height: 2px;
    border: 0;
    outline: 0;
    max-width: 100%;
    padding: 6px 25px;
}

.linkCompPricing {
    font-size: 12px;
    margin-left: 5px;
}

.hasnotes {
    vertical-align: bottom;
}

.btn-top-add-to-order {
    margin-left: 10px;
    vertical-align: middle;
}

.btn-dec-order-qty, .btn-inc-order-qty {
    background-color: #d81230;
    color: #fff;
    width: 35px;
}

div.small-images img {
    width: 60px;
    height: auto;
    display: inline;
}

li.data-display input {
    min-width: 200px;
    width: 100%;
}

span.nl-error {
    color: red;
    font-size: 15px;
    display: inline-block;
    width: 100%;
}

textarea.customTextbox {
    height: initial;
    width: 100%;
}

div.data-display {
    display: inline;
}

div.small-images {
    position: relative;
}


    div.small-images > div > img.available {
        display: none;
    }

    div.small-images > div > i {
        position: absolute;
        /*top:-10px;
        right:30px;*/
        left: 110%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
    }

/*div.small-images > div {
        display:inline;
    }*/

.sm-img-container {
    position: relative;
    max-height: 80px;
    height: 80px;
}

div.sm-img-container img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-height: 100%;
    max-width: 100%;
}

.sm-img-container:hover i, .sm-img-container:focus i, .sm-img-container:active i {
    /*z-index:1001;*/
    display: inline-block !important;
}

.catedit, .edit, .dropedit {
    display: none;
}


/*div.dropzone {
border: 2px solid gray;
min-width: 300px;
height: 150px;
display: inline-block;
z-index:1000;
float: none;
margin: 0px auto;
background-color: #d9d9d9;
}*/


.item-img-medium {
    margin: 0 auto;
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

.item-img-large {
    margin: 0 auto;
    max-width: 400px;
    max-height: 400px;
    vertical-align: middle;
}

.item-img-thumb {
    margin: 0 auto;
    max-width: 55px;
    max-height: 55px;
    vertical-align: middle;
}

@media (max-width: 1000px) {
    .sm-img-container {
        display: none;
    }
}

/****************************
*   Item Image(s)
*****************************/
.upload-image-file-title {
    cursor: pointer;
    line-height: 21px;
}

.upload-image-file {
    display: none !important;
}

.upload-image-file-save {
    display: none !important;
}
/****************************
*   Rental Pricing
*****************************/
.rental-pricing-container .form-group {
    margin-bottom: 15px;
}

.rental-price-title {
    display: block;
    font-weight: bold;
    font-size: 18px;
}

.rental-price {
    font-size: 16px;
}

.row-fix {
    margin-left: -15px;
    margin-right: -15px;
}

.fwn {
    font-weight: normal;
}

@media(max-width: 460px){
    .rental-price-title {
        font-size: 15px;
        font-weight: 400;
    }
    .rental-price {
        font-size: 14px;
    }
}

.rental-number-avail-title {
    font-weight: bold;
    font-size: 18px;
    color: #515151;
}

.rental-number-avail {
    font-size: 18px;
}

.rental-estimate-title {
    font-weight: bold;
    font-size: 18px;
    color: #515151;
}

.rental-estimate {
    font-size: 18px;
}

.rental-rates-container {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}

.rental-rate-container {
    justify-content: center;
}

/****************************
*   Attributes On Top
****************************/
.cbAttrInTopSection input[type="checkbox"] {
    vertical-align: bottom;
}

.dynamic-attrs {
    margin: 5px 0px 0px 0px;
}

/****************************
*   Featured Items
****************************/

.featured-cb > input[type="checkbox"] {
    height: auto;
}

/****************************
*   Attributes On Bottom
****************************/

.productAttribute img {
    max-width: 100%;
    max-height: 100%;
}

/****************************
*   Related Items
****************************/
.related-items-title {
    font-family: inherit;
    font-weight: 600;
    margin-bottom: 10px;
}

.related-attribute-name {
    font-size: 16px;
}

hr.related-attr-separator {
    margin-top: 14px;
    border-top: 1px dashed #ccc;
}

hr.related-item-separator {
    border: 0;
    margin: 5px 0px;
}

.item-related-attr-row {
    margin-bottom: 10px;
}

.item-related-attr-title {
    font-size: 16px;
    font-weight: 600;
}

/**************************
    Rentals
***************************/
.rental-err-msg {
    font-size: 18px;
    font-weight: bold;
    background-color: #fff;
    color: #d81230;
    border-color: #d81230;
    padding-left: 0px;
}

.rental-date-occupied > span, .rental-date-occupied > a {
    background: lightcoral !important;
}

.rental-date-partially-occupied > span, .rental-date-partially-occupied > a {
    background: lightyellow !important;
}

.rental-date-available > span, .rental-date-available > a {
    background: lightgreen !important;
}

.rental-container {
    margin: 20px;
}

.rental-container h3 {
    margin: 10px;
}

.rental-table > thead > tr {
    background-color: #ECECEC;
}

.rental-table > tbody > tr > td {
    vertical-align: middle;
}

.rental-table > tfoot > tr > td {
    border-top: 2px solid #ddd;
}

.rental-table th {
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
}

.rental-table td {
    font-size: 14px;
    line-height: normal;
}

.rental-table .customButton {
    margin-bottom: 0px;
}

.rental-sn-modal .form-group {
    margin-bottom: 15px;
}

.rental-sn-modal textarea.form-control {
    min-height: 200px;
}

.rental-sn-modal .customCancelButton {
    background-color: #6c757d;
    max-width: fit-content;
}

.rental-sn-modal .modal-footer {
    text-align: left;
}

.rental-sn-modal .row {
    margin-left: -15px;
    margin-right: -15px;
}

.btn-create-rental {
    margin-left: 10px;
}