/* .new_header */
 .toggeler-box {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
/* .new_header */
 .main-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e8ecfd;
  border-radius: 40px;
  
}
/* .new_header */
 .main-head .main-title {
  font-size: 14px;
  margin-bottom: 0;
  font-weight: 600;
  color: #666b6d  ;
}
/* .new_header */
 .news {
  border-radius: 40px;
  gap: 0.25rem;
  border: 1px solid #e8ecfd;
  justify-content: space-around;
  height: 45px;
}
/* .new_header */
 .news marquee {
  font-size: 10px;
  color: #b8b8b8;
  font-weight: 600;
}
/* .new_header */
 .news i {
  color:  var(--primary) ;
}
/* .new_header */
 .days-box {
  border-radius: 40px;
  z-index: 1;
  border: 1px solid #e8ecfd;
  height: 45px;
  padding: 0 15px;
}
/* .new_header */
 .days-box h6 {
  font-size: 12px;
  color: #b8b8b8;
  font-weight: 400;
}
/* .new_header */
 .days-box span {
  color:  var(--primary) ;
}
/* .new_header */
 .search-box {
  border-radius: 40px;
  gap: 0.75px;
  border: 1px solid #e8ecfd;
  z-index: 999;
  height: 45px;
}
/* .new_header */
 .search-box i {
  color:  var(--primary) ;
  font-weight: bold;
}
/* .new_header */
 .search-box input {
  border: none;
  outline: none;
  width: 150px;
  font-weight: 600;
  font-size: 10px;
  color: #b8b8b8;
  padding: 0 10px;
}
/* .new_header */
 .search-box input::-moz-placeholder {
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #b8b8b8;
}
/* .new_header */
 .search-box input:-ms-input-placeholder {
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #b8b8b8;
}
/* .new_header */
 .search-box input::placeholder {
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  color: #b8b8b8;
}
/* .new_header */
 .search-box .live-search-list {
  left: 0;
  z-index: 100000000000000030000000;
}
/* .new_header */
 .logo-img {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .new_header */
 .profile {
  border-radius: 40px;
  border: 1px solid #e8ecfd;
  gap: 0.75rem;
  justify-content: space-between;
  height: 45px;
}
/* .new_header */
 .profile .user-name {
  font-size: 10px;
  font-weight: 600;
  color: #b8b8b8;
}
/* .new_header */
 .profile .icons-box {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* .new_header */
 .noficationbox {
  width: 300px;
  background-color: #ffffffbf;
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 15px;
  inset-inline-end: 0;
  top: 50px;
  z-index: 999;
  box-shadow: 5px 10px 25px -10px rgba(0, 0, 0, 0.5);
}
/* .new_header */
 .noficationbox.hidden {
  display: none;
}
/* .new_header */
 .noficationbox .notify h5 {
  color: #373737;
}
/* .new_header */
 .noficationbox .notify h5::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-color:  var(--primary) ;
  border-radius: 50%;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}
/* .new_header */
 .noficationbox .read {
  padding: 2px 15px;
  background-color:  var(--primary) ;
  border-radius: 20px;
  color: #fff;
}
/* .new_header */
 .noficationbox .all-notafications {
  max-height: 285px;
  overflow-y: scroll;
  overflow-x: hidden;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
/* .new_header */
 .noficationbox .all-notafications::-webkit-scrollbar {
  width: 4px;
}
/* .new_header */
 .noficationbox .all-notafications::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 20px;
}
/* .new_header */
 .noficationbox .all-notafications::-webkit-scrollbar-thumb {
  background: #999999;
  border-radius: 10px;
}
/* .new_header */
 .noficationbox .all-notafications::-webkit-scrollbar-thumb:hover {
  background: #4c75f3;
}
/* .new_header */
 .noficationbox .all-notafications .notafication-content {
   border: 1px solid #e8ecfd;
  border-radius: 12px;
  padding: 5px 10px;
  margin: 0 5px;
  width: calc(100% - 10px);
}
/* .new_header */
 .noficationbox .all-notafications .notafication-content a.mark_as_read {
  width: 10px;
  height: 10px;
  background:  var(--primary) ;
  border-radius: 50%;
}
/* .new_header */
 .noficationbox .all-notafications .notafication-content.unread {
  background-color: #f2f3f7;
}
/* .new_header */
 .noficationbox .all-notafications .image {
  width: 35px;
}
/* .new_header */
 .noficationbox .all-notafications .image img {
  width: 30px;
}
/* .new_header */
 .noficationbox .all-notafications .text-box h6 {
  font-size: 12px;
  font-weight: 600;
  color:  var(--primary) ;
  margin-bottom: 0;
}
/* .new_header */
 .noficationbox .all-notafications .text-box p {
  font-size: 10px;
  font-weight: 500;
  color: #919191;
  margin-bottom: 0;
  padding: 0 0 0 15px;
  word-break: break-word;
}
/* .new_header */
 .noficationbox .see-all {
  margin-top: 10px;
  border-top: 1px solid #eaeaea;
}
/* .new_header */
 .noficationbox .see-all a {
  color:  var(--primary) ;
  font-size: 14px;
  font-weight: 600;
}
/* .new_header */
 .noficationbox .see-all a:hover {
  color:  var(--primary) ;
}
/* .new_header */
 .avatar-img-box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}
