body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    color: #333;
    font-size: 16px;
}
blockquote {
    padding: 15px 15px 15px 25px;
    position: relative;
    margin: 25px 0;
    background: #F3F4F8;
}
blockquote::before {
    position: absolute;
    content:'';
    width: 8px;
    background: #027166;
    border-radius: 4px 0 0 4px;
    top: 0;
    left: 0;
    bottom: 0;
}
.white {
    color: #fff !important;
}
.bg-white {
    background: #fff;
}
.bg-blue {
    background: #003865;
}
.bg-rust {
    background: #9d693e;
}
.bg-green {
    background: #78be21;
}
.bg-teal {
    background: #008eaa;
}
.bg-accent {
    background: #15828A;
}
.bg-gray {
    background: #F3F4F8;
}
.bg-blue-green {
    background: #027166;
}
.txt-white {
    color: #fff;
}
.txt-blue {
    color: #003865;
}
h1 {
    font-size: 33px;
    font-weight: 700;
    line-height: 1;
}
h2 {
    font-size: 25px;
    font-weight: 700;
}

h2.txt-white {
    width: fit-content;
    padding: 8px 0;
    background: #003865;
    margin: 0 auto;
    padding: 0 8px;
}
.pt-6 {
    padding-top: 3.5rem;
}
.py-6 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}
#page_header {
    background: #003865;
    padding: 1rem 1rem;
    z-index: 1000;
    position: relative;
}
.navbar {
    background: #003865 !important;
}
.navbar-brand {
    width: 250px;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
    display: flex;
}
.navbar-brand img {
    display: none;
}
#logo {
    /* max-width: 250px; */
    display: none;
    height: 52px;
    width: auto;
    margin-right: 52px;
}
a.ext-link, a.ext-link-light, a.pdf-link-light {
    position: relative;
}
a.ext-link::after {
    content: '';
    height: 18px;
    width: 18px;
    background: url(images/external-link.png) no-repeat;
    background-size: contain;
    background-position: center bottom;
    position: absolute;
    right: -22px;
}
a.ext-link-light::after {
    content: '';
    height: 12px;
    width: 12px;
    background: url(images/ext-link-light.png) no-repeat;
    background-size: contain;
    background-position: center bottom;
    position: absolute;
    right: -16px;
    bottom: 3px;
}
a.pdf-link-light::after {
    content: '';
    height: 14px;
    width: 14px;
    background: url(images/pdf-link-light.png) no-repeat;
    background-size: contain;
    background-position: center bottom;
    position: absolute;
    right: -18px;
    bottom: 3px;
}
.navigation {
    display: flex;
    align-items: center;
}
.navbar .nav-item  a, .navbar .nav-item a.active{
    color: #fff;
    text-decoration: none;
    margin: 0 .5rem;
    font-weight: 600;
    position: relative;
}
.navbar-toggler {
    color: #fff;
    border-color: #fff;
}
.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url(images/hamburger-menu.png);
    background-size: 70%;
}
.navbar-toggler .navbar-toggler-icon {
    background-image: url(images/close-menu.png);
    background-size: 70%;
}
.navigation nav ul {
    list-style: none;
    margin: 0;
}
.navigation nav ul a {
    color: #fff;
    text-decoration: none;
    margin: 0 .5rem;
    font-weight: 600;
}
#home_hero {
    background-color: #02427f;
    background-image: url(images/hero-background.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    position: relative;
    z-index: 800;
    line-height: 1.4;
}
#home_hero .circle {
    background: transparent;
    border: solid 2px rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: -90px;
    padding: 24px;
    position: relative;
}
#home_hero .circle::before {
    position: absolute;
    background: transparent;
    border: solid 2px rgba(255,255,255,0.12);
    width: 130%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    content: '';
    display: block;
    top: -15%;
    left: -15%;
}
#home_hero .circle .inner-circle {
    background: #FFF;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 96%, rgba(217, 217, 214, 1) 100%);
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-box-shadow: 0px 45px 15px -1px rgba(0,0,0,0.29); 
    box-shadow: 0px 5px 45px -1px rgba(0,0,0,0.29);
    position: relative;
}
#hero_links {
    margin-top: .6rem;
}
#home_hero a, .explore-link {
    padding: 10px;
    -webkit-box-shadow: 0px 45px 15px -1px rgba(0,0,0,0.49); 
    box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.49);
    border-radius: 5px;
    text-decoration: none;
    transition: all .3s ease;
    font-weight: 600;
}
#home_hero a.explore-link, a.explore-link {
    color: #fff;
    background: #567D4A;
    background: linear-gradient(0deg,rgba(86, 125, 74, 1) 0%, rgba(86, 125, 74, 1) 57%);
    margin-right:.4rem;
    background: #78be21;
    color: #003865;
    background: linear-gradient(0deg,rgba(120, 190, 33, 1) 0%, rgba(120, 190, 33, 1) 57%);
}
#home_hero a.data-link {
    color: #003865;
    background: #fff;
    background: linear-gradient(0deg,rgba(155, 203, 235, 1) 0%, rgba(255, 255, 255, 1) 0%);
}
#home_hero a.explore-link:hover, a.explore-link:hover {
    background: #567D4A;
    background: linear-gradient(0deg,rgba(106, 154, 91, 1) 0%, rgba(86, 125, 74, 1) 57%);
    text-decoration: underline;
    background: linear-gradient(0deg,rgba(134, 214, 37, 1) 0%, rgba(120, 190, 33, 1) 57%);
}
#home_hero a.data-link:hover {
    background: #9BCBEB;
    background: linear-gradient(0deg,rgba(155, 203, 235, 1) 0%, rgba(255, 255, 255, 1) 57%);
    text-decoration: underline;
}
table.striped tr:nth-of-type(odd) td {
    background: rgb(249, 249, 251) !important;
}
table.striped tr:nth-of-type(even) td {
    background: #fff !important;
}
#why_map {
    display: block; 
    height: auto; 
    width: 95%;
    max-width: 300px; 
    margin: 0 auto;
}
#MCC {
    width: 40%;
    height: auto;
    position: absolute;
    top: 30%;
    left: 30%;
}
#MN {
    position: absolute;
    width: 24%;
    height: auto;
    top: 10%;
    left: 38%;
}
#NRRI {
    position: absolute;
    width: 20%;
    height: auto;
    top: 40%;
    left: 5%;
}
#MGS {
    position: absolute;
    width: 20%;
    height: auto;
    top: 40%;
    right: 5%;
}
#MN {
    position: absolute;
    width: 24%;
    height: auto;
    top: 10%;
    left: 38%;
}
#board {
    position: absolute;
    width: 32%;
    height: auto;
    bottom: 8%;
    left: 34%;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}
