/*
	1 - GLOBAL 
	2 - HEADER, BODY, FOOTER
	3 - MENU
	4 - PAGE
		4.1 - TRANSACTION
		4.2 - HOME
	5 - ELEMENT
		5.1 - PRODUCT
	6 - BUTTON
	7 - FORM
	8 - BOX
*/


/* 1 - GLOBAL */
@font-face {
   font-family: 'fontku';
   src: url(../../../../../../assets/fonts/OpenSans-Regular.ttf) format("truetype");
}
.az-loading {
	background: rgba(170, 0, 0, 0.72);
}
/*================*/
/*END GLOBAL */


/* 2 - HEADER, BODY, FOOTER */
body {
	font-family: 'fontku';
}

body {
	/*background-color: #f2eeee;*/
	background-color: rgba(87, 217, 217, 0.1);
}

header {
	background: #cf3529;
    background: -webkit-linear-gradient(#cf3529, #A51F14);
    background: -o-linear-gradient(#cf3529, #A51F14);
    background: -moz-linear-gradient(#cf3529, #A51F14);
    background: linear-gradient(#cf3529, #A51F14);
	padding: 10px;
	color: #fff;
}
	header .container-header {}
		header .container-header .title {
			font-size: 22px;
			font-weight: bold;
			padding-left: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		header .container-header .logo {
			display: inline-block;
		}

		header .container-header .logo img {
			max-width: 200px;
			height: 50px;
		}
		header .container-header .address {
			font-size: 12px;
		}

		header .container-header .account {
			text-align: right;
			vertical-align: middle;
		}
			header .container-header .account img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-top: 5px;
				border: 1px solid rgba(3, 9, 120, 0.8);
			}
			header .container-header .account-container {
				text-align: center;
				display: inline-block;
			}
.account-detail {
	position: absolute;
	right: 0px;
	z-index: 10;
	display: none;
}
	.account-caret {
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		border-bottom: 30px solid #fff;
		display: inline-block;
		position: absolute;
		right: 27px;
	}
	.account-detail .account-detail-content {
		margin-top: 30px;
		background-color: rgb(255, 255, 255);
		padding: 20px;
		border-bottom: 3px solid rgb(83, 164, 255);
	}
.account:hover .account-detail {
	display: block;
	cursor: pointer;
}

footer {
	position: fixed;
	background-color: #cf3529;
	color: #fff;
	width: 100%;
	padding: 5px;
	bottom: 0px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	z-index: 9;
}
	footer a {
		color: #FF8C83;
	}
	footer a:hover {
		color: #E25C51;
	}

.breadcumb {
	font-size: 12px;
	padding-top: 25px;
	padding-bottom: 10px;
	font-weight: bold;
}
	.breadcumb .breadcumb-content {
		display: inline-block;
		border: 1px solid rgba(0, 0, 0, 0.12);
		padding: 5px 5px;
	}

.content {
	padding: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 2px 1px #babdf8;
	margin-bottom: 50px;
}
/*=========================*/
/*END HEADER, BODY, FOOTER*/


/* 3 - MENU*/
menu {
	padding: 0px;
	margin: 0px;
	background-color: #334810;
}
	menu > ul {
		padding: 0px;
		margin: 0px;
		list-style: none;
		/*display: none;*/
	}
		menu > ul > li {
			margin: 0px;
			display: inline-block;
			width: 100px;
			position: relative;
		}
		menu > ul > li .menu-container {
			padding: 10px 5px;
			text-align: center;
			font-size: 12px;
			color: #fff;
			font-weight: bold;
			border-right: 1px solid rgba(30, 45, 3, 0.27);
			height: 55px;
		}
		menu > ul > li .menu-container img {
			width: 20px;
			height: 20px;
		}
			menu > ul > li .menu-container.active, menu > ul > li .menu-container:hover {
				background-color: #071c77;
				border: 3px solid #000;
				background-color: #1E2D03;
				border: 3px solid #1E2D03;
				height: 58px;
			}
				menu > ul > li:hover ul {
					display: block;
				}
				menu > ul > li > ul {
					margin: 0px;
					position: absolute;
					width: 100%;
					z-index: 3;
					text-align: left;
					display: none;
					width: 200px;
					left: -50%;
					padding: 12px 0px 0px 0px;
				}
					menu > ul > li > ul > .submenu-box {
						background-color: #4a52de;
					}
					menu > ul > li > ul > .submenu-caret {
						border-bottom: 13px solid #1E2D03;
						border-left: 50px solid transparent;
						border-right: 50px solid transparent;
						top: 0px;
						position: absolute;
						width: 100%;
					}
					menu > ul > li > ul > .submenu-box > li {
						list-style: outside none none;
						display: inline-block;
						margin-right: 5px;
						width: 100%;
						text-align: center;
					}
						menu > ul > li > ul > .submenu-box > li .menu-container-submenu {
							padding: 10px;
							text-align: center;
							background-color: #4C6423;
							font-size: 14px;
							color: #fff;
							font-weight: bold;
							border: 1px solid #1E2D03;
						}
							menu > ul > li > ul > .submenu-box > li .menu-container-submenu:hover, menu > ul > li > ul > .submenu-box > li .menu-container-submenu.active {
								background-color: #1E2D03;
								cursor: pointer;
								border: 1px solid #667C3E;
							}
	menu .hidden-menu {
		position: absolute;
		right: 0px;
		color: rgb(255, 255, 255);
		font-weight: bold;
		width: 100%;
		text-align: right;
		border-top: 5px solid #1E2D03;
	}
		menu .hidden-menu-text {
			padding: 13px 10px;
			background-color: #1E2D03;
			position: absolute;
			right: 0px;
			font-size: 18px;
			z-index: 9;
			color: #667C3E;
		}
			menu .hidden-menu-text div {
				border-right: 32px solid #1E2D03;
				border-bottom: 52px solid transparent;
				position: absolute;
				top: 0px;
				right: 35px;
			}
			menu .hidden-menu-text:hover {
				cursor: pointer;
			}

.box-language {
	color: #fff;
    float: right;
    margin-top: 17px;
    margin-right: 72px;	
}
	.box-language img {
		width: 30px;
		height: 30px;
	}		
		.box-language img:hover {
			cursor: pointer;
		}	
/*=======================*/
/*END MENU*/


/*4 - PAGE*/
/* 4.1 - TRANSACTION */
.transaction-price {
	position: absolute;
	right: 26px;
	top: 33px;
	font-size: 80px;
	line-height: 1;
	font-weight: bold;
	font-family: "arial";
}
.transaction-btn {
	/*text-align: right;
	margin-top: -50px;*/
	/*margin-bottom: 12px;*/
}

.grand-total-payment {
	text-align: right;
	line-height: 1;
	font-size: 20px;
}
	.grand-total-payment .grand-total-payment-price {
		padding-left: 20px;
		font-size: 50px;
		font-family: "arial";
		font-weight: bold;
	}

.total-change {
	font-size: 15px;
	line-height: 1;
	float: left;
	margin-top: 24px;
}
	.total-change .total-change-price {
		padding-left: 5px;
		font-size: 20px;
		font-family: "arial";
		font-weight: bold;
	}

.transaction-group-code-div {
	position: absolute;
	right: 32px;
	top: 8px;
}
	.transaction-group-code-div input {
		text-align: right;
		text-align: right;
		border: none;
		font-weight: bold;
	}

/* 4.1 - HOME */
.content-rp {
	text-align: right;
	margin-bottom: -5px;
	margin-right: -5px;
	margin-left: -5px;
	overflow: hidden;
}
	.content-rp .content-rp-rp {
		position: relative;
		background-color: rgb(7, 201, 201);
		display: inline-block;
		padding: 4px;
		font-size: 20px;
		color: #008484;

	}
	.content-rp .content-caret {
		border-right: 44px solid #07c9c9;
		border-top: 48px solid transparent;
		display: inline-block;
		position: absolute;
		left: -44px;
		top: 0px;
	}
/*========================*/
/*END PAGE


/* 5 - ELEMENT*/
/* 5.1 - PRODUCT*/
.product-search {
    position: absolute;
    right: 16px;
    top: 0px;
    background-color: rgb(0, 156, 255);
    padding: 7px 10px;
    color: rgb(255, 255, 255);
    border: none;
}
    .product-search:hover {
        cursor: pointer;
        background-color: rgb(15, 129, 201);
    }
.l-product-name {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

/*========================*/
/*END ELEMENT*/

/* 6 - BUTTON*/
.btn-primary {
	background-color: #07c9c9 !important;
	border: 1px solid #07c9c9;
}
	.btn-primary:hover {
		background-color: #007A7A !important;
	}

	
/*========================*/
/*END BUTTON*/

/* 7 - FORM*/
.form-control:focus {
	border-color: #57D9D9;
}

/*========================*/
/*END FORM*/


/* 7 - BOX*/
.box-home {
	background-color: #07c9c9;
	padding: 5px;
}
	.box-home .box-home-title {
		padding: 7px 0px 10px;
		line-height: 1;
		font-weight: bold;
		color: rgb(0, 78, 70);
		font-size: 16px;
	}
	.box-home .box-home-content {
		padding: 5px;
		background-color: #fff;
	}
	.box-home .box-content-bg-blue {
		background-color: #d9ffff;
	}
		.box-home .box-home-content .content-transaction {
			text-align: right;
			padding-bottom: 5px;
			color: #038784;
		}
		.box-home .box-home-content .content-btn {
			position: absolute;
			font-size: 55px;
			line-height: 1;
			left: 38px;
		}
			.box-home .box-home-content .content-btn a {
				color: rgb(7, 201, 201);
			}
			.box-home .box-home-content .content-text {
				font-size: 14px;
				padding-top: 4px;
				color: #038784;
			}

.home-row-2 {
	margin-top: 20px;
}
.box-home .box-content-2 {
	height: 191px;
}
.box-home .box-content-2 img {
	width: 100%;
}

.box-home .box-scroll-row {
	padding: 0px;
	overflow: auto;
}
.box-home .box-scroll-product {
	text-align: left;
	color: rgb(0, 78, 70);
}
.box-home .box-content-scroll {
	background-color: rgba(7, 201, 201, 0.16);
	padding: 5px 0px 0px 5px;
	margin-bottom: 2px;
	text-align: right;
}
.box-home .box-scroll-total {
	display: inline-block;
	background-color: rgb(217, 255, 255);
	padding: 2px;
	position: relative;
	color: #b70000;
	font-weight: bold;
}
	.box-home .box-scroll-total .scroll-caret {
		border-right: 25px solid rgb(217, 255, 255);
		border-top: 25px solid transparent;
		position: absolute;
		left: -25px;
		top: 0px;
	}
/*========================*/
/*END BOX*/

@media (max-width: 767px) {
	.transaction-price {
		position: relative;
	    right: 0px;
	    top: 0px;
	}
}