/* Circle Theme responsive styles, Copyright (C) 2011 - 2026 Kirill Bezrukov www.redmineup.com */
/* Open Color palette (github.com/mxstbr/open-color / core Redmine 7), inlined
   verbatim — application.css from R7 core references --oc-* variables
   directly on ~330 declarations, so this must ship with the theme instead
   of the browser fetching core's separate open-color.css. Never edit by
   hand; re-copy from app/assets/stylesheets/open-color.css if core bumps
   its version. */
/*
 *
 *  𝗖 𝗢 𝗟 𝗢 𝗥
 *  v 1.9.1
 *
 *  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /*  General
   *  ─────────────────────────────────── */
  --oc-white: #ffffff;
  --oc-white-rgb: 255, 255, 255;
  --oc-black: #000000;
  --oc-black-rgb: 0, 0, 0;
  /*  Gray
   *  ─────────────────────────────────── */
  --oc-gray-0: #f8f9fa;
  --oc-gray-0-rgb: 248, 249, 250;
  --oc-gray-1: #f1f3f5;
  --oc-gray-1-rgb: 241, 243, 245;
  --oc-gray-2: #e9ecef;
  --oc-gray-2-rgb: 233, 236, 239;
  --oc-gray-3: #dee2e6;
  --oc-gray-3-rgb: 222, 226, 230;
  --oc-gray-4: #ced4da;
  --oc-gray-4-rgb: 206, 212, 218;
  --oc-gray-5: #adb5bd;
  --oc-gray-5-rgb: 173, 181, 189;
  --oc-gray-6: #868e96;
  --oc-gray-6-rgb: 134, 142, 150;
  --oc-gray-7: #495057;
  --oc-gray-7-rgb: 73, 80, 87;
  --oc-gray-8: #343a40;
  --oc-gray-8-rgb: 52, 58, 64;
  --oc-gray-9: #212529;
  --oc-gray-9-rgb: 33, 37, 41;
  /*  Red
   *  ─────────────────────────────────── */
  --oc-red-0: #fff5f5;
  --oc-red-0-rgb: 255, 245, 245;
  --oc-red-1: #ffe3e3;
  --oc-red-1-rgb: 255, 227, 227;
  --oc-red-2: #ffc9c9;
  --oc-red-2-rgb: 255, 201, 201;
  --oc-red-3: #ffa8a8;
  --oc-red-3-rgb: 255, 168, 168;
  --oc-red-4: #ff8787;
  --oc-red-4-rgb: 255, 135, 135;
  --oc-red-5: #ff6b6b;
  --oc-red-5-rgb: 255, 107, 107;
  --oc-red-6: #fa5252;
  --oc-red-6-rgb: 250, 82, 82;
  --oc-red-7: #f03e3e;
  --oc-red-7-rgb: 240, 62, 62;
  --oc-red-8: #e03131;
  --oc-red-8-rgb: 224, 49, 49;
  --oc-red-9: #c92a2a;
  --oc-red-9-rgb: 201, 42, 42;
  /*  Pink
   *  ─────────────────────────────────── */
  --oc-pink-0: #fff0f6;
  --oc-pink-0-rgb: 255, 240, 246;
  --oc-pink-1: #ffdeeb;
  --oc-pink-1-rgb: 255, 222, 235;
  --oc-pink-2: #fcc2d7;
  --oc-pink-2-rgb: 252, 194, 215;
  --oc-pink-3: #faa2c1;
  --oc-pink-3-rgb: 250, 162, 193;
  --oc-pink-4: #f783ac;
  --oc-pink-4-rgb: 247, 131, 172;
  --oc-pink-5: #f06595;
  --oc-pink-5-rgb: 240, 101, 149;
  --oc-pink-6: #e64980;
  --oc-pink-6-rgb: 230, 73, 128;
  --oc-pink-7: #d6336c;
  --oc-pink-7-rgb: 214, 51, 108;
  --oc-pink-8: #c2255c;
  --oc-pink-8-rgb: 194, 37, 92;
  --oc-pink-9: #a61e4d;
  --oc-pink-9-rgb: 166, 30, 77;
  /*  Grape
   *  ─────────────────────────────────── */
  --oc-grape-0: #f8f0fc;
  --oc-grape-0-rgb: 248, 240, 252;
  --oc-grape-1: #f3d9fa;
  --oc-grape-1-rgb: 243, 217, 250;
  --oc-grape-2: #eebefa;
  --oc-grape-2-rgb: 238, 190, 250;
  --oc-grape-3: #e599f7;
  --oc-grape-3-rgb: 229, 153, 247;
  --oc-grape-4: #da77f2;
  --oc-grape-4-rgb: 218, 119, 242;
  --oc-grape-5: #cc5de8;
  --oc-grape-5-rgb: 204, 93, 232;
  --oc-grape-6: #be4bdb;
  --oc-grape-6-rgb: 190, 75, 219;
  --oc-grape-7: #ae3ec9;
  --oc-grape-7-rgb: 174, 62, 201;
  --oc-grape-8: #9c36b5;
  --oc-grape-8-rgb: 156, 54, 181;
  --oc-grape-9: #862e9c;
  --oc-grape-9-rgb: 134, 46, 156;
  /*  Violet
   *  ─────────────────────────────────── */
  --oc-violet-0: #f3f0ff;
  --oc-violet-0-rgb: 243, 240, 255;
  --oc-violet-1: #e5dbff;
  --oc-violet-1-rgb: 229, 219, 255;
  --oc-violet-2: #d0bfff;
  --oc-violet-2-rgb: 208, 191, 255;
  --oc-violet-3: #b197fc;
  --oc-violet-3-rgb: 177, 151, 252;
  --oc-violet-4: #9775fa;
  --oc-violet-4-rgb: 151, 117, 250;
  --oc-violet-5: #845ef7;
  --oc-violet-5-rgb: 132, 94, 247;
  --oc-violet-6: #7950f2;
  --oc-violet-6-rgb: 121, 80, 242;
  --oc-violet-7: #7048e8;
  --oc-violet-7-rgb: 112, 72, 232;
  --oc-violet-8: #6741d9;
  --oc-violet-8-rgb: 103, 65, 217;
  --oc-violet-9: #5f3dc4;
  --oc-violet-9-rgb: 95, 61, 196;
  /*  Indigo
   *  ─────────────────────────────────── */
  --oc-indigo-0: #edf2ff;
  --oc-indigo-0-rgb: 237, 242, 255;
  --oc-indigo-1: #dbe4ff;
  --oc-indigo-1-rgb: 219, 228, 255;
  --oc-indigo-2: #bac8ff;
  --oc-indigo-2-rgb: 186, 200, 255;
  --oc-indigo-3: #91a7ff;
  --oc-indigo-3-rgb: 145, 167, 255;
  --oc-indigo-4: #748ffc;
  --oc-indigo-4-rgb: 116, 143, 252;
  --oc-indigo-5: #5c7cfa;
  --oc-indigo-5-rgb: 92, 124, 250;
  --oc-indigo-6: #4c6ef5;
  --oc-indigo-6-rgb: 76, 110, 245;
  --oc-indigo-7: #4263eb;
  --oc-indigo-7-rgb: 66, 99, 235;
  --oc-indigo-8: #3b5bdb;
  --oc-indigo-8-rgb: 59, 91, 219;
  --oc-indigo-9: #364fc7;
  --oc-indigo-9-rgb: 54, 79, 199;
  /*  Blue
   *  ─────────────────────────────────── */
  --oc-blue-0: #e7f5ff;
  --oc-blue-0-rgb: 231, 245, 255;
  --oc-blue-1: #d0ebff;
  --oc-blue-1-rgb: 208, 235, 255;
  --oc-blue-2: #a5d8ff;
  --oc-blue-2-rgb: 165, 216, 255;
  --oc-blue-3: #74c0fc;
  --oc-blue-3-rgb: 116, 192, 252;
  --oc-blue-4: #4dabf7;
  --oc-blue-4-rgb: 77, 171, 247;
  --oc-blue-5: #339af0;
  --oc-blue-5-rgb: 51, 154, 240;
  --oc-blue-6: #228be6;
  --oc-blue-6-rgb: 34, 139, 230;
  --oc-blue-7: #1c7ed6;
  --oc-blue-7-rgb: 28, 126, 214;
  --oc-blue-8: #1971c2;
  --oc-blue-8-rgb: 25, 113, 194;
  --oc-blue-9: #1864ab;
  --oc-blue-9-rgb: 24, 100, 171;
  /*  Cyan
   *  ─────────────────────────────────── */
  --oc-cyan-0: #e3fafc;
  --oc-cyan-0-rgb: 227, 250, 252;
  --oc-cyan-1: #c5f6fa;
  --oc-cyan-1-rgb: 197, 246, 250;
  --oc-cyan-2: #99e9f2;
  --oc-cyan-2-rgb: 153, 233, 242;
  --oc-cyan-3: #66d9e8;
  --oc-cyan-3-rgb: 102, 217, 232;
  --oc-cyan-4: #3bc9db;
  --oc-cyan-4-rgb: 59, 201, 219;
  --oc-cyan-5: #22b8cf;
  --oc-cyan-5-rgb: 34, 184, 207;
  --oc-cyan-6: #15aabf;
  --oc-cyan-6-rgb: 21, 170, 191;
  --oc-cyan-7: #1098ad;
  --oc-cyan-7-rgb: 16, 152, 173;
  --oc-cyan-8: #0c8599;
  --oc-cyan-8-rgb: 12, 133, 153;
  --oc-cyan-9: #0b7285;
  --oc-cyan-9-rgb: 11, 114, 133;
  /*  Teal
   *  ─────────────────────────────────── */
  --oc-teal-0: #e6fcf5;
  --oc-teal-0-rgb: 230, 252, 245;
  --oc-teal-1: #c3fae8;
  --oc-teal-1-rgb: 195, 250, 232;
  --oc-teal-2: #96f2d7;
  --oc-teal-2-rgb: 150, 242, 215;
  --oc-teal-3: #63e6be;
  --oc-teal-3-rgb: 99, 230, 190;
  --oc-teal-4: #38d9a9;
  --oc-teal-4-rgb: 56, 217, 169;
  --oc-teal-5: #20c997;
  --oc-teal-5-rgb: 32, 201, 151;
  --oc-teal-6: #12b886;
  --oc-teal-6-rgb: 18, 184, 134;
  --oc-teal-7: #0ca678;
  --oc-teal-7-rgb: 12, 166, 120;
  --oc-teal-8: #099268;
  --oc-teal-8-rgb: 9, 146, 104;
  --oc-teal-9: #087f5b;
  --oc-teal-9-rgb: 8, 127, 91;
  /*  Green
   *  ─────────────────────────────────── */
  --oc-green-0: #ebfbee;
  --oc-green-0-rgb: 235, 251, 238;
  --oc-green-1: #d3f9d8;
  --oc-green-1-rgb: 211, 249, 216;
  --oc-green-2: #b2f2bb;
  --oc-green-2-rgb: 178, 242, 187;
  --oc-green-3: #8ce99a;
  --oc-green-3-rgb: 140, 233, 154;
  --oc-green-4: #69db7c;
  --oc-green-4-rgb: 105, 219, 124;
  --oc-green-5: #51cf66;
  --oc-green-5-rgb: 81, 207, 102;
  --oc-green-6: #40c057;
  --oc-green-6-rgb: 64, 192, 87;
  --oc-green-7: #37b24d;
  --oc-green-7-rgb: 55, 178, 77;
  --oc-green-8: #2f9e44;
  --oc-green-8-rgb: 47, 158, 68;
  --oc-green-9: #2b8a3e;
  --oc-green-9-rgb: 43, 138, 62;
  /*  Lime
   *  ─────────────────────────────────── */
  --oc-lime-0: #f4fce3;
  --oc-lime-0-rgb: 244, 252, 227;
  --oc-lime-1: #e9fac8;
  --oc-lime-1-rgb: 233, 250, 200;
  --oc-lime-2: #d8f5a2;
  --oc-lime-2-rgb: 216, 245, 162;
  --oc-lime-3: #c0eb75;
  --oc-lime-3-rgb: 192, 235, 117;
  --oc-lime-4: #a9e34b;
  --oc-lime-4-rgb: 169, 227, 75;
  --oc-lime-5: #94d82d;
  --oc-lime-5-rgb: 148, 216, 45;
  --oc-lime-6: #82c91e;
  --oc-lime-6-rgb: 130, 201, 30;
  --oc-lime-7: #74b816;
  --oc-lime-7-rgb: 116, 184, 22;
  --oc-lime-8: #66a80f;
  --oc-lime-8-rgb: 102, 168, 15;
  --oc-lime-9: #5c940d;
  --oc-lime-9-rgb: 92, 148, 13;
  /*  Yellow
   *  ─────────────────────────────────── */
  --oc-yellow-0: #fff9db;
  --oc-yellow-0-rgb: 255, 249, 219;
  --oc-yellow-1: #fff3bf;
  --oc-yellow-1-rgb: 255, 243, 191;
  --oc-yellow-2: #ffec99;
  --oc-yellow-2-rgb: 255, 236, 153;
  --oc-yellow-3: #ffe066;
  --oc-yellow-3-rgb: 255, 224, 102;
  --oc-yellow-4: #ffd43b;
  --oc-yellow-4-rgb: 255, 212, 59;
  --oc-yellow-5: #fcc419;
  --oc-yellow-5-rgb: 252, 196, 25;
  --oc-yellow-6: #fab005;
  --oc-yellow-6-rgb: 250, 176, 5;
  --oc-yellow-7: #f59f00;
  --oc-yellow-7-rgb: 245, 159, 0;
  --oc-yellow-8: #f08c00;
  --oc-yellow-8-rgb: 240, 140, 0;
  --oc-yellow-9: #e67700;
  --oc-yellow-9-rgb: 230, 119, 0;
  /*  Orange
   *  ─────────────────────────────────── */
  --oc-orange-0: #fff4e6;
  --oc-orange-0-rgb: 255, 244, 230;
  --oc-orange-1: #ffe8cc;
  --oc-orange-1-rgb: 255, 232, 204;
  --oc-orange-2: #ffd8a8;
  --oc-orange-2-rgb: 255, 216, 168;
  --oc-orange-3: #ffc078;
  --oc-orange-3-rgb: 255, 192, 120;
  --oc-orange-4: #ffa94d;
  --oc-orange-4-rgb: 255, 169, 77;
  --oc-orange-5: #ff922b;
  --oc-orange-5-rgb: 255, 146, 43;
  --oc-orange-6: #fd7e14;
  --oc-orange-6-rgb: 253, 126, 20;
  --oc-orange-7: #f76707;
  --oc-orange-7-rgb: 247, 103, 7;
  --oc-orange-8: #e8590c;
  --oc-orange-8-rgb: 232, 89, 12;
  --oc-orange-9: #d9480f;
  --oc-orange-9-rgb: 217, 72, 15;
}

