/* Start Global Rules */
@font-face {
  font-family: "Felix Titling";
  src: url(../webfonts/felix.ttf);
}

@font-face {
  font-family: "Sync";
  src: url(../webfonts/Syne-VariableFont_wght.ttf);
}

/* Scroll Style */

:root {
  /* #0057cd; */
  --main-color: #ad6420;
  --main2-color: #f39237;
  --light-color: #ffecda;
  --alt-color: #332f2a;
  --second-color: #fffcf9;
  --logo-height: 60px;
  --sidebar-width: 60px;
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.att-table::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.cell-cont::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #cdcdcd;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fffefd;
}

::selection {
  background-color: var(--alt-color);
  color: #ffff;
}

body {
  font-family: "Cairo", "Poppins", sans-serif;
  background-color: var(--fc-list-event-hover-bg-color);
}

div {
  cursor: default;
}

a {
  text-decoration: none;
  color: var(--alt-color);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-transform: uppercase;
}

li {
  display: flex;
  align-items: center;
  position: relative;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

hr.head-line {
  margin: 10px 0;
  width: 50px;
  height: 2px;
  background: radial-gradient(var(--main-color), transparent);
  transition: 0.5s;
}

.headso:hover hr.head-line {
  background-color: var(--main-color);
  width: 150px;
}

p.navigator {
  margin: 0;
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.navigator a {
  color: var(--main-color);
}

/* End Global Rules */
/* Start Footer */
.copyright-section {
  position: fixed;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  font-size: 12px;
  color: var(--main-color);
  background: linear-gradient(180deg, transparent, #fff);
  padding: 7px;
  border-radius: 5px 0px 0px 0px;
  width: 100%;
  text-align: center;
}

.copyright-section img {
  height: 15px;
  margin-bottom: -3px;
}

/* End Footer */
.softwares {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  margin-top: 150px;
}

.software-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 15px;
  width: 80px;
  height: 80px;
  box-shadow: -3px 2px 7px 0px rgb(0 0 0 / 22%);
  transition: 0.3s;
  border-bottom: 2px solid rgb(0 0 0 / 12%);
  border-top: 2px solid rgb(255 255 255 / 42%);
}

.rhead {
  display: flex;
  align-items: center;
  justify-content: center;
}

.log-btn {
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  background: transparent;
}

.log-btn svg {
  height: 100%;
  width: 100%;
}

a.software-bx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

a.software-bx * {
  cursor: pointer;
}

.software-bx:hover .software-icon {
  transform: scale(1.03) rotate(2deg);
}

.software-icon svg {
  width: auto;
}

.software-name {
  font-size: 14px;
  color: var(--alt-color);
}

header {
  height: var(--logo-height);
  margin-bottom: 40px;
  border-bottom: 1px solid rgb(207, 207, 207);
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 14;
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fff;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: var(--logo-height);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo img {
  width: 35px;
}

.logo .slogan {
  font-size: 30px;
  color: var(--alt-color);
  font-weight: 700;
  margin-top: 4px;
  font-family: "sync";
}

.rhead .profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  width: 350px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rhead .profile .profile-img {
  height: 40px;
  width: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}

.rhead .profile .profile-img img {
  height: 100%;
  width: auto;
  cursor: pointer;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 15px;
  cursor: pointer;
}

.profile-info h5 {
  font-weight: 500;
  font-size: 14px;
}

.profile-info p,
.profile-info h5 {
  margin: 0;
  color: var(--alt-color);
}

.profile-info p {
  font-weight: 400;
  font-size: 12px;
  margin-top: 3px;
}

.rhead .arrow img {
  width: 20px;
  height: 20px;
  margin-left: 30px;
  cursor: pointer;
}

.profile ul {
  position: absolute;
  top: 50px;
  flex-direction: column;
  background: #fff;
  height: auto;
  z-index: 99;
  padding: 5px 20px 10px;
  width: 100%;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 1px solid #cfcfcf;
  right: -5px;
  border-top: 0;
  background-image: url(../images/bg.webp);
  background-position: center;
}

.profile ul li {
  margin: 5px 0;
  align-self: flex-start;
  display: flex;
  font-size: 14px;
  text-transform: capitalize;
  width: 100%;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f8;
  color: var(--alt-color);
  transition: 0.3s;
}

.profile ul li a {
  transition: 0.2s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.profile ul li a i {
  margin-right: 12px;
}

.profile ul li a:hover {
  color: var(--main-color);
}

.profile ul li:hover {
  border-bottom: 1px solid var(--main-color);
  padding: 5px;
}

.login-form {
  height: 100vh;
  display: flex;
}

.contain {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.login-form .contain {
  justify-content: center;
  align-items: center;
}

form.login-form {
  position: relative;
  background: #fff;
  padding: 30px 20px 10px;
  border-radius: 5px;
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
}

.login-form input {
  outline: 0;
  border: 1px solid #f1f5f8;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin: 10px 0px;
  font-size: 14px;
  color: var(--alt-color);
  transition: 0.2s;
  background-color: #fff;
}

.login-form img {
  height: 85px;
  width: auto;
}

.login-form h2 {
  font-weight: 500;
  color: var(--alt-color);
  font-size: 24px;
}

span.log-error {
  font-size: 12px;
  color: #e54461;
}

.input-box {
  position: relative;
  width: 100%;
}

.login-form input {
  outline: 0;
  border: 1px solid #f1f5f8;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin: 10px 0px;
  font-size: 14px;
  color: var(--alt-color);
  transition: 0.2s;
  background-color: #fff;
}

.input-box span {
  position: absolute;
  left: 0;
  padding: 20px;
  pointer-events: none;
  color: var(--alt-color);
  text-transform: uppercase;
  transition: 0.3s;
  font-size: 14px;
}

.login-form input[type="submit"] {
  background-color: var(--main-color);
  color: #ffff;
  cursor: pointer;
}

.input-box input:valid~span,
.input-box input:focus~span {
  color: var(--main-color);
  transform: translateX(10px) translateY(3px);
  font-size: 0.5em;
  background-color: #fff;
  padding: 2px 20px;
  border-left: 1px solid var(--main-color);
  border-right: 1px solid var(--main-color);
  letter-spacing: 0.2em;
}

.login-form input:focus {
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

a.software-bx img {
  width: 100%;
  height: auto;
}

.not_active * {
  cursor: no-drop !important;
  opacity: 0.5;
}

/* Start Global Rules */
@font-face {
  font-family: "Felix Titling";
  src: url(../webfonts/felix.ttf);
}

@font-face {
  font-family: "Sync";
  src: url(../webfonts/Syne-VariableFont_wght.ttf);
}

/* Scroll Style */

/* Start Loading */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fffefd;
  display: none;
}

@keyframes ldio-vc0kxh2h6dg {
  0% {
    top: 85.60000000000001px;
    left: 85.60000000000001px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 17.12px;
    left: 17.12px;
    width: 136.96px;
    height: 136.96px;
    opacity: 0;
  }
}

.ldio-vc0kxh2h6dg div {
  position: absolute;
  border-width: 21.400000000000002px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-vc0kxh2h6dg 1.6949152542372883s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.ldio-vc0kxh2h6dg div:nth-child(1) {
  border-color: var(--main-color);
  animation-delay: 0s;
}

.ldio-vc0kxh2h6dg div:nth-child(2) {
  border-color: var(--main2-color);
  animation-delay: -0.8474576271186441s;
}

.loadingio-spinner-ripple-0qoqqdnrmli {
  width: 214px;
  height: 214px;
  display: inline-block;
  overflow: hidden;
  background: #f1f2f3;
}

#mysvg {
  fill-opacity: 0;
  z-index: 99;
  margin: 100px;
  position: relative;
  stroke-linecap: square;
  transition: fill-opacity 0.8s;
}

#mysvg.finished {
  fill-opacity: 1;
}

.ldio-vc0kxh2h6dg {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}

.ldio-vc0kxh2h6dg div {
  box-sizing: content-box;
}

/* End Loading */

.contain {
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fffefd;
}

/* width */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.att-table::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.cell-cont::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #cdcdcd;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fffefd;
}

::selection {
  background-color: var(--alt-color);
  color: #ffff;
}

body {
  font-family: "Cairo", "Poppins", sans-serif;
  background-color: var(--fc-list-event-hover-bg-color);
}

div {
  cursor: default;
}

a {
  text-decoration: none;
  color: var(--alt-color);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-transform: uppercase;
}

li {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

hr.head-line {
  margin: 10px 0;
  width: 50px;
  height: 1px;
  background: var(--main-color);
  transition: 0.5s;
  border-radius: 66px;
  margin-left: 30px;
}

.headso:hover hr.head-line {
  background-color: var(--main-color);
  width: 150px;
  margin-left: 0;
}

p.navigator {
  margin: 0;
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.navigator a {
  color: var(--main-color);
}

/* End Global Rules */

/* Start Header */

.contain {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.lside {
  width: var(--sidebar-width);
  height: 100%;
  border-right: 0;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  background-image: url(../images/bg.webp);
  background-position: center;
}

.logs-part {
  display: flex;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden;
  width: 0;
  transition: 0.5s;
}

.logs-section {
  width: 40%;
  background: #fff;
  border-left: 1px solid #cdcdcd;
  padding: 20px;
  transition: 0.3s;
  overflow: hidden;
  box-shadow: -2px 0px 10px rgb(0 0 0 / 8%);
}

.logs-section h4 {
  margin: 0;
  background: #f6f9fc;
  font-weight: 500;
  font-size: 14px;
  color: var(--main-color);
  outline: 20px solid #f6f9fc;
  margin-bottom: 40px;
}

.listing-logs {
  height: 90vh;
  padding: 10px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}

.listing-logs ul::after,
.bk ul::after {
  content: "";
  position: absolute;
  top: 0;
  left: 63px;
  width: 4px;
  height: 100%;
  background-color: #d4d0d0;
}

.listing-logs ul:last-child:after,
.bk ul:last-child::after {
  height: 90%;
}

.listing-logs ul,
.bk ul {
  height: auto;
  position: relative;
  padding: 0 0 20px 0;
}

.listing-logs ul:last-child,
.bk ul:last-child {
  padding: 0;
}

.listing-logs .date,
.bk .date {
  color: var(--main-color);
  background: #f0f0f0;
  border-radius: 50px;
  box-shadow: 0 0 1px 1px rgb(0 0 0 / 10%) inset;
  width: 135px;
  padding: 10px 20px;
  text-align: center;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
}

.listing-logs ul li,
.bk ul li {
  margin-left: 40px;
  padding: 15px 0 0;
}

.logs-contain {
  border: 1px solid #cdcdcd;
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  font-size: 12px;
  text-transform: none;
  width: calc(100% - 70px);
  position: relative;
  color: var(--main-color);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.lower-log span i {
  color: #909090;
}

.logs-contain::before {
  content: "";
  position: absolute;
  border: 7px solid;
  border-color: transparent var(--main-color) transparent transparent;
  left: -14px;
  top: 7px;
  z-index: 3;
}

.logs-contain::after {
  content: "";
  position: absolute;
  border: 7px solid;
  border-color: transparent #cdcdcd transparent transparent;
  left: -15px;
  top: 7px;
  z-index: 2;
}

.logs-contain .upper-log {
  padding-bottom: 7px;
}

.listing-logs ul li>i,
.bk ul li>i {
  width: 50px;
  height: 50px;
  color: #fff;
  background: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 3px solid #d4d0d0;
  z-index: 3;
  margin-right: 20px;
}

.listing-logs ul li>i.fa-table,
.bk ul li>i.fa-table,
.listing-logs ul li>i.fa-house-circle-exclamation,
.bk ul li>i.fa-house-circle-exclamation {
  background: #db4a4a !important;
}

.listing-logs ul li>i.fa-user-plus,
.bk ul li>i.fa-user-plus,
.listing-logs ul li>i.fa-user-pen,
.bk ul li>i.fa-user-pen,
.listing-logs ul li>i.fa-user-xmark,
.bk ul li>i.fa-user-xmark,
.listing-logs ul li>i.fa-user-check,
.bk ul li>i.fa-user-check {
  background: #673ab7 !important;
}

.listing-logs ul li>i.fa-lock,
.bk ul li>i.fa-lock {
  background: #2196f3 !important;
}

.listing-logs ul li>i.fa-file-pen,
.bk ul li>i.fa-file-pen,
.listing-logs ul li>i.fa-trash,
.bk ul li>i.fa-trash,
.listing-logs ul li>i.fa-plus,
.bk ul li>i.fa-plus {
  background: #009688 !important;
}

fa-plus .lside .sidebar ul li a span img {
  width: 20px;
  margin-right: 10px;
}

.lside .sidebar>ul {
  margin-top: 20px;

}

.lside .sidebar>ul>li:last-child {
  padding-bottom: 60px;
}

.lside .logo {
  height: var(--logo-height);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  position: relative;
}

.lside .logo span {
  position: absolute;
  bottom: 0;
  right: 50%;
  font-size: 10px;
  transform: translateX(50%);
  color: var(--alt-color);
  opacity: 0.8;
  width: 100%;
  text-align: center;
}

.lside .logo .slogan {
  font-size: 30px;
  color: var(--alt-color);
  font-weight: 700;
  margin-top: 4px;
  font-family: "sync";
  display: none;
}

.lside .logo img {
  width: 35px;
}

.lside .sidebar ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  cursor: default;
}

.lside .sidebar {
  height: calc(100% - var(--logo-height));
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lside .sidebar::-webkit-scrollbar {
  display: none;
}

.lside .sidebar ul li .icon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.s-menus {
  justify-content: flex-start !important;
  padding-left: 15px;
}

.lside .sidebar ul li .active-menu {
  color: var(--alt-color);
  background: url(../images/bg.webp);
  background-size: cover;
  background-color: #fff;
  border: 2px solid rgb(207, 207, 207);
  border-right: 0;
  width: calc(100% + 2px);
  color: var(--main-color);
}

/* .lside .sidebar ul li .active-menu:after {
  content: "";
  position: absolute;
  top: -10px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 0 0px 8px 0;
  border-right: 2px solid #cfcfcfcf;
  border-bottom: 2px solid #cfcfcfcf;
  box-shadow: 4px 4px 0 #f9f8f7;
} */

/* .lside .sidebar ul li .active-menu:before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -2px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 0 8px 0px 0;
  border-right: 2px solid #cfcfcfcf;
  border-top: 2px solid #cfcfcfcf;
  box-shadow: 4px -4px 0 #f9f8f7;
} */

.sidebar ul li.active {
  position: relative;
  left: 0px;
}

.lside .sidebar ul>li:hover>a {
  padding-left: 30px !important;
  background: #ebebeb;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 21%);
}

.lside .sidebar ul {
  width: 100%;
  text-transform: capitalize;
}

.none-file {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.lside .sidebar ul li {
  width: 100%;
  margin: 0;
  flex-direction: column;
  transition: 0.2s;
  position: relative;
  cursor: pointer !important;
}

ul.drop-down-menu {
  background-color: #fff;
}

.lside .sidebar ul li a {
  cursor: pointer;
}

.lside .sidebar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 14px;
  padding: 10px 0;
  transition: 0.2s;
  color: var(--alt-color);
  border: 1px solid transparent;
  border-right: 0;
}

.lside .sidebar ul li a span span {
  margin-left: 15px;
}

.disable_a {
  pointer-events: none;
}

.lside .sidebar ul li .drop-down {
  width: 100%;
  cursor: pointer !important;
  position: relative;
}

.lside .sidebar ul li a span {
  width: 165px;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
}

.lside .sidebar ul li a span.arrow {
  width: 15px;
  overflow: hidden;
  position: absolute;
  right: 15px;
  top: 10px;
  transition: 0.1s;
  justify-content: center !important;
}

.lside .sidebar ul li a span.arrow img {
  width: 100%;
  transition: 0.2s;
}

.rside {
  width: calc(100vw - 60px - 5px);
  margin-left: 60px;
  transition: 0.5s;
}

.header {
  background-image: url(../images/bg.webp);
  background-position: center;
}

.header .top,
.header .mid,
.header .bottom {
  width: 100%;
  height: 3px;
  background-color: var(--alt-color);
  border: 1px solid var(--alt-color);
  border-radius: 4px;
  opacity: 1;
  transition: 0.2s;
  cursor: pointer;
}

.profile ul li a i {
  margin-right: 12px;
}

.body {
  margin-top: 80px;
}

.menu-open {
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  transition: var(--main-transition);
  cursor: pointer;
  margin-right: 60px;
  margin-left: 20px;
}

.top {
  top: 1px;
  position: absolute;
  transform: rotate(0deg);
}

.header .mid {
  opacity: 1;
}

.bottom {
  bottom: 0;
  position: absolute;
  transform: rotate(0deg);
}

.header {
  display: flex;
  justify-content: flex-end;
  height: var(--logo-height);
  align-items: center;
  background-color: #fff;
  margin-bottom: 40px;
  border-bottom: 1px solid rgb(207, 207, 207);
  position: fixed;
  width: calc(100vw - var(--sidebar-width));
  top: 0;
  right: 0;
  z-index: 14;
  transition: 0.5s;
}

.header .lhead {
  align-items: center;
  position: fixed;
  left: 220px;
}

.rside .header .rhead form input[type="text"] {
  padding: 10px 50px 10px 20px;
  width: 600px;
  outline: 0;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  color: var(--alt-color);
  border: 1px solid #dedede;
  background-image: url(../images/bg.webp);
  background-position: center;
}

.rside .header .rhead form {
  position: relative;
  display: none;
}

.profile ul {
  position: absolute;
  top: 49px;
  flex-direction: column;
  background: #fff;
  height: auto;
  z-index: 99;
  padding: 5px 20px 10px;
  width: 100%;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 0px solid #cfcfcf;
  right: -5px;
  border-top: 0;
  background-image: url(../images/bg.webp);
  background-position: center;
  height: 0px;
  padding: 0px;
  overflow: hidden;
  transition: 0.3s;
}

.login-form {
  height: 100vh;
  display: flex;
}

.profile ul li a:hover {
  color: var(--main-color);
}

.profile ul li:hover {
  border-bottom: 1px solid var(--main-color);
  padding: 5px;
}

.profile ul li {
  margin: 5px 0;
  align-self: flex-start;
  display: flex;
  font-size: 14px;
  text-transform: capitalize;
  width: 100%;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f8;
  color: var(--alt-color);
  transition: 0.3s;
}

.profile ul li a {
  transition: 0.2s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.profile ul li a img {
  height: 16px;
  margin-right: 10px;
}

.drop-down-menu li {
  margin: 0 !important;
}

ul.drop-down-menu {
  height: 0;
  overflow: hidden;
  transition: 0.3s;
  z-index: 3;
  box-shadow: inset 0px 11px 15px -12px rgb(0 0 0 / 30%),
    inset 0px -11px 20px -15px rgb(0 0 0 / 30%);
  background-image: url(../images/bg.webp);
  background-position: center;
}

.rside .header .rhead form input[type="submit"] {
  position: absolute;
  right: 10px;
  top: 25%;
  border: 0;
  outline: 0;
  background-image: url(../images/search.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-color: transparent;
}

.rhead {
  display: flex;
  justify-content: center;
  align-items: center;
}

.new::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: #fecb40;
  border-radius: 50%;
}

.rhead .profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  width: 350px;
  margin-right: 30px;
}

.rhead .profile .profile-img {
  height: 40px;
  width: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}

.rhead .profile .profile-img img {
  height: 100%;
  width: auto;
  cursor: pointer;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 15px;
  cursor: pointer;
}

.profile-info p,
.profile-info h5 {
  margin: 0;
  color: var(--alt-color);
}

.profile-info h5 {
  font-weight: 500;
  font-size: 14px;
}

.profile-info p {
  font-weight: 400;
  font-size: 12px;
  margin-top: 3px;
}

.rhead .arrow img {
  width: 20px;
  height: 20px;
  margin-left: 30px;
  cursor: pointer;
}

/* End Header */

/* Start Attendance Table */
div.limit {
  position: absolute;
  bottom: 50px;
  font-size: 10px;
  color: #e54461;
  font-weight: 400;
}

.att-table {
  margin: auto;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  max-height: calc(100vh - var(--logo-height) - 250px);
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  cursor: grab;
  overflow: auto;
  transition: 0.2s;
  scroll-behavior: smooth;
}

.att-table:active {
  cursor: grabbing;
}

.lower-section h4 {
  font-size: 20px;
  color: var(--alt-color);
  margin: 0 0 15px;
}

.prof-choose .naming {
  height: 100%;
  margin: 0;
  font-size: 14px;
  border: 0;
  outline: 0;
  padding: 0 20px;
  background: #f1f5f8;
  border-radius: 0 5px 5px 0;
  width: 400px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.att-section {
  background: white;
  position: relative;
  padding: 30px 50px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 1px solid #cfcfcf;
}

.att-section form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input#not_current {
  margin: 0 10px;
}

.att-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.att-part {
  margin: 0px 30px;
}

.att-part h3 {
  color: var(--alt-color);
  font-size: 32px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
}

.att-part input[type="month"] {
  outline: 0;
  padding: 5px 20px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--alt-color);
  height: 40px;
  position: relative;
  border: 1px solid #ebebeb;
}

.att-part input[type="submit"] {
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--main-color);
  margin-left: 10px;
  transition: 0.4s;
}

.att-part input[type="month"]::-webkit-calendar-picker-indicator {
  background-color: transparent;
  border-radius: 5px;
  cursor: pointer;
}

.lower-section {
  background: white;
  position: relative;
  padding: 30px 50px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 1px solid #cfcfcf;
  margin-top: 25px;
  width: 50%;
  height: 100%;
}

.lower-section .canvas-container {
  width: 95%;
  height: 495px;
}

.att-part select {
  cursor: pointer;
}

.att-part select * {
  color: var(--alt-color);
  background-color: #f1f5f8;
}

select {
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  cursor: pointer;
}

select:focus {
  background-image: linear-gradient(45deg,
      var(--main-color) 50%,
      transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--main-color) 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

.lowing {
  display: flex;
  gap: 25px;
}

.att-data .prof-choose .prof-img {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.prof-choose {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 40px;
}

input.prof-name {
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.att-data .prof-img img {
  height: 100%;
  cursor: pointer;
  width: auto;
}

input.prof-name {
  height: 100%;
  margin: 0;
  font-size: 14px;
  border: 0;
  outline: 0;
  padding: 20px;
  background: #f1f5f8;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  width: 400px;
}

.prof-choose ul {
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  height: auto;
  background: #f1f5f8;
  border-radius: 10px;
  width: 70%;
  align-items: flex-start;
  box-shadow: 0 3px 0px 0px rgb(167 214 250);
}

.prof-choose ul li:first-child {
  padding: 15px 15px 0 15px;
}

.prof-choose ul li:last-child {
  padding: 0 15px 15px 15px;
}

.prof-choose ul li {
  width: 100%;
  cursor: pointer;
  padding: 0 15px;
}

.prof-choose ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px 0;
  background-color: white;
  font-size: 14px;
  text-transform: capitalize;
  width: 100%;
  border-radius: 5px;
  transition: 0.2s;
}

.prof-choose ul li a:hover {
  background-color: #f9f9f9;
}

ul li .prof-name {
  margin-left: 10px;
  cursor: pointer;
}

.prof-choose button {
  border: 0;
  outline: 0;
  margin-left: 20px;
  height: 100%;
  padding: 5px 15px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prof-choose button:hover img {
  animation: rnl 0.5s infinite;
}

@keyframes rnl {
  0% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0px);
  }
}

button#attend-btn {
  background-color: #57bc90;
  color: #fff;
}

button#leave-btn {
  background-color: #e54461;
  color: #fff;
}

.prof-choose button img {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  transition: 0.2s;
}

div#attend-tap,
div#leave-tap,
div#vacation-tap {
  width: 100vw;
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  display: none;
}

.attend-info,
.leave-info,
.vacation-info {
  background-color: #fff;
  width: 700px;
  height: auto;
  padding: 20px 30px;
  color: var(--alt-color);
  border-radius: 10px;
  position: relative;
  z-index: 999;
}

.attend-info h4,
.leave-info h4,
.vacation-info h4 {
  margin: 4px 0;
  font-weight: 600;
}

.attend-info p,
.leave-info p,
.vacation-info p {
  font-size: 12px;
  margin: 0;
}

.attend-info input[type="submit"],
.leave-info input[type="submit"],
.vacation-info input[type="submit"] {
  background: var(--main-color);
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  width: 100px;
}

.vacation-info input[type="submit"] {
  align-self: flex-end !important;
}

.attend-info p span,
.leave-info p span {
  color: var(--main-color);
  font-weight: 600;
}

.leave-info form {
  justify-content: space-between;
  align-items: flex-end;
}

textarea {
  outline: 0;
  border: 1px solid #cfcfcf;
  padding: 10px;
  font-size: 16px;
  resize: none;
  width: 100%;
  height: 100px;
}

button.attend-cancel,
button.leave-cancel,
button.vacation-cancel {
  float: right;
  margin-top: 10px;
  width: 100px;
  background-color: transparent;
  color: var(--main-color);
  padding: 10px 15px;
  border-radius: 5px;
  transition: 0.2s;
  border: 1px solid var(--main-color);
}

.error-mg {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  height: 20px;
  z-index: 9999;
  background: #db4a4a;
  color: #fff;
  padding: 15px;
  font-size: 12px;
}

.error-mg span {
  background-color: #e54461;
  padding: 20px 40px;
  border-radius: 10px;
  color: #fff;
}

.success_mg span {
  background-color: #57bc90;
}

th.vacation-table {
  background-color: #57bc90;
  color: #fff;
  position: relative;
  cursor: grab;
}

.cell-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  cursor: grab;
  height: 30px;
  width: 200px;
  position: relative;
}

.leave-img,
.enter-img {
  width: 10px;
  height: 10px;
  background: transparent;
  padding: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0057cd;
  border-radius: 50%;
  margin: 4px;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  border: 2px solid #0057cd;
}

.att-info-tap {
  position: absolute;
  bottom: 180%;
  background: #a6d4f8;
  width: 300px;
  height: auto;
  color: var(--alt-color);
  font-weight: 400;
  font-size: 12px;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 15%);
  flex-direction: column;
  display: none;
  transition: 0.2s;
  z-index: 99;
}

.att-info-tap::after {
  content: "";
  background-color: transparent;
  position: absolute;
  bottom: -20px;
  left: 46%;
  border-width: 10px;
  border-color: #a7d6fa transparent transparent transparent;
  border-style: solid;
}

.enter-img:hover .att-info-tap,
.leave-img:hover .att-info-tap {
  display: flex;
}

.change-att {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
}

.change-att form {
  background: #fff;
  width: 800px;
  padding: 20px 25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: var(--alt-color);
  z-index: 10;
}

.change-att form h4 {
  margin: 0 0 5px;
  font-size: 20px;
}

.change-att form p {
  margin: 0 0 25px;
  font-size: 11px;
  color: #9c9c9c;
  font-weight: 400;
}

.change-att form label {
  margin: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 420px;
}

.change-att form label span {
  font-size: 14px;
  margin-right: 20px;
  font-weight: 400;
}

.change-att form label input[type="datetime-local"] {
  padding: 5px 10px;
  border: 1px solid #cdcdcd;
  border-radius: 5px;
  width: 300px;
}

.change-att form input[type="submit"] {
  background: var(--main-color);
  color: #fff;
  padding: 10px 25px;
  font-size: 14px;
  border-radius: 5px;
  align-self: flex-end;
  width: 100px;
  margin: 0;
}

.coe {
  display: flex;
  align-items: center;
  justify-content: center;
}

.change-att form input.delete {
  background: #d33c3c;
}

.change-att form .inputs {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.change-att form input[type="submit"]:hover {
  transform: scale(1);
  text-decoration: none;
}

.change-att form p span {
  font-weight: 600;
  color: var(--main-color);
}

.enter-img:active .change-att,
.leave-img:active .change-att {
  display: flex;
}

.change-att:hover {
  display: flex !important;
}

.leave-img {
  border: 2px solid #e54461;
  color: #e54461;
}

.att-info-tap div span {
  color: var(--main-color);
  font-weight: 500;
  text-align: left;
  margin-left: 5px;
  width: 195px;
}

.att-info-tap div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 3px;
}

span.att-comment {
  width: 150px;
  overflow: auto;
  height: 20px;
}

span.att-comment::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

.workingdays {
  font-size: 14px;
  color: var(--alt-color);
  font-weight: 400;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.r-worki {
  width: 70%;
  font-weight: 600;
  color: var(--main-color);
  display: flex;
}

.r-worki.gn {
  color: #36a592;
}

span.ho.throw {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

.r-worki div {
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 14px;
}

span.ho {
  width: 20px;
  height: 30px;
  background: #ecedee;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #cdcdcd;
  opacity: 0.7;
}

th.holiday-table {
  background-color: #dadddf;
  position: relative;
}

td.holiday-table {
  background-color: rgb(245 245 245);
}

td.holiday-table:hover {
  background-color: rgb(245 245 245);
}

.workingdays span {
  color: #a7a7a7;
  font-weight: 400;
}

.holiday-table .cell-cont {
  cursor: no-drop;
}

.organize {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.line-throw {
  color: #e54461 !important;
  text-decoration: line-through;
}

.vacation-info form input[type="date"] {
  background: #f1f5f8;
  outline: 0;
  border: 0;
  padding: 2px 17px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--alt-color);
  height: 30px;
  margin-right: 145px;
}

.vacation-info label {
  font-size: 12px;
}

.vacation-info form div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vacation-info form span {
  font-size: 10px;
  align-self: flex-start;
  font-weight: 400;
  color: #e54461;
  margin: 5px 0;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vacation-info form {
  margin-top: 10px;
  flex-wrap: wrap;
  flex-direction: column;
}

input#change_date {
  background: #f1f5f8;
  outline: 0;
  border: 0;
  padding: 2px 17px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--alt-color);
  height: 30px;
  display: none;
}

span.change_date_span {
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 40px;
}

button#vacation-btn {
  background: transparent;
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

button i {
  margin-left: 10px;
}

/* End Attendance Table */

/* Start Login Page */
.login-form img {
  height: 50px;
}

.login-form .contain {
  justify-content: center;
  align-items: center;
}

form.login-form {
  position: relative;
  background: #fff;
  padding: 30px 20px 10px;
  border-radius: 5px;
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
}

.login-form input {
  outline: 0;
  border: 1px solid #f1f5f8;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin: 10px 0px;
  font-size: 14px;
  color: var(--alt-color);
  transition: 0.2s;
  background-color: #fff;
}

.login-form input:focus {
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

.login-form input[type="submit"] {
  background-color: var(--main-color);
  color: #ffff;
  cursor: pointer;
}

.login-form input[type="submit"]:hover {
  background-color: #43586f;
}

.input-box {
  position: relative;
  width: 100%;
}

.input-box span {
  position: absolute;
  left: 0;
  padding: 20px;
  pointer-events: none;
  color: var(--alt-color);
  text-transform: uppercase;
  transition: 0.3s;
  font-size: 14px;
}

.input-box input:valid~span,
.input-box input:focus~span {
  color: var(--main-color);
  transform: translateX(10px) translateY(3px);
  font-size: 0.5em;
  background-color: #fff;
  padding: 2px 20px;
  border-left: 1px solid var(--main-color);
  border-right: 1px solid var(--main-color);
  letter-spacing: 0.2em;
}

.login-form h2 {
  font-weight: 500;
  color: var(--alt-color);
  font-size: 24px;
}

.login-form img {
  height: 85px;
  width: auto;
}

::file-selector-button {
  display: none;
}

::-webkit-file-upload-button {
  display: none;
}

span.log-error {
  font-size: 12px;
  color: #e54461;
}

.login-form a {
  font-size: 14px;
  align-self: flex-start;
  color: var(--alt-color);
  transition: 0.2s;
  margin-bottom: 10px;
}

.login-form a:hover {
  color: var(--main-color);
}

.success {
  color: #57bc90;
}

.er_mg {
  display: none;
}

.not_iden {
  font-size: 10px;
  position: absolute;
  top: 18px;
  right: 20px;
  color: #e54461;
  pointer-events: none;
  background-color: #fff;
  padding: 5px;
  display: flex;
}

.iden {
  font-size: 10px;
  position: absolute;
  top: 18px;
  right: 20px;
  color: #57bc90;
  pointer-events: none;
  background-color: #fff;
  padding: 5px;
  display: flex;
}

/* End Login Page */
/* Start Sign up Page */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* End Sign up Page */

/* Start Settings Page */
.setting-section {
  background: #fff;
  width: 100%;
  padding: 20px;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid #cdcdcd;
}

.setting-section h5 {
  color: var(--alt-color);
  font-size: 14px;
  margin: 0 0 20px;
  font-weight: 600;
  background: #f6f9fc;
  padding: 10px;
  width: 100%;
}

.setting-section form label {
  font-size: 12px;
  color: var(--main-color);
  font-weight: 400;
  width: 300px;
}

.setting-section form label span {
  font-size: 10px;
  color: var(--alt-color);
}

.setting-section .org {
  width: auto;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  align-items: center;
}

.setting-section form .org input {
  width: 300px;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  padding: 0 5px 3px;
  font-size: 12px;
  color: var(--main-color);
  text-align: left;
}

.setting-section input[type="submit"] {
  background: var(--main-color);
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.setting-section input[type="submit"]:hover {
  transform: scale(1);
  text-decoration: none;
}

.setting-section .org ul {
  flex-direction: column;
}

.setting-section .org ul li {
  position: relative;
  padding: 10px 0;
  width: 100%;
}

.setting-section .org ul label {
  font-size: 12px;
  color: var(--main-color);
  padding-left: 30px;
  cursor: pointer;
}

.setting-section .org ul label input {
  opacity: 0;
  cursor: pointer;
}

.setting-section .org ul label .check {
  position: absolute;
  top: 0px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #f1f5f8;
  display: block;
  box-sizing: border-box;
  border-radius: 5px;
}

.setting-section .org ul label .check::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background-color: #f1f5f8;
  border-radius: 3px;
  transition: 0.5s;
  transform: translateX(185px);
}

.setting-section .org ul label input:checked~.check::before {
  background-color: var(--main-color);
  box-shadow: 0 0 6px var(--main-color);
  transform: translateX(0px);
}

/* End Settings Page */

/* Start Request Page */
.request-section {
  padding: 0px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 90px;
  border-radius: 5px;
  position: relative;
}

.request-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.request-row {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: auto;
  font-size: 13px;
  align-items: center;
  position: relative;
}

.request-row div:nth-child(3) {
  grid-column: span 5;
}

.request-row>div:nth-child(2) {
  grid-column: span 1;
  color: #bcb1b1;
}

.employee-section .request-row div:nth-child(7) {
  grid-column: span 3;
}

.request-row div:nth-child(8) {
  display: flex;
  justify-content: center;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.request-section .inputs {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-right: 20px;
}

.request-section .inputs label {
  font-size: 12px;
  color: var(--alt-color);
  font-weight: 500;
  margin-top: 5px;
}

.request-section .flex .inputs:first-child:after {
  content: "";
  position: absolute;
  bottom: 7px;
  right: 6px;
  width: 17px;
  height: 17px;
  background-image: url(../images/search.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
}

.request-section .inputs form input[type="submit"] {
  background-image: url(../images/filter.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.request-section .inputs form input[type="submit"]:hover {
  transform: scale(1);
}

.request-row.request-head-list {
  border-radius: 7px 7px 0px 0px;
  background: #f7f7f7;
  font-size: 14px;
  color: var(--main-color);
  border-bottom: 1px solid #cfcfcf;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  position: absolute;
  bottom: -44px;
  width: 96%;
  left: 30px;
}

.pagination .records {
  font-size: 14px;
}

.pagination .records span {
  color: #b3b3b3;
}

.pagination .pagy {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pagination .pagy a img {
  height: 15px;
  width: 15px;
}

.pagination .pagy a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  margin: 0 5px 0 2px;
}

.pagination .pagy form input[type="number"] {
  outline: 0;
  border: 1px solid #cfcfcf;
  border-radius: 5px 0 0 5px;
  color: var(--alt-color);
  font-size: 12px;
  height: 27px;
  width: 30px;
  text-align: center;
}

.pagination .pagy form span {
  color: #9b9b9b;
  font-size: 14px;
  margin: 0 5px;
}

.pagination .pagy form input[type="submit"] {
  margin: 0;
  background: #cfcfcf;
  margin-left: -5px;
  height: 27px;
  border-radius: 0 5px 5px 0px;
  color: #fff;
  font-size: 10px;
}

.pagination .pagy form input[type="submit"]:hover {
  transform: scale(1);
}

.pagination .pagy form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-frame {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.request-row div a {
  display: flex;
  align-items: center;
}

.img-frame {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border: 3px solid #f1f5f8;
  margin-right: 10px;
  cursor: pointer;
}

.request-row>div:last-child {
  grid-column: span 3;
}

.request-row>div:last-child {
  display: flex;
  justify-content: flex-end;
}

.request-row .info {
  cursor: pointer;
}

.info .profission {
  font-size: 10px;
  cursor: pointer;
  color: var(--main-color);
}

.request-row .info .name {
  cursor: pointer;
}

.request-body-list .request-row {
  border-bottom: 1px solid #cfcfcf;
  transition: 0.3s;
}

.employee-section .request-row>div {
  padding: 15px;
  border: 0;
  border-right: 1px dotted #c7c7c7;
  height: 100%;
  display: flex;
  align-items: center;
}

.employee-section .request-row>div:last-child {
  border: 0;
}

.request-body-list .request-row:last-child {
  border: 0;
}

.reason {
  display: flex;
  align-items: center;
  height: 130%;
  overflow: auto;
}

.reason::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.pending span {
  color: var(--main-color);
  background: #f1f6ff;
  padding: 5px 10px;
  border-radius: 10px;
}

.approved span {
  color: #57bc90;
  background: #f1fff3;
  padding: 5px 10px;
  border-radius: 10px;
}

.rejected span {
  color: #e54461;
  background: #fff1f5;
  padding: 5px 10px;
  border-radius: 10px;
}

.request-row.pending::before {
  content: "";
  background-color: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
}

.request-row div:nth-child(9) {
  display: flex;
  justify-content: flex-end;
}

.sm-menu img {
  height: 20px;
}

.sm-menu {
  position: relative;
}

.request-row.pending::after {
  content: "";
  background-color: var(--main-color);
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
}

.request-row.pending {
  background: #fbfcff;
}

.request-body-list .request-row:hover {
  background-color: #f3f3f3;
}

/* End Request Page */

/* Start Employees Page */
.request-body-list .request-row div:first-child {
  grid-column: span 1;
}

.employee-section .request-row div:nth-child(4) {
  grid-column: span 4;
}

.employee-section .request-row div:nth-child(5) {
  grid-column: span 3;
}

.employee-section .request-row div:nth-child(6) {
  grid-column: span 4;
}

.employee-section .request-row>div:first-child {
  grid-column: span 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

a.new-btn:hover {
  opacity: 0.9;
}

.sm-menu ul {
  display: flex;
  flex-direction: column;
  background: #fff;
  height: auto;
  font-size: 12px;
  border-radius: 2px;
  box-shadow: 0 0 7px 3px rgb(0 0 0 / 10%);
}

.sm-menu ul li {
  width: 100%;
  justify-content: flex-start;
  padding: 12px;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  transition: 0.3s;
  text-transform: capitalize;
}

.sm-menu ul li:hover {
  background-color: #f1f5f8;
}

.sm-menu .sm-menu-drop {
  position: absolute;
  top: 25px;
  right: -15px;
  z-index: 9;
  width: 150px;
  display: none;
}

.sm-menu button:focus~.sm-menu-drop,
.sm-menu-drop:hover {
  display: block;
}

.sm-menu button {
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.sm-menu-drop img {
  margin-right: 10px;
  height: 15px;
}

.sm-menu-drop ul li a {
  width: 100%;
}

.del-warn {
  background: #db4a4a !important;
  color: #fff;
  border: 1px solid #c54848 !important;
}

.del-warn:hover {
  background: #963434 !important;
}

/* End Employees Page */

/* Start Add Employee Section */
.add-employee form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}

form label span {
  color: red;
  font-size: 10px;
  margin-left: 3px;
}

form label {
  font-size: 0.95rem;
  color: var(--alt-color);
  font-weight: 500;
  padding: 0 0 5px;
}

.add-employee form .input-3 {
  flex: 0 33.333333333%;
  max-width: 33.3333333%;
}

.add-employee form .input-2 {
  flex: 0 50%;
  max-width: 50%;
}

.add-employee form .input-1 {
  flex: 100%;
  max-width: 100%;
}

.add-employee form textarea {
  width: 100%;
  min-height: 40px;
  height: 120px;
  border-radius: 0;
  border: 1px solid #cfcfcf;
  font-size: 14px;
  padding-top: 7px;
  transition: 0.2s;
}

.drag-file {
  position: absolute;
  top: 26px;
  left: 10px;
  height: calc(100% - 26px);
  width: calc(100% - 20px);
  border: 2px dashed #f2ede4;
  transition: 0.2s;
  background-color: transparent;
  font-size: 14px;
  border-radius: 5px;
}

input[type="file"]:hover~.drag-file {
  border: 2px dashed #faf5d3;
  box-shadow: 0px 0px 11px 0px rgb(229 212 177 / 48%),
    inset 0px 0px 5px 0px rgb(229 215 177 / 20%);
}

input#profile-pic {
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0;
  cursor: pointer;
  position: relative;
  padding: 60px;
}

.drag-file img {
  height: 40px;
  margin-right: 10px;
}

.drag-file span {
  color: var(--main-color);
}

hr {
  height: 1px;
  width: calc(100% - 40px);
  background: lightgrey;
  border: 0;
  margin: 40px 0 60px;
}

.exist-file {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
}

.pic-frame {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 3px solid #cfcfcf;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.preview-avatar {
  height: 100%;
  width: auto;
  margin: 0;
}

.remove-pic {
  position: absolute;
  top: 60px;
  left: 60%;
  background: #e91e63;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 2px;
  color: #fff;
  font-weight: 400;
}

.remove-pic {
  position: absolute;
  top: 10px;
  left: 60%;
  background-color: #e54461;
  width: 30px;
  transition: 0.3s;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  z-index: 12;
  cursor: pointer;
  font-size: 15px;
}

.remove-pic:hover {
  background-color: #f37289;
}

input#status,
.add-employee select#status,
.add-employee select#job_role,
.add-employee select#country,
.add-employee input#curr-postal,
.add-employee input#perm-postal {
  max-width: calc(50% - 10px);
}

span.s-note {
  font-size: 10px !important;
  color: var(--alt-color) !important;
}

.add-employee .s-section {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #13b272;
}

.s-section h5 {
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #13b272;
  background-color: #effdf8;
}

h5 img {
  height: 15px;
  margin-right: 10px;
}

.s-section-inputs {
  display: flex;
  padding: 0 10px;
  flex-wrap: wrap;
}

.add-employee input[type="submit"] {
  display: flex;
  position: relative;
  top: unset;
  right: unset;
  font-size: 14px;
  text-transform: capitalize;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  background-color: #13b272;
  width: 100%;
}

.add-employee input[type="submit"]:hover {
  background-color: #119b64;
}

.add-employee .submit-section {
  position: fixed;
  top: 60px;
  width: 200px;
  right: 0;
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%);
}

span.error-field {
  font-size: 10px;
  position: absolute;
  bottom: -15px;
  color: #e54461;
}

.error_field {
  border: 1px solid #e54461 !important;
}

.error_field:focus {
  border: 1px solid #e54461 !important;
  outline: 4px solid #ffbdc9 !important;
}

span.n-char {
  font-size: 10px !important;
  color: var(--alt-color) !important;
}

.add_success {
  position: absolute;
  top: 84px;
  font-size: 12px;
  background: #f1fff3;
  width: 100%;
  left: 0;
  padding: 5px;
  text-align: center;
  color: #57bc90;
}

/* End Add Employee Section */

/* Start Job Title Section */
.job-title-section .request-row div {
  grid-column: span 3 !important;
}

.job-title-section .request-row div:nth-child(3) {
  justify-content: center;
  align-items: center;
  display: flex;
}

.job-title-section .request-row div:nth-child(4) {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

/* End Job Title Section */

/* Start View Employee Profile */
.main-prof {
  display: flex;
  justify-content: space-between;
  height: 150px;
}

.l-main-prof-img {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  border: 2px solid #dddddd;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 10px;
}

.l-main-prof {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.main-prof {
  display: flex;
  justify-content: space-between;
  height: 150px;
  background: white;
  padding: 15px;
  border: 1px solid #dfe3e6;
}

.l-main-prof-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 20px;
}

.l-main-prof-info h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--alt-color);
}

.l-main-prof-info span {
  font-size: 12px;
  color: var(--main-color);
}

.l-main-prof-info h2 span {
  margin: 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--alt-color);
}

.r-main-prof {
  display: flex;
  flex-direction: column;
}

.r-main-prof-icon {
  display: flex;
  height: 20px;
  width: 20px;
  justify-content: center;
  position: absolute;
  left: 10px;
}

.r-main-prof-part {
  background-color: var(--main-color);
  display: flex;
  justify-content: center;
  padding: 5px;
  color: #fff;
  font-size: 16px;
  min-width: 500px;
  position: relative;
  height: 32px;
  align-items: center;
  transition: 0.2s;
}

.r-main-prof-part:hover {
  opacity: 0.8;
}

.r-main-prof {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.r-main-prof-part form {
  position: absolute;
  top: 0;
  left: -30px;
  width: calc(100% + 30px);
  background: transparent;
  height: 100%;
  z-index: 5;
}

.r-main-prof-part form input {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.prof-tools {
  border: 2px solid #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

.prof-tools a img {
  height: 12px;
  width: 12px;
  margin-right: 5px;
}

.prof-tools a {
  padding: 5px 15px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.prof-tools a {
  padding: 5px 15px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0 10px 0 0;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
  transition: 0.2s;
}

.prof-tools a:hover {
  background-color: rgb(219, 219, 219);
}

.prof-details-box {
  display: flex;
  background: #fff;
  padding: 25px;
  flex-direction: column;
  position: relative;
  margin-bottom: 50px;
}

.prof-details-section {
  border: 1px solid #cfcfcfcf;
  padding: 20px;
  margin-top: 39px;
  position: relative;
}

.prof-details-box h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--alt-color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  position: absolute;
  z-index: 6;
  top: 26px;
  height: 39px;
  cursor: pointer;
}

.prof-details-box h6 a {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--alt-color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  z-index: 6;
  height: 39px;
  cursor: pointer;
  opacity: 0.65;
  padding: 0 32px;
}

.prof-details-box h6 a.active {
  border: 1px solid;
  background-color: #fff;
  border-color: #cfcfcfcf #cfcfcfcf #fff #cfcfcfcf;
  opacity: 1;
}

.prof-details-title {
  color: var(--alt-color);
  font-size: 14px;
  margin: 0 0 20px;
  font-weight: 600;
  background: #fcfaf6;
  padding: 10px;
  width: 100%;
}

.prof-infos {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 10px;
}

.prof-infos h5 {
  font-size: 14px;
  font-weight: 300;
  color: var(--main-color);
  margin: 0 0 15px 0;
}

.prof-infos span {
  font-size: 14px;
  color: var(--alt-color);
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
  position: relative;
}

.prof-ex {
  margin-bottom: 45px;
}

.prof-r-info {
  margin-right: 600px;
}

.prof-ex span div {
  position: absolute;
  top: 0;
  left: 0;
}

.prof-ex span div {
  position: absolute;
  top: 2px;
  left: 110px;
  font-size: 11px;
  width: 300px;
  color: var(--main-color);
}

span.gn {
  color: #30ad30;
  background: #e1ffe1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  border-radius: 5px;
  width: 130px;
  font-size: 14px !important;
  font-weight: 600 !important;
}

span.rd {
  color: #e91e63;
  background: #eed1db;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  border-radius: 5px;
  width: 130px;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* End View Employee Profile */

/* Start Change Password Profile */


form.reset-form {
  width: 100%;
}

.reset-form input[type="submit"]:hover {
  transform: scale(1);
  text-decoration: none;
}

/* End Change Password Profile */

/* Start Request Detail */
.requesting {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.r-analysis {
  margin-left: 25px;
}

.requester-img {
  height: 260px;
  width: 260px;
  display: flex;
  overflow: hidden;
  border: 2px solid #cdcdcd;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.requester-img img {
  height: 100%;
  width: auto;
  cursor: pointer;
}

.requester-box {
  cursor: pointer;
}

.requester-box a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
}

.main-info {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  font-weight: 600;
  color: var(--alt-color);
  font-size: 20px;
  cursor: pointer;
}

.main-info .j-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--main-color);
  margin-bottom: 10px;
}

.requester-analysis ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-transform: capitalize;
}

ul li .t-name {
  font-size: 12px;
  margin: 0 15px;
  width: 200px;
}

.requester-analysis ul li {
  margin-bottom: 15px;
}

ul li .t-value {
  font-weight: 600;
  color: var(--main-color);
  position: relative;
  display: flex;
  justify-content: space-between;
}

.b-info {
  font-size: 14px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}

.j-hed {
  font-weight: 400;
}

.j-value {
  color: var(--main-color);
}

.basic-title {
  margin: 10px 0;
  font-size: 16px;
  padding-top: 15px;
  border-top: 1px solid #cdcdcd;
}

.t-value span::after {
  content: "You have reached the maximum annual vacations";
  position: absolute;
  font-size: 10px;
  top: 25px;
  left: -370px;
  width: 400px;
  font-weight: 500;
  text-transform: none;
  background-color: #e36363;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: help;
  display: none;
}

.main-info .name span {
  font-size: 12px;
  font-weight: 400;
  margin-left: 5px;
}

.t-value span {
  position: relative;
  font-size: 10px;
  top: 0;
  left: 15px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
}

.t-value span:hover:after {
  display: flex;
}

.t-value span:empty {
  display: none;
}

.t-value .v {
  margin-left: 20px;
  color: var(--alt-color);
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
}

.circle-perc-cont {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}

.circle-perc-cont::before {
  content: "";
  position: absolute;
  width: 84%;
  height: 84%;
  background-color: #fff;
  border-radius: 50%;
}

.circle-perc-value {
  z-index: 1;
  font-size: 32px;
  font-weight: 700;
  color: var(--main-color);
}

.circle-cont h5 {
  margin: 15px;
  font-size: 16px;
  color: var(--main-color);
}

.circle-cont {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.l-analysis {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid #cdcdcd;
  background: #fff;
  padding: 15px 30px;
  margin-top: 35px;
}

.requester-analysis {
  margin-right: 40px;
}

.requesting-details .request-row div:nth-child(2) {
  grid-column: span 3;
}

.requesting-details .request-row div:nth-child(3) {
  grid-column: span 1;
}

.requesting-details .request-row div:nth-child(6) {
  grid-column: span 5;
}

.requesting-details,
.requesting-status {
  background-color: #fff;
  margin-top: 25px;
  border: 1px solid #cdcdcd;
  padding: 20px;
}

.requesting-details h5,
.requesting-status h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--alt-color);
}

.requesting-details .request-body-list .request-row:hover {
  background-color: #fff;
}

.requesting-details .request-body-list .request-row {
  border: 0;
}

.requesting-details .request-row.request-head-list {
  margin: 15px 0 0;
}

.requesting-status .status {
  display: flex;
  width: 100%;
  font-size: 14px !important;
  justify-content: flex-start;
  padding: 15px 0;
}

.requesting-status .status.mg {
  margin-top: 20px;
}

.status .s-title {
  margin-right: 300px;
  width: 200px;
}

.heads {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heads .action-menu {
  display: flex;
  background-color: var(--main-color);
  color: #fff;
  font-size: 16px;
  border: 1px solid #01429a;
  border-radius: 5px;
  cursor: pointer;
  width: 100px;
  transition: 0.2s;
  position: relative;
}

.heads .action-menu:after {
  content: "";
  position: absolute;
  top: 12px;
  right: 15px;
  border: 4px solid;
  border-color: #fff transparent transparent transparent;
}

.heads .action-menu:hover {
  background-color: #fff;
  color: var(--alt-color);
  border: 1px solid #cdcdcd;
}

.heads .action-menu:hover button {
  color: #cdcdcd;
}

.heads .action-menu:hover:after {
  border-color: #cdcdcd transparent transparent transparent;
}

.heads .action-menu ul {
  position: absolute;
  background: #fff;
  top: 35px;
  right: 0;
  width: 230px;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 10px;
  z-index: 6;
  border-radius: 5px;
  border: 1px solid #cdcdcd;
  display: none;
}

.action-menu ul li {
  width: 100%;
  border-bottom: 1px solid #cdcdcd;
}

.action-menu ul li:last-child {
  border-bottom: 0;
}

.action-menu button {
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  outline: 0;
  width: 100%;
  padding: 5px 20px 5px 10px;
  font-size: 14px;
}

ul li button span {
  display: flex;
  width: 145px;
  justify-content: flex-start;
  font-size: 14px;
}

.action-menu ul li button {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 5px 0;
  margin: 5px 15px;
  color: var(--alt-color);
  width: 100%;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button#del-btn {
  color: #e36363;
}

button#apr-btn {
  color: #57bc90;
}

button#rej-btn {
  color: #e36363;
}

.approve-section,
.reject-section,
.delete-section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgb(0 0 0 / 20%);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.approve-box form h4 {
  margin: 0 0 25px;
  font-size: 16px;
  color: var(--alt-color);
}

.approve-box {
  background: #fff;
  padding: 20px;
  border: 1px solid #cdcdcd;
  width: 500px;
}

.approve-box form input[type="submit"] {
  padding: 7px 20px;
  background: var(--main-color);
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid var(--main-color);
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.approve-box form input[type="submit"]:hover {
  transform: scale(1);
  text-decoration: none;
}

button.cancel-btn {
  padding: 7px 20px;
  background: transparent;
  color: var(--main-color);
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid var(--main-color);
  cursor: pointer;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
}

.inputes {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.approve-box form .inputes input[type="submit"] {
  align-self: flex-end;
  margin-bottom: 10px;
}

.empty-result {
  grid-column: span 5 !important;
}

/* End Request Detail */

/* Start Category details page */
.att-part h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 54px;
  color: var(--alt-color);
}

.org-part h6 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.org-part h6 a {
  font-size: 12px;
  color: var(--main-color);
  text-decoration: underline;
}

.org-section {
  position: relative;
}

.org-section .org-contain {
  border: 1px solid #dee2e6;
  padding: 20px;
  margin-top: 39px;
  background-color: #fff;
  margin-bottom: 40px;
}

.org-section ul.alinks {
  position: absolute;
  top: -39px;
  height: 40px;
  left: 0;
  text-transform: capitalize;
  display: flex;
}

.org-section ul.alinks li {
  border: 1px solid transparent;
  height: 100%;
  padding: 20px;
  font-size: 12px;
  margin: 0 5px 0 0;
  color: var(--alt-color);
}

.org-section ul.alinks li.active {
  background: #fff;
  border: 1px solid #dee2e6;
  border-bottom: 0;
}

.org-contain h5 {
  margin: 5px 0;
  font-size: 16px;
  font-weight: 600;
  color: #c3c3c3;
}

.org-contain .line-info {
  display: flex;
  width: 600px;
  justify-content: space-between;
  margin: 25px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--alt-color);
}

.org-contain .line-info .l-info {
  font-weight: 400;
  color: var(--main-color);
}

.org-contain .line-info .r-info {
  width: 300px;
}

.org-contain textarea,
.org-contain input,
.org-contain select {
  width: 300px !important;
  border: 0 !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: var(--alt-color) !important;
  border-bottom: 1px solid #cdcdcd !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: 0.3s !important;
  outline: 0 !important;
}

.org-contain textarea:focus,
.org-contain input:focus,
.org-contain select:focus {
  color: var(--main-color) !important;
  border-bottom: 1px solid var(--main-color) !important;
}

.org-contain input[type="submit"] {
  background-color: #119b64 !important;
  color: #fff !important;
  transition: 0s !important;
  margin-top: 55px !important;
}

.org-contain input[type="submit"]:hover {
  transform: scale(1) !important;
  text-decoration: none !important;
}

.org-section .r-info span {
  font-size: 10px;
  font-weight: 300;
}

.org-section .l-info span {
  color: #db4a4a;
}

.org-contain .error {
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(219 74 74 / 13%);
  padding: 5px;
  color: var(--alt-color);
}

input#default {
  width: 20px;
  height: 20px;
}

.org-contain a {
  background: #db4a4a;
  padding: 5px 70px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.profile-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.card-contain {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-top: 30px;
}

.profile-cards .card-contain .card {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  transition: 0.5s;
  border: 1px solid #cdcdcd;
  box-shadow: 0px 0px 7px rgb(0 0 0 / 16%);
}

.heads input#search_name {
  border: 1px solid #d3e3fa;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 400;
}

.heads input#search_name:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.profile-cards .card-contain .card .imgBx {
  width: 70px;
  position: absolute;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  transition: 0.5s;
  height: 70px;
  top: -25px;
  left: 5%;
  border: 1px solid #cdcdcd;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 7px rgb(0 0 0 / 16%);
}

.profile-cards .card-contain .card .imgBx img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

.profile-cards .card-contain .card .content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

.profile-cards .card-contain .card .content .details {
  text-align: center;
  width: 100%;
  transition: 0.5s;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-cards .card-contain .card .content .details h2 {
  display: flex;
  font-weight: 600;
  color: var(--main-color);
  margin: 10px 0px 15px 98px;
  text-align: start;
  font-size: 16px;
  flex-direction: column;
}

.profile-cards .card-contain .card .content .details h2 span {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
}

.profile-cards .card-contain .card .content .details .actionBtn {
  display: flex;
  justify-content: flex-start;
}

.profile-cards .card-contain .card .content .details .actionBtn a {
  padding: 5px 10px;
  border: none;
  outline: none;
  border-radius: 5px;
  background-color: var(--main-color);
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  font-weight: 400;
  margin: 0 20px;
}

.profile-cards .card-contain .card .content .details .actionBtn a:nth-child(2) {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  background-color: transparent;
}

.details .card-info {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin: 0 20px 5px;
  font-weight: 400;
  color: var(--alt-color);
}

.card-info .r-info {
  width: 100px;
  text-align: start;
  font-weight: 600;
  color: var(--main-color);
  opacity: 0.5;
}

.details .card-info:nth-child(5) {
  margin-bottom: 10px;
}

.no-res {
  font-size: 14px;
  padding: 20px 0;
  border-top: 1px solid #cdcdcd;
  width: 100%;
  margin-top: 20px;
  border-bottom: 1px solid #cdcdcd;
  color: var(--alt-color);
}

/* End Category details page */

/* Start Roles Page */
.inputing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-direction: row-reverse;
}

.wd100 {
  width: 100%;
  left: 0;
}

.roles .flex h3 {
  font-size: 26px;
}

.roles {
  background: transparent;
  border: 0;
  box-shadow: 0 0 0 black;
  height: auto;
  padding: 0;
}

.roles .flex {
  padding: 15px 20px;
  background: #fff;
  border: 1px solid #cdcdcd;
}

.roles .request-row.request-head-list {
  margin: 0;
}

.roles .request-list {
  margin-top: 30px;
  background: #fff;
  border: 1px solid #cdcdcd;
}

.roles .pagination {
  bottom: -40px;
}

.roles .request-row div:first-child {
  grid-column: span 1 !important;
}

.roles .request-row div:nth-child(3) {
  justify-content: flex-start !important;
}

.roling li {
  margin: 0 5px;
  padding: 5px 20px;
  background-color: #fff;
  border: 1px solid #cdcdcd;
}

.roling ul {
  display: flex;
}

.roling li:hover {
  background-color: #f0f0f0;
}

.role-contain .line-info {
  flex-direction: column;
  margin: 0;
  width: 100%;
}

.role-contain input {
  border: 1px solid var(--main-color);
  border-radius: 0;
  margin-top: 10px;
  padding: 7px;
  font-weight: 400;
}

.role-contain input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-right: 10px;
  cursor: pointer;
}

