/*FONTS*/ 
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

:root {
	--bar-color: #265ca9;
	--subbar-color: #4989e5;
	--text-color: #000;	
	--blue-color: #0191DE;
	--blue-hover-color: #0083C9;
	--primary-font-size: 10px;
	--heading-font-size: 25px;
	--primary-font: 'Open Sans', sans-serif;
	--card-title-color: #64748B;
	--body-bg: #FFF;
	--card-body-color : #EDF5FF;
}
.eshifa-logo {
		float: left;
		width: 70px;
		height: 64px;
		background: url(../images/shifa-logo.svg) no-repeat center;
		background-size: 40px 40px;
	}
	
/*GENERAL STYLES*/
html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Open Sans', sans-serif;
	color: var(--text-color);
	font-size: var(--primary-font-size);
	overflow-x: hidden;
	background: var(--body-bg);
	-webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;	
}

ul, li {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
a, a:hover, td a img, .card-list li div img {
	text-decoration: none;
	-webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
a {
	color: var(--blue-color);
}
img {
	max-width: 100%;
}

h2 {
	
 font-family: "Times New Roman", Times, serif;
}
h1 {
	
 font-family: "Times New Roman", Times, serif;
}
h4 {
	font-weight: 24px;
	margin: 0;
}
.form-control-f {
	font-size: var(--primary-font-size);
	padding: 12px 20px;
	border-radius: 30px;
	border: 1px solid #E8EBF3;
}
.form-control{
	font-size: var(--primary-font-size);
	border-radius: 2px;
}
.form-control.select {
	border-radius: 5px;
	padding: auto
	height: auto !important;
	border: 0;
	min-height: 37px;
}

.form-control:focus {
	border-color: #97B2F0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(187, 187, 233, 0.6);
}

.form{

width: 100%;
}

.select-input {
	position: relative;
	display: inline-block;
	margin: 0 0 0 10px !important;
}
.select-input::after {
	content: "";
	position: absolute;
	top: 16px;
	right: 12px;
	width: 12px;
	height: 7px;
	background: url(../images/select-arrow.svg) no-repeat center center;
}
.btn {
	
	font-size: var(--primary-font-size);
	
	
}

.primarywidth{


width:90%;
}
.btn-primary {
	background: var(--blue-color);
}
.btn-primary:hover {
	background: var(--blue-hover-color);
}
.w-300 {
	width: 300px;
}
.p-30 {
	padding: 30px;
}
.m-t-30 {
	margin-top: 30px;
}

/*PRELOADER*/
.preloader {
	background: var(--bar-color);

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
.lds-ripple {
  display: inline-block;
  width: 100px;
  height: 100px;
	position: absolute;
	    left: 53%;
    top: 52%;
	 opacity: 0.5;
    background: url(../images/login-logo.png) no-repeat center top;
	transform: translate(-50%, -50%);	
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
  top: 45px;
    left: 48px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
   top: 4px;
    left: 9px;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}


/*Login*/
.login-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/login-bg.png) no-repeat top center;
	background-size: cover;

}
.login-section .content-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 30px;
  width: 90%;
  max-width: 450px;
  transform: translate(-50%, -50%);
}
.login-section .login-logo {
  float: left;
  width: 100%;
  background: url(../images/login-logo.png) no-repeat center top;
  height: 129px;
  margin-top: -44px;
}
.login-section .content {
	float: left;
	width: 100%;
	padding: 20px 15px;
    border-top: 1px solid #ECEDEF;
    margin-top: 30px; 
}
.username {
    border-radius: 30px !important;
    background: url(../images/username-icon.png) no-repeat calc(100% - 3px) center;
    height: 40px;
}
.password {
    background: url(../images/password-icon.png) no-repeat calc(100% - 3px) center;
    border-radius: 30px !important;
    height: 40px;
}
.login-section .btn {
  width: 100%;
  border-radius: 30px;
  padding: 7px;
}
.forgot-password {
	text-align: center;
	margin: 20px 0 0;
}

/*Header*/
header {
	position: fixed;
	top: 0;
	right: 0;
	height: 55px;
	width: calc(100% - 180px);
	background: #fff;
	--box-shadow: 0px 0px 15px #DEE4EC;
	border-bottom: 1px solid rgba(0,0,0,.125);
	z-index: 999;
	--box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px !important;
}

.user-info {
	padding: 16px 5px;
	display: flex;
}
.user-info img {
	display: inline-block;
	margin-right: 10px;
}
.user-info span {
	display: inline-block;
	line-height: 16px;
}
.user-info strong {
	font-weight: bold;
	display: block;
}
header .dropdown > a {
	width: 58px;
	height: 64px;
	display: inline-block;
	background: url(../images/down-arrow.svg) no-repeat center center;
	border-left: 1px solid #E2E8F0;
}

