@font-face {
  font-family: "almajeed";
  src: url("../fonts/almajeed.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Override */
.container {
  max-width: 1400px !important;
}
.btn-success {
  --bs-btn-bg: #055f3f;
  --bs-btn-border-color: #055f3f;
}
.badge:not(.active) {
  border: 0;
}

/* Prelaoder */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  display: block;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #055f3f;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

.pulse-circle {
  font-size: 20px; /* size of circle */
  color: #55a6f8; /* circle color */
  display: inline-block;
  transform-origin: center;
  animation: pulse-scale 1.2s infinite ease-in-out;
}

/* reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .pulse-circle {
    animation: none;
  }
}

@keyframes pulse-scale {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Colors */

.bg-lightpurple {
  background-color: #f1edfb;
}

/* Quran */

.font_arabic {
  font-family: "almajeed", sans-serif;
}
.ayah {
  font-size: 2rem;
  transition: 0.2s ease-in-out;
}
.ayah:hover {
  background-color: rgba(5, 94, 63, 0.1);
}

.list-group-item.list-group-item-action {
  border-radius: 20px;
  border: 0;
}
.list-group-item.list-group-item-action:hover {
  cursor: pointer;
  background-color: rgba(5, 94, 63, 0.2);
}
.list-group-item.list-group-item-action.active {
  background-color: #055f3f;
  border: 0;
}

#container_quran:not(.fullscreen) {
  height: calc(100vh - 120px);
}
#container_quran #content_quran {
  overflow-y: auto;
  height: calc(100vh - 125px);
}
#container_quran.fullscreen #content_quran {
  height: 100vh;
}
#content_quran {
  text-align: center;
}
#content_quran img {
  width: 75%;
}
#container_quran.active #content_quran {
  width: calc(100% - 290px);
}
#content_quran img:hover {
  cursor: pointer;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="23" stroke="%23055f3f" stroke-width="2" fill="yellow" fill-opacity="0.6"></circle></svg>')
      10 10,
    auto;
}

#container_quran .list-group {
  height: calc(100vh - 270px);
  overflow-y: auto;
}
#container_quran.fullscreen .list-group {
  height: calc(100vh - 150px);
}
.timer_forfullscreen {
  display: none;
}
#container_classinfo #container_quran.fullscreen .timer_forfullscreen {
  display: inline-block;
}

/* Slide Panel */
.slide-panel {
  position: absolute;
  top: 0;
  right: -100%;
  width: 290px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  transition: left 0.4s ease;
  z-index: 999;
  padding-left: 20px;
}

#container_quran.active .slide-panel {
  right: 0;
}

/* Fullscreen mode */
.fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  /* Or keep same background */
  z-index: 9999;
  transition: all 0.3s ease;
}

.content_btns {
  position: fixed;
  left: 30px;
  top: 25%;
}

.input-group .field_password {
  border-radius: 0.375rem !important;
  border-right: 1px solid #dde0e5 !important;
}

.toggle-password {
  position: absolute !important;
  padding: 5px;
  margin: 0;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3 !important;
  border-radius: 20px !important;
}

/* body #container_classinfo .box_recent_classes {
  display: none;
}
body.overflow-hidden #container_classinfo .box_recent_classes {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  max-width: 250px;
  font-size: 14px;
  display: block;
} */

/* Datepicker */

.datepicker {
  border-radius: 0.375rem;
  direction: ltr;
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl.dropdown-menu {
  left: auto;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  top: 0;
  left: 0;
  padding: 20px 22px;
  box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
    0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #fff;
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker table tr td {
  border-radius: 50%;
}

.datepicker table tr th {
  border-radius: 0.375rem;
  font-weight: 500;
}

.datepicker table tr td,
.datepicker table tr th {
  transition: all 0.15s ease;
  width: 36px;
  height: 36px;
  border: none;
  text-align: center;
  font-size: 0.875rem;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.new,
.datepicker table tr td.old {
  color: #adb5bd;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: #fff;
  cursor: pointer;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: 0 0;
  color: #dee2e6;
  cursor: default;
}

.datepicker table tr td.highlighted {
  border-radius: 0;
}

.datepicker table tr td.highlighted.focused {
  background: #0a48b3;
}

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
  background: #0a48b3;
  color: #ced4da;
}

.datepicker table tr td.today {
  background: #a8c6fa;
}

.datepicker table tr td.today.focused {
  background: #fff;
}

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active {
  background: #fff;
  color: #8898aa;
}

.datepicker table tr td.range {
  background: #0a48b3;
  color: #fff;
  border-radius: 0;
}

.datepicker table tr td.range.focused {
  background: #08388c;
}

.datepicker table tr td.range.day.disabled:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:active {
  background: #073583;
  color: #0d5be3;
}

.datepicker table tr td.range.highlighted.focused {
  background: #cbd3da;
}

.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
  background: #e9ecef;
  color: #dee2e6;
}

.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
  background: #0a48b3;
  color: #fff;
}

