@font-face {
  font-family: "nova-regular";
  src: url(../fonts/proxima-nova/proxima-nova-regular.otf);
}
@font-face {
  font-family: "nova-bold";
  src: url(../fonts/proxima-nova/proxima-nova-bold.otf);
}
@font-face {
  font-family: "amplesoft-bold";
  src: url(../fonts/AmpleSoft-Pro/AMPLESOFTPRO-BOLD.TTF);
}
@font-face {
  font-family: "arabfonts-bold";
  src: url(../fonts/arabfonts/ArbFONTS-riyad-bank-Bold.ttf);
}
@font-face {
  font-family: "arabfonts-regular";
  src: url(../fonts/arabfonts/ArbFONTS-riyad-bank-Regular.ttf);
}
body{
  position: relative;
  font-family: "arabfonts-regular";
  direction: ltr !important;
  overflow-x: hidden;
}
.main-panel{
  /* padding-top: 51px; */
  overflow-x: hidden;
  overflow-y: auto;
}
img{
    user-select: none;
}
p{margin-bottom: 0;}
a{
  text-decoration: none;
}

/* *{
  transition: all .2s ease-in-out ;
  font-family: "nova-regular"
} */
p,a,div,button,.form-control,.ng-select .ng-select-container,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
.nova-regular{
  font-family: "arabfonts-regular";
}
.bold{
  font-family: "arabfonts-regular";
}
.nova-bold{
  font-family: "nova-bold";
}

button:focus,button:active,img {
outline: unset;
}
.relative{
  position: relative; 
}

.extra-bold{font-family: "ExtraBold" !important;}
.semi-bold{font-family: "SemiBold" !important;}

.normal{
  font-weight: normal;
}
.thin{
  font-weight:200 !important;
}
.c-112{
  color: #112A4E !important;
}
.c-blue-i{
  color: #03a8ff !important;
}
.c-blue{
  color: #03a8ff;
}
.c-0f{
  color: #0f4345 !important;
}
.c-green{
  color: #32cc3e ;
}
.c-green-i{
  color: #32cc3e !important ;
}
.c-gray{
  color: #afb6cc;
}
.c-gray70{
  color: #707070;
}
.c-yellow{
  color: #ffc400;
}

.c-red{
  color: #a92a2b !important;
}
.c-white{
  color: #fff !important;
}
.c-11{
  color: #11484a;
}
.c-33{
  color: #33a9ae;
}


.bg-f3{
  background-color: #F3F6F8 !important;
}
.bg-0b{
  background-color: #0b1e38 !important;
}
.bg-112{
  background-color: #112A4E !important;
}
.bg-blue{
  background-color: #03a8ff !important;
}
.bg-blue-d7{
  background-color: #d7e5f5 !important;
}
.bg-darkblue{
  background-color: #0f4345 !important;
}
.bg-green{
  background-color: #32cc3e !important;
}
.bg-gray{
  background-color: #afb6cc !important;
}
.bg-yellow{
  background-color: #ffc400 !important;
}
.bg-red{
  background-color: #a92a2b !important;
}

.bg-light{
  background-color: #f7f7f7;
}
.bg-11-light{
  background-color: #11484a16 !important;
}
.bg-11{
  background-color: #11484a !important;
}
.bg-23{
  background-color: #237b7f !important;
}
.bg-white-f3 {
  background-color: #F3F3F3!important;
}



.bc-f3{
  border-color: #F3F6F8;
}
.bc-0b{
  border-color: #0b1e38 !important;
}
.bc-112{
  border-color: #112A4E;
}
.bc-blue{
  border-color: #03a8ff !important;
}
.bc-blue-d7{
  border-color: #d7e5f5 !important;
}
.bc-0f{
  border-color: #0f4345 !important;
}
.bc-green{
  border-color: #32cc3e !important;
}
.bc-gray{
  border-color: #afb6cc !important;
}
.bc-yellow{
  border-color: #ffc400 !important;
}
.bc-red{
  border-color: #a92a2b !important;
}
.bc-orange{
  border-color: #FB7D45 !important;
}
.bc-light{
  border-color: #f7f7f7;
}
.bc-11{
  border-color: #11484a !important;
}
.bc-11-light{
  border-color: #11484a16 !important;
}



