/* Components */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');

html {
  font-family: 'Barlow', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  }
  article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: 0.67em 0;
  font-size: 2em;
  font-family: 'IBM Plex Sans', sans-serif;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre {
  display: block;
	background: #f1f1f1;
	padding: 1.33em;
	border-radius: 0.33em;
},
samp {
  font-family: monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
/* Reset the box-sizing */
*,
  *:before,
  *:after {
    box-sizing: border-box;
  }
html,
body {
  height: 100%;
}
/* Body reset */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #0F1113;
  background-color: #F4F2EC;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Reset fonts for relevant elements */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Links */
a {
  color: #0F1113;
  text-decoration: none;
}
a:hover,
  a:focus {
    text-decoration: underline;
  }
a.disabled {
    color: #818a91;
    cursor: default;
  }
figure {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 25px 0;
  border: 0;
  border-top: 1px solid rgba(188, 188, 200, 1);
}
/*
  Remove the gap between audio, canvas, iframes,
  images, videos and the bottom of their containers:
  https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  color: inherit;
  font-family: 'Graphik-semi', sans-serif;
  /* /*TO DO */
}
h1 {
  margin: 0 0 calc(14px * 1.4);
}
h2 {
  margin: 0 0 calc(14px * 1.4);
  font-size: 24px;
}
h3 {
  margin: 0 0 calc(14px * 1.4);
}
h4 {
  margin: 0 0 calc(14px * 1.4);
}
h5 {
  margin: 0 0 calc(14px * 1.4);
}
h6 {
  margin: 0 0 calc(14px * 1.4);
}
.h1 {
  margin: 0 0 calc(14px * 1.4);
}
.h2 {
  margin: 0 0 calc(14px * 1.4);
}
.h3 {
  margin: 0 0 calc(14px * 1.4);
}
.h4 {
  margin: 0 0 calc(14px * 1.4);
}
.h5 {
  margin: 0 0 calc(14px * 1.4);
}
.h6 {
  margin: 0 0 calc(14px * 1.4);
}
p {
  font-family: 'Graphik';
  margin: 0 0 calc(14px * 1.4);
}
ul {
  margin: 0 0 calc(14px * 1.4);
}
ol {
  margin: 0 0 calc(14px * 1.4);
}
h1 {
  font-size: calc(14px * 2.5);
}
.h1 {
  font-size: calc(14px * 2.5);
}

.h2 {
  font-size: calc(14px * 1.75 - 2px);
}
h3 {
  font-size: calc(14px * 1.5);
}
.h3 {
  font-size: calc(14px * 1.5);
}
h4 {
  font-size: calc(14px * 1.25);
}
.h4 {
  font-size: calc(14px * 1.25);
}
h5 {
  font-size: calc(14px * 1.1);
}
.h5 {
  font-size: calc(14px * 1.1);
}
h6 {
  font-size: calc(14px * 1);
}
.h6 {
  font-size: calc(14px * 1);
}
b {
  font-weight: 600;
}
strong {
  font-weight: 600;
}
small,
.small {
  font-size: 80%;
  font-weight: normal;
  line-height: 1;
}
/* Description Lists */
dl {
  margin-top: 0;
  margin-bottom: calc(14px * 1.4);
}
dt {
  margin-bottom: calc(14px * 1.4 / 2);
  line-height: 1.4;
}
dd {
  margin-bottom: calc(14px * 1.4 / 2);
  line-height: 1.4;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0; /* Undo browser default */
}
.dl-horizontal:before,
  .dl-horizontal:after {
    display: table;
    content: "";
  }
.dl-horizontal:after {
    clear: both;
  }
.dl-horizontal dt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
@media (min-width: 768px) {
.dl-horizontal dt {
      float: left;
      width: 30%;
      padding-right: 15px;
      clear: both
  }
    }
@media (min-width: 768px) {
.dl-horizontal dd {
      float: right;
      width: 70%
  }
    }
/* Abbreviations and acronyms */
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}
/* Blockquotes */
blockquote {
  padding: calc(14px * 1.4 / 2)
    calc(14px * 1.4);
  margin: 0 0 calc(14px * 1.4);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  background-color: #f6f7f8;
  border-left: 5px solid #eee;
}
blockquote.is-colored {
    border-left: 5px solid #0F1113;
  }
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
      margin-bottom: 0;
    }
/* Code */
code {
  padding: 20px !important;
  border-radius: 2px !important;
}
/* Addresses */
address {
  margin-bottom: calc(14px * 1.4);
  font-style: normal;
  line-height: 1.4;
}
.clearfix:before,
  .clearfix:after {
    display: table;
      content: "";
  }
.clearfix:after {
    clear: both;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.is-hidden,
.hidden,
.powered-by-zendesk {
  display: none !important;
}
/********
Forms
--------------------------------------------------
Normalize non-controls

Restyle and baseline non-control form elements.
*********/
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: calc(14px * 1.4);
  font-size: calc(14px * 1.5);
  line-height: inherit;
  color: #373a3c;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: calc(14px * 1.4 / 2);
  font-weight: 500;
  font-size: 16px;
  color: #121113;
}
/********
Normalize form controls

While most of our form styles require extra classes, some basic normalization
is required to ensure optimum display with or without those classes to better
address browser inconsistencies.
*********/
/* Override content-box in Normalize (* isn't specific enough) */
input[type="search"] {
  box-sizing: border-box;
}
/* Position radios and checkboxes better */
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px;
  line-height: normal;
}
/* Set the height of file controls to match text inputs */
input[type="file"] {
  display: block; 
}
/* Make range inputs behave like textual form controls */
input[type="range"] {
  display: block;
  width: 100%;
}
/* Make multiple select elements height not fixed */
select[multiple],
select[size] {
  height: auto;
}
/* Focus for file, radio, and checkbox */
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/* Adjust output element */
output {
  display: block;
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
}
/********
Common form controls

Shared size and type resets for form controls. Apply `.form-control` to any
of the following form controls:
********/
select {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="text"] {
  display: block;
  width: 100%;
  height: 40px;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="password"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="datetime"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="datetime-local"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="date"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="month"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="time"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="week"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="number"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="email"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="url"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="search"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="tel"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input[type="color"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.nesty-input {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 2px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .nesty-input:focus {
    border-color: #9ed5e7;
    outline: 0;
  }
select::-moz-placeholder, textarea::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder, .nesty-input::-moz-placeholder {
    color: #999;
    opacity: 1;
  }
select:-ms-input-placeholder, textarea:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="color"]:-ms-input-placeholder, .nesty-input:-ms-input-placeholder {
    color: #DFDFDF;
  }
select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .nesty-input::-webkit-input-placeholder {
    color: #BABABA;
  }
select {
  height: calc(14px * 1.4 + 14px);
}
textarea {
  height: 102px;
  resize: vertical;
}
/********
Search inputs in iOS

This overrides the extra rounded corners on search inputs in iOS so that our
`.form-control` class can properly style them. Note that this cannot simply
be added to `.form-control` as it's not specific enough. For details, see
https://github.com/twbs/bootstrap/issues/11586.
*******/
input[type="search"] {
  -webkit-appearance: none;
}
/********
Special styles for iOS temporal inputs

In Mobile Safari, setting `display: block` on temporal inputs causes the
text within the input to become vertically misaligned. As a workaround, we
set a pixel line-height that matches the given height of the input, but only
for Safari.
*******/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"] {
    line-height: calc(14px * 1.4 + 14px);
  }
  input[type="time"] {
    line-height: calc(14px * 1.4 + 14px);
  }
  input[type="datetime-local"] {
    line-height: calc(14px * 1.4 + 14px);
  }
  input[type="month"] {
    line-height: calc(14px * 1.4 + 14px);
  }
}
/********
Form groups

Designed to help with the organization and spacing of vertical forms. For
horizontal forms, use the predefined grid classes.
*******/
.form-field {
  margin-bottom: calc(14px * 1.4);
}
.form-field p {
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 90%;
    color: #BCBCC8;
  }
.form-field.required > label:after {
    margin-left: 2px;
    color: #ff5252;
    content: "*";
  }
.form-field.boolean {
  position: relative;
  padding-left: 20px;
}
.form-field.boolean input[type="checkbox"] {
    position: absolute;
    left: 0;
  }
.form-field.boolean label {
    min-height: calc(14px * 1.4);
    margin-bottom: 0;
    cursor: pointer;
  }
#request_anonymous_requester_email{
  width: 250px;
}
#request_subject{
  width: 250px;
}
/* temporary field untill QA environment allows field name changing*/
#request_custom_fields_360052840874{
  width: 250px;
}
/********
Apply same disabled cursor tweak as for inputs
Some special care is needed because <label>s don't inherit their parent's `cursor`.

Note: Neither radios nor checkboxes can be readonly.
*******/
input[type="radio"][disabled],
  input[type="radio"].disabled,
  fieldset[disabled] input[type="radio"],
  input[type="checkbox"][disabled],
  input[type="checkbox"].disabled,
  fieldset[disabled] input[type="checkbox"] {
    cursor: not-allowed;
  }
/********
Help text

Apply to any element you wish to create light text for placement immediately
below a form control. Use for general help, formatting, or instructional text.
********/
.help-block {
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 90%;
  color: #47515a;
}
.btn {
  display: inline-block;
  padding: 10px
    calc(12px + 12px / 2);
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  touch-action: manipulation;
}
[role="button"] {
  display: inline-block;
  padding: 10px
    calc(12px + 12px / 2);
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  touch-action: manipulation;
}
input[type="submit"] {
  display: inline-block;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  touch-action: manipulation;
  width: 150px;
  height: fit-content;
  margin-top: 10px;
}
.btn:focus, .btn:active:focus, [role="button"]:focus, [role="button"]:active:focus, input[type="submit"]:focus, input[type="submit"]:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.btn:hover,
  .btn:focus,
  [role="button"]:hover,
  [role="button"]:focus,
  input[type="submit"]:hover,
  input[type="submit"]:focus {
    text-decoration: none;
  }
.btn--disable{
  background-color: #BCBCC8;
}
.btn:active, [role="button"]:active, input[type="submit"]:active {
    outline: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
[role="button"] {
  color: #fff;
  background-color: #0F1113;
  border-color: #0F1113;
}
[role="button"]:hover,
  [role="button"]:focus,
  [role="button"]:active {

  }
[role="button"]:active:focus {
    outline: none;
  }
/* Alternate buttons */
.btn--default,
.section-subscribe .dropdown-toggle,
.article-subscribe,
.article-unsubscribe,
input[type="submit"],
button[type="button"] {
  color: #fff;
  border : 1px solid #0064FF;
  background-color: #0F1113;
  border-color: #0F1113;
  border-radius: 100px;
  display: inline-block;
  padding: 10px 30px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  font-family:'Graphik'
}
.btn--default:hover,
  .btn--default:focus,
  .btn--default:active,
  .section-subscribe .dropdown-toggle:hover,
  .section-subscribe .dropdown-toggle:focus,
  .section-subscribe .dropdown-toggle:active,
  .article-subscribe:hover,
  .article-subscribe:focus,
  .article-subscribe:active,
  .article-unsubscribe:hover,
  .article-unsubscribe:focus,
  .article-unsubscribe:active,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="submit"]:active {
    color: #0064FF;
    background-color: white;
    border-color: #0064FF !important;
  }
.btn--primary {
  color: #fff;
  background-color: #0064FF;
  border-color: #0064FF;
  border: 1px solid  #0064FF;
}
.btn--primary:hover,
  .btn--primary:focus,
  .btn--primary:active {
    color:  #0064FF;
    background-color: white;
    border-color:  #0064FF;
  }
/* Success appears as green */
.btn--success {
  color: #fff;
  background-color: #504d7f;
  border-color: #46436f;
}
.btn--success:hover,
  .btn--success:focus,
  .btn--success:active {
    color: #e0e0e0;
    background-color: #3c3a5f;
    border-color: #2e2c49;
  }
/* Warning appears as orange */
.btn--warning {
  color: $brand-warning;
  background-color: transparent;
  border-color: darken($brand-warning, 5%);
}
.btn--warning:hover,
  .btn--warning:focus,
  .btn--warning:active {
    color: darken($brand-warning, 12%);
    background-color: darken(transparent, 10%);
    border-color: darken($brand-warning, 17%);
  }
/* Danger and error appear as red */
.btn--danger {
  color: #fff;
  background-color: #ff5252;
  border-color: #ff3939;
}
.btn--danger:hover,
  .btn--danger:focus,
  .btn--danger:active {
    color: #e0e0e0;
    background-color: #ff1f1f;
    border-color: #fa0000;
  }
.sign-in {
  padding: 8px 50px 8px 50px;
  text-transform: capitalize;
  border: 1px solid white !important;
  border-radius: 100px;
  display: block;
  width: fit-content;
  color: white !important;
  bottom: 0px;
  font-weight: 400 !important;
  font-family: 'IBM Plex Sans', sans-serif;
}

.sign-in:hover {
  background: white !important;
  color: black !important;
}

.sign-in:hover {
    opacity: 1;
  }
.sign-in:active {
    box-shadow: none;
  }
