@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/**=================================================================
 * Variables
 =================================================================*/
:root {
  --brand-color-grey: #6a6b6d;
  --brand-color-yellow: #ebe944;

  --background-color-white: #ffffff;
  --background-color-lightyellow: #f9f7ed;
  --background-color-brightyellow: #f4efdb;
  --background-color-neutral: #f8f8f8;
  --background-color-yellow: #ebe944;
  --background-color-orange: rgba(255, 160, 8, 0.9);
  --background-color-grey: #6a6b6d;
  --background-color-black: black;
  --background-color-lightgrey: #eee;
  --background-color-green: #28a745;
  --background-color-softgreen: #d4edda;
  --background-color-softred: #f8d7da;
  --background-color-red: #842029;

  --border-color-white: #ffffff;
  --border-color-yellow: #ebe944;
  --border-color-orange: rgba(255, 160, 8, 1);
  --border-color-grey: #6a6b6d;
  --border-color-lightgrey: #ccc;
  --border-color-green: #28a745;
  --border-color-softgreen: #c3e6cb;
  --border-color-softred: #f5c6cb;

  --font-color-black: #0d0d0d;
  --font-color-lightgrey: #eee;
  --font-color-faintgrey: #bdbdbd;
  --font-color-grey: #595959;
  --font-color-white: #ffffff;
  --font-color-red: #c1040e; /*#842029 bootstrap alert */
  --font-color-green: #155724;

  --font-size-body-large: 20px;
  --font-size-body-medium: 16px;

  --border-width-main: 1px;

  --time-button-movement: 0.3s;
}

/**=================================================================
 * Settings
 =================================================================*/
body {
  font-family: "Inter", Helvetica, Verdana, sans-serif;
  font-size: var(--font-size-body-medium);
  color: var(--font-color-black);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  padding: 0;
  margin: 0;
}
ul,
ol,
dl {
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}
a {
  text-decoration: none;
}
select {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  line-height: 1.5;
  background-image: url(../images/select_down.svg);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 5px;
}
select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
input[type="text"],
input[type="number"] {
  padding: 0.1rem;
  line-height: 1.5;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  margin-bottom: 5px;
}
input[type="text"]:focus,
input[type="number"]:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
#stepInfoArea h1 {
  font-weight: 700;
}
.question h4 {
  color: var(--content-secondary, #2d2d2d);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5rem; /* 120% */
  letter-spacing: -0.025rem;
}
.intro {
  padding-bottom: 48px;
}
/**=================================================================
 * Spacing
 =================================================================*/
.mb-10 {
  margin-bottom: 10px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}

/**=================================================================
 * Loader
 =================================================================*/
.page_loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 100;
}
.page_loader img {
  position: absolute;
  top: 50%;
  left: 50%;
}
.step_info {
  background-color: #f8f8f8;
}
.sidebarLeft {
  border-right: none !important;
}
.appArea .step_2d .shown {
  background-color: #f8f8f8;
}
.sidebarLeft {
  border-right: none !important;
}
.appArea .step_2d .shown {
  background-color: #f8f8f8;
}
/**=================================================================
 * button
 =================================================================*/
.flag_button {
  border: none;
  border-radius: 8px;
  background-color: #9a8142;
  font-weight: bold;
  transition: all var(--time-button-movement) ease;
}
.flag_button img {
  width: 40px;
  margin-right: 10px;
}
.flag_button:hover {
}

.primary_button {
  padding: 16px 24px;
  border: none;
  border-radius: 2px;
  background: #9a8142;
  font-weight: bold;
  transition: all var(--time-button-movement) ease;
  user-select: none;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
}
.primary_button.bottom_button {
  font-size: 14px;
  padding: 12px 24px;
}
.primary_button:hover {
  background: #9a8142;
  cursor: pointer;
}
.primary_button:disabled,
.primary_button[disabled] {
  background: #bebebe;
  cursor: not-allowed;
}

.secondary_button {
  padding: 6px 20px;
  border: none;
  border-radius: 8px;
  background: var(--background-color-white);
  font-weight: bold;
  transition: all var(--time-button-movement) ease;
  user-select: none;
}

.primary_button img {
  width: 24px;
}
.secondary_button.nav_previous {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
  background: #414141;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
  min-width: 138.9px;
}

.name {
  color: var(--content-primary, #171717);
  text-align: justify;

  /* Paragraph/regular/sm */
  font-family: var(--typography-paragraph-fonts-semi-regular-light, Inter);
  font-size: var(--typography-paragraph-size-sm, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-paragraph-line-height-sm, 19.6px); /* 140% */
  letter-spacing: var(--typography-paragraph-letter-spacing-sm, -0.28px);
}

input.unit_input_cm,
input.unit_input_mm,
input.unit_input_inches,
select.unit_input_inch_fractions,
span.unit_input_label_cm,
span.unit_input_label_mm,
span.unit_input_label_metres,
span.unit_input_label_inches {
  display: none;
}
input.unit_input_cm.active,
input.unit_input_mm.active,
input.unit_input_inches.active,
select.unit_input_inch_fractions.active,
span.unit_input_label_cm.active,
span.unit_input_label_mm.active,
span.unit_input_label_metres.active,
span.unit_input_label_inches.active {
  display: inline-block;
}
input.unit_input_cm {
  width: 80px;
}
input.unit_input_mm {
  width: 88px;
}
input.unit_input_inches {
  width: 66px;
}
input.unit_input_degrees {
  width: 66px;
}
label.checkbox_label {
  display: flex;
  align-items: center;
  gap: 10px;
}
label.checkbox_label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--background-color-white);

  position: relative;
}
label.checkbox_label input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: none;
}
/* Step 4 custom icon */
.element_wrap[data-sidebar-type="step_4_instruction"]
  label.checkbox_label
  input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: none;
  pointer-events: none;
  z-index: 2;
  /* SVG as background */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3.33333 2.5H16.6667C16.8877 2.5 17.0996 2.5878 17.2559 2.74408C17.4122 2.90036 17.5 3.11232 17.5 3.33333V16.6667C17.5 16.8877 17.4122 17.0996 17.2559 17.2559C17.0996 17.4122 16.8877 17.5 16.6667 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5ZM9.16917 13.3333L15.0608 7.44083L13.8825 6.2625L9.16917 10.9767L6.81167 8.61917L5.63333 9.7975L9.16917 13.3333Z" fill="%23CDB060"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