:root {
  --bg-header: #29333a;
  --bg-top-menu: #000;
  --bg-main-menu: #3d454c;
  --color-link: #2996cc;
  --color-text: #3d454c;
  --color-muted: #9da2a6;
  --color-light: #ced4d9;
  --color-hover: #eef5fd;
  --color-active: #48a6e9;
  --color-active-blue: #2996cc;
  --color-active-blue-hover: #45a4d3;
  --color-border: #d0d7de;
  --color-notice: #5cc512;
  --color-error: #e52817;
  --color-tabs-active: #90a6e4;
  --bg-button: #2996cc;
  --bg-button-hover: #3ba8de;
  --bg-main: #eeeeee;
  --bg-light: #fafafa;
  --border: 1px solid var(--color-border);
  --border-control: 1px solid #e0e2e3;
  --border-radius-panel: 6px;
  --border-radius-control: 4px;
  --border-radius-avatar: 6px;
  --border-radius-round: 40px;
  --font-stack: "helvetica neue", helvetica, arial, sans-serif;
  --fonts-main: "Noto Sans", sans-serif;
}

/* Hide new elements (toggle button and flyout menu) above 900px */
.mobile-toggle-button,
.flyout-menu {
  display: none;
}

/*
  redmine's body is set to min-width: 900px
  add first breakpoint here and start adding responsiveness
*/
@media screen and (max-width: 899px) {
  /*----------------------------------------*\
    A) BASIC MOBILE RESETS
  \*----------------------------------------*/
  *,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  body,
  html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  html {
    overflow-y: auto; /* avoid 2nd scrollbar on desktop */
    -webkit-text-size-adjust: 100%; /* prevent font scaling in landscape mode on webkit */
  }
  body {
    min-width: 0; /* reset the min-width of 900px */
    -webkit-overflow-scrolling: touch;
  }
  body,
  input,
  select,
  textarea,
  button {
    font-size: 0.875rem;
  }
  #wrapper {
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
  }
  /*----------------------------------------*\
    B) HEADER & TOP MENUS
  \*----------------------------------------*/
  #header {
    width: 100%;
    height: 64px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #628db6;
    position: fixed;
    z-index: 9999;
  }
  #header h1 {
    display: none !important;
  }
  #header a.mobile-toggle-button {
    color: #f8f8f8;
  }
  #top-menu,
  #header #main-menu {
    display: none;
  }
  #header #quick-search {
    float: none;
    clear: none;
    max-width: 100%;
    margin: 0;
    background: inherit;
  }
  #project-jump.drdn {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 64px;
    padding: 5px;
    padding-right: 72px;
    padding-left: 20px;
  }
  #project-jump .drdn-trigger {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    width: 100%;
    color: #fff;
    padding-left: 24px;
    background: transparent;
    height: 50px;
    line-height: 40px;
    border: 0;
  }
  #project-jump .drdn-trigger:before {
    font-family: var(--fonts-main);
    font-size: 1.5em;
    position: absolute;
    left: 0;
    padding: 0 8px;
    content: "^";
    -webkit-transform: scale(1, -0.8);
    transform: scale(1, -0.8);
    text-align: right;
    pointer-events: none;
    opacity: 0.6;
  }
  #project-jump.expanded .drdn-trigger:before {
    -webkit-transform: scale(1, 0.8);
    transform: scale(1, 0.8);
    padding-top: 8px;
  }
  #project-jump .drdn-content {
    position: absolute;
    left: 0px;
    top: 64px;
    width: 100%;
    font-size: 0.9375rem;
    font-weight: normal;
  }
  #project-jump .drdn-content svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  #project-jump .drdn-content .autocomplete {
    height: 40px;
    font-size: 1.25rem;
    padding-left: 28px !important;
  }
  #project-jump .drdn-content a {
    padding: 8px;
  }
  #header #quick-search form {
    display: none;
  }
  /*----------------------------------------*\
    C) MAIN CONTENT & SIDEBAR
  \*----------------------------------------*/
  #main {
    padding: 64px 0 0;
  }
  #main.nosidebar #content,
  div#content {
    width: 100%;
    min-height: 0;
    margin: 0;
  }
  #sidebar,
  #sidebar-switch-panel {
    display: none;
  }
  .splitcontentleft, .splitcontentright, .splitcontenttop {
    width: 100%;
    flex: auto;
    margin-right: 0;
    margin-left: 0;
  }
  /*----------------------------------------*\
    D) TOGGLE BUTTON & FLYOUT MENU
  \*----------------------------------------*/
  .mobile-toggle-button {
    font-size: 2.625rem;
    line-height: 64px;
    position: relative;
    z-index: 10;
    display: block;
    float: right;
    width: 60px;
    height: 64px;
    margin-top: 0;
    text-align: center;
    border-left: 1px solid #ddd;
  }
  .mobile-toggle-button:hover,
  .mobile-toggle-button:active {
    text-decoration: none;
  }
  .mobile-toggle-button:after {
    font-family: var(--fonts-main);
    display: block;
    margin-top: -3px;
    content: "≡";
  }
  .search-magnifier--flyout {
    position: absolute;
    z-index: 1;
    left: 12px;
  }
  /* Flyout Menu */
  .flyout-menu {
    position: absolute;
    right: -250px;
    display: block;
    overflow-x: hidden;
    width: 250px;
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    background-color: #3e5b76;
  }
  .flyout-menu input[type=text] {
    font-size: 1rem;
  }
  .flyout-menu h3 {
    font-size: 0.6875rem;
    line-height: 19px;
    height: 20px;
    margin: 0;
    padding: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: white;
    border-top: 1px solid #506a83;
    border-bottom: 1px solid #506a83;
    background-color: #628db6;
  }
  .flyout-menu h4 {
    color: white;
  }
  .flyout-menu h3,
  .flyout-menu h4,
  .flyout-menu > p,
  .flyout-menu > a,
  .flyout-menu ul li a,
  .flyout-menu__search,
  .flyout-menu__sidebar > div,
  .flyout-menu__sidebar > p,
  .flyout-menu__sidebar > a,
  .flyout-menu__sidebar > form,
  .flyout-menu > div,
  .flyout-menu > form {
    padding-left: 8px;
  }
  .flyout-menu .flyout-menu__avatar {
    margin-top: -1px;
    padding-left: 0;
  }
  .flyout-menu__sidebar > form {
    display: block;
  }
  .flyout-menu__sidebar > form h3 {
    margin-left: -8px;
  }
  .flyout-menu__sidebar > form label {
    display: inline-block;
    margin: 8px 0;
  }
  .flyout-menu__sidebar > form br br {
    display: none;
  }
  .flyout-menu__sidebar form > ul {
    margin-left: -8px;
    padding-left: 0;
  }
  .flyout-menu__sidebar form > ul li {
    line-height: 39px;
    display: block;
    padding-left: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .flyout-menu__sidebar form > ul li:first-child {
    border-top: none;
  }
  .flyout-menu__sidebar form > ul li label {
    margin: 0;
  }
  .flyout-menu__sidebar form > ul li label a {
    line-height: 1;
    display: inline;
    padding-left: 0;
    border: none;
  }
  .flyout-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .flyout-menu #watchers, .flyout-menu .queries {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
  }
  .flyout-menu #watchers .contextual {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    order: 3;
  }
  #sidebar-wrapper {
    margin-left: -8px;
  }
  .flyout-menu #watchers ul li, .flyout-menu ul.queries li {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .flyout-menu #watchers ul li a, .flyout-menu ul.queries li a {
    border-top: none;
  }
  .flyout-menu ul.queries li a.icon-clear-query {
    flex-shrink: 0;
    padding-right: 8px;
  }
  .flyout-menu ul li a {
    line-height: 40px;
    display: block;
    overflow: hidden;
    height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .flyout-menu ul li:first-child a {
    line-height: 39px;
    height: 39px;
    border-top: none;
  }
  .flyout-menu a {
    color: white;
  }
  .flyout-menu .icon svg, .flyout-menu .icon-only svg {
    stroke: white;
  }
  .flyout-menu ul li a:hover {
    text-decoration: none;
  }
  .flyout-menu ul li a.new-object,
  .new-object ~ .menu-children {
    display: none;
  }
  .flyout-menu__search {
    line-height: 54px;
    height: 64px;
    padding-top: 3px;
    padding-right: 8px;
  }
  .flyout-menu__search input[type=text] {
    line-height: 2;
    width: 100%;
    height: 38px;
    padding-left: 27px;
    vertical-align: middle;
    border: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
  }
  .flyout-menu__avatar {
    display: flex;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .flyout-menu__avatar img.gravatar {
    width: 40px;
    height: 40px;
    padding: 0;
    vertical-align: top;
    border-width: 0;
  }
  .flyout-menu__avatar a {
    line-height: 40px;
    height: 40px;
    text-decoration: none;
    color: white;
  }
  .flyout-menu__avatar a:first-child {
    line-height: 0;
    width: 40px;
    padding: 0;
  }
  .flyout-menu__avatar .user {
    padding-left: 15px;
    padding-right: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
  .flyout-menu__avatar--no-avatar a.user {
    line-height: 40px;
    padding-left: 8px;
  }
  .flyout-is-active body {
    overflow: hidden;
  }
  html.flyout-is-active {
    overflow: hidden;
  }
  .flyout-is-active #wrapper, .flyout-is-active #header {
    right: 250px;
  }
  .flyout-is-active #wrapper {
    overflow: visible;
    height: 100%;
  }
  .flyout-is-active .mobile-toggle-button:after {
    content: "×";
  }
  .flyout-is-active #main {
    cursor: pointer;
  }
  #admin-menu {
    padding-left: 0;
  }
  #admin-menu li {
    padding-bottom: 0;
  }
  #admin-menu a,
  #admin-menu a.selected {
    line-height: 40px;
    padding: 0;
  }
  #admin-menu a.icon:not(:has(svg)) {
    padding-left: 20px !important;
  }
  /*----------------------------------------*\
    E) UX ELEMENTS
  \*----------------------------------------*/
  .mobile-hide {
    display: none;
  }
  .mobile-show {
    display: initial;
  }
  #content > .contextual {
    width: 100%;
    margin-bottom: 0.5em;
    padding-left: 0;
    white-space: normal;
  }
  #content > .contextual > a,
  #content > .contextual .drdn,
  p.buttons a {
    font-weight: bold;
    display: inline-flex;
    margin: 5px 0;
    margin-right: 2px;
    padding: 9px 9px 9px 9px;
    border: 1px solid #ddd;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
  #content > .contextual .drdn-content {
    right: initial;
    left: 0px;
    top: 40px;
  }
  #content > .contextual .drdn .drdn-content a {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  #content > .contextual a.icon:not(:has(svg)),
  p.buttons a.icon:not(:has(svg)) {
    background-position-x: 4px;
    padding-left: 25px;
  }
  .flyout-menu .contextual {
    float: none;
  }
  #ajax-indicator {
    width: 60%;
    left: 20%;
  }
  .ui-dialog {
    max-width: 98%;
    margin: 1%;
  }
  .ui-dialog .ui-dialog-content {
    padding-left: 0;
    padding-right: 0;
  }
  #filters-table {
    width: 100%;
    float: none;
  }
  .add-filter {
    width: 100%;
    float: none;
    text-align: left;
    margin-top: 8px;
  }
  /*----------------------------------------*\
    F) PAGE SPECIFIC STYLES
  \*----------------------------------------*/
  .action-login #main {
    margin: 0;
  }
  div#activity dl, #search-results {
    margin-left: 0;
  }
  .version-overview table.progress {
    width: 75%;
  }
  div#version-summary {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  body.controller-versions.action-show div#roadmap .related-issues {
    width: 100%;
  }
  div#issue-changesets {
    float: none;
    width: auto;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 2em;
  }
  div#issue-changesets div.changeset {
    padding-top: 1em;
  }
  /* Gantt charts */
  .gantt_subjects_column {
    width: 60% !important;
  }
  .gantt_subjects_container {
    width: 100% !important;
    overflow: hidden;
  }
  .gantt_subjects_column .gantt_hdr {
    width: 100% !important;
    right: 0 !important;
    border-right: solid 1px #c0c0c0;
  }
  #gantt_area {
    left: -2px;
    margin-right: -2px;
  }
  /*----------------------------------------*\
    G) FORMS
  \*----------------------------------------*/
  input, select, textarea {
    max-width: 100%;
  }
  .tabular p, .tabular.settings p {
    padding-left: 0;
  }
  .tabular label, .tabular.settings label {
    display: block;
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .tabular input, .tabular select, .tabular textarea {
    width: 100%;
    max-width: 100%;
  }
  .tabular input[type=checkbox], .tabular input.date {
    width: auto;
    max-width: 95%;
  }
  #all_attributes p:first-child {
    float: none !important;
  }
  #all_attributes #issue_tracker_id {
    width: 90%;
  }
  #issue_is_private_label {
    display: inline;
  }
  span#watchers_inputs {
    width: 100%;
  }
  label[for=issue_description] ~ a .icon-edit {
    word-wrap: normal;
  }
  body.controller-issues p.query-totals {
    margin-top: 0px;
    text-align: left;
  }
  #issue_tree:not(.with-related-issues-table-headers) table.issues,
  #relations:not(.with-related-issues-table-headers) table.issues {
    border-collapse: separate;
    border-spacing: 0 1em;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.checkbox),
  #relations:not(.with-related-issues-table-headers) .issue > td:not(.checkbox) {
    display: block;
    float: left;
    text-align: left;
    padding-right: 5px;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.subject,
  #relations:not(.with-related-issues-table-headers) .issue > td.subject {
    width: 100%;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject,
  #relations:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject {
    padding-right: 40px;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.subject),
  #relations:not(.with-related-issues-table-headers) .issue > td:not(.subject) {
    width: 20%;
  }
  #issue_tree:not(.with-related-issues-table-headers) table.issues, #issue_tree:not(.with-related-issues-table-headers) .issue,
  #relations:not(.with-related-issues-table-headers) table.issues, #relations:not(.with-related-issues-table-headers) .issue {
    position: relative;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.buttons,
  #relations:not(.with-related-issues-table-headers) .issue > td.buttons {
    text-align: right;
    position: absolute;
    right: 0;
    margin: 0;
    padding-right: 0;
  }
  #issue_tree:not(.with-related-issues-table-headers) .issue .buttons a,
  #relations:not(.with-related-issues-table-headers) .issue .buttons a {
    vertical-align: middle;
  }
  #issue_tree.with-related-issues-table-headers .subtasks-wrapper,
  #relations.with-related-issues-table-headers .relation-issues-wrapper {
    overflow-x: scroll;
  }
  #issue_tree.with-related-issues-table-headers .issue > td.subject,
  #relations.with-related-issues-table-headers .issue > td.subject {
    min-width: 15rem;
  }
  .attachments_fields span {
    position: relative;
    clear: both;
    margin-bottom: 1em;
    white-space: normal;
  }
  .attachments_fields span a.remove-upload {
    position: absolute;
    top: 0;
    right: 0;
  }
  .attachments_fields input.description {
    margin-left: 0;
    width: 100%;
  }
  /* Calendar */
  ul.cal {
    display: block;
  }
  .cal .calhead {
    display: none;
  }
  .cal .calbody {
    min-height: 3.6em;
  }
  .cal .calbody .abbr-day {
    display: inline;
  }
  .cal .week-number {
    border: 1px solid #c0c0c0;
    text-align: left;
    font-weight: bold;
    background-color: #def;
  }
  .cal .week-number .label-week {
    display: inline;
  }
  .cal .calbody p.day-num {
    font-size: 1.1em;
    text-align: left;
  }
  /* Sticky issue header */
  div#sticky-issue-header {
    top: 64px;
  }
  .controller-issues.action-show div.wiki a[name],
  .controller-issues.action-show #history div[id^=note-],
  .controller-issues.action-show #history div[id^=change-],
  .controller-issues.action-show #update {
    scroll-margin-top: 114px;
  }
  body #header {
    background-color: var(--color-text);
  }
  body .flyout-menu {
    background-color: #29333a;
  }
  body .flyout-menu__avatar {
    margin-left: 8px;
  }
  body .flyout-menu__avatar img.gravatar {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: solid 1px #d5d5d5;
    background: #fff;
    vertical-align: middle;
    border-radius: 0;
    margin-top: 3px;
  }
  body .flyout-menu a {
    color: var(--color-muted);
  }
  body .flyout-menu h3 {
    background-color: var(--bg-top-menu);
    border-color: var(--bg-top-menu);
  }
}
@media all and (max-width: 599px) {
  span.pagination {
    text-align: center;
  }
  .pagination ul.pages li {
    display: none;
  }
  .pagination ul.pages li.current,
  .pagination ul.pages li.previous,
  .pagination ul.pages li.next {
    display: inline-block;
    width: 32%;
    overflow: hidden;
  }
  #login-form {
    width: 100%;
    margin-top: 2em;
  }
  #filters-table .filter .field, #list-definition > div .field {
    width: 100%;
  }
  #filters-table .values {
    width: auto;
    max-width: 100%;
  }
}