@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;550;700;900&display=swap");

:root {
    --radius: none !important;
    --dark-blue: #034870;
    --border1: #d1d1d1;
    --borderc2: #cacaca;
    --borderc3: #c1c1c1;
    --borderc4: #ddd;
    --themename : 'Standard Vanilla';
}

.themename::before { content:var(--themename); }

/* = Loading =  */

body.loading::after {  content:""; background-color:rgba(255,255,255,.99); 
  animation:loadingpage 3s; background-image:url('../img/logo.png'); background-size:150px; background-repeat:no-repeat; background-position: center;
  color:rgba(0,0,0,.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; width:100%; height:100%; }


@keyframes loadingpage {
  0%  { background-size:80px;  opacity:1; }
  90% { background-size:150px;  opacity:1; }
  100% { background-size:180px;  opacity:0; }
}

/* ==  */


h7 {
    font-size: 1.4em;
    font-weight: 550;
    align-items: center;
    align-self: center;
}

.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    font-family: "Poppins", sans-serif;
}

body {
    font-family: "Poppins", sans-serif !important;
}

.homechk {
    display: grid;
    grid-template-columns: 100px 3fr minmax(400px, 380px);
    height: calc(100vh - 70px);
}

.homechk>section {
    border-right: 1px solid var(--borderc4);
}

.btn:hover:after {
    background: none !important;
}


/* ---------------------------------------------------HEADER/FOOTER---------------------------------------------------------- */
.posheader {
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 70px;
    padding-left: 2em;
    padding-right: 2em;
    border-top: 1px solid var(--borderc3);
    background-color: #ffffff;
}

nav li {
    list-style: none;
}

/* nav active */
.nav-item a {
    color: black;
}

.nav-item a.active {
    color: #2579f8;
}

/* -----------------------------------------------CHECKOUT(index.php)---------------------------------------------------- */
/* ---------------------- sidemenu ------------------ */
.main-icons {
    width: 75px;
    height: 75px;
    border: 1px solid var(--borderc3);
    color: black !important;
    border-radius: 10px;
    padding: 2.5em;
    display: grid;
    align-content: center;
    justify-content: center;
}
.main-icons img { margin:0 auto; }

.list-v {
    height: calc(100vh - 75px);
    overflow-y: auto;
    justify-items: center;
}

.stickyitem {
    position: sticky;
    bottom: 0px;
    background-color: white;
    padding: 0.6em;
}

.sname {
    font-size: 0.95em;
}

/* ----------------------prodlist */
p input {
    text-align: center !important;
}

.card {
    min-width: 1em !important;
    position: relative;
    border: none !important;
    border-radius: 1em !important;
}

.prod-container>.card::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.6758053563222164) 68%,
            rgba(0, 0, 0, 0.6674019949776786) 100%);
}

.card-bott {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.prod-container>.card>.card-title {
    position: absolute;
    bottom: 0;
    color: #333;
    width: 100%;
    text-align: left;
    background: white;
}

.dis-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prod-container>.card {
    min-height: 170px;
}

.dis-card {
    width: 100px;
    border-radius: var(--radius);
    margin: var(--margin);
    overflow: hidden;
    border: 1px solid var(--borderc4);
    display: grid;
}

.prod-container {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 150px);
    position: relative;
}

.prodlist {
    position: relative;
}

/* ----------------------voucher modal */
/* .modal.active .modalclosebtn { color: black!important; right: 6px!important; padding: .3em!important;} */
.vmodal .modal-container {
    width: 50%;
    height: 30%;
    padding: 0.11em !important;
}

.vcontainer {
    border-bottom: 1px solid var(--borderc3);
    width: 100%;
}

.vcontainer h6 {
    font-size: 1.7em;
}

.vbtn {
    background-color: var(--dark-blue) !important;
}

.vbtn-2 {
    background-color: var(--dark-blue) !important;
}

.vpadd {
    padding: 0.11em 0.5em !important;
}

