@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500&display=swap');

:root {
    --color-brow: #553A1E;
    --color-green: #2fba38;

}

a,
a:active,
a:hover {
    text-decoration: none;
    color: inherit;
}

*,
::after,
::before {
    box-sizing: border-box;
}

strong {
    font-weight: 400;
}

::-webkit-input-placeholder {
    color: var(--color-brow);
    /*Change the placeholder color*/
    opacity: 0.5 !important;
    font-family: 'Mitr', sans-serif;
    font-weight: 300;
}

input,
select {
    outline: none;
    font-family: 'Mitr', sans-serif !important;
}

button {
    font-family: 'Mitr', sans-serif !important;
}

body {
    font-family: 'Mitr', sans-serif;
    background: #d3d3d3;
    color: var(--color-brow);
    font-size: 16px;
    font-weight: 300;
    margin: 0;
}

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

#main {
    margin-left: auto;
    margin-right: auto;
    max-width: 425px;
    width: 100%;
    min-height: 100vh;
    color: var(--color-brow);
    position: relative;
    background-color: white;
    overflow: hidden;
}

.mh-100 {
    min-height: 100vh;
}

.p-relative {
    position: relative !important;
}

.p-middle {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.logo-middle {
    position: absolute !important;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.w-100 {
    width: 100% !important;
}

.w-90 {
    width: 90% !important;
}

.w-80 {
    width: 80% !important;
}

.w-70 {
    width: 70% !important;
}

.w-60 {
    width: 60% !important;
}

.w-50 {
    width: 50% !important;
}

.w-40 {
    width: 40% !important;
}

.w-30 {
    width: 30% !important;
}

.w-20 {
    width: 20% !important;
}

.w-10 {
    width: 10% !important;
}


.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}


.bg-green {
    background-color: var(--color-green) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

.text-white {
    color: white;
}

.pt-1 {
    padding-top: 10px;
}

.input-round {
    display: block;
    width: 100%;
    padding: 16px 30px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 26px !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: 1px 1px 5px #737576;
    line-height: 1;
}

.p1-phone {
    padding: 0px 24px;
    width: 100%;
}

.p1-label {
    padding-left: 22px;
}

.p1-checkbox {
    display: block;
    position: relative;
    padding-left: 28px;
    margin-top: 12px;
    margin-bottom: 24px;
    cursor: pointer;
    font-size: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 24px;
}

.p1-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.p1-checkbox .checkmark {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    height: 18px;
    width: 18px;
    border: 1px solid white;
    border-radius: 50%;
    background-color: white;
}

.p1-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.p1-checkbox input:checked~.checkmark:after {
    display: block;
}

.p1-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #553A1E;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.fw-2 {
    font-weight: 200;
}

.fw-3 {
    font-weight: 300;
}

.fw-4 {
    font-weight: 400;
}

.fw-5 {
    font-weight: 500;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.h-100vh {
    min-height: 100vh;
}

.postion-relative {
    position: relative !important;
}

.postion-absolute {
    position: absolute !important;
}

.postion-fixed {
    position: fixed !important;
}

.postion-inherit {
    position: inherit !important;
}

hr {
    border-bottom: 1px solid #b7b7b7;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin: 12px 0;
}

input {
    border: 1px solid #707070;
    border-radius: 10px;
    width: 100%;
    height: 51px;
    font-size: 20px;
    font-weight: 300;
    padding: 0 20px;
    font-family: "IBM Plex Sans Thai", sans-serif;
}

input:focus {
    outline: none;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-05 {
    margin-top: 0.5rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-05 {
    margin-bottom: 0.5rem !important;
}

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

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

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

.pt-0 {
    padding-top: 0 !important;
}

.pt-05 {
    padding-top: 0.5rem !important;
}

.pt-1 {
    padding-top: 1rem !important;
}

.pt-2 {
    padding-top: 2rem !important;
}

.pt-3 {
    padding-top: 3rem !important;
}

.pt-4 {
    padding-top: 4rem !important;
}

.pt-5 {
    padding-top: 5rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-05 {
    padding-bottom: 0.5rem !important;
}

.pb-1 {
    padding-bottom: 1rem !important;
}

.pb-2 {
    padding-bottom: 2rem !important;
}

.pb-3 {
    padding-bottom: 3rem !important;
}

.pb-4 {
    padding-bottom: 4rem !important;
}

.pb-5 {
    padding-bottom: 5rem !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-05 {
    padding-left: 0.5rem !important;
}

.pl-1 {
    padding-left: 1rem !important;
}

.pl-2 {
    padding-left: 2rem !important;
}

.pl-3 {
    padding-left: 3rem !important;
}

.pl-4 {
    padding-left: 4rem !important;
}

.pl-5 {
    padding-left: 5rem !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-05 {
    padding-right: 0.5rem !important;
}

.pr-1 {
    padding-right: 1rem !important;
}

.pr-2 {
    padding-right: 2rem !important;
}

.pr-3 {
    padding-right: 3rem !important;
}

.pr-4 {
    padding-right: 4rem !important;
}

.pr-5 {
    padding-right: 5rem !important;
}

.p1-button-login {
    display: block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    color: white;
    background-color: var(--color-brow);
    border-color: var(--color-brow);
    cursor: pointer;
    width: 80%;
    border-radius: 26px;

    margin-left: auto;
    margin-right: auto;
}

.input-icon {
    display: block;
    position: relative;
}

nav {
    background-color: var(--color-green) !important;
    display: table;
    width: 100%;
}

nav .left,
nav .right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 12px 16px;
}

nav .right {
    text-align: right;
}

.logo {
    height: 40px;
}

.nav-login {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 4px 14px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: var(--color-brow);
    background-color: white;
    border-color: white;
    cursor: pointer;
    border-radius: 12px;
    margin-left: 6px;
}

.nav-menu {
    display: inline-block;
    cursor: pointer;
    height: 20px;
    line-height: 1;
    margin-left: 6px;
}

.d-fixed-top {
    position: fixed;
    top: 0;
    max-width: 425px;
    width: 100%;
    z-index: 9999999999;
}
.d-fixed-bottom {
    position: fixed;
    bottom: 0;
    max-width: 425px;
    width: 100%;
    z-index: 9999999999;
}

nav .col-left,
nav .col-center,
nav .col-right {
    display: table-cell;
    padding: 18px;
    font-size: 20px;
    color: white;
}

nav .col-left,
nav .col-right {
    width: 20%;
}

.box-nav {
    display: table;
    width: 100%;
    padding: 24px 18px 12px 18px;
}

.box-nav .box-left {
    display: table-cell;
    vertical-align: middle;
    width: 65%;
    padding-right: 4px;
}

.box-nav .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 35%;
    padding-left: 4px;
}

.bg-home {
    background-image: url("../imageMobile/bg-home.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.box-menu {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #00000029;
    display: table;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    height: 62px;
    overflow: hidden;
}

.box-menu .box-link {
    width: 33.33333%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    font-size: 11px;
    line-height: 1.2;
    padding: 6px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}

.box-menu .box-link img {
    height: 36px;
    display: inline-block;
}

.box-menu .box-link.box-coupon {
    font-size: 13px;
    line-height: 1.5;
}

.lh-1 {
    line-height: 1 !important;
}

.lh-2 {
    line-height: 2 !important;
}

.home-free-top {
    height: 166px;
}

.page-free-top {
    height: 70px;
}

.home-content {
    margin: 18px 16px;
    /* overflow: hidden; */
    font-size: 14px;
}

.title-content {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 12px 0px;
    font-size: 15px;
}

.title-content::before {
    content: '';
    width: 25%;
    display: block;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    border-top: 1px solid #6e6e6e;
}

.title-content::after {
    content: '';
    width: 25%;
    display: block;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    border-top: 1px solid #6e6e6e;
}

#map {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 18px;
}

.otp-back {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    border-radius: 50%;
    color: white;
    padding: 1px 10px;
}

.pt-otp {
    padding-top: 100px;
}

.digit-group {
    display: block;
    margin-top: 20px;
    text-align: center;
}

.digit-group input {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    font-size: 20px;
    border: 1px solid #ccc;
    text-align: center;
    box-shadow: 0px 3px 6px #00000029;
}

.otp-link {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.input-eye {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
    color: black;
}

.input-eye img {
    width: 26px;
}

.input-password input {
    padding: 16px 30px;
}

.input-password .input-eye {
    top: 16px;
}

.input-gen-pass {
    padding: 8px 32px !important;
    font-size: 14px;
    height: auto !important;
}

.password-checklist {
    position: relative;
    padding-left: 24px;
    margin-left: 50px;
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1.;
}

.password-checklist::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 4px;
    top: 4px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid white;
}

.password-checklist.active::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 6px;
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background-color: white;
}

.p-otp {
    padding: 0px 42px;
    width: 100%;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(110, 110, 110, 0.8);
    display: none;
    z-index: 99999999999;
}

.dialog.active {
    display: block;
}

.dialog-content {
    width: 100%;
    max-width: 350px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.bg-dialog {
    position: relative;
}

.bg-dialog img {
    width: 100%;
}

.dialog-avatar {
    position: absolute;
    width: 30%;
    top: 48%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    padding: 8px;
}

.dialog-detail {
    position: absolute;
    width: 55%;
    top: 40%;
    left: 40%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
}

.dialog-button {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
}

#map button,
#map .gmnoprint {
    display: none !important;
}

.menu-slide {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(110, 110, 110, 0.8);
    z-index: 99999999 !important;
    display: none;
}

.menu-slide.active {
    display: block;
}

.menu-slide .menu-content {
    position: absolute;
    max-width: 300px;
    width: 100%;
    height: 100vh;
    background-color: white;
    right: 0;
}

.menu-slide .menu-content .menu-row-1 {
    display: table;
    width: 100%;
    padding: 24px 12px 12px 12px;
}

.menu-slide .menu-content .menu-row-1 .close {
    width: 50%;
    display: table-cell;
    vertical-align: middle;
}

.menu-slide .menu-content .menu-row-1 .close img {
    cursor: pointer;
    width: 30px;
}

.menu-slide .menu-content .menu-row-1 .language {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    font-size: 12px;
}

.menu-slide .menu-content .menu-row-1 .language img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.menu-avatar {
    text-align: center;
    padding: 12px;
    font-size: 18px;
    font-weight: 400;
}

.menu-avatar img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
}

.menu-slide .menu-content .menu-list {
    padding: 0px 30px;
}

.menu-slide .menu-content .menu-list a.menu-link {
    display: table;
    width: 100%;
}

.menu-slide .menu-content .menu-list a.menu-link .link-content-icon {
    width: 8%;
    display: table-cell;
    padding-top: 6px;
}

.menu-slide .menu-content .menu-list a.menu-link .link-content-icon img {
    width: 18px;
}

.menu-slide .menu-content .menu-list a.menu-link .link-content {
    display: table-cell;
    width: 85%;
    font-weight: 100;
    font-size: 15px;
    vertical-align: middle;
}

.menu-slide .menu-content .menu-list a.menu-link .link-icon {
    display: table-cell;
    width: 10%;
    text-align: right;
    vertical-align: middle;
}

.menu-slide .menu-content .menu-list a.menu-link .link-icon img {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.menu-slide .menu-content .menu-list strong {
    font-size: 18px;
    font-weight: 400;
}

.menu-slide .menu-content .menu-list .link-social {
    display: table;
    width: 100%;

}

.friend-box {
    width: 90%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    opacity: 1;
    margin: -25px auto 0 auto;
}

.friend-header {
    font-size: 17px;
    padding-top: 18px;
    padding-bottom: 8px;
}

.friend-input {
    position: relative;
    display: flex;
    margin: 12px auto 12px auto;
    width: 90%;
}

.friend-input input {
    width: 75%;
    height: 67px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 10px 0px 0px 10px;
    border: none;
    padding-left: 60px;
    font-size: 22px;
}

.friend-input button {
    width: 25%;
    height: 67px;
    background: var(--color-green) 0% 0% no-repeat padding-box;
    border-radius: 0px 10px 10px 0px;
    border: none;
    color: white;
    font-size: 14px;
}

.friend-input span {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    display: block;
    line-height: 0;
}

.friend-input span img {
    width: 23px;
}

.friend-footer {
    display: table;
    width: 90%;
    font-size: 14px;
    margin: 0px auto;
    padding-bottom: 12px;
    padding-bottom: 6px;
}

.friend-footer .friend-alert {
    color: red;
    display: table-cell;
    width: 80%;
}

.friend-footer .friend-link {
    color: var(--color-green);
    display: table-cell;
    width: 20%;
    text-align: right;
}

.link-slide {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    transition: all 0.2s;
    transform: scale(0.98);
    will-change: transform;
    user-select: none;
    cursor: pointer;
}

.link-slide::-webkit-scrollbar {
    display: none;
}

.slide-menu {
    box-shadow: 1px 3px 6px #00000029;
    border-radius: 11px;
    width: 300px;
    display: inline-block;
    overflow: hidden;
    margin-right: 16px;
    height: 175px;
}

.slide-menu:last-of-type {
    margin-right: 0 !important;
}

.slide-menu img {
    min-width: 100%;
    height: 175px;
    object-fit: cover;
}

.title-col {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

.bg-white {
    background-color: white;
}

.browny-update {
    width: 100%;
    box-shadow: 2px 4px 6px #00000029;
    border-radius: 20px;
    margin-bottom: 8px;
    background-color: white;
}

.mac-status {
    position: relative;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 15px;
    height: 97px;
    width: 100%;
    background-color: white;
    margin-bottom: 12px;
}

.mac-status .mac-image {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    text-align: center;
    width: 80px;
    height: 80px;
}

.mac-status .mac-image img {
    height: 80px;
}

.mac-status .mac-link {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    height: 48px;
}

.mac-status .status-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-green);
    position: absolute;
    top: 12%;
    left: 30%;
}

.mac-status .status-detail {
    font-size: 13px;
    color: #404040;
    position: absolute;
    top: 40%;
    left: 30%;
}

.max-relative {
    position: relative;
    overflow: hidden;
}

.map-search {
    position: absolute;
    left: 50%;
    top: 3%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    width: 80%;
}

.map-search .input-search {
    position: relative;
}

.map-search .input-search input {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 24px;
    text-align: center;
    width: 100%;
    padding: 12px;
    border: 1px solid white;
    font-size: 14px;
}

.map-search .input-search span {
    position: absolute;
    top: 24px;
    right: 5%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    color: #A5A5A5;
}

.h-100vh {
    height: 100vh;
}



#machien {
    position: relative;
    text-align: center;
    padding: 12px 24px;
    margin-top: 100px;
}

#machien .machien {
    width: 45%;
    margin-bottom: 20px;
}

#machien font {
    font-size: 18px;
    display: block;
}