.role-contain label {
  margin: 10px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-bottom: 0px !important;
}

.role-contain label span {
  font-size: 14px;
  font-weight: 500;
}

.not_section .head {
  background: #f3f3f3;
  border-bottom: 1px solid #cdcdcd;
  padding: 5px 35px;
  color: var(--main-color);
}

.not_section {
  border: 1px solid #cdcdcd;
  margin: 15px 0;
}

.sec_body {
  padding: 5px 35px;
  color: var(--alt-color);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.role-contain input[type="submit"] {
  padding: 12px 20px !IMPORTANT;
  height: auto;
  width: auto;
  margin-top: 10px !IMPORTANT;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* End Roles Page */

/* Start Dashboard Page */
.home-dis {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 20px;
}

.home-section {
  display: flex;
  flex-direction: column;
}

.home-box {
  background: #fff;
  box-shadow: 0 3px 6px rgb(78 83 129 / 10%);
  border-radius: 4px;
  border: 1px solid #f6f9fc;
  width: 100%;
  margin-bottom: 30px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

.emp-home-box {
  max-height: 400px;
}

.home-section .head-section {
  background: var(--main-color);
  border: 1px solid var(--main-color);
  font-size: 16px;
  color: #fff;
  display: flex;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  justify-content: space-between;
  transition: all 0.15s;
  padding: 10px 20px;
}

.head-section span.head {
  font-size: 14px;
}

.body-section {
  height: auto;
  flex: 1;
}

.circle1 {
  fill: none;
  stroke: #36a592;
  stroke-width: 11px;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  animation: anim 2s linear forwards;
}

.circle2 {
  fill: none;
  stroke: #e41970;
  stroke-width: 11px;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  animation: anim 2s linear forwards;
}

.circle3 {
  fill: none;
  stroke: #b900f6;
  stroke-width: 11px;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  animation: anim 2s linear forwards;
}

.circle4 {
  fill: none;
  stroke: #f37434;
  stroke-width: 11px;
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  animation: anim 2s linear forwards;
}

.outer {
  position: relative;
  width: 121px;
  height: 121px;
  border-radius: 50%;
  border: 1px solid #cdcdcd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emo {
  overflow: auto;
}

.body-section.empty {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.em-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.em-cont p {
  font-size: 12px;
  color: var(--alt-color);
  margin-bottom: 20px;
}

.em-cont a {
  color: #fff;
  background-color: var(--main-color);
  border-color: var(--main-color);
  padding: 10px 20px;
  font-size: 14px;
}

.head-section a {
  font-size: 12px;
  color: var(--main-color);
}

ul.emp-sum li a {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  align-items: center;
  padding: 5px 25px;
  margin: 5px;
  background: #fdfdfd;
  font-size: 12px;
  text-transform: none;
}

ul.emp-sum li a:hover {
  background: #f8f8f8;
}

.emp-sum .img-prof {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #cdcdcd;
}

ul.emp-sum li a div {
  cursor: pointer;
}

ul.emp-sum li a div:first-child {
  grid-column: span 4;
  display: flex;
}

ul.emp-sum .name {
  display: flex;
  flex-direction: column;
  margin-left: 7px;
  justify-content: space-evenly;
}

ul.emp-sum {
  height: auto;
}

ul.emp-sum li {
  width: 100%;
}

ul.emp-sum li a div:nth-child(2) {
  grid-column: span 1;
}

ul.emp-sum li a div:nth-child(3) {
  grid-column: span 1;
}

ul.emp-sum li a div:nth-child(4) {
  grid-column: span 2;

}

ul.emp-sum li a div:nth-child(5) {
  grid-column: span 1;
  display: flex;
  justify-content: flex-end;
}

ul.heading li a {
  background: #fcf9f6;
  margin: 0;
  color: #a6a6a6;
  font-weight: 400;
  pointer-events: none;
}

.head-section input {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  background-color: hsla(0, 0%, 100%, 0.4);
  cursor: pointer;
  border: 1px solid #cdcdcd;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--alt-color);
  outline: 0;
  width: 205px;
}

.four-circ {
  height: 250px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.four-circ .circle-perc-cont {
  height: 110px;
  width: 110px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
}

.four-circ .circle-perc-value {
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  color: #36a592;
  position: absolute;
  top: 297px;
}

.four-circ .circle-perc-value2 {
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  top: 297px;
  color: #e41970;
}

.four-circ .circle-perc-value3 {
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  top: 297px;
  color: #b900f6;
}

.four-circ .circle-perc-value4 {
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  top: 297px;
  color: #f37434;
}

.four-circ .circle-cont h5 {
  margin: 0px;
  font-size: 12px;
  color: var(--alt-color);
}

.four-circ .circle-cont h6 {
  margin: 20px 0 10px;
  font-size: 12px;
  font-weight: 400;
}

.four-circ .circle-cont {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.inner {
  width: 101px;
  height: 101px;
  border: 1px solid #cdcdcd;
  border-radius: 50%;
  box-shadow: inset -4px -4px 10px 1px rgb(0 0 0 / 8%);
}

.four-grid {
  display: grid;
  grid-gap: 3px;
  background-color: #f6f9fc;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.sum-salary,
.sum-att-role {
  background: #fff;
  padding: 20px;
}

.sum-salary:hover,
.sum-att-role:hover {
  background: #fcfcfc;
}

.sum-salary h6 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.sum-salary span {
  font-size: 26px;
  font-weight: 600;
  color: var(--alt-color);
}

.cn {
  align-items: center;
}

.two-grid {
  display: grid;
  grid-gap: 3px;
  background-color: #f6f9fc;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
}

.sum-att-role h5 {
  font-size: 24px;
  color: var(--alt-color);
  margin: 10px 0;
}

.sum-att-role h5 span {
  font-size: 14px;
  color: #cdcdcd;
  font-weight: 500;
}

.sum-att-role p {
  font-size: 16px;
  color: var(--alt-color);
  margin: 0 0 5px;
}

.sum-att-role>span {
  font-size: 12px;
  border-top: 2px solid #e4ebf2;
  padding-top: 2px;
  color: var(--alt-color);
  font-weight: 500;
}

.welcome-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
  color: var(--alt-color);
}

.welcome-part h1 {
  color: var(--alt-color);
  font-weight: 600;
  font-size: 32px;
}

/* End Dashboard Page */

/* Start Attendance Requests Page */
.time-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.time-cont .f-time {
  padding: 5px;
  width: 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--main-color);
  color: #fff;
  margin-bottom: 5px;
}

.time-cont .s-time::after {
  content: "";
  background-image: url(../images/turn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -15px;
  right: -25px;
}

.f-time span {
  width: 100%;
  text-align: center;
  height: 100%;
  outline: 5px solid #db4a4a;
  background: #db4a4a;
}

.time-cont .s-time {
  padding: 5px 10px;
  width: 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #797979;
  color: #fff;
  position: relative;
}

.att-requests .request-row div:nth-child(4) {
  grid-column: span 3;
}

.att-requests .request-row div:nth-child(5) {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
}

.att-requests .request-row div:nth-child(3) {
  grid-column: span 3;
}

.att-requests .request-row div:nth-child(2) {
  grid-column: span 3;
}

/* End Attendance Requests Page */

/* Start Payroll Page */
span.payroll-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 26px;
  font-weight: 600;
  position: relative;
}

.payroll-head h4 {
  margin: 0;
  color: var(--alt-color);
}

.payroll-head input {
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  margin-left: 15px;
  font-weight: 600;
  color: var(--alt-color) !important;
  font-size: 20px !important;
  cursor: pointer;
  position: absolute !important;
  right: 0;
}

.payroll-head input::-webkit-inner-spin-button,
.payroll-head input::-webkit-calendar-picker-indicator {
  height: 15px;
  width: 15px;
  padding: 5px;
  border: 1px solid var(--alt-color) !important;
  border-radius: 50% !important;
  background-color: #f1f5f8;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%);
  cursor: pointer;
}

.payroll-filter-section,
.payroll-table-section {
  margin-top: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 1px solid #cfcfcf;
  display: flex;
  position: relative;
  align-items: flex-end;
}

.payroll-filter-section input[type="text"],
.payroll-filter-section select {
  height: 30px;
  width: 100%;
  outline: 0;
  border: 1px solid #cfcfcf;
  font-size: 14px;
  padding: 0 10px;
  transition: 0.2s;
  background-color: #fff;
  border-radius: 0;
  color: var(--main-color);
}

.payroll-filter-section select:focus,
.payroll-filter-section input[type="text"]:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.payroll-filter-section label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  width: 33.33%;
  margin: 0 10px;
}

.payroll-filter-section label span {
  font-size: 12px;
  margin-bottom: 7px;
  color: var(--main-color);
}

.payroll-table {
  height: auto;
  width: 100%;
  border: 1px solid black;
  max-height: 100vh;
  overflow: auto;
}

.payroll-table.specific-table {
  margin-bottom: 50px;
}

.payroll-table-head {
  width: 100%;
  position: sticky;
  top: 0;
  background: var(--main-color);
  color: #fff;
  font-weight: 600;
  z-index: 1;
}

.payroll-table-foot {
  width: 100%;
  position: sticky;
  bottom: 0;
  background: var(--main-color);
  color: #fff;
  font-weight: 600;
}

.payroll-row {
  display: grid;
  grid-template-columns: 60px 240px 120px 120px 120px 120px 500px 120px auto;
  font-size: 10px;
}

.payroll-row>div {
  border-right: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #2c2c2c;
  position: relative;
}

.payroll-row>div:last-child {
  border-right: 0;
  min-width: 100px;
}

.payroll-row>div:nth-child(7) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.payroll-row .u-div {
  padding: 10px;
  border-bottom: 1px solid #2c2c2c;
  width: 100%;
  text-align: center;
}

.payroll-table-head .payroll-row div,
.payroll-table-foot .payroll-row div {
  background: var(--main-color);
}

.payroll-row .l-div {
  width: 100%;
  display: flex;
  height: 100%;
}

.l-div .li-div {
  padding: 10px;
  border-right: 1px solid #2c2c2c;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
}

.l-div .li-div:last-child {
  border: 0;
  flex: 1;
}

.payroll-table-foot .payroll-row {
  grid-template-columns: 540px 120px 120px 500px 120px auto;
  border: 0;
}

.payroll-table-foot .payroll-row>div:nth-child(4) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.payroll-filter-section button {
  width: 100px;
  font-size: 12px;
  height: 30px;
  border: 1px solid var(--main-color);
  color: #fff;
  background: var(--main-color);
  cursor: no-drop;
}

.payroll-table-section form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
}

.payroll-table-section form input[type="submit"] {
  padding: 10px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--main-color);
  font-size: 14px;
  font-weight: 600;
  color: var(--main-color);
}

.li-div input[type="number"] {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.li-div input[type="number"]:focus {
  cursor: text;
  border: 2px solid #ccd5e2;
}

.li-div:active input[type="text"] {
  display: flex;
}

.li-div input[type="text"]:hover {
  display: flex;
}

.payroll-table-head .payroll-row,
.payroll-table-foot .payroll-row {
  background: var(--main-color);
}

.payroll-table-foot .payroll-row div {
  border-bottom: 0;
}

.adding {
  background-color: transparent !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

form.adding-form {
  position: absolute;
  z-index: 10;
  right: 200px;
  background: var(--main-color);
  width: 300px;
  top: 245px;
  display: none;
}

.add-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  font-size: 10px;
  padding: 10px;
}

.add-menu label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}

.add-menu label input {
  background: #ffffff;
  border: 0;
  outline: 0;
  padding: 3px;
  color: var(--main-color);
  width: 70%;
}

.add-menu input[type="submit"] {
  color: #fff;
  background: #36485a;
  padding: 5px;
  width: 60px;
  font-size: 12px;
  margin: auto;
}

/* End Payroll Page */

/* Start Logs */

.logs-no {
  font-size: 12px;
  color: var(--alt-color);
  font-weight: 500;
  padding-bottom: 20px;
  border-bottom: 1px solid #cdcdcd;
}

.bk {
  display: block !important;
}

#c_log {
  display: flex;
  position: relative;
  color: #fff;
  padding: 5px 10px;
  top: auto;
  right: auto;
  margin: 0;
}

/* End Logs */

/* Start Contract  */
.specific-table .payroll-row {
  grid-template-columns: 100px 700px 800px 120px auto;
}

.specific-table .payroll-row>div {
  padding: 10px 0;
}

.specific-table .payroll-row>div:nth-child(2),
.specific-table .payroll-row>div:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  position: relative;
}

