/*!**********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/style/style.scss ***!
  \**********************************************************************************************************************************************************************************/
:root {
  --base: #F8FAFF;
  --white: #F8FAFF;
  --black: #0C0C0D;
  --text: #444444;
  --shadow: rgba(204, 204, 204, 0.25);
  --gray: #DDDFE5;
  --dark-gray: #88898b;
  --error-color: #F24E1E;
  --success-color: #0FA958;
  --color-neutral-50: #F0F2F7;
  --color-neutral-100: #E4E6EB;
  --color-neutral-200: #D5D7DB;
  --color-neutral-300: #BABBBF;
  --color-neutral-400: #A1A2A6;
  --color-neutral-500: #88898C;
  --color-neutral-600: #6F7073;
  --color-neutral-700: #575759;
  --color-neutral-800: #3E3E40;
  --color-neutral-900: #252526;
  --color-primary-50: #4DB2FF;
  --color-primary-300: #309EF2;
  --color-primary-500: #1684D9;
  --color-primary-700: #006DC0;
  --color-primary-900: #004880;
  --color-secondary-50: #4DF0FF;
  --color-secondary-300: #30E2F2;
  --color-secondary-500: #16C8D9;
  --color-secondary-700: #00B0C0;
  --color-secondary-900: #007580;
  --color-success-50: #4DFF6A;
  --color-success-300: #30F251;
  --color-success-500: #16D936;
  --color-success-700: #00C01F;
  --color-success-900: #008015;
  --color-warning-50: #FFE14D;
  --color-warning-300: #F2D230;
  --color-warning-500: #D9B816;
  --color-warning-700: #C0A100;
  --color-warning-900: #806A00;
  --color-error-50: #FF5B4D;
  --color-error-300: #F24130;
  --color-error-500: #D92616;
  --color-error-700: #C01000;
  --color-error-900: #800B00;
}

@font-face {
  font-family: "Roboto";
  src: url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-webfont.woff2") format("woff2"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-webfont.woff") format("woff"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-italic-webfont.woff2") format("woff2"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-italic-webfont.woff") format("woff"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-400-italic-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-webfont.woff2") format("woff2"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-webfont.woff") format("woff"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-italic-webfont.woff2") format("woff2"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-italic-webfont.woff") format("woff"), url("https://dev-tqs-cdn.integratebim.com/assets/fonts/Roboto/roboto-700-italic-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
.measureSlider-target,
.measureSlider-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.measureSlider-target {
  position: relative;
}

.measureSlider-base,
.measureSlider-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.measureSlider-connects {
  overflow: hidden;
  z-index: 0;
}

.measureSlider-connect,
.measureSlider-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

.measureSlider-txt-dir-rtl.measureSlider-horizontal .measureSlider-origin {
  left: 0;
  right: auto;
}

.measureSlider-vertical .measureSlider-origin {
  top: -100%;
  width: 0;
}

.measureSlider-horizontal .measureSlider-origin {
  height: 0;
}

.measureSlider-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.measureSlider-touch-area {
  height: 100%;
  width: 100%;
}

.measureSlider-state-tap .measureSlider-connect,
.measureSlider-state-tap .measureSlider-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}

.measureSlider-state-drag * {
  cursor: inherit !important;
}

.measureSlider-horizontal {
  height: 4px;
  width: 267px;
}

.measureSlider-horizontal .measureSlider-handle {
  width: 20px;
  height: 20px;
  right: -15px;
  top: -8px;
}

.measureSlider-vertical {
  width: 18px;
}

.measureSlider-vertical .measureSlider-handle {
  width: 20;
  height: 20px;
  right: -3px;
  bottom: -15px;
}

.measureSlider-txt-dir-rtl.measureSlider-horizontal .measureSlider-handle {
  left: -17px;
  right: auto;
}

.measureSlider-target {
  background: #D5D7DB;
  border-radius: 4px;
  border: 1px solid #D5D7DB;
}

.measureSlider-connects {
  border-radius: 3px;
}

.measureSlider-connect {
  background: #309EF2;
}

.measureSlider-draggable {
  cursor: ew-resize;
}

.measureSlider-vertical .measureSlider-draggable {
  cursor: ns-resize;
}

.measureSlider-handle {
  border: 1px solid #006DC0;
  border-radius: 50%;
  background: #006DC0;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
}

.measureSlider-active {
  box-shadow: inset 0 0 1px #006DC0, inset 0 1px 7px #006DC0, 0 3px 6px -3px #006DC0;
}

.measureSlider-vertical .measureSlider-handle:after,
.measureSlider-vertical .measureSlider-handle:before {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.measureSlider-vertical .measureSlider-handle:after {
  top: 17px;
}

[disabled] .measureSlider-connect {
  background: #B8B8B8;
}

[disabled] .measureSlider-handle,
[disabled].measureSlider-handle,
[disabled].measureSlider-target {
  cursor: not-allowed;
}

.measureSlider-pips,
.measureSlider-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.measureSlider-pips {
  position: absolute;
  color: #999;
}

.measureSlider-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.measureSlider-value-sub {
  color: #ccc;
  font-size: 10px;
}

.measureSlider-marker {
  position: absolute;
  background: #CCC;
}

.measureSlider-marker-sub {
  background: #AAA;
}

.measureSlider-marker-large {
  background: #AAA;
}

.measureSlider-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.measureSlider-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.measureSlider-rtl .measureSlider-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.measureSlider-marker-horizontal.measureSlider-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.measureSlider-marker-horizontal.measureSlider-marker-sub {
  height: 10px;
}

.measureSlider-marker-horizontal.measureSlider-marker-large {
  height: 15px;
}

.measureSlider-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.measureSlider-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}

.measureSlider-rtl .measureSlider-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.measureSlider-marker-vertical.measureSlider-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.measureSlider-marker-vertical.measureSlider-marker-sub {
  width: 10px;
}

.measureSlider-marker-vertical.measureSlider-marker-large {
  width: 15px;
}

.measureSlider-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.measureSlider-horizontal .measureSlider-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.measureSlider-vertical .measureSlider-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.measureSlider-horizontal .measureSlider-origin > .measureSlider-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.measureSlider-vertical .measureSlider-origin > .measureSlider-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

.web-view-folders,
.web-view-properties,
.web-view-menu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-neutral-50, #F0F2F7);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  width: min(400px, 100%);
  height: calc(100vh - 40px);
  overflow: hidden;
  border-radius: 10px;
  margin: 20px;
}

@media screen and (max-width: 950px) {
  .web-view-folders,
  .web-view-properties,
  .web-view-menu {
    margin: 20px 0 0;
    width: 100%;
    z-index: 2;
  }
}
.web-view-properties {
  left: unset;
  right: 0;
  word-break: break-word;
  height: unset;
  display: flex;
  flex-direction: column;
}

.web-view-folders .content,
.web-view-menu .content {
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.web-view-folders__header,
.web-view-properties__header,
.web-view-menu__header {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  width: 100%;
}

.web-view-folders__header-container,
.web-view-properties__header-container,
.web-view-menu__header-container {
  padding: 1rem 1rem 0;
  border-bottom: 1px solid var(--color-neutral-500, #88898C);
  margin-bottom: 1rem;
  width: 100%;
}

.web-view-folders__header__title,
.web-view-properties__header__title,
.web-view-menu__header__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex-grow: 1;
  overflow: hidden;
}

.web-view-folders__header__title__text,
.web-view-properties__header__title__text,
.web-view-menu__header__title__text,
.web-view-cut__header__title__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  flex-grow: 1;
  font-weight: bold !important;
  font-size: 1.3rem !important;
}

.web-view-folders__header__close,
.web-view-properties__header__close,
.web-view-menu__header__close {
  flex-shrink: 1;
}

