/* Aiogo Hosting brand layer for Roundcube Elastic. Keep message bodies untouched. */
:root {
  --aiogo-ink: #07111f;
  --aiogo-panel: #0d1929;
  --aiogo-panel-raised: #122238;
  --aiogo-line: #233248;
  --aiogo-mint: #5bf0c8;
  --aiogo-blue: #6da9ff;
  --aiogo-text: #f7fbff;
  --aiogo-muted: #a7b5c8;
  --aiogo-danger: #ff8295;
}

html,
body,
body.task-login,
body.task-mail,
body.task-settings,
body.task-addressbook,
body.task-calendar {
  /* Keep the app readable in legacy browsers that do not support CSS vars. */
  color: #f7fbff !important;
  background: #07111f !important;
  color: var(--aiogo-text) !important;
  background: var(--aiogo-ink) !important;
}

body.task-login #layout,
body.task-login #layout-content {
  color: #f7fbff !important;
  background: #07111f !important;
  color: var(--aiogo-text) !important;
  background: var(--aiogo-ink) !important;
}

/* Elastic hard-codes its dark palette into its compiled CSS, so scope explicit
   brand colors to Roundcube's application chrome instead of relying on LESS vars. */
body.task-mail #layout,
body.task-settings #layout,
body.task-addressbook #layout,
body.task-calendar #layout,
body.task-mail #layout-menu,
body.task-settings #layout-menu,
body.task-addressbook #layout-menu,
body.task-calendar #layout-menu,
body.task-mail #layout-sidebar,
body.task-settings #layout-sidebar,
body.task-addressbook #layout-sidebar,
body.task-calendar #layout-sidebar,
body.task-mail #layout-list,
body.task-settings #layout-list,
body.task-addressbook #layout-list,
body.task-calendar #layout-list,
body.task-mail #layout-content,
body.task-settings #layout-content,
body.task-addressbook #layout-content,
body.task-calendar #layout-content {
  color: var(--aiogo-text) !important;
  background-color: var(--aiogo-ink) !important;
  border-color: var(--aiogo-line) !important;
}

body.task-mail #layout-menu,
body.task-settings #layout-menu,
body.task-addressbook #layout-menu,
body.task-calendar #layout-menu {
  background-color: var(--aiogo-ink) !important;
}

body.task-mail #layout > div > .header,
body.task-settings #layout > div > .header,
body.task-addressbook #layout > div > .header,
body.task-calendar #layout > div > .header,
body.task-mail #layout > div > .footer,
body.task-settings #layout > div > .footer,
body.task-addressbook #layout > div > .footer,
body.task-calendar #layout > div > .footer,
body.task-mail .toolbar,
body.task-settings .toolbar,
body.task-addressbook .toolbar,
body.task-calendar .toolbar,
body.task-mail .searchbar,
body.task-settings .searchbar,
body.task-addressbook .searchbar,
body.task-calendar .searchbar {
  color: var(--aiogo-text) !important;
  background-color: var(--aiogo-panel) !important;
  border-color: var(--aiogo-line) !important;
}

body.task-mail #layout-sidebar,
body.task-settings #layout-sidebar,
body.task-addressbook #layout-sidebar,
body.task-calendar #layout-sidebar,
body.task-mail #layout-list,
body.task-settings #layout-list,
body.task-addressbook #layout-list,
body.task-calendar #layout-list {
  background-color: var(--aiogo-panel) !important;
}

body.task-mail #layout-content,
body.task-settings #layout-content,
body.task-addressbook #layout-content,
body.task-calendar #layout-content {
  background-color: var(--aiogo-ink) !important;
}

body.task-mail #layout-menu a,
body.task-settings #layout-menu a,
body.task-addressbook #layout-menu a,
body.task-calendar #layout-menu a,
body.task-mail #layout-sidebar a,
body.task-settings #layout-sidebar a,
body.task-addressbook #layout-sidebar a,
body.task-calendar #layout-sidebar a,
body.task-mail #layout-list a,
body.task-settings #layout-list a,
body.task-addressbook #layout-list a,
body.task-calendar #layout-list a {
  color: var(--aiogo-muted);
}

body.task-mail #layout-menu a:hover,
body.task-settings #layout-menu a:hover,
body.task-addressbook #layout-menu a:hover,
body.task-calendar #layout-menu a:hover,
body.task-mail #layout-sidebar a:hover,
body.task-settings #layout-sidebar a:hover,
body.task-addressbook #layout-sidebar a:hover,
body.task-calendar #layout-sidebar a:hover,
body.task-mail #layout-list a:hover,
body.task-settings #layout-list a:hover,
body.task-addressbook #layout-list a:hover,
body.task-calendar #layout-list a:hover {
  color: var(--aiogo-mint) !important;
}

