body {
	background: #fcfcfc;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
	color: #fff !important;
}

/* ===== Scroll Bar ===== */

body::-webkit-scrollbar {
	width: 5px;
}

body::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
	background-color: #303030;
}


/* ===== IFrame Body ===== */

body.inline {
	padding: 10px !important;
	background-color: #fff;
}

body.inline::-webkit-scrollbar {
	width: 5px;
}

body.inline::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

body.inline::-webkit-scrollbar-thumb {
	background-color: #303030;
}


/* ===== Header ===== */

.header {
	width: 100%;
	margin: 0;
	color: #f8f8f8;
	display: flex;
	z-index: 10000;
	position: fixed;
	background: #202020;
}

div.header .header_title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-align: right;
	font-weight: bold;
	padding-right: 10px;
	margin-bottom: 0;
}

div.header .header_title a {
	display: inline-block;
	color: #f8f8f8;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.header .header_title small {
	font-size: 10px;
	font-weight: normal;
}

div.header .header_title [side-menu-toggle] {
	display: none;
}

div.header .header_links {
	padding: 10px 0 0 10px;
	text-align: left;
	flex: 1;
}

div.header .header_links .btn-group {
	margin: 0 5px 10px 0;
}

div.header .header_links .dropdown-toggle {
	color: white;
	background: rgba(255, 255, 255, .1);
	border-radius: 3px;
	border: 0;
	padding: 10px 15px 10px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s;
}

div.header .header_links .dropdown-toggle:hover {
	background: rgba(255, 255, 255, .2);
}

div.header .header_links .dropdown-toggle>i {
	font-size: 18px;
}

div.header .header_links .dropdown-toggle>span.text {
	margin: 0 10px 0 0;
}

div.header .header_links .dropdown-toggle>.fa-angle-down {
	margin: 0 10px 0 0;
}

div.header .header_links .dropdown-toggle .notification_count {
	background: red;
	font-size: 10px;
	font-weight: bold;
	border-radius: 3px;
	padding: 0 5px 0 5px;
	line-height: 1;
}

div.header .header_links .dropdown-menu li a {
	font-size: 12px;
}

div.header .header_links .dropdown-menu li a i {
	font-size: 14px;
	line-height: 1.8;
}

@media screen and (min-width:992px) {
	div.header {
		height: 60px;
		align-items: center;
	}
	div.header .header_title {
		background: transparent;
	}
}

@media screen and (max-width:992px) {
	div.header .header_links .dropdown-toggle span.text:not(.notifications_text),
	div.header .header_links .dropdown-toggle .fa-angle-down,
	div.header .header_title a,
	div.header .notifications-group {
		display: none;
	}
	div.header {
		padding: 0 0 0 5px;
	}
	div.header:lang(ar) {
		flex-direction: row-reverse;
		padding: 0 5px 0 0;
	}
	div.header .header_title {
		background: transparent;
		flex-basis: 30px;
		width: 100%;
		padding-left: 10px;
	}
	div.header .header_links {
		text-align: right !important;
	}
	div.header .header_links .dropdown-toggle {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 35px;
		height: 35px;
		padding: 0 10px 0 10px;
	}
	div.header .header_title [side-menu-toggle] {
		font-size: 26px;
		flex-basis: 30px;
		display: block;
		margin: 0 5px 0 5px;
	}
}


/* Search Menu */

.search_bar button {
	display: none;
}

.search_bar input {
	border: 0 !important;
	box-shadow: initial !important;
	background: rgba(255, 255, 255, .05) !important;
	color: white !important;
	height: 40px !important;
	border-radius: 20px !important;
	padding-right: 20px !important;
}

.search_icon {
	display: inline-block;
	position: relative
}

.search_icon:after {
	color: rgba(255, 255, 255, .2);
	font-size: 20px;
	font-family: "Font Awesome 5 Pro";
	content: "\f002";
	position: absolute;
	left: 10px;
	top: 4px;
}

.search_bar input::-webkit-input-placeholder {
	color: #eee;
}

.search_bar input:-ms-input-placeholder {
	color: #eee;
}

.search_bar input::placeholder {
	color: #bbb;
}

#search_results {
	width: 320px;
	font-size: 13px;
	max-height: 75vh;
	overflow-y: scroll;
	text-align: start;
}

#search_results::-webkit-scrollbar {
	max-width: 5px;
	max-height: 5px;
	border-radius: 3px 0 0 3px;
}

#search_results::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	border-radius: 3px 0 0 3px;
}

#search_results::-webkit-scrollbar-thumb {
	background-color: #808080;
	border-radius: 3px 0 0 3px;
}

#search_results li .index_button b {
	display: block;
	margin-right: 35px;
	font-size: 12px;
}

#search_results li .index_button img {
	display: inline;
	float: right;
	width: 30px;
	height: 30px;
}

#search_results li .index_button .search_location {
	display: block;
	font-weight: normal;
	font-size: 10px;
}


/* User Menu */

div.header .btn-group.user img {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	padding: 0;
}

div.header .btn-group.user button {
	padding: 0;
	background: transparent !important;
	box-shadow: initial !important;
}

div.header .btn-group.user .fa-angle-down {
	margin: 0 15px 0 10px !important;
}

div.header .btn-group.user .text {
	text-align: right;
	line-height: 1.4;
}

div.header .btn-group.user small {
	font-size: 9px;
	color: rgba(255, 255, 255, .75);
}

.user_dropdown_header {
	position: relative;
	width: 300px;
	background: #eee;
	padding: 10px;
	border-bottom: 1px solid #bbb;
	color: #202020;
	text-align: start;
}

.user_dropdown_header small {
	color: #606060 !important;
}

.user_dropdown_header a {
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 5px 10px 5px 10px;
}

.user_dropdown_header a i {
	color: #eee;
}


@media screen and (max-width:768px) {
	.user_dropdown_header {
		width: 200px;
	}
}



/* Notification Menu */

#notifications_menu {
	width: 320px;
	font-size: 13px;
	max-height: 75vh;
	overflow-y: scroll;
}

#notifications_menu::-webkit-scrollbar {
	max-width: 5px;
	max-height: 5px;
	border-radius: 3px 0 0 3px;
}

#notifications_menu::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	border-radius: 3px 0 0 3px;
}

#notifications_menu::-webkit-scrollbar-thumb {
	background-color: #808080;
	border-radius: 3px 0 0 3px;
}


/* ===== Inputs ===== */

input[type=text],
input[type=password],
input[type=number],
input[type=file],
input[type=email],
input[type=date],
input[type=time],
input[type=search],
textarea,
select {
	margin: 0;
	padding: 5px;
	color: black;
	width: 100%;
	border: 1px solid #b9b9b9;
	background: #fcfcfc;
	min-height: 30px;
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .05);
}

select {
	padding: 0 5px 0 5px;
}

textarea {
	min-height: 80px;
}

.select2-selection,
.tag-box-block li .input-tag,
.tag-box {
	margin: 0;
	color: black;
	width: 100%;
	border: 1px solid #b9b9b9;
	background: #fcfcfc;
	min-height: 30px;
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .05);
}


/* ===== Loading  ===== */

#page-loading {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .85);
	color: #404040;
	font-size: 14px;
	padding: 40px;
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
	z-index: 999999999 !important;
}

