/* =========================================================
   HAYEF 1 - GLOBAL.CSS
   MyBB 1.8.x
   RTL / Responsive
   vBulletin 3 Blue Modern
   ========================================================= */

/* =========================================================
   RESET
   ========================================================= */

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	direction: rtl;
	background: #dce5ec;
}

body {
	margin: 0;
	padding: 0;
	background:
		linear-gradient(180deg, #dce6ed 0%, #eef3f7 48%, #dbe5eb 100%);
	color: #303c45;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

a {
	color: #24658d;
	text-decoration: none;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}

a:hover {
	color: #123f5d;
	text-decoration: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
}

/* =========================================================
   MAIN
   ========================================================= */

#container {
}

.wrapper {
	width: 96%;
	max-width: 1350px;
	margin: 0 auto;
}

/* =========================================================
   HEADER
   ========================================================= */

#header {
	background:
		linear-gradient(
			180deg,
			#5689a7 0%,
			#397493 42%,
			#245c7a 72%,
			#194762 100%
		);
	border-bottom: 4px solid #d3a52c;
	color: #fff;
	box-shadow:
		inset 0 1px rgba(255,255,255,.16),
		0 2px 5px rgba(0,0,0,.12);
}

#header .wrapper {
	padding: 18px 20px;
}

#logo {
	padding: 4px 0 8px;
}

#logo a {
	color: #fff;
	font-size: 27px;
	font-weight: bold;
	text-shadow:
		0 1px 2px rgba(0,0,0,.35),
		0 2px 5px rgba(0,0,0,.18);
}

#logo a:hover {
	color: #fff;
	text-decoration: none;
}

/* =========================================================
   USER PANEL
   ========================================================= */

#panel {
	background: rgba(8,30,44,.22);
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.10);
	color: #fff;
}

#panel .upper {
	padding: 8px 12px;
}

#panel a {
	color: #fff;
}

#panel a:hover {
	color: #ffe071;
	text-decoration: none;
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background:
		linear-gradient(
			180deg,
			#4b5b65 0%,
			#35444d 48%,
			#28363e 100%
		);
	border-bottom: 1px solid #17232b;
	box-shadow: inset 0 1px rgba(255,255,255,.07);
}

.menu li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.menu li a {
	display: block;
	padding: 10px 16px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
	border-left: 1px solid rgba(255,255,255,.06);
	border-right: 1px solid rgba(0,0,0,.08);
}

.menu li a:hover {
	background:
		linear-gradient(
			180deg,
			#5388a6,
			#2e6686 55%,
			#235674
		);
	color: #fff;
	text-decoration: none;
	box-shadow: inset 0 1px rgba(255,255,255,.12);
}

/* =========================================================
   CONTENT
   ========================================================= */