#board img {
    width:40px;
    height: auto;
    margin: 0 0 3px 6px;
}
#board #label {
    display: none;
}
.card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    border: none;
    -webkit-box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.39); 
    box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.39);
}
.card.o-vis {
    overflow:visible;
}
.card .card-content {
    padding: 1rem .875rem;
}
.card .card-footer {
    position: absolute;
    bottom: 0;
    height: 10px;
    width: 100%;
    align-self: flex-end;
    border-top: none;
}
.card.o-vis .card-footer {
    background: transparent;
    text-align: center;
    display: flex;
    align-items: center;
}
.card.o-vis .card-footer a {
    padding: .5rem 1rem;
    background: #567D4A;
    background: linear-gradient(0deg,rgba(86, 125, 74, 1) 0%, rgba(86, 125, 74, 1) 57%);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    justify-self: center;
    margin: 0 auto;
    text-decoration: none;
    transition: all .3s ease;
    -webkit-box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.39); 
    box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.39);
    margin-top: 1rem;
    background: #78be21;
    color: #003865;
    background: linear-gradient(0deg,rgba(120, 190, 33, 1) 0%, rgba(120, 190, 33, 1) 57%);
}
.card.o-vis .card-footer a:hover {
    padding: .5rem 1.25rem;
    background: #567D4A;
    background: linear-gradient(0deg,rgba(106, 154, 91, 1) 0%, rgba(86, 125, 74, 1) 57%);
    text-decoration: underline;
    -webkit-box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.39); 
    box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.39);
    background: linear-gradient(0deg,rgba(134, 214, 37, 1) 0%, rgba(120, 190, 33, 1) 57%);
}
.card h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.06;
}
.card h3.center {
    text-align: center;
}
.card hr {
   margin: .25rem 0 .7rem 0
}
.card-icon {
    width:auto;
    height: 93px;
    margin: 0 auto .4rem auto;
    display: block;
}
.icon-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1.06;
}
.icon-header img {
    height: 55px;
    width: auto;
    margin-right: .5rem;
}
#main h1 {
    color: #fff;
    font-size: 44px;
    margin-bottom: 1.7rem;
    text-shadow: 0px 3px 3px rgba(0,0,0,0.61);
}
#main h2 {
    color: #003865;
}
#main h2::after, h2.bar-under::after {
    content: '';
    display: block;
    height: 5px;
    border-radius: 3px;
    width: 105px;
    background: rgba(86, 125, 74, 1);
    background: #78be21;
    background: linear-gradient(
271deg, rgba(120, 190, 33, 1) 50%, rgba(0, 56, 101, 1) 80%);
    margin-top: 6px;
    margin-bottom: 16px;
}
#main h2.white::after {
    background: #fff;
}
#main h3 {
    font-size: 21px;
    font-weight: 600;
}
#main p {
    color: #333;
    line-height: 1.26;
}
#main hr {
  border-top: 1px solid #97999b;
  background-color: transparent;
  height: 0; 
  margin: 1.5rem 0;
}
#main a {
    color: #1964a5 !important;
}
.intro {
    line-height: 1.4 !important;
}
#hero_banner {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    height: 230px;
    margin-bottom: 24px;
}
#hero_banner div {
    height: 100%;
}
#hero_banner .col {
    display: flex;
    align-items: center;
}
#hero_banner #hero_content {
    background: #000;