#machien strong {
    font-size: 18px;
    display: block;
}

#machien span {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 62px;
}

#machien span .machien-number {
    position: absolute;
    top: 58%;
    left: 62%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    font-weight: 300;
    font-size: 20px;
}

#machien span img {
    width: 100%;
}


.machien-content {
    padding: 12px 24px;
}

.program-title {
    font-size: 18px;
    display: block;
    margin: 12px 0px;
}

.line-addtime {
    margin: 18px 0px;
}

.choice {
    padding: 8px;
    cursor: pointer;
    position: relative;
    padding-left: 28px;
}

.choice-box {
    border: 1px solid var(--color-brow);
    border-radius: 16px;
    display: table;
    width: 100%;
    padding: 8px 16px 8px 46px;
    font-size: 20px;
    transition: all .3s;
    background-color: white;
}

.choice-name,
.choice-price {
    display: table-cell;
}

.choice-name {
    font-weight: 400;
}

.choice-price {
    text-align: right;
    color: var(--color-green);
    transition: all .3s;
    width: 120px;
}

.choice-image {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    background-color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    box-shadow: 1px 1px 5px #ccc;
    text-align: center;
    padding: 15px;
}

.choice-image img {
    width: 18px;
}

.choice.active .choice-box,
.choice.active .choice-box .choice-price {
    border: 1px solid var(--color-green);
    background-color: var(--color-green);
    color: white;
}

