/*!**********************************************************************************************************************************************************************************!*\
  !*** 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 ***!
  \**********************************************************************************************************************************************************************************/
@charset "UTF-8";
@font-face {
  font-family: "Poppins";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  font-size: normal;
  src: url("https://cdn.magipix.app/assets/fonts/poppins-light-webfont.woff2") format("woff2"), url("https://cdn.magipix.app/assets/fonts/poppins-light-webfont.woff") format("woff"), url("https://cdn.magipix.app/assets/fonts/poppins-light-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-size: normal;
  src: url("https://cdn.magipix.app/assets/fonts/poppins-regular-webfont.woff2") format("woff2"), url("https://cdn.magipix.app/assets/fonts/poppins-regular-webfont.woff") format("woff"), url("https://cdn.magipix.app/assets/fonts/poppins-regular-webfont.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  font-size: normal;
  src: url("https://cdn.magipix.app/assets/fonts/poppins-medium-webfont.woff2") format("woff2"), url("https://cdn.magipix.app/assets/fonts/poppins-medium-webfont.woff") format("woff"), url("https://cdn.magipix.app/assets/fonts/poppins-medium-webfont.ttf") format("truetype");
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  position: relative;
}

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,
input,
button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

body {
  line-height: 1.5;
  font-family: "Poppins", sans-serif !important;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: #444444;
  background-color: #FCFCFC;
  height: 100%;
}

summary,
details {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}

/* Remove the default disclosure triangle */
summary::-webkit-details-marker {
  display: none;
}

details {
  display: block;
  transition: none;
}

ol,
ul {
  list-style: 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: #88898b;
  opacity: 1;
  /* Firefox */
  font-size: 0.875rem;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #88898b;
  font-size: 0.875rem;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #88898b;
  font-size: 0.875rem;
}

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

input[type=checkbox] {
  scale: 1.2;
}

#video_container_div {
  display: flex;
  justify-content: 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;
}

.message-changes-in-project span {
  font-size: 0.875rem;
  color: #FF0000;
}

.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;
}

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

.floating-label {
  color: #414141;
  font-size: 14px;
  font-weight: normal;
  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: 500;
  font-size: 1.5rem;
  text-align: center;
}

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

.box-welcome h1,
.box-welcome p {
  font-weight: 500;
  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: 500;
  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;
}

#form .button-primary {
  margin-top: 1.5rem;
}

#form:invalid .button-primary button {
  background: #F5F5F5;
  color: rgba(0, 0, 0, 0.25);
  border: 1px solid #D9D9D9;
  pointer-events: none;
}

.button-primary a {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  justify-content: center;
}

.button-primary a span {
  line-height: 1.2;
}

.button-primary a, .button-primary button {
  background: #365ab0;
  width: 100%;
  height: 2.5rem;
  color: #fff;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 3px 3px 7px #f6f6f6;
  transition: 0.5s;
}

.button-primary a:hover, .button-primary button:hover {
  opacity: 0.9;
}

.button-primary a:disabled, .button-primary button:disabled {
  background: #F5F5F5;
  color: rgba(0, 0, 0, 0.25);
  border: 1px solid #D9D9D9;
}

.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: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  font-family: "Poppins", sans-serif;
  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;
}

@media screen and (max-height: 768px) {
  .box-legal-person,
  .box-physical-person {
    padding-bottom: 1rem;
  }
}
.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: #FCFCFC;
  margin: 2rem auto;
  padding: 20px;
  box-shadow: 4px 4px 12px #a7a7a7;
  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: 500;
  font-size: 1.5625rem;
}

.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: 500;
  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: 500;
  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: 500;
  margin-bottom: 1.3rem;
}

.modal .content-modal .modal-content .modal-content__products .modal-content__products__box-product .add-product-cart {
  bottom: 0.5rem;
}

.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: 500;
  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: 500;
  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: 500;
}

.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: 500;
}

.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: 500;
  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: 500;
}

.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 .content-modal .content-close span.close {
  cursor: pointer;
  font-size: 1.5rem;
  transition: 0.5s;
}

.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: 1rem;
}

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

.switch {
  display: inline-block;
  height: 1.5rem;
  position: relative;
  width: 3rem;
}

@media screen and (max-height: 768px) {
  .switch {
    height: 1.2rem;
  }
}
.switch input {
  display: none;
}

.switch .slider {
  background-color: #D3D3D3;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.switch .slider:before {
  background-color: #fff;
  bottom: 6px;
  content: "";
  height: 0.8rem;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 0.8rem;
}

@media screen and (max-height: 768px) {
  .switch .slider:before {
    bottom: 3px;
  }
}
.switch .slider.round {
  border-radius: 34px;
}

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

.switch input:checked + .slider {
  background-color: #05A461;
}

.switch input:checked + .slider:before {
  transform: translateX(26px);
}

.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: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  font-family: "Poppins", sans-serif;
  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: #FCFCFC;
}

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

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

.button-magipix a:hover,
.button-magipix button:hover {
  opacity: 0.8;
}

.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%;
}

.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: #FCFCFC;
}

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

.button-default a,
.button-default button {
  padding: 0.875rem 1rem;
  color: #FCFCFC;
  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: 500;
}

@media only screen and (max-width: 767px) {
  .pagination {
    width: 100%;
  }
}
#progress_upload_bar {
  width: 89%;
  background-color: #FCFCFC;
  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%;
}

.page__box-user-register .box-inputs {
  margin-top: 1.5rem;
}

.page__box-user-register .input-default-icon {
  display: block;
  border-radius: unset;
  border: unset;
}

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

.page__box-user-register .input-default-icon > div.focus {
  border-color: #709ae0;
}

.page__box-user-register .input-default-icon label {
  font-size: 0.875rem;
  color: #709ae0;
  font-weight: 600;
}

.page__box-login .button-magipix,
.page__box-user-register .button-magipix,
.page__box-user-register-password .button-magipix,
.page__box-user-password .button-magipix,
.page__box-user-password-reset .button-magipix {
  margin-top: 1.5rem;
}

.page__box-login .input-default,
.page__box-user-register .input-default,
.page__box-user-register-password .input-default,
.page__box-user-password .input-default,
.page__box-user-password-reset .input-default {
  text-align: start;
  display: block;
}

.page__box-login .input-default label,
.page__box-user-register .input-default label,
.page__box-user-register-password .input-default label,
.page__box-user-password .input-default label,
.page__box-user-password-reset .input-default label {
  font-size: 0.875rem;
  color: #709ae0;
  font-weight: 600;
}

.box-content {
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 4px 4px 12px #f6f6f6;
  padding: 4rem;
  width: 100%;
}

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

@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;
  }
}
@media screen and (max-height: 768px) {
  .box-content h1 {
    font-size: 1.25rem;
  }
}
.box-content form .button-magipix {
  justify-content: center;
  margin-top: 1rem;
}

.box-content form .button-magipix button {
  font-size: 1rem;
  font-weight: 500;
  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 #FCFCFC;
  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;
  transform: rotateX(180deg);
  scrollbar-color: #414141 #ffffff;
  scrollbar-width: thin;
}

.table table {
  margin: 0 auto;
  text-align: left;
  transform: rotateX(180deg);
}

.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;
  padding-top: calc(77px + 3rem);
}

.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: 500;
  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: 1rem;
}

.input-default input,
.input-default textarea {
  width: 100%;
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  padding: 0.8rem 1.3rem;
  color: #444444;
  font-size: 0.875rem;
  -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 textarea::placeholder {
  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 #DDDFE5;
  border-radius: 5px;
  padding: 0.8rem 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;
}

.input-default.input-password img {
  position: absolute;
  bottom: 10px;
  right: 16px;
}

.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: 500;
}

@media screen and (max-width: 421px) {
  .checkbox-default {
    align-items: flex-start;
  }
}
#form {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 520px) {
  #form {
    width: 100%;
  }
}
@media screen and (max-width: 520px) {
  #form {
    width: 100%;
  }
}
.change-lang-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

@media screen and (max-height: 768px) {
  .change-lang-button span {
    font-size: 0.875rem;
  }
}
.change-lang-button.active {
  background-color: #365ab0;
  color: #FCFCFC;
}

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

.navbar_mobile__menu {
  width: 2rem;
  height: 2rem;
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  /* transition: all 0.3s linear;*/
  z-index: 1;
}

.button-hamburguer-item {
  background: #365ab0;
  border-radius: 3px;
  display: block;
  height: 4px;
  position: relative;
  transition: transform 0.5s ease-in-out, background 0.5s ease-in-out, opacity 0.55s ease;
  width: 100%;
  z-index: 1;
  transform-origin: left;
}

.mobile__menu__container {
  display: flex;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0.5rem;
  background-color: #FCFCFC;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1;
  text-align: center;
  transition: transform 0.5s ease-out;
  transform: translateX(-100%);
  box-shadow: 4px 4px 12px #f6f6f6;
  padding: 0.5rem;
  overflow: auto;
}

@supports (min-height: 100dvh) {
  .mobile__menu__container {
    height: calc(100dvh - 100%);
  }
}
@supports not (min-height: 100dvh) {
  .mobile__menu__container {
    height: calc(100vh - 100%);
    min-height: -webkit-fill-available;
  }
}
.mobile__menu__container ul li a {
  margin-bottom: 0.3rem;
  font-size: 1.25rem;
  display: block;
}

.mobile__menu__container .navbar__content__options {
  display: flex;
  flex-direction: column;
  align-items: normal;
  width: 100%;
  gap: 0.5rem;
}

.mobile__menu__container .navbar__content__options .button-magipix button,
.mobile__menu__container .navbar__content__options .button-magipix a {
  width: 100%;
}

@media screen and (max-height: 768px) {
  .mobile__menu__container .navbar__content__options .button-magipix button,
  .mobile__menu__container .navbar__content__options .button-magipix a {
    font-size: 0.875rem;
  }
}
.mobile__menu__container .navbar__content__options .navbar__content__options__user__logged {
  justify-content: center;
}

.mobile__menu__container .navbar__content__options .navbar__content__options__box-user-profile,
.mobile__menu__container .navbar__content__options .navbar__content__options__car-shopping {
  cursor: pointer;
  position: relative;
}

.mobile__menu__container .navbar__content__options .navbar__content__options__box-user-profile img,
.mobile__menu__container .navbar__content__options .navbar__content__options__car-shopping img {
  width: 50px;
  height: 50px;
}

