.modal{
	.modal-dialog{
		width: 450px;
		margin: 5% auto;
	}	
	.modal-content{
		.content-heading{
			position: relative;
			background: #f5f5f5;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			h5{
				padding: 20px 0;
				margin: 0;
				text-align: center;
				font-weight: normal;
				font-size: 1.2em;
				border-bottom: #ebebeb;
			}
			i{
				font-size: 3em;
				line-height: 0;
				cursor: pointer;
			}
			.fa{
				font-size: 1.6em;
			}
			.close-btn{
				position: absolute;
				left: 15px;
				top: 8px;	
			}
			.add-btn{
				position: absolute;
				right: 15px;
				top: 8px;
			}
			.save-btn{
				position: absolute;
				right: 15px;
				top: 20px;
			}
		}
		.switch-btn{
			text-align: center;
			padding: 20px;
			border-bottom: 1px solid #eeeeee;
			box-shodow: 0 1px 0 0 #f6f6f6;
			a{
				width: 150px;
				border: 1px solid #00bd61;
				.btn-success{
					background: #0cc579;
				}
			}
		}
	}
}

.add-amount-modal{
	.result-btn{
		padding: 20px;
		p{
			text-align: right;
			font-size: 1.9em;
			padding: 5px 15px;
			background: #f5f5f5;
		}
	}
	.numeric-btn{
		.percentage-btn{
			a{
				border-radius: 0 !important;
				width: 75.5px;
				display: inline-block;
			}
		}
		.number-btn{
			a{
				border-radius: 0 !important;
				box-shadow: none !important;
				float: left;
				width: 33.33%;
				font-size: 1.5em;
				padding:10px;
			}
		}
	}
}
.product-modal{
	.product-number{
		margin: 15px;
		ul{
			li{
				float: left;
				.btn{
					font-size: 3em;
					padding: 5px 35px;
					line-height: 0;
				}
				.item-number{
					width: 200px;
					background: #f5f5f5;
					font-size: 2.6em;
					margin: 0 15px;
					border: 1px solid #ebebeb;
					border-radius: 5px;
				}
			}
		}
	}
	.quantity-price{
		padding: 15px 0;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		text-align: center;
		.price-amount{
			font-size: 5em;
			display: block;
		}
	}
	.product-appearance{
		padding: 15px 13px;
	}
	ul.product-list{
		li{
			padding: 0 3px 10px;
			float: left;
			.btn-outline{
				display: block;
				border: 1px solid #a1e5cc;
				border-radius: 5px;
				color: #02b05b;
				font-size: 1.1em;
				padding: 5px 0;
				width: 64px;
				text-align: center;
				&:hover, &:active, &:focus{
					text-decoration: none;
				}
				&.active{
					background: #0cc579;
					color: #ffffff;
				}
			}
		}
	}
}

.customer-profile-modal{
	.modal-dialog{
		width: 370px;
	}
	.profile-search{
		.search-box{
			z-index: 3;
			border-radius: 10px;
			width: 370px;
			background: #ffffff;
			border: 1px solid #f3f3f3;
			box-shadow: 0 0 1px 2px rgba(0,0,0,0.06);

			.search-wrapper{
				margin: 0 0 5px;
				position: relative;
				padding: 15px;
				background: #f5f5f5;
				border-top-right-radius: 7px;
				border-top-left-radius: 7px;
				input[type="text"]{
					padding: 7px 10px;
					display: block;
					width: 100%;
					border: 1px solid #f2f2f2;
					border-radius: 7px;
					box-shadow: 0 0 0 1px #eaeaea;
				}
			}
			.profile-list{
				ul{
					li{
						&:last-child .profile-text{
							border-bottom: none;
						}
						padding: 0;
						.profile-img{
							padding: 10px 10px 10px 15px;
							img{
								width: 30px;
							}
						}
						.profile-text{
							width: 85%;
							padding: 5px 15px 0 0;
							border-bottom: 1px solid #ededed;
							p{
								line-height: 0.7;
								&.label-text{
									font-size: 0.8em;
								}
							}
						}
					}
				}
			}
		}
	}
}


