html, body { height: 100%; background-color: #CADEE8; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.float-left {
	float:left;
}
.float-right {
	float: right;
}
.only-text-center {
 	text-align: center;
}
.only-text-left {
 	text-align: left;
}
.locale-zhtw-img{
    background-image:url('/pay/images/zhtwBtn.png');
}
.locale-en-img{
    background-image:url('/pay/images/enBtn.png');
}
.locale-th-img{
    background-image:url('/pay/images/thBtn.png');
}
.locale-vi-img{
    background-image:url('/pay/images/viBtn.png');
}

.locale-id-img{
    background-image:url('/pay/images/idBtn.png');
}

.payment-waiting {
  position: fixed;
  top: 40%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: min(90%, 400px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  text-align: center;
  color: #1a1a1a;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 20px;
}

.payment-waiting .spinner {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto 30px;
}

.payment-waiting h2 {
  font-size: 7vmin;
  line-height: 7vmin;
  font-weight: 600;
  margin: 0 0 20px;
  color: #1f2c44;
  text-align: center;
}

.payment-waiting p {
  font-size: 5.5vmin;
  line-height: 7vmin;
  color: #444;
  border-top: 3px solid #cfd7de;
  border-bottom: 3px solid #cfd7de;
  padding: 20px 0;
  text-align: center;
}

.payment-waiting p span{
  padding: 10px;
}

.flex-column {
	display: flex; 
	flex-direction: column; 
}
.white-space-break-spaces {
 	white-space:break-spaces;
}
.white-space-normal {
 	white-space:normal;
}
.flex_1 {
 	flex: 1;
}
.flex_auto {
 	flex: auto;
}
.flex-shrink-zero{
	flex-shrink: 0;
}
.width285px {
	width: 285px;
}
.width100 {
	width: 100%;
}
.width93 {
	width: 93%;
}
.width90 {
	width: 90%;
}
.width70 {
	width: 70%;
}
.width73 {
	width: 73%;
}
.height09375em {
	height: 0.9375em;
}
.padding-top-7vmin {
	padding-top:7vmin
}
.padding-uptop-7vmin {
	padding-top:7vmin;
	padding-bottom: 7vmin;
}
.padding-top-10 {
	padding-top: 10px;
}
.padding-bottom-10 {
	padding-bottom: 10px;
}
.padding3percent {
	padding: 3%;
}
.padding15px0 {
	padding: 15px 0;
}
.padding10px {
	padding:10px;
}
.padding7vmin {
	padding: 7vmin;
}
.padding3vmin {
	padding: 3vmin;
}
.padding32vmin {
	padding: 3.2vmin;
}
.padding21vmin {
	padding: 2.1vmin;
}
.padding2vmin {
	padding: 2vmin;
}
.padding08vmin {
	padding: 0.8vmin;
}
.padding1vmin {
	padding: 1vmin;
}
.margin15px0 {
	margin: 15px 0px;
}
.flex-center {
	display: flex;
	justify-content: center;
}
.display-inline {
	display: inline;
}
.display-inline-block {
	display: inline-block;
}
.modal_div{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

.clickInfo{
	width:8%;
	position: relative;
	top:7px;
}
.hide{
	display:none;
}
.font-size07 {
	font-size: 3.32vmin;
	line-height: 3.32vmin;
}

.font-size08 {
	font-size: 3.78vmin;
	line-height: 3.78vmin;
}
.font-size09 {
	font-size: 4.24vmin;
	line-height: 4.24vmin;
}
.font-size10 {
	font-size: 4.7vmin;
	line-height: 4.7vmin;
}
.font-size11 {
	font-size: 5.16vmin;
	line-height: 5.16vmin;
}
.font-size12 {
	font-size: 5.62vmin;
	line-height: 5.62vmin;
}
.font-size13 {
	font-size: 6.08vmin;
	line-height: 6.08vmin;
}
.font-size14 {
	font-size: 6.54vmin;
	line-height: 6.54vmin;
}
.font-size15 {
	font-size: 7vmin;
    line-height: 7vmin;
}
.font-size16 {
	font-size: 7.46vmin;
	line-height: 7.46vmin;
}
.font-size17 {
	font-size: 7.92vmin;
	line-height: 7.92vmin;
}
.font-size18 {
	font-size: 8.38vmin;
	line-height: 8.38vmin;
}
.font-size24 {
	font-size: 11vmin;
	line-height: 11vmin;
}
.font-size28 {
	font-size: 15vmin;
	line-height: 15vmin;
}
.text-center {
	text-align: center;
	width: 100%;
}
.img-center {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.font-size12-blue{
	color: #001B40;
	font-size: 5.62vmin;
	line-height: 5.62vmin;
	text-align: center;
    width: 100%;
}

.font-size15-blue{
	color: #001B40;
	font-size: 7vmin;
    line-height: 7vmin;
    text-align: center;
    width: 100%;
}

.processItemDiv{
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
}

.allowTopOffDiv{
	padding-left:0.4em;
	flex: 1;
}

.app_login_bg{
	width:123px;
	height:41px;
}

.selectTime {
    width: 130px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    color: #001B40;
    background-color: #C0E3F2;
    background-clip: padding-box;
    border: 2px solid #9FBDCC;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    word-wrap: normal;
    -webkit-appearance: menulist;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

.selectTime  *
{
 	font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    color: #001B40;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

.selectTime:focus {
     outline: none !important;
     box-shadow:#9FBDCC;
}

.noPaymentNote{
	white-space: normal;
	width:80%;
	font-size: 3.78vmin;
	line-height: 3.78vmin;
}

.machineStatusSTARTMsg{
	font-size: 3.9vmin;
	line-height: 5.5vmin;
}

.maNotifyUnit{
	padding-top: 0.5em; 
	padding-bottom: 0.5em;
	font-size: 1.5rem;
}

.color_gray{
	color: #363432;
}


.pay-result-note{
	line-height: 5vmin;
	color: #363432;
	font-size: 3vmin;
	line-height: 4vmin;
}

.blue_underline{
	color:#124aa9;
	border-bottom:1px #124aa9 solid; 
}

.blue_bg{
	background-color: #C0E3F2;
}

.white_bg{
	background-color: white;
}

.bar_block{
	width:100%;
	display:block;
}

.noPayment_bar_m, .machineStatusSTART_bar_m{
	width:75%;
	padding-left:13vmin; 
	display:block;
}

.notifyInfoResultFont { 
	color: #007800;
	font-size: 3.78vim;
}

.notifyInfoWordDiv {
	border: 2px solid #98B8C7;
	margin-bottom: 0.5rem;
	text-align: center;
	width: 100%;
}

.notifyInfoWord { 
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size:3.78vmin;
}

.notifLoginBtnArea {
	position:relative;
	margin-top:15px;
}

.notifLoginBtnItem {
	color:white;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
}

.notify-icon_line{
	width: 84px;
	height: 40px;
	position: relative;
	top: 10px;
	left: 5px;
}

.notify-icon_zalo{
	width: 71px;
	height: 25px;
	position: relative;
	top: 3px;
	left: 5px;
}

.notifyAllDiv{
	position:relative;
	margin-top: 10px;
}

.notifyBtnSize{
	width:220px;
	height:56px;
}

.notifyBtnCloseSize{
	width:40px;
	height:40px;
	top:9px;
	position:relative;
}

.notifyTryAgain{
	color:white;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 17px;
}

.ui-widget-overlay.custom-overlay
{
    background-color: black;
    opacity: 0.5;
}

.closeDiv{
    padding-bottom: 1rem;
}

.closeInfo{
	right:0;
	top:0;
	width: 1.5em;
	position: absolute;
}

.mStatusImg {
    position: relative;
    bottom: -6px;
	width: 1.2em;
}
.img-size240 {
	 height: 240px;
     width: 240px;
}

.footerHelper {
	height: 100vh; 
	display: flex; 
	flex-direction: column; 
}


.circleHr{
	color: #21304c;
    height: 1px;
    border: none;
    background-color: #7d96aa;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.circleDiv{
    background: url('/pay/images/circlebg.png');
	background-size: cover;
	width:90%;
}


.circleDiv:after {
	padding-top: 100%;
	display: block;
	content: '';
}


@media screen and (orientation: landscape) {
   /* For 橫向: */
	.circleDiv {
	    width:70%;
	}
}


/** modal css */
.jw-modal-background {
    /* modal background fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* semi-transparent black  */
    background-color: rgba(0,0,0,0.8);
    /* z-index must be below .jw-modal and above everything else  */
    z-index: 900;
}


.logo {
	position: absolute;
    bottom: 7px;
    right: 0;
    height: 48px;
}

.logoDiv {
	left: 0px; 
	width: calc((2% - 0.98px) * 10 + 9px);
	top: 0px; 
	height: calc(71px);
}

.header-mat-grid-list {
	height: calc(71px);
}

.locale-btn {
	width:25px;
	height:25px;
	background-size:100% 100%;
	background-color: rgba(0,0,0,0);
    border-radius: 50%;
    border: 0;
    outline:none;
}

.localeImage{
	padding: 0.3125em; 
	width: 0.25em;
}

.open:after, .remindBtn:after, .remindCheckedBtn:after , .appendBtn:after, .dryDegreeBtn:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.append {
	display: inline-block;
	align-items: center;
    vertical-align: middle;
}

.appendBtn {
	border: none;
	width: 43%;
	height: 43%;
	padding: 0;
	border-radius:50%;
	outline:none;
}

.dryDegreeCls {
	margin-left:25%;
}

.dryDegreeBtnAll{
	float:right;
	display:inline-flex;
	text-align: center;
}

.dryDegreeBtn {
	border: none;
	width: 3.2em;
	height: 3.2em;
	padding: 0;
	border-radius:50%;
	outline:none;
	text-align: center;
}

.processDryDegree {
	color:#001B40;
	line-height: 3.2em;
	text-align: center;
	vertical-align:middle;
}

.dryDegreeLow {
	background: url('/pay/images/dryDegreeLowBtn.png');
	background-size: cover;
	margin-right:0.5em;
}

.disDryDegreeLow {
	background: url('/pay/images/dryDegreeBtn.png');
	background-size: cover;
	margin-right:0.5em;
}


.dryDegreeMedium {
	background: url('/pay/images/dryDegreeMediumBtn.png');
	background-size: cover;
}

.disDryDegreeMedium {
	background: url('/pay/images/dryDegreeBtn.png');
	background-size: cover;
}


.dryDegreeHigh {
	background: url('/pay/images/dryDegreeHighBtn.png');
	background-size: cover;
	margin-left:0.5em;
}

.disDryDegreeHigh {
	background: url('/pay/images/dryDegreeBtn.png');
	background-size: cover;
	margin-left:0.5em;
}

.add {
	background: url('/pay/images/add.png');
	background-size: cover;
}

.disAdd {
	background: url('/pay/images/disAdd.png');
	background-size: cover;
}

.minus {
	background: url('/pay/images/minus.png');
	background-size: cover;
}

.disMinus {
	background: url('/pay/images/disMinus.png');
	background-size: cover;
}


.text-refundFailpng1 {
	position: absolute;
	left: 20%;
	top: 38%;
	width: 60%;
	text-align: center;
}


.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.mat-body, .mat-body-1, .mat-typography {
    font: 400 14px/20px Roboto,Helvetica Neue,sans-serif;
    letter-spacing: normal;
}

.mat-body-1 p, .mat-body p, .mat-typography p {
    margin: 0 0 12px;
}

.mat-grid-list {
    display: block;
    position: relative;
}

.mat-grid-tile {
    display: block;
    position: absolute;
    overflow: hidden;
}

.mat-grid-tile .mat-figure {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
}

.mat-grid-tile.header-content-right {
	left: calc((2% - 0.98px + 1px) * 11); 
	width: calc((2% - 0.98px) * 36 + 35px); 
	top: 0px; 
	height: calc(23px);
}

.mat-grid-tile.header-content-right .mat-figure{
   justify-content: flex-end;
}


.mat-grid-tile.header-content-bottom {
	left: calc((2% - 0.98px + 1px) * 43); 
	width: calc((2% - 0.98px) * 7 + 6px); 
	top: calc(24px); 
	height: calc(47px);
}

.mat-figure-space1 {
	left: calc((2% - 0.98px + 1px) * 10); 
	width: calc((2% - 0.98px) * 1 + 0px); 
	top: 0px; 
	height: calc(71px);
}
.mat-figure-space2 {
	left: calc((2% - 0.98px + 1px) * 47);
	width: calc((2% - 0.98px) * 3 + 2px); 
	top: 0px; 
	height: calc(23px);
}

.mat-figure-space3 {
	left: calc((2% - 0.98px + 1px) * 11); 
	width: calc((2% - 0.98px) * 32 + 31px); 
	top: calc(24px); 
	height: calc(47px);
}

.mat-radio-input {
    bottom: 0;
    left: 50%;
}

.mat-radio-button {
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
}


.mat-radio-container {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-container {
	margin-left: 5%;
	width: 28%;
	height: unset;
	background: url('/pay/images/checkedBox.png');
	background-size: cover;
}

.mat-radio-button.mat-accent .mat-radio-container {
	margin-left: 5%;
	width: 28%;
	height: unset;
	background: url('/pay/images/uncheckBox.png');
	background-size: cover;
}
.mat-radio-container:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.mat-radio-button.mat-accent .mat-radio-label-content {
	width: 100%;
	padding-left: 0px;
}

.mat-radio-button .mat-radio-ripple {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    height: 40px;
    width: 40px;
    z-index: 1;
    pointer-events: none;
}

.mat-ripple {
    overflow: hidden;
    position: relative;
}

.mat-ripple:not(:empty) {
    transform: translateZ(0);
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
	background-color: transparent !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
	background-color: rgba(255, 255, 255, 0);
}

.mat-radio-outer-circle {
    box-sizing: border-box;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    transition: border-color ease 280ms;
    width: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
}

.mat-radio-outer-circle {
    border-color: rgba(0,0,0,.54);
}

.mat-radio-button.mat-accent .mat-radio-outer-circle {
	border: 0;
}

.mat-radio-label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    width: 100%;
}


.bg-footer{
	background: url('/pay/images/BG.png');
	background-size: cover;
	background-position: center;
	text-align: center;
	color:#383635;
    padding:4.5vmin;
    font-size: 4.24vmin;
	line-height: 4.24vmin;
}

.navToMonitor{
	background: url('/pay/images/BG.png');
	background-size: cover;
	background-position: center;
	text-align: center;
	color:#383635;
    padding:4.5vmin;
    font-size: 4.24vmin;
	line-height: 4.24vmin;
}

.queryMonitorImg{
	width:2em;
	padding:1vmin;
}

.navToMonitor-underline{
	border-bottom:1px #b3bcc1 solid; 
}

.bg-payment {
	background: url('/pay/images/BG.png');
	background-size: 100% 100%;
	background-position: center;
	background-attachment: fixed;
}

.noPayment, .machineStatusSTART{
	background: url('/pay/images/BG.png');
	background-size: 100% 100%;
	background-position: center;
	background-attachment: fixed;
	text-align: center;
    width: 100%;
}

.reSelectPayment{
	font-size: 4.2vmin;
	font-weight: bold;
    color: #001B40;
}

.remindBtn {
	background: url('/pay/images/remindBtn.png');
	background-size: cover;
}

.remindCheckedBtn {
	background: url('/pay/images/remindChekdBtn.png');
	background-size: cover;
}

.text-confirmCloseDoor {
	position: absolute;
	left: 17%;
    top: 65%;
	width: 65%;
	text-align: center;
	line-height:8vmin;
}

.select_pay_colums_menu{
    justify-content: center!important;
    width:90%;
    margin: 0 auto;
}


.div_select_pay_two_colums{
	float:left;
	width:45%;
	height: auto;
	margin-left:10px;
	margin-bottom:10px;
}

.div_select_pay{
	text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.select-menu-linepay{
	content: url('/pay/images/linepay.png');
	
}

.select-menu-momopay{
	content: url('/pay/images/momopay.png');
}

.select-menu-thaiqr{
	content: url('/pay/images/thaiqr.png');
}

.select-menu-vietqr{
	content: url('/pay/images/vietqr.png');
}

.select-menu-acer_its11{
	content: url('/pay/images/acer_its_icash.png');
}

.select-menu-acer_its2{
	content: url('/pay/images/acer_its_ezcard.png');
}

.select-menu-easycard{
	content: url('/pay/images/ezcard.png');
}

/** line pay common css */

.text-png-linepay {
	position: absolute;
	top: 27%;
	width: 56%;
	text-align: center;
}

.btn-linepay {
	background: url('/pay/images/linepay-payBtn.png');
	background-size: cover;
}

.btn-linepay-th {
	background: url('/pay/images/linepay-payBtn_th.png');
	background-size: cover;
}

.pay-linepay-th {
	content:url('/pay/images/pay_linepay_th.png');
	width: 100%;
	height:100%;
}

.pay-linepay-80-th {
	content:url('/pay/images/pay_linepay_th.png');
	width: 80%;
	height:80%;
}


.btn-linepay:after , .btn-linepay-th:after {
	padding-top: 100%;
	display: block;
	content: '';
}

/** easycard common css */
.text-png-easycard {
	position: absolute;
	top: 28%;
	width: 56%;
	text-align: center;
}

.btn-easycard:after {
	padding-top: 100%;
	display: block;
	content: '';
}

/** thaiqr common css */
.qrImage{
	width: 80%;
	margin-top:20px;
}

.waitNote-thaiqr{
	line-height: 8vmin;
    font-weight: bold;
    font-size: 4vmin;
}


.text-png-thaiqr {
	position: absolute;
	top: 28%;
	width: 56%;
	text-align: center;
}

.btn-thaiqr:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-thaiqr:after{
	padding-top: 100%;
	display: block;
	content: '';
}


.thaiqr-waitNote-footer{
	line-height: 6vmin;
}

/** vietqr common css */
.vietqrImage{
	width: 80%;
	margin-top:20px;
}

.waitNote-vietqr{
	line-height: 8vmin;
    font-weight: bold;
    font-size: 4vmin;
}


.text-png-vietqr {
	position: absolute;
	top: 28%;
	width: 56%;
	text-align: center;
}

.btn-vietqr:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-vietqr:after{
	padding-top: 100%;
	display: block;
	content: '';
}


.vietqr-waitNote-footer{
	line-height: 6vmin;
}

/** momopay common css */
.text-png-momopay {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-momopay:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-momopay:after{
	padding-top: 100%;
	display: block;
	content: '';
}

/** acer_its common css */
.text-png-acer_its {
	position: absolute;
	top: 30%;
	text-align: center;
}


.btn-acer_its2:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.btn-acer_its11:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-acer_its:after{
	padding-top: 100%;
	display: block;
	content: '';
}


/** storedvalue common css */
.text-png-storedvalue {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-storedvalue:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-storedvalue:after{
	padding-top: 100%;
	display: block;
	content: '';
}


/** mpos  common css */
.text-png-mpos {
	position: absolute;
	top: 30%;
	text-align: center;
}


.btn-mposCARD:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.btn-mposQR:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-mpos:after{
	padding-top: 100%;
	display: block;
	content: '';
}

.select-menu-mposQR{
	content: url('/pay/images/mpos_qr.png');
}

.select-menu-mposCARD{
	content: url('/pay/images/mpos_card.png');
}

/** ipassmoney common css */
.text-png-ipassmoney {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-ipassmoney:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-ipassmoney:after{
	padding-top: 100%;
	display: block;
	content: '';
}

/** newebpay common css */
.text-png-newebpay {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-newebpay:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-newebpay:after{
	padding-top: 100%;
	display: block;
	content: '';
}

/** nft common css */
.text-png-nft {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-nft:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-nft:after{
	padding-top: 100%;
	display: block;
	content: '';
}

/** easywallet common css */
.text-png-easywallet {
	position: absolute;
	top: 30%;
	text-align: center;
}

.btn-easywallet:after {
	padding-top: 100%;
	display: block;
	content: '';
}

.open-easywallet:after{
	padding-top: 100%;
	display: block;
	content: '';
}