@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* =====================================================================
   HALLOWEEN VERSION
   Every Halloween change is marked with a  HALLOWEEN  comment.
   Search for "HALLOWEEN" to find (and later revert) them.
   ===================================================================== */
/*** Fonts ***/
@font-face { /* English */
  font-family: 'Grobold';
  src: url('/hc/theming_assets/01JE0TKCJW6TDHGE57K3GT21D3')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Spanish & Portuguese */
  font-family: 'Grobold-pt';
  src: url('/hc/theming_assets/01JE0TKCJW6TDHGE57K3GT21D3')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Russian */
  font-family: 'Grobold-ru';
  src: url('$assets-grobold_ru-otf')  format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Thai */
  font-family: 'Grobold-th';
  src: url('$assets-grobold_th-ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Turkish */
  font-family: 'Grobold-tr';
  src: url('$assets-grobold_tr-otf')  format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Polish */
  font-family: 'Grobold-pl';
  src: url('/hc/theming_assets/01JE0TKCC1D2966EVS84421BGV')  format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins-light';
  src: url('/hc/theming_assets/01JE0TKD129VHC2DVX8JAN5QV1')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins-medium';
  src: url('/hc/theming_assets/01JE0TKCGK7XQY9WDC6V7PBHQ7')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/hc/theming_assets/01JE0TKCSJYZ1P1C0SBE0R2ARG')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins-bold';
  src: url('/hc/theming_assets/01JE0TKC9ZG76NEXP440SY436Q')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face { /* Arabic */
  font-family: 'Lalezar';
  src: url(/hc/theming_assets/01JE0TKDCFC1PG6E0TBH4ZH8HE)  format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Numbered step cards */
.step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #f0ebe2;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.step-card .step-num {
  background: #073065;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.step-card .step-body strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.step-card .step-body {
  flex: 1;
}

/* Article Tabs*/

/* Tab titles: reduced padding + slightly smaller font */
.wysiwyg-tabs-bar[role="tablist"] .wysiwyg-tabs-tab {
  padding: 4px 6px !important;
  font-size: 13.5px !important;
}

/* Active tab: lighter navy background, white text + underline */
.wysiwyg-tabs-bar[role="tablist"] .wysiwyg-tabs-tab[aria-selected="true"] {
  background-color: #2e5a94 !important;
  color: #ffffff !important;
  border-bottom: 3px solid #ffffff !important;
}

/* Mobile: keep tabs side by side, wrap long titles onto a second line
   instead of scrolling or truncating */
@media (max-width: 768px) {
  .wysiwyg-tabs-bar[role="tablist"] {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    overflow-x: visible !important;
  }

  .wysiwyg-tabs-tab {
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
  }
}

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
  font-family: 'poppins';
  color: #070365;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

#hc-wysiwyg [role=toolbar] {
    display: none;
}

.define-dc4js {
  display: none;
}

/*** Bot Widget ***/
#web-messenger-container {
    display: none;
}

/* #web-messenger-container:lang(en) {
    display: block;
} */

/***** Base *****/
body {
  background-color: white;
  color: #2F3941;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
	font-family: poppins;
}

body > main {
    min-height: 100vh;
  }

h1, h2, h3, h4, h5, h6 {
  font-family: poppins;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

input, textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}

input:not([type="checkbox"]) {
  outline: none;
}

input:not([type="checkbox"]):focus {
  border: 1px solid #17494D;
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid #17494D;
}

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

textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid #17494D;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

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

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

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

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

/***** Buttons *****/
.button, .split-button button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

.button[data-disabled], .split-button button[data-disabled], .section-subscribe button[data-disabled], .article-subscribe button[data-disabled], .community-follow button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .subscriptions-subscribe button[data-disabled], .pagination-next-link[data-disabled], .pagination-prev-link[data-disabled], .pagination-first-link[data-disabled], .pagination-last-link[data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  cursor: pointer;
  background-color: #17494D;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  max-width: 180px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #5a6d7c;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
  border: 1px solid #ddd;
  background-color: #f0e8eb;
}

input[type="submit"], .submit-a-request2 {
  border: none;
  border-radius: 29px;
  background-color: #ECAA0D;
  font-family: 'poppins-bold';
  font-size: 13px;
  line-height: 2.72;
  color: white;
  margin-bottom: 20px;
  padding: 0 12px;
}

.submit-a-request2 {
  cursor: pointer;
  max-width: 100%;
}

input[type="submit"]:active, input[type="submit"]:focus, .submit-a-request2:active, .submit-a-request2:focus, .search-home input[type="submit"]:active, .search-home input[type="submit"]:focus {
  -webkit-tap-highlight-color: transparent;
  transform: translateY(4px);
  border: none;
}

.submit-a-request2:hover {
  text-decoration: none;
}

.send-msg-btn {
  display: flex;
  margin-top: -10px;
  margin-left: -2px;
}

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

.split-button button {
  background-color: #17494D;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #17494D;
}

[dir="rtl"] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}

[dir="rtl"] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

[dir="ltr"] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #5a6d7c;
  font-size: 13px;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

.form-field ~ .form-field {
  margin-top: 25px;
  font-family: 'poppins-light';
  font-size: 13px;
  letter-spacing: -0.2px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  pointer-events: none;
  color: #2A385D;
}

.form-field input {
  border: 1px solid #B1B1B1;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  background-color: white;
  font-family: 'poppins-light';
  height: 37px;
}

.form-title {
  font-family: Grobold;
  color: #FFFFFF;
	text-align: center;
  position: relative;
  font-size: 35px;
  bottom: 2vh;
}

.form-field input:focus {
  border: 1px solid #17494D;
}

.form-field input[type="text"] .nesty-input {
  border: 1px solid #B1B1B1;
  border-radius: 10px;
}

.form-field.boolean {
  display: grid;
  grid-template-columns: auto repeat(2, 1fr);
  gap: 19px;
  align-items: center;
}

.nesty-input {
	border: 1px solid #B1B1B1;
  border-radius: 10px;
  font-family: poppins-light;
  font-size: 13px;
  letter-spacing: -0.2px;
}

.nesty-panel {
  border: 1px solid #B1B1B1;
  border-radius: 10px;
  font-family: poppins-light;
}

.nesty-panel li {
  font-family: poppins-light;
}

.nesty-panel:focus .nesty-input:focus {
-webkit-tap-highlight-color: transparent;
  }

.form-field input[type="text"]:focus {
  border: 1px solid #17494D;
}

.form-field input[type="checkbox"] {
  width: 15px;
  margin-bottom: 5px;
}

.form-field .nesty-input {
  height: 37px;
  line-height: 37px;
  outline: none;
  vertical-align: middle;
  border: 1px solid #B1B1B1;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  font-family: poppins-light;
}

.form-field .nesty-input:focus {
  border: 1px solid #17494D;
  text-decoration: none;
  border: 1px solid #B1B1B1;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}

.nesty-input:after {
    color: #999;
    content: "▾";
    line-height: 1em;
    position: absolute;
    right: 10px;
    top: 35%;
}

#request_custom_fields_4414011880082 {
  font-family: poppins;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #17494D;
  text-decoration: none;
}

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

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

.form-field .optional {
  display: none;
}

/*** Hiding elements from the contact forms ***/
.request_ticket_form_id, .request_custom_fields_4419459732754, .request_custom_fields_4419474949650, .request_custom_fields_4419474997650, .request_subject, .suggestion-list {
  display: none;
}

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

[dir="rtl"] .form-field p {
  font-size: 15px;
}

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

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

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li {
  color: #9358B0;
}

.form-desc {
  height: 65px;
}

.form-desc-text {
  font-family: poppins-light;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: white;
}

#hc-wysiwyg {
  height: 175px;
  border-radius: 10px;
  border: 1px solid #b1b1b1;
}

/*** Extra Text on Forms ***/
.extxt-cont {
  max-width: 1160px;
  margin: 0 auto;
}

.appledel, .purch-form-txt {
  position: relative;
  bottom: 150px;
/*   max-width: 660px; */
  padding: 0 5%;
  font-family: 'Poppins-light';
}

/* Setting size and color of form field text */
#request_anonymous_requester_email, #request_custom_fields_360012501573, #request_description  {
  color: #2A385D;
  font-size: 13px;
}

/*** Thank You Page ***/
.ty-section {
  margin: 0 auto;
}

