/* LinuxPro, child of Larry. Adapted from the Criarenet overrides (CC BY-SA 3.0). */
@import url('../larry/styles.min.css');

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin-ext-6bc0f226a5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin-08949f728d.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-700-latin-ext-5b9b81f54d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-700-latin-4f84d86cfd.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-100-700-latin-ext-d160e20920.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-100-700-latin-e2291e842c.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;
}

:root {
	--lp-primary: #0d2b52;
	--lp-primary-dark: #081c36;
	--lp-primary-alt: #0d2b52;
	--lp-primary-light: #16407a;
	--lp-accent: #8b1a1a;
	--lp-accent-strong: #a52222;
	--lp-text: #24292f;
	--lp-text-muted: #57606a;
	--lp-text-soft: #768390;
	--lp-text-on-dark: #e8edf5;
	--lp-border: #d0d7de;
	--lp-bg-light: #f7f8f9;
	--lp-bg-blue: #eff1f3;
	--lp-bg-blue-soft: #f7f8f9;
	--lp-bg-blue-strong: #e8edf5;

	--lp-primary-rgb: 13, 43, 82;
	--lp-accent-rgb: 139, 26, 26;
}

#topline {
	background: var(--lp-primary-dark);
	background-image: none;
	border-bottom: 1px solid var(--lp-primary-light);
	color: var(--lp-text-on-dark);
}

#topline a,
#topline .topleft a {
	color: var(--lp-text-on-dark);
}

#topline a:hover {
	color: #fff;
	text-decoration: underline;
}

#topline span.username {
	color: #fff;
}

#topnav {
	background: var(--lp-primary);
	background-image: none;
}

#taskbar a {
	color: var(--lp-text-on-dark);
}

#taskbar a:hover {
	color: #fff;
}

#taskbar a.button-selected {
	color: var(--lp-accent);
	background-color: var(--lp-primary-dark);
}

#taskbar a span.button-inner,
#topline a.button-logout,
#taskbar .button-logout {
	text-shadow: none;
}

.uibox .boxtitle,
.uibox .listing thead td {
	background: var(--lp-primary);
	color: #fff;
	text-shadow: none;
	border-bottom: 1px solid var(--lp-primary-dark);
}

.boxtitle {
	text-shadow: none;
}

.records-table tr.selected td {
	background: var(--lp-primary);
	background-image: none;
}

#login-form .box-inner {
	background: var(--lp-primary);
	background-image: none;
	border: 1px solid var(--lp-primary-dark);
	border-top: 4px solid var(--lp-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

#login-form .box-bottom {
	padding-top: 14px;
}

#login-form td.title {
	color: #fff;
	text-shadow: none;
}

#login-form input[type="text"],
#login-form input[type="password"] {
	border-color: var(--lp-border);
}

#login-form input.button {
	background: var(--lp-accent);
	background-image: none;
	border: 1px solid var(--lp-accent-strong);
	color: #fff;
	text-shadow: none;
}

#login-form input.button:hover,
#login-form input.button:focus {
	background: var(--lp-accent-strong);
	border-color: var(--lp-accent-strong);
}

#bottomline,
#bottomline a.support-link {
	color: var(--lp-text-muted);
}

#bottomline a.support-link:hover {
	color: var(--lp-accent-strong);
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--lp-primary);
	box-shadow: 0 0 0 2px rgba(var(--lp-primary-rgb), .22);
}

.records-table thead td {
	background: var(--lp-bg-blue-strong);
	background-image: none;
	color: var(--lp-primary);
	border-left: 1px solid var(--lp-border);
	border-bottom: 1px solid var(--lp-border);
}

.records-table thead td a,
.records-table thead td span {
	color: var(--lp-primary);
}

ul.listing li,
.listbox table.listing {
	background-color: var(--lp-bg-blue-soft);
}

.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.unfocused td,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
	color: var(--lp-primary);
	background-color: var(--lp-bg-blue-strong);
}

.listbox .listitem a,
.listbox .tablink a,
.listing tbody td,
.listing li a {
	text-shadow: none;
}

.listbox .boxfooter {
	background: var(--lp-bg-blue);
	box-shadow: none;
	border-top: 1px solid var(--lp-border);
}