.datepicker table tr td.day.range-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.datepicker table tr td.day.range-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.datepicker table tr td.day.range-start.range-end {
  border-radius: 50%;
}

.datepicker table tr td.day.range:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted,
.datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.selected:hover {
  background: #0a48b3;
  color: #fff;
}

.datepicker table tr td.active,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:hover {
  background: #0a48b3;
  color: #fff;
  box-shadow: none;
}

.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  border-radius: 4px;
}

.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
  background: #e9ecef;
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: 0 0;
  color: #dee2e6;
  cursor: default;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td span.new,
.datepicker table tr td span.old {
  color: #8898aa;
}

.datepicker .datepicker-switch {
  width: 145px;
}

.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
  cursor: pointer;
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
  background: #e9ecef;
}

.datepicker .next.disabled,
.datepicker .prev.disabled {
  visibility: hidden;
}

.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}

.datepicker-dropdown {
  padding: 15px;
  box-shadow: 0 2px 10px rgba(50, 50, 93, 0.1);
}

/* Custom styles for the input group */

.input-group-merge .form-control:not(:first-child) {
  border-left: 0;
  padding-left: 0;
}

.input-group-append,
.input-group-prepend {
  display: flex;
}

.input-group-append .btn,
.input-group-prepend .btn {
  position: relative;
  z-index: 2;
}

.input-group-append .btn:focus,
.input-group-prepend .btn:focus {
  z-index: 3;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-prepend .input-group-text {
  border-right: 0;
}

.input-group.input-group-merge.focused input {
  border-left: 0 !important;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #adb5bd;
  text-align: center;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}

.inputIconBG,
.focused .inputIconBG,
.form-control:disabled.dateField,
.form-control[readonly].dateField {
  background-color: #fff;
}

.select2-container--default {
  width: 100% !important;
  font-size: 0.8rem;
}

.select2-container--default .select2-selection--single {
  border: 1px solid #dde0e5;
}

.page-apply .select2-container .select2-selection--single {
  height: 37px;
}
.page-apply
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 34px;
}
.page-apply
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 5px;
}

.datepicker table tr td,
.datepicker table tr th {
  width: 30px;
  height: 30px;
}

.btn-icon {
  padding: 0.25rem;
  margin-bottom: 0;
}

.btn-close {
  font-size: 1.5em;
}

.flash-notify {
  display: flex !important;
  max-width: 280px;
  width: 100%;
}

.repeaterlist [data-repeater-item]:first-child [data-repeater-delete] {
  display: none;
}

.block_classtime {
  opacity: 0.6;
  transition: 0.2s;
}
.block_classtime:hover {
  background-color: #f2f2f2;
}
.block_classtime.active,
.block_classtime:hover {
  opacity: 1;
}

.block_classtime .btn_classAction {
  visibility: hidden;
}

.block_classtime:hover .btn_classAction {
  visibility: visible;
}

.star-rating {
  direction: rtl;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 1.5rem;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #055e3f;
}

.star-rating input:checked ~ label {
  color: #055e3f;
}

body:not(.login_admin) .btn_teacher_attendance {
  display: none;
}

#hiddenCharts {
  height: 0;
  width: 500px;
  position: absolute;
  visibility: hidden;
  overflow: hidden;
}

@media screen and (max-width: 992px) {
  .navbar-collapse {
    position: absolute;
    z-index: 11;
    width: 100%;
    left: 0;
    top: 65px;
    background: #0f172a;
    transition: none;
  }
}

@media (min-width: 576px) {
  .modal-xxl {
    max-width: calc(100% - 3rem);
  }
}