@font-face {
  font-family: "Rabar_021";
  /* IE9 Compat Modes */
  src: url(/fonts/Rabar_021.ttf?bf7cfbcc05cb78bab47290fe2d87aa73) format("truetype"), url(/fonts/Rabar_021.woff?1b5a464cf1884f424576337829c707a8) format("woff");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
.time-slot {
  border-radius: 30px;
  margin-bottom: 10px;
  margin-right: 1rem;
  height: 39px;
  width: 170px;
  box-shadow: 0 2px 4px -2px #79e79d;
  background: #47cf73;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time-slot:hover {
  background-color: #3596e8 !important;
  cursor: pointer;
  color: #fff;
}

.h-300px {
  height: 300px;
}

.bookedSlot {
  pointer-events: none;
  color: white;
  background: #df4f4f !important;
  box-shadow: 0 2px 4px -2px #e87c7c;
}

.activeSlot {
  background-color: #3596e8 !important;
  cursor: pointer;
  color: #fff;
}

.iti {
  display: block !important;
  width: 100%;
}

.appointment-circle .badge-circle {
  border-radius: 50%;
  padding: 0;
  min-width: unset;
  width: 12px !important;
  height: 12px !important;
}

.w-150px {
  width: 150px;
}

.swal-modal .swal-text {
  text-align: center !important;
}

.form-control[readOnly] {
  background-color: #fff !important;
}

.ribbon {
  position: relative;
}

.ribbon .ribbon-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  background-color: #009ef7;
  box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  top: 50%;
  left: 70%;
  transform: translateX(-5px) translateY(-50%);
}

.ribbon-vertical .ribbon-label {
  padding: 5px 10px;
  min-width: 36px;
  min-height: 46px;
  text-align: center;
}

.ribbon.ribbon-top .ribbon-label {
  top: 0;
  transform: translateX(-15px) translateY(-4px);
  border-bottom-right-radius: 0.475rem;
  border-bottom-left-radius: 0.475rem;
}

.rating-input {
  position: absolute !important;
  left: -9999px !important;
}

.rating-input[disabled] {
  display: none;
}

.rating-label > i {
  line-height: 1;
  color: #b5b5c3;
}

.rating-label > .svg-icon {
  line-height: 1;
}

.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

label.rating-label {
  cursor: pointer;
}

div.rating-label.checked > i,
label.rating-label > i {
  color: #b5b5c3;
}

div.rating-label.checked > .svg-icon svg [fill]:not(.permanent):not(g),
label.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #ffc107ff;
}

div.rating-label.checked > .svg-icon svg:hover [fill]:not(.permanent):not(g),
label.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.rating-input:checked ~ .rating-label > i {
  color: #b5b5c3;
}

.rating-input:checked ~ .rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

.rating-input:checked ~ .rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.rating:hover label.rating-label > i {
  color: #ffc107ff;
}

.rating:hover label.rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #ffc107ff;
}

.rating:hover label.rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

label.rating-label:hover ~ .rating-label > i {
  color: #b5b5c3;
}

label.rating-label:hover ~ .rating-label > .svg-icon svg [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
  fill: #b5b5c3;
}

label.rating-label:hover ~ .rating-label > .svg-icon svg:hover [fill]:not(.permanent):not(g) {
  transition: fill 0.3s ease;
}

.avg-review-star-div .review-star {
  color: #ffc107ff;
  font-size: 15px;
}
.avg-review-star-div .review-count {
  color: #ced4daff;
}

.review-star-div .review-star {
  color: #ffc107ff;
  font-size: 25px;
}
.review-star-div .review-count {
  color: #ced4daff;
}

.bg-status-canceled {
  background-color: #f1416c !important;
}

.bg-status-booked {
  background-color: #399ef7 !important;
}

.bg-status-checkIn {
  background-color: #fac702 !important;
}

.bg-status-checkOut {
  background-color: #50cd89 !important;
}

body {
  overflow-x: hidden;
}

.sidebar-app-logo {
  max-height: 50px;
  max-width: 120px;
}

.card-logo-height {
  height: 20px !important;
}

.patient-documents-section {
  margin-top: 1.6rem;
}

.submenu {
  display: none;
  list-style: none;
  padding: 0;
}

.nav-item:hover .submenu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-sidebar {
  display: flex;
  align-items: center;
  gap: 8rem;
}

.sub-menu-patient {
  visibility: hidden !important;
}

.image-flexable {
  display: flex !important;
  gap: 1rem;
  align-items: center;
}

.removable {
  margin-bottom: 3rem;
}

.containers {
  overflow: scroll;
  height: 630px;
  /* Set your desired height */
  position: relative;
}

