@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.droid-arabic-kufi {
  font-family: 'Droid Arabic Kufi', serif;
}

body {
  font-size: .875rem;
}
.img-width-100{
  width: 100%;
}
.display-for-print{
  display: none;
}
.text-klinik{
  color: #007d9d;
}
.bg-klinik{
  background-color: #007d9d !important;
}
.bg-klinik:hover{
  background-color: #007d9d;
  color: #FFFFFF;
}
.hidden-overflow{
  overflow:hidden;
}
.bg-image{
  background-image: url('img/bg.gif') !important;
}
@media print {

  @page {
    margin-top: 150px;
    margin-bottom: 150px;
  }
  .display-for-print{
    display: block;
  }
  .pagebreak { page-break-before: always; } /* page-break-after works, as well */
  .bg-img-cover{
    text-align: center;
    padding-top: 350px;
    padding-bottom: 350px;
    background-image: url("../img/coverpagenew.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    }
.bg-img-cover-kids{
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url("../img/kids-bg.jpg");
    background-position: center; /* Center the image */
    background-repeat: repeat; /* Do not repeat the image */
    }
  .h5-26{
    font-size: 45px !important;
    }
  .h5-25{
    font-size: 30px !important;
    }  
  .h5-22{
    font-size: 35px !important;
    }
  .h3-32{
    font-size: 32px !important;
  }  
    #donotprint {
      visibility: hidden;
    }
}

.print-first-page {
  display: none;
}
.right {
  float: right;
}
.left {
  float: left;
}
.text-right{
  text-align: right !important;
}

.cover-page{
 height: 80px; 
}
.ml-30{
margin-left: 30px !important;
}
.ml-20{
  margin-left: 20px !important;
}
.ml-10{
  margin-left: 10px !important;
  }
.mr-30{
  margin-right: 30px !important;
}
.mr-10{
  margin-right: 10px !important;
}
.pt-20{
  padding-top: 20px;
}
.pr-20{
  padding-right: 20px;
}
.pr-40{
  padding-right: 40px;
}
.size-inbox{
  width: 28px !important;
  height: 28px !important;
}
.size-inbox-active{
  width: 28px !important;
  height: 28px !important;
  stroke: #007bff;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none;
}
.notification{
  color: #007bff;
  position:relative;
  top:-1.2em;
  left: -0.4em;
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  .notification {
    color: #007bff;
    position:relative;
    top:-2.7em;
    left: 1.4em;
    font-size: 16px;
  }
}
.color-primary{
 color: #00b0f0;
}
.color-white{
  color: #FFFFFF;
 }
.color-black{
    color: #000000;
}
.color-grey{
  color: #636363;
}
.bg-report{
  background-color: #00b0f0;
  padding-bottom: 10px;
}
.bg-report-light{
  background-color: rgb(218, 234, 240);
  padding-top: 20px;
}



.bg-img-1{
background-image: url("../img/covernew.jpg");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
.bg-img-2{
  background-image: url("../img/avrnew.jpg");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.move-left-40{
  padding-right: 40px;
}
.space-bottom-15{
  margin-bottom: 15px;
}

.width-100{
  width: 100%;
}

.underln-final{
  text-decoration: line-through;
}
.underln:hover{
  color: red;
}
.remove-doc:hover{
  color: red;
  font-size : 20px;
}


.green-24{
  font-size:24px;
  color:green;
}
.bg-green{
  background-color: green;
  font-size:24px;
  color:white;
}
.bg-red{
  background-color: red;
  font-size:24px;
  color:white;
}
.bg-blue{
  background-color: #00b0f0;
  font-size:24px;
  color:white;
}
.bullet-green{
  color:green;
}
.bullet-red{
  color:red;
}
.bullet-blue{
  color:#00b0f0;
}
.red-24{
  font-size:24px;
  color:red;
}
.blue-24{
  font-size:24px;
  color: blue;
}
.red{
  color:red;
}

.gray{
  color: #c6c6c6;
}

.text-24{
  font-size: 24px;;
}
.text-message{
  font-size: 18px;
}
.text-by{
  background-color: #00b0f0;
  font-size:12px;
  color:white;
  display: inline-block;
}
.reply-by{
  background-color: #55B4B0;
  font-size:12px;
  color:white;
  display: inline-block;
}
.not-reply-by{
  background-color: #BC243C;
  font-size:12px;
  color:white;
  display: inline-block;
}
.h5-26{
  font-size:26px;
}
.h5-25{
  font-size:25px;
}
.h5-22{
  font-size:22px;
}
.h5-12{
  font-size:16px;
}
.h4-30{
  font-size:30px;
}
.h3-32{
  font-size:32px;
}
.h2-34{
  font-size:34px;
}
.txt-18{
  font-size:18px;
}
.dash-un-list{
  font-size:12px !important;
  padding-top: 11px;
}

/*.table-thicker thead, .table-thicker th, .table-thicker tr{
  border-width: 4px !important;
  border-style: solid !important;
  border-color: #dee2e6 !important;
}*/
.table-thicker{
  border-width: 4px !important;
  border-style: solid !important;
  border-color: #dee2e6 !important;
}
.borderless td, .borderless th {
  border: none;
}
.rounded-corners{
  border-radius: 25px;
}
.rounded-corners-top{
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
 
}
.rounded-corners-bottom{
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
 
}
.feedback {
  background-color : #00b0f0;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-color: #999;
}

#mybutton {
  position: fixed;
  bottom: -4px;
  right: 10px;
}
.space-under{
  padding-bottom: 7px;
}

.text-decoration-underline{
 text-decoration: underline;
}

.page-break	{
  display: block;
  page-break-before: always;
  height: 100px;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.iconz {
  font-family: 'FontAwesome', 'Second Font name'
}


/* For pagination */


/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px; /* Height of navbar */
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
 * Utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }






:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.card-signin {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.card-signin .card-title {
  margin-bottom: 2rem;
  font-weight: 300;
  font-size: 1.5rem;
}

.card-signin .card-body {
  padding: 2rem;
}

.form-signin {
  width: 100%;
}

.form-signin .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  transition: all 0.2s;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group input {
  height: auto;
  border-radius: 2rem;
}

.form-label-group>input,
.form-label-group>label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group>label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
  /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown)~label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

.btn-google {
  color: white;
  background-color: #ea4335;
}

.btn-facebook {
  color: white;
  background-color: #3b5998;
}



/* For delete confirmation */
.modal-confirm {		
	color: #636363;
	width: 400px;
}
.modal-confirm .modal-content {
	padding: 20px;
	border-radius: 5px;
	border: none;
	text-align: center;
	font-size: 14px;
}
.modal-confirm .modal-header {
	border-bottom: none;   
	position: relative;
}
.modal-confirm h4 {
	text-align: center;
	font-size: 26px;
	margin: 30px 0 -10px;
}
.modal-confirm .close {
	position: absolute;
	top: -5px;
	right: -2px;
}
.modal-confirm .modal-body {
	color: #999;
}
.modal-confirm .modal-footer {
	border: none;
	text-align: center;		
	border-radius: 5px;
	font-size: 13px;
	padding: 10px 15px 25px;
}
.modal-confirm .modal-footer a {
	color: #999;
}		
.modal-confirm .icon-box {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 50%;
	z-index: 9;
	text-align: center;
	border: 3px solid #f15e5e;
}
.modal-confirm .icon-box i {
	color: #f15e5e;
	font-size: 46px;
	display: inline-block;
	margin-top: 13px;
}
.modal-confirm .btn {
	color: #fff;
	border-radius: 4px;
	background: #60c7c1;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	min-width: 120px;
	border: none;
	min-height: 40px;
	border-radius: 3px;
	margin: 0 5px;
	outline: none !important;
}
.modal-confirm .btn-info {
	background: #c1c1c1;
}
.modal-confirm .btn-info:hover, .modal-confirm .btn-info:focus {
	background: #a8a8a8;
}
.modal-confirm .btn-danger {
	background: #f15e5e;
}
.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
	background: #ee3535;
}
.trigger-btn {
	display: inline-block;
	margin: 100px auto;
}
.removeunderline{
	text-decoration: none !important;	
}


/* Fallback for Edge
-------------------------------------------------- */

@supports (-ms-ime-align: auto) {
  .form-label-group>label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .form-label-group>label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}

.container {
  max-width: 960px;
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-top-gray { border-top-color: #adb5bd; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.lh-condensed { line-height: 1.25; }

.icon-font-size{
	font-size: 1.7em !important;
  padding-bottom: 5px;	
  padding-top: 5px;
}

.table > tbody > tr > td {
  vertical-align: middle;
}
th {
  vertical-align: middle;
  text-align: center;
}

@media (max-width:481px)  {
  .icon-font-size{
    font-size: 1.5em !important;
  }
  .ml-20{
    margin-left: 0px !important;
  }
}

.card {
  border: none;
  border-radius: 10px;
}

.c-details span {
  font-weight: 300;
  font-size: 13px;
}
.icon {
  width: 50px;
  height: 50px;
  background-color: #eee;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
}
.badge span {
  background-color: #fffbec;
  width: 90px;
  height: 25px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: flex;
  color: #fed85d;
  justify-content: center;
  align-items: center;
}

.badge1 span {
  background-color: #fffbec;
  width: 180px;
  height: 45px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: flex;
  color: #fed85d;
  justify-content: center;
  align-items: center;
}

.badge-blue span {
  background-color: #007d9d;
  width: 130px;
  height: 30px;
  font-size: 14px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: flex;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;
}
.badge-blue1 span {
  background-color: #007d9d;
  width: 190px;
  height: 35px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: flex;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;
}

.badge-blue2 {
    white-space: nowrap;
}
.badge-blue2 span {
  background-color: #007d9d !important;
  width: 130px;
  height: 30px;
  font-size: 14px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: inline-block;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;
}

.card-height-500{
  height: 500px;
}
.adjust-plus-btn{
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  padding-bottom:10px;
}
.adjust-card-center-100{
  transform: translate(0%, 70%);
}
.adjust-card-center-200{
  transform: translate(0%, 25%);
}
.adjust-card-center-ar-100{
  transform: translate(0%, 120%);
}
.adjust-card-center-ar-200{
  transform: translate(0%, 60%);
}
.adjust-card-center-ar-300{
  transform: translate(0%, 30%);
}
.adjust-card-center-ar-400{
  transform: translate(0%, 10%);
}


.pt-6,
.py-6 {
  padding-top: 5rem !important;
}

.pr-6,
.px-6 {
  padding-right: 5rem !important;
}

.pb-6,
.py-6 {
  padding-bottom: 5rem !important;
}

.pl-6,
.px-6 {
  padding-left: 5rem !important;
}
.div-img-center{
  margin:0 auto;
  padding: 10px;
}
.img-center {
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border:4px solid #007d9d;
}
.img-border{
  border:4px solid #007d9d;
}
.services span {
  background-color: #007d9d;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  color: #FFF;
  justify-content: center;
  align-items: center;
}

.services1 span {
  font-size: 22px !important;
  background-color: #007d9d;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  color: #FFF;
  justify-content: center;
  align-items: center;
}

.progress {
  height: 10px;
  border-radius: 10px;
}
.progress div {
  background-color: red;
}

.text1 {
  font-size: 14px;
  font-weight: 600;
}

.text2 {
  color: #a5aec0;
}

.circleborder {
  border: 3px solid #007d9d !important;
  border-radius: 100% !important;
  width:80px !important;
}
.circleborderclicked {
  border: 3px solid #BC243C !important;
}