/* [data-luno="theme-blue"] {
    --primary-color: #e65100;
    --secondary-color: #02638e;
    --primary-rgb: 230, 81, 0;
    --chart-color1: #e65100;
    --chart-color2: #6382D8;
    --chart-color3: #8D61A5;
    --chart-color4: #90476F;
    --chart-color5: #02638e;
    --chart-color6: #28AA6E;
    --chart-color7: #f9e93f;
    --chart-color8: #C62828;
    --chart-color9: #4b5eaa;
    --chart-color10: #e7a160;

    --primary-gradient: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
    --secondary-gradient: linear-gradient(145deg, var(--secondary-color), var(--primary-color));


} */
body.layout-2 .wrapper {

  box-shadow: 0px 0px 0px 0px !important;
  /* border-left: 2px solid #f8f6f2 !important; */
}

body.layout-2 .wrapper .page-header .header-right>li .nav-link:hover {
  background: none !important;
  color: none !important;
}

body.layout-2 .sidebar {

  box-shadow: 0px 0px 0px 0px !important;
  /* border-right: 2px solid #f8f6f2 !important; */
}

/* body.option2 .wrapper .page-toolbar {
   color: #181818 !important;
} */

.offcanvas {
  z-index: 999999 !important;

}

img {
  filter: none !important;
}

body.layout-2 .wrapper .page-header {
  z-index: 99 !important;
}

.offcanvas-backdrop.show {
  z-index: 99999 !important;
}

.sidebar.sidebar-mini {

  z-index: 0 !important;
}

img:hover {
  filter: saturate(0.5) !important;
}


/* body.layout-1 .sidebar {
   background: linear-gradient(180deg, #ffffff, #f8eef3, #e0e4f5) !important;

} */

.table.card-table tr td,
.table.card-table tr th {
  border-bottom: 0.01px dashed var(--border-color) !important;
}

/* .bg-green_mkr {
   background-color: #28aa71 !important;
  border-color: #28aa71 !important;
} */

/* .bg-white_mkr {
   background-color: white !important;
  border-color: #28aa71 !important;
} */

.shadow {
  box-shadow: 0 0.3rem 0.55rem rgb(25 26 28 / 15%) !important;
}

/* .circle {
   background-color: #ffffff !important;
  border: 1px solid #28aa6e !important;
} */

.page-body {
  margin-bottom: 3vh;

}

.sidebar {
  bottom: 0;
  width: 100%;
}

/* body {
   background-color: #f1f2f4;
} */


/*
.border-right {
   border-right:1px solid #999 !important;

} */

/* body.layout-1 .wrapper .page-header {
   background: #f1f2f4 !important;
} */

/* body.layout-1 .wrapper .page-header {
   background: #faf7f9 !important;
} */


.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0rem !important;
}

.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0rem !important;
}

/* .primary.dropdown-toggle.show {
   background-color: #fff !important;
  color: #fff !important;
  border-color: #4b5eaa;
} */

/* .btn-outline-primary.dropdown-toggle.show {
   background-color: #fff !important;
} */

/* .nav-tabs.tab-card .nav-link.active,
.nav-tabs.tab-card .nav-link:hover {
   border-color: #e65100 !important;
} */

.nav-tabs.tab-card .nav-link {
  border-bottom: 5px solid transparent;
}

/* body.layout-1 .sidebar .menu-list .m-link:hover,
body.layout-1 .sidebar .menu-list .m-link.active,
body.layout-1 .sidebar .menu-list .ms-link:hover,
body.layout-1 .sidebar .menu-list .ms-link.active {
   color: #02638e !important;
} */

/* body.layout-1 .sidebar .menu-list .ms-link::before {
   background-color: #02638e !important;
} */


/* body.layout-1.h-menu .wrapper .page-header {
   border-color: #263b73 !important;
} */

/* body.layout-1.h-menu .sidebar {
   background: linear-gradient(118deg, #ffffff, #f8eef3, #e0e4f5) !important;
} */

/* body.layout-2 .sidebar:hover::-webkit-scrollbar-thumb {
   background: #263b73;
} */

/* body.layout-2 .sidebar .menu-list .m-link:hover,
body.layout-2 .sidebar .menu-list .m-link.active {
   background: linear-gradient(154deg, #e65100, #d4682c) !important;
} */

/* body.layout-2 .sidebar .menu-list a[aria-expanded="true"].m-link {
   background: linear-gradient(154deg, #e65100, #d4682c) !important;
} */



/* .border-primary {
   border-color: #4b5eaa !important;
} */



.chart-text-color6 {
  color: var(--chart-color6) !important;
}

.chart-text-color7 {
  color: var(--chart-color7) !important;
}

.chart-text-color8 {
  color: var(--chart-color8) !important;
}

.chart-text-color10 {
  color: var(--chart-color10) !important;
}

.w310 {
  width: 310px;
}




/* body.option2 .wrapper .page-toolbar h1,
body.option2 .wrapper .page-toolbar .h1 {
   color: var(--color-900);
} */



/* body.option2 .wrapper .page-toolbar .input-group .btn {
   border-color: rgb(66 66 66 / 10%) !important;
} */

/* body.option2 .wrapper .page-toolbar .input-group .form-control {
   border-color: rgb(66 66 66 / 10%) !important;
} */



.bg-success {
  /* background: #28aa6d32 !important;
  color: #28aa6e !important; */
  font-weight: 800 !important;
}

/* .text-success {
   color: #28aa6e !important;
} */

body.layout-2 .sidebar.sidebar-mini .menu-list>li>.m-link {
  font-size: 13px !important;
}

.bg-danger {
  /* background: #c628282c !important;
  color: #e16060 !important; */
  font-weight: 800 !important;
}

/* .text-danger {
   color: #C62828 !important;
} */

.bg-warning {
  /* background: #f9963f39 !important;
  color: #F9973f !important; */
  font-weight: 800 !important;
}

/* .bg-teal {
   background-color: #20c997 !important;
} */

/* .bg-cyan {
   background-color: #0dcaf0 !important;
} */


.text-warning {
  color: #F9973F !important;
}

/* .bg-yellow {
   background: #dad61f !important;
} */

/* .text-yellow {
   color: #dad61f;
} */

/* .btn {
  border-radius: 2rem !important;
  padding: calc(0.3rem + 1px) calc(1.1rem + 1px);

} */
.customcssforprofilepic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.btn {
  font-size: 0.875rem ;
  padding: .1rem .5rem ;

}

.button {
  background-color: #02638e !important;
  border: 1px solid #02638e !important;
  text-transform: uppercase;
  font-size: 0.875rem ;
  padding: .1rem .5rem ;

}

.btn.btn-lg,
.btn-group-lg>.btn {
  padding: .3rem;
  font-size: 1rem;
}

.attbg {
  background-image: url("assets/images/dashboard/bgimg.svg");
  /* border: 1px solid red; */
}

.borad {
  border-radius: 0.25rem !important;
}

.rmargin {
  margin-left: 0 !important;
  margin-right: 0 !important;

  padding: 0.7rem !important;
}