.boxfooter .listbutton {
	background: var(--lp-bg-blue-strong);
	border-right: 1px solid var(--lp-bg-blue-soft);
}

#toplogo {
	height: 34px;
	width: auto;
	padding-top: 6px;
}

.formbuttons input.button {
	color: #fff;
	text-shadow: none;
	border: 1px solid var(--lp-primary-light);
	background: var(--lp-primary);
	background-image: none;
	box-shadow: none;
}

.formbuttons input.button:hover,
.formbuttons input.button:focus {
	color: #fff;
	border-color: var(--lp-primary-light);
	background: var(--lp-primary-light);
	box-shadow: 0 0 0 2px rgba(var(--lp-primary-rgb), .22);
}

.formbuttons input.button:active {
	background: var(--lp-primary-dark);
	background-image: none;
}

input.button.mainaction {
	color: #fff;
	text-shadow: none;
	border: 1px solid var(--lp-accent-strong);
	background: var(--lp-accent);
	background-image: none;
	box-shadow: none;
}

input.button.mainaction:hover,
input.button.mainaction:focus {
	color: #fff;
	border-color: var(--lp-accent-strong);
	background: var(--lp-accent-strong);
	background-image: none;
	box-shadow: 0 0 0 2px rgba(var(--lp-accent-rgb), .30);
}

input.button.mainaction:active {
	background: var(--lp-accent-strong);
	background-image: none;
}

input[type="text"], input[type="email"], input[type="password"], textarea,
button, input.button,
.formbuttons button, .formbuttons input.button, .oauthlogin .button,
a.button, .buttongroup,
.buttongroup a.button.first, .buttongroup a.button:first-child,
.buttongroup a.button.last, .buttongroup a.button:last-child,
#message.statusbar,
#messagestack div,
.uibox,
.uibox .boxfooter,
.uibox .boxfooter .listbutton:first-child,
#login-form .box-inner,
.dropbutton .dropbuttontip:focus, .toolbar a.button:focus,
a.menuselector,
a.menuselector .handle,
.popupmenu, #rcmKSearchpane,
.popupmenu.dropdown,
#rcmKSearchpane,
#rcmdraglayer,
.attachmentslist li a:focus, .attachmentslist li a.drop:focus,
#mailview-bottom,
#composeview-right #mailview-bottom,
#messagelistfooter,
.folderlist li.mailbox .unreadcount,
.messagelist thead th:first-child,
#messagecontframe,
#mailview-right #messageheader,
.moreheaderstoggle,
#all-headers,
#messageheader.previewheader #contactphoto,
#messageheader.previewheader #contactphoto img,
#messageheader #contactphoto,
#messageheader #contactphoto img,
#messagecontent .rightcol, #messagepreview .rightcol,
#composeheaders,
#composebodycontainer,
#composebody,
.widescreen #messagelistheader,
#contact-frame,
#preferences-frame,
img.skinthumbnail {
	border-radius: 0;
}

button.mainaction:active, input.button.mainaction:active,
.buttongroup a.button:focus, .buttongroup a.button.selected:focus,
#message.statusbar,
#messagestack div,
#login-form .box-inner,
a.menuselector:active {
	background-image: none;
}

body {
	font-family: var(--lp-font-sans);
	font-size: 12px;
	background: var(--lp-bg-light);
	background-image: none;
}

.formbuttons button,
.formbuttons input.button,
.oauthlogin .button {
	color: #fff;
	border: 1px solid var(--lp-primary-light);
	background: var(--lp-primary);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}

.formbuttons button:hover,
.formbuttons button:focus,
.formbuttons input.button:hover,
.formbuttons input.button:focus {
	color: #fff;
	border-color: var(--lp-primary-light);
	background: var(--lp-primary-light);
	box-shadow: 0 0 0 2px rgba(var(--lp-primary-rgb), .22);
}

button.mainaction,
input.button.mainaction {
	color: #fff;
	border: 1px solid var(--lp-accent-strong);
	background: var(--lp-accent);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}

