/* ============================================================
   Arden Systems Mail — Custom Theme v4
   Dark: #080809  |  Panel: #0d0d0f  |  Red: #ff3a1a
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Sora:wght@300;400;500;600&display=swap');

/* ================================================================
   GLOBAL BASE + DARK-MODE BODY OVERRIDE
   (elastic dark-mode sets body to #21292c — we kill it here)
   ================================================================ */
html, body,
html.dark-mode, html.dark-mode body {
  background-color: #080809 !important;
  background: #080809 !important;
  color: #f0ede8 !important;
  font-family: 'Sora', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

a { color: #ff6b4a !important; text-decoration: none !important; }
a:hover { color: #ff3a1a !important; }
hr, .separator { border: none !important; border-top: 1px solid rgba(255,58,26,0.2) !important; }

/* ================================================================
   SCROLLBARS
   ================================================================ */
* { scrollbar-color: rgba(255,58,26,0.3) #0d0d0f !important; scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0d0d0f !important; }
::-webkit-scrollbar-thumb { background: rgba(255,58,26,0.3) !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,58,26,0.55) !important; }

/* ================================================================
   LAYOUT PANELS
   elastic dark-mode sets these to transparent (inherits body)
   since we fixed body they're fine, but borders need fixing
   ================================================================ */
#layout, #layout > div,
#layout-sidebar, #layout-list, #layout-content,
.app-content,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar {
  background-color: #080809 !important;
  background: #080809 !important;
  border-color: rgba(255,58,26,0.18) !important;
}

/* ================================================================
   TASK MENU / LEFT ICON STRIP
   ================================================================ */
#taskmenu, ul#taskmenu,
html.dark-mode #layout-menu,
html.dark-mode #taskmenu {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
  border-right: 1px solid rgba(255,58,26,0.18) !important;
}

#taskmenu a,
html.dark-mode #taskmenu a,
html.dark-mode #layout-menu a {
  color: #6a6865 !important;
  font-family: 'Sora', sans-serif !important;
  border-left: 2px solid transparent !important;
  transition: all 0.15s ease !important;
}

#taskmenu a:hover, #taskmenu a.selected, #taskmenu a.active,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.active {
  background: rgba(255,58,26,0.12) !important;
  background-color: rgba(255,58,26,0.12) !important;
  color: #ff3a1a !important;
  border-left-color: #ff3a1a !important;
}

/* elastic sets .action-buttons (logout etc) to blue */
html.dark-mode #taskmenu .action-buttons a {
  color: #6a6865 !important;
}
html.dark-mode #taskmenu .action-buttons a:hover {
  color: #ff3a1a !important;
  background: rgba(255,58,26,0.12) !important;
}

/* ================================================================
   HEADER BARS (top of each panel column)
   ================================================================ */
#header,
#layout > div > .header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
  border-bottom: 1px solid rgba(255,58,26,0.2) !important;
  border-color: rgba(255,58,26,0.2) !important;
  color: #f0ede8 !important;
}

html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .footer a.button {
  color: #9a9690 !important;
}

/* Special buttons panel in task menu header */
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
}

html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: #141416 !important;
}

/* ================================================================
   TOOLBAR (top action bar)
   ================================================================ */
.toolbar, #toolbar, .toolbar-menu,
.menu.toolbar,
html.dark-mode .menu.toolbar {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
  border-bottom: 1px solid rgba(255,58,26,0.15) !important;
}

.toolbar a, .toolbar button, .toolbar .inner,
html.dark-mode .menu.toolbar a {
  color: #6a6865 !important;
  font-family: 'Sora', sans-serif !important;
}

.toolbar a:hover, .toolbar button:hover,
html.dark-mode .menu.toolbar a:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover {
  background: rgba(255,58,26,0.1) !important;
  background-color: rgba(255,58,26,0.1) !important;
  color: #ff3a1a !important;
}