s.discount,
strike {
    text-decoration: none;
    position: relative;
}

s.discount::before,
strike::before {
    top: 50%;
    /*tweak this to adjust the vertical position if it's off a bit due to your font family */
    background: red;
    /*this is the color of the line*/
    opacity: .7;
    content: '';
    width: 110%;
    position: absolute;
    height: .1em;
    border-radius: .1em;
    left: -5%;
    white-space: nowrap;
    display: block;
    transform: rotate(-15deg);
}

s.discount.straight::before,
strike.straight::before {
    transform: rotate(0deg);
    left: -1%;
    width: 102%;
}

.browny-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 4px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.browny-checkbox.addTime {
    font-size: 18px;
    padding-top: 0;
}

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

/* Create a custom checkbox */
.browny-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 2px solid var(--color-green);
    border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.browny-checkbox:hover input~.browny-checkmark {
    background-color: var(--color-green);
}

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

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

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

/* Style the browny-checkmark/indicator */
.browny-checkbox .browny-checkmark:after {
    left: 7px;
    top: 3px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.float-end {
    float: right !important;
}

.price-data {
    display: table;
    width: 100%;
    margin-bottom: 6px;
}

.price-data .price-name,
.price-data .price-amount {
    display: table-cell;
    width: auto;
    font-size: 15px;
    vertical-align: middle;
}

.price-data .price-amount {
    text-align: right;
}

.text-red {
    color: red;
}

.program-input {
    box-shadow: 0 1px 12px rgb(0 0 0 / 15%) !important;
    text-align: center !important;
    border: 0 !important;
    padding: 0.5rem 1rem;
    display: block;
    width: 100%;
    line-height: 1.5;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin: 0;
    font-size: 18px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 8px;
    height: 51px;
    font-family: 'Mitr', sans-serif;
}

.program-remark {
    color: #A8A8A8;
    font-size: 13px;
}

.payment-flex {
    display: flex;
    flex-wrap: wrap;
}

.payment-box {
    flex: 0 0 auto;
    width: 33.33333333%;
    padding: 6px;
}

.payment {
    width: 100%;
    position: relative;
    box-shadow: 0 0 6px rgb(0 0 0 / 15%);
    border-radius: 1rem;
    cursor: pointer;
    background-color: white;
}

.payment-disable {
    width: 100%;
    position: relative;
    box-shadow: 0 0 6px rgb(0 0 0 / 15%);
    border-radius: 1rem;
    cursor: pointer;
    background-color: #d5d5d5;
    filter: grayscale(1);
    aspect-ratio: 1;
}

.payment:before {
    content: '';
    transition: all .1s;
}

.payment.active:before {
    border: 4px solid var(--color-green);
    border-radius: 1rem;
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgb(255, 255, 255);
}

.payment:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.payment .payment-content ,
.payment-disable .payment-content 
{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.payment .payment-content small {
    font-size: 10px;
}

.program-btn {
    background: var(--color-green) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    color: white;
    border: none;
    width: 100%;
    height: 47px;
    font-size: 18px;
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 8px;
}

.rounded-22 {
    border-radius: 22px !important;
}

.machien-procress {
    display: block;
    text-align: center;
    color: var(--color-green);
    font-size: 20px;
    font-weight: 400;
}

.machien-procress::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--color-green);
    border-radius: 50%;
}

.progress-machien {
    display: block;
    position: relative;
    margin: 36px 0px;
    padding: 0px 18px;
    width: 100%;
}

.progress-machien::before {
    content: '';
    border-bottom: 7px solid #D8D8D8;
    width: 100%;
    display: block;
}

.progress-machien::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #D8D8D8;
}

.progress-machien .progress-bar,
.progress-machien .progress-start,
.progress-machien .progress-end {
    position: absolute;
}

.progress-machien .progress-start {
    left: 0;
    bottom: -35px;
}

.progress-machien .progress-end {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #D8D8D8;
    color: #B2B2B2;
    font-size: 32px;
    padding: 0 12px;
}

.progress-bar {
    max-width: 94%;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    border-bottom: 7px solid #D8D8D8;
}

.progress-machien.green::after {
    background-color: var(--color-green);
}

.progress-machien.green .progress-bar {
    border-color: var(--color-green);
}

.progress-machien.green.active .progress-end {
    background-color: var(--color-green);
    color: white;
}