/* .new_header */
 .avatar-img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.shift-time {
  padding: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0px 0px 3px #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.shift-time .time-btn.second {
  color: var(--primary);
}

.shift-time .time-btn {
  padding: 5px 40px;
  background: #F6F8FE;
  color: #666B6D;
   font-size: 23px;
  font-weight: bold;
  border-radius: 15px;
}

html[lang=en] .section-title {
  padding-left: 15px;
  padding-right: unset;
}
html[lang=en] .section-title::before {
  right: unset;
  left: 0;
}
html[lang=en] .vacations .title {
  font-size: 16px;
  margin-right: unset;
  margin-left: 15px;
}
html[lang=en] .vacations .title::before {
  right: unset;
  left: -15px;
}
html[lang=en] .money-card .titles div {
  flex-direction: row-reverse;
}
html[lang=en] .appie-pricing-area .switch.off .slider::before {
  transform: translateX(0);
}
html[lang=en] .appie-pricing-area .switch .slider::before {
  transform: translateX(26px);
}

.section-title {
  color: #707070;
  position: relative;
  padding-right: 15px;
}
.section-title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color:  var(--primary) ;
  border-radius: 50%;
}

html[dir=rtl] .new-content .culender-carousel .owl-stage-outer {
  margin-left: 0px;
  margin-right: unset;
}
html[dir=rtl] .new-content .culender-carousel .owl-nav {
  right: unset;
  left: -20px;
  background: transparent;
}
html[dir=rtl] .new-content .select2-container .select2-selection--single {
  justify-content: end;
}

.new-content .culender-carousel {
  position: relative;
}
.new-content .culender-carousel .owl-stage-outer {
  margin-right: 20px;
}
.new-content .culender-carousel .day {
  padding: 10px 25px;
  background-color: #fff;
  border-radius: 10px;
   font-weight: bold;
  font-size: 12px;
  width: 57px;
  height: 60px;
  cursor: pointer;
}
.new-content .culender-carousel .day.active {
  background-color:  var(--primary) ;
  color: #fff;
}
.new-content .culender-carousel .owl-nav {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  background-color: #f6f8fe;
}
.new-content .culender-carousel .owl-nav .owl-prev,
.new-content .culender-carousel .owl-nav .owl-next {
  background-color: #fff;
  border-radius: 10px;
  width: 54px;
  font-size: 20px;
  border: 1px solid #eee;
}
 
.new-content .select2-container .select2-selection--single {
  font-size: 12px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: start;
}
.new-content .select2-container .select2-selection--single .select2-selection__rendered {
  background: unset !important;
}

.new-content .attend-card .card-head,
.new-content .employee-card .card-head,
.new-content .money-card .card-head {
  padding: 0 20px 10px;
  border-bottom: 1px solid #EFEFEF;
}
.new-content .attend-card .card-head .title,
.new-content .employee-card .card-head .title,
.new-content .money-card .card-head .title {
  color: #707070;
}

