/* Your app custom files in this file */
/*
* :not(input,textarea){		// this line have problem in ios 8
*/
* {
	-moz-user-select: none;        
	-webkit-user-select: none;        
	user-select: none;
}

.page[data-name="changelog"] ul{
	padding-left: 20px;
}

.page[data-name="changelog"] li{
	list-style-type: circle;
}

body{
    padding-top: constant(safe-area-inset-top);
    /*padding-right: constant(safe-area-inset-right);*/
    padding-bottom: constant(safe-area-inset-bottom);
    /*padding-left: constant(safe-area-inset-left);*/
    padding-top: env(safe-area-inset-top);
    /*padding-right: env(safe-area-inset-right);*/
    padding-bottom: env(safe-area-inset-bottom);
    /*padding-left: env(safe-area-inset-left);*/
	
	height: calc( 100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	height: calc( 100% - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
}

input,textarea{
	-moz-user-select: auto;        
	-webkit-user-select: auto;        
	user-select: auto;
}

/*
input[readonly] {
	-moz-user-select: none;        
	-webkit-user-select: none;        
	user-select: none;
}
*/

.clear-btn {
	position: absolute;
	width: 28px;
	height: 28px;
	right: 0;
	top: 50%;
	margin-top:-15px;
	opacity: 0;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%238e8e93'%2F%3E%3Cline%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E");
	-webkit-background-size: 14px 14px;
	background-size: 14px 14px;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	cursor: pointer;
}

.clear-btn.enabled {
	opacity: 1;
	pointer-events: auto;
}

/* override with !important, applied in yp bookmark*/
.theme-dark .item-inner:after, .theme-dark .list ul ul li:last-child .item-inner:after {
    background-color: #393939!important;
}

.coming-soon {
	display: none!important;
}

.statusbar-overlay {
    background: #f7f7f8;
}

.autocomplete-dropdown .item-inner {
	padding-right: 10px!important;
}

.theme-dark .statusbar-overlay {
    background: #131313;
}

/* prevent black flash at startup*/
.pages {
	background: white;
}

.navbar.dummy{
	background: none;
}
.navbar.dummy:after {
	content: none;
}
.modal-overlay.dummy{
	display:none;
}

.view-left {
	border-right: 1px solid #b2b2b2;
}

a.external.noeffect{
	border-bottom: 1px dotted #007aff !important;
	margin-right: 2px;
}

a.external.noeffect::after {
	content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADESURBVHjajNGhToJhFMbx3/d9L5tjc5gZ1eIsJIOX4XAaiBq0kM3cgjN4BWwEgxoJRMgWmxegMzkZIpSX8c59gP909ux5zjk7J3MzH+MAO1a8o44W7jGJ+kdAEyMMksAXCvRxjOuoVwJyPKOrnJ+kngbM/6yTcosr9PCJy2A9S/MD2phiWBYocIeLaD6L5iqe8jXd9/CI8+RCHbyVTZjhtETfRS33f2b4zZElYzcxQRbinU/Q2BI4Wv7hBfs43BL4xutiAOxuJ6GffH8eAAAAAElFTkSuQmCC');
	padding-left: 4px;
}

/* This will fix flicker navbar in left panel view */
/* not required in 1.5.4
.panel-left .page-content {
	padding: 0;
}

.panel-left .page {
	margin-top: 44px;
	padding-bottom: 44px;
}

.panel-left .navbar {
	position: relative;
	margin-bottom: -44px;
}
*/
/* Because we have panels-overlay inside of .views we need to fix its open position for right panel */
/* not required in 1.5.4
body.with-panel-right-reveal .panel-overlay {
	margin-left: 0;
}
*/
.clear { clear: both; }

.about-logo {
	background-image: url(../img/hksglogo.png);
	width: 283px;
	height: 60px;
	/*
	width: 200px;
	height: 42px;
	*/
	background-size: cover;
	background-repeat: no-repeat;
}

.popup-credits .page{
	background-color: #222426;
	color: #ddd;
}

.credits-content {
	position: absolute;
	top: 100%;
	/*width: 100%;*/
	padding: 0 20px;
	font-family: 'Open Sans Condensed', sans-serif;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
}

.credits-content .title {
  margin-bottom: 50px;
  font-size: 50px;
}

.credits-content .job {
  margin-bottom: 5px;
  font-size: 18px;
}

.credits-content .name {
  margin-bottom: 50px;
  font-size: 35px;
}

@-webkit-keyframes credits {
    0% { top:  100%; }
  100% { top: -2750px; }
}

@keyframes credits {
    0% { top:  100%; }
  100% { top: -2750px; }
}

.news-card-thumb {
	width:120px;
	float:left;
	margin-right:15px;

	height: 72px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.news-list-thumb {
	width:70px;
}

a.item-link {
	height: 100%;
}

.news-card-intro {
	font-size: 14px;
	/*
	color: #8e8e93;
	*/
	line-height: 21px;
	position: relative;
	overflow: hidden;
	max-height: 63px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.left-swipeout-handler {
	/*
    width: 15px;
    margin-left: -5px;

    align-content: center;
    justify-content: center;
    flex-direction: column;

    display: flex;
    height: 100%;
	*/
	width: 15px;
	margin-left: -15px;
	display: inline-block;
	height: 100%;
	text-align: center;	
}

.right-swipeout-handler {
    width: 15px;
	/*margin-right: -5px;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    display: flex;
	*/
	display: inline-block;
	text-align: center;
    height: 100%;
	right: 0;
}

.right-swipeout-handler .f7-icons {
	width: auto!important;
	color: gray;
}

.card-footer .right-swipeout-handler {
	margin-right: -15px;
	margin-left: 5px;
}

.port-schedule.right-swipeout-handler {
	position: absolute;
    top: calc( 50% - 15px);
}

.flight-schedule-weekday-extra-text {
	display: none;
}

.flight-schedule.right-swipeout-handler {
	position: absolute;
    top: calc( 50% - 15px);
}

.flight-schedule-list-item {
	font-size: 14px;
	border-left: 4px solid transparent;
	padding-left: 6px;
    margin-left: -10px;
	height: 95px;
}

.flight-schedule-list-item.saved {
	border-left: 4px solid #8bc34a;
}

.flight-schedule-item-link {
	padding: 10px 0px 10px 15px;
	margin: -10px 0px -10px -15px;
}

.flight-schedule .chip {
	min-width: 36px;
	width: 90%;
	opacity: 0.2;
	background: transparent;
	border: solid 1px gray;
	padding: 0 4px 0;
}

.theme-dark .flight-schedule .chip {
	/*background-color: rgba( 255, 255, 255, 0.4)!important;*/
	background: transparent;
}

.flight-schedule .chip.on {
	opacity: 1;
	/*background-color: #4cd964!important;*/
	border: solid 1px #4cd964;
}

.flight-schedule .chip.on .chip-label{
	color: #4cd964;
}

.flight-schedule .chip-label {
	margin-left: auto;
	margin-right: auto;
	/*color: white!important;*/
	color: gray;
}

.flight-list-icon:before {
	-webkit-transform: rotate( 90deg);
	transform: rotate( 90deg);
	margin-right: 5px;
	margin-left: -3px;
}

.flight-calendar-container {
	position: relative;
	line-height: 30px;
	margin-bottom: -10px;
	display: inline-flex;
}

.flight-calendar-text {
	position: absolute;
	top: 2px;
	width: 36px;
	text-align: center;
	font-weight: bold;
	color: gray;
}

.flight-schedule-list-date-row {
	/*
	border-bottom: 0.5px solid lightgray;
	padding-bottom:2px;
	*/
}

.flight-schedule-list-etd-eta {
	font-size: 17px;
	text-transform: uppercase;
	font-weight: bold;
}

.flight-schedule-list-port {
	font-size: 14px;
	font-weight: normal;
	color: black!important;
}

.theme-dark .flight-schedule-list-port {
	color: white!important;
}

.swipeout-actions-right {
	font-size: 14px;
	text-align: center;
}

.swipeout-actions-right div{
	line-height: 14px;
}

.swipeout-actions-left {
	font-size: 14px;
	text-align: center;
}

.swipeout-actions-left div{
	line-height: 14px;
}

/* override original toast css */
.toast-content {
	/*
	padding: 0 15px 15px!important;
	width: auto;
	*/
	min-width: 100px;
	/*
	max-width: 150px;
	font-size: 17px;
	*/
}
/*
.toast-icon {
	font-size: 40px;
}

.toast-icon .material-icons {
    font-size: 40px;
    top: 10px;
    position: relative;
}
*/
/* end toast override */

.size-12 {
	font-size: 12px!important;
}

.size-14 {
	font-size: 14px!important;
}

.size-15 {
	font-size: 15px!important;
}

.size-17 {
	font-size: 17px!important;
}

.nowrap {
	white-space: nowrap;
}

.hairline-top:before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: #c8c7cc;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.hairline-bottom:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	right: auto;
	top: auto;
	height: 1px;
	width: 100%;
	background-color: #c8c7cc;
	display: block;
	z-index: 15;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.swipeout-card-footer {
	padding-left: 0!important;
	font-size: 14px;
}

.searchbar {
	overflow: visible;
	z-index: 200;
}

.subnavbar {
	z-index: 120;		/* prevent searchbar overlay covering it */
}

.searchbar-advanced-div {
	z-index: 200;
	width: 100%;
	position: absolute;
	top: 44px;
	left: 0;
	background: whitesmoke;
}

.news-advanced-div {
	z-index: 200;
	width: 100%;
	position: absolute;
	top: 44px;
	left: 0;
	background: whitesmoke;
}

.news-advanced-div input[type=text]{
	height: 44px!important;
	padding: 0!important;
	background: 0 0!important;
}

.home-menu-icon-slide {
	width: 80px;
	text-align: center;
	background: white;
	margin: 10px;
	padding: 10px;
}

.margin-top-0 {
	margin-top: 0!important;
}

.margin-top-5 {
	margin-top: 5px!important;
}

.margin-top-10 {
	margin-top: 10px!important;
}

.margin-top-20 {
	margin-top: 20px!important;
}

.margin-bottom-0 {
	margin-bottom: 0!important;
}

.margin-bottom-5 {
	margin-bottom: 5px!important;
}

.margin-bottom-10 {
	margin-bottom: 10px!important;
}

.margin-bottom-20 {
	margin-bottom: 20px!important;
}

.padding-top-44 {
	padding-top: 44px!important;
}
/*
.margin-top-bottom-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.margin-top-0-bottom-10 {
	margin-top: 0;
	margin-bottom: 10px;
}

.margin-top-0-bottom-0 {
	margin-top: 0;
	margin-bottom: 0;
}
*/
.h-flip {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.v-flip {
	-moz-transform: scale(1, -1);
	-webkit-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	transform: scale(1, -1);
}

.perfreight-match-icon {
	/* Safari */
	-webkit-transform: rotate(-15deg) scale(-0.5, 0.5);
	/* Firefox */
	-moz-transform: rotate(-15deg) scale(-0.5, 0.5);
	/* IE */
	-ms-transform: rotate(-15deg) scale(-0.5, 0.5);
	/* Opera */
	-o-transform: rotate(-15deg) scale(-0.5, 0.5);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	transform: rotate(-15deg) scale(-0.5, 0.5);
	margin-left: -8px;
	margin-right: -8px;
	padding-top: 2px;
	/*margin-top: 2px;*/
	width: 29px;
}

.perfreight-match-home-icon {
	/* Safari */
	-webkit-transform: rotate(-15deg) scale(-0.4, 0.4);
	/* Firefox */
	-moz-transform: rotate(-15deg) scale(-0.4, 0.4);
	/* IE */
	-ms-transform: rotate(-15deg) scale(-0.4, 0.4);
	/* Opera */
	-o-transform: rotate(-15deg) scale(-0.4, 0.4);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	transform: rotate(-15deg) scale(-0.4, 0.4);
	margin-left: -6px;
	margin-right: -6px;
	padding-top: 2px;
	line-height: 12px;
	display: inline-block!important;
}

body .home-menu-swiper {
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
    background: white;
	box-shadow: 0px 2px 2px -2px #888888;
}

.home-swiper-slide {
	width: 75px;
	height: 70px;
	text-align: center;
	/*margin: 10px 5px 0px 5px;*/
	margin: 0;
	/*padding: 0 10px 0;*/
	font-size: 12px;
    align-items: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.home-swiper-slide a{
	display: inline-block;
	padding: 5px 10px;
	margin: -5px -10px;
}

.home-swiper-slider-text {
	color: gray;
	height: 30px;
	min-width: 48px;
	display: -webkit-flex;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-direction: column;
}

.home-trending-swiper  .material-icons {
	background-color: white;
	border-radius: 23px;
	padding: 5px;
	margin-bottom: 3px;
}

.home-trending-swiper  .home-swiper-slide {
	height: auto;
}

.home-menu-swiper-placeholder {
	height: 80px;
}

/*.no-navbar-by-scroll .home-menu-swiper {*/
.navbar-hidden .home-menu-swiper {
	-webkit-transform: translate3d(0,-40px,0);
	transform: translate3d(0,-40px,0);
	-webkit-transition-duration: .4s;
	transition-duration: .4s;
}

/*.with-subnavbar .home-menu-swiper {*/
.navbar:not(.navbar-hidde) .home-menu-swiper {
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}

.list .item-content a.item-link {
	width: 100%;
}

.home-img-headline-wrapper {
	width: 100%;
	background-color: white;
	margin: 0 0 10px;
}

.home-img-headline  {
	position: relative;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	min-height: 200px;	/* prevent headline do not display when no image */
}

.home-img-headline  a > img {
	width: 100%;
	display: block;
}

.home-img-headline-img {
	width:100%;
	height: 60vw;
	max-height: 360px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.home-img-headline .news-date {
	color: lightgray;
}

.home-img-headline-text-wrapper  > a {
	color: white;
}

.home-img-headline-text-wrapper {
	background-color: rgba(0,0,0,0.5);
	/*padding: 30px 20px 50px;*/
	color: white;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.home-img-headline-text {
	padding: 10px 15px 50px;
}

.home-img-headline-text .item-text {
	font-size: 16px;
	/*
	color: #8e8e93;
	*/
	line-height: 21px;
	position: relative;
	overflow: hidden;
	max-height: 42px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.type-article .card-footer {
    -webkit-justify-content: space-between;
    justify-content: flex-end;
}

.home-img-headline-swipeout {
	bottom: 0;
	position: absolute;
	width: 100%;
	left: 0;
	margin: 0;
}

.home-img-headline-swipeout > ul {
	background: rgba(0,0,0,0.55)!important;
	font-size: 14px;
}

.home-img-headline-swipeout.list ul:before {
	display: none;
}

.home-img-headline-swipeout .card-footer:before {
	display: none;
}

.infinite-scroll-preloader {
  margin-top:-20px;
  margin-bottom: 10px;
  text-align: center;
}

.infinite-scroll-preloader .preloader {
  width:34px;
  height:34px;
}  

.article-img-swiper {
	position: relative;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/*
.article-img-slide  {
	position: relative;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
*/
.article-img-slide  img {
	width: 100%;
	display: block;
}

.article-text {
	font-size: 18px;
	line-height: 1.6;
}

.result-language-tips{
	color: #8f8f94;
}

.chip a {
	color: white;
}
/*
.chip .icon {
	color: white!important;
}

.chip .chip-label {
	color: white!important;
}

.chip.chip-outline .chip-label {
	color: black!important;
}
*/

.chip .chip-label {
	color: rgba(0, 0, 0, 0.54)!important;
}

.article-tag-icon {
	float: left;
	margin-right: 5px;
}

.center-div-content{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.h-banner-wrapper {
	width: 100%;
	margin: 10px 0 10px!important;
	padding: 10px 15px!important;
}

ul .h-banner-wrapper {
	margin-top:0;
	margin-bottom:0;
}

.block .h-banner-wrapper {
	padding: 0!important;
}

.block .h-banner-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

.block .h-banner-wrapper:before {
	display: none;
}

.block .h-banner-wrapper:after {
	display: none;
}

.width-100percent{
	width: 100%!important;
}

.h-banner .sgAdImage {
	background-color: white;
	border: solid lightgray 1px;
}

.max-width-100percent{
	max-width: 100%;
}

.h-banner  {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
}

.h-banner .h-banner-refresh {
    float: right;
    padding: 10px;
    margin: -15px -13px -9px -10px;
    z-index: 100;
}

.footer-banner-toolbar {
	height: auto!important;
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.75);
}

.footer-banner  {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
}

.footer-banner .h-banner-refresh {
    float: right;
    padding: 10px;
    margin: -9px -8px;
    z-index: 100;
}

.with-footer-banner  .fab-right-bottom {
	bottom: 40px!important;
}

.with-footer-banner  .page-content {
	padding-bottom: 120px!important;
}

.popup-banner {
	height: auto!important;
	bottom: 0!important;
	top: auto!important;
	contain: none;
}

.text-sgad {
	height: 115px;
	font-size: 14px!important;
	padding-left: 0px!important;
}

.text-sgad .item-inner{
	padding-left: 15px;
}

.text-sgad a{
	margin: -8px -15px -7px -15px;
	padding: 8px 15px 7px 15px;
}

.text-sgad a.disabled {
	opacity: 1;
}

.tab-link.disabled {
	opacity: 0.2;
}

.text-sgad .item-title {
    font-size: 14px;
	font-weight: bold;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
	white-space: normal;
}

.text-sgad .item-text {
    font-size: 14px!important;
	line-height: 18px!important;
	height: 36px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.rotate {
	-webkit-animation: rotate 1s linear infinite;
}

@-webkit-keyframes rotate {
    0%{
        -webkit-transform: rotate(0deg);
		transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
		transform: rotate(360deg);
    }
}

@keyframes rotate {
    0%{
        -webkit-transform: rotate(0deg);
		transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
		transform: rotate(360deg);
    }
}

/*
@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
*/

.right-link{
	float: right;
	text-transform: none;
}

.right-link a{
    padding: 10px;
    margin-right: -10px;
}

.timeline-item-time .timeline-item-text {
	color: black;
	font-size: 14px;
}

.timeline-item-time {
	margin-top: 3px!important;
	margin-bottom: 2px!important;
}

.timeline-item-time:last-child {
	margin-bottom: 0px!important;
}

.timeline-item.other-schedule:not(.this-schedule) {
	display: none;
}

.port-schedule-timeline a {
	color: inherit;
}

.this-schedule .timeline-item-inner-wrapper {
	-webkit-border-radius: 7px 0px 0px 7px;
	border-radius: 7px 0px 0px 7px;
	border-left: 7px #8bc34a solid;
	padding-left: 15px;
	margin: -8px -15px -8px -15px;
	padding: 8px 15px 8px 8px;
}
.ios-6, .ios-7, .ios-8 .this-schedule .timeline-item-inner-wrapper {
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}

.this-service:not(.this-schedule) .timeline-item-inner-wrapper {
	-webkit-border-radius: 7px 0px 0px 7px;
	border-radius: 7px 0px 0px 7px;
	border-left: 7px darkgray solid;
	padding-left: 15px;
	margin: -8px -15px -8px -15px;
	padding: 8px 15px 8px 8px;
}

.this-company:not(.this-service) {
	/* hide other service */
	display: none!important;
}

.this-service .service {
	display: none;
}

.ios-6, .ios-7, .ios-8 .this-service:not(.this-schedule) .timeline-item-inner-wrapper {
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}

.other-company:not(.this-company) .timeline-item-inner {
	opacity: 0.4;
}

.schedule-list .block-strong {
	padding: 10px 15px;
}

.no-after:after {
	display: none!important;
}

.welcomescreen-title {
	margin-top: 20vh!important;
}

.welcomescreen-picture {
	margin-top: 5vh!important;
}

.welcomescreen-picture img{
	height: 40vh;
	max-height: 300px;
}

.heartBeat{
	-webkit-animation: animateHeart 2.5s 1;
	animation: animateHeart 2.5s 1;
}

@-webkit-keyframes animateHeart {
  0% {
    -webkit-transform: scale(1);
  }
  5% {
    -webkit-transform: scale(1.2);
  }
  10% {
    -webkit-transform: scale(1.1);
  }
  15% {
    -webkit-transform: scale(1.3);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes animateHeart {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.2);
  }
  10% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.h-banner-refresh-icon {
    width: 18px;
    height: 18px;
    padding: 15px;
    margin-top: -20px;
    position: absolute;
    right: 0;
    opacity: 0.2;
}

.tabbar a.tab-link-active i.inactive {
    display: none;
}

.tabbar a:not(.tab-link-active) i.active {
    display: none;
}

#mysg-tabs .inactive {
	color: white;
}

#mysg-tabs a:not(.tab-link-active) .tabbar-label{
	color: white;
}

.badge:empty {
	display: none;
}

.subtitle {
	color: gray;
	font-size: 12px;
}

.subtitle:empty {
	display: none;
}

#panel-profile-header {
	background-image:url('../img/bg-profile.png');
	background-color:white;
	background-repeat: no-repeat;
	width: 100%;
	height: 110px;
	display: inline-block;
}

#panel-profile-header a.active-state {
	background-color: rgba( 217, 217, 217, 0.2);
}

.avatar {
	width: 48px;
	height: 48px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	line-height: 48px;
    text-align: center;
    font-size: 32px;
    /*background-color: #2196F3;*/
    color: white;
	font-weight: bold;
}

.avatar-small {
	width: 36px!important;
	height: 36px!important;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: relative;
	line-height: 36px;
    text-align: center;
    font-size: 24px!important;
    /*background-color: #2196F3;*/
    color: white;
	font-weight: bold;
}

.text-color-inherit{
	color: inherit!important;
}

.news-headline {
	/*font-size: 17px;*/
	font-size: 22px;
	font-weight: bold;
}

.news-date {
	color: gray;
	font-size: 12px;
}

.articleListImage {
	width: 70px;
	height: 58px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 9px;
}

.articleListText {
	height: auto!important;
	color: black!important;
	font-size: 15px;
}

.port-schedule-list-date-row {
	border-bottom: 0.5px solid lightgray;
	padding-bottom:2px;
}

.port-schedule-item-link {
	padding: 10px 0px 10px 15px;
	margin: -10px 0px -10px -15px;
}

.port-schedule-list-closing {
    font-size: 12px;
    padding-top: 2px;
	padding-right: 5px;
	border-right: 1px solid lightgray;
}

.port-schedule-list-weekday {
	font-size: 12px;
	color: rgb(142, 142, 147);
	text-transform: none;
	font-weight: normal;
}

.port-schedule-list-item {
	font-size: 14px;
	border-left: 4px solid transparent;
	padding-left: 6px;
    margin-left: -10px;
	height: 95px;
}

.port-schedule-list-item.saved {
	border-left: 4px solid #8bc34a;
}

.port-schedule-list-etd-eta {
	font-size: 17px;
	text-transform: uppercase;
	font-weight: bold;
}

.regular-schedule-list .item-text {
	height: auto;
}

.list.sortable-enabled .saved-port-schedule .block {
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	padding-right: 40px;
}

.list.sortable-enabled .saved-flight-schedule .block {
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	padding-right: 40px;
}

.surcharges-logo {
	margin-top: 2px;
	margin-bottom: 2px;
	width: 70px;
	height: 58px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.end-tutorial {
	background: #fff;
	padding: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #0da6ec !important;
	text-decoration: none !important;
}

.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.hidden {
	display: none;
}

.inline-block {
	display: inline-block;
}

.theme-dark .about-logo {
	background-image: url(../img/hksglogo-night.png);
}

.theme-dark .articleListText {
	color: #ddd!important;
}
/* override the material color theme */
/*
.theme-dark .chip-media {
	color: #222426;
}

.theme-dark .chip {
	background: rgba( 255, 255, 255,.37);
}

.theme-dark .chip .icon {
	color: rgba( 255, 255, 255, 0.54)!important;
}
*/
.theme-dark .chip-label {
	color: rgba( 255, 255, 255, 0.54)!important;
}

.theme-dark .timeline-item-time .timeline-item-text {
	color: white;
}

.theme-dark .material-icons.md-dark {
	color: rgba(255, 255, 255, 0.54);
}

.theme-dark .material-icons.md-light {
	/*color: rgba(0, 0, 0, 0.54);*/
	color: rgba(255, 255, 255, 0.54);
}

.theme-dark .mdi.mdi-dark:before {
	color: rgba(255, 255, 255, 0.54);
}

.theme-dark .home-menu-swiper {
	background: black;
}

.theme-dark .perfreight-match-logo .text-color-black {
	color: white!important;
}

.theme-dark .home-menu-swiper {
	box-shadow: 0px 2px 5px 0px #2f2f2f;
}

/* override the material theme color */
.theme-dark .notifications .item-text {
	color: black;
}

.theme-dark .port-schedule-list-closing {
	border-right: 1px solid rgb( 64, 64, 64);
}

.theme-dark .port-schedule-list-date-row {
	border-bottom: 0.5px solid rgb( 64, 64, 64);
}

.theme-dark .flight-schedule-list-date-row {
	/*
	border-bottom: 0.5px solid rgb( 64, 64, 64);
	*/
}

.theme-dark .view-left {
	border-right: 1px solid #333;
}

.theme-dark .home-img-headline-wrapper {
	background-color: #1c1d1f;
}

.theme-dark #panel-profile-header {
	background-image:url('../img/bg-profile-night.png');
	background-color:black;
}

.theme-dark .text-color-bluegray {
	color: #779eb1!important;
}

.theme-dark .yp-com-type-list {
	color: white!important;
}

/*
.theme-dark .this-schedule .timeline-item-inner-wrapper {
	border-left: 7px #ffc107 solid;
}
*/

/* implement additional v1 color */
.text-color-bluegray {
	color: #607d8b!important;
}
.text-color-lightblue {
	color: #5ac8fa!important;
}
.text-color-pink {
	color: #ff2d55!important;
}
.text-color-purple {
	color: #9c27b0!important;
}
.text-color-deeppurple {
	color: #673ab7!important;
}
.text-color-indigo {
	color: #3f51b5!important;
}
.text-color-lightblue {
	color: #03a9f4!important;
}
.text-color-cyan {
	color: #00bcd4!important;
}
.text-color-teal {
	color: #009688!important;
}
.text-color-lightgreen {
	color: #8bc34a!important;
}
.text-color-lime {
	color: #cddc39!important;
}
.text-color-amber {
	color: #ffc107!important;
}
.text-color-deeporange {
	color: #ff5722!important;
}
.text-color-brown {
	color: #795548!important;
}

.bg-color-bluegray {
	background-color: #607d8b!important;
}
.bg-color-lightblue {
	background-color: #5ac8fa!important;
}
.bg-color-pink {
	background-color: #ff2d55!important;
}
.bg-color-purple {
	background-color: #9c27b0!important;
}
.bg-color-deeppurple {
	background-color: #673ab7!important;
}
.bg-color-indigo {
	background-color: #3f51b5!important;
}
.bg-color-lightblue {
	background-color: #03a9f4!important;
}
.bg-color-cyan {
	background-color: #00bcd4!important;
}
.bg-color-teal {
	background-color: #009688!important;
}
.bg-color-lightgreen {
	background-color: #8bc34a!important;
}
.bg-color-lime {
	background-color: #cddc39!important;
}
.bg-color-amber {
	background-color: #ffc107!important;
}
.bg-color-deeporange {
	background-color: #ff5722!important;
}
.bg-color-brown {
	background-color: #795548!important;
}

.demo-facebook-card .card-header {
  display: block;
  padding: 10px;
}
.demo-facebook-card .demo-facebook-name {
  margin-left: 44px;
  font-size: 14px;
  font-weight: bold;
}
.demo-facebook-card .demo-facebook-date {
  margin-left: 44px;
  font-size: 13px;
  color: #8e8e93;
}
.demo-facebook-card .card-footer a {
  color: #81848b;
  font-weight: 500;
}
.demo-facebook-card .card-content img {
  display: block;
}
.demo-facebook-card .card-content-padding {
  padding: 15px 10px;
}
.demo-facebook-card .card-content-padding .likes {
  color: #8e8e93;
}

.rate-promotion-gadget .card {
	margin-left: 0;
	margin-right: 0;
}

.rate-promotion-gadget .card-header{
	padding:10px;
}

.rate-promotion-gadget .name {
    margin-left: 8px;
	margin-top: auto;
	margin-bottom: auto;
	padding-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
}

.rate-promotion-gadget .swiper-slide{
	width: 65%;
}

.rate-promotion-gadget .label-cell:before{
	display: none!important;
}

.yp-com-type-list {
	color: black!important;
}

.yp-com-name {
	font-size: 17px;
	font-weight: bold;
	display: block;
	/*margin-bottom: 10px;*/
}

.yp-links-swiper .swiper-slide {
	width: 100%;
	flex-shrink: 1;
	-webkit-flex-shrink: 1;
	min-width: 75px;
	text-align: center;
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.yp-address-swiper {
	z-index: 10;
}

.yp-address-swiper .swiper-slide {
	width: auto!important;
	height: 35px!important;
	/*
	flex-shrink: 1;
	-webkit-flex-shrink: 1;
	*/
	margin-top: 5px;
	margin-left: 10px;
	padding: 5px 10px;
	border: 1px solid lightgray;
	border-radius: 10px 10px 0 0;
	white-space: nowrap;
	border-bottom: 0;
}

.theme-dark .yp-address-swiper .swiper-slide {
	border-color: #333;
}

.yp-address-swiper .swiper-slide.tab-link-active{
	background-color: white;
}

.theme-dark .yp-address-swiper .swiper-slide.tab-link-active {
    background-color: #1c1c1d;
    color: #fff;
}
	
/* temp fix for 2.1.2 searchbar clear button without right margin */
/*
.searchbar .input-clear-button {
	right: 7px;
}
/*/

.call-actions .item-inner {
	background: none!important;
	padding-right: 15px!important;
}

.call-actions .item-link.active-state {
	background-color: initial!important;
}

.appDownloadNotification .notification-header {
	display: none;
}
.appDownloadNotification .notification-close-button {
	background-image: none;
}
.appDownloadNotification .notification-header+.notification-content {
	margin-top: 0;
}
.appDownloadNotification .notification-text div{
	display: inline-block;
}
.appDownloadNotification .notification-text img{
	margin-right: 8px;
}
.appDownloadNotification .notification-text .button{
	margin-top: 8px;
}
/*
.theme-dark #panel-profile-header {
	-webkit-filter: invert(100%);
}
*/

@media (min-width: 350px) {
	.flight-schedule-weekday-extra-text {
		display: inline-block;
	}
}

/* override default because using in right panel */
@media (min-width: 768px) {
	.tabbar a.link, .tabbar a.tab-link {
		min-width: 61px!important;
	}
	
	.tabbar-labels span.tabbar-label {
		font-size: 10px!important;
	}
}

/* iPad Vertical */
@media (min-width: 569px) {
/* not required in 1.5.4
	.panel.panel-left.panel-cover {
		width: 320px;
		left: -320px;
	}
	body.with-panel-left-cover .panel-left {
		-webkit-transform: translate3d(320px, 0, 0);
		-ms-transform: translate3d(320px, 0, 0);
		transform: translate3d(320px, 0, 0);
	}
*/
	.home-news-thumb {
		/*width:150px;*/
		/*width:30%;*/
	}
}
/* iPad Horizontal */
/*@media (min-width: 769px) {	changed to 768 in 1.5.4 */
@media (min-width: 768px) {
	body .panel.panel-left.panel-cover {
		width: 320px;
		/*	not required in 1.5.4
		left: 0;
		display: block;
		*/
	}

	.tablet-hidden {
		display:none;
	}
	
	.port-schedule-list-item {
		height: 50px;
	}

	.port-schedule-list-date-row {
		border-bottom: 0;
		padding-bottom: 0;
		padding-right: 5px;
	}

	.theme-dark .port-schedule-list-date-row {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.port-schedule-list-closing {
		border-left: 1px solid lightgray;
		padding-left: 5px;
		/*margin-left: -5px;*/
	}

	.row.no-gap .port-schedule.tablet-50 {
		width: calc( 50% - 10px);
	}

	.flight-schedule-list-item {
		height: 30px;
	}

	.flight-schedule-list-date-row {
		border-bottom: 0;
		padding-bottom: 0;
		padding-right: 5px;
	}

	.flight-schedule-list-item>.col-100:not(first-child) {
		border-left: 1px solid lightgray;
		padding-left: 5px;
		padding-right: 5px;
	}

	.theme-dark .port-schedule-list-closing {
		border-left: 1px solid rgb( 64, 64, 64);
	}

	.with-footer-banner  .speed-dial {
		bottom: 110px;
	}

	.with-footer-banner  .page-content {
		padding-bottom: 95px;
	}
	
	.text-sgad {
		height: 70px;
	}

	.text-sgad .item-text {
		height: 18px;
		-webkit-line-clamp: 1;
	}

	.with-footer-banner  .fab-right-bottom {
		bottom: 80px!important;
	}
	/*	not required in 1.5.4
	body.with-panel-left-cover .panel-left {
		-webkit-transform: translate3d(0px, 0, 0);
		-ms-transform: translate3d(0px, 0, 0);
		transform: translate3d(0px, 0, 0);
	}
	.view-main {
		float: right;
		width: -webkit-calc(100% - 320px);
		width: -moz-calc(100% - 320px);
		width: -ms-calc(100% - 320px);
		width: calc(100% - 320px);
	}
	*/

	/* Let's hide panel-opener when left panel is visible */
	/* moved to 1024
	.view-main .navbar .open-panel {
		display: none;
	}
	
	body .home-menu-swiper {
		display:none;
	}

	body .home-menu-swiper-placeholder {
		display:none;
	}
	*/
	/*
	.home-img-headline-wrapper {
		margin: 0 10px 10px;
	}
	
	.h-banner-wrapper {
		margin: 10px;
	}
	*/
}

/* iPad Horizontal */
@media (min-width: 1024px) {
	/* Let's hide panel-opener when left panel is visible */
	.view-main .navbar .open-left-panel {
		display: none;
	}

  	body .home-menu-swiper {
		display:none;
	}

	body .home-menu-swiper-placeholder {
		display:none;
	}
	
	.port-schedule-new-search {
		display:none;
	}
 }
 
/*@media (min-width: 1366px) {*/
@media (min-width: 1500px) {
	/* Let's hide panel-opener when right panel is visible */
	.view-main .navbar .open-right-panel {
		display: none;
	}
}

@media screen and (orientation:landscape) {
.welcomescreen-title {
	margin-top: 10vh!important;
}