[data-luno="theme-blue"] .rmargin {
  /* background: #f2f2f2; */
  background: #fff;
  /* border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem; */
  border-radius: 0.75rem;
}

[data-theme="dark"] [data-luno="theme-blue"] .rmargin {
  background: #212324;
}

/* .btn-custom {
   color: #ffffff;
  background-color: #02638e !important;
  border-color: #02638e !important;
} */

/* .btn-custom:hover {
   color: #ffffff;
} */

.fprop {
  /* color: #e65100 !important; */
  font-size: 18px !important;
  font-weight: 700 !important;
}

.bpad {
  padding-bottom: 0.1rem !important
}

.wid {
  width: 97.9% !important;
}

.nav-item a svg {
  width: 1.4rem !important;
}

.mt-custom {
  margin-top: 2.2rem !important;
}

.g-custom {
  --bs-gutter-x: 0rem !important;
}

.sticky-top {
  position: sticky !important;
  top: 0 !important;

}



.cntrl {
  width: 95% !important;
}

/* .btn-outline-pink {
   background-color: #fff;
  border-color: #ee3d96;
  color:#ee3d96;
} */

/* .btn-outline-pink:hover {
   background-color: #ee3d96;
  border-color: #ee3d96;
  color:#fff;
} */

/* .devider{border-top: 2px dashed #f9a823; height: 1px; color: transparent; margin: 30px 0px;} */

/* .devider_1{border-top: 1px dashed #ee3d96; height: 1px; color: transparent;} */

.avtar_md {
  width: 120px !important;
  height: 120px !important;
}

.divider_2 {
  /* border-right: 1px dashed #ee3d96; */
  height: 1px;
  color: transparent;
}

/* .profile_family a {color: var(--color-600) !important;}
.profile_family a:hover {color:var(--secondary-color) !important;}  */


/* Interne css */
/* input::placeholder {
   color: #181818 !important;
} */

input[type="text"]:read-only,
select:read-only {
  /* color: #939393; */
  padding-left: 7px;
  color: #181818;
  /* background-color: #fff !important; */
}

body.layout-2 .sidebar .menu-list .m-link:hover .fill-primary,
body.layout-2 .sidebar .menu-list .m-link.active .fill-primary {
  fill: var(--white-color) !important;
}

a {
  /* color: var(--secondary-color); */
  text-decoration: none;
}

/* .form-control:focus,
.form-select:focus {
   color: #212529 !important;
} */

#Pending-leaves {
  display: none;
}

/* .bg-light_1 {
   background: #fbfbfb !important;
} */

/* .border-bottom_1 {
   border-bottom: 1.5px dashed #e65100 !important;
} */

input:focus {
  box-shadow: none !important;
}

.step-app.h-wizard-demo4>.step-content {
  background-color: transparent !important;
}

.bg-info {
  /* background: rgb(79 184 201 / 30%) !important;*/
  /* color: #4fb8c9 !important;  */
  color: #237e8d !important;
  font-weight: 800 !important;
}

#yes_disease {
  display: none;
}

#yes_disease.show {
  display: block;
}

#yes_criminal {
  display: none;
}

#yes_criminal.show {
  display: block;
}

/* .btn-outline-primary {
   border-color: #e65100 !important;
  color: #e65100 !important;
} */

/* .btn-outline-primary:hover {
   border-color: #e65100 !important;
  background-color: #e65100 !important;
  color: #fff !important;
} */

/* .border-left {
   border-left: 1px dashed var(--secondary-color) !important;
} */

#external-events {
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 150px;
  padding: 0 10px;
  /* border: 1px solid #ccc;
  background: #eee; */
}

#external-events .fc-event {
  margin: 1em 0;
  cursor: move;
}

#calendar-container {
  position: relative;
  z-index: 1;
  margin-left: 200px;
}

.holiday-red {
  background-color: #F59BAD;
  color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 15px;
  /* margin-right: 15px; */
  font-size: 13px;
}

.holiday-blue {
  background-color: #9796F2;
  color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 15px;
  /* margin-right: 15px; */
  font-size: 13px;
}

.holiday-red a,
.holiday-blue a {
  color: #fff !important;
  cursor: all-scroll;
}

.holiday-red .edit-delete a,
.holiday-blue .edit-delete a {
  cursor: pointer;
}

#add-holidays,
.member-action {
  display: none;
}

#disease tbody tr td {
  border: 0;
  padding: .5rem .5rem;
}

.btn-check:focus+.btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: none !important;
}

.add-disease-button {
  width: 20px;
  height: 20px;
}

.add-disease-button i {
  font-size: 12px;
  vertical-align: text-top;
  line-height: 1.5;
}

.my-self {
  display: none;
}

/* .offcanvas input[type="text"]:read-only {
   color: #939393;
  background-color: #e9ecef !important;
} */

/* select {
   color: #181818 !important;
} */

#Quarter-name,
#yearly,
#filter_Quarter-name {
  display: none;
}

.page-item.disabled .page-link {
  background-color: transparent !important;
  border-color: transparent !important;
  font-size: 24px;
  padding: 0px 9px 0px 0px;
}

.page-item.active .page-link,
.page-item:hover .page-link {
  border-radius: 50%;
}

.page-item.next.disabled .page-link {
  padding: 0px 0px 0px 9px;
}

/* .page-item:hover .page-link {
   color: #181818;
} */

/* .card-header {
   padding: 0.9rem 1.5rem !important;
} */

/* .bg-outline-secondary {
   color: #02638e;
  border:  1px solid #02638e;
} */

/* .avatar.no-thumbnail.bg-warning {
   background-color: #f9963f10 !important;
} */

.form-control,
.form-select {
  border-radius: 0.2rem;
}

textarea.form-control {
  border-radius: 0.2rem;
}

input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  /* color: #bfbfbf !important; */
  opacity: 1;
  /* Firefox */
}

textarea::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  /* color: #bfbfbf !important; */
  opacity: 1;
  /* Firefox */
}

/* :-ms-input-placeholder {
   Internet Explorer 10-11
   color: #bfbfbf !important;
} */

/* ::-ms-input-placeholder {
   Microsoft Edge
   color: #bfbfbf !important;
} */

/* :disabled{
  background-color: #e9ecef !important;
} */
.offcanvas .form-control[disabled],
.offcanvas .form-control[readonly],
.offcanvas fieldset[disabled] .form-control {
  background: none !important;
  /* background-color: #e9ecef !important;
  color: #bfc3d0 !important; */
  /* opacity: 1; */
}

.subtxt {
  text-transform: none !important;
  /* color: #02638e !important; */
}

.table tr td {
  /* color: var(--color-800); */
  padding: 0.6rem 0.5rem;
}

.text-muted {
  /* color: #464646 !important; */
  /* color: #464646 !important; */
    font-size: 12px;
}


.table.card-table tr td,
.table.card-table tr th {
  white-space: normal;
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
  box-shadow: none !important;
}

#lightbox {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 999;
}

#lightbox .close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 1rem;
}

#lightbox img {
  height: 700px;
  overflow: auto;
}

.gallery {
  cursor: pointer;
}

.gallery img {
  /* width: 40px; */
  width: 71px;
    height: 86px;
}

