@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

@font-face {
  font-family: 'SF Arabic';
  src: url('/assets/css/SFArabic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#section-content .btn {
  padding: 5px !important;
  font-size: 10px !important;
}

#section-content .btn i {
  font-size: 10px !important;
}

.childcategory-box {
  background: #eefff4;
  font-weight: 600;
  font-size: 12px
}

.childcategory-box i {
  padding: 5px;
  color: #00c544
}

#section-content .card {
  border: 1px solid #00d94b
}

#section-content li {
  background: #ffffff0a;
  color: #00d94b
}

#section-content .btn-primary {
  background: #ffffff17;
  color: #00d94b;
  font-weight: 700 !important
}

#section-content .btn-primary i {
  color: #00d94b;
  font-weight: 700 !important
}

#section-content .btn-primary:hover {
  border-color: #00d94b;
  background: #ffffff !important;
}

#section-content .btn-dark {
  background: #898989b3;
  font-weight: 700 !important;
  color: white !important
}

#section-content .btn-dark i {
  color: white !important
}

#section-content .btn-outline {
  font-size: 9px !important;
  float: left;
  margin: 3.5px;
  margin-bottom: 20px;
  font-weight: 600;
  padding: 4px 10px !important;
}

.btn-acdemia {
  background: #00c544 !important;
  color: black
}

.show-course {
  background: #00c544 !important
}

.nav-pills li {
  margin: 10px
}

.nav-pills .nav-link {
  text-align: center;
  font-size: 20px;
  border: 1px solid #fff;
  background-color: #ddd;
  color: #6d6d6d;
  border-radius: 15px;
  padding: 10px 50px;
}

.nav-pills .nav-link i {
  font-size: 25px;
  color: #727272
}

.swal2-title,
.swal2-html-container {
  background: #d8d8d8;
  color: #1c1c1c !important;
  font-family: 'Cairo';
  border-radius: 15px;
  font-weight: 700 !important
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: #07c232;
  border-color: #fefefe00
}

.nav-pills .nav-link.active i,
.nav-pills .show>.nav-link i {
  color: #ffffff;
}

.blog__card--thumbnail {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  width: 100%;
  height: 200px;
}

.blog__card--thumbnail img {

  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.instructor img {
  border: 10px solid #4caf507a;
}

.instructor h5 {
  background: #d9ffdb;
  padding: 10px;
  border-radius: 8px !important
}

.addtocart {
  background: #00c544 !important;
  padding: 10px 20px !important
}

.alertify .ajs-message .ajs-success .ajs-visible {
  background-color: #00c54 !important;
  /* Your desired color */
  color: #ffffff !important;
  /* Text color to make it readable */
}

/* Change the background color of the success alert */
.alertify-notifier .ajs-message .ajs-success .ajs-visible {
  background-color: #00c54 !important;
  /* Your desired color */
  color: #ffffff !important;
  /* Text color to make it readable */
}

.page-item.active .page-link {
  background: #00c544
}

#kt_user_view_devices_tab img {
  margin-top: -10px;
  border-radius: 20px;
  padding: 10px;
  background: #eef0ef;
  width: 120px;
  float: right;
}

.nav-line-tabs .nav-item .nav-link.active {
  border-color: #00c544 !important
}

/* Change the background color of the popup */
.swal2-popup {
  background-color: #f0f0f0;
  /* Example: light grey */
  border-radius: 10px;
  /* Example: rounded corners */
}

/* Change the color of the title */
.swal2-title {
  background: #9999990d;
  color: #2c3e50;
  /* Example: dark blue */
  font-family: 'Cairo', sans-serif;
  /* Example: custom font */
}

/* Change the color of the content text */
.swal2-html-container {
  color: #34495e;
  /* Example: greyish blue */
}

/* Change the color of the confirm button */
.swal2-confirm {
  background-color: #27ae60 !important;
  /* Example: green */
  border: none;
  /* Remove border */
  border-radius: 5px;
  /* Rounded corners */
  color: white;
  /* White text */
}

/* Change the color of the cancel button */
.swal2-cancel {
  background-color: #e74c3c !important;
  /* Example: red */
  border: none;
  /* Remove border */
  border-radius: 5px;
  /* Rounded corners */
  color: white;
  /* White text */
}

.swal2-actions {
  font-family: 'Cairo', sans-serif;
  /* Example: custom font */
}