.mobile__menu__container .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__car-shopping__number,
.mobile__menu__container .navbar__content__options .navbar__content__options__car-shopping .navbar__content__options__car-shopping__number {
  top: 0;
  left: 50%;
  background-color: #709ae0;
  border-radius: 100%;
  color: #FCFCFC;
  font-size: 12px;
  width: max-content;
  font-weight: bold;
  padding: 0.2rem 0.5rem;
  position: absolute;
  transition: transform 0.5s;
}

.mobile__menu__container .navbar__content__options__user__logged {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
  word-break: break-all;
}

.mobile__menu__container .navbar__content__options__box-user-profile__box-profile-mobile,
.mobile__menu__container .box-mini-summary-order-mobile {
  display: none;
  position: relative;
  background-color: #FCFCFC;
  padding: 0.5rem;
  width: 100%;
  border-radius: 5px;
}

.mobile__menu__container .navbar__content__options__box-user-profile__box-profile-mobile.open,
.mobile__menu__container .box-mini-summary-order-mobile.open {
  display: block;
}

.mobile__menu__container .navbar__content__options__box-user-profile__box-profile__links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mobile__menu__container .navbar__content__options__box-user-profile__box-profile__links a {
  color: #365ab0;
  font-size: 1rem;
  display: block;
}

.mobile__menu__container .box-mini-summary-order__product {
  flex-grow: 1;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile__menu__container .box-mini-summary-order__product_items {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mobile__menu__container .box-mini-summary-order__product_items__name-product {
  width: 33.33%;
}

.mobile__menu__container .box-mini-summary-order__product__quantity {
  align-items: center;
  background: #DDDFE5;
  border-radius: 5px;
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  width: 25%;
  justify-content: space-between;
}

.mobile__menu__container .box-mini-summary-order__product__quantity img {
  cursor: pointer;
}

.mobile__menu__container .box-mini-summary-order__product__button-remove__remove-products {
  width: 20%;
}

.mobile__menu__container .box-mini-summary-order__product__remove-products {
  color: #F24E1E;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
}

.mobile__menu__container .box-mini-summary-order__product__box-button-magipix {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.mobile__menu__container.open {
  transform: translateX(0);
}

.mobile__menu__container__columns {
  width: min(100%, 500px);
}

.mobile__menu__checkbox {
  display: none;
}

.mobile__menu__checkbox:checked ~ .button-hamburguer-item {
  opacity: 1;
  transform: rotate(45deg) translateY(8px);
  background: #232323;
}

.mobile__menu__checkbox:checked ~ .button-hamburguer-item.line-1 {
  transform: rotate(45deg);
}

.mobile__menu__checkbox:checked ~ .button-hamburguer-item.line-2 {
  opacity: 0;
  transform: rotate(0deg) scale(0.2);
}

.mobile__menu__checkbox:checked ~ .button-hamburguer-item.line-3 {
  transform: rotate(-45deg);
}

@media screen and (max-width: 1250px) {
  .mobile-breathing-padding {
    padding-top: 77px;
  }
}
.navbar {
  background-color: #FCFCFC;
  height: 77px;
  display: flex;
  flex-shrink: 0;
  box-shadow: 4px 4px 12px #f6f6f6;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

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

.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__logo img.logo-booth {
  width: 142px;
  height: 32px;
}

@media screen and (max-width: 1250px) {
  .navbar .navbar__content .navbar__content__logo {
    display: flex;
    flex-direction: row;
    align-self: start;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  .navbar .navbar__content .navbar__content__logo .navbar_mobile__menu {
    display: flex;
  }
}
.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;
  }
}
@media screen and (max-width: 1250px) {
  .navbar .navbar__content .navbar__content__items {
    display: none;
  }
}
.navbar .navbar__content .navbar__content__items .language {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.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;
  }
}
@media screen and (max-height: 768px) {
  .navbar .navbar__content .navbar__content__options .button-magipix button,
  .navbar .navbar__content .navbar__content__options .button-magipix a {
    font-size: 0.875rem;
  }
}
.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: #FCFCFC;
  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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile {
  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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile.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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile div p {
  font-weight: 500;
  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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile 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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile 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,
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-user-profile .navbar__content__options__box-user-profile__box-profile-mobile {
    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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile {
  position: absolute;
  right: 0.5rem;
  top: 4rem;
  background: #fff;
  padding: 1.5rem 1rem;
  box-shadow: 4px 4px 12px #f6f6f6;
  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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile.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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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: 500;
  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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
.navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile .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,
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order,
  .navbar .navbar__content .navbar__content__options .navbar__content__options__box-car-shopping .box-mini-summary-order-mobile {
    position: absolute;
    width: 100vw;
    right: calc(50% + 1rem);
    transform: translateX(50%);
  }
}
@media screen and (max-width: 1250px) {
  .navbar .navbar__content .navbar__content__options {
    display: none;
  }
}
@media screen and (max-width: 1250px) {
  .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;
  }
}
.navbar.navbar-backoffice .mobile__menu__container__columns .navbar__content__options {
  align-items: center;
}

@media screen and (max-width: 1250px) {
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    -webkit-backface-visibility: hidden;
  }
}
.navbar__button {
  border: 1px solid #365ab0;
  border-radius: 3px;
  background: transparent;
  color: #444;
  font-weight: bold;
}

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

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

@media screen and (min-width: 768px) {
  .navbar-user {
    position: sticky;
  }
}
.modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social {
  padding-top: 0.5rem;
}

.modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social > p {
  text-align: center;
  margin: 1rem 0;
  font-weight: 500;
  font-size: 1.2rem;
}

.modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social .label-icon-button {
  padding: 0.7rem 0;
  color: #FCFCFC;
  display: block;
  background: #444444;
  border-radius: 5px;
  transition: background-color 1s;
  border: 0;
  width: 30%;
  cursor: pointer;
  margin: 0.5rem 0;
  text-align: center;
}

@media screen and (max-width: 576px) {
  .modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social .label-icon-button {
    width: 100%;
  }
}
.modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social .input-file {
  display: none;
}

.modal.buttons-sociais .modal-content .content-accordions .shipping-icon-button-social .input-default {
  margin-top: 1rem;
}

.modal.buttons-sociais .modal-content .content-accordions .video-icon-button-social p {
  text-align: center;
  margin: 1rem 0;
  font-weight: 500;
  font-size: 1.2rem;
}

.modal.buttons-sociais .modal-content .content-accordions .video-icon-button-social .box-video {
  position: relative;
  overflow: hidden;
  display: flex;
}

.modal.buttons-sociais .modal-content .content-accordions .video-icon-button-social .box-video img {
  position: absolute;
  z-index: 2;
  cursor: grab;
}

.modal.buttons-sociais .modal-content .content-accordions .video-icon-button-social .box-video video {
  max-height: 300px;
  width: 100%;
}

.modal.buttons-sociais .modal-content .content-accordions .controls p {
  text-align: center;
  margin: 1rem 0 0.5rem 0;
  font-weight: 500;
  font-size: 1.2rem;
}

.modal.buttons-sociais .modal-content .content-accordions .controls .box-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal.buttons-sociais .modal-content .content-accordions .controls .box-buttons .button-default {
  margin-top: 0.5rem;
}

.modal.buttons-sociais .modal-content .content-accordions .controls .box-buttons .button-default button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.5rem;
}

.modal.buttons-sociais .modal-content .content-accordions .controls .input-default {
  margin: 1.5rem auto 0 auto;
  width: 50%;
  padding-bottom: 1rem;
}

@media screen and (max-width: 576px) {
  .modal.buttons-sociais .modal-content .content-accordions .controls .input-default {
    width: 100%;
  }
}
.modal.buttons-sociais .modal-content .content-accordions .buttons-add-remove-button {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 1rem;
  margin-top: 1rem;
}

.modal.buttons-sociais .modal-content .content-accordions .buttons-add-remove-button #video_icon_error_msg_span {
  margin-top: 1rem;
  justify-content: center;
  font-weight: bold;
  color: red;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social {
  position: relative;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button {
  position: absolute;
  top: 0.5rem;
  right: 4rem;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button button {
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  color: #F24E1E;
  border: 1px solid #F24E1E;
  font-size: 0.875rem;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button button svg {
  width: 20px;
  height: 20px;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button button svg path {
  stroke: #F24E1E;
}

.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button button:hover {
  background-color: transparent;
  opacity: 0.8;
}

@media screen and (max-width: 421px) {
  .modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .button-magipix.remove-button {
    right: 2rem;
  }
}
.modal.buttons-sociais .modal-content .content-accordions .accordion-button-social .accordion-buttons.active {
  background-color: #fff;
  margin-bottom: 0.5rem;
}

.content-accordions {
  margin-top: 1rem;
}

.content-accordions .accordion-products,
.content-accordions .accordion-faq,
.content-accordions .accordion-buttons,
.content-accordions .accordion-new-buttons {
  background-color: #FCFCFC;
  color: #365ab0;
  font-weight: 500;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border-radius: 5px;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.content-accordions .accordion-products:hover,
.content-accordions .accordion-faq:hover,
.content-accordions .accordion-buttons:hover,
.content-accordions .accordion-new-buttons:hover {
  background-color: #dbe9ff;
}

.content-accordions .accordion-products:after,
.content-accordions .accordion-faq:after,
.content-accordions .accordion-buttons:after,
.content-accordions .accordion-new-buttons:after {
  content: "+";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.content-accordions .accordion-products.active::after,
.content-accordions .accordion-faq.active::after,
.content-accordions .accordion-buttons.active::after,
.content-accordions .accordion-new-buttons.active::after {
  content: "−";
}

.content-accordions .panel {
  padding: 0 18px;
  background-color: white;
  border-radius: 0 0 5px 5px;
  box-shadow: 1px 1px 12px rgba(227, 227, 227, 0.25);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.content-accordions .panel .option {
  display: flex;
  gap: 0.5rem;
  align-items: start;
  margin: 1rem 0;
}

.content-accordions .panel .option p {
  font-size: 0.875rem;
  text-align: start;
}

.content-accordions .panel .ball {
  margin-top: 0.2rem;
}

#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: 4px 4px 12px #f6f6f6;
  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: 1250px) {
  #navbarUserContent {
    width: 100vw;
  }
}
#navbarUserContent .content-items-navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  overflow-y: auto;
  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: 500;
}

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

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

@media screen and (max-height: 768px) {
  #navbarUserContent .content-items-navbar ul ol li {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 640px) {
  #navbarUserContent .content-items-navbar ul {
    text-align: center;
  }
}
#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 .language.panel {
  text-align: center;
}

#navbarUserContent .content-items-navbar .navbar-user__box__user-exit .language.panel svg {
  cursor: pointer;
}

@media screen and (max-height: 768px) {
  #navbarUserContent .content-items-navbar .navbar-user__box__user-exit li:last-child a {
    font-size: 0.875rem;
  }
}
#navbarUserContent .content-items-navbar .shopping-cart .button-icon-magipix {
  margin-top: 1rem;
}

#navbarUserContent .content-items-navbar .shopping-cart .button-icon-magipix a {
  width: 100%;
  justify-content: center;
  background-color: #709ae0;
  color: #FCFCFC;
  transition: 0.5s;
}

