:root {
	font-size:13px;
	line-height:15px;

	/* =============================================
	   SITE COLOUR SCHEME
	   Uncomment one block below to switch theme.
	   ============================================= */

	/* MCP Blue */
	/*
	--brand-primary:   #0088cc;
	--brand-hover:     #006699;
	--brand-active:    #004d80;
	*/

	/* Slate Blue */
	/*
	--brand-primary:   #3b6ea5;
	--brand-hover:     #2d5580;
	--brand-active:    #1e3a5f;
	*/

	/* Teal */
	/*
	--brand-primary:   #008080;
	--brand-hover:     #006666;
	--brand-active:    #004d4d;
	*/

	/* Indigo */
	/*
	--brand-primary:   #4a5fa5;
	--brand-hover:     #3a4d87;
	--brand-active:    #2a3a6a;
	*/

	/* Forest Green */
	/*
	--brand-primary:   #2e7d5e;
	--brand-hover:     #23634a;
	--brand-active:    #184a37;
	*/

	/* Charcoal Blue */
	--brand-primary:   #2c4a6e;
	--brand-hover:     #213858;
	--brand-active:    #162540;
}
/* Per-user colour scheme overrides (applied via body class) */
body.theme-mcpblue     { --brand-primary: #0088cc; --brand-hover: #006699; --brand-active: #004d80; }
body.theme-slateblue   { --brand-primary: #3b6ea5; --brand-hover: #2d5580; --brand-active: #1e3a5f; }
body.theme-teal        { --brand-primary: #008080; --brand-hover: #006666; --brand-active: #004d4d; }
body.theme-indigo      { --brand-primary: #4a5fa5; --brand-hover: #3a4d87; --brand-active: #2a3a6a; }
body.theme-forestgreen { --brand-primary: #2e7d5e; --brand-hover: #23634a; --brand-active: #184a37; }
/* theme-charcoalblue uses the :root defaults above — no override needed */
body.theme-highcontrast  { --brand-primary: #111111; --brand-hover: #000000; --brand-active: #000000; }

BODY {
	margin-top:80px;
	overflow:hidden;
}
BODY.page-scrollable {
	overflow-y:auto;
}
.insideTab {
	padding-top: 20px;
}
.help-block {
	display: block;
	color: #6c757d;
	font-size: 0.875em;
	margin-top: 0.25rem;
}

.loginWelcome {
	font-size:190px;
	line-height:120px;
	color:#eee;
	font-weight:bold;
	letter-spacing:-10px;
}

.navbarPadding {
	padding:0px 20px 0px 20px;
}

.mainCol {
	position:relative;
	overflow:auto;
	flex-shrink:0;
}

.container-fluid#container {
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-start;
}

#navRoot {
	padding:5px 0px 0px 0px;
	background-color:#f5f5f5;
	width:170px;
	height:calc(100vh - 80px);
	overflow-y:auto;
	overflow-x:hidden;
	z-index:1;
}


#navRoot UL {
	padding:0px 10px 0px 10px;
}
#navRoot LI A {
	line-height:1rem;
	font-size:1rem;
	text-decoration:none;
	display:block;
	padding:2px 4px;
	color:var(--brand-primary);
	border-radius:3px;
}
#navRoot LI:not(.nav-header) > A {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#navRoot LI.active > A:not(.nav-header-add) {
	background-color:var(--brand-primary);
	color:#fff;
	flex-grow:1;
}
/* When a subfolder is active, reduce the mailbox row to a light tint */
#navRoot:has(LI[data-subfolder="true"].active) LI.rootFolder.active > A:not(.nav-header-add) {
	background-color:color-mix(in srgb, var(--brand-primary) 15%, white);
	color:inherit;
}

#navItems {
	border-right:1px solid #eee;
	margin:0px;
	padding:0px;
	width:320px;
	overflow:visible;
}

#navItemsWide {
	margin:0px;
	padding:0px;
	overflow:hidden;
}

#navMain {
	padding:20px 20px 20px 20px;
}

.container-fluid {
	padding:0px;
	margin:0px;
}

