/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Sarabun:wght@100;200;400&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500&display=swap');
body {
    font-family: 'Noto Sans Thai', sans-serif;
    padding: 0px !important;
    /* font-family: 'Sarabun', sans-serif; */
}

section {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

#play-games {
    padding-bottom: 0px;
    /* height: calc(70vh - 60px); */
}

section #map {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
}

section .boxPlay {
    display: none;
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    /* display: flex; */
    justify-content: center;
    /* background: rgba(240, 82, 32, 0.7); */
}

section .boxPlay .container {
    margin: auto;
}

section>.container {
    /* padding: 20px 0; */
    /* padding-top: 60px; */
}


/* section .container {
    padding-top: 60px;
} */

.header-bg {
    /* background-image: url("https://img.iproperty.com.my/angel-legacy/1110x624-crop/static/2020/07/shutterstock_647714323.jpg");
    background-size: cover;
    background-position: center;
    height: 400px; */
    /* Adjust the height of the header */
    /* padding-top: 60px; */
    margin-top: 5px;
}

#navbar {
    /* margin-top: 50px; */
}

#map {
    /* display: none; */
    position: absolute;
    height: 1px;
    width: 1px;
    top: -9999px;
}

.grecaptcha-badge {
    left: -999px;
}


/* .header-bg .container {
    position: relative;
    height: 100%;
}

.header-bg .header-text {
    position: absolute;
    top: 50%;
    text-align: center;
    color: white;
    left: 50%;
    transform: translateX(-50%);
} */


/* 
.header-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: white;
} */


/* 
.buttonQr {
    position: absolute;
    width: 250px;
    left: 50%;
    margin-left: -125px;
} */

#cameraContainer {
    position: relative;
}

#qrCanvasContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#scannerVideo {
    width: 100%;
}

#qrCanvas {
    height: 99%;
    width: 100%;
    opacity: 1;
}

#rewards {
    /* background: #642f90;
    background-image: url("https://blog.empuls.io/content/images/size/w692/2022/01/what-are-employee-rewards-and-recognition.png"); */
    background-size: cover;
    background-position: center top;
}


/* #rewards .content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 20px;
} */

#rewards .content h2 {
    color: #5e2c88;
}

#how-to-play {
    /* background-image: url("https://assets.brandinside.asia/uploads/2022/12/BTS-1-1536x1051.jpg"); */
    background-size: cover;
    background-position: center top;
}

#how-to-play .content {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px;
    border-radius: 20px;
}

#how-to-play .content h2 {
    color: #5e2c88;
}


/* log in  */

.nav-tabs {
    justify-content: flex-end;
    color: #642f90;
}

.nav-tabs .nav-link {
    color: #b4b4b4;
}

a.nav-link {
    font-size: 20px;
    color: #fff;
}

.nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #642f90;
}

.form-floating label {
    color: #ababab;
}

.form-floating label i {
    width: 20px;
    margin-right: 5px;
    /* color: #787878; */
    text-align: center;
    border-right: 1px solid #f0f0f0;
    padding-right: 25px;
}

.btn {
    background-color: #642f90;
    color: #fff;
    transition: all .7s;
    border-color: #5e2c88;
    border-radius: 25px;
}

.btn:hover {
    color: #642f90;
    background-color: #fff;
    border-color: #642f90;
}

.swal2-styled.swal2-confirm {
    background-color: #642f90 !important;
    color: #fff;
    transition: all .7s;
    border-color: #5e2c88 !important;
}

.boxstamps {
    width: 100%;
    height: 100%;
    /* height: 150px; */
    text-align: center;
    /* background: #5e2c88; */
    margin-bottom: 5px;
}

.itemstamp {
    width: 100%;
    height: 100%;
    display: flex;
}

.stamps_left {
    background-image: url("/front/template/default/assets/img/icon/4481191.png");
    background-size: cover;
    background-position: left;
    width: 50%;
    height: 100%;
    filter: grayscale(10%);
    opacity: 0.5;
}

.stamps_right {
    background-image: url("/front/template/default/assets/img/icon/4481191.png");
    background-size: cover;
    background-position: right;
    width: 50%;
    height: 100%;
    filter: grayscale(10%);
    opacity: 0.5;
}