button.mainaction:hover,
button.mainaction:focus,
input.button.mainaction:hover,
input.button.mainaction:focus {
	color: #fff;
	border-color: var(--lp-accent-strong);
	background: var(--lp-accent-strong);
	background-image: none;
	box-shadow: 0 0 0 2px rgba(var(--lp-accent-rgb), .30);
}

button.mainaction:active,
input.button.mainaction:active {
	background: var(--lp-accent-strong);
	background-image: none;
}

#login-form .button,
#login-form .button.mainaction {
	color: #fff;
	border-color: var(--lp-accent-strong);
	background-color: var(--lp-accent);
	background-image: none;
	text-shadow: none;
}

#login-form .button:hover,
#login-form .button:focus {
	color: #fff;
	border-color: var(--lp-accent-strong);
	background-color: var(--lp-accent-strong);
}

#login-form .button:active {
	color: #fff;
	background-color: var(--lp-accent-strong);
}

#login-form .box-bottom {
	background: none;
	margin-top: -3px;
	padding-top: 10px;
}

a {
	color: var(--lp-primary-light);
}

a:visited {
	color: var(--lp-primary);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, button:focus, input.button:focus, textarea:focus {
	border-color: var(--lp-primary);
}

input[type="text"]:required, input[type="email"]:required, input[type="password"]:required {
	border-color: var(--lp-primary);
}

.formbuttons button, .formbuttons input.button, .oauthlogin .button {
	border-color: var(--lp-border);
}

.formbuttons button:hover, .formbuttons button:focus, .formbuttons input.button:hover, .formbuttons input.button:focus, input.button.mainaction:hover, input.button.mainaction:focus {
	border-color: var(--lp-border);
}

button:focus, a.button:focus, input.button:focus {
	border-color: var(--lp-primary);
}

.listbox {
	background-color: var(--lp-bg-blue);
}

.boxtitle, .uibox .listing thead th, .uibox .listing thead td {
	border-bottom: var(--lp-border);
}

.uibox .boxtitle, .uibox .listing thead th, .uibox .listing thead td {
	background-color: var(--lp-bg-blue-strong);
	color: var(--lp-primary);
}

.listbox .listitem, .listbox .tablink, .listing tbody td, .listing li {
	border-bottom: var(--lp-border);
}

.listbox .listitem a, .listbox .listitem span, .listbox .tablink a, .listing tbody td, .listing li a {
	color: var(--lp-text);
}

.listing tbody td a {
	color: var(--lp-text);
}

.listing.focus tbody tr.focused > td:first-child {
	border-left: var(--lp-border);
}

.listbox .listitem.selected, .listbox .tablink.selected, .listbox .listitem.selected > a, .listbox .tablink.selected > a, .listing tbody tr.selected td, .listing li.selected, .listing li.selected > a {
	color: var(--lp-primary);
	background-color: var(--lp-bg-blue-strong);
}

ul.listing li {
	background-color: var(--lp-bg-blue);
}

ul.listing li ul {
	border-top: var(--lp-border);
}

.listbox table.listing {
	background-color: var(--lp-bg-blue);
}

.listbox .boxfooter {
	border-top: var(--lp-border);
	background-color: var(--lp-bg-blue);
}

.boxfooter .listbutton {
	background-color: var(--lp-bg-blue-strong);
}

.boxfooter .countdisplay {
	color: var(--lp-text-muted);
}

table.records-table {
	border: var(--lp-border);
}

.records-table thead th, .records-table thead td {
	color: var(--lp-text-muted);
	background-color: var(--lp-bg-blue);
	border-left: var(--lp-border);
}

.records-table thead th a, .records-table thead td a, .records-table thead th span, .records-table thead td span {
	color: var(--lp-text-muted);
}

.records-table tbody td {
	border-left: var(--lp-border);
}

.records-table.focus tbody tr.focused > td:first-child {
	border-left: var(--lp-primary);
}

.records-table tr.selected td {
	background-color: var(--lp-primary-light);
}

.records-table.focus tr.selected td {
	background-color: var(--lp-primary) !important;
}

.listsearchbox {
	background-color: var(--lp-bg-blue-strong);
}

a.menuselector:focus, a.menuselector.focus, a.iconbutton:focus, .pagenav a.button:focus {
	border-color: var(--lp-primary);
}

.googie_list td.googie_list_onhover, ul.toolbarmenu li a.active:hover, ul.toolbarmenu li a.active:focus, #rcmKSearchpane ul li.selected, #pagejump-selector ul li.selected, select.decorated option:hover, select.decorated option[selected='selected'] {
	background-color: var(--lp-primary);
}