.modal-btn {
  height: 147px;
  width: 100% !important;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 15px;
  border-bottom: 5px solid;
}
.modal-btn .attend {
  position: relative;
}


.circle-box {
  background-color: #fff;
  border-radius: 25px;
  width: 100%;
  padding: 20px;
}
.circle-box .outer {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 15px solid #d8d8d8;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-box .outer .inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: #525c72;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.circle-box svg {
  position: absolute;
  top: -15px;
  left: -15px;
}
.circle-box svg .cir-1 {
  fill: none;
  stroke: #FF3737;
  stroke-width: 15px;
}
.circle-box svg .cir-2 {
  fill: none;
  stroke: #2AD8FE;
  stroke-width: 15px;
}
.circle-box svg .cir-3 {
  fill: none;
  stroke: #4C75F3;
  stroke-width: 15px;
}

.titles {
  padding: 0 10px;
}
.titles .label {
  position: relative;
}
.titles .label small {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.vacations {
  padding: 10px;
   background: white;
  border-radius: 20px;
  box-shadow: 0px 0px 3px #ddd;
}
.vacations .title {
  position: relative;
  font-weight: 400;
  margin-right: 15px;
  color: #707070;
}
.vacations .title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #1EE57B;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.vacations .show-all-btn {
  color: #707070;
  background: #fff;
  border: 1px solid #EFEFEF;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
  width: 103px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.vacations .vac {
  border: 1px solid #efefef;
  border-radius: 25px;
  padding: 6px 4px;
}
.vacations .vac .user .user-img {
  width: 45px;
  height: 45px;
  margin: 5px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .vacations .vac .user .user-img {
    width: 38px;
    height: 38px;
  }
}
.vacations .vac .user .user-name {
  color: #585757;
  font-size: 12px;
  margin-bottom: 0;
  font-weight: 600;
}
.vacations .vac .btns-container .btn {
  width: 80px;
  padding: 3px 4px;
  border-radius: 10px;
  font-size: 9px;
  border: 1px solid #e3e3e3;
}
.vacations .vac .btns-container .btn.time {
  color: #ffffff;
  background:  var(--primary) ;
}
.vacations .vac .btns-container .btn.type {
  color: #323232;
}
 
.vacations .vac.sec-kind .type {
  background-color: #FF5B5B;
}
.vacations .vac.third-kind .type {
  background-color: #47BE31;
}

.custom-modal .modal-header {
  justify-content: flex-start;
}
.custom-modal .modal-header h5 {
  flex: 1;
  color: #707070;
}
.custom-modal .modal-header .btn {
  border-radius: 10px;
  border: 1px solid #efefef;
  padding: 5px 10px;
}

.custom-modal .modal-body .attendance span,
.custom-modal .modal-body .absence span {
  text-align: center;
}
 
.custom-modal .modal-body .modal-div {
  max-height: 240px;
  overflow: auto;
}
.custom-modal .modal-body .modal-div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.custom-modal .modal-body .modal-div::-webkit-scrollbar {
  width: 5px;
  background-color: #F5F5F5;
}
.custom-modal .modal-body .modal-div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color:  var(--primary) ;
}
.custom-modal .modal-body .member,
.custom-modal .modal-body .member-abs {
  margin: 0 5px;
}

.dropdown-menu.customed {
  padding: 12px;
  border-radius: 20px;
  width: 285px;
  background: #ffffff9e;
  backdrop-filter: blur(10px);
}
 
.dropdown-menu.customed .dropdown-ul .dropdown-item {
  color: #707070;
  font-weight: normal;
  font-size: 13px;
  margin-bottom: 5px;
  background: transparent;
  padding: 8px 16px;
  text-align: start;
  border-radius: 15px;
  transition: padding 0.3s ease-in-out;
}
.dropdown-menu.customed .dropdown-ul .dropdown-item:hover {
  background-color: #e3e3e3;
  padding: 8px 32px;
}
.dropdown-menu.customed .dropdown-ul .dropdown-item-text {
  color: #707070;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  border-radius: 15px;
}
.dropdown-menu.customed .dropdown-ul .dropdown-item-text i {
  background: #ffffff;
  color: #505050;
  padding: 8px 8px;
  font-size: 17px;
  position: absolute;
  right: 15px;
  top: 50%;
  border-radius: 10px;
  transform: translateY(-50%);
}
.dropdown-menu.customed .dropdown-ul .dropdown-divider {
  background-color: #fff;
}


