/* ********** styles only for hurmand site ********** */

/* all styles related to notiflix library */

#NotiflixNotifyWrap {
  width: unset !important;
  /* if dont set above width to unset, then always a 280px width is applied
  which is too short for long messages and causes them wrap multi-line */

  min-width: 250px !important; /* if not set, for short msgs the width is little & a short msg wraps into two lines */
  max-width: 400px !important;
}

.nx-loading-message {
color: #303030 !important;
font-size: 1.375rem;
}


/* set nice font for notiflix messages */
.nx-message {
  font-family: vazir-regular, Tahoma, sans-serif !important;
  font-size: 15px !important;
  line-height: 2;
  margin-right: 10px !important;  /* override default 40px */
}

.nx-message-icon {
  color:#fff !important;
}


/* ************************************************************************** */

.bg-d09b52 {background-color: #d09b52 }   /* hurmand organization */

.height-30px { height:30px !important; }

/* image containers our services in homepage */
.min-h-195 {min-height: 195px !important;}

/* good for <td> cells in tables
note: DON"T use "max-width" on table <td>s, will not apply
*/
.w-20 {width: 20% !important;}
.w-30 {width: 30% !important;}
.w-40 {width: 40% !important;}

#project-tasks-table th {color: #ec406a}

#project-tasks-table .task-save-btn, #project-tasks-table .cancel-edit-btn {
  font-size: 14px !important;
  text-decoration: none !important;
}

#project-tasks-table .task-save-btn {
  color: #fff;
  background-color: #00c395 !important;
  border-radius: 4px;
  margin-bottom: 7px;
}

#project-tasks-table .cancel-edit-btn {
  color: #fff;
  background-color: #ff5a5f !important;
  border-radius: 4px;
}

#task-creation-form input[name="id"] {text-align: center !important;}

#project-tasks-table th {font-weight: 500 !important;}

#project-tasks-table td {color: #484c51; }
#project-tasks-table td[data-name='id'] {color: #ec406a;}

#project-tasks-table .task-name {text-align: right!important;}


#project-tasks-table th[data-name='id'] {width: 60px;}
#project-tasks-table th[data-name='name'] {width: 400px !important;}
#project-tasks-table th[data-name='operation'] {width: 80px;}
#project-tasks-table th[data-name='visible'] {width: 60px;}
#project-tasks-table th[data-name='status'] {width: 60px;}
#project-tasks-table th[data-name='progress'] {width: 60px;}
#project-tasks-table th[data-name='needs_coding'] {width: 60px;}
#project-tasks-table th[data-name='duration'] {width: 80px;}
#project-tasks-table th[data-name='end_day'] {width: 80px;}
#project-tasks-table th[data-name='end_date_fa'] {width: 130px;}

/* now after click on edit btn on row, below elements are created: */

/* after click and row is converted to inputs to edit the row, font is too big
& causes bad td width & unreadable values inside input fields */
#project-tasks-table input {font-size: 13px !important;}

#project-tasks-table input[name="name"],
#project-tasks-table input[name="duration"] ,
#project-tasks-table input[name="end_day"],
#project-tasks-table input[name="end_date_fa"] {
direction: rtl !important;
}

#project-tasks-table input[name='id'] {
  width:60px; text-align: center !important;
}
#project-tasks-table input[name='name'] {
  width:95%;
}
#project-tasks-table select[name='progress'] {
  width:70px;
}

/* only in mobile we MUST assign width of each field in px, otherwise width is too small */
@media (max-width: 767px) {
  #project-tasks-table input[name='name'] { width:300px !important; }
  #project-tasks-table input[name='operation'] {width: 80px;}
  #project-tasks-table input[name='visible'] {width: 60px;}
  #project-tasks-table input[name='status'] {width: 60px;}
  #project-tasks-table input[name='progress'] {width: 60px;}
  #project-tasks-table input[name='needs_coding'] {width: 60px;}
  #project-tasks-table input[name='duration'] {width: 80px;}
  #project-tasks-table input[name='end_day'] {width: 80px;}
  #project-tasks-table input[name='end_date_fa'] {width: 130px;}
}

/* ************************************************************************** */

/* pagination styles : applies on this page: hurmand.com/project-manager/behsotun */

/* pagination styles */


#project-manager-page #pagination-links-div {
  padding: 10px 0;
  margin-bottom: 1rem;
  background-color: #f5f5f5;
}

/* before col-md */
@media (max-width: 767px) {
  #project-manager-page ul.pagination {
    /* in mobile remove empty space at the right of pagination links */
    padding-right: 0;
  }
}

