/* CSS Document
Desenvolvedor WEB: Fabio Rocha (fabiorochafg.github.io) */

a {
    color: var(--primary);
    text-decoration: none;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}
a:hover {
    color: var(--primary);
}
blockquote {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.35em;
    padding-left: 2rem;
    position: relative;
}
blockquote::before,
.d-flex.services p.phrase::before {
    content: "\0022";
    color: var(--secondary-400);
    font-size: 3rem;
    position: absolute;
    top: -4px;
    left: -2.5rem;
}
blockquote::before {
    top: 10px;
    left: 0;
}
blockquote + .author {
    font-weight: 600;
    margin-top: 1rem;
    padding-left: 2rem;
}
blockquote + .author small {
    display: block;
    font-weight: 100;
    line-height: 1.25em;
    padding-left: 2rem;
}
blockquote + .author::before {
    content: "––";
    padding-right: 1rem;
}
code {
    background: var(--gray-100);
    display: inline-block;   
    font-size: .9rem;
    padding: .25rem .5rem;
}
dt {
    float: left;
    font-weight: 600;
    padding-right: .5rem;
}
dd {
    font-weight: 300;
}
dl dd:last-child {
    margin-bottom: 0;
}
h3 {
    color: var(--gray-800);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15em;
    margin-bottom: 0;
    padding-bottom: 1rem;
}
h2 span,
h3 span {
    color: var(--gray-600);
    display: block;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1em;
    text-transform: none;
}
aside h3 {
    color: var(--black);
    font-size: 2.25rem;
}
aside h3 span {
    color: var(--gray-600);
    font-size: 1.75rem;
}
h4 {
    font-size: 1.2rem;
    font-weight: 600;
}
p strong {
    color: var(--primary);
    font-weight: 600;
}
pre {
    font-size: .9rem;
    line-height: 1.5rem;
    margin-top: .75rem;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    overflow: auto;
    width: 100%;
}
thead th {
    border-bottom: 2px solid var(--black);
    font-size: 1rem;
    line-height: 1.1em;
    padding: .8rem 1.5rem .5rem;
    text-align: left;
}
tbody td,
tfoot td {
    background-color: var(--white);
    border-bottom: 2px solid var(--gray-200);
    font-size: 1rem;
    padding: .8rem 1.5rem;
}
.sticky-head-line {
    max-height: 80vh;
    position: relative;
}
.sticky-head-line thead th {
    background-color: var(--gray-100);
    position: sticky;
    top: 0;
}
/* #endregion */

/* #region Forms */
button,
input[type="button"],
input[type="submit"] {
    background-color: var(--primary);
    border: 0 none;
    border-radius: var(--border-radius);
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 3rem;
    width: 100%;    
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
    -webkit-appearance: none;
}
input[type="checkbox"] {
    height: 32px;
    width: 20px;
}
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="url"],
select,
textarea {
    background-color: var(--white);
    border: 0 none;
    border-bottom: 2px solid var(--secondary);
    border-radius: 0;
    font-size: 1rem;
    height: 40px;
    margin-bottom: 1rem;
    padding: 1rem 0;
    width: 100%;
}
input[type="date"]:not([required]),
input[type="email"]:not([required]),
input[type="number"]:not([required]),
input[type="password"]:not([required]),
input[type="search"]:not([required]),
input[type="text"]:not([required]),
input[type="url"]:not([required]),
select:not([required]),
textarea:not([required]) {
    border-color: var(--gray-100);
}
input[type="date"]:focus,
input[type="date"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    border-color: var(--gray-600);
    outline: 0 none;
}
input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: var(--gray-100);
    border-radius: var(--border-radius);
    height: 10px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}
select {
    padding: 0 .5rem 0 0;
}
textarea {
    height: 100px;
    padding: .5rem 0;
}
form.small {
    margin: 0 auto;
    width: 30%;
}
form .d-flex {
    gap: 1rem 2rem;
}
form .d-flex input[type="date"],
form .d-flex input[type="email"],
form .d-flex input[type="number"],
form .d-flex input[type="password"],
form .d-flex input[type="search"],
form .d-flex input[type="text"],
form .d-flex input[type="url"],
form .d-flex select,
form .d-flex textarea {
    margin-bottom: 0;
}
form .d-flex input[type="date"] + .help,
form .d-flex input[type="email"] + .help,
form .d-flex input[type="number"] + .help,
form .d-flex input[type="password"] + .help,
form .d-flex input[type="search"] + .help,
form .d-flex input[type="text"] + .help,
form .d-flex input[type="url"] + .help,
form .d-flex select + .help,
form .d-flex textarea + .help {
    margin-top: .5rem;
}
form .d-flex > .flex-item {
    flex-basis: 180px;
    align-self: baseline;
}
fieldset {
    background-color: var(--white);
    border: 0 none;
    border-radius: var(--border-radius);
    margin: 1rem 0;
    min-width: 0; /* Chrome and Firefox set a `min-width: -webkit-min-content;` */
    padding: 2rem;
    width: 100%;
}
legend {
    color: var(--gray-800);
    font-weight: 600;
}
label {
    display: inline-block;
    font-size: .9rem;
    width: 100%;
}
#form-filter {
    background-color: var(--gray-200);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    padding: .5rem 1rem;
}
#form-filter .d-flex {
    align-items: center;
    justify-content: flex-start;
}
#form-filter .d-flex > .flex-item {
    display: flex;
    align-items: center;
    align-self: auto;
    flex-basis: auto;
    flex-grow: 0;
    gap: .5rem;
}
#form-filter h3 {
    color: var(--gray-300);
    font-size: 1.5rem;
    padding-bottom: 0;
}
#form-filter label {
    width: auto;
}
#form-filter input[type="date"],
#form-filter input[type="email"],
#form-filter input[type="number"],
#form-filter input[type="password"],
#form-filter input[type="search"],
#form-filter input[type="text"],
#form-filter input[type="url"],
#form-filter select,
#form-filter textarea {
    background-color: transparent;
    font-size: .9rem;
    max-width: 150px;
    width: auto;
}
.checkboxes {
    column-gap: 2rem;
    column-width: 140px;
    display: inline-block;
    width: 100%;
}
.checkboxes li {
    break-inside: avoid;
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1em;
    list-style: none;
    padding-bottom: .5rem;
}
.checkboxes label {
    display: inline;
}
.checkboxes + .help {
    margin-top: .5rem;
}
.help {
    color: var(--gray-600);
    font-size: .85rem;
}
.range-container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}
.range-container label {
    flex-basis: 100%;
}
span.range {
    background-color: var(--gray-100);
    border-radius: 50%;
    font-size: .8rem;
    height: 22px;
    line-height: 22px;
    text-align: center;
    width: 22px;
}
/* #endregion */

