@charset "UTF-8";

:root {
	--account-center-section-bk: #fff;
	--account-center-section-border-color: #E8E8E8;
	--account-activity-icon-color: #000;
	--account-activity-info-border-color: #ccc;
	--account-review-border-color: #ccc;
	--account-review--not-approved-bk: #f9f9f9;
	--account-review--review-date-color: var(--main-gray-color);
	--account-activity-link-color: #960019;
	--external-awbs-link-bk: #fff;
	--external-awbs-link-color: #0044AA;
	--external-awbs-link-border-color: #0044AA;
	--favorite-product--trash-icon-color: #0044AA;
	--history-order-bk: #fff;
	--history-order-border-color: #E8E8E8;
	--history-order-no-color: #000;
	--history-order-info-separator: #999;
	--history-order-bottom-border-color: #E8E8E8;
	--order-details-btn-color: #000;
	--order-details-btn-bk: #fff;
	--order-details-btn-hover-bk: #F4F8FF;
	--order-history-table-border-color: #060;
	--order-history-table-th-color: #fff;
	--order-history-table-th-border-color: #666;
	--order-history-table-tr-bk: #EEFAF8;
	--order-history-table-tr-hover-bk: #fff;
	--order-tag-color: var(--main-green-color, darkgreen);
	--order-items-border-color: #ccc;
	--order-item-link-color: #000;
	--order-item-quant-price-x: #000;
	--order-mail-items-tr-border-color: #E8E8E8;
	--review-prod-link-color: #000;
	
	--px5: .38461538461538461538461538461538rem;
	--px10: .76923076923076923076923076923077rem;
	--px15: 1.1538461538461538461538461538462rem;
	--px16: 1.2307692307692307692307692307692rem;
	--px20: 1.5384615384615384615384615384615rem;
	--px24: 1.8461538461538461538461538461538rem;
	--px26: 2rem;
	--px27: 2.0769230769230769230769230769231rem;
	--px32: 2.4615384615384615384615384615385rem;
	--px36: 2.7692307692307692307692307692308rem;
	--px40: 3.0769230769230769230769230769231rem;
	--px42: 3.2307692307692307692307692307692rem;
	--px56: 4.3076923076923076923076923076923rem;
	--px80: 6.1538461538461538461538461538462rem;
	--px96: 7.3846153846153846153846153846154rem;
	--px100: 7.6923076923076923076923076923077rem;
	--px105: 8.0769230769230769230769230769231rem;
	--px120: 9.2307692307692307692307692307692rem;
	--px150: 11.538461538461538461538461538462rem;
	--px170: 13.076923076923076923076923076923rem;
	--px180: 13.846153846153846153846153846154rem;
	--px240: 18.461538461538461538461538461538rem;
	--px300: 23.076923076923076923076923076923rem;
	--px350: 26.923076923076923076923076923077rem;
	--px400: 30.769230769230769230769230769231rem;
	--px800: 61.538461538461538461538461538462rem;

	--gap5: 5px;
	--gap20: 20px;
	--gap30: 30px;
	
	--pad10: 10px;
	--pad15: 15px;
	--pad20: 20px;
}

.account-page > .account-page-menu {
	margin-bottom: 20px;
}

.account-page .side-box {
	box-shadow: 1px 1px 3px rgba(0,0,0,.15);
}

.account-center > div,
.activity-section-parts > div,
.account-center-sections > div {
	margin-bottom: 20px;
}

@supports (display: grid) and (grid-gap: 20px) {
	.account-center > div,
	.activity-section-parts > div,
	.account-center-sections > div {
		margin: 0;
	}

	.account-page > .account-page-menu {
		margin: 0;
	}

	.account-page {
		display: grid;
		grid-template-columns: var(--px200, 200px) 1fr;
		grid-gap: var(--gap20, 20px);
		gap: var(--gap20, 20px);
	}
	
	.account-center,
	.activity-section-parts,
	.account-center-sections {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		grid-gap: var(--gap20, 20px);
		gap: var(--gap20, 20px);
	}	
}

@media (max-width: 1024px){
	.account-page,
	.activity-section-parts,
	.account-center {
		grid-template-columns: 100%;
	}
}

.account-center-section {
	padding: 20px;
	padding: var(--pad20, 20px);
	border-radius: 5px;
	border-radius: var(--px5);
	background: #fff;
	background: var(--account-center-section-bk);
	border: 1px solid #E8E8E8;
	border: 1px solid var(--account-center-section-border-color);
}

.account-center-body > div,
.account-center-section > div {
	overflow-y: auto;
}

.account-center-body-h {
	color: inherit;
	font-weight: 700;
	margin-bottom: 5px;
	margin-bottom: var(--px5);
}

.order-tag {
	color: inherit;
	display: inline;
	min-width: 0
}

