/* Import Fonts */
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

/* Variables */
:root {
    /* Sizes */
    --hotspot-size: 100px;
    --hotspot-size-mobile: 72px;
    --hotspot-hover-border-size: 2.5px;
    --favs-pulse-size: 50px;

    /* Colors */
    --color-hotspot-servico: #28FF52;
    --color-hotspot-equip: #212E3E;
    --color-hotspot-dica: #0CD3F8;
    --color-hotspot-servico-hover: #D4FFDD;
    --color-hotspot-equip-hover: #7C9599;
    --color-hotspot-dica-hover: #D9D9D9;
    --color-text-purple: #6D32FF;

    /* Animations */
    --pulse-max-opacity: 30%;
    --hotspot-animation-duration: 1.15s;
    --favs-pulse-animation-duration: 1.5s;
}

/* Reset na margem, padding e box-sizing em todos os elementos */
/* Garante uniformidade entre browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Centra o elemento na horizontal e na vertical dentro do elemento pai */
.centered-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.centered-absolute-horizontal {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%, -50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centered-horizontal {
    display: block;
    margin: auto;
}

.clickable {
    pointer-events: all;
    cursor: pointer;
}

:focus {
    outline: none !important;
}

/* Posiciona o element por cima do mainContainer */
/* Vamos ter várias posições. Começa no 1. */
.foreground-1 {
    z-index: 1;
}

/* Items on 2 */
/* Navbar */
/* HouseOverlay */
/* Navigation */
.foreground-2 {
    z-index: 2;
}

/* Items on 3 */
/* Modals */
/* Wizard Onboarding */
.foreground-3 {
    z-index: 3;
}

/* Items on 4 */
/* Popups */
/* Quiz Question */
/* Offboarding */
.foreground-4 {
    z-index: 4;
}

/* Items on 6 */
/* ModelViewer */
.foreground-5 {
    z-index: 5;
}

/* Contact Form */
.foreground-6 {
    z-index: 6;
}

/* Toaster */
/* Email Prompt */
.foreground-7 {
    z-index: 7;
}

/* Posiciona o element absolute a começar no bottom 0 */
.absolute-zero {
    position: absolute;
    bottom: 0;
}

/* Esconde completamente o elemento */
.display-none {
    display: none !important;
}

/* Evita que o elemento dispare eventos para o pointer (ex: detetar quando o pointer está em cima dele) */
.pointer-events-ignore {
    pointer-events: none;
}

/* Inverte uma imagem no eixo horizontal */
.flipped-horizontal {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}

.blurred-background-gradient {
    background: linear-gradient(90deg, rgba(34, 34, 34, 0.4) 0%, rgba(136, 136, 136, 0) 100%);
    backdrop-filter: blur(5px);
}

/* Esconde o elemento em mobile */
.desktop-only {
    @media (max-width: 992px) {
        display: none !important;
    }
}

/* Esconde o elemento em desktop */
.mobile-only {
    @media (min-width: 992px) {
        display: none !important;
    }
}

.text-purple {
    color: var(--color-text-purple) !important;
}

.hyperlink {
    text-decoration: underline;
    cursor: pointer;
}

.flippedY {
    transform: scaleY(-1);
    -ms-transform: scaleY(-1);
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
    width: 8px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: #E6EBEC; 
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: #A3B5B8; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #94a1a3;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Prevents an item from being selected when the cursor is dragged over it */
.user-select-none {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.mainContainer {
    width: 100%;
    height: 100%;
    position: relative;
}

.relative {
    position: relative;
    width: 100%;
    height: 100%;
}

.bottom-content {
    position: absolute;
    width: 100%;
    bottom: 0;
}

/* NAVBAR  */
.navbarContainer {
    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    position: fixed;

    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: space-between;

    padding: 12px 120px;
}

.navbarContainer-whiteMode {
    background-color: white;
    box-shadow: 4px 10px 50px 0px #2525250D;
}

.navbarContainer-whiteMode>div .virtualHouseName {
    color: black;
}

.navbarLogoDesktopDark {
    content: url("/icons/icon_edp_horizontal_logo_black.svg");
}

.navbarLogoMobileDark {
    content: url("/icons/icon_edp_vertical_logo_black.svg");
}

.navbarLogoContainer {
    display: flex;
    align-items: center;
    gap: 40px;

    padding: 8px 0px;
}

.virtualHouseName {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: white;
}

.navbarFavAndLangContainer {
    display: flex;
    align-items: center;
    gap: 24px;
}

.favContainer {
    display: flex;
    position: relative;
    cursor: pointer;
}

#svgStarFavs {
    width: 25px;
    height: 24px;
    margin: auto;
}

#favs-pulse {
    z-index: -1;

    box-sizing: border-box;
    border: 3px white solid;
    border-radius: 50%;

    /* Animation parameters */
    width: 0%;
    height: 0%;
    opacity: 0%;
    animation-name: pulseAnimationFavs;
    animation-duration: var(--favs-pulse-animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.starFavsDark {
    content: url("/icons/icon_star_fav.svg");
}

.numberFavsContainer {
    position: absolute;
    bottom: -6px;
    left: -3px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 16px;
    height: 16px;
    border-radius: 50%;

    background-color: #28FF52;
}

.numberOfFavs {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

/* WEGLOT */
.weglotContainer {
    display: flex;
    align-items: center;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;

    cursor: pointer;
}

.weglotP {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;

    color: white;
}

.svgMobile {
    display: none;
}

.weglotHr {
    margin: 8px 8px;

    border: 1px solid #BECACC
}

.removeWeglotStyle {
    width: max-content;
    height: 37px;
    padding: 0 15px 0 10px;

    display: flex;
    align-items: center;

    cursor: default;

    color: #455558;

    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
}

#weglot-listbox {
    border: none;
    padding: 0px 8px 8px;
}

#weglot-listbox li {
    font-size: 14px;
}

#weglotSwitcher {
    border: none;
    display: flex;
    justify-content: end;
}

/* NAVIGATION ARROWS */
.arrows-container-desktop {
    position: fixed;
    top: 80px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.arrows-container-compact {
    display: flex;
    justify-content: space-between;

    width: 100%;

    padding: 0 14px;

    /* Prevents the div from intercepting clicks (the arrows contained within must re-enable pointer events) */
    pointer-events: none;
}

.arrow-column {
    position: relative;
    width: 108px;
    height: 100%;
}

.gray-transparent-bg {
    background-color: hsl(0, 0%, 83%);
    opacity: 60%;
}

/* NAVIGATION TO A DIFFERENT ROOM */
.house-rooms-navigation-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 375px;
    height: 60px;
    background-color: #22222266;
}

.navigationContainer {
    position: fixed;
    bottom: 0;
    left: 0;

    pointer-events: none;
}

.navigationTitleAndButtonContainer {
    width: 375px;
    height: 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 8px 24px 8px 24px;

    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: white;

    pointer-events: auto;
}

.navigationTitleAndButtonContainerActive {
    background-color: rgba(34, 34, 34, 0.75);
}

.navigationTitle {
    /* Typogragpy */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

.navigationButtonContainer {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #28FF52;

    cursor: pointer;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.navigationButtonImgContainer {
    width: 30px;
    height: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.navigationButtonImgContainerActive img {
    content: url("/icons/arrow_up_green_15px.svg");
}

.navigationItemContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, 151px));
    justify-content: center;
    gap: 36px;
    width: 100vw;
    padding: 32px 24px;
    pointer-events: auto;
    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    visibility: visible;
    max-height: 60vh;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, visibility 0.4s ease-in-out;
    will-change: max-height, padding, visibility;
}

.navigationItemContainerActive {
    background-color: rgba(34, 34, 34, 0.75);
}

.navigationItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.navigationItemImgCont {
    width: 150px;
    height: 90px;
}

.navigationItemImgCont:hover {
    outline: 2px solid #28FF52;
    cursor: pointer;
}

.navigationItemSelected {
    outline: 2px solid #28FF52;
}

.navigationItemImgCont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navigationP {
    color: white;

    /* Tyography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.navigationBackground {
    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navigation-visibility-hidden {
    visibility: hidden;
    max-height: 0;
    padding: 0;
}

.navigation-visibility-visible {
    visibility: visible;
    max-height: 90vh;
    padding: 32px 24px;
}

/* BOTTOM ITEMS MOBILE */
.bottom-items-container {
    position: absolute;
    bottom: 62px;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.swipe-icon-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 16px;

    width: 327px;
    height: 86px;
    padding: 16px;

    background-color: rgba(34, 34, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: white;

    pointer-events: none;
}

.swipe-icon-container p {
    /* typograpghy */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

.swipe-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

.swipe-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* BOX BOTTOM */
.box-bottom {
    box-sizing: border-box;
    height: 64px;
    background-color: #22222266;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 1366px) {
        width: 100%;
    }

    @media (min-width: 1366px) {
        position: absolute;
        width: 260px;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
}

.box-bottom p {
    margin: 0;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
}

.box-bottom .room-name-text {
    color: white;
    font-size: 18px;
    font-weight: 400;
}

.planta-btn {
    box-sizing: border-box;
    width: 140px;
    height: 32px;
    padding: 0 24px;
    background-color: #28FF52;
}

.planta-btn-text {
    color: #222222;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    font-weight: 600;
}

.wizard-mockup {
    box-sizing: border-box;
    position: absolute;
    top: 20px;
    right: 130px;
    padding: 20px;
    min-width: 250px;
    max-width: 250px;
    width: fit-content;
    height: fit-content;
    text-align: justify;
    background-color: #22222266;
}

.wizard-mockup p {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: white;
    margin: 0;
}

/* OVERLAY  */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* HOUSE */
.houseContainer {
    font-size: 0; /* Removes the white space between rooms */
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: scroll;

    position: relative;
    width: 100%;

    overscroll-behavior: none;
}

.divisionsWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0;
    overflow: scroll;
}

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

.house-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #222222B2;
}

.divisaoContainer {
    position: relative;
    display: inline-block;

    vertical-align: bottom;
    font-size: 0;

    width: 100%;
}

.img-house {
    width: 100%;

    /* These two properties are meant to control the scrolling behaviour in devices which screen is not
    wide enough to show the entire room. Since, in these particular cases, the user has to scroll through
    the room using the mouse (this does not apply to mobile), some default browser features might interfeer.
    Therefore, we remove pointer events (so it is not possbile do drag the image around) and also disable
    user select, so the user does not accidentally highlight the image as it was a text element. */
    pointer-events: none;
}

/* HOTSPOT STYLES */
#hs1 {
    position: absolute;
    top: 50%;
    left: 50%;
}

#hs2 {
    position: absolute;
    top: 20%;
    left: 40%;
}