.specific-table .payroll-table-head .payroll-row>div:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 8%);
  z-index: 9;
}

.specific-table .payroll-table-body .payroll-row {
  font-size: 12px;
}

.specific-table .l-div .li-div {
  padding: 5px;
  border-right: 1px solid #2c2c2c;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  height: 50px;
  text-align: center;
  line-height: 14px;
}

.specific-table .l-div .li-div:last-child {
  border: 0;
}

.specific-table .payroll-table-body .payroll-row>div {
  height: 50px;
  border-bottom: 0;
}

.prof-details-section form input#submit {
  width: 200px;
  margin: 20px 0;
  padding: 10px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  position: absolute;
  display: none;
}

.no-result {
  padding: 20px 25px;
  font-size: 14px;
  color: var(--main-color);
  text-decoration: underline;
}

.prof-details-section input[type="submit"]#filter {
  background-image: url(../images/filter.png);
  background-size: contain;
  width: 15px;
  height: 15px;
  background-position: center center;
  padding: 5px;
}

form.filter_form {
  margin: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 18px;
  right: 20px;
}

.filter_form input[type="month"] {
  background: transparent;
  border: 0;
}

button#print_btn {
  font-size: 12px;
  background: var(--main-color);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  margin-bottom: 10px;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.payroll-table-body .error_mg {
  position: absolute;
  top: 10%;
  width: auto;
  text-align: center;
  background: #db4a4a;
  color: #fff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 5px;
  right: 40%;
}