.cash-modal{
	.modal-content{
		background: #f5f5f5;
	}
	.content-heading{
		background: #ffffff !important;
		border-bottom: 1px solid #ebebeb;
	}
	.switch-terminal{
		display: none;
	}
	.balance-list{
		padding: 10px 0;
		ul{
			list-style: none;
			margin: 0;
			padding: 0;
			display: inline-block;
			text-align: center;
			li{
				background: #ffffff;
				float: left;
				border: 2px dotted #2ecb94;
				padding: 15px 0;
				width: 125px;
				font-size: 1.3em;
				margin:10px 12px;
				border-radius: 10px;
				color: #00b052;
			}
		}
	}
	.result-box{
		border-radius: 10px;
		background: #ffffff;
		margin: 0 13px 15px;
		border: 1px solid #ebebeb;
		padding: 7px;
		p{
			float: left;
			font-size: 1.8em;
			margin: 0 10px;
		}
		.btn-tender{
			float: right;
			text-transform: uppercase;
			a{
				font-size: 15px;
				padding: 8px 25px;
			}
		}
	}
	.pay-container{
		margin: 0 15px;
	}
	.input-group{
		margin: 0 -5px;
		input[type="text"]{
			margin: 0 5px;
			border-radius: 5px;
			background: #ffffff;
			border: 1px solid #ebebeb;
			padding: 12px 7px;
			width: 204px;
		}
	}
	.pay-btn{
		margin: 20px 0;
	}
}

.payment-modal{
	.content-heading{
		h5{
			background: #ffffff;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
		border-bottom: 1px solid #ebebeb;
	}
	.receipts-container{
		background: #f5f5f5;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		padding: 15px;
		p{
			text-align: center;
			line-height: 1.5;
		}
	}
}

.no-conn-modal{
	.modal-dialog{
		width: 240px;
		margin-top: 15%;
	}
	.modal-content{
		padding: 25px 0 0;
		text-align: center;
		background: #ebebed;
		p{
			line-height: 0.5;
			font-size: 0.9em;
			padding: 0 10px;
		}
		.ok-btn{
			border-top: 1px solid #cfcfd1;
			padding: 10px 0;
			margin: 25px 0 0;
			
		}
		a{
			font-size: 1.2em;
			color: #0369fa;
			&:hover, &:active, &:focus{
				text-decoration: none;
			}	
		}
	}
}
.yes-no-modal{
	@extend .no-conn-modal;
	.modal-content{
		p{
			line-height: 1.5;
		}
	}
	.yes-no-btn{
		border-top: 1px solid #cfcfd1;
		margin: 25px 0 0;
		a{
			padding: 10px 0;
			display: inline-block;
			width: 115px;
			&.yes-btn{
				border-right: 1px solid #cfcfd1;
				color: #14c984;
			}
			&.no-btn{
				color: #000;
			}
		}
	}
}

.deposit-modal, .payout-modal{
	.content-heading{
		h5{
			background: #ffffff;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
	}
	.deposit-container{
		padding: 15px;
		background: #f5f5f5;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		ul{
			background: #ffffff;
			border-radius: 10px;
			border: 1px solid #efefef;
			li{
				border-bottom: 1px solid #efefef;
				padding: 15px;
				&:last-child{
					border-bottom: none;
				}
			}
		}
	}
}

.item-list-modal{
	.item-unit{
		margin: 15px;
		ul{
			li{
				float: left;
				.btn{
					font-size: 3em;
					padding: 5px 35px;
					line-height: 0;
				}
				.item-number{
					width: 200px;
					background: #f5f5f5;
					font-size: 2.6em;
					margin: 0 15px;
					border: 1px solid #ebebeb;
					border-radius: 5px;
				}
			}
		}
	}
	form{
		border-top: 1px solid #f5f5f5;
		margin: 10px 0;
	}
	.item-container{
		.row{
			padding: 10px 15px;
		}
	}
}

.currency-modal{
	.currency-container{
		padding: 10px 15px;
	}
}