﻿:root {
	--primary-color-100: #D7E8F4;
	--primary-color-200: #75BEF0;
	--primary-color-300: #75BEF0;
	--primary-color-400: #0098FF;
	--primary-color-500: #0098FF;
	--primary-color-600: #00548C;
	--primary-color-700: #00548C;
	--primary-color-900: #002640;
	--neutrals-color-100: #ffffff;
	--neutrals-color-200: #f8f8f8;
	--neutrals-color-400: #e0e4e5;
	--neutrals-color-500: #282828;
	--neutrals-color-800: #111212;
	--color-anti-flash-white: #f0f0f0;
	--color-dark-charcoal: #2c2c2c;
	--focus-box-shadow: 0 0 0px 0.07rem var(--neutrals-color-800) !important;
	--tab-container-color: #eaf1f3;
	--video-border-color: #f8f8f8;


}

@font-face {
	font-family: "Inter";
	src: url(./fonts/Inter-VariableFont_opsz,wght.ttf)format("truetype"), url(./fonts/Inter-Italic-VariableFont_opsz,wght.ttf)format("truetype");
	font-display: swap;
}

body {
	font-family: "Inter";
	font-size: 1rem;
	color: var(--neutrals-color-800)
}

.input-group>.form-control,
.input-group>.form-select {
	border-top: 1px solid var(--color-anti-flash-white);
	border-bottom: 1px solid var(--color-anti-flash-white)
}

.form-control:focus {
	border-color: var(--color-anti-flash-white);
	border-top: 1px solid var(--color-anti-flash-white);
	border-bottom: 1px solid var(--color-anti-flash-white);
	box-shadow: 0 0 0 .125rem var(--neutrals-color-100)
}

p {
	margin-bottom: 1rem
}

p+p {
	margin-top: 1rem
}

.social-icon:after {
	content: none !important
}

.blank-page {
	padding: 2.5rem 0;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: cover;
	padding-bottom: 35px
}

.section {
	padding: 1rem 1.5rem
}

.header-title {
	background-color: var(--yellow-color-100);
	color: var(--default-text-color);
	border-left: 2px solid var(--yellow-color-500);
	font-size: 1.25rem;
	padding-left: 1rem;
	font-weight: 700;
	padding-top: .5rem;
	padding-bottom: .5rem
}

.document-card {
	border-radius: .3125rem;
	padding: .27rem;
	margin-right: 1rem;
	height: 100%
}

.doc-card-title {
	text-align: left;
	font-size: 1.1rem;
	margin-bottom: .2rem;
	margin-top: .7rem
}

.color-card {
	background: var(--yellow-color-100)
}

.card-body {
	padding: 1rem;
}

img.card-img-top {
	border-style: solid;
	border-color: var(--yellow-color-100);
}

.video-tab-container {
	background: var(--tab-container-color);
	border: 1px solid var(--video-border-color);
	padding: 2rem 2rem 0
}

.video-card {
	border-color: var(--video-border-color) !important;
	border-radius: 0;
	margin-bottom: 2rem
}

.navbar-brand img {
	height: 40px;
	width: auto;
}

.sgds-masthead-holder {
	background-color: var(--color-anti-flash-white);
	padding-left: 1rem;
	width: 100%
}

.dropdown-item {
	color: var(--neutrals-color-800);
	display: flex;
	justify-content: space-between
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: var(--hover-background-color) !important
}

.dropdown-item:hover {
	/*color: var(--primary-color-500);*/
	color: #000;
	font-weight: 700
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--primary-color-100) !important;
	text-decoration: none
}

.dropdown-item:active {
	color: var(--primary-color-500)
}

.dropdown-item .bi-chevron-right::before {
	color: var(--neutrals-color-800);
	font-weight: 700 !important
}

.dropdown-item:focus,
.dropdown-item:hover .bi-chevron-right::before {
	color: var(--neutrals-color-800);
	font-weight: 700 !important
}