#flexbox {
  width: 100%;
  height: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  position: fixed;
  z-index: 99999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #9595956e;
}

/* NO BORDER SPINNER */
.nb-spinner {
  width: 75px;
  height: 75px;
  margin: 0;
  background: transparent;
  border-top: 4px solid #e65100;
  border-right: 4px solid transparent;
  border-radius: 50%;
  -webkit-animation: 1s spin linear infinite;
  animation: 1s spin linear infinite;
}

@-webkit-keyframes rotate {
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@-webkit-@keyframes spin {
  -webkit-from {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }

  -webkit-to {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }

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

@keyframes spin {
  from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }

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


@media (max-width: 1024px) {
  .sidebar.sidebar-mini {

      z-index: 1021 !important;
  }

  body.layout-2 .sidebar.sidebar-mini .menu-list>li>.m-link {
      flex-direction: inherit;
  }

  body.layout-2 .sidebar.sidebar-mini .menu-list>li>.m-link span.ms-2 {
      margin-left: .5rem !important;
  }

  body.layout-2 .sidebar.sidebar-mini {
      width: 200px;
  }

  body.layout-2 .sidebar.sidebar-mini .sidebar-title+.dropdown,
  body.layout-2 .sidebar.sidebar-mini .create-new {
      display: block;
  }
}

@media (max-width: 786px) {
  .step-app.h-wizard-demo4>.step-steps>li::after {
      width: 100%;
  }
}

@media (max-width: 578px) {
  body.layout-2 .sidebar.sidebar-mini {
      width: 90%;
  }
}

/* for dark mode */


.white-logo {
  display: none;
}

[data-theme="dark"] [data-luno="theme-blue"] input[type="text"]:read-only,
[data-theme="dark"] [data-luno="theme-blue"] select:read-only,
[data-theme="dark"] [data-luno="theme-blue"] .ypad {
  background-color: #212324 !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .breadcrumb-item.active,
[data-theme="dark"] [data-luno="theme-blue"] .breadcrumb-item {
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .text-muted {
  color: #8f8f8f !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .table tr th {
  border-color: #353535 !important;

}

[data-theme="dark"] [data-luno="theme-blue"] .table tr td {
  border-color: #353535 !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .white-logo {
  display: block;
}

[data-theme="dark"] [data-luno="theme-blue"] .dark-logo {
  display: none;
}

[data-theme="dark"] [data-luno="theme-blue"] .alert-success {
  color: #28aa6e;
}

[data-theme="dark"] [data-luno="theme-blue"] .alert-danger {
  color: #e16060;
}

[data-theme="dark"] [data-luno="theme-blue"] .alert-warning {
  color: #F9973F;
}

[data-theme="dark"] [data-luno="theme-blue"] .alert-info {
  color: #4fb8c9;
}

[data-theme="dark"] [data-luno="theme-blue"] .form-control::placeholder,
[data-theme="dark"] [data-luno="theme-blue"] .form-control,
[data-theme="dark"] [data-luno="theme-blue"] select {
  color: #bdbdbd !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .dropify-wrapper {
  background-color: #222;
  border: 2px solid #2c2c2c;
}

[data-theme="dark"] [data-luno="theme-blue"] .dropify-wrapper .dropify-message span.file-icon {
  color: #6c6c6c;
}

[data-theme="dark"] [data-luno="theme-blue"] .dropify-wrapper:hover {
  background-image: linear-gradient(-45deg, #151515 25%, transparent 25%, transparent 50%, #151515 50%, #151515 75%, transparent 75%, transparent);
}

[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu {
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .list-group-item-action:hover,
[data-theme="dark"] [data-luno="theme-blue"] .list-group-item-action:focus {
  color: #cbcbcb;
  background-color: #0f0f0f;
}

[data-theme="dark"] [data-luno="theme-blue"] .form-control:disabled,
[data-theme="dark"] [data-luno="theme-blue"] .form-control[readonly],
/* [data-theme="dark"] [data-luno="theme-blue"] input[type="text"]:read-only {
  background-color: #131414 !important;
} */

[data-luno="theme-blue"] {
  background-color: #f9f9f9 !important;
}

[data-theme="dark"] [data-luno="theme-blue"] {
  background-color: #1d1f20 !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .card {
  background-color: #212324 !important;
}

.offcanvas .show-disabled.form-control[disabled] {
  background-color: #e9ecef !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .offcanvas .show-disabled.form-control[disabled] {
  background-color: #131414 !important;
}



[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker {
  background-color: #1b1d1f;
  border: 1px solid #292929;
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker:after {
  border-bottom: 6px solid #1b1d1f;
}

[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker .ranges li:hover {
  color: #cbcbcb !important;
  background-color: #0f0f0f !important;
}

form sup.mandatory {
  top: -0.1em;
  font-size: 14px;
  color: #f52a2a !important;
}

.modal {
  z-index: 1050;
  background-color: rgb(25 26 28 / 30%);
}

.modal .candidate-modal {
  z-index: 999 !important;
  background-color: rgb(25 26 28 / 30%) !important;
}

.bs-datepicker-container {
  z-index: 1100 !important; /* Ensure it's above modal */
}

.modal-backdrop.show {
  display: none;
}


.success-modal i,
.warning-modal i {
  font-size: 4rem;
}

.identity-value {
  border: 0;
  padding: 0;
  font-weight: 700;

}

.field-icon {
  cursor: pointer;
}

.identity-value:focus-visible {
  outline: none !important;
}

input[type="text"].identity-value:read-only {
  color: #464545;
}

body.option2 .wrapper .page-toolbar .text-warning {
  color: #F9973F !important;
}

.border-left {
  border-left: 1px dashed #007185 !important;
}

.success .info p {
  border: 2px solid rgb(40, 199, 111);
  font-size: 45px;
  border-radius: 100%;
  width: 70px;
  height: 70px;
  padding: 16px 14px;
  line-height: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.success p {
  text-align: center;
}

.delete .info p {
  border: 2px solid #ED0A51;
  font-size: 45px;
  border-radius: 100%;
  width: 70px;
  height: 70px;
  padding: 14px 13px;
  line-height: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.delete p {
  text-align: center;
}

.attendance-data tr td {
  border: 1px solid #fff;
  text-wrap: nowrap;
  font-size: 14px;
  position: relative;
  cursor: auto;
  /* width: 10px; */
  width: 450px;
}

.attendance-data tr td.Present {
  background-color: #6CE38D;
}

.attendance-data tr td.late {
  background-color: #FEB777;
}

.attendance-data tr td.Absent {
  background-color: #FF6B6B;
}

.attendance-data tr td.grey {
  background-color: #e5e5e5;
}

.attendance-data tr td.holiday{
  background-color: #d0cbcb;
}

.attendance-data tr td.gray {
  background-color: #f1f1f1;
}

.attendance-data tr td.regularization {
  background-color: #665696	;
  cursor: pointer;
}

.attendance-data tr td.leave {
  background-color: #02638e;
  /* cursor: pointer; */
}


.attendance-data .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.Present-dot {

  background-color: #6CE38D;

}

.absent-dot {
  background-color: #FF6B6B;
}

.late-dot {
  background-color: #FEB777;
}

.leave-dot {
  background-color: #02638e;
}

.Regularization-dot {
  background-color: #665696;
}


.grey-dot {
  background-color: #d0cbcb;
}

.attendance-data .data-para {
  padding: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border: solid 1px #d5d5d5;
  position: absolute;
  top: 3rem;
  left: 0;
  width: max-content;
  z-index: 9;
  display: none;
  font-size: 13px;
}

.Present-data.data-para {

  border-top: 2px solid #4bcb90;

}

.attendance-data tr td.Present:hover .Present-data {
  display: block !important;
}

.absent-data.data-para {
  border-top: 2px solid #f37a7a;
}

.attendance-data tr td.absent:hover .absent-data {
  display: none;
}

.late-data.data-para {
  border-top: 2px solid #faaa62;
}

.attendance-data tr td.late:hover .late-data {
  display: block;
}

.grey-data.data-para {
  border-top: 2px solid #cacaca;
}

.attendance-data tr td.grey:hover .grey-data {
  display: none;
}

.regularization-data.data-para {
  border-top: 2px solid #e65100;
}

.attendance-data tr td.regularization:hover .regularization-data {
  display: none;
}

.regularization-dot {
  background-color: #0073b7;
}

.calendar .table tbody td,
.calendar .table thead th {
  border: 1px solid #e9e6e1;
  text-align: center;
}

.calendar .table>:not(:first-child) {
  border-top: 0;
}

.calendar .table tbody td {
  height: 120px;
  width: 173px;
  vertical-align: baseline;
  text-align: left;
  position: relative;
}

.calendar .table tbody td.old-month,
.calendar .table tbody td.next-month {
  color: #aaaaaa;
}

.calendar .table tbody td.today-date {
  background-color: #fff5ef;
}

.calendar .table tbody td .fixed-holiday-dot {
  width: 6px;
  height: 6px;
  background-color: #0073b7;
  border-radius: 50%;
}

.tui-calendar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.tui-calendar .fixed-dot {

  background-color: #0073b7;

}

.tui-calendar .restricted-dot {
  background-color: #dd4b39;
}

.tui-calendar .leaves-dot {
  background-color: #F99615;
}

.tui-calendar .events-dot {
  background-color: #008000;
}

.calendar .table tbody td .calendar-data-fixed {
  font-weight: 600;
  color: #0073b7;
  font-size: 13px;
}

.calendar .table tbody td .RH {
  width: max-content;
}

.calendar td .inner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.calendar .table tbody td .restricted-holiday-dot {

  background-color: #dd4b39;

}

.calendar .table tbody td .calendar-data-restricted {
  font-weight: 600;
  color: #dd4b39;
  font-size: 13px;
}

.calendar .table tbody td .birthday-holiday-dot {
  background-color: #008000;
}

.calendar .table tbody td .calendar-data-birthday {
  font-weight: 600;
  color: #008000;
  font-size: 13px;
}

.calendar .table tbody td .leave-holiday-dot {
  background-color: #F99615;
}

.calendar .table tbody td .calendar-data-leave {
  font-weight: 600;
  color: #F99615;
  font-size: 13px;
}

.calendar .table tbody td .more-details .one-more {
  color: #aaaaaa;
  font-size: 13px;
}

.calendar .table tbody td .more-details .one-more .hide {
  display: none;
}

.calendar .table tbody td .detail-list {
  padding: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border: solid 1px #d5d5d5;
  position: absolute;
  top: 3rem;
  left: 0;
  width: -webkit-fill-available;
  z-index: 9;
  display: none;
  font-size: 13px;
}

.calendar .table tbody td .more-details-list.detail-list {

  border-top: 2px solid #e65100;

}

.calendar .table tbody td .leave-reason.detail-list {
  border-top: 2px solid #e65100;
}

.calendar .table tbody td .leave-details {
  cursor: pointer;
}

.calendar .table tbody td .leave-reason.show {
  display: block;
}

.input-switch {
  display: none;
}

.label-switch {
  display: inline-block;
  position: relative;
}

.label-switch::before,
.label-switch::after {
  content: "";
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
}

.label-switch::before {
  width: 2rem;
  height: 1rem;
  border: 1px solid #afafaf;
  border-radius: 4em;
  background: #cccccc;
}

.label-switch::after {
  position: absolute;
  left: 3px;
  top: 13%;
  width: 10px;
  height: 10px;
  border: 1px solid #afafaf;
  border-radius: 4em;
  background: #ffffff;
}

.input-switch:checked~.label-switch::before {
  background: #ed0a51;
  border-color: #ed0a51;
}

.input-switch:checked~.label-switch::after {
  left: unset;
  right: 3px;
  background: #ffffff;
  border-color: #ed0a51;
}

.info-text {
  display: inline-block;
  font-size: 12px;
  width: 57px;
}

.info-text::before {
  content: "Inactive";
}

.input-switch:checked~.info-text::before {
  content: "Active";
}




.switches-container {
  width: 8rem;
  height: 1.8rem;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: #e9ecef;
  line-height: 2.3rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 500px) {
  .switches-container.switches-container-mobile {

    margin-left: 0;
    margin-bottom: 3px;
  }
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
  width: 50%;
  padding: 0;
  /* margin: 0; */
  margin-top: -3px;
  text-align: center;
  cursor: pointer;
  color: #939393;
}

/* switch highlighters wrapper (sliding left / right)
  - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0.15rem;
  z-index: 3;
  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
  /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
  border-radius: 3rem;
  background: #02638e;
  height: 105%;
  cursor: context-menu;
}

/* switch box labels
  - default setup
  - toggle afterwards based on radio:checked status
*/
.switch div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: #fff;
  transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
  will-change: opacity;
  position: absolute;
  /* top: 0; */
  top: -3px;
  left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked~.switch-wrapper {
  transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked~.switch-wrapper {
  transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
  opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
  opacity: 1;
}




.timeline .timeline-item {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
}

.timeline .timeline-item:last-child .timeline-line {
  bottom: 100%;
}

.timeline .timeline-line {
  display: block;
  content: " ";
  justify-content: center;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translate(50%);
  border-left-width: 1px;
  border-left-style: dashed;
  border-left-color: var(--bs-gray-300);
}

.timeline .timeline-icon {
  z-index: 1;
  flex-shrink: 0;
  margin-right: 1rem;
}

.timeline .timeline-content {
  width: 100%;
  overflow: auto;
  margin-bottom: 1.5rem;
  margin-top: -6px;
}

.timeline.timeline-center .timeline-item {
  align-items: center;
  border-left: 0 !important;
}

.timeline.timeline-center .timeline-item:first-child .timeline-line {
  top: 50%;
}

.timeline.timeline-center .timeline-item:last-child .timeline-line {
  bottom: 50%;
}

.timeline-label {
  position: relative;
}

.timeline-label:before {
  content: "";
  position: absolute;
  left: 51px;
  width: 3px;
  top: 0;
  bottom: 0;
  background-color: var(--bs-gray-200);
}

.timeline-label .timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 1.7rem;
}

.timeline-label .timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-label .timeline-label {
  width: 50px;
  flex-shrink: 0;
  position: relative;
  color: var(--bs-gray-800);
}

.timeline-label .timeline-badge {
  flex-shrink: 0;
  background-color: var(--bs-body-bg);
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
  margin-top: 1px;
  margin-left: -0.5rem;
  padding: 3px !important;
  border: 6px solid var(--bs-body-bg) !important;
}

.timeline-label .timeline-badge span {
  display: block;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  background-color: var(--bs-gray-200);
}

.timeline-label .timeline-content {
  flex-grow: 1;
}

.timeline-item {
  border-left: 0 !important;
}

.timeline-item::after {
  transition: ease 0.3s;
  background: #fff !important;
  display: block;
  position: absolute;
  content: '';
  width: 12px;
  height: 12px;
  top: 0rem;
  left: -5px;
  border: 4px solid #ccc;
  border-radius: 50%;
  margin-top: 1px;
}

.timeline-item:hover::after {
  height: 12px !important;
}

.modal .timeline {
  margin-left: 0px;
  float: left;
  height: 289px;
  width: 100%;
  background: transparent;
  overflow-y: scroll;
  margin-bottom: 5px;
}

.timeline::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}
.timeline::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px transparent;
  background-color: #555;
}

.timeline::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px transparent;
  border-radius: 10px;
  background-color: transparent;
}
/* .page-footer.footer{
bottom: 0px;
vertical-align: baseline;
position: relative;
width: -webkit-fill-available;
}  */
.select2-selection.select2-selection--single {
  height: 36px !important;
}

.border-orange-right {
  border-right: 1px dashed #e65100;
}

/* color picker */
.color-picker {
  position: relative;
  display: inline-block;
}

.color-picker__selector {
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 21px;

}

.color-picker__preview {
  width: 20px;
  height: 15px;
  margin-right: 5px;
}

/* .color-picker__preview#colorPreview{
width: auto;
height: auto;
} */
.color-picker__code {
  font-size: 14px;
}

.color-picker__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: -webkit-fill-available;

}

.color-picker__dropdown-item {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
}

.list-card.nav-tabs.tab-page-toolbar .nav-link.active {
  background-color: transparent !important;
  color: #e65100;
}

/* .sidebar-mini-btn {
display: none !important;
} */
.show-leaves-status {
  /* width: 800px; */
  width: calc(100% - 415px);

}



.scrollbar {

  float: left;
  /* background: #F5F5F5; */
  overflow-x: scroll;
}

.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px transparent;
  border-radius: 10px;
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar {
  height: 4px;
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px transparent;
  background-color: #e65100;
}

.attendance-data .table-responsive {
  overflow-y: hidden;
}

/* sticky table*/
.attendance-data tr td.name-data {
  position: sticky;
  width: 100px;
  left: -1px;
  top: auto;
  border-top-width: 1px;
  margin-top: -1px;
  padding-right: 10px !important;
  margin-right: 14px;
  z-index: 99;
  background-color: #fff;
}

.attendance-data .table-responsive::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px transparent;
  border-radius: 10px;
  background-color: transparent;
}

.attendance-data .table-responsive::-webkit-scrollbar {
  height: 4px;
  background-color: transparent;
}

.attendance-data .table-responsive::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px transparent;
  background-color: #e65100;
}

/* responsive view */
@media (max-width: 1024px) {
  .cards-buttons {
      display: grid !important;
  }

  .buttons-list {
      justify-content: start !important;
      margin-top: 15px;
  }

}

@media (max-width: 1024px) {
  .show-leaves-status {
    width: calc(100%);
}
}

@media (max-width: 768px) {
  .border-orange-right {
      border-right: 0;
      padding-bottom: 20px;
      border-bottom: 1px dashed #e65100;
  }

  .wrapper .page-body.auth {
      height: 100%;
  }

  .cards-list {
      display: grid !important;
      grid-template: "a a a a";
  }

  .cards-buttons {
      justify-content: normal !important;
  }

  /* .show-leaves-status {
      width: 650px;
  } */

  .custom_scroll {
      padding-bottom: 0px;
  }
}

@media (max-width: 480px) {
  .cards-list {
      grid-template: "a a";
  }

  /* .show-leaves-status {
      width: 350px;
  } */

  .buttons-list {
      display: grid;
      grid-template: "a a";
  }

  .buttons-list.d-sm-grid .btn:last-child {
      margin-top: 10px;
  }
}

/* @media (max-width: 380px) {
  .show-leaves-status {
      width: 280px;
  }
} */

/* .modal .border-top {
  border-top: 1px dashed #e65100 !important;
} */

.modal .identity {
  position: relative;
}

.modal .identity .field-icon {
  position: absolute;
  bottom: 11px;
  right: 15px;
}

/*------- toggle switch start ----*/

.input-switch {
  display: none;
}

.label-switch {
  display: inline-block;
  position: relative;
}

.label-switch::before,
.label-switch::after {
  content: "";
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
}

.label-switch::before {
  width: 2rem;
  height: 1rem;
  border: 1px solid #afafaf;
  border-radius: 4em;
  background: #cccccc;
}

.label-switch::after {
  position: absolute;
  left: 3px;
  top: 13%;
  width: 10px;
  height: 10px;
  border: 1px solid #afafaf;
  border-radius: 4em;
  background: #ffffff;
}

.input-switch:checked~.label-switch::before {
  background: #e65100;
  border-color: #e65100;
}

.input-switch:checked~.label-switch::after {
  left: unset;
  right: 3px;
  background: #ffffff;
  border-color: #e65100;
}

.info-text {
  display: inline-block;
  font-size: 12px;
  width: 57px;
}

.info-text::before {
  content: "Inactive";
}

.input-switch:checked~.info-text::before {
  content: "Active";
}

[data-theme="dark"] [data-luno="theme-blue"] .identity-value {
  /* border: 1px solid #353535; */
  background-color: #212324;
  /* border-radius: 0.25rem;
height: 36px; */
}

[data-theme="dark"] [data-luno="theme-blue"] .identity-value,
[data-theme="dark"] [data-luno="theme-blue"] input[type="text"].identity-value:read-only {
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu.datepicker-dropdown {
  border: 1px solid #353535;
  background-color: #212324;
}

[data-theme="dark"] [data-luno="theme-blue"] .select2-container--default .select2-selection--single {
  border: 1px solid #353535;
  background-color: #212324;
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .select2-dropdown {
  border: 1px solid #353535;
  background-color: #212324;
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #353535;
  background-color: #212324;
  color: #bdbdbd;
}

[data-theme="dark"] [data-luno="theme-blue"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #bdbdbd;
}

.all-leaves.nav-pills.custom-horizontal {
  text-align: center;
}

.chat-app .order-2 .chat-history {
  height: calc(100vh - 220px);
  background: #f9f9f9;
}

[data-theme="dark"] .chat-app .order-2 .chat-history {
  height: calc(100vh - 220px);
  background: #1d1e20 !important;
}

.bg-purple {
  background-color: #580b7f1a;
  color: #590b81;
}

.chat-app .order-1 {
  height: calc(100vh - 250px);
}

.chat-app .order-2 {
  height: calc(100vh - 250px);
}

.order-1 .border-top {
  border-color: #e9e6e1 !important;
}

[data-theme="dark"] .order-1 .border-top {
  border-color: #353535 !important;
}

.symbol-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 10px;
}
.symbol-group .symbol {
  position: relative;
  z-index: 0;
  margin-left: 2px;
  transition: all 0.3s ease;
}

.symbol.symbol-xxl-35px > img, .symbol.symbol-35px > img, .symbol.symbol-35px {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.symbol-group .symbol-label:after {
  display: block;
  content: " ";
  border-radius: inherit;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 2px solid var(--bs-symbol-border-color);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.symbol .symbol-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #a1a0a0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 1.15rem;
  width: 35px;
  height: 35px;
}

.usergroup-members.scroll {
  height: 315px;
  overflow-y: scroll;
  width: 100%;
  background: transparent;
  float: left;
}

.usergroup-members.scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px transparent;
	border-radius: 10px;
	background-color: transparent;
}

.usergroup-members.scroll::-webkit-scrollbar
{
	width: 3px;
	background-color: transparent;
}

.usergroup-members.scroll::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px transparent;
	background-color: #555;
}


.btn {
  border-radius: 0.2rem !important;
}

/* for display content dynamic modal popup */
.t {
  display: contents;
}
/*
.modal .border-top {
  border-top: 1px dashed #e65100 !important;
} */

.anchor{
    color: var(--secondary-color);
}

.input-switch:checked~.label-switch::before {
  background: #e65100;
  border-color: #e65100;
}

.p-datatable .p-datatable-thead>tr>th {

  background: none !important;
  padding: 0.50rem 1.10rem !important;
}

.p-component {
  font-family: "Nunito", sans-serif !important;
  font-size: 1rem;
  font-weight: normal;
}

.p-datatable .p-sortable-column .p-sortable-column-icon {
  color: #ccc !important;
  margin-left: 0.5rem;
  float: right !important;
  font-size: 1px !important;
  height: 12px !important;
}

[data-theme="light"] [data-luno="theme-blue"] .p-datatable .p-sortable-column.p-highlight {
  background: #EFF6FF;
  color: black !important ;
}

[data-theme="dark"] [data-luno="theme-blue"] .p-datatable .p-sortable-column.p-highlight{
  background: #EFF6FF;
  color: white !important;
}

.p-datatable .p-sortable-column:focus {
  box-shadow: none !important;
  outline: 0 none !important;
}

.clickable {
  cursor: pointer;
  color: #02638E;
}
.applyBtn{
  background-color: #e65100 !important;
  border: #e65100 !important;
}
.fc .fc-h-event .fc-event-title {
  width: calc(100% - 25px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left {
  font-family: fcicons !important;
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right {
  font-family: fcicons !important;
}

.ng-star-inserted .dropdown-menu .dropdown-item.active{
  color: #fff6f6 !important;
  background-color: #2570eb;
  width: 264px;
  font-size: 14px;
}

:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td :first-child{
  border-left: 0;
}

.responsive-content{
  width: max-content;
  max-width: 200px;
}

:host ::ng-deep  .p-paginator .p-paginator-pages .p-paginator-page {
  background-color: transparent;
  border: 0 none;
  color: #6c757d;
  min-width: 2rem;
  height: 2rem;
  margin: 0.143rem;
  transition: box-shadow 0.2s;
  border-radius: 50%;
}


@media (max-width: 500px) {
  .dropdown.morphing.scale-left .dropdown-menu.wfh {
      left: -66px !important;
      width: auto !important;
      height: auto !important;
      display: flex !important;
  }
}

@media (max-width: 376px) {
  .dropdown.morphing.scale-left .dropdown-menu.wfh1 {
      left: -66px !important;
      width: auto !important;
      height: auto !important;
      display: flex !important;
  }
}


@media (max-width: 500px) {
  .dropdown.morphing.scale-left .dropdown-menu.manual-attendance {
      left: -7px !important;
      width: auto !important;
      height: auto !important;
      display: flex !important;
  }
}

 .ng-select.ng-select-single .ng-select-container {
	height: 29px !important
}

.ng-select .ng-select-container {
	color: #333;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #e9e6e1 !important;
	min-height: 29px !important;
	align-items: center
}

.ng-select .ng-select-container :hover {
	border-color : rgb(13 110 253 / 30%) !important;
}
.ng-select-container .ng-has-value :focus {
	border-color : #525252 !important;
}
/* ngb-typeahead-window {

   width: 14%;
} */

/* @media (max-width: 800px) {
  ngb-typeahead-window {
    margin-top: 200px !important;
  }
} */

.p-inputtext {
  height: 29px !important;
}

/* Ensure you target the popup container with high specificity */
.custom-calendar .p-datepicker {
  width: 200px !important; /* Adjust width */
  height: auto !important; /* Adjust height */
}

/* Optional: Set font size to scale down the content */
.custom-calendar .p-datepicker {
  font-size: 14px !important;
}

/* To ensure proper alignment below the input box */
.custom-calendar .p-datepicker {
  margin-top: 4px;
  z-index: 1000; /* Ensures it stays on top of other elements */
  position: absolute; /* Necessary to allow positioning */
}

/* Adjust width and height of the date table if required */
.custom-calendar .p-datepicker-calendar {
  width: 100% !important;
  height: auto !important;
}


.dropdown-menu {
  position: absolute !important;
  z-index: 1050 !important;
  will-change: transform; /* Improves performance for dropdown animations */
}


.calendar-dot{
  width: 10px;
    height: 10px;
    border-radius: 50%;
}

.half-day{
  background-color: rgb(190, 144, 235);
}
.full-day{
  background-color: rgb(203, 196, 130);
}

.fixed-holiday{
  background-color: rgb(0, 115, 183);
}

.restricted-holiday{
  background-color: rgb(255, 107, 107);
}
.ypad {
  background: #fff;
  cursor: pointer;
  /* padding: 5px 10px; */
  border: 1px solid #ccc;
  width: 100%
}
.forDateRange {
  background: #fff;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.cssForCalendarButton{
  margin-left: auto;
}
.cssForSelectedDateRangeSpanTag{
  height: 10px;
  width: 300px;
  margin-top: -11px;
}

.team-switch{
  padding-right: 0px !important;
  padding-left: 50px !important;
}


/*Dark theme */
[data-theme="dark"] [data-luno="theme-blue"] th{
  color: whitesmoke !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .p-paginator {
  background-color: #212324;
}

[data-theme="dark"] [data-luno="theme-blue"] .form-label{
  color: whitesmoke !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select.borad .ng-select-container {
  background-color: #212324 !important;
  color: whitesmoke !important;
  border: 1px solid !important;
  border-color: #353535 !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select.borad .ng-dropdown-panel .ng-option{
  background-color: #212324 !important;
  color: whitesmoke !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .ng-select.borad .ng-dropdown-panel .ng-option {
  background-color: #212324; /* Default background */
  color: #f0f0f0; /* Default text color */
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select.borad .ng-dropdown-panel .ng-option:hover {
  background-color: #295bac !important; /* Hover background */
  color: #fff; /* Optional: Hover text color */
}

[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu {
  background-color: #212324; /* Dark background for dropdown */
  border: 1px solid #444; /* Subtle border */
  color: #fff; /* Text color */
}

[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu .dropdown-item {
  background-color: transparent; /* Match dropdown background */
  color: #f0f0f0; /* Text color */
}

[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu .dropdown-item:hover {
  background-color: #295bac; /* Hover background */
  color: #fff; /* Hover text color */
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select input{
  color: whitesmoke;
}
/* [data-theme="dark"] [data-luno="theme-blue"] .ng-select.borad .ng-option,
[data-theme="dark"] [data-luno="theme-blue"] .dropdown-menu .dropdown-item {
    transition: background-color 0.3s ease, color 0.3s ease;
} */
/* [data-theme="dark"] [data-luno="theme-blue"] .ng-select .rounded .ng-input input{
  background-color: #212324 !important;
} */


/*Calendar*/
[data-theme="dark"] [data-luno="theme-blue"] .fc-daygrid-day {
  background-color: #1e1e1e;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc-daygrid-day.fc-day-today {
  background-color: rgba(97, 85, 24, 0.808); /* Highlighted background for today */
  color: #ffffff;
}

[data-theme="dark"] [data-luno="theme-blue"] .fc-daygrid-day.fc-day-today:hover {
  background-color: #333333;
  color: whitesmoke;
}

[data-theme="dark"] [data-luno="theme-blue"] .hover-month{
  color: whitesmoke;
}

[data-theme="dark"] [data-luno="theme-blue"] p-dropdown .p-dropdown-label {
  color:white; /* Text color inside dropdown */
}

[data-theme="dark"] [data-luno="theme-blue"] p-dropdown .p-dropdown-items {
  background-color: #333333; /* Background color of dropdown items */
}

[data-theme="dark"] [data-luno="theme-blue"] p-dropdown .p-dropdown-item {
  color: #ffffff;
}
[data-theme="dark"] [data-luno="theme-blue"] .search-input {
  background-color: #2a2a2a;
  color: #ffffff;
}
/*Bank details / Add bank account*/
[data-theme="dark"] [data-luno="theme-blue"] .ng-select.rounded .ng-dropdown-panel .ng-option{
  background-color: #212324 !important;
  color: whitesmoke !important;
}

/* [data-theme="dark"] [data-luno="theme-blue"] .ng-select.rounded .ng-input {
  background-color: #212324 !important;
  color: whitesmoke !important;
} */

/*Attendance & attendance in-out data*/
[data-theme="dark"] [data-luno="theme-blue"] .data-para {
  background-color: #000000 !important;
  color: #f1ebeb !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .membernames{
  background-color: #212324 !important;
}

/*Attendance custom date range picker*/

[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker .calendar-table {
  background-color: #212324;
  color: #ffffff;
}
/* [data-theme="dark"] [data-luno="theme-blue"] .daterangepicker .available {
  background-color: #212324 ;
  color: #ffffff ;
} */
[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker .weekend{
  background-color: #212324;
  color: #ffffff;
}
[data-theme="dark"] [data-luno="theme-blue"] .daterangepicker .off{
  background-color: #212324;
  color: #ffffff;
}


/* all logo*/
[data-theme="dark"] [data-luno="theme-blue"] .brand-icon-interne-white img{
  display: none;
}
/* [data-theme="dark"] [data-luno="theme-blue"] .brand-icon-interne-dark img{
  display: block !important;
  margin-left: -30px !important;
} */

@media (min-width: 426px) {
  [data-theme="dark"] [data-luno="theme-blue"] .brand-icon-interne-dark img{
    display: block !important;
    margin-left: -30px !important;
  }
}

@media (max-width: 426px) {
  [data-theme="dark"] [data-luno="theme-blue"] .brand-icon-interne-dark img{
    display: block !important;
    margin-left: -10px !important;
  }
}

[data-theme="dark"] [data-luno="theme-blue"] .sidebar-title-white img{
  display: none;
}
[data-theme="dark"] [data-luno="theme-blue"] .sidebar-title-dark img{
  display: block !important;
  margin-left: -15px !important;
}

/*
[data-theme="dark"] [data-luno="theme-blue"] .brand-icon{
  background-image: url('C:\Users\nvp\Desktop\interne\src\assets\images\logo\interne-login-white.png');
} */

.p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last{
  background-color: transparent;
    border: 0 none;
    color: #6c757d;
    min-width: 2rem !important;
    height: 2rem !important;
    margin: 0.143rem;
    transition: box-shadow 0.2s;
    border-radius: 50%;
}



[data-theme="dark"] [data-luno="theme-blue"] .pagination {
  margin-bottom: 1rem !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .custom-input {
  margin-left: 0.5em;
  width: auto;
  background-color: #212324 !important;
  border: 1px solid #ced4da;
  color: #fcfcfc !important;
  font-size: 15px;
  padding: 0.25rem 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[data-theme="dark"] [data-luno="theme-blue"] .p-dropdown {
  background-color: #212324 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .genealogy-body {
  background-color: #212324 ;
}

[data-theme="dark"] [data-luno="theme-blue"] .member-view-box  {
  background-color: #3c3c3c !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .genealogy-scroll::-webkit-scrollbar-thumb {
  background-color: #3c3c3c !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .genealogy-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #E65100 !important;
  transition: 0.5s !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .bg-onMaternityLeave {
  background-color: #bc9dff2b;
  color: #bc9dff;
}

.bg-cancel{
  background-color: #eb16164f !important;
  color: #ed3030 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness th{
  background: #212324;
  border-color: #353535;
  color: #343a40;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard a {
  color: #f5f5f5;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness td {
  border-color: #353535 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
  border-color: #353535 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness .fc-view {
  border-color: #353535 !important;
  background: #353535 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header {
  background: #353535 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
  background: #353535 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .ng-select-container {
  background-color: #212324 !important;
}



[data-theme="dark"] [data-luno="theme-blue"] .ng-select.rounded .ng-input input {
  color: #bdbdbd !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select.rounded .ng-value {
  color: #bdbdbd !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select.rounded .ng-placeholder {
  color: #bdbdbd !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select .ng-value {
  color: #bdbdbd !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .ng-select-container {
  background-color: #212324 !important;
  border: 1px solid !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .bg-info {
  color: #37bfd5 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] input[type="number"]:read-only, [data-theme="dark"] [data-luno="theme-blue"] select:read-only, [data-theme="dark"] [data-luno="theme-blue"] .ypad {
  background-color: #212324 !important;
}
[data-theme="dark"] [data-luno="theme-blue"] input[type="text"]:read-only{
  background-color: transparent !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .form-control:disabled, [data-theme="dark"] [data-luno="theme-blue"] .form-control[readonly]{
   background-color: #353535 !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .footer-logo-light{
  display: none !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .footer-logo-dark{
  display: block !important;
}
[data-theme="dark"] [data-luno="theme-blue"] .css1{
  color: #bdbdbd !important;
}

 .bs-datepicker-container {
  padding: 0px !important;
  /* padding: 0; */

}
::ng-deep bs-datepicker-container {
  top: -3px !important;
  left: 3px !important;
}


/* Apply to the custom container class */
.orange-theme.bs-datepicker-container {
  background-color: #e65100 !important; /* Orange background */
  color: white !important;
}

/* Header (Month & Year) */
.orange-theme .bs-datepicker-head {
  background-color: white !important;
  color: #343a40 !important;
  padding: 11px !important;
}

/* Target only the "Today" button inside .btn-today-wrapper */
.btn-today-wrapper .btn-success {
  background-color: #ffffff !important;
  color: black !important;
  /* font-weight: bold !important; */
  border: none !important;
  margin-right: 135px;
}

.btn-clear-wrapper .btn-success{
  background-color: #ffffff !important;
  color: black !important;
  /* font-weight: bold !important; */
  border: none !important;
}



.bs-datepicker-buttons{
  padding-top: 0px !important ;
}

.bs-datepicker-body table td span{
  border-radius: 5px !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .orange-theme .bs-datepicker-head {
  background-color: #212324 !important;
  color: #ffffff !important;
  padding: 11px !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .bs-datepicker-head button{
  color: #ffffff !important;
}

[data-theme="dark"] [data-luno="theme-blue"]  .bs-datepicker-body table th{
  background-color: #212324 !important;
}

[data-theme="dark"] [data-luno="theme-blue"]  .bs-datepicker-body table td{
  background-color: #212324 !important;
  color: #ffffff !important;
}
/* Selected Date */
.orange-theme .bs-datepicker-body table td.selected span {
  background-color: #e65100 !important;
  color: white !important;
}

.bs-datepicker-body table th {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: bold !important;
}
/* Hover Effect */

.orange-theme .bs-datepicker-body table td.selected span:hover{
  background-color: #e65100 !important;
  color: white !important;
}

.orange-theme .bs-datepicker-body table td span:hover {
  background-color: rgba(102, 109, 119 0.1) !important;
    color: #000 ;
    border-radius: 5px !important;
}


/* Today's Date */
.orange-theme .bs-datepicker-body table td.today span {
  border: 1px solid #e65100 !important;
  background-color: #fff3e0 !important;
  color: #e65100 !important;
}

.bs-datepicker-head button:hover{
  background-color: rgba(0, 0, 0, -0.9) !important;
}

.bs-datepicker-head button[disabled]{
  background: rgba(221, 221, 221, -0.7) !important;
}

.bs-datepicker-head button{
  font-weight: bold !important;
}

.bs-datepicker {
  border : 1px solid #ddd !important;
  border-radius: 5px !important;
  right: 8px !important;
  top: 5px !important ;
  box-shadow: none !important;

}

.bs-datepicker-body {
  padding: 0px !important;
  min-height: 208px !important;
    min-width: 149px !important;
    border: none  !important;
}

.bs-datepicker-body table td{
  color: black !important;
}

.bs-datepicker-body table td span.selected, .bs-datepicker-body table td.selected span {
  color: #fff !important;
  background-color: #e65100 !important;
  border-radius:  5px !important;
}

.bs-datepicker-body table.months td span {
  padding: 6px !important;
  border-radius: 5px !important;
}

.bs-datepicker-head{
  min-width: 240px !important;
  height: 47px !important;
}

.bs-datepicker-body table td span.disabled, .bs-datepicker-body table td.disabled span{
  color: rgba(0, 0, 0, 0.25) !important;
}
/*
input[bsDatepicker] {
  pointer-events: none;
  background-color: #fff;
} */



.bs-datepicker-head button{
  color: black !important;
}


[data-theme="dark"] [data-luno="theme-blue"] .p-inputtext {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  color: #bdbdbd !important;
  background: #212324  !important;
  padding: 0.75rem 0.75rem;
  border: 1px solid #353535 !important;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  border-radius: 3px !important;
}


[data-theme="dark"] [data-luno="theme-blue"] .p-datepicker:not(.p-datepicker-inline) {
  /* background: #495057; */
  color: aliceblue !important;
  background: #212324 !important;
  border: 1px white !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.input-container {
  position: relative;
  display: inline-block; /* Ensure the container only wraps the input */
  width: 100%;
}

/* Input styling with padding for the icon */
.datepicker {
  width: 100%;
  padding-right: 40px; /* Space for the icon */
}


.bs-datepicker-head button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5;
}


/* Calendar icon positioning */
.calendar-icon {
  position: absolute;
  right: 10px; /* Adjust alignment */
  top: 50%;
  transform: translateY(-50%);
  /* cursor: pointer; */
  color: #aaa; /* Icon color */
  /* pointer-events: auto; Ensure the icon is clickable */
}

/* Ensure datepicker does not overflow the container */
.bs-datepicker-container {
  z-index: 1050; /* Higher z-index to ensure it appears above other elements */
}


[data-theme="dark"] [data-luno="theme-blue"] .chip-box
{
  background-color: #0f0f0f;
  color: white;
}
[data-theme="dark"] [data-luno="theme-blue"] .skillSelect
{
  background-color: #0f0f0f;
  color: white;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  position: relative !important;
  left: 0;
  width: 100%;
  /* display: none !important; */
}



.ng-select.ng-select-single .ng-select-container
 .ng-value-container, .ng-select.ng-select-single
 .ng-select-container .ng-value-container .ng-value {
  overflow: unset !important;
}

.ng-select:focus-within .ng-placeholder {
  display: none !important;
}

[data-theme="dark"] [data-luno="theme-blue"] .chip-box
{
  background-color: #0f0f0f;
  color: white;
}
[data-theme="dark"] [data-luno="theme-blue"] .skillSelect
{
  background-color: #0f0f0f;
  color: white;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  position: relative !important;
  left: 0;
  width: 100%;
}
.highlight-today {
  background-color: #e65100 !important;
  border-radius: 50% !important;
  color: #fff !important;
}

.highlight-month {
  background-color: #e65100 !important;
  border-radius: 50% !important;
  color: #fff !important;
}

.highlight-max-date span {
  background-color: #e65100 !important;
  border-radius: 50% !important;
  color: #fff !important;
}

.custom-highlight {
  background-color: #e65100 !important; /* Highlight color */
  border-radius: 50%;
  font-weight: bold;
  color: black !important;
}


/* Highlight selected month */
.orange-theme .bs-datepicker-body table td.selected span {
  background-color: #e65100 !important;
  color: white !important;
  border-radius: 5px !important;
}

/* Highlight the current month */
.orange-theme .bs-datepicker-body table td.today span {
  border: 1px solid #e65100 !important;
  background-color: #fff3e0 !important;
  color: #e65100 !important;
  font-weight: bold;
}

.highlight-month {
  background-color: #ffd700 !important; /* Gold color */
  color: #000 !important; /* Black text */
  font-weight: bold;
  border-radius: 5px;
}

.custom-maxdate-highlight {
  background-color: transparent !important; /* Highlight max date */
  color: black !important;
  border-radius: 50%;
}

.password-field{
  padding-right: 35px;
}