@font-face {
  font-family: ReithSerif;
  src: url(BBCReithSerif_W_Rg.woff2);
}

@font-face {
    font-family: GDS Transport Normal;
    src: url(GDSTransport-Light.woff2);
}

@font-face {
    font-family: GDS Transport Bold;
    src: url(GDSTransport-Bold.woff2);
}

@font-face {
  font-family: Glyphicons Halflings;
  src: url(glyphicons-halflings-regular.woff2);
}

@font-face {
  font-family: Transport;
  src: url(Transport_Medium.ttf);
}

@font-face {
  font-family: New Transport Medium;
  src: url(NewTransport_Medium.woff);
}

@font-face {
  font-family: New Transport Regular;
  src: url(NewTransport_Regular.woff);
}

@font-face {
  font-family: New Transport Semibold;
  src: url(NewTransport_Semibold.woff);
}

@font-face {
  font-family: New Transport Bold;
  src: url(NewTransport_Bold.woff);
}

@font-face {
  font-family: New Transport Black;
  src: url(NewTransport_Black.woff);
}

@font-face {
  font-family: Game Over;
  src: url(GameOver.woff);
}

@font-face {
  font-family: New Rail Bold;
  src: url(NewRail_Bold.woff);
}

@font-face {
  font-family: New Rail Medium;
  src: url(NewRail_Medium.woff);
}

@font-face {
  font-family: New Rail Black;
  src: url(NewRail_Black.woff);
}

@font-face {
  font-family: London Regular;
  src: url(London_Regular.woff);
}

@font-face {
  font-family: London Medium;
  src: url(London_Medium.woff);
}

@font-face {
  font-family: London Bold;
  src: url(London_Bold.woff);
}

@font-face {
  font-family: London Semibold;
  src: url(London_Semibold.woff);
}

@font-face {
  font-family: Johnston100 Medium;
  src: url(Johnston100-Medium.woff2);
}

@font-face {
  font-family: Johnston100 Regular;
  src: url(Johnston100-Regular.woff2);
}

@font-face {
  font-family: Johnston100 Light;
  src: url(Johnston100-Light.woff2);
}

@font-face {
    font-family: F1;
    src: url(Formula1-Regular.woff2);
}


@font-face {
    font-family: F1 Bold;
    src: url(Formula1-Bold.woff2);
}

@font-face {
    font-family: BenguiatStd Bold;
    src: url(BenguiatStd-Bold.woff2);
}

@font-face {
    font-family: BenguiatStd Book;
    src: url(BenguiatStd-Book.woff);
}

@font-face {
    font-family: ITC Serif Gothic Bold Outline;
    src: url("ITC Serif Gothic Bold Outline.woff2");
}

@font-face {
    font-family: ITC Serif Gothic;
    src: url("ITC Serif Gothic Regular.woff2");
}

@font-face {
    font-family: ITC Serif Gothic W03;
    src: url("ITC Serif Gothic W03 Bold.woff2");
}

@font-face {
    font-family: New Transport AA Bold;
    src: url("New Transport AA WEB Bold.woff2");
}

@font-face {
    font-family: Transport Greek;
    src: url("TransportGr-Medium.woff2");
}

@font-face {
    font-family: Transport Greek2;
    src: url("Transport-Medium-Greek.woff2");
}





.glyphicon {
    position: relative;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.glyphicon-fast-backward:before {
    content: "\e070";
}

.glyphicon-backward:before {
    content: "\e071";
}

.glyphicon-play:before {
    content: "\e072";
}

.glyphicon-stop:before {
    content: "\e074";
}

.glyphicon-forward:before {
    content: "\e075";
}

.glyphicon-fast-forward:before {
    content: "\e076";
}

.glyphicon-resize-full:before {
    content: "\e096";
}

.glyphicon-refresh:before {
    content: "\e031";
}

.glyphicon-chevron-left:before {
    content: "\e079";
}

.glyphicon-chevron-right:before {
    content: "\e080";
}

.glyphicon-remove:before {
    content: "\e014";
}

.glyphicon-info-sign:before {
    content: "\e086";
}

.glyphicon-pause:before {
    content: "\e073";
}

.glyphicon-unmute:before {
    content: "\e038";
}

.glyphicon-mute:before {
    content: "\e036";
}

::-webkit-scrollbar-thumb
{
    background: #909090;
    border-radius: 0ex;
}

::-webkit-scrollbar-corner
{
    background: #000;
}

img:not([src]) {
   visibility: hidden;
}

@media (orientation: landscape) {
  div#content,html,body,.previewCanvas,.mysky2{
    height: 100vh!important;
       padding-top: 0px!important;
}

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --fs: 9vh;
    --fs2: 9vh;
    --fs3: 7vh;
    --fs4: 6vh;
    --lh4: 7vh;

}

    }