.card.b-1,
.b-1{
    border: 1px solid;
}
.b-2{
    border: 2px solid;
}
.b-dashed-2{
    border: 2px dashed;
}
.b-3{
    border: 3px solid;
}
.b-none{
    border-bottom: none;
}
.bl-1{
    border-left: 1px solid;
}
.bl-2{
    border-left: 2px solid;
}
.bl-3{
    border-left: 3px solid;
}
.card.br-1,
.br-1{
    border-right: 1px solid;
}
.br-2{
    border-right:2px solid;
}
.bt-1{
    border-top: 1px solid;
}
.bt-2{
    border-top:2px solid;
}
.bb-1{
    border-bottom: 1px solid;
}
.bb-2{
    border-bottom:2px solid;

}
.bb-3{
    border-bottom:3px solid;

}


.btn.font-10,
.font-10{
    font-size: 10px;
}
.btn.font-11,
.font-11{
    font-size: 11px;
}
.btn.font-12,
.font-12{
    font-size: 12px;
}
.font-13{
    font-size: 13px;
}

.font-14{
    font-size: 14px;
}
.font-15{
    font-size: 15px;
}
.font-16{
    font-size: 16px !important;
}
.font-17{
    font-size: 17px;
}
.font-18{
    font-size: 18px;
}
.font-19{
    font-size: 19px;
}
.font-20{
    font-size: 20px;
}
.font-22{
    font-size: 22px;
}
.font-30{font-size: 30px;}
.font-40{font-size: 40px;}
.font-44{font-size: 44px;}


.my-n2{
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
}
.mx-n3{
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}
.mx-n4{
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
}
.me-n2 {margin-right: -0.5rem!important;}

.width-100{
  width: 100%;
}
.width-0{
  width: 0px !important;
}

.h-100{
  height: 100%;
}

.absolute{position: absolute;}
.relative{position: relative;}

.rect-150{width: 150px;height: 150px;}
.rect-124{width: 124px;height: 124px;}
.rect-100{width: 100px;height: 100px;}
.rect-92{width: 92px;height: 92px;}
.rect-72{width: 72px;height: 72px;}
.rect-64{width: 64px;height: 64px;}
.rect-44{width: 44px;height: 44px;}
.rect-40{width: 40px;height: 40px;}
.rect-36{width: 36px;height: 36px;}
.rect-32{width: 32px;height: 32px;}
.rect-28{width: 28px;height: 28px;}
.rect-24{width: 24px;height: 24px;}
.rect-22{width: 22px;height: 22px;}
.rect-20{width: 20px;height: 20px;}
.rect-16{width: 16px;height: 16px;}
.rect-12{width: 12px;height: 12px;}
.rect-8{width: 8px;height: 8px;}


.pointer{
  cursor: pointer;
  user-select: none;
}
.no-width{
  width: unset !important;
}
.no-opc{opacity: unset;}
.no-select{
  user-select: none;
}
.upper{
  text-transform: uppercase;
}
.circle{
  border-radius: 50%;
}
.radius-16{
  border-radius: 16px !important;
}
.radius-12{
  border-radius: 12px !important;
}
.radius-8{
  border-radius: 8px !important;
}
.radius-5{
  border-radius: 5px !important;
}
.radius-4{
  border-radius: 4px !important;
}
.radius-50{
  border-radius: 50% !important;

}
.opc-6{
  opacity: 0.6;
}

.flex-row{
  flex-direction: row;
}
.flex-colomn{flex-direction: column;}
.remain-h{flex: 1 1 auto;}
.flex-wrap{flex-wrap: wrap;}
.no-wrap{white-space: nowrap;}
.under-line{text-decoration: underline;}
.scroll-x{overflow-x: auto;}
.scroll-y{overflow-y: auto;}
.flow-hidden{overflow: hidden;}

.form-check-input:focus,
.btn-check:focus+.btn, .btn:focus,
.form-control:focus {
  box-shadow: unset
}
.btn{
  padding: 6.5px .75rem;
}
.btn.btn-confirm:hover,
.btn.add-btn:hover,
.btn.search-btn:hover {
  color: #ffffff;
}
.shadow{
  box-shadow: 0px 1px 2px #031e1e26;
}
.shadow-none{
  box-shadow: none !important;
}