#navbarUserContent .content-items-navbar .shopping-cart .button-icon-magipix a:hover {
  opacity: 0.8;
}

@media screen and (max-height: 768px) {
  #navbarUserContent .content-items-navbar .shopping-cart .button-icon-magipix a {
    font-size: 0.875rem;
  }
}
#navbarUserContent .content-items-navbar .app-download {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

#navbarUserContent .quantity_credtis_projects {
  font-weight: 500;
  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;
  }
}
@media screen and (max-height: 768px) {
  #navbarUserContent .quantity_credtis_projects {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
}
#navbarUserContent .support-items .text {
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5rem;
}

@media screen and (max-height: 768px) {
  #navbarUserContent .support-items .text {
    font-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #navbarUserContent .support-items li ol .navbar__item {
    font-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-width: 640px) {
  #navbarUserContent .support-items li ol li {
    justify-content: center;
  }
}
#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: 1rem;
  }
}
#home,
#homeBooth {
  padding-bottom: 0;
}

.language {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: #f0f0f0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #444444;
  box-shadow: 4px 4px 12px #f6f6f6;
  max-width: 100px;
  margin: 0 auto;
}

.language svg {
  width: 24px;
  height: 24px;
}

.menu-language {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background-color: #FFFFFF;
  /* Semi-transparent background */
  z-index: 0;
  transition: 0.5s;
}

.menu-language .close-menu-language {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.menu-language .form-language {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 2rem;
  opacity: 0;
}

.menu-language .form-language button {
  background-color: #fff;
}

.menu-language .form-language.show {
  opacity: 1;
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
.menu-language.active {
  opacity: 1;
  width: 100%;
  height: 100%;
  z-index: 10;
}

#homeBooth.page {
  padding: 0 0;
}

#homeBooth .call-action {
  background-color: #365ab0;
  color: #FCFCFC;
  text-align: center;
  width: 100%;
  position: fixed;
  z-index: 4;
  transition: top 0.3s ease-in-out;
}

#homeBooth .call-action.active {
  top: 0;
  left: 0;
}

#homeBooth .call-action.active.none {
  display: none;
}

@media screen and (max-width: 768px) {
  #homeBooth .call-action.active {
    top: auto;
  }
}
#homeBooth .call-action > div {
  position: relative;
  padding: 1rem 0;
}

#homeBooth .call-action > div #closeCallAction {
  position: absolute;
  right: 4px;
  top: 3px;
}

#homeBooth .call-action > div #closeCallAction svg {
  width: 24px;
  height: 24px;
}

#homeBooth .call-action > div #closeCallAction svg path {
  stroke: #FCFCFC;
}

#homeBooth .call-action .infos-call-action {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  #homeBooth .call-action .infos-call-action {
    gap: 0.5rem;
  }
}
#homeBooth .call-action .infos-call-action p {
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  #homeBooth .call-action .infos-call-action p {
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}
#homeBooth .call-action .infos-call-action a {
  color: #FCFCFC;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#homeBooth .call-action .infos-call-action a img {
  transform: translateX(-10px);
  transition: transform 0.5s ease-out;
}

#homeBooth .call-action .infos-call-action a:hover img {
  transform: translateX(0);
}

#homeBooth .max-width.booth {
  max-width: 1090px;
  margin: 0 auto;
  padding: 2rem 0;
}

#homeBooth .max-width.booth h2 {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}

#homeBooth .booth-section-initial {
  padding-bottom: 3rem;
  padding-top: 9.9375rem;
  transition: padding-top 0.3s ease-in-out;
}

#homeBooth .booth-section-initial .infos {
  color: #454545;
}

#homeBooth .booth-section-initial .infos h1 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

#homeBooth .booth-section-initial .infos p {
  margin-bottom: 3rem;
}

#homeBooth .booth-section-initial .infos a {
  color: #365ab0;
  cursor: pointer;
  font-weight: bold;
}

#homeBooth .booth-section-initial .section-initial-img.booth img {
  aspect-ratio: 501/360;
}

@media screen and (max-width: 421px) {
  #homeBooth .booth-section-initial {
    padding-top: 11rem;
  }
}
#homeBooth .booth-section-resources {
  background-color: white;
  box-shadow: 4px 4px 12px #f6f6f6;
}

#homeBooth .booth-section-resources .items-resources {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#homeBooth .booth-section-resources .items-resources .resource {
  display: flex;
  gap: 0.625rem;
  align-items: start;
}

#homeBooth .booth-section-prices {
  background: linear-gradient(89deg, #202020 0%, rgba(32, 32, 32, 0.95) 55.33%, rgba(65, 65, 65, 0.85) 100%);
  color: #FCFCFC;
}

#homeBooth .booth-section-prices .prices-and-infos {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

#homeBooth .booth-section-prices .prices-and-infos .prices-booth {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  width: calc(50% - 1rem);
}

#homeBooth .booth-section-prices .prices-and-infos .prices-booth .page__section-prices__content-prices__price {
  border: 1px solid #0A0A0A;
  text-align: center;
}

#homeBooth .booth-section-prices .prices-and-infos .prices-booth .page__section-prices__content-prices__price .page__section-prices__content-prices__info .page__section-prices__content-prices__info__name-pack {
  margin-bottom: 0rem !important;
}

#homeBooth .booth-section-prices .prices-and-infos .prices-booth .page__section-prices__content-prices__info__price__with-discount__number-price {
  color: #FCFCFC;
  font-size: 1rem;
}

@media screen and (max-width: 1090px) {
  #homeBooth .booth-section-prices .prices-and-infos .prices-booth {
    width: 100%;
  }
}
@media screen and (min-width: 320px) {
  #homeBooth .booth-section-prices .prices-and-infos .prices-booth {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 576px) {
  #homeBooth .booth-section-prices .prices-and-infos .prices-booth {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 800px) {
  #homeBooth .booth-section-prices .prices-and-infos .prices-booth {
    grid-template-columns: repeat(3, 1fr);
  }
}
#homeBooth .booth-section-prices .prices-and-infos .infos-about-prices-booth {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#homeBooth .booth-section-prices .prices-and-infos .infos-about-prices-booth .info-price {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: flex-start;
}

#homeBooth .booth-section-prices .prices-and-infos .infos-about-prices-booth .info-price .ball {
  background-color: #365ab0;
  margin-top: 0.3rem;
}

@media screen and (max-width: 1090px) {
  #homeBooth .booth-section-prices .prices-and-infos .infos-about-prices-booth {
    width: 100%;
  }
}
#homeBooth .booth-section-early-user-program {
  background-color: #FCFCFC;
  box-shadow: 4px 4px 12px #f6f6f6;
}

#homeBooth .booth-section-early-user-program .max-width.booth > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#homeBooth .booth-section-early-user-program .max-width.booth .button-default {
  align-items: flex-start;
}

#homeBooth .booth-section-early-user-program .max-width.booth .button-default a {
  width: 20%;
}

@media screen and (min-width: 320px) {
  #homeBooth .booth-section-early-user-program .max-width.booth .button-default a {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #homeBooth .booth-section-early-user-program .max-width.booth .button-default a {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  #homeBooth .booth-section-early-user-program .max-width.booth .button-default a {
    width: 20%;
  }
}
#homeBooth .booth-section-videos .videos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, 350px);
  align-items: flex-start;
  justify-content: center;
}

#homeBooth .booth-section-videos .video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#homeBooth .booth-section-videos .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#homeBooth .booth-section-how-it-works .items {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#homeBooth .booth-section-how-it-works .items > div {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#homeBooth .booth-section-how-it-works .items > div div {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

#homeBooth .booth-section-how-it-works .items > div div span {
  font-size: 0.875rem;
  font-weight: bold;
}

#homeBooth .booth-section-how-it-works .items > div div p a {
  color: #365ab0;
}

@media screen and (max-width: 768px) {
  #homeBooth .booth-section-how-it-works .items {
    flex-wrap: wrap;
  }
}
.go-to-free-content-link {
  font-size: 1.2rem;
  color: #365ab0;
  margin-top: 3rem;
  display: block;
}

.page__section-initial,
.booth-section-initial {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: start;
}

.page__section-initial .section-initial-info .page__section-initial__title,
.booth-section-initial .section-initial-info .page__section-initial__title {
  font-weight: 500;
  font-size: 2rem;
  color: #365ab0;
  margin: 0 auto;
}

@media screen and (max-height: 768px) {
  .page__section-initial .section-initial-info .page__section-initial__title,
  .booth-section-initial .section-initial-info .page__section-initial__title {
    font-size: 1.5rem;
  }
}
.page__section-initial .section-initial-info p,
.booth-section-initial .section-initial-info p {
  max-width: 550px;
  margin-top: 0.5rem;
}

.page__section-initial .section-initial-info p:first-child,
.booth-section-initial .section-initial-info p:first-child {
  margin-top: 2rem;
}

@media screen and (max-height: 768px) {
  .page__section-initial .section-initial-info p,
  .booth-section-initial .section-initial-info p {
    font-size: 0.875rem;
  }
}
.page__section-initial .section-initial-img,
.booth-section-initial .section-initial-img {
  perspective: 800px;
}

.page__section-initial .section-initial-img iframe,
.booth-section-initial .section-initial-img iframe {
  max-width: 100%;
}

.page__section-initial .section-initial-img picture,
.booth-section-initial .section-initial-img picture {
  width: 100%;
  display: block;
  text-align: center;
}

