@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: 
    /* The path and format are updated for the TTF file */
    url('images/Roboto-Regular.ttf') format('truetype');
}

/* --- Defining Roboto Bold (Weight 700) from a TTF file --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: 
    url('images/Roboto-Bold.ttf') format('truetype');
}

*{
	font-feature-settings: 'locl' 0 !important;
}

 @media print {
     a:after {
         content: "" !important;
    }
    /* If URLs are shown before the link */
     a:before {
         content: "" !important;
    }
}

.z-include:not(:first-child) {
    margin-top: auto;
}

.browserText{
	height:unset!important;
	background-color:unset!important;
	text-align:left;
	font-size:12px;
	font-family:arial;
	color:#003F00;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	max-width:900px;
	padding-left:15px;
	padding-right:15px;
}

.container1000
{	
	margin-left:auto!important;
	margin-right:auto!important;
	max-width:970px;
}

 a.site, a.siteLink {
     font-size: 10.5pt;
     color: black !important;
     font-weight: bold;
}
 body {
     margin: 0;
     font-family: Tahoma, 'Roboto';
     line-height: normal;
     background-color: #fff;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}

/* Main content area */
.z-window-content {
    flex: 1 0 auto; /* This ensures content takes necessary space */
}

/* Footer table container */
.table-container {
    width: 100%;
    margin-top: auto; /* Pushes footer to bottom */
    flex-shrink: 0; /* Prevents footer from shrinking */
}

/* Ensure all window content follows flex pattern */
.z-window {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

 .header-window{
     
     min-width:343px;
}
 .page-window{
     min-width:343px;
}
 .navbar-container{
     min-width:343px;
}
 
.bi-search {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.5 1a5.5 5.5 0 0 1 4.383 8.823l3.85 3.85a1 1 0 0 1-1.415 1.414l-3.85-3.85a1 1 0 0 1-.115-.1A5.5 5.5 0 1 1 6.5 1zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: scaleX(-1);
   
}

.bi-envelope {
    display: inline-block;
    width: 13px;
    height: 13px;
    transform: scaleX(1.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%23000000' d='M22 0H2C0 0 0 2 0 2v16c0 2 2 2 2 2h20c2 0 2-2 2-2V2c0-2-2-2-2-2zM2.5 2h19L12 10 2.5 2zM2 18V4l10 8.5L22 4v14H2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bi-envelope.mobile{
	width: 14px;
    height: 14px;
}
 
 html {
     font-family: sans-serif;
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: transparent 
}
 *, ::after, ::before {
     box-sizing: border-box;
     box-sizing: border-box 
}
 .leaflet-tooltip {
     background-color: #fff;
     border: 1px solid #ddd;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
     padding: 4px 8px;
     font-size: 14px;
     line-height: 1.4;
     opacity: .9 
}
 .divider-custom {
     display: flex;
     align-items: center;
     text-align: center;
     width: 100% 
}
 .divider-custom-line {
     width: 100%;
     flex-grow: 1;
     height: 1px;
     background-color: black;
     margin: 8px ;
     margin-left: auto;
     margin-right:auto;
     max-width:900px;
}
 .divider-custom-text {
     padding: 0 10px;
     white-space: nowrap;
     color: #4d4d4d;
     font-weight: 700;
     font-size: 19px !important 
}
 .venue-item {
     padding-left: 2rem!important;
     padding-top:0!important;
     padding-bottom:0!important;
     width: 150px;
}

.venueContainer{
	width:fit-content;
}
 @media screen and (max-width:767.98px){
     .venue-item{
         padding-top: 0.25rem !important;
         padding-bottom: 0.25rem !important;
    }
}
 .venue-item.chinese{
     letter-spacing: 0.2em;
}
 .list-group-item {
     border: none;
     position: relative 
}
 .venue-item:hover {
     text-decoration: underline 
}
 .facility-item:hover {
     text-decoration: underline 
}
 .hireLink:hover {
     text-decoration: underline;
     cursor: pointer 
}
 .hireLink {
     color: #1a1a1a !important;
     font-weight: 700;
     font-size: 14px !important 
}
 .card-text {
     margin-bottom: 0;
     font-size: 16px !important 
}
 .cardBtn {
     transition: box-shadow 0.3s, transform .3s;
     border-radius: 1.5em;
     padding: 0 !important;
     border: none !important 
}
 .card-img-top {
     border-radius: 0.8em 
}
 .slider-card {
     border: none 
}
 .slider-img {
     object-fit: cover 
}
 .map-card {
     border: none;
     min-height: 400px 
}
 .map-img {
     object-fit: cover 
}
 .cardBtn:hover {
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6) !important;
     transform: translateY(-5px) */
}
 .leaflet-marker-icon {
     filter: hue-rotate(140deg) saturate(200%) 
}
 .lang-button {
     border-radius: 50% !important;
     width: 40px !important;
     height: 40px !important;
     font-size: 16px !important;
     line-height: 40px !important;
     text-align: center !important;
     padding: 0 !important;
     margin-left: 5px !important 
}
 .card:focus-visible {
     outline: none;
     border: 2px solid blue !important 
}
 .venue-item:focus-visible, .facility-item:focus-visible {
     outline: none;
     border: 2px solid #00f !important 
}
 li::marker{
}
 .venueCard {
     background-color: #90278e !important;
     background-image: url(./images/venueBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
     /* max-height:193px; */
}
 .stadiumCard {
     background-color: #e20185 !important;
     background-image: url(./images/stadiumBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
    /*  max-height:193px; */
}
 .iamsmartCard {
     background-color: #2B7366 !important;
     background-image: url(./images/iamsmartBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
    /*  max-height:193px; */
}
 .paymentCard {
     background-color: #c01d2e !important;
     background-image: url(./images/paymentBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
}

.ocrCard {
     background-color: #0066cc !important;
     background-image: url(./images/ocrBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
}
 .sysCard {
     background-color: #00853C !important;
     background-image: url(./images/systemBG.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 0;
    /* max-height: 130px;
     */
}

.wcag{
	height: 35px;
}

@media ( max-width : 767.98px) {
	.sysCard, .sysCard2{
		min-height:100px;
	}
	
	.systemRequirement-body{
		padding-right:1.25rem!important;
		padding:1.25rem!important;
	}	
}
 .sysCard2 {
    /* max-height: 130px;
     */
}
 .newsCard, .sysCard2 {
     background-color: #00853C !important 
}
 .serviceCard {
     background-color: #218383 !important 
}
 .serviceCard .card-body {
     padding: 1rem !important;
     padding-top: 0.6rem !important;
     padding-bottom: 1.5rem !important;
     display: flex !important;
     justify-content: space-between !important;
     flex-direction: column !important;
     color: #fff !important 
}
 .card-body {
     flex: 1 1 auto;
     min-height: 1px 
}
 .card {
     position: relative;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: #fff;
     background-clip: border-box;
     border: 1px solid rgba(0, 0, 0, .125);
     border-radius: 0.7em;
}
 .navbar {
     background-image: url(images/bkgdtexture.gif);
     transition: background-color 0.3s, box-shadow .3s;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     border-bottom: 2px solid #b30000;
     padding-right: 0 
}
 .navbarForm {
     background-image: unset !important;
     background-color: #218383 !important;
     border-bottom: 0 !important 
}
 .bg-image {
     background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../LCSD/images/bg2.png);
     background-size: 100% auto;
     background-position: bottom;
     background-repeat: no-repeat 
}
 .bg-secondary {
     background-color: #767676 !important 
}
 .navbar.sticky {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1 
}
 .mapContainer {
     z-index: 0 
}
 #venueListHK, #venueListKL, #venueListNT {
     font-size: 14px !important 
}
 .venueListBtn:focus-visible {
     outline: none;
     border: 2px solid blue !important 
}
 .venueListBtn {
     border: 0 !important;
     font-style: italic;
     font-size: 13pt !important;
}
 .webkit {
     padding: 0 
}
 .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: rgba(255, 255, 255, 0.5) !important;
     line-height: 1.5!important;
}
 .footer-container {
     opacity: 1;
     /* max-width: 750px !important; */
}
 .footer-links {
     display: flex;
     flex-direction: row;
    /* flex-wrap: wrap;
     */
     align-items: center;
     text-align: center;
     margin-top: 5px 
}
 .footer-links a {
     margin-right: 10px;
     color: #333 
}
 .footer-links a:last-child {
     margin-right: 0 
}
 .footer-images {
     display: flex;
     align-items: center 
}
 .footer-images img {
     margin-left: 10px;
     max-width: 50px;
     max-height: 50px 
}
 A {
     color: #00F;
     font-weight: 700;
     text-decoration: none 
}
 .footer-links .link-item {
     display: inline-block;
     position: relative;
     margin-right: 10px;
     padding-right: 10px;
     color: #ccc !important;
     font-size: 13px 
}
 .upper-right{
    /* width:400px!important;
     */
}
 .link-item {
     font-size: 15px 
}
 .link-item-last {
     font-size: 13px;
     margin-top: 5px 
}
 .footer-icon {
     position: relative;
     padding-left: 3px;
     display: inline-block;
     margin-left: 20px 
}
 .footer-icon:before {
     content: '';
     position: absolute;
     left: 0;
     top: 25%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 18px solid transparent;
     border-top: 18px solid #000;
     border-right: 0;
     border-bottom: 0;
     transform-origin: top left;
     transform: rotate(90deg) 
}
 .footer-upper, .footer-bottom{
    /*  border-bottom-width: 2px;
     border-bottom-style: solid;
     border-bottom-color: #000; */
     margin-right:auto!important;
     margin-left:auto!important;
     max-width: 900px; 
}
 

 .line {
     border-bottom-width: 1.5px;
     border-bottom-style: solid;
     border-bottom-color: #000;
     margin-left:8px;
     margin-right:8px;
}

 a:focus-visible {
     border: 2px solid blue !important 
}
 .formFooterLink:focus-visible {
     border: 2px solid blue !important 
}
 .footer-links .link-item:not(:last-child)::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     width: 1px;
     height: 20px;
     background-color: #22262a 
}
 .enqTr {
     background: #157B7E;
     border-collapse: collapse;
     color: #fff;
     font-size: 12pt;
}
 .faq-title{
     font-size: 14pt;
}
 .enqHeadTd {
     padding-left: 10px;
     padding-top: 1px;
     padding-bottom: 1px;
}
 .enqHeadTd2 {
     padding-left: 10px;
     border-style: solid;
     vertical-align: top;
     border-color: #000;
     border-width: 0 0 1px 
}
 .enqTr2 {
     background: #fff;
     border-collapse: collapse;
     font-size: 10pt 
}
 .tdMain {
     padding-left: 10px;
     border-style: solid;
     border-width: 0 0 1px 
}
 .enqText {
     font-size: 10pt;
     font-family: Tahoma ;
     text-align:left;
}
 .idvTable {
     max-width: 1000px;
     text-align: center;
     text-align: left;
     margin-left:auto;
     margin-right:auto;
}
 .brandHK, .footerbrandHK:hover {
     cursor: pointer 
}
 .z-window-content {
     padding: 0 
}
 .collapse-content {
     overflow: hidden;
     transition: height .3s ease-in-out 
}
 .collapse-content .show {
     max-height: 1000px 
}
.HKHeader.collapsed .bi:before,
.KLHeader.collapsed .bi:before,
.NTHeader.collapsed .bi:before {
    content: "";
    display: inline-block;
    width: 20px;
    height:20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.HKHeader:not(.collapsed) .bi:before,
.KLHeader:not(.collapsed) .bi:before,
.NTHeader:not(.collapsed) .bi:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
 .HKHeader.desktop .bi:before, .KLHeader.desktop .bi:before, .NTHeader.desktop .bi:before {
     content: "" !important; 
     background-image:none!important;
}
 .HKHeader, .KLHeader, .NTHeader {
     font-size:21px!important;
     color: #157B7E;
}

.divider-custom-text.hotline, .divider-custom-text.venue
{
	color: #157B7E;
}

 .marker::before {
     content: "•";
     display: inline-block;
     width: 1em;
}
 .HKHeader .bi:before, .KLHeader .bi:before, .NTHeader .bi:before {
     transition: transform .3s ease-in-out 
}
 .top-container, .middle-container, .bottom-container, .sysreq-container {
     max-width: 900px 
}

.navbar-container{
	max-width:880px;
}

 .sysreq-container {
    
     
}
 .row {
     height: 100%;
}
 .middle-container {
     height: 360px;
     display: flex;
     flex-direction: column 
}
 .middle-container .row {
     flex: 1 1 auto;
     display: flex;
     flex-wrap: nowrap 
}
 .left-column {
     display: flex;
     flex-direction: column;
     height: 100% 
}
 .news-card-container {
     flex-grow: 1 
}
 .newsCard {
     height: 100%;
     height: 105px; 
}
 .newsCard .card-title {
     position: sticky;
     top: 0;
     z-index: 0.5 
}
 .newsCard .card-body {
     display: flex;
     flex-direction: column;
     height: 100% ;
     overflow: hidden;
}
 .newsSubtitle {
     white-space: pre-line 
}

.news-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
}

/* The clipping container */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
}

/* The container we animate. It uses flexbox to align the two tracks. */
.marquee-content {
    display: flex;
    width: fit-content; /* Let it be as wide as its content */
    animation: marquee-scroll 15s linear infinite; /* Adjust duration as needed */
}

/* The animation keyframes */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }
    /* Move the container left by the width of ONE track (50% of its own total width) */
    100% {
        transform: translateX(-50%);
    }
}

/* Pause class to be toggled by JavaScript */
.marquee-content.is-paused {
    animation-play-state: paused;
}

/* Ensure tracks don't shrink and have a gap for spacing */
.marquee-track {
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 40px; /* Add some space between the end of one and start of the next */
}

.marquee-track a{
	color: #FFFFFF;
}

.marquee-track a:hover{
	color: #FFFFFF;
}

 .slider-card-container {
     flex-shrink: 1;
     flex-grow: 1;
     min-height: 100px 
}
 .slider-card {
     height: 100% 
}
 .slider-img {
     width: 100%;
     height: 100%;
     object-fit: cover 
}

.right-column .col-md-6{
	height:58%
}

.right-column .col-12{
	height:37%
}

 .right-column {
     display: flex;
     flex-direction: column;
     height: 100% 
}
 .right-column .row {
     flex: 1 1 auto;
     display: flex;
     flex-wrap: wrap; 
     height: 100%;
}
 .right-column .cardBtn {
     display: flex;
     flex-direction: column;
     
}
 .card-body {
     flex-grow: 1 
}
 @media ( max-width : 767.98px) {
     .middle-container {
         height: auto 
    }
     .middle-container .row {
         flex-direction: column 
    }
     .left-column, .right-column {
         width: 100% 
    }
     .right-column .row {
         flex-direction: column 
    }
     .right-column .cardBtn {
         flex: 1 1 auto 
    }
     .slider-card-container {
         height: 230px 
    }
     .slider-card {
         height: 230px 
    }
     .newsCard {
         max-height: unset 
    }
}
 .btn-menu {
     width: 100%;
     background-image: linear-gradient(to right, transparent, #8c8c8c);
     border: none;
     color: #000 !important;
     margin-top: 2px !important;
     transition: transform .1s ease, box-shadow .1s ease;
     font-size:14px;
     padding: 3px;
}
 .menuPic{
     height:79px;
}
 .subPage-card{
     max-height:219px;
}
 .btn-menu:hover {
     background-image: linear-gradient(to right, #fff, #2eb8b8) 
}
 .btn-menu:focus-visible, .btn-menu.floating {
     transform: translateX(5px);
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2), -5px 0 0 transparent;
     color: #000 !important 
}
 
 .serviceText.chinese{
     font-size: 17px !important;
     letter-spacing: 0.3em;
}
 @media screen and (min-width: 767.98px) {
     .stadiumsSubtitle, .venuesSubtitle{
         white-space:pre-line;
         line-height:1.5;
    }
}
 .hiringText {
     font-family: Arial, Sans-serif;
}
.card .systemRequirement-body{
     padding-right: 8rem;
}
 dd {
     margin-bottom: .5rem;
     margin-left: 0 
}
 dl {
     display: block;
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 0;
     margin-inline-end: 0;
     unicode-bidi: isolate 
}

.idvTableHeading
{	
	PADDING-BOTTOM: 5px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    PADDING-TOP: 5px;
	background-image: linear-gradient(to right, #800080, #ffffff);
	background-repeat: no-repeat;
	background-position: left center;
	font-size: 12pt;
	font-weight:bold;
	color:white;
	border-style: 0px;	
}


.idvTableContent
{
	PADDING-BOTTOM: 5px;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px;
    PADDING-TOP: 5px;	
	background-color:#FFFFFF;
	font-size: 10pt;
	color:Black;
	border-style: none;	 
}

 .itemTable {
     width: 100%;
     border-collapse: collapse !important 
}
 .modal-open {
     padding-right: 0 !important 
}






 #topcontrol {
     left: 20px !important 
}

#topcontrol:focus-visible {
     border: 2px solid black !important; 
}
 .badges {
     display: flex;
     flex-wrap: nowrap;
     padding-left: 15px 
}
 .container {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto 
}
 #facContainer, #facContainer td, #majorAncillaryAttachment1 td, #majorAncillaryAttachment2 td, #majorAncillaryAttachment3 td{
     padding-right: 10px;
     padding-left: 10px;
}
 #upload_file1,#upload_file2,#upload_file3,#upload_file4,#upload_file5,#upload_file6,#upload_file{
     width:250px;
}
 .container-fluid {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto; 
     max-width: 900px;
}
 .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto 
}
 a:hover {
     color: #0063cc;
     text-decoration: underline;
     background-color: transparent 
}
 h1, h2, h3, h4, h5 {
     margin: 0;    
     font-weight: 500;
   
}
 /* h1 {
     font-size: 2.8rem !important 
}
 h2 {
     font-size: 2rem 
}
 h3 {
     font-size: 1.75rem 
}
 h4 {
     font-size: 1.5rem 
}
 h5 {
     font-size: 1.25rem !important 
} */
 .p-0 {
     padding: 0 !important 
}
 .p-1 {
     padding: .25rem !important 
}
 .p-2 {
     padding: .5rem !important 
}
 .p-3 {
     padding: 1rem !important 
}
 .p-4 {
     padding: 1.5rem !important 
}
 .p-5 {
     padding: 3rem !important 
}
 .py-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important 
}
 .py-1 {
     padding-top: .25rem !important;
     padding-bottom: .25rem !important 
}
 .py-2 {
     padding-top: .5rem !important;
     padding-bottom: .5rem !important 
}
 .py-3 {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important 
}
 .py-4 {
     padding-top: 1.5rem !important;
     padding-bottom: 1.5rem !important 
}
 .py-5 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important 
}
 .px-0 {
     padding-left: 0 !important;
     padding-right: 0 !important 
}
 .px-1 {
     padding-left: .25rem !important;
     padding-right: .25rem !important 
}
 .px-2 {
     padding-left: .5rem !important;
     padding-right: .5rem !important 
}
 .px-3 {
     padding-left: 1rem !important;
     padding-right: 1rem !important 
}
 .px-4 {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important 
}
 .px-5 {
     padding-left: 3rem !important;
     padding-right: 3rem !important 
}
 .pt-0 {
     padding-top: 0 !important 
}
 .pt-1 {
     padding-top: .25rem !important 
}
 .pt-2 {
     padding-top: .5rem !important 
}
 .pt-3 {
     padding-top: 1rem !important 
}
 .pt-4 {
     padding-top: 1.5rem !important 
}
 .pt-5 {
     padding-top: 3rem !important 
}
 .pb-0 {
     padding-bottom: 0 !important 
}
 .pb-1 {
     padding-bottom: .25rem !important 
}
 .pb-2 {
     padding-bottom: .5rem !important 
}
 .pb-3 {
     padding-bottom: 1rem !important 
}
 .pb-4 {
     padding-bottom: 1.5rem !important 
}
 .pb-5 {
     padding-bottom: 3rem !important 
}
 .pl-0 {
     padding-left: 0 !important 
}
 .pl-1 {
     padding-left: .25rem !important 
}
 .pl-2 {
     padding-left: .5rem !important 
}
 .pl-3 {
     padding-left: 1rem !important 
}
 .pl-4 {
     padding-left: 1.5rem !important 
}
 .pl-5 {
     padding-left: 3rem !important 
}
 .pr-0 {
     padding-right: 0 !important 
}
 .pr-1 {
     padding-right: .25rem !important 
}
 .pr-2 {
     padding-right: .5rem !important 
}
 .pr-3 {
     padding-right: 1rem !important 
}
 .pr-4 {
     padding-right: 1.5rem !important 
}
 .pr-5 {
     padding-right: 3rem !important 
}
 .pr-10 {
     padding-right: 10rem !important 
}
 .m-0 {
     margin: 0 !important 
}
 .m-1 {
     margin: .25rem !important 
}
 .m-2 {
     margin: .5rem !important 
}
 .m-3 {
     margin: 1rem !important 
}
 .m-4 {
     margin: 1.5rem !important 
}
 .m-5 {
     margin: 3rem !important 
}
 .m-auto {
     margin: auto !important 
}
 .my-0 {
     margin-top: 0 !important;
     margin-bottom: 0 !important 
}
 .my-1 {
     margin-top: .25rem !important;
     margin-bottom: .25rem !important 
}
 .my-2 {
     margin-top: .5rem !important;
     margin-bottom: .5rem !important 
}
 .my-3 {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important 
}
 .my-4 {
     margin-top: 1.5rem !important;
     margin-bottom: 1.5rem !important 
}
 .my-5 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important 
}
 .my-auto {
     margin-top: auto !important;
     margin-bottom: auto !important 
}
 .mx-0 {
     margin-left: 0 !important;
     margin-right: 0 !important 
}
 .mx-1 {
     margin-left: .25rem !important;
     margin-right: .25rem !important 
}
 .mx-2 {
     margin-left: .5rem !important;
     margin-right: .5rem !important 
}
 .mx-3 {
     margin-left: 1rem !important;
     margin-right: 1rem !important 
}
 .mx-4 {
     margin-left: 1.5rem !important;
     margin-right: 1.5rem !important 
}
 .mx-5 {
     margin-left: 3rem !important;
     margin-right: 3rem !important 
}
 .mx-auto {
     margin-left: auto !important;
     margin-right: auto !important 
}
 .mt-0 {
     margin-top: 0 !important 
}
 .mt-1 {
     margin-top: .25rem !important 
}
 .mt-2 {
     margin-top: .5rem !important 
}
 .mt-3 {
     margin-top: 1rem !important 
}
 .mt-4 {
     margin-top: 1.5rem !important 
}
 .mt-5 {
     margin-top: 3rem !important 
}
 .mt-auto {
     margin-top: auto !important 
}
 .mb-0 {
     margin-bottom: 0 !important 
}
 .mb-1 {
     margin-bottom: .25rem !important 
}
 .mb-2 {
     margin-bottom: .5rem !important 
}
 .mb-3 {
     margin-bottom: 1rem !important 
}
 .mb-4 {
     margin-bottom: 1.5rem !important 
}
 .mb-5 {
     margin-bottom: 3rem !important 
}
 .mb-auto {
     margin-bottom: auto !important 
}
 .ml-0 {
     margin-left: 0 !important 
}
 .ml-1 {
     margin-left: .25rem !important 
}
 .ml-2 {
     margin-left: .5rem !important 
}
 .ml-3 {
     margin-left: 1rem !important 
}
 .ml-4 {
     margin-left: 1.5rem !important 
}
 .ml-5 {
     margin-left: 3rem !important 
}
 .ml-auto {
     margin-left: auto !important 
}
 .mr-0 {
     margin-right: 0 !important 
}
 .mr-1 {
     margin-right: .25rem !important 
}
 .mr-2 {
     margin-right: .5rem !important 
}
 .mr-3 {
     margin-right: 1rem !important 
}
 .mr-4 {
     margin-right: 1.5rem !important 
}
 .mr-5 {
     margin-right: 3rem !important 
}
 .mr-auto {
     margin-right: auto !important 
}
 .text-left {
     text-align: left !important 
}
 .text-center {
     text-align: center !important 
}
 .text-right {
     text-align: right !important 
}
 .text-justify {
     text-align: justify !important 
}
 .text-wrap {
     white-space: normal !important 
}
 .text-nowrap {
     white-space: nowrap !important 
}
 .font-weight-normal {
     font-weight: 400 !important 
}
 .font-weight-bold {
     font-weight: 700 !important 
}
 .text-muted {
     color: #6c757d !important 
}
 .text-white {
     color: #fff !important 
}
 .text-dark {
     color: #22262a !important 
}
 .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px 
}
 .col {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100% 
}
 .col-auto {
     flex: 0 0 auto;
     width: auto !important;
     max-width: none 
}
 .col-1 {
     flex: 0 0 8.333333%;
     max-width: 8.333333% 
}
 .col-2 {
     flex: 0 0 16.666667%;
     max-width: 16.666667% 
}
 .col-3 {
     flex: 0 0 25%;
     max-width: 25% 
}
 .col-4 {
     flex: 0 0 33.333333%;
     max-width: 33.333333% 
}
 .col-5 {
     flex: 0 0 41.666667%;
     max-width: 41.666667% 
}
 .col-6 {
     flex: 0 0 50%;
     max-width: 50% 
}
 .col-7 {
     flex: 0 0 58.333333%;
     max-width: 58.333333% 
}
 .col-8 {
     flex: 0 0 66.666667%;
     max-width: 66.666667% 
}
 .col-9 {
     flex: 0 0 75%;
     max-width: 75% 
}
 .col-10 {
     flex: 0 0 83.333333%;
     max-width: 83.333333% 
}
 .col-11 {
     flex: 0 0 91.666667%;
     max-width: 91.666667% 
}
 .col-12 {
     flex: 0 0 100%;
     max-width: 100% 
}
 .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px 
}
 .list-group {
     display: flex;
     flex-direction: column;
     padding-left: 0;
     margin-bottom: 0;
     margin-top: 0;
     border: 0 
}
 .list-group-item {
     position: relative;
     display: block;
     padding: .75rem 1.25rem;
     padding-right: 0;
     color: #495057;
     text-decoration: none;
     background-color: #fff;
     border: 0 solid rgba(0, 0, 0, 0.125);
     max-width: fit-content 
}
 .list-group-flush:first-child .list-group-item:first-child {
     border-top-width: 0 
}
 .list-group-flush:last-child .list-group-item:last-child {
     border-bottom-width: 0 
}
 .btn {
     display: inline-block;
     font-weight: 400;
     color: #212529;
     text-align: center;
     vertical-align: middle;
     user-select: none;
     background-color: transparent;
     border: 0;
     padding: .375rem .75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: .25rem;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out 
}
 .btn:focus-visible {
     border: 2px solid blue 
}
 .btn:hover {
     color: #595959 
}
 .form-control {
     display: block;
     width: 100%;
     height: calc(1.5em + 0.75rem + 2px);
     padding: .375rem .75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: #495057;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out 
}
 .form-control:focus-visible {
     color: #495057;
     background-color: #fff;
     border: 2px solid blue;
     outline: 0;
     box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) 
}
 .btn-light:hover {
     color: #212529;
     background-color: #e2e6ea;
     border-color: #dae0e5 
}
 .form-control:disabled, .form-control[readonly] {
     background-color: #e9ecef;
     opacity: 1 
}
 .form-control-sm {
     height: calc(1.5em) !important;
     padding: .0rem .5rem !important;
     font-size: .875rem !important;
     line-height: 1.5 !important;
     border-radius: .2rem !important 
}
 .venueBtnLink {
     border-radius: 0.4rem !important;
}
 @media screen and (max-width: 767.98px){
     .venueBtnLink {
         border-radius: 0.4rem !important;
         height: calc(1.5em + 0.5rem) !important;
         padding-top:0.25rem!important;
         padding-bottom:0.25rem!important;
    }
}
 .form-control-small {
     height: 16px;
     width: 110px;
     padding: .25rem .5rem;
     font-size: .875rem;
     line-height: 1.5;
     border-radius: .1rem 
}
 .siteMapDesktop, .search-btn {
     font-size: 13px;
     padding-right: 5px;
     padding-left: 5px;
}
 .enquiryDesktop{
     font-size: 15px;
     padding-right: 5px;
     padding-left: 5px;
}
 .searchLabel{
     padding-right: 12px;
     font-size: 13px;
}
 .chinese{
     letter-spacing: 0.1em;
}
 .vertical-divider {
 	 height: 1rem;
     width: 1px;
     background-color: #4d4d4d 
}