label.radio_label {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 20px 1fr;
}
label.radio_label input[type="radio"] {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #414141; /* borda dourada */
  background-color: var(--background-color-white);
  border-radius: 50%;
  position: relative;
  transition: background 0.2s, border 0.2s;
}
label.radio_label input[type="radio"]:checked {
  background-color: var(--background-color-white);
  border: 2px solid #cdb060;
}
label.radio_label input[type="radio"]::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: background 0.2s;
}
label.radio_label input[type="radio"]:checked::after {
  background: #cdb060; /* círculo central dourado */
}
.input_group p {
  color: #414141;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
  margin-bottom: 10px;
}
.input_group li {
  color: #414141;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
}
.input_group h5 {
  color: var(--content-primary, #171717);
  /* Paragraph/semi/md */
  font-family: var(--typography-paragraph-fonts-semi-regular-light, Inter);
  font-size: var(--typography-paragraph-size-md, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-paragraph-line-height-md, 22.4px); /* 140% */
  letter-spacing: var(--typography-paragraph-letter-spacing-md, -0.32px);
}
.white_text h6 {
  color: var(--content-primary, #171717);
  /* Paragraph/semi/md */
  font-family: var(--typography-paragraph-fonts-semi-regular-light, Inter);
  font-size: var(--typography-paragraph-size-md, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-paragraph-line-height-md, 22.4px); /* 140% */
  letter-spacing: var(--typography-paragraph-letter-spacing-md, -0.32px);
}
/**=================================================================
 * Modals
 =================================================================*/
.modal.success_modal .modal-header svg {
  color: var(--font-color-green);
}
.modal.success_modal .modal-content {
  border: 3px solid var(--border-color-softgreen);
  background: var(--background-color-softgreen);
}
.modal.error_modal .modal-header svg {
  color: var(--font-color-red);
}
.modal.error_modal .modal-content {
  border: 3px solid var(--border-color-softred);
  background: var(--background-color-softred);
}
.modal.help_modal p {
  margin-bottom: 20px;
}
.modal-body-free-text h5 {
  font-size: var(--font-size-body-medium);
  margin-bottom: 15px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.modal-body-free-text p {
  margin-bottom: 15px;
}
.modal-body-free-text ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}
.modal-body-free-text ol {
  list-style: circle;
  padding-left: 20px;
  margin-bottom: 15px;
}

/**=================================================================
 * Common Classes
 =================================================================*/
.hidden {
  display: none !important;
}
.red {
  color: var(--font-color-red);
}

/**=================================================================
 * header
 =================================================================*/

@media (max-width: 767px) {
  header {
    min-height: 150px;
  }
}

.announcement-bar {
  display: flex;
  height: 37.5px;
  justify-content: space-between;
  padding: 12px 16px;
  background: #9a8142;
  align-items: center;
  border-bottom: var(--border-width-main) solid var(--border-color-lightgrey);
}
.announcement-bar .logo {
  display: flex;
  align-items: center;
}
.announcement-bar .right_group {
  display: flex;
  /* align-items: center; */
  justify-content: flex-end;
  gap: 20px;
  flex: 1 1 auto;
  margin-right: 20px;
}
.announcement-bar .languages {
  position: relative;
}
.announcement-bar .languages .flag_button {
  margin-right: 0; /* Removido o margin-right para alinhar à direita */
}
.announcement-bar .languages .flag_button .language_label {
  display: none;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21.6px; /* 120% */
  letter-spacing: 0px;
}
.announcement-bar .languages .flag_button .language_label.shown {
  display: inline;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21.6px; /* 120% */
  letter-spacing: 0px;
}
.announcement-bar .languages .selection {
  display: none;
  position: absolute;
  box-shadow: 0 0 4px grey;
  padding: 10px 0;
  background: white;
  width: 150px;
  right: 10px;
  top: 35px;
  z-index: 100;
}
.announcement-bar .languages .selection.shown {
  display: block;
}
.announcement-bar .languages .selection a {
  display: block;
  padding: 10px;
}
.announcement-bar .languages .selection a:hover {
  background: var(--background-color-lightgrey);
}
.announcement-bar .languages .selection a img {
  width: 40px;
  margin-right: 10px;
}
@media (max-width: 1199px) {
  .announcement-bar .logo span {
    font-size: 25px;
  }
}

.main-menu {
  height: 96px;
  display: flex;
  padding: 16px 64px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.main-menu-items {
  display: flex;
  align-items: center;
  gap: 32px;
  align-self: end;
  margin-right: 186px;
}

/**=================================================================
 * .structure
 =================================================================*/
.structure {
  display: grid;
  width: 100%;
  padding: 16px;
  height: calc(100vh - 82px);
  grid-template-columns: 400px 1fr;
}
.structure .sidebarLeft {
  transition: width 0.3s, min-width 0.3s, max-width 0.3s;
  width: 400px;
  min-width: 400px;
  max-width: 400px;
  overflow-y: visible; /* Permite que o texto fique completo, sem cortar, e sem barra de rolagem na sidebar */
  border: 1px solid #bebebe;
  background: #f9f7ed;
}

@media (max-width: 767px) {
  .structure.mobile-mainwrap-hidden .sidebarLeft {
    border-bottom: none;
  }
}

/* Permitir rolagem apenas no conteúdo do Step 1 da sidebar */
.element_wrap[data-sidebar-type="step_1_instruction"] .input_group.information {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
}
.element_wrap[data-sidebar-type="step_1_instruction"] .mainWrap,
.element_wrap[data-sidebar-type="step_1_instruction"] .area,
.element_wrap[data-sidebar-type="step_1_instruction"] .input_group.information {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.element_wrap[data-sidebar-type="step_1_instruction"] .input_group.information {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
}
.element_wrap[data-sidebar-type="step_1_instruction"]
  .input_group.information::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.element_wrap[data-sidebar-type="step_1_instruction"]
  .input_group.information.at-bottom::after {
  opacity: 0;
}

/* Remove scroll/fade effect from other steps */
.element_wrap:not([data-sidebar-type="step_1_instruction"])
  .input_group.information {
  overflow-y: visible !important;
  max-height: none !important;
  position: static !important;
}
.element_wrap:not([data-sidebar-type="step_1_instruction"])
  .input_group.information::after {
  display: none !important;
  content: none !important;
}
.element_wrap:not([data-sidebar-type="step_1_instruction"])
  .input_group.information::-webkit-scrollbar {
  display: initial !important;
}
.structure .mainArea {
  transition: width 0.3s, margin 0.3s;
  height: 100%;
  background: var(--background-color-neutral);
}

/* @media (max-width: 1199px) {
  .structure {
    grid-template-columns: 280px 1fr;
  }
} */

/**=================================================================
 * .element_wrap
 =================================================================*/
.element_wrap {
  display: none;
}
.element_wrap.shown {
  display: block;
}
.headtools {
  display: flex;
  gap: 8px;
}

.container-tool {
  background-color: #ffffff;
  padding: 8px;
  border-radius: 4px;
}

.insidewrapper-tools {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 4px;
}

.buttons_wrap.clearfix {
  display: flex;
  padding: 2px;
  align-items: baseline;
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #fff;
}
.element_wrap .heading {
  text-align: left;
  padding: 20px 25px 5px;
}
.element_wrap .heading img {
  height: 24px;
  margin-bottom: 2px;
}

.element_wrap .buttons_wrap button:disabled {
  display: none !important;
}
.element_wrap .buttons_wrap li > button:disabled {
  display: none !important;
}
.element_wrap .buttons_wrap li:has(> button:disabled) {
  display: none !important;
}
.heading p {
  color: #171717;

  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 120% */
  letter-spacing: 0.4px;
}
.element_wrap .heading p {
  font-size: var(--font-size-body-large);
}
.element_wrap .buttons_wrap li {
  float: left;
  width: 50%;
  border-bottom: 1px solid var(--border-color-white);
  border-right: 1px solid var(--border-color-white);
}
.element_wrap .buttons_wrap li.third {
}
.element_wrap .buttons_wrap li:nth-child(3),
.element_wrap .buttons_wrap li:nth-child(5),
.element_wrap .buttons_wrap li:nth-child(7) {
  border-right: 0;
}
.element_wrap .buttons_wrap li:nth-child(6) {
  border-bottom: 0;
}
.element_wrap .buttons_wrap li:nth-child(7) {
  border-bottom: 0;
}
.element_wrap .buttons_wrap li .selection_button {
  width: auto;
  min-width: 0;
  padding: 6px 16px;
  border: 0;
  border-radius: 4px;
  text-align: center;
  background: #ffffff;
  color: var(--font-color-black);
  transition: all var(--time-button-movement) ease;
}
.element_wrap .buttons_wrap li .selection_button:hover,
.element_wrap .buttons_wrap li .selection_button.active {
  background: #ededed;
}
.element_wrap .buttons_wrap li .selection_button:disabled {
  color: var(--font-color-lightgrey);
  background: var(--background-color-grey);
  opacity: 0.5;
  box-shadow: 0;
  cursor: not-allowed;
}
.element_wrap .buttons_wrap li .selection_button:disabled:hover {
  transform: none;
}
.element_wrap .buttons_wrap li .selection_button.danger {
  color: var(--font-color-red);
  background: var(--background-color-softred);
}
.element_wrap .buttons_wrap li .selection_button.inactive {
  background: var(--background-color-black);
  color: var(--font-color-faintgrey);
}
.element_wrap .buttons_wrap li .selection_button .icon {
  display: block;
}
.element_wrap .buttons_wrap li .selection_button .icon .hide_icon {
  display: none;
}
.element_wrap .buttons_wrap li .selection_button .icon.shown,
.element_wrap .buttons_wrap li .selection_button .icon .hide_icon.shown {
  display: inline;
}
.element_wrap .buttons_wrap li .selection_button .icon.hidden {
  display: none;
}
.element_wrap .buttons_wrap li .selection_button .name {
  color: #757575;
}
.element_wrap .buttons_wrap li .selection_button.active .name {
  color: #171717;
}

@media (max-width: 1199px) {
  .element_wrap .buttons_wrap li:nth-child(3),
  .element_wrap .buttons_wrap li:nth-child(5),
  .element_wrap .buttons_wrap li:nth-child(7) {
    border-right: 1px solid var(--border-color-white);
  }
  .element_wrap .buttons_wrap li:nth-child(6) {
    border-bottom: 1px solid var(--border-color-white);
  }
  .element_wrap .buttons_wrap li:nth-child(7) {
    border-bottom: 1px solid var(--border-color-white);
  }
}

/**=================================================================
 * .element_wrap .mainWrap
 =================================================================*/

/**=================================================================
 * .element_wrap .mainWrap .area
 =================================================================*/
.element_wrap .area {
  display: none;
  padding: 10px 0;
}
.input_group {
  padding: 5px 25px 5px;
}
.element_wrap .area.shown {
  display: block;
}
.element_wrap .area .input_group {
  display: none;
  margin-bottom: 10px;
}
.element_wrap .area .input_group.shown {
  display: block;
}
.element_wrap .area .input_group .button_wrap {
  margin-top: 10px;
}
.element_wrap .area .input_group .sucess {
  display: none;
  margin-top: 10px;
  color: var(--font-color-green);
}
.element_wrap .area .input_group .warning {
  display: none;
  margin-top: 10px;
  color: var(--font-color-red);
}
.element_wrap .area .input_group .sucess.shown,
.element_wrap .area .input_group .warning.shown {
  display: block;
}
.element_wrap .area .input_group .white_text {
  margin-top: 48px;
}
.element_wrap .area .input_group .white_text h5 {
  font-size: var(--font-size-body-medium);
  margin-bottom: 15px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.element_wrap .area .input_group .white_text p {
  margin-bottom: 15px;
}
.element_wrap .area .input_group .white_text ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}
.element_wrap .area .input_group .white_text ol {
  list-style: circle;
  padding-left: 20px;
  margin-bottom: 15px;
}
.element_wrap .area .input_group.information p {
  margin-bottom: 20px;
}
.element_wrap .area .input_group.info_prompt p {
  margin-bottom: 20px;
}
.element_wrap .area .input_group.info_prompt .legend_img_wrapper_wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}
.element_wrap .area .input_group.info_prompt .legend_img_wrapper {
  display: block;
  transform: rotate(0deg);
}
.element_wrap .area .input_group.info_prompt img {
  max-width: 75%;
  display: block;
  margin: 0 auto;
}
.element_wrap .area .input_group.info_prompt img.column {
  width: 150px;
}
.element_wrap .area .input_group.info_prompt img.mass_timber_wall {
  width: 200px;
}
.element_wrap .area .apply_button_wrap {
  padding: 15px 0;
}
.element_wrap .area .apply_button_wrap button {
}

.button_wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 48px;
  right: 48px;
}
.element_wrap .area .encapsulation_edit_wrap {
  padding: 10px 8px;
  background: var(--background-color-green);
  font-weight: bold;
}

.element_wrap .area .input_group .calculation_results {
  list-style-type: disc;
  padding-left: 20px;
}
.element_wrap .area .input_group .calculation_results li {
  margin-bottom: 10px;
}

.element_wrap .area .objects_list {
  display: flex;
  flex-direction: column;
  gap: 20px 10px;
}
.element_wrap .area .objects_list .object {
  display: none;
  flex: 0 1 calc(50% - 10px);
  box-sizing: border-box;

  align-items: center;
}
.element_wrap .area .objects_list .object.shown {
  display: flex;
}
.element_wrap .area .objects_list .object button {
  text-align: center;
  border: 0;
  padding: 10px;
  background: none;
  transition: all var(--time-button-movement) ease;
}
.element_wrap .area .objects_list .object button:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
.element_wrap .area .objects_list .object button img {
  max-width: 140px;
  max-height: 70px;
  border-radius: 5px;
}
.element_wrap .area table th,
.element_wrap .area table td {
  text-align: center;
}
.element_wrap .area.area_list_objects table {
  width: 100%;
}
.element_wrap .area.area_list_objects table th,
.element_wrap .area.area_list_objects table td {
  text-align: left;
  padding: 5px;
}

/**=================================================================
 * .element_wrap .mainWrap .navigation
 =================================================================*/
.navigation {
  /* height:95px; */
  padding: 16px;
  position: relative;
  background: var(--background-color-brightyellow);
  border-radius: 4px;

  border-bottom: 1px solid #bebebe !important;
}
.navigation .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  gap: 0; /* gap será controlado pelas bordas das bolhas e connectors */
}
.navigation .steps li {
  float: none;
  width: auto;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Step Bubble */
.navigation .steps li.label {
  background: #f4efdb;
  border: none !important;
  border-radius: 32px;
  padding: 6px 8px;
  margin: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  font-weight: bold;
  font-size: 1.2em;
  box-shadow: none;
}
.navigation .steps li.label.active {
  border: 1px solid #cdb060 !important;
  background: #f4efdb;
  border-radius: 999px;
}
/* Remove border for .available (deixa só no ativo) */
.navigation .steps li.label.available {
  border: none;
}
.navigation .steps li.label.active {
  border: 1px solid #cdb060;
  border-radius: 999px;
  background: #f4efdb;
}
.navigation .steps li.label .circle_text_row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navigation .steps li.label a {
  opacity: 1;
  color: #757575;
  font-weight: 400;
  font-size: 14px;
  background: none;
  padding: 0;
}
.navigation .steps li.label.active a {
  color: #171717 !important;
  font-weight: 600 !important;
}
.navigation .steps li.label.available a {
  color: #9a8142;
  font-weight: 400;
}

/* Connector */
.navigation .steps li.connector {
  background: #cdb060;
  height: 2px;
  min-width: 40px;
  flex: 1 1 40px;
  margin: 0 -4px;
  border-radius: 2px;
  align-self: center;
  position: relative;
  z-index: 0;
  /* Remove margin-top/left from antigo */
}
.navigation .steps li.connector.available {
  background: #cdb060;
}

/* Remove antigos offsets */
.navigation .steps li.label,
.navigation .steps li.connector {
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Responsivo */
@media (max-width: 1199px) {
  .navigation .steps {
    width: 100%;
    max-width: 700px;
  }
  .navigation .steps li.label {
    min-width: 120px;
    font-size: 1em;
    padding: 6px 12px 6px 10px;
  }
  .navigation .steps li.connector {
    min-width: 20px;
  }
}
@media (max-width: 1338px) {
  .navigation .steps li.label a {
    font-size: 12px;
  }

  @media (max-width: 767px) {
    .navigation .steps li.label a {
    }
  }
}

/* =========================
 * Navigation SVG Wrappers
 * ========================= */
.navigation .circle_svg_active,
.navigation .circle_svg_completed,
.navigation .circle_svg_inactive {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigation .circle_svg_active,
.navigation .circle_svg_completed {
  width: 20px;
  height: 20px;
}
.navigation .circle_svg_inactive {
  width: 21px;
  height: 20px;
}

/**=================================================================
 * .element_wrap .mainWrap .app
 =================================================================*/
.app {
  position: relative;
}
.mainArea {
  border: 1px solid #bebebe;
}
.app .appArea {
  display: none;
}
.app .appArea.shown {
  display: block;
}
.app .hint {
  width: 100%;
  text-align: center;
  color: var(--font-color-grey);
  padding-top: 10px;
}
.app .hint p {
  user-select: none;
}
.app .buttons_wrap {
  position: absolute;
  left: 32px;
  top: 32px;
  width: auto;
  text-align: left;
  user-select: none;
  display: flex;
  flex-direction: row;
  gap: 16px;
}

@media (max-width: 767px) {
  .app .buttons_wrap {
    top: 16px;
    left: 32px;
  }
}

/* Ajuste para os botões ficarem menores e alinhados horizontalmente */

.floating_button {
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #fff;
}

.app .buttons_wrap .floating_button {
  margin-bottom: 0;
  padding: 8px;
}
.floating_button {
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #f8f8f8;
}
.floating_button span {
  color: #2d2d2d;
  /* Paragraph/semi/sm */
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
}
.floating_button {
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #f8f8f8;
}
.floating_button span {
  color: #2d2d2d;
  /* Paragraph/semi/sm */
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.6px; /* 140% */
  letter-spacing: -0.28px;
}
.app .buttons_wrap .floating_button {
  margin-bottom: 0;
  padding: 10px;
}
.app .buttons_wrap .floating_button.active {
}
.noneBlock {
  display: none !important;
}
.app .buttons_wrap .floating_button img {
  width: 80px;
  display: block;
  border-radius: 10px;
}
.app .zoom_wrap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 50px;
  text-align: center;
  user-select: none;
}
.app .zoom_wrap button:first-of-type {
  margin-bottom: 10px;
}
.app .zoom_wrap span {
  display: block;
  margin-bottom: 10px;
}
.app .appArea {
  width: 100%;
  height: calc(100vh - 96px - 83px);
  overflow-y: auto;
}

/**=================================================================
 * .element_wrap .mainWrap .app .appArea.step_info (Step 1)
 =================================================================*/
.app .appArea.step_info {
  padding: 48px;
  text-align: center;
}

@media (max-width: 767px) {
  .app .appArea.step_info {
    padding: 32px 20px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .app .appArea.step_info {
    padding: 32px 20px;
  }
}
@media (max-width: 1199px) {
  .app .appArea.step_info {
    padding: 32px 20px;
  }
}

.app .appArea.step_info .intro {
}
.app .appArea.step_info .intro p {
  color: #414141;
  text-align: center;
  /* Paragraph/regular/md */

  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem; /* 140% */
  letter-spacing: -0.02rem;
}
.app .appArea.step_info h4 {
  margin-bottom: 2px;
}
.app .appArea.step_info .question {
  margin-bottom: 30px;
  padding: 0;
}
.app .appArea.step_info .question p {
  margin-bottom: 10px;
}
.app .appArea.step_info .question .choices {
  display: flex;

  align-items: center;

  margin: 0 auto;
}
.question h4,
.question p {
  text-align: left;
}
.choices .input_group {
  padding-left: 0px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .app .appArea.step_info .question {
    padding: 0;
  }
}
@media (max-width: 1199px) {
  .app .appArea.step_info .question {
    padding: 0;
  }
}

/**=================================================================
 * .element_wrap .mainWrap .app .appArea.step_2d (Step 2-3)
 =================================================================*/
.app .appArea.step_2d {
  background: #f8f8f8;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
}
.app .appArea.step_2d button.bottom_button {
  /* Remover posicionamento absoluto e centralização antiga */
  position: static;
  left: unset;
  bottom: unset;
  user-select: none;
}

/* Centraliza e posiciona a área do botão Next */
.bottom_button_wrap {
  width: auto;
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 767px) {
  .bottom_button_wrap {
    gap: 16px;
  }
}

.button_wrap_step1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 263px;
}

@media (max-width: 767px) {
  .button_wrap_step1 {
    margin-top: 48px;
  }
}

@media (max-width: 767px) {
  .menu-toggle {
    display: none !important;
  }
}
.bottom_button_wrap .toolbar {
  display: flex;
  padding: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #fff;
}

@media (min-width: 768px) and (max-width: 1290px) {
  .bottom_button_wrap .toolbar {
  flex-wrap: wrap;
  max-width: 280px;

}

.toolbar-divider-svg {
  display: none;
}
}

.app .appArea.step_2d canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
}
.app .appArea.step_2d canvas.pointer {
  cursor: pointer;
}
.app .appArea.step_2d canvas.grab {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.app .appArea.step_2d canvas.grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.app .appArea.step_2d canvas.e-resize {
  cursor: e-resize;
}
.app .appArea.step_2d canvas.nw-resize {
  cursor: nw-resize;
}
.app .appArea.step_2d canvas.n-resize {
  cursor: n-resize;
}
.app .appArea.step_2d canvas.ne-resize {
  cursor: ne-resize;
}
.app .appArea.step_2d canvas.all-scroll {
  cursor: all-scroll;
}

/* Garanta que seja aplicado no seu seletor de canvas */
#suiteCanvas {
  touch-action: none !important; /* bloqueia scroll/pinch nativo */
  -ms-touch-action: none !important; /* para IE/Edge antigos */
}

/**=================================================================
 * .element_wrap .mainWrap .app .appArea.step_3d (Step 4)
 =================================================================*/
.app .appArea.step_3d {
  overflow-y: hidden;
  overflow-x: hidden;
}
.app .appArea.step_3d .bottom_buttons {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 115px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.app .appArea.step_3d .bottom_button {
  user-select: none;
}
#step4PreviousButton {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 2px;
  background: #414141;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 19.6px;
  letter-spacing: -0.28px;
}

/**=================================================================
 * .element_wrap .mainWrap .app .appArea.step_output (Step 5)
 =================================================================*/
.app .appArea.step_output {
  overflow-x: hidden;
  background: #f8f8f8;
  padding: 48px;
}
.app .appArea.step_output h2 {
  text-align: center;
  margin-bottom: 20px;
}
.app .appArea.step_output h3 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
}
.app .appArea.step_output .added_notes {
  text-align: center;
  margin-bottom: 20px;
}
.app .appArea.step_output .print_wrap {
  margin-bottom: 20px;
}
.app .appArea.step_output .if_sizes {
  padding: 6px;
  margin-bottom: 40px;
  border-radius: 0.25rem;
  background: white;
}
.app .appArea.step_output .if_sizes h4 {
  text-align: center;
  font-size: 20px;
}
.app .appArea.step_output .above_fire_property_title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}

