/*Editting items fields with some colors*/
#main-items-con input[name="quantity"]{
    color: #002d9f !important;
    background-color: #02b2a12e;
  }
#main-items-con input[name="total"]{
    color: #009f3a !important;
    background-color: #11b2022e;
  }
.col-sm-6 input[name="subtotal"]{
    color: #009f3a !important;
    background-color: #11b2022e;
  }
  



  /* Modal */
  .modal-container{
    position: fixed ! important;
    background-color: #fff;
    height: 50dvh;
    width: 50dvw;
    border-radius: 20px;
    z-index: 9;
    top: -150%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    box-shadow:  0px 0px 15px 1px rgba(0, 0, 0, 0.268);
    border:none;
    outline: none;
    transition: all ease 0.3s;
    overflow: auto;
  }
.aact{

    top: 40%;
    opacity: 1;
    transition: all ease 0.5s;
  }
  .modal-container .closebtn{
    float: right;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 15px 0 0;
    border-radius: 100%;
    cursor: pointer;
    color: grey;
  }
  .modal-container .closebtn:active{
    border:1px solid  rgba(0, 0, 0, 0.492);
    transition: ease 0.6s;
  }

  .bd{
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0);
    z-index: 4;
  }
  .bdactive{
    transform: all ease 0.4s;
    display:block;
    background-color: rgba(0, 0, 0, 0.223);
  }
  

  #tdtd{
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
      z-index: 1;
  }
  
  @media screen and (max-width: 600px) {
    .modal-container {
      width: 100%;
      height: 80%;
      position: fixed;
      border-radius: 0px;
  }
  .card-body{
    width: 100% !important;
    height: 100% !important;
  }
  .badge-pill b{
    display: none;
  }
}
.no-select{
  user-select: none !important;
}


.modal-container::-webkit-scrollbar {
  display: none;
  width: 5px; 
}

.modal-container:hover::-webkit-scrollbar{
  display: block;
  height: 10px; 
  width: 5px; 
}
.modal-container:hover{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.modal-container::-webkit-scrollbar-thumb {
  background: #777; 
  border-radius: 5px; 
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  height: 5px !important; 
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: #666; 
}