<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<title>pos</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<form class="head-search-bar form-inline my-2 my-lg-0 ml-md-4 mr-auto position-relative">
<a href="#" class="search-icon" type="submit"><i class="fa fa-search"></i></a>
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="images/avtar.png" class="avtar-img rounded-circle img-fluid"> Jhon
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
<!-- <div class="collapse navbar-collapse" id="navbarSupportedContent">
</div> -->
</div>
</nav>
<div class="main-box d-flex w-100 flex-wrap">
<div class="side-bar bg-theme-dark">
<ul class="side-bar-links pl-0 mt-md-5 pt-md-4 w-100">
<li><a href="#" class="d-flex w-100 px-3 flex-column align-items-center"><i class="fa fa-glass"></i>DRINK</a></li>
<li><a href="#" class="d-flex w-100 px-3 flex-column align-items-center"><i class="fa fa-cutlery"></i>FOODK</a></li>
<li><a href="#" class="d-flex w-100 px-3 flex-column align-items-center"><i class="fa fa fa-file-text-o"></i>BILLS</a></li>
<li><a href="#" class="d-flex w-100 px-3 flex-column align-items-center"><i class="fa fa-cog"></i>SETTINGS</a></li>
</ul>
</div>
<div class="body-box bg-theme-light">
<div class="top-bar-listing bg-theme-medium d-inline-flex w-100">
<div class="row w-100 mx-auto">
<div class="col-md-10 col-sm-12 pl-md-0">
<div class="num-listing-container d-flex w-100 flex-wrap">
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>01</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>02</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>03</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>04</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>05</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>06</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>07</h1>
</a>
</div>
<div class="num-box d-flex align-items-center flex-column justify-content-center position-relative">
<a href="#" class="num-link">
<label>Table</label>
<h1>08</h1>
</a>
</div>
<div id="down-btn" class="down-arrow">
<i class="fa fa-angle-down"></i>
</div>
</div>
</div>
<div class="col-md-2">
<div class="new-table-btn text-md-right">
<a href="#" class="btn btn-theme">NEW TABLE</a>
</div>
</div>
<div id="up-btn" class="down-arrow">
<i class="fa fa-angle-up"></i>
</div>
</div>
</div>
<div class="body-content">
<div class="row">
<div class="col-md-8">
<ul class="tabs-bar d-flex align-items-center w-100 desktop-vue">
<li class="tab-item tab-active"><a href="#" class="tabs-btn "><i class="fa fa-coffee pr-2"></i>Coffee</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-coffee pr-2"></i>Tea</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-beer pr-2"></i>Beer</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-vine pr-2"></i>Wine</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-glass pr-2"></i>Juices</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-coffee pr-2"></i>Coffee</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-coffee pr-2"></i>Tea</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-beer pr-2"></i>Beer</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-vine pr-2"></i>Wine</a></li>
<li class="tab-item"><a href="#" class="tabs-btn"><i class="fa fa-glass pr-2"></i>Juices</a></li>
</ul>
<div class="mobile-vue swiper-tabs tabs-bar overflow-hidden position-relative">
<div class="swiper-wrapper">
<div class="swiper-slide tab-item">
<a href="#" class="tabs-btn"><i class="fa fa-coffee pr-2"></i>Coffee</a>
</div>
<div class="swiper-slide tab-item">
<a href="#" class="tabs-btn"><i class="fa fa-coffee pr-2"></i>Tea</a>
</div>
<div class="swiper-slide tab-item">
<a href="#" class="tabs-btn"><i class="fa fa-beer pr-2"></i>Beer</a>
</div>
<div class="swiper-slide tab-item">
<a href="#" class="tabs-btn"><i class="fa fa-vine pr-2"></i>Wine</a>
</div>
<div class="swiper-slide tab-item">
<a href="#" class="tabs-btn"><i class="fa fa-glass pr-2"></i>Juices</a>
</div>
</div>
<div class="swiper-button-next swiper-n-a"></div>
<div class="swiper-button-prev swiper-p-a"></div>
</div>
<div class="product-categories overflow-hidden mt-4">
<div class="swiper-cat">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="row w-100 mx-auto">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row w-100 mx-auto">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row w-100 mx-auto">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row w-100 mx-auto">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="items-box d-inline-flex flex-column w-100 justify-content-center align-items-center">
<img src="https://img2.pngio.com/coffee-cup-png-image-coffee-png-coffee-cups-cheap-coffee-maker-barista-cafe-png-2634_1894.png" class="img-fluid mb-3">
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
<div class="hover-box d-flex align-items-center justify-content-center flex-column">
<div class="qty mb-4">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
<a href="#" class="product-name">Affogat</a>
<p class="price">$3.03</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="checkout-details mt-4 mt-md-0">
<ul class="nav nav-tabs border-bottom-0 checkout-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link success active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-credit-card pr-2"></i>Checkout</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-list pr-2"></i>Order</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fa fa-history pr-2"></i>History</a>
</li>
</ul>
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="checkout-table overflow-hidden">
<div class="table-title">
<h2>Table</h2>
<p class="mb-0">Jhon</p>
</div>
<div class="table-responsive">
<table class="table">
<tr class="success-hover" >
<td class="pro-name"><h3>cafe lafe</h3><span class="price">Price: $3.20</span></td>
<td>
<div class="qty ">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1" disabled="">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
</td>
<td class="finial-price">Price: $3.20</td>
</tr>
<tr class="success-hover">
<td class="pro-name"><h3>cafe lafe</h3><span class="price">Price: $3.20</span></td>
<td class="add-quantity">
<div class="qty ">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1" disabled="">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
</td>
<td class="finial-price">Price: $3.20</td>
</tr>
<tr class="success-hover">
<td class="pro-name"><h3>cafe lafe</h3><span class="price">Price: $3.20</span></td>
<td class="add-quantity">
<div class="qty ">
<span class="minus"><i class="fa fa-minus"></i></span>
<input type="number" class="count" name="qty" value="1" disabled="">
<span class="plus"><i class="fa fa-plus"></i></span>
</div>
</td>
<td class="finial-price">Price: $3.20</td>
</tr>
<tr class="new-added position-relative overflow-hidden">
<td class="pro-name"><h3>cafe lafe</h3><span class="price">Price: $3.20</span></td>
<td class="add-quantity">
1
</td>
<td class="finial-price cancel d-flex">Price: $3.20
<a href="#" class="cross-btn d-flex align-items-center justify-content-center flex-column"><i class="fa fa-times"></i> Delet</a>
</td>
</tr>
<tr class="">
<td colspan="2" class="pro-name"><h3>Subtotal</h3></td>
<td class="finial-price">Price: $3.20</td>
</tr>
<tr class="">
<td colspan="2" class="pro-name border-top-0"><h3>Tax</h3></td>
<td class="finial-price border-top-0">Price: $1.20</td>
</tr>
<tr class="">
<td colspan="2" class="pro-name"><h3>total</h3></td>
<td class="total-price">Price: $3.20</td>
</tr>
</table>
</div>
<div class="checkout-btns-box px-4 my-3">
<a href="#" class="btn btn-success btn-block mb-2">Checkout</a>
<a href="#" class="btn btn-default btn-block">Order</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#down-btn').click(function(){
jQuery('.top-bar-listing').addClass('show');
jQuery('body').addClass('no-scroll');
});
jQuery('#up-btn').click(function(){
jQuery('.top-bar-listing').removeClass('show');
jQuery('body').removeClass('no-scroll');
});
///top bar dropdown end
jQuery('.count').prop('disabled', true);
jQuery(document).on('click','.plus',function(){
jQuery('.count').val(parseInt(jQuery('.count').val()) + 1 );
});
jQuery(document).on('click','.minus',function(){
jQuery('.count').val(parseInt(jQuery('.count').val()) - 1 );
if (jQuery('.count').val() == 0) {
jQuery('.count').val(1);
}
});
});
///// tabs active class
jQuery('.tabs-btn').click(function(){
jQuery(".tab-item").not(this).removeClass("tab-active");
jQuery(this).closest(".tab-item").toggleClass('tab-active');
});
/// slide script
var swiper = new Swiper('.swiper-cat', {
slidesPerView: 1,
spaceBetween: 0,
speed: 1000,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
/// tab slide script
var swiper = new Swiper('.swiper-tabs', {
slidesPerView: 2,
spaceBetween: 15,
loop:true,
speed: 1000,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
navigation: {
nextEl: '.swiper-n-a',
prevEl: '.swiper-p-a',
},
breakpoints: {
// when window width is <= 499px
499: {
slidesPerView: 3,
},
}
});
</script>
</body>
</html>
@font-face{
font-family: 'Poppins-L';
src:url('../fonts/Poppins-Light.otf');
}
@font-face{
font-family: 'Poppins-R';
src:url('../fonts/Poppins-Regular.otf');
}
@font-face{
font-family: 'Poppins-M';
src:url('../fonts/Poppins-Medium.otf');
}
@font-face{
font-family: 'Poppins-SB';
src:url('../fonts/Poppins-SemiBold.otf');
}
@font-face{
font-family: 'Poppins-B';
src:url('../fonts/Poppins-Bold.otf');
}
body{
padding: 0;
margin:0;
font-family: 'Poppins' !important;
}
.bg-theme-dark{
background-color:#071018;
}
.bg-theme-medium{
background-color:#080821;
}
.bg-theme-light{
background-color:#101d38;
}
.navbar.bg-light{
background-color:#071018 !important;
}
.navbar.bg-light .navbar-brand{
color: #fff;
}
.navbar.bg-light .head-search-bar .search-icon{
position: absolute;
left: 5px;
color:#6c757d;
font-size: 14px;
z-index: 9;
}
.navbar.bg-light .head-search-bar input{
background-color: transparent;
height: 35px;
border:0px;
box-shadow: 0px 0px 0px;
border-radius:0px;
color:#6c757d;
padding-left: 30px;
position: relative;
}
.navbar .navbar-nav .nav-item a.nav-link{
color: #fff;
font-size: 12px;
font-family: 'Poppins-R';
}
.navbar .navbar-nav .nav-item a.nav-link .avtar-img{
width:30px;
height: 30px;
margin-right: 10px;
}
.navbar-expand-lg .navbar-nav .dropdown-menu{
position: absolute;
left: auto;
right: 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item{
font-size:14px;
font-family: 'Poppins-R';
color:#101d38;
}
.main-box .side-bar{
display: inline-flex;
width: 90px;
min-height: 100vh;
}
.main-box .body-box{
display: inline-block;
padding: 0px;
width: calc(100% - 90px);
height: 100%;
min-height: 100vh;
position: relative;
}
.side-bar-links li a{
color:#fff;
font-size: 12px;
font-family:'Poppins';
transition: ease 0.5s;
border-left:2px solid transparent;
padding: 15px 0px;
}
.side-bar-links li a i{
margin-bottom: 5px;
font-size:14px;
}
.side-bar-links li a:hover{
border-color:#ff9c6b;
color:#ff9c6b;
text-decoration: none;
}
body.no-scroll{
overflow-y: hidden;
}
.top-bar-listing{
position: absolute;
top:0;
left: 0;
height: 76px;
border-top:1px solid rgba(255,255,255,0.2);
transition: ease 0.5s;
z-index: 99;
}
.top-bar-listing.show{
height:calc(100vh - 60px);
overflow-y: auto;
}
.top-bar-listing .num-listing-container{
height: 76px;
overflow: hidden;
}
.top-bar-listing.show .num-listing-container{
height: auto;
}
.top-bar-listing .num-box{
width: 12.5%;
height: 76px;
transition: ease 0.5s;
overflow: hidden;
z-index: 9;
}
.top-bar-listing .num-box a:hover{
text-decoration: none;
}
.top-bar-listing .num-box:after{
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background-color: #1a2538;
transition: ease 0.5s;
transform: translateY(76px);
z-index: -1;
}
.top-bar-listing .num-box:before{
content: '';
position: absolute;
bottom:0;
left:0;
width:0%;
height:2px;
background-color: #ff9f68;
transition: ease 0.5s;
}
.top-bar-listing .num-box:hover:after{
transform: translateY(0px);
}
.top-bar-listing .num-box:hover:before{
width: 100%;
}
.top-bar-listing .num-box label{
font-size: 12px;
color:#fff;
margin-bottom: 0px;
font-family: 'Poppins';
}
.top-bar-listing .num-box H1{
font-size: 26px;
color:#fff;
font-family: 'Poppins-R';
letter-spacing: 3px;
margin: 0px;
}
.top-bar-listing .btn-theme{
margin-top: 19px;
}
.btn-theme{
display: inline-flex;
padding: 6px 25px;
border-radius: 50px;
color:#fff;
font-size: 14px;
background-color: #ff9f68;
transition: ease 0.5s;
box-shadow: 0px 1px 19px rgba(255,159,104,0.5 );
}
.btn-theme:hover{
background-color: #fff;
color:#ff9f68;
}
.down-arrow{
position: absolute;
bottom: -8px;
right: 0;
z-index: 9;
width: 20px;
height: 20px;
border-radius: 50px;
background-color: #4d5673;
color:#fff;
text-align: center;
cursor: pointer;
}
.top-bar-listing.show #down-btn{
display: none;
}
#up-btn{
position: fixed;
display: none;
right: 16%;
}
.top-bar-listing.show #up-btn{
display: block;
bottom: 0px;
line-height: 20px;
}
.body-box .body-content{
display: inline-block;
width: 100%;
padding: 30px 15px;
margin-top: 80px;
}
.body-box .body-content .tabs-bar{
overflow-x: auto;
overflow-y: visible;
padding: 12px 15px;
}
.tabs-bar::-webkit-scrollbar {
width: 0px;
height:2px;
border-radius:20px;
background-color: rgba(255, 255, 255, 0.3);
}
.tabs-bar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.tabs-bar::-webkit-scrollbar-thumb {
background-color: #fff;
}
.body-box .body-content .tabs-bar li{
list-style-type: none;
margin-right: 15px;
width: 14.333%;
min-width: 14.333%;
}
.body-box .body-content .tabs-bar a.tabs-btn{
font-family: 'Poppins';
font-size: 12px;
color: #fff;
border-radius: 50px;
padding:6px 20px ;
text-decoration: none;
text-align: center;
display: block;
font-weight:300;
}
.body-box .body-content .tabs-bar a:hover, .body-box .body-content .tabs-bar .tab-active a.tabs-btn{
background-color: #ff9c68;
box-shadow: 0px 1px 10px rgba(255,159,104,0.5);
}
/*** swiper navigation css start ******/
.swiper-tabs .swiper-button-next, .swiper-tabs .swiper-button-prev{
width:20px;
height: 20px;
top:75%;
background-color: #fff;
border-radius: 50%;
}
.swiper-tabs .swiper-button-next::after, .swiper-tabs .swiper-button-prev::after{
font-size:14px;
color: #ff9f68;
}
/*** swiper navigation css end ******/
.product-categories .items-box{
padding: 20px 15px;
background-color: #fff;
border-radius: 15px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.product-categories .items-box img{
width:100px;
}
.product-categories .items-box .product-name{
font-size:14px;
font-family: 'Poppins';
color:#000;
font-weight:500;
}
.product-categories .items-box .price{
font-size: 12px;
font-family: 'Poppins';
color:#444;
margin-bottom: 0px;
}
.product-categories .items-box .hover-box{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
padding: 20px 15px;
background-color: #ff9d66;
transform: translateY(100%);
transition: ease 0.5s;
}
.product-categories .items-box:hover .hover-box{
transform: translateY(0px);
}
.product-categories .items-box .hover-box a.product-name, .product-categories .items-box .hover-box .price{
color: #fff;
}
.product-categories .items-box:hover .hover-box .qty{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
.product-categories .items-box:hover .hover-box .qty span i{
color: #fff;
font-size: 18px;
}
.product-categories .items-box:hover .hover-box .qty .count{
width: 50px;
background-color: transparent;
border:0px;
box-shadow: 0px 0px 0px;
-webkit-appearance: none;
-moz-appearance: textfield;
text-align: center;
font-size: 18px;
color:#fff;
}
.swiper-cat .swiper-pagination{
position: relative;
}
.swiper-cat .swiper-pagination .swiper-pagination-bullet{
width:40px;
height: 5px;
border-radius: 10px;
background-color: rgba(225,225,225,0.7);
transition: ease 0.4s;
}
.swiper-cat .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
width: 120px;
background-color: #fff;
}
.checkout-details .checkout-tabs{
padding: 15px 0px;
}
.product-categories .swiper-cat{
overflow:hidden;
}
.checkout-details .checkout-tabs li a.nav-link{
font-size: 12px;
font-family: 'Poppins-R';
padding: 6px 20px;
color:#fff;
margin-right: 10px;
border-radius: 50px;
border: 0px;
}
.checkout-details .checkout-tabs li a.nav-link.success.active{
background-color: #4bc179;
box-shadow: 0px 1px 14px rgba(83,192,126,0.6);
}
.checkout-details .checkout-tabs li a.nav-link.active{
background-color: #ff9d66;
box-shadow: 0px 1px 14px rgba(255,159,104,0.6);
}
.checkout-table{
display: inline-block;
width: 100%;
border-radius:10px;
background-color: #fff;
position: relative;
}
.checkout-table::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background-image: url("../images/table-bg.png");
background-size: 100% 100%;
}
.checkout-table .table-title{
display: inline-block;
width: 100%;
padding: 15px 20px;
}
.checkout-table .table-title h2{
font-size:20px;
color:#000;
font-family: 'Poppins-M';
margin-bottom: 0px;
}
.checkout-table .table-title p{
font-size: 15px;
color:#ccc;
font-family: 'Poppins-L';
}
.checkout-table table tr td{
vertical-align: middle;
}
.checkout-table table tr.success-hover:hover{
background-color: #4cc079;
color:#fff;
}
.checkout-table table tr.success-hover:hover td.pro-name h3, .checkout-table table tr.success-hover:hover td.pro-name span.price, .checkout-table table tr.success-hover:hover .qty .count{
color:#fff;
}
.checkout-table table tr td.pro-name{
width: 150px;
}
.checkout-table table tr td.add-quantity{
width: 110px;
}
.checkout-table table tr td.pro-name h3{
font-size: 14px;
color:#000;
margin: 0px;
}
.checkout-table table tr td.pro-name span.price{
font-size:12px;
color:#ccc;
}
.checkout-table table tr td .qty span{
color: #fff;
font-size: 16px;
}
.checkout-table table tr td .qty .count{
width: 50px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance:textfield;
border: 0px;
box-shadow: 0px 0px 0px;
text-align: center;
}
.checkout-table table tr td.finial-price{
font-size:12px;
font-family: 'Poppins';
}
.checkout-table table tr.new-added td.add-quantity{
text-align: center;
}
.checkout-table table tr.new-added:hover {
background-color: transparent;
color: #000;
}
.checkout-table table tr.new-added:hover td.pro-name h3{
color:#000;
}
.checkout-table table tr.new-added:hover td.pro-name span.price{
color:#ccc;
}
.checkout-table table tr.new-added .cross-btn{
position: absolute;
top: 0;
right: 0;
width:0px;
height: 66px;
background-color: #fd7a83;
color:#fff;
transition: ease 0.5s;
font-size: 12px;
display: none !important;
}
/* .checkout-table table tr.new-added:hover .cross-btn{
width: 80px;
text-decoration: none;
} */
/* .checkout-table table tr.new-added:hover .cancel{
margin-right: 60px;
} */
.checkout-table table tr .total-price{
font-size: 14px;
color: #000;
}
.checkout-btns-box .btn-success{
border-radius: 50px;
}
.checkout-btns-box .btn-default{
color: #53c07e;;
}
.mobile-vue{
display: none;
}
@media (max-width:1024px) and (min-width:767px){
.top-bar-listing .btn-theme{
padding:6px 12px;
font-size:12px;
}
.body-box .body-content .tabs-bar li{
min-width: 25%;
}
}
@media (max-width:767px){
.top-bar-listing .num-box{
width: 19.5%;
}
.col-xs-6{
width:50%;
}
.body-box .body-content .tabs-bar li{
margin-bottom: 15px;
width:45.333%;
min-width: 45.333%;
}
.body-box .body-content .tabs-bar li a.tabs-btn{
display: block;
text-align: center;
}
.top-bar-listing.show{
height: calc(100vh - 65px);
}
.new-table-btn{
margin-bottom: 20px;
}
.top-bar-listing.show #up-btn{
right: 0px;
bottom: 12px;
}
.navbar.bg-light .head-search-bar input{
width:200px;
}
.navbar.bg-light{
padding: 0px 15px !important;
}
.new-table-btn{
display: none;
}
.top-bar-listing.show .new-table-btn{
display: block;
}
.desktop-vue{
display: none !important;
}
.mobile-vue{
display: block;
}
}
@media (max-width:410px){
.body-box .body-content .tabs-bar li{
width:44%;
}
.navbar.bg-light .head-search-bar input{
width:150px;
}
.top-bar-listing .num-box{
width:33.3%;
}
.col-xs-6{
width: 100%;
}
.body-box .body-content .tabs-bar li a.tabs-btn{
padding: 6px 12px;
}
.swiper-slide{
width:100% !important;
}
.main-box{
position: relative;
}
.main-box .side-bar{
position: absolute;
top:0;
left:0;
transform: translateX(-90px);
}
.main-box .body-box{
width: 100% !important;
}
.top-bar-listing.show{
height: calc(100vh - 52px);
}
.swiper-tabs .swiper-slide{
width:159px !important;
}
}
