@import url("/assets/application-e76b33d7.css");
@import url("/assets/application-e76b33d7.css");

/* Cyberpunk Dark Theme for Redmine 6 - Based on Circle Theme
 * Version: 1.0.0
 * Based on RedmineUp Circle Theme v2.2.4
 * Dark cyberpunk aesthetic with neon accents
 */

/**********************************************************/
/* CUSTOM FONT */
/**********************************************************/

@font-face {
    font-family: "Source Sans 3";
    src: url("/assets/themes/circle/source-sans-3-v19-latin_latin-ext-regular-2a78058f.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/**********************************************************/
/* CSS CUSTOM PROPERTIES - CYBERPUNK PALETTE */
/**********************************************************/

:root {
    /* MAIN BACKGROUND — deep cyber voids (dark → light) */
    --color-main-background-100: hsl(244, 42%, 4%);
    --color-main-background-200: hsl(246, 40%, 5%);
    --color-main-background-300: hsl(248, 38%, 6%);
    --color-main-background-400: hsl(250, 36%, 7%);
    --color-main-background-500: hsl(252, 34%, 8%);
    --color-main-background-600: hsl(254, 32%, 10%);
    --color-main-background-700: hsl(256, 30%, 12%);
    --color-main-background-800: hsl(258, 28%, 14%);
    --color-main-background-900: hsl(260, 25%, 18%);

    /* NEON TURQUOISE — tech glow / primary accent (dark → light) */
    --color-accent-turquoise-100: hsl(174, 100%, 25%);
    --color-accent-turquoise-200: hsl(174, 100%, 30%);
    --color-accent-turquoise-300: hsl(174, 100%, 35%);
    --color-accent-turquoise-400: hsl(174, 100%, 40%);
    --color-accent-turquoise-500: hsl(174, 100%, 45%);
    --color-accent-turquoise-600: hsl(174, 95%, 50%);
    --color-accent-turquoise-700: hsl(174, 90%, 55%);
    --color-accent-turquoise-800: hsl(174, 85%, 60%);
    --color-accent-turquoise-900: hsl(174, 80%, 85%);

    /* NEON PINK — secondary accent / call-to-action (dark → light) */
    --color-accent-pink-100: hsl(315, 95%, 30%);
    --color-accent-pink-200: hsl(315, 95%, 35%);
    --color-accent-pink-300: hsl(315, 95%, 40%);
    --color-accent-pink-400: hsl(315, 95%, 45%);
    --color-accent-pink-500: hsl(315, 95%, 50%);
    --color-accent-pink-600: hsl(315, 92%, 55%);
    --color-accent-pink-700: hsl(315, 90%, 60%);
    --color-accent-pink-800: hsl(315, 88%, 65%);
    --color-accent-pink-900: hsl(315, 85%, 70%);

    /* NEON GREEN — status indicators / highlights (dark → light) */
    --color-accent-green-100: hsl(125, 95%, 30%);
    --color-accent-green-200: hsl(125, 95%, 35%);
    --color-accent-green-300: hsl(125, 95%, 40%);
    --color-accent-green-400: hsl(125, 95%, 45%);
    --color-accent-green-500: hsl(125, 95%, 50%);
    --color-accent-green-600: hsl(125, 92%, 55%);
    --color-accent-green-700: hsl(125, 90%, 60%);
    --color-accent-green-800: hsl(125, 88%, 65%);
    --color-accent-green-900: hsl(125, 85%, 70%);

    /* PURPLE DEPTH — panels / surfaces / elevated layers (dark → light) */
    --color-surface-purple-100: hsl(270, 42%, 6%);
    --color-surface-purple-200: hsl(270, 40%, 8%);
    --color-surface-purple-300: hsl(270, 38%, 10%);
    --color-surface-purple-400: hsl(270, 36%, 12%);
    --color-surface-purple-500: hsl(270, 34%, 14%);
    --color-surface-purple-600: hsl(270, 32%, 16%);
    --color-surface-purple-700: hsl(270, 30%, 18%);
    --color-surface-purple-800: hsl(270, 28%, 20%);
    --color-surface-purple-900: hsl(270, 25%, 22%);

    /* GREY UI — neutral text, borders, inactive elements (dark → light) */
    --color-neutral-grey-100: hsl(240, 10%, 15%);
    --color-neutral-grey-200: hsl(240, 10%, 20%);
    --color-neutral-grey-300: hsl(240, 10%, 25%);
    --color-neutral-grey-400: hsl(240, 10%, 30%);
    --color-neutral-grey-500: hsl(240, 10%, 40%);
    --color-neutral-grey-600: hsl(240, 10%, 60%);
    --color-neutral-grey-700: hsl(240, 10%, 70%);
    --color-neutral-grey-800: hsl(240, 10%, 80%);
    --color-neutral-grey-900: hsl(240, 10%, 90%);

    /* STATUS COLORS */
    --color-status-error: hsl(355, 85%, 55%);
    --color-status-error-bg: hsl(355, 60%, 15%);
    --color-status-error-border: hsl(355, 60%, 30%);
    --color-status-warning: hsl(35, 95%, 50%);
    --color-status-warning-bg: hsl(35, 60%, 12%);
    --color-status-warning-border: hsl(35, 60%, 30%);
    --color-status-success: hsl(125, 80%, 45%);
    --color-status-success-bg: hsl(125, 50%, 12%);
    --color-status-success-border: hsl(125, 50%, 25%);

    /* PRIORITY COLORS */
    --color-priority-highest: hsl(355, 90%, 60%);
    --color-priority-highest-bg: hsl(355, 50%, 15%);
    --color-priority-high: hsl(25, 95%, 55%);
    --color-priority-high-bg: hsl(25, 50%, 14%);
    --color-priority-normal: var(--color-neutral-grey-600);
    --color-priority-low: hsl(200, 60%, 55%);
    --color-priority-low-bg: hsl(200, 40%, 14%);
    --color-priority-lowest: hsl(220, 50%, 55%);
    --color-priority-lowest-bg: hsl(220, 35%, 14%);

    /* BORDER COLORS */
    --color-border-subtle: hsl(250, 20%, 18%);
    --color-border-default: hsl(250, 20%, 22%);
    --color-border-strong: hsl(250, 20%, 28%);

    /* FONTS */
    --font-main: "Source Sans 3", "Noto Sans", sans-serif;
    --font-mono: Consolas, Menlo, "Liberation Mono", Courier, monospace;
}

/**********************************************************/
/* BASE OVERRIDES FROM application.css */
/**********************************************************/

html, body {
    min-height: 100vh;
    background-color: var(--color-main-background-100);
}

body {
    font-family: var(--font-main);
    color: var(--color-neutral-grey-800);
}

#wrapper {
    background: var(--color-main-background-100);
}

#main {
    background-color: var(--color-main-background-200);
}

#content {
    background-color: var(--color-main-background-100);
}

#sidebar {
    background: var(--color-surface-purple-200);
    border-left: 1px solid var(--color-border-subtle);
}

#footer {
    background: var(--color-main-background-100);
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-neutral-grey-500);
}

#footer a, #footer a:visited {
    color: var(--color-neutral-grey-500);
}

#footer a:hover {
    color: var(--color-neutral-grey-700);
}

/* Links - Main content */
a, a:link, a:visited {
    color: var(--color-accent-turquoise-600);
}

a:hover, a:active {
    color: var(--color-accent-turquoise-700);
    text-decoration: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--color-neutral-grey-900);
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: var(--color-neutral-grey-900);
}

/**********************************************************/
/* LOGO */
/**********************************************************/

#header > h1 {
    background: url("/assets/themes/circle/logo-056089e5.png") no-repeat 20px 13px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header > h1 {
        background-image: url("/assets/themes/circle/logo2x-7035eb0e.png");
        background-size: 38px 40px;
    }
}

/**********************************************************/
/* COMMON */
/**********************************************************/

body {
    color: var(--color-neutral-grey-800);
    font-size: 14px;
    line-height: 1.3;
    font-family: var(--font-main);
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

input, textarea, select {
    font-family: var(--font-main);
    font-size: 12px;
    box-sizing: border-box;
}

#main {
    background-color: var(--color-main-background-300);
    padding-left: 20px;
}