#page-loading span {
	text-align: center;
	font-weight: bold;
}

#page-loading span small {
	display: block;
	font-weight: normal;
	color: #606060;
	margin-top: 10px;
}

body.inline #page-loading {
	display: none;
}

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-ellipsis div {
	position: absolute;
	top: 35px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #404040;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
	background: #202020;
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
	background: #404040;
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
	background: #353535;
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
	background: #505050;
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}


/* ===== Side Menu Container ===== */

.menu-container {
	background: #252525;
	background: linear-gradient(to right, #252525 0%, #151515 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31465b', endColorstr='#283848', GradientType=1);
	/* IE6-9 */
	flex: 0 0 250px;
	min-height: 100vh;
	transition: left 0.5s ease;
	box-shadow: 0 0 20px rgba(0, 0, 0, .05);
}

@media screen and (min-width:992px) {
	.menu-container {
		margin-top: 60px;
	}
}

.menu-container .logo {
	background: rgb(255, 255, 255);
	background: linear-gradient(126deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
	padding: 10px;
}

@media screen and (max-width:992px) {
	.menu-container {
		flex: initial;
		width: 250px;
		height: 100vh;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		left: -300px;
		z-index: 12000;
		box-shadow: 0 0 30px rgba(0, 0, 0, .35);
	}
}


/* ===== Side Menu  ===== */

.side-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	opacity: 0.4;
	display: none;
	z-index: 11000;
}

.side-panel {
	margin: 0;
}

.side-panel .panel {
	background: transparent;
	border-radius: 0;
	border: 0;
	margin: 0 !important;
	box-shadow: initial;
	transition: background 0.25s;
}

.side-panel .panel:hover {
	background: rgba(255, 255, 255, .05);
}

.side-panel .panel-heading {
	padding: 10px;
	display: flex;
	background: transparent;
}

.side-panel .panel-heading a {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	width: 100%;
	color: #fefefe;
}

.side-panel .panel-heading a span {
	font-size: 20px;
}

.side-panel .panel-heading a>div {
	font-size: 12px;
	font-weight: bold;
	display: block;
	flex-basis: calc(100% - 50px);
}


.side-panel .panel-heading a>div small {
	display: none;
}

.side-panel .panel-heading a>i {
	display: block;
	font-size: 20px;
	flex-basis: 20px;
	color: #eee;
	transition: transform 0.25s;
}

.side-panel .panel-heading a[aria-expanded=true]>i {
	transform: scaleY(-1);
}

.side-panel .panel-body {
	padding: 5px;
	background: #fefefe;
	border: 0 !important;
}

.side-panel ul.icons_container {
	display: block;
	width: 100%;
	padding: 0;
	margin: 5px 0 5px 0;
	border-right: 5px solid #31003d20;
	padding-right: 5px;
}

.side-panel ul.icons_container:last-of-type {
	margin-bottom: 0;
}

.side-panel ul.icons_container li {
	list-style: none;
	display: block;
	width: 100%;
	padding: 0;
}

.side-panel div.index_button {
	color: #606060;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 7px;
	font-size: 12px;
	transition: background 0.25s, color 0.25s;
	position: relative;
	background: transparent;
	border: 0;
	border-radius: 3px;
}

.side-panel div.index_button:hover {
	color: #404040;
	background: #f4f4f4;
}

.side-panel div.index_button b {
	font-weight: normal;
}

.side-panel div.index_button img {
	width: 25px;
	height: 25px;
	margin: 0 0 0 10px;
}

.side-panel div.index_button .icon_notification {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 9px;
	background: red;
	color: white;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: absolute;
	left: 5px;
}

.side-panel a.active div.index_button {
	background: #eee;
	pointer-events: none;
}

.side-panel a.active div.index_button b {
	font-weight: bold;
}

.side-panel div.separator {
	height: auto;
	background: #353535;
	font-weight: bold;
	text-align: right;
	color: white;
	padding: 10px;
	margin: 0;
	border-radius: 3px;
}


/* ===== Body ===== */

.body-container-legacy {
	display: flex;
}

.page-container-legacy {
	width: calc(100% - 250px);
	min-height: 100vh;
  padding: 15px 10px 10px 10px !important;
	margin: 0px auto 0px 0;
}

.copyrights {
	color: #c8c8c8;
	padding: 10px;
	text-align: center;
	font-size: 10px;
}

.copyrights img {
	width: 140px;
	display: block;
	margin: 5px auto 5px auto;
}

.copyrights a,
.copyrights a:hover {
	color: #c8c8c8;
}

@media screen and (max-width:992px) {
	.body-container {
		display: block;
		width: 100%;
	}
	.page-container-legacy {
		width: 100%;
	}
}

.page_container {
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .05);
}


/* ===== Index Icons  ===== */

.menu-panel {
	margin: 15px 0px 0px 0px;
}

.menu-panel .panel {
	margin: 10px 0px 10px 0px;
}

.menu-panel .panel-heading {
	display: flex;
	padding: 0;
}

.menu-panel .panel-heading a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 10px;
}

.menu-panel .panel-heading a > div {
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: flex-start !important;
}

.menu-panel .panel-heading a>div {
	font-size: 15px;
	font-weight: bold;
	display: block;
	flex-basis: calc(100% - 80px);
}

.menu-panel .panel-heading a>img {
	width: 40px;
	margin-left: 10px;
}

.menu-panel .panel-heading a>div small {
	display: block;
	font-weight: normal;
	font-size: 12px;
	margin-top: 2px;
}

.menu-panel .panel-heading a>i {
	display: block;
	font-size: 30px;
	flex-basis: 30px;
	color: #909090;
	transition: transform 0.25s;
}

.menu-panel .panel-heading a[aria-expanded=true]>i {
	transform: scaleY(-1);
}

.menu-panel .panel-body {
	padding: 10px;
}

.menu-panel div.separator {
	width: 100%;
	height: auto;
	background: #353535;
	font-weight: bold;
	text-align: right;
	border-radius: 3px;
	clear: both;
	color: white;
	padding: 10px;
	text-shadow: 1px 1px 0px black;
	margin: 10px 0px 10px 0px;
}

.menu-panel div.separator .btn {
	border: 0;
	float: left;
	margin: -5px;
	line-height: 1.65;
}

.menu-panel div.separator:first-child {
	margin-top: 0px;
}

.menu-panel div.index_button {
	color: #404040;
	background: #eee;
	background: linear-gradient(45deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .1) 50%, rgba(237, 237, 237, 1) 50%, rgba(255, 255, 255, 1) 100%);
	background-size: 200% 200%;
	background-position: 100% 0;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	transition: background-position 0.25s;
	border: 1px solid #C8C8C8;
	border-bottom: 2px solid #C8C8C8;
	border-radius: 5px;
	display: block;
	width: 100%;
	text-align: center;
	padding: 5px 10px 5px 10px;
	height: 120px;
	overflow: hidden;
	font-size: 12px;
}

.menu-panel div.index_button:hover {
	color: #404040;
	border-color: #aaa;
	border-bottom: 2px solid #aaa;
	background: #606060;
	background: linear-gradient(45deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .1) 50%, rgba(237, 237, 237, 1) 50%, rgba(255, 255, 255, 1) 100%);
	background-size: 200% 200%;
	background-position: 0 100%;
}

