/* GENERATED by tool/build_frame_css.py from homepage.css - do not edit.
 *
 * The redesign's header, drawer and footer, for pages whose content is still
 * the theme's: the account area, "Post a job", and anything else the theme
 * draws. The theme's own stylesheet stays loaded on those pages, so every
 * rule here is scoped to our three elements and nothing resets the document.
 */

/* What homepage.css gets from its document-wide reset, given here to our
   three elements only. */
:is(.site-header, .drawer, .site-footer),
:is(.site-header, .drawer, .site-footer) * {
	box-sizing: border-box;
}

:is(.site-header, .drawer, .site-footer) {
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	/* The theme's body is weight 300, and everything here that does not set
	   its own weight would inherit it: the same footer, visibly thinner on a
	   login page than on the homepage. */
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

:is(.site-header, .drawer, .site-footer) :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme's custom CSS gives every heading its own font. Ours are part of
   the frame and take the frame's. */
:is(.site-header, .drawer, .site-footer) :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-family: inherit !important;
}

:is(.site-header, .drawer, .site-footer) a,
:is(.site-header, .drawer, .site-footer) a:hover,
:is(.site-header, .drawer, .site-footer) a:focus {
	text-decoration: none;
}

:is(.site-header, .drawer, .site-footer) img {
	display: block;
	max-width: 100%;
}

:is(.site-header, .drawer, .site-footer) button {
	font: inherit;
	color: inherit;
}

