:root {
  --small: 739px;
  --medium: 1023px;
  --large: 1199px;
  --link:#006699;
  --link-hover: #028AE4;
  --link-on-black: #38afff;
  --link-on-black-hover: #a8dcff;
  --programs:  #9e8317;
  --taxes: #445d92;
  --transparency: #479ac1;
  --purchasing: #c8750a;
  --economy: #64733b;
  --about: #973831;
  --sans: opensans, times, "Helvetica Neue", Arial, sans-serif;
  --sans-ital: opensans-ital;
  --mono: reddit-mono, "Liberation Mono", Courier, monospace;
  --caption: #44413f;
  --caption-txt: white;
  --thead: #c5bfb5;
  --thead-txt: #111111;
  --stripe: #ede8e5;
  --table-border: 1px solid #44413f; }

:root {
  --small: 739px;
  --medium: 1023px;
  --large: 1199px;
  --link-color:#006699;
  --link-hover: #028AE4; }

@font-face {
  font-family: 'roboto';
  src: url("/fonts/roboto/RobotoSlab-VariableFont_wght.woff2") format("woff-variations"), url("/fonts/roboto/RobotoSlab-VariableFont_wght.ttf") format("ttf-variations");
  font-weight: 100 900;
  font-optical-sizing: auto; }

main {
  --roboto: roboto, georgia, serif;
  --serif: roboto, georgia, serif; }

.serif, .roboto {
  font-family: var(--serif);
  font-size: inherit;
  font-weight: 400; }
  .serif.semi, .roboto.semi {
    font-weight: 600; }
  .serif.xbold, .roboto.xbold {
    font-weight: 800; }
  .serif.black, .roboto.black {
    font-weight: 900; }
  .serif.bold, .serif b, .serif strong, .roboto.bold, .roboto b, .roboto strong {
    font-weight: 700; }

@font-face {
  font-family: 'opensans';
  src: url("/fonts/opensans-var/OpenSans-VariableFont_wdth,wght.woff2") format("woff2-variations"), url("/fonts/opensans-var/OpenSans-VariableFont_wdth,wght.ttf") format("ttf-variations");
  font-weight: 300 800;
  font-stretch: 75 100; }

@font-face {
  font-family: 'opensans-ital';
  src: url("/fonts/opensans-var/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2-variations"), url("/fonts/opensans-var/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("ttf-variations");
  font-weight: 300 800;
  font-stretch: 75 100; }

main {
  --sans: opensans, times, 'Helvetica Neue', Arial, sans-serif; }

.sans {
  font-family: opensans, times, "Helvetica Neue", Arial, sans-serif;
  font-size: inherit;
  font-weight: 400; }
  .sans.semi {
    font-weight: 600; }
  .sans.xbold {
    font-weight: 800; }
  .sans.black {
    font-weight: 900; }
  .sans.bold, .sans b, .sans strong {
    font-weight: 700; }
  .sans em, .sans.ital {
    font-family: opensans-ital;
    font-style: italic; }

:root {
  --sans-reg: 'font-weight:400;font-family:opensans;';
  --sans-med: 'font-weight:500;font-family:opensans;';
  --sans-semi: 'font-weight:600;font-family:opensans;';
  --sans-bold: 'font-weight:700;font-family:opensans;';
  --sans-extra: 'font-weight:800;font-family:opensans;';
  --sans-black: 'font-weight:900;font-family:opensans;';
  --sans-reg-ital: 'font-weight:400;font-family:opensans-ital;';
  --sans-med-ital: 'font-weight:500;font-family:opensans-ital;';
  --sans-semi-ital: 'font-weight:600;font-family:opensans-ital;';
  --sans-bold-ital: 'font-weight:700;font-family:opensans-ital;';
  --sans-extra-ital: 'font-weight:800;font-family:opensans-ital;';
  --sans-black-ital: 'font-weight:900;font-family:opensans-ital;'; }

@font-face {
  font-family: 'steelfish-bold';
  src: url("/fonts/steelfish/steelfish_bd-webfont.eot");
  src: url("/fonts/steelfish/steelfish_bd-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/steelfish/steelfish_bd-webfont.woff2") format("woff2"), url("/fonts/steelfish/steelfish_bd-webfont.woff") format("woff"), url("/fonts/steelfish/steelfish_bd-webfont.ttf") format("truetype"), url("/fonts/steelfish/steelfish_bd-webfont.svg#steelfish_rgbold") format("svg");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'steelfish-extrabold';
  src: url("/fonts/steelfish/steelfish_eb-webfont.eot");
  src: url("/fonts/steelfish/steelfish_eb-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/steelfish/steelfish_eb-webfont.woff2") format("woff2"), url("/fonts/steelfish/steelfish_eb-webfont.woff") format("woff"), url("/fonts/steelfish/steelfish_eb-webfont.ttf") format("truetype"), url("/fonts/steelfish/steelfish_eb-webfont.svg#steelfishextrabold") format("svg");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'steelfish';
  src: url("/fonts/steelfish/steelfish_rg-webfont.eot");
  src: url("/fonts/steelfish/steelfish_rg-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/steelfish/steelfish_rg-webfont.woff2") format("woff2"), url("/fonts/steelfish/steelfish_rg-webfont.woff") format("woff"), url("/fonts/steelfish/steelfish_rg-webfont.ttf") format("truetype"), url("/fonts/steelfish/steelfish_rg-webfont.svg#steelfish_rgregular") format("svg");
  font-weight: 400;
  font-style: normal; }

/*
@font-face {
    font-family: 'steelfish-italic';
    src: url($font-path + 'steelfish/steelfish_rg_it-webfont.eot');
    src: url($font-path + 'steelfish/steelfish_rg_it-webfont.eot?#iefix') format('embedded-opentype'),
         url($font-path + 'steelfish/steelfish_rg_it-webfont.woff2') format('woff2'),
         url($font-path + 'steelfish/steelfish_rg_it-webfont.woff') format('woff'),
         url($font-path + 'steelfish/steelfish_rg_it-webfont.ttf') format('truetype'),
         url($font-path + 'steelfish/steelfish_rg_it-webfont.svg#steelfishregular_italic') format('svg');
    font-weight: 400;
    font-style: italic;

}


*/
.main {
  --condensed: steelfish; }

.condensed {
  font-family: var(--condensed); }
  .condensed strong {
    font-family: steelfish-bold;
    font-weight: 700; }
  .condensed.xbold {
    font-weight: 900; }

.steelfish {
  font-weight: 400;
  font-family: steelfish, "Arial Narrow", Arial, san-serif !important; }
  .steelfish i, .steelfish em {
    font-style: italic;
    font-weight: inherit;
    font-size: inherit; }
  .steelfish b, .steelfish strong {
    font-style: inherit;
    font-weight: 700 !important;
    font-size: inherit;
    font-family: steelfish-bold,  "Arial Narrow", Arial, sans-serif !important; }
  .steelfish.extrabold {
    font-weight: 800 !important;
    font-family: steelfish-extrabold, "Arial Black", Arial, sans-serif !important; }

.xbold-sans {
  font-weight: 900;
  font-family: var(--sans); }

.sans {
  font-family: var(--sans) !important; }

:root {
  --highcharts-color-0: #ad5505;
  --highcharts-color-1: #c48a1c;
  --highcharts-color-2: #7f6703;
  --highcharts-color-3: #d2823c;
  --highcharts-color-4: #6b6b22;
  --highcharts-color-5: #3e717f; }

/*start snapshots*/
.snap {
  --intro-bg: #294a3b;
  --intro-txt: white;
  --intro-border: #ca500f;
  --accent-lt: #f3dc97;
  --accent-dk: #9d6e05;
  --kelly-bg: #ca500f;
  --outdent: 0;
  --imports: black;
  --exports: #999;
  --exports-txt: white;
  --imp-exp: #8e8e7b;
  --seal-bg: rgb(62, 113, 127);
  --sticker-size: 240px;
  --caption: #4063a4; }
  .snap .source {
    color: #294a3b;
    color: var(--intro-bg); }
  .snap .black {
    color: black !important; }
  .snap hr.accent {
    border-bottom-color: white; }
  .snap .intro-bak {
    background-color: #294a3b; }
  .snap .exports {
    background-color: var(--exports);
    color: var(--exports-txt); }
  .snap .imports {
    background-color: var(--imports); }
  .snap p,
  .snap ul,
  .snap li {
    font-family: var(--serif);
    color: var(--intro-bg);
    font-size: 1rem; }
    .snap p.source,
    .snap ul.source,
    .snap li.source {
      font-size: 0.85rem; }
  .snap a.main,
  .snap details summary {
    color: var(--seal-bg) !important; }
    .snap a.main:hover, .snap a.main:focus,
    .snap details summary:hover,
    .snap details summary:focus {
      color: var(--accent-dk) !important;
      -webkit-text-decoration-color: var(--accent-dk) !important;
              text-decoration-color: var(--accent-dk) !important; }
  .snap a.main {
    -webkit-text-decoration: 0.03215rem underline dashed var(--seal-bg);
            text-decoration: 0.03215rem underline dashed var(--seal-bg);
    text-underline-offset: 2px; }
  .snap aside p,
  .snap aside ul,
  .snap aside li {
    font-family: var(--sans);
    font-size: 1rem; }
  .snap h2,
  .snap h3 {
    text-transform: uppercase;
    color: var(--accent-dk);
    font-size: 1.25rem; }
  .snap h3 {
    font-size: 0.85rem; }
  .snap .intro-box {
    border-left: 20px solid var(--intro-border);
    background-color: var(--intro-bg);
    padding: 1rem; }
    .snap .intro-box p {
      color: var(--intro-txt); }
      .snap .intro-box p span {
        text-transform: uppercase;
        font-family: var(--sans); }
      .snap .intro-box p strong {
        font-weight: 800;
        text-transform: uppercase;
        color: var(--accent-lt); }
      .snap .intro-box p.port-of-entry {
        font-size: 1.25rem;
        margin-left: 1.5rem;
        margin-bottom: 0; }
    .snap .intro-box h1 {
      font: normal normal normal 4rem var(--condensed);
      text-transform: uppercase;
      color: #ffffff;
      margin-top: -1rem; }
      .snap .intro-box h1 .long {
        font-weight: 800;
        font-size: 1rem;
        text-transform: uppercase !important;
        padding-right: 1rem;
        display: inline-block; }
    .snap .intro-box .small-big p {
      line-height: 0.85;
      text-transform: uppercase; }
      .snap .intro-box .small-big p .small {
        font: normal normal normal 1rem var(--sans);
        margin-left: 4rem; }
      .snap .intro-box .small-big p .big {
        font: normal normal normal 3rem var(--condensed) !important;
        margin-left: 0;
        display: block;
        color: var(--accent-lt); }
  .snap .large {
    font-size: 3rem; }
  .snap .smaller {
    font-size: 85%; }
  .snap table.imp-exp {
    margin: auto 0 auto 1rem;
    display: table;
    width: 85%;
    table-layout: auto;
    border: 0 !important;
    font-family: var(--sans);
    font-size: 1rem;
    text-transform: uppercase;
    color: #ffffff; }
    .snap table.imp-exp tbody,
    .snap table.imp-exp tr:nth-child(even) {
      background-color: var(--imp-exp);
      border: 0 !important; }
    .snap table.imp-exp td {
      border: 0;
      text-align: left;
      vertical-align: middle; }
    .snap table.imp-exp td:nth-child(2) {
      font-weight: 800;
      white-space: nowrap; }
    .snap table.imp-exp tr:first-child {
      font-weight: 800;
      text-align: left;
      font-size: 1.25rem; }
      .snap table.imp-exp tr:first-child td {
        padding-bottom: 1.5rem; }
    .snap table.imp-exp tr:nth-child(2) {
      background-color: #111111;
      background-color: var(--imports); }
    .snap table.imp-exp tr:nth-child(4) {
      background-color: #837d7a;
      background-color: var(--exports); }
    @media print, screen and (min-width: 46.25em) {
      .snap table.imp-exp tbody tr:last-child td:first-child,
      .snap table.imp-exp td:last-child {
        background-color: transparent !important; } }
  .snap .arrow-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 60px solid var(--imports);
    margin: -1.2rem 0 -1.5rem -3.5rem; }
  .snap .arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid var(--exports);
    margin: -1.2rem -3.75rem -1.5rem 0; }
  .snap .imports.legend,
  .snap .exports.legend {
    padding: 0.25rem 0.5rem;
    display: inline-block; }
  .snap .imports {
    color: white;
    background-color: #111111;
    background-color: var(--imports); }
  .snap .exports {
    background-color: #5b5755;
    background-color: var(--exports); }
  .snap .gradient {
    background: #d2edef;
    background: linear-gradient(180deg, #d2edef 0%, white 59%); }
  .snap .bar {
    text-transform: uppercase;
    background-color: var(--kelly-bg);
    padding: 0.5rem 0; }
    .snap .bar p {
      color: white;
      font: normal normal 400 1rem var(--sans);
      margin: 0; }
      .snap .bar p span {
        font-size: 0.85rem; }

.map-sm {
  width: 150px;
  height: 150px; }

.map {
  background: #ffffff url("/economy/economic-data/ports/2024/images/map-<?php echo $fileName; ?>.jpg") no-repeat scroll 50% 50%; }
  .map h2 {
    font: normal normal 400 2.5rem var(--condensed);
    color: var(--accent-dk); }

.sticker {
  width: var(--sticker-size);
  height: var(--sticker-size);
  position: relative; }
  .sticker .content {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .sticker .content p {
      text-transform: uppercase;
      color: white !important;
      font: normal normal 600 0.9rem var(--sans);
      text-align: center; }
  .sticker #seal {
    fill: var(--seal-bg); }

/* start overview styles */
.source {
  font-size: 85%;
  margin-top: 0.5rem; }

.disclaimer {
  font: normal italic 400 1rem var(--sans-ital); }

figure.exhibit {
  display: block;
  margin: 1rem auto;
  border-bottom: 1px solid #837d7a; }
  figure.exhibit figcaption {
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: 1rem; }
    figure.exhibit figcaption span {
      display: block;
      background-color: #44413f;
      color: white;
      text-transform: none;
      font-weight: 600;
      padding: 0.5rem;
      font-size: 1.25rem; }
  figure.exhibit table {
    table-layout: fixed;
    font: normal normal 400 1rem var(--sans);
    margin-bottom: 1rem; }
    figure.exhibit table caption {
      font-size: 1.25rem;
      text-align: center; }
    figure.exhibit table th {
      font-weight: 600; }

/*# sourceMappingURL=ports-2024.css.map */