html, body{
    margin:0;
    height:100%;
  
}
@media only screen and (min-width: 1200px) {
    html, body{
         /*overflow:hidden; */
    }
}

/* Fullscreen Button 
------------------------------*/
h3.h3-title {
    font-size: 20px;
}
#fullscreen-button {
  position: absolute;
  top:  10px;
  right:  47%;
  background: rgba(0,0,0,0.05);
  border:  0;
  width:  37px;
  height:  37px;
  border-radius: 50%;
  box-sizing: border-box;
  transition:  transform .3s;
  font-size: 0;
  opacity: 1;
  pointer-events: auto;
  cursor:  pointer;
  z-index:99;
}
.btn-toolbar.top-btn-groups .btn {
    padding: 10px 14px;
}
.gap-d {
    column-gap: 10px;
}
.productCard {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 8px;
    transition: all 0.5s;
        overflow: hidden;
}
.productCard:hover {
    box-shadow: 0px 4px 3px 0px #ccc;
}
.pro-details {
    background-color: #ffc107;
    padding: 5px 5px;
}
.pro-name
 {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pro-price img {
    height: 14px;
    width: 12px;
    margin-bottom: 2px;
}

#fullscreen-button:hover {
  transform: scale(1.125);
}
#fullscreen-button span {
  width:  4px;
  height:  4px;
  border-top:  2.5px solid #111; /* color */
  border-left:  2.5px solid #111; /* color */
  position: absolute;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
  transition:  .3s;
  transition-delay: .75s;
}
#fullscreen-button span:nth-child(1) {
  top: 11px;
  left: 11px;
}
#fullscreen-button span:nth-child(2) {
  top: 11px;
  left: 22px;
  transform: rotate(90deg);
}
#fullscreen-button span:nth-child(3) {
  top: 22px;
  left: 11px;
  transform: rotate(-90deg);
}
#fullscreen-button span:nth-child(4) {
  top: 22px;
  left: 22px;
  transform: rotate(-180deg);
}

/* Fullscreen True
------------------------------*/
[fullscreen] #fullscreen-button span:nth-child(1) {
  top: 22px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(2) {
  top: 22px;
  left: 11px;
}
[fullscreen] #fullscreen-button span:nth-child(3) {
  top: 11px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(4) {
  top: 11px;
  left: 11px;
}

/* Dark Style
------------------------------*/
[light-mode=dark] {
  background: #111;
  color:  #fff;
}
[light-mode=dark] #fullscreen-button {
  background: rgba(255,255,255,.05);
}

[light-mode=dark] #fullscreen-button span {
  border-top:  2.5px solid #fff;
  border-left:  2.5px solid #fff;
}


.calculator-top .loyal-point-1{
    width: 55px; 
    margin-right: 5px;
}
.calculator-top .loyal-point-2{
    width: 65px; 
    margin-right: 5px;
}
.round-off .round-off-input{
    width: 55px; 
    margin-right: 5px;
}
.calculator-panel .cash-f1,
.calculator-panel .credit-card-f3,
.calculator-panel .debit-card-f4,
.calculator-panel .wallet-f5,
.calculator-panel .btn-ce,
.calculator-panel .btn-dot{
    padding: 13px 6px;
    width: 100%;
    font-size: .85rem;
}
.calculator-panel .btn-100{
    width: 100%;
}
.calculator-panel .credit-customer-f6,
.calculator-panel .loylaty-card-f7{
    padding: 5px 6px;
    width: 100%;
    font-size: .85rem;
}

.btn-more-options{
    position: absolute;
    z-index: 999;
    padding: 10px 20px;
    bottom: 10px;
    display: block;
}

#multiCollapseExample1 {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    padding: 10px 25px;
    box-shadow: -5px -5px 10px rgba(0,0,0,0.5);
    right:0px;
}

select#exampleFormControlSelect1 {
    width: auto;
    padding-right: 25px;
}
.btn-completesale{
    padding: 5px 6px; 
    width: 100%; 
    font-size: .85rem;
    margin-top: 2px;
}
.btn-clear{
    padding: 12px 6px; 
    width: 100%; 
    font-size: .85rem; 
    margin-top: 2px;
}
.btn-remove{
    padding: 12px 6px; 
    width: 100%; 
    font-size: .85rem; 
    margin-top: 2px;
}
.btn-close{
    padding: 12px 6px; 
    width: 100%;
    font-size: .85rem; 
    margin-top: 2px;
}
.btn-billdiscount{
    padding: 12px 6px; 
    width: 100%;
    font-size: .85rem; 
    margin-top: 2px;
}
.btn-quickcash{
    padding: 4px 6px; 
    width: 100%;
    font-size: .85rem; 
    margin-top: 2px;
}
.change-rate{
  font-size: 0.85rem;
  padding: 0 4px;
}
.recall_completed_bill .svg-sm{
  width: 17px;
  height: 17px;
  fill: #fff;
}
.font-cal{
  font-size:1.5rem;
  font-weight: 900;
  
}
.font-cal-btn{
  font-size:1rem;
  font-weight:700;
  padding:15px 8px!important;
}
table#orderTable tbody.cart_items>tr>td{font-size: 12px;}
table#orderTable tbody.cart_items>tr>td,table#orderTable thead>tr>th{padding: 5px 10px; width:100px;}
table#orderTable thead>tr>th{padding: 10px 10px;}
table#orderTable tbody.cart_items a.confirm-delete {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    padding: 5px 8px;
    border-radius: 5px;
}
tbody.cart_items.auto-scrolling-5 {
    max-height: 230px;
    display: block;
    overflow: auto;
}
tbody.cart_items.auto-scrolling-5::-webkit-scrollbar{
    width:16px;
}

