html {
  font-size: 62.5%; 
}
body { font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 auto; line-height:1.5; font-size:16px; padding: 0.5rem 0.5rem; color: #444; max-width: 125rem; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


a { color: #444; }


.hide {display:none}

a.red {color:#ff001e;}
a.black {color:#444}
.black-container a {color:#444}

a.nodeco {text-decoration:none}

a:hover { color:#e81c4f }

a.blue {color:#66f}
a.blue:hover {color:#33a}

.bg-red {background:#ff001e; color:white}
.bg-red a {color:white}
.bg-red a:hover {color:white}

h3 a {color:#444; text-decoration:none}
h4 a {color:#444; text-decoration:none}

svg {margin-top:1rem}
svg.shortcode {cursor:pointer}

button {border:none; color:white; padding:0.5rem 1rem; border-radius:2px; vertical-align:middle}
button.btn-lg {border:none; color:white; padding:1rem 2rem; border-radius:2px; vertical-align:middle; font-size:2rem}
button.btn-compact {padding:0.1rem 0.5rem;}
button.green {background:#2ed573}
button.blue {background:#5352ed}
button.red {background:#ff4757}
button.orange {background:#ffa502}
button.silver {background:#ddd; color:#444}

label {font-weight:bold}
input[type=text] {border:1px solid #ccc; border-radius:2px; padding:0.6rem; margin:0; vertical-align:bottom; display:block; width: 100%}
textarea {display:block; width:100%; padding: 0.6rem}
input[type=search] {border:1px solid #ccc; padding:0.4rem; margin:0; vertical-align:bottom;}
button.btn-rsquare {border-radius:0px 2px 2px 0px}

.label {font-size:0.9em; font-weight:bold; padding:2px 5px}
.label-red {background:red; color:white}

.sticky { position: sticky; top:0; }
.wd50 {width:50%}
.wd75 {width:75%}

.narrow-content {width:75rem; margin: 0 2rem }
.narrow-p p {width:80rem; font-size:1.1em}
.narrow-p h4 {margin-top:2.5rem}

@media (max-width:950px) {
    .narrow-content {width:auto}
    .narrow-p p {width:auto}
}
@media (max-width:700px) {
    .narrow-content {width:auto}
    .narrow-p p {width:auto}
}

#idea-form {width:50%}
@media (max-width:950px) {
    #idea-form {width:75%}
}
@media (max-width:700px) {
    #idea-form {width:95%}
}

#fav-div {margin-bottom:2.5rem}

.gridheader {
     display:grid;
     grid-template-columns: 50rem 1fr;
     grid-column-gap: 2rem;
     grid-row-gap: 2rem;
     align-items:end;
     border-bottom:1px solid #ddd;
}

.gridheader h4 {display:inline-block}

@media (max-width:700px) {
    .gridheader { grid-template-columns: 1fr; text-align:center }
    .gridheader h4 {text-align:center; display:block}
}



.gridleftright {
     display:grid;
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 2rem;
     grid-row-gap: 2rem;
     align-items:end 
}

@media (max-width:700px) {
    .gridleftright {grid-template-columns: 1fr;}
    .gridleftright .text-right {text-align:center}
}


.showonmobile {display:none}
@media (max-width:700px) {
    .showonmobile {display:block}
}

@media (max-width:700px) {
    .hideonmobile {display:none}
}

@media (min-width:700px) {
    .hideondesktop {display:none}
}

@media (min-width:700px) and (max-width:950px) {
    .hideontab {display:none}
}

.text-center {text-align:center}
.text-bold {font-weight:bold}
.text-right {text-align:right}
.font-mono {font-family:monospace}
.text-big {font-size:1.1em}
.text-small {font-size:0.9em}


.grid6 div {text-align:center}
.grid6 {display: grid;  grid-column-gap: 1rem }
@media (max-width: 500px) {
    .grid6 {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 500px) {
    .grid6 {grid-template-columns: repeat(3, 1fr);}
}
@media (min-width: 750px) {
    .grid6 {grid-template-columns: repeat(6, 1fr);}
}

.mbhalf {margin-bottom:0.5rem}
.mb1 {margin-bottom:1rem}
.mb2 {margin-bottom:2rem}
.mb3 {margin-bottom:3rem}
.mb5 {margin-bottom:5rem}
.mthalf {margin-top:0.5rem}
.mt1 {margin-top:1rem}
.mt2 {margin-top:2rem}
.mt5 {margin-top:5rem}
.pt1 {padding-top:1rem}
.pb1 {padding-bottom:1rem}
.pb2 {padding-bottom:2rem}
.pxhalf {padding:0 0.5rem}
.px1 {padding:0 1rem}
.px2 {padding:0 2rem}
.mxhalf {margin:0 0.5rem}
.mx1 {margin:0 1rem}
.mx2 {margin:0 2rem}
.strike {text-decoration:line-through}
.bg-white {background:white}

thead {font-weight:bold; border-bottom:1px solid #ddd}

.div-ad-placeholder { text-align:center; padding: 30px 0; width: 800px; margin: 1rem auto 3rem auto; background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); }

@media (max-width:700px) {
  .div-ad-placeholder { max-width:90%; }
}

.div-table {
    overflow-x:auto;
}

#map-list-container {
  padding:10px 15px;
  border-left: 1px solid #ccc;
}

#map-list-container b {
  padding: 5px 0;
  color: black;
  text-decoration:underline;
}

#map-list-container a { text-decoration:none; }
#map-list-container a:hover { text-decoration:underline; }



@media (max-width:700px) {
  #map-list-container { background:#ffc; }
}
 

#map-list-div {
    max-height:420px;
    overflow:scroll;
}

table {
  width:100%;
  min-width:400px;
  border-collapse: collapse;
  border-spacing: 0;
}

table.zebra tr:nth-child(even) { background-color: #f2f2f2; }

#map-list-div table {
  min-width:0px;
}

td,
th {
  padding: 0;
}

th,
td {
  padding: 0.2rem 1rem;
  text-align: left;
  margin: 0;
}

td button {
  min-width:75px; 
  display:inline-block
}

tr {border-bottom:1px solid #eee}
#map-list-div tr {border-bottom:0}

.g-compare-body {
    display: grid;
    max-width: 100rem;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: 3fr 2fr;
    grid-column-gap: 3rem 
}

.g-compare-body svg {max-width:300px; margin: 0 auto; display:block }

.g-compare-page {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-column-gap: 2rem 
}


@media (max-width:700px) {
    .g-compare-body { grid-template-columns: 1fr; }
    .g-compare-body .text-right {text-align:center}

    .g-compare-page { grid-template-columns: 1fr; }
    .g-compare-page .text-right {text-align:center}
}

.g-modal {
    text-align:center
}

.span-label {padding:0 1rem; margin-right:0.5rem; border-radius:5px;}
.span-blue {background:#88f}
.span-red {background:#f88}

.border-blue {border-bottom: 2px solid #88f;}
.border-red {border-bottom: 2px solid #f88;}

#h-modal .border-red {border-bottom: 4px solid #f88}

hr {border:0; border-top:1px solid #ddd; margin:2rem 0}

.text-white {color:white}
.text-light {color:#aaa}
.text-black {color:#444}
.nomargin {margin:0}
.margintop {margin-top:1.0rem}
.marginright {margin-right:1.0rem}
.right {float:right}
.ib-div {display:inline-block; max-width:200px; margin-right: 3.5rem; vertical-align:top}
.compare-div {overflow-y:hidden; overflow-x: scroll; white-space:nowrap; margin-bottom:4rem; scroll-behavior:smooth}
.compare-div span {white-space:normal}
.compare-div div {display:inline-block; width:15%; min-width:125px; vertical-align:top; margin-right:1rem}
.compare-div svg {max-width:95%}

a.active { font-weight:bold; text-decoration: none }
a.active:hover {color: #444}

.svg-125 {width:125px}
.svg-150 {width:150px}
.svg-175 {width:175px}
.svg-200 {width:200px}
.svg-225 {width:225px}
.svg-250 {width:250px}

.compare-thumb-div {display:inline-block; vertical-align:top; margin: 0 1rem}

@media (max-width:700px) {
    .svg-125, .svg-150, .svg-175, .svg-200, .svg-225, .svg-250 {width: 28%}
    .compare-thumb-div {margin: 0 5px}
}

.compare-label {display:inline-block; min-height:3rem;}

.ad-300x250 {width:300px; height:250px; background:#eee; margin:1rem auto}
.ad-728x90 {width:728px; height:90px; background:#eee; margin:1rem auto}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto;
  padding: 1rem;
  width: 500px;
  max-width:90%;
  border: 1px solid #888;
}

#svg-compare {
    max-width:95%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 3rem;
  font-weight: bold;
  margin: 0;
  padding; 0;
  line-height:1rem;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.loading {
  position:fixed;
  top:0;
  right:0;
  background:#ffa;
  padding:0.2rem 0.5rem;
  font-weight:bold
}