.dropdown-item {
	font-size: var(--primary-font-size);
	padding: .5rem 1.5rem;
	font-weight: 600;
}
.small-screen-nav {
	display: none;
}

/*Left Nav*/
.nav-left {
	position: fixed;
	left: 0;
	top: 0;
	overflow-y: auto; 
	overflow-x: hidden;
	width: 180px;
	height: 100%;
/*	background: #fff url(../images/left-nav-bg.svg) no-repeat bottom center;*/
	--border-right: 1px solid #E2E8F0;
	border-right: 1px solid rgba(0,0,0,.125);
	z-index: 9;
	--box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px !important;
}
.logo {
	padding: 10px;
	border-bottom: 1px solid #E2E8F0;
}
.logo2 {
	padding: 24px;
	
}
.nav-left ul {
	
	display: flex;
	flex-wrap: wrap;
}
.nav-left ul li {
	
	padding: 0 0 0 0;
    display: block;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    width: 100%;
    border: solid 3px #fff;
}
.nav-left ul a {
	color: var(--text-color);
	font-weight: bold;
   font-family: sans-serif;
	
}
.nav-left ul li a {
    display: block;
    padding: 7px 0 7px 10px;
    color: #000 !important;
    white-space: nowrap;
    
}

.nav-left ul li:hover {
	background: #dfdfdf;
	cursor: pointer;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.nav-left ul a svg {
	fill: #6c6f74;
	position: absolute;
	top: 2px;
	left: 0;
}
.nav-left ul li a.active{
	background-color: var(--bar-color);
	font-weight: bold;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	--cursor: default;
	color: #fff !important;
	--box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}
.nav-left ul li .left-sub-menu.active.dropdown-toggle::after
{
	border-top: 4px solid #fff;
}

.nav-left ul li a.sub-active{
	background: #e2e2e2;
	font-weight: bold;
	cursor: pointer;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}
.nav-left ul li .submenu a:hover {
	background: #e2e2e2;
	cursor: pointer;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.nav-left .dropdown-toggle::after {
    display: inline-block;
    margin-left: 10px;
    vertical-align: 2px;
    border-top: 4px solid var(--bar-color);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.nav-left .submenu {
            padding-left: 3px;
            background: #ebebeb;
        }
 .nav-left .submenu a {
         color: #adb5bd;
       }



.nav-left ul li .nav-icon{
	padding: 5px;
	background: var(--bar-color);
	color: white;
	border-radius: 3px;
	margin-right: 3px ;
	margin-left: 3px;
}
.nav-left ul li a.active .nav-icon{
	background: #fff;
	color: var(--bar-color);
	
}

.nav-main {
	margin-left:200px !important;
	transition: .35s ease-in-out;
}

/*Main Body*/
main {
	margin: 64px 0 0 176px;
	transition: .1s ease-in-out;
}


.card {
	--box-shadow: 0px 0px 15px #DEE4EC;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
	--border: 0;
	/* min-height: calc(100vh - 202px); */
	--box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px !important;
}

.card-body {
	padding:5px;
	--margin-top: 5px;
	--background-color: var(--card-body-color);
	
}



.footer {
	padding-top: 20px;
	padding-bottom: 20px;
}
.search-btn {
	display: inline-block;
	margin-left: 10px;
	width: 37px;
	height: 37px;
	background: var(--blue-color) url(../images/search-icon.svg) no-repeat center center;
	border-radius: 5px;
}
.search-btn:hover {
	background: var(--blue-hover-color) url(../images/search-icon.svg) no-repeat center center;
}

.card-img {
	border-radius: 5px;
}
.dr-title, .dr-deprt {
	display: block;
	line-height: 24px;
}
.dr-detail li {
	display: block;
	border-top: 1px solid #E2E8F0;
	padding-top: 20px;
	margin-top: 20px;
}
.dr-detail li span:first-child {
	width: 200px;
	display: inline-block;
	vertical-align: top;
}
.dr-detail li span:last-child {
	width: calc(100% - 204px);
	display: inline-block;
	font-weight: bold;
}
.dashboard .card {
	min-height: inherit;
}
.user-detail h2 {
	margin: 10px 0 0;
}
.user-detail td {
	padding: 14px 0;
}
.user-detail td:last-child {
	font-weight: bold;
}
.user-detail tr:last-child td {
	border: 0;
	padding-bottom: 0;
}
.tile {
	background: linear-gradient(90deg, #005BEA 0%, #0DB2DE 102.12%);
	display: block;
	border-radius: 5px;
	box-shadow: 0px 0px 15px #DEE4EC;
	-webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
	position: relative;
	top: 0;
	padding: 20px;
}
.tile.pink {
	background: linear-gradient(90deg, #F93A5A 0%, #F7778C 102.12%);
}
.tile.green {
	background: linear-gradient(90deg, #029666 0%, #48D6A8 102.12%);
}
.tile::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	right: 20px;
	width: 10px;
	height: 16px;
	background: url(../images/white-arrow.svg) no-repeat center center;
	background-size: contain;
}
.tile:hover {
	top: -5px;
	box-shadow: 0px 0px 15px #909BAA;
}
.tile h3 {
	font-size: 24px;
	color: #fff;
	display: inline-block;
	margin: 0 0 0 12px;
	vertical-align: middle;
}
.card-header {
	padding: 25px;
	border-bottom: 1px solid #E2E8F0;
	border-radius: 0 !important;
	background: none;
}
.card-header span {
	display: inline-block;
	margin: 0 0 0 10px;
	vertical-align: middle;
	color: var(--card-title-color);
}
.card-header span strong {
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
}
.dashboard .card-body {
	padding: 25px;
}
.card-list li {
	display: block;
	margin: 0 0 20px 0;
}
.card-list li div {
	display: inline-block;
	vertical-align: middle;
}
.card-list li div:first-child {
	width: calc(100% - 89px);
}
.card-list li div:first-child a {
	display: block;
	font-weight: bold;
}
.card-list li div:last-child a {
	margin-left: 5px;
}
.card-list li div img:hover {
	opacity: 0.6;
}
.dashboard .has-dr-img {
	background: #fff url(../images/dr-img-small.png) no-repeat left bottom;
	min-height: 156px;
}
.dashboard .has-dr-img::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	right: 30px;
	width: 10px;
	height: 16px;
	background: url(../images/right-arrow.svg) no-repeat center center;
	background-size: contain;
}
.dashboard .has-dr-img .card-body {
	position: absolute;
	left: 38%;
	top: 50%;
	padding: 0;
	transform: translateY(-50%);
}
.dashboard .has-dr-img a {
	padding: 10px 15px;
}
textarea {
	width: 100%;
	--height: 70px;
	border: 1px solid #E2E8F0;
	border-radius: 5px;
	padding: 15px;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	-o-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
textarea:focus {
	border: 1px solid var(--blue-color);
	outline: none;
	box-shadow: 0px 0px 15px #DEE4EC;
}
.btn-circle {
	position: absolute;
	right: 35px;
	bottom: 40px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--blue-color) url(../images/white-arrow.svg) no-repeat center center;
	background-size: 10px 16px !important;
	border: 0;
	text-indent: -9999px;
	cursor: pointer;
}

.hide{
	display: none!important;
}

.btn-circle:hover {
	background: var(--blue-hover-color) url(../images/white-arrow.svg) no-repeat center center;
}
.small-screen-nav {
	display: none;
}

/*Responsive*/
@media (max-width: 1500px) {
	.tile {
		text-align: center;
	}
	.tile h3 {
		display: block;
		margin: 15px 0 0;
	}
	.tile::after {
		display: none;
	}
	.w-300 {
		width: 250px;
	}
}
@media (max-width: 1199px) {
	.user-detail {
		margin-top: 30px;
	}
	.w-300 {
		width: calc(50% - 31px);
		margin-bottom: 15px !important;
	}
	.text-right .w-300:first-child {
		margin-left: 0 !important;
	}
}

@media (max-width: 992px) {
	.nav-left {
		left: -300px;
		top: 57px;
		height: calc(100% - 65px);
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		-o-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	.nav-show {
		left: 0;
	}
	.logo {
		display: none;
	}
	header {
		width: 100%;
	}
	main {
    margin: 60px 0 0 0px;
    transition: .1s ease-in-out;
		}
	.small-screen-nav {
		display: block;
	}

	.hamburger-menu {
		float: left;
		width: 58px;
		height: 56px;
		background: url(../images/menu-icon.svg) no-repeat center center;
		border-right: 1px solid #E2E8F0;
	}
	.logo-small {
		float: left;
		width: 70px;
		height: 56px;
		background: url(../images/shifa-logo-1.svg) no-repeat center;
		background-size: 40px 40px;
	}
	.nav-left-mini-main{
	  margin: 60px 0 0 0px !important;
    transition: .1s ease-in-out;
	}
	.nav-left-mini-header{
		width: 100% !important;
	}

	
}
@media (max-width: 767px) {
	.tile {
		margin-bottom: 30px;
	}
	.tile.green {
		margin: 0;
	}
	.card-img {
		margin-bottom: 30px;
	}
}
@media (max-width: 500px) {
	.w-300, .search-btn  {
		width: 100%;
		margin: 0 0 15px !important;
	}

	.user-info {
		font-size: 8px !important;
	}
}

.filter-card{

    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    border-radius: 3px;
    padding: 5px;
    background: #e3f2ff;
  
}

.btn-add{
	background: #ffff;
	
}


.card3 .card-body {
    padding: 10px;
   
}
.card3 .card-content img{
	width: 50px;
    height: 50px;

}




.spinner_dot {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  
}
.spinner_dot span {
   vertical-align:middle;
   border-radius:100%;
   
   display:inline-block;
   width: 15px;
    height: 15px;
   margin:3px 2px;
   -webkit-animation:spinner_dot 0.8s linear infinite alternate;
   animation:spinner_dot 0.8s linear infinite alternate;
}
.spinner_dot span:nth-child(1) {
   -webkit-animation-delay:-1s;
   animation-delay:-1s;
  background:#185797;
}
.spinner_dot span:nth-child(2) {
   -webkit-animation-delay:-0.8s;
   animation-delay:-0.8s;
  background:#185797;
}
.spinner_dot span:nth-child(3) {
   -webkit-animation-delay:-0.26666s;
   animation-delay:-0.26666s;
  background:#185797;
}
.spinner_dot span:nth-child(4) {
   -webkit-animation-delay:-0.8s;
   animation-delay:-0.8s;
  background:#185797;
  
}
.spinner_dot span:nth-child(5) {
   -webkit-animation-delay:-1s;
   animation-delay:-1s;
  background:#185797;
}

@keyframes spinner_dot {
   from {transform: scale(0, 0);}
   to {transform: scale(1, 1);}
}
@-webkit-keyframes spinner_dot {
   from {-webkit-transform: scale(0, 0);}
   to {-webkit-transform: scale(1, 1);}
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it overlays on top of other content */
    pointer-events: none; /* Allow clicks to pass through */
}

.spinner_dot_modal {
    display: flex;
    position: absolute;
    top: 68%;
    left: 87%;
    transform: translate(-50%, -50%);
    z-index: 99999; /* Ensure spinner is on top */
}

.spinner_dot_modal span {
    vertical-align: middle;
    border-radius: 100%;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 3px 2px;
    -webkit-animation: spinner_dot_modal 0.8s linear infinite alternate;
    animation: spinner_dot_modal 0.8s linear infinite alternate;
}

.spinner_dot_modal span:nth-child(1) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    background: #185797;
}

.spinner_dot_modal span:nth-child(2) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    background: #185797;
}

.spinner_dot_modal span:nth-child(3) {
    -webkit-animation-delay: -0.26666s;
    animation-delay: -0.26666s;
    background: #185797;
}

.spinner_dot_modal span:nth-child(4) {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    background: #185797;
}

.spinner_dot_modal span:nth-child(5) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    background: #185797;
}

/* Keyframes for spinner */
@keyframes spinner_dot_modal {
    from { transform: scale(0, 0); }
    to { transform: scale(1, 1); }
}

@-webkit-keyframes spinner_dot_modal {
    from { -webkit-transform: scale(0, 0); }
    to { -webkit-transform: scale(1, 1); }
}



.spinner_dot_mini {
  display: block;
  position: fixed;
  top: 50%;
  left: 45%;
  
}
.spinner_dot_mini span {
   vertical-align:middle;
   border-radius:100%;
   
   display:inline-block;
   width: 10px;
    height: 10px;
   margin:3px 2px;
   -webkit-animation:spinner_dot_mini 0.8s linear infinite alternate;
   animation:spinner_dot_mini 0.8s linear infinite alternate;
}
.spinner_dot_mini span:nth-child(1) {
   -webkit-animation-delay:-1s;
   animation-delay:-1s;
  background:#185797;
}
.spinner_dot_mini span:nth-child(2) {
   -webkit-animation-delay:-0.8s;
   animation-delay:-0.8s;
  background:#185797;
}
.spinner_dot_mini span:nth-child(3) {
   -webkit-animation-delay:-0.26666s;
   animation-delay:-0.26666s;
  background:#185797;
}
.spinner_dot_mini span:nth-child(4) {
   -webkit-animation-delay:-0.8s;
   animation-delay:-0.8s;
  background:#185797;
  
}
.spinner_dot_mini span:nth-child(5) {
   -webkit-animation-delay:-1s;
   animation-delay:-1s;
  background:#185797;
}

.hand{
	cursor: pointer;
}

@keyframes spinner_dot_mini {
   from {transform: scale(0, 0);}
   to {transform: scale(1, 1);}
}
@-webkit-keyframes spinner_dot_mini {
   from {-webkit-transform: scale(0, 0);}
   to {-webkit-transform: scale(1, 1);}
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-right: 15px;
  padding-left: 15px;
}