.with-box { border: 1px #999 solid; }
.with-box-pad { border: 1px #999 solid; padding: 10px; }
.login-box { text-align: center; border-bottom: 1px #999 solid; padding-top: 5px; }
.login-box form { text-align: left; font-size: 0.8em; margin-bottom:1em; }
.login-box table { font-size: 1em; }
.login-box a:link { text-decoration: underline; color: #000; }
.login-box a:visited { text-decoration: underline; color: #000; }
.login-box a:hover { text-decoration: underline; color: #999; }
.login-text { text-align: left; /*font-size: 0.8em;*/ }
.login-text-middle { text-align: left; padding-left:5px; padding-right:5px; /*font-size: 0.8em;*/ }
.left-heading { text-align: left; font-weight: bold; color: #666; padding: 2px; }
.left-heading a:link { text-decoration: none; color: #666; }
.left-heading a:visited { text-decoration: none; color: #666; }
.left-heading a:hover { text-decoration: underline; color: #999; }
.user-note { text-align: center; font-size: 0.8em; padding: 5px; }
.cats { padding-left: 10px; padding-right: 5px; padding-bottom: 10px; font-size: 0.8em; white-space: nowrap; }
.cats a:link { text-decoration: none; color: #000; }
.cats a:visited { text-decoration: none; color: #000; }
.cats a:hover { text-decoration: underline; color: #000; }
#content { border: 1px #999 solid; padding: 10px 5px 5px 5px; }
#content form { margin-bottom:0em; }
#content div.landing { padding-left: 25px; }
#cardtitle { font-size: x-large; font-weight: bold; background: #ccc;}
#cardform textarea { resize: none; overflow-y: hidden; }
td.content th { /* color: #666; padding: 2px; */ text-align: left; }
.rtl td.content th { /* color: #666; padding: 2px; */ text-align: right; }
.google { background: #ccc; padding: 5px; text-align: center; height: 100px; }
.spanish { background: #ccc; padding: 5px; margin: 0px 5px; text-align: center; }
.title1 { font-size: 2em; font-weight: bold; }
.under-banner { background: #369; }
li.search { float: right; }
.search form { display: inline; }
.search form input { font-size: 0.6em; }
.error { text-align: center; color: red; }
.error-left { text-align: left; color: red; }
#manage-users {border:1px solid #99b3b4;padding:15px;background-color:white}
#manage-users select {
	border: 1px solid #99b3b4;
	background: #e4ebeb;
	font:normal 1em auto;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color:#443;}
#manage-users div.pages {margin:10px;}
#manage-users div.pages div, #manage-users div.pages a {
	margin-right:1px; padding:1px 5px 2px 5px;
	border:1px solid #99b3b4; text-decoration:none;
	font-size:12px; color:#99b3b4;}
#manage-users div.pages div, #manage-users div.pages a:hover {
	border:1px solid #99b3b4; background-color:#99b3b4; color:#fff;}
#manage-users div.pages .current {
	border:1px solid #443;background-color:#99b3b4;color:#fff;}
#manage-users table {
	border-collapse:collapse; background-color:#fff;
	color:#4f6b72; border:solid 1px #C1DAD7;}
#manage-users table em {color:#333;display:block;}
#manage-users table em:hover {color:#cc3399;}
#manage-users td,  #manage-users th {border-left:solid 1px #C1DAD7;white-space:nowrap}
#manage-users th {padding-left:10px}
#manage-users caption {
	padding-left:10px; text-align: left; font-weight: bold; font-size: 11px;
	text-transform: uppercase; color: #FF6600; }
#manage-users table a {
	color:#950000; text-decoration:none; border:0;
	font: normal 11px auto;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}
#manage-users table a:link {text-decoration:none;}
#manage-users table a:visited {
	font-weight:normal; color:#666; text-decoration: none;}
#manage-users table a:hover {text-decoration:underline; }
#manage-users thead th,  #manage-users tfoot th,  #manage-users tfoot td {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72; border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7;
	letter-spacing: 1px; text-transform: uppercase; text-align: left;
	padding: 6px 6px 6px 12px; background: #CAE8EA;}
#manage-users tfoot td {text-align:right}
#manage-users tbody th,  #manage-users tbody td {border-bottom: solid 1px #C1DAD7;}
#manage-users tbody th {
	white-space: nowrap; padding:0 5px;
	background-color: #DAEFF1; color:#4f6b72;
	font-size:85%; font-family:Verdana; width:10px}
#manage-users tbody th a {color:#333;}
#manage-users tbody tr:hover {background:#EEF8F9;}
.changelog li { padding-left:3em; text-indent:-3em; }
.rtl .changelog li { padding-left:0px; padding-right:3em; }
.saved-message {
	text-align:center;
	font-size:0.8em;
	padding: 5px; }
.example {
	float:right;
	text-align:center;
	font-size:0.8em;
	margin-left:10px; 
	padding: 5px; }
.rtl .example { float:left; margin-left:0px; margin-right:10px; }
.sampler { float:right; }
.sampler div { text-align:center;font-size:0.8em;margin-left:10px;padding:5px; }
.sampler div:hover { background-color: #ccc; }
.sampler div a img { display: block; }
.rtl .sampler { float:left; }
.translate { padding:5px; text-align:left; }
.translate a:link { text-decoration: none; color: #000; }
.translate a:visited { text-decoration: none; color: #000; }
.translate a:hover { text-decoration: underline; color: #666; }
.translate .title-text { white-space: nowrap; }
.translate hr { width: 60%; }
.translate ol { 
	margin: 0;
	padding: 0;
	list-style-type: none; }
.translate ol li { 
	white-space: nowrap; 
	height: 1.3em;
	border: 1px solid #999;
	background-color: #ccc;
	margin: 2px; 
	padding: 3px; 
	display: block; 
	float:left; }
.rtl .translate ol li { float: right; }
.test-site-header { font-size:80px;font-weight:bold;color:white;font-variant:small-caps; }
#landing-note { width:50%; }
#searchresults b { color:red; }
.sidebar .buttons { margin-top: 1em; margin-bottom: 1.75em; }

label.button, a.button, button.button, #tools summary {
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    font-weight: 400;
    text-decoration: none;

    text-align: center;
    cursor: pointer;
    color: black;
    background-color: #eee;
    border-image: initial;

    border: 1px solid black;
    padding: 1px 0px 2px;

    margin: .5em auto;
    font-size: 1.25em;
    width: 124px;

    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.25em;
    padding-left: 0.25em;
}
label.button:active, a.button:active {
    background-color: #ccc;
}
.button svg, #moreBtn svg, .moreBtnSvg, .iconSvg {
    height: 1.25em;
    width: 1.25em;
    vertical-align: middle;
}
#moreBtn svg {
    height: 2em;
    width: 2em;
}
#autosave {
    text-align: left;
    color: white;
}
#tools summary span {
  margin-left: auto;
  margin-right: 0.25em;
}
#tools[open] summary span {
   transform: rotate(180deg);
}
#tools .button {
   width: 100px;
   margin-left: auto;
   margin-right: .75em;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #182534;
        color: #bbb;
    }
    a, .test-site-header { color: #bbb; }
    .landing details { color: black; }
    .google, #cardtitle { background-color: #171e26; }
    #moreBtn svg, .moreBtnSvg { stroke: #bbb; fill: #bbb; }
}


/* Colors for debugging */