:root {
	--color-palette--blue--less--opacticy: 123,153,158;
	--color--blue--less--opacticy: rgb(var(--color-palette--blue--less--opacticy));
	--color--bg--title: rgb(222,236,233);
	--color--text--body: rgb(9,62,52);
}

a:hover, a:active {
    text-decoration: underline;
}

pre {
	margin: 0;
}

pre > code {
	text-wrap: wrap;
}

.code {
	padding: .2em .4em;
    white-space: break-spaces;
    color: black;
    background-color: var(--color--light-gray);
    border-radius: var(--border-radius);
}

.d-show {
	display: block !important;
}

.row-zero {
	margin: 0;
}

.row-zero > * {
	padding: 0;
}

.bold {
	font-weight: bold;
}

.underline {
	text-decoration-line: underline;
}

.reference {
	font-style: italic;
	word-wrap: break-word;
}

.site-nav a:hover, .site-nav a:active {
	text-decoration: none;
}

.btn-normal {
	min-width: 100px;
	color: var(--color--white);
	background-color: var(--color--light-green);
	border: 1px solid var(--color--light-green);
	border-radius: var(--unit-width--max);
	text-transform: uppercase;
}

.btn-normal:hover {
	background-color: var(--color--white);
	color: var(--color--light-green);
	border-color: var(--color--light-green);
}

.btn-common {
	min-width: 60px;
	color: var(--color--light-green);
	background-color: var(--color--white);
	border: 1px solid var(--color--light-green);
    border-radius: var(--unit-width--max);
    text-transform: uppercase;
}

.btn-common:hover {
	background-color: var(--color--light-green);
	color: var(--color--white);
}

.sprite-icons--menu {
	min-height: 15px;
}

.catalog-search__instant-results-list a:hover{
	text-decoration: none;
}

.catalog-search__instant-results:hover{
	display: block !important;
}

.site-menu__user {
	margin-bottom: 15px;
}

