/* Components */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');

* {
  font-family: 'Atkinson Hyperlegible', sans-serif;
};

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/*Categorias*/
html {
  font-family: 'Atkinson', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,

menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
  
}
a:active,
a:hover {
  outline: 0;  
}
abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="submit"] {
  cursor: pointer;
  background: #212121;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
  
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
/* Reset the box-sizing */
*,
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
            justify-content: center;
  }
html,
body {
  height: 100%;
}
/* Body reset */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: 'Atkinson', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Reset fonts for relevant elements */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Links */
a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  transition: 0.5s;
}
a.disabled {
    color: #818a91;
    cursor: default;
  }
figure {
  margin: 0;
}
img {
  height: auto;
  vertical-align: middle;
}
hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #f1f1f1;
}
/*
  Remove the gap between audio, canvas, iframes,
  images, videos and the bottom of their containers:
  https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.2;
  color: #123972;
}
h1 {
  margin: 0 0 calc(16px * 1.5);
}
h3 {
  margin: 0 0 calc(16px * 1.5);
}
h4 {
  margin: 0 0 calc(16px * 1.5);
}
h5 {
  margin: 0 0 calc(16px * 1.5);
}
h6 {
  margin: 0 0 calc(16px * 1.5);
}
.h1 {
  margin: 0 0 calc(16px * 1.5);
}
.h2 {
  margin: 0 0 calc(16px * 1.5);
}
.h3 {
  margin: 0 0 calc(16px * 1.5);
}
.h4 {
  margin: 0 0 calc(16px * 1.5);
}
.h5 {
  margin: 0 0 calc(16px * 1.5);
}
.h6 {
  margin: 0 0 calc(16px * 1.5);
}
p {
  margin: 0 0 calc(16px * 1.5);
}
ul {
  margin: 0 0 calc(16px * 1.5);
}
ol {
  margin: 0 0 calc(16px * 1.5);
}
h1 {
  font-size: calc(16px * 2.5);
}
.h1 {
  font-size: calc(16px * 2.5);
}
h2 {
  font-size: calc(16px * 1.75);
}
.h2 {
  margin: 7px;
  font-size: calc(16px * 1.75);
  color: #212121;
}
h3 {
  font-size: calc(16px * 1.5);
}
.h3 {
  font-size: calc(16px * 1.5);
}
h4 {
  font-size: calc(16px * 1.25);
}
.h4 {
  font-size: calc(16px * 1.25);
}
h5 {
  font-size: calc(16px * 1.1);
}
.h5 {
  font-size: calc(16px * 1.1);
}
h6 {
  font-size: calc(16px * 1);
}
.h6 {
  font-size: calc(16px * 1);
}
b {
  font-weight: 600;
}
strong {
  font-weight: 600;
}
small,
.small {
  font-size: 80%;
  font-weight: normal;
  line-height: 1;
}
/* Description Lists */
dl {
  margin-top: 0;
  margin-bottom: calc(16px * 1.5);
}
dt {
  margin-bottom: calc(16px * 1.5 / 2);
  line-height: 1.5;
}
dd {
  margin-bottom: calc(16px * 1.5 / 2);
  line-height: 1.5;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0; /* Undo browser default */
}
.dl-horizontal:before,
  .dl-horizontal:after {
    display: table;
    content: "";
  }
.dl-horizontal:after {
    clear: both;
  }
.dl-horizontal dt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
@media (min-width: 768px) {
.dl-horizontal dt {
      float: left;
      width: 30%;
      padding-right: 15px;
      clear: both
  }
    }
@media (min-width: 768px) {
.dl-horizontal dd {
      float: right;
      width: 70%
  }
    }

.melhoresPraticas {
  width: 100%;
}


/* Abbreviations and acronyms */
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #818a91;
}
/* Blockquotes */
blockquote {
  padding: calc(16px * 1.5 / 2)
    calc(16px * 1.5);
  margin: 0 0 calc(16px * 1.5);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  background-color: #fcfcfd;
  border-left: 5px solid #f1f1f1;
}
blockquote.is-colored {
    border-left: 5px solid rgba(0, 123, 189, 1);
  }
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
      margin-bottom: 0;
    }
/* Code */
code {
  padding: 20px !important;
  border-radius: 4px !important;
}
/* Addresses */
address {
  margin-bottom: calc(16px * 1.5);
  font-style: normal;
  line-height: 1.5;
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
.clearfix:after {
    clear: both;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.is-hidden,
.hidden {
  display: none !important;
}

.comment-form-controls {
  margin-top: 30px;
}
.layout {
/*   min-height: 65%; */
  background-color: rgba(255, 255, 255, 1);
}
.layout__content {
  width: 100%;
  min-height: calc(100vh - 490px);
}
.layout__content:after {
    display: block;
    height: 0;
    visibility: hidden;
    content: "\00a0";
  }
.layout__header,
.layout__footer {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
/********
Forms
--------------------------------------------------
Normalize non-controls

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

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

Shared size and type resets for form controls. Apply `.form-control` to any
of the following form controls:
********/
select {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="text"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="password"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="datetime"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="datetime-local"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="date"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="month"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="time"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="week"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="number"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="email"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="url"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="search"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="tel"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
input[type="color"] {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.nesty-input {
  display: block;
  width: 100%;
  height: auto;
  padding: calc(12px / 2)
    12px;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #bdc2c5;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

.nesty-inupt:after {
  content: "▾";
}
select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .nesty-input:focus {
    border-color: #9ed5e7;
    outline: 0;
  }
select::-moz-placeholder, textarea::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="color"]::-moz-placeholder, .nesty-input::-moz-placeholder {
    color: #999;
    opacity: 1;
  }
select:-ms-input-placeholder, textarea:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="color"]:-ms-input-placeholder, .nesty-input:-ms-input-placeholder {
    color: #999;
  }
select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="color"]::-webkit-input-placeholder, .nesty-input::-webkit-input-placeholder {
    color: #999;
  }
select {
  height: calc(16px * 1.5 + 14px);
}
textarea {
  height: 102px;
  resize: vertical;
}
/********
Search inputs in iOS

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

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

Designed to help with the organization and spacing of vertical forms. For
horizontal forms, use the predefined grid classes.
*******/
.form-field.request_description label#request_description_label {
  display: block;
  text-align: justify;
  font-size: 16px;
  color: black;
}


.form-field {
  margin-bottom: calc(16px * 1.5);
  
}
.form-field p {
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 90%;
    color: #404040;
  }
.form-field.required > label:after {
    margin-left: 2px;
    color: rgba(239, 59, 36, 1);
    content: "*";
  }
.form-field.boolean {
  position: relative;
  padding-left: 20px;
}
.form-field.boolean input[type="checkbox"] {
    position: absolute;
    left: 0;
  }
.form-field.boolean label {
    min-height: calc(16px * 1.5);
    margin-bottom: 0;
    cursor: pointer;
  }
/********
Apply same disabled cursor tweak as for inputs
Some special care is needed because <label>s don't inherit their parent's `cursor`.

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

Apply to any element you wish to create light text for placement immediately
below a form control. Use for general help, formatting, or instructional text.
********/
.help-block {
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 90%;
  color: #404040;
}
.btn {
  display: inline-block;
  padding: 6px; 
  font-weight: 700;  
  cursor: pointer;  
}


[role="button"] {
  display: inline-block;
  padding: 6px
    calc(12px + 12px / 2);
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
input[type="submit"] {  
  background: #212121;
  display: inline-block;
  padding: 6px
    calc(12px + 12px / 2);
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
.btn:focus, .btn:active:focus, [role="button"]:focus, [role="button"]:active:focus, input[type="submit"]:focus, input[type="submit"]:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.btn:hover,
  .btn:focus,
  [role="button"]:hover,
  [role="button"]:focus,
  input[type="submit"]:hover,
  input[type="submit"]:focus {
    color: #fff;
    text-decoration: none;
  }



.btn:active, [role="button"]:active, input[type="submit"]:active {
    outline: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
[role="button"] {
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
  border-color: rgba(0, 123, 189, 1);
}
[role="button"]:hover,
  [role="button"]:focus,
  [role="button"]:active {
    color: #e0e0e0;
    background-color: #005a8a;
    border-color: #005380;
  }
[role="button"]:active:focus {
    outline: none;
  }

  
  
/* Alternate buttons */
.btn--primary,
.section-subscribe .dropdown-toggle,
.article-subscribe,
.article-unsubscribe,
input[type="submit"] {
  color: #fff;
  background: #212121;
  border-color: rgba(0, 123, 189, 1);
  border-radius: 25px;
}

.btn--default {
	border-radius: 8px;
  color: white;
  background-color: #212121;
  margin: 0px 0px 20px 0px;
  padding: 10px;
  font-size: 12px;
  margin-left: 1pc;
  align-items: center;
  display: flex;
  justify-content: center;
}

.btn--default:hover,
.botao-solicitacao-footer-final:hover {
  background-color: #4A4A4A;
  transition: 0.5s;
}
  .btn--default:focus,
  .btn--default:active,
  .btn--primary:hover,
  .btn--primary:focus,
  .btn--primary:active,
  .section-subscribe .dropdown-toggle:hover,
  .section-subscribe .dropdown-toggle:focus,
  .section-subscribe .dropdown-toggle:active,
  .article-subscribe:hover,
  .article-subscribe:focus,
  .article-subscribe:active,
  .article-unsubscribe:hover,
  .article-unsubscribe:focus,
  .article-unsubscribe:active,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="submit"]:active {
    color: #fff;
    background: #cc0a42;
  }
/* Success appears as green */
.btn--success {
  color: #fff;
  background-color: rgba(80, 184, 72, 1);
  border-color: #48a640;
}
.btn--success:hover,
  .btn--success:focus,
  .btn--success:active {
    color: #e0e0e0;
    background-color: #409439;
    border-color: #357a2f;
  }
/* Warning appears as orange */
.btn--warning {
  color: $brand-warning;
  background-color: transparent;
  border-color: darken($brand-warning, 5%);
}
.btn--warning:hover,
  .btn--warning:focus,
  .btn--warning:active {
    color: darken($brand-warning, 12%);
    background-color: darken(transparent, 10%);
    border-color: darken($brand-warning, 17%);
  }
/* Danger and error appear as red */
.btn--danger {
  color: #fff;
  background-color: rgba(239, 59, 36, 1);
  border-color: #e92911;
}
.btn--danger:hover,
  .btn--danger:focus,
  .btn--danger:active {
    color: #e0e0e0;
    background-color: #d1250f;
    border-color: #af1f0d;
  }
.btn--topbar {
  border: 1px solid currentColor;
  border-radius: 100px;
}
.login {
  border: 1px solid currentColor;
  border-radius: 100px;
}
.btn--topbar:hover, .login:hover {
    opacity: 1;
  }
.btn--topbar:active, .login:active {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
.footer-logo {
  width: 210px;
  margin-left: 24px;
}
@media (min-width: 768px) {
.btn--topbar,
.login {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top
}
  }
.topbar--small .btn--topbar,
.topbar--small .login {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.topbar--small .btn--topbar:hover,
  .topbar--small .btn--topbar:focus,
  .topbar--small .btn--topbar:active,
  .topbar--small .login:hover,
  .topbar--small .login:focus,
  .topbar--small .login:active {
    color: #e0e0e0;
    background-color: darken(transparent, 10%);
    border-color: #e0e0e0;
  }
@media (max-width: 767px) {
.btn--topbar {
    display: block;
    width: 100%;
    margin-bottom: calc(16px * 1.5 / 2)
}
.login {
    display: block;
    width: 100%;
    margin-bottom: calc(16px * 1.5 / 2)
}
.language-selector {
    display: block;
    width: 100%;
    margin-bottom: calc(16px * 1.5 / 2)
}
.submit-a-request {
    display: block;
    width: 100%;
    margin-bottom: calc(16px * 1.5 / 2)
}
  }


/* Tables */
table {
  background-color: transparent;
}
caption {
  padding-top: 12px;
  padding-bottom: 12px;
  color: #818a91;
  text-align: left;
}
th {
  text-align: left;
}
/* Baseline styles */
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: calc(16px * 1.5);
}
.table th,
  .table td {
    padding: 12px;
    vertical-align: top;
  }
.table td {
    border-top: 1px solid #ddd;
  }
.table thead th {
    vertical-align: bottom;
  }
.table tbody + tbody {
    border-top: 1px solid #ddd;
  }
.table .table {
    background-color: #fff;
  }
.table--color-header th {
    color: #fff;
    background-color: rgba(0, 123, 189, 1);
  }
.table--striped th,
  .table--striped td,
  .table--striped thead th {
    border-color: #fff;
  }
.table--striped tbody tr:nth-child(odd) {
    color: inherit;
    background-color: #f1f1f1;
  }
.table--hover tbody tr:hover {
    color: inherit;
    background-color: #f1f1f1;
  }
.table--bordered {
  border: 1px solid #d3d6d8;
}
.table--bordered td {
    border-left: 1px solid #d3d6d8;
  }
.table--bordered th {
    border-left: 1px solid #d3d6d8;
  }
/***********
Responsive tables

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

    .table-responsive > .table {
      margin-bottom: 0;
    }
          .table-responsive > .table > thead > tr > th,
          .table-responsive > .table > thead > tr > td,
          .table-responsive > .table > tbody > tr > th,
          .table-responsive > .table > tbody > tr > td,
          .table-responsive > .table > tfoot > tr > th,
          .table-responsive > .table > tfoot > tr > td {
            white-space: nowrap;
          }
  }


.column {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.column--xs-1 {
  width: 8.33333%;
}
.column--xs-2 {
  width: 16.66667%;
}
.column--xs-3 {
  width: 25%;
}
.column--xs-4 {
  width: 33.33333%;
}
.column--xs-5 {
  width: 41.66667%;
}
.column--xs-6 {
  width: 50%;
}
.column--xs-7 {
  width: 58.33333%;
}
.column--xs-8 {
  width: 66.66667%;
}
.column--xs-9 {
  width: 75%;
}
.column--xs-10 {
  width: 83.33333%;
}
.column--xs-11 {
  width: 91.66667%;
}
.column--xs-12 {
  width: 100%;
}
.column--xs-offset-0 {
  margin-left: 0%;
}
.column--xs-offset-1 {
  margin-left: 8.33333%;
}
.column--xs-offset-2 {
  margin-left: 16.66667%;
}
.column--xs-offset-3 {
  margin-left: 25%;
}
.column--xs-offset-4 {
  margin-left: 33.33333%;
}
.column--xs-offset-5 {
  margin-left: 41.66667%;
}
.column--xs-offset-6 {
  margin-left: 50%;
}
.column--xs-offset-7 {
  margin-left: 58.33333%;
}
.column--xs-offset-8 {
  margin-left: 66.66667%;
}
.column--xs-offset-9 {
  margin-left: 75%;
}
.column--xs-offset-10 {
  margin-left: 83.33333%;
}
.column--xs-offset-11 {
  margin-left: 91.66667%;
}
.column--xs-offset-12 {
  margin-left: 100%;
}
@media (min-width: 768px) {
  .column--sm-1 {
    width: 8.33333%;
  }

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

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

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

  .column--sm-5 {
    width: 41.66667%;
  }
  
  li.result-article {
    margin-top: 30px;
  }
  
  .search-results-description {
    margin-top: -21px;
  }

.search-result-title a  {  
  color: #212121 !important;
  font-size: 20px;
  }

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

  .column--sm-8 {
    width: 600px;
  }

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

  .column--md-4 {
    width: 33.3333%
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.topabr + main {
  /* topBar */
}

.meta__item {
  display: inline-block;
  margin-right: calc(12px / 2);
}
.meta__item + .meta__item:before {
    margin-right: calc(12px / 2);
    font-size: 10px;
    content: "\2022";
  }
.meta--profile {
  margin-bottom: 0;
}
.lines-button {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  padding: 7.5px;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: calc(16px - 5px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent !important;
  border: 0;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
.lines-button:focus, .lines-button:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.lines-button:hover,
  .lines-button:focus {
    color: #fff;
    text-decoration: none;
  }
.lines-button:active {
    outline: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
@media (max-width: 767px) {
.lines-button {
    float: right
}
  }
@media (min-width: 768px) {
.lines-button {
    display: none
}
  }
.lines-button:hover {
    opacity: 1;
  }
.lines-button:active {
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
    transition: none;
  }
.lines-button:focus {
    outline: 0;
  }
/* common to all three-liners */
.lines {
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 15px);
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.lines:before,
  .lines:after {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 2px;
    content: "";
    background: #fff;
    border-radius: 2px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform-origin: 2px center;
            transform-origin: 2px center;
  }
.lines:before {
    top: 8px;
  }
.lines:after {
    top: -8px;
  }
.topbar--small .lines {
  background-color: rgba(0, 0, 0, 1);
}
.topbar--small .lines:before,
  .topbar--small .lines:after {
    background-color: rgba(0, 0, 0, 1);
  }
.lines-button.is-active {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
          transform: scale3d(0.8, 0.8, 0.8);
}
.lines-button.is-active .lines {
    background: transparent;
  }
.lines-button.is-active .lines:before,
    .lines-button.is-active .lines:after {
      top: 0;
      width: 30px;
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
.lines-button.is-active .lines:before {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
              transform: rotate3d(0, 0, 1, 45deg);
    }
.lines-button.is-active .lines:after {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
              transform: rotate3d(0, 0, 1, -45deg);
    }
.logo-wrapper {
  display: inline-block;
  padding-top: 15px;
  padding-bottom: 15px;
  vertical-align: middle;
}
.logo img {
    display: block;
    max-height: 75px !important;
  }
.logo svg use {
    fill: rgba(0, 123, 189, 1);
  }
.topbar--small .logo svg use {
    fill: #fff;
  }
#user-menu {
  margin: 0 !important;
  border: 0 !important;
}
#user-menu [role="menuitem"] {
    white-space: nowrap;
  }
#user > .btn {
  padding-right: 0;
  padding-left: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -25px, 0);
            transform: translate3d(0, -25px, 0);
  }

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

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

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

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

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

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

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

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

    #user-dropdown:before,
    #user-dropdown:after {
      display: none;
    }
  }
.topbar--small #user .dropdown-toggle:after {
  color: #fff;
}
#user {
  display: block;
}
#user .dropdown-toggle {
    padding-right: 0;
    padding-left: 0;
    font-size: calc(16px * 0.85);
    color: inherit;
    background-color: transparent;
    border-color: transparent;
  }
#user .dropdown-toggle,
    #user .dropdown-toggle:active,
    #user .dropdown-toggle:hover {
      background-color: transparent;
      border-color: transparent;
    }
#user .dropdown-toggle:before,
    #user .dropdown-toggle:after {
      color: #fff;
    }
@media (max-width: 767px) {
#user .dropdown-toggle:before,
    #user .dropdown-toggle:after {
        display: none
    }
      }
@media (min-width: 768px) {
#user {
    display: inline-block;
    margin-left: 12px;
    vertical-align: middle
}
  }
#user-password,
#user-profile {
  color: rgba(0, 0, 0, 1);
}
@media (max-width: 767px) {
#user-password {
    min-width: 1px !important;
    padding: calc(12px / 2)
      12px !important;
    margin-top: calc(12px / 2);
    background-color: #fff;
    border-radius: 4px
}
#user-profile {
    min-width: 1px !important;
    padding: calc(12px / 2)
      12px !important;
    margin-top: calc(12px / 2);
    background-color: #fff;
    border-radius: 4px
}
  }
#user-password [role="separator"] {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile [role="separator"] {
    padding: calc(12px / 2)
      12px !important;
  }
#user-password form {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile form {
    padding: calc(12px / 2)
      12px !important;
  }
#user-profile {
  font-size: calc(16px - 2) !important;
}
#user-profile dt {
    padding: 8px 4px !important;
  }
#user-profile dt label {
      margin-bottom: 0 !important;
    }
#user-profile input[type="text"] {
    font-size: calc(16px - 2) !important;
  }
#password-form label {
  font-size: calc(16px - 2) !important;
}
#password-submit {
  float: none !important;
  margin: 0 !important;
  background: auto !important;
}

.breadcrumbs {
  padding: 0;
  margin-bottom: calc(16px * 1.5);
  list-style: none;
  background-color: transparent;
  margin-left: 2pc;
}
.breadcrumbs > li {
    display: inline-block;    
    color: #212121;
    font-size: 13px;
    font-weight: bold;
  }

.breadcrumbs > li + li:before {
      padding: 0 5px;
      color: #ccc;
      content: "›\00a0";
    }
.breadcrumbs > li a {
      color: #3b3d3e;
    }
.breadcrumbs > li:last-child a {
      color: #212121;
    }
.breadcrumbs--search-results {
  padding: 0;
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 0.85);
}
.help-center-name {
  display: inline-block;
  margin: 0 0 0 45px;
  vertical-align: middle;
}
@media (max-width: 767px) {
.help-center-name {
    display: none
}
  }

.bread-category {
  margin-left: 26px;
}


.language-selector .btn--topbar {
    width: 100%;
  }
@media (min-width: 768px) {
.language-selector {
    display: inline-block;
    vertical-align: middle
}
  }
.avatar {
  position: relative;
  display: inline-block;
}
.avatar--agent:before {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    margin-right: -4px;
    margin-bottom: -4px;
    font-family: "Font Awesome 5 Free";
    font-size: calc(16px * 0.85);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 123, 189, 1);
    content: "\f19d";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.user-avatar {
  border-radius: 100%;
}
.user-avatar--default {
  width: 60px;
  height: 60px;
}
#user .user-avatar {
  width: 30px;
  height: 30px;
}
.search {
  position: relative;
}
.search:before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 24px;
    height: 24px;
    content: "";
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2223%22%20height%3D%2224%22%20viewBox%3D%220%200%2023%2024%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28-6%20-2%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2219.889%22%20cy%3D%2211.611%22%20r%3D%228%22%20stroke%3D%22%23BDBDBD%22%20stroke-width%3D%222%22%20transform%3D%22rotate%2845%2019.89%2011.61%29%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23BDBDBD%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.34328327%2C15.6566781%20L11.3432833%2C15.6566781%20L11.3432833%2C25.6606781%20C11.3432833%2C26.2106781%2010.8992833%2C26.6566781%2010.3432833%2C26.6566781%20C9.79128327%2C26.6566781%209.34328327%2C26.2116781%209.34328327%2C25.6606781%20L9.34328327%2C15.6566781%20Z%22%20transform%3D%22rotate%2845%2010.343%2021.157%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/svg%3E)
      no-repeat;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
.searchbox {
  margin-top: calc(16px * 1.5);
}
.searchbox-suggestions ul {
   display:none;
  }
.searchbox h2 {
   display:none;
  }

.searchbox-suggestions li {
    display:none;
  }
input[type="search"]:focus {
  border-color: #f1f1f1;
}
.search-results-column a {
    color: rgba(0, 123, 189, 1);
  }
.search-box {
  position: relative;
}
.search-box #query {
    padding: 10px 12px 10px 35px;
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
  }

.search-box--hero-unit .search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: ;
  	
  }
.search-box--hero-unit .search:before {
    left: 20px;
  }
.search-box--hero-unit #query {
    height: 46px;
    padding: 0 55px;
  	width: 38vh; /*change the box*/
    background-color: #fff;
    border-color: #fff;
    -webkit-transition: border 0.3s ease, background-color 0.3s ease;
    transition: border 0.3s ease, background-color 0.3s ease;
  	
  }
.search-box--hero-unit #query:focus {
      background-color: #fff;
    }
.search-box--hero-unit input[type="submit"] {
  	background: #212121;
    display: inline-block;
    height: 46px;
    padding-right: calc(12px + 4);
    padding-left: calc(12px + 4);
    margin-left: 20px;
    font-size: 16px;
    color: #fff;
    text-transform: capitalize;    
    border-color: transparent;
    border-radius: 4px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
.search-box--hero-unit input[type="submit"]:hover,
    .search-box--hero-unit input[type="submit"]:focus,
    .search-box--hero-unit input[type="submit"]:active {
      color: #e0e0e0;
      background-color: transparent;
      border-color: transparent;
    }
.search-box--hero-unit input[type="submit"]:active {
      background-image: none;
    }
    .search-box--hero-unit input[type="submit"]:hover {
      color: #fff;
      background: #4A4A4A;       
      );
    }
@media (max-width: 991px) {
.search-box--hero-unit input[type="submit"] {
      display: none
  }
    }
@media (min-width: 768px) {
.search-box--hero-unit input[type="submit"] {
      padding-right: 38px;
      padding-left: 38px
  }
    }
.search-box--small {
  margin-bottom: calc(16px * 1.5 * 2);
}
.search-results-page {
  margin-bottom: calc(16px * 1.5 * 2);
}
.search-results-count, .search-results-subheading__title, .meta-group, .search-result-icons {
	display: none;
}

ul.search-results-list {
  	list-style-type: none;
}
.search-result {
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
.search-result__title {
  margin-bottom: calc(16px * 1.5 / 2);
  font-weight: 600;
}
.search-result__description {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 0.85);
}
.search-result__description:empty {
    display: none;
  }
.search-result__description em {
    padding: 0 3px;
    font-style: normal;
    font-weight: 600;
    background-color: #fff3ca;
    border-radius: 3px;
  }
.search-result__meta {
  margin-bottom: calc(16px * 1.5 / 2);
}
.search-result-votes {
  display: inline-block;
  padding: 2px 4px;
  font-size: calc(16px * 0.85);
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
  border-radius: 4px;
}
@media (min-width: 768px) {
.category-page {
    margin: auto;
  
}

#category-page {
    width: 57%
}
  }
.category-description:empty {
    display: none;
  }
.category-tree-item {
  padding-top: calc(16px * 1.5);
  border-top: 1px solid #f1f1f1;
}
.category-tree-item:nth-child(odd) {
    background-color: #fcfcfd;
  }
.category-tree-item:last-child {
    border-bottom: 1px solid #f1f1f1;
  }
@media (min-width: 768px) {
.category-tree-item {
    padding-top: 90px;
    padding-bottom: 76px
}
  }
.category-tree-item__title {
  padding-bottom: calc(16px * 1.5 / 2);
  text-align: center;
}
@media (min-width: 768px) {
.category-tree-item__title {
    margin-bottom: 50px
}
  }
.category-tree-item__sections {
  margin-right: 0;
  margin-left: 0;
}
@media (min-width: 768px) {
      .category-tree-item__sections .section:nth-child(2n + 1) {
        clear: left;
      }
    }
@media (min-width: 768px) {
      .category-tree-item__sections .section:nth-child(2n + 1) {
        clear: none;
      }

      .category-tree-item__sections .section:nth-child(3n + 1) {
        clear: left;
      }
    }
@media (min-width: 768px) {
.category-tree-item__sections {
    margin-right: -15px;
    margin-left: -15px
}
  }
.category-tree-item__title-link {
  color: inherit;
}
.category-list-title {
	display: none;
/*   text-align: left;
	margin-top: 145px;
  color: black;
  font-size: 28px;
  font-weight: 600; */
}

}
@media (min-width: 768px) {
.category-list-title {
    margin-bottom: 55px
}
  }
.category-list {
  margin-right: 0;
  margin-bottom: calc(16px * 1.5);
  margin-left: 0;
  list-style: none;
  justify-content: center;
}
@media (min-width: 768px) {
.category-list {  
    display: -ms-flexbox;
	}
}
.category-list-item {
  position: relative;
  margin-bottom: calc(16px * 1.5);
}
@media (min-width: 768px) {
.category-list-item {
    min-height: 120px
}
  }
.category-list-item__link {
    background: #f9f9fa;   
    display: flex;
    align-items: center;    
    margin-top: 10px;
    font-weight: 400;
    color: rgba(0, 123, 189, 1);    
    border-radius: 8px;  
    flex-direction: column;
  	padding: 10px;
  	width: 89%;
}


.category-list-item__link:active,
  .category-list-item__link:focus,
  .category-list-item__link:hover {
    text-decoration: blue;
    
  }
.category-list-item__link:active .category-list-item__title, .category-list-item__link:focus .category-list-item__title, .category-list-item__link:hover .category-list-item__title {
      color: #0077cc;
    }
.category-list-item__link:active .meta, .category-list-item__link:focus .meta, .category-list-item__link:hover {
      color: blue;
  		transition: 0.5s;
    }
@media (min-width: 768px) {
.category-list-item__link {
    height: 100%
}
  }
.category-list-item__title {
  margin-bottom: 8px;
  font-weight: 600;
}
.section-page {
  margin-bottom: calc(16px * 1.5 * 2);
}
.section {
  
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section__title {
	display: flex;
  flex-direction: column;
  margin: 10px;
}

.section__title:hover {
  background: #7f7fd91c;
  transition: 0.3s;
}
.section__title-link {
  color: #212121;
  font-size: 17px;
  font-weight: bold;  
  margin-top: 20px;
  text-align: center;
}
.section-header {
  position: relative;
}

.article-list-item:hover {
   background: #ff797926;
}

.section-subscribe .dropdown-toggle {
    margin-top: calc(16px * 1.5);
  }
.section-subscribe .dropdown-toggle:after {
      display: none;
    }
.section-subscribe .dropdown-menu {
    right: 0;
    left: initial;
  }
.section-title {
  text-align: center;
}
@media (min-width: 768px) {
      .section-tree .section:nth-child(2n + 1) {
        clear: left;
      }
    }
@media (min-width: 992px) {
      .section-tree .section:nth-child(2n + 1) {
        clear: none;
      }

      .section-tree .section:nth-child(3n + 1) {
        clear: left;
      }
    }
.section-list {
  padding-left: 0;
  margin-right: 0;
  margin-bottom: calc(16px * 1.5);
  margin-left: 0;
  list-style: none;
}
@media (min-width: 768px) {
.section-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: calc(15px * -2);
    margin-bottom: 76px;
    margin-left: calc(15px * -2);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap
}
  }