@media (orientation: portrait) {
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --fs: 4vh;
    --fs2: 4vh;
    --fs3: 2.5vh;
    --fs4: 4vh;
    --lh4: 5vh;
}

    }

@media (orientation: portrait) and (max-height: 340px) {
    div#content,html,body,.previewCanvas,.mysky2{
        height: 100vh!important;
        padding-top: 0px!important;
    }

    :root {
        --sat: env(safe-area-inset-top);
        --sar: env(safe-area-inset-right);
        --sab: env(safe-area-inset-bottom);
        --sal: env(safe-area-inset-left);
        --fs: 9vh;
        --fs2: 9vh;
        --fs3: 7vh;
        --fs4: 6vh;
        --lh4: 7vh;

    }

}


.big{
top: 94px;
position: absolute;
width: 100vw;
height: 100vh;
user-select: none;
}



.little{
    visibility:hidden;
    height:200vh;
    position:absolute;
    left:0;
    top:0;
    width:1px;
}


pre 
{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.theoption {
    align-content: center;
    text-align: center;
    font-size: var(--fs);
    color: lawngreen;
    opacity:0;
}

#infowrapper, #remotemenu{
    user-select:none;
    width: 100%;
    height: 100%;

    overflow: hidden;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    top:0px;
    position: absolute;
    z-index: 10;
}

div#centerScreen
{
    left: 50%;
    top: 50%;
    position: absolute;
}

div#content
{
    width: 100%;
    height: 100%;

    overflow: hidden;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    top:0px;
    position: absolute;

}

#shaderPreview0 {
    left:   0px;
    top:  0px;
    width: 100%;
}



html,body{
    padding-top: env(safe-area-inset-top);
    height:100%;
    overflow:hidden;
    overscroll-behavior: none;
}



body
{
    margin:0px!important;
    width:100%;
    touch-action: none;
    text-rendering: optimizeLegibility;
    font-family: "New Transport Semibold","ReithSerif","HelveticaNeue-Light","HelveticaNeue Light","Arial";
    background-color: black;
}

body::-webkit-scrollbar{
    display:none;
    }

    .shaderPreview
    {
    display: block;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px;
    margin: 0px;
    border: 0px solid #000000;
    }

    .previewCanvas
    {
    left: 0px;
    top: 0px;
    padding: 0px;
    height:100%;
    width:100%;
    position: absolute;
    cursor: pointer;
    visibility: hidden;
    border: 0px solid #000000;
    }

.mysky2{
    position:absolute;
    top:0px;
    left:0px;
    z-index:6;
    width:100%;
    height:100%;
    user-select:none;
    opacity: 0;
    }

#sun{
    position:absolute;
    top:0px;
    left:0px;
    z-index:6;
    width:100%;
    height:100%;
    user-select:none;
}

.moon{
    position:absolute;
    z-index:7;
    }
.mysky{
    position:absolute;
    top:0px;
    left:0px;
    z-index:5;
}

.info{
    font-size:var(--fs);
    user-select:none;
}

div#energy {
    position: relative;
}

div#energywrap {
    position: absolute;
    top: 0px;
    right: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    padding-top: max(env(safe-area-inset-top),10px);
}

div#fps {
    position: absolute;
    top: var(--fs);
    left: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    display:none;
}

#FPS {
    text-align: right;
}

div#time {
    position: absolute;
    top: 0px;
    left: 10px;
    text-shadow: 0px 0px 10px black;
    color: white;
   /*  color: #ffffff4a;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1px; */
    text-align: start;
    padding-top: max(env(safe-area-inset-top),10px);
}

div#date {
    position: absolute;
    top: var(--fs);
    left: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    /* color: #ffffff4a;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1px; */
    padding-top: max(env(safe-area-inset-top),10px);
}

div#BTC {
    position: absolute;
    top: calc(var(--fs)*2);
    left: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    /* color: #ffffff4a;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1px; */
    padding-top: max(env(safe-area-inset-top),10px);
}

div#BTCB50Total {
    position: absolute;
    top: calc(var(--fs)*3);
    left: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    /* color: #ffffff4a;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1px; */
    padding-top: max(env(safe-area-inset-top),10px);
}



div#outdoor{
    position: absolute;
    top: var(--fs);
    right: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    padding-top: max(env(safe-area-inset-top),10px);
}