.tooth-container {
  display: flex;
  gap: 2rem;
  position: absolute;
  margin-left: 2rem;
  margin-top: 3rem;
}

.tooth-container-bottom {
  display: flex;
  gap: 2rem;
  position: absolute;
  margin-left: 2rem;
  margin-top: 21.5rem;
}

.teeth-specs {
  width: 35px !important;
  height: 150px !important;
}

.tooth-container li,
.tooth-container-bottom li {
  list-style: none;
}

.fixed-padding-select2 {
  padding: 1rem 1rem 0rem 0rem;
}

.fixed-padding-second-select2 {
  padding-top: 1rem;
}

.tooth-design {
  width: 40px;
  /* height: 40px; */
  padding: 0.6rem;
  background-color: #6195b5;
  color: white;
  border-radius: 3rem;
  position: absolute !important;
  top: 9.3rem;
  text-align: center;
}

.tooth-design-bottom {
  width: 40px;
  /* height: 40px; */
  padding: 0.6rem;
  background-color: #6195b5;
  color: white;
  border-radius: 3rem;
  position: absolute !important;
  top: -2.5rem;
  text-align: center;
}

.tooth-design,
.tooth-design-bottom {
  cursor: pointer;
  transition: box-shadow 0.3s;
  /* Add a transition to all properties */
  box-shadow: none;
  /* Start with no shadow */
}

.tooth-design:hover,
.tooth-design-bottom:hover {
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  animation: reverseShadow reverse;
  /* Add a reverse animation on hover */
}

@keyframes reverseShadow {
  from {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  }
  to {
    box-shadow: none;
  }
}
.right-arrow-gif {
  position: absolute;
  top: 10.9rem;
  left: -2.5rem;
  z-index: 4;
}

.left-arrow-gif {
  position: absolute;
  right: 3.85rem;
  bottom: 11rem;
}

.question-mark {
  position: relative;
  display: inline-block;
  cursor: pointer;
  left: 0.4rem;
}

.question-mark i {
  color: lightgreen;
}

.list-notes-image-teeth {
  position: absolute;
  visibility: hidden;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 400px;
  top: 100%;
  left: -132px;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.question-mark:hover .list-notes-image-teeth {
  opacity: 1;
  visibility: visible;
}

.box-selector {
  max-height: 48px;
}

.print-button-custom-report {
  position: relative;
  top: 2rem;
}

#report-print-btn {
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
  border: none;
  color: white;
  background: #4889cb;
}

.wire-load {
  display: flex;
  justify-content: center;
}

.dot {
  height: 15px !important;
  width: 15px !important;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}

.available-status-color {
  background-color: #ff8793 !important;
}
@keyframes spin-image {
  100% {
    transform: rotate(360deg);
  }
}
canvas {
  border: 1px solid black;
}

@media (max-width: 1040px) {
  #consent-save-location {
    width: 100% !important;
  }
}
.tablet-fixation {
  display: flex;
}

@media (max-width: 1450px) {
  .tablet-fixation {
    display: block !important;
  }
}
.fixed_status {
  display: flex !important;
  align-items: center;
  gap: 0.2rem;
}

/* Add this to your styles */
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
  /* Initial position, adjust as needed */
}

.modal.fade.show .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, 0);
  /* Final position when modal is shown */
}

.modal.fade.hide .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
  /* Final position when modal is hidden */
}

