.request-work .lang,
.forgot-password .lang {
  padding: 5px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
}


.request-work .lang img,
.forgot-password .lang img {
  width: 50px;
  height: 50px;
  object-fit: center;
  border-radius: 10px;
}

.push_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #03030372;
  width: 100%;
  min-height: 100vh;
}



/* Start Svg Color */
.svgIcon {
  fill: var(--clr-primary) !important;
}

/* End Svg Color */
.not_found {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e5e5;
  color: #333;
  font-size: 15px;
}

/*=========== 
- Start Sign
===========*/
.sign :is(.left-sec, .right-sec) {
  min-height: 100vh;
}

.sign .left-sec {
  width: 450px;
  background-color: #fff;
}

.sign .left-sec form {
  padding-block: 30px 0px;
  width: 80%;
  height: 100%;
  margin-inline: auto;
}

.sign .left-sec form .all-sec-content {
  flex-direction: column;
  height: 100%;
}


.sign .left-sec form .logo {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  flex-direction: column;
  margin-bottom: 15px;

}

.sign .left-sec form .logo {
  color: #d3d3dd;

}

.sign .left-sec form>p {
  font-size: 13px;
}

.sign .left-sec form .logo img {
  width: 100%;
}

.sign .left-sec form .title-sign {
  position: relative;
  font-size: 20px;
}

.sign .left-sec form .title-sign::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 4px;
  background-color: var(--clr-primary);
  border-radius: 30px;
  bottom: 0px;
}

.sign .left-sec form .input {
  width: 100%;
  margin-bottom: 10px;
}

.sign .left-sec form .input label {
  font-size: 14px;
}

.sign .left-sec form .input input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.sign .left-sec form .input input::placeholder {
  font-size: 13px;
}

.sign .left-sec form .link-forgot-password {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}

.sign .left-sec form .link-forgot-password:hover {
  text-decoration: underline;
}

.sign .left-sec form .input button {
  width: 100%;
  padding: 10px;
  background-color: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.126);
  transition: all .3s;
}

.sign .left-sec form .input button:hover {
  background-color: var(--clr-primary-hv);
}

.sign .left-sec form .social-and-jop {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding-block: 15px;
}

.sign .left-sec form .social-and-jop::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #e7e7e7;
  border-radius: 20px;
  top: -10px;
}

.sign .left-sec form .social-and-jop::after {
  content: attr(data-line);
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  font-size: 16px;
  color: #ccc;
  padding: 2px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  top: -10px;
}

.sign .left-sec form .with-social {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.sign .left-sec form .btn-jop-application {
  width: 100%;
  text-align: center;
}

.sign .left-sec form .btn-jop-application a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--clr-primary);
  color: var(--clr-primary);
  border-radius: 5px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.126);
}

.sign .left-sec form ol {
  color: #333;
}


.sign .left-sec form ol li {
  display: inline-block;
  font-size: 13px;
}

.sign .left-sec form ol li a {
  color: #333;
}

.sign .left-sec form ol li::before {
  content: "•";
  margin-inline: 2px;
}