:focus {
  outline: unset;
}
.page-title {
  font-size: 18px;
}
.sub-title {
  font-size: 16px;
}
.modal-title {
  font-size: 17px;
}
.back-icon {
  font-size: 16px;
}



.login-page {
  height: 100vh;
  display: flex;
  /* background-image: url("http://www.alnaseejerp.com/img/background.png"); */
  background-image: url("../img/Ezar-back.png");
  background-position: center;
  overflow: hidden;
  display: flex;
}
.login-page .login{
  height: 100vh;
}
.login-page .card {
  width: 360px;
  border-radius: 8px;
  /* padding: 2rem; */
  background-color: #ffffff;
  box-shadow: 0px 24px 64px #031e1e33;
  padding-bottom: 20px;
}
.login-page .card .card-logo{
  background-image: url("../img/Ezar-login-back.png");
  background-position: center;
  border-radius: 5px;
    display: flex;
    justify-content: center;
    /* height: 100px; */
    padding: 20px;
}
.login-page .card .card-head{
  text-align: center;
  font-size: 12px;
  padding:15px
}
.login-page .form-control {
  font-size: 14px;
  border-radius: 20px;
  width: 90%;
  border: none;
  background-color: #f9f9f9;

}
.login-page .form-control::placeholder {
  color: #474a4c;
  font-size: 12px;
}
.login-page .btn {
  padding: 0.35rem 0.5rem 0.65rem;
  background-color: #11484a;
}

.main-page ::-webkit-scrollbar,
.modal-dialog ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.input-icons i {
  position: absolute;
}

.input-icons {
  width: 100%;
  margin-bottom: 10px;
  margin: 10px 25px;
}

.icon {
  padding: 10px;
  min-width: 40px;
  color:#9A9A9A
}
.input-field {
  width: 100%;
  padding: 10px;
  text-align: center;
}
.login-remember{
  display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-remember .form-check-input[type=checkbox] {
  border-radius: 2.25em;
  margin: 10px;
}
.login-remember .form-switch .form-check-input:checked, .form-check-input:checked {
  background-color: #052727;
  border-color: #052727;
}
.login-remember a{
  color:#052727;
  font-size: 15px;
}
.login-page button{
  background-image: url("../img/btn-back.png");
  background-position: center;
  width: 100%;
  border-radius: 20px;
}
.main-page ::-webkit-scrollbar-track,
.modal-dialog ::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
}
.main-page ::-webkit-scrollbar-track:hover,
.modal-dialog ::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
.table{
  background-color: #fff;
}
.table-scroll::-webkit-scrollbar-track {
  background: #dadbe2;
  border-radius: 10px;
}
.table-scroll::-webkit-scrollbar-track:hover {
  background: #dadbe2;
}
.last-acation-td .card-icon{
  width: 24px;
  height: auto;
}
.main-page ::-webkit-scrollbar-thumb,
.modal-dialog ::-webkit-scrollbar-thumb {
  background: #d3d3d3;
  border-radius: 10px;
}