.menu-panel div.index_button img {
	display: block;
	width: 50px;
	height: 50px;
	margin: 5px auto 7px auto;
}

.menu-panel ul.icons_container {
	display: block;
	width: calc(100% + 10px);
	padding: 0;
	margin: 0 -5px -10px -5px;
	font-size: 0px;
}

.menu-panel ul.icons_container li {
	list-style: none;
	display: inline-block;
	width: 50%;
	padding: 0px 5px 0px 5px;
	margin-bottom: 10px;
	vertical-align: top;
}

@media (min-width: 576px) {
	.menu-panel ul.icons_container li {
		width: 50%;
	}
}

@media (min-width: 768px) {
	.menu-panel ul.icons_container li {
		width: 25%;
	}
}

@media (min-width: 992px) {
	.menu-panel ul.icons_container li {
		width: 14.285%;
	}
}


/* ===== Login Page ===== */

.login_page {
	padding: 0px;
	min-height: 100vh;
	margin: 0;
}

.login_page .login {
	flex-grow: 1;
	padding: 15px 15px 150px 15px !important;
	background-image: var(--footer-image);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100% 150px;
}

.login_page .login>div {
	width: 100%;
}

.login_page .login .login_form {
	margin: 15px auto 15px auto;
	border: 1px solid #c8c8c8;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	background: white;
	width: calc(100% - 20px);
	max-width: 500px;
}

.login_page .login .login_form img {
	max-width: 240px;
	max-height: 150px;
	display: block;
	margin: 0 auto 15px auto;
}

.login_page .login .login_form .data_table {
	margin-top: 10px;
}

.login_page .login .info {
	text-align: center;
	padding-bottom: 15px;
}

.login_page .login h1 {
	display: block;
	margin: 15px auto 15px auto;
	padding: 0;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	line-height: 150%;
}

.login_page .login_side {
	background: #202020;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
	flex-basis: 400px;
	flex-grow: 1;
}

.copyright {
	text-align: center;
	color: #fefefe;
	margin-top: 15px;
	margin-bottom: 15px;
}

.copyright b {
	display: block;
	margin: 5px auto 5px auto;
}

.copyright img {
	width: 120px;
	margin: 10px auto 10px auto;
}


/* ========== Page Styles ========== */

body.body div.title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
	background: rgb(255, 255, 255);
	background: linear-gradient(319deg, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 1) 100%);
	margin: 0 0 10px 0;
	border-radius: 5px;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .025);
	position: relative;
}

body.body div.title div.image {
	width: 40px;
	height: 40px;
	margin: 0 10px 0 0;
}

body.body:lang(ar) div.title div.image {
	margin: 0 0 0 10px;
}

body.body div.title h1 {
	font-size: 14px;
	margin: 0;
	padding: 0;
	font-weight: bold;
}

body.body div.title div.title_breadcrumb {
	font-size: 11px;
	font-weight: normal;
	color: #606060;
	margin-bottom: 5px;
}

body.body:lang(ar) div.title div.title_breadcrumb .fa-angle-double-right {
	transform: rotate(180deg);
}

body.body div.title a {
	color: #353535;
	text-decoration: none;
}

body.body div.title a i {
	color: #606060 !important;
	text-decoration: none;
}

body.body div.title a:hover {
	color: #000;
}

body.inline div.title {
	width: 100%;
	padding: 10px;
	font-size: 13px;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
	margin-bottom: 10px;
	border-radius: 5px;
	background: #303030;
}

body.inline div.title .image,
body.inline div.title .title_breadcrumb {
	display: none;
}

body.inline div.title h1 {
	font-size: 13px;
	font-weight: bold;
	color: white;
}

body.inline div.title h1 a {
	color: white;
	pointer-events: none;
}

div.inline-subtitle {
	/* Used in system_permissions */
	margin: 20px 0 5px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #c8c8c8;
	color: #505050;
}

div.inline-subtitle:first-child {
	margin-top: 0;
}

div.inline-subtitle span {
	float: right;
}

div.inline-subtitle:lang(ar) span {
	float: left;
}

@media screen and (max-width:480px) {
	div.inline-subtitle span {
		float: initial;
		display: inline-block;
		width: 100%;
		text-align: right;
		margin-top: 5px;
	}
	div.inline-subtitle:lang(ar) span {
		float: initial;
		text-align: left;
	}
}

div.subtitle {
	font-size: 14px;
	margin: 10px 0px 10px 0px;
	font-weight: bold;
	color: #404040;
}


/* ===== Tasks Dropdown ===== */

ul.tasks_list {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.tasks_list a {
	display: block;
	background: #f8f8f8;
	border: 1px solid #c8c8c8;
	border-bottom: 3px solid #c8c8c8;
	margin-bottom: 5px !important;
	padding: 5px;
}

ul.tasks_list a:hover {
	background: #dfe2e5;
	border: 1px solid #c8c8c8;
	border-bottom: 3px solid #c8c8c8;
}

ul.tasks_list a.strategy {
	background: #dfe2e5;
}

ul.tasks_list a.strategy:hover {
	background: #d2d6d9;
}

ul.tasks_list a:last-child {
	margin-bottom: 0px !important;
}

ul.tasks_list li span {
	font-size: 10px;
	display: inline-block;
	width: 50%;
}

.dropdown-menu.tasks .tasks_tabs_container {
	width: 100%;
	padding: 0px 10px 0px 10px;
	background: #f8f8f8;
	border-bottom: 0px;
	text-align: center;
	flex-wrap: nowrap !important;
}

.dropdown-menu.tasks .tasks_tabs_container a {
	display: inline-block;
	width: 110px;
	border: 1px solid #c8c8c8;
	border-bottom: 1px solid #bbb;
	bottom: -1px;
	margin-top: 10px;
	margin-left: 5px;
	font-size: 12px;
	padding: 5px 0px 5px 0px;
	border-radius: 3px 3px 0px 0px;
}

.dropdown-menu.tasks .tasks_tabs_container li.active a {
	background: #fff;
	border-bottom: 1px solid white;
}

.dropdown-menu.tasks .tasks_tabs_container li .label {
	float: left;
	padding: 6px;
	line-height: 10px;
}

.dropdown-menu.tasks .panel-body {
	padding: 10px;
	margin: 0px;
}

.dropdown-menu.tasks .tab-pane {
	height: 300px;
	padding-left: 5px;
	overflow-y: scroll;
}

.dropdown-menu.tasks .tab-pane .no_tasks {
	color: #606060;
	font-size: 13px;
	text-align: center;
	padding: 20px;
}

.dropdown-menu.tasks .tab-pane .no_tasks i {
	font-size: 150px;
	color: #eee;
}

.dropdown-menu.tasks .tab-pane .no_tasks span {
	display: block;
}

.dropdown-menu.tasks .tab-pane::-webkit-scrollbar {
	max-width: 5px;
	max-height: 5px;
}

.dropdown-menu.tasks .panel-body {
	border-top: 1px solid #c8c8c8;
}

.dropdown-menu.tasks .tab-pane::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

.dropdown-menu.tasks .tab-pane::-webkit-scrollbar-thumb {
	background-color: #808080;
}


/* ===== Footer Notification Icon ===== */

.footer_notifications_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 10px;
	left: 10px;
	background: #f2b738;
	padding: 3px;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
	z-index: 10;
	cursor: pointer;
	color: white;
	transition: box-shadow 0.2s;
}

