/* /Components/Contacts/Contact.razor.rz.scp.css */
.contact-button[b-62ajz56zoy] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 35px;
    font-size: 13px;
    margin-bottom: 7.7px;
    gap: 4px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
}

.contact-button-cont[b-62ajz56zoy] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 100%;
    flex-grow: 1;
}

.contact-button-person[b-62ajz56zoy] {
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 55%;
    padding-top: 5px;
    padding-bottom: 5px;
}

.contact-button-icon[b-62ajz56zoy] {
    margin-left: 11.5px;
    margin-right: 8.5px;
    height: 25.5px;
    width: 25.5px;
}

.contact-button-number[b-62ajz56zoy] {
    padding-left: 5px;
    padding-right: 5px;
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 45%;
}

.contact-button-edit[b-62ajz56zoy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 10px;
    height: 100%;
}

.contact-button-edit-icon[b-62ajz56zoy] {
    height: 11.5px;
    width: 11.5px;
}

@media (max-height: 670px) {
}
@media(max-width:350px) {
    .contact-button-number[b-62ajz56zoy] {
        font-size: 11px;
    }
}
/* /Components/Contacts/ContactList.razor.rz.scp.css */
.contact-container[b-ebbyngmjom] {
    display: flex;
    flex-direction: column;
    /*height: 213px;*/
    height: 26.5vh;
    overflow: scroll;
    margin: auto;
    background-color: #232323;
    padding-top: 20px;
    color: #202020;
}

.add-contact-button[b-ebbyngmjom] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    min-height: 38px;
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 10px;
    font-size: 13px;
    color: #4D4D4D;
    margin-top: 4px;
}

.add-contact-icon[b-ebbyngmjom] {
    width: 13.7px;
    height: 13.7px;
    margin-right: 7.7px;
}
/* /Components/DraggableContainer/DraggableChild.razor.rz.scp.css */
.draggable-container[b-9hns553fdq] {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}
/* /Components/DraggableContainer/DraggablePartent.razor.rz.scp.css */
.drag-wrapper[b-247ynqd3ju] {
    position: relative;
}