.modal.active .modalclosebtn:hover {
    transform: none !important;
}

/* ----------------------All items modal */
.Imodal .modal-container {
    width: 50%;
    padding: 0.11em !important;
}

.issuerefund-tb table,
.refund-tb {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-weight: 500;
}

.issuerefund-tb tr,
.refund-tb tr {
    border-bottom: 1px solid var(--borderc2);
}

.issuerefund-tb td span {
    color: #787878;
}

.modal-body {
    width: 90%;
    margin: 10px auto 3em auto;
}

.modal-body .refund-div {
    border-bottom: 1px solid var(--borderc2);
    text-align: left;
    padding: 0.8em 0;
}

.issuerefund-tb td {
    padding: 0.4em 0;
}

.itemamount .btn {
    margin: 0 !important;
}

.input-checkbox input[type="checkbox"] {
    padding: 0 !important;
}

.input-checkbox {
    border: none !important;
    margin: 0 !important;
    justify-content: end;
}

.input-checkbox input[type="checkbox"]::before {
    font-size: 1.5em;
}

.input-checkbox input[type="checkbox"]:checked::before {
    color: #1976d2 !important;
}

/* ----------------------QTY-BTN */
.qtybtn input::-webkit-outer-spin-button,
.qtybtn input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Chrome, Safari, Edge, Opera */
.qtybtn input[type="number"] {
    -moz-appearance: textfield;
}

/* Firefox */
.qtybtn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    align-items: right;
    justify-content: right;
}

.qtybtn input {
    width: 30px;
    text-align: center;
    border: none;
    outline: none;
}

.qtybtn input:focus {
    text-align: center;
}

.qtybtn-controls {
    display: grid;
    gap: 1px;
}

.qtybtn-controls span {
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
}

/* scroll bar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/*Track*/
::-webkit-scrollbar-thumb {
    background: var(--borderc4);
    border-radius: 100%;
}

/* Handle */
::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* Handle on hover */

/* --------------------------------------------------------SALE(report.php)-------------------------------------------------- */
.sale {
    border-bottom: 1px solid var(--borderc3);
    padding: 1em;
}

.sale span {
    font-weight: 500;
}

.cal-items {
    grid-template-columns: 1fr 2fr auto;
    position: relative !important;
}

.cal-border {
    border-bottom: 1px solid var(--borderc4);
    padding-bottom: 1em;
}

.tax-section {
    border-top: 1px solid var(--borderc4);
}

.calcspace {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 350px;
}

.cal-btn {
    border-radius: none !important;
}

.sticky-btn {
    position: sticky;
    bottom: 70px;
}

.btn-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
}

.sale span {
    font-weight: 500;
}

.stotal span {
    font-weight: 500;
}

.inputbc {
    display: grid;
    grid-template-columns: 1fr auto;
}

.cal-items .mdi-close {
    display: none;
}

.cal-items:hover .mdi-close {
    position: absolute;
    left: 10px;
    top:9px;
    bottom: 9px;
    animation: fadeInRight 0.5s;
    display: grid;
    align-items: center;
    justify-items: center;
}

.close-btn {
    width: 60px;
    height: 50px;
    background: red;
    color: white !important;
}

.rpc1 {
    display: grid;
    grid-template-columns: 400px 1fr;
}

.rpc2 {
    display: grid;
    grid-template-columns: 400px 1fr auto;
    gap: 1em;
    height: 60px;
}

.repchk {
    height: calc(100vh - 135px) !important;
}

.repchk>section {
    border-right: 1px solid var(--borderc4) !important;
}

.filter span {
    font-size: 30px;
}

ul.snavlist {
    border: 0px solid transparent !important;
    border-radius: 0px !important;
    margin: 0 auto !important;
}

ul.snavlist>li:first-child {
    border-radius: 0px !important;
    border-top: none;
}

ul.snavlist>li:last-child {
    border-radius: 0px !important;
    border-bottom: none;
}

