/* Active Admin CSS */
@media screen {
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
   ========================================================================== */
  /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
  html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */ }
  /* Sections
   ========================================================================== */
  /**
 * Remove the margin in all browsers.
 */
  body {
    margin: 0; }
  /**
 * Render the `main` element consistently in IE.
 */
  main {
    display: block; }
  /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
  h1 {
    font-size: 2em;
    margin: 0.67em 0; }
  /* Grouping content
   ========================================================================== */
  /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
  hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */ }
  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
  pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */ }
  /* Text-level semantics
   ========================================================================== */
  /**
 * Remove the gray background on active links in IE 10.
 */
  a {
    background-color: transparent; }
  /**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    /* 2 */ }
  /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
  b,
  strong {
    font-weight: bolder; }
  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */ }
  /**
 * Add the correct font size in all browsers.
 */
  small {
    font-size: 80%; }
  /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }
  sub {
    bottom: -0.25em; }
  sup {
    top: -0.5em; }
  /* Embedded content
   ========================================================================== */
  /**
 * Remove the border on images inside links in IE 10.
 */
  img {
    border-style: none; }
  /* Forms
   ========================================================================== */
  /**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */ }
  /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
  button,
  input {
    /* 1 */
    overflow: visible; }
  /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
  button,
  select {
    /* 1 */
    text-transform: none; }
  /**
 * Correct the inability to style clickable types in iOS and Safari.
 */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button; }
  /**
 * Remove the inner border and padding in Firefox.
 */
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  /**
 * Restore the focus styles unset by the previous rule.
 */
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }
  /**
 * Correct the padding in Firefox.
 */
  fieldset {
    padding: 0.35em 0.75em 0.625em; }
  /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
  legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */ }
  /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
  progress {
    vertical-align: baseline; }
  /**
 * Remove the default vertical scrollbar in IE 10+.
 */
  textarea {
    overflow: auto; }
  /**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */ }
  /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto; }
  /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */ }
  /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }
  /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */ }
  /* Interactive
   ========================================================================== */
  /*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
  details {
    display: block; }
  /*
 * Add the correct display in all browsers.
 */
  summary {
    display: list-item; }
  /* Misc
   ========================================================================== */
  /**
 * Add the correct display in IE 10+.
 */
  template {
    display: none; }
  /**
 * Add the correct display in IE 10.
 */
  [hidden] {
    display: none; }
  html {
    font-size: 100.01%; }
  body {
    font-size: 75%;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: #5E6469; }
    h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
      margin: 0; }
  h1 {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.5em; }
  h2 {
    font-size: 2em;
    margin-bottom: 0.75em; }
  h3 {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em; }
  h4 {
    font-size: 1.2em;
    line-height: 1.25;
    margin-bottom: 1.25em; }
  h5 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1.5em; }
  h6 {
    font-size: 1em;
    font-weight: bold; }
  p {
    margin: 0 0 1.5em; }
    p .left {
      margin: 1.5em 1.5em 1.5em 0;
      padding: 0; }
    p .right {
      margin: 1.5em 0 1.5em 1.5em;
      padding: 0; }
  .left {
    float: left !important; }
  .right {
    float: right !important; }
  blockquote {
    margin: 1.5em;
    color: #666;
    font-style: italic; }
  strong, dfn {
    font-weight: bold; }
  em, dfn {
    font-style: italic; }
  sup, sub {
    line-height: 0; }
  abbr,
  acronym {
    border-bottom: 1px dotted #666; }
  address {
    margin: 0 0 1.5em;
    font-style: italic; }
  del {
    color: #666; }
  pre {
    margin: 1.5em 0;
    white-space: pre; }
  pre, code, tt {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height: 1.5; }
  li ul,
  li ol {
    margin: 0; }
  ul, ol {
    margin: 0 1.5em 1.5em 0;
    padding-left: 1.5em; }
  ul {
    list-style-type: disc; }
  ol {
    list-style-type: decimal; }
  dl {
    margin: 0 0 1.5em 0; }
  dl dt {
    font-weight: bold; }
  dd {
    margin-left: 1.5em; }
  table {
    margin-bottom: 1.4em;
    width: 100%; }
  th {
    font-weight: bold; }
  thead th {
    background: #c3d9ff; }
  th, td, caption {
    padding: 4px 10px 4px 5px; }
  .small {
    font-size: .8em;
    margin-bottom: 1.875em;
    line-height: 1.875em; }
  .large {
    font-size: 1.2em;
    line-height: 2.5em;
    margin-bottom: 1.25em; }
  .hide {
    display: none; }
  .quiet {
    color: #666; }
  .loud {
    color: #000; }
  .highlight {
    background: #ff0; }
  .added {
    background: #060;
    color: #fff; }
  .removed {
    background: #900;
    color: #fff; }
  .first {
    margin-left: 0;
    padding-left: 0; }
  .last {
    margin-right: 0;
    padding-right: 0; }
  .top {
    margin-top: 0;
    padding-top: 0; }
  .bottom {
    margin-bottom: 0;
    padding-bottom: 0; }
  #header {
    background-color: #6a7176;
    background-image: linear-gradient(180deg, #6a7176, #4d5256);
    border-bottom: 1px solid #44484b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    text-shadow: #000 0 1px 0;
    display: table;
    height: 20px;
    width: 100%;
    overflow: visible;
    position: inherit;
    padding: 5px 0;
    z-index: 900; }
    #header h1 {
      display: table-cell;
      vertical-align: middle;
      white-space: nowrap;
      color: #cdcdcd;
      margin-right: 20px;
      margin-bottom: 0px;
      padding: 3px 30px 0 30px;
      font-size: 1.3em;
      font-weight: normal;
      line-height: 1.2; }
      #header h1 a {
        text-decoration: none; }
        #header h1 a:hover {
          color: #fff; }
      #header h1 img {
        position: relative;
        top: -2px; }
    #header a, #header a:link {
      color: #cdcdcd; }
    #header .header-item {
      top: 2px;
      position: relative;
      height: 20px; }
    #header ul.tabs {
      display: table-cell;
      vertical-align: middle;
      height: 100%;
      margin: 0;
      padding: 0; }
      #header ul.tabs li {
        /* Hover on li, display the ul */ }
        #header ul.tabs li:hover > ul {
          display: block; }
      #header ul.tabs > li {
        display: inline-block;
        margin-right: 4px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1.0em;
        position: relative;
        /* Drop down menus */ }
        #header ul.tabs > li a {
          text-decoration: none;
          padding: 6px 10px 4px 10px;
          position: relative;
          border-radius: 10px; }
        #header ul.tabs > li.current > a {
          background: #7b8389;
          color: #fff; }
        #header ul.tabs > li.has_nested > a {
          background: url("data:image/png;base64,R0lGODlhBwAEAKIAAL6+vry8vIiIiJWVlf///3t7ewAAAAAAACH5BAEAAAUALAAAAAAHAAQAAAMLWLol80MoF5mQKgEAOw==") no-repeat calc(100% - 7px) 50%;
          padding-right: 20px; }
        #header ul.tabs > li.has_nested.current > a {
          background: #7b8389 url("data:image/png;base64,R0lGODlhBwAEAKIAAG1tbWxsbElJSVBQUP///0JCQgAAAAAAACH5BAEAAAUALAAAAAAHAAQAAAMLWLol80MoF5mQKgEAOw==") no-repeat calc(100% - 7px) 50%;
          padding-right: 20px; }
        #header ul.tabs > li:hover > a {
          background: #7b8389;
          color: #fff; }
        #header ul.tabs > li.has_nested:hover > a {
          border-radius: 0;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          border-bottom: 5px solid #7b8389;
          background: #7b8389 url("data:image/png;base64,R0lGODlhBwAEAKIAAG1tbWxsbElJSVBQUP///0JCQgAAAAAAACH5BAEAAAUALAAAAAAHAAQAAAMLWLol80MoF5mQKgEAOw==") no-repeat calc(100% - 7px) 50%;
          z-index: 1020; }
        #header ul.tabs > li ul {
          background: #7b8389;
          border-top-right-radius: 10px;
          border-top-left-radius: 0;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
          box-shadow: 0 1px 3px #444;
          position: absolute;
          width: 120%;
          min-width: 175px;
          max-width: calc(100% + 20px);
          margin-top: 5px;
          float: left;
          display: none;
          padding: 3px 0px 5px 0;
          list-style: none;
          z-index: 1010; }
          #header ul.tabs > li ul li {
            position: relative;
            margin: 0px; }
            #header ul.tabs > li ul li a {
              background: none;
              display: block; }
              #header ul.tabs > li ul li a:hover {
                color: #fff;
                background: none; }
            #header ul.tabs > li ul li.current a {
              border-radius: 0; }
            #header ul.tabs > li ul li.has_nested > a {
              background: url("data:image/gif;base64,R0lGODlhBAAHAKECAKqqqszMzPkVFfkVFSH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAIALAAAAAAEAAcAAAIJlA0XKbH9nmAFADs=") no-repeat calc(100% - 7px) 55%;
              padding-right: 20px; }
            #header ul.tabs > li ul li.has_nested:hover > a {
              background: url("data:image/gif;base64,R0lGODlhBAAHAMIEAG1tbWxsbElJSVBQUPkVFfkVFfkVFfkVFSH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAAEAAcAAAMKGKqy02G8OGeACQA7") no-repeat calc(100% - 7px) 55%;
              color: #fff; }
            #header ul.tabs > li ul li ul {
              border-top-right-radius: 10px;
              border-top-left-radius: 10px;
              border-bottom-right-radius: 10px;
              border-bottom-left-radius: 10px;
              margin-top: 0;
              top: -3px;
              left: 100%;
              /* Create an invisible backdrop that adds 8px margin around the dropdown menu or submenu
               that maintains the hover. This makes it much easier to navigate to submenus in
               particular without losing hover accientally, especially near rounded corners. */ }
              #header ul.tabs > li ul li ul:after {
                content: "";
                display: block;
                position: absolute;
                top: -8px;
                left: -8px;
                height: calc(100% + 16px);
                width: calc(100% + 16px);
                z-index: -2; }
    #header #tabs {
      width: 100%; }
    #header #utility_nav {
      color: #aaa;
      display: table-cell;
      white-space: nowrap;
      margin: 0;
      padding: 0;
      padding-right: 26px;
      text-align: right; }
      #header #utility_nav a {
        text-decoration: none; }
      #header #utility_nav a:hover {
        color: #fff; }
      #header #utility_nav li {
        display: inline; }
  form {
    /* Reset margins & Padding */
    /* Nested Fieldsets and Legends */
    /* Text Fields */
    /* semantic_errors */
    /* Buttons */ }
    form ul, form ol, form li, form fieldset, form legend, form input, form textarea, form select, form p {
      margin: 0;
      padding: 0; }
    form ol, form ul {
      list-style: none; }
    form fieldset {
      border: 0;
      padding: 10px 0;
      margin-bottom: 20px; }
      form fieldset.inputs {
        background: #f4f4f4;
        border-radius: 4px;
        box-shadow: inset 0 1px 4px #ddd; }
      form fieldset legend {
        width: 100%; }
        form fieldset legend span {
          display: block;
          background-color: #efefef;
          background-image: linear-gradient(180deg, #efefef, #dfe1e2);
          text-shadow: #fff 0 1px 0;
          border: solid 1px #cdcdcd;
          border-color: #d4d4d4;
          border-top-color: #e6e6e6;
          border-right-color: #d4d4d4;
          border-bottom-color: #cdcdcd;
          border-left-color: #d4d4d4;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
          font-size: 1em;
          font-weight: bold;
          line-height: 18px;
          margin-bottom: 0.5em;
          color: #5E6469;
          padding: 5px 10px 3px 10px; }
      form fieldset ol > li {
        padding: 10px; }
        form fieldset ol > li label {
          display: block;
          width: 20%;
          float: left;
          font-size: 1.0em;
          font-weight: bold;
          color: #5E6469; }
          form fieldset ol > li label abbr {
            border: none;
            color: #aaa; }
      form fieldset ol > li.has_many_container {
        padding: 20px 10px; }
        form fieldset ol > li.has_many_container h3 {
          font-size: 12px;
          font-weight: bold; }
        form fieldset ol > li.has_many_container .has_many_fields {
          margin: 10px 0; }
      form fieldset ol > li > li label {
        line-height: 100%;
        padding-top: 0; }
        form fieldset ol > li > li label input {
          line-height: 100%;
          vertical-align: middle;
          margin-top: -0.1em; }
    form .has_many_fields {
      position: relative; }
    form .has_many_container .handle {
      position: absolute;
      top: calc(50% - 3em / 2);
      right: 2px;
      padding: 0;
      cursor: move; }
    form .has_many_container.ui-sortable .has_many_container {
      margin-right: 2em; }
    form .ui-sortable input[type=text], form .ui-sortable input[type=password], form .ui-sortable input[type=email], form .ui-sortable input[type=number], form .ui-sortable input[type=url], form .ui-sortable input[type=tel], form .ui-sortable textarea {
      width: calc(80% - 22px - 2em - 1px); }
    form fieldset > ol > li fieldset {
      position: relative;
      padding: 0;
      margin-bottom: 0; }
      form fieldset > ol > li fieldset:not(.inputs) ol {
        float: left;
        width: 74%;
        margin: 0;
        padding: 0 0 0 20%; }
        form fieldset > ol > li fieldset:not(.inputs) ol li {
          padding: 0;
          border: 0; }
      form fieldset > ol > li fieldset.inputs ol {
        float: left;
        width: 100%;
        margin: 0; }
    form input[type=text],
    form input[type=password],
    form input[type=email],
    form input[type=number],
    form input[type=url],
    form input[type=tel],
    form input[type=date],
    form input[type=time],
    form textarea {
      width: calc(80% - 22px);
      border: 1px solid #c9d0d6;
      border-radius: 3px;
      font-size: 0.95em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      outline: none;
      padding: 8px 10px 7px; }
      form input[type=text]:focus,
      form input[type=password]:focus,
      form input[type=email]:focus,
      form input[type=number]:focus,
      form input[type=url]:focus,
      form input[type=tel]:focus,
      form input[type=date]:focus,
      form input[type=time]:focus,
      form textarea:focus {
        border: 1px solid #99a2aa;
        box-shadow: 0 0 4px #99a2aa; }
    form input[type=date] {
      width: calc(100% - 22px); }
    form fieldset > ol > li {
      /* Hints */
      /* Date and Time Fields */
      /* Check Boxes or Radio fields */
      /* Boolean Field */
      /* Hidden fields */
      /* Errors */ }
      form fieldset > ol > li p.inline-hints {
        font-size: 0.95em;
        font-style: italic;
        color: #666;
        margin: 0.5em 0 0 20%; }
      form fieldset > ol > li.date_select fieldset ol li, form fieldset > ol > li.time_select fieldset ol li, form fieldset > ol > li.datetime_select fieldset ol li {
        float: left;
        width: auto;
        margin: 0 0.5em 0 0; }
        form fieldset > ol > li.date_select fieldset ol li label, form fieldset > ol > li.time_select fieldset ol li label, form fieldset > ol > li.datetime_select fieldset ol li label {
          display: none; }
        form fieldset > ol > li.date_select fieldset ol li input, form fieldset > ol > li.time_select fieldset ol li input, form fieldset > ol > li.datetime_select fieldset ol li input {
          display: inline;
          margin: 0;
          padding: 0; }
      form fieldset > ol > li.check_boxes fieldset ol, form fieldset > ol > li.radio fieldset ol {
        margin-bottom: -0.6em; }
        form fieldset > ol > li.check_boxes fieldset ol li, form fieldset > ol > li.radio fieldset ol li {
          margin: 0.1em 0 0.5em 0; }
          form fieldset > ol > li.check_boxes fieldset ol li label, form fieldset > ol > li.radio fieldset ol li label {
            float: none;
            width: 100%; }
            form fieldset > ol > li.check_boxes fieldset ol li label input, form fieldset > ol > li.radio fieldset ol li label input {
              margin-right: 0.2em; }
      form fieldset > ol > li.boolean {
        min-height: 1.1em; }
        form fieldset > ol > li.boolean label {
          width: 100%;
          padding-left: 20%;
          padding-right: 10px;
          text-transform: none !important;
          font-weight: normal; }
          form fieldset > ol > li.boolean label input {
            margin: 0 0.5em 0 0.2em; }
      form fieldset > ol > li.hidden {
        padding: 0; }
      form fieldset > ol > li p.inline-errors {
        color: #932419;
        font-weight: bold;
        margin: 0.3em 0 0 20%; }
      form fieldset > ol > li ul.errors {
        color: #932419;
        margin: 0.5em 0 0 20%;
        list-style: square; }
        form fieldset > ol > li ul.errors li {
          padding: 0;
          border: none;
          display: list-item; }
      form fieldset > ol > li.error input[type=text], form fieldset > ol > li.error input[type=password], form fieldset > ol > li.error input[type=email], form fieldset > ol > li.error input[type=number], form fieldset > ol > li.error input[type=url], form fieldset > ol > li.error input[type=tel], form fieldset > ol > li.error textarea {
        border: 1px solid #932419; }
    form ul.errors {
      background: #fae6e4;
      border-radius: 4px;
      color: #932419;
      font-weight: bold;
      margin-bottom: 10px;
      padding: 10px;
      list-style: square; }
      form ul.errors li {
        margin-left: 15px;
        padding: 0;
        border: none;
        display: list-item; }
    form input[type=submit], form input[type=button], form button {
      cursor: pointer;
      background-color: #838a90;
      background-image: linear-gradient(180deg, #838a90, #414549);
      text-shadow: #000 0 1px 0;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0px rgba(255, 255, 255, 0.2) inset;
      border: solid 1px #484e53;
      border-color: #484e53;
      border-top-color: #616a71;
      border-right-color: #484e53;
      border-bottom-color: #363b3f;
      border-left-color: #484e53;
      color: #efefef;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      form input.disabled[type=submit], form input.disabled[type=button], form button.disabled {
        opacity: 0.5;
        cursor: default; }
      form input[type=submit]:not(.disabled):hover, form input[type=button]:not(.disabled):hover, form button:not(.disabled):hover {
        background-color: #8b9297;
        background-image: linear-gradient(180deg, #8b9297, #484d51); }
      form input[type=submit]:not(.disabled):active, form input[type=button]:not(.disabled):active, form button:not(.disabled):active {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 0px #FFF;
        background-color: #71797f;
        background-image: linear-gradient(180deg, #71797f, #35383b); }
    form .buttons, form .actions {
      margin-top: 15px; }
      form .buttons input[type=submit], form .buttons input[type=button], form .buttons button, form .actions input[type=submit], form .actions input[type=button], form .actions button {
        margin-right: 10px; }
    form .actions .create_another {
      float: none;
      margin-bottom: 10px; }
      form .actions .create_another label {
        float: none;
        display: inline; }
    form fieldset.buttons li, form fieldset.actions li {
      float: left;
      padding: 0; }
      form fieldset.buttons li.cancel a, form fieldset.actions li.cancel a {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
        border: solid 1px #c7c7c7;
        border-color: #c7c7c7;
        border-top-color: #d3d3d3;
        border-right-color: #c7c7c7;
        border-bottom-color: #c2c2c2;
        border-left-color: #c7c7c7;
        text-shadow: #fff 0 1px 0;
        color: #5E6469;
        border-radius: 200px;
        display: inline-block;
        font-weight: bold;
        font-size: 1.0em;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 12px;
        margin-right: 3px;
        padding: 7px 16px 6px;
        text-decoration: none; }
        form fieldset.buttons li.cancel a.disabled, form fieldset.actions li.cancel a.disabled {
          opacity: 0.5;
          cursor: default; }
        form fieldset.buttons li.cancel a:not(.disabled):hover, form fieldset.actions li.cancel a:not(.disabled):hover {
          background-color: #FFFFFF;
          background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
        form fieldset.buttons li.cancel a:not(.disabled):active, form fieldset.actions li.cancel a:not(.disabled):active {
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
          border-color: #b9b9b9;
          border-top-color: #c2c2c2;
          border-right-color: #b9b9b9;
          border-bottom-color: #b7b7b7;
          border-left-color: #b9b9b9;
          background-color: #F3F3F3;
          background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
  .sidebar_section label {
    display: block;
    text-transform: uppercase;
    color: #5E6469;
    font-size: 0.9em;
    font-weight: bold; }
  .sidebar_section select {
    width: 240px; }
  .sidebar_section input[type=text], .sidebar_section input[type=password], .sidebar_section input[type=email], .sidebar_section input[type=url], .sidebar_section input[type=tel], .sidebar_section textarea {
    width: 220px; }
  form.filter_form .filter_form_field {
    margin-bottom: 10px;
    clear: both; }
    form.filter_form .filter_form_field.select_and_search input[type=text] {
      margin-left: 16px;
      width: 88px; }
    form.filter_form .filter_form_field.select_and_search select {
      width: 108px; }
    form.filter_form .filter_form_field.filter_check_boxes label {
      margin-bottom: 3px; }
    form.filter_form .filter_form_field.filter_check_boxes fieldset {
      margin-bottom: 0px;
      padding-bottom: 0px; }
    form.filter_form .filter_form_field.filter_check_boxes .check_boxes_wrapper label {
      font-weight: normal;
      margin-bottom: 3px;
      text-transform: none;
      font-size: 1.0em; }
      form.filter_form .filter_form_field.filter_check_boxes .check_boxes_wrapper label input {
        vertical-align: baseline; }
    form.filter_form .filter_form_field.filter_date_range input[type=text] {
      width: 114px; }
      form.filter_form .filter_form_field.filter_date_range input[type=text] + input {
        margin-left: 6px; }
  form.filter_form a.clear_filters_btn {
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border: solid 1px #c7c7c7;
    border-color: #c7c7c7;
    border-top-color: #d3d3d3;
    border-right-color: #c7c7c7;
    border-bottom-color: #c2c2c2;
    border-left-color: #c7c7c7;
    text-shadow: #fff 0 1px 0;
    color: #5E6469;
    border-radius: 200px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 12px;
    margin-right: 3px;
    padding: 7px 16px 6px;
    text-decoration: none; }
    form.filter_form a.clear_filters_btn.disabled {
      opacity: 0.5;
      cursor: default; }
    form.filter_form a.clear_filters_btn:not(.disabled):hover {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
    form.filter_form a.clear_filters_btn:not(.disabled):active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
      border-color: #b9b9b9;
      border-top-color: #c2c2c2;
      border-right-color: #b9b9b9;
      border-bottom-color: #b7b7b7;
      border-left-color: #b9b9b9;
      background-color: #F3F3F3;
      background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
  .comments .active_admin_comment {
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 700px; }
    .comments .active_admin_comment:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0; }
    .comments .active_admin_comment .active_admin_comment_meta {
      width: 130px;
      float: left;
      overflow: hidden;
      font-size: 0.9em;
      color: #767e84; }
      .comments .active_admin_comment .active_admin_comment_meta .active_admin_comment_author {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
        color: #5E6469; }
    .comments .active_admin_comment .active_admin_comment_body {
      margin-left: 150px; }
  .comments form.active_admin_comment {
    margin: 0;
    padding: 0;
    margin-left: 150px; }
    .comments form.active_admin_comment fieldset.inputs {
      margin: 0;
      padding: 0;
      background: none;
      box-shadow: none; }
    .comments form.active_admin_comment li {
      padding: 0; }
    .comments form.active_admin_comment fieldset.buttons {
      padding: 0;
      margin-top: 5px; }
  body.logged_in .flash {
    background-color: #f7f1d3;
    background-image: linear-gradient(180deg, #f7f1d3, #f5edc5);
    text-shadow: #fafafa 0 1px 0;
    border-bottom: 1px solid #eee098;
    color: #cb9810;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.0em;
    padding: 13px 30px 11px;
    position: relative; }
    body.logged_in .flash.flash_notice {
      background-color: #dce9dd;
      background-image: linear-gradient(180deg, #dce9dd, #ccdfcd);
      border-bottom: 1px solid #adcbaf;
      color: #416347; }
    body.logged_in .flash.flash_error {
      background-color: #f5e4e4;
      background-image: linear-gradient(180deg, #f5e4e4, #f1dcdc);
      border-bottom: 1px solid #e0c2c0;
      color: #b33c33; }
  body.logged_out .flash {
    box-shadow: none;
    text-shadow: #fff 0 1px 0;
    background: none;
    color: #666;
    font-weight: bold;
    line-height: 1.0em;
    padding: 0;
    margin-bottom: 8px; }
  .ui-datepicker {
    background: #fff;
    background-clip: padding-box;
    color: #fff;
    display: none;
    margin-top: 2px;
    padding: 0;
    text-align: center;
    width: 160px; }
    .ui-datepicker a {
      text-decoration: none; }
      .ui-datepicker a:hover {
        cursor: pointer; }
    .ui-datepicker .ui-datepicker-header {
      background-color: #6a7176;
      background-image: linear-gradient(180deg, #6a7176, #4d5256);
      border-bottom: 1px solid #44484b;
      padding: 12px 5px 7px 4px;
      margin: 0px 0px 2px 2px;
      width: 156px;
      border-top-left-radius: 7px;
      border-top-right-radius: 7px;
      position: relative;
      z-index: 2000; }
      .ui-datepicker .ui-datepicker-header:before {
        content: "";
        position: absolute;
        right: 45%;
        top: -6px;
        width: 0px;
        height: 0px;
        border-left: 8.5px solid rgba(0, 0, 0, 0);
        border-right: 8.5px solid rgba(0, 0, 0, 0);
        border-bottom: 10px solid #676e73; }
      .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
        text-shadow: #000 0 1px 0;
        color: #fff;
        display: block;
        font-size: 1.1em;
        font-weight: bold;
        line-height: 0.8em;
        text-align: center; }
        .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
          margin: -4px 0 0 0; }
        .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year {
          margin: -4px 0 0 0; }
      .ui-datepicker .ui-datepicker-header a {
        color: #fff;
        display: block;
        height: 19px;
        margin-top: -4px;
        width: 10px; }
        .ui-datepicker .ui-datepicker-header a.ui-datepicker-prev {
          float: left;
          width: 0;
          height: 0;
          margin: 0px 0px 0px 4px;
          border-top: 5px solid transparent;
          border-right: 5px solid white;
          border-bottom: 5px solid transparent; }
        .ui-datepicker .ui-datepicker-header a.ui-datepicker-next {
          float: right;
          width: 0;
          height: 0;
          margin: 0px 4px 0px 0px;
          border-top: 5px solid transparent;
          border-left: 5px solid white;
          border-bottom: 5px solid transparent; }
        .ui-datepicker .ui-datepicker-header a span {
          display: none; }
    .ui-datepicker table.ui-datepicker-calendar {
      border-radius: 0;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.26);
      background-color: #f4f4f4;
      border: solid 1px #63686e;
      left: 2px;
      margin-bottom: 0px;
      position: relative;
      top: -2px;
      width: 156px; }
      .ui-datepicker table.ui-datepicker-calendar td, .ui-datepicker table.ui-datepicker-calendar th {
        padding: 0px;
        text-align: center; }
      .ui-datepicker table.ui-datepicker-calendar thead th {
        background-color: #dbdddf;
        color: #333333;
        font-weight: normal;
        font-size: 0.8em;
        padding-top: 1px; }
      .ui-datepicker table.ui-datepicker-calendar tbody {
        color: #666666; }
        .ui-datepicker table.ui-datepicker-calendar tbody td {
          border: none;
          height: 24px;
          width: 22px; }
          .ui-datepicker table.ui-datepicker-calendar tbody td a {
            border-radius: 3px;
            color: #666666;
            font-weight: bold;
            font-size: 0.85em;
            padding: 4px; }
            .ui-datepicker table.ui-datepicker-calendar tbody td a.ui-state-active {
              background-color: #5a5f64;
              color: #fff; }
              .ui-datepicker table.ui-datepicker-calendar tbody td a.ui-state-active.ui-state-hover {
                background-color: #5a5f64;
                color: #fff; }
            .ui-datepicker table.ui-datepicker-calendar tbody td a.ui-state-hover {
              background-color: #eceef0; }
            .ui-datepicker table.ui-datepicker-calendar tbody td a.ui-state-highlight {
              background-color: #dbdddf; }
  table tr td {
    vertical-align: top; }
  table tr th {
    text-align: left; }
  table.index_table {
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    border-spacing: 0; }
    table.index_table th {
      background-color: #efefef;
      background-image: linear-gradient(180deg, #efefef, #dfe1e2);
      text-shadow: #fff 0 1px 0;
      border: solid 1px #cdcdcd;
      border-color: #d4d4d4;
      border-top-color: #e6e6e6;
      border-right-color: #d4d4d4;
      border-bottom-color: #cdcdcd;
      border-left-color: #d4d4d4;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
      font-size: 1em;
      font-weight: bold;
      line-height: 18px;
      margin-bottom: 0.5em;
      color: #5E6469;
      padding: 5px 10px 3px 10px;
      border-right: none;
      padding-left: 12px;
      padding-right: 12px; }
      table.index_table th a, table.index_table th a:link, table.index_table th a:visited {
        color: #5E6469;
        text-decoration: none;
        display: block;
        white-space: nowrap; }
      table.index_table th.sortable a {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAABGCAYAAAAAVo4aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH5JREFUeNpi3LhlOwMU1AExGxDXwARYoHQLEFdD2cxAXAliMKFJgEAFEHfBJEHGMKLhMpgkTsAEdch/NNwCk2xCdiEQtML4LEgCf6EubUX3Cgh0oNvJ+P//f7wOGpUclRwYSZb41CyidNbB8giNM+9oXhmVHHm5bJjUSAABBgDKKiwMMUxPwgAAAABJRU5ErkJggg==") no-repeat 0 4px;
        padding-left: 13px; }
      table.index_table th.sorted-asc a {
        background-position: 0 -27px; }
      table.index_table th.sorted-desc a {
        background-position: 0 -56px; }
      table.index_table th.sorted-asc, table.index_table th.sorted-desc {
        background-color: #e2e2e2;
        background-image: linear-gradient(180deg, #e2e2e2, #d2d4d6); }
      table.index_table th:last-child {
        border-right: solid 1px #d4d4d4; }
    table.index_table tr.even td {
      background: #f4f5f5; }
    table.index_table tr.selected td {
      background: #d9e4ec; }
    table.index_table td {
      padding: 10px 12px 8px 12px;
      border-bottom: 1px solid #e8e8e8;
      vertical-align: top; }
  .panel_contents table {
    margin-top: 5px; }
    .panel_contents table th {
      padding-top: 10px;
      background: none;
      color: #5E6469;
      box-shadow: none;
      text-shadow: #fff 0 1px 0;
      text-transform: uppercase;
      border-bottom: 1px solid #ccc; }
    .panel_contents table tr.odd td {
      background: #ecedee; }
    .panel_contents table tr.even td {
      background: #f4f5f5; }
  .attributes_table {
    overflow: hidden; }
  .attributes_table table col.even {
    background: #f4f5f5; }
  .attributes_table table col.odd {
    background: #ecedee; }
  .attributes_table table th, .attributes_table table td {
    padding: 8px 12px 6px 12px;
    vertical-align: top;
    border-bottom: 1px solid #e8e8e8; }
  .attributes_table table th {
    box-shadow: none;
    background: none;
    width: 150px;
    font-size: 0.9em;
    padding-left: 0;
    text-transform: uppercase;
    color: #5E6469;
    text-shadow: #fff 0 1px 0; }
  .attributes_table table td .empty {
    color: #bbb;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.2em; }
  .sidebar_section .attributes_table th {
    width: 50px; }
  #collection_selection_toggle_panel:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0; }
  #collection_selection_toggle_panel > .resource_selection_toggle_cell {
    float: left; }
  .ui-widget-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001; }
  .ui-dialog {
    position: fixed;
    z-index: 1002;
    background: #f4f4f4;
    border-radius: 4px;
    box-shadow: inset 0 1px 4px #ddd;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; }
    .ui-dialog .ui-dialog-titlebar {
      background-color: #efefef;
      background-image: linear-gradient(180deg, #efefef, #dfe1e2);
      text-shadow: #fff 0 1px 0;
      border: solid 1px #cdcdcd;
      border-color: #d4d4d4;
      border-top-color: #e6e6e6;
      border-right-color: #d4d4d4;
      border-bottom-color: #cdcdcd;
      border-left-color: #d4d4d4;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
      font-size: 1em;
      font-weight: bold;
      line-height: 18px;
      margin-bottom: 0.5em;
      color: #5E6469;
      padding: 5px 10px 3px 10px; }
      .ui-dialog .ui-dialog-titlebar span {
        font-size: 1.1em; }
    .ui-dialog ul {
      list-style-type: none; }
    .ui-dialog li {
      margin: 10px 0; }
    .ui-dialog label {
      margin-right: 10px; }
    .ui-dialog .ui-dialog-buttonpane, .ui-dialog form {
      padding: 7px 15px 13px; }
    .ui-dialog .ui-dialog-buttonpane button {
      background-color: #838a90;
      background-image: linear-gradient(180deg, #838a90, #414549);
      text-shadow: #000 0 1px 0;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0px rgba(255, 255, 255, 0.2) inset;
      border: solid 1px #484e53;
      border-color: #484e53;
      border-top-color: #616a71;
      border-right-color: #484e53;
      border-bottom-color: #363b3f;
      border-left-color: #484e53;
      color: #efefef;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .ui-dialog .ui-dialog-buttonpane button.disabled {
        opacity: 0.5;
        cursor: default; }
      .ui-dialog .ui-dialog-buttonpane button:not(.disabled):hover {
        background-color: #8b9297;
        background-image: linear-gradient(180deg, #8b9297, #484d51); }
      .ui-dialog .ui-dialog-buttonpane button:not(.disabled):active {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 0px #FFF;
        background-color: #71797f;
        background-image: linear-gradient(180deg, #71797f, #35383b); }
    .ui-dialog .ui-dialog-buttonpane button:last-child {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
      border: solid 1px #c7c7c7;
      border-color: #c7c7c7;
      border-top-color: #d3d3d3;
      border-right-color: #c7c7c7;
      border-bottom-color: #c2c2c2;
      border-left-color: #c7c7c7;
      text-shadow: #fff 0 1px 0;
      color: #5E6469;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .ui-dialog .ui-dialog-buttonpane button.disabled:last-child {
        opacity: 0.5;
        cursor: default; }
      .ui-dialog .ui-dialog-buttonpane button:last-child:not(.disabled):hover {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
      .ui-dialog .ui-dialog-buttonpane button:last-child:not(.disabled):active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
        border-color: #b9b9b9;
        border-top-color: #c2c2c2;
        border-right-color: #b9b9b9;
        border-bottom-color: #b7b7b7;
        border-left-color: #b9b9b9;
        background-color: #F3F3F3;
        background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
  .active_admin_dialog.ui-dialog .ui-dialog-titlebar-close {
    display: none; }
  .blank_slate_container {
    clear: both;
    text-align: center; }
    .blank_slate_container .blank_slate {
      border-radius: 3px;
      border: 1px dashed #DADADA;
      color: #AAA;
      display: inline-block;
      font-size: 1.2em;
      font-weight: bold;
      padding: 14px 25px;
      text-align: center; }
      .blank_slate_container .blank_slate small {
        display: block;
        font-size: 0.9em;
        font-weight: normal; }
  .admin_dashboard .blank_slate_container .blank_slate {
    margin-top: 40px;
    margin-bottom: 40px; }
  .with_sidebar .blank_slate_container .blank_slate {
    margin-top: 80px; }
  .breadcrumb {
    display: block;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 1.0em;
    margin-bottom: 12px;
    text-transform: uppercase; }
    .breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:active {
      color: #8a949e;
      text-decoration: none; }
    .breadcrumb a:hover {
      text-decoration: underline; }
    .breadcrumb .breadcrumb_sep {
      margin: 0 2px;
      color: #aab2ba; }
  .dropdown_menu {
    display: inline; }
    .dropdown_menu .dropdown_menu_button {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
      border: solid 1px #c7c7c7;
      border-color: #c7c7c7;
      border-top-color: #d3d3d3;
      border-right-color: #c7c7c7;
      border-bottom-color: #c2c2c2;
      border-left-color: #c7c7c7;
      text-shadow: #fff 0 1px 0;
      color: #5E6469;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .dropdown_menu .dropdown_menu_button.disabled {
        opacity: 0.5;
        cursor: default; }
      .dropdown_menu .dropdown_menu_button:not(.disabled):hover {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
      .dropdown_menu .dropdown_menu_button:not(.disabled):active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
        border-color: #b9b9b9;
        border-top-color: #c2c2c2;
        border-right-color: #b9b9b9;
        border-bottom-color: #b7b7b7;
        border-left-color: #b9b9b9;
        background-color: #F3F3F3;
        background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
      .dropdown_menu .dropdown_menu_button {
        position: relative;
        padding-right: 22px !important;
        cursor: pointer; }
      .dropdown_menu .dropdown_menu_button:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 3px 3px 0;
        border-style: solid;
        border-color: #FFF transparent;
        right: 12px;
        top: 45%; }
      .dropdown_menu .dropdown_menu_button:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 3px 3px 0;
        border-style: solid;
        border-color: #777 transparent;
        right: 12px;
        top: 45%; }
    .dropdown_menu .dropdown_menu_nipple {
      content: "";
      position: absolute;
      top: -6px;
      display: block;
      width: 0;
      height: 0;
      border-width: 0 6px 6px;
      border-style: solid;
      border-color: #545a5e transparent;
      z-index: 100; }
      .dropdown_menu .dropdown_menu_nipple:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 0 5px 5px;
        border-style: solid;
        border-color: #838a90 transparent;
        left: -5px;
        top: 1px; }
      .dropdown_menu .dropdown_menu_nipple:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 0 5px 5px;
        border-style: solid;
        border-color: #686e74 transparent;
        left: -5px;
        top: 2px; }
    .dropdown_menu .dropdown_menu_list_wrapper {
      display: inline-block;
      position: absolute;
      background-color: white;
      padding: 2px;
      box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, #838a90 0px 1px 0px 0px inset;
      background-color: #5E6469;
      background-color: #686e74;
      background-image: linear-gradient(180deg, #686e74, #52575c);
      border: solid 1px #464a4e;
      border-top-color: #545a5e;
      border-bottom-color: #35383b;
      border-radius: 4px;
      z-index: 2000;
      display: none; }
      .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list {
        display: block;
        background-color: #FFF;
        border: solid 1px #464a4e;
        box-shadow: #6a7176 0px 1px 0px 0px;
        border-radius: 3px;
        margin: 0;
        overflow: hidden;
        padding: 8px;
        list-style-type: none;
        padding: 0; }
        .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li {
          display: block;
          border-bottom: solid 1px #ebebeb; }
          .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li a {
            display: block;
            box-sizing: padding-box;
            font-size: 0.95em;
            font-weight: bold;
            padding: 7px 16px 5px;
            text-decoration: none;
            text-align: center;
            white-space: nowrap; }
            .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li a:hover {
              background-color: #75a1c2;
              background-image: linear-gradient(180deg, #75a1c2, #608cb4);
              text-shadow: #5a83aa 0 1px 0;
              color: #FFF; }
            .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li a:active {
              background-color: #608cb4;
              background-image: linear-gradient(180deg, #608cb4, #75a1c2);
              color: #FFF; }
          .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li:first-child a {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px; }
          .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li:last-child {
            border: none; }
            .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li:last-child a {
              border-bottom-left-radius: 2px;
              border-bottom-right-radius: 2px; }
  a.member_link {
    margin-right: 7px;
    white-space: nowrap; }
  a.button, a.button:link, a.button:visited, input[type=submit], input[type=button], button {
    background-color: #838a90;
    background-image: linear-gradient(180deg, #838a90, #414549);
    text-shadow: #000 0 1px 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0px rgba(255, 255, 255, 0.2) inset;
    border: solid 1px #484e53;
    border-color: #484e53;
    border-top-color: #616a71;
    border-right-color: #484e53;
    border-bottom-color: #363b3f;
    border-left-color: #484e53;
    color: #efefef;
    border-radius: 200px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 12px;
    margin-right: 3px;
    padding: 7px 16px 6px;
    text-decoration: none; }
    a.button.disabled, a.button.disabled:link, a.button.disabled:visited, input.disabled[type=submit], input.disabled[type=button], button.disabled {
      opacity: 0.5;
      cursor: default; }
    a.button:not(.disabled):hover, a.button:link:not(.disabled):hover, a.button:visited:not(.disabled):hover, input[type=submit]:not(.disabled):hover, input[type=button]:not(.disabled):hover, button:not(.disabled):hover {
      background-color: #8b9297;
      background-image: linear-gradient(180deg, #8b9297, #484d51); }
    a.button:not(.disabled):active, a.button:link:not(.disabled):active, a.button:visited:not(.disabled):active, input[type=submit]:not(.disabled):active, input[type=button]:not(.disabled):active, button:not(.disabled):active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 0px #FFF;
      background-color: #71797f;
      background-image: linear-gradient(180deg, #71797f, #35383b); }
  table.index_grid td {
    border: none;
    background: none;
    padding: 0 20px 20px 0;
    margin: 0; }
  .columns {
    clear: both;
    padding: 0; }
    .columns .column {
      float: left; }
  a, a:link, a:visited {
    color: #38678b;
    text-decoration: underline; }
  a:hover {
    text-decoration: none; }
  .paginated_collection_contents {
    clear: both; }
  .pagination {
    float: right;
    font-size: 0.9em;
    margin-left: 10px; }
    .pagination a {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
      border: solid 1px #c7c7c7;
      border-color: #c7c7c7;
      border-top-color: #d3d3d3;
      border-right-color: #c7c7c7;
      border-bottom-color: #c2c2c2;
      border-left-color: #c7c7c7;
      text-shadow: #fff 0 1px 0;
      color: #5E6469;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .pagination a.disabled {
        opacity: 0.5;
        cursor: default; }
      .pagination a:not(.disabled):hover {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
      .pagination a:not(.disabled):active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
        border-color: #b9b9b9;
        border-top-color: #c2c2c2;
        border-right-color: #b9b9b9;
        border-bottom-color: #b7b7b7;
        border-left-color: #b9b9b9;
        background-color: #F3F3F3;
        background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
    .pagination span.page.current {
      background-color: #838a90;
      background-image: linear-gradient(180deg, #838a90, #414549);
      text-shadow: #000 0 1px 0;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0px rgba(255, 255, 255, 0.2) inset;
      border: solid 1px #484e53;
      border-color: #484e53;
      border-top-color: #616a71;
      border-right-color: #484e53;
      border-bottom-color: #363b3f;
      border-left-color: #484e53;
      color: #efefef;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .pagination span.page.current.disabled {
        opacity: 0.5;
        cursor: default; }
      .pagination span.page.current:not(.disabled):hover {
        background-color: #8b9297;
        background-image: linear-gradient(180deg, #8b9297, #484d51); }
      .pagination span.page.current:not(.disabled):active {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 0px #FFF;
        background-color: #71797f;
        background-image: linear-gradient(180deg, #71797f, #35383b); }
    .pagination a, .pagination span.page.current {
      border-radius: 0px;
      margin-right: 4px;
      padding: 2px 5px; }
  .pagination_information {
    float: right;
    margin-bottom: 5px;
    color: #b3bcc1; }
    .pagination_information b {
      color: #5c6469; }
  .download_links {
    float: left; }
  .pagination_per_page {
    float: right;
    margin-left: 4px; }
    .pagination_per_page select {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
      border: solid 1px #c7c7c7;
      border-color: #c7c7c7;
      border-top-color: #d3d3d3;
      border-right-color: #c7c7c7;
      border-bottom-color: #c2c2c2;
      border-left-color: #c7c7c7;
      text-shadow: #fff 0 1px 0;
      color: #5E6469;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      .pagination_per_page select.disabled {
        opacity: 0.5;
        cursor: default; }
      .pagination_per_page select:not(.disabled):hover {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
      .pagination_per_page select:not(.disabled):active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
        border-color: #b9b9b9;
        border-top-color: #c2c2c2;
        border-right-color: #b9b9b9;
        border-bottom-color: #b7b7b7;
        border-left-color: #b9b9b9;
        background-color: #F3F3F3;
        background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
      .pagination_per_page select {
        border-radius: 0px;
        padding: 1px 5px; }
  .comments .pagination {
    float: left;
    margin-bottom: 30px; }
  .comments .pagination_information {
    float: left;
    color: #000; }
  .section, .panel {
    background: #f4f4f4;
    border-radius: 4px;
    box-shadow: inset 0 1px 4px #ddd;
    margin-bottom: 20px; }
    .section > h3, .panel > h3 {
      background-color: #efefef;
      background-image: linear-gradient(180deg, #efefef, #dfe1e2);
      text-shadow: #fff 0 1px 0;
      border: solid 1px #cdcdcd;
      border-color: #d4d4d4;
      border-top-color: #e6e6e6;
      border-right-color: #d4d4d4;
      border-bottom-color: #cdcdcd;
      border-left-color: #d4d4d4;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
      font-size: 1em;
      font-weight: bold;
      line-height: 18px;
      margin-bottom: 0.5em;
      color: #5E6469;
      padding: 5px 10px 3px 10px; }
      .section > h3 .header_action, .panel > h3 .header_action {
        float: right; }
    .section > div, .panel > div {
      padding: 3px 15px 15px 15px; }
    .section hr, .panel hr {
      border: none;
      border-bottom: 1px solid #E8E8E8; }
  .sidebar_section {
    background: #f4f4f4;
    border-radius: 4px;
    box-shadow: inset 0 1px 4px #ddd;
    margin-bottom: 20px; }
    .sidebar_section > h3 {
      background-color: #efefef;
      background-image: linear-gradient(180deg, #efefef, #dfe1e2);
      text-shadow: #fff 0 1px 0;
      border: solid 1px #cdcdcd;
      border-color: #d4d4d4;
      border-top-color: #e6e6e6;
      border-right-color: #d4d4d4;
      border-bottom-color: #cdcdcd;
      border-left-color: #d4d4d4;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
      font-size: 1em;
      font-weight: bold;
      line-height: 18px;
      margin-bottom: 0.5em;
      color: #5E6469;
      padding: 5px 10px 3px 10px; }
      .sidebar_section > h3 .header_action {
        float: right; }
    .sidebar_section > div {
      padding: 3px 15px 15px 15px; }
    .sidebar_section hr {
      border: none;
      border-bottom: 1px solid #E8E8E8; }
  .columns {
    margin-bottom: 10px; }
  .scopes li .count {
    color: #8e979e;
    font-weight: normal;
    font-size: 0.9em;
    line-height: 10px; }
  .scopes li:first-child a {
    margin-left: 10px; }
  .status_tag {
    background: #cacaca;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 3px 5px 2px 5px;
    font-size: 0.8em; }
    .status_tag.yes {
      background: #6090DB; }
    .status_tag.no {
      background: grey; }
  .table_tools {
    margin-bottom: 16px; }
    .table_tools:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0; }
  .table_tools .dropdown_menu {
    float: left; }
  a.table_tools_button, .table_tools .dropdown_menu_button {
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border: solid 1px #c7c7c7;
    border-color: #c7c7c7;
    border-top-color: #d3d3d3;
    border-right-color: #c7c7c7;
    border-bottom-color: #c2c2c2;
    border-left-color: #c7c7c7;
    text-shadow: #fff 0 1px 0;
    color: #5E6469;
    border-radius: 200px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.0em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 12px;
    margin-right: 3px;
    padding: 7px 16px 6px;
    text-decoration: none; }
    a.table_tools_button.disabled, .table_tools .dropdown_menu_button.disabled {
      opacity: 0.5;
      cursor: default; }
    a.table_tools_button:not(.disabled):hover, .table_tools .dropdown_menu_button:not(.disabled):hover {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
    a.table_tools_button:not(.disabled):active, .table_tools .dropdown_menu_button:not(.disabled):active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
      border-color: #b9b9b9;
      border-top-color: #c2c2c2;
      border-right-color: #b9b9b9;
      border-bottom-color: #b7b7b7;
      border-left-color: #b9b9b9;
      background-color: #F3F3F3;
      background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
    a.table_tools_button, .table_tools .dropdown_menu_button {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #F0F0F0);
      border-color: #d0d0d0;
      border-top-color: #d9d9d9;
      border-right-color: #d0d0d0;
      border-bottom-color: #c5c5c5;
      border-left-color: #d0d0d0;
      font-size: 0.9em;
      padding: 4px 14px 4px;
      margin: 0; }
    a.table_tools_button:not(.disabled):hover, .table_tools .dropdown_menu_button:not(.disabled):hover {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #F6F6F6); }
    a.table_tools_button:not(.disabled):active, .table_tools .dropdown_menu_button:not(.disabled):active {
      border-color: #c8c8c8;
      border-top-color: #d7d7d7;
      border-right-color: #c8c8c8;
      border-bottom-color: #c3c3c3;
      border-left-color: #c8c8c8;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17) inset;
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E8E8E8); }
  .table_tools_segmented_control {
    list-style-type: none;
    padding: 0;
    margin: 0; }
    .table_tools_segmented_control li {
      float: left; }
      .table_tools_segmented_control li a {
        border-width: 1px .5px 1px .5px;
        border-radius: 0; }
      .table_tools_segmented_control li:first-child a {
        border-left-width: 1px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px; }
      .table_tools_segmented_control li:last-child a {
        border-right-width: 1px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px; }
      .table_tools_segmented_control li.selected a {
        background-color: #F0F0F0;
        background-image: linear-gradient(180deg, #F0F0F0, #FDFDFD);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
        cursor: default; }
        .table_tools_segmented_control li.selected a:hover {
          background-color: #F0F0F0;
          background-image: linear-gradient(180deg, #F0F0F0, #FDFDFD); }
  .indexes {
    float: right; }
    .indexes li .count {
      color: #8e979e;
      font-weight: normal;
      font-size: 0.9em;
      line-height: 10px; }
  .unsupported_browser {
    padding: 10px 30px;
    color: #211e14;
    background-color: #fae692;
    background-color: #feefae;
    background-image: linear-gradient(180deg, #feefae, #fae692);
    border-bottom: 1px solid #b3a569; }
    .unsupported_browser h1 {
      font-size: 13px;
      font-weight: bold; }
    .unsupported_browser p {
      margin-bottom: 0.5em; }
  .ui-tabs-nav {
    list-style: none;
    display: block;
    width: auto;
    margin-bottom: -12px;
    padding-left: 0;
    overflow: auto;
    margin-left: 15px; }
    .ui-tabs-nav li {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      float: left; }
      .ui-tabs-nav li:first-child a {
        border-left-width: 1px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px; }
      .ui-tabs-nav li:last-child a {
        border-right-width: 1px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px; }
      .ui-tabs-nav li a {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
        border: solid 1px #c7c7c7;
        border-color: #c7c7c7;
        border-top-color: #d3d3d3;
        border-right-color: #c7c7c7;
        border-bottom-color: #c2c2c2;
        border-left-color: #c7c7c7;
        text-shadow: #fff 0 1px 0;
        color: #5E6469;
        border-radius: 200px;
        display: inline-block;
        font-weight: bold;
        font-size: 1.0em;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 12px;
        margin-right: 3px;
        padding: 7px 16px 6px;
        text-decoration: none; }
        .ui-tabs-nav li a.disabled {
          opacity: 0.5;
          cursor: default; }
        .ui-tabs-nav li a:not(.disabled):hover {
          background-color: #FFFFFF;
          background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
        .ui-tabs-nav li a:not(.disabled):active {
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
          border-color: #b9b9b9;
          border-top-color: #c2c2c2;
          border-right-color: #b9b9b9;
          border-bottom-color: #b7b7b7;
          border-left-color: #b9b9b9;
          background-color: #F3F3F3;
          background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
        .ui-tabs-nav li a {
          background-color: #FFFFFF;
          background-image: linear-gradient(180deg, #FFFFFF, #F0F0F0);
          border-color: #d0d0d0;
          border-top-color: #d9d9d9;
          border-right-color: #d0d0d0;
          border-bottom-color: #c5c5c5;
          border-left-color: #d0d0d0;
          text-decoration: none;
          border-radius: 0;
          border-width: 1px .5px 1px .5px;
          margin-right: 0;
          padding: 4px 14px 4px; }
        .ui-tabs-nav li a:not(.disabled):hover {
          background-color: #FFFFFF;
          background-image: linear-gradient(180deg, #FFFFFF, #F6F6F6); }
      .ui-tabs-nav li.ui-tabs-active a {
        cursor: default;
        background-color: #F0F0F0;
        background-image: linear-gradient(180deg, #F0F0F0, #FDFDFD);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1) inset; }
        .ui-tabs-nav li.ui-tabs-active a a:hover {
          background-color: #F0F0F0;
          background-image: linear-gradient(180deg, #F0F0F0, #FDFDFD); }
  .tab-content {
    border: 1px solid #D3D3D3;
    padding: 15px;
    padding-top: 30px;
    text-align: left; }
  body.logged_out {
    background: #e8e9ea; }
    body.logged_out #content_wrapper {
      width: 500px;
      margin: 70px auto; }
      body.logged_out #content_wrapper #active_admin_content {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
        background: #fff;
        padding: 13px 30px; }
    body.logged_out h2 {
      background-color: #efefef;
      background-image: linear-gradient(180deg, #efefef, #dfe1e2);
      text-shadow: #fff 0 1px 0;
      border: solid 1px #cdcdcd;
      border-color: #d4d4d4;
      border-top-color: #e6e6e6;
      border-right-color: #d4d4d4;
      border-bottom-color: #cdcdcd;
      border-left-color: #d4d4d4;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
      font-size: 1em;
      font-weight: bold;
      line-height: 18px;
      margin-bottom: 0.5em;
      color: #5E6469;
      padding: 5px 10px 3px 10px;
      background-color: #6a7176;
      background-image: linear-gradient(180deg, #6a7176, #4d5256);
      border-bottom: 1px solid #44484b;
      text-shadow: #000 0 1px 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      border: none;
      color: #fff;
      margin: -13px -30px 20px -30px; }
    body.logged_out #login {
      /* Login Form */ }
      body.logged_out #login form fieldset {
        box-shadow: none;
        background: none;
        padding: 0;
        margin-bottom: 0; }
        body.logged_out #login form fieldset li {
          padding: 10px 0; }
        body.logged_out #login form fieldset input[type=text], body.logged_out #login form fieldset input[type=email], body.logged_out #login form fieldset input[type=password] {
          width: 70%; }
        body.logged_out #login form fieldset.buttons {
          margin-left: 20%; }
      body.logged_out #login a {
        float: right;
        margin-top: -32px; }
  #footer {
    padding: 30px 30px;
    font-size: 0.8em;
    clear: both; }
    #footer p {
      padding-top: 10px; }
  #index_footer {
    padding-top: 5px;
    text-align: right;
    font-size: 0.85em; }
    #index_footer:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0; }
  .index_content {
    clear: both; }
  #wrapper {
    width: 100%; }
  .index #wrapper {
    display: table; }
  #active_admin_content {
    margin: 0;
    padding: 30px; }
    #active_admin_content #main_content_wrapper {
      float: left;
      width: 100%; }
      #active_admin_content #main_content_wrapper #main_content {
        margin-right: 300px; }
    #active_admin_content.without_sidebar #main_content_wrapper #main_content {
      margin-right: 0; }
    #active_admin_content #sidebar {
      float: left;
      width: 270px;
      margin-left: -270px; }
  #title_bar {
    background-color: #efefef;
    background-image: linear-gradient(180deg, #efefef, #dfe1e2);
    text-shadow: #fff 0 1px 0;
    border: solid 1px #cdcdcd;
    border-color: #d4d4d4;
    border-top-color: #e6e6e6;
    border-right-color: #d4d4d4;
    border-bottom-color: #cdcdcd;
    border-left-color: #d4d4d4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px #FFF inset;
    font-size: 1em;
    font-weight: bold;
    line-height: 18px;
    margin-bottom: 0.5em;
    color: #5E6469;
    padding: 5px 10px 3px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
    display: table;
    border-bottom-color: #EEE;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 10px 30px;
    z-index: 800; }
    #title_bar:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
      height: 0; }
    #title_bar #titlebar_left, #title_bar #titlebar_right {
      height: 50px;
      vertical-align: middle;
      display: table-cell; }
    #title_bar #titlebar_right {
      text-align: right; }
    #title_bar h2 {
      margin: 0;
      padding: 0;
      font-size: 2.6em;
      line-height: 100%;
      font-weight: bold; }
    #title_bar .action_items span.action_item > a, #title_bar .action_items span.action_item > .dropdown_menu > a {
      background-color: #FFFFFF;
      background-image: linear-gradient(180deg, #FFFFFF, #E7E7E7);
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
      border: solid 1px #c7c7c7;
      border-color: #c7c7c7;
      border-top-color: #d3d3d3;
      border-right-color: #c7c7c7;
      border-bottom-color: #c2c2c2;
      border-left-color: #c7c7c7;
      text-shadow: #fff 0 1px 0;
      color: #5E6469;
      border-radius: 200px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      line-height: 12px;
      margin-right: 3px;
      padding: 7px 16px 6px;
      text-decoration: none; }
      #title_bar .action_items span.action_item > a.disabled, #title_bar .action_items span.action_item > .dropdown_menu > a.disabled {
        opacity: 0.5;
        cursor: default; }
      #title_bar .action_items span.action_item > a:not(.disabled):hover, #title_bar .action_items span.action_item > .dropdown_menu > a:not(.disabled):hover {
        background-color: #FFFFFF;
        background-image: linear-gradient(180deg, #FFFFFF, #F1F1F1); }
      #title_bar .action_items span.action_item > a:not(.disabled):active, #title_bar .action_items span.action_item > .dropdown_menu > a:not(.disabled):active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) inset, 0 1px 0 0px #EEE;
        border-color: #b9b9b9;
        border-top-color: #c2c2c2;
        border-right-color: #b9b9b9;
        border-bottom-color: #b7b7b7;
        border-left-color: #b9b9b9;
        background-color: #F3F3F3;
        background-image: linear-gradient(180deg, #F3F3F3, #D8D8D8); }
      #title_bar .action_items span.action_item > a, #title_bar .action_items span.action_item > .dropdown_menu > a {
        padding: 12px 17px 10px;
        margin: 0px; }
  html {
    box-sizing: border-box; }
  *,
  *:before,
  *:after {
    box-sizing: inherit; }
  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-size: 72%;
    background: #FFF;
    color: #323537; } }

@media print {
  /* Active Admin Print Stylesheet */
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
   ========================================================================== */
  /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
  html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */ }
  /* Sections
   ========================================================================== */
  /**
 * Remove the margin in all browsers.
 */
  body {
    margin: 0; }
  /**
 * Render the `main` element consistently in IE.
 */
  main {
    display: block; }
  /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
  h1 {
    font-size: 2em;
    margin: 0.67em 0; }
  /* Grouping content
   ========================================================================== */
  /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
  hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */ }
  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
  pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */ }
  /* Text-level semantics
   ========================================================================== */
  /**
 * Remove the gray background on active links in IE 10.
 */
  a {
    background-color: transparent; }
  /**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    /* 2 */ }
  /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
  b,
  strong {
    font-weight: bolder; }
  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */ }
  /**
 * Add the correct font size in all browsers.
 */
  small {
    font-size: 80%; }
  /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }
  sub {
    bottom: -0.25em; }
  sup {
    top: -0.5em; }
  /* Embedded content
   ========================================================================== */
  /**
 * Remove the border on images inside links in IE 10.
 */
  img {
    border-style: none; }
  /* Forms
   ========================================================================== */
  /**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */ }
  /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
  button,
  input {
    /* 1 */
    overflow: visible; }
  /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
  button,
  select {
    /* 1 */
    text-transform: none; }
  /**
 * Correct the inability to style clickable types in iOS and Safari.
 */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button; }
  /**
 * Remove the inner border and padding in Firefox.
 */
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  /**
 * Restore the focus styles unset by the previous rule.
 */
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }
  /**
 * Correct the padding in Firefox.
 */
  fieldset {
    padding: 0.35em 0.75em 0.625em; }
  /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
  legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */ }
  /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
  progress {
    vertical-align: baseline; }
  /**
 * Remove the default vertical scrollbar in IE 10+.
 */
  textarea {
    overflow: auto; }
  /**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */ }
  /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto; }
  /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */ }
  /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }
  /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */ }
  /* Interactive
   ========================================================================== */
  /*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
  details {
    display: block; }
  /*
 * Add the correct display in all browsers.
 */
  summary {
    display: list-item; }
  /* Misc
   ========================================================================== */
  /**
 * Add the correct display in IE 10+.
 */
  template {
    display: none; }
  /**
 * Add the correct display in IE 10.
 */
  [hidden] {
    display: none; }
  html {
    font-size: 100.01%; }
  body {
    font-size: 75%;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: black; }
    h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
      margin: 0; }
  h1 {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 0.5em; }
  h2 {
    font-size: 2em;
    margin-bottom: 0.75em; }
  h3 {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 1em; }
  h4 {
    font-size: 1.2em;
    line-height: 1.25;
    margin-bottom: 1.25em; }
  h5 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1.5em; }
  h6 {
    font-size: 1em;
    font-weight: bold; }
  p {
    margin: 0 0 1.5em; }
    p .left {
      margin: 1.5em 1.5em 1.5em 0;
      padding: 0; }
    p .right {
      margin: 1.5em 0 1.5em 1.5em;
      padding: 0; }
  .left {
    float: left !important; }
  .right {
    float: right !important; }
  blockquote {
    margin: 1.5em;
    color: #666;
    font-style: italic; }
  strong, dfn {
    font-weight: bold; }
  em, dfn {
    font-style: italic; }
  sup, sub {
    line-height: 0; }
  abbr,
  acronym {
    border-bottom: 1px dotted #666; }
  address {
    margin: 0 0 1.5em;
    font-style: italic; }
  del {
    color: #666; }
  pre {
    margin: 1.5em 0;
    white-space: pre; }
  pre, code, tt {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height: 1.5; }
  li ul,
  li ol {
    margin: 0; }
  ul, ol {
    margin: 0 1.5em 1.5em 0;
    padding-left: 1.5em; }
  ul {
    list-style-type: disc; }
  ol {
    list-style-type: decimal; }
  dl {
    margin: 0 0 1.5em 0; }
  dl dt {
    font-weight: bold; }
  dd {
    margin-left: 1.5em; }
  table {
    margin-bottom: 1.4em;
    width: 100%; }
  th {
    font-weight: bold; }
  thead th {
    background: #c3d9ff; }
  th, td, caption {
    padding: 4px 10px 4px 5px; }
  .small {
    font-size: .8em;
    margin-bottom: 1.875em;
    line-height: 1.875em; }
  .large {
    font-size: 1.2em;
    line-height: 2.5em;
    margin-bottom: 1.25em; }
  .hide {
    display: none; }
  .quiet {
    color: #666; }
  .loud {
    color: #000; }
  .highlight {
    background: #ff0; }
  .added {
    background: #060;
    color: #fff; }
  .removed {
    background: #900;
    color: #fff; }
  .first {
    margin-left: 0;
    padding-left: 0; }
  .last {
    margin-right: 0;
    padding-right: 0; }
  .top {
    margin-top: 0;
    padding-top: 0; }
  .bottom {
    margin-bottom: 0;
    padding-bottom: 0; }
  body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 150%;
    font-size: 72%;
    background: #fff;
    width: 99%;
    margin: 0;
    padding: .5%;
    color: black; }
  a {
    color: black;
    text-decoration: none; }
  h3 {
    font-weight: bold;
    margin-bottom: .5em; }
  #header {
    float: left; }
    #header #tabs, #header .tabs, #header #utility_nav {
      display: none; }
    #header h1 {
      font-weight: bold; }
  .flashes {
    display: none; }
  #title_bar {
    float: right; }
    #title_bar h2 {
      line-height: 2em;
      margin: 0; }
    #title_bar .breadcrumb, #title_bar #titlebar_right {
      display: none; }
  #active_admin_content {
    border-top: thick solid black;
    clear: both;
    margin-top: 2em;
    padding-top: 3em; }
  #footer {
    display: none; }
  .table_tools ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    .table_tools ul li {
      display: none;
      padding: 0;
      margin-bottom: 1em; }
      .table_tools ul li.scope.selected, .table_tools ul li.index.selected {
        display: block; }
        .table_tools ul li.scope.selected:before, .table_tools ul li.index.selected:before {
          content: "Showing "; }
        .table_tools ul li.scope.selected a, .table_tools ul li.index.selected a {
          font-weight: bold; }
        .table_tools ul li.scope.selected span, .table_tools ul li.index.selected span {
          display: inline-block;
          font-weight: normal;
          font-size: .9em; }
  table {
    margin-bottom: 1.5em;
    text-align: left;
    width: 100%; }
    table thead {
      display: table-header-group; }
      table thead th {
        background: none;
        border-bottom: medium solid black;
        font-weight: bold; }
        table thead th a {
          text-decoration: none; }
    table th, table td {
      padding: .5em 1em; }
      table th .member_link, table td .member_link {
        display: none; }
    table td {
      border-bottom: thin solid black; }
    table tr {
      page-break-inside: avoid; }
  #index_footer, .pagination_information {
    display: none; }
  .index_grid td {
    border: none;
    text-align: center;
    vertical-align: middle; }
    .index_grid td img {
      max-width: 1in; }
  .panel {
    border-bottom: thick solid #ccc;
    margin-bottom: 3em;
    padding-bottom: 2em;
    page-break-inside: avoid; }
    .panel:last-child {
      border-bottom: none; }
  .comments form {
    display: none; }
  .comments .active_admin_comment {
    border-top: thin solid black;
    padding-top: 1em; }
    .comments .active_admin_comment .active_admin_comment_meta h4 {
      font-size: 1em;
      font-weight: bold;
      float: left;
      margin-right: .5em;
      margin-bottom: 0; }
    .comments .active_admin_comment .active_admin_comment_meta span {
      font-size: .9em;
      font-style: italic;
      vertical-align: top; }
    .comments .active_admin_comment .active_admin_comment_body {
      clear: both;
      margin-bottom: 1em; }
  .attributes_table {
    border-top: medium solid black; }
    .attributes_table th {
      border-bottom: thin solid black;
      vertical-align: top; }
      .attributes_table th:after {
        content: ':'; }
    .attributes_table td img {
      max-height: 4in;
      max-width: 6in; }
  #filters_sidebar_section {
    display: none; }
  form fieldset {
    border-top: thick solid #ccc;
    padding-top: 2em;
    margin-bottom: 2em; }
    form fieldset:last-child {
      border-bottom: none; }
  form .buttons, form abbr {
    display: none; }
  form ol {
    list-style-type: none;
    padding: 0;
    margin: 0; }
    form ol li {
      border-top: thin solid black;
      margin: 0;
      padding: 1em 0;
      overflow: hidden; }
      form ol li.password, form ol li.hidden {
        display: none; }
      form ol li label {
        font-weight: bold;
        float: left;
        width: 20%; }
      form ol li input, form ol li textarea, form ol li select {
        background: none;
        border: 0;
        font: Arial, Helvetica, sans-serif; }
      form ol li input[type=file] {
        display: none; }
  .unsupported_browser {
    display: none; } }

/* Custom styles for Storage Management in Active Admin */
.dashboard-storage {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.storage-stats {
  background: linear-gradient(135deg, rgba(232, 235, 238, 0.85) 0%, rgba(210, 214, 219, 0.85) 100%);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 0 1px rgba(180, 185, 191, 0.35); }

.storage-stats para {
  margin: 0.5rem 0;
  font-size: 14px;
  line-height: 1.6; }

.storage-stats strong {
  color: #3a3f44;
  font-weight: 600;
  min-width: 140px;
  display: inline-block; }

.storage-stats span {
  color: #5a5f65;
  font-weight: 500; }

/* Storage file preview improvements */
.index_table td img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease; }

.index_table td img:hover {
  transform: scale(1.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
  position: relative; }

/* Status tags for content types */
.status_tag {
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.status_tag.ok {
  background: linear-gradient(135deg, #0db2ff 0%, #5b2fff 100%);
  color: white; }

.status_tag.warning {
  background: #ff8a3d;
  color: white; }

/* Dashboard panels styling */
#dashboard .panel h3 {
  background: linear-gradient(135deg, rgba(13, 178, 255, 0.1) 0%, rgba(91, 47, 255, 0.1) 100%);
  border-bottom: 2px solid #0db2ff;
  border-radius: 4px 4px 0 0;
  padding: 12px 15px;
  font-weight: 600; }

/* Disk usage progress bar styling */
.disk-usage-bar {
  height: 24px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }

.disk-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, #0db2ff 0%, #5b2fff 50%, #ff8a3d 100%);
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px; }

/* Table improvements */
.index_table th {
  background: linear-gradient(135deg, rgba(13, 178, 255, 0.05) 0%, rgba(91, 47, 255, 0.05) 100%);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #555; }

.index_table tr:hover {
  background: rgba(13, 178, 255, 0.03); }

/* Button styling */
.button {
  background: linear-gradient(135deg, #0db2ff 0%, #5b2fff 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(13, 178, 255, 0.3); }

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 178, 255, 0.4); }

/* Warning panel for orphaned files */
.panel[style*="border: 2px solid #ff6b6b"] {
  animation: pulse-warning 2s ease-in-out infinite; }

@keyframes pulse-warning {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } }

/* Attributes table styling */
.attributes_table th {
  background: rgba(13, 178, 255, 0.05);
  font-weight: 600;
  width: 180px; }

.attributes_table td {
  word-break: break-word; }

/* Quick actions styling */
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1rem; }

.quick-actions .button {
  flex: 1;
  min-width: 150px;
  text-align: center; }

/* Responsive improvements */
@media (max-width: 768px) {
  .columns {
    flex-direction: column; }
  .column {
    width: 100% !important; }
  .storage-stats strong {
    min-width: auto;
    display: block;
    margin-bottom: 4px; } }

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .storage-stats {
    background: linear-gradient(135deg, rgba(60, 63, 67, 0.85) 0%, rgba(48, 51, 56, 0.85) 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 124, 130, 0.35); }
  .storage-stats strong {
    color: #e1e4e8; }
  .storage-stats span {
    color: #c7ccd1; } }

/* ===== Error Monitoring Dashboard Styles ===== */
.error-monitoring-dashboard {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.error-monitoring-dashboard .panel {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem; }

.error-monitoring-dashboard .panel h3 {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px 8px 0 0;
  padding: 1rem;
  margin: 0;
  font-weight: 600;
  color: #212529;
  border-bottom: 2px solid #dee2e6; }

.error-monitoring-dashboard .attributes_table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  width: 40%; }

.error-monitoring-dashboard .attributes_table td {
  color: #212529; }

.error-monitoring-dashboard .index_table {
  border-radius: 6px;
  overflow: hidden; }

.error-monitoring-dashboard .index_table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6; }

.error-monitoring-dashboard .index_table tr:hover {
  background-color: #f8f9fa; }

.occurrence-badge {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  min-width: 30px;
  text-align: center; }

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem; }

.action-buttons .button {
  width: 100%;
  text-align: center;
  padding: 10px 15px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease; }

.action-buttons .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }

/* Error Group Priority Border Colors */
.priority-critical {
  border-left: 4px solid #dc3545; }

.priority-high {
  border-left: 4px solid #fd7e14; }

.priority-medium {
  border-left: 4px solid #ffc107; }

.priority-low {
  border-left: 4px solid #28a745; }

/* Chart styling */
canvas {
  max-width: 100%;
  height: auto; }

@media (prefers-color-scheme: dark) {
  .error-monitoring-dashboard .panel {
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .error-monitoring-dashboard .panel h3 {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    color: #e9ecef;
    border-bottom-color: #3a3a3a; }
  .error-monitoring-dashboard .attributes_table th,
  .error-monitoring-dashboard .index_table th {
    background: #2d2d2d;
    color: #e9ecef;
    border-bottom-color: #3a3a3a; }
  .error-monitoring-dashboard .attributes_table td,
  .error-monitoring-dashboard .index_table td {
    color: #e9ecef;
    border-color: #3a3a3a; }
  .error-monitoring-dashboard .index_table tr:hover {
    background-color: #2d2d2d; } }
/* Custom styles for Storage Management in Active Admin */

.dashboard-storage {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.storage-stats {
  background: linear-gradient(135deg, rgba(232, 235, 238, 0.85) 0%, rgba(210, 214, 219, 0.85) 100%);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 0 0 1px rgba(180, 185, 191, 0.35);
}

.storage-stats para {
  margin: 0.5rem 0;
  font-size: 14px;
  line-height: 1.6;
}

.storage-stats strong {
  color: #3a3f44;
  font-weight: 600;
  min-width: 140px;
  display: inline-block;
}

.storage-stats span {
  color: #5a5f65;
  font-weight: 500;
}

/* Storage file preview improvements */
.index_table td img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.index_table td img:hover {
  transform: scale(1.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
  position: relative;
}

/* Status tags for content types */
.status_tag {
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status_tag.ok {
  background: linear-gradient(135deg, #0db2ff 0%, #5b2fff 100%);
  color: white;
}

.status_tag.warning {
  background: #ff8a3d;
  color: white;
}

/* Dashboard panels styling */
#dashboard .panel h3 {
  background: linear-gradient(135deg, rgba(13, 178, 255, 0.1) 0%, rgba(91, 47, 255, 0.1) 100%);
  border-bottom: 2px solid #0db2ff;
  border-radius: 4px 4px 0 0;
  padding: 12px 15px;
  font-weight: 600;
}

/* Disk usage progress bar styling */
.disk-usage-bar {
  height: 24px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.disk-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, #0db2ff 0%, #5b2fff 50%, #ff8a3d 100%);
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
}

/* Table improvements */
.index_table th {
  background: linear-gradient(135deg, rgba(13, 178, 255, 0.05) 0%, rgba(91, 47, 255, 0.05) 100%);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #555;
}

.index_table tr:hover {
  background: rgba(13, 178, 255, 0.03);
}

/* Button styling */
.button {
  background: linear-gradient(135deg, #0db2ff 0%, #5b2fff 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(13, 178, 255, 0.3);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 178, 255, 0.4);
}

/* Warning panel for orphaned files */
.panel[style*="border: 2px solid #ff6b6b"] {
  animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
  }
}

/* Attributes table styling */
.attributes_table th {
  background: rgba(13, 178, 255, 0.05);
  font-weight: 600;
  width: 180px;
}

.attributes_table td {
  word-break: break-word;
}

/* Quick actions styling */
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.quick-actions .button {
  flex: 1;
  min-width: 150px;
  text-align: center;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .columns {
    flex-direction: column;
  }
  
  .column {
    width: 100% !important;
  }
  
  .storage-stats strong {
    min-width: auto;
    display: block;
    margin-bottom: 4px;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .storage-stats {
    background: linear-gradient(135deg, rgba(60, 63, 67, 0.85) 0%, rgba(48, 51, 56, 0.85) 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 124, 130, 0.35);
  }
  
  .storage-stats strong {
    color: #e1e4e8;
  }
  
  .storage-stats span {
    color: #c7ccd1;
  }
}

/* ===== Error Monitoring Dashboard Styles ===== */
.error-monitoring-dashboard {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.error-monitoring-dashboard .panel {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.error-monitoring-dashboard .panel h3 {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px 8px 0 0;
  padding: 1rem;
  margin: 0;
  font-weight: 600;
  color: #212529;
  border-bottom: 2px solid #dee2e6;
}

.error-monitoring-dashboard .attributes_table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  width: 40%;
}

.error-monitoring-dashboard .attributes_table td {
  color: #212529;
}

.error-monitoring-dashboard .index_table {
  border-radius: 6px;
  overflow: hidden;
}

.error-monitoring-dashboard .index_table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}

.error-monitoring-dashboard .index_table tr:hover {
  background-color: #f8f9fa;
}

.occurrence-badge {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  min-width: 30px;
  text-align: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
}

.action-buttons .button {
  width: 100%;
  text-align: center;
  padding: 10px 15px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.action-buttons .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Error Group Priority Border Colors */
.priority-critical {
  border-left: 4px solid #dc3545;
}

.priority-high {
  border-left: 4px solid #fd7e14;
}

.priority-medium {
  border-left: 4px solid #ffc107;
}

.priority-low {
  border-left: 4px solid #28a745;
}

/* Chart styling */
canvas {
  max-width: 100%;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .error-monitoring-dashboard .panel {
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .error-monitoring-dashboard .panel h3 {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    color: #e9ecef;
    border-bottom-color: #3a3a3a;
  }

  .error-monitoring-dashboard .attributes_table th,
  .error-monitoring-dashboard .index_table th {
    background: #2d2d2d;
    color: #e9ecef;
    border-bottom-color: #3a3a3a;
  }

  .error-monitoring-dashboard .attributes_table td,
  .error-monitoring-dashboard .index_table td {
    color: #e9ecef;
    border-color: #3a3a3a;
  }

  .error-monitoring-dashboard .index_table tr:hover {
    background-color: #2d2d2d;
  }
}
/* ============================================ */
/* Apps Section                                 */
/* ============================================ */

.bb-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bb-spacing-lg);
    align-items: center;
}

.bb-apps-content {
    display: flex;
    flex-direction: column;
    gap: var(--bb-spacing-sm);
}
/* ============================================ */
/* Base: CSS Variables & Properties            */
/* ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

:root {
    --bb-color-background: #05050a;
    --bb-color-surface: #0d0d1a;
    --bb-color-surface-alt: #131329;
    --bb-color-highlight: linear-gradient(135deg, #5b2fff 0%, #0db2ff 100%);
    --bb-color-accent: #ff8a3d;
    --bb-color-text-primary: #f5f7ff;
    --bb-color-text-secondary: #c5c7da;
    --bb-color-divider: rgba(255, 255, 255, 0.08);

    --bb-spacing-xs: 0.75rem;
    --bb-spacing-sm: 1.25rem;
    --bb-spacing-md: 2rem;
    --bb-spacing-lg: 3rem;
    --bb-spacing-xl: 4.5rem;

    --bb-max-width: 1120px;
    --bb-border-radius: 18px;
    --bb-transition: all 0.3s ease;
}

.bb-site-blocks {
    background: radial-gradient(circle at 20% 20%, rgba(88, 91, 241, 0.22), transparent 55%), radial-gradient(circle at 80% 10%, rgba(12, 179, 255, 0.15), transparent 40%), var(--bb-color-background);
    color: var(--bb-color-text-primary);
    min-height: 100vh;
    flex-direction: column;
    position: relative;
}

.bb-global-padding {
    margin: 0 auto;
    padding: 0 var(--bb-spacing-md);
    position: relative;
    z-index: 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ============================================ */
/* Components: Buttons, Cards, Media            */
/* ============================================ */

/* Media Text Layout */
.bb-media-text {
    display: grid;
    gap: var(--bb-spacing-lg);
    align-items: center;
}

.bb-media-text.has-media-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-media-content {
    display: flex;
    flex-direction: column;
    gap: var(--bb-spacing-sm);
}

.bb-media-text.has-media-right figure {
    position: relative;
    margin: 0;
    border-radius: calc(var(--bb-border-radius) + 6px);
}

.bb-media-text.has-media-right figure::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background:
        conic-gradient(
            from var(--gradient-angle) at 25% 20%,
            #0db2ff 0deg,
            #0db2ff 40deg,
            #5b2fff 85deg,
            #ff8a3d 145deg,
            rgba(13, 178, 255, 0.85) 190deg,
            #5b2fff 250deg,
            rgba(255, 138, 61, 0.85) 300deg,
            #0db2ff 360deg
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
    animation: rotate-gradient 6s linear infinite reverse;
}

.bb-media-text.has-media-right figure::after {
    content: "";
    position: absolute;
    inset: -25px;
    background:
        conic-gradient(
            from calc(var(--gradient-angle) * -1) at 70% 60%,
            rgba(13, 178, 255, 0.4) 0deg,
            rgba(13, 178, 255, 0) 70deg,
            rgba(91, 47, 255, 0.35) 110deg,
            rgba(255, 138, 61, 0.3) 200deg,
            rgba(13, 178, 255, 0.4) 320deg,
            rgba(13, 178, 255, 0.2) 360deg
        ),
        radial-gradient(circle at 15% 20%, rgba(13, 178, 255, 0.25) 0%, transparent 65%),
        radial-gradient(circle at 85% 80%, rgba(255, 138, 61, 0.2) 0%, transparent 70%);
    border-radius: inherit;
    filter: blur(30px);
    opacity: 0.7;
    z-index: -1;
    animation: rotate-gradient 7s linear infinite reverse;
}

.bb-media-text.has-media-right figure img {
    display: block;
    width: 100%;
    border-radius: calc(var(--bb-border-radius) + 6px);
    position: relative;
    z-index: 1;
}

.bb-media-text.has-media-right figure:hover::before {
    animation: rotate-gradient 2s linear infinite reverse;
}

.bb-media-text.has-media-right figure:hover::after {
    opacity: 1;
    filter: blur(35px);
    animation: rotate-gradient 2s linear infinite reverse;
}

@keyframes rotate-gradient {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}

/* Images */
.bb-hero-image,
.bb-qr-image,
.bb-apps-image {
    width: 100%;
    border-radius: calc(var(--bb-border-radius) + 6px);
    box-shadow: 0 24px 55px rgba(4, 6, 18, 0.6);
}

.store-badge {
    width: clamp(150px, 20vw, 200px);
    height: auto;
    transition: var(--bb-transition);
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}

.store-badge:hover,
.store-badge:focus {
    transform: translateY(-3px);
}

/* Meta Cards */
.bb-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-top: var(--bb-spacing-md);
}

.bb-meta-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-radius: 16px;
    background: rgba(13, 17, 35, 0.45);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
            0 8px 24px rgba(4, 6, 18, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.bb-meta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
    rgba(93, 47, 255, 0.08) 0%,
    rgba(13, 178, 255, 0.08) 50%,
    rgba(255, 138, 61, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}

.bb-meta-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 178, 255, 0.35);
    box-shadow:
            0 16px 42px rgba(13, 178, 255, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bb-meta-card:hover::before {
    opacity: 1;
}

.bb-meta-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg,
    rgba(13, 178, 255, 0.18) 0%,
    rgba(93, 47, 255, 0.18) 100%);
    border: 1px solid rgba(13, 178, 255, 0.25);
    position: relative;
}

.bb-meta-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%);
    opacity: 0.6;
}

.bb-meta-icon svg {
    width: 22px;
    height: 22px;
    color: #0db2ff;
    filter: drop-shadow(0 2px 8px rgba(13, 178, 255, 0.4));
    position: relative;
    z-index: 1;
}

.bb-meta-card span {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--bb-color-text-secondary);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.bb-meta-card:hover span {
    color: var(--bb-color-text-primary);
}

/* Buttons */
.bb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-spacing-xs);
    margin: var(--bb-spacing-sm) 0;
}

.bb-element-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 178, 255, 0.3);
    background: rgba(13, 17, 35, 0.5);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: var(--bb-color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
            0 8px 24px rgba(4, 6, 18, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Ensure no underline on button links in all states */
a.bb-element-button,
a.bb-element-button:link,
a.bb-element-button:visited,
a.bb-element-button:hover,
a.bb-element-button:active,
a.bb-element-button:focus {
    text-decoration: none !important;
}

.bb-element-button::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
    rgba(13, 178, 255, 0.8) 0%,
    rgba(93, 47, 255, 0.8) 50%,
    rgba(255, 138, 61, 0.8) 100%);
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -2;
    filter: blur(8px);
}

.bb-element-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: -1;
}

.bb-element-button:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 178, 255, 0.6);
    background: rgba(13, 178, 255, 0.12);
    box-shadow:
            0 16px 48px rgba(13, 178, 255, 0.45),
            0 4px 12px rgba(93, 47, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.bb-element-button:hover::before {
    opacity: 1;
    transform: scale(1.05);
}

.bb-element-button:hover::after {
    transform: translateX(100%);
}

.bb-element-button:focus-visible {
    outline: none;
    transform: translateY(-3px);
    border-color: rgba(13, 178, 255, 0.8);
    background: rgba(13, 178, 255, 0.15);
    box-shadow:
            0 16px 48px rgba(13, 178, 255, 0.5),
            0 0 0 4px rgba(13, 178, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.bb-element-button:focus-visible::before {
    opacity: 1;
    transform: scale(1.05);
}

.bb-element-button:active {
    transform: translateY(-1px) scale(0.98);
    background: linear-gradient(135deg,
    #0db2ff 0%,
    #5b2fff 50%,
    #ff8a3d 100%);
    border-color: transparent;
    box-shadow:
            0 8px 24px rgba(13, 178, 255, 0.4),
            inset 0 2px 8px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

.bb-element-button:active::before {
    opacity: 0;
}

.bb-element-button.is-style-outline {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(10, 14, 30, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.bb-element-button.is-style-outline::before {
    background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(13, 178, 255, 0.12) 50%,
    rgba(255, 138, 61, 0.08) 100%);
}

.bb-element-button.is-style-outline:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
            0 16px 48px rgba(255, 255, 255, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bb-element-button.is-style-outline:active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
            0 8px 24px rgba(255, 255, 255, 0.12),
            inset 0 2px 8px rgba(255, 255, 255, 0.1);
}

@keyframes button-pulse {
    0%, 100% {
        box-shadow:
                0 8px 24px rgba(4, 6, 18, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    50% {
        box-shadow:
                0 8px 32px rgba(13, 178, 255, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.bb-element-button {
    animation: button-pulse 3s ease-in-out infinite;
}

.bb-element-button:hover,
.bb-element-button:focus-visible,
.bb-element-button:active {
    animation: none;
}
/* ============================================ */
/* CTA Banner                                   */
/* ============================================ */

.bb-cta-banner {
    background: linear-gradient(135deg, rgba(91, 47, 255, 0.85) 0%, rgba(13, 178, 255, 0.6) 100%);
    border-radius: calc(var(--bb-border-radius) + 8px);
    padding: var(--bb-spacing-lg);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--bb-spacing-md);
    align-items: center;
    color: #050505;
}

.bb-cta-text h2 {
    font-size: clamp(1.8rem, 1.6rem + 1.8vw, 2.6rem);
    margin: 0 0 var(--bb-spacing-xs);
}
/* ============================================ */
/* Features Section                             */
/* ============================================ */

.bb-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--bb-spacing-md);
    margin-top: var(--bb-spacing-lg);
}

.bb-feature-card {
    position: relative;
    background: var(--bb-color-surface);
    border-radius: var(--bb-border-radius);
    padding: var(--bb-spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 24px rgba(5, 6, 18, 0.4);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
}

/* Gradient Border */
.bb-feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(13, 178, 255, 0.2) 0%,
        rgba(91, 47, 255, 0.15) 50%,
        rgba(255, 138, 61, 0.1) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* Ambient Glow */
.bb-feature-card::after {
    content: "";
    position: absolute;
    inset: -20px;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(13, 178, 255, 0.12) 0%,
        transparent 60%
    );
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -2;
}

.bb-feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(13, 178, 255, 0.2);
    background: rgba(13, 17, 35, 0.65);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 
        0 16px 48px rgba(13, 178, 255, 0.15),
        0 8px 24px rgba(5, 6, 18, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bb-feature-card:hover::before {
    opacity: 1;
}

.bb-feature-card:hover::after {
    opacity: 0.8;
}

.bb-feature-card h3 {
    position: relative;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--bb-color-text-primary);
    font-size: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bb-feature-card:hover h3 {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(13, 178, 255, 0.3);
}

.bb-feature-card p {
    position: relative;
    margin: 0;
    color: var(--bb-color-text-secondary);
    line-height: 1.6;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.bb-feature-card:hover p {
    color: rgba(255, 255, 255, 0.85);
}

/* Shimmer Gradient Animation */
@keyframes shimmer-sweep {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.bb-feature-card:hover::before {
    background: linear-gradient(
        135deg,
        rgba(13, 178, 255, 0.2) 0%,
        rgba(91, 47, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(91, 47, 255, 0.15) 60%,
        rgba(255, 138, 61, 0.1) 100%
    );
    background-size: 200% 200%;
    animation: shimmer-sweep 1s ease-out;
}
/* ============================================ */
/* Footer                                       */
/* ============================================ */

.bb-footer {
    text-align: center;
    padding: var(--bb-spacing-lg) var(--bb-spacing-md);
    border-top: 1px solid var(--bb-color-divider);
    background: rgba(6, 6, 16, 0.9);
}

.bb-footer a {
    color: var(--bb-color-text-primary);
    text-decoration: none;
}

.bb-footer a:hover,
.bb-footer a:focus {
    color: var(--bb-color-accent);
}
/* ============================================ */
/* Header & Navigation                          */
/* ============================================ */

.bb-header {
    position: sticky;
    top: 0;
    z-index: 9998;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    background: rgba(6, 8, 22, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 24px 60px rgba(3, 6, 20, 0.55);
}

.bb-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(9, 151, 253, 0.12), rgba(255, 140, 63, 0.08));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bb-header:hover::before {
    opacity: 1;
}

.bb-container-header {
    position: relative;
    margin: 0 auto;
    max-width: var(--bb-max-width);
    padding: clamp(0.75rem, 0.5rem + 1vw, 1.15rem) var(--bb-spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bb-header-shell {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding-bottom: 2px;
    padding-top: 2px;
}

.bb-nav-toggle {
    display: none;
}

.bb-nav-trigger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 26, 0.82);
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.bb-nav-trigger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(238, 242, 255, 0.9);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.bb-nav-toggle:checked + .bb-nav-trigger {
    background: rgba(13, 178, 255, 0.18);
    border-color: rgba(13, 178, 255, 0.45);
    transform: translateY(1px);
}

.bb-nav-toggle:checked + .bb-nav-trigger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.bb-nav-toggle:checked + .bb-nav-trigger span:nth-child(2) {
    opacity: 0;
}

.bb-nav-toggle:checked + .bb-nav-trigger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.bb-navigation {
    position: relative;
    width: 100%;
    max-width: 920px;
}

.bb-navigation__container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(1.1rem, 0.7rem + 1vw, 1.9rem);
    padding: clamp(0.3rem, 0.25rem + 0.25vw, 0.55rem) clamp(1.1rem, 0.9rem + 1vw, 1.9rem);
    margin: 0;
    list-style: none;
    border-radius: 999px;
    background: rgba(10, 14, 30, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 38px rgba(3, 8, 28, 0.4);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    white-space: nowrap;
}

.bb-navigation__container li {
    list-style: none;
}

.bb-navigation-item__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    font-size: clamp(0.82rem, 0.7rem + 0.4vw, 0.98rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(230, 234, 255, 0.75);
    text-decoration: none !important;
    position: relative;
    isolation: isolate;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-navigation-item__label:link,
.bb-navigation-item__label:visited {
    text-decoration: none !important;
    color: rgba(230, 234, 255, 0.75);
}

/* Gradient underline */
.bb-navigation-item__label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(13, 178, 255, 0.0) 5%,
        rgba(13, 178, 255, 1) 25%,
        rgba(93, 47, 255, 1) 45%,
        rgba(255, 138, 61, 1) 55%,
        rgba(255, 180, 120, 1) 75%,
        rgba(255, 138, 61, 0.0) 95%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: 100% 50%;
    opacity: 0;
    transform: scaleX(0.3) scaleY(0.8);
    transform-origin: center;
    filter: blur(0px);
    box-shadow: 0 0 0 rgba(13, 178, 255, 0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s ease,
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow effect layer */
.bb-navigation-item__label::before {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -8px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(13, 178, 255, 0.6) 0%,
        rgba(93, 47, 255, 0.4) 30%,
        rgba(255, 138, 61, 0.3) 60%,
        transparent 100%
    );
    opacity: 0;
    filter: blur(8px);
    transform: scaleX(0.4) scaleY(0.5);
    z-index: -1;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.5s ease;
}

.bb-navigation-item__label:hover,
.bb-navigation-item__label:focus-visible {
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
    animation: text-glow-wave 1.2s ease-in-out 1,
               text-pulse 0.6s ease-in-out 2,
               text-wiggle 0.15s ease-in-out 3;
}

.bb-navigation-item__label:hover::after,
.bb-navigation-item__label:focus-visible::after {
    opacity: 1;
    transform: scaleX(1.05) scaleY(1);
    background-position: 0% 50%;
    filter: blur(0.5px);
    box-shadow: 0 0 20px rgba(13, 178, 255, 0.6),
                0 0 40px rgba(93, 47, 255, 0.4),
                0 0 60px rgba(255, 138, 61, 0.3);
    animation: shimmer-underline 2s ease-in-out infinite;
}

.bb-navigation-item__label:hover::before,
.bb-navigation-item__label:focus-visible::before {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1);
    filter: blur(12px);
}

.bb-navigation-item__label:active {
    transform: translateY(-1px);
}

.bb-navigation-item__label.is-active {
    color: #ffffff;
    text-shadow: 0 8px 18px rgba(13, 178, 255, 0.45);
}

/* Navigation Enhanced Styles with Animations */
@media (min-width: 769px) {
    .bb-header-shell {
        overflow: hidden;
    }

    .bb-navigation::after {
        content: "";
        position: absolute;
        inset: -12px;
        background: radial-gradient(circle at 50% -40%, rgba(13, 178, 255, 0.18), transparent 55%),
                    radial-gradient(circle at 50% 140%, rgba(255, 138, 61, 0.14), transparent 55%);
        filter: blur(28px);
        opacity: 0.35;
        z-index: -2;
        animation: glow-pulse 3s ease-in-out infinite;
    }

    .bb-navigation__container::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        padding: 3px;
        will-change: opacity, transform;
        background: linear-gradient(
                135deg,
                rgba(13, 178, 255, 0.8) 0%,
                rgba(93, 47, 255, 0.8) 25%,
                rgba(255, 138, 61, 0.8) 50%,
                rgba(13, 178, 255, 0.8) 75%,
                rgba(93, 47, 255, 0.8) 100%
        );
        -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.6;
        z-index: -1;
        animation: border-flow 4s linear infinite, border-pulse 2s ease-in-out infinite;
        background-size: 200% 200%;
    }

    .bb-navigation__container:hover::before {
        opacity: 1;
        animation: border-flow 2s linear infinite, border-pulse 1s ease-in-out infinite;
    }

    .bb-navigation:hover::after {
        opacity: 0.65;
        filter: blur(35px);
    }
}

/* Keyframe animations */
@keyframes border-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes border-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.35;
        filter: blur(28px);
    }
    50% {
        opacity: 0.55;
        filter: blur(32px);
    }
}

@keyframes shimmer-underline {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes text-glow-wave {
    0% {
        text-shadow: 0 2px 8px rgba(13, 178, 255, 0),
                     0 8px 24px rgba(13, 178, 255, 0),
                     0 16px 40px rgba(93, 47, 255, 0),
                     0 0 60px rgba(255, 138, 61, 0);
    }
    20% {
        text-shadow: 0 2px 12px rgba(13, 178, 255, 0.8),
                     0 8px 32px rgba(13, 178, 255, 0.6),
                     0 16px 48px rgba(13, 178, 255, 0.4),
                     0 0 80px rgba(13, 178, 255, 0.3);
    }
    40% {
        text-shadow: 0 2px 12px rgba(93, 47, 255, 0.8),
                     0 8px 32px rgba(93, 47, 255, 0.6),
                     0 16px 48px rgba(93, 47, 255, 0.4),
                     0 0 80px rgba(93, 47, 255, 0.3);
    }
    60% {
        text-shadow: 0 2px 12px rgba(255, 138, 61, 0.8),
                     0 8px 32px rgba(255, 138, 61, 0.6),
                     0 16px 48px rgba(255, 138, 61, 0.4),
                     0 0 80px rgba(255, 138, 61, 0.3);
    }
    80% {
        text-shadow: 0 2px 12px rgba(255, 180, 120, 0.7),
                     0 8px 32px rgba(255, 138, 61, 0.5),
                     0 16px 48px rgba(93, 47, 255, 0.3),
                     0 0 80px rgba(13, 178, 255, 0.2);
    }
    100% {
        text-shadow: 0 2px 8px rgba(13, 178, 255, 0.3),
                     0 8px 24px rgba(13, 178, 255, 0.25),
                     0 16px 40px rgba(93, 47, 255, 0.2),
                     0 0 60px rgba(255, 138, 61, 0.15);
    }
}

@keyframes text-pulse {
    0%, 100% {
        transform: translateY(-4px) scale(1.05);
    }
    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

@keyframes text-wiggle {
    0%, 100% {
        transform: translateY(-4px) scale(1.05) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) scale(1.05) rotate(-1deg);
    }
    75% {
        transform: translateY(-4px) scale(1.05) rotate(1deg);
    }
}
/* ============================================ */
/* Hero Section                                 */
/* ============================================ */

#hero .bb-media-text > figure {
    margin-top: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
}
/* ============================================ */
/* Legal Pages (Privacy Policy, Terms of Use)  */
/* ============================================ */

.bb-legal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(13,17,35,0.22);
    margin-top: 1rem;
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.98em;
    box-shadow: 0 6px 24px rgba(12,24,52,0.10);
}

.bb-legal-table th, .bb-legal-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(93,47,255,0.08);
}

.bb-legal-table th {
    background: rgba(13,178,255,0.07);
    font-weight: 600;
    color: #0db2ff;
}

.bb-legal-table tr:last-child td {
    border-bottom: none;
}

.bb-legal-table a {
    color: #0db2ff;
    text-decoration: underline;
    word-break: break-all;
}

.bb-site-blocks--legal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bb-site-blocks--legal main {
    flex: 1 0 auto;
}

.bb-legal-page {
    padding: var(--bb-spacing-xl) 0;
}

.bb-legal-card {
    position: relative;
    background: rgba(13, 17, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: calc(var(--bb-border-radius) + 6px);
    padding: clamp(1.8rem, 1.4rem + 1.2vw, 2.65rem);
    box-shadow:
            0 32px 70px rgba(4, 6, 18, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.bb-legal-card::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 280px;
    background: radial-gradient(circle at top left, rgba(13, 178, 255, 0.22), transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.bb-legal-card::after {
    content: "";
    position: absolute;
    inset: auto -10% -30%;
    height: 320px;
    background: radial-gradient(circle at bottom right, rgba(255, 138, 61, 0.18), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}

.bb-legal-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bb-spacing-xs);
    margin-bottom: var(--bb-spacing-md);
    z-index: 1;
}

.bb-legal-title {
    margin: 0;
    font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bb-legal-subtitle {
    margin: 0;
    max-width: 720px;
    color: var(--bb-color-text-secondary);
    font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.7;
}

.bb-legal-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bb-legal-content > *:first-child {
    margin-top: 0;
}

.bb-legal-content h2,
.bb-legal-content h3 {
    color: var(--bb-color-text-primary);
    font-family: 'Rubik', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.01em;
}

.bb-legal-content h2 {
    margin: var(--bb-spacing-lg) 0 var(--bb-spacing-xs);
    font-size: clamp(1.55rem, 1.3rem + 1vw, 2.15rem);
}

.bb-legal-content h3 {
    margin: var(--bb-spacing-sm) 0 0.5rem;
    font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
}

.bb-legal-content p {
    margin: 0;
    color: var(--bb-color-text-secondary);
    line-height: 1.75;
}

.bb-legal-content p + p {
    margin-top: 0.85rem;
}

.bb-legal-content strong {
    color: var(--bb-color-text-primary);
}

.bb-legal-content em {
    color: rgba(245, 247, 255, 0.85);
}

.bb-legal-content ul,
.bb-legal-content ol {
    margin: 0;
    padding: 0 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bb-legal-content li {
    position: relative;
    color: var(--bb-color-text-secondary);
    line-height: 1.65;
}

.bb-legal-content ul li::marker {
    color: #0db2ff;
}

.bb-legal-content ul li::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.7rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(13, 178, 255, 0.95), rgba(91, 47, 255, 0.95));
    box-shadow: 0 0 12px rgba(13, 178, 255, 0.45);
}

.bb-legal-content ul {
    list-style: none;
    padding-left: 1.75rem;
}

.bb-legal-content ul li {
    padding-left: 0.25rem;
}

.bb-legal-content ol {
    counter-reset: bb-ordered;
}

.bb-legal-content ol > li {
    counter-increment: bb-ordered;
    padding-left: 1.1rem;
}

.bb-legal-content ol > li::before {
    content: counter(bb-ordered) ".";
    position: absolute;
    left: -1.45rem;
    top: 0;
    color: #0db2ff;
    font-weight: 600;
}

.bb-legal-content a {
    color: #0db2ff;
    text-decoration: underline;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.bb-legal-content a:hover,
.bb-legal-content a:focus-visible {
    color: #ff8a3d;
    text-shadow: 0 0 12px rgba(255, 138, 61, 0.45);
}

.bb-legal-callout {
    margin: var(--bb-spacing-sm) 0;
    padding: 1.15rem 1.35rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(13, 178, 255, 0.16), rgba(91, 47, 255, 0.18));
    border: 1px solid rgba(13, 178, 255, 0.35);
    box-shadow: 0 12px 32px rgba(13, 178, 255, 0.15);
    color: var(--bb-color-text-primary);
    line-height: 1.7;
}

.bb-legal-callout p {
    margin: 0;
    color: inherit;
}

.bb-legal-callout p + p {
    margin-top: 0.35rem;
}

.bb-legal-meta-list {
    display: grid;
    gap: 0.6rem;
    margin: var(--bb-spacing-sm) 0;
    padding: 0;
    list-style: none;
}

.bb-legal-meta-list li {
    color: var(--bb-color-text-secondary);
}
/* ============================================ */
/* Responsive Styles (Media Queries)           */
/* ============================================ */

@media (max-width: 1024px) {
    .bb-container-header {
        padding: clamp(0.65rem, 0.55rem + 0.6vw, 0.95rem) var(--bb-spacing-sm);
    }

    .bb-navigation__container {
        gap: clamp(0.9rem, 0.5rem + 1vw, 1.5rem);
    }

    .bb-navigation-item__label {
        letter-spacing: 0.16em;
    }

    .bb-global-padding {
        padding: 0 var(--bb-spacing-sm);
    }

    .bb-media-text.has-media-right,
    .bb-apps {
        grid-template-columns: 1fr;
    }

    .bb-cta-banner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bb-buttons {
        justify-content: center;
    }

    .bb-legal-card {
        padding: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
    }
}

@media (max-width: 768px) {
    .bb-container-header {
        justify-content: stretch;
    }

    .bb-header-shell {
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }

    .bb-nav-trigger {
        display: inline-flex;
    }

    .bb-navigation {
        max-width: none;
        position: relative;
        z-index: 9999;
    }

    .bb-navigation__container {
        position: absolute;
        top: calc(100% + 14px);
        right: 0;
        z-index: 10000;
        align-items: stretch;
        flex-direction: column;
        gap: 0.35rem;
        padding: var(--bb-spacing-sm);
        min-width: min(320px, 85vw);
        border-radius: calc(var(--bb-border-radius) + 4px);
        background: rgba(10, 14, 30, 0.98);
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 28px 55px rgba(6, 8, 22, 0.75), 0 10px 40px rgba(0, 0, 0, 0.5);
        transform-origin: top right;
        transform: scale(0.92);
        opacity: 0;
        pointer-events: none;
        transition: var(--bb-transition);
    }

    .bb-nav-toggle:checked ~ .bb-navigation .bb-navigation__container {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .bb-navigation-item__label {
        justify-content: flex-start;
        padding: 0.6rem 0.4rem;
        letter-spacing: 0.14em;
    }

    .bb-navigation-item__label::after {
        left: 0;
        right: 0;
        bottom: -4px;
    }

    .bb-navigation-item__label:hover,
    .bb-navigation-item__label:focus-visible {
        transform: translateX(6px);
    }

    /* Mobile navigation effects */
    .bb-navigation::after {
        display: none;
    }

    .bb-navigation__container::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
                135deg,
                rgba(13, 178, 255, 0.15) 0%,
                rgba(93, 47, 255, 0.15) 50%,
                rgba(255, 138, 61, 0.15) 100%
        );
        opacity: 0.5;
        z-index: -1;
    }

    .bb-media-text {
        grid-template-columns: 1fr;
    }

    .bb-hero-meta {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bb-meta-card {
        padding: 1rem 1.2rem;
    }

    .bb-meta-icon {
        width: 38px;
        height: 38px;
    }

    .bb-meta-icon svg {
        width: 20px;
        height: 20px;
    }

    .bb-section {
        padding: var(--bb-spacing-lg) 0;
    }

    .bb-hero-image,
    .bb-qr-image,
    .bb-apps-image {
        border-radius: var(--bb-border-radius);
    }

    .bb-element-button {
        padding: 0.9rem 1.8rem;
        font-size: 0.82rem;
    }

    .bb-step-item {
        gap: 1rem;
    }

    .bb-step-item:hover {
        transform: translateX(4px);
    }

    .bb-step-number span {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .bb-step-connector {
        top: 48px;
    }

    .bb-step-content {
        padding: 0.9rem 1.2rem;
    }

    .bb-step-title {
        font-size: 1.1rem;
    }

    .bb-step-description {
        font-size: 0.9rem;
    }

    .bb-legal-page {
        padding: var(--bb-spacing-lg) 0;
    }

    .bb-legal-card {
        padding: clamp(1.3rem, 1.15rem + 2vw, 1.8rem);
        border-radius: calc(var(--bb-border-radius) + 4px);
    }

    .bb-legal-content ol > li {
        padding-left: 0.75rem;
    }

    .bb-legal-content ol > li::before {
        left: -1.15rem;
    }
}

@media (max-width: 520px) {
    .bb-navigation__container {
        min-width: calc(100vw - 2.5rem);
        right: -1rem;
    }

    .bb-navigation-item__label {
        letter-spacing: 0.12em;
    }

    .bb-legal-card {
        padding: clamp(1.1rem, 1rem + 2vw, 1.5rem);
    }

    .bb-legal-content ul {
        padding-left: 1.4rem;
    }

    .bb-legal-content ul li::before {
        left: -1.1rem;
    }
}

@media (max-width: 480px) {
    .bb-lead {
        font-size: 1rem;
    }

    .bb-cta-banner {
        padding: var(--bb-spacing-md);
    }

    .bb-buttons {
        flex-direction: column;
    }

    .store-badge {
        width: clamp(180px, 60vw, 220px);
    }

    .bb-element-button {
        width: 100%;
        justify-content: center;
    }

    .bb-steps {
        gap: 1.2rem;
    }

    .bb-step-item {
        gap: 0.85rem;
    }

    .bb-step-number span {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
    }

    .bb-step-connector {
        top: 42px;
    }
}
/* ============================================ */
/* Steps (How It Works Section)                */
/* ============================================ */

.bb-steps {
    list-style: none;
    padding: 0;
    margin: var(--bb-spacing-md) 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bb-step-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
    transition: all 0.3s ease;
}

.bb-step-item:hover {
    transform: translateX(8px);
}

.bb-step-number {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.bb-step-number span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(13, 17, 35, 0.5);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: 1px solid rgba(13, 178, 255, 0.3);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0db2ff;
    box-shadow:
            0 8px 24px rgba(4, 6, 18, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.bb-step-number span::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg,
    rgba(13, 178, 255, 0.6) 0%,
    rgba(93, 47, 255, 0.6) 100%);
    border-radius: inherit;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s ease;
    z-index: -1;
}

.bb-step-number span::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%);
    opacity: 0.5;
}

.bb-step-item:hover .bb-step-number span {
    transform: scale(1.08) rotate(-3deg);
    border-color: rgba(13, 178, 255, 0.6);
    box-shadow:
            0 16px 42px rgba(13, 178, 255, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.bb-step-item:hover .bb-step-number span::before {
    opacity: 1;
}

.bb-step-connector {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 1.5rem);
    background: linear-gradient(180deg,
    rgba(13, 178, 255, 0.4) 0%,
    rgba(93, 47, 255, 0.2) 50%,
    rgba(255, 138, 61, 0.1) 100%);
    z-index: 1;
}

.bb-step-item:last-child .bb-step-connector {
    display: none;
}

@keyframes connector-glow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.bb-step-connector::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
    rgba(13, 178, 255, 0.6) 0%,
    transparent 100%);
    filter: blur(4px);
    animation: connector-glow 3s ease-in-out infinite;
}

.bb-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    background: rgba(13, 17, 35, 0.35);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
            0 8px 24px rgba(4, 6, 18, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bb-step-item:hover .bb-step-content {
    background: rgba(13, 17, 35, 0.5);
    border-color: rgba(13, 178, 255, 0.25);
    box-shadow:
            0 12px 32px rgba(13, 178, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bb-step-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bb-color-text-primary);
    letter-spacing: -0.01em;
}

.bb-step-description {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bb-color-text-secondary);
}

.bb-step-item:hover .bb-step-title {
    color: #0db2ff;
}

.bb-step-item:hover .bb-step-description {
    color: var(--bb-color-text-primary);
}
/* ============================================ */
/* Typography                                   */
/* ============================================ */

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bb-color-background);
    color: var(--bb-color-text-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: 'Rubik', 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bb-color-text-primary);
}

.bb-eyebrow {
    display: inline-block;
    margin-bottom: var(--bb-spacing-xs);
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: linear-gradient(90deg, #0db2ff 0%, #ff8a3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bb-lead {
    font-size: clamp(1rem, 1.1rem + 0.6vw, 1.35rem);
    color: var(--bb-color-text-secondary);
    max-width: 520px;
}

.bb-section-title {
    font-size: clamp(2rem, 2.1rem + 1.5vw, 3.1rem);
    margin-bottom: var(--bb-spacing-xs);
}

.bb-section-subtitle {
    color: var(--bb-color-text-secondary);
    max-width: 640px;
}

.bb-small-text {
    font-size: 0.95rem;
}

.bb-smaller-text {
    font-size: 0.85rem;
    color: var(--bb-color-text-secondary);
}
/* ============================================ */
/* Home Page Styles - Modular Structure        */
/* ============================================ */
/* 
 * This file imports all home page related styles
 * Each module handles a specific part of the page:
 * 
 * - base:        CSS variables, @property, root styles
 * - typography:  Fonts, headings, text styles
 * - header:      Header and navigation with animations
 * - components:  Buttons, cards, media layouts
 * - hero:        Hero section specific styles
 * - features:    Features grid section
 * - steps:       How it works section
 * - apps:        Apps section
 * - cta:         CTA banner
 * - footer:      Footer styles
 * - legal:       Legal pages (Privacy Policy, Terms)
 * - responsive:  All media queries and responsive styles
 */

@import './home/base';
@import './home/typography';
@import './home/header';
@import './home/components';
@import './home/hero';
@import './home/features';
@import './home/steps';
@import './home/apps';
@import './home/cta';
@import './home/footer';
@import './home/legal';
@import './home/responsive';
/*


*/

/* ---------- Глобальные сбросы ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; overflow-x: hidden; }

body{
    margin: 0;
    background: #000;             /* чёрный фон */
    color: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Переменные ---------- */
:root{
    --badge-w-min: 140px;      /* телефоны */
    --badge-w-max: 200px;      /* как на 1-й картинке */
    --content-max: 600px;      /* ширина карточки на больших экранах */
    --cta-gap: 16px;           /* чуть больше зазор между кнопками */
    --cta-pad-x: clamp(12px, 4vw, 24px);
    --cta-pad-y: 16px;
    --cta-reserved-h: 130px;   /* резерв под панель кнопок на моб. */
}

/* ---------- Контейнер страницы ---------- */
.landing{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* ---------- Десктоп/планшет (дефолт) ---------- */
.card-stage{
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 16px;
}

.image-frame{
    width: min(100%, var(--content-max));
    max-height: none;
}

.card-image{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;      /* на вебе без обрезки */
    display: block;
    border-radius: 12px;
}

/* ---------- Панель с кнопками ---------- */
.store-cta{
    position: sticky;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--cta-gap);
    padding: var(--cta-pad-y) var(--cta-pad-x);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 20%, #000 60%);
    padding-bottom: calc(var(--cta-pad-y) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.35);
    z-index: 10;
}

.store-link{ display: inline-block; }

.store-badge{
    display: block;
    width: clamp(var(--badge-w-min), 22vw, var(--badge-w-max));
    height: auto;
}

@media (hover: hover){
    .store-link:hover .store-badge{ opacity: .85; transition: opacity .15s ease-in-out; }
}

/* ---------- Мобильные правки (без кропа и без горизонтального скролла) ---------- */
@media (max-width: 768px){
    .card-stage{
        padding: 0;                /* без лишних отступов вокруг картинки */
    }

    .image-frame{
        width: 100%;               /* важно: не 100vw, чтобы не было горизонтального скролла */
        height: calc(100svh - var(--cta-reserved-h));
        max-height: calc(100svh - var(--cta-reserved-h));
    }

    .card-image{
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;       /* без обрезки */
        border-radius: 0;          /* в край */
    }

    .store-cta{
        gap: var(--cta-gap);
        padding: 12px var(--cta-pad-x);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 10%, #000 55%);
    }
}

/* ---------- Уточнение для больших экранов ---------- */
@media (min-width: 769px){
    .card-stage{ padding: 24px; }
    .image-frame{ max-height: none; }
}