.draggable-parent[b-247ynqd3ju] {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .draggable-parent[b-247ynqd3ju]::-webkit-scrollbar {
        display: none;
    }


.navigation-dots[b-247ynqd3ju] {
    position: absolute;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 3px;
    width: 100%;
}

    .navigation-dots img[b-247ynqd3ju] {
        height: 6px;
        width: 6px;
    }

.left-button[b-247ynqd3ju] {
    position: absolute;
    top: calc(50% + 1vh);
    -ms-transform: translateY(-50%);
    transform: translate(-50px, -50%);
    height: 30px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .left-button img[b-247ynqd3ju] {
        width: 22px;
        height: 22px;
        transform: translateX(50px);
    }

.right-button[b-247ynqd3ju] {
    position: absolute;
    top: calc(50% + 1vh);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .right-button img[b-247ynqd3ju] {
        width: 22px;
        height: 22px;
    }


/*RL: Can't figure out  how to do media queries to component classes from other razor pages, seems to be an issue with css isolation, will keep this here for the time being*/
@media (max-height: 670px) {
    .widget-resp[b-247ynqd3ju] {
        display: none;
    }
}
/* /Components/DualButtons.razor.rz.scp.css */
.button-container[b-sk000w9n67] {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
/* /Components/FunctionNotAvailable.razor.rz.scp.css */
.page-blocker[b-gixa22m3c4] {
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: rgba(145, 145,145, 0.27);
}

.container[b-gixa22m3c4] {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.prototype-text[b-gixa22m3c4] {
    min-height: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background-color: white;
    border-radius: 12px;
    width: 75vw;
}

.prototype-button[b-gixa22m3c4] {
    min-width: 90px;
    min-height: 28.5px;
    border: 1px solid #919191;
    border-radius: 5px;
    font-size: 11.5px;
    background-color: white;
    margin-top: 25px;
}
/* /Components/LanguageSelector.razor.rz.scp.css */
.language-container[b-eu2bg7y9x0] {
    position: relative;
}

.selected-language[b-eu2bg7y9x0] {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.language-icon[b-eu2bg7y9x0]{
    width:19px;
    height:19px;
}

.selected-language-label[b-eu2bg7y9x0] {
    margin-left: 6px;
    margin-right: 6px;
    font-size: 9px;
    text-transform: uppercase;
}

.dropdown-icon[b-eu2bg7y9x0]{

}

.language-list[b-eu2bg7y9x0] {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 170px;
    max-height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: white;
    border: 1px solid #919191;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    z-index: 11;
}

.language-button[b-eu2bg7y9x0] {
    -webkit-appearance: none;
    background-color: white;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    text-align: left;
    color: inherit;
    margin-top: 2px;
    margin-bottom: 2px;
}

.language-button-label[b-eu2bg7y9x0] {
    text-transform: uppercase;
    margin-left: 12px;
}

.page-blocker[b-eu2bg7y9x0] {
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
/* /Components/MainScreenRear/CameraImage.razor.rz.scp.css */
.button-container[b-atxqk01hld] {
    width: 78.5px;
    height: 66.5px;
    border-radius: 6px;
    background-color: #000000;
    margin-left: 18px;
}
/* /Components/MainScreenRear/ToggleImageState.razor.rz.scp.css */
.button-container[b-p940b3gpvl] {
    width: 78.5px;
    height: 66.5px;
    border-radius: 6px;
    background-color: #000000;
    margin-left: 18px;
}
/* /Components/MultiContainer/MultiChild.razor.rz.scp.css */
.draggable-container[b-l0cgnjhhfo] {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
}
/* /Components/MultiContainer/MultiParent.razor.rz.scp.css */
.drag-wrapper[b-ohyrk6n9b3] {
    position: relative;
}

.draggable-parent[b-ohyrk6n9b3] {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .draggable-parent[b-ohyrk6n9b3]::-webkit-scrollbar {
        display: none;
    }


.navigation-dots[b-ohyrk6n9b3] {
    position: absolute;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 3px;
    width: 100%;
    z-index: 1;
}

    .navigation-dots img[b-ohyrk6n9b3] {
        height: 6px;
        width: 6px;
    }

.left-button[b-ohyrk6n9b3] {
    position: absolute;
    top: calc(50% + 1vh);
    -ms-transform: translateY(-50%);
    transform: translate(-50px, -50%);
    height: 30px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .left-button img[b-ohyrk6n9b3] {
        width: 22px;
        height: 22px;
        transform: translateX(50px);
    }

.right-button[b-ohyrk6n9b3] {
    position: absolute;
    top: calc(50% + 1vh);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .right-button img[b-ohyrk6n9b3] {
        width: 22px;
        height: 22px;
    }


/*RL: Can't figure out  how to do media queries to component classes from other razor pages, seems to be an issue with css isolation, will keep this here for the time being*/
@media (max-height: 670px) {
    .widget-resp[b-ohyrk6n9b3] {
        display: none;
    }
}
/* /Components/Settings/Setting.razor.rz.scp.css */
.setting-container[b-7c4epwnazh] {
    height: 31px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.setting-text[b-7c4epwnazh] {
    font-size: 13px;
    margin-left: 26px;
}

.main-setting-text[b-7c4epwnazh] {
    font-size: 13.6px;
}

.option-container[b-7c4epwnazh] {
    border:0;
    border-radius: 10px;
    height: 31px;
    background-color: #FFFFFF;
    width: 111px;
    display: flex;
    flex-direction: row;
    align-items: center;

}

.option-disabled-container[b-7c4epwnazh] {  
    background-color: #E8E8E8;
}

.button-text[b-7c4epwnazh] {
    padding-left: 9px;
    font-size: 12px;
}

.option-text[b-7c4epwnazh] {
    padding-left: 9px;
    font-size: 12px;
}
/* /Components/Setup/Notifications/NotificationListTabs.razor.rz.scp.css */

.list-text[b-v2n9rjucho] {
    font-size: 13.6px;
    color: #919191;
}


.list-toggler[b-v2n9rjucho] {
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    height: 31px;
    margin-left: 53.33px;
    margin-top: 29px;
   
}


.list-container[b-v2n9rjucho] {
    height: 100%;
    background-color: #F7F7F7;
    flex-direction: column;
}

.selected-button[b-v2n9rjucho] {
    width: 86px;
    height: 31px;
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 3.29px;
    stroke-width: 0.63px;
    -webkit-appearance: none;
    -webkit-text-fill-color: #919191;
    font-size: 13.6px;
    outline: none;
}

.down-arrow-image[b-v2n9rjucho] {
    width: 8px;
    height: 5px;
}


.right-arrow-image[b-v2n9rjucho] {
    width: 6px;
    height: 8px;
}




.selected-mode-container[b-v2n9rjucho] {
    margin-left: 75px;
}

.arrow-container[b-v2n9rjucho] {
    margin-left: 24px;
}

.mode-button[b-v2n9rjucho] {
    width: 86px;
    height: 31px;
    background-color: white;
    -webkit-appearance: none;
    -webkit-text-fill-color: #919191;
    border-width: 0px;
    font-size: 13.6px;
    outline: none;
}
/* /Components/Setup/Notifications/NotificationModeSelector.razor.rz.scp.css */

.selected-mode[b-3e5k87vjcl] {
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    height:31px;
}

.modes-text[b-3e5k87vjcl] {
    font-size: 13.6px;
    color: #919191;
}

.mode-list[b-3e5k87vjcl] {
    flex-direction: column;
    width: 100px;
    height: 160px;
    justify-content:space-evenly;
   
}

.selected-button[b-3e5k87vjcl] {
    width: 86px;
    height: 31px;
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 3.29px;
    stroke-width: 0.63px;
    -webkit-appearance: none;
    -webkit-text-fill-color: #919191;
    font-size: 13.6px;
    outline: none;
}

.down-arrow[b-3e5k87vjcl] {
    width:8px;
    height:5px;
   
}


.selected-mode-container[b-3e5k87vjcl] {
    margin-left:75px;
}

.down-arrow-container[b-3e5k87vjcl] {
    margin-left: 24px;
}

.mode-button[b-3e5k87vjcl] {
    width: 86px;
    height: 31px;
    background-color: white;
    -webkit-appearance: none;
    -webkit-text-fill-color: #919191;
    border-width: 0px;
    font-size: 13.6px;
    outline: none;
}
/* /Components/Setup/Setup/SetupOption.razor.rz.scp.css */
.button-container[b-v6xamxhbec] {
    display: flex;
    width: 100%;
    height: 37px;
    flex-direction: row;
    align-items: center;
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    justify-content: space-between;
    -webkit-appearance: none;
    -webkit-text-fill-color: #919191;
}

.option-image[b-v6xamxhbec] {
    margin-left: 15px;
  
}

.option-text[b-v6xamxhbec] {
    font-size: 11.85px;
    margin-left: 28.22px;
  
  
}


.frontarrow-image[b-v6xamxhbec] {
    margin-right: 14px;
    width: 6.91px;
    height: 12.75px;
}
/* /Components/TimePicker.razor.rz.scp.css */
.page-blocker[b-m9f2e75jqw] {
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.picker-container[b-m9f2e75jqw] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 257px;
    max-width: 356px;
    width: 95%;
    margin: auto;
    border: 1px solid #E8E8E8;
    border-radius: 12px;
    z-index: 12;
    background-color: white;
}

.fader-top[b-m9f2e75jqw] {
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    height: 90px;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1) 50px);
    border: 1px solid white;
    border-radius: 12px;
    border-bottom: none;
}

.fader-bottom[b-m9f2e75jqw] {
    position: absolute;
    bottom: 50px;
    display: block;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1) 50px);
    border-radius: 12px;
}


.pickrs[b-m9f2e75jqw] {
    height: 80%;
    display: flex;
    margin-bottom: 8px;
    align-self: center;
    font-size: 26px;
}

.selector[b-m9f2e75jqw] {
    position: absolute;
    width: 230px;
    height: 40px;
    border: 2px solid #E8E8E8;
    border-radius: 6px;
    top: -47px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    pointer-events: none;
}

.picker[b-m9f2e75jqw] {
    height: 100%;
}

    .picker > *[b-m9f2e75jqw] {
        height: 100%;
        display: grid;
        align-items: center;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

        .picker > *[b-m9f2e75jqw]::-webkit-scrollbar {
            display: none;
        }

        .picker > * > *[b-m9f2e75jqw] {
            scroll-snap-align: center;
        }
/* /Components/TugaButton.razor.rz.scp.css */
.tuga-button[b-0vu7j9ha1n] {
    -webkit-appearance: none;
    background-color: white;
    border:0;
    border-radius: 15px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: inherit;
    text-align: center;
    min-height: 28.5px;
    text-transform: uppercase;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuga-border[b-0vu7j9ha1n] {
    border: 1px solid #919191;
}

.tuga-button-disabled[b-0vu7j9ha1n] {
    /*NOTE: This might conflict later with colored backgrounds, figure it out later*/
    opacity: 0.5;
}
/* /Components/TugaHeader.razor.rz.scp.css */
.header-container[b-ajw7prf9m4] {
    position: relative;
    /* height: 120px; */
    height: 14.8vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    background-position: center;
    background-size: cover;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 24px;
    background-color: #3F3F3F;
    background-position-y: top;
    background-position-x: center;
}

.header-contents[b-ajw7prf9m4] {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.back-button[b-ajw7prf9m4] {
    margin-left: 20px;
    height: 24.5px;
    width: 13.5px;
    margin-bottom: 4px;
}

.header-text[b-ajw7prf9m4] {
    margin-left: 23px;
}
/* /Pages/AddPartyPage/AddPartyPage.razor.rz.scp.css */
.page-container[b-nun49k5b2e] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

.invisible[b-nun49k5b2e] {
    display: none;
}

#border-wall[b-nun49k5b2e] {
    border-radius: 10px;
    margin-top: 18vh;
    position: relative;
}

img[b-nun49k5b2e] {
    margin: 0 auto;
}

.map[b-nun49k5b2e] {
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    height: 411px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* Tab */

.tab[b-nun49k5b2e] {
    display: table-cell;
    width: 33.98vw;
    vertical-align: middle;
    background-color: #232323;
    text-align: center;
    font-size: 11px;
    height: 44px;
    color: #EFEFEF !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.active[b-nun49k5b2e] {
    background-color: #F7F7F7;
    color: #202020 !important;
}

.over[b-nun49k5b2e] {
    margin: 23px 20px;
    overflow-y: auto;
    height: calc(100% - 145px);
}

/* Populate */

.pic-frame-small[b-nun49k5b2e] {
    margin: 0.5px;
    width: 42.9px;
    height: 42.9px;
}

.frame[b-nun49k5b2e] {
    position: relative;
    border-radius: 50%;
}

#frame-1[b-nun49k5b2e] {
    width: 101.61px;
    height: 101.61px;
}

#frame-2[b-nun49k5b2e] {
    width: 46.24px;
    height: 46.24px;
}

.pop[b-nun49k5b2e] {
    overflow: scroll;
    max-height: 325px; /* TODO: check better method */
}

.pop-container[b-nun49k5b2e] {
    display: flex;
    flex-direction: row;
    height: 43.16px;
}

.pop-details[b-nun49k5b2e] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #FFF;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    border: 1px solid #7E8081;
}

.pop-profile-icon[b-nun49k5b2e] {
    height: 30.03px;
    width: 30.03px;
    margin-left: 12.3px;
    margin-right: 10.9px;
}

.pop-name[b-nun49k5b2e] {
    font-size: 13px;
    color: #202020;
}

.pop-status-button[b-nun49k5b2e] {
    position: relative;
    right: 12.2px;
    margin-left: auto;
}

.pop-frame-addons[b-nun49k5b2e] {
    width: 13.91px;
    height: 30.62px;
    display: flex;
    flex-direction: column;
}

.pop-profile-addon[b-nun49k5b2e] {
    background-color: #7E8081;
    border-radius: 50%;
    height: 13.91px;
    width: 13.91px;
    display: inline-flex;
    align-items: center;
}

.pop-button[b-nun49k5b2e] {
    width: 50.6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #7E8081;
    margin-left: 5px;
    background-color: #FFF;
    min-width: 50.6px;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.pop-button-icon[b-nun49k5b2e] {
    height: 17.41px;
    width: 17.41px;
}

.status-icon[b-nun49k5b2e] {
    border-radius: 50%;
    height: 3.84px;
    width: 3.84px;
    margin-right: 7px;
}
/* /Pages/AestheticLightsPage/AestheticLightsPage.razor.rz.scp.css */
.page-container[b-tx4ouv65fc] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-tx4ouv65fc] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.frame[b-tx4ouv65fc] {
    display: flex;
    margin: 15px 40px;
    align-items: center;
}

.text[b-tx4ouv65fc] {
    font-size: 13.6px;
    width: 110px;
    margin-right: 50px;
    text-align: center;
}

.button[b-tx4ouv65fc] {
    display: grid;
    text-align: center;
    align-items: center;
    font-size: 12px;
    width: 47.76px;
    height: 31.24px;
    border-radius: 10px;
    background-color: #FFF;
}
/* /Pages/ChargingPages/ChargingHistoryPage/ChargingHistoryPage.razor.rz.scp.css */
.page-container[b-sfbl2hlmrx] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #EFEFEF;
}

.chargers-container[b-sfbl2hlmrx] {
    overflow: scroll;
    width: 92%;
    margin: auto;
    flex-grow: 1;
    margin-top: 5.5vh;
}

.charger-container[b-sfbl2hlmrx] {
    min-height: 48px;
    display: flex;
    flex-direction: row;
    margin-bottom: 8.5px;
    flex-grow: 1;
    background-color: white;
    border-radius: 10px;
}

.charger-details[b-sfbl2hlmrx] {
    display: flex;
    flex-grow: 1;
    margin-right: 6px;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.charger-place-icon[b-sfbl2hlmrx] {
    height: 20.5px;
    width: 15.5px;
    margin-left: 15px;
    margin-right: 15px;
}

.charger-place[b-sfbl2hlmrx] {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

.charger-name[b-sfbl2hlmrx] {
    font-size: 14px;
    line-height: 14px;
}

.charger-info[b-sfbl2hlmrx] {
    font-size: 13px;
    line-height: 13px;
}

.charger-distance[b-sfbl2hlmrx] {
    font-size: 12px;
    margin-left: auto;
    margin-right: 15px;
}

.search-button[b-sfbl2hlmrx] {
    width: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #7E8081;
    border-radius: 10px;
    background-color: #FFFFFF;
}

.search-icon[b-sfbl2hlmrx] {
    height: 16.5px;
    width: 16.5px;
}
/* /Pages/ChargingPages/ChargingPage/ChargingPage.razor.rz.scp.css */
.page-container[b-7ahrsahail] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #EFEFEF;
}

.charging-hub[b-7ahrsahail] {
    display: flex;
    flex-direction: column;
    margin-top: 3vh;
    background-size: cover;
}

.charging-status[b-7ahrsahail] {
    align-self: center;
    font-size: 8px;
}

.charging-info[b-7ahrsahail] {
    margin-top: 2.5vh;
    margin-left: 10.5vw;
}

.info[b-7ahrsahail] {
    display: flex;
    flex-direction: column;
    margin-bottom: 11px;
}

.info-label[b-7ahrsahail] {
    font-size: 10.5px;
    font-size: 1.3vh;
}

.info-text[b-7ahrsahail] {
    font-size: 20px;
    font-size: 2.5vh;
    line-height: 1;
}

.charging-button[b-7ahrsahail] {
    margin: auto;
    margin-bottom: 5.5vh;
    color: #FFFFFF;
    background-color: #202020;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 31px;
    width: fit-content;
    min-width: 125px;
    font-size: 10px;
    border-radius: 20px;
}

.charging-button-int[b-7ahrsahail] {
    color: #202020;
    background: #fff !important;
    border: 1px solid #202020;
}

.bottom-button[b-7ahrsahail] {
    width: fit-content;
    margin: auto;    
    margin-bottom: 18px;
    width: 178px;
    min-height: 34px;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

    .bottom-button span[b-7ahrsahail] {
        font-size: 11px;
        height: 13px;
    }
.bottom-button-icon[b-7ahrsahail] {
    margin-left: 18px;
    margin-right: 15px;
    width: 18px;
    display: flex;
}

.button-holder[b-7ahrsahail] {
    overflow: auto;
    flex-grow: 1;
}

.bottom-button:last-child[b-7ahrsahail] {
    margin-bottom: 0px;
}

.charging-progress-container[b-7ahrsahail] {
    width: 62%;
    margin: auto;
    margin-top: calc(3.5vh + 10px);
    margin-bottom: 5.5vh;
    position: relative;
    flex-shrink: 0;
}

.charging-bar-container[b-7ahrsahail] {
    height: 18px;
    width: 100%;
    background-color: #202020;
    border-radius: 20px;
    overflow: hidden;
}

.charging-bar[b-7ahrsahail] {
    height: 100%;
    background-color: #CFD0D2;
    background-size: auto;
    background-image: url(images/vectors/charging/cpfn.svg);
}



.charging-progress-marker[b-7ahrsahail] {
    width: 33px;
    height: 28px;
    display: flex;
    justify-content: center;
    position: absolute;
    top: -30px;
    background-image: url(images/vectors/charging/cpb.svg);
}

.charging-progress-text[b-7ahrsahail] {
    font-size: 10px;
    margin-top: 2px;
}

@media (max-height: 660px) {
    .charging-progress-container[b-7ahrsahail] {
        margin-top: calc(3vh + 10px);
        margin-bottom: 4vh;
    }
    .charging-button[b-7ahrsahail] {
        margin-bottom: 4vh;
    }
}

@media (max-height: 600px) {
    .charging-progress-container[b-7ahrsahail] {
        margin-top: calc(3vh + 10px);
        margin-bottom: 3.5vh;
    }

    .charging-button[b-7ahrsahail] {
        margin-bottom: 3.5vh;
    }
}

@media (max-height: 580px) {
    .bottom-button[b-7ahrsahail] {
        margin-bottom: 10px;
    }

/*    .bottom-button {
        margin-bottom: 15px;
        margin-top: 5px;
        min-height: 28px;
        padding:0px;
    }*/
}
/* /Pages/ChargingPages/ChargingPage/Components/ChargingMode.razor.rz.scp.css */
.page-blocker[b-2nifk3sspf] {
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: rgba(32, 32, 32, 0.85);
}

.button-holder[b-2nifk3sspf] {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding-top: 50px;
    width: 215px;
    margin: auto;
    font-size:17px;
}

.charging-button[b-2nifk3sspf] {
    height: 58px;
    padding: 8px;
    border: 1px solid white;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.charging-icons-holder[b-2nifk3sspf] {
    margin-left: 25px;
    margin-right: 25px;
    display: flex;
    column-gap: 1px;
}
/* /Pages/ChargingPages/ChargingSchedulePage/ChargingSchedulePage.razor.rz.scp.css */
.page-container[b-z5l6y0w2ef] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #EFEFEF;
}

.schedule-container[b-z5l6y0w2ef] {
    width: 80%;
    margin: auto;
    margin-left: 10%;
    max-width: 245px;
/*    margin-top:55px;*/
    margin-top: 6vh;
}

.set[b-z5l6y0w2ef] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom:9px;
}

.schedule-button[b-z5l6y0w2ef] {
    -webkit-appearance: none;
    background-color: #FFFFFF;
    border: none;
    border-radius: 10px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: inherit;
    text-align: center;
    /*  height: 28.5px;*/
    height: 31px;
}
/* /Pages/ChargingPages/ChargingSessionPage/ChargingSessionPage.razor.rz.scp.css */
.page-container[b-uiynsdydbz] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-size: 11px;
    background-color: #EFEFEF;
}

.widget-container[b-uiynsdydbz] {
    position: relative;
    height: 25vh;
    width: 92%;
    margin: auto;
    margin-top: 4vh;
    margin-bottom: 0px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
}

.widget-img[b-uiynsdydbz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-arrow-container[b-uiynsdydbz] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    top: calc(50% - 25px);
    right: 0px;
    height: 50px;
    width: 50px;
}

    .right-arrow-container img[b-uiynsdydbz] {
        margin-right: 8px;
        height: 13px;
    }


.location-date-container[b-uiynsdydbz] {
    width: 86%;
    margin: auto;
    margin-top: 3.3vh;
    margin-bottom: 0px;
}

.location[b-uiynsdydbz] {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    flex-grow: 1;
    font-size: 12px;
    min-height: 48.5px;
}

.date[b-uiynsdydbz] {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    flex-grow: 1;
    font-size: 12px;
    min-height: 48.5px;
}

.location-container[b-uiynsdydbz] {
    display: flex;
}

.location-label[b-uiynsdydbz] {
    display: flex;
    flex-shrink: 0;
    width: 80px;
    margin-right: 10px;
    font-size:13.5px;
}

    .location-label img[b-uiynsdydbz] {
        height: 12px;
        width: 9.5px;
        margin-right: 4.5px;
    }

.date-container[b-uiynsdydbz] {
    margin-top: 3.1vh;
    display: flex;
}

.date-label[b-uiynsdydbz] {
    display:flex;
    flex-shrink: 0;
    width: 80px;
    margin-right: 10px;
}

    .date-label img[b-uiynsdydbz] {
        width: 10px;
        height: 9.5px;
        margin-right: 4.5px;
    }

.charging-stats-row[b-uiynsdydbz] {
    display: flex;
    justify-content: space-between;
}

.charging-stats-container[b-uiynsdydbz] {
    width: 86%;
    margin: auto;
    margin-bottom: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
    align-content: flex-start;
    overflow: scroll;
    margin-top: 3.4vh;
    column-gap: 10px;
}
/* /Pages/ChargingPages/ChargingSessionPage/Components/ChargingStats.razor.rz.scp.css */
.charging-stats[b-68cl44rth6] {
    flex: 1 0 40%;
    display: flex;
    flex-direction: column;
    margin-bottom: 3vh;
}
/* /Pages/ChargingPages/NearbyChagersPage/NearbyChargersPage.razor.rz.scp.css */
.page-container[b-xqjayt5ji3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #EFEFEF;
}

.chargers-container[b-xqjayt5ji3] {
    overflow: scroll;
    width: 92%;
    margin: auto;
    margin-top: 5.5vh;
}

.charger-container[b-xqjayt5ji3] {
    min-height: 48px;
    display: flex;
    flex-direction: row;
    margin-bottom: 8.5px;
    flex-grow: 1;
    background-color: white;
    border-radius: 10px;
}

.charger-details[b-xqjayt5ji3] {
    display: flex;
    flex-grow: 1;
    margin-right: 6px;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.charger-place-icon[b-xqjayt5ji3] {
    height: 19px;
    width: 15.5px;
    margin-left: 15px;
    margin-right: 15px;
}

.charger-place[b-xqjayt5ji3] {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}

.charger-name[b-xqjayt5ji3] {
    font-size: 14px;
    line-height: 14px;
}

.charger-adress[b-xqjayt5ji3] {
    font-size: 13px;
    line-height: 13px;
}

.charger-distance[b-xqjayt5ji3] {
    font-size: 12px;
    margin-left: auto;
    margin-right: 15px;
}

.charger-button[b-xqjayt5ji3] {
    width: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #7E8081;
    border-radius: 10px;
    background-color: #FFFFFF;
}

.charger-icon[b-xqjayt5ji3] {
    height: 19px;
    width: 11.5px;
}
/* /Pages/ConnectDevicesPage/ConnectDevices.razor.rz.scp.css */
.page-container[b-zdepect2hp] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.logo-container[b-zdepect2hp] {
    width: fit-content;
    margin: auto;
    /*margin-top: 87.5px;*/
    margin-top: 11vh;
}

.title[b-zdepect2hp] {
    text-align: center;
    margin-top: 9.8vh;
    font-size: 28px;
    color: #E6E6E6;
}

.instruction[b-zdepect2hp] {
    font-size: 15px;
    line-height: 19px;
    margin: auto;
    margin-top: 23px;
    text-align: center;
    max-width:320px;
    width: 90%;
    color: #A8A8A8;
}

.device-container[b-zdepect2hp] {
    width: 100%;
    display: flex;
    flex-direction: column;
    /*height: 215px;*/
    height: 26.5vh;
    overflow: scroll;
    background-color: #232323;
    padding-top: 18px;
    padding-bottom: 18px;
}

.device[b-zdepect2hp] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 38px;
    margin-bottom: 8px;
    flex-shrink: 0;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7;
    border-radius: 10px;
}

.device-icon[b-zdepect2hp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27.53px;
    height: 21.14px;
    margin-left: 12px;
    margin-right: 20px;
}

.device-label[b-zdepect2hp] {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-right: 4px;
    height: 100%;
}

.status-label[b-zdepect2hp] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7E8081;
    text-align: center;
    border-radius: 10px;
    width: 116px;
    height: 100%;
}

hr[b-zdepect2hp] {
    margin: 0;
    height: 1px;
    width: 100%;
}

.divider-top[b-zdepect2hp] {
  /*  margin-top: 40px;*/
    margin-top: 4.5vh;
}

.divider-bottom[b-zdepect2hp] {
    margin-bottom: 44px;
    margin-bottom: 5.5vh;
}

.copyright[b-zdepect2hp] {
    position: absolute;
    bottom: 50px;
    font-size: 7px;
    left: 50%;
    transform: translate(-50%, 0);
    color: #D8D8D8;
}

/*Responsive section*/

@media (max-height: 760px) {
    .copyright[b-zdepect2hp] {
        bottom: 40px;
    }

    .responsive-contact-container[b-zdepect2hp] {
        height: 24vh;
    }
}


@media (max-height: 720px) {
    .logo-container[b-zdepect2hp] {
        margin-top: 9vh;
    }

    .title[b-zdepect2hp] {
        margin-top: 9vh;
    }

    .copyright[b-zdepect2hp] {
        bottom: 30px;
    }

    .responsive-contact-container[b-zdepect2hp] {
        height: 20vh;
    }
}

@media (max-height: 680px) {
    .logo-container[b-zdepect2hp] {
        margin-top: 8vh;
    }

    .title[b-zdepect2hp] {
        margin-top: 8vh;
    }

    .copyright[b-zdepect2hp] {
        bottom: 20px;
    }
    .responsive-contact-container[b-zdepect2hp] {
        height: 18vh;
    }
}

@media (max-height: 640px) {
    .logo-container[b-zdepect2hp] {
        margin-top: 7vh;
    }

    .title[b-zdepect2hp] {
        margin-top: 7vh;
    }

    .copyright[b-zdepect2hp] {
        bottom: 15px;
    }
    .responsive-contact-container[b-zdepect2hp] {
        height: 16vh;
    }
}

@media (max-height: 600px) {
    .logo-container[b-zdepect2hp] {
        margin-top: 6vh;
    }

    .title[b-zdepect2hp] {
        margin-top: 6vh;
    }
    .responsive-contact-container[b-zdepect2hp] {
        height: 14vh;
    }
}

@media (max-height: 560px) {
    .logo-container[b-zdepect2hp] {
        margin-top: 4vh;
    }

    .title[b-zdepect2hp] {
        margin-top: 4vh;
    }

    .copyright[b-zdepect2hp] {
        bottom: 10px;
    }
    .responsive-contact-container[b-zdepect2hp] {
        height: 12vh;
    }
}

@media (max-height: 520px) {
    .copyright[b-zdepect2hp] {
        position: relative;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .responsive-contact-container[b-zdepect2hp] {
        height: 10vh;
    }
}
/* /Pages/DisplayThemesPage/DisplayThemesPage.razor.rz.scp.css */
.page-container[b-db2seij9q2] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-db2seij9q2] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.btn-i[b-db2seij9q2] {
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    height: 38px;
    margin: 15px 29.5px;
    display: flex;
    align-items: center;
}

.btn-span[b-db2seij9q2] {
    margin-left: 36.8px;
    font-size: 13px;
}

.btn-arrow[b-db2seij9q2] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid #7E8081;
    border-radius: 10px;
    width: 43.31px;
    height: 38px;
    position: absolute;
    right: 0px;
}

.arrow-btn[b-db2seij9q2] {
    height: 12.17px;
    width: 12.17px;
}
/* /Pages/EnvDataSharePage/EnvDataSharePage.razor.rz.scp.css */
.page-container[b-qbkc2i8y3i] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-qbkc2i8y3i] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}


/* Utils */

.center[b-qbkc2i8y3i] {
    display: block;
    margin: 30px auto;
    width: auto;
}

.invisible[b-qbkc2i8y3i] {
    display: none;
}

.frame[b-qbkc2i8y3i] {
    display: flex;
    align-items: center;
    margin-left: 39.2px; 
    font-size: 11px;
}

.btn-i[b-qbkc2i8y3i] {
    width: 48.76px;
    height: 31.24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    margin-left: 33.1px;
}
/* /Pages/FriendPage/FriendPage.razor.rz.scp.css */
.page-container[b-w6ci5txn5m] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.page-bg[b-w6ci5txn5m] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url(/images/pngs/main-page-background-x1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    z-index: 0;
}

/* Utils */
img[b-w6ci5txn5m] {
    margin: 0 auto;
}

.center[b-w6ci5txn5m] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.invisible[b-w6ci5txn5m] {
    display: none;
}

.border-i[b-w6ci5txn5m] {
    border: 1px solid #7E8081;
}


/* Buttons */

#button-logout[b-w6ci5txn5m] {
    display: inline-block;
    position: relative;
    left: 87%;
    width: 13.4px;
    height: 14.46px;
}

.status-button[b-w6ci5txn5m] {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 5.7px;
    font-size: 8.33px;
    width: 50px;
    height: 11px;
}

.status-icon[b-w6ci5txn5m] {
    border-radius: 50%;
    height: 3.84px;
    width: 3.84px;
    margin-right: 7px;
}

/* Containers */

.state-selector-container[b-w6ci5txn5m] {
    width: fit-content;
    margin: auto;
}

/* Picture */

.picture-parent[b-w6ci5txn5m] {
    position: relative;
}

.frame[b-w6ci5txn5m] {
    position: relative;
    border-radius: 50%;
}

#frame-1[b-w6ci5txn5m] {
    width: 101.61px;
    height: 101.61px;
}