#main.nosidebar {
    background-color: var(--color-main-background-100);
    padding: 0px 20px;
}

div#content {
    margin-left: -20px;
    padding-left: 25px;
    padding-top: 15px;
    background-color: var(--color-main-background-100);
}

#footer {
    margin-bottom: 12px;
    padding-top: 18px;
    padding-left: 25px;
    padding-right: 25px;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-neutral-grey-500);
    background: var(--color-main-background-100);
}

input[type="text"].live_search_field,
input[type="text"].questions-search.autocomplete {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
    height: 28px;
    outline: none;
    background-color: var(--color-surface-purple-300);
    border-color: var(--color-border-subtle);
    color: var(--color-neutral-grey-800);
}

input[type="text"].questions-search.autocomplete {
    padding-left: 30px !important;
}

h2 {
    font-size: 25px;
    font-weight: normal;
    margin-top: 10px;
    color: var(--color-neutral-grey-900);
}

#sidebar a.selected {
    background-color: var(--color-surface-purple-500);
    background-position: inherit;
    color: var(--color-neutral-grey-900);
    padding: inherit;
    margin-left: inherit;
    line-height: 1.3em;
}

#sidebar #admin-menu a.selected {
    line-height: 1.7em;
}

img.gravatar {
    padding: 2px;
    border: solid 1px var(--color-border-subtle);
    background: var(--color-surface-purple-300);
    vertical-align: middle;
    border-radius: 0;
}

div.gravatar-with-child > img.gravatar:nth-child(2) {
    border: solid 1px var(--color-border-subtle) !important;
    border-radius: inherit;
    top: 35px;
    left: 35px;
}

/**********************************************************/
/* HEADER */
/**********************************************************/

#header {
    background: linear-gradient(180deg, var(--color-surface-purple-400) 0%, var(--color-main-background-400) 100%);
    min-height: 5em;
    padding: 0;
    border-bottom: 1px solid var(--color-surface-purple-900);
    box-shadow: 0 2px 20px hsla(174, 100%, 40%, 0.15);
}

#header > h1 {
    font-family: var(--font-main);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 25px 10px 25px 70px;
    margin: 0px;
    color: var(--color-neutral-grey-900);
}

#header > h1 .breadcrumbs {
    margin-top: -5px;
}

#header a {
    color: var(--color-neutral-grey-800);
}

#header a:hover {
    color: var(--color-neutral-grey-900);
}

#quick-search {
    margin: 20px 10px;
}

#quick-search select {
    max-width: 300px;
}

#quick-search .drdn-trigger {
    padding-top: 4px;
    font-size: 12px;
}

#quick-search #q {
    background-color: var(--color-surface-purple-400);
    border-color: var(--color-border-subtle);
    color: var(--color-neutral-grey-800);
}

#quick-search #q:focus {
    border-color: var(--color-accent-turquoise-500);
    box-shadow: 0 0 0 2px hsla(174, 100%, 45%, 0.15);
}

/**********************************************************/
/* TOP-MENU */
/**********************************************************/

#top-menu {
    background: var(--color-main-background-100);
    padding: 7px 20px 2px 25px;
    font-size: 0.9em;
    height: 1.8em;
    border-bottom: 1px solid var(--color-border-subtle);
}

#top-menu a {
    margin-right: 15px;
    font-weight: normal;
    color: var(--color-neutral-grey-600);
}

#top-menu a:hover {
    color: var(--color-neutral-grey-800);
    text-decoration: none;
}

#top-menu #loggedas {
    color: var(--color-neutral-grey-600);
}

#top-menu ul {
    overflow: hidden;
}

#top-menu > ul > li {
    padding-bottom: 10px;
}

/**********************************************************/
/* MAIN-MENU */
/**********************************************************/

#main-menu {
    left: 0px;
    width: 100%;
    background-color: var(--color-main-background-100);
    font-weight: 500;
    position: relative;
    height: auto;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-subtle);
}

#main-menu ul {
    padding: 0 15px;
    width: 100%;
    white-space: nowrap;
}

#main-menu li {
    margin: 0px;
    padding: 13px 0px;
    float: none;
    display: inline-block;
}

#main-menu li > a {
    color: var(--color-neutral-grey-600);
    font-size: 100%;
    font-weight: bold;
}

#main-menu li a:hover {
    background: none;
    color: var(--color-neutral-grey-800);
}

#main-menu li a.selected,
#main-menu li a.selected:hover {
    background: none;
    color: var(--color-accent-turquoise-600);
}

#main-menu .menu-button {
    position: absolute;
    right: 10px;
    top: 16px;
    text-indent: 66em;
    overflow: hidden;
    cursor: pointer;
    width: 24px;
    height: 16px;
    background: url("/assets/themes/circle/menu_button-bc5a7c66.png") no-repeat;
    background-size: 16px 16px;
    filter: brightness(0.7);
}

#main-menu .menu-button:hover {
    background: url("/assets/themes/circle/menu_button_hover-345f5690.png") no-repeat;
    background-size: 16px 16px;
    filter: brightness(0.9);
}

/* new object + button */
#main-menu li a.new-object {
    background-color: var(--color-main-background-100);
}

#main-menu .menu-children {
    border: 0px;
    margin-top: 13px;
    left: 0px;
}

#main-menu .menu-children,
#main-menu .menu-children li {
    padding: 0px;
}

#main-menu .menu-children li a {
    padding: 10px 25px;
}

#main-menu .menu-children li a {
    background: var(--color-main-background-200);
    color: var(--color-neutral-grey-600);
    font-weight: bold;
}

#main-menu .menu-children li a:hover {
    color: var(--color-neutral-grey-800);
    background: var(--color-main-background-300);
}

/* tab buttons */
#main-menu div.tabs-buttons {
    position: absolute;
    right: 0;
    width: 60px;
    height: 100%;
    background: var(--color-main-background-100);
    bottom: 0;
    border: 0px;
}

#main-menu button.tab-left,
#main-menu button.tab-right {
    cursor: pointer;
    height: 100%;
    border: 0px;
    position: absolute;
    padding: 4px;
    width: 25px;
    bottom: 0px;
    border-radius: 0px;
    background: var(--color-main-background-100);
    color: var(--color-neutral-grey-600);
    font-weight: bold;
}

#main-menu button.tab-left:hover,
#main-menu button.tab-right:hover {
    background-color: var(--color-main-background-300);
    color: var(--color-neutral-grey-800);
}

#main-menu button.tab-left:focus,
#main-menu button.tab-right:focus {
    outline: 0;
}

#main-menu button.tab-left {
    right: 25px;
}

#main-menu button.tab-left::before {
    content: "\25C0";
    background: none;
}

#main-menu button.tab-right::before {
    right: 0;
    content: "\25b6";
    background: none;
}

#main-menu button.tab-left.disabled,
#main-menu button.tab-right.disabled {
    background-color: var(--color-main-background-100);
    cursor: unset;
    color: var(--color-neutral-grey-400);
}

/**********************************************************/
/* SIDEBAR */
/**********************************************************/

#sidebar {
    line-height: 1.3;
    background: var(--color-surface-purple-200);
    border-left: 1px solid var(--color-border-subtle);
}

#sidebar a, #sidebar a:link, #sidebar a:visited {
    color: var(--color-neutral-grey-700);
}

#sidebar a:hover {
    color: var(--color-neutral-grey-900);
}

#sidebar h3 {
    font-size: 16px;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 5px;
    color: var(--color-neutral-grey-700);
}

#sidebar p {
    margin-top: 5px;
}

#sidebar a.selected {
    background-color: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
}

#sidebar a.selected svg.icon-svg {
    stroke: var(--color-neutral-grey-900) !important;
}

#sidebar hr {
    background: var(--color-border-subtle);
    border: 0;
}

/**********************************************************/
/* FLASH MESSAGES */
/**********************************************************/

#errorExplanation, div.flash, .nodata, .warning, .conflict {
    border: 0px;
    font-weight: bold;
    padding-top: 18px;
    padding-bottom: 18px;
    border-radius: 4px;
}

