/*
   ======================================================================================================
 
    @VERSION			: 1.0.1
    @CREATED			: 31 MAY 2018
    @MODIFIED			: 16 JUL 2018
    @DESIGNER			: Daniel C. K. Tan (danielcktan@gmail.com)
	@DESIGNER URI		: http://www.danielcktan.per.sg
    
    @FILE				: ~/css/template.css
	@TYPE				: Style Sheet
	@DESCRIPTION		: Template Styles for BS4
	   
   ======================================================================================================
*/

/* TOC
=======================================================================================================	
	#01 Base Styles
	#02 Standard UI Styles
	#03 Customised UI Styles
	#04 Article Content Styles
	#05 Customised Form Styles
	#06 Helper Styles
	#07 Responsive Styles
	#08 CSS3 Styles 
	#09 CSS Media Queries
	#10 Print-friendly Styles
*/



/* ----------------------------------------------------------------------------------------------------
   #01 BASE STYLES 
/* ----------------------------------------------------------------------------------------------------*/

/* Viewport Styles
/* ----------------------------------------------------------------------------------------------------*/
@-ms-viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}

@-o-viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}

@viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}

/* Support IE10 Snap Mode */
@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
}


/* Document Styles
/* ----------------------------------------------------------------------------------------------------*/

/* Smooth animated effect */
.container, .row, 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	-webkit-transition: all 0.6s ease-in-out;
	   -moz-transition: all 0.6s ease-in-out;
	    -ms-transition: all 0.6s ease-in-out;
	     -o-transition: all 0.6s ease-in-out;
	        transition: all 0.6s ease-in-out;
}


html, body {
	position: relative;
	width: 100%;
	min-height: 100%;
	margin: 0; 
	padding: 0;
}

body {
	font-family: 'Open Sans', 'Microsoft YaHei', SimHei, STHeiti, sans-serif;
	
	overflow-x: hidden;
	overflow-y: hidden;
	overflow: hidden;
    		   
	position: relative; /* Required for ScrollSpy */

	text-rendering: optimizelegibility; 
													 
    -webkit-tap-highlight-color: rgba(102,102,102,.2);	
	-webkit-font-smoothing: antialiased;
	
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%; 
	
	-webkit-transition: font-size .8s ease-in-out;
	   -moz-transition: font-size .8s ease-in-out;
	     -o-transition: font-size .8s ease-in-out;
            transition: font-size .8s ease-in-out;
}



/* ----------------------------------------------------------------------------------------------------
   #02 STANDARD UI STYLE 
/* ----------------------------------------------------------------------------------------------------*/

/* Helper Styles
/* ----------------------------------------------------------------------------------------------------*/
body.sticky-footer { margin-bottom: 56px; }

body.sticky-footer .content-wrapper { min-height: calc(100vh - 56px - 56px); }

body.fixed-nav { padding-top: 56px; }

.content-wrapper { min-height: calc(100vh - 56px); padding-top: 1rem; }

.smaller { font-size: 0.7rem; }
.o-hidden { overflow: hidden !important; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }


/* Navbar Styles
/* ----------------------------------------------------------------------------------------------------*/
.navbar {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}

@media (max-width: 991px) {
	.navbar-brand img { width: auto; height: 35px; }
}

.navbar-dark .navbar-toggler {
    color: #eee;
    border-color: #eee;
	font-size: 0.9em;
}

#mainNav .navbar-collapse { overflow: auto; max-height: 75vh; }

#mainNav .navbar-collapse .navbar-nav .nav-item .nav-link { color: #eee; cursor: pointer; }
#mainNav .navbar-collapse .navbar-nav .nav-item .nav-link:hover { color: #ffcc00; }

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after { float: right; content: '\f107'; font-family: 'FontAwesome'; }

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse.collapsed:after { content: '\f105'; }

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level { padding-left: 0; }

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a { display: block; padding: 0.5em 0; }

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:focus, #mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:hover,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:focus,
#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:hover { text-decoration: none; }

