:root {
    --image-background: #22211F;
    --color-main: #6F020D;
    --color-main-disabled: #16335C;
    --color-white: white;
    --color-black: #000000;
    --color-mainblack: #22211F;
    --color-background: #040402;
    --color-input: lightgrey;
    --color-lightgrey: lightgrey;
    --color-gray: #6D6D6D;
    --color-brown: #746240;
    --color-creem: #E7E4CD;
    --color-green: #66725A;
    --color-red: #6F020D;
}

body {
    font-size: var(--font-size) !important;
    font-family: var(--font-family) !important;
}

button, input, optgroup, select, textarea {
    font-family: var(--font-family) !important;
    line-height: normal !important;
}

html {
    font-size: var(--font-size);
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

html {
    position: relative;
    min-height: 100%;
    background-color: var(--color-background);
}

header {
    padding: 3rem 0 1rem 0;
    color: var(--color-white);
}

body {
    background-color: var(--color-background);
    background-position: center;
    background-size: cover;
    /*background: var(--color-background);*/
    color: var(--color-black);
}

.colormain {
    /*color: var(--color-main);*/
    color: var(--color-black);
}

.colortitle {
    color: var(--color-black);
    margin-top: 1rem;
}

.bold {
    font-weight: 600 !important;
}


div .error {
    margin-top: -3rem;
    text-align: center;
    color: red;
}

div .card {
    color: black;
    /*margin: 1rem 1rem !important;*/
    top: 50% !important;
    border-radius: 10px !important;
    padding: 1rem;
    margin-bottom: 5rem;
    overflow: auto;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    height: 85vh;
    font-size: var(--font-size) !important;
}

.card-personal {
    margin: 1rem 0rem !important;
    top: 50% !important;
    border-radius: 1rem !important;
    padding: 1rem;
    margin-bottom: 5rem;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    height: 85vh;
    font-size: var(--font-size) !important;
}

.btn-back .a_goback {
    color: black;
    text-decoration: unset;
    position: unset;
}

.btn-back img {
    width: 20px;
    /*margin-top: 6px !important;*/
}


.read .details {
    height: 150vh !important;
}

.logo-signup {
    text-align: center;
}

    .logo-signup img {
        width: 25%;
    }

#frmsignup h2 {
    color: white;
}

.reqfield {
    margin-bottom: 0;
}

.dropdown {
}

    .dropdown .bootstrap-select .dropdown-menu {
        overflow: unset !important;
        /*width: 130%;*/
        /*max-height: 200px;*/
    }

    .dropdown .bootstrap-select .dropdown-toggle {
        /*width: 125%;*/
        /* background-color: unset;
        border: unset;
        border-style: none none solid;
        border-width: 1px;
        border-color: darkgray;
        border-radius: unset;
        box-shadow: none;
        padding-left: 0px;*/


        width: 100%;
        /* border: darkblue; */
        /* border-bottom: 1px solid var(--color-input); */
        padding: 0.1rem;
        color: #000000;
        transition: 0.5s;
        outline: none;
        background: none;
        border-style: solid;
        border-color: white;
        background-color: white;
    }
/* -------------------------------------------- Read -------------------------------------------- */
div .read {
    height: 800px;
    font-size: 16px;
}

.otp-number {
    font-weight: bold;
}

.read .Hread {
    text-align: center;
    color: black;
}

.btn-accept {
    position: relative !important;
    padding-top: 2rem !important;
}

.btn-consent {
    position: relative !important;
    padding-top: 2rem !important;
}
/* -------------------------------------------- Input -------------------------------------------- */
.inp-group label {
    margin-top: 10px;
}

#inp_birthdate {
    margin-top: 1rem;
}

#sele_gender {
    margin-top: 1rem;
    border-style: none none solid;
    border-width: 1px;
    border-color: darkgray;
    color: var(--color-black) !important;
}

input[type=text], input[type=tel], input[type=email] {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-input);
    /*padding: 0.1rem;*/
    color: black;
    transition: 0.5s;
    outline: none;
    background: none;
}

.single-line {
    width: 100% !important;
}

.date-cmpos {
    /*width: 85% !important;*/
}

    .date-cmpos.history-date {
        border: unset;
        border-style: solid;
        border-width: 1px;
        width: 50% !important;
        height: 3vh;
        color: black;
        border-color: var(--color-background);
    }

input[type=text]:disabled, input[type=date]:disabled, input[type=tel]:disabled, input[type=email]:disabled {
    color: black !important;
}

input[type=text]:focus, input[type=date]:focus, input[type=tel]:focus, input[type=email]:focus {
    border-bottom: 1px solid var(--color-black);
}


/* -------------------------------------------- Type: Checkbox -------------------------------------------- */