.dropdown-item.active,
.dropdown-item:active .bi-chevron-right::before,
.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show .bi-chevron-down::before {
	color: var(--primary-color-700);
	font-weight: 700 !important
}

.hasSubmenu {
	color: var(--neutrals-color-800);
	display: flex;
	justify-content: space-between;
	text-decoration: none
}

.hasSubmenu:focus,
.hasSubmenu:hover {
	background-color: var(--hover-background-color);
	/* color: var(--primary-color-500); */
	font-weight: 700
}

.hasSubmenu.active,
.hasSubmenu:active {
	background-color: var(--primary-color-100);
	/*color: var(--primary-color-500); */
	text-decoration: none
}

.navbar-nav .nav-item .dropdown-menu {
	width: 300px
}

.navbar-nav .nav-item .dropdown-menu .dropdown-item {
	white-space: normal
}

.sgds.sidenav .sidenav-item .sgds.btn {
	border-left-color: transparent;
	color: #000 !important
}

.sgds.sidenav .sidenav-item .sgds.btn.active,
.sgds.sidenav .sidenav-item .sgds.btn:hover {
	border-left-color: var(--primary-color-500) !important;
	color: #000 !important;
	background: var(--yellow-color-100)
}

.sgds.navbar .nav-item a.nav-link {
	color: var(--neutrals-color-800);
	font-weight: 700
}

.sgds.navbar .nav-item a.nav-link.active {
	border-color: var(--primary-color-500);
	background: var(--primary-color-100)
}

.sgds.navbar .nav-item a.nav-link:hover {
	border-color: var(--neutrals-color-100);
	color: var(--neutrals-color-800);
	font-weight: 700;
	background: var(--hover-background-color)
}

.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
	border-bottom: .125rem solid var(--primary-color-500);
	color: var(--primary-color-700);
	font-weight: 700
}

.sgds.sidenav .sidenav-item .collapse a.nav-link,
.sgds.sidenav .sidenav-item .collapse.show a.nav-link,
.sgds.sidenav .sidenav-item .collapsing a.nav-link {
	color: var(--color-dark-charcoal) !important
}

.sgds.sidenav .sidenav-item .collapse a.nav-link.active,
.sgds.sidenav .sidenav-item .collapse a.nav-link:hover,
.sgds.sidenav .sidenav-item .collapse.show a.nav-link.active,
.sgds.sidenav .sidenav-item .collapse.show a.nav-link:hover,
.sgds.sidenav .sidenav-item .collapsing a.nav-link.active,
.sgds.sidenav .sidenav-item .collapsing a.nav-link:hover {
	color: var(--default-text-color) !important;
	background: var(--yellow-color-100) !important;
	font-weight: 700
}

.sidenav-item .bi-chevron-down {
	display: contents
}

.sidenav-item .bi-chevron-down::before {
	color: var(--primary-color-500);
	font-weight: 700 !important;
	position: absolute;
	right: 1rem
}

.sgds.navbar .nav-item a.nav-link.active,
.sgds.navbar .nav-item a.nav-link:hover .bi-chevron-down::before {
	color: var(--neutrals-color-800);
	font-weight: 700 !important
}

.active-menu {
	border-bottom: .125rem solid var(--primary-color-700);
	/* color: var(--primary-color-700) */
}

.nav-item.active-menu>.nav-link,
.nav-item.active-menu>.nav-link .button-label {
	/* color: var(--primary-color-700); */

}



.sgds.footer .footer-top {
	background-color: var(--color-anti-flash-white);
	padding: 2rem 0 1.5rem
}

.sgds.footer .footer-bottom {
	background-color: var(--color-anti-flash-white);
	border-top: 1px solid var(--neutrals-color-500)
}

.footer-list-styling ul li a,
.footer-list-styling ul li a:hover,
.sgds.footer,
.sgds.footer .footer-contact-links ul li a,
.sgds.footer .footer-contact-links ul li a:hover,
.sgds.footer .footer-header .description,
.sgds.footer .footer-header .title,
.sgds.footer .footer-items .title,
.sgds.footer .footer-items ul li a,
.sgds.footer .footer-items ul li a:hover,
.sgds.footer .footer-mandatory-links ul li a,
.sgds.footer .footer-mandatory-links ul li a:hover,
h1.title {
	color: var(--neutrals-color-800)
}