#content {
	padding: 18px;
	background: #fff;
	min-height: 450px;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.navigation {
	margin-bottom: 14px;
	padding: 8px 12px;
	background:
		linear-gradient(180deg, #fff, #f0f4f6);
	border: 1px solid #c4cfd5;
	border-radius: 3px;
	color: #68757d;
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		inset 0 1px rgba(255,255,255,.9);
}

.navigation a {
	color: #28678d;
	font-weight: bold;
}

.navigation a:hover {
	color: #123f5c;
}

/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4 {
	color: #285d7c;
}

h1 {
	font-size: 21px;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
}

h4 {
	font-size: 14px;
}

/* =========================================================
   MYBB TABLES
   مهم: لا نخفي أي مكون أصلي
   ========================================================= */

.tborder {
	width: 100%;
	border: 1px solid #b5c3cb;
	border-spacing: 0;
	border-collapse: separate;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	box-shadow:
		0 1px 3px rgba(0,0,0,.05),
		0 5px 15px rgba(30,65,85,.04);
}

.tborder td {
	padding: 9px 10px;
	vertical-align: middle;
}

.thead {
	background:
		linear-gradient(
			180deg,
			#4f83a1 0%,
			#346c8c 50%,
			#275d7b 100%
		);
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.thead a {
	color: #fff;
}

.thead a:hover {
	color: #ffe27a;
}

.tcat {
	background:
		linear-gradient(
			180deg,
			#fff 0%,
			#edf2f4 100%
		);
	border-bottom: 1px solid #c4ced3;
	color: #285d7d;
	font-weight: bold;
}

.tcat a {
	color: #285d7d;
}

.tcat a:hover {
	color: #143f5b;
}

.trow1 {
	background: #fff;
}

.trow2 {
	background: #f5f8fa;
}

.trow1:hover,
.trow2:hover {
	background: #edf5f8;
}

.trow_sep {
	background:
		linear-gradient(180deg, #edf3f6, #e0e8ec);
	color: #315f76;
	font-weight: bold;
}

/* =========================================================
   FORUM INDEX
   ========================================================= */

.forum_status {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 42px;
	margin-left: 9px;
	border: 1px solid #245670;
	border-radius: 4px;
	vertical-align: middle;
	background:
		linear-gradient(
			180deg,
			#5a91ad,
			#397794 50%,
			#285e7b
		);
	box-shadow:
		inset 0 1px rgba(255,255,255,.23),
		inset 0 -1px rgba(0,0,0,.12),
		0 2px 4px rgba(0,0,0,.10);
}

.forum_status:before {
	content: "▣";
	display: block;
	color: #fff;
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* =========================================================
   FORUM TITLES
   ========================================================= */

.subject {
	font-size: 13px;
}

.subject a {
	color: #245f86;
	font-weight: bold;
}

.subject a:hover {
	color: #123f5d;
}

.subject_new {
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
	line-height: 1.6;
	color: #77858d;
}

.smalltext a {
	color: #557789;
}

.smalltext a:hover {
	color: #245f86;
}

.largetext {
	font-size: 14px;
	color: #285d7d;
}

/* =========================================================
   FORUMDISPLAY
   ========================================================= */

.thread {
	border-bottom: 1px solid #d4dee3;
	transition: background .15s ease, box-shadow .15s ease;
}

.thread:hover {
	background: #f4f9fb;
	box-shadow: inset 3px 0 #367a9d;
}

.forumdisplay {
	width: 100%;
}

.thread_legend,
.forum_legend {
	color: #718089;
	font-size: 11px;
}

.thread_legend a,
.forum_legend a {
	color: #376f8d;
}

/* =========================================================
   SHOWTHREAD
   ========================================================= */

.post {
	position: relative;
	margin-bottom: 17px;
	border: 1px solid #b9c6cd;
	border-radius: 4px;
	background: #fff;
	box-shadow:
		0 1px 3px rgba(0,0,0,.06),
		0 5px 15px rgba(30,65,85,.04);
	overflow: hidden;
}

.post.classic {
	overflow: hidden;
}

.post_author {
	background:
		linear-gradient(
			180deg,
			#f6f9fa,
			#e8eef1
		);
	border-left: 1px solid #c4d0d5;
	color: #36444c;
	vertical-align: top;
}

.post_content {
	background: #fff;
	vertical-align: top;
}

.post_head {
	padding: 8px 12px;
	background:
		linear-gradient(180deg, #fff, #edf1f3);
	border-bottom: 1px solid #c8d2d7;
	color: #66757e;
}

.post_head a {
	color: #2a6688;
}

.post_head a:hover {
	color: #143f5c;
}

.post_body {
	padding: 15px;
	min-height: 70px;
	color: #333e44;
	font-size: 13px;
	line-height: 1.9;
}

.post_body img {
	max-width: 100%;
}

.post_body ul,
.post_body ol {
	padding-right: 25px;
}

.post_controls {
	padding: 7px 10px;
	min-height: 40px;
	background:
		linear-gradient(180deg, #f8fafb, #edf2f4);
	border-top: 1px solid #d1d9dd;
}

/* =========================================================
   POST AUTHOR / MEMBER CARD
   ========================================================= */

.post_author strong,
.post_author .largetext {
	color: #245d7d;
}

.post_author .largetext a {
	color: #245d7d;
	font-weight: bold;
}

.post_author .largetext a:hover {
	color: #123f5d;
}

.post_author .smalltext {
	color: #77848b;
}

.post_author .avatar {
	margin: 7px auto;
}

.avatar {
	padding: 4px;
	background: #fff;
	border: 1px solid #b8c5cb;
	border-radius: 4px;
	box-shadow:
		0 1px 3px rgba(0,0,0,.10),
		inset 0 1px rgba(255,255,255,.9);
}

/* =========================================================
   USERNAME / USER DATA
   ========================================================= */

.post_author .largetext {
	font-weight: bold;
}

.post_author .user_avatar {
	display: block;
	margin: 6px auto;
}

.post_author img {
	vertical-align: middle;
}

/* =========================================================
   ONLINE / OFFLINE
   ========================================================= */

.online {
	color: #3d8a55;
	font-weight: bold;
}

.offline {
	color: #8a9297;
	font-weight: bold;
}

/* =========================================================
   POST BUTTONS
   ========================================================= */

.postbit_buttons {
	display: inline-block;
}

.postbit_buttons a,
.postbit_buttons input,
.postbit_buttons button {
	display: inline-block;
	margin: 2px;
	padding: 5px 9px;
	border: 1px solid #b5c2c8;
	border-radius: 3px;
	background:
		linear-gradient(180deg, #fff, #e7ecef);
	color: #285f7e;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	box-shadow:
		inset 0 1px rgba(255,255,255,.9),
		0 1px 1px rgba(0,0,0,.03);
}

.postbit_buttons a:hover,
.postbit_buttons input:hover,
.postbit_buttons button:hover {
	background:
		linear-gradient(180deg, #fafdfe, #d8e5ea);
	border-color: #7d9aaa;
	color: #163f5b;
	text-decoration: none;
}

/* =========================================================
   POST DATE / NUMBER
   ========================================================= */

.post_date {
	color: #7b878e;
	font-size: 11px;
}

.post_date a {
	color: #6b7d87;
}

.post_date a:hover {
	color: #245f86;
}

/* =========================================================
   QUOTE
   ========================================================= */

blockquote {
	margin: 13px 0;
	padding: 11px 15px;
	background:
		linear-gradient(180deg, #f5f8f9, #edf2f4);
	border: 1px solid #c7d2d7;
	border-right: 4px solid #397798;
	border-radius: 3px;
	color: #59666d;
	box-shadow: inset 0 1px rgba(255,255,255,.85);
}

blockquote cite {
	display: block;
	margin-bottom: 6px;
	color: #2d627e;
	font-weight: bold;
}

/* =========================================================
   CODE
   ========================================================= */

.codeblock {
	margin: 13px 0;
	padding: 13px;
	background:
		linear-gradient(180deg, #26353e, #1c282f);
	border: 1px solid #152129;
	border-radius: 4px;
	color: #e5eef2;
	direction: ltr;
	text-align: left;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.7;
	overflow: auto;
	box-shadow: inset 0 1px rgba(255,255,255,.04);
}

/* =========================================================
   FORMS
   ========================================================= */

input.textbox,
textarea,
select {
	max-width: 100%;
	padding: 7px 9px;
	border: 1px solid #b6c2c8;
	border-radius: 3px;
	background: #fff;
	color: #303a40;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
	transition: border-color .15s ease, box-shadow .15s ease;
}

input.textbox:hover,
textarea:hover,
select:hover {
	border-color: #95aab6;
}

input.textbox:focus,
textarea:focus,
select:focus {
	border-color: #39769a;
	outline: none;
	box-shadow:
		0 0 0 2px rgba(55,116,151,.10),
		inset 0 1px 2px rgba(0,0,0,.03);
}

textarea {
	resize: vertical;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.button,
input.button,
button {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid #aebdc5;
	border-radius: 3px;
	background:
		linear-gradient(180deg, #fff, #e1e8eb);
	color: #285d7d;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	cursor: pointer;
	box-shadow:
		inset 0 1px rgba(255,255,255,.9),
		0 1px 2px rgba(0,0,0,.04);
}

.button:hover,
input.button:hover,
button:hover {
	background:
		linear-gradient(180deg, #fafdfe, #d2dfe5);
	border-color: #7e9aa9;
	color: #173f5b;
	text-decoration: none;
}

/* =========================================================
   PRIMARY
   ========================================================= */

input[type="submit"],
.button.primary,
input.button.primary {
	background:
		linear-gradient(
			180deg,
			#4e87a6,
			#306b8c 55%,
			#255b76
		);
	border-color: #24536b;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

input[type="submit"]:hover,
.button.primary:hover,
input.button.primary:hover {
	background:
		linear-gradient(
			180deg,
			#5a92ad,
			#367696 55%,
			#28617c
		);
	color: #fff;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {
	margin: 11px 0;
	text-align: right;
}

.pagination a,
.pagination .pagination_current {
	display: inline-block;
	min-width: 28px;
	margin: 2px;
	padding: 4px 8px;
	border: 1px solid #b7c4ca;
	border-radius: 3px;
	background:
		linear-gradient(180deg, #fff, #e8edef);
	color: #285d7c;
	text-align: center;
	font-size: 11px;
	box-shadow: inset 0 1px rgba(255,255,255,.9);
}

.pagination a:hover,
.pagination .pagination_current {
	background:
		linear-gradient(180deg, #4d84a2, #285e7c);
	border-color: #214f68;
	color: #fff;
	text-decoration: none;
}

/* =========================================================
   ALERTS
   ========================================================= */

.error,
.success,
.warning {
	margin: 10px 0;
	padding: 10px 13px;
	border-radius: 3px;
}

.error {
	border: 1px solid #d59a9a;
	border-right: 4px solid #b85c5c;
	background: #fff1f1;
	color: #983d3d;
}

.success {
	border: 1px solid #a9cba9;
	border-right: 4px solid #579257;
	background: #eff9ef;
	color: #39733b;
}

.warning {
	border: 1px solid #ddc48a;
	border-right: 4px solid #c49b32;
	background: #fff8e9;
	color: #80641e;
}

/* =========================================================
   FIELDSET
   ========================================================= */

fieldset {
	margin: 12px 0;
	padding: 12px 14px;
	border: 1px solid #c4d0d5;
	border-radius: 4px;
	background: #f7f9fa;
}

legend {
	padding: 0 7px;
	color: #2d6482;
	font-weight: bold;
}

/* =========================================================
   SEARCH / FILTER
   ========================================================= */

input[type="search"] {
	padding: 7px 9px;
	border: 1px solid #b6c2c8;
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-family: Tahoma, Arial, sans-serif;
}

input[type="search"]:focus {
	border-color: #39769a;
	outline: none;
	box-shadow: 0 0 0 2px rgba(55,116,151,.10);
}

/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

input[type="checkbox"],
input[type="radio"] {
	vertical-align: middle;
	accent-color: #2d6d8f;
}

/* =========================================================
   FORUM STATISTICS
   تنسيق المكونات الأصلية بدون اختراع متغيرات
   ========================================================= */

#stats,
.statistics,
.stats,
.statistic {
	color: #3e4d55;
}

#stats .tborder,
.statistics .tborder,
.stats .tborder {
	margin-top: 10px;
}

/* =========================================================
   WHO IS ONLINE
   ========================================================= */

#online,
.online_row,
.whois {
	color: #4b5d66;
}

#online a,
.online_row a,
.whois a {
	color: #28698d;
	font-weight: bold;
}

/* =========================================================
   LANGUAGE / STYLE SELECTOR
   MyBB الأصلية تبقى موجودة
   ========================================================= */

/* عناصر اختيار اللغة */
#footer select[name="language"],
#footer .language,
.language_selector {
	float: left;
}

/* اختيار الاستايل */
#footer select[name="theme"],
#footer .theme,
.theme_selector {
	float: right;
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer {
	margin-top: 0;
	background:
		linear-gradient(
			180deg,
			#3b4b54 0%,
			#2c3941 50%,
			#202b32 100%
		);
	border-top: 4px solid #d2a52a;
	color: #cbd4d8;
	box-shadow: inset 0 1px rgba(255,255,255,.05);
}

#footer .upper {
	padding: 16px;
}

/* روابط وخدمات المنتدى */
#footer a {
	color: #e0b63d;
}

#footer a:hover {
	color: #ffe17a;
	text-decoration: none;
}

#footer .smalltext {
	color: #aebbc1;
}

/* منطقة الحقوق */
#footer .lower {
	padding: 12px 15px;
	border-top: 1px solid rgba(255,255,255,.07);
	text-align: center;
	color: #aeb9be;
}

#footer .lower a {
	color: #dcb343;
}

/* =========================================================
   خدمات المنتدى والروابط السفلية
   ========================================================= */

.footer_links {
	text-align: center;
}

.footer_links a {
	margin: 0 5px;
}

/* =========================================================
   TOP / BOTTOM LINKS
   ========================================================= */

.scrolltop,
.totop {
	color: #397595;
	font-size: 11px;
}

.scrolltop:hover,
.totop:hover {
	color: #173f5b;
}

/* =========================================================
   THREAD TOOLS
   ========================================================= */

.thread_tools {
	color: #63747d;
}

.thread_tools a {
	color: #376f8d;
}

.thread_tools a:hover {
	color: #245f82;
}

/* =========================================================
   ICON / IMAGE ALIGNMENT
   ========================================================= */

img[src*="on.gif"],
img[src*="off.gif"],
img[src*="closed.gif"],
img[src*="folder.gif"] {
	vertical-align: middle;
}

/* =========================================================
   RSS
   ========================================================= */

img[src*="rss"] {
	vertical-align: middle;
}

/* =========================================================
   TABLE ROW BORDERS
   ========================================================= */

.tborder tr + tr td {
	border-top: 1px solid rgba(195,207,214,.45);
}

/* =========================================================
   MOBILE TABLE SAFETY
   ========================================================= */

.tborder {
	max-width: 100%;
}

.tborder td img {
	vertical-align: middle;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1100px) {
	#container {
		width: 97%;
}

.wrapper {
		width: 97%;
}

#content {
		padding: 15px;
}

.post_body {
		padding: 14px;
}


}

@media screen and (max-width: 900px) {
	body {
		font-size: 12px;
}

#header .wrapper {
		padding: 15px;
}

#content {
		padding: 12px;
}

.post_author {
		border-left: 0;
		border-bottom: 1px solid #c4d0d5;
}

.tborder td {
		padding: 8px;
}

.post_body {
		padding: 13px;
}


}

@media screen and (max-width: 700px) {
	html,
	body {
		background: #fff;
}

#container {
		width: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
}

.wrapper {
		width: 100%;
}

#header .wrapper {
		padding: 13px;
}

#content {
		padding: 9px;
}

#logo {
		text-align: center;
}

#logo a {
		font-size: 23px;
}

.menu {
		text-align: center;
}

.menu li {
		display: inline-block;
}

.menu li a {
		padding: 8px 9px;
		font-size: 11px;
}

.tborder {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
}

.post {
		margin-bottom: 12px;
}

.post_body {
		padding: 11px;
		line-height: 1.8;
}

.post_controls {
		padding: 7px;
}

.pagination {
		text-align: center;
}

#footer .upper {
		padding: 13px;
}


}

@media screen and (max-width: 520px) {
	body {
		font-size: 12px;
}

#content {
		padding: 7px;
}

#logo a {
		font-size: 21px;
}