#hs3 {
    position: absolute;
    top: 80%;
    left: 80%;
}

.hotspots-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hotspot {
    position: absolute;
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    pointer-events: none; /* Avoids that the rings obstructs clicks over other elements */

    /* Aqui centra-se o pivot do hotspot para que a sua localização seja demarcada a partir do centro */
    /* Isto serve para garantir que exite uniformidade no posicionamento
    do hospot mesmo quando há variações de tamanho */
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.hs-ring {
    box-sizing: border-box;
    border-radius: 50%;
    border-style: solid;
    border-width: 15px;

    /* Animation parameters */
    width: 0%;
    height: 0%;
    opacity: 0%;
    animation-name: pulseAnimationHotspot;
    animation-duration: var(--hotspot-animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.hs-circle {
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    border-radius: 50%;
}

.hs-circle:hover {
    border-style: solid;
    border-width: var(--hotspot-hover-border-size);
}

.hotspot-servico .hs-circle {
    background-color: var(--color-hotspot-servico);
}

.hotspot-servico .hs-circle:hover {
    border-color: var(--color-hotspot-servico-hover);
}

.hotspot-servico .hs-ring {
    border-color: var(--color-hotspot-servico);
}

.hotspot-equipamento .hs-circle {
    background-color: var(--color-hotspot-equip);
}

.hotspot-equipamento .hs-circle:hover {
    border-color: var(--color-hotspot-equip-hover);
}

.hotspot-equipamento .hs-ring {
    border-color: var(--color-hotspot-equip);
}

.hotspot-dica .hs-circle {
    background-color: var(--color-hotspot-dica);
}

.hotspot-dica .hs-circle:hover {
    border-color: var(--color-hotspot-dica-hover);
}

.hotspot-dica .hs-ring {
    border-color: var(--color-hotspot-dica);
}

/* ANIMATIONS */
@keyframes pulseAnimationHotspot {
    70% {
        opacity: var(--pulse-max-opacity)
    }

    85% {
        width: 100%;
        height: 100%;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 0%;
    }
}

@keyframes pulseAnimationFavs {
    70% {
        opacity: 30%;
    }

    85% {
        width: var(--favs-pulse-size);
        height: var(--favs-pulse-size);
    }

    100% {
        width: var(--favs-pulse-size);
        height: var(--favs-pulse-size);
        opacity: 0%;
    }
}

/* CONTACT FORM */
.contact-form-modal {
    background-color: #F1F4F4;
    height: 100vh;
    overflow: auto;
}

.contact-form-frame {
    margin: 40px 0;
    padding-inline: 40px;
}

.contact-form-frame .close-icon {
    margin-left: auto;
    margin-bottom: 4px;
    display: block;
    width: 18px;
    height: 18px;
}

.contact-form-content {
    margin: auto;
    width: 600px;
    padding-inline: 28px;
}

.contact-form-title {
    width: 100%;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    text-align: center;
    font-weight: 400;
    font-size: 26px;
    color: #222222;
    margin-bottom: 25px;
}

.contact-form-wrapper {
    margin-bottom: 40px;
}

.contact-form-text {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
    margin-bottom: 16px;
}

.input-field-container {
    margin-bottom: 10px;
}

.input-field-container label {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #455558;
    line-height: 19.2px;
}

.input-field-container input {
    width: 100%;
    padding: 10px;
    margin: 8px 0 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #455558;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.input-field-container .info-icon {
    width: 19.2px;
    height: 19.2px;
    vertical-align: middle;
}

.input-field-container .mandatory-field-alert-container {
    display: none;
}

.input-field-alert-enabled .mandatory-field-alert-container {
    display: block;
}

.input-field-alert-enabled input {
    border-bottom: 2px solid #E32C2C;
}

.mandatory-field-alert-container {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #E32C2C;
    line-height: 14px;
    padding-left: 4px;
    margin-bottom: 25px;
}

.mandatory-field-alert-container img {
    width: 14px;
    height: 14px;
    vertical-align: bottom;
    margin-right: 8px;
}

.contact-form-fields input:focus {
    outline: none;
}

.contact-form-fields input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contact-form-fields input[type=number] {
    -moz-appearance: textfield;
}

.form-small-text {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #455558;
    margin-bottom: 16px;
}

.input-field-container span {
    position: relative;
    margin-left: 5px;
}

#cpe-tooltip {
    width: 272px;
    padding: 16px 16px 32px 16px;
    border-radius: 20px;
    background-color: #F1F4F4;
    box-shadow: 4px 4px 22px 0px #2525250D;

    /* Position */
    position: absolute;
    bottom: 170%;
    left: -133px;
}

#cpe-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6.5px;
    border-width: 13px;
    border-style: solid;
    border-color: #F1F4F4 transparent transparent transparent;
}

#cpe-tooltip .close-icon {
    width: 17px;
    height: 17px;
    margin-bottom: 16px;
}