.b-red {
  border: 2px solid rgb(248, 186, 186) !important;
}

.hv_under:hover {
  text-decoration: underline;
}

a.hv_under {
  width: 100%;
  padding: 10px;
}

a.deleted.hv_under:before {
  content: "";
  background: rgb(255 0 0 / 12%);
  width: 100%;
  position: absolute;
  left: -1px;
  height: 100%;
  bottom: 0;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

/* End Contract  */

/* Start Advance Page */
.advance-section {
  margin: 0 30px;
}

.advance-section .upperhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  padding: 20px;
  border: 1px solid #cdcdcd;
}

.advance-section .l-eso {
  display: flex;
  cursor: pointer;
}

.l-eso .img-prof {
  display: flex;
  height: 250px;
  width: 250px;
  overflow: hidden;
  border: 2px solid #cdcdcd;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.l-eso .infs {
  margin-left: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  color: var(--alt-color);
  font-weight: 400;
  cursor: pointer;
}

.infs .info-bx {
  display: flex;
  width: 500px;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #cdcdcd;
  padding-bottom: 10px;
  cursor: pointer;
}

.infs .info-bx:last-child {
  border: 0;
}

.infs .r-info {
  font-weight: 500;
  cursor: pointer;
}

.infs .l-info {
  cursor: pointer;
}

.img-prof img {
  width: auto;
  height: 100%;
}

