/* 
	Theme Name: COFFEELOGUE SUCCESS
	Author: Yohanes Steven
	Theme URI: http://www.ysteven.com

	COLOR SCHEME
	-----------------------
	BLACK 		#000
	BROWN		#652502
	ORANGE		#31abff
	WHITE		#FFF

*/

/* 

	ART.LOGUE ESSENTIALS 
	AUTHOR : YOHANES STEVEN

*/

#floating-cart { position:fixed; z-index:89; bottom:0; padding-right:5%; margin:0; width:calc(100%); box-shadow:0px 0px 5px #DDD; box-sizing:border-box; background:#FFF; color:#222; line-height:40px; text-align:right; font-size:0.7em; }
#main-content { width:100%; height:100%; position:relative; }

@media print {

.pconly { display:none !important; }
.pconlytable { display:none !important; }
#mobile-header, #mobile-navigation { display:none !important }

}

#ui-datepicker-div { position:fixed !important; width:100% !important; height:100% !important; background:#FFF !important; z-index:2021 !important; left:0 !important; top:0 !important; padding:180px !important; }

.pconly { display:inline !important; } .mobileonly { display:none !important; } .printonly { display:none !important;}
.pconlytable { display:table-cell !important; } .mobileonlytable { display:none !important; }
.pconly.block { display:block !important; }

.left { float:left; } .right { float:right; } .middle { margin:0px auto; } .center { text-align:center; }
.text-left { text-align:left; } .text-right { text-align:right; } 
.no-border { border:0 !important; } .padding { padding:30px; } .pojok { margin-right:0 !important; }

.atable td:not(:first-child) { text-align:right !important; }
.atable.text-left-important td:not(:first-child) { text-align:left !important; }

strong, .bold { font-weight:500; } em { font-style:italic; }

.vcenter { height:100%; display:flex; align-items:center; }
.flex-center { justify-content: center; } .flex-left { justify-content: flex-start; } .flex-right { justify-content: flex-end; }

.col100 { width:100%; } .col90 { width:92%; } .col95 { width:95%; } .col80 { width:80%; } .col70 { width:70%; } .col60 { width:60%; } .col50 { width:50%; } .col45 { width:45%; } .col40 { width:40%; } .col30 { width:30%; } .col20 { width:20%; } .col10 { width:10%; } .col25 { width:25%; } .col75 { width:75%; } .col65 { width:65%; } .col5 { width:5%; } .col48 { width:47%; } .col4 { width:2.5%; }

.col45m { width:45%; } .col10m { width:10%; } .col50m { width:50%; } .col48m { width:47%; }

.col3box { width:32%; margin-right:2%; }

.nomargin { margin:0; }

