.mainSplashscreenContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-bg-1);
    overflow: hidden;
}

.splashScreenCenter {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 19px;
    font-weight: 400;
    gap: 16px;
}

body {
    color: white;
    background-color: var(--color-bg-1);
    overflow: hidden;
    user-select: none;
}

.splashScreenCenter {
}

.splashScreenLogo {
    background-image: url(../img/newlogo.png);
    height: 29vh;
    aspect-ratio: 2;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

p.splashScreenText {
    font-size: 21px;
    font-weight: 600;
}

.splashScreenLogo.enlargedOut {
    height: 71vh;
    transition: 0.4s linear;
}

.splashScreenSubtext.error {
    /* color: red; */
    font-weight: normal;
    background-color: var(--color-error);
    padding: 7px 14px;
    border-radius: 14px;
    font-size: 15px;
}

.mainAppContainer {
    display: flex;
    height: 100vh;
    width: 100vw;
    /* gap: 11px; */
    /* padding: 12px; */
    box-sizing: border-box;
}

.mainAppMenuBar {
    display: flex;
    flex-direction: column;
    gap: 17px;
    width: 205px;
    border-right: 1px solid #c29ffb52;
    /* padding: 10px 0px; */
    /* padding-left: 10px; */
    /* padding-right: 7px; */
    flex-shrink: 0;
}

.menuBarTopLogo {
    width: 200px;
    height: 100px;
    flex-shrink: 0;
    /* background-color: red; */
    background-image: url(../img/newLogoText.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 17px;
    margin-left: auto;
    margin-right: auto;
}

.mainAppTabList {
    flex-grow: 1;
}

.menuBarTopMenu {
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex-grow: 1;
    overflow: hidden;
}

.mainMenuTab {
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    background: linear-gradient(90deg, var(--color-bg-1), 8%,var(--color-bg-2),66%, var(--color-card-active));
    transition: 0.15s linear;
    background-position: 0% 0px;
    background-size: 200%;
    /* border-radius: 5px 0px 0px 5px; */
    cursor: pointer;
    border-right: 3px solid var(--color-bg-3);
    margin: 0px 6px;
    position: relative;
}

    .mainMenuTab:last-child {
        /* margin-top: auto; */
    }

.mainMenuImage {
    width: 35px;
    height: 35px;
    /* background-color: green; */
    background-position: center;
    background-size: 87%;
    background-repeat: no-repeat;
}

.mainMenuTab.active {
    /* background: linear-gradient(90deg, var(--color-bg-3), var(--color-bg-3)); */
    background-position: -173px 0px;
    border-right: 3px solid var(--color-tab-lighter);
}

.mainMenuTab:not(.active):hover {
    /* background: linear-gradient(90deg, var(--color-bg-2), var(--color-bg-3)); */
    background-position: -90px 0px;
}

.mainMenuImage.home {
    background-image: url(../img/home.png);
}

.mainMenuImage.preview {
    background-image: url(../img/vr.png);
}

.mainMenuImage.deviceViewer {
    background-image: url(../img/device.png);
}

.mainMenuImage.support {
    background-image: url(../img/help.png);
}

.mainMenuImage.settings {
    background-image: url(../img/settings.png);
}

.mainAppTabList {
    /* background-color: var(--color-bg-2); */
    margin: 10px;
    overflow: hidden;
    /* margin-right: 5px; */
    align-items: stretch;
    display: flex;
}

.mainTab.home {
    flex-direction: column;
}

.homeTopPart {
    flex-grow: 1;
    position: relative;
    flex-shrink: 1;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

.homeAvailableDevices {
    display: flex;
    flex-direction: column;
    margin: auto;
    /* padding: 10px; */
    /* width: 1000px; */
    /* gap: 10px; */
    background-color: var(--color-bg-2);
    border-radius: 12px;
    overflow: hidden;
    max-width: 900px;
}

.homeAvailableDevicesHeader {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    align-items: center;
    font-size: 15px;
    font-weight: 300;
    padding-right: 8px;
}

.homeAvailableDevice {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 7px;
    min-width: 50px;
}

.homeAvailableDevicesBody {
    display: flex;
    gap: 10px;
    padding: 9px;
    background-color: var(--color-bg-3);
    min-height: 50px;
    overflow-x: auto;
}

.afButton {
    background-color: var(--color-tab);
    padding: 4px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: 0.12s linear;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

    .afButton:not(.disabled):hover {
        background-color: var(--color-tab-hover);
    }

    .afButton:not(.disabled):active {
        background-color: var(--color-tab-active);
    }

.homeAvailableDevicesHeader > span:first-of-type {
    font-size: 18px;
    font-weight: 600;
}

.homeTopPartProfileSelector {
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 10px;
    background-color: var(--color-bg-3);
    width: 285px;
}

.homeEditSettingsModalTopPartRow {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    justify-content: start;
}

select {
    cursor: pointer;
    background-color: var(--color-bg-1);
    color: white;
    outline: none;
    border: 1px solid var(--color-card-active);
    border-radius: 9px;
    padding: 3px 4px;
    width: auto;
}

.homeEditSettingsModalTopPartRow > select {
    flex-grow: 1;
}

.homeBodyHolder {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 125px;
    justify-content: center;
    align-items: stretch;
    height: 133px;
    flex-grow: 1;
}

.homeBodyHolderFreeDevices {
    gap: 11px;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto 0;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
    align-content: flex-end;
    padding: 0px 6px;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    max-height: 90%;
    width: 332px;
    margin-left: -300px;
}

.homeBodyHolderSlotFree {
    width: 30px;
    height: 30px;
    background-color: white;
}

.homeBodyHolderBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: blueviolet; */
    background-image: url(../img/HumamMale2Purple.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 107%;
}

.homeBodyHolderSlot {
    width: 52px;
    height: 52px;
    background-color: #2c2039e3;
    border: 2px solid #ffffff96;
    border-radius: 9px;
    position: relative;
    /* overflow: hidden; */
    border-radius: 8px;
    flex-shrink: 0;
}

    .homeBodyHolderSlot.body {
        position: absolute;
    }

        .homeBodyHolderSlot.body.Head {
            top: -2%;
            left: calc(50% - 25px);
        }

        .homeBodyHolderSlot.body.LeftArm {
            top: 7%;
            left: 24%;
        }

        .homeBodyHolderSlot.body.RightArm {
            top: 7%;
            right: 24%;
        }

        .homeBodyHolderSlot.body.RightLeg {
            right: 22%;
            bottom: 18%;
        }

        .homeBodyHolderSlot.body.LeftLeg {
            bottom: 18%;
            left: 24%;
        }

        .homeBodyHolderSlot.body.LeftFoot {
            left: 17%;
            bottom: 0%;
        }

        .homeBodyHolderSlot.body.RightFoot {
            right: 15%;
            bottom: 0%;
        }

        .homeBodyHolderSlot.body.Chest {
            left: calc(50% - 26px);
            top: 19%;
        }

        .homeBodyHolderSlot.body.Waist {
            top: 38%;
            left: calc(50% - 26px);
        }

        .homeBodyHolderSlot.body.LeftController {
            top: 32%;
            left: 00%;
        }

        .homeBodyHolderSlot.body.RightController {
            top: 32%;
            right: 0%
        }

.homeBodyHolderBody {
    position: relative;
    height: 70vh;
    aspect-ratio: 1;
    margin: auto 0;
    top: -13px;
}

.bodySlotCompatibilityBackground.RX {
    background-image: url(../img/RXoutline5px.png);
    background-size: 40%;
}

.bodySlotCompatibilityBackground.TX {
    background-image: url(../img/TXoutline5px.png);
    background-size: 88%;
}


.bodySlotCompatibilityBackground {
    background-size: 44%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    filter: brightness(0.8);
    pointer-events: none;
    transition: 0.12s linear;
    border-radius: 6px;
}


.mainTab {
    position: relative;
    flex-direction: row;
    gap: 9px;
    display: flex;
    overflow: auto;
    flex-grow: 1;
}

::backdrop {
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0;
    background-color: #000000cf;
}

dialog#homeAddDeviceDialog {
    height: 375px;
    width: 304px;
}

dialog {
    background-color: var(--color-bg-1);
    color: var(--color-text);
    border: none;
    border-radius: 12px;
    padding: 14px;
    padding: 0px;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    user-select: none;
}


.dialogDevicesToAddContainer {
    flex-grow: 1;
    background-color: var(--color-bg-3);
    border-radius: 10px;
    padding: 6px 6px;
    display: flex;
    gap: 4px;
    flex-direction: column;
    overflow-y: auto;
}

.afButton.confirm {
    background-color: var(--color-buy);
}

    .afButton.confirm:not(.disabled):hover {
        background-color: var(--color-buy-hover);
    }

    .afButton.confirm:not(.disabled):active {
        background-color: var(--color-buy-active);
    }



.dialogAddDevicesOptions {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1px;
}

.dialogAddDevicesOptionDivider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.orSide {
    flex-grow: 1;
    border-top: 1px solid white;
}

.dialogAddDevicesOption.inputButton {
    display: flex;
    gap: 7px;
    margin-top: 4px;
}

.dialogAddDevicesOption > input {
    width: 1px;
    flex-grow: 1;
}

.modalCloseButton {
    width: 24px;
    height: 24px;
    background-image: url(../img/close.png);
    background-size: 66%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.12s linear;
}

    .modalCloseButton:hover {
        background-color: #ffffff1f;
    }

    .modalCloseButton:active {
        background-color: #ffffff2e;
    }

.dialogAddDevicesOption.text {
    margin-bottom: -3px;
    font-size: 15px;
    font-weight: 300;
}

.afButton.newDevicesAddSmall {
    font-size: 13px;
}


.dialogHeader {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    align-items: center;
    background-color: var(--color-bg-2);
    padding: 6px 10px;
    padding-top: 7px;
}

.dialogBody {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 8px;
    padding-top: 7px;
    overflow: hidden;
}

dialog[open] {
    display: flex;
}

.commandLine {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.devCommandInputs {
    display: flex;
    flex-direction: row;
    gap: 58px;
    overflow: auto;
    padding: 4px;
    /* justify-content: space-between; */
    flex-grow: 1;
}

.command-name {
    white-space: nowrap;
}

.dev-command {
    background-color: var(--color-bg-3);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.commandName {
    width: 100%;
    background-color: var(--color-card-active);
    padding: 4px 12px;
}

.commandBody {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.devCommandInput {
    display: flex;
    gap: 5px;
    font-weight: 300;
    font-size: 15px;
}

span.commandH2Text {
    font-size: 15px;
    font-weight: 500;
}

input {
    background-color: var(--color-bg-1);
    color: white;
    outline: none;
    border: 1px solid var(--color-card-active);
    border-radius: 9px;
    padding: 3px 6px;
    width: auto;
}

    input.commandInputBox[type=text] {
        width: 114px;
    }

    input.commandInputBox[type=number] {
        width: 70px;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
    }

.commandResponse {
    user-select: all;
    padding: 1px 8px;
    background-color: var(--color-card-active);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
}

.commandStatus.ok {
    color: #5bd55b;
}

.commandStatus.error {
    color: #fb7878;
}


.addingDevicePicture {
    width: 30px;
    height: 30px;
}

.deviceImg {
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

    .deviceImg.RX {
        background-image: url(../img/devicePics/RX1.webp);
        background-size: 83%;
    }

    .deviceImg.TX {
        background-image: url(../img/devicePics/TX3.webp);
        background-size: 80%;
        background-position: center center;
    }

    .deviceImg.HUB {
        background-image: url(../img/devicePics/HUB3.webp);
        background-size: 94%;
        background-position: center 43%;
    }

    .deviceImg.EdgeRF {
        background-image: url(../img/link.png);
        background-size: 76%;
    }

.deviceToAdd {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    background-color: var(--color-bg-2);
    border-radius: 8px;
    position: relative;
}

    .deviceToAdd.child {
        margin-left: 22px;
    }

.afButtonImg {
    width: 20px;
    height: 20px;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 1px;
}

    .afButtonImg.confirm {
        background-image: url(../img/tick.png);
    }

.deviceToAdd > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.homeDeviceInSlot {
    width: 100%;
    height: 100%;
    cursor: move;
    position: relative;
    transition: 0.12s linear;
    background-color: #ffffff29;
    border-radius: 5px;
}

    .homeDeviceInSlot:hover {
        background-color: #ffffff1f;
    }

.bodySlotCompatibilityBackground.draggingOver {
    background-color: #27cf6dc9;
}

    .bodySlotCompatibilityBackground.draggingOver.wrong {
        background-color: #d14747d4;
    }


.homeDeviceTooltipWrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
}

.homeDeviceTooltipButton {
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 71%;
    background-repeat: no-repeat;
    background-color: #ffffff1a;
    border-radius: 7px;
    border: 2px solid #ffffffad;
    cursor: pointer;
    transition: 0.12s linear;
}

    .homeDeviceTooltipButton:not([disabled=true]):hover {
        background-color: #ffffff38;
    }

    .homeDeviceTooltipButton:not([disabled=true]):active {
        background-color: #ffffff6b;
    }

.homeDeviceTooltipBottomRow {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    justify-content: space-around;
}

.homeDeviceTooltipTopRow {
    text-align: center;
    font-weight: 600;
    font-size: 17px;
    margin-top: 1px;
    padding: 0px 1px;
}

.batteryLevelIcon {
    width: 20px;
    height: 20px;
    background-color: white;
}

.signalLevelIcon {
    width: 20px;
    height: 20px;
    background-color: white;
}

.homeDeviceTooltipMiddleRow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 9px;
    background-color: #000000d6;
    padding: 5px 10px;
    bottom: 0;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px 10px 0px 0px;
}

.homeDeviceTooltipButton.identify {
    background-image: url(../img/magnifying-glass.png);
}

.homeDeviceTooltipButton.edit {
    background-image: url(../img/share.png);
}

.homeDeviceTooltipButton.unassign {
    background-image: url(../img/remove.png);
}

.homeDeviceTooltipButton.remove {
    background-image: url(../img/delete.png);
}

.batteryIconPercentage {
    margin-left: -1px;
}

.batteryIconImg {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.batteryIcon {
    display: flex;
    align-items: center;
}

.batteryIconImg.batteryIcon0 {
    background-image: url(../img/battery0.png);
}

.batteryIconImg.batteryIcon25 {
    background-image: url(../img/battery25.png);
}

.batteryIconImg.batteryIcon50 {
    background-image: url(../img/battery50.png);
}

.batteryIconImg.batteryIcon75 {
    background-image: url(../img/battery75.png);
}

.batteryIconImg.batteryIcon100 {
    background-image: url(../img/battery100.png);
}


.networkIconImg {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* margin-bottom: 1px; */
}

.trackingQualityIconImg {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 1px;
}

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

.trackingQualityIcon {
    display: flex;
    align-items: center;
}

.networkIconImg.networkIcon0.rf {
    background-image: url(../img/signal0.png)
}

.networkIconImg.networkIcon25.rf {
    background-image: url(../img/signal25.png)
}

.networkIconImg.networkIcon50.rf {
    background-image: url(../img/signal50.png)
}

.networkIconImg.networkIcon75.rf {
    background-image: url(../img/signal75.png)
}

.networkIconImg.networkIcon100.rf {
    background-image: url(../img/signal100.png)
}


.networkIconImg.networkIcon0 {
    background-image: url(../img/disconnected.png);
}

.networkIconImg.networkIcon25 {
    background-image: url(../img/connected.png);
}

.networkIconImg.networkIcon50 {
    background-image: url(../img/connected.png);
}

.networkIconImg.networkIcon75 {
    background-image: url(../img/connected.png);
}

.networkIconImg.networkIcon100 {
    background-image: url(../img/connected.png);
}


.trackingQualityIconImg.trackingIcon0 {
    background-image: url(../img/tracking0.png)
}

.trackingQualityIconImg.trackingIcon50 {
    background-image: url(../img/tracking50.png)
}

.trackingQualityIconImg.trackingIcon100 {
    background-image: url(../img/tracking100.png)
}


.homeDeviceInSlot > .networkIcon > .networkIconImg {
    width: 14px;
    height: 14px;
}

.homeDeviceInSlot > .networkIcon {
    background-color: #000000d9;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    position: absolute;
    bottom: 3px;
    right: 3px;
}

.tooltipBigDeviceImage.deviceImg {
    height: 77px;
    position: relative;
    overflow: hidden;
    background-size: contain;
    margin: auto;
    width: 141px;
}

.tooltipBigDeviceImageContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff12;
    border-radius: 8px;
    overflow: hidden;
}

    .tooltipBigDeviceImageContainer > .tooltipBigDeviceImage.deviceImg {
        margin: 7px;
    }



.homeTooltipEnableDevice {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 6px;
    background-color: #000000e8;
    border-radius: 0px 0px 0px 10px;
    padding-bottom: 4px;
}

.disabledBigToolbarIconOverlay {
    background-image: url(../img/disabled.png);
    background-size: 62%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    background-color: #000000c2;
    border-radius: 6px;
}

.toolbarDeviceDetailsDisbaledText {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000cf;
    box-sizing: border-box;
    padding-top: 36px;
    text-align: center;
}

.homeDeviceTooltipButton[disabled=true] {
    filter: brightness(0.3);
    cursor: default;
}


span.modalSmallText {
    font-size: 14px;
    max-width: 307px;
    text-align: center;
}

.afModalSimpleLine > input {
    flex-grow: 1;
}

.afModalSimpleLine {
    display: flex;
    gap: 6px;
    align-items: center;
}

span.modalSmallTextBold {
    font-weight: 500;
    color: #ff8585;
}

.deviceViewerLeft {
    display: flex;
    flex-direction: row;
    width: 248px;
    align-items: stretch;
    flex-shrink: 0;
}

.deviceViewerDeviceDetails {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000096;
    border-radius: 10px;
}

.mainTab.deviceViewer {
    display: flex;
    align-items: stretch;
}

.deviceViewerAvailableDevices {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--color-bg-2);
    border-radius: 10px;
    gap: 0px;
    overflow: hidden;
    width: 227px;
    flex-shrink: 0;
}

.deviceViewerAvailableDevicesBody {
    flex-grow: 1;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: auto;
    height: 1px;
}

.deviceViewerAvailableDevicesHeader {
    font-size: 17px;
    padding: 6px 10px;
    background-color: var(--color-bg-3);
    padding-bottom: 3px;
    display: flex;
    justify-content: space-between;
    padding-right: 8px;
}

.deviceInfoHorizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    flex-grow: 1;
}

.deviceInfoBottom {
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
}

.deviceInfoHorizontalImg {
    width: 48px;
    height: 48px;
    background-color: #ffffff2e;
    border-radius: 10px;
}

.deviceViewerAvailableDevice {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 5px;
    background-color: var(--color-bg-3);
    border-radius: 10px;
    padding-bottom: 6px;
    transition: 0.12s linear;
    cursor: pointer;
    height: 50px;
}

.deviceInfoRight {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.deviceInfoTop {
    text-align: center;
    max-width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: auto;
}

.deviceViewerAvailableDevice:hover {
    background-color: var(--color-card-hover);
}

.deviceViewerAvailableDevice:active {
    background-color: var(--color-card-active);
}

.deviceInfoHorizontalDisabledText {
    font-size: 14px;
    text-align: center;
    font-weight: 300;
}

.deviceDetailsTop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 9px;
    padding-left: 13px;
    background-color: var(--color-bg-3);
    height: 25px;
}

.deviceDetailsContainer {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-2);
    height: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.deviceViewerInnerDetails {
    width: 100%;
    height: 100%;
}

.deviceDetailsTopLeft {
    display: flex;
    align-items: center;
    gap: 9px;
}

.deviceDetailsTopRight {
    display: flex;
    flex-direction: row;
    gap: 38px;
    align-items: center;
}

.deviceDetailsTopRightIcons {
    display: flex;
    align-items: center;
    gap: 7px;
}

.deviceViewerEnableSwitch {
    height: 17px;
}

.deviceDetailsTopLeftName {
    font-size: 17px;
    margin-top: 2px;
}

.deviceDetailsBottom {
    padding: 7px 6px;
    flex-grow: 1;
    padding-top: 9px;
    display: flex;
    flex-direction: column;
    /* gap: 8px; */
    overflow: hidden;
    position: relative;
}

.deviceDetailsTabHeader {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff38;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    flex-shrink: 0;
    gap: 1px;
}

.deviceDetailsTabHeaderItem {
    flex-grow: 1;
    text-align: center;
    padding: 5px 4px;
    padding-bottom: 3px;
    cursor: pointer;
    /* width: min(200px, 15%); */
    width: 10px;
    transition: 0.12s linear;
    background-color: var(--color-bg-3);
}

    .deviceDetailsTabHeaderItem.selected {
        border-bottom: 1px solid #ffffff91;
        background-color: var(--color-card-active);
    }

.deviceDetailsTabBody {
    flex-grow: 1;
    background-color: var(--color-bg-1);
    padding: 8px;
    padding-top: 8px;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    height: 145px;
}

.deviceDetailsTabBodyItem {
    display: none;
}

    .deviceDetailsTabBodyItem.selected {
        display: flex;
    }

.deviceDetailsTabBodyItem {
    display: none;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    overflow: auto;
    align-items: baseline;
    gap: 12px;
}

    .deviceDetailsTabBodyItem.selected {
        display: flex;
    }

.normalObjectViewerShowChildren {
    width: 20px;
    height: 20px;
    background-image: url(../img/dropdown.png);
    background-size: 71%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transform: rotate(-90deg);
}

.normalObjectSubObjectHeader {
    display: flex;
    align-items: center;
    gap: 5px;
}

.normalObjectViewerSingleLine {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}

.normalObjectSubObjectBodyContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 15px;
}

.normalObjectViewerAnotherObjectContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 10px;
    padding: 7px 10px;
    padding-bottom: 8px;
}

.normalObjectViewerShowChildren.childrenShown {
    transform: rotate(0deg);
}


input.normalObjectViewerSingleLineValue {
    width: 84px;
}


.objectViewerDarkerBackground {
    background-color: #ffffff14;
}

.normalObjectViewerSingleLine.objectViewerDarkerBackground {
    padding: 7px 9px;
    border-radius: 10px;
}

input.normalObjectViewerSingleLineValue[type=checkbox] {
    width: auto;
    margin-left: -2px;
}

.normalObjectViewerName {
    text-transform: capitalize;
    font-weight: 300;
}

.afButtonWhite {
    width: 22px;
    height: 22px;
    background-size: 68%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff2b;
    border-radius: 4px;
    cursor: pointer;
}

    .afButtonWhite.edit {
        background-image: url(../img/pencil.png);
        background-size: 63%;
    }

    .afButtonWhite.confirm {
        background-image: url(../img/tick.png);
    }

    .afButtonWhite:hover {
        background-color: #ffffff38;
    }

    .afButtonWhite:active {
        background-color: #ffffff4f;
    }

.normalObjectViewerSingleValueNOEdit {
    margin-left: -2px;
    font-weight: 500;
}

.matrixArrayViewerRow {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.matrixViewerSingleBox {
    min-width: 85px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.matrixArrayViewerBody {
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
}

.matrixArrayViewerColumn {
    display: flex;
    flex-direction: row;
    gap: 11px;
    padding: 3px 0px;
}

input[type=checkbox] {
    accent-color: #ffffff;
}

.colorViewerNONEditableColor {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin: auto;
    border: 2px solid #ffffffb0;
}

input.normalObjectViewerSingleLineValue[type=color] {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.colorViewerBody {
    margin: auto;
}

.deviceViewerAvailableDevice.selected {
    background-color: var(--color-card-active);
}

.anotherFieldEditInProgressOverlay {
    width: 100%;
    height: 100%;
    background-color: #000000db;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.deviceDetailsTypeNormal {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.deviceCurrentlyOfflineOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000d4;
    flex-direction: column;
    gap: 10px;
}

.deviceOfflineIcon.Big {
    width: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 36px;
    background-image: url(../img/signal0.png);
}

div#deviceDetails {
    padding: 10px;
    height: 100vh;
    box-sizing: border-box;
}

.afButtonWhite.openDeviceDetailsInAnotherWindow {
    background-image: url(../img/share.png);
}

.deviceDetailsBottomExtra {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 9px;
    height: 60px;
    overflow: hidden;
}

.deviceDetailsBottomExtraSide {
    background-color: var(--color-bg-1);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    width: 10px;
}

.deviceDetailsBottomExtraSideHeader {
    background-color: var(--color-card-active);
    text-align: center;
    padding: 5px;
    position: relative;
}

.deviceDetailsBottomExtraSideBody {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.deviceDetailsLoggingEnableSwitch {
    position: absolute;
    right: 7px;
    height: 17px;
    top: 7px;
    padding: 1px;
    background-color: #000000c2;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px black;
}

.selectGroupMinimumLoggingLevel {
    position: absolute;
    right: 46px;
    top: 4px;
}

.loggingDisabledOverlay {
    position: absolute;
    width: 100%;
    height: 34px;
    top: 0;
    left: 0;
    background-color: #000000f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logLine {
    display: flex;
    gap: 6px;
    font-size: 13px;
    border-bottom: 1px solid #ffffff70;
    margin-right: 4px;
    user-select: text;
}

.logMessageLevel.Info {
    color: #b3b3ed;
}


.logContainer {
    display: flex;
    flex-direction: column;
    padding: 0px 2px;
    overflow: auto;
    height: 96%;
    flex-grow: 1;
    margin: 4px;
}

.logMessageTime {
    width: 53px;
    flex-shrink: 0;
    text-align: center;
}

.logMessageLevel {
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

    .logMessageLevel.Debug {
        color: #acf5ac;
    }

.afButton.clear {
    border: 1px solid #ffffff6e;
    position: absolute;
    top: 4px;
    left: 5px;
    height: 16px;
    font-weight: 400;
}

.extraRowMagFields {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ffffff8c;
    padding-top: 1px;
}

.magFieldsRowPower {
    min-width: 85px;
    text-align: center;
    border-left: 1px solid #ffffffc2;
    align-content: center;
    white-space: nowrap;
    flex-grow: 1;
}

span.magFieldsBolder {
    font-weight: 500;
}

.extraRowMagFieldsTotalPower {
    text-align: center;
    margin-top: 3px;
}

.magFieldsColumnPower {
    width: 1px;
    flex-grow: 1;
    text-align: center;
}

.mainTab.tracking {
    display: flex;
}

.trackingPreviewRight {
    flex-grow: 1;
    overflow: hidden;
    border: 1px solid #ffffff4a;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.trackingPreviewCanvasHolder {
    overflow: hidden;
    flex-grow: 1;
    position: relative;
    background-color: var(--color-bg-4);
}

.selectedItemDatumContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--color-card);
    position: absolute;
    padding: 6px 10px;
    border-radius: 10px;
    top: 7px;
    padding-top: 0px;
    right: 7px;
    overflow: hidden;
    width: 308px;
    /* box-shadow: 0px 0px 2px 0px white; */
}

.selectedItemDatumData {
    font-weight: 300;
    font-size: 14px;
    margin-left: 24px;
    gap: 10px;
    display: flex;
    flex-direction: row;
}

.trackingPreviewSelectedItemTitle {
    text-align: center;
    margin-bottom: -7px;
    font-size: 18px;
    margin: 0px -18px;
    background-color: var(--color-card-active);
    padding-top: 2px;
}

img.previewControlsImg {
    width: 27px;
    height: 27px;
}

.trackingPreviewControlsOverlayItem {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}

.trackingPreviewControlsOverlay {
    display: flex;
    gap: 29px;
    justify-content: center;
    position: absolute;
    bottom: 9px;
    margin: auto;
    width: 380px;
    background-color: var(--color-bg-3);
    padding: 9px 9px;
    left: 0px;
    right: 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 0px white;
}

.trackingPreviewChartsHolder {
    background-color: var(--color-bg-2);
    display: flex;
    height: 263px;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    flex-direction: row;
}

.trackingPreviewShowGraph.hide {
    left: 5px;
    top: 5px;
    background-image: url(../img/close.png);
    background-size: 73%;
}

.trackingPreviewShowGraph {
    width: 24px;
    height: 24px;
    background-color: var(--color-bg-2);
    position: absolute;
    border-radius: 5px;
    border: 2px solid #470c6d;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

    .trackingPreviewShowGraph:hover {
        background-color: var(--color-bg-3);
    }

    .trackingPreviewShowGraph.show {
        left: 5px;
        top: 5px;
        background-image: url(../img/chart.png);
        background-size: 68%;
    }

.trackingPreviewChartOptions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 12px;
    align-items: center;
}

.trackingPreviewChartOption {
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

    .trackingPreviewChartOption > input {
        width: 85px;
        flex-grow: 1;
    }

        .trackingPreviewChartOption > input[type=checkbox] {
            flex-grow: 1;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

.trackingPreviewChartSettingsRow {
    display: flex;
    gap: 11px;
    justify-content: space-around;
}

.selectedItemDatumData > span:hover {
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

div#trackingPreviewContainer {
    display: flex;
    align-items: stretch;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    margin: auto;
    gap: 10px;
    padding: 10px 10px;
}

.afButtonWhite.arrowRight {
    position: absolute;
    bottom: 5px;
    left: 32px;
    background-image: url(../img/dropDown.png);
    transform: rotate(-90deg);
}

.afButtonWhite.arrowLeft {
    background-image: url(../img/dropDown.png);
    transform: rotate(90deg);
}

.trackingPreviewExtraButtonsContainer {
    display: flex;
    gap: 5px;
    margin-top: 1px;
}

.afButtonWhite.openDeviceDetailsInAnotherWindow.trackingViewerOpenOnNewWindow {
    position: absolute;
    bottom: 5px;
    left: 5px;
}


.homeAddDevicesAvailableCount {
    background-color: var(--color-buy-active);
    border-radius: 33px;
    padding: 0px 7px;
    padding-top: 1px;
    margin-right: -5px;
}

.afButton.addNewDevice {
    gap: 7px;
}

.homeDeviceTooltipButton.remove.addDeviceModal {
    position: absolute;
    right: 3px;
    opacity: 0;
    background-color: #2d2d2d;
}

.deviceToAdd:hover > .homeDeviceTooltipButton.remove.addDeviceModal {
    opacity: 1
}

.homeDeviceTooltipButton.remove.addDeviceModal:hover {
    background-color: #404040;
}

.deviceDetailsBottomExtraSide.firmware {
    width: 375px;
    flex-grow: 0;
}

.deviceDetailsBottomExtraSideBody.firmware {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 8px 10px;
}

.deviceDetailsFirmwareUpdateRow {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-self: center;
}

.deviceDetailFirmwareRowRow {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.deviceDetailsFirmwareUpdateRow.row {
    flex-direction: row;
    gap: 5px;
}

.firmwareUpdateDetailsLine {
    width: 96%;
    border-top: 1px solid #ffffff59;
    margin: 0px auto;
}

a {
    color: white;
}

.progressBarOuter {
    width: 260px;
    height: 22px;
    border: 1px solid #ffffff9c;
    border-radius: 10px;
    flex-grow: 1;
    background-color: #ffffff14;
    position: relative;
    overflow: hidden;
}

.progressBarOverlay {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 2px 11px;
    box-sizing: border-box;
    font-size: 13px;
    position: absolute;
    top: 0;
    left: 0;
}

.progressBarInner {
    background-color: var(--color-buy-hover);
    height: 100%;
    border-radius: inherit;
}

.afButtonWhite.upload {
    background-image: url(../img/uploadBig.png);
}

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

.afButtonWhite.restart {
    background-image: url(../img/restart.png);
    background-size: 60%;
}

.afButtonWhite.resetSettings {
    background-image: url(../img/settingsReset.png);
    background-size: 70%;
}

.afButtonWhite.turnOff {
    background-image: url(../img/powerButton.png);
    background-size: 80%;
}

.logMessageLevel.Warning {
    color: gold;
}

.logMessageLevel.Error {
    color: #ff3333;
}

.mainTab.devCommands {
    flex-direction: column;
}

.afButtonWhite.versus {
    text-align: center;
    background-image: url(../img/percentage.png);
    background-size: 56%;
}

.afButtonWhite.back {
    background-image: url(../img/back.png);
    background-size: 87%;
}

.linearOptionChooser {
    display: flex;
    background-color: var(--color-bg-1);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ffffff36;
}

.linearOptionChooserOption {
    padding: 3px 9px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.12s linear;
}

    .linearOptionChooserOption.selected {
        background-color: var(--color-card-active);
    }

    .linearOptionChooserOption:hover:not(.selected) {
        background-color: var(--color-card-hover);
    }

.homeDeviceInSlot.deviceImg.hovered {
    background-color: #7a4eaebd;
    box-shadow: inset 0px 0px 4px 0px #ffffffb5;
}

.settingNormalItem.bool {
}

.settingNormalItem {
    display: flex;
    align-items: center;
    gap: 4px;
}

.settingsBottomContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 7px;
}

.settingsGroup {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-2);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.mainTab.settings {
    display: flex;
    flex-direction: column;
    gap: 11px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: stretch;
}

.settingsTopHeaderPart {
    background-color: var(--color-bg-3);
    padding: 4px 9px;
}

.settingGroupTitle {
    font-size: 17px;
}

.settingItemLabel {
    font-size: 15px;
}

.afButtonGroup {
    display: flex;
    gap: 13px;
}

.settingsTabBottomButtonsContainer {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 5px;
    border-top: 1px solid #ffffff4a;
    padding-bottom: 2px;
    padding-top: 10px;
    align-items: center;
}

.settingsTabBottomButtonsContainer {
}

.settingsTabSettingsGroupContainer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: stretch;
    overflow: auto;
}

.afButton.cancel {
    background-color: #913535;
}

    .afButton.cancel:not(.disabled):hover {
        background-color: #a74545;
    }

    .afButton.cancel:not(.disabled):active {
        background-color: #bb5858;
    }

.afButton.disabled {
    filter: brightness(0.6);
    /*border: 1px solid white;*/
    cursor: not-allowed;
}

.homeAvailableDevicesSeparator {
    border: 1px solid #ffffff5e;
    margin: -2px 0px;
}

.homeDeviceInSlot.noDragging {
    cursor: default;
}

.deviceInSlotEquippedOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 98%;
    flex-grow: 1;
    /* border: 2px solid #ffffffe0; */
    box-sizing: border-box;
    border-radius: 7px;
    border-bottom: 0px;
}

.deviceInSlotEquippedOverlayIcon {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #000000bf;
    background-image: url(../img/user.png);
    background-size: 64%;
    background-position: center;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffffc4;
    /* border-top: none; */
    /* border-left: 0px; */
    border-radius: 7px 0px 6px 0px;
}

.mainMenuTab:has(.settings) {
    /* margin-top: auto; */
}

.homeEditSettingsModalTopPartRow.bottomTabBar {
    margin-top: auto;
}

.homeEditSettingsModalTopPartRow.bottomTabBar {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.homeLeftBarDownContainer {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-bg-2);
    border-top: 1px solid #ffffff4d;
    padding: 5px;
    flex-shrink: 0;
}

    .homeLeftBarDownContainer.miniPart.activities {
        flex-direction: column;
        gap: 3px;
        align-items: center;
        border: none;
        padding-top: 3px;
    }

.homeLeftBardDownStatusContainer {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 15px;
}

.homeLeftBardDownStatusContainerImage {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background-color: #d33535;
    border: 2px solid #ffffffde;
}

.homeLeftBarDownContainer.miniPart.advancedMode {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 400;
}

.homeLeftBarDownContainer.miniPart.advancedMode {
    border: none;
}


.deviceInSlotEquippedOverlayOuter {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
    justify-content: end;
}

.deviceInSlotStatusBar {
    bottom: 4px;
    position: absolute;
    left: 4px;
    right: 4px;
    height: 4px;
    background-color: #000000fc;
    border-radius: 10px;
    /* border-top: 1px solid #ffffff94; */
    /* margin-bottom: 3px; */
    /* margin-left: 4px; */
    /* margin-right: 4px; */
}

.homeDeviceInSlot.deviceImg {
    /* background-position: center 32%; */
}

    .homeDeviceInSlot.deviceImg.HUB {
        background-position: center 33%;
        background-size: 80%;
    }


    .homeDeviceInSlot.deviceImg.EdgeRF {
        background-size: 59%;
    }



.deviceInSlotStatusBar.Offline {
    background-color: #000000ba;
    /* box-shadow: inset 0 1px 1px 0px #ffffffab; */
}

.deviceInSlotStatusBar.Connecting {
    background-color: #bb58e3;
}

.deviceInSlotStatusBar.ConnectedNonTracking {
    background-color: #6363ff;
}

.deviceInSlotStatusBar.TrackingError {
    background-color: #cd2d2d;
}

.deviceInSlotStatusBar.TrackingOK {
    background-color: #58ba5c;
}

.mainMenuImage.devCommands {
    background-image: url(../img/code.png);
}

.afButtonWhite.identify {
    background-image: url(../img/magnifying-glass.png);
    background-size: 63%;
}

.hmdMiniPicture {
    width: 28px;
    height: 28px;
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center;
}

.linearOptionChooserOption.selectorWithIMG {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.linearOptionChooser.HMDSelector {
    max-width: 358px;
    flex-wrap: wrap;
    justify-content: space-around;
}

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

.customProfileAdapterCoordsContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 11px;
    background-color: var(--color-bg-3);
    border-radius: 10px;
    width: 186px;
}

.customProfileAdapterCoordsRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

input.customProfileAdapterCoordsItemInput {
    width: auto;
    flex-shrink: 1;
    min-width: 1px;
}

.AutoDetect > .hmdMiniPicture {
    background-image: url(../img/hmd/auto.png);
    height: 20px;
}

.ValveIndex > .hmdMiniPicture {
    background-image: url(../img/hmd/index.png);
    background-color: #ffffffb5;
    border-radius: 5px;
}

.Quest3 > .hmdMiniPicture {
    background-image: url(../img/hmd/quest3.png);
}

.Custom > .hmdMiniPicture {
    background-image: url(../img/hmd/custom.png);
    background-size: 80%;
}

.homeEditSettingsModalTopPartRow.checkbox {
    gap: 3px;
}

.dialogBody.editableProfileSettings {
    gap: 11px;
    padding: 10px;
}

.homeProfileSetitngPreviewHMD.selectorWithIMG.HMDSelectorOption {
    display: flex;
    gap: 4px;
    align-items: center;
}

.homeProfileSettingPreview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--color-bg-2);
    border-radius: 9px;
    padding: 0px 7px;
}

span.homeProfileSettingsTitle {
    font-weight: 400;
}

.homeEditSettingsModalTopPartRow.smaller {
    font-weight: 300;
    font-size: 14px;
}

.homeEditSettingsModalButtonRow {
    display: flex;
    gap: 5px;
}

.afButtonWhite.add {
    background-image: url(../img/add.png);
    background-size: 63%;
}

.afButtonWhite.delete {
    background-image: url(../img/trash.png);
    background-size: 67%;
}

.homeLeftBardDownStatusContainerImage.NotConnected {
}

.homeLeftBardDownStatusContainerImage.ConnectedWeird {
    background-color: #eeb400;
}

.homeLeftBardDownStatusContainerImage.OK {
    background-color: #308a30;
}

.homePartWarningsContainer {
    background-color: #5555137a;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 2px solid yellow;
    position: absolute;
    top: 0px;
    left: 0px;
}

.homePartWarningsInnerContainer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.homePartWarningItem {
    background-color: #131109;
    border-radius: 10px;
    padding: 7px 10px;
    display: flex;
    flex-direction: row;
    gap: 9px;
    font-size: 15px;
    align-items: center;
}

.homePartWarningIcon {
    width: 28px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 7px;
    background-image: url(../img/warning.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: -3px;
}

.warningIconAppTabList {
    width: 28px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 7px;
    background-image: url(../img/warning.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;
}

.homeBodyHolderBackground.DIY {
    background-image: url(../img/DIY.png);
    background-size: 50%;
    opacity: 0.4;
    background-position: 1% center;
}


.homeBodyHolderSlot.body.TrackingOrigin {
    left: 70%;
    top: 43%;
}

.bodySlotCompatibilityBackground.All {
    background-image: url(../img/CompatAll.png);
    background-size: 40%;
}

.menuBarTabListContainer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow-y: auto;
}

.bodySlotCompatibilityBackground.hideBG {
    background-image: none;
}

.bodySlotCompatibilityBackground.RXDepth {
    background-image: url(../img/RXoutline5pxTOF.png);
    background-size: 63%;
}

.deviceImg.RXDepth {
    background-image: url(../img/devicePics/RXW3Depth.png);
    background-size: 75%;
}

.deviceInSlotBatteryOverlayTopRight {
    position: absolute;
    right: 0px;
    background-color: #b91c1cc7;
    padding: 2px;
    border-radius: 0px 5px 0px 5px;
}

    .deviceInSlotBatteryOverlayTopRight > .batteryIcon > .batteryIconImg {
        width: 16px;
        height: 16px;
    }

.deviceIDSameLineButton {
    display: flex;
    gap: 5px;
    align-items: center;
}

.deviceInSlotStatusBar.TrackingNeedsMovement {
    background-color: #ff9400;
}

.deviceDetailsBottomExtraSide.manyThings {
    flex-grow: 0;
    width: 320px;
    height: min-content;
}

.mainMenuImage.updateManager {
    background-image: url(../img/update.png);
}

.updateManagerOverlay {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000000ba;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.updateManagerOverlayCenterItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.updateManagerOverlayLoadingIcon {
    background-image: url(../img/newlogo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 27px;
    height: 27px;
}

.updateManagerCatergoryTitle {
    background-color: var(--color-card-active);
    width: 100%;
    background-color: var(--color-card-active);
    padding: 4px 12px;
}

.updateManagerCategory {
    background-color: var(--color-bg-3);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.updateManagerCategoryContainer {
    padding: 10px 12px;
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    gap: 11px;
    font-size: 15px;
    font-weight: 300;
}

.mainTab.updateManager {
    flex-direction: column;
    padding-right: 9px;
}

.updateManagerItem {
    display: grid;
    grid-template-columns: 286px 165px 165px auto;
    align-items: anchor-center;
    justify-items: center;
    height: 30px;
}

.updateManagerMissingRequirementsIcon {
    width: 25px;
    height: 25px;
    background-image: url(../img/warning.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.updateManagerMissingRequirements {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
}

.updateManagerUpToDateIcon {
    width: 20px;
    height: 20px;
    background-image: url(../img/tick.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.updateManagerUpToDate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 4px;
}

.deviceImg.updateManagerNameIcon {
    width: 30px;
    height: 30px;
}

.updateManagerItemName {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 400;
    justify-self: self-start;
    width: 100%;
    background-color: #ffffff2b;
    border-radius: 10px;
    padding-left: 3px;
}

.deviceImg.Basic {
    background-image: url(../img/newlogo.png);
    background-size: 74%;
}

.updateManagerVersionHolder {
    font-size: 15px;
    font-weight: 300;
    align-self: center;
}

span.updateManagerVersionHolderVersion {
    font-weight: 500;
}

.updateManagerStartUpdateButtonContainer {
    width: min-content;
    justify-self: start;
}

.updateManagerTryAgainButtonContainer {
    width: min-content;
    justify-self: start;
}

.updateManagerErrorIcon {
    width: 25px;
    height: 25px;
    background-image: url(../img/remove.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.updateManagerErrorState {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-self: start;
}

.updateManagerUploadInProgress {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 7px;
}

.updateManagerWaitingForRestart {
    justify-self: start;
}

.updateManagerUpdatePendingCircleTab {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #31a131;
    border-radius: 100px;
    width: 21px;
    height: 21px;
    text-align: center;
    font-size: 14px;
}

.updateManagerProgressBarOuter {
    width: 150px;
    height: 14px;
    background-color: var(--color-bg-1);
    border-radius: 10px;
    overflow: hidden;
    /* border: 1px solid #ffffff63; */
}

.updateManagerProgressBarInner {
    background-color: var(--color-buy-active);
    height: 100%;
}

.updateManagerUploadInProgress > span {
    font-weight: 400;
}

.homeDeviceInSlot.deviceImg.TX {
    background-position: center 8%;
}

.homeDeviceInSlot.deviceImg.RX {
    background-position: center -8%;
}

.deviceImg.USBDongle {
    background-image: url(../img/devicePics/Dongle4.webp);
    background-position: center 52%;
    background-size: 82%;
}

.deviceImg.SPI_USB_Bridge {
    background-image: url(../img/hub.png);
    background-size: 64%;
}

.homeDeviceInSlot.deviceImg.USBDongle {
    background-position: center 13%;
}

.homeProfileSeparator {
    border-top: 1px solid #ffffff45;
    margin-top: 2px;
}

.homeProfileSectionTitle {
    text-align: center;
}

.homeProfileQuickActionsBodyContainer {
    background-color: var(--color-bg-2);
    border-radius: 10px;
    display: grid;
    padding: 7px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.homeProfileSectionContainer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.homeProfileContainerBodyProfile {
    background-color: var(--color-bg-2);
    padding: 7px 7px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.noQuickActionsAvailableText {
    text-align: center;
    margin: 7px 0px;
    font-size: 13px;
    font-weight: 300;
    grid-column: 1/10;
}

.homeProfileQuickActionItem {
    width: auto;
    background-color: var(--color-bg-3);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 5px;
    transition: 0.12s linear;
    cursor: pointer;
    align-items: stretch;
}

.homeProfileQuickActionIcon {
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

span.quickActionName {
    font-size: 14px;
    text-align: center;
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}

.homeProfileQuickActionItem:hover {
    background-color: var(--color-bg-4);
}

.homeProfileQuickActionIcon.createKinematicModel {
    background-image: url(../img/calibrate.png);
    background-size: 34%;
}

.homeProfileQuickActionIcon.recenterKinematicModel {
    background-image: url(../img/target.png);
    background-size: 32%;
}

.dialogBody.modalquickRecalicationBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 15px;
}

.modalCalibrationExplanationShort {
    max-width: 600px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
}

.modalQuickRecenteringHowTo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.modalQuickRecenteringHowToPic {
    width: 200px;
    height: 200px;
    background-color: red;
}

.modalQuickRecenteringHowToText {
    max-width: 504px;
    text-align: center;
}

.modalCalibrationTitle {
    font-size: 26px;
}

.dialogBody.modalquickRecalicationBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 15px;
}

.modalCalibrationExplanationShort {
    max-width: 767px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
}

.modalQuickRecenteringHowTo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.modalQuickRecenteringHowToPic {
    width: 200px;
    height: 200px;
    background-color: #80008073;
    border: 2px solid #ffffff78;
}

.modalQuickRecenteringHowToText {
    margin-top: -4px;
    max-width: 560px;
    text-align: center;
    font-size: 15px;
}

.modalCalibrationTitle {
    font-size: 26px;
}

.dialogBody.modalCreateCalibrationBody {
    padding: 15px;
    align-items: center;
}

.createLegModelSideSelectorBody {
    display: flex;
    background-color: var(--color-bg-2);
    align-items: center;
    /* box-shadow: 0 0 1px 1px #ffffff61; */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ffffff59;
}

.createLegModelSideSelectorOption {
    padding: 10px 15px;
    cursor: pointer;
}

    .createLegModelSideSelectorOption:hover {
        background-color: var(--color-bg-3);
    }


    .createLegModelSideSelectorOption.selected {
        background-color: var(--color-bg-4);
    }

.legModelCalibrationHowToPic {
    width: 305px;
    height: 250px;
    background-color: var(--color-bg-3);
    border: 2px solid #ffffff91;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modalCreateLegCalibrationWorkArea {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 15px 15px;
    border: 1px solid #ffffff26;
    background-color: var(--color-bg-2);
    border-radius: 17px;
    min-width: 500px;
    min-height: 150px;
    justify-content: center;
}

.legModelCalibrationHowToText {
    margin-top: -4px;
    max-width: 560px;
    text-align: center;
    font-size: 15px;
}

.dof6PlusCalibrationModalButtonRow {
    display: flex;
    gap: 15px;
}

.none > .hmdMiniPicture {
    background-size: 57%;
    margin-right: -5px;
    margin-left: -3px;
}

.deviceViewerAvailableDevicesFooterTest {
    font-size: 13px;
    text-align: center;
    font-weight: 300;
}

.deviceViewerAvailableDevicesFooter {
    background-color: var(--color-bg-3);
    padding: 5px 10px;
}

.legModelCalibrationHowToPic.takeBaseline {
    background-image: url(../img/deg90picFloor.png);
    width: 211px;
}

.legModelCalibrationHowToPic.allDone {
    background-image: url(../img/tick.png);
    background-size: 56%;
    width: 100px;
    height: 100px;
}

.homeBodySlotText {
    position: absolute;
    bottom: -31px;
    left: calc( 50% - 39px );
    width: 78px;
    text-align: center;
    background-color: #3e2c52ed;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 300;
    padding: 2px 0px;
    padding-top: 4px;
    box-shadow: 0 0 2px 0 #ffffffcc;
}

.TrackingOrigin > .homeBodySlotText {
    width: 110px;
    left: calc(50% - 55px);
    bottom: -33px;
}

.LeftController > .homeBodySlotText, .RightController > .homeBodySlotText {
    width: 104px;
    left: calc(50% - 52px);
}


.homeProfileQuickActionIcon.floorHeight {
    background-image: url(../img/ceiling.png);
    background-size: 34%;
}

.tipIconInformation {
    width: 24px;
    height: 24px;
    background-image: url(../img/information.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modalQuickActionTip {
    display: flex;
    gap: 7px;
    align-items: center;
}

.modalQuickActionTipText {
    font-size: 14px;
    font-weight: 300;
}


.dialogBody.modalCalibrateFloorHeight {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 15px;
}

.modalCalibrateFloorHeightHowTo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    margin-top: 5px;
}

.homeDeviceInSlot.deviceImg.highlighted {
    box-shadow: inset 0 0 3px 1px #f6effff5;
}

.deviceViewerAvailableDevice.highlighted {
    box-shadow: 0px 0px 5px 1px inset #ffffffd6;
}

.settingsFastSeparator {
    border-top: 1px solid;
    margin: 5px 1px;
}