@import url('https://fonts.googleapis.com/css?family=Poppins:700');

@font-face {
  font-family: 'NotoSansKufiArabic';
  font-style: normal;
  font-weight: 900;
  src: url(../../../fonts/NotoSansKufiArabic-Bold.ttf);
}
/* .searchIcon {
    position: absolute;
    z-index: 1;
    right: 0;
    top: .3rem;
    cursor: pointer;
    padding-top: .1rem;
    height: 1.8rem;
    opacity: .5;
} */
/* .searchIcon i.fa.fa-search { */
/*    color: #7B7B7B; */
/* } */
.colorWhite{
	color: white !important;
}
.address.shrink.cell{
	font-size: 2.5rem;
    font-weight: bolder;
    line-height: 1.8rem;
}
.name.shrink.cell.grid-y {
	font-weight: bolder;
	line-height: 1rem;
}

.name div {
	font-family: 'NotoSansKufiArabic', sans-serif;
	font-weight: bolder;
}

.address.shrink.cell span {
	font-family: 'Poppins', sans-serif;
}

.subLocaleLabel {
    background-color: #5dade2;
    color: white;
    margin-right: .5em;
    width: 2em;
    line-height: 2em;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    font-size: 0.875rem;
    padding: 0;
}
.subLocaleMenu {
    background-color: transparent !important;
}
#main-menu {
    padding-top: 0;
    padding-bottom: 0;
}
header .top-bar {
	background-color: #f4c904;;
	color: black ;
}
.top-bar * {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

#main-menu, #main-menu a, #main-menu ul{
	background-color: white;
	color: black;
	font-weight: bold;
}

#main-menu {
    display: block;
}

/* #main-menu a.searchIcon { */
/* 	background-color: transparent !important; */
/* } */
input.searchInput {
    display: inline-block;
}

.searchContainer{
	position: relative;
	padding-top:.2rem;
}
.extMenuButton{
	padding: 1.7rem .7rem .4rem .7rem !important;
}
.extMenuButton::after {
   display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-right-width: 0;
    border-left-style: solid !important;
    border-bottom-width: 6px !important;
    border-color: transparent transparent transparent white !important;
}
.menuIcon::after{
	display: none !important;
}
.fullMenu, .fullMenu > ul, .fullMenu > ul > li, .menuIcon, .menuIcon i{
	margin-right: 0 !important;
}
.menuIcon{
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	text-align: center;
}
div.menuBar {
    width: 100%;
    z-index: 10;
    transition: height .25s ease;
    background-color: #2c3840;
}
.fullMenu {
	z-index: 11;
}

div.fullMenu * {
	background-color: #f4c904;;
}
.topBanner{
	padding: 0 !important;
}

header img.icon, img.icon {
    width: 2rem;
}

.main-menu-icon {
    display: flex;
    margin: 0.7rem 0.7rem 0.7rem 0.7rem;
}

.mobile-menu-arrow-up {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 11px solid #e6e6e6;
    z-index: 11;
    position: absolute;
}

#mobile-main-menu {
    display: none;
}

.cusSticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.menuBar.sticky.is-at-top.is-stuck.shrink, .menuBar.sticky.is-at-top.is-stuck.shrink #main-menu,.menuBar.sticky.is-at-top.is-stuck.shrink #main-menu a,.menuBar.sticky.is-at-top.is-stuck.shrink #main-menu ul {
    background-color: #f4c904;;
    color: #2c3840;
}

div.title-bar {
	background-color: white;;
	padding-top: 0;
    padding-bottom: 0;
}

.title-bar .name{
	color: black;
	margin-left: .5rem;
}
ul.menu.vertical.medium-horizontal{
	text-align: left;
}

#menuBar {
    z-index: 5;
    background-color: white;
}

#menuBar ul li a:hover, #menuBar ul li a:focus{
	background-color: #44545f;
}

#menuBar.sticky.is-at-top.is-stuck.shrink ul li a:hover, #menuBar.sticky.is-at-top.is-stuck.shrink ul li a:focus{
	background-color: #ffd92b;
}

#main-menu .is-dropdown-submenu {
	min-width: 6.6rem;
}

#mobile-main-menu {
    margin: 0;
}