div.new-btn {
  padding: 7px 20px;
  border: 1px solid var(--main-color);
  background: var(--main-color);
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.r-eso .new-request {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.new-request form {
  background: #fff;
  padding: 20px;
  border: 1px solid #cdcdcd;
  display: flex;
  flex-direction: column;
  width: 1000px;
  z-index: 10;
}

.new-request form h4 {
  margin: 0 0 15px;
  font-size: 16px;
  color: var(--alt-color);
}

.new-request form label {
  display: flex;
  width: 75%;
  justify-content: space-between;
  font-size: 14px;
  color: var(--alt-color);
  margin-bottom: 10px;
  position: relative;
}

.new-request form label input[type="number"],
.new-request form label textarea {
  width: 500px;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  padding: 5px 10px;
  outline: 0;
  font-size: 14px;
  color: var(--main-color);
}

.new-request form label input[type="number"]:focus,
.new-request form label textarea:focus {
  border: 1px solid #d3e3fa;
  outline: 3px solid #e7f1ff;
}

.new-request form label.amount::after {
  content: "EGP";
  position: absolute;
  right: -65px;
  top: 7px;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  width: 50px;
}

.new-request form label input[type="number"] {
  height: 33px;
}

.new-request form label.dur::after {
  content: "Month";
  position: absolute;
  right: -65px;
  top: 7px;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  width: 50px;
}

.new-request form input[type="submit"],
.cancelling {
  background: var(--main-color);
  color: #fff;
  border: 0;
  outline: 0;
  margin-top: 10px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.new-request form input[type="submit"]:hover,
.cancelling:hover {
  box-shadow: 0px 0px 0px black;
}

.cancelling {
  background: transparent;
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.new-request form input[type="submit"]:hover,
.cancelling:hover {
  box-shadow: 0px 0px 2px rgb(0 0 0 / 43%);
}

.black_screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 27%);
  z-index: 999999;
  /* backdrop-filter: blur(2px); */
  display: none;
}

.dn-body {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border: 1px solid #cdcdcd;
}

.hd-advance h4 {
  margin: 0;
  font-size: 20px;
  color: var(--main-color);
  font-weight: 600;
}

.hd-advance {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.hd-advance input[type="month"] {
  border: 0;
  font-size: 14px;
  color: var(--main-color);
  outline: 0;
}

.advance-table-head,
.advance-table-body {
  background: var(--main-color);
  font-size: 12px;
}

.advance-table-head {
  color: #fff;
}

.advance-table-body {
  background-color: transparent;
  color: var(--alt-color);
}

.advance-row {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  align-items: center;
  padding: 10px 20px;
}

.advance-table-body .advance-row:hover {
  background: #f9f9f9;
}

.advance-table-body .advance-row {
  border-bottom: 1px solid #cdcdcd;
}

.advance-table-body .advance-row:last-child {
  border-bottom: 0;
}

.advance-row div:nth-child(1),
.advance-row div:nth-child(2),
.advance-row div:nth-child(3),
.advance-row div:nth-child(4),
.advance-row div:nth-child(7) {
  grid-column: span 2;
}

.advance-row div:nth-child(5),
.advance-row div:nth-child(6) {
  grid-column: span 1;
}

.green {
  color: #57bc90;
}

.red {
  color: #db4a4a;
}

.prof-tools a i {
  font-size: 11px;
}

.error-mg:empty {
  display: none;
}

.advance-row.ongoing {
  background: #f9f9f9;
  border-right: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
}

.advance-row.ongoing:last-child {
  border-bottom: 1px solid #cdcdcd;
}

.advance-row div:nth-child(9) {
  display: flex;
  justify-content: flex-end;
}

a.agree,
a.reject {
  margin: 0 20px;
  font-size: 16px;
  color: #13b272;
}

a.reject {
  color: #d33c3c;
  margin: 0;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.fa-spinner {
  animation: loading 2s linear infinite;
}

/* End Advance Page */

/* Start Calendar Page */

#calendar {
  max-height: calc(100vh - var(--logo-height) - 120px);
  max-width: 100%;
  height: auto;
}

.fc-daygrid.fc-dayGridMonth-view.fc-view {
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
  border: 1px solid #cfcfcf;
  border-bottom: 0;
}

button.add_ph {
  border: 0;
  outline: 0;
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  padding: 10px 15px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}

button.add_ph:hover {
  opacity: 0.6;
}

button.add_ph i {
  margin: 0;
  margin-right: 5px;
}

.fc-toolbar-chunk {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
}

.fc-toolbar-chunk h2 {
  font-size: 20px !important;
  font-weight: 600;
  width: 200px;

  display: flex;
  justify-content: center;
  align-items: center;
}

button.fc-button.fc-button-primary {
  background: transparent;
  color: var(--main-color);
  border: 0;
  outline: 0;
}

button.fc-button.fc-button-primary:hover,
button.fc-button.fc-button-primary:focus {
  background-color: transparent !important;
  color: var(--main-color) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

button.fc-today-button.fc-button.fc-button-primary[title="This month"] {
  background: var(--main-color);
  color: #fff;
  font-size: 14px;
  text-transform: capitalize;
  border-radius: 0;
  padding: 7px 20px;
}

button.fc-today-button.fc-button.fc-button-primary[title="This month"]:hover {
  background: #3e546a !important;
  color: #fff !important;
  font-size: 14px !important;
  text-transform: capitalize !important;
  border-radius: 0 !important;
  padding: 7px 20px !important;
}

table.fc-scrollgrid.fc-scrollgrid-liquid {
  border: 0 !important;
}

.fc-theme-standard td {
  border-right: 0 !important;
}

.fc-bg-event {
  background: var(--main-color) !important;
}

/* td.fc-daygrid-day {
  height: 200px !important;
} */

.fc .fc-scroller::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.fc .fc-daygrid-body {
  margin: 0 !important;
  width: 100% !important;
}

.fc .fc-daygrid-day.fc-day-today {
  background: rgb(76 101 127 / 25%) !important;
}

.public-holiday form,
.public-holiday-event form {
  background: #fff;
  padding: 20px;
  width: 1000px;
  z-index: 99;
  display: flex;
  flex-direction: column;
}

.public-holiday,
.public-holiday-event {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: none;
}

.public-holiday form h4,
.public-holiday-event form h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 25px;
}

.public-holiday label,
.public-holiday-event label {
  display: flex;
  flex-direction: column;
}

.public-holiday label input,
.public-holiday label textarea {
  border: 1px solid #cdcdcd;
  padding: 10px;
  font-size: 14px;
  color: var(--alt-color);
  width: 100%;
  margin-bottom: 20px;
  border-radius: 0;
  outline: 0;
}

.public-holiday input[type="submit"] {
  width: 100%;
  background: var(--main-color);
  color: #fff;
  padding: 10px;
  font-size: 14px;
  margin: 0;
}

.public-holiday label span,
.public-holiday-event label span {
  font-size: 12px;
  margin-bottom: 5px;
}

.public-holiday-event label span {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--alt-color);
}

.public-holiday label input:focus,
.public-holiday label textarea:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.fc .fc-daygrid-day-frame,
.fc .fc-daygrid-day-top,
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
  cursor: pointer;
  transition: 0.3s;
}

.fc .fc-daygrid-day-top {
  font-size: 14px;
  font-weight: 500;
}

.public-holiday-event form div {
  font-size: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  color: var(--main-color);
}

.fc .fc-daygrid-day-frame:hover {
  background: whitesmoke;
}

.fc-day-other {
  opacity: 0.5;
}

.fc .fc-day-other .fc-daygrid-day-top {
  opacity: 1 !important;
}

/* End Calendar Page */
/* Start Footer */
.copyright-section {
  position: fixed;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  font-size: 12px;
  color: var(--main-color);
  background: linear-gradient(180deg, transparent, #fff);
  padding: 7px;
  border-radius: 5px 0px 0px 0px;
  width: 100%;
  text-align: center;
  z-index: 9;
}

.copyright-section img {
  height: 15px;
  margin-bottom: -3px;
}

/* End Footer */

/* Start Warehouse */
ul.warehouse-section {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

li.warehouse-box {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: #fff;
  padding: 16px;
  border: 1px solid #cfcfcf;
  text-transform: capitalize;
  position: relative;
  border-left: 3px solid var(--main-color);
  margin: 0 25px 25px 0;
  transition: 0.3s;
  transform: scale(0.7);
}

.wh-head {
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wh-head a.wh-title {
  color: var(--main-color);
}

.wh-head a.wh-title:hover {
  opacity: 0.6;
}

.wh-head button {
  border: 0;
  outline: 0;
  background: transparent;
  color: #323232;
  cursor: pointer;
  padding: 0;
}

a.wh-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.warehouse-box h5 {
  margin: 5px;
  width: 100%;
  color: #c7c7c7;
  font-weight: 400;
}

.infosr {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 14px;
}

.infosr .info-title {
  color: var(--main-color);
}

.infosr a {
  width: 100%;
  background: var(--main-color);
  color: #fff;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.infosr a:hover {
  opacity: 0.9;
}

span.ut {
  font-size: 12px;
  color: #a9a9a9;
  font-weight: 300;
}

.warehouse-edit-info form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

label.w100 {
  width: 100%;
}

.warehouse-edit-info {
  background: #fff;
  padding: 20px;
  border: 1px solid #cfcfcf;
  position: relative;
  height: 105px;
  overflow: hidden;
  transition: 0.3s;
}

.fold i {
  transition: 0.3s;
  color: var(--main-color);
}

.warehouse-edit-info form label {
  display: flex;
  flex-direction: column;
}

.warehouse-edit-info form label span {
  font-size: 14px;
  margin-bottom: 5px;
}

.warehouse-edit-info form label.h1 span {
  font-size: 16px;
}

.warehouse-edit-info label input {
  outline: 0;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  font-size: 16px;
  color: var(--main-color);
}

.warehouse-edit-info label.h1 input {
  font-size: 32px;
}

.warehouse-edit-info form label.w25 {
  width: 25%;
}

.warehouse-edit-info form label.w50 {
  width: calc(50% - 40px);
}

.warehouse-edit-info form select {
  width: 100%;
  background: transparent;
  padding: 2px;
  border-bottom: 1px solid #cdcdcd;
  border-radius: 0;
  color: var(--main-color);
}

.warehouse-edit-info form input[type="submit"] {
  width: 60px;
  background: var(--main-color);
  color: #fff;
  padding: 5px;
  font-size: 16px;
  margin: 0;
  position: absolute;
  right: 75px;
  top: 18px;
}

.warehouse-edit-info form input[type="submit"]:hover {
  opacity: 0.9;
}

button.fold {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

button.fold {
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  position: absolute;
  right: 25px;
  top: 25px;
  cursor: pointer;
  z-index: 9;
}

.warehouse-products {
  flex: 1;
}

.warehouse-products h5 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #888;
}

.wh-pr-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

span.npro {
  font-size: 12px;
  font-weight: 600;
  color: var(--main-color);
  float: right;
  margin: 3px 0;
}

.wh-pr-head label {
  width: 40%;
  position: relative;
}

.wh-pr-head input {
  width: 100%;
  outline: 0;
  border: 1px solid #cdcdcd;
  padding: 5px;
  font-size: 14px;
  color: var(--main-color);
}

.wh-pr-head label i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #888;
}

.wh-products-body {
  height: 480px;
  overflow: auto;
}

h3 span {
  font-weight: 300;
}

.pd-box-img {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  padding: 10px;
  border: 1px solid #cdcdcd;
  background: #fff;
}

.pd-box-img img {
  height: 100%;
  width: auto;
}

.wh-productbox-head {
  margin-top: 20px;
  height: 40px;
  font-size: 14px;
  background: #efefef;
  align-items: center;
  display: grid;
  padding: 0 20px;
  gap: 20px;
  color: var(--main-color);
}

.wh-productbox {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 10px;
}

.wh-productbox div:nth-child(1) {
  grid-column: span 3;
  display: flex;
}

.wh-productbox div:nth-child(2) {
  grid-column: span 3;
}

.wh-productbox div:nth-child(5),
.wh-productbox div:nth-child(6) {
  grid-column: span 2;
}

.wh-products-body .wh-productbox {
  border-bottom: 1px solid #cfcfcf;
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
  align-items: flex-start;
  color: #4c4c4ccc;
  height: 160px;
  cursor: pointer;
}

.wh-products-body .wh-productbox:hover {
  background-color: rgb(252, 252, 252);
}

.pd-box-name {
  margin-left: 10px;
  cursor: pointer;
}

.pd-box-name h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--main-color);
  cursor: pointer;
}

.wh-products-body .wh-productbox div {
  cursor: pointer;
}

.pd-box-name span {
  color: #888;
  cursor: pointer;
}

a.oper {
  position: relative;
  width: 150px;
  height: 40px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--main-color);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  gap: 10px;
}

a.oper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  transform: scaleX(0);
  transition: transform 0.5s ease-in-out;
  transform-origin: right;
}

a.oper:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

a.oper span {
  display: inline-block;
  z-index: 2;
  transition: 0.5s ease-in-out;
}

a.oper:hover span {
  color: #fff;
}

a.oper i {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 20px;
  background-color: var(--main-color);
  transition: 0.5s, width 0.5s, height 0.5s;
  transition-delay: 0s, 0.5s, 1s;
}

a.oper:hover i {
  background-color: #fff;
  width: 20px;
  height: 2px;
  transition-delay: 0s, 1s, 0.5s;
}

a.oper i::before {
  content: "";
  position: absolute;
  top: 0.6px;
  right: 0;
  width: 50%;
  height: 2px;
  background-color: transparent;
  rotate: 0;
  transition: 1s;
  transform-origin: right;
}

a.oper:hover i::before {
  background-color: #fff;
  rotate: 45deg;
  transition-delay: 1.5s;
}

a.oper i::after {
  content: "";
  position: absolute;
  top: -0.6px;
  right: 0;
  width: 50%;
  height: 2px;
  background-color: transparent;
  rotate: 0;
  transition: 1s;
  transform-origin: right;
}

a.oper:hover i::after {
  background-color: #fff;
  rotate: -45deg;
  transition-delay: 1.5s;
}

button.new-btn,
a.new-btn {
  outline: 0;
  background-color: var(--main-color);
  color: #fff;
  min-width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  padding: 15px 20px;
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(255 255 255 / 50%);
  border-radius: 5px;
  height: auto;
  width: auto;
}

.title-head button.new-btn:hover {
  opacity: 0.7;
}

.warehouse-edit-info label input:focus,
.warehouse-edit-info label select:focus {
  border-bottom: 1px solid var(--main-color);
}

.info-value {
  text-align: end;
}

.new-warehouse {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
}

form.new-ware {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  min-width: 900px;
  width: 80%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.new-warehouse h3 {
  margin-bottom: 25px;
}

.new-ware label {
  width: 100%;
  margin-bottom: 10px;
}

.new-ware label {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  color: var(--alt-color);
}

.new-ware label.w50 {
  width: calc(50% - 7px);
}

.new-ware label span {
  font-size: 14px;
}

.new-ware label input,
.new-ware label select {
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #cdcdcd;
  background-color: transparent;
  border-radius: 0;
  width: 100%;
  outline: 0;
  height: 100%;
  font-size: 14px;
}

.new-ware label input:focus,
.new-ware label select:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.wh-pr-head input:focus,
.wh-pr-head select:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.new-ware input[type="submit"] {
  width: 100%;
  background-color: var(--main-color);
  color: #fff;
  margin: 0;
  padding: 10px;
}

.new-ware label.name input[type="text"] {
  font-size: 20px;
}

.warehouse-sections {
  display: flex;
}

.warehouse-filtering {
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.warehouse-sections {
  margin-top: 20px;
}

.warehouse-sections {
  margin-top: 20px;
  gap: 20px;
}

.warehouse-filtering h4 {
  margin: 20px 0;
  color: #8888;
  font-weight: 600;
  font-size: 16px;
}

.warehouse-filtering h4:first-child {
  margin: 0 0 10px 0;
}

.warehouse-filtering .search input[type="text"] {
  width: 100%;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  padding: 5px;
  font-size: 14px;
  color: var(--main-color);
  transition: 0.3s;
}

.warehouse-filtering .search input[type="text"]:focus {
  border-bottom: 1px solid var(--main-color);
}

label.search:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: url(../images/search.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
}

label.search {
  position: relative;
}

.warehouse-filtering h5 {
  font-weight: 500;
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--main-color);
}

.setting-section.filter-type {
  padding: 0;
  margin: 0;
  border: 0;
}

.setting-section.filter-type ul li {
  text-transform: none;
}

.setting-section.filter-type .org {
  width: auto;
}

.cost-input,
.cost-input2 {
  width: 100%;
  display: flex;
  margin: 10px 0 20px;
  align-items: center;
  justify-content: space-between;
}

.cost-input .field,
.cost-input2 .field {
  width: 45%;
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: center;
}

.field input {
  width: 60%;
  height: 100%;
  margin-left: 12px;
  border: 1px solid #cdcdcd;
  outline: none;
  text-align: center;
  -moz-appearance: none;
  font-size: 14px;
  padding: 5px;
  color: var(--main-color);
  transition: 0.3s;
}

.field input:focus {
  border: 1px solid var(--main-color);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.cost-input .separator,
.cost-input2 .separator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.slider,
.slider2 {
  height: 5px;
  background-color: #ddd;
  border-radius: 5px;
  position: relative;
}

.setting-section.filter-type .org ul label .check {
  width: 25px;
  height: 25px;
  top: 0;
}

.setting-section.filter-type .org ul label {
  padding-left: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  font-size: 14px;
}

.slider .progress,
.slider2 .progress {
  height: 5px;
  left: 25%;
  right: 25%;
  position: absolute;
  border-radius: 5px;
  background-color: var(--main-color);
}

.range-input,
.range-input2 {
  position: relative;
}

.range-input input,
.range-input2 input {
  position: absolute;
  top: -5px;
  height: 5px;
  width: 100%;
  background: none;
  -webkit-appearance: none;
  pointer-events: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  background: #e0e0e0;
  border: 1px solid rgb(105, 105, 105);
  -webkit-appearance: none;
  pointer-events: auto;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background: #e0e0e0;
  border: 1px solid rgb(105, 105, 105);
  -webkit-appearance: none;
  pointer-events: auto;
  border-radius: 50%;
  cursor: pointer;
}

.warehouse-filtering h5.qnt {
  margin: 30px 0 15px;
}

.radios {
  display: flex;
  justify-content: center;
  align-items: center;
}

.radios label {
  display: flex;
  position: relative;
  width: 50%;
  align-items: center;
  padding-left: 10px;
  font-size: 14px;
  color: var(--main-color);
  cursor: pointer;
}

.radios input {
  visibility: hidden;
  cursor: pointer;
}

.radios label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  background: #fff;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  border: 1px solid var(--main-color);
  border-radius: 3px;
  cursor: pointer;
}

.radios label input:checked~span.checked {
  position: absolute;
  left: 2px;
  top: 50%;
  background: var(--main-color);
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 3px;
  z-index: 2;
}

ul.warehouse-products-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
}

.prod-img {
  width: 250px;
  height: 250px;
  display: flex;
  position: relative;
  justify-content: center;
  overflow: hidden;
}

.units {
  position: absolute;
  right: 0px;
  top: 10px;
  background: var(--main-color);
  padding: 10px;
  color: #fff;
  font-size: 12px;
  text-transform: capitalize;
  box-shadow: -1px 2px 4px 0px rgb(0 0 0 / 32%);
  z-index: 3;
  cursor: pointer;
}

li.product-box {
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 270px;
  border: 1px solid #cdcdcd;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
}

li.product-box:hover {
  box-shadow: 2px 3px 3px 2px rgb(0 0 0 / 8%);
  transform: scale(1.01);
}

.prod-info {
  text-transform: none;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  width: 100%;
  flex-direction: column;
  cursor: pointer;
  margin-top: 15px;
}

.prod-img img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.lf-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.lf-info span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--main-color);
}

span.code {
  font-size: 13px;
  color: #959595;
  margin-top: 2px;
}

.rt-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
}

.rt-info button {
  background: #fff;
  border: 0;
  outline: 0;
  cursor: pointer;
  text-decoration: underline;
  color: var(--main-color);
  padding: 0;
}

.product-details-tap {
  position: relative;
  z-index: 99;
}

