:root {
  --small: 739px;
  --medium: 1023px;
  --large: 1199px;
  --link: #006699;
  --link-hover: #0778D6;
  --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;
}

/*
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $black;
$accordion-item-background-hover: $gray-light;
$accordion-item-padding: 1rem 0.5rem;
$accordion-content-background: $white;
$accordion-content-border: none;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;

// 8. Accordion Menu
// -----------------
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
$accordionmenu-arrow-size: 6px;

// 9. Badge - this is the counter by social media icons
// --------

$badge-background: $primary-color;
$badge-color: $white;
$badge-color-alt: $black;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
*/
/*
$orbit-bullet-background: $gray-med;
$orbit-bullet-background-active: $gray-dark;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
*/
:root {
  --small: 739px;
  --medium: 1023px;
  --large: 1199px;
  --link-color:#006699;
  --link-hover: #0778D6;
}

@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;
}
:root {
  --sans: opensans, times, 'Helvetica Neue', Arial, sans-serif;
}
:root .sans {
  font-family: opensans, times, "Helvetica Neue", Arial, sans-serif;
  font-size: inherit;
  font-weight: 400;
}
:root .sans.semi {
  font-weight: 600;
}
:root .sans.xbold {
  font-weight: 800;
}
:root .sans.black {
  font-weight: 900;
}
:root .sans.bold, :root .sans b, :root .sans strong {
  font-weight: 700;
}
:root .sans em, :root .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: #a7dce1;
  --accent-dk: #9d6e05;
  --hancock-bg: #ca500f;
  --outdent: 0;
  --imports: black;
  --exports: #999;
  --exports-txt: white;
  --imp-exp: #8e8e7b;
  --seal-bg: rgb(62, 113, 127);
  --sticker-size: 240px;
  --caption:#7f6703;
  --thead: #e1ac41;
  --thead-txt: white;
  --stripe: rgba(217, 175,87,.25);
  --intro-strong: #f3dc97;
  --big: #f3dc97;
  --poe: #f3dc97;
  --map-txt:#9d6e05;
  --header: #8e8e7b;
  --pie-width: 100%;
}
.snap .source {
  color: #294a3b;
  color: var(--intro-bg);
  font-family: var(--sans);
}
.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;
  cursor: pointer;
}
.snap a.main:hover, .snap a.main:focus,
.snap details summary:hover,
.snap details summary:focus {
  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 aside h3 {
  margin-top: 0;
  color: black;
  font: normal normal 700 20px opensans, arial, sans-serif;
  text-transform: none;
}
.snap h2,
.snap h3,
.snap h4 {
  text-transform: uppercase;
  color: var(--header);
  font-size: 1.25rem;
}
.snap h3 {
  font-size: 1rem;
}
.snap h4 {
  font-size: 0.85rem;
}
.snap .intro-box {
  border-left: 20px solid var(--intro-border);
  background-color: var(--intro-bg);
  padding: 1rem;
}
.snap .intro-box .dotted-line {
  width: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: url("/economy/economic-data/ports/2024/images/start.png"), url("/economy/economic-data/ports/2024/images/end.png");
  background-position: 2% 50%, 100% 50%;
}
.snap .intro-box .dotted-line hr {
  border: none;
  border-top: 2px dashed #ecd6ab;
  overflow: hidden;
  text-align: center;
  width: 92%;
}
@media screen and (max-width: 1023px) {
  .snap .intro-box .dotted-line {
    display: none;
  }
  .snap .intro-box h1 {
    float: none !important;
  }
}
.snap .intro-box p {
  color: var(--intro-txt);
  font-size: 1.15rem;
}
.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(--intro-strong);
}
.snap .intro-box p strong.poe {
  color: var(--poe);
}
.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(--big);
}
.snap .large {
  font-size: 3rem;
}
.snap .smaller {
  font-size: 85%;
}
.snap p strong.all-trade {
  font-family: var(--sans);
  text-transform: uppercase;
  color: var(--imports);
  font-weight: 700;
}
.snap table.imp-exp {
  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: 650;
  white-space: nowrap;
}
.snap table.imp-exp td[colspan="4"] {
  font-size: 1.25rem;
  font-weight: 750;
  padding-left: 3rem;
}
.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: hsl(184, 48%, 88%);
  background: linear-gradient(180deg, hsl(184, 48%, 88%) 0%, hsl(0, 0%, 100%) 59%);
}

#bar {
  text-transform: uppercase;
  background-color: var(--hancock-bg);
  padding: 0.5rem 0;
  margin-bottom: 1rem;
}
#bar p {
  color: white;
  font: normal normal 400 1rem var(--sans);
  margin: 0;
}
#bar p span {
  font-size: 0.85rem;
}

.map-sm {
  width: 150px;
}

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

.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;
  margin-bottom: 0;
}
.sticker #seal {
  fill: var(--seal-bg);
}

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

.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;
}
figure.exhibit details summary:hover, figure.exhibit details summary:focus {
  cursor: pointer;
}
/*# sourceMappingURL=ports-2024.css.map */