<!DOCTYPE html>
<html lang="en" data-layout-mode="light_mode">
<head>

	<!-- Meta Tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Dreams POS is a powerful Bootstrap based Inventory Management Admin Template designed for businesses, offering seamless invoicing, project tracking, and estimates.">
	<meta name="keywords" content="inventory management, admin dashboard, bootstrap template, invoicing, estimates, business management, responsive admin, POS system">
	<meta name="author" content="Dreams Technologies">
	<meta name="robots" content="index, follow">
	<title>Fairuz POS</title>

	<script src="<?= base_url('assets/js/theme-script.js');?>" type="447bd403717e50bb989fc908-text/javascript"></script>	

	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="<?= base_url('assets/img/faviconx.png');?>">

	<!-- Apple Touch Icon -->
	<link rel="apple-touch-icon" sizes="180x180" href="<?= base_url('assets/img/apple-touch-icon.png');?>">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap.min.css');?>">

	<!-- Datetimepicker CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-datetimepicker.min.css');?>">

	<!-- animation CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/animate.css');?>">
	
<!-- Feathericon CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/feather.css');?>">
	
	<!-- Quill CSS -->
    	<link rel="stylesheet" href="<?= base_url('assets/plugins/quill/quill.snow.css');?>">
    	
	<!-- Select2 CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/select2/css/select2.min.css');?>">
	
<!-- Bootstrap Tagsinput CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css');?>">
	
	<!-- Datatable CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/dataTables.bootstrap5.min.css');?>">
	
	<!-- Daterangepikcer CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/daterangepicker/daterangepicker.css');?>">
	
<!-- Tabler Icon CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/tabler-icons/tabler-icons.min.css ');?>">
	
	<!-- Fontawesome CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/fontawesome/css/fontawesome.min.css');?>">
	<link rel="stylesheet" href="<?= base_url('assets/plugins/fontawesome/css/all.min.css');?>">

	<!-- Color Picker Css -->
	<link rel="stylesheet" href="<?= base_url('assets/plugins/%40simonwep/pickr/themes/nano.min.css');?>">

	<!-- Main CSS -->
	<link rel="stylesheet" href="<?= base_url('assets/css/style.css');?>">


<style>
.phone-img {
    position: relative;
    z-index: 1;
    margin-top: 10px;
}
.image-box {
    position: relative;
    flex: 0 0 auto;
}

.image-upload {
    position: relative;
    z-index: 10;
    margin-bottom: 15px;   /* space below upload box */
}

.image-box img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* remove button */
.remove-img {
    position: absolute;
    top: 4px;
    right: 4px;
    background: red;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

</style>

</head>