.is-dropdown-submenu a{
	white-space: nowrap;
}

/* .subSearch input.searchInput { */
/*     max-width: none; */
/*     height: 2rem; */
/*     margin: 0; */
/*     margin-top: .5rem; */
/* } */

/* li.subSearch { */
/*     position: relative; */
/*     margin-top: .5rem; */
/* 	margin-left: .5rem; */
/* } */

/* .subSearch a.searchIcon { */
/*     top: .1rem; */
/*     margin: 0; */
/*     padding: .4rem .2rem 0 0; */
/* 	margin-right: .4rem; */
/* } */

.mediumSearch{
	width: 12rem !important;
}
.mediumSearch, .mediumSearch div{
	margin-right: 0;
} 
/* .mediumSearch a.searchIcon { */
/*     margin: 0; */
/*     padding: .4rem .2rem 0 0 !important; */
/*     right: 1.3rem; */
/* } */
.subLocale{
	padding-top: .5rem;
}
.socialIconContainerX{
	background-color: transparent;
	padding-top: .5rem;
    padding-bottom: .5rem;
	
}
.topBannerContainer{
	background-color: #f4c904;;
}

.topBanner{
	margin: 0 10px;
}

button.menu-icon:hover::after {
    background: #008CBA;
    -webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
    box-shadow: 0 7px 0 #008CBA, 0 14px 0 #008CBA;
}
.xMenuContainer{
	z-index: 11;
}

.xMenuContainer *{
	margin-right: 0;
}
.xMenuContainer ul.menu, .xMenuContainer .menu li{
	background-color: #f4c904;
}
.xMenuContainer ul.menu{
	background-color: #f4c904;
}
.xMenuContainer *:hover, .xMenuContainer .menu .is-active>a , .xMenuContainer .dropdown.menu> .is-active>a:hover{
	 background-color: #ffd92b;
	 color: black !important;
}

.xMenuContainer > ul.dropdown.menu{
	height: 100%;
}

.topBannerContainer > .grid-container {
    padding-left: 0;
    padding-right: 0;
}

.xMenuContainer > ul.dropdown.menu ul{
	border: none;
}
.xMenuContainer a, .xMenuContainer a:focus{
	color: black;
}
.xMenuContainer .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after{
	border-color: transparent transparent transparent black;
}

.xMenuContainer > ul.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
	display: none;
}
.xMenuContainer > ul.dropdown.menu > li.is-dropdown-submenu-parent > a{
	height: 100%;
    /* padding: .9rem 1.2rem 0 1.2rem; */
    padding: 0.7rem 1rem;
    display: block;
}

.extMenu .fa-commenting, .extMenu .fa-rss, .extMenu .fa-search, .extMenu .fa-at{
	margin-left: 1rem;
}
.extMenu .photoBookIcon{
	margin-left: 0.8rem;
	height: 1.2rem;
}
.searchIcon{
	margin-left: .5rem;
}

.feedbackBtn i, .subscriptionBtn i, .rssBtn i, .searchBtn i{
	font-size: 1.5rem;
    line-height: 1rem;
}
.subWeatherPanelContainer > div {
    margin-top: 1rem;
}

a.subFbIcon{
    background-color: #4267b2 !important;
    color: white !important;
    font-size: 1.5rem !important;
}
a.subFbIcon i{
	margin-top: .5rem;
}
a.subWeiboIcon{
    background-color: #dd192e !important;
    color: white !important;
    font-size: 2rem !important;
}
a.subYtIcon {
    font-size: 2rem !important;
    background-color: #f1f3f2 !important;
    color: red !important;
    line-height: 2.3rem !important;
    border-bottom: lightgray;
    border-bottom-style: solid;
    border-bottom-width: thin;
}
a.subWeChatIcon {
    color: white !important;
    background-color: #70c000 !important;
    font-size: 1.6rem !important;
    line-height: 2.3rem !important;
}
a.subHeadLineIcon  {
    background-color: #dd1305 !important;
    color: white !important;
    font-size: 1.5rem !important;
    line-height: 2.3rem !important;
    font-style: italic !important;
    font-weight: bolder !important;
}
.subSocialIconContainer{
	margin-right: 0rem !important;
}
.subSocialIconContainer a {
	margin: 0 !important;
	padding: 0 !important;
}
.subLocalePanelContainer {
    margin-left: .5rem;
}

