body
{
color:black;
font-family:Verdana,Arial;
margin:0;
padding:0;
}
@media (prefers-color-scheme: dark) {
 body
 {
 color:#fff;
 background-color:#000;
 }
 #menu
 {
 background:black !important;
 }
 input,select,textarea,A.button,A.smallbutton,#panel ul li a
 {
 color:#fff !important;
 background-color:#000 !important;
 }
 table.report tr:nth-child(even) 
 {
 background:#555 !important;
 }
 a
 {
 color:#fff !important;
 }
 a:visited
 {
 color:#fff !important;
 }
 a:hover
 {
 color:#fff !important;
 }
 .blacktext
 {
 color:#000;
 }
 .news
 {
 box-shadow:0 0 10px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.1) !important;
 -webkit-box-shadow:0 0 10px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.1) !important;
 -moz-box-shadow:0 0 10px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.1) !important;
 background:#000 !important;
 }
 .news:before, .news:after
 {
 -webkit-box-shadow:0 6px 12px rgba(255,255,255,0.4) !important;
 -moz-box-shadow:0 6px 12px rgba(255,255,255,0.4) !important;
 box-shadow:0 6px 12px rgba(255,255,255,0.4) !important;
 } 
}

P
{
font-family:Verdana,Arial;
}
TD
{
font-family:Verdana,Arial;
}
TD.header
{
font-weight:bold;
}
H1
{
font-family:Verdana,Arial;
font-size:16pt;
font-style:normal;
font-weight:bold;
margin-bottom:0;
padding-bottom:0;
text-align:left;
display:inline;
}
H2
{
font-family:Verdana,Arial;
font-size:12pt;
font-style:normal;
font-weight:bold;
margin-bottom:0;
padding-bottom:0;
text-align:left;
display:inline;
}
H3
{
font-family:Verdana,Arial;
font-size:12pt;
font-style:normal;
font-weight:bold;
margin-bottom:0;
padding-bottom:0;
text-align:left;
}

a
{
color:black;
text-decoration:none;
}
a:visited
{
color:black;
text-decoration:none;
}
a:hover
{
color:black;
text-decoration:none;
}
#tophead
{
position:absolute;
z-index:55;
width:100%;
height:60px;
}

#tophead.fix
{
position:fixed;
top:-27px;
}

.small
{
font-size: 8px;
text-align: left;
}

div#navbar
{
display:block;
padding:5px;
height:25px;
background-color:rgb(36,27,255);
color:white;
}

div#centering
{
text-align:center;
}

.rowinfo
{
text-align:left;
border-bottom:1px dotted #999;
margin:7px 10px 0;
display:block;
}

.rowinfo:last-child
{
border-bottom:0px none;
margin-bottom:3px;
}

.rowinfo:last-child .button
{
margin:0 0 5px;
}

.rowinfo .button
{
margin:0;
padding:0 2px 2px 2px;
height:15px;
}

.valcont
{
float:right;
width:auto;
font-size:10px;
}

.row
{
min-height:36px;
border-radius:0;
text-align:left;
margin:0 0 0 14px;
line-height:36px;
display:block;
overflow:hidden;
}

.row>input
{
box-sizing:none;
-webkit-box-sizing:none;
border-radius:0;
margin:0 10px 0 0;
border:0 none #FFF;
border-bottom:1px solid #999;
-webkit-appearance:none; 
height:36px;
background:none;
float:right;
width:240px;
text-align:right;
font-size:14px;
}
.row>input.short
{
width:160px;
}

.row>input.left
{
float:left;
text-align:left;
}

.row>select
{
border-radius:0;
margin:5px 0;
border-bottom:1px solid #999;
height:26px;
background:none;
float:right;
width:auto;
font-size:14px;
}

.row>textarea
{
border-radius:10px;
display:block;
width:calc(100% - 10px);
margin:0 5px 5px 0;
height:100px;
border:1px solid #999;
}

.row>.valcont
{
border-radius:0;
margin:0 10px 0 0;
height:36px;
background:none;
}

.row>input[type=checkbox]
{
border:1 solid #000;
width:25px;
height:20px;
margin:8px;
background:red !important;
}

.row>input[type=checkbox]:checked
{
background:green !important;
}

.row>input[type=file]
{
display:none;
}

.row>input[type=file] + span
{
cursor:pointer;
min-width:140px;
max-width:240px;
white-space:nowrap;
text-overflow: ellipsis;
overflow:hidden;
border: 1px lightgray dashed;
padding: 0 6px;
}


.row>input[type=submit]
{
width:auto;
}

.row>.button
{
border:1px solid #888;
margin:5px 10px 5px 0;
}

.row>label
{
position:absolute;
}

.row>span
{
float:right;
margin-right:10px;
}

.fright
{
float:right;
margin-right:10px;
}

#container
{
display:flex;
overflow:hidden;
height:100vh;
position:relative;
width:100%;
backface-visibility:hidden;
will-change:overflow;
box-sizing:border-box;
padding-top:60px;
}

#navmsg
{
avertical-align:top;
}

#navmsg svg
{
height: 25px;
float:left;
padding-left:3px;
}

#menu, #panel
{
overflow:auto;
height:auto;
-webkit-overflow-scrolling:touch;
-ms-overflow-style:none;
}

#menu::-webkit-scrollbar, #panel::-webkit-scrollbar
{
display:none;
}

