:root {
    --tt-blue: #3b82f6;
    --tt-blue-dark: #173b7a;
    --tt-teal: #28d7c7;
    --tt-pink: #f472b6;
    --tt-purple: #a78bfa;
    --tt-soft: #e9fbff;
    --tt-soft-pink: #fff0f8;
}
/* Left task menu */
#layout-menu {
    background: linear-gradient(180deg, #173b7a 0%, #1d4f8f 42%, #225f8f 70%, #2b5168 100%);
}

#layout-menu .popover-header img,
#layout-menu #logo {
    background: transparent !important;
}

/* Task icons */
#taskmenu a {
    color: rgba(255,255,255,.88);
}

#taskmenu a:hover,
#taskmenu a.selected {
    background: linear-gradient(135deg, rgba(40,215,199,.26), rgba(244,114,182,.22));
    color: #fff;
}

#taskmenu a.selected {
    border-left: 3px solid var(--tt-teal);
}

/* Main action color */
a,
.btn-link {
    color: var(--tt-blue);
}

a:hover,
.btn-link:hover {
    color: var(--tt-teal);
}

/* Buttons */
.btn-primary,
button.mainaction,
input.button.mainaction {
    background: linear-gradient(135deg, var(--tt-blue), var(--tt-teal));
    border-color: var(--tt-teal);
}

.btn-primary:hover,
button.mainaction:hover,
input.button.mainaction:hover {
    filter: brightness(1.04);
}

/* Selected rows/folders */
.listing li.selected,
.listing tr.selected td,
#mailboxlist li.selected > a,
#messagelist tr.selected td {
    background: linear-gradient(90deg, rgba(34,199,189,.14), rgba(236,122,180,.10)) !important;
}

/* Folder hover */
#mailboxlist li > a:hover {
    background: rgba(34,199,189,.10);
}

/* Input focus */
input:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--tt-teal) !important;
    box-shadow: 0 0 0 .2rem rgba(34,199,189,.18) !important;
}

/* Login page */
body.task-login {
    background:
        radial-gradient(circle at 20% 20%, rgba(34,199,189,.10), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(236,122,180,.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

body.task-login #login-form {
    border-radius: 18px;
}

/* Logout */
#taskmenu a.logout {
    color: var(--tt-pink);
}