#errorExplanation:has(svg), div.flash:has(svg), .nodata:has(svg), .warning:has(svg), .conflict:has(svg) {
    padding-left: 45px;
}

div.flash.notice, #flash_notice {
    background: var(--color-status-success-bg);
    color: var(--color-accent-green-700);
    border: 1px solid var(--color-status-success-border);
}

div.flash.error, #errorExplanation {
    background: var(--color-status-error-bg);
    color: var(--color-status-error);
    border: 1px solid var(--color-status-error-border);
}

div.flash.warning, .conflict {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning);
    border: 1px solid var(--color-status-warning-border);
    background-image: none;
}

.nodata, .warning {
    text-align: center;
    background-color: var(--color-surface-purple-300);
    border: 1px solid var(--color-border-default);
    color: var(--color-neutral-grey-600);
}

#errorExplanation ul {
    font-size: 14px;
}

#content div.flash svg.icon-svg,
#content .conflict svg.icon-svg,
#content #errorExplanation svg.icon-svg {
    stroke: currentColor;
}

div.flash.notice svg.icon-svg {
    stroke: var(--color-accent-green-700);
}

/**********************************************************/
/* LOGIN FORM */
/**********************************************************/

#login-form {
    background-color: var(--color-surface-purple-300);
    border: 1px solid var(--color-accent-turquoise-400);
    box-shadow: 0 0 30px hsla(174, 100%, 40%, 0.2);
}

#login-form table {
    border: 0px;
    padding: 30px;
}

#login-form label {
    color: var(--color-neutral-grey-800);
}

#login-form input[type=submit] {
    height: 32px;
}

#login-form input[type=text],
#login-form input[type=password] {
    padding: 1px 10px;
    height: 26px;
    background-color: var(--color-surface-purple-400);
    border-color: var(--color-border-default);
    color: var(--color-neutral-grey-900);
}

#login-form input#login-submit {
    padding: 0px;
}

#login-form a {
    color: var(--color-accent-turquoise-600);
}

/**********************************************************/
/* WIKI */
/**********************************************************/

.wiki h1, .wiki h2, .wiki h3 {
    font-weight: normal;
    color: var(--color-neutral-grey-900);
}

.wiki h1 {
    font-size: 28px;
    margin-top: 10px;
}

.wiki h2 {
    font-size: 20px;
}

.wiki h3 {
    font-size: 16px;
}

.wiki.wiki-page {
    color: var(--color-neutral-grey-700);
}

div.wiki {
    color: var(--color-neutral-grey-800);
}

div.wiki a {
    color: var(--color-accent-turquoise-600);
}

div.wiki a:hover {
    color: var(--color-accent-turquoise-700);
}

div.wiki a.new {
    color: var(--color-accent-pink-500);
}

div.wiki a.new:hover {
    color: var(--color-accent-pink-600);
}

div.wiki table {
    border-color: var(--color-border-default);
}

div.wiki table td,
div.wiki table th {
    border-color: var(--color-border-default);
}

div.wiki pre {
    background-color: var(--color-surface-purple-300);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-neutral-grey-800);
}

div.wiki *:not(pre) > code,
div.wiki > code {
    background: var(--color-surface-purple-400);
    color: var(--color-accent-turquoise-700);
}

div.wiki ul.toc {
    background-color: var(--color-surface-purple-300);
    border: 1px solid var(--color-border-subtle);
}

div.wiki ul.toc a {
    color: var(--color-neutral-grey-700);
}

div.wiki ul.toc a:hover {
    color: var(--color-neutral-grey-900);
}

/**********************************************************/
/* TAGS */
/**********************************************************/

span.tag-label-color {
    border: 0px !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    line-height: 13px;
}

span.tag-label-color:hover {
    opacity: 0.7;
}

.tagit-new .ui-autocomplete-input {
    box-shadow: none;
    background-color: var(--color-surface-purple-300);
}

.tagit-close .text-icon {
    top: -3px;
    position: relative;
}

div#content ul.tagit li {
    margin: 2px 5px 1px 0;
}

div#content .contacts-tags-edit ul.tagit {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-300);
}

/**********************************************************/
/* Context Menu */
/**********************************************************/

div#content .context-menu-selection {
    background-color: var(--color-surface-purple-600) !important;
    color: var(--color-neutral-grey-900);
}

div#content .context-menu-selection td {
    color: var(--color-neutral-grey-900);
}

div#content .context-menu-selection a {
    color: var(--color-neutral-grey-900) !important;
}

div#content #context-menu ul {
    border-radius: 4px;
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}


div#content #context-menu li {
    border-color: transparent;
}

div#content #context-menu li a {
    color: var(--color-neutral-grey-800);
}

div#content #context-menu li:hover {
    background: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
    border: 1px solid transparent;
    border-radius: 2px;
}

div#content #context-menu a.disabled,
div#content #context-menu a.disabled:hover {
    color: var(--color-neutral-grey-500);
}

.contextual .drdn-items > a {
    color: var(--color-neutral-grey-800);
    padding-top: 2px;
    padding-bottom: 2px;
}

.contextual .drdn-items > a:hover {
    background-color: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
    border: 1px solid transparent;
    border-radius: 2px;
}

/**********************************************************/
/* TIP */
/**********************************************************/

div.tooltip:hover span.tip {
    border: 1px solid var(--color-border-default);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

/**********************************************************/
/* jQuery UI */
/**********************************************************/

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--font-main);
    font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea {
    font-size: 12px;
}

.ui-widget-overlay {
    background: #000;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

div.modal {
    padding: 10px;
    background-color: var(--color-surface-purple-300);
}

.ui-dialog.modal .ui-widget-header {
    border: 0px;
    background: var(--color-surface-purple-400);
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--color-neutral-grey-900);
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    border-bottom: solid 1px var(--color-border-subtle);
    margin: -10px -10px 5px -10px;
    border-radius: 0px;
}

.ui-datepicker .ui-widget-header {
    background: var(--color-surface-purple-400);
    border: 0px;
    border-bottom: solid 1px var(--color-border-subtle);
    border-radius: 0px;
    padding: 5px;
    margin: -1px;
}

.ui-menu.ui-widget-content {
    border-radius: 3px;
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-default);
}

.ui-menu .ui-menu-item:hover {
    font-weight: normal;
    background: var(--color-surface-purple-600);
    color: var(--color-neutral-grey-900) !important;
    border: 1px solid var(--color-surface-purple-600);
}

.ui-menu .ui-menu-item.ui-state-focus {
    color: var(--color-neutral-grey-900);
    border-left-color: var(--color-border-default);
    border-right-color: var(--color-border-default);
}

.ui-widget-content select,
.ui-widget-content input[type="text"],
.ui-datepicker .ui-datepicker-title select {
    font-size: 12px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
    border: 1px solid var(--color-surface-purple-500);
    border-radius: 0px;
}

.ui-widget-header .ui-datepicker-title {
    color: var(--color-neutral-grey-900);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid var(--color-surface-purple-400);
    background-color: var(--color-surface-purple-300);
    color: var(--color-neutral-grey-800);
}

.ui-datepicker.ui-widget-content {
    background: var(--color-surface-purple-300);
    border: 1px solid var(--color-border-default);
}

.ui-datepicker .ui-datepicker-buttonpane button {
    font-weight: normal;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--color-accent-pink-100);
    border-color: var(--color-accent-pink-300);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: var(--color-accent-turquoise-100);
    border-color: var(--color-accent-turquoise-400);
}

.ui-widget-header .ui-icon-circle-triangle-e {
    background: url("/assets/themes/circle/next-54188cb6.png") no-repeat 0px 0px;
    filter: invert(0.8);
}

.ui-widget-header .ui-icon-circle-triangle-w {
    background: url("/assets/themes/circle/prev-50faf97c.png") no-repeat 0px 0px;
    filter: invert(0.8);
}

.ui-datepicker .ui-datepicker-next {
    top: 5px;
    right: 10px;
}

.ui-datepicker .ui-datepicker-prev {
    top: 5px;
    left: 10px;
}