/* from col-md (768px) */
#project-manager-page .pagination a {
  border-color: #c6c6c6;
}

/* الزامی استایل دکمه بعدی در صفحه بندی */
#project-manager-page [aria-label="Next"] span {
  color: #ec406a;
  font-size: 1.4rem
}


/* below is the only way to to make all pagination links at the center of ul main box
because the ul is flex by the system. text-center or mx-auto on any parent nodes
doesn't have effect to make  pagination links placed at the center of ul main box
*/
#project-manager-page #pagination-links-div ul {
  justify-content: center;
}

/* #pagination-links-div { */

/* هشدار حذف نکنید به هم میریزند */
/*
.pagination توجه: کلاسِ
را ما نساخته ایم بلکه توسط این دستور ساخته میشه:
 <?= $pager->Links(); ?>
 نتیجه:
<nav aria-label="Page navigation">
<ul class="pagination">
  <li class="active">

*/
#project-manager-page .pagination > li {
  margin: 0 3px 8px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #fff;

  /* before assigning display:flex display: inline-block; // to be able to assign width */
  /* all 4 below codes are to make number & lock, be placed at the center(middle) of each box */
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 3rem;
  line-height: 2.7;  /* is better than height: 2.7rem; because with line-height
  the text inside box remains vertically middle */
}

#project-manager-page .pagination > li > a {
  font-size: .875rem;  /* 14px */
  border-radius: 0;  /* to deactivate default a tag 3px from styles-base.css   */
  /* both 100% are required otherwise a tag are very thi, click in them is hard,
  their bkg blue is very thin */
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) { #project-manager-page .pagination > li > a { font-size: 1rem; } }

#project-manager-page #pagination-links-div li.active a { background-color: #4995f0; color: #fff; }

/* When setting the style for several link states,
there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
so order is
a:link
a:visited
a:hover
a:active

*/
#project-manager-page .pagination a:hover{ color: #fff; background-color: #0093ee; }

/* .pagination a:active {
  color: #fff;
  background-color: #0093ee;
} */

/* ************************************************************************** */
/* project monitor task dashboard */

#project-monitor-page .task-name {text-align: right !important;}

#project-monitor-page h1, #project-monitor-page h2, #project-monitor-page h3, #project-monitor-page h4, #project-monitor-page h5 {color: #fff}

#project-monitor-page .each-task-li {
  margin-bottom: 1.5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  background-color: #fff !important;
  border-radius: var(--bs-border-radius-lg)!important;
}

#project-monitor-page .li-div-1 {
  display: flex;
  /* dont assign below because if task name is multiple page, the task number
  comes down to center vertically & becoms bad */
  /* align-items: center; */
}

#project-monitor-page .task-id {
  display: flex;
   /* prevents the width of id circle becomes too little if task name spans more that one line in its cell*/
   flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size:12px!important;
  background-color: #42bcf0;
  border-radius: 50%!important;
  margin-left: .5rem !important;
  width:20px;
  height:20px;
}

#project-monitor-page .task-name {
  color: #404040;
}

/* di contains needs_coding & duration */
#project-monitor-page .li-div-2a {
  margin-top: .5rem !important;
  display: flex;
  justify-content: space-between;
}

/* first span inside #li-div-2a  (needs_coding) */
#project-monitor-page .li-div-2a span:nth-of-type(1) {
  background-color: #ffcccc;
  color: #ff0000 ;
  padding: .063rem .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 10px !important;
}

/* second span inside #li-div-2a  (task duration) */
#project-monitor-page .li-div-2a span:nth-of-type(2) {
  background-color: #ff824d;
  color: #fff;
  padding: .063rem .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 12px !important;
}


#project-monitor-page .li-div-2b {
  margin-top: .5rem !important;
  display: flex;
  justify-content: end;
  color: #fff;
}

/* first span inside #li-div-2b (task duration) */
#project-monitor-page .li-div-2b span:nth-of-type(1) {
  background-color: #ff824d;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 12px !important;
}


#project-monitor-page .li-div-3 {
  text-align: center;
  margin-top: .5rem !important;  /* mt-2 */
}

/* project progress */
#project-monitor-page .li-div-3 span:nth-of-type(1) {
    background-color: #00c395;
    color: #fff;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    border-radius: var(--bs-border-radius-lg)!important;
    font-size: 14px !important;
}