/* #region Functional Classes */
.bg-white {
    background-color: var(--whte);
    background-image: none;
}
.container {
    display: flex;
    flex-flow: column;
}
.container-fluid {
    padding-left: 6rem;
    padding-right: 6rem;
}
.data {
    border-top: 2px solid var(--gray-100);
    color: var(--gray-600);
    font-size: .85rem;
    margin-top: 3rem;
    padding-top: 1rem;
    text-align: right;
}
.duration {
    color: var(--gray-900);
    font-size: .8rem;
    font-weight: 300;
    margin-top: .25rem;
}
.false {
    color: var(--error) !important;
}
.float-end {
    float: right;
}
.me-05 {
    margin-right: .5rem;
}
.mt-6 {
    margin-top: 6rem !important;
}
.text-transform-none {
    text-transform: none;
}
.true {
    color: var(--success-900) !important;
}
/* #endregion */

/* #region Flex */
.d-flex {
    flex-wrap: wrap;
    gap: 4rem;
}
.d-flex > .flex-item {
    flex-basis: 180px;
    flex-grow: 1;
    flex-shrink: 0;
}
.align-items-center {
    align-items: center !important;
}
.align-items-start {
    align-items: start !important;
}
.basis-half-width {
    flex-basis: 50% !important;
}
.basis-full-width {
    flex-basis: 100% !important;
}
.flex-basis-auto {
    flex-basis: auto !important;
}
.flex-grow-0 {
    flex-grow: 0 !important;
}
.flex-grow-2 {
    flex-grow: 2 !important;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-wrap {
    flex-wrap: wrap;
}
.gap-2 {
    gap: 2rem;
}
.gap-6 {
    gap: 6rem;
}
/* #endregion */

/* #region Flex Cards */
.d-flex.cards {
    gap: 1rem 0;
}
.d-flex.cards > .flex-item {
    background-color: var(--white);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 1rem 4rem;
    justify-content: space-between;
    padding: 2rem;
}
.timeline .d-flex.cards > .flex-item {
    background-color: var(--gray-100);
}
.d-flex.cards > .flex-item > * {
    flex-basis: 265px;
    flex-grow: 1;
    margin-bottom: 0;
}
.d-flex.cards dl {
    flex-basis: 300px;
}
.d-flex.cards dt {
    min-width: 100px;
    text-align: right;
}
.d-flex.cards dl.lg dt {
    min-width: 200px;
}
.d-flex.cards dd {
    margin-bottom: 0;
}
.d-flex.cards img {
    display: block;
}
.d-flex.cards ol {
    display: flex;
    flex-flow: column;
    gap: .5rem 0;
    padding-top: .5rem;
    padding-left: 1rem;
}
.d-flex.cards .logotipoCliente {
    flex-basis: 187px;
    min-height: 148px;
}
.d-flex.cards .linksOpcoes {
    justify-content: end;
}
.d-flex.cards .photo-gravatar {
    flex-basis: 100px;
    flex-grow: 0;
}
.d-flex.cards .title-container {
    flex-basis: 350px;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 0;
}
.d-flex.cards .title-container h3 {
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 0;
}
.d-flex.cards .title-container .status-container {
    margin-bottom: 0;
}
.d-flex.cards.compact > .flex-item {
    gap: 1rem 2rem;
    padding: 1rem;
}
.d-flex.cards.compact .title-container h3 {
    font-size: 1.5rem;
    padding-bottom: .5rem;
}
/* #endregion */

/* #region Flex Panels */
.d-flex.panels {
    gap: 2rem;
}
.d-flex.panels + .d-flex.panels {
    margin-top: 1rem;
}
.d-flex.panels > .flex-item.basis-half-width {
    flex-basis: calc(50% - 2rem) !important;
}
.d-flex.panels > .flex-item.colored .title,
.d-flex.panels > .flex-item.colored .title span,
.d-flex.panels > .flex-item.colored .number,
.d-flex.panels > .flex-item.colored span.description {
    color: var(--white);
}
.d-flex.panels > .flex-item {
    background-color: var(--tertiary);
    border-radius: var(--border-radius);
    flex-basis: 265px;
    padding: 2rem;
    position: relative;
    width: 100%;
}
.d-flex.panels fieldset {
    padding: 0;
}
.d-flex.panels .title {
    color: var(--black);
    font-size: 1.5rem;
    position: relative;
}
.d-flex.panels .title span {
    display: block;
    color: var(--gray-900);
    font-size: 1.1rem;
    line-height: 1.1em;
    margin-top: .25rem;
}
.d-flex.panels .description {
    color: var(--black);
}
.d-flex.panels .number {
    display: block;
    font-size: 4rem;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
}
.d-flex.panels .number small {
    display: block;
    font-size: .9rem;
    line-height: 1rem;
}
.d-flex.panels .tag-container,
.d-flex.panels > .flex-item > .tag {
    position: absolute;
    top: -10px;
}
.d-flex.panels ul {
    list-style: none;
}
.d-flex.panels .panel-icon {
    display: flex;
    gap: 1rem;
}
.d-flex.panels .panel-icon > * {
    flex-grow: 1;
}
.d-flex.panels .panel-icon span.fa {
    background-color: var(--secondary);
    border-radius: 10px;
    color: var(--white);
    align-self: baseline;
    flex-grow: 0;
    font-size: 1.5rem;
    padding: 1rem;
}
.d-flex.panels .panel-icon p {
    font-size: 1.1rem;
}
.d-flex.panels .panel-icon p strong {
    color: var(--secondary);
    font-weight: 600;
}
.d-flex.panels.news > .flex-item {
    display: flex;
    flex-flow: column;
    flex-basis: 280px !important;
}
.d-flex.panels.news .data {
    margin-top: auto;
}
.d-flex.panels.indicators > .flex-item {
    display: flex;
    align-items: center;
    flex-basis: 165px;
    gap: 2rem;
    justify-content: space-between;
    padding: 1rem 2rem;
}
.d-flex.panels.indicators > .flex-item h3.title {
    padding-bottom: 0;
}
.d-flex.panels.indicators > .flex-item .number {
    font-size: 3rem;
    margin: 0;
}
.d-flex.panels.goals {
    gap: 1rem;
}
.d-flex.panels > .flex-item.goal {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 2rem;
}
.d-flex.panels > .flex-item.goal h3.title {
    flex-basis: 50px;
    flex-grow: 1;
    font-size: 1.1rem;
    order: 1;
    padding-bottom: 0;
}
.d-flex.panels > .flex-item.goal p {
    flex-basis: 75px;
    font-size: 2rem;
    line-height: 1em;
    margin-bottom: 0;
    order: 2;
    text-align: right;
}
.d-flex.panels > .flex-item.goal p small {
    color: var(--gray-100);
    font-size: .9rem;
    font-weight: 600;
    padding-left: .25rem;
}
.d-flex.panels > a.flex-item.goal:hover {
    border-radius: 10px;
    color: var(--white);
}
.d-flex.panels-container {
    gap: 2rem;
}
.d-flex.panels-container > .flex-item:last-child {
    flex-basis: 20%;
    flex-grow: 0;
}
/* #endregion */

/* #region Flex Results */
.d-flex.results {
    gap: 1rem;
    justify-content: flex-start;
}
.d-flex.results > .flex-item {
    flex-basis: 10px;
}
.d-flex.results > .flex-item.number {
    font-size: 2rem;
    text-align: left;
}
.d-flex.results > .flex-item.number small {
    font-size: .9rem;
}
/* #endregion */

/* #region Flex Services */
.d-flex.services {
    gap: 2rem;
}
.d-flex.services .d-flex {
    align-items: stretch;
    justify-content: stretch;
}
.d-flex.services .person {
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.d-flex.services .person img {
    margin-bottom: -2rem;
    width: 55%;
}
.d-flex.services .person.radna img {
    align-self: end;
    order: 2;
    width: 65%;
}
.d-flex.services p.phrase {
    color: var(--secondary-200);
    display: inline;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.2em;
    margin-bottom: 0;
    position: relative;
    text-transform: none;
}
.d-flex.services .title {
    padding-bottom: 1rem;
}
/* #endregion */

/* #region Flex Stats */
.d-flex.stats {
    align-items: stretch;
}
.d-flex.stats > .flex-item {
    flex-basis: 50px;
    text-align: center;
}
.d-flex.stats > .flex-item h4 {
    color: var(--gray-600);
    padding-bottom: 1rem;
}
/* #endregion */

/* #region Components */
.badge {
    --bs-badge-border-radius: 25px;

    background-color: var(--gray-600);
}
.box {
    background-color: var(--secondary-900);
    border-radius: 50px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    line-height: 1.5em;
    padding-right: 2rem;
}
.box p {
    margin-bottom: 0;
}
.box strong {
    color: var(--white);
    display: block;
    font-size: 1.6rem;
}
.box .photo-gravatar {
    border: 5px solid var(--secondary);
    max-height: 100px;
}
.box .contacts {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.box .contacts a {
    background-color: var(--secondary-700);
}
.box .contacts a:hover {
    background-color: var(--secondary-800);
}
.box.boxInfo {
    background-color: var(--info-900);
}
.box.boxInfo .photo-gravatar {
    border-color: var(--info-600);
}
.box.sm {
    font-size: 1rem;
}
.box.sm strong {
    font-size: 1.25rem;
}
.card-group {
    gap: 2rem;
}
.card {
    --bs-card-border-width: 0;

    border-radius: var(--border-radius) !important;
}
.card-body {
    padding: 2rem;
}
.card-title {
    font-size: 1.5rem;
}
.checked {
    padding: .5rem 0 .5rem 1.5rem;
    position: relative;
}
.checked::before {
    color: var(--success);
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 10px;
}
.columns.boxes {
    column-count: 3;
    column-gap: 2rem;
    column-width: 300px;
}
.columns.boxes > .column-item {
    background-color: var(--white);
    border-radius: var(--border-radius);
    break-inside: avoid;
    margin-bottom: 2rem;
    padding: 2rem;
}
.colored {
    background-color: var(--primary) !important;
    color: var(--white);
}
.colored.error {
    background-color: var(--error-900) !important;
}
.colored.info {
    background-color: var(--info-900) !important;
}
.colored.success {
    background-color: var(--success) !important;
}
.colored.warning {
    background-color: var(--warning-900) !important;
}
.contacts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0;
}
.contacts li {
    list-style: none;
}
.contacts a {
    background-color: var(--primary);
    border-radius: 25px;
    color: var(--white);
    display: block;
    font-size: 1.2rem;
    height: 42px;
    line-height: 42px;
    text-align: center;
    width: 42px;
}
.contacts a:hover {
    background-color: var(--primary);
    color: var(--white);
}
ul.linksAsList li {
    margin-bottom: 2px;
}
ul.linksAsList li a {
    background-color: var(--gray-100);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: .5rem 1rem;
}
ul.linksAsList li a:hover {
    background-color: var(--primary-200);
    color: var(--white);
}
.linksOpcoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-left: 0;
}
.linksOpcoes li {
    list-style: none;
}
table .btn,
.linksOpcoes .btn {
    font-size: .8rem;
    font-weight: 600;
    padding: .5rem 1rem;
}
.photo-gravatar {
    border-radius: 50%;
}
.shadow {
    background-color: rgba(var(--secondary-rgb), .75);
}
.status-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
    width: 100%;
}
.status {
    border-radius: var(--border-radius);
    color: var(--gray-700);
    display: inline-block;
    font-size: .8rem;
    padding: .25rem .5rem;
}
.status .fa {
    margin-left: .25rem;
}
.status.default {
    background-color: var(--gray-200);
    color: var(--gray-600);
}
.status.error {
    background-color: var(--error-200);
}
.status.info {
    background-color: var(--info-200);
}
.status.success {
    background-color: var(--success-200);
}
.status.warning {
    background-color: var(--warning-300);
}
.status.funk {
    background-color: var(--gray-800);
    color: var(--white);
}
.status.rock {
    background-color: var(--error-800);
    color: var(--white);
}
.status.pop {
    background-color: var(--warning-800);
    color: var(--white);
}
.status.top {
    background-color: var(--success-800);
    color: var(--white);
}
.title-container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem 5rem;
    justify-content: space-between;
    padding-bottom: 2rem;
}
.title-container h2 {
    padding-bottom: 0;
}
/* #endregion */

