@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Light"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/light/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/light/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/light/latest.ttf) format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Semilight"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semilight/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semilight/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Bold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/bold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/bold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/bold/latest.ttf) format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI Semibold"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semibold/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semibold/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/arabic/semibold/latest.ttf) format("truetype");
    font-weight: 700;
}
*{
   font-family: 'SegoeUI', sans-serif;
}
.row{
   max-width: 100%;
}
body{
   background-color: #f7f7f7;
   font-size: 0.75rem;
}
.opct {
  height: 100px;
  width: 100px;
  background-color: #95AAD3;
  margin-right: 5px;
  padding: 5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opct p {
  margin-bottom: 0;
}
.opacity-0 {
  opacity: 0; }

.opacity-10 {
  opacity: 0.1; }

.opacity-20 {
  opacity: 0.2; }

.opacity-30 {
  opacity: 0.3; }

.opacity-40 {
  opacity: 0.4; }

.opacity-50 {
  opacity: 0.5; }

.opacity-60 {
  opacity: 0.6; }

.opacity-70 {
  opacity: 0.7; }

.opacity-80 {
  opacity: 0.8; }

.opacity-90 {
  opacity: 0.9; }

.opacity-100 {
  opacity: 1;}
.navbar-brand img{
   height: 45px;
   max-width: 100%;
   margin-top: 3px;
}
.navbar{
   background-color: #ffff;
   box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.75);
   flex-wrap: wrap;
   padding: initial;
   position: fixed;
   z-index: 200;
   width: 100%;
}
.content{
   padding: 5px;
   padding-top: 150px;
   margin-bottom: 50px;
}
.c{
   margin: 0px auto;
}
.navbar .nav-link:hover{
   color: #fff;
   background-color: #6c6c6c;
}
.navbar .nav-link{
   border-color: #f2d1a8;
   border-radius: 0px;
   border: none;
   /*border-bottom: 1px solid #9999;*/
}
.card{
   border: none;
   box-shadow: 0px 0px 17px -10px #557669;
   border-radius: 50px;
}
.g{
   padding: 10px;
}
.avatar{
   width: 250px;
   height: 300px;
   max-width: 100%;
   border-radius: 50%;
   box-shadow: 0px 0px 30px -23px rgba(0,0,0,0.75);
   object-fit: cover;
}

.contract-image{
   width: 400px;
   height: 570px;
   max-width: 100%;
   object-fit: cover;
}
.avatarp{
   width: 350px;
   height: 400px;
   max-width: 100%;
   border-radius: 90%;
   box-shadow: 0px 0px 30px -23px rgba(0,0,0,0.75);
   object-fit: cover;
}
.avatar-main, .contract-image-main{
   position: relative;
   text-align: center;
}
.avatar-icon{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 30px;
}
.table.dataTable{
   font-size: 0.80rem;
}
.btn{
   font-size: 0.65rem;
   padding: .275rem .55rem;
}
.table .btn{
   font-size: 0.60rem;
}
/*
.btn-success{
   background: #669b7c;
   color: white;
   border: none;
}
.btn-primary{
   background: #006bb1;
   color: white;
   border: none;
}*/
.input-group-text{
   background-color: #008bff;
   color: white;
}
.dropdown-menu{
   border: none;
   box-shadow: 0px 0px 17px -10px rgba(0,0,0,0.75);
}
.dropdown-menu .dropdown-item{
   background-color: #008bff;
   color: #fff;
   padding: 10px;
   margin-top: 5px;
}
.btn-outline-success.focus, .btn-outline-success:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(0, 139, 255, 0.5);
}
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle {
  background-color: #0053ac;
  border-color: #0053ac;
}
.dropdown-menu .dropdown-item:hover{
   background-color: #0053ac;
}
.media:hover{
   background-color: #eee;
   cursor: pointer;
}
.media img{
   object-fit: cover;
}
id, type, edit, cat, ajax, logtype, logid, area, .hidden{
   display: none;
}
.add-btn{
   position: fixed;
   left: 20px;
   bottom: 20px;
   z-index: 500;
}
.add-btn button{
   border-radius: 50px;
   background-color: #fff;
   color: #1b6ca8;
   border: none;
   width: 80px;
   height: 80px;
   font-size: 50px;
}
table.dataTable tbody th, table.dataTable tbody td{
   padding: 9px 5px !important;
}
.fa-star.checked {
  color: orange;
} 
.profile-rating {
   margin-bottom: 20px; 
}
.profile-rating .num{
   font-size: 1.5rem;

}
.profile-rating .stars{
   font-size: 1.5rem;
}
form .card .alert{
   font-size: 1.5rem;
}
.print-links a{
   font-size:1rem;
   margin: 5px 10px;
   padding: 5px 20px;
}
.btn-purple {
   color: #fff;
   background-color: #a417b8;
   border-color: #a417b8;
}