#frame-2[b-w6ci5txn5m] {
    width: 46.24px;
    height: 46.24px;
}

.pic-frame[b-w6ci5txn5m] {
    margin: 3px;
    width: 94.25px;
    height: 94.25px;
}

.pic-frame-small[b-w6ci5txn5m] {
    margin: 0.5px;
    width: 42.9px;
    height: 42.9px;
}

.edit[b-w6ci5txn5m] {
    position: absolute;
}

.edit-icon[b-w6ci5txn5m] {
    width: 9px;
    height: 9px;
}

#edit-1[b-w6ci5txn5m] {
    right: -10px;
    top: 0px;
}

#edit-2[b-w6ci5txn5m] {
    right: -30px;
    top: 0px;
}

.profile-addon[b-w6ci5txn5m] {
    background-color: #7E8081;
    border-radius: 50%;
    height: 13.91px;
    width: 13.91px;
    display: inline-flex;
    align-items: center;
}

/* Text */

.status-text[b-w6ci5txn5m] {
}

.description-form[b-w6ci5txn5m] {
    position: relative;
    height: 55px;
    width: 288px;
    margin-top: 9.3px;
    margin-bottom: 39.6px;
}

#description-text[b-w6ci5txn5m] {
    display: block;
    text-align: left;
    font-size: 10px;
    margin: 0;
}

/* Tab */

.tab[b-w6ci5txn5m] {
    display: table-cell;
    width: 25vw;
    vertical-align: middle;
    background-color: #232323;
    text-align: center;
    font-size: 11px;
    min-width: 90px;
    height: 44px;
    color: #EFEFEF;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.active[b-w6ci5txn5m] {
    background-color: #EFEFEF;
    color: #202020;
}

/* General */

.general[b-w6ci5txn5m] {
    display: inline-block;
    margin: 15px 0;
    font-size: 13.6px;
    width: 95px;
}

.reg[b-w6ci5txn5m] {
    margin-left: 26px;
    font-size: 13px;
}

/* Achievement */

.pic-frame-achv[b-w6ci5txn5m] {
    margin: 0px;
    width: 76.08px;
    height: 76.08px;
}

#achv-icon[b-w6ci5txn5m] {
    height: 27.82px;
    width: 27.82px;
}

#progress-bar-frame[b-w6ci5txn5m] {
    border: 1px solid #7E8081;
    height: 4px;
    border-radius: 10px;
}

#progress-bar[b-w6ci5txn5m] {
    height: 3.26px;
    background-color: #7E8081;
    border-radius: 10px;
}

.frame-achv-icon[b-w6ci5txn5m] {
    border-radius: 50%;
    height: 42.82px;
    width: 42.82px;
    display: flex;
    align-items: center;
}

.pop-details[b-w6ci5txn5m] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #FFF;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}
/* /Pages/LiveFeedPage/LiveFeedPage.razor.rz.scp.css */
.page-container[b-516brrz726] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

.page-body[b-516brrz726] {
    background-color: #EFEFEF;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Utils */

hr[b-516brrz726] {
    width: inherit;
    margin: 0;
}

.center[b-516brrz726] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.invisible[b-516brrz726] {
    display: none;
}

.border[b-516brrz726] {
    border-style: solid;
    border-width: thin;
    border-color: #cecece;
}

/* Text */
#text-1[b-516brrz726] {
    font-size: 10px;
    position: relative;
    padding: 9px 64px;
    margin: 0 auto;
    width: 175px;
}

#text-2[b-516brrz726] {
    font-size: 12px;
    position: relative;
    padding: 9px 10px;
    margin: 25px auto;
    width: 175px;
}

/* Image */

#frame[b-516brrz726] {
    position: relative;
    min-width: 367px;
    min-height: 200px;
    height: calc(100vh - 565.7px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#frame-2[b-516brrz726] {
    background-color: #7E8081;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 21.8px;
    min-width: 367px;
}

.icon[b-516brrz726] {
    position: absolute;
    z-index: 2;
}

#icon-1[b-516brrz726] {
    right: 10px;
    top: 10px;
}

#icon-2[b-516brrz726] {
}

#icon-3[b-516brrz726] {
    border-top: 1px solid #FFF;
    width: calc(100% - 66px);
    left: 33.7px;
}

#icon-4[b-516brrz726] {
    width: 4.03px;
    height: 4.03px;
    background-color: #FFF;
    border-radius: 50%;
    right: 31.7px;
    bottom: 8.9px;
}

#icon-5[b-516brrz726] {
    left: 10.6px;
}

#icon-6[b-516brrz726] {
    right: 11.8px;
}

/* Btn */

.tab[b-516brrz726] {
    display: inline-flex;
    align-items: center;
    background-color: #F7F7F7;
    font-size: 13px;
    width: 149.81px;
    height: 38px;
    border-radius: 10px;
    margin: 4.15px;
}

.active[b-516brrz726] {
    background-color: #FFF;
    font-weight: bold;
}

.arrow[b-516brrz726] {
    height: 25px;
    width: 25px;
    margin-right: 15px;
    margin-left: 25px;
}
/* /Pages/MainPage/MainPage.razor.rz.scp.css */
.page-container[b-sc9tkar2uz] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.page-blocker[b-sc9tkar2uz] {
    z-index: 10;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.40);
}

.page-bg[b-sc9tkar2uz] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url(/images/pngs/main-page-background-x1.png);
    background-size: inherit;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    z-index: 0;
}

.header[b-sc9tkar2uz] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 14.8vh;
    padding-top: 10px;
    z-index: 0;
}

.hub-container[b-sc9tkar2uz] {
    position: relative;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    width: 102vw;
    margin-left: -1vw;
    border-top-left-radius: 200px 70px;
    border-top-right-radius: 200px 70px;
    background-color: #F9F9F9;
}

.hub[b-sc9tkar2uz] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    pointer-events: none
}