.vertical-divider-mobile {
 	 height: 1rem;
     width: 2px;
     background-color: #4d4d4d 
}
 .justify-content-start {
     justify-content: flex-start !important 
}
 .justify-content-end {
     justify-content: flex-end !important 
}
 .justify-content-center {
     justify-content: center !important 
}
 .justify-content-between {
     justify-content: space-between !important 
}
 .align-items-start {
     align-items: flex-start !important 
}
 .align-items-end {
     align-items: flex-end !important 
}
 .align-items-center {
     align-items: center !important 
}
 .align-content-start {
     align-content: flex-start !important 
}
 .align-content-end {
     align-content: flex-end !important 
}
 .align-content-center {
     align-content: center !important 
}
 .align-content-between {
     align-content: space-between !important 
}
 .w-25 {
     width: 25% !important 
}
 .w-50 {
     width: 50% !important 
}
 .w-75 {
     width: 75% !important 
}
 .w-100 {
     width: 100% !important 
}
 .w-auto {
     width: auto !important 
}
 .h-25 {
     height: 25% !important 
}
 .h-50 {
     height: 50% !important 
}
 .h-75 {
     height: 75% !important 
}
 .h-85 {
     height: 85% !important 
}
 .h-100 {
     height: 100% !important 
}
 .h-auto {
     height: auto !important 
}
 /* h1, .h1 {
     font-size: 2.5rem;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 0.5rem;
}
 h2, .h2 {
     font-size: 2rem;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 0.5rem;
}
 h3, .h3 {
     font-size: 1.75rem;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 0.5rem;
}
 h4, .h4 {
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 0.5rem;
}
 h5, .h5 {
     font-size: 1.25rem;
     font-weight: 500;
     line-height: 1.2;
     margin-bottom: 0.5rem;
} */
 .rounded-pill {
     border-radius: 50rem !important 
}
 .card {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: #fff;
     background-clip: border-box;
     border: 1px solid rgba(0, 0, 0, 0.125);
     border-radius: 0.8em !important;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important */
}

     .card{
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    }
     .cardBtn:hover {
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6) !important;
         transform: translateY(-5px) 
    }

 .card-body {
     flex: 1 1 auto;
     padding: 1.25rem 
}
 .card-header {
     padding: .75rem 1.25rem;
     margin-bottom: 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.125) 
}
 .card-footer {
     padding-right: .5rem 
}
 .card-title {
     margin-bottom: .75rem;
     font-size: 1.9rem;
     line-height:1.2;
}
 .onlineTour-title{
     font-size: 1.4rem !important;
}
 .card-title.english{
     font-family: Arial;
     font-weight:bold;
}
 .card-title .chinese{
     letter-spacing:0.1em;
}
 .card-img-top {
     width: 100% 
}
 .right-angle-triangle {
     width: 0;
     height: 0;
     border-top: 20px solid transparent;
     border-right: 20px solid #fff;
     border-bottom: 20px solid transparent;
     transform: rotate(-135deg) 
}
 .right-angle-triangle-small {
     width: 0;
     height: 0;
     border-top: 15px solid transparent;
     border-right: 15px solid #fff;
     border-bottom: 15px solid transparent;
     transform: rotate(-135deg) 
}
 .rotated-icon {
     transform: rotate(45deg);
     font-size: 2em 
}
 .d-none {
     display: none !important 
}
 .d-flex {
     display: flex !important 
}
 .d-block {
     display: block !important 
}
 .flex-row {
     flex-direction: row !important 
}
 .flex-row-reverse {
     flex-direction: row-reverse !important 
}
 .flex-column {
     flex-direction: column !important 
}
 .flex-column-reverse {
     flex-direction: column-reverse !important 
}
 .flex-wrap {
     flex-wrap: wrap !important 
}
 .flex-nowrap {
     flex-wrap: nowrap !important 
}
 .navbar {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     padding: .5rem 1rem 
}
 .navbar .container, .navbar .container-fluid, .navbar .container-lg, .navbar .container-md, .navbar .container-sm, .navbar .container-xl {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: justify;
     justify-content: space-between 
}

