.topic-header { background-color: #009E8F; color: #ffffff; width: calc(100%); height: 3em; position: fixed; left: 0; top: 0; font-family: 'Simplified Arabic'; display: table; box-sizing: border-box; }
.topic-header-shadow { height: 3em; width: 100%; }
.topic-header .logo { height: calc(100% - 0.5rem); margin: 0.25rem; width: 270px; background-color: transparent; cursor: pointer; background-image: url('31-7-2023.jpg'); background-repeat: no-repeat; background-position: center center; background-size: contain; }
.nav { width: 100%; display: table-cell; }
.title { width: 40%; height: 100%; float: left; line-height: 3em; cursor: pointer; }
.gotohome { width: 60%; float: left; text-align: right; height: 100%; line-height: 3em; cursor: pointer; }
.title span, .gotohome span { padding: 0em 1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; }
.gotohome a { color: inherit; text-decoration: none; padding: 0em 1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.gotohome a:hover {background-color: inherit; }
.rh-hide{display: none;}

/************************************** New Styles ***************************************/
@font-face {
    font-family: 'IBM PlexSans Regular';
    src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('woff2'),
    url('fonts/IBMPlexSansArabic-Regular.woff') format('woff');
}
@font-face {
    font-family: 'IBM PlexSans SemiBold';    
    src: url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    src: url('fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'),
    url('fonts/IBMPlexSansArabic-SemiBold.woff') format('woff');
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM PlexSans Bold';
    src: url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    src: url('fonts/IBMPlexSansArabic-Bold.woff') format('woff'),
    url('fonts/IBMPlexSansArabic-Bold.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}


.topic-header {
	height: 70px;
	margin-right: 0;
	min-width: 330px;
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06);
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06);
	z-index: 3;
	margin-bottom: 15px;
	display: flex;
	background: #f6f6f6;
	border-bottom: 1px solid #e8e8e8;
	z-index: 60;
	color: #717171;
	z-index: 10;
	position: relative;
	font-family: 'IBM PlexSans Bold';
	flex-direction: row-reverse;
}
.topic-header-shadow {
    display: none;
}

.topic-header .logo {
	padding-left: 10px;
	box-sizing: content-box;
	height: 100%;
	width: 170px;
	margin-left: 0;
	background-origin: content-box;
	max-width: 400px;
	background-position: -27px 6px;
	background-size: 148px;
	background-color: transparent;
	cursor: pointer;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
}
body {
    padding: 0;
    margin: 0;
}
.title {
	float: right;
	line-height: 3em;
	text-align: right;
    font-size: 23px;
    color: #171717;
}
.title span {
	padding: 20px 21px;
	line-height: 25px;
	display: block;
}
.gotohome {
    text-align: left;
}
.gotohome a,
.title span, 
.gotohome span {
	display: block;
	line-height: 68px;
}

.topic-header .nav {    
	flex-direction: row-reverse;
}
.topic-header .nav a,
.gotohome a {
	color: #009e8f;
    font-size: 16px;
}
.title span, .gotohome span {
	padding: 0 20px;
}
.topic-header .logo {
	margin: 0;
}