.med-xd .card-header .employee-name {
  margin-bottom: 0;
}
.med-xd .card-header .employee-name a {
  color: #000;
}

.med-xd .card-body .list-group .list-group-item .badge {
  background-color: #f6f8fe !important;
  border-radius: 6px;
  padding: 3px 15px;
  min-width: 150px;
  color: #525F77;

}
.med-xd .card-body .list-group .list-group-item .badge-success {
  background-color: #f6f8fe;
  color: #525F77;
}
.med-xd .card-footer a {
  border: none;
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
}

.modal-trigger-reason {
  max-width: 80%;
  min-width: 150px;
  text-align: center;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #f6f8fe;
  color: #525f77 !important;
  padding: 2px 5px;
  border-radius: 6px;
  cursor: pointer;
}

.modal-header h5 {
  color: #707070;
}
.modal-header .btn-close {
  border: 1px solid #efefef;
  border-radius: 10px;
}

.modal-footer .btn {
  padding: 2px 25px;
  font-weight: bold;
}
.modal-footer .btn-primary {
  background-color: #47BE31;
  border: none;
}
.modal-footer .btn-primary:hover {
  background-color: #3ca22a;
}
.modal-footer .btn-danger {
  background-color: #FF3B3B;
  border: none;
  color: #fff !important;
}
.modal-footer .btn-danger:hover {
  background-color: #f13737;
}

.dropify-wrapper {
  border-radius: 10px;
}

.dropify-wrapper .dropify-clear {
  border-radius: 20px;
}

.pac-input,
.pac-target-input,
.form-control,
.select2-selection__rendered {
  font-weight: normal;
  font-size: 12px;
}
 

.form-error {
  color: #b70300;
  font-size: 10px;
}

.form-label {
  font-size: 10px;
  font-weight: bold;
}

.counter-container #clockdiv > div {
  border-radius: 15px;
}
@media (max-width: 576px) {
  .counter-container #clockdiv > div {
    padding: 5px 8px;
  }
}
.counter-container #clockdiv div > span {
  border-radius: 10px;
  color:  var(--primary) !important;
  font-weight: 500;
  min-width: 65px;
}
@media (max-width: 576px) {
  .counter-container #clockdiv div > span {
    min-width: 40px;
    box-shadow: none;
  }
}
.counter-container .smalltext {
  color:  var(--primary) !important;
  font-size: 14px !important;
  font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate {
  width: 100%;
}


td .badge.light.badge-info {
  background-color:  var(--primary) ;
  color: #fff;
  border-radius: 30px;
  padding: 5px 20px;
  font-size: 12px;
  font-weight: bold;
}


.price-range p {
  
  font-weight: normal;
  color: #707070;
  margin-bottom: 0;
  font-size: 12px !important;
}

#form-container #btn-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
#form-container #btn-div .btn {
  padding: 5px 22px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color:  var(--primary) !important;
}

td .btn.light {
  width: 30px;
  line-height: 24px;
  height: 30px;
  text-align: center;
  padding: 4px;
  font-size: 12px;
  border: none;
  box-shadow: 0px 0px 2px #ddd;
  color: #525F77 !important;
  border-radius: 12px;
  background-color: #fff !important;
}

