/*=============================================================================
	(c) Copyright, Hamid R. Kashani, 2016-2018.  All rights reserved.
=============================================================================*/

.Page_TopBannerDiv {
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	margin: 0;
	border: 0;
	border-bottom-color: #444444;
	border-bottom-style:solid;
	border-bottom-width: 1px;
	padding: 0px 10px 0 10px;
	background-color: #101030;
	background-color: var(--main-bg-color);
	color: white;
	vertical-align: middle;
	/* FLEX CONTAINER */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:  flex-start;
	align-items: center;
/*overflow-x: hidden;*/
}

/* HAMBURGER ICON */
.Page_TopRowHamburgerIcon {
	width: 32px;
	height: 20px;
	margin: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0;
	flex-grow: 0;
}

/* Message DIVISION */
.Page_TopBannerMessageBlock {
	margin: auto 0 auto 12px;
	border: 0;
	padding: 0;
	font-size: 11px;
	/*font-weight: bold;*/
	text-align: left;
	color:inherit;
	/* Ellipsis */
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Flex Item */
	flex-shrink: 2;
	display: none;
}

a.Announcement:link, a.Announcement:visited, a.Announcement:hover, a.Announcement:active {
	font-size: inherit;
	font-weight: bold;
	color:#ccccff;
}

/* PHONE DIVISION */
.Page_TopBannerPhoneBlock {
	margin: auto 0 auto 12px;
	border: 0;
	padding: 0;
	font-size: 11px;
	font-weight: bold;
	/* Ellipsis */
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Flex Item */
	flex-shrink: 2;
	display: inline-block;
}

a.Page_TopBannerPhoneBlockPhone:link, a.Page_TopBannerPhoneBlockPhone:visited,
a.Page_TopBannerPhoneBlockPhone:hover, a.Page_TopBannerPhoneBlockPhone:focus {
	font-size: inherit;
	font-weight: inherit;
	/*color: white;*/
	color: inherit;
}
a.Page_TopBannerPhoneBlockPhone:hover {
	color: #cccccc;
}

/* LANGUAGE SELECTION */
.Page_TopBannerLangBlock {
	box-sizing: border-box;
	margin: auto 0 auto auto;
	margin-left: 8px;
	border: 0;
	padding: 0 0 0 0;
	flex-shrink: 0;
	flex-grow: 0;	    
    font-size: 14px;
	display: none;
}

.Page_LangFormDiv {
	margin: 0;
	border: 0;
	padding: 0;
	text-align: right;	    
    font-size: inherit;
}

select.TopBannerLangSelect  {
	height: 20px;
	margin: auto 0 auto auto;
	border: 1px solid white;
    border-radius: 2px 0 0 2px;
	padding: 0;
	background-color: #101030;
	background-color: var(--main-bg-color);
	color: inherit;
	font-family: inherit;	    
	font-size: inherit;
    font-weight: normal;
	cursor: pointer;
}

/* SEARCH BOX BLOCK */
.Page_SearchContainerBlock {
	box-sizing:border-box;
	margin: auto 0px auto auto;
	border: 0;
	padding: 0;
	padding-left: 10px;
	align-self:unset;
	/* Flex Container Attributes */
	display: none; /* must be flex; */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:  flex-start;
	align-items: center;
	/* Flex-Item Attributes */
	flex-shrink: 0;
}

.Page_SearchInputBlockDiv {
	box-sizing:border-box;
	margin: 0 4px 0 0;		/* distance between search input box and the search icon*/
	border: 0;
	padding: 0;
	font-weight: bold;
	color: white;
	text-align: left;	
	/* Flex Container */
	display: none; /* must be flex; */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:  flex-start;
	align-items: center;
	/* Flex-Item Attributes */
	flex-shrink: 0;
}

.Page_SearchInputBox  {
	font-family: inherit;
	box-sizing:border-box;
	height: 20px;						/*	Search box height */
	width: 120px;
	margin: auto 0 auto 0;
	border: 0;
	border-bottom: 1px solid white;
	padding: 0;
	background-color: #101030;
	background-color: var(--main-bg-color);
	color:white;
	font-size: 1rem;					/*	Search box font size */
	/* Flex-Item Attributes */
	flex-shrink: 0;
}
input.Page_SearchInputBox:focus {
	outline: none;
}

.Page_SearchIconDiv {
	box-sizing:border-box;
	margin: auto 0 auto auto;
	border: 0;
	padding: 0;
	vertical-align: middle;
	/* Flex-Item Attributes */
	flex-shrink: 0;
}

