* {box-sizing:border-box; -webkit-text-size-adjust:none; -webkit-tap-highlight-color:transparent;}
.selectable {-webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
.noselect, .foot, .btn, .qbtn, .hbtn, .dbtn, .smbtn, .mbtn {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.noselect, .foot {cursor:default}

body {margin:16px 10px 10px}
#content  {width:672px; margin:0px auto;}
a, a:hover {text-decoration:none}
textarea {display:block}
#alert, .alert {background-color:hsl(60,100%,82%); text-align:center; cursor:default;}
#showanalysis {overflow:hidden; transition: height 0.5s ease;}
.block {padding:20px 36px; position:relative; margin-top:10px;}
.sign  {padding:20px 36px; position:relative; margin:-49px -17px 28px; text-align:center;}

.text, .menulabel, .menu {outline:none; border:2px var(--inputborder) solid; background-color:white !important; color:black; resize:none;}
.widgetspace {display:inline-block; margin:2px 0px; white-space:nowrap; cursor:default;}
.checkbox {display:inline-block; background-color:white; border-radius:12px;}
.radio    {display:inline-block; background-color:white; border-radius:99px; margin:-1px;}
.checkbox polyline {stroke:black; fill:none; stroke-width:6px; stroke-linecap:round; stroke-linejoin:round;}
.radio circle      {stroke:none; fill:black;}
.menulabel {position:absolute; top:0px; left:0px; width:100%;}
.menu {opacity:0}
.menuspace {position:relative; display:inline-block; vertical-align:1px;}
.menuwidget {position:absolute; right:0px; top:0px; height:100%; fill:var(--inputborder); stroke:var(--inputborder); stroke-width:2px; stroke-linejoin:round;}

.navbar     {position:fixed; top:6px; left:0px; right:0px; z-index:10;}
.navbar div {width:662px; margin:0px auto; position:relative;}
.navbar svg {position:absolute; cursor:pointer;}
.foot div   {width:644px; margin:5px auto 0px; text-align:center;}
.icon       {position:absolute; top:1px; cursor:pointer;}

.art {position:relative; overflow:hidden; background-color:hsl(0,0%,100%,0.3);}
.art, .art img {width:672px; height:504px;}
.artborder {width:662px; height:494px; position:absolute; left:5px; top:5px; border:3px solid white; border-radius:13px; opacity:0.3;}
.a, .b {background-color:white; background-size:40px 40px; padding:4px 12px 4px 62px; min-height:52px;
	background-position:8px 6px; background-repeat:no-repeat; background-origin:padding-box;}
.a {margin:8px -8px 0px -8px}
.b {margin:8px -8px 0px 46px}

.dbtn, .smbtn, .mbtn {text-align:center; display:inline-block; cursor:pointer; white-space:nowrap; overflow:hidden;}
.qbtn       {text-align:center; cursor:pointer; left:0px; z-index:2; margin-top:12px;}
.fbtn,.hbtn {position:absolute; top:12px; margin-top:0px;}  /* this rule below .qbtn */
.hbtn       {text-align:right;  cursor:pointer; right:0px; z-index:1; font-style:normal;}
.qglow {color:var(--btntext); animation:glowbtn 1.0s ease-in-out infinite;}
@keyframes glowbtn {
	0%,40%,100% {background-color:hsl(60,100%,80%)}
	70% {background-color:hsl(60,100%,92%)}
}
.btngap {margin-left:2px}
#politicsbtn {display:inline-block; padding:7px 20px; height:auto; margin-left:-8px;}

.hide   {display:none !important}
.show   {visibility:visible}
.spacer {visibility:hidden}
/* set class to accordion (no rule, just indicator) or accordionclosed; do not set accordiontrans */
.accordiontrans, .qspace {overflow:hidden; transition:height .2s ease;}
.accordionclosed  {overflow:hidden; height:0px; display:none;}
.justify {text-align:justify}
.left {text-align:left !important}
.right {text-align:right !important}
.center {text-align:center}
table {border-spacing:0px; border-collapse:separate; vertical-align:top;}
tbody {vertical-align:inherit; border:inherit;}
tr {vertical-align:inherit; padding:0px; border:inherit;}
td {background-color:inherit; padding:inherit; vertical-align:inherit;}
.wrap {white-space:normal !important}
.nowrap {white-space:nowrap}
.arrow {cursor:default}
.rel {position:relative}
.gap {height:20px}
.gapt {height:12px}
.biggap {margin-top:32px}



/* DIAGNOSTIC LOG */
.log {position:fixed; background-color:black; white-space:pre; overflow:auto; word-wrap:normal; word-break:normal; cursor:text; -webkit-overflow-scrolling:touch; z-index:998;}
.log, .log h1, .log h2, .log h3 {font-family:Arial; font-size:11px; line-height:13px; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;}
.log h1, .log h2, .log h3 {display:inline; font-weight:normal; margin:0px;}
#serverlog {left:0px; bottom:0px; width:75%; height:50%; padding:10px 20px; color:#999999;}
#clientlog {right:0px; bottom:0px; width:25%; height:50%; padding:10px; color:white;}
.log h1 {color:white}
.log h2, .log a {color:hsl(60,100%,50%)}
.log h3 {color:#999999}
.log h1, .log h2, .log h3 {font-style:normal}
.log p {margin:6px 0px 0px 0px}
.log::selection {background-color:hsl(210,100%,40%)}