div#outdoortemp {
    color: white;
    float:left;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    position:relative;
}

div#outdoorhumidity {
    color: white;
    float:right;
    padding-left:20px;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    position:relative;
}

div#bedroom {
    position: absolute;
    top: calc(var(--fs)*2);
    right: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    padding-top: max(env(safe-area-inset-top),10px)
}

div#indoor {
    position: absolute;
    top: calc(var(--fs)*3);
    right: 10px;
    color: white;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    padding-top: max(env(safe-area-inset-top),10px)
}




div#indoortemp {
    color: white;
    float:left;
    text-align: end;
    text-shadow: 0px 0px 10px black;
    position:relative;
}

div#bedroomtemp {
    color: white;
    text-align: end;
    text-shadow: 0px 0px 10px black;
    position:relative;
}

div#indoorhumidity {
    color: white;
    padding-left:20px;
    float:right;
    text-align: start;
    text-shadow: 0px 0px 10px black;
    position:relative;
}

#outdoorwind{
    float:left;
    position:relative;
}

#sunrise {
    position: absolute;
    bottom: 20vh;
    color: white;
    left: 10px;
    font-size: var(--fs3);
    width: 15vw;
    text-align: center;
}

#sunset {
    position: absolute;
    bottom: 20vh;
    color: white;
    right: 10px;
    font-size: var(--fs3);
    width: 15vw;
    text-align: center;
}


#weather{
    position:absolute;
    left:0px;
    /*     bottom:calc(5vh - env(safe-area-inset-top)); */
    bottom:max(5vh,env(safe-area-inset-bottom,5vh));
    width:15vw;
/*     height: var(--fs); */
    height:15vh;
    z-index:9997;
}
#weather2{
    position:absolute;
    right:0px;
/*     bottom:calc(5vh - env(safe-area-inset-top)); */
    bottom:max(5vh,env(safe-area-inset-bottom,5vh));
    width:15vw;
    height: var(--fs);
    height:15vh;
    z-index:9997;

}

#weather2 img, #weatherS1,#weatherS2,#earthImage{
    width: 100%;
    height: 100%;
    object-fit: contain;
     user-select:none;
}

#weatherS2{
    display:none;
}

.thenews {
position: absolute;
    bottom: max(5vh,env(safe-area-inset-bottom,5vh)) ;
    height: 15vh;
/*     height: var(--fs); */
    width: 70vw;
    left: 15vw;
    color: white;
/*     line-height: var(--fs); */
    line-height:15vh;
    font-size: var(--fs2);
    overflow: hidden;
     user-select:none;
    z-index: 2;
    }
.newstext{
display: inline-block;
padding-left: 100%;  /* show the marquee just outside the paragraph */
white-space: nowrap;
width:auto;
z-index:999;
vertical-align: middle;
text-shadow: 0px 0px 10px black;
}


@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-10000px 0;}
}

@keyframes marquee {
    0%   { transform: translate3d(0, 0,0);transform-style:preserve-3d;-webkit-backface-visibility: hidden; }
    100% { transform: translate3d(-100%, 0,0);transform-style:preserve-3d; -webkit-backface-visibility: hidden;}
}



.clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:50%;
  display:block;
}

.clouds{
background:transparent url(../../hue/clouds4.png) repeat top center;
z-index:3;
overflow-y:hidden;
animation:move-clouds-back 400s linear infinite;
display:none;
}



.modal2{
position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:none;
  opacity: 0;
  background: orange;
  color: black;
  white-space: nowrap;
  text-align: center;
  font-size: 90vh;
  line-height:90vh;
  z-index: 9999;
  padding-top: env(safe-area-inset-top);
  }

.settingsbutton {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    z-index: 99999;
    padding-top: env(safe-area-inset-top);
}

.settingsmodal {
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    background: rgba(0,0,0,0.5);
    color: black;
    white-space: nowrap;
    z-index: 10010;
    transform: translate(-50%, -50%);
    min-height: 230px;
    opacity:0;
    box-shadow: 0px 0px 4px #000;
    zoom:0.8;
}

.settings-inside{
    margin:4px;
}

.resslidecontainer,.dpcontainer{
  width: 100%; /* Width of the outside container */
  display: table;
}



.rangecontainer{
  width: 100%; /* Width of the outside container */
  display:table;
  overscroll-behavior: none;
}

.rangecontainer label{
    color: white;
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    overscroll-behavior: none;
}


#pickers{
    display: inline-block;
    width: 100%;
    margin-top: 5px;
}

select#shaderchanger {
    width: -webkit-fill-available;
    height: 1.5em;
    /*display: inline-block;*/
}