.account-activity {
	padding-left: 42px;
	padding-left: var(--px42);
}

.account-activity {
	position: relative;
}

.account-activity.my-orders:before {
	content: '\2B21';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 32px;
	font-size: var(--px32);
	font-weight: 400;
	line-height: 1;
	color: #000;
	color: var(--account-activity-icon-color);
}

.account-activity.my-reviews:before {
	content: '\2606';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 36px;
	font-size: var(--px36);
	font-weight: 400;
	line-height: 1;
	color: #000;	
	color: var(--account-activity-icon-color);	
}

.account-activity.my-favorites:before {
	content: '\2661';
	position: absolute;
	top: -3px;
	left: 0;
	font-size: 40px;
	font-size: var(--px40);
	font-weight: 400;
	line-height: 1;
	color: #000;	
	color: var(--account-activity-icon-color);	
}

.account-activity.my-invoices:before {
	content: '$';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 32px;
	font-size: var(--px32);
	font-weight: 400;
	line-height: 1;
	color: #000;
	color: var(--account-activity-icon-color);	
}

.account-activity.my-subscriptions:before {
	content: '\1F582';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 26px;
	font-size: var(--px26);
	font-weight: 400;
	line-height: 1;
	color: #000;
	color: var(--account-activity-icon-color);	
}

.account-activity-info {
	color: inherit;
	line-height: 2;
	border-bottom: 1px solid #ccc;
	border-bottom: 1px solid var(--account-activity-info-border-color);
}

.account-activity a {
	color: #960019;
	color: var(--account-activity-link-color);
	line-height: 2;
}

/* favortes */
.remove-from-wishlist-btn {
	display: flex;
	gap: var(--gap5, 5px);
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}

.remove-from-wishlist-btn > .trash-icon {
	font-size: 24px;
	font-size: var(--px24);
	line-height: 1;
	color: #0044AA;
	color: var(--favorite-product--trash-icon-color);
}

.remove-from-wishlist-btn > .remove-txt {
	font-size: 16px;
	font-size: var(--px16);
	line-height: 1;
	color: #0044AA;
	color: var(--favorite-product--trash-icon-color);
}

/* account order history */
.history-order {
	padding: 15px;
	padding: var(--pad15, 15px);
	border-radius: 5px;
	border-radius: var(--px5);
	background: #fff;
	background: var(--history-order-bk);
	border: 1px solid #E8E8E8;
	border: 1px solid var(--history-order-border-color);
	box-shadow: 1px 1px 3px rgba(0,0,0,.15)
}

.history-order-no,
.dispatched {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	color: #000;
	color: var(--history-order-no-color);
}

.go-left {
	float: left;
}

.go-right {
	float: right;
}

.history-order-info .separator {
	color: #999;
	color: var(--history-order-info-separator);
}

.order-details-btn,
.external-invoice-btn {
	padding: 10px 0;
	padding: var(--pad10, 10px) 0;
	font-size: 1rem;
	line-height: 1;
	background: #fff;
	background: var(--order-details-btn-bk);
	color: #000;
	color: var(--order-details-btn-color);
	border: 1px solid #000;
	border: 1px solid var(--order-details-btn-color);
	border-radius: 5px;
	border-radius: var(--px5, 5px);
	min-width: 150px;
	min-width: var(--px150, 150px);
	text-align: center;
}

.external-invoice-btn {
	display: block;
	width: 100%;
}

.order-details-btn:hover {
	background: #F4F8FF;
	background: var(--order-details-btn-hover-bk);
}

.history-order-bottom {
	margin-top: 15px;
	margin-top: var(--px15);
	border-top: 1px solid #E8E8E8;
	border-top: 1px solid var(--history-order-bottom-border-color);
	padding-top: 15px;
	padding-top: var(--px15);
}

@media (max-width: 480px){
	.history-order .go-left,
	.history-order-bottom .go-left {
		float: none;
	}

	.history-order .go-right,
	.history-order-bottom .go-right {
		float: none;
		display: inline-block;
		margin-top: 10px;
	}
	
	.order-details-btn,
	.external-invoice-btn {
		min-width: 100%;
	}
}

/* order */
.order-details-head {
	padding: 15px;
	padding: var(--pad15, 15px);
	margin: 20px 0;
	margin: var(--px20) 0;
}

.order-details-general {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--gap10, 10px);
}

@media (max-width: 450px) {
	.order-details-head {
		padding: 0;
	}
	
	.order-details-general {
		grid-template-columns: auto auto;
	}
}

@media (max-width: 300px) {
	.order-details-general {
		grid-template-columns: 100%;
	}
}

.order-details-general .right {
	font-weight: 700;
	margin: 0;
}