body.task-mail #layout-menu a.selected,
body.task-mail #layout-menu a.active,
body.task-mail #layout-sidebar .selected,
body.task-mail #layout-sidebar .active,
body.task-mail #layout-list .selected,
body.task-mail #layout-list .active,
body.task-mail .messagelist tr.selected,
body.task-mail .messagelist tr.focused,
body.task-mail .listing li.selected,
body.task-settings .listing li.selected,
body.task-addressbook .listing li.selected {
  color: var(--aiogo-text) !important;
  background-color: #183153 !important;
}

body.task-mail #layout-menu,
body.task-mail #layout-sidebar,
body.task-mail #layout-list,
body.task-mail #layout-content,
body.task-settings #layout-sidebar,
body.task-settings #layout-content,
body.task-addressbook #layout-sidebar,
body.task-addressbook #layout-content {
  border-color: var(--aiogo-line) !important;
}

a,
a:visited,
.link {
  color: var(--aiogo-blue);
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--aiogo-mint);
}

button,
.btn,
input[type="button"],
input[type="submit"],
.button,
.toolbar a,
.toolbar button {
  color: var(--aiogo-text);
  background-color: var(--aiogo-panel-raised);
  border-color: var(--aiogo-line);
}

button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.toolbar a:hover,
.toolbar button:hover {
  color: var(--aiogo-mint);
  border-color: var(--aiogo-blue);
}

.btn-primary,
button.primary,
input.primary,
input[type="submit"].button,
body.task-login #login-form input[type="submit"],
#login-form input[type="submit"],
body.task-login #rcmloginsubmit {
  color: var(--aiogo-ink);
  background: var(--aiogo-mint) !important;
  border-color: var(--aiogo-mint) !important;
  font-weight: 700;
}

.btn-primary:hover,
button.primary:hover,
input.primary:hover,
body.task-login #login-form input[type="submit"]:hover,
#login-form input[type="submit"]:hover {
  color: var(--aiogo-ink);
  background: #84f6d8;
  border-color: #84f6d8;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-control:focus {
  color: var(--aiogo-text);
  background-color: #091525;
  border-color: var(--aiogo-line);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--aiogo-muted);
  opacity: 0.8;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
button:focus-visible,
a:focus-visible {
  border-color: var(--aiogo-blue);
  outline: 2px solid color-mix(in srgb, var(--aiogo-blue) 42%, transparent);
  outline-offset: 1px;
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--aiogo-blue) 20%, transparent);
}

.selected,
.active,
.focused,
.selected > td,
.messagelist tbody tr.selected,
.messagelist tbody tr.focused,
.folderlist li.selected,
.folderlist li.focused,
.listing tbody tr.selected {
  color: var(--aiogo-text);
  background-color: #183153;
}

body.task-mail .messagelist tr:hover,
body.task-settings .listing li:hover,
body.task-addressbook .listing li:hover {
  color: var(--aiogo-text) !important;
  background-color: #122238 !important;
}

.badge,
.unreadcount,
.count {
  color: var(--aiogo-ink);
  background: var(--aiogo-mint);
}

.text-muted,
.hint,
.form-text,
.listing thead,
.messagelist thead,
.footer,
.login-footer {
  color: var(--aiogo-muted);
}

body.task-login #login-form,
body.task-login #login-form table,
body.task-login .login-form {
  color: #f7fbff;
  background-color: #0d1929;
  border-color: #233248;
  color: var(--aiogo-text);
  background-color: var(--aiogo-panel);
  border-color: var(--aiogo-line);
}

body.task-login #login-form,
body.task-login .login-form {
  border-radius: 16px;
  box-shadow: 0 22px 70px rgb(0 0 0 / 34%);
}

body.task-login #login-form {
  margin-inline: auto;
}

body.task-login #logo,
body.task-login .logo {
  background-image: url("/skins/aiogo/images/aiogo-facebook.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

::selection {
  color: var(--aiogo-ink);
  background: var(--aiogo-mint);
}

@media (max-width: 767.98px) {
  #layout,
  #layout-content,
  #layout-list,
  #layout-sidebar {
    border-radius: 0;
  }

  body.task-login #login-form,
  body.task-login .login-form {
    margin-inline: auto;
  }
}