.reloadshad{
    display:inline-block;
    float: right;
    padding: 1px 10px!important;
}

select#profilechanger {
    width: 100%;
    height: 1.5em;
    display: block;
}

select#weatherchanger {
    width: 100%;
    height: 1.5em;
}

select#voices {
    width: 29%;
    height: 34px;
}

select#channelchanger {
    height: 1.5em;
    width:50%;
}

select#fontchanger {
    height: 1.5em;
    float:right;
    width:50%;
    text-overflow: ellipsis;
}

.myMessage{
    width: 40%;
    height: 28px;
}

.sendmymessage{
    float: right;
    width: 20%;
}

input.range{
    width: 90%;
    display: table-cell;
    height: 32px;
    vertical-align: middle;
}

#datepicker{
    display:table-cell;
}

.output {
    display: table-cell;
    vertical-align: middle;
    color: white;
    height: 32px;
    min-width: 23px;
}

#cwwrapper,#spwrapper,#linewrapper,#frcontainer {
    display: block;
/*     height: 25px; */
    color: white;
}

#cwcontainer,#spwrapper,#linewrapper,#frcontainer{
    width:50%;
    display:inline-block;
    line-height:2;
}

#fwwrapper {
    display: block;
/*     height: 25px; */
    color: white;
}

#fwcontainer{
    width:50%;
    display:inline-block;
    line-height:2;
}

#sbhwrapper {
    display: block;
/*     height: 25px; */
    color: white;
}

#sbhcontainer{
    width:50%;
    display:inline-block;
    line-height:2;
}

#crcontainer {
    width: 50%;
    display: inline-block;
}
#rain{
    width:50%;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #fbfafa;
    background-color: #7d7d7d;
    border-color: #5f5f5f;
}

.btn-toolbar {
    width: 100%;
    display:flex;
}

.mybut {
    width: 50%;
}

.mybut2 {
    width: 25%;
}
.mybut3,.mybut4{width:25%;}
.mybut4{width:25%;margin-left:0px!important;}
.mybut5{width:12.5%;}
.mybut6{width:12.5%; margin-left:0px!important;}
.mybut7{width:12.5%; margin-left:0px!important;}
.mybut8{width:12.5%; margin-left:0px!important;}

.mybuts1,.mybuts2,.mybuts3,.mybuts4,.mybuts5,.mybuts6{width:16.67%;}
.mybuts1,.mybuts2,.mybuts3,.mybuts5,.mybuts6{margin-left:0px!important;}
.mybuts4{margin-left:0px!important;}


.row{
    margin-top:3px;
}

input.message {
    width: 71%;
    line-height: 1.42857143;
    margin-top: 3px;
    padding-right:0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fbfafa;
    background-color: #7d7d7d;
    border-color: #7d7d7d;
}

.sendmycommand{
    float:right;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 1px;
}

.btn-default {
    color: #fbfafa;
    background-color: #7d7d7d;
    border-color: #5f5f5f;
}



.redditbuttons{
    display:none;
}

.shaderbuttons{
    display:flex;
}

.reddit-previous,.reddit-next{
    position: absolute;
    display: none;
    height: 60%;
    top:20%;
    width: 10%;
    align-items: center;
    z-index: 10009;
    font-size: 5em;
    color: white;
    opacity:0;

  }


@media (hover: hover) {
    .reddit-previous:hover,.reddit-next:hover{
        opacity:1
    }
}

.reddit-previous{
    justify-content: flex-start;
    left:0;
  }

.reddit-next {
    justify-content: flex-end;
    right: 0;
}


.redditpic{
position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background-position: center;
  background-size: contain;
  z-index: 9999;
    display:none;
  background-repeat: no-repeat;
  }


.redditimg {
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    position: absolute;
    object-fit: contain;
    width: 100vw;
    height: 100vh;
/*     z-index:9999; */
}

.redditwrapper{
position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background-color:rgb(0,0,0);
  display:none;
  z-index: 9997;
  padding-top: env(safe-area-inset-top);
  }

.modal2 span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 10s linear infinite;
}

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(86, 149, 158, 0.5) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	width:1px;
    filter:blur(1px);
	height:60px;
    z-index:3;
	position: absolute;
	bottom:200px;
	-webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}

.rain1{
    position: absolute;
    overflow: hidden;
    height: 50%;
    width: 100%;
    top: 0;
}
#theImg{
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
    margin-top: env(safe-area-inset-top);
}


.clock-wrapper{
    display: none;
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    opacity:0;
}