.form-navbar-container{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}

 .form-navbar-container .navPic-container
  {
   	max-width:200px;
  }
  
  .form-navbar-container .navbar-toggler
  {
  	 border-color:white;
  }
  
  .form-navbar-container .navbar-toggler-icon
  {
  	 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  
  .form-navbar-container .nav-link
  {
  	color:white !important;
  }

 .navbar-expand {
     flex-wrap: nowrap;
     justify-content: flex-start 
}
 .navbar-brand {
     display: inline-block;
     font-size: 1.25rem;
     line-height: inherit;
     white-space: nowrap;
     display:flex;
     align-items:center; 
}
 .navbar-toggler {
     padding: .25rem .75rem;
     font-size: 1.25rem;
     line-height: 1;
     background-color: transparent;
     border: 1px solid transparent;
     border-radius: .25rem;
     color: rgba(0, 0, 0, .5);
     border-color: rgba(0, 0, 0, .1) 
}
 .navbar-toggler:hover, .navbar-toggler:focus-visible {
     text-decoration: none;
     outline: 2px auto -webkit-focus-ring-color 
}
 .navbar-toggler-icon {
     display: inline-block;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
     background: no-repeat;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") 
}
 .focuss:focus-visible {
     border: 2px solid blue 
}
 .collapse.show {
     display: block 
}
 .navbar-collapse {
     flex-basis: 100%;
     flex-grow: 1;
     align-items: center;
     max-height: 0;
     overflow: hidden;
     transition: max-height .5s ease-out; 
     min-width: 343px;
}
 .nav-item {
     position: relative;
     display: list-item 
}
 .navbar-nav .nav-item {
     margin-right: 1rem 
}
 .nav-link {
     display: block;
     padding: 0 1rem;
     color: #4d4d4d !important;
     text-decoration: none 
}
 .nav-link:hover {
     text-decoration: none;
     color: #333 !important 
}

.form-navbar-container .nav-link:hover {
     text-decoration: none;
     color: #f2f2f2 !important 
}
 .nav-link:focus-visible {
     border: 2px solid blue 
}
 .nav-link.disabled {
     color: #6c757d;
     pointer-events: none;
     cursor: default 
}
 

.navLink:focus-visible{
	border: 2px solid blue
}

.titlePic:focus-visible {
     border: 2px solid blue
}
 .currentTime, .yourLoginTime {
     line-height: unset 
}
 .time {
     line-height: unset !important;
     color: #E60000 ;
 }

.Time, .time-white
{
	color:white;	
}

.Time.container-fluid{
	height:73px;
	justify-content: unset!important;
}

.time-desktop{
	height:61px;
	align-items: end;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.currentTime, .yourLoginTime
{
	padding-right:0.3rem;
}

.time-white
{
	line-height: unset !important;
}
 .red {
     color: #eb0000 !important 
}
 .flex-grow-1 {
     flex-grow: 1 !important 
}
 .flex-fill {
     flex: 1 1 auto !important 
}
 .form-control {
     display: block;
     width: 100%;
     height: calc(1em + 0.25rem + 2px);
     padding: .375rem .75rem;
     font-size: 1rem;
     line-height: 1.5;
     color: #495057;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out 
}
 .form-control:focus-visible {
     color: #495057;
     background-color: #fff;
     border-color: #80bdff;
     outline: 0;
     box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) 
}
 @media ( min-width : 767.98px) {
     .navbar-expand-md {
         flex-flow: row nowrap;
         justify-content: flex-start 
    }
 
     .navbar-expand-md .navbar-toggler {
         display: none 
    }
}
 @media ( max-width : 767.98px) {
    
    .left-container {    
        z-index: 2;      
    }
    
    .navbar-brand{
    	height:50px;
    }
    
    .form-navbar-container .navbar-brand
    {
    	height:unset!important;
    }
    
     .navbar-collapse {                
         position: fixed;
         top: 72px; /* This ensures it starts right below the header */
         left: 0;
         right: 0;
         overflow-y: auto;
         background-image: url(images/bkgdtexture.gif);
                           
    }
    
    .form-navbar-container .navbar-collapse{
    	background-image: unset !important;
    	background-color: #218383 !important;
    	border-bottom: 0 !important;
    	position: relative !important;
    	top: unset;
        left: unset;
        right: unset;
    }
    
    .navbar.sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1040;
    }
    
    .navbar.sticky.transparent {
        background-image: url(images/bkgdtexture.gif);
        background-color: rgba(255, 255, 255, 0.95);
    }
    
   

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
    
     .navbar-collapse.show {
         max-height: calc(100vh - 78px);
         border-bottom: 2px solid #b30000; 
    }
    
    .navbar-collapse::-webkit-scrollbar {
         width: 6px;
    }
    .navbar-collapse::-webkit-scrollbar-thumb {
         background-color: rgba(0,0,0,0.2);
         border-radius: 3px;
    }
    
     .navbar-nav {
         flex-direction: column;
         align-items: flex-start;
         display: flex;
         flex-direction: column;
         padding-left: 0;
         list-style: none 
    }
     .nav-item {
         margin: .5rem 0 
    }
     .enqTr {
         font-size: 16pt !important;
         border-radius: 0.2em;
         
    }
     .venueListBtn{
         font-size: 16pt !important;
    }
}

