@charset "utf-8";
:root {
  --primary-color: #1C6F3F;
  --body-color: #F5F6FA;
  --light-color: #F5F5F5;
  --light_gray_color: #959292;
  --prograph-color:#595959;
  --white: #ffffff;
  --black: #000000;

  --bs-border-radius:4px;

}

/* Fonts url */
@font-face {
  font-family: 'Almarai_Bold';
  src: url('fonts/Almarai-Bold.woff2') format('woff2'),
      url('fonts/Almarai-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarai_Regular';
  src: url('fonts/Almarai-Regular.woff2') format('woff2'),
      url('fonts/Almarai-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* color sets*/
.body{background-color: var(--body-color);}
.light_gray_color{color: var(--light_gray_color);}
.light_color{color: var(--light_color);}
.primary_color{color: var(--primary-color);}
.prograph_color{color: var(--prograph-color);}

.font_bold{font-family: "Almarai_Bold" !important;}
.font_regular{font-family: "Almarai_Regular" !important;}
.bg-primary{background-color: var(--primary-color) !important;}

* {
  font-family: "Almarai_Regular";
}

h1,
h2,
h3{
  font-family: "Almarai_Bold" !important;
}

body, html  {
  height: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none !important;
}

.center {
  display: block !important;
  margin: auto !important;
}
.end {
  float: left !important;
}
html:dir(ltr) .end {
  float: right !important;
}
.start {
  float: right !important;
}
html:dir(ltr) .start {
  float: left !important;
}
.justify {
  text-align: justify !important;
}

/* tooltip css */
.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 , .form-check-input:focus,.form-control:focus,.form-select:focus{
  outline: 0 ! important;
  box-shadow: none !important;
  border-color: none !important;
}

html:dir(rtl)  .dropdown-menu-start {
  right: 0;
  left: auto;
}
html:dir(rtl) .dropdown-menu-end {
  right: auto;
  left: 0;
}
html:dir(ltr)  .dropdown-menu-start {
  right: auto;
  left: 0;
}
html:dir(ltr) .dropdown-menu-end {
  right: 0;
  left: auto;
}

.border_none{border:none !important;}
.main_link{color:var(--black) !important;}
.light_link{color:var(--light_gray_color) !important;}
.gray_link{color:var(--prograph-color) !important;}
.main_link:hover ,.light_link:hover, .gray_link:hover{color:var(--primary-color) !important;}
.primary_link{color:var(--primary-color) !important;}
.primary_link:hover{color:var(--prograph-color) !important;}



/*----------start page styles -----------*/
/* start login style*/
body{background-color: var(--body-color);}
.login{ width: 30%; background-color:  var(--white); border-radius: 8px;}
.input-group-text{padding-left: 0; background-color: var(--white); color: #BDBCBC;}
html:dir(ltr) .input-group-text{padding-right: 0; padding-left: .75rem !important; }
.login .form-control{border-right: none; border-color: #DDDDDD;}
html:dir(ltr) .login .form-control{border-left: none; border-right:1px solid #DDDDDD!important;}
.form-control::placeholder {color: #747474;}
.form-check-input{background-color: #D9D9D9;}
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-primary , .btn-primary:active , .btn:active ,.btn-outline-primary:hover{background-color:var(--primary-color)!important; border-color: var(--primary-color) !important; color:var(--white) !important;}
.btn-primary:hover{background-color:var(--primary-color);opacity: 0.9;}
.padding_top{
  padding-top: 7%;
}
.btn-outline-primary{border-color:var(--primary-color) !important; color:var(--primary-color) !important;}
/* end login style*/

/* dashboard style*/
.menu_icon{background-color: var(--light-color); padding: 3px 7px; border-radius: 5px; color: var(--prograph-color);}
.menu_icon:hover{background-color: var(--primary-color); color: var(--white);}
.dashboard_form_search .input-group-text{border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-color: var(--light-color);}
html:dir(ltr) .dashboard_form_search .input-group-text{border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.dashboard_form_search .dropdown-toggle-split{border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-color: #DDDDDD; border-right: none;background-color: var(--light-color);}
html:dir(ltr) .dashboard_form_search .dropdown-toggle-split{ border-right: 1px solid  #DDDDDD; border-left: none;}
html:dir(ltr) .dashboard_form_search .dropdown-toggle-split{border-top-left-radius: 0px; border-bottom-left-radius: 0px;  border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.dashboard_form_search .dropdown-toggle-split:hover, .dashboard_form_search .dropdown-toggle-split:focus{background-color: var(--light_gray_color);}
.dashboard_form_search .form-control{ border-color: #DDDDDD; border-right: none; border-left: none; background-color: var(--light-color);}
.dashboard_form_search:hover .input-group-text, .dashboard_form_search:hover .dropdown-toggle-split , .dashboard_form_search:hover input{background-color: #ffffff; color: var(--prograph-color);}
.hover_icon_image{padding: 7px; border-radius: 5px; color: #A7AFBA !important;}
.hover_icon_image:hover,.hover_icon_image:focus-visible{background-color: var(--light-color); padding: 15px 7px 7px 7px;; border-radius: 5px;}


.side_menu .list-group-flush .list-group-item a{ color: var(--black);}
.side_menu .list-group-flush .list-group-item a:hover,.side_menu .list-group-flush .list-group-item:hover a{ color: var(--primary-color);}
.side_menu .list-group-flush .list-group-item.active a{ color: var(--white);}
.side_menu .list-group-flush .list-group-item{ border: none;}
header{box-shadow: 0px 4px 50px 0px rgba(13, 58, 106, 0.06);}

.side_menu .list-group-flush .list-group-item a.have_sub::after{  content: '\f053'; font-family: FontAwesome;font-size: 0.5rem; position: absolute; left: 15px; top: 12px;}
.side_menu .list-group-flush .list-group-item.active a.have_sub::after{  content: '\f078'; font-family: FontAwesome;font-size: 0.5rem; position: absolute; left: 15px; top: 12px;}
html:dir(ltr) .side_menu .list-group-flush .list-group-item a.have_sub::after{  content: '\f078'; font-family: FontAwesome;font-size: small; position: absolute; left: 88%; top: 12px;}
.side_menu .sub_menu a::after{  content: '';}
.side_menu .sub_menu a::before{  content: '\f068'; font-family: FontAwesome;font-size: small; position: absolute; right:-20px; top: 12px;}
html:dir(ltr) .side_menu .sub_menu a::before{  content: '\f068'; font-family: FontAwesome;font-size: 0.5rem; position: absolute; right:105%; top: 12px;}
.side_menu .sub_menu{ padding-right: 50px;}
html:dir(ltr) .side_menu .sub_menu{ padding-right: 0px; padding-left: 50px;}
.side_menu .list-group-item.active{ background-color: var(--primary-color); border-radius: 4px;}
.sub_menu .list-group-item.active{ background-color:var(--white) !important; color: var(--black) !important;}
.sub_menu .list-group-item.active a{ color: var(--primary-color) !important;}
.sub_menu .list-group-item{padding-right:0px ; padding-left: 0px;}
.sub_menu a{color: var( --light_gray_color) !important;}
.sub_menu a.active{color: var( --black) !important;}
.sub_menu a:hover{color: var( --primary-color) !important;}



.content{position: relative;}

.icon_static{width: 60px; height: 60px;border-radius: 50px;}
.statistics h6{font-size: 14px;}
.statistics h3{font-size: 25px;}
.statistics p{font-size: 12px; color: var(--light_gray_color); margin-bottom: 0px;}
.table p ,.table label{font-family:"Almarai_Bold" ; font-size: 12px; color: #595959; margin-bottom: 0px;}
.table i{font-size: 12px;}
.table .btn{padding: 1.5px 6.5px;}
.table thead td{font-family:"Almarai_Bold" ; font-size: 12px; color: #595959;}
.table thead.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f1f1f1;
  --bs-table-border-color: #f1f1f1;
  --bs-table-striped-bg: #f1f1f1;
  --bs-table-active-bg: #f1f1f1;
  --bs-table-hover-bg: #f1f1f1;
}
.custom_table tr:hover{cursor: pointer; cursor: hand;}
.custom_table tr:hover p{color: var(--primary-color);}
.success{color: #0ab39c  !important; border-radius: 4px; padding: 5px 8px; text-align: center !important; background-color:#daf4f0;}
.waitting{color: #f8c266 !important; border-radius: 4px; padding: 5px 8px; text-align: center !important; background-color:#fef4e4;}
.faild{color: #f06548 !important; border-radius: 4px; padding: 5px 8px; text-align: center !important; background-color:#fde8e4 ;}
.research{border: 1px solid var(--light-color); border-radius: 6px;}
.research p{font-size: 0.8rem;}
.research .status p{font-size: 10px !important; text-align: center;}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--primary-color);
  font-family: FontAwesome;
  font-size: 0.5rem;
  padding-top: 4px;
  content: "\f104";
}

.remove{background-color: #DC072E ;}
.edit{background-color: #96C9AC ; border-color:#96C9AC;}


.pagination {
  --bs-pagination-color: var(--light_gray_color);
  --bs-pagination-hover-color: var(--primary-color);
  --bs-pagination-hover-bg: var(--body-color);
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color:var(--primary-color);
}
.image_border{border: 1px dashed var(--light_gray_color); padding: 15px 10px;}
.image_border p ,.image_border span{font-size: 14px;}
.border_buttom{border-bottom: 1px solid var(--light-color);}
.section_title{margin-bottom: -10px !important; background-color: var(--white) !important; width: 200px;position: relative; z-index: 1;}
.filter_input_icon{margin-right:-30px !important; margin-left:35px; position: absolute; left: -25px; top: 7px;}
html:dir(ltr) .filter_input_icon{margin-left:-30px !important; margin-right:35px; position: absolute; left: auto; right:-25px; top: 7px;}
table.user_info th,table.user_info td{ color: var(--prograph-color); font-size: 15px;}
.border-buttom{border-bottom: 1px solid var(--light-color);}
.modal.custom_modal_width {--bs-modal-width: 800px;}
.btn-white:hover { background-color: var(--primary-color); color: var(--white);}

.shadow{box-shadow: 0 1px 2px rgba(56,65,74,.15) !important;}
body ,.form-control,.fs_custom,.btn{font-size: 0.8rem !important;}
body .side_menu{font-size: 0.9rem !important;}
body .side_menu .sub_menu{ font-size: 0.85rem !important;}
html:dir(rtl) .login .input-group-text{border-left: none !important;}
html:dir(ltr) .login .input-group-text{border-right: none !important;}
input:focus ,textarea:focus,.form-select:focus{border-color: var(--primary-color) !important;}
.breadcrumb{font-size: 0.75rem;}
.rounded-3,.rounded-5{border-radius: 4px !important;}
.custom_dropdown_width{--bs-dropdown-min-width: 17rem; font-size: 0.8rem;}

.filter_icon:hover ,.filter_icon:active,.filter_icon:visited{background-color:var(--primary-color);}
.filter_icon:hover .ri-filter-line ,.filter_icon:active .ri-filter-line,.filter_icon:visited .ri-filter-line{color:var(--white);}


.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed) {background-color: var(--white);}
.accordion-button:focus{ 
  outline: 0 ! important;
  box-shadow: none !important;
  border-color: none !important;}
  .accordion-body{color:var(--light_gray_color);}
.accordion-button{font-size:12px; font-family: 'Almarai_Regular';}

.notivication .card-header{background-color:var(--primary-color); color:var(--white);}
.notivication .card{border:none;}
.btn-primary.all-notivication{background-color:#D5E8DD !important; border-color:#D5E8DD !important; color:var(--primary-color);}
.btn-primary.all-notivication:hover{background-color:var(--primary-color) !important; border-color:var(--primary-color) !important; color:var(--white);}
.custom_notivication_dropdown_width{--bs-dropdown-min-width: 22rem;}
.notivication_title{font-size:0.9rem;}
.notivication_time{color: #C2C0C0; font-size:0.8rem;}
.Attachment{background-color: var(--light-color);padding: 6px 10px; border-radius: 4px;}
table .form-check-input {background-color: var(--white);}
.position{position: absolute; top: -12px; right: 50%;}
.form-select{font-size: 0.8rem;}
/*---------- media Query styles -----------*/

/*---------- mobile and small device Query styles -----------*/
@media screen and (max-width: 480px) {
 .login{ width: 90%;}
 .dashboard_form_search{width: 75% !important;}
 .col-12 {
  margin-bottom: 13px;
}

.modal-body .col-md-9.image_border{width: 94%;margin-right: 3%; margin-left: 3%;}
}

.research_type_dropdown{position: absolute; left: -35px}
/*---------- ipad Query styles -----------*/
@media (max-width: 991px) and (min-width: 480px) {
  .login{ width: 70%;}
  .dashboard_form_search{width: 75% !important;}
  .col-md-6 {
    width: 48.2%;
    margin-left: 6.5px;
    margin-right: 6.5px;
    margin-bottom: 13px;
  }
  .w-md-50{width: 50% !important;}
  .modal-body .col-md-9.image_border{width: 73%;
    margin-right: 2%;}
}
/*---------- laptop Query styles -----------*/
@media (max-width: 1920px) and (min-width: 991px) {
  .col-lg-3 {
    width: 23.9%;
    margin-left: 6.5px;
    margin-right: 6.5px;
  }
  .w-md-50{width: 50% !important;}
  
  .modal-body .col-md-9.image_border{width: 73%;
    margin-right: 2%;}
    .side_menu{height: 100vh;}
}
/*---------- Full HD Screen Query styles -----------*/
@media screen and (min-width: 1920px) {
  .login{ width: 20% !important;}
  .col-lg-3 {
    width: 23.9%;
    margin-left: 6.5px;
    margin-right: 6.5px;
  }
  .w-md-50{width: 50% !important;}
  .modal-body .col-md-9.image_border{width: 73%;
    margin-right: 2%;}
    .side_menu{height: 100vh;}
 
}