.accordion-button {
  border: 1px solid #00de4c30;
  background: #54545429 !important;
  font-weight: 700;
  font-size: 18px;
  color: #00c744 !important;
}

.unit-section h3 {
  font-weight: 900 !important;
  margin: 20px 0px 10px 0px;
  padding: 15px 7px;
}

.accordion-button:hover {
  background-color: #e3e3e33d !important;
}

.accordion-body {
  padding: 5px
}

.accordion-body ul {
  list-style-type: none;
  padding: 0;
  color: #00dd4c;
  font-weight: 600;
}

.accordion-body ul li {
  padding: 0.75rem;
  background: #ffffff00;
  box-shadow: 0px 0px 10px #0000001a;
  border-radius: 10px;
  border: 1px solid #89e2a7;
}

.accordion-body ul li:last-child {
  /* border-bottom: none; */
}

.accordion-button.collapsed::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNicgZmlsbD0nZ3JlZW4nPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTEuNjQ2IDQuNjQ2YS41LjUgMCAwIDEgLjcwOCAwTDggMTAuMjkzbDUuNjQ2LTUuNjQ3YS41LjUgMCAwIDEgLjcwOC43MDhsLTYgNmEuNS41IDAgMCAxLS43MDggMGwtNi02YS41LjUgMCAwIDEgMC0uNzA4eicvPjwvc3ZnPg==)
}

.accordion-button:not(.collapsed)::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNicgZmlsbD0nZ3JlZW4nPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTEuNjQ2IDQuNjQ2YS41LjUgMCAwIDEgLjcwOCAwTDggMTAuMjkzbDUuNjQ2LTUuNjQ3YS41LjUgMCAwIDEgLjcwOC43MDhsLTYgNmEuNS41IDAgMCAxLS43MDggMGwtNi02YS41LjUgMCAwIDEgMC0uNzA4eicvPjwvc3ZnPg==)
}

.bundle .bundle-card .card {
  background: #e3f4e5;
  box-shadow: #e9e9e9 1px 0px 15px
}

.time-duration {
  float: left;
  direction: ltr !important;
  /* margin-right: 20px; */
  font-weight: 650;
  background: #626262;
  border-radius: 10px;
  padding: 4px 5px;
  color: #fff;
  font-size: 13px
}

.time-duration i {
  direction: ltr !important;
  color: #fff;
  /* margin-left: 5px; */
}

.accordion-body .time-duration {
  float: left;
  background: #4f4f4f !important;
}

.accordion-item .time-duration {
  /* float: right !important; */
  background: #3d3d3d82;
  border-radius: 5px;
}

.course-states .fw-bolder {
  background: #ffffff1a;
  padding: 10px;
  direction: ltr;
}

#card-number-element,
#card-expiry-element,
#card-cvc-element {
  ;
  height: 40px;
  background: #f7f7f7;
  padding: 10px;
  ;
  border: 1px solid #ddd;
  border-radius: 10px;
}

#submit-button {
  width: 100%;
  background: #00c745;
}

.accordion-body li {
  display: inline-block;
  margin-bottom: 10px;
}

.play-video {
  clear: both;
  background: #00de4c !important;
  border-radius: 10px;
  padding: 5px 20px !important;
}

.play-video i {
  font-size: 11.5px
}

.nav-line-tabs .nav-item .nav-link.active {
  color: #00c444 !important;
  font-weight: 800
}

.nav-line-tabs .nav-item .nav-link:hover {
  border-color: #000 !important;
}

#courses-section .card {
  border: 7px solid #98d08e52;
  height: 380px
}

.app-main {
  min-height: 90vh;
}

.symbol.symbol-60px.symbol-2by3 .symbol-label {
  height: 80px;
  width: 83px;
}

.slider {
  overflow: hidden;
  width: 100%;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-item {
  width: 300px;
  /* Adjust this based on your design */
  flex: 0 0 auto;
  /* Prevent shrinking */
  margin-right: 16px;
  /* Adjust spacing */
}

.slider-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.symbol .symbol-label {
  background-color: #03033b0d !important
}

.card-footer .fw-bold {
  background: #01964263;
  border-radius: 10px;
  padding: 5px
}

.card-footer .fw-bold:hover {
  background: #2d2d2d6e
}

#payments-modal.card-body {
  padding: 20px;
}

#payments-modal.card-title {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

#payments-modal .payment-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