.hub-contents[b-sc9tkar2uz] {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.hub-image-1[b-sc9tkar2uz] {
    background: url(images/pngs/tuga-vehicle-render-cliped-x1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    flex-grow: 1;
    margin-top: 10px;
}

.hub-image-2[b-sc9tkar2uz] {
    background: url(images/pngs/tuga-vehicle-render-canopy-open-x1-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    flex-grow: 1;
    margin-top: 10px;
}

.hub-image-3[b-sc9tkar2uz] {
    background: url(images/pngs/tuga-vehicle-console-x1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    flex-grow: 1;
    margin-top: 10px;
}

.hub-connection-status[b-sc9tkar2uz] {
    margin-top: 10px;
    text-align: center;
    font-size: 7px;
    text-transform: uppercase;
}

.hub-information[b-sc9tkar2uz] {
    font-size: 11px;
    row-gap: 10px;
    display: flex;
    flex-direction: column;
}

.hub-km[b-sc9tkar2uz] {
    margin-top: 3.5vh;
    margin-bottom: 3vh;
    width: 47px;
    height: 47px;
}

    .hub-km img[b-sc9tkar2uz] {
        width: 100%;
        height: 100%;
    }

.hub-buttons-container[b-sc9tkar2uz] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow-x: scroll;
    margin: auto;
    margin-bottom: 20px;
    gap: 5px;
    width: 94%;
    position: relative;
    z-index: 1;
}

.hub-button-int[b-sc9tkar2uz] {
    color: #202020;
    background: #fff !important;
    border: 1px solid #202020;
}

.hub-button[b-sc9tkar2uz] {
    min-width: 80px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #202020;
    border-radius: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 10px;
}

    .hub-button img[b-sc9tkar2uz] {
        margin-right: 10px;
        margin-left: 12px;
        max-width: 14.5px;
        max-height: 12px;
    }

.hub-left-button[b-sc9tkar2uz] {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.hub-right-button[b-sc9tkar2uz] {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 6%;
}

.navigation-dots[b-sc9tkar2uz] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 8px;
    /*gap: 3px;*/
}

.navigation-dots img[b-sc9tkar2uz]{
    margin-right: 3px;
}

.widget-buttons-container[b-sc9tkar2uz] {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    z-index:1;
}

.widget[b-sc9tkar2uz] {
    height: 100%;
    width: 100%;
}

.buttons-container[b-sc9tkar2uz] {
    flex-grow: 1;
    margin-left: 8.5px;
    font-size: 11px;
    line-height: 11px;
}

.bottom-button[b-sc9tkar2uz] {
    min-height: 30px;
    height: 4.4vh;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    background-color: #EFEFEF;
    border-radius: 10px;
    font-size: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
}

    .bottom-button div[b-sc9tkar2uz] {
        display: flex;
        justify-content: center;
        width: 20px;
        margin-left: 12px;
        margin-right: 14px;
    }

.hub-left-button[b-sc9tkar2uz] {
    height: 75px;
    width: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.hub-right-button[b-sc9tkar2uz] {
    height: 75px;
    width: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hub-left-button img[b-sc9tkar2uz] {
    height: 14.5px;
    width: 8px;
}

.hub-right-button img[b-sc9tkar2uz] {
    height: 14.5px;
    width: 8px;
}

.draggable-responsive[b-sc9tkar2uz]{
    background-color:white;
}

@media (max-height: 670px) {
    .buttons-container[b-sc9tkar2uz] {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0px;
        gap: 10px;
    }

    .bottom-button[b-sc9tkar2uz] {
        min-height: 33px;
        margin: 0px;
        width: calc(50% - 5px);
    }
}

.frame[b-sc9tkar2uz] {
    position: relative;
    align-items: center;
    display: flex;
    margin: 0 2.5px;
    border-radius: 50%;
    height: 25.69px;
    width: 25.69px;
}

.frame-pic[b-sc9tkar2uz] {
    height: 23.83px;
    width: 23.83px;
}

.frame-icon[b-sc9tkar2uz] {
    height: 10.93px;
    width: 10.93px;
    position: absolute;
    bottom: -8px;
    left: 6px;
}

.main-screen-icon[b-sc9tkar2uz] {
    display: inline-flex;
    justify-content: center;
    height: 16px;
    width: 12px;
    margin-right: 5px;
}
/* /Pages/MainScreenRear/MainScreenRear.razor.rz.scp.css */
.page-container[b-hry5ias43y] {
    position: relative;
    display:flex;
    flex-direction:row;
    width: 1280px;
    height: 720px;
}

.left-screens-container[b-hry5ias43y] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.camera-container[b-hry5ias43y] {
    background-position: center;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    outline: 2px solid #848484;
}

.interface-container[b-hry5ias43y] {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
}


.sensor-container[b-hry5ias43y] {
    margin-top:99px;
    display:flex;
    width:100%;
    justify-content:space-between;

}

.sensor-image-left[b-hry5ias43y] {
    margin-left:23px;
}

.sensor-image-right[b-hry5ias43y] {
    margin-right:23px;
}




.header-container[b-hry5ias43y] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    margin-left: auto;
    margin-right: auto;
    width: 97%;
    height: 62px;
    border-radius: 6px;
    margin-top: 13px;
    background-color: #000000;
    align-items: center;
}

.footer-container[b-hry5ias43y] {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.lines-container[b-hry5ias43y] {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.lines-image1[b-hry5ias43y] {
    width: 667px;
    height: 566px;
    margin-top:auto;
}

.lines-image2[b-hry5ias43y] {
    margin-top: 93.5px;
    width: 233px;
    height: 558.5px;
}

.parking-container[b-hry5ias43y] {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-left: 25px;
    margin-bottom: 35px;
}

.parking-icon[b-hry5ias43y] {
    width: 118px;
    height: 118px;
}

.parking-arrows[b-hry5ias43y] {
    width: 168px;
    height: 346.5px;
}

.back-button[b-hry5ias43y] {
    margin-left: 16px;
    height: 24.5px;
    width: 13.5px;
   
}

.header-left[b-hry5ias43y] {
    margin-top: 8px;
}

.driving-wheel-image[b-hry5ias43y] {
    margin-left: 17px;
    margin-top: -16px;
    height: 29.5px;
    width: 29.5px;
}

.warning-image[b-hry5ias43y] {
    height: 29.5px;
    width: 33px;
    margin-bottom: 3px;
    margin-right: 23px;
}

.volume-image[b-hry5ias43y] {
    height: 26px;
    width: 33px;
    margin-right:25.5px;
    margin-top:6px;
}

.check-text[b-hry5ias43y] {
    font-family: 'Rubik-regular';
    font-weight: 600;
    font-size: 22px;
    color:white;
}

.button-container[b-hry5ias43y] {
    width: 78.5px;
    height: 66.5px;
    border-radius: 6px;
    background-color: #000000;

}


.footer-left[b-hry5ias43y] {
    margin-top: auto;
    margin-bottom: 18px;
    margin-right:8px;
}

.footer-right[b-hry5ias43y] {
    margin-top: auto;
    margin-bottom: 18px;
    margin-left: 8px;
}
/* /Pages/MainScreen/Components/MSControls.razor.rz.scp.css */
.controls-container[b-4q4g0qiocs] {
    position: relative;
    width: 1280px;
}

    .controls-container img[b-4q4g0qiocs] {
        width: 100%;
        height: 100%;
    }

    .controls-container button[b-4q4g0qiocs] {
        opacity: 0.4;
    }

        .controls-container button:active[b-4q4g0qiocs] {
            background-color: #3e8e41;
            transform: translateY(1px);
        }

.indicators[b-4q4g0qiocs] {
    position: absolute;
    top: 420px;
    left: 551px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 180px;
    margin: auto;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.driving[b-4q4g0qiocs] {
    position: absolute;
    top: 556px;
    left: 554px;
    display: flex;
    gap: 10px;
}

.atw[b-4q4g0qiocs] {
    width: 60px;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 284px;
    left: 848px;
}

.p[b-4q4g0qiocs] {
    width: 45px;
    height: 45px;
    background-color: white;
    position: absolute;
    top: 415px;
    left: 841px;
}

.r[b-4q4g0qiocs] {
    width: 40px;
    height: 40px;
    background-color: white;
    position: absolute;
    top: 477px;
    left: 852px;
}

.n[b-4q4g0qiocs] {
    width: 40px;
    height: 40px;
    background-color: white;
    position: absolute;
    top: 464px;
    left: 890px;
}

.d[b-4q4g0qiocs] {
    width: 40px;
    height: 40px;
    background-color: white;
    position: absolute;
    top: 437px;
    left: 916px;
}

.up[b-4q4g0qiocs] {
    width: 30px;
    height: 30px;
    background-color: white;
    position: absolute;
    top: 661px;
    left: 368px;
}

.down[b-4q4g0qiocs] {
    width: 30px;
    height: 30px;
    background-color: white;
    position: absolute;
    top: 688px;
    left: 373px;
}

.left[b-4q4g0qiocs] {
    width: 30px;
    height: 30px;
    background-color: white;
    position: absolute;
    top: 688px;
    left: 346px;
}

.right[b-4q4g0qiocs] {
    width: 30px;
    height: 30px;
    background-color: white;
    position: absolute;
    top: 661px;
    left: 395px;
}

.turn-signal-left[b-4q4g0qiocs] {
    width: 60px;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 510px;
    left: 321px;
}

.turn-signal-right[b-4q4g0qiocs] {
    width: 60px;
    height: 60px;
    background-color: white;
    position: absolute;
    top: 507px;
    left: 917px;
}

.flash[b-4q4g0qiocs] {
    animation: flash-animation-b-4q4g0qiocs 0.5s steps(2, start) infinite;
    -webkit-animation: flash-animation 0.5s steps(2, start) infinite;
}

@keyframes flash-animation-b-4q4g0qiocs {
    to {
        background-color: green;
    }
}

@-webkit-keyframes flash-animation {
    to {
        background-color: green;
    }
}
/* /Pages/MainScreen/MainScreen.razor.rz.scp.css */
@font-face {
    font-family: "Rubik-medium";
    src: url("/Fonts/Rubik-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Rubik-bold";
    src: url("/Fonts/Rubik-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Rubik-regular";
    src: url("/Fonts/Rubik-Regular.ttf") format("truetype");
}

html[b-vfxcnbvxr3] {
    overflow: hidden;
}

body[b-vfxcnbvxr3]{
    overflow:hidden;
}

.animator[b-vfxcnbvxr3] {
    background-color: #000000;
    z-index: 9999;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    /*    border: 2px solid rgba(1,1,1,0.5);*/
    /*    -webkit-background-clip: padding-box;
    background-clip: padding-box;*/
    /* animation: in-out 3s ease-out forwards;*/
    animation: in-out-b-vfxcnbvxr3 2.3s forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.32, 0.74);
}

@keyframes in-out-b-vfxcnbvxr3 {
    0% {
        width:100%;
    }

    50% {
        width:100%;
    }

    100% {
        width: 0%;
        display:none;
    }
}


.page-container[b-vfxcnbvxr3] {
    position: relative;
    background-color: black;
    display: flex;
    flex-direction: column;
    width: 1280px;
    height: 720px;
    background-color: #000000;
}

.header-container[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: row;
    font-size: 20px;
    background-position-y: -24px;
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    height: 153px;
}

.header-traces[b-vfxcnbvxr3] {
    position: absolute;
    top: 0;
    left: 0;
    background-position-y: -24px;
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    height: 153px;
    width: 100%;
}

.audio-player[b-vfxcnbvxr3] {
    font-family: Rubik-regular;
    font-weight: 600;
    display: flex;
    margin-top: 15px;
    width: 210px;
    height: fit-content;
    align-items: center;
}

.audio-label[b-vfxcnbvxr3] {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,01) 50%, rgba(0,0,0,0));
}

.turn-signal[b-vfxcnbvxr3] {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    width: 820px;
    min-height: 102px;
    background-position-y: -11.5px;
}

.left-signal[b-vfxcnbvxr3] {
    height: 50px;
    position: absolute;
    top: 30px;
    left: 175px;
}

.right-signal[b-vfxcnbvxr3] {
    height: 50px;
    position: absolute;
    top: 30px;
    right: 225px;
}

.header-info-container[b-vfxcnbvxr3] {
    font-family: Rubik-medium;
    display: flex;
    margin-top: 15px;
    height: fit-content;
    align-items: center;
}

.welcome-text[b-vfxcnbvxr3] {
    font-family: Rubik-regular;
    font-size: 21px;
    margin: auto;
    margin-top: 45px;
    width: fit-content;
    position: relative;
}


.widgets[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 176px;
}

.right-widget[b-vfxcnbvxr3] {
    margin-left: auto;
    margin-right: 32px;
}

    .right-widget img[b-vfxcnbvxr3] {

    }

.left-widget span[b-vfxcnbvxr3] {
    font-size: 56px;
    position: absolute;
    right: 190px;
    top: 175px;
    font-family: 'Rubik-regular';
    font-weight: 600;
    width: 92px;
    text-align: center;
    background: linear-gradient(#FFFFFF 0%,#fbfbfb 20%, #f1f1f1 37%, #dfdfdf 52%, #c7c7c7 67%, #a7a7a7 82%, #818181 96%, #767676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left-widget[b-vfxcnbvxr3] {
    margin-left: -16.5px;
    position: relative;
}

    .left-widget img[b-vfxcnbvxr3] {
        height: 472px;
        width: 472px;
    }

.right-widget span[b-vfxcnbvxr3] {
    font-size: 56px;
    position: absolute;
    right: 165px;
    top: 175px;
    font-family: 'Rubik-regular';
    font-weight: 600;
    width: 150px;
    text-align: center;
    background: linear-gradient(#FFFFFF 0%,#fbfbfb 20%, #f1f1f1 37%, #dfdfdf 52%, #c7c7c7 67%, #a7a7a7 82%, #818181 96%, #767676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.indicators[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 180px;
    margin: auto;
    margin-top: 131px;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.footer-container[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0px;
    height: 111px;
    width: 1125.83px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-position-y: bottom;
}

.footer-left[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: row;
    margin-left: 187px;
    height: fit-content;
    margin-top: 67px;
    align-items: center;
}

.footer-right[b-vfxcnbvxr3] {
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    margin-right: 187px;
    margin-top: 55px;
    height: fit-content;
    align-items: center;
}

.footer-mid[b-vfxcnbvxr3] {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mode-container[b-vfxcnbvxr3] {
    margin-top: 13px;
    height: 20px;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 16.5px;
}

.gear-container[b-vfxcnbvxr3] {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 35px;
    font-family: 'Rubik-medium';
    font-weight: 400;
    text-align: center;
    background: linear-gradient(#FFFFFF 0%,#fbfbfb 20%, #f1f1f1 37%, #dfdfdf 52%, #c7c7c7 67%, #a7a7a7 82%, #818181 96%, #767676 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.active-gear[b-vfxcnbvxr3] {
    background: linear-gradient(#2292A4 0%,#44CCFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.atw-container[b-vfxcnbvxr3] {
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.atw[b-vfxcnbvxr3] {
    width: 77.7px;
    height: 33.1px;
    background-size: cover;
    display: flex;
    justify-content: center;
}

    .atw img[b-vfxcnbvxr3] {
        height: 10.5px;
        width: 32.5px;
        margin-top: 14px;
    }

.main-speed-urban[b-vfxcnbvxr3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 150px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: black;
    width: 300px;
}

.urban-text[b-vfxcnbvxr3] {
    margin-top: 10px;
    font-size: 20px;
    font-family: Rubik-regular;
    width: 300px;
    text-align: center;
}

    .urban-text span[b-vfxcnbvxr3] {
        font-weight: 600;
    }

.test-controls[b-vfxcnbvxr3] {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 225px;
    height: 320px;
    border-radius: 6px;
    gap: 10px;
    align-content: flex-start;
    padding-top: 50px;
}

    .test-controls button[b-vfxcnbvxr3] {
        width: fit-content;
        height: fit-content;
    }

.background-traces[b-vfxcnbvxr3] {
    position: absolute;
    width: 100%;
    height: 100%;
}

.footer-traces[b-vfxcnbvxr3] {
    position: absolute;
    height: 106px;
    width: 100%;
    bottom: 0;
    left: 0;
    background-position-x: center;
    background-repeat: no-repeat;
    background-position-y: 9px;
}

.header-logo[b-vfxcnbvxr3] {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    width: 820px;
    left: 50%;
    transform: translateX(-50%);
    background-position-y: -24px;
    background-position-x: center;
    height: 153px;
}

/*DashboardStartupAnimations*/
.turn-signal[b-vfxcnbvxr3] {
/*    clip-path: polygon(0% 0%, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 0%);
    animation: outwards-grow 1.25s linear forwards;
    animation-delay: 2s;*/
}

.header-traces[b-vfxcnbvxr3]{
    clip-path: polygon(0% 0%, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 0%);
    animation: outwards-grow-b-vfxcnbvxr3 1.25s linear forwards;
    animation-delay: 2s;
}

.background-traces[b-vfxcnbvxr3] {
    clip-path: polygon(0% 0%, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 0%);
    animation: outwards-grow-b-vfxcnbvxr3 2s ease-out forwards;
    animation-delay: 2s;
}

.footer-traces[b-vfxcnbvxr3] {
    clip-path: polygon(0% 0%, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 0%);
    animation: outwards-grow-b-vfxcnbvxr3 1.25s linear forwards;
    animation-delay: 2s;
}

.appear-first[b-vfxcnbvxr3] {
    opacity: 0;
    animation: appear-first-b-vfxcnbvxr3 2.25s ease-out forwards;
    animation-delay: 2s;
}

.appear-second[b-vfxcnbvxr3] {
    opacity: 0;
    animation: appear-first-b-vfxcnbvxr3 2.25s ease-out forwards;
    animation-delay: 2.3s;
}

.appear-third[b-vfxcnbvxr3] {
    opacity: 0;
    animation: appear-first-b-vfxcnbvxr3 1.25s ease-out forwards;
    animation-delay: 3s;
}

.welcome-anim[b-vfxcnbvxr3] {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    background: black;
    right: 0;
    animation: welcome 0.75s ease-out forwards;
    animation-delay: 2.3s;
}

s

@keyframes welcome[b-vfxcnbvxr3] {
    0%{
        width:100%;
    }
    100%[b-vfxcnbvxr3]{
        width:0%;
    }
}

@keyframes outwards-grow-b-vfxcnbvxr3 {
    0% {
        clip-path: polygon(0% 0%, 0 100%, 0 100%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 0%);
    }
    50% {
        clip-path: polygon(0% 0%, 0 100%, 30% 100%, 30% 0, 100% 0, 100% 100%, 70% 100%, 70% 0);
    }
    100% {
        clip-path: polygon(0% 0%, 0 100%, 50% 100%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 0);
    }
}

@keyframes appear-first-b-vfxcnbvxr3 {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.blink[b-vfxcnbvxr3] {
    animation: blink-animation-b-vfxcnbvxr3 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation-b-vfxcnbvxr3 {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
/* /Pages/ManualsPage/ManualsPage.razor.rz.scp.css */
.page-container[b-f7jczzmrdz] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-f7jczzmrdz] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.btn-i[b-f7jczzmrdz] {
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    height: 38px;
    margin: 15px 29.5px;
    display: flex;
    align-items: center;
}

.btn-icon[b-f7jczzmrdz] {
    width: 17px;
    height: 17px;
    margin-left: 28.6px;
}

.btn-span[b-f7jczzmrdz] {
    margin-left: 22.9px;
    font-size: 13px;
}

.btn-arrow[b-f7jczzmrdz] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid #7E8081;
    border-radius: 10px;
    width: 43.31px;
    height: 38px;
    position: absolute;
    right: 0px;
}

.arrow-btn[b-f7jczzmrdz] {
    height: 12.17px;
    width: 12.17px;
}

.arrow[b-f7jczzmrdz] {
    height: 25px;
    width: 25px;
    margin-right: 15px;
    margin-left: 25px;
}

/* Input */

input[b-f7jczzmrdz] {
    padding: 0 50px 0 17px;
}

#input-text[b-f7jczzmrdz] {
    flex-grow: 1;
    border-radius: 10px;
    font-size: 10px;
    border: 0px;
}

#div-search[b-f7jczzmrdz] {
    display: flex;
    height: 27.24px;
    margin: 16px 0 20px 0;
    position: relative;
    min-width: 250px;
}

#button-search[b-f7jczzmrdz] {
    background-color: #FFF;
    position: absolute;
    width: 32.96px;
    height: 27.24px;
    border: 1px solid #7E8081;
    border-radius: 10px;
    right: 0;
    display: inline-flex;
    align-items: center;
}
/* /Pages/Navigation/NavigationPage/NavigationPage.razor.rz.scp.css */
.page-container[b-7g5ijwf3c5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #EFEFEF;
}

.map-container[b-7g5ijwf3c5] {
    margin-top: 25px;
    border-bottom: 1px solid #CCCCCC;
    flex-grow: 1;
    background: url(images/pngs/map-x1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navigation-menu[b-7g5ijwf3c5] {
    min-height: 25px;
    min-width: 65px;
    width: fit-content;
    padding: 5px;
    background: white;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-left: 21px;
}

.search-container[b-7g5ijwf3c5] {
    font-size: 10px;
    display: flex;
    border-radius: 10px;
    width: 80%;
    margin: auto;
    margin-bottom: 5vh;
    margin-top: 20px;
    background-color: white;
}

.search-button[b-7g5ijwf3c5] {
    min-height: 27px;
    min-width: 32px;
    width: fit-content;
    padding: 5px;
    background: #FFFFFF;
    border-left: 1px solid #CCCCCC;
    border-radius: 5px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.searc-container input[b-7g5ijwf3c5] {
    flex-grow: 1;
    border: none;
}

.search-button span[b-7g5ijwf3c5]{
    margin-left: 3px;
}

    .search-container img[b-7g5ijwf3c5] {
        width: 12px;
        height: 12px;
        margin-left: 6px;
    }
/* /Pages/NoiseAirQualityPage/NoiseAirQualityPage.razor.rz.scp.css */
.page-container[b-b2hw4da25x] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

/* Utils */

.center[b-b2hw4da25x] {
    display: block;
    margin: 30px auto;
    width: auto;
}

.invisible[b-b2hw4da25x] {
    display: none;
}

.border[b-b2hw4da25x] {
    border-style: solid;
    border-width: thin;
    border-color: #CCC;
}


/* Buttons */

.right-arrow[b-b2hw4da25x] {
    position: absolute;
    height: 12px;
    right: 15px;
    opacity: 0.85;
}

/* Tab */

.tab[b-b2hw4da25x] {
    display: table-cell;
    width: 25vw;
    vertical-align: middle;
    background-color: #E8E8E8;
    text-align: center;
    font-size: 65%;
    min-width: 90px;
    height: 40px;
}

.active[b-b2hw4da25x] {
    background-color: #F7F7F7;
}

/* Populate */

.over[b-b2hw4da25x] {
    margin: 8%;
    height: calc(100vh - 500px);
    overflow-y: auto;
    min-height: 200px;
}

.pop-container[b-b2hw4da25x] {
    height: 35px;
    display: flex;
    flex-direction: row;
    margin-bottom: 8.5px;
}

.pop-details[b-b2hw4da25x] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    border: 1px solid #CCC;
    border-radius: 6px;
    background-color: white;
    position: relative;
}

.pop-info-1[b-b2hw4da25x] {
    left: 10px;
    position: absolute;
    font-size: 11px;
}

.pop-info-2[b-b2hw4da25x] {
    left: 75px;
    position: absolute;
    font-size: 10px;
}

/* Img */

#frame[b-b2hw4da25x] {
    width: 350px;
    height: 200px;
    position: relative;
}

#title[b-b2hw4da25x] {
    position: absolute;
    z-index: 2;
    padding: 3px 7px;
}

.war[b-b2hw4da25x] {
    position: absolute;
    z-index: 2;
    top: 40px;
    height: 22px;
    width: 22px;
}

#war-1[b-b2hw4da25x] {
    left: 140px;
}

#war-2[b-b2hw4da25x] {
    right: 10px;
}
/* /Pages/NotificationsPage/NotificationsPage.razor.rz.scp.css */
.page-container[b-hikvb97s6q] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-hikvb97s6q] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.invisible[b-hikvb97s6q] {
    display: none;
}

.arrow[b-hikvb97s6q] {
    display: inline-block;
    height: 9px;
    width: 9px;
}

.modes[b-hikvb97s6q] {
    display: inline-block;
    margin-top: 50px;
    margin-top: 6vh;
    margin-bottom: 17.5px;
    margin-left: 39.6px;
    font-size: 13.6px;
    margin-right: 126.3px;
}

.lister[b-hikvb97s6q] {
    display: inline-block;
    margin-top: 45px;
    margin-top: 5.5vh;
    margin-bottom: 30px;
    margin-left: 39.6px;
    font-size: 13.6px;
}

.general[b-hikvb97s6q] {
    display: inline-block;
    margin: 25px 0;
    margin-left: 39.6px;
    font-size: 13.6px;
    margin-right: 126.3px;
}

.selected[b-hikvb97s6q] {
    background-color: #FFF !important;
    color: #202020 !important;
}

.button[b-hikvb97s6q] {
    display: inline-flex;
    text-align: left;
    align-items: center;
    font-size: 12px;
    width: 108.76px;
    height: 31.24px;
    margin: 5px 0;
    border-radius: 12px;
    padding-left: 8.9px;
    background-color: #E8E8E8;
    color: #7E8081;
}

.modes-span[b-hikvb97s6q] {
    display: inline-flex;
    width: 55px;
    margin-right: 60px;
}

.dropdown[b-hikvb97s6q] {
    height: 31.24px;
    width: 77.76px;
    padding-left: 0px;
    justify-content: center;
}

/* Tab */

.tab[b-hikvb97s6q] {
    display: table-cell;
    width: 33.98vw;
    vertical-align: middle;
    background-color: #232323;
    text-align: center;
    font-size: 11px;
    height: 44px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #EFEFEF !important;
}

.active[b-hikvb97s6q] {
    background-color: #F7F7F7;
    color: #202020 !important;
}

/* Populate */

.pop[b-hikvb97s6q] {
    margin: 5%;
    margin-top: 10px;
    overflow-y: scroll;
    height: calc(100vh - 400px);
}

.pop-container[b-hikvb97s6q] {
    display: flex;
    flex-direction: row;
    margin: 13.5px 0;
}

.pop-details[b-hikvb97s6q] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    height: 43.16px;
}

.pop-profile-info[b-hikvb97s6q] {
    display: flex;
    flex-direction: column;
    width: 110px;
    margin-left: 20px;
}

.pop-name[b-hikvb97s6q] {
    font-size: 13px;
}

.pop-button[b-hikvb97s6q] {
    width: 50.6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #7E8081;
    margin-left: 5px;
    background-color: #fff;
    height: 43.16px;
    min-width: 50.6px;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.pop-button-icon[b-hikvb97s6q] {
    height: 11.73px;
    width: 17.41px;
}
/* /Pages/OnlineDashboard/Components/CargoStat.razor.rz.scp.css */
.cargo-stat-container[b-0cvpa3ui48] {
    display: flex;
    flex-direction: column;
    width: 68px;
}

.cargo-text[b-0cvpa3ui48] {
    display: flex;
    flex-direction: column;
}

.stat-title[b-0cvpa3ui48] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-size: 7px;
    color: #C6C7C8;
    margin: 0px;
    white-space: nowrap;
}

.stat-value-container[b-0cvpa3ui48] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.stat-value[b-0cvpa3ui48] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 700;
    font-size: 9px;
    color: #515256;
    margin: 0px;
    white-space: nowrap;
}

.stat-lines[b-0cvpa3ui48] {
    width: 47px;
    height: auto;
    margin-top: 12px;
    padding-bottom: 9px;
}

/* /Pages/OnlineDashboard/Components/CargoStatus.razor.rz.scp.css */

.cargo-status-container[b-y1lxdr8bm4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    width: 100%;
  
}

.stats-container[b-y1lxdr8bm4] {
    display: flex;
    flex-direction: row;
    margin-left: 45px;
    margin-top: 96px;
    gap: 28px;
}

.stats-column[b-y1lxdr8bm4] {
    display: flex;
    flex-direction: column;
}

.cargo-display-container[b-y1lxdr8bm4] {
    width: 177px;
    height: 272px;
    position: relative;
    margin-right: 33px;
    margin-top: 31px;
}

.cargo-outline[b-y1lxdr8bm4] {
    
    width: 100%;
    height: 100%;

}

.cargo-interior[b-y1lxdr8bm4] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94%;
    height: 94%;
    transform: translate(-50%, -50%);
   
}

.cargo-boxes[b-y1lxdr8bm4] {
    position: absolute;
    top: 65%; 
    left: 50%;
    width: 65%; 
    height: auto; 
    transform: translate(-50%, -50%);
    z-index: 2; 
}
/* /Pages/OnlineDashboard/Components/Environment.razor.rz.scp.css */
.environment-status-container[b-7et4z983n3] {
    display: flex;
    flex-direction: row;
    width: 421px;
    justify-content: space-around;
    margin-left: 20px;
}

body[b-7et4z983n3] {
}
/* /Pages/OnlineDashboard/Components/EnvironmentStatus.razor.rz.scp.css */
.environment-status[b-hdtrzpr9te] {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-left: 20px;
}

/*The environment title*/
.environment-status-title[b-hdtrzpr9te] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 11px;
    color: #494949;
    margin: 0px;
}

/*The environment subtitle*/
.environment-status-subtitle[b-hdtrzpr9te] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 8px;
    color: #777777;
    margin: 0px;
}

/*The environment video*/
.environment-status-video[b-hdtrzpr9te] {
    height: 115px;
    width: 115px;
    margin-left: -20px;
    margin-bottom: -15px;
}

.video-bg[b-hdtrzpr9te] {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    filter: grayscale(100%);
}


/*The environment value*/
.environment-status-value[b-hdtrzpr9te] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 23px;
    color: #494949;
    margin: 0px;
}

/*The environment condition text*/
.environment-status-stat[b-hdtrzpr9te] {
    font-family: "Roboto Regular", sans-serif;
    font-size: 7px;
    font-style: normal;
}

/*The placeholder for the environment condition graph*/
.environment-status-graph[b-hdtrzpr9te] {
    width: 82px;
}

body[b-hdtrzpr9te] {
}
/* /Pages/OnlineDashboard/Components/InfoPanel.razor.rz.scp.css */

/*The whole panel*/
.info-panel[b-mln0szchlr] {
    border-image-source: url('/images/svg/infoPanel.svg');
    border-image-slice: 0 fill;
    border-image-repeat: stretch;
    display: flex;
    position: relative;
    flex-direction: column;
    background-color: #ffffffab;
}

/*Contains the icon and the title text*/
.info-title[b-mln0szchlr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 22px;
    margin-top: 18.5px;
}

/*Icon on the left of the title*/
.info-title-icon[b-mln0szchlr] {
    width: 4px;
    height: 8px;
}

/*Title text*/
.info-title-text[b-mln0szchlr] {
    font-family: "bai-jamjuree", sans-serif;
    font-weight: 500;
    color: #494949;
    font-style: normal;
    font-size: 17px;
    margin-left: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*Subtitle Text*/
.info-subtitle-text[b-mln0szchlr] {
    font-family: "Roboto Medium";
    color: #494949;
    font-size: 10px;
    margin-left: 31px;
    margin-top: -3px;
    margin-bottom: 0px;
}

/*Dots on the top right of the panel*/
.info-dots[b-mln0szchlr] {
    position: absolute;
    align-self: end;
    margin-top: 15px;
    margin-right: 17px;
    overflow: visible;
}

    .info-dots circle[b-mln0szchlr] {
        animation: grow-radius-b-mln0szchlr 2s ease-in-out infinite;
    }

        .info-dots circle:nth-of-type(1)[b-mln0szchlr] {
            animation-delay: 0.0s;
        }

        .info-dots circle:nth-of-type(2)[b-mln0szchlr] {
            animation-delay: 0.2s;
        }

        .info-dots circle:nth-of-type(3)[b-mln0szchlr] {
            animation-delay: 0.4s;
        }

        .info-dots circle:nth-of-type(4)[b-mln0szchlr] {
            animation-delay: 0.6s;
        }

        .info-dots circle:nth-of-type(5)[b-mln0szchlr] {
            animation-delay: 0.8s;
        }

@keyframes grow-radius-b-mln0szchlr {
    0%, 50% {
        r: 0.573px;
    }

    25% {
        r: 1.146px; /* 2x radius */
    }
}


/*Lines on the bottom right of the panel*/
.info-lines[b-mln0szchlr] {
    position: absolute;
    width: 96%;
    height: auto;
    bottom: 0px;
    align-self: center;
    margin-bottom: 10px;
}

/*Contains the status online*/
.status-container[b-mln0szchlr] {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
    margin-left: 31px;
    align-items: last baseline;
}

/*status online box*/
.status-box[b-mln0szchlr] {
    width: 5px;
    height: 5px;
}

/*status online text*/
.status-text[b-mln0szchlr] {
    font-family: "Roboto Regular";
    font-size: 7px;
    color: #494949;
    margin-left: 3px;
}
/* /Pages/OnlineDashboard/Components/Map/TugaMap.razor.rz.scp.css */
.map-container[b-oyxzqz3x5s] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*remove this later, only for dev/testing*/
    height: calc(100% - 85px);
    z-index: 0;
}

.map-container-child[b-oyxzqz3x5s] {
    width: 100%;
    height: 100%;
}

.map-fullscreen[b-oyxzqz3x5s] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* /Pages/OnlineDashboard/Components/MotorPowerGraph.razor.rz.scp.css */
/* =========================================================================================
   Motor Power Graph CSS Stylesheet - Motor Output Power History Heatmap
   ========================================================================================= */

.motor-graph-wrapper[b-ap9na22sad] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    user-select: none;
    border: 0.5px solid #d8d8d8;
    border-radius: 4px;
    padding: 6px 4px 4px 4px;
    background-color: transparent;
    transition: border-color 0.2s ease;
}

.motor-graph-wrapper:hover[b-ap9na22sad] {
    border-color: #b0b0b0;
}

.motor-graph-wrapper.interactive[b-ap9na22sad] {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Spectrogram Track & 26-Column Layout
   ------------------------------------------------------------------------- */
.spectrogram-track[b-ap9na22sad] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 82%;
    padding: 0 4px;
    box-sizing: border-box;
}

.spectrogram-column[b-ap9na22sad] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    transition: opacity 0.25s ease;
}