.fclock-wrapper{
    position: absolute;
    top:0px;
    right:0px;
    transform-origin:top right;
    transform: scale3d(1,1,1);
}
#clock{
    z-index: 999;
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: env(safe-area-inset-top);
}

#play-video{
    display:none;
}
    #icons{display:none;}

.flip-clock-wrapper{
    z-index: 999;
}

#modal-wrapper{
    display:none;
    background-color: black;
    width: 100vw;
    height: 100vh;
    z-index: 9997;
    position: absolute;
    top:0px;
    opacity:0;
}

.modal.in .modal-dialog{
	-webkit-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    transform: translate(0,50%);
}

.modal{
z-index:9998;
    height: 100%;
    width: 100vw;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#embedvid{
    margin-left: auto;
    margin-right: auto;
    z-index:9998;
    width: 100vw;
    height: 100%;
}

#CurrentWrapper{
    background-color:black;
}

#CurrentPic .modal-content,#PreviousPic .modal-content,#NextPic .modal-content {background-color: transparent;}
@media (min-width: 768px){
#CurrentPic .modal-content,#PreviousPic .modal-content,#NextPic .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
}
}

#CurrentPic .modal-body,#PreviousPic .modal-body,#NextPic .modal-body  {
    padding: 0px;
    height:100%;
}

#CurrentPic .modal-content,#PreviousPic .modal-body,#NextPic .modal-body {
    position: relative;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px;
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#CurrentPic .modal-dialog,#PreviousPic .modal-dialog,#NextPic .modal-dialog {
    margin: auto;
    width:auto;
    height: 100%;
}

@media (min-width: 768px){
#CurrentPic .modal-dialog,#PreviousPic .modal-dialog,#NextPic .modal-dialog {
    margin: auto;
    width:auto;
    height: 100%;
}
    }

#CurrentPic.modal.in .modal-dialog,#PreviousPic.modal.in .modal-dialog,#NextPic.modal.in .modal-dialog{
	-webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

#CurrentBG,#PreviousBG,#NextBG{
    background-size: cover;
    background-position: center;
    filter:blur(10px);
    height: 100%;
    user-select: none;
}

#indoortemp span{
    font-size: 0.5em;
}

.newsdiv{
    width: 100%;
    height: 100%;
    top:0px;
    position:absolute;
    z-index: 10000;
    display:none;
    opacity:0;
    background-color:#ffffff;
}

#newsary{
    width: 100%;
    height: 100%;
    z-index: 10000;
    border-width: 0px;
    }

video{
    object-fit:contain;
    object-position:center;
}

#myVideo{
    background-color:black;
    opacity:0;
}

#theback{
    background-color:black;
    z-index:2;
}
#reddit-title{
    z-index: 9998;
    font-size: 10vh;
    bottom: 10vh;
    left: 0vh;
    color: white;
    position: absolute;
    width: 100%;
    text-align: center;
    text-shadow: 0px 0px 10px black;
    padding-top: env(safe-area-inset-top);
    user-select: none;
    }

.twitter-video {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
}
div.inn{
    font-size:inherit!important;
}

@media (orientation: landscape) {
  #reddit-title {
    font-size: 10vh;
    bottom: 20vh;
  }
    #wicon{
        float: right;
        width: 15vh;
        height: 15vh;
    }
	.score {
    font-size:6vh;
}
}

@media (orientation: portrait) {
  #reddit-title {
    font-size: 5vh;
  }
  #sunrise{
      left:1px;
      bottom:16vh;
    }
  #sunset{
      bottom:16vh;
      right:1px;
    }
    
    #wicon{
        float: right;
        width: 15vw;
        height: 15vw;
    }
	.score {
    font-size:6vw;

}
}

.comm {
    white-space: normal;
    display: flex;
    line-height: normal;
    font-size: 8vh;
    text-shadow: 4px 3px black;
}


.tab1,.tab2,.tab3{
    display:none;
    margin-top: 4px;
    min-height: 270px;
}

.stab1,.stab2,.stab3,.stab4,.stab5,.stab6,.otab1,.otab2,.otab3,.otab4,.otab5,.otab6{
    display:none;
    margin-top: 4px;
    height: 208px;
    overflow-y:auto;
    overflow-x:clip;
    overscroll-behavior: contain;
}

.buttonwrapper{
    display:flex;
    justify-content: space-between;
}

.tabbut1, .tabbut2, .tabbut3{
    border: none;
    line-height: 1.42857143;
    /*width: 42.5%;*/
    background-color: transparent;
    color: white;
}