.top-text-cont, .bot-txt-btn {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  left:10px
}

.ty-bluegray-top {
  border-bottom: 22px solid #dedde4;
  background: #073065;
  height: 80px;
}

.ty-main-content {
  margin-bottom: 50px;
}

.ty-top-text {
  position: relative;
  margin-right: 76px;
}

.ty-top-msg {
  font-family: grobold;
  font-size: 22px;
  color: #2A385D;
  letter-spacing: -0.22px;
  line-height: 1.3;
  text-transform: uppercase;
  margin-left: 70px;
  text-align:center;
}

.ty-img {
  background-image: url(/hc/theming_assets/01JG6C2YWEXPWHAXP5033ERBV8);
  background-repeat: no-repeat;
  background-position: center center;
  height: 311px;
  position: relative;
}

.ty-bottom-text {
    text-align: center;
}

.ty-bottom-msg {
  font-family: poppins-light;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: #2A385D;
}

.ty-button {
  border: none;
  border-radius: 29px;
  background-color: #ECAA0D;
  max-width: 15%;
  padding: 0 12px;
  min-width: 125px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.ty-gotit {
  font-family: poppins-bold;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: white;
  text-decoration: none;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 2.7;
}

.ty-gotit:active, .ty-button:active {
  transform: translateY(4px);
  text-decoration: none;
}

/*** Incorrect Page (Instead of form selection menu) ***/
.contact-redirect {
  max-width: 1160px;
  margin: 0 auto;
  width: 335px;
  position: relative;
  top: 3vh;
}

.bb8 {
  font-family: GROBOLD;
  font-size: 40px;
  color: #073065;
}

.cont-red-img {
  background-image: url(/hc/theming_assets/01JG6C2YWEXPWHAXP5033ERBV8);
  background-size: 304px 311px;
  background-repeat: no-repeat;
  height: 311px;
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  top: 15px;
  align-items: center;
  height: 1px;
  justify-content: space-between;
  z-index: 1000;
}

.logo-cont {
  max-width: 1160px;
  margin: 0 auto;
  position: absolute;
  z-index: 100;
}

.logo-cont.logo-sect {
    margin-bottom: -20px;
}

.logo {
  text-align: left;
  position: relative;
  top: 10px;
}

.MA-logo-home {
  width: 100px;
  transform: translate(-15px, -5px);
}

.ty-logo {
  margin-left: 10px;
}

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

.logo span {
  margin: 0 10px;
  color: #17494D;
}

.logo a {
  display: inline-block;
}

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

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.user-nav[aria-expanded="true"] > .user-nav-list li {
  display: block;
}

.user-nav[aria-expanded="true"] > .user-nav-list a {
  display: block;
  margin: 20px;
}

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}

@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}

.nav-wrapper-desktop a {
  border: 0;
  color: #1F73B7;
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}

.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: #1F73B7;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}

.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.nav-wrapper-mobile .menu-button-mobile[aria-expanded="true"] .icon-menu {
  background: #f3f3f3;
}

.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded="false"] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded="true"] {
  display: block;
}

.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}

.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
  cursor: pointer;
  text-align: start;
}

.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}

.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
}

.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}

.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}

.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}

.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}

[dir="rtl"] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}

[dir="rtl"] .skip-navigation {
  left: initial;
  right: -999px;
}

.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}

[dir="rtl"] .skip-navigation:focus, [dir="rtl"] .skip-navigation:active {
  left: initial;
  right: auto;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > button {
  border: 0;
  color: #1F73B7;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > button:hover, .user-info > button:focus {
  color: #1F73B7;
  background-color: transparent;
}

.user-info > button::after {
  color: #1F73B7;
  padding-right: 15px;
}

[dir="rtl"] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}

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

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

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent {
  color: #17494D;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  position: absolute;
  padding: 30px 10px 0px 10px;
  width: 100%;
  height: 120px;
  background-color: #073065;
  margin: 0 auto;
  text-align: center;
}


.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: block;
  justify-content: center;
  position: absolute;
  left: 8%;
  right: 8%;
  max-height: 70px;
}

.privacy-policy {
  font-size: 14px;
  color: white;
  text-decoration: none;
  font-family: poppins;
  margin-bottom: -16px;
}

.footer-language-selector button {
  color: white;
  display: inline-block;
  font-size: 12px;
}

.footer-language-selector {
  position: relative;
  bottom: 20px;
}


/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #ff7518; /* HALLOWEEN — was #070365 */
  display: inline;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: poppins;
}

.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}

.breadcrumbs li a, .breadcrumbs li a:visited {
  color: #ff7518; /* HALLOWEEN — was #070365 */
}

.form-head-title {
  color: #ff7518; /* HALLOWEEN — was #073065 */
  display: inline;
  font-size: 30px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: grobold;
  margin-top: 50px;
}

/***** Search field *****/

.search-container {
  position: relative;
}

.search {
  border-radius: 30px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}

.search-home {
  margin-bottom: -30px;
}

.search:focus-within {
  border-color: #17494D;
}

.search-home input[type="submit"] {
    display: none;
}

.search input[type="search"],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}

.search-full input[type="search"],
.search-full .clear-button {
  border-color: #fff;
}

.search input[type="search"] {
  background-color: #D4E5EE;
  border-radius: 20px;
  border: none;
  box-sizing: border-box;
  height: 50px;
  padding: 0px 20px 0 48px;
  -webkit-appearance: none;
  width: 100%;
}

.search input[type="search"]:focus {
  color: #555;
}

.search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button, .search input[type="search"]::-webkit-search-results-button, .search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search input[type="search"]:-webkit-autofill, .search input[type="search"]:-webkit-autofill:hover, .search input[type="search"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}

.search .clear-button:hover {
  background-color: #17494D;
  color: #fff;
}

.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #17494D;
}

.search-has-value .clear-button {
  display: flex;
}

[dir="ltr"] .search input[type="search"] {
  padding-left: 40px;
  padding-right: 20px;
}

[dir="ltr"] .search-has-value input[type="search"] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="ltr"] .search-has-value input[type="search"]:focus {
  border-right-color: #17494D;
}

[dir="ltr"] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="ltr"] .search .clear-button:focus {
  border-left-color: #17494D;
}

[dir="rtl"] .search input[type="search"] {
  padding-left: 20px;
  padding-right: 40px;
}

[dir="rtl"] .search-has-value input[type="search"] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir="rtl"] .search-has-value input[type="search"]:focus {
  border-left-color: #17494D;
}

[dir="rtl"] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

[dir="rtl"] .search .clear-button:focus {
  border-right-color: #17494D;
}

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

[dir="rtl"] .search-icon {
  left: auto;
  right: 15px;
  transform: translateY(-50%) scaleX(-1);
}

.search-subtext {
  padding-bottom: 20px;
  margin-top: -70px;
  margin-left: -10px;
  text-align: center;
  font-size: 19px;
  font-family: grobold;
  color: #ff7518; /* HALLOWEEN — was #073065 */
}

/* HALLOWEEN — nudge "How can we help" text down on small/medium phones */
@media (min-width: 410px) and (max-width: 425px) {
  .search-subtext {
    transform: translateY(8px);
  }
}
@media (min-width: 426px) and (max-width: 768px) {
  .search-subtext {
    transform: translateY(10px);
  }
}
/* END HALLOWEEN */

::placeholder {
  opacity: 0.7;
}

.common-topics {
  font-family: poppins-light;
  color: #073065;
  margin-bottom: 15px;
  font-size: 13px;
  padding: 0 15px 0 5px;
  text-align: left;
}

.comtop {
  text-decoration: underline;
}

.loyalty-btn-wrapper {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.loyalty-btn-wrapper img {
  height: 121px;
}

/* HALLOWEEN — white common topics on the dark banner (very wide screens) */
@media screen and (min-width: 1920px) {
  .common-topics,
  .comtop {
    color: #ffffff;
  }
  .loyalty-btn-wrapper {
    margin-top: 0;
  }
}
/* END HALLOWEEN */

.text-overfly {
  font-family: grobold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  padding: 10px;
  color: white;
  text-align: center;
  margin-left: -0.7em;
  font-size: 1.5em;
  word-wrap: break-word;
  line-height: 1.2em
  white-space: normal;
  text-align: center
  display: inline-block;
  overflow: hidden;
  width: 14em;
  font-weight: bold;
}

@media (max-width: 767px) {
  .loyalty-btn-wrapper img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .text-overfly {
    font-size: 1.2em;
    left: 50%;
    width: 14em;
  }
}

@media (min-width: 768px) {
  .loyalty-btn-wrapper  {
    align-items: baseline;
    flex-direction: row;
    margin-top: 100px;
  }
}

/* ============================================================
   HALLOWEEN — banner overlay (ghosts, bats, witch, cobwebs, pumpkins)
   Sits ON TOP of the existing homepage banner. Built by the
   Halloween block at the end of script.js, using theme assets
   (ghost, bat, pumpkin, web, spider, witch).
   ============================================================ */

.hw-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* never blocks clicks on the banner/search/buttons */
  z-index: 5;
}

