@charset "utf-8";
/* CSS Document */
body{margin: 0;}
/*
.main-menu ul li{display: inline-block; padding: 4px;}
.main-menu ul li a{ display: inline-block; font-size: 18px; background: #200E84; color: #FFFFFF; padding: 10px; text-decoration: none;}
.main-menu ul li a:active{background: #00A0D1;}
.sub-menu ul li {display: inline-block; padding: 4px;}
.sub-menu ul li a{ display: inline-block; font-size: 16px; background: #000207; color: #FFFFFF; padding: 10px; text-decoration: none;}

.logo{ width:60px;}
.sub-menu ul li a:active{background: #00A0D1;}*/

.sub-menu{display:inline-block;top:100%;left:0;z-index:1;background-color:#fff;border:1px solid #ccc;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.sub-menu ul{list-style:none;margin:0;padding:0}
.sub-menu li{margin-right:0;display:inline-block;margin-bottom:5px}
.sub-menu a{display:block;padding:8px 16px;color:#333;text-decoration:none;transition:background-color .2s ease-in-out}
.sub-menu a:hover{background-color:#f2f2f2}
header{display:flex;justify-content:space-between;align-items:center;background-color:#fff;padding:10px 20px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.logo-wrapper{display:flex;align-items:center}
.logo{max-width:100px;height:auto;margin-right:10px}
nav.main-menu ul{list-style:none;margin:0;padding:0;display:flex}
nav.main-menu li{margin-right:20px}
nav.main-menu li:last-child{margin-right:0}
nav.main-menu a{text-decoration:none;color:#333;font-weight:bold;transition:color 0.2s ease-in-out}
nav.main-menu a:hover{color:#008CBA}

.customer-selection input{ padding: 18px; font-size: 18px;}
.item-list-wrapper{}
.item-list-wrapper ol li:nth-child(2n){background: #F1F1F1;}
.item-list-wrapper ol li h2{color: #3C3D3D; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";  padding: 5px;}
.left-wrap{display:  inline-block;}
.right-wrap{display: inline-block; margin-left: 30px;}
.item-list-wrapper ol li .left-wrap .item-img{border: solid #C2C1C2 2px; display: inline-block;}
.thumbnail img{width: 80px;}
.item-list-wrapper .actionbutton{ background: #7A0004; color: #FFFFFF; text-decoration: none; width: 150px; height:20px; text-align:center; margin:0 0 5px 0; display:inline-block; }
.overlay{background:rgba(255,255,255,0.9); overflow:scroll; width: 100%; height: 100%; position: fixed; display: none;}
.itemid{display:inline-block; padding:0 10px;}
.itemname{display:inline-block}
.savedcategories ul{ overflow:scroll; height:300px;}
.savedcategories ul li{ background:#F1F0FF; padding: 10px 0; font-size:24px;}
.savedcategories ul li:nth-child(2n){background:#EBEBEB;}
#newcatadd input,#newcatadd select, #newcatadd textarea{ padding:10px;}
.block{display:block;}
.inline{display:inline-block;}

.additemform{ }
.additemform input, .additemform select{ margin:5px;padding:10px;}
.additemform .itemname input{width:50%;}
.additemform label{ width:100px; display:inline-block;}
.additemform textarea{ padding:10px; margin:5px; height:50px;}
.additemform button{ padding:10px; margin:20px;}

#barcodegen{cursor:pointer;  padding:10px; border:solid 1px; background:#CCC; display:inline-block;}

.wrapper{ width:100%; display:block; margin:0 auto;}
.inner-wrapper{}
.heading-wrapper{ text-align:center;}
.login-form-wrapper div{ padding:5px 0;}
.login-form-wrapper input, .login-form-wrapper button{ padding:10px 0; display:block; margin:0 auto;}
.stock-table{ text-align:center;}


#addnewcustomer{max-width:500px;margin:0 auto;font-family:Arial,sans-serif;background-color:#f2f2f2;padding:20px;border-radius:5px}
#addnewcustomer .form-group{margin-bottom:15px}
#addnewcustomer label{display:block;font-weight:bold;margin-bottom:5px}
#addnewcustomer span{color:red}
#addnewcustomer input[type="number"],#addnewcustomer input[type="text"]{display:block;width:100%;padding:10px;border:none;border-radius:5px;background-color:#fff;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:16px}
#addnewcustomer button{padding:10px 20px;background-color:#4CAF50;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:all .3s ease-in-out}
#addnewcustomer button:hover{background-color:#3e8e41}

#cart{margin:20px auto;width:80%;border:1px solid #ccc;border-radius:5px;padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.2)}
#cart h2{font-size:24px;margin-bottom:10px}
#cart table{width:100%;border-collapse:collapse}
#cart th,#cart td{padding:10px;text-align:center;border:1px solid #ccc}
#cart th{background-color:#f7f7f7}
#cart tfoot th{text-align:right}
#total{font-weight:bold}
#cart button{background-color:#008CBA;color:#fff;border:none;padding:10px;border-radius:5px;cursor:pointer;font-size:16px}
#cart button:hover{background-color:#006687}

#add-product-to-bill{margin:20px auto;width:80%}
#add-product-to-bill label{font-size:18px;display:inline-block;width:50px;margin-right:10px}
#add-product-to-bill input{font-size:16px;padding:5px;border-radius:5px;border:1px solid #ccc}
#add-product-to-bill input:focus{outline:none;border-color:#008CBA}

.minified .image-upload{margin-bottom:20px}
.image-upload form{display:flex;align-items:center;justify-content:space-between;border:1px solid #ccc;padding:10px}
.image-upload form input[type="file"]{flex:1;margin-right:10px}
.image-upload form button{background-color:#4CAF50;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer}
.image-gallery{}
.image-viewer{display:inline-block; }
.image-thumbnails{display:inline-block; float:left;}
.image-thumbnails .thumbnail{display:block; width:50px; margin:5px; border:solid 2px #FFFFFF; width:50px; height:50px;}
.image-thumbnails .thumbnail:hover {border-color:#09F;}
.highlighted-image{display:inline-block; max-width:500px;}
.highlighted-image .highlighted{width:500px;}
.imageaction{ display:inline-block;float:right; padding:20px 0;}
.deleteimage{ padding:20px 0;}
.customer-info { font-size:16px; text-align:center;
}
.customer-info div {display:inline-block; padding: 5px 20px; background:#F4F4F4;}
.label {
  font-weight: bold;
}
.value {
  margin-left: 10px;
}
#boughtitemwrapper input[type=number]{width:80px}

#qricon{ padding:10px; 
background:url(../images/fix/qr.png);
background-size: contain;
display: inline-block;
}


.qrcontainer {
	width: 100%;
	max-width: 500px;
	margin: 5px;
}

.qrcontainer h1 {
	color: #ffffff;
}

.qrcontainer .section {
	background-color: #ffffff;
	padding: 50px 30px;
	border: 1.5px solid #b2b2b2;
	border-radius: 0.25em;
	box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
}

.qrcontainer #my-qr-reader {
	padding: 20px !important;
	border: 1.5px solid #b2b2b2 !important;
	border-radius: 8px;
}

.qrcontainer #my-qr-reader img[alt="Info icon"] {
	display: none;
}

.qrcontainer #my-qr-reader img[alt="Camera based scan"] {
	width: 100px !important;
	height: 100px !important;
}

.qrcontainer button {
	padding: 10px 20px;
	border: 1px solid #b2b2b2;
	outline: none;
	border-radius: 0.25em;
	color: white;
	font-size: 15px;
	cursor: pointer;
	margin-top: 15px;
	margin-bottom: 10px;
	background-color: #008000ad;
	transition: 0.3s background-color;
}

.qrcontainer button:hover {
	background-color: #008000;
}

.qrcontainer #html5-qrcode-anchor-scan-type-change {
	text-decoration: none !important;
	color: #1d9bf0;
}

.qrcontainer video {
	width: 100% !important;
	border: 1px solid #b2b2b2 !important;
	border-radius: 0.25em;
}
.navigation-icon-container{display:none;}
.idnotice{font-size:12px; display:block; float:right;}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
 
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
display:block;
}

.active, .collapsible:hover {
  background-color: #555;
}
.searchresultbutton{
	display: inline-block;
    padding: 8px;
    background-color: #000;
    color: #fff;
	cursor:pointer;
	}
.iconforvariety{
	display: inline-block;
    padding: 5px;
    background: #179234;
    color: #fff;
    margin: 5px;
	}	
#varietytype{
	display:inline-block;
	}
@media screen and (max-width: 1000px){
	header{display:inline-block; padding:0; width:100%;}
	.logo-wrapper{display:block}
	.logo{ max-width:none; margin:0 auto; display:block;}
	.main-menu{display:block; background:#F7F7F7;}
	.main-menu ul{ display:inline-block !important;width:100%; font-size:24px;}
	.main-menu ul li{ display:none;}
	.main-menu ul li a{display:block; padding:10px;}
	.main-menu ul li a:hover{background-color:#E9E9E9;}
	.navigation-icon-container{display:block !important;}
	.idnotice{ float:none; display:inline-block;}
	.customer-selection input {padding:10px 0; font-size:24px; width:100%;}
	#add-product-to-bill label {display:block;}
	#add-product-to-bill input{display:block; font-size:24px; width:100%;}
	#qricon{padding:36px;}
	#cart{ margin:auto; width:auto;}
	#cart tr, #cart th{font-size:8px; padding:10px 0;}
	#cart tr th input{width:50px; font-size:8px;}
	#boughtitemwrapper input[type=number]{width:30px; font-size:9px;}
	.login-form-wrapper input, .login-form-wrapper button{ width:90%;  font-size:36px; padding:20px 0; margin:0 auto;}
}