* {

    font-family: Arial, Helvetica, sans-serif;

}



/* Tooltip container */

.tooltip1 {

    position: relative;

    display: inline-block;

    cursor: pointer;

}



/* Tooltip text */

.tooltip1 .tooltiptext1 {quote-image

    visibility: hidden;

    width: 50px;

    background-color: #333;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 2px;

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    opacity: 0;

    transition: opacity 0.3s;

}



/* Show the tooltip when hovering over the tooltip container */

.tooltip1:hover .tooltiptext1 {

    visibility: visible;

    opacity: 1;

}



.itemBottomWrapper {

    width: 100%;

    display: flex;

    padding: 10px;

    justify-content: space-between;

}



.itemWrapper {

    display: flex;

    align-items: center;

}



.CustomerWrapper,

.itemWrapper {

    border: 1px solid;

    padding: 10px;

    background: aliceblue;

}



.container {

    max-width: 100%!important;

}



.itemWrapper:hover {

    background: lightskyblue;

}



.here2,

.here {

    position: absolute;

    width: 70%;

    height: 20%;

    overflow-y: auto;

    cursor: pointer;

    z-index: 1;

    background: lightgrey;

    margin: 40px 0 0 0;

}



.itemWarranty,

.itemLink {

    display: none;

}



.headermenu {

    display: flex;

    width: 100%;

    align-items: center;

    background: #c897ff;

    color: white;

    justify-content: center;

}



.SignInPop {

    display: flex;

    width: auto;

    justify-content: center;

    height: auto;

}



.itemName {

    width: 45%;

}



.itemPrice {

    width: 10%;

}



.itemStock {

    width: 2%;

}



.bottom-button {

    position: fixed;

    bottom: 5%;

    right: 178px;

}



.bottom-button-close {

    position: fixed;

    bottom: 5%;

    right: 19px;

}



#QuoteProducts {

    display: none;

}



.QuoteProducts {

    display: none;

}



#QuoteProductsQuote {

    display: none;

}



.quote-Special-BackOrder {

    font-size: 10px;

    font-style: oblique;

}



.customer_detail {

    width: 70%;

}



.customer_detail_quote {

    display: flex;

    justify-content: space-around;

}



.nav-bar-container {

    padding-top: 1%;

    margin: auto;

    display: flex;

    justify-content: space-evenly;

    flex-direction: row;

    flex-wrap: nowrap;

    align-content: center;

    align-items: center;

}



@media only screen and (max-width: 768px) {

    .nav-bar-container {

       margin: auto;

        padding-top: 1%;

        display: flex;

        justify-content: space-evenly;

        flex-direction: row;

        flex-wrap: nowrap;

        align-content: center;

        align-items: center;

    }

    

}



.quoteproductcontainer {

    width: 100%;

}



.invoice {

    width: 800px;

    margin: 0 auto;

    padding-right: 40px;

}



.invoiceheader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.invoiceheader h1 {

    font-size: 36px;

    margin: 0;

}



.invoiceheader p {

    margin: 0;

}



.invoice-table {

    width: 100%;

    border-collapse: collapse;

}



.invoice-table th,

.invoice-table td {

    border: 1px solid #ccc;

    padding: 5px;

}



.invoice-table th {

    background-color: #f0f0f0;

}



.invoice-table tr:nth-child(even) {

    background-color: #f9f9f9;

}



.invoice-total {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-top: 20px;

    font-size: 24px;

    font-weight: bold;

}



.invoice-total span {

    margin-left: 20px;

}



.hide-prices {

    display: table-cell;

}



.QuoteHeader {

    margin-bottom: 20px;

    width: 100%;

    display: flex;

    justify-content: space-between;

}



.QuoteHeaderRight {

    display: flex;

}



.CompanyLogo img {

    width: 40%;

}



.CompnayInfo {

    position: absolute;

    margin-left: 130px;

    font-size: 14px;

}



.QuoteHeaderLeft {

    text-align: end;

    font-size: 14px;

}





.PriceSyncButton {

    width: 30%;

}



.quote-container {

    display: flex;

}



.quote-image {

    width: auto;

}

.quote-image img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Ensure images are loaded before PDF generation */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ensure images don't break during PDF generation */
@media print {
    .quote-image img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        page-break-inside: avoid;
    }
}


.quote-image img {

    width: 100px;

}



.quote-sku {

    font-size: 12px;

    font-style: italic;

}



.quote-name {

    font-size: 13px;

}



.quote-warranty {

    font-size: 9px;

    font-weight: bold;

}



.quote-leftside {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    padding-left: 10px;

}



.Midway {

    vertical-align: middle;

}



.viewQuote-container-border {

    width: 80%;

    margin: auto;

}



.editableQuote-container {

    width: 100%;

    margin: auto;

}



.QuotationInfo {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

}



.QuotationInfoRight {

    width: 47%;

}