.page__section-initial .section-initial-img img,
.booth-section-initial .section-initial-img img {
  width: 28.125rem;
  height: auto;
  border-radius: 5px;
  box-shadow: 4px 4px 12px #f6f6f6;
  max-width: 600px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

@media screen and (max-width: 1200px) {
  .page__section-initial .section-initial-img img,
  .booth-section-initial .section-initial-img img {
    width: 100%;
    aspect-ratio: 450/450;
  }
}
@media screen and (max-height: 768px) {
  .page__section-initial .section-initial-img img,
  .booth-section-initial .section-initial-img img {
    width: 19.125rem;
  }
}
.page__section-videos {
  border-top: 1px solid #365ab0;
  border-bottom: 1px solid #365ab0;
  padding-bottom: 3rem;
}

.page__section-videos h2 {
  text-align: center;
  padding: 3rem 0;
}

.page__section-videos .videos {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.page__section-videos .videos .video {
  max-width: 400px;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 420px) {
  .page__section-videos .videos .video iframe {
    width: 300px;
    height: 200px;
  }
}
.page__section-videos .videos .video h3 {
  text-align: center;
  margin-bottom: 0.5rem;
  color: #365ab0;
  font-weight: bold;
}

.page__section-benefits__content {
  position: relative;
}

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

@media screen and (max-height: 768px) {
  .page__section-benefits__content h2 {
    font-size: 1.2rem;
  }
}
.page__section-benefits__content .page__section-benefits__content__infos {
  display: flex;
  gap: 1rem;
  margin: 2rem auto 3rem;
}

.page__section-benefits__content .page__section-benefits__content__infos.max-width {
  max-width: 800px;
}

.page__section-benefits__content .page__section-benefits__content__infos .videos-benefits video {
  display: none;
  width: 200px;
  border-radius: 5px;
  box-shadow: 4px 4px 12px #f6f6f6;
}

.page__section-benefits__content .page__section-benefits__content__infos #list_benefits .item {
  font-weight: normal;
  cursor: pointer;
  transition: font-weight 0.3s ease-in-out;
}

.page__section-benefits__content .page__section-benefits__content__infos #list_benefits .item div h2 {
  padding-top: 0;
  text-align: start;
  padding: 0.5rem 1rem;
  background: #FCFCFC;
  box-shadow: 4px 4px 12px #f6f6f6;
  border-radius: 5px;
  font-size: 1.2rem;
  color: #365ab0;
}

@media only screen and (max-width: 950px) {
  .page__section-benefits__content .page__section-benefits__content__infos #list_benefits .item div h2:nth-of-type(even) {
    background: #365ab0;
    color: #FCFCFC;
  }
}
.page__section-benefits__content .page__section-benefits__content__infos #list_benefits .item div p {
  padding: 0.5rem 1rem;
  background-color: #F5F9FF;
  margin-bottom: 0.5rem;
}

@media only screen and (min-width: 950px) {
  .page__section-benefits__content .page__section-benefits__content__infos #list_benefits .hidden-p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
}
@media only screen and (min-width: 950px) {
  .page__section-benefits__content .page__section-benefits__content__infos #list_benefits .visible-p {
    height: 80px;
    opacity: 1;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
}
@media screen and (max-width: 576px) {
  .page__section-benefits__content .page__section-benefits__content__infos {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.content-button-test-for-free {
  text-align: center;
  padding-bottom: 1rem;
  margin-top: 2rem;
}

.content-button-test-for-free .button-default {
  justify-content: center;
  margin-bottom: 0.7rem;
  max-height: unset;
}

.content-button-test-for-free .button-default a {
  font-size: 1.5rem;
  padding: 1rem 1.5rem;
  background: #365ab0;
}

.content-button-test-for-free .button-default a:hover {
  opacity: 0.9;
}

.content-button-test-for-free > p {
  max-height: unset;
  font-size: 0.85rem;
}

.page__section-benefits {
  background-color: #F5F9FF;
  margin-top: 4rem;
}

@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: 10rem;
    background-color: #F5F9FF;
    left: -1px;
    top: -49px;
  }
  .page__section-benefits:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50% 50%;
    width: 36%;
    height: 5rem;
    background-color: #FCFCFC;
    right: -10px;
    top: -61px;
  }
}
.page__section-prices .all-products {
  margin: 1rem auto;
}

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

.page__section-prices .all-products .prepaid-products {
  margin-bottom: 2rem;
}

.page__section-prices .all-products .prepaid-products.box-content,
.page__section-prices .all-products .signatures-products.box-content {
  padding: 1rem;
  background: #FCFCFC;
}

@media screen and (max-width: 768px) {
  .page__section-prices .all-products .prepaid-products.box-content,
  .page__section-prices .all-products .signatures-products.box-content {
    padding: 1rem;
  }
}
.page__section-prices .all-products .prepaid-products #prepaidExemples .ball,
.page__section-prices .all-products .signatures-products #prepaidExemples .ball {
  background-color: #365ab0;
}

.page__section-prices .all-products .prepaid-products #prepaidDetails .ball,
.page__section-prices .all-products .signatures-products #prepaidDetails .ball {
  background-color: #709ae0;
}

.page__section-prices .all-products .signatures-products .page__section-prices__content-prices {
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 320px) {
  .page__section-prices .all-products .signatures-products .page__section-prices__content-prices {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem;
  }
}
@media screen and (min-width: 520px) {
  .page__section-prices .all-products .signatures-products .page__section-prices__content-prices {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .page__section-prices .all-products .signatures-products .page__section-prices__content-prices {
    grid-template-columns: repeat(2, 1fr);
  }
}
.page__section-prices__caption {
  margin: 0 auto 1rem;
}

.page__section-prices__caption.prepaid, .page__section-prices__caption.signature {
  margin: 0 auto 0.5rem;
}

.page__section-prices__caption.prepaid span, .page__section-prices__caption.signature span {
  font-weight: 600;
}

@media screen and (max-height: 768px) {
  .page__section-prices__caption {
    font-size: 0.875rem;
  }
}
.page__section-prices {
  margin: 2rem 0;
  text-align: center;
  background-color: #FCFCFC;
}

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

@media screen and (max-height: 768px) {
  .page__section-prices h2 {
    font-size: 1.2rem;
  }
}
.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: 500;
  margin-bottom: 0.5em;
  font-size: 1.2rem;
  color: #365ab0;
}

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

@media screen and (min-width: 320px) {
  .page__section-prices__content-prices {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5rem;
  }
}
@media screen and (min-width: 520px) {
  .page__section-prices__content-prices {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .page__section-prices__content-prices {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page__section-prices__content-prices__price {
  border: 2px solid #ebf3ff;
  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;
  padding: 0.7rem 1rem;
}

@media screen and (max-height: 768px) {
  .page__section-prices__content-prices__info .button-default button {
    font-size: 0.875rem;
  }
}
.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: 500;
}

.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: 500;
  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: 500;
}

.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: 500;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.page__section-prices__content-prices__info__name-pack {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem !important;
}

@media screen and (max-height: 768px) {
  .page__section-prices__content-prices__info__name-pack {
    margin-bottom: 0.5rem !important;
  }
}
.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-tutorials {
  background-color: #F5F9FF;
  padding-bottom: 3rem;
}

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

.page__section-tutorials div h2 {
  font-weight: 500;
  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: 500;
}

.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: 4px 4px 12px #f6f6f6;
  width: 100%;
  background-color: #fff;
  position: sticky;
  bottom: 0;
}

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

@media screen and (max-height: 768px) {
  footer .social-networks__infos .social-networks__infos__address p {
    font-size: 0.875rem;
  }
}
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%;
}

@media screen and (max-height: 768px) {
  footer .social-networks__infos .social-networks__infos__logo-name img {
    max-width: 100px;
  }
}
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%;
}

@media screen and (max-height: 768px) {
  footer .social-networks__infos .social-networks__infos__buttons .button-magipix a,
  footer .social-networks__infos .social-networks__infos__buttons .button-magipix button {
    font-size: 0.875rem;
  }
}
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: #FCFCFC;
}

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: #FCFCFC;
}

@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-width: 395px) {
  footer {
    bottom: 0;
    padding: 0.25rem;
  }
  footer .social-networks__infos {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }
  footer .social-networks__infos__buttons {
    gap: 0.1rem;
  }
}
@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;
}

#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: 500;
  margin: 0.5rem 0;
}

#userVerifyEmail .page__box-email-verify .page__box-email-verify__info p span {
  color: #365ab0;
}

#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: 2rem;
}

#userPassword .page__box-user-password .page__box-user-password__reset-password {
  text-align: start;
  margin-top: 1rem;
  font-size: 0.75rem;
}

#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 h1 {
  color: #365ab0;
}

#userPasswordResetOnTheWay .page__box-user-password-reset {
  text-align: center;
}

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

#userPasswordResetOnTheWay .page__box-user-password-reset p:last-child {
  margin-top: 1.5rem;
  font-size: 0.75rem;
}

@media screen and (max-width: 800px) {
  #panelUserData .page-user__box-user-data {
    margin-top: 2rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserData .page-user__box-user-data {
    padding: 3rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserData .page-user__box-user-data .box-inputs .button-magipix button {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserData .page-user__box-user-data .link-page-new-password {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserData .page-user__box-user-data .open-cookies-button button {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserData .box-legal-person p,
  #panelUserData .box-legal-person a,
  #panelUserData .box-physical-person p,
  #panelUserData .box-physical-person a {
    font-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #panelUserData h1 {
    font-size: 1.2rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #panelOrderHistory .order-history h2 {
    font-size: 1.2rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #panelTransactionHistory .transaction-history h2 {
    font-size: 1.2rem;
  }
}
#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: 500;
}

#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: 4px 4px 12px #f6f6f6;
  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;
}

@media screen and (max-height: 768px) {
  #panelTransactionHistory .transaction-history .order-history-transitions .creditis-modifications p {
    font-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #panelOrder .box-title p {
    font-size: 1.2rem;
  }
}
#panelOrder .box-title span {
  font-size: 1.3rem;
  color: #365ab0;
}

@media screen and (max-height: 768px) {
  #panelOrder .box-title span {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 421px) {
  #panelOrder .box-title {
    flex-wrap: wrap;
  }
}
@media screen and (max-height: 768px) {
  #panelOrder .page-user__box-user-order {
    padding: 3rem;
  }
}
#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: 500;
}

@media screen and (max-height: 768px) {
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item p {
    font-size: 0.875rem;
  }
}
#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-height: 768px) {
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-one .page-user__box-user-order__section-one__item span {
    font-size: 0.875rem;
  }
}
@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: 500;
  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: 500;
  margin: 0.5rem 0;
}

@media screen and (max-height: 768px) {
  #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-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .page-user__box-user-order__section-two__item p,
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-two .page-user__box-user-order__section-two__item span,
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .page-user__box-user-order__section-two__item p,
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-three .page-user__box-user-order__section-two__item span {
    font-size: 0.875rem;
  }
}
#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: 500;
  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;
}

@media screen and (max-height: 768px) {
  #panelOrder .page-user__box-user-order .page-user__box-user-order__section-four .button-icon-magipix button {
    font-size: 0.875rem;
  }
}
#panelOrder .page-user__box-user-order .page-user__box-user-order__section-four .box-invoce-download p {
  font-weight: 500;
}

#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: 4px 4px 12px #f6f6f6;
}