.checkbox-group {
    display: block;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkbox-group input[type=checkbox] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    /*.checkmark {*/
    /*position: absolute;*/
    /*accent-color: white;
    margin-top: -0rem;
    top: 0;
    left: -0.2rem;
    height: 18px;
    width: 18px;
    border-radius: 0.2rem;
    background-color: var(--color-brown);
}*/

    /* When the checkbox is checked, add a blue background */
    .checkbox-group input:checked ~ .checkmark {
        /*background-color: var(--color-brown);*/
    }

    .checkbox-group, .checkbox-group:after, .checkbox-group:before {
        accent-color: var(--color-main);
    }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-group input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
/*.checkbox-group .checkmark:after {
    content: "X";
    color: var(--color-white);
    font-weight: bolder;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}*/

.frmcheckbox {
    margin-left: 7vh;
    color: black
}

    .frmcheckbox .row {
        /*padding-top: 1rem;*/
        background-color: gray;
        padding: 5px 0;
        margin-top: 10px;
        width: 90%;
    }

/*.frmbutton {
    padding: 2rem 0 1rem 0;
    position: relative;
    margin-top: 43rem;
}*/


.center {
    position: absolute;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center !important;
}

.cmpos-btn, button {
    background-color: var(--color-red);
    border: none;
    color: white;
    padding: 5px 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: var(--font-size-button);
    /*margin: 0.4rem 0.2rem;*/
    border-radius: 1rem !important;
    cursor: pointer;
}

/*ImageUser*/
#profile-img {
    width: 80% !important;
    border-radius: 100%;
}

.cardemty .header {
}

    .cardemty .header .menu {
        margin-top: 2rem;
    }

        .cardemty .header .menu img {
            width: 60%;
        }

    .cardemty .header .logo-home {
        text-align: end;
        width: 100%;
        background-color: var(--color-red);
    }

/*.cardemty .header .logo-home img {
            width: 15%;
            padding: 7vh 1.5vh 1vh 1vh;
            }
        }*/

div .cardemty .frmmember {
    /*margin-top: 1rem;*/
    padding: 0.5rem 0;
    background-color: var(--color-background);
    width: 100%;
    margin-left: 0px;
}

.cardemty .frmmember .detail {
    margin: auto;
    color: white;
    font-size: 20px;
}

    .cardemty .frmmember .detail img {
        width: 30%;
        margin-bottom: 0.5ch;
    }

.cardemty .frmmember .frmpoint {
    text-align: right;
}

    .cardemty .frmmember .frmpoint span {
        font-size: 20px;
    }

.cardemty .frmmember .detail .home-point {
    text-align: right;
}
/*------------------------------------------------------------------Special for you--------------------------------------------------------------*/
.cardemty .shop-titel {
    background-color: var(--color-red);
    color: white;
    /*margin: 0 -1.7vh;*/
    font-size: var(--font-size-hometitle)
}

.frmspecial {
    color: white !important;
    /*margin: 0 -0.8rem;*/
    /*margin-top: 1rem;*/
}

    .frmspecial p {
        padding: 0.5vh;
        background-color: var(--color-red);
        font-size: var(--font-size-hometitle);
    }
/*----------------------------------------------------------------------Our Story--------------------------------------------------------------*/
div .frmstory {
    /*color: white;*/
    /*margin: 0 -0.8rem;*/
}

.frmstory p {
    font-size: var(--font-size-hometitle);
    background-color: white;
    color: black;
    padding: 0.5vh;
}

.story {
    /*width: 100%;*/
    max-width: 100vw;
    /*margin: auto;*/
    position: relative;
    overflow: hidden;
}

.frmstory .story-img img {
    width: 100%;
    border-radius: 10%;
}

.cmpos-mb-5 {
    margin-bottom: 5rem !important;
}

div .frmlocation {
    /*margin-bottom: 3rem !important;*/
    margin: 0;
    color: black;
    overflow: auto;
    /*height: 600px;*/
    height: 70vh;
}

.frmlocation ul {
    padding: 0;
}

.frmlocation .con-location {
    /*background-color: var(--color-creem);
    margin: 5px 0;*/
    margin-left: 1vh;
    margin-right: 1vh;
}

    .frmlocation .con-location .col-5 {
        padding: 0;
    }

    .frmlocation .con-location .col {
        /*padding: 0;*/
    }

    .frmlocation .con-location img {
        width: 100%;
        padding-top: 10px;
        /*border-radius: 10%;*/
    }

.frmlocation .detail {
    display: grid;
    margin: 1rem 0;
    gap: 15%;
}

.frmlocation .con-location .con-detail {
    overflow-x: auto;
}

.frmlocation .detail .address {
    color: black;
}

.frmlocation .detail .nameshop h5 {
    color: black;
    font-weight: 600;
}

h5 {
    font-size: 15px;
}

.frmlocation .detail .information {
    text-decoration: underline;
}