.sign .right-sec {
  width: calc(100% - 450px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang {
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  background: #000;
  color: #fff;
  gap: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.126);
}

.lang span:last-child {
  font-weight: 600;
}

.lang img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.pop {
  position: fixed;
  background-color: #33333343;
  width: 100%;
  min-height: 100vh;
  z-index: 999;
  top: -200%;
}

.pop.show {
  animation: showPop .01s forwards;
}

@keyframes showPop {
  0% {
    top: -100%;
  }

  100% {
    top: 0%;
  }
}

.pop .content {
  position: absolute;
  min-width: 700px;
  background-color: #fff;
  border-radius: 40px;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.langSec.show .content {

  animation: showPopContent .5s forwards;
  animation-delay: .2s;
}

@keyframes showPopContent {
  0% {
    top: -50%;
  }

  100% {
    top: 50%;
  }
}

.langSec .content .top-lang {
  position: relative;
  height: 144px;
  display: flex;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(var(--clr-primary), var(--clr-primary-hv));
  border-radius: 40px 40px 0 0;
}

.langSec .content .top-lang svg {
  position: absolute;
  bottom: calc(-40px / 2);
}

.langSec .content .top-lang h3 {
  font-size: 23px;
  color: #fff;
  letter-spacing: 1px;
}

.langSec .content .langs {
  padding: 10px;
}

.langSec .content .langs .flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px;
  color: #333;
  transition: color .3s, border .3s;
}

.langSec .content .langs .flag:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.langSec .content .langs .flag.active {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.langSec .content .langs .flag img {
  width: 60px;
  border-radius: 5px;
}

.pop .btn-close {
  position: absolute;
  background-color: #f3f2f2;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  top: 15px;
  right: 15px;
}

/*=========== 
- End Sign
===========*/

/*=========== 
- Start Header User
===========*/
header.header {
  background-color: #fff;
}

header.header .left-sec .logo img {
  width: 180px;
}

header.header .left-sec h2 {
  font-size: 24px;
}

header.header .right-sec a {
  background-color: var(--clr-primary);
  color: #fff !important;
  padding-block: 5px;
  padding-inline: 10px;
  font-size: 17px;
  border-radius: 5px;
}

/*=========== 
- End Header User
===========*/

/*========= Start Home   =========*/
body>.home header .sec__right nav>ul>li {
  position: relative;
}

body>.home header .sec__right nav>ul>li>a {
  display: flex;
}

.section_pop-edit-salary.close,
.section_pop.close {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  top: 50%;
  left: 50%;
}

.edit-salary.close,
.section_content.close {
  position: fixed;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: closeSection .3s linear !important;
}

.section_pop-edit-salary.open,
.section_pop.open {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  top: 50%;
  left: 50%;
  overflow-y: auto !important;
}

.edit-salary.open,
.section_content.open {
  position: fixed;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: openSection .3s linear !important;
}

@keyframes closeSection {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

@keyframes openSection {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.form_employees {
  background-color: #fff !important;
}

.dropdown-menu-lang {
  position: absolute;
  width: 100px;
  top: calc(100% + 10px);
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  padding: 5px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 9999999;
}

.dropdown-menu-lang.open {
  display: block;
}

.dropdown-menu-lang a {
  display: flex;
  width: 100%;
  padding-block: 5px;
  padding-inline: 10px;
}

.content-profile .header_profile {
  position: relative;
}

.content-profile .header_profile .cover {
  height: 250px;
  border-radius: 10px;
}

.content-profile .header_profile .cover,
.content-profile .header_profile .cover .imgCover {
  border-radius: 10px;
}

.content-profile .header_profile .profile .avatar,
.content-profile .header_profile .profile .avatar img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}

.content-profile .header_profile .edit {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
}

.content-profile .header_profile .edit {
  background-color: #00000053;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.content-profile .header_profile .profile {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
}

.content-profile .header_profile .profile .icons-profile {
  font-size: 12px;
}

.content-profile .header_profile .profile .icons-profile svg {
  width: 20px;
  height: 20px;
}

.content-profile .header_profile .profile .icons-profile .icon {
  border-radius: 40px;
  padding: 3px 10px;
}

.content-profile .header_profile .profile h3>span {
  font-size: 20px;
}

.content-profile .header_profile .profile h3 .icons-profile .icon.age {
  background-color: rgb(255, 0, 76);
  padding: 2px 5px;
}

.content-profile .header_profile .profile .icons-profile .icon.supervision {
  background-color: rgb(5, 85, 196);
}

.content-profile .header_profile .profile .icons-profile .icon.review {
  background-color: rgb(250, 180, 3);
}

.content-profile .header_profile .profile .icons-profile .icon.department {
  background-color: rgb(9, 172, 77);
}

.content-profile .header_profile .profile .icons-profile span {
  text-wrap: nowrap;
  font-weight: 600;
}

.content-profile .header_profile .imgCover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-profile .body_profile {
  display: flex;
  gap: 10px;
}

.input.pos-relative :is(input, select, textarea) {
  width: 100%;
  padding: 5px;
}

.content-profile .body_profile .boxss {
  width: 100%;
  margin-top: 10px;
}

.content-profile .body_profile .box {
  width: 100%;
}

.content-profile .body_profile .box .title {
  border: 1px solid var(--clr-primary);
  color: var(--clr-primary);
}

.header_profile img {
  width: 250px;
  height: 230px;
}

.btns-change-request::before {
  transition: all .5s;
}

.home-content>.left {
  width: 400px;
  flex-shrink: 0;
}

.home-content>.right {
  width: 100%;
}

#secWorkTime,
.home-content .right #write-post {
  position: relative;
  z-index: 1;
}

#secWorkTime.open-write,
.home-content .right #write-post.open-write {
  z-index: 200000000000;
}

.home-content .right .header-write-post .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.119));
}

.home-content .right .header-write-post .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.home-content .right .header-write-post .information .name {
  font-size: 22px;
}

#secWorkTime.open-write .body-secWorkTime.open-write,
.home-content .right .body-write-post {
  position: relative;
  width: calc(100% - 50px);
  padding: 0 10px;
}

.home-content .right .body-write-post .textarea {
  position: relative;
}

.home-content .right .body-write-post .textarea .btns {
  width: 90%;
  padding-block: 10px;
}

.home-content .right .body-write-post .textarea .btns .btn {
  border-radius: 40px;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  transition: all .3s;
}

.home-content .right .body-write-post .textarea .btns .btn:hover {
  background-color: #ebebeb6a;
}

.home-content .right .body-write-post .textarea .btns span {
  color: #333;
  font-size: 12px;
  font-weight: 500;
  text-wrap: nowrap;
}

#secWorkTime.open-write .body-secWorkTime.open-write :is(input[type="submit"], input[type="button"], #add_answer),
.home-content .right .write-post :is(input[type="submit"], input[type="button"], #add_answer) {
  border: none;
  background-color: var(--clr-primary);
  border-radius: 5px;
  color: var(--clr-white);
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
}

#secWorkTime.open-write .body-secWorkTime.open-write .btns-submit,
.home-content .right .write-post .btns-submit {
  display: none;
}

.home-content .right .open-write input[type="button"] {
  display: none;
}

.home-content .right .open-write .btns-submit {
  display: flex;
}

.home-content .right .open-write .left-btns-submit span {
  color: #bbbbbb;
}

.home-content .right .post .input input,
#secWorkTime.open-write .body-secWorkTime.open-write :is(textarea, .inputs-asks input),
.home-content .right .body-write-post :is(textarea, .inputs-asks input) {
  width: 100%;
  height: 50px;
  border: 1px solid rgb(245, 245, 245);
  background-color: rgb(245, 245, 245);
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  transition: all .3s;
}

.home-content .right .post .input input:focus,
.home-content .right .body-write-post :is(textarea, .inputs-asks input):focus {
  border-color: var(--clr-primary);
}

.home-content .right .body-write-post textarea::-webkit-scrollbar {
  width: 5px;
}

.home-content .right .body-write-post textarea::-webkit-scrollbar-track {
  background-color: var(--clr-gray-light);
}