/* Vertical Bars Inside Each Column */
.bars-container[b-ap9na22sad] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    height: 78%;
    width: 100%;
    box-sizing: border-box;
}

.bar-band[b-ap9na22sad] {
    display: inline-block;
    border-radius: 0.5px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, width 0.3s ease, transform 0.2s ease;
}

/* -------------------------------------------------------------------------
   Power Density Levels (Heatmap Intensity)
   ------------------------------------------------------------------------- */

/* Zero / Idle power: Clean gap */
.spectrogram-column.power-gap .bars-container[b-ap9na22sad] {
    opacity: 0;
}

/* Low Power (1 - 30%): Soft light grey */
.spectrogram-column.power-low[b-ap9na22sad] {
    opacity: 0.85;
}

/* Medium Power (31 - 65%): Balanced graphite */
.spectrogram-column.power-med[b-ap9na22sad] {
    opacity: 0.95;
}

/* High Power (66 - 85%): Dark solid load */
.spectrogram-column.power-high[b-ap9na22sad] {
    opacity: 1;
}

/* Peak Load (86 - 100%): Deep high-contrast charcoal/black */
.spectrogram-column.power-peak[b-ap9na22sad] {
    opacity: 1;
    filter: contrast(1.1);
}

/* Active slice pulse */
.spectrogram-column.latest .bars-container[b-ap9na22sad] {
    animation: latest-pulse-b-ap9na22sad 1.8s ease-in-out infinite alternate;
}

@keyframes latest-pulse-b-ap9na22sad {
    0% {
        transform: scaleY(0.98);
    }
    100% {
        transform: scaleY(1.02);
    }
}

/* -------------------------------------------------------------------------
   Column Number Labels (01 .. 26)
   ------------------------------------------------------------------------- */
.column-label[b-ap9na22sad] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 500;
    font-size: 8px;
    color: #494949;
    margin-top: 4px;
    letter-spacing: -0.3px;
    user-select: none;
    transition: color 0.3s ease;
}

.spectrogram-column.latest .column-label[b-ap9na22sad] {
    color: #1a1a1a;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Bottom Active Baseline Energy Bar
   ------------------------------------------------------------------------- */
.active-baseline-track[b-ap9na22sad] {
    position: absolute;
    bottom: 3px;
    left: 4px;
    right: 4px;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.active-baseline-bar[b-ap9na22sad] {
    position: absolute;
    height: 100%;
    background: #fe7614;
    border-radius: 1.5px;
    box-shadow: 0 0 5px rgba(254, 118, 20, 0.6);
    transition: left 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), width 0.35s ease;
}

/* -------------------------------------------------------------------------
   Sliding Reticle Indicator & Number Overlay
   ------------------------------------------------------------------------- */
.slider-reticle-container[b-ap9na22sad] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 38px;
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15));
}

.reticle-svg[b-ap9na22sad] {
    width: 100%;
    height: 100%;
    display: block;
}

.slider-value-text[b-ap9na22sad] {
    position: absolute;
    top: 15px;
    left: 4px;
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-size: 8.5px;
    color: #1a1a1a;
    letter-spacing: -0.2px;
    user-select: none;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}
/* /Pages/OnlineDashboard/Components/SignalGraph.razor.rz.scp.css */
/* signal Graph Component */
.signal-graph[b-lnhm5gufao] {
    margin-top: 12px;
    width: 495px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    /* Border & Shape */
    border: 0.5px solid #d8d8d8;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.signal-graph:hover[b-lnhm5gufao] {
    border-color: #b0b0b0;
}

.signal-text[b-lnhm5gufao] {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    user-select: none;
}

.signal-quality-text[b-lnhm5gufao] {
    font-family: "bai-jamjuree", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 5px;
    color: #515256;
    margin: 0;
}

.signal-value-text[b-lnhm5gufao] {
    font-family: "bai-jamjuree", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 7.49px;
    color: #515256;
    margin: 0;
    align-self: end;
}

/* Waveform Track */
.waveform[b-lnhm5gufao] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 80%;
    width: 85%;
    margin-left: 5px;
}

/* Individual Bar Container */
.bar[b-lnhm5gufao] {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* Dotted Background Track */
.bar[b-lnhm5gufao]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-image: radial-gradient(circle, #bbb 0.5px, transparent 0.5px);
    background-size: 2px 4px;
    z-index: 1;
}

/* Dynamic Vertical Bar */
.bar[b-lnhm5gufao]::after {
    content: "";
    position: relative;
    z-index: 2;
    width: 2.1px;
    border-radius: 1.6px;
    margin: 0 auto;
    background-color: #515256;
    height: var(--bar-height, 0%);
    transition: height 0.3s ease, background-color 0.3s ease;
}

/* Zero / Dropped Signal: Show only dotted track background */
.bar.empty[b-lnhm5gufao]::after {
    height: 0% !important;
    opacity: 0;
}

/* Warning / Degraded Signal (Orange) */
.bar.warning[b-lnhm5gufao]::after {
    background-color: #FE7614;
}

/* Critical Signal (Red) */
.bar.critical[b-lnhm5gufao]::after {
    background-color: #E03131;
}
/* /Pages/OnlineDashboard/Components/VehicleOverview.razor.rz.scp.css */
/*Contains the Tuga and the elements around the Tuga*/
.main-overview-container[b-h90sxh9kjo] {
    display: flex;
    flex-direction: row;
    margin-left: 28px;
    position: relative;
}

/*Container for the overview values on the left of the Tuga*/
.overview-values-container[b-h90sxh9kjo] {
    display: flex;
    flex-direction: column;
    height: 134px;
    justify-content: space-evenly;
    margin-top: 95px;
    position: absolute;
    z-index: 2;
}

/*the lines that separate each overview values on the left*/
.overview-lines[b-h90sxh9kjo] {
    width: 38px;
}

/*overview title*/
.overview-title[b-h90sxh9kjo] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-size: 6px;
    color: #C6C7C8;
    margin: 0px;
}

/*overview subtitle*/
.overview-subtitle[b-h90sxh9kjo] {
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 700;
    font-size: 7.5px;
    color: #515256;
    margin: 0px;
}

/*Wrapper for circle overview SVG and its aligned overlays*/
.circle-overview-wrapper[b-h90sxh9kjo] {
    position: relative;
    height: 317px;
    width: 431px;
    flex-shrink: 0;
}

/*The lines around the Tuga*/
.circle-overview[b-h90sxh9kjo] {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 10;
    pointer-events: none;
}

/* Embedded 3D Unity Player Viewport Circular Container */
.unity-circle-viewport[b-h90sxh9kjo] {
    height: 250px;
    width: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    z-index: 5;
    background: transparent;
}

.unity-circle-viewport[b-h90sxh9kjo]  #unity-container,
.unity-circle-viewport[b-h90sxh9kjo]  #unity-canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
    -webkit-clip-path: circle(50% at 50% 50%) !important;
}

/*Placeholder for the 3D Tuga model Component*/
.tuga-placeholder[b-h90sxh9kjo] {
    height: 77.3%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/*Contains the weather icons above the tuga*/
.weather-icon-container[b-h90sxh9kjo] {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.weather-icon[b-h90sxh9kjo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    min-width: 10px;
    min-height: 10px;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-128px) rotate(calc(-1 * var(--angle)));
    transform-origin: center center;
    pointer-events: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}

    .weather-icon:hover[b-h90sxh9kjo] {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-128px) rotate(calc(-1 * var(--angle))) scale(1.2);
    }

/*Contains the elements below the Tuga*/
.bottom-overview-container[b-h90sxh9kjo] {
    position: absolute;
    bottom: 14px;
    width: 430px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: center;
}

/*Placeholder image for the bars on the bottom left*/
.overview-stats[b-h90sxh9kjo] {
    width: 121px;
}

/*Coordinates on the bottom right*/
.coordinates-container[b-h90sxh9kjo] {
    display: flex;
    flex-direction: column;
}

.coordinates-text[b-h90sxh9kjo] {
    font-size: 9.5px;
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 700;
    color: #CCCCCC;
    margin: 0px;
}

/* --- Unity 3D Debug Trigger Button (Absolute to Page Top Right) --- */
.debug-toggle-btn[b-h90sxh9kjo] {
    position: fixed;
    top: 33px;
    right: 50px;
    z-index: 9999;
    background: rgba(18, 22, 32, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 198, 255, 0.4);
    color: #00C6FF;
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 198, 255, 0.25);
    pointer-events: auto;
}

    .debug-toggle-btn:hover[b-h90sxh9kjo] {
        background: #00C6FF;
        color: #0D1117;
        box-shadow: 0 0 16px rgba(0, 198, 255, 0.6);
        transform: translateY(-1px);
    }

/* --- Unity 3D Control Overlay Window (Absolute to Page Top Right) --- */
.unity-controls-overlay[b-h90sxh9kjo] {
    position: fixed;
    top: 33px;
    right: 50px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9999;
    background: rgba(14, 18, 26, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 198, 255, 0.35);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 198, 255, 0.2);
    animation: fadeIn-b-h90sxh9kjo 0.2s ease-out;
    pointer-events: auto;
}