#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 .table table thead {
  border-bottom: none;
}

#orderSummary .page__order-summary__box .table table thead tr th {
  font-weight: 500;
  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: #ebebeb;
  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,
#orderSummary .page__order-summary__box .page__order-summary__box__add-credits-or-products a.add-signature {
  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: 500;
}

#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: 500;
}

#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: 500;
}

#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;
}

.radio-label-container {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}

/* 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: 500;
  transform: scaleY(-1);
}

.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: 500;
  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;
}

.invalid-image {
  position: absolute;
  top: 5rem;
  left: 0;
  background: #E94D20;
  color: #fff;
  padding: 0.5rem 0;
  width: 100%;
}

#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;
}

@media screen and (max-height: 768px) {
  #panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box {
    padding: 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 {
  width: calc(50% - 1rem);
}

@media screen and (max-width: 1714px) {
  #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 {
    width: 100%;
  }
}
@media screen and (max-height: 768px) {
  #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 h2,
  #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 h2 {
    font-size: 1.2rem;
  }
}
#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 svg path {
  stroke: #fff !important;
}

#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: normal;
  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 .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: 500;
}

#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-image__input-file .transparent-and-clipping .buttons-sociais,
#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,
#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 .buttons-sociais {
  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-image__input-file .transparent-and-clipping .buttons-sociais 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,
#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 .buttons-sociais 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-image__input-file .transparent-and-clipping .buttons-sociais: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,
#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 .buttons-sociais: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 .transparent-and-clipping .buttons-sociais .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 .buttons-sociais .tooltips {
  top: -2.3rem;
  left: -2rem;
  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 .buttons-sociais .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 .buttons-sociais .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: #FCFCFC;
}

#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: #FCFCFC;
}

@media screen and (max-height: 768px) {
  #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 {
    width: 20;
    height: 20;
  }
}
@media screen and (max-height: 768px) {
  #panelProjectCreate .page-user__box-project-create__target .page-user__box-project-create__target__box .page-user__box-project-create__target__box__remove-target div {
    font-size: 0.875rem;
  }
}
#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%;
}

@media screen and (max-height: 768px) {
  #panelProjectCreate .page-user__box-project-create__name-project .button-default button {
    font-size: 0.875rem;
  }
}
#panelProjectCreate .add-target {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 1rem;
  font-weight: 500;
  color: #444444;
  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: 500;
  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: 500;
  width: 100%;
}

#backofficeHome {
  background-color: #F5F9FF;
}

#backofficeHome .dashboard {
  max-width: 1478px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

#backofficeHome .dashboard form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#backofficeHome .box-content-dashboard {
  border-radius: 5px;
  background: #fff;
  padding: 1rem;
  box-shadow: 4px 4px 12px #f6f6f6;
  text-align: center;
}

#backofficeHome .box-content-dashboard .content-title-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem 0;
}

#backofficeHome .box-content-dashboard p {
  font-size: 1.25rem;
  font-weight: bold;
}

#backofficeHome .box-content-dashboard p.value {
  font-size: 2rem;
  margin-top: 0.5rem;
  color: #365ab0;
}

#backofficeHome .box-content-dashboard span {
  font-size: 0.875rem;
  color: #709ae0;
}

#backofficeHome .box-content-dashboard .box-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#backofficeHome .box-content-dashboard .box-buttons .button-magipix button {
  padding: 0.5rem 1rem;
}

#backofficeHome .canvas-statitic {
  margin: 0 auto;
  width: 25vw;
  height: 20vh;
}

@media screen and (max-width: 1400px) {
  #backofficeHome .canvas-statitic {
    width: 40vw;
  }
}
@media screen and (max-width: 1200px) {
  #backofficeHome .canvas-statitic {
    width: 40vw;
  }
}
@media screen and (max-width: 992px) {
  #backofficeHome .canvas-statitic {
    width: 40vw;
  }
}
@media screen and (max-width: 810px) {
  #backofficeHome .canvas-statitic {
    width: 80vw;
  }
}
@media screen and (max-width: 576px) {
  #backofficeHome .canvas-statitic {
    width: 70vw;
  }
}
@media screen and (max-width: 520px) {
  #backofficeHome .canvas-statitic {
    width: 85vw;
  }
}
#backofficeHome section {
  display: grid;
  gap: 1rem;
  justify-content: center;
}

#backofficeHome .section-dashboard-values {
  grid-template-columns: repeat(auto-fill, 350px);
}

@media screen and (max-width: 768px) {
  #backofficeHome .section-dashboard-values {
    grid-template-columns: repeat(auto-fill, 100%);
  }
}
#backofficeHome .section-dashboard-statistic {
  display: flex;
  flex-wrap: wrap;
}

#backofficeHome .section-dashboard-statistic > div {
  width: 50%;
}

#backofficeHome .section-dashboard-statistic > div:nth-child(1) {
  width: calc(50% - 1rem);
}

@media screen and (max-width: 810px) {
  #backofficeHome .section-dashboard-statistic > div:nth-child(1) {
    width: 100%;
  }
}
@media screen and (max-width: 810px) {
  #backofficeHome .section-dashboard-statistic > div {
    width: 100%;
  }
}
#backofficeHome .section-dashboard-access {
  display: block;
}

#backofficeHome .section-dashboard-access .box-selects {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

#backofficeHome .section-dashboard-access .box-selects .input-default,
#backofficeHome .section-dashboard-access .box-selects .select-default {
  margin-bottom: 0;
}

#backofficeHome .section-dashboard-access .box-cards {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

#backofficeHome .section-dashboard-access .box-cards .box-card-page {
  padding: 1rem;
  background-color: #F5F9FF;
}

#backofficeHome .section-dashboard-access .box-cards .box-card-page p {
  color: #365ab0;
  margin-bottom: 0.5rem;
}

#backofficeHome .section-dashboard-access .box-cards .box-card-page .table {
  max-height: 180px;
  height: 100%;
}

.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;
  margin: 0 auto 2rem;
}

.box-search .search-users,
.box-searchs .search-users {
  border: 1px solid #DDDFE5;
  border-radius: 5px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}

.box-search .search-users img,
.box-searchs .search-users img {
  margin: 0 0.3rem;
}

.box-search .search-users input,
.box-searchs .search-users input {
  border: 0;
  background: transparent;
  height: 100%;
  width: 85%;
}

.box-search .search-users input::placeholder,
.box-searchs .search-users input::placeholder {
  font-size: 0.875rem;
}

.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 .box-searchs {
  justify-content: flex-end;
}

#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: 500;
}

#backofficeUsers table tbody tr td,
#backofficeUser table tbody tr td,
#backofficeOrders table tbody tr td,
#backofficeProducts table tbody tr td,
#backofficeCupons table tbody tr td,
#backofficeAppErrors table tbody tr td,
#backofficeProjects table tbody tr td {
  text-wrap: initial;
}

#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: 500;
}

#backofficeOrders .box-search {
  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-search-container {
  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: 500;
  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: 500 span;
  font-weight-font-weight: normal;
}

#panelProjects h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

@media screen and (max-height: 768px) {
  #panelProjects h1 {
    font-size: 1.2rem;
    margin-bottom: 1.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;
  }
}
@media screen and (max-height: 768px) {
  #panelProjects .box-searchs {
    margin: 1rem auto;
  }
}
#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: 4px 4px 12px #f6f6f6;
  background: #FCFCFC;
  max-width: 19.375rem;
  width: 100%;
}

#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects {
  padding: 0 1rem 1.5rem 1rem;
}

#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;
}

@media screen and (max-height: 768px) {
  #panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects h1 a {
    font-size: 1.2rem;
  }
}
#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: 500;
}

#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: normal;
}

@media screen and (max-height: 768px) {
  #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-size: 0.875rem;
  }
}
#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;
}

@media screen and (max-height: 768px) {
  #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: 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 .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: fit-content;
  text-align: start;
  font-size: 0.85rem;
}

@media screen and (max-height: 768px) {
  #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 {
    font-size: 0.875rem;
  }
}
#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.15rem;
  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 #444444;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  font-size: 0.875rem;
  color: #444444;
  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-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;
  width: 20px;
  height: 20px;
}

#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 form .to-share-project-published {
  transition: 0.5s;
}

#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-share-project-published:hover,
#panelProjects .items-panel-projects .box-panel-projects .content-panel-projects .content-items-panel-projects form .to-share-project-published:hover {
  opacity: 0.8;
}

#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: #444444;
  transition: 0.5s;
}

#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 {
  opacity: 0.8;
}

#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: #444444;
  transition: 0.5s;
}

#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 {
  opacity: 0.8;
}

#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;
}

@media screen and (max-height: 768px) {
  #panelProjects .items-panel-projects .box-panel-projects .content-panel-projects img {
    height: 10.375rem;
  }
}
#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: 500;
}

#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%;
  transition: background-color 0.5s linear;
}

#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%;
  transition: color 0.1s linear;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project img {
  transition: filter 0.1s linear;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project.no-projects-in-display {
  height: 400px;
}

#panelProjects .items-panel-projects .box-panel-projects.new-project:hover {
  background-color: #F5F9FF;
}

#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;
}

@media screen and (max-height: 768px) {
  #panelProjects .items-panel-projects .box-panel-projects.project-pending_and_published .button-project button {
    font-size: 0.875rem;
  }
}
#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: 500;
}

.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: 500;
  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: 500;
  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: 500;
  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: 500;
  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: normal;
  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: 500;
}

.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: #FCFCFC;
  border-color: #709ae0;
}

.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: #FCFCFC;
}

.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,
.modal.video-adjust #video_mask_div {
  position: relative;
}

.modal.video-mask #video_mask_div .img-info-mask,
.modal.video-adjust #video_mask_div .img-info-mask {
  position: absolute;
  width: 30px;
  top: 4px;
  right: 60px;
  z-index: 3;
  cursor: pointer;
}

.modal.video-mask #video_mask_div .save-green,
.modal.video-mask #video_mask_div .save-blue,
.modal.video-mask #video_mask_div .save-normal,
.modal.video-mask #video_mask_div .save-top-down,
.modal.video-adjust #video_mask_div .save-green,
.modal.video-adjust #video_mask_div .save-blue,
.modal.video-adjust #video_mask_div .save-normal,
.modal.video-adjust #video_mask_div .save-top-down {
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.video-mask #video_mask_div .save-green button,
.modal.video-mask #video_mask_div .save-blue button,
.modal.video-mask #video_mask_div .save-normal button,
.modal.video-mask #video_mask_div .save-top-down button,
.modal.video-adjust #video_mask_div .save-green button,
.modal.video-adjust #video_mask_div .save-blue button,
.modal.video-adjust #video_mask_div .save-normal button,
.modal.video-adjust #video_mask_div .save-top-down 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-blue button,
  .modal.video-mask #video_mask_div .save-normal button,
  .modal.video-mask #video_mask_div .save-top-down button,
  .modal.video-adjust #video_mask_div .save-green button,
  .modal.video-adjust #video_mask_div .save-blue button,
  .modal.video-adjust #video_mask_div .save-normal button,
  .modal.video-adjust #video_mask_div .save-top-down 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-blue button,
  .modal.video-mask #video_mask_div .save-normal button,
  .modal.video-mask #video_mask_div .save-top-down button,
  .modal.video-adjust #video_mask_div .save-green button,
  .modal.video-adjust #video_mask_div .save-blue button,
  .modal.video-adjust #video_mask_div .save-normal button,
  .modal.video-adjust #video_mask_div .save-top-down button {
    width: 50%;
  }
}
.modal.video-mask .box-mask-preview-canvas {
  display: none;
}

.modal.video-mask .box-mask-preview-canvas.green-active, .modal.video-mask .box-mask-preview-canvas.blue-active, .modal.video-mask .box-mask-preview-canvas.top-down-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, .modal.video-mask .box-mask-preview-canvas.blue-active #mask_preview_canvas, .modal.video-mask .box-mask-preview-canvas.top-down-active #mask_preview_canvas {
  margin: 0 auto;
  height: 100%;
}

.modal.video-mask .modal-content {
  position: relative;
}

.modal.video-mask .modal-content .info-mask {
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 2px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 12px #f6f6f6;
  padding: 1rem;
  left: 0;
}

.modal.video-mask .modal-content .info-mask .close-info-mask {
  cursor: pointer;
  color: #FB6E62;
  font-weight: 500;
  text-align: end;
}

.modal.video-mask .modal-content .info-mask > div h2 {
  text-align: center;
}

.modal.video-mask .modal-content .info-mask .items-info-mask {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  text-align: center;
}

.modal.video-mask .modal-content .info-mask .items-info-mask p {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.modal.video-mask .modal-content .info-mask .items-info-mask p span {
  font-weight: 600;
}

.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 {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
}

.modal.target-quality p:not(:last-child) {
  margin-bottom: 0.75rem;
}

.modal.modal-loader-spinner {
  text-align: center;
}

.modal.modal-loader-spinner .content-modal .modal-content {
  align-items: center;
}

@media screen and (max-height: 768px) {
  .page-user-device__box-devices p {
    font-size: 0.875rem;
  }
}
.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: 500;
}

@media screen and (max-height: 768px) {
  .page-user-device__box-devices .box-device-active p {
    font-size: 0.875rem;
  }
}
.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;
}

@media screen and (max-height: 768px) {
  .page-user-device__box-devices .box-device-active .button-default button {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 768px) {
  .page-user-device__box-devices {
    padding: 3;
  }
}
.modal.modal-new-device .content-modal .modal-content h1,
.modal-add-device .content-modal .modal-content h1 {
  margin-bottom: 0.5rem;
}

@media screen and (max-height: 768px) {
  .modal.modal-new-device .content-modal .modal-content h1,
  .modal-add-device .content-modal .modal-content h1 {
    font-size: 1.2rem;
  }
}
@media screen and (max-height: 768px) {
  .modal.modal-new-device .content-modal .modal-content p,
  .modal-add-device .content-modal .modal-content p {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 768px) {
  .modal.modal-new-device .content-modal .modal-content .button-default button,
  .modal-add-device .content-modal .modal-content .button-default button {
    font-size: 0.875rem;
  }
}
.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: 500;
}

@media screen and (max-height: 768px) {
  .page-user-logo__box-logo .box-user-logo h2 {
    font-size: 1.2rem;
  }
}
.page-user-logo__box-logo .box-user-logo img {
  margin-top: 1rem;
  max-width: 200px;
  width: 100%;
}

@media screen and (max-height: 768px) {
  .page-user-logo__box-logo .box-user-logo img {
    max-width: 150px;
  }
}
.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%;
  }
}
@media screen and (max-height: 768px) {
  .page-user-logo__box-logo .box-user-logo .box-button-logo .box-button-logo {
    font-size: 0.875rem;
  }
}
.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;
}

@media screen and (max-height: 768px) {
  .page-user-logo__box-logo {
    padding: 3rem;
  }
}
#panelUserSubscriptions h1 {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1rem;
}

@media screen and (max-height: 768px) {
  #panelUserSubscriptions h1 {
    font-size: 1.2rem;
  }
}
#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: 500;
  margin: 0;
}

#panelUserSubscriptions .box-subscription .subscription p span {
  font-weight: 500;
}

#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: 500;
  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: 500;
  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: 500;
}

#panelUserSubscriptions .box-subscription .subscription .title-not-subscription {
  margin: 1rem 0 2rem 0;
}

#panelUserSubscriptions .info-signature-education {
  margin: 2rem auto 0;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 2px 10px #dddfe5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.5;
  max-width: 570px;
  padding: 1.5rem 0.5rem;
  width: 100%;
  position: relative;
}

#panelUserSubscriptions .info-signature-education h2 {
  margin-bottom: 0.5rem;
}

@media screen and (max-height: 768px) {
  #panelUserSubscriptions .info-signature-education h2 {
    font-size: 1.2rem;
  }
}
@media screen and (max-height: 768px) {
  #panelUserSubscriptions .info-signature-education p {
    font-size: 0.875rem;
  }
}
#panelUserSubscriptions .info-signature-education > img {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
}

@media screen and (max-height: 768px) {
  #panelUserSubscriptions .signature-benefits-list li {
    font-size: 0.875rem;
  }
}
#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: 500;
}

#backofficeUser .page__box-user-backoffice p span,
#panelUserSubscriptions .page__box-user-backoffice p span {
  font-weight: normal;
}

.form-buttons--backoffice {
  display: flex;
}

.form-buttons > button {
  padding: 0.5rem;
}

.form-buttons button + button {
  margin-left: 0.5rem;
}

.subscriptions-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  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: 500;
  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: 600;
}

.page-backoffice-order-nfse-pdf .header-infos-business .box-infos-issue .issue-date-nfse p span {
  font-weight: 600;
}

.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: 600;
}

.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: 600;
}

.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: 600;
  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: 600;
  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: 600;
}

.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: 600;
  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: 600;
  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: 600;
}

.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: 600;
}

.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: 600;
}

.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: 600;
  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: 600;
}

.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: normal;
}

.modal.modal-info-signature .content-modal .modal-content h1 {
  margin-bottom: 1rem;
}

.modal.modal-info-signature .infos-signature .option {
  margin: 1rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: start;
  justify-content: start;
}

.modal.modal-info-signature .infos-signature .option .ball {
  background: #709ae0;
  margin-top: 0.3rem;
}

.modal.modal-info-signature .infos-signature .option p {
  text-align: left;
}

.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;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .content-modal .modal-content h1.title-project {
    margin-bottom: 0.875rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .box-deeplink-project-view,
  .modal.modal-view-share-project .box-code-project-view {
    margin-bottom: 1rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .content-close .close {
    height: 24px;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .box-qrcode-project-view h2,
  .modal.modal-view-share-project .box-deeplink-project-view h2,
  .modal.modal-view-share-project .box-code-project-view h2 {
    font-size: 1rem;
    font-weight: 600;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .box-qrcode-project-view p,
  .modal.modal-view-share-project .box-deeplink-project-view p,
  .modal.modal-view-share-project .box-code-project-view p {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode {
    margin-top: 0.5rem;
    gap: 0.25rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .box-deeplink-project-view .copy-deeplink {
    margin-top: 0.5rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .box-deeplink-project-view .copy-deeplink #project_deeplink_url_p,
  .modal.modal-view-share-project .box-deeplink-project-view .copy-deeplink #project_deeplink_url_button,
  .modal.modal-view-share-project .copy-and-edit-code .button-magipix button {
    font-size: 0.875rem;
  }
}
@media screen and (max-height: 800px) {
  .modal.modal-view-share-project .content-view-project .box-qrcode-project-view .content-view-project__qrcode #project_qrcode_url_img {
    width: 200px;
    height: 200px;
  }
}
/* 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://cdn.magipix.app/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;
}

.save-follow_camera {
  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: 500;
}

#panelSupportEmail .box-email-upload-file #email_upload_completed_div a {
  font-weight: 500;
  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: 500;
  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;
  }
}
#wrapper #home {
  padding-bottom: 0;
}

#userTerms .terms-item,
#cookiesPolicy .terms-item,
#privacyPolicy .terms-item {
  font-weight: 500;
  display: inline;
}

#userTerms h2,
#cookiesPolicy h2,
#privacyPolicy h2 {
  text-align: center;
  font-weight: 500;
  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;
}

@media screen and (max-height: 768px) {
  .user-pagination-count__label {
    font-size: 0.875rem;
  }
}
.user-pagination-count__select {
  border: 1px solid #DDDFE5;
  background-color: #FCFCFC;
  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;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.error-message-container {
  text-align: center;
}

@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 */
@supports selector(:focus-within) {
  .box-search ul {
    display: none;
  }
  .box-search:focus-within ul {
    display: block;
  }
}
.box-search ul img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.box-search--backoffice {
  gap: 0.5rem;
}