#payments-modal .payment-box:hover {
  transform: scale(1.05);
}

#payments-modal .payment-box img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: block;
}

#payments-modal .payment-box h5 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

#payments-modal .text-center {
  text-align: center;
}

#payments-modal .icons-lg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

#payments-modal .col-xl-4,
#payments-modal .col-lg-4,
#payments-modal .col-md-4,
#payments-modal .col-sm-4 {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 30px;
  /* لإضافة مسافة بين الصفوف */
  display: flex;
}

#payments-modal .card {
  width: 100%;
}

.wallet-transaction {
  max-height: 350px !important;
  overflow: scroll
}

#transaction-balance td {
  height: 75px
}

#transaction-balance th {
  background: #ececec;
  font-weight: 800
}

.cartInvoiceContainer table {
  background: #d9d9d95e;
  font-weight: 600;
  border-radius: 5px;
}

.cartInvoiceContainer table th {
  padding: 10px !important
}

.cartInvoiceContainer table td {
  margin: 10px;
  padding-right: 5px
}

#totalPriceCell {
  background: #dddddd45
}

#totalPriceCell {
  color: #000000;
  font-weight: 700
}

.video-loader {
  background: #f1f1f16e;
  padding: 30px;
  font-size: 25px;
  border-radius: 50px;
  font-weight: 700
}

.login-layout input {
  border-color: #ededed;
}

.iti {
  color: #000 !important
}

.login-layout .p-2 h1 {
  color: #000000 !important;
  font-weight: 700
}

.form-control {
  background: white !important
}

.col-3.ms-auto img {
  background: #00000008 !important;
  border-radius: 15px
}

.qr-code-box img {
  padding: 10px;
  background: white
}

.alertify-notifier.ajs-right {
  right: -290px !important
}

.app-header img {
  background: #fcfcfcdb;
  border-radius: 14px
}

body {
  font-family: 'Cairo';
}

.qbank-section,
#performanceModal {
  font-family: 'SF Arabic' !important;
}

.not-login .icon i {
  font-size: 60px;
  padding: 10px;
  display: inline-block;
  background: #94ca9529;
  border-radius: 20px;
  color: #07c232;
}

.not-login h3 {
  font-size: 16px;
  padding: 10px;
  display: inline-block;
  color: #727272;
  margin: 10px;
  font-weight: 800
}

.not-login .btn {
  background-color: #07c232;
  font-weight: 600
}

.stream-box {
  border: 10px solid #eeeeee;
  padding: 20px;
  border-radius: 10px;
}

#joinLiveBtn {
  background-color: #fb0000;
  font-size: large
}

.live-stream-header {
  border-radius: 15px;
  display: inline-block;
  background: #ff4a44;
  color: #ffffff;
  margin-bottom: 15px;
  padding: 15px;
  font-size: 15px;
}

.stream-table {
  max-width: 300px;
  margin: 0 auto;
  border-collapse: collapse;
  width: 100%;
}

.stream-table th {
  padding: 10px;
  border-radius: 5px;
  background-color: #55555538;
  text-align: right;
}

.stream-table td {
  padding: 10px;
  text-align: center;
  font-weight: 800;
}

.stream-table tr {
  border-bottom: 1px solid #ddd;
}

/* الكاروسيل نفسه */
.carousel {

  width: 100%;
  height: 300px;
  overflow: visible;
  margin-bottom: 50px !important
    /* يسمح بعرض أجزاء من الصورة خارج الحدود */
}

/* إعدادات الخلايا */
.carousel-cell {
  border-radius: 50px !important;
  position: relative;
  width: 100%;
  height: 100%;
}

.flickity-viewport {
  border-radius: 25px;
}

/* إعدادات الصور */
.carousel-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* لجعل الصورة تغطي الخلية بالكامل بدون تشويه */
  border-radius: 25px;
  /* انحناء الزوايا */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* إضافة ظل خفيف */
}

.features h1 {
  font-weight: 900 !important
}

.features .box {
  background: #00ff3930;
  padding: 10px;
  border-radius: 10px;
}

.features .box span {
  color: #062511 !important;
  font-weight: 700 !important;
}

.features .box i {
  font-size: 25px;
  color: #07c549;
  border: 7px solid #4cff75;
  border-radius: 50px;
}

.info-box span {
  font-weight: 700
}

.info-box .text-success {
  font-weight: 900 !important;
  color: #00c343 !important
}