.frmlocation .direction {
    color: white;
    background-color: black;
    border-radius: 3rem;
    width: 30px;
    height: 30px;
    margin: auto;
}

    .frmlocation .direction .btn {
        text-align: center;
        padding: 2px;
    }

/*----------------------------------------------------Location Detail--------------------------------------*/
div .carddetail .shop-detail {
    margin-top: 3rem;
    display: grid;
    gap: 20%;
    text-align: start;
}

.carddetail .cardcenter img {
    margin-bottom: 1rem;
}

div .frmtotalpoint {
    text-align: center;
    color: white;
    /*margin-top: 1rem;*/
}

.frmtotalpoint > span {
    color: black !important;
}

div .totalpoint {
    padding: 0.3rem;
    border-radius: 3rem;
    background-color: var(--color-white);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
    /* background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);*/
}

    div .totalpoint span {
        font-size: 2.5rem;
        font-weight: bolder;
        color: var(--color-main);
    }

    div .totalpoint img {
        height: 2.2rem;
        margin-top: -1rem;
    }

.frmbuttonmem {
    padding: 1rem 0.8rem;
    text-align: center;
}


button.btn {
    height: 40px;
}

.btn {
    color: var(--color-black);
    background-color: var(--color-white);
    font-weight: bold;
    width: 100%;
    font-size: var(--font-size);
}

    .btn img {
        margin: 0 0 0.2rem -0.3rem;
        padding-right: 0.2rem;
        height: 1rem;
    }

div .frmcardmem {
    text-align: center;
}

/* -------------------------------------------- Member Card -------------------------------------------- */
div .membercard {
    color: var(--color-white);
    padding: 0.3rem;
    /*border-radius: 1.5rem;*/
    background-color: var(--color-background);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
    /*height: 18rem;*/
}

    div .membercard .img_qrcode img {
        width: 100%;
        /*margin-top: 2.5vh;*/
    }

.membercard img {
    /*border-radius: 20px;*/
    width: 90%;
    
    /* border-style: solid;
    border-width: 4px;*/
}

div .img_qrcode p {
    margin-top: -2rem;
    margin-bottom: 0;
}

div .progress {
    width: 90%;
    margin: auto;
    /*margin-top: 2rem;*/
}

.bg-danger {
    background-color: var(--color-main) !important;
    /*border-radius: 3rem;*/
}




div .card-changeMobile {
    margin: 1rem 0rem !important;
    top: 50% !important;
    border-radius: 1rem !important;
    height: 40rem;
    padding: 1rem;
    margin-bottom: 5rem;
    overflow: auto;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
}

.cardmessage {
    /*height: 25rem !important;*/
    margin: 3vh 1vh;
}

.colmobile {
    margin-top: 2.5rem;
}

    .colmobile a {
        color: var(--color-main);
    }

#inp_birthdate {
    margin-top: 1rem;
}

input[type=text], input[type=date], input[type=tel], input[type=email] {
    /*  width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-input);
    padding: 0.1rem;
    color: var(--color-main);
    transition: 0.5s;
    outline: none;
    background: none;*/

    width: 100%;
    /* border: darkblue; */
    /* border-bottom: 1px solid var(--color-input); */
    /*padding: 0.1rem;*/
    color: #000000;
    transition: 0.5s;
    outline: none;
    background: none;
    border-style: none;
    border-color: white;
    background-color: white;
}
/*.inp-changeMobile {*/
/*border-style: solid;*/
/*color: black;
    border-width: 1px;
    border-radius: 5px;
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
}*/

.text-box {
    font-size: 24px !important;
}

div .history {
    padding: 5rem 0.5rem 0 0.5rem;
}


div .frminputmonth {
    text-align: right;
    margin-top: -1rem;
    padding-bottom: 1rem;
}

table {
    width: 100%;
}

    table th, table td {
        text-align: center;
        font-weight: unset;
    }

.balance {
    text-align: right !important;
}

div .table {
    height: 100%;
    max-height: 45rem;
    text-align: left;
    overflow: auto;
    border-radius: 0.5rem 0.5rem;
}

table .tbheader {
    background-color: var(--color-main);
    color: var(--color-white);
}

.header-history {
    padding: 1rem 0.8rem;
    text-align: center;
}

.con-header {
    /*margin-top: 2rem;*/
    gap: 0.5rem;
}

.frmbuttonmem .col {
    padding: 0 0.2rem;
}

.hd-titel {
    color: var(--color-black);
    background-color: var(--color-white);
    /*padding: 10px 0;
    font-weight: bold;*/
    cursor: pointer;
    width: 100%;
    border-radius: 1rem !important;
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
}

    .hd-titel p {
        text-align: center;
    }

    .hd-titel.active {
        background-color: #cf2222 !important;
    }

.cmpos-card {
    margin: 1rem 0rem !important;
    top: 50% !important;
    /*height: 95% !important;*/
    height: 40rem !important;
    border-radius: 1rem !important;
    padding: 0 !important;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    margin-bottom: 5rem;
}