.btn-purple:hover {
   color: #fff;
   background-color: #b60cce;
   border-color: #b60cce;
}

.dropdown-menu .dropdown-item.active {
   background-color: #015bbb;
}

.navbar-expand-lg .navbar-nav .nav-link {
   padding-left: .3rem;
   padding-right: .3rem;   
}

.input-group * {
    font-size: 0.8rem;
}

.profile_attachments {
   margin: auto;
}
.profile_attachments .thumbnail {
   height: 300px;
}

.profile_attachments img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border: 1px solid #ddd;
   border-radius: 10%;
}
.alert {
   font-size: 1.2rem;
}
.form-control {
   height: calc(1.9rem + 2px);
}
a.nav-item {
   color: #000;
}
a.nav-item.active {
   background-color: black !important;
}
a.nav-item:active {
   box-shadow: auto !important;
   background-color: auto !important;
   border-color: auto !important;
}
a.nav-item:focus {
   box-shadow: auto !important;
   background-color: auto !important;
   border-color: auto !important;
}
#dropdownMenuButton span.fa {
   font-size: 35px;
   position: relative;
   top: -5px;
   left: 2px;
}
.dataTables_filter input, .dashboard input {
   border-radius: 15px;
   padding: 0px 5px;
}

.topbar {
   height: 25px;
   background-color: #232f3f;
   flex-basis: 100%;

   padding-left: 30px;
   padding-right: 30px;
   margin-left: auto;
   margin-right: auto;
}

.topbar a {
   color: #fff;
}


#navbarNavAltMarkup{
   flex-basis: 100%;
   background: #e8ebee;
}

#navbarNavAltMarkup .navbar-nav {
   margin: auto;
}

#navbarNavAltMarkup a{
   font-size: 18px;
   padding: 8px;
   transition: transform .2s;
}

#navbarNavAltMarkup .dropdown-menu a{
   font-size: 13px;
}

nav *{
   transition: all .2s;
}

nav.shrink #navbarNavAltMarkup a{
   font-size: 13px;
   padding: 2px;
}

nav.shrink .topbar {
   display: none;
}

nav.shrink #navnotifications {
   top: -2px;
}

nav.shrink #navnotifications i.main {
   padding: 7px;
   font-size: 15px;
}
nav.shrink .navbar-brand img {
   height: 30px;
   transition: all .2s;
}
nav.shrink #navsearchinput {
   height: 24px;
}
nav.shrink #navsearchbutton {
   height: 24px;
   padding-top: 3px;
}

.flex-break {
   flex-basis: 100%;
   height: 0;   
}

.block {
   display: block;
   width: 100%;
   position: relative;
}

#navbarNavSub {
   height: 30px;
   background-color: #252934;
}

#navsearchinput {
   width: 90%;
   line-height: 1;
   height: 32px;
}

#navsearchbutton {
   display: inline-block;
   color: white;
   background: #008bff;
   height: 32px;
   width: 10%;
   padding-top: 7px;
   padding-bottom: 7px;
   text-align: center;
}

#navsearchbutton i{
}

#navnotifications {
   float: left;
   width: 10%;
   text-align: left;
   position: absolute;
   top: -7px;
}

#notifinations_inner {
   position: relative;
}

#navnotifications i.main {
   background: #008bff;
   color: white;
   padding: 10px;
   border-radius: 50%;
   font-size: 21px;
}

.notifications-count {
    background-color: red;
    color: white;
    width: 20px;
    display: inline-block;
    height: 20px;
    text-align: center;
    padding-top: 3px;
    border-radius: 50%;
    font-size: 9px;
    position: absolute;
}

.notifications-date {
    font-weight: bold;
    margin: 5px;
    margin-top: 10px;
}
#navnotifications .notifications_entries {
   width: 550px;
   left: -40px;
   position: absolute;
   background: #fff;
   padding: 5px;
   border: 1px solid #ddd;
   z-index: 999;
   text-align: right;
   overflow-y: auto;
   max-height: 90vh;    
}

#navnotifications .notification_icon {
   font-size: 20px;
}

#navnotifications i.innernew {
   color: #f00;
   font-size: 10px;
   vertical-align: middle;
}