#cpe-tooltip p {
    color: #222222;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
}

/* BUTTONS */
.button-validation-big {
    min-width: 168px;
    padding: 13px 24px;
    background-color: #212E3E;
    border: 2px solid #212E3E;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 500;
    color: #28FF52;
    font-size: 20px;
    cursor: pointer;
}

.button-validation-big:disabled,
.button-validation.big[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* BACKGROUNDS */
.faded-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #222222B2;
}

/* Weglot */
.weglot-aside-custom {
    background-color: transparent !important;
}

.weglot-aside-custom>div>a {
    color: white !important;
}

.wg-drop.country-selector .wgcurrent a {
    padding-right: 30px !important;
}

.wg-drop.country-selector .wgcurrent.biggerWidth a {
    color: #212E3E !important;
    font-weight: 700 !important;
}

#weglot-listbox .wg-li a {
    color: #212E3E !important;
    font-weight: 500 !important;
}

.wg-drop.weglot-aside-custom .wgcurrent::after {
    background-image: url("/icons/arrow_weglot.svg") !important;
    transform: rotate(0deg) !important;
}

.wg-drop.country-selector.open .wgcurrent:after {
    transform: rotate(-180deg) !important;
}

.navbarContainer-whiteMode .weglot-aside-custom>div>a {
    color: black !important;
}

.navbarContainer-whiteMode .wg-drop.weglot-aside-custom .wgcurrent::after {
    background-image: url("/icons/arrow_weglot_black.svg") !important;
}

.country-selector a {
    color: #455558 !important;
}

.country-selector #weglotCurrenLang {
    color: #212E3E !important;
    font-weight: 700 !important;
}


/* MEDIA QUERIES */
/* max-width: 600px applies to mobile */
/* max-width: 1366px applies to tablets */
/*
This is an exclusive media query that predicts the minimum width where the room image finally fills the entire
window. This avoids a white space at the bottom of the image when the screen is not wide enough to fit it entirely,
therefore here mimicking the default mobile view (scrollable).
IMPORTANT: In case something seems inconsistent, the classes defined within this media query should me moved to the
next one (max-width: 1366px) instead, so they are applied to tablet/mobile screens only.
*/

@media only screen and (orientation: portrait) {
    .houseContainer {
        overflow-x: auto;
        width: 100%;
        max-height: 100dvh;
        max-width: fit-content;
        overflow-y: clip;
    }

    .divisaoContainer {
        width: auto;
    }

    .divisaoContainer>img {
        width: auto;
        height: 100vh;
        object-fit: contain;
    }
}

@media only screen and (orientation: landscape) {
    .houseContainer {
        overflow-x: auto;
        width: 100%;
        height: 100%;
    }

    .divisaoContainer>img {
        object-fit: contain;
    }
}

@media only screen and (orientation: landscape) and (max-width: 1400px) {
    .houseContainer {
        height: 100%;
        max-height: none;
    }

    .divisaoContainer {
        width: auto;
    }
}

@media only screen and (max-width: 1366px) {
    /* CONTACT FORM */
    #cpe-tooltip {
        left: -208px;
    }

    #cpe-tooltip::after {
        left: 78%;
    }
}