#mainNav .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a { padding-left: 1em; }

#mainNav .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a { padding-left: 2em; }

#mainNav .navbar-collapse .sidenav-toggler { display: none; }

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link { position: relative; min-width: 45px; }

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after {
	float: right;
	width: auto;
	content: '\f105';
	border: none;
	font-family: 'FontAwesome';
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link .indicator {
	position: absolute;
	top: 5px;
	left: 21px;
	font-size: 10px;
}

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown.show > .nav-link:after { content: '\f107'; }

#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message {
	overflow: hidden;
	max-width: none;
	text-overflow: ellipsis;
}

@media (min-width: 992px) {
	#mainNav .navbar-brand { width: 250px; }
	#mainNav .navbar-collapse { overflow: visible; max-height: none; }
	
	#mainNav .navbar-collapse .navbar-sidenav {
		position: absolute;
		top: 0;
		left: 0;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-top: 56px;
	}
	
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item { width: 280px; padding: 0; }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { padding: 0.8em; font-size: 0.85em }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level { padding-left: 0; list-style: none; }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li,
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li { width: 250px; }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a { padding: 1em; }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a { padding-left: 2.75em; }
	#mainNav .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a { padding-left: 3.75em; }
	
	#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link { min-width: 0; }
	#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after { width: 24px; text-align: center; }
	#mainNav .navbar-collapse .navbar-nav > .nav-item.dropdown .dropdown-menu > .dropdown-item > .dropdown-message { max-width: 300px; }
}

#mainNav.fixed-top .sidenav-toggler { display: none; }

@media (min-width: 992px) {
	#mainNav.fixed-top .navbar-sidenav { margin-top: 86px; height: calc(100vh - 112px); }
	#mainNav.fixed-top .sidenav-toggler { 
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-top: calc(100vh - 56px);
	}
	#mainNav.fixed-top .sidenav-toggler > .nav-item { width: 280px; padding: 0; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); }
	#mainNav.fixed-top .sidenav-toggler > .nav-item > .nav-link { padding: 1em; }
}

#mainNav.fixed-top.navbar-dark .sidenav-toggler { background-color: #999; }

#mainNav.fixed-top.navbar-dark .sidenav-toggler a i { color: #adb5bd; }

#mainNav.fixed-top.navbar-light .sidenav-toggler { background-color: #dee2e6; }

#mainNav.fixed-top.navbar-light .sidenav-toggler a i { color: rgba(0, 0, 0, 0.5); }

body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler { overflow-x: hidden; width: 55px; }

body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-item,
body.sidenav-toggled #mainNav.fixed-top .sidenav-toggler .nav-link { width: 55px !important; }

body.sidenav-toggled #mainNav.fixed-top #sidenavToggler i {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: 'FlipH';
}

#mainNav.static-top .sidenav-toggler { display: none; }

@media (min-width: 992px) {
  #mainNav.static-top .sidenav-toggler { display: flex; }
}

body.sidenav-toggled #mainNav.static-top #sidenavToggler i {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: 'FlipH';
}

.content-wrapper { overflow-x: hidden; background: white; }

@media (min-width: 992px) {
  .content-wrapper { margin-left: 250px; }
}

#sidenavToggler i { font-weight: 800; }

.navbar-sidenav-tooltip.show { display: none; }

@media (min-width: 992px) {
  body.sidenav-toggled .content-wrapper { margin-left: 55px; }
}

body.sidenav-toggled .navbar-sidenav { width: 55px; }

body.sidenav-toggled .navbar-sidenav .nav-link-text { display: none; }

body.sidenav-toggled .navbar-sidenav .nav-item,
body.sidenav-toggled .navbar-sidenav .nav-link { width: 55px !important; }

body.sidenav-toggled .navbar-sidenav .nav-item:after,
body.sidenav-toggled .navbar-sidenav .nav-link:after { display: none; }

body.sidenav-toggled .navbar-sidenav .nav-item { white-space: nowrap; }

