.phone{

    /*TAB START*/
    .NavBar{
        background-color: var(--PanelBackground);
        width: 60%;
        max-width: 300px;
        min-width: 280px;
        height: 80px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        border-radius: 10px 10px 0px 0px;
        z-index: 9999;
        
        display: grid;
        grid-template-columns: auto auto;
    }
    
    .TabButton{
        width: 70px;
        height: 70px;
        background-color: var(--PanelButton);
        border-radius: 10px;
        margin: auto;
        font-size: small;
        font-weight: 900;
        align-items: center;
        justify-content: center;
        text-align: center;
        display: flex;
        gap: 32px;
        user-select: none;
        cursor: pointer;
    }
    
    .TabButton:hover{
        background-color: var(--PanelButtonHover);
    }
    
    .TabButton:active{
        background-color: var(--PanelButtonPress);
    }
    
    .TabButton.selected{
        background-color: var(--PanelButtonSelected);
    }
    
    .TabButton p {
        padding: 0px;
        margin: 0px;
        align-self: end;
        position: absolute;
        bottom: 10px;
    }
    
    .TabButton img{
        width: 32px;
        height: 32px;
        position: absolute;
        top: 15px;
    }
    
    .TabButton p {
        padding: 0px;
        margin: 0px;
    }
    
    .TabButton img{
        width: 32px;
        height: 32px;
    }
    
    .DeviceSelector {
        position: absolute;
    
        top: clamp(
            90px,
            calc(50% - 210px),
            100%
        );
    
        left: 0;
        right: 0;
        margin: auto;
    
        width: 80%;
        max-width: 800px;
        height: 60%;
        min-height: 420px;
        max-height: 460px;
    
        box-sizing: border-box;
    
        background-color: var(--PanelBackground);
        border-radius: 10px;
    
        display: grid;
        grid-template-rows: 20% 80%;
        gap: 20px;
        padding: 20px;
    }
    
    .DeviceSearch, .DeviceList{
        background-color: var(--PanelBackgroundSecondary);
        width: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        height: 90%;
        bottom: 0px;
        margin: auto;
        border-radius: 10px;
    }
    
    .DeviceSelector .DeviceSearch input{
        all: unset;
        width: 100%;
        height: 100%;
        text-align: center;
        font-weight: 900;
        font-size: x-large;
        cursor:text;
    }
    
    .DeviceSelector .DeviceSearch input:hover{
        outline: 2px var(--PanelButtonHover) solid;
        border-radius: 10px;
    }
    
    .DeviceSelector .DeviceSearch input:focus{
        outline: 2px var(--ForegroundText) solid;
        border-radius: 10px;
    }
    
    .DeviceSelector .DeviceList{
        display: grid;
        grid-template-columns: 100%;
        grid-auto-rows: max-content;
        gap: 10px;
        padding: 10px;
        box-sizing: border-box;
        align-content: start;
        justify-content: center;
        overflow-x: scroll;
    }
    
    
    .DeviceButton{
        width: 90%;
        height: 60px;
        background-color: var(--PanelButton);
        border-radius: 10px;
        margin: auto;
        font-size: x-large;
        font-weight: 900;
        align-items: center;
        justify-content: center;
        text-align: center;
        display: flex;
        gap: 32px;
        user-select: none;
        cursor: pointer;
    }
    
    .DeviceButton:hover{
        background-color: var(--PanelButtonHover);
    }
    
    .DeviceButton:active{
        background-color: var(--PanelButtonPress);
    }
    
    .DeviceButton p {
        padding: 0px;
        margin: 0px;
    }
    
    .DeviceButton img{
        width: 32px;
        height: 32px;
    }
    
    /* Settings Start */
    
    #SettingsTabView {
        position: absolute;
    
        bottom: clamp(
            90px,
            calc(50% - 360px),
            100%
        );
    
        left: 0;
        right: 0;
        margin: auto;
    
        width: 100%;
        max-width: 600px;
    
        height: 80%; 
        min-height: 620px; 
        max-height: 750px;
    
        box-sizing: border-box;
    
        border-radius: 10px;
    
        display: flex;
        flex-direction: column;
    
        gap: 20px;
        padding: 20px;
    
        overflow-y: scroll;
        align-items: center;
    }
    
    
    .SettingTab p,
    .SettingContent p,
    .SettingProperty p {
        margin: 0;
        padding: 0;
    }
    
    .SettingTab {
        width: 100%;
        min-height: 60px;
    
        background-color: var(--PanelButton);
        border-radius: 10px;
    
        text-align: center;
    
        position: relative;
    
        font-weight: 900;
        font-size: x-large;
    
        box-sizing: border-box;
    
        flex-shrink: 0;
    }
    
    
    /* Tab Hover Effect */
    .SettingTab.closed > p{
        border-radius: 10px;
    }
    
    .SettingTab.open > p{
        border-radius: 10px 10px 0px 0px;
    }
    
    .SettingTab > p {
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    
        margin: 0;
    }
    
    .SettingTab > p:hover {
        background-color: var(--PanelButtonHover);
    }
    
    .SettingTab > p:active {
        background-color: var(--PanelButtonPress);
    }
    
    
    .SettingTab.closed > .SettingContent {
        display: none;
    }
    
    .SettingContent {
        width: 100%;
    
        min-height: 60px;
    
        background-color: var(--PanelBackgroundSecondary);
    
        border-radius: 0 0 10px 10px;
    
        display: flex;
        flex-direction: column;
    
        gap: 10px;
    
        align-items: center;
    
        box-sizing: border-box;
    
        padding: 20px 0;
    }
    
    
    /* Nested content */
    .SettingContent .SettingContent {
        border: 2px solid var(--PanelButton);
        border-top: none;
    }
    
    .SettingProperty {
        width: 90%;
        min-height: 120px;
    
        box-sizing: border-box;
    
        border-bottom: 1px solid var(--PanelButton);
    
        background-color: var(--PanelBackground);
    
        border-radius: 10px;
        flex-shrink: 0;
        overflow-y: scroll;
        text-wrap-mode:wrap;
    
        position: relative;
        padding-bottom: 10px;
    }
    
    .SettingProperty:last-child {
        border-bottom: none;
    }
    
    .PropertyContainer{
        margin-top: 10px;
    }
    
    /*Property Types*/
    
    .Input{
        all: unset;
        background-color: var(--PanelBackgroundSecondary);
        border-radius: 10px;
    }
    
    .Input.readonly{
        pointer-events: none;
    }
    
    .BasicText.Input{
        width: 80%;
        height: 50px;
        font-size: medium;
        text-align: left;
        padding: 5px;
    }
    
    .MultiText.Input{
        width: 80%;
        height: 100px;
        font-size: medium;
        text-align: left;
        padding: 5px;
    }
    
    .Number.Input{
        width: 80%;
        height: 50px;
        font-size: medium;
        text-align: left;
        padding: 5px;
    }
    
    .Drop.Input{
        width: 80%;
        height: 50px;
        font-size: medium;
        padding: 5px;
    }
    
    .Input:hover{
        outline: 2px var(--PanelButtonHover) solid;
        border-radius: 10px;
    }
    
    .Input:focus{
        outline: 2px var(--ForegroundText) solid;
        border-radius: 10px;
    }
    
    /*Account Button*/
    #AccountButton{
        width: 64px;
        height: 64px;
        margin: 10px;
        position: relative;
        top: 0px;
        left: 0px;
        align-content: center;
        text-align: center;
        user-select: none;
    }
    
    #AccountButton #account-popover-button{
        all: unset;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    #AccountButton img{
        cursor: pointer;
        width: 100%;
        position: relative;
        pointer-events: none;
    }
    
    #AccountButton .Menu{
        position: absolute;
        top: 8px;
        background-color: var(--PanelBackground);
        border-radius: 10px;
    
        width: 250px;
        z-index: 99;
        border: 1px solid var(--ForegroundText);
        font-weight: 900;
    
    }
    
    #AccountButton .Menu .MenuBox{
        height: 50px;
        border-bottom: 1px solid;
        justify-content: center;
        align-content: center;
    }
    
    #account-popover-button{
        background-color: var(--PanelButton) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
    }
    
    #account-popover-button:hover{
        background-color: var(--PanelButtonHover) !important;
    }
    
    #account-popover-button:active{
        background-color: var(--PanelButtonPress) !important;
    }
    
    #AccountButton #account-popover{
        position-area: bottom;
    }
    
    #AccountButton .Menu .MenuBox:last-child{
        border-bottom: none;
    }
    
    #AccountButton .Menu .MenuBox.Button{
        background-color: var(--PanelButton);
        cursor: pointer;
    }
    
    #AccountButton .Menu .MenuBox.Button:hover{
        background-color: var(--PanelButtonHover);
    }
    
    #AccountButton .Menu .MenuBox.Button:active{
        background-color: var(--PanelButtonPress);
    }
}