:root {
				--sairiki-blue: #0a4baa;
				--sairiki-blue-deep: #043477;
				--sairiki-red: #d30d3f;
				--sairiki-ink: #17213a;
				--sairiki-muted: #66738b;
				--sairiki-soft: #f5f8ff;
				--sairiki-line: #e2e8f2;
			}

.sairiki-body-hidden,
.sairiki-app-bottom-nav { display: none; }
.compose-upgrade-modal-visible { display: block; }
.compose-upgrade-title { color: var(--sairiki-red); }
.compose-upgrade-action { text-align: center; }
.compose-font-menu { margin-left: 5px; }

@media (max-width: 1199px) {
	body.compose-page { overflow-x: hidden; padding-bottom: 88px; }
	.compose-page #main { padding-top: 72px; }
	.compose-page .member-nav {
		align-items: center; display: flex; height: 72px; left: 0;
		min-height: 72px; position: fixed; right: 0; top: 0; z-index: 1050;
	}
	.compose-page .member-nav .compose-shell {
		align-items: center; display: flex; height: 72px; justify-content: center;
	}
	.compose-page .member-nav .navbar-brand { float: none; margin: 0; padding: 7px 10px; }
	.compose-page .member-nav .gt-header-logo {
		max-height: 54px; max-width: 180px; object-fit: contain;
	}
	.compose-page .member-nav .navbar-header,
	.compose-page .member-nav .navbar-collapse { display: none !important; }
	body.compose-page footer,
	body.compose-page .footer-before-login,
	body.compose-page .sairiki-footer,
	body.compose-page .sairiki-footer-bottom,
	body.compose-page .fixLangugeBtn,
	body.compose-page .onlineWidget { display: none !important; }
	.sairiki-app-bottom-nav {
		align-items: center; background: rgba(255,255,255,.96); border: 1px solid #dfe6f0;
		border-radius: 18px; bottom: 10px; box-shadow: 0 12px 30px rgba(6,63,152,.18);
		display: grid; gap: 2px; grid-template-columns: repeat(5,minmax(0,1fr));
		left: 10px; padding: 8px 6px; position: fixed; right: 10px; z-index: 1060;
	}
	.sairiki-app-bottom-nav a {
		align-items: center; border-radius: 12px; color: #66738b; display: flex;
		flex-direction: column; font-size: 10px; font-weight: 700; gap: 4px;
		line-height: 1.1; min-height: 48px; min-width: 0; padding: 7px 3px;
		text-align: center; text-decoration: none !important;
	}
	.sairiki-app-bottom-nav a i { color: var(--sairiki-blue); font-size: 17px; }
	.sairiki-app-bottom-nav a.is-active { background: #eef4ff; color: var(--sairiki-blue-deep); }
	.sairiki-app-bottom-nav a.is-primary { background: var(--sairiki-blue); color: #fff; }
	.sairiki-app-bottom-nav a.is-primary i { color: #fff; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	.compose-page #main { padding-top: 82px; }
	.compose-page .member-nav,
	.compose-page .member-nav .compose-shell { height: 82px; min-height: 82px; }
	.compose-page .member-nav .gt-header-logo { max-height: 62px; max-width: 220px; }
	.sairiki-app-bottom-nav {
		bottom: 16px; left: 50%; max-width: 640px; right: auto;
		transform: translateX(-50%); width: calc(100% - 28px);
	}
}

@media (max-width: 767px) {
	.compose-shell { padding-left: 10px; padding-right: 10px; }
	.compose-workspace { padding-bottom: 24px; padding-top: 14px; }
	.compose-recipient { align-items: flex-start; }
	.compose-recipient strong { display: block; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
	.sairiki-app-bottom-nav a { font-size: 9px; }
}
			html {
				overflow-x: hidden;
				scrollbar-color: var(--sairiki-blue) var(--sairiki-soft);
				scrollbar-width: thin;
			}
			::-webkit-scrollbar { width: 10px; }
			::-webkit-scrollbar-track { background: var(--sairiki-soft); }
			::-webkit-scrollbar-thumb {
				background: var(--sairiki-blue);
				border: 2px solid var(--sairiki-soft);
				border-radius: 999px;
			}
			body.compose-page {
				background: var(--sairiki-soft);
				color: var(--sairiki-ink);
			}
			.compose-shell {
				margin: 0 auto;
				max-width: 1180px;
				padding-left: 20px;
				padding-right: 20px;
				width: 100%;
			}
			.compose-page .member-nav {
				background: #fff;
				border: 0;
				box-shadow: 0 8px 28px rgba(6, 63, 152, .08);
				margin: 0;
				min-height: 76px;
			}
			.compose-page .member-nav .navbar-brand { height: auto; padding: 9px 10px; }
			.compose-page .member-nav .gt-header-logo { max-height: 58px; }
			.compose-page .member-nav .nav > li > a {
				color: #25324a;
				font-size: 13px;
				font-weight: 700;
				padding: 28px 14px 25px;
			}
			.compose-page .member-nav .nav > li > a:hover,
			.compose-page .member-nav .nav > li > a:focus {
				background: transparent;
				color: var(--sairiki-red);
			}
			.compose-page .member-nav .account-link {
				background: var(--sairiki-blue) !important;
				border-radius: 5px;
				color: #fff !important;
				margin: 18px 0 0 10px;
				padding: 10px 15px !important;
			}
			.compose-page .member-nav .navbar-toggle {
				background: var(--sairiki-blue);
				margin-top: 20px;
			}
			.compose-page .member-nav .navbar-toggle .icon-bar { background: #fff; }
			.compose-page .member-nav .dropdown-menu {
				border: 1px solid var(--sairiki-line);
				border-radius: 6px;
				box-shadow: 0 14px 34px rgba(23, 33, 58, .13);
				padding: 7px 0;
			}
			.compose-page .member-nav .dropdown-menu > li > a {
				color: #46536b;
				font-size: 13px;
				padding: 10px 18px;
			}
			.compose-hero {
				background: #fff;
				border-bottom: 1px solid var(--sairiki-line);
				padding: 28px 0;
			}
			.compose-hero span {
				color: var(--sairiki-red);
				display: block;
				font-size: 11px;
				font-weight: 800;
				margin-bottom: 5px;
				text-transform: uppercase;
			}
			.compose-hero h1 {
				color: var(--sairiki-blue-deep);
				font-family: 'Merriweather', serif;
				font-size: 29px;
				font-weight: 800;
				margin: 0 0 7px;
			}
			.compose-hero p { color: var(--sairiki-muted); margin: 0; }
			.compose-workspace {
				padding-bottom: 42px;
				padding-top: 24px;
			}
			.message-tabs {
				background: #fff;
				border: 1px solid var(--sairiki-line);
				border-radius: 7px;
				display: flex;
				margin-bottom: 16px;
				overflow: hidden;
			}
			.message-tabs a {
				border-right: 1px solid var(--sairiki-line);
				color: #536078;
				font-size: 13px;
				font-weight: 700;
				padding: 12px 18px;
			}
			.message-tabs a:last-child { border-right: 0; }
			.message-tabs a:hover,
			.message-tabs a.active {
				background: #eef4ff;
				color: var(--sairiki-blue);
			}
			.compose-recipient {
				align-items: center;
				background: #fff;
				border: 1px solid var(--sairiki-line);
				border-radius: 7px;
				display: flex;
				gap: 13px;
				margin-bottom: 16px;
				padding: 13px 16px;
			}
			.compose-recipient img {
				border: 1px solid var(--sairiki-line);
				border-radius: 5px;
				height: 52px;
				object-fit: cover;
				width: 52px;
			}
			.compose-recipient small {
				color: var(--sairiki-muted);
				display: block;
				font-size: 11px;
				font-weight: 700;
				margin-bottom: 2px;
				text-transform: uppercase;
			}
			.compose-recipient strong { color: var(--sairiki-ink); }
			.compose-card {
				background: #fff;
				border: 1px solid var(--sairiki-line);
				border-radius: 7px;
				box-shadow: 0 8px 24px rgba(23, 33, 58, .055);
				overflow: hidden;
			}
			.compose-card-header {
				border-bottom: 1px solid var(--sairiki-line);
				padding: 16px 19px;
			}
			.compose-card-header h2 {
				color: var(--sairiki-blue-deep);
				font-size: 17px;
				font-weight: 800;
				margin: 0;
			}
			.compose-card-header h2 i {
				color: var(--sairiki-red);
				margin-right: 8px;
			}
			.compose-page .compose-board {
				float: none;
				margin: 0;
				padding: 0;
				width: 100%;
			}
			.compose-page .compose-form-body {
				float: none;
				margin: 0;
				padding: 20px;
				width: 100%;
			}
			.compose-page .form-group { margin-bottom: 18px; }
			.compose-page .form-group > label {
				color: #354159;
				display: block;
				font-size: 12px;
				font-weight: 800;
				margin-bottom: 7px;
				text-transform: uppercase;
			}
			.compose-page .form-group > label h4 {
				font-size: inherit;
				font-weight: inherit;
				margin: 0;
			}
			.compose-page .gt-form-control,
			.compose-page .chosen-container-multi .chosen-choices {
				background: #fff;
				border: 1px solid #d8e0ec !important;
				border-radius: 5px !important;
				box-shadow: none !important;
				color: var(--sairiki-ink);
				min-height: 44px;
				padding: 10px 12px;
				width: 100%;
			}
			.compose-page input.gt-form-control:focus,
			.compose-page #editor:focus {
				border-color: var(--sairiki-blue) !important;
				box-shadow: 0 0 0 3px rgba(10, 75, 170, .1) !important;
				outline: 0;
			}
			.compose-page .chosen-container { width: 100% !important; }
			.compose-page .chosen-container-multi .chosen-choices {
				padding: 5px 8px;
			}
			.compose-page .chosen-container-multi .chosen-choices li.search-choice {
				background: #eef4ff;
				border: 1px solid #d6e3f8;
				border-radius: 4px;
				box-shadow: none;
				color: var(--sairiki-blue);
				margin: 3px;
				padding: 7px 25px 7px 9px;
			}
			.compose-page .btn-toolbar {
				background: #f8faff;
				border: 1px solid #d8e0ec;
				border-bottom: 0;
				border-radius: 5px 5px 0 0;
				padding: 8px;
			}
			.compose-page .btn-toolbar > .row {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
			}
			.compose-page .btn-toolbar [class*="col-"] {
				float: none;
				padding: 0;
				width: auto;
			}
			.compose-page .btn-toolbar .btn {
				background: #fff;
				border-color: #d8e0ec;
				color: #44516a;
			}
			.compose-page #editor {
				border-radius: 0 0 5px 5px !important;
				line-height: 1.6;
				margin-top: 0 !important;
				min-height: 230px !important;
				padding: 15px;
			}
			.compose-actions {
				align-items: center;
				border-top: 1px solid var(--sairiki-line);
				display: flex;
				justify-content: flex-end;
				padding: 14px 20px;
			}
			.compose-page #send_msg {
				align-items: center;
				background: var(--sairiki-blue) !important;
				border: 1px solid var(--sairiki-blue) !important;
				border-radius: 5px;
				color: #fff !important;
				display: inline-flex;
				font-size: 13px;
				font-weight: 800;
				gap: 8px;
				padding: 11px 20px;
			}
			.compose-page #send_msg:hover { background: var(--sairiki-blue-deep) !important; }
			.compose-page .modal-content {
				border: 0;
				border-radius: 7px;
				box-shadow: 0 20px 60px rgba(23, 33, 58, .22);
			}
			.compose-page .gt-btn-orange {
				background: var(--sairiki-blue) !important;
				border-color: var(--sairiki-blue) !important;
				color: #fff !important;
			}
			@media (max-width: 991px) {
				.compose-page .member-nav .nav > li > a { padding-left: 9px; padding-right: 9px; }
				.compose-page .member-nav .account-link { margin-left: 3px; }
			}
			@media (max-width: 767px) {
				.compose-page .member-nav { min-height: 68px; }
				.compose-page .member-nav .navbar-brand { padding-left: 0; }
				.compose-page .member-nav .gt-header-logo { max-height: 50px; }
				.compose-page .member-nav .navbar-collapse {
					background: #fff;
					border-top: 1px solid var(--sairiki-line);
				}
				.compose-page .member-nav .nav > li > a { padding: 12px 15px; }
				.compose-page .member-nav .account-link {
					margin: 7px 15px 15px;
					text-align: center;
				}
				.compose-hero { padding: 22px 0; }
				.compose-hero h1 { font-size: 25px; }
				.message-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
				.message-tabs a {
					border-bottom: 0;
					font-size: 11px;
					padding: 11px 5px;
					text-align: center;
				}
				.compose-page .compose-form-body { padding: 16px; }
				.compose-page .btn-toolbar { display: none; }
				.compose-page #editor { border-radius: 5px !important; }
				.compose-actions { padding: 12px 16px; }
				.compose-page #send_msg { justify-content: center; width: 100%; }
			}