.section-list-item {
  position: relative;
  margin-bottom: calc(16px * 1.5);
}
@media (min-width: 768px) {
.section-list-item {
    min-height: 120px
}
  }
.section-list-item__link {
  display: block;
  padding: 22px 20px;
  font-weight: 400;
  color: rgba(0, 123, 189, 1);
  text-align: left;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
          box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-list-item__link:active,
  .section-list-item__link:focus,
  .section-list-item__link:hover {
    text-decoration: none;
    background-color: rgba(0, 123, 189, 1);
  }
.section-list-item__link:active .section-list-item__title, .section-list-item__link:focus .section-list-item__title, .section-list-item__link:hover .section-list-item__title {
      color: #fff;
    }
.section-list-item__link:active .meta, .section-list-item__link:focus .meta, .section-list-item__link:hover .meta {
      color: #fff;
    }
@media (min-width: 768px) {
.section-list-item__link {
    height: 100%
}
  }
.section-list-item__title {
  margin-bottom: 8px;
  font-weight: 600;
}
.article-page {
  margin-bottom: calc(16px * 1.5 * 2);
}

.article__title {
  font-size: calc(16px * 1.5);
  font-weight: 600;
  margin: 0;
}

@media (min-width: 1200px) {
.article__title {
    float: left;
    width: 100%;
    font-size: calc(16px * 1.75)
}
  }
.article-header:before,
  .article-header:after {
    display: table;
    content: "";
  }
.article-header:after {
    clear: both;
  }
.article-header__button {
  margin-bottom: calc(16px * 1.5);
}
@media (min-width: 1200px) {
.article-header__button {
    float: right;
    width: 20%;
    text-align: right;
    vertical-align: top
}
  }
.article-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(16px * 1.5);
}
.article-meta__col {
  display: table-cell;
  vertical-align: top;
}
.article-meta__col--main {
  width: 100%;
  padding-right: 12px;
}
.article-subscribe,
.article-unsubscribe {
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
  border-color: rgba(0, 123, 189, 1);
}
.article-subscribe:hover,
  .article-subscribe:focus,
  .article-subscribe:active,
  .article-unsubscribe:hover,
  .article-unsubscribe:focus,
  .article-unsubscribe:active {
    color: #e0e0e0;
    background-color: #005a8a;
    border-color: #005380;
  }
.article-subscribe:active, .article-unsubscribe:active {
    background-image: none;
  }
.article__body {
  margin-bottom: calc(16px * 1.5);
}
.article__body h2 {
    font-size: calc(16px * 1.75);
    font-weight: 400;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-x-large {
    font-size: calc(16px * 1.75);
    font-weight: 400;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-large {
    font-size: calc(16px * 1.5);
    font-weight: 600;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-medium {
    font-size: calc(16px * 1.25);
    font-weight: 600;
    line-height: 1.2;
  }
.article__body .wysiwyg-font-size-small {
    font-size: calc(16px * 0.85);
  }
.article__body ul,
  .article__body ol {
    padding-left: 20px;
  }
.article__body ul ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.article__body ul ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.article__body ol ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.article__body ol ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.article__body ul li {
      margin-bottom: calc(16px * 1.5 / 2);
    }
.article__body ol li {
      margin-bottom: calc(16px * 1.5 / 2);
    }


.article-vote {
	display: none
}
.article-vote-controls__item {
  color: rgba(0, 0, 0, 1);
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}
.article-vote-controls__item {
  color: rgba(0, 0, 0, 1);
  background-color: #f1f1f1;
}
.article-vote-controls__item:hover {
  color: #000;
  background-color: #b9b9b9;
}
.article-vote-controls__item:focus {
  color: #000;
  background-color: #b9b9b9;
}
.article-vote-controls__item:active {
  color: #000;
  background-color: #b9b9b9;
}
.article-vote-controls__item--voted,
.article-vote-controls__item--voted:active,
.article-vote-controls__item--voted:focus {
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
}
@media (min-width: 768px) {
  .article-vote-question {
    float: left;
    margin-right: 12px;
  }
}
.article-vote-controls {
  white-space: nowrap;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .article-vote-question {
    display: block;
    margin-bottom: calc(16px * 1.5 / 2);
  }

  .article-vote-controls {
    display: block;
    margin-bottom: calc(16px * 1.5 / 2);
  }
}
.article-vote-count {
  display: block;
  font-size: calc((16px * 0.75) - 2);
  color: #979797;
}
.article__share {
  margin-bottom: calc(16px * 1.5);
}
.article__share ul {
    margin-top: 0;
  }
.article-footer {
  margin-bottom: calc(16px * 1.5);
}
.article__attachments {
  margin-bottom: calc(16px * 1.5);
}
.article-more-questions {
  margin-bottom: calc(16px * 1.5);
  clear: both;
}
.article-more-questions:empty {
    display: none;
  }
.article-more-questions a {
    white-space: nowrap;
  }
@media (max-width: 767px) {
.article-sidebar {
    padding-top: calc(16px * 1.5);
    border-top: 1px solid #f1f1f1
}
  }

.article-container__column {  
  display: flex;
}

.article-container__sidenav,
.article-container__toc {
  display: none;
}
.sidenav-enabled .article-container__sidenav,
.toc-enabled .article-container__toc {
  display: block;
}
.sidenav-enabled .article-container__sidenav {
  padding-bottom: 24px;
}

.img-logo-dev {
  width: 85px;
  margin: 10px;
}
/* -------inicio capacidades---- */
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  	margin-top: 30px
}

#square-button {
  background-color: #b6b6b62e;
}
.container-capacidades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.container-capacidades-dev {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.img-logo-mais {
  width: 25%;
}

.square-button {
  	padding: 10px;
    width: 200px;
    height: 150px;
  	font-size: 14px;
   	text-align: center;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.square-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.text {
    text-align: center;
    font-size: 14px;
    color: #333;
}


/* fim capacidades----------------- */
/* @media (min-width: 992px) {
  .article-container__article {
    width: calc(100% / 12 * 8);
  } */

  .article-container__sidebar {
		display: none
  }

  .toc-enabled .article-container__sidebar,
  .sidenav-enabled .article-container__sidebar {
    width: calc(100% / 12 * 8);
  }

  .toc-enabled .article-container__toc {
    width: calc(100% / 12 * 4);
  }

  .sidenav-enabled .article-container__sidenav {
    width: calc(100% / 12 * 4);
  }

  .sidenav-enabled .article-container__sidebar {
    margin-left: calc(100% / 12 * 4);
  }

  .sidenav-enabled.toc-enabled .article-container__sidenav,
  .sidenav-enabled.toc-enabled .article-container__toc {
    width: calc(100% / 12 * 3);
  }

  .sidenav-enabled.toc-enabled .article-container__article {
    width: calc(100% / 12 * 6);
  }

  .sidenav-enabled.toc-enabled .article-container__sidebar {
    margin-left: calc(100% / 12 * 3);
  }

  .article-sidebar {
    margin-top: 6pc;
  }

  .article-sidebar section {
    width: 100%;
  }

  .sidenav-enabled .article-sidebar section,
  .toc-enabled .article-sidebar section {
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .sidenav-enabled.toc-enabled .article-container__article {
    width: calc(100% / 12 * 7);
  }

  .sidenav-enabled.toc-enabled .article-container__toc {
    width: calc(100% / 12 * 2);
  }
}
.article-list {
  padding-left: 0;  
  margin: 0px 40px;
  width: 80%;
  
}

.article-list-item {
  position: relative;
  margin-bottom: calc(16px * 1.5 / 2);
  page-break-inside: avoid;
  background: #f9f9fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-list-item__link {
  color: #123972;
  margin-left: 23px;
  margin-right: 23px;
  display: flex;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  height: 75px;
  align-items: center;
  text-align: center;
}

.article-list-item--is-promoted span {
		font-size: 10px;
    color: #06053a;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.article-list-item--is-promoted:before {
  display: none;
}
@media (min-width: 768px) {
.article-list--section {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: calc(15px * 3);
       -moz-column-gap: calc(15px * 3);
            column-gap: calc(15px * 3)
}
  }
/* Comment List */
.comments__callout {
  font-size: calc(16px * 0.85);
  color: #979797;
}
.comments__callout:empty {
    display: none;
  }
.comments__list {
  padding-left: 0;
  list-style: none;
}
.comment-list-header {
  padding-bottom: calc(16px * 1.5 / 2);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
.comment-list-heading {
  margin-bottom: 0;
  font-size: calc(16px * 1.1);
  font-weight: 600;
}
.comment-sorter {
  padding-bottom: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
@media (min-width: 768px) {
.comment-sorter {
    display: table;
    width: 100%
}
  }
@media (min-width: 768px) {
.comment-sorter__col {
    display: table-cell;
    vertical-align: middle
}
  }
@media (max-width: 767px) {
.comment-sorter__col--main {
    margin-bottom: calc(16px * 1.5 / 2)
}
  }
@media (min-width: 768px) {
.comment-sorter__col--main {
    padding-right: 12px
}
  }
@media (min-width: 768px) {
.comment-sorter__col--filters {
    text-align: right
}
  }
.comment-sorter__item.is-active {
    font-weight: 600;
  }
.comment-sorter__item + .comment-sorter__item:before {
    margin: 0 6px;
    font-size: 10px;
    content: "\2022";
  }
/* Comment */
.comment {
  padding-bottom: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
.comment__inner {
  position: relative;
  padding-right: 72px;
}
.comments__content {
  position: relative;
  padding-right: 12px;
}
.comment__header {
  position: relative;
  margin-bottom: calc(16px * 1.5);
}
.comment__voting-and-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  text-align: center;
}
.comment__voting-and-actions .dropdown-toggle {
    font-size: 0;
  }
.comment__voting-and-actions .dropdown-toggle:after {
      display: inline-block;
      margin-left: 0;
      font-family: "Font Awesome 5 Free";
      font-style: normal;
      font-weight: 900;
      line-height: 1;
      content: "\f013";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
.comment__official-heading {
  position: absolute;
  top: 0;
  right: 36px;
  width: auto;
  padding: 1px calc(12px / 2);
  font-size: calc(16px * 0.85);
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
  border-radius: 0 0 4px 4px;
}
.comment--official .comment__inner {
    position: relative;
    padding: calc(16px * 1.5)
      calc(12px * 2);
    background-color: desaturate(lighten(rgba(0, 123, 189, 1), 55%), 30%);
    border: 1px solid rgba(0, 123, 189, 1);
    border-radius: 4px;
  }
/* Comment form */
.comment-form {
  position: relative;
  margin-bottom: calc(16px * 1.5);
}
@media (min-width: 768px) {
.comment-form {
      width: 97%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-left: 2pc;
}
  }
.comment-form__avatar {
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 767px) {
.comment-form__avatar {
    display: none
}
  }
.comment__body {
  margin-bottom: calc(16px * 1.5);
}
.comment__body ul {
    list-style: disc;
  }
.comment__body ul,
  .comment__body ol {
    padding-left: 20px;
  }
.comment__body ul ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.comment__body ul ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.comment__body ol ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.comment__body ol ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.comment__body ul li {
      margin-bottom: calc(16px * 1.5 / 2);
    }
.comment__body ol li {
      margin-bottom: calc(16px * 1.5 / 2);
    }
.comment-form__attachments {
  margin-bottom: calc(16px * 1.5);
}
.comment-form__mark-as-solved {
  position: relative;
}
.comment-form__comment-ccs ul {
    margin-bottom: 0;
  }
.comment-form__body {
  margin-bottom: calc(16px * 1.5);
}
.share {
  padding-left: 0;
  white-space: nowrap;
  list-style: none;
}
.share li {
  position: relative;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: top;
}
.share a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
  border-radius: 4px;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
.share a:before {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: "Font Awesome 5 Brands";
    font-weight: 300;
    text-align: center;
  }
.share-facebook {
  color: #3d5b95;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}
.share-facebook:hover {
    color: #2b406a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-facebook:focus {
    color: #2b406a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-facebook:active {
    color: #2b406a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-facebook:active {
    background-image: none;
  }
.share-facebook:before {
    content: "\f09a";
  }
.share-twitter {
  color: #24aadd;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}
.share-twitter:hover {
    color: #1a82a9;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-twitter:focus {
    color: #1a82a9;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-twitter:active {
    color: #1a82a9;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-twitter:active {
    background-image: none;
  }
.share-twitter:before {
    content: "\f099";
  }
.share-linkedin {
  color: #0976b4;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}
.share-linkedin:hover {
    color: #06507a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-linkedin:focus {
    color: #06507a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-linkedin:active {
    color: #06507a;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-linkedin:active {
    background-image: none;
  }
.share-linkedin:before {
    content: "\f0e1";
  }
.share-googleplus {
  color: #d23e30;
  background-color: #f1f1f1;
  border-color: #f1f1f1;
}
.share-googleplus:hover {
    color: #a22e23;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-googleplus:focus {
    color: #a22e23;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-googleplus:active {
    color: #a22e23;
    background-color: #d8d8d8;
    border-color: #d2d2d2;
  }
.share-googleplus:active {
    background-image: none;
  }
.share-googleplus:before {
    content: "\f0d5";
  }
.my-activities-header {
  margin-bottom: calc(16px * 1.5);
}
.my-activities-items {
  margin-bottom: calc(16px * 1.5 * 2);
}
@media (min-width: 768px) {
.my-activities-items {
    display: table;
    width: 100%
}
  }
.my-activities-items__head {
  display: none;
  color: #979797;
}
@media (min-width: 768px) {
.my-activities-items__head {
    display: table-header-group;
    font-size: calc(16px * 0.85);
    font-weight: 600;
    text-transform: uppercase
}
  }
@media (min-width: 768px) {
.my-activities-items__body {
    display: table-row-group
}
  }
@media (min-width: 768px) {
.my-activities-items__row {
    display: table-row
}
  }
@media (min-width: 768px) {
.my-activities-items__col {
    display: table-cell;
    padding-top: calc(16px * 1.5 / 2);
    padding-bottom: calc(16px * 1.5 / 2);
    border-bottom: 1px solid #f1f1f1
}

    .my-activities-items__col + .my-activities-items__col {
      padding-left: 12px;
    }
  }
@media (max-width: 767px) {
.my-activities-items__request-id {
    display: inline
}
  }
@media (min-width: 768px) {
.my-activities-items__request-id {
    display: none
}
  }
.my-activities-menu ul {
    padding-left: 0;
    list-style: none;
  }
.my-activities-menu__items {
  margin-bottom: 0;
}
.my-activities-menu__item {
  margin-bottom: 0;
}
.my-activities-menu__item a {
    display: block;
  }
@media (min-width: 768px) {
.my-activities-menu__item {
    float: left
}
  }
@media (min-width: 768px) {
  .my-activities-menu__item + .my-activities-menu__item {
    margin-left: 12px;
  }
}
.my-activities-menu--main {
  padding-bottom: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
.my-activities-menu--main .my-activities-menu__item {
    padding: 6px 12px;
    background-color: #f1f1f1;
    border-radius: 4px;
  }
@media (max-width: 767px) {
.my-activities-menu--main .my-activities-menu__item {
      margin-bottom: calc(16px * 1.5 / 3)
  }
    }
.my-activities-menu--main .my-activities-menu__item.is-active {
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
    }
.my-activities-menu--sub {
  margin-bottom: calc(16px * 1.5);
}
.my-activities-menu--sub .my-activities-menu__item.is-active {
      font-weight: 600;
    }
.my-activities-menu--sub .my-activities-menu__item a {
      display: inline-block;
    }
@media (min-width: 768px) {
    .my-activities-menu--sub .my-activities-menu__item + .my-activities-menu__item:before {
      margin-right: calc(12px / 2);
      font-size: 10px;
      content: "\2022";
    }
  }
@media (max-width: 767px) {
.my-activities-item {
    padding: calc(16px * 1.5 / 2)
      12px;
    margin-bottom: calc(16px * 1.5);
    border: 1px solid #f1f1f1;
    border-radius: 4px
}
  }
.my-activities-item__meta {
  font-size: 14px;
  color: #979797;
}
@media (max-width: 767px) {
.my-activities-item__meta {
    display: inline-block;
    margin-right: calc(12px / 2)
}

    .my-activities-item__meta + .my-activities-item__meta:before {
      margin-right: calc(12px / 2);
      content: "\2022";
    }
  }
.my-activities-item__title {
  font-weight: 400;
}
@media (max-width: 767px) {
.my-activities-item__title {
    font-size: calc(16px * 1.25)
}
  }
@media (max-width: 767px) {
.my-activities-item__icon {
    display: inline-block
}
  }
@media (min-width: 768px) {
.my-activities-item__icon {
    display: none
}
  }
.request-table-toolbar {
  padding-top: 12px;
  padding-bottom: calc(12px / 2);
  margin-bottom: calc(16px * 1.5);
  background-color: #f9f9f9;
  border-radius: 4px;
}
@media (min-width: 768px) {
.request-table-toolbar {
    padding-top: calc(12px / 2);
    padding-bottom: 12px
}
  }
.request-table-toolbar label {
    font-size: calc(16px * 0.85);
    text-transform: uppercase;
  }
@media (min-width: 768px) {
.request-table-filters {
    display: table;
    width: 70%
}
  }
.request-table-filters__item {
  padding-right: 12px;
  padding-left: 12px;
}
@media (max-width: 767px) {
.request-table-filters__item {
    margin-bottom: calc(16px * 1.5 / 2)
}
  }
@media (min-width: 768px) {
.request-table-filters__item {
    display: table-cell;
    vertical-align: bottom
}
  }
.request-table-organization {
  display: table;
  width: 100%;
}
.request-table-organization__col {
  display: table-cell;
  vertical-align: middle;
}
.request-table-organization__col--main {
  width: 100%;
}
.request-table-organization__col--button {
  padding-left: calc(12px / 2);
}
.request-table-organization__col--button [role="button"] {
    height: calc(16px * 1.5 + 14);
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(16px * 1.5 + 14);
  }
.requests-sort-symbol {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}
.requests-sort-symbol:after {
    display: inline-block;
    margin-bottom: 2px;
    margin-left: 5px;
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    font-weight: 900;
    color: #979797;
    content: "\f0d7";
  }
.requests-link {
  color: #979797;
  white-space: nowrap;
}
.requests-link[href*="asc"] .requests-sort-symbol:after {
  content: "\f0d8";
}
.request-page {
  margin-bottom: calc(16px * 1.5 * 2);
}
.request {
  position: relative;
}
.request-id {
  margin-bottom: calc(16px * 1.5 / 2);
  font-weight: 600;
}
.request-subject {
  font-size: calc(16px * 1.5);
}
@media (min-width: 992px) {
.request-subject {
    font-size: calc(16px * 1.75);
    font-weight: 300
}
  }
.request-follow-up:empty {
  display: none;
}

li {
  list-style-type: none;
}

path {
  display: none;
}

.request-container {
  display: flex;
}

@media (max-width: 800px) {
    .request-container {
        display: flex;
        flex-direction: column;
    }
}

.request-main {
	margin: 0px 30px 0px 0px;
  width: 100%;
}

.zd-comment {
  background: #fb00ff0f;
  padding: 20px;
  border-radius: 10px;
}
.request-sidebar {
  padding: calc(16px * 1.5) 12px 0;
  margin-bottom: calc(16px * 1.5);
  font-size: 14px;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  height: 100%;
  background: #00000005;
}

.request-sidebar dd {
    margin-bottom: calc(16px * 1.5 / 2);
  }

.collapsible-sidebar-toggle, .comment-show-container  {
  display: none;
}

.comment-fields  {
  margin-top: 10px;
}
.request-status {
  display: inline-block;
  padding: 1px calc(12px / 2);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  border-radius: 4px;
}
.request-status--solved,
.request-status--closed {
  background-color: rgba(80, 184, 72, 1);
}
.request-status--new,
.request-status--open {
  background-color: rgba(239, 59, 36, 1);
}
.request-status--answered {
  background-color: rgba(243, 112, 33, 1);
}

.request-details {
    width: 300px;
    height: 200px;
}

.comment-meta {
  margin: 30px 5px 10px;
  color: #28288d;
  font-weight: bold;
}

.icon-agent {
  display: none;
}
.new-request-page {
  margin-bottom: calc(16px * 1.5 * 2);
}
.new-request-title {
  font-size: calc(16px * 1.5);
}
@media (min-width: 768px) {
.new-request-title {
    font-size: calc(16px * 1.75)
}
  }
@media (min-width: 992px) {
.new-request-title {
    font-size: calc(16px * 2.5)
}
  }
.new-request-form {
  margin-bottom: calc(16px * 1.5);
}
.upload-dropzone {
  padding: calc(16px * 1.5)
    calc(12px + 4px);
  border-color: #bdc2c5;
  border-radius: 4px;
}
.upload-dropzone {
    font-size: calc(16px * 0.85);
  }
.upload-dropzone a {
    font-size: calc(16px * 0.85);
  }
.intro-title {
  margin-bottom: calc(16px * 1.5);
  font-size: calc(16px * 1.5);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}
@media (min-width: 768px) {
.intro-title {
    font-size: calc(16px * 1.75)
}
  }
@media (min-width: 992px) {
.intro-title {
    margin-bottom: calc(16px * 1.5 * 1.4);
    font-size: calc(16px * 2.5)
}
  }
.custom-blocks {
  position: relative;
  z-index: 3;
/*   margin-top: calc(16px * 1.5 * -10); */
  margin-bottom: calc(16px * 1.5);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 768px) {
.custom-blocks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: calc(16px * 1.5 * 3);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap
}
  }
.custom-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: none;
  margin-bottom: calc(16px * 1.5);
  text-align: center;
}
.custom-block__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 24px 16px 30px;
  background-color: #fff;
  border-radius: calc(4px * 2);
  -webkit-box-shadow: 0 0 15px 5px rgba(62, 60, 98, 0.08);
          box-shadow: 0 0 15px 5px rgba(62, 60, 98, 0.08);
  -webkit-transition: all 220ms;
  transition: all 220ms;
}
@media (min-width: 768px) {
    .custom-block__link:active,
    .custom-block__link:focus,
    .custom-block__link:hover {
      -webkit-transform: scale(1.045);
              transform: scale(1.045);
    }
  }
.custom-block__icon {
  display: inline-block;
}
.custom-block__icon svg {
    width: 98px;
    height: 98px;
  }
@media (min-width: 480px) {
.custom-block__icon {
    margin-bottom: calc(16px * 1.5)
}
  }
.custom-block__title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}
.custom-block__description {
  margin-bottom: 0;
  font-size: 14px;
  color: #979797;
}
.icon-color-stroke-primary {
  stroke: rgba(0, 123, 189, 1);
}
.icon-color-stroke-secondary {
  stroke: rgba(0, 123, 189, 1);
}
.icon-color-fill-primary {
  fill: rgba(0, 123, 189, 1);
}
.icon-color-fill-secondary {
  fill: rgba(0, 123, 189, 1);
}
.icon-color-fill {
  fill: #f8f8f8;
}
.dropdown-toggle:after {
  display: inline-block;
  margin-left: 5px;
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.5;
  color: inherit;
  content: "\f107";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dropdown-menu {
  min-width: 170px !important;
  overflow: hidden;
  font-size: 14px;
}
.dropdown-menu [role="menuitem"] {
    position: relative;
    padding: calc(16px * 1.5 / 2) 26px
      calc(16px * 1.5 / 2) 12px;
    white-space: normal;
  }
.dropdown-menu [role="menuitem"][aria-selected="true"]:after {
    position: absolute;
    top: 16px;
    right: 12px;
    display: inline-block;
    margin-left: 10px !important;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1.5;
    content: "\f00c";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.error-page {
  padding: 10% 0;
  text-align: center;
}
.error-page__title {
  text-transform: capitalize;
}
.footer-submit-ticket {
  position: relative;
  padding: calc(16px * 1.5 * 2)
    calc(12px + 4px);
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
.footer-submit-ticket__title {
  font-size: calc(16px * 1.75);
}
@media (min-width: 768px) {
.footer-submit-ticket__title {
    font-size: calc(16px * 2.5)
}
  }
.footer-submit-ticket__subtitle {
  font-size: calc(16px * 1.5);
  color: #fff;
  opacity: 0.9;
}
.footer-submit-ticket__btn {
  font-size: 20px;
  color: rgba(0, 123, 189, 1);
  background: rgb(255, 255, 255);
  );
}
.footer-submit-ticket__btn:hover {
    background: #004971;
  }
.note {
  position: relative;
  padding-left: 12px;
  margin: calc(16px * 1.5) 0;
  color: #333;
  border-left: calc(1px * 4) solid transparent;
}
.note p:last-child {
    margin-bottom: 0;
  }
.note-title {
  margin-bottom: calc(16px * 1.5 / 2);
  font-weight: 600;
}
.note-default {
  border-color: #818a91;
}
.note--default {
  border-color: #818a91;
}
.note-default .note-title {
    color: #818a91;
  }
.note--default .note-title {
    color: #818a91;
  }
.note-info,
.note--info {
  border-color: rgba(0, 165, 255, 1);
}
.note-info .note-title, .note--info .note-title {
    color: rgba(0, 165, 255, 1);
  }
.note-warning,
.note--warning {
  border-color: rgba(243, 112, 33, 1);
}
.note-warning .note-title, .note--warning .note-title {
    color: rgba(243, 112, 33, 1);
  }
.note-success,
.note--success {
  border-color: rgba(80, 184, 72, 1);
}
.note-success .note-title, .note--success .note-title {
    color: rgba(80, 184, 72, 1);
  }
.note-danger,
.note--danger {
  border-color: rgba(239, 59, 36, 1);
}
.note-danger .note-title, .note--danger .note-title {
    color: rgba(239, 59, 36, 1);
  }
.footer {
  padding-top: 150px;
  margin-top: 60px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
}
.footer__wrapper {
  position: relative;
  background: rgba(0, 123, 189, 1);
}
.footer__inner {
  width: 100%;
  padding-bottom: 20px;
  margin: 0 auto;
}
@media (min-width: 768px) {
.footer__inner {
    display: table
}
  }
.footer__col {
  position: relative;
}
@media (min-width: 768px) {
.footer__col {
    display: table-cell;
    vertical-align: top
}
  }
@media (min-width: 768px) {
.footer__col--social-links {
    text-align: right;
    vertical-align: middle
}
  }
.footer-social-link {
  width: 30px;
  height: 30px;
  font-size: calc(16px + 2);
  color: #fff;
  vertical-align: middle;
}
.footer-social-link + .footer-social-link {
    margin-left: 5px;
  }
.footer-social-link:hover {
    color: rgba(0, 123, 189, 1);
  }
.copyright a {
  color: #fff;
}
.pagination ul {
    display: inline-block;
    padding-left: 0;
    margin: 0 0 calc(16px * 1.5 / 2);
  }
.pagination ul > li {
      display: inline-block;
      margin-right: 6px;
      margin-bottom: calc(16px * 1.5 / 2);
    }
.pagination ul > li > a {
        position: relative;
        display: block;
        padding: 6px calc(12px + 4px);
        line-height: 1.5;
        color: #a6a6a7;
        text-decoration: none;
        background-color: #f6f6f6;
        border-radius: 4px;
      }
.pagination ul > li > span {
        position: relative;
        display: block;
        padding: 6px calc(12px + 4px);
        line-height: 1.5;
        color: #a6a6a7;
        text-decoration: none;
        background-color: #f6f6f6;
        border-radius: 4px;
      }
.pagination ul > li > a:hover {
        color: #004971;
        background-color: #f1f1f1;
        border-color: #ddd;
      }
.pagination ul > li > a:focus {
        color: #004971;
        background-color: #f1f1f1;
        border-color: #ddd;
      }
.pagination ul > li > span:hover {
        color: #004971;
        background-color: #f1f1f1;
        border-color: #ddd;
      }
.pagination ul > li > span:focus {
        color: #004971;
        background-color: #f1f1f1;
        border-color: #ddd;
      }
.pagination ul > .pagination-current > span,
      .pagination ul > .pagination-current > span:hover,
      .pagination ul > .pagination-current > span:focus {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: rgba(0, 123, 189, 1);
        border-color: rgba(0, 123, 189, 1);
      }
.satisfaction-box {
  padding: calc(16px * 1.5) 15px;
  margin: 0 0 20px;
  margin-top: 0;
  border-color: #f1f1f1;
  border-radius: 4px;
}
.satisfaction-box h4:last-child {
      margin-bottom: 0;
    }
.satisfaction-box input[type="radio"] ~ label {
  display: inline-block;
  padding: 6px
    calc(12px + 12px / 2);
  margin-right: 10px;
  margin-bottom: 0;
  font-size: calc(16px - 5);
  font-weight: 700;
  line-height: calc(16px * 1.5);
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}
.satisfaction-box input[type="radio"] ~ label:focus, .satisfaction-box input[type="radio"] ~ label:active:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
.satisfaction-box input[type="radio"] ~ label:hover,
  .satisfaction-box input[type="radio"] ~ label:focus {
    color: #fff;
    text-decoration: none;
  }
.satisfaction-box input[type="radio"] ~ label:active {
    outline: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"] {
  color: #fff;
  background-color: rgba(80, 184, 72, 1);
  border-color: rgba(80, 184, 72, 1);
}
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    color: #e0e0e0;
    background-color: #409439;
    border-color: #3d8c36;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_good"]:active {
    background-image: none;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"] {
  color: #fff;
  background-color: rgba(239, 59, 36, 1);
  border-color: #e92911;
}
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:hover,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:focus,
  .satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    color: #e0e0e0;
    background-color: #d1250f;
    border-color: #af1f0d;
  }
.satisfaction-box
  input[type="radio"]
  ~ label[for="satisfaction_rating_score_bad"]:active {
    background-image: none;
  }
.satisfaction-box input[type="radio"][checked="checked"][value="good"] + label {
  color: #fff !important;
  background-color: #3d8c36 !important;
  border-color: darken($brand-success, 12%) !important;
}
.satisfaction-box input[type="radio"][checked="checked"][value="bad"] + label {
  color: #fff !important;
  background-color: #c7230f !important;
  border-color: #af1f0d !important;
}
.satisfaction-box label.disabled {
  margin-bottom: calc(16px * 1.5) !important;
}
.satisfaction-box label.disabled[for="satisfaction_rating_score_good"] {
  color: rgba(80, 184, 72, 1) !important;
}
.satisfaction-box label.disabled[for="satisfaction_rating_score_bad"] {
  color: rgba(239, 59, 36, 1) !important;
}
.satisfaction-comment {
  margin-top: 15px;
}
.satisfaction-box .satisfaction-submit {
  margin-left: 10px !important;
  font-size: calc(16px - 5) !important;
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
  border-color: #006aa4;
}
.satisfaction-box .satisfaction-submit:hover,
  .satisfaction-box .satisfaction-submit:focus,
  .satisfaction-box .satisfaction-submit:active {
    color: #e0e0e0;
    background-color: #005a8a;
    border-color: #004366;
  }
.satisfaction-box .satisfaction-submit:active {
    background-image: none;
  }
.satisfaction-reason {
  padding-top: calc(16px * 1.5);
}
.satisfaction-box .satisfaction-cancel {
  font-size: calc(16px - 5) !important;
  line-height: 1.5 !important;
}
.topbar {
  position: relative;
  padding-bottom: 65px;
  width: 100%;
}
.topbar__container-inner {
  position: relative;
  z-index: 4;
}
.topbar__inner {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
.topbar__inner {
    display: table
}
  }
.topbar__col {
  position: relative;
  padding: calc(16px * 1.5 / 2) 0;
}
@media (min-width: 768px) {
.topbar__col {
    display: table-cell;
    padding: 20px 0;
    vertical-align: middle
}
  }
@media (min-width: 768px) {
.topbar__controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
}
  }
@media (max-width: 767px) {
.topbar__collapse {
    display: none;
    padding-top: calc(16px * 1.5 / 2);
    padding-bottom: calc(16px * 1.5)
}
  }
@media (min-width: 768px) {
.topbar__collapse {
    display: block !important
}
  }
@media (max-width: 767px) {
.topbar__menu {
    padding: 0
}
  }
.topbar__search {
  height: 40px;
}
.topbar__search input[type="submit"] {
    display: none;
  }
@media (max-width: 767px) {
.topbar__search {
    display: block !important;
    margin-bottom: calc(16px * 1.5 / 2)
}
  }
@media (min-width: 768px) {
.topbar__search {
    display: inline-block;
    height: auto;
    margin-right: calc(12px * 2)
}
  }
.topbar__search-bar {
  display: block;
  width: 100%;
}
@media (max-width: 767px) {
.topbar__search-bar {
    display: block !important
}
  }
@media (min-width: 768px) {
.topbar__search-bar {
    width: auto;
    -webkit-animation-duration: 0.1s;
            animation-duration: 0.1s
}

    .topbar__search-bar:before {
      display: none;
    }
  }
.topbar__btn-search {
  padding-right: 0;
  cursor: pointer;
  background-color: transparent;
}
.topbar__btn-search:hover,
  .topbar__btn-search:focus,
  .topbar__btn-search:active {
    background-color: transparent;
    border-color: transparent;
  }
.topbar__btn-search svg circle {
      stroke: #fff;
    }
.topbar__btn-search svg path {
      fill: #fff;
    }
@media (max-width: 767px) {
.topbar__btn-search {
    display: none !important
}
  }
@media (min-width: 768px) {
.topbar__link {
    margin-right: calc(12px * 2)
}
  }
.topbar--small {
  color: #fff;
  background-color: rgba(0, 123, 189, 1);
}
.topbar--small .topbar__link {
  color: #fff;
}
.topbar--small .topbar__link:hover,
  .topbar--small .topbar__link:active,
  .topbar--small .topbar__link:focus {
    color: #e0e0e0;
  }
.topbar--small .login {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.topbar--small .login:hover,
  .topbar--small .login:focus,
  .topbar--small .login:active {
    color: #e0e0e0;
    background-color: transparent;
    border-color: #e0e0e0;
  }
.topbar--small .login:active {
    background-image: none;
  }
.topbar--small .topbar__btn-search svg circle {
      stroke: #fff;
    }
.topbar--small .topbar__btn-search svg path {
      fill: #fff;
    }
.topbar--large {
  padding-bottom: 210px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(
    at 25% 40%,
    #4c4c66 0,
    #414157 50%,
    #363649 110%
  );
}
@media (min-width: 768px) {
.topbar--large {
    margin-bottom: calc(16px * 1.5 * 2)
}
  }
.topbar--large.topbar_image {
    position: relative;
    z-index: 2;
    background: url(/hc/theming_assets/01J155B8PS485675XRHNFPYQFQ) no-repeat center;
    background-size: cover;
  }
.topbar--large.topbar_image:before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      width: 100%;
      height: 100%;
      content: "";
      background: rgba(43, 43, 58, 1);
      opacity: 0.1;
    }
.topbar--large .login {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.topbar--large .login:hover,
  .topbar--large .login:focus,
  .topbar--large .login:active {
    color: #e0e0e0;
    background-color: transparent;
    border-color: #e0e0e0;
  }
.topbar--large .login:active {
    background-image: none;
  }
.topbar--large .topbar__link {
  color: #fff;
}
.topbar--large .topbar__link:hover,
  .topbar--large .topbar__link:active,
  .topbar--large .topbar__link:focus {
    color: #e0e0e0;
  }
.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: -50px;
  z-index: 3;
  width: 50px;
  height: 50px;
  font-size: 32px !important;
  line-height: 45px !important;
  text-align: center;
  border: 1px solid rgba(0, 123, 189, 1);
  border-radius: 4px;
  -webkit-transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.scroll-to-top:focus,
  .scroll-to-top:active {
    outline: 0;
  }
.scroll-to-top.is-active {
    bottom: 30px;
  }
.scroll-to-top:hover {
    color: #004971;
    border-color: #004971;
  }
@media (max-width: 767px) {
.scroll-to-top {
    display: none
}
  }
/* Embeds responsive */
.embed,
.embed-responsive {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  padding: 0 0 56.25%;
  margin-bottom: 30px;
  overflow: hidden;
}
.embed img, .embed-responsive img {
    width: 100%;
  }
.embed iframe,
  .embed embed,
  .embed object,
  .embed video,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
.embed:focus, .embed-responsive:focus {
    outline: none !important;
  }
/* Modifier class for 16:9 aspect ratio */
.embed-responsive--16by9 {
  padding-bottom: 56.25%;
}
/* Modifier class for 4:3 aspect ratio */
.embed-responsive--4by3 {
  padding-bottom: 75%;
}
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: block !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block;
  }
}
@media (min-width: --screen-lg) {
  .visible-lg {
    display: block;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
.visible-print-block {
    display: block !important
}
  }
.visible-print-inline {
  display: none !important;
}
@media print {
.visible-print-inline {
    display: inline !important
}
  }
.visible-print-inline-block {
  display: none !important;
}
@media print {
.visible-print-inline-block {
    display: inline-block !important
}
  }
@media print {
  .hidden-print {
    display: none !important;
  }
}
.page-header {
 margin-top: calc(1px * 1.5 * 2);
  margin-bottom: calc(15px * 1.5 * 2);
}
.page-header--with-border {
  border-bottom: 1px solid #f1f1f1;
}
.page-header--center {
  text-align: center;
}
.page-description {
  max-width: 800px;
  margin: auto;
  color: #818a91;
}
.recent-articles h3 {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.25);
  font-weight: 600;
}
.related-articles h3 {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.25);
  font-weight: 600;
}
.recent-articles ul,
.related-articles ul {
  padding-left: 0;
  list-style: none;
}
.recent-articles ul > li {
  margin-bottom: calc(16px * 1.5 / 2);
}
.related-articles ul > li {
  margin-bottom: calc(16px * 1.5 / 2);
}
.recent-articles ul > li a {
  position: relative;
  padding-left: 20px;
  margin-bottom: calc(16px * 1.5 / 2);
  page-break-inside: avoid;
}
.related-articles ul > li a {
  position: relative;
  padding-left: 20px;
  margin-bottom: calc(16px * 1.5 / 2);
  page-break-inside: avoid;
}
.recent-articles ul > li a:before, .related-articles ul > li a:before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border-color: transparent transparent transparent rgba(0, 123, 189, 1);
    border-style: solid;
    border-width: 5px 0 5px 6px;
  }
.section-articles {
  margin-bottom: calc(16px * 1.5 * 2);
}
@media (min-width: 768px) {
.section-articles {
    margin-bottom: calc(16px * 1.5)
}
  }
.section-articles__title {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.25);
  font-weight: 600;
}
.section-articles__list {
  padding-left: 0;
  list-style: none;
}
.section-articles__item {
  margin-bottom: calc(16px * 1.5 / 2);
}
.section-articles__link {
  position: relative;
  padding-bottom: 1px;
  padding-left: 20px;
}
.section-articles__link:before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 0;
    height: 0;
    content: "";
    border-color: transparent transparent transparent rgba(0, 123, 189, 1);
    border-style: solid;
    border-width: 5px 0 5px 6px;
  }