.product-box-details {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.product-details-tap {
  background: #fff;
  width: 1000px;
  height: 700px;
  border: 1px solid #cdcdcd;
  text-transform: none;
}

.head-det h4 {
  margin: 20px;
  font-size: 20px;
  color: #5c5c5c;
}

.head-det {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid #cdcdcd;
  align-items: center;
  padding-right: 20px;
}

span.close {
  cursor: pointer;
  font-size: 32px;
  color: #bd5d5d;
}

.body-det {
  display: flex;
  flex-direction: column;
  margin: 10px 20px 20px;
  gap: 15px;
}

.upper-det {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.det-img {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 300px;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #cdcdcd;
}

.det-info {
  width: calc(100% - 340px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.det-sect {
  display: flex;
  width: calc(50% - 20px);
  justify-content: flex-start;
  font-size: 14px;
  flex-direction: column;
}

.det-sect.flx-down {
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row;
  gap: 10px;
}

.det-title {
  font-weight: 600;
  color: #5c5c5c;
  margin-bottom: 5px;
}

.det-value {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.det-sect:first-child .det-value {
  font-size: 22px;
}

.det-sect.w100 {
  width: 100%;
}

span.tag {
  font-size: 12px;
  background: var(--main-color);
  color: #fff;
  padding: 2px 10px;
  border-radius: 5px;
  margin: 0 5px;
}

.det-sect a:nth-child(2) {
  background: #fff;
  border: 1px solid var(--main-color);
  padding: 6px 12px;
  color: var(--main-color);
  font-size: 14px;
  box-shadow: 0px 0px 3px rgb(0 0 0 / 14%);
}

.det-sect a:nth-child(1) {
  background: #fff;
  padding: 6px 12px;
  color: var(--main-color);
  font-size: 14px;
}

.det-sect a:nth-child(1):hover {
  text-decoration: underline;
}

.det-value.desc {
  height: 57px;
  overflow: auto;
  display: flex;
  align-items: flex-start;
}

.head-list {
  background: #ebebebcd;
  color: var(--main-color);
}

.list-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 30px;
  font-size: 12px;
  padding: 7px 20px;
}

.list-row div {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.body-list {
  max-height: 235px;
  overflow: auto;
  border-top: 0;
  height: auto;
}

.list-row div:nth-child(7) {
  grid-column: span 1;
}

.list-row div:nth-child(8) {
  justify-content: center;
}

.list-row div:last-child {
  justify-content: flex-end;
  grid-column: span 1;
}

.list-row div a {
  color: var(--main-color);
}

.body-list .list-row:hover {
  background: #fdfdfd;
}

.body-list .list-row {
  border-bottom: 1px solid #efefef;
}

.body-list .list-row:last-child {
  border-bottom: 0;
}

.gr {
  color: #3f936e;
}

.bl {
  color: #267fc7;
}

.rd {
  color: #c32828;
}

/* End Warehouse */

/* Start Warehouse Operations */
.subhead {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.subhead-box {
  border: 1px solid #cdcdcd;
  padding: 20px;
  box-shadow: 1px 1px 6px rgb(0 0 0 / 8%);
  background: #fff;
}

.bx-title {
  font-weight: 600;
  font-size: 16px;
  color: #626262;
  margin-bottom: 10px;
}

.subhead-box.br {
  border-left: 5px solid #267fc7;
}

.subhead-box.rde {
  border-left: 5px solid #c32828;
}

.subhead-box.gne {
  border-left: 5px solid #3f936e;
}

.subhead-box.gne .nmber {
  background: #3f936e;
}

.subhead-box.rde .nmber {
  background: #c32828;
}

.subhead-box.br .nmber {
  background: #267fc7;
}

.nmber {
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  position: relative;
}

.subhead-box:hover .nmber::before {
  transform: scaleX(1);
  transform-origin: left;
}

.nmber::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 14%);
  transform: scaleX(0);
  transition: transform 0.5s ease-in-out;
  transform-origin: right;
}

.tble-head {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  align-items: center;
}

.tble-head a {
  background: var(--main-color);
  color: #fff;
  padding: 7px 20px;
}

.tble-head a i {
  font-size: 14px;
}

.sfbar {
  display: flex;
  align-items: center;
  position: relative;
}

.sfbar label {
  position: relative;
}

.sfbar label::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../images/search.png);
  background-size: contain;
  background-position: center;
  width: 20px;
  height: 20px;
}

.sfbar label input[type="text"] {
  outline: 0;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid #cdcdcd;
  width: 450px;
  color: var(--main-color);
}

.sfbar label input[type="text"]:focus {
  border: 1px solid #d3e3fa;
  outline: 4px solid #e7f1ff;
}

.sfbar button {
  background: transparent;
  outline: 0;
  border: 0;
  color: var(--main-color);
  cursor: pointer;
}

.filter-list h6 {
  margin: 0 0 10px;
  color: rgb(100, 100, 100);
}

.filter-list h6.sc {
  margin: 10px 0;
}

.filter-list select {
  width: 100%;
  background: transparent;
  border: 1px solid #cdcdcd;
  padding: 5px 20px;
  border-radius: 5px;
}

ul.filter-list {
  position: absolute;
  background: #fff;
  right: 0;
  top: 40px;
  padding: 20px;
  height: auto;
  border: 1px solid #cdcdcd;
  display: none;
}

ul.filter-list:hover {
  display: block;
}

.sfbar button:focus~ul.filter-list {
  display: block;
}

.oplist .list-row {
  grid-template-columns: repeat(16, 1fr);
}

.oplist .head-list .list-row {
  height: 45px;
  font-size: 14px;
}

.imgpf {
  overflow: hidden;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 5px;
}

.imgpf img {
  width: 100%;
  height: auto;
}

.oplist a.list-row {
  height: 45px;
  cursor: pointer;
}

.oplist a.list-row div {
  cursor: pointer;
}

.oplist .body-list {
  max-height: 500px;
}

a[title="Export All"] {
  color: var(--main-color);
  background: transparent;
  border: 1px solid transparent;
}

a[title="Export All"]:hover {
  color: var(--main-color);
  background: #0000000a;
  border: 1px solid #cdcdcd;
}

form.operation-form {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #cdcdcd;
}

.operation-form label {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.operation-form label input[type="text"],
.operation-form label input[type="datetime-local"],
.operation-form label select {
  font-size: 16px;
  padding: 7px;
  margin-top: 5px;
  border: 0;
  outline: 0;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  border-radius: 0;
  width: 100%;
}

.operation-form label input[type="text"]:hover,
.operation-form label input[type="datetime-local"]:hover,
.operation-form label select:hover,
textarea#int_notes:hover {
  border-bottom: 1px solid #cdcdcd;
}

.operation-form label input[type="text"]:focus-within~ul {
  display: flex;
}

.operation-form label input[type="text"]:focus,
.operation-form label input[type="datetime-local"]:focus,
.operation-form label select:focus,
textarea#int_notes:focus {
  border-bottom: 1px solid var(--main-color);
}

.operation-form ul {
  display: flex;
  flex-direction: column;
  width: auto;
  align-items: flex-start;
  font-size: 14px;
  padding: 10px 0;
  position: absolute;
  height: auto;
  top: 100%;
  border: 1px solid #cdcdcd;
  border-top: 0;
  background: #fff;
  display: none;
  z-index: 9;
}

.operation-form ul:hover {
  display: flex;
}

.oplist {
  padding: 20px;
  background: #fff;
  border: 1px solid #cdcdcd;
}

.operation-form ul li {
  padding: 7px 50px 7px 10px;
  text-transform: capitalize;
  cursor: pointer;
  width: 100%;
  text-align: start;
}

.operation-form ul li.cnew,
.operation-form ul li.pnew {
  color: var(--main-color);
}

.operation-form ul li:hover,
.operation-form ul li.active {
  background-color: #f5f5f5;
}

.operation-form h2 {
  margin: 5px 0 20px;
  font-weight: 600;
  color: #242424dd;
}

.operation-form .lables {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(3, 1fr);
}

.operation-form label span {
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: #8b8b8b;
}

.heads-opsform {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.labelso input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.labelso label input[type="radio"]:checked~span {
  color: var(--main-color);
  text-decoration: underline;
}

.labelso label {
  position: relative;
}

.labelso label span {
  padding: 7px 15px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.labelso {
  display: flex;
  align-items: center;
  justify-content: center;
}

.labelso label span:after {
  content: "";
}

.labelso label span:after {
  content: "";
  position: absolute;
  background: #cdcdcd;
  width: 1px;
  height: 50%;
  top: 1px;
  right: 0;
  transform: rotate(-30deg);
}

.labelso label span:before {
  content: "";
  position: absolute;
  background: #cdcdcd;
  width: 1px;
  height: 50%;
  bottom: 1px;
  right: 0;
  transform: rotate(30deg);
}

.labelso label:first-child {
  border-left: 1px solid #cdcdcd;
}

.labelso i:first-child {
  font-size: 14px;
}

.sumbits input[type="submit"] {
  background: var(--main-color);
  color: #fff;
  padding: 7px 12px;
  margin: 0;
}

.sumbits {
  margin-left: 50px;
  display: flex;
  align-items: center;
  position: relative;
}

.pnt:hover {
  color: var(--main-color);
  background: #0000000a;
  border: 1px solid #cdcdcd;
}

i.fa-solid.fa-print {
  margin: 0;
}

.pnt {
  color: var(--main-color);
  background: transparent;
  cursor: pointer;
  border: 1px solid transparent;
  height: 30px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.pnt-tap {
  display: flex;
  position: absolute;
  right: 0;
  top: 35px;
  border: 1px solid #cdcdcd;
  padding: 10px 0;
  height: auto;
  width: 150%;
  flex-direction: column;
  font-size: 14px;
  text-transform: capitalize;
  display: none;
}

ul.pnt-tap a {
  padding: 5px 10px;
  width: 100%;
}

ul.pnt-tap a:hover {
  background-color: #f5f5f5;
}

.product-oper-section {
  margin-top: 15px;
  padding: 0;
  width: 100%;
  border: 0;
  grid-column: span 3;
}

.product-oper-section h4 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #414141;
  font-weight: 600;
}

.product-oper-section .list-row {
  grid-template-columns: repeat(12, 1fr);
  cursor: pointer;
}

.product-oper-section .list-row div:first-child,
.product-oper-section .list-row div:nth-child(2),
.product-oper-section .list-row div:nth-child(6) {
  grid-column: span 3;
  cursor: pointer;
}

.product-oper-section .list-row div:nth-child(6) {
  justify-content: flex-start;
}

.product-oper-section .list-row div:nth-child(3),
.product-oper-section .list-row div:nth-child(4),
.product-oper-section .list-row div:nth-child(5) {
  grid-column: span 1;
}

.product-oper-section .list-row div {
  font-size: 14px;
}

.product-oper-section .list-row {
  height: 45px;
  padding: 0 20px;
  gap: 25px;
}

.product-oper-section .body-list {
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.body-list label {
  width: 100%;
}

.body-list label input {
  font-size: 14px !important;
  cursor: pointer;
}

.addline {
  padding: 10px 20px;
  font-size: 14px;
  color: var(--main-color);
  cursor: pointer;
}

label[for="daddress"],
label[for="shipto"] {
  display: none;
}

.new-cont label {
  width: 100%;
}

.new-cont {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}

.new-cont label span {
  font-weight: 600;
  color: #2c2c2c;
}

.new-cont label input {
  font-size: 12px !important;
}

label.pd5 {
  padding-top: 30px;
}

label.pd10 {
  padding-top: 10px;
}

label.wd50 {
  flex-direction: row;
  flex-wrap: wrap;
}

input.wd30 {
  width: 30% !important;
}

label.wd50 input {
  width: 100%;
}

input#contact_name,
input#product_name {
  font-size: 25px !important;
}

.lf-sec {
  width: 50%;
  padding-right: 20px;
}

textarea#int_notes {
  width: 100%;
  margin-top: 7px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  height: 120px;
}

.new-contact-details input[type="submit"] {
  margin-top: 20px;
  background: var(--main-color);
  color: #fff;
  padding: 7px 20px;
  margin-left: 0;
}

.list-row div.new-product-details {
  display: none;
  justify-content: center;
}

.body-det form {
  width: 100%;
}

.body-det form {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.wd75 {
  width: 70%;
}

.wd25 {
  width: 25%;
}

.wd50 {
  width: 48%;
}

label {
  position: relative;
}

input#product_img {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

label[for="product_img"] {
  align-items: flex-end;
}

span.img-pr {
  width: 100px;
  height: 100px;
  display: flex;
  overflow: hidden;
  justify-content: center;
  border: 1px solid #cdcdcd;
  position: relative;
}

span.img-pr img {
  width: 100%;
  height: auto;
}

.confor {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.confor label {
  flex-direction: row;
  align-items: center;
}

.confor label input {
  width: 30px;
}

.confor label span {
  color: var(--alt-color);
  font-weight: 500;
  font-size: 14px;
}

span.gn-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--main-color);
  border-bottom: 1px solid #cdcdcd;
  width: 100%;
  display: flex;
  margin: 15px 0 5px;
  padding-bottom: 3px;
  text-transform: uppercase;
}

.wd50 label {
  margin-top: 15px;
}

.wd50 label select {
  font-size: 14px;
}

label.tax:after {
  content: "%";
  width: 10px;
  height: 10px;
  right: 10px;
  top: 19px;
  position: absolute;
  font-size: 14px;
  color: #8b8989;
  padding: 5px;
  background: #fff;
}

label.price:after {
  content: "EGP";
  width: 10px;
  height: 10px;
  right: 20px;
  top: 19px;
  position: absolute;
  font-size: 14px;
  color: #8b8989;
  padding: 5px;
  background: #fff;
}

.mg-15 {
  margin-top: 15px;
}

label.row {
  flex-direction: row;
  align-items: center;
}

label.row span {
  margin-left: 12px;
}

.new-product-details input[type="submit"] {
  margin-top: 20px;
  background: var(--main-color);
  color: #fff;
  padding: 7px 20px;
  margin-left: 0;
}

.edit-i {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 4px rgb(0 0 0 / 11%);
  cursor: pointer;
  display: none;
}

span.img-pr:hover .edit-i {
  display: flex;
}

.shops-section .shops li.shop-part {
  width: 400px;
  flex-direction: column;
  background: #fff;
  height: 182px;
  border: 1px solid #cdcdcd;
  align-items: flex-start;
}

.shops-section .shop-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 15px 20px;
}

.shop-menu ul {
  position: absolute;
  flex-direction: column;
  right: -1px;
  top: 40px;
  background: #ffff;
  height: auto;
  border: 1px solid #cdcdcd;
  padding: 15px 15px 20px;
  display: none;
  align-items: flex-start;
  text-transform: capitalize;
  width: 210px;
}

ul.shops {
  text-transform: capitalize;
}

.shop-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--alt-color);
}

.shop-menu ul li a {
  padding: 5px 0;
  font-size: 14px;
}

.shop-menu ul li a.bl {
  color: var(--main-color);
  text-decoration: underline;
}

.shop-menu>span {
  padding: 9px 15px;
  border: 1px solid #cdcdcd;
  border-left: 0;
  background: #fff;
  z-index: 9;
  position: relative;
  border-bottom: 0;
  border-top: 0;
  top: -3px;
  right: -21px;
  cursor: pointer;
}

.shop-bod a {
  background: var(--main-color);
  padding: 7px 14px;
  font-size: 14px;

  color: #fff;
}

.shop-bod {
  margin: 10px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 360px;
}

.rside .header .lhead .closesession {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  color: var(--main-color);
  display: none;
}

.letting {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--main-color);
}

.letting div span {
  font-weight: 500;
}

.letting div {
  display: flex;
  justify-content: space-between;
  width: 230px;
}

.new-session-ness {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

form.new-sess {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  width: 600px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border: 1px solid #cdcdcd;
}

.new-sess h2 {
  text-align: center;
  width: 100%;
  font-size: 24px;
  color: #747474;
  font-weight: 600;
  border-bottom: 1px solid #cdcdcd;
  padding: 0 0 26px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 15px 0 35px;
}

.new-sess>label {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
}

.new-sess label span {
  font-size: 16px;
  margin-right: 100px;
  margin-left: 40px;
}

input#start_cash {
  outline: 0;
  border: 0;
  border-bottom: 2px solid #cdcdcd;
  text-align: center;
  width: 100px;
  margin-right: 20px;
  padding: 2px 0;
}

input#start_cash:focus {
  border-bottom: 2px solid var(--main-color);
}

.calc-btn,
.calc-btn2 {
  padding: 10px;
  border: 1px solid #cdcdcd;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: var(--main-color);
  cursor: pointer;
}

.calc-tap,
.calc-tap2 {
  position: absolute;
  left: 50%;
  box-shadow: 0px 0px 3px rgb(0 0 0 / 21%);
  top: 50%;
  background: #fff;
  width: 350px;
  height: 400px;
  transform: translate(-50%, -50%);
  border: 1px solid #cdcdcd;
  z-index: 99;
  padding: 15px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: none;
}

.calc-tap h4,
.calc-tap2 h4 {
  font-size: 20px;
  height: 35px;
  font-weight: 500;
  color: #494e58;
  margin: 0;
  width: 100%;
}

.calc-tap label,
.calc-tap2 label {
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 35px;
}

.calc-tap label input,
.calc-tap2 label input {
  width: 35px;
  outline: 0;
  border: 0;
  border-bottom: 2px solid #cdcdcd;
  margin-right: 20px;
  text-align: center;
}

.calc-tap label input:focus,
.calc-tap2 label input:focus {
  border-bottom: 2px solid var(--main-color);
}

.calc-tap label span,
.calc-tap2 label span {
  font-size: 14px;
  width: 80px;
}