@media (max-width: 767px) {
.sign-in {
    display: block;
    width: 100%;
    margin-bottom: calc(14px * 1.4 / 2)
}
.language-selector {
    display: block;
    width: 100%;
    margin-bottom: calc(14px * 1.4 / 2)
}
.submit-a-request {
    display: block;
    width: 100%;
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
.btn--sidebar-toggle {
  margin-bottom: calc(14px * 1.4);
}
.container {
}
@media (min-width: 768px) {
.container {
}
  }
.container--grey {
  background-color: #f6f7f8;
}
.container-inner {
  max-width: 75vw;
  min-width: 30vw;
  margin: 0 auto;
  display: -ms-flexbox;
}
/* Tables */
table {
  background-color: transparent;
}
caption {
  padding-top: 12px;
  padding-bottom: 12px;
  color: #818a91;
  text-align: left;
}
th {
  text-align: left;
}
/* Baseline styles */
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: calc(14px * 1.4);
}
.table th,
  .table td {
    padding: 20px;
    vertical-align: top;
  }
.table td {
    border-top: 1px solid #ddd;
  }
.table thead th {
    vertical-align: bottom;
  }
.table tbody + tbody {
    border-top: 1px solid #ddd;
  }
.table .table {
    background-color: #fff;
  }
.table--color-header th {
    color: #fff;
    background-color: #0F1113;
  }
.table--striped th,
  .table--striped td,
  .table--striped thead th {
    border-color: #fff;
  }
.table--striped tbody tr:nth-child(odd) {
    color: inherit;
    background-color: #eee;
  }
.table--hover tbody tr:hover {
    color: inherit;
    background-color: #eee;
  }
.table--bordered {
  border: 1px solid #d3d6d8;
}
.table--bordered td {
    border-left: 1px solid #d3d6d8;
  }
.table--bordered th {
    border-left: 1px solid #d3d6d8;
  }
/***********
Responsive tables

Wrap your tables in `.table-responsive` and we'll make them mobile friendly
by enabling horizontal scrolling. Only applies <768px. Everything above that
will display normally.
************/
.table-responsive {
  min-height: 0.01%; /* Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) */
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
.table-responsive {
    width: 100%;
    margin-bottom: calc(14px * 1.4 * 0.75);
    overflow-y: hidden;
    border: 1px solid #ddd;
    -ms-overflow-style: -ms-autohiding-scrollbar
}

    .table-responsive > .table {
      margin-bottom: 0;
    }
          .table-responsive > .table > thead > tr > th,
          .table-responsive > .table > thead > tr > td,
          .table-responsive > .table > tbody > tr > th,
          .table-responsive > .table > tbody > tr > td,
          .table-responsive > .table > tfoot > tr > th,
          .table-responsive > .table > tfoot > tr > td {
            white-space: nowrap;
          }
  }
.row {
  margin-right: calc(15px * -1);
  margin-left: calc(15px * -1);
}
.column {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-right: 22px;
  padding-left: 22px;
}
.column--xs-1 {
  width: 8.33333%;
}
.column--xs-2 {
  width: 16.66667%;
}
.column--xs-3 {
  width: 25%;
}
.column--xs-4 {
  width: 33.33333%;
}
.column--xs-5 {
  width: 41.66667%;
}
.column--xs-6 {
  width: 50%;
}
.column--xs-7 {
  width: 58.33333%;
}
.column--xs-8 {
  width: 66.66667%;
}
.column--xs-9 {
  width: 75%;
}
.column--xs-10 {
  width: 83.33333%;
}
.column--xs-11 {
  width: 91.66667%;
}
.column--xs-12 {
  width: 100%;
}
.column--xs-offset-0 {
  margin-left: 0%;
}
.column--xs-offset-1 {
  margin-left: 8.33333%;
}
.column--xs-offset-2 {
  margin-left: 16.66667%;
}
.column--xs-offset-3 {
  margin-left: 25%;
}
.column--xs-offset-4 {
  margin-left: 33.33333%;
}
.column--xs-offset-5 {
  margin-left: 41.66667%;
}
.column--xs-offset-6 {
  margin-left: 50%;
}
.column--xs-offset-7 {
  margin-left: 58.33333%;
}
.column--xs-offset-8 {
  margin-left: 66.66667%;
}
.column--xs-offset-9 {
  margin-left: 75%;
}
.column--xs-offset-10 {
  margin-left: 83.33333%;
}
.column--xs-offset-11 {
  margin-left: 91.66667%;
}
.column--xs-offset-12 {
  margin-left: 100%;
}
@media (min-width: 768px) {
  .column--sm-1 {
    width: 8.33333%;
  }

  .column--sm-2 {
    width: 16.66667%;
  }

  .column--sm-3 {
    width: 25%;
  }

  .column--sm-4 {
    width: 33.33333%;
  }

  .column--sm-5 {
    width: 41.66667%;
  }

  .column--sm-6 {
    width: 50%;
  }

  .column--sm-7 {
    width: 58.33333%;
  }

  .column--sm-8 {
    width: 66.66667%;
  }

  .column--sm-9 {
    width: 75%;
  }

  .column--sm-10 {
    width: 83.33333%;
  }

  .column--sm-11 {
    width: 91.66667%;
  }

  .column--sm-12 {
    width: 100%;
  }

  .column--sm-offset-0 {
    margin-left: 0%;
  }

  .column--sm-offset-1 {
    margin-left: 8.33333%;
  }

  .column--sm-offset-2 {
    margin-left: 16.66667%;
  }

  .column--sm-offset-3 {
    margin-left: 25%;
  }

  .column--sm-offset-4 {
    margin-left: 33.33333%;
  }

  .column--sm-offset-5 {
    margin-left: 41.66667%;
  }

  .column--sm-offset-6 {
    margin-left: 50%;
  }

  .column--sm-offset-7 {
    margin-left: 58.33333%;
  }

  .column--sm-offset-8 {
    margin-left: 66.66667%;
  }

  .column--sm-offset-9 {
    margin-left: 75%;
  }

  .column--sm-offset-10 {
    margin-left: 83.33333%;
  }

  .column--sm-offset-11 {
    margin-left: 91.66667%;
  }

  .column--sm-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 992px) {
  .column--md-1 {
    width: 8.33333%;
  }

  .column--md-2 {
    width: 16.66667%;
  }

  .column--md-3 {
    width: 25%;
  }

  .column--md-4 {
    width: 33.33333%;
  }

  .column--md-5 {
    width: 41.66667%;
  }

  .column--md-6 {
    width: 50%;
  }

  .column--md-7 {
    width: 58.33333%;
  }

  .column--md-8 {
    width: 66.66667%;
  }

  .column--md-9 {
    width: 75%;
  }

  .column--md-10 {
    width: 83.33333%;
  }

  .column--md-11 {
    width: 91.66667%;
  }

  .column--md-12 {
    width: 100%;
  }

  .column--md-offset-1 {
    margin-left: 8.33333%;
  }

  .column--md-offset-2 {
    margin-left: 16.66667%;
  }

  .column--md-offset-3 {
    margin-left: 25%;
  }

  .column--md-offset-4 {
    margin-left: 33.33333%;
  }

  .column--md-offset-5 {
    margin-left: 41.66667%;
  }

  .column--md-offset-6 {
    margin-left: 50%;
  }

  .column--md-offset-7 {
    margin-left: 58.33333%;
  }

  .column--md-offset-8 {
    margin-left: 66.66667%;
  }

  .column--md-offset-9 {
    margin-left: 75%;
  }

  .column--md-offset-10 {
    margin-left: 83.33333%;
  }

  .column--md-offset-11 {
    margin-left: 91.66667%;
  }

  .column--md-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 1200px) {
  .column--lg-1 {
    width: 8.33333%;
  }

  .column--lg-2 {
    width: 16.66667%;
  }

  .column--lg-3 {
    width: 25%;
  }

  .column--lg-4 {
    width: 33.33333%;
  }

  .column--lg-5 {
    width: 47.66667%;
  }

  .column--lg-6 {
    width: 50%;
  }

  .column--lg-7 {
    width: 58.33333%;
  }

  .column--lg-8 {
    width: 66.66667%;
  }

  .column--lg-9 {
    width: 75%;
  }

  .column--lg-10 {
    width: 83.33333%;
  }

  .column--lg-11 {
    width: 91.66667%;
  }

  .column--lg-12 {
    width: 100%;
  }

  .column--lg-pull-0 {
    right: auto;
  }

  .column--lg-pull-1 {
    right: 8.33333%;
  }

  .column--lg-pull-2 {
    right: 16.66667%;
  }

  .column--lg-pull-3 {
    right: 25%;
  }

  .column--lg-pull-4 {
    right: 33.33333%;
  }

  .column--lg-pull-5 {
    right: 41.66667%;
  }

  .column--lg-pull-6 {
    right: 50%;
  }

  .column--lg-pull-7 {
    right: 58.33333%;
  }

  .column--lg-pull-8 {
    right: 66.66667%;
  }

  .column--lg-pull-9 {
    right: 75%;
  }

  .column--lg-pull-10 {
    right: 83.33333%;
  }

  .column--lg-pull-11 {
    right: 91.66667%;
  }

  .column--lg-pull-12 {
    right: 100%;
  }

  .column--lg-push-0 {
    left: auto;
  }

  .column--lg-push-1 {
    left: 8.33333%;
  }

  .column--lg-push-2 {
    left: 16.66667%;
  }

  .column--lg-push-3 {
    left: 25%;
  }

  .column--lg-push-4 {
    left: 33.33333%;
  }

  .column--lg-push-5 {
    left: 41.66667%;
  }

  .column--lg-push-6 {
    left: 50%;
  }

  .column--lg-push-7 {
    left: 58.33333%;
  }

  .column--lg-push-8 {
    left: 66.66667%;
  }

  .column--lg-push-9 {
    left: 75%;
  }

  .column--lg-push-10 {
    left: 83.33333%;
  }

  .column--lg-push-11 {
    left: 91.66667%;
  }

  .column--lg-push-12 {
    left: 100%;
  }

  .column--lg-offset-0 {
    margin-left: 0%;
  }

  .column--lg-offset-1 {
    margin-left: 8.33333%;
  }

  .column--lg-offset-2 {
    margin-left: 16.66667%;
  }

  .column--lg-offset-3 {
    margin-left: 25%;
  }

  .column--lg-offset-4 {
    margin-left: 33.33333%;
  }

  .column--lg-offset-5 {
    margin-left: 41.66667%;
  }

  .column--lg-offset-6 {
    margin-left: 50%;
  }

  .column--lg-offset-7 {
    margin-left: 58.33333%;
  }

  .column--lg-offset-8 {
    margin-left: 66.66667%;
  }

  .column--lg-offset-9 {
    margin-left: 75%;
  }

  .column--lg-offset-10 {
    margin-left: 83.33333%;
  }

  .column--lg-offset-11 {
    margin-left: 91.66667%;
  }

  .column--lg-offset-12 {
    margin-left: 100%;
  }
}
.layout {
  min-height: 100%;
  background-color: var(--ntop-paper);
}
.layout__content {
  width: 100%;
  min-height: calc(100vh - 490px);

  padding-top: calc(14px * 1.4 * 4);
}
.layout__content:after {
    display: block;
    height: 0;
    font-weight: 900;
    visibility: hidden;
    content: "\00a0";
  }
@media (min-width: 768px) {
  .layout__content {
    padding-top: calc(14px * 1.4 * 4);
  }
}
.layout__header,
.layout__footer {
  flex: none;
}
.meta {
  font-size: 16px;
  color: #808488;
}
.meta__item {
  display: inline-block;
  margin-right: calc(12px / 2);
}
.meta__item + .meta__item:before {
    position: relative;
    top: -2px;
    margin-right: calc(12px / 1.75);
    font-size: 8px;
    font-weight: 900;
    content: "\2022";
  }
.meta--profile {
  margin-bottom: 0;
}
.lines-button {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  padding: 7.5px;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: calc(14px - 5px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent !important;
  border: 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  touch-action: manipulation;
}
.lines-button:focus, .lines-button:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.lines-button:hover,
  .lines-button:focus {
    color: #fff;
    text-decoration: none;
  }
.lines-button:active {
    outline: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
@media (max-width: 767px) {
    .lines-button {
        float: right
    }
  }
@media (min-width: 768px) {
    .lines-button {
        display: none !important;
    }
  }
.lines-button:hover {
    opacity: 1;
  }
.lines-button:active {
    outline: 0;
    box-shadow: none;
    transition: none;
  }
.lines-button:focus {
    outline: 0;
  }
.lines-button.is-active .lines {
      background-color: transparent !important;
    }
/* common to all three-liners */
.lines {
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 15px);
  display: inline-block;
  width: 30px;
  height: 2px;
  color: white;
  border-radius: 2px;
  transition: 0.3s;
}
.lines:before,
  .lines:after {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 2px;
    content: "";
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
    transform-origin: 2px center;
  }
.lines:before {
    top: 8px;
  }
.lines:after {
    top: -8px;
  }
.lines--sidebar {
  position: relative;
  top: -5px;
  left: 0;
  margin: 0 calc(14px * 1.4 / 3) 0 0;
}
.lines--sidebar,
  .lines--sidebar:before,
  .lines--sidebar:after {
    width: 16px;
    height: 1px;
  }
.lines--sidebar:before {
    top: -5px;
  }
.lines--sidebar:after {
    top: 5px;
  }
.lines-button{
  color: white;
  border: 1px white solid !important;
}
.lines-button .lines{
  color: white;
  background-color: white;
}
.lines-button.is-active {
  transform: scale3d(0.8, 0.8, 0.8);
}
.lines-button.is-active .lines {
    background: transparent;
  }
.lines-button.is-active .lines:before,
    .lines-button.is-active .lines:after {
      top: 0;
      width: 30px;
      transform-origin: 50% 50%;
    }
.lines-button.is-active .lines:before {
      transform: rotate3d(0, 0, 1, 45deg);
    }
.lines-button.is-active .lines:after {
      transform: rotate3d(0, 0, 1, -45deg);
    }
.logo-wrapper {
  display: inline-block;
  vertical-align: middle;
}
.logo img {
    max-height: 25px !important;
  }
.logo svg {
    width: auto;
    height: 25px;
  }
.logo__secondary {
  display: none;
}
#user-menu {
  margin: 0 !important;
  border: 0 !important;
}
#user-menu [role="menuitem"] {
    white-space: nowrap;
  }
#user {
  position: relative;
  top: -1px;
}
#other-resources{
  font-family: 'Graphik';
}
#user > .btn {
    padding: 0;
    font-size: calc(14px - 2px);
    font-weight: 400;
    font-weight: 600;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    /* Same dead-scroll-toggle leftover as .topbar__nav above. */
    transition: none;
  }
@media (max-width: 767px) {
#user > .btn {
      padding: 10px 0;
      margin-right: calc(15px * -1);
      margin-left: calc(15px * -1);
  }
    }
#user > .btn:after {
      margin-top: 2px;
      transition: none;
      /* Was color: white !important — an ID selector beats the
         .topbar .dropdown-toggle ink override below even with !important
         on both sides (specificity still decides the tie), so this caret
         stayed white-on-paper (invisible) in light mode too, not just
         unthemed for dark mode. */
      color: var(--ntop-ink) !important;
    }
@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
  }

  25% {
    transform: translate3d(0, 10px, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }

  75% {
    transform: translate3d(0, 2px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounce {
  0% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
  }

  25% {
    transform: translate3d(0, 10px, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }

  75% {
    transform: translate3d(0, 2px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
#user-dropdown [role="menuitem"] {
    padding: 10px 0;
    font-family: 'Graphik';
    font-size: 16px;
  }
#header-dropdown [role="menuitem"] {
  padding: 10px 0;
  font-family: 'Graphik';
}
.header-info{
  margin-left: 10px;
}
@media (max-width: 767px) {
      #user-dropdown [role="menuitem"]:hover {
        background-color: transparent;
      }
      #header-dropdown [role="menuitem"]:hover {
        background-color: transparent;
      }
    }
@media (min-width: 768px) {
  #user-dropdown [role="menuitem"] {
      padding-right: 16px;
      padding-left: 16px
  }
  #header-dropdown [role="menuitem"] {
    padding-right: 16px;
    padding-left: 16px
  }
    }
#user-dropdown [role="separator"] {
    padding: 0;
    margin: 0;
  }
#header-dropdown [role="separator"] {
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
#user-dropdown [role="separator"] {
      border-color: rgba(255, 255, 255, 0.15)
  }
    }
@media (min-width: 768px) {
#user-dropdown[aria-expanded="true"] {
      -webkit-animation: bounce 0.6s ease-out;
              animation: bounce 0.6s ease-out
  }
#header-dropdown[aria-expanded="true"] {
    -webkit-animation: bounce 0.6s ease-out;
            animation: bounce 0.6s ease-out
}
    }
@media (max-width: 767px) {
#user-dropdown {
    position: static;
    display: inline;
    float: none;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    opacity: 1 !important
}

    #user-dropdown:before,
    #user-dropdown:after {
      display: none;
    }
  }
#user {
  display: block;
}
#user .dropdown-toggle {
    padding :7px;
    font-size: 16px;
    color: inherit;
    background-color: transparent;
    border-color: transparent;
  }
#user .dropdown-toggle,
    #user .dropdown-toggle:active,
    #user .dropdown-toggle:hover {
      background-color: transparent;
      border-color: transparent;
    }
#user .dropdown-toggle:before,
    #user .dropdown-toggle:after {
      color: #fff;
    }
@media (max-width: 767px) {
#user .dropdown-toggle:before,
    #user .dropdown-toggle:after {
        display: none
    }
      }
@media (min-width: 768px) {
#user {
    display: inline-block;
    vertical-align: middle
}
  }
@media (max-width: 1576px) {
  .header-info{
      display: none !important;
  }
    }
@media (max-width: 831px) {
  .header-info{
    display: none !important;
  }
}
#user-password,
#user-profile {
  color: #0F1113;
}
@media (max-width: 767px) {
#user-password {
    min-width: 1px !important;
    padding: calc(12px / 2)
      12px !important;
    margin-top: calc(12px / 2);
    background-color: #fff;
    border-radius: 2px
}
#user-profile {
    min-width: 1px !important;
    padding: calc(12px / 2)
      12px !important;
    margin-top: calc(12px / 2);
    background-color: #fff;
    border-radius: 2px
}
  }
#user-password [role="separator"] {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile [role="separator"] {
    padding: calc(12px / 2)
      12px !important;
  }
#user-password form {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile form {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile {
  font-size: calc(14px - 2) !important;
}
#user-profile dt {
    padding: 8px 4px !important;
  }
#user-profile dt label {
      margin-bottom: 0 !important;
    }
#user-profile input[type="text"] {
    font-size: calc(14px - 2) !important;
  }
#password-form label {
  font-size: calc(14px - 2) !important;
}
#password-submit {
  float: none !important;
  margin: 0 !important;
  background: auto !important;
}
#user-avatar {
  display: none;
}
.breadcrumbs {
  margin-top: 50px;
  padding: 10px;
  list-style: none;
  background-color: transparent;
}

.breadcrumbs > li {
    display: inline-block;
    color: black;
    font-size: 16px;
  }
.breadcrumbs > li + li:before {
      padding: 0 12px;
      font-weight: 900;
      color: #ccc;
      font-family: "Font Awesome 6 Pro";
      content: "\f054";
    }
.breadcrumbs > li a {
      color: #0F1113;
      font-size: 16px;
      text-decoration: underline;
    }
.breadcrumbs > li:last-child a {
      color: #0F1113;
    }
.breadcrumbs--search-results {
  padding: 0;
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 0.85);
}
.header-top-wrapper{
  display: inline-block;
  vertical-align: middle;
  margin-right: 138px;
  text-overflow: ellipsis;
}
.help-center-name {
  display: inline-block;
  margin: 0 15px 0 15px;
  font-size: 16px;
  font-weight: 600;
}
.help-center-name a{
  margin : 12px 20px 12px 20px;
  color: #000;
}
.help-center-name a:hover{
  color: #0064FF;
  text-decoration: underline;
  cursor: pointer;
}
#resouces{
  display: inline-block;
  vertical-align: middle;
}


@media (max-width: 767px) {
    .help-center-name {
        display: none;
    }
  }
.hero-unit {
  position: relative;
  z-index: 3;
  padding: calc(5% + 125px) 0 calc(1% + 15px);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  background-color: black;
  min-width: 30vw;
}
.home-page {
  margin-top: calc(14px * 1.4 * -5);
}
.home-page__section {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #F7F6FA;
}
@media (min-width: 768px) {
.home-page__section {
    padding-top: 50px;
    padding-bottom: 10px;
}
  }
.language-selector {
  line-height: 1;
}
@media (min-width: 768px) {
.language-selector {
    display: inline-block;
    vertical-align: middle
}
  }
@media (max-width: 767px) {
  .language-selector .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}
.avatar {
  position: relative;
  display: inline-block;
}
.avatar--agent:before {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    margin-right: -4px;
    margin-bottom: -4px;
    font-family: "Font Awesome 5 Pro";
    font-size: calc(14px * 0.85);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    color: #5A5B5E;
    content: "\f19d";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.user-avatar {
  border-radius: 100%;
}
.user-avatar--default {
  width: 60px;
  height: 60px;
}
#user .user-avatar {
  width: 30px;
  height: 30px;
}
.search {
  position: relative;
}
/* .search:before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    content: "";
    background: var(--icon-search )
      no-repeat;
    transform: translateY(-50%);
  } */
.searchbox-suggestions ul {
    padding-left: 0;
    margin-bottom: calc(14px * 1.4);
    list-style: none;
  }
.searchbox-suggestions li {
    margin-bottom: calc(14px * 1.4 / 3);
  }
input[type="search"]:focus {
  border-color: #eee;
}
.container-search-result{
  background-color: #F7F6FA;
  height: 140px;
  margin-bottom: 20px;
  width: 104%;
  margin-left: -2%;
  padding-left: 12.5%;
  padding-right: 11.5%;
}
.search-results-column a {
    color: #0F1113;
  }
.search-box {
  position: relative;
}
.search-box #query {
    padding: 10px 30px 10px 30px;
    transition: border 0.3s ease;
  }
.search:before {
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  color: #868686;
  top: 39%;
  left: calc(50% - 176px);
  width: 20px;
  height: 20px;
  font-size: 24px;
  content: "\f002";
  transform: translateY(-50%);
}
@media (max-width: 768px) {
  .search:before {
      display: none;
  }
}
@media (max-width: 768px) {
  .hero-unit {
    padding: 9% 0px 0px;
    margin-left: -15px;
    margin-right: -15px;
  }
  .home-page__section{
    padding-top: 0px;
  }
  .category-list-item{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}
.search-box--small {
  margin-bottom: calc(14px * 1.4 * 2);
  width: 100%;
}
.search-box--small #query  {
  padding: 12.5px 20px 12.5px 50px;
  margin-top: 54px;
  width: 100%;
  min-width: 35px;
  background: #EFEFEF;
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #BCBCC8;
}

.search-box--small #query:hover  {
  border-color: #84848F;
}

.search-box--small #query:focus{
  border-color: #0064FF;
}

.search-box--small::after  {
  position: absolute;
  top: 45%;
  left: 33px;
  width: 18px;
  height: 18px;
  font-size: 20px;
  font-family: "Font Awesome 5 Pro";
  content: '\f002';
  color:rgba(125, 125, 125, 1);
}

.search-box--small input[type="submit"] {
  position: absolute;
  margin-top: -3rem;
  margin-left: 14.1rem;
  right: 25px;
  width: 120px;
  height: 40px;
}

@media (max-width: 767px) {
.search-box--small {
}
.search-box--small::after  {
  margin-left: 11px;
  top: 44%;
}
  }