.ui-datepicker th {
    color: var(--color-neutral-grey-600);
    font-weight: 500;
}

.ui-datepicker .ui-state-default {
    font-weight: 500;
    color: var(--color-neutral-grey-800);
    border: 1px solid var(--color-surface-purple-300);
    background: var(--color-surface-purple-300);
}

.ui-datepicker .ui-state-default:hover {
    background: var(--color-surface-purple-500);
}

.ui-datepicker .ui-state-active {
    background: var(--color-accent-turquoise-200);
    color: var(--color-neutral-grey-900);
}

.ui-datepicker .ui-state-highlight {
    color: var(--color-accent-pink-600);
}

.ui-datepicker .ui-state-highlight:hover {
    background-color: var(--color-accent-pink-100);
}

#ui-datepicker-div {
    padding: 10px;
}

.ui-datepicker-week-col,
.ui-datepicker .ui-priority-secondary {
    color: var(--color-neutral-grey-500);
}

body .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
    padding-top: 6px;
    color: var(--color-neutral-grey-600);
    font-weight: 500;
    font-size: 0.9em;
}

.ui-dialog .ui-dialog-titlebar-close {
    right: 1em;
    background: var(--color-surface-purple-400);
    border: 0px;
}

.ui-widget-header .ui-icon.ui-icon-closethick {
    background: url("/assets/themes/circle/close-40ad5cbb.png") no-repeat 0px 0px;
    filter: invert(0.8);
}

.ui-widget-header .ui-state-hover .ui-icon.ui-icon-closethick {
    background: url("/assets/themes/circle/close_active-01bf3836.png");
}

.ui-autocomplete,
.ui-menu {
    border-radius: 3px;
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-400);
}

.ui-autocomplete .ui-menu-item > div,
.ui-menu .ui-menu-item > div {
    padding: 4px 8px;
    max-width: 500px;
    color: var(--color-neutral-grey-800);
}

/**********************************************************/
/* BUTTONS */
/**********************************************************/

#ajax-modal p.buttons input,
.ui-datepicker .ui-datepicker-buttonpane button,
.details input[type="submit"],
input[type="button"],
input[type="submit"],
input[type="submit"][name="continue"],
input[type="submit"].small,
input[type="submit"].button-small {
    color: var(--color-neutral-grey-700);
    line-height: 30px;
    font-weight: 500;
    text-align: center;
    height: 32px;
    padding: 0 14px 0;
    border: 1px solid var(--color-border-default);
    font-size: 14px;
    background: var(--color-surface-purple-400);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

#ajax-modal p.buttons input[type="submit"],
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close,
input[type="submit"] {
    background: var(--color-accent-turquoise-500);
    border-color: transparent;
    color: var(--color-main-background-100);
    font-weight: 600;
}

#ajax-modal p.buttons input[type="submit"]:hover,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close.ui-state-hover,
input[type="submit"]:hover {
    background: var(--color-accent-turquoise-600);
    color: var(--color-main-background-100);
}

#ajax-modal p.buttons input:hover,
.ui-datepicker .ui-datepicker-buttonpane button.ui-state-hover,
input[type="submit"][name="continue"]:hover,
input[type="button"]:hover,
.details input[type="submit"]:hover,
input[type="submit"].small:hover,
input[type="submit"].button-small:hover {
    background-color: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
    border-color: var(--color-border-strong);
}

input[type="submit"].button-small,
input[type="button"].small,
.details input[type="submit"],
.ui-datepicker .ui-datepicker-buttonpane button,
.query-columns td.buttons input[type="button"],
input[type="submit"].small {
    height: 26px;
    padding: 0 13px 0;
    line-height: 23px;
    font-size: 12px;
}

/**********************************************************/
/* FORMS COMMON */
/**********************************************************/

input[type="text"]:not(.icon),
input[type="date"],
input[type="password"],
input[type="search"],
input[type="number"],
fieldset#filters td.values input {
    padding: 1px 10px;
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-900);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    height: 26px;
    border: 1px solid var(--color-border-default);
    margin: 0px;
}

fieldset#filters td.values input {
    height: 25px !important;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
fieldset#filters td.values input:focus {
    border-color: var(--color-accent-turquoise-500);
    outline: none;
    box-shadow: 0 0 0 2px hsla(174, 100%, 45%, 0.15);
}

.box {
    padding: 15px;
    background: var(--color-surface-purple-300);
    border: solid 1px var(--color-border-subtle);
    border-radius: 3px;
    color: var(--color-neutral-grey-800);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    z-index: 1;
    padding: 4px 30px 4px 10px;
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-900);
    cursor: pointer;
    border: 1px solid var(--color-border-default);
    background-image: url("/assets/themes/circle/select-95112747.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 18px 16px;
    text-indent: 0.01px;
    text-overflow: "";
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    height: 26px;
    filter: brightness(0.8);
}

select option {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-900);
}

.check_box_group {
    padding: 3px 6px;
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-300);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    select {
        background: url("/assets/themes/circle/select2x-e76f273c.png") no-repeat right var(--color-surface-purple-400);
        background-size: 18px 16px;
    }
}

@-moz-document url-prefix() {
    select {
        padding: 4px 20px 4px 5px;
    }
}

select::-ms-expand {
    display: none;
}

select[multiple="multiple"] {
    height: auto;
    background: var(--color-surface-purple-400);
    padding: 5px 10px;
}

.jstElements button {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-color: var(--color-surface-purple-400) !important;
    border-color: var(--color-border-default) !important;
}

.jstElements button span {
    color: var(--color-neutral-grey-700) !important;
}

textarea {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-900);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid var(--color-border-default);
}

input.hasDatepicker {
    padding-right: 20px;
}

img.ui-datepicker-trigger {
    position: relative;
    margin-left: -21px;
    margin-right: 10px;
    filter: invert(0.7);
}

input, select, button {
    color: var(--color-neutral-grey-800);
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-default);
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    color: var(--color-neutral-grey-500);
    background-color: var(--color-surface-purple-200);
    opacity: 0.6;
}

fieldset {
    border: 1px solid var(--color-border-default);
}

legend {
    color: var(--color-neutral-grey-800);
}

blockquote {
    border-left: 3px solid var(--color-accent-turquoise-500);
    color: var(--color-neutral-grey-700);
}

/**********************************************************/
/* GANTT CHART */
/**********************************************************/

.gantt_subjects div {
    height: 20px;
}

.issue-subject .gravatar {
    margin-right: 2px;
}

.gantt_hdr {
    background-color: var(--color-surface-purple-400);
    border-color: var(--color-border-subtle);
    color: var(--color-neutral-grey-700);
}

.gantt_hdr.nwday {
    background-color: var(--color-surface-purple-200);
    color: var(--color-neutral-grey-500);
}

/**********************************************************/
/* FORMS SPECIFIC */
/**********************************************************/

input#issue_subject,
input#content_comments {
    width: 97%;
}

.contact-issues input#issue_subject {
    width: 93%;
}

/**********************************************************/
/* TABS */
/**********************************************************/

#content .tabs ul {
    border-bottom: 1px solid var(--color-border-default);
}

#content .tabs ul li a {
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-400);
    border-radius: 0px;
    color: var(--color-neutral-grey-600);
}

#content .tabs ul li a.selected {
    border: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-main-background-100);
    background-color: var(--color-main-background-100);
    color: var(--color-accent-turquoise-600);
}

#content .tabs ul li a.selected:hover {
    border-top: 1px solid var(--color-border-default);
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
}

#content .tabs ul li a:hover {
    border-top: 1px solid var(--color-border-default);
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-800);
}

#content .box .tabs ul li a.selected {
    background-color: var(--color-surface-purple-300);
    border-bottom: 1px solid var(--color-surface-purple-300);
}

#content .tabs .tabs-buttons {
    background: var(--color-main-background-100);
    border: 0px;
    height: 28px;
    width: 50px;
    border-bottom: 1px solid var(--color-border-default);
}

#content .tabs .tabs-buttons button.tab-left,
#content .tabs .tabs-buttons button.tab-right {
    cursor: pointer;
    height: 100%;
    border: 1px solid var(--color-border-default);
    border-radius: 0px;
    background-color: var(--color-surface-purple-400);
}