.Page_SearchIcon {
	width: 16px;						/* search icon height */
	height: auto;
	margin: auto 0 auto 0;
	border: 0;
	padding: 0;
	display: block;
}
@media only screen and (max-width: 340px) {
	.Page_TopBannerDiv { height: 32px; padding: 0px 10px 0 10px;}
	.Page_TopRowHamburgerIcon { width: 32px; height: 20px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 11px; margin-left: 14px;}
	.Page_TopBannerPhoneBlock {display: inline-block;}
	.Page_TopBannerMessageBlock {display: none;}
	.Page_TopBannerLangBlock {margin-left: 8px; font-size: 14px;}
	select.TopBannerLangSelect {height: 20px;}
	.Page_SearchContainerBlock {padding-left: 10px;}
	.Page_SearchInputBox {width: 150px;	height: 20px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 18px}
}
@media only screen and (min-width: 340px) and (max-width: 413px) {
	.Page_TopBannerDiv { height: 32px; padding: 0px 10px 0 10px;}
	.Page_TopRowHamburgerIcon { width: 32px; height: 20px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 11px; margin-left: 14px;}
	.Page_TopBannerPhoneBlock {display: inline-block;}
	.Page_TopBannerMessageBlock {display: none;}
	.Page_TopBannerLangBlock {margin-left: 8px; font-size: 14px;}
	select.TopBannerLangSelect {height: 20px;}
	.Page_SearchContainerBlock {padding-left: 10px;}
	.Page_SearchInputBox {width: 150px;	height: 20px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 18px}
}
@media only screen and (min-width: 413px) and (max-width: 480px) {
	.Page_TopBannerDiv { height: 32px; padding: 0px 18px 0 18px; }
	.Page_TopRowHamburgerIcon { width: 35px; height: 20px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 11px; margin-left: 23px;}
	.Page_TopBannerPhoneBlock {display: inline-block;}
	.Page_TopBannerMessageBlock {display: none;}
	.Page_TopBannerLangBlock {margin-left: 16px; font-size: 16px;}
	select.TopBannerLangSelect {height: 22px;}
	.Page_SearchContainerBlock {padding-left: 16px;}
	.Page_SearchInputBox {width: 180px;	height: 22px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 22px}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {  
	.Page_TopBannerDiv { height: 40px; padding: 0px 12px 0 12px; }
	.Page_TopRowHamburgerIcon { width: 42px; height: 24px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 12px; margin-left: 18px;}
	.Page_TopBannerPhoneBlock {display: none;}
	.Page_TopBannerMessageBlock {display: inline-block;}
	.Page_TopBannerLangBlock {margin-left: 16px; font-size: 16px;}
	select.TopBannerLangSelect {height: 23px;}
	.Page_SearchContainerBlock {padding-left: 16px;}
	.Page_SearchInputBox {width: 200px;	height: 22px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 22px}
}
@media only screen and (min-width: 599px) and (max-width: 800px) {
	.Page_TopBannerDiv { height: 40px; padding: 0px 18px 0 18px; }
	.Page_TopRowHamburgerIcon { width: 42px; height: 24px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 13px; margin-left: 24px;}
	.Page_TopBannerPhoneBlock {display: none;}
	.Page_TopBannerMessageBlock {display: inline-block;}
	.Page_TopBannerLangBlock {margin-left: 16px; font-size: 16px;}
	select.TopBannerLangSelect {height: 24px;}
	.Page_SearchContainerBlock {padding-left: 20px;}
	.Page_SearchInputBox {width: 230px;	height: 24px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 22px}
}
@media only screen and (min-width: 800px) and (max-width: 1000px) {	
	.Page_TopBannerDiv { height: 40px; padding: 0px 24px 0 24px; }
	.Page_TopRowHamburgerIcon { width: 42px; height: 24px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 14px; margin-left: 32px;}
	.Page_TopBannerPhoneBlock {display: none;}
	.Page_TopBannerMessageBlock {display: inline-block;}
	.Page_TopBannerLangBlock {margin-left: 16px; font-size: 16px;}
	select.TopBannerLangSelect {height: 24px;}
	.Page_SearchContainerBlock {padding-left: 24px;}
	.Page_SearchInputBox {width: 300px;	height: 26px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 24px}
}
@media only screen and (min-width: 1000px) {	
	.Page_TopBannerDiv { height: 40px;  padding: 0px 30px 0 30px;}
	.Page_TopRowHamburgerIcon { width: 42px; height: 24px; }
	.Page_TopBannerMessageBlock, .Page_TopBannerPhoneBlock { font-size: 18px; margin-left: 54px;} /*17*/
	.Page_TopBannerPhoneBlock {display: none;}
	.Page_TopBannerMessageBlock {display: inline-block;}
	.Page_TopBannerLangBlock {margin-left: 16px; font-size: 16px;}
	select.TopBannerLangSelect {height: 26px;}
	.Page_SearchContainerBlock {padding-left: 24px;}
	.Page_SearchInputBox {width: 350px;	height: 28px; font-size: 1rem;}
	.Page_SearchInputBlockDiv {margin-right: 8px;}
	.Page_SearchIcon {width: 26px}
}