.stabbut1, .stabbut2, .stabbut3, .stabbut4, .stabbut5, .stabbut6,
.otabbut1, .otabbut2, .otabbut3, .otabbut4, .otabbut5, .otabbut6 {
    border: none;
    line-height: 1.42857143;
    width: 16.667%;
    background-color: transparent;
    color: white;
}

.tab2butwrap{
    margin-top:4px;
    display:flex;
}

.stabbut2{
    left:16.667%;
}

.tabbut4 {
    border: none;
    line-height: 1.42857143;
    /*width: 15%;*/
    background-color: transparent;
    color: white;
}

.currenttab,.currenttab2,.currenttab3 {
    background-color: #fbfafa;
    color: black;
    
}

.selectedtab,.selectedtab2,.selectedtab3{
    display: flex;
    flex-direction: column;
}

.previewErrorMessage{
    color:white;
}

div#forecast-wrapper {
    position: absolute;
    left: 0px;
    top:0;
    width: 100vw;
    display:none;
    z-index: 10;
    opacity:0;
}

.forecast {
    position: relative;
    top: 0px;
    width: 4.16vw;
    height: 5vw;
    display: inline-block;
}

#ft1,#ft2,#ft3,#ft4,#ft5,#ft6,#ft7,#ft8,#ft9,#ft10,#ft11,#ft12,#ft13,#ft14,#ft15,#ft16,#ft17,#ft18,#ft19,#ft20{
    background-color: rgb(255, 77, 0);
    position: absolute;
    height: 15vh;
    width: 20vw;
    text-align: center;
    text-shadow: 0px 0px 4px black;
    color: white;
    font-size: 5vw;
    top: 0;
    padding-top: env(safe-area-inset-top);
}

#w1,#w2,#w3,#w4,#w5,#w6,#w7,#w8,#w9,#w10,#w11,#w12,#w13,#w14,#w15,#w16,#w17,#w18,#w19,#w20{
background-color: rgb(255, 77, 0);
    height: 70vh;
    width: 20vw;
    top: 15vh;
    position: absolute;
}

#wd1,#wd2,#wd3,#wd4,#wd5,#wd6,#wd7,#wd8,#wd9,#wd10,#wd11,#wd12,#wd13,#wd14,#wd15,#wd16,#wd17,#wd18,#wd19,#wd20{
background-color: rgb(255, 77, 0);
    position: absolute;
    height: 15vh;
    width: 20vw;
    text-align: center;
    text-shadow: 0px 0px 4px black;
    /* line-height: 8; */
    color: white;
    font-size: 5vw;
    top: 85vh;
}

#wi1,#wi2,#wi3,#wi4,#wi5,#wi6,#wi7,#wi8,#wi9,#wi10,#wi11,#wi12,#wi13,#wi14,#wi15,#wi16,#wi17,#wi18,#wi19,#wi20{
    height: 70vh;
    width: 20vw;
    top: 0vh;
    position: absolute;
    filter: drop-shadow(2px 4px 1px black);
}

#ft1,#w1,#wd1,#ft6,#w6,#wd6,#ft11,#w11,#wd11,#ft16,#w16,#wd16{
left:0vw;
}
#ft2,#w2,#wd2,#ft7,#w7,#wd7,#ft12,#w12,#wd12,#ft17,#w17,#wd17{
left:20vw;
}
#ft3,#w3,#wd3,#ft8,#w8,#wd8,#ft13,#w13,#wd13,#ft18,#w18,#wd18{
left:40vw;
}
#ft4,#w4,#wd4,#ft9,#w9,#wd9,#ft14,#w14,#wd14,#ft19,#w19,#wd19{
left:60vw;
}
#ft5,#w5,#wd5,#ft10,#w10,#wd10,#ft15,#w15,#wd15,#ft20,#w20,#wd20{
left:80vw;
}

.fore1{
    display:inline-block;
}

.fore2, .fore3, .fore4 {
    display: none;
}

.row.jcommand {
    display: none;
}

.humid {
    display:none;
    left:4000px;
}

.humid2 {
    display:none;
    left:-4000px;
}

#BTCTotal,#BTC50{
    position: relative;
    float: left;
}

#BTCToday,#BTC50Prof{
    position: relative;
    float: right;
}

.albumimg{
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    position: absolute;
    object-fit: contain;
    width: 100vw;
    height: 100vh;
    }


#spotify-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: white;
/*     line-height: var(--fs); */
    line-height:15vh;
    font-size: var(--fs2);
    overflow: hidden;
    display:none;
    opacity:0;
    z-index:9999;
    background-color: white;
}



