$blue: #3273eb;

FnafTime {
    position: absolute;
    right: 64px;
    top: 96px;
    font-size: 72px;
    font-weight: bold;
    color: white;
    height: 90px;
    width: 150px;
    align-items: center;
    font-family: "Five Nights at Freddy's";
    background-color: rgba( #000000, 0 );

    .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: 2.5%;
    bottom: 96px;
    font-size: 50px;
    color: white;
    height: 120px;
    width: 300px;
    font-weight: bolder;
    align-items: center;
    font-family: "Five Nights at Freddy's";
    background-color: rgba( #000000, 0 );

    .fadepanel {
        position: absolute;
        width: 6000px;
        height: 4000px;
        opacity: 1;
        left: -500px;
        top: -1000px;
        transition: opacity 0.8s;
        background-color: black;
        z-index: 1;
    }

    &.fadein {
        .fadepanel {
            opacity: 0;
        }
    }

    .MuteCall {
        position: absolute;
        background-image: url( '/materials/ui/mutecall.png' );
        background-size: 100% 100%;
        top: -685%;
        left: 3%;
        pointer-events: all;
        opacity: 0;
        width: 242px;
        height: 62px;
        cursor: pointer;
    }

    .SkipFirstNight {
        position: absolute;
        background-image: url( '/materials/ui/skipnight.png' );
        background-size: 100% 100%;
        top: -625%;
        left: 3%;
        pointer-events: all;
        width: 242px;
        height: 62px;
        cursor: pointer;
    }

    .CamPanel {
        position: absolute;
        height: 75%;
        width: 300%;
        background-image: url( '/materials/ui/camicon.png' );
        background-size: 100% 100%;
        top: 100px;
        left: 325px;
    }

    .PowerPercent {
        position: absolute;
        font-size: 88px;
        bottom: 1%;
        left: 65%;
    }

    .PowerText {
        position: absolute;
        bottom: 10%;
    }

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

    .PowerConsume1 {
        position: absolute;
        height: 48px;
        width: 32px;
        top: 105px;
        left: 107px;
        background-color: lawngreen;

        .SubPanel {
            position: absolute;
            right: 0%;
            height: 100%;
            width: 12px;
            background-color: rgb(84, 168, 0);
        }
    }

    .PowerConsume2 {
        position: absolute;
        height: 48px;
        width: 32px;
        top: 105px;
        left: 144px;
        background-color: lawngreen;
        opacity: 0;

        .SubPanel {
            position: absolute;
            right: 0%;
            height: 100%;
            width: 12px;
            background-color: rgb(84, 168, 0);
        }
    }

    .PowerConsume3 {
        position: absolute;
        height: 48px;
        width: 32px;
        top: 105px;
        left: 181px;
        background-color: yellow;
        opacity: 0;

        .SubPanel {
            position: absolute;
            right: 0%;
            height: 100%;
            width: 12px;
            background-color: rgb(165, 165, 0);
        }
    }

    .PowerConsume4 {
        position: absolute;
        height: 48px;
        width: 32px;
        top: 105px;
        left: 218px;
        background-color: red;
        opacity: 0;

        .SubPanel {
            position: absolute;
            right: 0%;
            height: 100%;
            width: 12px;
            background-color: rgb(165, 0, 0);
        }
    }

    &.hideskip {
        .SkipFirstNight {
            opacity: 0;
            pointer-events: none;
        }
    }

    &.showmute {
        .MuteCall {
            opacity: 1;
        }
    }

    &.activetwo {
        .PowerConsume2 {
            opacity: 1;
        }
    }

    &.activethree {
        .PowerConsume3 {
            opacity: 1;
        }
    }

    &.activefour {
        .PowerConsume4 {
            opacity: 1;
        }
    }

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

        .CamPanel {
            opacity: 0;
        }

        .PowerPercent {
            opacity: 0;
        }

        .UsageText {
            opacity: 0;
        }

        .PowerConsume1 {
            opacity: 0;
        }

        .PowerConsume2 {
            opacity: 0;
        }

        .PowerConsume3 {
            opacity: 0;
        }

        .PowerConsume4 {
            opacity: 0;
        }
    }
}