/* #region Component: Buttons */
.btn {
    --bs-btn-bg: var(--primary);
    --bs-btn-color: var(--white);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1em;
    --bs-btn-padding-x: 3rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--border-radius);
    
    text-align: center;
}
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-color: var(--white);
    --bs-btn-hover-bg: var(--primary-300);
    --bs-btn-hover-color: var(--white);
}
.btn-secondary {
    --bs-btn-bg: var(--primary-300);
    --bs-btn-color: var(--white);
    --bs-btn-hover-bg: var(--primary-200);
    --bs-btn-hover-color: var(--white);
}
.btn.btn-filter {
    background-color: var(--gray-100);
    color: var(--gray-800);
    font-size: .9rem;
    padding: 0.5rem 1rem;
}
.btn.btn-filter:active,
.btn.btn-filter:hover {
    background-color: var(--gray-300);
}
.btn.btn-filter.active {
    background-color: var(--success-500);
}
.btn-link {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--primary-100);
    --bs-btn-hover-color: var(--primary-200);
    --bs-btn-hover-bg: transparent;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;

    text-decoration: none;
}
.btn .fa,
.btn .fas {
    margin-right: .5rem;
}
.btn.only-icon .fa {
    margin-right: 0;
}
.btn.one {
    display: table;
    margin: 0 auto;
}
.btnError {
    background-color: var(--error-600) !important; 
}
.btnError:hover {
    background-color: var(--error-900) !important;
}
.btnInfo {
    background-color: var(--info-600) !important; 
}
.btnInfo:hover {
    background-color: var(--info-900) !important;
}
.btnSuccess {
    background-color: var(--success-700) !important;
}
.btnSuccess:hover {
    background-color: var(--success-900) !important;
}
.btnWarning {
    background-color: var(--warning-700) !important;
}
.btnWarning:hover {
    background-color: var(--warning-900) !important;
}
/* #endregion */

