@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,
.modal-dialog
{
	min-width: 320px;
	max-width: 1280px;
}

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

.modal-content
{
	text-align: center;
}

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

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

@media (min-width: 576px)
{
	.modal-dialog
	{
		max-width: 1280px;
	}
}

.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;
}

#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;
}


#imageset-controls ul
{
	margin-left: auto;
	margin-right: auto;
}

#imageset-title
{
	margin-top: 24px;
	margin-bottom: 12px;
}

@media only screen and (min-width: 640px)
{
	.index-map
	{
		max-width: 620px;
	}
}

.thumbnail
{
	position: relative;
	display: inline-block;
	height: 102px;
	min-height: 102px;
	max-height: 102px;
	margin-bottom: 12px;
}

.thumbnail a
{
	line-height: 102px;
}

.thumbnail,
.thumbnail img,
.thumbnail span
{
	width: 60px;
	min-width: 60px;
	max-width: 60px;
}

.thumbnail span
{
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	color: white;
	background: rgba(0, 0, 0, 0.50);
	line-height: var(--bs-body-line-height);
}

i
{
	font-style: normal;
}

#om-tile-page-ind
{
	font-size: 12px;
}

#om-tile-page-controls
{
	margin-top: 1.5rem;

	margin-bottom: 2rem;
}

#om-tile-page-controls .pagination
{
	margin-bottom: 0px;
}

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

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