.section-title {
  padding: 15px;
  margin-top: -11px;
  border-radius: 5px;
  font-weight: 700 !important;
  border: 1.5px solid #00c343;
}

.section-cats .card {
  border: 2px solid #c8ffdd00;
}

.section-cats a img {
  padding: 5px;
  width: 100px;
  height: 100px;
  border: 1px solid #8dffb491;
  border-radius: 10px;
}

.support .card-rounded {
  background: #60c8ff42 !important;
  margin: 0px !important
}

.support i {
  background: #60c8ff !important;
  margin: 0px !important;
  padding: 4px 15px;
  color: #fff;
  font-size: 30px;
  border-radius: 20px
}

.support .text-gray-700 {
  font-weight: 700 !important;
}

.hidden-login {
  display: none !important;
}

@media (max-width: 1750px) {
  .login-layout {
    margin: 5px;
    margin-top: 20px !important;
  }
}

@media (max-width: 1550px) {
  .login-layout {
    margin: 5px;
    margin-top: 20px !important;
  }
}

.accordion-item .time-duration {
  font-size: 10px;
  margin-right: 10px;
  display: inline-block !important
}

@media (max-width: 468px) {
  .cartContent img {
    width: 40px !important;
    height: 40px !important
  }

  .cartContent {
    font-size: 10px
  }

  .cartContent .remove-button {
    padding: 2px 5px !important
  }

  .amount-cart {
    width: 50px !important;
    display: block
  }
}

@media (max-width: 368px) {

  .time-duration {
    font-size: 10px;
    display: inline-block
  }

  .time-duration i {
    font-size: 9px;
    display: inline-block
  }

  .accordion-item button {
    font-size: 12px !important
  }

  .accordion-item .time-duration {
    font-size: 8px;
    margin-right: 1px;
    display: inline-block !important
  }

  .tab-content .card .card-body {
    padding: 5px !important
  }

  .login-header-btn {
    padding: 5px 3px !important;
    font-weight: 700;
    font-size: 10px
  }

  .nav-pills .nav-link {
    font-size: 15px;
    padding: 10px 20px;
    font-weight: 600
  }

  .nav-pills .nav-link i {
    font-size: 15px;
    padding: 10px
  }

}

.invoice-section {
  font-weight: 600;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
  width: 95%;
  color: #fff;
  background-color: #00af43;
  padding: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
  padding: 5px;
}

.invoice-section h4 {
  color: #fff;
}

.invoice-section .btn {
  background: #00813bc4
}

#customCoursesModal .blog__card--thumbnail {
  height: 50px;
}

.custom-bundle-order-box .list-group-item {
  background: #f9f9f9;
  margin: 2px;
  border-radius: 5px
}

.custom-bundle-order-box strong {
  background: #7effab47;
  border-radius: 5px;
  font-size: 18px;
  padding: 5px
}

.stream-box-home {
  height: 280px;
  overflow: scroll
}

.stream-box-home .card-body {
  padding: 8px 17px;
}

.finish-step {
  text-align: center;
  padding: 20px;
}

.finish-step ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
  /* يجعل القائمة تظهر في المنتصف */
}

.finish-step li {
  background: #f2f2f294;
  /* لون خلفية أكثر نعومة */
  margin: 8px 0;
  /* مسافة عمودية بين العناصر */
  padding: 12px 20px;
  /* مساحة داخلية أكبر لتحسين القراءة */
  border-radius: 12px;
  /* زوايا مستديرة */
  box-shadow: 0 4px 6px rgb(116 116 116 / 10%);
  /* تأثير ظل لجعل العناصر تبدو بارزة */
  transition: transform 0.2s, background-color 0.2s;
  /* تحسين التفاعل عند المرور */
}

.finish-step li:hover {
  transform: translateY(-3px);
  /* حركة بسيطة عند التمرير */
  background-color: #e9ecef;
  /* لون خلفية عند التمرير */
}

.question-box .card {
  border: 1px solid #00c630;
  border-radius: 50px;
  text-align: center
}

.question-text {
  background: #dddddd4a;
  border-radius: 20px;
  padding: 20px;
  font-weight: 700
}

.question-counter {
  border: 1px solid #00c630;
  border-radius: 20px;
  padding: 5px 20px;
  display: inline-block;
}

.question-box .list-group {}

.list-group-item.active {
  background: #00c630;
  border-color: #00c630
}