.community-recent-activity {
  padding: 90px 0;
  margin-bottom: calc(16px * 1.5 * 2);
}
.community-recent-activity h2 {
    font-size: calc(16px * 1.75);
    font-weight: 400;
    text-align: center;
  }
@media (min-width: 768px) {
.community-recent-activity h2 {
      margin-bottom: 74px
  }
    }
.community-recent-activity .recent-activity-header {
    display: none;
  }
.community-recent-activity .recent-activity-list {
    padding-left: 0;
    margin-bottom: calc(16px * 1.5);
    list-style: none;
  }
@media (min-width: 768px) {
.community-recent-activity .recent-activity-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 16px
  }
    }
.community-recent-activity .recent-activity-item {
    width: 100%;
    padding: 20px 20px 15px;
    margin-bottom: calc(16px * 1.5);
    border-radius: 8px;
    -webkit-box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
            box-shadow: 0 0 20px 5px rgba(62, 60, 98, 0.08);
  }
@media (min-width: 768px) {
.community-recent-activity .recent-activity-item {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: 30px;
      vertical-align: top
  }

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

    .profile-stats__stat:before {
      display: none;
    }
  }
.profile-stats__label {
  margin-right: calc(12px / 2);
}
.profile-stats__value {
  color: #fff;
}
/* Profile Nav */
.profile-nav {
  margin-bottom: calc(16px * 1.5);
  overflow: hidden;
  font-size: calc(calc(16px * 0.85));
  font-weight: 600;
  background-color: #f1f1f1;
  border-radius: 4px;
}
.profile-nav__items {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.profile-nav__item {
  margin-bottom: 0;
}
@media (min-width: 768px) {
.profile-nav__item {
    display: inline-block;
    vertical-align: middle
}
  }
.profile-nav__item a {
    display: block;
    color: rgba(0, 0, 0, 1);
  }
.profile-nav__item.is-active {
    color: #fff;
    background-color: #212121;
  }
.profile-nav__item.is-active {
    padding: calc(16px * 1.5 / 1.5)
      12px;
    line-height: 1;
  }
.profile-nav__item a {
    padding: calc(16px * 1.5 / 1.5)
      12px;
    line-height: 1;
  }
.profile-nav__item:after {
    right: 12px !important;
  }
/* Profile Section */
.profile-section {
  width: 100%;
  text-align: center;
}
.profile-section__header {
  margin-bottom: calc(16px * 1.5);
}
.profile-section__title {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.5);
  color: #212121
}
.profile-section__description {
  font-size: calc(16px * 0.85);
  color: #979797;
}
@media (min-width: 768px) {
.profile-section__description {
    padding-bottom: 0
}
  }
/* Profile Section Sorter */
.profile-section-sorter {
  font-size: calc(16px * 0.85);
}
.profile-section-sorter .dropdown {
    display: inline-block;
  }
@media (min-width: 768px) {
.profile-section-sorter {
    display: table;
    width: 100%
}
  }
@media (min-width: 768px) {
.profile-section-sorter {
    padding-top: 0;
    border-top: 0
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col {
    display: table-cell;
    vertical-align: middle
}
  }
@media (max-width: 767px) {
.profile-section-sorter__col--main {
    margin-bottom: calc(16px * 1.5 / 2)
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col--main {
    padding-right: calc(12px)
}
  }
@media (min-width: 768px) {
.profile-section-sorter__col--btn {
    text-align: right
}
  }
/* Profile Contribution */
.profile-contribution {
  position: relative;
  padding: calc(16px * 1.5 / 2) 15px;
  word-wrap: break-word;
  background-color: #f9f9f9;
  border-radius: 4px;
}
.profile-contribution__header {
  margin-bottom: calc(16px * 1.5 / 4);
}
.profile-contribution__status {
  margin-bottom: calc(16px * 1.5 / 4);
}
.profile-contribution__title {
  margin-bottom: calc(16px * 1.5 / 4);
  font-size: 16px;
  font-weight: 600;
}
.profile-contribution__body {
  margin-bottom: calc(16px * 1.5 / 2);
}
.profile-contribution--list .profile-contribution__title:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.profile-contribution__breadcrumbs {
  padding: 0;
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 0.85);
}
.profile__no-activity {
  color: #979797;
  text-align: center;
}
.profile__private-activity {
  color: #979797;
  text-align: center;
}
/* Profile Activity */
.profile-activity-list {
  padding-left: 0;
  list-style: none;
}
.profile-activity {
  position: relative;
  margin-bottom: calc(16px * 1.5 * 1.5);
}
.profile-activity__header {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 0.85);
  font-weight: 600;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.profile-activity__header:before {
    display: inline-block;
    margin-right: 2px;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.profile-activity__avatar {
  width: 30px;
  height: 30px;
  margin-right: calc(12px / 2);
}
.profile-activity-list--articles .profile-contribution__title:before,
.profile-activity[class$="-article"] .profile-activity__header:before {
  content: "\f15c";
}
.profile-activity-list--posts .profile-contribution__title:before,
.profile-activity[class$="-post"] .profile-activity__header:before {
  content: "\f086";
}
.profile-activity-list--comments .profile-contribution__title:before,
.profile-activity[class$="-comment"] .profile-activity__header:before {
  font-weight: 400;
  content: "\f075";
}
.user-subscribe {
  display: inline-block;
}
.entry-info {
  display: none;
}
.status-label {
  padding: 2px calc(12px / 2);
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
}
.status-label--pending {
  background-color: rgba(243, 112, 33, 1);
}
.status-label--with-ticket {
  background-color: rgba(0, 123, 189, 1);
}
.status-label--with-ticket:hover,
  .status-label--with-ticket:focus,
  .status-label--with-ticket:active {
    color: #fff;
  }
.status-label--solved,
.status-label--closed {
  background-color: rgba(80, 184, 72, 1);
}
.status-label--new,
.status-label--open {
  background-color: rgba(239, 59, 36, 1);
}
.status-label--answered {
  background-color: rgba(243, 112, 33, 1);
}
.status-label--official {
  background-color: rgba(0, 123, 189, 1);
}
.status-label--completed,
.status-label--answered {
  background-color: rgba(80, 184, 72, 1);
}
.status-label--planned {
  background-color: rgba(0, 123, 189, 1);
}
.status-label--not-planned {
  color: rgba(0, 0, 0, 1);
  background-color: #f1f1f1;
}
.attachment-list {
  padding-left: 0;
  margin: 0;
  font-size: calc(16px * 0.85);
  list-style: none;
}
.attachment-list__item {
  position: relative;
  padding-left: calc(
    12px + 12px / 2
  );
  margin-bottom: calc(16px * 1.5 / 2);
}
.attachment-list__item:last-child {
    margin-bottom: 0;
  }
.attachment-list__icon {
  position: absolute;
  top: 4px;
  left: 0;
}
@media (min-width: 768px) {
.promoted-articles {
    margin-right: -15px;
    margin-left: -15px
}
  }
.promoted-articles__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  list-style: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
@media (min-width: 768px) {
.promoted-articles__list {
    margin-bottom: 66px
}
  }
.promoted-articles-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.promoted-articles-item .fa-star {
  margin-right: 6px;
  color: rgba(0, 123, 189, 1);
}
.promoted-articles-item__content {
  display: inline-block;
  vertical-align: top;
}
.promoted-articles__title {
  font-size: calc(16px * 1.75);
  font-weight: 400;
  text-align: center;
}
@media (min-width: 768px) {
.promoted-articles__title {
    margin-bottom: 76px
}
  }
.promoted-articles-item__title {
  display: block;
  max-width: 360px;
  margin-bottom: calc(16px * 1.5 / 4);
  font-size: 18px;
}
.callout {
  padding: calc(16px * 1.5) 20px;
  margin-bottom: calc(16px * 1.5);
  background-color: #f1f1f1;
  border-left: 5px solid;
}



.callout p:last-child {
    margin-bottom: 0;
  }
.callout--transparent {
  background-color: transparent;
  border: 1px #dedede;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
          box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
}
.callout--success {
  color: rgba(0, 0, 0, 1);
  background-color: #fff;
  border-color: rgba(80, 184, 72, 1);
}
.callout--success .callout__title {
    color: rgba(80, 184, 72, 1);
  }
.callout--info {
  color: rgba(0, 0, 0, 1);
  background-color: #a3dfff;
  border-color: rgba(0, 165, 255, 1);
}
.callout--info .callout__title {
    color: rgba(0, 165, 255, 1);
  }
.callout--warning {
  color: rgba(0, 0, 0, 1);
  background-color: #f8b187;
  border-color: rgba(243, 112, 33, 1);
}
.callout--warning .callout__title {
    color: rgba(243, 112, 33, 1);
  }
.callout--danger {
  color: rgba(0, 0, 0, 1);
  background-color: #f9bbb3;
  border-color: rgba(239, 59, 36, 1);
}
.callout--danger .callout__title {
    color: rgba(239, 59, 36, 1);
  }
.callout--primary {
  color: rgba(0, 0, 0, 1);
  background-color: #c7ecff;
  border-color: rgba(0, 123, 189, 1);
}
.callout--primary .callout__title {
    color: rgba(0, 123, 189, 1);
  }
.callout--dashed {
  border-style: dashed;
  border-width: 1px;
}
.image-with-border {
  padding: calc(12px - 2px);
  border: 1px solid #d3d6d8;
  border-radius: 4px;
}
.image-with-shadow {
  -webkit-box-shadow: 0 5px 15px 2px #666;
          box-shadow: 0 5px 15px 2px #666;
}
.image-with-lightbox {
  cursor: pointer;
}
.image-overlay {
  position: relative;
}
.image-overlay:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background-color: rgba(255, 255, 255, 0.3);
  }
.image-with-video-icon {
  position: relative;
  display: block;
}
.image-with-video-icon img {
    width: 100%;
  }
.image-with-video-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    font-size: 0;
    content: "";
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 30px 0 30px 60px;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }


.image-with-video-icon:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
  }
.image-with-video-icon:active:before, .image-with-video-icon:hover:before {
      -webkit-transform: translate(-50%, -50%) scale(1.1);
              transform: translate(-50%, -50%) scale(1.1);
    }
.list-colored,
.list-bullet {
  padding-left: 0 !important;
  list-style-type: none;
  counter-reset: list;
}
.list-colored li {
    position: relative;
    padding-left: calc(12px + 30px);
    margin-bottom: calc(16px * 1.5 / 1.5) !important;
    counter-increment: list;
  }
.list-colored li:before {
      position: absolute;
      top: -3px;
      left: 0;
      z-index: 1;
      width: 30px;
      height: 30px;
      font-size: calc(16px * 0.85);
      line-height: 30px;
      color: #fff;
      text-align: center;
      content: counter(list);
      background-color: rgba(0, 123, 189, 1);
      border-radius: 50%;
    }
.list-colored ol {
    margin-bottom: 14px;
    list-style-type: none;
    counter-reset: list;
  }
.list-bullet li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
  }
.list-bullet li:before {
      position: absolute;
      top: -2px;
      left: 0;
      font-family: "Font Awesome 5 Free";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      color: rgba(0, 123, 189, 1);
      content: "\f058";
    }
.list-bullet ul {
    margin-bottom: 14px;
    list-style: none;
  }
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-primary {
  background-color: #57c4ff;
}
.text-info {
  background-color: rgba(0, 165, 255, 1);
}
.text-warning {
  background-color: rgba(243, 112, 33, 1);
}
.text-danger {
  background-color: rgba(239, 59, 36, 1);
}
.text-success {
  background-color: rgba(80, 184, 72, 1);
}
.accordion {
  padding-top: 0;
  margin-bottom: calc(16px * 1.5);
  border: 1px solid #ddd;
  border-radius: 4px;
}
.accordion__item-title {
  position: relative;
  padding: 15px 20px 15px 52px;
  font-size: calc(16px * 1.25);
  cursor: pointer;
}
.accordion__item-title:not(.accordion__item-title--active) {
    border-bottom: 1px solid #ddd;
  }
.accordion__item-title:before {
    position: absolute;
    content: "";
  }