.progress-machien.red::after {
    background-color: red;
}

.progress-machien.red .progress-bar {
    border-color: red;
}

.progress-machien.red.active .progress-end {
    background-color: red;
    color: white;
}

.landing {
    position: relative;
    width: 100%;
    height: 100%;
}

.landing img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    width: 100%;
}

.luck-box {
    position: relative;
    padding: 16px;
}

.luck-box img {
    width: 100%;
    box-shadow: 1px 3px 6px #00000029;
    border-radius: 16px;
}

.luck-box .luck-no {
    color: #FFF14B;
    font-size: 89px;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.free-top {
    padding-top: 70px;
}

.slip-tab-link {
    justify-content: center !important;
    display: flex;
    width: 100%;
}

.slip-tab-link .slip-link {
    flex: 0 0 auto;
    width: 25%;
    text-align: center;
    line-height: 1;
}

.slip-tab-link .slip-link .icon-link {
    width: 62px;
    height: 62px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #404040;
    background-color: white;
    display: inline-block;
    position: relative;
}

.slip-tab-link .slip-link .icon-link img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    height: 23px;
}

.price-amount.payment-slip-type img {
    height: 38px;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

.price-amount.payment-slip-type {
    position: relative;
}

.bg-slip {
    background-image: url(../imageMobile/bg-slip-wash.png);
    background-position: bottom;
    background-position-y: 0%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px 24px 16px;
    box-shadow: 1px 3px 6px #00000029;
    overflow: hidden;
    position: relative;
}

.image-slip {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    box-shadow: none !important;
}

.slip-header {
    position: relative;
    height: 102px;
    border-bottom: 1px solid #ccc;
}

.slip-title {
    font-size: 15px;
}

.slip-price {
    font-size: 50px;
    color: var(--color-green);
    font-weight: 500;
}

.slip-mascot {
    position: absolute;
    right: 0;
    bottom: 6px;
    width: 120px !important;
    box-shadow: none !important;
}

.price-data.slip-line {
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
    margin-bottom: 0;
}

.program-title.slip-line {
    font-size: 16px !important;
    margin: 6px 0px !important;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
}

.slip-add-line {
    width: 85px !important;
    box-shadow: none !important;
    color: rgb(64, 64, 64);
}

.payment-header {
    height: 85px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    padding: 22px 0;
    margin-bottom: 16px;
}

.payment-header.qr-code {
    background: #113566 0% 0% no-repeat padding-box;
    color: white;
}

.payment-header.qr-code {
    background: #404040 0% 0% no-repeat padding-box;
    color: white;
}

.payment-cancel {
    width: 174px;
    height: 38px;
    background: #E3E3E3 0% 0% no-repeat padding-box;
    border: 1px solid #E3E3E3;
    border-radius: 19px;
    display: inline-block;
    padding: 6px 0;
    color: #404040;
    margin-top: 12px;
}

.payment-submit {
    width: 174px;
    height: 38px;
    background: #404040 0% 0% no-repeat padding-box;
    border: 1px solid #404040;
    border-radius: 19px;
    display: inline-block;
    padding: 6px 0;
    color: white;
    cursor: pointer;
    margin-top: 12px;
}

.credit-card-input {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 15px;
    display: block;
    width: 100%;
    height: 48px;
    font-size: 15px;
    padding: 6px 12px;
    margin-bottom: 16px;
}

.credit-card-label {
    display: inline-block;
    padding-left: 12px;
}

.credit-card-row {
    display: table;
    width: 100%;
}

.credit-card-row .credit-card-col {
    width: 50%;
    display: table-cell;
}

.credit-card-row .credit-card-col.left {
    padding-right: 6px;
}

.credit-card-row .credit-card-col.right {
    padding-left: 6px;
}

.payment-header.truemoney {
    background: transparent linear-gradient(180deg, #EF6E09 0%, #F6AF09 100%) 0% 0% no-repeat padding-box;
    color: white;
}

.payment-header.shopee {
    background: #EF4D2E;
    color: white;
}

.payment-header.weChat {
    background: #26A74A;
    color: white;
}

.payment-header.weChat {
    background: #08BF5B;
    color: white;
}

.machien-content iframe {
    height: 350px;
    width: 100%;
    border: none;
}

#trueMoneyIframe {
    height: 600px;
}

#formTrue br {
    display: none !important;
}


.map-data {
    position: absolute;
    left: 50%;
    bottom: -220px;
    /* bottom: 8px; */
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    width: 95%;
    transition: 1s;
    opacity: 0;
}

.map-data.active {
    bottom: 8px;
    opacity: 1;
}

.map-data .map-store {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 3px 3px 10px #00000029;
    border-radius: 20px;
    display: table;
    padding: 12px;
    height: 215px;
}

.map-data .map-store .store-data {
    display: table-cell;
    width: 50%;
    padding: 0 12px;
    vertical-align: bottom;
}

.map-data .map-store .store-data:first-of-type {
    border-right: 1px solid #ccc;
}

.store-title {
    font-size: 14px;
}

.store-name {
    font-size: 15px;
    font-weight: 500;
}

.store-mac {
    width: 100%;
    display: table;
}

.store-mac .store-wash {
    display: table-cell;
    width: 50%;
    text-align: center;
}

.store-mac .store-wash img {
    width: 42px;
}

.store-mac-title {
    color: #593610;
    font-size: 14px;
    text-align: center;
}

.store-mac-count {
    font-size: 22px;
    line-height: 1;
    color: #949598;
}

.store-mac-count span {
    font-size: 30px;
}

.store-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

.text-yellow {
    color: #FFC107;
}

.text-gray {
    color: #BCBEC0;
}

.star-score {
    display: flex;
    font-size: 12px;
}

.store-route {
    font-size: 9px;
    margin-bottom: 16px;
}

.nav-login-program {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    width: 86px;
    height: 28px;
    text-align: center;
    font-size: 13px;
    display: inline-block;
    padding: 4px 0;
}

nav .right {
    position: relative;
    padding-right: 52px;
}

nav .right .nav-menu {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

.result-box {
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 6px;
    box-shadow: 0px 3px 6px #00000029;
}

.result-box .result-list {
    background-color: white;
    color: black;
    display: block;
    padding: 8px;
    text-decoration: none;
    text-align: center;
    transition: .3s;
    font-weight: 300;
}

.result-box .result-list:hover {
    color: var(--color-green);
    font-weight: 500;
}

.text-muted {
    color: #9D9D9D;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.menu-link-contact {
    width: 100%;
    display: table;
    margin-top: 12px;
}

.menu-link-contact .link-contact-social {
    display: table-cell;
    vertical-align: middle;
    width: 25%;
    font-size: 8px;
    color: #404040;
    text-align: center;
    line-height: 1;
}

.menu-link-contact .link-contact-social img {
    width: 33px;
    height: 33px;
    object-fit: cover;
}

#google_map_link img {
    width: 56px;
}