background: linear-gradient(0deg,rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
}
#hero_banner #hero_overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
#jump_block {
    border-radius: 8px;
    top: .75rem;
    background: rgba(155,203,235,0.25);
    line-height: 1.7;
    -webkit-box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.19); 
    box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.19);
    width: fit-content;
    height: fit-content;
}
#jump_block h3 {
    font-size: 23px;
    font-weight: 600;
    border-bottom: solid 2px #008eaa;
    padding-bottom: 10px;
}
ul li {
    margin-bottom: .4rem;
}
footer {
    background-image: url(images/footer.jpg);
    background-size: cover;
    background-position: top center;
    text-align: center;
    height: 150px;
}
footer, footer a {
    color: #fff;
}
table.dataTable td { 
    vertical-align: top; 
}
.filter-bar .form-select { 
    min-width: 180px; 
}
#legacyTableWrap { 
    display: none; 
}
#explore_top {
    background-color: #fff; background-image: url('images/explore-background.jpg'); 
    background-repeat: no-repeat; 
    background-size: auto 100%; 
    background-position: right center;
}
#explore_mn_map {
    width: auto; 
    height: 80%; 
    display: block;
}
#explore_maps, #pls_map {
    width: 100%;
    overflow: hidden;
    height: 400px;
    position: relative;
}
#explore_maps img, #pls_map img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
}
#legacyTableWrap { display: none; }