.accordion__item-content {
  display: none;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.accordion__item-content p:last-child {
    margin-bottom: 0;
  }
.accordion__item:last-child .accordion__item-title {
  border-bottom: none;
}
.accordion--default .accordion__item-title:before {
    top: 50%;
    left: 22px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-bottom: 2px solid rgba(0, 123, 189, 1);
    border-left: 2px solid rgba(0, 123, 189, 1);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
.accordion--default .accordion__item-title--active {
    background-color: #f0f0f0;
  }
.accordion--default .accordion__item-title--active:before {
      -webkit-transition: -webkit-transform 0.3s;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
    }
.accordion--colored .accordion__item-title {
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
.accordion--colored .accordion__item-title:before,
    .accordion--colored .accordion__item-title:after {
      top: 50%;
    }
.accordion--colored .accordion__item-title:before {
      left: 20px;
      width: 10px;
      height: 2px;
      margin-top: -1px;
      background-color: #818a91;
    }
.accordion--colored .accordion__item-title:after {
      position: absolute;
      left: 24px;
      width: 2px;
      height: 10px;
      margin-top: -5px;
      content: "";
      background-color: #818a91;
    }
.accordion--colored .accordion__item-title--active {
      color: #fff;
      background-color: rgba(0, 123, 189, 1);
      -webkit-transition: background-color 0.3s;
      transition: background-color 0.3s;
    }
.accordion--colored .accordion__item-title--active:before {
        background-color: #fff;
      }
.accordion--colored .accordion__item-title--active:after {
        display: none;
      }
.tabs {
  margin-bottom: calc(16px * 1.5);
}
.tab {
  display: block;
  padding: 30px;
  margin-top: -1px;
  border: 1px solid #ddd;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.tab p:last-child {
    margin-bottom: 0;
  }
@media (min-width: 768px) {
.tab {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
  }
.tab:nth-child(2) {
  border-top-left-radius: 0;
}
.tabs-link {
  display: block;
  padding: 8px 30px;
  margin: 0;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom-width: 0;
}
.tabs-link:hover {
    color: rgba(0, 123, 189, 1);
  }
@media (max-width: 767px) {
.tabs-link {
    border-top-color: #ddd;
    border-right-color: #ddd;
    border-left-color: #ddd
}

    .tabs-link:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
@media (min-width: 768px) {
.tabs-link {
    display: inline-block
}
  }
.tabs-link.is-active {
  color: rgba(0, 123, 189, 1);
  cursor: pointer;
  border-color: #ddd;
}
.tabs-link.is-active:hover {
    color: rgba(0, 123, 189, 1);
    cursor: default;
  }
@media (min-width: 768px) {
.tabs-link.is-active {
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
  }
.tabs--colored-1 .tab {
    background-color: #fcfcfd !important;
  }
.tabs--colored-1 .tabs-link.is-active {
    background-color: #fcfcfd;
    border-bottom-color: #fcfcfd;
  }
.tabs--colored-2 .tabs-link:hover {
      color: rgba(0, 123, 189, 1);
    }
.tabs--colored-2 .tabs-link.is-active {
    color: #fff;
    background-color: rgba(0, 123, 189, 1);
    border-color: rgba(0, 123, 189, 1);
  }
.tabs--colored-2 .tabs-link.is-active:hover {
      color: #fff;
    }
.tabs--colored-2 .tab {
    background-color: #fcfcfd !important;
  }
.waves {
  overflow: hidden;
}
.waves--footer {
  position: absolute;
  top: -98px;
  left: 0;
  width: 100%;
}
.waves--footer svg {
    width: 100%;
    min-width: 1900px;
  }
.waves--large {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
  width: 100%;
}
.waves--large svg {
    width: 100%;
    min-width: 500px;
    min-height: 363px;
  }
@media (min-width: 480px) {
.waves--large svg {
      min-width: 700px
  }
    }
@media (min-width: 992px) {
.waves--large svg {
      min-width: 1300px
  }
    }
@media (min-width: 1200px) {
.waves--large svg {
      min-width: 1900px
  }
    }
.waves--small {
  position: relative;
  margin-top: -1px;
  margin-bottom: calc(16px * 1.5);
  color: rgba(0, 123, 189, 1);
}
.waves--small svg {
    width: 100%;
    min-width: 1900px;
    height: 47px;
  }
.waves--small svg path {
      fill: currentColor;
    }
.waves__wave {
  fill: #fff;
}
.waves__wave-left.wave-bottom,
.waves__wave-right.wave-bottom {
  opacity: 0.4;
}
.waves__wave-left.waves__wave-top,
.waves__wave-right.waves__wave-top {
  opacity: 0.3;
}
.waves__wave--footer-primary {
  fill: rgba(0, 123, 189, 1);
}
.waves__wave-footer-with-opacity {
  fill: rgba(0, 123, 189, 1);
}
/* Community */
.community-nav__item {
  float: left;
}
.community-nav__item + .community-nav__item {
    margin-left: 12px;
  }
.community-nav__item.is-active {
    font-weight: 600;
  }
.community-nav__item--button {
  float: right;
}
.vote {
  width: 100%;
  max-width: 60px;
}
.vote [aria-selected="true"] {
    z-index: 2;
  }
.vote-sum {
  display: block;
  padding-top: calc(16px * 1.5 / 4);
  padding-bottom: calc(16px * 1.5 / 4);
  font-weight: 600;
  text-align: center;
}
.vote-control {
  position: relative;
  z-index: 1;
  display: block !important;
  padding: calc(16px * 1.5 / 6) 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 1);
  background-color: transparent;
  border: 1px solid rgba(0, 123, 189, 1);
}
.vote-control:hover,
  .vote-control:active,
  .vote-control:focus,
  .vote-control--voted {
    z-index: 2;
    background-color: rgba(0, 123, 189, 1);
  }
.vote-control:hover:before, .vote-control:active:before, .vote-control:focus:before, .vote-control--voted:before {
      color: #fff;
    }
.vote-control--active {
    border-color: #474747;
  }
@media (min-width: 768px) {
.topic-list-page {
    margin-bottom: calc(16px * 1.5)
}
  }
.topic-list-item:nth-child(2n + 1) {
    clear: left;
  }
.topic-list-item__box {
  padding: calc(16px * 1.5) 12px;
  margin-bottom: calc(16px * 1.5);
  border: 1px solid #f1f1f1;
  border-radius: 4px;
}
.topic-list-item__title {
  margin-bottom: calc(16px * 1.5 / 2);
}
.topic-page {
  margin-bottom: calc(16px * 1.5 * 2);
}
.topic {
  display: table;
  width: 100%;
  padding-bottom: calc(16px * 1.5 / 2);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
.topic__col {
  display: table-cell;
  vertical-align: inherit;
}
@media (min-width: 480px) {
.topic__col {
    vertical-align: top
}
  }
.topic__col--new-post {
  text-align: right;
}
.topic__title {
  width: 100%;
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.75);
}
.topic-filters__item {
  float: left;
  margin-right: calc(12px / 2);
}
@media (max-width: 767px) {
.topic-filters__item {
    margin-bottom: calc(16px * 1.5 / 2)
}
  }
.topic-controls {
  margin-bottom: calc(16px * 1.5 * 2);
}
.topic-controls__item {
  float: left;
}
.topic-followers {
  margin-right: calc(12px / 2);
}
@media (min-width: 768px) {
.topic-controls__item--subscribe {
    float: right;
    white-space: nowrap
}
  }
.topic-controls__item--subscribe .dropdown {
    display: inline-block;
    vertical-align: middle;
  }
.topic-controls__item--subscribe .dropdown-menu {
    right: 0;
    left: initial;
  }
@media (min-width: 768px) {
.post-page {
    margin-bottom: calc(16px * 1.5 * 2)
}
  }
.post {
  position: relative;
  margin-bottom: calc(16px * 1.5);
}
.post__title {
  padding-right: calc(12px * 1.5);
  font-size: calc(16px * 1.5);
}
@media (min-width: 768px) {
.post__title {
    font-size: calc(16px * 1.75)
}
  }
@media (min-width: 992px) {
.post__title {
    font-size: calc(16px * 2.5)
}
  }
.post-follow .post-subscribe,
  .post-follow .post-unsubscribe {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
  }
.post-follow .post-subscribe:hover,
    .post-follow .post-subscribe:focus,
    .post-follow .post-subscribe:active,
    .post-follow .post-unsubscribe:hover,
    .post-follow .post-unsubscribe:focus,
    .post-follow .post-unsubscribe:active {
      color: #e0e0e0;
      background-color: transparent;
      border-color: transparent;
    }
.post-follow .post-subscribe:active, .post-follow .post-unsubscribe:active {
      background-image: none;
    }
.post-meta {
  display: table;
  width: 100%;
  margin-bottom: calc(16px * 1.5);
}
.post-meta__col {
  display: table-cell;
  vertical-align: top;
}
.post-meta__col--main {
  width: 100%;
  padding-right: 12px;
}
.post__text {
  word-wrap: break-word;
}
.post__body {
  padding-right: calc(12px + 60px);
}
.post__body ul {
    list-style: disc;
  }
.post__body ul,
  .post__body ol {
    padding-left: 20px;
  }
.post__body ul ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.post__body ul ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.post__body ol ul {
      margin-top: calc(16px * 1.5 / 2);
    }
.post__body ol ol {
      margin-top: calc(16px * 1.5 / 2);
    }
.post__body ul li {
      margin-bottom: calc(16px * 1.5 / 2);
    }
.post__body ol li {
      margin-bottom: calc(16px * 1.5 / 2);
    }
.post__voting-and-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  text-align: center;
}
.post__voting-and-actions .dropdown-toggle {
    font-size: 0;
  }
.post__voting-and-actions .dropdown-toggle:after {
    margin-left: 0;
    font-size: 16px;
    content: "\f013";
  }
.post__actions .dropdown-menu {
  width: auto;
}
.post__actions .dropdown-menu [role="menuitem"] {
    white-space: nowrap;
  }
.post-callout {
  padding: calc(16px * 1.5 / 2) 15px;
  margin-bottom: 55px;
  background-color: #f1f1f1;
}
.post-callout__title {
  font-size: calc(16px * 1.1);
  font-weight: 600;
}
@media (min-width: 768px) {
.post-list-page {
    margin-bottom: calc(16px * 1.5 * 2)
}
  }
.post-list-item {
  padding-bottom: calc(16px * 1.5);
  margin-bottom: calc(16px * 1.5);
  border-bottom: 1px solid #f1f1f1;
}
@media (min-width: 768px) {
.post-list-item {
    display: table;
    width: 100%
}
  }
.post-list-item__title {
  margin-bottom: calc(16px * 1.5 / 2);
  font-size: calc(16px * 1.5);
}
.post-list-item__title .fa-star {
    position: relative;
    top: -4px;
    font-size: 50%;
  }
@media (min-width: 768px) {
.post-list-item__col {
    display: table-cell;
    vertical-align: top
}
  }
@media (min-width: 768px) {
.post-list-item__col--main {
    width: 60%
}
  }
@media (min-width: 768px) {
.post-list-item__col--side {
    width: 40%;
    text-align: right
}
  }
.post-info {
  font-size: 14px;
  color: #979797;
}
@media (min-width: 768px) {
.post-info {
    float: right;
    min-width: 90px;
    padding: calc(12px / 2)
      12px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 4px
	}
  .post-info__count {
    display: block;
    font-weight: 600;
    color: rgba(0, 0, 0, 1)
}
.post-info + .post-info {
  margin-right: 12px;
	}
}


@media (max-width: 767px) {
    .post-info + .post-info:before {
      margin-right: calc(12px / 2);
      font-size: 10px;
      content: "\2022";
    }
  }
  .post-status {
    display: inline-block;
    padding: 1px calc(12px / 2);
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
  }
  .post-status--completed,
  .post-status--answered {
    background-color: rgba(80, 184, 72, 1);
  }
  .post-status--planned {
    background-color: rgba(0, 123, 189, 1);
  }
  .post-status--not-planned {
    color: rgba(0, 0, 0, 1);
    background-color: #f1f1f1;
  }
@media (min-width: 768px) {
.new-post-page {
    margin-bottom: calc(16px * 1.5 * 2)
}
  }
.new-post-title {
  font-size: calc(16px * 1.5);
}
@media (min-width: 768px) {
.new-post-title {
    font-size: calc(16px * 1.75)
}
  }
@media (min-width: 992px) {
.new-post-title {
    font-size: calc(16px * 2.5)
}
  }
.new-post-form {
  margin-bottom: calc(16px * 1.5);
}

#user-name {
  font-family: 'Atkinson', sans-serif;
  font-weight: 600;
}
.toast-top-center {
	margin-top: 120px;
}

.send-request {
    margin: 10px;
    padding: 20px;
    border-width: high;
    border-style: outset;
    border-color: #F1F3F5;
  	text-align: center;
  	border-radius: 10px;

}
b {  
  font-style: normal;
  font-weight: bold;
 	font-size: 16px;
}

.viewChat {
    font-family: 'Atkinson', sans-serif;
  	font-weight: bold;
  	font-size: 15px;
  	margin-bottom: 20px;
    width: 20px;
    display: table-row;
}
.viewEmail {
   	font-family: 'Atkinson', sans-serif;
  	font-weight: bold;
  	font-size: 15px;
    margin-bottom: 20px;
    width: 20px;
   display: table-row;
}
.viewPhone {
   	font-family: 'Atkinson', sans-serif;
  	font-weight: bold;
  	font-size: 15px;
    margin-bottom: 20px;
    width: 20px;
   display: table-row;
}
.via-email img{
    padding-bottom: 10px;
    max-width:60px;
    max-height:60px;
    width: auto;
    height: auto;
}

.via-phone img{
    padding-bottom: 10px;
    padding-bottom: 10px;
    max-width:60px;
    max-height:60px;
    width: auto;
    height: auto;
}
.lt-btn img{
    padding-bottom: 10px;
    padding-bottom: 10px;
    max-width:60px;
    max-height:60px;
    width: auto;
    height: auto;
}
.buttonBox {
    display: flex;
    justify-content: space-around;
}
@media (min-width: 1080px) {
.buttonBox {
    display: flex;
    justify-content: space-around;
    width: 270px;
}
}
.knowledge-base {	
  margin-top: 40px; 
}

.menu-profile-items {
  position: absolute;
  display: none;
}

.menu-profile-item {
  display: block;
  text-decoration: none;
  color: #E2144A;
  background: #fff;
  padding: 5px;
  border: 1px solid #ccc;
}

.menu-profile-div:hover .menu-profile-items { display: block; }

.topbar-link {
  !important;
  color: #FFFFFF;
  font-family:'Atkinson', sans-serif;
  font-weight:600;
}

.header {
  width: 100%;
  margin: 30px 0px 30px;
  display: flex;
  flex-direction: column;
}

.total {
  display: flex;
  flex-direction: column;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;
}

.menu-profile-mobile{
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
.menu-profile-mobile a {
	color: white;
  font-family:'Atkinson', sans-serif;
  font-weight:600;
  text-align: right;
  padding-right: 10px;
}
.menu-profile-mobile[aria-expanded="false"]  { display: none; }
.menu-profile-mobile[aria-expanded="true"]  { display: flex; }

.notification.notification-error.notification-inline { 
  color: red;
} 

.form-field.string.optional.request_custom_fields_14397265007380 { display: none; } 
.form-field.string.optional.request_custom_fields_15519580588564 span { display: none; }
.form-field.string.optional.request_custom_fields_360025068391 { display: none; } 

/* Guide personalizado - novo modelo */

header {
  width: 100%;
  margin: 25px 0px  0px;
  display: flex;
  flex-direction: column;  
}


.logo {
  margin: 0% 11% 0% 0%;
  display: inline-block;
  vertical-align: top;
}

.logo-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

logo-dois {
  width: 150px;
  height: 30.14px;
}

.header-total {
  max-width: 1200px;
  width: 100%; 
  margin: auto; 
  display: flex;  
  justify-content: space-between;
  height: 50px;
  
}

.aviso {
/*     background-color: #0077cc;
    background-image: linear-gradient(to right, #004aad, #52cee0); */
    background: linear-gradient(to right, #080449, #3b539b, #a64871, #d55255);
    max-width: 1200px;
    width: 100%; 
    margin: auto; 
    display: flex;  
    text-align: center;
    align-items: center;
    height: 35px;
  	border-radius: 5px;
    margin-top: 10px;
}


.textoHeader {
  margin: 12px 0;
  color: white;
}

.all-links {  
  display: flex;
  vertical-align: top;
}
.bottom-header { 
  font-weight: 300;
  color: #161818c7;
  margin-right: 17px;
}


.logo-unico {
    width: 150px;
    height: 30.14px;
}

.banner-head {
  width: 100%;
  margin-top: 20px;
}

.banner-b2b {
  width: 100%;
  height: 205px;
}

.lazyloaded {
  height: 400px;
  margin-left: 150px;
}

.name-hc {
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.category-list-item__title {
  color: f4f4f7;
  font-size: 20px;
}



#botao-entrar-header {
  border: 1px solid #000;
  border-color: #d7d0d0;
  padding: 10px 20px;
  border-radius: 30px;
  display: flex;
}

@media (max-width: 900px) {
  .aviso {
/*     background-color: #0077cc;
    background-image: linear-gradient(to right, #004aad, #52cee0); */
    background: linear-gradient(to right, #080449, #3b539b, #a64871, #d55255);
    max-width: 1200px;
    width: 100%; 
    margin: auto; 
    display: flex;  
    text-align: center;
    align-items: center;
    height: 35px;
  	border-radius: 5px;
    margin-top: 10px;
}
    #botao-entrar-header {
        padding: 10px 10px;
    }
  
  	#dropdownButton {
    font-size: 9px !important;
  }
}


#botao-entrar-header:hover {
  background: #212121;
  color: white;
  transition: 0.6s;
  border: 1px solid #212121;
}

.lazyloaded-footer {
  height: 47.99px
}

#solicitacao-ajuda-footer-id {
  margin-top: 15px;
  font-size: 20px;
  font-weight: bold;
}

#texto-ajuda-footer-id {
  margin-top: 13px;
  font-size: 13px;
 
}

.botao-solicitacao-footer:hover {
  background: #4A4A4A
}

.logos-redes-sociais {
  display: flex;
  cursor: pointer;
  margin-bottom: 5px;
  color: #000;
}

.container-geral-info {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}

.footer-informacoes-adicionais {
	background: #ffffff;
  max-width: 80%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.lazyloaded-redes-sociais {
  height: 30px;
  color: #000;
}

.orientacoes-redes-sociais {
  font-size: 12px;
  font-weight: bold;
  color: #474849;
  margin-top: 10px;
  margin-bottom: 5px;
}

.institucional {
  font-size: 12px;
  font-weight: bold;
  color: black;
}

.escritorios {
  font-size: 12px;
  font-weight: bold;
  color: #474849;
}

.geral-escritorio {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

a.cor-letra {
  color:#212121;
  font-size: 12px;
}

.localizacao {
  color:#5c5d5e;
  font-size: 12px;
}

#instucional-id {
  color: black;
  font-size: 12px;
}

a.icone-maps !important {
  height: 30px;
}

.escritorios {
  color: black;
}



.bloco1-footer {
  display: flex;
  flex-direction:column;  
  margin: 0px 40px 0px 40px;
}

.geral-informacoes-footer {
    display: flex;
    justify-content: space-between;
    margin: 0px 0px 40px 600px;
}


.coluna2-footer {
 display: flex;
 flex-direction:column;
 margin: 50px;
line-height: 2
 
}

.bloco2-footer {
  display: flex;
  flex-direction:column;
}

.bloco3-footer {
  display: flex;
  flex-direction:column;
}

.bloco4-footer {
  display: flex;
  flex-direction:column;
}

.bloco5-footer {
  color: #5c5d5e;
  font-size: 12px;
  max-width: 31%;
}

.geral-chat {
  background: #f1f1ff;
}

.para-empresas {
  margin-top: 10px;
}

.para-empresas1  {
  font-weight: bold;
  color: black;
}

.horario-atendimento, .para-empresas {
  font-weight: bold;
  color: black;
}


.lazyloaded-redes-sociais:hover {
    filter: brightness(.4);
    transition: 0.5s;
}

.direitos-reservados {
  font-size: 10px;
  font-weight: bold;
  background: #f1f1ff;
}

.imagem-chat {
  margin-right: 6px;
  height: 18px;
}

.img-msg {
  height: 22px;
  filter: invert(1);
  margin-right: 5px;
}

.img-wpp {
  height: 17px;
  margin-right: 5px;
}

.img-tel {
  height: 17px;
  margin-right: 5px; 
  filter: invert(1);
}

.img-warning {
  height: 17px;
  margin-right: 5px;
  filter: invert(1);
}

.total-container {
  width: 100%;
  text-align: center;
  align-items: center;
  margin-top: 15px;
}

.total-container-ondemand {
  background: #ead1ff26;
  margin-top: 35px;
}

.container-total-img {
  display: flex;
  flex-direction: row-reverse;
  max-width: 84%;
}


/* Pagina da categoria*/


.direitos-reservados {
  scroll-behavior: smooth;
}

#cor-letra:hover {
  color: #7b7b7b; 
  transition: 0.5s;
}

#imagem-categoria[data-category-id] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 100px;
  width: 136px;  
}

/* #imagem-categoria[data-category-id="20840803177876"] {
  background-image: url(/hc/theming_assets/01J3JVV8K7CAMGMQY7159GN3R3);
	height: 50px;
  margin-top: 15%;
}

#imagem-categoria[data-category-id="20840597242260"] {
  background-image: url(/hc/theming_assets/01JZ14E9KXGQ1K8WE55STQJYMP);
}

#imagem-categoria[data-category-id="20840663806356"] {
  background-image: url(/hc/theming_assets/01JYRVKF0X0TN54AGW95CRB2CY);
}

#imagem-categoria[data-category-id="20840618418836"] {
  background-image: url(/hc/theming_assets/01JZ14E2CPQ7D0QCRYYRDKAX8B);
}

#imagem-categoria[data-category-id="20840609759508"] {
  background-image: url(/hc/theming_assets/01JZ14E7PKDFV42MFGKYPP7EAX);
}

#imagem-categoria[data-category-id="20840597953556"] {
  background-image: url(/hc/theming_assets/01JZ14E8YVPMX08C8M0XXXA06N);
}

#imagem-categoria[data-category-id="20840935742740"] {
  background-image: url(/hc/theming_assets/01JFDKAE9D6DN4GPB51R79NTKE);
}

#imagem-categoria[data-category-id="20840646205972"] {
  background-image: url(/hc/theming_assets/01JZ14E9KTKK1AGRFE71XQQ0YV);
} */
.section-page-description {
  font-size: 12px;
  margin-left: 14px;
  margin-right: 17px;
  margin-top: 10px;
  color: #4c4e54;
  max-width: 79%;
}

.powered-by-zendesk {
  display: none;
}

p.meta {  
  font-size: 16px;
  color: #676666;    
}

.category-list-item__link:hover {
  background: #e8f6ff;
  transition: 0.7s;
}



/* botão de gerenciamento de cookies */

.cmp-revoke-consent {
  position: fixed !important;
  background-color: #cf0080;
  border-radius: 12px;
  font-size: .9em;
  font-weight: 700;
  width: 48px;
  height: 48px;  
  display:flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform .3s, -webkit-transform .3s;
  border: #cf0080;
}

.cmp-revoke-consent span {
display: none;
}

.cmp-revoke-consent:hover span {
  position: absolute;
  min-width: 12rem;
  left: 60px;
  background: #fff;
  border-radius: 8px;
  height: 48px;
  width: 48px;
  box-shadow: 0px 8px 64px -4px rgba(33,66,15,.3);
  padding: 0px 16px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #212121;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none;
}


/*CSS Widget*/

#quadrado {
  width: 111px;
  height: 39px;
  background-color: #095fa1;
  cursor: pointer;
  position: fixed;
  right: 10px;
  bottom: 11px;
  border-radius: 25px;
  overflow: hidden;
}

#quadrado.aberto {
  width: 300px;
  height: 243px;
  border-radius: 25px;
  transition: 0.3s;
  background: #f9f9fa;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.opcoes {
display: none;
}

#quadrado.aberto .opcoes {
display: block;
}

.botao {
color: white;
text-align: center;
padding: 5px;
text-decoration: none;
display: block;
background-color: transparent;
}

.btn-b2b {
  background: #212121;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  margin-top: 10px;
}

.botao:hover {
background-color: #095fa1;
}

.botao {
font-size: 15px;
background: #06033e;
border-radius: 100px;
width: 100%;
margin-top: 15px;
font-weight: bolder;
}

.opcoes {
display: flex;
flex-direction: column;
align-items: center;
margin: 32px;
}

.titulo-quer-falar-conosco {
font-size: 23px;
color: #2d2c2c;
font-weight: bold;
}

.botao-chat {
  display: flex;
}

.logo-chat {
height: 20px;
filter: invert(100%);
margin-right: 4px;
}

.simbolo-interrogacao {
font-size: 18px;
color: white;
text-align: center;
line-height: 41px;
display: block;
}

#quadrado.aberto .simbolo-interrogacao {
display: none;
}

.request-title {
  margin-left: 33px;
}

h1.new-request-title {
  color: #212121;
}

/*Artigo canais de contato*/
.container-artigo {
  display: flex;
}

.box {
  background: #06033e;
  width: 340px;
  height: 294px;
  border-radius: 2pc; 
  display: flex;
  flex-direction: column;
}

.box-b2c {
  background: #06033e;
  width: 340px;
  height: 312px;
  border-radius: 2pc;
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.opcoes-contato:hover {
  background-color: #212121;
  color: white;
  transition: 0.5s;
  border: 1px solid #212121;
}

.opcoes-contato {
  color: white;
  border: 1px solid white;
  width: 70%;  
  margin-top: 27px;
  border-radius: 14px;
  font-size: 11px;  
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  background: none;
}

.titulo-contato-b2b {
  text-align: center;
  color: white; 
  margin-top: 2pc;
}

.informacoes-de-contato {
  margin-left: 3pc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.informacoes-de-contato-b2c {
  margin-left: 3pc;   
}

#tamanho-letra {
  font-size: 15px;
  margin-top: 25px; 
  text-align: center;
}

#tamanho-letra-bold {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  margin-top: 25px;  
}


#tamanho-letra-bold-horario {
  line-height: 1.3;
  font-size: 15px;
  text-align: center;
}
  font-weight: bold;
}

.btn-b2c {
  background: #212121;
  padding: 10px;
  border-radius: 8px;
  width: 48%;
}

.btn-b2c:hover {
  background: #cc0a42; 
  transition: 0.5s;
	cursor: pointer;
}

.btn-b2b:hover {
  background: #cc0a42; 
  transition: 0.5s;
  cursor: pointer;
}

.opcao-b2c, .opcao-b2b {
  color: white;
}

/*fim*/

.total-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}








main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
}


.main-container-en { 
  margin: 40px;
}



#container-inner-id {
  display: flex; 
  justify-content: center;
}


.container-contact {
  width: 100%;
/*   background-image: url(/hc/theming_assets/01JQBPECXMY2G4A77M8F8J4A0A); */
  background: #06053a;
  border-radius: 30px 30px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;  
  margin-top: 5px;
  background-size: cover;
  height: 180px;
  margin-top: 20px;
}

.container-contact-aviso {
  width: 100%;
  max-width: 1600px;
  margin: 20px auto;
/*   background-image: url(/hc/theming_assets/01JQBPECXMY2G4A77M8F8J4A0A); */
  background-image: linear-gradient(to right, #05032d, #1c2749, #6e304b, #8a3436);
  border-radius: 30px 30px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;  
  background-size: cover;
  height: 20%;
}

.container-contact-aviso-on-demand {
  width: 100%;
/*   background-image: url(/hc/theming_assets/01JQBPECXMY2G4A77M8F8J4A0A); */
  border-radius: 20px;
  display: flex;
  align-items: center;  
  margin-top: 5px;
  background-size: cover;
  height: 20%;
  background: #ead1ff;
  padding: 10px;
}

.container-geral-footer-solicitacao-ajuda-on-demand {
  display: flex;
  align-items: center;
}

.box1-box2-on-demand {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.botao-solicitacao-footer-on-demand {
/* 	background: #212121; */
  background: #212121;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
  margin-right: 17px;
}


.geral-pergunta-e-box {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  max-width: 66%;  
}

.botao-solicitacao-footer-final-on-demand {
/*   background: #212121; */
  background: black;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
}

.indisponibilidade2-on-demand {
  background: #212121;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
  cursor: pointer;
  
}

.indisponibilidadeIcon-on-demand {
  color: white;
}

.banner-b2b-on-demand {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 300px;
  background-image: url(/hc/theming_assets/01K5752VNXNJJBANN0Y88NQXZ1);
  background-size: cover, cover; /* Ajuste o background-size conforme necessário */
  background-position: center, center; /* Ajuste o background-position conforme necessário */
  background-repeat: no-repeat, no-repeat; /* Ajuste o background-repeat conforme necessário */
  margin-top: 0;
}

.banner-b2b-on-demand-modelo {
  background-image: url(/hc/theming_assets/01K575A5K04VJT2H974ZSNPA5T);
  position: absolute;
  left: 80%;
  width: 13%;
  z-index: 0;
  height: 100%;
  background-size: cover, cover; /* Ajuste o background-size conforme necessário */
  background-position: center, center; /* Ajuste o background-position conforme necessário */
  background-repeat: no-repeat, no-repeat; /* Ajuste o background-repeat conforme necessário */
}

.pergunta-footer {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 30px;
    font-weight: bold;
    align-items: center;
    text-align: center;
}

/* .banner-b2b-on-demand {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra todo o espaço sem distorcer */
    z-index: 0; /* Coloca a imagem no fundo */
  	background-size: 100% 74%;
}
 */
.on-demand-header {
  text-align: left;
  color: black;
  text-shadow: 0 0 BLACK;
}

.image-content {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Alinha a imagem à direita */
    align-items: center;
    z-index: 1; /* Garante que a imagem fique ACIMA do fundo */
    max-width: 277px;
}

.image-content img {
    max-width: 100%;
    height: auto;
  	margin-top: 20px;
}

.text-content {
    flex: 1; /* Ocupa o espaço disponível */
    max-width: 550px;
    padding-right: 20px;
    z-index: 1; /* Garante que o texto fique ACIMA do fundo */
    color: #333;
  	padding-top: 20px;
}

.text-content .logo {
    width: 200px;
    margin-bottom: 24px;
}

.text-content h1 {
    font-size: 2.5rem; /* ~40px */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: #1a1a1a;
}

.text-content p {
    font-size: 1.1rem; /* ~17.6px */
    line-height: 1.6;
    color: #555;
    margin-bottom: 0; /* Remove a margem padrão para evitar espaçamento extra */
}



.pergunta-footer-aviso {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 17px;
    align-items: center;
    text-align: center;
}

.link-aviso {
  font-weight: normal;
}

.container-geral-footer-solicitacao-ajuda {
  display: flex;
  align-items: center;
}

.box1-box2 {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  justify-content: center;
}

.botao-solicitacao-footer {
/* 	background: #212121; */
  background: #f22963;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
  margin-right: 17px;
}

.botao-solicitacao-footer-final {
/*   background: #212121; */
  background: #f22963;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
}








.total-new-request {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 73%;
}

.container.article-page { 
  width: 100%
}

.geralzindo {
  display: flex;
}

.article__body markdown {
    display: flex;
    flex-direction: column;
    width: 85%;
    margin-left: 1pc;
}

.article {
display: flex;
    flex-direction: column;
    width: 70%;
    max-width: 92%;
    margin: auto;
}

.total-article {
    display: flex;
    width: 100%;
    max-width: 77%;
    flex-direction: column;
}

.pergunta-duvida-footer {
  margin-top: 8px;
  color: white;
}

.pergunta-duvida-footer-aviso {
  margin-top: 8px;
  margin-bottom: 8px;
  color: white;
}

.section-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%
}

.my-activities-page {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos para a lista de opções do usuário */
.user-options li {
  margin-bottom: 8px;
  margin-left: 17px;

}

.link-log, .link-log-2 {
  font-size: 14px;
}
  
.user-options {
  list-style-type: none;
  font-size: 14px;
  align-items: center;
  flex-direction: column;
  padding: 0;
  margin: 12px;
}

.user-options:hover {
  color: #787878
}

category-list {
  display: flex;
  flex-direction: row;
}

.logo-unico-footer {
  height: 29px;
}

.para-empresas-texto1, .para-empresas-texto2, .para-empresas-texto3, .para-empresas-texto4, .para-empresas-texto5 {
  font-weight: bold;
}



.link-item {
  display: flex;
  align-items: center;
}



.my-activities-menu {
  width: 100%;
}

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



/* Responsividade */

@media (max-width: 1699px) {
 
  
  .section__title-link {   
    font-size: 15px;
    text-align: center;
	}
  
  .article-list-item__link {   
    font-size: 13px;      
	}
}

@media screen and (min-width: 1920px) and (min-height: 1080px) {
    .article-list--section {
      display: flex;
      flex-direction: column;
    }
}

@media (max-width: 1331px) {  
  .section__title-link {   
    font-size: 13px;
    text-align: center;
	}
  .section-tree {
    flex-direction: column;
	}
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    .article-list-item__link {
        height: 8pc;
    }
}





span.optional { display: none }



/*-----INICIO REFATORACAO--------*/
.total-head {
  position: relative;
  width: 100%;
  margin: auto;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  text-align: center;
  font-weight: bold;
}

.total-head-on-demand {
  position: relative;
  width: 100%;
  margin: auto;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  padding: 0;
  height: 300px;
}

.artigo {
  color:rgba(0, 123, 189, 1)
}

.banner-b2b {
  position: absolute;
  top: 7%;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 190px;
  background-image: linear-gradient(to right, #080449, #3b539b, #a64871, #d55255);
  background-size: cover, cover; /* Ajuste o background-size conforme necessário */
  background-position: center, center; /* Ajuste o background-position conforme necessário */
  background-repeat: no-repeat, no-repeat; /* Ajuste o background-repeat conforme necessário */
}

.total-text-head {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  position: relative;
  z-index: 1;
  text-align: center;
}

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

#dropdownButton,
#dropdownButtonEn {
    color: #161818c7;
    border: none;
    cursor: pointer;
    font-size: 16px;
    outline: none;
  	font-weight: 300;
  	background: none;
    padding: 0;
    white-space: nowrap;
}

#dropdownButton:hover,
#dropdownButtonEn:hover {
  transition: 0.5s;
  color: #7b7b7b;
}


.dropdown-content {
    display: none; /* Oculto por padrão */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    background-color: #e4e4e4e6;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
	border-radius: 0px 0px 10px 10px;
    margin-top: 5px;
}

a.select-pt {
  border-radius: 0px 0px 10px 10px;
}

a.select-pt:hover {
  border-radius: 0px 0px 10px 10px;
}



.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropdown-content a.select-eua {
    border-radius: 10px 10px 0px 0px;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}


.img-pessoa {
  height: 270px;
  z-index: 2;
  position: relative;
  margin-left: auto;
  margin-top: -17pc; /* Ajuste para alinhar verticalmente */
}

.text-search {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  align-items: center;
}

.question-head {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  align-items: center;
  text-align: center;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.5);
}

.text-head {
  font-size: 15px;
  margin-bottom: 20px;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.5);

}

.outer-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.square-other-dev {
  margin-top: 30px;
  background: #007bff12;
  width: 1200px;
  border-radius: 8px;
  height: 100px;
  display: flex;
  justify-content: center;
}

.sub-square-dev {
  display: flex;
  justify-content: center;
  align-items: center;
}

p.text-logo-dev {
	margin: 0px 15px 0px 15px;
  color: #08073a;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 100;
  text-align: center;
}

.bandeira-esp, .bandeira-eua {
  width: 15x;
  height: 10px
}

/* Css Bandeiras */
.container-bandeiras {
  display: flex;
  justify-content: end;
}

.btn-bandeira-eua, .btn-bandeira-esp, .btn-bandeira-br {
  cursor: pointer;
}

img.text {
  margin: 10px;
  width: 30px;
}

/* Fim CSS Bandeiras */

.container {
  width: 80%;
  max-width: 1200px;
}

.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
}

.row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
  margin-top: 20px;
  margin-left: 120px;
}


.square {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 140px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  border-radius: 8px;
  transition: background-color 0.3s;
  border: 3px solid #efefef;
}

.square:hover {
  background-color: #F7F7F7;
}

.square-other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 140px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  border-radius: 8px;
  transition: background-color 0.3s;
  border: 1px solid #efefef
}

.square-other-cloudone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 140px;
  text-decoration: none;
  font-size: 15px;
  border-radius: 8px;
  transition: background-color 0.3s;
  border: 1px solid #efefef;
  background-image: url(/hc/theming_assets/01JXMXQAVWQ5P7GAJRB44EXV8H);
}

/* CloudOne card (EN) */
.cloudone-card {
  background-image: url(/hc/theming_assets/01JXMXQAVWQ5P7GAJRB44EXV8H);
  background-size: cover;
  background-position: center;
}

.square-other:hover {
  background-color: #F7F7F7;
}

.invisible {
  color: #ff000000;
}

.img-logo-cloudone {
  width: 60%;
}

.img-logo-idcloud {
  width: 75% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
}

.img-logo-idpay {
  width: 60%;
}

.img-logo-doc {
  width: 80%;
}

