:root {
    --black: black;
    --white: white;
    --backgroundColor: #225cac37;
    --mainColor: #24344d;
    --subText: #5A5959;
    --suvColor1:#03254C;

    --mainColorHover:#2b3e5d;

    --headrsFont: 'Impact';

    --boxShadow: rgba(0, 0, 0, 0.25);
    --transition: 0.3s;
}

::-webkit-scrollbar {
    width: 0.5em; /* Set a width for the scrollbar, even though it's not visible */
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: transparent; /* Make the thumb (the draggable part) transparent */
  }
  
  ::-webkit-scrollbar-track {
    background-color: transparent; /* Make the track (the area behind the thumb) transparent */
  }
  

  @keyframes fadeOutLeft {
    from {
      opacity: 0.5;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(5);
    }
  }



a {
    text-decoration: none;
    color: var(--black);
}
body{
    overflow: hidden;
    height: 100vh;
    margin: 0;
    animation: fadeOutLeft 0.3s ease-out forwards;
  
}



.menu-bar-section{
overflow-y: scroll;
}

.menubar-item{
    /* border-bottom:  1px solid #03254C;
    border-top:  1px solid #03254C; */
    padding-top:13px;
    padding-bottom:13px;
    
}



.menubar-item span{
    letter-spacing: 0.05em;
    font-size: 12px;
}

.menubar-item:hover{
    background-color: #384876;
    transition: var(--transition);
    cursor: pointer;
}

.page-title{
    letter-spacing: 0.07em;
}


/* header */
.header-bar {
    background: var(--backgroundColor);
    /* box-shadow: 0px 4px 9px var(--boxShadow); */
}
.header-empty-div{
    background-color: var(--mainColor);
}
.brand-name h1 {
    font-weight: 400;
    font-family: var(--headrsFont);
    letter-spacing: 0.1em;
    color: var(--mainColor);
}
.brand-name p {
    font-weight: 500;
    letter-spacing: 0.05em;
}

#current-date{
    font-size: 19px;
}
.user-profile img {
    height: 35px;
    width: 35px;
}
.user-profile h4 {
    color: var(--subText);
    font-weight: 500;
}
.user-profile p {
    color: var(--subText);
}




/* footer */
.footer {
    line-height: 10px;
}

.footer h2{
    font-size: 0.8rem;
}
.footer span{
    font-size: 0.7rem;
}
.taprodev-link{
    line-height: 0;
}


/* page-content */
.page-content{
    overflow-y: scroll !important;
    max-height: 78vh;
    height: auto;
}
.page-content::-webkit-scrollbar  {
    width: 1px;
    background-color: transparent;
}




.bg-main{
    background-color: #24344d;
}

.bg-blue{
    background-color: #264087;
}

.bg-blue-ash{
    background-color: #e2eff9;
}

.bg-light-main{
    background-color: #dbe9ff;
}

.text-main{
    color: #24344d;
}

.text-blue{
    color: #214199;
}

.ff-impact{
    font-family: impact;
}


@font-face {
    font-family: numbers;
    src: url("../../fonts/Aldrich-Regular.ttf");
}
.ff-numbers{
    font-family: numbers;
}

.btn-main{
    background-color: #24344d;
    color: white;
}
.btn-main:hover{
    background-color: #36546d;
    color: white;
}

.btn-blue{
    background-color: #264087;
    color: white;
}

.btn-blue:hover{
    background-color: #264087;
    color: white;
}

.bill-item-table{
    font-size: 13px;
}

.bill-img{
    width: 30px;
    height: 30px;
}


.bill-view{
    height: 75vh;
}

.bill-view-item-list{
    /* height: auto; */
    height: 40vh;
    overflow-y: scroll;
}



.bill-view-table-div{
    /* height: auto; */
    height: 48vh;
    overflow-y: scroll;
}

@media only screen and (max-width: 768px) {
    .bill-view-item-list{
        height: auto;
        max-height: 40vh;
        overflow-y: scroll;
    }
    
    
    
    .bill-view-table-div{
        height: auto;
        max-height: 48vh;
        overflow-y: scroll;
    } 
}

.barcode-para{
    display: inline-block;
}

.barcodeText{
    font-size: 13px;
}

.cursor-pointer{
    cursor: pointer;
}

.selected-item {
    background-color: #dcdcdc !important; /* Change this to the desired background color */
}

.selected-product {
    background-color: #063793 !important; /* Change this to the desired background color */
}

.item-dropdown {
    height: auto;
    max-height: 200px;
    overflow-y: scroll;
}

.dropdown-item{
background-color: rgb(38, 46, 74);
font-size: 13px;
}

.dropdown-item:hover {
    background-color: #0b2f44;
    cursor: pointer;
    transition-duration: 200ms;
    color: white;
}

.fs-small{
    font-size: 13px;
}

.order-table{
    /* background-color: rebeccapurple; */
    height: auto;
    max-height: 55vh;
    overflow-y: scroll;
}

.repair-table-div{
    height: 50vh;
}

.payment-modal{
    max-height: 70vh;
    overflow-y: scroll;
}

.vh-150 {
    height: 80vh;
    overflow-y: scroll ;
}

.vh-40 {
    height: 40vh;
    overflow-y: scroll ;
}

.top-selling-div{
    height: 70vh;
    overflow-y: scroll;
}

.customer-item{
    background-color: #d2d3d4;
}

.customer-item:hover{
    background-color: #a3a3a3;
    cursor: pointer;
    transition-duration: 200ms;
}

#customer_item_view_2 , #customer_item_view_1{
    overflow-y: scroll;
}


/* .menu-bar-section:hover  .menu-item-name{
    display: inline;
    text-align: start;
    width: 13%;
    transition-duration:300ms;
} */
.menu-item-name{
    display: none;
}

.menu-bar-section{
    transition-duration: 300ms ;
    overflow-y: scroll;
    overflow-x: hidden;
}
.menu-bar-section:hover,
.menu-bar-section:hover .menu-item-name {
  /* Styles to apply to both .menu-bar-section and .menu-item-name when .menu-bar-section is hovered */
  /* Modify the styles as per your requirements */
  display: inline;
  text-align: start;
  width: 15%;
  transition-duration: 300ms;
}

.holdBillItem{
    background-color: #013668;
    color: white;
}

.holdBillItem:hover{
    background-color: #085cac;
    color: white;
}

.addCustomer_model{
background-color: rgba(46, 45, 45, 0.669);
}

.bg-purple{
    background-color: rgb(186, 60, 245);
}

.bg-green{
    background-color: rgb(15, 180, 83);
}

.addPurchase-div{
    width: 200%;
}


.product-tile{
    background-color: rgb(207, 225, 254);
}

.product-tile:hover{
    background-color: rgb(166, 198, 250);
}

.product-front-view{
    max-height:30vh;
    height:auto;
    overflow-y:scroll;
}

.payment-waning{
    background-color: rgba(175, 1, 1, 0.351);
    font-size: 12px;
    color: rgb(155, 0, 0);
}

.edit-icon{
    display: none;
}

.pos-img:hover .edit-icon{
    display: flex;
}

.dashed-border{
    border: 1px dashed rgba(0, 0, 0, 0.5);
}



.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 25px;
    border-radius: 3px;
    transition: 0.2s;

    &.is-active {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

.fake-btn {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 12px;
    text-transform: uppercase;
}

.file-msg {
    font-size: small;
    font-weight: 300;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;

    &:focus {
        outline: none;
    }
}

.file-drop-area:hover {
    background-color: rgba(0, 0, 0, 0.4);
}