body{
		font-family: 'Traditional Arabic';
	}
	
	.main-header,
	.sidebar,
	a.brand-link {
		background-color: #5d6c34 !important;
	}

	.content-wrapper {
		direction: rtl;
		margin-bottom: 50px;
	}

	.main-footer {
		font-family: 'Traditional Arabic';
		font-size: 20px;
	}

	.modal {
		text-align: justify;
		font-family: 'Traditional Arabic';
		font-size: 30px;
	}

	h1.m-0 {
		font-family: 'Traditional Arabic';
		font-size: 50px;
		color: #5d6c34;
		text-align: center;
		margin: auto !important;
	}

	.modal-title {
		font-size: 40px;
	}

	.card {
		font-family: 'Traditional Arabic';
		font-size: 25px;
		overflow: auto;
		direction: rtl;
	}

	.card-header {
		text-align: right;
		color: #28a745;
	}

	.nav-link[class^="nav-"].active {
		background-color: #977c47 !important;
	}

	.nav-link[class^="nav-"].tree-item.active {
		background-color: whitesmoke !important;
	}

	.os-content {
		padding-top: 9% !important;
		font-size: 24px;
	}

	.btn {
		font-size: 25px;
		font-weight: 530;
		border-width: 0px;
		border-radius: 15px !important;
		margin-right: 0.5%;
	}

	.btn-primary {
		background-color: #6f833a !important;
	}

	.btn-primary:hover {
		background-color: #28a745 !important;
	}

	.form-control,
	.select2,
	.select2-container--default,
	.select2-selection--multiple,
	.custom-select {
		font-size: 25px !important;
		height: auto !important;
		border-radius: 17px !important;
	}

	.select2-container--default,
	.select2-selection--multiple {
		padding: 1px;
	}

	.select2-dropdown {
		font-family: 'Traditional Arabic';
		text-align: justify;
	}

	.dropdown-menu {
		font-size: 23px;
		font-family: 'Traditional Arabic';
		border-radius: 15px;
		text-align: right;
	}

	a.dropdown-item {
		text-align: justify;
	}

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

	.login-logo a {
		font-family: 'Traditional Arabic';
		font-size: 65px;
		font-weight: 700;
		color: #BC9035;
	}

	.login-page {
		display: flex;
		flex-direction: row;
		gap: 10%;
		background-color: #A48F581C;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-right: 10%;
	}

	.login-card-body .input-group .form-control {
		width: max-content !important;
		font-size: 18px !important;
	}

	.moddakerImg {
		height: 100%;
		display: flex;
	}

	.moddakerImg img {
		height: 100%;
		width: 100%;
		object-fit: fill;
	}

	@media (max-width: 1000px) {
		.login-page {
			flex-direction: column;
		}

		.login-box {
			gap: 0px;
			margin: auto;
		}

		.moddakerImg {
			height: 35%;
			width: 100%;
			background-color: #fff;
		}

		.moddakerImg img {
			width: auto;
			margin: auto;
		}
	}


	/********************* Home Page ******************* */
	#home-cards-group {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		gap: 15%;

		padding: 15px !important;
	}
	.home-cards-group-row{
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 7.5%;
	}
	@media (max-width: 766px) {
		.home-cards-group-row{
			flex-direction: column;
		}
		.homeCard{
			margin: 10px auto!important;
			width: 65%;
		}
	}

	.homeCard {
		font-family: 'Traditional Arabic';
		width: 40%;
		background-color: whitesmoke;
		box-shadow: -8px 8px 16px 0 rgba(0, 0, 0, 0.2);
		/* h-offset v-offset blur spread color */
		transition: 0.3s;
		border-radius: 50px;
		margin: 1%;
		padding-top: 20px;
		/* padding-bottom: 20px; */
		padding-right: 2%;
		padding-left: 2%;
		overflow: auto;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.homeCard:hover {
		box-shadow: 0px 10px 10px 8px rgba(0, 0, 0, 0.2);
		background-color: #ebe7e7 !important;
		cursor: pointer;
	}
	.card-img{
		font-size: 60px;
		color: #40833a;
		text-align: center;
		border: 1px solid #40833a;
		border-radius: 45px;
	}
	.card-title{
        font-size: 50px;
		color:#BC9035;
    }
	/********************* Datatables And TABLES ******************* */
	table,
	table.table-bordered,
	table.tabe-hover {
		direction: rtl;
		margin: auto;
		border-radius: 30px !important;
		border-collapse: unset !important;
	}

	th {
		text-align: center;
		background-color: #aa8e55;
		color: white;
		border-radius: 30px;
	}

	td {
		direction: rtl;
		text-align: right;
		overflow: auto;
		color: #5d6c34;
		direction: rtl;
		border-style: none !important;
	}

	td.rounded {
		border-style: solid !important;
		border-radius: 30px !important;
	}

	th input {
		border-radius: 25px;
		padding: 5px;
		border: 0.2px solid #977c47;
		outline: none;
		margin: auto;
	}

	table.dataTable>thead>tr>th:not(.sorting_disabled),
	table.dataTable>thead>tr>td:not(.sorting_disabled) {
		padding-right: 12px;
	}


	tr:nth-child(even) {
		background-color: #f1f1f1;
	}

	tr:last-child>td:nth-child(1) {
		border-bottom-right-radius: 30px;
	}

	tr:last-child>td:last-child {
		border-bottom-left-radius: 30px;
	}

	.dataTables_filter {
		display: none;
	}

	table.dataTable {
		direction: rtl;
	}

	/**************************** Data tables pagination list ****************************/
	.page-item.active .page-link {
		z-index: 1;
		color: #fff !important;
		background-color: #5d6c34 !important;
		border-color: #5d6c34 !important;
		border-radius: 9px !important;
	}

	.page-link {
		position: relative;
		display: block;
		padding: .5rem .75rem;
		line-height: 1.25;
		color: #5d6c34 !important;
		background-color: #fff;
		border: 1px solid #5d6c34;
		border-radius: 9px !important;
		margin: 1.5%;
	}

	/************************************   CHARTS   **********************************************/

	/* Chart canvas and div styles */

	.chartCard {
		font-family: 'Traditional Arabic';
		width: 50%;
		background-color: whitesmoke;
		box-shadow: -8px 8px 16px 0 rgba(0, 0, 0, 0.2);
		/* h-offset v-offset blur spread color */
		transition: 0.3s;
		border-radius: 15px;
		margin: 1%;
		padding-top: 20px;
		/* padding-bottom: 20px; */
		padding-right: 2%;
		padding-left: 2%;
		overflow: auto;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.chartCard:hover {
		box-shadow: -16px 16px 16px 8px rgba(0, 0, 0, 0.2);
	}

	.chartCardHeader {
		display: flex;
		align-self: flex-start;
		width: 100%;
		justify-content: space-between;
	}

	.chartCardHeader .chartTitle {
		align-self: center;
	}

	.chartCardHeader a {
		justify-content: right;
		float: right !important;
	}

	.chartsPanel {
		display: flex;
		flex-direction: row;
		align-items: center;

		margin: 0.5%;
	}

	/* Responsive layout - makes a one column layout instead of a two-column layout */
	@media (max-width: 766px) {
		.chartsPanel {
			flex-direction: column;
		}

		.chartCard {
			width: 90%;
		}
	}

	div[id^="chartdiv"] {
		/* The Operator ^ - Match elements that starts with given value
    The Operator * - Match elements that have an attribute containing a given value: div[id*="chartdiv"] 
    */

		width: 100%;
		height: 600px;
		/* font-family: 'Traditional Arabic'!important; */
		font-size: 1.5rem;

	}

	.chartTitle {
		color: #977c47;
		background-color: #28a7454c;
		font-weight: 600;
		font-size: larger;
		border-left-style: solid;
		border-left-width: 5px;
		border-top-right-radius: 18px;
		border-bottom-right-radius: 18px;
		border-color: #28a745;

		padding: 3px 15% 3px 15%;

	}

	.customTooltip {
		color: white;
		font-weight: 600;
	}

	div[id^="legenddiv"] {
		padding-left: 50%;
		margin: auto;
	}

	/* #chartCard3 {
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
	} */

	/******************************** Forms And Inputs ***********************************/
	#filters {
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#filters input,
	#filters select,
	th input {
		border-radius: 25px;
		padding: 5px;
		border: 0.2px solid #977c47;
		outline: none;
	}

	select {
		border-radius: 25px;
		padding: 5px;
		border: 0.2px solid #977c47;
		outline: none;
	}

	input:hover,
	select:hover {
		border: 0.8px solid #977c47;
		background-color: #f3dfb4d7;
	}

	input:focus,
	select:focus {
		border: 0.8px solid #977c47;
		background-color: #f3dfb4d7;
	}

	select option {
		background-color: #f3dfb4d7;
	}

	/******************************** Slicing Links **********************************/
	ul.data-slicing-btns {
		list-style-type: none;

		display: grid;
		grid-template-columns: 185px 185px 185px 185px;

		font-size: 20px;
		font-weight: 700;
		color: #977c47;
	}

	@media (max-width: 1024px) {
		ul.data-slicing-btns {
			display: grid;
			grid-template-columns: 185px 185px 185px;
		}
	}

	@media (max-width: 780px) {
		ul.data-slicing-btns {
			display: grid;
			grid-template-columns: 185px 185px;
		}
	}

	ul.data-slicing-btns>li {
		/* padding: 0.9rem; */
		border-radius: 15px;
		border: 1px solid #977c47;
		margin: 0.1rem;
		width: 170px;
	}

	ul.data-slicing-btns>li>a {
		display: block;
		padding: 0.9rem 0.3rem 0.9rem 0.3rem;
		text-decoration: none;
		border-radius: 15px;
		width: 170px;
		text-align: center;
	}

	ul.data-slicing-btns li a:hover {
		background-color: #aa8e55;
		color: white;
	}

	ul.data-slicing-btns li a:active {
		background-color: #5d6c34;
		color: white;
	}

	/******************************* Texts and Messages *********************************/
	.iz-message {
		margin: auto;
		font-size: larger;
		text-align: center;
		background-color: rgba(175, 175, 221, 0.541);
		padding: 10px 15px;
		border-radius: 15px;
	}

	.alert-danger {
		direction: rtl;
		text-align: center;
		border-radius: 15px;
	}

	.alert>.alert-danger>.iz-small {
		direction: rtl;
		text-align: center;
		border-style: none;
		font-size: medium;
		color: red;
		background-color: white;
	}

	.iz-welcomemessage {
		direction: rtl;
		text-align: center;
		color: #40833a;
		font-size: larger;
		width: fit-content;
		padding: 3px 15px;
		margin: auto;
		border-radius: 25px;
		border: 1px solid #40833a;
	}