/* ==========================================================================
   Base Styles, Bootstrap Modifications & Fonts Import
   ========================================================================== */

@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);
/*@import url(buttons.css);*/


::-moz-selection {background: #f2c2c9;color: #a4003a;text-shadow: none;}
::selection {background: #74b9ed;color: white;text-shadow: none;}

/*
 * A better looking default horizontal rule
 */

/*body{
    background-image: url("../img/portal_bg.png");
}*/

.bg-custom{
    max-width: 100%;
}
.bg-light-gray{
    background: #efeff3;
}

#homepage-carousel{margin-top: 70px; padding: 0}
.signup-container{padding: 8rem 0;}
.signup-container .upper-title{font-size:50px;}

hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}
.mt {	margin-top: 80px;}
.mb {	margin-bottom: 80px;}
.modal.modal-fullscreen .modal-dialog{margin: 0;width: 100%;}
.modal.modal-fullscreen .modal-dialog, .modal.modal-fullscreen .modal-content {bottom: 0;left: 0;position: absolute;right: 0;top: 0;    border-radius: 0;
    border: 0px;}
.modal.modal-fullscreen .modal-content .modal-body, .modal.modal-fullscreen .modal-content .modal-footer{background: #fff;}
.modal-iframe iframe{border: 0px; width: 100%; min-height: 500px;}
.modal-iframe .modal-content .modal-body {}
.input-group-btn select { border-color: #ccc;margin-top: 0px; margin-bottom: 0px;  padding-top: 5px;  padding-bottom: 6px;}
.form-control-noborder{border: 0px; border-radius: 0px; box-shadow: none; outline: none;}
.form-control-noborder:focus{ outline: none; box-shadow:none;}

/*Custom bootstrap*/
.gutter-10{margin-left:-10px; margin-right:-10px;}
.gutter-10 > [class*='col-'] {padding-right:10px;padding-left:10px;}
.gutter-5{margin-left:-5px; margin-right:-5px;}
.gutter-5 > [class*='col-'] {padding-right:5px;padding-left:5px;}
.gutter-2{margin-left:-2px; margin-right:-2px;}
.gutter-2 > [class*='col-'] {padding-right:2px;padding-left:2px;}
.form-horizontal .form-group.gutter-2{margin-left:-2px; margin-right:-2px;}
.form-horizontal .form-group.gutter-2 > [class*='col-'] {padding-right:2px;padding-left:2px;}
.gutter-1{margin-left:-1px; margin-right:-1px;}
.gutter-1 > [class*='col-'] {padding-right:1px;padding-left:1px;}
.gutter-0{margin-left:0px; margin-right:0px;}
.gutter-0 > [class*='col-'] {padding-right:0px;padding-left:0px;}
.radio-block input[type=radio]{display: block;}

#pagination{text-align: center;}
#pagination button{border:solid 1px #EEEEEE;  padding: 4px 15px; background: transparent; color: #434343;}
#pagination button:hover{background: #4DA0D7; border-color: #4DA0D7;}
#pagination button[disabled]:hover{border-color: #EEEEEE; background: transparent;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background-color: #2884c6;
    border-color: #2884c6;
}
.relative{position: relative;}
.input-group.date .input-group-addon{border-radius: 0px;}
.margin5 {
    margin: 0.312rem;
}
.shadow{box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); height: inherit;}


.btn-primary,.btn-default,.btn-info,.btn-warning,.btn-success,.btn-danger{
    font-size: 14px;
    font-weight: 400; padding: 10px 28px;
    min-height: 40px;  border:0px; text-transform: uppercase;
    border-radius: 0px;

}

.btn, .btn-group-vertical>.btn, .btn-group>.btn{


    min-width: 120px;
}
.btn-group-vertical>.btn, .btn-group>.btn{
     margin: auto;
     width: auto;
        float: none;
}

.box .form-button{
    max-width: 600px;
}

.btn-primary{
    background-color: #4DA0D7;
    border-radius: 0px;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:visited,
.btn-primary:link{
    background-color: #3c3c3c;
}
.btn-success {
    background: #4DA0D7;
    color: #fff;
    text-transform: none;
}

.btn-success:hover {
    background-color: #3c3c3c;
}

.btn-default:hover {
    color: #fff;
    background-color: #4DA0D7;
    border-color: #adadad;
}
.btn-default{
    background: #ff970d;
    background-color: #f1f1f1;
    background-size: 100% 100%;
    color: #323232;
    border: solid 1px gray;
    /*box-shadow: inset 0 2px 10px white;*/
}
.btn-search{
    font-size: 14px; font-weight: 700;
    background: #f1f1f1;
    background-color: #f1f1f1;
    background-size: 100% 100%;
    color: #323232;
    border: solid 1px gray;
}
.btn-search:active{
    color: #fff;
    background-color: #4DA0D7;
    border-color: #adadad;
}
.btn-redeem{
    font-size: 14px; font-weight: 700;
    background: #f1f1f1;
    background-size: 100% 100%;
    color: #323232;
    border: solid 1px gray;
    display: block;
    /*width: 100%;*/

}
.btn-redeem:active{
    color: #fff;
    background-color: #4DA0D7;
    border-color: #adadad;
}
.btn-redeem:hover{
    color: #fff;
    background-color: #4DA0D7;
    border-color: #adadad;
}
.btn-info:hover {
    color: #fff;
}

.btn-info {

    background-color: #4DA0D7;
    color: #323232;
}

.btn-warning{
    background-color: #f1f1f1;
    background-size: 100% 100%;
    color: #323232;
    border: solid 1px gray;
}
.btn-warning:hover{
    color:#fff;
}
.btn.btn-xs{ padding: 6px 12px; font-size: 10px; height: 28px;}
.btn.btn-sm{ font-weight: 400; height: 28px;}
.white-transparent-btn{background: none !important; color:white; border: 1px solid white;}
.white-transparent-btn:hover{border: 1px solid white;}

.table.table-style-1>tbody>tr>td,
.table.table-style-1>thead>tr>th{vertical-align: middle; height: 60px;}
.table.table-style-1>thead>tr>th{ border-bottom-width: 1px;}

.table-no-bordered tbody tr td{border: 0px;}


.modal-style-1 button.close {position: absolute;right: -7px;top: -7px;width: 30px;height: 30px;background: #fff;
    border-radius: 50%;opacity: 1;margin-top: 0px;padding-left: 1px;outline: none;}
.modal-style-1 button.close:focus{outline: none;}
.modal-style-1 button.close:hover{background: #2884c6; color: #fff;}
.modal-style-1 .modal-dialog{min-width: 450px;}
.modal-style-1 .modal-content{border: 0px;}
.modal-style-1 .modal-footer{text-align: center; font-size: 15px; border-top: 0px; padding-bottom: 30px; padding-top: 0px;}
.modal-style-1 .modal-body {padding: 35px;}
.modal-style-1 .form-group label{font-size: 13px; font-weight: 400;}
/*.modal-style-1 .btn-nmc{min-height: 51px; border-radius: 5px; font-size: 19px; font-weight: 400;}*/
.modal-style-1 .form-control{border-radius: 0px; }
.modal-style-1 .input-group-addon{border-radius: 0px;}
.form .input-group-addon{border-radius: 0px;}
.editor{min-height: 304px;}
.bgcover{background-size: contain; background-repeat: no-repeat; background-position:center; }

.mb-4{margin-bottom: 40px;}
.mb-2{margin-bottom: 20px;}

/* General styles
   ========================================================================== */


body {
    font-family: 'Catamaran', sans-serif;
    font-size: 14px; color: #000;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    letter-spacing: .1258103rem;
}
.nav{
    text-align: center;
    color: #fff;
}

.nav>li>a{
    text-decoration: none;
    font-weight: bold;
}

@font-face {
    font-family: 'Didot-bold';
    src: url('../fonts/Didot/Didot Bold.otf') format("opentype");
}
@font-face {
    font-family: 'Didot-md';
    src: url('../fonts/Didot/Didot Medium.ttf');
}

h1,h2,h3,h4,h5{
    font-family: Didot-bold, sans-serif;
}

.wt-logo{height: 50px;}
.wt-main-logo{height: 1.8rem;}
.wt-btn{
    background: #ff4178;
    color: white ;
    padding: 0.7em;
    border-radius: 0px !important;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Catamaran', sans-serif;
    letter-spacing: 1px;
}
.wt-btn.on-hover.chosen{
    background: #ff014b;
    color: white;
}

.navbar{border-bottom: 1px solid #d3d3d3ff;}

.txtrnfrm-normal{text-transform: none !important;}
.wt-btn, .wt-btn * , .wt-btn-w, .wt-btn-w *{cursor: crosshair !important;}
.wt-btn:hover, .wt-btn:active, .wt-btn-w:hover, .wt-btn-w:active{background:#ff014b; color: white;}
.wt-link{color: #ff4178; text-decoration: none; cursor: crosshair;}
.wt-link:not(.btn):hover{color: #ff4178; text-decoration: underline;}
.wt-link:not(.btn):active{border: 1px solid #ff4178;}
li.wt-btn a{color: white;}
.wt-btn.on-hover{color:black; background:none; cursor: crosshair;}
.wt-btn.on-hover:hover, .wt-btn.on-hover:hover > a{background:#ff014b; color: white;}
li.wt-btn.on-hover a{color:black;}

.wt-btn-w.on-hover{color:white; border:1px solid white;}
li.wt-btn-w.on-hover a{color:white; border:1px solid white;}

.wt-membership .wt-side-nav{padding-right:0px;}
.wt-membership .wt-side-nav .sidebar-nav{border-right:0;}
.wt-membership .membership-col{border-left:0;}

.nav.hidden{
+transform(translateY(100%));
}

.alert{margin-top: 20px;}
.page-content .alert{margin-top: 0px;}

.top-nav-dropdown .dropdown-menu li a{font-size: 14px;}

label
#firstTimeLoginModal .modal-content .modal-body > div:first-child{height:85%;}
#firstTimeLoginModal .modal-content .modal-body .btn-wrapper{display:flex;}
#firstTimeLoginModal .modal-content .modal-body .btn-wrapper a{border-radius: 12px;}
#firstTimeLoginModal .modal-content {height: 250px; width: 325px; margin: auto;}
.a-basic{ text-decoration: none; color: black;}
.a-basic:hover{text-decoration: none; color: black;}
#login-modal .modal-dialog{max-width: 630px;}
.login-modal > .modal-header-brand > img{width: 125px; height: 125px;}
#login-modal .modal-header{display: block; padding: 0px; border-bottom: none;}
#login-modal .modal-header .title h1{font-size: 48px;}
#login-modal .modal-header a.social-login-link{
    font-size: 12px;
    background: none;
    color: black;
    border: 1px solid lightgrey;
    box-shadow: none;
    height: auto;
}

.wt-login-ftr{margin: 0;}
#login-modal select.form-control{-webkit-appearance: inherit;-moz-appearance: inherit; appearance: auto;font-size:1em;}
#login-modal .modal-header a.social-login-link:not(:first-child){margin-left: 5px;}
#login-modal .modal-header a.social-login-link:active{text-decoration: none;}
#login-modal .modal-header a.social-login-link{display: inline-grid;}
#login-modal .modal-header a.social-login-link img{margin: auto; margin-bottom: 5px;}
#login-modal .modal-header a.social-login-link > p{margin-left: 2px;}
#login-modal .modal-header a#social-facebook-login:after{content: "Facebook Login";}
#login-modal .modal-header a#social-google-login:after{content: "Google Login";}
#login-modal .modal-header a#social-apple-login:after{content: "Apple";}
#login-modal .modal-content .modal-login-body .success{background: seagreen;}
#login-modal .modal-content .modal-login-body .failed{background: red;}
#login-modal .social-login{display:flex; padding:10px;}
#login-modal .modal-header .title{text-transform: none;}
#login-modal .modal-close{background: #ff4178; font-size: 24px; padding:15px 25px; color:white;}
#auth-login-msg{display: flex;padding: 10px; text-align:center; margin-bottom: 30px; border-radius: 5px; align-items: center;}
#login-form .icofont-lock{padding: 6px;font-size: 17px;}
#login-form{padding-bottom:20px;}
#auth-login-msg .icofont-exclamation-circle{color: #842029; font-size:24px; }
#auth-login-msg .icofont-check-circled{color: #3c763d; font-size:24px;}
#auth-login-msg .msg-wrapper{width: auto;}
.mobile-number-input-group input{display: flex; padding: 7px; border:1px solid lightgrey;outline: none;}
.mobile-number-input-group .input-group{flex-wrap:unset;flex:1;}
.new-wt .mobile-number-input-group .input-group .form-select{
    width: 100px;
}

.new-wt .form-control, .new-wt.force .form-control{border: 0; box-shadow: none; border-bottom: 1px solid #d3d3d3; border-radius: 0px; padding:0px; width:100%;}
.new-wt select.form-control, .new-wt.force select.form-control{padding:10px;}
.new-wt .form-control:disabled, .new-wt.force .form-control:disabled{background: none;}
.new-wt .control-label,.new-wt.force .control-label{font-weight: 700;}
/*.mobile-number-input-group .input-group input:first-child{width: 5%;}
.mobile-number-input-group .help-block:not(:first-child){display:block;}
*/
#maincontentwrap{min-height: 300px;}

.page0-title{
    background-color: #ff4178;
    text-transform: uppercase;
    font-size: 21px;
    padding-bottom: 10px; padding-top: 10px;
}
.text-gray{color: gray;}

.alert{display: flex;}
.alert .close{background: none;border: none; display:none;}
.alert-success .close{color: #0f5132;}
.alert-danger .close{color: #842029;}

/*icons*/
.user-icon{background-image: url("../plugins/bootstrap5/icons/person-fill.svg");}
.calendar-icon{background-image: url("../plugins/bootstrap5/icons/calendar3.svg");}
.phone-icon{background-image: url("../plugins/bootstrap5/icons/phone.svg");}
.email-icon{background-image: url("../img/email-icon.png");}
.cake-icon{background-image: url("../img/cake-icon.png");}
.check-icon{background-image: url("../plugins/bootstrap5/icons/check.svg");}
.star-icon{background-image: url("../plugins/bootstrap5/icons/star-fill.svg");}
.arrow-up-fill-icon{background-image: url("../plugins/bootstrap5/icons/arrow-up-square-fill.svg");}

.login-input-icons{
    padding: 8px;
}

.modal-header a{
    width: 100%;
    border-radius: 5px;
}

.ui-helper-hidden-accessible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
}

#login-form button:hover, #login-form input[type=submit]:hover{
    transition: 0.3s ease-in-out;
}

.login-btn{margin-top: 15px;}
.modal-body p{/*margin: 0;*/}
.btn-large{padding-top: 15px;}
.login-brand{max-width: 100%;height: auto;}
.logo-social-media{width: 25px;height: 25px;}
.apple-icon{width: 35px;height: 35px;}
.nf{padding: 0px; display: block;}
.nf div{width: 100%; padding: 0px; line-height: 15px;}

.fixed-center-box{position:fixed;top:50%;left:50%;transform: translate(-50%,-50%);z-index: 11;}
.small-prompt-box{width:350px;border: 1px solid lightgrey;}
.small-prompt-box .btn-wrapper{display: flex;justify-content: center;flex-wrap: wrap}
.small-prompt-box .btn-wrapper button, #voucher-detail button{padding: 10px;}
.small-prompt-box .btn-wrapper button{width: 45%; margin-left: 10px;}

#barQrCodeModal{z-index: 1062;background:rgba(30, 30, 30,0.7);}
#barQrCodeModal .sld .slick-slide{width:100%;}
#barQrCodeModal .slick-slide img{margin:auto; width: 375px; border: 2px solid white;}
#barQrCodeModal .sld .qr-code img{width:200px;}
#barQrCodeModal .sld{
    transition: opacity 1.25s ease-out;
}
#barQrCodeModal .sld .slick-track{display: flex; width:100%;left:0; align-items: center;margin-bottom: auto;margin-right: auto;}
#barQrCodeModal .modal-content{background: none; border: none; width:100%;}
#barQrCodeModal .modal-dialog{max-width:100% !important;}
.sld img:not(:first-child){margin-left:30px;}

.email-register-box{width:48.850%;}

#voucher-detail .staff-btn button:first-child{background: #333!important;color: white !important;}
#voucher-detail .staff-btn button:not(:first-child){background: none!important;color: black !important;}
#voucher-detail .staff-use{display: none;}
#voucher-detail .voucher-detail-btn button.active{background: black; color: white;}
#voucher-detail .voucher-detail-btn{display: flex;padding: 10px;background: white;z-index: 2;position: relative;}
#voucher-detail .reverse-style{display: flex;}
#voucher-detail .reverse-style button{width: 50%!important;background: none !important; color: black !important;}
#voucher-detail .reverse-style button:first-child{background: black !important; color: white !important;}
#voucher-detail .voucher-detail-btn button{border: 1px solid black; flex: 1;}
.small-prompt-box button:first-child,
#voucher-detail .voucher-detail-btn button:first-child{background: black;}
.small-prompt-box button:not(:first-child),
#voucher-detail .voucher-detail-btn button:not(:first-child){background:none; color: black;}
#voucher-detail .content-wrapper{max-height: 925px; display: flex;}
#voucher-detail .row > div{width:50%; padding: 10px; height: 90%;}
#voucher-detail .row > div:only-child{width:100%;}
#voucher-detail .col{width: 50%;}
#voucher-detail .form-group{display: flex; margin-bottom: 10px; padding: 10px;}
#voucher-detail .form-group input, #voucher-detail .form-group select{width: 50%; font-size: 14px;border-radius: 0px;}
#voucher-detail .toast-header{justify-content: center; word-spacing: 3px;}
#voucher-detail {}
#voucher-detail .header-img-row img{width: 50%; margin:auto;object-fit: contain;}
#voucher-detail .row .content-header-col img{width: 70px; height: 70px; object-fit: contain;}
#voucher-detail .content-wrapper .content-body{overflow-y: auto; overflow-x: hidden; padding: 10px;}
#voucher-detail .content-wrapper .content-body .content-header-col div:last-child{margin-left: 10px;}
#voucher-detail .content-wrapper .content-body::-webkit-scrollbar{width: 6px;background: none;}
#voucher-detail .content-wrapper .content-body::-webkit-scrollbar-thumb{background: gray;height:15px;border-radius: 7px;}
#voucher-detail .content-body .expiry-text{font-size: 11px;}
#voucher-detail .content-header-col .product-name{color: dodgerblue;}
#voucher-detail .barcode-div img{ }
#voucher-detail .cb-2{overflow-y:auto;overflow-x:hidden;}
#voucher-detail .voucher-form{margin-top: -40px;}
#voucher-detail .cb-2{padding-top: 0px;}
#voucher-detail .btn-use-voucher{padding:0px;}
#voucher-prompt{display: none;}
.split-vouchers .box-wrapper:hover, .prod-vouchers .box-wrapper:hover,
.my-vouchers .box-wrapper:hover, .split-vouchers .box-wrapper:active,
.prod-vouchers .box-wrapper:active, .my-vouchers .box-wrapper:active{filter:brightness(85%);}
.my-vouchers .vouchers{justify-content: center; background: #efeff3; padding: 30px 15px; margin:5px 0 0 0;}
.vouchers .box-wrapper{user-select: none;}
.detail-box, .small-prompt-box{background:white;padding:20px;}

.icon{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 32px;
    border: 1px solid lightgray;
    border-radius: 3px;
}

.lock-icon{
    background-image: url("../plugins/bootstrap5/icons/lock-fill.svg");
}

.input-wrapper img, .input-wrapper input{
    margin: 0;
}

.modal-login-body input[type=text], .modal-login-body input[type=email],
.modal-login-body input[type=password] {
    padding: 5px;
    height: 32px;
    width: 215px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.modal-login-body input[type=text], .modal-login-body input[type=email],
.modal-login-body input[type=password]{
    font-size: 13.5px;
}
.modal-login-body button{
    font-weight: bold;
    width: 100%;
}

.page-header{
    padding-bottom: 9px;
    margin: 20px 0;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.nav-toggler{visibility: hidden;}

.well{
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fdfdfd;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
}
#membership-tier > .row{
    width: 80%; margin: 0 auto;
    border: 1px solid lightgray;
    background:#faf7f7;
    min-height: 80px;
    border-radius: 3px;
    padding: 7px;
}

#membership-tier .tier-info-col{width: 80%;}
#membership-tier .header{padding: 5px; border-bottom: 1px solid gray; margin-left:0;padding-left:0px;}
#membership-tier .header .tier-img-wrapper{display: none;}
#membership-tier .header > div {display: flex; width: 100%;}
#membership-tier .row:not(:first-child){margin-top: 10px;}
#membership-tier .tier-img-wrapper{
    background: #000;
    border-radius: 5px;
}
#membership-tier .tier-img-wrapper img{object-fit: contain;}

#membership-tier .header .d-flex
p:not(:first-child){margin-left: 5px;}
#membership-tier .row .status{margin-left:3px;}
#membership-tier .row .status p{
    text-transform: uppercase;
    background: green;
    width: 50px;
    font-size: 9px;
    color: white;
    border-radius: 3px;
    padding: 3px;
    text-align: center;
}

.header-info.tier-card{padding:0px;}

#point-detail .table th, #point-detail .table td{text-align: center;}

#membership-tier .row .small{font-size: 10px;}
#membership-tier .row .small p{margin-left: 3px; margin-top: 2px;}
#membership-tier .header-info{height: 18px; display: flex; word-wrap: break-word;}
#membership-tier .cardno-row{text-align:center;font-size:12px;display:none;}
.text-right{text-align:right;}
.text-left{text-align: left;}
.f3-card-name{text-transform: uppercase; font-weight: bold;}
.f3-card-details p{ margin-left: 5px;}
.f3-card-details .icon,
#membership-tier .icon{width: 15px; height: 15px; border:none;}
.header-info div:not(:first-child){margin-left: 15px; font-size: 11px; margin-top: 2px;}
.back .qr-code{padding: 20px 35px;}
.back .col-barcode{padding-top:20px;}
.f3-card .row:not(:first-child){margin-top: 30px;}
.f3-card .logo-img img{object-fit: contain;}
.f3-card .qr-code canvas{width:125px; height:125px;}
.card-number p, .join-since p{font-size: 13px; margin-bottom: 2px; word-wrap: break-word;}
.card-number p:first-child, .join-since p:first-child{font-size: 10px;}
.card-barcode{
    display: block;
    -webkit-user-select: none;
    margin: auto;
    width: 100%;
}



/*
.f3-staff{border: 1px solid black;}
.f3-lite{
    background: linear-gradient(to right, rgb(255,255,255), rgb(220, 220, 220));
    color: black;
    border: 1px solid #cccdcf;
}

.f3-plus{
    background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,1));
    color: white;
}

.f3-vip{
    background: linear-gradient(to right, rgba(235, 190, 50,0.5), rgba(252, 186, 3,1));
    color: black;
}*/

.front.f3-card{
    background: #000;
    color: #fff;
}
.back.f3-card{
    background: #fff;
    border: solid 1px #000;
}

/*.back:has(.f3-lite){background: linear-gradient(to left, rgb(220, 220, 220),rgb(255,255,255));}*/
.f3-card{width: 375px;height: 185px;}
#resetPasswordForm{padding: 10px;}
#resetPasswordForm button{width: 100%;}


.confirm-pass-modal{z-index: 1061;}
.confirm-pass-modal .modal-dialog .modal-content{padding:15px; width: 525px;}
.confirm-pass-modal .modal-dialog button{width:100%; margin-top: -10px;}
.forgot-pass-container, .change-pass-container{width: 450px; margin: auto;padding: 30px;}

.tier-wrap-row{margin-top: 5px;}
.tier-img-wrapper .logo{width:85px;height: 85px;border-radius: 7px;}
.card-col .logo-img img{width: 75px;height: 75px;}
.f3-card .row div.col-sm-6{padding: 20px 40px;}
.f3-card .row div.col-sm-6.logo-img{padding: 0px; width: 24%; padding-right: 12px;}
/*.f3-card:has(.f3-plus), f3-card p, .f3-card h1, .f3-card h2, .f3-card h3{color: white;}*/
.f3-card .name{text-transform: uppercase;width: 73%;}
.f3-card .lower-card-row div:first-child{padding:20px 0px 20px 35px; width: 40%;}
.f3-card .lower-card-row div:not(:first-child){width: 60%; padding:20px 35px 20px 0px;}
.flip3D .front, .flip3D .back, .flip3D .back-2{
    position:absolute;
    transform: perspective(600px) rotateY(0deg);
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}
.flip3D .front{border-radius: 12px 12px 12px 12px;}
.flip3D .back {
    border-radius: 12px 12px 12px 12px;
    transform: perspective(600px) rotateY(180deg);
}
.flip3D .back .qr-code{display:none;margin:auto;opacity:0;justify-content: center;}
.flip3D{margin-bottom: 180px;}

.row-fluid [class*="box"]:first-child {margin-left: 0;}

.box{
    min-width: 48.850%;
    float: left;
    display: block;
    margin-left: 2.127659574468085%;
    text-transform: none;
}
.box button, .box a{
    border-radius: 5px;
    width: 100%;
    padding: 10px 15px 10px 20px;
    text-transform: none;
    font-size: 16px;
}

.row-fluid .box:only-child{width:100%; text-align: center;}

.form-group{
    margin-top: 20px;
}
div#updateProfileAddress .address-csc .form-group .input-group select {
    border-radius: 7px;
}

.form-group p{align-content: center; justify-content: center}
.form-group a{
    border-radius: 5px;
    text-transform: none;
}

/*Changes made by Rommel*/
.pad-row{padding: 0px 35px;}
.my-profile-header{padding: 0px; padding-bottom: 10px;width: 95%;margin: 0 auto; align-items: center;}
.my-profile-header .desc{margin: 0; margin-left: 1rem;}
.membership-col .page-content{min-height: 80px;}

.membership-col .my-profile-header h2{font-size: 24px;}
.membership-col .my-profile-header p{color:gray;margin-left: 20px; margin-top: 5px;}
.first-child-content{margin-top: 0px !important;}
.page-body, .content-body{padding: 20px;}
.vouchers-wrapper a{
    color: black;font-size: 12px;
    padding: 10px; border-radius: 5px 5px 0px 0px;
    text-decoration:none;
    position: relative;
}
.vouchers-wrapper .toast-header{margin-bottom: 5px; border: none;}
.voucher-btn-active{
    z-index: 1;
    background: #efeff3;
}
.vouchers .box-wrapper{
    border: 1px solid #5c5c5c;
    border-radius: 3px;
    min-height: 265px;
    min-width: 165px; width: 165px;
    background: #ededed;
    padding: 0px;
    margin-left: 12px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.vouchers .box-wrapper .box{padding: 10px;margin: 0;float: none;}
.vouchers .img-wrapper{padding: 5px; margin-bottom: 50px; display: flex; justify-content: center;}
.vouchers .img-wrapper img{object-fit: contain;}
.vouchers .box-wrapper .img-wrapper img{height: 80px; width: 120px; border-radius: 7px;}
.vouchers-wrapper .box-wrapper .box .box-title{text-align: center; font-weight: 700; font-size: 14px;}
.vouchers-wrapper .box-wrapper .box .box-details{display: block;}
.vouchers-wrapper .box-wrapper .box .box-details p{font-size: 10px; margin: 0; text-align: center;}
.voucher-header-btns{position: relative; cursor: crosshair;}
#vouchers-col .page-info .btn-wrapper{margin-bottom: 30px; margin-top: -25px;}
#vouchers-col .page-info .btn-wrapper button{
    margin: -2px;width:50%;padding:
    5px; border:none; border-bottom: 1px solid lightgray;
    color:black; background:none;
    height: 50px;
    user-select: none;
}
#vouchers-col .page-info .btn-wrapper button:first-child{border-right: solid 1px lightgrey;}
#vouchers-col .page-info .btn-wrapper button:hover{background: #ff014b; color: white;}
#vouchers-col .page-info .btn-wrapper .active{background: #ff014b; color: white;}
#vouchers-col .page-info .btn-wrapper .active:hover{background: rgba(255,1,75,0.7);}
#vouchers-col .my-profile-header .title{font-size: 24px;}

.vch-label{height: 25px;font-weight: 700;text-transform: uppercase;color: white;text-align: center;}
.vouchers .vch-label{
    position: absolute;
    top: 40%;
    transform: translate(-35%, 0%);
    vertical-align: middle;
    width: 102%;
    opacity: 0.8;
    margin-left:-2px;
    transform: skewY(-20deg);
}

.vouchers .box-wrapper .used, .myvoucher-detail .used{background: #0b9e79;}
.vouchers .box-wrapper .expired, .myvoucher-detail .expired{background: #c72e45;}
.vouchers .box-wrapper .dismissed, .myvoucher-detail .dismissed{background: gray;}
.myvoucher-detail .active{background: #3dadfc;}
.vouchers .is-labeled{
    background: rgba(0,0,0,0.2);
    top: 0%;
    left: 0%;
    position: absolute;
    z-index: 1;
    padding: 0px;
    width: 100%; height: 100%;
}


.line-divider{border-top: 1px solid gray;}
.wrapper .col{flex: 0 0 20%;}
.wrapper .col:not(:first-child) .p-3{text-align: center;}
.no-border{border: none !important;}
.update-profile button:hover{background: black; opacity: 0.7; color: white; transition: 0.5s ease-in-out;}
.div-address-display{display:none;position: absolute;background: white;padding: 8px;width: 100%;border: 1px solid lightgrey; border-radius: 7px!important;}
.update-profile-header a{text-decoration: none; color: black;}
.update-profile-header .ch-wrapper{text-align: right; margin-bottom: -10px;}
.contact-preference-container .row{display: flex; flex-wrap: wrap;}
.contact-preference-container .row div.brand-container{flex: 1 1 50%;}

.privacy-text-container{font-size: 12px;}
.thin-title{font-weight: lighter; font-size: 18px;}
.contact-preference-container{font-size: 12px;}
.radio-forms input[type="radio"]{margin-top: -1px;vertical-align: middle;}
.radio-forms div.row:not(:first-child){margin-top: 10px;}
.col1 .page-info:not(:first-child),
.col2 .page-info:not(:first-child){margin-top: 20px;}
.text-red{color: red;}
.wr{font-size: 14px; padding: 10px;border: 1px solid lightgray;border-radius: 7px;}
.wt-wr{font-size: 14px; padding: 10px; border-bottom: 1px solid lightgray;}
form .form-group label{font-size: 1em; width:100%;}
.update-profile > .page-content{min-height: 150px;}
#social-profile-container .social-link{padding: 5px; min-width: 50px;
    font-size: 12px; color: white; height: auto;}
.m-p-0{top: 0%; left: 0%; margin: 0;}
.bg-redpink{background: #ff4178; color: white;}
.page-top-title{width: 100%;}
.page-top-title p{text-align: center; text-transform: uppercase; font-weight: bold; letter-spacing: 2px;}
#terms-conditions, #privacy-policy{margin-top: -30px;}
.sub-title{width: 50%;}
#sub-terms-conditions{margin-top: -15px;}
.content-wrapper{padding: 10px;}
.content-wrapper p{margin-bottom: 0px;}
.privacy-policy-container p,
.privacy-policy-container div.fw-bold{margin-top: 30px;}
.normal-data-wrapper p{margin-top: 0px;}
.normal-data-wrapper a{color: black;text-decoration: none;font-weight: bold;}
table {width: 100%;}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: medium none;
    vertical-align: middle;
}
table tbody tr, table thead tr {
    border: 1px solid #e6e6e6;
}
table td {
    padding: 5px 10px;
    text-align: center;
}

.input-group select{
    width: 100%;
    border: 1px solid lightgray;
    outline:none;
}
#signup-form-wrapper{padding-left: 60px; padding-right: 60px;}
#signup-form #Mobile, .update-profile #Mobile{width: 100%; border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
#signup-form-wrapper .nric select{width:130px; flex: 0 0 130px; margin-right:10px; }
#signup-form .ref-type-btn{margin-right: 10px;}

#signup-form-wrapper .captcha-form-group .input-group-addon .fa-refresh{font-size: 18px; margin-top: 10px; margin-left: 5px;}
#signup-form-wrapper .input-group input[name=captcha_code]{font-size: 14.5px;}
#signup-form-wrapper .m-d{margin: 5px 5px 0px 5px;}
#signup-section{background: white; width: 930px;}
.top-75{margin-top: 75px;}
.otp-modal, .small-modal{width: 625px; display: none; height: auto; left: 50%; top:50%; transform: translate(-50%, -50%);}
.otp-modal .otp-radio-wrapper{margin-top: 10px;}
.otp-modal .otp-radio-wrapper .form-check{display: flex; justify-content: center;}
.otp-modal .otp-radio-wrapper label{margin-left: 5px;}
.has-error .help-block{color: red;}
.has-error input{border: 1px solid red;}
.otp-block{display: none;}
#otp-form .otp-input{
    border:none;
    border-radius: 0px;
    border-bottom: 2px solid black;
    width: 30px;
    font-size: 36px;
    text-align: center;
    outline:none;
}
#otp-form .otp-input:not(:first-child){margin-left: 10px;}
#otp-form .otp-input:focus{border: none; border-bottom: 2px solid #ff4178;}
#otp-form .input-group{margin: auto;justify-content: center;}
#otp-form button{font-size: 14px; margin: 0;}
#otp-form button:not(:first-child){background: linear-gradient(to right, rgb(255 65 120), rgb(201 7 72)); margin-left: 10px;}
#otp-form button:first-child{background: none; border: 1px solid #333; color: black; border-radius:0px;}
#otp-form .form-group {text-align: center;}
.mid-btn-wrapper{display: flex; width: 55%; margin: auto;}

.bootbox .modal-footer button{border:none; background: #ff4178;}
.bootbox .modal-footer button.bootbox-cancel{border: 1px solid lightgray; background: #f8f9fa;}
.bootbox .modal-footer button.bootbox-cancel:hover{color: #333;}
.bootbox-alert{z-index: 1065;}
.bootbox-alert div{display: flex;}
.bootbox-alert div:not(:first-child){margin-left: 10px;}
.bootbox-alert .bootbox-close-button{border:none; background: #333; }
.bootbox-alert .modal-footer button{background: #ff4178;}
.bootbox-alert-danger button, .bootbox-alert-danger a{background: firebrick;}


.loader{display:none;}
.start-loader{display:block;}
.loader .load-blur{opacity: 0.5;width: 100%;height: 100%; position: fixed; background: white; top: 0;left: 0; z-index: 1061; margin:0;}
.loader .b5-spinner, .fa-spinner{position: fixed; left: 50%; top: 50%; z-index: 1062;}
.fa-spinner{font-size: 36px;}

.modal-bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    width: 100%;
    height: 100%;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgba(0,0,0,0.5);
}
.help-block a.prompt-login-link{text-decoration: none; font-weight: bold;}
.help-block a.prompt-login-link{color: #347deb !important;}

.text-green{color:green;}
.transactions .row .title{font-weight: 700;}
.transactions .row{padding-top:2px; border-bottom: 1px solid lightgrey; display: block;}
.transactions .row .trans-details{display: flex; margin-top: 10px; margin-bottom: 5px;}
.transactions .row .trans-details div{width: 50%;}
.transactions .row .trans-details div.date{color:gray;}
.transactions .row .title{margin-top: 15px;}
.redemption-trans{cursor: pointer;}
.redemption-trans:hover{background:#ff014b; color:white;}
.redemption-trans:hover .trans-details .value{color: white;}
.transactions .redemption-trans:hover .date{color:white!important;}

.carousel{margin:0 auto; padding: 10px; background: white;}
.carousel-inner{}
.carousel-inner .carousel-item{
    height: 0; padding-bottom: calc(100% * 525 / 1276);
    position: relative;
}
.carousel-inner img{object-fit:cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.carousel-inner-bottom{
    position: absolute;
    background: rgba(0,0,0, 0.7);
    width: 100%;
    color: white;
    padding: 20px;
    bottom: 0;
}
.carousel-control-next, .carousel-control-prev{
    padding: 10px;
    background: black;
    border: 2px solid white;
    opacity: 0.5;
    border-radius: 75%;
    height: 50px;
    width: 50px;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 20px;
    margin-right: 20px;
}
.carousel-control-next:hover, .carousel-control-prev:hover{background:black; opacity:0.9;}
.carousel-inner-bottom button, .carousel-inner-bottom a{text-transform: none; font-size: 16px; border-radius: 5px;}
.carousel-inner-bottom .authenticated a{border-top: 1px solid white; align-items: center;display: flex;}
.carousel-inner-bottom .authenticated a:not(:first-child){margin-left: 10px;}
.carousel-bottom-buttons button, .carousel-bottom-buttons a{margin:0; border-top: 1px solid rgba(255,255,255,0.45);}
.carousel-inner-bottom button, .carousel-inner-bottom a, .carousel-inner-bottom p{opacity: 1}
.cl-or{background: gray; position: relative; margin: 8px -12px 0px -12px; padding: 5px; width: 30px; height: 30px;}
.no-hover-focus-style button,.no-hover-focus-style a{pointer-events: none;}
.no-hover-focus-style button:hover,.no-hover-focus-style a:hover,
.no-hover-focus-style button:active,.no-hover-focus-style a:active{border: none; box-shadow: none;}
.no-hover-focus-style:active,.no-hover-focus-style:active{border: none; box-shadow: none;}
.carousel-inner-bottom button:first-child, .carousel-inner-bottom a:first-child{
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.carousel-inner-bottom button:last-child, .carousel-inner-bottom a:last-child{
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.js-register:hover, .google-register:hover{
    background: #e6e6e6;
}

.box a > img{
    width: 20px;
    height: 20px;
    margin-top: -3px;
}

.border-lightgray{
    border: 1px solid lightgrey;
    border-bottom: 1px solid darkgray;
}

.option-bar{
    margin: 0 auto;
    padding: 25px;
    border-style:solid;
    border-width:0.5px;
    border-color:lightgrey;
    width: 60%;
    /*box-shadow: 0px 0px 2px rgba(30,10,0); */
}

.option-bar h1.line-tall,h2.line-tall,h3.line-tall,h4.line-tall{
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
    font-weight: 300;
}

.option-bar .row-fluid:not(:first-child){margin-top: 15px;}
.store-locator-container{background: white; color: black;}
.store-info-body{background: #f6f6f6; padding: 15px; text-align: center;}
.store-locator-info-box{
    max-width: 33.3333%;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
}
.store-locator-info-box:hover
.store-info-body{background:#d9d9d9;transition: 0.3s ease-in-out;}
.store-info-body a{text-decoration: none;}
.store-locator-info-title{padding-top: 15px;font-size: 18px; height: 80px;}
.info-box-row{margin-bottom: 10px;height: 150px; padding: 10px;}
.strltr-btn-wrapper{border-top: 1px solid #b0b0b0; padding: 15px 0px;}
.strltr-btn-wrapper a{font-weight: bold;}
#store-locator{width: 70%; margin:0 auto; display: flex;flex-wrap: wrap;}
#store-locator .store-locator-info-box{flex: 33.333333%;}
#store-locator .header{font-size: 28px; text-transform: uppercase;}
.up-arrow{
    padding: 5px; border: none;
    cursor: pointer; display: none;
    width: 25px; width: 25px;
    position: fixed; right: 5%;
    bottom: 10%;
}
.up-arrow:hover{opacity:0.8;}

h1, h2, h3, h4, h5, h6 {font-weight: 700;}


a:focus{outline: none; text-decoration: none;}
button{background-color:#2884c6; color: #fff; -webkit-transition: all .30s ease-in-out;
    -moz-transition: all .30s ease-in-out;
    -ms-transition: all .30s ease-in-out;
    -o-transition: all .30s ease-in-out;
    transition: all .30s ease-in-out;}
button:hover{background-color:#44951e; }

table .button {color: #696969;cursor: pointer; padding: 3px; margin: 0px 5px; border:solid 1px #ccc; width: 30px; height: 30px; text-align: center; display: inline-block;
    background: #fff; border-radius: 3px;
}
table .alterar:hover {  color: #0a79df;}
table .excluir:hover {  color: #dc2a2a;}

.top-nav{
    /* padding: 20px 0px; */
    height: 90px;
    background-color: #4DA0D7;
    position: relative;
    top: 0px;
    z-index: 1;
    /*width: inherit;*/
    margin-right: 40px;
    margin-left: 0px;
    width: 100%;

}
.top-nav .box-userinfo{

    position: relative;
    margin-top: 5px;
    margin-bottom: 2px;

}
.top-nav .box-userinfo a, .top-nav .box-userinfo a, .top-nav .box-userinfo a:visited{
    display: inline-block;
    /* background: #fff; */
    padding: 0px 10px;
    border-right: solid 3px white;
    color: white;
}

.top-nav .box-userinfo a.last{
    border-right: none;
}

.navbar > .container{display:block;}
.navbar .navbar-brand {
    padding: 0px 15px; height: auto;
}
.navbar .nav-links{display: flex; justify-content: end;}

.navbar .dropdown-menu{left:50%;transform: translateX(-50%);}

.navbar .navbar-brand img {
    margin-left: 0px;
    max-width: 120px;
}
.nav-toggler-icon{
    background-color: transparent;
    color: black;
    width: 30px; height: 30px;
    background-image: url("../img/hamburger-icon.png") !important;
    filter: brightness(200%);  z-index: 1;}

@media screen and (min-width: 993px) {
    .nav-toggler-icon{display: none;}
}
.nav-toggler-icon:hover, .nav-toggler-icon:hover img{background-color: transparent; invert(50%); filter: brightness(130%);}
.nav-toggler-icon img{width:30px; height: 30px;}
.invert-100{filter: invert(100%); -webkit-filter: invert(100%);}
.brightness-120{filter: brightness(120%)}

.top-nav .right-nav-bar{
    height: 92%;
    float: right;
    margin-right: 15px;
    text-align: right;
}
.top-nav .right-nav-bar img{
    height: 75%; display:inline;
}
.top-nav .right-nav-bar .language{
    text-align: center;
    height: 23%;
    margin-top: 2%;
    display:none;
}
.navbar-default {
    border-color: transparent;
    padding: 25px 0px 10px;
    z-index: 2;
    border-radius: 0px;
    margin-bottom: 0px;
    border-bottom: solid 5px #4DA0D7;

    -webkit-transition: all .30s ease;
    -moz-transition: all .30s ease;
    -ms-transition: all .30s ease;
    -o-transition: all .30s ease;
    transition: all .30s ease;
}
.navbar-default.sticky{  padding: 5px 0px 5px;}
.navbar-default.sticky .navbar-right{display: none;}

.bg-black{
    background-color: black !important;
}

.navbar-default .nav-content{
    border-radius: 26px;
    /* border: solid 1px gray; */
    /* background: #fad934; */
    box-shadow: 0px -3px 3px #e7c620;
    background-image: url(/img/nav-bg.png);
    margin-left: 10px;
    margin-right: 10px;
    background-size: 100% 100%;
    padding-top: 2px;
    padding-bottom: 2px;
}
.main-nav.navbar {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    vertical-align: middle;
    z-index: 100;
    margin-left:0px;
}
.main-nav.navbar.fixed{position:fixed; top:0px; width:inherit; }

.navbar.navbar-default .navbar-header{
    position: relative; z-index: 2;
    /*position: relative;*/
}
.navbar-default .navbar-nav > li > a{
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 0;
    color: #434343;
    text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {opacity: 5;}
.navbar-default .navbar-nav > li.active a:focus{background: transparent; color: #d0d0d0;}
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li.active:hover > a,
.navbar-default .navbar-nav > li.active:focus > a{
    color: #4DA0D7;
}
.navbar-default .navbar-nav > li.active > a{
    color: #4DA0D7; background: transparent;
}
.navbar .navbar-collapse{position: relative;}
.navbar-right{position: absolute; top:-25px; right:15px;}
.navbar-default .navbar-right.navbar-nav > li > a{padding: 5px 10px; text-transform: none; position: relative;}
.navbar-default .navbar-right.navbar-nav > li > a:before{content: ''; position: absolute; left:0px; top:8px; width: 1px; height: 15px; background: #434343;}
.navbar-default .navbar-right.navbar-nav > li:first-child > a:before{display: none;}

.sidebar .sidebar-nav ul{list-style: none; padding: 0px; margin: 0px; list-style: none;}
.sidebar .sidebar-nav ul li{display: block; font-size: 1rem; margin-bottom: 3.5rem;}
.sidebar .sidebar-nav ul li a{
    display: block;
    position: relative;
    padding: 10px;
    display: inline-block;
    color: #000;
    text-decoration: none;
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar{height: 100%;}
.sidebar-nav{
    border: 1px solid lightgrey;
    padding:1rem 2rem;
    height: 100%;
}

.sidebar .sidebar-nav ul li.active a,
.sidebar .sidebar-nav ul li:hover a{
    color:#ff014b;
}

/* ==========================================================================
   Wrap Sections
   ========================================================================== */

/* ==========================================================================
 Slide
 ========================================================================== */

#maincontentwrap .slick-prev:before, #maincontentwrap .slick-next:before{
    color: #555;
}

.box-gallery{background: #fff;}
.box-gallery .item{height: 100%; background-size: cover;background-repeat: no-repeat; background-position: center center; }
.box-gallery .slick-dots{
    bottom: 5px;
    text-align: center;
}
.box-gallery.slick-slider{margin-bottom: 0px; z-index: 1;}
.box-gallery.slick-slider .slick-prev, .box-gallery.slick-slider .slick-next{display: none;}
/*.box-gallery .slick-prev{left: 5px;}*/
.box-gallery .slick-dots li button{border:solid 1px #434343; border-radius: 50%; padding: 4px;}
.box-gallery .slick-dots li button:before{content: ''; width: 12px; height: 12px; background: #434343; top:4px; left: 4px; border-radius: 50%; opacity: 1;}
.box-gallery .slick-dots li.slick-active button:before{background: #4DA0D7;}
.box-banner .item{height: 185px; background-size: cover;background-repeat: no-repeat; background-position: center center;}
.box-latest-news {
    /*height: 270px; */
    background: #7ad61d;
    height: auto;
    min-height: 400px;
}

.box-latest-news {padding: 15px; position: relative;}
.box-latest-news h3.title{color: #fff; margin: 0px 0px 10px;}
.box-latest-news .item .bgcover{height: 200px; background-size: cover; }
.box-latest-news .item .item-title{margin: 0px 0px 10px; font-weight: 700; font-size: 18px;}
.box-latest-news .item .item-info{padding-left: 15px;}
.box-latest-news .slick-prev, .box-latest-news .slick-next{right: 0px; bottom: 0px; top: auto;}
.box-latest-news .slick-prev{left: auto; right: 30px;}

.box-second-block{
    background-color: #f1f1f1;
    padding: 30px 0px;
    text-align: center;
}
.box-second-block .btn.btn-sm{
    padding: 4px 28px;
    font-weight: 400;
    height: 28px;
    border-radius: 0px;
}
.gutter-5 .box-second-block .slick-prev.slick-arrow{
    position: absolute;
    left: 3px;
    top: 50%;
}
.gutter-5 .box-second-block .slick-next.slick-arrow{
    right: 3px;
    top: 50%;
}

.box-default .box-title .box-title-right{text-transform: none; text-align: right;}
.box-default .box-title .box-title-right span{margin-left: 15px;}
.box-default .box-title .box-title-right span:first-child{margin-left: 0px;}

.box-hotdeal{height: 465px; background: #f1f1f1; position: relative;}
.box-hotdeal h2.box-title{margin: 0px 0px 15px; color: #fff;}
.box-hotdeal{padding: 30px 0px;}
.box-hotdeal .slick-next, .box-hotdeal .slick-prev{top: auto;bottom: -45px; left: 50%;}
.box-hotdeal .slick-prev {margin-left: -25px;}
.box-hotdeal .slick-next{margin-left: 5px;}
.box-hotdeal .btn-viewall{

}

.box-hotdeal .btn-viewall:hover{
    color: white;
}

.box-hotdeal .box-content{
    margin-bottom: 50px;
}

.box-hotdeal .btn.btn-sm{
    padding: 3px 28px;
}

.box-captcha img{display:flex;justify-content:center;margin:auto;}
#login-form .form-group .input-group .input-group-addon{margin-left:5px; margin-top: 5px;}
#login-form .form-group .input-group .input-group-addon a{font-size: 15px;}
#login-form .form-group .input-group input[name=captcha_code]{border-radius: 5px;}
#login-form #typeLabelWrapper {padding: 5px;width: 40px;text-align: center;}

.box-hotdeal .item {background: #fff; margin: 0px 5px; padding: 15px;}
.box-hotdeal .item .inner{background: transparent;}
.box-hotdeal .item .item-thumb{background: #fff;}
.box-hotdeal .item .item-thumb .bgcover{width: 150px; height: 150px; margin: 0px auto; }
.box-hotdeal .item .item-info{padding: 0px 5px;}

.box-promotion{
    background: #fff;
    padding: 15px;
    width: 100%;

}
.box-promotion a.square{display: block; margin: 15px 0px; background: #f1f1f1;}
.box-promotion h2.box-title{margin: 0px 0px 15px; color: #fff;}
.box-promotion .bgcover{
    width: 100%;
    height: 100%;
}
.box-promotion .slick-next, .box-promotion .slick-prev{top: auto;bottom: -40px; right: 0px;}
.square {
    float:left;
    position: relative;
    width: 100%;
    padding-bottom : 100%; /* = width for a 1:1 aspect ratio */
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}
.square .content{
    position: absolute;
    width: 100%;
    height: 100%;
}
.box-promotion .slick-prev {left: 0px;}

.box-promotion .item {background: #fff; margin: 0px 5px;}
.box-promotion .item .inner{background: #e8f1f4;}
.box-promotion .item .item-thumb{background: #fff;}
.box-promotion .item .item-thumb .bgcover{width: 150px; height: 150px; margin: 0px auto; }
.box-promotion .item .item-info{padding: 0px 5px;}

.product-list .item{background: #e8f1f4; margin-bottom: 40px; padding-bottom: 40px;}
.product-list .item a{display: block; position: relative;}
.product-list .item .item-name{    color: #777; font-size: 16px; min-height: 35px;}
.product-list .item .item-thumb{position: relative;  background: #f5f6f7;}
.product-list .item .bgcover{height: 200px; }
.product-list .item .item-thumb .specialTags{position: absolute; top: 0px; left: 0px;}
.specialTags .limitedStock,

.hotDeal{
    width: 132px; background: #e74c3c; color: #fff; text-align: center; font-weight: 700; text-transform: uppercase; padding: 3px 17px;
    height: 28px; line-height: 28px;
    bottom: -35px;
    left: 50%;
    margin-left: -66px;
    position: absolute;
}
.product-list{padding: 15px;}
.product-list .item-info{padding: 0px 5px;}
.product-list .item-attribute{
    min-height: 50px;
    font-size: 12px;
    font-weight: bold;
    color: black;
}
.product-list .item-attribute .attribute{
    padding: 2px;
    margin-bottom: 2px;
}
.product-list .shadow{
    background-color: #fff;
}

.product-detail .item-thumb{position: relative; background: #f5f6f7;}
.product-detail .bgcover{height: 350px; }
.product-detail .item-name{
    font-size: 22px;
    margin: 0px 0px 15px;
    color: gray;
}
.product-detail {
    color: black;
    font-size: 12px;
    font-weight: bold;
}
.product-list .btn.btn-sm{
    padding: 3px 17px;
    font-weight: 400;
    height: 28px;
    margin: auto;
    background-color: #f1f1f1;
    color: #323232;
    border: solid 1px gray;
}

.product-list .btn.btn-sm:hover{
    color: #fff;
}

.privileges-detail{
    padding-top: 15px;
}

.privileges-detail .box.box-default .box-content{

    padding: 0px;
}

.privileges-detail .col-sm-3 .box.box-default .box-content {
    background-color: #f5f6f7;
    padding: 9px;
}

.privileges-detail .col-sm-3 .box.box-default .box-title {
    background-color: #4DA0D7; color: #fff; padding: 7px 10px;
}

.privileges-detail .box.box-default .box-content img{
    width: 100%;
}


.privileges-detail h4.title {
    padding-left: 15px;
}

.privileges-list img{
    width: 100%;
    height: 100%;
}

.privileges-list .item{
    padding-top: 10px;
    padding-bottom: 10px;
}

.privileges-list .item img{

    border: solid 1px #4DA0D7;
    border-radius: 15px;
}

.merchant-list .item{}
.merchant-list .item .square{border:solid 1px #ccc;}
.merchant-list .item img{border-radius: 0px; border:0px;}
.merchant-list .item .title{position: absolute; width: 100%; min-height: 30px; padding: 5px 10px; bottom: 0px; left: 0px; background: rgba(0,0,0,0.8); color: #fff; text-align: center; opacity: 0;
;-webkit-transition:all .30s ease-in-out;-moz-transition:all .30s ease-in-out;-ms-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;
}
.merchant-list .item:hover .title{opacity: 1;}

.cart-list{margin-top: 15px;}
.cart-list .item{margin-bottom: 15px; background: #fff; position: relative;}
.cart-list .item .item-title{background: #B9BBBD ; padding: 5px 15px; font-size: 18px;}
.cart-list .item .inner{padding: 10px 15px;}
.cart-list .item .item-thumb .bgcover{height: 300px;}
.cart-list .item .item-delete{position: absolute; right: 15px; bottom: 10px; font-size: 25px;}
.cart-list .item  .input-control.radio{padding-left: 20px;}

.page-checkout .box .control-label{font-size: 14px;}


.page-news-list .item{}
.page-news-list .bgcover{height: 200px;background-size: cover; }


.footer-top .app-download-logo-col{
    padding-right: 10px;
    padding-left: 10px;
}

.page-footer{padding-top: 5rem; padding-bottom: 5rem;}
.page-footer .footer-body{justify-content: space-between;}
.page-footer .footer-brand{font-size: 11px;}
.page-footer .title{font-size: 1rem; font-weight: 700;}
.page-footer h6{text-transform: uppercase; font-weight: 700; font-size:16px; color: #fff;}
.page-footer .pull-right li:not(:first-child){margin-left: 10px;}
.page-footer .footer-content{padding-top: 35px; }
.page-footer .footer-content p i{margin-right: 5px; min-width: 15px;}
.page-footer ul{list-style-type: none; padding-inline-start: 0px;}
.page-footer a{text-decoration: none;}
.footer-copyright {padding: 20px 0px; background: #262626;}
.page-footer .footer-top {padding: 20px 0px;}
.page-footer .footer-top h6{text-transform: none; font-weight: 400;}
.page-footer .social a{padding: 8px 5px; display: inline-block; margin-left: 3px;}
.footer-text{font-weight: 700;}
.page-content{padding: 30px 0px 30px; min-height: 283px;}
.page-content.main, .container.main{margin-top: 50px;}
.page-content .box-content{
    min-height: 300px;
}
.redemption-details.page-content .box-content, .page-content .page-info .box-content, .page-content .search-div .box-content{
    min-height: 0px;
}
.page-content .page-info{}
.page-content.full-width .page-info{padding-left: 0px; border-left: 0px;}
.page-content .page-info h2.page-title{margin-bottom: 30px;}

.page-content .page-info .box-content img{max-width: 100%; height: auto !important;}
.user-profile-link{padding: 8px 15px; margin-top: 5px; margin-left: 30px; background: #fff; border-radius: 5px;color: #444444;}
.user-profile-link .caret{color: #444444;}
.homepage .user-profile-link{}
.user-profile-link .dropdown{display: inline-block;}
.user-profile-link a.dropdown-toggle{text-decoration: none;cursor: pointer; color: #444444;}
.homepage .sticky .user-profile-link a.dropdown-toggle {color: #333;}
.user-profile-link .dropdown.open a.dropdown-toggle,.user-profile-link .dropdown.open a.dropdown-toggle:focus,
.user-profile-link .dropdown.open a.dropdown-toggle:hover{background: transparent;}
.user-profile-link .dropdown-menu{margin-top: 15px; right: -15px;}
.user-profile-link .dropdown-menu::after {
    position: absolute; top: -6px; right: 10px; display: inline-block; border-right: 6px solid transparent;  border-bottom: 6px solid white;
    border-left: 6px solid transparent;  content: '';
}
.user-profile-link .dropdown-menu{border-radius: 0px;}
.user-profile-link .dropdown-menu li a{padding: 8px 20px; }
.navbar-nav .dropdown-menu>li>a{
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: solid 1px #ddd;
}
.navbar-nav .dropdown-menu>li.active>a{background: #fff; color: #444444;}
.lower-navbar-shown #maincontentwrap{margin-top: 300px;}
.lower-nav-dropdown-toggled #maincontentwrap{margin-top: 400px;}
.lower-nav-dropdown-toggled #ulnav{height:310px;}
.navbar .lower-nav-item{display:none;}

.modal .social-buttons a,
.btn-signupemail {display: block;  margin: 0px auto; padding: 14px 30px; margin-bottom: 5px; text-align: center; color: #fff; font-weight: 400; font-size: 19px;
    border-radius: 5px; text-decoration: none; position: relative; height: 51px;}
a.btn-icon-left  .icon-container{display: inline-block; width: 20px; text-align: left; float: left; position: absolute; left: 10px; top:6px; font-size: 22px;}
.modal .social-buttons a.btn-facebook{ background: #3B5998; }
.modal .social-buttons a.btn-googleplus{background: #d34836;  color: #fff;}
.signup-or-separator {position: relative; padding-top: 10px;}
.signup-or-separator .signup-or-separator--text{position: absolute; left: 50%; display: block; width: 30px; margin-left: -15px; background: #fff; text-align: center;}

.btn-signupemail{background: #2884c6;}
.btn-submit {border-radius: 2px; text-decoration: none; background: #2884c6; border:0px; font-weight: 700;}
.btn-signupemail:hover,.btn-submit:hover{background: #2884c6; text-decoration: none; color: #fff;}

.modal .modal-header{min-height: 75px; background: #d0d0d0; text-align: center; font-size: 26px; color: #333333; text-align: center; text-transform: uppercase; font-weight: 400;
    border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 25px; position: relative;
}

.page-info{
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 15px 15px 25px 15px;*/
}
.box{margin-bottom: 0px;}
.box .box-header-wrapper{height: 50px;margin-bottom: 10px;}

.box .box-title{ font-size: 16px; text-transform: uppercase; margin: 0px 0px 15px; }
.box .box-info{margin-bottom: 15px;}
.box .box-about{font-size: 16px; margin: 0px 0px 15px;}
.box .form-control{
    box-shadow: none;
    border-radius: 0;
}
.box .control-label{color: #888; font-weight: 400;}
.box.box-default .box-title{
    position: relative;
    color: #4DA0D7;
    padding: 7px 0px;
    font-weight: 400;
    margin-bottom: 0px;
    font-weight: 700;
}
.box.box-default .box-title:after{content: ''; position: absolute; left: 0px; bottom: 0px; height: 2px; width: 100px; background: #434343; display: none;}
.box.box-default .box-content{
    margin-top: 3px;
    padding: 15px 0px;
}
.box.box-white-plus .box-content{background: #fff;}
.box.box-success .box-content{
    background: #f1f1f1;
    padding: 15px;
}
.box.box-default .redemption-history.box-content{
    background-color: transparent;
    padding-top: 0px;
}
.redemption-history thead{
    background: #4DA0D7; color: #fff;
}
.redemption-history tbody{
    background: #f1f1f1;
}
.box.box-success .box-title{
    background: #4DA0D7;
    height: 34px;
    color: #fff;
    padding: 5px 15px;
    font-weight: 400;
    margin-bottom: 0px;
}
.box.box-success .box-title:after{display: none;}
.container.have-boder{
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
    border: solid 1px #e2e2e2;
}
.form-with-help .box-help{
    background: #e6e7e8;
    padding: 15px;
    color: #777;
}

.form-button .btn{margin-right: 10px;}
.form-button.text-center .btn{margin: 0px 5px;}
.form-button.text-right .btn{margin-left: 10px; margin-right: 0px;}

.upload-photo.thumbnail{height: 220px; text-align: center;}
.upload-photo.thumbnail img{max-height: 100%; max-width: 100%;}
.col-action{width: 140px;}
.table-roles i.fa-times{color: #c7254e;}
.table-roles i.fa-check{color: #468847;}


.box-faqs .panel-group .panel{border-radius: 0px; border-bottom: solid 1px #EEEEEE;}
.box-faqs .panel-group .panel .panel-body{border-top: 0px; padding-left: 0px; padding-right: 0px;}
.box-faqs .panel-group .panel-heading+.panel-collapse>.panel-body{border-top:0px;}

.box-faqs .panel{border:0px; box-shadow: none;}
.box-faqs .panel-heading{ padding: 0px; background: transparent; border:0px;}
.box-faqs .panel-heading a{display: block;  padding: 15px 30px 15px 0; font-weight: 400; position: relative;}
.box-faqs .panel-heading a:after{position: absolute; right: 0px; top:15px; content: "\f107"; font: normal normal normal 14px/1 FontAwesome;}
.box-faqs .panel-heading a.collapsed:after{content: "\f106";}
.box-faqs.box.box-default .box-content {
    background: #fff;
}
.box-faqs .form-control{
    width: 100%;
    max-width: 2000px;
}
.faq-div a:hover{

}

.faq-div a{

}

.box.box-gallery .slick-list{
    height: 100%;
    /*height: 100% !important;*/
}
.box.box-gallery .slick-list .slick-track{
    height: 100%;
}

.block{display: block;}
.collapse-nav{width: 215px; transition: 1s ease-in-out;}
.wt-nav{display: flex; gap: 25px;}
#ulnav .CloseButton{
    position: absolute;
    z-index: 1;
    top: 0;
    height: 50px;
    width: 50px;
    color: gray;
    text-align: center;
    padding-top: 10px;
    font-size: 35px;
    display: none;
}

#wtNavbar{position:sticky; top:0; z-index: 1030;}

.promotion-list .item{margin-bottom: 15px; border: solid 1px #ddd; position: relative; padding-bottom: 70px;}
.promotion-list .item .item-info{padding: 15px; }
.promotion-list .item .bgcover{min-height: 150px; margin-bottom: 15px;}
.promotion-list .item .item-switch{position: absolute; right: 15px; bottom: 15px; }
.promotion-list .item .item-switch .toggle{border: solid 1px #ccc;}

.comment{padding: 10px 15px; border:solid 1px #ccc; margin-bottom: 15px;}
.comment.border-left{border-left:solid 5px #1b809e;}
.comment.border-right{border-right:solid 5px #3e8f3e;}

#map_canvas{height: 250px;}

#page_loading{position: fixed; z-index: 999; background: rgba(0,0,0,0.5); left: 0px; top: 0px; width: 100%; height: 100%; display: none; }
#page_loading .inner{position: absolute; left: 0px; width: 100%; top: 50%; margin-top: -5em;}
#page_loading .loader {margin: 0px auto;font-size: 10px;position: relative;text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
#page_loading .loader,#page_loading .loader:after {  border-radius: 50%;  width: 10em;  height: 10em;}

.btn-using-email, .btn-using-email{margin-top: 5px;}
.member-list .item{padding-bottom: 5px; margin-bottom: 10px; text-align: center;}
.member-list .item .thumb{  background-position: center center;     background-size: contain;    background-repeat: no-repeat;     border: solid 1px #ddd;}
.member-list .item.selected{
    -webkit-box-shadow: 0px 0px 0px 2px rgba(77,160,215,1);
    -moz-box-shadow: 0px 0px 0px 2px rgba(77,160,215,1);
    box-shadow: 0px 0px 0px 2px rgba(77,160,215,1);
}
.member-list-child  .item{cursor: pointer;}
.box-tranfer-point .icon-up i{font-size: 45px;}
.box-tranfer-point .icon-up{padding-bottom: 30px; color: #4DA0D7}

.wt-fancy-border{
    border: 1px solid #d3d3d3;
    border-radius: 18px;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.49);
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.49);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.49);
}

.download-app-modal .app-image-w{padding: 1rem;}
.download-app-modal .app-image-w img{padding: 2rem;}
.download-app-modal a.btn{border-radius: 10px;}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.block-note{padding: 30px 20px; border:solid 1px #f1f1f1; background: #f1f1f1;}
#transactionPrintModal .modal-content, #transactionPrintModal .modal-dialog
, #transactionPrintModal .modal-body{height:96%;}
#transactionPrintModal .modal-iframe{width:100%; min-height: 300px; border:0px; height:96%;}
.chatbot-widget{position: fixed; bottom: 0px; right: 0px; background: #fff;}
.chatbot-widget .widget-title{position: absolute; left: 0px; top:0px; width: 100%; height: 38px; z-index: 2; cursor: pointer;}
.chatbot-widget .widget-content iframe{height: 38px; border:0px;
    -moz-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    -webkit-box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.25);
    box-shadow: -2px -2px 10px 0px rgba(0,0,0,0.25);
}
.chatbot-widget.show .widget-content iframe{height: 300px;}
.box-filter{background: #f3f3f3; padding: 15px;}


@media screen and (min-width: 1440px) {

}
@media screen and (min-width: 1600px) {

}
@media screen and (min-width: 1920px) {

}

@media screen and (max-width: 1200px) {
    .box button, .box a.js-register, .box a.fb-register, .box a.google-register{font-size:15px;}
    #signup-section .box{width: 47%;}
    #signup-section .email-register-box{width:100%;}
    .f3-card .row div.logo-img {width: 23.5%;}
}

@media screen and (max-height: 752px) {
    #voucher-detail .content-wrapper .header-img-row img{width:245px;height:185px;}
    #voucher-detail .cb-2 .tc-title h3, #voucher-detail .cb-2 .tc-title h1, #voucher-detail .cb-2 .tc-title h2{font-size: 18px;}
    #voucher-detail > .toast-header h2, #voucher-detail > .toast-header h1, #voucher-detail > .toast-header p{font-size: 16px;}
    #voucher-detail .voucher-detail-btn button {padding: 5px;font-size:12px;}
    #voucher-detail .voucher-form .voucher-detail-btn{margin-top:60px;}
    #voucher-detail .row .content-header-col img {width: 60px;height: 60px;}
    #voucher-detail .content-wrapper .content-body .fw-bold{font-size: 12px;}

}

@media screen and (max-height: 550px) {
    #voucher-detail{font-size:11px;}
    #voucher-detail .content-wrapper .header-img-row img{width:200px;height:150px;}
    #voucher-detail .voucher-detail-btn{margin-top:-20px;}
    #voucher-detail .cb-2 .tc-title h3, #voucher-detail .cb-2 .tc-title h1, #voucher-detail .cb-2 .tc-title h2{font-size: 15px;}
    #voucher-detail .voucher-form .voucher-detail-btn{margin-top:30px;}
    #voucher-detail > .toast-header{display:none;}
    #voucher-detail .voucher-detail-btn button {padding: 3px;font-size:10px;}
    #voucher-detail .content-wrapper .content-body div{font-size: 12px;}
    #voucher-detail .voucher-form input{font-size:10px;}
    #voucher-detail .row .content-header-col img {width: 45px;height: 45px;}
    #voucher-detail .toast-header h1, #voucher-detail .toast-header h2,
    #voucher-detail .toast-header h3, #voucher-detail .toast-header p{font-size: 15px;}
    #voucher-detail .barcode-div img{width:180px; height: 30px;}
}

@media screen and (max-height: 475px) {
    #voucher-detail{width:250px; font-size:11px;}
    #voucher-detail .content-wrapper .header-img-row img{width:120px;height:60px;}
    #voucher-detail .voucher-detail-btn{margin-top:-20px;}
    #voucher-detail .cb-2 .tc-title h3, #voucher-detail .cb-2 .tc-title h1, #voucher-detail .cb-2 .tc-title h2{font-size: 12px;}
    #voucher-detail .voucher-form .voucher-detail-btn{margin-top:30px;}
    #voucher-detail .voucher-detail-btn button {padding: 3px;font-size:8px;}
    #voucher-detail .content-wrapper .content-body div{font-size: 9px;}
    #voucher-detail .voucher-form input{font-size:10px;}
    #voucher-detail .row .content-header-col img {width: 20px;height: 20px;}
    #voucher-detail .barcode-div img{width:150px; height: 20px;}
}

/* Large desktop */
@media screen and (min-width: 1200px) {

}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar-default .navbar-nav > li > a{padding: 12px 10px; font-size: 13px;}
    .f3-card{width: 315px; margin-left: -30px;  }
    .card-number p, .join-since p{font-size: 12px;}
    .f3-card .name {font-size: 13px;}
}

/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 991px) {
    .navbar-default .navbar-nav > li > a{ padding: 8px 12px; height:36px;}
    /*kendroid*/
}

/* Portrait tablet to landscape and desktop */
@media screen and (max-width: 992px) {
    /*card*/
    .f3-card{width: 275px; height: 150px; font-size: 10px; margin-left: -40px;}
    .f3-card .row div.col-sm-6{padding-left: 23px; padding-right: 20px;}
    .f3-card .row div.col-sm-6:not(.logo-img):not(.name){width:50%;}
    .f3-card .logo-img img {width: 50px;height: 50px;}
    .f3-card .logo-img{width: 15%;}
    .f3-card .row div.col-sm-6.name{padding: 20px 30px;text-transform: uppercase;width: 71.5%;}
    .f3-card .qr-code canvas{width:110px; height:110px;}
    .card-number p:first-child, .join-since p:first-child{font-size: 8px;}
    .card-number p:not(:first-child), .join-since p:not(:first-child){font-size: 10px;}

    .top-75{margin-top: 40px;}
    .signup-wrapper{width:100%;}
    .signup-container .upper-title{font-size: 36px;}
    #ulnav.wt-show{display:block;}
    #ulnav .dropdown-menu{background:none;position:unset;border:none;}
    #ulnav .dropdown-menu .dropdown-item:hover {background:none;color:white;}
    #membership-col .col.card-col{
        margin-top: -155px;
        margin-bottom: 300px;
        margin-left: 100px;
    }
    .page-content > div{display:block;}

    #membership-tier .header{position: relative;}
    #membership-tier .tier-info-col{width: 100%;}
    #membership-tier .tier-img-wrapper{display:none;}
    #membership-tier .header .tier-img-wrapper{display: block;}
    #membership-tier .header
    #membership-tier .header-info{display: block;}
    #membership-tier .header > div {margin: auto; display: block;width: 110px;}
    #membership-tier .header-info.tier-card .level{text-align: center;}
    #membership-tier .tier-wrap-row > div{flex: 33.333%; }
    #membership-tier .tier-wrap-row{flex-wrap: wrap; justify-content: center;}
    #membership-tier .tier-wrap-row .status p{text-align: center; margin: auto;}
    #membership-tier .card-no{margin-left: -25px;}
    .header-info div:not(:first-child){margin-left: 0px; word-break: break-all;}

    #membership-tier .header{margin-left: 2px; margin-right: 2px;}
    #forgotPasswordForm .form-control,
    #forgotPasswordForm button[type=submit]{width: 100%;}

    #signup-section .row-fluid .box{width:100%;margin-left:0;}
    #signup-section .row-fluid .box:not(:first-child){margin-top:10px;}
    #signup-form-wrapper .nric select {
        width: 90px;
        font-size: 12px;
        flex: 0 0 90px;
    }
    #signup-form-wrapper .m-d span{display:none;}
    #signup-form-wrapper .m-d:after{content:"-";}
    /*#signup-form-wrapper .mobile-number-input-group .pnumber-prefix{width:25%;}
    #signup-form-wrapper .mobile-number-input-group #Mobile{width:60%;}
     */

    .confirm-pass-modal .modal-dialog .modal-content{padding:15px; width: 60%;}

    .detail-box{}
    .detail-box .content-wrapper, .detail-box input, .detail-box select,
    .detail-box button{font-size: 11px;}
    #voucher-detail {}
    #voucher-detail .header-img-row img {width: 150px;height: 150px;}
    #voucher-detail .row .content-header-col img {width: 40px;height: 40px;}
    #vouchers-col .vouchers .box-wrapper {margin-left: auto;margin-right: auto;}
    #voucher-detail .voucher-detail-btn button{width: 100%; margin-left: 0px; margin-top: 2px;}
    #voucher-detail .content-wrapper{display: block;overflow-y: auto; overflow-x: hidden; height:auto;}
    #voucher-detail .content-wrapper .col{width: 100%;}
    #voucher-detail .form-group{display: block;}
    #voucher-detail .voucher-detail-btn {display: flex;}
    #voucher-detail .form-group input, #voucher-detail .form-group select {font-size: 11px;}
    #voucher-detail .tc-title h1, #voucher-detail .tc-title h2, #voucher-detail .tc-title h3{font-size: 15px;}
    #voucher-detail .form-group {margin-bottom:-5px;}
    #login-modal .modal-header a.social-login-link{font-size: 9.5px; min-width: auto;}
    .f3-card .qr-code{height: 145px;}

    #otp-form .otp-input{width: 40px;font-size: 24px;}
    .mid-btn-wrapper{justify-content: center;}

    .top-nav-dropdown .dropdown-menu{left:10%;transform: none;}
    .top-nav-dropdown .dropdown-menu a{text-align: center;}

    /*.carousel-inner{height: 250px;}*/
    .carousel-bottom-buttons button, .carousel-bottom-buttons a{font-size: 14px;}
    /*.nav-item{display:none;}*/
    #ulnav{
        background: #f9f9f9;
        text-align: center;
        position: fixed;
        top: 0%;
        left: 0;
        padding: 10px 0px;
        overflow-y: auto;
        display: none;
        z-index: 1;
        margin-top: 60px;
        width: 100%;
        border-bottom: 1px solid #d3d3d3ff;
    }

    .navbar:has(.upper-nav-item){height:65px;}
    .navbar .upper-nav-item{display: none;}
    .navbar .lower-nav-item{display:block;}

    .navbar .dropdown-menu{margin-left:0px;}
    .nav-item:hover, .nav-item button:hover{background: #f2f2f2;}
    .nav-item:hover a{color: white;}
    .close{position: relative; cursor: pointer;}
    .bootbox-alert .close{left: 0px;}
    .nav-toggler{visibility: visible; border: none;}
    #ulnav li.nav-item {padding: 10px; cursor:pointer;}
    .box button, .box a.js-register, .box a.fb-register,
    .box a.google-register{font-size: 14px; padding-right: -10px; padding-left: 10px;}
    h4{font-size: 16px;}
    .carousel-control-prev, .carousel-control-next{top: 50%;padding: 5px; width: 30px; height: 30px;
        margin-top: -26px;
        margin-left: 5px;
        margin-right: 5px;
    }

    #homepage-carousel{    margin-top: 1.5rem;}
    .carousel-inner{padding-bottom: 52px;}
    .carousel-inner-bottom {padding: 5px 10px;}

    .cl-or{margin-top:2px;}

    .-default .navbar-toggle{border-radius:0px; border-color:#4DA0D7; margin-top:5px; margin-bottom: 0px;}
    .navbar-default .navbar-toggle .icon-bar{background-color:#4DA0D7;}
    .navbar .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background:#fff;}

    .navbar-default .navbar-toggle { display: block; float: left;     margin-left: 15px; }
    .navbar-default .navbar-brand{float: right;}
    .navbar .navbar-brand img{float: right;}
    .navbar-default .navbar-collapse { border: 0; margin: 0; right: 0; left:0px; max-height: none; padding-top: 25px; width: 100%;
        -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4);
        -moz-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4);
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.4); }
    .navbar-default .navbar-collapse.collapse.in { display: block; padding-bottom: 15px; margin-left: 0; margin-right: 0; left: 0; right: 0; }

    .navbar-default .navbar-collapse ul{width: 100%; float: none; margin: 0px;}
    .navbar-default .navbar-collapse ul.navbar-nav li { float: none; }

    .navbar-header {float: none; }
    .navbar-default .navbar-collapse { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); position: absolute; right: 0px; z-index: 9999; padding: 0px 0px; }
    /*.navbar-default .navbar-collapse.collapse { display: none!important;}*/
    .collapse{
        height: 100vh !important ;
        display: block;
    }
    .collapsing{
        height: 100vh !important ;
        display: block;
    }
    .collapse.in{
        height: 100vh !important ;
        display: block;
    }
    .chatbot-widget{
        display: none;
    }
    .OpacityBackground{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #000;
        opacity: 0.3;
        display: none;
    }


    .nav-menu{float: none!important; margin: 0px;}
    .nav-menu>li {float: none;}
    .navbar-text {float: none;margin: 15px 0;}

    .collapsing { overflow: hidden!important;}
    .navbar-default .navbar-collapse ul.navbar-nav li a{font-size:16px; padding:10px 15px;line-height:1.42857143; height:45px; width:100%;   border-bottom: solid 1px #606060; color:#fff; border-radius: 0;}
    .navbar-default .navbar-collapse ul.navbar-nav li a:hover,
    .navbar-default .navbar-collapse ul.navbar-nav li.active a:hover,
    .navbar-default .navbar-collapse ul.navbar-nav li.active a{background:transparent;  border-bottom: solid 1px #606060; color:#4DA0D7;}
    .app-download-android, .app-download-ios {
        max-width: 180px;
        display: block;
    }

    .page-footer{text-align: center;}
    .page-footer .footer-body{display: block;}
    .page-footer .footer-body > div{margin: auto;}
    .page-footer .col{width:100%;}
    .page-footer .col ul{float:none; justify-content: center;}
}

@media (min-width: 768px){
    .box.box-gallery{
        height: calc(100vw * 250 / 728);
    }
}

@media(max-width: 320px){
    #voucher-detail{width:250px;}
    #voucher-detail .header-img-row img {width: 120px;height: 120px;}
    .detail-box .content-wrapper, .detail-box input,
    .detail-box select, .detail-box button {font-size:8px;}
    #voucher-detail .toast-header{display: none;}
}


/* Portrait tablet to landscape and desktop */
@media screen and (min-width: 768px) and (max-width: 979px) {
    /*.carousel-inner{height: 325px;}*/
}

/* Landscape phone to portrait tablet */
@media screen and (max-width: 767px) {
    /*Store Locator */
    #store-locator .store-locator-info-box{max-width: 100%;}
    #store-locator .header p{text-align: center;}
    .box-default .box-title .box-title-right{text-align: left;}
    #maincontentwrap{padding-top: 50px;}
    .navbar-brand{padding-top: 5px;}
    .navbar-default .navbar-brand { max-width: 70px;}

    .split-vouchers .form-group .row .col{width:50%;}
    .split-vouchers{font-size: 13px;}

    #membership-tier .cardno-row, #membership-tier .tier-wrap-row{display:block;}
    #membership-tier .card-no{display:none;}
    #membership-tier .tier-wrap-row .col{width:100%;justify-content: center;}
    #membership-tier .tier-wrap-row .col:nth-child(2){margin-top: 10px;}

    /*Sign Up*/
    .option-bar{width: 100%;}
    #signup-form-wrapper{padding-left: 0px; padding-right: 0px;}

    .main-nav.navbar-default{border: 0px;}
    .main-nav.navbar-default,
    .main-nav.navbar-default.sticky,
    .homepage .main-nav.navbar-default,.homepage
    .main-nav.navbar-default.sticky{
        padding: 0px;height: auto;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        width: 100%;
    }

    .f3-card .row div.col-sm-6{padding-left: 18px;}
    .footer-top .app-download-logo-col{
        padding-right: 3px;
        padding-left: 3px;
    }
    .navbar-default .nav-content {
        border-radius: 0px;
        /*border: solid 1px gray;*/
        background: transparent;
        box-shadow: none;
        margin-left: 10px;
        margin-right: 10px;
        background-size: 100% 100%;
        padding-top: 4px;
        padding-bottom: 4px;

    }
    .homepage .navbar-default.sticky .navbar-nav > li > a,
    .homepage .navbar-default.sticky .navbar-nav > li > a:focus{}


    .navbar-default .navbar-nav > li:hover > a,
    .navbar-default .navbar-nav > li.active:hover > a,
    .navbar-default .navbar-nav > li.active:focus > a{border-radius: 0px; background:transparent;}


    .nav-content{padding:0px;}
    .navbar-default{padding-top:10px; padding-bottom: 10px;}


    .user-profile-link{float: right; margin-right: 15px;}
    .homepage .user-profile-link{ padding-top: 10px;}
    .user-profile-link .dropdown-menu{left: auto; right: 0px; background: #393939; border:0px; min-width: 220px; }
    .user-profile-link .dropdown-menu li a{color: #d8d8d8; border-bottom: solid 1px #414141; padding: 5px 0px; margin: 0px 15px;}
    .user-profile-link .dropdown-menu::after{border-bottom-color: #393939;}
    .user-profile-link a.dropdown-toggle,.homepage .user-profile-link a.dropdown-toggle{color: #333333; }
    .user-profile-link .dropdown-menu a:hover, .user-profile-link .dropdown-menu a:focus{background: transparent;}
    .user-profile-link .dropdown-submenu  .dropdown-menu{margin-top: 0px;}
    .user-profile-link .dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a{padding-left: 15px;}
    .user-profile-link .dropdown-submenu>a:after{margin-right: 0px;}

    #headerwrap h1{font-size: 30px;}

    /* Force table to not be like tables anymore */
    .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; }
    .no-more-tables thead tr { position: absolute;top: -9999px;left: -9999px;  }
    .no-more-tables tr { border: 1px solid #ccc; }
    .no-more-tables table tbody tr td { border: none;border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left;}
    .no-more-tables td:before { position: absolute;top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;text-align:left;font-weight: bold;  }
    .no-more-tables td:before { content: attr(data-title); }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        padding: 8px;
        font-size: 13px;
    }
    .box.box-default .box-content {

        padding: 3px;
    }
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        min-height: 1px;
        padding-right: 5px;
        padding-left: 5px;
        position: relative;
        max-height: 100%;
        height: inherit;
    }
    .row,.form-horizontal .form-group {
        margin-right: -5px;
        margin-left: -5px;
    }
    .box.box-default .box-content {
        padding: 5px;
    }
    #maincontentwrap {
        padding-top: 0px;
        width: inherit;
        top: 0px;
    }
    .basketitems#basketitemcount {
        left: 60px;
        top:-20px;
        max-width: 20%;
        position: relative;
        color: white;
    }
    .box .box-title {
        font-size: 14px;
        text-transform: uppercase;
        margin: 0px 0px 15px;
    }
    .box.box-success .box-title {
        height: 40px;
        padding: 10px 10px;
    }
    .box.box-primary .box-title {
        height: 40px;
        padding: 10px 10px;
    }
    .box .box-title {
        height: 40px;
        padding: 10px 10px;
    }
    .box.box-default .box-title{
        height: 40px;
        padding: 10px 10px;
    }
    .box.box-default .box-title .btn{display: inline-block;}

    .page-news-list .box.box-default .box-title{height: auto;}
    .page-news-list.page-content .box-content{min-height: 10px;}
    .page-news-list .box.box-default{margin-bottom: 15px;}
    .btn.btn-sm{padding: 3px 28px;}
    .sidebar{margin-bottom: 10px;}
    .sidebar .sidebar-nav .navbar-nav  .dropdown-menu>li>a,
    .sidebar .sidebar-nav ul li a {
        padding: 10px 10px;
        height: 40px;
        border-radius: 0px;
        margin:0px 0px 1px;
        box-shadow: none; display: block;
        font-size: 12px;
    }
    .sidebar .sidebar-nav ul li a:before{display: none;}
    .sidebar .sidebar-nav ul li a .caret{margin-top: 7px;}
    body{
        font-size: 14px;
    }
    .box.box-gallery{
        height: 300px;
    }

    .page-content .page-info{padding-right: 0px; padding-left: 0px; border-left: 0px;}

    .page0-title{margin-bottom: 10px; display:none;}
    .nav-title-xs{ padding-left: 15px;text-transform: uppercase;  font-size: 16px; padding-bottom: 10px;  padding-top: 18px; color: #fff; float:left;}
    .page-content > div {display: block; }
    #membership-col .page-content .content-body{width: 60%; margin: 0 auto;}
    .flip3D{width: 50%; margin-left: auto; margin-right: auto;}
    .f3-card .row div.col-sm-6.name {width: 74.5%;}
    #membership-col .col.card-col{margin-top: -160px;height: 125px; margin-left: 0px; margin-bottom:0px;}
    .my-profile-header{text-align: center;}
    .tier-wrap-row > div{flex: 33.333%; }
    .top-nav .navbar-brand img{margin-left: 5px;}
    .top-nav .right-nav-bar{margin-right: 5px;}
    .social-buttons.social-buttons-xs a{font-size: 14px; padding: 9px 4px;}
    .form-with-help .box-help{margin-top: 15px;}
    .search-div .btn-group {    text-align: center;width: 100%; margin-top: 10px;}
    .app-download-android,.app-download-ios{max-width: 180px; display: block;}

    .footer-top{text-align: center;}
    .page-footer .social{text-align: center;}
    .product-list{padding: 0;}
}

@media screen and (max-width: 600px) {
    .modal .modal-header{min-height: 60px; padding-top: 20px;}
    .modal .modal-body{padding: 15px;}
    #modalTripitineraryViewMap .modal .modal-body{padding: 15px 25px;}
    .modal-style-1 .modal-dialog{min-width: 150px;}
    .modal-style-1 .modal-footer{font-size: 14px;}
    .modal .social-buttons a, .btn-signupemail{font-size: 15px; height: 42px; padding-top: 10px; padding-bottom: 10px;}
    a.btn-icon-left .icon-container{font-size: 22px;}
    .modal-style-1 .btn-nmc{font-size: 15px; min-height: 42px;}
    .basketitems {
        top: 50%;
        left: 80%;
    }
    .box.box-gallery{
        height: 200px;
    }
    #changePasswordForm .form-control{width:100%;}
    .change-pass-container #changePasswordForm button[type=submit]{width:100%;}
}

/* Landscape phones and down */
@media screen and (max-width: 479px) {
    #headerwrap h1{font-size: 24px;}
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        padding: 8px;
        font-size: 13px;
    }
    .basketitems {
        top: 50%;
        left: 80%;
    }
    .top-nav .navbar-brand img{ }
    #bt_resend_otp{width: 100%; margin-top: 15px; float: none !important;}
    .otp-modal .modal-content{margin:auto; width:80%;}
    .page-footer .col ul{display:block;padding-left: 0px;}
    .page-footer .col ul > li{margin-top: 5px;}
    .page-footer .pull-right li:not(:first-child){margin-left: 0px;}
    #login-modal .modal-header a#social-google-login:after {content: "Google";}
    #login-modal .modal-header a#social-facebook-login:after {content: "Facebook";}
}
.navbar-default .navbar-right.navbar-nav > li.menu-cart-item >  a{padding-right: 40px;  }
.basketitems {
    color: #fff;
    font-size:80%;
    background-color:#e74c3c;
    position:absolute;
    top:5px;
    right: 5px;

    border-radius: 15px;
    width: 25px; height: 20px; text-align: center;
}
.gutter-5 .slick-prev.slick-arrow{
    position: absolute;
    left: 3px;
    /*top:200px;*/
    z-index: 1;
}
.gutter-5 .slick-next.slick-arrow{
    position: absolute;
    right: 3px;
    z-index: 1;
}


/*Social*/
.social-buttons a.btn-facebook {
    background: #3B5998;
}

.social-buttons a.btn-googleplus {
    background: #d34836;
    color: #fff;
}
.social-buttons a.btn-zalo {
    background: #008fe5;
}
.signup-or-separator {
    position: relative;
    padding-top: 10px;
}

.signup-or-separator .signup-or-separator--text {
    position: absolute;
    left: 50%;
    display: block;
    width: 30px;
    margin-left: -15px;
    background: #e8f1f4;
    text-align: center;
}

.social-buttons a, .btn-signupemail {
    display: block;
    margin: 0px auto;
    padding: 5px 4px;
    margin-bottom: 5px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 19px;
    /* border-radius: 5px; */
    text-decoration: none;
    position: relative;
    height: 42px;
}
.social-button a.btn-icon-left .icon-container {
    display: inline-block;
    width: 20px;
    text-align: left;
    float: left;
    position: absolute;
    left: 20px;
    top: 2px;
    font-size: 27px;
}

.voucher-point{font-weight: 700; font-size: 1.2rem;     padding: 0.375rem 0.75rem;
    border:solid 2px #000; text-align: center; display: inline-flex;
}
@media screen and (max-width: 767px) {
    .voucher-thumb img{max-width: 40vw;}
    #barQrCodeModal .slick-slide img{width: 275px;}
    #barQrCodeModal .sld .qr-code img {width: 180px;}
}

@media (min-width: 576px){
    .myvoucher-detail .modal-sm {
        max-width: 375px;
    }
}
@media (max-width: 576px){
    .wt-side-nav .sidebar-nav ul li a{font-size:1rem;}
}

@media (max-width: 1392px){
    .col.card-col{
        margin-left:-30px;
    }
    #membership-tier .tier-img-wrapper img.logo{width:100%;}
}