@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}

 

 @media ( min-width : 767.98px) {
     .col-md-1 {
         flex: 0 0 8.333333%;
         max-width: 8.333333% 
    }
     .col-md-2 {
         flex: 0 0 16.666667%;
         max-width: 16.666667% 
    }
     .col-md-3 {
         flex: 0 0 25%;
         max-width: 25% 
    }
     .col-md-4 {
         flex: 0 0 33.333333%;
         max-width: 33.333333% 
    }
     .col-md-5 {
         flex: 0 0 41.666667%;
         max-width: 41.666667% 
    }
     .col-md-6 {
         flex: 0 0 50%;
         max-width: 50% 
    }
     .col-md-7 {
         flex: 0 0 58.333333%;
         max-width: 58.333333% 
    }
     .col-md-8 {
         flex: 0 0 66.666667%;
         max-width: 66.666667% 
    }
     .col-md-9 {
         flex: 0 0 75%;
         max-width: 75% 
    }
     .col-md-10 {
         flex: 0 0 83.333333%;
         max-width: 83.333333% 
    }
     .col-md-11 {
         flex: 0 0 91.666667%;
         max-width: 91.666667% 
    }
     .col-md-12 {
         flex: 0 0 100%;
         max-width: 100% 
    }
     .d-md-none {
         display: none !important 
    }
     .d-md-block {
         display: block !important 
    }
     .d-md-flex {
         display: flex !important 
    }
}


