/* shared chrome - generated from reference pages, do not hand-edit per page */

* { box-sizing: border-box; }
body {
    background-color: #F0EFE8;
    color: #222222;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 0;
}
a { color: #2560E8; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #2560E8; }
#bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 20px;
    background-color: #FFFFFF;
    border-bottom: 2px solid #cccccc;
    color: #222222;
    justify-content: space-between;
    align-items: center;
}
#bar a { color: #222222; font-size: 15px; }
#bar a:visited { color: #222222; }
#bar a:hover { color: #2560E8; }
#bar .brand { font-size: 20px; margin-right: 15px; }
#bar .brand .ez { color: #2560E8; font-weight: bold; }
.ez { color: #2560E8; font-weight: bold; }
.free { font-weight: bold; }
a .free, a:visited .free { color: #222222; }
#bar .brand .free { color: #222222; font-weight: bold; }
#bar .on { text-decoration: underline !important; }
#page { display: flex; width: 100%; }
#left-ads, #right-ads { background-color: #FFFFFF; padding: 0; width: 180px; }
.ad-stick { padding: 5px; position: sticky; top: 50px; }
#content { background-color: #FFFFFF; padding: 20px; flex: 1; }
.ad { background-color: #E8E7E0; border: 2px dashed #bbbbbb; box-sizing: border-box; color: #222222; font-size: 14px; font-weight: bold; margin: 0 0 5px 0; padding: 20px 0; text-align: center; width: 100%; }
.breadcrumb { color: #222222; font-size: 14px; margin-bottom: 10px; }
.breadcrumb a { color: #2560E8; text-decoration: underline; }
.breadcrumb a:visited { color: #2560E8; }
.tool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
h1 { font-size: 28px; margin: 0; }
.tool-sub { color: #222222; font-size: 16px; margin-bottom: 12px; }
.fav-btn { border: 2px solid #cccccc; color: #222222; cursor: pointer; font-size: 14px; padding: 4px 10px; text-decoration: none !important; }
.fav-btn:hover { border-color: #2560E8; color: #2560E8; }
.fav-btn.on { background-color: #DDAA00; border-color: #DDAA00; color: #FFFFFF; }
.category { border: 2px solid #cccccc; margin-bottom: 20px; box-sizing: border-box; max-width: 100%; }
.category h2 { margin: 0; padding: 5px 10px; font-size: 14px; background-color: #333333; color: #FFFFFF; }
.category h2 span { font-weight: normal; opacity: 0.7; }
.sub { color: #2560E8; font-size: 15px; font-weight: bold; margin: 12px 10px 4px 10px; }
.sub .cnt { color: #aaaaaa; font-weight: normal; }
.sub:first-of-type { margin-top: 10px; }
.tool-list { line-height: 1.8; padding: 0 10px 2px 10px; }
.tool-list a { color: #222222; font-size: 14px; }
.tool-list a:visited { color: #222222; }
.tool-list a:hover { color: #2560E8; }
.tool-list a::after { color: #aaaaaa; content: ", "; }
.tool-list a:last-child::after { content: ""; }
.tool-list:last-child { padding-bottom: 10px; }
.related a { color: #222222; }
.related a:visited { color: #222222; }
.related a:hover { color: #2560E8; }
.related a::after { color: #aaaaaa; content: ", "; }
.related a:last-child::after { content: ""; }
.credit { font-size: 14px; color: #222222; margin-top: 10px; }
.credit a { color: #22468A; font-weight: bold; text-decoration: none; }
.credit a:hover { text-decoration: underline; }
#footer {
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #222222;
    background-color: #FFFFFF;
    border-top: 2px solid #cccccc;
}
#footer a { color: #2560E8; margin: 0 10px; }
#footer .copyright { color: #222222; font-size: 12px; margin-top: 10px; }
body.dark { background-color: #000000; color: #EEEEEE; }
body.dark #bar { background-color: #111111; border-color: #333333; color: #EEEEEE; }
body.dark #bar a { color: #EEEEEE; }
body.dark #bar a:visited { color: #EEEEEE; }
body.dark #bar a:hover { color: #5588FF; }
body.dark #bar .brand .ez { color: #5588FF; }
body.dark .ez { color: #5588FF; }
body.dark a .free, body.dark a:visited .free { color: #EEEEEE; }
body.dark #bar .brand .free { color: #EEEEEE; }
body.dark #content { background-color: #111111; }
body.dark .tool-sub { color: #EEEEEE; }
body.dark .field label { color: #EEEEEE; }
body.dark .category { border-color: #222222; }
body.dark .category h2 { background-color: #222222; }
body.dark .sub { color: #5588FF; }
body.dark .sub .cnt { color: #666666; }
body.dark .tool-list a { color: #cccccc; }
body.dark .tool-list a:visited { color: #cccccc; }
body.dark .tool-list a:hover { color: #5588FF; }
body.dark .fav-btn { border-color: #222222; color: #aaaaaa; }
body.dark .fav-btn:hover { border-color: #5588FF; color: #5588FF; }
body.dark .fav-btn.on { background-color: #DDAA00; border-color: #DDAA00; color: #000000; }
body.dark .breadcrumb { color: #EEEEEE; }
body.dark .breadcrumb a { color: #5588FF; }
body.dark .ad { background-color: #1A1A1A; border-color: #333333; color: #EEEEEE; }
body.dark #footer { background-color: #111111; border-color: #333333; color: #EEEEEE; }
body.dark #footer .copyright { color: #EEEEEE; }
body.dark #footer a { color: #5588FF; }
body.dark .credit { color: #EEEEEE; }
body.dark .credit a { color: #5588FF; }
body.dark a { color: #5588FF; }
body.dark a:visited { color: #5588FF; }
body.dark #left-ads, body.dark #right-ads { background-color: #0A0A0A; }
@media (max-width: 1000px) {
    #left-ads, #right-ads { display: none; }
}
body.no-ads #left-ads, body.no-ads #right-ads { display: none; }
.modal-overlay { background-color:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; position:fixed; top:0;left:0;right:0;bottom:0; z-index:200; }
.modal-box { background-color:#FFFFFF; border:2px solid #cccccc; max-width:450px; width:90%; max-height:90vh; overflow-y:auto; }
.modal-header { background-color:#333333; color:#FFFFFF; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:bold; padding:8px 12px; }
.modal-close { cursor:pointer; font-size:20px; line-height:1; }
.modal-close:hover { color:#cccccc; }
.modal-body { padding:15px; }
.modal-field { margin-bottom:12px; }
.modal-field label { display:block; font-size:12px; font-weight:bold; margin-bottom:4px; }
.modal-field input, .modal-field textarea, .modal-field select { width:100%; padding:8px 10px; border:2px solid #aaaaaa; font-family:Arial,sans-serif; font-size:14px; box-sizing:border-box; }
.modal-field textarea { height:100px; resize:vertical; }
.modal-field input:focus, .modal-field textarea:focus { border-color:#2560E8; outline: none; }
.modal-field select { min-width:150px; width:auto; }
.modal-submit { width:100%; padding:10px; font-family:Arial,sans-serif; font-size:14px; font-weight:bold; background-color:#2560E8; color:#FFFFFF; border:none; cursor:pointer; }
.modal-submit:hover { background-color:#1E50C8; }
.modal-success { display:none; font-size:14px; padding:20px; text-align:center; }
body.dark .modal-box { background-color:#111111; border-color:#222222; }
body.dark .modal-header { background-color:#222222; }
body.dark .modal-field input, body.dark .modal-field textarea, body.dark .modal-field select { background-color:#000000; border-color:#222222; color:#EEEEEE; }
.tool-list a.last-vis::after { content: ""; }