/* Top "scene" band — height set via HW_SCENE_HEIGHT in script.js */
.hw-scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* All uploaded images fill their box without distortion */
.hw-ghost img,
.hw-bat img,
.hw-witch img,
.hw-web img,
.hw-spider img,
.hw-pumpkin-row img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ghosts */
.hw-ghost {
  position: absolute;
  animation: hw-float 4s ease-in-out infinite;
}
.hw-ghost--a { animation-name: hw-float-a; }
.hw-ghost--b { animation-name: hw-float-b; animation-duration: 4.6s; }
.hw-ghost--c { animation-name: hw-float-c; animation-duration: 3.6s; }

@keyframes hw-float-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-14px); } }
@keyframes hw-float-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,10px); } }
@keyframes hw-float-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,12px); } }

/* Bats — fly across the banner on a loop */
.hw-bat {
  position: absolute;
  animation: hw-bat-fly linear infinite;
}

@keyframes hw-bat-fly {
  0%   { transform: translate(0,0); }
  100% { transform: translate(120vw, -20px); }
}

/* Witch — slower, gentle swoop across the banner.
   If your witch faces LEFT, add scaleX(-1) to each transform below
   (or flip the PNG) so she doesn't fly backwards. */
.hw-witch {
  position: absolute;
  animation: hw-witch-fly 14s linear infinite;
}

@keyframes hw-witch-fly {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  50%  { transform: translate(60vw, -18px) rotate(4deg); }
  100% { transform: translate(120vw, 0) rotate(-4deg); }
}

/* Cobweb corner + hanging spider */
.hw-web {
  position: absolute;
  top: 0;
}
.hw-web--left { left: 0; }
.hw-web--right { right: 0; transform: scaleX(-1); }

.hw-spider {
  position: absolute;
  transform-origin: top center;
  animation: hw-spider-swing 2.6s ease-in-out infinite;
}
@keyframes hw-spider-swing {
  0%,100% { transform: rotate(-6deg); }
  50%     { transform: rotate(6deg); }
}

/* Pumpkin row along the bottom edge of the banner */
.hw-pumpkin-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hw-ghost, .hw-bat, .hw-witch, .hw-spider {
    animation: none !important;
  }
}
/* END HALLOWEEN banner overlay */

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01M379DTKKYZ8NWCXSTRC8QVY1);
  background-position: center -275px;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 5px 30px 0;
  text-align: center;
  width: 100%;
  overflow:hidden;
}

.hero-content {
  max-width: 1160px;
  margin: 0 auto;
  padding-bottom: 5px;
}

.srch-find-com {
  max-width: 1160px;
  margin: 0 auto;
  margin-top: 35px;
}

.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.header-img {
  max-width: 100%;
  padding-top: 20px;
  padding-bottom: 35px;
  transform: translateX(8px);
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }

}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
}

.sub-nav .breadcrumbs {
    margin: 70px 0 0 0;
}

.sub-nav .search-container {
  max-width: 350px;
  width: 100%;
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}

/***** Error Banner *****/
.error-banner-container {
  max-width: 1160px;
  margin: 0 auto;
}

.error-banner {
  display: flex;
  background: #FED3D3;
  border: none;
  border-radius: 10px;
}

.error-banner-text {
  font-family: poppins;
  font-weight: 700;
  font-size: 15px;
  color: #D71820;
  text-align: center;
  padding: 10px;
  margin: 0;
  width: 100%;
}

.error-banner-bell {
  padding: 0 0 0 10px;
  margin: 0;
  width: 55px;
}

@media screen and (min-width: 768px) {
  .error-banner-text {
    line-height: 2.6;
  }
  .error-banner {
    width: 100%;
  }
}

.error-banner-bell:lang(ar) {
  float: right;
  margin-left: 10px;
  margin-right: 0;
}

/***** Blocks *****/
.blocks-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
}
.blocks-item {
  background: white;
  border-radius: 36px;
  width: 100%;
  height: 115px;
  overflow: hidden;
  position: relative;
  grid-column: span 2;
  text-align: -webkit-center;
  justify-self: center;
  letter-spacing: -0.24px;
  border: 5px double #ff7518; /* HALLOWEEN — was #070376 */
  box-shadow: 0px 4px 10px 0 rgb(0 0 0 / 10%), 0px 4px 5px 0 rgb(0 0 0 / 9%), 0 0 0 2px #1a1230 !important; /* HALLOWEEN — added dark ring (0 0 0 2px #1a1230) */
}

.blocks-item:last-child {
  grid-column-end: 5;
}



.blocks-item:focus, .blocks-item:active, .soc-img:focus, .soc-img:active {
  -webkit-tap-highlight-color: transparent;
  transform: translateY(4px)
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  text-decoration: none;
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}

.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: #2F3941;
}

.blocks-item-link {
  font-family: Poppins-medium;
  font-size: 13px;
  color: #2A385D;
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
  border-radius: inherit;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  height: 81px;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
}

.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  text-decoration: none;
}

.blocks-item-title {
  height: 50px;
  position: absolute;
  white-space: normal;
  align-self: center;
  bottom: -35px;
  display: grid;
  align-content: center;
  padding: 0 10px;
}

.blocks-item-description {
  margin: 0;
}

.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/* ============================================================
   HALLOWEEN — corner decorations on homepage blocks
   (spider / bat / witch / ghost, repeating every 4 blocks)
   Uses theme assets: spider, bat, witch, ghost.
   ============================================================ */
/* Base positioning shared by all corner decorations */
.blocks-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  width: 1px;
  height: 22px;
  background: rgba(26, 18, 48, 0.5);
  z-index: 2;
  pointer-events: none;
}

.blocks-item::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 12px;
  width: 30px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: top center;
  z-index: 2;
  pointer-events: none;
}

/* Variant 1: Spider — hangs from thread, swings */
.blocks-item:nth-child(4n+1)::after {
  background-image: url(/hc/theming_assets/01M48B5CR1A5CV9V5BEV556YH8);
  animation: blocks-spider-swing 2.6s ease-in-out infinite;
}

/* Variant 2: Bat — no thread, flits side to side */
.blocks-item:nth-child(4n+2)::before {
  content: none;
}
.blocks-item:nth-child(4n+2)::after {
  top: 10px;
  width: 60px;
  height: 40px;
  background-image: url(/hc/theming_assets/01M48B4W73TP0VZAEGS8G8V4A1);
  animation: blocks-bat-flit 3.2s ease-in-out infinite;
}

/* Variant 3: Witch */
.blocks-item:nth-child(4n+3)::before {
  content: none;
}
.blocks-item:nth-child(4n+3)::after {
  top: 6px;
  right: 10px;
  width: 35px;
  height: 30px;
  background-image: url(/hc/theming_assets/01M48BE7XQMF18HZFNXHYQEMZG);
  animation: blocks-witch-fly 3.4s ease-in-out infinite;
}

/* Variant 4: Mini ghost — floats gently, no thread */
.blocks-item:nth-child(4n)::before {
  content: none;
}
.blocks-item:nth-child(4n)::after {
  top: 10px;
  width: 35px;
  height: 25px;
  background-image: url(/hc/theming_assets/01M48B432TX53PEWPE4HMPHPZ1);
  animation: blocks-ghost-float 3s ease-in-out infinite;
}

@keyframes blocks-spider-swing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes blocks-bat-flit {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4px, 3px); }
}
@keyframes blocks-witch-fly {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(-3px, -4px) rotate(4deg); }
}
@keyframes blocks-ghost-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .blocks-item::after {
    animation: none !important;
  }
}
/* END HALLOWEEN corner decorations */