.bannerIcon{
	max-width: 450px;
    max-height: 38px;
}

.xBannerIconContainer{
	max-width: calc(100% - 2rem);
}
.xBannerIconContainer img{
	max-width: 300px;
    margin-top: .2rem;
    margin-bottom: .2rem;
}

.homeBtnContainer, .homeBtnContainer * {
	margin-right: 0em;
}

.temperatureLabel{
	display:inline-block;
	font-size:1.5rem;
	vertical-align: sub;
	line-height: 1rem;
	margin-top: .1rem;
}

.weatherIcon{
	font-size: 1.5rem;
}

#weatherPanel{
	color: black;
/* 	margin-right: 1rem; */
}
.typhoonSignal{
	/* font-size: .9rem;
	margin-right: .2rem; */
	font-weight: bolder;
	margin-right: 0;
    line-height: .8;
    font-size: 1.5rem;
}

#weatherPanel .icon-rainstorm * {
    margin: 0;
}

#weatherPanel .icon-rainstorm {
    font-size: 1.2rem !important;
}

.typhoonIcon{
	margin-right: .2rem;
}
.severeWeatherIcon{
	margin-top: .2rem;
    align-items: baseline;
	line-height: 0;
    font-size: 1.2rem;
    color: black;
}

.weatherMarquee .severeWeatherIcon{
	margin-left: 1rem;
	}

.severeWeatherPanel{
    background: #fef2b6;
    border-bottom: 1px solid white;
} 

.severeWeatherTitle {
    margin-left: .3rem;
    text-align: justify;
}

.weatherMarquee{
	margin-left: 1rem;
    margin-right: 1rem;
    overflow: hidden;
}
    
.severeWeatherPanel .weatherMarqueeContainer{
	max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
}

.weatherMarquee > .grid-x{
	min-height: 2.5rem;
	
}

#subWeatherPanel [class^="icon-"]:before, #subWeatherPanel [class*=" icon-"]:before,
#weatherPanel [class^="icon-"]:before, #weatherPanel [class*=" icon-"]:before,
.severeWeatherPanel [class^="icon-"]:before, .severeWeatherPanel [class*=" icon-"]:before {
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typhoonIcon:before{
	font-family: "msar-typhoon-signal";
}

#weatherPanel .icon-stormsurge-stormsurge-signal{
	font-size: 1.4rem !important;
    margin-top: 0.3rem;
}
#subWeatherPanel .icon-stormsurge-stormsurge-signal:before, #weatherPanel .icon-stormsurge-stormsurge-signal:before, #severeWeatherPanel .icon-stormsurge-stormsurge-signal:before {
	line-height: 0;
	font-family: "msar-stormsurge";
	content: "\e000";
}

.severeWeatherPanel i.cell.shrink.wi.wi-lightning{
	font-size: 1.5rem;
}

.severeWeatherPanel i.cell.shrink.wi.wi-rain-wind{
	font-size: 1.5rem;
}


.severeWeatherIcon.wi.wi-lightning{
	font-size: 1.5rem;
	margin-top: .2rem;
	  margin-right: .2rem;
}


.severeWeatherIcon.wi.wi-rain-wind{
	font-size: 1.5rem;
	margin-top: -.2rem;
}


.icon-black-ball:before {
	margin-right: .4rem;
	font-family: "msar-typhoon-signal";
    content: "\e000";
}

.icon-typhoon-1:before {
  content: "\e001";
}
.icon-typhoon-8-ne:before {
  content: "\e003";
}

.icon-typhoon-8-nw:before {
  content: "\e004";
}

.icon-typhoon-8-se:before {
  content: "\e005";
}

.icon-typhoon-8-sw:before {
  content: "\e006";
}

.icon-typhoon-9:before {
  content: "\e007";
}

.icon-typhoon-10:before {
  content: "\e008";
}

.icon-typhoon-3:before {
  content: "\e002";
}

.red {
	color: red;
}

.blue {
	color: #5a8dca;
}