.footer_notifications_icon:hover {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .35);
}

.footer_notifications_icon i {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 30px;
}

.footer_notifications_icon .count {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	background: red;
	color: white;
	width: 30px;
	height: 30x;
	padding: 5px;
	border-radius: 50%;
}

#footer_notifications {
	display: none;
}


/* ===== Footer Attendance Button ===== */

.footer_attendance_button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 15px;
	left: 130px;
	padding: 10px 20px;
	border-radius: 100px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
	z-index: 10;
	cursor: pointer;
	color: white !important;
	transition: box-shadow 0.2s;
}

.footer_attendance_button:hover {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .35);
}

.footer_attendance_button.login {
	background: #449D44;
}
	
.footer_attendance_button.logout {
	background: #D9534F;
}
/* ===== Generic Rafed ===== */

.pdf_only {
	display: none;
}

.message_number {
	display: inline-block;
	width: auto;
	font-size: 28px;
	font-weight: bold;
	margin: 5px auto 0 auto;
	padding: 0 10px 0 10px;
	border: 1px solid #4e8952;
	border-radius: 3px;
}


/* CRUD Attachments Dropdown */

.crud-dropdown-container .attachments {
	min-width: 200px;
}

.crud-dropdown-container .attachments .download_button {
	box-shadow: initial;
	border-radius: 0;
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
}

.crud-dropdown-container .attachments .download_button:first-child {
	border-top: 0;
}


/* Export PDF JSConfirm */

#pdf_export_result .download_button {
	margin-top: 10px;
}


/* ======================= */


/* ===== RAFED PAGES ===== */


/* ======================= */


/* ===== Administrator Permissions - الصلاحيات ===== */

ul.checkbox_container {
	display: block;
	font-size: 0;
	width: 100%;
	margin: -5px 0px 0px 0px;
	padding: 0px;
}

ul.checkbox_container li {
	list-style: none;
	display: inline-block;
	padding: 0px 0px 0px 5px;
	position: relative;
}