.footer-logo {
	background: var(--footer-logo-background);
	border-top: 1px solid var(--color-anti-flash-white);
	border-bottom: 1px solid var(--color-anti-flash-white)
}

.subpage-banner,
thead {
	background: var(--yellow-color-300)
}

.carousel {
	margin-left: .25rem;
	margin-right: .25rem
}

.carousel .carousel-indicators button {
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	background-color: var(--carousel-indicators-active-background);
}

.carousel-indicators .active {
	background-color: var(--carousel-indicators-background);
}

.carousel-item .card,
.carousel-item .card-img {
	border-radius: 0;
	border: 0
}

.carousel-image-mobile {
	object-fit: none;
	object-position: center;
	width: 100%;
	min-height: 460px;
	max-height: 460px;
	margin-bottom: 1rem
}

.carousel .col-12.col-md-6 {
	min-height: auto;
	background-color: var(--yellow-color-500) !important;

}

.card-img-overlay .card-title {
	color: var(--neutrals-color-500)
}

.card-img-overlay .card-title>h2 {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.25
}

.card-img-overlay .card-title-small>h2 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25
}

h5.card-title {
	font-size: 1.1rem
}

.card {
	border: 1px solid var(--neutrals-color-500)
}

a[target=_blank][href^=http]:not([href*=singaporebudget]) span::before {
	content: none
}

a[target=_blank]:after {
	content: none
}

a[target=_blank][href^=http]:not([href*=singaporebudget]):not([data-no-icon]):after {
	content: ""
}

.bi-house-fill::before {
	color: var(--primary-color-700)
		/* color: #000;*/
}

.bi-arrow-right::before,
.bi-chevron-down::before,
.bi-chevron-up::before {
	font-weight: 700 !important
}

.btn-check:focus+.btn,
.btn:focus {
	box-shadow: none;
	background: var(--primary-color-100) !important;
	border-left: .125rem solid var(--primary-color-500) !important;
	font-weight: 700
}

.primary-button,
.primary-button:hover {
	color: var(--neutrals-color-200) !important;
	border-radius: 1.5rem;
	font-weight: 700
}

.primary-button {
	background: var(--primary-color-500) !important;
	padding: .25rem 1rem;
	margin-right: .8rem;
	margin-bottom: 1rem;
	transition: all .3s;
	cursor: pointer;
	font-size: 1rem;
	border-color: var(--primary-color-400) !important
}

.primary-button:hover {
	background: var(--primary-color-400) !important
}

.primary-button:active,
.primary-button:focus {
	background-color: var(--primary-color-200) !important;
	color: var(--color-dark-charcoal) !important;
	box-shadow: var(--focus-box-shadow) !important
}

.primary-link,
.primary-link-bold-medium {
	/*color: var(--primary-color-600) !important;*/
	color: #000 !important;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none !important
}

.primary-link-bold-medium:hover,
.primary-link:hover {
	text-decoration: underline !important;
	transition: all .3s
}

.primary-link-bold-medium {
	color: var(--primary-color-500) !important;
	font-weight: 400
}

.primary-link-underline-none {
	text-decoration: none;
	color: var(--primary-color-500) !important;
	font-weight: 700 !important
}

.primary-link-underline-none:hover {
	color: #639;
	text-decoration: underline !important
}

.primary-link-underline-none .bi-chevron-left::before,
.primary-link-underline-none .bi-chevron-right::before {
	text-decoration: none;
	color: var(--primary-color-500) !important;
	font-weight: 700 !important;
	margin-bottom: 1.5rem
}

.primary-link-underline-none .bi-chevron-left::before {
	margin-bottom: 2rem
}

.annex-link {
	color: var(--neutrals-color-800) !important;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none !important;
	transition: all .3s
}