.sub-square {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-logo-auto, .img-logo-skill {
  width: 75%;
}

.img-logo-safe {
  width: 120%;
}

.img-logo {
  width: 100%;
}

.img-logo-check, .img-logo-people {
  width: 85%;
}

.text-logo, .text-logo-id-unico {
  color: #06053a;
  font-weight: bold;
  text-align: center;
  margin: 20px 13px 20px;
}

.text-logo-cloudone {
  color: #f8f7f7;
  font-weight: bold;
  text-align: center;
  margin: 20px 13px 20px;
}

/* responsividade */

@media (max-width: 1440px) {
  .aviso {
    background-color: #0077cc;
    background-image: linear-gradient(to right, #004aad, #52cee0);
/*     background: linear-gradient(to right, #080449, #3b539b, #a64871, #d55255); */
    max-width: 1200px;
    width: 100%; 
    margin: auto; 
    display: flex;  
    text-align: center;
    align-items: center;
    height: 35px;
  	border-radius: 5px;
}
  .container {
    width: 74%;
  }
  
  .total-text-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 73%;
    position: relative;
    z-index: 1;
  }

  .box1-box2 {
    display: flex;
    margin-top: 6px;
    justify-content: center;
    align-items: center;
  }

  .container-geral-footer-solicitacao-ajuda {
    display: flex;
    align-items: center;
    margin: 5px;
  }

  .text-search {
    margin-left: 25px;
  }

  .logo-unico {
    margin-left: 25px;
  }

  .outer-container {
    width: 1350px; /* Ajuste de largura para ficar entre as linhas vermelhas */
  }
  
  .container-contact {
    margin-top: 5px;
  }
  
  .container {
    margin: 20px 0px 15px 0px;
  }
}

@media (max-width: 1400px) {
  .total-text-head {
    width: 100%;
    max-width: 73%;
    position: relative;
    z-index: 1;
  }
  
  .container {
    width: 80%;
  }
}

@media (max-width: 1399px) {
  .container {
    width: 70%;
  }
  
  p.text-logo-id-unico, p.text-logo {
    font-size: 14px;
  }
}

@media (max-width: 1300px) {
  .total-text-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 73%;
    position: relative;
    z-index: 1;
  }

  .box1-box2 {
    display: flex;
    margin-top: 6px;
    justify-content: center;
    align-items: center;
  }

  .container-geral-footer-solicitacao-ajuda {
    display: flex;
    align-items: center;
    margin: 5px;
  }

  .text-search {
    margin-left: 25px;
  }

  .logo-unico {
    margin-left: 25px;
  }

  .outer-container {
    width: 80%; 
    max-width: 1000px;
    margin-top: 5px;
  }
  
  .container-contact {
    margin-top: 10px;
  }
  
  
}

@media (max-width: 1280px) {
  .container {
    width: 88%;
  }
}

@media (max-width: 1250px) {
  .box1-box2 {
    display: flex;
    margin-top: 6px;
    justify-content: center;
    align-items: center;
  }

  .container-geral-footer-solicitacao-ajuda {
    display: flex;
    align-items: center;
    margin: 5px;
  }

  .text-search {
    margin-left: 25px;
  }

  .logo-unico {
    margin-left: 10px;
    width: 80px;
  }
  
  .header-total {
    max-width: 1200px;
	}
  .logo {
    margin: 1% 5% 0% 4%;
  }
}

@media (max-width: 1123px) {
    .quebra-de-linha {
    display: none;
  }
  .row {
    grid-template-columns: repeat(4, 1fr);
  }
} 

@media (max-width: 1098px) {
  .img-logo {
    width: 70%;
  }
  .aviso {
    margin-bottom: 0px;
    font-size: 9px;
  }
  .total {
    margin-bottom: 0px;
  }
  .container {
    width: 100%;
    max-width: 96%;
 }
  
  .total-text-head {
    width: 100%;
    max-width: 100%;
  }
  
  .container-total-img {
    width: 100%;
    max-width: 100%;  
  }
  
  .outer-container {
    width: 100%;
    max-width: 1098px;
    margin-top: 30px;
  }
}


@media (max-width: 1024px) {
  .container {
    width: 80%;

  }
  
  .container-total-img {
    display: flex;
    flex-direction: row-reverse;
    max-width: 100%;
  }
  
  .total-head {
  	position: relative;
    width: 100%;
    margin: auto;
    color: white;
    display: flex;
    align-items: center;
    padding: 20px 0;
    justify-content: flex-start;
    font-weight: bold;

  }
}