#content .tabs .tabs-buttons button.tab-left.disabled,
#content .tabs .tabs-buttons button.tab-right.disabled {
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface-purple-300);
}

/**********************************************************/
/* TABLES */
/**********************************************************/

table.list, .table-list {
    border-collapse: collapse;
    border-radius: 0px;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}

table.list tbody td,
table.list tbody tr:hover td {
    border: solid 1px var(--color-border-subtle);
}

table.list thead th {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-border-subtle);
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

table.list td,
table.list th {
    padding: 5px;
}

table.list td.icon {
    padding-left: 20px;
}

table.list input[type="checkbox"] {
    vertical-align: baseline;
}

table.list tbody tr:hover {
    background-color: var(--color-surface-purple-500);
}

table.list tr.issue a {
    color: var(--color-neutral-grey-700);
}

table.list tr.issue a:hover {
    color: var(--color-neutral-grey-900);
}

table.index td.avatar {
    border-radius: 0px;
    display: table-cell;
}

/* Priority styling for table rows */
tr.odd.priority-highest,
table.list tbody tr.odd.priority-highest:hover {
    color: var(--color-priority-highest);
    font-weight: bold;
}

tr.odd.priority-highest {
    background: transparent;
    border-left: 3px solid var(--color-priority-highest);
}

tr.even.priority-highest,
table.list tbody tr.even.priority-highest:hover {
    color: var(--color-priority-highest);
    font-weight: bold;
}

tr.even.priority-highest {
    background: transparent;
    border-left: 3px solid var(--color-priority-highest);
}

tr.priority-highest a,
tr.priority-5:hover a {
    color: var(--color-priority-highest);
}

tr.odd.priority-highest td,
tr.even.priority-highest td {
    border-color: var(--color-border-subtle);
}

tr.odd.priority-high,
table.list tbody tr.odd.priority-high:hover,
tr.odd.priority-high2,
table.list tbody tr.odd.priority-high2:hover {
    color: var(--color-priority-high);
}

tr.odd.priority-high,
tr.odd.priority-high2 {
    background: transparent;
    border-left: 3px solid var(--color-priority-high);
}

tr.even.priority-high,
table.list tbody tr.even.priority-high:hover,
tr.even.priority-high2,
table.list tbody tr.even.priority-high2:hover {
    color: var(--color-priority-high);
}

tr.even.priority-high,
tr.even.priority-high2 {
    background: transparent;
    border-left: 3px solid var(--color-priority-high);
}

tr.priority-high a,
tr.priority-high2 a {
    color: var(--color-priority-high);
}

tr.odd.priority-high td,
tr.even.priority-high td,
tr.odd.priority-high2 td,
tr.even.priority-high2 td {
    border-color: var(--color-border-subtle);
}

tr.odd.priority-high3,
table.list tbody tr.odd.priority-high3:hover {
    color: var(--color-priority-high);
}

tr.odd.priority-high3 {
    background: transparent;
    border-left: 2px solid var(--color-priority-high);
}

tr.even.priority-high3,
table.list tbody tr.even.priority-high3:hover {
    color: var(--color-priority-high);
}

tr.even.priority-high3 {
    background: transparent;
    border-left: 2px solid var(--color-priority-high);
}

tr.priority-high3 a {
    color: var(--color-priority-high);
}

tr.odd.priority-high3 td,
tr.even.priority-high3 td {
    border-color: var(--color-border-subtle);
}

/* Priority low - greyish, inactive looking */
tr.odd.priority-low,
table.list tbody tr.odd.priority-low:hover,
tr.even.priority-low,
table.list tbody tr.even.priority-low:hover {
    color: var(--color-neutral-grey-500);
}

tr.odd.priority-low,
tr.even.priority-low {
    background: transparent;
}

tr.priority-low a {
    color: var(--color-neutral-grey-500);
}

tr.odd.priority-low td,
tr.even.priority-low td {
    border-color: var(--color-border-subtle);
}

/* Priority lowest - even more muted */
tr.odd.priority-lowest,
table.list tbody tr.odd.priority-lowest:hover {
    color: var(--color-neutral-grey-400);
}

tr.odd.priority-lowest {
    background: transparent;
}

tr.even.priority-lowest,
table.list tbody tr.even.priority-lowest:hover {
    color: var(--color-neutral-grey-400);
}

tr.even.priority-lowest {
    background: transparent;
}

tr.priority-lowest a {
    color: var(--color-neutral-grey-400);
}

tr.odd.priority-lowest td,
tr.even.priority-lowest td {
    border-color: var(--color-border-subtle);
}

/* Odd/Even row styling */
table.list:not(.odd-even) tbody tr:nth-child(odd),
.odd {
    background-color: var(--color-main-background-100);
}

table.list:not(.odd-even) tbody tr:nth-child(even),
.even {
    background-color: var(--color-surface-purple-200);
}

table.list:not(.odd-even) tbody tr:nth-child(odd):hover,
.odd:hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover,
.even:hover {
    background-color: var(--color-surface-purple-500);
}

tr.group td {
    padding: 0.8em 0 0.5em 0.3em;
    border-bottom: 2px solid var(--color-border-default);
    text-align: left;
    background-color: var(--color-surface-purple-300);
    color: var(--color-neutral-grey-900);
}

tr.group span.name {
    font-weight: bold;
}

tr.group span.totals {
    color: var(--color-neutral-grey-600);
}

tr.group span.totals .value {
    font-weight: bold;
    color: var(--color-neutral-grey-700);
}

tr.group a.toggle-all {
    color: var(--color-neutral-grey-500);
}

/**********************************************************/
/* ISSUES */
/**********************************************************/

#history, #history .tab-content {
    border: 0px;
}

div.issue {
    background: var(--color-surface-purple-300);
    padding: 8px;
    margin-bottom: 6px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

div.issue.overdue .due-date .value {
    color: var(--color-status-error);
}

div.issue .attributes .attribute .label {
    color: var(--color-neutral-grey-600);
}

div.issue .attribute .value {
    color: var(--color-neutral-grey-800);
}

div.issue div.subject h3 {
    color: var(--color-neutral-grey-900);
}

div.issue div.subject p {
    color: var(--color-neutral-grey-600);
}

div.issue p.author {
    color: var(--color-neutral-grey-600);
}

/**********************************************************/
/* ROADMAP */
/**********************************************************/

div#roadmap .related-issues td.assigned_to {
    padding: 0 3px;
}

/**********************************************************/
/* OBJECTS */
/**********************************************************/

div.issue,
div.person,
div.contact,
div.deal {
    border: 0px !important;
    padding: 10px !important;
    background: var(--color-surface-purple-300);
}

table.progress td {
    padding: 0;
}

div.details {
    padding: 20px !important;
    background: var(--color-surface-purple-300);
}

/**********************************************************/
/* PROGRESS BAR */
/**********************************************************/

table.progress td.closed {
    background: var(--color-accent-turquoise-500);
}

table.progress td.done {
    background: var(--color-accent-turquoise-300);
}

table.progress td.todo {
    background: var(--color-accent-turquoise-100);
}

p.percent {
    color: var(--color-neutral-grey-700);
}

p.progress-info {
    color: var(--color-neutral-grey-600);
}

/**********************************************************/
/* JOURNALS / HISTORY */
/**********************************************************/

.journals h4.journal-header {
    background-color: var(--color-surface-purple-400);
    border-bottom: 0;
    padding: 8px;
}

.journals h4.journal-header .update-info {
    color: var(--color-neutral-grey-600);
}

.journals div:target h4.journal-header {
    background-color: var(--color-accent-turquoise-100);
}

.journals .journal-details,
ul.revision-info {
    color: var(--color-neutral-grey-600);
}

.journals .journal-details a,
ul.revision-info a {
    color: var(--color-accent-turquoise-600);
}

.journals .journal-details a:hover,
ul.revision-info a:hover {
    color: var(--color-accent-turquoise-700);
}

.journals .private-notes {
    border-left: 2px solid var(--color-accent-pink-500);
}