/* Tips and Tricks */
@media (min-width: 768px) {
  li#item-28913695149330 {
    position: relative;
    grid-column-start: 3;
  }
}

@media (max-width: 767px) {
  li#item-28913695149330 {
    position: relative;
    grid-column-start: 1;
    grid-column: 1 / -1;
    margin-top: 130px; /* Adjust this value to match the negative margin above */
    width: 100%;
  }
}

/* 📱 Specific Adjustment for iPhone 14 Pro Max */
@media (width: 430px) and (height: 932px) {
  li#item-28913695149330 {
    grid-column: 1 / -1; /* This is the key change */
    width: 100%;
    margin-top: 100px; /* Adjust this value to match the negative margin above */
  }
}

.hp-btn-img {
  position: relative;
  width: 50px;
  align-self: center;
  top: 15px;
}

.hp-btn-img-tips {
  position: relative;
  width: 60px;
  align-self: center;
  top: 15px;
}

/* General styling for the Daily Gift Wrapper */
.daily-gift-wrapper {
  width: 100%;
  margin-top: 30px;
}

/* Mobile devices (all) */
@media (max-width: 767px) {
  .daily-gift-wrapper {
    margin-top: -250px;
    display: block;
  }
}

/* Desktop and Tablet devices (general) */
@media (min-width: 1025px) {
  .daily-gift-wrapper {
    width: 555px;
    position: relative;
    top: -145px;
    left: -290px;
    grid-column-start: 1;
  }
}
/* 💻 Specific Adjustments for Tablets and Hybrid Devices */

/* iPad Pro (12.9-inch in Portrait) */
@media (width: 1024px){
  .daily-gift-wrapper {
    width: 440px;
    position: relative;
    top: -145px;
    left: -230px;
    grid-column-start: 1;
  }
}


/* iPad Mini (Portrait: 768x1024) */
@media (width: 768px){
  .daily-gift-wrapper {
    width: 320px;
    position: relative;
    top: -145px;
    left: -175px;
    grid-column-start: 1;
  }
}

/* iPad Air (Portrait: 820x1180) */
@media (width: 820px) {
  .daily-gift-wrapper {
    width: 350px;
    position: relative;
    top: -145px;
    left: -185px;
    grid-column-start: 1;
  }
}

/* Surface Pro 7 (Portrait: 912x1368) */
@media (width: 912px)  {
  .daily-gift-wrapper {
    width: 389px;
    position: relative;
    top: -145px;
    left: -200px;
    grid-column-start: 1;
  }
}

.daily-gift {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Poppins-medium;
  font-size: 13px;
  color: navy blue;

  img {
    width: 50px;
    height: auto;
    margin-top: 15px;
  }

}

#fair-play-img {
  transform: scale(1.2);
}

/*** What's new section ***/
.articles {
  margin-top: 80px;
}

.whats-new-title {
 	font-family: grobold;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.42px;
  color: #2A385D;
}

.promoted-articles {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 768px) {
  .promoted-articles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .promoted-articles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promoted-articles-item {
  flex: 1 0 auto;
}

.promoted-articles-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: white;
  border: none;
  border-radius: 14px;
  width: 100%;
  height: 70px;
  letter-spacing: -0.24px;
  box-shadow: 0px 4px 10px 0 rgb(0 0 0 / 10%), 0px 4px 5px 0 rgb(0 0 0 / 9%) !important;
  margin: 20px 0;
  }

@media screen and (min-width: 768px) {
  .promoted-articles-item {
    width: 80%;
  }
}

.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

.promoted-articles-item a {
  display: block;
  padding: 10px;
}

.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}

.promoted-articles-item:last-child a {
  border: 0;
}

.prom-img {
  width: 20px;
  margin-left: 10px;
}

[dir="rtl"] .prom-img {
  margin-left: 0;
  margin-right: 10px;
}

/*** Social media section ***/
.social-med {
  max-width: 2048px;
  margin: 0 auto;
  background: #073065;
}

.social-content {
  padding: 0 5%;
}

.social-bg-cont {
  background: white;
  max-width: 2048px;
  margin: 0 auto;
}

.social-bg {
  background-image: url(/hc/theming_assets/01JGED3T15AFFEYDGHH8X9QBHE);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  border-bottom: 2px solid #070365;
}

.social-title-cont {
 display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
}

.social-title {
  font-family: grobold;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.42px;
  color: #2A385D;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  justify-items: center;
  position: relative;
  bottom: 200px;
}

.btn {
  width: 65px;
}

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

.home-cont {
  margin-top:15px;
  margin-bottom: 50px;
}

@media screen and (min-width: 400px) {
  .home-cont {
  }
}

@media screen and (max-width: 480px) {
  .home-cont {
  }
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}

.section-tree .section {
  flex: initial;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}

.section-tree-title a {
  color: #2F3941;
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
	font-family: Poppins-light;
  font-size: 14px;
  letter-spacing: -0.2px;
  padding: 10px 0;
  list-style-type: disc;
  margin-left: 15px;
}

.article-list-item a {
  color: #2F3941;
}

.icon-star {
  color: #17494D;
  font-size: 18px;
}

/***** Section pages *****/
.width-setting {
  max-width: 1160px;
  margin: 0 auto;
}

.sect-cont-div {
    background: url(/hc/theming_assets/01M37A3F7E414F7HX8BEQS4SM0);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10% center;
  padding: 0 5%;

  /* fade last ~16% of the height */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0) 100%);
}



.section-container {
  display: flex;
}

.section-content {
  flex: 1;
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}

.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}

.section-list-item:first-child {
  border-top: 1px solid #ddd;
}

.section-list-item a {
  align-items: center;
  color: #2F3941;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}

.see-all-sections-trigger[aria-hidden="true"] {
  display: none;
}

.section-header {
  bottom: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

.sect-heading {
  font-size: 26px;
  letter-spacing: 1px;
  color: #ff7518; /* HALLOWEEN — was #073065 */
  font-family: 'Grobold';
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
  }
}

.article-container {
  display: flex;
  flex-direction: column;
}

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

ul.article-list {
    margin-bottom: 20px;
}

.article-avatar {
  margin-right: 10px;
}

.article-author {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}

@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}

.article-info {
  max-width: 100%;
  min-height: 40vh;
}

.article-meta {
  display: inline-block;
  vertical-align: middle;
}

.article-body a {
  color: #1F73B7;
  text-decoration: underline;
}

.article-body a:visited {
  color: #9358B0;
}

.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}

.article-body img {
  height: auto;
  max-width: 100%;
}

.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"]
.article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

.article-body code {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}

.article-body > p:last-child {
  margin-bottom: 0;
}

zd-summary-block {
  background: #EAF2FB;
  color: #1a2f5c;
}

[dir="ltr"] zd-summary-block {
  border-left: 4px solid #070365;
}
.article-content {
  line-height: 1.6;
  margin: 0 0 40px 0;
  word-wrap: break-word;
  font-family: poppins-light;
}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 70px;
}

.article-comment-count {
  color: #5a6d7c;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count-icon {
  vertical-align: middle;
  color: #17494D;
  width: 18px;
  height: 18px;
}

.article-sidebar {
  flex: 1 0 auto;
  padding: 0;
}

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
  }
}

.article-relatives, .article-votes-count {
  display: none;
}

.article-votes {
  display: flex;
  font-family: Poppins;
  font-size: 15px;
  letter-spacing: -0.2px;
  flex-direction: column;
  align-content: flex-start;
  border-top: 1px solid #ddd;
}

.article-vote {
  width: 1.5rem;
  height: 3.5rem;
  font-size: 0;
  background-color: transparent;
  background-position: center;
  border: none;
  opacity: 50%;
}

.article-votes-question {
  font-family: poppins-medium;
  font-size: 15px;
  letter-spacing: -0.24px;
  color: #2A385D;
  padding-right: 1vw;
}

.article-vote:focus, .article-vote:active {
  opacity: 100%;
}

.article-vote-up {
  background-image: url(/hc/theming_assets/01JG6C2ZG0SN1ERN51H3X0A87C);
  background-repeat: no-repeat;
}

.article-vote-down {
  background-image: url(/hc/theming_assets/01JG6C2ZEGWR8M2F72H5AJK1XF);
  background-repeat: no-repeat;
}

.article-vote-down:focus, .article-vote-up:focus, .article-vote-down:active, .article-vote-up:active  {
  opacity: 100%;
}

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}