.orange {
	color: #f3a000;
	text-shadow: 2px 2px 2px black;
}

.yellow {
	color: #f5e948;
	text-shadow: 2px 2px 2px black;
	
}
.topBannerContainer .trialLabel {
    font-size: 2rem;
    line-height: 0.8;
    font-weight: bolder;
    color: gray;
    margin-left: 2rem;
}

.xBannerIconContainer .trialLabel{
	font-size: 1.1rem;
    font-weight: bolder;
    color: gray;
    position: absolute;
    left: 2.5rem;
}
.homeBtnContainer .fa-home{
	font-size: 1.6rem;
}

.xHomeBtnContainer .fa-home{
	font-size: 2rem;
}

.marginAuto{
	margin-left: auto;
	margin-right: auto;
}

.dropdown.menu .photoBookLinkContainer{
	padding: .54rem 1rem .54rem 1rem;
}
.photoBookIcon{
	height: 1.5rem;
}

div.noRightMargin *{
	margin-right: 0rem;
}
.topBanner{
	min-height: 45px;
}

.icon-rainstorm, .baseSize .icon-rainstorm span{
	font-size: 1.9rem;
}

#main-menu .covid19Menu{
	color: #f5c904;
}

ul.dropdown.menu > li > a{
	padding: 0.7rem 0.83rem;
}

ul.dropdown.menu > li > a.searchBtn {
	padding: 0.7rem 0.7rem;
}

ul.dropdown.menu > li > a.feedbackBtn, ul.dropdown.menu > li > a.subscriptionBtn  {
	padding:0.525rem 0.635rem;
	
}
.cpShowBtn, #main-menu a.cpShowBtn {
	display: flex;
    height: 100%;
    background: #fdd3d4;
	padding-left: 0.7rem;
    padding-right: 0.7rem;
    color: #9f0505;
    font-weight: bolder;
}

.cpShowBtn i{
	font-size: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.25rem;
    width: 1.25rem;
    border: 2px solid #9f0505;
    border-radius: 50%;
    margin-right: 0.5rem;
    padding-left: 0.03rem;
}

.cpShowBtn img {
    width: 1.8rem;
    margin-right: 0.3rem;
}

img.imgIcon{
	width: 25px;
}


.weatherMarqueeContainer > a >.grid-x >.grid-x{
	padding: .2rem 0;
}

.weatherMarqueeContainer > a > .grid-x{
	padding: .3rem 0;
}

.weatherMarqueeContainer .severeWeatherIcon{
	text-align: center;
	min-width: 2.3rem;
}

.severeWeatherTitle:after {
    content: "";
    width: 1rem;
    display: inline-block;
}

.severeWeatherLink {
	color: #ab0801;
}

.severeWeatherLink:hover, .severeWeatherLink:focus {
	color: #930600;
	font-weight: bolder;
}

.weatherMarqueeContainer > button{
	height: 1.1rem;
    width: 1.1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0.7rem;
    margin-left: 1rem;
}
.weatherMarqueeContainer > button:before{
	content: '';
    height: 1.1rem;
    border-left: 3px solid black;
    transform: rotate(-45deg);
    position: absolute;
}

.weatherMarqueeContainer > button:after{
	content: '';
    height: 1.1rem;
    border-left: 3px solid black;
    transform: rotate(45deg);
    position: absolute;
}

.langBtnContainer .icoBtn{
	flex-wrap: nowrap;
}

.selectedLang{
	font-weight: normal;
}

.en .hideEn, .pt .hidePt{
	display: none;
}

.showHideGridBtn {
	display: none;
}

.jumpToContent > a, jumpToContent > a:link,jumpToContent > a:visited,jumpToContent > a:hover,jumpToContent > a:focus,jumpToContent > a:active{
    color:#1779ba;
}

.top-bar .menuDivider{
    display: inherit;
}

ul.menuUl > li[role=none] ~ li[role=none]:before {
    content: '';
    display: inline-block;
    height: 1em;
    border: 1px solid black;
    vertical-align: text-bottom;
}

ul.menuUl > li > a.dropdownButton, ul.menuUl > li > a.mainLink {
    width: inherit;
    height: 100%;
    background-color: blue;
    display: inline-flex !important;
}