.quiz-summery div {
  border-radius: 10px !important
}

.quiz-summery h3,
.quiz-summery h4 {
  color: #fff;
  font-weight: 700
}

.list-group-item {
  background: #e6e6e600;
  border-color: #b4b4b4;
}

.question-box h4 {
  font-weight: 700
}

.question-box .card-title {
  background: #f7f7f726;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px !important
}

.multi-choose {
  width: 100%
}

.multi-choose i,
.true-false-question i {
  font-size: 22px
}

.multi-choose .form-check-input[type=radio],
.true-false-question .form-check-input[type=radio] {
  margin-right: 0px !important;
  border: 1px solid #03c100;
}

.multi-choose div {
  padding: 23px;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  font-weight: 700;
}



.multi-choose label {
  color: #6a6a6a;
  padding: 4px;
  width: 100%;
  margin: 0px
}

.qbank-summary .card-header h5 {
  text-align: center !important;
  background: #00000000;
  color: #ffffff;
  width: 100%;
  padding: 30px;
  font-size: 25px
}

.qbank-summary .bg-dark {
  background: #1a1a25 !important
}

.qbank-summary .card-header h5 i {
  color: #ffffff;
  font-size: 25px;
  background: #ffffff30;
  padding: 14px 15px;
  border-radius: 50%;
  border: 5px solid #ffffff33;
}

.qbank-summary li {
  background: #a2a2a226;
}

.qbank-summary li strong {
  background: #ffffff;
  padding: 10px 20px;
  margin: 0px;
  border-radius: 10px;
  color: #000
}

.qbank-summary .summary-title {
  background: #07c232;
  text-align: center;
  color: #fff !important;
  padding: 10px;
  border-radius: 20px
}

.qbank-summary .summary-title i {
  color: #fff !important;
  font-size: 35px;
}

.qbank-summary .summary-title h2 {
  color: #fff !important
}

.btn-quiz-box {
  /*border-bottom: 1px solid #07c232 !important;*/
}

.btn-quiz-box span.bi {
  font-size: 13px !important;
  background: #e1e1e1;
  padding: 7px 10px;
  border-radius: 10px;
}

.question-card-fav {
  padding: 0px !important;
  border-right: 2px solid #07c232;
  border-left: 2px solid #07c232
}

.question-card-fav .card-body {
  padding: 5px !important
}

.seprate-btn {
  color: #07c232;
  text-align: center !important;
}

.incr-btn {
  display: flex;
  justify-content: flex-start;
  /* تجعل العناصر في أقصى اليسار */
  align-items: center;
  /* تجعلها في نفس المستوى (نفس السطر) */
  gap: 5px;
  /* مسافة بسيطة بين العناصر */
}

.incr-btn button {
  width: 35px;
  /* حجم الزر */
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.incr-btn input {
  width: 60px;
  /* عرض حقل الإدخال */
  height: 35px;
  /* ارتفاع متساوٍ مع الأزرار */
  text-align: center;
  /* جعل النص في المنتصف */
  margin-left: 5px;
}

.lives-tab .card {
  /* height: 250px; */
}

.lives-tab .nav-link,
.lives-tab .nav-link i {
  font-size: small !important;
  font-weight: 700
}

.session-tab .nav-link,
.session-tab .nav-link i {
  font-size: small !important;
  font-weight: 700
}

.content-math {
  font-size: 20px;
}

/* شاشات صغيرة - أقل من 576px */
@media (max-width: 575.98px) {
  .content-math {
    font-size: 14px;
  }
}

/* شاشات متوسطة - بين 576px و767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .content-math {
    font-size: 16px;
  }
}

/* شاشات أكبر من 768px */
@media (min-width: 768px) {
  .content-math {
    font-size: 20px;
  }
}
#scheduleModal small {
  font-weight: 700 !important
}

#scheduleModal .text-dark {
  font-weight: 700 !important
}
#scheduleModal .card {
  border: 1px solid #00b3526e
}

#scheduleModal img {
  border-radius: 15px !important;
  border: 1px !important
}

#scheduleModal .nav-link {
  background: #dddddd61;
  padding: 10px 20px;
  color: #00b02e;
  font-weight: 700
}

#scheduleModal .nav-link.active {
  background: #7c7c7c36;
  padding: 10px 20px;
  color: #00b02e
}
.lypay-table td{font-size:11.5px !important;font-weight:600}