.article-more-questions a {
  color: #1F73B7;
  text-decoration: underline;
}

.article-more-questions a:visited {
  color: #9358B0;
}

.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}

.article-return-to-top {
  display: flex;
  border-top: 1px solid #ddd;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.bi {
  position: relative;
  top: 5px;
}

.article-return-to-top a {
  color: #2F3941;
  display: block;
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

.article-return-to-top-icon {
  transform: rotate(0.5turn);
}

.vote-break {
  font-family: poppins-bold;
  font-size: 16px;
  margin: -20px 0;
  position: relative;
  bottom: 8px;
  z-index: -1;
}

.vote-text-buttons {
  display: grid;
  grid-template-columns: fit-content(100%) 1fr;
  align-items: center;
  justify-items: start;
}

.message-us {
  font-family: Grobold;
  font-size: 17px;
  letter-spacing: -0.26px;
  color: #2A385D;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 20px;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}

.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
}

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

/*** article text format ***/
.wysiwyg-font-size-large {
    font-size: 15px;
    font-family: poppins;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  left: 0;
  position: absolute;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone a {
  text-decoration: none;
  font-size: 13px;
}

.upload-dropzone span {
  color: #073065;
  margin-top: 40px;
}

.upload-dropzone {
  height: 116px;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23B1B1B1FF' stroke-width='3' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
	border-radius: 10px;
  background-color: #FFFFFF;
}

.form-heading {
  font-size: 15px;
  letter-spacing: 1px;
  color: white; /* HALLOWEEN — was #070365 */
  font-family: 'poppins-light';
}

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

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

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

.share a {
  color: #5a6d7c;
}

.share a:hover {
  text-decoration: none;
  color: #17494D;
}

.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: #1F73B7;
  text-decoration: underline;
}

.comment-callout a:visited {
  color: #9358B0;
}

.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter .dropdown-toggle {
  color: #5a6d7c;
  font-size: 13px;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid #17494D;
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: #17494D;
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

.comment-body a {
  color: #1F73B7;
  text-decoration: underline;
}

.comment-body a:visited {
  color: #9358B0;
}

.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"]
.comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body code {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}

.comment-mark-as-solved {
  display: inline-block;
}

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

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

.vote-sum {
  color: #5a6d7c;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

.vote-up:hover,
.vote-down:hover {
  color: #17494D;
}

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

.vote-voted {
  color: #17494D;
}

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

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01J0RARQHY8F8NJXATKNQDHZYP);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}

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

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}

.community-follow button:hover {
  background-color: #17494D;
}

.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"] {
  background-color: #17494D;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.community-follow button[data-selected="true"]:hover {
  background-color: #000;
  border-color: #000;
}

.community-follow button::after {
  border-left: 1px solid #17494D;
  content: attr(data-follower-count);
  color: #17494D;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}

[dir="rtl"] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #17494D;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: #1F73B7;
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: #9358B0;
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #5a6d7c;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: #2F3941;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: #17494D;
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5a6d7c;
}

.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}

.status-label-open {
  background-color: #c72a1c;
}

.status-label-solved {
  background-color: #68737d;
}

.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}

.status-label-hold {
  background-color: #000;
}

.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body a {
  color: #1F73B7;
  text-decoration: underline;
}

.post-body a:visited {
  color: #9358B0;
}

.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"]
.post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body code {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f0e8eb;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #5a6d7c;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: #17494D;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

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

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}

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

.community-badge-container-achievements > .community-badge-titles {
  margin-left: calc(28px - 0.5em);
}

[dir="rtl"] .community-badge-container-achievements > .community-badge-titles {
  margin-right: calc(28px - 0.5em);
}

.community-name-and-title-badges {
  display: flex;
  flex-wrap: wrap;
}

.community-badge {
  margin: 2px;
}

.community-badge-achievements {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}

.profile-info .community-badge-achievements {
  height: 40px;
  width: 40px;
}

.community-title-badges {
  flex-basis: 100%;
  margin-top: 15px;
}

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

.community-badge-achievements img {
  width: 100%;
  height: 100%;
}

.community-badge-titles img {
  width: 20px;
  height: 20px;
}

.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}

.collapsible-nav-toggle-icon {
  display: none;
}

.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid #17494D;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: #2F3941;
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: #2F3941;
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

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

@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected="true"]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid #17494D;
    order: 1;
  }
}

.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
  color: #2F3941;
}

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-toggle {
  position: absolute;
  top: calc(45px / 2);
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}

.collapsible-sidebar-toggle-icon {
  display: none;
}

.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}

.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #17494D;
}

.collapsible-sidebar-body {
  display: none;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #ece1e6;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  margin-bottom: 30px;
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #5a6d7c;
  font-size: 13px;
}

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

.no-activities {
  color: #5a6d7c;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5a6d7c;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid #17494D;
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid #17494D;
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f0e8eb;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #5a6d7c;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 25px 0;
  position: relative;
  bottom: 30px;
}

.pagination-next, .pagination-prev {
  display: inline-block;
}

.pagination-last, .pagination-first {
  display: none;
}

.pagination-next-link {
  font-family: poppins-bold;
  padding-right: 10px;
  border-radius: 20px;
  line-height: 2.6;
  font-size: 12.3px;
  text-decoration: none;
  background-color: #ECAA0D;
  color: #FFF;
  border: none;
}

.pagination-next-text {
  margin-right: 10px;
}

[dir="rtl"] .pagination-next-link {
  padding-left: 10px;
}

[dir="rtl"] .pagination-next-text {
  margin-left: 10px;
}

.pagination-prev-link {
  font-family: poppins-bold;
  border-radius: 20px;
  line-height: 2.6;
  font-size: 12.3px;
  text-decoration: none;
  background-color: #ECAA0D;
  color: #FFF;
  border: none;
}

.pagination-prev-text {
  margin-left: 10px;
}

[dir="rtl"] .pagination-prev-link {
  padding-right: 10px;
}

[dir="rtl"] .pagination-prev-text {
  margin-right: 10px;
}

.pagination-next-link:active, .pagination-prev-link:active {
  -webkit-tap-highlight-color: transparent;
  transition-property: scale;
  transition-timing-function: ease;
  transition-duration: 350ms;
  transform: scale(0.84);
  transform: translateY(4px);
}

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #5a6d7c;
  font-size: 13px;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}

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

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

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

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

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

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

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

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

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

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

.profile-stats .stat-label {
  color: #5a6d7c;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

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

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

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

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

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

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

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

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

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

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

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

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px #17494D;
  border-radius: 4px;
  color: #17494D;
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

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

.profile-section {
  width: 100%;
}

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

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

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

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5a6d7c;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}

.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}

.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}

.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}

.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}

.profile-badges-item-image img {
  max-height: 40px;
}

[dir="rtl"] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}

.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}

.profile-badges-item-title {
  font-weight: 600;
}

.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5a6d7c;
  font-size: 13px;
  margin: 0;
}

.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}

[dir="rtl"] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

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

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

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

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

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

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

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

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-icon {
  right: 0;
}

.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}

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

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}

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

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

.private-activity-icon {
  margin-right: 10px;
}

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

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

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}

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

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

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

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

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f0e8eb;
}

@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(246, 241, 243, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}

[dir="rtl"] .profile-activity-icon {
  right: 0;
}

@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir="rtl"] .profile-activity-icon {
    right: -14px;
  }
}

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

/***** Search results *****/
.srch-cont {
  min-height: 250px;
  margin-bottom: 20px;
}

.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
  .srch-cont {
  	min-height: 300px;
}
  .search-results {
    flex-direction: column;
  }
}

.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}

.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #2F3941;
}

.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}

.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}

.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}

.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}

@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}

.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  display: none;
}

.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}

.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #1F73B7;
}

.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}

.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}

.search-results-sidebar .see-all-filters::after {
  content: ' \2304';
  font-weight: bold;
}