.home-content .right .body-write-post .inputs-asks {
  margin-top: 10px;
}

#add_answer {
  background: #007bff !important;
}

.home-content .right .body-write-post .inputs-asks input {
  display: block;
  width: 300px;
  margin-bottom: 5px;
}

.home-content .right .post .input input,
.home-content .right .body-write-post :is(textarea, .inputs-asks input)::placeholder {
  font-size: 15px;
}

.home-content .right .post {
  padding: 15px 15px 0 15px;
}

.home-content .right .post .comment-profile form,
.home-content .right .post .comment-profile .input {
  width: 100% !important;
  gap: 10px;
}

.home-content .right .post .header-post .information-post h2 {
  font-size: 17px;
  line-height: .8;
}

.home-content .right .post .header-post .information-post small {
  font-size: 10px;
  color: #ccc;
}

.home-content .right .post .header-post .left .avatar {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

.home-content .right .post .header-post .left .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.home-content .right .post .header-post .right .menu-post {
  position: relative;
}

.home-content .right .post .header-post .right .menu-post .dropdown-post {
  position: absolute;
  width: 230px;
  background-color: #fff;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .1));
  display: none;
}

.home-content .right .post .header-post .right .menu-post .icon.active+.dropdown-post {
  display: block;
}

.home-content .right .post .header-post .right .menu-post .dropdown-post li a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px;
}

.home-content .right .post .header-post .right .menu-post .dropdown-post li a svg {
  width: 17px;
  height: 17px;
}

.home-content .right .post .header-post {
  width: 100%;
}

.home-content .right .post .txt {
  font-size: 14px;
  padding: 5px 5px 0 5px;
}

.home-content .right .post .image-grid {
  display: grid;
  gap: 5px;
}

.home-content .right .post .image-grid img {
  width: 100%;
  min-height: 400px;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

.home-content .right .post .see-action {
  font-size: 12px;
  color: #bababa;
}

.home-content .right .post .btns-post-action .btns {
  display: flex;
  align-items: center;
  gap: 15px;
}

.home-content .right .post .btns-post-action .btns .like.checked svg {
  color: rgb(15, 92, 235);
}

.home-content .right .post .btns-post-action .btns :not(:has(.checked)) svg {
  color: #949494;
}

.home-content .right .post .btns-post-action svg {
  width: 25px !important;
  height: 25px !important;
}

.home-content .right .post .btns-post-action a {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}

.home-content .right .post .btns-post-action a:hover {
  background-color: rgb(238, 237, 237);
}

.home-content .right .post .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comments {
  padding-block: 10px;
}

.comments-user {
  background-color: #ebebeb91;
  border-radius: 20px;
  margin-top: 10px;
}

.comments-user .information h3 {
  font-size: 14px;
  line-height: .5;
}

.comments-user .information h3 small {
  font-size: 12px;
  font-weight: 400;
}

.comments-user .information p {
  font-size: 13px;
}

.home-content .right .post .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.home-content .right .post .comment-profile {
  width: calc(100% - 40px);
  padding-bottom: 10px;
}

.home-content .right .post .comment-profile input {
  width: 100% !important;
}

.home-content .right .post .comment-profile button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background-color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-white);
}

.Qiz {
  padding: 15px;
}

.Qiz label {
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.Qiz :not(:has(.checked)) {
  background-color: rgba(232, 232, 232, 0.753);
}

.Qiz :not(:has(.checked))::before {
  content: "⬜";
}

.Qiz :not(:has(.checked)):hover {
  background-color: #c9c9c9;
}

.Qiz:has(.checked) label:not(.checked) {
  cursor: not-allowed;
  background-color: rgba(234, 24, 56, 0.392);
}

.Qiz:has(.checked) label:not(.checked)::before {
  content: "❌";
  font-size: 15px;
}

.Qiz:has(.checked) label.checked {
  cursor: not-allowed;

}

.Qiz:has(.checked) label.checked::before {
  content: "✅";
  font-size: 15px;
}

.Qiz .checked {
  background-color: rgba(20, 224, 119, 0.392);


}

/* قواعد حسب عدد الصور */
.home-content .right .post .image-grid:has(img:nth-child(1):nth-last-child(1)) {
  grid-template-columns: 1fr;
}

.home-content .right .post .image-grid:has(img:nth-child(2):nth-last-child(2)) {
  grid-template-columns: 1fr 1fr;
}

.home-content .right .post .image-grid:has(img:nth-child(3):nth-last-child(3)) {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.home-content .right .post .image-grid:has(img:nth-child(3):nth-last-child(3)) img:first-child {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.home-content .right .post .image-grid:has(img:nth-child(3):nth-last-child(3)) img:nth-child(2),
.home-content .right .post .image-grid:has(img:nth-child(3):nth-last-child(3)) img:nth-child(3) {
  grid-column: span 1;
  width: 100%;
}

.home-content .right .post .image-grid:has(img:nth-child(4):nth-last-child(4)) {
  grid-template-columns: 1fr 1fr;
}

/* قواعد حسب عدد فيديو */
.home-content .right .post .image-grid:has(video:nth-child(1):nth-last-child(1)) {
  grid-template-columns: 1fr;
}

.home-content .right .post .image-grid:has(video:nth-child(2):nth-last-child(2)) {
  grid-template-columns: 1fr 1fr;
}

.home-content .right .post .image-grid:has(video:nth-child(3):nth-last-child(3)) {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.home-content .right .post .image-grid:has(video:nth-child(3):nth-last-child(3)) video:first-child {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.home-content .right .post .image-grid:has(video:nth-child(3):nth-last-child(3)) video:nth-child(2),
.home-content .right .post .image-grid:has(video:nth-child(3):nth-last-child(3)) video:nth-child(3) {
  grid-column: span 1;
  width: 100%;
}

.home-content .right .post .image-grid:has(video:nth-child(4):nth-last-child(4)) {
  grid-template-columns: 1fr 1fr;
}

.home-content :is(.left, .right, .right form)>.write-post {
  border-radius: 20px;
  overflow: hidden;
}

#secWorkTime {
  position: absolute;
  width: 100%;
  display: none;
  justify-content: center;
  padding-top: 10px;
}

#secWorkTime.open {
  display: flex;
  z-index: 9999999999;
}

#secWorkTime>.body-secWorkTime {
  background-color: #fff;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
  padding: 20px;
  text-decoration: unset !important;
}

#secWorkTime>.body-secWorkTime h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}
#secWorkTime>.body-secWorkTime .input input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 2px solid #ccc;
}
#secWorkTime>.body-secWorkTime button {
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#secWorkTime>.body-secWorkTime .input.d-flex {
  gap: 10px;
}
.flatpickr-calendar.open {
  z-index: 99999999999 !important;

}