.app .appArea.step_output .if_sizes table tr .first {
  width: 20%;
}
.app .appArea.step_output .if_sizes table tr .second {
  width: 40%;
}
.app .appArea.step_output .if_sizes table tr .third {
  width: 40%;
}
.app .appArea.step_output .if_sizes table tr td,
.app .appArea.step_output .if_sizes table tr th {
  padding: 15px;
  border: none;
}
.app .appArea.step_output .if_sizes table tr td.second.active {
  background: transparent !important;
  color: #222 !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
}
.app .appArea.step_output .if_sizes table tr td.third.active {
  font-weight: 500 !important;
  border-radius: 0 !important;
}

.app .appArea.step_output .alert {
  margin-bottom: 30px;
  display: none;
}
.app .appArea.step_output .alert.shown {
  display: block;
}
.app .appArea.step_output .alert .alert-heading {
  text-align: center;
  margin-bottom: 20px;
}
.app .appArea.step_output .alert .alert-heading .image_wrap {
  margin-bottom: 10px;
}
.app .appArea.step_output .alert .alert-body > ul {
  list-style: disc;
  padding-left: 20px;
}
.app .appArea.step_output .alert .alert-body > ul#result_success {
  list-style: none;
  padding-left: 0px;
}
.app .appArea.step_output .alert .alert-body > ul#result_failure {
  list-style: decimal;
}