.folderlist li.mailbox ul {
	border-top: var(--lp-border);
}

.records-table tr.selected td {
	background-color: var(--lp-primary-light) !important;
	color: #fff !important;
}

.records-table.focus tr.selected td {
	background-color: var(--lp-primary) !important;
	color: #fff !important;
}

button, input.button {
	background-color: var(--lp-bg-blue-soft);
}

label.disabled, button.disabled, a.button.disabled {
	color: var(--lp-text-soft);
}

a.button.pressed, a.button:active, button:active, input.button:active {
	background-color: var(--lp-bg-blue-soft);
}

#message div.loading, #message div.uploading, #message div.warning, #message div.error, #message div.notice, #message div.confirmation, #message-objects div.notice {
	color: var(--lp-text-muted);
}

.contentbox .boxtitle, body.iframe .boxtitle {
	background-color: var(--lp-bg-light);
}

.propform fieldset fieldset legend {
	color: var(--lp-text-muted);
}

.propform a.disabled {
	color: var(--lp-text-soft);
}

ul.proplist li, table.propform td {
	background-color: var(--lp-bg-light);
}

#login-form .button {
	background-color: var(--lp-bg-blue-soft);
}

.searchbox input, #quicksearchbar input {
	background-color: var(--lp-bg-light);
}

.toolbar a.button {
	color: var(--lp-text-muted);
}

a.menuselector {
	background-color: var(--lp-bg-light);
}

.googie_list td span, ul.toolbarmenu li a {
	color: var(--lp-text-muted);
}

.hint {
	color: var(--lp-text-soft);
}

.ui-dialog .propform .ui-tabs-panel {
	background-color: var(--lp-bg-light);
}

#messagetoolbar a.button,
#mailtoolbar a.button,
.toolbar a.button,
#taskbar .button-inner,
#taskbar span.button-inner {
	transition: transform .18s ease, filter .18s ease;
}

#messagetoolbar a.button:hover,
#mailtoolbar a.button:hover,
.toolbar a.button:hover,
#taskbar a:hover .button-inner,
#taskbar a:hover span.button-inner {
	transform: translateY(-1px);
	filter: drop-shadow(0 2px 3px rgba(var(--lp-primary-rgb), .35));
}

#contacts-table td.contact img,
.contactphoto img,
.attachmentslist li a img,
.messageheaderbox img.contactphoto {
	transition: transform .18s ease, filter .18s ease;
}

#contacts-table td.contact a:hover img,
.attachmentslist li a:hover img {
	transform: scale(1.15);
	filter: drop-shadow(0 2px 3px rgba(var(--lp-primary-rgb), .35));
}

@media (prefers-reduced-motion: reduce) {
	#messagetoolbar a.button,
	#mailtoolbar a.button,
	.toolbar a.button,
	#taskbar .button-inner,
	#taskbar span.button-inner,
	#contacts-table td.contact img,
	.attachmentslist li a img { transition: none; }

	#messagetoolbar a.button:hover,
	#mailtoolbar a.button:hover,
	.toolbar a.button:hover,
	#taskbar a:hover .button-inner,
	#taskbar a:hover span.button-inner,
	#contacts-table td.contact a:hover img,
	.attachmentslist li a:hover img { transform: none; filter: none; }
}

a.button, .buttongroup {
	border-color: var(--lp-border);
}

a.button.disabled, input.button.disabled, input.button[disabled], button.disabled, button[disabled], button.disabled:hover, button[disabled]:hover, a.button.disabled:hover, input.button.disabled:hover, input.button[disabled]:hover {
	border-color: var(--lp-border);
}

#message.statusbar {
	border-top-color: var(--lp-border);
}

.uibox {
	border-color: var(--lp-border);
}

.records-table tbody td {
	border-bottom-color: var(--lp-border);
}

