:root { --primary-color: #00039c; --secondary-color: #e60b00; --text-color: #2B2A29; --yellow-color: #fe0; --sidebar: rgb(224 225 241); --primary-font: 'Karla'; }
body { font-family: var(--primary-font); font-size: 16px; line-height: 1.5; color: var(--text-color); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/Karla.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.light { font-weight: 300 !important; }
.normal { font-weight: 400 !important; }
.medium { font-weight: 500 !important; }
.semi { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }
.ebold { font-weight: 800 !important; }
.f-black { font-weight: 900 !important; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-18 { font-size: 18px !important; }
.title-font { font-family: var(--title-font); }
.primary-font { font-family: var(--primary-font); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; font-style: normal; font-weight: 700; text-transform: normal; }
.clear { clear: both; }
a:focus, .button:focus { text-decoration: none; outline: none; }
a.p-light { color: var(--primary-light) }
a { color: var(--primary-color); text-decoration: none; }
a:hover, a.p-light:hover { color: var(--secondary-color); }
a, button { color: var(--primary-color); outline: medium none; }
button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0; }
input:focus::-moz-placeholder { opacity: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
.primary-color { color: var(--primary-color) !important; }
.bg-primary-color { background-color: var(--primary-color) !important; }
.border-primary-color { border-color: var(--primary-color) !important; }
.secondary-color { color: var(--secondary-color) !important; }
.bg-secondary-color { background-color: var(--secondary-color) !important; }
.border-secondary-color { border-color: var(--secondary-color) !important; }
.yellow-color { color: var(--yellow-color) !important; }
.text-dark { color: #333 !important; }
.bg-f0 { background: #f0f0f0 !important; }
.bg-f4 { background: #f4f4f4 !important; }
.bg-f5 { background: #f5f5f5 !important; }
.bg-f8 { background: #f8f8f8 !important; }
.bg-ff { background: #FFF7F7 !important; }
.bg-none { background: none !important; }
.button { background: var(--primary-color); color: #fff; -moz-user-select: none; cursor: pointer; display: inline-block; position: relative; padding: 8px 30px; border-radius: 4px; border: 2px solid var(--primary-color); text-transform: uppercase; font-weight: 600; font-size: 14px; }
.button:hover { color: #fff; background: var(--secondary-color); border-color: var(--secondary-color); }
.button1 { background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }
.button1:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.button-white { color: var(--primary-color); background: #fff; border-color: #fff; }
.button-white:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
.button-outline { color: var(--primary-color); background: transparent; border-color: var(--primary-color); }
.button-outline:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.button-outline-white { color: #fff; background: transparent; border-color: #fff; }
.button-outline-white:hover { background: #fff; border-color: #fff; color: var(--primary-color); }
.button-dark { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
.button-dark:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.button-success { background: #54a226; color: #fff; border-color: #54a226 }
.button-success:hover { background: #3a880c; color: #fff; border-color: #3a880c; }
.button-warning {
    color: #fff;
    background-color: #fbbc06;
    border-color: #fbbc06;
}
.button-warning:hover {
    color: #fff;
    background-color: #d7a103;
    border-color: #cb9703;
}
.button-danger {
  color: #fff;
  background-color: #ff3366;
  border-color: #ff3366; 
}
.button-danger:hover {
    color: #fff;
    background-color: #ff0d49;
    border-color: #ff0040; 
}
.button.focus, .button:focus { outline: 0; box-shadow: none !important; }
.button-sm { padding: .45rem 1rem; font-size: .75rem; }
.button.min-width { min-width: 160px; }
.link { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); text-transform: uppercase; font-weight: 600; padding: 0 0 2px; font-size: .8rem; }
.link i { color: var(--primary-color); }
.link:hover { color: var(--secondary-color); border-color: currentColor; }

/* HEALPER
-------------------------- */
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); }
.row > * { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
.g-0, .gx-0 { --bs-gutter-x: 0 }
.g-0, .gy-0 { --bs-gutter-y: 0 }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem }
.g-3, .gx-3 { --bs-gutter-x: 1rem }
.g-3, .gy-3 { --bs-gutter-y: 1rem }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem }
.g-5, .gx-5 { --bs-gutter-x: 3rem }
.g-5, .gy-5 { --bs-gutter-y: 3rem }
.bg-06 { background-color: #F6F7FB; }
.bg-05 { background-color: #EFEEFC; }
.bg-04 { background-color: #E8E5FA; }
.bg-03 { background-color: #ffffff; }
.bg-02 { background-color: #081456; }
.bg-01 { background-color: #EFEEFC; }
.login-screen { display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100vh; }
.terms__conditions { width: 100%; margin: 1rem auto 0; text-align: center; }
.header-icons { display: flex; align-items: center; justify-content: space-between; padding-bottom: 50px; width: 90%; margin: 0 auto; }
.header { display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 20px 0; }
.member-bg { border-radius: 15px; margin: 0 auto; padding: 25px; }
.member-details { margin-top: -70px; }
.member-details img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }
.member-performance { display: flex; align-items: center; justify-content: space-around; margin: 15px auto; gap: 10px; }
.box { background: var(--bs-green); color: #fff; display: flex; align-items: center; width: 100%; padding: 10px; border-radius: 5px; }
.box:nth-child(2) { background: var(--bs-teal); color: #fff; }
.box-text { width: 100%; text-align: left; margin-left: 10px; }
.member-performance p { font-size: 12px; text-transform: uppercase; font-weight: 600; margin: 0px 0 2px; }
.member-performance span { font-size: 20px; font-weight: 700; color: #fff; }
.member-performance::before { content: ''; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 46.63%, rgba(255, 255, 255, 0.1) 100%); width: 1px; height: 69px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.member-booth { display: flex; justify-content: center; margin: 15px 0 0; flex-flow: wrap; gap: 10px; }
.member-booth .button { flex: 0 0 48%; max-width: 48%; padding: 10px 25px; }
.member-booth .button-full {flex: 0 0 90%; max-width: 90%;}
.member-booth img { margin-bottom: 20px; }
button.button.light { background: #fff; }
button.button.dark { background: #081456; margin-top: 12px; }
button.button.dark span { color: #fff; }
.second_chart { margin-top: 20px; }
.breadcrumbs-text { display: flex; align-items: center; padding: 40px 0; width: 90%; margin: 0 auto; }
.breadcrumbs-text h1 { padding: 0; color: #fff; font-size: 24px; font-weight: 500; text-align: center; width: 93%; }
.switch { position: relative; display: inline-block; width: 61px; height: 23px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; width: 53px; }
.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #424292; opacity: 0.5; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.main-text { display: flex; align-items: center; justify-content: space-between; width: 90%; margin: 0 auto; }
.main-text h2 { margin: 0; font-size: 20px; line-height: 22px; color: #0C092A; font-weight: 500; }
.main-text { display: flex; align-items: center; justify-content: space-between; width: 90%; margin: 0 auto; }
.main-text h2 { margin: 0; font-size: 20px; line-height: 22px; color: #0C092A; font-weight: 500; }
.all-booths { border-radius: 32px; width: 90%; margin: 0 auto; overflow: hidden; padding: 20px 0; height: 100vh; }
table { width: 90%; border-collapse: collapse; margin: 0 auto; }
th, td { padding: 10px; text-align: left; }
th { background-color: #f2f2f2; }
tr { cursor: pointer; }
table tbody tr { background: #fff;  }
span.circle-span { border: 1px solid var(--primary-color); color: #fff; background: var(--primary-color); font-weight: 500; font-size: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 100%; }
.leaderboard { height: 100vh; overflow-y: scroll; }
.search-form { padding: 20px 0; width: 90%; margin: 0 auto; }
.search-form input[type="text"] { width: 85%; height: 56px; border-radius: 10px; border: 0; padding: 0 20px; font-size: 16px; color: #858494; }
.search-form form { position: relative; }
.search-form form button { position: absolute; right: 7%; top: 27%; background: transparent; border: 0; padding: 0 0; }
table tbody tr td h5 { font-size: 16px; font-weight: 500; color: #0C092A; }
table tbody tr td h5 span { display: block; color: #858494; font-size: 14px; font-weight: 400; }
.leaderboard-pg { overflow: hidden;    /*height: 100vh;*/ }
.main-booth { padding: 40px 0; border-radius: 32px 32px 0 0; margin-top: 50px; text-align: center; }
.booth-points { display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 0 auto; }
.booth-points .first p { font-size: 12px; margin-bottom: 10px; }
.booth-points .first { max-width: 32%; flex: 32%; padding: 0 15px 20px; }
.booth-points .first span { font-weight: 500; font-size: 20px; }
.clr-icon-box { display: flex; align-items: center; justify-content: space-around; background: #fff; border-radius: 12px; border: 2px solid #EFEEFC; margin-bottom: 15px; padding: 6px 0; cursor: pointer; }
.clr-icon-main { width: 90%; margin: 0 auto; }
.clr-icon-content h4 { margin: 0; font-size: 16px; font-weight: 500; }
.clr-icon-content p { font-size: 12px; margin-top: 5px; }
.clr-icon-box .clr-icon-content { width: 50%; }
.clr-icon-box:last-child { margin: 0; }
.booth-pg.bg-02 { height: 100vh; overflow: hidden; }
.scan-pg h4 { margin: 0; padding-bottom: 20px; font-size: 20px; line-height: 22px; font-weight: 500; }
.scan-pg p { font-size: 16px; line-height: 22px; width: 80%; margin: 0 auto; }
.scan-pg  button.button.dark { justify-content: center; }
.scan-pg { height: 100vh; overflow: hidden; }
.scan-pg .main-booth { height: 100vh; }
img.scanner { padding: 90px 0; }
.logo { text-align: center; }
.otpCode { display: flex; margin-left: -0.5rem; justify-content: center; background: #fff; border: 1px solid #CDCDCD; padding: 24px 0; width: 90%; margin: 0 auto; border-radius: 12px; }
.otpCode__digit { text-align: center; margin-left: 30px; font-size: 18px; line-height: 1.5; padding: 0; background: #C4C4C4; width: 22px; height: 22px; border-radius: 100%; border: 0; }
.otpCode__digit:focus { outline: none; border-color: blue; }
.hide-input { display: none; }
input.otpCode__digit.filled { background: transparent; font-size: 31px; height: 30px; border-radius: 0; }
.enter-code-pg .main-booth { height: 100vh; padding: 0 0; display: flex; align-items: center; justify-content: space-around; flex-direction: column; margin: 0; }
.enter-code-pg { height: 100vh; overflow: hidden; }
.enter-code-pg .main-booth form.wrap { width: 100%; margin-top: -170px; }
.otpCode__digit:first-child { margin: 0; }
.enter-code-pg button.button.dark { justify-content: center; }
.quantity { width: 100%; border: 1px solid #F1F1F1; padding: 11px 0; border-radius: 10px; }
.quantity input.input-box { width: 50%; text-align: center; font-size: 14px; color: #000000; font-weight: 500; border: 0; }
.quantity button { background: transparent; border: 0; width: 40px; height: 32px; padding: 0 0px; }
.quantity button.minus { border-right: 1px solid #F1F1F1; }
.quantity button.plus { border-left: 1px solid #F1F1F1; }
.items-pg table tbody tr { border-color: #f6f7fb; }

/*--------- NAV-BAR ----------*/
.float-nav { position: relative; z-index: 1; transition: all 300ms cubic-bezier(.6, -0.3, .3, 1.3); }
.float-nav.closed { }
.float-nav a { color: #fff; }
.float-nav > a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.float-nav .toggle { transition: all 300ms; font-size: 18px; }
.float-nav.closed .toggle { transform: rotate(0); }
.float-nav ul { position: absolute; top: 100%; left: 0; opacity: 1; transition: all 300ms; list-style: none; padding: 10px; background: rgb(255 255 255 / 32%); text-align: left; min-width: 140px; margin: 0; }
.float-nav.closed ul { opacity: 0; }
.float-nav li { margin-bottom: 0; transition: all 600ms; }
.float-nav li a { padding: 2px 0; display: inline-block; }
.float-nav.closed li { margin-bottom: 1.375em; }
.member-booth .button.light, .member-booth .button.dark { padding-left: 50px; }
.member-booth .button.light::before { content: ''; background: url(../img/icons/icon05.png); background-repeat: no-repeat; background-position: center; position: absolute; left: 20px; top: 15px; width: 24px; height: 24px; }
.member-booth .button.dark::before { content: ''; background: url(../img/icons/icon06.png); background-repeat: no-repeat; background-position: center; position: absolute; left: 20px; top: 15px; width: 24px; height: 24px; }
.header-icons h1 { padding: 0; }
.congratulation-box { background: linear-gradient(180deg, #10B249 0%, #006423 100%); border-radius: 20px; padding: 60px 0 100px; width: 90%; margin: 60px auto; }
.congratulation-box h3 { font-size: 26px; color: #fff; font-weight: 500; margin: 0; }
.congratulation-box p { color: #fff; font-size: 60px; font-weight: 600; }
.congratulation-box span { font-size: 18px; line-height: 28px; color: #fff; }
.congratulation-box img { padding: 60px 0; animation: float 2s ease-in-out infinite; }
.congratulation-pg button.button { justify-content: center; }
@keyframes float {
  0% { transform: translatey(0px); }
  50% { transform: translatey(-20px); }
  100% { transform: translatey(0px); }
}
.btngame::before { background-image: url(../img/icons/icon03.png) !important; width: 21px !important; height: 21px !important; top: 14px !important; }
.games-list .game-box .game-img { width: 100%; height: 120px; overflow: hidden; }
.games-list .game-box .game-img img { width: 100%; height: 120px; border-radius: 27px 27px 0 0; object-fit: cover; }
.games-list .game-box:hover .game-img img { transition: linear 0.8s; }
.games-list .game-box { width: 82%; margin: 0 auto; border-radius: 30px; margin-bottom: 15px; text-align: center; background: #D7D5F6; }
.games-list .game-box .game-content h3 { margin: 0; font-size: 16px; padding: 12px 0; font-weight: 500; color: black; }
.games-list { height: 100vh; overflow-y: scroll; }

/* HEADER 
-------------------------- */
header { position: relative; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07); }
header .navbar { position: unset; }
.navbar-brand { display: flex; align-items: center; }
header .navbar-collapse ul.navbar-nav { position: relative; }
header .navbar-expand-lg .navbar-nav li { padding: 0; }
header .navbar-expand-lg .navbar-nav a { color: var(--text-color); padding: 10px 20px; position: relative; font-size: 18px; font-weight: 600; }
header .navbar-expand-lg .navbar-nav li:last-child a { padding-right: 0 }
header .navbar-expand-lg .navbar-nav a:hover, .navbar-expand-lg .navbar-nav a:focus { color: var(--secondary-color); }
header .navbar-expand-lg .dropdown-menu { border: 0; border-radius: 0; padding: 20px; background: #F8F7F7; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); }
header .navbar-expand-lg .dropdown-menu li { padding: 0px 0 10px; display: block; }
header .navbar-expand-lg .dropdown-menu li:last-child { padding: 0; }
header .navbar-expand-lg .dropdown-menu li a { font-size: 14px; color: var(--text-color); padding: 0px; display: block; }
header .navbar-expand-lg .dropdown-menu li a:hover { color: var(--primary-color); }
.dropdown-toggle::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 700; margin-left: 2px; border: 0 !important; vertical-align: middle; font-size: 12px; color: inherit; transform: rotate(0deg); transition: transform 0.4s; }
.dropdown:hover .dropdown-toggle::after { color: var(--primary-color); transform: rotate(180deg); transition: transform 0.4s; }
@media (min-width:1024px) {
  .navbar-nav .dropdown-menu { position: absolute; display: block; transform: scaleY(0); transform-origin: 0 0; transition: transform 0.4s; left: 0; top: 100%; padding: 0px; }
  .navbar-nav .dropdown:hover > .dropdown-menu { display: block; transform: scaleY(1); transition: transform 0.4s; }
  .navbar-nav .dropdown:hover > .dropdown-menu { margin: 0 !important; }
}
@media (max-width:992px) {
    html, body { overflow-x: hidden; font-size: 14px; line-height: 1.4; }
    .navbar-brand img { height: 60px;}
    .menushow { overflow: hidden; }
    .menushow::after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.59);  z-index: 9;}
    .navbar-toggler { display: flex; border-radius: 0; }
    .mobile-toggle { width: 50px; height: 35px; margin: 0; cursor: pointer; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; border: 0 }
    .mobile-toggle.show { background: transparent; }
    .mobile-toggle svg { fill: var(--secondary-color); }
    .line { fill: none; stroke: var(--secondary-color); stroke-width: 4; transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
    .line1 { stroke-dasharray: 60 207; }
    .show .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke: #fff; }
    .line2 { stroke-dasharray: 60 60; }
    .show .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke: #fff; }
    .line3 { stroke-dasharray: 60 207; }
    .show .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke: #fff; }
    .main-menu { color: var(--primary-color); background: #fff; z-index: 999; top: 0px; left: 0; bottom: 0; width: 320px;  flex-basis: 100%; flex-grow: 1; position: fixed; display: block; transform: translateX(-110%); transition: transform 0.4s; }
    .main-menu.show {transform: translateX(0%); transition: transform 0.4s;}
    .main-menu ul.navbar-nav { margin: 0; flex-direction: column; align-items: flex-start !important; width: 100%; padding: 20px 0; }
    header ul.navbar-nav > li { padding: 0px; }
    .main-menu ul.navbar-nav > li { display: block; width: 100%; }
    header .navbar-expand-lg .navbar-nav li > .btn { margin: 0 20px; }
    header .navbar-expand-lg .navbar-nav li > a { font-size: 18px;  padding: 15px 20px; display: flex; /*justify-content: space-between;*/ align-items: center; }
    header .navbar-nav a:hover, .navbar-nav a:focus, header .navbar-nav a.active { background: transparent; color: var(--primary-color); }
    .dropdown-toggle.show::after { color: var(--primary-color); transform: rotate(180deg); transition: transform 0.4s; }
    header .navbar-nav .dropdown { position: relative; }
    header .navbar-nav .dropdown-menu { box-shadow: none; padding: 15px; }
    header .navbar-nav .dropdown-menu ul { margin-bottom: 20px; }
    header .navbar-nav .dropdown-toggle.show { color: var(--primary-color); }
    header .navbar-expand-lg .dropdown-menu li { padding: 0 0 0px; }
    header .navbar-expand-lg .dropdown-menu li a {font-size: 14px;}
    header ul > li > a { line-height: normal; }
}

/* FOOTER
-------------------- */
.f-logo { background: #fff; display: inline-block; border-radius: 50%; width: 200px; height: 200px; }
.f-logo img { width: 100%; height: 100%; object-fit: contain; padding: 15px; }
.f-box { display: flex; align-items: center; color: #fff; font-size: 18px; }
.f-box .icon { background: rgba(255, 255, 255, 0.9); border-radius: 50%; height: 70px; width: 70px; margin-right: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 30px; }
.f-box .small { text-transform: uppercase; font-weight: 600; }
.footer-contact-info { list-style: none; margin: 0; padding: 0; }
.footer-contact-info li { display: flex; padding: 0 0 10px; }
.footer-contact-info li span { width: 28px; }
.footer-contact-info li a { color: #fff; }
.footer-contact-info li a:hover { color: var(--yellow-color); }
.f-menu li:before { content: "\f101" !important; font-family: "Font Awesome 6 Free"; font-weight: 700; margin: 5px 10px 0 0; font-size: 10px; color: var(--yellow-color); }
.social-media-div a { background: #fff; color: #333; height: 30px; width: 30px; text-align: center; font-size: 13px; line-height: 30px; transition: 0.5s; border-radius: 3px; margin-right: 5px; display: inline-block; }
.social-media-div a:hover { background: var(--yellow-color); color: #000; }
.newsletter-sect .container { border-radius: 50px 50px 0 0; }
@media (max-width: 767px) {
    .newsletter-sect .container { border-radius: 20px 20px 0 0; }
}
.newsletter-sect .button {border-radius: var(--bs-border-radius);}
.newsletter-sect .button:hover {background: var(--primary-color); color: #fff;    border-color: var(--primary-color);}
.section-title * { line-height: 1; }
.section-title h1 { font-size: 44px; font-weight: 700; color: var(--primary-color); }
.section-title h2 { font-size: 34px; font-weight: 700; color: var(--primary-color); }
.section-title h3 { font-size: 28px; font-weight: 700; color: var(--primary-color); }
.section-title h4 { font-size: 22px; font-weight: 700; color: var(--primary-color); }
.section-title h5 { font-size: 18px; font-weight: 700; color: var(--primary-color); }

/* LOGIN
-------------------------- */
.auth-page { max-height: 100vh; align-items: center; }
.auth-form-wrapper { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 68px 100px; height: 100%; justify-content: center; }
.auth-page .page-wrapper { justify-content: center; }
.auth-page .form-group { position: relative; margin-bottom: 1.5rem; }
.auth-page .form-group label { position: absolute; background: #fff; margin: 0; padding: 0 5px; top: -6px; left: 8px; line-height: normal; font-weight: 600; }
.auth-page .form-group .form-control { border: 1px solid #888; height: 50px; background: #f9fafb; padding-top: 15px; border-radius: 4px; }
.login-img { width: 100%; min-height: 100vh; height: 100vh; object-fit: cover; display: block; }
.form-control:focus { box-shadow: none !important; border-color: var(--primary-color); }
input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active { -webkit-box-shadow: 0 0 0 40px white inset; }
.login-block { background: #fff; padding: 40px; border-radius: 10px; }
.noble-ui-logo { font-weight: 700; font-size: 24px; letter-spacing: -1px; color: var(--primary-color); }
@media (max-width:1100px) {
  .auth-form-wrapper { padding: 40px; }
}

/* PAGES 
-------------------------- */
.thead-bg thead th { background-color: var(--primary-color); color: #fff; }
table.dataTable.thead-bg thead th:before, table.dataTable.thead-bg thead th:after { color: #fff; opacity: .6; }
table.dataTable thead th.sorting_asc:before, table.dataTable thead th.sorting_desc:after {opacity: 1;}
.table { margin-bottom: 0; }
.table thead th { border-top: 0; border-bottom-width: 1px; font-weight: bold; font-size: 12px; text-transform: uppercase; color: #fff; }
.table thead th i { margin-left: 0.325rem; }
.table th, .table td { vertical-align: middle; line-height: 1.2; white-space: nowrap; }
.table td img { width: 36px; height: 36px;  }
.table td .badge { margin-bottom: 0; }
.table.table-borderless { border: none; }
.table.table-borderless tr, .table.table-borderless td, .table.table-borderless th { border: none; }
.table.table-bordered { border-top: 1px solid #e8ebf1; }
.table.table-dark thead tr th { color: #fff; }
.page-item .page-link { color: var(--text-color);}
.page-item.active .page-link { background: var(--primary-color);border-color: var(--primary-color); color: #fff;}
.table th, .table td { padding: 0.75rem; }
.button-icon { width: 34px; height: 32px; display: inline-block; border: 0; box-shadow: none; font-size: 12px; border-radius: 4px; text-align: center; line-height: 18px; padding: 5px; margin: 0 5px 0 0; vertical-align: middle; }
.table .button-icon svg { width: 16px; }
.popover { max-width: 300px !important; overflow: hidden; }
.popover-body img { width: 100%; object-fit: contain; height: 100% }
.form-group { margin-bottom: 1rem; }
.form-group label { text-transform: uppercase; font-weight: 700; font-size: 12px; }
.card { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border: 0; }
.card .card-title { color: var(--primary-color); margin-bottom: 1.5rem; font-size: 28px; font-weight: 600; border-bottom: 2px solid #e8ebf1; padding: 0 0 1rem; }
.form-check { position: relative; }
.form-check .form-check-label { min-height: 18px; display: block; margin-left: 1.75rem; font-size: 0.875rem; line-height: 1.5; }
.form-check .form-check-label input { position: absolute; top: 0; left: 0; margin-left: 0; margin-top: 0; z-index: 1; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }
.form-check .form-check-label input[type="checkbox"] + .input-frame::before { content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 2px; border: solid var(--primary-color); border-width: 2px; -webkit-transition: all; -moz-transition: all; -ms-transition: all; -o-transition: all; transition: all; transition-duration: 0s; transition-duration: 0s; -webkit-transition-duration: 250ms; transition-duration: 250ms; }
.form-check .form-check-label input[type="checkbox"] + .input-frame::after { -webkit-transition: all; -moz-transition: all; -ms-transition: all; -o-transition: all; transition: all; transition-duration: 0s; transition-duration: 0s; -webkit-transition-duration: 250ms; transition-duration: 250ms; font-family: "Font Awesome 6 Free"; content: '\f00c'; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); font-size: .8rem; font-weight: bold; color: #ffffff; position: absolute; top: 0; left: 2px; }
.form-check .form-check-label input[type="checkbox"]:checked + .input-frame::before { background: var(--primary-color); border-width: 0; }
.form-check .form-check-label input[type="checkbox"]:checked + .input-frame::after { width: 18px; opacity: 1; line-height: 18px; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.dt-buttons .btn { background: var(--sidebar); }



@media (max-width: 480px) {
    .member-booth .button {flex: 0 0 80%; max-width: 80%;}
}