.site-header a { color: #071a2f; }
.site-footer a { color: inherit; }
.drawer a { color: #0f1f33; }

/* The header and footer are written for Font Awesome 6. These pages load the
   theme's Font Awesome 5, and loading both would re-point every icon in the
   theme's dashboards at a font with different glyph names. So the thirteen
   icons the frame uses are drawn from the font that is already here: 6's
   class names, 5's font, and the code points the two share.

   (The first attempt assumed version 4 and named a font that was not on the
   page at all; every icon was an empty box. The version was read from the
   page's own font list, not guessed, the second time.) */
:is(.site-header, .drawer, .site-footer) :is(.fa-solid, .fa-regular) {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

:is(.site-header, .drawer, .site-footer) .fa-solid { font-weight: 900; }
:is(.site-header, .drawer, .site-footer) .fa-regular { font-weight: 400; }

:is(.site-header, .drawer, .site-footer) .fa-chevron-down::before { content: "\f078"; }
:is(.site-header, .drawer, .site-footer) .fa-magnifying-glass::before { content: "\f002"; }
:is(.site-header, .drawer, .site-footer) .fa-wand-magic-sparkles::before { content: "\f0d0"; }
:is(.site-header, .drawer, .site-footer) .fa-file-lines::before { content: "\f15c"; }
:is(.site-header, .drawer, .site-footer) .fa-bullhorn::before { content: "\f0a1"; }
:is(.site-header, .drawer, .site-footer) .fa-users::before { content: "\f0c0"; }
:is(.site-header, .drawer, .site-footer) .fa-plus::before { content: "\f067"; }
:is(.site-header, .drawer, .site-footer) .fa-user::before { content: "\f007"; }
:is(.site-header, .drawer, .site-footer) .fa-building::before { content: "\f1ad"; }
:is(.site-header, .drawer, .site-footer) .fa-circle-question::before { content: "\f059"; }
:is(.site-header, .drawer, .site-footer) .fa-envelope::before { content: "\f0e0"; }
:is(.site-header, .drawer, .site-footer) .fa-xmark::before { content: "\f00d"; }
:is(.site-header, .drawer, .site-footer) .fa-arrow-up::before { content: "\f062"; }

/* The band's own needs, which homepage.css takes from its document reset. */
.page-head {
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}

.page-head * {
	box-sizing: border-box;
}

/* The theme's custom CSS sets size, colour and weight on bare elements with
   !important - every <p> on the site is forced to 15px black. The band's
   title is the one place here that has to win that argument outright. */
.page-head .page-title {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: clamp(28px, 3.7vw, 46px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	text-transform: none !important;
}

.page-head .crumbs,
.page-head .crumbs span,
.page-head .crumbs a {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #8ea3be !important;
}

.page-head .crumbs [aria-current] {
	color: #d7e3f1 !important;
}

.page-head .crumbs a,
.page-head .crumbs a:hover {
	color: inherit;
	text-decoration: none;
}

.page-head .crumbs-sep {
	opacity: 0.6;
}

/* ---- from homepage.css -------------------------------------------------- */

:root {--ink: #071a2f; --ink-2: #0d2742; --ink-3: #16385c; --teal: #00a896; --teal-d: #00877a; --teal-l: #2dd4bf; --cyan: #38bdf8; --sun: #ffb454; --bg: #f3f6fa; --surface: #ffffff; --soft: #eef4f8; --line: #e1e8f0; --text: #0f1f33; --muted: #5a6b82; --faint: #8a99ad; --r-sm: 10px; --r: 18px; --r-lg: 26px; --sh-1: 0 1px 2px rgba(7, 26, 47, 0.05), 0 2px 10px rgba(7, 26, 47, 0.04); --sh-2: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1); --sh-3: 0 18px 40px rgba(2, 12, 27, 0.28), 0 40px 90px rgba(2, 12, 27, 0.32); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --header-h: 82px;}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
:is(.site-header, .drawer, .site-footer) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font-weight: 700; font-size: 14.8px; text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s, border-color 0.2s; }
:is(.site-header, .drawer, .site-footer) .btn:active { transform: scale(0.97); }
:is(.site-header, .drawer, .site-footer) .btn-primary { color: #fff; background: linear-gradient(135deg, var(--teal) 0%, #009ec2 100%); box-shadow: 0 6px 18px rgba(0, 168, 150, 0.32); }
:is(.site-header, .drawer, .site-footer) .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s var(--ease); }
:is(.site-header, .drawer, .site-footer) .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 168, 150, 0.4); }
:is(.site-header, .drawer, .site-footer) .btn-primary:hover::after { transform: translateX(120%); }
:is(.site-header, .drawer, .site-footer) .btn-ghost { color: var(--ink); }
:is(.site-header, .drawer, .site-footer) .btn-ghost:hover { background: var(--soft); }
:is(.site-header, .drawer, .site-footer) .btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
:is(.site-header, .drawer, .site-footer) .btn-outline:hover { border-color: var(--teal); color: var(--teal-d); }
:is(.site-header, .drawer, .site-footer) .btn-light { background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
:is(.site-header, .drawer, .site-footer) .btn-light:hover { transform: translateY(-2px); }
:is(.site-header, .drawer, .site-footer) .btn-block { width: 100%; }
.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(225, 232, 240, 0.7); transition: box-shadow 0.3s, background 0.3s; }
.site-header.scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 30px rgba(7, 26, 47, 0.09); }
.header-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: var(--header-h); display: flex; align-items: center; gap: 24px; transition: height 0.3s var(--ease); }
.scrolled .header-inner { height: 66px; }
:is(.site-header, .drawer, .site-footer) .brand { display: inline-flex; align-items: center; flex-shrink: 0; }
:is(.site-header, .drawer, .site-footer) .brand img { height: 65px; width: auto; transition: height 0.3s var(--ease); }
.scrolled .brand img { height: 48px; }
:is(.site-header, .drawer, .site-footer) .main-nav { margin-right: auto; }
:is(.site-header, .drawer, .site-footer) .main-nav > ul { display: flex; align-items: center; gap: 2px; }
:is(.site-header, .drawer, .site-footer) .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 0; background: none; border-radius: 10px; font-weight: 600; font-size: 14.8px; color: var(--ink); text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
:is(.site-header, .drawer, .site-footer) .nav-link:hover,
:is(.site-header, .drawer, .site-footer) .has-menu:focus-within > .nav-link { background: var(--soft); color: var(--teal-d); }
:is(.site-header, .drawer, .site-footer) .nav-link .fa-chevron-down { font-size: 9.92px; transition: transform 0.3s var(--ease); }
:is(.site-header, .drawer, .site-footer) .has-menu { position: relative; }
:is(.site-header, .drawer, .site-footer) .has-menu:hover .fa-chevron-down,
:is(.site-header, .drawer, .site-footer) .has-menu:focus-within .fa-chevron-down { transform: rotate(180deg); }
:is(.site-header, .drawer, .site-footer) .nav-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); transform-origin: top left; transition: opacity 0.22s, transform 0.28s var(--ease), visibility 0.22s; }
:is(.site-header, .drawer, .site-footer) .nav-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
:is(.site-header, .drawer, .site-footer) .has-menu:hover .nav-menu,
:is(.site-header, .drawer, .site-footer) .has-menu:focus-within .nav-menu,
:is(.site-header, .drawer, .site-footer) .has-menu.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
:is(.site-header, .drawer, .site-footer) .nav-menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14.4px; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s; }
:is(.site-header, .drawer, .site-footer) .nav-menu a i { width: 18px; color: var(--teal); text-align: center; }
:is(.site-header, .drawer, .site-footer) .nav-menu a:hover { background: var(--soft); color: var(--teal-d); transform: translateX(3px); }
.acct .nav-menu { right: 0; left: auto; min-width: 286px; transform-origin: top right; }
.acct-toggle { gap: 10px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.acct-avatar { display: block; flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--soft); }
.acct-avatar img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover; }
.acct-name { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acct-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 11.2px; font-weight: 800; line-height: 1; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); }
.acct-head .acct-avatar,
.drawer-acct .acct-avatar { width: 44px; height: 44px; }
.acct-who { display: flex; flex-direction: column; min-width: 0; }
.acct-who-name { overflow: hidden; font-size: 15.2px; font-weight: 800; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.acct-role { font-size: 12.48px; font-weight: 600; color: var(--muted); }
.acct-sep { height: 1px; margin: 6px 12px; background: var(--line); }
.acct-out { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.acct-out a,
.acct-out a i { color: #b42323; }
.acct-out a:hover { background: #fdf1f1; color: #b42323; }
.drawer-acct { display: flex; align-items: center; gap: 12px; margin: 6px 4px 8px; padding: 12px; border-radius: 16px; background: var(--soft); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(7, 26, 47, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; }
.drawer-scrim.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(88vw, 350px); display: flex; flex-direction: column; background: #fff; box-shadow: -20px 0 60px rgba(7, 26, 47, 0.25); transform: translateX(105%); visibility: hidden; transition: transform 0.42s var(--ease), visibility 0.42s; }
.drawer-open #cjg-bot,
.drawer-open #hu-revoke { display: none !important; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 38px; width: auto; }
.drawer-close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--soft); font-size: 17.6px; cursor: pointer; }
.drawer-nav { flex: 1; overflow-y: auto; padding: 10px 14px 18px; }
.drawer-label { margin: 16px 8px 6px; font-size: 11.2px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.drawer-nav a { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.drawer-nav a i { width: 20px; text-align: center; color: var(--teal); }
.drawer-nav a:active { background: var(--soft); }
.drawer.open .drawer-nav > * { animation: drawer-in 0.5s var(--ease) both; }
.drawer.open .drawer-nav > *:nth-child(1) { animation-delay: 0.06s; }
.drawer.open .drawer-nav > *:nth-child(2) { animation-delay: 0.09s; }
.drawer.open .drawer-nav > *:nth-child(3) { animation-delay: 0.12s; }
.drawer.open .drawer-nav > *:nth-child(4) { animation-delay: 0.15s; }
.drawer.open .drawer-nav > *:nth-child(5) { animation-delay: 0.18s; }
.drawer.open .drawer-nav > *:nth-child(6) { animation-delay: 0.21s; }
.drawer.open .drawer-nav > *:nth-child(7) { animation-delay: 0.24s; }
.drawer.open .drawer-nav > *:nth-child(8) { animation-delay: 0.27s; }
.drawer.open .drawer-nav > *:nth-child(n + 9) { animation-delay: 0.3s; }
@keyframes drawer-in {from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; }}
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.hero { position: relative; isolation: isolate; color: #fff; background: linear-gradient(140deg, #04101f 0%, var(--ink) 38%, #0a2f4a 72%, #0a4650 100%); padding: clamp(40px, 6vw, 84px) 0 clamp(96px, 10vw, 150px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.aurora-1 { width: 46vw; height: 46vw; min-width: 360px; min-height: 360px; left: -10vw; top: -16vw; background: radial-gradient(circle, #00c2a8 0%, transparent 68%); animation: drift-1 22s ease-in-out infinite alternate; }
.aurora-2 { width: 40vw; height: 40vw; min-width: 320px; min-height: 320px; right: -8vw; top: 4vw; background: radial-gradient(circle, #1f8fff 0%, transparent 66%); opacity: 0.4; animation: drift-2 27s ease-in-out infinite alternate; }
.aurora-3 { width: 26vw; height: 26vw; min-width: 220px; min-height: 220px; left: 42%; bottom: -10vw; background: radial-gradient(circle, var(--sun) 0%, transparent 68%); opacity: 0.2; animation: drift-3 19s ease-in-out infinite alternate; }
@keyframes drift-1 {to { transform: translate3d(9vw, 7vw, 0) scale(1.18); }}
@keyframes drift-2 {to { transform: translate3d(-10vw, 9vw, 0) scale(0.86); }}
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 78%); }
.hero-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); display: block; }
.hero-wave path { fill: var(--bg); }
:is(.site-header, .drawer, .site-footer) .stores { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:is(.site-header, .drawer, .site-footer) .stores a { transition: transform 0.25s var(--ease); }
:is(.site-header, .drawer, .site-footer) .stores a:hover { transform: translateY(-2px); }
:is(.site-header, .drawer, .site-footer) .stores img { height: 38px; width: auto; border-radius: 7px; }
.site-footer { background: var(--ink); color: #a9bad0; }
.footer-inner { max-width: 1320px; margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 36px; }
.footer-brand > img { height: 75px; width: auto; }
.footer-tagline { margin-top: 16px; font-size: 16.96px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }
.footer-about { margin-top: 8px; max-width: 36ch; font-size: 14.4px; line-height: 1.6; color: #a9bad0; }
.site-footer h3 { margin-bottom: 12px; font-size: 11.52px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; }
.site-footer nav a { display: block; padding: 6px 0; font-size: 14.4px; text-decoration: none; transition: color 0.2s, transform 0.25s var(--ease); }
.site-footer nav a:hover { color: var(--teal-l); transform: translateX(4px); }
.footer-bottom { max-width: 1320px; margin: 0 auto; padding: 20px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; gap: 14px; font-size: 13.12px; }
.to-top { color: #fff; font-weight: 700; text-decoration: none; }
.to-top:hover { color: var(--teal-l); }
.hero.page-head { padding: clamp(26px, 3.6vw, 46px) 0 clamp(78px, 8vw, 118px); }
.page-head .hero-inner { grid-template-columns: minmax(0, 1fr); }
.page-head .hero-copy { max-width: 980px; }
.page-head .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #8ea3be; }
.page-head .crumbs a { color: inherit; text-decoration: none; transition: color 0.2s; }
.page-head .crumbs a:hover { color: #fff; }
.page-head .crumbs i { font-size: 9.6px; opacity: 0.6; }
.page-head .crumbs [aria-current] { color: #d7e3f1; }
.page-head .page-title { margin-top: 12px; font-size: clamp(28px, 3.7vw, 46.4px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
:is(.site-header, .drawer, .site-footer) .btn-lg { min-height: 54px; padding: 0 28px; border-radius: 14px; font-size: 16px; }
:is(.site-header, .drawer, .site-footer) .btn-glass { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:is(.site-header, .drawer, .site-footer) .btn-glass:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.hero.page-head.page-head-slim { padding-bottom: clamp(70px, 7vw, 100px); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}
@media (max-width: 1240px) {
	:is(.site-header, .drawer, .site-footer) .hide-md { display: none; }
}
@media (max-width: 1080px) {
	.hero-inner { grid-template-columns: minmax(0, 1fr); }
	.hero-copy { max-width: 760px; }
}
@media (max-width: 1023px) {
	:root {--header-h: 76px;}
	:is(.site-header, .drawer, .site-footer) .main-nav { display: none; }
	.header-actions { margin-left: auto; }
	.nav-toggle { display: block; }
}
@media (max-width: 760px) {
	.header-inner,
	.hero-inner,
	.footer-inner,
	.footer-bottom { padding-left: 16px; padding-right: 16px; }
	:is(.site-header, .drawer, .site-footer) .brand img { height: 52px; }
	.footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; padding-top: 44px; }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	:is(.site-header, .drawer, .site-footer) .hide-sm { display: none; }
	:is(.site-header, .drawer, .site-footer) .btn { padding: 0 14px; }
	.hero { padding-top: 30px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
	:is(.site-header, .drawer, .site-footer) .btn-primary span { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
	.hero { padding-top: 24px; padding-bottom: 70px; }
}
@media print {
	.site-header,
	.hero-bg,
	.site-footer { display: none !important; }
	.hero { background: none; color: #000; padding: 0; }
}

/* ---- the skin ------------------------------------------------------------

   The account area and "Post a job" keep the theme's markup, scripts and
   layout grid - an employer's dashboard is no place to rebuild a form handler.
   What they do not keep is the theme's look. Everything below repaints the
   theme's own components in the redesign's language: white cards on the pale
   page, ink headings, teal actions, Manrope throughout.

   Three rules for anything added here:
   1. Scope it under .cjhp-framed. This file is loaded on no other page.
   2. Never restyle <i> or an icon class - icons are fonts.
   3. The theme's custom CSS is full of !important. Where a declaration here
      carries one, that is why.                                              */

.cjhp-framed {
	background: #f3f6fa;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0f1f33;
}

.cjhp-framed .site {
	background: transparent;
}

/* One typeface. The theme's custom CSS names four (Fasthand, Roboto,
   Montserrat, Droid Serif), most of them with !important, so this has to be
   louder than all of them - and has to leave every icon font alone. */
.cjhp-framed .container-wrap :not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.dashicons):not(.mce-ico):not(.glyphicon):not([class*="icon"]),
.cjhp-framed .member-heading :not(i):not(.fa):not(.fas):not(.far):not(.fab),
.cjhp-framed .modal :not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.dashicons):not(.mce-ico):not(.glyphicon):not([class*="icon"]) {
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

.cjhp-framed .container-wrap {
	background: transparent;
	font-weight: 400;
	color: #0f1f33;
}

/* The theme's column is 1200px wide; the header above it is 1320. One page,
   one pair of edges. */
.cjhp-framed .container-boxed.max {
	width: auto;
	max-width: 1320px;
	padding-right: 24px;
	padding-left: 24px;
}

.cjhp-framed .container-boxed.offset {
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 84px;
}

/* A form is read down, not across: nobody wants a 1,270px text field. */
.cjhp-framed .jform .jpanel,
.cjhp-framed .jform .form-actions,
.cjhp-framed .jpanel.jpanel-login,
.cjhp-framed .noo-main:has(> form.form-horizontal) {
	float: none;
	max-width: 940px;
	margin-right: auto;
	margin-left: auto;
}

/* The theme's custom CSS makes every field 97% wide, so a text field ends
   14px short of the select under it. */
.cjhp-framed .container-wrap .form-horizontal .form-group .form-control:not(.half) {
	width: 100% !important;
}

/* The theme reserves 210px for a row of step numbers and then pulls the form
   back up over it. The steps are switched off on this site, so both go. */
.cjhp-framed .jform-header {
	padding: 30px 0 0;
	background: transparent;
}

.cjhp-framed .jform-body {
	margin-top: 0;
	padding-bottom: 84px;
}

.cjhp-framed .container-wrap h1,
.cjhp-framed .container-wrap h2,
.cjhp-framed .container-wrap h3,
.cjhp-framed .container-wrap h4,
.cjhp-framed .modal h4 {
	color: #071a2f;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-transform: none;
}

.cjhp-framed .container-wrap a:not(.btn) {
	color: #00877a;
}

.cjhp-framed .container-wrap a:not(.btn):hover {
	color: #00a896;
}

/* The band under our header already names the page. The theme's own heading
   would say it a second time, in a second style. */
.cjhp-framed .noo-page-heading {
	display: none;
}

/* The theme's square "to top" button. The footer has ours. */
.cjhp-framed .go-to-top {
	display: none !important;
}

/* ---- account navigation -------------------------------------------------- */

.cjhp-framed .member-heading {
	padding: 6px 0 0;
	background: transparent;
}

.cjhp-framed .member-heading .member-heading-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	padding: 8px;
	border: 1px solid #e1e8f0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(7, 26, 47, 0.05), 0 2px 10px rgba(7, 26, 47, 0.04);
	font-weight: 700;
}

.cjhp-framed .member-heading .member-heading-nav li.divider {
	display: none;
}

.cjhp-framed .member-heading .member-heading-nav li a {
	padding: 12px 18px;
	border-radius: 12px;
	color: #5a6b82;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
}

.cjhp-framed .member-heading .member-heading-nav li a:before {
	content: none;
}

.cjhp-framed .member-heading .member-heading-nav li a:hover {
	background: #eef4f8;
	color: #071a2f;
}

.cjhp-framed .member-heading .member-heading-nav li.active > a,
.cjhp-framed .member-heading .member-heading-nav li.active > a:hover {
	background: linear-gradient(135deg, #00a896 0%, #009ec2 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 168, 150, 0.28);
}

.cjhp-framed .member-heading .member-heading-nav li a .badge {
	border-radius: 999px;
	background-color: #ffb454;
	color: #071a2f;
}

.cjhp-framed .member-heading .dropdown-menu {
	border: 1px solid #e1e8f0;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1);
}

/* ---- cards --------------------------------------------------------------- */

.cjhp-framed .jpanel,
.cjhp-framed .member-manage,
.cjhp-framed .member-plan,
.cjhp-framed .noo-main > form.form-horizontal {
	border: 1px solid #e1e8f0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(7, 26, 47, 0.05), 0 2px 10px rgba(7, 26, 47, 0.04);
}

.cjhp-framed .member-manage,
.cjhp-framed .noo-main > form.form-horizontal {
	padding: 34px 36px;
}

/* Log in, register, reset password: one small form, alone on the page. */
.cjhp-framed .noo-main > .account-form {
	max-width: 700px;
	margin: 0 auto;
	padding: 38px 44px 30px;
	border: 1px solid #e1e8f0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1);
}

.cjhp-framed .account-form form {
	max-width: 100%;
}

.cjhp-framed .account-form .form-actions {
	margin-top: 4px;
}

.cjhp-framed .account-form .form-actions .btn-primary {
	min-width: 180px;
	padding: 15px 30px;
}

.cjhp-framed .account-form .login-form-links,
.cjhp-framed .account-form .login-form-links span {
	color: #5a6b82;
	font-size: 13.5px;
}

@media (min-width: 768px) {
	/* Under the fields, not under their labels. */
	.cjhp-framed .account-form .cf-turnstile {
		margin-bottom: 14px;
		margin-left: 25%;
	}
}

/* "Post a job", signed out: log in OR register.

   The theme prints two links above this form - Register, and Login - and the
   site's custom CSS has had `.account-actions { display: none }` since long
   before the redesign. So the step called "Login or create an account"
   offered a login form and nothing else: a new employer who pressed "Post a
   job" had no way to make an account from there. The owner found it on his
   phone. The links are shown again, as the two halves of one switch.

   They are the theme's own links and keep its addresses, so registering
   from here carries on to the job form rather than to the account page. */
.cjhp-framed .jpanel-login .account-actions {
	display: flex !important;
	gap: 6px;
	max-width: 600px;
	margin: 0 auto 26px;
	padding: 6px;
	border-radius: 16px;
	background: #eef4f8;
}

.cjhp-framed .container-wrap .jpanel-login .account-actions .btn {
	flex: 1 1 0;
	margin: 0;
	padding: 13px 12px;
	border: 0 !important;
	border-radius: 11px;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none;
	color: #5a6b82 !important;
	font-size: 15px;
	transform: none;
}

.cjhp-framed .container-wrap .jpanel-login .account-actions .btn:hover {
	color: #071a2f !important;
}

/* The one whose form is showing. */
.cjhp-framed .container-wrap .jpanel-login .account-actions .btn-primary,
.cjhp-framed .container-wrap .jpanel-login .account-actions .btn-primary:hover {
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(7, 26, 47, 0.08), 0 4px 12px rgba(7, 26, 47, 0.08);
	color: #071a2f !important;
}

/* "Already have account ? Login" is a sentence; half a switch is a word. */
.cjhp-framed .jpanel-login .account-actions .hidden-xs {
	display: none;
}

.cjhp-framed .jpanel-login .account-actions .login-label {
	opacity: 1;
}

/* Login on the left: it is the form a returning employer lands on. */
.cjhp-framed .jpanel-login .account-actions a:last-child {
	order: -1;
}

/* "Forgot password?" under the button. The theme hides these links on this
   step too; the second one says "Register now" and leaves the job form for
   the account page, which the switch above already does better. */
.cjhp-framed .jpanel-login .account-form .login-form-links {
	display: block;
	margin-top: 18px;
	font-style: normal;
}

.cjhp-framed .jpanel-login .account-form .login-form-links > span:has(.member-register-link),
.cjhp-framed .jpanel-login .account-form .login-form-links > span:has(.member-login-link) {
	display: none;
}

/* Both forms the width of the switch above them. The theme sets this on the
   login form inline and leaves the register form to fill the card. */
.cjhp-framed .jpanel-login .account-form form {
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
}

/* What the site says back after "Log in" or "Register". The script moves
   this box under the button; here it is made to look like an answer. */
.cjhp-framed .noo-ajax-result {
	margin: 16px 0 0;
	color: #5a6b82;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.cjhp-framed .noo-ajax-result .error-response,
.cjhp-framed .noo-ajax-result .success-response {
	display: block;
	padding: 13px 16px;
	border: 1px solid #f3c9c9;
	border-radius: 14px;
	background: #fdf1f1;
	color: #a12d2d;
}

.cjhp-framed .noo-ajax-result .success-response {
	border-color: #bfe9e2;
	background: #ecfaf7;
	color: #00695f;
}

/* Account settings are a stack of small forms - company, email, password -
   each under its own heading, with a rule between them. The rule is what a
   page does when it has no cards. */
.cjhp-framed .noo-main > hr {
	display: none;
}

.cjhp-framed .noo-main > .form-title {
	margin: 38px 0 14px;
	padding: 0;
	border: 0;
}

.cjhp-framed .noo-main > .form-title:first-child {
	margin-top: 0;
}

.cjhp-framed .noo-main > div.form-title h3 {
	font-size: 20px;
}

.cjhp-framed .noo-main > p.form-title {
	margin: 0 0 16px;
	color: #5a6b82 !important;
}

.cjhp-framed .noo-main > form.form-horizontal > .form-group:last-child {
	margin-bottom: 0;
}

/* Deleting an account is not the same kind of button as saving one. */
.cjhp-framed .container-wrap a.btn[href*="delete_account"] {
	border: 1px solid #f0b8b8 !important;
	background: #fff !important;
	color: #b42323 !important;
	box-shadow: none;
}

.cjhp-framed .container-wrap a.btn[href*="delete_account"]:hover {
	border-color: #b42323 !important;
	background: #fdf1f1 !important;
}

.cjhp-framed .jpanel {
	overflow: hidden;
	margin-bottom: 28px;
}

.cjhp-framed .jpanel .jpanel,
.cjhp-framed .member-manage .jpanel,
.cjhp-framed .jpanel .member-manage {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cjhp-framed .jpanel-title {
	padding: 26px 36px 22px;
	border-bottom: 1px solid #e1e8f0;
	border-radius: 0;
	background: #fff !important;
	text-align: left;
}

.cjhp-framed .jpanel-title h3 {
	color: #071a2f;
	font-size: 22px;
	font-weight: 800 !important;
	line-height: 1.25;
}

.cjhp-framed .jpanel-body {
	margin-bottom: 0;
	padding: 34px 36px;
	border: 0 !important;
	background: #fff;
}

.cjhp-framed .form-title {
	margin-bottom: 22px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eef4f8;
}

.cjhp-framed .form-title h3 {
	margin-bottom: 0;
	font-size: 17px;
}

.cjhp-framed .member-manage > h3:first-child {
	margin-top: 0;
	font-size: 22px;
}

.cjhp-framed .member-manage em {
	color: #5a6b82;
	font-size: 13.5px;
}

/* ---- fields -------------------------------------------------------------- */

.cjhp-framed .container-wrap .control-label,
.cjhp-framed .modal .control-label {
	color: #0f1f33;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.4;
	text-transform: none;
}

.cjhp-framed .container-wrap .form-control,
.cjhp-framed .container-wrap .form-control-flat input,
.cjhp-framed .container-wrap .form-control-flat select,
.cjhp-framed .container-wrap .form-control-flat textarea,
.cjhp-framed .container-wrap .multiselect-native-select .multiselect,
.cjhp-framed .container-wrap .form-group .chosen-container-single,
.cjhp-framed .container-wrap .form-group .chosen-container-multi .chosen-choices,
.cjhp-framed .modal .form-control,
.cjhp-framed .modal .form-control-flat input,
.cjhp-framed .modal .form-control-flat select,
.cjhp-framed .modal .form-control-flat textarea {
	border: 1px solid #d5dfe9;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: none;
	color: #0f1f33;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cjhp-framed .container-wrap .form-control::placeholder,
.cjhp-framed .container-wrap .form-control-flat input::placeholder,
.cjhp-framed .modal .form-control::placeholder {
	color: #8a99ad;
	font-weight: 400;
}

.cjhp-framed .container-wrap .form-control:hover,
.cjhp-framed .container-wrap .form-control-flat select:hover,
.cjhp-framed .container-wrap .multiselect-native-select .multiselect:hover {
	border-color: #b9c8d8;
}

.cjhp-framed .container-wrap .form-control:focus,
.cjhp-framed .container-wrap .form-control-flat input:focus,
.cjhp-framed .container-wrap .form-control-flat select:focus,
.cjhp-framed .container-wrap .form-control-flat textarea:focus,
.cjhp-framed .container-wrap .multiselect-native-select .open > .multiselect,
.cjhp-framed .container-wrap .multiselect-native-select .multiselect:focus,
.cjhp-framed .modal .form-control:focus {
	border-color: #00a896;
	outline: 0;
	box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.22);
}

.cjhp-framed .container-wrap .multiselect-native-select .multiselect-selected-text {
	color: #0f1f33;
	font-weight: 500 !important;
}

.cjhp-framed .container-wrap .multiselect-native-select .caret {
	color: #5a6b82;
}

.cjhp-framed .multiselect-container.dropdown-menu,
.cjhp-framed .container-wrap .dropdown-menu,
.cjhp-framed .chosen-container .chosen-drop {
	border: 1px solid #e1e8f0;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1);
}

.cjhp-framed .multiselect-container.dropdown-menu {
	margin-top: 6px;
}

.cjhp-framed .multiselect-container.dropdown-menu li a {
	color: #0f1f33;
}

.cjhp-framed .multiselect-container.dropdown-menu li a:hover,
.cjhp-framed .multiselect-container.dropdown-menu li.active label,
.cjhp-framed .multiselect-container.dropdown-menu li:hover label {
	color: #00877a;
}

.cjhp-framed .multiselect-container.dropdown-menu .multiselect-filter .multiselect-search {
	border-radius: 10px;
}

/* The theme draws its own tick boxes and radio buttons. */
.cjhp-framed .form-control-flat > .checkbox i,
.cjhp-framed .form-control-flat > .radio i {
	border-color: #b9c8d8;
	color: #00a896;
}

.cjhp-framed .form-control-flat .checkbox i {
	border-radius: 7px;
}

.cjhp-framed .form-control-flat .radio i:after {
	background: #00a896;
}

.cjhp-framed .form-control-flat > .checkbox input:checked + i,
.cjhp-framed .form-control-flat > .radio input:checked + i {
	border-color: #00a896;
}

.cjhp-framed .container-wrap input[type="checkbox"],
.cjhp-framed .container-wrap input[type="radio"] {
	accent-color: #00a896;
}

/* The description editor. */
.cjhp-framed .container-wrap .wp-editor-container {
	overflow: hidden;
	border: 1px solid #d5dfe9;
	border-radius: 12px;
}

.cjhp-framed .container-wrap div.mce-toolbar-grp,
.cjhp-framed .container-wrap .quicktags-toolbar {
	border-bottom: 1px solid #e1e8f0;
	background: #f7fafc;
}

/* The hints under a field. */
.cjhp-framed .container-wrap .form-group em {
	display: inline-block;
	margin-top: 6px;
	color: #5a6b82;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
}

.cjhp-framed .container-wrap .wp-media-buttons .button,
.cjhp-framed .container-wrap .form-control-flat .form-control-file-button {
	border: 1px solid #d5dfe9 !important;
	border-radius: 10px;
	background: #fff !important;
	box-shadow: none;
	color: #071a2f !important;
	font-weight: 700;
}

.cjhp-framed .jform-error {
	color: #d14343;
}

/* ---- buttons ------------------------------------------------------------- */

.cjhp-framed .container-wrap .btn,
.cjhp-framed .modal .btn {
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 700 !important;
	letter-spacing: 0;
	text-transform: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cjhp-framed .container-wrap .btn-primary,
.cjhp-framed .modal .btn-primary {
	border-color: transparent !important;
	background-color: #00a896 !important;
	background-image: linear-gradient(135deg, #00a896 0%, #009ec2 100%) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 168, 150, 0.28);
}

.cjhp-framed .container-wrap .btn-primary:hover,
.cjhp-framed .container-wrap .btn-primary:focus,
.cjhp-framed .modal .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 168, 150, 0.36);
}

.cjhp-framed .container-wrap .btn-default:not(.multiselect),
.cjhp-framed .modal .btn-default {
	border: 1px solid #d5dfe9;
	background: #fff;
	color: #071a2f;
}

.cjhp-framed .container-wrap .btn-default:not(.multiselect):hover,
.cjhp-framed .modal .btn-default:hover {
	border-color: #00a896;
	background: #fff;
	color: #00877a;
}

.cjhp-framed .container-wrap .form-actions {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
}

/* ---- tables -------------------------------------------------------------- */

.cjhp-framed .member-manage .member-manage-table {
	border: 1px solid #e1e8f0;
	border-radius: 16px;
}

.cjhp-framed .member-manage .table {
	margin-bottom: 0;
}

.cjhp-framed .member-manage .table thead th {
	border: 0;
	background-color: #f3f6fa !important;
	color: #5a6b82;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cjhp-framed .member-manage .table > tbody > tr > td {
	border-top: 1px solid #eef4f8;
	color: #0f1f33;
	font-size: 14.5px;
}

.cjhp-framed .member-manage .table tbody tr:not(.child):hover,
.cjhp-framed .member-manage .table tbody tr:not(.child):hover > td {
	background-color: #f0fbf9 !important;
	color: #0f1f33;
}

.cjhp-framed .member-manage .table tbody tr:not(.child):hover h3 {
	color: #071a2f;
}

.cjhp-framed .member-manage .table tbody tr:not(.child):hover a:not(.btn-primary) {
	color: #00877a;
}

.cjhp-framed .member-manage .table tbody tr:not(.child):hover a:not(.btn-primary):hover {
	color: #00a896;
}

.cjhp-framed .member-manage .bulk-actions strong {
	color: #5a6b82;
	font-size: 13px;
	font-weight: 700;
}

.cjhp-framed .container-wrap .pagination > li > a,
.cjhp-framed .container-wrap .pagination > li > span,
.cjhp-framed .container-wrap .pagination .page-numbers {
	border-color: #e1e8f0;
	border-radius: 10px;
	color: #0f1f33;
	font-weight: 700;
}

.cjhp-framed .container-wrap .pagination .page-numbers.current,
.cjhp-framed .container-wrap .pagination > .active > a,
.cjhp-framed .container-wrap .pagination > .active > span {
	border-color: transparent;
	background: #071a2f;
	color: #fff;
}

.cjhp-framed .member-manage .member-manage-toolbar.buttom-toolbar {
	margin-top: 20px;
}

/* With no jobs yet, the table's only row is a "Post a job" button. */
.cjhp-framed .member-manage .table td > .btn {
	margin: 12px 0 4px;
}

/* The applications list is a DataTable: its own search box, page-size
   select and pager, none of which the theme styles. */
.cjhp-framed .dataTables_wrapper .dataTables_length,
.cjhp-framed .dataTables_wrapper .dataTables_filter {
	margin-bottom: 16px;
	color: #5a6b82;
	font-size: 13.5px;
	font-weight: 600;
}

.cjhp-framed .dataTables_wrapper .dataTables_length select,
.cjhp-framed .dataTables_wrapper .dataTables_filter input {
	display: inline-block;
	width: auto !important;
	height: 40px;
	margin: 0 6px;
	padding: 0 14px;
	border: 1px solid #d5dfe9;
	border-radius: 10px;
	background-color: #fff;
	color: #0f1f33;
	font-size: 14px;
	line-height: 38px;
}

.cjhp-framed .dataTables_wrapper .dataTables_length select {
	min-width: 76px;
	padding-right: 28px;
}

.cjhp-framed .dataTables_wrapper .dataTables_filter input {
	min-width: 220px;
	margin-right: 0;
}

.cjhp-framed .dataTables_wrapper .dataTables_info {
	color: #5a6b82;
	font-size: 13.5px;
}

.cjhp-framed .dataTables_wrapper .dataTables_paginate {
	margin-top: 16px;
}

/* Newer DataTables wrap each page link in an <li> of the same class; the
   link inside is already drawn by the pagination rules above. */
.cjhp-framed .dataTables_wrapper .dataTables_paginate li.paginate_button {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none !important;
}

.cjhp-framed .dataTables_wrapper .dataTables_paginate a.paginate_button {
	display: inline-block;
	margin: 0 3px;
	padding: 8px 14px;
	border: 1px solid #e1e8f0 !important;
	border-radius: 10px;
	background: #fff !important;
	color: #0f1f33 !important;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.cjhp-framed .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
	border-color: transparent !important;
	background: #071a2f !important;
	color: #fff !important;
}

.cjhp-framed .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
	cursor: default;
}

/* ---- messages ------------------------------------------------------------ */

.cjhp-framed .noo-messages {
	border-radius: 14px;
	font-weight: 600;
}

.cjhp-framed .noo-messages.noo-message-error {
	border-color: #f3c9c9;
	background: #fdf1f1;
	color: #a12d2d;
}

.cjhp-framed .noo-messages.noo-message-success {
	border-color: #bfe9e2;
	background: #ecfaf7;
	color: #00695f;
}

.cjhp-framed .noo-messages.noo-message-notice {
	border-color: #cfe3f3;
	background: #f1f8fd;
	color: #16385c;
}

/* ---- windows and pickers ------------------------------------------------- */

.cjhp-framed .modal-content {
	overflow: hidden;
	border: 0;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(2, 12, 27, 0.28), 0 40px 90px rgba(2, 12, 27, 0.32);
}

.cjhp-framed .modal-header {
	border-bottom: 1px solid #e1e8f0;
	background: #fff;
}

.cjhp-framed .datetimepicker,
.cjhp-framed .xdsoft_datetimepicker {
	border: 1px solid #e1e8f0;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(7, 26, 47, 0.07), 0 22px 48px rgba(7, 26, 47, 0.1);
	font-family: "Manrope", system-ui, sans-serif;
}

/* ---- phones -------------------------------------------------------------- */

@media (max-width: 767px) {
	.cjhp-framed .container-boxed.max {
		padding-right: 16px;
		padding-left: 16px;
	}

	.cjhp-framed .container-boxed.offset {
		padding-top: 20px;
		padding-bottom: 56px;
	}

	.cjhp-framed .member-manage,
	.cjhp-framed .noo-main > form.form-horizontal,
	.cjhp-framed .jpanel-body {
		padding: 22px 18px;
	}

	.cjhp-framed .jpanel-title {
		padding: 20px 18px 16px;
	}

	.cjhp-framed .noo-main > .account-form {
		padding: 24px 18px 20px;
	}

	.cjhp-framed .jpanel-title h3 {
		font-size: 19px;
	}

	.cjhp-framed .member-heading .member-heading-nav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cjhp-framed .member-heading .member-heading-nav li {
		flex: 0 0 auto;
	}
}