.filters {
    background: rgba(255,255,255,0.6); 
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 10px -5px rgba(0,0,0,0.25); 
    box-shadow: 0px 1px 10px -5px rgba(0,0,0,0.25); 
}
.filters .filter-flex {
    display:flex; 
    flex-wrap:wrap; 
    gap:.75rem; 
    align-items:end; 
    justify-content: space-between;
}
.filterSelect {
    padding: .25rem;
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
}
#fClear {
    padding: .25rem .5rem;
    border-radius: 4px;
    background: #fff;
    font-weight: 600;
    border-color: #003865;
    color: #003865;
    transition: all .3s ease;
}
#fClear:hover {
    background: #003865;
    color: #fff;
}

  #projectsTable { width: 100%; border-collapse: collapse; }
  #projectsTable th, #projectsTable td { padding: .5rem; vertical-align: top; }

  .details-col { width: 1%; white-space: nowrap; }
  .btn-details {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font: inherit;
    padding: .25rem .5rem;
    border: 1px solid rgba(0,0,0,.2);
    background: #fff;
    border-radius: .375rem;
    cursor: pointer;
  }
  .btn-details:focus { outline: 2px solid rgba(13,110,253,.35); outline-offset: 2px; }

  .btn-details { display: none; }
  .is-collapsed .btn-details { display: inline-flex; }

  @media(min-width: 480px) {
    .navbar-brand {
        font-size: 24px;;
    }
  }
  @media(min-width: 768px) {
    #board {
        left: 32%;
    }
    #board #label {
        display: block;
    }
  }
  @media (min-width: 940px) {
    #board img {
        width: 60px;
    }
    .flex-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex-list li {
        width: 50%;
    }
  }
  @media (max-width: 1082px) {
    #projectsTable .col-desc,
    #projectsTable .col-sub,
    #projectsTable .col-agency,
    #projectsTable .col-link { display: none; }
  }

  .row-details td {
    padding: 0;
    border-top: 0;
    background: transparent;
  }
  .accordion-body {
    padding: .75rem 1rem 1rem;
    border-bottom: solid 2px #F3F4F8;
  }

  .accordion-body .kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: .35rem .75rem;
  }

  .accordion-body .k {
    font-weight: 600;
    color: rgba(0,0,0,.7);
  }

  .accordion-body .v { margin: 0; }

  .hidden { display: none !important; }

@media (max-width: 520px) {
    .accordion-body .kv { grid-template-columns: 1fr; }
    .accordion-body .k { margin-top: .5rem; }
}
@media(max-width: 1200px) {
    .navbar .container {
        min-width :100%;
    }
}
@media(min-width: 500px) {
    #logo {
        /* max-width: 350px;
        width: 350px; */
    }
}
@media(min-width: 600px) {
    #logo {
        display: block;
    }
    .header-line h2 {
        /* background: #003865;
        background: linear-gradient(0deg,rgba(0, 56, 101, 1) 0%, rgba(0, 56, 101, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 51%, rgba(0, 56, 101, 1) 51%, rgba(0, 56, 101, 1) 100%);
        */
        width: fit-content;
        position: relative;
    }
    .header-line h2::before {
        display: inline-block;
        width: 30px;
        height: 2px;
        content: '';
        background: white;
        position: absolute;
        left: -36px;
        top: calc(50% - 1px);
    }
    .header-line h2::after {
        display: inline-block;
        width: 30px;
        height: 2px;
        content: '';
        background: white;
        position: absolute;
        right: -36px;
        top: calc(50% - 1px);
    }

    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }
}
@media(min-width: 768px) {
    #explore_maps {
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 47%;
    }
    #pls_map {
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 47%;
    }
    #explore_maps img, #pls_map img {
        width: auto;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
@media(min-width: 992px) {
    #logo {
        display: none;
    } 
    .navbar-brand {
        width: 250px;
    }
    .navbar .nav-item a:not(.active):hover::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 8px;
        width: calc(100% - 16px);
        height: 4px;
        background: #fff;
        border-radius: 4px;
    }
    .navbar .nav-item a.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 8px;
        width: calc(100% - 16px);
        height: 4px;
        background: #78be21;
        border-radius: 4px;
    }
}
@media(min-width: 992px) and (max-width:1080px) {
    .navbar-brand {
        width: auto;
        font-size: 18px;
    }
}
@media(min-width: 1175px) {
     .navbar-brand  {
        font-size: 20px;
    }
    #logo {
        display: block;
    } 
    /*#hero_banner {
        height: 320px;
    } */
}
@media(min-width: 1400px) {
    .navbar-brand {
        font-size: 24px;
    }
    #explore_maps img {
        width: 100%;
        height: auto;
        position: relative;
        opacity:0;
    }
    #explore_maps {
        background-image: url('images/ports-power-rails.png');
        background-size: cover;
        background-position: bottom right;
    }
    #pls_map {
        background-image: url('images/ports-power-rails.png');
        background-size: cover;
        background-position: bottom right;
    }
}