.boxstatus_msg {
    border: 1px solid #5e2c88;
    margin-bottom: 15px;
    background: #5e2c88;
    color: #fff;
    border-radius: 20px;
    /* font-size: 20px; */
}

.boxstatus_msg h2 {
    font-style: italic;
}

.stamps_left.active,
.stamps_right.active {
    opacity: 1;
    filter: grayscale(0);
}

#contact {
    background: #642a66;
    color: #fff;
    margin: 0px;
    /* padding: 50px; */
}

.modal-header h5 {
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #642f90;
    font-size: 30px;
}

#form_stamp .box_stamps {
    background: #e2d9ed;
    border-radius: 10px;
}

.modal-header {
    border-bottom: none;
}

#form_stamp .modal-body,
#form_login_modal .modal-body,
#form_regis_modal .modal-body {
    padding: 0px;
}

#form_stamp .row>*,
#form_login_modal .row>*,
#form_regis_modal .row>* {
    padding: 0px;
}

#form_login_modal .tab-content,
#form_regis_modal .tab-content {
    width: 80%;
    padding-bottom: 100px;
    /* background: linear-gradient(0deg, rgba(147, 50, 147, 1) 0%, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 1) 100%); */
}

#form_stamp .tab-content {
    width: 90%;
    padding-bottom: 100px;
}

.boxform {
    position: relative;
}

.boxform .bar_bottom {
    background: linear-gradient(0deg, rgb(147, 50, 147) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.form-control {
    border-radius: 25px;
    background: #ebe8f3;
}

.form-control:not(:placeholder-shown)~label::after {
    background: rgba(255, 255, 255, 0) !important;
    color: #fff;
}

.circular-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #642f90;
    /* Change the color here */
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
}

.circular-checkbox:checked {
    background-color: #642f90;
    /* Change the color here */
}

.circular-checkbox:checked:after {
    content: "\2713";
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Optional: You can style the label text here */

.form-check-label {
    margin-left: 10px;
}

.form-switch .form-check-input {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    margin-top: 0px;
}

.form-switch {
    padding-left: 10px;
    color: #5e2c88;
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: none;
}

.form-check-input:checked {
    border: 2px solid #642f90;
}

.linkregis {
    color: #5e2c88;
}

.topmenu {
    margin-bottom: 0px;
}

.nav-link:focus,
.nav-link:hover {
    color: #af70dc;
}

.topmenu {
    list-style: none;
}

.navbar {
    background: #393939;
}

@media only screen and (max-width: 600px) {
    .navbar {
        background: #fff;
        color: #393939;
    }
    .navbar a {
        color: #fff;
        background: #393939;
        padding: 5px 12px;
        font-size: 15px;
        border-radius: 12px;
    }
    .navbar ul {
        padding-left: 0px;
    }
    .boxform .bar_bottom {
        height: 80px;
    }
}

#play-games img {
    cursor: pointer;
}

.close_modal {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 20px;
    border: 1px solid;
    border-radius: 50%;
    padding: 5px;
    z-index: 999;
}

.popupimg {
    margin: 0px !important;
}

.popupimg_main {
    padding: 0px !important;
}

#sidebarMenu a.nav-link {
    font-size: auto;
    color: #393939
}

#sidebarMenu a.nav-link.active {
    color: #642a66;
}

.checkcode {
    position: absolute;
    left: -99999px;
}

.textAlignVer {
    display: block;
    filter: flipv fliph;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: relative;
    width: 20px;
    white-space: nowrap;
    font-size: 15px;
    margin-bottom: 10px;
}

.statusstation {
    padding: 2px;
    color: #ececec;
}

tr:nth-of-type(2n+1) .statusstation {
    padding: 2px;
    color: #fff;
}

.statusstation .active {
    color: green;
}

.fancybox-caption {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    text-align: center;
    /* Center text content */
    background-color: rgba(0, 0, 0, 0.8);
    /* Adjust caption background color */
    color: #fff;
    /* Adjust caption text color */
    padding: 10px;
    overflow: unset;
}

.fancybox-caption__body {
    overflow: unset !important;
}

.downloadImg {
    padding: 5px 10px;
    background: #642a66;
    color: #fff;
    border-radius: 20px;
}