﻿:root {
	--primary-color-100: #e7f8f5;
	--primary-color-200: #a0e4d6;
	--primary-color-400: #007f66;
	--primary-color-500: #00604d;
	--neutrals-color-100: #ffffff;
	--neutrals-color-200: #f8f8f8;
	--neutrals-color-400: #e0e4e5;
	--neutrals-color-500: #a4a4a4;
	--neutrals-color-800: #282828;
	--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;
	--carousel-button-background: #f8f8f8;
	--carousel-button-color: #00604d;
	--carousel-button-border: #00604d;
	--carousel-button-background-hover: #e7f8f5;
	--carousel-button-color-hover: #00604d;
	--carousel-button-background-active: #a0e4d6;
	--carousel-button-color-active: #2c2c2c;
}

@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');
}

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 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(--primary-color-100);
	color: var(--primary-color-500);
	border-left: 2px solid var(--primary-color-500);
	font-size: 1.25rem;
	padding-left: 1rem;
	font-weight: 700;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

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

.document-card .img-thumbnail {
	/*background-color: var(--primary-color-100);*/
}

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

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

.card-body {
	padding: 1rem;
}

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

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

/* Navigation Bar Logo */
.navbar-brand img {
	height: 40px;
}

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

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

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: var(--primary-color-100) !important;
	color: var(--primary-color-500);
	font-weight: 700;
}

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

.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 {
	color: var(--primary-color-500);
	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(--primary-color-100);
	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: var(--primary-color-500) !important;
}

.sgds.sidenav .sidenav-item .sgds.btn.active,
.sgds.sidenav .sidenav-item .sgds.btn:hover {
	border-left-color: var(--primary-color-500) !important;
	color: var(--primary-color-500) !important;
	background: var(--primary-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,
.sgds.navbar .nav-item a.nav-link:hover {
	border-color: var(--neutrals-color-100);
	color: var(--neutrals-color-800);
	font-weight: 700;
	background: var(--primary-color-100);
}

.sgds.navbar .nav-item a.nav-link.dropdown-toggle.show {
	border-bottom: 0.125rem solid var(--primary-color-500);
	color: var(--primary-color-500);
	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(--primary-color-500) !important;
	background: var(--primary-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;
}

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

.active-menu {
	border-bottom: 0.125rem solid var(--primary-color-500);
}

/* Footer */
.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,
.sgds.footer .footer-contact-links ul li a,
.sgds.footer .footer-items ul li a,
.sgds.footer .footer-mandatory-links ul li a {
	color: var(--neutrals-color-800);
}

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

.sgds.footer .footer-header .description,
.sgds.footer .footer-header .title,
.sgds.footer .footer-items .title {
	color: var(--neutrals-color-800);
}

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

/* breadcrumb */
.subpage-banner {
	background: var(--primary-color-100);
}

/* Carousel */
.carousel {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.carousel .carousel-indicators button {
	width: 15px;
	height: 15px;
	border-radius: 100%;
}

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

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

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

.carousel-image-mobile {
	object-fit: none; /* Do not scale the image */
	object-position: center; /* Center the image within the element */
	width: 100%;
	min-height: 460px;
	max-height: 460px;
	margin-bottom: 1rem;
}

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

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

/* .card-img-overlay h4.card-title,
h4 > .card-title {
	line-height: 1.25;
} */

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

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

/* Buttons and links */
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-500);
}

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

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

.primary-button {
	background: var(--primary-color-500) !important;
	color: var(--neutrals-color-200) !important;
	border-radius: 1.5rem;
	padding: 0.25rem 1rem;
	margin-right: 0.8rem;
	margin-bottom: 1rem;
	transition: all 0.3s;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	border-color: var(--primary-color-400) !important;
}

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

.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 {
	color: var(--primary-color-500) !important;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none !important;
}

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

.primary-link-bold-medium {
	color: var(--primary-color-500) !important;
	font-weight: 400;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none !important;
}

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

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

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

.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 {
	text-decoration: none;
	color: var(--primary-color-500) !important;
	font-weight: 700 !important;
	margin-bottom: 2rem;
}

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

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

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

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

.RNE-link {
	color: var(--primary-color-500) !important;
	font-weight: 700;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none !important;
}

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

.carousel-button {
	background: var(--carousel-button-background) !important;
	color: var(--carousel-button-color) !important;
	border-radius: 1.5rem;
	padding: 0.25rem 1rem;
	margin-right: 0.8rem;
	margin-bottom: 1rem;
	transition: all 0.3s;
	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: 0.3rem 1rem;
	margin-right: 0.8rem;
	transition: all 0.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: 0.25rem 1rem;
	margin-right: 0.8rem;
	margin-bottom: 1rem;
	transition: all 0.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 */
.accordion-item {
	background-color: var(--neutrals-color-100);
	border: none;
	border-radius: 0;
}

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

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

.accordion-button:not(.collapsed) {
	color: var(--primary-color-500) !important;
	background: var(--primary-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 */
.search-button {
	border: none;
	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: none;
	border-radius: 0px;
}

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

h1.title {
	color: var(--neutrals-color-800);
}

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

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

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

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

/* Budget Statement */
thead {
	background: var(--primary-color-100);
}

/*#budgetindex {
    margin-bottom: 2rem
}

    #budgetindex thead th {
        background: var(--primary-color-500);
        color: var(--neutrals-color-200);
    }

    #budgetindex th {
        background: red;
        padding: 1rem 1.5rem
    }

    #budgetindex td {
        vertical-align: middle;
        padding: 1rem 1.5rem;
    }

    #budgetindex.table-striped tbody tr:nth-of-type(odd) {
        background: var(--primary-color-100);
    }*/

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

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

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

ol.statement-list h3 {
	color: var(--primary-color-500);
	padding-bottom: 0.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 > li,
ol.statement-list ol.statement-list ol.statement-list > li {
	padding-bottom: 1rem;
}

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

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

.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: -3.5rem;
}

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

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

.statement-link {
	text-decoration: none;
	color: var(--primary-color-500) !important;
	width: 90%;
}

/* R&E */
table .show {
	display: table-row;
}

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

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

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

.table td.bottomLineThick {
	border-bottom: 2px solid black;
}

td.indent {
	text-align: left;
}

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

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

.expenditure td:first-child {
	padding-left: 4.5rem;
}

.revenue td:first-child {
	padding-left: 4.5rem;
}

.spc_transfer td:first-child {
	padding-left: 4.5rem;
}

.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(--primary-color-100);
	}

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

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