.box-search--backoffice select {
  border-radius: 5px;
  border-color: #DDDFE5;
}

.select-backoffice {
  border-radius: 5px;
  border-color: #DDDFE5;
}

/* 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: 4px 4px 12px #f6f6f6;
  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-credit-consumption .modal-content div {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: center;
}

@media screen and (max-width: 421px) {
  .modal-credit-consumption .modal-content div svg {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 421px) {
  .modal-credit-consumption .modal-content div {
    flex-wrap: wrap;
  }
}
address {
  font-style: normal;
  display: block;
}

dfn {
  font-style: normal;
}

strong {
  font-weight: 700;
}

.backoffice-table-button {
  border-radius: 3px;
  padding: 0.5rem;
  display: inline-block;
}

/* Cookies - Start */
.button--cookies {
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  -ms-flex-direction: column;
  flex-wrap: wrap;
  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: 500;
  text-decoration: underline;
}

.policy-link:hover {
  color: #709ae0;
}

/* Cookies - End */
@supports not (-ms-ime-align: auto) {
  details {
    position: relative;
  }
  summary > * {
    display: inline;
  }
  summary {
    cursor: pointer;
    transition: list-style-image 0.5s linear;
    color: #365ab0;
    border-radius: 7.5px;
    padding: 1rem;
    font-weight: 500;
    list-style: none;
    transition: background-image 0.5s linear, color 0.5s linear;
  }
  summary::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url("https://cdn.magipix.app/assets/icons/icon-down.png") no-repeat;
    top: 10px;
    right: 0;
    position: absolute;
    display: inline-block;
    transition: transform 0.5s linear;
  }
  .accordion__checkbox {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
  }
  details[open] > summary:after {
    transform: rotate(180deg);
  }
}
.navbar-details ol {
  padding-left: 1rem;
}