@media screen and (max-aspect-ratio: 16/9) {
    .img-house {
        width: auto;
        height: 100vh;
    }
}

@media only screen and (max-width: 992px) {
    /* NAVBAR / HEADER */
    .navbarContainer {
        padding: 12px 18px;
        height: 64px;
    }

    .navbarLogoContainer {
        gap: 16px;
    }

    .svgDesktop {
        display: none;
    }

    .svgMobile {
        display: block;
    }

    /* ARROWS */
    .arrows-container-desktop {
        display: none;
    }

    /* NAVIGATION / MAP */
    .navigationContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgba(34, 34, 34, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .navigationContainerActive {
        max-height: calc(100% - 88px);
        background-color: rgba(34, 34, 34, 0.75);
    }

    .navigationTitleAndButtonContainer {
        width: 100%;

        background-color: unset;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;
    }

    .navigationItemContainer {
        width: 100%;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10px, 147px));
        grid-auto-rows: 127px;
        justify-content: center;
        gap: 24px;

        padding: 24px;

        background-color: unset;
        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;

        height: 100%;
        overflow: auto;
        max-height: 100dvh;
    }

    .navigation-visibility-hidden {
        visibility: hidden;
        max-height: 0;
        padding: 0;
    }

    .navigationItemImgCont {
        width: 100%;
    }

    /* HOTSPOTS */
    .hotspot {
        width: var(--hotspot-size-mobile);
        height: var(--hotspot-size-mobile);
    }

    .hs-ring {
        border-width: 10.8px;
    }

    /* HOTSPOT MODALS */
    .hotspot-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* CONTACT FORM */
    .contact-form-frame {
        padding-inline: 24px;
    }

    .contact-form-content {
        width: 100%;
        padding: 0;
    }
}
/* POPUPS */
.toast-content {
    position: fixed;
    padding: 16px 40px;
    bottom: 30px;
    width: 80%;
    height: 56px;
    display: flex;
    justify-content: space-between;
}

.toast-success {
    background-color: #225E66;
}

.toast-content span {
    color: white;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 700;
}

.toast-content .message-group-container {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 95%;
    overflow: hidden;
}

#toast-icon {
    width: 14px;
    height: 14px;
}

#toast-message-text {
    font-size: 16px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-content .ok-button {
    font-size: 18px;
    align-self: center;
}


/* MODALS */
.message-modal-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.message-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 32px;
    width: 90%;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    margin: auto;
}

.message-modal-container .message-modal-title {
    font-size: 30px;
    font-weight: 400;
    line-height: 40.5px;
    margin-bottom: 16px;
    color: #222222;
}

.message-modal-container .message-modal-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 32px;
    color: #222222;
}

@media only screen and (max-width: 992px) {
    .toast-content {
        top: 24px;
        padding: 16px 24px;
        height: fit-content;
        min-height: 50px;
        max-height: 130px;
        gap: 32px;
    }

    .toast-content .message-group-container {
        width: 100%;
    }

    #toast-icon {
        display: none;
    }

    #toast-message-text {
        height: 100%;
        width: 100%;
        font-size: 14px;
        text-wrap: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Utilizar esta classe para apresentar o modal para cima */
.absolute-top {
    top: 35px;
}

/* Utilizar esta classe para apresentar o modal para baixo */
.absolute-bottom {
    bottom: 35px;
}

.hotspot-modal {
    position: absolute;
    left: -140px;

    width: 18.25rem;    /* previously 292px */
    height: fit-content;

    display: flex;
    flex-direction: column;

    background-color: white;

    font-size: 12px;

    white-space: normal;
}

.hotspot-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 24px 32px 24px 32px;

    overflow-y: auto;
    overflow-x: hidden;
}

.hotspot-modal-content .close-button {
    width: 14.4px;
    height: 14.4px;
    margin-left: auto;
}

.serviceAndTipImg {
    width: 100%;
    max-height: 176px;
    object-fit: contain;
}

.tipCountdownContainer {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 8px;
    border: 0.5px solid #BECACC;

    color: #455558;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
}

.tipCountdownImgCont {
    width: 20px;
    height: 20px;
}

.tipCountdownImgCont img {
    width: 20px;
    height: 20px;
}

.hotspot-modal-tip-top {
    position: absolute;
    top: -0.65rem;
    left: 45%;
}

.hotspot-modal-tip-bottom {
    position: absolute;
    bottom: -0.70rem;
    left: 45%;
}

.hotspot-ar-button-container {
    display: flex;
    justify-content: space-between;
}

.hotspot-ar-button {
    width: 48px;
    height: 48px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;

    background-color: #212E3E;
}

.hotspot-ar-close-button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    height: fit-content;

    background-color: white;
    border: none;
}

.hotspot-image-container {
    width: 100%;
    height: 176px;
}

.hotspot-image-container>img {
    display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hotspot-gap-8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hotspot-energy-container {
    width: 43px;
    height: 18px;
}

.hotspot-voltagem-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    color: #455558;

    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.hotspot-voltagem-items {
    display: flex;
    gap: 8px;
}

.hotspot-voltage {
    display: flex;
    align-items: center;
}

.p-preco-container {
    display: flex;
    align-items: end;
}

/* Divs Interiores para Serviço e Dica  */
.modal-flex-8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Tipos de Letra para card  */
.p-tipo {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;

    color: #455558;
}

.p-nome {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.p-desc {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;

    color: #455558;
}

.p-desde {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;

    color: #6D32FF;
}

.p-preco-firstChild {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32.43px;
    text-align: left;

    color: #6D32FF;
}

.p-preco-secondChild {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    text-align: left;

    color: #6D32FF;
}

.p-juros {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;

    color: #6D32FF;
}

/* Div for locked TIP  */
.modal-locked-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;
}

.modal-locked-container-img-cont {
    width: 100px;
    height: 100px;
}

.modal-locked-container-img-cont>img {
    width: 100%;
    height: 100%;
}


/* Botão Inferior da Modal */
.bottom-button {
    width: 100%;
    height: 46px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 8px 0px 8px 0px;
    border: 0.125rem solid #212E3E;     /* previously 2px */
}

.bottom-button p {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;

    color: #212E3E;
}

#fav-button-off {
    background-color: white;
}

#fav-button-off p {
    color: #212E3E;
}

#fav-button-on {
    background-color: #212E3E;
}