@media (max-width: 767px) {
	ul.checkbox_container li {
		width: 100%;
	}
	ul.checkbox_container li {
		padding-left: 0px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	ul.checkbox_container li {
		width: 50%;
	}
	ul.checkbox_container li:nth-child(2n) {
		padding-left: 0px;
	}
}

@media (min-width: 992px) {
	ul.checkbox_container li {
		width: 25%;
	}
	ul.checkbox_container li:nth-child(4n) {
		padding-left: 0px;
	}
}

ul.checkbox_container li input[type=checkbox] {
	position: absolute;
	margin-top: 10px;
	transform: translate(-50%, 50%);
	width: 16px;
	height: 16px;
}

ul.checkbox_container li input[type=checkbox]+label {
	display: block;
	width: 100%;
	color: #606060;
	background: #f8f8f8;
	width: 100%;
	border: 1px solid #aaaaaa;
	padding: 10px 30px 10px 10px;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

ul.checkbox_container li input[type=checkbox]:checked+label {
	background: #c6d6e0;
	color: #303030;
}

ul.checkbox_container input[type=radio] {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0px 0px 0px 5px;
	padding: 0px;
	vertical-align: middle;
	cursor: pointer;
}

ul.checkbox_container input[type=radio]+label {
	cursor: pointer;
	margin: 5px 0px 0px 10px;
}

ul.checkbox_container input[type=checkbox] {
	display: inline-block;
	width: 16px;
	height: 16px;
	padding: 0px;
	margin: 0px 0px 0px 5px;
	vertical-align: middle;
	cursor: pointer;
}

ul.checkbox_container input[type=checkbox]+label {
	cursor: pointer;
	font-size: 12px;
	margin: 5px 0px 0px 10px;
}


/* ===== Contest - المسابقات ===== */

.contest .title_container {
	padding: 20px;
	font-size: 18px;
}

.contest .title_container b {
	display: block;
	width: 100%;
	text-align: center;
	padding: 20px;
	font-size: 22px;
}

.contest .withdraw_button {
	display: inline-block;
	padding: 10px;
	font-weight: bold;
	font-size: 15px;
	width: 200px;
	cursor: pointer;
	border-radius: 5px;
	margin: 0px 0px 3px 0px;
	color: white;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
	border: 0px;
	background: #ff9c00;
	background: -moz-linear-gradient(top, #ff9c00 0%, #db8600 100%);
	background: -webkit-linear-gradient(top, #ff9c00 0%, #db8600 100%);
	background: linear-gradient(to bottom, #ff9c00 0%, #db8600 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#db8600', GradientType=0);
	box-shadow: 0px 3px 0px #c86d00;
	position: relative;
}

.contest .withdraw_button:hover {
	background: #eda700;
	background: -moz-linear-gradient(top, #eda700 0%, #ef9200 100%);
	background: -webkit-linear-gradient(top, #eda700 0%, #ef9200 100%);
	background: linear-gradient(to bottom, #eda700 0%, #ef9200 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eda700', endColorstr='#ef9200', GradientType=0);
}

.contest .withdraw_button:active {
	box-shadow: 0px 2px 0px #c86d00;
	top: 1px;
}

.contest .names_container {
	width: 100%;
	border-radius: 10px;
	background: rgb(111, 161, 67);
	background: -moz-linear-gradient(top, rgba(111, 161, 67, 1) 0%, rgba(118, 171, 75, 1) 50%, rgba(87, 139, 45, 1) 51%, rgba(80, 131, 35, 1) 100%);
	background: -webkit-linear-gradient(top, rgba(111, 161, 67, 1) 0%, rgba(118, 171, 75, 1) 50%, rgba(87, 139, 45, 1) 51%, rgba(80, 131, 35, 1) 100%);
	background: linear-gradient(to bottom, rgba(111, 161, 67, 1) 0%, rgba(118, 171, 75, 1) 50%, rgba(87, 139, 45, 1) 51%, rgba(80, 131, 35, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6fa143', endColorstr='#508323', GradientType=0);
	color: white;
	font-size: 30px;
	padding: 50px;
	margin: 20px auto 20px auto;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.contest .congratulations {
	direction: rtl;
	display: none;
	font-size: 30px;
	color: orange;
	line-height: 3;
}

.contest #confetti {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1000;
	width: 100%;
	height: 100%;
}


/* ===== الملف الوظيفي ===== */

.personnel_button {
	min-width: 150px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
	margin: 5px;
	font-size: 12px;
	padding: 10px;
}

.personnel_button i {
	font-size: 50px;
	color: #909090;
	margin-bottom: 10px;
	display: block;
}


/* ===== تحديث بدون رأي اللجنة ===== */

.title-separator {
	background: #eee !important;
	padding: 5px;
}



/* ===== Select2 Selection Blocks ===== */

.select_user_profile b {
	display: block;
	margin-bottom: 5px;
}

.select_user_profile p {
	display: inline-block;
	width: 32%;
	color: #909090;
	font-size: 10px;
	margin: 0;
	padding: 0;
}

.select_user_profile span {
	margin-right: 5px;
}

.select_user_profile small {
	font-weight: normal;
	color: #606060;
	margin-right: 5px;
}

.select_container {
	line-height: 2.7;
}

.select_user_options {
	overflow: hidden;
}

.select2-results__option .select_user_options {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.select_user_options b {
	display: inline-block;
	margin-left: 10px;
	font-weight: normal;
}

.select_user_options span {
	display: inline-block;
	margin-left: 10px;
	color: #909090;
	font-size: 11px;
}


/* ===== E-Mails - الرسائل الداخلية ===== */

.email_navigation {
	width: 100%;
	padding: 10px 10px 0px 10px;
	border: 1px dotted #808080;
	text-align: right;
	background: #eaeaea;
	border-radius: 5px;
	margin-bottom: 10px;
}

.email_navigation a {
	padding: 15px;
	margin-bottom: 10px;
	margin-left: 5px;
	width: 170px;
}

.email_navigation i {
	font-size: 18px;
	border-left: 1px solid #fff;
	padding-left: 10px;
	margin-left: 10px;
}

@media screen and (max-width:767px) {
	.email_navigation a {
		width: 100%;
	}
}

.mail_display {
	border-left: 1px solid #c8c8c8;
	border-right: 10px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
	margin-top: 5px;
	padding: 10px;
	text-align: right;
	font-size: 13px;
	border-radius: 3px;
}

.mail_display:first-child {
	margin-top: 15px;
}

.mail_display .user {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 5px 0px;
	border-bottom: 1px solid #eee;
}

.mail_display .user b {
	font-size: 14px;
}

.mail_display .user span {
	float: left;
	text-align: left;
	width: 300px;
}

.mail_display .attachments h2 {
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 5px 0px;
	font-size: 12px;
	font-weight: bold;
	border-bottom: 1px solid #eee;
}

@media screen and (max-width:768px) {
	.mail_display .user:after {
		content: "";
		display: block;
		clear: both;
	}
}

.mail_new {
	border-color: #d8524e !important;
}

.inbox_inline {
	display: inline-block;
	width: 100%;
	text-align: right !important;
	padding: 5px 5px 5px 5px;
	border-radius: 2px;
	border: 1px dotted #c8c8c8;
}

.inbox_inline:hover {
	border: 1px dotted #909090;
}

.inbox_inline .title,
.inbox_inline b {
	display: inline-block;
	font-size: 12px !important;
	line-height: 18px;
}

.inbox_inline .label {
	float: left;
	font-size: 11px;
	font-weight: normal;
	padding: 5px;
	margin: 0px 5px 0px 0px;
}

.inbox_inline i {
	float: left;
	color: #909090;
	font-size: 16px !important;
	margin: 2px 0px 0px 0px;
}

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

.mail_display .attachments .download_button {
	margin-left: 5px !important;
	margin-bottom: 5px !important;
}


/* ===== Record Data ===== */

.record_data div {
	margin-bottom: 10px;
	border: 1px solid #eee;
	border-radius: 3px;
}

.record_data div:last-child {
	margin-bottom: 0;
}

.record_data div b {
	display: block;
	width: 100%;
	padding: 5px;
	border-bottom: 1px solid #eee;
	background: #f8f8f8;
}

.record_data div span {
	display: block;
	width: 100%;
	padding: 5px;
}


/* ===== Scrollabe Container ===== */

div.scrollable_container {
	width: 100%;
	overflow-x: scroll;
	cursor: grab;
	border: 1px solid #aaa;
}


/* ===== Governance ===== */

table.governance {
	border-collapse: collapse;
}

table.governance th {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
	background: #bbb;
}

table.governance td {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
	background: #fefefe;
}

table.governance tr:first-child th {
	border-top: 0;
}

table.governance td:last-child,
table.governance th:last-child {
	border-left: 0;
}

table.governance td:first-child,
table.governance th:first-child {
	border-right: 0;
}

table.governance td[content] {
	/* Coloring Results Columns */
	background: #f8f8f8;
}

table.governance tr.pending td:not([content]) {
	/* Highlight Unanswered Questions */
	color: #aaa;
}

table.governance td.bold {
	/* Selected Answer */
	font-weight: bold;
}


/* ===== Strategy ===== */

table.strategy {
	border-collapse: collapse;
}

table.strategy th {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
	background: #bbb;
}

table.strategy td {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
}

table.strategy tr:first-child th {
	border-top: 0;
}

table.strategy td:last-child,
table.strategy th:last-child {
	border-left: 0;
}

table.strategy td:first-child,
table.strategy th:first-child {
	border-right: 0;
}

table.strategy tr.category td {
	background: #ccc
}

table.strategy tr.goal td {
	background: #ddd
}

table.strategy tr.main_indicator td {
	background: #eee
}

table.strategy tr.sub_indicator td {
	background: #fff
}


/* ===== Strategy Indicators Achieved ===== */

table.manage tr.category td {
	background: #dadada !important;
}

table.manage tr.goal td {
	background: #dfdfdf !important;
}

table.manage tr.main_indicator td {
	background: #eee !important;
}

table.manage tr.sub_indicator td {
	background: #fff !important;
}


/* ===== Finance Accounts ===== */

.accounts_container {
	background: white;
	border: 1px solid #c8c8c8;
	border-radius: 5px;
	padding: 10px !important;
}

table.manage.small-padding th {
	padding: 7px;
}

table.manage.small-padding td {
	padding: 5px;
}


/* ===== Rajhi ===== */

table.rajhi_table th,
table.rajhi_table td {
	font-size: 9px !important;
}


/* ===== Finance Summary Table - في إضافة القيود ===== */

table.finance_summary {
	border-collapse: collapse;
	margin: 15px auto 0px 0px;
	min-width: 300px;
	width: 30%;
	border: 1px solid #ccc;
	background: white;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .2)
}

table.finance_summary tr td {
	width: 50%;
	padding: 10px;
	text-align: right;
	border: 1px solid #c8c8c8;
}

table.finance_summary tr td:first-child {
	width: 200px;
	background: #eee;
	font-weight: bold;
}


/* ===== Income Table ===== */

.income_table td {
	vertical-align: top !important;
}

.income_table td:first-child {
	padding-left: 5px;
}

.income_table td:last-child {
	padding-right: 5px;
}

.income_table .summary {
	background: #808080;
	color: white;
	text-align: center;
	padding: 5px;
	border-radius: 3px;
	margin-top: 10px;
}

.income_table .summary b {
	font-size: 16px;
	display: inline-block;
	margin-right: 5px;
}


/* ===== Signatures ===== */

table.signatures {
	margin-top: 15px;
	width: 100%;
	direction: ltr;
}

table.signatures td {
	width: 25%;
	text-align: center;
	vertical-align: top;
	line-height: 1.5;
}

img.signature {
	display: block;
	max-width: 120px;
	max-height: 80px;
	margin: 0 auto 0 auto;
}


/* ===== Update Profiles Script - سكربت تحديث فئات المستفيدين ===== */

.progress_division {
	text-align: center;
	line-height: 2;
}

.progress_division .status {
	display: none;
}

.progress_division.initial .initial {
	display: block;
}

.progress_division.running .running {
	display: block;
}

.progress_division.finished .finished {
	display: block;
}

.progress_division h3 {
	font-size: 13px;
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	line-height: 2;
}

.progress_division i {
	margin: 10px 0 20px 0;
}

.progress_division .progress {
	margin: -5px 0 10px 0;
}

.progress_division #current {
	color: red;
}


/* ===== Grade Equation - معادلة الدخل ===== */

.grade_check_container {
	padding: 0 0 5px 0 !important;
}

.grade_check_container label:last-child .equation_details {
	margin-bottom: 5px !important;
}

.equation_details {
	padding: 7px 7px 0px 7px;
	border-radius: 3px;
	/* border: 1px dotted #c8c8c8; */
	font-weight: normal !important;
	margin-bottom: 10px;
}

.equation_details input[type=number] {
	display: inline;
	margin: 0 5px 7px 0 !important;
	width: 100px;
	border-radius: 3px;
	padding: initial !important;
	text-align: center;
}

.equation_details select {
	display: inline;
	margin: 0 5px 7px 0 !important;
	width: 200px;
	border-radius: 3px;
	padding: initial !important;
}

.query-builder .rule-value-container {
	border: 0 !important;
}

.query-builder .rules-group-container {
	border: 1px solid #909090 !important;
	background: rgba(0, 0, 0, .1) !important;
}

.query-builder .rules-list>::after,
.query-builder .rules-list>::before {
	border-color: #606060 !important;
}

.query-builder .drag-handle,
.query-builder .error-container,
.query-builder .rule-container .rule-filter-container,
.query-builder .rule-container .rule-operator-container,
.query-builder .rule-container .rule-value-container {
	margin: 0 !important;
}

.query-builder .rule-container,
.query-builder .rule-placeholder,
.query-builder .rules-group-container {
	border: 1px solid #909090 !important;
}

.rules-group-header {
	display: flex !important;
}

.rules-group-header .pull-left {
	float: right !important;
	flex-grow: 1;
}

.query-builder .rules-group-container {
	padding-bottom: 0 !important;
}

.query-builder .rule-container,
.query-builder .rule-placeholder,
.query-builder .rules-group-container {
	margin: 5px 0 !important;
}

.query-builder .error-container {
	margin-right: 5px !important;
	line-height: 2.5 !important;
}

.formulize-wrapper .formulize-alert {
	display: none !important;
}

.formulize-container {
	direction: ltr !important;
	text-align: left !important;
	display: flex !important;
	flex-wrap: wrap !important;
	background: #ddd !important;
	border-radius: 3px !important;
	line-height: 1 !important;
	padding: 10px 10px 0 10px !important;
}

.formulize-item {
	padding: 10px !important;
	margin: 0 5px 10px 0 !important;
}

.formulize-cursor {
	height: auto !important;
	margin: 0 5px 10px 0 !important;
}


/* ===== System Variables - متغيرات النظام ===== */

.variables_list {
	margin: 0;
	padding: 0;
}

.variable.variables_template {
	display: none;
}

.variable {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #eee;
	padding: 6px;
	border: 1px solid #aaa;
	margin-bottom: 5px;
	border-radius: 3px;
}

.variable .drag {
	flex-basis: 30px;
	background: #aaa;
	font-size: 18px;
	padding: 5px 8px 5px 8px;
	border-radius: 3px;
	margin-left: 10px;
	cursor: pointer;
}


/* ===== Image Templates Setup ===== */

.insert_component {
	display: flex;
}

.insert_component .btn {
	flex-basis: 100px;
	margin-right: 5px;
}

.sidebar_container {
	display: none;
	margin-top: 10px;
}

.sidebar_container .sidebar {
	display: none;
	padding: 10px 10px 0 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 1px 1px 6px rgba(0, 0, 0, .1);
}

.sidebar_container .sidebar div {
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar_container .sidebar div span {
	text-align: left;
	flex-basis: 100px;
	margin-left: 10px;
}

.components_list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.components_list li:not(.na) {
	cursor: pointer;
	background: #eee;
	margin-bottom: 2px;
	border-radius: 3px;
	padding: 5px;
}

.components_list li:not(.selected):not(.na):hover {
	background: #ddd;
}

.components_list li.selected {
	background: #606060;
	color: white;
}

.components_list li .btn {
	float: left;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	items: center;
}

.template_canvas {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 600px;
	overflow: auto;
	cursor: grab;
	border: 1px solid #909090;
	border-radius: 5px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);
}

.template_canvas.dragging {
	cursor: grabbing;
}

.template_canvas::-webkit-scrollbar {
	background-color: #ccc;
	width: 10px;
	height: 10px;
}

.template_canvas::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

.template_canvas::-webkit-scrollbar-thumb {
	background-color: #ccc;
}

.template_canvas::-webkit-scrollbar-corner {
	background-color: #f1f1f1;
}

.template_components {
	top: 0;
	left: 0;
	position: relative;
	overflow: hidden;
}

.template_components img.background {
	width: auto;
	height: auto;
	max-width: initial;
	max-height: initial;
}

.component {
	position: absolute;
	z-index: 10;
	top: 0;
	line-height: 1;
	cursor: pointer;
}

.component.template {
	display: none;
}

.component .component_toolbar {
	display: none;
	position: absolute;
	top: -22px;
	right: 0;
}

.component .component_toolbar .btn {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	items: center;
}

.component .component_toolbar .position {
	height: 20px;
	background: #000;
	color: white;
	border-radius: 3px;
	line-height: 20px;
	font-size: 10px;
	margin-right: 2px;
	padding: 0 4px 0 4px;
}

.component_item.image img {
	max-width: initial;
	max-height: initial;
	border: 1px solid transparent;
}

.component:not(.selected) .component_item.image img:hover {
	border: 1px solid rgba(0, 0, 0, .15);
}

.component.selected .component_item.image img {
	border: 1px solid rgba(0, 0, 0, .3);
}

.component_item.text {
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: "Frutiger LT Arabic";
}

.component_item.text::selection,
.component_item.text::-moz-selection {
	color: none;
	background: none;
}

.component:not(.selected) .component_item.text:hover {
	border: 1px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .05);
}

.component_item.text:after {
	display: none;
	justify-content: center;
	align-items: center;
	font-weight: 900;
	font-family: "Font Awesome 5 Pro";
	content: "\f104";
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 50%;
	background: #606060;
	transform: translateY(-50%);
	width: 18px;
	height: 100%;
	min-height: 18px;
	left: -20px;
	border-radius: 3px;
}

.component_item.text:before {
	display: none;
	justify-content: center;
	align-items: center;
	font-weight: 900;
	font-family: "Font Awesome 5 Pro";
	content: "\f105";
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 50%;
	background: #606060;
	transform: translateY(-50%);
	width: 18px;
	height: 100%;
	min-height: 18px;
	right: -20px;
	border-radius: 3px;
}

.component.selected .component_toolbar {
	display: flex;
}

.component.selected {
	z-index: 100;
}

.component.selected .component_item.text {
	border: 1px solid rgba(0, 0, 0, .3);
	background: rgba(0, 0, 0, .1);
}

.component.selected .component_item.text.right:after {
	display: flex;
}

.component.selected .component_item.text.left:before {
	display: flex;
}

.component.selected .component_item.text.center:after,
.component.selected .component_item.text.center:before {
	display: flex;
}


/* PDF Template Builder */

.template_components .watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.template_components .margins {
	position: absolute;
	border: 1px dashed #000;
}


/* Governance Answers */

.governance_question_table.disabled {
	pointer-events: none;
	opacity: 0.5;
}

.governance_question_selection {
	margin-left: 10px;
}

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

.governance_question_selection .dropdown-menu {
	margin-top: -10px;
}

.governance_question_table .radio_container label {
	display: block;
}

.governance_attachment a {
	display: block;
	padding: 4px 10px 4px 10px;
	border-radius: 3px;
}

.governance_attachment a:hover {
	background: #eee;
}

.governance_attachment.true a {
	color: green;
}

.governance_attachment.true b:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	content: "\f058";
	margin-left: 5px;
}

.governance_attachment.false a {
	color: red;
}

.governance_attachment.false b:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	content: "\f057";
	margin-left: 5px;
}


/* Governance Report */

.indicator_row td {
	background: #fcfcfc !important;
	border-top: 1px solid #eee;
}

.practice_row td {
	background: #fff !important;
	border-top: 1px solid #eee;
}

.total_row td {
	background: #f8f8f8 !important;
	border-top: 1px solid #bbb;
	font-weight: bold;
}


/* Safety Operations */

.safety_operation .panel {
	margin-bottom: 10px;
}

.safety_operation .panel-heading a {
	font-size: 13px;
}


/* Attendance Report */

table.attendance {
	border-collapse: collapse;
}

table.attendance th {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
	background: #bbb;
	border-radius: 0 !important;
}

table.attendance td {
	padding: 5px;
	text-align: center;
	border: 1px solid #aaa;
}

table.attendance tr:first-child th {
	border-top: 0 !important;
}

table.attendance td:last-child,
table.attendance th:last-child {
	border-left: 0 !important;
}

table.attendance td:first-child,
table.attendance th:first-child {
	border-right: 0 !important;
}


/* Orders Assignments Table */

.table_no_records.orders_assignments {
	border: 1px solid #606060;
}

.orders_assignments [order-type-content] {
	margin: -5px;
	width: calc(100% + 10px);
	border-radius: 3px;
}

.orders_assignments tr[status="2"] .btn-danger,
.orders_assignments tr[status="3"] .btn-danger {
	display: none;
}

.orders_assignments tr[status="2"] [order-type-content],
.orders_assignments tr[status="3"] [order-type-content] {
	box-shadow: initial;
	border: 0;
	background: transparent;
	pointer-events: none;
}

.orders_assignments tr[status="2"] td {
	color: red;
}

.orders_assignments tr[status="3"] td {
	color: green;
}

.orders_assignments tr[status="2"] [order-type-content] {
	color: red;
}

.orders_assignments tr[status="3"] [order-type-content] {
	color: green;
}


/* Kafala Table */

.kafala_table tr.invalid td {
	color: red;
}


/* Checlist */

.checklist_container {
	line-height: 2;
}

.checklist.true span {
	color: green;
}

.checklist.true span:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	content: "\f058";
	margin-left: 5px;
}

.checklist.false span {
	color: red;
}

.checklist.false span:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 600;
	content: "\f057";
	margin-left: 5px;
}


/* Tutorial Button */

.tutorial_button {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
}


/* Page Container */

.page_container {
	padding: 10px;
	border-radius: 5px;
	background: white;
	border: 1px solid #c8c8c8;
}


/* Website Homepages */

.homepage_module_placeholder {
	width: 100%;
	height: 20px;
}

.homepage_module_placeholder:after {
	content: "";
	display: block;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	background: #ccc;
	border: 2px dotted #bbb;
	border-radius: 5px;
	margin: 5px;
}

.homepage_module_block {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	height: 100%;
	text-align: center;
	font-size: 10px;
	position: relative;
}

.homepage_module_block.used {
	opacity: 0.5;
	pointer-events: none;
}

.homepage_module_block .preview img {
	border-radius: 3px;
	margin-bottom: 5px;
}

.homepage_module_block .preview .btn {
	width: 20px;
	height: 20px;
	line-height: 1;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.homepage_module_block .preview .btn-danger {
	display: none;
}

.homepage_module_block .content {
	display: flex;
	position: relative;
}

.homepage_module_block .content .btn {
	display: none;
}

.homepage_module_block .content .settings {
	margin-left: 5px;
}

.homepage_module_block .content .description {
	text-align: right;
	flex-grow: 1;
}

.homepage_module_block .content .description b {
	display: block;
}

.homepage_module_components {
	padding: 5px;
	margin: 0;
	list-style-type: none;
	border: 2px dotted #aaa;
	background: #eee;
	border-radius: 5px;
	min-height: 50px;
	display: flex;
	flex-wrap: wrap;
}

.homepage_module_components .homepage_module_block {
	cursor: move;
	margin-bottom: 5px;
}

.homepage_module_components .homepage_module_block:last-child {
	margin-bottom: 0;
}

.homepage_module_components .homepage_module_block .preview .btn-success {
	display: none;
}

.homepage_module_components .homepage_module_block .preview .btn-danger {
	display: flex;
}

.homepage_module_components .homepage_module_block .content .btn {
	display: block;
}

/* CSS Background Editor */

.css_preview {
	height: 150px;
}

.properties_input {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -10px;
	width: calc(100% + 10px);
}

.properties_input > div {
	display: flex;
	align-items: center;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	margin-left: 10px;
	flex-basis: calc(33.33% - 10px);
}

.properties_input > div input[type=color],
.properties_input > div span,
.properties_input > div .slider {
	display: block;
	margin-left: 10px;
}

.properties_input > div .slider {
	margin-right: 10px;
}

.properties_input .slider.slider-horizontal {
	width: 100% !important;
}

/* Custom Module */

.module_rows {
	background: #fafafa;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 10px 0 10px 0;
}

.blocks_container {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
}

.blocks_container .block {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	background: #eee;
	border: 3px solid #eee;
	min-height: 140px;
	padding: 10px;
	cursor: pointer;
	position: relative;
}

.blocks_container .block:nth-child(even){
	min-height: 100px;
}

.blocks_container .block .fa-times {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	position: absolute;
	top: 5px;
	right: 5px;
}

.blocks_container .block:first-child .fa-times {
	display: none;
}

.blocks_container .block.active {
	border: 3px solid #ccc;
}

/* Anchors */

.index_anchors .top {
	width: 100%;
	display: flex;
}

.index_anchors .left,
.index_anchors .right {
	min-height: 300px;
	width: 120px;
	border: 2px dotted #aaa;
	background: #eee;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2px;
}

.index_anchors .bottom {
	width: 100%;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
}

.index_anchors .bottom-left,
.index_anchors .bottom-right {
	width: calc(50% - 5px);
	min-height: 50px;
	border: 2px dotted #aaa;
	background: #eee;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 2px;
}

.index_anchors .bottom-left {
	justify-content: flex-start;
}

.index_anchors .bottom-right {
	justify-content: flex-end;
}

.index_anchors .components {
	flex-grow: 1;
	margin: 0 10px 0 10px;
	display: flex;
	flex-wrap: wrap;
	padding-top: 7px;
	padding-bottom: 7px;
	align-items: flex-start;
}

.index_anchors [data-anchor-block] {
	margin: 3px;
}

.index_anchors [data-anchor-block] img {
	border: 1px solid #aaa;
	border-radius: 3px;	
}

.index_anchors [data-anchor-block].disabled {
	opacity: 0.5;
	pointer-events: none;
}

.index_anchors .components [data-anchor-block] {
	flex-basis: 120px;
}

.index_anchors .components [data-anchor-block] .fa-times {
	display: none;
}

.index_anchors .bottom [data-anchor-block] {
	width: 80px;
}

.index_anchors [data-target-anchor] [data-anchor-block] .fa-times {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	position: absolute;
	top: 5px;
	left: 5px;
	border-radius: 50%;
	cursor: pointer;
}

.index_anchors .ui-droppable-active {
	background: #f8f8f8 !important;
	border-color: #909090 !important;
}



.choose_work_days{
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
}
.work_days{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-right: 30px;
}
.attendance_cont{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.attendance_cont div{
	margin-left:30px;
}
.deductionCont{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content:flex-start;
}
.deductionCont div{
	margin-left:10px;
}
/*.symbol{*/
/*	font-size:14px;*/
/*}*/
.equal_symbol::after{
	content: " = ";
}
.multi_symbol::after{
	content: " X ";
}
#attendance-deduction-module-delay ,#attendance-deduction-module-early{
	border:1px solid #CCC;
	padding:10px;
	border-radius:10px;
	display:none;
}

#delay_subtitle ,#early_subtitle{
	display: none;
}

.work_time_container{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content:space-around;
}
.work_time{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.history_parent{
	width: 80%;
	margin: 0 auto;
}
.header_content{
	text-align: center;
	font-size: larger;
	background-color: #254668;
	color: white;
	padding: 10px;
	border-radius: 30px;
	width: 80%;
	margin: 0 auto;
}
.history_content{
	margin:5px auto;
	text-align: center;
	font-size: larger;
	background-color:#ada9a9;
	opacity: 80%;
	color: white;
	padding: 10px;
	border-radius: 30px;
	width: 80%;
}
.history_button{
	margin:10px auto;
}



.subscription_banner {
	z-index: 100;
	position: fixed;
	top: 60px;
	right: 250px;
	left: 0;
	padding: 15px;
	color: white;
	font-weight: bold;
}

.subscription_banner .fa-times {
	position: absolute;
	top: 10px;
	left: 10px;
	cursor: pointer;
}

@media screen and (max-width: 768px){
	.subscription_banner {
		top: 55px;
		right: 0;		
	}
}


/* ========== Reports & Statistics ========== */

/* Show in PDF only, to be removed on CMS update */

.pdf_only {
	display: none !important;
}

/* Page report content */

.page_report_content .graph-container .graph {
	background: #fff;
	border-radius: 3px;
	box-shadow: 2px 2px 8px rgba(0,0,0,.1);
	border: 1px solid #a8b8c7;
}

.page_report_content .graph-container > div {
	margin-bottom: 20px;
}

/* Table scroller */

.table_scroller {
	overflow-x: auto;
	border-radius: 3px;
	box-shadow: 2px 2px 8px rgba(0,0,0,.1);
	border: 1px solid #aaa;
}

.table_scroller {
	cursor: grab;
}

/* Report table */

.report_table {
	border-collapse: collapse;
	width: 100%;
}

.report_table th {
	min-width: 150px;
	padding: 5px;
	border: 1px solid #aaa;
	background: #ddd;
	text-align: center;
	font-weight: bold;
}

.report_table th a {
	color: #000;
}

.report_table tr:nth-child(even) td {
	background: #fcfcfc;
}

.report_table tbody tr td:first-child {
	font-weight: bold;
	background: #f8f8f8;
	text-align: left;
}

.report_table:lang(ar) tbody tr td:first-child {
	text-align: right;
}

.report_table td {
	min-width: 150px;
	padding: 6px;
	border: 1px solid #aaa;
	background: #fff;
	transition: background 0.3s;
	text-align: center;
}

.report_table td.total,
.report_table tr.total td {
	font-weight: bold;
	background: #eee !important;
}

.report_table tr:hover td {
	background: #ddd !important;
}

.report_table:lang(en) tr th:first-child,
.report_table:lang(en) tr td:first-child {
	border-left: 0;
}

.report_table:lang(ar) tr th:first-child,
.report_table:lang(ar) tr td:first-child {
	border-right: 0;
}

.report_table:lang(en) tr th:last-child,
.report_table:lang(en) tr td:last-child {
	border-right: 0;
}

.report_table:lang(ar) tr th:last-child,
.report_table:lang(ar) tr td:last-child {
	border-left: 0;
}

.report_table thead tr th {
	border-top: 0;
}

.report_table tbody tr:last-child td {
	border-bottom: 0;
}

.report_table .sortArrow {
	margin: 0 !important;
	border: 0 !important;
}

.report_table .sortArrow:after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	content: "\f107";
	margin: 0 0 0 5px;
}

.report_table:lang(ar) .sortArrow:after {
	margin: 0 5px 0 0;
}

.report_table .sortArrow.asc:after {
	content: "\f106";
}

/* Interval period selection */

.interval_period_selection {
	display: flex;
	align-items: center;
}

.interval_period_selection > div {
	flex-basis: 50%;
	flex-grow: 1;
	margin: 0 10px 0 0;
}

.interval_period_selection:lang(ar) > div {
	margin: 0 0 0 10px;
}

.interval_period_selection > div:last-child {
	margin: 0;
}

/* Buttom with down arrow */

.btn-arrow i.fa-angle-down {
	transition: transform 0.3s;
}

.btn-arrow.reverse-arrow i.fa-angle-down {
	transform: rotate(180deg);
}

/* Graph settings dropdown menu */

.graph_settings_dropdown {
	padding: 10px !important;
	min-width: 300px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.graph_settings_dropdown .types {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 10px);
	margin: 0 -5px -5px -5px;
}

.graph_settings_dropdown .types a {
	width: calc(25% - 10px);
	padding: 5px;
	margin: 5px;
	border-radius: 3px;
	border: 1px solid #ccc;
}

.graph_settings_dropdown .types a:hover {
	background: #eee;
}

.graph_settings_dropdown .types a img {
	display: block;
	width: 40px;
	margin: 0 auto 0 auto;
}

.graph_settings_dropdown .types a span {
	display: block;
	text-align: center;
	font-size: 10px;
	line-height: 1.25;
}

.graph_settings_dropdown .visibility .check_container label {
	line-height: 1.5;
}

/* ========== Project Related ========== */

/* CRUD Override */

.crud_table .justify-content-start div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 250px;
}

.menu-panel .panel-heading a > span {
	font-size: 30px;
}

.menu-panel .panel-heading a > div {
	gap: 5px !important;
}

.data-table .check-container {
	min-height: 30px;
}

.check-container input[dummy] + span {
	color: #949494;
}

.check-container input[dummy] + span::before {
	background-color: #949494 !important;
	border-color: #848484 !important;
}

.tiny_data_container {
	padding: 5px 5px 0 5px;
}

.tiny_data {
	display: inline-block;
	margin: 0 0 0px 5px;
	border: 1px solid #eee;
	padding: 5px;
	border-radius: 3px;
}

.tiny_data>b {
	margin-left: 5px;
}

.tiny_data span {
	float: left;
	min-width: 50px;
	text-align: left;
}