/*
Theme Name:   ABC Child
Description:  Child Theme base on twenty-nineteen
Template:     twentynineteen
Version:      1.0.0
Text Domain:  twentynineteenchild
 */
 @charset "UTF-8";

tabs#coupon-tabs button{
	line-height: 5vw;
}
.coupon-total-remaining {
	color: #faa61a;
	width: 90%;
	text-align: left;
	margin: 0 auto;
	font-weight: 500;
}
.coupon-type-list button{
	border-radius: 0;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 18px;
	color: #b2b2b2;
}
.coupon-list{
	background-color: white;
	border-radius: 0 0 25px 25px;
	padding-top: 20px;
	color: #333333;
	margin-top: -3vh;
}
.coupon-item{
	margin: 4% 4% 4% 6%;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 4%;
	font-size: 4vw;
}
.coupon-remaining{
	color: #faa61a;
}
#charged-records-list{
	background-color: white;
	border-radius: 25px;
	padding-top: 20px;
	color: #333333;
	margin-top: 20px;
}
#history-list{
	background-color: white;
	color: #333333;
	margin-top: 20px;
	border-radius: 25px;
	padding-top: 20px;
}

.brand-csl #history-list.mup {
	border-radius: 0 0 25px 25px;
	padding-top: 30px;
	margin-top: -3vh;
}

.brand-1010 #history-list,.brand-1010 .coupon-list {
	background-color: #333333;
	color: white;
}

.order-price {
	color: #faa61a;
	text-align: right;
	vertical-align: top;
	width: 35%;
}
#coupon-tabs #usage-history-sub-tabs{
	background: white;
	border-radius: 25px 25px 0 0;
	margin-top: 20px;
	padding-top: 12px;
}
.brand-1010 #coupon-tabs #usage-history-sub-tabs{
	background-color: transparent;
}
#usage-history-sub-tabs button{
	margin-right: 20px;
	margin-left: 20px;
}
#mup-list{
	background-color: white;
	border-radius: 0 0 25px 25px;
	padding-top: 20px;
	color: #333333;
	margin-top: -2vh;
	width: 100%;
}
.brand-1010 #mup-list {
	margin-top: 0;
	border-radius: 25px;
	background-color: #333333;
	color: white;
}
.brand-1010 button.tab,
.brand-1010 button[class^='coupon-type']{
	background: transparent;
	color: #262523;
}
.brand-1010 .coupon-type-list{
	background: #444441;
}
.brand-1010 .coupon-list{
	background-color: #444441;
}
body.brand-1010 .coupon-type-list button.active {
	color: #f2c97f;
	border-bottom: 3px solid #f2c97f;
}
.brand-1010 [class^='coupon-type-']{
	color: #262523;
}
.brand-1010 #coupon-tabs button{
	color: #e5e5e5;
}
.brand-1010 .coupon-item{
	border-bottom: 1px solid #b9b9b9;
}
.brand-1010 #charged-records-list{
	color: #999999;
	background-color: #444441;
}
.brand-1010 .order-item > div:first-of-type,
.brand-1010 .order-type{
	color:#ffffff;
}
.brand-1010 .order-item:not(:first-child){
	border-top: 1px solid #b9b9b9;
}
.brand-1010 .coupon-remaining {
	color: #cb9c57;
}
.coupon-remaining {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.5;
	float: right;
	display: flex;
	padding-right: 18px;
	position: relative;
}
.coupon-remaining::after {
   content: ' ';
   background-repeat: no-repeat;
   background-position: right;
   background-size: contain;
   width: 5vw;
   height: 5vw;
}
.brand-cs_postpaid .coupon-remaining {
	color: #be81ef;
}
body.zh-hk .coupon-remaining:before {
	content: '尚餘: ';
}
body.en-us .coupon-remaining:before {
	content: 'Remaining: ';
}
.sub-coupon-remaining {
	color: #333333;
	float: right;
	text-align: right;
}
.brand-1010 .sub-coupon-remaining {
	color: #ffffff;
}
.brand-cs_postpaid .sub-coupon-remaining {
	color: #333333;
}
body.zh-hk .sub-coupon-remaining:before {
	content: '數量';
}
body.en-us .sub-coupon-remaining:before {
	content: 'Quantity';
}
.individual-coupon-subtotal {
   color: #eeaa41;
   float: left;
   text-align: left;
}
.brand-1010 .individual-coupon-subtotal {
   color: #cb9c57;
}
.brand-cs_postpaid .individual-coupon-subtotal {
   color: #be81ef;
}
body.zh-hk .individual-coupon-subtotal:before {
   content: '尚餘: ';
}
body.en-us .individual-coupon-subtotal:before {
   content: 'Remaining: ';
}