.RNE-link,
.annex-link:hover,
.sup-link {
	text-decoration: none !important;
	color: var(--primary-color-500) !important
}

.RNE-link,
.sup-link {
	cursor: pointer;
	font-weight: 700
}

.sup-link:hover {
	text-decoration: underline !important;
	transition: all .3s
}

.RNE-link {
	font-size: 1rem
}

.RNE-link:hover,
.carousel-button {
	color: var(--primary-color-300) !important;
	transition: all .3s
}

.carousel-button {
	background: var(--carousel-button-background) !important;
	color: var(--carousel-button-color) !important;
	border-radius: 1.5rem;
	padding: .25rem 1rem;
	margin-right: .8rem;
	margin-bottom: 1rem;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	border-color: var(--carousel-button-border) !important
}

.carousel-button:hover {
	background: var(--carousel-button-background-hover) !important;
	color: var(--carousel-button-color-hover) !important;
	border-radius: 1.5rem;
	font-weight: 700
}

.carousel-button:active,
.carousel-button:focus {
	background-color: var(--carousel-button-background-active) !important;
	color: var(--carousel-button-color-active) !important;
	box-shadow: var(--focus-box-shadow) !important
}

.carousel-button-small {
	background: var(--carousel-button-background) !important;
	color: var(--carousel-button-color) !important;
	border-radius: 1.5rem;
	padding: .3rem 1rem;
	margin-right: .8rem;
	transition: all .3s;
	cursor: pointer;
	border-color: var(--carousel-button-border) !important;
	font-weight: 700
}

.carousel-button-small:hover {
	background: var(--carousel-button-background-hover) !important;
	color: var(--carousel-button-color-hover) !important;
	border-radius: 1.5rem;
	font-weight: 700
}

.carousel-button-small:active,
.carousel-button-small:focus {
	background-color: var(--carousel-button-background-active) !important;
	color: var(--carousel-button-color-active) !important;
	box-shadow: var(--focus-box-shadow) !important
}

.try-again-button {
	background: var(--primary-color-300) !important;
	color: var(--neutrals-color-200) !important;
	border-radius: 1.5rem;
	padding: .25rem 1rem;
	margin-right: .8rem;
	margin-bottom: 1rem;
	transition: all .3s;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	border-color: var(--primary-color-400) !important
}

.try-again-button:hover {
	background: var(--primary-color-100) !important;
	color: var(--primary-color-500) !important;
	border-radius: 1.5rem;
	font-weight: 700
}

.try-again-button:active,
.try-again-button:focus {
	background-color: var(--primary-color-300) !important;
	color: var(--color-dark-charcoal) !important;
	box-shadow: var(--focus-box-shadow) !important
}

.accordion-item {
	background-color: var(--neutrals-color-100);
	border: 0;
	border-radius: 0
}

.accordion-button {
	margin-bottom: 1rem;
	background: var(--yellow-color-100);
	font-weight: 700;
	color: var(--default-text-color);
	font-size: 1.2rem;
	border: 1px solid var(--neutrals-color-400) !important
}

.accordion-button:focus {
	border: 2px solid var(--yellow-color-100);
	box-shadow: 0 0 0 .125rem var(--yellow-color-100);
	outline: 0;
	z-index: 3
}

.accordion-button:not(.collapsed) {
	color: var(--default-text-color) !important;
	background: var(--yellow-color-100);
	box-shadow: inset 0-1px 0 var(--primary-color-100)
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.accordion-item:last-of-type>.accordion-header .accordion-button {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0
}

.accordion-button:not(.collapsed):after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231D2939'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important
}

.search-button {
	border: 0;
	background-color: transparent;
	margin-right: 2.5rem !important
}

.search-box {
	border-top: 1px solid var(--color-anti-flash-white);
	border-bottom: 1px solid var(--color-anti-flash-white)
}

.search-box .form-control {
	border: 0;
	border-radius: 0
}

.docpagetitle {
	padding-bottom: 1rem !important;
	padding-top: 2rem !important;
	color: var(--primary-color-500)
}