/* elastic sets toolbar selected to green — override */
html.dark-mode .menu.toolbar a.selected {
  color: #ff3a1a !important;
  background: transparent !important;
}

html.dark-mode .menu.toolbar .dropbutton a.dropdown:hover {
  background-color: rgba(255,58,26,0.12) !important;
}

/* ================================================================
   SEARCH BAR
   ================================================================ */
.searchbar,
html.dark-mode .searchbar {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
  border-color: rgba(255,58,26,0.18) !important;
}

html.dark-mode .searchbar form::before,
html.dark-mode .searchbar a {
  color: #6a6865 !important;
}

html.dark-mode .searchbar input {
  color: #f0ede8 !important;
  background: transparent !important;
}

/* ================================================================
   FOLDER / CONTACT LISTING (sidebar + lists)
   ================================================================ */
.folder-list, #mailboxlist,
#layout-sidebar .scroller {
  background: #0d0d0f !important;
}

/* elastic dark: listing text teal, borders teal, selected blue */
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a,
html.dark-mode .listing li a,
#mailboxlist li a, .folder-list li a {
  color: #9a9690 !important;
  font-family: 'Sora', sans-serif !important;
  border-left: 2px solid transparent !important;
}

html.dark-mode .listing li ul,
html.dark-mode .listing tbody td,
html.dark-mode .listing li {
  border-color: rgba(255,255,255,0.05) !important;
}

/* Selected / active folder */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
#mailboxlist li.selected > a,
#mailboxlist li.active > a {
  background: rgba(255,58,26,0.14) !important;
  background-color: rgba(255,58,26,0.14) !important;
  color: #ff3a1a !important;
  border-left-color: #ff3a1a !important;
}

html.dark-mode .listing li.selected ul,
html.dark-mode .listing li.selected ul div.treetoggle {
  background-color: #0d0d0f !important;
  color: #9a9690 !important;
}

/* Hover */
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover,
#mailboxlist li a:hover {
  background: rgba(255,58,26,0.1) !important;
  background-color: rgba(255,58,26,0.1) !important;
  color: #ff3a1a !important;
  border-left-color: #ff3a1a !important;
}

/* Unread folder */
#mailboxlist li.unread > a { color: #f0ede8 !important; font-weight: 600 !important; }

/* Drop target */
html.dark-mode .listing li.droptarget > a,
html.dark-mode .listing tr.droptarget > td {
  background-color: rgba(255,58,26,0.2) !important;
}

/* ================================================================
   UNREAD BADGE
   (elastic dark sets to #4d6066 grey)
   ================================================================ */
.unread-count, span.unread, .badge,
html.dark-mode .folderlist li.mailbox .unreadcount {
  background: #ff3a1a !important;
  background-color: #ff3a1a !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
}

/* ================================================================
   MESSAGE LIST
   ================================================================ */
#layout-list .scroller, .message-list, #messagelist,
table.listing tbody, .listing tbody,
html.dark-mode .messagelist {
  background: #080809 !important;
  background-color: #080809 !important;
  color: #f0ede8 !important;
}

table.listing tr, .listing tr {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

table.listing thead th, .listing thead th {
  background: #0d0d0f !important;
  color: #4a4845 !important;
  border-bottom: 1px solid rgba(255,58,26,0.2) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

table.listing tr td, .listing tr td { color: #f0ede8 !important; background: transparent !important; }
table.listing tr:hover td, .listing tr:hover td { background: rgba(255,58,26,0.06) !important; }

/* Selected row — elastic dark uses blue #37beff */
table.listing tr.selected td, .listing tr.selected td,
table.listing tr.focused td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
  background: rgba(255,58,26,0.15) !important;
  color: #fff !important;
}

/* Message metadata text (size, date) */
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto {
  color: #5a5856 !important;
}

/* Unread icon */
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before {
  color: #ff3a1a !important;
}

/* Flagged */
.messagelist span.flagged::before { color: #ff3a1a !important; }

/* ================================================================
   MESSAGE READING PANE
   ================================================================ */
#message-content, .message-content, .rcmContent {
  background: #141416 !important;
  color: #f0ede8 !important;
}

#message-header, .message-part .headers-table {
  background: #0d0d0f !important;
  border-bottom: 1px solid rgba(255,58,26,0.18) !important;
  padding: 16px 20px !important;
}

#message-header .subject {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  color: #f0ede8 !important;
}