#navItemsSort {
	cursor:pointer;
	font-size:0.85rem;
	font-weight:bold;
	color:grey;
	background-color:#eee;
	padding:1px 3px 1px 8px;

}
#navItemsView {
	cursor:pointer;
	font-size:0.85rem;
	font-weight:bold;
	color:grey;
	background-color:#eee;
	padding:1px 3px 1px 8px;

}

#navItemsInner {
	overflow:auto;
	overflow-x:hidden;
	margin:0px;
	padding:0px;
}

.arrow {
	float:left;
	width:10px;
	height:10px;
	margin:3px;
	background-repeat:no-repeat;
}

.arrow-rt {
	background-image:url(../images/arrow-rt.png);
}

.arrow-dn {
	background-image:url(../images/arrow-dn.png);
}

/* nav-list / nav-header: replicate BS2 vertical nav behaviour */
.nav-list {
	flex-direction:column;
	display:flex;
	flex-wrap:wrap;
	padding-left:0;
	margin-bottom:0;
	list-style:none;
}
.nav-list > li > a {
	padding:3px 15px;
	line-height:1rem;
	font-size:1rem;
}
.nav-header {
	padding:5px 0 3px 15px;
	font-size:0.75rem;
	font-weight:bold;
	color:#6c757d;
	text-transform:uppercase;
	list-style:none;
}
a.nav-header-add {
	color:#6c757d;
	opacity:0.5;
	line-height:1;
	padding:0 2px;
}
a.nav-header-add:hover {
	opacity:1;
	color:var(--brand-primary);
}

#navFull {
	margin-top:-40px;
	padding:20px;
}

#busy {
	margin-top:3px;
}

.ddTick {
	margin-left:-16px;
	margin-right:2px;
}

#settingsPanel {
	padding:20px;
}

#alertStack {
	position:absolute;
	top:90px;
	right:20px;
	z-index:5000;
}

#alertStack .alert {
	clear:both;
}

.version {
	position:absolute;
	z-index:10000;
	bottom:10px;
	left:15px;
	font-size:0.7rem;
	color:#ccc;
}

.warn {
	color:red !important;
}

.navbar-brand {
	margin-left:30px !important;
	margin-right:30px !important;
}

/* Teal navbar active item highlight */
.navbar.navbar-dark .navbar-nav .nav-link.active {
	background-color:rgba(0,0,0,0.25);
	border-radius:4px;
	color:#fff !important;
}

/* Share Panel */

.shareDelegates, .publicUsers {
	line-height:2rem;
	width:280px;
	height:160px;
	border:1px solid silver;
	overflow:auto;
	margin-bottom:5px;
}


.shareDelegate {
	cursor:pointer;
}

.shareDelegateEven, .publicUserEven {
	background-color:#d9edf7;
}

.shareDelegateSelect {
	background-color:var(--brand-primary);
	color:white;
}

.shareDelegateEmail {
	margin-left:10px;
}

.shareDelegateCheck {
	margin:2px 20px 0px 0px;
}

.shareDelegatesRWLabel {
	font-size:0.85rem;
	margin-left:227px;
	margin-top:-12px;
}

/* End Share Panel */

.publicUser {
	padding-left:10px;
}

.publicUsers {
	height:120px;
}

.spacedList UL {
	margin-bottom:15px;
	margin-top:15px;
}
.spacedList LI {

	line-height:2rem;

}

.scrollable-menu {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
}

.csUser, .csUserBox OPTION {
	padding:5px;
	border:1px solid silver;
	list-style: none;
	margin:0;
	cursor: pointer;
}

.csUserBox {
	min-width:200px;
	min-height:200px;
	border:0;
	padding:0;
	margin:0;
}

/* Dropdown submenus (removed from Bootstrap 5, restored via CSS) */
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	border-radius: 0 0.375rem 0.375rem 0.375rem;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
	display: block;
}