.bor.right {
    border-right: 1px solid var(--borderc4);
}

.bor.top {
    border-top: 1px solid var(--borderc4);
}

.bor.left {
    border-left: 1px solid var(--borderc4);
}

.bor.bottom {
    border-bottom: 1px solid var(--borderc4);
}

.nobull {
    list-style-type: none;
}

.nobull span {
    font-size: 15px;
}

.reptri {
    color: #26b223;
}

.repwor {
    color: #8e8484;
}

.repwor1 {
    color: #2580ff;
}

.repbkcol {
    background-color: #f8f8f8;
    min-height: 61px;
}

.reptab {
    border-radius: 0px !important;
    min-height: 61px;
    background-color: #f8f8f8 !important;
}

.repbox .tab-content {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 300px);
}

.rptabs li.active {
    border-bottom: 3px solid #717171;
    min-height: 100%;
    min-width: 40%;
    display: grid;
    align-items: center;
    color: #717171 !important;
}

.r-container {
    width: fit-content !important;
    padding: 2em !important;
}

.modal-footer .btn { justify-self: stretch!important; }

/* ----------------------------------------------------MENU(menu.php)-------------------------------------------------------- */
/*------------------------mdi icons, orders, invoices and so on*/
.menuchk {
    height: calc(100vh - 70px);
    overflow: auto;
}

.men .ic::before {
    font-size: 35px;
    padding-right: 20px;
}

.men .ic {
    font-size: 20px;
}

hr {
    width: 60%;
    background-color: var(--borderc2);
    opacity: 0.3;
}

.lt {
    color: #2579f8;
}

/* ---------------------------------------------------- SETTINGS -------------------------------------------------------------- */
.sccontent {
    height: 60px;
    background-color: #f8f8f8;
}

.settingshr {
    width: 100%;
    background-color: var(--borderc2);
    opacity: 0.3;
}

.settings {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 100px);
}

.copbtn {
    width: 40%;
}

.setttabs {
    background: transparent !important;
}

.setttabs li {
    width: 100%;
    text-align: left !important;
}

.setttabs li.active {
    background: var(--borderc3);
    color: #ffffff !important;
}

.switchtoggle[type="checkbox"]::before {
    content: "\F0522" !important;
    color: grey !important;
    font-size: 2.5em !important;
}

.switchtoggle[type="checkbox"]:checked::before {
    content: "\F0521" !important;
}

/*rheader*/
.close {
    font-size: 40px;
}

/* -----------------------------------------------------TRANSACTIONS----------------------------------------------------------- */
.dark-blue {
    background-color: var(--dark-blue) !important;
}

.transaction-head h6,
.payment-main h6 {
    font-weight: 500;
}

.transaction-head {
    display: grid;
    grid-template-columns: 60% 40%;
    padding: 1em;
    border-bottom: 1px solid var(--borderc4);
}

.transaction-main {
    display: grid;
    grid-template-columns: 30% 70%;
}

.transaction-whole {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 0px);
}

.input-field input {
    text-align: left !important;
}

.product-search {
    border-right: 1px solid var(--borderc4);
    padding: 0.5em;
    max-height: calc(100vh - 158px);
}

.refund-reciept {
    padding: 0 40px;
}

.payment-main span {
    font-size: 1.3em !important;
}

.payment-main div {
    padding: 1em;
    border-bottom: 1px solid var(--borderc4);
}

.sepbox {
    height: calc(100vh - 300px);
    overflow: hidden;
    overflow-y: auto;
}

.sp {
    white-space: nowrap;
}

.line {
    width: 100%;
}

.prod img {
    border-radius: 10px;
    text-align: center;
}

/* -------------------modal */
.modal-head {
    position: sticky;
    top: 0px;
    background: white;
    z-index: 3;
}

.modal-head {
    border-bottom: 1px solid var(--border1);
}

.transactionmodal .modal.active .modal-container {
    padding: 0px !important;
}