.store-box {
    margin-top: 12px;
    display: table;
    width: 100%;
    border-bottom: 1px solid #404040;
}

.store-box:last-child {
    border-bottom: none;
}

.store-box .store-box-image {
    display: table-cell;
    width: 99px;
}

.store-box .store-box-image img {
    width: 100%;
    height: 87px;
    object-fit: cover;
    border-radius: 10px;
}

.store-box .store-box-content {
    display: table-cell;
    position: relative;
    vertical-align: top;
    font-size: 13px;
    padding: 0 12px;
}

.store-box .store-box-content p {
    margin-top: 0;
    height: 45px;
}

.store-box .store-box-content .nav-google-map {
    display: inline-block;
    background: transparent radial-gradient(closest-side at 50% 50%, var(--color-green) 0%, #27A02F 100%) 0% 0% no-repeat padding-box;
    border-radius: 5px;
    width: 50px;
    height: 25px;
    color: white;
    font-size: 10px;
    padding: 4px;
    text-align: center;
    margin-right: 6px;
}

.store-box .store-box-content .star-score {
    display: inline-flex;
    font-size: 15px;
    margin-left: 6px;
}

.bg-profile {
    background: #F5F5F5 0% 0% no-repeat padding-box;
}

.profile-slide {
    height: 240px;
}

.swiper-slide .image-profile {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin: 15px;
    opacity: 0.5;
    transition: .3s;
}

.swiper-slide.swiper-slide-active .image-profile {
    width: 200px;
    height: 200px;
    opacity: 1;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
}

.navigation-profile-next img,
.navigation-profile-prev img {
    width: 45px;
    height: 45px;
}

.navigation-profile-next {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    z-index: 999;
}

.navigation-profile-prev {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    z-index: 999;
}

.d-none {
    display: none !important;
}

.profile-content {
    padding: 16px 24px;
}

.phone-content {
    padding: 12px 24px;
    text-align: center;
    color: #656565;
    font-size: 22px;
    font-weight: 400;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #656565;
}

.profile-content label {
    color: #656565;
    font-size: 16px;
}

.profile-input {
    position: relative;
    margin: 6px 0;
}

.profile-input input,
.profile-input select {
    width: 361px;
    height: 41px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 5px #00000029;
    border-radius: 21px;
    border: none;
    opacity: 1;
    padding: 8px 22px;
    font-size: 18px;
    font-weight: 300;
}

.profile-input select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.profile-input span {
    position: absolute;
    top: 58%;
    right: 24px;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

.profile-input span img {
    width: 30px;
}

.profile-language-box {
    display: table;
    width: 242px;
    height: 42px;
    margin: 0 auto;
    overflow: hidden;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 1px 1px 2px #00000029;
    border-radius: 21px;
}

.profile-language-box .profile-language-link {
    border-right: 1px solid #000000;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 6px;
    position: relative;
}

.profile-language-box .profile-language-link:last-child {
    border-right: none;
}

.profile-language-box .profile-language-link img {
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.profile-submit {
    width: 100%;
    margin: 0 auto;
    background: var(--color-green) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
    border: none;
    color: white;
    font-size: 18px;
    padding: 6px;
}

.password-content {
    padding: 16px 24px;
}

.password-input {
    position: relative;
    margin-bottom: 12px;
}

.password-input input {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: inset 1px 1px 3px #00000029;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%;
    height: 47px;
    padding: 0 52px;
}

.password-input font {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
}

.password-input font img {
    width: 28px;
}

.password-input span {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    cursor: pointer;
}

.password-input span img {
    width: 28px;
}

.password-input span .eye-open {
    display: block;
}

.password-input span .eye-close {
    display: none;
}

.password-input.show span .eye-open {
    display: none !important;
}

.password-input.show span .eye-close {
    display: block !important;
}

.password-content .password-alert {
    color: red;
    font-size: 14px;
    margin-bottom: 12px;
}

.password-content .password-checklist {
    margin-left: 18px !important;
    color: #727272;
}

.password-content .password-checklist::before {
    border-color: #727272;
}

.password-content .password-checklist.active::after {
    background-color: #727272;
}

.forget-link {
    color: #2C8DB1;
    text-decoration: underline;
    font-size: 14px;
}

.dialog-content.event {
    border-radius: 22px;
    border: 1px solid var(--color-green);
}

.dialog-content.event .bg-dialog {
    margin-bottom: -8px;
}

.dialog-content.event .bg-dialog img {
    border-radius: 22px;
}

.dialog-content.event .bg-dialog .dialog-close {
    position: absolute;
    right: 8px;
    top: 8px;
    display: block;
    z-index: 99;
    cursor: pointer !important;
}

.dialog-content.event .bg-dialog .dialog-close img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.dialog-event {
    background-color: white;
    width: 100%;
    display: table;
    padding: 12px;
    border-radius: 0 0 22px 22px;

}

.dialog-event .event-content {
    display: table-cell;
    vertical-align: middle;
    color: #593610;
    font-size: 15px;
}

.dialog-event .event-button {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.dialog-event .event-button button {
    width: 111px;
    height: 33px;
    text-align: center;
    color: #FFFFFF;
    padding: 12px;
    background: #593610 0% 0% no-repeat padding-box;
    border-radius: 17px;
    padding: 4px;
    border: none;
}




.checkbox-wrapper-31:hover .check {
    stroke-dashoffset: 0;
}

.checkbox-wrapper-31 {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
}

.checkbox-wrapper-31 .background {
    fill: #ccc;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 .stroke {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
    stroke-dashoffset: 100;
    stroke-dasharray: 100;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 .check {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    stroke-dashoffset: 22;
    stroke-dasharray: 22;
    transition: ease all 0.6s;
    -webkit-transition: ease all 0.6s;
}

.checkbox-wrapper-31 input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    -appearance: none;
    -webkit-appearance: none;
}

.checkbox-wrapper-31 input[type=checkbox]:hover {
    cursor: pointer;
}

.checkbox-wrapper-31 input[type=checkbox]:checked+svg .background {
    fill: #6cbe45;
}

.checkbox-wrapper-31 input[type=checkbox]:checked+svg .stroke {
    stroke-dashoffset: 0;
}

.checkbox-wrapper-31 input[type=checkbox]:checked+svg .check {
    stroke-dashoffset: 0;
}

.bg-close {
    background-image: url("../imageMobile/bg-close.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.error-title {
    font-size: 20px;
}

.error-sub {
    font-size: 25px;
    font-weight: 400;
    color: #707070;
}

.close-title {
    display: table;
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 12px 0;
}

.close-title .close-icon {
    width: 65px;
    display: table-cell;
    vertical-align: middle;
}

.close-title .close-icon img {
    width: 61px;
    height: 61px;
    border-radius: 50%;
    object-fit: cover;
}

.close-title .close-content {
    display: table-cell;
    vertical-align: middle;
    color: #404040;
    font-size: 18px;
    padding: 6px 0;
}

.close-title .close-content strong {
    font-size: 20px;
}

.close-title .close-content span {
    font-size: 14px;
}

.d-inline-block {
    display: inline-block;
}

.wash-table {
    display: table;
    width: 100%;
    margin-bottom: -16px;
}

.wash-table .wash-cell {
    display: table-cell;
    width: 50%;
    padding: 16px;
}

.wash-table .wash-cell .wash-box {
    position: relative;
    aspect-ratio: 1.1 / 1;
    border-radius: 15pt;
    background-color: white;
    box-shadow: 0pt 0pt 6pt #00000029;
    cursor: pointer;
}

.wash-table .wash-cell .wash-box.bg-box-wash {
    background-image: url('../imageMobile/(เลือกเครื่องซัก).png');
    background-position: top;
    background-size: 100%;
}

.wash-table .wash-cell .wash-box.bg-box-dry {
    background-image: url('../imageMobile/(เลือกเครื่องอบ).png');
    background-position: top;
    background-size: 100%;
}

.wash-table .wash-cell .wash-box img {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    height: 55%;
}

.wash-table .wash-cell .wash-box span {
    font-size: 15pt;
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
}

.friend-charator {
    width: 60%;
}

.friend-box {
    background-color: white;
    border-radius: 10px;
    padding: 16px;
}

.friend-form {
    margin: 12px 0;
    display: table;
    width: 100%;
}

.friend-form .friend-input {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}

.friend-form .friend-input input {
    width: 100%;
    font-weight: 300;
}

.friend-form .friend-button {
    display: table-cell;
    vertical-align: middle;
    width: 20%;
}

.friend-form .friend-button button {
    width: 100%;
    background-color: var(--color-green);
    height: 67px;
    border-radius: 0 10px 10px 0;
    border: none;
    color: white;
    font-weight: 300;
}

.friend-form .friend-input .icon {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    width: 25px;
}

.coupon-box {
    position: relative;
}

.coupon-box .coupon-icon {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    font-size: 12px;
    width: 18%;
    text-align: center;
    line-height: 1.5;
    color: white;
    font-size: 10px;
}

.coupon-box .coupon-icon img {
    width: 40px;
}

.coupon-box .coupon-image {
    position: absolute;
    top: 48%;
    left: 28%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    font-size: 12px;
    width: 15%;
    line-height: 0;
    aspect-ratio: 2 / 3;
}

.coupon-box .coupon-image img {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    object-fit: contain;
}

.coupon-box .coupon-detail {
    position: absolute;
    top: 10%;
    left: 45%;
    font-size: 12px;
    width: 50%;
    line-height: 1.5
}

.coupon-box .coupon-detail .coupon-title {
    font-weight: 400;
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coupon-box .coupon-detail .coupon-qty .coupon-amount {
    font-weight: 400;
    color: var(--color-green);
}

.coupon-box .coupon-expire {
    position: absolute;
    bottom: 15%;
    left: 45%;
    font-size: 12px;
    width: 50%;
    color: red;
    font-size: 10px;
}

.coupon-link {
    position: absolute;
    bottom: 15%;
    right: 18px;
    color: var(--color-green);
    border: 0.5px solid var(--color-green);
    border-radius: 5px;
    font-size: 10px;
    background-color: white;
    width: 52px;
    height: 19px;
    text-align: center;
}

.coupon-form {
    position: relative;
}

.coupon-form label {
    font-size: 16px;
    margin-top: 12px;
    display: block
}

.coupon-form .coupon-character {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
}

.coupon-form .coupon-character img {
    width: 100%;
}

.select2-container .select2-selection--single {
    height: 36px;
    border: 1px solid var(--color-green);
    border-radius: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    width: 36px;
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-green);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 15px;
    color: rgba(64, 64, 64, 0.3);
}

.coupon-form .browny-checkmark {
    border: 1px solid var(--color-green);
}

.coupon-form .browny-checkbox.addTime {
    font-size: 12px;
    padding-top: 2px;
}

.text-link {
    color: #2C96FF;
}

.history-content {
    padding-top: 74px;
    margin: 18px 16px;
}

.history-menu {
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 27px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 6px;
    display: table;
    margin-bottom: 16px;
}

.history-link {
    display: table-cell;
    width: 50%;
    border-radius: 27px;
    padding: 8px;
    background-color: white;
    border: none;
    cursor: pointer;
    transition: .1s;
}

.history-link.active {
    background: var(--color-green);

    color: white;
}

.history-filter-form {
    display: table;
    width: 100%;
    margin-bottom: 16px;
}

.history-filter-input {
    display: table-cell;
    width: 50%;
    padding: 4px;
    position: relative;
}

.history-filter-input input {
    height: 31px;
    border: 0.5px solid #707070;
    border-radius: 10px;
    width: 100%;
    padding: 0 12px;
}

.history-filter-input .filter-icon {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    width: 20px;
}

.history-box {
    box-shadow: 0px 0px 8px #00000029;
    border-radius: 15px;
    margin-bottom: 16px;
    padding: 8px;
    position: relative;
}

.history-title {
    padding: 4px;
    border-bottom: 1px solid #ccc;
    display: flex;
    font-size: 12px;
    font-weight: 400;
}

.history-title img {
    width: 30px;
    margin-right: 8px;
}

.history-title span {
    padding-top: 5px;
}

.history-detail {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 120px;
}

.history-image {
    display: table-cell;
    width: 30%;
    overflow: hidden;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 80%;
    position: relative;

}

.history-data {
    display: table-cell;
    height: 120px;
    width: 70%;
    vertical-align: middle;
    padding: 12px;
    font-size: 14px;
}

.history-footer {
    display: table;
    width: 100%;
    height: 45px;
    padding-top: 8px;
}

.history-paymentType,
.history-dateTime,
.history-paymentPrice {
    display: table-cell;
    vertical-align: middle;
    width: 33.33%;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

.history-dateTime {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.history-paymentPrice {
    color: var(--color-green);
}

.history-paymentType img {
    max-width: 85px;
    max-height: 36px;
}

.history-lucky {
    position: absolute;
    top: 0;
    right: 20px;
    width: 61px;
    height: 101px;
    background: transparent linear-gradient(180deg, var(--color-green) 0%, #229129 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 0px 0px 14px 14px;
    text-align: center;
    line-height: 1;
    color: white;
}

.history-lucky small {
    font-size: 7px;
}

.history-lucky strong {
    font-size: 11px;
}

.history-lucky h3 {
    font-size: 35px;
    margin-top: 15px;
    margin-bottom: 0;
    color: #FFF14B;
}

.noti-box {
    border: 1px solid #707070;
    border-radius: 15px;
    margin-bottom: 16px;
    display: table;
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
}

.noti-icon {
    padding-left: 12px;
    width: 60px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.noti-icon img {
    max-width: 46px;
    max-height: 46px;
    object-fit: cover;
    display: block;
}

.noti-detail {
    padding: 12px;
    width: auto;
    display: table-cell;
    vertical-align: middle;
}

.friend-image-box {
    position: relative;
}

.friend-image-box .friend-image-charactor {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 68%;
    z-index: 99;
}

.friend-reward-content {
    margin-top: -14.3%;
    margin-left: 16px;
    margin-right: 16px;
}

.friend-reward-box {
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 15px;
    padding: 24px 16px;
    background-color: white;
    z-index: 9;
    position: relative;
}

.friend-phone-box {
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 10px;
    display: table;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 16px;
}

.friend-phone-number {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 4px;
}

.friend-phone-share {
    display: table-cell;
    vertical-align: middle;
    width: 40%;
    padding: 4px;
}

.friend-phone-copy {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
    padding: 4px;
}

.btn-friend-share {
    background: var(--color-green) 0% 0% no-repeat padding-box;
    border-radius: 18px;
    display: block;
    width: 100%;
    text-align: center;
    color: white;
    padding: 6px;
    font-size: 14px;
}

.btn-friend-copy {
    background: var(--color-green) 0% 0% no-repeat padding-box;
    border-radius: 18px;
    display: block;
    width: 100%;
    text-align: center;
    color: white;
    padding: 6px;
    font-size: 14px;
    width: 35px;
    height: 35px;
}

.friend-row {
    display: table;
    width: 100%;
}

.friend-col-30 {
    width: 30%;
    vertical-align: middle;
    display: table-cell;
}

.friend-col-40 {
    width: 40%;
    vertical-align: middle;
    display: table-cell;
}

.friend-col-50 {
    width: 50%;
    vertical-align: middle;
    display: table-cell;
}

.friend-col-60 {
    width: 60%;
    vertical-align: middle;
    display: table-cell;
}

.friend-col-70 {
    width: 70%;
    vertical-align: middle;
    display: table-cell;
}

.friend-all-step {
    padding: 24px 0;
}

.friend-step {
    width: 35px;
    height: 80px;
    padding: 2px;
    display: inline-block;
    position: relative;
}

.friend-step img {
    width: 100% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.friend-reward {
    filter: grayscale(100%);
}

.friend-reward.active {
    filter: grayscale(0%);
}

.friend-reward .friend-reward-check-box {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid gray;
}

.friend-reward .friend-reward-check-box img {
    width: 90%;
    margin-left: 4px;
    display: none;
}

.friend-reward.active .friend-reward-check-box {
    border: 1px solid var(--color-green);
}

.friend-reward.active .friend-reward-check-box img {
    display: block;
}

.toggle {
    cursor: pointer;
    display: inline-block;
}

.toggle-switch {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 40px;
    height: 22px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before,
.toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.toggle-checkbox:checked+.toggle-switch {
    background: var(--color-green);
}

.toggle-checkbox:checked+.toggle-switch:before {
    left: 21px;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.tab-coupon {
    display: table;
    width: 100%;
    margin: 16px 0;
}

.tab-coupon .coupon-menu {
    display: table-cell;
    width: 33.3333%;
    height: 46px;
    background-color: white;
    border: 1px solid #404040;
    font-size: 13px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}

.tab-coupon .coupon-menu:first-of-type {
    border-radius: 14px 0px 0px 14px;
}

.tab-coupon .coupon-menu:last-of-type {
    border-radius: 0px 14px 14px 0px;
}

.tab-coupon .coupon-menu.active {
    background-color: var(--color-green);
    color: white;
}

.coupon-cannotUse {
    filter: grayscale(100%);
}

.coupon-warning {
    display: none;
}

.coupon-cannotUse .coupon-warning {
    display: block;
    position: absolute;
    top: 15px;
    left: 1.5%;
    border-radius: 0px 15px 15px 0px;
    width: 61px;
    height: 21px;
    font-size: 10px;
    text-align: center;
    padding: 2px 6px;
    color: white;
    background: #404040 0% 0% no-repeat padding-box;
}

ul.typeahead.dropdown-menu {
    background-color: white;
    border: 1px solid white;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 24px;
    list-style: none;
    padding: 0;
    position: absolute;
    z-index: 9;
}

ul.typeahead.dropdown-menu li a.dropdown-item {
    display: block;
    padding: 8px 18px;
}


.popup-wash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(110, 110, 110, 0.8);
    display: none;
    z-index: 99999999999;
}

.popup-wash.active {
    display: block;
}

.popup-wash-content {
    width: 100%;
    max-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.popup-wash-bg {
    background-color: white;
    padding: 12px;
    border-radius: 16px;
}

.popup-wash-bg img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0px 3px 6px #00000029;
}

.m-0 {
    margin: 0 !important;
}

.btn-brown {
    width: 100%;
    border-radius: 16px;
    background-color: #593610;
    border: none;
    color: white;
    padding: 6px;
    cursor: pointer;
}

.dialog-content.event {
    overflow: hidden;
}

.dialog-checkbox {
    background: #00000080 0% 0% no-repeat padding-box;
    border-radius: 0px 0px 15px 15px;
    height: 36px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 8px;
    text-align: center;
    z-index: 9;
    padding: 4px;
    color: white;
}

.dialog-checkbox .p1-checkbox {
    display: inline;
    font-size: 13px;
}

.dialog-checkbox .p1-checkbox .checkmark {
    background: #00000000 0% 0% no-repeat padding-box;
    border-radius: 0;
}

.dialog-checkbox .p1-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.border-bottom-green {
    border-bottom: 1px solid var(--color-green);
}

.border-bottom {
    border-bottom: 1px solid var(--color-brow);
}

.postion-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.btn-use-coupon {
    width: 100%;
    display: block;
    text-align: center;
    padding: 6px;
    background-color: gray;
    color: white;
    font-size: 18px;
    border-radius: 12px;
}

.btn-use-coupon.active {
    background-color: var(--color-green);
}

.coupon-table {
    display: table;
    width: 100%;
    border-top: 0.5px solid var(--color-brow);
    border-bottom: 0.5px solid var(--color-brow);
    padding: 4px 0;
}

.coupon-col {
    display: table-cell;
    vertical-align: middle;
    width: 33.33%;
    padding: 12px;
    text-align: center;
    border-right: 0.5px solid var(--color-brow);
}

.coupon-col:last-of-type {
    border-right: none;

}

.title-mission-curve {
    width: 100%;
    height: 200px;
    background-color: #2FBA38;
    position: absolute;
    top: 0;
    left: 0;
}

.title-mission-curve::after {
    content: '';
    width: 110%;
    height: 130px;
    position: absolute;
    left: 50%;
    bottom: -30%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    border-radius: 50%;
    background-color: white;
}

.custome-box-address {
    z-index: 9;
    position: relative;
    background-color: white;
    padding: 16px;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 15px;
}

.custome-box-address .btn-change-address {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 39px;
    height: 39px;
    text-align: center;
    color: white;
    background-color: #2FBA38;
    border-radius: 50%;
    padding: 8px 0;
}

.mission-title {
    background-color: #2FBA38;
    border-radius: 15px;
    /* width: 100%; */
    padding: 4px 16px;
    color: white;
    display: inline-block;
}

.mission-detail {
    display: table;
    width: 100%;
}

.mission-detail .mission-image {
    width: 30%;
    padding: 12px;
    display: table-cell;
    vertical-align: middle;
}

.mission-detail .mission-image img {
    width: 100%;
    box-shadow: 0px 0px 5px #00000029;
    border-radius: 15px;
}

.mission-detail .mission-content {
    width: 70%;
    padding: 12px;
    display: table-cell;
    vertical-align: middle;
}

.mission-row {
    display: table;
    width: 100%;
}

.mission-col {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    position: relative;
}

.mission-form {
    position: fixed;
    bottom: 0;
    max-width: 425px;
    width: 100%;
    height: 210px;
    background-color: white;
    box-shadow: 0px -3px 8px #00000029;
    padding: 16px;
}

.btn-add-address {
    widows: 100%;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 10px;
    display: block;
    text-align: center;
    padding: 30px 0;
    color: #2FBA38;
    font-size: 15px;
}

.btn-add-address svg {
    border: 1px solid #2FBA38;
    border-radius: 50%;
    padding: 2px;
    height: 15px;
    width: 15px;
}

.box-customer-address {
    background-color: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 10px;
    width: 100%;
    display: table;
    font-size: 12px;
    overflow: hidden;
}

.box-customer-address .input-customer-address {
    display: table-cell;
    vertical-align: middle;
    height: 76px;
    width: 10%;
    text-align: center;
    position: relative;
}

.box-customer-address .input-customer-address::after {
    content: '';
    display: inline-block;
    border: 1px solid #707070;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
}

.box-customer-address .input-customer-address::before {
    content: '';
    display: none;
    background-color: #2FBA38;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.box-customer-address.active,
.box-customer-address.active .input-customer-address::after {
    border: 1px solid #2FBA38;
}

.box-customer-address.active .input-customer-address::before {
    display: inline-block;
}

.box-customer-address .detail-customer-address {
    display: table-cell;
    vertical-align: middle;
    height: 76px;
    width: auto;
    padding: 8px;
}

.box-customer-address .button-customer-address {
    display: table-cell;
    vertical-align: middle;
    height: 76px;
    width: 35px;
}

.box-customer-address .button-customer-address a {
    width: 100%;
    color: white;
    background-color: #2FBA38;
    display: block;
    height: 38px;
    text-align: center;
    padding: 10px 0;
}

.box-customer-address .button-customer-address a:first-of-type {
    border-bottom: 0.5px solid white;
}

.border-gray {
    border-color: #4040404D;
}

.charactor-address {
    position: absolute;
    width: 60%;
    bottom: -4px;
    right: 12px;
}

.input-address {
    position: relative;
    font-size: 15px;
}

.input-address span {
    display: none;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    color: red;
    background-color: white;
    padding: 4px;
}

.input-address input {
    border-color: #4040404D;
}

.input-address.nullValue span {
    display: inline-block;
}

.coupon-login {
    width: 47px;
    height: 47px;
    background-color: #2FBA38;
    border-radius: 50%;
    position: absolute;
    top: 48%;
    right: 6%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    padding: 14px 0;
    text-align: center;
}

.coupon-login img {
    width: 19px;
    height: 19px;
}

.box-search-coupon {
    display: table;
    width: 100%;
}

.input-search-coupon {
    width: auto;
    display: table-cell;
    position: relative;
    vertical-align: middle;
    height: 30px;
}

.input-search-coupon span {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
    font-size: 14px;
}

.input-search-coupon input {
    display: block;
    font-size: 14px;
    height: 30px;
    width: 100%;
    border: 0.5px solid #404040;
    border-radius: 16px;
    padding-left: 124px;
}

.btn-search-coupon {
    width: 32px;
    padding-left: 2px;
    display: table-cell;
    vertical-align: middle;
    height: 30px;
    cursor: pointer;
}

.btn-search-coupon button {
    border: 0.5px solid #404040;
    background-color: white;
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.coupon-checkbox {
    position: absolute;
    top: 50%;
    right: 7%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    background-color: white;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.coupon-checkbox::before {
    content: '';
    border: 1px solid #707070;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    transition: .3s;
}

.coupon-box.active .coupon-checkbox::before {
    border: 1px solid #2FBA38;
}

.coupon-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    display: block;
    background-color: #2FBA38;
    transition: .2s;
}

.coupon-box.active .coupon-checkbox::after {
    width: 25px;
    height: 25px;
}

.table-game .step-game {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: 80px;
    height: 80px;
}

.table-game .step-game.small .game-box img {
    width: 60px !important;
    height: 60px !important;
    margin-left: -10px !important;
}

.table-game .step-game.step-sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    right: 0;
}

.step-game .game-box span {
    display: block;
    position: static;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #D5D5D5;
    color: #A7A7A7;
    font-size: 20px;
    text-align: center;
    padding: 4px;
    z-index: 9;
}

.step-game .game-box span.active {
    background-color: #2FBA38 !important;
    color: #FFFBEF !important;
}

.step-game .game-box span img {
    position: absolute;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    top: 50%;
    left: -16%;
    transform: translate(0%, -56%);
    -ms-transform: translate(0%, -56%);
}

.step-game .game-box span::before {
    content: '';
    display: block;
    width: 100%;
    /* height: 7px; */
}

.step-game .game-box img.game-charactor {
    width: 55px;
    z-index: 9;
    position: relative;
    margin-left: -10px
}

.step-game .game-box span::after,
.step-game .game-box font::after {
    content: '';
    border-top: 6px solid #D5D5D5;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    width: 50%;
}

.step-game .game-box font::after {
    width: 100%;
}

.step-game .game-box span.active::after,
.step-game .game-box font.active::after {
    border-top: 6px solid #2FBA38 !important;
}

.step-game .game-box img.game-reward {
    object-fit: cover;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: .3s;
    z-index: 9;
    position: relative;
    margin-left: -10px;
}
.step-game .game-box img.game-reward:last-of-type {
    margin-left: 0;
}
.board-game {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    padding-left: 12px;
}
.box-input-coupon {
    position: relative;
}
.box-input-coupon input {
    box-shadow: 0px 0px 4px #00000029;
    border-radius: 22px;
    height: 44px;
    font-size: 12px;
    border: none;;
}
.box-input-coupon span {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    cursor: pointer;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.8);
    display: none;
    z-index: 99999999999;
}
.loading.active {
    display: block;
}
.loading .loading-content {
    width: 100%;
    max-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2FBA38;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
  }
  .loader::after {
    animation-delay: 1s;
  }
  
  @keyframes animloader {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }