@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600&display=swap');

body, div, h1, h2, h3, h4, h5, p, a, span, label{ font-family: 'Noto Sans Thai' !important; font-weight:400; }
body{ background-color: #f5f5f5 !important; }
#redeem-airasia{ padding-top:65px; }
#frm-airasia{ padding:60px 0 20px; background-color: #fff; }
#frm-airasia button{ width:100%; padding:7px 0; background:#ccc; border:1px solid #ccc; color:#fff; font-size:18px; }
#frm-airasia button.active{ background-color: #c5281d; border-color: #c5281d; }
#airasia-account-id{ border:none; border-bottom:1px solid #cfcfcf; width:100%; padding:5px 0; border-radius: 0; font-size:14px; text-align: left; background:#fff; }
#airasia-input{ position:relative; }
#airasia-input label{ font-size:16px; line-height: 1.3em; }
#airasia-input .err-msg{ display:none; position:absolute; left:0; top:100%; width:100%; padding:10px 15px; background:#feeeeb; color:#c5281d; }
#airasia-input.err-show #airasia-account-id{ border-bottom-color: #c5281d; }
#airasia-input.err-show .err-msg{ display:block; }
.lds-ellipsis {
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
}
.lds-ellipsis div {
   position: absolute;
   top: 33px;
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background: #333;
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
   left: 8px;
   animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
   left: 8px;
   animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
   left: 32px;
   animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
   left: 56px;
   animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
   }
   100% {
     transform: scale(1);
   }
}
@keyframes lds-ellipsis3 {
   0% {
     transform: scale(1);
   }
   100% {
     transform: scale(0);
   }
}
@keyframes lds-ellipsis2 {
   0% {
     transform: translate(0, 0);
   }
   100% {
     transform: translate(24px, 0);
   }
}

#redeem-title{ position:fixed; top: 0; left:0; width:100%; background:#c5281d; text-align:center; padding:20px 0; color:#fff; font-size:18px; }
#airasia-description{ padding:5px 0 15px; border-bottom:1px solid #cfcfcf;  }
#airasia-description .container{ display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;    -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#airasia-description .container .logo{ padding:20px 0; }
#airasia-description .desc{ padding-left:20px; font-size:18px; }
.airasia-button-box{ position:fixed; bottom: 0; left:0; width:100%; border-top:1px solid #cfcfcf; padding:20px 0; background-color:#fff; }
#btn-airasia-close{ display:block; text-align: center; width:100%; padding:7px 0; background:#ccc; border:1px solid #ccc; color:#fff; font-size:18px; background:#c5281d; }
#redeem-success{ text-align:center; padding:60px 0 0; }
#redeem-success .text{ font-size:19px; font-weight:600; margin-top:15px; }
#redeem-success .icon{ background-color:#c5281d; display:inline-block; padding:15px; border-radius:50%; overflow: hidden; }
#redeem-success .icon i{ font-size:40px; color:#fff; }
#alert-modal .modal-content{ width:100%; }
#alert-modal .btn-close{ width:100%; text-align: center; background:#c5281d; color:#fff; border:none; font-size:14px; padding:10px 0; }
#alert-modal .modal-header, #alert-modal .modal-footer{ border:none; }
#alert-modal .modal-header .close{ background:#999; border-radius: 50%; padding:5px 10px; color:#fff; opacity: 1; }
.modal-dialog-centered{ 
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   min-height: calc(100% - (1.75rem * 2)); 
}