/* task extra info */
#project-monitor-page .li-div-4 {
  text-align: right;
  margin-top: 1rem !important;
  background-color: #ffcccc;
  color: #ff0000 ;
  font-size: 13px !important;
  padding: .25rem;
  border-radius: 5px;
}


#project-monitor-page .li-div-finished {
  margin-top: .5rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* لغت تکمیل شده */
.li-div-finished .finished-word {
  display: flex;
  align-items: center;
  background-color: #1dafed !important;
  color: #fff ;
  padding: .063rem .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 12px !important;
  max-height: 22px;
}

/* مدت زمان تسک در ستون انجام شده ها */
.li-div-finished .done-duration {
  background-color: #ff824d;
  color: #fff;
  padding: .063rem .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 12px !important;
}

/* لغت پایان و تاریخ */
.li-div-finished .end-date {
  background-color: #aaeeee;
  color: #000;
  padding: .25rem .5rem !important;
  border-radius: var(--bs-border-radius-lg)!important;
  font-size: 12px !important;
}





@keyframes my-flash-animation {
 from { opacity: 0; }
 to   { opacity: 1; }
}

#project-monitor-page .li-div-4 i {
  animation-name: my-flash-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: jump-end;
}

@media (max-width: 767px) {
  #todo-tasks-container, #doing-tasks-container {
    border-bottom:1px solid #fff;
  }
}

@media (min-width: 768px) {
  #todo-tasks-container, #doing-tasks-container {
    border-left:1px solid #fff;
  }
}

#project-monitor-page #bg-image-container {
  background: url('/img/project-monitor-page/1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-bottom: 0.5px solid #fff;
}

/* ************************************************************************** */

/* pagination styles in project-monitor page (under done tasks ) */

#project-monitor-page #pagination-links-div {
  padding: 10px 0;
  margin-bottom: 1rem;
  /* background-color: #f5f5f5; */
}

/* الزامی استایل دکمه بعدی در صفحه بندی */
#project-monitor-page [aria-label="Next"] span {
  color: #ec406a;
  font-size: 1.4rem
}

/* below is the only way to to make all pagination links at the center of ul main box
because the ul is flex by the system. text-center or mx-auto on any parent nodes
doesn't have effect to make  pagination links placed at the center of ul main box
*/
#project-monitor-page #pagination-links-div ul {
  justify-content: center;
}

#project-monitor-page .pagination > li {
  margin: 0 3px 8px;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #fff;

  /* all 4 below codes are to make number & lock, be placed at the center(middle) of each box */
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 2rem;
  margin-left: .5rem;
  line-height: 2;  /* is better than height: 2.7rem; because with line-height
  the text inside box remains vertically middle */
}


#project-monitor-page .pagination > li > a {
  font-size: .875rem;  /* 14px */
  border-radius: 0;  /* to deactivate default a tag 3px from styles-base.css   */
  /* both 100% are required otherwise a tag are very thin, click in them is hard,
  their bkg blue is very thin */
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  #project-monitor-page .pagination > li > a {
  font-size: 1rem;
 }
}

#project-monitor-page #pagination-links-div li.active a {
  background-color: #4995f0;
  color: #fff;
}

#project-monitor-page .pagination a:hover{ color: #fff; background-color: #0093ee; }

/* ************************************************************************** */

/* in about-us page to make the bottom of 3 boxes equal */
.height-280 {height: 280px;}
.height-300 {height: 300px;}
.height-350 {height: 350px;}



.table td { border-color: #c6c6c6 !important; }

/* ********** footer ********** */
footer { background: #283e56} /* previous black #fed481; */
footer a {color: #fff; margin: .938rem 0; }
footer a:hover { color: #fed481; }

#footer-top-div ul { line-height: 3; }

#footer-bottom-div { padding: .625rem 0; border-top: 0.5px solid #7b868a; }

/* style the php is_file() result when file not exists */
.is-file-error {
text-align: center !important;
direction: ltr;
margin-bottom: 1rem;
}

/* ********** reading progress bar ********** */
/* progress bar layout */
#reading-progress {
  position: fixed;
  width: 100%;
  height: 5px;
  z-index: 9999;
  top: 0;
  left: 0;
}
/* bottom: 0  if we want scroll bar appear on footer */
    /* max-width:100% */
#reading-progress-fill {
    height: 5px;
    width: 0;
}

/* progress bar Theme */
#reading-progress-fill {
  -webkit-transition: width 100ms ease;
  -o-transition: width 100ms ease;
  transition: width 100ms ease;
  background-color: #ff6633;
}