.search-results-subheading {
  font-size: 15px;
  color: black;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-results .meta-group {
  display: block;
  align-items: center;
  clear: both;
  color: #666;
}

@media (min-width: 1024px) {
  .search-results .meta-group {
    display: flex;
  }
}

.search-results .meta-group > li {
  display: block;
}

@media (min-width: 1024px) {
  .search-results .meta-group > li {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .search-results .meta-group li:first-child {
    flex: 1;
  }
}

.search-results .meta-group .meta-data {
  color: inherit;
}

[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-right: 20px;
}

[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-left: 20px;
}

.search-results .meta-group .meta-data::after {
  content: none;
}

.search-results-description {
  margin-top: 5px;
  word-break: break-word;
  font-family: 'Poppins-light';
  font-size: 14px;
}

.search-result-title {
  font-size: 14px;
  display: inline-block;
  text-decoration: underline;
}

[dir="ltr"] .search-result-icons {
  float: right;
}

[dir="rtl"] .search-result-icons {
  float: left;
}

.search-result-votes, .search-result-meta-count {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes-icon, .search-result-meta-count-icon {
  color: #17494D;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}

@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

[dir="rtl"] .notification-inline {
  text-align: right;
}

.notification-inline[aria-hidden="true"] {
  display: none;
}

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

[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}

.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}

.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

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

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

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

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}

.dropdown-toggle:hover {
  text-decoration: none;
}

.dropdown-toggle > * {
  display: inline-block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

.dropdown-menu[aria-expanded="true"] {
  display: block;
}

.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}

.dropdown-menu [role="menuitem"] {
  color: #333;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: 10px;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}

.dropdown-menu [role="menuitem"]:hover, .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}

.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][aria-hidden="true"] {
  display: none !important;
}

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

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

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

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

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

zd-autocomplete  {
  font-family: poppins;
  font-size: 13px;
  background-color: #F6F1F3;
  border: none;
  border-radius: 10px;
}

/*** Language Fonts ***/
/*** Portuguese & Spanish ***/
.whats-new-title:lang(es), .whats-new-title:lang(pt), .form-title:lang(es), .need-help:lang(es), .sect-name:lang(es), .home-titles:lang(es), .social-title:lang(es), .article-title:lang(es), .ty-top-msg:lang(es), .form-title:lang(pt), .sect-name:lang(pt), .home-titles:lang(pt), .social-title:lang(pt), .article-title:lang(pt), .ty-top-msg:lang(pt), .search-subtext:lang(es), .search-subtext:lang(pt) {
  font-family: grobold-pt;
}

/*** Japanese ***/
.whats-new-title:lang(ja), .form-title:lang(ja), .need-help:lang(ja), .search-subtext:lang(ja), .sect-name:lang(ja), .home-titles:lang(ja), .social-title:lang(ja), .article-title:lang(ja), .ty-top-msg:lang(ja), .form-title:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}

/*** Simplified Chinese ***/
.whats-new-title:lang(zh), .form-title:lang(zh), .need-help:lang(zh), .search-subtext:lang(zh), .sect-name:lang(zh), .home-titles:lang(zh), .social-title:lang(zh), .article-title:lang(zh), .ty-top-msg:lang(zh), .form-title:lang(zh) {
  font-family: 'Noto Sans SC', sans-serif;
}

/*** Traditional Chinese ***/
.whats-new-title:lang(zh-tw), .form-title:lang(zh-tw), .need-help:lang(zh-tw), .search-subtext:lang(zh-tw), .sect-name:lang(zh-tw), .home-titles:lang(zh-tw), .social-title:lang(zh-tw), .article-title:lang(zh-tw), .ty-top-msg:lang(zh-tw), .form-title:lang(zh-tw) {
  font-family: 'Noto Sans TC', sans-serif;
}

/*** Russian ***/
.whats-new-title:lang(ru), .form-title:lang(ru), .need-help:lang(ru), .search-subtext:lang(ru), .sect-name:lang(ru), .home-titles:lang(ru), .social-title:lang(ru), .article-title:lang(ru), .ty-top-msg:lang(ru), .form-title:lang(ru) {
  font-family: Grobold-ru;
}

/*** Thai ***/
.whats-new-title:lang(th), .form-title:lang(th), .need-help:lang(th), .search-subtext:lang(th), .sect-name:lang(th), .home-titles:lang(th), .social-title:lang(th), .article-title:lang(th), .ty-top-msg:lang(th), .form-title:lang(th) {
  font-family: Grobold-th;
}

/*** Arabic ***/
.whats-new-title:lang(ar), .form-title:lang(ar), .need-help:lang(ar), .search-subtext:lang(ar), .sect-name:lang(ar), .home-titles:lang(ar), .social-title:lang(ar), .article-title:lang(ar), .ty-top-msg:lang(ar), .form-title:lang(ar) {
  font-family: Lalezar;
}

[dir="rtl"] .search-subtext, [dir="rtl"] .nesty-input, [dir="rtl"] .nesty-panel, [dir="rtl"] .nesty-panel li, [dir="rtl"] .form-field, [dir="rtl"] #request_custom_fields_4414011880082, [dir="rtl"] .form-desc-text, [dir="rtl"] .privacy-policy, [dir="rtl"] .breadcrumbs, [dir="rtl"] ::placeholder, [dir="rtl"] .common-topics, [dir="rtl"] .common-topics2, [dir="rtl"] .blocks-item-link, [dir="rtl"] a.reg-link, [dir="rtl"] .new-desc1, [dir="rtl"] .new-desc2, [dir="rtl"] .new-desc3, [dir="rtl"] .new-desc4, [dir="rtl"] .article-list-item, [dir="rtl"] .article-body, [dir="rtl"] .article-votes2, [dir="rtl"] .article-votes-label, [dir="rtl"] .article-votes-question, [dir="rtl"] .vote-break, [dir="rtl"] .ty-bottom-msg, [dir="rtl"] .ty-gotit, [dir="rtl"] .pagination-next-link, [dir="rtl"] .pagination-prev-link, [dir="rtl"] .search-results-subheading, [dir="rtl"] .search-results-column, [dir="rtl"] .search-results-list > li h2, [dir="rtl"] .search-results-description, [dir="rtl"] zd-autocomplete, [dir="rtl"] .search-bar.home-page-submit input[type=submit], [dir="rtl"] .form-field ~ .form-field {
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
}