.web-view-folders__header__close__button,
.web-view-properties__header__close__button,
.web-view-menu__header__close__button,
.close-button {
  transition: background-color 0.25s ease;
  background-color: unset;
  border: none;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.web-view-folders__header__close__button img,
.web-view-properties__header__close__button img,
.web-view-menu__header__close__button img,
.close-button img {
  vertical-align: middle;
}

.web-view-folders__header__close__button:hover,
.web-view-properties__header__close__button:hover,
.web-view-menu__header__close__button:hover,
.close-button:hover {
  background-color: var(--color-neutral-200, #D5D7DB);
}

.web-view-folders__section-radio__label,
.web-view-properties__section-radio__label,
.web-view-menu__section-radio__label {
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  border-bottom: unset;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  transition: border-color 0.3s ease;
  line-height: 1;
  cursor: pointer;
}

.web-view-folders__section-radio__label strong,
.web-view-properties__section-radio__label strong,
.web-view-menu__section-radio__label strong {
  font-weight: 400;
  vertical-align: middle;
}

.web-view-folders__section-radio form,
.web-view-properties__section-radio form,
.web-view-menu__section-radio form {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.web-view-folders__section-radio input,
.web-view-properties__section-radio input,
.web-view-menu__section-radio input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.web-view-folders__section-radio input:checked + .web-view-folders__section-radio__label,
.web-view-folders__section-radio input:checked + .web-view-properties__section-radio__label,
.web-view-folders__section-radio input:checked + .web-view-menu__section-radio__label,
.web-view-properties__section-radio input:checked + .web-view-folders__section-radio__label,
.web-view-properties__section-radio input:checked + .web-view-properties__section-radio__label,
.web-view-properties__section-radio input:checked + .web-view-menu__section-radio__label,
.web-view-menu__section-radio input:checked + .web-view-folders__section-radio__label,
.web-view-menu__section-radio input:checked + .web-view-properties__section-radio__label,
.web-view-menu__section-radio input:checked + .web-view-menu__section-radio__label {
  border-color: var(--color-neutral-500, #88898C);
}

.web-view-folders__section-radio__label {
  flex-grow: 1;
  border-radius: unset;
  border: none;
  background-color: var(--color-neutral-200, #D5D7DB);
  padding: 0.75rem;
  transition: background-color 0.25s ease, color 0.25s ease, font-weight 0.25s ease;
}

.web-view-folders__section-radio {
  margin-left: -1rem;
  margin-right: -1rem;
  min-height: 41px;
}

.web-view-folders__section-radio form {
  justify-content: unset;
  text-align: center;
}

.web-view-folders__section-radio input:checked + .web-view-folders__section-radio__label {
  background-color: var(--color-primary-500, #1684D9);
  color: var(--base, #F8FAFF);
}

.web-view-folders__section-radio input:checked + .web-view-folders__section-radio__label strong {
  font-weight: 700;
}

.web-view-folders__main--filter,
.web-view-folders__main--explore,
.web-view-menu__main {
  padding: 0 1rem;
  height: 100%;
  margin-bottom: 1rem;
  overflow: auto;
}

.web-view-menu__main h2, .web-view-menu__main dd {
  padding-left: 10px;
  padding-right: 10px;
}

.web-view-menu__main h2 {
  font-weight: bold;
}

.web-view-menu__main dd {
  margin: 0;
}

.webview-wasd-keyboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  gap: 0.25rem;
}

.webview-wasd-keyboard-container .webview-other-keys {
  gap: 0.25rem;
}

.webview-wasd-keyboard-container dd {
  border: 1px solid var(--color-neutral-800, #3E3E40);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  width: 40px;
}

.webview-wasd-keyboard-container kbd {
  font-weight: bold;
}

.webview-keyboard-key {
  border: 1px solid var(--color-neutral-800, #3E3E40);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-weight: bold;
}

.webview-other-keys {
  display: flex;
  justify-content: space-between;
}

.web-view-folders__main--filter {
  padding: 0 2rem;
}

@media screen and (max-width: 950px) {
  .webview-shortcuts-container {
    display: none;
  }
}
.webview-shortcuts-container-item {
  text-align: center;
}

.webview-shortcuts-container-item > dl {
  padding: 1rem 0;
}

.webview-shortcuts-container-item + .webview-shortcuts-container-item {
  border-top: 1px solid var(--color-neutral-300, #BABBBF);
}

.webview-shortcuts-mouse-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.webview-shortcuts-mouse-container__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.webview-shortcuts-mouse-container__row dd {
  width: min(100vw, 70px);
  padding: 0;
}

.webview-shift-guide-container {
  gap: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.load-in-other-quality-button {
  display: block;
  text-align: center;
  margin-top: 1rem;
}

.load-more-items {
  border: none;
  background: none;
  color: var(--color-primary-700, #006DC0);
}

.web-view-properties .content {
  padding: 0 20px;
  overflow: auto;
  height: calc(100% - (64.19px + 2rem));
  font-size: small;
  margin-bottom: 1rem;
}

.web-view-properties .content h6 {
  font-size: small;
}

@media screen and (max-width: 950px) {
  .web-view-properties .content {
    font-size: small;
  }
  .web-view-properties .content h6 {
    font-size: small;
  }
}
.web-view-bottom-menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1.25rem, 3vw);
  position: fixed;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto 0;
  bottom: 20px;
  z-index: 9999;
}

@media screen and (max-width: 950px) {
  .web-view-bottom-menu-container {
    bottom: 5px;
  }
}
.web-view-bottom-menu-button-container {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3rem;
}

.web-view-bottom-menu-container .button {
  position: relative;
  background-color: #F0F2F7;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.web-view-bottom-menu-container .button.active::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-width: 1rem;
  left: 50%;
  transform: rotate(0deg);
  width: 1rem;
  height: 0.6rem;
  background: var(--color-neutral-800, #3E3E40);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translate(-50%) rotate(180deg);
  top: -0.6rem;
}

.web-view-bottom-menu-container .button svg {
  vertical-align: middle;
}

.web-view-bottom-menu-container .button path {
  transition: fill 0.3s ease;
}

.fifth-submenu-container .button.active::before {
  content: unset;
}

.web-view-bottom-menu-container .button:hover,
.web-view-bottom-menu-container .button:focus {
  background-color: var(--color-neutral-100, #E4E6EB);
}

.web-view-bottom-menu-container .button.active {
  background-color: var(--color-primary-700, #006DC0);
}

.web-view-bottom-menu-container .button.active path {
  fill: var(--white, #F8FAFF);
}

.web-view-bottom-menu-container #explore {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.web-view-bottom-menu-container #cut {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.web-view-bottom-menu-container #measure {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.web-view-bottom-menu-container #isolation {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.web-view-bottom-menu-container #menu {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

.web-view-bottom-menu-container .sub-button {
  position: absolute;
  background-color: #F0F2F7;
  translate: 32px -32px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.web-view-bottom-menu-container .sub-button:hover {
  background-color: var(--color-neutral-100, #E4E6EB);
}

.web-view-bottom-menu-container .sub-button .active {
  background-color: var(--color-primary-700, #006DC0);
}

.web-view-bottom-menu-container .sub-button .active path {
  fill: var(--white, #F8FAFF);
}

.toggle-details-button {
  display: none;
  background-color: #F0F2F7;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 50%;
  position: absolute;
  top: calc(100% + 1rem);
  right: 2rem;
}

.toggle-details-button svg {
  vertical-align: middle;
}

.toggle-details-button path {
  transition: fill 0.3s ease;
}

.toggle-details-button:hover,
.toggle-details-button:focus {
  background-color: var(--color-neutral-100, #E4E6EB);
}

.toggle-details-button.active {
  background-color: var(--color-primary-700, #006DC0);
}

.toggle-details-button.active path {
  fill: var(--white, #F8FAFF);
}

@media screen and (max-width: 950px) {
  .webview-header .toggle-details-button.show {
    display: flex;
  }
}
.web-view-cut-container {
  z-index: 2;
  position: absolute;
  width: 320px;
  height: 100%;
  max-height: 350px;
  margin-top: 20px;
  right: 20px;
  background: var(--color-neutral-50, #F0F2F7);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: unset;
  flex-direction: column;
}

.web-view-cut-container .slider-container {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-bottom: 10px;
}

.web-view-cut-container .slider-container .slider {
  left: -4px;
  margin: 10px 5px;
}

.element_option {
  margin: 20px 0;
  cursor: pointer;
}

/* Accordion - Start */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accordion-content {
  padding-left: 1rem;
  font-size: 1rem;
  display: none;
}

.accordion-content h1, .accordion-content h2, .accordion-content h3, .accordion-content h4, .accordion-content h5, .accordion-content h6 {
  font-size: 1rem;
}

.accordion-header__chevron {
  transition: transform 0.5s ease;
}

.accordion-header {
  appearance: unset;
  background: unset;
  text-align: left;
  border: unset;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.accordion-header h1, .accordion-header h2, .accordion-header h3, .accordion-header h4, .accordion-header h5, .accordion-header h6 {
  font-size: 1rem;
}

.accordion-header.open .accordion-header__chevron {
  transform: rotate(90deg);
}

.accordion-header.open + .accordion-content {
  display: block;
}

.accordion-header.empty-accordion .accordion-header__chevron {
  transform: unset !important;
}

/* Accordion - End */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .content {
  width: 300px;
  background-color: #F0F2F7;
  padding: 20px;
  text-align: center;
}

/* Property Panel - Start */
.property-container {
  border: 1px solid var(--color-neutral-300, #BABBBF);
  word-break: break-word;
  font-size: 0.8rem;
}

.property-container h1, .property-container h2, .property-container h3, .property-container h4, .property-container h5, .property-container h6 {
  font-size: 0.8rem;
}

.property-container__row {
  display: grid;
  grid-template-columns: 4fr 6fr;
  border-top: 1px solid var(--color-neutral-300, #BABBBF);
}

.property-container__row:nth-child(odd) {
  background-color: var(--color-neutral-50, #F0F2F7);
}

.property-container__row:nth-child(even) {
  background-color: var(--color-neutral-100, #E4E6EB);
}

.property-container__column {
  padding: 0.5rem;
  border-left: 1px solid var(--color-neutral-300, #BABBBF);
}

.property-container__column:first-child {
  border-left: unset;
}

.property-container + .property-container {
  margin-top: 1rem;
}

@media screen and (max-width: 950px) {
  .property-container + .property-container {
    margin-top: 0.25rem;
  }
}
.property-container__row + .property-container {
  margin-top: 1rem;
}

@media screen and (max-width: 950px) {
  .property-container__row + .property-container {
    margin-top: 0.25rem;
  }
}
.js-accordion-header {
  padding: 0.5rem;
  font-weight: bold;
  background-color: var(--color-neutral-100, #E4E6EB);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.js-accordion-header .js-accordion-header__title {
  font-size: small !important;
}

.js-accordion-content {
  display: none;
}

.js-accordion-header.open ~ .js-accordion-content {
  display: block;
}

.js-accordion-header__chevron {
  transition: transform 0.5s ease;
}

.js-accordion-header.open .js-accordion-header__chevron {
  transform: rotate(90deg);
}

/* Property Panel - End */
/* Tooltip - Start */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  width: fit-content;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  /* Position the tooltip above the element */
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  text-wrap: nowrap;
}

@media (hover: hover) {
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}
@media (hover: none) {
  .tooltip:hover .tooltip-text {
    visibility: none !important;
    opacity: 0 !important;
  }
}
/* Tooltip - End */
.filter-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black with 50% transparency */
  z-index: 9998;
  /* Adjust as needed */
}

.filter-loading .loading-animation {
  border-width: 8px;
  border-style: solid;
  border-color: #F0F2F7 #F0F2F7 #F0F2F7 #006DC0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  animation: spin 1.5s infinite;
  position: relative;
  margin: 6em auto;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.button__submenu {
  flex-direction: row;
  background-color: var(--color-neutral-800, #3E3E40);
  border-radius: 2rem;
  padding: 0 1rem;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  gap: 1rem;
  display: none;
  left: 50%;
  transform: translate(-50%);
}

.button__submenu button {
  background: none !important;
  box-shadow: unset !important;
  width: 3rem !important;
  height: 3rem !important;
  border: unset !important;
}

.button__submenu button.active svg {
  filter: drop-shadow(0px 0px 3px var(--color-primary-50, #4DB2FF));
}

.button__submenu button.active img {
  filter: drop-shadow(0px 0px 3px var(--color-primary-50, #4DB2FF));
}

.button__submenu button:hover svg {
  filter: drop-shadow(0px 0px 3px var(--color-primary-50, #4DB2FF));
}

.button__submenu button:hover img {
  filter: drop-shadow(0px 0px 3px var(--color-primary-50, #4DB2FF));
}

.button__submenu button::before {
  content: unset !important;
}

.button__submenu.active {
  display: flex;
}

.fit-project-button.active img {
  filter: unset !important;
}

.fit-project-button.active img:hover {
  filter: drop-shadow(0px 0px 3px var(--color-primary-50, #4DB2FF)) !important;
}

.transform-minus-135deg {
  transform: rotate(-135deg);
}

.transform-135deg {
  transform: rotate(135deg);
}

.transform-minus-45deg {
  transform: rotate(-45deg);
}

.transform-45deg {
  transform: rotate(45deg);
}

#first_submenu {
  left: 0;
  transform: unset;
}

.second-submenu-container,
.third-submenu-container {
  position: relative;
}

.second-submenu-container .button__submenu,
.third-submenu-container .button__submenu {
  right: unset;
  left: 50%;
  transform: translate(-50%);
}

.second-submenu-container .button__submenu::before,
.third-submenu-container .button__submenu::before {
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

#fourth_submenu {
  gap: 0;
}

@media only screen and (max-width: 750px) {
  #fourth_submenu {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}
.share-project-link-modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.share-project-link-modal h1,
.loader-modal h1,
.no-object-selected-modal h1,
.no-hidden-object-selected-modal h1 {
  font-weight: bold;
}

.share-project-link-modal h2,
.loader-modal h2,
.no-object-selected-modal h2,
.no-hidden-object-selected-modal h2 {
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
}

.deactivated {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.deactivated img {
  filter: unset !important;
}

.deactivated img:hover {
  filter: unset !important;
}

#no_hidden_object_selected_modal .content-modal,
#no_object_selected_modal .content-modal {
  max-width: 300px !important;
}

#no_hidden_object_selected_modal .modal-content,
#no_object_selected_modal .modal-content {
  padding: 0 !important;
}

button.active ~ .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-display: swap;
  font-size: inherit;
  scrollbar-width: thin; /* "auto" or "thin"  */
  scrollbar-color: var(--color-primary-500, #1684D9) var(--color-neutral-50, #F0F2F7); /* scroll thumb and track */
}

/* Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
  width: 0.5rem; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--color-neutral-50, #F0F2F7); /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-500, #1684D9); /* color of the scroll thumb */
  border-radius: 5px;
  border: 1px solid var(--color-neutral-50, #F0F2F7);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-700, #006DC0); /* color of the scroll thumb on hover */
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  text-size-adjust: none;
}

html {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-display: swap;
}

body {
  line-height: 1.5;
  color: var(--color-neutral-900, #252526);
  background-color: var(--white, #F8FAFF);
  height: 100%;
}

ol,
ul {
  list-style: none;
}

dl,
dd,
dt {
  margin: none;
  padding: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  border-radius: 0;
  caret-color: #365ab0;
  accent-color: #365ab0;
  border-color: #DDDFE5;
  font-size: 0.875rem;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-neutral-900, #252526);
  opacity: 1; /* Firefox */
  font-size: 0.875rem;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

::-moz-placeholder { /* Firefox 19+ */
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

:-moz-placeholder { /* Firefox 18- */
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

:-ms-input-placeholder { /* IE 10+ */
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

button,
a,
input[type=checkbox],
input[type=radio],
input[type=range] {
  cursor: pointer;
}

datalist {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input[list]::-webkit-list-button {
  display: none !important;
}

input[list]::-webkit-calendar-picker-indicator,
input[list]::-webkit-inner-spin-button,
input[list]::-webkit-outer-spin-button {
  display: none !important;
}

input[list]::-ms-clear {
  display: none !important;
}

header {
  padding: 2rem;
  background-color: var(--color-neutral-50, #F0F2F7);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 980px) {
  header {
    padding: 1rem 1.5rem;
    position: relative;
  }
}
.header-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1500px;
  margin: auto;
  align-items: center;
}

@media screen and (max-width: 980px) {
  .header-container {
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
  }
}
.header-container img {
  vertical-align: middle;
}

.menu-mobile-button {
  display: none;
}

.menu-mobile {
  transform: scale(0);
  transition: transform 0.25s ease-in-out;
  transform-origin: top right;
  position: absolute;
  top: calc(100% + 1px);
  right: 5%;
  width: min(100%, 250px);
  background-color: var(--color-neutral-50, #F0F2F7);
  z-index: 9999;
  padding: 1rem;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  gap: 0;
  text-align: left;
  font-size: 0.9rem;
}

.menu-mobile__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 100%;
}

.menu-mobile__list .projects-notification-number {
  bottom: 0;
}

.menu-mobile__list__item {
  width: 100%;
}

.menu-mobile__list__item a,
.menu-mobile__list__item .menu-mobile__projects-container {
  display: inline-block;
  width: 100%;
  padding: 0.5rem;
  transition: background-color 0.3s ease;
}

.menu-mobile__list__item .menu-mobile__projects-container {
  padding-bottom: 0;
}

.menu-mobile__list__item .profile-projects-dropdown__link {
  margin-left: 1rem;
}

.menu-mobile__list__item .profile-projects-dropdown__link:last-of-type {
  margin-bottom: 0.5rem;
}

@media (hover: hover) {
  .menu-mobile__list__item a:hover,
  .menu-mobile__list__item a:focus {
    background-color: var(--color-neutral-200, #D5D7DB);
  }
}
@media not (hover: hover) {
  .menu-mobile__list__item a:focus {
    background-color: var(--color-neutral-200, #D5D7DB);
  }
}
.menu-mobile__list__item .profile-projects-dropdown-row {
  padding: 0 !important;
  font-size: 0.8rem !important;
  gap: 0.25rem !important;
}

.menu-mobile__list__item + .menu-mobile__list__item {
  border-top: 1px solid var(--color-neutral-800, #3E3E40);
}

.menu-mobile.open {
  transform: scale(1);
}

.menu-mobile-button {
  border: none;
  background: none;
  padding: 0.5rem;
}

@media screen and (max-width: 980px) {
  .menu-desktop {
    display: none;
  }
  .menu-mobile-button {
    display: inline-block;
  }
}
.profile-container,
.profile-projects-container {
  position: relative;
}

.profile-dropdown-toggle-button,
.profile-projects-dropdown-toggle-button {
  border: none;
  background: none;
}

.profile-dropdown,
.profile-projects-dropdown {
  position: absolute;
  background-color: var(--color-neutral-50, #F0F2F7);
  min-width: 15rem;
  min-height: 9rem;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  border-radius: 5px;
  top: 100%;
  right: 0;
  z-index: 9999;
  transition: transform 0.25s ease;
  transform: scale(0);
  transform-origin: top right;
}

.profile-dropdown img,
.profile-projects-dropdown img {
  vertical-align: middle;
}

.profile-projects-dropdown {
  padding-top: 0.5rem;
  min-height: unset;
  min-width: 16rem;
}

.profile-projects-dropdown__link {
  display: inline-block;
  width: 100%;
  font-size: 0.9rem;
}

.profile-dropdown.open,
.profile-projects-dropdown.open {
  transform: scale(1);
}

.profile-dropdown-row,
.profile-projects-dropdown-row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
  align-items: center;
}

.profile-projects-dropdown-row:last-of-type {
  border-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.profile-dropdown-column,
.profile-projects-dropdown-column {
  flex-grow: unset;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.profile-logout-link {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  transition: background-color 0.5s ease;
}

.profile-logout-link:hover {
  background-color: var(--color-neutral-200, #D5D7DB);
}

.active-property-link {
  color: var(--color-primary-500, #1684D9);
  text-decoration: underline;
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

nav div {
  flex-grow: 1;
}

@media screen and (max-width: 619px) {
  nav {
    text-align: center;
    flex-direction: column;
  }
}
nav img {
  vertical-align: middle;
}

.main-title {
  color: var(--color-primary-700, #006DC0);
  font-weight: bold;
  text-align: center;
  font-size: 1.5rem;
}

.sub-title {
  color: var(--color-neutral-900, #252526);
  text-align: center;
  font-size: 1.25rem;
}

.main-container {
  margin-top: 3rem;
}

.main-form {
  background-color: var(--color-neutral-50, #F0F2F7);
  border-radius: 1rem;
  margin: auto;
  margin-top: 2rem;
  text-align: center;
  max-width: 750px;
  width: calc(100% - 2rem);
  padding: 6rem 2rem;
}

.main-form .input-default,
.main-form .checkbox-default {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.main-form button,
.main-form .link--button,
.button--modal {
  background-color: var(--color-primary-700, #006DC0);
  color: var(--white, #F8FAFF);
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1rem;
  border: 1px solid var(--color-primary-700, #006DC0);
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

@media screen and (max-width: 449px) {
  .button--modal {
    flex-grow: 1;
  }
}
.modal-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.button--modal:hover,
.button--modal:focus {
  background-color: transparent;
  color: var(--color-primary-700, #006DC0);
}

.button--delete {
  background-color: var(--color-error-300, #F24130);
  border-color: var(--color-error-300, #F24130);
}

.button--delete:hover,
.button--delete:focus {
  background-color: var(--white, #F8FAFF);
  color: var(--color-error-300, #F24130);
}

.button--cancel-modal {
  background-color: transparent;
  color: var(--color-primary-700, #006DC0);
}

.button--cancel-modal:hover,
.button--cancel-modal:focus {
  background-color: var(--color-primary-700, #006DC0);
  color: var(--white, #F8FAFF);
}

.button--modal-link {
  display: block;
  border: none;
  background: none;
  color: var(--color-primary-700, #006DC0);
  font-weight: 400;
  margin: auto;
  margin-top: 2rem;
  font-size: 1rem;
  transition: color 0.3s linear;
}

.button--modal-link:hover {
  color: var(--color-primary-900, #004880);
}

.share-modal__project-name {
  text-align: center;
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.qrcode-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.qrcode__image {
  width: 100%;
  max-width: 8rem;
}

.qrcode__input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.qrcode__button-container {
  margin-top: unset;
}

.qrcode__input {
  border: 1px solid var(--color-neutral-900, #252526);
  background-color: transparent;
  padding: 0.15rem;
}

.qrcode__input:focus {
  outline: 1px solid var(--color-primary-500, #1684D9);
}

.qrcode__button {
  background-color: var(--color-primary-500, #1684D9);
  color: var(--white, #F8FAFF);
  font-weight: bold;
  border: 1px solid var(--color-primary-500, #1684D9);
  padding: 0.15rem 0.5rem;
  font-size: 0.875rem;
}

.share-protection-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.project-password-container p {
  text-align: right;
  font-size: 0.875rem;
}

.input-default--share-modal {
  margin-bottom: unset !important;
}

.main-form .link--button {
  background-color: transparent;
  border-color: var(--color-primary-700, #006DC0);
  color: var(--color-primary-700, #006DC0);
}

.main-form button:hover {
  background-color: transparent;
  color: var(--color-primary-700, #006DC0);
}

.main-form .link--button:hover {
  background-color: var(--color-primary-700, #006DC0);
  color: var(--white, #F8FAFF);
}

.main-form .error {
  justify-content: center;
}

.main-projects-container-message {
  display: block;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0;
  font-weight: 400;
  font-style: italic;
  font-size: 0.9rem;
}

.sub-description {
  text-align: left;
  font-size: 0.9rem;
  text-indent: 1rem;
}

.input-link {
  text-align: right;
  display: block;
  width: 100%;
  max-width: calc(500px - 2rem);
  margin: auto;
  font-size: 0.9rem;
  transition: color 0.3s linear, text-decoration 0.3s linear;
  margin-top: -0.8rem;
}

.input-link:hover {
  color: var(--color-primary-900, #004880);
  text-decoration: underline;
}

select,
.button--filter {
  background-color: transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-neutral-700);
  font-weight: 700;
  transition: background-color 0.5s linear;
  cursor: pointer;
  font-size: 0.8rem;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("https://dev-tqs-cdn.integratebim.com/assets/icons/chevron.svg");
  padding-right: 2rem;
  background-position-y: 50%;
  background-position-x: calc(100% - 0.75rem);
  background-repeat: no-repeat;
  font-size: 0.8rem;
}

select:hover,
.button--filter:hover,
.button--filter.active {
  background-color: var(--color-primary-50, #4DB2FF);
  border-color: var(--color-primary-50, #4DB2FF);
}

select > option {
  background-color: var(--color-neutral-50, #F0F2F7);
}

.main-projects-container,
.error-container {
  background-color: var(--color-neutral-50, #F0F2F7);
  margin: 1rem;
  padding: 1rem;
  border: 2rem;
  border-radius: 1rem;
  max-width: 1500px;
  width: calc(100% - 2rem);
  margin: 1rem auto;
}

.project-action-filter-button {
  background: none;
  border: none;
  margin: 0.25rem 0;
  padding: 0.25rem 1rem;
  transition: background-color 0.5s ease;
  border-radius: 5px;
}

.project-action-filter-button .project-action-filter-button__image {
  vertical-align: middle;
  transition: 0.3s filter linear, 0.3s -webkit-filter linear;
}

.project-action-filter-button:hover {
  background-color: var(--color-primary-700, #006DC0);
}

.project-action-filter-button:hover .project-action-filter-button__image {
  filter: grayscale(100) brightness(100);
}

.search-project-icon {
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.pending-projects-container,
.processing-projects-container {
  gap: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, auto);
  word-break: break-word;
}

@media screen and (max-width: 769px) {
  .pending-projects-container,
  .processing-projects-container {
    grid-template-columns: 1fr;
  }
}
.pending-projects-paragraph-description {
  text-align: center;
  margin-top: 2rem;
  font-style: italic;
  font-weight: 400;
}

.pending-projects__item,
.processing-projects__item {
  padding: 0.5rem 1rem;
  background-color: var(--color-warning-50, #FFE14D);
  transition: background-color 0.25s ease;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}

.pending-projects__item span {
  text-overflow: ellipsis;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow: hidden;
}

.processing-projects__item {
  background-color: var(--color-neutral-100, #E4E6EB);
  display: grid;
  grid-template-columns: 1fr 1fr;
  cursor: unset;
}

.processing-projects__item h2 {
  flex-grow: 1;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  word-break: keep-all;
  overflow: hidden;
}

.delete-processing-project__item {
  grid-template-columns: 1fr auto;
}

.delete-processing-project-button {
  background-color: transparent;
  border: 1px solid var(--color-neutral-700, #575759);
  color: var(--color-error-500, #D92616);
  transition: background-color 0.5s ease, color 0.3s ease;
  padding: 0.25rem;
  border-radius: 5px;
  font-weight: bold;
}

.delete-processing-project-button img {
  vertical-align: middle;
}

.delete-processing-project-button:hover {
  background-color: var(--color-neutral-200, #D5D7DB);
  color: var(--base, #F8FAFF);
}

.pending-projects__item:hover {
  background-color: var(--color-warning-300, #F2D230);
}

.model-options-container {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--color-neutral-50, #F0F2F7);
  width: min(12rem, 100vw);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3019607843), 0px 2px 6px 2px rgba(0, 0, 0, 0.1490196078);
  z-index: 1;
}

.model-options-container.open {
  display: block;
}

.model-options-container__item {
  display: flex;
  flex-direction: row;
  color: var(--color-neutral-900, #252526);
  gap: 0.5rem;
  align-items: center;
  justify-content: left;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  padding: 0.5rem 1rem;
  transition: background-color 0.5s ease;
}

.model-options-container__item:hover,
.model-options-container__item:active {
  background-color: var(--color-neutral-200, #D5D7DB);
}

.icon-text-container {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  justify-content: left;
  gap: 0.5rem;
}

.project-details-input-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

@media screen and (max-width: 520px) {
  .project-details-input-container {
    grid-template-columns: 1fr;
  }
}
.project-details-input-container .input-default input, .project-details-input-container .input-default select {
  font-weight: 400;
  color: var(--color-neutral-900, #252526);
  border-color: var(--color-neutral-900, #252526);
  font-size: 0.9rem;
}

.project-details-input-container input, .project-details-input-container select {
  font-weight: 400;
  color: var(--color-neutral-900, #252526);
  border-color: var(--color-neutral-900, #252526);
  font-size: 0.9rem;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.project-details-subtitle-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: end;
  margin-bottom: 1rem;
}

.project-details-subtitle-container .project-filename-title,
.project-details-subtitle-container .project-filename-span {
  display: inline-block;
}

.main-projects-container h1 {
  font-weight: bold;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.projects-filters-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  justify-content: space-between;
}

.projects-remove-filter-button {
  border: 1px solid var(--color-neutral-700, #575759);
  border-radius: 0.5rem;
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.projects-remove-filter-button img {
  vertical-align: middle;
}

.projects-remove-filter-button:hover {
  background-color: var(--color-neutral-100, #E4E6EB);
}

.projects-filter-selects-container,
.projects-filter-alpha-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.projects-filter-selects-container {
  flex-grow: 9;
}

.projects-container {
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 1050px) {
  .projects-container {
    grid-template-columns: 1fr;
  }
}
.projects-container__item {
  background-color: var(--color-neutral-100, #E4E6EB);
  padding: 1rem 1rem 0.5rem;
  border-radius: 0.5rem;
  flex-grow: 1;
  word-break: break-word;
}

.projects-container__item__header {
  border-bottom: 2px solid var(--color-primary-700, #006DC0);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.projects-container__item__title {
  font-weight: 400;
  overflow: hidden;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.processing-projects-title-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.processing-projects-title-container h1 {
  margin-bottom: 0;
}

.processing-projects-loader,
.project-create-loader {
  border: 0.4rem solid var(--color-neutral-200, #D5D7DB);
  border-top: 0.4rem solid var(--color-primary-500, #1684D9);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
}

.project-create-loader {
  width: 3rem;
  height: 3rem;
  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.projects-container__item__main-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 0.25fr;
  word-break: break-word;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: 0.5rem;
}

@media screen and (max-width: 640px) {
  .projects-container__item__main-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 490px) {
  .projects-container__item__main-row {
    grid-template-columns: 1fr;
  }
}
.projects-container__item__main-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.projects-container__action-button {
  background-color: var(--color-primary-700, #006DC0);
  padding: 0.25rem 1rem;
  border-radius: 5px;
  display: flex;
  border: none;
  transition: background-color 0.5s ease-in-out;
  width: fit-content;
}

@media screen and (max-width: 620px) {
  .projects-container__action-button {
    flex-grow: 1;
    justify-content: center;
  }
}
.projects-container__action-button:hover,
.projects-container__action-button:focus {
  background-color: var(--color-primary-900, #004880);
}

.project-filter-menu {
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 619px) {
  .project-filter-menu select {
    flex-grow: 1;
  }
}
.reverse-filters-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.projects-filter-box-search-container {
  width: 100%;
  max-width: 250px;
}

@media screen and (max-width: 980px) {
  .projects-filter-box-search-container {
    max-width: unset;
  }
}
.projects-filter-box-search-container .box-searchs {
  margin: 0;
}

.project-filter-menu[aria-hidden=true] {
  display: none;
}

.project-filter-button {
  background-color: transparent;
  border: none;
  transition: background-color 0.25s linear;
  border-radius: 5px;
  padding: 0.25rem;
}

.project-filter-button:hover,
.project-filter-button.active,
.project-filter-button[aria-expanded=true] {
  background-color: var(--color-primary-50, #4DB2FF);
}

.projects-notification-number {
  background: var(--color-neutral-200, #D5D7DB);
  padding: 0.2rem 0.4rem;
  color: var(--color-error-700, #C01000);
  border-radius: 100%;
  font-size: small;
  position: relative;
  bottom: 0.5rem;
  font-weight: bold;
}

.no-projects-yet-container {
  padding: 3rem 0 5rem 0;
}

.no-projects-yet-message {
  text-align: center;
}

canvas {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1700px;
  padding-right: 2rem;
  padding-left: 2rem;
  position: relative;
  width: 100%;
}

@media screen and (max-width: 520px) {
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media screen and (min-width: 320px) {
  .container {
    max-width: 421px;
  }
}
@media screen and (min-width: 421px) {
  .container {
    max-width: 520px;
  }
}
@media screen and (min-width: 520px) {
  .container {
    max-width: 576px;
  }
}
@media screen and (min-width: 576px) {
  .container {
    max-width: 768px;
  }
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 990px;
  }
}
@media screen and (min-width: 992px) {
  .container {
    max-width: 1119px;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1399px;
  }
}
@media screen and (min-width: 1400px) {
  .container {
    max-width: 1699px;
  }
}
@media screen and (min-width: 1700px) {
  .container {
    max-width: 2000px;
  }
}
h2 {
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: #444444;
  font-weight: 400;
}

a.active,
span.active,
button.active {
  font-weight: bold;
}

nav a {
  color: var(--color-neutral-900, #252526);
}

hr {
  border-color: rgba(204, 204, 204, 0.8);
}

.floating-label {
  color: #414141;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 5px;
  transition: 0.5s;
  width: 87%;
  text-align: start;
  overflow: hidden;
}

select.floating {
  border: 1px solid #ccc;
  padding: 0.5rem;
  color: var(--color-gray);
  background-color: transparent;
}

select.floating:focus {
  outline: none;
  border-color: var(--color-orange);
}

.nfse-canceled {
  background-color: rgba(189, 0, 0, 0.6);
}

.nfse-canceled p {
  color: #fff;
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
}

.box-welcome {
  margin-bottom: 4rem;
  text-align: center;
}

.box-welcome h1,
.box-welcome p {
  font-weight: 400;
  font-size: 1.3rem;
}

.box-welcome p {
  color: #709ae0;
}

@media screen and (max-width: 520px) {
  .box-welcome {
    margin-top: 2rem;
  }
}
.add-product-cart {
  position: absolute;
  left: 0rem;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.add-product-cart p {
  font-size: 0.75rem;
  font-weight: 400;
  color: #0FA958;
  text-align: center;
}

.tooltips {
  visibility: hidden;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s;
}

.tooltips:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.button--payment {
  padding: 0 40px;
}

.button-gradient,
.button-default,
.button-magipix {
  max-height: 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: 0.5s;
}

.button-gradient a,
.button-gradient button,
.button-default a,
.button-default button,
.button-magipix a,
.button-magipix button {
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
}

.box-legal-person,
.box-physical-person {
  text-align: center;
  padding-bottom: 1.5rem;
}

.box-legal-person a,
.box-physical-person a {
  color: #365ab0;
}

.add-product__or {
  cursor: unset;
  color: #444444;
}

.modal {
  opacity: 0;
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  display: none;
  z-index: 9999;
}

.modal .content-modal {
  background-color: #F8FAFF;
  margin: 2rem auto;
  padding: 20px;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  border-radius: 5px;
}

.modal .content-modal .modal-content {
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
}

.modal .content-modal .modal-content h1 {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
  font-size: 1.5625rem;
}

.modal .content-modal .modal-content h3 {
  font-weight: bold;
}

.modal .content-modal .modal-content .button {
  text-align: center;
  margin-top: 2rem;
}

.modal .content-modal .modal-content .modal-content__products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product {
  border: 2px solid #444444;
  padding: 1.25rem 0.5rem;
  border-radius: 5px;
  max-width: 15.625rem;
  position: relative;
  transition: 0.5s;
  width: calc(50% - 0.25rem);
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product input {
  appearance: none;
  width: 97%;
  height: 98%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product.check {
  border-color: #0FA958;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product.check .modal-content__products__box-product__infos__prices__price {
  color: #0FA958;
  background: transparent !important;
  -webkit-text-fill-color: #0FA958 !important;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos h1 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos .modal-content__products__box-product__infos__prices {
  text-align: center;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos .modal-content__products__box-product__infos__prices .modal-content__products__box-product__infos__prices__price {
  font-size: 2rem;
  background: -webkit-linear-gradient(90deg, rgb(112, 154, 224) 0%, rgb(55, 91, 177) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  font-weight: 400;
  transition: 0.5s;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos .modal-content__products__box-product__infos__prices .modal-content__products__box-product__infos__prices__info-price {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .modal-content__products__box-product__infos .modal-content__products__box-product__infos__prices .modal-content__products__box-product__infos__prices__info-credits {
  font-weight: 400;
  margin-bottom: 1.3rem;
}

.modal .content-modal .modal-content .modal-content__products input:checked ~ .modal-content__products__box-product {
  border-color: #709ae0;
}

.modal .content-modal .modal-content .modal-content__products .form-modal-credits {
  width: 50%;
}

.modal .content-modal .modal-content .modal-content__info-alert {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin-top: 2rem;
}

.modal .content-modal .modal-content form .button-default {
  justify-content: center;
  margin-top: 2rem;
}

.modal .content-modal .modal-content.modal-credits {
  justify-content: center;
  align-items: center;
  padding: 0;
}

.modal .content-modal .modal-content.modal-credits h1 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.modal .content-modal .modal-content.modal-credits .suggestion {
  width: 100%;
}

.modal .content-modal .modal-content.modal-credits .suggestion h2 {
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion {
  border: 2px solid #444;
  padding: 0.5rem;
  border-radius: 5px;
  width: 9rem;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion .modal-content__suggestion__box-product__infos {
  text-align: center;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion .modal-content__suggestion__box-product__infos h1 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion .modal-content__suggestion__box-product__infos .modal-content__suggestion__box-product__infos__prices__price {
  font-size: 1.3rem;
  background: -webkit-linear-gradient(90deg, rgb(112, 154, 224) 0%, rgb(55, 91, 177) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  font-weight: 400;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion .modal-content__suggestion__box-product__infos .modal-content__suggestion__box-product__infos__prices__info-price {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .modal-content__suggestion .modal-content__suggestion__box-product__infos .modal-content__suggestion__box-product__infos__prices__info-credits {
  font-weight: 400;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .box-suggetions_products {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .box-suggetions_products .box-suggestion {
  display: flex;
  align-items: center;
  flex-direction: column;
  -ms-flex-direction: column;
  gap: 0;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .box-suggetions_prices {
  display: flex;
  justify-content: center;
  font-weight: 400;
  color: #0FA958;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .box-button-suggestion-to-cart form .button-default {
  width: 100%;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.modal .content-modal .modal-content.modal-credits .suggestion #credits_suggestion .box-button-suggestion-to-cart form .button-default button {
  width: 100%;
  font-size: 1rem;
}

.modal .content-modal .modal-content.modal-credits .button-magipix {
  width: 100%;
}

.modal .content-modal .modal-content.modal-credits .button-magipix button {
  width: 100%;
  font-size: 1rem;
}

.modal .content-modal .modal-content.modal-credits .button-magipix.max-width {
  max-width: 460px;
}

.modal .content-modal .modal-content.modal-credits .input-default,
.modal .content-modal .modal-content.modal-credits .input-range-container {
  margin-bottom: 0;
  width: 45%;
}

@media screen and (min-width: 320px) and (max-width: 640px) {
  .modal .content-modal .modal-content.modal-credits .input-default,
  .modal .content-modal .modal-content.modal-credits .input-range-container {
    width: 100%;
  }
}
@media screen and (min-width: 641px) and (max-width: 992px) {
  .modal .content-modal .modal-content.modal-credits .input-default,
  .modal .content-modal .modal-content.modal-credits .input-range-container {
    width: 65%;
  }
}
.modal .content-modal .modal-content.modal-credits .product-suggestion-quantity {
  font-size: 1.5rem;
  color: #365ab0;
  font-weight: 400;
}

.modal .content-modal .modal-content.add-products .modal-content form .button-default button {
  width: 20%;
}

@media screen and (max-width: 520px) {
  .modal .content-modal .modal-content.add-products .modal-content form .button-default button {
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .modal .content-modal .modal-content.add-products .modal-content form .button-default button {
    width: 60%;
  }
}
@media screen and (min-width: 1700px) {
  .modal .content-modal .modal-content.add-products .modal-content form .button-default button {
    width: 20%;
  }
}
.modal .content-modal .content-close {
  display: flex;
  flex-direction: row-reverse;
}

.modal.active {
  opacity: 1;
  display: block;
  transition-delay: 0s;
}

.modal.add-products .button-default button {
  width: 55%;
  font-size: 1rem;
}

@media screen and (max-width: 576px) {
  .modal.add-products .button-default button {
    width: 100%;
  }
}
.modal.my-data .content-modal {
  margin: 2rem auto;
}

.modal-loader-spinner .content-modal {
  margin: auto;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal.add-products .modal-content {
  padding: 0;
}

.modal.add-products .modal-content h1 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.modal.add-products .button-default {
  margin-top: 1rem !important;
}

.update-ifc-modal .modal-content {
  padding: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.modal-header .modal-header-title {
  font-size: 1rem;
  font-weight: bold;
}

#pending_box_search_div {
  max-width: 350px;
}

.last-project-uploads-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}

@media screen and (max-width: 520px) {
  .last-project-uploads-list {
    grid-template-columns: 1fr;
  }
}
.last-project-uploads-item {
  background-color: var(--color-neutral-100, #E4E6EB);
  padding: 0.25rem 0.5rem;
  transition: background-color 0.3s linear;
  text-align: left;
  border: none;
  font-size: inherit;
  color: var(--color-neutral-900, #252526);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
}

.last-project-uploads-item h4 {
  font-weight: bold;
  font-size: 0.8rem;
}

.last-project-uploads-item:hover {
  background-color: var(--color-neutral-200, #D5D7DB);
}

.last-project-uploads-history {
  font-size: 0.8rem;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}

.switch {
  display: inline-block;
  height: 0.75rem;
  position: relative;
  width: 2.5rem;
  align-self: center;
}

.switch input {
  display: none;
}

.switch .slider {
  background-color: var(--color-neutral-200, #D5D7DB);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.switch .slider:before {
  background-color: var(--color-neutral-700, #575759);
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0;
  bottom: 50%;
  transform: translateY(50%) translateX(0);
  position: absolute;
  transition: 0.4s;
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

.switch input:checked + .slider:before {
  background-color: var(--color-primary-500, #1684D9);
  transform: translateY(50%) translateX(100%);
}

.switch-container {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  padding: 10px 0;
  align-items: center;
}

.switch-container small {
  font-size: 0.8rem;
}

.switch-container + .switch-container {
  border-top: 1px solid var(--color-neutral-300, #BABBBF);
}

.switch-text {
  word-break: break-all;
  flex: 1;
}

.web-view-folders__main--filter__column .accordion-header {
  font-weight: bold;
  padding: 0;
}

.web-view-folders__main--filter__column .accordion-content {
  padding: 0;
}

.webview-header {
  position: fixed;
  width: 100%;
  padding: 0.5rem 2rem;
  z-index: 1;
}

.webview-header .profile-dropdown,
.webview-header .projects-customer-dropdown {
  top: calc(100% + 0.5rem + 1px);
}

.webview-header .header-container {
  max-width: unset;
}

.web-view-folders__main--filter__column + .web-view-folders__main--filter__column {
  margin-top: 1rem;
}

.web-view-cut-reset-button-container {
  margin-top: 2rem;
}

.web-view-cut-reset-button {
  border: 1px solid var(--color-neutral-600, #6F7073);
  color: var(--color-primary-700, #006DC0);
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.web-view-cut-reset-button:hover {
  color: var(--color-neutral-50, #F0F2F7);
  background-color: var(--color-primary-700, #006DC0);
}

.loader-container {
  width: 100%;
  margin-top: 2rem;
  text-align: center;
  position: relative;
}

.loader-container .loader-spinner {
  margin: auto;
}

.loader-spinner {
  width: 150px;
  height: 150px;
  display: inline-block;
  position: relative;
}

.loader-spinner:before, .loader-spinner:after {
  content: "";
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #365ab0;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}

.loader-spinner:after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.loader {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
}

.loader:after, .loader:before {
  content: "";
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #709ae0;
  position: absolute;
  left: 0;
  top: 0;
  animation: animloader 2s linear infinite;
}

.loader:after {
  animation-delay: 1s;
}

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.button-icon-magipix {
  max-height: 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: 0.5s;
}

.button-icon-magipix button,
.button-icon-magipix a {
  padding: 0.625rem 0.5rem;
  color: #709ae0;
  border: 1px solid #709ae0;
  border-radius: 5px;
  transition: background-color 1s;
  background: transparent;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button-icon-magipix button:hover,
.button-icon-magipix a:hover {
  background-color: #709ae0;
  color: #F8FAFF;
}

.button-icon-magipix button:hover svg path,
.button-icon-magipix a:hover svg path {
  transition: 0.5s;
  stroke: #F8FAFF;
}

.button-magipix a,
.button-magipix button {
  padding: 0.625rem 0.5rem;
  color: #709ae0;
  border: 1px solid #709ae0;
  border-radius: 5px;
  transition: background-color 1s;
}

.button-magipix a:hover,
.button-magipix button:hover {
  background-color: #709ae0;
  color: #F8FAFF;
}

.button-magipix button {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media only screen and (max-width: 767px) {
  .load-more-pagination-button-container {
    margin-top: 1rem;
    display: inline-block;
  }
}
@media only screen and (min-width: 767px) {
  .load-more-pagination-button-container {
    display: none;
  }
}
.load-more-pagination-button {
  width: 100%;
}

.projects-container__action-button-container {
  align-items: end;
}

@media screen and (max-width: 620px) {
  .projects-container__action-button-container {
    flex-direction: row-reverse;
  }
}
.button-gradient {
  background: linear-gradient(90deg, rgb(112, 154, 224) 0%, rgb(55, 91, 177) 100%);
  transition: 0.5s;
}

.button-gradient a {
  padding: 0.75rem 1rem;
  color: #F8FAFF;
}

.button-gradient:hover {
  background-color: #365ab0;
  border-radius: 5px;
}

.button-default a,
.button-default button {
  padding: 0.875rem 1rem;
  color: #F8FAFF;
  background: #444444;
  border-radius: 5px;
  transition: background-color 1s;
  border: 0;
}

.button-default a:hover,
.button-default button:hover {
  background-color: #365ab0;
}

.pagination {
  margin: 0 auto;
  width: 30%;
  text-align: center;
  margin-top: 1rem;
}

.pagination #progress_upload_bar {
  width: 100%;
}

.pagination .count-pagination {
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  .pagination {
    width: 100%;
  }
}
#progress_upload_bar {
  width: 89%;
  background-color: #F8FAFF;
  border-radius: 4px;
  box-shadow: 0 1px 12px rgb(204, 204, 204);
  margin-top: 0.5rem;
}

#progress_upload_bar .upload-bar,
#progress_upload_bar #upload_bar {
  width: 0%;
  background-color: #709ae0;
  border-radius: 4px;
  color: #F5F9FF;
  font-weight: bold;
  height: 0.5rem;
}

#progress_upload_bar .upload-bar span,
#progress_upload_bar #upload_bar span {
  font-weight: bold;
  color: #F5F9FF;
}

#progress_upload_bar .upload-file-progress-bar,
#progress_upload_bar .list-orders-progress-bar,
#progress_upload_bar .upload-video-progress-bar {
  height: 100%;
}

#progress_upload_bar.progress-pagination.upload-bar {
  color: transparent;
  width: 10%;
}

.box-content {
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  padding: 4rem;
  width: 100%;
}

.box-content h1 {
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1rem;
}

@media screen and (min-width: 320px) {
  .box-content h1 {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 520px) {
  .box-content h1 {
    font-size: 1.5rem;
  }
}
.box-content form .button-magipix {
  justify-content: center;
  margin-top: 1rem;
}

.box-content form .button-magipix button {
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
}

@media screen and (max-width: 520px) {
  .box-content {
    width: 65%;
  }
}
@media screen and (max-width: 768px) {
  .box-content {
    padding: 2rem;
  }
}
@media screen and (max-width: 992px) {
  .box-content {
    width: 100%;
  }
}
.spinner {
  border: 14px solid #F8FAFF;
  border-top: 15px solid #709ae0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.table {
  overflow: auto;
  scrollbar-color: #414141 #ffffff;
  scrollbar-width: thin;
}

.table table {
  margin: 0 auto;
  text-align: left;
}

.table table thead,
.table table tbody {
  border-bottom: 1px solid #DDDFE5;
}

.table table thead tr th,
.table table tbody tr th {
  padding: 0.5rem 2rem 0.5rem 0rem;
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}

.table table thead tr th:last-child,
.table table tbody tr th:last-child {
  padding-right: 0;
}

.table table thead tr td,
.table table tbody tr td {
  text-align: start;
  padding: 0.5rem 2rem 0.5rem 0rem;
  white-space: nowrap;
  vertical-align: middle;
}

.table::-webkit-scrollbar-thumb {
  background-color: #414141;
  border-radius: 5px;
}

.table::-webkit-scrollbar {
  background-color: #ffffff;
  border-radius: 3px;
  width: 5px;
}

.page {
  padding: 3rem 0;
  position: relative;
}

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

.max-width {
  max-width: 600px;
}

.error {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  text-align: initial;
}

.error-paragraph {
  color: #FF0000;
  font-size: 0.75rem;
}

.account-user {
  color: #FF0000;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.ball {
  height: 10px;
  max-width: 10px;
  border-radius: 100%;
  width: 100%;
}

.box-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.input-default-icon {
  border: 1px solid #DDDFE5;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.input-default-icon img {
  padding: 0.8rem;
  background: #F5F9FF;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-right: 1rem;
}

.input-default-icon input {
  border: 0;
  outline: 0;
  padding: 0.5rem 0;
  width: calc(100% - 20px);
  padding: 0.8rem 0;
  font-size: 0.875rem;
  color: #444444;
}

.input-default-icon input#user_country_code {
  width: 20%;
}

.input-default-icon input:focus ~ .input-dafault-icon {
  border-color: #365ab0;
}

.input-range {
  width: 100%;
}

.input-default,
.input-default-icon,
.select-default {
  position: relative;
  margin-bottom: 10px;
}

.input-default.focus label,
.input-default-icon.focus label,
.select-default.focus label {
  top: -18px;
  font-size: 14px;
  color: #365ab0;
  left: 0;
}

.input-default input:-webkit-autofill + label,
.input-default-icon input:-webkit-autofill + label,
.select-default input:-webkit-autofill + label {
  top: -18px;
  font-size: 14px;
  color: var(--color-orange);
}

.input-default {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.input-default input,
.input-default textarea {
  width: 100%;
  border: 1px solid var(--color-neutral-900, #252526);
  border-radius: 5px;
  padding: 0.8rem 1.3rem;
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
  background-color: transparent;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  outline: none;
}

.input-default input::placeholder, .input-default input::-moz-placeholder, .input-default input::-webkit-input-placeholder,
.input-default textarea::placeholder,
.input-default textarea::-moz-placeholder,
.input-default textarea::-webkit-input-placeholder {
  color: var(--color-neutral-900, #252526);
  font-size: 0.875rem;
}

.input-default input:focus, .input-default input:focus-visible,
.input-default textarea:focus,
.input-default textarea:focus-visible {
  border-color: #709ae0;
}

.input-default input:read-only,
.input-default textarea:read-only {
  background-color: #DDDFE5;
  cursor: not-allowed;
}

.input-default select {
  width: 100%;
  border: 1px solid var(--color-neutral-900, #252526);
  border-radius: 5px;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1.3rem;
  color: #444444;
  background-color: transparent;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  outline: none;
}

.input-default select:focus, .input-default select:focus-visible {
  border-color: #709ae0;
}

.input-default select option {
  width: 100%;
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  padding: 0.8rem 1.3rem;
  color: #444444;
  background-color: #fff;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  outline: none;
}

.input-default.input-password {
  position: relative;
}

.toggle-password-button,
.main-form .toggle-password-button {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  right: 1rem;
  padding: 0;
  background: none;
  border: none;
}

.toggle-password-button img,
.main-form .toggle-password-button img {
  vertical-align: middle;
}

.select-default select {
  width: 100%;
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  padding: 0.8rem 1.3rem;
  color: #444444;
  outline: none;
  font-size: 1rem;
  background-color: transparent;
}

.select-default select:focus, .select-default select:focus-visible {
  border-color: #709ae0;
}

.checkbox-default {
  display: flex;
  align-items: start;
  gap: 0.3rem;
}

.checkbox-default input {
  width: auto;
}

.checkbox-default label {
  font-size: 0.9rem;
  text-align: start;
}

.checkbox-default label a {
  color: #365ab0;
  text-decoration: underline;
  font-weight: 400;
}

@media screen and (max-width: 421px) {
  .checkbox-default {
    align-items: flex-start;
  }
}
.change-lang-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.change-lang-button.active {
  background-color: #365ab0;
  color: #F8FAFF;
}

.change-lang-button.active span {
  color: #F8FAFF;
}

.navbar {
  background-color: #F8FAFF;
  height: 4.813rem;
  display: flex;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
}

.navbar .navbar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .navbar__content .navbar__content__logo a {
  display: flex;
}

.navbar .navbar__content .navbar__content__logo img {
  width: 200px;
  height: 60px;
}

.navbar .navbar__content .navbar__content__items {
  display: flex;
  gap: 1rem;
}

.navbar .navbar__content .navbar__content__items ul {
  display: flex;
  gap: 1rem;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .navbar .navbar__content .navbar__content__items ul li {
    font-size: 1.25rem;
  }
}
.navbar .navbar__content .navbar__content__items .active {
  color: #365ab0;
}

@media screen and (max-width: 465px) {
  .navbar .navbar__content .navbar__content__items {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
}
.navbar .navbar__content .navbar__content__items .form-language {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  align-items: center;
}

.navbar .navbar__content .navbar__content__items .form-language button {
  padding: 0.2rem 0.5rem;
}

.navbar .navbar__content .navbar__content__options {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

@media screen and (max-width: 421px) {
  .navbar .navbar__content .navbar__content__options .button-magipix a {
    font-size: 0.95rem;
  }
}
.navbar .navbar__content .navbar__content__options .navbar__content__options__user__logged {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__car-shopping {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__car-shopping .navbar__content__options__car-shopping__number {
  position: absolute;
  top: 21px;
  left: 21px;
  background: #709ae0;
  border-radius: 100%;
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  color: #F8FAFF;
  transition: transform 0.5s;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__car-shopping img {
  width: 40px;
  height: 40px;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile {
  position: absolute;
  right: 0.5rem;
  top: 4rem;
  background: #fff;
  padding: 1.3rem 1rem;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  border-radius: 5px;
  z-index: 1;
  display: none;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile.open {
  display: block;
  width: 16.75rem;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile div p {
  font-weight: 400;
  margin-bottom: 1rem;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile div .navbar__content__options__box-user-profile__box-profile__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile div .navbar__content__options__box-user-profile__box-profile__links a {
  color: #365ab0;
}

@media screen and (max-width: 768px) {
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile {
    width: 100vw;
    right: -1rem;
    transform: translateX(50%);
  }
}
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile img {
  width: 40px;
  height: 40px;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping {
  position: relative;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order {
  position: absolute;
  right: 0.5rem;
  top: 4rem;
  background: #fff;
  padding: 1.5rem 1rem;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  border-radius: 5px;
  z-index: 1;
  display: none;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order.open {
  display: block;
  width: 18.75rem;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-direction: column;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items .box-mini-summary-order__product_items__name-product {
  width: 33.33%;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items .box-mini-summary-order__product__quantity {
  display: flex;
  align-items: center;
  background: #DDDFE5;
  padding: 0.2rem;
  border-radius: 5px;
  gap: 0.2rem;
  width: 25%;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items .box-mini-summary-order__product__quantity img {
  cursor: pointer;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items .box-mini-summary-order__product__button-remove__remove-products {
  width: 20%;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product_items .box-mini-summary-order__product__button-remove__remove-products .box-mini-summary-order__product__remove-products {
  font-size: 0.75rem;
  font-weight: 400;
  color: #BD0000;
  cursor: pointer;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__not-products {
  display: flex;
  width: 100%;
  justify-content: center;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .box-mini-summary-order__product .box-mini-summary-order__product__box-button-magipix {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order .button-magipix a {
  width: 100%;
}

@media screen and (min-width: 320px) and (max-width: 421px) {
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order {
    position: absolute;
    width: 100vw;
    right: calc(50% + 1rem);
    transform: translateX(50%);
  }
}
@media screen and (max-width: 960px) {
  .navbar .navbar__content {
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    margin: 0.5rem 0;
  }
}
.navbar.navbar-backoffice .navbar__content__options a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar.navbar-backoffice .navbar__content__items ul {
  flex-wrap: wrap;
}

@media screen and (max-width: 858px) {
  .navbar.navbar-backoffice .navbar__content__items ul {
    gap: 0.5rem;
    justify-content: center;
  }
}
@media screen and (max-width: 376px) {
  .navbar.navbar-backoffice {
    height: 17rem;
  }
}
@media screen and (max-width: 960px) {
  .navbar {
    height: 14rem;
  }
}
@media screen and (max-width: 640px) {
  .navbar {
    display: none;
  }
}
.navbar__button,
.navbar__button--projects {
  border: 1px solid #365ab0;
  border-radius: 3px;
  background: transparent;
  color: #444;
  font-weight: bold;
}

.navbar__button--projects {
  margin: auto;
  margin-bottom: 0;
  gap: 0.25rem;
  padding: 0.75rem 0.25rem;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s ease, color 0.25s ease;
}

.navbar__button--projects.active {
  background-color: #365ab0;
  color: #F8FAFF;
}

.navbar__button--projects:hover {
  background-color: #365ab0;
  color: #F8FAFF;
}

.wrapper {
  display: flex;
  flex-grow: 1;
}

.navbar-user {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 0;
  z-index: 1000;
}

@media screen and (min-width: 768px) {
  .navbar-user {
    position: sticky;
  }
}
.navbar.mobile {
  display: none;
}

.navbar.mobile .navbar__content.content-mobile {
  flex-direction: row;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.navbar.mobile .navbar_mobile__menu {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.navbar.mobile .navbar_mobile__menu input {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 40px;
  height: 32px;
  top: -7px;
  left: -5px;
  opacity: 0;
  z-index: 2;
}

.navbar.mobile .navbar_mobile__menu .button-hamburguer-item {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  background: #365ab0;
  position: relative;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s ease-in-out, background 0.5s ease-in-out, opacity 0.55s ease;
}

.navbar.mobile .navbar_mobile__menu .button-hamburguer-item:first-child {
  transform-origin: 0% 0%;
}

.navbar.mobile .navbar_mobile__menu .button-hamburguer-item:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.navbar.mobile .navbar_mobile__menu input:checked ~ .button-hamburguer-item {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, 1px);
  background: #232323;
}

.navbar.mobile .navbar_mobile__menu input:checked ~ .button-hamburguer-item:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.navbar.mobile .navbar_mobile__menu input:checked ~ .button-hamburguer-item:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

.navbar.mobile .navbar_mobile__menu input:checked ~ .navbar_mobile__content_items {
  transform: none;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items {
  position: absolute;
  right: 0;
  margin-top: 2rem;
  z-index: 999;
  background: rgba(245, 249, 255, 0.9);
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s ease-in-out;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items ul li {
  margin-bottom: 0.3rem;
  font-size: 1.5rem;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items ul li:last-child {
  margin-bottom: 0;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .form-language {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .form-language .change-lang-button {
  font-size: 1.2rem;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options {
  flex-direction: column;
  align-items: normal;
  width: 100%;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .button-magipix button,
.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .button-magipix a {
  width: 100%;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__user__logged {
  justify-content: center;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__box-user-profile img,
.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__box-user-profile img,
.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__car-shopping img,
.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__car-shopping img {
  width: 50px;
  height: 50px;
}

.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__car-shopping__number,
.navbar.mobile .navbar_mobile__menu .navbar_mobile__content_items .navbar__content__options .navbar__content__options__car-shopping .navbar__content__options__car-shopping__number {
  top: 25px;
  left: 25px;
}

@media screen and (max-width: 640px) {
  .navbar.mobile {
    display: flex;
  }
}
#search_cupom_by_name_ul_div,
#search_project_by_project_id_ul_div,
#search_project_by_user_email_ul_div,
#search_project_by_project_code_ul_div,
#search_user_by_first_tree_letters_email_ul_div,
#search_user_by_first_tree_letters_name_ul_div,
#search_project_by_name_ul_div,
#search_project_by_code_ul_div {
  border-right: 1px solid #DDDFE5;
  border-left: 1px solid #DDDFE5;
  border-radius: 5px;
  position: absolute;
  width: 250px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 12px rgb(204, 204, 204);
  font-size: 0.8rem;
}

#search_cupom_by_name_ul_div .item-cupom,
#search_cupom_by_name_ul_div .item-name,
#search_cupom_by_name_ul_div .item-project-name,
#search_cupom_by_name_ul_div .item-project-code,
#search_project_by_project_id_ul_div .item-cupom,
#search_project_by_project_id_ul_div .item-name,
#search_project_by_project_id_ul_div .item-project-name,
#search_project_by_project_id_ul_div .item-project-code,
#search_project_by_user_email_ul_div .item-cupom,
#search_project_by_user_email_ul_div .item-name,
#search_project_by_user_email_ul_div .item-project-name,
#search_project_by_user_email_ul_div .item-project-code,
#search_project_by_project_code_ul_div .item-cupom,
#search_project_by_project_code_ul_div .item-name,
#search_project_by_project_code_ul_div .item-project-name,
#search_project_by_project_code_ul_div .item-project-code,
#search_user_by_first_tree_letters_email_ul_div .item-cupom,
#search_user_by_first_tree_letters_email_ul_div .item-name,
#search_user_by_first_tree_letters_email_ul_div .item-project-name,
#search_user_by_first_tree_letters_email_ul_div .item-project-code,
#search_user_by_first_tree_letters_name_ul_div .item-cupom,
#search_user_by_first_tree_letters_name_ul_div .item-name,
#search_user_by_first_tree_letters_name_ul_div .item-project-name,
#search_user_by_first_tree_letters_name_ul_div .item-project-code,
#search_project_by_name_ul_div .item-cupom,
#search_project_by_name_ul_div .item-name,
#search_project_by_name_ul_div .item-project-name,
#search_project_by_name_ul_div .item-project-code,
#search_project_by_code_ul_div .item-cupom,
#search_project_by_code_ul_div .item-name,
#search_project_by_code_ul_div .item-project-name,
#search_project_by_code_ul_div .item-project-code {
  border-bottom: 1px solid #DDDFE5;
  padding: 0.7rem;
}

#search_cupom_by_name_ul_div .item-cupom a,
#search_cupom_by_name_ul_div .item-name a,
#search_cupom_by_name_ul_div .item-project-name a,
#search_cupom_by_name_ul_div .item-project-code a,
#search_project_by_project_id_ul_div .item-cupom a,
#search_project_by_project_id_ul_div .item-name a,
#search_project_by_project_id_ul_div .item-project-name a,
#search_project_by_project_id_ul_div .item-project-code a,
#search_project_by_user_email_ul_div .item-cupom a,
#search_project_by_user_email_ul_div .item-name a,
#search_project_by_user_email_ul_div .item-project-name a,
#search_project_by_user_email_ul_div .item-project-code a,
#search_project_by_project_code_ul_div .item-cupom a,
#search_project_by_project_code_ul_div .item-name a,
#search_project_by_project_code_ul_div .item-project-name a,
#search_project_by_project_code_ul_div .item-project-code a,
#search_user_by_first_tree_letters_email_ul_div .item-cupom a,
#search_user_by_first_tree_letters_email_ul_div .item-name a,
#search_user_by_first_tree_letters_email_ul_div .item-project-name a,
#search_user_by_first_tree_letters_email_ul_div .item-project-code a,
#search_user_by_first_tree_letters_name_ul_div .item-cupom a,
#search_user_by_first_tree_letters_name_ul_div .item-name a,
#search_user_by_first_tree_letters_name_ul_div .item-project-name a,
#search_user_by_first_tree_letters_name_ul_div .item-project-code a,
#search_project_by_name_ul_div .item-cupom a,
#search_project_by_name_ul_div .item-name a,
#search_project_by_name_ul_div .item-project-name a,
#search_project_by_name_ul_div .item-project-code a,
#search_project_by_code_ul_div .item-cupom a,
#search_project_by_code_ul_div .item-name a,
#search_project_by_code_ul_div .item-project-name a,
#search_project_by_code_ul_div .item-project-code a {
  color: #365ab0;
}

#search_cupom_by_name_ul_div .item-project-name a,
#search_cupom_by_name_ul_div .item-project-code a,
#search_project_by_project_id_ul_div .item-project-name a,
#search_project_by_project_id_ul_div .item-project-code a,
#search_project_by_user_email_ul_div .item-project-name a,
#search_project_by_user_email_ul_div .item-project-code a,
#search_project_by_project_code_ul_div .item-project-name a,
#search_project_by_project_code_ul_div .item-project-code a,
#search_user_by_first_tree_letters_email_ul_div .item-project-name a,
#search_user_by_first_tree_letters_email_ul_div .item-project-code a,
#search_user_by_first_tree_letters_name_ul_div .item-project-name a,
#search_user_by_first_tree_letters_name_ul_div .item-project-code a,
#search_project_by_name_ul_div .item-project-name a,
#search_project_by_name_ul_div .item-project-code a,
#search_project_by_code_ul_div .item-project-name a,
#search_project_by_code_ul_div .item-project-code a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

#navbarUser {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  width: 100%;
  transition: width 0.5s;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#navbarUser .navbar__item {
  text-decoration: none;
  color: #444444;
  transition: color 0.3s ease;
}

#navbarUser .navbar__item:hover, #navbarUser .navbar__item.active {
  color: #365ab0;
}

#navbarUser .navbar__item:hover svg, #navbarUser .navbar__item.active svg {
  stroke: #365ab0;
}

#navbarUser input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#navbarUser > span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #365ab0;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

@media screen and (min-width: 830px) {
  #navbarUser > span {
    display: none;
  }
}
@media screen and (min-width: 830px) {
  #navbarUser input {
    display: none;
  }
}
#navbarUser span:first-child {
  transform-origin: 0% 0%;
}

#navbarUser span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#navbarUser input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #444444;
}

#navbarUser input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#navbarUser input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#navbarUserContent {
  position: absolute;
  width: 300px;
  height: 100vh;
  top: -50px;
  left: -50px;
  padding: 50px;
  padding-top: 6.875rem;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

@media screen and (max-width: 640px) {
  #navbarUserContent {
    width: 100vw;
  }
}
#navbarUserContent .content-items-navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-color: #414141 #ffffff;
  scrollbar-width: thin;
  height: 85%;
}

#navbarUserContent .content-items-navbar::-webkit-scrollbar-thumb {
  background-color: #414141;
  border-radius: 5px;
}

#navbarUserContent .content-items-navbar::-webkit-scrollbar {
  background-color: #ffffff;
  border-radius: 3px;
  width: 5px;
}

#navbarUserContent .content-items-navbar ul {
  list-style-type: none;
  margin-bottom: 0.5rem;
}

#navbarUserContent .content-items-navbar ul > li {
  text-align: start;
  padding: 0.3rem 0;
  font-size: 1rem;
  font-weight: 400;
}

@media screen and (max-width: 640px) {
  #navbarUserContent .content-items-navbar ul > li {
    text-align: center;
  }
}
#navbarUserContent .content-items-navbar ul ol {
  margin-left: 0.2rem;
}

#navbarUserContent .content-items-navbar ul ol li {
  font-size: 1rem;
  padding: 0.2rem;
}

#navbarUserContent .content-items-navbar .button-magipix {
  width: 100%;
}

#navbarUserContent .content-items-navbar .button-magipix a {
  width: 100%;
  text-align: center;
}

#navbarUserContent .content-items-navbar .navbar-user__box__user-exit {
  margin: 0 0.3rem 0;
}

#navbarUserContent .content-items-navbar .navbar-user__box__user-exit .form-language {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  flex-direction: row;
}

#navbarUserContent .quantity_credtis_projects {
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 2rem;
  border-radius: 5px;
}

#navbarUserContent .quantity_credtis_projects span {
  font-weight: 400;
}

@media screen and (max-width: 640px) {
  #navbarUserContent .quantity_credtis_projects {
    text-align: center;
  }
}
#navbarUserContent .support-items {
  margin: 0.5rem 0.3rem 0;
  padding: 1rem;
  background: #F5F9FF;
  border-radius: 5px;
}

#navbarUserContent .support-items .text {
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.5rem;
}

#navbarUserContent .support-items .items {
  text-align: center;
}

#navbarUserContent .support-items li ol .navbar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#navbarUserContent .support-items li ol .navbar__item:hover li svg {
  stroke: #365ab0;
}

#navbarUserContent .support-items li ol .navbar__item .active li svg {
  stroke: #365ab0;
}

#navbarUserContent .support-items li ol li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.2rem;
}

#navbarUserContent .support-items li ol li svg {
  stroke: #444444;
}

#navbarUser input:checked ~ div {
  transform: none;
}

.navbar-user-content__logo {
  text-align: center;
  position: absolute;
  top: 2.3rem;
  display: flex;
  width: 67%;
  justify-content: start;
  align-items: center;
}

.navbar-user-content__logo a img {
  max-width: 150px;
  width: 100%;
}

@media screen and (max-width: 640px) {
  .navbar-user-content__logo a img {
    max-width: 200px;
    width: 100%;
  }
}
@media screen and (max-width: 830px) {
  .navbar-user-content__logo {
    width: 85%;
    justify-content: center;
  }
}
.navbar-user-input:checked ~ .page-user {
  padding-left: 21.875rem;
}

.page-user {
  transition: padding-left 0.5s;
  padding: 4rem 3.125rem 4rem 21.875rem;
}

@media screen and (max-width: 640px) {
  .page-user {
    display: block;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 7rem;
  }
}
#home {
  padding-bottom: 0;
}

.page__section-initial p {
  max-width: 500px;
  text-align: center;
  margin: 2rem auto 0;
}

.page__section-initial__title {
  font-weight: 400;
  font-size: 2rem;
  color: #365ab0;
  text-align: center;
  margin: 0 auto;
}

.page__section-initial__title:after {
  content: "|";
  margin-left: 5px;
  opacity: 1;
  animation: pisca 0.7s infinite;
}

@keyframes pisca {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.page__section-benefits__content {
  position: relative;
}

.page__section-benefits__content h2 {
  padding-top: 3rem;
  text-align: center;
}

.page__section-benefits {
  background-color: #F5F9FF;
  max-height: 52.125rem;
  margin-top: 5rem;
}

@media screen and (min-width: 320px) {
  .page__section-benefits {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .page__section-benefits {
    position: relative;
  }
  .page__section-benefits:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50% 50%;
    width: 70%;
    height: 14rem;
    background-color: #f5f9ff;
    left: -1px;
    top: -60px;
  }
  .page__section-benefits:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50% 50%;
    width: 35%;
    height: 10rem;
    background-color: #fcfcfc;
    right: 0px;
    top: -110px;
  }
}
.page__section-benefits__content__benefits-items {
  display: grid;
  grid-gap: 2rem;
  margin: 3rem auto 0;
}

@media screen and (min-width: 320px) {
  .page__section-benefits__content__benefits-items {
    grid-template-columns: 1fr;
    padding-bottom: 4rem;
  }
}
@media screen and (min-width: 421px) {
  .page__section-benefits__content__benefits-items {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 520px) {
  .page__section-benefits__content__benefits-items {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.page__section-benefits__content__benefits-items__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.page__section-benefits__content__benefits-items__item p {
  text-align: center;
}

.page__section-prices__caption {
  margin: 0 auto 1rem;
}

.page__section-prices {
  margin: 2rem auto;
  text-align: center;
}

.page__section-prices h2 {
  font-weight: 400;
  margin: 1rem;
}

.page__section-prices__info-pack-education {
  margin: 1rem auto 0 auto;
  text-align: start;
}

.page__section-prices__info-pack-education.max-width {
  max-width: 800px;
}

.page__section-prices__info-pack-education h3 {
  font-weight: 400;
  margin-bottom: 0.5em;
  font-size: 1.2rem;
  color: #365ab0;
}

.page__section-prices__content-prices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem auto 0;
}

.page__section-prices__content-prices.max-width {
  max-width: 785px;
}

@media screen and (min-width: 320px) {
  .page__section-prices__content-prices {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}
@media screen and (min-width: 520px) {
  .page__section-prices__content-prices {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  .page__section-prices__content-prices {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.page__section-prices__content-prices__price {
  border: 2px solid #444444;
  border-radius: 5px;
  position: relative;
}

.page__section-prices__content-prices__price.discount {
  position: relative;
}

.page__section-prices__content-prices__info {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 0.5rem;
}

.page__section-prices__content-prices__info .button-default {
  justify-content: center;
  align-items: end;
}

.page__section-prices__content-prices__info .button-default button {
  border: 0;
  font-size: 1rem;
}

.page__section-prices__content-prices__info__price {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.page__section-prices__content-prices__info__price__number-price,
.page__section-prices__content-prices__info__price__with-discount__number-price-discount {
  font-size: 1.3rem;
  background: -webkit-linear-gradient(90deg, rgb(112, 154, 224) 0%, rgb(55, 91, 177) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}

.page__section-prices__content-prices__info__price__number-price span,
.page__section-prices__content-prices__info__price__with-discount__number-price-discount span {
  font-size: 1.1rem;
}

.page__section-prices__content-prices__info__price__with-discount__number-price {
  font-size: 1.125rem;
  color: #444444;
  font-weight: 400;
  max-width: 100px;
  margin: 0 auto;
  position: relative;
}

.page__section-prices__content-prices__info__price__with-discount__number-price::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: red;
  margin: 0 auto;
  position: absolute;
  top: 0.6rem;
  left: 0.5rem;
}

.page__section-prices__content-prices__info__price__with-discount__percentage {
  color: #0FA958;
  font-size: 0.75rem;
  font-weight: 400;
}

.page__section-prices__content-prices__info__price__details-price,
.page__section-prices__content-prices__info__price__with-discount__details-price {
  font-size: 0.75rem;
  margin-bottom: 0;
}

.page__section-prices__content-prices__info__price__details-credits,
.page__section-prices__content-prices__info__price__with-discount__details-credits {
  font-weight: 400;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.page__section-prices__content-prices__info__name-pack {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 1rem 0;
}

.page__section-prices__content-prices__price__info-signature {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: flex;
  cursor: pointer;
}

.page__section-prices__content-prices__info__price__with-discount {
  line-height: 1.2;
}

.page__section-prices__content-prices__info__price__with-discount__details-credits {
  margin-bottom: 0.5rem !important;
}

.page__section-prices__content-prices__info__price__with-discount__details-price {
  margin-bottom: 0.5rem !important;
}

.page__section-prices__exemples,
.page__section-prices__comments {
  margin-top: 3rem;
}

.page__section-prices__exemples h2,
.page__section-prices__comments h2 {
  font-weight: 400;
}

.page__section-prices__exemples__item,
.page__section-prices__comments__item {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page__section-prices__exemples__item div,
.page__section-prices__comments__item div {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 0.5rem;
}

.page__section-prices__exemples__item div p,
.page__section-prices__comments__item div p {
  line-height: 1.3;
  text-align: start;
}

.page__section-prices__exemples__item.max-width,
.page__section-prices__comments__item.max-width {
  max-width: 800px;
}

.page__section-prices__exemples .page__section-prices__exemples__item div .ball {
  background-color: #365ab0;
}

.page__section-prices__comments .page__section-prices__comments__item div .ball {
  background-color: #709ae0;
}

.page__section-tutorials {
  background-color: #F5F9FF;
  padding-bottom: 3rem;
}

.page__section-tutorials div {
  margin: 0 auto;
  text-align: center;
}

.page__section-tutorials div h2 {
  font-weight: 400;
  padding: 3rem 0 2rem 0;
}

.page__section-tutorials div .page__section-tutorials__items {
  max-width: 960px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.page__section-tutorials div .page__section-tutorials__items div {
  width: 300px;
}

.page__section-tutorials div .page__section-tutorials__items div h3 {
  font-size: 1.3rem;
  font-weight: 400;
}

.page__section-tutorials div .page__section-tutorials__items div p {
  font-size: 0.75rem;
}

.page__section-tutorials div .page__section-tutorials__items__image {
  max-width: 300px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .page__section-tutorials div .page__section-tutorials__items {
    flex-wrap: wrap;
  }
}
.page__section-tutorials .button-default {
  justify-content: center;
  margin-top: 2rem;
}

footer {
  padding: 1rem 0;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  width: 100%;
  background-color: #fff;
}

footer .social-networks__infos {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

footer .social-networks__infos .social-networks__infos__logo-name {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.2rem;
}

footer .social-networks__infos .social-networks__infos__logo-name img {
  max-width: 120px;
  width: 100%;
}

footer .social-networks__infos .social-networks__infos__logo-name p {
  font-size: 0.75rem;
}

@media screen and (max-width: 520px) {
  footer .social-networks__infos .social-networks__infos__logo-name p {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  footer .social-networks__infos .social-networks__infos__logo-name {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (max-width: 520px) {
  footer .social-networks__infos .social-networks__infos__address p {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  footer .social-networks__infos .social-networks__infos__address {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  footer .social-networks__infos .social-networks__infos__logo-name {
    display: none;
  }
}
footer .social-networks__infos .social-networks__infos__buttons {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix a, footer .social-networks__infos .social-networks__infos__buttons .button-magipix button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix a:hover svg, footer .social-networks__infos .social-networks__infos__buttons .button-magipix button:hover svg {
  transition: 0.5s;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix a:hover svg path:first-child, footer .social-networks__infos .social-networks__infos__buttons .button-magipix button:hover svg path:first-child {
  stroke: #F8FAFF;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix a:hover svg path:last-child, footer .social-networks__infos .social-networks__infos__buttons .button-magipix button:hover svg path:last-child {
  fill: #F8FAFF;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix.whats a, footer .social-networks__infos .social-networks__infos__buttons .button-magipix.whats button {
  color: #0FA958;
  border: 1px solid #0FA958;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix.whats a:hover, footer .social-networks__infos .social-networks__infos__buttons .button-magipix.whats button:hover {
  background-color: #0FA958;
  color: #fff;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix.chat-online a:hover path, footer .social-networks__infos .social-networks__infos__buttons .button-magipix.chat-online button:hover path {
  stroke: #F8FAFF;
}

footer .social-networks__infos .social-networks__infos__buttons .button-magipix.chat-online a svg path, footer .social-networks__infos .social-networks__infos__buttons .button-magipix.chat-online button svg path {
  stroke: #709ae0;
}

@media screen and (max-width: 768px) {
  footer .social-networks__infos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}
@media screen and (max-width: 768px) {
  footer {
    display: flex;
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) {
  footer {
    position: sticky;
    z-index: 1000;
    bottom: 0;
  }
}
@media screen and (max-height: 500px) {
  footer {
    position: unset;
  }
}
#userLogin #form:invalid .button-magipix,
#userPassword #form:invalid .button-magipix,
#userPasswordReset #form:invalid .button-magipix {
  opacity: 0.5;
  pointer-events: none;
}

#userLogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-buttons-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  width: min(300px, 100%);
  margin: 3rem auto 0;
}

.login-buttons-container a, .login-buttons-container button {
  line-height: 1;
  flex-grow: 1;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__form .page__box-email-verify__form__entry__box-code {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__form .page__box-email-verify__form__entry__box-code input {
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  height: 6rem;
  font-size: 1.875rem;
  text-align: center;
  outline: none;
  width: 100%;
}

@media screen and (max-width: 520px) {
  #userVerifyEmail .page__box-email-verify .page__box-email-verify__form .page__box-email-verify__form__entry__box-code input {
    height: 3.5rem;
  }
}
#userVerifyEmail .page__box-email-verify .page__box-email-verify__form .page__box-email-verify__form__entry__box-code input:focus, #userVerifyEmail .page__box-email-verify .page__box-email-verify__form .page__box-email-verify__form__entry__box-code input:focus-visible {
  border-color: #365ab0;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__form .error {
  width: 100%;
  justify-content: start;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__info {
  text-align: center;
  margin-bottom: 2rem;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__info .page__box-email-verify__info__user-email {
  font-weight: 400;
}

#userRegisterPassword .page__box-user-register-password h1,
#userRegisterPassword .page__box-user-password-reset h1,
#userPasswordReset .page__box-user-register-password h1,
#userPasswordReset .page__box-user-password-reset h1 {
  margin-bottom: 0.5rem;
}

#userRegisterPassword .page__box-user-register-password p,
#userRegisterPassword .page__box-user-password-reset p,
#userPasswordReset .page__box-user-register-password p,
#userPasswordReset .page__box-user-password-reset p {
  text-align: center;
  margin-bottom: 3rem;
}

#userPassword .page__box-user-password .page__box-user-password__reset-password {
  text-align: center;
  margin-top: 2rem;
}

#userPassword .page__box-user-password .page__box-user-password__reset-password a {
  color: #365ab0;
  transition: 0.5s;
  cursor: pointer;
}

#userPassword .page__box-user-password .page__box-user-password__reset-password a:hover {
  color: #709ae0;
}

#userRegister .input-default-icon picture,
#panelUserData .input-default-icon picture,
.modal.my-data .input-default-icon picture {
  padding: 0.8rem;
  background: #F5F9FF;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-right: 1rem;
}

#userRegister .input-default-icon picture img,
#panelUserData .input-default-icon picture img,
.modal.my-data .input-default-icon picture img {
  padding: 0;
  background: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-right: 0;
  display: flex;
}

#userPasswordResetOnTheWay .page__box-user-password-reset p {
  text-align: center;
  margin-top: 3rem;
}

@media screen and (max-width: 800px) {
  #panelUserData .page-user__box-user-data {
    margin-top: 2rem;
  }
}
#panelUserData .page-user__box-user-data__box-inputs__box-adress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}

@media only screen and (max-width: 992px) {
  #panelUserData .page-user__box-user-data__box-inputs__box-adress {
    grid-template-columns: 1fr;
  }
}
#panelUserData .page-user__box-user-data__box-inputs__box-adress.box-inputs {
  margin-bottom: 0;
}

#panelUserData h1 {
  margin-bottom: 0.5rem;
}

#panelUserData form .button-magipix {
  margin-top: 0.5rem;
}

#panelUserData form .box-inputs {
  margin: 1rem 0 1rem;
}

#panelUserData .link-page-new-password {
  text-decoration: underline;
  color: #709ae0;
}

#panelOrderHistory,
#panelTransactionHistory,
#panelUserNewPassword,
#panelUserData,
#panelProjectCreate,
#panelOrder,
#panelProjects,
#panelUserDevice,
#panelUserLogo,
#panelUserSubscriptions,
#panelSupportEmail,
#panelProjectBalance {
  text-align: center;
  min-width: 95%;
  box-sizing: border-box;
}

#panelOrderHistory .order-history h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

#panelOrderHistory .order-history .table table tbody {
  display: block;
  max-height: calc(100vh - 18rem);
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  border-bottom: 0;
  scrollbar-color: #414141 #ffffff;
  scrollbar-width: thin;
}

#panelOrderHistory .order-history .table table tbody::-webkit-scrollbar-thumb {
  background-color: #414141;
  border-radius: 5px;
}

#panelOrderHistory .order-history .table table tbody::-webkit-scrollbar {
  background-color: #ffffff;
  border-radius: 3px;
  width: 5px;
}

#panelOrderHistory .order-history .table table tbody tr {
  border-bottom: 1px solid #DDDFE5;
}

#panelOrderHistory .order-history .table table tbody tr td a.link-order {
  cursor: pointer;
  color: #365ab0;
}

#panelOrderHistory .order-history .table table thead {
  display: table;
}

#panelOrderHistory .order-history .table table th,
#panelOrderHistory .order-history .table table td {
  width: 150px;
}

#panelTransactionHistory .transaction-history h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

#panelTransactionHistory .transaction-history .box-your-balance {
  text-align: start;
  max-width: 400px;
  width: 100%;
  margin: 0 auto 1rem auto;
  display: flex;
  gap: 0.5rem;
}

#panelTransactionHistory .transaction-history .box-your-balance .box-your-balance__your-balance {
  font-weight: 400;
}

#panelTransactionHistory .transaction-history .table table {
  width: 26%;
}

#panelTransactionHistory .transaction-history .table p {
  margin-top: 0.3rem;
}

#panelTransactionHistory .transaction-history .order-history-transitions {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#panelTransactionHistory .transaction-history .order-history-transitions .max-width {
  max-width: 1200px;
}

#panelTransactionHistory .transaction-history .order-history-transitions .creditis-modifications {
  padding: 1rem;
  text-align: start;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  border-radius: 5px;
}

#panelTransactionHistory .transaction-history .order-history-transitions .creditis-modifications p .creditis-modifications__amount,
#panelTransactionHistory .transaction-history .order-history-transitions .creditis-modifications p .credits-modification__date {
  font-weight: bold;
  color: #709ae0;
}

#panelTransactionHistory .transaction-history .order-history-transitions .creditis-modifications p .credits-modification__to {
  font-weight: bold;
  color: #365ab0;
}

#panelUserNewPassword p {
  text-align: center;
}

#panelUserNewPassword .box-inputs {
  margin: 2rem 0 1rem;
}

@media screen and (max-width: 800px) {
  #panelUserNewPassword .page-user__box-user-data {
    margin-top: 2rem;
  }
}
#panelOrder .max-width {
  max-width: 700px;
}

#panelOrder .box-title {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

#panelOrder .box-title p {
  font-size: 1.3rem;
}

#panelOrder .box-title span {
  font-size: 1.3rem;
  color: #365ab0;
}

@media screen and (max-width: 421px) {
  #panelOrder .box-title {
    flex-wrap: wrap;
  }
}
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one {
  border-bottom: 1px solid #DDDFE5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item p {
  font-weight: 400;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item:last-child {
  margin-bottom: 0.5rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item span {
  word-break: break-all;
}

@media screen and (max-width: 421px) {
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item {
    flex-wrap: wrap;
  }
}
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .box-info-magipix {
  margin-bottom: 1rem;
  display: none;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .box-info-magipix .box-info-magipix__address p {
  font-weight: 400;
  font-size: 0.75rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two {
  border-bottom: 1px solid #DDDFE5;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two p,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three p {
  font-weight: 400;
  margin: 0.5rem 0;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .page-user__box-user-order__section-two__item,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .page-user__box-user-order__section-two__item {
  margin-bottom: 0.5rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table table,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table table {
  margin: 0;
  width: 100%;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table table thead th,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table table thead th {
  font-weight: 400;
  font-size: 0.875rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table table tbody tr td,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table table tbody tr td {
  font-size: 0.875rem;
  padding: 0.5rem 0.5rem 0.5rem 0rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table table tbody tr td:last-child,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table table tbody tr td:last-child {
  padding-right: 0;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table table tbody tr td:last-child .buy-again,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table table tbody tr td:last-child .buy-again {
  font-size: 0.75rem;
  color: #709ae0;
  cursor: pointer;
  margin: 0;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .table p,
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .table p {
  float: right;
  margin-top: 1rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-four {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-four .button-magipix button {
  font-size: 1rem;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-four .box-invoce-download p {
  font-weight: 400;
}

#panelOrder .page-user__box-user-order .page-user__box-user-order__section-four .box-invoce-download .invoce-download {
  display: flex;
  margin-top: 0.5rem;
  gap: 1rem;
}

#panelOrder .page-user__box-user-order .box-total-order {
  padding: 0.5rem 1rem;
  background: #F5F9FF;
  width: 50%;
  border-radius: 10px;
  margin: 2rem auto 0;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
}

#panelOrder .page-user__box-user-order .box-total-order .total-order {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

@media screen and (min-width: 320px) {
  #panelOrder .page-user__box-user-order .box-total-order {
    width: 100%;
  }
}
@media screen and (max-width: 421px) {
  #panelOrder .page-user__box-user-order .box-total-order {
    width: 85%;
  }
}
@media screen and (min-width: 576px) {
  #panelOrder .page-user__box-user-order .box-total-order {
    width: 50%;
  }
}
#orderSummary .max-width {
  max-width: 40.625rem;
}

#orderSummary .page__order-summary > form .button-default button {
  width: 100%;
  font-size: 1rem;
}

#orderSummary .page__order-summary__box {
  border-bottom: 1px solid #DDDFE5;
}

#orderSummary .page__order-summary__box .table table thead {
  border-bottom: none;
}

#orderSummary .page__order-summary__box .table table thead tr th {
  font-weight: 400;
  padding: 0 2rem 0 0rem;
}

#orderSummary .page__order-summary__box .table table tbody {
  border-bottom: none;
}

#orderSummary .page__order-summary__box .table table tbody tr .table__item-product-quantity div {
  background-color: #DDDFE5;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 5px;
  justify-content: center;
  padding: 0.2rem 0;
}

#orderSummary .page__order-summary__box .table table tbody tr .table__item-product-quantity div img {
  cursor: pointer;
}

#orderSummary .page__order-summary__box .table table tbody tr.row-promo td.price-promo, #orderSummary .page__order-summary__box .table table tbody tr.row-promo td.total-promo {
  color: #07903E;
}

#orderSummary .page__order-summary__box .table table tbody tr.row-promo .table__item-product-quantity div {
  opacity: 0.5;
}

#orderSummary .page__order-summary__box .page__order-summary__box__add-credits-or-products {
  text-align: center;
  margin-top: 2rem;
}

#orderSummary .page__order-summary__box .page__order-summary__box__add-credits-or-products p:first-child,
#orderSummary .page__order-summary__box .page__order-summary__box__add-credits-or-products p:last-child {
  color: #365ab0;
  cursor: pointer;
}

#orderSummary .page__order-summary__box .page__order-summary__box__totals {
  display: flex;
  justify-content: end;
  align-items: end;
  margin: 0.5rem 0;
  flex-direction: column;
}

#orderSummary .page__order-summary__box .page__order-summary__box__totals p {
  font-weight: 400;
}

#orderSummary .page__order-summary__box .page__order-summary__box__totals p span {
  font-weight: 400;
  color: #07903E;
}

#orderSummary .page__order-summary__box .page__order-summary__box__not-products {
  margin: 1rem 0;
}

#orderSummary .page__order-summary__box .page__order-summary__box__not-products div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

#orderSummary .page__order-summary__box .page__order-summary__box__not-products div p {
  color: #365ab0;
}

#orderSummary .page__order-summary_box-discount h2 {
  text-align: center;
  margin: 2rem 0rem 0.5rem 0;
  font-size: 1rem;
  font-weight: 400;
}

#orderSummary .page__order-summary_box-discount form.page__order-summary_box-discount__form-coupon {
  margin-bottom: 2rem;
}

#orderSummary .page__order-summary_box-discount form.page__order-summary_box-discount__form-coupon .cupom_address span {
  color: #0FA958;
  font-weight: 400;
}

#orderSummary .page__order-summary_box-discount form .input-default {
  text-align: center;
}

#orderSummary .page__order-summary_box-discount form .input-default input {
  margin-top: 0.5rem;
}

#orderSummary .page__order-summary_box-discount form .button-magipix {
  margin-top: 1rem;
}

#orderSummary .page__order-summary_box-discount .page__order-summary_box-discount__radio {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-direction: row;
  margin-bottom: 2rem;
}

#orderSummary .button-default {
  justify-content: center;
  margin-top: 0.5rem;
}

#orderSummary .button-default a {
  width: 74%;
  text-align: center;
}

/* Page__order empty cart - Start */
.page__order__empty-cart-container {
  text-align: center;
}

.page__order__empty-cart-container .page__order__empty-cart__title {
  color: #444444;
  font-size: 1rem;
  font-weight: 400;
}

.page__order__empty-cart__image {
  filter: sepia(1) saturate(0) brightness(0.4);
}

/* Page__order empty cart - End */
#checkoutFinishShopping .page__box-checkout-credit__totals {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #0FA958;
}

#checkoutFinishShopping .page__box-checkout-credit__select-options-payment p {
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.3rem;
}

#checkoutFinishShopping .page__box-checkout-credit__select-options-payment .select-default {
  width: 60%;
  margin: 0 auto;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits {
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  padding: 1.3125rem 3rem;
  width: 100%;
  margin: 2rem 0;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits h2 {
  text-align: center;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits .page__box-checkout-credit__box-payment-credits__inputs {
  margin-top: 1rem;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits .page__box-checkout-credit__box-payment-credits__inputs .page__box-checkout-credit__box-payment-credits__inputs__validity-cvv {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits .page__box-checkout-credit__box-payment-credits__inputs .page__box-checkout-credit__box-payment-credits__inputs__validity-cvv .input-default-icon:nth-child(1) {
  width: 45%;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits .page__box-checkout-credit__box-payment-credits__inputs .page__box-checkout-credit__box-payment-credits__inputs__validity-cvv .input-default-icon:nth-child(2) {
  width: 30%;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits__option-flag {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

#checkoutFinishShopping .page__box-checkout-credit__box-payment-credits__option-flag img {
  box-shadow: 0 1px 12px #e9e3e3;
}

#checkoutFinishShopping .button-default {
  justify-content: center;
  margin: 0.5rem 0;
}

#checkoutFinishShopping .button-default button {
  width: 100%;
  font-size: 1rem;
}

#checkoutFinishShopping .page__box-checkout-credit__box-link-order-summary {
  text-align: center;
}

#checkoutFinishShopping .page__box-checkout-credit__box-link-order-summary .link-order-summary {
  text-align: center;
  text-decoration: revert;
  color: #709ae0;
  cursor: pointer;
}

#checkoutFinishShoppingPix .box-content > p {
  text-align: center;
  margin-bottom: 1.5rem;
}

#checkoutFinishShoppingPix .box-content .page__box-payment {
  text-align: center;
}

#checkoutFinishShoppingPix .box-content .page__box-payment .qrcode-image {
  width: 15.625rem;
}

@media screen and (min-width: 320px) {
  #checkoutFinishShoppingPix .box-content .page__box-payment .qrcode-image {
    width: 11.875rem;
  }
}
@media screen and (min-width: 421px) {
  #checkoutFinishShoppingPix .box-content .page__box-payment .qrcode-image {
    width: 15.625rem;
  }
}
#checkoutFinishShoppingPix .box-content .page__box-payment .link-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  margin-top: 1rem;
}

#checkoutFinishShoppingPix .box-content .page__box-payment .link-copy p {
  color: #365ab0;
  transition: 0.5s;
}

#checkoutFinishShoppingPix .box-content .page__box-payment .link-copy p:hover {
  color: #709ae0;
}

#checkoutFinishShoppingPix .box-content .page__box-payment .message-copieded {
  opacity: 0;
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

#checkoutFinishShoppingPix .box-content .page__box-payment .message-copieded span {
  background: rgba(7, 144, 62, 0.3);
  padding: 0.3rem;
  border-radius: 5px;
}

#checkoutFinishShoppingPix .box-content .page__info-pix {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#checkoutFinishShoppingPix .box-content .page__info-pix div {
  display: flex;
  flex-direction: row;
  gap: 0.3rem;
  align-items: flex-start;
}

#checkoutPaymentSuccess .page__top-side-completed-purchase {
  text-align: center;
}

#checkoutPaymentSuccess .page__top-side-completed-purchase > img {
  margin-bottom: 0.5rem;
}

#checkoutPaymentSuccess .page__top-side-completed-purchase h1 {
  margin-bottom: 0;
}

#checkoutPaymentSuccess .page__top-side-completed-purchase h1 a {
  color: #365ab0;
}

#checkoutPaymentSuccess .page__top-side-completed-purchase__box-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

#checkoutPaymentSuccess p {
  text-align: center;
  margin-top: 1rem;
}

#checkoutPaymentSuccess p a {
  cursor: pointer;
  color: #365ab0;
}

#panelProjectCreate {
  margin: 0 auto;
  min-width: 65%;
}

@media screen and (max-width: 800px) {
  #panelProjectCreate .page-user__box-project-create {
    margin-top: 2rem;
  }
}
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box {
  padding: 2rem;
  border: 2px solid #709ae0;
  border-radius: 5px;
  margin-top: 1rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video {
  min-width: 100%;
}

@media screen and (min-width: 1799px) {
  #panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image,
  #panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video {
    min-width: calc(50% - 1rem);
  }
}
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: absolute;
  bottom: -2px;
  left: 0;
  padding: 0.3rem;
  border-radius: 0px 5px 0px 0px;
  z-index: 2;
  cursor: pointer;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar.terrible,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality.terrible,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess.terrible {
  background-color: #FF3A00;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar.bad,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality.bad,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess.bad {
  background-color: #E94D20;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar.good,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality.good,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess.good {
  background-color: #01B413;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar.great,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality.great,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess.great {
  background-color: #008F0E;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .quality-of-ar p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess p {
  color: #fff;
  font-weight: 400;
  font-size: 0.75rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .invalid-image {
  position: absolute;
  top: 5rem;
  left: 0;
  background: #E94D20;
  color: #fff;
  padding: 0.5rem 0;
  width: 100%;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality {
  background-color: #709ae0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality .loader:before, #panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-ar-quality .loader:after {
  border: 2px solid #fff;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .loading-reprocess {
  background-color: #709ae0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file {
  border: 1px dashed #709ae0;
  border-radius: 5px;
  margin-top: 1rem;
  position: relative;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info {
  position: absolute;
  top: 0;
  right: 0rem;
  width: 100%;
  height: 12.5rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info p {
  font-weight: 400;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video {
  height: 12.5rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-image video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .box-video video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-image video,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video img,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .box-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .encode-bar,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .encode-bar,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .encode-bar,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .encode-bar {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  bottom: 0;
  left: 0;
  padding: 0.3rem;
  background: #F5F9FF;
  border-radius: 0 5px 0 0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .encode-bar p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .encode-bar p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .encode-bar p,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .encode-bar p {
  color: #365ab0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .message-upload-files,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .message-upload-files,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .message-upload-files,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .message-upload-files {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-image__input-file__info .generating-preview,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .page-user__box-project-create__target__box-video__input-file__info .generating-preview,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-image__input-file__info .generating-preview,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .page-user__box-project-create__target__box-video__input-file__info .generating-preview {
  height: 12.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .input-file,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .input-file {
  opacity: 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
  width: 100%;
  height: 12.5rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping {
  position: absolute;
  display: flex;
  gap: 0.5rem;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 3;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transparent,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .clipping,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transform,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transparent,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .clipping,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transform {
  position: relative;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transparent button,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .clipping button,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transform button,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transparent button,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .clipping button,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transform button {
  background: #709ae0;
  border: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transparent:hover .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .clipping:hover .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transform:hover .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transparent:hover .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .clipping:hover .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transform:hover .tooltips {
  visibility: visible;
  opacity: 1;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transparent .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transparent .tooltips {
  width: 130px;
  left: -4rem;
  top: -2.3rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .clipping .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .clipping .tooltips {
  top: -2.3rem;
  left: -2rem;
  width: 8rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .clipping .tooltips:after,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .clipping .tooltips:after {
  left: 32%;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transform .tooltips,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transform .tooltips {
  top: -2.3rem;
  left: 0rem;
  width: 9rem;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .transparent-and-clipping .transform .tooltips:after,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .transparent-and-clipping .transform .tooltips:after {
  left: 19%;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .image-upload-progress,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-image__input-file .video-upload-progress,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .image-upload-progress,
#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__content .page-user__box-project-create__target__box-video__input-file .video-upload-progress {
  height: 12.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  gap: 0.5rem;
  border: 1px solid #365ab0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div span {
  color: #365ab0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div:hover {
  background-color: #365ab0;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div:hover span {
  color: #F8FAFF;
}

#panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div:hover svg path {
  stroke: #F8FAFF;
}

#panelProjectCreate .page-user__box-project-create__name-project {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media screen and (max-width: 640px) {
  #panelProjectCreate .page-user__box-project-create__name-project {
    gap: 1rem;
  }
}
#panelProjectCreate .page-user__box-project-create__name-project .input-default {
  width: 85%;
  flex-basis: 300px;
  flex-grow: 9999;
}

@media screen and (max-width: 640px) {
  #panelProjectCreate .page-user__box-project-create__name-project .input-default {
    width: 100%;
  }
}
#panelProjectCreate .page-user__box-project-create__name-project .button-default {
  flex-grow: 1;
  flex-basis: 150px;
}

#panelProjectCreate .page-user__box-project-create__name-project .button-default button {
  width: 100%;
}

#panelProjectCreate .add-target {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 1rem;
  font-weight: 400;
  color: #365ab0;
  cursor: pointer;
}

@media print {
  .navbar-user,
  .box-title,
  .page-user__box-user-order__section-four,
  .buy-again {
    visibility: hidden;
  }
  .buy-again {
    display: none;
  }
  .page-user__box-user-order {
    position: fixed;
    left: 0;
    top: 0;
  }
  .box-info-magipix {
    display: block !important;
  }
}
.message-processing-payment {
  text-align: center;
  font-weight: 400;
  padding: 1rem;
  border-radius: 5px;
}

.modal.my-data form .button-magipix {
  margin-top: 0.5rem;
}

.modal.my-data form .button-magipix button {
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
}

#backofficeHome {
  background-color: #F5F9FF;
}

.backoffice-pagination {
  margin: 1rem 0;
}

.backoffice-pagination .user-pagination-count {
  justify-content: flex-end;
}

@media screen and (max-width: 640px) {
  .backoffice-pagination .user-pagination-count {
    justify-content: center;
  }
}
.backoffice-title {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, rgb(112, 154, 224) 0%, rgb(55, 91, 177) 100%);
}

.backoffice-title p {
  font-size: 1.562rem;
  color: #fff;
}

.box-search,
.box-searchs {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 79.567rem;
  margin: 0 auto 2rem;
}

.box-search .search-users,
.box-searchs .search-users {
  border: 1px solid var(--color-neutral-900, #252526);
  color: var(--color-neutral-900, #252526);
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  width: 100%;
}

.box-search .search-users img,
.box-searchs .search-users img {
  margin: 0;
}

.box-search .search-users input,
.box-searchs .search-users input {
  border: 0;
  background: transparent;
  height: 100%;
  width: 85%;
  font-weight: 400;
  color: var(--color-neutral-900, #252526);
}

.box-search .search-users input::placeholder, .box-search .search-users input::-moz-placeholder, .box-search .search-users input::-webkit-input-placeholder,
.box-searchs .search-users input::placeholder,
.box-searchs .search-users input::-moz-placeholder,
.box-searchs .search-users input::-webkit-input-placeholder {
  font-size: 0.875rem;
  color: var(--color-neutral-900, #252526);
}

.box-search .search-users input:focus, .box-search .search-users input:focus-visible,
.box-searchs .search-users input:focus,
.box-searchs .search-users input:focus-visible {
  outline: none;
}

.box-search form,
.box-searchs form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media screen and (max-width: 916px) {
  .box-search,
  .box-searchs {
    justify-content: center !important;
  }
}
#backofficeUsers.page,
#backofficeUser.page,
#backofficeOrders.page,
#backofficeProducts.page,
#backofficeCupons.page,
#backofficeAppErrors.page,
#backofficeProjects.page {
  padding-top: 0;
}

#backofficeUsers table thead tr th,
#backofficeUser table thead tr th,
#backofficeOrders table thead tr th,
#backofficeProducts table thead tr th,
#backofficeCupons table thead tr th,
#backofficeAppErrors table thead tr th,
#backofficeProjects table thead tr th {
  font-weight: 400;
}

#backofficeUsers table tbody tr td button,
#backofficeUser table tbody tr td button,
#backofficeOrders table tbody tr td button,
#backofficeProducts table tbody tr td button,
#backofficeCupons table tbody tr td button,
#backofficeAppErrors table tbody tr td button,
#backofficeProjects table tbody tr td button {
  background: transparent;
  border: 1px solid #709ae0;
  border-radius: 3px;
  color: #709ae0;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.875rem;
}

#backofficeUsers table tbody tr td a.backoffice-products-edit, #backofficeUsers table tbody tr td a.backoffice-cupom-edit, #backofficeUsers table tbody tr td a.backoffice-project-edit,
#backofficeUser table tbody tr td a.backoffice-products-edit,
#backofficeUser table tbody tr td a.backoffice-cupom-edit,
#backofficeUser table tbody tr td a.backoffice-project-edit,
#backofficeOrders table tbody tr td a.backoffice-products-edit,
#backofficeOrders table tbody tr td a.backoffice-cupom-edit,
#backofficeOrders table tbody tr td a.backoffice-project-edit,
#backofficeProducts table tbody tr td a.backoffice-products-edit,
#backofficeProducts table tbody tr td a.backoffice-cupom-edit,
#backofficeProducts table tbody tr td a.backoffice-project-edit,
#backofficeCupons table tbody tr td a.backoffice-products-edit,
#backofficeCupons table tbody tr td a.backoffice-cupom-edit,
#backofficeCupons table tbody tr td a.backoffice-project-edit,
#backofficeAppErrors table tbody tr td a.backoffice-products-edit,
#backofficeAppErrors table tbody tr td a.backoffice-cupom-edit,
#backofficeAppErrors table tbody tr td a.backoffice-project-edit,
#backofficeProjects table tbody tr td a.backoffice-products-edit,
#backofficeProjects table tbody tr td a.backoffice-cupom-edit,
#backofficeProjects table tbody tr td a.backoffice-project-edit {
  background: transparent;
  border: 1px solid #709ae0;
  border-radius: 3px;
  color: #709ae0;
  font-weight: bold;
  padding: 0.1rem 0.3rem;
  font-size: 0.875rem;
}

#backofficeUsers table tbody tr td a.backoffice-user-email,
#backofficeUser table tbody tr td a.backoffice-user-email,
#backofficeOrders table tbody tr td a.backoffice-user-email,
#backofficeProducts table tbody tr td a.backoffice-user-email,
#backofficeCupons table tbody tr td a.backoffice-user-email,
#backofficeAppErrors table tbody tr td a.backoffice-user-email,
#backofficeProjects table tbody tr td a.backoffice-user-email {
  color: #365ab0;
  cursor: pointer;
}

#backofficeUsers table tbody tr td.percentage-image, #backofficeUsers table tbody tr td.percentage-video,
#backofficeUser table tbody tr td.percentage-image,
#backofficeUser table tbody tr td.percentage-video,
#backofficeOrders table tbody tr td.percentage-image,
#backofficeOrders table tbody tr td.percentage-video,
#backofficeProducts table tbody tr td.percentage-image,
#backofficeProducts table tbody tr td.percentage-video,
#backofficeCupons table tbody tr td.percentage-image,
#backofficeCupons table tbody tr td.percentage-video,
#backofficeAppErrors table tbody tr td.percentage-image,
#backofficeAppErrors table tbody tr td.percentage-video,
#backofficeProjects table tbody tr td.percentage-image,
#backofficeProjects table tbody tr td.percentage-video {
  color: #365ab0;
  cursor: pointer;
  font-weight: 400;
}

#backofficeOrders .box-search {
  max-width: 97.567rem;
  margin-top: 1.5rem;
}

#backofficeProducts table thead tr th {
  padding: 0.5rem 1rem 0.5rem 0rem;
}

#backofficeProducts .create-product {
  display: flex;
  justify-content: flex-end;
  margin: 2rem 0;
}

.box-create-cupom-and-search {
  max-width: 68.3rem;
}

.box-searchs {
  max-width: 99.3rem;
  width: 100%;
}

.box-search-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.box-create-cupom-and-search,
.box-searchs {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 2rem auto;
  gap: 2rem;
  position: relative;
}

.box-create-cupom-and-search .box-search,
.box-searchs .box-search {
  display: block;
  max-width: none;
  margin: 0;
}

.box-create-cupom-and-search .box-search .search,
.box-searchs .box-search .search {
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
  cursor: text;
}

.box-create-cupom-and-search .box-search .search input,
.box-searchs .box-search .search input {
  border: 0;
  background: transparent;
  height: 100%;
  width: 85%;
}

.box-create-cupom-and-search .box-search .search input::placeholder,
.box-searchs .box-search .search input::placeholder {
  font-size: 0.875rem;
}

.box-create-cupom-and-search .box-search .search input:focus, .box-create-cupom-and-search .box-search .search input:focus-visible,
.box-searchs .box-search .search input:focus,
.box-searchs .box-search .search input:focus-visible {
  outline: none;
}

.box-create-cupom-and-search .box-search .search img,
.box-searchs .box-search .search img {
  margin: 0 0.3rem;
}

@media screen and (max-width: 482px) {
  .box-create-cupom-and-search,
  .box-searchs {
    justify-content: center;
    gap: 0.5rem;
  }
}
#backofficeCuponsCreate .box-checkbox,
#backofficeCuponsEdit .box-checkbox {
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}

#backofficeCuponsCreate .box-inputs p,
#backofficeCuponsEdit .box-inputs p {
  font-size: 0.75rem;
  text-align: start;
  margin-bottom: 0.5rem;
}

#backofficeCuponsCreate #input_cupom_expiration,
#backofficeCuponsEdit #input_cupom_expiration {
  margin-top: 0.5rem;
}

#backofficeCuponsCreate .checks-free-products,
#backofficeCuponsEdit .checks-free-products {
  margin-bottom: 1rem;
}

#backofficeProductsCreate.page,
#backofficeProductsEdit.page,
#backofficeCuponsCreate.page,
#backofficeCuponsEdit.page {
  padding-top: 0;
}

#backofficeProductsCreate .backoffice-title,
#backofficeProductsEdit .backoffice-title,
#backofficeCuponsCreate .backoffice-title,
#backofficeCuponsEdit .backoffice-title {
  margin-bottom: 2rem;
}

#backofficeProductsCreate .box-expiration-date,
#backofficeProductsEdit .box-expiration-date,
#backofficeCuponsCreate .box-expiration-date,
#backofficeCuponsEdit .box-expiration-date {
  margin: 1rem 0;
}

#backofficeProductsCreate .box-expiration-date p,
#backofficeProductsEdit .box-expiration-date p,
#backofficeCuponsCreate .box-expiration-date p,
#backofficeCuponsEdit .box-expiration-date p {
  font-weight: 400;
  margin-bottom: 0.5rem;
}

#backofficeProductsCreate .box-checkbox,
#backofficeProductsEdit .box-checkbox,
#backofficeCuponsCreate .box-checkbox,
#backofficeCuponsEdit .box-checkbox {
  margin-top: 1rem;
}

#backofficeProductsCreate .delete-product,
#backofficeProductsCreate .delete-cupom,
#backofficeProductsEdit .delete-product,
#backofficeProductsEdit .delete-cupom,
#backofficeCuponsCreate .delete-product,
#backofficeCuponsCreate .delete-cupom,
#backofficeCuponsEdit .delete-product,
#backofficeCuponsEdit .delete-cupom {
  border: 1px solid #F24E1E;
  outline: none;
  border-radius: 5px;
  background: transparent;
  margin-top: 1rem;
  color: #F24E1E;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem;
}

#backofficeUser .container {
  margin-top: 2rem;
}

#backofficeUser p {
  font-weight: 400 span;
  font-weight-font-weight: 400;
}

#panelProjects h1 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
}

#panelProjects .box-searchs .box-search-container {
  justify-content: center;
}

@media screen and (max-width: 640px) {
  #panelProjects .box-searchs .box-search-container .box-search {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #panelProjects .box-searchs .box-search-container .box-search .search {
    width: 100%;
  }
}
@media screen and (max-width: 931px) {
  #panelProjects .box-searchs {
    justify-content: center;
    gap: 0.5rem;
  }
}
#panelProjects .items-panel-projects {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.185rem;
  justify-content: flex-start;
}

@media only screen and (max-width: 640px) {
  #panelProjects .items-panel-projects {
    justify-content: center;
  }
}
#panelProjects .items-panel-projects .box-panel-projects {
  border-radius: 5px;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  background: #F8FAFF;
  max-width: 19.375rem;
  width: 100%;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects h1 {
  margin: 0.5rem 0;
  text-align: start;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects h1 a {
  font-size: 1.25rem;
  font-weight: bold;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation {
  align-items: initial;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .info-credits {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.8rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__title-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits-installation__title-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__title-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits-installation__title-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__title-credits,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits-installation__title-credits {
  font-weight: 400;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__title-credits span,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits-installation__title-credits span,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__title-credits span,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits-installation__title-credits span,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__title-credits span,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits-installation__title-credits span {
  font-weight: 400;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-add-credtis,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-remove-credtis,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-add-credtis,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-remove-credtis,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-add-credtis,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-remove-credtis {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.3rem;
  position: relative;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-add-credtis:hover .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-remove-credtis:hover .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-add-credtis:hover .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-remove-credtis:hover .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-add-credtis:hover .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-remove-credtis:hover .tooltips {
  visibility: visible;
  opacity: 1;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-add-credtis img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-remove-credtis img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-add-credtis img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-remove-credtis img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-add-credtis img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-remove-credtis img {
  width: 24px;
  height: 24px;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-add-credtis .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-add-credtis .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-add-credtis .tooltips {
  width: 105px;
  left: -3rem;
  top: -2rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits .content-items-panel-projects__box-credits__content-remove-credtis .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits-installation .content-items-panel-projects__box-credits__content-remove-credtis .tooltips,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption .content-items-panel-projects__box-credits__content-remove-credtis .tooltips {
  width: 100px;
  top: -2rem;
  left: -2rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption {
  flex-wrap: wrap;
  gap: 0.5rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption div {
  display: flex;
  gap: 0.2rem;
  align-items: center;
  flex-wrap: wrap;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption div .limited-credit-consumption,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption div .automatic-credit-consumption {
  font-size: 0.75rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .content-items-panel-projects__content-credits .content-items-panel-projects__box-credits__consumption div .project-auto-consume-credits-translated {
  width: 5.5rem;
  text-align: start;
  font-size: 0.85rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-pending,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-pending,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-pending,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-pending {
  border: 1px solid #0FA958;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  font-size: 0.875rem;
  color: #0FA958;
  padding: 0.3rem 0.8rem;
  transition: 0.5s;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-published:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-pending:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-pending:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-published:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-pending:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-pending:hover {
  background-color: #0FA958;
  color: #fff;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-published:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-pending:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-pending:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-published:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-pending:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-pending:hover svg path {
  stroke: #fff;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project {
  border: 1px solid;
  border-radius: 5px;
  background: transparent;
  display: flex;
  padding: 0.3rem 0.5rem;
  transition: background-color 0.5s ease, color 0.5s ease;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project img {
  width: 20px;
  height: 20px;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published svg,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project svg,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project svg,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published svg,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project svg,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project svg {
  transition: stroke 0.5s ease, fill 0.5s ease;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-share-project-published img,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-published img {
  width: 20px;
  height: 20px;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published a,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project a,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published a,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project a {
  height: 20px;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project {
  border-color: #F24E1E;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project:hover {
  background-color: #F24E1E;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .delete-project:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .delete-project:hover svg path {
  stroke: #fff;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project {
  border-color: #709ae0;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project:hover {
  background-color: #709ae0;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .to-view-project-published:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects .buttons-project .edit-project:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-view-project-published:hover svg path,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .edit-project:hover svg path {
  stroke: #fff;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form {
  margin-top: 0;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects img {
  width: 100%;
  height: 16.375rem;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .box-title-project-remaing {
  font-size: 0.75rem;
  text-align: center;
  width: 100%;
  padding: 0.3rem 0;
  background-color: #F5F9FF;
  border-radius: 5px 5px 0 0;
  font-weight: 400;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .box-title-project-remaing p {
  color: #365ab0;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project {
  width: 100%;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project.no-projects-in-display {
  height: 400px;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published img {
  border-radius: 0;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published img.image-pending {
  filter: brightness(55%);
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project .to-view-project-pending {
  color: #709ae0 !important;
  border-color: #709ae0 !important;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project .to-view-project-pending:hover {
  background-color: #709ae0 !important;
  color: #fff !important;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project .to-view-project-pending:hover svg path {
  stroke: #fff;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project .to-view-project-pending img {
  width: 20px;
  height: 20px;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project .to-share-project-pending {
  color: #0FA958 !important;
  border-color: #0FA958 !important;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .buttons-project button {
  cursor: pointer;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .content-items-panel-projects {
  padding-bottom: 1rem;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .button-project button {
  width: 100%;
  background-color: #444444;
  transition: background-color 0.3s ease;
  color: #fff;
  border: 0;
  border-radius: 0 0 5px 5px;
  font-size: 1rem;
  padding: 0.8rem 0;
  font-weight: bold;
  cursor: pointer;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .button-project button:hover {
  background-color: #365ab0;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .box-title-project-remaing.trial-period-ended {
  background-color: #BD0000;
}

#panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .box-title-project-remaing.trial-period-ended p {
  color: #fff;
}

.modal-add-credits-to-project #add_credits_to_project h1,
.modal-add-credits-to-project #remove_credits_from_project h1,
.modal-remove-credits-from-project #add_credits_to_project h1,
.modal-remove-credits-from-project #remove_credits_from_project h1 {
  margin-bottom: 1rem;
}

.modal-add-credits-to-project #add_credits_to_project h2,
.modal-add-credits-to-project #remove_credits_from_project h2,
.modal-remove-credits-from-project #add_credits_to_project h2,
.modal-remove-credits-from-project #remove_credits_from_project h2 {
  text-align: center;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal {
  margin: 0 auto;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal h2,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal h2,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal h2,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal p.min-amount-span,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal p.min-amount-span,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal p.min-amount-span,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal p.min-amount-span {
  color: #F24E1E;
  font-size: 0.75rem;
  text-align: center;
  margin: 1rem 0;
  font-weight: 400;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal .available-credits,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal .available-credits,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal .available-credits,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal .available-credits {
  color: #709ae0;
  font-weight: bold;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal .button-default,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal .button-default,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal .button-default,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal .button-default {
  justify-content: center;
  margin-top: 1.5rem;
}

.modal-add-credits-to-project #add_credits_to_project .content-add-credits-modal .button-default button,
.modal-add-credits-to-project #remove_credits_from_project .content-add-credits-modal .button-default button,
.modal-remove-credits-from-project #add_credits_to_project .content-add-credits-modal .button-default button,
.modal-remove-credits-from-project #remove_credits_from_project .content-add-credits-modal .button-default button {
  display: inline-block;
  flex-grow: 1;
  width: 100%;
  max-width: 14rem;
}

.modal-view-share-project .content-view-project {
  text-align: center;
}

.modal-view-share-project .content-view-project form h2 {
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}

.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode .download-qrcode {
  border: 1px solid #709ae0;
  border-radius: 5px;
  background: transparent;
  display: flex;
  gap: 0.5rem;
  color: #709AE0;
  font-weight: 400;
  padding: 0.3rem 0.5rem;
  transition: 0.5s;
}

.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode .download-qrcode:hover {
  background-color: #709ae0;
  color: #fff;
}

.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode .download-qrcode:hover svg path {
  stroke: #fff;
}

.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode #project_qrcode_url_img {
  width: 250px;
  height: 250px;
}

.modal-view-share-project .content-view-project .box-deeplink-project-view {
  margin-top: 1.5rem;
}

.modal-view-share-project .content-view-project .box-deeplink-project-view .copy-deeplink {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.modal-view-share-project .content-view-project .box-deeplink-project-view .copy-deeplink p {
  border: 1px solid #709ae0;
  padding: 0.35rem 1rem;
  border-radius: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.modal-view-share-project .content-view-project .box-code-project-view {
  margin-top: 1.5rem;
}

.modal-view-share-project .content-view-project .box-code-project-view .copy-and-edit-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.modal-view-share-project .content-view-project .box-code-project-view .copy-and-edit-code .input-dafault {
  width: 50%;
}

.modal-view-share-project .content-view-project .box-project-edit-code {
  margin-top: 1rem;
}

.modal-view-share-project .content-view-project .box-project-edit-code #project_edit_code_error_msg_span {
  font-weight: 400;
  text-align: center;
  font-size: 0.75rem;
}

.modal-view-share-project .content-view-project .button-default button {
  width: 50%;
}

.modal-view-share-project .content-view-project .button-default.save {
  justify-content: center;
  margin-top: 1rem;
}

.modal-consumption-of-project-credits p {
  text-align: center;
}

.modal-consumption-of-project-credits .modal-content {
  margin: 0 auto;
}

.modal.add-credits .content-modal.max-width {
  max-width: 700px;
}

.box-stripe-total .stripe-total-credit {
  text-align: center;
  font-weight: 400;
  font-size: 1.3rem;
  color: #0FA958;
}

.box-stripe-total .message-form-of-payment {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 1.5rem;
}

.box-stripe-total #box_payment_loader {
  text-align: center;
}

.box-stripe-total .message-subscription {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.2rem;
}

.box-stripe-total .box-pix-and-card {
  display: flex;
  flex-direction: row;
  margin: 1rem auto 0 auto;
}

.box-stripe-total .box-pix-and-card button {
  background: #fff;
  color: #444;
  font-weight: 400;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  border: 1px solid #DDDFE5;
}

.box-stripe-total .box-pix-and-card button:hover {
  border-color: #709ae0;
}

.box-stripe-total .box-pix-and-card .button-pix {
  border-radius: 5px 0 0 5px;
}

.box-stripe-total .box-pix-and-card .button-pix.active {
  border-color: #709ae0;
}

.box-stripe-total .box-pix-and-card .button-card {
  border-radius: 0 5px 5px 0;
}

.box-stripe-total .box-pix-and-card .button-card.active {
  border-color: #709ae0;
}

.box-stripe-total .form-payment-pix {
  margin: 0 auto;
  display: none;
}

.box-stripe-total .form-payment-pix .page__box-checkout-credit__box-payment-pix {
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  padding: 1.3125rem 3rem;
  width: 100%;
  margin: 2rem 0;
}

.box-stripe-total .form-payment-pix .page__box-checkout-credit__box-payment-pix h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.box-stripe-total .form-payment-pix .page__box-checkout-credit__box-payment-pix .page__box-checkout-credit__box-payment-pix__box-info {
  margin-top: 1rem;
  border: 1px dashed #365ab0;
  border-radius: 5px;
  padding: 0.8rem;
}

.box-stripe-total .form-payment-pix .page__box-checkout-credit__box-payment-pix .page__box-checkout-credit__box-payment-pix__box-info > div {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.75rem;
}

.box-stripe-total .form-payment-pix .page__box-checkout-credit__box-payment-pix .page__box-checkout-credit__box-payment-pix__box-info > div:first-child {
  margin-bottom: 1rem;
}

.modal-delete-project .modal-content p {
  text-align: center;
}

.modal-delete-project .modal-content .confirm-deletion {
  margin: 1rem 0 0.5rem;
  font-weight: 400;
}

.modal-delete-project .modal-content .buttons {
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.modal-delete-project .modal-content .buttons button {
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-delete-project .modal-content .buttons .button-confirm {
  border: 1px solid #0FA958;
  color: #0FA958;
}

.modal-delete-project .modal-content .buttons .button-confirm:hover {
  background-color: #0FA958;
  color: #fff;
}

.modal-delete-project .modal-content .buttons .button-close {
  border: 1px solid #F24E1E;
  color: #F24E1E;
}

.modal-delete-project .modal-content .buttons .button-close:hover {
  background-color: #F24E1E;
  color: #fff;
}

.modal-delete-project .modal-content .buttons form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.modal-delete-project .modal-content .buttons form .button-default {
  margin-top: 0;
}

.modal-delete-project .modal-content .buttons form .button-default button {
  width: 9.375rem;
}

#backofficeUserAddCredits .button-default {
  justify-content: center;
  margin-top: 2rem;
}

#backofficeUserAddCredits .backoffice-title {
  margin-bottom: 2rem;
}

#backofficeUserAddCredits.page {
  padding-top: 0;
}

.button-magipix.active button {
  background-color: #709ae0;
  color: #F8FAFF;
}

.modal.video-mask #video_mask_div .box-buttons,
.modal.video-mask #video_ajust_div .box-buttons,
.modal.video-adjust #video_mask_div .box-buttons,
.modal.video-adjust #video_ajust_div .box-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal.video-mask #video_mask_div .box-buttons .button-magipix.active,
.modal.video-mask #video_ajust_div .box-buttons .button-magipix.active,
.modal.video-adjust #video_mask_div .box-buttons .button-magipix.active,
.modal.video-adjust #video_ajust_div .box-buttons .button-magipix.active {
  background-color: #709ae0;
}

.modal.video-mask #video_mask_div .box-buttons .button-magipix.active button,
.modal.video-mask #video_ajust_div .box-buttons .button-magipix.active button,
.modal.video-adjust #video_mask_div .box-buttons .button-magipix.active button,
.modal.video-adjust #video_ajust_div .box-buttons .button-magipix.active button {
  color: #F8FAFF;
}

.modal.video-mask #video_mask_div .video-mask-transparent,
.modal.video-mask #video_mask_div .image-and-video-clipping,
.modal.video-mask #video_ajust_div .video-mask-transparent,
.modal.video-mask #video_ajust_div .image-and-video-clipping,
.modal.video-adjust #video_mask_div .video-mask-transparent,
.modal.video-adjust #video_mask_div .image-and-video-clipping,
.modal.video-adjust #video_ajust_div .video-mask-transparent,
.modal.video-adjust #video_ajust_div .image-and-video-clipping {
  text-align: center;
}

.modal.video-mask #video_mask_div .video-mask-transparent,
.modal.video-mask #video_ajust_div .video-mask-transparent,
.modal.video-adjust #video_mask_div .video-mask-transparent,
.modal.video-adjust #video_ajust_div .video-mask-transparent {
  position: relative;
  margin: 35px 0;
}

.modal.video-mask #video_mask_div .video-mask-transparent .video-transparent,
.modal.video-mask #video_ajust_div .video-mask-transparent .video-transparent,
.modal.video-adjust #video_mask_div .video-mask-transparent .video-transparent,
.modal.video-adjust #video_ajust_div .video-mask-transparent .video-transparent {
  margin: 0 auto;
  height: 100%;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping #adjust_preview_canvas,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping #adjust_preview_canvas,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping #adjust_preview_canvas,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping #adjust_preview_canvas {
  display: none;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-width .image-preview-ajust,
.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-width .video-preview-ajust,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-width .image-preview-ajust,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-width .video-preview-ajust,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-width .image-preview-ajust,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-width .video-preview-ajust,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-width .image-preview-ajust,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-width .video-preview-ajust {
  width: 100%;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-height .image-preview-ajust,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-height .image-preview-ajust,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-height .image-preview-ajust,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-height .image-preview-ajust {
  width: 100%;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-height .video-preview-ajust,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-height .video-preview-ajust,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-height .video-preview-ajust,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-height .video-preview-ajust {
  height: 100%;
}

.modal.video-mask #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-crop #adjust_preview_canvas,
.modal.video-mask #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-crop #adjust_preview_canvas,
.modal.video-adjust #video_mask_div .box-image-and-video-clipping .image-and-video-clipping.box-crop #adjust_preview_canvas,
.modal.video-adjust #video_ajust_div .box-image-and-video-clipping .image-and-video-clipping.box-crop #adjust_preview_canvas {
  display: block;
  position: absolute;
}

.modal.video-mask #video_mask_div .save-green,
.modal.video-mask #video_mask_div .save-normal,
.modal.video-adjust #video_mask_div .save-green,
.modal.video-adjust #video_mask_div .save-normal {
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.video-mask #video_mask_div .save-green button,
.modal.video-mask #video_mask_div .save-normal button,
.modal.video-adjust #video_mask_div .save-green button,
.modal.video-adjust #video_mask_div .save-normal button {
  width: 50%;
}

@media screen and (min-width: 320px) {
  .modal.video-mask #video_mask_div .save-green button,
  .modal.video-mask #video_mask_div .save-normal button,
  .modal.video-adjust #video_mask_div .save-green button,
  .modal.video-adjust #video_mask_div .save-normal button {
    width: 100%;
  }
}
@media screen and (min-width: 440px) {
  .modal.video-mask #video_mask_div .save-green button,
  .modal.video-mask #video_mask_div .save-normal button,
  .modal.video-adjust #video_mask_div .save-green button,
  .modal.video-adjust #video_mask_div .save-normal button {
    width: 50%;
  }
}
.modal.video-mask .box-mask-preview-canvas {
  display: none;
}

.modal.video-mask .box-mask-preview-canvas.green-active {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  margin: 0 auto;
}

.modal.video-mask .box-mask-preview-canvas.green-active #mask_preview_canvas {
  margin: 0 auto;
  height: 100%;
}

.modal.video-adjust #video_ajust_div .image-and-video-clipping {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.video-adjust #video_ajust_div .image-and-video-clipping:before {
  content: "";
  position: absolute;
  z-index: 99;
  left: 0px;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: solid 2px #365ab0;
}

.modal.video-adjust #video_ajust_div .image-and-video-clipping video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal.video-adjust #video_ajust_div .image-and-video-clipping img {
  max-width: 500px;
  max-height: 400px;
}

.modal.video-adjust #video_ajust_div .save-width,
.modal.video-adjust #video_ajust_div .save-height,
.modal.video-adjust #video_ajust_div .save-crop {
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.video-adjust #video_ajust_div .save-width button,
.modal.video-adjust #video_ajust_div .save-height button,
.modal.video-adjust #video_ajust_div .save-crop button {
  width: 50%;
}

@media screen and (min-width: 320px) {
  .modal.video-adjust #video_ajust_div .save-width button,
  .modal.video-adjust #video_ajust_div .save-height button,
  .modal.video-adjust #video_ajust_div .save-crop button {
    width: 100%;
  }
}
@media screen and (min-width: 440px) {
  .modal.video-adjust #video_ajust_div .save-width button,
  .modal.video-adjust #video_ajust_div .save-height button,
  .modal.video-adjust #video_ajust_div .save-crop button {
    width: 50%;
  }
}
.modal.target-quality p {
  text-align: center;
}

.modal.modal-loader-spinner {
  text-align: center;
}

.modal.modal-loader-spinner .content-modal .modal-content {
  align-items: center;
}

.page-user-device__box-devices .box-device-active {
  background-color: #F5F9FF;
  border-radius: 10px;
  box-shadow: 0px 2px 10px #DDDFE5;
  margin-top: 2rem;
  padding: 1rem;
}

.page-user-device__box-devices .box-device-active h2 {
  font-size: 1rem;
  font-weight: 400;
}

.page-user-device__box-devices .box-device-active .box-registered-device {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-user-device__box-devices .box-device-active .box-not-device {
  margin-top: 1rem;
}

.page-user-device__box-devices .box-device-active .button-default {
  margin-top: 2rem;
  justify-content: center;
}

.modal.modal-new-device .content-modal .modal-content h1,
.modal-add-device .content-modal .modal-content h1 {
  margin-bottom: 0.5rem;
}

.modal.modal-new-device .content-modal .modal-content .box-buttons,
.modal-add-device .content-modal .modal-content .box-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.modal.modal-new-device .content-modal .modal-content p,
.modal-add-device .content-modal .modal-content p {
  text-align: center;
  margin-bottom: 1rem;
}

.modal-add-device .button-default {
  justify-content: center;
}

.modal-add-device img {
  margin: 0 auto;
}

.page-user-logo__box-logo .box-user-logo {
  background-color: #F5F9FF;
  border-radius: 10px;
  box-shadow: 0px 2px 10px #DDDFE5;
  margin-top: 2rem;
  padding: 1rem;
}

.page-user-logo__box-logo .box-user-logo h2 {
  font-size: 1.3rem;
  font-weight: 400;
}

.page-user-logo__box-logo .box-user-logo img {
  margin-top: 1rem;
  max-width: 200px;
  width: 100%;
}

.page-user-logo__box-logo .box-user-logo .box-button-logo .input-file {
  display: none;
}

.page-user-logo__box-logo .box-user-logo .box-button-logo label {
  padding: 0.7rem 0;
  color: #FCFCFC;
  display: block;
  background: #444444;
  border-radius: 5px;
  transition: background-color 1s;
  border: 0;
  width: 30%;
  cursor: pointer;
  margin: 1rem auto 0;
}

@media screen and (max-width: 560px) {
  .page-user-logo__box-logo .box-user-logo .box-button-logo label {
    width: 100%;
  }
}
.page-user-logo__box-logo #user_logo_upload_bar_div {
  margin: 1rem 0;
}

.page-user-logo__box-logo #user_logo_upload_bar_div #progress_upload_bar {
  margin: 0.5rem auto 0;
}

#panelUserSubscriptions {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media only screen and (max-width: 520px) {
  #panelUserSubscriptions {
    padding-left: 0;
    padding-right: 0;
  }
}
#panelUserSubscriptions h1 {
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1rem;
}

#panelUserSubscriptions .description-subscriptions {
  margin-bottom: 2rem;
}

#panelUserSubscriptions .box-subscription {
  justify-content: center;
  display: flex;
}

#panelUserSubscriptions .box-subscription .subscription {
  display: flex;
  max-width: 570px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  border-radius: 5px;
  box-shadow: 0px 2px 10px #DDDFE5;
  padding: 1rem 0.5rem;
  width: 100%;
}

@media only screen and (max-width: 520px) {
  #panelUserSubscriptions .box-subscription .subscription {
    padding: 1rem 0;
  }
}
#panelUserSubscriptions .box-subscription .subscription h1 {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

#panelUserSubscriptions .box-subscription .subscription p span {
  font-weight: 400;
}

#panelUserSubscriptions .box-subscription .subscription p span.canceled {
  color: #F24E1E;
}

#panelUserSubscriptions .box-subscription .subscription p span.active {
  color: #0FA958;
}

#panelUserSubscriptions .box-subscription .subscription a {
  color: #709AE0;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

#panelUserSubscriptions .box-subscription .subscription .form-buttons,
#panelUserSubscriptions .box-subscription .subscription .reactivate-subscription {
  margin-top: 1.5rem;
}

#panelUserSubscriptions .box-subscription .subscription .education-file {
  width: 15.863rem;
  height: 9rem;
}

#panelUserSubscriptions .box-subscription .subscription .education-file .message-file-upload {
  margin: 1rem 0.5rem 0;
  font-weight: 400;
  font-size: 1.2rem;
}

#panelUserSubscriptions .box-subscription .subscription .education-file #subscription_upload_completed_div {
  margin-top: 1rem;
}

#panelUserSubscriptions .box-subscription .subscription .education-file #subscription_upload_completed_div p {
  color: #05A461;
}

#panelUserSubscriptions .box-subscription .subscription #subscription_upload_bar_div {
  width: 15.863rem;
  display: flex;
  justify-content: center;
}

#panelUserSubscriptions .box-subscription .subscription .message-upload-files {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0.6rem;
  height: 59%;
}

#panelUserSubscriptions .box-subscription .subscription .message-upload-files .input-file {
  position: relative;
  z-index: 2;
  opacity: 0;
  height: 2.5rem;
  cursor: pointer;
  width: 15.863rem;
}

#panelUserSubscriptions .box-subscription .subscription .message-upload-files .name-button {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #709ae0;
  padding: 0.5rem;
  border-radius: 5px;
  width: 100%;
  transition: 0.5s;
}

#panelUserSubscriptions .box-subscription .subscription .message-upload-files .name-button p {
  height: 100%;
  color: #709ae0;
  font-weight: 400;
}

#backofficeUser .form-buttons,
#panelUserSubscriptions .form-buttons {
  margin-top: 1.5rem;
}

#backofficeUser .button-default,
#panelUserSubscriptions .button-default {
  justify-content: center;
}

#backofficeUser .page__box-user-backoffice,
#panelUserSubscriptions .page__box-user-backoffice {
  text-align: center;
}

#backofficeUser .page__box-user-backoffice p,
#panelUserSubscriptions .page__box-user-backoffice p {
  font-weight: 400;
}

#backofficeUser .page__box-user-backoffice p span,
#panelUserSubscriptions .page__box-user-backoffice p span {
  font-weight: 400;
}

.subscriptions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: stretch;
  justify-content: center;
}

.inputs-discount-total {
  flex-direction: column;
  gap: 0.5rem;
}

#panelProjectBalance {
  margin: 0 auto;
}

#panelProjectBalance h1 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
  text-align: center;
}

.modal-view-project-not-device .button-magipix,
.modal-view-project-not-device .button-default,
.modal-add-first-device .button-magipix,
.modal-add-first-device .button-default {
  justify-content: center;
  margin-top: 2rem;
}

.modal-view-project-not-device .content-view-project-modal-not-device,
.modal-add-first-device .content-view-project-modal-not-device {
  text-align: center;
}

.page-backoffice-order-nfse-pdf {
  border: 1px solid #afd1d8;
  margin: 0 auto;
  color: #2e6785;
  font-size: 0.875rem;
}

.page-backoffice-order-nfse-pdf.max-width {
  max-width: 800px;
}

.page-backoffice-order-nfse-pdf .title-nfse {
  background-color: #DDDFE5;
  padding: 0.2rem 0;
  text-align: center;
}

.page-backoffice-order-nfse-pdf .title-nfse p {
  font-size: 1rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue {
  width: 100%;
  border-bottom: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .number-nfse {
  color: #c32a17;
  font-size: 1.3rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .issue-date-nfse p:first-child {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .issue-date-nfse p span {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .skills-nfse p,
.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .verification-code p {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .issue-date-nfse,
.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .number-nfse,
.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .skills-nfse {
  border-right: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse {
  margin: 0.5rem 0;
  width: 100%;
  border-bottom: 1px solid #000;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .info-municipal-registration {
  width: 33.33%;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .infos-business {
  width: 46%;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .infos-business .name-business,
.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .infos-business .cpf-cnpj-business {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .infos-business p:not(.name-business, .cpf-cnpj-business) {
  font-size: 0.75rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .img-city-hall {
  text-align: center;
  width: 20%;
  vertical-align: middle;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-business-nfse .info-municipal-registration .code-municipal-registration {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service {
  padding: 1rem 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .title-taker-service {
  font-weight: 700;
  border-bottom: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration {
  width: 100%;
  border-bottom: 1px solid #afd1d8;
  margin-bottom: 1rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration .address-service .address-cpf,
.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration .address-service .address-street {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration .address-service p:not(.address-cpf, .address-street) {
  font-size: 0.75rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration .info-municipal-registration {
  vertical-align: middle;
}

.page-backoffice-order-nfse-pdf .header-infos-business .infos-service .box-address-registration .info-municipal-registration .code-municipal-registration {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-services-discrimination {
  padding: 0 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-services-discrimination .title-services-discrimination {
  font-weight: 700;
  border-bottom: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-services-discrimination .box-description {
  height: 300px;
  border-bottom: 1px solid #000;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-municipal-tax-code,
.page-backoffice-order-nfse-pdf .header-infos-business .box-subitem-list-of-services {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-municipal-tax-code .title-municipal-tax-code,
.page-backoffice-order-nfse-pdf .header-infos-business .box-municipal-tax-code .title-subitem-list-of-services,
.page-backoffice-order-nfse-pdf .header-infos-business .box-subitem-list-of-services .title-municipal-tax-code,
.page-backoffice-order-nfse-pdf .header-infos-business .box-subitem-list-of-services .title-subitem-list-of-services {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation {
  width: 100%;
  border-bottom: 1px solid #000;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation .box-municipality-code .title-municipality-code,
.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation .box-municipality-code .title-nature-of-operation,
.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation .box-nature-of-operation .title-municipality-code,
.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation .box-nature-of-operation .title-nature-of-operation {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-municipality-code-and-nature-of-operation .box-municipality-code {
  padding: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services {
  width: 100%;
  margin: 0.5rem 0;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service {
  width: 50%;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service table {
  width: 100%;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .title-value-service,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-calculation-basis {
  font-weight: 700;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .title-value-service,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-discounts,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-deductions,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-unconditioned-discount,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-federal-withholdings,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-ISS-withheld-at-source,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-calculation-basis,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-aliquot,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-empty {
  border-bottom: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .title-value-service td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-discounts td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-deductions td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-unconditioned-discount td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-federal-withholdings td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-ISS-withheld-at-source td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-calculation-basis td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-aliquot td,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-empty td {
  width: 70%;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .title-value-service td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-discounts td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-deductions td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-unconditioned-discount td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-federal-withholdings td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-ISS-withheld-at-source td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-calculation-basis td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-aliquot td:last-child,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-empty td:last-child {
  width: 25%;
  text-align: end;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service:first-child {
  padding-right: 1rem;
  padding-left: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service:last-child {
  padding-right: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-net-value,
.page-backoffice-order-nfse-pdf .header-infos-business .box-values-services .box-value-service .box-inss-value {
  font-weight: 700;
  color: #c32a19;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-city-hall-address {
  width: 100%;
  font-size: 0.75rem;
  margin: 0.5rem 0;
  border-top: 1px solid #afd1d8;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-city-hall-address a {
  color: #2e6785;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-city-hall-address td:first-child {
  width: 20%;
  vertical-align: middle;
  text-align: center;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-city-hall-address td {
  padding-top: 0.5rem;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-city-hall-address .city-hall-address .title {
  font-weight: 700;
}

.page-backoffice-order-nfse-international-pdf {
  margin: 2rem auto;
}

.page-backoffice-order-nfse-international-pdf.max-width {
  max-width: 800px;
}

.page-backoffice-order-nfse-international-pdf table {
  width: 100%;
}

.page-backoffice-order-nfse-international-pdf .address {
  border-bottom: 1px solid #365ab0;
}

.page-backoffice-order-nfse-international-pdf .address td:last-child {
  vertical-align: middle;
  text-align: end;
}

.page-backoffice-order-nfse-international-pdf .address td:first-child h1 {
  color: #365ab0;
  font-size: 1.5rem;
}

.page-backoffice-order-nfse-international-pdf .address td:first-child p {
  padding-bottom: 1rem;
}

.page-backoffice-order-nfse-international-pdf .head-date td,
.page-backoffice-order-nfse-international-pdf .head-instructions td {
  color: #365ab0;
  padding-top: 0.5rem;
}

.page-backoffice-order-nfse-international-pdf .instructions td {
  height: 100px;
}

.page-backoffice-order-nfse-international-pdf .date-items {
  border-bottom: 1px solid #365ab0;
}

.page-backoffice-order-nfse-international-pdf .date-items td:nth-child(2),
.page-backoffice-order-nfse-international-pdf .date-items td:nth-child(3) {
  padding-bottom: 0.5rem;
}

.page-backoffice-order-nfse-international-pdf .head-products {
  background: #365ab0;
  color: #fff;
  font-weight: bold;
  width: 100%;
  padding: 1rem;
}

.page-backoffice-order-nfse-international-pdf .items p {
  padding-left: 1rem;
  border-bottom: 1px solid #000;
}

.page-backoffice-order-nfse-international-pdf .thank-you {
  text-align: end;
  margin-top: 1rem;
  color: #365ab0;
  font-size: 1.3rem;
}

.page-backoffice-order-nfse-international-pdf .totals {
  text-align: end;
  margin-top: 2rem;
}

.page-backoffice-order-nfse-international-pdf .totals .total p {
  font-weight: bold;
}

.page-backoffice-order-nfse-international-pdf .totals span {
  font-weight: 400;
}

.modal.modal-info-signature,
.modal.modal-remove-credits-from-project,
.modal.modal-add-credits-to-project,
.modal.modal-view-project-not-device,
.modal.modal-add-first-device,
.modal.modal-view-share-project,
.modal.modal-consumption-of-project-credits,
.modal.modal-delete-project,
.modal.modal-rate-our-app {
  flex-direction: column;
  justify-content: center;
}

.modal.modal-info-signature .info,
.modal.modal-remove-credits-from-project .info,
.modal.modal-add-credits-to-project .info,
.modal.modal-view-project-not-device .info,
.modal.modal-add-first-device .info,
.modal.modal-view-share-project .info,
.modal.modal-consumption-of-project-credits .info,
.modal.modal-delete-project .info,
.modal.modal-rate-our-app .info {
  text-align: center;
}

.modal.modal-info-signature.active,
.modal.modal-remove-credits-from-project.active,
.modal.modal-add-credits-to-project.active,
.modal.modal-view-project-not-device.active,
.modal.modal-add-first-device.active,
.modal.modal-view-share-project.active,
.modal.modal-consumption-of-project-credits.active,
.modal.modal-delete-project.active,
.modal.modal-rate-our-app.active {
  display: flex;
}

@media screen and (max-width: 640px) {
  .modal.modal-info-signature.active,
  .modal.modal-remove-credits-from-project.active,
  .modal.modal-add-credits-to-project.active,
  .modal.modal-view-project-not-device.active,
  .modal.modal-add-first-device.active,
  .modal.modal-view-share-project.active,
  .modal.modal-consumption-of-project-credits.active,
  .modal.modal-delete-project.active,
  .modal.modal-rate-our-app.active {
    display: block;
  }
}
/* Signature - Start */
.signature-benefits-list {
  list-style: none;
  width: min(95%, 750px);
  margin: auto;
  margin-bottom: 1rem;
}

.signature-benefits-list li::before {
  content: "";
  background-image: url("https://dev-tqs-cdn.integratebim.com/assets/icons/icon-checkmark.svg");
  background-size: contain;
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  top: 0.1rem;
  margin-right: 0.2rem;
}

/* Signature - End */
/* Overwritting Classes - Start */
.none {
  display: none !important;
}

/* Overwritting Classes - End */
.modal-rate-our-app h1 {
  margin-bottom: 1rem;
}

.modal-rate-our-app p {
  text-align: center;
  margin-bottom: 1rem;
}

.modal-rate-our-app .box-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.modal-rate-our-app .button-close {
  border: none;
  background: none;
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  font-size: 0.9rem;
  color: #365ab0;
}

.modal-rate-our-app #button-suggestion a {
  font-size: 0.75rem;
}

#video_transform_div .box-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.box-image-and-video-transform {
  text-align: center;
  margin-bottom: 2rem;
}

.save-normal,
.save-inclined {
  justify-content: center;
}

#panelSupportEmail h1,
#panelSupportEmail p {
  margin-bottom: 1rem;
}

#panelSupportEmail .button-default {
  justify-content: center;
}

#panelSupportEmail .button-default button {
  width: 100%;
}

#panelSupportEmail .box-inputs {
  margin-top: 1.5rem;
}

#panelSupportEmail .box-inputs p {
  margin-bottom: 0;
  text-align: start;
}

#panelSupportEmail .box-email-upload-file #email_upload_completed_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#panelSupportEmail .box-email-upload-file #email_upload_completed_div p {
  color: #0FA958;
  font-weight: 400;
}

#panelSupportEmail .box-email-upload-file #email_upload_completed_div a {
  font-weight: 400;
  color: #709ae0;
}

#panelSupportEmail .box-email-upload-file #download-file {
  align-items: center;
}

#panelSupportEmail .box-email-upload-file #download-file .box-file {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0.6rem;
  height: 59%;
  width: 100%;
}

#panelSupportEmail .box-email-upload-file #download-file .box-file input.floating {
  position: relative;
  z-index: 2;
  opacity: 0;
  height: 2.5rem;
  cursor: pointer;
  width: 100%;
}

#panelSupportEmail .box-email-upload-file #download-file .box-file .name-button {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #709ae0;
  padding: 0.5rem;
  border-radius: 5px;
  width: 100%;
  transition: 0.5s;
}

#panelSupportEmail .box-email-upload-file #download-file .box-file .name-button p {
  height: 100%;
  color: #709ae0;
  font-weight: 400;
  text-align: center;
}

#panelSupportEmail .box-email-upload-file #email_upload_bar_div {
  justify-content: center;
}

#panelSupportEmail .error {
  margin-bottom: 1rem;
}

.image-preview-transform {
  width: 100%;
  height: auto;
}

#wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#wrapper .page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@media screen and (min-width: 768px) {
  #wrapper .page {
    padding-bottom: 9rem;
  }
}
#userTerms .terms-item,
#cookiesPolicy .terms-item,
#privacyPolicy .terms-item {
  font-weight: 400;
  display: inline;
}

#userTerms h2,
#cookiesPolicy h2,
#privacyPolicy h2 {
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.8rem;
}

#userTerms p,
#cookiesPolicy p,
#privacyPolicy p {
  margin-bottom: 1rem;
}

#userTerms .max-width,
#cookiesPolicy .max-width,
#privacyPolicy .max-width {
  max-width: 800px;
}

.user-pagination-count {
  display: flex;
  gap: 0.5rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
}

.user-pagination-count__label {
  min-height: 2.5rem;
  line-height: 2.5rem;
}

.user-pagination-count__select {
  border: 1px solid #DDDFE5;
  background-color: #F8FAFF;
  border-radius: 5px;
  height: 2.5rem;
  text-align: right;
}

.fade-in-element-animation {
  animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;
}

.margin-auto {
  margin: auto;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.error-message-container {
  text-align: center;
}

.error-message-container__title {
  color: #F24E1E;
}

.error-message-container__paragraph {
  color: #F8FAFF;
  width: calc(100% - 1rem);
  max-width: 500px;
  margin: auto;
}

.error-message-container__paragraph + .error-message-container__paragraph {
  margin-top: 1rem;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Search - Start */
.box-search {
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.box-search ul {
  display: none;
  position: absolute;
  padding: 0;
  border: 1px solid var(--color-neutral-900);
  margin: 0 1rem;
  top: 100%;
  border-top: none;
  background-color: var(--base);
  width: calc(100% - 2rem);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.box-search ul a {
  width: 100%;
  display: inline-block;
}

.box-search-result-item {
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  background-color: transparent;
  transition: background-color 0.3s ease;
  text-align: left;
}

.box-search-result-item:hover,
.box-search-result-item:focus {
  background-color: var(--color-primary-50, #4DB2FF);
}

.box-search ul {
  z-index: 1;
}

.box-search ul img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* Search - End */
.modal.new-credits-required p {
  margin-bottom: 2rem;
}

.icon-info-limited-credits {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.input-password__icon-show-password-off {
  cursor: pointer;
}

.creditis-modifications {
  padding: 1rem;
  text-align: start;
  box-shadow: 0 1px 12px rgba(204, 204, 204, 0.25);
  border-radius: 5px;
}

.creditis-modifications p .creditis-modifications__amount,
.creditis-modifications p .credits-modification__date {
  font-weight: bold;
  color: #709ae0;
}

.creditis-modifications p .credits-modification__to {
  font-weight: bold;
  color: #365ab0;
}

#panelProjectBalance .user-pagination-count {
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

#panel_user_data_form_div form {
  margin-top: 2rem !important;
}

.social-networks__infos__buttons .button-magipix a {
  height: 100%;
}

#app_errors_table {
  font-size: 0.8rem !important;
}

.button--pending-project-purchase {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-height: unset;
  gap: 1rem;
  width: 100%;
  height: 100%;
}

.modal-credit-consumption .button-default {
  justify-content: center;
  margin-top: 1rem;
}

.modal.update-quality-modal h1 {
  font-size: 1.25rem;
}

address {
  font-style: normal;
  display: block;
}

dfn {
  font-style: normal;
}

strong {
  font-weight: 700;
}

.mobile-user-login-button {
  background-color: #709ae0 !important;
  color: #F8FAFF !important;
}

/* Cookies - Start */
.button--cookies {
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -ms-flex-direction: column;
  flex-wrap: wrap;
  margin-top: 2rem;
  max-height: unset;
}

.button--cookies button {
  border: 1px solid #444;
  flex-grow: 1;
  width: 100%;
}

#selected-cookies {
  background-color: transparent;
  color: #444;
}

.policy-link {
  text-align: center;
  color: #365ab0;
  transition: color 0.3s linear;
  width: fit-content;
  margin: auto;
  margin-top: 1rem;
  font-weight: 400;
  text-decoration: underline;
}

.policy-link:hover {
  color: #709ae0;
}

/* Cookies - End */
/* Accordion - Start */
@supports not (-ms-ime-align: auto) {
  details {
    position: relative;
  }
  summary > * {
    display: inline;
  }
  summary {
    cursor: pointer;
    transition: list-style-image 0.5s linear;
    background-color: #88898b;
    color: #F8FAFF;
    border-radius: 7.5px;
    padding: 1rem;
    font-weight: bold;
  }
  summary::-webkit-details-marker {
    transition: background-image 0.5s linear, color 0.5s linear;
    color: transparent;
  }
  .accordion__checkbox {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
  }
  details[open] > summary {
    background-color: #709ae0;
  }
}
.navbar-details ul {
  margin-bottom: 0;
}

.navbar-summary {
  padding: 0.5rem;
}

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

.relative {
  position: relative !important;
}

/* Accordion - End */
/* Custom input file - Start */
.input-file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.label-input-file {
  padding: 1rem;
  width: 100%;
  border: 1px solid var(--color-neutral-900, #252526);
  transition: background-color 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
  font-size: 1rem;
  background-color: transparent;
  display: block;
  cursor: pointer;
}

.input-file:focus + .label-input-file {
  outline: 1px solid var(--color-primary-50, #4DB2FF);
}

.input-file:focus + .label-input-file,
.input-file + .label-input-file:hover {
  background-color: var(--color-primary-500, #1684D9);
  color: var(--color-neutral-50, #F0F2F7);
  font-weight: bold;
}

.input-file + .label-input-file * {
  pointer-events: none;
}

.project-progress-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-grow: 2;
  border: none;
  color: var(--color-primary-700, #006DC0);
  accent-color: var(--color-primary-700, #006DC0);
  background-color: var(--color-neutral-300, #BABBBF);
  height: 0.375rem;
  width: 100%;
  position: relative;
}

.project-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  z-index: 1;
  background-size: 25px 25px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
  animation: progress-bar 3s linear infinite;
  width: var(--progress-bar-after-width, 0%);
}

@keyframes progress-bar {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 100px 100px;
  }
}
.project-progress-bar::-webkit-progress-bar {
  background: var(--color-neutral-300, #BABBBF);
  border-radius: 0;
  height: 0.375rem;
}

.project-progress-bar::-webkit-progress-value {
  border-radius: 0;
  background: var(--color-primary-700, #006DC0);
  height: 0.375rem;
}

.project-progress-bar::-moz-progress-bar {
  background: var(--color-primary-700, #006DC0);
  border-radius: 0;
  height: 0.375rem;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  z-index: 1;
  background-size: 25px 25px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
  animation: progress-bar 3s linear infinite;
  width: var(--progress-bar-after-width, 0%);
}

/* Custom input file - End */
.property-qrcode-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Error Page - Start */
.error-container {
  text-align: center;
}

.error-container h1 {
  margin-bottom: 0;
  color: var(--color-error-700, #C01000);
  font-size: 1.75rem;
  font-weight: bold;
  margin-top: 1rem;
  line-height: 1;
}

.error-container h2 {
  line-height: 1;
}

.error-container div {
  margin-top: 2rem;
  line-height: 1;
}

/* Error Page - End */
.mb-1 {
  margin-bottom: 1rem !important;
}

/* dropdown customers */
.projects-customer-container {
  position: relative;
}

.projects-customer-dropdown-toggle-button {
  border: none;
  background: none;
  height: 2rem;
}

.projects-customer-dropdown {
  position: absolute;
  background-color: var(--color-neutral-50, #F0F2F7);
  min-width: 15rem;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  border-radius: 5px;
  top: 100%;
  right: 0;
  z-index: 9999;
  transition: transform 0.25s ease;
  transform: scale(0);
  transform-origin: top right;
}

.projects-customer-dropdown img {
  vertical-align: middle;
}

.projects-customer-dropdown.open {
  transform: scale(1);
}

.projects-customer-dropdown-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
}

.projects-customer-dropdown-column {
  flex-grow: unset;
  min-width: 1.5rem;
}

/* user-version-error-container */
.user-version-error-container {
  text-align: center;
  margin: auto;
}

.user-version-error-container h1 {
  color: #252526;
  font-size: 1.3rem;
}

.user-version-error-container h2 {
  color: #006DC0;
  font-size: 1.3rem;
}

.user-version-error-container a {
  background-color: #006DC0;
  color: #F8FAFF;
  font-weight: bold;
  padding: 1rem;
  border-radius: 0.5rem;
  display: inline-block;
  margin-top: 2rem;
  transition: background-color 0.5s ease, color 0.3s linear;
  border: 2px solid #006DC0;
}

.user-version-error-container a:hover {
  background-color: #F8FAFF;
  color: #006DC0;
}

.main-container--project-reprocess {
  height: 100%;
  background-color: #5D9FDA;
  margin-top: 0;
  background-image: linear-gradient(#5D9FDA, #EBE5F1);
}

.main-container--project-reprocess h1 {
  margin-bottom: 1rem;
  font-size: 1rem;
}

.main-container--project-reprocess h2 {
  font-size: 1rem;
}

.main-container--project-reprocess .loading {
  position: relative;
}

.main-container--project-reprocess .loading .content {
  width: min(100%, 500px);
}