#secWorkTime>.body-secWorkTime h3::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 4px;
  border-radius: 20px;
  bottom: 0px;
  background-color: var(--clr-primary);
}

.home-content :is(> .right, > .right form)>div {
  padding: 20px 20px 0 20px;
}

.timeAndDate {
  color: #fff !important;
}

.btns-change-request:has(#btn_request_permission.active)::before {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  width: 50%;
  background-color: var(--clr-primary);
  z-index: 1;
}



.btns-change-request a {
  position: relative;
  width: 100%;
  z-index: 2;
}

.btns-change-request a.active {
  color: #fff !important;
}

.notification_header {

  border-bottom: 1px solid rgba(220, 220, 220, 0.8);
}

.notification_header h3 {
  font-size: 17px;
  color: #222;
}

.notification_header span {
  font-size: 13px;
  color: #bcbcbc;
}

.notification_dropdown .notification_body {
  position: relative;
  height: 100%;
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
}

.notification_dropdown .notification_body .notification {
  padding: 5px;
  border-bottom: 1px solid #e2e2e2;
}

.notification_dropdown .notification_body .notification h4 {
  font-size: 14px;
  color: #333;
  line-height: 1;
}

.notification_dropdown .notification_body .notification small {
  font-size: 12px;
  color: #a9a9a9;
}

.notification_dropdown .notification_body .notification:last-child {
  border-bottom: none;
}

.Not {
  background-color: #f0f2f5;
}

.notification_dropdown .notification_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

.notification_dropdown .notification_footer a {
  display: inline-block;
  width: 100%;
  border: 1px solid #ddd;
  text-align: center;
  margin-inline: auto;
  color: #333;
  transition: .3s;
}

.notification_dropdown .notification_footer a:hover {
  background-color: #f0f2f5;
  font-weight: 600;
}

.notification_dropdown,
body>.home header .sec__right nav>ul>li .profile_dropdown,
body>.home header .sec__right nav>ul>li .notification_dropdown {
  display: none;
  z-index: 99999999;
}

.notification_dropdown.open,
body>.home header .sec__right nav>ul>li .profile_dropdown.open,
body>.home header .sec__right nav>ul>li .notification_dropdown.open {
  display: block;
}

body>.home header .sec__right nav>ul>li.profile>a {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

body>.home header .sec__right nav>ul>li.profile>a>img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.notification_dropdown,
body>.home header .sec__right nav>ul>li .notification_dropdown,
body>.home header .sec__right nav>ul>li.profile>.profile_dropdown {
  position: absolute;
  top: calc(100% + 15px);
  width: 310px;
  background-color: #fff;
  border-radius: 5px;
}

body>.home header .sec__right nav>ul>li.profile>.profile_dropdown button,
body>.home header .sec__right nav>ul>li.profile>.profile_dropdown a {
  width: 100%;
  display: inline-block;
  text-wrap: nowrap;
  padding: 10px 10px;
  font-size: 14px;
  color: #333;
  transition: .3s;
}

body>.home header .sec__right nav>ul>li.profile>.profile_dropdown button:hover,
body>.home header .sec__right nav>ul>li.profile>.profile_dropdown a:hover {
  font-weight: 600;
  background-color: #f3f3f3;
}

body>.home header .sec__right nav>ul>li.profile>.profile_dropdown button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
}

body>.home .container .boxs .box {
  width: 100% !important;
}

body>.home .container .boxs .input label {
  font-size: 15px;
}

body>.home .container .boxs .input>div {
  width: 100%;
}

body>.home .container .boxs .input :is(input, select) {
  width: 100%;
  padding: 10px;
  border: 1px solid #9f9f9f;
  border-radius: 5px;
}

body>.home .container .boxs button[type="submit"] {
  display: inline-block;
  border: none;
  border-radius: 5px;
  background: var(--clr-primary);
  color: #fff;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: .3s;
  font-weight: 600;
}

body>.home .container .boxs button[type="submit"]:hover {
  background: var(--clr-primary-hv);
}

/*========= End Home   =========*/



/*========= Start Not Found Data   =========*/

