@charset "UTF-8";

/* =============================================================================
   STORM LANCERS THEME - CSS ARCHITECTURE OVERVIEW
   =============================================================================
   
   This CSS file implements the Storm Lancers gaming theme with the following
   key visual characteristics:
   
   SIGNATURE ELEMENTS:
   - 3D Green Shadows: box-shadow: 1rem 1rem #00FF7E (ACID green)
   - Pink Accents: #ff1477 for borders, focus states, and highlights
   - Sheepman Font: Custom branded font for all headings and important text
   - Gaming Aesthetic: Sci-fi/tactical visual language throughout
   
   STRUCTURE:
   1. Normalize.css (cross-browser consistency)
   2. Custom Fonts (Sheepman branded font)
   3. Base Styles (global resets and defaults)
   4. Component Styles (buttons, forms, navigation, etc.)
   5. Layout Styles (header, footer, containers)
   6. Theme Overrides (Storm Lancers specific customizations)
   7. New Request Page (detailed form styling)
   
   DEVELOPER NOTES:
   - Uses CSS variables (rgba(5, 5, 5, 1), #FFFFFF, etc.)
   - Mobile-first responsive design approach
   - Accessibility features (reduced motion, focus states)
   - Extensive use of !important for theme overrides (necessary for Zendesk)
   
============================================================================= */

/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* 
   Normalize.css provides cross-browser consistency by correcting bugs and
   common inconsistencies across different browsers. This is the foundation
   layer that ensures consistent rendering before applying custom styles.
*/

/* =============================================================================
   CUSTOM FONTS - STORM LANCERS BRANDING
   =============================================================================
   
   The 'Sheepman' font is the primary branded font for Storm Lancers.
   It's used for:
   - All headings (H1, H2, H3, etc.)
   - Category card titles
   - Submit buttons
   - Footer headings
   - Any text that needs brand emphasis
   
   IMPLEMENTATION NOTE:
   The font file URL uses a CSS variable (/hc/theming_assets/01K3PGF49T868PHAWGS4B0N8DD)
   which is likely defined by the Zendesk theming system.
============================================================================= */
@font-face {
  font-family: 'sheepman';
  src: url(/hc/theming_assets/01K3PGF49T868PHAWGS4B0N8DD) format('woff');
  font-weight: normal;
  font-style: normal; 
  /* This font will be the primary brand font throughout the theme */
}


html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'sheepman', sans-serif;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* =============================================================================
   BASE STYLES - GLOBAL DEFAULTS
   =============================================================================
   
   These styles set up the foundational styling for the entire theme.
   Key decisions made here:
   - Border-box sizing for predictable layout calculations
   - Sheepman font as the default body font (overriding Zendesk default)
   - CSS variables for maintainable color management
   
============================================================================= */

/* Global box-sizing for predictable layout calculations */
* {
  box-sizing: border-box;
}

