/*html {
    height: -webkit-fill-available;
    overflow: hidden;
}

body {
    overflow: hidden;
}*/

.MainContainer {
    position: absolute;
    background-color: #E5173D;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.PowerButton {
    position: absolute;
    width: 17.5%;
    top: 7.6%;
    left: 10.8%;
    z-index: 2;
    height: 9%;
    /* background-color: white; */
    cursor: pointer;
}

.DialCenterClick {
    position: absolute;
    width: 46.5%;
    top: 43.6%;
    left: 27.8%;
    z-index: 2;
    height: 24%;
    cursor: pointer;
}

.RemoteImage {
    /*  max-width: 100%;
    max-height: 100%;
    margin: auto;*/
    position: relative;
    height: 100%;
    z-index: 1;
}

.BeamAndProgressBarContainer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 6%;
    top: -1%;
    z-index: 3;
}

.RemoteBeamImage {
    width: 100%;
}

.BeamText {
    font-family: Interstate-Regular;
    position: absolute;
    top: -13%;
    width: 100%;
    text-align: center;
    color: white;
    left: 0;
    height: 61px;
    font-size: 21px;
}

.Progressbar {
    width: 100%;
    position: relative;
    top: -264%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sub-block {
    background-color: #107CDE;
    display: inline-block;
    width: 7.4%;
    height: 36.1px;
    margin-top: 6px;
}

.RemoteContainer {
    position: relative;
    height: 79%;
    top: 15%;
   /* min-width: 250px;*/
    min-height: 250px;
    padding: 13px;
    display: inline-block;
}



.DialTop {
    position: absolute;
    width: 51.5%;
    top: 36.6%;
    left: 24.8%;
    z-index: 0;
}

.DialRight {
    position: absolute;
    width: 23.5%;
    top: 41.5%;
    left: 63.2%;
    z-index: 0;
}


.DialLeft {
    position: absolute;
    width: 23.6%;
    top: 41%;
    left: 13.7%;
    z-index: 0;
}

.DialBottom {
    position: absolute;
    width: 51.5%;
    top: 62.9%;
    left: 24.8%;
    z-index: 0;
}

.DialCenter {
    position: absolute;
    width: 51.5%;
    top: 43.6%;
    left: 24.8%;
    z-index: 0;
}

.InfoClick {
    position: absolute;
    width: 31.5%;
    top: 19.6%;
    left: 34.8%;
    z-index: 2;
    height: 13%;
    /*background-color: black;*/
}

a {
    display: flex;
    justify-content: center;
    align-items: center;
    display: block;
    height: 100%;
}


.Back {
    position: absolute;
    width: 90.5%;
    top: 78.6%;
    left: 4.8%;
    z-index: 2;
    height: 19%;
}
.WhiteBackcolour {
    position: absolute;
    width: 78.5%;
    top: 34.6%;
    left: 11.8%;
    z-index: 0;
    height: 41%;
    background-color: white;
}

@media screen and ( orientation:portrait ) {
    .Landscape {
        display: none;
    }
}


@media screen and ( orientation:landscape ) {
    .Landscape {
        position: absolute;
        top: 0;
        bottom: 0vh;
        left: 0;
        right: 0;
        z-index: 5;
        background-color: #E5173D;
        color: white;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5vw;
    }
    .MainContainer {
        display: none;
    }
}