/* #region Component: Infographic */
.infographic {
    list-style: none;
}
.infographic.style-01 {
    background-color: var(--primary);
    border-radius: 50%;
    height: 200px;
    position: relative;
    width: 200px;
    display: block;
    margin: 4rem auto;
}
.infographic.style-01 > div {
    background-color: var(--primary);
    border: 2px solid var(--gray-100);
    border-radius: 50%;
    color: var(--white);
    height: 90px;
    font-size: 80%;
    line-height: 90px;
    position: absolute;
    text-align: center;
    width: 90px;
}
.infographic.style-01 > div.two-lines {
    line-height: 1em !important;
    padding-top: 30px;
}
.infographic.style-01 > p {
    color: var(--white);
    font-size: 200%;
    height: 200px;
    line-height: 200px;
    position: absolute;
    text-align: center;
    width: 200px;
}
.infographic.style-01 .item-1 {
    top: -60px;
    left: calc(50% - 45px);
}
.infographic.style-01 .item-2 {
    top: -30px;
    right: -30px;
}
.infographic.style-01 .item-3 {
    top: calc(50% - 45px);
    right: -60px;
}
.infographic.style-01 .item-4 {
    top: 140px;
    right: -30px;
}
.infographic.style-01 .item-5 {
    bottom: -60px;
    left: calc(50% - 45px);
}
.infographic.style-01 .item-6 {
    top: 140px;
    left: -30px;
}
.infographic.style-01 .item-7 {
    top: calc(50% - 45px);
    left: -60px;
}
.infographic.style-01 .item-8 {
    top: -30px;
    left: -30px;
}
/* #endregion */

/* #region Component: Lists */
.list-inline {
    columns: 3 200px;
    column-gap: 2rem;
}
.list-inline > li {
    break-inside: avoid;
    line-height: 1.25;
    list-style: none;
    padding-left: 1.5rem;
    padding-bottom: .75rem;
    position: relative;
}
.list-inline > li::before {
    color: var(--success);
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-size: .9rem;
    font-weight: 600;
    position: absolute;
    top: 3px;
    left: 0;
}
.list-style-02 {
    counter-reset: number-counter;
    display: inline-block;
    list-style: none;
}
.list-style-02 > li {
    background-color: transparent;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.5em;
    margin-bottom: 1rem;
    padding: 0;
    position: relative;
}
.list-style-02 > li:before {
    background-color: var(--gray-100);
    border-radius: 6px;
    color: var(--white);
    content: counter(number-counter, decimal-leading-zero);
    counter-increment: number-counter;
    flex-basis: 50px;
    flex-shrink: 0;
    font-size: 2rem;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-shadow: 0px 0px 2px rgb(0 0 0 / 20%);
    width: 50px;
}
body.area-restrita .list-style-02 > li:before {
    background-color: var(--white);
    color: var(--gray-200);
    text-shadow: 0 0 0;
}
.info > .list-style-02 > li:before {
    color: var(--info-900) !important;
}
.list-style-02 h4 {
    line-height: 1.2em;
    padding-bottom: 0;
}
.list-style-02 p {
    font-weight: 300;
    line-height: 1.35em;
}
.list-style-02 p:not(:only-child) {
    padding-top: .25rem;
}
.list-style-02 .list-inline {
    column-count: 1;
    font-weight: 300;
    padding-top: .25rem;
}
.list-style-02 .list-inline > li {
    padding-bottom: 0;
}
/* #endregion */

/* #region Component: Messages */
.msg {
    border-radius: var(--border-radius);
    color: var(--black);
    margin-bottom: 2rem;
    padding: 1rem 2rem;
    width: 100%;
}
.msg.error {
    background-color: var(--error-300);
}
.msg.info {
    background-color: var(--info-300);
}
.msg.success {
    background-color: var(--success-300);
}
.msg.warning {
    background-color: var(--warning-300);
}
/* #endregion */