.menu li a {
		padding: 7px 6px;
		font-size: 10px;
}

.navigation {
		padding: 7px 9px;
		margin-bottom: 9px;
}

.tborder td {
		padding: 7px;
}

.post_author,
	.post_content {
		display: block;
		width: 100%;
}

.post_author {
		text-align: center;
		border-left: 0;
		border-bottom: 1px solid #c4d0d5;
}

.post_author .avatar {
		margin: 7px auto;
}

.postbit_buttons a,
	.postbit_buttons input,
	.postbit_buttons button {
		padding: 5px 7px;
		font-size: 10px;
}

.button,
	input.button,
	button {
		padding: 6px 10px;
}

#footer .lower {
		text-align: center;
}

#footer select {
		max-width: 100%;
}


}

@media screen and (max-width: 380px) {
	#content {
		padding: 5px;
}

.menu li a {
		padding: 6px 5px;
		font-size: 9px;
}

#logo a {
		font-size: 19px;
}

.post_body {
		padding: 8px;
}

.pagination a,
	.pagination .pagination_current {
		min-width: 25px;
		padding: 4px 6px;
}


}

/* =========================================================
   END HAYEF 1
   ========================================================= */
/* =====================================================
   HAYEF 2 - POSTBIT PROFESSIONAL UPGRADE
   Based on working HAYEF 1
   MyBB 1.8.x
   ===================================================== */