.QuotationInfoLeft {

    width: 47%;

}



.viewQuote-container-search {

    margin: auto;

    padding: 10px;

    width: 15%;

}



.searchDiv {

    display: flex;

}



.button-profile-hidden {

    display: flex;

    width: 100%;

    height: auto;

    background: #caa8ff;

    justify-content: space-around;

    align-items: center;

    font-weight: 600;

    border-radius: 20px;

    cursor: pointer;

}



.addNote:hover {

    color: #f0f0f0;

}



.button-Quote-hidden {

    display: flex;

    width: 100%;

    height: 30px;

    background: #caa8ff;

    justify-content: space-around;

    align-items: center;

    font-weight: 600;

    margin-top: 10px;

    border-radius: 20px;

    cursor: pointer;

}



.button-Quote-hidden:hover {

    background-color: rgb(59, 59, 59);

    color: white;

}



.button-col-12 {

    padding: 15px;

}



.editableQuote {

    background-color: rgb(231, 231, 231);

    padding: 1%;

}



@media only screen and (max-width: 1030px) {

    .editableQuote-container {

        width: 100%;

        margin: auto;

    }

}



tr input {

    border: none;

}



.footer-quote {

    padding: 20px 5px 20px 5px;

    font-size: 12px;

}



.drag-handle {

    cursor: move;

}



.postageDiv {

    width: 100%;

    display: flex;

    justify-content: space-evenly;

}



.input-group.mb-3 {

    padding-right: 10px;

}



.dates-container {

    border-radius: 10px;

    display: flex;

    justify-content: space-evenly;

    margin: 10px 0px 10px 0px;

    background: #caa8ff;

}



.ui-state-default:hover {

    background-color: #cccccc6c;

}



.input-group.mb-3 {

    z-index: 0;

}



.ring {

    z-index: 2;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 150px;

    height: 150px;

    background: rgba(152, 255, 139, 0.685);

    border: 3px solid #3c3c3c;

    border-radius: 50%;

    text-align: center;

    line-height: 150px;

    font-family: sans-serif;

    font-size: 20px;

    color: #7c36ff;

    letter-spacing: 4px;

    text-transform: uppercase;

    text-shadow: 0 0 10px #000000;

    box-shadow: 0 0 20px rgba(0, 0, 0, .5);

}



.ring:before {

    content: '';

    position: absolute;

    top: -3px;

    left: -3px;

    width: 100%;

    height: 100%;

    border: 3px solid transparent;

    border-top: 3px solid rgb(255, 255, 252);

    border-right: 3px solid #000000;

    border-radius: 50%;

    animation: animateC 2s linear infinite;

}



@keyframes animateC {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



@keyframes animate {

    0% {

        transform: rotate(45deg);

    }



    100% {

        transform: rotate(405deg);

    }

}



.addGroupName {

    display: flex;

    width: 30%;

    align-items: baseline;

}



.groupNameQuote {

    text-align: center;

    border: 1px solid black;

    background-color: #adaacd !important;

    font-style: italic;

    font-weight: 700;

}



.quote-name a {

    text-decoration: none;

}



.Postage-download-quote-container {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    align-items: flex-end;

}



.container.wrapperProductQuote {

    padding: 0;

    margin-bottom: 20%;

    border-radius: 10px;

    border: 1px solid black;

}



.ShippingAddress,

.BillingAddress {

    width: 47%;

}



.table-fixer {

    display: flex;

    margin-bottom: -16px;

    align-items: flex-start;

}



.Quote-btn {

    padding: 10px;

}



.Footerfixed {

    margin: 10px 0 -40px 0;

}



.main-btn-container {

   display: flex;

    flex-direction: row;

    align-items: center;

    flex-wrap: wrap;

    justify-content: center;

}



.Hidethisclass {

    display: none;

}



.gapSpec {

    display: flex;

    flex-direction: column;

    width: max-content;

    max-width: 90px;

    font-size: 12px;

}



.pagination {

    display: flex;

    padding-left: 0;

    list-style: none;

    justify-content: center;

    align-items: center;

}



.pagination a {

    color: red;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}



.button-Quote {

    display: flex;

    justify-content: center;

    flex-wrap: nowrap;

    background: mediumpurple;

    margin: auto;

    align-items: center;

    align-content: center;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 11px;

    text-align: center;

    z-index: 9999;

}



.notice._quote {

    display: flex;

    justify-content: center;

}



#Searchhere {

    display: none;

    position: absolute;

    height: 500px;

    overflow: auto;

    width: 80%;

    margin-left: 10%;

    z-index: 999;

}



.profile-order-created-container {

    display: flex;

    width: 100%;

    height: 575px;

}



.Profile {

    border-radius: 10px;

    margin: 5px;

    width: 70%;

    padding: 5px;

    border: 1px solid;

}



.Sub-Profile {

    padding: 2%;

    height: 540px;

    overflow: auto;

}