.message-part .headers-table th {
  color: #5a5856 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* ================================================================
   COMPOSE
   ================================================================ */
#compose-content, #compose, .compose-header {
  background: #141416 !important;
  color: #f0ede8 !important;
}

.compose-header .header-row { border-bottom: 1px solid rgba(255,58,26,0.12) !important; }

.compose-header .header-row label {
  color: #5a5856 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* ================================================================
   FORMS & INPUTS
   elastic dark: form-control bg #21292c, border #7c949c (teal)
   ================================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select,
.form-control,
html.dark-mode .form-control,
html.dark-mode .custom-file-label {
  background: #141416 !important;
  background-color: #141416 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #f0ede8 !important;
  border-radius: 6px !important;
  font-family: 'Sora', sans-serif !important;
}

html.dark-mode .form-control:not(.is-invalid),
html.dark-mode .custom-file-label:not(.is-invalid) {
  border-color: rgba(255,255,255,0.09) !important;
}

input:focus, textarea:focus,
.form-control:focus,
html.dark-mode .form-control:focus,
html.dark-mode .custom-file-label:focus {
  background: #16161a !important;
  background-color: #16161a !important;
  border-color: rgba(255,58,26,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,58,26,0.1) !important;
  outline: none !important;
  color: #f0ede8 !important;
}

input::placeholder, textarea::placeholder { color: #3a3835 !important; opacity: 1 !important; }
.input-group-text { background: #1a1a1e !important; border-color: rgba(255,255,255,0.08) !important; color: #5a5856 !important; }

/* ================================================================
   BUTTONS
   elastic dark: primary #006a9d blue, secondary #4d6066 teal
   ================================================================ */
.btn, button, a.button, .toolbar a.button, .toolbar button {
  font-family: 'Sora', sans-serif !important;
  border-radius: 6px !important;
}

html.dark-mode .btn { color: #f0ede8 !important; }
html.dark-mode .btn:hover, html.dark-mode .btn:focus { color: #fff !important; }

.btn-primary, a.button.primary, button.primary,
html.dark-mode .btn-primary {
  background: #cc2200 !important;
  background-color: #cc2200 !important;
  border: 1px solid #cc2200 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.btn-primary:hover, a.button.primary:hover,
html.dark-mode .btn-primary:hover:not(:disabled) {
  background: #ff3a1a !important;
  background-color: #ff3a1a !important;
  border-color: #ff3a1a !important;
  box-shadow: 0 0 16px rgba(255,58,26,0.3) !important;
}

.btn-secondary, a.button.secondary, button.secondary,
html.dark-mode .btn-secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,58,26,0.28) !important;
  color: #9a9690 !important;
}

.btn-secondary:hover, a.button.secondary:hover,
html.dark-mode .btn-secondary:hover:not(:disabled) {
  background: rgba(255,58,26,0.1) !important;
  background-color: rgba(255,58,26,0.1) !important;
  border-color: rgba(255,58,26,0.55) !important;
  color: #f0ede8 !important;
}

html.dark-mode .btn-danger {
  background-color: rgba(204,34,0,0.2) !important;
  border: 1px solid rgba(204,34,0,0.4) !important;
  color: #ff9280 !important;
}
html.dark-mode .btn-danger:hover:not(:disabled) {
  background-color: rgba(204,34,0,0.35) !important;
}

/* Floating compose button — elastic dark sets to blue */
.floating-action-buttons a.button,
html.dark-mode .floating-action-buttons a.button {
  background: #ff3a1a !important;
  background-color: #ff3a1a !important;
  box-shadow: 0 4px 20px rgba(255,58,26,0.4) !important;
}

.floating-action-buttons a.button:hover,
html.dark-mode .floating-action-buttons a.button:hover {
  background: #ff4d30 !important;
  box-shadow: 0 6px 28px rgba(255,58,26,0.55) !important;
}

/* ================================================================
   POPUPS / DROPDOWNS / DIALOGS
   ================================================================ */
.popover, .dropdown-menu, .ui-dialog, .popover-body, .menu,
html.dark-mode.layout-small .popover,
html.dark-mode.layout-phone .popover {
  background: #141416 !important;
  background-color: #141416 !important;
  border: 1px solid rgba(255,58,26,0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65) !important;
  border-radius: 10px !important;
  color: #f0ede8 !important;
}

html.dark-mode.layout-small .popover-header,
html.dark-mode.layout-phone .popover-header {
  background: #0d0d0f !important;
  border-bottom: 1px solid rgba(255,58,26,0.2) !important;
  color: #f0ede8 !important;
}

.dropdown-item, .menu li a, .menu a {
  color: #9a9690 !important;
  border-radius: 5px !important;
}

.dropdown-item:hover, .menu li a:hover, .menu a:hover,
.menu li.selected a, .menu a.selected {
  background: rgba(255,58,26,0.12) !important;
  color: #ff3a1a !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: #0d0d0f !important;
  border-bottom: 1px solid rgba(255,58,26,0.2) !important;
  color: #f0ede8 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ui-dialog .ui-dialog-content { background: #141416 !important; color: #f0ede8 !important; }
.ui-dialog .ui-dialog-buttonpane { background: #0d0d0f !important; border-top: 1px solid rgba(255,58,26,0.2) !important; }

/* ================================================================
   ALERTS / TOASTS
   ================================================================ */
html.dark-mode #messagestack div {
  background-color: #141416 !important;
  color: #f0ede8 !important;
  border: 1px solid rgba(255,58,26,0.2) !important;
}
html.dark-mode #messagestack .alert-danger {
  background-color: rgba(204,34,0,0.2) !important;
  border-color: rgba(204,34,0,0.4) !important;
  color: #ffb3a7 !important;
}
html.dark-mode #messagestack .alert-success {
  background-color: rgba(0,180,80,0.15) !important;
  border-color: rgba(0,180,80,0.4) !important;
  color: #a3f0c4 !important;
}
html.dark-mode #messagestack .alert-warning {
  background-color: rgba(220,150,0,0.15) !important;
  border-color: rgba(220,150,0,0.4) !important;
  color: #f5d080 !important;
}
html.dark-mode #messagestack .loading {
  background-color: #141416 !important;
}
.alert-danger, .notice.error {
  background: rgba(204,34,0,0.15) !important; border: 1px solid rgba(204,34,0,0.4) !important; color: #ffb3a7 !important;
}
.alert-success, .notice.confirmation {
  background: rgba(0,180,80,0.12) !important; border: 1px solid rgba(0,180,80,0.4) !important; color: #a3f0c4 !important;
}
.alert-warning, .notice.warning {
  background: rgba(220,150,0,0.12) !important; border: 1px solid rgba(220,150,0,0.4) !important; color: #f5d080 !important;
}

/* ================================================================
   ATTACHMENTS
   elastic dark: bg #374549 (teal)
   ================================================================ */
.attachmentslist,
html.dark-mode .attachmentslist {
  background: #0d0d0f !important;
  background-color: #0d0d0f !important;
  border: 1px solid rgba(255,58,26,0.18) !important;
  border-radius: 6px !important;
}
html.dark-mode .attachmentslist a,
html.dark-mode .attachmentslist li .attachment-name { color: #f0ede8 !important; }
html.dark-mode .attachmentslist li .attachment-size { color: #6a6865 !important; }

/* ================================================================
   MISC
   ================================================================ */
.header, .footer { border-color: rgba(255,58,26,0.15) !important; }

html.dark-mode #logo { opacity: 1 !important; }

/* iframe loader overlay */
html.dark-mode .iframe-loader {
  background-color: rgba(8,8,9,0.9) !important;
}
html.dark-mode .iframe-loader .spinner-border {
  color: #ff3a1a !important;
  border-color: #ff3a1a rgba(255,58,26,0.2) rgba(255,58,26,0.2) rgba(255,58,26,0.2) !important;
}

/* ================================================================
   ████  LOGIN PAGE  ████
   ================================================================ */
body.task-login,
html.dark-mode body.task-login {
  background-color: #080809 !important;
  background: #080809 !important;
  background-image:
    linear-gradient(rgba(255,58,26,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,58,26,0.05) 1px, transparent 1px),
    radial-gradient(ellipse 600px 500px at 50% 50%, rgba(255,58,26,0.07) 0%, transparent 70%) !important;
  background-size: 50px 50px, 50px 50px, 100% 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

body.task-login #layout,
body.task-login #layout > div,
html.dark-mode body.task-login #layout,
html.dark-mode body.task-login #layout > div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100vh !important;
}

body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  background: rgba(13, 13, 15, 0.96) !important;
  background-color: rgba(13, 13, 15, 0.96) !important;
  border: 1px solid rgba(255,58,26,0.25) !important;
  border-radius: 16px !important;
  padding: 48px 44px !important;
  width: 420px !important;
  max-width: calc(100vw - 32px) !important;
  min-height: auto !important;
  box-shadow:
    0 0 0 1px rgba(255,58,26,0.05),
    0 24px 64px rgba(0,0,0,0.75),
    0 0 100px rgba(255,58,26,0.06) !important;
  flex: none !important;
  position: relative !important;
}

/* Red top accent line on card */
body.task-login #layout-content::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #ff3a1a, transparent) !important;
  border-radius: 0 0 2px 2px !important;
}

/* Logo */
body.task-login #logo,
html.dark-mode body.task-login #logo {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  margin: 0 auto 10px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 18px rgba(255,58,26,0.3)) !important;
}