/* POST CARD */

.post {
    border: 1px solid #d6e5f0;
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(35,100,150,.08);
    transition: border-color .2s, box-shadow .2s;
}

.post:hover {
    border-color: #a9cce4;
    box-shadow: 0 5px 18px rgba(35,100,150,.12);
}

/* MEMBER PANEL */

.post_author {
    background: #f1f7fc;
    border-left: 1px solid #d6e5f0;
    padding: 14px 10px;
}

/* USERNAME */

.post_author .largetext {
    color: #216b9d;
    font-size: 15px;
    font-weight: bold;
}

.post_author .largetext a {
    color: #216b9d;
}

.post_author .largetext a:hover {
    color: #3695ce;
}

/* AVATAR */

.post_author .avatar {
    padding: 4px;
    border: 2px solid #d4e7f5;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(35,100,150,.12);
}

/* MEMBER DETAILS */

.post_author .smalltext {
    color: #73899b;
    line-height: 1.9;
}

.post_author strong {
    color: #286b98;
}

/* POST HEADER */

.post_head {
    background: #f5faff;
    border-bottom: 1px solid #e0ebf3;
    padding: 10px 13px;
}

/* POST BODY */

.post_body {
    background: #fff;
    padding: 18px;
    color: #34495a;
    font-size: 14px;
    line-height: 2;
}