.searchbox input, #quicksearchbar input {
	border-color: var(--lp-border);
}

a.menuselector {
	border-color: var(--lp-border);
}

.ui-dialog.ui-widget {
	border-radius: 0 !important;
	border: 2px solid var(--lp-primary-light) !important;
	background: #fff;
	padding: 0 !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35) !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar {
	border-radius: 0 !important;
	border: 0;
	background: var(--lp-primary);
	background-image: none;
	color: #fff;
	padding: 8px 12px;
	font-weight: bold;
}

.ui-dialog.ui-widget .ui-dialog-title,
.ui-dialog.error .ui-dialog-title,
.ui-dialog.warning .ui-dialog-title,
.ui-dialog.confirmation .ui-dialog-title {
	color: #fff;
	font-size: 1.1em;
}

.ui-dialog.ui-widget .ui-dialog-titlebar-close {
	border-radius: 0 !important;
}

.ui-dialog.ui-widget .ui-dialog-content {
	padding: 14px 12px;
	color: var(--lp-text);
}

.ui-dialog.ui-widget .ui-dialog-buttonpane {
	border-top: 1px solid var(--lp-border);
	padding: 8px 12px 12px;
	background: #fff;
}

.ui-dialog.ui-widget .ui-button {
	border-radius: 0 !important;
	border: 1px solid var(--lp-border);
	background: var(--lp-bg-light);
	background-image: none;
	color: var(--lp-primary);
	min-width: 80px;
}

.ui-dialog.ui-widget .ui-button:hover,
.ui-dialog.ui-widget .ui-button:focus {
	background: var(--lp-bg-blue);
	border-color: var(--lp-primary-light);
	color: var(--lp-primary);
}

.ui-dialog.ui-widget .ui-button.mainaction {
	background: var(--lp-accent);
	border-color: var(--lp-accent-strong);
	color: #fff;
}

.ui-dialog.ui-widget .ui-button.mainaction:hover {
	background: var(--lp-accent-strong);
	border-color: var(--lp-accent-strong);
	color: #fff;
}

.ui-widget-overlay.ui-widget-overlay {
	background: rgba(0, 0, 0, .45);
	background-image: none;
	opacity: 1;
}

.ui-widget,
.ui-widget-content,
.ui-widget-header,
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right,
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br,
.ui-menu,
.ui-menu-item,
.ui-menu-item-wrapper,
.ui-autocomplete,
.ui-datepicker,
.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker-header,
.ui-tabs,
.ui-tabs-nav li,
.ui-state-default,
.ui-state-hover,
.ui-state-active,
.ui-state-focus,
.ui-slider,
.ui-slider-handle,
.ui-progressbar,
.ui-progressbar-value,
.ui-selectmenu-button,
.ui-tooltip {
	border-radius: 0 !important;
}

#messagestack div {
	background: var(--lp-primary-dark);
	background-image: none;
	border: 1px solid var(--lp-primary-light);
	border-radius: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

#messagestack div.notice,
#messagestack div.loading,
#messagestack div.uploading {
	color: #ffffff;
}

.popupmenu,
#rcmKSearchpane {
	background: var(--lp-primary-dark);
	box-shadow: 0 2px 6px 0 rgba(14, 23, 45, .45);
}

.popupmenu > .buttons,
ul.toolbarmenu li,
#rcmKSearchpane ul li {
	border-top-color: var(--lp-primary-light);
}

.googie_list td span,
ul.toolbarmenu li a {
	color: var(--lp-text-soft);
}

ul.toolbarmenu li a.active {
	color: #fff;
}

.googie_list td.googie_list_onhover,
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected {
	background-color: var(--lp-primary-light);
}

ul.toolbarmenu li.separator label {
	color: var(--lp-text-soft);
}

ul.toolbarmenu li span.icon,
#rcmKSearchpane ul li i.icon {
	opacity: .55;
}

.watermark {
	background-image: url(images/linuxpro-mark-light.svg);
	background-size: 260px auto;
}

select:not(.decorated) {

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--lp-border);
	border-radius: 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230d2b52'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;

	padding: 3px 24px 3px 6px;
	color: var(--lp-text);
}