.sec-not-data {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-not-data .users {
  width: 90%;
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sec-not-data .users .user {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.sec-not-data .users .user:not(:last-child) {
  margin-bottom: 10px;
}

.sec-not-data .users .user .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--clr-gray-dark);
  flex-shrink: 0;
}

.sec-not-data .users .user .line {
  width: 80%;
  height: 10px;
  background-color: var(--clr-gray-dark);
}

.sec-not-data .users p {
  font-size: 17px;
  margin-top: 10px;
  font-weight: 500;
}

/*========= End Not Found Data  =========*/


/* Start loader */
.loader {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #0000;
  border-right-color: var(--clr-white);
  position: relative;
  animation: l24 1s infinite linear;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: inherit;
  animation: inherit;
  animation-duration: 2s;
}

.loader:after {
  animation-duration: 4s;
}

@keyframes l24 {
  100% {
    transform: rotate(1turn)
  }
}

/* End loader */

/* Start Sign */
/*========= Start forgot password  =========*/

.forgot-password {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.forgot-password form {
  width: 500px;
  max-width: calc(100% - 15px);
  background-color: var(--clr-white);
  padding: 25px 20px;
  border-radius: 20px;

}

.forgot-password form img {
  width: 200px;
  margin-inline: auto;
  display: block;
  margin-bottom: 10px;
}

.sign .right form h2,
.forgot-password form h2 {
  position: relative;
  display: inline-block;
  font-size: 22px;
  padding-block: 10px;
}



/*========= End forgot password  =========*/

/*========= Start Sign  =========*/
.sign {
  width: 100%;
  height: 100vh;
  display: flex;
}

.sign .left {
  width: 100%;
  height: 100%;
  background-color: var(--clr-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign .right {
  width: 700px;
  height: 100%;
  background-color: var(--clr-white);
  padding-inline: 10px;
  padding: env(15px);
}

.sign .left svg {
  width: 100% !important;
  max-width: 400px !important;
}

.sign .right form {
  margin-inline: auto;
  width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sign .right form .logo {
  width: 200px;
  height: 60px;
  margin: auto;
  display: block;
}

.sign .right form h2 {
  margin-top: 15px;
}

.forgot-password form .input,
.sign .right form .input {
  width: 100%;
  margin-top: 10px;
}

.forgot-password form .input label,
.sign .right form .input label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 14px;
}

.forgot-password form input,
.sign .right form .input input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--clr-gray-light);
  border-radius: 5px;
  transition: all .3s;
}

.sign .right form .input input:focus {
  border-color: var(--clr-primary);
}

.forgot-password form .input button,
.sign .right form .input button {
  width: 100%;
  padding-block: 10px;
  background-color: var(--clr-primary);
  box-shadow: 0 2px 10px var(--clr-primary-hv);
  color: var(--clr-white);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: all .3s;
}

.sign .right form .input button:hover {
  background-color: var(--clr-primary-hv);
}

.sign .right form .forgot {
  display: inline-block;
  margin-left: auto;
  font-size: 14px;
  margin-top: 10px;
}

.sign .right form .forgot:hover {
  text-decoration: underline;
}

.sign .btn-request-user {
  display: block;
  width: 100%;
  text-align: center;
  padding-block: 8px;
  margin-top: 15px;
  border: 1px solid var(--clr-primary);
  border-radius: 5px;
}

/*========= End Sign  =========*/


.forgot-password form .input button,
.sign .right form .input button {
  width: 100%;
  padding-block: 10px;
  background-color: var(--clr-primary);
  box-shadow: 0 2px 10px var(--clr-primary-hv);
  color: var(--clr-white);
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* End Sign */

/* Start Request Work */
.all_request_work {
  min-height: 100vh;
}

.request-work {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 20px;
}

.request-work>.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.request-work .logo img {
  width: 240px;
}

.request-work .form {
  margin-inline: auto;
  width: 100%;

}

.form_employees_edit,
.request-work form {
  width: 100%;
  background-color: var(--clr-white);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 5px 5px rgba(157, 157, 157, .05);
}

.form_employees_edit label[for="picture"],
.request-work form label[for="picture"] {
  width: 270px;
  aspect-ratio: 1;
  border: 2px dashed #ddd;
  border-radius: 10px;
  transition: .3s;
}

.form_employees_edit label[for="picture"] span,
.request-work form label[for="picture"] span {
  user-select: none;
}

.form_employees_edit label[for="picture"]:hover,
.request-work form label[for="picture"]:hover {
  border-color: var(--clr-primary);
}

.form_employees_edit .input label,
.request-work form .input label {
  font-size: 19px;
  font-weight: 600;
}

.form_employees_edit .input>div,
.request-work form .input>div {
  width: 100%;
}

.form_employees_edit :is(select, input, textarea),
.request-work form :is(select, input, textarea) {
  width: 100%;
  padding: 10px;
  font-size: 17px;
  font-weight: 500;
}

.form_employees_edit .input-accept,
.request-work form .input-accept {
  margin-block: 10px;
}

.form_employees_edit button[type="submit"],
.request-work form button[type="submit"] {
  min-width: 170px;
}

.edit_finger_print label {
  font-size: 17px;
}

.edit_finger_print input {
  width: 100%;
  padding: 10px;
}

.edit_finger_print button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  margin-top: 15px;
}

.form_employees_edit .input-accept input,
.request-work form .input-accept input {
  display: none;

}

body[dir="rtl"] .form_employees_edit .input-accept label,
body[dir="rtl"] .request-work form .input-accept label {
  position: relative;
  padding-right: 30px;
}

body[dir="rtl"] .form_employees_edit .input-accept label:before,
body[dir="rtl"] .request-work form .input-accept label:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: #f0f2f5;
  border: 1px solid var(--clr-gray-light);
  border-radius: 5px;
  right: 0;
  margin-top: 2.5px;
}

body[dir="ltr"] .form_employees_edit .input-accept label,
body[dir="ltr"] .request-work form .input-accept label {
  position: relative;
  padding-left: 30px;
}

body[dir="ltr"] .form_employees_edit .input-accept label:before,
body[dir="ltr"] .request-work form .input-accept label:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: #f0f2f5;
  border: 1px solid var(--clr-gray-light);
  border-radius: 5px;
  left: 0;
  margin-top: 2.5px;
}