tbody.cart_items.auto-scrolling-5::-webkit-scrollbar-track{
    background:#f1f1f1;
}

tbody.cart_items.auto-scrolling-5::-webkit-scrollbar-thumb{
    background:#999;
    border-radius:10px;
}

tbody.cart_items.auto-scrolling-5::-webkit-scrollbar-thumb:hover{
    background:#555;
}


table#orderTable.m-table thead,table#orderTable.m-table tbody tr{display: table;width: 100%; table-layout: fixed;}
table#orderTable.m-table thead {
    width: 98.6%;}
@media only screen and (max-width: 1280px) {

h3.h3-title {
    font-size: 18px;
}
.btn-toolbar.top-btn-groups .btn {
    padding: 8px 10px;
}
}
@media only screen and (max-width: 991px) {
.mbar-css{
          position: relative;
        border: 0px;
        box-shadow: 0px 0px 0px 0px #fff0;
        /* width: 100%; */
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        height: auto;
        padding: 20px 0px 10px;
    }
}
@media only screen and (max-width: 600px) {
  .mbar-css {
        position: relative;
        border: 0px;
        box-shadow: 0px 0px 0px 0px #fff0;
        /* width: 100%; */
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        height: auto;
        padding: 20px 0px 10px;
    }
    .btn-quickcash,
    .btn-billdiscount,
    .btn-close,
    .btn-remove,
    .btn-clear,
    .btn-completesale{
        padding: 12px; 
        width: 100%; 
        font-size: 1rem;
        margin-top: 5px
    }
    .colorfull-select {
        flex-direction: initial;
    }
    #fullscreen-button {
        position: absolute;
        top: 10px;
        right: 2%;
    }
    .round-off label, .round-off input {
        display: inline-block;
    }
    .loyalty-form .calculator-top{
        display: block;
        width: 100%;
    }
    .loyalty-form .calculator-top label,
    .loyalty-form .calculator-top input{
        display: inline-block;  
    }

}
/* new code Apsara */

@media (min-width:768px) and (max-width:1024px){
  .mbar-css .btn {
    padding: 0px !important;
}
.btn-toolbar.top-btn-groups .btn {
    padding: 6px 8px !important;
    margin-bottom: 10px !important;
}
  .first-column{
    display: none;
  }
  #fullscreen-button {
    right: 2%;
    top: 7px;
  }
  .contentPOS{
    font-size: 80%;
  }
  .table-contentpos .printableTableWrapper {
    height: 200px;
  }
  .btn{
    padding: 0.324rem 1.42rem ;

  }
  .calculator-panel .cash-f1, .calculator-panel .credit-card-f3, .calculator-panel .debit-card-f4, .calculator-panel .wallet-f5, .calculator-panel .btn-ce {
    padding: 6px 6px;
  }
  .calculator-panel .credit-customer-f6, .calculator-panel .loylaty-card-f7 {
    font-size: .75rem;
  }
  .calculator-panel .btn-dot {
    font-size: 1.3rem;
  }
  .btn.btn-quickcash{
    padding: 3px;
  }
}


/* @media (min-width:1360px) and (max-width:1441px){ */
@media  only screen and (max-width:1366px){
  .contentPOS-2,
.contentPOS{
  padding: 10px 0 0px !important;
}
  #contentPOS .product-items{
    height: 450px !important;
  }
#contentPOS .product-items::-webkit-scrollbar {
    width: 16px !important;
    border-radius: 10px;
}

#contentPOS .product-items::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px;
}

#contentPOS .product-items::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
  /* .table-contentpos .table-datapos {
    scrollbar-width: auto;
    scrollbar-color: #888 #F5F5F5;
} */

.table-contentpos .table-datapos::-webkit-scrollbar {
    width: 16px !important;
    border-radius: 10px;
}

.table-contentpos .table-datapos::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px;
}

.table-contentpos .table-datapos::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
  .table-contentpos .printableTableWrapper {
    height: 260px !important;
  }
  .shop-profile{
    padding-bottom: 0px !important;
  }
 
  .btn {
    padding: 0.500rem 1.00rem;
  }
  
  .calculator-panel .cash-f1, .calculator-panel .credit-card-f3, .calculator-panel .debit-card-f4, .calculator-panel .wallet-f5, .calculator-panel .btn-ce,.calculator-panel .btn-dot{
      padding: 9px 6px;
  }
}

@media screen and (width: 1280px) and (height: 800px) and (resolution: 1dppx) {
#contentPOS.contentPOS.contentPOS-2.screen-size-1280{padding-bottom: 250px!important;}

}
@media screen and (width: 720px) and (height: 1440px) and (resolution: 1dppx) {
#contentPOS.contentPOS.contentPOS-2.screen-size-1280{padding-bottom: 400px!important;}

}
@media screen and (min-width: 577px) and (max-width:767px){
.font-cal {
    font-size: 1.5rem;}
}
@media screen and (min-width: 620px) and (max-width:750px){
#fullscreen-button {
    position: absolute;
    top: 23px;
    right: 53%;}
}

@media screen and (max-width:576px){
.font-cal {
    font-size: 1rem;}
    .font-cal-btn {
    font-size: 0.8rem;
    padding: 10px 5px !important;
}
}
.bar-icon {
    /* background-color: #f6f6f6; */
    padding: 10px;
    border-radius: 10px;
    position: absolute;
    right: 0;
    top: 0;
}
.btn-groups-cs .btn {
    /* border: 1px solid red; */
    /* padding: 8px 8px; */
}
.btn-discount{
      color: #fff;
    background-color: #bb5508;
    border-color: #bb5508;
}
.btn-discount:hover {
    color: #fff;
    background-color: #78441d;
    border-color:#78441d;
}