@media ( min-width : 960px) {
     .col-lg-6 {
         flex: 0 0 50%;
         max-width: 50% 
    }
    
    .col-lg-3 {
	    flex: 0 0 auto;
	    width: 25%;
	    max-width: 25%;
	  }
}

 @media ( min-width : 900px) {
     .d-custom-none {
         display: none !important 
    }
     .d-custom-flex {
         display: flex !important 
    }
     .navbar-container {
         padding-left: 0 !important;
         padding-right: 0 !important 
    }
}
 @media ( max-width : 900px) {
     .navbar-container {
         padding-left: 0 !important;
         padding-right: 0 !important 
    }
}
 .custom-popover {
     position: absolute;
     background-color: rgb(255, 255, 240);
     border: 2px solid #cccccc;
     border-radius: .6rem;
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
     padding: .5rem;
     max-width: 500px;
     z-index: 1000;
     display: none;
     transition: opacity .3s ease;
     opacity: 0;
     pointer-events: auto 
}
 .custom-popover .popover-header {
     font-weight: 700;
     margin-bottom: .5rem 
}
 .custom-popover::after {
     content: '';
     position: absolute;
     border-style: solid;
     width: 0;
     height: 0 
}
 .custom-popover.show {
     display: block;
     opacity: 1 
}
 .custom-popover.show[data-placement="right"]::after {
     top: 50%;
     left: -10px;
     border-width: 8px 10px 8px 0;
     border-color: transparent #fff transparent transparent;
     transform: translateY(-50%) 
}
 .custom-popover.show[data-placement="left"]::after {
     top: 50%;
     right: -10px;
     border-width: 8px 0 8px 10px;
     border-color: transparent transparent transparent #fff;
     transform: translateY(-50%) 
}
 .custom-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     transition: opacity .3s ease;
     opacity: 0 
}
 .custom-modal-overlay.show {
     display: flex;
     opacity: 1 
}
 .custom-modal {
     background-color: #fff;
     border-radius: .3rem;
     max-width: 500px;
     width: 95%;
     box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
     position: relative;
     animation: fadeIn .3s 
}
 to {
     transform: translateY(0);
     opacity: 1 
}
 .custom-modal-header {
     padding: 1rem;
     border-bottom: 1px solid #dee2e6;
     display: flex;
     justify-content: space-between;
     align-items: center 
}
 .custom-modal-title {
     margin: 0;
     font-size: 1.25rem;
     color: rgba(0, 0, 0, 0.8) !important 
}
 .custom-modal-title:hover {
     text-decoration: underline;
     cursor: pointer;
     font-size: 1.25rem 
}
 .custom-modal-close {
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer 
}
 .custom-modal-close:focus-visible {
     border: 2px solid blue 
}
 .custom-modal-btn:focus-visible {
     border: 2px solid blue !important 
}
 
 .surveyImg:hover {
     cursor: pointer 
}
 .surveyImg:focus-visible {
     border: 2px solid blue 
}
 .custom-modal-body {
     padding: 1rem;
     overflow-y: auto;
     max-height: calc(100vh - 100px) 
}
 .custom-modal-footer {
     padding: 1rem;
     border-top: 1px solid #dee2e6;
     display: flex;
     justify-content: flex-end 
}
 .custom-modal-btn {
     padding: .5rem 1rem;
     border: none;
     border-radius: .25rem;
     cursor: pointer;
     margin-left: .5rem 
}
 .custom-modal-btn.primary {
     background-color: #007bff;
     color: #fff 
}
 .custom-modal-btn.secondary {
     background-color: #6c757d;
     color: #fff 
}
 .cardBtn {
     cursor: pointer 
}