/* POST CONTROLS */

.post_controls {
    background: #f3f8fc;
    border-top: 1px solid #dce9f2;
    padding: 9px 12px;
}

/* POST BUTTONS */

.postbit_buttons a,
.postbit_buttons input,
.postbit_buttons button {
    background: #fff;
    border: 1px solid #cfe0ec;
    border-radius: 6px;
    color: #2878ad;
    padding: 6px 11px;
    transition: .2s;
}

.postbit_buttons a:hover,
.postbit_buttons input:hover,
.postbit_buttons button:hover {
    background: #2878ad;
    border-color: #2878ad;
    color: #fff;
}

/* ONLINE */

.online {
    color: #239b69;
}

/* QUOTE */

blockquote {
    background: #f2f8fd;
    border: 1px solid #d8e8f3;
    border-right: 4px solid #378abd;
    border-radius: 7px;
    padding: 13px;
}

/* MOBILE */

@media screen and (max-width: 520px) {
    .post {
        border-radius: 8px;
}

.post_author {
        background: #f1f7fc;
        border-bottom: 1px solid #d6e5f0;
}

.post_body {
        padding: 12px;
        font-size: 13px;
}

.post_controls {
        padding: 8px;
}


}

/* END HAYEF 2 */

/* =====================================================
   HAYEF 3 - PREMIUM POSTBIT LEGACY
   MyBB 1.8.x
   Professional White & Blue
   RTL Responsive
   ===================================================== */