div .con-redeem h4 {
    margin-top: 0.5rem;
    margin-left: 1rem;
    color: white;
}

div .card .con-redeem {
    overflow: scroll;
    height: 100%;
    margin-top: 5px;
}

.coupon-redeem, .coupon-usenow {
    background-color: white;
    /* border-radius: 1rem !important;*/
    margin-bottom: 0.5rem;
    width: 95%;
    margin-left: 0.5rem;
}

.coupon-detail {
    text-align: center;
}

.coupon-titel {
    padding: 0;
}

.coupon-btn {
    background-color: var(--color-main);
    border-radius: 1rem !important;
    width: 80%;
    margin: auto;
    color: white;
    margin-bottom: 0.5rem;
    text-align: center;
    padding: 0
}

.conpon-img {
    margin-left: -0.5rem;
}

    .conpon-img img {
        width: 100%;
        margin: 15px 3px;
        /*border-radius: 1rem*/
    }

.coupon-points {
    background-color: var(--color-main);
    border-radius: 100%;
    width: 60px;
    height: 60px;
    margin: auto;
}

    .coupon-points p {
        color: white;
        text-align: center;
    }

.coupon-date, .coupon-uesdshop {
    margin: 0 0 0 0.5rem;
}

.coupon-btn-usenow {
    background-color: var(--color-main);
    border-radius: 1rem !important;
    width: 90%;
    margin: 1rem 0 0 1rem;
    color: white;
    margin-bottom: 0.5rem;
    text-align: center;
}
/* -------------------------------------------- Redeem Detail -------------------------------------------- */
.frmdetail .detail-titel {
    text-align: center;
    margin-top: 1rem;
}

.frmdetail .detail-img {
    margin: 1rem 4rem;
}

    .frmdetail .detail-img img {
        width: 100%;
        border-radius: 1rem !important;
    }

.detail-info {
    background-color: white;
    /*margin: 0 1rem;*/
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
}

    .detail-info h4 {
        font-weight: bold;
        padding: 1rem 0 0 1rem;
    }

    .detail-info p {
        padding: 0 1rem;
    }

.detail-confirm {
    text-align: center;
    margin-bottom: 1rem;
}

.frmbutton-user {
    /*margin-bottom: 15vh;*/
    padding: 1rem 0 1rem 0;
    position: relative;
}

div .logo-setting {
    text-align: center;
    padding: 0.5rem;
    padding-bottom: 1rem;
}

.col-10 {
    width: 80%;
}

div .logo-setting1 {
    text-align: center;
}

    div .logo-setting1 img {
        width: 30%;
    }

div .logo-setting2 {
    text-align: center;
}

    div .logo-setting2 img {
        width: 80%;
    }

div .frmbtnsetting a {
    text-decoration: none;
}

div .frmbtnsetting {
    padding: 0 1rem;
    margin: 3vh 3vh;
}

    div .frmbtnsetting img {
        margin-top: -0.2rem;
        margin-left: -0.5rem;
        height: 4vh;
    }

    div .frmbtnsetting span {
        margin-left: 0.5rem;
        color: white;
    }

    div .frmbtnsetting h4 {
        color: var(--color-lightgrey);
    }

    div .frmbtnsetting .row {
        padding: 1rem 0 0.5rem 0;
        /*border-bottom: 0.1rem solid var(--color-lightgrey);*/
    }

    div .frmbtnsetting .deleteac {
        padding-top: 1rem;
        border-bottom: none;
    }

        div .frmbtnsetting .deleteac span {
            margin-left: 0.2rem;
        }

        div .frmbtnsetting .deleteac img {
            height: 1rem;
            margin-left: 1.5rem;
            margin-top: -0.1rem;
        }

.aboutUs-detail {
    margin-top: 1rem;
}

    .aboutUs-detail h1 {
        font-weight: bold;
    }

div .aboutUs-img {
    text-align: center;
    margin-top: 2rem;
}

.aboutUs-img img {
    width: 80%;
}

.FAQ-detail {
    margin-top: 1rem;
    text-align: center;
}

    .FAQ-detail h1 {
        font-weight: bold;
    }

.link-us p {
    margin: 0;
}

.contactus-detail {
    margin-top: 1rem;
    text-align: center;
}

    .contactus-detail h1 {
        font-weight: bold;
    }

.contact-ad {
    text-align: left;
}

.contact-mail {
    text-align: left;
}

div .frmlanguage {
    padding: 1rem 0;
}

.frmlanguage .colortitle {
    margin-bottom: 1rem;
}

.update {
    /*padding: 0.6rem 3.99rem;*/
}

div .inp-group {
    margin-top: -0.5rem;
    padding-bottom: 10px;
}