.btn-info, .btn-info-hiring{
	padding-left:0.5rem;
}


 .btn-info:before {
    content: "";
    display: flex;
    width: 15px;
    height:15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-caret-right-fill' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

.btn-info-hiring:before {
    content: "";
    display: flex;
    width: 15px;
    height:15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-caret-right-fill' viewBox='0 0 16 16'%3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
}

.btn-info:hover, .btn-info-hiring:hover {
    filter: brightness(80%);
}
 .btn-info:focus-visible, .btn-info-hiring:focus-visible {
     border: 2px solid blue 
}
 .collapse-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height .3s ease-out 
}
 .collapse-content.expanded {
     max-height: 500px;
     transition: max-height .5s ease-in
}
 .modal-content {
     background-color: #fcebe0 
}
 .webForAll {
     height: 30px 
}
 @media screen and (max-width:767.98px) {
     .link-item-last {
         justify-content: start !important 
    }
}
 @media screen and (max-width: 767.98px) {
     .navPic {
         height: 39px !important;        
         padding-left: 10px 
    }
     .paymentCard {
         min-height: 120px 
    }
     .regionLabel {
         font-size: 15pt;
         font-weight: 700 !important;
         text-align:center !important;
    }
     .regionLabel::before, .venuelabel::before {
         display:none;
    }
     .map-card {
         border: none;
         min-height: 450px;
    }
     .venuelabel {
         font-size: 15pt;
         font-weight: 700;
         text-align:center !important;
    }
    
     #venueModal {
         padding-right: 0 !important;
         border-radius: 0 
    }
     .modal-content {
         height: auto;
         width: 100%;
         bottom: 0;
         overflow-y: auto 
    }
     .modal-dialog {
         margin: 0;
         max-width: 767.98px !important;
         width: 100%;
         overflow-y: auto;
         justify-content: end 
    }
     #venueModal .modal-dialog-scrollable {
         max-height: 1500px !important 
    }
}
 .parallelogram-buttons {
     display: inline-flex;
     overflow: hidden;
     height: 30px;
     clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
     background-color: #666 
}
 .parallelogram-1 {
     background-color: #666 
}
 .parallelogram-2 {
     background-color: blue;
     position: relative;
     left: 50% 
}
 .parallelogram-buttons .btn {
     color: #fff;
     font-weight: 700;
     cursor: pointer;
     z-index: 1;
     transition: opacity .3s 
}
 .parallelogram-buttons .btn:hover {
     opacity: .8 
}
 .navPic-container, .right-container {
     display: flex;
     flex-direction: column;
    
     
     
}
 .navPic-container {
     max-width: 330px;
     
}
 .navbar-brand {
     align-self: flex-start 
}
 .navbar-brand:focus-visible {
     border: 2px solid blue 
}
 .navPic {
     height: 54px 
}