#fav-button-on p {
    color: #28FF52;
}

.cloned-hotspot-modal {
    max-height: 55dvh !important;
}

@media only screen and (max-width: 992px) {
    .hotspot-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 327px;
        max-height: 90dvh !important;
    }

    .cloned-hotspot-modal {
        max-height: 45dvh !important;
    }
}

@media only screen and (max-height: 992px) {
    .cloned-hotspot-modal {
        max-height: 35dvh !important;
    }
}
.favoritesContainer {
    width: 100%;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    gap: 40px;

    /* este padding é a altura da navbar */
    /* como a navbar esta fixed, não está no flow normal do html */
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 212px;
    padding-right: 212px;

    background-color: #fcfcfc;
}

.favorites-TopTitleContainer {
    width: 100%;
    height: fit-content;

    margin-top: 40px;

    display: flex;
    position: relative;
}

.favorites-BackButtonContainer {
    display: flex;
    height: 30px;
    align-items: center;
    gap: 8px;
}

.favorites-BackButtonContainer span {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    text-align: left;

    color: #225E66;
}

.favorites-back-svg {
    width: 30px;
    height: 30px;
}

.favorites-back-svg img {
    width: 100%;
    height: 100%;
    color: #225E66;
}

.favoritos-titleAndButtonContainer {
    flex: 1;

    display: flex;
}

.favoritos-Titles {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.favoritos-first-Title {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 27.5px;
    text-align: center;

    color: #000000;
}

.favoritos-second-Title {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;

    color: #000000;
}

.favoritos-Clean-Button {
    display: flex;
    align-items: center;

    width: fit-content;
    height: 30px;

    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;

    color: #225E66;
}

.favoritos-zero-items-button {
    color: #91AFB3;
}

/* Categoria de Produtos */
.favorites-ProductsContainer {

    width: 100%;

    background-color: #f1f4f4;
    box-shadow: 4px 4px 22px 0px #0000000D;

    max-width: 1016px;
    margin: 0 auto;
}

.favorites-favItemTopCard {
    display: flex;
    justify-content: space-between;

    height: 74px;
    padding: 16px 32px 16px 32px;

    background-color: #212E3E;

    box-shadow: 4px 4px 22px 0px #0000000D;
}

.topCardLogoAndTitle {
    display: flex;
    align-items: center;
    gap: 24px;
}

.topCardLogo img {
    width: 42px;
    height: 42px;
}

.topCardTitle {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 30.8px;
    text-align: left;

    color: white;
}

.topCardArrow {
    display: flex;
    cursor: pointer;
}

.favorites-favItemDown {
    display: flex;
    flex-direction: column;
    gap: 24px;

    padding: 40px 104px;
}

.favorites-TextAndCheckContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favItemDownText {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;

    color: #222222;
}

.favItemCheckboxContainer {
    display: flex;
    gap: 8px;
}

/* Checkbox */
.favorites-checkbox {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 24px;
    height: 24px;
    border: 1px solid #455558;
    border-radius: 4px;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
}

.favorites-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);

    /* Windows High Contrast Mode */
    background-color: #455558;

    /* Create "check */
    transform-origin: bottom left;
    clip-path: polygon(87.583% 0%, 36.833% 67.111%, 12.417% 34.889%, 0% 51.333%, 24.333% 83.556%, 36.833% 100%, 49.25% 83.556%, 100% 16.444%, 87.583% 0%);
}

.favorites-checkbox:checked::before {
    transform: scale(1);
}

.favorites-checkboxLabel {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;

    color: #222222;
}