/* #region Component: Progress Circle */
.progress-circle {
    background-color: var(--gray-100);
    border-radius: 50%;
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
}
.progress-circle:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: colorload 2s;
    animation: colorload 2s;
}
.progress-circle span {
    background-color: var(--white);
    border-radius: 50%;
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 600;
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    text-align: center;
    z-index: 1;
}
.progress-circle span:after {
    content: "%";
    font-size: .8rem;
    font-weight: 300;
    padding-left: .1rem;
}
.progress-circle.colored.error {
    --gray-100: var(--error-800);
}
.progress-circle.colored.error span {
    background-color: var(--error-900);
    color: var(--white);
}
.progress-circle.colored.warning span {
    background-color: var(--warning-900);
    color: var(--white);
}
.progress-circle.colored.danger,
.progress-circle.colored.success,
.progress-circle.colored.warning {
    --primary: var(--white);
}
.progress-circle.colored.success {
    --gray-100: var(--success-600);
}
.progress-circle.colored.warning {
    --gray-100: var(--warning-600);
}
.progress-circle.colored.success span {
    background-color: var(--success);
    color: var(--white);
}
.progress-circle.error span {
    color: var(--danger);
}
.progress-circle.progress-0:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(90deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-1:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(93.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-2:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(97.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-3:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(100.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-4:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(104.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-5:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(108deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-6:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(111.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-7:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(115.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-8:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(118.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-9:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(122.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-10:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(126deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-11:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-12:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-13:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-14:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-15:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-16:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-17:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-18:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-19:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(144deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-20:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(151.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-21:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(158.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-22:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(161.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-23:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(165.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-24:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(169.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-25:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(180deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-26:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(183.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-27:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(187.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-28:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(190.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-29:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(194.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-30:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(198deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-31:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(201.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-32:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(205.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-33:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(208.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-34:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(212.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-35:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(216deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-40:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(234deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-36:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(219.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-37:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(223.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-38:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(226.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-39:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(230.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-41:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(237.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-42:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(241.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-43:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(244.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-44:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(248.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-45:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(252deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-46:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(255.6deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-47:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(259.2deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-48:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(262.8deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-49:after {
  background-image: linear-gradient(90deg, var(--gray-100) 50%, transparent 50%, transparent), linear-gradient(266.4deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-50:after {
  background-image: linear-gradient(-90deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-51:after {
  background-image: linear-gradient(-86.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-52:after {
  background-image: linear-gradient(-82.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-53:after {
  background-image: linear-gradient(-79.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-54:after {
  background-image: linear-gradient(-75.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-55:after {
  background-image: linear-gradient(-72deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-56:after {
  background-image: linear-gradient(-68.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-57:after {
  background-image: linear-gradient(-64.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-58:after {
  background-image: linear-gradient(-61.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-59:after {
  background-image: linear-gradient(-57.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-60:after {
  background-image: linear-gradient(-54deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-61:after {
  background-image: linear-gradient(-50.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-62:after {
  background-image: linear-gradient(-46.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-63:after {
  background-image: linear-gradient(-43.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-64:after {
  background-image: linear-gradient(-39.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-65:after {
  background-image: linear-gradient(-36deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-66:after {
  background-image: linear-gradient(-32.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-67:after {
  background-image: linear-gradient(-28.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-68:after {
  background-image: linear-gradient(-25.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-69:after {
  background-image: linear-gradient(-21.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-70:after {
  background-image: linear-gradient(-18deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-71:after {
  background-image: linear-gradient(-14.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-72:after {
  background-image: linear-gradient(-10.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-73:after {
  background-image: linear-gradient(-7.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-74:after {
  background-image: linear-gradient(-3.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-75:after {
  background-image: linear-gradient(0deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-76:after {
  background-image: linear-gradient(3.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-77:after {
  background-image: linear-gradient(7.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-78:after {
  background-image: linear-gradient(10.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-79:after {
  background-image: linear-gradient(14.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-80:after {
  background-image: linear-gradient(18deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-81:after {
  background-image: linear-gradient(21.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-82:after {
  background-image: linear-gradient(25.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-83:after {
  background-image: linear-gradient(28.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-84:after {
  background-image: linear-gradient(32.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-85:after {
  background-image: linear-gradient(36deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-86:after {
  background-image: linear-gradient(39.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-87:after {
  background-image: linear-gradient(43.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-88:after {
  background-image: linear-gradient(46.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-89:after {
  background-image: linear-gradient(50.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-90:after {
  background-image: linear-gradient(54deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-91:after {
  background-image: linear-gradient(57.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-92:after {
  background-image: linear-gradient(61.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-93:after {
  background-image: linear-gradient(64.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-94:after {
  background-image: linear-gradient(68.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-95:after {
  background-image: linear-gradient(72deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-96:after {
  background-image: linear-gradient(75.6deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-97:after {
  background-image: linear-gradient(79.2deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-98:after {
  background-image: linear-gradient(82.8deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-99:after {
  background-image: linear-gradient(86.4deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }

.progress-circle.progress-100:after {
  background-image: linear-gradient(90deg, var(--primary) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--primary) 50%, var(--gray-100) 50%, var(--gray-100)); }
/* #endregion */

/* #region Component: Tabs */
.tabs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: 0 0 .25rem;
    position: relative;
    width: 100%;
}
.tabs li {
    flex-shrink: 0;
    list-style: none;
}
.tabs a {
    background-color: var(--gray-200);
    border-radius: 25px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    padding: .25rem 1rem;
}
.tabs li.active a {
    background-color: var(--primary);
    color: var(--white);
    position: relative;
    z-index: 2;
}
.tabs .badge {
    margin-left: .5rem;
}
.tab {
    width: 100%;
}
/* #endregion */

/* #region Component: Tag */
.tag-container {
    display: flex;
    gap: .5rem;
}
.tag {
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    color: var(--white);
    font-size: .8rem;
    padding: .25rem 1rem;
}
.tag.error {
    background-color: var(--error);
}
.tag.info {
    background-color: var(--info);
}
.tag.success {
    background-color: var(--success);
}
.tag.warning {
    background-color: var(--warning);
    color: var(--black);
}
.tag-cloud {
    display: flex;
    align-items: center;
    gap: .25rem .75rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0 !important; /* para resetar o comportamento de UL dentro de .d-flex */
    width: 100%;
}
.tag-cloud > li {
    flex-basis: 10px;
    flex-grow: 0;
    line-height: 1.2;
    list-style: none;
    white-space: nowrap;
}
.tag-cloud li[data-weight="1"] {
    color: var(--secondary-400);
    font-size: 1.25rem;
    font-weight: 300;
}
.tag-cloud li[data-weight="2"] {
    color: var(--secondary-500);
    font-size: 1.5rem;
    font-weight: 400;
}
.tag-cloud li[data-weight="3"] {
    color: var(--secondary-600);
    font-size: 1.75rem;
    font-weight: 500;
}
.tag-cloud li[data-weight="4"] {
    color: var(--secondary-700);
    font-size: 2rem;
    font-weight: 600;
}
.tag-cloud li[data-weight="5"] {
    color: var(--secondary-800);
    font-size: 2.25rem;
    font-weight: 800;
}
.tag-cloud li[data-weight="6"] {
    color: var(--secondary-900);
    font-size: 2.5rem;
    font-weight: 700;
}
/* #endregion */

/* #region Component: Timeline */
.timeline {
    display: flex;
    flex-flow: column;
    gap: 1.5rem;
    list-style: none;
    position: relative;
}
.timeline::before {
    background-color: var(--gray-300);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 2.5rem;
    width: 2px;
}
.timeline-item {
    background-color: var(--white);
    border-radius: 25px 25px 25px 10px;
    display: flex;
    flex-flow: column;
    margin-left: 4rem;
    padding: 1rem;
    position: relative;
}
.timeline-date {
    background-color: var(--gray-500);
    border-radius: var(--border-radius);
    color: var(--gray-200);
    font-size: .85rem;
    font-weight: 600;
    padding: .25rem .5rem;
    position: absolute;
    left: -6rem;
}
.timeline-date.info {
    background-color: var(--info);
    color: var(--black);
}
.timeline-date.success {
    background-color: var(--success);
    color: var(--black);
}
.timeline-date.warning {
    background-color: var(--warning);
    color: var(--black);
}
.timeline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: start;
    position: relative;
}
.timeline-header .title-container {
    align-items: center;
    gap: 1rem;
    padding-bottom: 0;
}
.timeline-header .photo-gravatar {
    border: 1px solid var(--primary-300);
}
.timeline-header h3 {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0;
    position: relative;
}
.timeline-header small {
    color: var(--gray-600);
    display: block;
    font-size: .9rem;
    font-weight: 400;
    text-transform: none;
}
.timeline-header .status-container {
    margin-bottom: 0;
    width: auto;
}
.timeline-content {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 1rem 4rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    position: relative;
    width: 100%;
}
.timeline-content:before {
    background-color: var(--gray-100);
    content: '';
    height: 1px;
    position: absolute;
    top: -.5rem;
    width: 60px;
}    
.timeline-content p {
    flex-basis: 100px;
    flex-grow: 1;
}
.timeline-content ol {
    padding-left: 1rem;
}
.timeline-content .linksOpcoes {
    flex-shrink: 0;
}
/* #endregion */

/* #region Nav */
#menu-restrito-container .container-fluid {
    border-bottom: 1px solid var(--gray-200);
}
#menu-restrito-container .offcanvas-header {
    padding: 2rem 2rem 0;
}
#menu-restrito-container .offcanvas-body {
    padding: 1.5rem 2rem 2rem;
}
nav#menu-restrito a {
    border-radius: var(--border-radius);
    color: var(--black);
    display: flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1px;
    padding: .25rem 1rem;
}
nav#menu-restrito a:hover {
    background-color: var(--primary-200);
    color: var(--white);
}
nav#menu-restrito a span.fa {
    color: var(--gray-400);
    font-size: .9rem;
    margin-right: .5rem;
    text-align: center;
    width: 15px;
}
nav#menu-restrito a img,
nav#menu-restrito a span.title {
    display: inline-flex;
    align-items: center;
    flex-grow: 1;
}
nav#menu-restrito a span.title .badge {
    margin-left: auto;
}
body.menuAtendimentos nav#menu-restrito a.menuAtendimentos,
body.menuCoins nav#menu-restrito a.menuCoins,
body.menuCoinsAcao nav#menu-restrito a.menuCoinsAcao,
body.menuCoinsMeta nav#menu-restrito a.menuCoinsMeta,
body.menuCoinsPremio nav#menu-restrito a.menuCoinsPremio,
body.menuContratos nav#menu-restrito a.menuContratos,
body.menuDashboard nav#menu-restrito a.menuDashboard,
body.menuDocumentos nav#menu-restrito a.menuDocumentos,
body.menuDeclaracoes nav#menu-restrito a.menuDeclaracoes,
body.menuEmpresas nav#menu-restrito a.menuEmpresas,
body.menuFuncionarios nav#menu-restrito a.menuFuncionarios,
body.menuPermissoes nav#menu-restrito a.menuPermissoes,
body.menuPessoasFisicas nav#menu-restrito a.menuPessoasFisicas,
body.menuRedesSociais nav#menu-restrito a.menuRedesSociais,
body.menuRelatorios nav#menu-restrito a.menuRelatorios,
body.menuResultados nav#menu-restrito a.menuResultados,
body.menuServicos nav#menu-restrito a.menuServicos,
body.menuTarefas nav#menu-restrito a.menuTarefas,
body.menuUsuarios nav#menu-restrito a.menuUsuarios {
    background-color: var(--primary-500);
    color: var(--white);
    font-weight: 700;
}
nav#mobile {
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 0 20px 5px rgb(0 0 0 / 15%);
    display: none;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 1rem;
    position: fixed;
    bottom: 15px;
    left: var(--padding-x);
    right: var(--padding-x);
    width: calc(100% - (2 * var(--padding-x)));
    z-index: 100;
}
nav#mobile a {
    font-size: 1.1rem;
    padding: 1rem;
}
nav#mobile a.featured {
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgb(0 0 0 / 15%);
    color: var(--white);
    font-size: 1.5rem;
    height: 75px;
    line-height: 75px;
    margin-top: -10px;
    margin-bottom: -10px;
    padding: 0;
    text-align: center;
    width: 75px;
}
nav#mobile a.internal {
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgb(0 0 0 / 15%);
    color: var(--white);
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    width: 40px;
}
/* #endregion */

/* #region Header */
header.container {
    flex-flow: row;
    align-items: center;
    gap: 4rem;
    justify-content: space-between;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
header h1 {
    margin-bottom: 0;
}
h1 a {
    background-image: url(../images/logo.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 65px;
    text-indent: -9000px;
    width: 240px;
    &:hover {
        opacity: 0.8;
    }
}
header nav a:hover::after,
header nav a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}
header nav.active {
    background-color: var(--primary);
    border-radius: var(--border-radius);
    box-shadow: 0 0 20px 5px rgb(0 0 0 / 15%);
    display: block;
    padding: 1rem;
    position: absolute;
    right: 2rem;
    top: 5.5rem;
    width: auto;
    z-index: 1000;
}
header nav.active a {
    display: block;
    color: var(--white) !important; /* Para impedir estilo vindo de menus actives */
    padding: .5rem 1rem;
    text-align: right;
}
header nav [data-menu="onvio"] {
    color: var(--secondary);
}
body.area-servicos > header nav a[data-menu="servicos"],
body.area-sobre > header nav a[data-menu="empresa"],
body.area-conteudos > header nav a[data-menu="conteudos"],
body.area-utilidades > header nav a[data-menu="utilidades"] {
    color: var(--primary);
}
body.area-servicos > header nav a[data-menu="servicos"]:after,
body.area-sobre > header nav a[data-menu="empresa"]:after,
body.area-conteudos > header nav a[data-menu="conteudos"]:after,
body.area-utilidades > header nav a[data-menu="utilidades"]:after {
    background-color: var(--primary);
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}
body.area-restrita header {
    display: none;
}
header .toggleMenu {
    background-color: var(--primary-400);
    font-size: 1.2rem;
    height: 44px;
    padding: 0;
    width: 44px;
}
header .toggleMenu:before {
    content: "\f0c9";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
}
header .offcanvas-xl.show nav {
    flex-direction: column;
    padding: 4rem;
}
.offcanvas-header {
    padding: 4rem 4rem 0;
}
.offcanvas-title {
    font-size: 1.5rem;
    font-weight: 300;
    padding-bottom: 0;
}
/* #endregion */

/* #region Main */
article {
    font-size: 1.1rem;
    line-height: 1.75em;
    margin: 0 auto;
    max-width: 800px;
}
article > h2 {
    color: var(--black);
    font-size: 4rem;
    text-align: center;
    text-transform: none;
}
article > h3 {
    color: var(--gray-800);
    font-size: 1.8rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    position: relative;
    text-transform: none;
}
article > h3 span.count {
    color: var(--gray-100);
    font-size: 7rem;
    font-weight: 700;
    margin-right: 1rem;
    position: absolute;
    left: -6rem;
    top: 3rem;
}
article iframe {
    min-height: 400px;
    width: 100%;
}
article > p {
    font-size: 1.1rem;
    line-height: 1.5em;
}
article > img {
    padding-bottom: 1rem;
    width: 100%;
}
article > ol {
    padding-left: 3rem;
}
article > ul {
    padding-bottom: 1rem;
}
article > ul > li {
    background-color: var(--gray-100);
    color: var(--black);
    display: block;
    margin-bottom: .2rem;
    list-style: none;
    padding: .5rem 1rem;
}
article > .author {
    font-size: .85rem;
    line-height: 1.5em;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
article > .author a {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
}
article > .author .photo-gravatar {
    float: left;
    margin-right: .5rem;
}
article .btn {
    display: table;
    font-size: 1.4rem;
    margin: 2rem auto 0;
}
article > footer {
    border: 1px solid;
    border-radius: var(--border-radius);
    margin-top: 2rem;
    padding: 2rem;
}
article > footer h3 {
    font-size: 2rem;
    text-transform: none;
}
article.flex-item {
    flex-basis: 50% !important;
    margin: 0;
    max-width: 100%;
}
article.featured p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5em;
}
/* #endregion */

/* #region Section: Hero */
main#empresa {
    .featured-container {
        background-color: var(--primary-700);    
        background-image: url(../images/bg-index.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: var(--border-radius);
        padding: 4rem;
    }
    .featured {
        h2 {
            color: var(--white);
            font-size: 2.75rem;
            font-weight: 400;
            padding-bottom: 3rem;
            text-transform: none;
            strong {
                color: var(--tertiary);
                font-weight: 700;
            }
        }
        .d-flex {
            gap: 1rem 3rem;
            justify-content: start;
        }
    }
    .image-container {
        display: flex;
        flex-basis: 300px;
        margin-bottom: -4rem;
        position: relative;
        &::before {
            background-color: var(--tertiary);
            border-radius: 50px 50px 5px 50px;
            content: "";
            height: 45%;
            position: absolute;
            bottom: 28px;
            width: 100%;
            z-index: 2;    
        }
        &::after {
            background-color: var(--primary-700);
            border-radius: 50px 25px 5px 50px;
            content: "";
            height: 65%;
            position: absolute;
            bottom: 0;
            right: 4%;
            width: 90%;
            z-index: 1;
        }
        img {
            position: relative;
            width: 100%;
            z-index: 3;
            &::before {
                background-color: var(--primary-300);
                border-radius: 50px 25px 5px 50px;
                content: "";
                height: 65%;
                position: absolute;
                bottom: 0;
                right: 4%;
                width: 90%;
                z-index: 1;
            }
        }
    }
    .legenda {
        color: var(--black);
        font-size: .85rem;
        font-weight: 600;
        padding: .5rem;
        position: relative;
        text-align: right;
        z-index: 4;
    }
}
/* #endregion */

/* #region Section: Sobre */
section#sobre {
    background-attachment: fixed;
    background-image: url(../images/foto-sobre.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 4rem;
    position: relative;
}
section#sobre::before {
    background: rgba(var(--secondary-rgb), .5);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
section#sobre .container {
    justify-content: end;
    min-height: 600px;
}
section#sobre h2 {
    color: var(--white);
    position: relative;
}
section#sobre h2 span {
    color: var(--white);
}
/* #endregion */

/* #region Section: Depoimentos */
section#depoimentos {
    background-attachment: fixed;
    background-image: url(../images/bg-area-atuacao.jpg);
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    color: var(--white);
    display: inline-block;
    margin-top: 5rem;
    margin-bottom: -15rem;
    width: 100%;
}
section#depoimentos .container {
    padding-top: 6rem;
    padding-bottom: 15rem;
}
section#depoimentos .flex-item {
    flex-basis: 195px;
}
section#depoimentos h2 {
    color: var(--secondary-100);
}
section#depoimentos h2 span {
    color: var(--secondary-300);
}
section#depoimentos blockquote+p a {
    color: var(--white);
}
section#depoimentos blockquote+p a:hover {
    text-decoration: underline;
}
section#depoimentos .btn {
    background-color: var(--primary);
}
section#depoimentos .btn:hover {
    background-color: var(--primary);
}
/* #endregion */

/* #region Section: Contato */
section#contato {
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    color: var(--white);
    margin-top: 5rem;
    margin-bottom: -9rem;
    padding: 2rem 4rem;
    h2 {
        color: var(--white);
        font-size: 4rem;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        span {
            color: var(--tertiary);
        }
    }
    p.checked {
        font-size: 1.3rem;
        font-weight: 300;
        margin-bottom: .5rem;
        padding-left: 2rem;
        padding-bottom: 0;
        &:last-child {
            margin-bottom: 0;
        }
    }
    p.text {
        color: var(--gray-300);
        font-size: .9rem;
    }
}
/* #endregion */

/* #region Footer */
body > footer {
    background-color: var(--white);    
    .above-content {
        border-bottom: 2px solid var(--gray-100);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem 4rem;
        font-size: 1.1rem;
        font-weight: 300;
        padding-top: 8rem;
        padding-bottom: 5rem;
        width: 100%;        
        p {
            margin-bottom: .25rem;
        }
    }
}
body > footer > .container {
    padding-top: 6rem;
}
body > footer .botaoWhatsapp {
    background-color: var(--success-900);
    border-radius: 10px;
    color: var(--white);
    font-size: 1.5rem;
    height: 45px;
    line-height: 45px;
    opacity: 0.7;
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    text-align: center;
    width: 45px;
    z-index: 100;
}
body > footer .botaoWhatsapp:hover {
    opacity: 1;
}
body > footer .above-content > div {
    background-image: url(../images/logo-footer-black.svg);
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: auto 68px;
    padding-left: 120px;
}
body > footer .above-content .contacts {
    justify-content: center;
    margin-left: auto;
}
body > footer .middle-content {
    font-size: .85rem;
    gap: 1rem 4rem;    
    dl {
        padding-left: 2.25rem;
        position: relative;
    }
}
body > footer .middle-content dl:before {
    color: var(--gray-300);
    font-family: "Font Awesome 5 Free";
    font-size: 1.25rem;
    font-weight: 500;
    position: absolute;
    top: -5px;
    left: 0;
}
body > footer .middle-content dl.address:before {
    content: "\f3c5";
    font-weight: 600;
}
body > footer .middle-content dl.id-card:before {
    content: "\f2c2";
}
body > footer .middle-content dl.email:before {
    content: "\f0e0";
}
body > footer .middle-content dl.phones:before {
    content: "\f232";
    font-family: 'Font Awesome 5 Brands';
    font-weight: 600;
}
body > footer .middle-content dd {
    font-weight: 400;
    margin-bottom: 0;
}
body > footer .middle-content dd a:hover {
    color: var(--primary);
}
body > footer .below-content {
    border-top: 2px solid var(--gray-100);
    padding-top: 2rem;
    padding-bottom: 2rem;
}
body > footer .below-content > ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 2rem;
    float: left;
    list-style: none;
    padding: 0;
}
body > footer .below-content li a {
    color: var(--primary);
    font-size: .8rem;
    font-weight: 600;
}
body > footer .below-content li a:hover {
    color: var(--primary);
}
body > footer .below-content > p {
    color: var(--gray-500);
    float: right;
    font-size: .85rem;
    text-align: right;
}
body.area-restrita > footer {
    background-color: var(--gray-100);
    background-image: none;
}
body.area-restrita > footer .above-content {
    padding-top: 0;
}
body.area-restrita > footer .botaoWhatsapp {
    display: none;
}
/* #endregion */

/* #region Area Restrita */
body.area-restrita {
    background-color: var(--gray-100);
    background-image: none;
}
/* #endregion */

@media screen and (max-width: 1900px) {
    main#empresa {
        .image-container::before {
            border-radius: 50px 50px 25px 50px;
            bottom: 0;
        }
        .image-container::after {
            border-radius: 50px 50px 25px 50px;
        }
        .legenda {
            display: none;
        }
    }
}
@media screen and (max-width: 1400px) {
    main#empresa .featured h2 {
        font-size: 3rem;
    }
}
@media screen and (max-width: 1100px) {
    main#empresa .image-container {
        margin: 0 -4rem 4rem;
        order: 1;
    }
    main#empresa .featured {
        order: 2;
    }
    .container-fluid {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}
@media screen and (max-width: 845px) {
    h2 {
        font-size: 2rem;
    }
    h2 span {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    h3 span {
        font-size: 1.5rem;
        font-weight: 400;
    }
    article > h2 {
        font-size: 3rem;
    }
    article > img {
        margin-left: calc(-1 * calc(var(--bs-gutter-x) * .5));
        margin-right: calc(-1 * calc(var(--bs-gutter-x) * .5));
        width: calc(100% + 4rem);
    }
    .d-flex {
        gap: 1rem;
    }
    .d-flex.cards {
        flex-wrap: nowrap;
        gap: 1rem;
        overflow-x: auto;
    }
    .d-flex.panels {
        gap: 1.5rem;
    }
    .d-flex.services .title-container h3 {
        font-size: 2rem;
    }
    header.container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    main#empresa .container > .d-flex:first-child {
        gap: 0;
    }
    main#empresa .featured {
        flex-basis: 100%;
    }
    main#empresa .featured .d-flex {
        justify-content: center;
    }
    main#empresa .featured h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        padding: 1rem 0 1.5rem;
        text-align: center;
    }
    main#empresa .image-container::before {
        border-radius: 0;
        bottom: 28px;
    }
    main#empresa .image-container::after {
        border-radius: 50px var(--border-radius) 50px 50px;
    }
    section#depoimentos {
        background-attachment: scroll;
    }
    section#contato {
        margin-top: 1rem;
        padding: 2rem;
    }
    section#contato h2 {
        font-size: 3rem;
    }
    section#contato .btn {
        display: block;
        float: none;
    }
    section#contato .flex-item {
        flex-basis: 100%;
    }
    body > footer .botaoWhatsapp {
        display: none;
    }
    body > footer .above-content > div {
        background-position: center 0;
        padding-top: 6rem;
        padding-left: 0;
        text-align: center;
        width: 100%;
    }
    body > footer .above-content .contacts {
        width: 100%;
    }
    body > footer .below-content > ul {
        margin-bottom: 3rem;
    }
    body > footer .below-content > p {
        float: none;
        text-align: center;
    }
    body.area-restrita nav#menu-restrito ~ main,
    body.area-restrita nav#menu-restrito ~ section,
    body.area-restrita nav#menu-restrito ~ footer,
    body.area-restrita nav#menu-restrito ~ .container {
        margin-left: 0;
        width: 100%;
    }
    #menu-restrito-container h1 {
        display: none;
    }
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}