.coupon-remaining.expand::after {
   background-image: url('../../uploads/2023/08/arrow-csl-up-pointer-e1691554637141.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}
.brand-1010 .coupon-remaining.expand::after {
   background-image: url('../../uploads/2023/12/arrow-1010-up-pointer-v3.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}
.brand-cs_postpaid .coupon-remaining.expand::after {
   background-image: url('../../uploads/2023/08/arrow-cs-postpaid-up-pointer-e1691555021278.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}
.coupon-remaining.collapse::after {
   background-image: url('../../uploads/2021/12/arrow-csl.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}
.brand-1010 .coupon-remaining.collapse::after {
   background-image: url('../../uploads/2023/12/arrow-1010-down-pointer-v3.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}
.brand-cs_postpaid .coupon-remaining.collapse::after {
   background-image: url('../../uploads/2021/12/arrow-cs-postpaid.png');
   background-size: 12px;
   margin-right: 3px;
   margin-top: 2px;
   position: absolute;
   bottom: 1.5px;
   right: 3px;
}

.mup-coupon-message span a {
	color: #0070c0;
}
.mup-coupon-list {
	display: table;
	width: 100%;
}
.mup-coupon-item {
	display: table-row;
	color:	#000000;
}
.mup-coupon-item div {
	border: 1px solid #ffffff;
}
body.brand-1010 .mup-coupon-item div {
	border-color: #000000;
}
.mup-coupon-name-header {
	display: table-cell;
	width: 50%;
	text-align: center;
	background-color: #4f81bd;
	color: #ffffff;
	padding: 1vw;
}
body.zh-hk .mup-coupon-name-header:before {
	content: "適用目的地";
}
body.en-us .mup-coupon-name-header:before {
	content: "Supported destination";
}
.mup-coupon-remaining-header {
	display: table-cell;
	width: 50%;
	text-align: center;
	background-color: #4f81bd;
	color: #ffffff;
	padding: 1vw;
}
body.zh-hk .mup-coupon-remaining-header:before {
	content: "待用通行證數目";
}
body.en-us .mup-coupon-remaining-header:before {
	content: "Number of Coupons";
}
.mup-coupon-name {
	display: table-cell;
	width: 50%;
	background-color: #e9edf4;
	text-align: center;
	padding: 2vw;
}
.mup-coupon-remaining {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	text-align: center;
	background-color: #e9edf4;
	padding: 2vw;
}
.coupon_detail_page_name {
	color: #eeaa41;
	width: 100%;
	text-align: center;
	margin: 2vw 0;
}
.brand-1010 .coupon_detail_page_name {
	color: #ffdd00;
}
body.zh-hk .coupon_detail_page_name:before {
	content: '優惠卷詳情';
}
body.en-us .coupon_detail_page_name:before {
	content: 'Coupon Details';
}
body.zh-hk .coupon_detail_summary > div {
	line-height: 1.5;
}
#coupon_detail_list {
	width: 100%;
	font-size: 3vw;
}
#coupon_detail_list th {
	background-color: #faa61a;
	border: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	color: #ffffff;
	height: 6vw;
	text-align: left;
	padding-left: 2vw;
}
.brand-1010 #coupon_detail_list th {
	background-color: #ffdd00;
	color: #000000;
}
#coupon_detail_list tr:nth-child(even) {
	background-color: #f2f2f2;
}
#coupon_detail_list tr:nth-child(odd) {
	background-color: #ebebeb;
}
.brand-1010 #coupon_detail_list tr {
	background-color: #000000;
}
#coupon_detail_list td {
	border: 1px solid #ffffff;
	font-weight: 700;
	height: 6vw;
	padding-left: 2vw;
}
#coupon_detail_list tr td:nth-child(2) {
	padding-right: 2vw;
	text-align: center;
}
.order-price {
	color: #f7931e;
	text-align: right;
	vertical-align: top;
	width: 35%;
}
.brand-1010 .order-price,
.brand-1010 .history-user {
	color: #cb9c57;
}
.brand-cs_postpaid .order-price,
.brand-cs_postpaid .history-user {
	color: #be81ef;
}
.order-item:not(:first-child) {
	border-top: 1px solid #b9b9b9;
}
.order-item > div:not(.history-user) {
	display: inline-block;
}
.order-item > div:first-child {
	width: 65%;
}
.order-type {
	text-align: right;
	vertical-align: top;
	width: 35%;
	color: #999999;
	font-size: 14px;
}
.history-user {
	display: none;
	width: 65%;
	color: #f7931e;
}
body.zh-hk #history-list .history-user::before {
	content: '持有人: ';
}
body.en-us #history-list .history-user::before {
	content: 'Owner: ';
}
body.zh-hk #mup-list .history-user::before {
	content: '使用者: ';
}
body.en-us #mup-list .history-user::before {
	content: 'User: ';
}