.search-results-page {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (max-width: 767px) {
.search-results-page {
    margin-bottom: calc(14px * 1.4)
}
  }
.search-results-count {
  font-size: calc(14px * 1.25);
}
.search-result {
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
.search-result__title {
  margin-bottom: calc(14px * 1.4 / 2);
  font-weight: 600;
}
.search-result__description {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 0.85);
}
.search-result__description:empty {
    display: none;
  }
.search-result__description em {
    padding: 0 3px;
    font-style: normal;
    font-weight: 600;
    background-color: #fff3ca;
    border-radius: 3px;
  }
.search-result__meta {
  margin-bottom: calc(14px * 1.4 / 2);
}
.search-result-votes {
  display: inline-block;
  padding: 2px 4px;
  font-size: calc(14px * 0.85);
  color: #fff;
  background-color: #0F1113;
  border-radius: 2px;
}
zd-autocomplete{
  border-radius: 5px;
  border: 1px solid #BCBCC8;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  margin-top: -10px;
}
zd-autocomplete-multibrand{
  height: 75px;
  padding : 15px 15px 15px 25px;
  color: #84848F;
  border-bottom: initial !important;
}
zd-autocomplete-multibrand:nth-child(even){
  background-color:#F7F6FA ;
}
zd-autocomplete-multibrand:nth-child(even):hover{
  background-color: #efeef1 ;
}
em{
  color:#0064FF;
  font-weight: initial !important;
}
zd-autocomplete-title-multibrand{
  color:#84848F !important;
  padding-bottom: 6px !important;
  font-size: 20px !important;
  font-weight: initial !important;
  font-family: 'Barlow', sans-serif !important;
}
zd-autocomplete-breadcrumbs-multibrand{
  color:#424249;
  font-family: 'IBM Plex Sans', sans-serif;
}
/* ==========================================================================
  Search Results Filters
   ========================================================================== */
.search-results-filters {
  padding: 16px;
  font-size: calc(14px - 2px);
  border: 1px solid #eee;
  border-radius: 2px;
}
@media (max-width: 767px) {
.search-results-filters {
    margin-bottom: calc(14px * 1.4 * 2)
}
  }
.search-results-filter + .search-results-filter {
  margin-top: 24px;
}
@media (min-width: 768px) {
.search-results-filter + .search-results-filter {
    margin-top: 32px
}
  }
.search-results-filter__title {
  margin-bottom: 0;
  margin-left: 8px;
  font-weight: 600;
}
@media (max-width: 767px) {
.search-results-filter__title {
    position: relative;
    font-size: calc(14px * 1);
    cursor: pointer
}
  }
@media (max-width: 767px) {
  .search-results-filter__title:after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    margin-left: 5px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    line-height: 1.5;
    color: inherit;
    content: "\f107";
    transition: all 0.3s ease;
    transform: translateY(-50%);
  }

  .search-results-filter__title.is-active:after {
    transform: translateY(-50%) rotate(-180deg);
  }
}
.search-results-filter__list {
  margin-top: 24px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
.search-results-filter__list {
    display: none
}
  }
@media (min-width: 768px) {
.search-results-filter__list {
    display: block !important
}
  }
.search-results-filter__item {
  display: block;
  margin-bottom: 4px;
}
.search-results-filter__item.is-active .search-results-filter__link {
  color: #fff;
  background-color: #0F1113;
  border-color: #0F1113;
}
.search-results-filter__item--subfilter:nth-child(n + 7) {
  display: none;
}
.search-result__subfilters--all .search-results-filter__item:nth-child(n + 7) {
    display: block;
  }
.search-result__subfilters--all .search-result__show-more {
    display: none !important;
  }
.search-results-filter__link {
  display: block;
  padding: 6px 8px;
  color: #0F1113;
  text-decoration: none;
  border: $border_width solid transparent;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.search-results-filter__link:hover {
    background-color: #f6f7f8;
    border-color: #f6f7f8;
  }
.search-results-filter__link:focus {
    background-color: #f6f7f8;
    border-color: #f6f7f8;
  }
.search-results-filter__link:active {
    background-color: #f6f7f8;
    border-color: #f6f7f8;
  }
.search-results-filter__link:active {
    background-image: none;
    outline: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
.search-results-filter__count {
  opacity: 0.6;
}
.search-result__show-more {
  padding: 0;
  margin-left: 8px;
  color: #0F1113;
  background-color: transparent;
  border: 0;
}
.category-page-header{
  padding-bottom: calc(14px * 1.4 * .5)
}
.category-page{
  background-color: white;
}
@media (min-width: 768px) {
.category-page {
    padding-top: calc(14px * 1.4 * 2)
}
  }
.category-description:empty {
    display: none;
  }
.category-tree-item {
  padding-top: calc(14px * 1.4);
  border-top: 1px solid #eee;
}
.category-tree-item:nth-child(odd) {
    background-color: #f6f7f8;
  }
.category-tree-item:last-child {
    border-bottom: 1px solid #eee;
  }
@media (min-width: 768px) {
.category-tree-item {
    padding-top: calc(14px * 1.4 * 3);
    padding-bottom: calc(14px * 1.4 * 2)
}
  }
.category-tree-item__title {
  font-size: 41px;
  text-align: center;
}
@media (min-width: 768px) {
.category-tree-item__title {
    margin-bottom: calc(14px * 1.4 * 1.5)
}
  }
.category-tree-item__sections {
  margin-right: 0;
  margin-left: 0;
}
[tag="Getting Started"]{
  background: var(--icon-search ) no-repeat;
  height: 84px !important;
  width: 84px !important;
  float: left !important;
  margin-right: 15px;
}
[tag="Access and Installation"]{
  background: var(--icon-search ) no-repeat;
  height: 84px !important;
  width: 84px !important;
  float: left !important;
  margin-right: 15px;
}
[tag="Knowledge Base"]{
  background: var(--icon-search ) no-repeat;
  height: 84px !important;
  width: 84px !important;
  float: left !important;
  margin-right: 15px;
}
[tag="What's New?"]{
  background: var(--icon-search ) no-repeat;
  height: 84px !important;
  width: 84px !important;
  float: left !important;
  margin-right: 15px;
}
@media (min-width: 768px) {
      .category-tree-item__sections .section:nth-child(2n + 1) {
        clear: left;
      }
    }
@media (min-width: 768px) {
      .category-tree-item__sections .section:nth-child(2n + 1) {
        clear: none;
      }

      .category-tree-item__sections .section:nth-child(3n + 1) {
        clear: left;
      }
    }
.category-tree-item__title-link {
  color: inherit;
}
.category-list-title {
  text-align: center;
}
@media (min-width: 768px) {
.category-list-title {
    margin-bottom: calc(14px * 1.4 * 1.5)
}
  }
.category-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
@media (min-width: 768px) {
.category-list {
    display: flex;
    flex-wrap: wrap
}
  }
.category-list-title {
  font-size: 41px;
}
@media (max-width: 767px) {
.category-list-title {
    font-size: 28px
}
  }
.category-list-item {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  -webkit-order: 5;
}
.custom-redesign-block[content="Knowledge Base"]{
  padding : 0;
  padding-top: 40px;
  padding-bottom: 10px;
  display: grid;
  order: 1 !important;
}
.custom-redesign-block[content="Access and Installation"]{
  padding : 0;
  padding-top: 40px;
  padding-bottom: 30px;
  display: grid;
  order: 2 !important;
}
.custom-redesign-block .category-block__link{
  padding: 15px 0px;
  border: transparent;
  box-shadow: none;
}
.custom-redesign-block .category-block__link:hover{
  border: transparent;
  box-shadow: none;
}
.custom-redesign-block .category-block__icon{
  display: none;
}
.custom-redesign-block .category-block__title{
  font-size: 40px;
  margin: 46px 50px 10px 0;
}
.custom-redesign-block .category-block-option__title-see-all{
  display: block;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 400;
  font-family: 'Graphik';
  text-decoration: underline;
  vertical-align: middle;
  color: #000;
}
.custom-redesign-block .category-block__header{
  display: inline-block;
  height: fit-content;
  margin-bottom: 60px;
}
.custom-redesign-block .category-block__description {
  margin-bottom: 57px;
  margin-right: 50px;
  font-size: 20px;
  color: black;
  height: 100%;
  overflow: hidden;
  font-family: 'Graphik', sans-serif;
}
.custom-redesign-block li ul a{
  font-size: 16px;
}
.custom-redesign-block .category-url-list{
  max-height: fit-content;
  display: inline-block;
  float: right;
  max-width: 100%;
}
.custom-redesign-block .category-block__option_url-block{
  padding : 20px 50px;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  display: inline-block;
  flex: 2;
  /* min-width: 500px; */
  margin : 10px 0px 10px 0;
  border: 1px solid rgba(226, 226, 226, 1);
  background-color: white;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
}
.custom-redesign-block .category-block-option-dropdown{
  display: inline-block;
  float: right;
  margin-top: 5px;
}
.custom-redesign-block .category-block-option-dropdown:hover{
  cursor: pointer;
}
.custom-redesign-block .category-block-option-dropdown::before{
  font-size: 28px;
}

.custom-redesign-block .category-block__option_url-block:nth-child(odd){
  margin-right: 20px;
}

.custom-redesign-block .category-block-option__title{
  display: inline-block;
  font-size: 28px;
  font-family: 'Graphik-500';
  font-weight: 500 !important;
  margin-bottom: 0px;
  width: calc(100% - 31px);
  text-overflow: ellipsis;
  overflow: hidden;
}

.custom-redesign-block .category-url-list .category-block__description{
  margin-bottom: 20px;
  color: rgba(160, 160, 160, 1);
  font-family: 'Graphik';
}

.custom-redesign-block .category-dropdown{
  margin-top: 13px;
  padding-top: 0;
  position: relative;
  box-shadow: none;
  border: none;
  z-index: 3;
}

.custom-redesign-block .category-dropdown ul{
  position: relative;
  margin: 0px;
  padding: 0 0 20px 0;
}

/* first set is sandbox, second set is prod */
/* Access and installation */
#category-360005736893{
  -webkit-order: 1;
}
#category-360003635054{
  -webkit-order: 1;
}
/* Getting Started */
#category-360005736793{
  -webkit-order: 2;
}
#category-360005712493{
  -webkit-order: 2;
}
/* Knowledge Base */
#category-360005736853{
  -webkit-order: 3;
}
#category-360003678133{
  -webkit-order: 3;
}
/* Whats new */
#category-360005736833{
  -webkit-order: 4;
}
#category-360005712353{
  -webkit-order: 4;
}
.category-url-list{
  max-height: 180px;
  overflow: hidden;
}
.category-list-item__link {
  position: relative;
  display: block;
  padding: 24px;
  padding-left: calc(14px * 1.4 * 3.5);
  font-weight: 400;
  color: #0F1113;
  text-align: left;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.category-list-item__link .meta {
    font-size: 14px;
  }
.category-list-item__link:active,
  .category-list-item__link:focus,
  .category-list-item__link:hover {
    text-decoration: none;
    background-color: #e8eaed;
  }
@media (min-width: 768px) {
.category-list-item__link {
    height: 100%
}
  }
.category-list-item__link .meta {
    margin-bottom: 0;
  }
.category-list-item__title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0F1113;
  text-transform: uppercase;
}
.category-list-item__icon {
  position: absolute;
  left: 24px;
  height: 40px;
}

.category-list-item__icon img,
  .category-list-item__icon svg {
    width: auto;
    height: 100%;
  }

.section-page {
  margin-top: calc(14px * 1.4 * 4);
  margin-bottom: calc(14px * 1.4 * 4);
}
.section-page-header{
}
.section {
  margin-bottom: calc(14px * 1.4);
}
.section__title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 400;
  font-family: 'Graphik';
}
.section__title-link {
  color: #666;
}
.section-header {
  position: relative;
  text-align: left;
}
.section-header-title{
  font-size: 40px !important;
}
.section-subscribe .dropdown-toggle {
    margin-top: calc(14px * 1.4);
  }
.section-subscribe .dropdown-toggle:after {
      display: none;
    }
.section-subscribe .dropdown-menu {
    right: 0;
    left: initial;
  }
.section-title {
  text-align: center;
}
@media (min-width: 768px) {
      .section-tree .section:nth-child(2n + 1) {
        clear: left;
      }
    }
@media (min-width: 992px) {
      .section-tree .section:nth-child(2n + 1) {
        clear: none;
      }

      .section-tree .section:nth-child(3n + 1) {
        clear: left;
      }
    }
.section-list {
  padding-left: 0;
  margin-right: 0;
  margin-bottom: calc(14px * 1.4);
  margin-left: 0;
  list-style: none;
}
@media (min-width: 768px) {
.section-list {
    display: flex;
    margin-right: calc(15px * -2);
    margin-bottom: 76px;
    margin-left: calc(15px * -2);
    flex-wrap: wrap
}
  }
.section-list-item {
  position: relative;
  margin-bottom: calc(14px * 1.4);
}
@media (min-width: 768px) {
.section-list-item {
    min-height: 120px
}
  }
.section-list-item__link {
  display: block;
  padding: 22px 20px;
  font-weight: 400;
  color: #0F1113;
  text-align: left;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
  transition: all 0.3s ease;
}
.section-list-item__link:active,
  .section-list-item__link:focus,
  .section-list-item__link:hover {
    text-decoration: none;
    background-color: #0F1113;
  }
.section-list-item__link:active .section-list-item__title, .section-list-item__link:focus .section-list-item__title, .section-list-item__link:hover .section-list-item__title {
      color: #fff;
    }
.section-list-item__link:active .meta, .section-list-item__link:focus .meta, .section-list-item__link:hover .meta {
      color: #fff;
    }
@media (min-width: 768px) {
.section-list-item__link {
    height: 100%
}
  }
.section-list-item__title {
  margin-bottom: 8px;
  font-weight: 600;
}
.section-list-compact {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.section-list-compact__item {
  position: relative;
  padding-left: 20px;
  margin-bottom: calc(14px * 1.4 / 2);
}
.section-list-compact__item span {
  position: absolute;
  top: 8px;
  left: -3px;
  font-size: 10px;
  color: #f49e44;
  vertical-align: middle;
}
.article-page {
  margin-bottom: calc(14px * 1.4 * 2);
}
.article {
  position: relative;
}
.article__title {
  font-size: 50px;
  font-weight: 600;
  width: 100%
}
@media (min-width: 1200px) {
.article__title {
    float: left;
    width: 100%;
    padding-bottom: 30px;
}
  }
@media (max-width: 767px) {
.article__title {
    font-size: 28px
}
  }
.article-header:before,
  .article-header:after {
    display: table;
    content: "";
  }
.article-header:after {
    clear: both;
  }
.article-header__button {
  margin-bottom: calc(14px * 1.4);
}
@media (min-width: 1200px) {
.article-header__button {
    float: right;
    width: 20%;
    text-align: right;
    vertical-align: top
}
  }
.article-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(14px * 1.4);
}
.article-meta__col {
  display: table-cell;
  vertical-align: top;
}
.article-meta__col--main {
  width: 100%;
  padding-right: 12px;
}
.article-subscribe,
.article-unsubscribe {
  color: #fff;
  background-color: #0F1113;
  border-color: #0F1113;
}
.article-subscribe:hover,
  .article-subscribe:focus,
  .article-subscribe:active,
  .article-unsubscribe:hover,
  .article-unsubscribe:focus,
  .article-unsubscribe:active {
    color: #e0e0e0;
    background-color: #000;
    border-color: #000;
  }
.article-subscribe:active, .article-unsubscribe:active {
    background-image: none;
  }
