/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com16(2
File: Custom Css File
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap");
:root {--vz-font-sans-serif:"Noto", "Sans", "Thai", sans-serif;}
.shape {position: absolute;bottom: 0;right: 0;left: 0;z-index: 1;pointer-events: none}
.shape svg {width: 100%;height: auto;   
}

.bg-qrcode {background-color: #0e3d67!important}
.bg-warning-subtle {background-color: #fef4e4!important}
.crm-widget .bg-primary .text-muted{color:#fff !important}
.crm-widget .bg-primary .counter-value{color:#fff !important}
.scroll-container {overflow-x: auto; white-space: nowrap;}
.col-custom {min-width: 7.14%;width:auto;cursor: pointer;}
.opt-txt{min-height:42px;line-height:1.2;}

.kiosk .app-menu,
.kiosk #page-topbar{display: none!important;}
.kiosk .main-content{margin-left:0!important}
.kiosk .footer{left:0 !important;text-align: center;}
.kiosk .page-content{padding:1.5rem 1rem}
.top-btn-area{position: relative;z-index: 100;}

.icon-load{text-align:center;margin-top:-55px}
.icon-load lord-icon{width:100px!important;height:100px!important}

.camera-wrap{width: 100%;margin:2rem auto 0;height:calc(100vh - 380px);text-align:center;background:#f5f5f517;border-radius:20px;padding:2rem 0}
.search-wrap input{padding-left:1.8rem}
.search-icon{position: absolute;left:.7rem;top:.6rem;}

.gate .app-menu,
.gate .app-search{display: none!important;}
.gate #page-topbar{left:calc(1.5rem - 12px)!important}
.gate .main-content{margin-left:0!important}
.gate .footer{left:0 !important;text-align: center;}
.gate .camera-wrap{height:calc(100vh - 430px);margin:0 0 .5rem 0}
.gate .topnav-hamburger{display: none !important;}

.select-item-wrap a{width:calc((100% - 3rem) / 7);text-align: center;padding:.25rem}
.select-item-wrap a.btn-light{color:#878a99!important}
.select-item-wrap a + a{margin-left:.5rem}

.mweb #page-topbar,
.mweb footer{left:0 !important}
.mweb .navbar-menu{display: none;}
.mweb .navbar-header{padding-left:calc(3rem / 2)}
.mweb-wrap{padding-bottom:140px;margin-left:0 !important}
.mweb-wrap .page-title-box{margin-top:0px}
.mweb-wrap footer{position:fixed;bottom:0;z-index:20}
.mweb-wrap .fixed-bottom{bottom:60px}
.mweb-wrap .fixed-bottom2{bottom:0px}
.mweb-wrap .page-content{padding-bottom:10px}
.row.mweb .input-step input{width:2rem}

.ribbon-box h5{position: relative; z-index:10}
.ribbon-box .card-body{padding:1rem .5rem}

.bg-overlay-mweb {background-image: url("../images/bg-mweb.jpg");background-color: transparent;background-position: center;background-size: cover;background-attachment: fixed;opacity: 0.9;}
.bg-overlay-myticket {background-image: url("../images/bg-myticket.jpg");background-color: transparent;background-position: center;background-size: cover;background-attachment: fixed;opacity: 1;}
.bg-overlay-kiosk {background-image: url("../images/kiosk_bg.jpg");background-color: transparent;background-position: center;background-size: cover;background-attachment: fixed;opacity: 1;}
.bg-overlay-reciept {background-image: url("../images/bg-mweb2.jpg");background-color: transparent;background-position: center;background-size: cover;background-attachment: fixed;opacity: 1;}
.bg-overlay-mask{background: rgb(0, 0, 0);background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 20%, rgb(0, 0, 0, 0.2) 40%, rgb(0, 0, 0, 0.3) 100%);}

.h-card {border:1px solid var(--vz-secondary);margin-bottom:20px}
.h-150{height:150px}

@media (max-width: 576px) {
    .m-hide{display:none}
    .profile-setting-img{height:200px}
    .shape{bottom:-2px}
}