.notifications_entries a {
   text-decoration: none;
}

#searchblock {
   float: right;
   display: inline-block;
   width: 90%;
}

#searchblock>div{
   width: 100%;
}

.searchcontainer{
   position: relative;
}

#searchblock .searchcontainer{
   /*width: 70%;*/
   margin: auto;
}

#globalsearch,.personsearch {
   position: absolute;
   background: white;
   z-index: 1000;
   padding: 5px;
   box-shadow: 0px 10px 10px #777;
   width: 100%;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
   overflow-y: scroll;
   max-height: 85vh;
}
.input-group .searchcontainer{
  flex-basis: 100%;
}

.input-group .searchresult h5{
  font-size: 0.7rem;
}

.input-group .searchresult span{
  font-size: 0.5rem;
}

.input-group .searchresult *{
  line-height: 1;
  text-align: right;
}

#globalsearchloader, .personsearchloader {
   text-align: center;
}

.no-search-results {
   text-align: center;
   padding: 20px;
}

.searchresult {
   margin-top: 10px;
   color: inherit;
}
.searchresult:hover {
   text-decoration: none;
}

.searchresult h5 {
   color: black;
}

.searchresult .info {
   float: left;
   text-align: center;
   width: 110px;
   padding: 6px 0px;
}

.profile-gallery .row{
   margin: 0;
}

.profile-container {
   margin-bottom: 30px;
   font-size: 0.4rem;
   padding-left: 7px;
   padding-right: 7px;
}

.profile-container .profile {
   border-radius: 20px;
}

.profile-container .avatar {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   margin: auto;
   width: 300px;
   height: 300px;
}

.profile-container .head {
   padding-top: .5rem !important;
   background: #f2f2f2;
}

.profile-container .btn {
   color: #fff;
   font-size: 7px;
}

.profile-container h5 {
   /*font-weight: bold;*/
   font-size: 0.6rem;
}

.profile-container:hover {
   transform: scale(1.2);
   transition: transform .2s;
   z-index: 500;
}

.profile-gallery .filter {
   margin-bottom: 5px;
   margin-top: 12px;
}
.profile-gallery .filter>div {
   padding-left: 5px;
   padding-right: 5px;
   margin-bottom: 10px;
}
.pagination-summary-top {
   margin: 10px;
}
.filter .form-field {
   background: #fff;
   border-radius: 5px;
}
.filter .field-text {
   width: 100%;
   float: right;
   font-size: 10px;
   padding: 5px;
   background: #95bbdf;
   text-align: center;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
.filter .field-control {
   width: 100%;
   float: right;
}
.filter .field-control-1 {
   width: 50%;
   float: right;
   border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
   border-width: 1px;
}
.filter .field-control-2 {
   width: 50%;
   float: right;
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   border-width: 1px;
}
.filter input {
   height: 25px;
   font-size: 10px;
}
.filter select {
   height: 25px;
   border-radius: 5px;
}
.filter .btn {
   line-height: 38px;
   color: #fff;
}
.filter .btn-small {
   line-height: 14px;
   color: #fff;
}
.filter ::placeholder {
  opacity: 1;
}

.select-multiple {
   margin: 20px;
}

.profile-gallery h5, .profile-gallery span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}


.view-mode select.form-control,.view-mode input.form-control,.view-mode textarea.form-control,.view-mode .select2-selection {
   background: transparent !important;
   border: none !important;
   border-bottom: 1px dotted #ddd !important;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
   text-overflow: '';
}

.view-mode select.form-control::-ms-expand {
   display: none;
}

.view-mode .input-group-text{
   background-color: transparent;
   border: none;
   color: #008bff
}

.table th {
   text-align: center;
}

.table td, .table th {
   padding: 0.25rem !important;
}

.table td.table-separator, .table th.table-separator {
   width: 1px;
   padding: 1px !important;
}

input.table-control {
   width: 100%;
}

textarea.table-control {
   background-color: white;
   width: 100%;
   min-width: 30vw;
}

.btn.table-action {
   border-radius: 20%;
   padding: 5px 4px;
}

input.req-date {
   width: 100px;
   border: none;
}

select.req-area {   
   border: none;
   color: #007bff;
}

input.req-by-who {
   width: 60px;
   border: none;
}

.table-active-state .btn{
   padding: 4px;
}

.suggestions-table {
   font-size: 0.65rem;
}

.filter-area-group {
   margin-bottom: 10px;
}

.filter-area-group label {
   padding: 5px 30px;
}