.main-page ::-webkit-scrollbar-thumb:hover,
.modal-dialog ::-webkit-scrollbar-thumb:hover {
  background: #3d6499;
}
.main-header {
  box-shadow: 0px 3px 4px #00314a1a;
  background-color: #fff;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}


.page-header {
  box-shadow: 0px 1px 2px #031e1e33;
}
.modal-lg {
  width: 95%;
}
.badge-filter {
  border-bottom: 1px solid #cacaca;
}
.badge {
  border-radius: 0.5rem;
  font-size: 14px;
  border: 1px solid;
  padding: 8px 10px;
  display: flex;
}
.badge-sm {
  border-radius: 0.25rem;
  padding: 1px 4px;
  display: flex;
}
.dropdown-menu {
  min-width: 12rem;
  padding: 0 0.25rem;
  margin: 0.25rem 0 0 !important;
  font-size: 1rem;
  color: #031e1e;
  border: unset;
  border-radius: 0.5rem;
}
.dropdown-menu li:focus {
  outline: unset;
}
.dropdown-item:active {
  color: inherit;
  background-color: unset;
}
.dropdown-item {
  color: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0;
  display: flex;
  align-items: center;
}
.dropdown-item i{
  margin-inline-start: auto;
  font-size: 16px;
}
.dropdown-divider {
  margin: 0;
  border-top: 1px solid #F1EDF2;
  background-color: #f1edf2;
  opacity: 1;
}
.form-check-group{
  height: 53px;
}
/* .form-switch .form-check-input:checked,
.form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
} */
.form-radio .form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}
.form-switch .form-check-input:focus,
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
  background-color: #dfdce0;
  border-color: #dfdce0;
}
.form-check-input {
  cursor: pointer;
}
.form-group-search.w-100,
.form-group-label.w-100 {
  max-width: unset !important;
}
.table .form-group-label .form-control {
  height: 100%;
  min-width: unset !important;
  padding-left: 12px;
}
.table .form-group-label {
  max-width: unset !important;
  min-width: 210px;
  margin-top: -4px;
  margin-bottom: -4px;
}
.table .form-group-label.lg {
  min-width: 320px;
}
.table .form-group-label.sm {
  min-width: 82px;
}
.table .icon-action {
  border-left: unset;
}
.table .prev-icon-action {
  border-right: unset;
}


.ngx-pagination {
  text-align: right;
  font-family: arabfonts-regular;
  padding: 0;
  margin-bottom: 0 !important;
}
.ngx-pagination .pagination-previous a::before,
.ngx-pagination .pagination-previous.disabled::before {
  display: none !important;
}
.ngx-pagination .pagination-next a::after,
.ngx-pagination .pagination-next.disabled::after {
  display: none !important;
}
.ngx-pagination li {
  margin: 0;
  border: 1px solid #8b92a0;
  font-size: 12px !important;
  font-weight: 600;
  padding: 0.1875rem 0.25rem !important;
  border-radius: 4px !important;
  text-align: center;
  min-width: 28px !important;
}
.ngx-pagination li span{
  display: inline-block;
  padding-bottom: 3px;
}
.ngx-pagination a,
.ngx-pagination button {
  padding: 0 !important;
}
.ngx-pagination li a:hover,
.ngx-pagination li span:hover {
  background-color: unset !important;
  color: unset !important;
}
.ngx-pagination li:hover {
  background-color: #0f4345!important;
  color: #fff !important;
}
.ngx-pagination .pagination-next,
.ngx-pagination .pagination-previous {
  width: 80px !important;
}
.ngx-pagination .pagination-next {
  border-top-right-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
  margin-left: 7px;
}
.ngx-pagination .pagination-previous {
  border-top-left-radius: 7px !important;
  border-bottom-left-radius: 7px !important;
  margin-right: 7px;
}
.ngx-pagination .pagination-previous a,
.ngx-pagination .pagination-next a{
  padding-bottom: 3px !important;
}
.ngx-pagination .current {
  background-color: #0f4345!important;
}