.app .appArea.step_output .alert .alert-body > ul > li {
  margin-bottom: 20px;
}
.app .appArea.step_output .additional_notes {
  display: none;
}
.app .appArea.step_output .additional_notes.shown {
  display: block;
}

.app .appArea.step_output .additional_notes h3 {
  font-size: 22px;
  margin-bottom: 20px;
  text-align: left;
}
.app .appArea.step_output .additional_notes p {
  margin-bottom: 20px;
}
.structure.sidebar-closed {
  grid-template-columns: 0 1fr !important;
}

.structure.sidebar-closed .sidebarLeft {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Custom range slider color for Step 4 (dourado) */
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-webkit-slider-thumb {
  background: #fff;
  border: 3px solid #9a8142;

  width: 23px;
  height: 23px;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  margin-top: -8px; /* centraliza na track de 8px */
  transition: box-shadow 0.2s;
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]:focus::-webkit-slider-thumb {
  outline: none;
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-moz-range-thumb {
  background: #fff;
  border: 3px solid #9a8142;

  width: 23px;
  height: 23px;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  transition: box-shadow 0.2s;
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]:focus::-moz-range-thumb {
  outline: none;
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-ms-thumb {
  background: #fff;
  border: 3px solid #cdb060;

  width: 23px;
  height: 23px;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  transition: box-shadow 0.2s;
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]:focus::-ms-thumb {
  outline: none;
}
/* Remove outline padrão do input */
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]:focus {
  outline: none;
}

/* Step 4: Range background dinâmico dourado */
.element_wrap[data-sidebar-type="step_4_instruction"] input[type="range"] {
  --track-height: 8px;
  --track-radius: 4px;
  --track-fill: #b1975b;
  --track-bg: #edeef1;
  --percent: 50%;
  height: 27px;
  background: transparent;
  /* Chrome, Safari, Edge */
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track-height);
  border-radius: var(--track-radius);
  background: linear-gradient(
    to right,
    var(--track-fill) 0%,
    var(--track-fill) var(--percent),
    var(--track-bg) var(--percent),
    var(--track-bg) 100%
  );
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-moz-range-track {
  height: var(--track-height);
  border-radius: var(--track-radius);
  background: linear-gradient(
    to right,
    var(--track-fill) 0%,
    var(--track-fill) var(--percent),
    var(--track-bg) var(--percent),
    var(--track-bg) 100%
  );
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-ms-fill-lower {
  background: var(--track-fill);
  border-radius: var(--track-radius) 0 0 var(--track-radius);
}
.element_wrap[data-sidebar-type="step_4_instruction"]
  input[type="range"]::-ms-fill-upper {
  background: var(--track-bg);
  border-radius: 0 var(--track-radius) var(--track-radius) 0;
}
.element_wrap[data-sidebar-type="step_4_instruction"] input[type="range"] {
  /* Remove default background for IE/Edge */
  background: transparent;
}
.flex-y {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#result_failure_alert {
  background-color: #fde8e8 !important;
  border: 1.5px solid #f57777 !important;
  padding: 32px;
  color: #300606 !important;
}
.alert-heading h4 {
  color: #300606;
  text-align: center;

  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
.alert-body ul li {
  color: #300606;
  /* Paragraph/regular/md */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
  letter-spacing: -0.32px;
}
.print_wrap {
  display: flex;
  justify-content: flex-end;
}
.print_wrap a {
  color: #2d2d2d;
  text-align: center;
  /* Paragraph/semi/lg */
  font-family: "Inter";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.2px; /* 140% */
  letter-spacing: -0.36px;
}
#result_warning_alert {
  border-radius: 4px !important;
  border: 1.5px solid #ffce91 !important;
  background: #fff7ed !important;
  padding: 32px !important;
}
.alert-heading h4 {
  color: #33230e;
  text-align: center;
  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
.alert-body ul li {
  color: #33230e;
  /* Paragraph/regular/md */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
  letter-spacing: -0.32px;
}
.above_fire_property_title {
  color: #171717;
  text-align: center;
  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
#stepOutputArea h2 {
  color: #171717;
  text-align: center;
  /* Headings/Primary/H2 */
  font-family: "Inter";
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 120% */
  letter-spacing: -0.8px;
  margin-bottom: 0 !important;
}
.followingClass {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #171717;
  text-align: center;
  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
.followingClass h4 {
  color: #171717;
  text-align: center;
  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
.subtitlesstep {
  text-align: center;
}
.sidebarLeft .image_wrap {
  margin-bottom: 16px !important;
}
.input_group.information.shown > p:second-of-type {
  margin-top: 48px;
}
.additional_notes h3 {
  color: #171717;
  /* Headings/Primary/H4 */
  font-family: "Inter";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28.8px; /* 120% */
  letter-spacing: -0.48px;
}
#result_additional p {
  color: #171717;
  /* Paragraph/regular/md */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.32px;
}

/* ===== Step 5 Results Table Modern Style (aplica apenas à tabela) ===== */
.app .appArea.step_output .if_sizes table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(60, 60, 60, 0.04);
}
.app .appArea.step_output .if_sizes table thead tr {
  background: #f8f8f8;
}
.app .appArea.step_output .if_sizes table th {
  color: #2d2d2d;
  /* Paragraph/regular/md */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
  letter-spacing: -0.32px;
  padding: 16px 18px;
  text-align: left;
}
.app .appArea.step_output .if_sizes table th:first-child {
  border-radius: 12px 0 0 0;
}
.app .appArea.step_output .if_sizes table th:last-child {
  border-radius: 0 12px 0 0;
}
.app .appArea.step_output .if_sizes table tbody tr {
  background: #fff;
  transition: background 0.2s;
}
.app .appArea.step_output .if_sizes table tbody tr:nth-child(odd) {
  background: #fff;
}
.calculationClass {
  padding-left: 0px !important;
}
.app .appArea.step_output .if_sizes table tbody tr:nth-child(even) {
  background: #f8f8f8;
}
.app .appArea.step_output .if_sizes table td {
  font-size: 1rem;
  color: #222;
  padding: 18px 18px 18px 18px;
  vertical-align: top;
  border-bottom: 1px solid #ececec;
}
.app .appArea.step_output .if_sizes table tr:last-child td {
  border-bottom: none;
}
.app .appArea.step_output .if_sizes table td.first {
  font-weight: 700;
  color: #222;
  min-width: 220px;
  max-width: 320px;
}
.app .appArea.step_output .if_sizes table tr td.second.active {
  background: transparent !important;
  color: #222 !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
}
.app .appArea.step_output .if_sizes table tr td.third.active {
  font-weight: 500 !important;
  border-radius: 0 !important;
}
.app .appArea.step_output .if_sizes table td.second,
.app .appArea.step_output .if_sizes table td.third {
  font-weight: 400;
  color: #444;
}
.ceiling_height span {
  color: #2d2d2d;
  /* Paragraph/regular/xs */
  font-family: "Inter";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16.8px; /* 140% */
  letter-spacing: -0.24px;
}
.thickness span {
  color: #2d2d2d;
  /* Paragraph/regular/xs */
  font-family: "Inter";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16.8px; /* 140% */
  letter-spacing: -0.24px;
}
@media (max-width: 700px) {
  .app .appArea.step_output .if_sizes table th,
  .app .appArea.step_output .if_sizes table td {
    padding: 10px 6px;
    font-size: 0.95rem;
  }
  .app .appArea.step_output .if_sizes table td.first {
    min-width: 120px;
    max-width: 180px;
  }
}

/* Ensure alternating row colors ignore rows with the hidden class */
tr:not(.hidden):nth-child(odd) {
  background-color: #f9f9f9; /* Example color for odd rows */
}

tr:not(.hidden):nth-child(even) {
  background-color: #ffffff; /* Example color for even rows */
}

.primary_button_content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu-item span {
  color: #2d2d2d;
  text-align: center;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
  letter-spacing: -0.32px;
  cursor: pointer;
}

.menu-toggle {
  position: absolute;
  left: 3px;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #757575 !important;
}
.menu-toggle {
  transition: transform 0.35s cubic-bezier(0.4, 1.5, 0.6, 1);
}

.menu-toggle:hover {
  transform: scale(1.08);

  /* Estilização específica para o texto do botão Help na toolbar */
  .toolbar [data-language="step_2__help_button"] {
    color: #2d2d2d;
    text-align: center;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 19.6px;
    letter-spacing: -0.28px;
  }
}

/* Ajusta botões para ocuparem apenas o espaço do texto */
.element_wrap .buttons_wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid #bebebe;
  background: #fff;
  flex-wrap: wrap;
}

.menu-toggle {
  position: absolute;
  left: 3px;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #757575 !important;
}
.menu-toggle {
  transition: transform 0.35s cubic-bezier(0.4, 1.5, 0.6, 1);
}

.menu-toggle:hover {
  transform: scale(1.08);
}

.element_wrap .buttons_wrap li {
  float: none;
  width: auto;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.element_wrap .buttons_wrap li .selection_button {
  width: auto;
  min-width: 0;
  padding: 6px 16px;
}

@media (max-width: 1199px) {
  .element_wrap .buttons_wrap {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}
.backgroundHidden {
  background-color: #f9f9f9 !important;
}
.p-headtools {
  color: var(--shared-colors-neutral-700, #2d2d2d) !important;
  font-size: var(--typography-paragraph-size-lg, 18px) !important;
  font-style: normal;
  font-weight: 600 !important;
  line-height: var(--typography-paragraph-line-height-lg, 25.2px); /* 140% */
  letter-spacing: var(--typography-paragraph-letter-spacing-lg, -0.36px);
}
.apply_button_wrap.apply-tool {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--shared-colors-neutral-300, #a8a8a8);
  text-align: center;
  font-family: var(--typography-paragraph-fonts-semi-regular-light, Inter);
  font-size: var(--typography-paragraph-size-xs, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-paragraph-line-height-xs, 16.8px);
  letter-spacing: var(--typography-paragraph-letter-spacing-xs, -0.24px);
}
.apply_button_wrap.apply-tool .primary_button.apply-tool {
  margin-left: auto;
  color: var(--shared-colors-neutral-300, #a8a8a8);
  font-family: var(--typography-paragraph-fonts-semi-regular-light, Inter);
  font-size: var(--typography-paragraph-size-xs, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-paragraph-line-height-xs, 16.8px);
  letter-spacing: var(--typography-paragraph-letter-spacing-xs, -0.24px);
  border: none;
  background-color: #f8f8f8;
}

.information p {
  color: #414141;
  /* Paragraph/regular/md */
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.4px; /* 140% */
  letter-spacing: -0.32px;
}

/* ===== MEGA MENU STYLES ===== */
.mega-menu {
  position: static !important;
}

.mega-menu-content {
  position: absolute;
  width: 78%;
  top: 100%;
  left: 0;
  right: 0;
  max-width: none !important;
  border: none;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 48px 0;
  background: #fff;
  z-index: 1000;
  transform: translateX(0);
  margin: 0;
}

.mega-menu-item {
  text-align: center;
  padding: 24px 16px;
  transition: transform 0.2s ease;
}

.mega-menu-item:hover {
  transform: translateY(-4px);
}

.mega-menu-icon {
  margin: 0 auto 16px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f7ed;
  border-radius: 50%;
}

.mega-menu-item h5 {
  color: #171717;
  font-family: "Inter";
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 12px;
}

.mega-menu-item p {
  color: #414141;
  font-family: "Inter";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
  margin: 0;
}

.mega-menu-footer {
  background: #f4efdb;
  padding: 32px;
  border-radius: 8px;
  margin: 0 24px;
}

.mega-menu-cta h6 {
  color: #171717;
  font-family: "Inter";
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.mega-menu-cta p {
  color: #414141;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 20px;
}

.mega-menu-cta .btn {
  background: #9a8142;
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.mega-menu-cta .btn:hover {
  background: #8a7332;
  color: white;
}

/* Responsive para o mega menu */
@media (max-width: 991px) {
  .mega-menu-content {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: 1px solid #dee2e6;
    padding: 24px 16px;
  }
  
  .mega-menu-item {
    margin-bottom: 24px;
  }
  
  .mega-menu-footer {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .mega-menu-content .row > div {
    margin-bottom: 24px;
  }
}
  

.element_wrap .area .objects_list .object button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.object button {
  width: 100%;
}
.selection_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selection_button .icon,
.selection_button .name {
  display: flex;
  align-items: center;
}

.selection_button .icon + .name {
  margin-left: 8px; /* espaço entre ícone e texto */
}
.element_wrap .area .objects_list .object button div {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 767px) {
  .structure {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 0px;
  }
  .sidebarLeft {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
.navbar-nav .nav-link {
  color: #171717 !important;
}

.navbar {
  padding-bottom: 16px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #000000 !important; /* ou manter #171717 se quiser cor fixa */
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.steps-scroll-wrapper {
  position: relative;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  max-width: 100%;
}

@media (max-width: 767px) {
  .steps-scroll-wrapper {
    padding-right: 24px; /* deixa espaço para o fade */
  }

  .steps {
    flex-wrap: nowrap;
    min-width: max-content;
  }

  .steps-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(
      to left,
      #f6f0db,
      rgba(246, 240, 219, 0)
    ); /* cor de fundo indo para transparente */
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .element_wrap .buttons_wrap {
    flex-wrap: wrap;
  }
  .app .appArea.step_output {
    padding: 32px 20px;
  }
}
.toolbar-button {
  background-color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
}

.toolbar-button:hover {
  background-color: #f5f5f5;
}

/* Ajuste para mobile: toolbar acima dos botões */
@media screen and (max-width: 767px) {
  .bottom_button_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bottom_button_wrap .toolbar {
  margin-bottom: 10px;
  width: 280px;
  min-width: 256px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

  .toolbar-divider-svg {
    display: none;
  }

  @media (max-width: 428px) {
    .floating_button span {
      font-size: 12px;
    }
  }

  #stepInfoArea h1 {
    font-size: 24px;
  }

  .app .appArea.step_info .intro p {
    font-size: 12px;
  }

  .app .appArea.step_info h4 {
    font-size: 16px;
  }

  .app .appArea.step_info .question .choices {
    display: flex;
    align-items: center;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
  }

  .element_wrap .heading p {
    font-size: 18px;
  }

  #stepOutputArea h2 {
    font-size: 24px;
  }

  .subtitlesstep {
    font-size: 12px;
  }

  .app .appArea.step_output .added_notes {
    font-size: 12px;
  }

  .print_wrap a {
    font-size: 14x;
  }

  .app .appArea.step_output .print_wrap {
    margin-bottom: 32px;
  }

  .app .appArea.step_output .if_sizes h4 {
    font-size: 24px;
  }

  p[data-language="sidebar_instruction__step1_top"] {
    display: none;
  }

  .element_wrap .area .input_group .white_text {
    margin-top: 0px;
  }
}

/* ===== MEGA MENU STYLES ===== */
.mega-menu {
  position: static !important;
}

.mega-menu-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: none !important;
  border: none;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 48px 0;
  background: #fff;
  z-index: 1000;
  transform: translateX(0);
  margin: 0;
}

.mega-menu-item {
  text-align: center;
  padding: 24px 16px;
  transition: transform 0.2s ease;
}

.mega-menu-item:hover {
  transform: translateY(-4px);
}

.mega-menu-item h5 {
  color: #171717;
  font-family: "Inter";
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 12px;
}

.mega-menu-item p {
  color: #414141;
  font-family: "Inter";
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
  margin: 0;
}

.mega-menu-footer {
  background: #f4efdb;
  padding: 32px;
  border-radius: 8px;
  margin: 0 24px;
}

.mega-menu-cta h6 {
  color: #171717;
  font-family: "Inter";
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.mega-menu-cta p {
  color: #414141;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 20px;
}

.mega-menu-cta .btn {
  background: #9a8142;
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.mega-menu-cta .btn:hover {
  background: #8a7332;
  color: white;
}

/* Responsive para o mega menu */
@media (max-width: 991px) {
  .mega-menu-content {
    position: static;
    width: 100%;
    box-shadow: none;
    border-top: 1px solid #dee2e6;
    padding: 24px 16px;
  }
  
  .mega-menu-item {
    margin-bottom: 24px;
  }
  
  .mega-menu-footer {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .mega-menu-content .row > div {
    margin-bottom: 24px;
  }
}

  .image_wrap {
    display: none;
  }

  .element_wrap .heading {
    padding: 24px;
  }

  .structure {
    height: unset;
  }

  .bottom_button_wrap .toolbar {
    order: -1;
  }

  .navigation {
    border-bottom: unset;
  }

  /* .structure .sidebarLeft {
    border-top: unset;
    border-bottom: unset;
  } */

  .nav_wrap.steps-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave no iOS */
    touch-action: pan-x; /* swipe no Android/Chrome */
    overscroll-behavior-x: contain;

    /* escondendo a barra */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .nav_wrap.steps-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  /* 2) transforma a lista num row flexível */
  .nav_wrap.steps-scroll-wrapper .steps {
    display: flex;
    flex-wrap: nowrap;
  }

  /* 3) garante que cada li não quebre e crie overflow */
  .nav_wrap.steps-scroll-wrapper .steps li {
    flex: 0 0 auto;
  }

  /* faz a área inteira scrollar no touch, sem mostrar barra */
  .navigation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave no iOS */
    touch-action: pan-x; /* habilita swipe horizontal */
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .navigation::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  /* força a UL .steps a ser um row flexível sem wrap */
  .navigation .steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start; /* alinhamento à esquerda */
  }

  /* evita que os LI quebrem e criem overflow */
  .navigation .steps li {
    flex: 0 0 auto;
  }


.bottom_button_wrap button {
  margin-top: 5px;
}
.buttons_wrap {
  display: flex !important;
}
.hint p {
  font-size: 12px;
}

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
  flex-wrap: nowrap !important;
}
@media (max-width: 767px) {
  .app .hint {
    display: none !important;
  }
}

.steps-scroll-wrapper {
  overflow-x: auto;
  /* habilita a máscara de transparência nas extremidades */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

@media (max-width: 395px) {
   .app .buttons_wrap {
    left: 16px;
  }

  .app .buttons_wrap .floating_button {
  padding: 8px; 
}
}

@media (max-width: 368px) {
  .app .buttons_wrap {
    left: 8px;
  }
}
@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
        width: 60%;
        left: 30%;
    }
  }

  #mainMenu {
    margin-left: 20%;
  }