#pos, #pos2
{
    display: inline-block;
    white-space: pre-wrap;
}

#loc, #loc2
{
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    left: -500px;
    top: -500px;
    box-sizing: border-box;
    border: 3px solid #FF00FF;
}

.overlayS
{
    position: absolute;
    left: 0;
    top: 0;
}

.overlayS > div:not(.group), .overlayS > div.group > div
{
    position: absolute;
    border: 1px dashed green;
    background-color: rgba(255, 0, 255, 0.5);
    box-sizing: border-box;
}

.overlayS > div:not(.group).selected
{
    background-color: rgba(0, 255, 0, 0.5);
}

.overlayS > div.group.selected > div
{
    background-color: rgba(0, 255, 0, 0.5);
}

.overlayS > div:not(.group):hover, .overlayS > div.group:hover > div
{
    background-color: rgba(255, 0, 0, 0.6);
}

.zones > *
{
    margin-bottom: 12px;
}

label *
{
    vertical-align: middle;
}

.order
{
    margin-left: 10px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    overflow: hidden;
    display: inline-block;
    background-color: var(--active-accent-color);
    color: var(--color-dark-text);
    transform: scale(0);
    opacity: 0;
    transition: 100ms ease-in-out;
}

.order:not(:empty)
{
    opacity: 1;
    transform: scale(1);
}

#tabs, .altTab
{
    flex-direction: column-reverse;
}

#tabs .tabcontrolTabs > div:first-child, #tabs .tabcontrolTabs > div:last-child
{
    border-radius: 0px;
}

#tabs .tabcontrolTabs > div
{
    border: none;
    background-color: transparent;
}

#tabs .tabcontrolTabs > div.active
{
    border: none;
    background-color: var(--color-border-lighter);
}

#tabs .tabcontrolTabs > div:not(.active):hover
{
    background-color: var(--color-light4);
}

#tabs .tabcontrolTabs
{
    background: var(--color-light);
    width: 100%;
    border-top: 1px var(--color-border-dark) solid;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#tabs .tabcontrolPages
{
    border: 0px;
}

#sidebar
{
    display: none
}

#content.sidebarPresent
{
    left: 0px;
}

@media only screen and (max-width: 800px)
{
    #tabs .tabcontrolTabs > div
    {
        font-size: 20px;
        padding: 16px;
    }

    #tabs .tabcontrolTabs
    {
        background: var(--color-light);
        width: 100%;
        border-top: 1px var(--color-border-dark) solid;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: stretch;
    }

    #tabs > .tabcontrolTabs > *
    {
        flex: 1;
        text-align: center;
    }

    #tabs > .tabcontrolTabs .icon
    {
        margin: auto;
        width: 24px;
        height: 24px;
    }

    .tabcontrol.altTab
    {
        align-self: stretch;
    }

    .tabcontrol.altTab .tabcontrolTabs
    {
        background: var(--color-light);
        width: auto !important;
        align-self: center;
        border: 1px var(--color-border-dark) solid;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        min-height: 44px;
        justify-content: center;
    }

    .tabcontrol.altTab .tabcontrolPage
    {
        padding: 0px;
    }

    .tabcontrol.altTab .tabcontrolTabs > div
    {
        font-size: 20px !important;
        padding: 16px 30px !important;
    }

    input[type="checkbox"] ~ div, input[type="radio"] ~ div
    {
        width: 30px;
        height: 30px;
        margin-right: 6px;
        vertical-align: -50%;
        margin-right: 8px;
    }

    label > input[type="checkbox"] ~ span, label > input[type="radio"] ~ span
    {
        font-size: 20px;
    }
}

.desktopSpan
{

}

@media only screen and (min-width: 600px)
{
    .desktopSpan .tabcontrolPages
    {
        display: flex;
        flex-wrap: wrap;
        margin: -10px;
    }

    .desktopSpan .tabcontrolTabs
    {
        display: none !important;
    }

    .desktopSpan .tabcontrolPages .tabcontrolPage
    {
        position: static;
        height: auto;
        width: auto;
        transform: translate(0) !important;
        min-width: 400px;
        flex: auto;
    }

    .desktopSpan .tabcontrolPages .tabcontrolPage
    {
        margin: 10px;
    }

    .desktopSpan #paradoxSensors
    {
        min-width: 570px;
        max-width: 570px;
    }
}