/* Lightweight ru-ma.de branding; the remaining UI inherits Elastic. */
:root {
  --ru-ma-teal: #0b5f62;
  --ru-ma-teal-dark: #084a4d;
  --ru-ma-mint: #e8f5f2;
}

a { color: var(--ru-ma-teal); }
a:hover { color: var(--ru-ma-teal-dark); }

.btn-primary,
.floating-action-buttons a.button {
  background-color: var(--ru-ma-teal);
  border-color: var(--ru-ma-teal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.floating-action-buttons a.button:hover {
  background-color: var(--ru-ma-teal-dark);
  border-color: var(--ru-ma-teal-dark);
}

.form-control:focus {
  border-color: #4ca5a5;
  box-shadow: 0 0 0 .2rem rgba(11, 95, 98, .18);
}

.task-login #layout-content {
  background:
    radial-gradient(circle at 15% 15%, rgba(147, 218, 204, .32), transparent 30rem),
    linear-gradient(135deg, #f7fbfa 0%, var(--ru-ma-mint) 100%);
}

.task-login #logo {
  max-width: 260px;
  width: min(260px, 80vw);
  height: auto;
}

html.dark-mode .task-login #layout-content {
  background: linear-gradient(135deg, #132b2c 0%, #102223 100%);
}

/* Keep the account heading and make the brand use the full dark menu width. */
#layout-menu .popover-header {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem !important;
}

#layout-menu .popover-header img#logo {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 56px !important;
  height: auto !important;
  padding: 0 !important;
}

/* Align navigation and folder counters with the selected ru-ma accent. */
#layout-menu,
#layout-menu .popover-header,
#layout-menu .special-buttons { background-color: var(--ru-ma-teal) !important; }
#layout-menu #taskmenu a { color: #fff !important; }
#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a:hover { background-color: var(--ru-ma-teal-dark) !important; }
.folderlist li.mailbox .unreadcount { background-color: var(--ru-ma-teal) !important; }
#layout-menu #taskmenu > a,
#layout-menu #taskmenu > .action-buttons > a { margin-left: auto; margin-right: auto; text-align: center; }
@media screen and (min-width: 481px) and (max-width: 1024px) { #layout-menu { width: 58px !important; } }
@media screen and (min-width: 1025px) { #layout-menu { width: 104px !important; } }
html.layout-small #layout-menu.popover,
html.layout-phone #layout-menu.popover { width: 304px; }
html.layout-small #layout-menu #taskmenu a,
html.layout-phone #layout-menu #taskmenu a { text-align: center; }
html.layout-small #layout-menu #taskmenu a:before,
html.layout-phone #layout-menu #taskmenu a:before { float: none !important; display: inline-block; vertical-align: middle; }

/* Keep the utility actions at the bottom aligned like the primary menu. */
#layout-menu { position: relative; }
html.layout-small #layout-menu,
html.layout-phone #layout-menu { position: absolute; }
#layout-menu #taskmenu .special-buttons { left: 0; right: 0; text-align: center; }
#layout-menu #taskmenu .special-buttons a { margin-left: auto; margin-right: auto; text-align: center; }
html.layout-small #layout-menu #taskmenu .special-buttons,
html.layout-phone #layout-menu #taskmenu .special-buttons { display: block; width: 100%; }
html.layout-small #layout-menu #taskmenu .special-buttons a,
html.layout-phone #layout-menu #taskmenu .special-buttons a { box-sizing: border-box; width: 100%; }
html.layout-small #layout-menu #taskmenu .special-buttons a:before,
html.layout-phone #layout-menu #taskmenu .special-buttons a:before { display: block; float: none !important; width: auto !important; margin: 0 auto .15rem !important; }
html.layout-small #layout-menu #taskmenu .special-buttons a .inner,
html.layout-phone #layout-menu #taskmenu .special-buttons a .inner { display: block; }