.paggination nav {
  float: right;
  margin-top: 10px;
}
.paggination .page-item {
  margin: 0 4px;
  text-align: center;
}
.paggination .page-item a {
  background-color: unset;
}
.ngx-pagination .disabled{
  color: #112A4E !important;
}
.ngx-pagination .disabled:hover{
  color: #112A4E !important;
  background-color: unset !important;
}
.paggination .page-item a:hover {
  background-color: #54007a;
  color: #fff !important;
}
.paggination .pages {
  margin-top: 5px !important;
}
.pre-next {
  background-color: #004366;
}
.ngx-pagination li,
.paggination .page-item a {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.total-items {
  display: inline-block;
  font-family: Nunito;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 12px;
  font-weight: bold;
}
.select-rows .form-control {
  min-width: 120px !important;
}


.icon-action svg path,
.icon-action svg .a {
  fill: #716d77;
}
.icon-action span {
  color: #716d77;
}
.icon-action .delete-icon:hover svg .a {
  fill: #da1e27;
}
.icon-action .play-icon:hover svg path,
.icon-action .preview-icon:hover svg .a,
.icon-action .print-icon:hover svg .a {
  fill: #0057ff;
}
.icon-action .play-icon:hover span,
.icon-action .preview-icon:hover span,
.icon-action .print-icon:hover span {
  color: #0057ff;
}



/* date time picker */
bs-datepicker-container{
  /* transform: translate3d(662px, 248px, 0px) !important; */
  z-index: 9999;
}
.bs-media-containe{
  display: flex;
  height: 50px;
  align-items: center;
}
.bs-datepicker-head{
  background-color: #5cb85c;
  min-width: 270px;
  height: 50px;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  text-align: justify;
}
.bs-datepicker-head button{
  display: inline-block;
  vertical-align: top;
  padding: 0;
  height: 30px;
  line-height: 30px;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: .3s;
  font-family: "amplesoft-bold";
}
.bs-datepicker-head button.next, .bs-datepicker-head button.previous{
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.bs-datepicker-head button.next span, .bs-datepicker-head button.previous span{
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  font-family: "amplesoft-bold";
}
.bs-datepicker-head button.current{
  border-radius: 15px;
  max-width: 155px;
  padding: 0 13px;
  font-size: 13px;
}
.bs-datepicker-head::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.bs-datepicker-btns button:active, 
.bs-datepicker-btns button:focus, 
.bs-datepicker-btns button:hover,
.bs-datepicker-predefined-btns button:active, 
.bs-datepicker-predefined-btns button:focus, 
.bs-datepicker button:active, .bs-datepicker button:focus, 
.bs-datepicker button:hover, .bs-datepicker input:active, 
.bs-datepicker input:focus, .bs-datepicker input:hover {
  outline: none;
}
.bs-datepicker-head button:active {
  background-color: rgba(0,0,0,.2);
}
.bs-datepicker-head button:hover {
  background-color: rgba(0,0,0,.1);
}
.bs-datepicker-body {
  padding: 10px;
  border-radius: 0 0 3px 3px;
  min-height: 232px;
  min-width: 278px;
  border: 1px solid #e9edf0;
  background-color: #fff;
}
.bs-datepicker-body .days.weeks {
  position: relative;
  z-index: 1;
}
.bs-datepicker-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.bs-datepicker-body table th {
  font-size: 13px;
  color: #9aaec1;
  font-weight: 400;
  text-align: center;
  font-family: "amplesoft-bold";
}
.bs-datepicker-body table td {
  color: #54708b;
  text-align: center;
  position: relative;
  padding: 0;
  font-family: "amplesoft-bold";
}
.bs-datepicker-body table td:before, .bs-datepicker-body table td span:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: 6px;
  left: -2px;
  right: -2px;
  box-sizing: content-box;
  background: transparent;
}
.theme-green .bs-datepicker-body table td.week span {
  color: #5cb85c;
}
.bs-datepicker-body table td.is-other-month span, .bs-datepicker-body table td span.is-other-month {
  color: rgba(0,0,0,.25);
}
.bs-datepicker-body table td:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
  cursor: pointer;
}
.bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span, .bs-datepicker-body table td span.is-highlighted:not(.disabled):not(.selected) {
  background-color: #e9edf0;
  transition: 0s;
}
.bs-datepicker-body table.days span {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.bs-datepicker-body table td span {
  display: block;
  margin: 0 auto;
  font-size: 13px;
  border-radius: 50%;
  position: relative;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.theme-green .bs-datepicker-body table td.selected span, .theme-green .bs-datepicker-body table td[class*=select-] span::after, .theme-green .bs-datepicker-body table td span.selected, .theme-green .bs-datepicker-body table td span[class*=select-]::after, .theme-green .bs-datepicker-head, .theme-green .bs-datepicker-predefined-btns button.selected {
  background-color: #5cb85c;
}
.bs-datepicker-body table td.selected span, .bs-datepicker-body table td span.selected {
  color: #fff;
}
.action-menu{
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  overflow-x: auto;
  padding: 5px 0;
  width: 100%;
}
.action-menu .btn{
  width: unset !important;
  padding-inline-start: 0;
  padding-inline-end: 0;
  margin-inline-start: 1rem;
  margin-inline-end: 1rem;
}
.action-menu p{
  color: #031e1e;
  font-size: 10px;
  white-space: nowrap;
}
.action-menu img,.action-menu .icon-i{
  background-color: #36aeb447;
  padding: 7px
}
/* date time picker */