.demo-wrapper,
.demo-wrapper *{
    box-sizing:border-box;
}

.demo-wrapper{
    /* background:#f2f2f2; */
    /* font-family:-apple-system,BlinkMacSystemFont,sans-serif; */
    display:flex;
    justify-content:center;
}

.phone {
    position: relative;
    width: 320px;
    height:650px;
    background:black;
    border-radius:40px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 0 50px rgba(0,0,0,.5);
    /* font-family:-apple-system,BlinkMacSystemFont,sans-serif; */
}

.statusbar{
    height:46px;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    font-size:14px;
}


/* TOP PANEL **************************/
.top-panel{
    margin:10px;
    height:50px;
    background:#3a3a3a;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px;
}
.top-panel-nocolor{
    margin:10px;
    height:40px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px;
}
.total{
    color:#61d85b;
    font-size:32px;
    font-weight:300;
}

.btn-red{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:#4b1e1e;
    color:#ff7676;
    font-size:20px;
}
.btn-red-noback {
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:transparent;
    color:#ff7676;
    font-size:214x;
}
.btn-green{
    width:36px;
    height:36px;
    border:none;
    background: #134015;
    color:#048219;
    font-size:20px;
    border-radius:10px;
}
.btn-green-noback {
    width:36px;
    height:36px;
    border:none;
    background: transparent;
    color:#048219;
    font-size:20px;
}
.btn-blue {
    width:36px;
    height:36px;
    border:none;
    background: transparent;
    color:#039BE5;
    font-size:20px;
}
.btn-gray {
    border-radius:10px;
    height:36px;
    background: #222224;
    color:white;
    font-size:14px;
    border:none;
}







/* podujatie ... vyhladavanie ********************/
.market-row{
    display:flex;
    align-items:center;
    gap:5px;
    padding:10px;
    position:relative;
}
.market-name{
    
    border-radius:12px;
    padding:6px 8px;
    color:white;
    font-size:16px;
}
.market-cart{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.market-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:4px;
}


/* LAVA - PRAVA strana ***************/
.content{
    flex:1;
    display:flex;
    overflow:hidden;
}

/* LAVA strana ********************/
.categories{
    width:80px;
    overflow-y:auto;
    padding:0 4px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.categories::-webkit-scrollbar{
    display:none;
}
.categori{
    width:100%;
    border:none;
    color:white;
    border-radius:8px;
    padding:6px;
    margin-bottom:4px;
    font-size:12px;
}
.gray{
    background:#8e8e93;
}
.red{
    background:#972d22;
}
.blue{
    background:#244d9e;
}
.green{
    background:#3e7f42;
}
.yellow{
    background:#a28b21;
}


/* PRAVA strana ********************/
.products{
    flex:1;
    overflow-y:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
    padding-right:6px;
    align-content:start;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.products::-webkit-scrollbar{
    display:none;
}

.product{
    display:flex;
    flex-direction:column;
    color:white;
    border-radius:12px;
    padding:6px;
    height:fit-content;
}

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:16px;
    color:white;
    padding-top:10px;
}

.price{
    background:#4b1e1e;
    color:white;
    border-radius:10px;
    font-size:18px;
    padding:4px 8px;
    border:none;
}

.icon-x{
    background:#4b1e1e;
    color:#ff7676;
    border-radius:6px;
    font-size:12px;
    padding:4px 6px;
    border:none;
}



/*****************************************/
/* PREHLAD *******************************/
.filter-btn{
    border:none;
    border-radius:10px;
    background:#1f2025;
    color:white;
    font-size:16px;
    padding:8px;
    min-width:max-content;
    white-space:nowrap;
}

.sales-list{
    flex:1;
    overflow-y:auto;
    padding:8px;
    scrollbar-width:none;
}

.sales-list::-webkit-scrollbar{
    display:none;
}

.sale-card{
    background:#1d1d21;
    border-radius:18px;
    padding:8px;
}

.sale-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sale-event{
    color:#4d96ff;
    font-size:14px;
}

.sale-icons{
    display:flex;
    gap:18px;
    font-size:24px;
}

.sale-icons .fa-print{
    color:#4d96ff;
}

.sale-icons .fa-money-bill-1{
    color:#69d36e;
}

.sale-body{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    align-items:center;
    color: white;
}

/* BOTTOM ************************************/
.page{
    display:none;
    height:100%;
}

.page.active{
    display:block;
}

.nav-btn{
    background:none;
    border:none;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.bottom-nav{
    height:80px;
    background:rgba(40,40,40,.95);
    display:flex;
    justify-content:space-around;
    align-items:center;
    backdrop-filter:blur(10px);
    font-size: 18px;
}

.bottom-nav .active{
    color:#3ea0ff;
    text-align: left;
}


/* DropDown ************************************/
.market-selector{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    
}

.market-name {
    cursor:pointer;
}

.market-dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width: auto;
    background:#2f2f2f;
    /* border:1px solid #555; */
    border-radius:12px;
    padding: 10px;
    margin-top:4px;
    overflow:hidden;
    z-index:99999;
}

.market-dropdown.show{
    display:block;
}

.market-dropdown div{
    padding:10px;
    color:white;
    cursor:pointer;
}

.market-dropdown div:hover{
    background:#3f3f3f;
}


/* PAYMENT MODAL *******************************/
.payment-modal {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 5000;
    align-items: center;
    justify-content: center;
}

.payment-modal.show {
    display: flex;
}

.payment-window{
    width: 280px;
    height:360px;
    background:black;
    border-radius:40px;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:20px;
}

.payment-window h2{
    font-size:24px;
    margin:10px 0;
}

.payment-total{
    font-size:40px;
    margin:0 0 20px;
}

.payment-print-row{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.payment-print-row input{
    width:30px;
    height:30px;
}

.payment-methods{
    margin-top:auto;
    width:100%;
    display:flex;
    justify-content:space-around;
    text-align:center;
    font-size:14px;
}

.payment-close{
    margin-top:auto;
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    font-size:24px;
}




/* TOVAR ********************/
.top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:6px
}
.title{
    margin:0;
    font-size:18px;
    line-height:1.1
}

.icons{
    display:flex;
    flex-direction:column;
    gap:6px
}
.ico{
    padding: 4px;
    border-radius:4px;
}

.bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:8px
}
.stock{
    padding:4px 6px;
    font-size:18px
}



/* SETTING ***********************************/
.card-set{
    background:#18181c;
    border-radius: 10px;
    padding:4px 8;
    overflow:hidden;
    margin: 10px;
}

.row-set{
    height:50px;
    display:flex;
    align-items:center;
    padding:0 14px;
    color:white;
    font-size:16px;
}

.row-set i:first-child{
    font-size:16px;
}

.row-set span{
    flex:none;
    margin-left:12px;
}

.row-set i:last-child{
    margin-left:auto;
}


/* @media (max-width: 900px) {
    .phone{
        max-width: 320px;
        min-width: 320px;
    }
    .payment-window{
        width: 290px;
    }
}
@media (max-width: 700px) {
    .phone{
        max-width: 320px;
        min-width: 320px;
    }
    .payment-window{
        width: 290px;
    }
}
@media (max-width: 520px) {
    .phone{
        max-width: 320px;
        min-width: 320px;
    }
    .payment-window{
        width: 290px;
    }
} */