.favorites-itemsCont {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Sent Option */

.favItemSentContainer {
    display: flex;
    align-items: center;

    width: fit-content;
    height: fit-content;

    padding: 0px 8px;

    background: #225E66;

    box-shadow: 0px 6px 15px 0px #22222233;

    /* typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;

    color: #28FF52;
}

.itemSentSvgContainer {
    width: 24px;
    height: 24px;
}

/* Favorite Item */
.favorites-item {
    display: flex;
    flex-direction: column;
    gap: 24px;

    width: 100%;
    padding: 32px;

    background-color: white;
    box-shadow: 4px 4px 22px 0px #0000000D;
}

.checkboxAndTrashContainer {
    display: flex;
    justify-content: space-between;

    width: 100%;
}

.favItemContent {
    display: flex;
    gap: 24px;

    width: 100%;
}

.favItemImgAndText {
    flex: 1;

    display: flex;
    gap: 24px;
}

.favItemImg {
    width: 96px;
    height: 96px;

    min-width: 96px;
    min-height: 96px;
}

.favItemImg>img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.favItemCertAndText {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favItemCert {
    width: 44px;
    height: 18px;
}

.favItemCert>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favItemText {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.p-desc-fav {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;

    color: #455558;
}

.favItemPrice {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 16px;

    min-width: 236px;
}

.favItemPriceForService {
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 16px;
}

.favItemPriceDesde {
    color: #6D32FF;
}

.favItemPriceDesdeService {
    color: #6D32FF;
}

.fav-p-preco-container {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;

    width: fit-content;
}

.fav-p-desde {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.fav-p-juros {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;

    max-width: 110px;
    width: fit-content;
}

.favItemPriceBar {
    height: 90px;

    border: 1px solid #D7DFE0;

    color: #D7DFE0;
}

.favItemPriceProntoPagamento {
    width: 109px;
    height: 100px;
}

.favorites-buttonContainer {
    display: flex;
    justify-content: end;
    align-items: center;

    width: 100%;
    height: 77px;
    gap: 16px;

    margin-top: 16px;
}

.favNumberOfProds {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;

    color: #6D32FF;
}

/* FOR SERVICES */
.content-end {
    justify-content: flex-end;
}

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

.urlButtonContainer {
    width: 100%;
    height: 46px;
}

.urlButtonRef {
    text-decoration: none;
}

.urlButton {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    background-color: white;
    border: 2px solid #212E3E;

    /* typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;

    color: #222222;

}

/* NO FAVS */
.favoritesNoFavsButtonContainer {
    display: flex;
    justify-content: center;
}

/* POPUPS DELETE FAV */
.popupDeleteOverlay {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #222222B2;
}

.popupDeleteContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 486px;
    height: fit-content;

    padding: 40px 32px 32px 32px;

    background-color: white;

    display: flex;
    flex-direction: column;
    gap: 24px;

    /* TYPOGRAPHY */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;

    color: #222222;
}

.popupCloseIconCont {
    position: absolute;
    top: 16px;
    right: 16px;
}

.popupDeleteSvgAndTitleCont {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.svgAlertContainer {
    width: 50px;
    height: 50px;
}

.svgAlertContainer>img {
    width: 100%;
    height: 100%;
}

.popupDeleteButtonsCont {
    display: flex;
    gap: 16px;
}

.popupDeleteButtonsCont button {
    flex: 1;
}

.favDeleteButton {
    border-width: 3px;
    border-color: #212E3E;
    background-color: white;
    color: #222222;
}

@media only screen and (max-width: 352px) {
    .favItemPriceBar {
       visibility: hidden;
    }
}

@media only screen and (max-width: 383px) {
    .favItemPrice {
        gap: 11px;
    }
}

@media only screen and (max-width: 992px) {
    .favorites-ProductsContainer {
        max-width: 900px;
    }

    .favoritesContainer {
        padding-top: 88px;
        padding-left: 0;
        padding-right: 0px;
        padding-bottom: 0px;
        gap: 0px;
    }

    .favorites-TopTitleContainer {
        margin-bottom: 40px;
    }

    .favorites-BackButtonContainer {
        position: absolute;
        top: 0;
        left: 14px;
    }

    .favoritos-titleAndButtonContainer {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .favorites-favItemDown {
        padding: 24px 24px 32px 24px;
        gap: 32px;
    }

    .favItemContent {
        flex-direction: column;
        gap: 24px;
    }

    .favItemImgAndText {
        flex-direction: column;
        gap: 24px;
    }

    .favorites-buttonContainer {
        flex-direction: column;
        height: fit-content;

        margin-top: 0px;
    }

    .favorites-item {
        position: relative;
    }

    .favItemServiceThrash {
        position: absolute;
        top: 32px;
        right: 32px;
    }

    .popupDeleteContainer {
        width: 324px;
        padding: 40px 24px 32px 24px;
    }

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

    .popupDeleteButtonsCont button {
        width: 203px;
    }

}

@media only screen and (max-width: 1300px) {

    .favItemContent {
        flex-direction: column;
    }

    .favItemImgAndText {
        flex-direction: column;
    }

}
#wizard-container {
    position: fixed;
    top: 100px;
    right: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.wizard-hud-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    cursor: pointer;
}

.wizard-icon {
    z-index: 1;
    width: 64px;
    height: 64px;
    display: inline-block;
}

.wizard-hud-info-container {
    position: relative;
    width: 125px;
    height: 54px;
    background-color: white;
    padding: 6px 16px;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    color: #212E3E;
    border-bottom-left-radius: 12px;
    display: inline-block;
    margin-right: -38px;
}

.wizard-badge-alert-wrapper {
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    background-color: #28FF52;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px 1px;

    animation-name: badgeAlertPulse;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.wizard-badge-alert-wrapper img {
    width: 100%;
    height: 100%;
    padding: 4px;
    margin: auto;
    display: block;
}

.wizard-hud-text-header {
    font-size: 12px;
    line-height: 18px;
}

#wizard-hud-counter-text {
    font-size: 16px;
    line-height: 24px;
}

#wizard-speech-popup {
    width: 327px;
    min-height: 80px;
    height: fit-content;
    position: relative;
    animation: speechPopupScaleUp .55s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 normal forwards;
}

#wizard-speech-popup .speech-popup-wrapper {
    width: 100%;
    min-height: 80px;
    height: fit-content;
    padding: 20px;
    background-color: white;
}

/* Speech popup tip */
#wizard-speech-popup::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 88%;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.speech-popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.speech-popup-content #close-icon {
    width: 17px;
    height: 17px;
}

.speech-popup-content #wizard-text {
    width: 247px;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #222222;
    text-wrap: wrap;
}

/* ANIMATIONS */
@keyframes speechPopupScaleUp {
	0% {
		transform: scale(0);
		transform-origin: top right;
	}

    50% {
		transform: scale(1.1);
		transform-origin: top right;
	}

    70% {
		transform: scale(0.9);
		transform-origin: top right;
	}

	100% {
		transform: scale(1);
		transform-origin: top right;
	}
}

@keyframes badgeAlertPulse {
    0% {
        width: 20px;
        height: 20px;
    }

    30% {
        width: 34px;
        height: 34px;
    }

    40% {
        width: 22px;
        height: 22px;
    }

    60% {
        width: 30px;
        height: 30px;
    }
}

/* MEDIA QUERIES */
@media (max-width: 992px) {
    .wizard-icon {
        width: 48px;
        height: 48px;
    }

    .wizard-hud-info-container {
        width: 109px;
        height: 44px;
        margin-right: -28px;
        border-top-right-radius: 12px;
    }

    #wizard-hud-counter-text {
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
    }

    #wizard-speech-popup {
        width: 279px;
    }
}

@media only screen and (max-width: 992px) {
    #wizard-container {
        right: 20px;
    }
}
.onboardingBackground {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #222222B2;
}

.onboardingContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    gap: 34px;

    width: 464px;
    height: fit-content;
    max-height: 96dvh;

    padding: 32px;

    background-color: white;

    overflow: auto;
}

/* First part of the onboarding modal -> Icon and Button */
.onboardingIconAndSkipContainer {
    display: flex;
    justify-content: space-between;

    width: 100%;
}

.onboardingIcon {
    width: 56px;
    height: 56px;
}

.onboardingIcon>img {
    width: 100%;
    height: 100%;
}

