@import url("/web-assets/css/font-azo-sans.css");
@import url("/web-assets/css/font-awesome.min.css");

:root {
  --gov-banner-height: 28px;
  --om-navbar-top-height: 54px;
  --om-navbar-bottom-height: 40px;
  --om-wogaa-padding-bottom: 47px;
  --om-top-padding: calc(var(--gov-banner-height) + var(--om-navbar-top-height));
  --om-body-font-size: .9rem;
  --om-body-font-size-m: .8rem;
  --om-body-font-size-sm: .7rem;

  --om-btn-active-bg: #6c757d;
}

html, body, button, div, input, label, select, textarea, p, span, h1, h2, h3, h4
{
    font-family: 'AzoSansRegular', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #041d3b;
}

body
{
  padding-top: var(--om-top-padding);
  padding-bottom: var(--om-navbar-bottom-height);
}

.container-fluid
{
  min-width: 320px;
  max-width: 1280px;
}

.img-fluid
{
  max-height: 70vh;
}

.map-index
{
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  text-align: center;
}

@media (min-resolution: 120dpi) {
  .map-index
  {
    text-align: center;
  }
}

@media (max-width: 400px)
{
  .img-fluid
  {
    max-height: 60vh;
  }
}

.active,
.list-group-item.active,
.page-link.active
{
    background-color: var(--om-btn-active-bg);
    border-color:var(--om-btn-active-bg);
}

@media only screen and (max-width: 320px)
{
  #view-banner-gov-sg,
  .container-fluid
  {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
  }
}

.navbar.fixed-top
{
  height: var(--om-top-padding);
  padding-top: var(--gov-banner-height);
  padding-bottom: 0px;
}

.navbar.fixed-top .om-navbar-logo
{
  width: 42px;
  height: 42px;
  margin-right: 8px;
}

.navbar.fixed-top,
.navbar.fixed-top .navbar-brand,
.navbar.fixed-top .nav-link,
.navbar.fixed-top .btn
{
  font-size: var(--om-body-font-size);
}

.navbar.fixed-bottom,
.modal-footer .btn
{
  font-size: var(--om-body-font-size-m);
}

.navbar.fixed-bottom .nav-link
{
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar.fixed-top .btn
{
  padding-top: 2px;
  padding-bottom: 2px;
}

@media only screen and (max-width: 480px)
{
  .navbar.fixed-top .om-navbar-logo
  {
    width: 32px;
    height: 32px;
  }

  .navbar.fixed-top,
  .navbar.fixed-top .navbar-brand,
  .navbar.fixed-top .nav-link,
  .navbar.fixed-top .btn
  {
    font-size: var(--om-body-font-size-m);
  }

  .navbar.fixed-bottom,
  .modal-footer .btn
  {
    font-size: var(--om-body-font-size-sm);
  }
}

.navbar.fixed-bottom .nav
{
  width: 100%;
}

#om-navbar-map 
{
  margin-right: 12px;
}

#om-navbar-map .dropdown-menu
{
  font-size: 14px;
  min-width: 140px;
  max-height: 360px;
  overflow-y: auto;
  margin-right: 12px;
}

#om-navbar-map .dropdown-menu ul
{
  list-style-type: none;
  text-align: center;
}

#om-navbar-map .dropdown-menu ul li:first-child button
{
  border-top: none;
}

#om-navbar-map .dropdown-menu ul li:last-child button
{
  border-bottom: none;
}

.om-main.container-fluid
{
  height: 100%;
  padding-bottom: var(--om-wogaa-padding-bottom);
}

#om-mapview
{
  width: 100%;
  height: calc(100vh - 280px);
  max-height: 820px;
  margin: 12px auto 64px auto;
  background-color: white;
}

#om-nav-dl
{
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

#om-nav-dl h5
{
  margin-bottom: 28px;
}

#om-nav-dl .nav .nav-item
{
  margin-left: .5rem;
  margin-right: .5rem;
  margin-bottom: .5rem;
}

#om-nav-dl .nav:first-child .nav-item
{
  margin-left: 0px;
}

#om-nav-dl .nav:last-child .nav-item
{
  margin-right: 0px;
}


/* Modal */

.modal-content
{
  max-width: 1280px;
}

.modal-dialog.full
{
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;

  height: calc(100vh - var(--gov-banner-height));
  max-height: calc(100vh - var(--gov-banner-height));
  min-height: calc(100vh - var(--gov-banner-height));

  display: flex;
  flex-direction: column;
  margin: 0px;
  overflow-y: hidden;
}

.modal-body .row.subtext
{
  font-size: 12px;
  margin: 0px;
}

.modal-body .row.subtext p
{
  margin-bottom: 6px;
}

.full .modal-content
{
  width: calc(100% - 2rem);
  min-width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);

  height: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  min-height: calc(100% - 2rem);

  align-items: stretch;

  margin: 1rem;

  margin-top: calc(1rem + var(--gov-banner-height));
}

.full .modal-body,
.full .modal-body .om-img-frame
{
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 30px);
}

.full .modal-body
{
  max-height: calc(100% - 127px);
}

.full .om-img-frame
{
  overflow: auto;
}

.modal-content .om-img-frame a
{
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.full .modal-content .om-img-frame a
{
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.full .om-img-frame a .img-fluid
{
  max-width: none;
  max-height: none;
}

.om-footer
{
  min-height: 60px;
  padding-bottom: var(--om-wogaa-padding-bottom);
}

.om-footer .copyright
{
  color: RGBA(var(--bs-secondary-rgb))!important;
  padding: 0px 1rem;
}