.select {
    width: 100% !important;
    color: var(--color-black) !important;
    padding: 0.5rem 0 0.5rem 0.8rem !important;
    margin: 1rem 0 !important;
    display: inline-block !important;
    border: 1px solid var(--color-black) !important;
    border-radius: 1rem !important;
    box-sizing: border-box !important;
    box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
}

.form-select {
}


.modal {
    width: 100%;
    /*height: 90%;*/
    /*margin: 1rem;*/
    /*border-radius: 1rem!important;*/
}

/*.modal-fullscreen-sm-down {
    width: 90vw;
}*/
div .modal-body {
    padding: 0 1rem 1rem;
}

.modal-body .shop-titel {
    text-align: center;
}



.modal-body .shop-detail .row {
    /*padding-top: 1rem;*/
}

.modal-body {
    height: 80vh;
}

.md-promotion {
    width: 90%;
    height: 95%;
    /* margin: 1rem; */
    border-radius: 1rem !important;
    margin-left: 1rem;
    margin-top: 1rem;
}

    .md-promotion .modal-content {
        border-radius: 1rem !important;
    }

    .md-promotion .modal-header {
        border: unset;
    }

        .md-promotion .modal-header .btn-close {
            margin-bottom: 1rem;
        }

.QRbtn-back .a_goback {
    color: black;
    text-decoration: unset;
    font-size: 24px;
    position: absolute;
}

.QRbtn-back img {
    width: 7%;
    margin-top: 6px !important;
}

.slider {
    width: 100%;
    max-width: 100vw;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.list {
    position: absolute;
    width: 100%;
    display: flex;
    transition: 1s;
}

    .list img {
        /*height: 70%;*/
        width: 100%;
        /*border-radius: 1rem!important;*/
    }

.buttons {
    position: absolute;
    top: 45%;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: space-between;
}

    .buttons button {
        width: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: #fff5;
        color: #fff;
        border: none;
        font-weight: bold;
    }

.dots {
    padding: 0;
    position: relative !important;
    /*margin-top: 10.7rem !important;*/ /*16:9*/
    margin-top: 20rem !important; /*4:3*/
    bottom: 0rem !important;
    color: #fff;
    width: 0;
    display: flex;
    justify-content: center;
}

    .dots li {
        list-style: none;
        width: 0.5rem;
        height: 0.5rem;
        background-color: #fff;
        margin: 0 0.3rem;
        border-radius: 1rem !important;
        transition: 1s;
        opacity: 1;
    }

        .dots li.active {
            width: 0.5rem;
            background-color: dimgrey;
        }

div .md-shoppopup {
    padding: 1rem;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    /*margin-left: 4rem;*/
}

.card-body {
    padding: 0;
    /*overflow-y: auto;
    overflow-x: hidden;
    height: 90vh;*/
}

.card-header {
    padding: 0;
    padding-bottom: 1rem;
    background-color: transparent;
}

.shop-detail h2 {
    margin: 0;
}


.shop-detail p {
    padding: 0 1rem;
    margin: 0;
}

.modal-header {
    border: unset;
}

.logo-success {
    text-align: center;
    position: relative;
}

    .logo-success img {
        width: 40%;
    }

.logo-success2 img {
    width: 70%;
    margin-top: 5px;
}

.success_detail {
    margin-top: 25vh;
    text-align: center;
}

    .success_detail h2 {
        padding-bottom: 0.5rem;
    }

.numberphone {
    text-align: center;
    font-size: 33px;
}

#resendotp {
    color: white;
}