@keyframes fadeIn-b-h90sxh9kjo {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.unity-controls-header[b-h90sxh9kjo] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.unity-controls-title[b-h90sxh9kjo] {
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #00C6FF;
    letter-spacing: 0.8px;
}

.unity-controls-close[b-h90sxh9kjo] {
    background: transparent;
    border: none;
    color: #8A92A6;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s ease;
}

    .unity-controls-close:hover[b-h90sxh9kjo] {
        color: #EF4444;
    }

.unity-controls-section[b-h90sxh9kjo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.control-label[b-h90sxh9kjo] {
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #8A92A6;
    text-transform: uppercase;
}

.btn-group-custom[b-h90sxh9kjo] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.tuga-btn[b-h90sxh9kjo] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #D1D5DB;
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

    .tuga-btn:hover[b-h90sxh9kjo] {
        background: rgba(0, 198, 255, 0.2);
        border-color: rgba(0, 198, 255, 0.5);
        color: #FFFFFF;
    }

    .tuga-btn.active[b-h90sxh9kjo] {
        background: #00C6FF;
        border-color: #00C6FF;
        color: #0D1117;
        font-weight: 700;
        box-shadow: 0 0 8px rgba(0, 198, 255, 0.4);
    }

    .tuga-btn.reset-btn:hover[b-h90sxh9kjo] {
        background: rgba(239, 68, 68, 0.25);
        border-color: #EF4444;
        color: #FF8888;
    }

.tuga-select[b-h90sxh9kjo] {
    background: rgba(20, 25, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E2E8F0;
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.color-swatches[b-h90sxh9kjo] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 2px;
}

.color-dot[b-h90sxh9kjo] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

    .color-dot:hover[b-h90sxh9kjo] {
        transform: scale(1.25);
    }

    .color-dot.selected[b-h90sxh9kjo] {
        border: 2px solid #00C6FF;
        box-shadow: 0 0 6px rgba(0, 198, 255, 0.8);
        transform: scale(1.2);
    }
/* /Pages/OnlineDashboard/Components/VehicleStatus.razor.rz.scp.css */
/*Contains the table of values for each status and the velocimeter*/
.info-stats[b-gbwjisfs58] {
    display: flex;
    flex-direction: row;
    margin-top: 28px;
    margin-left: 31px;
    align-items: center;
}

/*The status table*/
.status-table[b-gbwjisfs58] {
    width: 170px;
}

/*The text inside the status table*/
td[b-gbwjisfs58] {
    white-space: break-spaces;
    font-family: "TitlingGothicFB";
    font-size: 11px;
    color: #494949;
}

/*The icons inside the status table*/
.status-icon[b-gbwjisfs58] {
    height: 17px;
    width: auto;
}

/* Motor Power Graph Spectrogram Container */
.motor-container[b-gbwjisfs58] {
    position: absolute;
    width: 416px;
    height: 83px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 23px;
    display: flex;
}
/* /Pages/OnlineDashboard/Components/Velocimeter.razor.rz.scp.css */
/*Speed Velocimeter*/
.velocimeter-container[b-wtrcy3ebue] {
    display: flex;
    margin-left: 85px;
    align-items: center;
    justify-content: center;
    position: relative;
}

/*Speed shown in the velocimeter*/
.speed-value-text[b-wtrcy3ebue] {
    position: absolute;
    font-family: 'bai-jamjuree', sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #494949;
    font-size: 49px;
    margin: 0;
    margin-top: 33px;
}

/*Metric shown in the velocimeter*/
.speed-metric-text[b-wtrcy3ebue] {
    position: absolute;
    font-family: "bai-jamjuree", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    color: #494949;
    margin: 0;
    margin-top: 100px;
}

/* Path 92: Orange progress line */
.progress-path[b-wtrcy3ebue] {
    stroke-dasharray: 109;
    animation: fillProgress-b-wtrcy3ebue var(--anim-duration) var(--anim-easing) infinite alternate;
    animation-play-state: running;
    --anim-duration: 2s;
    --anim-easing: ease-in-out;
}

/* Path 93: Grey track bar */
.track-path[b-wtrcy3ebue] {
    stroke-dasharray: 109;
    animation: shrinkTrack-b-wtrcy3ebue var(--anim-duration) var(--anim-easing) infinite alternate;
    animation-play-state: running;
    --anim-duration: 2s;
    --anim-easing: ease-in-out;
}

.left-path[b-wtrcy3ebue] {
    stroke-dasharray: 120;
    animation: extendLeft-b-wtrcy3ebue var(--anim-duration) var(--anim-easing) infinite alternate;
    animation-play-state: running;
    --anim-duration: 2s;
    --anim-easing: ease-in-out;
}

.right-path[b-wtrcy3ebue] {
    stroke-dasharray: 120;
    animation: retractRight-b-wtrcy3ebue var(--anim-duration) var(--anim-easing) infinite alternate;
    animation-play-state: running;
    --anim-duration: 2s;
    --anim-easing: ease-in-out;
}

/* At 0%: Path 92 is completely hidden (offset 109). At 100%: Fills its entire half (offset 0). */
@keyframes fillProgress-b-wtrcy3ebue {
    0% {
        stroke-dashoffset: 109;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* At 0%: Path 93 extends backward to cover the entire arc (offset -109). At 100%: Retracts to 0. */
@keyframes shrinkTrack-b-wtrcy3ebue {
    0% {
        stroke-dashoffset: -109;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes extendLeft-b-wtrcy3ebue {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes retractRight-b-wtrcy3ebue {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -100;
    }
}
/* /Pages/OnlineDashboard/Components/VideoFeed.razor.rz.scp.css */
/* =========================================================================================
   Video Feed Component Styles
   1672x941 Canvas: Panel Width 551px, Content Width 495px
   ========================================================================================= */

/* Contains all the elements in a column */
.video-feed-container[b-dlu2r2iftw] {
    width: 495px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

/* Video viewport holding the video and tactical HUD overlay (sharp borders matching design) */
.video-viewport[b-dlu2r2iftw] {
    position: relative;
    width: 495px;
    height: 236px;
    max-height: 236px;
    margin-top: 6px;
    overflow: hidden;
    background-color: #000000;
}

/* Video camera element */
.video-camera[b-dlu2r2iftw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000000;
    transition: filter 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

/* Camera angle perspective and tint variations */
.video-camera.camera-frontal[b-dlu2r2iftw] {
    transform: none;
    filter: none;
}

.video-camera.camera-back[b-dlu2r2iftw] {
    transform: scaleX(-1);
    filter: contrast(1.04);
}

.video-camera.camera-right[b-dlu2r2iftw] {
    filter: contrast(1.06) saturate(1.08) hue-rotate(12deg);
}

.video-camera.camera-left[b-dlu2r2iftw] {
    filter: contrast(1.06) saturate(1.08) hue-rotate(-12deg);
}

.video-camera.camera-top[b-dlu2r2iftw] {
    filter: contrast(1.2) brightness(0.95);
}

/* Camera switching digital interference glitch effect */
.video-camera.switching[b-dlu2r2iftw] {
    opacity: 0.5;
    filter: brightness(1.8) contrast(1.5) blur(1px);
    transition: none;
}

/* Tactical HUD overlays inside the video stream */
.video-hud-overlay[b-dlu2r2iftw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 2;
}

.hud-top-bar[b-dlu2r2iftw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.hud-bottom-bar[b-dlu2r2iftw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.hud-stream-info[b-dlu2r2iftw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Blinking live broadcast indicator */
.live-pill[b-dlu2r2iftw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(18, 22, 32, 0.75);
    backdrop-filter: blur(4px);
    border: 0.5px solid rgba(254, 118, 20, 0.5);
    padding: 2px 6px;
    border-radius: 2px;
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    color: #fe7614;
    letter-spacing: 0.8px;
}

.live-dot[b-dlu2r2iftw] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fe7614;
    box-shadow: 0 0 6px #fe7614;
    animation: pulseLive-b-dlu2r2iftw 1.6s infinite ease-in-out;
}

@keyframes pulseLive-b-dlu2r2iftw {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

.hud-camera-tag[b-dlu2r2iftw] {
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.6px;
    background: rgba(18, 22, 32, 0.65);
    backdrop-filter: blur(4px);
    border: 0.5px solid rgba(100, 100, 100, 0.4);
    padding: 2px 6px;
    border-radius: 2px;
}

.hud-meta-pill[b-dlu2r2iftw] {
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    background: rgba(18, 22, 32, 0.65);
    backdrop-filter: blur(4px);
    border: 0.5px solid rgba(100, 100, 100, 0.3);
    padding: 2px 6px;
    border-radius: 2px;
}

.hud-zoom-tag[b-dlu2r2iftw] {
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    background: rgba(18, 22, 32, 0.65);
    backdrop-filter: blur(4px);
    padding: 2px 6px;
    border-radius: 2px;
}

/* The container for camera selection */
.camera-selection-container[b-dlu2r2iftw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    width: 100%;
    height: 20px;
    position: relative;
}

/* Arrow buttons */
.selection-arrow-btn[b-dlu2r2iftw] {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.selection-arrow-btn:hover[b-dlu2r2iftw] {
    transform: scale(1.2);
}

.selection-arrow-btn:active[b-dlu2r2iftw] {
    transform: scale(0.92);
}

.selection-arrow[b-dlu2r2iftw] {
    width: 10.5px;
    height: 14.4px;
    display: block;
}

/* Contains all the 5 camera cells (spacious width 310px = 5 x 62px) */
.options-container[b-dlu2r2iftw] {
    display: flex;
    flex-direction: row;
    width: 310px;
    height: 18px;
    align-items: center;
    position: relative;
}

/* The animated orange reticle: 54px wide centered inside 62px cell (4px clearance from dividers) */
.active-bracket-frame[b-dlu2r2iftw] {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 54px;
    height: 16.62px;
    transform: translate(calc(var(--active-cell-index) * 62px), -50%);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 3;
    box-sizing: border-box;
}

.bracket[b-dlu2r2iftw] {
    height: 16.62px;
    width: 5.54px;
    display: block;
    flex-shrink: 0;
}

/* Each camera cell: 62px wide */
.camera-cell[b-dlu2r2iftw] {
    width: 62px;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* Option text: NEVER orange, always #494949 as in original design */
.cell-text[b-dlu2r2iftw] {
    font-family: "Roboto Medium", sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #494949;
    line-height: 1;
    letter-spacing: 0.3px;
    user-select: none;
    transition: opacity 0.15s ease;
}

.camera-cell:hover .cell-text[b-dlu2r2iftw] {
    opacity: 0.8;
}

/* The vertical breaks separating the cells */
.cell-divider[b-dlu2r2iftw] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.25px;
    height: 11.08px;
    background-color: #777777;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

/* Divider positions at the boundary of each 62px cell */
.options-container .cell-divider:nth-of-type(1)[b-dlu2r2iftw] {
    left: 62px;
}

.options-container .cell-divider:nth-of-type(2)[b-dlu2r2iftw] {
    left: 124px;
}

.options-container .cell-divider:nth-of-type(3)[b-dlu2r2iftw] {
    left: 186px;
}

.options-container .cell-divider:nth-of-type(4)[b-dlu2r2iftw] {
    left: 248px;
}
/* /Pages/OnlineDashboard/OnlineDashboard.razor.rz.scp.css */
/*.ai canvas resolution 1672x941 */

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Medium';
    src: url('/fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Regular';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TitlingGothicFB';
    src: url('/fonts/TitlingGothicFBNar-Reg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


.dashboard-viewport-wrapper[b-lnobn5gg7q] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: white;
    overflow: auto;
    position: relative;
}

/* Scaler toggle panel floating at the top-right corner */
.scale-mode-panel[b-lnobn5gg7q] {
    position: fixed;
    top: 16px;
    right: 180px;
    z-index: 10000;
    pointer-events: auto;
}

.scale-mode-btn[b-lnobn5gg7q] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(18, 22, 32, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(80, 83, 84, 0.5);
    color: #888888;
    font-family: 'bai-jamjuree', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.scale-mode-btn:hover[b-lnobn5gg7q] {
    border-color: rgba(0, 198, 255, 0.6);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 198, 255, 0.3);
    transform: translateY(-1px);
}

.scale-mode-btn.active[b-lnobn5gg7q] {
    background: rgba(14, 28, 44, 0.9);
    border-color: #00C6FF;
    color: #00C6FF;
    box-shadow: 0 0 14px rgba(0, 198, 255, 0.4);
}

.scale-dot[b-lnobn5gg7q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #505354;
    transition: background 0.2s ease;
}

.scale-mode-btn.active .scale-dot[b-lnobn5gg7q] {
    background: #00C6FF;
    box-shadow: 0 0 8px #00C6FF;
}

.page-container[b-lnobn5gg7q] {
    display: flex;
    flex-direction: column;
    width: 1672px;
    height: 941px;
    min-width: 1672px;
    min-height: 941px;
    position: relative;
    margin: auto;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Dynamic auto-scaler for 4K / high-resolution displays */
.page-container.scaled-viewport[b-lnobn5gg7q] {
    transform: scale(var(--dashboard-scale, 1));
    transform-origin: center center;
}

/*The border around the page*/
.outer-border[b-lnobn5gg7q] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1672px;
    height: 941px;
    overflow: hidden;
    border-image-source: url('/images/svg/outerBoarder.svg');
    border-image-slice: 0 fill;
    border-image-repeat: stretch;
    pointer-events: none;
}

/*Nexus text on the top center of the screen*/
.dashboard-title-text[b-lnobn5gg7q] {
    position: absolute;
    font-family: Manrope;
    font-size: 12px;
    color: #505354;
    margin-top: 26.5px;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 3px;
    pointer-events: none;
}

/*Tuga Innovations Logo on top left corner*/
.tuga-logo[b-lnobn5gg7q] {
    width: 186px;
    height: 50px;
    margin-left: 43px;
    margin-top: 47px;
    pointer-events: none;
}

/*Placeholder image for the GPS Component at the bottom of the screen*/
.gps-placeholder[b-lnobn5gg7q] {
    position: absolute;
    width: 1055px;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 2;
    pointer-events: none;
}

/*Contains all the panel rows*/
.main-panel-container[b-lnobn5gg7q] {
    display: flex;
    margin-left: 43px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/*Panel column*/
.panel-container[b-lnobn5gg7q] {
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.panel-container.center-column[b-lnobn5gg7q] {
    margin-left: 30px;
    height: fit-content;
}

.panel-container.right-column[b-lnobn5gg7q] {
    margin-left: 30px;
}

.map-container[b-lnobn5gg7q] {
    position: absolute;
    width: 670px;
    height: 376px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 1;
    pointer-events: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-composite: intersect;
}

.cube-swapper[b-lnobn5gg7q] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 23px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.square[b-lnobn5gg7q] {
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    animation: randomSwap-b-lnobn5gg7q 4s infinite ease-in-out;
    animation-delay: var(--delay);
}

@keyframes randomSwap-b-lnobn5gg7q {
    /* State 1: Grey outline */
    0%, 100% {
        background-color: transparent;
        border: 1px solid #505354;
    }
    /* State 2: Solid orange */
    25% {
        background-color: #fe7614;
        border: 1px solid #fe7614;
    }
    /* State 3: Orange outline (thin) */
    50% {
        background-color: transparent;
        border: 1px solid #fe7614;
    }
    /* State 4: Orange outline (thick) */
    75% {
        background-color: transparent;
        border: 2px solid #fe7614;
    }
}
/* /Pages/PerspectivePage/PerspectivePage.razor.rz.scp.css */
.page-container[b-dg151of6fu] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

.page-body[b-dg151of6fu] {
    background-color: #EFEFEF;
    flex-grow: 1;
}

/* Utils */

.center[b-dg151of6fu] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.arrow[b-dg151of6fu] {
    height: 4.64px;
    width: 7.35px;
    margin-left: 8.5px;
}

/* General */

.menu[b-dg151of6fu] {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(110px, 1fr) );
    justify-items: center;
    height: calc(100vh - 176px);
}

.frame[b-dg151of6fu] {
    position: relative;
    height: 69.49px;
    width: 123.53px;
    background-color: #202020;
    margin: 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* img */

.fav[b-dg151of6fu] {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.play[b-dg151of6fu] {
    width: 25px;
}
/* /Pages/PollutionMapsPage/PollutionMapsPage.razor.rz.scp.css */
.page-container[b-wbg1lbmrzg] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

/* Utils */

.center[b-wbg1lbmrzg] {
    display: block;
    margin: 30px auto;
    width: auto;
}

.invisible[b-wbg1lbmrzg] {
    display: none;
}

.border[b-wbg1lbmrzg] {
    border-style: solid;
    border-width: thin;
    border-color: #CCC;
}

/* Map */

#map[b-wbg1lbmrzg] {
    margin: 5px 0;
    height: 80%;
}

/* Search */

#button-search[b-wbg1lbmrzg] {
    background-color: #F7F7F7;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    position: relative;
    padding: 5px 8px;
    margin-bottom: 20px;
    margin-right: 25px;
    z-index: 2;
    right: 8.15%;
    width: 70px;
    height: 27.25px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

#input-text[b-wbg1lbmrzg] {
    position: relative;
    flex-grow: 0.75;
    margin-left: 8%;
    height: 27.25px;
    border-radius: 3px;
    border: 1px solid #ccc;
    z-index: 1;
    font-size: 12px;
    width: 70%;
    color: #000;
    font-weight: 400;
}
/* /Pages/ProfilePage/ProfilePage.razor.rz.scp.css */
.page-container[b-nnxfmr5cva] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.page-bg[b-nnxfmr5cva] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url(/images/pngs/main-page-background-x1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    z-index: 0;
}

/* Utils */
img[b-nnxfmr5cva] {
    margin: 0 auto;
}

.center[b-nnxfmr5cva] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.invisible[b-nnxfmr5cva] {
    display: none;
}

.border-i[b-nnxfmr5cva] {
    border: 1px solid #7E8081;
}


/* Buttons */

#button-logout[b-nnxfmr5cva] {
    display: inline-block;
    position: relative;
    left: 87%;
    width: 13.4px;
    height: 14.46px;
}

#button-share[b-nnxfmr5cva] {
    position: absolute;
    right: 10px;
    top: 10px;
}

#button-search[b-nnxfmr5cva] {
    background-color: #FFF;
    position: absolute;
    width: 32.96px;
    height: 27.24px;
    border: 1px solid #7E8081;
    border-radius: 10px;
    right: 0;
    display: inline-flex;
    align-items: center;
}

.status-button[b-nnxfmr5cva] {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 5.7px;
    font-size: 8.33px;
    width: 50px;
    height: 11px;
}

.status-icon[b-nnxfmr5cva] {
    border-radius: 50%;
    height: 3.84px;
    width: 3.84px;
    margin-right: 7px;
}

#button-on-off[b-nnxfmr5cva] {
    display: inline-flex;
    height: 31.24px;
    margin-left: 42.3px;
    background-color: white;
    width: 46.76px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
}

.right-arrow[b-nnxfmr5cva] {
    display: inline-block;
    width: 5.15px;
    height: 8.16px;
}

/* Containers */

.state-selector-container[b-nnxfmr5cva] {
    width: fit-content;
    margin: auto;
}

/* Picture */

.picture-parent[b-nnxfmr5cva] {
    position: relative;
}

.frame[b-nnxfmr5cva] {
    position: relative;
    border-radius: 50%;
}

#frame-1[b-nnxfmr5cva] {
    width: 101.61px;
    height: 101.61px;
}

#frame-2[b-nnxfmr5cva] {
    width: 46.24px;
    height: 46.24px;
}

.pic-frame[b-nnxfmr5cva] {
    margin: 3px;
    width: 94.25px;
    height: 94.25px;
}

.pic-frame-small[b-nnxfmr5cva] {
    margin: 0.5px;
    width: 42.9px;
    height: 42.9px;
}

.edit[b-nnxfmr5cva] {
    position: absolute;
}

.edit-icon[b-nnxfmr5cva] {
    width: 11.09px;
    height: 11.09px;
    position: absolute;
}

#edit-1[b-nnxfmr5cva] {
    right: 0px;
    bottom: 0px;
}

#edit-2[b-nnxfmr5cva] {
    right: 9.1px;
    bottom: 4.7px;
}

/* Text */

.status-text[b-nnxfmr5cva] {
    
}

.description-form[b-nnxfmr5cva] {
    position: relative;
    height: 55px;
    width: 288px;
    margin-top: 9.3px;
    margin-bottom: 39.6px;
}

#description-text[b-nnxfmr5cva] {
    display: block;
    text-align: left;
    font-size: 10px;
    margin: 0;
}

input[b-nnxfmr5cva] {
    padding: 0 50px 0 17px;
}

#input-text[b-nnxfmr5cva] {
    flex-grow: 1;
    border-radius: 10px;
    font-size: 10px;
    border: 0px;
}

#div-search[b-nnxfmr5cva] {
    display: flex;
    min-height: 27.24px;
    margin: 16px 0 20px 0;
    position: relative;
    min-width: 250px;
}

/* Tab */

.tab[b-nnxfmr5cva] {
    display: table-cell;
    width: 25vw;
    vertical-align: middle;
    background-color: #232323;
    text-align: center;
    font-size: 11px;
    min-width: 90px;
    height: 44px;
    color: #EFEFEF;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.active[b-nnxfmr5cva] {
    background-color: #EFEFEF;
    color: #202020;
}

/* General */

.general[b-nnxfmr5cva] {
    display: inline-block;
    margin: 15px 0;
    font-size: 13.6px;
    width: 95px;
}

.reg[b-nnxfmr5cva] {
    margin-left: 26px;
    font-size: 13px;
}

/* Achievement */

.pic-frame-achv[b-nnxfmr5cva] {
    margin: 0px;
    width: 76.08px;
    height: 76.08px;
}

#achv-icon[b-nnxfmr5cva] {
    height: 27.82px;
    width: 27.82px;
}

#progress-bar-frame[b-nnxfmr5cva] {
    border: 1px solid #7E8081;
    height: 3.26px;
    border-radius: 10px;
}

#progress-bar[b-nnxfmr5cva] {
    height: 3.26px;
    background-color: #7E8081;
    border-radius: 10px;
}

.frame-achv-icon[b-nnxfmr5cva] {
    border-radius: 50%;
    height: 42.82px;
    width: 42.82px;
    display: flex;
    align-items: center;
}

.pop-achv-icon[b-nnxfmr5cva] {
    height: 23.7px;
    width: 23.7px;
    opacity: 1;
}

/* Populate */

.pop[b-nnxfmr5cva] {
    overflow: scroll;
    min-height: 100px;
    height: calc(100vh - 550px); /* Find optimal function */
}

.pop-container[b-nnxfmr5cva] {
    display: flex;
    flex-direction: row;
}

.pop-details[b-nnxfmr5cva] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    background-color: #FFF;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.pop-profile-icon[b-nnxfmr5cva] {
    height: 30.03px;
    width: 30.03px;
    margin-left: 12.3px;
    margin-right: 10.9px;
}

.pop-name[b-nnxfmr5cva] {
    font-size: 13px;
    color: #202020;
}

.pop-status-button[b-nnxfmr5cva] {
    position: relative;
    right: 12.2px;
    margin-left: auto;
}

.pop-frame-addons[b-nnxfmr5cva] {
    width: 13.91px;
    height: 30.62px;
    display: flex;
    flex-direction: column;
}

.pop-profile-addon[b-nnxfmr5cva] {
    background-color: #7E8081;
    border-radius: 50%;
    height: 13.91px;
    width: 13.91px;
    display: inline-flex;
    align-items: center;
}

.pop-points[b-nnxfmr5cva] {
    display: flex;
    margin-left: auto;
    margin-right: 15.6px;
}

/* leaderboard */

.lead-btn[b-nnxfmr5cva] {
    width: 50%;
    display: inline-flex;
    justify-content: center;
    height: 37.46px;
    align-items: center;
    margin: 30px 0;
    font-size: 11px;
    min-width: 90px;
}

#lead-btn-left[b-nnxfmr5cva] {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    color: #7E8081;
    background-color: #E8E8E8;
}