.bi-arrow-return-left::before {
	font-weight: bolder !important
}

#scrollToTop {
	display: none;
	cursor: pointer;
	font-size: 1rem;
	position: fixed;
	text-align: center;
	z-index: 3;
	transition: background-color .2s ease-in-out;
	background: var(--primary-color-500);
	color: var(--neutrals-color-200);
	right: 35px;
	bottom: 60px;
	padding: .15rem .5rem .35rem;
	line-height: 1.3;
	border-radius: 50%;
	min-width: 0;
	border-width: 0;
	margin: 0;
	font-weight: 700
}

#scrollToTop .fas,
#scrollToTop .sgds-icon {
	padding-left: 0
}

#scrollToTop:hover {
	border: 2px solid var(--primary-color-100);
	background: var(--primary-color-400);
	color: var(--neutrals-color-200);
	font-weight: 900
}

ol.statement-list {
	padding-left: 3rem
}

ol.statement-list .statement-list>li>.list-mark {
	left: -1.5rem
}

ol.statement-list ol.statement-list ol.statement-list>li,
ol.statement-list ol.statement-list>li,
ol.statement-list>li {
	padding-bottom: 1rem
}

ol.statement-list h3 {
	color: var(--primary-color-500);
	padding-bottom: .25rem;
	margin-left: -3rem;
	font-size: 1.25rem;
	padding-top: 1rem
}

ol.statement-list h5 {
	margin-bottom: 1rem;
	margin-top: 2.5rem;
	margin-left: -3rem
}

ol.statement-list ol.statement-list {
	padding-left: 2rem
}

ol.statement-list ol.statement-list ol.statement-list>li:last-child,
ol.statement-list ol.statement-list>li:last-child {
	padding-bottom: 0
}

.statement-list {
	padding-left: 3.5rem;
	list-style-type: none
}

.statement-list>li {
	position: relative;
	padding-bottom: 1.5rem
}

.statement-list>li>.list-mark {
	position: absolute;
	left: -3rem
}

.statement-title {
	padding-bottom: 1.5rem !important
}

.statement-link {
	text-decoration: none;
	color: #000 !important;
	width: 90%
}

table .show {
	display: table-row
}

.expenditure,
.revenue,
.spc_transfer,
.top-up {
	display: none
}

.table td.doubleTopLine {
	border-top: 2px double #000;
	border-top-width: medium
}

.table td.doubleBottomLine {
	border-bottom: 2px double #000;
	border-bottom-width: medium !important
}

.table td.bottomLineThick {
	border-bottom: 2px solid #000
}

td.indent {
	text-align: left
}

.col-sm-1 {
	text-align: center
}

table.table.no-auto-table.k-table strong>a {
	font-weight: 700;
	padding-left: 1.5rem
}

.expenditure td:first-child,
.revenue td:first-child,
.spc_transfer td:first-child,
.top-up td:first-child {
	padding-left: 4.5rem
}

@media (max-width:767px) {
	#scrollToTop {
		right: 20px
	}
}

@media all and (min-width:992px) {
	.dropdown-menu li {
		position: relative
	}

	.dropdown-menu .submenu {
		display: none;
		position: absolute;
		left: 100%;
		top: -7px
	}

	.dropdown-menu .submenu-left {
		right: 100%;
		left: auto
	}

	.dropdown-menu>li:hover {
		background-color: var(--hover-background-color)
	}

	.dropdown-menu>li:hover>.submenu {
		display: block
	}
}

@media (max-width:991px) {
	.dropdown-menu .dropdown-menu {
		margin-left: .7rem;
		margin-right: .7rem;
		margin-bottom: .5rem
	}
}

.button-label>p {
	margin-bottom: 0 !important;
	margin-top: 0 !important
}

.col-12.col-md-6.d-flex.align-items-center {
	background-color: var(--yellow-color-500);
	color: var(--carousel-button-color);
	min-height: 150px
}

.col-12.col-md-6 {
	min-height: 550px
}

a.social-icon .button-label {
	display: none;
}