:root {
		--color-dark: rgb(42, 44, 55);
		--color-light: rgb(62, 65, 83);
		--border-radius: 6px;
		--main-color: rgb( 13, 112, 183 );
		--sub-color: #26AB36;  
  	}
	  
	* { 
		box-sizing: border-box; 
		overflow-wrap: break-word;	
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
		-ms-user-select: none;
		user-select: none;  	
	}		
	
	*::-webkit-scrollbar {
		display: none;
	}
		
	* {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	} 

 	html, body { 
		margin: 0;
		padding: 0;
		border: 0; 
		height: 100%;
		
	}
	
	body { 		
		font-size: 16px; 
		font-family: "Open Sans";
		background: var(--color-dark);
		color: #ddd;
	}	

	body > .main {
		height: calc( 100% - 94px );
		overflow: auto;
		overflow-x: hidden;
		padding: 5px;
	} 

	body.has-footer > .main {
		height: calc( 100% - 154px );
	} 

	a {
		color: #ddd;	
		text-decoration: none;
	}

	*:focus {
		outline: none;
	}

	* {	
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	/* */

	.dn-i {
		display: none !important;
	}

	/* icon */

	.icon {
		padding: 0 15px;	
		position: relative;
		height: 60px;
		display: flex;
		align-items: center;
		text-decoration: none;
	}

	.icon > .inr {
		text-decoration: none;
	}

	.icon > .inr::before {
		font-family: FontAwesome;
		display: block;		
		font-size: 36px;
	}
	
	.icon.icon-add > .inr::before {
		content: "\e24C";
		font-size: 48px;
	}

	.icon.icon-edit > .inr::before {
		content: "$";
	}

	.icon.icon-workflow > .inr::before {
		content: "\e249";
	}

	.icon.icon-pay > .inr::before {
		content: "\e060";
		margin: 0 2px 0 0;
	}

	.icon.icon-del > .inr::before {
		content: "\e16E";
	}

	.icon.icon-move > .inr::before {
		content: "%";
	}

	.icon.icon-course-next > .inr::before {
		content: ".";
	}

	.icon.icon-prev > .inr::before {
		content: "\E08B";
	}

	.icon.icon-next > .inr::before {
		content: "\E08C";
	}

	.icon.icon-demerge > .inr::before {
		content: "\E002";
	}

	.icon.icon-merge > .inr::before {
		content: "\E003";
	}

	.icon.icon-check > .inr::before {
		content: "n";
	}

	.icon.icon-user > .inr::before {
		content: "\E227";
	}
	
	.icon.icon-list > .inr::before {
		content: "m";
	}

	.icon.icon-table-change > .inr {
		display: flex;
	}

	.icon.icon-table-change::before {
		font-family: FontAwesome;
		display: block;		
		font-size: 24px;
		content: "F";
		position: absolute;
		top: 5px;
		left: 32px;
		height: 12px;
  		overflow: hidden;
	}

	.icon.icon-table-change > .inr::before {
		content: "\E247";
		font-size: 24px;
		padding: 12px 0 0 0;
	}

	.icon.icon-table-change > .inr::after {
		font-family: FontAwesome;
		display: block;		
		font-size: 24px;
		content: "\E247";
		padding: 12px 0 0 0;
	}

	/* header */

	header {
		position: relative;
		z-index: 99999;	
		display: block;			
	}

	header > .inr {		
		background: var(--color-light);			
  		box-shadow: 0px 0px 6px 0px rgba( 0,0,0,1 );		
	}

	header > .inr > .top {	
		display: flex;
		justify-content: space-between;
		align-items: center;		
		height: 60px;  		
	}

	header > .inr > .top > .left {	
		display: flex;
		justify-content: flex-start;
		align-items: center;		
	}	

	header .nav-item  {		
		padding: 0 15px;
		position: relative;
		height: 60px;
		display: flex;
		align-items: center;
		text-decoration: none;
	}

	header .nav-item.off {		
		opacity: .2;		
	}

	header .nav-item > .inr  {		
		color: #ddd;	
		text-decoration: none;
		position: relative;
	}	

	header .nav-item > .inr::before {		
		font-family: FontAwesome;
		display: block;		
		font-size: 36px; 
	}

	header .nav-item-main > .inr::before {
		content: "\e054";	
		font-size: 40px; 
	}	
	
	header .nav-item-back > .inr::before {
		content: "\E08B";	
		font-size: 50px;
		font-weight: bold;
		margin: 0 0 0 -10px;
	}

	header .nav-item-home > .inr::before {
		content: "v";	
		font-size: 43px;			
	}
	
	header .nav-item-table-get-by-no > .inr::before {
		content: "\E247";
		font-size: 43px;			
	}

	header .nav-item-table-add-sub > .inr::before {
		content: "\E247";
		font-size: 43px;				
	}

	header .nav-item-table-add-sub > .inr::after {
		font-family: FontAwesome;
		display: block;	
		content: "\E247";
		font-size: 15px;	
		width: 16px;
		height: 16px;
		position: absolute;
		top: 16px;
		right: 0;
		color: #ddd;
	}

	header > .inr > .bottom {	
		display: flex;
		justify-content: space-between;
		align-items: center;		
		height: 34px;	
		padding: 0 0 5px 0;
	}

	header > .inr > .bottom > .title {	
		flex: 100% 0 0;
		text-align: center;
		font-size: 20px;
		font-weight: 600;	
	}

	/* footer */

	footer {
		position: relative;
		z-index: 99999;	
		display: block;	
	}

	footer > .inr {	
		overflow: hidden;	
		box-shadow: 0px 0px 6px 0px rgba( 0,0,0,1 );
		display: flex;
		justify-content: space-between;
		align-items: center;		
		background: var(--color-light);		
		height: 60px;  
	}

	footer > .inr > .left {	
		display: flex;	
		align-items: center;
		justify-content: flex-start;		
	}

	footer > .inr > .middle {	
		display: flex;	
		align-items: center;
		justify-content: center;	
	}

	footer > .inr > .right {	
		display: flex;	
		align-items: center;
		justify-content: flex-end;		
	}	

	/* num pad */

	.num-pad {
		flex: 100% 0 0;
	}

	.num-pad > .inr > .display {
		padding: 5px;
	}	

	.num-pad > .inr > .display > .inr {	
		position: relative;
		height: 50px;
		border-radius: var(--border-radius);	
		padding: 0 10px;
		background: #ddd;
		color: var(--color-dark);
		font-size: 36px;		
		font-weight: 400; 		
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.num-pad > .inr > .display > .inr::before,
	.num-pad > .inr > .display > .inr::after {
		content: "";
		display: block;
		position: absolute;		
		right: 0;
		left: 0;
		height: 50%;		
	}

	.num-pad > .inr > .display > .inr::before {		
		top: 0;		
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%); 
		border-radius: 5px 5px 0 0;
	}

	.num-pad > .inr > .display > .inr::after {		
		bottom: 0;	
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
		border-radius: 0  0 5px 5px;
	}  

	.num-pad > .inr > .items {
		position: relative;
	}

	.num-pad > .inr > .items > .item {
		position: absolute;
	}

	.num-pad > .inr > .items > .item > .height {		
		position: relative;
		z-index: 9;		
	}

	.num-pad > .inr > .items > .item > .height::before,
	.num-pad > .inr > .items > .item > .height::after {
		content: "";
		display: block;
		position: absolute;		
		right: 5px;
		left: 5px;
		height: 50%;		
	}

	.num-pad > .inr > .items > .item > .height::before {		
		top: 5px;		
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%); 
		border-radius: 5px 5px 0 0;
	}

	.num-pad > .inr > .items > .item > .height::after {		
		bottom: 5px;	
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
		border-radius: 0  0 5px 5px;
	}   

	.num-pad > .inr > .items > .item > .height:active {         
		transform: rotate(180deg);
	}

	.num-pad > .inr > .items > .item > .inr {
		position: absolute;
		top: 5px;
		right: 5px;
		bottom: 5px;
		left: 5px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--main-color);
		border-radius: 5px;
		color: #fff;
		word-break: break-word;
		font-size: 40px;
		text-align: center;
	}	

	.num-pad > .inr > .items > .item.item-clear > .inr::before,
	.num-pad > .inr > .items > .item.item-enter > .inr::before {		
		font-family: FontAwesome;
		display: block;
		
	}

	.num-pad > .inr > .items > .item.item-clear > .inr::before {
		content: "\E0F5";	
		font-size: 44px;		
	}	

	.num-pad > .inr > .items > .item.item-enter > .inr::before {
		content: "\E0CA";
		transform: rotate(90deg); 
		font-size: 54px;	 			
	}	

	/* popup */

	.popup {
		position: fixed;
		z-index: 99999;
		top: 94px;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;		
		overflow: hidden;
		padding: 10px;	
		background: rgba(0, 0, 0, 0.6); 	
	}

	.popup.full {	
		top: 0;	
	}

	.popup.center {	
		display: flex;
		align-items: center;
	}

	.popup > .inr {
		background: var(--color-light);	
		box-shadow: 0px 0px 6px 0px rgba( 0,0,0,0.2 );
		max-height: 100%;
  		overflow-y: auto;
		overflow-x: hidden;
		display: block;
		margin: 0 auto;
	}

	.popup > .inr > .header {
		padding: 10px;					
		position: sticky;
  		top: 0;
		z-index: 999;
		background: var(--color-light);			
		box-shadow: 0px 0px 6px 0px rgba( 0,0,0,1 );
	}

	.popup > .inr > .header > .title {
		font-weight: 300;
		font-size: 20px;
		padding-right: 40px;
		
	}

	.popup > .inr > .header > .close {
		position: absolute;
		top: 10px;
		right: 0;
	}

	.popup > .inr > .header > .close::before {
		font-family: FontAwesome;
		content: "\E24A";
		font-size: 50px;
		line-height: 22px;
  		display: block;	
		margin: 0 -4px 0 0;	
	}

	.popup > .inr > .content {
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
	}

	.popup > .inr > .footer {
		padding: 5px;				
		position: sticky;
  		bottom: 0;
		z-index: 999;
		background: var(--color-light);			
  		box-shadow: 0px 0px 6px 0px rgba( 0,0,0,1 );
	}

	/* items  button */

	.items-button {
		flex: 100% 0 0;
		display: flex;
		flex-wrap: wrap;		
	}

	.items-button > .item {
		flex: 12.5% 0 0;
		max-width: 12.5%;
		padding: 5px;
		position: relative;
	}

	.items-button > .item.item-dir::before {
		content: "";
		position: absolute;
		z-index: 999;
		top: 10px;
		right: 5px;
		left: 5px;
		background: url( "/template/media/dir.svg" );
		display: block;
		height: 10px;
		opacity: .5;
	}

	.items-button > .item > .inr {	
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--main-color);
		border-radius: 5px;
		color: #fff;
		word-break: break-word;
	}

	.items-button > .item > .inr > .title {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		text-align: center;
		font-size: 14px;
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.items-button > .item > .inr > .qty-count-down,
	.items-button > .item > .inr > .qty {
		position: absolute;
		top: 5px;		
		z-index: 9;
		font-size: 20px;
		padding: 0px 8px;
		border: 1px solid #fff;
		border-radius: 100px;
		min-width: 30px;
		height: 30px;
		text-align: center;
	}

	.items-button > .item > .inr > .qty-count-down {
		top: 0;		
		left: 0;
		height: unset;
		padding: 5px 15px 15px 5px;	
		border: 0;
	}

	.items-button > .item > .inr > .qty-count-down::before {	
		content: "-";
		display: block;
		border: 1px solid #fff;	
		border-radius: 100px;
		line-height: 20px;
  		font-size: 36px;
		min-width: 30px;
		height: 30px;
		box-sizing: border-box;		
	}

	.items-button > .item > .inr > .qty {		
		right: 5px;			
	}

	.items-button > .item > .inr .height {     
		margin-top: 100%;
	}   

	.items-button > .item > .inr::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%); 
	}

	.items-button > .item > .inr::after {
		content: "";
		display: block;
		position: absolute;            
		right: 0;
		bottom: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
	}

	@media all and (max-width: 780px) {
		
		.items-button > .item {
			flex: 16.666666% 0 0;
			max-width: 16.666666%;			
		}

	}

	@media all and (max-width: 600px) {
		
		.items-button > .item {
			flex: 25% 0 0;
			max-width: 25%;			
		}

	}

	@media all and (max-width: 460px) {
		
		.items-button > .item {
			flex: 33.333333% 0 0;
			max-width: 33.333333%;			
		}

	}

	@media all and (max-width: 340px) {
		
		.items-button > .item {
			flex: 50% 0 0;
			max-width: 50%;			
		}

	}

	/* nav - main */
	
	.nav.nav-main > .items > .item  {
		padding: 5px;
	}

	.nav.nav-main > .items > .item > .inr {
		display: block;		
		font-weight: 600;
		display: flex;
		align-items: center;
		font-size: 20px;		
	}

	.nav.nav-main > .items > .item > .inr::before {		
		content: "\E08C";
		font-family: FontAwesome;
		display: block;
		padding: 1px 5px 2px 0;
		font-size: 25px;
		margin: 0 0 0 -4px;	
	}

	/* form - info */

	.form-info-con {
		flex: 100% 0 0;
	}

	.form-info {
		padding: 5px;
	}

	.form-info > .inr {		
		display: flex;
		align-items: flex-start;
		background: #26AB36;
		color: #fff;
		padding: 5px;
		border-radius: var(--border-radius);
	}

	.form-info > .inr::before {
		flex: 25px 0 0;
		display: block;
		content: "\E0AC";
		font-family: FontAwesome;
		font-size: 20px;
	}


	.form-info.fault > .inr {		
		background: #a21515;		
	}

	.form-info.fault > .inr::before {	
		content: "\E0AD";	
	}

	/* form */

	.label,
	label {
		padding: 5px;	
		display: block;	
		flex: 100% 0 0;
	}

	.label .title,
	label .title {
		padding: 0 0 5px 0;
		font-size: 15px;			
	}

	.label.mandatory .title::after,
	label.mandatory .title::after {
		content: "*";
		display: inline-block;
		color: var(--sub-color);
		padding: 0 0 0 5px;			
	}

	label .title .change-link {
		display: inline-block;
		color: var(--main-color);
		padding: 0 0 0 10px;
		cursor: pointer;
	}

	label .title .change-link::before{
		content: "[";
	}

	label .title .change-link::after{
		content: "]";
	}

	.label.text .input-con,
	label.text .input-con {
		position: relative;		
	}

	.label.text .input-con input,
	label.text .input-con input {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);	
		height: 42px;
		width: 100%;
		padding: 0 10px;		
		background: #ddd;
		color: var(--color-dark);		
		font-size: 16px;
		font-family: "Open Sans";
		font-weight: 400;
	}

	.label.textarea.field-fault .input-con textarea, 
	label.textarea.field-fault .input-con textarea, 
	.label.text.field-fault .input-con input, 
	label.text.field-fault .input-con input {
		border-color: #ed1146 !important;
	}

	label.text .input-con input[readonly="readonly"] {
		background: #ddd;
	}

	label.select.field-fault .input-con select {
		border-color: #ed1146;		
	}	

	label.textarea .input-con textarea {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 140px;
		width: 100%;	
		background: #ddd;
		padding: 4px 8px;		
	}

	label.select .input-con select {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		padding: 0 10px;
		background: #ddd;
	}

	/* form - select exp */

	label.select-exp .input-con {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		position: relative;	
		cursor: pointer;
		overflow: hidden;	
	}

	label.select-exp .input-con::after {
		content: "\f107";
		font-size: 25px;
		line-height: 25px;
		color: var(--main-color);
		font-family: FontAwesome;
		display: block;
		transition: transform .2s;
		position: absolute;
		top: 0;
		right: 0;	
		padding: 10px;
	}

	label.select-exp.open .input-con::after {
		transform: rotate(180deg);
	}

	label.select-exp.open .input-con {
		overflow: initial;
	}	

	label.select-exp .items {
		margin: 50px -2px 0 -2px;
		background: #fff;	
		border-radius: var(--border-radius);		
		position: absolute;	
		padding: 5px 0;			
	}

	label.select-exp.open .items {
		z-index: 999;				
	}	

	label.select-exp.open .items {
		box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.77);			
	}	

	label.select-exp .items .item {		
		padding: 5px 10px;
		display: flex;		
		align-items: center;		
	}

	label.select-exp .items .item img {		
		width: 40px;
		height: 40px;
		object-fit: cover;
		border-radius: 50%;	
		margin: 0 10px 0 0;
	}

	label.select-exp .items .item.active {
		color: var(--main-color);
	}

	label.select-exp .items .item.active::before {
		content:attr( data-title );
		display:block;
		color: var(--default-color);
		height: 40px;
		padding: 10px 10px 0 10px;	
		position: absolute;
		top: -50px;
		right: 0;
		left: 0;
	}
	
	label.select-exp .items .item-group-title {		
		padding: 5px 10px;
		font-weight: bold;	
		margin: 0 0 0 -10px;	
	}

	label.select-exp .items .item-group {		
		padding: 0 0 0 10px;		
	}	

	/* form - unit - inr */	

	label.text .input-con .unit-inr {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;	
		background: #ddd;
		font-size: 22px;
		padding: 6px 16px 0 16px;
		border-radius: 0 var(--border-radius) var(--border-radius) 0;		
	}

	/* form - autocomplete */

	.label.text .input-con .autocomplete {
		width: 100%;		
		position: absolute;
		top: 100%;
		padding: 10px 0 0 0;
		display: none;
	}
	
	.label.text .input-con .autocomplete > .inr {
		background-color: #fff;
		box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
		border-radius: var(--border-radius);
	}

	/* form - button */

	label.button .inr {
		font-size: 17px;
		color: #fff;
		background: var(--main-color);
		padding: 0 12px;
		border-radius: var(--border-radius);
		text-decoration: none;
		cursor: pointer;
		text-align: center;
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}


	label.button .inr::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%); 
	}

	label.button .inr::after {
		content: "";
		display: block;
		position: absolute;            
		right: 0;
		bottom: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
	}

	/* form - checkbox text */

	.label.checkbox-text,
	label.checkbox-text {
		cursor: pointer;				
	}	

	.label.checkbox-text > .inr,
	label.checkbox-text > .inr {
		display: flex;
		align-items: flex-start;		
	}

	.label.checkbox-text .check,
	label.checkbox-text .check {
		background: #ddd;
		border-radius: var(--border-radius);
		min-width: 20px;
		height: 20px;
		position: relative;
		margin: 2px 12px 0 0;
	}

	.label.checkbox-text.active .check::before,
	label.checkbox-text.active .check::before {
		position: absolute;
		top: -5px;
		left: 4px;
		content: "n";
		font-family: FontAwesome;
		display: block;
		color: var(--sub-color);
		font-size: 24px;
		line-height: 24px;
	}

	.label.checkbox-text .text,
	label.checkbox-text .text {
		font-size: 15px;
		line-height: 22px;
	}

	/* form - checkbox text - title */

	label.checkbox-text.checkbox-text-title > .inr {
		display: block;				
	}

	label.checkbox-text.checkbox-text-title .check-con {
		display: flex;	
		padding: 10px 0 0 0;			
	}
	
	/* services add */

	.popup-product-add .header-bottom {
		display: flex;
		margin: 0 -5px -5px -5px;
		padding: 5px 0 0 0;
	}

	.popup-product-add .button-cart-add {
		flex: unset;
		flex-grow: 1;
	}

	.popup-product-add .button-cart-add > .inr {
		height: 60px;
	}
	
	/* services add - qty */

	.popup-product-add .qty-set {
		flex: 190px 0 0;
		padding: 5px;		
	}

	.popup-product-add .qty-set > .inr {	
		display: flex;
		align-items: stretch;
		height: 60px;
		position: relative;		
		overflow: hidden;
		border-radius: var(--border-radius);
	}

	.popup-product-add .qty-set .down,
	.popup-product-add .qty-set .up,
	.popup-product-add .qty-set .val {
		position: relative;
		display: flex;
		justify-content: center;				
	}

	.popup-product-add .qty-set .down,
	.popup-product-add .qty-set .up {
		flex: 60px 0 0;
		background: var(--main-color);
		color: #fff;
		font-size: 50px;
		cursor: pointer;	
	}

	.popup-product-add .qty-set .down {
		line-height: 50px;		
		border-radius: var(--border-radius) 0 0 var(--border-radius);
	}
	
	.popup-product-add .qty-set .up {
		line-height: 60px;		
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	.popup-product-add .qty-set .val {
		flex-grow: 1;	
		display: flex;
		align-items: center;
		justify-content: center;	
		background: #ddd;
		color: var(--color-light);
		font-size: 24px;	
	}

	.popup-product-add .qty-set > .inr > *::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.2) 100%);		
	}

	.popup-product-add .qty-set > .inr > *::after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 50%;
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);		
	}

	/* services add - form */

	.label .title, label .title {
		font-style: italic;		
	}

	/* services add - extras */

	.popup-product-add .services-extras {
		flex: 100% 0 0;		
	}

	.popup-product-add .services-extras .label .title, 
	.popup-product-add .services-extras label .title {
		padding: 0 0 10px 0;	
		font-style: italic;	
	}

	.popup-product-add .services-extras .customize-item > .title {
		font-size: 15px;
		padding: 5px;
		font-style: italic;
	}

	.popup-product-add .services-extras .price {
		color: var(--sub-color);		
	}

	/* services add - info */

	.popup-product-add .product-info { 
		flex: 100% 0 0;    
	}

	.popup-product-add .product-info .title {                     
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 5px;
		font-weight: 600;
	}

	.popup-product-add .product-info .price {
		padding: 0 0 0 10px;
		color: var(--sub-color);		
	}

	.popup-product-add .product-info .description {
		font-size: 13px;
		color: #666;
		padding: 0 10px 0 10px;
		display: none;
	}  

	/* */

    .services {	
        padding: 10px 10px 0px 10px;           
    }

    .services .services-cat > .inr {           
        padding: 5px 0;
        background: var(--sub-color);
        position: relative;
        overflow: hidden;  
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);              
    }	

    .services .services-cat > .inr > .title {	         
        padding: 5px 10px;
        font-size: 26px;
        line-height: 1;          
        color: #fff;          
    }	

    .services .services-products {	
        padding: 5px 0;
    } 

    .services .services-products > .services-product {	
        padding: 5px 0;
    }       

    .services .services-products > .services-product > .inr {	           
        padding: 10px; 
        position: relative;
        background: #fff;
        overflow: hidden;   
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);         
    }
            
    .services .services-products > .services-product > .inr > .top {	
        font-size: 16px;
        font-weight: 600;
        display: flex;            
        align-items: flex-start;
    }

    .services .services-products > .services-product > .inr > .top > .title {	
        flex-grow: 1;       
    }

    .services .services-products > .services-product > .inr > .top > .price {	
        flex: 90px 0 0;
        color: var(--sub-color);
        text-align: right;
    }
 
    .services .services-products > .services-product > .inr > .extras {	
        padding: 5px 0 0 0;
        font-size: 13px;
        color: #777;
    }

    .services .services-products > .services-product > .inr > .price {	
        font-size: 16px;
        font-weight: bold;
        color: var(--sub-color);
        padding: 5px 0 0 0;
    }

    .services .services-products > .services-product > .inr > .cart-add {	
        position: absolute;
        right: 0;
        top: 50%;
        margin: -20px -20px 0 0;
        background: var(--sub-color);
        width: 41px;
        height: 41px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        cursor: pointer;
        box-shadow: 0px 0px 10px -2px #666;
    }

    .services .services-products > .services-product > .inr > .cart-add::before {
        content: "+";
        display: block;
        color: #fff;
        font-size: 30px;
    }

	/* receipt */

	.receipt {         
		margin: 0 auto;  
		position: relative;      
		overflow: hidden; 
		color: #4a6782;   
		font-size: 15px;  
		font-weight: 400; 
		width: 100%; 	
		max-width: 500px;  
		padding: 5px; 
	}     

	.receipt::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 999;
		top: 5px;
		right: 0;
		left: 0;
		height: 10px;
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
	}

	.receipt::after {
		content: "";
		display: block;
		position: absolute; 
		z-index: 999;           
		right: 0;
		bottom: 5px;
		left: 0;
		height: 10px;
		background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
	} 
   
	.receipt > .inr  {	   
		background: #ddd;
		border-radius: 5px;  
		height: 100%;
  		overflow-y: scroll;
		padding: 5px 0;
		position: relative;
	}
	
	.receipt > .inr > .header {	   
		font-size: 18px;   
		text-align: center;        
	}

	.receipt > .inr > .data {	             
		font-size: 13px;  
		padding: 5px;     
	}

	.receipt > .inr > .data > .cols {	   
		display: flex; 
		padding: 0 5px;  
	}    

	.receipt > .inr > .data > .cols > .col-1 {	   
		flex: 100px 0 0;
	}  

	.receipt > .inr > .top-cat {	   
		padding: 5px 10px; 
		position: relative;  
		display: flex;  
		align-items: center;
		font-weight: 600;      
	}

	.receipt > .inr > .top-cat > .title {	   
		padding: 0 5px; 		
	}

	.receipt > .inr > .top-cat::before,	
	.receipt > .inr > .top-cat::after {	 
		display: block; 		
		content: ""; 
		border-bottom: 1px solid #98a8b7;
		flex-grow: 1; 	
	}

	.receipt > .inr > .item {	   
		padding: 5px 5px;           
	}

	.receipt > .inr > .item.selected {	   
		background: rgb(174, 193, 206);       
	}

	.receipt > .inr > .item.selected > .top > .name > .val,
	.receipt > .inr> .item.selected > .sub-items > .sub-item > .top > .name > .val {
		background: rgb(174, 193, 206);
	}

	.receipt > .inr > .item > .qty,
	.receipt > .inr > .item > .sub-items > .sub-item > .qty {
		padding: 0px 5px 0 5px;            
	}

	.receipt > .inr > .item > .qty .curency,
	.receipt > .inr > .item > .sub-items > .sub-item > .qty .curency {	
		font-size: 10px;                     
	}

	.receipt > .inr > .item > .top,
	.receipt > .inr > .item > .sub-items > .sub-item > .top {		
		display: flex;            
		align-items: flex-end;            
	}        

	.receipt > .inr > .item > .top > .qty {	
		padding: 0 5px;    
		position: relative;
		top: 2px; 
		display: none;        
	}

	.receipt > .inr > .item > .top > .qty::before {	
		content: "-";
		display: flex;
		width: 25px;
		height: 25px;
		border: 1px solid #4a6782;
		border-radius: 100px;
		line-height: 1;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		padding: 0 0 2px 0;
		box-sizing: border-box;
	}

	.receipt > .inr > .item > .top > .qty.qty-up::before {	
		content: "+";   
		padding: 0 0 0 0;        
	}

	.receipt > .inr > .item > .top > .name,
	.receipt > .inr > .item > .sub-items > .sub-item > .top > .name {		
		flex-grow: 1;
		padding: 0px 5px; 
		position: relative;
	}

	.receipt > .inr > .item > .top > .name > .val,
	.receipt > .inr > .item > .sub-items > .sub-item > .top > .name > .val {
		background: #ddd;
		position: relative;
		z-index: 99;
		word-break: break-word;
	}        

	.receipt > .inr > .item.created > .top > .name > .val::before,
	.receipt > .inr > .item.created > .sub-items > .sub-item > .top > .name > .val::before {	
		font-family: FontAwesome;
		display: inline-block;           
		font-size: 15px;
		content: "\e249";
		padding: 0 5px 0 0;  
		color: #ff0000;
	}

	.receipt > .inr > .item > .top > .name::after,	
	.receipt > .inr > .item > .sub-items > .sub-item > .top > .name::after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 4px;
		left: 6px;            
		border-bottom: 2px dotted #4a6782;
	}
  
	.receipt > .inr > .item > .top > .price,	
	.receipt > .inr > .item > .sub-items > .sub-item > .top > .price {
		padding: 0px 5px;  
		white-space: nowrap;                           
	}

	.receipt > .inr > .item > .top > .price .curency,	
	.receipt > .inr > .item > .sub-items > .sub-item > .top > .price .curency {
		font-size: 10px;                     
	}

	.receipt > .inr > .item > .info {	
		padding: 0px 5px 0px 5px;
		font-size: 12px;                     
	} 

	.receipt > .inr > .item > .sub-items {	
		font-size: 13px;		
	} 

	.receipt > .inr > .item > .sub-items > .sub-item {				   
		padding: 5px 0 5px 20px;  
	} 

	.receipt > .inr > .item > .sub-items > .sub-item > .top > .name::after {         
		border-bottom: 1px dotted #4a6782;
	}

	.receipt > .inr > .footer {	          
	   margin: 10px 10px 0 10px;  
	   padding: 10px 0 0 0;
	   border-top: 1px solid #98a8b7;  
	}

	.receipt > .inr > .footer > .cols-sum {
		display: flex;
		justify-content: space-between; 
		font-size: 16px;
	}

	.receipt .select-all {
		position: absolute;
		top: 34px;
		right: 10px;	
		border: 1px solid #98a8b7;
		border-radius: 50px;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.receipt .select-all::before {
		content: "";
		display: block;
		font-family: FontAwesome;
		margin: 0 10px 0 0;
		width: 14px;
		height: 14px;
		border-radius: 3px;		
		border: 1px solid #98a8b7;
	}

	.receipt .select-all.active::before {		
		border: 1px solid #ddd;
	}

	.receipt .select-all.active::after {
		content: "a";
		display: block;
		position: absolute;
		top: -3px;
		left: 8px;
		font-family: FontAwesome;
		padding: 0 5px 0 0;
		font-size: 40px;
		line-height: 40px;	
	}

	.receipt .select-all.active {	
		background: var(--sub-color);
		border: 1px solid var(--sub-color);
		color: #ddd;		
	} 

	/* load */
       
	.main-load {
		position: fixed;
		z-index: 9999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;		
		overflow: hidden;		
		background: rgba(0, 0, 0, 0.6);
		display: flex;	
		align-items: center;
  		justify-content: center;	
	}

	.main-load-anim {
		display: inline-block;
		position: relative;
		width: 80px;
		height: 80px;
	}

	.main-load-anim div {
		position: absolute;
		top: 33px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fff;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}

	.main-load-anim div:nth-child(1) {
		left: 8px;
		animation: main-load-anim1 0.6s infinite;
	}

	.main-load-anim div:nth-child(2) {
		left: 8px;
		animation: main-load-anim2 0.6s infinite;
	}

	.main-load-anim div:nth-child(3) {
		left: 32px;
		animation: main-load-anim2 0.6s infinite;
	}

	.main-load-anim div:nth-child(4) {
		left: 56px;
		animation: main-load-anim3 0.6s infinite;
	}

	@keyframes main-load-anim1 {

		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}

	}

	@keyframes main-load-anim3 {

		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(0);
		}

	}

	@keyframes main-load-anim2 {

		0% {
			transform: translate(0, 0);
		}
		100% {
			transform: translate(24px, 0);
		}

	}

	/* customize item*/
	
	.customize-item .items-button > .item.selected > .inr {
		background: var(--sub-color);		
	}

	.customize-item .items-button > .item {
		flex: 16.666666% 0 0;
		max-width: 16.666666%;
	}

	.customize-item.customize-type-20 .items-button > .item > .inr > .title {		
		top: 30px;
	}

	@media all and (max-width: 840px) {
		
		.customize-item .items-button > .item {
			flex: 20% 0 0;
			max-width: 20%;			
		}

	}

	@media all and (max-width: 660px) {
		
		.customize-item .items-button > .item {
			flex: 25% 0 0;
			max-width: 25%;			
		}

	}

	@media all and (max-width: 520px) {
		
		.customize-item .items-button > .item {
			flex: 33.333333% 0 0;
			max-width: 33.333333%;			
		}

	}

	@media all and (max-width: 380px) {
		
		.customize-item .items-button > .item {
			flex: 50% 0 0;
			max-width: 50%;			
		}

	}