.navbar-details ul {
  margin-bottom: 0;
}

.navbar-summary {
  padding: 0.5rem;
}

/* Accordion - End */
/* Footer Cookie - Start */
.footer-cookies {
  position: sticky;
  bottom: 0;
  z-index: 2000;
  max-width: 500px;
  left: 100%;
  background-color: #FCFCFC;
  border: 1px solid #444;
  padding: 1rem;
  display: none;
  border-radius: 5px;
}

.footer-cookies.active {
  display: block;
}

.footer-cookies-container {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.footer-cookies-container.open {
  display: flex;
}

.footer-cookies__paragraph-container {
  font-size: 1rem;
  font-weight: 500;
}

.button--cookies {
  align-items: center;
  border-radius: 5px;
  display: flex;
  height: 100%;
  transition: 0.5s;
  border: 1px solid #444;
  background: #444;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-align: center;
  flex-grow: 1;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.75rem 0.5rem;
  transition: background-color 0.5s ease-in-out, color 0.3s linear, border-color 0.3s linear;
}

.button--cookies-container {
  display: flex;
  align-items: start;
  gap: 1rem;
  height: 100%;
  justify-content: center;
}

.button--cookies-configure-button {
  background-color: transparent;
  color: #444;
}

.button--cookies-configure-button:hover {
  background-color: #444;
  color: #FCFCFC;
}

.button--cookies-accept-all-button {
  background-color: #365ab0;
  border-color: #365ab0;
  color: #FCFCFC;
}

.button--cookies-accept-all-button:hover {
  background-color: #FCFCFC;
  color: #365ab0;
}

.footer-cookies-configuration-container {
  display: none;
  flex-direction: column;
  -ms-flex-direction: column;
}

.footer-cookies-configuration-container.open {
  display: flex;
}

.cookies-summary__checkbox {
  margin: unset;
  margin-right: 0.5rem;
}

.footer-cookies__accordion-container {
  margin-bottom: 1rem;
}

.footer-cookies__accordion-container details p + p,
.footer-cookies__accordion-container details li {
  margin-top: 0.5rem;
}

.footer-cookies__accordion-container details {
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer-cookies__accordion-container summary {
  padding: 0.5rem 0;
  margin-left: -1rem;
  margin-right: -1rem;
}

.footer-cookies__accordion-container summary::after {
  top: unset;
}

.open-cookies-button {
  justify-content: center;
  margin-top: 2rem;
}

.user-register-section-label {
  text-align: start;
}

/* Footer Cookie - End */
.copy-and-edit-code .input-default {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 520px) {
  .copy-and-edit-code {
    margin-bottom: 4rem;
  }
}
#button_save_code_project {
  display: none;
}

#homeInstructions {
  text-align: center;
}

#homeInstructions .max-width {
  max-width: 1300px;
}

#homeInstructions .title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

#homeInstructions picture img {
  max-width: 100%;
  width: auto;
  box-shadow: 4px 4px 12px #f6f6f6;
}

#homeInstructions .step-default:nth-child(2n) .step-image-info {
  flex-direction: row-reverse;
}

#homeInstructions .step-image-info,
#homeInstructions .step-image {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#homeInstructions .step-image-info > picture,
#homeInstructions .step-image-info > div,
#homeInstructions .step-image > picture,
#homeInstructions .step-image > div {
  width: calc(50% - 1rem);
}

@media screen and (max-width: 768px) {
  #homeInstructions .step-image-info > picture,
  #homeInstructions .step-image-info > div,
  #homeInstructions .step-image > picture,
  #homeInstructions .step-image > div {
    width: 100%;
  }
}
#homeInstructions .step-image-info > picture img,
#homeInstructions .step-image > picture img {
  width: 100%;
}

#homeInstructions .step-image-info > div > picture,
#homeInstructions .step-image-info > div > picture img,
#homeInstructions .step-image > div > picture,
#homeInstructions .step-image > div > picture img {
  width: 100%;
}

#homeInstructions .step-default {
  margin-bottom: 2rem;
}

#homeInstructions .max-width-image {
  max-width: 400px;
}

#homeInstructions .step-4 .step-image .last-img,
#homeInstructions .step-4 .step-image-info .last-img,
#homeInstructions .step-5 .step-image .last-img,
#homeInstructions .step-5 .step-image-info .last-img,
#homeInstructions .step-9 .step-image .last-img,
#homeInstructions .step-9 .step-image-info .last-img {
  max-width: 500px;
}

#homeInstructions .content-infos {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.8rem;
  margin: 0.5rem 0;
}

#homeInstructions .content-infos .info {
  display: flex;
  align-items: start;
  gap: 1rem;
}

#homeInstructions .content-infos .info .number {
  padding: 0.2rem 0.8rem;
  border: 1px solid #365ab0;
  border-radius: 100%;
}

#homeInstructions .content-infos .info .number span {
  color: #365ab0;
  font-size: 1.5rem;
  font-weight: 500;
}

#homeInstructions .content-infos .info .number.num-two {
  padding: 0.5rem 0.8rem;
}

#homeInstructions .content-infos .info p {
  text-align: start;
}

#homeInstructions .content-infos > p {
  text-align: center;
  margin: 1rem auto;
}

#homeInstructions .after-registration .content-infos > p {
  font-weight: 500;
}

#homeInstructions .editor {
  margin-top: 2rem;
}

#homeInstructions .editor h2 {
  margin-bottom: 2rem;
}

#homeInstructions .content-after-saving-project h3,
#homeInstructions .content-how-to-buy-credits h3 {
  font-size: 1.25rem;
  margin: 1rem 0;
  font-weight: 500;
}

#homeInstructions .content-button-faq .button-default {
  justify-content: center;
  margin-top: 1.5rem;
}

#homeInstructions .content-button-faq .button-default a {
  padding: 1.3rem 2rem;
}

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

.page.page-error {
  justify-content: center;
}

.page-error .error-message-container {
  display: flex;
  justify-content: center;
  gap: 4rem;
  align-items: center;
  flex-wrap: wrap;
}

.page-error .error-message-container img {
  max-width: 400px;
}