@media screen and (max-width: 24.9375em) {
	.cpShowBtn .cpBtnLabel{
		display: none;
	}
}
@media screen and (max-width: 39.9375em) {
	.weatherMarqueeContainer > a >.grid-x >.grid-x {
		padding-left: 0.8rem;
	}
	
	.weatherMarquee{
		margin-left: .1rem;
    	margin-right: .1rem;
	}
	
	.homeBtnContainer .homeBtn{
		margin-right: 1rem;
	}
	
	.homeBtnContainer .searchBtn{
	    border-style: none solid none solid;
   	 	border-width: thin;
    	border-color: burlywood;
	}
	
	.homeBtnContainer #subWeatherPanel{
	    padding: 0;
	    display: flex;
	    margin-left: auto;
	}
	
	#subWeatherPanel .severeWeatherIcon, #subWeatherPanel .weatherIcon{
		margin-right: .2rem;
	}
	
	.name.shrink.cell.grid-y {
		line-height: .7rem;
		font-size: .7rem;
	}
	.address.shrink.cell {
		font-size: 1.5rem;
		line-height: 1.3rem;
	}
	
	#main-menu, #main-menu a, #main-menu ul {
    	background-color: #f4c904;
		color: #2c3840;
	}
	#menuBar ul li a:hover, #menuBar ul li a:focus{
		background-color: #ffd92b;
	}
	.top-bar * {
   	 	margin-right: .0rem;
	}
	.menuUl li {
   		 margin-right: .5rem;
	}
	#main-menu {
	    padding-left: 0;
	    padding-right: 0;
	}
	#menuBar > .title-bar {
	    border-bottom: lightgray;
	    border-bottom-style: solid;
	    border-bottom-width: thin;
	}
	
	.homeBtnContainer .fa-home{
		font-size: 1.4rem;
	}
	#main-menu .covid19Menu{
		color: black;
	}
	.cpShowBtn {
		display: inline-block;
		height: 3.4rem;
	}
	.cpShowBtn img {
		display: block;
	    margin-left: auto;
	    margin-right: auto;
	}
	
	.weatherMarqueeContainer > button {
		margin-left: 0.3rem;
		margin-right: 0.3rem;
	}
	
	.weatherMarqueeContainer > button:before{
	    height: 1.3rem;
	}
	
	.weatherMarqueeContainer > button:after{
	    height: 1.3rem;
	}
	
	.topBanner{
		margin: 5px 10px 8px;
	}

	.bannerLogo {
		margin-bottom: 0.7rem;
	}
	
	.temperatureLabel {
		margin-top: 0rem;
		margin-left: 0.5rem;
	}
	
	a.cell.shrink.grid-x.searchBtn {
	    width: 3.5rem;
	    justify-content: center;
	    align-self: stretch;
	    align-items: center;
	}
}
@media print , screen and (min-width: 40em) {
	div .dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a::after
		{
		border-color: white transparent transparent;
	}
	.widthAuto {
		width: auto !important;
	}
}

@media screen and (max-width: 65.5em) {
	.noRightMargin .dropdown.menu > li > a{
		padding-left: .8rem;
		padding-right: .8rem;
	}
}

@media screen and (min-width: 63.9375em) and (max-width: 67.1em) {
	div .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a{
		 padding-right: 1.3rem;
	}
	div .dropdown.menu a {
		padding-left: .8rem;
 		padding-right: .8rem;
	}
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	.name.shrink.cell.grid-y {
		line-height: 1em;
		font-size: .8rem;
	}
	.address.shrink.cell {
		font-size: 2rem;
		line-height: 1.4rem;
	}
	ul.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
		padding: .7rem .8rem .7rem .7rem;
	}
	div .dropdown.menu a {
		padding-left: .6rem;
 		padding-right: .6rem;
	}
	
	#main-menu{
		padding-right: 0;
	}
}
@media screen and (min-width: 40em) and (max-width: 43em) {
	.menuUl > li, .menuUl > li > a{
		margin-right: 0;
	}
}
@media screen and (min-width: 40em) and (max-width: 49.9375em) {
	.bannerIcon{
		max-width: 300px;
	}
}