/**********************************************************/
/* ACTIVITY */
/**********************************************************/

div#activity h3 {
    padding: 5px;
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

div#activity dt {
    padding-top: 10px;
    border-top: 1px solid var(--color-border-subtle);
}

div#activity dt .time {
    color: var(--color-neutral-grey-600);
}

div#activity dd span.description {
    color: var(--color-neutral-grey-600);
}

/**********************************************************/
/* DROPDOWN */
/**********************************************************/

.drdn-content {
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-default);
    color: var(--color-neutral-grey-800);
}

.drdn-items > * {
    border: 1px solid transparent;
}

.drdn-items > span {
    color: var(--color-neutral-grey-500);
}

#project-jump .drdn-trigger {
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

#project-jump .drdn-content {
    background-color: var(--color-surface-purple-400);
}

#project-jump .drdn-items > * {
    color: var(--color-neutral-grey-800) !important;
}

#project-jump .drdn-items > a:hover {
    background-color: var(--color-accent-turquoise-500);
    color: var(--color-main-background-100) !important;
}

.contextual .drdn-items > a:hover,
.journal-actions .drdn-items > a:hover {
    color: var(--color-neutral-grey-900);
    border: 1px solid transparent;
    background-color: var(--color-surface-purple-500);
    border-radius: 2px;
}

/**********************************************************/
/* BADGES */
/**********************************************************/

.badge {
    font-weight: bold;
}

.badge-private {
    background: var(--color-accent-pink-500);
    color: #fff;
    border: 1px solid var(--color-accent-pink-500);
}

.badge-count {
    color: var(--color-main-background-100);
    background: var(--color-accent-turquoise-500);
}

.badge-status-open {
    color: var(--color-accent-turquoise-700);
    border: 1px solid var(--color-accent-turquoise-500);
}

.badge-status-locked {
    color: var(--color-neutral-grey-600);
    border: 1px solid var(--color-neutral-grey-500);
}

.badge-status-closed {
    color: var(--color-accent-green-600);
    border: 1px solid var(--color-accent-green-500);
}

.badge-issues-count {
    background: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-800);
}

/**********************************************************/
/* CALENDAR */
/**********************************************************/

ul.cal {
    border: 1px solid var(--color-border-subtle);
}

.cal .calhead {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

.cal .week-number {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-600);
}

.cal .calbody {
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface-purple-300);
}

.cal .calbody.this-month {
    background-color: var(--color-surface-purple-300);
}

.cal .calbody.other-month {
    background-color: var(--color-surface-purple-200);
}

.cal .calbody.other-month p.day-num {
    color: var(--color-neutral-grey-500);
}

.cal .calbody.today {
    background: var(--color-accent-turquoise-100);
}

.cal .calbody.today p.day-num {
    font-weight: bold;
    color: var(--color-accent-turquoise-700);
}

.cal .calbody.nwday:not(.other-month) {
    background-color: var(--color-surface-purple-200);
}

/**********************************************************/
/* MY PAGE */
/**********************************************************/

.mypage-box {
    border: 1px solid var(--color-border-subtle);
    padding: 8px;
    margin: 0 0 20px 0;
    color: var(--color-neutral-grey-800);
    background-color: var(--color-surface-purple-300);
    border-radius: 3px;
}

.block-receiver {
    border: 1px dashed transparent;
}

.dragging .block-receiver {
    border: 1px dashed var(--color-accent-turquoise-500);
}

/**********************************************************/
/* PAGINATION */
/**********************************************************/

span.pagination {
    color: var(--color-neutral-grey-600);
}

.pagination ul.pages li {
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-purple-400);
}

.pagination ul.pages li a,
.pagination ul.pages li span {
    color: var(--color-neutral-grey-700);
}

.pagination ul.pages li.current {
    color: var(--color-main-background-100);
    background-color: var(--color-accent-turquoise-500);
    border-color: var(--color-accent-turquoise-500);
}

.pagination ul.pages li.page:hover {
    background-color: var(--color-surface-purple-600);
}

.pagination ul.pages li.page a:hover,
.pagination ul.pages li.page a:active {
    color: var(--color-neutral-grey-900);
}

/**********************************************************/
/* DIFF */
/**********************************************************/

.diff_out {
    background: hsl(355, 50%, 20%);
}

.diff_out span {
    background: hsl(355, 60%, 25%);
}

.diff_in {
    background: hsl(125, 50%, 18%);
}

.diff_in span {
    background: hsl(125, 60%, 22%);
}

.text-diff {
    padding: 1em;
    background-color: var(--color-surface-purple-300);
    color: var(--color-neutral-grey-800);
    border: 1px solid var(--color-border-subtle);
}

/**********************************************************/
/* HIGHLIGHT */
/**********************************************************/

.highlight {
    background-color: hsla(174, 100%, 40%, 0.3);
}

.highlight.token-1 {
    background-color: hsla(355, 90%, 50%, 0.3);
}

.highlight.token-2 {
    background-color: hsla(125, 90%, 40%, 0.3);
}

.highlight.token-3 {
    background-color: hsla(315, 90%, 50%, 0.3);
}

/**********************************************************/
/* RESPONSIVE */
/**********************************************************/

@media all and (max-width: 899px) {
    body #header {
        background-color: var(--color-surface-purple-300);
    }

    body .flyout-menu {
        background-color: var(--color-main-background-200);
    }

    body .flyout-menu__avatar {
        margin-left: 8px;
    }

    body .flyout-menu__avatar img.gravatar {
        width: 32px;
        height: 32px;
        padding: 2px;
        border: solid 1px var(--color-border-subtle);
        background: var(--color-surface-purple-300);
        vertical-align: middle;
        border-radius: 0;
        margin-top: 3px;
    }

    body .flyout-menu a {
        color: var(--color-neutral-grey-600);
    }

    body .flyout-menu h3 {
        background-color: var(--color-main-background-100);
        border-color: var(--color-border-subtle);
    }
}

/**********************************************************/
/* ICONS */
/**********************************************************/

a.icon:link .icon-svg,
a.icon-only:link .icon-svg,
span.icon-actions:link .icon-svg,
a.icon:visited .icon-svg,
a.icon-only:visited .icon-svg,
span.icon-actions:visited .icon-svg {
    stroke: var(--color-neutral-grey-600);
    stroke-width: 2.5;
}

a.icon:hover .icon-svg,
a.icon-only:hover .icon-svg,
span.icon-actions:hover .icon-svg {
    stroke: var(--color-neutral-grey-800);
}

a.icon:link .icon-svg-filled,
a.icon-only:link .icon-svg-filled,
a.icon:visited .icon-svg-filled,
a.icon-only:visited .icon-svg-filled {
    fill: var(--color-neutral-grey-600);
}

a.icon:hover .icon-svg-filled,
a.icon-only:hover .icon-svg-filled {
    fill: var(--color-neutral-grey-800);
}

svg.icon-svg {
    stroke: var(--color-neutral-grey-600);
    stroke-width: 2.5;
}

a.icon:hover svg,
a.icon-only:hover svg {
    stroke: var(--color-neutral-grey-800);
}

svg.icon-ok {
    stroke: var(--color-accent-green-600);
}

.icon-error svg.icon-svg {
    stroke: var(--color-status-error);
}

.icon-warning svg.icon-svg {
    stroke: var(--color-status-warning);
}

/**********************************************************/
/* SELECT2 */
/**********************************************************/

.theme-Circle .select2-container--default .select2-selection--single {
    background-position: 4px 50%;
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    height: 26px;
    outline: none;
    background-color: var(--color-surface-purple-400);
}

.theme-Circle .select2-container .select2-selection--multiple {
    min-height: 26px;
}

.theme-Circle .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    outline: none;
    background-color: var(--color-surface-purple-400);
}

.theme-Circle .select2-container--default.select2-container--open .select2-selection,
.theme-Circle .select2-container--default .select2-selection:focus,
.theme-Circle .select2-container--default.select2-container--focus .select2-selection--single,
.theme-Circle .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-accent-turquoise-500);
    box-shadow: 0 0 0 2px hsla(174, 100%, 45%, 0.15);
}