@media screen and (max-width: 421px) {
  .page-error .error-message-container img {
    max-width: 300px;
  }
}
.page-error .error-message-container > div .top-title {
  color: #FE7169;
  font-weight: 600;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

.page-error .error-message-container > div h2 {
  color: #365ab0;
  font-weight: 500;
  font-size: 1.5rem;
}

.page__section-FAQ {
  background-color: #F5F9FF;
}

.page__section-FAQ h2 {
  font-weight: 500;
  margin: 1rem;
}

@media screen and (max-height: 768px) {
  .page__section-FAQ h2 {
    font-size: 1.2rem;
  }
}
.page__section-FAQ .max-width {
  max-width: 835px;
  margin: 2rem auto;
  text-align: center;
}

.page__section-FAQ .max-width .content-accordions .panel > p {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: start;
}

.page__section-FAQ .max-width .content-accordions .panel > p:first-child {
  margin-top: 1rem;
}

.page__section-FAQ .max-width .content-accordions .panel .option .ball {
  background: #709ae0;
  margin-top: 0.3rem;
}

.page__section-books {
  background-color: #FCFCFC;
  padding-bottom: 7rem;
}

@media screen and (max-height: 768px) {
  .page__section-books {
    padding-bottom: 2rem;
  }
}
.page__section-books__content h2 {
  text-align: center;
  padding: 2rem 0;
}

@media screen and (max-height: 768px) {
  .page__section-books__content h2 {
    font-size: 1.2rem;
  }
}
.page__section-books__content .button-magipix {
  justify-content: center;
}

.page__section-books__content .books {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.page__section-books__content .books div.content-img {
  position: relative;
}

.page__section-books__content .books div.content-img:hover img {
  filter: brightness(0.5);
}

.page__section-books__content .books div.content-img:hover:before {
  content: url("https://cdn.magipix.app/assets/icons/icon-downloads-text-pdf.svg");
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page__section-books__content .books img {
  width: 250px;
  border-radius: 5px;
  box-shadow: 4px 4px 12px #f6f6f6;
  transition: 0.5s;
  object-fit: cover;
}

@media screen and (max-height: 768px) {
  .page__section-books__content .books img {
    width: 200px;
  }
}
@media screen and (max-width: 580px) {
  .page__section-books__content .books img {
    width: 200px;
    height: auto;
  }
}
@media screen and (max-width: 432px) {
  .page__section-books__content .books img {
    width: 180px;
    height: auto;
  }
}
.youtube-container {
  max-width: 400px;
  width: 100%;
  height: 100%;
}

.youtube {
  background-color: #000;
  position: relative;
  min-height: 262px;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
}

.youtube img {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  opacity: 0.7;
}

.youtube-play-button {
  width: 68px;
  height: 48px;
  border-radius: 13px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  z-index: 1;
  background-color: red;
  opacity: 1;
}

.youtube-play-button:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube-play-button {
  cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube-play-button,
.youtube-play-button:before {
  position: absolute;
}

.youtube-play-button,
.youtube-play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.videos-benefits.mobile-only {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 950px) {
  .desktop-only {
    display: none !important;
  }
}
@media only screen and (min-width: 950px) {
  .mobile-only {
    display: none !important;
  }
}
.center-container-button {
  padding: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.center-container {
  display: flex;
  flex-direction: column;
  /* Display rows vertically */
  align-items: center;
  /* Center rows horizontally */
  width: 100%;
}

.photo-row {
  display: flex;
  justify-content: space-between;
  /* Distribute space between images */
  align-items: flex-start;
  /* Align items at the start of the row */
  width: 100%;
  /* Each row occupies the full width of the container */
  margin-bottom: 2px;
  /* Add some spacing between rows */
  position: relative;
}

.original-photo-buttons {
  cursor: pointer;
  position: absolute;
  bottom: 10%;
  left: 2.5%;
}

.ai-photo-buttons {
  cursor: pointer;
  position: absolute;
  bottom: 10%;
  left: 35%;
}

.photo-row img {
  cursor: pointer;
  object-fit: cover;
  border: 2px solid #112562;
  border-radius: 10px;
  position: relative;
}

@media screen and (max-width: 960px) {
  .photo-row img {
    width: calc(50% - 10px);
    /* Set width to occupy 1/2 of the row width with margin */
  }
}
@media screen and (max-width: 640px) {
  .photo-row img {
    width: calc(100% - 10px);
    /* Set width to occupy full row width with margin */
  }
}
.modal-button {
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
  border: 1px solid #444444;
  font-size: 8px;
}

.modal-button--primary {
  border-color: #709ae0;
  background-color: #709ae0;
}

.modal-button--primary:hover {
  background-color: #444444;
  color: #709ae0;
}

.modal-button--delete {
  border-color: #F24E1E;
  background-color: #F24E1E;
  color: #FCFCFC;
}

.modal-button--delete:hover {
  background-color: #FCFCFC;
  color: #F24E1E;
}

.loader-modal-wait {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
  margin: 1rem auto 0;
}

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

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

@keyframes animloader {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
#ai_photos_div {
  display: flex;
  justify-content: center;
}

.totem-client-photo {
  background-color: #3b3b3b;
}

.simulate-photo {
  box-shadow: 1px 5px 10px #c2c0c0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  align-items: center;
  height: 300px;
}

.simulate-photo p {
  font-weight: 600;
}

.modal-view-photo .max-width {
  max-width: 900px;
}

.modal-photo .max-width {
  max-width: 900px;
}

.photo {
  position: relative;
  border-radius: 20px;
  margin: 4px;
}

.photo .main-photo {
  box-shadow: 1px 5px 10px #373636;
  border-radius: 20px;
  max-width: 100%;
  width: 100%;
  border: 4px solid #112562;
}

.photo .ai-photos-button-loader {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
}

.photo .ai-photos-button-loader p {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  color: #fff;
}

.photo .ai-photos-button-container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  margin-bottom: 1rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  align-items: flex-start;
}

.photo .ai-photos-button-container .ai-photos-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  background-color: #000;
  padding: 0.3rem;
  border-radius: 10px;
  box-shadow: 1px 7px 11px #4f4f4f;
}

#modal_photo_buttons_div {
  align-items: center;
  margin-top: 4px;
}

.modal-edit-ai-event .boxs-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-edit-ai-event .box-input {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.modal-edit-ai-event .box-input label {
  font-size: 0.875rem;
}

.modal-edit-ai-event .box-input input {
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 10px;
  transition: 0.5s;
}

.modal-edit-ai-event .box-input input:focus, .modal-edit-ai-event .box-input input:focus-visible {
  border-color: #112562;
  outline: none;
}

.modal-edit-ai-event .box-input .box-button button {
  margin-top: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: #414141;
  color: #fff;
}

.modal-edit-ai-event .buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.modal-edit-ai-event .buttons button {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.modal-edit-ai-event .buttons button:hover {
  opacity: 0.8;
}

.modal-edit-ai-event .buttons .save {
  background: #157701;
  color: #fff;
}

.modal-edit-ai-event .message-printer {
  display: none;
}

.modal-edit-ai-event .message-printer.active {
  display: flex;
}

.modal-edit-ai-event .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 27px;
}

.modal-edit-ai-event .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.modal-edit-ai-event .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.modal-edit-ai-event .switch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.modal-edit-ai-event .switch input:checked + .slider {
  background-color: green;
}

.modal-edit-ai-event .switch input:checked + .slider:before {
  transform: translateX(26px);
}

.backoffice-report-container .header-backoffice-totem {
  background: #414141;
  padding: 1.5rem 1rem 0.8rem;
}

.backoffice-report-container .header-backoffice-totem .name-event {
  color: #fff;
  font-weight: bold;
  font-size: 0.875rem;
  position: absolute;
  top: 8px;
  right: 50%;
}

.backoffice-report-container .header-backoffice-totem > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.backoffice-report-container .header-backoffice-totem #app_online_status_button,
.backoffice-report-container .header-backoffice-totem #printer_online_status_button {
  font-size: 0.75rem;
  display: none;
  color: #fff;
  padding: 0.2rem;
  border-radius: 5px;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  width: 160px;
  z-index: 1;
}

.backoffice-report-container .header-backoffice-totem #app_online_status_button.active,
.backoffice-report-container .header-backoffice-totem #printer_online_status_button.active {
  display: block;
}

.backoffice-report-container .header-backoffice-totem #printer_online_status_button {
  top: 25px;
  left: 4rem;
}

.backoffice-report-container .header-backoffice-totem button {
  font-size: 0.875rem;
}

.backoffice-report-container .header-backoffice-totem a {
  border-color: #fff;
  color: #fff;
  font-size: 0.875rem;
}

.backoffice-report-container .header-backoffice-totem .status-off-on,
.backoffice-report-container .header-backoffice-totem .views {
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 380px) {
  .backoffice-report-container .header-backoffice-totem .status-off-on,
  .backoffice-report-container .header-backoffice-totem .views {
    gap: 0.5rem;
  }
}
.backoffice-report-container .header-backoffice-totem .views a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media screen and (max-width: 380px) {
  .backoffice-report-container .header-backoffice-totem .views a {
    gap: 0.2rem;
    font-size: 0.75rem;
  }
}
.backoffice-report-container .header-backoffice-totem .status-off-on {
  position: relative;
}

.backoffice-report-container .header-backoffice-totem .status-off-on .app-online-status,
.backoffice-report-container .header-backoffice-totem .status-off-on .printer-online-status {
  color: #fff;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.backoffice-report-container .header-backoffice-totem .status-off-on .app-online-status .icon-app,
.backoffice-report-container .header-backoffice-totem .status-off-on .printer-online-status .icon-app {
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 100%;
  display: flex;
}

.backoffice-report-container .header-backoffice-totem #edit_event_button,
.backoffice-report-container .header-backoffice-totem #button_downloads,
.backoffice-report-container .header-backoffice-totem #infos_event_button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.backoffice-report-container .header-backoffice-totem .status-views {
  display: flex;
  gap: 5rem;
}

@media screen and (max-width: 600px) {
  .backoffice-report-container .header-backoffice-totem .status-views {
    gap: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .backoffice-report-container .header-backoffice-totem .status-views {
    flex-wrap: wrap;
    gap: 1rem;
  }
}
.backoffice-report-container .header-backoffice-totem .navbar-totem {
  width: 25px;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .menu {
  opacity: 0;
  visibility: hidden;
  height: 0;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .menu .links {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  justify-content: center;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .menu a {
  font-size: 2rem;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .menu.active {
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 20px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  height: 98%;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .hamburger-menu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  z-index: 99;
  position: relative;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .hamburger-menu .bar {
  width: 25px;
  height: 2px;
  background-color: #fff;
  margin: 3px 0;
  transition: 0.4s;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .hamburger-menu.active .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}

.backoffice-report-container .header-backoffice-totem .navbar-totem .hamburger-menu.active .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.modal-wait-download-all-photos .modal-content {
  text-align: center;
}

.modal-wait-download-all-photos .modal-content p {
  font-weight: 600;
}

.modal-wait-download-all-photos .modal-content .loader-spinner {
  margin: 1rem auto;
}

.modal-download-software .content-modal .modal-content {
  gap: 1rem;
  align-items: center;
}

.modal-download-software .content-modal .modal-content h1 {
  margin-bottom: 1rem;
}

.modal-download-software .content-modal .modal-content .modal-button {
  font-size: 0.875rem;
  border: 0;
  padding: 0.5rem;
}

.modal-infos-event .content-modal .modal-content .status-infos {
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
}

.modal-infos-event .content-modal .modal-content .status-infos > div p {
  font-weight: 600;
}

.modal-infos-event .content-modal .modal-content .status-infos > div p span {
  font-weight: normal;
}

.modal-infos-event .content-modal .modal-content .status-infos .date-event .new-contract {
  font-weight: normal !important;
}

.modal-infos-event .content-modal .modal-content .status-infos .date-event .new-contract a {
  color: green;
  text-decoration: underline;
}

.modal-infos-event .content-modal .modal-content .status-infos .date-event .new-contract .hours {
  color: red;
}

.modal-infos-event .content-modal .modal-content .status-infos .status-event {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-infos-event .content-modal .modal-content .status-infos .status-event .button-active-event button {
  background-color: #24b724;
  border-radius: 5px;
  padding: 0.2rem 1rem;
  color: #fff;
}

.modal-view-more a {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  color: #8c52ff;
  font-size: 1.2rem;
}

.modal-last-img-qrcode img {
  max-width: 600px;
  width: 100%;
}

.modal-terms p:first-child {
  margin-bottom: 1rem;
}

.modal-terms .signature-magipix {
  font-weight: 600;
  margin-top: 0.5rem;
}

.modal-terms .buttons {
  text-align: center;
  margin-top: 1rem;
}

.modal-terms .buttons button {
  padding: 0.5rem 1rem;
  border-radius: 5px;
  background: green;
  color: #fff;
}

.totem-img {
  width: 100%;
  height: auto;
  aspect-ratio: 100/100;
}

.modal-error-handler p, .modal-error-handler span {
  color: black;
}

.modal-error-handler p {
  line-height: 1.5;
}

#helpful-links {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: bold;
}

#helpful-links a {
  color: #709ae0 !important;
}

/* Container do dropdown */
.dropdown-language {
  position: relative;
  display: inline-block;
}

.dropdown-language .dropbtn {
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  background: #f0f0f0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #444444;
  box-shadow: 4px 4px 12px #f6f6f6;
}

.dropdown-language .dropbtn svg {
  width: 24px;
  height: 24px;
}

.dropdown-language .dropdown-content {
  display: none;
  position: absolute;
  background-color: #FCFCFC;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 0.5rem;
  padding: 1rem 1rem;
  margin-top: 0.5rem;
}

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

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

.dropdown-language .dropdown-content a:hover .dropdown-content {
  display: block;
}

.dropdown-language .dropdown-content.show {
  display: flex;
}

.dropdown-language .dropdown-content form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dropdown-language .dropdown-content form button {
  background: transparent;
  text-align: start;
}

.header-backoffice-totem .dropdown-language .dropbtn {
  box-shadow: unset;
}

#progress_bar_container {
  font-size: 0.75rem;
}

#ai_event_background_id_img,
#ai_event_frame_id_img {
  max-width: 100px;
  max-height: 100px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.frame-button-label {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: #709ae0;
  color: #fff;
  cursor: pointer;
}

.button-magipix button.js-chat-online__button {
  flex-wrap: nowrap;
}

#photo_img {
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.qrcode-buttons-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}

#user_phone_div > div {
  display: flex;
  align-items: center;
}