.form-navPic{
	height:110px;
}

@media screen and (max-width: 767.98px) {
    .form-navPic {
        height: 80px !important;
        margin-top: 5px;
        margin-left: 5px;
    }
}

.form-icon
{
	background-image:url(./images/PVIBookingServices_icon.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: 0;
    height:110px;
    width:1000px;
	
}

 .brandHKPic {
     height: 50px 
}
 .gov-buttons {
     margin: 10px 0 0;
     align-self: flex-start;
     height: 20px;
     width: 100%;
     display: flex 
}
 .lang-btn, .gov-btn {
     height: 100%;
     display: flex;
     align-items: center;
     padding: 0 5px;
     cursor: pointer;
     border-radius: 0;
     font-size: 13px;
     transition: color .3s 
}
 .lang-btn {
     background-color: #757575;
     color: #fff;
     margin-left: -20px;
     clip-path: polygon(0% 0%, 89% 0%, 100% 100%, 11% 100%);
     width: 47% 
}
 .lang-btn .btn {
     /* font-weight: 550; */
     font-size: 13px;
     white-space: nowrap;
}
 .gov-btn {
     background-color: #b30000;
     color: #f2f2f2;
     clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
     width: 53% 
}
 .lang-btn .btn:hover, .gov-btn:hover {
     color: #e6e6e6 !important 
}
 .lang-btn .btn:focus-visible, .gov-btn:focus-visible {
     border: 2px solid blue !important 
}
  

 #form {
     text-align: center;
     position: relative;
     margin-top: 20px 
}
 .searchbar .form-control {
     padding-left: 35px 
}
 .searchbar .search-icon {
     border: 0;
     position: absolute;
     display: inline-flex 
}

.search-icon:focus-visible{
	outline: 2px solid blue;
}

.searchBox {
    position: relative;
}