.Order-Created {

    border-radius: 10px;

    margin: 5px;

    width: 30%;

    border: 1px solid;

    padding: 5px;

}



.Sub-Order-Created {

    padding: 5px;

    overflow: auto;

    height: 510px;

    font-size: smaller;

}



.MainEditableQuote {

    display: flex;

    width: 100%;

}



.LeftMainEditableQuote {

    width: 70%;

    border: 1px solid;

    border-radius: 10px;

    padding: 5px;

    margin: 1% 0% 0% 0%;

}



.RightMainEditableQuote {

    width: 30%;

    border: 1px solid;

    border-radius: 10px;

    padding: 5px;

    margin: 1% 0% 0% 1%;

}



.Sub-RightMainEditableQuote {

    background-color: rgb(231, 231, 231);

    margin: 1%;

    height: 250px;

    overflow: auto;

}



.Sub-RightSecondEditableQuote {

    max-height: 190px;

    overflow: auto;

}



#product-modal {

    z-index: 1;

}



.recentlyCreateQuote {

    max-width: 100%;

    margin: 5px;

    padding: 5px;

    border: 1px solid rgb(0, 0, 0);

    border-radius: 10px;

}



.recentlyCreateQuote h4 {

    font-weight: bold;

    text-align: center;

}



.statsContainer {

    display: flex;

    margin-top: 2%;

    width: 100%;

    flex-wrap: wrap;

    justify-content: center;

}



.link-secondary {

    color: white!important;

}



header {

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}



.create-order {

    margin-bottom: 20%;

}



/* This css is used for create Invoice*/

.main-container {

    display: flex;

    width: 100%;

}



.Left-container {

    border: 1px solid;

    width: 65%;

}



.Right-container {

    border: 1px solid;

    width: 35%;

}



.ProductDisplay {

    display: flex;

    flex-wrap: wrap;

    height: 90vh;

    overflow: scroll;

    justify-content: center;

}



.productCard {

    width: 23%;

    height: 275px;

    border: 1px greenyellow solid;

    margin: 1%;

    padding: 1%;

}



.searchBar {

    display: flex;

    justify-content: center;

}



.outlinetext {

    position: absolute;

    border: 1px solid;

    background: #fd9595;

}



.NavheadBar {

    width: 100%;

    border: 1px solid;

    background-color: #b794ff;

    display: flex;

    justify-content: center;

}



.userSelecion {

    width: 33.3%;

}



.searchBar {

    display: flex;

    width: 33.3%;

    justify-content: center;

}



.main-customer {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    flex-direction: row;

    margin-top: 6px;

}



.SortBy {

    display: flex;

    width: 33.3%;

    justify-content: space-evenly;

}



#productDescription, #productWarranty, #productSpec {

    margin: 3%;

    font-size: 13px;

}



.checkoutButton {

    position: fixed;

    bottom: 5%;

    right: 5%;

}



.table_cart {

    max-height: 750px;

    overflow: scroll;

    border: 1px solid green;

}



@media only screen and (max-width: 1320px) {

    .table_cart {

    max-height: 600px;

    overflow: scroll;

    border: 1px solid green;

}

}



.AddingCustomer {

    display: none;

    width: 50%;

    position: absolute;

    background: lightgrey;

    margin: auto;

    left: 0;

    right: 0;

    padding: 10px;

    border: 1px solid;

    border-radius: 20px;

}



.GroupSearch {

    text-align: center;

    font-size: large;

    color: black;

    background: #a1a1a1;

}



.canvasjs-chart-credit {

    display: none;

}







/*Style Fixes by Prakash on October 18, 2024*/

@media only screen and (max-width: 1366px) {

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(1),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(2),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(3){

        width: 20px !important;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(1) td:nth-of-type(6),

    .tab-content .wrapperProductQuote table.table tr:nth-child(1) td:nth-of-type(7),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(7),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(8){

        display: none;

    }

    

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(5) input {

        max-width: 150px !important;

    }

    

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(4) {

        width: 78px;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(5) {

        width: 200px;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(6) {

        width: 80px;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(6) input {

        width: 80px;

    }

    

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(9),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(9) input, 

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(10),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(10) input{

        width: 40px;

    }

    

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(11),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(11) input{

        width: 65px !important;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(12),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(12) input{

        width: 90px;

    }

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(13),

    .tab-content .wrapperProductQuote table.table tr:nth-child(n + 1) td:nth-child(14){

        width: 20px !important;

    }

}



.spinner-border {

    --bs-spinner-width: 45px!important;

    --bs-spinner-height: 2rem;

    --bs-spinner-vertical-align: -0.125em;

    --bs-spinner-border-width: 0.25em;

    --bs-spinner-animation-speed: 0.75s;

    --bs-spinner-animation-name: spinner-border;

    border: var(--bs-spinner-border-width) solid currentcolor;

    border-right-color: transparent;

}