/* Bootstrap 2 compatibility */
.hide { display:none !important; }
.show { display:block !important; }
.well { padding: 1rem; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 0.375rem; margin-bottom: 1rem; }
.form-text { display: block; font-size: 0.875em; color: #6c757d; margin-top: 0.25rem; }
.form-text.d-inline { display: inline !important; }

/* Plugin secondary navbar sits below main navbar */
.navbar-secondary {
	position:fixed;
	top:40px;
	width:100%;
	z-index:4999;
	padding:0;
	min-height:38px;
	background-color:#f8f9fa;
	border-bottom:1px solid #dee2e6;
}
.navbar-secondary .navbar-nav {
	flex-direction:row;
	flex-wrap:wrap;
}
.navbar-secondary .navbar-nav .nav-link {
	padding:5px 10px;
	font-size:1rem;
	white-space:nowrap;
	display:flex;
	flex-direction:column;
	align-items:center;
}
.navbar-secondary .navbar-nav .nav-link .fa {
	font-size:2.0rem;
	color:var(--brand-primary);
	transition:color 0.15s ease;
}
.navbar-secondary .navbar-nav .nav-link:hover .fa {
	color:var(--brand-hover);
}
.navbar-secondary .navbar-nav .nav-link.active .fa {
	color:var(--brand-active);
}
.navbar-secondary .navbar-nav .nav-link.active .nav-icon-label {
	color:var(--brand-active);
}
.navbar-secondary .navbar-nav .nav-link.active {
	border-bottom:3px solid var(--brand-primary);
}
.nav-icon-label {
	font-size:0.6rem;
	line-height:1;
	margin-top:2px;
	color:var(--brand-primary);
	transition:color 0.15s ease;
}
.navbar-secondary .navbar-nav .nav-link:hover .nav-icon-label {
	color:var(--brand-hover);
}
.navbar-secondary .dropdown-menu {
	position:absolute;
}
.navbar-secondary .navbar-nav .nav-link.dropdown-toggle::after {
	display:block;
	margin:2px auto 0;
}

/* Mobile: hide desktop-only nav items, show mobile nav items */
#mailMobileFolders, #mailMobileBack { display:none; }

/* Text size preference */
html.text-large { font-size:16px !important; line-height:18px !important; }



@media (max-width: 767px) {
	.nav-item-print { display: none !important; }
	:root { font-size: 16px; line-height: 19px; }
	body { overflow-y: auto; }
	.container-fluid#container { display:block; }
	.mainCol { width:100% !important; }
	#navRoot { height: auto; overflow-y: visible; }
	#mailFoldersHide, #mailFoldersShow { display:none !important; }
	.navbar-secondary .navbarPadding { flex-wrap:nowrap !important; overflow-x:auto; }
	.navbar-secondary .navbar-nav { flex-wrap:nowrap !important; flex-shrink:0; }
	.navbar-secondary .navbar-nav.ms-auto { margin-left:0 !important; }
	.navbar-secondary .navbar-nav .nav-link { padding:8px 6px; font-size:0.9rem; }
	.nav-icon-label { display:none; }
	#navbarMain .nav-link { padding-left: 1rem; padding-right: 1rem; }
}

/* -------------------------------------------------------
 * Theme colour overrides for Bootstrap 5 components
 * ------------------------------------------------------- */

/* btn-primary: use brand colours instead of Bootstrap blue */
.btn-primary {
	--bs-btn-bg:                var(--brand-primary);
	--bs-btn-border-color:      var(--brand-primary);
	--bs-btn-hover-bg:          var(--brand-hover);
	--bs-btn-hover-border-color: var(--brand-hover);
	--bs-btn-active-bg:         var(--brand-active);
	--bs-btn-active-border-color: var(--brand-active);
	--bs-btn-disabled-bg:       var(--brand-primary);
	--bs-btn-disabled-border-color: var(--brand-primary);
}

/* nav-tabs: active and hover states use brand colours */
.nav-tabs .nav-link {
	color: var(--brand-primary);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	color: var(--brand-hover);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: var(--brand-active);
	border-top: 2px solid var(--brand-primary);
}

/* Fixed top position for all modals */
.modal .modal-dialog {
	margin-top: 120px;
}

/* iOS PWA install hint banner */
#iosInstallBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 0.9rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
#iosInstallBanner button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0 0 16px;
    cursor: pointer;
    opacity: 0.8;
}
#iosInstallBanner button:hover { opacity: 1; }

/* Android/Chrome PWA install banner */
#androidInstallBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 0.9rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}
#androidInstallBanner button:last-child {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0 0 8px;
    cursor: pointer;
    opacity: 0.8;
}
#androidInstallBanner button:last-child:hover { opacity: 1; }