.offcanvas.offcanvas-bottom{background-color: #121212;height: 60vh;justify-content: start;}
.offcanvas.offcanvas-bottom .btn-close{background-image:none;background-image: none; position: relative; height: 24px; width: 24px; padding: 0;}
.signin-box .close-icon{flex-shrink: 0;}
.signin-box .close-icon img{width: 100%;height: 100%;}
.offcanvas-backdrop,.modal-backdrop{background-color: rgba(43, 43, 43, 0.2); backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);-moz-backdrop-filter: blur(8px);opacity: 1 !important;}
.offcanvas-backdrop.show{opacity:1;}

/* common */
.common-theme-btn{border-radius: 30px !important;}
.layout-club-staff-content{width: 100%; display: flex; flex-direction: column; justify-content: center;background-color:#121212;}
.club-staff-container{background: url(../images/club-bg-image.jpg) no-repeat center center / cover; max-width: 767px;margin:0 auto;width: 100%;height:100dvh;width: 100%;overflow: hidden; position: relative;z-index: 0;}
.club-staff-inner{border-radius: 16px 16px 0 0; width: 100%; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: end;}

/*=============== Sign-in panel ===============*/ 
.signin-box {padding: 37px 16px 37px;margin: 20px 0 0; min-height: 50%; max-height: 500px; border-radius: 16px 16px 0 0; overflow-y: auto;font-family: var(--satoshi-med); background: #121212;  color: #FCFCFD; width: 100%; }
.layout-club-staff-content .heading-style-3{color:#FCFCFD;font-size: 20px;line-height: 30px;letter-spacing:0px;}
.signin-box p{color: #BABCC0;}
.signin-box input[type="text"], .signin-box input[type="number"], .signin-box input[type="tel"], .signin-box input[type="email"], .signin-box input[type="password"], .signin-box input[type="date"], .signin-box input[type="search"],.signin-box textarea,.signin-box select {  
    box-shadow:none !important;border: none !important; background-color: #181818 !important;
}
.signin-box input:-webkit-autofill,
.signin-box input:-webkit-autofill:hover,
.signin-box input:-webkit-autofill:focus,
.signin-box input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px #181818 inset !important; }
.signin-box input::placeholder { color: #888; }
.signin-box .message-change-wrap a {color: #BABCC0;}
.signin-box .message-change-wrap a:hover {color:var(--purple);}


/* home */
.club-staff-container:has(.home-header-wrap){background:none;}

/* =============== header start =============== */
.home-header-wrap{padding-block:33px; position: relative;z-index:100;}
.club-home-inner{padding:0 14px 90px;height: 100%;overflow-y: auto;}
.header-logo img{width:46px;margin-bottom:15px;}
.header-menu{display: flex; justify-content: space-between; align-items: center;}
/* header avtar */
.user-avtar{display: flex; align-items: center; gap: 8px;}
.user-avtar img{border-radius:50%;width:24px;height:24px;}
.user-avtar p{color:#A3A7AC;}

/* toggle */
.club-home-inner .menu-toggle { position: relative; width: 24px; height: 24px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; justify-content: center; align-items: center; flex-direction: column; background: none; border: 0; }
.club-home-inner .menu-toggle span { height: 2px; margin: 5px 4px; width: 16px; display: block; background: #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: right center; border-radius: 20px;}
/* nav */
.club-home-inner nav {padding-top: 141px;max-width: 767px; padding-inline: 16px; position: fixed; z-index: 50; top: 0; left: 50%; height: 100dvh; width: 100%; transform:translate(-50%, -20px); background-color: #121212; overflow: hidden; transition: all 0.2s ease-in-out; display: flex; flex-direction: column; justify-content: start; opacity: 0;pointer-events: none;}
.club-home-inner nav > ul {padding-inline: 12px; gap: 26px;border-radius:12px; flex-direction: column; height: fit-content; align-items: center; max-height: 600px; overflow-y: auto; background-color: #181818;}
.club-home-inner nav > ul li a {padding: 12px 0 16px;color:#E8E9EA; border-bottom:1px solid #252525; display: flex;align-items:center;gap:12px;position:relative;}
.club-home-inner nav > ul li a:after{position:absolute;content:"";background:url(../images/white-dropdown-arrow.svg) no-repeat center center / cover;width:22px;height:22px;transform: rotate(-90deg); right: 0;}
.club-home-inner nav > ul li a img {width: 24px;height: 24px;}
.club-home-inner nav > ul li ul li a:after{display:none;}

body.active-on .club-home-inner nav { opacity: 1; transform: translate(-50% , 0%); top: 0; pointer-events: auto;}
.club-home-inner .menu-toggle.active-menu span:first-child {
    transform: rotate(-45deg) translateY(-3px);
}
.club-home-inner .menu-toggle.active-menu span:last-child {
    transform: rotate(45deg) translateY(3px);
}

/*=============== table-content =============== */
.table-select-menu .heading-style-3{font-family: var(--geist); font-weight: 600; letter-spacing: -0.4px; color: var(--white);}
/* form select */
.table-select-menu .select2-container--default .select2-selection--single .select2-selection__rendered,
.table-select-menu .input-inner .form-select,
.table-select-menu select{background-color: #1F1F1F;border: none !important;border-radius:30px !important;}
.select2-dropdown{border-radius: 20px !important;}

/* event inner */
/* .event-inner{padding:20px 6%;border-radius: 14px;margin-bottom: 12px;display: block; background: url(../images/club-home-event-bg-image.png) no-repeat center center / 100% auto;min-height:157px;} */
.event-inner{padding:20px 6%;border-radius: 12px;margin-bottom: 12px;display: block;min-height:157px;position:relative;background-color:#1F1F1F;}
.event-inner::after,
.event-inner::before{content: ""; position: absolute; top: 34%; width: 20px; height: 60px; border-radius: 14px; background: url(../images/club-home-bg-pattern.png) no-repeat center center / contain, #121212;pointer-events: none;}
.event-inner::after{right: 0;}
.event-inner::before{left: 0;transform: rotate(180deg);}
.event-title .p-big{color: var(--purple);font-size: 16px;line-height: 24px;font-family: var(--manrope);font-weight: 600;letter-spacing:-0.32px;}
.table-des{padding-top:16px;margin-top:16px;border-top: 2px dashed #252525;}
.table-des .table-name{color: var(--white);}
.table-des .date-time{color: #47BC84;}
.table-des-number{margin-top: 12px;}
.table-des img{width:20px;height:20px;}
.table-des img{color:#BABCC0;}
.event-inner:last-child { margin-bottom: 0;}

/*=============== scan button ===============*/
.scan-button{padding: 18px 25px;position: absolute; bottom: 0; left: 0; width: 100%; z-index: 100;background-color:rgba(24, 24, 24, 0.5);border-top: 1px solid rgb(131 131 131 / 35%);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);--moz-backdrop-filter: blur(20px);}
.scan-button img{width: 20px;height: 20px;}

/* =============== check in pop up =============== */
.check-in-history h4.heading-style-3{color: var(--purple);}
.check-in-history p{color: var(--white);}
.check-in-history .check-in-div-wrap{display:flex;align-items:center;gap:12px;margin-bottom: 12px;}
.check-in-history .check-in-div-wrap:last-child{margin-bottom:0;}
.check-in-history .check-in-event-name{background-color: #181818;padding:16px;border-radius:12px;flex-grow:1;}
.check-in-history .check-in-event-name p{color:#BABCC0;}
.check-in-history .common-theme-btn{max-width: 127px;min-height: 48px; margin:0;cursor:pointer;flex-shrink: 0;}
.check-in-history .common-fill-gray{border: none !important;background-color:#5C5F66 !important;}


/*=============== scanner-wrap =============== */
.scanner-wrap{text-align:center;width:100%;pointer-events: all;}
.scanner-wrap h5{margin-bottom: 51px;}
.scanner-wrap .scanner-msg{padding:16px;margin-top: 20px;background: #1E1E1EBF; backdrop-filter: blur(22px);-webkit-backdrop-filter: blur(22px);-moz-backdrop-filter: blur(22px);border-radius:14px;color: var(--white);}
.scanner-wrap .scanner-success-msg{color:var(--green);}
.scanner-wrap .scanner-error-msg{color:var(--red);}
.scanner-wrap .scanner-msg h6{font-size: 17px;line-height: 22px;font-weight: 700;letter-spacing:-0.41px;margin-bottom:2px;}
.layout-club-staff-content .modal-dialog{padding-inline:33px;}

/*  */
.scanner-image{position: relative;width: 100%;aspect-ratio:1/1;padding: 28px}
.scanner-image img{height: 100%; width: 100%; object-fit: cover;}
.scanner-image:after{position: absolute;height: 100%;width: 100%;content:'';left:0;top:0;background:url(../images/scanner-four-corner.png) no-repeat center center / 100% 100%;}

/* ===================== event-history ===================== */
.club-home-inner:has(.event-history){padding-bottom: 30px;}
.event-history .nav-tabs{padding: 7px;background: #1F1F1F; border-radius: 30px; border: none;}
.event-history .nav-tabs .nav-item{flex: 1;}
.event-history .nav-tabs .nav-link{padding:10px;color: #FCFCFD;border-radius:40px !important;border: none;font-weight:500;width: 100%;}
.event-history .nav-tabs .nav-item.show .nav-link,
.event-history .nav-tabs .nav-link.active{background-color: var(--purple);color: #FCFCFD !important;}
.event-history-card-wrap{margin-top: 22px;}
.event-history-card-inner{padding:12px; background-color: #181818;border-radius: 8px;margin-top: 12px;}
.event-history-card-inner > div{display: flex;align-items: center;justify-content: space-between;margin-top: 8px;}
.event-history-card-inner > div:first-child,
.event-history-card-inner:first-child{margin-top:0;}
.event-history-card-inner > div p{font-size: 12px;font-weight:400;color: #BABCC0;font-family: var(--satoshi-reg);}
.event-history-card-inner > div p:last-child{color: #FCFCFD;font-weight:500;font-family: var(--satoshi-med);}