/* MAIN POST */

.post.classic {
    background: #ffffff;
    border: 1px solid #dce8f2;
    border-radius: 12px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(37,91,132,.07);
    transition: .25s ease;
}

.post.classic:hover {
    border-color: #b8d7ec;
    box-shadow: 0 7px 23px rgba(37,91,132,.12);
}

/* AUTHOR CARD */

.post.classic .post_author {
    background: linear-gradient(
        160deg,
        #f8fcff 0%,
        #eaf4fb 100%
    );
    border-left: 1px solid #dce9f2;
    padding: 18px 12px;
    text-align: center;
    vertical-align: top;
    position: relative;
}

/* BLUE TOP LINE */

.post.classic .post_author:before {
    content: "";
    display: block;
    height: 4px;
    margin: -18px -12px 15px;
    background: linear-gradient(
        90deg,
        #80bde0,
        #287db4,
        #174f7a
    );
}

/* USERNAME */

.post.classic .post_author .largetext {
    display: block;
    margin: 9px 0;
    color: #205f8c;
    font-size: 15px;
    font-weight: bold;
}

.post.classic .post_author .largetext a {
    color: #205f8c;
}

.post.classic .post_author .largetext a:hover {
    color: #3896ce;
}

/* AVATAR */

.post.classic .post_author .avatar {
    display: inline-block;
    margin: 9px auto;
    padding: 4px;
    background: #fff;
    border: 2px solid #cfe4f3;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(37,105,150,.15);
    transition: .25s ease;
}