.calc-tap .total,
.calc-tap2 .total {
  width: 100%;
  text-align: center;
  display: flex;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

.btm-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btm-btns button {
  cursor: pointer;
}

.void {
  color: var(--main-color);
  background: #fff;
  outline: 0;
  border: 0;
  padding: 5px 10px;
  cursor: pointer;
}

.solid {
  color: #fff;
  background: var(--main-color);
  outline: 0;
  border: 0;
  padding: 5px 10px;
  cursor: pointer;
}

.new-sess textarea {
  font-size: 14px;
  width: 100%;
  margin: 10px 0;
}

.subhead-sess {
  display: flex;
  padding: 0 50px;
  height: 50px;
  justify-content: space-between;
  background: var(--main-color);
  align-items: center;
  color: #fff;
}

.subhead-sess button {
  background: transparent;
  outline: 0;
  border: 0;
  color: #fff;
  margin: 0 20px;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.subhead-sess button i {
  margin: 0;
  position: relative;
}

.btns-subhead {
  height: 100%;
  display: flex;
}

.subhead-sess button:hover {
  background: #455b72;
}

i span {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #2196f3;
  font-size: 8px;
  height: 15px;
  padding-left: 1px;
  width: 15px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.curr-cash {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: #fff;
  color: var(--main-color);
  font-size: 14px;
}

.curr-cash span {
  font-weight: 700;
}

.cashier {
  display: flex;
  height: calc(100vh - 110px);
}

.lf-cashier {
  width: 1405px;
  width: 73.1%;
}

.rt-cashier {
  flex: 1;
  background: #fff;
  border-left: 5px solid #f1f5f8;
}

.cashier-lf-head {
  display: flex;
  width: 100%;
  margin: 5px;
  background: #fff;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
}

.catego button {
  background: transparent;
  outline: 0;
  border: 0;
  font-size: 14px;
  margin: 0 10px 0 0;
  color: var(--main-color);
  cursor: pointer;
}

.cashier-lf-head input.search {
  font-size: 14px;
  padding: 5px;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  width: 300px;
}

ul.cashier-lf-body {
  margin: 0 0 0 5px;
  text-transform: capitalize;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  height: auto;
}

.proimg {
  width: 130px;
  height: 130px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

li.pdcash-box {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  padding: 5px;
  background: #fff;
  border: 1px solid #cdcdcd;
  align-items: flex-start;
}

.proimg {
  width: 130px;
  height: 130px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #cdcdcd;
  margin-bottom: 5px;
}

.proname {
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--main-color);
}

ul.screen-product-list {
  height: 500px;
  overflow: auto;
  text-transform: none;
  border-bottom: 1px solid #cdcdcd;
}

li.product-item {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 15px;
  align-items: flex-start;
  cursor: pointer;
}

li.product-item:hover {
  background: whitesmoke;
}

.product-item .lf {
  width: 80%;
  cursor: pointer;
}

.product-item .rt {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 600;
  color: var(--main-color);
  cursor: pointer;
}

.lf .name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  cursor: pointer;
}

.lf .price span,
.lf .discount span {
  font-weight: 600;
  cursor: pointer;
}

.product-item .note {
  width: 100%;
  margin-top: 10px;
  color: #8d8d8d;
  cursor: pointer;
}

.cashier-screen .total {
  padding: 10px;
  font-weight: 600;
  text-align: right;
  width: 100%;
  font-size: 22px;
  border-bottom: 1px solid #cdcdcd;
}

.cashier-screen .total .taxes {
  font-weight: 400;
  font-size: 14px;
  color: #7c7c7c;
}

.extra-btns {
  height: 40px;
  display: flex;
  border-bottom: 1px solid #cdcdcd;
}

.extra-btns button {
  width: 50%;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: #303030;
  cursor: pointer;
}

.extra-btns button:first-child {
  border-right: 1px solid #cdcdcd;
}

.extra-btns button:hover {
  background: #fbfbfb;
}

.price,
.discount {
  cursor: pointer;
}

li.active-pro-item.product-item {
  background-color: #e6f2ff;
}

.imp-sect {
  display: flex;
}

.calculator-touch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 50%;
}

.calculator-touch button {
  height: 64px;
}

.calculator-touch button {
  height: 64px;
  background: transparent;
  outline: 0;
  border: 1px solid #cdcdcd;
  cursor: pointer;
}

.calculator-touch button:hover {
  background: #fbfbfb;
}

.calculator-touch button {
  height: 64px;
  background: #fff;
  outline: 0;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  position: relative;
  z-index: 9;
}

.calculator-touch button i {
  margin: 0;
}

.imp-sect .rt {
  display: flex;
  flex-direction: column;
  width: 50%;
}

button.customer-btn {
  height: 40px;
  background: transparent;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
}

button.customer-btn {
  height: 40px;
  background: transparent;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #cdcdcd;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: #303030;
  cursor: pointer;
}

button.customer-btn:hover {
  background: #fbfbfb;
}

button.pay-btn {
  height: 86%;
  border: 0;
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 9;
}

.custom-note .black_screen {
  z-index: 99;
}

.custom-note {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  display: none;
}

.custom-note-section {
  position: relative;
  z-index: 99;
  background: #fff;
  padding: 20px;
  border: 1px solid #cdcdcd;
  display: flex;
  flex-direction: column;
  width: 500px;
}

.custom-note-section textarea {
  width: 100%;
  margin-bottom: 10px;
}

.hed {
  font-weight: 500;
  margin-bottom: 15px;
}

.custom-note-section .btns button {
  outline: 0;
  border: 0;
  width: 100px;
  float: right;
}

.cashinout .black_screen {
  z-index: 99;
}

.cashinout .cashinout-form {
  position: relative;
  z-index: 999;
  background: #fff;
  padding: 20px;
}

.cashinout {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.secto label input[type="radio"] {
  display: none;
}

.secto label input[type="radio"]:checked~span.out {
  color: #fff;
  background-color: #db4a4a;
}

.secto label input[type="radio"]:checked~span.in {
  color: #fff;
  background-color: var(--main-color);
}

.secto label span {
  padding: 7px 14px;
  background: #efefef;
  border: 1px solid #cdcdcd;
  cursor: pointer;
}

input#amount {
  height: 40px;
  border: 1px solid #cdcdcd;
  outline: 0;
  width: 300px;
  padding: 3px 10px;
}

label[for="amount"]:after {
  content: "EGP";
  position: absolute;
  right: 10px;
  top: 3px;
  z-index: 9999;
  font-size: 14px;
  color: #c7c7c7;
}

.cashinout-form textarea {
  margin-top: 10px;
  border: 1px solid #cdcdcd;
  outline: 0;
  padding: 5px 10px;
  width: 100%;
  font-size: 14px;
  border-radius: 0;
}

.cashinout-form hr {
  margin: 20px 0 20px 0 !important;
  width: 100%;
}

.close-section {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.calc-tap2 {
  z-index: 99999 !important;
}

form.closing {
  position: relative;
  z-index: 9999;
  background: #fff;
  padding: 20px;
  width: 950px;
}

.hedso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cdcdcd;
}

.hedso h3,
.hedso h2 {
  margin: 10px 0 25px;
  font-size: 20px;
  font-weight: 500;
}

.gridso {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gridso ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  font-size: 15px;
}

.gridso ul li:first-child {
  color: var(--main-color);
  font-weight: 600;
}

label[for="close_cash"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

input#close_cash {
  width: 50%;
  margin-right: 10px;
  padding: 5px 10px;
  outline: 0;
  border: 0;
  border-bottom: 2px solid #cdcdcd;
  text-align: center;
}

.closing textarea {
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  border-radius: 0;
  margin-bottom: 25px;
}

.btm button {
  border: 0;
  padding: 7px 14px;
  font-size: 14px;
}

.btm button i {
  margin: 0;
}

.lside .sidebar ul li a span .title {
  display: none;
}

.lside *,
.lside {
  transition: 0.5s;
}

.lside .sidebar ul li a span {
  justify-content: center;
}

.ul.drop-down-menu {
  position: relative;
  box-shadow: "inset 0px 11px 15px -12px rgb(0 0 0 / 30%),inset 0px -11px 20px -15px rgb(0 0 0 / 30%)";
  width: 100%;
  left: 0;
}

.lside .sidebar ul li a span.arrow {
  display: flex;
}

.lside {
  border-right: 1px solid #cfcfcf;
  background-color: #f2f2f2;
}

.menu-open {
  width: 25px;
  height: 25px;
  padding-left: 3px;
}

input.hand {
  cursor: pointer;
}

.hide {
  display: none;
}

.home-section .head-section * {
  color: #fff;
}

.widgets-section {
  margin-bottom: 35px;
}

.widgets-grid {
  display: grid;
  gap: 20px 10px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.widget-bx {
  align-items: center;
  display: flex;
  border-radius: 3px;
  padding: 25px 20px;
  background-color: rgb(255 255 255);
  box-shadow: 0 3px 6px rgb(78 83 129 / 10%);
  position: relative;
  overflow: hidden;
  height: 140px;
  color: var(--alt-color);
  transition: 0.3s;
  border: 1px solid #ececec;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(20px);
  animation-name: fadein;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

ul.emp-sum li {
  opacity: 0;
  transform: translateY(20px);
  animation-name: fadein;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

a.widget-bx * {
  cursor: pointer;
}

.widget-head {
  font-size: 20px;
  font-weight: 600;
}

span.info {
  font-size: 12px;
  color: #949494;
}

.widget-value {
  font-size: 26px;
  font-weight: 500;
  color: var(--main-color);
}

.widget-bx svg {
  width: 75px;
  height: auto;
}

/* .widget-bx svg g circle,
.widget-bx svg g path {
  fill: var(--main-color);
} */

span.unit {
  font-size: 14px;
  font-weight: 300;
}

.quick-section {
  margin-bottom: 35px;
}

h4.quick {
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 500;
  color: #a1a1a1;
}

button.quick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  outline: 0;
  border: 1px solid #cfcfcf;
  padding: 10px 55px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #fff;
  transition: 0.3s;
  width: auto;
  height: 100%;
  font-size: 14px;
  color: var(--alt-color) !important;
}

button.quick:hover {
  box-shadow: 0 3px 6px rgb(78 83 129 / 10%);
}

.quick-btns i {
  background: var(--main-color);
  color: #fff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quick-btns {
  display: flex;
  gap: 25px;
}

.quick svg {
  height: 100px;
}

.widget-bx:hover {
  border: 1px solid var(--main-color);
}

.inputs.code-ext:after {
  position: absolute;
  content: "WH-";
  top: 52%;
  left: 20px;
  font-size: 14px;
  color: #9b9b9b;
}

.inputs.code-ext input {
  padding-left: 45px;
}

.op5 {
  color: #d5d5d5 !important;
}

input[disabled] {
  cursor: no-drop !important;
}

li.sug.new_supplier {
  color: var(--main-color) !important;
  font-weight: 500;
}

.income-statement thead {
  outline: 1px solid #cfcfcf;
}

thead {
  font-size: 14px;
  color: var(--main-color);
  background: #fff;
  border-bottom: 2px solid #cfcfcf;
}

thead th {
  font-weight: 500 !important;
}

thead th,
tbody td {
  padding: 12px 20px !important;
  border: 0;
  border-right: 1px dotted #c7c7c7;
  font-size: 14px;
}


tbody td {
  border-bottom: 1px solid #cfcfcf;
  font-size: 13px;
}

.income-statement tbody td {
  border-bottom: 1px solid transparent !important;
}

thead th:last-child,
tbody td:last-child {
  border-right: 0px;
}

.request-body-list .request-row:last-child {
  border: 0;
}

table tbody tr {
  border-bottom: 1px solid #cfcfcf;
  transition: 0.3s;
}

table.dataTable tbody tr:hover {
  background: #f4f4f4;
  color: var(--alt-color) !important;
}

td.sorting_1,
.sorting_desc {
  background: transparent;
}

table {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;
  word-wrap: break-word;
}

.dataTables_filter label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  gap: 5px;
  font-weight: 700;
  color: silver;
}

.dataTables_filter label input {
  width: 500px;
  padding: 7px 10px !important;
  outline: 0;
  border: 1px solid #cfcfcf !important;
  transition: 0.3s;
}

.dataTables_filter label input:focus {
  border: 1px solid #fae7d3;
  outline: 4px solid #fae7d3;
}

.dataTables_info {
  font-size: 14px !important;
}

.dataTables_filter {
  margin-bottom: 30px;
}

.dataTables_length {
  margin: 15px 20px;
  font-size: 14px;
}

.dataTables_length select {
  width: 100px;
  padding: 9px !important;
  margin: 0 10px;
  color: var(--main-color);
  background-color: #fff !important;
}

td button {
  color: var(--main-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  outline: 0;
  border: 0;
  cursor: pointer;
  margin-left: 15px;
  float: right;
}

.dataTables_info,
.dataTables_paginate {
  margin-top: 20px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: transparent !important;
}

.paginate_button i {
  color: var(--main-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: transparent !important;
  border: 1px solid var(--main-color) !important;
  background: var(--main-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover i {
  color: #fff;
}

.dataTables_paginate.paging_simple_numbers span .paginate_button {
  color: var(--main-color) !important;
  opacity: 0.8;
}

.dataTables_paginate.paging_simple_numbers span .paginate_button:hover {
  color: #fff !important;
}

.dataTables_paginate.paging_simple_numbers span .paginate_button.current {
  border: 1px solid #cfcfcf;
  background: #fff;
  box-shadow: 0px 0px 3px rgb(0 0 0 / 18%);
}

.dataTables_paginate.paging_simple_numbers span .paginate_button.current:hover {
  color: #fff !important;
}

.request-row.out {
  grid-template-columns: repeat(66, 1fr);
}

div.request-row.out div:first-child {
  grid-column: span 21;
}

div.request-row.out div:nth-child(6),
div.request-row.out div:nth-child(7),
div.request-row.out div:nth-child(8) {
  grid-column: span 8;
}

.resp-table {
  width: 100%;
  position: relative;
}

.curr {
  font-size: 18px;
  font-weight: 500;
}

#inv-edit-list .val {
  color: var(--alt-color);
}

.gaint {
  font-size: 23px !important;
}

a.hardcopy-go {
  color: var(--main-color);
  text-decoration: underline;
}

span.no-hardcopy {
  color: #f13e3e;
  font-size: 14px;
}

.main-table-style {
  width: 100%;
}

td a {
  color: var(--main-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  outline: 0;
  border: 0;
  cursor: pointer;
  margin-left: 15px;
  float: right;
  color: var(--main-color);
}

.main-table-style table {
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  overflow: hidden !important;
  border-bottom: 0 !important;
}

.main-table-style table thead {
  background: #f7f7f7;
}

.main-table-style table {
  background: #fff;
}

.filter-section {
  background: #fff;
}

button.view_from_trans.view_purchase {
  float: left;
  background: transparent;
  margin: 0 !important;
  padding: 0;
  width: 100% !important;
  justify-content: flex-start;
}

.listo.mony-list div.request-row.out div:nth-child(6) {
  grid-column: span 9;
  width: 189px;
  justify-content: flex-start;
  text-align: start;
}

.listo.mony-list div.request-row.out div:nth-child(5) {
  grid-column: span 8;
}

tfoot tr th {
  font-size: 13px;
  font-weight: 600 !important;
  color: var(--main-color);
}

.purchase-list .info .name {
  font-size: 16px;
  font-weight: 600;
}

.purchase-list .info .sku {
  font-size: 12px;
  color: var(--main-color);
}

a.go_inv {
  width: 100%;
  background: transparent;
  justify-content: flex-start;
  text-decoration: underline;
}

.paid.stock,
.closed.stock {
  background: transparent;
  justify-content: flex-start;
  font-weight: 600;
  font-size: 16px;
}

.pay_payment_section,
.payment_section_view,
.sell_form {
  position: absolute;
  top: 59px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0px;
  background-image: url(../images/bg.webp);
  background-position: center;
  background-color: #fffefd;
  border: 0px solid #cfcfcf;
  border-radius: 5px;
  width: 40%;
  height: 0px;
  overflow: hidden;
  transition: 0.1s;
  z-index: 9999999;
}

.inputs.w100 {
  width: 100%;
  margin-bottom: 10px;
}

.inputs.w50 {
  width: calc(50% - 10px);
  margin: 0;
}

.order_payment_st h6,
.payment_section_view h6 {
  margin: 0;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--main-color);
  opacity: 0.6;
  text-transform: uppercase;
  width: 100%;
}

.order_payment_st {
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0.2;
}

.payment_line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 18px;
  position: relative;
  color: var(--alt-color)
}

.payment_line:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  border: 1px dashed #e2c9b0;
  opacity: 0.5;
}

.payment_title {
  font-weight: 300;
}

.payment_value {
  font-weight: 600;
}

.pay_payment_section input[type="submit"],
.sell_form input[type='submit'] {
  margin: 0;
  width: 100%;
  background: var(--main-color);
  color: #fff;
  padding: 15px;
  margin-top: 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.serch {
  position: absolute;
  top: 15px;
  right: 0;
  width: 30%;
  height: 36px;
  display: flex;
  z-index: 2;
}

.serch input {
  font-size: 13px !important;
  height: auto !important;
  padding: 10px !important;
  border-radius: 5px !important;
  width: 100%;
  outline: 0;
  border: 1px solid #cfcfcf;
  font-size: 16px;
  padding: 0 10px;
  transition: 0.2s;
  background-color: #fff;
}

.serch input:focus {
  border: 1px solid #fae7d3;
  outline: 4px solid #fae7d3;
}

button#prnt_barcode {
  position: relative;
  outline: 0;
  border: 0;
  color: var(--main-color);
  font-size: 20px;
  cursor: pointer;
  background: #ececec;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  float: right;
  margin-top: -55px;
  margin-right: 13px;
}

span.unt {
  font-size: 12px;
  font-weight: 500;
  color: var(--alt-color);
}

span.stock {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}

.img-frame img {
  object-fit: contain;
  width: 100%;
}

button.edit-mode,
button.save-btn {
  position: relative;
  background: transparent;
  outline: 0;
  border: 0;
  border-radius: 5px;
  color: var(--main-color);
  height: 100%;
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgb(251 251 251 / 60%);
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(256 256 256 / 70%);
  z-index: 9;
}

button.edit-mode a,
button.save-btn a {
  padding: 15px;
}

button.save-btn {
  background: var(--main-color);
  color: #fff;
}

.hide {
  display: none !important;
}

.item-body {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;

}

.item-body .lt-body {
  width: 73%;
  min-width: 1200px;
}

.item-body .lt-body form {
  background: #fff;
  padding: 30px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
}

.item-body .rt-body {
  flex: 1;
  min-width: 350px;
  display: flex;
  flex-direction: column;
}

.lt-body .custom-form.custom-item-form {
  padding: 0;
  flex-wrap: wrap;
}

.lt-body input[type="text"]:disabled,
.lt-body select:disabled,
.lt-body input[type="date"]:disabled,
.lt-body input[type="number"]:disabled,
.lt-body textarea:disabled {
  border: 0;
  background-color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding-left: 0;
  cursor: default !important;
  color: var(--alt-color) !important;
  background-image: none !important;
}


.lt-body .form-section {
  margin-top: 0;

}

.lt-body form label {
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
}

.type_product {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  position: relative;
}

.type_product i {
  font-size: 12px;
  opacity: .4;
}

.type_product:hover .i-box {
  opacity: 1;
  transform: translateY(0px);
}

.i-box {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #cfcfcf;
  padding: 15px 10px 25px;
  font-size: 12px;
  border-radius: 5px;
  width: 350px;
  box-shadow: 0px 0px 6px hsl(0deg 0% 0% / 20%);
  transition: 0.5s;
  opacity: 0;
  transform: translateY(5px);
  z-index: 3;
}

.i-box a {
  color: var(--main-color);
  font-weight: 700;
}

.lt-body .comp-items.gd6 {
  height: auto;
}

.lt-body .invoice-list .request-body-list .request-row input:disabled {
  background: transparent;
}

.lt-body .listo {
  background: #fff;
  padding: 20px;
  border: 1px solid #cfcfcf;
  margin-bottom: 100px;
  position: relative;
}

.rt-body .inv-box {
  padding: 20px;
  background: #fff;
  border: 1px solid #cfcfcf;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgb(0 0 0 / 15%);
}

.info-w50 {
  width: 50%;
}

.info-w100 {
  width: 100%;
}

.section-inv-search {
  padding: 30px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
}

.rt-body hr.hr_form {
  margin: 20px 0 30px;
  width: 100%;
}

.rt-body .serch {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  margin-bottom: 20px;
}

.inv-listing {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  transition: 0.5s;
}

.inv-box h4 {
  margin: 0;
  font-size: 13px;
  color: var(--alt-color);
  opacity: 0.5;
}

.inv-box p {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  margin-top: 5px;
}

.inv-box p span.value {
  font-size: 35px;
  color: var(--main-color);
}

.info-w50 {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.info-w100 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.info-w100 button#prnt_barcode {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--main-color);
  outline: 0;
  border: 0;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  box-shadow: 0px 0px 6px rgb(0 0 0 / 34%);
  width: auto;
  height: auto;
  margin: 0;
}

img#barcode_view {
  width: 100%;
}

.main-inv-box.inv-box {
  border: 3px solid var(--main-color);
  outline: 7px solid rgb(173 100 32 / 17%);
}

.inv-box p a {
  text-decoration: underline;
}



a.dwn-btn {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--main-color);
  text-decoration: underline;
  margin-bottom: 35px;
}

.align-rt {
  align-items: flex-end !important;
}

.info-w100.btns {
  flex-direction: revert;
  gap: 10px;
}

.info-w100.btns button {
  flex: 1;
}

.info-w100.btns button {
  outline: 0;
  background-color: var(--main-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 12px;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  padding: 10px;
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(255 255 255 / 50%);
  border-radius: 5px;
  height: auto;
  width: auto;
  flex: 1;
  gap: 10px;
}

button.view_btn {
  background: rgb(251 251 251 / 60%) !important;
  border-bottom: 2px solid rgb(0 0 0 / 8%) !important;
  border-top: 2px solid rgb(256 256 256 / 70%) !important;
  color: var(--main-color) !important;
}

.info-w100.btns button a {
  display: flex;
  gap: 10px;
  width: 100%;
  color: inherit;
  justify-content: center;
}

span.no-ware {
  font-size: 14px;
  opacity: 0.5;
}

h4.heads {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 300;
  opacity: 0.5;
  text-decoration: inherit;
  text-transform: capitalize;
}

.canvas-container {
  width: 95%;
  height: 495px;
}

.canvas-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 35px auto 45px;
  position: relative;
}

.y_title {
  top: -5px;
  left: 0;
}

.y_title,
.x_title {
  position: absolute;
  font-weight: 700;
  color: #acacac;
  font-size: 16px;
}

.x_title {
  bottom: -25px;
  right: 0;
}

ul.emp-sum .name span:empty {
  display: none;
}

.trans-box {
  background: transparent;
  box-shadow: none;
}

.users-list ul.emp-sum li a {
  margin: 15px 0 0;
  padding: 15px 20px;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgb(78 83 129 / 10%);
}

.trans-box .head-section {
  border-radius: 4px;
}

.users-list.emo {
  overflow: visible;
}

.users-list ul.emp-sum li a>div:nth-child(2) {
  grid-column: span 5;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

span.circle_gn {
  position: relative;
  background: #4caf50;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #7fcb82;
  outline: 2px solid #b2e5b4;
  box-shadow: 0px 0px 8px #4caf50;
}

span.max_count {
  font-size: 16px;
  font-weight: inherit;
  color: var(--main-color);
}

form .inv-title input.inv_number {
  width: 800px;
  background: transparent;
  border: 0;
  outline: 1px solid #cfcfcf;
  font-size: inherit;
  font-weight: inherit;
  transition: 0.3s;
  cursor: pointer;
  padding: 12px 15px;
  height: 50px;
}

form .inv-title input.inv_number:focus {
  background-color: #fff;
  border: none;
  outline: 1px solid #cfcfcf;
  cursor: text;
}

.bank_choose,
.amount_bank_choose {
  visibility: hidden;
}



.total-gd.gaint * {
  font-weight: 700 !important;
  color: var(--main-color);
}

.total-value.minus *,
.total-value.minus {
  color: #F44336;
}

tfoot * {
  font-size: 16px !important;
}

.img_cont_item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid #cfcfcf;
}

.img_cont_item img {
  object-fit: cover;
  width: auto;
  height: 100%;
}

ul.suggestion li.sug>span {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul.subsuggestion li.sug>span {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul.subsuggestion li.sug>span span.itemD {
  font-size: 12px;
  font-weight: 400;
  color: var(--main-color);
}

ul.suggestion li.sug>span span.itemD {
  font-size: 12px;
  font-weight: 400;
  color: var(--main-color);
}

button.delete_row {
  text-decoration: none !important;
  padding: 5px !important;
  border: 1px solid #cfcfcf !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 13%);
  cursor: pointer;
}

.edit_manue_invy .request-row>div:nth-child(2),
.edit_manue_invy .request-row>div:nth-child(3) {
  grid-column: span 7 !important;
}

.edit_manue_invy .request-row>div:nth-child(7) {
  grid-column: span 1 !important;
}

.inputs.amount_bank_num_choose {
  display: none;
}

.invoice-list .request-row>div.hidden {
  display: none;
}

.lside .sidebar ul li div.drop-down a span.arrow {
  display: none;
}

.income-part h3,
.vat-part h3 {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.headso .inputs {
  font-size: 18px;
  font-weight: 400;
  color: var(--main-color);
  margin-right: 5px;
}

.headso input {
  background: transparent;
  outline: 0;
  border: 0;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 5px;
  cursor: pointer;
}

.headso input::-webkit-calendar-picker-indicator {
  opacity: 0.2;
  cursor: pointer;
  /* Adjust the opacity value as needed */
}

.income-part div.dataTables_length,
.income-part div.dataTables_info,
.income-part div.dataTables_paginate,
.income-part div#supplierslist_filter {
  display: none;
}

.income-part table.dataTable thead>tr>th.sorting_asc:before,
.income-part table.dataTable thead>tr>th.sorting_desc:after,
.income-part table.dataTable thead>tr>td.sorting_asc:before,
.income-part table.dataTable thead>tr>td.sorting_desc:after,
.income-part table.dataTable thead>tr>th.sorting_asc:after {
  display: none;
}

.income-part .main-table-style table thead {
  background: transparent !important;
}

.income-part .main-table-style table {
  background: transparent;
  border: 0px;
  border-radius: 0px;
  border-bottom: 0px !important;
  overflow: visible !important;

}

.balance-sheet .main-table-style table {
  border-top: 1px solid #b2b2b2;
}

.employee-section.request-section.income-statement {
  background: #fff;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #cfcfcf;
  width: 1000px;
  margin: auto;
}

.income-part tbody td {
  border-right: 1px dotted transparent !important;
}

.income-part thead th {
  color: var(--alt-color);
  text-decoration: underline;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-right: 0px !important;
  cursor: pointer;
}

.income-part.balance-sheet thead th,
.income-part.balance-sheet tbody tr td,
.income-part tbody tr td {
  padding: 10px 20px !important;
}

.income-part table.dataTable tbody tr:last-child {
  font-weight: 600;
}

.income-part table#supplierslist4 thead tr th:empty,
.income-part table#supplierslist8 thead tr th:empty {
  padding: 0px 20px !important;
  border: 0px;
}

.income-part table#supplierslist4 tbody tr:last-child {
  position: relative;
}

.income-part table#supplierslist8 tbody tr:last-child {
  position: relative;
}