.swal2-popup {
  border-radius: 25px !important;
}
.swal2-popup button {
  border-radius: 25px !important;
  padding: 5px 25px !important;
  font-size: 14px !important;
  font-weight: bold !important;
}
.sw-theme-dots>.nav {
  outline: none !important;
}
.sw-theme-dots > .nav::before {
  width: 80% !important;
  border: 1px solid #e6ecfb;
  background-color: transparent !important;
}
.sw-theme-dots>.nav .nav-link.done::after {
  background-color: transparent!important;
  color: white !important;
  font-family: 'font awesome 5 pro' ;
  content: '\f00c' !important;
}
.sw-theme-dots > .nav .nav-link.inactive {
  color: #c3c2c2 !important;
  cursor: pointer !important;
  font-size: 12px;
  font-weight: normal;
}
.sw-theme-dots > .nav .nav-link.inactive::after {
  background-color: #E3E8F9 !important;
  width: 15px;
  height: 15px;
}
.sw-theme-dots > .nav .nav-link.inactive::before {
  background-color: transparent !important;
  width: 25px;
  border: 1px solid #dfe7f9;
  height: 25px;
}
.sw-theme-dots > .nav .nav-link.done {
  color:  var(--primary) ;
  cursor: pointer;
  font-size: 12px;
  font-weight: bolder;
}
.sw-theme-dots > .nav .nav-link.done::after {
  background-color:  var(--primary) !important;
}
.sw-theme-dots > .nav .nav-link.done::before {
  background-color:  var(--primary) !important;
}
.sw-theme-dots > .nav .nav-link.active {
  color:  var(--primary) !important;
}
.sw-theme-dots > .nav .nav-link.active::after {
  background-color: #E3E8F9 !important;
}
.sw-theme-dots > .nav .nav-link.active::before {
  background-color:  var(--primary) !important;
}

[direction=rtl] .form-check .form-check-input {
  width: 30px;
  height: 15px;
}

[direction=rtl] .form-check-input {
  margin-left: 0;
}

.editButton {
  background-color:  var(--primary) !important;
  color: #fff !important;
}

.accept-application {
  background-color: #47BE31;
  color: #fff;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  margin: auto;
  zoom: .9;
}
@media (max-width: 1178px) and (min-width: 992px) {
  .circle {
    width: 220px !important;
    height: 220px !important;
  }
  .circle .dots-clock::before {
    width: 23px !important;
    height: 23px !important;
    top: 20px !important;
  }
  .circle svg {
    width: 220px !important;
    height: 220px !important;
  }
  .circle svg circle {
    transform: translate(11px, 15px) !important;
  }
}
.circle svg {
  position: relative;
  width: 300px;
  height: 300px;
  transform: rotate(270deg);
}
.circle svg circle {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #f6f8fe;
  stroke-width: 3px;
  transform: translate(50px, 50px);
}
.circle svg circle:nth-child(2) {
  stroke:  var(--primary) ;
  stroke-dasharray: 630;
}
.circle .time-container {
  position: absolute;
  text-align: center;
  background-color: #f6f8fe;
  color:  var(--primary) ;
  border-radius: 15px;
  padding: 7px 30px;
  font-weight: bold;
  font-size: 16px;
}
.circle .dots-clock {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.circle .dots-clock::before {
  content: "";
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #2AD8FE;
  border-radius: 50%;
  top: 62px;
}

.shift .shift-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 10px 25px;
  background: #272a2e00;
  color: #6e6e6e;
  border-radius: 12px;
  cursor: pointer;
}

.clock-carousel .owl-dots {
  display: none;
}
.clock-carousel .owl-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  bottom: -13px;
  /* top: 45%;  at old clock */
  /* top: 180%; */
  /* transform: translateY(-50%); */
}
.clock-carousel .owl-nav button.owl-prev, .clock-carousel .owl-nav button.owl-next {
  /* border: 1px solid #e0e0e0; */
  padding: 4px 5px !important;
  border-radius: 10px !important;
  /* font-weight: bold; */
  font-size: 32px;
}