.theme-Circle .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px;
    font-size: 12px;
    outline: none;
    color: var(--color-neutral-grey-800);
}

.theme-Circle .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    font-size: 12px;
    color: var(--color-neutral-grey-800);
}

.theme-Circle .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 25px;
    outline: none;
}

.theme-Circle .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-neutral-grey-600) transparent transparent transparent;
}

.theme-Circle .select2-dropdown {
    border: 1px solid var(--color-accent-turquoise-500);
    border-radius: 3px;
    background-color: var(--color-surface-purple-400);
}

.select2-results__option {
    color: var(--color-neutral-grey-800);
}

.select2-results__option--highlighted {
    background-color: var(--color-accent-turquoise-500) !important;
    color: var(--color-main-background-100) !important;
}

/**********************************************************/
/* PROJECTS INDEX */
/**********************************************************/

#projects-index ul.projects li.root {
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface-purple-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#projects-index li.root ul.projects {
    border-left: 3px solid var(--color-accent-turquoise-500);
}

/**********************************************************/
/* CODE HIGHLIGHTING - CYBERPUNK THEME */
/**********************************************************/

.syntaxhl {
    background: var(--color-surface-purple-300);
}

.syntaxhl .c {
    color: var(--color-neutral-grey-500);
}

/* Comment */
.syntaxhl .err {
    color: var(--color-status-error);
    background-color: var(--color-status-error-bg);
}