.post.classic .post_author .avatar:hover {
    border-color: #4799ca;
    box-shadow: 0 6px 18px rgba(37,105,150,.22);
}

/* USER INFORMATION */

.post.classic .post_author .smalltext {
    color: #71889a;
    font-size: 11px;
    line-height: 2;
}

.post.classic .post_author strong {
    color: #286b98;
}

/* RANK IMAGES */

.post.classic .post_author img {
    vertical-align: middle;
}

/* ONLINE STATUS */

.post.classic .post_author .online {
    color: #209968;
    font-weight: bold;
}

.post.classic .post_author .offline {
    color: #98a5af;
}

/* POST CONTENT */

.post.classic .post_content {
    background: #fff;
    vertical-align: top;
}

/* POST HEADER */

.post.classic .post_head {
    padding: 12px 15px;
    background: linear-gradient(
        180deg,
        #ffffff,
        #f5f9fc
    );
    border-bottom: 1px solid #e4edf4;
    color: #8495a3;
}

.post.classic .post_head a {
    color: #347eae;
    font-weight: bold;
}

.post.classic .post_head a:hover {
    color: #174f78;
}

/* POST DATE */

.post.classic .post_date {
    color: #91a0ac;
    font-size: 11px;
}

/* POST MESSAGE */

.post.classic .post_body {
    min-height: 110px;
    padding: 21px;
    background: #fff;
    color: #34485a;
    font-size: 14px;
    line-height: 2.1;
}

.post.classic .post_body img {
    max-width: 100%;
    height: auto;
}

/* MESSAGE LINKS */

.post.classic .post_body a {
    color: #287db5;
}

.post.classic .post_body a:hover {
    color: #174f78;
}

/* QUOTE */

.post.classic blockquote {
    background: #f3f8fc;
    border: 1px solid #dceaf3;
    border-right: 4px solid #3789bd;
    border-radius: 8px;
    padding: 14px 16px;
    color: #526a7b;
}

/* CODE */

.post.classic .codeblock {
    border-radius: 8px;
    border: 1px solid #d7e4ed;
}

/* POST FOOTER */

.post.classic .post_controls {
    padding: 11px 14px;
    min-height: 44px;
    background: #f6faff;
    border-top: 1px solid #e0ebf3;
}

/* POST BUTTONS */

.post.classic .postbit_buttons a,
.post.classic .postbit_buttons input,
.post.classic .postbit_buttons button {
    display: inline-block;
    margin: 3px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #d3e3ef;
    border-radius: 7px;
    color: #3479a5;
    font-size: 11px;
    font-weight: bold;
    transition: .2s ease;
}

.post.classic .postbit_buttons a:hover,
.post.classic .postbit_buttons input:hover,
.post.classic .postbit_buttons button:hover {
    background: #287db5;
    border-color: #287db5;
    color: #fff;
}

/* POST SEPARATION */

.post.classic + .post.classic {
    margin-top: 18px;
}

/* RESPONSIVE */

@media screen and (max-width: 900px) {
    .post.classic .post_author {
        padding: 14px 9px;
}

.post.classic .post_body {
        padding: 16px;
}


}

@media screen and (max-width: 700px) {
    .post.classic {
        border-radius: 9px;
        margin-bottom: 14px;
}

.post.classic .post_author {
        border-left: 0;
        border-bottom: 1px solid #dce9f2;
        text-align: center;
}

.post.classic .post_author:before {
        margin: -14px -9px 12px;
}

.post.classic .post_body {
        padding: 13px;
        font-size: 13px;
        line-height: 1.9;
}

.post.classic .post_controls {
        padding: 8px;
}


}

@media screen and (max-width: 520px) {
    .post.classic .post_author,
    .post.classic .post_content {
        display: block;
        width: 100%;
}

.post.classic .post_author .avatar {
        max-width: 90px;
}

.post.classic .post_head {
        padding: 9px;
}

.post.classic .post_body {
        padding: 11px;
}


}

/* =====================================================
   END HAYEF 3
   ===================================================== */