.scrollable-div {
  height: 250px;
  overflow-y: auto;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.scrollable-div::-webkit-scrollbar {
  width: 3px;
  background: transparent;
  margin: 0 4px;
}
.scrollable-div::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
.scrollable-div::-webkit-scrollbar-thumb {
  background: #d6d9ff;
  border-radius: 10px;
}
.scrollable-div::-webkit-scrollbar-thumb:hover {
  background: #5c66f8;
}




.attend-card {
  /* Animation */
}
.attend-card .outer {
  width: 150px;
  height: 150px;
  border: 6px solid #f0f0f0;
}
.attend-card .outer .txt-div {
  font-size: 16px;
  font-weight: bold;
  color:  var(--primary) ;
}
.attend-card .circle-box svg {
  top: -5px;
  left: -5px;
}
.attend-card .circle-box svg circle {
  stroke-width: 6px;
}
.attend-card .circle-box svg .cir-1 {
  stroke: #FFCC02;
}
.attend-card .circle-box svg .cir-2 {
  stroke: purple;
}
.attend-card .circle-box svg .cir-3 {
  stroke: #EA1F62;
}
.attend-card .circle-box svg .cir-4 {
  stroke:  var(--primary) ;
  fill: none;
}
.attend-card .donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  border-radius: 100%;
}
.attend-card p.center {
  background: #fff;
  position: absolute;
  text-align: center;
  font-size: 26px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 180px;
  margin: auto;
  border-radius: 50%;
  padding: 35px;
  color:  var(--primary) ;
}
.attend-card .portion-block {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}
.attend-card .circle {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1rem;
}
.attend-card #part1 .circle {
  background-color: #FFCC02;
  /*transform: rotate(76deg);*/
  -webkit-animation: first 1s 1 forwards;
          animation: first 1s 1 forwards;
}
.attend-card #part2 .circle {
  background-color:  var(--primary) ;
  clip: rect(0px, 100px, 600px, 0px);
  -webkit-animation: second 1s 1 forwards 1s;
          animation: second 1s 1 forwards 1s;
}
.attend-card #part3 .circle {
  background-color: #EA1F62;
  -webkit-animation: third 0.5s 1 forwards 2s;
          animation: third 0.5s 1 forwards 2s;
}
.attend-card #part4 .circle {
  background-color: purple;
  clip: rect(0px, 100px, 100px, 0px);
  -webkit-animation: second 1s 1 forwards 1s;
          animation: second 1s 1 forwards 1s;
}
@-webkit-keyframes first {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(100deg);
  }
}
@keyframes first {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(100deg);
  }
}
@-webkit-keyframes second {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(150deg);
  }
}
@keyframes second {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(150deg);
  }
}
@-webkit-keyframes third {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(111deg);
  }
}
@keyframes third {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(111deg);
  }
}
.attend-card .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.attend-card .attend .dot {
  background-color:  var(--primary) ;
}
.attend-card .absent .dot {
  background-color: #FFCC02;
}
.attend-card .late .dot {
  background-color: #EA1F62;
}
.attend-card .overTime .dot {
  background-color: purple;
}

.list-inline .month a,
.list-inline .year a {
  color: #707070 !important;
  font-size: 12px !important;
  font-weight: bold !important;
}
.list-inline .month.active a,
.list-inline .year.active a {
  color:  var(--primary) !important;
}

.rounded-2 {
  border-radius: 1rem;
}

.toast-frame {
  gap: 10px;
}
.toast-frame .toast-close {
  margin-left: 10px;
}

.introjs-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.introjs-tooltip-header .introjs-skipbutton {
  border-radius: 15px;
  padding: 5px 25px;
  font-size: 14px;
  color: #fff;
}
.introjs-tooltip-header .introjs-skipbutton:hover {
  color: #f0f0f0;
}

.language-dropdown button::after {
  display: none;
}
.language-dropdown ul {
  margin-top: 10px !important;
  box-shadow: 0px 3px 6px #00000030;
  border-radius: 15px;
  min-width: 124px;
  background: #ffffff94;
  backdrop-filter: blur(5px);
}
.language-dropdown ul li {
  cursor: pointer;
  padding: 5px;
}
.language-dropdown ul li:hover {
  background-color: #fafafa;
}
.language-dropdown ul li img {
  border-radius: 3px;
}
.language-dropdown ul li span {
  font-size: 12px;
  font-weight: bold;
}
.language-dropdown ul li span.active {
  color:  var(--primary) ;
}

.profile-dropdown {
  top: 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2901960784);
}

.swal2-textarea {
  font-size: 14px;
  font-weight: bold;
  color: #707070;
}/*# sourceMappingURL=new-style.css.map */