.resendotp {
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
}
/* -------------------------------------------- Input Otp -------------------------------------------- */
.inputfield {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.input[type=tel] {
    height: 2.5em;
    width: 2.5em;
    border: 1px solid var(--color-black);
    outline: none;
    text-align: center;
    border-radius: 0.3em;
    background-color: transparent;
    outline: none;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.input:disabled {
    color: var(--color-gray) !important;
}

.input:focus {
    /*border: 0.2rem solid var(--color-main);*/
}

button:disabled {
    background-color: #671911;
    color: lightgray;
}

.filter-option-inner-inner {
    font-weight: normal;
    color: black;
}

h4 {
    margin-bottom: 0px;
    font-size: 16px;
}

.f-headerPoint {
    font-size: 25px !important;
}

h2 {
    font-size: 22px !important;
}

.img-corner {
    border-radius: 10px;
}

.btn-direction {
    background-color: var(--color-main);
    color: white;
    padding: 0px 1rem;
    border-radius: 10rem;
    text-decoration: none;
}

.bootstrap-select {
    width: 100% !important;
}

::placeholder {
    color: var(--color-main);
}

.benefit-img > img {
    border-radius: 10px;
}

.btn-color {
    background-color: var(--color-main);
    color: white;
    font-weight: unset !important;
}

.btn.btn-sm {
    font-weight: unset !important;
}

.pro-qr-img {
    /*border: 1px solid;
    border-radius: 10px;*/
}

.form-select.select, .form-control.select, .form-select.form-select-sm.select {
    font-size: var(--font-size) !important;
}

p {
    margin-bottom: 0px;
}

.mnuName {
    font-size: 16px !important;
    margin-bottom: 1rem;
}

.home-a {
    font-size: 16px !important;
}

.luckydraw-mem {
    color: var(--color-black);
    padding: 0.3rem;
    border-radius: 1.5rem;
    background-color: var(--color-white);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
}

.point-redeem-list {
    overflow: auto;
    margin-bottom: 10vh;
}

.icon-mem {
    height: 12px !important;
}

.bootstrap-select > button {
    border-radius: 0px !important;
    border-bottom: 1px solid var(--color-input) !important;
}

.hd-titel,
.hd-titel:active,
.hd-titel:hover {
    text-decoration: none !important;
    color: black !important;
}

.slide-inside {
    overflow: auto !important;
    margin-bottom: 10vh;
}

.black-text > a,
.black-text > a:hover,
.black-text > a:active {
    color: black !important;
}

.cmpos-tb-header {
    background-color: var(--color-main);
    color: white;
}

.cmpos-br {
    border-radius: 20px !important;
    width: 100%;
}

.ldticket {
    font-size: 30px;
    color: var(--color-main);
}

.history-header {
    /*word-spacing: 100vw;*/
}

.point-message-container {
    text-align: start !important;
    padding: 0 1.5rem !important;
}

.bootbox.modal > .modal-dialog > .modal-content > .modal-body {
    height: unset !important;
}

.cmContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.navSetting {
    margin-right: 1.5vh;
}

/*---------------------------------------------- slider our story ---------------------------------------------------*/
.slide-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

    .slide-container img {
        /*width: 100%;*/
        object-fit: cover;
        height: 17vh;
    }

.ourstory-con {
    margin: 1vh 0vh 10vh 0vh;
}

.outstory-grp {
    margin: 0 0.5vh;
}

.slide-delivery {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
}

    .slide-delivery img {
        width: 60%;
    }

.register-title {
    background-color: var(--color-red);
    /*margin: 0 -3vh;*/
    padding-top: 1.5rem !important;
}

.register-con {
    color: white;
}

.register-title h1 {
    color: white;
}

.input-group-text {
    background-color: #fff;
    border: none;
    border-radius: unset;
}

.btn-iputotp {
    padding: 5px 0vh;
    border-radius: unset !important;
    /* background-color: gainsboro !important;*/
    color: black !important;
    margin-top: 2vh;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding-left: 0.5rem !important;
}

input#MBotp::placeholder {
    color: #cccccc;
}

input#inp_mobileNo::placeholder {
    color: #A5A5A5 !important;
}
/*.container :has(.bg-ipd) {
    background-image: url('../images/bg_ippudo.png') !important;
    height:100vh!important;
}*/
.logo {
    position: absolute;
    bottom: -2vh;
}

.logo-home {
    text-align: end;
    background-color: var(--color-red);
    padding-top: 1.5vh;
    padding-bottom: 1vh;
    /*margin: 0 -2vh;*/
}
/* .logo-home img {
        width: 25%;
        padding-right: 3vh;
    }*/
.location-con {
    background-color: white;
    width: 100%;
    /* height: 116%; */
    height: 80vh;
    /*margin-left: -14px;*/
    /* padding-left: 0rem; */
    /* margin-right: -5rem;*/
}

.profile-con {
}

.frmdelivery {
    padding-bottom: 4rem;
}

    .frmdelivery p {
        font-size: var(--font-size-hometitle);
        background-color: white;
        color: black;
        padding: 0.5vh;
    }

.locationDD {
    width: 95%;
    background-color: lightgray;
    border-style: unset;
}

.location-img {
    padding: inherit;
}

    .location-img img {
        width: 100%;
    }

.location-box {
    margin-left: 1vh;
    margin-right: 1vh;
}

.border-bt {
    border-style: inset;
    border-width: thin;
    margin: 1vh 0;
}

.member-title {
    background-color: var(--color-red);
    color: white;
    /* margin: 0 -1.7vh; */
    font-size: var(--font-size-hometitle);
}

.curr-point {
    grid-area: pointlevel;
    text-align: start;
}

.btnmember-con {
    background-color: white;
    /*height: 40vh;
    margin-top: 17vh;*/
}

.prosonal-btn {
    background-color: lightgray;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: black;
}

    .prosonal-btn img {
        width: 50%;
    }

.redeem-btn {
    background-color: lightgray;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: black;
}

    .redeem-btn img {
        width: 50%;
    }

.history-btn {
    background-color: lightgray;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: black;
}

    .history-btn img {
        width: 35%;
    }