#track-info{
    position: absolute;
    color: white;
    text-shadow: 0px 0px 10px black;
/*     line-height: var(--fs); */
    line-height:var(--lh4);
    font-size: var(--fs4);
    overflow: hidden;
    width: calc(100vw - max(10px,env(safe-area-inset-left,10px))*2);
    bottom:max(10px,env(safe-area-inset-bottom,10px));
    padding-left: max(10px,env(safe-area-inset-left,10px));
}

#album,#artist{
border-bottom-color: #ffffff14;
    border-bottom-width: 1px;
    border-bottom-style: none;
}

#album,#artist,#track-title{
    width: 100vw;
}

#artist{
    color: #f5f5a4;
}

#album{
    color: #ffffcb;
}

#song-time{
    float:left;
    width: 50%;
}

#release-date{
    float:right;
}

#track-no{
    display:none;
}

#song-progress{
    line-height:1vh;
}

#album-cover {
    background-size: cover;
    background-position: center;
    filter:blur(10px);
    height: 106vh;
    width: 106vw;
    user-select: none;
    top: -3vh;
    left: -3vw;
    position: absolute;
}

/* .song-slider{
    width:100%;
    height: 5px;
    border: none;
    border-radius: 5px;
    outline: none;
}
 */

#extras{
    display: none;
    font-size: 14px;
    line-height: 1.2;
    /* float: right; */
    text-align: right;
    margin-bottom: 20px;
    right: 10px;
    position: absolute;
    top:6px;
    }

.theextras{

    margin-left:10px;
    }

#youtubevideo {
    margin-top: 10px;
    object-fit: contain;
    width: 300px;
    /* height: 20vw; */
    z-index: 5;
    display:none;
}

#youtubevideo:focus{
    outline:none;
    }

#video{
    display:none;
    }

.song-slider {
  -webkit-appearance: none;
  background: transparent;
  width: 99%;
  outline: none;
}
.song-slider:focus,
.song-slider:active,
.song-slider::-moz-focus-inner,
.song-slider::-moz-focus-outer {
  border: 0;
  outline: none;
}
.song-slider::-moz-range-thumb {
  border: none;
  height: 10px;
  width: 10px;
  background-color: transparent;
  background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");
  background-position: 0 0;
  background-size: cover;
  transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
  cursor: pointer;
}
.song-slider::-moz-range-thumb:active {
  background-position: 100% 0px;
  transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
.song-slider::-moz-range-track {
  width: 100%;
  height: 10px;
  background: #eee;
  border-radius: 10px;
/*   box-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  cursor: pointer;
}
.song-slider::-moz-range-progress {
  height: 20px;
  background: #4685d7;
  border-radius: 10px;
  cursor: pointer;
}
.song-slider::-webkit-slider-thumb {
  border: none;
  height: 12px;
  width: 12px;
  background-color: transparent;
  background-image: url("../../tests/mario100.png");
  background-position: 100% 0px;
  background-size: cover;
  transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg)) translateZ(0);
  cursor: pointer;
  margin-top: -2px;
  -webkit-appearance: none;
  transition-property:all;
  transition-duration:100ms;
  transition-timing-function:ease;
  transform-style: preserve-3d;
}
.song-slider::-webkit-slider-thumb:active {
  background-position: 100% 0px;
  transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}
.song-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background: #4e4e4e57;
  border-radius: 10px;
/*   box-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
  cursor: pointer;
  -webkit-appearance: none;
}

#controls{
display:flex;
    }

.unmute, .stop, .previous, .next,.pause,.youtube,.youtubenew {
    background-color: #4c4c4de6;
    width: 50px;
    height: 50px;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 5px;
    white-space: normal;
}

.previous, .stop .next,.pause,.youtube,.youtubenew {
    margin-left:2px;
}

.unmute{
    display:none;
}
.youtubenew{
    display:none;
    }


a.spotify_url {
    color: #b5b5b545;
    /* text-shadow: 0px 0px 5px black; */
    font-size: 12px;
    text-decoration: none;
    line-height: 1.42857143;
}

#chart{
/*     transform: translate(-50%,-50%); */
/*     top: 50%; */
/*     left: 50%; */
    position: absolute;
    top: 10px;
    right: 10px;

}

.row2{
    margin-top: 6px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding-left: max(10px,env(safe-area-inset-left,10px));
}

input.mySpotify{
    width: 50%;
    line-height: 1.42857143;
    margin-top: max(3px,env(safe-area-inset-top,3px));
    padding-right:0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fbfafa;
    background-color: #4c4c4de6;
    border: none;
    font-size:12px;
}

    .sendspotify {
    width: 50px;
    height: 20px;
    background-color: #4c4c4de6;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    line-height: 1.42857143;
}