#lead-btn-right[b-nnxfmr5cva] {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    color: #202020;
    background-color: #FFFFFF;
}
/* /Pages/RemoteParkingPage/RemoteParkingPage.razor.rz.scp.css */
.page-container[b-mk8s047vk9] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

.page-body[b-mk8s047vk9] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Utils */

.center[b-mk8s047vk9] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.invisible[b-mk8s047vk9] {
    display: none;
}


/* Frames */

.frame[b-mk8s047vk9] {
    position: relative;
    display: block;
}

#frame-img[b-mk8s047vk9] {
    flex-grow: 1;
}

#frame-controls[b-mk8s047vk9] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 35px;
    padding-top: 4vh;
    padding-bottom: 35px;
    padding-bottom: 4vh;
}

/* Car */
.car[b-mk8s047vk9] {
    position: absolute;
    opacity: 0.5;
    width: 230px;
}

#pos-middle[b-mk8s047vk9] {
    left: 75px;
    top: 30px;
}

#pos-front[b-mk8s047vk9] {
    left: 75px;
    top: 5px;
}

#pos-back[b-mk8s047vk9] {
    left: 75px;
    top: 55px;
}

/* Controls */

.side[b-mk8s047vk9] {
    position: absolute;
    width: 45px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
}

#park[b-mk8s047vk9] {
    left: 12.5%;
    top: 40%;
}

#lights[b-mk8s047vk9] {
    right: 12.5%;
    top: 40%;
}

#main[b-mk8s047vk9] {
    position: relative;
    height: 150px;
    width: 150px;
    margin: auto;
}

#up-left-arrow[b-mk8s047vk9] {
    position: absolute;
    top: 10%;
    left: 0;
}

#up-arrow[b-mk8s047vk9] {
    position: absolute;
    top: 0;
    left: 29.5%;
}

#up-right-arrow[b-mk8s047vk9] {
    position: absolute;
    top: 10%;
    right: 0;
}

#down-left-arrow[b-mk8s047vk9] {
    position: absolute;
    bottom: 10%;
    left: 0;
}

#down-arrow[b-mk8s047vk9] {
    position: absolute;
    bottom: 0;
    left: 29.5%;
}

#down-right-arrow[b-mk8s047vk9] {
    position: absolute;
    bottom: 10%;
    right: 0;
}
/* /Pages/SavingsTrackerPage/SavingsTrackerPage.razor.rz.scp.css */
.page-container[b-g1ht678hes] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

/* Utils */

.center[b-g1ht678hes] {
    display: block;
    margin: 30px auto;
    width: auto;
}

.invisible[b-g1ht678hes] {
    display: none;
}

.border[b-g1ht678hes] {
    border-style: solid;
    border-width: thin;
    border-color: #CCC;
}


/* Buttons */

.right-arrow[b-g1ht678hes] {
    position: absolute;
    height: 12px;
    right: 15px;
    opacity: 0.85;
}

/* Tab */

.tab[b-g1ht678hes] {
    display: table-cell;
    width: 25vw;
    vertical-align: middle;
    background-color: #E8E8E8;
    text-align: center;
    font-size: 65%;
    min-width: 90px;
    height: 40px;
}

.active[b-g1ht678hes] {
    background-color: #F7F7F7;
}

/* Populate */

.over[b-g1ht678hes] {
    margin: 8%;
    height: calc(100vh - 500px);
    overflow-y: auto;
    min-height: 200px;
}

.pop-container[b-g1ht678hes] {
    height: 35px;
    display: flex;
    flex-direction: row;
    margin-bottom: 8.5px;
}

.pop-details[b-g1ht678hes] {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: center;
    border: 1px solid #CCC;
    border-radius: 6px;
    background-color: white;
    position: relative;
}

.pop-info-1[b-g1ht678hes] {
    left: 10px;
    position: absolute;
    font-size: 11px;
}

.pop-info-2[b-g1ht678hes] {
    left: 75px;
    position: absolute;
    font-size: 10px;
}

/* Img */

#frame[b-g1ht678hes] {
    width: 350px;
    height: 200px;
    position: relative;
}
/* /Pages/SecurityPage/SecurityPage.razor.rz.scp.css */
.page-container[b-p7ceufkive] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-p7ceufkive] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #EFEFEF;
}

/* Utils */

.center[b-p7ceufkive] {
    display: block;
    margin: 0 auto;
    width: auto;
}

/* Buttons */

.button[b-p7ceufkive] {
    background-color: #202020;
    font-size: 10px;
    border-radius: 50px;
    margin: 0 3.3px;
    width: 80px;
    padding-left: 10px;
    padding-right: 13px;
    height: 31.24px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

    .button span[b-p7ceufkive] {
        height: 12px;
    }

.button-icon[b-p7ceufkive] {
    width: 12.5px;
    display: flex;
    align-content: center;
}

.locked-status[b-p7ceufkive] {
    font-size: 6.7px;
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .locked-status span[b-p7ceufkive] {
        height: 7px;
    }

.hub-button-int[b-p7ceufkive] {
    color: #202020;
    background: #fff !important;
    border: 1px solid #202020;
}

#btn-tab[b-p7ceufkive] {
    display: flex;
    justify-content: center;
}

.btn-big-span[b-p7ceufkive] {
    margin-left: 15.3px;
    height: 12px;
}

.btn-big-icon[b-p7ceufkive] {
    height: 17.81px;
    width: 17.81px;
    margin-left: 19px;
}

.btn-icon[b-p7ceufkive] {
    width: 10.34px;
    height: 10.34px;
}

.btn-span[b-p7ceufkive] {
    margin-left: 10.3px;
    color: #FFF;
}

.btn-big[b-p7ceufkive] {
    background-color: #FFF;
    text-align: left;
    font-size: 11px;
    border-radius: 10px;
    margin: 4px auto;
    width: 178.29px;
    height: 34.24px;
    display: inline-flex;
    align-items: center;
}

#text-2[b-p7ceufkive] {
    font-size: 13px;
    position: relative;
    margin: 45px auto;
    width: 171.31px;
}

/* Image */

#frame[b-p7ceufkive] {
    position: relative;
    width: 367px;
    height: 200px;
    margin: 0 auto;
}

.war[b-p7ceufkive] {
    position: absolute;
    z-index: 2;
}

#war-1[b-p7ceufkive] {   
    left: 140px;
}

#war-2[b-p7ceufkive] {
    left: 30px;
    top: 85px;
}

#war-3[b-p7ceufkive] {
    right: 25px;
    top: 75px;
}
/* /Pages/SettingsPage/SettingsPage.razor.rz.scp.css */
.settings-wrapper[b-5x3rkgqkrl] {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
}

.scroll-container[b-5x3rkgqkrl] {
    width: 257px;
    margin: 50.5px auto;
}

.background-container[b-5x3rkgqkrl] {
    position: relative;
    background-color: #F7F7F7;
    overflow: auto;
}

.settings-container[b-5x3rkgqkrl] {
    width: 256px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-bottom: 40px;
}

[b-5x3rkgqkrl]::-webkit-scrollbar {
    width: 2px;
}

[b-5x3rkgqkrl]::-webkit-scrollbar-thumb {
    background: #919191;
    border-radius: 3px;
}
/* /Pages/SetupPage/SetupPage.razor.rz.scp.css */
.page-container[b-iooprmrfga] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-iooprmrfga] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.btn-i[b-iooprmrfga] {
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    height: 38px;
    margin: 15px 29.5px;
    display: flex;
    align-items: center;
}

.btn-icon[b-iooprmrfga] {
    width: 17px;
    height: 17px;
    margin-left: 28.6px;
}

.button-icon[b-iooprmrfga] {
    margin-left:26.5px;
    margin-right:21px;
    width: 20px;
    display: flex;
    align-content: center;
}

.btn-span[b-iooprmrfga] {
    font-size: 13px;
    height:15px;
}

.btn-arrow[b-iooprmrfga] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid #7E8081;
    border-radius: 10px;
    width: 43.31px;
    height: 38px;
    position: absolute;
    right: 0px;
}

.arrow-btn[b-iooprmrfga] {
    height: 12px;
    width: 6.5px;
}

.arrow[b-iooprmrfga] {
    height: 25px;
    width: 25px;
    margin-right: 15px;
    margin-left: 25px;
}
/* /Pages/SupportServicesCarePage/SupportServicesCarePage.razor.rz.scp.css */
.page-container[b-78sb9413as] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-78sb9413as] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

span[b-78sb9413as] {
    display: inline;
    vertical-align: middle;
    font-size: 13px;
    height: 15px;
}

/* Contacts */

#frame-contacts[b-78sb9413as] {
    width: 90%;
    margin: auto;
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 50vh;
}

.pop-contacts[b-78sb9413as] {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    height: 43px;
    gap: 6px;
}

.pop-icon[b-78sb9413as] {
    height: 30px;
    width: 30px;
    margin-right: 10.8px;
    margin-left: 4px;
}

.bg[b-78sb9413as] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    height: 43.16px;
    border-radius: 10px;
    text-align: center;
}

.bg-1[b-78sb9413as] {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    text-align: left;
    justify-content: left;
    flex-grow: 2;
}

.bg-2[b-78sb9413as] {
    flex-grow: 0.9;
}

.bg-3[b-78sb9413as] {
    background-color: #202020;
}

.bg-4[b-78sb9413as] {
    background-color: #202020;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
    width: 40.5px;
    flex-grow: 0;
}
/* /Pages/SupportServicesPage/SupportServicesPage.razor.rz.scp.css */
.page-container[b-06im2inacm] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.logo-container[b-06im2inacm] {
    width: fit-content;
    margin: auto;
    /*margin-top: 87.5px;*/
    margin-top: 11vh;
}

.title[b-06im2inacm] {
    text-align: center;
    margin-top: 9.8vh;
    font-size: 28px;
    color: #E6E6E6;
}

.instruction[b-06im2inacm] {
    line-height: 19px;
    margin: auto;
    margin-top: 23px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    font-size: 15px;
    color: #A8A8A8;
}

