/* Bluebound Webmail — independent branded skin for Roundcube Elastic
   Custom styles override Elastic only; original skin remains unchanged. */
/* System font fallback, without third-party tracking requests. */
:root {
  --bb-navy:#0a1f4a; --bb-navy2:#102b61; --bb-blue:#377df1; --bb-blue-hover:#2367d9;
  --bb-sky:#76d5f5; --bb-ink:#142440; --bb-muted:#61728b; --bb-bg:#f4f7fc;
  --bb-border:#dfe7f2; --bb-soft:#eaf2ff; --bb-white:#ffffff;
  --bb-shadow:0 18px 54px rgba(20,43,81,.10);
}
html,body,button,input,select,textarea {font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
button,input,select,textarea {font-size:inherit;}
body {color:var(--bb-ink);}
a,button,input,textarea,select {transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid rgba(55,125,241,.45);outline-offset:2px;
}
::selection {background:#b6e4fc;color:#102b61;}

/* Branded two-column sign-in experience */
body.task-login {min-width:260px;height:auto;min-height:100vh;overflow-y:auto;background:#f6f9fd;}
.task-login #layout {display:block;min-height:100vh;height:auto;overflow:visible;background:transparent;}
.task-login #layout-content.bb-auth-content {display:block;width:100%;height:auto;min-height:100vh;max-width:none;margin:0;padding:0;text-align:left;background:transparent;}
.bb-auth-grid {display:grid;grid-template-columns:minmax(380px,47%) minmax(0,53%);min-height:100vh;width:100%;}
.bb-auth-aside {position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:clamp(34px,4.1vw,76px);color:#fff;
  background:radial-gradient(ellipse at 88% 26%,#204a8f 0,transparent 43%),linear-gradient(150deg,#081c42 1%,#0a2556 60%,#0b2b63 100%);}
.bb-auth-aside:before {content:'';position:absolute;inset:0;pointer-events:none;opacity:.24;
  background-image:radial-gradient(rgba(154,206,255,.38) .75px,transparent .75px);
  background-size:29px 29px;mask-image:linear-gradient(110deg,transparent 10%,#000 95%);}
.bb-auth-aside:after {content:'';position:absolute;right:-180px;bottom:-240px;width:540px;height:540px;border:1px solid rgba(169,216,255,.17);border-radius:50%;box-shadow:0 0 0 60px rgba(169,216,255,.025),0 0 0 130px rgba(169,216,255,.022);pointer-events:none;}
.bb-auth-aside>* {position:relative;z-index:1;}
.bb-wordmark {display:block;width:min(225px,80%);height:auto;max-height:92px;object-fit:contain;object-position:left center;}
.bb-auth-aside-center {max-width:560px;padding:55px 0 80px;}
.bb-auth-kicker {display:inline-flex;align-items:center;gap:11px;color:#b8dcff;font-size:11px;font-weight:800;letter-spacing:.19em;}
.bb-auth-spark,.bb-secure-dot {display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:#7bd4fa;box-shadow:0 0 0 5px rgba(123,212,250,.1);}
.bb-auth-aside h2 {font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(35px,3.6vw,62px);font-weight:800;line-height:1.16;letter-spacing:-.055em;margin:32px 0 22px;}
.bb-auth-aside h2 span {color:var(--bb-sky);}
.bb-auth-aside-center>p {max-width:440px;color:#ceddf0;font-size:16px;line-height:1.8;margin:0 0 37px;}
.bb-feature-row {display:flex;align-items:center;gap:13px;margin:16px 0;font-size:14px;font-weight:600;color:#ecf5ff;}
.bb-feature-icon {display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid rgba(156,222,255,.34);border-radius:9px;background:rgba(117,195,247,.13);color:#9be3ff;font-size:16px;}
.bb-auth-aside-footer {display:flex;align-items:center;gap:16px;color:#aabedb;font-size:12px;}
.bb-auth-dots {display:flex;gap:6px;}
.bb-auth-dots i {display:block;width:7px;height:7px;border-radius:50%;background:#73caf6;opacity:.65;}
.bb-auth-dots i:nth-child(2) {opacity:.3;}
.bb-auth-dots i:nth-child(3) {opacity:.15;}
.bb-auth-main {display:flex;min-width:0;flex-direction:column;justify-content:space-between;align-items:center;padding:32px clamp(22px,4vw,65px) 25px;position:relative;}
.bb-auth-topbar {display:flex;align-items:center;align-self:stretch;justify-content:flex-end;gap:11px;min-height:44px;width:100%;}
.bb-brand-symbol {display:none;width:36px;height:36px;}
.bb-mobile-name {display:none;color:#112c5e;font-family:Manrope,sans-serif;font-weight:700;}
.bb-mobile-name strong {color:var(--bb-blue);}
.bb-secure-label {display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid #e1e9f4;border-radius:100px;background:#fff;color:#586c87;font-size:12px;font-weight:700;white-space:nowrap;}
.bb-secure-dot {width:7px;height:7px;background:#3abf98;box-shadow:0 0 0 4px #e8f8f1;}
.bb-auth-card {width:100%;max-width:460px;margin:65px auto;padding:0;}
.bb-auth-badge {display:inline-flex;align-items:center;padding:7px 12px;margin:0 0 22px;border:1px solid #d8e8ff;background:#eaf3ff;color:#2f72dd;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.13em;}
.bb-auth-card h2 {font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(29px,3vw,39px);font-weight:800;letter-spacing:-.048em;line-height:1.17;color:var(--bb-navy);margin:0 0 15px;}
.bb-auth-desc {font-size:15px;line-height:1.8;color:var(--bb-muted);max-width:410px;margin:0 0 34px;}
.task-login #logo {display:none!important;}
.task-login #login-form {position:static;top:auto;left:auto;margin:0;max-width:none;width:100%;text-align:left;}
.task-login #login-form table,.task-login #login-form tbody {display:block;width:100%;margin:0;}
.task-login #login-form tr {display:flex;flex-direction:column;width:100%;margin:0 0 20px;}
.task-login #login-form td {display:block;width:100%;border:0;padding:0;text-align:left;}
.task-login #login-form td.title {padding:0 0 9px;font-size:13px;font-weight:800;letter-spacing:.005em;color:#1d3559;}
.task-login #login-form td.title label {display:block;margin:0;}
.task-login #login-form td.input input {display:block;width:100%;height:55px;max-width:none;border:1px solid #d5e0ee;border-radius:12px;background:#fff;color:#102b54;padding:13px 16px;font-size:15px;box-shadow:0 3px 10px rgba(9,38,79,.02);}
.task-login #login-form td.input input::placeholder {color:#8da0b9;}
.task-login #login-form td.input input:focus {border-color:var(--bb-blue);outline:none;box-shadow:0 0 0 4px rgba(55,125,241,.12);}
.task-login #login-form .formbuttons {display:block;margin:27px 0 0;padding:0;}
.task-login #rcmloginsubmit {display:flex;align-items:center;justify-content:center;width:100%;min-height:55px;padding:13px 22px;background:var(--bb-blue);color:#fff;border:1px solid var(--bb-blue);border-radius:12px;box-shadow:0 9px 22px rgba(55,125,241,.23);font-size:15px;font-weight:800;line-height:1.25;cursor:pointer;}
.task-login #rcmloginsubmit:hover {background:var(--bb-blue-hover);border-color:var(--bb-blue-hover);box-shadow:0 12px 28px rgba(55,125,241,.3);transform:translateY(-1px);}
.task-login #rcmloginsubmit:before {display:none!important;}
.task-login #login-footer {display:flex;align-items:center;justify-content:center;color:#8a9ab1;font-size:11px;font-weight:500;margin:20px 0 0;line-height:1.5;}
.bb-auth-help {display:flex;align-items:center;gap:9px;color:#6d7f99;font-size:12px;line-height:1.5;margin:28px 0 0;padding:18px 0 0;border-top:1px solid #e0e7f1;}
.bb-auth-help-icon {display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#eaf3ff;color:#3880ef;font-size:18px;}
.bb-auth-meta {display:flex;align-items:center;justify-content:center;gap:11px;color:#95a4bb;font-size:12px;line-height:1.5;width:100%;padding-top:18px;}
.bb-auth-meta a {color:#547399;font-weight:600;}
.bb-auth-meta a:hover {color:var(--bb-blue);}
.bb-auth-meta-dot {font-size:14px;color:#a6b5c6;}
.task-login .noscriptwarning {position:fixed;z-index:999;bottom:0;background:#fff;}

/* Application shell: mailbox, folders, contacts, composer and settings */
body:not(.task-login) {background:var(--bb-bg);}
body:not(.task-login) #layout {background:var(--bb-bg);color:var(--bb-ink);}
body:not(.task-login) #layout-menu {background:linear-gradient(180deg,#0a1f4a 0%,#103063 100%);border-right:1px solid #17396d;color:#dbeaff;}
body:not(.task-login) #layout-menu .popover-header {background:transparent!important;}
body:not(.task-login) #layout-menu #logo {object-fit:contain;max-width:47px;max-height:51px;width:auto;height:auto;padding:4px;margin:auto;}
body:not(.task-login) #taskmenu a {color:#b9d1f2;border-radius:12px;transition:background .18s,color .18s;}
body:not(.task-login) #taskmenu a:hover {background:rgba(255,255,255,.10);color:#fff;}
body:not(.task-login) #taskmenu a.selected {background:rgba(116,201,246,.18);color:#fff;box-shadow:inset 3px 0 0 #76d5f5;}
body:not(.task-login) #taskmenu a.compose {background:#377df1;color:#fff;box-shadow:0 7px 18px rgba(25,87,187,.23);border-radius:14px;}
body:not(.task-login) #taskmenu a.compose:hover {background:#5796fb;color:#fff;}
body:not(.task-login) #taskmenu .special-buttons a {opacity:.88;}
body:not(.task-login) #layout-sidebar {background:#f7f9fd;border-right:1px solid var(--bb-border);}
body:not(.task-login) #layout-list {background:#fff;border-right:1px solid var(--bb-border);}
body:not(.task-login) #layout-content {background:#fff;}
body:not(.task-login) #layout .header {background:#fff;border-bottom:1px solid var(--bb-border);color:#243e62;}
body:not(.task-login) #layout .header .header-title {color:#142e57;font-weight:800;}
body:not(.task-login) #layout .footer {background:#fcfdff;border-top:1px solid var(--bb-border);}
body:not(.task-login) #layout .header .button {color:#42648e;}
body:not(.task-login) #layout .header .button:hover {color:var(--bb-blue);background:#eaf3ff;}
body:not(.task-login) .folderlist li {border-radius:9px;margin:2px 8px;}
body:not(.task-login) .folderlist li a {color:#3e5473;}
body:not(.task-login) .folderlist li.selected,body:not(.task-login) .folderlist li.selected>a {background:#e6f0ff!important;color:#135bbb!important;font-weight:800;}
body:not(.task-login) .folderlist li:hover {background:#edf4fd;}
body:not(.task-login) .folderlist .unreadcount,body:not(.task-login) .folderlist .count {background:#deebff;color:#2265c6;border-radius:7px;}
body:not(.task-login) .listing {color:#1b3253;}
body:not(.task-login) .listing tr,body:not(.task-login) .listing li {border-color:#edf1f6;}
body:not(.task-login) .listing tr:hover,body:not(.task-login) .listing li:hover {background:#f6f9ff;}
body:not(.task-login) .listing tr.selected,body:not(.task-login) .listing li.selected {background:#e5f0ff!important;color:#174a91;}
body:not(.task-login) .listing .unread,body:not(.task-login) .listing .unread .subject {font-weight:800;color:#102b59;}
body:not(.task-login) #mailsearchform {background:#f3f7fc;border:1px solid #e1e8f2;border-radius:12px;margin:8px;box-shadow:none;}
body:not(.task-login) #mailsearchform input {background:transparent;color:#17345d;}
body:not(.task-login) .toolbar a.button:hover {color:var(--bb-blue);}
body:not(.task-login) .btn-primary,body:not(.task-login) button.mainaction,body:not(.task-login) .button.mainaction {background:var(--bb-blue);border-color:var(--bb-blue);color:#fff;border-radius:10px;font-weight:700;box-shadow:0 6px 15px rgba(52,111,213,.14);}
body:not(.task-login) .btn-primary:hover,body:not(.task-login) button.mainaction:hover,body:not(.task-login) .button.mainaction:hover {background:var(--bb-blue-hover);border-color:var(--bb-blue-hover);}
body:not(.task-login) input.form-control:focus,body:not(.task-login) textarea.form-control:focus,body:not(.task-login) select.form-control:focus {border-color:#6ca4fa;box-shadow:0 0 0 3px rgba(55,125,241,.12);}
body:not(.task-login) .form-control {border-radius:9px;border-color:#d9e4f2;}
body:not(.task-login) .formcontent {background:#fff;}
body:not(.task-login) #message-header .subject,body:not(.task-login) #contacthead .names {font-family:Manrope,sans-serif;color:#132b54;letter-spacing:-.025em;}
body:not(.task-login) .popupmenu,body:not(.task-login) .ui-dialog,body:not(.task-login) .popover {border:1px solid var(--bb-border);border-radius:13px;box-shadow:var(--bb-shadow);}
body:not(.task-login) .popupmenu a:hover,body:not(.task-login) .popupmenu .active {background:#eaf3ff;color:#175cc1;}
body:not(.task-login) .nav-link.active,body:not(.task-login) .ui-tabs-active {color:var(--bb-blue);border-color:var(--bb-blue);}
body:not(.task-login) .quota-widget .bar {background:var(--bb-blue);}
body:not(.task-login) #messagelist-content,body:not(.task-login) .scroller {scrollbar-color:#bfd0e7 transparent;scrollbar-width:thin;}
body:not(.task-login) .listing-info {color:#71819a;}
body:not(.task-login) .searchbar input {color:#1c365f;}
body:not(.task-login) .propform .formbuttons {background:transparent;}
body:not(.task-login) .formcontent .propform,body:not(.task-login) .formcontent form {max-width:100%;}

/* Compact accessible layouts, including Roundcube's native mobile navigation */
@media(max-width:1000px) {
  .bb-auth-grid {grid-template-columns:minmax(0,40%) minmax(0,60%);}
  .bb-auth-aside {padding:35px;}
  .bb-auth-aside h2 {font-size:clamp(29px,3.6vw,45px);}
  .bb-auth-aside-center>p {font-size:14px;}
  .bb-auth-main {padding:22px 32px;}
  .bb-auth-card {max-width:435px;}
}
@media(max-width:760px) {
  .bb-auth-grid {display:block;min-height:100vh;}
  .bb-auth-aside {display:none;}
  .bb-auth-main {min-height:100vh;padding:21px 22px 28px;background:radial-gradient(circle at 100% 5%,#e7f1ff 0,transparent 45%),#f7faff;}
  .bb-auth-topbar {justify-content:space-between;}
  .bb-brand-symbol,.bb-mobile-name {display:block;}
  .bb-mobile-name {margin-right:auto;font-size:17px;}
  .bb-secure-label {padding:8px 10px;font-size:11px;}
  .bb-auth-card {max-width:440px;margin:60px auto;padding:0;}
  .bb-auth-card h2 {font-size:32px;}
  .bb-auth-desc {margin-bottom:28px;}
  .task-login #login-form tr {margin-bottom:17px;}
  .task-login #login-form td.input input {height:53px;}
  body:not(.task-login) #layout-menu {background:var(--bb-navy);}
  body:not(.task-login) #layout .header {background:#fff;}
}
@media(max-width:410px) {
  .bb-auth-main {padding:14px 18px 20px;}
  .bb-auth-topbar {gap:7px;}
  .bb-mobile-name {font-size:14px;}
  .bb-secure-label {font-size:10px;padding:7px 8px;}
  .bb-brand-symbol {width:30px;height:30px;}
  .bb-auth-card {margin:50px auto 30px;}
  .bb-auth-card h2 {font-size:28px;}
  .bb-auth-desc {font-size:14px;}
  .bb-auth-help {font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}
/* Keep bright Bluebound branding legible even when the browser prefers dark mode. */
html.dark-mode .task-login .bb-auth-card h2,html.dark-mode .task-login .bb-auth-card td.title label {color:var(--bb-navy)!important;}
html.dark-mode .task-login .bb-auth-desc {color:var(--bb-muted)!important;}
html.dark-mode body.task-login,html.dark-mode body.task-login #layout,html.dark-mode body.task-login #layout-content {background:#f7faff!important;color:var(--bb-ink)!important;}

/* Sign-in password visibility control */
.bb-password-cell {position:relative;}
.task-login #login-form td.input input[type="password"],.task-login #login-form td.input input[type="text"]#rcmloginpwd {padding-right:84px;}
.bb-password-toggle {position:absolute;right:9px;top:50%;transform:translateY(-50%);min-width:62px;min-height:35px;padding:7px 10px;border-radius:8px;border:0;background:#eff5fe;color:#2766bf;font-size:12px;font-weight:800;cursor:pointer;}
.bb-password-toggle:hover {background:#dceaff;color:#174e9c;}
.bb-password-toggle:focus-visible {outline:2px solid var(--bb-blue);outline-offset:2px;}
/* Webmail details: compose, settings, contacts and confirmation panels */
body:not(.task-login) #layout-content .content,body:not(.task-login) #layout-content .scroller {background:transparent;}
body:not(.task-login) #message-header {padding:14px 18px 8px;}
body:not(.task-login) #message-header .subject {font-size:22px;}
body:not(.task-login) #compose-headers,body:not(.task-login) #composebodycontainer {background:#fff;}
body:not(.task-login) #compose-headers .form-group {border-bottom-color:#e8edf5;}
body:not(.task-login) #compose-headers input,body:not(.task-login) #compose-headers textarea {background:#fff;border-radius:9px;}
body:not(.task-login) #layout-content .tabsbar {background:#f5f8fd;border-color:#e3eaf4;}
body:not(.task-login) #layout-content .tabsbar .selected {color:var(--bb-blue);border-color:var(--bb-blue);}
body:not(.task-login) .listing td,body:not(.task-login) .listing li {line-height:1.48;}
body:not(.task-login) .listing td.subject {color:#193659;}
body:not(.task-login) #layout-sidebar .header {background:#f7f9fd;}
body:not(.task-login) #layout-sidebar .header .username {font-weight:800;color:#244a7d;}
body:not(.task-login) .preferences .form-group,body:not(.task-login) .settings .form-group {padding-block:6px;}
body:not(.task-login) .form-group .form-control {min-height:39px;}
body:not(.task-login) .ui-dialog-titlebar {background:#f4f8ff;color:#19385e;}
body:not(.task-login) .ui-dialog-buttonpane {background:#f9fbff;}
body:not(.task-login) .alert {border-radius:10px;}
body:not(.task-login) .btn,body:not(.task-login) .button {transition:background-color .15s,color .15s,box-shadow .15s;}
/* Dark mode remains available and readable */
html.dark-mode body:not(.task-login),html.dark-mode body:not(.task-login) #layout {background:#0d182c;color:#e2eafa;}
html.dark-mode body:not(.task-login) #layout-sidebar {background:#111f36;border-color:#283e5d;color:#d5e3f7;}
html.dark-mode body:not(.task-login) #layout-list,html.dark-mode body:not(.task-login) #layout-content {background:#15243b;color:#e4edf8;border-color:#283e5d;}
html.dark-mode body:not(.task-login) #layout .header,html.dark-mode body:not(.task-login) #layout .footer {background:#1a2b45;color:#d7e6fa;border-color:#30425d;}
html.dark-mode body:not(.task-login) #layout .header .header-title,html.dark-mode body:not(.task-login) #layout .header .button {color:#e7f2ff;}
html.dark-mode body:not(.task-login) #layout-sidebar .header,html.dark-mode body:not(.task-login) #layout-content .tabsbar {background:#1a2b45;border-color:#2b4566;}
html.dark-mode body:not(.task-login) .listing {color:#dbe8f8;}
html.dark-mode body:not(.task-login) .listing tr:hover,html.dark-mode body:not(.task-login) .listing li:hover {background:#223955;}
html.dark-mode body:not(.task-login) .listing tr.selected,html.dark-mode body:not(.task-login) .listing li.selected {background:#1a456f!important;color:#fff;}
html.dark-mode body:not(.task-login) .listing .unread,html.dark-mode body:not(.task-login) .listing .unread .subject,html.dark-mode body:not(.task-login) .listing td.subject {color:#ebf4ff;}
html.dark-mode body:not(.task-login) #mailsearchform {background:#1e344f;border-color:#35516e;}
html.dark-mode body:not(.task-login) #mailsearchform input,html.dark-mode body:not(.task-login) .form-control {color:#ecf4ff;background:#1b2c46;border-color:#344a66;}
html.dark-mode body:not(.task-login) .formcontent,html.dark-mode body:not(.task-login) #compose-headers,html.dark-mode body:not(.task-login) #composebodycontainer {background:#15243b;color:#e6edfb;}
html.dark-mode body:not(.task-login) #message-header .subject,html.dark-mode body:not(.task-login) #contacthead .names {color:#f0f6ff;}
html.dark-mode body:not(.task-login) .popupmenu,html.dark-mode body:not(.task-login) .ui-dialog {background:#1a2c47;border-color:#395170;color:#e4eefa;}
html.dark-mode body:not(.task-login) .folderlist li.selected,html.dark-mode body:not(.task-login) .folderlist li.selected>a {background:#1a456f!important;color:#eaf4ff!important;}
html.dark-mode body:not(.task-login) .folderlist li a {color:#d0e2fa;}
html.dark-mode body:not(.task-login) #layout .footer {background:#12243b;}