.btnmember-grp {
    margin: 1rem 1rem 0 1rem;
    /*top: 1rem;*/
    position: relative;
    gap: 5px;
}

.redeemtitel {
    color: white;
    font-size: 24px;
    margin: 1vh 2ch;
}

.con-coupon {
    margin: 0 1vh;
}

.shop-img img {
    /*height: 39vh;*/
    /*object-fit: cover;*/
}

.shop-link {
    background-color: darkgray;
    /*margin-top: 1rem;*/
}

    .shop-link a {
        color: black;
        text-decoration: none;
    }

.inputnumberVRF {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.benefit-titel p {
    font-size: 24px;
    padding: 0;
}

.btn-change {
    padding: 4.5px 1rem 0rem 1rem;
}

.change-mb {
    color: white;
}

.history-con {
}

.form-select {
    border-radius: 0 !important;
}

.redem-con {
    justify-content: space-evenly;
    background-color: var(--color-red);
    text-align: center;
    /*padding: 0.5vh;*/
    margin-top: 5px;
}

    .redem-con.th {
        font-size: 17px !important;
        justify-content: space-between
    }

    .redem-con.eng {
        font-size: 18px !important;
    }

    .redem-con a {
        color: black;
        text-decoration: unset;
        border: unset;
    }

.page-item.active .page-link {
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.bgcolorred {
    background-color: var(--color-red);
}

.page-link:focus {
    background-color: var(--color-red) !important;
    color: white !important;
    box-shadow: unset;
}

.memberredem-title {
    background-color: black !important;
    border: unset;
    color: white !important;
    text-align: start;
    font-size: var(--font-size-hometitle);
    border-radius: unset !important;
}

.accordion-item {
    background-color: unset;
}

.accordion-button:focus {
    box-shadow: unset;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('../images/icon/arrow-down.png') !important;
    transform: unset;
}

.accordion-button::after {
    background-image: url('../images/icon/arrow-up.png');
}

.accordion-button {
    padding: 0rem 1rem;
}

.accordion-body {
    padding: 1rem 0;
}

.color-red {
    color: var(--color-red);
}

.ippd-card {
    color: black;
    margin: 0.5rem 0.5rem !important;
    top: 50% !important;
    border-radius: 10px !important;
    padding: 1rem;
    margin-bottom: 5rem;
    overflow: auto;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    height: 88vh;
    font-size: var(--font-size) !important;
}

input::placeholder {
    font-weight: bold;
    opacity: unset;
    color: black;
}

.redem-img img {
    width: 60%;
}

.redem-info {
}

.membercard-detail {
    /*height: 20vh;*/
    color: white;
    margin-top: -4vh;
}

.qr-popup {
    color: white;
    text-align: center;
}
/*
.ippd-card.eng {
    font-family: "font-eng" !important;
}
.colortitle.eng {
    font-family: "font-eng" !important;
}
.frm-qr-detail.eng {
    font-family: "font-eng" !important;
}*/
.footer.eng {
    /*font-family: "font-eng" !important;*/
    text-transform: uppercase;
    padding-right: 0.5vh;
}

.modal-content {
    border-radius: 1.3rem;
}

.page-link {
    padding: 5px 0;
}

.bg-memberqr {
    position: relative;
    top: 0;
    left: 0;
}

.qr-img1 {
    position: relative;
    top: 0;
    left: 0;
    width: 90% !important;
    /* border: 1px red solid;*/
}

.qr-img2 {
    width: 40%;
    /*padding: 1rem;
    background-color: white;*/
    position: absolute;
    top: 15px;
    left: 30%;
}

.useble-con {
    margin-bottom: 10vh;
}

.shop-direction {
    text-align: end;
    margin-right: 2vh;
    margin-top: -1.5rem;
}

.form-control {
    border-radius: unset;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: unset;
}

.nav-link {
    color: black;
}

.pro-slider {
    aspect-ratio: 1 / 1;
    /*background-color: var(--main-green-color);*/
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.memcode {
    position: relative;
}

.img-contact {
    width: 60%;
}

.btnsetting {
    background-color: transparent;
    color: white !important;
    padding: 0;
}

.btnchange-mb {
    background-color: var(--color-main);
    color: white;
}

.cmloader-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
}

.cmloader-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
}

#cmloader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #fff;
}

#cmloader {
    display: block;
    position: relative;
    left: 45%;
    top: 48%;
    width: 180px;
    height: 180px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: transparent solid 3px;
    border-top-color: #60370fba;
    animation: spin 1.5s linear infinite;
}

    #cmloader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: transparent solid 3px;
        border-top-color: #c4864a99;
        animation: spin 2s linear infinite;
    }

    #cmloader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: transparent solid 3px;
        border-top-color: #60370f;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.logo-verify {
    position: absolute;
    bottom: 2vh
}

.delete-img img {
    width: 50%;
}

.delete-RqAc img {
    width: 35%;
}