#panel {
text-align:left;
margin:0;
padding:0 .5rem;
flex:1;
}

#menu
{
width:240px;
transition:margin-left 0.5s;
z-index:50;
background:white;
}

#menu.close
{
margin-left:-245px;
}

#menubtn
{
display:none;
cursor:pointer;
}

#menubtn.floatmenu
{
 display:initial;
}

#menubtn.floatmenu + svg
{
 display:none;
}

#menu.floatmenu
{
position:absolute;
box-shadow:0 0 5px 1px grey;
height:calc(100vh - 60px);
}

.loginButtons
{
cursor:ponter;
text-align:center;
}

#brand
{
margin-top:15px;
text-align:center;
}

#brand img
{
width:70%;
display:block;
margin: auto;
}

.loadsign
{
height:100%;
position:relative;
}
.loadsign>div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#888;
}
.loadsign>div>div
{
display:inline-block;
width:45px;
height:28px;
}
.loadsign>div>div:after
{
content:" ";
display:block;
width:15px;
height:15px;
margin:8px;
border-radius:50%;
border:6px solid #888;
border-color:#888 transparent #888 transparent;
animation:dring 1.2s 0.2s linear infinite;
}
@keyframes dring 
{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}

ul
{
margin:0;
padding:0;
font-size:18px;
list-style:none;
}

ul li 
{
list-style-type:none;
list-style-image:none;
border-bottom:1px solid #E0E0E0;
padding:8px 0 8px 10px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

ul.wrap li 
{
white-space:initial;
}

ul li.group 
{
background:rgb(116,116,172);
white-space:nowrap;
}

ul li.signin 
{
padding:0;
}

ul li.warning 
{
font-size:13px;
text-align:center;
font-style:italic;
color:red;
}


ul li span
{
TEXT-DECORATION:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
display:block;
cursor:pointer;
user-select:none; 
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none
-ms-user-select:none;
}

ul li span img
{
height:32px;
}

ul li span.selectable
{
user-select:text; 
-webkit-touch-callout:text;
-webkit-user-select:text;
-khtml-user-select:text;
-moz-user-select:text
-ms-user-select:text;
}


table.report
{
dfont-size:12px;
border-collapse:collapse;
border:1px dotted;
border-right:0;
display:inline-block;
}

table.report tr:nth-child(even) 
{
background:#CCC;
}

table.report tr td,table.report tr th
{
white-space:nowrap;
padding:1px 10px;
margin:0px;
border-right:1px dotted;
}

table.report tr td[rowspan]
{
d-background:#fff;
border-top:1px dotted;
}

td.number
{
text-align:right;
}

fieldset.information
{
text-align:left;
padding:0 5px;
}

img.graph
{
width:100%;
max-width:580px;
}

.framepanel
{
border:0;
width:100%;
}

.news
{
max-width:700px;
padding:10px;
margin:10px auto 20px auto;
position:relative;
box-shadow:0 0 10px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.1);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.1);
background:white;
}

.news:before, .news:after
{
position:absolute;
width:40%;
height:10px;
content:' ';
left:0;
bottom:12px;
background:transparent;
transform:skew(-5deg) rotate(-5deg);
box-shadow:0 6px 12px rgba(0,0,0,0.4);
z-index: -1;
} 

.news:after
{
left:auto;
right:0;
transform:skew(5deg) rotate(5deg);
}

.news>div
{
overflow:scroll;
}

.news>.noscroll
{
overflow:hidden;
}

#photosearch
{
position:absolute;
z-index:10;
margin:5px 0;
}
#photosearch>input
{
border-radius:15px;
border:0;
box-shadow:0 0 10px 5px #888;
font-size:14px;
padding:5px;
-webkit-appearance: none;
}

#photocontainer
{
padding-top:40px;
display:grid;
grid-template-columns:repeat(auto-fill, 150px);
justify-content:space-around;
}
.photoitem
{
display:inline-block;
text-align:left;
}
.pihide
{
display:none;
}
.photoitem>div
{
margin: 0 3px 3px 0;
height: 230px;
width: 146px;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
position:relative;
color:white;
font-size:13px;
}
.photoitem>div:not([style])
{
box-shadow:inset 0 0 5px 5px #888;
}
.photoitem>div>div
{
position:absolute;
bottom:0;
width:100%;
padding-top:5px;
background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.5) 7px);
}

#videocontainer
{
display:flex;
flex-flow:wrap;
justify-content:space-evenly;
}
.videoitem
{
display:inline-block;
text-align:left;
position:relative;
max-width:475px;
width:100%;
margin:10px 5px;
}
.videoitem:before
{
position:absolute;
content:'';
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
border-radius: 20px;
box-shadow: 0px 0px 10px 3px rgba(128,128,128,0.5);
}
.videoitem>a>div
{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.videoitem>a>div>svg
{
width:100%;
}
.videoitem>a>span
{
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:block;
text-align:center;
}
.live:after
{
content:"LIVE";
border:2px solid;
border-radius:7px;
padding:3px;
position:absolute;
z-index:3;
right:10px;
top:10px;
animation:livetr 2s 0.2s linear infinite;
background-color:rgba(0,0,0,0.5);
color:white;
border-color:white;

}
@keyframes livetr 
{
0% {color: white;border-color:white;}
50% {color: red;border-color:red;}
100% {color: white;border-color:white;}
}