CameraUI {
    font-family: Consolas;
    font-weight: bold;

    .buttonclicker {
        pointer-events: all;
        position: absolute;
        cursor: default;
        width: 100%;
        height: 100%;
        color: rgb(0 0 0 0);
        background-color: rgba(0 0 0 0);
    }

    .whiteborder {
        position: absolute;
        border: 0px lightgray;
        color: rgba( 0, 0, 0, 0);
        background-color: rgba( 0, 0, 0, 0);
        left: 1%;
        top: 1.5%;
        width: 98%;
        height: 96.5%;

        .camdot {
            position: absolute;
            background-image: url('materials/ui/camdot.gif');
            opacity: 0;
            width: 96px;
            height: 96px;
            left: 3%;
            top: 5%;
            background-size: 96px 96px;
        }
    }

    .blipoverlay {
        position: absolute;
        background-image: url('materials/ui/interference.gif');
        opacity: 0;
        width: 0px;
        height: 0px;
        background-size: 0 0;
    }

    .itsmeoverlay {
        position: absolute;
        background-image: url('materials/ui/hallucination.gif');
        opacity: 0;
        width: 0px;
        height: 0px;
        background-size: 0 0;
    }

    .camerarootpanel {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0 0);
        color: rgba(0,0,0 0);
    }

    .camslist {
        position: absolute;
        width: 35%;
        height: 51%;
        left: 63%;
        top: 45%;
        font-family: "Five Nights at Freddy's";
        background-image: url( 'materials/ui/mapscreen.png' );
        background-size: 100% 100%;
        pointer-events: all;
        cursor: none;
        opacity: 0;

        .camsixtext {
            font-size: 85px;
            position: absolute;
            width: 75%;
            height: 17%;
            left: -75%;
            top: -60%;
            background-color: rgba(0,0,0,0);
            color: white;
            align-items: center;
            text-align: center;
            white-space: pre-line;
        }

        .curspottext {
            font-size: 90px;
            font-weight: bolder;
            position: absolute;
            width: 100%;
            height: 9.9%;
            transform: translateY(-120%);
            left: 3%;
            background-color: rgba(0,0,0,0);
            color: white;
            text-stroke: 1px #ccc;
        }

        .onea {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 10.1%;
            left: 32.13%;
            top: 0.6%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                top: -12px;
                opacity: 0;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 84px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 74px;
                opacity: 0;
            }
        }

        .oneb {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.6%;
            height: 9.9%;
            left: 27.1%;
            top: 17%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                top: -12px;
                opacity: 0;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 84px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 74px;
                opacity: 0;
            }
        }

        .five {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 9.9%;
            left: 0.7%;
            top: 24.9%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                opacity: 0;
            }
        }

        .seven {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.6%;
            height: 9.9%;
            left: 85.1%;
            top: 25.3%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 32px;
                opacity: 0;
            }
        }

        .onec {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 9.9%;
            left: 19.2%;
            top: 39.7%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .foxy1 {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/foxy1.png' );
                background-size: 100% 100%;
                opacity: 0;
            }

            .foxy2 {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/foxy2.png' );
                background-size: 100% 100%;
                opacity: 0;
            }

            .foxy3 {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/foxy3.png' );
                background-size: 100% 100%;
                opacity: 0;
            }
        }

        .six {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.6%;
            height: 10%;
            left: 82.8%;
            top: 63.4%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                right: 84px;
                opacity: 0;
            }

            .gfreddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/gfreddy.png' );
                background-size: 100% 100%;
                top: -12px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 74px;
                opacity: 0;
            }
        }

        .three {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 9.9%;
            left: 11.15%;
            top: 68.425%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                opacity: 0;
            }
        }

        .twoa {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.7%;
            height: 10%;
            left: 32%;
            top: 73.6%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .foxy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/foxy.png' );
                background-size: 100% 100%;
                left: 32px;
                opacity: 0;
            }
        }

        .twob {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.7%;
            height: 10%;
            left: 32%;
            top: 85.2%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .foxy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/foxy.png' );
                background-size: 100% 100%;
                left: 32px;
                opacity: 0;
            }
        }

        .foura {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 9.9%;
            left: 58.6%;
            top: 73.9%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 32px;
                opacity: 0;
            }
        }

        .fourb {
            font-family: "Fnaf";
            text-stroke: 1px #ccc;
            padding: 2px 0px 0px 5px;
            border: 2px white;
            font-size: 52px;
            position: absolute;
            width: 13.55%;
            height: 10%;
            left: 58.6%;
            top: 85.5%;
            background-color: dimgray;
            color: white;
            pointer-events: none;
            cursor: pointer;
            white-space: pre-line;
            line-height: 33px;
            //padding: 2px 7px 2px 2px;

            &:hover {
                //text-stroke: 3px #999;
                opacity: 1;
            }

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 32px;
                opacity: 0;
            }
        }

        .officeanchor {
            position: absolute;
            width: 13.55%;
            height: 9.9%;
            left: 45%;
            top: 95%;
            background-color: rgba(0,0,0,0);
            pointer-events: none;
            //padding: 2px 7px 2px 2px;

            .freddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/freddy.png' );
                background-size: 100% 100%;
                top: -12px;
                opacity: 0;
            }

            .gfreddy {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/gfreddy.png' );
                background-size: 100% 100%;
                top: -130%;
                opacity: 0;
            }

            .bonnie {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 64px;
                opacity: 0;
            }

            .chica {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 48px;
                opacity: 0;
            }

            .bonniew {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/bonnie.png' );
                background-size: 100% 100%;
                right: 64px;
                top: -150%;
                opacity: 0;
            }

            .chicaw {
                position: absolute;
                width: 64px;
                height: 64px;
                background-image: url( 'materials/ui/chica.png' );
                background-size: 100% 100%;
                left: 48px;
                top: -150%;
                opacity: 0;
            }
        }
    }

    &.dothing {
        .buttonclicker {
            width: 0%;
            height: 0%;
            pointer-events: none;
        }

        .whiteborder {
            border: 5px white;

            .camdot {
                opacity: 1;
            }
        }

        .camslist {
            //pointer-events: all;
            cursor: default;
            opacity: 1;

            .onea {
                pointer-events: all;
                cursor: pointer;
            }

            .oneb {
                pointer-events: all;
                cursor: pointer;
            }

            .onec {
                pointer-events: all;
                cursor: pointer;
            }

            .five {
                pointer-events: all;
                cursor: pointer;
            }

            .seven {
                pointer-events: all;
                cursor: pointer;
            }

            .six {
                pointer-events: all;
                cursor: pointer;
            }

            .three {
                pointer-events: all;
                cursor: pointer;
            }

            .twoa {
                pointer-events: all;
                cursor: pointer;
            }

            .twob {
                pointer-events: all;
                cursor: pointer;
            }

            .foura {
                pointer-events: all;
                cursor: pointer;
            }

            .fourb {
                pointer-events: all;
                cursor: pointer;
            }
        }
    }

    &.blip {
        .blipoverlay {
            width: 100%;
            height: 100%;
            opacity: 1;
            background-size: 100% 100%;
        }
    }

    &.hallucination {
        .itsmeoverlay {
            width: 100%;
            height: 100%;
            opacity: 1;
            background-size: 100% 100%;
        }
    }

    &.oneaactive {
        .camslist {
            .onea {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddyonea {
        .camslist {
            .onea {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.bonnieonea {
        .camslist {
            .onea {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.chicaonea {
        .camslist {
            .onea {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.onebactive {
        .camslist {
            .oneb {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddyoneb {
        .camslist {
            .oneb {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.bonnieoneb {
        .camslist {
            .oneb {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.chicaoneb {
        .camslist {
            .oneb {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.onecactive {
        .camslist {
            .onec {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.foxystage1 {
        .camslist {
            .onec {
                .foxy1 {
                    opacity: 1;
                }
            }
        }
    }

    &.foxystage2 {
        .camslist {
            .onec {
                .foxy2 {
                    opacity: 1;
                }
            }
        }
    }

    &.foxystage3 {
        .camslist {
            .onec {
                .foxy3 {
                    opacity: 1;
                }
            }
        }
    }

    &.fiveactive {
        .camslist {
            .five {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.bonniefive {
        .camslist {
            .five {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.sevenactive {
        .camslist {
            .seven {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddyseven {
        .camslist {
            .seven {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.chicaseven {
        .camslist {
            .seven {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.sixactive {
        .camslist {
            .six {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddysix {
        .camslist {
            .six {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.chicasix {
        .camslist {
            .six {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.gfreddysix {
        .camslist {
            .six {
                .gfreddy {
                    opacity: 1;
                }
            }
        }
    }

    &.threeactive {
        .camslist {
            .three {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.bonniethree {
        .camslist {
            .three {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.twoaactive {
        .camslist {
            .twoa {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.bonnietwoa {
        .camslist {
            .twoa {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.foxyrunning {
        .camslist {
            .twoa {
                .foxy {
                    opacity: 1;
                }
            }
        }
    }

    &.twobactive {
        .camslist {
            .twob {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.bonnietwob {
        .camslist {
            .twob {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.foxyrunning2 {
        .camslist {
            .twob {
                .foxy {
                    opacity: 1;
                }
            }
        }
    }

    &.fouraactive {
        .camslist {
            .foura {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddyfoura {
        .camslist {
            .foura {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.chicafoura {
        .camslist {
            .foura {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.fourbactive {
        .camslist {
            .fourb {
                background-color: #C2DC01;
                //color: black;
            }
        }
    }

    &.freddyfourb {
        .camslist {
            .fourb {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.chicafourb {
        .camslist {
            .fourb {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.freddyinoffice {
        .camslist {
            .officeanchor {
                .freddy {
                    opacity: 1;
                }
            }
        }
    }

    &.bonnieinoffice {
        .camslist {
            .officeanchor {
                .bonnie {
                    opacity: 1;
                }
            }
        }
    }

    &.chicainoffice {
        .camslist {
            .officeanchor {
                .chica {
                    opacity: 1;
                }
            }
        }
    }

    &.bonnieoffice {
        .camslist {
            .officeanchor {
                .bonniew {
                    opacity: 1;
                }
            }
        }
    }

    &.chicaoffice {
        .camslist {
            .officeanchor {
                .chicaw {
                    opacity: 1;
                }
            }
        }
    }

    &.gfreddyoffice {
        .camslist {
            .officeanchor {
                .gfreddy {
                    opacity: 1;
                }
            }
        }
    }
}