$blue: #3273eb;

@import "/Styles/spawnmenu/spawnmenu.scss";
@import "/Styles/toolbar/toolbar.scss";
@import "/Styles/hud/chatbox.scss";

/*Health
{
    position: absolute;
    right: 100px;
    bottom: 48px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    height: 80px;
    padding: 0 30px;
    align-items: center;
    font-family: Poppins;
    background-color: rgba( #111, 0.2 );
}*/

FnafTime {
    position: absolute;
    right: 64px;
    top: 96px;
    font-size: 72px;
    font-weight: bold;
    color: white;
    height: 90px;
    width: 150px;
    align-items: center;
    font-family: fnaf;
    background-color: rgba( #000000, 1 );

    .time {
        position: relative;
        //bottom: 15%;
        padding-left: 20%;
    }

    .night {
        position: absolute;
        bottom: 7%;
        left: 25%;
        font-size: 35px;
    }

    &.powerout {
        color: rgba(0,0,0,0);
        background-color: rgba(0,0,0,0);

        .time {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .night {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }
    }
}

Power {
    position: absolute;
    left: 64px;
    bottom: 96px;
    font-size: 50px;
    font-weight: bold;
    color: white;
    height: 120px;
    width: 300px;
    align-items: center;
    font-family: fnaf;
    background-color: rgba( #000000, 0 );

    .PowerPercent {
        font-size: 92px;
        bottom: 6%;
        left: 7%;
    }

    .UsageText {
        position: absolute;
        top: 100%;
    }

    .PowerConsume1 {
        position: absolute;
        height: 64px;
        width: 24px;
        color: white;
        top: 90px;
        left: 122px;
        background-color: lawngreen;
    }

    .PowerConsume2 {
        position: absolute;
        height: 64px;
        width: 24px;
        color: white;
        top: 90px;
        left: 157px;
        background-color: black;
    }

    .PowerConsume3 {
        position: absolute;
        height: 64px;
        width: 24px;
        color: white;
        top: 90px;
        left: 192px;
        background-color: black;
    }

    .PowerConsume4 {
        position: absolute;
        height: 64px;
        width: 24px;
        color: white;
        top: 90px;
        left: 225px;
        background-color: black;
    }

    &.activetwo {
        .PowerConsume2 {
            background-color: lawngreen;
        }
    }

    &.activethree {
        .PowerConsume3 {
            background-color: yellow;
        }
    }

    &.activefour {
        .PowerConsume4 {
            background-color: red;
        }
    }

    &.powerout {
        color: rgba(0,0,0,0);
        background-color: rgba(0,0,0,0);

        .PowerPercent {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .UsageText {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .PowerConsume1 {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .PowerConsume2 {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .PowerConsume3 {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }

        .PowerConsume4 {
            color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }
    }
}

rootpanel
{
    &.devcamera
    {
        display: none;
    }
}