.onboardingSkipButton {
    background-color: unset;
    border: none;

    color: #225E66;

    /* typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}

/* Second part -> Content */
.onboardingContentContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onboardingContentTitle {

    color: #222222;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 40.5px;
}

.onboardingContentDesc {

    color: #222222;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-wrap: wrap;
}

.onboardingContentImgCont {
    width: 100%;
    max-height: 250px;
}

.onboardingContentImgCont>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Third part -> Input For Username */
.onboardingNameInputContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.onboardingNameInputLabel {

    color: #455558;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.onboardingNameInput {
    height: 61px;

    padding: 11.17px 22.33px 11.17px 22.33px;

    background-color: rgba(241, 244, 244, 1);

    border-top: none;
    border-right: none;
    border-bottom: 1px solid rgba(69, 85, 88, 1);
    border-left: none;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

/* Fourth part -> Step and Pages */
.onboardingStepAndPagesContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.onboardingStep {
    display: flex;

    color: rgba(69, 85, 88, 1);

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.onboardingPages {
    display: flex;
}

.onboardingPage {
    width: 42px;
    height: 42px;
}

.onboardingPage>img {
    width: 100%;
    height: 100%;
}

.highlightFavList {
    width: 45px;
    height: 45px;
    background-color: #ffffff63;

    position: fixed;
    top: 18px;
    right: 191px;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 2px;
}

.onboardingFavList {
    top: 61px;
    left: -374px;
    position: absolute;
    transform: unset;
}

.onboardingFavList:after {
    content: "";
    position: fixed;
    top: 53px;
    right: 200px;
    margin-left: -5px;
    border-width: 14px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    max-width: 0;
}

.highlightArrows {
    background-color: #ffffff4d;
    padding: 12px;
    pointer-events: none;
}

.highlightArrowsMobile {
    background-color: #ffffff4d;
    pointer-events: none;
}

.highlightHouseMap {
    width: 149px;
    height: 41px;
    background-color: #ffffff63;
    position: fixed;
    bottom: 9px;
    left: 212px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: default;
}

.onboardingHouseMap {
    top: unset;
    bottom: 60px;
    left: -133px;
    position: absolute;
    transform: unset;
}

.onboardingHouseMap:after {
    content: "";
    position: fixed;
    bottom: 43px;
    left: 290px;
    margin-left: -5px;
    border-width: 14px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.highlightCurrentDivision {
    height: 41px;
    padding: 10px;

    background-color: #ffffff63;

    position: fixed;
    bottom: 10px;
    left: 14px;
    z-index: 5;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    cursor: default;

    color: white;
}

.onboardingCurrentDivision {
    top: unset;
    bottom: 60px;
    left: 0px;
    position: absolute;
    transform: unset;
}

.onboardingCurrentDivision:after {
    content: "";
    position: fixed;
    bottom: 43px;
    left: 48px;
    margin-left: -5px;
    border-width: 14px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}


/* MEDIA QUERIES */
/* max-width: 600px applies to mobile */
@media only screen and (max-width: 992px) {

    .onboardingContainer {
        width: 327px;
        gap: 24px;
    }

    .onboardingIcon {
        width: 48px;
        height: 48px;
    }

    .onboardingContentTitle {
        font-size: 24px;
        line-height: 28px;
    }

    .onboardingContentDesc {
        font-size: 16px;
        line-height: 24px;
    }

    .onboardingNameInputLabel {
        font-size: 16px;
        line-height: 24px;
    }

    .onboardingNameInput {
        height: 44px;
        padding: 8px 16px 8px 16px;
    }

    .onboardingContentImgCont>img {
        height: 117px;
    }

    /* Onboarding Highlights */

    .highlightFavList {
        top: 9px;
        right: 89px;
    }

    .onboardingFavList {
        top: 70px;
        left: -204px;
    }

    .onboardingFavList::after {
        right: 97px;
    }

    .highlightHouseMap {
        bottom: 7px;
        right: 10px;
        left: unset;
        top: unset;
        width: 158px;
        height: 46px;
    }

    .onboardingHouseMap {
        top: unset;
        left: -176px;
    }

    .onboardingHouseMap::after {
        left: 85%;
    }

    .onboardingCurrentDivision {
        top: unset;
        bottom: 56px;
    }

    .onboardingCurrentDivision::after {
        bottom: 40px;
    }


}
#offboardingEmailPrompt {
    position: fixed;
    width: 100%;
    height: 100%;
}

#offboardingContainer {
    position: absolute;
    transform: unset;
    overflow: unset;
}

.offboarding-arrow-tip-right::after {
    content: " ";
    position: absolute;
    top: 10%;
    left: 100%;
    margin-top: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

.offboarding-arrow-tip-down::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.offboarding-close-button {
    width: 17px;
    height: 17px;
}

.offboardingEmailInputLabel {
    color: #455558;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 19.54px;
    font-weight: 500;
    line-height: 29.31px;
}

#offboarding-email-send-button {
    margin: auto;
}
.wizard-progress-menu-container {
    position: absolute;
}

/* ========== CONTAINERS ========== */
.wizard-progress-menu-wrapper {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 34px;
    width: 464px;
    height: 90%;
    padding: 40px 32px 32px 32px;
    background-color: white;
}

/* ========== SECTIONS ========== */
/* HEADER */
.progress-menu-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 360px;
}

.progress-menu-wizard-icon {
    width: 64px;
    height: 64px;
}

.progress-menu-welcome-wrapper {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    flex: 1;
}

#progress-menu-welcome-title {
    font-size: 30px;
    font-weight: 400;
    line-height: 40.5px;
    color: #222222;
    width: 90%;
}

.progress-menu-welcome-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #222222;
}

#progress-menu-close-btn {
    position: absolute;
    right: 32px;
    width: 17px;
    height: 17px;
}

/* BADGES */
.progress-menu-badges-section {
    align-self: center;
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: fit-content;
    padding: 16px;
    background-color: white;
}

.badge-display-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
}

.badge-display-wrapper p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #222222;
}

.badge-display-wrapper span {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #222222;
}

.superbadge-total-counter-wrapper {
    display: flex;
    flex-direction: row;
    gap: 3px;
    width: 100%;
}

.superbadge-total-counter-wrapper div {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: #222222;
}

#badges-collection-wrapper {
    width: 204px;
    padding-left: 30px;
}

#superbadge-icon {
    width: 80px;
    height: 80px;
}

.badges-display-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.badge-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

/* OUTLINED BOX */
.outlined-box-gray-thin {
    border: 0.5px #BECACC solid;
}

.outlined-box-gray-thin:first-child {
    border-bottom: none;
}

.outlined-box-gray-thin:last-child {
    border-top: none;
}

.outlined-box-gray-thin:only-child {
    border: 0.5px #BECACC solid;
}

/* PROGRESS BARS */
.progress-menu-bars-section {
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    height: 182px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 16px;
}

.progress-menu-bars-section > p {
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    color: #222222;
}