select {
	accent-color: var(--lp-primary);
}

select:not(.decorated) option {
	background-color: #fff;
	color: var(--lp-text);
}

select:not(.decorated):disabled {
	color: var(--lp-text-soft);
	background-color: var(--lp-bg-light);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--lp-primary);
}

#composeoptions,
#compose-attachments .hint {
	color: var(--lp-text-muted);
}

#compose-attachments a.button,
#compose-attachments input.button,
#compose-attachments button {
	background: #fff;
	color: var(--lp-primary);
	border: 1px solid var(--lp-border);
	border-radius: 0;
	box-shadow: none;
}

#compose-attachments a.button:hover,
#compose-attachments input.button:hover,
#compose-attachments button:hover {
	background: var(--lp-bg-blue);
	border-color: var(--lp-primary-light);
}

#composebody {
	color: var(--lp-text);
}

/* LinuxPro identity: light wiki surfaces, navy header, wine-red accents. */
:root {
  --lp-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --lp-font-mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}
body, button, input, select, textarea { font-family: var(--lp-font-sans); }
a { color: #1a4f9c; }
a:hover { color: var(--lp-accent); }
.lp-brand { display: flex; align-items: center; gap: 12px; }
.lp-brand img { object-fit: contain; }
.lp-brand-text { display: flex; flex-direction: column; }
.lp-brand-name { font: 700 23px/1.2 var(--lp-font-mono); letter-spacing: -.05em; }
.lp-brand-caption { font: 400 12px/1.5 var(--lp-font-sans); letter-spacing: .12em; }
#topnav .lp-brand { float: left; height: 38px; margin: 4px 20px; color: #fff; }
#topnav .lp-brand-name { font-size: 20px; line-height: 1.1; }
#topnav .lp-brand-caption { font-size: 10px; line-height: 1.2; }
#topnav #toplogo { float: none; margin: 0; width: 36px; height: 36px; }
#login-form { width: 580px; max-width: calc(100% - 32px); margin: 14.56vh auto 2ex; }
#login-form .box-inner {
  box-sizing: border-box;
  width: 480px;
  max-width: 100%;
  min-height: 240px;
  margin: 0 auto;
  padding: 24px;
  background: var(--lp-primary);
  border: 1px solid var(--lp-primary-dark);
  border-top: 4px solid var(--lp-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
#login-form .lp-brand { height: 64px; justify-content: center; gap: 14px; margin-bottom: 11px; transform: none; color: var(--lp-text-on-dark); }
/* Crop only the original mark's transparent left margin; keep its visible pixels and proportions. */
#login-form #logo { width: 32px; height: 64px; object-fit: cover; object-position: right; flex: 0 0 auto; margin: 0; }
#login-form .lp-brand-name { font-size: 34px; }
#login-form td.title { color: #fff; }
#login-form input[type="text"], #login-form input[type="password"] { box-sizing: border-box; width: 100%; }
#login-form table { width: 100%; }
#login-form .box-bottom {
  margin-top: -3px;
  padding-top: 10px;
  background: url(images/login_shadow.png) top center no-repeat;
  background-size: min(550px, 100%) 10px;
}
#bottomline { font-family: var(--lp-font-mono); border-top: 1px dashed var(--lp-border); padding-top: 14px; }
/* Login like Criare: light canvas, LinuxPro navy input block. */
body.lp-login { background: #e6e9ed; }
body.lp-login #bottomline,
body.lp-login #bottomline a.support-link { color: var(--lp-text-muted); }
body.lp-login #bottomline {
  position: fixed;
  right: 18px;
  bottom: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: right;
  font: 400 11px/1.5 var(--lp-font-sans);
}
body.lp-login #bottomline a.support-link:hover { color: var(--lp-accent); }
body.lp-login #bottomline a:focus-visible { outline-color: var(--lp-primary-light); }
body.lp-login #login-form .noscriptwarning { color: var(--lp-accent); }
#topline { background: var(--lp-primary); }
#taskbar a.button-selected { color: #fff; border-bottom: 3px solid var(--lp-accent); }
.uibox { border: 1px dashed #404a56; box-shadow: none; }
#login-form input:focus-visible, #login-form button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lp-primary-light); outline-offset: 2px;
}
body.lp-login .box-inner input:focus-visible,
body.lp-login .box-inner button:focus-visible { outline-color: var(--lp-text-on-dark); }
@media screen and (max-width: 480px) {
  #login-form .box-inner { padding: 18px 18px 24px; }
  #login-form td.title { width: 70px; }
  #login-form .lp-brand { gap: 12px; transform: none; }
  #login-form #logo { width: 29px; height: 58px; }
  #login-form .lp-brand-name { font-size: 30px; }
}

/* Keep the footer clear of the form on short landscape screens/zoom. */
@media screen and (max-height: 480px) {
  body.lp-login #bottomline { position: static; margin-top: 16px; }
}

/* AAA: usable controls, quiet feedback, and an unbroken desktop layout. */
.lp-brand-caption { text-transform: uppercase; }
#taskbar a.button-selected { border-bottom: 0; box-shadow: inset 0 -3px var(--lp-accent); }
#taskbar a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; background: var(--lp-primary-light); }
#topline a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#topnav .lp-brand { text-decoration: none; }
#topnav .lp-brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Desktop input footprint measured on the live Criare login: 326.3125 × 25 px. */
#login-form form table { width: 418.3125px; max-width: 100%; margin: 0 auto; table-layout: fixed; border-collapse: collapse; }
#login-form td.input { padding: 6px 0; }
#login-form td.title { width: 80px; padding: 6px 12px 6px 0; font-size: 13px; font-weight: 500; }
#login-form input[type="text"], #login-form input[type="password"] { height: 25px; padding: 4px 8px; font-size: 12px; line-height: 15px; color: var(--lp-text); }
#login-form .lp-brand { margin-bottom: 8px; }
#login-form p.formbuttons { box-sizing: border-box; width: 100%; margin: 12px auto 0; padding: 0; text-align: center; }
/* Compact button measured on the live Criare desktop login. */
#login-form #rcmloginsubmit { box-sizing: border-box; margin: 0; width: 64.640625px; min-width: 0; height: 26px; min-height: 26px; padding: 4px 12px; font-size: 13.2px; line-height: 16px; font-weight: 600; }
body.lp-login #login-form input:focus-visible,
body.lp-login #login-form button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; }
body.lp-login #bottomline { font-size: 12px; }
body.lp-login #bottomline a.support-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; }
.toolbar a.button:focus-visible, a.menuselector:focus-visible, a.iconbutton:focus-visible, .pagenav a.button:focus-visible { outline: 2px solid var(--lp-primary-light); outline-offset: 2px; }
.toolbar a.button:not(.disabled):hover { color: var(--lp-primary); background-color: transparent; }
#messagestack div.error, #messagestack div.warning, #messagestack div.confirmation { color: #fff; }
#messagestack div.error { border-left: 4px solid var(--lp-accent-strong); }
#messagestack div.warning { border-left: 4px solid #f7b955; }
@media (forced-colors: active) {
  #taskbar a.button-selected { box-shadow: none; outline: 2px solid Highlight; outline-offset: -3px; }
  #taskbar a:focus-visible { outline: 2px solid CanvasText; outline-offset: -5px; }
}
@media screen and (max-width: 480px) {
  #login-form input[type="text"], #login-form input[type="password"] { height: 25px; padding: 3px 8px; font-size: 16px; line-height: 17px; }
  #login-form td.title { width: 66px; padding-right: 10px; }
  #login-form #rcmloginsubmit { width: 104px; height: 44px; min-height: 44px; }
  #login-form .box-inner { min-height: 248px; }
}

/* Scale the login layout, not a bitmap/transform. CSS viewport dimensions also
   respect OS scaling and browser zoom. The shorter axis limits ultrawide screens.
   1920x1080: 1.25x; 2560x1440: 1.5x; 3840x2160: 2x (maximum). */
@media screen and (min-width: 1600px) and (min-height: 900px) {
  body.lp-login {
    --lp-login-unit: clamp(1px, min(calc(.5px + .0390625vw), calc(.5px + .069444444vh)), 2px);
  }
  body.lp-login #login-form { width: calc(580 * var(--lp-login-unit)); font-size: calc(12 * var(--lp-login-unit)); }
  body.lp-login #login-form .box-inner {
    width: calc(480 * var(--lp-login-unit));
    min-height: calc(240 * var(--lp-login-unit));
    padding: calc(24 * var(--lp-login-unit));
    border-width: var(--lp-login-unit);
    border-top-width: calc(4 * var(--lp-login-unit));
    box-shadow: 0 calc(2 * var(--lp-login-unit)) calc(6 * var(--lp-login-unit)) rgba(0, 0, 0, .18);
  }
  body.lp-login #login-form .lp-brand { height: calc(64 * var(--lp-login-unit)); gap: calc(14 * var(--lp-login-unit)); margin-bottom: calc(8 * var(--lp-login-unit)); }
  body.lp-login #login-form #logo { width: calc(32 * var(--lp-login-unit)); height: calc(64 * var(--lp-login-unit)); }
  body.lp-login #login-form .lp-brand-name { font-size: calc(34 * var(--lp-login-unit)); }
  body.lp-login #login-form .lp-brand-caption { font-size: calc(12 * var(--lp-login-unit)); }
  body.lp-login #login-form form table { width: calc(418.3125 * var(--lp-login-unit)); }
  body.lp-login #login-form td.title { width: calc(80 * var(--lp-login-unit)); padding: calc(6 * var(--lp-login-unit)) calc(12 * var(--lp-login-unit)) calc(6 * var(--lp-login-unit)) 0; font-size: calc(13 * var(--lp-login-unit)); }
  body.lp-login #login-form td.input { padding: calc(6 * var(--lp-login-unit)) 0; }
  body.lp-login #login-form input[type="text"], body.lp-login #login-form input[type="password"] { height: calc(25 * var(--lp-login-unit)); padding: calc(4 * var(--lp-login-unit)) calc(8 * var(--lp-login-unit)); font-size: calc(12 * var(--lp-login-unit)); line-height: calc(15 * var(--lp-login-unit)); border-width: var(--lp-login-unit); }
  body.lp-login #login-form p.formbuttons { margin-top: calc(12 * var(--lp-login-unit)); }
  body.lp-login #login-form #rcmloginsubmit { width: calc(64.640625 * var(--lp-login-unit)); height: calc(26 * var(--lp-login-unit)); min-height: calc(26 * var(--lp-login-unit)); padding: calc(4 * var(--lp-login-unit)) calc(12 * var(--lp-login-unit)); font-size: calc(13.2 * var(--lp-login-unit)); line-height: calc(16 * var(--lp-login-unit)); border-width: var(--lp-login-unit); }
  body.lp-login #login-form .box-bottom { margin-top: calc(-3 * var(--lp-login-unit)); padding-top: calc(10 * var(--lp-login-unit)); background-size: min(calc(550 * var(--lp-login-unit)), 100%) calc(10 * var(--lp-login-unit)); }
  body.lp-login #login-form #message { min-height: calc(40 * var(--lp-login-unit)); padding: calc(5 * var(--lp-login-unit)) calc(25 * var(--lp-login-unit)); }
  body.lp-login #login-form #message div { font-size: calc(12 * var(--lp-login-unit)); }
  body.lp-login #bottomline { right: calc(18 * var(--lp-login-unit)); bottom: calc(14 * var(--lp-login-unit)); font-size: calc(12 * var(--lp-login-unit)); }
  body.lp-login #bottomline a.support-link { min-height: calc(32 * var(--lp-login-unit)); padding: 0 calc(6 * var(--lp-login-unit)); }
}

/* Center the visible label + input group, without the old empty label column.
   Intrinsic label width also accommodates translated labels. Mobile stays fixed. */
@media screen and (min-width: 481px) {
  body.lp-login #login-form form table { width: auto; table-layout: auto; }
  body.lp-login #login-form td.title { width: auto; }
  body.lp-login #login-form td.input { width: 326.3125px; }
}
@media screen and (min-width: 1600px) and (min-height: 900px) {
  body.lp-login #login-form td.input { width: calc(326.3125 * var(--lp-login-unit)); }
}