body.sidenav-toggled .navbar-sidenav-tooltip.show { display: flex; }

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after { color: #eee; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { color: #eee; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover { color: #ffcc00; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a { color: #eee; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover { color: #ffcc00; }

#mainNav.navbar-dark .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after { color: #eee; }

@media (min-width: 992px) {
	/*
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav { background: #343a40; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a { color: white !important; background-color: #495057; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:hover { color: white; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level { background: #343a40; }
	*/
	
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav { background: #f8f9fa; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); }
	
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after { color: #555; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { color: #555; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover { color: #555; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a { color: #555; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover { color: #555; }
	
	#mainNav.navbar-dark .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after { color: #555; }
	
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a { color: #333 !important; background-color: #e9ecef; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:hover { color: #333; }
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
	#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level { background: #f8f9fa; }
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item .navbar-text.level1 {
	background-color: #F90;
	color: #fff;
	font-weight: bold;
	cursor: default;
	padding-left: 15px;
	width: 100%;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item .navbar-text.level2 {
	background-color: #36C;
	color: #fff;
	font-weight: bold;
	cursor: default;
	padding-left: 15px;
	width: 100%;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item .navbar-text.toggleLevel {
	background-color: #999;
	color: #fff;
	font-weight: bold;
	padding-left: 15px;
	width: 100%;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item i.fas.level1 { color: #F90; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item i.fas.level2 { color: #36C; }
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-item i.fas.toggleLevel { color: #fff; }

#mainNav.navbar-light .navbar-collapse .navbar-sidenav .nav-link-collapse:after { color: rgba(0, 0, 0, 0.5); }
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { color: rgba(0, 0, 0, 0.5); }
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover { color: rgba(0, 0, 0, 0.7); }
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a { color: rgba(0, 0, 0, 0.5); }
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level > li > a:hover,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:focus,
#mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level > li > a:hover { color: rgba(0, 0, 0, 0.7); }

#mainNav.navbar-light .navbar-collapse .navbar-nav > .nav-item.dropdown > .nav-link:after { color: rgba(0, 0, 0, 0.5); }

@media (min-width: 992px) {
  #mainNav.navbar-light .navbar-collapse .navbar-sidenav { background: #f8f9fa; }
  #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a { color: #000 !important; background-color: #e9ecef; }
  #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:focus, #mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active a:hover { color: #000; }
  #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
  #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level { background: #f8f9fa; }
}


/* Map Viewer Styles
/* ----------------------------------------------------------------------------------------------------*/

/*https://stackoverflow.com/a/325334*/
.map {
    position: absolute; 
	top: -100px; 
	left: 0; 
	right: 0; 
	bottom: 0;
}

.map iframe {
    display: block; 
	width: 120%; 
	height: 120%; 
	border: none;
	overflow: scroll;
}


/* Modal Styles
/* ----------------------------------------------------------------------------------------------------*/

.modal-header { 
	border-bottom: 0 !important;
	padding-bottom: 0;
}

.modal-header .close {
    display: block;
	font-size: 50px;
	margin: -2rem -1rem -1rem auto;
    padding: 1rem;
}

.modal-title { font-weight: 300; }

.modal-body h5 { font-weight: 300; margin-top: 25px; }

.modal-body p { font-size: 0.95rem; text-align: justify; }

.ekko-lightbox { z-index: 1080 !important; }


/* Hint Styles
/* ----------------------------------------------------------------------------------------------------*/
.introjs-fixedhint { z-index: 1031; }
.introjs-hint-dot { border: 10px solid rgba(146,146,146,.36); }
.introjs-tooltip { min-width: 350px; }

/* Footer Styles
/* ----------------------------------------------------------------------------------------------------*/
footer.sticky-footer {
	background-color: #6f7178;
    color: #fff;
	line-height: 55px;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 56px;
	z-index: 1030;
}

@media (min-width: 992px) {
  footer.sticky-footer { width: calc(100% - 280px); }
}

@media (min-width: 992px) {
  body.sidenav-toggled footer.sticky-footer { width: calc(100% - 55px); }
}