.data-themes--address { --icon-bg-color: #527e39; }
.data-themes--administrative-area { --icon-bg-color: var(--color--blue); }
.data-themes--building { --icon-bg-color: #59a7ec; }
.data-themes--coordinates-reference-system { --icon-bg-color: #ffa951; }
.data-themes--elevation-and-depth { --icon-bg-color: #dfc591; }
.data-themes--geographic-name { --icon-bg-color: #a7d8a7; }
.data-themes--land-parcel { --icon-bg-color: #ecd975; }
.data-themes--orthoimagery { --icon-bg-color: #248370; }
.data-themes--population-distribution { --icon-bg-color: #fac53d; }
.data-themes--slope-and-geology { --icon-bg-color: #b9e092; }
.data-themes--transportation { --icon-bg-color: var(--color--red); }
.data-themes--water { --icon-bg-color: var(--color--teal); }

.dataset-categories--climate-and-weather {width: 37px; height: 36px;}
.dataset-categories--commerce-and-industry {width: 27px; height: 28px;}
.dataset-categories--development {width: 33px; height: 31px;}
.dataset-categories--education {width: 34px; height: 27px;}
.dataset-categories--election {width: 30px; height: 34px;}
.dataset-categories--environment {width: 21px; height: 27px;}
.dataset-categories--geography {width: 29px; height: 32px;}
.dataset-categories--health {width: 26px; height: 35px;}
.dataset-categories--housing {width: 28px; height: 24px;}
.dataset-categories--labour-community-and-social-welfare {width: 27px; height: 26px;}
.dataset-categories--land-information {width: 33px; height: 34px;}
.dataset-categories--law-and-security {width: 26px; height: 32px;}
.dataset-categories--population {width: 34px; height: 25px;}
.dataset-categories--recreation-and-culture {width: 27px; height: 27px;}
.dataset-categories--sports {width: 26px; height: 26px;}
.dataset-categories--technology {width: 25px; height: 34px;}
.dataset-categories--transportation {width: 25px; height: 29px;}
.dataset-categories--utilities {width: 26px; height: 26px;}

.resources--map-api {width: 40px; height: 26px;}
.resources--dataset-api-wfs-wms-arcgis-rest-api {width: 34px; height: 30px;}
.resources--dataset-api-data-query-service {width: 38px; height: 38px;}

.resources--csdi-use-cases {width: 35px; height: 36px;}
.resources--geoaddress-finder {width: 35px; height: 35px;}
.resources--geodata-conversion-tool {width: 35px; height: 28px;}
.resources--geospatialiser {width: 35px; height: 35px;}
.resources--geo-tagging-tool {width: 23px; height: 37px;}
.resources--government-bim-data-repository {width: 33px; height: 32px;}
.resources--government-institution-and-community-facility-and-open-space-analysis-tool {width: 36px; height: 33px;}
.resources--location-geo-referencing-tool {width: 30px; height: 30px;}
.resources--metadata-editing-and-extraction-tool {width: 35px; height: 30px;}
.resources--open3dhk {width: 36px; height: 37px;}
.resources--common {width: 36px; height: 37px;}

.border-line {
	margin: 10px 0;
	border-bottom: 1px solid #ccc;
}

.datasetList-table {
	width: 100%;
}

.datasetList-table td > a {
	color: var(--bs-body-color);
	text-decoration: none;
}

.currPageNum, .tableControlBox:hover {
    color: white;
	background: var(--color--light-green);;
}

.tableControlBox {
	line-height: 28px;
	cursor: pointer;
    text-align: center;
	border-radius: var(--unit-width--max);
    margin: 2px;
}

.datasetList-table-arrow {
	color: var(--color--light-green);;
}

.currPageInfo {
	font-weight: 400;
	line-height: 18px;
	color: #799A98;
	justify-content: center;
	margin-top: 10px;	
}

.ftVersion {
	display: block !important;
    position: absolute;
    transform: translate(0, 100%);
    color: var(--color--bg--site-footer);
}

.portrait-logo-card .card-logo.related-sites-logo img {
	max-width: 10rem;
}

.text-card .annualPlanTableFileDownload, .text-card .annualPlanDeptLink {
	text-decoration: none;
}

.content-DQS {
	font-size: 16px; 
	font-weight: 700;
	line-height: 18px;
    background-color: var(--color--teal);
    color: var(--color--light);
    padding: 20px;
    margin-top: 20px;
}

.no-underline {
	text-decoration: none;
}

.page-item-num .page-link:hover {
	text-decoration: none;
}

.forgetPwd-content {
	padding: 20px;
}

.archivedDatasetDownloadBox a {
	text-decoration: none;
}

.new-updates-days {
	display: none;
	--link-bg-color: var(--color--darker);
    --spacing-block: 24;
    --spacing-inline: 28;
    --spacing-row: 16;
    --spacing-column: 14;
	color: var(--link-color);
	font-size: 16px;
    font-weight: bold;
	background-color: var(--color--bg-light-darker);
    padding-bottom: calc(1rem*(var(--spacing-block) - var(--spacing-row) / 2) / 16);
    padding-left: calc(1rem*(var(--spacing-inline) - var(--spacing-column) / 2 + 30) / 16);
    padding-right: calc(1rem*(var(--spacing-inline) - var(--spacing-column) / 2 + 10) / 16);
}

.agree-notice, .login-container .agree-notice {
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.form-group .has-error > #field-termsAndCondition-content > * {
	color: red;
}

.has-error span {
	display: inline-block;
	margin-bottom: 10px;
}

.card-grid.row.card-grid--dataset {
	min-height: 620px;
}

.card-grid.row.card-grid--dataset .card {
	max-height: 240px;
}

.site-menu a.site-menu-link {
	color: #6acddb;
}

.site-menu-new {
	color: red;
    font-style: italic;
    font-size: 14px;
    vertical-align: top;	
}

.site-notification .icon {
	margin-right: 1rem;
}

.site-notification a {
	text-decoration: underline;
}

.api-copyBtn {
	width:20px;
	height:20px;
}

.loginBox1 {
	border-right: 1px solid #ddd;
}

.pane-how-to-use-FSDT {
	max-width: 960px;
    justify-self: center;
    text-align: justify;
}

.pane-how-to-use-FSDT .highlight-section__title, .pane-how-to-use-FSDT .p-size-18 {
	font-size: 18px;
}

.pane-how-to-use-FSDT p.sub-content {
	font-size: 20px;
}

.pane-how-to-use-FSDT .image-notes__description {
	padding-left: 3rem;
    padding-right: 3rem;
}

.case-title {
	display: flex;
	margin-bottom: 20px;
}

.case-title .left-bar {
	width: 20px;
    border-left: 5px solid;
    border-right: 10px solid;
    margin-left: -25px;
    margin-right: 5px;	
}

.case-title .left {
	display: flex;
	width: 100%;
}

.case-title .left-title {
	align-content: center;
}

.case-title h3 {
	font-weight: normal;
}

.case-title span {
	font-size: 15px;
	font-style: italic;
}

.FSDT-image, .FSDT-video-box-border {
	width: 80%;
	justify-self: center;
	margin-bottom: 20px;
}

.FSDT-image img {
	width: 100%;
}

.FSDT-video-box-border {	
	border: 3px solid black;
    border-radius: 15px 15px 0 0;
}

.FSDT-video-box {
	height: 60px;
    align-content: center;
    padding-left: 20px;
    border-bottom: 3px solid black;
}

.FSDT-video-box > span {
	display: inline-block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 3px;
}

.FSDT-marker {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    background-color: rgb(var(--color-palette--link));
    color: var(--color--light);
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
}

.pane-how-to-use-FSDT b {
	color: orange;
}

.pane-how-to-use-FSDT .reference {
	margin: 20px 0;
}

.roadsign {
	text-align: center;
}

.roadsign > img {
	height: 200px;
}

.trial-checkbox {
	margin-left: 5px;
    transform: scale(1.3);	
}

#statisticsBoard td:nth-last-child(-n+4) {
  text-align: right;
}

#statisticsBoard td:first-child {
  text-align: center;
}

@media screen and (min-width: 992px) {
    .site-menu__user, .site-menu__logout {
        display: none;
    }
}

@media (max-width:992px) {
	.card-grid.row.card-grid--dataset {
		min-height: 780px;
	}
	
	.case-title {
		flex-direction: column;
	}
}

@media (max-width:768px) {
	.new-updates-days {
		left: 50%;
		margin-left: calc(-1* var(--unit-width--viewport) / 2);
		position: relative;
		width: var(--unit-width--viewport);
	}
	
	.FSDT-image, .FSDT-video-box-border {
		width: 100%;
	}
	
	.loginBox1 {
		border-right: none;
	}
}

@media (max-width: 500px) {
	.site-footer__copyright {
		margin-bottom: 10px;
	}
	
	.site-footer__info {
		display: block;
	}
	
	.ftVersion {
		transform: none;
	}
}