.income-part table#supplierslist4 tbody tr:last-child td,
.income-part table#supplierslist8 tbody tr:last-child td {
  padding-top: 15px !important;
}

.income-part table#supplierslist4 tbody tr:last-child:after {
  content: "";
  width: 100%;
  height: 1px;
  background: transparent;
  position: absolute;
  left: 0;
  top: 0;
  border-top: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2;
}

.income-part table#supplierslist8 tbody tr:last-child:after {
  content: "";
  width: 100%;
  height: 1px;
  background: transparent;
  position: absolute;
  left: 0;
  top: 0;
  border-top: 1px solid #b2b2b2;
  border-bottom: 1px solid #b2b2b2;
}

.income-part table.dataTable tbody tr:hover td:last-child,
.income-part table.dataTable tbody tr:hover td:nth-child(2) {
  background: #f9f9f9;
}

.income-part table.dataTable tbody tr:hover td:first-child {
  background: #ededed;
}

.income-part table.dataTable tbody tr:last-child td:last-child {
  text-decoration: underline;
}

.income-part table.dataTable tbody tr td:last-child {
  display: flex;
  align-items: center;
}

.balance-sheet table.dataTable tbody tr td span {
  display: inline;
}

h2.head_of_sheet {
  margin: 0;
  padding: 10px 20px;
  text-align: center;
  /* background: var(--main-color);
  color: #fff;  */
  font-weight: 300;
  font-size: 22px;
  text-transform: uppercase;
}

.income-part.balance-sheet thead th {
  text-decoration: none;
}

/* .income-part.balance-sheet table#supplierslist4 tbody tr:last-child,
.income-part.balance-sheet table#supplierslist8 tbody tr:last-child {
  background: #575757;
  color: #fff;
} */

.cash-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.cash-history {
  flex: 1;
  margin-bottom: 50px;
}

.cash-report {
  flex: 0.6;
  padding-left: 20px;
  border-left: 1px solid #cfcfcf;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  gap: 20px 20px;
  position: sticky;
  top: 100px;
}

.cash-box.w100 {
  width: 100%;
}

.cash-box.w50 {
  width: calc(50% - 10px);
}


.widget-bx.cash-box {
  border: 1px solid var(--main-color);
}

.widget-bx.cash-box {
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  height: auto !important;
}

.widget-bx.cash-box.cashout {
  border: 1px solid #d42215;
}

.widget-bx.cash-box.cashin {
  border: 1px solid #2a962e;
}

.cash-box.cashin * {
  color: #2a962e;
}

.cash-box.cashout * {
  color: #d42215;
}

.widget-txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cash-history h4 {
  margin: 0 0 15px 0px;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.5;
}

.cash-history .resp-table {
  background: #fff;
  border: 1px solid #cfcfcf;
  border-bottom: none;
}

.cash-history table thead {
  background: #f7f7f7;
}

.cash-history table td a {
  float: none;
  width: auto;
  height: auto;
  display: inline;
  background: transparent;
  margin: 0 5px;
  text-decoration: underline;
}

.i-box.b-box {
  top: -100%;
  padding-bottom: 20px;
  width: 250px;
}

button.delete_order {
  background: #F44336;
  color: #fff;
}

.confirm_delete_page,
.confirm_delete_page_trans,
.asset_details_page {
  position: fixed;
  z-index: 9999999999;
  background: #fff;
  padding: 0px;
  border: 0px solid rgb(207, 207, 207);
  top: 59px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 0;
  overflow: hidden;
  transition: 0.1s;
}

.asset_details_page {
  /* height: auto; */
  width: 1000px;
  /* padding: 20px 25px; */
  /* border: 1px solid rgb(207, 207, 207); */
}

/* 
.black_screen {
  display: block !important;
} */

.confirm_delete_page .custome-head h3,
.confirm_delete_page_trans .custome-head h3,
.asset_details_page h3 {
  font-size: 20px;
  text-transform: initial;
}

button.confirm_delete_btn,
button.confirm_delete_btn_trans {
  margin: 20px 0 0 0;
  width: 100%;
  padding: 10px;
  background: #f44336;
  outline: 0;
  border: 0;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

form.inv-body:hover::-webkit-scrollbar-thumb {
  background: #c5a485;
}

form.inv-body::-webkit-scrollbar-thumb {
  background: transparent;
}

form.inv-body::-webkit-scrollbar-track {
  background: transparent;
}

form.inv-body::-webkit-scrollbar {
  width: 10px;
}

.email_wonder {
  position: relative;
}

.email_wonder:after {
  content: "@wonder-eg.com";
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 14px;
  opacity: 0.5;
  background: #fff;
}

.trial_list table,
.trial_list_2 table {
  width: 100%;
  border-bottom: 1px solid #cfcfcf !important;
}

.trial_list td a {
  width: 100%;
  background: transparent;
  float: left;
  margin: 0;
  justify-content: flex-start;
}

.trial_list td a:hover .name {
  text-decoration: underline;
}

.trial_list td a * {
  cursor: pointer;
}

.add_new.new_account {
  width: 700px;
}

.new_account .form-section .gd6 {
  margin-bottom: 15px;
}

.new_account .form-section .gd6:last-child {
  margin: 0;
}

.new_account .custom-form {
  padding: 0;
}

.new_account input[type="submit"] {
  margin: 0;
}

.share_payment input[type='radio'] {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}


.inputs.radio_type {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.radio_type label {
  position: relative;
  width: 50%;
  display: flex;
}

span.radio_label {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #cfcfcf;
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: var(--alt-color);
  cursor: pointer;
}

.share_payment input[type='radio']:checked~span.radio_label.withdraw {
  color: #d42215;
  border: 1px solid #d42215;
  box-shadow: 0px 0px 10px;
  font-weight: 600;
}

.share_payment input[type='radio']:checked~span.radio_label.fund {
  color: #2a962e;
  border: 1px solid #2a962e;
  box-shadow: 0px 0px 10px;
  font-weight: 600;
}

.cash-details {
  padding: 12px 20px;
  background: #fff;
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
}

.cash-details h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
}

.cash-sec {
  margin-bottom: 10px;
}

.cash-details input[type="submit"] {
  background: var(--main-color);
  color: #fff;
  width: 100%;
  padding: 12px;
  margin: 0;
  margin-top: 20px;
  border-radius: 5px;
}

span.pay_method {
  justify-content: flex-start;
  background: #f4f4f4;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

span.pay_method i {
  opacity: 0.3;
}

button.close,
button.closes,
button.close_confirm,
button.close_asset,
button.close_final,
button.close_not_final,
button.close_visible {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--main-color);
  border: 1px solid #cfcfcfcf;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.pay_payment_section.expense_form,
.sell_form {
  width: 1200px;
}

.expense_form .invoice-list .request-row.request-head-list div,
.sell_form .invoice-list .request-row.request-head-list div {
  padding: 8px 15px;
  font-weight: 500;
}

.expense_form .subcomp-list .request-row>div:first-child,
.sell_form .subcomp-list .request-row>div:first-child {
  grid-column: span 12;
}

.expense_form .subcomp-list .request-row>div:nth-child(2),
.expense_form .subcomp-list .request-row>div:nth-child(3),
.expense_form .subcomp-list .request-row>div:nth-child(4),
.sell_form .subcomp-list .request-row>div:nth-child(2),
.sell_form .subcomp-list .request-row>div:nth-child(3),
.sell_form .subcomp-list .request-row>div:nth-child(4) {
  grid-column: span 4;
  justify-content: flex-start;
  position: relative;
}

.expense_form .employee-section.request-section,
.sell_form .employee-section.request-section {
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  padding: 10px;
  margin: 0 10px;
}

.expense_form .request-body-list .request-row:hover,
.sell_form .request-body-list .request-row:hover {
  background-color: #fff;
}

span.sign {
  display: inline-block;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  text-align: center;
  padding: 1px;
  color: #fff;
}

span.sign.out {
  background-color: #d42215;
}

span.sign.in {
  background-color: #2a962e;
}

a.s-menus.active-sup {
  color: var(--main-color) !important;
}

.cash-history table#transactions {
  border-bottom: 1px solid #cfcfcf;
}

#duevat thead tr th:nth-child(2),
#duevat tbody tr td:nth-child(2) {
  width: 170px;
  text-align: left !important;
}

#duevat thead tr th,
#duevat tbody tr td {
  text-align: left !important;
}

form.filter_date_range {
  display: flex;
  gap: 10px;
}

form.filter_date_range .inputs label {
  font-size: 18px;
  font-weight: 400;
  color: var(--main-color);
}

form.filter_date_range .inputs {
  gap: 5px;
  flex-direction: row;
  margin-bottom: 0px !important;
  padding: 0px !important;

}

form.filter_date_range input[type="date"] {
  background: transparent;
  outline: 0;
  border: 0;
  height: auto;
  width: auto;
  font-size: 18px;
  padding: 0;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 5px;
  cursor: pointer;
}

form.filter_date_range input[type="date"]:focus {
  border: none;
  outline: none;
  border-bottom: 1px solid var(--main-color);
}

.vat-part .filter_date_range input[type="submit"] {
  outline: 0;
  background-color: var(--main-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  transition: 0.3s;
  padding: 5px 23px;
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(255 255 255 / 50%);
  border-radius: 5px;
  height: auto;
  width: auto;
}

.vvat table {
  border-bottom: 1px solid #cfcfcf;
}

.vvat table#custvatreport thead th:empty {
  border-right: 0;
}

.vvat table#custvatreport thead th:before,
.vvat table#custvatreport thead th:after {
  display: none;
}

.vvat tfoot td {
  padding: 12px 20px !important;
  font-weight: 600 !important;
}

.table_heading {
  padding: 12px 20px !important;
  border-bottom: 1px solid #b2b2b2;
  color: var(--main-color);
  font-weight: 500;
  font-size: 14px;
}

button.delete_btn {
  height: auto;
  width: auto;
  border: 0;
  transition: 0.3s;
  padding: 15px 20px;
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(255 255 255 / 50%);
  border-radius: 5px;
  cursor: pointer;
  background: #F44336;
  color: #fff;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 10px 10px 10px
}

button.rev-btn a {
  color: inherit;
  padding: 15px;
  display: flex;
  align-self: center;
  justify-content: center;
  gap: 10px;
}

button.rev-btn {
  position: relative;
  background: transparent;
  outline: 0;
  border: 0;
  border-radius: 5px;
  color: var(--main-color) !important;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgb(251 251 251 / 60%);
  border-bottom: 2px solid rgb(0 0 0 / 8%);
  border-top: 2px solid rgb(256 256 256 / 70%);
  z-index: 9;
}

.asset_contain {
  display: flex;
  flex-direction: column;
}

.asset_contain .up-contain {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.lt-contain .asset_img {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #cfcfcf;
}

.asset_img img {
  object-fit: contain;
  width: 100%;
}

.rt-contain {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 10px;
}

.asset_detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.asset_detail div:first-child {
  font-size: 12px;
  color: grey;
  font-weight: 400;
}

.asset_detail div:last-child {

  font-size: 18px;
  color: var(--alt-color);
  font-weight: 500;

}

.down-contain h3 {
  font-size: 18px;
  color: grey;
  font-weight: 600;
}

.table_1 table {
  table-layout: auto;
}

.table_1 table th,
.table_1 table td {
  text-align: left;
}

.table_1 table th:first-child,
.table_1 table td:first-child {
  width: 75px;
  opacity: 0.5;
}


.sell_form span.item_limit2 {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  right: 25px;
  text-align: end;
  color: #bcb1b1;
}

.lside .sidebar ul li div.drop-down:hover a span.arrow {
  rotate: 45deg;
}

button.edit_emp_btn {
  gap: 5px;
  padding: 5px 15px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0 10px 0 0;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
  transition: 0.2s;
  cursor: pointer;
  outline: 0;
}

.prof-infos span a {
  text-decoration: underline;
}

a.delete_order {
  color: #fff;
  background: #F44336;
}

.pd-form .comp-items.gd6 {
  overflow: visible;
}

.pd-form.lt-body form label {
  margin-bottom: 5px;
}

.pd-form .custom-form.custom-item-form {
  margin-bottom: 20px;
}

.lt-body.pd-form {
  margin-bottom: 60px;
}

table .name {
  font-size: 18px;
  font-weight: 500;
}

.info .profission {
  font-size: 12px !important;
}

.custom-form.transfer-form {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
  flex-wrap: nowrap;
}

.tp-warehouse {
  display: flex;
  flex-direction: column;
  width: 25%;
  min-width: 400px;
}

span.arr {
  display: flex;
  justify-content: center;
  margin: 10px 0 15px;
}

span.arr i {
  background: var(--light-color);
  color: var(--main2-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bt-warehouse {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-list {
  border: 1px solid #cdcdcd;
  min-height: 500px;
  background: #fff;
  margin: 0 10px;
  box-shadow: inset 0px 0px 11px hsl(0deg 0% 0% / 9%);
}

.search-row {
  display: grid;
  grid-template-columns: 7% 26% 20% 14% 14% 14% 5%;
  font-size: 14px;
  align-items: center;
}

.search-row>div {
  padding: 10px 12px;
  position: relative;
}

.search-head {
  color: var(--main-color);
  z-index: 0;
  position: relative;
  border-bottom: 2px solid #cfcfcf;
  background: #fff;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 25%);
}

.search-head .search-row {
  font-weight: 500;
}

.search-body .search-row {
  border-bottom: 1px solid #ededed;
}

.search-row .img-frame {
  padding: 0;
  border-radius: 0;
}

.search-row .name {
  font-weight: 600;
}

.search-row .sku {
  font-size: 12px;
  color: var(--main-color);
}

.img_conatainer {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #cfcfcf;
}

.img_conatainer img {
  object-fit: contain;
  width: 100%;
}

form .wh-box .inputs>span {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

ul.suggestion.suggest-inv {
  top: 110%;
  width: calc(100% - 20px);
}

.suggest-inv .sug>div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.suggest-inv .sug>div span {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
}

.suggest-inv .sug>div span.itemD {
  font-weight: 400;
  font-size: 12px;
  color: var(--main-color);
}

ul.suggestion.suggest-inv * {
  cursor: pointer;
}

.head-of-income {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  gap: 5px;
}

.head-of-income h3 {
  font-size: 18px;
}

.date-of-income {
  font-size: 14px;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.date-of-income i {
  text-decoration: none !important;
}

input#income_taxes {
  border: 0;
  height: auto;
  font-size: 14px;
  padding: 3px !important;
  margin: 0px 6px;
  min-width: 20px;
  width: 58%;
  text-align: left;
}

input#income_taxes:focus {
  outline: 1px solid var(--main-color);
  background: #fff;
}

.head-of-income .logo_frame img {
  width: 100%;
  object-fit: contain;
}

.head-of-income .logo_frame {
  width: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.income-statement .main-table-style {
  border-bottom: 3px solid var(--alt-color);
  margin-bottom: 30px;
}

#income-foot {
  margin-bottom: 30px;
  text-align: center;
  font-size: 14px;
  color: #959595;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotated {
  transition: transform 0.5s ease;
}

.rotated {
  transform: rotate(180deg);
}

.balance-sheet table.dataTable tbody tr:last-child td:nth-child(2) {
  text-decoration: underline;
}

.not_section input {
  width: auto !important;
}

.not_section input[type=checkbox] {
  width: 25px !important;
}

.not_section label span {
  color: var(--alt-color) !important;
}

.not_section .head label span {
  color: var(--main-color) !important;
}

span#curr_lang svg {
  width: 20px;
  height: 20px;
}

ul#lang_list svg {
  width: 20px;
  height: 20px;
}

span#curr_lang {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  direction: ltr;
  gap: 10px;
  padding: 7px 12px;
  background: #f7f7f7;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

span#curr_lang:hover {
  background: #ececec;
}

ul#lang_list {
  position: absolute;
  top: 110%;
  right: 0;
  direction: ltr;
  background: #f7f7f7;
  list-style-type: none;
  margin: 0;
  width: 100%;
  padding: 10px 15px;
  border-radius: 10px;
  display: none;
  height: auto;
  box-shadow: 0px 0px 10px lightgrey;
  border: 1px solid #cfcfcf;
}

#lang_list li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 7px 5px;
  border-bottom: 1px solid #cfcfcf;
  gap: 10px;
  transition: 0.3s;
}

#lang_list li:hover {
  background: #ececec;
}

#lang_list li:first-child {
  border-radius: 5px 5px 0px 0px;
}

#lang_list li:last-child {
  border-bottom: 0px solid #cfcfcf;
  border-radius: 0px 0px 5px 5px;
}

.lside .sidebar ul li a span {
  font-size: 0.85rem;
}

.change-lang-login {
  position: fixed;
  top: 20px;
  left: 20px;
}


span.sti_cr_db {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #9c9c9c;
}

input.wrong {
  border: 1px solid #fd4343 !important;
  background: rgb(255 0 0 / 4%) !important;
}

form input[type="number"].wrong:focus {
  border: 1px solid #fd4343;
  outline: 4px solid #ffb4b4;
}

.add_new_item input[disabled] {
  opacity: 0.5;
}