@media (max-width: 799px) {
  .row {
    margin-top: 50px;
  }
  .row2 {
    margin-left: 0px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .row {
    grid-template-columns: repeat(3, 1fr);
  }
  .box1-box2 {
    flex-direction: column;
  }
  .pergunta-footer {
    font-size: 27px;
  }
  .footer-informacoes-adicionais {
    flex-direction: column;
  }
  .geral-informacoes-footer {
    margin: 15px;
    flex-direction: column;
    align-items: center 
  }
  .bloco1-footer {
    align-items: center;
    margin: 20px;
  }
  .geral-escritorio, .bloco2-footer, .bloco4-footer {
    align-items: center;
    
  }
  .bloco5-footer {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


@media (max-width: 768px) {
  .container-geral-info {
    margin-left: 0px;
  }
  .container-contact {
    height: auto;
    min-height: 180px;
    width: 100%;
    max-width: 100%;
  }
  .row2 {
    grid-template-columns: repeat(1, 1fr);
    margin-left: 0px;
  }
  .outer-container {
    width: 80%;
    margin-bottom: 5px;
    margin-left: 0px;
  }
  
  .container {
    margin: 0px;
  }
  .quebra-de-linha {
    display: none;
  }
  .row {
    grid-template-columns: repeat(1, 1fr);
  }
  .container {
    width: 100%;
  }
  .total-text-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  .text-search {
    align-items: center;
  }
  .question-head, .text-head {
    text-align: center;
  }
  .banner-b2b {
    height: 90%;
  }
}



@media (max-width: 760px) {
  .img-pessoa {
    display: none;
  }
}

@media (max-width: 700px) {
  .container-capacidades {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    margin-top: 30px;
  }
  
  .section-tree {
      display: flex;
      flex-direction: column;
  }
}

@media (max-width: 601px) {
  .box1-box2 {
    flex-direction: column;
  }
  .pergunta-footer {
    font-size: 27px;
  }
  .footer-informacoes-adicionais {
    flex-direction: column;
  }
  .geral-informacoes-footer {
    margin: 15px;
    flex-direction: column;
    align-items: center 
  }
  .bloco1-footer {
    align-items: center;
    margin: 20px;
  }
  .geral-escritorio, .bloco2-footer, .bloco4-footer {
    align-items: center;
    
  }
  .bloco5-footer {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text-search {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-left: 7pc;
  }
  .all-links {
    font-size: 14px;
  }
}

@media (max-width: 486px) {
  .text-search {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0px;
	}
  .pergunta-footer {
    font-size: 22px;
	}
  .logo-unico {
    height: 8.14px;
  }
  .all-links {
    font-size: 11px;
  }
  .logo {
    margin: 0% 5% 0% -1%;
  }
  
}

@media (max-width: 480px) {
  .row {
    grid-template-columns: repeat(1, 1fr);
  }
  .container {
    width: 77%;
    margin-top: 0%;
  }
  .text-search {
    margin: 0pc;
  }
}

@media (max-width: 450px) {
  .all-links {
        font-size: 9px;
    }
}

@media (max-width: 414px) {
  
  .pergunta-footer {
    font-size: 19px;
  }
	.botao-solicitacao-footer {
		height: 27px;
	}

}

@media (max-width: 375px) {
  .question-head {
    font-size: 24px;
  }
  .text-head {
    font-size: 12px;
  }
  .search-container {
    flex-direction: column;
  }
  .search-box {
    width: 100%;
  }
  .search-button {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 340px) {
  .banner-b2b {
    height: 278px;
  }
  .logo-unico {
    height: 15px;
	}
  .logo {
    margin: 0% 0% 0% -16%;
  }
  .search-box--hero-unit #query {
  	width: 45vh;
  }
  .geral-pergunta-e-box {
  	max-width: 78%;
  }
}

@media (max-width: 320px) {
    .banner-b2b {
      height: 170px;
      width: 380px;
  }
  
}


/*-----FIM REFATORACAO--------*/

/*página de contato nova*/

.bodyclass, .htmlclass {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container-page {
    display: flex;
    justify-content: flex-start;
    width: 1200px;
    align-items: flex-start;
  	margin-top: 40px;
}

.service-hours {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.contact-channels {
  color: #240d6b;
  font-size: 24px;
  font-weight: bold;
  width: 40%;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  margin-right: 40px;
  background-color: #fff;
  padding: 29px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



.service-hours {
    width: 45%;
}

.service-title, .contact-title {
    color: #240d6b;
    margin: 0 0 10px;
    font-size: 24px;
  	font-weight: bold;
}

.service-subtitle {
    color: #4b4b4b;
    font-size: 16px;
    margin-bottom: 20px;
}

.hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.hour-item {
    background-color: #f5f5f5;
    padding: 15px;
    text-align: left;
    border-radius: 6px;
    font-weight: bold;
}

.premier-info {
    font-size: 15px;
    color: #4b4b4b;
    margin-top: 20px;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.contact-warning {
    width: 100%;
    background-color: #ffdddda1;
    color: #121111c9;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e60023;
    border-radius: 8px;
    display: flex;
    font-size: 14px;
  	font-weight: bold;
}

.warning-icon {
    font-size: 24px;
    margin-right: 10px;
}

.contact-link {
    color: #e60023;
    text-decoration: none;
    font-weight: bold;
  	font-size: 16px;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-link2 {
    color: #c0ebff;
    text-decoration: none;
    font-weight: bold;
  	font-size: 18px;
}

.contact-link2:hover {
    text-decoration: underline;
}

.contact-button {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.contact-button i {
    margin-right: 10px;
}

.whatsapp-site, .phone-site, .email-site {
  background-color: #08004d;
  font-weight: bold;
  font-size: 19px;
}

.banner-pagina-contato {
    position: relative; 
    width: 100%;
    height: auto;
}

.container-banner-contato {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    text-align: left;
    color: white;
    z-index: 2;
  	width: 1200px;
}

.banner-b2b-pagina-contato {
    width: 100%;
    height: auto;
    z-index: 1;
}

.txt-banner-contato {
  font-size: 50px;
  font-weight: bold;
}

.sub-txt-banner-contato {
  font-size: 25px;
}
.flex-container-contato {
  margin-top: 20px;
}

.text-alert {
  font-size: 14px;
}

.text-alert2 {
  font-size: 18px;
}


.alert {
  width: 45px;
  height: 45px;
  margin-right: 10px;
}

.contact-title-channel {
  margin: 0 0 10px;
  font-size: 24px;
}

.wpp-icone-contato {
	width: 25px;
  height: 25px;
  border-radius: 6px;
  margin-right: 10px;
}

.wpp-icone-contato-txt {
  color: white;
}

.hour-item-2 {
    background-color: #f5f5f5;
    padding: 15px;
    text-align: left;
    border-radius: 6px;
}

.alert-request {
  width: 15px;
  height: 15px;
  margin-top: -2px;
  margin-right: 7px;
}

.alert-request2 {
  width: 40px;
  height: 40px;
  margin-top: -2px;
  margin-right: 7px;
}

.letra-cor {
    color: #ff315b;
}

.custom-height-page .geral-pergunta-e-box {
  height: 7pc; 
}

.contact-warning-request {
    width: 100%;
    background-color: #1F1D1A;
    color: #FFFFFF;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #333333;
    box-sizing: border-box;
}

.contact-warning-request .text-alert {
    color: #FFFFFF;
}

.contact-warning-request .contact-link {
    color: #FFFFFF;
    text-decoration: underline;
}

.contact-warning-request .contact-link:hover {
    color: #E8E6E3;
}


/* Locale switch helpers */
.layout-en { display: none; }
.layout-pt { display: block; }
.layout-pt-br { display: block; }
.layout-en-us { display: none; }

html.is-locale-en .layout-en,
html.is-locale-en .layout-en-us {
  display: block;
}

html.is-locale-en .layout-pt,
html.is-locale-en .layout-pt-br {
  display: none;
}

.login-alert {
  background-color: #1F1D1A;
  color: #FFFFFF;
  border: 1px solid #333333;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9%;
  box-sizing: border-box;
}

.login-alert .alert-icon {
  width: 24px;
  height: 24px;
}

.login-alert p {
  margin: 0;
  font-weight: bold;
  color: #FFFFFF;
}

.login-alert .text-alert2 {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.45;
}

.login-alert .text-alert2 u {
  color: #FFFFFF;
}

.login-alert a,
.login-alert .contact-link {
  color: #FFFFFF;
  text-decoration: underline;
  margin-left: 0;
}

.login-alert a:hover,
.login-alert .contact-link:hover {
  color: #E8E6E3;
}

.nao-e-empresa-txt {
  color: black;
}

.container-nao-e-empresa {
  background-color: #dcdcdc33;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 30%
}

.container-txt-nao-e-empresa {
  margin-top: 20px;
}

@media (min-height: 1050) {
  .total {
    margin-bottom: 0px;
    margin-top: 70px;
  }
  .outer-container {
    margin-top: 120px;
    margin-bottom: 0px;
  }

}

@media (min-width: 2001px) {
  .total {
    margin-bottom: 0px;
    margin-top: 35px;
  }
  .outer-container {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .container-banner-contato {
    width: 1200px; 
  }
}

@media (max-width: 2000px) {

  .container-banner-contato, .container-page {
    width: 80%; 
  }
}

@media (min-width: 1025px) and (max-width: 1433px) {
  .alert {
    width: 45px;
    height: 45px;
    margin-top: 7px;
	}
  
  .container-txt-nao-e-empresa {
    font-size: 13px;
  }
}


@media (max-width: 1098px) {

  .txt-banner-contato {
    font-size: 30px;
  }
  .sub-txt-banner-contato {
    font-size: 15px;
  }
}

@media (max-width: 1024px) {
  .container {
    margin: 0px;
   	margin-bottom: 10px;
  }
  .service-subtitle {
  	font-size: 14px;
  }
  .container-page {
    flex-direction: column; 
    align-items: center;
  }
  
  .container-nao-e-empresa {
 			width: 100%;
}
  .service-hours, .contact-channels {
    font-size: 13px;
    width: 100%; 
    margin: 0 0 20px; 
  }
  
  .service-title, .contact-title, .contact-title-channel {
    font-size: 20px;
  }
  
  .whatsapp-site, .phone-site, .email-site {
  	font-size: 15px;
  }
  
  .wpp-icone-contato {
    width: 18px;
    height: 18px;
    border-radius: 3px;
  }
  
  .alert {
    width: 40px;
    height: 40px;
    margin-top: 8px;
  }
  .text-alert {
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  .search-box--hero-unit, .search {
    display: none;
  }
}


@media (max-width: 600px) {
  .txt-banner-contato {
    font-size: 16px; 
    margin-top: 20px;
  }
  .sub-txt-banner-contato {
    font-size: 11px;
  }
}

@media (max-width: 280px) {
  .txt-banner-contato, .sub-txt-banner-contato {
    font-size: 14px; 
  }
  .hours-grid {
    grid-template-columns: 1fr; 
  }
}

.form-field.request_description textarea#request_description{
  height: 250px;
}


@media (max-width: 414px) {
  .indisponibilidade {
		font-size: 11px;
  }
  .indisponibilidade2{
    font-size: 13px;
  }
  .indisponibilidadeIcon {
    width: 30px;
  }
}

.indisponibilidade {
  align-items: center;
  text-align: center;
  color: black;
}

.indisponibilidade2 {
  align-items: center;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 15px;
}

.indisponibilidadeIcon {
  align-items: center;
  text-align: center;
/*   background: #212121; */
  background: #f22963;
  color: white;
  transition: 0.6s;
  border: #212121;
  display: flex;
  height: 38px;
  border-radius: 8px;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  width: 235px;
}

.indisponibilidadeIcon:hover {
  background-color: #4A4A4A;
  transition: 0.5s;
}


/* Estilos para o novo layout da homepage */

.container-contact-aviso-on-demand {
  width: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;  
  background: #ead1ff;
  padding: 20px;
  max-width: 1200px;
  box-sizing: border-box;
  /* Linha alterada abaixo para centralizar */
  margin: 20px auto 0;
}

.aviso-icon {
  margin-right: 20px;
}

.aviso-icon img {
  width: 120px; /* Ajuste o tamanho do ícone se necessário */
}

.geral-pergunta-e-box-on-demand .link-aviso {
  text-decoration: none;
}

.pergunta-duvida-footer-aviso-on-demand strong {
  color: #333;
  font-size: 16px;
}

.outer-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.container-new-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}

.new-button {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  text-decoration: none;
  color: #333;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.new-button:nth-child(4) {
  grid-column: 1 / 2; /* Faz o quarto botão começar na primeira coluna */
}

.new-button:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.new-button h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #240d6b;
}

.new-button p {
  font-size: 16px;
  margin: 0;
  flex-grow: 1;
}

.new-button .icon-placeholder {
  text-align: left;
  margin-top: 20px;
}

.new-button .icon-placeholder img {
  width: 40px;
  height: 40px;
}


/* Media Queries para responsividade */
@media (max-width: 992px) {
  .container-new-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  .new-button:nth-child(4) {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .container-new-layout {
    grid-template-columns: 1fr;
  }
  .container-contact-aviso-on-demand {
    flex-direction: column;
    text-align: center;
  }
  .aviso-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.rodape-oculto {
  display: none !important;
}

/* --- Estilos para Categoria Personalizada --- */

.custom-category-header {
  background-color: #EBF4FF; /* Cor de fundo azul claro */
  color: #005A9E;
  padding-top: 20px;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #EBF4FF, #D6E9FF);
}

/* Adiciona a onda no final do banner */
.custom-category-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /* Altura da onda */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,192L1440,64L1440,320L0,320Z"></path></svg>');
  background-size: cover;
  background-repeat: no-repeat;
}

.custom-category-header .breadcrumb-container {
  position: relative;
  z-index: 1;
}

.custom-category-header .breadcrumbs a,
.custom-category-header .breadcrumbs li {
  color: #005A9E;
  font-weight: bold;
}

.custom-category-banner-content {
  text-align: center;
  padding: 40px 20px 120px 20px; /* Aumenta o padding inferior para a onda */
  position: relative;
  z-index: 1;
}

.custom-category-title {
  font-size: 42px;
  font-weight: 800;
  color: #080449;
  margin: 10px 0;
}

.custom-category-icon {
  font-size: 32px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 5px 10px;
}

.custom-category-body {
  padding-top: 40px;
  padding-bottom: 40px;
}

.custom-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.custom-section-column {
  display: flex;
  flex-direction: column;
}

.custom-section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.custom-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-article-item {
  background-color: #F8F9FA;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-article-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.custom-article-item a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

.custom-no-content {
  text-align: center;
  font-size: 18px;
  color: #777;
  padding: 50px 0;
}

/* --- INÍCIO: AJUSTES DE RESPONSIVIDADE PARA ON-DEMAND --- */

/* Container principal da página para melhor controle */
.on-demand-page-container {
  width: 100%;
  max-width: 1200px; /* Limita a largura máxima em telas grandes */
  margin: 0 auto; /* Centraliza o container */
  padding: 0 15px; /* Adiciona um respiro nas laterais */
  box-sizing: border-box;
}

/* Telas de tablets e dispositivos menores (até 992px) */
@media (max-width: 992px) {
  /* Cabeçalho */
  .total-head-on-demand {
    flex-direction: column; /* Coloca o texto sobre a imagem */
    height: auto;
    padding: 40px 20px;
    text-align: center;
  }
  
  .banner-b2b-on-demand-modelo {
    display: none; /* Oculta a imagem da mulher para ganhar espaço */
  }

  .text-content {
    padding-right: 0;
    max-width: 100%;
  }

  .text-content h1 {
    font-size: 2rem; /* Reduz a fonte do título */
  }

  /* Botões abaixo do cabeçalho */
  .box1-box2-on-demand {
    flex-direction: column; /* Empilha os botões verticalmente */
    align-items: center; /* Centraliza os botões empilhados */
    width: 100%;
  }

  .container-geral-footer-solicitacao-ajuda-on-demand {
    width: 100%;
    max-width: 350px; /* Define uma largura máxima para os botões */
    margin-bottom: 15px;
  }
  
  .botao-solicitacao-footer-on-demand,
  .indisponibilidade2-on-demand a {
      width: 100%;
      margin-right: 0;
  }

  .indisponibilidade2-on-demand {
    width: 100%;
    max-width: 350px;
    margin-top: 0;
  }

  /* Grid de botões principal */
  .container-new-layout {
    grid-template-columns: repeat(2, 1fr); /* Muda o grid para 2 colunas */
  }
}

/* Telas de celulares (até 768px) */
@media (max-width: 768px) {
  /* Seção de aviso */
  .container-contact-aviso-on-demand {
    flex-direction: column; /* Empilha o ícone e o texto */
    text-align: center;
    padding: 20px;
  }
  
  .aviso-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .pergunta-duvida-footer-aviso-on-demand br {
      display: none; /* Remove quebras de linha forçadas */
  }
  
  .pergunta-duvida-footer-aviso-on-demand {
    font-size: 14px;
  }

  /* Grid de botões principal */
  .container-new-layout {
    grid-template-columns: 1fr; /* Muda o grid para 1 coluna */
  }

  .new-button {
    min-height: auto; /* Altura automática para os botões */
    padding: 25px;
  }
}

/* Telas muito pequenas (até 480px) */
@media (max-width: 480px) {
  .text-content h1 {
    font-size: 1.8rem; /* Reduz ainda mais a fonte do título */
  }

  .text-content p {
    font-size: 1rem; /* Ajusta o tamanho do parágrafo */
  }

  .botao-solicitacao-footer-on-demand,
  .indisponibilidade2-on-demand a {
      font-size: 14px; /* Reduz a fonte dos botões */
  }
}

/* --- FIM: AJUSTES DE RESPONSIVIDADE PARA ON-DEMAND --- */

/* --- INÍCIO: AJUSTES DE RESPONSIVIDADE PARA O HEADER --- */

.site-header {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.header-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  min-height: 80px;
}

.all-links {
  display: flex;
  align-items: center;
  gap: 15px; /* Espaçamento entre os links */
}

.link-item {
  display: flex;
  align-items: center;
}

/* Garantir que o dropdown de idioma seja visível */
.link-item .dropdown {
  display: flex;
  align-items: center;
}

/* Esconde o menu de usuário mobile no desktop */
.user-options-mobile {
    display: none;
}

/* Dropdown de usuário no desktop */
.user-info-desktop {
    position: relative;
}

.user-options-desktop {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none;
    padding: 10px 0;
    border-radius: 4px;
}

.user-info-desktop:hover .user-options-desktop {
    display: block;
}

.user-options-desktop li {
    padding: 8px 16px;
}

.user-options-desktop a {
    color: black;
    text-decoration: none;
    display: block;
}

.user-options-desktop a:hover {
    background-color: #f1f1f1;
}


/* --- Estilos do Menu Hambúrguer --- */

.mobile-nav-toggle {
  display: none; /* Escondido no desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001; /* Garante que fique acima de outros elementos */
}

.hamburger-icon {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #333;
  position: relative;
  transition: background-color 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #333;
  left: 0;
  transition: transform 0.3s ease;
}

.hamburger-icon::before {
  top: -8px;
}

.hamburger-icon::after {
  bottom: -8px;
}

/* Animação do ícone para "X" */
.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Media Query para telas menores (Tablets e Celulares) --- */

@media (max-width: 992px) {
  .header-total {
    position: relative;
  }

  .mobile-nav-toggle {
    display: block; /* Mostra o botão hambúrguer */
  }

  .main-nav {
    display: none; /* Esconde o menu por padrão */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .main-nav.nav-visible {
    display: block !important; /* Força a exibição do menu */
  }

  .all-links {
    flex-direction: column; /* Empilha os links verticalmente */
    align-items: flex-start;
    padding: 20px;
    gap: 0;
  }
  
  .link-item {
      width: 100%;
      border-bottom: 1px solid #f0f0f0;
  }
  
  .link-item:last-child {
      border-bottom: none;
  }
  
  .bottom-header, #dropdownButton {
      padding: 15px 10px;
      width: 100%;
      text-align: left;
      font-size: 18px; /* Aumentando o tamanho da fonte */
  }
  
  #botao-entrar-header {
      border: none;
      padding: 15px 10px;
      background-color: transparent;
  }

  /* Esconde o dropdown de usuário do desktop e mostra a lista mobile */
  .user-info-desktop {
      display: none;
  }
  .user-options-mobile {
      display: block;
      list-style: none;
      padding: 0;
      width: 100%;
  }
  .user-options-mobile li {
      padding: 15px 10px;
      border-bottom: 1px solid #f0f0f0;
  }
   .user-options-mobile li:last-child {
       border-bottom: none;
   }
   .user-options-mobile a {
      text-decoration: none;
      color: #333;
      font-size: 18px; /* Aumentando o tamanho da fonte */
   }

  /* Ajustes dropdown de idioma */
  .dropdown {
      width: 100%;
  }
  #dropdownButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
  }
  .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      background-color: #f9f9f9;
      z-index: 1000;
  }
}

/* --- FIM: AJUSTES DE RESPONSIVIDADE PARA O HEADER --- */

/* CONTEÚDO COMPLETO DO SEU CSS ATÉ A PARTE DOS BOTÕES... */
/* Cole todo o seu CSS original aqui, até a seção que começa com "Estilos para o novo layout da homepage" */

/* ... (seu CSS original) ... */

/* A partir daqui, as regras foram revisadas */

/* Estilos para o novo layout da homepage */

.container-contact-aviso-on-demand {
  width: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;  
  background: #ead1ff;
  padding: 20px;
  max-width: 1200px;
  box-sizing: border-box;
  margin: 20px auto 0; /* Centraliza o container de aviso */
}

.aviso-icon {
  margin-right: 20px;
}

.aviso-icon img {
  width: 120px; 
}

.geral-pergunta-e-box-on-demand .link-aviso {
  text-decoration: none;
}

.pergunta-duvida-footer-aviso-on-demand strong {
  color: #333;
  font-size: 16px;
}

/* REGRA REMOVIDA: .outer-container foi removido do CSS */

/* --- CORREÇÃO APLICADA AQUI --- */
.container-new-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  /* Adiciona margem superior e centraliza o grid horizontalmente */
  margin: 40px auto 0; 
  /* Centraliza os botões dentro de suas células de grid */
  justify-items: center; 
}

.new-button {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  text-decoration: none;
  color: #333;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  /* Garante que o botão use a largura disponível na sua célula */
  width: 100%; 
}

.new-button:nth-child(4) {
  /* No desktop, o quarto botão começa na primeira coluna da segunda linha */
  grid-column: 1 / 2;
}

.new-button:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.new-button h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #240d6b;
}

.new-button p {
  font-size: 16px;
  margin: 0;
  flex-grow: 1;
}

.new-button .icon-placeholder {
  text-align: left;
  margin-top: 20px;
}

.new-button .icon-placeholder img {
  width: 40px;
  height: 40px;
}


/* Media Queries para responsividade */
@media (max-width: 992px) {
  .container-new-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  .new-button:nth-child(4) {
    grid-column: auto; /* Reseta a regra da coluna para se ajustar ao grid de 2 */
  }
}

@media (max-width: 768px) {
  .container-new-layout {
    grid-template-columns: 1fr; /* Grid de 1 coluna */
  }
  .new-button {
    /* Define uma largura máxima para os botões em telas pequenas para não ficarem largos demais */
    max-width: 400px; 
  }
  .container-contact-aviso-on-demand {
    flex-direction: column;
    text-align: center;
  }
  .aviso-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* ... Restante do seu CSS ... */

/* --- INÍCIO: AJUSTES DE RESPONSIVIDADE PARA ON-DEMAND --- */
/* (Esta seção pode ser mesclada com as media queries acima ou mantida se tiver outras regras) */

/* Telas de tablets e dispositivos menores (até 992px) */
@media (max-width: 992px) {
  .total-head-on-demand {
    flex-direction: column;
    height: auto;
    padding: 40px 20px;
    text-align: center;
  }
  
  .image-content { /* Esconde a imagem da modelo em telas menores */
    display: none; 
  }

  .text-content {
    padding-right: 0;
    max-width: 100%;
  }

  .text-content h1 {
    font-size: 2rem;
  }

  .box1-box2-on-demand {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .container-geral-footer-solicitacao-ajuda-on-demand {
    width: 100%;
    max-width: 350px;
    margin-bottom: 15px;
  }
  
  .botao-solicitacao-footer-on-demand,
  .indisponibilidade2-on-demand a {
      width: 100%;
      margin-right: 0;
  }

  .indisponibilidade2-on-demand {
    width: 100%;
    max-width: 350px;
    margin-top: 0;
  }
}

/* Telas de celulares (até 768px) */
@media (max-width: 768px) {
  .pergunta-duvida-footer-aviso-on-demand br {
      display: none;
  }
  
  .pergunta-duvida-footer-aviso-on-demand {
    font-size: 14px;
  }

  .new-button {
    min-height: auto;
    padding: 25px;
  }
}

/* Telas muito pequenas (até 480px) */
@media (max-width: 480px) {
  .text-content h1 {
    font-size: 1.8rem;
  }

  .text-content p {
    font-size: 1rem;
  }

  .botao-solicitacao-footer-on-demand,
  .indisponibilidade2-on-demand a {
      font-size: 14px;
  }
}

/* --- FIM: AJUSTES DE RESPONSIVIDADE PARA ON-DEMAND --- */

/* --- INÍCIO: CORREÇÕES ADICIONAIS DE RESPONSIVIDADE --- */

/* 1. Correção do Header (Menu sobrepondo o conteúdo) */

/* Garante que o header tenha um contexto de empilhamento e fique acima dos outros elementos */
.site-header {
  position: relative; /* Necessário para o z-index funcionar */
  z-index: 1000;      /* Um valor alto para garantir que fique no topo */
  background-color: #fff; /* Fundo branco para não ficar transparente sobre o conteúdo */
}

/* Garante que o menu aberto (em telas pequenas) também tenha fundo sólido */
@media (max-width: 992px) {
  .main-nav {
    background-color: #fff;
  }
}


/* 2. Correção do alinhamento dos 4 botões principais */

/* Assegura que o container que segura o grid de botões esteja centralizado */
.outer-container {
  display: flex;
  justify-content: center; /* Centraliza o conteúdo (o grid) horizontalmente */
  width: 100%;
  margin-top: 20px;
}

/* --- FIM: CORREÇÕES ADICIONAIS DE RESPONSIVIDADE --- */

/* --- INÍCIO: AJUSTES DE RESPONSIVIDADE PARA A HOME PAGE --- */

/* Novo container de grid para os produtos */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  padding: 0 15px;
  box-sizing: border-box;
}

.square-link {
  text-decoration: none;
}

/* Telas de notebooks e tablets maiores */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Telas de tablets */
@media (max-width: 992px) {
  /* Ajustes no Banner Principal (Hero) */
  .total-head {
    padding: 20px;
  }
  .question-head {
    font-size: 24px;
  }
  .text-head {
    font-size: 14px;
    padding: 0 10px;
  }
  
  /* Ajustes no Grid de Produtos - REMOVIDO POIS AGORA USA FLEXBOX GLOBAL */
  /* .product-grid rules removed to avoid conflict with new flexbox rules */
  
  .square-other, .square-other-cloudone {
    height: 120px;
  }
}

/* Telas de celulares */
@media (max-width: 768px) {
  .total-head {
    padding-bottom: 30px;
  }
  .total-text-head {
    /* Remove a restrição de largura para ocupar o espaço disponível */
    max-width: 100%; 
  }

  /* Grid de Produtos - REMOVIDO POIS AGORA USA FLEXBOX GLOBAL */
  /* .product-grid rules removed to avoid conflict with new flexbox rules */

  .square-other, .square-other-cloudone {
    height: 130px; /* Aumenta um pouco a altura na vertical */
  }
  /* Apenas Safe App: Ajuste simplificado para padronização */
  .product-grid .square-link--safe .sub-square {
    overflow: hidden; /* Voltando ao padrão para evitar quebras */
  }
  .product-grid .sub-square .img-logo-safe {
    height: auto !important;
    width: 85% !important; /* Tamanho similar aos outros ícones (check é 85%, doc é 80%) */
    object-fit: contain;
    transform: none; /* Removendo a escala forçada */
    margin: 0 auto;
  }

  /* Ajuste para Unico IDCloud (img-logo) que estava ficando pequeno (70%) */
  .product-grid .sub-square .img-logo {
    width: 85% !important; /* Forçando largura maior no mobile para igualar aos demais */
  }

  /* Ajustes no Banner de Aviso */
  .container-contact-aviso {
    width: 90%;
    padding: 15px;
    text-align: center;
  }
  .pergunta-duvida-footer-aviso strong {
    font-size: 14px;
  }
}


/* --- FIM: AJUSTES DE RESPONSIVIDADE PARA A HOME PAGE --- */

/* ===== RESPONSIVIDADE DO POPUP ===== */

/* Tablets (768px - 1024px) */

/* Container principal do componente de votação */
.article-votes {
  margin: 1.5rem 0;
  padding: 1rem;
  border-top: 2px solid #e5e7eb;
  border-bottom: 2px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 8px;
}

/* Título/Questão */
.article-votes-question {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
}

/* Container dos botões de controle */
.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Estilos base para os botões de voto */
.article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 100px;
  text-decoration: none;
}

.article-vote:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.article-vote:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.article-vote:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Botão de voto positivo (útil) */
.article-vote-up {
  color: #059669;
}

.article-vote-up:hover {
  background-color: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}

.article-vote-up::before {
  content: "👍";
  font-size: 1.125rem;
}

/* Botão de voto negativo (não útil) */
.article-vote-down {
  color: #dc2626;
}

.article-vote-down:hover {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
}

.article-vote-down::before {
  content: "👎";
  font-size: 1.125rem;
}

/* Estado selecionado (quando o usuário já votou) */
.article-vote.button-primary,
.article-vote.selected {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
}

.article-vote-up.button-primary,
.article-vote-up.selected {
  background-color: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.article-vote-down.button-primary,
.article-vote-down.selected {
  background-color: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.article-vote.selected:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Botão desabilitado após votação */
.article-vote:disabled,
.article-vote.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Contador de votos */
.article-votes-count {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

.article-vote-label {
  color: inherit;
}

/* Mensagem de agradecimento */
.article-votes-feedback {
  display: none;
  text-align: center;
  padding: 0.75rem;
  margin-top: 0.75rem;
  background-color: #ecfdf5;
  border: 1px solid #10b981;
  border-radius: 6px;
  color: #065f46;
  font-size: 0.875rem;
  animation: fadeIn 0.3s ease-in;
}

.article-votes-feedback.show {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade - mantendo os mesmos estilos para todos os tamanhos de tela */

/* Acessibilidade - modo de alto contraste */
@media (prefers-contrast: high) {
  .article-vote {
    border-width: 3px;
  }
  
  .article-vote:focus {
    outline-width: 3px;
  }
}

/* Animações suaves para mudanças de estado */
.article-votes {
  transition: background-color 0.2s ease-in-out;
}

.article-vote {
  position: relative;
  overflow: hidden;
}

/* Efeito de ripple ao clicar */
.article-vote::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.article-vote:active::after {
  width: 300px;
  height: 300px;
}



/* ==========================================================================
   VISIBILITY CONTROL BY LANGUAGE
   ========================================================================== */

/* Default: Hide EN-US specific layout elements */
.layout-en-us {
    display: none !important;
}

/* Default: Show PT-BR specific layout elements (assuming it's the default for others too) */
.layout-pt-br {
    display: block !important;
}

/* If language is English (US) */
.layout-en-us {
    display: block !important;
}

.layout-pt-br {
    display: none !important;
}

/* ==========================================================================
   NEW DESIGN OVERRIDES (ONLY APPLIED WHEN html[lang*="en"])
   ========================================================================== */

/* Wrap all new styles under to ensure they don't leak to pt-br layout if classes clash,
   although unique class names are preferred. The styles below are from the previous iteration. */

body {
    /* Reset margins/padding for the new layout specifically if needed */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* NEW HEADER STYLES */
/* Mobile Overflow Fix */
@media (max-width: 768px) {
    .hero-section,
    .product-section,
    .cta-section,
    .footer-new {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        left: 0;
        right: 0;
    }
    
    .header-new {
        padding: 20px; /* Reduz padding lateral no mobile */
    }
}
.header-new {
    background: #fff;
    padding: 20px 40px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.header-new .logo-unico {
    height: 30px; 
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-new .nav-link, .header-new .bottom-header {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    text-decoration: none;
}

.header-new .nav-link:hover, .header-new .bottom-header:hover {
    color: #ec008c; 
}

.lang-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #555;
}

/* NEW HERO SECTION */
.hero-section {
    background-color: #fafafa; 
    padding: 100px 20px 60px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Force full width breakout */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-section .container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.hero-title {
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 16px;
    color: #000;
}

.hero-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
}

.search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    display: flex;
    gap: 10px;
}

.search-form {
    display: flex;
    width: 100%;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-form input {
    flex: 1;
    border: none;
    padding: 15px;
    font-size: 16px;
    outline: none;
}

.search-button {
    background-color: #222;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.search-button:hover {
    background-color: #000;
}

/* NEW PRODUCT SECTION */
.product-section {
    padding: 60px 20px;
    background-color: #fff; 
    display: flex;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Force full width breakout */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.product-section .container {
    max-width: 1600px;
    width: 100%;
    display: flex;
    justify-content: center; /* Centraliza o container interno */
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Ajuste para os cards dentro do flexbox */
.square-link {
    flex: 0 1 calc(25% - 24px); /* 4 por linha (aprox) */
    min-width: 260px; /* Largura mínima para quebra */
    max-width: 300px;
    display: flex;
    justify-content: center;
}

/* Garante que o conteúdo ocupe toda a largura do card (evita card Unico IDCloud ficar menor) */
.product-grid .square-link .square-other {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

/* Unico IDCloud: mesmo tamanho dos outros cards (não o Cloud One) */
.product-grid .square-link-idcloud {
    flex: 0 1 calc(25% - 24px);
    min-width: 260px;
    max-width: 300px;
}

/* Ajuste para telas menores que 1200px */
@media (max-width: 1200px) {
    .square-link,
    .square-link-idcloud {
        flex: 0 1 calc(33.333% - 24px); /* 3 por linha */
    }
}

/* Ajuste para tablets */
@media (max-width: 992px) {
    .square-link,
    .square-link-idcloud {
        flex: 0 1 calc(50% - 24px); /* 2 por linha */
    }
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .square-link,
    .square-link-idcloud {
        flex: 0 1 100%; /* 1 por linha */
        max-width: 320px;
    }
}

.product-card {
    border-radius: 12px;
    padding: 60px 40px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 280px; 
    max-width: 320px;
    aspect-ratio: 4 / 3;
    border: 1px solid #eee;
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 15px 35px rgba(0, 110, 255, 0.15); 
    transform: translateY(-5px);
    border-color: transparent; 
}

.product-logo-img {
    height: 40px;
    max-width: 220px;
    width: auto;
    margin-bottom: 10px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

.product-name {
    font-size: 24px;
    color: #333;
}

/* NEW CTA SECTION */
.cta-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFF0F5 100%); 
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Force full width breakout */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.cta-section .container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

.cta-title {
    font-size: 28px;
    margin-bottom: 50px;
    font-weight: 500;
}

.cta-buttons-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.cta-button {
    background-color: #1a1a1a;
    color: #fff;
    padding: 18px 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    min-width: 220px;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #000;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 110, 255, 0.25); 
    transform: translateY(-3px);
}

/* NEW FOOTER STYLES */
.footer-new {
    background-color: #fafafa;
    padding: 60px 40px;
    font-size: 14px;
    color: #666;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Force full width breakout */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

.container-footer {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-new .footer-logo img {
    height: 25px;
    margin-bottom: 15px;
}

.footer-right {
    display: flex;
    gap: 60px;
}

.footer-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 20px;
    font-weight: bold;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list a {
    font-weight: normal;
}

.footer-links-list a:hover {
    text-decoration: underline;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    font-size: 20px;
    color: #333;
}

/* --- TOPO CINZA TOTAL --- */
.contato-hero-clean {
    background-color: #f8f8f8 !important; /* Cor padrão solicitada */
    width: 100% !important;
    padding: 60px 20px;
    border: none !important;
}

.contato-container {
    max-width: 1100px;
    margin: 0 auto;
}

.contato-container h1 {
    color: #111827 !important;
    font-size: 36px !important;
    font-weight: 300 !important;
}

/* Barra de busca alinhada */
.contato-search-bar form {
    display: flex !important;
    max-width: 800px;
    margin-top: 30px;
    gap: 15px;
}

.contato-search-bar input[type="search"] {
    flex: 1 !important;
    height: 50px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
}

.contato-search-bar input[type="submit"] {
    background-color: #1a1a1a !important;
    color: #fff !important;
    padding: 0 30px !important;
    border-radius: 6px !important;
    box-shadow: 10px 10px 20px rgba(45, 50, 119, 0.2) !important;
}

/* --- CONTEÚDO EM DUAS COLUNAS --- */
.contato-content-area {
    padding: 60px 20px;
    background-color: #ffffff;
}

.contato-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide a tela ao meio */
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.contato-title {
    font-size: 22px;
    color: #1e2256;
    margin-bottom: 20px;
    font-weight: 400;
}

/* Controle do tamanho do Alerta (evita o erro do vídeo) */
.contato-alert {
    display: flex;
    gap: 15px;
    border: 1px solid #fca5a5;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 25px;
}

.contato-alert img {
    width: 32px !important; /* Tamanho fixo para não estourar */
    height: 32px !important;
}

/* Grid de horários */
.contato-hours-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
}

.hour-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* Botões pretos padronizados */
.btn-black {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(45, 50, 119, 0.1) !important;
}

.btn-img {
    width: 18px;
    margin-right: 10px;
    filter: brightness(0) invert(1);
}

.contato-footer-link {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
}
/* --- BOTÕES DE CONTATO COM GLOW AZUL E LILÁS --- */

.btn-black {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 400;
    margin-bottom: 15px;
    /* Sombra degradê solicitada: azul e lilás */
    box-shadow: 
        8px 8px 20px rgba(45, 50, 119, 0.3),  /* Azul */
        -4px -4px 15px rgba(166, 62, 90, 0.2) !important; /* Lilás */
    transition: all 0.3s ease;
}

.btn-black:hover {
    transform: translateY(-3px);
    box-shadow: 
        10px 10px 25px rgba(45, 50, 119, 0.4), 
        -5px -5px 20px rgba(166, 62, 90, 0.3) !important;
}

/* Ajuste dos ícones dentro dos botões */
.btn-img {
    width: 20px !important;  /* Tamanho pequeno e fixo */
    height: 20px !important;
    margin-right: 12px;
    filter: brightness(0) invert(1) !important; /* Força os ícones a ficarem totalmente brancos */
    object-fit: contain;
}

/* --- AJUSTE NA BARRA DE BUSCA (TAMBÉM COM GLOW) --- */

.contato-search-bar input[type="submit"] {
    background-color: #1a1a1a !important;
    color: #fff !important;
    padding: 0 35px !important;
    border-radius: 8px !important;
    height: 50px !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 8px 8px 20px rgba(45, 50, 119, 0.25) !important;
}
.contato-title, 
.contato-section-title {
    color: #1e2256 !important;
    font-size: 24px !important;
    font-weight: 500 !important; /* Este é o meio-termo elegante */
    margin-bottom: 20px;
}

/* Popup de Feedback */
.feedback-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9990;
  display: none !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.feedback-overlay.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.feedback-popup {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0066CC 0%, #6B46C1 50%, #EC4899 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 9991;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.feedback-popup.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 500px;
  width: 90%;
  padding: 0;
  overflow: hidden;
  animation: slideUpFeedback 0.3s ease-out;
}

@keyframes slideUpFeedback {
  from {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.close-feedback-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}

.close-feedback-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.close-feedback-btn:active {
  transform: scale(0.95);
}

.feedback-content {
  padding: 30px 25px 25px 25px;
  text-align: center;
  color: white;
}

.feedback-title {
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}

.feedback-text {
  margin: 0 0 25px 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.feedback-button {
  display: inline-block;
  background: white;
  color: #0066CC;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
}

.feedback-button:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  color: #0052a3;
}

.feedback-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsividade do Popup de Feedback */
@media (max-width: 768px) {
  .feedback-popup {
    bottom: 20px;
    max-width: 90%;
    width: calc(100% - 40px);
  }
  
  .feedback-content {
    padding: 25px 20px 20px 20px;
  }
  
  .feedback-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .feedback-text {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .feedback-button {
    padding: 12px 28px;
    font-size: 15px;
  }
  
  .close-feedback-btn {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .feedback-popup {
    bottom: 15px;
    width: calc(100% - 30px);
    border-radius: 12px;
  }
  
  .feedback-content {
    padding: 20px 15px 15px 15px;
  }
  
  .feedback-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .feedback-text {
    font-size: 13px;
    margin-bottom: 18px;
  }
  
  .feedback-button {
    padding: 10px 24px;
    font-size: 14px;
    width: 100%;
    max-width: 200px;
  }
}

/* 1. ESCONDER HEADER E FOOTER ORIGINAIS (FORÇADO) */
.home-page header, 
.home-page .header, 
.home-page footer, 
.home-page .footer,
.home-page #header {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* 2. ESTRUTURA DO GATEWAY */
#gateway-root {
    position: fixed; /* Ocupa a tela toda sobrepondo tudo */
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
}

.gateway-bg {
    position: absolute;
    top: 0; right: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.gateway-container {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    justify-content: space-between;
    align-items: flex-start;
}

/* 3. LISTA E TEXTOS (GARANTIR VISIBILIDADE) */
.gateway-content { flex: 1; max-width: 550px; }
.gateway-logo-img { height: 32px; margin-bottom: 30px; display: block; }
.gateway-main-title { font-size: 46px; color: #111827 !important; font-weight: 800; margin-bottom: 20px; line-height: 1.1; }
.gateway-main-subtitle { font-size: 18px; color: #374151 !important; margin-bottom: 40px; }

.gateway-feature-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: block !important; }
.gateway-feature-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    color: #111827 !important;
    font-weight: 600 !important;
}
.gateway-icon { width: 24px !important; height: 24px !important; display: inline-block !important; }

/* 4. CARD E DROPDOWN */
.gateway-action { flex: 1; display: flex; justify-content: flex-end; }
.gateway-card {
    background: #ffffff; padding: 40px; border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    width: 100%; max-width: 380px; border: 1px solid #F3F4F6;
}
.gateway-label { font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; margin-bottom: 12px; display: block; }

.gateway-select { position: relative; }
.gateway-trigger {
    padding: 16px 20px; border: 1px solid #D1D5DB; border-radius: 12px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: #fff; font-weight: 500; color: #111827;
}
.gateway-caret { width: 8px; height: 8px; border-right: 2px solid #9CA3AF; border-bottom: 2px solid #9CA3AF; transform: rotate(45deg); transition: 0.3s; }

.gateway-options-menu {
    position: absolute; top: 110%; left: 0; right: 0;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none; z-index: 100; border: 1px solid #E5E7EB;
}
.gateway-opt { padding: 14px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.gateway-opt:hover { background: #F9FAFB; }
.gateway-opt img { width: 22px; height: 22px; border-radius: 50%; }

/* Mobile */
@media (max-width: 768px) {
    .gateway-container { flex-direction: column; align-items: center; text-align: center; }
    .gateway-action { margin-top: 40px; width: 100%; justify-content: center; }
}

/* RESET E OCULTAÇÃO DO HEADER */
.home-page header, .home-page footer, .home-page .header { display: none !important; }

#gateway-root {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100vh;
  background: #fff; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
}

/* FUNDO COM 90% DE COR (0.9) */
.gateway-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; 
  background-position: center;
  opacity: 0.9 !important; /* Cor quase original */
  z-index: 1;
  pointer-events: none;
}

.gateway-container { 
  position: relative; z-index: 2; width: 100%; 
  max-width: 1200px; padding: 40px 20px; 
}

.gateway-content-wrapper { 
  display: flex; align-items: center; justify-content: space-between; gap: 40px; 
}

/* TEXTOS */
.gateway-text-side { flex: 1; max-width: 550px; text-align: left; }
.gateway-logo { height: 32px; margin-bottom: 24px; }
.gateway-title { font-size: 38px; color: #111827; font-weight: 800; margin-bottom: 15px; }
.gateway-subtitle { font-size: 16px; color: #4B5563; margin-bottom: 30px; }

.gateway-benefits { list-style: none; padding: 0; }
.gateway-benefits li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; font-size: 14px; }
.check-icon { width: 20px; margin-top: 3px; }

/* CARDS FIXOS SEM BORDA E COM GLOW AZUL */
.gateway-cards-side { flex: 1; display: flex; justify-content: flex-end; }
.cards-flex-container { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.country-fixed-card {
  background: #FFFFFF;
  width: 155px;
  height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  text-decoration: none !important;
  border: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.country-fixed-card img { width: 48px; height: 48px; margin-bottom: 12px; }
.country-name { color: #111827; font-weight: 700; font-size: 15px; }

.country-fixed-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(108, 51, 241, 0.3); /* Efeito Glow Azul */
}

/* MOBILE RESPONSIVO */
@media (max-width: 991px) {
  #gateway-root { align-items: flex-start; padding-top: 30px; }
  .gateway-content-wrapper { flex-direction: column; text-align: center; gap: 20px; }
  .gateway-text-side { max-width: 100%; text-align: center; }
  .gateway-logo { margin: 0 auto 20px; }
  .gateway-benefits li { text-align: left; }
  .gateway-cards-side { justify-content: center; width: 100%; }
}

@media (max-width: 480px) {
  .cards-flex-container { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }
  .country-fixed-card { width: 100%; height: 130px; }
  .country-fixed-card:last-child { grid-column: span 2; width: 50%; margin: 0 auto; }
}
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;600;700&display=swap');

#gateway-root {
  background-color: #1F1D1A !important;
  font-family: 'Geist', sans-serif !important;
  position: fixed; 
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gateway-container {
  width: 100%;
  max-width: 1300px;
  padding: 0 40px;
}

.gateway-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

/* --- LOGO SEM DISTORÇÃO --- */
.gateway-text-side {
  flex: 0 0 45%; /* Define largura fixa para o lado do texto */
}

.gateway-logo {
  width: 240px !important;
  height: auto !important; /* Impede a distorção */
  object-fit: contain;
  margin-bottom: 30px;
}

.gateway-title {
  color: #FFFFFF !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}

.gateway-subtitle {
  color: #A1A1AA !important;
  font-size: 18px !important;
  margin-bottom: 30px !important;
}

.gateway-benefits {
  list-style: none !important;
  padding: 0 !important;
}

.gateway-benefits li {
  display: flex !important;
  color: #FFFFFF !important;
  margin-bottom: 15px !important;
  font-size: 15px;
}

.check-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px;
  filter: brightness(0) invert(1);
}

/* --- CARDS: 3 COLUNAS ALINHADAS --- */
.gateway-cards-side {
  flex: 0 0 50%;
}

.cards-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important; /* FORÇA 3 COLUNAS LADO A LADO */
  gap: 12px;
}

.country-fixed-card {
  background-color: #EFEDE6 !important;
  border-radius: 8px !important;
  padding: 30px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  transition: all 0.3s ease;
  min-width: 140px; /* Garante que o card não esmague */
}

.country-fixed-card:hover {
  background-color: #FFFFFF !important;
  transform: translateY(-5px);
}

.country-fixed-card img {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 15px;
}

.country-name {
  color: #1F1D1A !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center;
}

/* Ajuste para telas menores */
@media (max-width: 1100px) {
  .gateway-content-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .gateway-text-side { margin-bottom: 40px; }
  .gateway-logo { margin: 0 auto 30px; }
}

/* --- CORREÇÃO FINAL: ALINHAMENTO À ESQUERDA DOS BENEFÍCIOS --- */

.gateway-text-side {
  flex: 0 0 45%;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Força o alinhamento de tudo dentro deste bloco à esquerda */
}

.gateway-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important; /* Mudado de flex para block para evitar centralização indesejada */
  width: 100% !important;
  text-align: left !important;
}

.gateway-benefits li {
  display: flex !important;
  justify-content: flex-start !important; /* Alinha o conteúdo interno (ícone + texto) no início */
  align-items: flex-start !important; 
  text-align: left !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
  font-size: 16px !important;
  width: 100% !important;
}

.check-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 15px !important;
  margin-top: 3px !important;
  filter: brightness(0) invert(1) !important;
  flex-shrink: 0 !important; /* Impede o ícone de ser esmagado */
}

.benefit-highlight {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* --- MANTENDO CARDS E FUNDO IGUAIS --- */
.gateway-cards-side {
  flex: 0 0 50%;
}

.cards-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px;
}
/* Container Principal Dark */
.contact-page-dark {
  background-color: #1F1D1A !important;
  color: #FFFFFF !important;
  font-family: 'Geist', sans-serif !important;
  min-height: 100vh;
  padding: 80px 20px;
}

.txt-banner-contato {
  font-size: 48px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-align: center;
  margin-bottom: 15px;
}

.sub-txt-banner-contato {
  font-size: 19px !important;
  color: #A1A1AA !important;
  text-align: center;
  margin-bottom: 60px;
}

/* Seção de Horários */
.service-hours {
  max-width: 800px;
  margin: 0 auto 40px auto;
  border-bottom: 1px solid #333;
  padding-bottom: 30px;
}

.service-title {
  color: #FFFFFF !important;
  font-size: 22px !important;
  margin-bottom: 20px;
}

.hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  color: #A1A1AA;
}

.letra-cor { color: #FF3366 !important; }

/* Alerta de Disponibilidade */
.contact-warning-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #333;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto 50px auto;
  border-radius: 8px;
}

.text-alert-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.alert-icon-small {
  width: 24px;
  height: 24px;
}

/* BOTÕES ESTILO BLOCO PRETO */
.contact-channels-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}

.contact-button-block {
  display: flex;
  align-items: center;
  background-color: #1F1D1A !important;
  border: 1px solid #333 !important;
  padding: 25px 30px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.contact-button-block:hover {
  background-color: #262421 !important;
  border-color: #FF3366 !important;
}

.icon-contact {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  color: #FFFFFF;
  font-size: 24px;
  display: flex;
  align-items: center;
}

.button-text {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .hours-grid { grid-template-columns: 1fr; gap: 20px; }
  .txt-banner-contato { font-size: 32px !important; }
}
/* CONTAINER GERAL - FUNDO BRANCO E ESPAÇO REDUZIDO */
.contact-wrapper-minimal {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  font-family: 'Geist', sans-serif;
  padding: 20px 0; /* Espaço reduzido entre Header e Footer */
  display: flex;
  justify-content: center;
}

.main-content-layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: 1000px;
  width: 100%;
  margin-top: 20px; /* Aproxima do topo */
}

/* LADO ESQUERDO - TEXTO PRETO */
.hours-column {
  flex: 1;
}

.hours-title-black {
  color: #000000 !important;
  font-weight: 800 !important; /* Bem negrito como na imagem */
  font-size: 34px !important;
  margin-bottom: 20px;
}

.hours-text p {
  font-size: 17px;
  margin: 2px 0;
  color: #1F1D1A;
}

.beige-info-card {
  background-color: #EFEDE6;
  border: 1px solid #E5E2D9;
  color: #1F1D1A;
  padding: 20px;
  border-radius: 12px;
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.4;
  max-width: 380px;
}

/* CARD DIREITO - PRETO TOTAL */
.black-contact-card {
  background-color: #000000 !important;
  padding: 35px;
  border-radius: 16px;
  flex: 1;
  max-width: 440px;
}

.card-headline {
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 25px;
}

/* ALERTA DENTRO DO CARD PRETO */
.alert-beige-box {
  background-color: #EFEDE6;
  color: #000000;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.alert-inner span {
  display: block;
  font-size: 13px;
}

.alert-inner a {
  color: #000000;
  font-weight: 700;
  text-decoration: underline;
}

/* BOTÕES BRANCOS */
.action-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.white-action-btn {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s;
}

.white-action-btn:hover {
  background-color: #F4F4F5 !important;
}

.white-action-btn i {
  margin-right: 12px;
  font-size: 18px;
}
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;600;700&display=swap');

#gateway-root {
  background-color: #1F1D1A !important; /* COR DE FUNDO UNICO (PRETO) */
  font-family: 'Geist', sans-serif !important;
  
  /* FAZ O FUNDO PRETO OCUPAR TODA A TELA */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;  /* Toda a largura visível */
  height: 100vh !important; /* Toda a altura visível */
  z-index: 99999 !important;
  
  /* ALINHAMENTO CENTRAL */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important; /* Permite rolagem se a tela for pequena */
}

.gateway-container {
  width: 100%;
  max-width: 1300px;
  padding: 0 40px;
}

.gateway-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

/* --- LADO DO TEXTO E LOGO --- */
.gateway-text-side {
  flex: 0 0 45%;
}

.gateway-logo {
  /* CORREÇÃO DO LOGO DISTORCIDO */
  width: 240px !important;  /* Ajuste a largura como preferir */
  height: auto !important;   /* Mantém a proporção original */
  object-fit: contain !important; /* Garante que o logo caiba sem cortar */
  
  display: block;
  margin-bottom: 30px;
}

.gateway-title {
  color: #FFFFFF !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}

.gateway-subtitle {
  color: #A1A1AA !important; /* Cor cinza mais suave */
  font-size: 18px !important;
  margin-bottom: 30px !important;
}

/* --- BULLETS DE VANTAGENS --- */
.gateway-benefits {
  list-style: none !important;
  padding: 0 !important;
}

.gateway-benefits li {
  display: flex !important;
  align-items: center !important;
  color: #FFFFFF !important;
  margin-bottom: 15px !important;
  font-size: 15px;
}

.check-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px;
  filter: brightness(0) invert(1); /* Torna o ícone branco */
}

/* --- CARDS DE PAÍSES (LADO DIREITO) --- */
.gateway-cards-side {
  flex: 0 0 50%;
}

.cards-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.country-card {
  background-color: #EFEDE6 !important; /* Cor bege dos cards */
  border-radius: 8px !important;
  padding: 30px;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: block;
}

.country-card:hover {
  transform: translateY(-5px);
  background-color: #FFFFFF !important;
}

.country-card img {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 15px;
}

.country-card span {
  display: block;
  color: #1F1D1A !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* --- RESPONSIVIDADE (Telas menores) --- */
@media (max-width: 900px) {
  .gateway-content-wrapper {
    flex-direction: column;
    text-align: center;
  }
  
  .gateway-logo { margin: 0 auto 30px; }
  .gateway-benefits li { justify-content: center; }
  
  .gateway-text-side, .gateway-cards-side {
    flex: 0 0 100%;
    margin-bottom: 40px;
  }
}
/* FOOTER DARK MODERNO */
.footer-new-dark {
  background-color: #000000 !important;
  padding: 60px 0 40px 0;
  border-top: 1px solid #333;
  color: #FFFFFF !important;
  font-family: 'Geist', sans-serif;
  width: 100% !important; /* Garante que ocupe toda a largura */
  display: block !important;
}

.container-footer {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: flex-start; /* Alinha o topo das colunas */
}

/* CORREÇÃO DEFINITIVA DO LOGO */
.logo-unico-footer {
  height: 32px !important;    /* Define uma altura fixa segura */
  width: auto !important;      /* A largura se ajusta sozinha para não distorcer */
  max-width: 150px !important; /* Limite máximo de largura */
  margin-bottom: 20px;
  display: block;
  object-fit: contain !important; /* Mantém a proporção original da imagem */
}

.copyright {
  font-size: 14px;
  color: #A1A1AA;
}

/* COLUNAS E LINKS */
.footer-right {
  display: flex;
  gap: 80px;
}

.footer-heading {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 10px;
}

.footer-links-list a {
  color: #A1A1AA !important;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-links-list a:hover {
  color: #FFFFFF !important;
}

/* REDES SOCIAIS */
.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a i {
  color: #FFFFFF !important;
  font-size: 20px;
  transition: opacity 0.3s;
}

/* RESPONSIVIDADE */
@media (max-width: 900px) {
  .container-footer { flex-direction: column; gap: 40px; text-align: center; }
  .footer-right { flex-direction: column; gap: 30px; align-items: center; }
  .social-icons { justify-content: center; }
  .logo-unico-footer { margin-left: auto; margin-right: auto; }
}
/* CONTAINER BRANCO (LARGURA TOTAL COM CURVA SUTIL) */
.contact-wrapper-minimal {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  font-family: 'Geist', sans-serif;
  padding: 60px 0 60px 0; /* Padding inferior reduzido para a curva sutil */
  
  /* OCUPA TODA A LARGURA (EXTREMIDADE A EXTREMIDADE) */
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  
  /* EFEITO CURVADO MAIS SUTIL NAS BORDAS INFERIORES */
  border-bottom-left-radius: 20px !important;  /* Curva discreta */
  border-bottom-right-radius: 20px !important; /* Curva discreta */
  
  /* GARANTE QUE O PRETO DO FOOTER PREENCHA OS CANTOS */
  position: relative;
  z-index: 2;
  margin-bottom: -1px; /* Evita fresta branca */
}

/* CONTEÚDO CENTRALIZADO DENTRO DA ÁREA BRANCA */
.main-content-layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: 1200px; /* Mantém o conteúdo interno centralizado */
  width: 100%;
  padding: 0 40px;
}

/* FOOTER PRETO QUE SOBE PARA ENCONTRAR A CURVA */
.footer-new-dark {
  background-color: #000000 !important;
  margin-top: -20px; /* Sobreposição reduzida para combinar com a curva sutil */
  padding: 80px 0 60px 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* LOGO CORRIGIDO (PROPORCIONAL) */
.logo-unico-footer {
  height: 32px !important;
  width: auto !important;
  display: block;
  object-fit: contain !important;
  margin-bottom: 20px;
}
/* ESTILIZAÇÃO DO BOTÃO DE USUÁRIO (DARK - PADRÃO JOSÉ HENRIQUE) */
.user-button-dark {
  background-color: #000000 !important; /* Fundo preto sólido */
  color: #FFFFFF !important;            /* Letras brancas */
  padding: 10px 24px !important;
  border-radius: 6px !important;        /* Retangular com bordas pouco arredondadas */
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s ease;
  border: none !important;
}

.user-button-dark:hover {
  background-color: #333333 !important; /* Efeito de hover cinza escuro */
  color: #FFFFFF !important;
}

/* AJUSTE DO NOVO LOGO NO HEADER (IGUAL AO TAMANHO DO FOOTER) */
.logo-unico {
  height: 32px !important;        /* Aumentado para 32px conforme o footer */
  width: auto !important;          /* Mantém a proporção original para não distorcer */
  object-fit: contain !important;  /* Garante a integridade da imagem */
  display: block;
}

/* REMOVER ESTILOS ANTIGOS QUE POSSAM CONFLITAR */
#botao-entrar-header {
  text-transform: none;           /* Garante que o nome do usuário não fique todo em maiúsculas */
}
/* AJUSTE DO HEADER (LOGO, BORDA E BOTÃO) */
.header-new.site-header {
  background-color: #FFFFFF !important;
  /* TROCA DA LINHA CINZA PELA COR #EFEDE6 */
  border-bottom: 1px solid #EFEDE6 !important; 
  padding: 15px 0;
  width: 100%;
}

/* LOGO PADRONIZADO (32PX) */
.logo-unico {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block;
}

/* BOTÃO JOSÉ HENRIQUE (PRETO RETANGULAR) */
.user-button-dark {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  padding: 10px 24px !important;
  border-radius: 6px !important; /* Bordas pouco arredondadas */
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  border: none !important;
}

/* AJUSTE DOS LINKS DO MENU (TRADUZIDOS) */
.bottom-header {
  color: #1F1D1A !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-right: 20px;
}
/* ESTILIZAÇÃO DO BOTÃO DE USUÁRIO (DARK - PADRÃO JOSÉ HENRIQUE) */
.user-button-dark,
.user-button-dark:link,
.user-button-dark:visited {
  background-color: #000000 !important; /* Fundo preto sólido */
  color: #FFFFFF !important;            /* Letras BRANCAS FIXAS */
  padding: 10px 24px !important;
  border-radius: 6px !important;        /* Retangular com bordas pouco arredondadas */
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s ease;
  border: none !important;
}

/* ESTADO HOVER DO BOTÃO */
.user-button-dark:hover,
.user-button-dark:active {
  background-color: #333333 !important; /* Muda apenas o fundo no hover */
  color: #FFFFFF !important;            /* MANTÉM AS LETRAS BRANCAS */
}

/* CONTAINER E FUNDO */
.contact-wrapper-minimal {
  background-color: #FFFFFF !important;
  padding: 60px 0 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* BUSCA RETANGULAR EXPANDIDA - BARRA DE PESQUISA PRINCIPAL */
.hero-search-section {
  width: 100%;
  max-width: 950px;
  text-align: center;
  margin-bottom: 80px;
}

.hero-title {
  font-size: 42px;
  font-weight: 700;
  color: #000;
  margin-bottom: 30px;
}

.search-bar-rectangular {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #EFEDE6 !important; /* Cor bege da linha - BORDA EXTERNA PRINCIPAL */
  border-radius: 8px; /* Formato retangular com leve arredondamento */
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.search-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  padding-left: 15px;
}

.ai-branding-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.modern-input {
  border: none; /* REMOVE A BORDA INTERNA */
  width: 100%;
  height: 45px;
  font-size: 16px;
  outline: none; /* REMOVE O CONTORNO AO CLICAR */
  background: transparent;
}

.search-action-btn-rect {
  background: #000;
  color: #FFF;
  border: none;
  padding: 0 30px;
  height: 45px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* LAYOUT DE COLUNAS INFERIOR */
.main-content-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  max-width: 950px;
  width: 100%;
}

/* TIPOGRAFIA DE OPERAÇÃO */
.hours-title-bold {
  font-size: 24px;
  font-weight: 800 !important;
  color: #000 !important;
  margin-bottom: 12px;
}

.days-bold {
  font-weight: 700 !important;
  color: #000;
}

.time-main {
  font-size: 30px;
  font-weight: 800;
  color: #000;
  margin: 5px 0;
}

.support-subtext {
  font-size: 14px;
  color: #4B5563;
  margin-top: 20px;
  line-height: 1.5;
}

/* BOTÕES DE CANAIS UNIFORMES */
.black-contact-card {
  background: #000 !important;
  border-radius: 12px;
  padding: 40px;
  color: #FFF;
}

.white-action-btn-uniform {
  background: #FFF !important;
  color: #000 !important;
  padding: 18px 24px;
  border-radius: 8px !important;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 12px;
}

.btn-icon-fixed {
  font-size: 20px;
  width: 25px; /* Alinhamento uniforme à esquerda */
  text-align: left;
}
/* TÍTULO E CONTAINER */
.hours-title-bold {
  font-size: 32px !important; /* AUMENTADO conforme pedido */
  font-weight: 800;
  margin-bottom: 12px;
}

/* BUSCA - REMOÇÃO DO RETÂNGULO INTERNO */
.search-bar-rectangular {
  display: flex;
  align-items: center;
  background: #FFF;
  border: 1px solid #EFEDE6 !important;
  border-radius: 8px;
  padding: 6px 6px 6px 20px;
}

.search-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  border: none !important;
}

.modern-input {
  border: none !important;      /* ELIMINA O RETÂNGULO VERDE DO VÍDEO */
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100%;
  height: 48px;
  font-size: 16px;
}

/* CAIXA BEGE DE AVISO (ESQUERDA) */
.alert-box-beige {
  background-color: #EFEDE6; /* Cor da imagem anexa */
  border-radius: 12px;
  padding: 20px;
  margin-top: 25px;
  max-width: 400px;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
}

/* BOTÃO DE INDISPONIBILIDADE (DENTRO DO CARD PRETO) */
.unavailability-btn {
  background-color: #EFEDE6 !important; /* Bege conforme modelo */
  color: #000 !important;
  padding: 15px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.alert-icon { font-size: 22px; }
.btn-text-content { display: flex; flex-direction: column; text-align: left; }
.small-text { font-size: 13px; font-weight: 400; }
.bold-link { font-size: 15px; font-weight: 700; text-decoration: underline; }

/* SOMBRAS SUTIS NO HOVER (#EFEDE6) */
.search-action-btn-rect:hover,
.white-action-btn-uniform:hover,
.unavailability-btn:hover {
  box-shadow: 0 2px 5px #EFEDE6 !important; /* SOMBRA SUTIL conforme pedido */
  transform: translateY(-1px);
}

/* BOTÃO SEARCH PRETO */
.search-action-btn-rect {
  background: #000;
  color: #FFF;
  border: none;
  padding: 0 30px;
  height: 48px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* BOTÕES BRANCOS */
.white-action-btn-uniform {
  background: #FFF !important;
  color: #000 !important;
  padding: 18px 24px;
  border-radius: 8px !important;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 12px;
}
/* Estilo específico para a caixa de alerta */
.alert-box-beige-bordered {
  background-color: #f2f0eb; /* Tom bege das imagens */
  border: 3px double #adaa9d; /* Borda dupla na cor solicitada */
  padding: 20px;
  border-radius: 8px;
  margin-top: 25px;
  width: 100%;
  box-sizing: border-box;
}

.alert-box-beige-bordered p {
  margin: 0;
  font-size: 14px;
  color: #3e3a32;
  line-height: 1.5;
}
/* ==========================================================================
   GATEWAY: CARDS DE PAÍSES
   ========================================================================== */

.cards-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.country-fixed-card {
  /* A cor solicitada aplicada aqui */
  background-color: #FBFAF3 !important; 
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  border-radius: 20px; /* Bordas arredondadas conforme o novo padrão */
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05); /* Borda sutil para dar profundidade */
}

.country-fixed-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  background-color: #f2f1e9 !important; /* Um tom levemente mais escuro no hover */
}

.country-fixed-card img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  object-fit: contain;
}

.country-name {
  color: #000000;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
/* --- ZENDESK CUSTOM SERVICE PAGE: FINAL REFINED VERSION --- */

.zd-service-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  background-color: #ffffff;
}

/* Header - Amplified Typography */
.service-header { 
  text-align: center; 
  margin-bottom: 60px; 
}

.service-main-title { 
  font-size: 44px !important; 
  font-weight: 700; 
  color: #000; 
  margin: 0; 
}

.service-main-subtitle { 
  font-size: 22px !important; 
  color: #000; 
  margin-top: 30px; 
  margin-bottom: 50px; 
  line-height: 1.4;
}

/* Status Cards Grid */
.status-cards-wrapper { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 24px; 
  margin-bottom: 40px; 
}

.info-card { 
  background: #ffffff; 
  border: 1px solid #f2f0eb; 
  border-radius: 12px; 
  display: flex; 
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.card-inner { 
  padding: 35px; 
  flex-grow: 1; 
}

/* Icon with Jump Effect */
.icon-square {
  background-color: #f2f0eb;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-card:hover .icon-square {
  transform: scale(1.15) translateY(-6px);
}

.icon-square img { width: 26px; height: 26px; }

/* Titles inside cards - Now with specific BOLD */
.card-headline { 
  font-size: 22px; 
  color: #000; 
  margin-bottom: 15px; 
}

.card-headline strong {
  font-weight: 800 !important; /* Bold intenso solicitado */
}

/* Internal text +2px */
.card-text { 
  font-size: 17px; 
  color: #333; 
  line-height: 1.6; 
  margin: 0;
}

.card-text strong { 
  font-weight: 800; 
  color: #000; 
}

.card-sep { border: 0; border-top: 1px solid #f2f0eb; margin: 0; }
.card-footer { padding: 20px 35px; display: flex; align-items: center; gap: 12px; }

/* Status Dots */
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-available { background-color: #00FF2B; box-shadow: 0 0 8px rgba(0, 255, 43, 0.3); }
.dot-important { background-color: #FDC256; }

/* Footer Labels in Pure Black */
.footer-label { font-size: 15px; font-weight: 600; color: #000000; }

/* Black Box Section */
.contact-channels-black {
  background-color: #000000;
  border-radius: 16px;
  padding: 60px 20px;
}

.channels-stack { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
  max-width: 550px; 
  margin: 0 auto; 
}

/* White Action Buttons with Glow */
.btn-white-action {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}

.btn-white-action:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
  background-color: #ffffff;
}

.btn-white-action img { width: 24px; height: 24px; }
.btn-white-action span { color: #000; font-weight: 700; font-size: 18px; }

/* --- RESPONSIVIDADE (MOBILE READY) --- */
@media (max-width: 768px) {
  .zd-service-container { padding: 40px 15px; }
  
  .service-main-title { font-size: 34px !important; }
  .service-main-subtitle { font-size: 18px !important; }
  
  .status-cards-wrapper { 
    grid-template-columns: 1fr; /* Empilha as caixas no celular */
    gap: 16px;
  }
  
  .card-inner { padding: 25px; }
  
  .contact-channels-black { padding: 40px 15px; }
  
  .btn-white-action span { font-size: 16px; }
}

/* --- ESTILO PÁGINA PERSONALIZADA ATENDIMENTO --- */

.zd-service-custom-page {
  padding: 60px 0 100px 0;
}

.service-header { text-align: center; margin-bottom: 60px; }

.service-main-title { 
  font-size: 44px !important; 
  font-weight: 700; 
  color: #000; 
  margin: 0; 
}

.service-main-subtitle { 
  font-size: 22px !important; 
  color: #000; 
  margin-top: 25px; 
  margin-bottom: 50px; 
}

/* Grid de Cartões */
.status-cards-wrapper { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 24px; 
  margin-bottom: 40px; 
}

.info-card { 
  background: #ffffff; 
  border: 1px solid #f2f0eb; 
  border-radius: 12px; 
  display: flex; 
  flex-direction: column;
}

.card-inner { padding: 35px; flex-grow: 1; }

.icon-square {
  background-color: #f2f0eb;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: transform 0.4s ease;
}

.info-card:hover .icon-square { transform: scale(1.1) translateY(-5px); }

.card-headline { font-size: 22px; color: #000; margin-bottom: 15px; }
.card-headline strong { font-weight: 800 !important; }

.card-text { font-size: 17px; color: #333; line-height: 1.6; }
.card-text strong { font-weight: 800; color: #000; }

.card-footer { padding: 20px 35px; display: flex; align-items: center; gap: 12px; }

/* Status Dots */
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-available { background-color: #00FF2B; box-shadow: 0 0 8px rgba(0, 255, 43, 0.3); }
.dot-important { background-color: #FDC256; }
.footer-label { font-size: 15px; font-weight: 600; color: #000; }

/* Bloco Preto */
.contact-channels-black {
  background-color: #000000;
  border-radius: 16px;
  padding: 60px 20px;
}

.channels-stack { display: flex; flex-direction: column; gap: 15px; max-width: 550px; margin: 0 auto; }

.btn-white-action {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}

.btn-white-action span { color: #000; font-weight: 700; font-size: 18px; }

/* RESPONSIVIDADE (CELULAR) */
@media (max-width: 768px) {
  .status-cards-wrapper { grid-template-columns: 1fr; }
  .service-main-title { font-size: 34px !important; }
  .service-main-subtitle { font-size: 18px !important; }
}

/* ==========================================================================
   FOOTER B2B: ESTRUTURA E CURVATURA
   ========================================================================== */

/* 1. O Arredondamento da Base Branca (Transição para o Footer) */
/* Verifique se a sua central usa a classe .main-wrapper ou .help-center-wrapper */
.main-wrapper, .help-center-wrapper {
  background-color: #ffffff !important;
  border-bottom-left-radius: 40px !important;
  border-bottom-right-radius: 40px !important;
  padding-bottom: 80px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 2. Estilo Geral do Footer Dark */
.footer-new-dark {
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 100px 40px 60px 40px !important;
  margin-top: -40px !important; /* Encaixe por baixo da curva */
  position: relative !important;
  z-index: 5 !important;
}

.container-footer {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

/* 3. Colunas e Tipografia */
.footer-left { flex: 1; min-width: 250px; }
.footer-right { flex: 2; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }

.logo-unico-footer {
  width: 140px !important;
  height: auto !important;
  margin-bottom: 20px;
}

.copyright {
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}

.footer-heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 25px;
  color: #ffffff;
}

.footer-links-list { list-style: none; padding: 0; margin: 0; }
.footer-links-list li { margin-bottom: 12px; }
.footer-links-list a {
  color: #d4d1c3 !important; /* Cor bege suave para links */
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}
.footer-links-list a:hover { color: #ffffff !important; }

/* ==========================================================================
   ÍCONES SOCIAIS: QUADRADOS BEGES CENTRALIZADOS
   ========================================================================== */

.social-icons {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* O Quadrado Bege */
.social-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background-color: #d4d1c3 !important; 
  border-radius: 4px !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.social-icons a:hover {
  background-color: #c4c1b3 !important;
  transform: translateY(-2px) !important;
}

/* O Ícone dentro do quadrado (Preto e Fino) */
.social-icons a img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  filter: brightness(0) !important; /* Garante que o ícone fique preto */
  margin: 0 !important;
  padding: 0 !important;
}

/* Ajuste Responsivo para Celular */
@media (max-width: 768px) {
  .footer-right { flex-direction: column; gap: 40px; }
  .footer-new-dark { padding: 80px 20px 40px 20px !important; }
}
/* ==========================================================================
   AJUSTES FINAIS - CENTRAL B2B (CURVA TOTAL + TÍTULOS NEGRITO)
   ========================================================================== */

/* 1. FAZ A CURVA BRANCA IR DE PONTA A PONTA */
html, body {
  background-color: #000000 !important; /* Fundo preto para o "vão" da curva */
}

/* O segredo: aplicar a curva no container que manda na largura da página */
main, .main-wrapper, .help-center-wrapper {
  background-color: #ffffff !important;
  border-bottom-left-radius: 60px !important; 
  border-bottom-right-radius: 60px !important;
  padding-bottom: 80px !important;
  width: 100% !important;
  max-width: 100% !important; /* Remove qualquer trava de largura no meio */
  margin: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 2. AJUSTE DO FOOTER PARA ENCAIXAR NA CURVA EXPANDIDA */
.footer-new-dark {
  background-color: #000000 !important;
  margin-top: -60px !important; /* Sobe o footer para debaixo da curva */
  padding-top: 100px !important; 
  width: 100% !important;
  position: relative !important;
  z-index: 5 !important;
}

/* 3. TÍTULOS EM NEGRITO (CAMPOS VERMELHOS) */
.card-headline, .card-bold-title { 
  font-size: 22px !important; 
  color: #000 !important; 
  margin-bottom: 15px !important; 
  display: block !important;
}

.card-headline strong, .card-bold-title strong { 
  font-weight: 800 !important; 
}

/* 4. ÍCONES SOCIAIS BEGES E CENTRALIZADOS */
.social-icons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background-color: #d4d1c3 !important; 
  border-radius: 4px !important;
}

.social-icons a img {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) !important; /* Garante ícone preto puro */
}

/* ==========================================================================
   ATUALIZAÇÕES DA HOME PAGE: CORREÇÃO DE LOGOS E CENTRALIZAÇÃO ABSOLUTA
   ========================================================================== */

/* --- ESTILO GERAL E FUNDO --- */
.homepage-white-bg { background-color: #ffffff !important; }
.hero-white { background-image: none !important; }

/* --- PESQUISA --- */
.search-container-fixed { max-width: 610px; margin: 30px auto; position: relative; }

/* --- GRID DE PRODUTOS --- */
.product-grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 0;
}

.product-card-fixed {
  height: 180px; 
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 100%;
}

.product-card-fixed:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.logo-img { max-width: 85%; max-height: 70px; object-fit: contain; }
.text-logo { font-size: 14px; color: #333; margin: 10px 0 0 0; }

/* --- CORREÇÃO 1: CLOUD ONE COM FUNDO ESCURO --- */
.card-cloudone {
  background-color: #0c083b !important; /* Azul escuro Unico */
  background-image: url(/hc/theming_assets/01JXMXQAVWQ5P7GAJRB44EXV8H) !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
}

.text-white { color: #ffffff !important; }

/* --- CORREÇÃO 2: AUMENTAR LOGO SAFE APP --- */
.logo-safe-fix {
  max-height: 95px !important; /* Permite que cresça mais na vertical */
  max-width: 95% !important;
  transform: scale(1.2); /* Amplia para anular o espaço transparente da imagem */
}

/* --- BOTÃO ON DEMAND --- */
.container-on-demand { text-align: center; margin: 40px 0 60px 0; }
.btn-on-demand-premium {
  display: inline-flex; align-items: center; gap: 12px;
  background-color: #FBFAF3 !important; color: #000 !important;
  padding: 18px 35px; border-radius: 15px;
  border: 2px solid #d4d0c2 !important; text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.3s ease;
}
.btn-on-demand-premium:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.on-demand-icon { width: 22px; height: auto; }

/* --- CORREÇÃO 3: CENTRALIZAÇÃO FORÇADA DOS BOTÕES --- */
.cta-support-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Força o alinhamento no centro no eixo X */
  justify-content: center !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 0 auto !important; /* Garante que o bloco não caia pra esquerda */
  padding: 20px 20px 80px 20px !important;
  text-align: center !important;
}

.cta-title-standard {
  color: #000000 !important;
  font-weight: 400 !important; /* Sem negrito */
  font-size: 24px;
  margin-bottom: 35px;
  width: 100% !important;
  text-align: center !important;
}

.cta-buttons-flex-center {
  display: flex !important;
  justify-content: center !important; /* Centraliza os botões */
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.cta-button-dark-small {
  background-color: #1a1a1a !important;
  color: #fff !important;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  min-width: 220px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.cta-button-dark-small:hover { background-color: #333 !important; }

/* Mobile */
@media (max-width: 768px) {
  .product-grid-3x2 { grid-template-columns: 1fr; }
  .cta-buttons-flex-center { flex-direction: column; align-items: center; }
  .search-container-fixed { max-width: 90%; }
}
/* ==========================================================================
   HOME PAGE: ESTRUTURA GERAL E BUSCA
   ========================================================================== */

/* Remove fundos cinzas residuais */
.homepage-white-bg, .hero-white, .hero-section { 
  background-color: #ffffff !important; 
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- BARRA DE PESQUISA (Larga com botão direito) --- */
.search-container-fixed {
  max-width: 850px !important;
  margin: 30px auto 0 auto !important;
  background: transparent !important;
}

.search-container-fixed form.search {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 15px !important;
}

.search-container-fixed form.search input[type="search"] {
  flex: 1 !important;
  height: 55px !important;
  border: 2px solid #d4d0c3 !important; /* Borda bege solicitada */
  border-radius: 8px !important;
  padding: 0 20px 0 45px !important;
  font-size: 16px !important;
  background-color: #ffffff !important;
  color: #333 !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-container-fixed form.search input[type="submit"] {
  display: block !important;
  height: 55px !important;
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 35px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.search-container-fixed form.search input[type="submit"]:hover {
  background-color: #333333 !important;
}

.search-container-fixed form.search::before {
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

/* ==========================================================================
   HOME PAGE: GRID DE PRODUTOS E LOGOS IGUALADOS
   ========================================================================== */
.product-grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 0;
}

.product-card-fixed {
  height: 180px; 
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 100%;
}

.product-card-fixed:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 4px 15px rgba(0,0,0,0.06); 
}

/* PADRONIZAÇÃO DE TODOS OS LOGOS */
.logo-img { 
  max-width: 80%; 
  height: 50px; /* Trava a altura para manter simetria */
  object-fit: contain; 
}

/* FORÇA O SAFE APP A CRESCER PARA ANULAR O FUNDO TRANSPARENTE DA IMAGEM */
.logo-safe-fix {
  transform: scale(1.5) !important; 
}

/* CLOUD ONE: FUNDO ESCURO */
.card-cloudone {
  background-color: #0c083b !important;
  background-image: url(/hc/theming_assets/01JXMXQAVWQ5P7GAJRB44EXV8H) !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
}

.text-white { color: #ffffff !important; }
.text-logo { font-size: 14px; color: #333; margin: 15px 0 0 0; }

/* ==========================================================================
   HOME PAGE: BOTÃO ON DEMAND & CTA CENTRALIZADO
   ========================================================================== */
.container-on-demand { text-align: center; margin: 40px 0 60px 0; }

.btn-on-demand-premium {
  display: inline-flex; align-items: center; gap: 12px;
  background-color: #FBFAF3 !important; color: #000 !important;
  padding: 18px 35px; border-radius: 15px;
  border: 2px solid #d4d0c2 !important; text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.3s ease;
}

.btn-on-demand-premium:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.on-demand-icon { width: 22px; height: auto; }

/* CENTRALIZAÇÃO ABSOLUTA DA ÁREA DE CONTATO INFERIOR */
.cta-support-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 0 auto !important; 
  padding: 20px 20px 80px 20px !important;
  text-align: center !important;
}

.cta-title-standard {
  color: #000000 !important;
  font-weight: 400 !important; 
  font-size: 24px;
  margin-bottom: 35px;
  width: 100% !important;
  text-align: center !important;
}

.cta-buttons-flex-center {
  display: flex !important;
  justify-content: center !important; 
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.cta-button-dark-small {
  background-color: #1a1a1a !important;
  color: #fff !important;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  min-width: 220px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.cta-button-dark-small:hover { background-color: #333 !important; }

/* MOBILE RESPONSIVIDADE */
@media (max-width: 768px) {
  .search-container-fixed form.search { flex-direction: column !important; gap: 10px !important; }
  .search-container-fixed form.search input[type="submit"] { width: 100% !important; }
  .product-grid-3x2 { grid-template-columns: 1fr; }
  .cta-buttons-flex-center { flex-direction: column; align-items: center; }
}
/* ==========================================================================
   AJUSTES FINAIS DA HOME: LOGO SAFE APP E ESPAÇAMENTO DO FOOTER
   ========================================================================== */

/* 1. CORREÇÃO DEFINITIVA DO LOGO SAFE APP (MAIOR) */
.product-card-fixed .logo-safe-fix {
  height: 80px !important; /* Dá mais espaço para a imagem */
  max-width: 100% !important;
  transform: scale(2.2) !important; /* Zoom para anular o fundo transparente */
}

/* 2. REDUÇÃO DO BURACO BRANCO ACIMA DO FOOTER */
.cta-support-wrapper {
  padding-bottom: 30px !important; /* Reduzido drasticamente (antes estava 80px) */
  margin-bottom: 0 !important;
}

/* Remove margens ou paddings residuais do container principal da Home */
.homepage-white-bg {
  padding-bottom: 20px !important; 
  margin-bottom: 0 !important;
}

/* ==========================================================================
   NOVO BLOCO: HORÁRIOS POR PRODUTO (Página de Atendimento)
   ========================================================================== */

.product-hours-section {
  margin-bottom: 50px;
  max-width: 100%;
}

/* Cabeçalho da seção (Título + Badge Segunda a Sexta) */
.product-hours-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 5px;
}

.product-hours-title {
  font-size: 22px;
  font-weight: 800;
  color: #000;
  margin: 0;
}

/* Etiqueta "Segunda a Sexta" */
.badge-dias {
  background-color: #f2f0eb; /* Bege da identidade Unico */
  color: #000;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block; /* Necessário para a etiqueta conseguir pular */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito de salto da etiqueta */
.badge-dias:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Grid das caixinhas */
.product-hours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 por linha */
  gap: 16px;
}

/* Estilo individual da caixinha */
.hour-box-item {
  background-color: #f9f9fa; /* Fundo cinza clarinho elegante */
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Efeito ao passar o mouse (UX Premium) */
.hour-box-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.06);
  background-color: #ffffff;
  border-color: #e5e5e5;
}

.produto-nome {
  font-size: 17px;
  font-weight: 800; /* Destaque no nome */
  color: #000;
  margin-bottom: 8px;
}

.produto-hora {
  font-size: 18px;
  font-weight: 400; /* Texto mais leve para o horário */
  color: #333;
}

/* --- Responsividade das Caixinhas --- */
@media (max-width: 768px) {
  .product-hours-grid { 
    grid-template-columns: repeat(2, 1fr); /* 2 por linha em tablets */
  }
  .product-hours-header { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 12px; 
  }
}

@media (max-width: 480px) {
  .product-hours-grid { 
    grid-template-columns: 1fr; /* 1 por linha no celular */
  }
}
/* ==========================================================================
   CORREÇÕES CRÍTICAS: FAIXA PRETA E OCULTAÇÃO DO HEADER NO GATEWAY
   ========================================================================== */

/* 1. REMOVE A FAIXA PRETA DO TOPO (Zera as margens que revelam o fundo) */
body, html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

header, .header, .site-header, .header-new {
  margin-top: 0 !important; /* Remove o espaço de 25px que mostrava o preto */
  top: 0 !important;
}

/* 2. GARANTE QUE O HEADER APAREÇA NA HOME PT-BR */
html[lang*="pt"] header,
html[lang*="pt"] .header,
html[lang*="pt"] .site-header {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
}

/* 2b. HEADER VISÍVEL NO INGLÊS (help center en-us) */
html[lang*="en"] header.header-new,
html[lang*="en"] .header-new.site-header,
html[lang*="en"] header.site-header {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 3. Inglês: não esconder header/footer no help center inteiro (só na página Gateway — ver bloco body:has(#gateway-root) abaixo) */

/* 4. GARANTE QUE O GATEWAY OCUPE 100% DA TELA SEM DESCER */
html[lang*="en"] #gateway-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background-color: #1F1D1A !important;
}
/* ==========================================================================
   COR DA BARRA DE PESQUISA (#d4d0c3) E TEXTO DOS CARDS (LIGHT)
   ========================================================================== */

/* 1. Altera a cor do texto padrão da busca (placeholder) */
.search-container-fixed form.search input[type="search"]::-webkit-input-placeholder { color: #d4d0c3 !important; opacity: 1 !important; }
.search-container-fixed form.search input[type="search"]::-moz-placeholder { color: #d4d0c3 !important; opacity: 1 !important; }
.search-container-fixed form.search input[type="search"]:-ms-input-placeholder { color: #d4d0c3 !important; opacity: 1 !important; }
.search-container-fixed form.search input[type="search"]::placeholder { color: #d4d0c3 !important; opacity: 1 !important; }

/* 2. Altera a cor do ícone de Lupa */
.search-container-fixed form.search::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='24' viewBox='0 0 23 24'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(-6 -2)'%3E%3Ccircle cx='19.889' cy='11.611' r='8' stroke='%23d4d0c3' stroke-width='2' transform='rotate(45 19.89 11.61)'/%3E%3Cpath fill='%23d4d0c3' fill-rule='nonzero' d='M9.343 15.657h2v10.004c0 .55-.444.996-1 .996-.552 0-1-.445-1-.996v-10.004z' transform='rotate(45 10.343 21.157)'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.search-container-fixed form.search svg {
  color: #d4d0c3 !important;
  fill: #d4d0c3 !important;
}

/* 3. Tira o negrito das frases de hover nos cards de produtos (Deixa Light) */
.product-card-fixed .text-logo,
.product-card-fixed p {
  font-weight: 400 !important; /* 400 é o peso normal/light. Se achar ainda grosso, pode tentar 300 */
}

/* ==========================================================================
   OCULTAR HEADER EXCLUSIVAMENTE NA PÁGINA GATEWAY
   ========================================================================== */

/* 1. Esconde o header e o footer da página SE o Gateway estiver nela */
body:has(#gateway-root) header,
body:has(#gateway-root) .site-header,
body:has(#gateway-root) .header-new,
body:has(#gateway-root) footer,
body:has(#gateway-root) .footer-new-dark {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Força o fundo escuro do Gateway a grudar no topo e ocupar a tela inteira */
#gateway-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important; /* Z-index altíssimo para ficar por cima de tudo */
  background-color: #1F1D1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

/* --- CONTAINER DE SEÇÃO (HARMONIA TOTAL) --- */
.section-capacidades-wrapper {
  width: 100%;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  background-color: transparent;
}

.container-capacidades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 90%;
  max-width: 1100px;
}

/* --- BLOCO REFINADO (UI EXCELÊNCIA) --- */
.square-button-refined {
  background-color: #FBFAF3 !important; 
  border: 1px solid #F0EEE6 !important; 
  border-radius: 12px; 
  cursor: pointer;
  min-height: 280px; 
  height: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.square-button-refined:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(174, 170, 158, 0.15);
  border-color: #AEAA9E !important;
}

.card-content-wrapper {
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  align-items: flex-start;
}

/* ÍCONE POSICIONADO NO CANTO INFERIOR DIREITO */
.icon-asset-card {
  position: absolute;
  bottom: 25px; 
  right: 25px;
  width: 32px;
  height: auto;
  opacity: 0.85;
}

/* BADGE SUPERIOR - LINHA NA COR #aeaa9e (CORRIGIDA) E TAMANHO MAIOR */
.badge-product {
  background-color: #FFFFFF;
  border: 1px solid #aeaa9e; /* COR ATUALIZADA */
  padding: 6px 18px; 
  border-radius: 6px;
  font-size: 14px;   
  font-weight: 800;  /* EXTRA BOLD */
  color: #000000;    
  margin-bottom: 20px;
}

/* TEXTOS EM PRETO ABSOLUTO E NEGRITO REFORÇADO */
.product-info-content {
  margin: 10px 0 30px 0;
  flex-grow: 1;
}

.product-description-text {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 24px; 
  line-height: 1.15;
  color: #000000 !important; /* PRETO ABSOLUTO */
  font-weight: 800 !important; /* EXTRA BOLD */
  margin: 0;
  text-align: left;
}

/* LINK "VER ARTIGOS ➔" (ESTILO FOTO) */
.ver-artigos {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 18px; 
  font-weight: 700; 
  color: #515351 !important; 
  margin-top: auto; 
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ajuste específico para o Portal (IDCloud) sem badge */
.portal-card .product-info-content {
  margin-top: 0;
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
  .container-capacidades { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .container-capacidades { grid-template-columns: 1fr; width: 85%; }
  .square-button-refined { min-height: 240px; }
}

/* Importação da Geist */
@import url('https://cdn.jsdelivr.net/npm/geist@1.0.3/dist/fonts/geist-sans/style.css');

.section-capacidades-wrapper {
  width: 100%;
  padding: 60px 0;
  display: flex;
  justify-content: center;
}

.container-capacidades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 90%;
  max-width: 1100px;
}

/* O CARD COM HOVER SUAVE */
.square-button-refined {
  background-color: #FBFAF3 !important; 
  border: 1px solid #F0EEE6 !important; 
  border-radius: 12px;
  cursor: pointer;
  min-height: 310px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.square-button-refined:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04); /* Sombra leve e suave solicitada */
  border-color: #aeaa9e !important;
}

.card-content-wrapper {
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* BADGE COM ÍCONE DENTRO (CONFORME FOTO 2) */
.badge-product {
  background-color: #FFFFFF;
  border: 1px solid #aeaa9e; 
  padding: 6px 14px; 
  border-radius: 8px;
  font-size: 14px;   
  font-weight: 800;  
  color: #000000;    
  margin-bottom: 24px;
  display: inline-flex; /* Para ajustar ao tamanho do conteúdo */
  align-items: center;
  gap: 10px; /* Espaçamento entre ícone e texto */
  width: fit-content;
}

/* O ÍCONE (ASSET) DENTRO DA PÍLULA */
.icon-inline-badge {
  width: 18px; 
  height: auto;
  filter: brightness(0); /* Garante que ícones coloridos fiquem pretos como o texto se necessário */
}

/* CORPO DO TEXTO: GEIST LIGHT + NEGRITO SELETIVO */
.product-description-text {
  font-family: 'Geist Sans', sans-serif;
  font-size: 19px; 
  line-height: 1.5;
  color: #2a2926; 
  font-weight: 300 !important; /* Geist Light solicitado */
  margin: 0;
  text-align: left;
}

.product-description-text strong {
  font-weight: 700 !important; /* Negrito apenas onde tem asterisco */
  color: #000000;
}

/* VER ARTIGOS EM PRETO ABSOLUTO */
.ver-artigos {
  font-family: 'Geist Sans', sans-serif;
  font-size: 16px; 
  font-weight: 800; 
  color: #000000 !important; 
  margin-top: auto; 
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ajuste para os novos botões com ícones */
.cta-button-dark-small {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px; 
    padding: 10px 20px; /* Ajuste se o botão ficar muito pequeno */
    text-decoration: none;
}

.cta-icon-white {
    width: 22px; /* Tamanho do ícone */
    height: auto;
    display: inline-block;
    filter: brightness(0) invert(1); /* Força o ícone de e-mail a ficar branco */
}
.cta-title-standard {
    font-weight: 700;           /* Deixa em negrito forte */
    font-size: 28px;            /* Tamanho aproximado da imagem de referência */
    color: #000000;             /* Garante que o texto seja preto puro */
    margin-bottom: 30px;        /* Espaço entre o título e os botões */
    text-align: center;         /* Garante a centralização */
    font-family: inherit;       /* Usa a fonte padrão do seu Zendesk */
}

/* ==========================================================================
   LINHA DIVISORA (FADE NAS EXTREMIDADES)
   ========================================================================== */
.divider-gradient-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.divider-gradient-line {
    height: 1px;
    width: 100%;
    max-width: 1160px;
    background: linear-gradient(to right, rgba(207,204,195,0), rgba(207,204,195,1), rgba(207,204,195,0));
    border: none;
}

/* ==========================================================================
   LINHA DIVISORA (FADE NAS EXTREMIDADES)
   ========================================================================== */
.divider-gradient-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
    padding: 0 20px;
}

.divider-gradient-line {
    height: 1px;
    width: 100%;
    max-width: 1160px;
    background: linear-gradient(
        to right, 
        rgba(207, 204, 195, 0) 0%, 
        rgba(207, 204, 195, 1) 50%, 
        rgba(207, 204, 195, 0) 100%
    );
    border: none;
}

/* ==========================================================================
   BANNER HUB ON DEMAND (BORDA 1PX & COMPRIMENTO REDUZIDO)
   ========================================================================== */
.on-demand-section-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 20px;
}

.on-demand-banner-box {
    background-color: #f0eee6;
    border: 1px solid #cfccc3;
    border-radius: 12px;
    width: 100%;
    max-width: 950px;
    padding: 18px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.on-demand-banner-box:hover {
    box-shadow: 0 6px 15px rgba(207, 204, 195, 0.4);
}

.on-demand-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.on-demand-logo-wrapper {
    background: #ffffff;
    padding: 8px 16px;
    border: 1px solid #cfccc3;
    border-radius: 8px;
    display: flex;
}

.on-demand-logo-wrapper img {
    height: 32px;
}

.on-demand-btn-jump {
    background-color: #000000;
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.on-demand-btn-jump:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   SEÇÃO DE SUPORTE (CONTATOS AJUSTADOS)
   ========================================================================== */
.cta-support-wrapper {
    text-align: center;
    padding: 60px 20px;
    max-width: 1160px;
    margin: 0 auto;
}

/* Título em Negrito conforme imagem */
.cta-title-bold {
    font-size: 32px;
    font-weight: 800; /* Extra bold conforme imagem */
    color: #000;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* Grid para manter os 3 botões iguais e proporcionais */
.cta-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.cta-button-black {
    background-color: #1a1a1a;
    color: #ffffff !important;
    padding: 20px 25px;
    border-radius: 8px; /* Arredondamento menor conforme solicitado */
    
    /* Fonte Geist Semibold */
    font-family: 'Geist', sans-serif;
    font-weight: 600; 
    
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.cta-button-black:hover {
    background-color: #333;
    transform: translateY(-2px);
}

/* Filtro para garantir que ícones fiquem brancos como na imagem */
.cta-icon-white-filter {
    width: 22px;
    height: auto;
    margin-right: 12px;
    filter: brightness(0) invert(1);
}

/* Responsivo para Mobile */
@media (max-width: 992px) {
    .cta-buttons-grid {
        grid-template-columns: 1fr;
    }
    .on-demand-banner-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

/* ==========================================================================
   RESPONSIVIDADE GLOBAL — Home e demais páginas (tablets e celulares)
   Corrige overflow horizontal (100vw + margens negativas), tipografia e grids.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Mesma correção de overflow em tablets (full-bleed com 100vw) */
  .hero-section,
  .product-section,
  .cta-section,
  .footer-new {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  }

  .section-capacidades-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .container-capacidades {
    width: 100% !important;
    max-width: 960px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cta-support-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .on-demand-section-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px) {
  /* Quebra full-bleed problemática: 100vw + left 50% + margin -50vw causa scroll lateral */
  .hero-section,
  .product-section,
  .cta-section,
  .footer-new {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .hero-section {
    padding: 40px 16px 36px !important;
  }

  .hero-section .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    word-wrap: break-word !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin-bottom: 24px !important;
    padding: 0 2px !important;
  }

  .search-container-fixed {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .search-container-fixed form.search input[type="search"] {
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .section-capacidades-wrapper {
    padding: 32px 16px !important;
  }

  .container-capacidades {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .square-button-refined {
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .card-content-wrapper {
    padding: 20px 18px !important;
  }

  .product-description-text {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .ver-artigos {
    font-size: 15px !important;
  }

  .badge-product {
    font-size: 13px !important;
    max-width: 100% !important;
  }

  .divider-gradient-container {
    margin: 24px 0 !important;
    padding: 0 16px !important;
  }

  .on-demand-section-container {
    padding: 20px 16px !important;
  }

  .on-demand-banner-box {
    padding: 16px 18px !important;
    align-items: stretch !important;
  }

  .on-demand-left {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .on-demand-logo-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 36px !important;
  }

  .on-demand-message-text {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  .on-demand-btn-jump {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .cta-support-wrapper {
    padding: 40px 16px 48px !important;
  }

  .cta-title-bold {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
    padding: 0 4px !important;
  }

  .cta-buttons-grid {
    gap: 12px !important;
  }

  .cta-button-black {
    padding: 16px 14px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  .cta-icon-white-filter {
    margin-right: 10px !important;
    flex-shrink: 0 !important;
  }

  .homepage-white-bg {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  .section-capacidades-wrapper {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .cta-title-bold {
    font-size: 1.2rem !important;
  }
}

/* Artigos e páginas internas: largura fluida sem extrapolar a viewport */
@media (max-width: 768px) {
  .article-body,
  .article__body,
  .article-content {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }

  .container-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
.footer-new-dark .footer-right {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Garante espaço entre as colunas traduzidas */
  flex-wrap: wrap; /* Evita quebra em telas menores */
}

/* Esconde todas as traduções por padrão */
.lang-en, .lang-pt {
  display: none !important;
}

/* Se o idioma da página for Inglês, mostra apenas o que for .lang-en */
html[lang*="en"] .lang-en {
  display: inline-block !important;
}

/* Se o idioma da página for Português, mostra apenas o que for .lang-pt */
html[lang*="pt"] .lang-pt {
  display: inline-block !important;
}

/* ==========================================================================
   BOTÃO DE COOKIES - MÉXICO (DESIGN REFINADO + TRADUÇÃO)
   ========================================================================== */

/* 1. O Botão (Caixa) - Cor #3e3a33 e Posicionamento */
.cmp-revoke-consent {
    background-color: #3e3a33 !important; /* Cor solicitada para a caixa */
    border: 1px solid #3e3a33 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    left: 20px !important;
    bottom: 20px !important;
    border-radius: 8px !important;
    position: fixed !important; 
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2) !important;
    /* Transição para o salto sutil */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, background-color 0.3s ease !important;
}

/* 2. Efeito de Hover (Salto Sutil + Tom mais escuro) */
.cmp-revoke-consent:hover {
    background-color: #2b2824 !important; /* Escurece levemente no foco */
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3) !important;
}

/* 3. O Ícone - Tamanho 20px e Cor Branca */
.cmp-revoke-consent img, 
.cmp-revoke-consent svg {
    width: 20px !important;    
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    filter: brightness(0) invert(1) !important; /* Mantém o ícone branco */
}

/* 4. Oculta o texto original para usar o Tooltip dinâmico */
.cmp-revoke-consent span,
.cmp-revoke-consent-span {
    display: none !important;
}

/* 5. A Mensagem (Tooltip) - Fundo Branco e Texto #3e3a33 */
.cmp-revoke-consent:hover::after {
    display: flex !important;
    position: absolute !important;
    left: 56px !important;
    background-color: #ffffff !important; /* Fundo branco para contraste */
    color: #3e3a33 !important;            /* COR DO TEXTO SOLICITADA: #3e3a33 */
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    align-items: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    pointer-events: none !important;
    content: "Preferencias de cookies" !important; /* Padrão (Espanhol) */
}

/* 6. Traduções Automáticas baseadas no idioma da página */

/* Inglês */
html:lang(en) .cmp-revoke-consent:hover::after,
html.is-locale-en .cmp-revoke-consent:hover::after {
    content: "Manage Preferences" !important;
}

/* Português */
html:lang(pt) .cmp-revoke-consent:hover::after,
html.is-locale-pt-br .cmp-revoke-consent:hover::after {
    content: "Gerenciar Preferências" !important;
}
/* Estilização do título de serviços */
.service-main-title {
  font-family: 'Atkinson Hyperlegible', sans-serif; /* Mantendo sua fonte atual */
  color: #212121; /* Cor Dark padrão do seu tema */
  font-size: 28px;
  font-weight: 400; /* Peso normal para a frase */
}

/* Aplicando o negrito apenas na palavra selecionada */
.service-bold {
  font-weight: 800; /* Negrito intenso para destaque */
  color: #000000; /* Preto absoluto para reforçar o Dark */
}

/* ==========================================================================
   MODAL COMPONENTE - CONFIRMAÇÃO DE TELEFONE
   ========================================================================== */
.call-modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  z-index: 99999 !important;
  justify-content: center !important;
  align-items: center !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.call-modal-overlay.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.call-modal-content {
  background: #ffffff !important;
  padding: 24px !important;
  border-radius: 12px !important;
  max-width: 380px !important;
  width: 88% !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  box-sizing: border-box !important;
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.call-modal-overlay.is-open .call-modal-content {
  transform: scale(1);
}

.call-modal-title {
  font-size: 22px !important;
  color: #1a1a1a !important;
  font-weight: bold !important;
  margin: 0 0 10px 0 !important;
}

.call-modal-text {
  font-size: 15px !important;
  color: #444444 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.4 !important;
}

.call-modal-actions {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}

.call-modal-btn {
  flex: 1 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.call-modal-btn-cancel {
  background: #eeeeee !important;
  color: #333333 !important;
}

.call-modal-btn-confirm {
  background: #212121 !important;
  color: #ffffff !important;
}

@media (max-width: 480px) {
  .call-modal-actions {
    flex-direction: column-reverse !important;
  }
  .call-modal-btn {
    width: 100% !important;
    height: 44px !important;
  }
}
/* Alinhamento do ícone de atenção dentro do título do modal */
.call-modal-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px; /* Espaçamento perfeito entre o ícone e a palavra */
}

.modal-title-icon {
  width: 24px !important; /* Tamanho controlado para manter a proporção do texto */
  height: 24px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* ==========================================================================
   NOVO MODAL DE AVISO HELP-U - DESIGN ATUALIZADO 
   ========================================================================== */
.helpu-announcement-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 9999999 !important; /* Prioridade máxima na tela */
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Cor de fundo FBFAF3 com 90% de opacidade para efeito overlay, sem roxo */
  background-color: rgba(251, 250, 243, 0.90); 
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Classe ativada via JavaScript */
.helpu-announcement-overlay.is-active {
  visibility: visible;
  opacity: 1;
}

.helpu-announcement-box {
  background-color: #ffffff;
  padding: 40px 35px;
  border-radius: 12px;
  width: 90%;
  max-width: 520px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); /* Sombra suave para destacar o box */
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.helpu-announcement-overlay.is-active .helpu-announcement-box {
  transform: translateY(0) scale(1);
}

.helpu-announcement-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  color: #a0a0a0;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.helpu-announcement-close:hover {
  color: #000000;
}

.helpu-announcement-title {
  font-size: 24px;
  font-weight: 800;
  color: #000000; /* Solicitado: Título na cor Preta */
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.helpu-announcement-text {
  font-size: 16px;
  color: #4b4b4b; /* Cinza escuro amigável para boa leitura UI */
  margin-bottom: 25px;
  line-height: 1.6;
}

/* UI da Caixinha de Atenção */
.helpu-announcement-warning {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background-color: #f9f9fa; /* Fundo suave para destacar o texto */
  border: 1px solid #e5e7eb;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 25px;
  text-align: left;
  font-size: 14px;
  color: #4b4b4b;
  line-height: 1.4;
}

.helpu-warning-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0; /* Impede o ícone de ser esmagado */
}

/* Botão Amarelo Padrão Unico */
.helpu-announcement-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FDC256 !important;
  color: #000000 !important;
  font-weight: bold;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.helpu-announcement-btn:hover {
  background-color: #e5af4b !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(253, 194, 86, 0.3);
}

.helpu-btn-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .helpu-announcement-box { padding: 30px 20px; }
  .helpu-announcement-title { font-size: 20px; }
  .helpu-announcement-text { font-size: 15px; }
  .helpu-announcement-warning { font-size: 13px; padding: 12px; }
}

/* ==========================================================================
   MÓDULO: FUNCIONALIDADES (TEXTO EM HTML REAL & SOMBREAMENTO SOFT GLOW)
   ========================================================================== */

:root {
  --int-font-family: 'Atkinson', sans-serif;
  --int-dark-neutral: #1a1a1a;
  --int-card-surface: #ffffff;
  --int-border-subtle: #eaeaea;
}

.integracoes-wrapper {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 24px;
  font-family: var(--int-font-family);
  color: var(--int-dark-neutral);
  box-sizing: border-box;
}

/* Força alinhamento à esquerda eliminando heranças centralizadas do tema base */
.integracoes-wrapper,
.integracoes-wrapper section,
.integracoes-wrapper ul,
.integracoes-wrapper li,
.integracoes-wrapper div,
.integracoes-wrapper p,
.integracoes-wrapper h1,
.integracoes-wrapper h3,
.integracoes-wrapper h4 {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.integracoes-header {
  margin-bottom: 40px;
}

.integracoes-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.integracoes-subtitle {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
}

.integracao-card {
  background: var(--int-card-surface);
  border: 1px solid var(--int-border-subtle);
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.01);
}

/* BANNERS PRINCIPAIS DOS EMBEDS */
.journey-banner {
  display: flex !important;
  align-items: center !important;
  padding: 24px 32px;
  border-radius: 8px;
  margin-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
}
.banner-web { background-color: #fcfcfc; border: 1px solid var(--int-border-subtle); }
.banner-api { background-color: #fffdf5; border: 1px solid #fce8b2; }

.journey-main-logo {
  height: 42px !important; /* Tamanho preservado para grande destaque de marca */
  width: auto !important;
  object-fit: contain;
}

.func-header-wrapper {
  border-bottom: 1px solid var(--int-border-subtle);
  padding-bottom: 12px;
  margin-bottom: 32px;
  width: 100%;
}

.func-title {
  font-size: 13px;
  font-weight: 700;
  color: #888888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important; /* Espaçamento ideal para textos longos */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  width: 100%;
}

/* GRID ASSIMÉTRICO DO TRILHO ESQUERDO */
.feature-item {
  display: grid !important;
  grid-template-columns: 36px 1fr !important; /* Coluna estrita para ícones puros */
  gap: 24px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100%;
  border-radius: 8px;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Efeito de hover suave no bloco de leitura */
.feature-item:hover {
  transform: translateX(4px) !important;
  background-color: rgba(0, 0, 0, 0.005) !important;
}

.feature-asset-col {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 36px !important;
  height: 36px !important;
}

/* CONFIGURAÇÃO DE EQUILÍBRIO ÓPTICO SOLICITADO */
.feature-pure-icon {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Ajustes milimétricos solicitados (Mais Journey / Menos Documentos) */
.feature-pure-icon.spec-journey {
  width: 30px !important;   /* Aumentado levemente */
  height: 30px !important;
}
.feature-pure-icon.spec-doc {
  width: 22px !important;   /* Reduzido na mesma proporção */
  height: 22px !important;
}

/* ALINHAMENTO TEXTUAL EM HTML REAL */
.feature-content-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.feature-item-title {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px 0 !important;
  line-height: 1.4;
}

.feature-item-desc {
  font-size: 14px;
  color: #444444;
  margin: 0 !important;
  line-height: 1.6;
}

/* 🎯 BOTÕES DE DOCUMENTAÇÃO REFORMULADOS COM SOFT GLOW */
.btn-glow-gradient-soft {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  background: #1a1a1a;
  color: #ffffff !important;
  padding: 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  
  /* Sombra de repouso muito sutil e leve */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-glow-gradient-soft:hover {
  /* Salto vertical suave */
  transform: translateY(-2px) !important;
  
  /* Gradiente equilibrado no mesmo tom da marca */
  background: linear-gradient(135deg, #2a2a2a 0%, #151515 100%) !important;
  border-color: #333333;
  
  /* Sombra reduzida de alta dispersão (Glow extremamente suave e elegante) */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 
              0 0 10px rgba(40, 40, 40, 0.2) !important;
}

/* ÍCONE INTERNO DO GOOGLE SLIDES SOLICITADO */
.btn-addon-icon {
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* COMPATIBILIDADE RESPONSIVA */
@media (max-width: 768px) {
  .integracao-card { padding: 24px; }
  .feature-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 20px !important;
  }
  .feature-item:last-child { border-bottom: none; padding-bottom: 0 !important; }
}

/* ==========================================================================
   PÁGINA INTEGRACÕES: CABEÇALHOS REATIVOS (EFEITO CURSOR BLACK BLOCK)
   ========================================================================== */

.integracoes-wrapper {
  max-width: 960px;
  margin: 40px auto;
  padding: 0 24px;
  font-family: 'Atkinson', sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
}

/* Garante o alinhamento esquerdo estrito contornando o tema base */
.integracoes-wrapper,
.integracoes-wrapper section,
.integracoes-wrapper ul,
.integracoes-wrapper li,
.integracoes-wrapper div,
.integracoes-wrapper p,
.integracoes-wrapper h1,
.integracoes-wrapper h3,
.integracoes-wrapper h4 {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.integracoes-header {
  margin-bottom: 40px;
}

.integracoes-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.integracoes-subtitle {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
}

.integracao-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.01);
}

.journey-banner {
  display: flex !important;
  align-items: center !important;
  padding: 24px 32px;
  border-radius: 8px;
  margin-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
}
.banner-web { background-color: #fcfcfc; border: 1px solid #eaeaea; }
.banner-api { background-color: #fffdf5; border: 1px solid #fce8b2; }

.journey-main-logo {
  height: 42px !important;
  width: auto !important;
  object-fit: contain;
}

.func-header-wrapper {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 12px;
  margin-bottom: 32px;
  width: 100%;
}

.func-title {
  font-size: 13px;
  font-weight: 700;
  color: #888888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.feature-list-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  width: 100%;
}

.feature-row-item {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  box-sizing: border-box;
}

/* 🎥 EFEITO REATIVO DO CURSOR (VÍDEO 2): Estado padrão limpo e transparente */
.feature-header-block {
  display: inline-flex !important;
  align-items: center !important;
  background-color: transparent !important; /* Invisível por padrão */
  padding: 10px 20px !important;
  border-radius: 8px !important;
  margin-left: -20px !important; /* Compensa o padding para manter alinhamento esquerdo perfeito */
  margin-bottom: 12px !important;
  cursor: pointer;
  
  /* Transição suave e linear de cor, fundo e transformação */
  transition: background-color 0.2s ease, transform 0.25s ease;
}

/* 🎯 HOVER DA TARJA: Ativa o bloco preto e o salto lateral suave apenas no cabeçalho */
.feature-header-block:hover {
  transform: translateX(6px);
  background-color: #111111 !important; /* Ganha o fundo preto */
}

/* COMPORTAMENTO DO TEXTO NO HOVER */
.feature-block-title {
  font-size: 18px;
  font-weight: 700;
  color: #212121 !important; /* Escuro por padrão */
  margin: 0 !important;
  line-height: 1;
  transition: color 0.2s ease;
}
.feature-header-block:hover .feature-block-title {
  color: #ffffff !important; /* Torna-se branco no hover */
}

/* COMPORTAMENTO DO ÍCONE NO HOVER */
.feature-block-icon {
  width: 22px !important;
  height: 22px !important;
  margin-right: 12px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important; /* Preto original por padrão */
  transition: filter 0.2s ease;
}
.feature-header-block:hover .feature-block-icon {
  filter: brightness(0) invert(1) !important; /* Inverte e ganha cor branca no hover */
}

/* Ajustes de escala óptica dos ícones gráficos puros */
.feature-block-icon.spec-journey {
  width: 25px !important;
  height: 25px !important;
}
.feature-block-icon.spec-doc {
  width: 18px !important;
  height: 18px !important;
}

/* DESCRIÇÃO DA LINHA */
.feature-row-desc {
  font-size: 14px;
  color: #444444;
  line-height: 1.6;
  margin: 0 !important;
  max-width: 92%;
}

/* BOTÃO DE ACESSO COM SOMBREAMENTO ULTRA LIGHT (SOFT GLOW CLARO) */
.btn-soft-glow-gradient {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  background: #1a1a1a;
  color: #ffffff !important;
  padding: 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.btn-soft-glow-gradient:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #2a2a2a 0%, #151515 100%) !important;
  border-color: #333333;
  
  /* Sombra leve e dispersa, eliminando o aspecto pesado anterior */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12), 
              0 0 8px rgba(40, 40, 40, 0.12) !important;
}

.btn-slides-icon {
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* COMPATIBILIDADE RESPONSIVA MOBILE */
@media (max-width: 768px) {
  .integracao-card { padding: 24px; }
  .feature-header-block { width: 100%; margin-left: 0 !important; padding: 10px 12px !important; }
  .feature-row-desc { max-width: 100%; }
}

/* --- ESTILOS DO NOVO CABEÇALHO DAS JORNADAS --- */

/* Bloco Externo (Banner) */
.journey-banner {
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

/* Modificador de Cores: Jornada Web */
.journey-banner--web {
  background-color: #EAF8D2; /* Fundo Exato */
  border: 1px solid #BED993; /* Borda Exata */
}

/* Modificador de Cores: Jornada API/Nativo */
.journey-banner--api {
  background-color: #FBE9C9; /* Fundo Exato */
  border: 1px solid #FDC256; /* Borda Exata */
}

/* Pílula Interna (Fundo envolta do ícone e texto) */
.journey-pill {
  display: inline-flex;
  align-items: center;        /* Garante o alinhamento vertical absoluto ao centro */
  justify-content: flex-start;
  background-color: #FBFAF3;  /* Cor exata da pílula */
  border-radius: 50px; 
  padding: 6px 20px 6px 6px;  /* 6px na esquerda para abraçar o ícone, 20px na direita para dar respiro ao texto */
}

/* Ícone 'U' */
.journey-main-icon {
  width: 40px; 
  height: 40px;
  object-fit: contain;
  display: block; 
  margin: 0 12px 0 0;         /* Margem apenas à direita para afastar o texto */
  flex-shrink: 0;             /* Impede que o ícone seja esmagado */
}

/* Texto Perfeitamente Centralizado */
.journey-main-text {
  font-size: 18px;
  font-weight: 600;
  color: #121212;             /* Um preto levemente mais suave e moderno */
  font-family: 'Atkinson Hyperlegible', 'Atkinson', sans-serif;
  line-height: 1 !important;  /* Trava a caixa delimitadora (bounding box) rente à fonte */
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  position: relative;
  top: 10px; /* Ajuste manual mantido conforme sua última calibragem */
}

/* --- ESTILO DA DESCRIÇÃO DAS JORNADAS --- */
.func-description {
  font-size: 15px;
  color: #4c4e54; 
  margin-top: 8px; 
  margin-bottom: 24px; 
  line-height: 1.5;
  font-family: 'Atkinson Hyperlegible', 'Atkinson', sans-serif;
}

.func-description strong {
  color: #212121; 
}