.frmbutton {
    padding: 1rem 0 4rem 0;
    position: relative;
}

.card-dd {
    color: black;
    /* margin: 1rem 1rem !important; */
    top: 50% !important;
    border-radius: 10px !important;
    padding: 1rem;
    /*margin-bottom: 5rem;*/
    overflow: auto;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    height: 35vh;
    font-size: var(--font-size) !important;
}

.btnDD-ok {
    padding: 5px 2.5rem;
}

.frm-btnDD {
    justify-content: space-evenly;
    display: flex;
}

.color-white {
    color: white !important;
}

.input-NbDelete {
    padding: 1vh !important;
    /* color: white; */
    border-radius: 10px;
    background-color: lightgray !important;
    text-align: center;
}

.modal-content-dd {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: black;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    color: white !important;
}

.locationDD:focus {
    border-color: transparent;
    box-shadow: unset;
}

.redem-con {
    justify-content: space-between;
    background-color: var(--color-red);
    text-align: center;
    /* padding: 0.5vh; */
    margin-top: 5px;
}

.titel-sigup {
    justify-content: space-between;
    display: flex;
}

    .titel-sigup a {
        color: white;
        text-decoration: none;
        border-style: solid;
        padding: 0 5px;
        border-width: 1px;
    }

.con-mempoint {
}

    .con-mempoint span {
        font-size: 25px;
    }

.con-memname {
    margin-bottom: auto;
    margin-top: auto;
}

.proid-redeem {
    font-size: 25px;
}

.img-logo {
    margin-top: 36vh;
}

.success-mess {
    display: grid;
    justify-content: center;
    margin-top: 22vh;
}

.card-his {
    padding: 0 1rem;
    background: linear-gradient(to right, #AEAEAE -4%, var(--color-white) 6%, var(--color-white) 100%);
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.5);
    height: 2rem;
    border-radius: 10px;
}

.bg-white {
    background: var(--color-white);
    color: black;
}

.nav-pills .nav-link-his.active, .nav-pills .show > .nav-link-his {
    background-color: var(--color-main) !important;
    color: white !important;
}

.scroll-loca {
    overflow: scroll;
    height: 36vh;
    display: flow;
}

#btn_create {
    margin-bottom: 100px !important;
}

.bg-red-wine {
    background-color: var(--color-main) !important;
}

button > i {
    display: grid !important;
}

.min-30 {
    min-width: 30%;
}
/*.bottom-nav-item.active span {
    color: var(--main-yellow-color) !important;
}*/

.bottom-nav-item.active#home img {
    content: url('../images/icon/icon-homeactive.png');
}

.bottom-nav-item.active#redeem img {
    content: url('../images/icon/icon-redempactive.png');
}

.bottom-nav-item.active#member img {
    content: url('../images/icon-memberactive.png');
}

.bottom-nav-item.active#location img {
    content: url('../images/icon/icon-locationactive.png');
}

.bottom-nav-item.active#setting img {
    content: url('../images/icon/icon-settingactive.png');
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: white !important;
}

.titel-login {
    font-size: var(--font-size-hometitle) !important;
}

.link-login a {
    color: white;
    text-decoration: none;
}

/*#profile-img {
    content: url('../images/icon/personal.png');
}*/

.input-group > .form-control, .input-group > .form-select, .form-select {
    height: 40px !important;
}

.carousel-item > img {
    aspect-ratio: 1/1;
}

.filter-option-inner-inner {
    margin-top: .5rem !important;
}
.mt-100{
    margin-top:100px!important;
}
.logo-home img{
    width:25%!important;
    margin-right:0.5rem!important;
}
.lang{
    top:10px;
    right:10px;
}
    .lang > a {
        color: white;
        text-decoration: none;
        border-style: solid;
        padding: 0 5px;
        border-width: 1px;
    }
.redem-con .nav-item .nav-link{
    font-size:12px !important;
}
.circular-progress {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#28a745 0% 0%, #e9ecef 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: relative;
}

    .circular-progress::before {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;  
        border-radius: 50%;
        background: #000; /* สีช่องว่างตรงกลาง */
    }
.progress-value {
    position: relative; /* บังคับให้ข้อความอยู่เหนือ ::before */
    z-index: 1;
    font-size: 18px;
    color:white;
}
    .progress-value .p-quota{
        font-size:30px;
    }
.con-quota{
    color:white;

}
.header-quota {
    font-size: 18px;
    font-weight: bold;
}
.desc-quota p{
    padding:3px;
}
.quota-baht {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5rem;
}
.pro-qr-img img {
    width: 100%;
}
.img_qrcode .qr-img2 img,
.img_qrcode .qr-img2 canvas {
    padding: 1rem;
    background-color: white;
    border-radius: 0.5rem;
}
.outstory-grp p {
    background-color: unset !important;
    color: white !important;
}