@import url('//fonts.googleapis.com/css?family=Sansita+One');
body {font-size:14px; line-height:16px; font-family:Calibri,Arial,Helvetica,Verdana,Calibri,sans-serif;}
body {background: url(img/sfo.gif);}
#layout {width:90%; margin:0 auto; padding:.75em;}
h1 {font-size:2em; font-family: 'Sansita One',cursive,sans-serif; line-height:0.9;}
h2 {font-size:1.75em; text-transform:uppercase; font-weight:bold;}
small {font-size:70%;}
table {border:0;}
table.bordered, table.bordered th, table.bordered td {border:1px solid black; border-collapse:collapse;}
table.half {float:left; width:50%;}
tr.grey {background:#999;}
td {padding:.25em; vertical-align:top;}
td.state {width:210px; font-size:1.5em; font-weight:bold;}
td.img {width:310px; text-align:center; padding-top:0;}
td.img img {width:300px;}
td.num {width:100px;}
td.desc {width:270px; font-size:.75em;}
td.buy {width:100px; font-size:.75em;}
td.tag {width:100px;}
.discl, .discl a, .discl a:link {font-size:.5em; font-style:italic;}
.helper {/*font-size:10px;*/ cursor: help;}
hr {border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc);}
#mapdiv-ww {width: 100%; height: 450px;}
.t-error, .t-pend, .t-replace, .t-trade {font-style:italic;letter-spacing:3px;}
.t-error {color:hsl(348, 100%, 61%);} /*red*/
.t-pend {color:hsl(141, 71%, 48%);} /*green*/
.t-replace, .t-trade {color:hsl(48, 100%, 67%);} /*yellow*/
.grid-title {display: grid; grid-template-columns: 50% 50%;}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    /** Mix **/
    .map-display {display: none;}
    .mobile-none {display: none;}
    /** Nav **/
    #nav-main {font-size: 150%; position: sticky; top: 0; overflow: hidden;}
    /** LP table **/
    td.state, td.img, td.num, td.desc, td.buy, td.tag {width: 100%; text-align:center;}
    td.num, td.desc, td.buy, td.tag {display: none;}
    /** CL table **/
    td.cl-found, td.cl-iso2 {width: 20%; text-align:center; display: inline-block;}
    td.cl-name {width: 60%; display: inline-block;}
    td.cl-iso3, td.cl-region {display: none;}

    #intro {height:150px; overflow-y: scroll;}
}

/* SWAL */
div:where(.swal2-icon) {
    width: 1em !important;
    height: 1em !important;
}

/* Pico.CSS overwrite */
h1 {color:black;}
hr {margin: 3px 0;}
td {background-color: transparent !important;}
input,select,textarea {
--pico-form-element-background-color: #fff;
 /*background-color:var(--pico-background-color);*/
}

/* sup/sub columnized */
.supsub {display: inline-block;}
.supsub sup,.supsub sub {position: relative; display: block; font-size: .75em; line-height: 1;}
.supsub sup,.supsub sub {top: .25em;}

/* Tags */
.tags span {    
    display: inline-block;
    height: 20px;
    line-height: 20px;
    position: relative;
    margin: 0 12px 4px 0;
    padding: 0 10px 0 12px;
    background: #999;
    -webkit-border-bottom-right-radius: 3px;    
    border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;    
    border-top-right-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    color: #fff;
    font-size: .75em;    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /*font-weight: bold;*/
}

.tags span:before {
    content: "";
    position: absolute;
    top:0;
    left: -10px;
    width: 0;
    height: 0;
    border-color: transparent #999 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;        
}

.tags span:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 1px;
    float: left;
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
    box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
}

.tags span.zone {background: var(--pico-primary);}
.tags span.zone:before {border-right-color: var(--pico-primary);}

/* Scroll top */
.scrollbutton {
    display: none;
    position: fixed;
    bottom: 2%;
    right: 2%;
    background-color: #1b5490;
    color: white;
    padding: 3px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 20px;
}
.scrollbutton:hover {
    background-color: #2d6418;
}

/* @ref https://css-tricks.com/responsive-data-tables/ */
table {width: 100%; border-collapse: collapse; }
/* Zebra striping */ /*tr:nth-of-type(odd) {background: #eee;}*/
th {background: #333; color: white; font-weight: bold;}
/*td, th {padding: 6px; border: 1px solid #ccc; text-align: left;}*/

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {display: block;}
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {position: absolute; top: -9999px; left: -9999px;}
    tr { border: 1px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        /*padding-left: 50%;*/
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    /* Label the data
    td:nth-of-type(1):before { content: "First Name"; } */
}