.add-service-icon {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.print-color {
  color: #8abb75;
}

.unique-dropdown-toggle:after {
  border: none !important;
}

.show_dropdown_icon {
  width: 35px;
  background-color: #bcbcbc70;
  border-radius: 0.4rem;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.show_dropdown_icon:hover {
  background-color: #7373734b;
}

.fixed_position_for_show_icon {
  position: relative;
  left: 0.7rem;
  bottom: 0.04rem;
}

.pointerEvent {
  cursor: pointer !important;
}

.bg_staff {
  background-color: #8a33c3 !important;
}

.color_staff {
  color: #8a33c3 !important;
}

.bg_staff_color {
  background-color: #ac55e5 !important;
}

.appointment--background--color {
  background-color: #e04e12 !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.appointment--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #ff6f34 !important;
}

.appointment__icon__background--color {
  background-color: #ff6f34 !important;
}

.service--background--color {
  background-color: #ff307d !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.service--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #ff70a6 !important;
}

.service__icon__background--color {
  background-color: #ff70a6 !important;
}

.staff--background--color {
  background-color: #8a33c3 !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.staff--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #ac55e5 !important;
}

.staff__icon__background--color {
  background-color: #ac55e5 !important;
}

.doctor--background--color {
  background-color: #6571ff !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.doctor--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #8f98ff !important;
}

.doctor__icon__background--color {
  background-color: #8f98ff !important;
}

.today-amount--background--color {
  background-color: #0099fb !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.today-amount--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #33adfc !important;
}

.today-amount__icon__background--color {
  background-color: #33adfc !important;
}

.patient--background--color {
  background-color: #0ac074 !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.patient--background--color:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 10px 20px 2px #3bcd90 !important;
}

.patient__icon__background--color {
  background-color: #3bcd90 !important;
}

.dropdown-item {
  transition: background-color 0.3s !important;
}

.dropdown-item:active {
  background-color: #b5b5c3 !important;
}

.dropdown-item:hover {
  background-color: #dee2e6 !important;
  color: #6c757e !important;
  border-radius: 0.2rem !important;
}

.invoice--bg--color {
  background-color: #e6e6e6 !important;
}

.invoice--bg--header--color {
  background-color: #001e52 !important;
  color: white;
}

.invoice--border--color {
  border-color: #001e52 !important;
}

.invoice__table__cell--bg--color {
  background-color: #e6e6e6 !important;
}

.invoice__table__column--cell--bg--color {
  background-color: #effafe !important;
}

.invoice__total__amount--text--color {
  color: #25635d !important;
}

.fs-7 {
  font-size: 12px !important;
}

.invoice__label {
  width: 3rem !important;
}

.bg-login-doctor-anas {
  background: #e9ecef;
}

.\!bg-login-doctor-anas {
  background: #e9ecef !important;
}

.bg-doctor-anas {
  background-color: #e21e24;
}

.\!bg-doctor-anas {
  background-color: #e21e24 !important;
}

.text-doctor-anas {
  color: #e21e24;
}

.\!text-doctor-anas {
  color: #e21e24 !important;
}

.text-doctor-anas:hover {
  color: #dd6569;
}

.\!text-doctor-anas:hover {
  color: #dd6569 !important;
}

.hover\:translate-y-1-:hover {
  transform: translateY(-0.25rem);
}

.\!transition {
  transition: all 0.3s !important;
}

.border-solid {
  border-style: solid;
}

.aside-menu-container__aside-menu-doctor-anas .nav-item.doctor-anas-active > .nav-link {
  background: #ffb9b9cc;
  border-left-color: #e21e24;
  color: #212529;
}

.aside-menu-container__aside-menu-doctor-anas .nav-item.doctor-anas-active > .nav-link:hover {
  background: #ffb9b9cc;
  border-left-color: #e21e24;
  color: #212529;
}

.aside-menu-container__aside-menu-doctor-anas .nav-item .nav-link {
  border-left: 0.313rem solid transparent;
  color: #6c757d;
  padding-left: 1.25rem;
  padding-right: 1.563rem;
}

.aside-menu-container__aside-menu-doctor-anas .nav-item .nav-link:hover {
  background: #ffb9b9cc;
  border-left-color: #e21e24;
  color: #212529;
  border-left: 0.313rem solid #e21e24;
  padding-left: 1.25rem;
  padding-right: 1.563rem;
}

.min-w-36 {
  min-width: 9rem;
}

.btn-outline-doctor-anas {
  color: #e21e24;
  border-color: #e21e24;
}

.\!btn-outline-doctor-anas {
  color: #e21e24 !important;
  border-color: #e21e24 !important;
}

.btn-outline-doctor-anas:hover {
  color: white;
  background-color: #e21e24;
  border-color: #e21e24;
}

.\!btn-outline-doctor-anas:hover {
  color: white !important;
  background-color: #e21e24 !important;
  border-color: #e21e24 !important;
}

#language-email-tabs .nav-link.active,
#language-email-tabs .nav-pills .show > .nav-link {
  background-color: #e21e24 !important;
}

.btn-doctor-anas {
  color: #ffffff;
  background-color: #e21e24;
  border-color: #e21e24;
  transition: 0.3s;
}

.btn-doctor-anas:hover {
  color: #ffffff;
  background-color: #dd6569;
  border-color: #dd6569;
}

.\!btn-doctor-anas {
  color: #ffffff !important;
  background-color: #e21e24 !important;
  border-color: #e21e24 !important;
  transition: 0.3s !important;
}

.\!btn-doctor-anas:hover {
  color: #ffffff !important;
  background-color: #dd6569 !important;
  border-color: #dd6569 !important;
}

.doctor-anas-checkbox:checked {
  background-color: #e21e24;
  border-color: #e21e24;
}

.\!doctor-anas-checkbox:checked {
  background-color: #e21e24 !important;
  border-color: #e21e24 !important;
}

#loading-overlay {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent background */
  z-index: 9999;
}

.spinner {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-top: 5px solid #e21e24;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.qr-code-button {
  min-width: 10rem;
  min-height: 3rem;
}