.form_employees_edit .input-accept input:checked+label:before,
.request-work form .input-accept input:checked+label:before {
  background-color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
}

.request-work form .result {
  margin: 10px 0;
}

@media screen and (max-width: 720px) {
  .content_header {
    display: block !important;
    padding: 5px;
  }

  .body_profile {
    display: block !important;
  }

  .sign .left {
    display: none !important;
  }

  .sign .right {
    width: 100% !important;
  }

  .sign .right form {
    width: 70% !important;
  }

  .sign .right form>div {
    width: 100% !important;
  }

  .form_employees_edit .input.d-flex,
  .request-work form .input.d-flex {
    display: block !important;
  }

  .form_employees_edit .input.d-flex>div label[for="picture"],
  .request-work form .input.d-flex>div label[for="picture"] {
    margin-inline: auto !important;
  }

  .form_employees_edit button[type="submit"],
  .request-work form button[type="submit"] {
    min-width: 50%;
  }
}

/* End Request Work */



/* Start Header Page Home */
header .sec__left .logo img {
  width: 50px;

}

/* End Header Page Home */


/* Start Admin Area */
.admin_area {
  width: 100%;
  min-height: 100vh;
  background-color: #222;
}

.admin_area .dashboard_header {
  /* background-color: red; */
}

.admin_area .dashboard_header .sec_left .btn_menu {
  color: white;
  background: rgba(0, 0, 0, .8);
  transition: .05s linear;
}

.admin_area .dashboard_header .sec_left .btn_menu:hover {
  color: #333;
  background: #fff;
}

.admin_area .dashboard_header .sec_left a.logo {
  background: rgba(0, 0, 0, .6);
}

.admin_area .dashboard_header .sec_left a.logo img {
  height: 40px;
}

.admin_area .dashboard_header .sec_right>ul>li {
  position: relative;
}