.progress-bars-group-wrapper {
    overflow-y: auto;
}

.progress-bar-category-container {
    display: flex;
    gap: 16px;
    padding: 16px;
    height: fit-content;
    overflow-x: hidden;
}

.progress-bar-category-icon {
    width: 48px;
    height: 48px;
}

.progress-display-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-display-text-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
}

.progress-display-wrapper div {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.progress-bar-wrapper {
    width: 100%;
    height: 16px;
    background-color: #D7DFE0;
}

.progress-bar-fill {
    /* NOTE: The width of the fill will be manipulated dinamically though code */
    height: 100%;
    background-color: #53FF75;
}

.runOnboardingAgainButton {

    width: fit-content;
    cursor: pointer;
    color: #6D32FF;

    /* typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

@media (max-width: 992px) {
    .wizard-progress-menu-wrapper {
        width: 327px;
        padding: 24px;
    }

    .progress-menu-header {
        font-size: 22px;
        line-height: 30.8px;
        width: 280px;
    }

    .progress-menu-wizard-icon {
        width: 48px;
        height: 48px;
    }
    
    #progress-menu-welcome-title {
        font-size: 22px;
        line-height: 30.8px;
    }

    .progress-menu-welcome-message {
        font-size: 12px;
        line-height: 18px;
    }

    #progress-menu-close-btn {
        right: 24px;
    }

    .badge-display-wrapper p {
        font-size: 12px;
        line-height: 18px;
    }

    #superbadge-display {
        width: 96px;
    }

    #superbadge-icon {
        width: 65px;
        height: 65px;
    }

    .superbadge-total-counter-wrapper {
        flex-direction: column;
        gap: 0px;
        align-items: center;
    }

    .badge-icon {
        width: 42px;
        height: 42px;
    }

    .progress-menu-bars-section > p {
        font-size: 14px;
        line-height: 19.6px;
    }

    .progress-display-wrapper div {
        font-size: 14px;
        line-height: 19.6px;
    }

    .progress-bar-category-icon {
        width: 40px;
        height: 40px;
    }

    .progress-bar-wrapper {
        height: 8px;
    }
}
.quizQuestionBackground {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #222222B2;
}

.quizQuestionContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 464px;
    height: fit-content;
    max-height: 96dvh;
    padding: 32px;
    background-color: white;
    overflow: auto;
}

.quizTopBarAndQuestionTitleContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quizCurrentQuestionAndCloseButtonContainer {
    display: flex;
    justify-content: space-between;

    width: 100%;
}

.quizCurrentQuestionParagraph {

    color: #646D78;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.quizCloseButton {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 24px;
    height: 24px;

    background-color: white;
    border: none;
}

.quizQuestionTitle {

    color: #222222;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 35.1px;
}


/* QUIZ ANSWERS (with custom radio buttons) */
.quizOptionsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Answer container */
.quizAnswerContainer {
    display: flex;
    align-items: center;
    position: relative; /* Ensures the label stays aligned with the hidden radio button */

    width: 100%;
    min-height: 60px;
    padding: 8px 16px 8px 16px;
    border: 1px solid #90979F;

    cursor: pointer;
}

/* Radio button container (label) */
.quizAnswerContainer label {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    height: 100%;

    /* Typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #222222;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.quizAnswerButtonContainer label:before {
    height: 100%;
}

/* Hide the browser's default radio button */
.quizAnswerContainer input {
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.quizAnswerContainer .checkmark {
    display: inline-block;
    position: relative;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    border: 2px solid #455558;
    box-sizing: content-box;
    flex: none; /* Avoid shrinking */

    cursor: pointer;
}

.quizAnswerContainer[alert=true] .checkmark {
    border: 3px solid #E32C2C;
}

.quizAnswerContainer .checkmark[disabled] {
    border: 2px solid #90A5A8;
    cursor: default;
}

/* Create and style the indicator (the dot/circle - hidden when not checked) */
.quizAnswerContainer .checkmark:after {
    content: "";
    position: absolute;
    top: 50%;
   left: 50%;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #455558;

   /* Add transition for smooth animation */
   transition: transform 0.2s ease;
   transform: translate(-50%, -50%) scale(0);
}

/* Show the indicator (dot/circle) when checked */
.quizAnswerContainer input:checked ~ .checkmark:after {
    transform: translate(-50%, -50%) scale(1);
}

.quizAnswerContainer[disabled] {
    border-color: #90A5A8;
    cursor: default;
}

.quizAnswerContainer input:checked {
    accent-color: #455558;
}

.quizAnswerContainer label[disabled] {
    color: #90A5A8;
    cursor: default;
}

.quizAnswerContainer[disabled] label .checkmark {
    cursor: default;
}

/* END OF QUIZ ANSWERS SECTION */


.quizNoAnswerAlert {
    color: #E32C2C;

    /* Typograhpy */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.quizRightAnswerAlert {
    color: #225E66;

    /* Typograhpy */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.quizWrongAnswerAlert {
    color: #E32C2C;

    /* Typograhpy */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.rightColorAlert {
    background-color: #D4FFDD;
}

.quizAnswerButtonContainer {
    display: flex;
    justify-content: center;
}

.quizAnswerButton {
    min-width: 204px;
    
    padding: 14.3px 38.14px 14.3px 38.14px;
    background: #212E3E;
    outline: none;
    border: 3.18px solid #212E3E;
    color: #28FF52;
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 25.43px;
    font-weight: 500;
    line-height: 41.32px;
}

/* Prize Div */
.quizPrizeContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 464px;
    max-height: 96dvh;
    padding: 32px;
    background-color: white;
}

.quizPrizeText {
    color: #222222;

    /* typography */
    font-family: Mulish, 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

/* Quiz Failed Prompt */
.quizFailedPromptContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 464px;
    height: fit-content;
    max-height: 96dvh;
    padding: 32px;
    background-color: white;
    overflow: auto;
}

/* MEDIA QUERIES */
/* max-width: 600px applies to mobile */
@media only screen and (max-width: 992px) {
    .quizQuestionContainer {
        width: 327px;
        gap: 24px;
    }

    .quizPrizeContainer {
        width: 327px;
        gap: 24px;
    }

    .quizFailedPromptContainer {
        width: 327px;
        gap: 24px;
    }
}