[dir="rtl"] .social-bg {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

[dir="rtl"] .MA-logo-home {
  margin-right: 0;
}

[dir="rtl"] .article-list {
  padding-right: 5%;
}

[dir="rtl"] .common-topics {
  text-align: right;
}

[dir="rtl"] .logo {
  text-align: right;
}

[dir="rtl"] .period {
  display: none;
}

/*** Media < 768 ***/
@media screen and (max-width: 380px) {
  .header-img {
    width: 300px;
    min-width: 264px;
  }
}

@media screen and (min-width: 430px) {
   .blocks-list {
    grid-template-columns: repeat(6, 1fr);
  }

  .blocks-item:last-child {
    grid-column-end: 5;
  }

}

@media screen and (min-width: 640px) {
  .blocks-list {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .blocks-item {
    grid-column: span 1;
    justify-self: center;
  }

}

/*** Media 768 ***/
@media screen and (min-width: 768px) {
  .srch-find-com {
    margin-top: 130px;
  }
  .header-img {
    width: 400px;
    float: right;
    position: relative;
    top: -50px;
  }
  [dir="rtl"] .header-img {
    float: left;
  }
    .hero {

  background-image: url(/hc/theming_assets/01M379DTKKYZ8NWCXSTRC8QVY1);
  background-position: 45% -275px;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 20px 30px 0;
  text-align: center;
  width: 100%;
  overflow:visible;
  }
  .hero-content {
    padding-top: 45px;
  }

  .common-topics, .hero-inner {
    width: 43%;
  }
  .common-topics {
    transform: translateY(35px); /* HALLOWEEN — new */
  }
  .home-cont {
    margin-top: 100px;
  }
  .search-subtext {
    text-align: left;
    font-size: 34px;
    max-width: 280px;
    margin-top: -82px;
    line-height: 1;
    max-height: 107px;
    margin-left: 10px;
  }
  [dir="rtl"] .search-subtext {
    text-align: right;
  }
  .whats-new {
    margin-bottom: 0;
  }
  .social-links {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 0.2px;
  justify-content: center;
  align-content: center;
  position: relative;
  bottom: 200px;
}
   .social-title-cont {
  position: relative;
  top: 50%;
  display: flex;
  justify-content: center;
}

.social-title {
  font-size: 40px;
  line-height: 1;
  text-align: center;
	}
  [dir="rtl"] .social-title {
    text-align: right;
    z-index: 10;
  }
  [dir="rtl"] .article-list {
    padding-right: 3%;
	}
}

/* HALLOWEEN — "Support" text position on phones/small tablets */
@media (min-width: 410px) and (max-width: 768px) {
  .support-text {
    top: 100%; /* was 87% in the base mobile rule */
  }
}
/* END HALLOWEEN */

/*** Media 1024 ***/
@media screen and (min-width: 1024px) {
  .new-post-hov { /* HALLOWEEN — was ".blocks-item, .new-post-hov" (keeps the orange block border on desktop) */
    border: 1px solid #0000001f;
  }

  body {
    background: white;
  }
  .social-bg {
    background-image: url(/hc/theming_assets/01JGED3T15AFFEYDGHH8X9QBHE);
    background-size: 500px 200px;
 	  height: 650px;
  }
  .btn {
    width: 95px;
	}
  .header-img {
    width: 464px;
  }
  .search-home input[type="submit"] {
    display: inline-block;
    position: relative;
    top: 6px;
    right: 100px;
    min-width: 90px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	}
  [dir="rtl"] .search-home input[type="submit"] {
    right: -105px;
  }
  .search-subtext {
    font-size: 45px;
    max-width: 375px;
    margin-top: -48px;
    max-height: 128px;
  }
  .search-subtext:lang(id) {
    max-width: 470px;
  }
  .whats-new {
    margin-top: 80px;
  }
  .post-cont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-evenly;
    align-content: center;
    justify-items: center;
    align-items: baseline;
  }
  .new-post {
    background: white;
    border: 1px solid #0000001f;
    border-radius: 10px;
    box-shadow: 0px 4px 10px 0 rgb(0 0 0 / 10%), 0px 4px 5px 0 rgb(0 0 0 / 9%) !important;
    margin-bottom: 30px;
  }
  .new-post, .new-post-hov {
    width: 425px;
  }
   hr, .path67 {display: none;}
  .new-title {margin: revert;}
  .social-links {
    width: 850px;
    margin: 0 auto;
  }
  .search-results {
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    background: white;
/*     min-height: 630px; */
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    position: relative;
    bottom: 120px;
  }
  .common-topics, .hero-inner {
    width: 50%;
	}
  .common-topics {
    padding: 0 75px 0 5px;
  }
  .social-title:lang(id), .social-title:lang(ja), .social-title:lang(ru), .social-title:lang(fr) {
    font-size: 35px;
  }
  .ty-main-content {
    background-color: white;
  }
  .search-pag {
    position: relative;
    bottom: 160px;
    left: 20px;
  }
}

/**** 1160+ ****/
@media screen and (min-width: 1160px) {
  .social-links {
    bottom: 122px;
  }
}

@media screen and (min-width: 1920px) {
  .social-links {
    bottom: 170px;
  }
  .hero
 {
  height: 450px;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0), #fff 90%), /* bottom fade */
    url(/hc/theming_assets/01M379DTKKYZ8NWCXSTRC8QVY1);
  background-size: 100% 56px, cover;          /* fade band height, then image */
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, 80% center; /* fade sticks to bottom */
}
}

/* NOTE: The rule below was never applied on the live site — a stray "}"
   right before it made browsers skip it. It's commented out so the site
   looks exactly the same as today. Uncomment only if you want it.
@media screen and (min-width: 1280px) {
  .hero {
height: 450px;
   background-size: cover;
    background-repeat: no-repeat;
    background-position: 80% -12px;
  }
}
*/

/**** Social Med BG ****/
@media screen and (min-width: 780px) {
  .social-bg {
    background-size: 1024px 559px;
    height: 559px;
  }
   .social-links {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-gap: 1px;
  justify-items: center;
     justify-content: center;
  position: relative;
  bottom: 300px;
}
}

@media screen and (min-width: 1040px) {
  .social-bg {
    background-size: 1372px 662px;
    height: 662px;
  }
}

@media screen and (min-width: 1380px) {
  .social-bg {
    background-image: url(/hc/theming_assets/01JGED3T15AFFEYDGHH8X9QBHE);
    background-size: 1700px 664px;
    height: 664px;
  }
}

@media screen and (min-width: 1700px) {
  .social-bg {
    background-image: url(/hc/theming_assets/01JGED3T15AFFEYDGHH8X9QBHE);
    background-size: 2048px 800px;
    height: 800px;
  }
}

/*MW-Notificaiton Banner CSS */
/* Common, default styles for the notification box */

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
	position: relative;
	background: rgba(192, 57, 43,0.85);
	padding: 10px 20px 20px 20px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: rgba(250,251,255,0.95);
	font-size: 85%;
  border-bottom: 1px solid #DDD;
}

.ns-box.ns-show {
	pointer-events: auto;
}

.ns-box a {
	color: inherit;
  opacity: 0.7;
	font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
	opacity: 1;
}

.ns-box p {
    margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
	pointer-events: auto;
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
	outline: none;
}

.ns-close::before,
.ns-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
	background: #fff;
}

.ns-close::before {
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}

.ns-box-inner i {
    color: #fff;
    font-size: 3.8em;
    text-align: center;
}

.megaphone:before {
  content:'\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
  position: relative;
  top: 18px;
}

@media (max-width: 768px) {
  .megaphone:before {
    position: relative;
    top: 40px;
  }
}

/* Top bar notifications */
.ns-box.ns-bar {
	top: 0;
	left: 0;
	width: 100%;
}

.ns-bar .ns-close {
	background: transparent;
	margin-top: 15px;
	right: 20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
	background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}



/* Slide on top */
.ns-effect-slidetop {
	box-shadow: inset 5.4em 0 rgba(0,0,0,0.1);
}

.ns-effect-slidetop .icon {
	position: absolute;
	display: block;
	font-size: 109%;
	top: 50%;
	left: 1em;
	-webkit-transform: translate3d(0,-20%,0);
	transform: translate3d(0,-20%,0);
}

.ns-effect-slidetop p {
	padding: 0 3.2em;
	font-size: 1.2em;
	display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
	width: 2px;
	background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
	background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animScaleUp;
	animation-name: animScaleUp;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animFade;
	animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

@keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}
/* @media (max-width: 768px){ */
  .linkHelp {
    position: relative;
    left: 20px;
    top: -10px;
  }
/* } */


@-webkit-keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); }
}

@keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

/* CSS for the info icon container */
.info-icon-container {
    display: flex;
    justify-content: flex-end; /* Align the content to the right */
    align-items: center; /* Center vertically */
    text-align: right; /* Align the text inside the container to the right */
    margin-top: 20px; /* Adjust as needed for spacing */
}

/* CSS for the info icon */
.info-icon {
    font-size: 12px; /* Set the font size smaller */
    color: black;    /* Set the text color to black */
    position: relative; /* Ensure position relative for tooltip positioning */
    display: inline-block;
    cursor: pointer;
}

/* CSS for the Privacy Policy hyperlink */
.info-icon a {
    color: blue; /* Set the color of the link to blue */
    text-decoration: none; /* Remove underline */
}

.info-icon a:hover {
    text-decoration: underline; /* Add underline on hover */
}
.hero-content {
    position: relative;
    text-align: center; /* Center content by default */
}

.header-img {
    display: block;
    margin: -12px auto 10px auto; /* Center align image and add bottom margin */
}

.support-text {
    position: absolute;
    top: 350px; /* Keeps text positioned further down for desktop view */
    right: 150px; /* Moves text 150px away from the right edge for desktop view */
    padding-bottom: 20px;
    text-align: center; /* Center text alignment for all languages */
    font-size: 19px;
    font-family: grobold;
    color: #ff7518; /* HALLOWEEN — was #073065 */
    margin: 0;
    white-space: nowrap; /* Prevents text wrapping */
    line-height: normal; /* Resets the line height */
}

