@charset "utf-8";
:root {
  --primary-color: #1C6F3F;
  --dark_primary-color: #13532E;
  --light_primary-color: #50B77B;
  --scoundary-color: #5B5A5A;
  --scoundary-color-light: #BDBCBC;
  --table_border:#ACACAC;
  --body-color: #F9F9F9;
  --white: #ffffff;
  --black: #000000;

}
/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Material-Icons-Outlined.woff2') format('woff2');
}
/* fonts*/
@font-face {
  font-family: 'Tajawal-Bold';
  src: url('fonts/Tajawal-Bold.woff2') format('woff2'),
      url('fonts/Tajawal-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tajawal-Medium';
  src: url('fonts/Tajawal-Medium.woff2') format('woff2'),
      url('fonts/Tajawal-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined'!important;
  font-weight: normal;
  font-style: normal;
  font-size: 1.4rem;
  color: var(--primary-color);
  vertical-align: bottom;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
.Tajawal-Medium{font-family: 'Tajawal-Medium' !important;}
.Tajawal-Bold{font-family: 'Tajawal-Bold' !important;}
a,
h3,
h2,
h1,
h4,
h5,
p,
span,
div,
li {
  font-family: "Tajawal-Medium" !important;
}
body{background-color: var(--body-color);}
body, html  {
  height: 100%;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none !important;
}

.center {
  display: block !important;
  margin: auto !important;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
.justify {
  text-align: justify !important;
}
.tooltip .tooltip-inner {
  background: var(--black) !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--black) !important;
}
.tooltip.tooltip.start .tooltip-arrow::before {
  border-left-color: var(--black) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--black) !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--black) !important;
}
.btn:focus {
  outline: 0;
  box-shadow: none !important;
}
.btn:focus.search-icon{color: var(--black);}


.body{background-color: var(--body-color);}
.primary_color{color: var(--primary-color);}
.bg_primary_color{background-color: var(--primary-color) !important;}
.light_primary_color{color: var(--light_primary-color);}
.bg_dark_primary_color{background-color: var(--dark_primary-color) !important;}
.scoundary_color{color: var(--scoundary-color);}
.scoundary_color_light{color: var(--scoundary-color-light);}


/*----------start page styles -----------*/
/*-----------------( Start login page styles )--------------*/
body .login{background: var(--body-color);
  height: 100%;
  }
.login .content{max-width:25rem; border-radius: 20px;}
.login .content a:hover{color: var(--primary-color);}
.border_radius{border-radius: 20px !important; }

.inputWithIcon{width: 100%;}
.inputWithIcon input[type="text"],.inputWithIcon input[type="password"], .inputWithIcon input[type="email"] {
  width: 100%;
  border: 1px solid var(--scoundary-color-light);
  border-radius: 5px;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus,input[type="password"]:focus ,input[type="email"]:focus{
  border-color: var(--primary-color);
  box-shadow: 0 0 8px 0 var(--primary-color);
}

.inputWithIcon input[type="text"],.inputWithIcon input[type="password"],.inputWithIcon input[type="email"] {
  padding-right: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  font-size: 20px;
  right: 0;
  top: 2px;
  padding: 9px 8px;
  color: var(--scoundary-color-light);
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i ,.inputWithIcon input[type="password"]:focus + i,.inputWithIcon input[type="email"]:focus + i {
  color: var(--primary-color);
}
.form-check-input {
  background-color: var(--scoundary-color-light);
  border-color: var(--scoundary-color-light);
}
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 8px 0 var(--primary-color);
outline: none;}
/*-----------------( End login page styles )--------------*/

/*-----------------( Start Header section styles )--------------*/
header ul li a i{
  color: var(--white) !important;
}
header ul li a:hover i{
  color: var(--black) !important;
}
.pulse {
  display: block;
  position: absolute;
  inset-block-start: 0px;
  inset-inline-end: 8px;
  inset-inline-start: 0px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: red;}
  .pulse:before {
    content: "";
    inset-block-start: -4px;
    inset-inline-end: -4px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    background: rgba(192, 34, 34, 0.6);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(192, 34, 34, 0.9);
    animation: pulse 1s linear infinite;
}

@-webkit-keyframes pulse {
  0% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  8% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  15% {
      -webkit-transform: scale(0.1);
      opacity: 1;
  }

  30% {
      -webkit-transform: scale(0.5);
      opacity: 1;
  }

  100% {
      opacity: 0;
      -webkit-transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  8% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  15% {
      -webkit-transform: scale(0.1);
      opacity: 1;
  }

  30% {
      -webkit-transform: scale(0.5);
      opacity: 1;
  }

  100% {
      opacity: 0;
      -webkit-transform: scale(1.1);
  }
}

@-moz-keyframes pulse {
  0% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  8% {
      -webkit-transform: scale(0);
      opacity: 0;
  }

  15% {
      -webkit-transform: scale(0.1);
      opacity: 1;
  }

  30% {
      -webkit-transform: scale(0.5);
      opacity: 1;
  }

  100% {
      opacity: 0;
      -webkit-transform: scale(1.1);
  }
}
.green-link{color: var(--primary-color);}
.green-link:hover{color: var(--dark_primary-color); text-decoration:underline;}
header .col-lg-6 { width: 56%;}
/*-----------------( End Header section styles )--------------*/

/*-----------------( Start sidebar section styles )--------------*/
.btn-primary{background-color: var(--primary-color) !important; border-color: var(--primary-color) !important;}
.btn-primary:hover{background-color: var(--white) !important; border-color: var(--primary-color) !important; color: var(--primary-color);}
a{color: var(--scoundary-color);}
a:hover,a:hover .light_color{color: var(--primary-color);}
.sidebar{width: 15%; padding-top: 13px; position: fixed; top: 0; background-color: white; height: 100%;}
.list-group-flush>.list-group-item ,.list-group-horizontal>.list-group-item+.list-group-item {
  border-width: 0 0 0;
}

/*-----------------( End sidebar section styles )--------------*/
/*-----------------( Start body section styles )--------------*/
.btn_custom{background-color: #F5F5F5 !important; border-radius: 20px; color: var(--primary-color); font-size: 12px;font-family:Tajawal-Bold ;}
.btn_custom:focus{color: var(--primary-color);}
.quick_access .col-lg-3 {width: 23.8% !important;}
.custom_table .col-lg-6{ width: 49%}
.table>:not(:first-child){border-top: none;}
table thead tr {background-color: #1c6f3f2e !important;}
table tbody tr td,table tbody tr td a{color: var(--scoundary-color) !important;}
table tbody tr td a{color: var(--scoundary-color-light) !important;}
table tbody tr td a:hover{color: var(--primary-color) !important;}
.Acceptable{color: var(--light_primary-color) !important;}
.Unacceptable{color:#D1282B !important;}
.pagination .page-link {color: var(--primary-color);}
.modal-header.green{background-color: var(--primary-color); color: var(--white)}
.modal-header.green .btn-close{color: var(--white) !important;background-image:url(../images/btn-close.svg);}
table.grade{ border-color: var(--table_border);}
.z_index_1{z-index: 1;}
table.grade input{width: 59px; height: 28px;}
table td{vertical-align: middle;}
.btn-scoundry{border: 1px solid var(--scoundary-color-light);border-radius: 5px;}
.btn-scoundry:hover{border: 1px solid var(--scoundary-color-light); background-color: var(--scoundary-color-light);}
.btn-scoundry:hover i{color: var(--scoundary-color);}
table td .dropdown-menu{min-width: auto; margin-right: 5px;}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
  display: flex !important;
  justify-content: center;
}
#progressbar li {
	list-style-type: none;
	color: var(--scoundary-color-light);
	font-size: 15px;
	width: 15%;
	float: right;
	position: relative;
}
#progressbar li i{margin-top: -30px; position: relative;z-index: 2; color: var(--white); margin-bottom: 12px;}
#progressbar li.active {
	color: var(--black);
}
#progressbar li:before {
	/*content: counter(step);
	counter-increment: step;*/
  font-family: 'Material Icons Outlined';
  content: "e0d0";
  text-align: center;
	width: 40px;
	line-height: 40px;
	display: block;
	font-size: 20px;
	color: var(--white);
	background: var(--scoundary-color-light);
	border-radius: 50%;
	margin: 0 auto 5px auto;
  position: relative;
  z-index: 1;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: var(--scoundary-color-light);
	position: absolute;
	left: -50%;
	top: 19px;
	z-index:0; /*put it behind the numbers*/
}
#progressbar li:last-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: var(--primary-color);
	color: var(--white);
}
.border_dashed{border: 2px dashed #ABAAAA; border-radius: 5px;}

.reports .col-lg-3{ width: 22% !important; margin: 15px !important;}
/*-----------------( End body section styles )--------------*/

.search{
  width: 70%;
  padding: .375rem .75rem .375rem 2.575rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .50rem;}
  .search-icon{margin-right:-50px ; position: relative; z-index: 2; color: #ced4da;}
  header,.body{margin-right: 15%;}
  .mr-5{margin-right: 6%;}
  .w-5{width: 6% !important;}
  .menu-icon,.order,.icons,.small-icon,.cursor_pointer{cursor: pointer;}
  .dropdown-menu.person{margin: 10px -60px 0px 0px !important;}
  .dropdown-menu.language{margin: 10px -55px 0px 0px !important;}
  .dropdown-menu.setting{margin: 10px -80px 0px 0px !important;}
  .dropdown-menu.setting.account{margin: 8px -15px 0px 0px !important;}
  .border{border-radius: 20px; padding: 0px 15px;}
  .sections span{font-size: 12px; color: var(--prograph-color);}
  .owl-nav{font-size: 20px;}
  .owl-next{position: absolute; left: 15px; top: 5px;}
  .owl-prev{position: absolute; right: 15px; top: 5px; font-size: 12px;}
  .owl-theme .owl-nav [class*=owl-]:hover {
    background:none;
    color: var(--black);
}
.users img{margin-right: -12px !important;}
.users img:first{margin-right: 0px !important;}
.files_table tr td, .files_table tr td a{color: var(--prograph-color);}
.files_table tr:hover td a, .files_table tr td a:hover{color: var(--black);}
.online_users p{font-size: 12px;}
.owl-carousel .owl-item img{width: 40px;}
.sections .hvr-shrink { display: block;}
.bg-white{border-radius: 8px;}
.angle_sidbar{left: 10px; position: absolute; top: 16px; font-size: 12px;}
.users a:hover .rounded-circle{ border: 2px solid #a6a5a5; box-shadow: 1px 1px 10px #888888;}
.notification ,.messages{min-width: 300px; margin: 10px -160px 0px 0px !important;}
.notification .light_color ,.messages .light_color{font-size: 13px !important;}
a.dropdown-item:focus b.primary_color{color: var(--prograph-color);}
a.dropdown-item:hover p.light_color{color: var(--light_color);}
.sidebar .list-group-item.active {background-color: var(--primary-color) !important;  border-color: var(--primary-color) !important; border-radius: 5px;}
.sidebar .list-group-item.active a{color: var(--white);}
.sidebar .list-group-item.active .dropdown-menu a{color: var(--black);}
.sidebar .list-group-item {margin-top: 6px; margin-bottom: 6px;}
.icons span ,.icons i{color: var(--black);}


.border_img{border: 4px solid var(--body-color);}

.profile-photo-edit {
  position: absolute;
  right: 42%;
  left: auto;
  top: 55%;
  cursor: pointer;
}


.student_filter .search,.student_filter .form-select {width: auto !important;}
/*---------- media Query styles -----------*/
/*---------- mobile Query styles -----------*/
@media screen and (max-width: 480px) {
  .quick_access .col-12 {width: 100% !important;}
  .custom_table .col-12{ width: 100% !important;}
  header .col-lg-6 {
    width: 100%;
}
  header,.body{margin-right: 0;}
  header .list-group-item{padding-left: 14px; padding-right: 14px;}
  .sidebar{width: 68%; z-index: 3;}
  body .login{background: var(--white); height: 100%; }
  .statistics{width: 100% !important; height: 100% !important;}
  .search{width: 60%;}
  /*progressbar*/
  #progressbar { padding:0;}
  #progressbar li { width: 20%;}
  .reports .col-lg-3{ width: 96% !important;}

    .profile-photo-edit { right: 31%;}
}
/*---------- ipad Query styles -----------*/
@media (max-width: 991px) and (min-width: 480px) {
  .quick_access .col-md-6 {width: 48.8% !important;}
  .custom_table .col-12{ width: 100% !important;}
  header,.body{margin-right: 0;}
  .sidebar{width: 32%; z-index: 3;}
  .dropdown-menu.crud{margin: 10px -62px 0px 0px !important;}
  .col-12{ width: 100%}
  .reports .col-lg-3{ width: 46% !important;}

}
/*---------- Full HD Screen Query styles -----------*/
@media screen and (min-width: 1920px) {
  .reports .col-lg-3{ width: 23% !important;}

 
}

body.dark ,body.dark .bg-white ,body.dark .list-group-item ,body.dark .sidebar ,body.dark .dropdown-menu{background-color: var(--black)!important; color: var(--white) !important;}
body.dark a{ color: var(--white) !important;}
body.dark a:hover{ color: var(--light_color) !important;}
body.dark .dropdown-item:focus, body.dark .dropdown-item:hover {color: var(--white) !important; background-color: var(--scoundary-color);}
body.dark .body{background-color: var(--scoundary-color);}
body.dark .table {color:var(--white)}
body.dark .files_table tr td,body.dark .files_table tr td a{color: var(--white);}
body.dark .files_table tr:hover td,body.dark .files_table tr:hover td a{color: var(--light_color) !important;}

body.dark .tooltip .tooltip-inner {
  background: var(--white) !important;
  color: var(--black) !important;
}
body.dark .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--white) !important;
}
body.dark .tooltip.tooltip.start .tooltip-arrow::before {
  border-left-color: var(--white) !important;
}
body.dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--white) !important;
}
body.dark .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--white) !important;
}
body.dark .sidebar .list-group-item.active {background-color: var(--black) !important;  border-color: var(--black) !important; }
body.dark .sidebar .list-group-item.active a{color: var(--primary-color) !important;}
body.dark .icons span,body.dark .icons i{color: var(--white);}
body.dark .pagination a{color: var(--black) !important;}
body.dark a.prograph_color ,body.dark .prograph_color{color: var(--light_color) !important;}
body.dark a.prograph_color:hover{color: var(--primary-color) !important;}
body.dark .profile-photo-edit .body{background-color: var(--body-color) !important;}


.required:after {
  content: " *";
  color: red;
}