.btn-group > .btn:first-child {
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
}
.btn-group > .btn:last-child {
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
   background-color: #0053ac;
   border-color: #0053ac;
}

div.profile-form .input-group *{
   font-size: 0.8rem;
}

.profile-inactive {
   filter: brightness(65%);
}

.profile-container.profile-inactive .avatar {
   filter: brightness(50%);
}

.profile-card-full .avatar{
   border-radius: 20px;
}

.profile-card-full span{
   text-align: right;
}
.profile-card-full .label{
   font-weight: bold;
   color: #232323;
   padding:0;
}
.profile-card-full .data{
   color: #007bff;
   padding:0;
}
.profile-card-full hr {
   box-sizing: border-box;
}

.profile-card-full  h4 {
   padding: 0;
   margin: 0;
   line-height: 1;
}

.profile-card-full .more-details {
   margin: 0;
   margin-top: 20px;
}

.profile-card-full .more-details a, .profile-card-full .more-details a:hover {
   color: white;
}

.profile-card-full .more-details * {
   margin-top: 10px;
}

.stats-label {
   color: #008bff;
   display: flex;
   padding:.375rem 5px;
   line-height: 1.5;
   margin-bottom: 10px;
   font-size: 0.9rem;
}
.stats-number {
   display: flex;
   border: 1px solid #ccc;
   border-radius: 10px;
   padding:.375rem 5px;
   line-height: 1.5;
   margin-bottom: 10px;
   direction: ltr;
   justify-content: flex-end;
}

#email, #password{
   direction: ltr;
}

#profile .modal-content, #expense, #income, .modal-content{
   border-radius: 5rem;
   padding: 2rem;
}

.modal-backdrop.show {
   opacity: 0.7;
}

.subscription .form-control{
  padding: .1rem .1rem;
}

.subscription.sub-0 .subscrption-type {
  display: none;
}

.subscription.sub-0 .subscrption-type-label-first {
  display: initial;
}

.insert-mode .delete_subscription, .view-mode .delete_subscription {
  display: none;
}

.subscription textarea, .contract-form textarea {
  height: calc(2.9rem + 2px);
}

.suggestions-area {
    background-color: #eee;
}

.suggestions-area-separator {
  height: 20px;
}

.profile-avatar-container {
  position: relative;
}

.profile-avatar-container .info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 4px;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 0.65rem;
}
.btn-group .btn {
  font-size: 0.7rem;
}
.h4, h4 {
  font-size: 1.2rem !important;
}

@media (min-width: 576px)  {
  .modal-dialog {
    max-width: 800px;
  }
}

@media (min-width: 1200px)  {
  .modal-dialog {
    max-width: 1140px;
  }
}

#cursor .avatar-icon {
  background: #eeeeee90;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid #cacaca50;
}
#cursor {
  cursor: pointer;  
}
#cursor:hover .avatar-icon{
  background: #fff;
}

#delete_avatar {
  padding: 5px;
}

.btn-success.loader {
  font-size: 14px;
}

.file_container {
  width: 100%;
}
.contract-image-attachment {
  height: 250px;
  width: 100%;
  padding: 0;
  margin: 0;
  object-fit: cover;
}
.contract-image-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 10%;  
}
/*
.profile-area-1 .head {
  background: #9cfaff;
}
.profile-area-2 .head {
  background: #d6ff9a;
}
*/

.horizontal-stats {
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  gap: 50px;
}
.horizontal-stats .card {
  flex: 1 0 21%; /* explanation below */
}

.avatar-mini{
   width: 150px;
   height: 200px;
   max-width: 100%;
   border-radius: 20px;
   box-shadow: 0px 0px 30px -23px rgba(0,0,0,0.75);
   object-fit: cover;
}

.reception-header {
   background-color: #ccc;
   border-radius:  50px 50px 0 0;
   margin: 0;
   min-height: 40px;
   padding:  5px;
   text-align: center;
   font-weight: bold;
   font-size: 17px;
}

.reception-data {
   padding:  10px;
}

.reception-profile-data {
  font-size:16px;
}

.reception-profile-data i {
  color: #008bff;
}

.reception-profile-data h5 {
  font-weight: bold;
}

.reception-profile-avatar .input-group {
   width:  150px;
   float: left;
}

.reception .stats-label {
   color:  #212529;
   margin-bottom: 0;
}

.reception .stats-number {
   border:  initial;
   margin-bottom: 0;
}

.notification_entry.seen span {
    color: #555;
}
.notification_area {
   font-weight: bold;
}