/* Body defaults - sets up the foundation for the entire page */
body {
  background-color: #FFFFFF; /* CSS variable defined by Zendesk */
  color: rgba(20, 20, 20, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(34, 34, 34, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid rgba(5, 5, 5, 1);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid rgba(5, 5, 5, 1);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid rgba(5, 5, 5, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(5, 5, 5, 1);
  border-radius: 4px;
  color: rgba(5, 5, 5, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: rgba(5, 5, 5, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: rgba(5, 5, 5, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #000;
  border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: rgba(5, 5, 5, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: rgba(255, 255, 255, 1);
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #000;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

/* =============================================================================
   SAFE OVERRIDES FOR NEW REQUEST PAGE SUBMIT BUTTON
   Uses multiple selector combinations to ensure styles apply without
   affecting non-submit buttons (like the rich text editor toolbar).
============================================================================= */

/* Target basic form submit buttons */
.new-request input[type="submit"],
.new-request button[type="submit"],
.new-request .button-large,
.new-request .hbs-form input[type=submit],
body.new-request input[type="submit"],
body.new-request button[type="submit"],
body.new-request .button-large,
body.new-request .hbs-form input[type=submit] {
  background: #000 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  display: block !important;
  margin: 50px auto 30px auto !important;
  text-align: center !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  width: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
  height: auto !important;
  transition: all 0.3s ease !important;
}

/* Target Zendesk Garden components (submit only) */
#new-request-form button[type="submit"],
#new-request-form input[type="submit"],
.form button[type="submit"],
.form input[type="submit"],
div.form button[type="submit"],
div.form input[type="submit"] {
  background: #000 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  display: block !important;
  margin: 50px auto 30px auto !important;
  text-align: center !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  transition: all 0.3s ease !important;
}

/* Target any button with Garden data attributes (submit only) */
[data-garden-id*="button"][type="submit"],
[data-garden-id*="buttons"][type="submit"] {
  background: #000 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  text-align: center !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

/* Target buttons in new request form container by ID (submit only) */
#new-request-form [data-garden-id*="button"][type="submit"],
#new-request-form button[type="submit"],
#main-content button[type="submit"],
#main-content input[type="submit"] {
  display: block !important;
  margin: 50px auto 30px auto !important;
  background: #000 !important;
  color: white !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  min-width: 300px !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

/* Hover states for submit-only selectors - green bg/black text */
.new-request input[type="submit"]:hover,
.new-request button[type="submit"]:hover,
body.new-request input[type="submit"]:hover,
body.new-request button[type="submit"]:hover,
#new-request-form button[type="submit"]:hover,
#new-request-form input[type="submit"]:hover,
.form button[type="submit"]:hover,
.form input[type="submit"]:hover,
[data-garden-id*="button"][type="submit"]:hover {
  background: #00FF7E !important;
  color: black !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Focus states */
.new-request input[type="submit"]:focus,
.new-request button[type="submit"]:focus,
body.new-request input[type="submit"]:focus,
body.new-request button[type="submit"]:focus,
#new-request-form button[type="submit"]:focus,
#new-request-form input[type="submit"]:focus {
  background: #000 !important;
  color: white !important;
  outline: 2px solid #00FF7E !important;
  outline-offset: 4px !important;
}

.button-secondary {
  color: #474747;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #474747;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(20, 20, 20, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(5, 5, 5, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(5, 5, 5, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #474747;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(5, 5, 5, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(5, 5, 5, 1);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(5, 5, 5, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #87929D;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(5, 5, 5, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #474747;
  margin-left: 4px;
}

.form-field p {
  color: #474747;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #474747;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(34, 34, 34, 1);
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(5, 5, 5, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(0, 0, 0, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(20, 20, 20, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(20, 20, 20, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(0, 0, 0, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(0, 0, 0, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(0, 0, 0, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(5, 5, 5, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(255, 255, 255, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/

.footer_divider {
  background-image: url('https://www.probablymonsters.com/stormlancers/footer_lines.png');
  background-repeat: repeat-x;
  margin-top: 60px;
  width: 100%;
  height: 254px;
  background-position: top center;
  background-size: cover;
}
.footer {
  border-top: 1px solid #ddd;
  margin-top: 0px;
  padding: 30px 0;
}
.footer a {
  color: #474747;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #474747;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #474747;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #474747;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(0, 0, 0, 1);
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(5, 5, 5, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(5, 5, 5, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 5, 5, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(5, 5, 5, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(5, 5, 5, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(5, 5, 5, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(5, 5, 5, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01K3PR8Y20D5HVVYXVKVKX0DHH);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  max-width: 610px;
  margin: 0 auto;
}

.hero-title {
  color: #000 !important;
  font-family: 'sheepman';
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(5, 5, 5, 1);
  box-sizing: border-box;
  color: rgba(5, 5, 5, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  box-shadow: 1rem 1rem #ff1477;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(5, 5, 5, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(20, 20, 20, 1);
}
.blocks-item-link {
  color: rgba(5, 5, 5, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 5, 5, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K4BATJZDW4427DS7AWS0KC6X);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(34, 34, 34, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(255, 20, 119, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: rgba(20, 20, 20, 1);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(34, 34, 34, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(255, 20, 119, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(5, 5, 5, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: rgba(20, 20, 20, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(20, 20, 20, 1);
}

.icon-star {
  color: rgba(5, 5, 5, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: rgba(20, 20, 20, 1);
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(34, 34, 34, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(255, 20, 119, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #474747;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(5, 5, 5, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(34, 34, 34, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(255, 20, 119, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(20, 20, 20, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: rgba(20, 20, 20, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #474747;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #474747;
}
.share a:hover {
  text-decoration: none;
  color: rgba(5, 5, 5, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #474747;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(34, 34, 34, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(255, 20, 119, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #474747;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(5, 5, 5, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(5, 5, 5, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(34, 34, 34, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(255, 20, 119, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #474747;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(5, 5, 5, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #474747;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(5, 5, 5, 1);
}

.vote-voted:hover {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01K4BAG9JARM5XH8RKXHR5DQSQ);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(5, 5, 5, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(5, 5, 5, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid rgba(5, 5, 5, 1);
  content: attr(data-follower-count);
  color: rgba(5, 5, 5, 1);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(5, 5, 5, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(0, 0, 0, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(34, 34, 34, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #474747;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(20, 20, 20, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: #00FCFF;
  color: #000;
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #474747;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(34, 34, 34, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(255, 20, 119, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #474747;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(5, 5, 5, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(5, 5, 5, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(20, 20, 20, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(20, 20, 20, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(5, 5, 5, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(20, 20, 20, 1);
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(5, 5, 5, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #474747;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #474747;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #474747;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(5, 5, 5, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(5, 5, 5, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #474747;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #474747;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #474747;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(5, 5, 5, 1);
  border-radius: 4px;
  color: rgba(5, 5, 5, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #474747;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #474747;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(20, 20, 20, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(0, 0, 0, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(0, 0, 0, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(0, 0, 0, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #474747;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(5, 5, 5, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #87929D;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #87929D;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(0, 0, 0, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(34, 34, 34, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(255, 20, 119, 1);
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #474747;
  font-style: italic;
  padding: 0 15px;
}

/* #############################################################################
   STORM LANCERS THEME OVERRIDES - CUSTOM STYLING
   #############################################################################
   
   This section contains all Storm Lancers specific customizations that override
   the default Zendesk Copenhagen theme. These styles are "append-only" meaning
   they don't break existing functionality but enhance the visual appearance.
   
   IMPORTANT NOTES FOR DEVELOPERS:
   - Heavy use of !important is necessary to override Zendesk's default styles
   - All customizations maintain responsive design principles
   - Accessibility features are preserved and enhanced
   - The theme follows a gaming/sci-fi aesthetic with specific color palette
   
   THEME COLOR PALETTE:
   - ACID Green: #00FF7E (signature 3D shadows and accents)
   - Hot Pink: #ff1477 (borders, focus states, highlights)
   - Pure Black: #000 (important elements, footer, submit buttons)
   - White/Light: Clean backgrounds with subtle gradients
   
############################################################################# */

/* =============================================================================
   FOOTER COLOR VARIABLES
   =============================================================================
   These variables define the color scheme for the custom footer styling.
============================================================================= */
$footer-bg: #000 !default;      /* Black background for footer */
$footer-fg: #fff !default;      /* White text for contrast */
$footer-accent: #00FCFF !default; /* ACID green for accents and underlines */

/* =============================================================================
   1. TYPOGRAPHY OVERRIDES - SHEEPMAN FONT IMPLEMENTATION
   =============================================================================
   
   Applies the custom 'Sheepman' font to all important text elements.
   This creates consistent branding throughout the Storm Lancers theme.
   
   AFFECTED ELEMENTS:
   - All heading levels (H1-H6)
   - Category card titles
   - Community follow button counters
   - Submit buttons (defined elsewhere)
   - Footer headings (defined elsewhere)
============================================================================= */
h1, h2, h3, h4, h5, h6 { 
  font-family: 'sheepman', sans-serif !important; 
  /* !important needed to override Zendesk's default heading fonts */
}
.blocks-item-title { 
  font-family: 'sheepman', sans-serif !important; 
  /* Ensures category cards use the branded font */
}
.community-follow button::after { 
  font-family: 'sheepman', sans-serif !important; 
  /* Follow button counters use branded font */
}

/* =============================================================================
   2. HEADING SIZE OVERRIDES - LARGE SCALE TYPOGRAPHY
   =============================================================================
   
   Creates dramatically larger headings for visual impact and gaming aesthetic.
   The oversized typography is a key element of the Storm Lancers theme.
   
   DESKTOP: 50px font size
   MOBILE: 34px font size (maintains readability on small screens)
============================================================================= */
h2 { 
  font-size: 50px !important;    /* Large, impactful heading size */
  line-height: 1.2;              /* Tight line height for visual impact */
}
/* Mobile responsiveness for large headings */
@media (max-width: 480px) { 
  h2 { font-size: 34px !important; } 
  /* Scales down appropriately for mobile screens */
}

/* =============================================================================
   3. HOMEPAGE CATEGORY CARDS - CLEAN CARD DESIGN
   =============================================================================
   
   Customizes the category cards on the homepage for a cleaner, more focused
   appearance that emphasizes the category titles over descriptions.
   
   CHANGES:
   - Hides category descriptions for cleaner look
   - Makes category titles large (50px/34px mobile) and centered
   - Maintains the 3D green shadow effect (defined below)
============================================================================= */
.categories.blocks .blocks-item-description { 
  display: none !important; 
  /* Hides category descriptions for cleaner card appearance */
}
.categories.blocks .blocks-item-title {
  font-size: 35px !important;    /* Large, prominent category titles */
  line-height: 1.1;              /* Tight spacing for visual impact */
  text-align: center;             /* Centered alignment in cards */
}

/* Handle edge case where Categories section title might be hidden by Zendesk */
.section.knowledge-base > h2.visibility-hidden {
  /* Override Zendesk's .visibility-hidden class for Categories heading */
  position: static;              /* Remove absolute positioning */
  display: block;                /* Make visible */
  clip: auto;                   /* Remove clipping */
  -webkit-clip-path: none;      /* Remove WebKit clipping */
  clip-path: none;              /* Remove modern clipping */
  height: auto;                 /* Remove height restriction */
  width: auto;                  /* Remove width restriction */
  overflow: visible;            /* Make content visible */
  white-space: normal;          /* Normal text wrapping */
  margin: 0 0 24px;             /* Standard margin */
  padding: 0;                   /* Remove padding */
  text-align: center;           /* Center the heading */
  font-family: 'sheepman', sans-serif; /* Apply branded font */
  font-size: 50px !important;   /* Large size to match theme */
  line-height: 1.1;             /* Tight line height */
}
/* Mobile responsiveness for unhidden category headings */
@media (max-width: 480px) {
  .section.knowledge-base > h2.visibility-hidden,
  .categories.blocks .blocks-item-title { 
    font-size: 34px !important; /* Scaled down for mobile */
  }
}

/* =============================================================================
   4. SIGNATURE 3D SHADOW EFFECT - ACID GREEN
   =============================================================================
   
   This is the most recognizable element of the Storm Lancers theme.
   The ACID green (#00FF7E) 3D shadow creates depth and gaming aesthetic.
   
   SHADOW SPECIFICATION:
   - X-offset: 1rem (16px)
   - Y-offset: 1rem (16px) 
   - Color: #00FF7E (ACID green)
   - No blur or spread for sharp, defined shadow
============================================================================= */
.blocks-item { 
  box-shadow: 1rem 1rem #00FF7E !important; 
  /* Signature 3D shadow effect - 16px offset in ACID green */
}

/* =============================================================================
   5. HEADER LOGO SIZING - RESPONSIVE BRAND PRESENCE
   =============================================================================
   
   Makes the Storm Lancers logo more prominent with responsive sizing.
   Ensures the brand is clearly visible across all device sizes.
   
   DESKTOP: 180px max height (large, prominent)
   TABLET: Maintains proportions with proper padding
   MOBILE: 48px max height (compact but visible)
============================================================================= */
.header { 
  height: 100px !important; 
  align-items: center;
  padding: 0 5% !important;
}
.logo img { max-height: 180px !important; vertical-align: middle; }
@media (min-width: 1160px) {
  .header {
    padding: 0 !important;
    width: 90%;
  }
}
@media (max-width: 768px) {
  .header { 
    height: 76px !important;
    padding: 0 4% !important;
  }
  .logo img { max-height: 48px !important; }
}

/* 6) Hero: readability, centering, large title, parallax on wide screens */
.hero {
  position: relative;
  height: auto;
  min-height: clamp(360px, 70vh, 720px);
  display: grid;
  place-items: center;
  margin-bottom: 100px;
  padding: 0 20px;
  text-align: center;

  @media (min-width: 1024px) { background-attachment: fixed; }

  /* overlay removed for clean appearance */
}

.hero-inner {
  position: relative;       /* above overlay */
  z-index: 1;
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hero-title {
  font-family: 'sheepman', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px) !important;
  line-height: 1;
  letter-spacing: 0.4px;
  margin: .2em 0 .3em;
  /* text-shadow: 0 2px 16px rgba(0,0,0,.55); */
  text-align: center;
  position: relative;
}

/* Animations removed - clean static display */

/* Responsive hero title line breaks */
@media (min-width: 768px) {
  .hero-title {
    white-space: nowrap; /* Keep "Fight Together. Helping each other" on one line on wide screens */
  }
}

@media (max-width: 767px) {
  .hero-title {
    white-space: normal; /* Allow line breaks on narrow screens */
    line-height: 1.1; /* Slightly more space between lines on mobile */
  }
}

/* No animations - clean static display */

/* 7) Hero search: pill style, focus effect, no loupe icon */
.hero .search {
  margin: 40px auto 0;  /* Add top margin to position below title */
  position: relative;
  width: min(90%, 760px);
  border-radius: 999px;
  border-color: transparent;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: box-shadow .2s ease, transform .16s ease;

  &:focus-within {
    box-shadow: 0 12px 38px rgba(0,0,0,.35);
    transform: translateY(-1px);
  }
}
.hero .search input[type=search] {
  height: 56px;
  border: 0;
  border-radius: inherit;
  font-size: 16px;
  padding-inline: 56px 54px; /* room for clear button when the icon is visible */
}
.hero .search .clear-button { height: 56px; border-radius: 0 999px 999px 0; }

/* hide magnifying glass + rebalance padding */
.hero .search-icon { display: none !important; }
.hero .search input[type="search"] { padding-left: 20px !important; padding-right: 20px !important; }
[dir="rtl"] .hero .search input[type="search"] { padding-left: 20px !important; padding-right: 20px !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { .hero .search { transition: none !important; } }

/* 8) Recent activity heading size - match Need assistance header */
.recent-activity-header h2 { 
  font-family: 'sheepman', sans-serif !important; 
  font-size: clamp(18px, 2.6vw, 24px) !important; 
  line-height: 1.1 !important;
  text-align: center;
  margin: 0 0 10px;
}

/* 9) “Need assistance ?” CTA: centered card + ACID shadow */
.section.form-request {
  max-width: 820px;
  margin: 56px auto;
  /* border: 1px solid rgba(rgba(5, 5, 5, 1),.35);
  border-radius: 0px;
  padding: clamp(18px, 3.5vw, 28px); */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* background:
    radial-gradient(1200px 400px at 10% -10%, rgba(#ff1477,.16), transparent 60%),
    linear-gradient(180deg, darken(#FFFFFF,1%), darken(#FFFFFF,4%));
  box-shadow: 1rem 1rem #00FF7E !important; */

  h2 {
    font-size: clamp(18px, 2.6vw, 24px);
    margin: 0 0 10px;
    font-family: 'sheepman', sans-serif;
  }
  > div { color: #383838; margin-bottom: 16px; }
  .button, .button-large { margin-top: 6px; border-radius: 0px; min-width: 180px; }
}
.section.form-request .hbs-form,
.section.form-request form { width: 100%; max-width: 640px; margin: 0 auto; }

/* 10) Footer: black bg, two columns, ACID green accent; hide Zendesk credit */
.footer {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  border-top: 0 !important;
  padding: 28px 0 16px;
  position: relative;
}
.footer a { color: $footer-fg; }
.footer .powered-by-zendesk,
.powered-by-zendesk { display: none !important; }

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
@media (max-width: 900px) { .footer-inner { align-items: flex-start; } }
@media (max-width: 680px) { 
  .footer-inner { 
    flex-direction: column; 
    gap: 18px; 
    align-items: center;
    text-align: center;
  } 
}

.footer-heading {
  font-family: 'sheepman', sans-serif;
  font-size: 28px;
  margin: 0 0 10px;
  line-height: 1.1;
}

/* Social row */
.social-list { display: flex; gap: 14px; align-items: center; padding: 0; margin: 0; list-style: none; }
.social-link { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; transition: transform .15s ease, filter .15s ease; }
.social-link img { width: 22px; height: 22px; display: block; }
.social-list .icon { width: 22px; height: 22px; color: $footer-accent ; fill: #00FCFF; stroke: #00FCFF; }
.footer .social-link:hover { transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(0,255,126,.65)); }

/* Ratings/Badges row */
.badge-row { display: flex; gap: 14px; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.badge-row img, .badge-img { height: 54px; width: auto; display: block; background: transparent; padding: 0; }
.badge-switch { height: 50px; }           /* Switch logo looks taller */
@media (max-width: 680px) { .badge-row img, .badge-img { height: 40px; } }

/* Accent underline */
.footer-underline { height: 3px; background: $footer-accent; width: 100%; margin-top: 14px; opacity: .95; }

/* Community heading on the homepage – match Categories style */
.home-section.community h2,
.community.home-section h2,
section.community > h2,
section.community h2.home-title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  line-height: 1.1;
  text-align: center;
}
@media (max-width: 480px) {
  .home-section.community h2,
  .community.home-section h2,
  section.community > h2,
  section.community h2.home-title {
    font-size: 34px !important;
  }
}

/* Categories heading on the homepage – match Community style size */
.home-section h2,
.section.knowledge-base h2:not(.visibility-hidden) {
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  line-height: 1.1;
  text-align: center;
}
@media (max-width: 480px) {
  .home-section h2,
  .section.knowledge-base h2:not(.visibility-hidden) {
    font-size: 34px !important;
  }
}

/* Storm Lancers Banner Section */
.storm-lancers-section {  
  position: relative;
  margin-bottom: 60px;
  margin-top: -200px; /* Much stronger overlay to cover green background */
  z-index: 5; /* Above content but below header navigation */
  
  @media (max-width: 768px) {
    margin-top: -160px;
  }
  
  @media (max-width: 480px) {
    margin-top: -120px;
  }
}

.storm-banner-wrapper {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  max-height: 150px; /* Increased to show more of the banner */
  position: relative;
  z-index: 5;
}

.storm-banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

.storm-content-wrapper {
  background: #000 !important;
  background-color: #000 !important;
  padding: 60px 0 80px;
  position: relative;
  margin-top: -2px; /* Ensure no gap between image and black section */
}

.storm-title {
  font-family: 'sheepman', sans-serif !important;
  color: #fff;
  font-size: clamp(36px, 5vw, 64px) !important;
  text-align: center;
  margin: 0 0 20px !important;
  line-height: 1.1 !important;
}

/* ===== Extended Footer Section ===== */
.extended-footer {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff;
  padding: 40px 0;
  font-size: 12px;
  line-height: 1.4;
}

.extended-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.extended-footer-logo {
  flex-shrink: 0;
  width: 252px;
}

.probably-monsters-logo {
  width: 252px;
  height: auto;
  display: block;
  /* Logo colors are now defined directly in the SVG */
}

/* Ensure SVG paths retain their original colors */
.probably-monsters-logo path {
  fill: currentColor;
}

/* Override any inherited color properties that might affect the SVG */
.probably-monsters-logo #YETI {
  fill: #FF8C00 !important;
}

.probably-monsters-logo #probably {
  fill: #FF8C00 !important;
}

.probably-monsters-logo #monsters {
  fill: #FFFFFF !important;
}

.probably-monsters-logo #TM {
  fill: #FFFFFF !important;
}

.extended-footer-text {
  flex: 1;
  text-align: left;
}

.extended-footer-text p {
  margin: 0 0 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.extended-footer-text p:last-of-type {
  margin-bottom: 16px;
}

.extended-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.extended-footer-links a {
  color: #00BFFF; /* Light blue color for links */
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s ease;
}

.extended-footer-links a:hover {
  color: #87CEEB;
  text-decoration: underline;
}

/* Responsive design for extended footer */
@media (max-width: 768px) {
  .extended-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  
  .extended-footer-logo {
    width: auto;
  }
  
  .extended-footer-text {
    text-align: center;
  }
  
  .extended-footer-links {
    justify-content: center;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .extended-footer {
    padding: 30px 0;
  }
  
  .extended-footer-links {
    flex-direction: column;
    gap: 8px;
  }
  
  .extended-footer-links a {
    font-size: 11px;
  }
  text-transform: none;
}

.storm-divider {
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #ff1477, #00FF7E);
  margin: 0 auto 40px;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(255,20,119,0.5);
}

.storm-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 0 20px;
}

/* Bottom banner to complete the design */
.storm-bottom-banner {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  margin-top: -2px; /* Ensure seamless connection */
}

.storm-bottom-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .storm-banner-wrapper {
    max-height: 80px;
  }
  
  .storm-content-wrapper {
    padding: 40px 0 60px;
  }
  
  .storm-title {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
  
  .storm-description {
    font-size: 14px;
    line-height: 1.6;
  }
  
  .storm-divider {
    width: 80px;
    height: 3px;
    margin-bottom: 30px;
  }
}

/* Animation for the divider */
@keyframes dividerGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255,20,119,0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(0,255,126,0.7);
  }
}

.storm-divider {
  animation: dividerGlow 3s ease-in-out infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .storm-divider {
    animation: none;
  }
}

/* Category Page Title Styling */
.category-content .page-header h1 {
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 20px; /* Reduced from 40px to 20px (50% reduction) */
}
@media (max-width: 480px) {
  .category-content .page-header h1 {
    font-size: 34px !important;
  }
}

/* Center the category description */
.category-content .page-header-description {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 800px;
}

/* Back Home Button */
.back-home-button {
  text-align: center;
  margin: 60px auto 40px;
  padding: 20px;
}

.back-home-button .button {
  font-family: 'sheepman', sans-serif !important;
  font-size: 18px !important;
  padding: 12px 30px;
  border-radius: 50px;
  background-color: transparent;
  border: 2px solid rgba(5, 5, 5, 1);
  color: rgba(5, 5, 5, 1);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  min-width: 180px;
  box-shadow: 0.5rem 0.5rem #00FF7E; /* ACID green shadow to match theme */
}

.back-home-button .button:hover,
.back-home-button .button:focus {
  background-color: rgba(5, 5, 5, 1);
  color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0.6rem 0.6rem #00FF7E; /* Slightly larger ACID green shadow on hover */
}

@media (max-width: 768px) {
  .back-home-button {
    margin: 40px auto 30px;
  }
  
  .back-home-button .button {
    font-size: 16px !important;
    padding: 10px 25px;
    min-width: 160px;
  }
}

/* Category Sections: Use Homepage Card Style - 2 columns on desktop */
.category-content .section-tree {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

@media (min-width: 768px) {
  .category-content .section-tree {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
}

.category-content .section-tree .section {
  flex: none;
  max-width: 100%;
  width: 100%;
  max-width: 600px;
}

@media (min-width: 768px) {
  .category-content .section-tree .section {
    flex: 0 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    min-width: 280px;
  }
  
  /* If there are 2 items in the last row, they take equal space */
  .category-content .section-tree .section:nth-last-child(2):nth-child(3n+2),
  .category-content .section-tree .section:nth-last-child(1):nth-child(3n+2) {
    flex: 0 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
  
  /* If there's only 1 item in the last row, it takes full width */
  .category-content .section-tree .section:last-child:nth-child(3n+1) {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Apply homepage card styling to category sections */
.category-content .section-tree .section {
  border: 1px solid rgba(5, 5, 5, 1);
  box-sizing: border-box;
  color: rgba(5, 5, 5, 1);
  display: flex;
  flex-direction: column;
  margin: 0;
  text-align: center;
  box-shadow: 1rem 1rem #00FF7E;
  background: #fff;
  transition: all 0.3s ease;
}

.category-content .section-tree .section:hover,
.category-content .section-tree .section:focus {
  background-color: rgba(5, 5, 5, 1);
  transform: translateY(-2px);
}

.category-content .section-tree .section:hover *,
.category-content .section-tree .section:focus * {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.category-content .section-tree .section-tree-title {
  display: block;
  margin: 0;
  padding: 30px;
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  line-height: 1.1;
  font-weight: normal;
  text-align: center;
}

@media (max-width: 480px) {
  .category-content .section-tree .section-tree-title {
    font-size: 34px !important;
    padding: 20px;
  }
}

.category-content .section-tree .section-tree-title a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.category-content .section-tree .section-tree-title a:visited,
.category-content .section-tree .section-tree-title a:hover,
.category-content .section-tree .section-tree-title a:active {
  color: inherit;
  text-decoration: none;
}

/* Hide article lists in card view (keep it clean like homepage) */
.category-content .section-tree .article-list,
.category-content .section-tree .see-all-articles {
  display: none;
}

/* Override the new card styling for the old storm-themed sections */
.category-content .section-storm-themed {
  /* Reset conflicting styles */
  all: unset;
  /* Apply card styling */
  border: 1px solid rgba(5, 5, 5, 1);
  box-sizing: border-box;
  color: rgba(5, 5, 5, 1);
  display: flex;
  flex-direction: column;
  margin: 0 0 30px 0;
  text-align: center;
  box-shadow: 1rem 1rem #00FF7E;
  background: #fff;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 600px;
  padding: 30px;
}

.category-content .section-storm-themed:hover,
.category-content .section-storm-themed:focus {
  background-color: rgba(5, 5, 5, 1);
  transform: translateY(-2px);
}

.category-content .section-storm-themed:hover *,
.category-content .section-storm-themed:focus * {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.category-content .section-header-wrapper {
  display: block;
  margin: 0;
}

.category-content .section-storm-themed .section-tree-title {
  display: block;
  margin: 0;
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  line-height: 1.1;
  font-weight: normal;
  text-align: center;
}

@media (max-width: 480px) {
  .category-content .section-storm-themed .section-tree-title {
    font-size: 34px !important;
  }
}

.category-content .section-storm-themed .section-tree-title a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.category-content .section-storm-themed .section-tree-title a:visited,
.category-content .section-storm-themed .section-tree-title a:hover,
.category-content .section-storm-themed .section-tree-title a:active {
  color: inherit;
  text-decoration: none;
}

.category-content .section-icon {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .section-storm-themed::before {
    animation: none;
  }
  
  .section-icon {
    animation: none;
  }
}

/* Section Page Title Styling - Match Category Pages */
.section-content .page-header h1 {
  font-family: 'sheepman', sans-serif !important;
  font-size: 36px !important;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 20px; /* Reduced from default (50% reduction to match categories) */
}
@media (max-width: 480px) {
  .section-content .page-header h1 {
    font-size: 34px !important;
  }
}

/* Center the section description */
.section-content .page-header-description {
  text-align: center !important;
  margin: 0 auto 40px !important;
  max-width: 800px;
}

/* Decorative Drones - Top Left and Right of Categories Section (Large Screens Only) */
@media (min-width: 1024px) {
  .section.knowledge-base {
    position: relative;
  }
  
  /* Left Drone */
  .section.knowledge-base::before {
    content: "";
    position: absolute;
    top: -620px;
    left: -180px;
    width: 420px;
    height: 340px;
    background-image: url('https://www.probablymonsters.com/stormlancers/storm_heart.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    pointer-events: none;
    opacity: 0.85;
    animation: droneHoverTilted 4s ease-in-out infinite;
  }
  
  /* Right Drone - Facing Categories */
  .section.knowledge-base::after {
    content: "";
    position: absolute;
    top: -200px;
    right: 0;
    width: 420px;
    height: 340px;
    background-image: url('https://www.probablymonsters.com/stormlancers/vilefly-640.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    pointer-events: none;
    opacity: 0.85;
    animation: droneHoverTiltedRight 4s ease-in-out infinite 2s;
    transform: translateX(40%);
  }
}

/* Drone hover animation */
@keyframes droneHover {
  0%, 100% {
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .blocks-item:first-child::before {
    animation: none !important;
  }
}

/* Decorative Monsters at Bottom of Homepage - REMOVED */


/* #############################################################################
   NEW REQUEST PAGE - COMPREHENSIVE FORM STYLING
   #############################################################################
   
   This section provides complete styling for the "Submit a request" form page.
   The styling follows the Storm Lancers theme with these key principles:
   
   DESIGN GOALS:
   - Single container with 3D green shadow (no nested boxes)
   - Clean, focused form experience
   - Oversized submit button as the focal point
   - Hidden navigation elements for minimal distraction
   - Full responsive design with mobile optimization
   
   TECHNICAL APPROACH:
   - Uses multiple selector combinations for maximum compatibility
   - Extensive use of !important to override Zendesk defaults
   - Progressive enhancement with fallbacks
   - Accessibility considerations (reduced motion, focus states)
   
############################################################################# */

/* =============================================================================
   NAVIGATION CLEANUP - HIDING DISTRACTING ELEMENTS
   =============================================================================
   
   Hides search field and breadcrumbs on the new request page to create a
   focused, distraction-free form experience. This follows UX best practices
   for conversion-focused pages.
   
   HIDDEN ELEMENTS:
   - Search container (not needed on form pages)
   - Breadcrumbs ("Storm Lancers > Submit a request")
   
   SELECTOR STRATEGY:
   Multiple selectors ensure hiding works across different page contexts
   and Zendesk's various class naming patterns.
============================================================================= */
.new-request-page .sub-nav .search-container,
body[class*="new-request"] .sub-nav .search-container,
.container .sub-nav .search-container {
  display: none !important;
  /* !important ensures hiding works even with high-specificity Zendesk styles */
}

/* =============================================================================
   HIDE BREADCRUMBS ON NEW REQUEST PAGE
   =============================================================================
   
   Hides the "Storm Lancers > Submit a request" breadcrumb navigation
   to create a cleaner, more focused form experience.
============================================================================= */
.new-request-page .breadcrumbs,
.new-request-page .sub-nav .breadcrumbs,
body[class*="new-request"] .breadcrumbs,
body[class*="new-request"] .sub-nav .breadcrumbs,
.container .breadcrumbs,
.sub-nav .breadcrumbs,
[data-garden-id="breadcrumbs.breadcrumb"],
nav[aria-label="Breadcrumb"],
.breadcrumb-list,
.breadcrumb-nav {
  display: none !important;
  visibility: hidden !important;
}

/* =============================================================================
   FORM CONTAINER RESET - PREVENTING NESTED BOX STYLING
   =============================================================================
   
   Resets the inner form container to transparent styling to prevent nested
   boxes and duplicate shadows. The main styling will be applied to the outer
   container (see "MAIN FORM CONTAINER" section below).
   
   KEY RESET PROPERTIES:
   - Transparent background (no competing backgrounds)
   - No borders or shadows (handled by outer container)
   - Proper positioning for decorative elements
============================================================================= */
.form,
#new-request-form,
body[class*="new-request"] .form {
  max-width: 800px;        /* Reasonable form width for readability */
  margin: 0 auto;          /* Center horizontally */
  padding: 0;              /* Remove padding (handled by outer container) */
  background: transparent;  /* Transparent to avoid double backgrounds */
  border: none;            /* No border (handled by outer container) */
  border-radius: 0;        /* No radius (handled by outer container) */
  box-shadow: none;        /* No shadow (handled by outer container) */
  position: relative;      /* For pseudo-element positioning */
  overflow: visible;       /* Allow decorative elements to show */
}

/* =============================================================================
   DECORATIVE BACKGROUND ELEMENTS
   =============================================================================
   
   Adds subtle gradient circles for visual interest without overwhelming the
   form. These elements are positioned behind the form content and provide
   a touch of the Storm Lancers color palette.
   
   CIRCLE POSITIONING:
   - Pink circle: Top-right, partially outside form
   - Green circle: Bottom-left, smaller size for balance
============================================================================= */
.form::before,
#new-request-form::before,
body[class*="new-request"] .form::before {
  content: "";                /* Empty pseudo-element */
  position: absolute;          /* Position relative to form */
  top: -50%;                   /* Above the form */
  right: -20%;                 /* Partially outside form */
  width: 200px;                /* Circle size */
  height: 200px;
  background: radial-gradient(circle, rgba(255, 20, 119, 0.1) 0%, transparent 70%);
  /* Pink gradient with low opacity for subtlety */
  border-radius: 50%;          /* Make it circular */
  z-index: -1;                 /* Behind form content */
}

.form::after,
#new-request-form::after,
body[class*="new-request"] .form::after {
  content: "";                /* Empty pseudo-element */
  position: absolute;          /* Position relative to form */
  bottom: -30%;                /* Below the form */
  left: -10%;                  /* Partially outside form */
  width: 150px;                /* Smaller than top circle */
  height: 150px;
  background: radial-gradient(circle, rgba(0, 255, 126, 0.1) 0%, transparent 70%);
  /* Green gradient matching the theme */
  border-radius: 50%;          /* Make it circular */
  z-index: -1;                 /* Behind form content */
}

/* =============================================================================
   FORM TITLE STYLING - STORM LANCERS BRANDING
   =============================================================================
   
   Styles the main "Submit a request" heading with Storm Lancers branding.
   Uses clean, readable black text with the branded Sheepman font.
   
   DESIGN DECISIONS:
   - No gradients or effects (keeps focus on readability)
   - Large size (48px desktop, 32px mobile) for prominence
   - Centered alignment for balanced composition
   - Pure black color for maximum contrast and readability
============================================================================= */
.container h1,
h1,
body[class*="new-request"] h1 {
  font-family: 'sheepman', sans-serif !important; /* Storm Lancers branded font */
  font-size: 48px !important;                     /* Large, prominent size */
  line-height: 1.1;                               /* Tight line spacing */
  text-align: center;                             /* Centered alignment */
  margin-bottom: 30px;                            /* Space before form */
  color: #000 !important;                         /* Pure black text */
  background: none !important;                    /* No background effects */
  -webkit-background-clip: initial !important;    /* Reset WebKit clipping */
  -webkit-text-fill-color: initial !important;    /* Reset WebKit text fill */
  background-clip: initial !important;            /* Reset background clipping */
}

/* Mobile responsiveness for form title */
@media (max-width: 480px) {
  .request-form h1,
  .new-request-page h1,
  body[class*="new-request"] h1 {
    font-size: 32px !important; /* Scaled down for mobile screens */
  }
}

/* =============================================================================
   FORM FIELD SPACING AND LAYOUT
   =============================================================================
   
   Sets consistent spacing between form fields for a clean, organized layout.
   The 25px bottom margin provides comfortable visual separation.
============================================================================= */
.request-form .form-field,
.new-request-page .form-field,
body[class*="new-request"] .form-field {
  margin-bottom: 25px; /* Consistent spacing between form fields */
}

/* =============================================================================
   FORM FIELD LABELS - BRANDED TYPOGRAPHY
   =============================================================================
   
   Styles form labels with Storm Lancers branding and optimal readability.
   Uses the Sheepman font to maintain theme consistency throughout the form.
============================================================================= */
.request-form .form-field label,
.new-request-page .form-field label,
body[class*="new-request"] .form-field label {
  font-family: 'sheepman', sans-serif; /* Consistent with theme */
  font-size: 16px;                     /* Readable size */
  font-weight: 600;                    /* Semi-bold for emphasis */
  color: #333;                         /* Dark gray for contrast */
  margin-bottom: 8px;                  /* Space before input */
  display: block;                      /* Full width labels */
}

/* =============================================================================
   FORM INPUT FIELDS - ROUNDED, MODERN STYLING
   =============================================================================
   
   Provides consistent styling for all input types (text, textarea, select).
   Features rounded corners, subtle borders, and smooth interactions.
   
   VISUAL CHARACTERISTICS:
   - 12px border radius for modern, friendly appearance
   - Light gray borders with good contrast
   - Semi-transparent white backgrounds
   - Smooth transitions for professional feel
============================================================================= */
.request-form .form-field input,
.request-form .form-field textarea,
.request-form .form-field select,
.new-request-page .form-field input,
.new-request-page .form-field textarea,
.new-request-page .form-field select,
body[class*="new-request"] .form-field input,
body[class*="new-request"] .form-field textarea,
body[class*="new-request"] .form-field select {
  border: 2px solid #e1e5e9;           /* Light gray border */
  border-radius: 12px;                 /* Rounded corners */
  padding: 14px 16px;                  /* Comfortable padding */
  font-size: 15px;                     /* Readable text size */
  transition: all 0.3s ease;           /* Smooth hover/focus effects */
  background: #fff;                     /* Solid white background */
}

/* =============================================================================
   FORM INPUT FOCUS STATES - PINK ACCENT HIGHLIGHTING
   =============================================================================
   
   Provides visual feedback when users interact with form fields.
   Uses Storm Lancers pink accent color (#ff1477) for brand consistency.
   
   INTERACTION DESIGN:
   - Pink border on focus matches theme colors
   - Subtle glow effect for enhanced visibility
   - Full white background on focus for contrast
   - No browser default outline (custom styling instead)
============================================================================= */
.request-form .form-field input:focus,
.request-form .form-field textarea:focus,
.request-form .form-field select:focus,
.new-request-page .form-field input:focus,
.new-request-page .form-field textarea:focus,
.new-request-page .form-field select:focus,
body[class*="new-request"] .form-field input:focus,
body[class*="new-request"] .form-field textarea:focus,
body[class*="new-request"] .form-field select:focus {
  border-color: #ff1477;                        /* Pink border on focus */
  box-shadow: 0 0 0 3px rgba(255, 20, 119, 0.1); /* Pink glow effect */
  background: rgba(255, 255, 255, 1);           /* Full white background */
  outline: none;                                /* Remove default browser outline */
}

/* =============================================================================
   TEXTAREA SPECIFIC STYLING
   =============================================================================
   
   Enhances textarea fields (like description) with appropriate sizing
   and resize behavior for optimal user experience.
============================================================================= */
.request-form .form-field textarea,
.new-request-page .form-field textarea,
body[class*="new-request"] .form-field textarea {
  min-height: 120px; /* Minimum height for comfortable typing */
  resize: vertical;   /* Allow vertical resizing only (no horizontal) */
}

/* =============================================================================
   SUBMIT BUTTON - THE CENTERPIECE OF THE FORM
   =============================================================================
   
   This is the most important visual element of the form. The submit button
   is intentionally oversized (3x normal size) to serve as the focal point
   and encourage form completion.
   
   DESIGN SPECIFICATIONS:
   - Font size: 42px (3x the normal 14px)
   - Padding: 36px 60px (3x normal padding)
   - Minimum width: 420px (3x normal width)
   - Pure black background with white text
   - Pill-shaped (50px border radius)
   - Centered with block display and auto margins
   
   SELECTOR STRATEGY:
   Multiple selectors with maximum specificity ensure this styling
   overrides any competing button styles from Zendesk.
============================================================================= */
.request-form input[type="submit"],
.request-form .button-large,
.new-request-page input[type="submit"],
.new-request-page .button-large,
body[class*="new-request"] input[type="submit"],
body[class*="new-request"] .button-large {
  /* CORE VISUAL PROPERTIES */
  background: #FF1477 !important;                    /* Pure black background */
  border: none !important;                        /* No border for clean look */
  border-radius: 50px !important;                 /* Pill shape */
  color: white !important;                        /* White text for contrast */
  
  /* TYPOGRAPHY */
  font-family: 'sheepman', sans-serif !important; /* Storm Lancers font */
  font-size: 30px !important;                     /* 30% smaller than previous (42px -> 30px) */
  font-weight: 600 !important;                    /* Semi-bold weight */
  
  /* SIZING AND SPACING */
  padding: 20px 42px !important;                  /* 10% slimmer height (25px -> 20px) */
  min-width: 300px !important;                    /* 30% smaller min-width (420 -> 300) */
  
  /* POSITIONING AND LAYOUT */
  display: block !important;                      /* Block element for centering */
  margin: 50px auto 0 !important;                 /* Slightly reduced top margin */
  text-align: center !important;                  /* Center text within button */
  width: auto !important;                         /* Auto width based on content */
  max-width: none !important;                     /* No maximum width limit */
  
  /* INTERACTION AND BEHAVIOR */
  cursor: pointer !important;                     /* Pointer cursor on hover */
  transition: all 0.3s ease !important;           /* Smooth hover transitions */
  box-shadow: none !important;                    /* No shadow (clean flat look) */
}

/* =============================================================================
   SUBMIT BUTTON CENTERING - ENSURE PROPER ALIGNMENT
   =============================================================================
   
   Additional CSS to ensure the submit button is properly centered regardless
   of how Zendesk's JavaScript renders the form.
============================================================================= */

/* Center any submit button on new request page */
body[class*="new-request"] button[type="submit"],
body[class*="new-request"] input[type="submit"],
body[class*="new-request"] .button,
.new-request-page button[type="submit"],
.new-request-page input[type="submit"],
.new-request-page .button {
  display: block !important;
  margin: 30px auto !important;
  text-align: center !important;
}

/* Specific styling for the actual rendered submit button - ENHANCED (restricted to submit only) */
body[class*="new-request"] [data-garden-id="buttons.button"][type="submit"],
body[class*="new-request"] input[type="submit"],
.new-request-page [data-garden-id="buttons.button"][type="submit"],
.new-request-page input[type="submit"] {
  background: #FF1477 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;                         /* 30% smaller */
  padding: 20px 42px !important;                      /* 10% slimmer height */
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;                        /* 30% smaller min width */
  display: block !important;
  margin: 50px auto 30px auto !important;             /* Centered with slightly reduced margins */
  text-align: center !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;             /* Ensure perfect centering */
}

/* Form container wrapper centering */
body[class*="new-request"] .form,
body[class*="new-request"] #new-request-form,
.new-request-page .form,
.new-request-page #new-request-form {
  text-align: center;
}

/* Button container centering - ENHANCED */
body[class*="new-request"] .form-field:last-child,
body[class*="new-request"] .button-container,
body[class*="new-request"] .form-actions,
body[class*="new-request"] [data-garden-id="forms.form_field"]:last-child,
body[class*="new-request"] [data-garden-id="forms.field"]:last-child,
.new-request-page .form-field:last-child,
.new-request-page .button-container,
.new-request-page .form-actions,
.new-request-page [data-garden-id="forms.form_field"]:last-child,
.new-request-page [data-garden-id="forms.field"]:last-child {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Universal button centering fallback (restricted to submit buttons) */
body[class*="new-request"] div:has(button[type="submit"]),
body[class*="new-request"] div:has(input[type="submit"]),
.new-request-page div:has(button[type="submit"]),
.new-request-page div:has(input[type="submit"]) {
  text-align: center !important;
  width: 100% !important;
}

/* Force center only the submit button in form */
body[class*="new-request"] form button[type="submit"],
body[class*="new-request"] form input[type="submit"],
.new-request-page form button[type="submit"],
.new-request-page form input[type="submit"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

/* =============================================================================
   ULTRA-SPECIFIC OVERRIDES FOR JAVASCRIPT-CONTROLLED STYLES
   =============================================================================
   
   Restricted to submit buttons only to avoid affecting editor toolbars.
============================================================================= */

/* Target Zendesk Garden Button components specifically (submit only) */
body[class*="new-request"] [data-garden-id="buttons.button"][type="submit"],
body[class*="new-request"] input[type="submit"][data-garden-id],
.new-request-page [data-garden-id="buttons.button"][type="submit"] {
  background-color: #FF1477 !important;
  background: #FF1477 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  display: block !important;
  margin: 50px auto 30px auto !important;
  text-align: center !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
  max-width: none !important;
  height: auto !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Hover states (submit only) - green bg/black text */
body[class*="new-request"] [data-garden-id="buttons.button"][type="submit"]:hover,
.new-request-page [data-garden-id="buttons.button"][type="submit"]:hover,
body[class*="new-request"] input[type="submit"]:hover,
.new-request-page input[type="submit"]:hover {
  background-color: #00FF7E !important;
  background: #00FF7E !important;
  color: black !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
}

/* Inline style override using style attribute (submit only) */
body[class*="new-request"] button[type="submit"][style],
body[class*="new-request"] input[type="submit"][style],
.new-request-page button[type="submit"][style],
.new-request-page input[type="submit"][style] {
  background: #FF1477 !important;
  color: white !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  display: block !important;
  margin: 50px auto 30px auto !important;
  text-align: center !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transition: all 0.3s ease !important;
}


/* =============================================================================
   SUBMIT BUTTON HOVER EFFECTS - SUBTLE INTERACTION
   =============================================================================
   
   Provides subtle hover feedback without overwhelming the clean design.
   Uses a slightly lighter black (#333) to indicate interactivity.
============================================================================= */
.request-form input[type="submit"]:hover,
.request-form .button-large:hover,
.new-request-page input[type="submit"]:hover,
.new-request-page .button-large:hover,
body[class*="new-request"] input[type="submit"]:hover,
body[class*="new-request"] .button-large:hover {
  background: #00FF7E !important;
  color: black !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =============================================================================
   FORM HELP TEXT - SUBTLE GUIDANCE
   =============================================================================
   
   Styles descriptive text that appears under form fields to provide
   additional guidance to users without overwhelming the form.
============================================================================= */
.request-form .form-field p,
.new-request-page .form-field p,
body[class*="new-request"] .form-field p {
  color: #666;          /* Medium gray for subtle appearance */
  font-size: 13px;      /* Small text size */
  margin-top: 5px;      /* Small gap above help text */
  font-style: italic;   /* Italic to distinguish from main text */
}

/* =============================================================================
   MAIN FORM CONTAINER - THE SIGNATURE 3D GREEN SHADOW
   =============================================================================
   
   This is the primary visual container that creates the Storm Lancers theme's
   signature 3D green shadow effect. Only ONE container should have this styling
   to avoid nested boxes and visual confusion.
   
   KEY FEATURES:
   - Subtle pink-to-green gradient background (5% opacity)
   - Light pink border for definition
   - 16px offset ACID green shadow (the signature element)
   - Rounded corners (18px) for modern feel
   - Generous internal padding for comfortable form experience
   
   TECHNICAL NOTES:
   - Uses multiple selectors to ensure broad compatibility
   - !important declarations override Zendesk's default container styles
   - Max-width prevents form from becoming too wide on large screens
============================================================================= */
/* SPECIFIC selectors for NEW REQUEST PAGE ONLY - no main page impact */
/* Main container with green shadow */
.new-request-page .container,               /* Container within new request page */
body[class*="new-request"] .container,      /* Container with new-request body class */
body.new_request .container,                /* Alternative body class */
body.new_request_page .container,           /* Alternative page body class */
/* Additional specific selectors for form container */
body[class*="new-request"] main .container,
body.new-request main .container,
body.new-request-page main .container {
  
  /* === SPACING AND DIMENSIONS === */
  padding: 60px 5% !important;              /* Generous internal padding */
  max-width: 800px !important;              /* Reasonable maximum width */
  margin: 0 auto !important;                /* Center horizontally */
  
  /* === VISUAL STYLING === */
  background: transparent !important;                  /* Clean transparent background */
  /* Remove gradient background to keep form clean */
  
  border: none !important;                           /* Remove pink border */
  border-radius: 18px !important;           /* Rounded corners */
  
  /* === THE SIGNATURE 3D GREEN SHADOW === */
  box-shadow: 1rem 1rem #00FF7E !important; /* 16px offset green shadow - theme signature */
  
  /* === POSITIONING === */
  position: relative !important;            /* For pseudo-element positioning */
  overflow: hidden !important;              /* Contain internal elements */
}

/* =============================================================================
   ADDITIONAL FORM CONTAINER TARGETING - ENSURE GREEN SHADOW
   =============================================================================
   
   Extra selectors to catch the form container in case the above miss it.
============================================================================= */

/* Target the container div that wraps the form - REMOVED OVERLY BROAD SELECTORS */
/* Removed selectors that were applying green shadow to ALL request pages */
/* Only new request pages should have the green shadow */

/* Universal fallback for any page with submit form - REMOVED OVERLY BROAD SELECTORS */
/* Removed selectors that were applying green shadow to ALL containers with submit forms */
/* Only new request form containers should have the green shadow */

/* =============================================================================
   BREADCRUMBS FALLBACK STYLING
   =============================================================================
   
   Provides fallback styling for breadcrumbs that might appear despite
   the hiding rules above. Centers them and provides appropriate spacing.
============================================================================= */
.request-form .breadcrumbs,
.new-request-page .breadcrumbs,
body[class*="new-request"] .breadcrumbs {
  justify-content: center; /* Center breadcrumbs if they appear */
  margin-bottom: 40px;     /* Space below breadcrumbs */
}

/* #############################################################################
   RESPONSIVE DESIGN - MOBILE OPTIMIZATION
   #############################################################################
   
   Adapts the form layout for smaller screens while maintaining the theme's
   visual impact and usability. The responsive design ensures the oversized
   submit button remains prominent but usable across all device sizes.
   
############################################################################# */

/* =============================================================================
   TABLET AND SMALL DESKTOP (768px and below)
   =============================================================================
   
   Optimizes spacing and sizing for medium-sized screens like tablets
   and small laptops.
============================================================================= */
@media (max-width: 768px) {
  
  /* Adjust inner form spacing for medium screens */
  .request-form .form,
  .new-request-page .form,
  body[class*="new-request"] .form {
    padding: 30px 20px;     /* Reduced padding for smaller screens */
    margin: 0 10px;         /* Small horizontal margins */
  }
  
  /* Adjust main container padding for efficient space usage */
  .request-form,
  .new-request-page,
  body[class*="new-request"] .container {
    padding: 40px 3% !important; /* Less padding to use screen space efficiently */
  }
}

/* =============================================================================
   MOBILE PHONES (480px and below)
   =============================================================================
   
   Optimizes the form for mobile devices with special attention to the
   submit button sizing to maintain prominence while ensuring usability.
============================================================================= */
@media (max-width: 480px) {
  
  /* Minimal padding for mobile screens */
  .request-form .form,
  .new-request-page .form,
  body[class*="new-request"] .form {
    padding: 25px 15px;     /* Minimal padding for mobile */
    margin: 0 5px;          /* Very small margins */
  }
  
  /* === MOBILE SUBMIT BUTTON SIZING === */
  /* Keeps the button large and prominent but not overwhelming on mobile */
  .request-form input[type="submit"],
  .request-form .button-large,
  .new-request-page input[type="submit"],
  .new-request-page .button-large,
  body[class*="new-request"] input[type="submit"],
  body[class*="new-request"] .button-large {
    font-size: 28px !important;        /* Scaled down but still prominent */
    padding: 24px 40px !important;     /* Proportionally smaller padding */
    min-width: 280px !important;       /* Appropriate width for mobile */
  }
}

/* #############################################################################
   ACCESSIBILITY - REDUCED MOTION SUPPORT
   #############################################################################
   
   Respects user preferences for reduced motion, which is important for
   users with vestibular disorders or those who prefer minimal animations.
   This media query removes transitions and transform effects when requested.
   
############################################################################# */
@media (prefers-reduced-motion: reduce) {
  
  /* Remove all smooth transitions for users who prefer reduced motion */
  .request-form .form,
  .request-form input[type="submit"],
  .request-form .button-large,
  .new-request-page .form,
  .new-request-page input[type="submit"],
  .new-request-page .button-large,
  body[class*="new-request"] .form,
  body[class*="new-request"] input[type="submit"],
  body[class*="new-request"] .button-large {
    transition: none; /* No smooth transitions */
  }
  
  /* Remove any transform effects on hover */
  .request-form input[type="submit"]:hover,
  .request-form .button-large:hover,
  .new-request-page input[type="submit"]:hover,
  .new-request-page .button-large:hover,
  body[class*="new-request"] input[type="submit"]:hover,
  body[class*="new-request"] .button-large:hover {
    transform: none; /* No movement on hover */
  }
}


/* #############################################################################
   ADDITIONAL STORM LANCERS THEME ENHANCEMENTS
   #############################################################################
   
   Extra styling to ensure the form fully embodies the Storm Lancers spirit
   with gaming aesthetic elements and enhanced visual hierarchy.
   
############################################################################# */

/* =============================================================================
   FORM TITLE ENHANCEMENT - STORM LANCERS GAMING AESTHETIC
   =============================================================================
   
   Adds subtle text effects and enhanced styling to make the form title
   more impactful while maintaining readability.
============================================================================= */
/* Enhanced title styling for NEW REQUEST PAGE only */
.new-request-page h1,
body[class*="new-request"] h1 {
  /* Enhanced title styling for gaming aesthetic - NEW REQUEST PAGE ONLY */
  position: relative;
  text-transform: uppercase;                       /* Uppercase for tactical/military feel */
  letter-spacing: 1px;                            /* Slight letter spacing for impact */
  margin-bottom: 40px !important;                 /* More space below title */
  
  /* Subtle text shadow for depth */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add a subtle underline accent in Storm Lancers colors - NEW REQUEST PAGE ONLY */
.new-request-page h1::after,
body[class*="new-request"] h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff1477, #00FF7E);
  margin: 15px auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(255, 20, 119, 0.3);
}

/* =============================================================================
   ENHANCED FORM FIELD STYLING - GAMING UI ELEMENTS
   =============================================================================
   
   Adds subtle enhancements to form fields to match gaming UI conventions
   while maintaining usability and accessibility.
============================================================================= */

/* Add subtle hover effects to form inputs */
.request-form .form-field input:hover,
.request-form .form-field textarea:hover,
.request-form .form-field select:hover,
.new-request-page .form-field input:hover,
.new-request-page .form-field textarea:hover,
.new-request-page .form-field select:hover,
body[class*="new-request"] .form-field input:hover,
body[class*="new-request"] .form-field textarea:hover,
body[class*="new-request"] .form-field select:hover {
  border-color: rgba(255, 20, 119, 0.4);          /* Light pink hover state */
  transform: translateY(-1px);                     /* Subtle lift effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);      /* Subtle shadow on hover */
}

/* Enhanced required field indicators */
.request-form .form-field label.required::after,
.new-request-page .form-field label.required::after,
body[class*="new-request"] .form-field label.required::after,
.request-form .form-field label[aria-required="true"]::after,
.new-request-page .form-field label[aria-required="true"]::after,
body[class*="new-request"] .form-field label[aria-required="true"]::after {
  content: " *";
  color: #ff1477;                                 /* Storm Lancers pink */
  font-weight: bold;
  margin-left: 3px;
}

/* =============================================================================
   CONTAINER ENHANCEMENTS - ADDITIONAL STORM LANCERS ELEMENTS
   =============================================================================
   
   Adds extra visual elements to reinforce the Storm Lancers theme
   without overwhelming the form usability.
============================================================================= */

/* Add subtle corner accents to the NEW REQUEST PAGE container only */
.new-request-page .container::before,
body[class*="new-request"] .container::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
  border-top: 2px solid #00FF7E;
  border-left: 2px solid #00FF7E;
  z-index: 1;
}

.new-request-page .container::after,
body[class*="new-request"] .container::after {
  content: "";
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #ff1477;
  border-right: 2px solid #ff1477;
  z-index: 1;
}

/* =============================================================================
   LOADING AND ERROR STATES - STORM LANCERS STYLING
   =============================================================================
   
   Ensures any loading indicators or error messages match the theme.
============================================================================= */

/* Error message styling */
.request-form .notification-error,
.new-request-page .notification-error,
body[class*="new-request"] .notification-error,
.request-form .error,
.new-request-page .error,
body[class*="new-request"] .error {
  border-left: 4px solid #ff1477 !important;     /* Storm Lancers pink accent */
  background: rgba(255, 20, 119, 0.05) !important;
  border-radius: 8px;
}

/* Success message styling */
.request-form .notification-notice,
.new-request-page .notification-notice,
body[class*="new-request"] .notification-notice,
.request-form .success,
.new-request-page .success,
body[class*="new-request"] .success {
  border-left: 4px solid #00FF7E !important;     /* Storm Lancers green accent */
  background: rgba(0, 255, 126, 0.05) !important;
  border-radius: 8px;
}

/* Loading spinner customization */
.request-form .loading,
.new-request-page .loading,
body[class*="new-request"] .loading {
  border-color: #00FF7E rgba(0, 255, 126, 0.2) rgba(0, 255, 126, 0.2) rgba(0, 255, 126, 0.2);
}

/* #############################################################################
   FALLBACK STYLING - ENSURE THEME ADOPTION
   #############################################################################
   
   Additional fallback rules to ensure the Storm Lancers theme is applied
   even if the primary selectors don't match due to dynamic content loading.
   
############################################################################# */

/* Specific fallback ONLY for new request page containers */
body[class*="new-request"] [id*="request"] .container,
body[class*="new-request"] [class*="request"] .container,
.new-request-page [id*="request"] .container,
.new-request-page [class*="request"] .container {
  /* Ensure green shadow appears on new request page containers only */
  box-shadow: 1rem 1rem #00FF7E !important;
  border: 1px solid rgba(255, 20, 119, 0.2) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 20, 119, 0.05) 0%, rgba(0, 255, 126, 0.05) 100%) !important;
  position: relative !important;
}

/* Ensure form buttons get proper styling ONLY on new request page */
body[class*="new-request"] button,
.new-request-page button,
body[class*="new-request"] .container button[type="submit"],
body[class*="new-request"] .container input[type="submit"],
.new-request-page .container button[type="submit"],
.new-request-page .container input[type="submit"] {
  /* Apply Storm Lancers button styling as fallback - NEW REQUEST PAGE ONLY */
  font-family: 'sheepman', sans-serif !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

/* Primary action buttons get the black treatment - NEW REQUEST PAGE ONLY */
body[class*="new-request"] button[type="submit"],
body[class*="new-request"] .button-primary,
.new-request-page button[type="submit"],
.new-request-page .button-primary {
  background: #000 !important;
  color: white !important;
  font-size: 24px !important;
  padding: 18px 30px !important;
  min-width: 200px !important;
}

/* ######################################
   STORM LANCERS REQUEST PAGE DISPLAY ENHANCEMENTS
   ######################################
   
   Enhanced styling for the request display page (not the form)
   with Storm Lancers gaming theme, improved blocks and readability.
   
============================================================================= */

/* =============================================================================
   REQUEST PAGE CONTAINER - Gaming Theme Layout
   =============================================================================
   Enhanced container styling for the request page with Storm Lancers theme.
============================================================================= */

/* REMOVED: .request-container styling that was affecting ALL request pages */
/* This styling was adding unwanted borders and background to request viewing pages */
/* Only new request form pages should have enhanced container styling */

/* =============================================================================
   REQUEST TITLE - Storm Lancers Branding
   =============================================================================
   Enhanced title styling with gaming aesthetic and proper hierarchy.
============================================================================= */

.request-title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 30px !important;
  padding: 0 40px 20px 40px !important;
  border-bottom: 2px solid #000 !important; /* Changed to black */
  position: relative !important;
  text-align: center !important; /* Center the title */
}

.request-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%; /* Center the accent line */
  transform: translateX(-50%); /* Center the accent line */
  width: 80px;
  height: 2px;
  background: #000; /* Changed to black */
}

/* =============================================================================
   REQUEST MAIN CONTENT - Block-Based Layout
   =============================================================================
   Enhanced styling for comments, forms, and content blocks.
============================================================================= */

.request-main {
  padding: 0 40px 40px 40px !important;
}

/* Comment List Styling - Gaming Card Aesthetic */
.comment-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* REMOVED: Enhanced comment styling that was adding green borders and heavy styling */
/* Comments will now use the default Zendesk styling for clean appearance */

/* REMOVED: Comment hover effects */

/* REMOVED: Comment author and avatar enhanced styling */
/* Using default Zendesk styling for clean appearance */

/* REMOVED: Comment meta styling */
/* Using default Zendesk styling for clean appearance */

/* REMOVED: Comment body enhanced styling */
/* Using default Zendesk styling for clean appearance */

/* =============================================================================
   CLEAN COMMENT CONTAINER STYLING
   =============================================================================
   Simple black outline for comment containers
============================================================================= */

.comment {
  border: 1px solid #000 !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;
  padding: 16px !important;
}

.comment:hover {
  border-color: #333 !important;
}

/* =============================================================================
   REQUEST SIDEBAR - Gaming Info Panel
   =============================================================================
   Enhanced sidebar with block-based info display and Storm Lancers theme.
============================================================================= */

.request-sidebar {
  background: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 40px !important;
}

/* REMOVED: Green top border from sidebar */

.request-sidebar h2 {
  font-family: 'sheepman', sans-serif !important;
  font-size: 24px !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #000 !important;
}

/* Request Details - Gaming Info Cards */
.request-details {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  border: 1px solid #000 !important;
  transition: all 0.3s ease !important;
}

.request-details:hover {
  background: #fff !important;
  border-color: #000 !important;
  transform: translateY(-1px) !important;
}

.request-details dt {
  font-family: 'sheepman', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
  width: 100% !important;
}

.request-details dd {
  font-size: 14px !important;
  color: #333 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

.request-details dd:last-child {
  margin-bottom: 0 !important;
}

/* Status Labels - Gaming Style Badges */
.status-label {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.status-label-new {
  background: #00FF7E !important;
  color: #000 !important;
  border-color: #00FF7E !important;
}

.status-label-open {
  background: #00FF7E !important;
  color: #000 !important;
  border-color: #00FF7E !important;
}

.status-label-pending {
  background: #fbbf24 !important;
  color: #000 !important;
  border-color: #fbbf24 !important;
}

.status-label-solved {
  background: #10b981 !important;
  color: white !important;
  border-color: #10b981 !important;
}

.status-label-closed {
  background: #6b7280 !important;
  color: white !important;
  border-color: #6b7280 !important;
}

/* =============================================================================
   COMMENT FORM - Enhanced Input Styling
   =============================================================================
   Styled comment form with Storm Lancers gaming theme.
============================================================================= */

.comment-form {
  border: 1px solid #000 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

/* REMOVED: Green accent bar from comment form */

.comment-container {
  padding-left: 16px !important;
}

/* Comment Input Styling */
.comment-form textarea {
  border: 1px solid #87929D !important;
  border-radius: 4px !important;
  padding: 10px !important;
}

.comment-form textarea:focus {
  border-color: #000 !important;
}

/* Comment Form Controls - Cleaned up styling */
.comment-form-controls {
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Submit Button in Comment Form - Smaller, cleaner styling */
.comment-form-controls input[type="submit"],
.comment-form-controls .button {
  background: #000 !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.comment-form-controls input[type="submit"]:hover,
.comment-form-controls .button:hover {
  background: #00FF7E !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 255, 126, 0.3) !important;
}

/* =============================================================================
   OVERRIDE LARGE BUTTON STYLING ON REQUEST PAGES
   =============================================================================
   Ensures request page submit buttons are normal size, not the huge new-request style
============================================================================= */

/* Target request page submit buttons specifically to override large styling */
.request-page .comment-form input[type="submit"],
.request-container .comment-form input[type="submit"],
.request-main .comment-form input[type="submit"],
.request-main input[type="submit"],
.request-main .request-submit-comment input[type="submit"],
body:not([class*="new-request"]) .comment-form input[type="submit"],
body:not([class*="new-request"]) .comment-form .button,
body:not([class*="new-request"]) input[type="submit"],
body:not(.new-request) .comment-form input[type="submit"],
body:not(.new-request) .comment-form .button,
body:not(.new-request) input[type="submit"],
.comment-form input[type="submit"],
.comment-form .button,
.comment-form-controls input[type="submit"],
.request-submit-comment {
  /* Override the large button styling */
  font-size: 14px !important;
  padding: 8px 16px !important;
  min-width: auto !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  border-radius: 4px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  display: inline-block !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* More specific targeting for any submit button in comment sections */
.comment-list input[type="submit"],
.comment-list .button,
.comment input[type="submit"],
.comment .button,
#main-content input[type="submit"]:not(.new-request input[type="submit"]),
body .request-main input[type="submit"] {
  font-size: 14px !important;
  padding: 8px 16px !important;
  min-width: auto !important;
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 4px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* Mark as Solved Button */
.mark-as-solved {
  background: #10b981 !important;
  color: white !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 12px 24px !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.mark-as-solved:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

/* =============================================================================
   ATTACHMENTS - Gaming Style File Display
   =============================================================================
   Enhanced attachment styling with Storm Lancers theme.
============================================================================= */

.attachments {
  background: rgba(248, 250, 252, 0.8) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  border: 1px solid #000 !important;
}

.attachment-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  transition: all 0.3s ease !important;
  border: 1px solid #000 !important;
}

.attachment-item:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #000 !important;
  transform: translateX(4px) !important;
}

.attachment-icon {
  color: #00FF7E !important;
  width: 20px !important;
  height: 20px !important;
}

.attachment-item a {
  color: #000 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  flex: 1 !important;
}

.attachment-item a:hover {
  color: #00FF7E !important;
  text-decoration: underline !important;
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile Optimization
   =============================================================================
   Mobile-first responsive design for request pages.
============================================================================= */

@media (max-width: 1024px) {
  .request-container {
    flex-direction: column !important;
  }
  
  .request-main {
    padding: 20px !important;
  }
  
  .request-sidebar {
    margin-top: 32px !important;
    padding: 24px !important;
  }
  
  .request-title {
    font-size: 24px !important;
    padding: 0 20px 20px 20px !important;
  }
}

@media (max-width: 768px) {
  .request-container {
    margin: 20px 0 !important;
    border-radius: 16px !important;
  }
  
  .comment {
    margin: 16px 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  
  .comment-form {
    padding: 20px !important;
    border-radius: 16px !important;
  }
  
  .request-sidebar {
    padding: 16px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 480px) {
  .request-title {
    font-size: 20px !important;
    padding: 0 16px 16px 16px !important;
  }
  
  .request-main {
    padding: 16px !important;
  }
  
  .comment {
    padding: 12px !important;
  }
  
  .comment-form-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
}

/* =============================================================================
   BREADCRUMBS ENHANCEMENT - Gaming Navigation
   =============================================================================
   Enhanced breadcrumb styling with Storm Lancers theme.
============================================================================= */

.request-breadcrumbs {
  margin-bottom: 32px !important;
  padding: 16px 0 !important;
}

.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #666 !important;
}

.breadcrumbs a {
  color: #00FF7E !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.breadcrumbs a:hover {
  background: rgba(0, 255, 126, 0.1) !important;
  color: #000 !important;
  text-decoration: none !important;
}

.breadcrumbs > span {
  color: #999 !important;
  margin: 0 4px !important;
}

/* =============================================================================
   REQUEST LIST ENHANCEMENTS - Gaming Table Style
   =============================================================================
   Enhanced styling for requests list with Storm Lancers gaming theme.
============================================================================= */

.requests {
  margin-top: 32px !important;
}

.requests-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  background: transparent !important;
}

.requests-table thead th {
  background: rgba(0, 255, 126, 0.1) !important;
  border: none !important;
  padding: 16px 20px !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #000 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.requests-table thead th:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.requests-table thead th:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.requests-table tbody tr {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 8px !important;
}

.requests-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.requests-table tbody td {
  border: none !important;
  padding: 20px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: none !important;
}

.requests-table tbody td:first-child {
  border-left: 3px solid #00FF7E !important;
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.requests-table tbody td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Request Link Styling */
.requests-table .requests-link a {
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.requests-table .requests-link a:hover {
  color: #00FF7E !important;
  text-decoration: none !important;
}

/* Request Meta Information */
.requests-table .meta-data {
  color: #666 !important;
  font-size: 13px !important;
}

/* =============================================================================
   PAGINATION ENHANCEMENT - Gaming Style Navigation
   =============================================================================
   Enhanced pagination styling with Storm Lancers theme.
============================================================================= */

.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 40px 0 !important;
  padding: 20px 0 !important;
}

.pagination a,
.pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 2px solid #000 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #333 !important;
}

.pagination a:hover {
  background: #00FF7E !important;
  color: #000 !important;
  border-color: #00FF7E !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 255, 126, 0.3) !important;
}

.pagination .current {
  background: #00FF7E !important;
  color: #000 !important;
  border-color: #00FF7E !important;
  box-shadow: 0 4px 12px rgba(0, 255, 126, 0.3) !important;
}

/* ######################################
   END OF STORM LANCERS REQUEST PAGE ENHANCEMENTS
   ######################################
   
   COMPREHENSIVE SUMMARY OF WHAT WAS ACCOMPLISHED:

   1. REQUEST PAGE DISPLAY ENHANCEMENTS:
      - Enhanced request container with signature 3D green shadow
      - Gaming-themed comment blocks with hover effects
      - Improved sidebar with info cards and status badges
      - Storm Lancers branded typography throughout
   
   2. FORM ELEMENTS:
      - Enhanced comment form with gaming aesthetic
      - Improved input styling with pink focus states
      - Gaming-style submit and action buttons
   
   3. VISUAL HIERARCHY:
      - Clear block-based layout for improved readability
      - Consistent color scheme (pink accents, green shadows)
      - Responsive design for all screen sizes
   
   4. ADDITIONAL ENHANCEMENTS:
      - Gaming-style breadcrumbs navigation
      - Enhanced request list table with card-like rows
      - Storm Lancers themed pagination
      - Improved attachment display
   
   5. MOBILE OPTIMIZATION:
      - Responsive breakpoints for mobile, tablet, desktop
      - Touch-friendly button sizing
      - Optimized spacing for small screens

   ######################################
   END OF STORM LANCERS NEW REQUEST PAGE STYLING
   ######################################
   
   COMPREHENSIVE SUMMARY OF WHAT WAS ACCOMPLISHED:

   1. NAVIGATION CLEANUP:
      - Hidden search container and breadcrumbs for focused experience
   
   2. FORM CONTAINER ARCHITECTURE:
      - Single main container with signature 3D green shadow
      - Enhanced selectors for comprehensive coverage
      - No nested boxes or duplicate shadows
      - Subtle pink-to-green gradient background
      - Corner accents in Storm Lancers colors
   
   3. FORM ELEMENTS:
      - Branded Sheepman font throughout
      - Rounded input fields with pink focus and hover states
      - Enhanced required field indicators
      - Proper spacing and visual hierarchy
      - Gaming-inspired UI hover effects
   
   4. FORM TITLE:
      - Uppercase transformation for tactical feel
      - Subtle text shadow for depth
      - Gradient underline accent in theme colors
      - Enhanced letter spacing
   
   5. SUBMIT BUTTON (CENTERPIECE):
      - 3x larger than normal (42px font, 36px/60px padding)
      - Pure black background with white Sheepman text
      - Centered with pill shape (50px border radius)
      - Maximum CSS specificity to override competing styles
      - Responsive sizing for mobile devices
   
   6. RESPONSIVE DESIGN:
      - Tablet optimization (768px breakpoint)
      - Mobile optimization (480px breakpoint) 
      - Button scales appropriately but remains prominent
      - Enhanced mobile interactions
   
   7. ACCESSIBILITY:
      - Reduced motion support
      - Proper focus states with high contrast
      - Enhanced error and success message styling
      - Screen reader friendly enhancements
   
   8. THEME REINFORCEMENT:
      - Error/success messages in theme colors
      - Loading states match theme
      - Fallback selectors ensure theme adoption
      - Corner accents add gaming aesthetic
   
   The result is a fully immersive, branded form experience that embodies
   the Storm Lancers gaming aesthetic while maintaining excellent usability,
   accessibility, and conversion optimization.
   
############################################################################# */

/* =============================================================================
   FINAL OVERRIDE - ABSOLUTE LAST RULE FOR MAXIMUM PRIORITY
   This is placed at the very end of the CSS file to ensure it takes precedence
============================================================================= */

/* Ultimate submit button override - submit-only selectors for safety */

/* Super specific selector for submit buttons only */
#new-request-form button[type="submit"],
#new-request-form input[type="submit"],
.container .form button[type="submit"],
.container .form input[type="submit"],
.container #new-request-form button[type="submit"],
.container #new-request-form input[type="submit"] {
  background-color: #000 !important;
  background: #000 !important;
  color: #fff !important;
  font-family: 'sheepman', sans-serif !important;
  font-size: 30px !important;
  padding: 20px 42px !important;
  border-radius: 50px !important;
  border: none !important;
  min-width: 300px !important;
  width: auto !important;
  max-width: 90% !important;
  height: auto !important;
  display: block !important;
  margin: 50px auto 30px auto !important;
  text-align: center !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  transition: all 0.3s ease !important;
}

/* Hover state with maximum specificity - green bg/black text */
#new-request-form button[type="submit"]:hover,
#new-request-form input[type="submit"]:hover,
.container .form button[type="submit"]:hover,
.container .form input[type="submit"]:hover {
  background-color: #00FF7E !important;
  background: #00FF7E !important;
  color: black !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =============================================================================
   FINAL OVERRIDE: FIX HUGE SUBMIT BUTTON ON REQUEST PAGES
   =============================================================================
   This MUST be at the END of the CSS file for maximum specificity
============================================================================= */

/* Ultimate override for request page submit buttons - ONLY INPUT elements */
body .request-main input[type="submit"],
body .comment-form input[type="submit"],
body .comment-form-controls input[type="submit"],
body .request-submit-comment input[type="submit"],
body input[type="submit"]:not(.new-request-page input[type="submit"]):not(body[class*="new-request"] input[type="submit"]) {
  font-size: 14px !important;
  padding: 10px 20px !important;
  min-width: unset !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.5 !important;
  border-radius: 4px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  margin: 10px 0 0 0 !important;
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Container elements should be transparent */
body .request-submit-comment,
body .request-submit-comment.shown {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}

/* Hover state for request page submit buttons - black to green bg, white to black text */
body .request-main input[type="submit"]:hover,
body .comment-form input[type="submit"]:hover,
body .comment-form-controls input[type="submit"]:hover,
body input[type="submit"]:hover:not(.new-request-page input[type="submit"]):not(body[class*="new-request"] input[type="submit"]) {
  background-color: #00FF7E !important;  /* Green background on hover */
  color: #000 !important;                /* Black text on hover */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 255, 126, 0.3) !important;
  transition: all 0.3s ease !important;
}

/* Ensure the container span doesn't get hover styles */
body .request-submit-comment:hover {
  background: transparent !important;
  border: none !important;
}

/* Hide any extra submit button elements that might be showing as black bars */
.request-submit-comment.shown {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure wrapper elements stay transparent */
.request-submit-comment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Clean up the mark as solved button if present */
.mark-as-solved {
  display: none !important;
}

/* =============================================================================
   COMMUNITY PAGE HEADER FONT STYLING - SHEEPMAN FONT
   =============================================================================
   Custom font styling using Sheepman font for community page headers
   to match the home page styling and brand consistency
============================================================================= */

/* Community page main headers */
.community-header h2.title,
.community-header .title,
.page-header.community-header h2,
.page-header.community-header .title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 32px !important;
  font-weight: normal !important;
}

/* Community footer titles */
.community-footer-title,
h2.community-footer-title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 24px !important;
  font-weight: normal !important;
}

/* Featured posts section headers */
.community-featured-posts .title,
.community-featured-posts h2.title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 22px !important;
  font-weight: normal !important;
}

/* Community activity headers */
.community-activity h2,
.activity h2 {
  font-family: 'sheepman', sans-serif !important;
  font-size: 20px !important;
  font-weight: normal !important;
}

/* General community headings to ensure consistency */
.community h1,
.community h2,
.community h3,
.community h4,
.community h5,
.community h6,
.community-header h1,
.community-header h2,
.community-header h3,
.community-header h4,
.community-header h5,
.community-header h6 {
  font-family: 'sheepman', sans-serif !important;
}

/* Main community page title - make it prominent like home page */
.page-header h1,
.community .page-header h1,
body[data-page-name*="community"] .page-header h1 {
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  font-weight: normal !important;
}

/* Community Topics main heading */
h1:contains("Community Topics"),
.page-header h1:contains("Topics") {
  font-family: 'sheepman', sans-serif !important;
  font-size: 50px !important;
  font-weight: normal !important;
}

/* Topic card titles in the blocks list */
.topics .blocks-item-title,
.topics-item .blocks-item-title,
.blocks-list .blocks-item-title {
  font-family: 'sheepman', sans-serif !important;
  font-size: 18px !important;
  font-weight: normal !important;
}

/* Community posts and links */
.community a,
.community-posts a,
.promoted-articles a {
  font-family: 'sheepman', sans-serif !important;
}

/* New post button */
.post-to-community .button,
.community-footer .button,
.community .button,
.community .button-large {
  font-family: 'sheepman', sans-serif !important;
  font-size: 18px !important;
  font-weight: normal !important;
}