/* "SIGN IN" heading injected via pseudo */
body.task-login #login-form::before {
  content: 'SIGN IN' !important;
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  color: #f0ede8 !important;
  margin: 16px 0 28px !important;
}

/* Login form table */
body.task-login #login-form table { width: 100% !important; border-collapse: collapse !important; }
body.task-login #login-form table tr { background: transparent !important; border: none !important; }
body.task-login #login-form table td.title { display: none !important; }
body.task-login #login-form table td.input { padding-bottom: 12px !important; }

/* Login inputs */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input[type="email"],
body.task-login #login-form .form-control,
html.dark-mode body.task-login #login-form .form-control {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #f0ede8 !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 12px 16px !important;
  height: 46px !important;
  box-shadow: none !important;
}

body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus,
html.dark-mode body.task-login #login-form .form-control:focus {
  background: rgba(255,255,255,0.07) !important;
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,58,26,0.55) !important;
  box-shadow: 0 0 0 3px rgba(255,58,26,0.12) !important;
}

/* Login button */
body.task-login #rcmloginsubmit,
body.task-login #login-form button.mainaction,
body.task-login #login-form button[type="submit"],
html.dark-mode body.task-login .btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, #cc2200 0%, #ff3a1a 100%) !important;
  background-color: #cc2200 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(255,58,26,0.3) !important;
  margin-top: 4px !important;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #login-form button.mainaction:hover,
html.dark-mode body.task-login .btn-primary:hover:not(:disabled) {
  filter: brightness(1.12) !important;
  box-shadow: 0 6px 28px rgba(255,58,26,0.5) !important;
}

/* Footer/product name below form */
body.task-login #login-footer {
  text-align: center !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #3a3835 !important;
  margin-top: 24px !important;
}
body.task-login #login-footer a { color: #3a3835 !important; }