@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

a,a:visited {color:#0000ff; font-size:20px;}
a.close {text-decoration-line:none}

button {background-color:#ff0000;border:none;border-radius:10px;color:white;text-align:center;box-shadow:0 3px 6px rgba(0,0,0,.35);padding:10px 20px;font-family: Inter, Karla,Noto Sans TC,Noto Sans SC,Trebuchet MS, Trebuchet, Arial, Arial Unicode MS, sans-serif !important}
button:hover, #menulogo:hover, #menulogo_square:hover, .menulogo:hover {opacity:0.7;cursor:pointer}
button:disabled {background-color:#999999;}
input,textarea,select {border: 2px solid #ff0000;margin:5px;font-size:20px;border-radius:10px}
input.center {text-align:center;}
div {text-align:center;padding:10px}
div#map, div#pano {padding:0px !important}
div#map div, div#map span, div#pano div, div#pano span {padding:0px !important}
html, body {height: 100%;margin: 0;padding: 5px;overflow-y: scroll;font-family: Inter, Karla,Noto Sans TC,Trebuchet MS, Trebuchet, Arial, Arial Unicode MS, sans-serif !important;font-size:20px; 
}
body {}
h1 {text-align:center;font-size:24px}
h2 {text-align:center;font-size:20px}
select {font-family: Inter, Karla,Noto Sans TC,Trebuchet MS, Trebuchet, Arial, Arial Unicode MS, sans-serif !important}
table, tr, th, td {text-align:center;border:none}
tr {margin:10px 0px}
th {background-color:#ff0000;color:#ffffff}

.ellipsis {overflow:hidden;text-overflow: ellipsis;width:60vw}
.loginerror {color:red;}
.gametab {position:absolute;top:100px;left:92px;right:15px;max-height:calc(100% - 200px);border-radius:20px;z-index:10000;background:white;box-shadow:0 3px 6px rgba(0,0,0,.35);padding:20px;overflow-x:hidden;}
.stats {font-size:45px}
.welcome {font-size:24px;font-weight:bold;}
.cancelbutton {background-color:#999999 !important}
span.topicons {margin:0px 10px}
span.topicons a {text-decoration:none}
div.topiconbar {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:10px 0px}

#cookieprint {font-size:24px;text-align:center;display:none;}
#demo {text-align:center; overflow: auto;font-size:28px;display:inline}
#footer,a#footer { text-align:center; font-size:20px; color:#606060; }
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#infobox {position:absolute;z-index:10001;border-radius:20px;box-shadow:0 3px 6px rgba(0,0,0,.35);left:15%;top:25%;width:70%;height:50%;border:none;background:white;text-align:center;overflow:auto; overflow-x: hidden;director:ltr;font-size:20px;display:none}
#fullscreen {position:absolute;z-index:50;height:100%;width:100%;text-align:center;overflow:auto;director:ltr;font-size:20px;display:none}
#fullscreendemo {font-size:24px;}
#fullscreenmap {display:block;height:100%;width:100%}
#fullscreenclose {position:absolute;top:2%;right:5%;z-index:50;display:none;font-size:24px}
#fullscreentickerline {position:absolute;top:2%;left:50%;width:50%;transform:translate(-50%,0%);text-align:center;z-index:50;display:none;font-size:24px;border:none;}
#fullscreentickertable {width:100%;border:none;background:#ffffff;}
#fullscreentickertable td {border:2px solid #ff0000;}
#infoboxtable {position:absolute;top:10%;height:90%;width:100%;border:none;text-align:center;font-size:20px}
#infoboxcontent {font-size:16px;border:none}
#instruction {padding:10px;text-align:center;}
#logo {}
#lowerlinks {font-size:16px;display:block}
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;height:40%;overflow: auto}
#maptitle {font-size: 20px;text-align:center;display:block;margin:0 0 0 0}
#menu div div, #menu div div .menuitem {background-color:#ffffff;border:solid 2px #ffffff;border-radius:20px}
#menu div a, #menu div div .menuitem a {color:#ff0000;font-size:24px;text-decoration:none}
#message, #boxmessage {position:absolute;right:10px;bottom:10px;padding:20px 20px;background:white;z-index:200;transition:display 0.5s, opacity 0.5s;box-shadow:0 3px 6px rgba(0,0,0,.35);border-radius:10px;}
#pageblur {background-color:#000000;position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:99;opacity:0.5;display:none}
#punchbutton, .punchbutton, .cancelbutton {text-align:center;font-size:20px}
#punchbuttonsmall, .punchbuttonsmall {padding:10px;text-align:center;font-size:16px;}
#scoreform {display:none;text-align:center}
#tickerline {padding:5px}
#tickertable {width:100%;border:none}
#tickertable td {border:solid 2px #ff0000;}
#timer {font-size:16px;text-align:center;display:inline}


.windowtitle {font-size:18px}
h2.windowtitle {font-size:16px}

/*Slider switch*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 29px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #ff0000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ff0000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




/* Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #888888;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff0000;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff6666;
}

@media only screen and (max-width: 800px) {
  span.topiconlabel {display:none}
  span.topicons a {text-decoration:none}
}