.admin_area .dashboard_header .sec_right .avatar>a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.admin_area .dashboard_header .sec_right :is(.notification .notification_menu, .avatar .avatar_menu) {
  position: absolute;
  top: calc(100% + 5px);
  z-index: 99999;
  background-color: #fff;
  width: 300px;
  border-radius: 5px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
  display: none;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .header_notification {
  border-bottom: 1px solid #c7c7c7;
}

.table_time_work {
  width: 100%;
  border-collapse: collapse;
}

.table_time_work :is(td, th) {
  text-align: start;
  padding: 10px;
}

.table_time_work tr:nth-of-type(odd) {
  background-color: #f2f2f2;
}

.table_time_work th {
  width: 150px;
  background-color: var(--clr-primary);
  color: #fff;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items {
  min-height: 120px;
  max-height: 400px;
  overflow-y: auto;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items::-webkit-scrollbar {
  width: 5px;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items .item {
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items .item p {
  font-size: 12px;
}

.admin_area .dashboard_header .sec_right .notification .notification_menu .items .item small {
  font-size: 12px;
  color: rgba(100, 100, 100, 0.6);
}

.admin_area .dashboard_header .sec_right :is(.notification .notification_menu.open, .avatar .avatar_menu.open) {
  display: block;
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu .profile {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px;
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu .profile .img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(116, 116, 116, 0.4);
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu .profile .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu .profile>a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #222;
  border-radius: 40px;
  border: 1px solid #b2b2b2;
  font-weight: 700;
  padding-block: 5px;
  padding-inline: 20px;
  margin-top: 10px;
  font-size: 14px;
  transition: .3s ease-in-out;
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu .profile>a:hover {
  background-color: #ededed;
  border-color: #ededed;
}

.admin_area .dashboard_header .sec_right .avatar .avatar_menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding-inline: 20px;
  padding-block: 7px;
  text-align: start;
  border-top: 1px solid #b8b8b877;
  color: var(--clr-primary);
  font-weight: 600;
  font-size: 15px;
}

.admin_area .dashboard_header .sec_right .avatar>a img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.admin_area .container_content {
  min-height: calc(100vh - 70px);
  overflow: hidden;
}

.admin_area .container_content .navigation {
  background-color: var(--clr-primary);
  width: 350px;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.company-build {
  width: 90%;
  padding: 5px;
  margin-inline: auto;
  border-radius: 10px;
}

.company-build img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
}

.company-build .information-company h3 {
  font-size: 19px;
  line-height: 1;
}



.admin_area .container_content .navigation .navigation-header {
  background: rgba(0, 0, 0, .4);
}

.admin_area .container_content .navigation .navigation-header .btn_close {
  font-size: 17px;
}

.admin_area .container_content .navigation nav>ul {
  height: calc(100vh - 70px);
  overflow-y: auto;
}

.admin_area .container_content .content::-webkit-scrollbar,
.admin_area .container_content .navigation nav>ul::-webkit-scrollbar {
  direction: rtl;
  width: 0px;
}

.admin_area .container_content .content:hover::-webkit-scrollbar,
.admin_area .container_content .navigation:hover::-webkit-scrollbar {
  width: 8px;
}

.admin_area .container_content .content:hover::-webkit-scrollbar-thumb,
.admin_area .container_content .navigation:hover::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary) !important;
}

.admin_area .container_content .content::-webkit-scrollbar-thumb,
.admin_area .container_content .navigation nav>ul::-webkit-scrollbar-thumb {
  background-color: rgba(214, 214, 214, 0) !important;
  border-radius: 50px;
}

.admin_area .container_content .navigation nav>ul>li>a {
  position: relative;
  padding-block: 10px;
  padding-inline: 25px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: .08s linear;
}

.admin_area .container_content .navigation nav ul li a.active::before {
  content: "";
  position: absolute;
  border: 15px solid transparent;
}

.admin_area .container_content .navigation nav ul li a i {
  font-size: 24px;
}

.admin_area .container_content .navigation nav ul li a i.add {
  font-size: 22px;
  transform: translateX(10px);
  transition: .3s;
}

.admin_area .container_content .navigation nav ul li a i.add.closing {
  transform: translateX(10px) rotate(360deg);
}

.admin_area .container_content .navigation nav ul li ul {
  visibility: hidden;
  transition: 2s;
}

.admin_area .container_content .navigation nav ul li.open ul {
  visibility: visible;
}

.admin_area .container_content .navigation nav ul li a span {
  font-size: 15px;
}

.admin_area .container_content .navigation nav ul li a:is(.active, :hover) {
  background: rgba(255, 255, 255, 0.184);
  color: white;
}

.admin_area .container_content .navigation nav ul li ul li a {
  position: relative;
  padding-inline: 25px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  visibility: hidden;
  height: 0px;
  opacity: 0;
  transition: .08s linear;
}

.admin_area .container_content .navigation nav ul li.open ul li a {
  visibility: visible;
  display: flex;
  height: fit-content;
  opacity: 1;
  padding-block: 10px;
}

.admin_area .container_content .content {
  background-color: #f4f5fd;
  width: 100% !important;
  border-radius: 10px;
  padding-inline-end: 30px;
  margin-block-end: 10px;
  padding: 15px;
  overflow-y: auto !important;
  height: calc(100vh - 90px);
  overflow: hidden;
}

.admin_area .container_content .content .boxs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.admin_area .container_content .content .boxs .box {
  position: relative;
  box-shadow: 0 0 10px #0000000a;
  border: 1px solid #ddd;
  padding-bottom: 25px;
}

.admin_area .container_content .content .boxs .box .icon {
  width: 45px;
  height: 45px;
  background: var(--clr-primary);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.admin_area .container_content .content .boxs .box .icon i {
  font-size: 30px;
}

.admin_area .container_content .content .boxs .box .icon.icon1 {
  background: rgb(255, 0, 98);
}

.admin_area .container_content .content .boxs .box .icon.icon2 {
  background: rgb(21, 21, 231);
}

.admin_area .container_content .content .boxs .box .icon.icon3 {
  background: rgb(21, 231, 189);
}

.admin_area .container_content .content .boxs .box .icon.icon4 {
  background: rgb(12, 226, 62);
}

.admin_area .container_content .content .boxs .box .icon.icon5 {
  background: rgb(21, 116, 231);
}

.admin_area .container_content .content .boxs .box .icon.icon6 {
  background: rgb(231, 203, 21);
}

.admin_area .container_content .content .boxs .box .icon.icon7 {
  background: rgb(21, 231, 189);
}

.admin_area .container_content .content .boxs .box .icon.icon8 {
  background: rgb(255, 0, 98);
}

.admin_area .container_content .content .boxs .box .icon.icon9 {
  background: rgb(231, 21, 21);
}

.admin_area .container_content .content .boxs .box .icon.icon10 {
  background: rgb(12, 226, 62);
}

.admin_area .container_content .content .boxs .box .icon.icon11 {
  background: rgb(21, 231, 144);
}

.admin_area .container_content .content .boxs .box .icon.icon12 {
  background: rgb(21, 21, 231);
}

.admin_area .container_content .content .boxs .box .txt h2 {
  font-size: 15px;
  font-weight: 700;
}

.admin_area .sec-content {
  position: absolute !important;
  z-index: 999;
  width: 95%;
  min-height: 400;
  left: 50%;
  transform: translateX(-50%);
}

.admin_area .sec-content .sec_header {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.admin_area .sec-content .sec_header .btn-close {
  background-color: #eae9e9;
  width: 35px;
  height: 35px;
  border-radius: 5px;
  color: #333;
  font-size: 22px;
  font-weight: 600;
}

.admin_area .sec-content .sec_header h2 {
  font-size: 22px;
}

.admin_area .filter .input:not(:has(button)) {
  width: 100%;
}

.admin_area .filter .input label {
  font-size: 15px;
}

.admin_area .filter .input input,
.admin_area .filter .input select {
  width: 100%;
  padding: 5px;
}

.admin_area .btn-views {
  margin-top: 10px;
  display: inline-block;
}

.admin_area .btn-views label {
  color: #333333;
  width: 100%;
  display: inline-block;
}

.admin_area .btn-views select {
  font-size: 16px;
}

.admin_area .table {
  margin-top: 20px;
  overflow: auto !important;
}

.admin_area .table .input label {
  font-size: 19px;
  display: inline-block;
  margin-bottom: 5px;
}

.admin_area .table .input select,
.admin_area .table .input input {
  width: 100%;
  padding: 10px;
}

.admin_area .table::-webkit-scrollbar {
  height: 10px;
  width: 0px;
  /* تحديد العرض */
}
#body-secWorkTime table,
.admin_area table {
  width: 100%;
  border-collapse: collapse;
}
#body-secWorkTime table th,
.admin_area table th {
  color: #fff;
}
#body-secWorkTime table :is(td, th),
.admin_area table :is(td, th) {
  padding: 10px;
  text-align: start;
  text-wrap: nowrap;
}

#body-secWorkTime table th:has(input[type="checkbox"]),
.admin_area table th:has(input[type="checkbox"]) {
  width: 50px;
  height: 50px;
}

/* تغيير حجم الـ checkbox */
input[type="checkbox"] {
  width: 0px;
  /* تحديد العرض */
  height: 0px;
  /* تحديد الارتفاع */
}

/* إذا كنت تريد إضافة تأثيرات أخرى */
input[type="checkbox"]::before {
  content: '';
  /* إضافة محتوى قبل الـ checkbox إذا لزم الأمر */
  display: inline-block;
  width: 20px;
  /* تأكيد عرض التأثير */
  height: 20px;
  /* تأكيد ارتفاع التأثير */
  background: #fff;
  /* لون خلفية التأثير */
  border: 2px solid #ddd;
  /* حدود الـ checkbox */
  border-radius: 5px;
  /* جعل الزوايا مدورة */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /* إضافة ظل للـ checkbox */
  cursor: pointer;
  /* تغيير المؤشر عند المرور على الـ checkbox */
}

/* تغيير حالة الـ checkbox عند تحديده */
input[type="checkbox"]:checked::before {
  background: #007bff;
  /* لون الخلفية عند التحديد */
  border-color: #007bff;
  /* لون الحدود عند التحديد */
  content: '✔';
  /* وضع علامة صح عند التحديد */
  color: #fff;
  /* لون النص (العلامة) */
  text-align: center;
  /* توسيط النص */
  line-height: 20px;
  /* محاذاة النص عمودياً */
}
#body-secWorkTime table thead,
.admin_area table thead {
  position: sticky;
  background-color: var(--clr-primary);
}
#body-secWorkTime table tbody tr:nth-last-of-type(odd),
.admin_area table tbody tr:nth-last-of-type(odd) {
  background-color: #eee;
}

.admin_area .filter .input button {
  background-color: var(--clr-primary);
  border: none;
  width: 40px;
  height: 40px;
  margin-top: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.admin_area .actions .btn {
  background-color: none;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
}

.green {
  background-color: rgb(12, 226, 62);
}

.green-all {
  background-color: rgb(2, 181, 10);
}

.yellow {
  background-color: rgb(255, 204, 0);
}

.yellow-all {
  background-color: rgb(233, 200, 65);
}

.red {
  background-color: rgb(220, 53, 69);
}

.red-all {
  background-color: rgb(203, 8, 27);
}

.admin_area .container_content .content .boxs .box .footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.admin_area .container_content .content .boxs .box .footer span {
  font-size: 14px;
}

.admin_area .container_content .content .boxs .box .footer {
  border-top: 1px solid var(--clr-primary);
  /* background-color: var(--clr-primary);
  color: #fff; */
}





.w0h0 {
  position: absolute;
  width: 0px !important;
  height: 0px !important;
  padding: 0 !important;

}

.input-file input {
  width: 100%;
}

.upload-bg {
  background-color: #e5e5e5;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  margin-block: 10px;
}

.upload-bg img {
  height: 50px;
}

.divClr {
  width: 100%;
  background-color: #3333;
  height: 40px;
  display: flex;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(145, 145, 145, 0.226);
  cursor: pointer;
}















/* End Admin Area */












@media screen and (max-width: 1150px) {
  .admin_area .container_content .content .boxs {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media screen and (max-width: 950px) {
  .admin_area .container_content .content .boxs {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-content {
    display: block !important;
  }
  .home-content .boxs{
    flex-direction: column;
  }

  .home-content>.left {
    width: 100%;
    margin-bottom: 10px;
  }

  .home-content .right .header-write-post .avatar {
    width: 40px;
    height: 40px;
  }

  .home-content .right .body-write-post {
    width: calc(100% - 40px);
  }

  .home-content .right .write-post :is(input[type="submit"], input[type="button"], #add_answer) {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .home-content .right .write-post textarea::placeholder {
    font-size: 11px !important;
  }

  .home-content .right .write-post .btns svg {
    width: 15px !important;
    height: 15px !important;
  }
}

@media screen and (max-width: 770px) {
  body>.home .container {
    width: 90% !important;
  }

  .logo {
    display: none;
  }

  body>.home .container>.boxs {
    grid-template-columns: repeat(1, 1fr);
  }

  .admin_area .dashboard_header .sec_left .btn_menu.d-none {
    display: flex !important;
  }

  .admin_area .container_content .navigation {
    background-color: var(--clr-primary) !important;
  }

  .navigation {
    width: 100vh;
    height: 50%;
    position: fixed;
    top: 0;
    z-index: 9999;
  }

  .navigation .navigation-header {
    display: flex !important;
    padding-right: 15px;
  }

  .admin_area .container_content .navigation nav ul li a i.active {
    margin-left: 100px;
  }

  .admin_area .container_content .navigation nav ul li a.active::before {}

  .admin_area .container_content .content {
    width: 100% !important;
  }

  .admin_area .container_content .content .boxs {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Start Home Auth */
.boxs-ERP  a.box{
    width: 250px;
    aspect-ratio: 1/1;
    background-color: #fff;
    box-shadow: 0 5px 20px #00000011;
    border-radius: 10px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: all .3s;
    flex-direction:column;
}
.boxs-ERP  a.box img {
    width: 120px;
    aspect-ratio: 1/1;
    margin-bottom: 10px;
}
.boxs-ERP  a.box:hover {
    transform: scale(1.05);
}
/* End Home Auth */