.order-items {
	border-top: 1px solid #ccc;
	border-top: 1px solid var(--order-items-border-color);
	border-bottom: 1px solid #ccc;
	border-bottom: 1px solid var(--order-items-border-color);
	padding: 20px 0 0;
	padding: var(--pad2, 20px) 0 0;
	margin-bottom: 20px;
	margin-bottom: var(--px20);
}

.order-item {
	display: flex;
	flex-direction: row;
	display: grid;
	grid-template-columns: var(--px80) 1fr var(--px120) var(--px100);
	gap: var(--gap10, 10px);
	margin-bottom: 20px;
	margin-bottom: var(--px20);
}

.order-item > .order-item-image {
	flex: 0 0 80px;
}

.order-item > .order-item-name {
	flex: 1 0 100px;
}

.order-item > .order-item-price {
	flex: 0 0 120px;
}

.order-item > .order-item-subtotal {
	flex: 0 0 100px;
}

.order-item > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.order-item-image img {
	max-width: 100%;
	height: auto !important;
}

.order-item-name > a {
	color: #000;
	color: var(--order-item-link-color);
}

.order-item-quant-price,
.order-item-subtotal {
	text-align: right;
}

.order-item-subtotal {
	font-weight: 700;
}

.order-item-quant-price .x {
	color: #000;
	color: var(--order-item-quant-price-x);
}

.order-mail-items {
	width: 100%;
	text-align: left;
	border-spacing: 0;
	border-collapse: collapse;
	margin: 10px 0 20px;
	margin: var(--px10) 0 var(--px20);
}

.order-mail-items tr {
	border-top: 1px solid #E8E8E8;
	border-top: 1px solid var(--order-mail-items-tr-border-color);
	border-bottom: 1px solid #E8E8E8;
	border-bottom: 1px solid var(--order-mail-items-tr-border-color);
}

.order-mail-book-name {
	padding: 15px 10px 15px 0;
	padding: var(--pad15, 15px) var(--pad10, 10px) var(--pad15, 15px) 0;
}

.order-mail-item-total {
	padding: 15px 0;
	padding: var(--pad15, 15px) 0;
	text-align: right;
	font-weight: 700;
	vertical-align: top;
}

@media (max-width: 600px){
	.order-details .order-heading {
		font-weight: 400;
	}
}

@media (max-width: 1024px){
	.order-item {
		grid-template-columns: 80px 1fr;
	}

	.order-item-image {
		grid-row-start: 1;
		grid-row-end: 4
	}	
	
	.order-item-quant-price,
	.order-item-subtotal {
		text-align: left
	}
	
	.order-item > div {
		display: block
	}
	
	.order-item-quant,
	.order-item-price {
		display: inline-block; 
		margin-right: 5px;
		margin-right: var(--px5);
	}
}

.order-total-zone {
	display: grid;
	grid-template-columns: auto auto;
	gap: var(--pad20);
	justify-content: end;
}

.order-total-zone > .order-total {
	text-align: right;
}

@media (max-width: 320px){
	.order-total-zone {
		grid-template-columns: 100%;
	}
	
	.order-total-zone > .order-total {
		text-align: left;
	}	
}

/* order delivery */
.order-delivery-head {
	gap: var(--gap20, 20px);
}

.order-details-zone > a {
	display: inline-block;
}

@media (max-width: 500px){
	.order-details-zone {
		text-align: left;
	}
}

.order-status {
	display: grid;
	grid-template-columns: var(--px56, 56px) 1fr;
	gap: var(--gap20, 20px);
	max-width: 400px;
	max-width: var(--px400);
	margin-bottom: 10px;
	margin-bottom: var(--px10);
}

.order-status-desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.order-status-date {
	margin-top: 7px;
	color: inherit;
}

.external-awbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, var(--px300, 300px));
	gap: var(--gap20, 20px);
}

.external-awbs > a {
	padding: 10px 0;
	padding: var(--pad10, 10px) 0;
	font-size: 1rem;
	line-height: 1;
	background: #fff;
	background: var(--external-awbs-link-bk);
	color: #0044AA;
	color: var(--external-awbs-link-color);
	border: 1px solid #0044AA;
	border: 1px solid var(--external-awbs-link-border-color);
	border-radius: 5px;
	border-radius: var(--px5);
	width: 100%;
	text-align: center;
}	

/* reviews */
.account-review {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: start;
	justify-content: start;
	gap: var(--gap20, 20px);
	padding-bottom: 20px;
	padding-bottom: var(--px20);
	border-bottom: 1px solid #ccc;
	border-bottom: 1px solid var(--account-review-border-color);
	margin-bottom: 20px;
	margin-bottom: var(--px20);
}

.account-review > .review-product {
	flex: 0 0 180px;
	text-align: center;
}

.account-review > .review {
	flex: 1;
}

.review-product img {
	max-width: 100%;
	height: auto !important;
}