#spotifyurlwrap{
    font-size: 12px;
    line-height: 1;
}

#smessenger{
    color: black;
    font-size: 10px;
    line-height: 1;
}

div#viewcontainer {
    display: block;
    width:50px;
    height:50px;
    margin-top: 5px;
}

div#audioplayer {
    width: 50px;
    height: 50px;
}

div#audioplayer div#playbuttonoverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
}

div#audioplayer div#playbuttonoverlay div#playbutton {
    position: absolute;
    cursor: pointer;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
}

div#audioplayer div#activityindicator {
    position: absolute;
    top: 0px;
    left: 0pt;
    width: 10px;
    height: 10px;
}

div#audioplayer div#activityindicator div#redlighton {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
}

div#audioplayer div#activityindicator div#redlightoff {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
}

p#logwindowbutton {
    display:none
        }

div#audioplayer div#controlbar {
    position: absolute;
    visibility: hidden;
    top: 1px;
    left: 1px;
    width: 50px;
    height: 50px;
}

div#audioplayer div#controlbar div#mutebutton {
    position: absolute;
    cursor: pointer;
    top: 4px;
    left: 1px;
    width: 50px;
    height: 40px;
}

div#audioplayer div#controlbar div#unmutebutton {
    position: absolute;
    cursor: pointer;
    top: 4px;
    left: 1px;
    width: 50px;
    height: 40px;
}


.forecastemp,.forecasttime{
    float:left;
    white-space: break-spaces;
}

.vjs-big-play-button{
display: none!important;
}

.vjs-error-display::before{
    display:none!important;
}

.vjs-error-display{
    display:none!important;
}

.football {
    width: 100vw;
    line-height: 1;
    text-shadow: 0px 0px 10px black;
    display: inline-table;
    vertical-align: middle;
	table-layout:fixed;
}
.red{
    color:red;
}

.team {
    width: 45%;
    display: inline-block;
    text-align: end;
}
.teama{
	width: 3.33%;
	display: inline-block;
}
.goal {
    width: 45%;
    display: table-cell;
    text-align: end;
    white-space: break-spaces;
}
.right{
	text-align: start;
}
.allgoal {
    width: 100%;
    display: table;
}
.match {
    margin-top: 4px;
}
.visualizer{
    width:128px;
    height:128px;
    display:none;
    left: calc(50% - 64px);
    position:absolute;
    image-rendering: pixelated;
}
.viz2{
    width:128px;
    height:128px;
    left: calc(50% - 64px);
    position:absolute;
    display:none;
    image-rendering: pixelated;
}


#vizchanger, #tonemapchanger {
    width: 50%;
    height: 34px;
    text-align: center;
}

div#mediacons {
    white-space: pre;
    color: white;
    font-family: monospace;
}

::-webkit-scrollbar {
    height: 1rem;
    width: 0.5rem;
}

::-webkit-scrollbar:horizontal {
    height: 0.5rem;
    width: 1rem;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(217,217,227,.8);
    border-color: rgba(255,255,255,0.5);
    border-radius: 9999px;
    border-width: 1px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: hsla(0,0%,100%,.1);
    border-color: rgba(255,255,255,0.5);
    border-radius: 9999px;
    border-width: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0,0%,100%,.3);
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 9999px;
}



#weatherS1{
    display:none;
}

.ste-rendering-meters {
    z-index: 9999;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 120px;
    pointer-events: none;
    font-size: 10px;
    color:white;
    display:none;
    padding: 5px;
    background: rgba(3, 29, 39, 0.61);
}

div#frcontainer {
    display: table-cell;
    /* align-content: end; */
    padding-left: 20px;
}

div#errorlog {
    white-space: pre;
    font-family: monospace;
    color: white;
    overflow-y: auto;
    min-height: 200px;
}

#errorlog p {
    margin-block: 0em;
}

.obn{
    overscroll-behavior: none;
}
.obc{
    overscroll-behavior: contain;
}

.otab {
    height: 240px;
}

#mini-spotify-wrapper {
    z-index: 9999;
    position: absolute;
    height: 12vh;
    bottom: 30vh;
    display: flex;
    width: 100vw;
    color: white;
    justify-content: flex-start;
    display:none;
    opacity:0;
    margin-left:10px;
    column-gap:10px
}

#mini-track-info {
    display: flex;
    flex-direction: column;
    font-size: 3.5vh;
    align-content: stretch;
    justify-content: center;
}