.vpadding { padding-top:50px; padding-bottom:50px; } .vpadding20 { padding-top:20px; padding-bottom:0; } .border { border:1px solid #CCC; }

.text-small {font-size:0.8em;} .text-normal { font-size:1em; } .text-big { font-size:1.6em; }  .text-large { font-size:2em; } .text-huge { font-size:4em; }

.orange { color:#31abff; } .blue { color:#31abff; } .bgorange { background:#31abff; color:#FFF; } .bglight { background:#FAFAFA; }

 hr.grey { border:0.25px solid #CCC; max-width:30px; }


/* BODY */
* 		{ margin:0; padding:0 }
html	{ height:100%; }
body 	{ height:100%; background:#FAFAFA; font-family:"Rubik", Arial, Helvetica; font-weight:400; font-size:13px; color:#555; padding-top:60px; }

/* GENERAL */
.center { text-align:center; } .left { float:left; } .right { float:right; } .bottom { position:absolute; bottom:0; } .middle { margin:0 auto; }

.h100 { height:100%; }

.padding10 { padding:10px; box-sizing:border-box; }
.nopadding { padding:0 !important; }
.clear { clear:both; }

.card .text-big { position:relative; top:-2px; }

/* General text */
a { cursor:pointer; color:#31abff; }
.big { font-size:1.4em; } .bigger { font-size:2.4em; } .huge { font-size:3.6em; } 

#mobile_header, #mobile-navigation { display:none; }

/* HEADER */
#navbar { width:100%; background:#FFF; position:fixed;border-bottom:1px solid #EAEAEA; z-index:1000; padding:10px 0; top:0; }
#navbar .dropdown-menu { margin-top:5px; }
#navbar .dropdown-item { padding:8px 16px; display:block; width:200px; }

/* FOOTER */
footer 	{ height:50px; width:100%; text-align:center; color:#444; line-height:50px; position:fixed; z-index:2; background:#FFF; bottom:0; }

/* BACKGROUND */
#background	{ position:fixed; z-index:-1; min-width:100% !important;  }

/* PAGES */
#backtomenu { position:fixed; top:0; left:2.1%;background:#0077F5;  padding:5px 10px; z-index:10; }
#backtomenu a { color:#FFF;}
#product_side { position:relative; }

	#product_list { width:96%; font-size:11px; }
	.crm-box { width:96%; border:0px solid #EAEAEA; box-sizing:border-box; }
	
	.cat_button.pconly { display:flex !important; flex-direction:column; justify-content:space-around; padding:0 16px 0 0; }	
	.cat_button { width:20%; float:left; box-sizing:border-box; }	
	.cat_button div { font-size:1.1em; font-weight:normal; color:#FFF; flex:1 1 auto; padding:10px 16px; margin-bottom:4px; text-align:left; }
	.cat_button div:hover { cursor:pointer;	background:#EAEAEA !important; font-weight:normal; color:#FFF;  border-radius:10px !important; }
	
	.prodtab { box-shadow:0px 2px 5px #EAEAEA; background:#FFF; width:78%; float:right; box-sizing:border-box; padding:16px; border-radius:10px; } 
	
#transaction_side { position:relative; right:0; color:#444; border-radius:10px; }
	#shopping_cart { height:calc(100% - 230px); font-size:11px !important; margin-bottom:6%; } #frontpage #shopping_cart { height:80%; }
	#total_price { height:60px; vertical-align:middle; text-align:center; font-size:10px; padding:0 16px; }
	#pay_input { height:120px; padding:10px; position:absolute; bottom:6px; font-size:10px; }
	#prodlist { line-height:26px !important; padding:8px 8px 0 0; overflow-y:auto; max-height:100%; width:calc(100% + 8px); }
	#prodlist input[type="text"] { line-height:26px !important; height:26px !important; position:relative; top:1.5px; text-align:center; padding:0 !important; }
	#transaction_side select { border:0px solid #FFF; font-size:10px; }
	#shopping_cart.paddingonpc { padding:16px !important; }
	#pay_input.paddingonpc { padding:16px !important; }
	.product-items:not(:first-child) { border-top:1px solid #EAEAEA; } 
	
.employee_duty { width:100%; border:1px solid #EAEAEA; }
	
/* BOXES & TABLES */
.col30.left { width:27%; } 

@media screen and (max-width:999px) { 
	.col30.left { width:100%; } 
	.abox, .table-wrap { margin:0 !important; }
	.nomarginpadding-onmobile { margin:0 !important; padding:0 !important; }
}

.diskon_box { background:#000; padding:5px 10px; color:#FFF; }
div .table-wrap:first-of-type { margin-top:0; }
.abox { box-shadow:0px 2px 6px #EAEAEA; box-sizing:border-box; background:#FFF; padding:16px 24px; border-radius:10px; margin:0 -24px; }
.abox:not(:has(h2)) { padding:24px; }
.table-wrap { overflow-x:auto; box-shadow:0px 2px 6px #EAEAEA; box-sizing:border-box; background:#FFF; padding:16px 24px; border-radius:10px; margin:0 -24px; }
.col30 .col90 .table-wrap { margin-right:-14px; }
.col70 .col48.left .table-wrap { margin-right:-14px; }
.col70 .col48.right .table-wrap { margin:0 -4px; }
.col100 .col48.left .table-wrap { margin-right:-20px; }
.col100 .col48.right .table-wrap { margin-left:-20px; }
.table-wrap .atable { box-shadow:0px 0px 0px #FFF; box-sizing:border-box; }
.table-wrap h2, .abox h2 { font-size:1em; font-weight:normal; }

.atable { background:#FFF; box-shadow:0px 2px 6px #EAEAEA; border-radius:10px; }
.atable.has-tfoot tbody tr:last-child td { padding-bottom:12px; }
.atable thead td { border-bottom:0px solid #FFF; font-weight:normal; line-height:1.4em; font-size:1em; padding-top:6px !important; background:#FFF !important; }
.atable td:first-child { min-width:40px; padding-left:0; }
.atable td:last-child { padding-right:0; }
.atable td { padding:6px; text-align:center; font-weight:500; line-height:1.4em; font-size:1em; min-width:80px; overflow:hidden; white-space:nowrap; }
.atable.text-left td { text-align:left; }
.atable tr:nth-child(even) {  background-color: #FCFCFC; }
.atable tfoot td { vertical-align:top; border-top:0px solid #FFF; font-weight:bold; line-height:1.4em; font-size:1em; }
.atable tr:last-child .btn { position:relative; top:0; }
.table-wrap.card .atable thead td { border-bottom:0px solid #FFF; padding-bottom:0px !important; }
.atable tr:nth-child(1) td { padding-top:12px; }

.col30.opentr { 
	padding:24px; box-sizing:border-box; width:31.33%; border-radius:10px; margin:0 3% 30px 0; box-shadow:0px 2px 6px #EAEAEA; background:#FFF;
}
.col30.opentr.pojok { margin-right:0 !important; }


/* FORMS */

.chosen-container-single .chosen-single  { background: #FFF !important; border:1px solid #DDD !important; border-radius:4px !important; }
.chosen-container.chosen-with-drop .chosen-drop { border-radius:4px !important; border:1px solid #DDD !important; box-shadow:0px 2px 4px #EAEAEA !important; }
.chosen-search input { border:1px solid #DDD !important; border-radius:4px !important; }

/* #Miscellaneous */
.product:hover { background:#F2F2F2; }
input.product, a.product, div.product { width:14.285%; margin:0%; margin-bottom:0; border-radius:0; aspect-ratio:1/1; word-wrap:break-word; white-space: normal; float:left; background:#FFF; font-weight:500; font-size:1.1em; line-height:1em; display:block; }
input.product.btn1 { background:#222; color:#FFF; }
input.product.btn2 { background:#EEE; color:#652502; }
input.product.btn3 { background:#652502; color:#FFF; }
input.product.btn4 { background:#ee2200; color:#FFF; }
input.product.btn5 { background:#e3c19e; color:#000; }
input.product.btn6 { background:#0077F5; color:#FFF; }
input.product.btn7 { background:#652502; color:#FFF; }
input.product.btn8 { background:#04a900; color:#FFF; }
input.product.btn9 { background:#31abff; color:#FFF; }

#pay_input input, #pay_input select { font-size:1.2em; text-align:center; padding:0 30px; height:44px; color:#222; font-weight:bold; }
#pay_input input[type="button"] { background:#31abff; color:#FFF; border:0; text-align:center; }
#payment { text-align-last:center; font-weight:normal !important; }

.form-control { font-size:12px !important; }

/* #Login Form */
#login_form { width:25%; margin:30px auto 0 auto; background:none; padding:0; border:0px solid #CCC; box-shadow:0px 0px 0px #DDD; }
#login_form input { padding:10px; width:100%; box-sizing:border-box; margin:5px 0; }
#login_form input[type="submit"] { background:#31abff; color:#FFF; border:0; }

/* Member Registration Form */
.middle_box { width:25%; margin:0 4%; }
.middle_box.col50.left { width:48%; float:left; background:#FFF; padding:10px; border:0px solid #CCC; box-shadow:0px 0px 14px #EAEAEA; }
.middle_box.col50.right { width:48%; float:right; background:#FFF; padding:10px; border:0px solid #CCC; box-shadow:0px 0px 14px #EAEAEA; }
.middle_box form .btn.btn-block { margin:7px 0 0px 0 !important;  }
.middle_box form { background:#FFF; padding:24px; margin:0 -14px; border:0px solid #CCC; box-shadow:0px 0px 14px #EAEAEA; border-radius:10px; }
.middle_box input { padding:10px; width:100%; box-sizing:border-box; margin:0 0 7px 0; }
.middle_box input[type="date"], input[type="date"] { padding:0px 10px; }
.middle_box input[type="radio"] { width:auto; margin:5px; }
.middle_box input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { line-height:1em; padding:5px 10px; }
.middle_box select { padding:5px 10px; width:100%; margin:0 0 8px 0; display:block; }
.middle_box textarea { width:100%; padding:10px; border:1px solid #ccc; }
.middle_box h1, .middle_box h2 { text-align:left !important; padding-left:8px; }
input[type="datetime-local"] { width:100%; }

.userform .middle_box { margin:0 auto; }

.memo_left { float:left; width:25%; margin:0 0 0 5%; }
.memo_right { float:left; width:65%; margin:0 0 0 5%; }


/* TEXTS */
h1 { font-family:"Rubik", Arial, Helvetica; font-size:1.2em; font-weight:bold; text-transform:capitalize; }
h2 { font-family:"Rubik", Arial, Helvetica; font-size:1.1em; font-weight:bold; text-transform:capitalize; position:relative; top:8px; }
:not(.table-wrap):not(.abox) > h2 {  padding-left:0; }
h2.stats_cat_head { background:#FFF; color:#444; width:90%; margin:0 auto 30px auto; text-align:center; padding:10px 0; }
h3 { font-family:"Rubik", Arial, Helvetica; font-weight:bold; font-size:1em; padding:6px 0; text-align:left; margin:0 0 20px 0; border-bottom:1px solid #aaa; text-transform:capitalize; } 
p	{ margin:0 0 20px 0; line-height:1.4em; }

.col48onmobile p, .col48onmobilepojok p, .col48onmobile input[type="date"], .col48onmobilepojok input[type="date"], .col48onmobile input, .col48onmobilepojok input, .col48onmobile select, .col48onmobilepojok select { padding-left:auto !important; }

.send_to_printer { display:none; }


#new_member_form { width:100%; height:100%; position:fixed; background:#FFF; display:none; top:0; z-index:150; }
#new_member_form form { background:#FFF; width:50%; margin:0 auto; padding:30px; margin-top:100px; }
#new_member_form form div.col25 { height:35px; line-height:35px; }
#new_member_form form input { width:100%; height:35px; line-height:0; padding:0 15px; }
#new_member_form form input[type="date"] { line-height:34px; }

#signature_form { width:100%; height:100%; position:fixed; background:#FFF; top:0; z-index:150; }

#show_member_name { padding:0; line-height:40px; height:40px; display:none; text-align:left; }

/*FORMS*/
input, select { 
    padding: 4px 10px !important;
    font-weight: 400;
	font-size:11px;
    line-height: 18px !important;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
input[type="date"], input[type="month"] { padding:3px 10px !important; }
select { padding:4px 6px !important; line-height:18px; }
input[type="submit"] { background:#FAFAFA; color:#444; font-weight:bold; } 
input[type="submit"]:hover { background:#EAEAEA; color:#444; font-weight:bold; }
label { margin-bottom:4px; } 

.btn-warning { color: #555; background:rgba(255,193,7, 0.3); border:1px solid #ffc107; }
.btn-danger { color: #FFF; background:rgba(255,0,0, 0.8); border:1px solid #ffc107; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color:#FFF; background:#ffc107; }
.btn-warning:active, .btn-warning.active { color:#FFF; }
.btn.input-group-btn { border-radius:0 5px 5px 0 !important; }

.dropdown-item { font-size:0.8em; }

#memberbox { width:100%; }
.chosen-container { margin-top:-1px !important; width:100% !important; } 
.chosen-container-single .chosen-single { border-radius:0px; padding:4px 10px !important; box-shadow:0px 0px 0px #FFF; font-size:11px; line-height:20px !important; height:auto !important; width:100% !important; border:1px solid #17a2b8; }

.paddingonpc { padding:30px; }

.form-control.input-sm { font-size:90% !important; }

a.product { height:auto; text-align:center; color:#444; line-height:36px; padding:10px 10px 0 10px; object-fit:cover; border:1px solid #EAEAEA; min-height:300px; box-sizing:border-box; }
a.product { width:23%; margin-right:2%;  font-size:0.8em; }
a.product:hover { text-decoration:none; }

.btn { font-size:90%; }


/* SIGNATURE PAD */

.signature-pad {
  position: relative;
  width: 600px;
  height: 400px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
}

.signature-pad--body {
  position: relative;
  width: 100%;
  height: 100%;
  background:#000;
}

.signature-pad--body
canvas {    
  transform: scale(0.5) translate(-0%,-0%);
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
  width:100%;
}

.signature-pad--actions {
}

.btn-light { border:1px solid #CCC; background:#FCFCFC; color:#555; }

@media screen and (max-width: 1050px) {
	
    .middle_box { width:86%; }
	
	#login_form { width:86%; }
	
	.col30 { width:100%; } .col70 { width:100%; } .col65 { width:100%; } .col48 { width:100%; } .col4 { width:100%; }
	.col100 { width:100%; } .col90 { width:100%; } .col80 { width:100%; } .col70 { width:100%; } .col60 { width:100%; } .col50 { width:100%; } .col40 { width:100%; } .col30 { width:100%; } .col20 { width:100%; } .col10 { width:100%; } .col25 { width:100%; } .col75 { width:100%; } .col3box { width:100%; }
	
	#transaction_side { position:relative; font-size:80% }
	
}




/* MOBILE VIEW */
@media (max-width: 768px) {	

	body { padding-top:80px; }
	
	#export-to-excel { width:100%; }
	
	.paddingonpc { padding:16px; }

	#login_form { width:86%; }
	:not(.table-wrap):not(.abox) > h2 {  padding-left:20px; }

	.pconly, .pconly.block { display:none !important; } .mobileonly { display:inline-block !important; }
	.send_to_printer { display:inline-block; }
	
	.fullonmobile { width:100%; }
	.col90.fullonmobile { width:100%; margin-left:0 !important; margin-right:0 !important; }
	
	.col100 { width:100%; } .col90 { width:86%; } .col80 { width:100%; } .col70 { width:100%; } .col60 { width:100%; } .col50 { width:100%; } .col45 { width:100%; } .col40 { width:100%; } .col30 { width:100%; } .col20 { width:100%; } .col10 { width:100%; } .col25 { width:100%; } .col75 { width:100%; } .col3box { width:100%; } .col90.right { width:100%; }
	.col20mobile { width:20%; } .col60mobile { width:60%; } .col30.opentr { width:100%; }
	
	.vpadding.onlypc, .vpadding20.onlypc { padding:0; }
	
	.cat_button.pconly { display:none !important; }
	
	#prodlist { font-size:84%; width:103%; }
	
	#mobile_header { height:60px; line-height:60px; display:block; width:100%; position:fixed; z-index:1001; background:#FFF; border-bottom:1px solid #EAEAEA; top:0; padding:0 8%; }

	#mobile-navigation { width:100%; position:absolute; background:#FFF; display:none; top:0; left:0; z-index:-5; padding:18.25px 8% 30px 8%; }
	#mobile-navigation h2 { font-weight:bold; font-size:1.1em; display:block; text-transform:capitalize; line-height:40px; height:40px; width:100%; margin:10px 0 10px 0; color:#222; }
	#mobile-navigation a:not(.btn) { font-size:1em; display:block; text-transform:capitalize; line-height:30px; height:30px; border-bottom:1px solid #EAEAEA; width:100%; }
	#mobile-navigation a.btn:not(.col100) { width:48%; margin:0 0 10px 0; font-weight:bold; float:left; }
	#mobile-navigation a.btn.col100 { width:100%; margin:0 0 10px 0; font-weight:bold; }
	#mobile-navigation a.subnav { color:#777; font-size:1em; }
	#mobile-navigation .order { background:#31abff; color:#FFF; }
	#mobile-navigation .order:hover { background:#000; }
	#mobile-navigation a:hover { text-decoration:none; border-bottom:1px solid #AAA; }
	
	.hide-navigation-button { color:#FFF; position:fixed; right:7%; top:16px; line-height:30px; height:30px; padding:0 7px; font-size:16px !important; background:#31abff; z-index:10; border-radius:3px; }
	
	#mobile-navigation .fa { font-weight:thin; font-size:0.8em; }
	
	h1.site-title { font-size:1.2em; color:#FFF; font-weight:bold; margin:0; height:60px; line-height:60px; }
	
	#product_list { width:100%; position:relative; top:-3px; }
	
	.middle_box.col50.left, .middle_box.col50.right { width:100%; }
	.middle_box.col50.left { margin-bottom:30px; }
	
	.abox { width:100% !important; }
	
	.cat_button::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; /* should match background, can't be transparent */ background-color: rgba(0, 0, 0, .5); }
	.cat_button { border-bottom:1px solid #EAEAEA;text-align:left; width:100%; height:32px; overflow-y:hidden; white-space:nowrap; }
	.cat_button a { margin:0 -4px 0 0; line-height:32px; height:32px; padding:0 15px; }
	.cat_button a:hover { padding:0 15px; background:#FFF !important; text-decoration:none; }
	.prodtab { width:100%; padding:0 !important; box-sizing:border-box; border:0px solid #FFF; }
	a.product { width:30%; margin:0 1.66% 10px 1.66%; box-sizing:border-box; }
	input.product { height:90px; font-size:10px; width:33.33%;  border-radius:0px !important;  margin:0 !important;  }
	a.product { width:46%; margin:0 3% 10px 1%; min-height:200px !important; }
	a.product img { max-height:150px !important; }
	
	.crm-box { width:100%; margin:0; padding:0; }
	.crm-box input { width:100%; }
	.crm-box .right { float:none; clear:both; width:100%; }
	
	.memo_left { width:100%; margin:0; }
	.memo_right { width:100%; margin:0; }
	
	.onmobile100 { width:80%; margin:0 auto; }
	.onmobile100 input, .onmobile100 select { width:100%; }
	
	.col30.opentr { margin:0 0 30px 0;}	
		
	#transaction_side { height:auto !important; }
	#total_price { height:50px !important; }
	#pay_input { height:120px !important; position:relative !important; top:-8px; bottom:0; margin-bottom:8px !important; }
	#pay_input input, #pay_input select { font-size:1.2em; height:50px; margin:0; color:#222; font-weight:bold; }
	#pay_input input[type="button"] { background:#31abff; color:#FFF; margin:0; border:0; }
	
	.pconlytable { display:none !important; } .mobileonlytable { display:table-cell !important; }
	
	#show_member_name { padding:0; line-height:40px; height:40px; display:none; text-align:center; font-size:0.8em; }	
	#new_member_form form { background:#FFF; width:100%; margin:0 auto; padding:30px; margin-top:0; }
	
	h1, h2, h4 { font-size:1.2em; }
	
	.mobileonly.block { display:block !important; clear:both; min-height:30px; }
	
	.middle_box { margin:0 auto; }
	
	/*FORMS*/
	input[type="date"] { padding:4px 10px !important; }
	select { padding:4px 10px !important; }
	input[type="submit"] { background:#FAFAFA; color:#444; font-weight:bold; } 
	input[type="submit"]:hover { background:#EAEAEA; color:#444; font-weight:bold; }
}
	
	
	


@media print {
	.send_to_printer { display:none; }
	.noprint { display:none !important; } .printonly { display:block !important; }
	.col75 { width:100%; } .atable { width:100% !important; }
    #navbar, #mobile_header, #mobile-navigation { display:none !important; }
}

@media screen and (min-width:1140px) { body { zoom:1.05; } }