.review-prod-a {
	display: inline-block;
	margin-top: 10px;
	margin-top: var(--px10);
	font-size: 1rem;
	line-height: 1.1;
	color: #000;
	color: var(--review-prod-link-color);
	max-height: 60px;
	max-height: var(--px60, 60px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.account-review .not-approved,
.account-review .spam-review {
	background: #f9f9f9;
	background: var(--account-review--not-approved-bk);
	border-left: 5px solid red;
	border-left: var(--px5) solid red;
	padding: 15px;
	padding: var(--pad15, 15px);
	margin-bottom: 20px;
	margin-bottom: var(--px20);
}

.review .review-h {
	font-size: 16px;
	font-size: var(--px16);
	font-weight: 700;
	margin: 5px 0;
	margin: var(--px5) 0;
}

.account-review .review-rating {
	margin-top: 5px;
	margin-top: var(--px5);
}

.account-review .rating-box-2 {
	float: none;
}

.account-review .review-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap10, 10px);
	margin-bottom: 10px;
	margin-bottom: var(--px10);
}

.account-review .review-date {
	color: #555;
	color: var(--account-review--review-date-color);
}

.account-review .review-body {
	margin: 20px 0;
	margin: var(--px20) 0;
	line-height: 20px;
	line-height: var(--px20);
}

@media (max-width: 500px){
	.account-review {
		grid-template-columns: 90px 1fr;
		gap: var(--gap10, 10px);
	}
	
	.account-review .review-head {
		grid-template-columns: 1fr;
	}
	
	.review-prod-a {
		max-height: 60px;
	}
}

#sendwishlist {
	margin-top: 20px;
	margin-top: var(--px20);
	padding: 20px;
	padding: var(--pad20, 20px);
}

#sendwishlist .message {
	margin: 10px 0 20px;
	margin: var(--px10) 0 var(--px20);
	line-height: 20px;
	line-height: var(--px20);
}

.send-wishlist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap20, 20px);
}

.send-wishlist-grid .txt-i,
.send-wishlist-grid .vs-button {
	width: 100%;
	line-height: 2;
}

#sendwishlist > .inner {
	max-width: 350px;
	max-width: var(--px350);
	margin: 0 auto;
}

.link-to-wishlist {
	line-height: 2;
}

a.wishtocart {
	font-size: 1rem;
}

#return-form-page {
	max-width: 800px;
	max-width: var(--px800);
	margin: 0 auto;
}

@media (max-width: 600px) {
	.txt-area {
		height: 7rem;
	}
}

.external-invoices {
	display: grid;
	grid-template-columns: repeat(auto-fit, var(--px300));
	gap: var(--gap20, 20px);
}

/* order history */
.order-history-container {
	overflow-y: auto;
}

.order-history-table {
	border: 1px solid #060;
	border: 1px solid var(--order-history-table-border-color);
}

.th-order-history {
	font-size: 10px;
	font-size: var(--px10, 10px);
	color: #fff;
	color: var(--order-history-table-th-color);
	background-color: #666;
	background-color: var(--order-history-table-th-border-color);
	font-weight: 700;
}

.tr-order-history {
	background: #EEFAF8;
	background: var(--order-history-table-tr-bk);
}

.tr-order-history:hover {
	background: #fff;
	background: var(--order-history-table-tr-hover-bk);
	cursor: pointer;
}

.order-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--gap30, 30px) var(--gap10, 10px);
}

.history-order { 
	margin-bottom: 20px;
	margin-bottom: var(--px20, 20px);
	line-height: 2
}

.history-order h4 { 
	margin-bottom: 10px;
	margin-bottom: var(--px10, 10px);
}

.history-order .buttons {
	margin-top: 10px;
	margin-top: var(--px10, 10px);
}

.history-order .buttons .vs-button-submit { 
	display: inline-block;
	margin-left: 10px;
	margin-left: var(--px10, 10px);
}

.order-section {
	padding-left: 30px;
	padding-left: var(--px30, 30px);
	margin-bottom: 20px;
	margin-bottom: var(--px20, 20px);
	line-height: 2;
}

.order-tag {
	color: darkgreen;
	color: var(--order-tag-color);
	display: inline-block;
	min-width: 200px;
	min-width: var(--px200, 200px);
}

.order-heading {
	font-size: 16px;
	font-size: var(--px16, 16px);
	font-weight: 700;
	clear: both;
}

#order-body {
	width: 580px;
	width: var(--px580, 580px);
}

#order-body .order-buyer {
	padding-left: 30px;
	padding-left: var(--px30, 30px);
	margin-bottom: 10px;
	margin-bottom: var(--px10, 10px);
}

@media ( max-width: 599px) {
	.order-section {
		padding-left: 0;
		overflow-y: auto;
	}
	
	.order-tag {
		min-width: 30px;
		min-width: var(--px30, 30px);
	}
}