.article__body {
  margin-bottom: calc(14px * 1.4);
}
.article__body h2 {
    font-size: calc(14px * 1.75 - 2px);
    font-weight: 400;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-x-large {
    font-size: calc(14px * 1.75 - 2px);
    font-weight: 400;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-large {
    font-size: calc(14px * 1.5);
    font-weight: 600;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-medium {
    font-size: calc(14px * 1.25);
    font-weight: 600;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-small {
    font-size: calc(14px * 0.85);
  }
.article__body ul,
  .article__body ol {
    padding-left: 20px;
  }
.article__body ul ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.article__body ul ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.article__body ol ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.article__body ol ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.article__body ul li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.article__body ol li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.article-vote {
  position: relative;
  padding: calc(14px * 1.4) 12px;
  height: 68px;
  display: block;
  text-align:center;
}
.article-vote-title {
  padding-bottom: 20px;
}
.article-vote-controls{
  display: block;
  width: 100%;

}
.article-vote-controls__item {
  color: #0F1113 !important;
  background-color: white !important;
  border-color: black !important;
}
.article-vote-controls__item:hover {
  color: white !important;
  background-color: black !important;
}
.article-vote-controls__item:active {
  color: #000;
  background-color: #b9b9b9;
}
.article-vote-controls__item:focus {
  color: white;
  background-color: black;
}
.article-vote-controls__item--voted,
.article-vote-controls__item--voted:active,
.article-vote-controls__item--voted:focus {
  color: #fff;
  background-color: black;
}
@media (min-width: 768px) {
  .article-vote-question {
    width: 100%;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .article-vote-question {
    display: block;
    margin-bottom: calc(14px * 1.4 / 2);
  }

  .article-vote-controls {
    display: block;
    margin-bottom: calc(14px * 1.4 / 2);
  }
}
.article-vote-count {
  display: block;
  font-size: calc((14px * 0.75) - 2);
  color: #979797;
}
.article__share {
  margin-bottom: calc(14px * 1.4);
}
.article__share ul {
    margin-top: 0;
  }
.article-footer {
  margin-bottom: calc(14px * 1.4);
  padding-bottom: 6rem;

}
.article__attachments {
  margin-bottom: calc(14px * 1.4);
}
.article-more-questions {
  margin-bottom: calc(14px * 1.4);
  clear: both;
}
.article-more-questions:empty {
    display: none;
  }
.article-more-questions a {
    white-space: nowrap;
  }
@media (max-width: 767px) {
.article-sidebar {
    padding-top: calc(14px * 1.4);
    border-top: 1px solid #eee
}
  }
.comment-form__body {
  margin-bottom: 16px;
}
.article-list {
  padding-left: 0;
  list-style: none;
  max-height: 180px;
  overflow: hidden;
}
.section-article-list {
  padding-left: 0;
  list-style: none;
}
.article-list-item {
  position: relative;
  padding: 3px 3px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
}
.section-article-list .article-list-item .article-list-item__link{
  font-size: 20px ;
}
.section-article-list .article-list-item{
  padding : 30px 0px;
}
.article-list-item__link {
  font-size: 16px;
  color: #0F1113;
}
.article-list-item--is-promoted span {
  position: absolute;
  top: 8px;
  left: -3px;
  font-size: 10px;
  color: #f49e44;
  vertical-align: middle;
}
.article-list-item--is-promoted:before {
  display: none;
}
@media (min-width: 768px) {
.article-list--section {
    /* -moz-column-count: 3;
         column-count: 3;
    -moz-column-gap: calc(15px * 3);
         column-gap: calc(15px * 3) */
}
  }
/* Comment List */
.prevnext__btn{
  width: 150px;
}
.upvote-article{
  width: 120px;
  border: 1px solid black;
  background: white;
  margin-left: 10px;
  margin-right: 10px;
  color: black;
}
.upvote-article:hover{
  background: black;
  color: white;
}
.upvote-article::before{
  font-family: "Font Awesome 5 Pro";
  content: "\f00c";
  margin-right: 20px;
  font-size: 14px;
}
.downvote-article {
  width: 120px;
  border: 1px solid black;
  background: white;
  color: black;
}
.downvote-article:hover {
  background: black;
  color: white;
}
.downvote-article::before{
  font-family: "Font Awesome 5 Pro";
  content: "\f00d";
  margin-right: 20px;
  font-size: 14px;
}
button[aria-label="Comment actions"]{
  border: none  ;
  background-color: white;
  color: black;
  text-align: center;
  padding: 0;
  white-space: normal;
  font-size: 12px;
  font-family: 'Graphik';
}
button[aria-label="Comment actions"]:after{
  padding-left: 5px;
  display: inline-block;
  margin-left: 0;
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  content: "\f013";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.comments__callout {
  font-size: calc(14px * 0.85);
  color: #808488;
}
.comments__callout:empty {
    display: none;
  }
.comments__list {
  padding-left: 0;
  list-style: none;
}
.comment-list-header {
  padding-bottom: calc(14px * 1.4 / 2);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
.comment-list-heading {
  margin-bottom: 0;
  font-size: calc(14px * 1.1);
  font-weight: 600;
}
.comment-sorter {
  padding-bottom: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
.comment-sorter {
    display: table;
    width: 100%
}
  }
@media (min-width: 768px) {
.comment-sorter__col {
    display: table-cell;
    vertical-align: middle
}
  }
@media (max-width: 767px) {
.comment-sorter__col--main {
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
@media (min-width: 768px) {
.comment-sorter__col--main {
    padding-right: 12px
}
  }
@media (min-width: 768px) {
.comment-sorter__col--filters {
    text-align: right
}
  }
.comment-sorter__item.is-active {
    font-weight: 600;
  }
.comment-sorter__item + .comment-sorter__item:before {
    margin: 0 6px;
    font-size: 10px;
    font-weight: 900;
    content: "\2022";
  }
/* Comment */
.comment {
  padding-bottom: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
.comment__inner {
  position: relative;
  padding-right: 72px;
}
@media (max-width: 767px) {
.comment__inner {
    padding-right: 0
}
  }
.comments__content {
  position: relative;
  padding-right: 12px;
}
.comment__header {
  position: relative;
  margin-bottom: calc(14px * 1.4);
}
.comment__voting-and-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  text-align: center;
}
.comment__voting-and-actions .dropdown-toggle:after {
    display: inline-block;
    margin-left: 0;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    content: "\f013";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.comment__official-heading {
  position: absolute;
  top: 0;
  right: 36px;
  width: auto;
  padding: 1px calc(12px / 2);
  font-size: calc(14px * 0.85);
  color: #fff;
  background-color: #0F1113;
  border-radius: 0 0 2px 2px;
}
.comment--official .comment__inner {
    position: relative;
    padding: calc(14px * 1.4)
      calc(12px * 2);
    background-color: desaturate(lighten(#0F1113, 55%), 30%);
    border: 1px solid #0F1113;
    border-radius: 2px;
  }
/* Comment form */
.comment-form {
  position: relative;
  margin-bottom: calc(14px * 1.4);
}
@media (min-width: 768px) {
.comment-form {
    padding-left: 72px
}
  }
.comment-form__avatar {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 767px) {
.comment-form__avatar {
    display: none
}
  }
.comment__body {
  margin-bottom: calc(14px * 1.4);
}
.comment__body ul {
    list-style: disc;
  }
.comment__body ul,
  .comment__body ol {
    padding-left: 20px;
  }
.comment__body ul ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.comment__body ul ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.comment__body ol ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.comment__body ol ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.comment__body ul li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.comment__body ol li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
@media (max-width: 767px) {
.comment__body [dir="auto"] {
      margin-bottom: 0
  }
    }
@media (max-width: 767px) {
.comment__body {
    margin-bottom: 0
}
  }
.comment-form__attachments {
  margin-bottom: calc(14px * 1.4);
}
.comment-form__mark-as-solved {
  position: relative;
}
.comment-form__comment-ccs ul {
    margin-bottom: 0;
  }
.share {
  padding-left: 0;
  white-space: nowrap;
  list-style: none;
}
.share li {
  position: relative;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: top;
}
.share a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  background-color: #eee;
  border-color: #eee;
  border-radius: 2px;
  touch-action: manipulation;
}
.share a:before {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: "Font Awesome 5 Brands";
    text-align: center;
  }
.share-facebook {
  color: #3d5b95;
  background-color: #eee;
  border-color: #eee;
}
.share-facebook:hover {
    color: #2b406a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-facebook:focus {
    color: #2b406a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-facebook:active {
    color: #2b406a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-facebook:active {
    background-image: none;
  }
.share-facebook:before {
    font-weight: 900;
    content: "\f09a";
  }
.share-twitter {
  color: #24aadd;
  background-color: #eee;
  border-color: #eee;
}
.share-twitter:hover {
    color: #1a82a9;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-twitter:focus {
    color: #1a82a9;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-twitter:active {
    color: #1a82a9;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-twitter:active {
    background-image: none;
  }
.share-twitter:before {
    font-weight: 900;
    content: "\f099";
  }
.share-linkedin {
  color: #0976b4;
  background-color: #eee;
  border-color: #eee;
}
.share-linkedin:hover {
    color: #06507a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-linkedin:focus {
    color: #06507a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-linkedin:active {
    color: #06507a;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-linkedin:active {
    background-image: none;
  }
.share-linkedin:before {
    font-weight: 900;
    content: "\f0e1";
  }
.share-googleplus {
  color: #d23e30;
  background-color: #eee;
  border-color: #eee;
}
.share-googleplus:hover {
    color: #a22e23;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-googleplus:focus {
    color: #a22e23;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-googleplus:active {
    color: #a22e23;
    background-color: #d5d5d5;
    border-color: #cfcfcf;
  }
.share-googleplus:active {
    background-image: none;
  }
.share-googleplus:before {
    font-weight: 900;
    content: "\f0d5";
  }
.my-activities-header {
  margin-bottom: calc(14px * 1.4);
}
.my-activities-items {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (min-width: 768px) {
.my-activities-items {
    display: table;
    width: 100%
}
  }
.my-activities-items__head {
  display: none;
  color: #808488;
}
@media (min-width: 768px) {
.my-activities-items__head {
    display: table-header-group;
    font-size: calc(14px * 0.85);
    font-weight: 600;
    text-transform: uppercase
}
  }
@media (min-width: 768px) {
.my-activities-items__body {
    display: table-row-group
}
  }
@media (min-width: 768px) {
.my-activities-items__row {
    display: table-row
}
  }
@media (min-width: 768px) {
.my-activities-items__col {
    display: table-cell;
    padding-top: calc(14px * 1.4 / 2);
    padding-bottom: calc(14px * 1.4 / 2);
    border-bottom: 1px solid #eee
}

    .my-activities-items__col + .my-activities-items__col {
      padding-left: 12px;
    }
  }
@media (max-width: 767px) {
.my-activities-items__request-id {
    display: inline
}
  }
@media (min-width: 768px) {
.my-activities-items__request-id {
    display: none
}
  }
.my-activities-menu ul {
    padding-left: 0;
    list-style: none;
  }
.my-activities-menu__items {
  margin-bottom: 0;
}
.my-activities-menu__item {
  margin-bottom: 0;
}
.my-activities-menu__item a {
    display: block;
  }
@media (min-width: 480px) {
.my-activities-menu__item {
    float: left
}
  }
@media (min-width: 480px) {
  .my-activities-menu__item + .my-activities-menu__item {
    margin-left: 12px;
  }
}
.my-activities-menu--main {
  padding-bottom: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
.my-activities-menu--main .my-activities-menu__item {
    padding: 6px 12px;
    background-color: #eee;
    border-radius: 2px;
  }
@media (max-width: 479px) {
.my-activities-menu--main .my-activities-menu__item {
      margin-bottom: calc(14px * 1.4 / 3)
  }
    }
.my-activities-menu--main .my-activities-menu__item.is-active {
      font-weight: 600;
      color: #0F1113;
    }
.my-activities-menu--sub {
  margin-bottom: calc(14px * 1.4);
}
.my-activities-menu--sub .my-activities-menu__item.is-active {
      font-weight: 600;
    }
.my-activities-menu--sub .my-activities-menu__item a {
      display: inline-block;
    }
@media (min-width: 480px) {
    .my-activities-menu--sub .my-activities-menu__item + .my-activities-menu__item:before {
      position: relative;
      top: -2px;
      margin-right: calc(12px / 1.75);
      font-size: 8px;
      font-weight: 900;
      content: "\2022";
    }
  }
.my-activities-item__icon {
  margin-right: calc(14px * 1.4 / 6);
}
@media (max-width: 767px) {
.my-activities-item {
    padding: calc(14px * 1.4 / 2)
      12px;
    margin-bottom: calc(14px * 1.4);
    border: 1px solid #eee;
    border-radius: 2px
}
  }
.my-activities-item__meta {
  font-size: 14px;
  color: #808488;
}
@media (max-width: 767px) {
.my-activities-item__meta {
    display: inline-block;
    margin-right: calc(12px / 2)
}

    .my-activities-item__meta + .my-activities-item__meta:before {
      position: relative;
      top: -2px;
      margin-right: calc(12px / 2);
      font-size: 10px;
      font-weight: 900;
      content: "\2022";
    }
  }
.my-activities-item__title {
  font-weight: 400;
}
@media (max-width: 767px) {
.my-activities-item__title {
    font-size: calc(14px * 1.25)
}
  }
@media (max-width: 767px) {
.my-activities-item__icon {
    display: inline-block
}
  }
@media (min-width: 768px) {
.my-activities-item__icon {
    display: none
}
  }
.request-table-toolbar {
  padding-top: 12px;
  padding-bottom: calc(12px / 2);
  margin-bottom: calc(14px * 1.4);
  background-color: #f9f9f9;
  border-radius: 2px;
}
@media (min-width: 768px) {
.request-table-toolbar {
    padding-top: calc(12px / 2);
    padding-bottom: 12px
}
  }
.request-table-toolbar label {
    font-size: calc(14px * 0.85);
    text-transform: uppercase;
  }
@media (min-width: 768px) {
.request-table-filters {
    display: table;
    width: 100%
}
  }
.request-table-filters__item {
  padding-right: 12px;
  padding-left: 12px;
}
@media (max-width: 767px) {
.request-table-filters__item {
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
@media (min-width: 768px) {
.request-table-filters__item {
    display: table-cell;
    width: 33%;
    vertical-align: bottom
}
  }
.request-table-organization {
  display: table;
  width: 100%;
}
.request-table-organization__col {
  display: table-cell;
  vertical-align: middle;
}
.request-table-organization__col--main {
  width: 100%;
}
.request-table-organization__col--button {
  padding-left: calc(12px / 2);
}
.request-table-organization__col--button [role="button"] {
    height: calc(14px * 1.4 + 14);
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(14px * 1.4 + 14);
  }
.requests-sort-symbol {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}
.requests-sort-symbol:after {
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 5px;
    font-family: "Font Awesome 5 Pro";
    font-size: 14px;
    font-weight: 900;
    color: #808488;
    content: "\f0d7";
  }
.requests-link {
  color: #808488;
  white-space: nowrap;
}
.requests-link[href*="asc"] .requests-sort-symbol:after {
  font-weight: 900;
  content: "\f0d8";
}
.request-page {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (max-width: 767px) {
.request-page {
    margin-bottom: calc(14px * 1.4)
}
  }
.request {
  position: relative;
}
.request-id {
  margin-bottom: calc(14px * 1.4 / 2);
  font-weight: 600;
}
.request-subject {
  font-size: calc(14px * 1.5);
}
@media (min-width: 992px) {
.request-subject {
    font-size: calc(14px * 1.75 - 2px);
    font-weight: 300
}
  }
.request-follow-up:empty {
  display: none;
}
.request-sidebar {
  padding: calc(14px * 1.4) 12px 0;
  margin-bottom: calc(14px * 1.4);
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 2px;
}
.request-sidebar dd {
    margin-bottom: calc(14px * 1.4 / 2);
  }
.request-status {
  display: inline-block;
  padding: 1px calc(12px / 2);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  border-radius: 2px;
}
.request-status--solved,
.request-status--closed {
  background-color: #504d7f;
}
.request-status--new,
.request-status--open {
  background-color: #ff5252;
}
.request-status--answered {
  background-color: #f49e44;
}
.new-request-page {
  padding-top: calc(14px * 1.4 * 3.5);
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (max-width: 767px) {
.new-request-page {
    padding-top: 0;
    margin-bottom: calc(14px * 1.4)
}
  }
.new-request-title {
  font-size: 56px;
  margin-bottom: 44px;
}
@media (min-width: 768px) {
.new-request-title {
  font-size: 50px;
}
  }
@media (min-width: 992px) {
.new-request-title {
  color: #121113;
}
  }

.request-form footer input{
  display: block;
  margin: 44px auto;
  font-family: 'Graphik';
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.new-request-form {
  margin-bottom: calc(14px * 1.4);
}
.upload-dropzone {
  padding: calc(14px * 1.4 * 2.5)
    calc(12px + 4px);
  border-color: #bdc2c5;
  border-radius: 2px;
  height: 160px;
}
.upload-dropzone {
    font-size: calc(14px * 0.85);
  }
.upload-dropzone a {
    font-size: calc(14px * 0.85);
  }
@media (max-width: 767px) {
.upload-dropzone {
    padding: calc(14px * 1.4 / 1.5)
      calc(12px + 4px)
}

    .upload-dropzone span {
      padding: 0;
    }
  }
.intro-title {
  position: relative;
  margin-bottom: calc(14px * 1.4);
  font-size: calc(14px * 1.5);
  font-weight: 600;
  line-height: 1.1;
  color: black;
  text-align: left;
  letter-spacing: 0.03em;
  white-space: nowrap;
  z-index: 9;
}
@media (min-width: 768px) {
.intro-title {
    font-size: calc(14px * 1.75 - 2px)
}
  }
@media (min-width: 992px) {
.intro-title {
    margin-bottom: calc(14px * 1.4 * 2.3);
    font-size: 50px;
    font-family: 'IBM Plex Sans', sans-serif;
}
  }
.custom-blocks {
  margin-top: calc(14px * 1.4 * 1);
}
@media (min-width: 768px) {
.custom-blocks__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
  }
.custom-block {
  float: none;
  margin-bottom: calc(14px * 1.4);
  text-align: center;
}
.custom-block__link {
  display: block;
  height: 100%;
  padding: 24px 16px 30px;
  background-color: #fff;
  border-radius: calc(2px * 2);
  box-shadow: 0 0 15px 5px rgba(62, 60, 98, 0.08);
  transition: all 220ms;
}
@media (min-width: 768px) {
    .custom-block__link:active,
    .custom-block__link:focus,
    .custom-block__link:hover {
      transform: scale(1.045);
    }
  }
.custom-block__icon {
  display: inline-block;
}
.custom-block__icon svg {
    width: 98px;
    height: 98px;
  }
@media (min-width: 480px) {
.custom-block__icon {
    margin-bottom: calc(14px * 1.4)
}
  }
.custom-block__title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #0F1113;
}
.custom-block__description {
  margin-bottom: 0;
  font-size: 14px;
  color: black;
  height: 100%;
  overflow: hidden;
}

.category-blocks {
  margin-top: calc(14px * 1.4 * 1);
}
@media (min-width: 768px) {
.category-blocks__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
  }
.category-block {
  float: none;
  margin-bottom: 44px;
  text-align: left;
}
.category-block__button_block{
  height: 40px;
}
.category-block__button_block a{
  text-decoration: none;

}
.category-block__option_url{
  display: block;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: nowrap;
  width: fit-content;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
}
.category-block__button{
  margin: 15px 2px 2px;
  padding: 8px 50px 8px 50px;
  text-transform: capitalize;
  border: 1px solid black;
  border-radius: 100px;
  display: block;
  width: fit-content;
  color: #000;
  bottom: 0px;
}
.category-block__button:hover{
  color: #fff;
  background-color: black;
}
.category-block__header{
  height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-block__link > a:hover{
  text-decoration: none;
}
.category-block__link {
  display: block;
  min-height: 410px;
  padding: 40px;
  background-color: transparent;
  border-radius: 0px;
  transition: all 50ms;
  border:  1px solid rgba(188, 188, 200, 1);
  filter: drop-shadow(0px 2px 8px rgba(188, 188, 200, 0.25));
}
.category-block__link:hover {
}
.category-block__icon {
  display: inline-block;
  float: left;
  padding-right: 1rem;
  height: fit-content;
}
.category-block__image {
  height: 78px;
}
.category-block__icon svg {
    width: 78px;
    height: 78px;
  }
.category-list-item:nth-child(n+6){
  display: none;
}
@media (min-width: 480px) {
.category-block__icon {
    
}
  }
.category-block__title {
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  color: #0F1113;
  
}
.category-block__description {
  margin-bottom: 0;
  font-size: 16px;
  color: black;
  height: 100%;
  overflow: hidden;
  font-family: 'Graphik', sans-serif;
}
.icon-color-stroke-primary {
  stroke: #0F1113;
}
.icon-color-stroke-secondary {
  stroke: #5A5B5E;
}
.icon-color-fill-primary {
  fill: #0F1113;
}
.icon-color-fill-secondary {
  fill: #5A5B5E;
}
.icon-color-fill {
  fill: #f8f8f8;
}
.dropdown-toggle:after {
  display: inline-block;
  margin-left: 8px;
  font-family: "Font Awesome 5 Pro";
  font-size: calc(14px - 4px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  color: inherit;
  content: "\f107";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dropdown-menu {
  min-width: 170px !important;
  overflow: hidden;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fff; 
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  position: absolute;
  text-align: left;
  padding: 10px 0;
  z-index: 1000;
}
.dropdown-menu[aria-expanded=true] {
  display: block;
}
.dropdown-menu [role="menuitem"] {
    position: relative;
    padding: calc(14px * 1.4 / 2) 26px
      calc(14px * 1.4 / 2) 12px;
    white-space: normal;
    color: #333;
    cursor: pointer;
    display: block;
    padding: 7px 40px 7px 20px;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    line-height: inherit;
    width: 100%;
}
.dropdown-menu-end {
  left: auto;
  right: 0;
}
.dropdown-menu-caret {
  margin-top: 10px;
}
.dropdown-menu [role="menuitem"][aria-selected="true"]:after {
    position: absolute;
    top: 16px;
    right: 12px;
    display: inline-block;
    margin-left: 10px !important;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    content: "\f00c";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.error-page {
  padding: 10% 0;
  text-align: center;
}
@media (max-width: 767px) {
.error-page {
    padding: 0 15px calc(14px * 1.4 / 2)
}
  }
.error-page__title {
  text-transform: capitalize;
}
.submit_request__wrapper{
  position: relative;
  color: white;
  background-color: rgba(24, 24, 24, 1);
  text-align: center;
  padding-top: 50px;
  padding-bottom: 0px;
}
.footer-submit-ticket {
  position: relative;
  color: white;
  background-color: rgba(24, 24, 24, 1);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width : 100%;
  max-width: 1000px;
  /* No padding here originally — harmless when this had no visible border,
     but the border added below (see the dark-mode section) then sat flush
     against the title and the button with zero breathing room. */
  padding: 48px 40px;
}
.footer-submit-ticket__btn{
  border-radius: 100px;
  padding : 21px 63px;
  font-size: 24px;
}
.footer-web-link{
  padding: 0px 10px 10px 10px;
  margin-top: -20px;
}
@media (max-width: 767px) {
.footer-submit-ticket {
    padding-bottom: calc(14px * 1.4)
}
  }
.footer-submit-ticket__title {
  font-size: 40px;
  margin-bottom: 40px;
}
.footer-submit-image{
  background: var(--icon-search ) no-repeat;
  background-size: contain;
  width: 80vw;
  max-height: 564px;
  height: 30vw;
  margin: 0 auto;
}
@media (min-width: 768px) {
.footer-submit-ticket__title { 
    white-space: nowrap;
    font-size: 40px;
    font-family: 'IBM Plex Sans', sans-serif;
}
  }
.footer-submit-ticket__subtitle {
  font-size: calc(14px * 1.5);
  color: #0F1113;
  opacity: 0.8;
}
.note {
  position: relative;
  padding-left: 12px;
  margin: calc(14px * 1.4) 0;
  color: #3c444c;
  border-left: calc(1px * 4) solid transparent;
}
.note p:last-child {
    margin-bottom: 0;
  }
.note-title {
  margin-bottom: calc(14px * 1.4 / 2);
  font-weight: 600;
}
.note-default {
  border-color: #818a91;
}
.note--default {
  border-color: #818a91;
}
.note-default .note-title {
    color: #818a91;
  }
.note--default .note-title {
    color: #818a91;
  }
.note-info,
.note--info {
  border-color: #5bc0de;
}
.note-info .note-title, .note--info .note-title {
    color: #5bc0de;
  }
.note-warning,
.note--warning {
  border-color: #f49e44;
}
.note-warning .note-title, .note--warning .note-title {
    color: #f49e44;
  }
.note-success,
.note--success {
  border-color: #504d7f;
}
.note-success .note-title, .note--success .note-title {
    color: #504d7f;
  }
.note-danger,
.note--danger {
  border-color: #ff5252;
}
.note-danger .note-title, .note--danger .note-title {
    color: #ff5252;
  }
.footer {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  color: rgba(15, 17, 19, 0.65);
}
.footer__wrapper {
  position: relative;
  padding-top: 95px;
  background: #fff;
}
@media (min-width: 768px) {
}
.footer__inner {
  width: 100%;
  margin: 0 auto 90px auto;
}
@media (min-width: 768px) {
.footer__inner {
    display: table
}
  }
@media (max-width: 767px) {
.footer__inner {
    padding-bottom: calc(14px * 1.4 * 1.5)
}
  }
.footer__col {
  position: relative;
}
.footer--black-parent{
  background-color: black;
}
.footer--black-parent .footer__col{
  background-color: black;
}
.footer--black-parent .footer__wrapper{
  background-color: black;
}
.footer__col p{
  color: white;
}
.footer__col p {
  margin-bottom: 0px;
}
.footer__col a {
}
@media (min-width: 768px) {
.footer__col {
    display: table-cell;
    vertical-align: top
}
  }
@media (max-width: 767px) {
.footer__col {
    text-align: center;
    margin-top:20px;
}
  }
@media (min-width: 768px) {
.footer__col--social-links {
    text-align: right;
    vertical-align: middle
}
  }
.footer-social-link {
  width: 30px;
  height: 30px;
  font-size: calc(14px + 2);
  color: rgba(15, 17, 19, 0.65);
  /* vertical-align: middle; */
}
.footer-social-link + .footer-social-link {
    margin-left: 5px;
  }
.footer-social-link:hover {
    color: #5A5B5E;
  }
.copyright a {
  color: rgba(15, 17, 19, 0.85);
}
.pagination ul {
    display: inline-block;
    padding-left: 0;
    margin: 0 0 calc(14px * 1.4 / 2);
  }
.pagination ul > li {
      display: inline-block;
      margin-right: 6px;
      margin-bottom: calc(14px * 1.4 / 2);
    }
.pagination ul > li > a {
        position: relative;
        display: block;
        padding: 6px calc(12px + 4px);
        line-height: 1.4;
        color: #a6a6a7;
        text-decoration: none;
        background-color: #f6f6f6;
        border-radius: 2px;
      }
.pagination ul > li > span {
        position: relative;
        display: block;
        padding: 6px calc(12px + 4px);
        line-height: 1.4;
        color: #a6a6a7;
        text-decoration: none;
        background-color: #f6f6f6;
        border-radius: 2px;
      }
.pagination ul > li > a:hover {
        color: #000;
        background-color: #eee;
        border-color: #ddd;
      }
.pagination ul > li > a:focus {
        color: #000;
        background-color: #eee;
        border-color: #ddd;
      }
.pagination ul > li > span:hover {
        color: #000;
        background-color: #eee;
        border-color: #ddd;
      }
.pagination ul > li > span:focus {
        color: #000;
        background-color: #eee;
        border-color: #ddd;
      }
.pagination ul > .pagination-current > span,
      .pagination ul > .pagination-current > span:hover,
      .pagination ul > .pagination-current > span:focus {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #0F1113;
        border-color: #0F1113;
      }
.satisfaction-box {
  padding: calc(14px * 1.4) 15px;
  margin: 0 0 20px;
  margin-top: 0;
  border-color: #eee;
  border-radius: 2px;
}
.satisfaction-box h4:last-child {
      margin-bottom: 0;
    }
.satisfaction-box input[type="radio"] ~ label {
  display: inline-block;
  padding: 6px
    calc(12px + 12px / 2);
  margin-right: 10px;
  margin-bottom: 0;
  font-size: calc(14px - 5);
  font-weight: 700;
  line-height: calc(14px * 1.4);
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 2px;
  transition: all 0.3s ease;
  touch-action: manipulation;
}
.satisfaction-box input[type="radio"] ~ label:focus, .satisfaction-box input[type="radio"] ~ label:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.satisfaction-box input[type="radio"] ~ label:hover,
  .satisfaction-box input[type="radio"] ~ label:focus {
    color: #fff;
    text-decoration: none;
  }
.satisfaction-box input[type="radio"] ~ label:active {
    outline: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"] {
  color: #fff;
  background-color: #504d7f;
  border-color: #504d7f;
}
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    color: #e0e0e0;
    background-color: #3c3a5f;
    border-color: #383659;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    background-image: none;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"] {
  color: #fff;
  background-color: #ff5252;
  border-color: #ff3939;
}
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    color: #e0e0e0;
    background-color: #ff1f1f;
    border-color: #fa0000;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    background-image: none;
  }
.satisfaction-box input[type="radio"][checked="checked"][value="good"] + label {
  color: #fff !important;
  background-color: #383659 !important;
  border-color: darken($brand-success, 12%) !important;
}
.satisfaction-box input[type="radio"][checked="checked"][value="bad"] + label {
  color: #fff !important;
  background-color: #ff1515 !important;
  border-color: #fa0000 !important;
}
.satisfaction-box label.disabled {
  margin-bottom: calc(14px * 1.4) !important;
}
.satisfaction-box label.disabled[for="satisfaction_rating_score_good"] {
  color: #504d7f !important;
}
.satisfaction-box label.disabled[for="satisfaction_rating_score_bad"] {
  color: #ff5252 !important;
}
.satisfaction-comment {
  margin-top: 15px;
}
.satisfaction-box .satisfaction-submit {
  margin-left: 10px !important;
  font-size: calc(14px - 5) !important;
  color: #fff;
  background-color: #0F1113;
  border-color: #040405;
}
.satisfaction-box .satisfaction-submit:hover,
  .satisfaction-box .satisfaction-submit:focus,
  .satisfaction-box .satisfaction-submit:active {
    color: #e0e0e0;
    background-color: #000;
    border-color: #000;
  }
.satisfaction-box .satisfaction-submit:active {
    background-image: none;
  }
.satisfaction-reason {
  padding-top: calc(14px * 1.4);
}
.satisfaction-box .satisfaction-cancel {
  font-size: calc(14px - 5) !important;
  line-height: 1.4 !important;
}
.topbar {
  position: relative;
  width: 100%;
} 
.topbar .sign-in {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    background-color: transparent;
    margin-left: 25px;
    border: 0;
    color: white;
  }
.topbar__container-inner {
  position: relative;
  width: 100vw;
  /* max-width: 90vw; */
  z-index: 5;
}
.topbar__inner {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
.topbar__inner {
    display: table
}
  }
.topbar__nav {
  position: fixed;
  z-index: 5;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.topbar__nav,
  .topbar__nav .logo__icon {
    /* This used to fade the old scroll-triggered white/black nav swap; that
       swap is gone (see the "Top nav: always paper/ink" override below —
       the nav is forced to one color regardless of scroll), but left in
       place the transition still fired on the CSS variable flip from the
       theme toggle, visibly lagging this element's background behind the
       rest of the page for half a second on every toggle. */
    transition: none;
  }
.topbar__col {
  position: relative;
  padding: calc(14px * 1.4 / 2) 0;
  white-space : nowrap;
}
@media (min-width: 768px) {
  .topbar__col {
      display: table-cell;
      padding: 17.5px 0;
      vertical-align: middle;
      width: 100%;
  }
}
@media (max-width: 768px) {
  .help-center-navigate.whats-new{
    display: none;
  }
  .help-center-navigate.access-installation{
    display: none;
  }
}
@media (min-width: 768px) {
.topbar__controls {
    display: flex;
    float: right;
    align-items: center
}
  }
@media (max-width: 767px) {
.topbar__collapse {
    display: none;
    padding-top: calc(14px * 1.4 / 2);
    padding-bottom: calc(14px * 1.4)
}
  }
@media (min-width: 768px) {
.topbar__collapse {
    display: block !important
}
  }
@media (max-width: 767px) {
.topbar__menu {
    padding: 0
}
  }
.topbar__link {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  /* Same dead-scroll-toggle leftover as .topbar__nav above — nav link color
     is now forced by the var(--ntop-ink) override further down, but this
     transition still fires when that variable flips on theme toggle. */
  transition: none;
}
.topbar__button{
  padding: 8px 50px 8px 50px;
  text-transform: capitalize;
  border: 1px solid black;
  border-radius: 4px;
  display: block;
  width: fit-content;
  color: #000;
  bottom: 0px;
}
.topbar__button:hover{
  color: white !important;
  background-color: black;
  border-color: black;
}

.topbar__button_support{
  padding: 10px 40px 10px 40px;
  text-transform: capitalize;
  border: 1px solid #0064FF;
  background-color: #0064FF;
  border-radius: 100px;
  display: block;
  width: fit-content;
  white-space: nowrap;
  color: white !important;
  bottom: 0px;
  font-weight: 500 !important;
  font-family: 'IBM Plex Sans', sans-serif;
}

.topbar__button_support:hover{
  background-color: white;
  color: #0064FF !important;
  border-color: #0064FF;
}

@media (min-width: 768px) {
.topbar__link {
    margin-left: 11px;
    font-weight: 600
}
  }
.user-info{
  margin-left: 25px;
}
.topbar__controls a {
  text-decoration: none;  
}
.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: -50px;
  z-index: 3;
  width: 50px;
  height: 50px;
  font-size: 32px !important;
  line-height: 45px !important;
  text-align: center;
  border: 1px solid #0F1113;
  border-radius: 2px;
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.scroll-to-top:focus,
  .scroll-to-top:active {
    outline: 0;
  }
.scroll-to-top.is-active {
    bottom: 30px;
  }
.scroll-to-top:hover {
    color: #000;
    border-color: #000;
  }
@media (max-width: 767px) {
.scroll-to-top {
    display: none
}
  }
/* Embeds responsive */
.embed,
.embed-responsive {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  padding: 0 0 56.25%;
  margin-bottom: 30px;
  overflow: hidden;
}
.embed img, .embed-responsive img {
    width: 100%;
  }
.embed iframe,
  .embed embed,
  .embed object,
  .embed video,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
.embed:focus, .embed-responsive:focus {
    outline: none !important;
  }
/* Modifier class for 16:9 aspect ratio */
.embed-responsive--16by9 {
  padding-bottom: 56.25%;
}
/* Modifier class for 4:3 aspect ratio */
.embed-responsive--4by3 {
  padding-bottom: 75%;
}
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: block !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block;
  }
}
@media (min-width: --screen-lg) {
  .visible-lg {
    display: block;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
.visible-print-block {
    display: block !important
}
  }
.visible-print-inline {
  display: none !important;
}
@media print {
.visible-print-inline {
    display: inline !important
}
  }
.visible-print-inline-block {
  display: none !important;
}
@media print {
.visible-print-inline-block {
    display: inline-block !important
}
  }
@media print {
  .hidden-print {
    display: none !important;
  }
}
.page-header {
}
.page-header h2 {
    font-size: 40px;
    font-weight: 600;
    font-family: 'Graphik';
    margin-bottom: 10px;
  }
@media (max-width: 767px) {
.page-header {
    margin-top: calc(14px * 1.4)
}
  }
.page-header--with-border {
  border-bottom: 1px solid #eee;
}
.page-header--center {
  text-align: center;
}
.page-description { 
  text-align: left;
  color: black;
  font-size: 24px;
}
.see-all-articles{
  background-color: white;
  color: #121113;
  border: 1px solid #121113;
  display: block;
  width: 140px;
}
.see-all-articles:hover{
  background-color:#121113;
  color: white;

}
.recent-articles h3 {
    margin-bottom: calc(14px * 1.4 / 2);
  }
.related-articles h3 {
    margin-bottom: calc(14px * 1.4 / 2);
  }
@media (min-width: 768px) {
.recent-articles h3 {
      margin-top: calc(14px * 1.4 / 2)
  }
.related-articles h3 {
      margin-top: calc(14px * 1.4 / 2)
  }
    }
.recent-articles ul, .related-articles ul {
    padding-left: 0;
    list-style: none;
  }
.recent-articles ul > li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.related-articles ul > li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.recent-articles ul > li a {
        padding-bottom: 1px;
        color: #0F1113;
        border-bottom: 1px solid #eee;
      }
.related-articles ul > li a {
        padding-bottom: 1px;
        color: #0F1113;
        border-bottom: 1px solid #eee;
      }
.recent-articles h3 {
  font-size: calc(14px * 1.25);
}
.section-articles {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (min-width: 768px) {
.section-articles {
    margin-bottom: calc(14px * 1.4)
}
  }
.section-articles__title {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.25);
  font-weight: 600;
}
.section-articles__list {
  padding-left: 0;
  list-style: none;
}
.section-articles__item {
  margin-bottom: calc(14px * 1.4 / 2);
}
.section-articles__link {
  position: relative;
  padding-bottom: 1px;
  padding-left: 20px;
}
.section-articles__link:before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border-color: transparent transparent transparent #5A5B5E;
    border-style: solid;
    border-width: 5px 0 5px 6px;
  }
.community-section {
  background-color: #f6f7f8;
}
.community-recent-activity {
  padding: 90px 0;
  margin-bottom: 0;
  text-align: center;
}
.community-recent-activity h2 {
    font-size: 41px;
    font-weight: 400;
    text-align: center;
  }
.community-recent-activity .recent-activity-header {
    display: none;
  }
.community-recent-activity .recent-activity-list {
    padding-left: 0;
    margin-bottom: calc(14px * 1.4);
    list-style: none;
  }
@media (min-width: 768px) {
.community-recent-activity .recent-activity-list {
      display: flex;
      margin-bottom: 16px
  }
    }
.community-recent-activity .recent-activity-item {
    width: 100%;
    padding: 20px 20px 15px;
    margin-bottom: calc(14px * 1.4);
    border-radius: 8px;
    box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
  }
@media (min-width: 768px) {
.community-recent-activity .recent-activity-item {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: 30px;
      vertical-align: top
  }

      .community-recent-activity .recent-activity-item:last-child {
        margin-right: 0;
      }
    }
.community-recent-activity .recent-activity-item-meta {
    font-size: calc(14px * 0.85);
    color: #808488;
  }
.community-recent-activity .recent-activity-item-comment span:before {
    display: inline-block;
    margin-right: calc(12px / 4);
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    content: "\f075";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.community-recent-activity .recent-activity-item-parent {
    display: none;
    font-weight: 600;
    color: #0F1113;
  }
.community-recent-activity .recent-activity-controls a {
    display: inline-block;
    padding: 6px
      calc(12px + 12px / 2);
    margin-bottom: 0;
    font-size: calc(14px - 5);
    font-weight: 700;
    line-height: calc(14px * 1.4);
    color: #fff;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background-color: transparent;
    border: none;
    border-radius: 2px;
    transition: all 0.3s ease;
    touch-action: manipulation;
  }
.community-recent-activity .recent-activity-controls a:focus, .community-recent-activity .recent-activity-controls a:active:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
      }
.community-recent-activity .recent-activity-controls a:hover,
    .community-recent-activity .recent-activity-controls a:focus {
      color: #fff;
      text-decoration: none;
    }
.community-recent-activity .recent-activity-controls a:active {
      outline: none;
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
.community-recent-activity .recent-activity-controls a:hover,
    .community-recent-activity .recent-activity-controls a:focus,
    .community-recent-activity .recent-activity-controls a:active {
      color: #e0e0e0;
      background-color: transparent;
      border-color: transparent;
    }
.community-recent-activity .recent-activity-controls a:active {
      background-image: none;
    }
.recent-activity-item-link {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
}
.recent-activity-no-activities {
  margin-bottom: calc(14px * 1.4);
}
/* User Profiles */
.profile-header {
  padding: calc(14px * 1.4) 15px;
  margin-bottom: calc(14px * 1.4);
  color: #fff;
  text-align: center;
  background-color: #0F1113;
  border-radius: 2px;
}
.profile-header__avatar {
  display: inline-block;
}
.profile-header__avatar .avatar--agent:before {
      color: #fff;
    }
.profile-header__name {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.5);
}
.profile-header__name a {
    color: #fff;
  }
@media (min-width: 768px) {
.profile-header__name {
    font-size: calc(14px * 1.75 - 2px);
    font-weight: 300
}
  }
.profile-header__options [data-action="edit-profile"] {
    color: #0F1113;
    background-color: #fff;
    border: 1px solid #fff;
  }
.profile-header__options [data-action="edit-profile"]:hover,
    .profile-header__options [data-action="edit-profile"]:focus,
    .profile-header__options [data-action="edit-profile"]:active {
      color: #000;
      background-color: #e0e0e0;
      border-color: #e0e0e0;
    }
.profile-header__options [data-action="edit-profile"]:active {
      background-image: none;
    }
.profile-header__options [data-action="edit-profile"]:hover {
      opacity: 0.8;
    }
.profile-header__private-badge {
  display: inline-block;
  margin-bottom: calc(14px * 1.4);
  background-color: #0F1113;
}
.profile-header__description {
  word-break: break-all;
}
/* Profile Stats */
.profile-stats {
  padding-left: 0;
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 0.85);
  color: #eee;
  list-style: none;
}
.profile-stats__stat {
  margin-right: 12px;
  margin-bottom: calc(14px * 1.4 / 4);
}
@media (max-width: 767px) {
.profile-stats__stat {
    display: block
}

    .profile-stats__stat:before {
      display: none;
    }
  }
.profile-stats__label {
  margin-right: calc(12px / 2);
}
.profile-stats__value {
  color: #fff;
}
/* Profile Nav */
.profile-nav {
  margin-bottom: calc(14px * 1.4);
  overflow: hidden;
  font-size: calc(calc(14px * 0.85));
  font-weight: 600;
  background-color: #eee;
  border-radius: 2px;
}
.profile-nav__items {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.profile-nav__item {
  margin-bottom: 0;
}
@media (min-width: 480px) {
.profile-nav__item {
    display: inline-block;
    vertical-align: middle
}
  }
.profile-nav__item a {
    display: block;
    color: #0F1113;
  }
.profile-nav__item.is-active {
    color: #fff;
    background-color: #0F1113;
  }
.profile-nav__item.is-active {
    padding: calc(14px * 1.4 / 1.5)
      12px;
    line-height: 1;
  }
.profile-nav__item a {
    padding: calc(14px * 1.4 / 1.5)
      12px;
    line-height: 1;
  }
.profile-nav__item:after {
    right: 12px !important;
  }
/* Profile Section */
.profile-section {
  width: 100%;
}
.profile-section__header {
  margin-bottom: calc(14px * 1.4);
}
.profile-section__title {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.5);
}
.profile-section__description {
  font-size: calc(14px * 0.85);
  color: #818a91;
}
@media (min-width: 768px) {
.profile-section__description {
    padding-bottom: 0
}
  }
/* Profile Section Sorter */
.profile-section-sorter {
  font-size: calc(14px * 0.85);
}
.profile-section-sorter .dropdown {
    display: inline-block;
  }
@media (min-width: 768px) {
.profile-section-sorter {
    display: table;
    width: 100%
}
  }
@media (min-width: 768px) {
.profile-section-sorter {
    padding-top: 0;
    border-top: 0
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col {
    display: table-cell;
    vertical-align: middle
}
  }
@media (max-width: 767px) {
.profile-section-sorter__col--main {
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col--main {
    padding-right: calc(12px)
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col--btn {
    text-align: right
}
  }
/* Profile Contribution */
.profile-contribution {
  position: relative;
  padding: calc(14px * 1.4 / 2) 15px;
  word-wrap: break-word;
  background-color: #f6f6f6;
  border-radius: 2px;
}
.profile-contribution__header {
  margin-bottom: calc(14px * 1.4 / 4);
}
.profile-contribution__status {
  margin-bottom: calc(14px * 1.4 / 4);
}
.profile-contribution__title {
  margin-bottom: calc(14px * 1.4 / 4);
  font-size: 14px;
  font-weight: 600;
}
.profile-contribution__body {
  margin-bottom: calc(14px * 1.4 / 2);
}
.profile-contribution--list .profile-contribution__title:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.profile-contribution__breadcrumbs {
  padding: 0;
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 0.85);
}
.profile__no-activity {
  color: #808488;
  text-align: center;
}
.profile__private-activity {
  color: #808488;
  text-align: center;
}
/* Profile Activity */
.profile-activity-list {
  padding-left: 0;
  list-style: none;
}
.profile-activity {
  position: relative;
  margin-bottom: calc(14px * 1.4 * 1.5);
}
.profile-activity__header {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 0.85);
  font-weight: 600;
}
.profile-activity__header:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.profile-activity__avatar {
  width: 30px;
  height: 30px;
  margin-right: calc(12px / 2);
}
.profile-activity-list--articles .profile-contribution__title:before,
.profile-activity[class$="-article"] .profile-activity__header:before {
  font-weight: 400;
  content: "\f15c";
}
.profile-activity-list--posts .profile-contribution__title:before,
.profile-activity[class$="-post"] .profile-activity__header:before {
  font-weight: 400;
  content: "\f086";
}
.profile-activity-list--comments .profile-contribution__title:before,
.profile-activity[class$="-comment"] .profile-activity__header:before {
  font-weight: 400;
  content: "\f075";
}
.user-subscribe {
  display: inline-block;
}
.entry-info {
  margin-top: 20px;
  display: flex;
  font-size: calc(14px * 0.85);
  align-items: center;
}
.entry-info__avatar {
  padding-right: 12px;
}
.status-label {
  padding: 2px calc(12px / 2);
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
}
.status-label--pending {
  background-color: #f49e44;
}
.status-label--with-ticket {
  background-color: #0F1113;
}
.status-label--with-ticket:hover,
  .status-label--with-ticket:focus,
  .status-label--with-ticket:active {
    color: #fff;
  }
.status-label--solved,
.status-label--closed {
  background-color: #504d7f;
}
.status-label--new,
.status-label--open {
  background-color: #ff5252;
}
.status-label--answered {
  background-color: #f49e44;
}
.status-label--official {
  background-color: #0F1113;
}
.status-label--completed,
.status-label--answered {
  background-color: #504d7f;
}
.status-label--planned {
  background-color: #5A5B5E;
}
.status-label--not-planned {
  color: #0F1113;
  background-color: #eee;
}
.attachment-list {
  padding-left: 0;
  margin: 0;
  font-size: calc(14px * 0.85);
  list-style: none;
}
.attachment-list__item {
  position: relative;
  padding-left: calc(
    12px + 12px / 2
  );
  margin-bottom: calc(14px * 1.4 / 2);
}
.attachment-list__item:last-child {
    margin-bottom: 0;
  }
.attachment-list__icon {
  position: absolute;
  top: 4px;
  left: 0;
}
#promoted-articles{
  background-color: white;
}
.promoted-articles__list {
  display: flex;
  padding-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  list-style: none;
  flex-flow: row wrap;
  justify-content: start;
}
.promoted-articles__list li:nth-child(1) {
  border-top: 2px rgba(218, 218, 218, 1) solid;
  border-left: 2px rgba(218, 218, 218, 1) solid;
}
.promoted-articles__list li:nth-child(2) {
  border-top: 2px rgba(218, 218, 218, 1) solid;
}
.promoted-articles__list li:nth-child(3) {
  border-top: 2px rgba(218, 218, 218, 1) solid;
  border-right: 2px rgba(218, 218, 218, 1) solid;
}
.promoted-articles__list li:nth-child(4) {
  border-bottom: 2px rgba(218, 218, 218, 1) solid;
  border-left: 2px rgba(218, 218, 218, 1) solid;
}
.promoted-articles__list li:nth-child(5) {
  border-bottom: 2px rgba(218, 218, 218, 1) solid;
}
.promoted-articles__list li:nth-child(6) {
  border-bottom: 2px rgba(218, 218, 218, 1) solid;
  border-right: 2px rgba(218, 218, 218, 1) solid;
}
@media (min-width: 768px) {
.promoted-articles__list {
}
  }
.promoted-articles-item {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  font-size: calc(14px - 2px);
  color: #f49e44;
  flex: 0 580px;
  min-height : 240px;
  padding : 0;
  border: 1px rgba(218, 218, 218, 1) solid;
} 
@media  (max-width: 1253px){
  .promoted-articles-item {
    flex: 1 600px;
    border: 1px rgba(218, 218, 218, 1) solid !important;
    border-left: 2px rgba(218, 218, 218, 1) solid !important;
    border-right: 2px rgba(218, 218, 218, 1) solid !important;
  }
  .promoted-articles-item:nth-child(1) {
    border-top: 2px rgba(218, 218, 218, 1) solid !important;
    border-left: 2px rgba(218, 218, 218, 1) solid !important;
    border-right: 2px rgba(218, 218, 218, 1) solid !important;
  }
  .promoted-articles-item:nth-child(6) {
    border-bottom: 2px rgba(218, 218, 218, 1) solid !important;
    border-left: 2px rgba(218, 218, 218, 1) solid !important;
    border-right: 2px rgba(218, 218, 218, 1) solid !important;
  }
}
@media  (min-width: 1253px){
  .promoted-articles-item {
    flex: 0 33.3%;
  }
}
@media  (max-width: 1479px){
  .category-block__option_url-block {
    width: 100% !important;
  }
}

.article__body{
  font-size: 15px;
}
.promoted-articles-item__content {
  display: inline-block;
  vertical-align: top;
  margin-left: 1rem;
  margin : 0 50px;
}
.promoted-articles__title {
  font-size: 40px;
  font-weight: 400;
  text-align: left;
}
.promoted-articles-description {
  margin-top: 0px;
  margin-bottom: 48px;
  color: #000;
  font-size: 24px;
}
@media (min-width: 768px) {
  .promoted-articles__title {
      margin-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .promoted-articles__title {
      margin-top: 50px;
      font-size: 28px
  }
}

@media (max-width: 767px) {
  .custom-redesign-promoted .slider-right{
    margin-right: -55px;
  }
  .custom-redesign-promoted .slider-left{
    margin-left: -55px;
  }
}

.promoted-articles-item__title {
  display: block;
  margin-top: 40px;
  margin-bottom: calc(14px * 1.4 / 4);
  font-size: 18px;
}
.custom-blocks + .promoted-articles-section {
  padding-top: calc(14px * 1.5 * );
  background-color: #F7F6FA;
}
.custom-redesign-promoted .slider-left{
  display: inline-block;
  float: left;
  margin-left: -75px;
  margin-top: 16.5em;
}
.custom-redesign-promoted .slider-left i::before{
  color: white;
  background-color: #000;
  padding: 9px 10px;
  font-size: 18px;
  border-radius: 100px;
  cursor: pointer;
}
.custom-redesign-promoted .slider-right{
  display: inline-block;
  float: right;
  margin-right: -75px;
  margin-top: 16.5em;
}
.custom-redesign-promoted .slider-right i:before{
  color: white;
  background-color: #000;
  padding: 9px 10px;
  font-size: 18px;
  border-radius: 100px;
  cursor: pointer;
}
.callout {
  padding: calc(14px * 1.4) 20px;
  margin-bottom: calc(14px * 1.4);
  background-color: #eee;
  border-left: 5px solid;
}
.callout p{
  color: #000;
}
.callout p:last-child {
    margin-bottom: 0;
  }
.callout--transparent {
  position: relative;
  background-color: transparent;
  border: 1px #dedede;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.46);
}
.callout--transparent a::before {
  position: absolute;
  margin-left: -15px;
  margin-top: 20px;
  width: 18px;
  height: 18px;
  content: "";
  background: var(--icon-search ) no-repeat;
  transform: translateY(-50%);
}
.callout--success {
  color: #0F1113;
  background-color: #e6e6f0;
  border-color: #504d7f;
}
.callout--success .callout__title {
    color: #504d7f;
  }
.callout--info {
  color: black;
  background-color: #F7F6FA;
  border-color: #B4F8D8;
}
.callout--info .callout__title {
    color: #5bc0de;
  }
.callout--warning {
  color: #0F1113;
  background-color: #fad2a9;
  border-color: #f49e44;
}
.callout--warning .callout__title {
    color: #f49e44;
  }
.callout--danger {
  color: #0F1113;
  background-color: #ffebeb;
  border-color: #ff5252;
}
.callout--danger .callout__title {
    color: #ff5252;
  }
.callout--primary {
  color: #0F1113;
  background-color: #8996a2;
  border-color: #0F1113;
}
.callout--primary .callout__title {
    color: #0F1113;
  }
.callout--dashed {
  border-style: dashed;
  border-width: 1px;
}
.image-with-border {
  padding: calc(12px - 2px);
  border: 1px solid #d3d6d8;
  border-radius: 2px;
}
.image-with-shadow {
  box-shadow: 0 5px 15px 2px #666;
}
.image-with-lightbox {
  cursor: pointer;
}
.image-overlay {
  position: relative;
}
.image-overlay:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-color: rgba(255, 255, 255, 0.3);
  }
.image-with-video-icon {
  position: relative;
  display: block;
}
.image-with-video-icon img {
    width: 100%;
  }
.image-with-video-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    font-size: 0;
    content: "";
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 30px 0 30px 60px;
    transition: transform 0.6s ease;
    transform: translate(-50%, -50%);
  }
.image-with-video-icon:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
  }
.image-with-video-icon:active:before, .image-with-video-icon:hover:before {
      transform: translate(-50%, -50%) scale(1.1);
    }
.list-colored,
.list-bullet {
  padding-left: 0 !important;
  list-style-type: none;
  counter-reset: list;
}
.list-colored li {
    position: relative;
    padding-left: calc(12px + 30px);
    margin-bottom: calc(14px * 1.4 / 1.5) !important;
    counter-increment: list;
  }
.list-colored li:before {
      position: absolute;
      top: -3px;
      left: 0;
      z-index: 1;
      width: 30px;
      height: 30px;
      font-size: calc(14px * 0.85);
      line-height: 30px;
      color: #fff;
      text-align: center;
      content: counter(list);
      background-color: #0F1113;
      border-radius: 50%;
    }
.list-colored ol {
    margin-bottom: 14px;
    list-style-type: none;
    counter-reset: list;
  }
.list-bullet li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
  }
.list-bullet li:before {
      position: absolute;
      top: -2px;
      left: 0;
      font-family: "Font Awesome 5 Pro";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      color: #0F1113;
      content: "\f058";
    }
.list-bullet ul {
    margin-bottom: 14px;
    list-style: none;
  }
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-primary {
  background-color: #0F1113;
}
.text-info {
  background-color: #5bc0de;
}
.text-warning {
  background-color: #f49e44;
}
.text-danger {
  background-color: #ff5252;
}
.text-success {
  background-color: #504d7f;
}
.accordion {
  padding-top: 0;
  margin-bottom: calc(14px * 1.4);
  border: 1px solid #ddd;
  border-radius: 2px;
}
.accordion__item-title {
  position: relative;
  padding: 15px 20px 15px 52px;
  font-size: calc(14px * 1.25);
  cursor: pointer;
}
.accordion__item-title:not(.accordion__item-title--active) {
    border-bottom: 1px solid #ddd;
  }
.accordion__item-title:before {
    position: absolute;
    content: "";
  }
.accordion__item-content {
  display: none;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.accordion__item-content p:last-child {
    margin-bottom: 0;
  }
.accordion__item:last-child .accordion__item-title {
  border-bottom: none;
}
.accordion--default .accordion__item-title:before {
    top: 50%;
    left: 22px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-bottom: 2px solid #0F1113;
    border-left: 2px solid #0F1113;
    transition: transform 0.3s;
    transform: rotate(-45deg);
  }
.accordion--default .accordion__item-title--active {
    background-color: #f0f0f0;
  }
.accordion--default .accordion__item-title--active:before {
      transition: transform 0.3s;
      transform: rotate(135deg);
    }
.accordion--colored .accordion__item-title {
    transition: background-color 0.3s;
  }
.accordion--colored .accordion__item-title:before,
    .accordion--colored .accordion__item-title:after {
      top: 50%;
    }
.accordion--colored .accordion__item-title:before {
      left: 20px;
      width: 10px;
      height: 2px;
      margin-top: -1px;
      background-color: #818a91;
    }
.accordion--colored .accordion__item-title:after {
      position: absolute;
      left: 24px;
      width: 2px;
      height: 10px;
      margin-top: -5px;
      content: "";
      background-color: #818a91;
    }
.accordion--colored .accordion__item-title--active {
      color: #fff;
      background-color: #0F1113;
      transition: background-color 0.3s;
    }
.accordion--colored .accordion__item-title--active:before {
        background-color: #fff;
      }
.accordion--colored .accordion__item-title--active:after {
        display: none;
      }
.tabs {
  margin-bottom: calc(14px * 1.4);
}
.tab {
  display: block;
  padding: 30px;
  margin-top: -1px;
  border: 1px solid #ddd;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.tab p:last-child {
    margin-bottom: 0;
  }
@media (min-width: 768px) {
.tab {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}
  }
.tab:nth-child(2) {
  border-top-left-radius: 0;
}
.tabs-link {
  display: block;
  padding: 8px 30px;
  margin: 0;
  font-weight: 600;
  color: #0F1113;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-width: 0;
}
.tabs-link:hover {
    color: #0F1113;
  }
@media (max-width: 767px) {
.tabs-link {
    border-top-color: #ddd;
    border-right-color: #ddd;
    border-left-color: #ddd
}

    .tabs-link:first-child {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }
  }
@media (min-width: 768px) {
.tabs-link {
    display: inline-block
}
  }
.tabs-link.is-active {
  color: #0F1113;
  cursor: pointer;
  border-color: #ddd;
}
.tabs-link.is-active:hover {
    color: #0F1113;
    cursor: default;
  }
@media (min-width: 768px) {
.tabs-link.is-active {
    border-bottom: 1px solid #fff;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}
  }
.tabs--colored-1 .tab {
    background-color: #f6f7f8 !important;
  }
.tabs--colored-1 .tabs-link.is-active {
    background-color: #f6f7f8;
    border-bottom-color: #f6f7f8;
  }
.tabs--colored-2 .tabs-link:hover {
      color: #0F1113;
    }
.tabs--colored-2 .tabs-link.is-active {
    color: #fff;
    background-color: #0F1113;
    border-color: #0F1113;
  }
.tabs--colored-2 .tabs-link.is-active:hover {
      color: #fff;
    }
.tabs--colored-2 .tab {
    background-color: #f6f7f8 !important;
  }
.sidenav li.sidenav__category {
  padding-bottom: calc(14px * 1.4 / 2);
  margin-bottom: calc(14px * 1.4 / 1.5);
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}
.sidenav li.sidenav__category:last-of-type {
  border: 0;
}
.sidenav__category-name {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.25);
  font-weight: 600;
}
@media (max-width: 767px) {
  .sidenav-container {
    margin-bottom: 24px;
    border-bottom: 1px solid #dee2e6;
  }
}
@media (min-width: 768px) {
  .sidenav-container {
    padding-right: 15px;
    border-right: 1px solid #dee2e6;
  }
}
.sidenav__section-name:after,
span.sidenav__category-name:after {
  display: none !important;
}
.sidenav__category-name,
.sidenav__category-name:hover {
  color: #0F1113;
}
.sidenav__article.is-active .sidenav__article-name {
  font-weight: normal;
  color: #0F1113;
}
span.sidenav__section-name {
  font-weight: 600;
}
.prevnext {
  display: block;
  margin-bottom: calc(14px * 1.4);
}
.prevnext__block {
  display: inline-flex;
  margin-bottom: calc(14px * 1.4);
  -ms-flex-align: center;
  flex-flow: row nowrap;
  align-items: center;
}
.prevnext__block--prev {
  float: left;
}
.prevnext__block--next {
  float: right;
}
.prevnext__arrow-left {
  margin-right: 12px;
}
.prevnext__arrow-right {
  margin-left: 12px;
}
.prevnext__title {
  padding: 0 calc(14px * 1.4 / 2);
}
@media (max-width: 767px) {
  .prevnext__title {
    display: none;
  }
}
.prevnext__link {
  min-width: 90px;
}
/* Community */
.community-nav__item {
  float: left;
}
.community-nav__item + .community-nav__item {
    margin-left: 12px;
  }
.community-nav__item.is-active {
    font-weight: 600;
  }
.community-nav__item--button {
  float: right;
}
.vote {
  width: 100%;
  max-width: 60px;
}
.vote [aria-selected="true"] {
    z-index: 2;
  }
.vote--post {
  display: flex;
  width: 100%;
  max-width: calc(14px * 1.4 * 2.3333333);
  flex-flow: row wrap;
  align-items: center;
}
.vote--post a {
    width: 100%;
  }
@media (max-width: 767px) {
.vote--post {
    flex-flow: row nowrap
}
  }
.vote-sum {
  display: block;
  width: 100%;
  padding: calc(14px * 1.4 / 4)
    calc(14px * 1.4 / 2);
  font-weight: 600;
  text-align: center;
}
.vote-control {
  position: relative;
  z-index: 1;
  display: block !important;
  padding: calc(14px * 1.4 / 4)
    calc(14px * 1.4) !important;
  font-size: 0px !important;
  line-height: 1.4 !important;
  color: #0F1113 !important;
  background-color: transparent !important;
  border: 1px solid #0F1113 !important;
}
.vote-control:hover,
  .vote-control:active,
  .vote-control:focus,
  .vote-control--voted {
    z-index: 2;
    background-color: blue;
  }
.vote-control:hover:before, .vote-control:active:before, .vote-control:focus:before, .vote-control--voted:before {
      color: #0976b4;
    }
.vote-control--active {
    border-color: #474747;
  }
.vote-control--up:hover{
  background-color: #0976b4;
}
.vote-control--up::before{
  font-family: "Font Awesome 5 Pro";
  content: "\f077";
  color: #000;
  /* position: absolute; */
  background-color: white;
  height: auto;
  width: 21px;
  text-align: center;
  font-size: 14px;
}
.vote-control--down::before{
  font-family: "Font Awesome 5 Pro";
  content: "\f078";
  color: #000;
  /* position: absolute; */
  background-color: white;
  height: auto;
  width: 21px;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 768px) {
.topic-list-page {
    margin-bottom: calc(14px * 1.4)
}
  }
.topic-list-item:nth-child(2n + 1) {
    clear: left;
  }
.topic-list-item__box {
  padding: calc(14px * 1.4) 12px;
  margin-bottom: calc(14px * 1.4);
  border: 1px solid #eee;
  border-radius: 2px;
}
.topic-list-item__title {
  margin-bottom: calc(14px * 1.4 / 2);
}
.topic-page {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (max-width: 767px) {
.topic-page {
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
.topic {
  display: table;
  width: 100%;
  padding-bottom: calc(14px * 1.4 / 2);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
.topic__col {
  display: table-cell;
  vertical-align: inherit;
}
@media (min-width: 480px) {
.topic__col {
    vertical-align: top
}
  }
.topic__col--new-post {
  text-align: right;
}
.topic__title {
  width: 100%;
  margin-top: calc(14px * 1.4 / 2);
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.75 - 2px);
}
.topic-filters__item {
  float: left;
  margin-right: calc(12px / 2);
}
@media (max-width: 767px) {
.topic-filters__item {
    margin-bottom: calc(14px * 1.4 / 2)
}
  }
.topic-controls {
  margin-bottom: calc(14px * 1.4 * 2);
}
@media (max-width: 767px) {
.topic-controls {
    margin-bottom: calc(14px * 1.4)
}
  }
@media (max-width: 1180px) {
  .topbar__container-inner {
    max-width: 90vw !important;
  }
}
.topic-controls__item {
  float: left;
}
.topic-followers {
  margin-right: calc(12px / 2);
}
@media (min-width: 768px) {
.topic-controls__item--subscribe {
    float: right;
    white-space: nowrap;
    color: #fff;
    border-radius: 5px;
}
  }
.topic-controls__item--subscribe .dropdown {
    display: inline-block;
    vertical-align: middle;
  }
.topic-controls__item--subscribe .dropdown-menu {
    right: 0;
    left: initial;
  }
@media (min-width: 768px) {
.post-page {
    margin-bottom: calc(14px * 1.4 * 2)
}
  }
.post-page .comment__official-heading {
    right: 64px;
  }
.post-page .comment {
    min-height: 160px;
  }
.post-page .comment__header {
    margin-bottom: calc(14px * 1.4);
  }
.post {
  position: relative;
  margin-bottom: calc(14px * 1.4);
}
.post__title {
  padding-right: calc(12px * 1.5);
  font-size: calc(14px * 1.5);
  font-weight: 600;
}
@media (min-width: 768px) {
.post__title {
    font-size: calc(14px * 1.75 - 2px)
}
  }
@media (min-width: 992px) {
.post__title {
    font-size: 41px
}
  }
.post-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(14px * 1.4);
}
.post-meta__col {
  display: table-cell;
  vertical-align: top;
}
.post-meta__col--main {
  width: 100%;
  padding-right: 12px;
}
.post__text {
  word-wrap: break-word;
}
.post__body ul {
    list-style: disc;
  }
.post__body ul,
  .post__body ol {
    padding-left: 20px;
  }
.post__body ul ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.post__body ul ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.post__body ol ul {
      margin-top: calc(14px * 1.4 / 2);
    }
.post__body ol ol {
      margin-top: calc(14px * 1.4 / 2);
    }
.post__body ul li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
.post__body ol li {
      margin-bottom: calc(14px * 1.4 / 2);
    }
@media (min-width: 768px) {
.post__body {
    padding-right: calc(14px * 1.4 * 3.5833333)
}
  }
.post__voting-and-actions {
  position: relative;
  padding-bottom: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
  text-align: center;
  border-bottom: 1px solid #eee;
}
.post__voting-and-actions .dropdown-toggle {
    font-size: 0;
  }
.post__voting-and-actions .dropdown-toggle:after {
    margin-left: 0;
    font-size: 14px;
    font-weight: 900;
    content: "\f013";
  }
@media (min-width: 768px) {
.post__voting-and-actions {
    position: absolute;
    top: 0;
    right: 0;
    border: 0
}
  }
.post__actions {
  width: 100%;
  padding: 10px 12px;
  text-align: center;
}
.post__actions .dropdown-menu {
    width: auto;
  }
.post__actions .dropdown-menu [role="menuitem"] {
      white-space: nowrap;
    }
.post-callout {
  padding: calc(14px * 1.4 / 2) 15px;
  margin-bottom: 55px;
  background-color: #eee;
}
.post-callout__title {
  font-size: calc(14px * 1.1);
  font-weight: 600;
}
@media (min-width: 768px) {
.post-list-page {
    margin-bottom: calc(14px * 1.4 * 2)
}
  }
.post-list-item {
  padding-bottom: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
  border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
.post-list-item {
    display: table;
    width: 100%
}
  }
.post-list-item:last-of-type {
    border-bottom: 0;
  }
.post-list-item__title {
  margin-bottom: calc(14px * 1.4 / 2);
  font-size: calc(14px * 1.5);
}
.post-list-item__title {
    position: relative;
    top: -4px;
    font-size: 50%;
  }
@media (min-width: 768px) {
.post-list-item__col {
    display: table-cell;
    vertical-align: top
}
  }
@media (min-width: 768px) {
.post-list-item__col--main {
    width: 60%
}
  }
@media (min-width: 768px) {
.post-list-item__col--side {
    width: 40%;
    text-align: right
}
  }
.post-info {
  font-size: 14px;
  color: #808488;
}
@media (min-width: 768px) {
.post-info {
    float: right;
    min-width: 90px;
    padding: calc(12px / 2)
      12px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 2px
}
  }
@media (min-width: 768px) {
.post-info__count {
    display: block;
    font-weight: 600;
    color: #0F1113
}
  }
.post-info + .post-info {
  margin-right: 12px;
}
@media (max-width: 767px) {
    .post-info + .post-info:before {
      margin-right: calc(12px / 2);
      font-size: 10px;
      font-weight: 900;
      content: "\2022";
    }
  }
.post-status {
  display: inline-block;
  padding: 1px calc(12px / 2);
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
}
.post-status--completed,
.post-status--answered {
  background-color: #504d7f;
}
.post-status--planned {
  background-color: #5A5B5E;
}
.post-status--not-planned {
  color: #0F1113;
  background-color: #eee;
}
@media (min-width: 768px) {
.new-post-page {
    margin-bottom: calc(14px * 1.4 * 2)
}
  }
.new-post-title {
  font-size: calc(14px * 1.5);
}
@media (min-width: 768px) {
.new-post-title {
    font-size: calc(14px * 1.75 - 2px)
}
  }
@media (min-width: 992px) {
.new-post-title {
    font-size: calc(14px * 2.5)
}
  }
.new-post-form {
  margin-bottom: calc(14px * 1.4);
}
.new-community-post-page {
  padding-top: calc(14px * 1.4);
  margin-bottom: calc(14px * 1.4);
}
@media (max-width: 767px) {
.new-community-post-page {
    padding-top: 0;
    margin-bottom: 0
}
  }

/* responsive slidesframe */
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
padding-left: 10%;
padding-top: 5%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
}

.intrinsic-container iframe {
position: absolute;
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
  height: 550px;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

/* learning resources */
.container.learning-resources{
  margin: 50px auto;
}

.learning-resources__title {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 10px;
  text-align: left;
}
.learning-resources-description {
  margin-top: 0px;
  margin-bottom: 48px;
  color: var(--ntop-ink);
  font-size: 24px;
}
.learning-resources-wrapper{
  display: flex;
  padding-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  list-style: none;
  flex-flow: row wrap;
  justify-content: space-between;
}
.learning-block-option__title{
  font-size: 40px;
  color: white;
  padding: 30px;
  line-height: 48px;
  margin-bottom: 0px;
}
.learning-block__description{
  font-size: 16px;
  color: white;
  padding: 30px 30px 20px 30px;
  margin: 0px;
}
@media (min-width : 767px) {
  .hide-on-full{
    display: none;
  } 
}
.learning-block-option__image{
  background: var(--icon-search ) no-repeat;
  background-position: center;
  background-size: cover;
  min-width: 350px;
  width: 80%;
  padding : 0 20px;
  height: 260px;
  margin: 18px auto;
}
.learning-block-option__image.engineering-guides{
  margin: 6px auto;
}
.learning-block__option_url-block{
  background-color: #000;
  flex: 0 32%;
  margin-bottom: 20px;
}
.learning-block__button{
  display: block;
  padding : 10px 41.5px;
  border-radius: 100px;
  background-color: #000;
  color: white;
  border: 1px white solid;
  margin: 0px 30px 30px 30px;
  width: fit-content;
  cursor: pointer;
  font-family: 'Graphik';
  font-weight: 600;
}
.learning-block__button:hover{
  background: white;
  color: #000;
  border: 1px rgba(226, 226, 226, 1) solid;
  text-decoration: solid;
}
@media (min-width: 768px) {
  .learning-resources__title {
      margin-bottom: 10px
  }
}
@media (max-width: 767px) {
  .learning-resources__title {
      font-size: 28px
  }
}
@media (max-width: 1480px){
  .learning-block__option_url-block{
    flex: 0 100%;
  }
}

/* nTop Copyright Footer */

.ntop-logo {
  margin-left: -16px;
  /* Was 0 — logo sat flush against the address text below it while the
     other two gaps in this stack (address->social, social->copyright) are
     both 24px, an inconsistent rhythm down the footer column. */
  margin-bottom: 24px;
}
.ntop-legal-address p {
  font-size: 1rem;
  color: hsla(0, 0%, 100%, .55);
}
.ntop-social-links {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer-social-link {
  text-decoration-line: none;
	color: rgb(255, 255, 255);
}
.footer-social-link:hover {
  text-decoration-line: none;
	color: hsla(0, 0%, 100%, .55);
}
.ntop-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
}
@media (max-width: 767px) {
  .ntop-copyright {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
}
.ntop-copyright p {
  margin: 0;
  font-size: .875rem;
  color: hsla(0, 0%, 100%, .55);
}
.ntop-copyright a {
  font-size: .875rem;
  color: hsla(0, 0%, 100%, .55);
}
.ntop-copyright-link {
  text-decoration-line: underline;
}
.ntop-copyright-link:hover {
  text-decoration-line: none;
}

/* ==========================================================================
   nTop Community theme alignment
   Overrides (appended, not a rewrite of the base theme above) so this Guide
   theme reads as the same product as community.ntop.com: cream paper
   background, near-black ink text, signal-teal accent, flat 2px corners,
   Inter Tight / JetBrains Mono type. Keeps existing class names/markup so
   the base rules above still apply everywhere this block doesn't touch.
   ========================================================================== */
:root {
  --ntop-paper: #F4F2EC;
  --ntop-paper-2: #ECE8DE;
  --ntop-paper-3: #E2DCCC;
  --ntop-ink: #0F1113;
  --ntop-ink-2: #2A2B2E;
  --ntop-ink-3: #5A5B5E;
  --ntop-ink-4: #8B8A85;
  --ntop-rule: rgba(15,17,19,0.14);
  --ntop-rule-strong: rgba(15,17,19,0.5);
  --ntop-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ntop-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark mode: same tokens, dark values, toggled by theme-toggle.js via a
   data-ntop-theme attribute on <html> (set inline in document_head.hbs
   before first paint, so there's no flash of the wrong theme). Everything
   below that already reads var(--ntop-*) picks this up for free — the
   original, un-overridden Copenhagen CSS (dropdowns, forms, comment
   threads, etc.) is not part of this and will still read light. */
html[data-ntop-theme="dark"] {
  --ntop-paper: #0E1013;
  --ntop-paper-2: #15181C;
  --ntop-paper-3: #1D2126;
  --ntop-ink: #F2EFE8;
  --ntop-ink-2: #D6D2C7;
  --ntop-ink-3: #8E8A80;
  --ntop-ink-4: #5C5952;
  --ntop-rule: rgba(242,239,232,0.14);
  --ntop-rule-strong: rgba(242,239,232,0.45);
}

/* Footer logo: ntop-logo.png is black wordmark art on a transparent
   background (fine on the light footer, invisible on the dark one);
   nTop-Logo_Dark-theme_1x.png is the light-colored counterpart for dark
   backgrounds. Swap between them by theme. (This used to be handled by a
   bare, unscoped .logo__main/.logo__secondary display toggle left over from
   the header's old image-based logo — the header renders its logo as text
   now, so that rule had nothing legitimate left to target and was instead
   hijacking this footer image: forcing it hidden in light mode and, in dark
   mode, showing the wrong-colored asset nearly invisible against the dark
   background — exactly backwards from what a "logo__main" swap should do
   for it. Renamed to footer-logo--light/--dark, scoped to just this image,
   so nothing else can collide with it again.) */
.footer-logo--dark {
  display: none;
}
html[data-ntop-theme="dark"] .footer-logo--light {
  display: none;
}
html[data-ntop-theme="dark"] .footer-logo--dark {
  display: inline-block;
}

.topbar__theme-toggle {
  /* position: relative + the icons' position: absolute + inset: 0 +
     margin: auto below is a centering method that doesn't depend on
     flex/line-height/baseline behavior at all — used because align-items:
     center alone kept leaving the icon visibly off-center. */
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 0 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--ntop-rule-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--ntop-ink);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}
.topbar__theme-toggle:hover {
  background: var(--ntop-paper-2);
}
.topbar__theme-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
}
.topbar__theme-toggle .icon-moon {
  display: none;
}
html[data-ntop-theme="dark"] .topbar__theme-toggle .icon-sun {
  display: none;
}
html[data-ntop-theme="dark"] .topbar__theme-toggle .icon-moon {
  display: block;
}

/* .topbar__col is a direct child of .topbar__nav, spans full width as a
   table-cell (see the @media rule above), and has its own unconditional
   black background + white text — independent of .topbar__nav's own
   background. It was painting over the paper background this whole time
   regardless of what .topbar__nav itself was set to. */
.topbar__col {
  background-color: var(--ntop-paper) !important;
}

/* Logo, take two: rather than juggling two inconsistent uploaded image
   assets (one partial, one full, neither with a light-colored variant for
   dark mode), render the wordmark as text — matching how
   community.ntop.com does its own "[icon] nTop / Community" lockup. Text
   color is a CSS variable, so it flips with the theme for free. */
.logo--text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo--text a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo__icon {
  width: 20px;
  height: 20px;
  max-height: 20px !important;
  border-radius: 4px;
  flex-shrink: 0;
}
.logo__word,
.logo__product {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ntop-ink);
}
.logo__divider {
  font-size: 16px;
  font-weight: 400;
  color: var(--ntop-ink-4);
}

/* .topbar__inner is display:table with two .topbar__col cells each forced
   to width:100% — a real <table>-style layout that splits the bar ~50/50
   regardless of content, leaving a large dead gap between the nav links
   (left cell, content-width) and the search/toggle/buttons (right cell,
   float:right within its own half). Force a real flex row instead so the
   right-hand cluster starts immediately after the nav links. */
.topbar__inner {
  display: flex !important;
  align-items: center;
}
.topbar__inner > .topbar__col:first-child {
  width: auto !important;
  flex: 0 1 auto;
}
.topbar__inner > .topbar__col.topbar__menu {
  width: auto !important;
  flex: 1 1 auto;
}
.topbar__controls {
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.topbar__col a:not(.topbar__button_support):not(.topbar__button_itar),
.topbar__col a:not(.topbar__button_support):not(.topbar__button_itar):visited,
.topbar__col span {
  color: var(--ntop-ink) !important;
}

/* .topbar__container-inner shares the .container-inner class used by the
   hero/body content, which caps width at 75vw (line ~1234) — meant for
   readable content width, not the nav bar. The topbar-specific rule above
   only sets width:100vw and never resets max-width, so that 75vw cap still
   wins, leaving ~12.5vw of dead margin on each side. That starves the
   logo/search/links/buttons row of space and is what forces the second
   group onto its own line. Let the topbar run edge-to-edge with fixed
   padding instead, so the logo sits at the left edge and the rest of the
   row has room to stay on one line. */
.topbar__container-inner {
  max-width: 100% !important;
  padding: 0 24px;
  box-sizing: border-box;
}

body, .article__body, input, textarea, select, button {
  font-family: var(--ntop-sans) !important;
}
code, pre, kbd, .hljs {
  font-family: var(--ntop-mono) !important;
}
html, body {
  background: var(--ntop-paper);
  color: var(--ntop-ink);
}
h1, h2, h3, h4, h5, h6 { color: var(--ntop-ink); }
/* Content links only (article/comment bodies) get an underline for
   scannability without color — the topbar/buttons/chrome are untouched. */
.article__body a, .markdown a, .comment-body a {
  color: var(--ntop-ink);
  text-decoration: underline;
  text-decoration-color: var(--ntop-rule-strong);
  text-underline-offset: 2px;
}
.article__body a:hover, .markdown a:hover, .comment-body a:hover {
  text-decoration-color: var(--ntop-ink);
}

/* Top nav: always paper/ink, regardless of scroll position.
   header.js's handleScroll() adds/removes topbar__nav--white based on
   scrollTop vs. the nav's own height — leftover from the old design where
   a transparent/dark bar sat over a tall hero image and turned white once
   you scrolled past it. Our hero is short and light now, so that toggle no
   longer applies; targeting the unconditional .topbar__nav (not the
   scroll-dependent modifier classes) keeps the nav paper/ink at all times,
   including on load before any scroll event has fired. */
.topbar__nav {
  background-color: var(--ntop-paper) !important;
  border-bottom: 1px solid var(--ntop-rule) !important;
}
.topbar__link:not(.topbar__button_support):not(.topbar__button_itar),
.topbar__link:visited:not(.topbar__button_support):not(.topbar__button_itar),
.help-center-navigate,
.help-center-navigate:visited,
.sign-in,
.sign-in:visited,
#other-resources,
#user-name,
.topbar .dropdown-toggle,
.help-center-name a,
.help-center-name a:visited {
  color: var(--ntop-ink) !important;
}
.topbar__link:hover,
.help-center-navigate:hover {
  color: var(--ntop-ink-2) !important;
}
.lines-button .lines,
.lines-button .lines:before,
.lines-button .lines:after {
  background-color: var(--ntop-ink) !important;
}

/* Docs / Learn / Community: tighten up against the logo with a hairline
   divider (matching community.ntop.com's "nTop / Community | Home Browse…"
   masthead) instead of the base theme's wide 15-20px margins, and drop the
   inherited #0064FF hover color for the ink monochrome used everywhere else. */
.logo-wrapper, .header-top-wrapper {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
}
.header-top-wrapper {
  gap: 14px;
  margin-right: 24px !important;
}
.header-nav-divider {
  color: var(--ntop-rule-strong);
  font-size: 15px;
  line-height: 1;
}
.help-center-name {
  display: inline-flex !important;
  align-items: center;
  gap: 18px;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 500;
}
.help-center-name a {
  margin: 0 !important;
  color: var(--ntop-ink);
  line-height: 1;
}
.help-center-name a:hover {
  color: var(--ntop-ink);
  text-decoration: underline;
}

/* Contact Support / Request ITAR Support: flat bordered pills, brutalist radius */
.topbar__button_support,
.topbar__button_itar {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ntop-ink) !important;
  border-radius: 2px !important;
  padding: 6px 14px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.topbar__button_support {
  background: var(--ntop-ink) !important;
  color: var(--ntop-paper) !important;
}
.topbar__button_support:hover {
  background: var(--ntop-ink-2) !important;
  border-color: var(--ntop-ink-2) !important;
  color: var(--ntop-paper) !important;
}
.topbar__button_itar {
  background: transparent !important;
  color: var(--ntop-ink) !important;
  margin-right: 8px;
}
.topbar__button_itar:hover {
  background: var(--ntop-paper-2) !important;
  border-color: var(--ntop-ink) !important;
  color: var(--ntop-ink) !important;
}

/* Sign In: match the flat bordered-box style used by Contact Support /
   ITAR Support. The base theme's rule (pill radius, white border, IBM Plex
   Sans, 8px/50px padding) was built for the old dark-hero nav — the white
   border is invisible now that the nav is light/paper, and the shape and
   font no longer match the rest of the button row. */
.sign-in {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-weight: 500 !important;
  border: 1px solid var(--ntop-ink) !important;
  border-radius: 2px !important;
  padding: 6px 14px !important;
}
.sign-in:hover {
  background: var(--ntop-paper-2) !important;
  border-color: var(--ntop-ink) !important;
  /* Base .sign-in:hover (line ~1160) still sets color: black !important —
     invisible-ish in light mode against near-black ink anyway, but in dark
     mode it flipped Sign In's hover text to solid black against the dark
     paper-2 hover background above. */
  color: var(--ntop-ink) !important;
}

/* Buttons, inputs: flat corners instead of the default rounded look */
.btn, .button, button, input[type="submit"], .search-box input[type="search"] {
  border-radius: 2px !important;
}

/* Nav search box: search moved from the hero into the persistent top nav,
   matching nTop Learn / nTop Community. Kill the hero-positioned icon
   (absolute, math'd for a 60vw hero field) and give the input a compact
   bordered pill instead. */
.topbar__search {
  display: flex;
  align-items: center;
  margin-right: 6px;
}
.topbar__search .search:before {
  display: none;
}
.topbar__search #query {
  height: 32px !important;
  width: 280px;
  max-width: 280px;
  background: transparent !important;
  border: 1px solid var(--ntop-rule-strong) !important;
  border-radius: 2px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--ntop-ink) !important;
  text-align: left !important;
}
.topbar__search #query::placeholder {
  color: var(--ntop-ink-4);
}

/* .home-page had a large negative top margin (~-98px, 5x the base line
   height) — a leftover trick from the old design, which used an absolutely
   positioned image bleeding out of a tall hero to overlap the topbar. Our
   hero is a normal short banner now, so that negative margin just pulls
   the whole homepage up underneath the topbar, which is what was causing
   the blank band between them. */
.home-page {
  margin-top: 0 !important;
}

/* .hero-unit ships with is-hidden (display: none) baked into the HTML,
   and only becomes visible when layout.js's on-load script removes that
   class — a jQuery call that was failing in testing ($(...).on(...) is
   not a function), silently leaving the whole hero collapsed to zero
   height with all its content still in the DOM but never shown. Force it
   visible unconditionally so the hero doesn't depend on that script
   succeeding at all. */
.hero-unit.is-hidden {
  display: block !important;
}

/* Hero: plain title/subtitle/CTA banner (matches nTop Learn / nTop
   Community) instead of the old dark image + search field. */
.hero-unit {
  background-color: var(--ntop-paper) !important;
  border-bottom: 1px solid var(--ntop-rule);
  /* Base theme's padding: calc(5% + 125px) 0 ... (line ~2382) was sized to
     push the title down over a tall background image in the old dark hero.
     This flat banner has no image to clear, and .hero-unit__content already
     carries its own 64px/48px top/bottom padding — so the outer padding is
     now pure dead space stacked on top of that. */
  padding: 0 !important;
}
/* The rest of the homepage (Featured, category grid, etc.) used the base
   theme's own light-gray (#F7F6FA), which reads as a visibly different
   shade of white next to our cream paper — flatten it to the same token. */
.home-page__section,
.custom-blocks + .promoted-articles-section {
  background-color: var(--ntop-paper) !important;
}
/* Hairline dividers between the homepage sections (Featured -> Knowledge
   Base -> Explore other resources), matching the hero's own border-bottom
   treatment — they all share the same background otherwise, so without a
   seam they ran together with no visual break between them. */
#promoted-articles,
#category-list {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ntop-rule);
}
.hero-unit__content {
  /* Featured and the other homepage sections below the hero are plain
     .container-inner (max-width: 75vw; margin: 0 auto; no padding) with
     no fixed-pixel width — so matching their left edge means using that
     same viewport-relative box, not a fixed max-width like 1180px, which
     only lines up at one specific viewport width. */
  max-width: 75vw !important;
  min-width: 30vw !important;
  margin: 0 auto !important;
  /* Trimmed from 64px — the nav already has its own border-bottom acting
     as the line separator from the topbar; this top padding was just
     adding dead air on top of that line rather than replacing it. */
  padding: 32px 0 48px !important;
  box-sizing: border-box;
}
.hero-unit__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ntop-ink);
  margin: 0 0 16px;
}
.hero-unit__subtitle {
  font-size: 16px;
  color: var(--ntop-ink-3);
  max-width: 520px;
  margin: 0 0 28px;
  line-height: 1.55;
}
.hero-unit__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-unit__btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--ntop-ink);
}
.hero-unit__btn--primary {
  background: var(--ntop-ink);
  color: var(--ntop-paper);
}
.hero-unit__btn--primary:hover {
  background: var(--ntop-ink-2);
  border-color: var(--ntop-ink-2);
}
.hero-unit__btn--secondary {
  background: transparent;
  color: var(--ntop-ink);
}
.hero-unit__btn--secondary:hover {
  background: var(--ntop-paper-2);
}

/* "Featured" (formerly "Have you seen these?"): tone the promoted-star
   marker down to ink instead of the base theme's default accent color. */
.promoted-articles-item .fas {
  color: var(--ntop-ink-3);
}
/* The description under "Featured" and the article cards themselves were
   hardcoded #000 text on a white card — invisible/jarring once the page
   around them goes dark. */
.promoted-articles-description {
  color: var(--ntop-ink-3) !important;
}
.promoted-articles-item {
  background-color: var(--ntop-paper) !important;
  border-color: var(--ntop-rule) !important;
}
.promoted-articles-item__title {
  color: var(--ntop-ink) !important;
}

/* Footer: paper instead of black */
.footer--black-parent {
  background: var(--ntop-paper-2) !important;
  border-top: 1px solid var(--ntop-rule);
}
/* .footer__wrapper and .footer__col are children of .footer--black-parent
   with their OWN hardcoded black background (no !important) — background
   doesn't inherit, so fixing the <footer> element itself above did nothing
   here: this child paints an opaque black rectangle directly on top of it,
   covering the entire visible footer regardless of theme. Same bug shape as
   .topbar__col covering .topbar__nav earlier. */
.footer--black-parent .footer__wrapper,
.footer--black-parent .footer__col {
  background-color: var(--ntop-paper-2) !important;
}
.footer--black-parent .ntop-legal-address p,
.footer--black-parent .ntop-copyright p,
.footer--black-parent .ntop-copyright a,
.footer--black-parent .footer-social-link {
  color: var(--ntop-ink-3) !important;
}
.footer--black-parent .ntop-copyright-link {
  color: var(--ntop-ink-2) !important;
}

/* Docs / Community learning-resource cards now use real illustration assets
   (docs_image.png / community_image.png), matching nTop Learn's pattern. */

/* Knowledge Base grid ("Fluids", "Lattices", etc.): same base-theme bug as
   .promoted-articles-item above — .category-block__title uses the theme's
   uncompiled #0F1113 setting (a fixed dark ink) and .category-block__
   description/.category-block-option__title-see-all are hardcoded black,
   so the heading and "See All" link go near-invisible on a dark page. The
   option rows themselves (.category-block__option_url-block) are a
   hardcoded white box with a black box-shadow, which also never adapts. */
.category-block__title,
.category-block-option__title-see-all {
  color: var(--ntop-ink) !important;
}
.category-block__description {
  color: var(--ntop-ink-3) !important;
}
.custom-redesign-block .category-block__option_url-block {
  background-color: var(--ntop-paper) !important;
  border-color: var(--ntop-rule) !important;
  box-shadow: none !important;
}
/* "See All" pill inside the Knowledge Base dropdown (opens when a section's
   chevron is clicked) still had a hardcoded black border/text + black hover
   fill from the old theme — flatten it to the same ink/paper pair used by
   every other flat bordered pill on the page (hero CTAs, topbar buttons). */
.category-block__button {
  border-color: var(--ntop-ink) !important;
  color: var(--ntop-ink) !important;
}
.category-block__button:hover {
  background-color: var(--ntop-ink) !important;
  color: var(--ntop-paper) !important;
}

/* Dropdown menus: shared by the header's user/language/nav-resources menus,
   the homepage Knowledge Base "See All" panel, and community/article action
   menus. All of them were still the base theme's hardcoded white card +
   #333 item text. That's not just an unstyled corner — in dark mode the
   item text is *also* separately re-colored to var(--ntop-ink) by the
   .help-center-navigate rule above, which flips to a light color, leaving
   light text on the still-white card unreadable rather than merely unstyled. */
.dropdown-menu {
  background: var(--ntop-paper) !important;
  border-color: var(--ntop-rule-strong) !important;
  box-shadow: none !important;
}
.dropdown-menu [role="menuitem"] {
  color: var(--ntop-ink) !important;
}
.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus {
  background-color: var(--ntop-paper-2) !important;
}

/* "Contact Support" CTA band at the bottom of the homepage: a hardcoded
   near-black card (rgba(24,24,24,1)) left over from the pre-toggle design,
   never brought into the paper/ink system used everywhere else. It also
   silently depended on its own inline `color: white` for the title, but the
   sitewide `h1..h6 { color: var(--ntop-ink) }` rule above targets that h2
   directly (a direct match always beats an inherited value, regardless of
   selector specificity) and was clobbering it to near-black-on-near-black in
   light mode. Restyle as the same paper-2 card the footer uses instead, so
   title/button contrast is correct and consistent in both themes. */
.submit_request__wrapper,
.footer-submit-ticket {
  background-color: var(--ntop-paper-2) !important;
  color: var(--ntop-ink) !important;
}

/* ==========================================================================
   Comment threads & forms
   The pass above deliberately scoped to nav/hero/footer/KB grid and left a
   documented gap: every comment thread (articles, community posts, ticket
   requests) and every native form control was still hardcoded to the old
   white-card / #eee-border / #666-text look, regardless of data-ntop-theme.
   ========================================================================== */

/* Native form controls: ticket request form, comment reply box, "Sort by"
   dropdowns, organization select, etc. Each input type above repeats the
   same hardcoded #fff background / #666 text / #818a91 border triplet. */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.nesty-input {
  color: var(--ntop-ink) !important;
  background-color: var(--ntop-paper) !important;
  border-color: var(--ntop-rule-strong) !important;
}
.form-field p {
  color: var(--ntop-ink-4) !important;
}
.help-block {
  color: var(--ntop-ink-3) !important;
}

/* Comment threads (article/community-post/ticket) and their reply forms */
.comment,
.comment-list-header,
.comment-sorter,
.topic-list-item__box,
.post__voting-and-actions,
.request-sidebar {
  border-color: var(--ntop-rule) !important;
}
.comments__callout,
.meta {
  color: var(--ntop-ink-3) !important;
}
/* Official-comment highlight was a brand-tinted pale wash (light-only, baked
   in at build time from #0F1113) — swap for the flat bordered-card
   treatment used elsewhere so it reads correctly in both themes. */
.comment--official .comment__inner {
  background-color: var(--ntop-paper-2) !important;
  border-color: var(--ntop-rule-strong) !important;
}
.vote-control {
  color: var(--ntop-ink) !important;
}
.vote-control--up::before,
.vote-control--down::before {
  color: var(--ntop-ink) !important;
  background-color: var(--ntop-paper) !important;
}
.article-vote-controls__item,
.upvote-article,
.downvote-article {
  color: var(--ntop-ink) !important;
  background-color: var(--ntop-paper) !important;
  border-color: var(--ntop-ink) !important;
}
.article-vote-controls__item:hover,
.article-vote-controls__item:focus,
.article-vote-controls__item--voted,
.upvote-article:hover,
.downvote-article:hover {
  color: var(--ntop-paper) !important;
  background-color: var(--ntop-ink) !important;
}
button[aria-label="Comment actions"] {
  background-color: transparent !important;
  color: var(--ntop-ink) !important;
}
.callout,
.post-callout {
  background-color: var(--ntop-paper-2) !important;
}
.callout p {
  color: var(--ntop-ink) !important;
}
.status-label--not-planned {
  color: var(--ntop-ink) !important;
  background-color: var(--ntop-paper-2) !important;
}

/* "Contact Support" ticket form title (new_request_page.hbs): hardcoded
   #121113 at desktop widths. The sitewide h1..h6 ink rule above can't reach
   it — a class selector always beats an element selector regardless of
   source order — so this stayed near-black text on the near-black dark-mode
   background, i.e. invisible, on any desktop viewport. */
.new-request-title {
  color: var(--ntop-ink) !important;
}