.transactionmodal .modal-head {
    display: grid;
    grid-template-columns: 1fr auto;
    text-align: left;
}

.transactionmodal .modal-head .btn {
    margin: 0px !important;
    padding: 0.5em 2em !important;
}

.transactionmodal .mdi-close::before {
    font-size: 30px !important;
}

.transactionmodal .modal-head {
    border-bottom: 1px solid var(--border1);
}

.transactionmodal .modal-head .btn {
    margin: 0px !important;
    padding: 0.5em 2em !important;
}

.transactionmodal .mdi-close::before {
    font-size: 30px !important;
}

.transactionmodal .modal.active.large .modal-container {
    overflow: hidden;
    overflow-y: auto;
    width: 70% !important;
    height: 75% !important;
    margin: auto auto;
}

.transactionmodal .mdi-close::before {
    color: red;
}

.transactionmodal .mdi-checkbox-marked-circle-outline::before {
    font-size: 150px;
}

.transactionmodal .refund-box {
    border-bottom: 1px solid var(--border1);
}

.transactionmodal label.radio-field input[type="radio"]:checked:before {
    color: #1976d2 !important;
    font-size: 2em !important;
}

.refund-reason div {
    border-bottom: 1px solid var(--border1);
    padding: 0.5em 0;
}

.giftcard-btn {
    background-color: var(--dark-blue) !important;
}

.transactionmodal label.radio-field {
    text-align: right !important;
    gap: 9.5em;
}

.cal-img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius);
}

@media (max-width: 820px) {
    .cal-img {
/*        display: none;*/
    }
}

.input-group .input-field:last-child {
    border-bottom: 1px solid var(--bordercolor) !important;
}

/* ---------------------------- ADMIN SETTING ---------------------------------*/
.admin-password p {
    color: var(--para-grey);
}

.btn-right {
    bottom: 0;
    position: absolute;
    right: 0;
    margin: 20px;
}


.cal-container { 
    max-height: calc(100vh - 360px);
    overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
}


.poscal input { font-size:2em!important; }

.autofillbox { border: 1px solid var(--c4); border-radius: 30px; padding: .1em .5em; background: rgba(0,100,200,.05); font-size:.8em; transition:.5s all; white-space:nowrap; display: inline-block; margin: .2em;  }
.autofillbox:hover { background:var(--c2); color:var(--c1); }

.pos_card_container { border:1px solid rgba(0,0,0,.1); border-radius:7px; transition:.5s all; }
.pos_card_container:hover { border-color:var(--c2); }

.statusbadge { width:20px; height:20px; border-radius:100%; display:inline-block; background:rgba(0,0,0,.2); }
.statusbadge.SUCCESS { background:green; }
.statusbadge.FAILED { background:orangered; }
.statusbadge.PENDING { background:orange; }
.statusbadge.REFUNDED { background:purple; }

.orderitem:hover,.orderitem.active { background:rgba(0,0,0,.05); }

alink { color:rgba(0,0,0,.7)!important; }

.row-REFUNDED { pointer-events:none; cursor:not-allowed; background:rgba(200,0,0,.01); opacity:.5; }

.tblnoval:empty { display:none; }
.tblnoval:not(:empty) { color:var(--c3); }

.inrow-REFUNDED,.inrow-REFUNDED td { text-decoration: line-through; opacity:.8; }
.see-estimate { display:none!important; padding:0px!important; }

.discount-place { position:relative; }
.voucherclosebtn { background:var(--c5); color:var(--c1); width:1%; text-align: center; display: none; position:absolute; transition:.5s all; }
.discount-place:hover .voucherclosebtn {  display:block; width:50%; border-radius:var(--radius); }


.currencybtnbox { display:grid; grid-template-rows:50px 1fr 50px; }
.crnoverflow { display:grid; overflow:hidden; overflow-y:auto; }
.currencybtnbox .btn::before { content:"R" }