hr[b-06im2inacm] {
    margin: 0;
    height: 1px;
    width: 100%;
}

.divider-top[b-06im2inacm] {
    /*margin-top: 38px;*/
    margin-top: 4.5vh;
}

.divider-bottom[b-06im2inacm] {
    margin-bottom: 44px;
    margin-bottom: 5.5vh;
}

.copyright[b-06im2inacm] {
    position: absolute;
    bottom: 50px;
    font-size: 7px;
    left: 50%;
    transform: translate(-50%, 0);
}

/*Responsive section*/

@media (max-height: 760px) {
    .copyright[b-06im2inacm] {
        bottom: 40px;
    }

    .responsive-contact-container[b-06im2inacm] {
        height: 24vh;
    }
}

@media (max-height: 720px) {
    .logo-container[b-06im2inacm] {
        margin-top: 9vh;
    }

    .title[b-06im2inacm] {
        margin-top: 9vh;
    }

    .copyright[b-06im2inacm] {
        bottom: 30px;
    }

    .responsive-contact-container[b-06im2inacm] {
        height: 20vh;
    }
}

@media (max-height: 680px) {
    .logo-container[b-06im2inacm] {
        margin-top: 8vh;
    }

    .title[b-06im2inacm] {
        margin-top: 8vh;
    }

    .copyright[b-06im2inacm] {
        bottom: 20px;
    }
    .responsive-contact-container[b-06im2inacm] {
        height: 18vh;
    }
}

@media (max-height: 640px) {
    .logo-container[b-06im2inacm] {
        margin-top: 7vh;
    }

    .title[b-06im2inacm] {
        margin-top: 7vh;
    }

    .copyright[b-06im2inacm] {
        bottom: 15px;
    }
    .responsive-contact-container[b-06im2inacm] {
        height: 16vh;
    }
}

@media (max-height: 600px) {
    .logo-container[b-06im2inacm] {
        margin-top: 6vh;
    }

    .title[b-06im2inacm] {
        margin-top: 6vh;
    }
    .responsive-contact-container[b-06im2inacm] {
        height: 14vh;
    }
}

@media (max-height: 540px) {
    .logo-container[b-06im2inacm] {
        margin-top: 4vh;
    }

    .title[b-06im2inacm] {
        margin-top: 4vh;
    }

    .copyright[b-06im2inacm] {
        bottom: 10px;
    }
    .responsive-contact-container[b-06im2inacm] {
        height: 12vh;
    }
}

@media (max-height: 470px) {
    .copyright[b-06im2inacm] {
        position: relative;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .responsive-contact-container[b-06im2inacm] {
        height: 10vh;
    }
}
/* /Pages/SustainabilityPage/SustainabilityPage.razor.rz.scp.css */
.page-container[b-aqfadzpmlr] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-aqfadzpmlr] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

.btn-i[b-aqfadzpmlr] {
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    height: 38px;
    margin: 15px 29.5px;
    display: flex;
    align-items: center;
}

.button-icon[b-aqfadzpmlr] {
    margin-left:25px;
    margin-right:22px;
    width: 21px;
    display: flex;
    align-content: center;
}

.btn-span[b-aqfadzpmlr] {
    font-size: 13px;
    height: 14px;
}

.btn-arrow[b-aqfadzpmlr] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid #7E8081;
    border-radius: 10px;
    width: 43.31px;
    height: 38px;
    position: absolute;
    right: 0px;
}

.arrow-btn[b-aqfadzpmlr] {
    height: 12px;
    width: 6.5px;
}

.arrow[b-aqfadzpmlr] {
    height: 25px;
    width: 25px;
    margin-right: 15px;
    margin-left: 25px;
}
/* /Pages/UnityTestPage/UnityTestPage.razor.rz.scp.css */
/* /Pages/UpdatesPage/UpdatesPage.razor.rz.scp.css */
.page-container[b-pp8131v9jj] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.page-body[b-pp8131v9jj] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

#frame[b-pp8131v9jj] {
    width: 85%;
    margin: 0 auto;
}

.tab[b-pp8131v9jj] {
    background-color: #F7F7F7;
    height: 38px;
    width: 93.31px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tab span[b-pp8131v9jj] {
        height: 10px;
        line-height: 1;
    }

.active[b-pp8131v9jj] {
    background-color: #FFF;
    border: 1px solid #707070;
}

.frame-desc[b-pp8131v9jj] {
    height: 38px;
    width: 100%;
    text-align: left;
    display: inline-flex;
    justify-content: space-between;
    margin-bottom: 14.9px;
    background-color: #FFF;
    border-radius: 10px;
}

.frame-img[b-pp8131v9jj] {
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    width: 27.53px;
    margin-right: 17.5px;
    margin-left: 22.5px;
}
/* /Pages/UserAgreementPage/UserAgreementPage.razor.rz.scp.css */
.page-container[b-86t9gkp32o] {
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.logo-container[b-86t9gkp32o] {
    width: fit-content;
    margin: auto;
/*    margin-top: 75px;*/
    margin-top: 9.2vh;
}

.divider[b-86t9gkp32o] {
    margin: 0;
    margin-top: 3.6vh;
}

.license-container[b-86t9gkp32o] {
    position: relative;
    /*height: 440px;*/
    height: 54vh;
    margin-top: 6px;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #232323;
    padding-top: 10px;
    padding-bottom: 10px;
}

.blink-arrow[b-86t9gkp32o] {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 56px;
    width: 45px;
    border: 1px solid #3A3A3A;
    border-radius: 12px;
    background-color: #F9F9F9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blink-arrow img[b-86t9gkp32o]{
    height: 37px;
    width: 14px;
}

.license-title[b-86t9gkp32o] {
    font-size: 15px;
}

.license-text[b-86t9gkp32o] {
    font-size: 12px;
    white-space: pre-line;
    width: 86%;
    margin: auto;
}

.language-selector-container[b-86t9gkp32o] {
    width: fit-content;
    margin: auto;
}


@keyframes flickerAnimation-b-86t9gkp32o {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-flicker[b-86t9gkp32o] {
    -webkit-animation: flickerAnimation 4s infinite;
    -moz-animation: flickerAnimation 4s infinite;
    -o-animation: flickerAnimation 4s infinite;
    animation: flickerAnimation-b-86t9gkp32o 4s infinite;
}


/*Responsive section*/
@media (max-height: 720px) {
    .logo-container[b-86t9gkp32o] {
        margin-top: 8.5vh;
    }

    .license-container[b-86t9gkp32o] {
        height: 52vh;
    }

    .divider[b-86t9gkp32o] {
        margin-top: 3.6vh;
    }
}

@media (max-height: 680px) {
    .logo-container[b-86t9gkp32o] {
        margin-top: 8vh;
    }

    .license-container[b-86t9gkp32o] {
        height: 50vh;
    }

    .divider[b-86t9gkp32o] {
        margin-top: 3.6vh;
    }
}

@media (max-height: 640px) {
    .logo-container[b-86t9gkp32o] {
        margin-top: 7.5vh;
    }

    .license-container[b-86t9gkp32o] {
        height: 48vh;
    }

    .divider[b-86t9gkp32o] {
        margin-top: 3vh;
    }
}

@media (max-height: 600px) {
    .logo-container[b-86t9gkp32o] {
        margin-top: 7vh;
    }

    .license-container[b-86t9gkp32o] {
        height: 46vh;
    }

    .divider[b-86t9gkp32o] {
        margin-top: 3vh;
    }
}

@media (max-height: 600px) {
    .logo-container[b-86t9gkp32o] {
        margin-top: 7vh;
    }

    .license-container[b-86t9gkp32o] {
        height: 43vh;
    }

}
/* /Pages/VehicleCarePage/VehicleCarePage.razor.rz.scp.css */
.page-container[b-3q1izpcu56] {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
}

.page-body[b-3q1izpcu56] {
    background-color: #EFEFEF;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

/* Utils */

.center[b-3q1izpcu56] {
    display: block;
    margin: auto calc((100vw - 169px)/2);
    width: auto;
}

.invisible[b-3q1izpcu56] {
    display: none;
}

.border[b-3q1izpcu56] {
    width: 40px;
    height: 25px;
    text-align: center;
    display: initial;
    padding: 3.5px;
}

/* Btns */

#bottom-layer[b-3q1izpcu56] {
    display: flex;
    background-color: #EFEFEF;
    position: relative;
    flex-grow: 1;
    height: 260px;
}

.frame[b-3q1izpcu56] {
    margin: auto;
    width: 178.29px;
    height: 134.5px;
}

.btn-i[b-3q1izpcu56] {
    background-color: #fff;
    text-align: left;
    font-size: 11px;
    position: relative;
    width: 100%;
    height: 37px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.btn-icon[b-3q1izpcu56] {
    width: 17px;
    height: 17px;
    margin-left: 18.7px;
}

.btn-span[b-3q1izpcu56] {
    height: 11px;
    margin-left: 15px;
    vertical-align: middle;
}

#fll[b-3q1izpcu56] {
    display: inline-flex;
    width: 22.76px;
    height: 22.76px;
    border-radius: 50%;
    right: 8px;
    bottom: 8px;
    position: absolute;
    background-color: #fff;
}

/* Inspector */

#inspector[b-3q1izpcu56] {
    position: absolute;
    background-color: #fff;
    z-index: 5;
    height: 250px;
    width: 350px;
    border-radius: 10px;
    left: calc((100vw - 350px)/2);
    top: max(calc((100vh - 400px)/2), 130px);
}

/* Screen */

#screen[b-3q1izpcu56] {
    height: calc(100% - 260px);
    display: inline-flex;
    position: relative;
    min-height: 275px;
    background-color: #202020;
}

.video-blocker[b-3q1izpcu56] {
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background-color: rgba(145, 145,145, 0.27);
}

.container[b-3q1izpcu56] {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.prototype-text[b-3q1izpcu56] {
    min-height: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    background-color: white;
    border-radius: 12px;
    width: 75vw;
}
/* /Pages/VideoRecordinsPage/VideoRecordingsPage.razor.rz.scp.css */
.page-container[b-zdnqfcw44j] {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh; 
}

.page-body[b-zdnqfcw44j] {
    background-color: #EFEFEF;
    flex-grow: 1;
    overflow: auto;
}

/* Utils */

.center[b-zdnqfcw44j] {
    display: block;
    margin: 0 auto;
    width: auto;
}

.invisible[b-zdnqfcw44j] {
    display: none;
}

.border[b-zdnqfcw44j] {
    border-style: solid;
    border-width: thin;
    border-color: #cecece;
}

.btn-i[b-zdnqfcw44j] {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    height: 38px;
    margin: 7.5px 29.5px;
}

.btn-arrow[b-zdnqfcw44j] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    border: 1px solid #7E8081;
    border-radius: 10px;
    width: 43.31px;
    height: 38px;
    position: absolute;
    right: 0px;
}

.arrow-div[b-zdnqfcw44j] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 22px;
    margin-left: 28px;
    width: 17.5px;
    height: 17.5px;
}

.arrow-btn[b-zdnqfcw44j] {
    height: 12px;
    width: 6.5px;
}


/* General */
.general[b-zdnqfcw44j] {
    display: inline-block;
    font-size: 13px;
    height: 15px;
    width: 85px;
}

.menu[b-zdnqfcw44j] {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(110px, 1fr) );
    justify-items: center;
}

.frame[b-zdnqfcw44j] {
    position: relative;
    height: 69.49px;
    width: 123.53px;
    background-color: #202020;
    margin: 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* img */

.fav[b-zdnqfcw44j] {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.play[b-zdnqfcw44j] {
    width: 25px;
}
/* /Pages/WelcomePage/WelcomePage.razor.rz.scp.css */
.page-container[b-c66qxn5i8n] {
 /*   display: flex;
    flex-direction: column;
    align-items: center;*/
    background-image: url(/images/pngs/initial-screens-bg-x1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.logo-container[b-c66qxn5i8n] {
    width: fit-content;
    margin: auto;
    /*margin-top: 87.5px;*/
    margin-top: 11vh;
}

.title[b-c66qxn5i8n] {
    margin-top: 9.8vh;
    font-size: 27px;
    text-align: center;
    color: #E6E6E6;
}

.create-account[b-c66qxn5i8n] {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 35px;
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 20px;
    margin: auto;
    margin-top: 8.5vh;
}

.welcome-divider[b-c66qxn5i8n] {
    margin: 0;
    margin: auto;
    margin-top: 5.5vh;
    width: 55%;
    border-top: 1px solid #666666;
    text-align: center;
}

.login-container[b-c66qxn5i8n] {
    margin-top: 35px;
    margin-top: 4.5vh;
    line-height: 1;
}

.login-button[b-c66qxn5i8n] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 234px;
    min-height: 35px;
    background-color: #F7F7F7;
    border: 1px solid #F7F7F7;
    border-radius: 20px;
    font-size: 13px;
    margin: auto;
    margin-bottom: 11.5px;
}

.login-button-icon-container[b-c66qxn5i8n] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 18px;
    margin-left: 22px;
    margin-right: 16.5px;
}

.login-button-icon[b-c66qxn5i8n]{
}

.copyright[b-c66qxn5i8n] {
    position: absolute;
    bottom: 50px;
    font-size: 7px;
    left: 50%;
    transform: translate(-50%, 0);
}

/*Responsive section*/

    @media (max-height: 760px) {
        .copyright[b-c66qxn5i8n] {
            bottom: 40px;
        }
    }


    @media (max-height: 720px) {
        .logo-container[b-c66qxn5i8n] {
            margin-top: 9vh;
        }

        .title[b-c66qxn5i8n] {
            margin-top: 9vh;
        }

        .welcome-container[b-c66qxn5i8n] {
            margin-top: 7.5vh;
        }

        .create-account[b-c66qxn5i8n] {
            margin-top: 7.5vh;
        }
        .copyright[b-c66qxn5i8n] {
            bottom: 30px;
        }
    }

    @media (max-height: 680px) {
        .logo-container[b-c66qxn5i8n] {
            margin-top: 8vh;
        }

        .title[b-c66qxn5i8n] {
            margin-top: 8vh;
        }

        .welcome-container[b-c66qxn5i8n] {
            margin-top: 7vh;
        }

        .create-account[b-c66qxn5i8n] {
            margin-top: 7vh;
        }

        .copyright[b-c66qxn5i8n] {
            bottom: 20px;
        }
    }

    @media (max-height: 640px) {
        .logo-container[b-c66qxn5i8n] {
            margin-top: 7vh;
        }

        .title[b-c66qxn5i8n] {
            margin-top: 7vh;
        }

        .welcome-container[b-c66qxn5i8n] {
            margin-top: 6.5vh;
        }

        .create-account[b-c66qxn5i8n] {
            margin-top: 6.5vh;
        }

        .copyright[b-c66qxn5i8n] {
            bottom: 15px;
        }
    }

    @media (max-height: 600px) {
        .logo-container[b-c66qxn5i8n] {
            margin-top: 6vh;
        }

        .title[b-c66qxn5i8n] {
            margin-top: 6vh;
        }

        .welcome-container[b-c66qxn5i8n] {
            margin-top: 6vh;
        }

        .create-account[b-c66qxn5i8n] {
            margin-top: 6vh;
        }
    }

    @media (max-height: 550px) {
        .logo-container[b-c66qxn5i8n] {
            margin-top: 4vh;
        }

        .title[b-c66qxn5i8n] {
            margin-top: 4vh;
        }

        .welcome-container[b-c66qxn5i8n] {
            margin-top: 4vh;
        }

        .create-account[b-c66qxn5i8n] {
            margin-top: 4vh;
        }

        .copyright[b-c66qxn5i8n] {
            bottom: 10px;
        }
    }

@media (max-height: 470px) {
    .copyright[b-c66qxn5i8n] {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-1bj5tlvxqh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-1bj5tlvxqh] {
    flex: 1;
}

.sidebar[b-1bj5tlvxqh] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-1bj5tlvxqh] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-1bj5tlvxqh]  a, .top-row .btn-link[b-1bj5tlvxqh] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-1bj5tlvxqh] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-1bj5tlvxqh] {
        display: none;
    }

    .top-row.auth[b-1bj5tlvxqh] {
        justify-content: space-between;
    }

    .top-row a[b-1bj5tlvxqh], .top-row .btn-link[b-1bj5tlvxqh] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-1bj5tlvxqh] {
        flex-direction: row;
    }

    .sidebar[b-1bj5tlvxqh] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-1bj5tlvxqh] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-1bj5tlvxqh] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ok71tffzpw] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-ok71tffzpw] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ok71tffzpw] {
    font-size: 1.1rem;
}

.oi[b-ok71tffzpw] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-ok71tffzpw] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ok71tffzpw] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ok71tffzpw] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ok71tffzpw]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-ok71tffzpw]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-ok71tffzpw]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ok71tffzpw] {
        display: none;
    }

    .collapse[b-ok71tffzpw] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}