.search-icon {
	position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    cursor: pointer;
    color: #4d4d4d;
}
 .progressbar {
     display: flex;
     flex-direction: row;
     position: relative;
     width: 100%;
     overflow: hidden;
     padding: 0;
     list-style: none 
}
 .progressbar div.hide, .progressbar div.active{
     line-height: 1.15;
     float: left;
     position: relative;
     font-size: 15px;
     font-weight: 400;
     height: 40px;
     flex: 1;
    /* Distribute space evenly */
     width: 100%;
     background: linear-gradient(to bottom, #ccc 0%, #a6a6a6 50%, #ccc 100%);
     clip-path: polygon( 0% 0%, 87.5% 0%, 100% 50%, 87.5% 100%, 0% 100%, 0% 100%, 12.5% 50%, 0% 0% );
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: -15px;
    /* Adjust for overlapping */
     z-index: 1;
    /* Ensure proper stacking */
     padding: 0 15px 0 15px;
     justify-content:center;
}
  /*  .progressbar div:before {
     content: attr(data-step-number);
     font-size: 24px;
     font-weight: 700;
     transform: translateY(100%);
     padding-right:5px;
     display: flex;
     align-items: center;
     position: relative;
     font-family: 'Zapfino';
     padding-right: 15px;
}   */

.progressbar div svg {
    height: 42.5px;
    width: 42.5px;
    min-width: 42.5px;  /* Prevent width shrinking */
    min-height: 42.5px; /* Prevent height shrinking */
    flex-shrink: 0;     /* Prevent flex shrinking */
    
}
.sr-only{
	z-index:-100;
}

.progressbar div.hide svg {
    filter: brightness(25%);
    font-weight: 100;
    
}

 .progressbar div.active {
     background: #e6005c;
     color: #fff 
}
 .progressbar div:first-child {
     clip-path: polygon(0 0, 87.5% 0%, 100% 50%, 87.5% 100%, 0 100%, 0% 50%);
     margin-left: 0;
    /* No negative margin for the first arrow */
     z-index: 2;
    /* Higher z-index to be on top */
     padding: 0 15px 0 10px;
}
 .progressbar div:last-child {
     clip-path: polygon( 50% 0%, 
    /* Top-left */
     87.5% 0%, 
    /* Start of arrow shaft */
     100% 0%, 
    /* Top-right (flat edge begins) */
     100% 100%, 
    /* Bottom-right (flat edge ends) */
     87.5% 100%, 
    /* End of arrow shaft */
     0% 100%, 
    /* Bottom-left */
     12.5% 50%, 
    /* Indentation point */
     0% 0% 
    /* Close the shape */
     );
     z-index: 1;
    /* Lower z-index to stay below other arrows */
     padding: 0 10px 0 25px;
}
 .progress {
     height: 20px 
}
 .progress-bar {
     background-color: #2F8D46 
}
 .progressMobile {
     width: 100%;
     display: none;
     align-items: center;
     text-align: center;
     justify-content: center 
}
 .progress-ring {
     transform: translate(110px, 5px);
     height: 100px;
     position: center 
}
 .progress-ring circle {
     fill: none;
     stroke-width: 10;
     transition: stroke-dasharray .4s 
}
 .progress-ring .ring-bg {
     stroke: #eee 
}
 .progress-ring .ring-progress {
     stroke: #e6005c 
}
 .progress-number {
     font-size: 20px;
     font-weight: 700 !important;
     transform: translate(-105px, -120px) 
}
 .progress-text {
     margin-left: 20px 
}
 .current-step {
     font-size: 20px;
     font-weight: 700 
}
 .next-step {
     font-size: 16px;
     color: #666 
}
 .progressContainer {
     display: none;
     width:100%; 
}
 @media screen and (min-width: 767.98px) {
     .navbar-expand-md .desktop {
         display: none !important 
    }
     .navbar-container, .form-navbar-container {
         flex-wrap: nowrap !important 
    }
}
 @media ( min-resolution : 2.5dppx) and (pointer: fine) {
     .left-container {
         margin: 0 !important 
    }
     .lang-btn .btn, .gov-btn {
         white-space: nowrap 
    }
     .gov-buttons {
         margin: 0 !important 
    }
     .right-element-mobile {
         display: none !important 
    }
}
 /* @media (hover: none) and (pointer: coarse) {
     .progressbar div:before {
         top: 10px;
    }
} */
 @media screen and (max-width: 799.98px) {
     .progress-container .progress-ring .progress-number {
         font-size: 20px !important 
    }
     .current-step {
         font-size: 20px !important 
    }
     .hide {
         display: none !important 
    }
     .progressbar div.active {
         width: 100% !important;
         clip-path: polygon(16% 0, 80% 0, 85% 50%, 100% 50%, 100% 50%, 85% 50%, 80% 100%, 16% 100%, 21% 50%, 0 50%, 0 50%, 21% 50%);
         text-align: center !important 
    }
     /* .progressbar div.active:first-child {
         clip-path: polygon(16% 0,80% 0,85% 48%,100% 48%,100% 52%,85% 52%,80% 100%,16% 100%,21% 52%,21% 48%);
    }
     .progressbar div.active:last-child {
         clip-path: polygon(16% 0, 80% 0, 85% 50%, 100% 50%, 85% 50%, 80% 100%, 16% 100%, 21% 52%, 0 52%, 0 48%, 21% 48%) 
    } */
     .header-window{
         margin: 0;
    }
}
 @media screen and (max-width: 420px) {
     .navPic-container {
         max-width: 300px 
    }
     .gov-btn{
         width:56%;
    }
     .lang-btn{
         padding-left: 9px!important;
    }
    
    
}
 @media screen and (max-width: 395px) {
     .navPic-container {
         max-width: 275px 
    }
     .gov-btn{
         width:58%;
    }
     .navPic{
         height: 37.5px!important;
    }
     .lang-btn{
         padding-left: 5px!important;
    }
    
 
}
 @media screen and (max-width: 368px) {
     .navPic-container {
         max-width: 265px 
    }
     .gov-btn{
         width:60%;
    }
     .navPic{
         height: 35px!important;
    }
     .lang-btn{
         padding-left: 3px!important;
    }
    
    
}
 .slider-controls {
     position: absolute;
     bottom: 10px;
     right: 10px;
     display: flex;
     gap: 5px;
     z-index: 0.5;
}
 .slider-controls button, .news-header-row button {
     background-color: rgba(0, 0, 0, 1.5);
     color: white;
     border: none;
     padding: 6px 8px;
     cursor: pointer;
     border-radius: 4px;
     transition: background-color 0.3s;
     font-weight:bold;
     font-size:15px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .slider-controls button:hover, .news-header-row button:hover {
     background-color: rgba(0, 0, 0, 0.8);
}
 .slider-controls button:focus-visible, .news-header-row button:focus-visible {
     outline: 2px solid #fff;
     outline-offset: 2px;
}

.PreviousImage {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

.Pause {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}


.Pause.paused{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.NextImage {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
 
 .searchBar {
     position: relative;
     z-index: 500;
}
 .leaflet-pane.leaflet-map-pane{
     z-index:1;
}
 .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-tooltip-pane {
     z-index: 600;
    /* Higher than map, lower than header */
}
/* Ensure the marker shadow stays with the marker */
 .leaflet-shadow-pane {
     z-index: 599;
    /* Just below markers */
}
/* Keep the overlay image below markers but above base map */
 .leaflet-overlay-pane {
     z-index: 400;
}

.z-listheader-checkable:focus-visible, .z-listitem-checkable:focus-visible{
	border:2px solid blue;
	
}

.subpage-title{
	font-size:2.8rem;
}

.reminder-container{
	margin-left: auto !important;
    margin-right: auto !important;
    max-width: 990px;
}