@media (max-width: 767px) {
    .support-text {
        top: 87%; /* Adjusted top value to move it down for mobile phones */
        right: 5%; /* Adjusted right alignment for mobile phones */
        left: 5%; /* Ensures text stays within view */
        transform: translateY(-50%); /* Centers text vertically relative to the viewport */
        font-size: 20px; /* Decrease font size for better readability on mobile */
        white-space: nowrap; /* Prevents text wrapping */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Adjustments for iPad Mini, iPad 9.7", and similar sizes */
    .support-text {
        top: 315px; /* Slightly higher value than desktop */
        right: 100px; /* Slightly more to the right than desktop */
        font-size: 19px;
        left: auto; /* Ensure the text is only adjusted from the right side */
        transform: none; /* Remove transform to keep it as desktop */
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    /* Adjustments for iPad Pro 10.5", 11", and 12.9" */
    .support-text {
        top: 315px; /* Moved slightly down compared to other iPads */
right: 100px;
      font-size: 19px;
        left: auto; /* Ensure the text is only adjusted from the right side */
        transform: none; /* Remove transform to keep it as desktop */
      text-align: center;
    }
}

@media (min-width: 1367px) {
    .support-text {
        font-size: 34px;
        max-width: 280px;
        line-height: 1;
        top: 325px; /* Restore original top value for larger screens */
        right: 100px; /* Restore original right value for larger screens */
        white-space: nowrap; /* Ensure no wrapping on larger screens */
    }
}

[dir="rtl"] .support-text {
    text-align: center; /* Center text alignment for RTL languages */
}

#request_custom_fields_21668630803474_label,
#request_custom_fields_21668630803474 {
display: none;
}
.refund-attachment-error {
  color: darkred !important; /* Use !important to ensure override if needed */
  background-color: peachpuff !important;
  border: 2px solid darkred !important;
  font-weight: bold !important;
  /* Add any other desired styles here */
}
.hide {
  display: none;
}
.vote-break p {
  visibility: hidden;
}

/* Banner */
div[data-template="moon-banner"] {
  margin-inline: -20px;
  background: #FFC107; /* Ensure the wrapper also has the background color */
  overflow: hidden; /* Helps contain children and prevent bleed-through */
}

.moon-banner {
  width: 100%;
  display: flex;
  padding: 16px;
  background: #FFC107; /* Your orange/yellow banner background - keep this! */
  border-radius: 6px;
  /* Removed gap here as we'll manage space within the content itself */
  align-items: center; /* Vertically align items in the banner */
  justify-content: center; /* Add this to horizontally center the flex items */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  position: relative; /* Make the banner the reference point for the 'X' button */
}

.moon-banner .moon-banner-close-icon {
  cursor: pointer;
  padding: 4px;
  color: rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease-in-out;
  position: absolute; /* Position the button precisely */
  top: 10px; /* Position from the top of the banner */
  right: 10px; /* Position from the right of the banner */
  z-index: 10; /* Ensure the button is on top of other content */
}

.moon-banner .moon-banner-close-icon:hover {
  color: rgba(0, 0, 0, 0.9);
}

/* Style for the SVG icon within the close button (if applicable) */
.moon-banner .moon-banner-close-icon svg {
  width: 20px; /* Adjust size if needed */
  height: 20px;
}

/* All other styles remain the same. The following is for context. */
.moon-banner > div:nth-child(2) {
  flex: 1; /* Allows this div to take up remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #333;
  /* Potentially add some margin-right if the icon is part of this div's content
     and you need spacing between it and the text */
}

.moon-banner .moon-banner-title {
  /* font-family: 'Open Sans', sans-serif; */ /* Removed font-family configuration */
  font-size: 20px; /* Slightly larger for title */
  font-weight: 700;
  margin-block: 0 4px; /* Adjust top/bottom margin */
  color: #2c3e50; /* Stronger color for the title */
}

.moon-banner > div:nth-child(2) p { /* General paragraph style for description */
  /* font-family: 'Open Sans', sans-serif; */ /* Removed font-family configuration */
  font-size: 15px;
  margin-block: 0;
  line-height: 1.4;
}

/* Styles for the form container (before and after submission) */
.moon-banner-form {
  display: flex; /* Keeps input and button horizontal */
  flex-wrap: wrap; /* Allows input/button to wrap to the next line on small screens */
  gap: 10px; /* Space between input, button, and then error */
  margin-top: 15px; /* Vertical space from description */
  align-items: center; /* Vertically align input and button when side-by-side */
  width: 100%; /* Ensure it spans the width of its parent */
  justify-content: flex-start; /* Align form elements to the left by default */
}

/* Existing styles for the button */
.moon-banner-submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.moon-banner-submit-button:hover {
  background-color: #0056b3; /* Darker on hover */
  transform: translateY(-1px); /* Slight lift on hover */
}

.moon-banner-submit-button:active {
  transform: translateY(0); /* Press effect */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Base styles for the email input */
.moon-banner-email-input {
  flex: 1; /* Allows the input to grow and take available space */
  min-width: 250px; /* Ensures the input is comfortably large on wider screens */
  padding: 10px 14px; /* More padding for a better feel */
  border: 1px solid #a0a0a0; /* Slightly darker border */
  border-radius: 5px; /* Slightly more rounded corners */
  font-size: 16px;
  background-color: #fff; /* White background for input */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle inner shadow */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* font-family: 'Open Sans', sans-serif; */ /* Removed font-family configuration */
}

.moon-banner-email-input:focus {
  border-color: #007bff; /* Highlight on focus */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(0, 123, 255, 0.25);
  outline: none;
}

.moon-banner-email-input.error-border { /* Style for error state border */
  border-color: #d9534f; /* Red border for invalid input */
}

/* Styles for web environment (larger screens) for the email input */
@media (min-width: 769px) {
  .moon-banner-email-input {
    max-width: 300px; /* Limits the maximum width of the input on desktop */
    padding: 8px 12px; /* Slightly reduced padding for a smaller visual size */
    font-size: 14px; /* Slightly reduced font size for a smaller visual size */
  }
}

/* --- Styles for the Error Message --- */
.moon-banner-error-message {
  color: #d9534f; /* A strong red color for errors */
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px; /* Small margin below input/button group */
  text-align: left;
  width: 100%; /* IMPORTANT: Makes it take full width, forcing it to a new line */
  display: none; /* Hidden by default */
}

.moon-banner-error-message.active {
  display: block; /* Show when active */
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Styles for the Thank You Message --- */
.moon-banner-thank-you-message {
  /* font-family: 'Open Sans', sans-serif; */ /* Removed font-family configuration */
  font-size: 18px;
  font-weight: 600;
  color: #1b6a7b; /* The refined deep teal color */
  text-align: left; /* Left-aligned as requested */
  padding: 10px 0; /* Adjusted padding */
  margin-top: 15px; /* Aligns with form's top margin */
  line-height: 1.5;
  width: 100%; /* Ensure it spans the full width of its parent */
  display: block;
}

.alert-icon-container {
    /* Default styling for the icon, if any */
    display: flex; /* Helps with centering if needed */
    justify-content: center;
    align-items: center;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .alert-icon-container {
        /* Align icon to the top of the flex line, similar to the text baseline */
        align-self: flex-start;
        /* Adjusted top margin to move it a bit more up */
        margin-top: -5px;
    }

    /* Adjust the form for mobile to place button to the right of input and allow error to wrap */
    .moon-banner-form {
        flex-wrap: wrap; /* Allows items to wrap to the next line */
        justify-content: flex-start; /* Aligns items to the left */
        gap: 0; /* Set gap to 0 as we're controlling spacing with margin on the button */
    }

    /* Make the email input smaller on mobile */
    .moon-banner-email-input {
        flex-grow: 1; /* Allow input to take available space */
        min-width: unset; /* Remove the fixed min-width for more flexibility */
        max-width: 65%; /* Adjust as needed to control its size relative to the button */
        padding: 8px 12px; /* Make text box a bit smaller */
        font-size: 14px; /* Make text a bit smaller */
    }

    /* Adjust the submit button for mobile */
    .moon-banner-submit-button {
        display: inline-block; /* Ensure it stays in line with the input */
        margin: 0; /* Remove auto margins that would center it on a new line */
        margin-left: 5px; /* Added left margin to move it closer */
        /* Adjusted padding and font-size to make it smaller on mobile */
        padding: 8px 16px;
        font-size: 14px;
    }
}
.collapsible-wrapper {
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.collapsible-header {
  background-color: lightgray;
  color: #070365;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collapsible-header:after {
  content: '+';
  font-size: 1.2em;
}

.collapsible-header.open:after {
  content: '-';
}

.collapsible-content {
  padding: 10px;
  display: none; /* Hidden by default */
  background-color: #fff;
}

.collapsible-content.open {
  display: block;
}
.new-logo-class {

  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

.new-logo-class a {
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* Selects the list item containing the emoji and text */
li[title*="🎲 Game Items Probabilities"] {
    display: none !important;
}