/* Error */
.syntaxhl .k {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Keyword */
.syntaxhl .o {
    color: var(--color-neutral-grey-700);
}

/* Operator */
.syntaxhl .ch {
    color: var(--color-neutral-grey-500);
}

/* Comment.Hashbang */
.syntaxhl .cm {
    color: var(--color-neutral-grey-500);
}

/* Comment.Multiline */
.syntaxhl .cp {
    color: var(--color-accent-turquoise-600);
}

/* Comment.Preproc */
.syntaxhl .cpf {
    color: var(--color-neutral-grey-500);
}

/* Comment.PreprocFile */
.syntaxhl .c1 {
    color: var(--color-neutral-grey-500);
}

/* Comment.Single */
.syntaxhl .cs {
    color: var(--color-status-error);
    font-weight: bold;
}

/* Comment.Special */
.syntaxhl .gd {
    color: hsl(355, 80%, 60%);
}

/* Generic.Deleted */
.syntaxhl .ge {
    font-style: italic;
}

/* Generic.Emph */
.syntaxhl .gr {
    color: var(--color-status-error);
}

/* Generic.Error */
.syntaxhl .gh {
    color: var(--color-accent-turquoise-700);
    font-weight: bold;
}

/* Generic.Heading */
.syntaxhl .gi {
    color: var(--color-accent-green-600);
}

/* Generic.Inserted */
.syntaxhl .go {
    color: var(--color-neutral-grey-600);
}

/* Generic.Output */
.syntaxhl .gp {
    color: var(--color-status-warning);
    font-weight: bold;
}

/* Generic.Prompt */
.syntaxhl .gs {
    font-weight: bold;
}

/* Generic.Strong */
.syntaxhl .gu {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Generic.Subheading */
.syntaxhl .gt {
    color: var(--color-accent-turquoise-600);
}

/* Generic.Traceback */
.syntaxhl .kc {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Keyword.Constant */
.syntaxhl .kd {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Keyword.Declaration */
.syntaxhl .kn {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Keyword.Namespace */
.syntaxhl .kp {
    color: var(--color-accent-turquoise-600);
    font-weight: bold;
}

/* Keyword.Pseudo */
.syntaxhl .kr {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Keyword.Reserved */
.syntaxhl .kt {
    color: var(--color-accent-turquoise-700);
    font-weight: bold;
}

/* Keyword.Type */
.syntaxhl .m {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number */
.syntaxhl .s {
    color: var(--color-accent-green-600);
}

/* Literal.String */
.syntaxhl .na {
    color: var(--color-accent-turquoise-600);
}

/* Name.Attribute */
.syntaxhl .nb {
    color: var(--color-accent-turquoise-700);
}

/* Name.Builtin */
.syntaxhl .nc {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Name.Class */
.syntaxhl .no {
    color: var(--color-accent-turquoise-700);
    font-weight: bold;
}

/* Name.Constant */
.syntaxhl .nd {
    color: var(--color-neutral-grey-700);
    font-weight: bold;
}

/* Name.Decorator */
.syntaxhl .ni {
    color: var(--color-accent-pink-600);
    font-weight: bold;
}

/* Name.Entity */
.syntaxhl .ne {
    color: var(--color-status-error);
    font-weight: bold;
}

/* Name.Exception */
.syntaxhl .nf {
    color: var(--color-accent-turquoise-600);
    font-weight: bold;
}

/* Name.Function */
.syntaxhl .nl {
    color: var(--color-status-warning);
    font-weight: bold;
}

/* Name.Label */
.syntaxhl .nn {
    color: var(--color-accent-turquoise-700);
    font-weight: bold;
}

/* Name.Namespace */
.syntaxhl .nt {
    color: var(--color-accent-pink-600);
}

/* Name.Tag */
.syntaxhl .nv {
    color: var(--color-accent-turquoise-600);
}

/* Name.Variable */
.syntaxhl .ow {
    color: var(--color-neutral-grey-800);
    font-weight: bold;
}

/* Operator.Word */
.syntaxhl .w {
    color: var(--color-neutral-grey-500);
}

/* Text.Whitespace */
.syntaxhl .mb {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number.Bin */
.syntaxhl .mf {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number.Float */
.syntaxhl .mh {
    color: var(--color-accent-turquoise-700);
    font-weight: bold;
}

/* Literal.Number.Hex */
.syntaxhl .mi {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number.Integer */
.syntaxhl .mo {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number.Oct */
.syntaxhl .sa {
    color: var(--color-accent-green-600);
}

/* Literal.String.Affix */
.syntaxhl .sb {
    color: var(--color-accent-green-600);
}

/* Literal.String.Backtick */
.syntaxhl .sc {
    color: var(--color-accent-turquoise-600);
}

/* Literal.String.Char */
.syntaxhl .dl {
    color: var(--color-accent-green-600);
}

/* Literal.String.Delimiter */
.syntaxhl .sd {
    color: var(--color-accent-green-500);
}

/* Literal.String.Doc */
.syntaxhl .s2 {
    color: var(--color-accent-green-600);
}

/* Literal.String.Double */
.syntaxhl .se {
    color: var(--color-neutral-grey-700);
    font-weight: bold;
}

/* Literal.String.Escape */
.syntaxhl .sh {
    color: var(--color-accent-green-600);
}

/* Literal.String.Heredoc */
.syntaxhl .si {
    color: var(--color-accent-turquoise-600);
}

/* Literal.String.Interpol */
.syntaxhl .sx {
    color: var(--color-accent-green-500);
}

/* Literal.String.Other */
.syntaxhl .sr {
    color: var(--color-accent-pink-600);
}

/* Literal.String.Regex */
.syntaxhl .s1 {
    color: var(--color-accent-green-600);
}

/* Literal.String.Single */
.syntaxhl .ss {
    color: var(--color-status-warning);
}

/* Literal.String.Symbol */
.syntaxhl .bp {
    color: var(--color-accent-turquoise-700);
}

/* Name.Builtin.Pseudo */
.syntaxhl .fm {
    color: var(--color-accent-turquoise-600);
    font-weight: bold;
}

/* Name.Function.Magic */
.syntaxhl .vc {
    color: var(--color-accent-turquoise-600);
}

/* Name.Variable.Class */
.syntaxhl .vg {
    color: var(--color-status-warning);
    font-weight: bold;
}

/* Name.Variable.Global */
.syntaxhl .vi {
    color: var(--color-accent-turquoise-600);
}

/* Name.Variable.Instance */
.syntaxhl .vm {
    color: var(--color-accent-turquoise-600);
}

/* Name.Variable.Magic */
.syntaxhl .il {
    color: var(--color-accent-pink-700);
    font-weight: bold;
}

/* Literal.Number.Integer.Long */

/**********************************************************/
/* AUTOCOMPLETE */
/**********************************************************/

input.autocomplete {
    background: var(--color-surface-purple-400) url("/assets/search-0bd54309.svg") no-repeat 2px 50%;
    padding-left: 20px !important;
    filter: brightness(0.7);
}

.tribute-container ul {
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-default);
}

.tribute-container li.highlight {
    background-color: var(--color-accent-turquoise-500);
    color: var(--color-main-background-100);
}

/**********************************************************/
/* TOOLTIP */
/**********************************************************/

.ui-tooltip {
    background: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
    border-radius: 3px;
    border: 1px solid var(--color-accent-turquoise-500);
    box-shadow: 0 0 10px hsla(174, 100%, 45%, 0.3);
}

/**********************************************************/
/* AVATAR */
/**********************************************************/

.avatar {
    border-radius: 20%;
    border: 1px solid var(--color-border-subtle);
}

div.avatar-with-child > .avatar:nth-child(2) {
    border: solid 1px var(--color-border-subtle) !important;
}

.avatar-color-0 {
    background-color: var(--color-surface-purple-400);
    color: var(--color-accent-turquoise-800);
}

.avatar-color-1 {
    background-color: var(--color-surface-purple-500);
    color: var(--color-accent-green-800);
}

.avatar-color-2 {
    background-color: var(--color-surface-purple-600);
    color: var(--color-accent-pink-800);
}

.avatar-color-3 {
    background-color: var(--color-surface-purple-700);
    color: var(--color-neutral-grey-700);
}

.avatar-color-4 {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-800);
}

.avatar-color-5 {
    background-color: var(--color-surface-purple-500);
    color: var(--color-accent-pink-800);
}

.avatar-color-6 {
    background-color: var(--color-surface-purple-600);
    color: var(--color-accent-green-500);
}

.avatar-color-7 {
    background-color: var(--color-surface-purple-700);
    color: var(--color-accent-turquoise-500);
}

/**********************************************************/
/* ADDITIONAL OVERRIDES FROM BASE CSS */
/**********************************************************/

/* Override link colors from base */
a.issue.closed,
a.issue.closed:link,
a.issue.closed:visited {
    color: var(--color-neutral-grey-500);
}

a.project.closed,
a.project.closed:link,
a.project.closed:visited {
    color: var(--color-neutral-grey-500);
}

a.user.locked,
a.user.locked:link,
a.user.locked:visited {
    color: var(--color-neutral-grey-500);
}

a.user.user-mention {
    background-color: var(--color-accent-turquoise-100);
    color: var(--color-accent-turquoise-700);
}

#sidebar a.selected {
    background-color: var(--color-surface-purple-500);
    color: var(--color-neutral-grey-900);
}

#sidebar-switch-panel a:hover .icon-svg {
    stroke: var(--color-accent-turquoise-500)
}

#sidebar-switch-panel a:hover {
    background: transparent;
}

#admin-menu a.selected:not(:has(svg)) {
    background-color: var(--color-surface-purple-500);
}

/* Override wiki anchor */
a.wiki-anchor {
    color: var(--color-neutral-grey-400) !important;
}

a.wiki-anchor:hover {
    color: var(--color-neutral-grey-600) !important;
}

h1:hover a.wiki-anchor,
h2:hover a.wiki-anchor,
h3:hover a.wiki-anchor,
h4:hover a.wiki-anchor,
h5:hover a.wiki-anchor,
h6:hover a.wiki-anchor {
    color: var(--color-neutral-grey-500);
}

/* File content */
.filecontent.wiki {
    border: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface-purple-300);
}

/* Tabular forms */
.tabular label {
    color: var(--color-neutral-grey-700);
}

.tabular label.error {
    color: var(--color-status-error);
}

/* Required fields */
span.required {
    color: var(--color-accent-pink-600);
}

/* Summary */
.summary {
    color: var(--color-neutral-grey-600);
}

/* Contextual */
.contextual {
    color: var(--color-neutral-grey-700);
}

/* Version info */
.version-behind-schedule a,
.issue-behind-schedule a {
    color: var(--color-status-warning);
}

.version-overdue a,
.issue-overdue a,
.project-overdue a {
    color: var(--color-status-error);
}

/* CMS PLUGIN */
#top-menu ul li ul.menu-children {
    top: 25px;
    background-color: var(--color-surface-purple-400);
    border: 1px solid var(--color-border-default);
}

/**********************************************************/
/* WYSIWYG EDITOR (jstBlock) */
/**********************************************************/

.jstBlock {
    background-color: var(--color-surface-purple-300);
    border-radius: 3px;
}

.jstBlock .jstTabs {
    background-color: var(--color-surface-purple-400);
    border-bottom: 1px solid var(--color-border-subtle);
}

.jstBlock .jstTabs ul {
    background-color: var(--color-surface-purple-400);
}

.jstBlock .jstTabs ul li a {
    color: var(--color-neutral-grey-600);
    background-color: transparent;
    border: none;
}

.jstBlock .jstTabs ul li a:hover {
    color: var(--color-neutral-grey-800);
    background-color: var(--color-surface-purple-500);
}

.jstBlock .jstTabs ul li a.selected {
    color: var(--color-accent-turquoise-600);
    background-color: var(--color-surface-purple-300);
    border-bottom: 2px solid var(--color-accent-turquoise-500);
}

.jstBlock .tab-elements {
    background-color: var(--color-surface-purple-400);
}

.jstElements {
    background-color: var(--color-surface-purple-400);
    padding: 4px;
}

.jstElements button {
    background-color: var(--color-surface-purple-500);
    border: 1px solid var(--color-border-subtle);
    border-radius: 3px;
    color: var(--color-neutral-grey-700);
    padding: 4px 6px;
    margin: 1px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.jstElements button:hover {
    background-color: var(--color-surface-purple-600);
    border-color: var(--color-border-default);
    color: var(--color-neutral-grey-800);
}

.jstElements button:active {
    background-color: var(--color-surface-purple-700);
}

.jstElements button span {
    color: inherit;
}

.jstElements .jstSpacer {
    border-left: 1px solid var(--color-border-subtle);
    margin: 0 4px;
}

.jstEditor {
    background-color: var(--color-surface-purple-300);
    margin-top: 1px;
}

.jstEditor textarea {
    background-color: var(--color-surface-purple-400);
    color: var(--color-neutral-grey-900);
    border: 1px solid var(--color-border-subtle);
}

.jstEditor textarea:focus {
    border-color: var(--color-accent-turquoise-100);
    outline: none;
    box-shadow: 0 0 0 2px hsla(174, 100%, 45%, 0.15);
}

.jstBlock .wiki-preview {
    background-color: var(--color-surface-purple-300);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-neutral-grey-800);
    padding: 10px;
}

/**********************************************************/
/* STICKY ISSUE HEADER */
/**********************************************************/

div#sticky-issue-header {
    background-color: var(--color-surface-purple-400);
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: var(--color-neutral-grey-800);
}

div#sticky-issue-header.is-visible {
    display: flex;
}

div#sticky-issue-header .issue-heading {
    color: var(--color-neutral-grey-700);
}

div#sticky-issue-header .issue-heading a {
    color: var(--color-accent-turquoise-600);
}

div#sticky-issue-header .subject {
    font-weight: bold;
    color: var(--color-neutral-grey-900);
}

/**********************************************************/
/* NEON GLOW EFFECTS */
/**********************************************************/

/* Subtle focus glow */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 2px hsla(174, 100%, 45%, 0.15);
}

/* Header accent line */
#header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent 0%,
            var(--color-accent-turquoise-500) 20%,
            var(--color-accent-pink-500) 50%,
            var(--color-accent-turquoise-500) 80%,
            transparent 100%
    );
    opacity: 0.4;
}

/* Selected menu item */
#main-menu li a.selected {
    border-bottom: 2px solid var(--color-accent-turquoise-500);
}

/**********************************************************/
/* PRINT STYLES */
/**********************************************************/

@media print {
    body {
        background: #fff;
        color: #000;
    }

    #content {
        background: #fff;
    }

    .box {
        background: #f9f9f9;
        border-color: #ccc;
    }
}