@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/DroidKufi-Regular.eot);
  src: url(../fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidKufi-Regular.woff2) format('woff2'),
       url(../fonts/DroidKufi-Regular.woff) format('woff'),
       url(../fonts/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/DroidKufi-Bold.eot);
  src: url(../fonts/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidKufi-Bold.woff2) format('woff2'),
       url(../fonts/DroidKufi-Bold.woff) format('woff'),
       url(../fonts/DroidKufi-Bold.ttf) format('truetype');
}
h1 , h2 , h3 , h4 , h5, a , p , .sfont , .toast ,.button ,.item-inner ,.swal2-styled ,.swal2-html-container
,.dataTables_info, label ,.dialog {
font-family: 'Droid Arabic Kufi', serif;	
}

* ,div, h1 , h2 , h3 , h4 , h5, a , p , span {
  text-shadow:none;border:0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input , textarea {
	-webkit-user-select: initial!important;
	-khtml-user-select: initial!important;
	-moz-user-select: initial!important;
	-ms-user-select: initial!important;
	user-select: initial!important;	
}
:root {
    --f7-theme-color: #0073aa;
    --f7-theme-color-rgb: 3, 119, 144;
    --f7-theme-color-shade: #0d94d4;
    --f7-theme-color-tint: #0d94d4;
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px;
    --f7-safe-area-top: 0px;
    --f7-safe-area-bottom: 0px;
    --f7-safe-area-outer-left: 0px;
    --f7-safe-area-outer-right: 0px;
    --f7-device-pixel-ratio: 1;
	
	--f7-popup-tablet-width: 1000px;
}

.dialog-buttons {
    justify-content: center!important;
}
.dialog-title+.dialog-text ,.dialog-title {
    text-align: center;
}
.swal2-shown > [aria-hidden="true"] {
  transition: 0.1s filter;
  filter: blur(5px);
}
.swal2-styled.swal2-confirm {
    background-color: var(--f7-theme-color)!important;
    font-size: 14px!important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px var(--f7-theme-color) / 50%!important;
}
.swal2-html-container {
    margin: auto!important;
    font-size: 18px!important;
}

input[type=search] {
	display: inherit;
	font-family: 'Droid Arabic Kufi', serif;	
	border-radius: 5px!important;
}
.dataTables_wrapper .dataTables_length select {
    display: inline;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: right;
}

.aurora .f7-icons, .aurora .material-icons {
    font-size: 35px;
}
.aurora .notification.modal-in ,.notification {
    direction: rtl!important;
    color: #fff!important;
	background: darkred;
}
.notification-title {
    padding-right: 20px!important;
    padding-top: 5px!important;
    color: #fff!important;
	font-family: 'Droid Arabic Kufi', serif;
}

.navbar, .nvbar2{
	-webkit-box-shadow: 0 8px 6px -6px #ccc;
		   -moz-box-shadow: 0 8px 6px -6px #ccc;
				box-shadow: 0 8px 6px -6px #ccc;
}
.panel-right{
	-webkit-box-shadow: -6px 0px 6px 0px #ccc;
		   -moz-box-shadow: -6px 0px 6px 0px #ccc;
				box-shadow: -6px 0px 6px 0px #ccc;
	background: var(--f7-theme-color);
}
.MobileBTM {
    display: none!important;
}
.panelTitle{
	background: transparent!important;
	color: #fff!important;
	height:56px;
}
.panelTitle:before{
	height:0px!important;
}
.panelTitle:after{
	height:1px!important;
	-webkit-box-shadow: -6px 0px 6px 0px #fff;
		   -moz-box-shadow: -6px 0px 6px 0px #fff;
				box-shadow: -6px 0px 6px 0px #fff;
	background:#fff!important;
}

.badge {
    color: var(--f7-theme-color)!important;
    background: #fff;
}

#loginPage {
  background: var(--f7-theme-color);
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index:-99999999;
}

#loginPage .bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-99999999;
}

#loginPage .bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  animation: square 25s infinite; 
  transition-timing-function: linear;
}
#loginPage .bg-bubbles li:nth-child(1) {
  left: 10%;
}
#loginPage .bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  animation-delay: 2s;
  animation-duration: 17s;
}
#loginPage .bg-bubbles li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
  
}
#loginPage .bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
#loginPage .bg-bubbles li:nth-child(5) {
  left: 70%;
}
#loginPage .bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
#loginPage .bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}
#loginPage .bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}
#loginPage .bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  animation-delay: 2s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
#loginPage .bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  animation-delay: 11s;        
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1100px) rotate(600deg);
  }
}
@keyframes square {
  0% {
            transform: translateY(0);
  }
  100% {
            transform: translateY(-1100px) rotate(600deg);
  }
}

#loginPage .card{
	max-width:500px; 
	margin:0 auto; 
	height:500px; 
	margin-top:calc(50vh - 250px);
	text-align:center;
}

.homeCard{
	height:120px;
	margin:0 auto;
	margin-top:10px;
	border: 2px solid var(--f7-theme-color);
}
.profileCard{
	margin:0 auto;
	margin-top:10px;
	border: 1px solid var(--f7-theme-color);
}

.homeChart1,.homeChart2{
	background:#fff;
}
/*==========================*/
@media only screen and (max-width: 960px) {
  .MobileBTM {
    display: flex!important;
  }
}