:root {
  --slice-border-radius: 20px;
  --slice-border-color: red;
  /* font family */
  --slice-font-primary: 'InterDisplay', 'Assistant', system-ui, sans-serif;

  /* font size */
  --slice-text-base-size: 1rem;
  /*  body font-size  */
  --slice-text-scale-ratio: 1.2;
  /*  multiplier used to generate the type scale values 👇 */

  /* colors */

  --slice-main-color: #7f4eff;
  /* line-height */
  --slice-body-line-height: 1.4;
  --slice-heading-line-height: 1.2;

  /* capital letters - used in combo with the lhCrop mixin */
  --slice-font-primary-capital-letter: 1;

  /* unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units) */
  --slice-text-unit: var(--slice-text-base-size);
  /*  if Em units → --slice-text-unit: 1em  */

  /* space */
  --slice-space-unit: 1rem;

  /* theme */
  --slice-theme-direction: ltr;
  --slice-theme-text-align: left;
  --slice-theme-text-align-flip: left;
  --slice-theme-primary-color: rgba(240, 47, 75, 1);
  --slice-theme-secondary-color: rgba(240, 47, 75, 1);
  --slice-theme-margin: 30px;
  --slice-theme-shadow: none;
  --slice-theme-text-color: black;
  --slice-theme-bg-color: #ffffff;
  --slice-theme-p-fontsize: 18px;
  --slice-theme-h1-fontsize: 52px;
  --slice-theme-h2-fontsize: 42px;
  --slice-theme-h3-fontsize: 32px;
  --slice-theme-border-radius: 20px;
  --slice-theme-block-bg-color: #ffffff;
  --slice-theme-block-bg-color-second: #efefef;
  --slice-theme-grid: 75%;
  --slice-modal-background-color: black;
  --slice-modal-text-color: white;
  --slice-modal-text-h2-size: 42px;
  --slice-modal-text-h5-size: 36px;
  --slice-modal-text-h5-linehight: 40px;
  --slice-modal-text-h5-latter-spacing: -1px;



  --slice-modal-text-description-size: 18px;
  --slice-modal-height: 90%;
  --slice-modal-width: 90%;
  --slice-modal-border-radius: 20px;
  --slice-modal-padding: 110px 61px;
  --slice-modal-li-hover-bg: rgba(255, 255, 255, 0.216);




  --slice-bg-primary: #ffffff;
  --slice-bg-secondery: rgb(248 248 248);
  --slice-text-primary-dark: #ffffff;
  --slice-bg-primary-dark: #000000;
  --slice-bg-secondery-dark: #121212;
  --slice-bg-third-dark: #2d2d2d;

  --slice-bg-field: #D9D9D9;
  --slice-onboarding-field-bg: #333333;
  --slice-onboarding-field-bg-white: #e7e7e7;

  --pay-primary-color: #000000;
  --pay-border-color: #E4E4E4;
  --pay-border-color-secondary: #e9e9e9;
  --pay-border-radius: 15px;
  --pay-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  --pay-text-color: #000000;
  --pay-padding: 20px;
  --pay-container-max-width: 800px;
  --pay-container-padding: 40px;




  --slice-menu-width: 260px;
  --gradient-angle: 90deg;

}

:root,
* {
  /* typepography scale */
  --slice-text-xs: calc((var(--slice-text-unit) / var(--slice-text-scale-ratio)) / var(--slice-text-scale-ratio));
  --slice-text-sm: calc(var(--slice-text-xs) * var(--slice-text-scale-ratio));
  --slice-text-md: calc(var(--slice-text-sm) * var(--slice-text-scale-ratio) * var(--slice-text-scale-ratio));
  --slice-text-lg: calc(var(--slice-text-md) * var(--slice-text-scale-ratio));
  --slice-text-xl: calc(var(--slice-text-lg) * var(--slice-text-scale-ratio));
  --slice-text-xxl: calc(var(--slice-text-xl) * var(--slice-text-scale-ratio));
  --slice-text-xxxl: calc(var(--slice-text-xxl) * var(--slice-text-scale-ratio));
  --slice-text-xxxxl: calc(var(--slice-text-xxxl) * var(--slice-text-scale-ratio));


  /* spacing scale */
  --slice-space-xxxxs: calc(0.125 * var(--slice-space-unit));
  --slice-space-xxxs: calc(0.25 * var(--slice-space-unit));
  --slice-space-xxs: calc(0.375 * var(--slice-space-unit));
  --slice-space-xs: calc(0.5 * var(--slice-space-unit));
  --slice-space-sm: calc(0.75 * var(--slice-space-unit));
  --slice-space-md: calc(1.25 * var(--slice-space-unit));
  --slice-space-lg: calc(2 * var(--slice-space-unit));
  --slice-space-xl: calc(3.25 * var(--slice-space-unit));
  --slice-space-xxl: calc(5.25 * var(--slice-space-unit));
  --slice-space-xxxl: calc(8.5 * var(--slice-space-unit));
  --slice-space-xxxxl: calc(13.75 * var(--slice-space-unit));
}

/* thinking{
  display: none;
} */
.slice-checkbox {
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 88.889px;
  border: 1px solid #D0D5DD;
  background: rgba(252, 252, 252, 0.00);
}

.grid_theme {
  padding: 0 15px;
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 992px) {
  .grid_theme {
    max-width: var(--slice-theme-grid);
    padding: 0px;
  }



  .grid_1 {
    max-width: 8.33% !important;
  }

  .grid_2 {
    max-width: 16.66% !important;
  }

  .grid_3 {
    max-width: 25% !important;
  }

  .grid_4 {
    max-width: 33.33% !important;
  }

  .grid_5 {
    max-width: 41.66% !important;
  }

  .grid_6 {
    max-width: 50% !important;
  }

  .grid_7 {
    max-width: 58.33% !important;
  }

  .grid_8 {
    max-width: 66.66% !important;
  }

  .grid_9 {
    max-width: 75% !important;
  }

  .grid_10 {
    max-width: 83.33% !important;
  }

  .grid_11 {
    max-width: 91.66% !important;
  }

  .grid_12 {
    max-width: 100% !important;
  }

}


.slice-checkbox.selected-checkbox {
  background: #7f4eff;
  border-color: #7f4eff;
  color: white;
}

.slice-checkbox.selected-checkbox i {
  opacity: 1;
}

.slice-checkbox i {
  opacity: 0;
}

body.dark-mode .admin-settings-tabset {
  color: white;
}

body.dark-mode .nav-media,
body.dark-mode .menu-icon {
  color: white;
}

body.dark-mode .ai-chat-down-btns button {
  color: white !important;
}

body.dark-mode .ai-chat-down-btns button:hover {
  background: rgba(255, 255, 255, 0.175) !important;
}


body.dark-mode .img-generate-view {
  background: #505050;
}

body.dark-mode .img-generate-view .i-wrapper {
  background: #111111;
}

body.dark-mode .chat-content .slice-btn-dynamic-chat {
  background: white;
  color: black;
}

body.dark-mode .ai-assistant-settings-ul li,
body.dark-mode .ai-assistant-endscreeen-ul li {
  color: white;
}

.img-generate-view .i-wrapper {
  font-size: 28px;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #efefef;
  border-radius: 5px;
}

.chat-content .buttons-grid {
  display: flex;
  gap: 5px;
  flex-direction: row;
  flex-wrap: wrap;
}

.file-in-ai-chat {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px !important;
  border-radius: 5px;
  margin-top: -20px;
  background: #f2f2f2;
}

.chat-content .chat-img-buttons {
  position: absolute;
  display: flex;
  gap: 5px;
  padding: 5px;
}

.chat-content .slice-btn-dynamic-chat:hover {
  opacity: 0.7;
}

.chat-content .slice-btn-dynamic-chat {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  background: black;
  cursor: pointer;
  color: white;
  flex-wrap: wrap;
}

body.dark-mode .files-chat {
  background: #505050;
}

.files-chat {
  background: #f2f2f2;
  padding: 4px;
  border-radius: 5px;
  margin-top: 10px;
}

.files-chat button {
  background: transparent !important;
  padding: -1px 2px;
  border: 0px;
  margin: 0px 0px 0px 10px;
  box-shadow: 0px 0px 0px !important;
}


.img-generate-view {
  max-width: 250px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  position: relative;
}

.img-generate-view img {
  border-radius: 5px;
  min-height: 200px;
  object-fit: cover;
}


.search-wrap mark {
  padding: 0em;
  background-color: #e0c9ff;
}

.search-result-box p,
.search-result-box p p,
.search-result-box p h1,
.search-result-box p h2,
.search-result-box p h3,
.search-result-box p h4,
.search-result-box p h5 {
  font-size: 13px !important;
  text-align: start;
  opacity: 0.7;
  margin: 0;
}

.bot-response-bubble p,
#ai_action_content p {
  font-size: 16px !important;
}


#ai_action_content h2,
#ai_action_content h3,
#ai_action_content h4,
#ai_action_content h5 {
  color: white;
  font-weight: 600;
}

#ai_action_content h3 {
  font-size: 1.5rem;
}

#ai_action_content h4 {
  font-size: 1.2rem;
}


body .bot-response-bubble * {
  user-select: text;
}

::selection {
  color: #fff;
  background-color: #5842bc !important;
}


.bot-response-bubble h3 {
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.6;
  margin: 0;
}

code {
  border-radius: 5px;
  background: transparent;
  font-size: 13px !important;
}


.animation-delay-0-2 {
  animation-delay: 0.2s;
}

.animation-delay-0-3 {
  animation-delay: 0.3s;
}

.animation-delay-0-4 {
  animation-delay: 0.4s;
}

.animation-delay-0-5 {
  animation-delay: 0.5s;
}

.animation-delay-0-6 {
  animation-delay: 0.6s;
}


/* .ai-assistant-fullscreen .chat-header.chat-header-conversation {
  width: calc(100% - 330px) !important;
  border-radius: 0px 25px 0px 0px !important;
  /* background: transparent !important; */
/* backdrop-filter: saturate(115%) blur(16px); 
} */

/* body.direction_ltr .ai-assistant-fullscreen .chat-footer.chat-footer-conversation {
  width: 550px !important;
  left: 40%; 
} */

.chat-footer.chat-footer-conversation.typing-animation {
  margin-left: 0px !important;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ai-assistant-fullscreen .hub-fix-header {
  width: calc(100% - 330px) !important;
  border-radius: 0px 25px 0px 0px !important;
}


body.dark-mode .onboarding-container {
  background: var(--slice-bg-primary-dark);

}

body.dark-mode .onboarding-body h1,
body.dark-mode .onboarding-body .form__label,
body.dark-mode .onboarding-body p,
body.dark-mode .onboarding-body .field input,
body.dark-mode .onboarding-body .field textarea {
  color: var(--slice-bg-primary) !important;
  opacity: 0.7;
  text-align: start;
}


body.dark-mode .onboarding-body .form__group nz-select {
  background: rgb(51 51 51);
}





body.dark-mode .slices-create {
  color: white;
}

body.dark-mode .profile_user_cont h6,
body.dark-mode .profile_card_coins h2 {
  color: white;
}

body.dark-mode .pricing-header h3 {
  color: white;
}

body.dark-mode .profile_buynow_btn {
  background: var(--slice-bg-primary-dark);
}

body.dark-mode .profile_card,
body.dark-mode .edit_profile_modal {
  background: var(--slice-bg-secondery-dark);
  color: white;
}

body.dark-mode .edit_profile_modal .invitation_img button {
  background: var(--slice-bg-primary-dark);
}

body.dark-mode .edit_profile_modal .invitation_btn {
  color: white;
  border: 1px solid black;
}

body.dark-mode .edit_profile_modal .invitation_btn:hover {
  background: black;
}

body.dark-mode .edit_profile_modal .field input {
  color: white !important;
}

body.dark-mode .bigtitle {
  color: white;
}

body.dark-mode .profile_cont.profile_cont_modal {
  background: var(--slice-bg-primary-dark);
}

.slices-create {
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.slices-create button:hover {
  opacity: 0.8;
}

.dark-mode .slices-create button {
  background: var(--slice-bg-primary);
  color: var(--slice-bg-primary-dark);
}


.slices-create button {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 0;
  background: var(--slice-bg-primary-dark);
  color: var(--slice-bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-size: 18px;
  cursor: pointer;

}

/* slice-sidemenu     */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
.general-message-wrapper .home-screen-content-wrapper {
  padding-top: 70px;

}

body.dark-mode .general-message-wrapper .home-screen-content-wrapper .home-screen-content-inner {
  background: var(--slice-bg-secondery-dark);
}

.general-message-wrapper .home-screen-content-wrapper .home-screen-content-inner {
  padding: 10px;
  background: var(--slice-bg-secondery);
  border-radius: var(--slice-border-radius);
  overflow: auto;
  height: 94vh;
  /* padding-bottom: 70px; */

}

.slice-sidemenu-spaceing {
  width: 100% !important;
  display: block;
  padding-left: 210px !important;
  padding-right: 20px;
  /* background-color: white; */

}


body.direction_rtl .media-popover {
  direction: rtl;
  text-align: right;
}

body.direction_rtl .slice-sidemenu-spaceing {
  padding-right: 210px !important;
  padding-left: 20px !important;
}

body.direction_rtl .onboarding-container {
  left: 0;
  right: inherit;
}

/* .slice-sidemenu-spaceing .new-course-container {
  width: 85vw !important;
  left: 14vw !important;
} */

body .slice-sidemenu-spaceing .backdrop-new-course {
  backdrop-filter: none;
  background: white;
}


body .slice-sidemenu-spaceing .additional_options_cont {
  width: 100%;
  padding: 50px;
  top: 0px;
  left: 0px;
}

body .slice-sidemenu-spaceing .uploadContainer {
  width: 100% !important;
  padding-left: 14vw !important;
  padding-right: 1vw !important;
  height: calc(100% - 50px);
  top: 50px;
  border-radius: 0;
  box-shadow: none;
  z-index: 99999999;
  border: 0;
  /* overflow: auto; */
}

body .slice-sidemenu-spaceing-menu .ai-assistant-buttons-wrapper {
  display: none;
}

body .slice-sidemenu-spaceing-menu .ai-helper-container {
  width: 0 !important;
  backdrop-filter: none !important;
}



body .slice-sidemenu-spaceing .ai-home-folder,
body .slice-sidemenu-spaceing .folder-header-side-btn,
body .slice-sidemenu-spaceing .fullscreen_uploa_btn,
body .slice-sidemenu-spaceing .close-btn-uploa,
body .slice-sidemenu-spaceing-menu .general-message-wrapper .create-show-close {
  display: none;
}


body .slice-sidemenu-spaceing .folder-header-container {
  min-height: 60px;
  height: 60px;
  background-image: none !important;
}

body .header_top_slice {
  background: white !important;
  backdrop-filter: none;
}

body.dark-mode .search-modal {
  background-color: rgba(0, 0, 0, 0.75);
}

body.dark-mode .search-wrap.search-button-init:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .search-wrap.search-button-init {
  color: white;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* DARK MODE */
body.dark-mode .additional_options_cont {
  background: var(--slice-bg-secondery-dark) !important;
}

body.dark-mode .edit_name_cont input {
  background: #232323;
  border: 1px solid #383838 !important;
}

body.dark-mode .search_user_cont input {
  color: white;
}

body.dark-mode .classcard:hover {
  background-color: rgb(0, 0, 0);
}

body.dark-mode .buttons-section,
body.dark-mode .classcard,
body.dark-mode .partone {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(106deg, rgba(255, 255, 255, 0.1) 4.73%, rgba(255, 255, 255, 0) 81.71%);
}

body.dark-mode .buttons-section .backbutton {
  background: rgba(248, 248, 249, 0.16);
}


body.dark-mode .slice-create-img-backdrop {
  background: linear-gradient(90deg, var(--slice-bg-secondery-dark) 14.43%, rgba(255, 255, 255, 0.00) 59.99%)
}

body.dark-mode .slice-create-img-backdrop2 {
  background: linear-gradient(0deg, var(--slice-bg-secondery-dark) 44.43%, rgba(255, 255, 255, 0.00) 99.99%)
}


body.dark-mode .slice_chat_contain .newuploadmodal-settings {
  background: var(--slice-bg-primary-dark) !important;
  color: white;
}

body.dark-mode .uploadContainer .newuploadmodal-settings {
  background: var(--slice-bg-secondery-dark);
  color: white;
}

body.dark-mode .newuploadmodal-settings {
  background: var(--slice-bg-primary-dark);
  color: white;
}

body.dark-mode .new-course-container {
  background: var(--slice-bg-secondery-dark) !important;
  color: var(--slice-text-primary-dark) !important;
}

html body.dark-mode h2.MainTitle-create,
html body.dark-mode .subheader-create {
  color: var(--slice-text-primary-dark) !important;
}

body.dark-mode .slice-sidemenu-spaceing .backdrop-new-course,
html body.dark-mode .header_top_slice,
body.dark-mode .slice-sidemenu {
  background: var(--slice-bg-primary-dark) !important;
  color: var(--slice-text-primary-dark) !important;
}

html body.dark-mode .header_top_slice {
  border-bottom: 0 solid #e2eef11f;
}

body.dark-mode .slice-sidemenu ul li.menu-active,
body.dark-mode .slice-sidemenu ul li:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* body.direction_rtl .slice-sidemenu-spaceing {
  margin-left: auto;
  margin-right: 200px;
} */

.tutorial-menu {
  /* display: flex; */
  /* flex-direction: column !important; */
  align-items: flex-start !important;
  justify-content: space-between;
  outline: 1px solid #f5f5f5;
  /* background: linear-gradient(180deg, #ebebeb 0%, rgba(250, 250, 250, 0) 120%) !important; */
}

.tutorial-menu .tasks-progress {
  width: 40%;
  margin-top: -23px;
  /* margin-right: 100px; */
  right: 8px;
  position: absolute;
  width: 27px;
}

body.dark-mode .tutorial-menu {
  /* background: linear-gradient(180deg, #1c1c1c 0%, rgba(250, 250, 250, 0) 120%) !important; */
  outline: 1px solid #ffffff2e;
}

.slice-sidemenu-spaceing .create-show {
  width: calc(100vw - 200px) !important;
  border-radius: 20px 20px 0px 0px;
}

body.direction_rtl .create-show {
  left: 0px;
  right: unset;
}

body.direction_rtl .dropdown-user-top {
  left: 20px;
  right: unset;
  /* flex-direction: row !important; */
}

.chapterNav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}



body .slice-sidemenu-spaceing-menu .breadcrumbs {
  position: fixed;
  left: 210px;
  z-index: 999999999;
  top: 14px;
}

body.direction_rtl .slice-sidemenu-spaceing-menu .breadcrumbs {
  left: unset;
  right: 210px;
}

/* html body.direction_rtl .slice-sidemenu-spaceing .new-course-container {
  left: 1vw !important;
  right: 14vw;
} */

/* 
body.direction_rtl .slice-sidemenu-spaceing .new-course-container,
body.direction_rtl .slice-sidemenu-spaceing-menu .general-message-wrapper,

 */

body.direction_rtl .slice-create-img {
  right: unset;
  left: 0;
  transform: rotateY(180deg);
}

body.direction_rtl .bannerType2 .part-2-b {
  transform: rotateY(180deg);
}

body.direction_rtl .downbutton-qube {
  left: 7px;
  right: unset;
  top: 7px;
}

.direction_rtl .book_demo_modal_container .create-show-close {
  left: 20px;
}

.direction_ltr .book_demo_modal_container .create-show-close {
  right: 20px;
}

body.direction_ltr .general-message-wrapper .fullscreen_uploa_btn {
  right: 90px;
}

body.direction_ltr .general-message-wrapper .close-btn-uploa {
  right: 55px;
}

body.direction_rtl .general-message-wrapper .fullscreen_uploa_btn {
  left: 90px;
}

body.direction_rtl .general-message-wrapper .close-btn-uploa {
  left: 55px;
}

body.direction_rtl .slice-sidemenu-spaceing-menu .general-message-wrapper {
  padding-left: 20px !important;
  padding-right: 210px !important;
  width: 100% !important;
  border-radius: 0;
}

body.direction_rtl .search-modal {
  direction: rtl;
}

body.direction_rtl .slice-create-img-backdrop {
  background: linear-gradient(270deg, #f8f8f8 14.43%, rgba(255, 255, 255, 0.00) 59.99%);
  right: 35%;
}

body.direction_rtl.dark-mode .slice-create-img-backdrop {
  background: linear-gradient(270deg, var(--slice-bg-secondery-dark) 14.43%, rgba(255, 255, 255, 0.00) 59.99%);
}

body.direction_rtl .slice-sidemenu-spaceing-menu .ai-assistant,
body.direction_rtl .slice-sidemenu-spaceing .uploadContainer {
  padding-left: 20px !important;
  padding-right: 210px !important;
  /* width: 100% !important; */

}

body.direction_ltr .slice-sidemenu-spaceing-menu .ai-assistant,
body.direction_ltr .slice-sidemenu-spaceing .uploadContainer {
  padding-right: 20px !important;
  padding-left: 210px !important;
  /* width: 100% !important; */

}


/* body.direction_rtl .slice-sidemenu-spaceing-menu .ai-assistant-fullscreen .chat-footer.chat-footer-conversation {
  right: 50%;
} */


body .slice-sidemenu-spaceing-menu .ai-assistant {
  width: 100% !important;
  /* padding-left: 16vw !important; */
  /* top: 0px !important; */
  height: 100%;
  border-radius: 0;
  /* right: 0px !important; */
  /* bottom: 0px !important; */
  z-index: 999999999;
  top: 50px !important;
  outline: 0 !important;
}


body .slice-sidemenu-spaceing-menu .general-message-wrapper {
  width: 100% !important;
  padding-left: 210px !important;
  padding-right: 20px !important;
  /* right: 0; */
  /* left: auto; */
  height: calc(100% - 50px);
  /* bottom: 0; */
  top: 50px;
  z-index: 999999999;
  background: white;
}

body .slice-sidemenu-spaceing .ai_search_cont,
body .slice-create .ai_search_cont {
  position: inherit;
  transform: none;
  width: 630px;
}

/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */

/* DARK MODE */

body.dark-mode {
  background-color: #000000 !important;
}

body.dark-mode .folder {
  /* background: transparent !important;
  border-color: rgba(242, 242, 245, 0.3) !important; */
  /* background: #ffffff1c !important; */
  background: #1c1c1c !important;
}

body.dark-mode .folder-arrow-dropdown {
  background: rgba(242, 242, 245, 0.1) !important;
}


body.dark-mode .ai-explain {
  color: white;
}


body.dark-mode .ai-container-hub {}

body.dark-mode .llm-chips-ul li {
  background: rgb(233 233 233 / 0%) !important;
  color: white;
  border-color: rgba(233, 233, 233, 0.15) !important;
}

body.dark-mode .llm-chips-ul li {
  background: rgb(233 233 233 / 0%) !important;
}



body.dark-mode .ai-container-hub .hub-list li {
  background: #252525 !important;
  color: white;
}


body.dark-mode .chat-top-header,
body.dark-mode .options-label,
body.dark-mode .ai-init-form,
body.dark-mode .ai-init-form h3,
body.dark-mode .ai-container-hub h4,
body.dark-mode .ai-helper-new-chat .note-to-size,
body.dark-mode .ai-init-form p,
body.dark-mode .variables-header span {
  color: white;
}

.dark-mode textarea#ai_search_input {
  color: white;
  background: transparent !important;
}

body.dark-mode .course-empty-state {
  background: transparent;
  color: white;
}


body.dark-mode .general-message-wrapper {
  background: rgb(0, 0, 0);
  color: white;
}

body.dark-mode .general-message-wrapper .help-center {
  background: #000000;
}

body.dark-mode .general-message-wrapper .help-center h2.titleTop,
body.dark-mode .general-message-wrapper .help-center h2.titleclass {
  color: #d0d0d0;
}

body.dark-mode .general-message-button button:hover {
  background: rgba(239, 239, 239, 0.1) !important;
}

/* breadcrumbs !!!! */


body.dark-mode .ant-breadcrumb {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .ant-breadcrumb>nz-breadcrumb-item:last-child a {
  color: rgba(255, 255, 255, 0.6) !important;
  color: white !important;
}


body.dark-mode .ant-breadcrumb-link:hover,
body.dark-mode .ant-breadcrumb>nz-breadcrumb-item:last-child:hover a {
  background: #353535;
  color: white !important;
}

body.dark-mode .ant-breadcrumb .ant-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .ant-breadcrumb>nz-breadcrumb-item:last-child .ant-breadcrumb-link {
  background: #353535;
}


/*  */

body.dark-mode .ant-dropdown-menu-submenu-title,
body.dark-mode .ant-dropdown-menu-submenu-title i {
  color: white !important;
}

body.dark-mode .new-course-container.notes-unit-container {
  background: black !important;
  border-color: rgba(242, 242, 245, 0.3);
}

body.dark-mode .new-course-container textarea {
  background: #2f2f2f !important;
}

body.dark-mode .new-course-container .message-data a {
  background: #444444 !important;
  color: white !important;
}

body.dark-mode .notes-unit-container .content-side {
  box-shadow: 4px 0px 62px #cfcfcf4a;
}


body.dark-mode .notes-unit-container .chat {
  background: #000000;
  color: #ffffff;
}

body.dark-mode .notes-unit-container h5 {
  color: white !important;
}

body.dark-mode .folders-side-fade {
  background: linear-gradient(var(--gradient-angle), rgba(255, 255, 255, 0.00) 14.43%, var(--slice-bg-primary-dark) 59.99%);
}



body.direction_rtl {
  --gradient-angle: -90deg;
}

body.direction_ltr {
  --gradient-angle: 90deg;
}

body.dark-mode .folder .folderName,
body.dark-mode .folders-side-fade,
body.dark-mode .folder_root i,
body.dark-mode .folderName {
  color: white !important;
}

body.dark-mode .uploadContainer {
  background: var(--slice-bg-primary-dark) !important;
}


body.dark-mode .uploadContainer .header-gradient,
body.dark-mode .upload-container {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) !important;
}

body.dark-mode .uploadContainer .header-gradient svg path,
body.dark-mode .uploadContainer .header-gradient svg rect,
body.dark-mode .uploadContainer .tabsContent svg rect,
body.dark-mode .uploadContainer .tabsContent svg path {
  fill: white !important;
}

body.dark-mode .create-show-container h3 span,
body.dark-mode .create-show-container .copy-to-clip {
  color: rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .image-helper-show {
  background: black !important;
}

body.dark-mode .uploadContainer .tabsContent {
  color: white !important;
}

body.dark-mode .uploadContainer .rightSide ul li:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .uploadContainer .tabActive,
body.dark-mode .uploadContainer .tabsContent:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .uploadContainer .header-gradient .img-collection,
body.dark-mode .uploadContainer .tabsContent img {
  filter: invert(1);
}

body.dark-mode .uploadContainer .dropFileForm {
  background: #151515 !important;
}

body.dark-mode div.dropFileForm:hover {
  background: #030303 !important;
}

body.dark-mode .uploadContainer h3,
body.dark-mode .uploadContainer h4,
body.dark-mode .uploadContainer h5,
body.dark-mode .uploadContainer h2,
body.dark-mode .uploadContainer h1,
body.dark-mode .uploadContainer p,
body.dark-mode .uploadContainer label,
body.dark-mode .uploadContainer span {
  color: white !important;
}



body.dark-mode .uploadContainer .steps-navigator-item span {
  color: rgba(255, 255, 255, 0.512) !important;
}

body.dark-mode .uploadContainer .steps-navigator-item.active-steps-pass .number {
  filter: invert(1);
}


body.dark-mode .uploadContainer .steps-navigator-item.active-steps-pass span.steptext {
  color: white !important;
}

body.dark-mode .uploadContainer .powtoon_sender .backbutton span {
  color: black !important;
}


body.dark-mode .create-body {
  background: transparent !important;
}


body.dark-mode .chat-bot-li-chat.chat-bot-li-chat-reverse {
  background: transparent !important;
}

body.dark-mode .bot-response-bubble,
body.dark-mode .bot-response-bubble h1,
body.dark-mode .bot-response-bubble h2,
body.dark-mode .bot-response-bubble h3,
body.dark-mode .bot-response-bubble h4,
body.dark-mode .bot-response-bubble h5 {
  color: white !important;
}

body.dark-mode .folder:hover {
  /* background: rgba(222, 222, 222, 0.27) !important; */
  background: rgb(60 60 60) !important;
}

body.dark-mode .before_print_msg {
  background: #292a2d !important;
}

body.dark-mode .chat-bot-li-chat.chat-bot-li-chat-reverse .bot-response-bubble {
  background: transparent !important;
}

body.dark-mode .chat-bot-li-chat .bot-response-bubble {
  background: rgba(26, 26, 26, 0.88) !important;
}

/* body.dark-mode .chat-bot-li-chat {
  background: rgba(26, 26, 26, 0.88) !important;
} */

body.dark-mode .folder_direction_scroll::-webkit-scrollbar {
  background: rgba(236, 236, 236, 0.28);
}


body.dark-mode .slice_show_white_mode {
  display: none !important;
}

body.dark-mode .slice_show_dark_mode {
  display: block !important;
}

body.dark-mode .header_top_slice {
  background: linear-gradient(0deg, rgba(0, 0, 0, .5) -2%, #1a1919 110%) !important;
  border-bottom: 0 solid #e2eef11f;
  backdrop-filter: blur(5px);
}

body.dark-mode .name_display_header {
  color: #ffffff !important;
}

body.dark-mode .dropdown i {
  color: #ffffff !important;
}

body.dark-mode .slice_symbol {
  color: #ffffff !important;
}

body.dark-mode .new-course-container {
  background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .new-course-container .content-side h4 {
  color: #ffffff !important;
}

body.dark-mode .new-course-container .empty-course-container li,
body.dark-mode .new-course-container .slice-wizard-container,
body.dark-mode .new-course-container .slice-wizard-container-docs {
  color: #ffffff !important;
  background: #1f1f1f !important;
  border: 1px solid rgba(234, 234, 234, 0.22);
  box-shadow: none;
}

body.dark-mode .new-course-container .empty-course-container li:hover {
  background: #373737 !important;
}

body.dark-mode .ant-modal-title,
body.dark-mode .ant-modal-header,
body.dark-mode .ant-modal-body,
body.dark-mode .ant-modal-footer {
  color: #ffffff !important;
  background: #000000 !important;

}


body.dark-mode .powtoon-inner-loader video,
body.dark-mode .powtoon-loader video {
  background: white;
  mix-blend-mode: normal !important;
}


body.dark-mode .chat-footer.chat-footer-conversation textarea {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white;
}

body.dark-mode .ant-modal-header,
body.dark-mode .ant-modal-footer {
  border-color: #e8e8e854 !important;
}

body.dark-mode .send-to-chat {
  color: rgba(255, 255, 255, 0.5);
}


body.dark-mode .equal_btn {
  background: black;
}

body.dark-mode .export_modal h2,
body.dark-mode .export_modal h5 {
  color: white;
}

body.dark-mode .export_modal {
  background: black;
  color: white;
}

body.dark-mode .custom-dropdown {
  /* background: rgba(255, 255, 255, .18) !important; */
  background: transparent !important;
  border: 0px solid rgba(211, 211, 211, .361) !important;
  color: #ffffff !important;
}

body.dark-mode .option:hover,
body.dark-mode .selected-llm {
  background: black !important;
}

body.dark-mode .group-separator {
  background-color: #e5e5e529;
}

body.dark-mode .selected-item {
  background: transparent !important;
  border: 0px !important;
}

body.dark-mode .dropdown-options {
  background-color: #2e2e2e;
  border: 1px solid #696969
}


body.dark-mode .ant-modal-content input,
body.dark-mode .ant-input-number,
body.dark-mode .ant-select-selection,
body.dark-mode .ai-helper-new-chat input,
body.dark-mode .llm-chips-ul .current-llm,
body.dark-mode .ai-init-form input,
body.dark-mode .ai-init-form textarea,
body.dark-mode .ai-init-form button,
body.dark-mode .ai-init-form select,
body.dark-mode .ai-helper-new-chat textarea,
body.dark-mode .editable-div,
body.dark-mode .ai-helper-new-chat select {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(211, 211, 211, .361) !important;
  color: #ffffff !important;
}

body.dark-mode .llm-chips-ul .current-llm {
  color: #000000 !important;
  background: white !important;

}

/* body.dark-mode .flex-between:not(.flex-align), */

body.dark-mode .ant-select-arrow,
body.dark-mode .ant-transfer-list-content-item label,
body.dark-mode .ant-confirm-body .ant-confirm-title,
body.dark-mode .ant-confirm-body .ant-confirm-content,
body.dark-mode .ant-table-tbody,
body.dark-mode .ant-modal-close-x {
  color: #ffffff !important;
}

body.dark-mode .ant-transfer-list-content-item:hover label {
  color: black !important;
}

body.dark-mode .ant-table-thead>tr.ant-table-row-hover>td,
body.dark-mode .ant-table-tbody>tr.ant-table-row-hover>td,
body.dark-mode .ant-table-thead>tr:hover>td,
body.dark-mode .ant-table-tbody>tr:hover>td {
  background: #373737 !important;
}

body.dark-mode .dark_mode_fill_white {
  fill: #ffffff !important;
}


.ant-dropdown-menu-item {
  gap: 7px;
}

body.dark-mode .ant-dropdown-menu-item,
body.dark-mode .ant-dropdown-menu,
body.dark-mode .ant-dropdown {
  backdrop-filter: blur(41px);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  overflow: auto;
  max-height: 300px;
}

body.dark-mode .ant-menu-dropdown-vertical.ant-dropdown-menu-root li>* {
  color: white;
}

body.dark-mode .ant-dropdown-menu-item-divider {
  opacity: 0.3;
}

body.dark-mode .ant-menu-dropdown-vertical.ant-dropdown-menu-root li:hover>* {
  color: black !important;
}


/* body.dark-mode .top-action-menu {
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(40px);
}

body.dark-mode .top-action-menu li:hover {
  background-color: #373737;
  color: #ffffff;
}

body.dark-mode .top-action-menu li {
  color: rgba(255, 255, 255, 0.8);
} */

body.dark-mode .ai-assistant {
  outline: 1px solid rgba(255, 255, 255, 0.23);
  background: #000000;
}

body.dark-mode .chat-header,
body.dark-mode .ai-assistant-fullscreen .helper-home {
  border-color: #404040 !important;
}


body.dark-mode .new-knowledge {
  background: var(--slice-bg-primary-dark) !important;
  color: white;
}

body.dark-mode .file-knowledge {
  background: var(--slice-bg-primary-dark) !important;
  border: 1px solid #ffffff21 !important;
}

body.dark-mode .file-knowledge:hover,
body.dark-mode .new-knowledge:hover {
  background: var(--slice-bg-third-dark) !important;
}


body.dark-mode .chat-active {
  background: #454545 !important;
}

body.dark-mode .chat-header:hover,
body.dark-mode .ai-container-hub .hub-list li:hover {
  background: #373737 !important;
}

body.dark-mode .chat-header h4,
body.dark-mode .ai-helper-new-chat h5,
body.dark-mode .ai-helper-new-chat h4,
body.dark-mode .ai-helper-new-chat h2 {
  color: #ffffff !important;
}

/* body.dark-mode .chat-header.chat-header-conversation, */
body.dark-mode .hub-fix-header {
  background: #000000;
}

body.dark-mode .chat-header.chat-header-conversation:hover {
  background: #000000 !important;
}

body.dark-mode .chat-conversation-header-back,
body.dark-mode .chat-header i,
body.dark-mode .home-footer-btn i,
body.dark-mode .offers-ul h3 {
  color: white;
}

body.dark-mode .chat-img i {
  color: #373737;
}

body.dark-mode .home-footer-btn {
  background: #000000;
  border: 1px solid #676767 !important;
  color: white;
}

body.dark-mode .folder-ai .welcome_title {
  color: white !important;
}

body.dark-mode .dark-mode-invert {
  filter: invert(1)
}

body.dark-mode .big-nav {
  background: #000000;
}

body.dark-mode .big-nav h5,
body.dark-mode .big-nav h2,
body.dark-mode .big-nav .menu-side li {
  color: white !important;
}

body.dark-mode .blocks-side .list-content:hover {
  background: rgba(255, 255, 255, 0.2) !important
}

body.dark-mode .big-nav .block-svg {
  opacity: 0.2;
}

body.dark-mode .big-nav .menu-side li.active,
body.dark-mode .big-nav .menu-side li:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .ant-select-selector {
  background: black !important;
  color: white;
}


body.dark-mode .ant-modal-content {
  background: black !important;
  color: white;
}

body.dark-mode .ant-modal-body h5,
body.dark-mode .ant-modal-body .ant-tabs-tab,
body.dark-mode .ant-modal-confirm-body .ant-modal-confirm-title {
  color: white;
}

body.dark-mode .ant-divider {
  background: white;
}

body.dark-mode .ant-table-content {
  background: black !important;

}


body.dark-mode .full-screen-drag-container,
body.dark-mode .full-screen-mobile-container,
body.dark-mode .upload-container {
  background-color: rgba(0, 0, 0, 0.17);
  color: white;

}


body.dark-mode .import-close-btn {
  background-color: rgba(50, 50, 50, 0.67);
  color: white;
}


body.dark-mode .upload-label {
  color: white;
}

body.dark-mode .onboarding-container .slice-btn-flat {
  color: var(--slice-bg-primary);
}

body.dark-mode .slice-btn-flat:hover {
  background: var(--slice-bg-secondery-dark);
}

body.dark-mode .onboarding-container .ant-select-selector {
  background: var(--slice-onboarding-field-bg) !important;
  border: 0;
}


.onboarding-container .ant-select-selector {
  background: var(--slice-onboarding-field-bg-white) !important;
  border: 0 !important;
  height: 40px !important;
  padding: 5px 10px !important;
}

body.dark-mode .onboarding-container .form__field {
  background: var(--slice-onboarding-field-bg) !important;
}

.onboarding-container nz-select-arrow svg {
  fill: var(--slice-bg-primary-dark) !important;
}

body.dark-mode .onboarding-container nz-select-arrow svg {
  fill: var(--slice-bg-primary) !important;
}

body.dark-mode .register_checkbox {
  color: var(--slice-bg-primary) !important;
}


body.dark-mode .steps-shower-inner {
  background: var(--slice-bg-primary) !important;
}

body.dark-mode .steps-shower {
  background: var(--slice-onboarding-field-bg) !important
}

/* DARK MODE */





.onboarding-container .nz-select-top-control {
  border: 0px;
}


body.white-mode .invert-white {
  filter: invert(1);
}


body.white-mode .slice_show_white_mode {
  display: block !important;
}

body.white-mode .slice_show_dark_mode {
  display: none !important;
}

body.white-mode .create-action {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(0, 0, 0, .07);
}

body.white-mode .search_cont input {
  color: rgba(0, 0, 0, 0.65) !important;
}

body.white-mode .change-chapter-length button {
  border: 1px solid rgba(0, 0, 0, .07) !important;
}

body.white-mode .change-chapter-length button .fa-angle-double-down,
body.white-mode .change-chapter-length button .crouse-icon-group {
  color: rgba(0, 0, 0, .4);
}

body.white-mode .mic_btn {
  background: #e3e3e394;
}

body.white-mode .search_cont input::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

body.white-mode .search_suggest {
  color: rgba(0, 0, 0, 0.65) !important;
}



body.white-mode .home-screen-modal .create-no-credit-modal-inner-box,
body.white-mode .white-mode-invert {
  filter: invert(1)
}

body.white-mode .ai-modal-wrapper-new-course {
  background: rgba(255, 255, 255, 0);
}

body.white-mode .backdrop-ai-course-builder {
  background: rgba(255, 255, 255, 0.25);
}

body.white-mode .welcome_title {


  color: rgba(0, 0, 0, 1) !important;

}

.welcome_title {
  font-weight: 600;
  font-family: var(--slice-font-primary), -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

}



@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

.infinite-spin {
  animation: spin 2s linear infinite;
}

.create-show-footer-buttons {
  gap: 10px;
  justify-content: center !important;
}

/* .create-close-fix {
  margin-left: 5px;
} */

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):before {
  background: #7f4eff !important;

}

.ant-radio-group {
  direction: ltr;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
  background: #7f4eff !important;
  color: white !important;
}

.cardshowdelet .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
  z-index: initial !important;
}

.ant-radio-button-wrapper {
  border-color: #7f4eff !important;
  background: transparent !important;
  border: 1px solid;
  margin: 0 !important;
}


.top-search-app {
  position: absolute;
  display: flex;
  flex-direction: row;
}

body.direction_ltr .top-search-app {
  right: 3px;
}

body.direction_rtl .top-search-app {
  left: 3px;
}

body.direction_rtl .onboarding-container .slice-btn-flat i {
  transform: scale(-1);
}

.top-search-app button {
  background: #7058e4;
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  padding: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.uploadCenter_main h1 {
  font-size: 2em !important;
  text-align: center;
}

.onboarding-container .form__group nz-select-top-control {
  border-radius: 5px !important;
}




.uploa-inner .ul-collections {
  padding: 0;
  max-width: 86%;
  max-width: 84%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
  gap: 10px 20px;
  row-gap: 80px;
  column-gap: 20px;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 60px;
  margin-bottom: 200px;
  gap: 10px;
  gap: 10px 20px;
  row-gap: 80px;
  row-gap: 50px;
  column-gap: 20px;
  column-gap: 0px;
  margin-bottom: 10px;
  margin-top: 50px;
}

.uploa-inner .ul-collections .collection-card {
  display: flex;
  flex-direction: column;
  /* max-width: 270px; */
  transition: 1s ease all;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  border-radius: 8px;
  padding: 10px;
}

.uploa-inner .collection-card:hover {
  transform: scale(1.03);
  /* background: rgba(0, 0, 0, 0.45); */
  background: rgba(0, 0, 0, 0.1);
}

.uploa-inner .collection-card h5 {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 800;
  margin-top: 5px;
  margin-bottom: -5px;
}

.uploa-inner .collection-card .img-collection {
  width: 270px;
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  height: 270px;

  height: 200px;
  background-size: auto 101% !important;
  background-position: center !important;
  transition: 1s ease all;

}

.uploa-inner .collection-card:hover .img-collection {
  background-size: auto 105% !important;
}


.create-show-footer .create-button {
  font-size: 13.5px !important;
  max-width: 150px !important;
  width: 150px !important;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;

}

.create-show .create-button-secondery {
  border-radius: 10px !important;
  min-width: 25px !important;

}



.lead_modal_inner .profile_cont {
  height: auto !important;
}


/* BLOSSOM MODAL */

.blossom-modal .ant-modal-body {
  padding: 0 !important;
  background-image: url('../../assets/img/blossombooks.png');
  position: relative;
  background-size: cover;
  color: white;
}

.blossom-modal .blossom-modal-backdrop {
  background: linear-gradient(rgba(0, 0, 0, 0.83) 0%, rgba(89, 84, 84, 0.38) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
}

.blossom-modal .blossom-modal-header {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 40px 40px 100px 40px;
  position: relative;
  z-index: 9;
}

.blossom-modal .ant-modal-header {
  display: none !important;
}

.blossom-modal .ant-modal-content {
  border-radius: 20px !important;

}

.blossom-modal {
  border-radius: 20px !important;
  overflow: hidden;
}

.bottom-blossom-modal {
  padding: 40px;
  position: relative;
  z-index: 9;
}

.bottom-blossom-modal p,
.blossom-modal h2,
.blossom-modal .ant-modal-close-x {
  color: white !important;
}







/* BLOSSOM MODAL END */





.select-thin-designed .ant-select {
  width: 100%;
}




.select-thin-designed .ant-select .ant-select-selector {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}






.slice-branding-background-color {
  background: rgb(127 78 255) !important;
}

.agent_component .add-bot-btn {
  display: none;
}

.agent_component .chat-footer.chat-footer-conversation {
  background: transparent !important;
}

.agent_component .ai-prompt-component {
  background: var(--slice-theme-block-bg-color) !important;
}

.agent_component .chat-bot-li-chat .bot-response-bubble {
  background: var(--slice-theme-block-bg-color) !important;
  border-radius: 20px;
}

.chat-bot-li-chat.chat-bot-li-chat-reverse .bot-response-bubble {
  background: transparent !important;
  border-radius: 0;
}


.create-button-secondery.ai-assistant-button {
  z-index: 9999999999999999;
  border-radius: 5px;
  color: white;
  min-width: 110px;
  border: 1px solid #ffffff80;
  max-height: 35px;
  font-size: 15px;
  line-height: 10px;
  /* position: fixed;
bottom: 50px;
left: 20px;
 */

  border-radius: 40px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, .11);
  display: flex;
  padding: 0 10px;
  justify-content: space-around;
  /* -webkit-backdrop-filter: blur(41px); */
  /* backdrop-filter: blur(41px); */
  align-items: center;
  border: 0;
  height: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);


  position: fixed;
  bottom: 10px;
  right: 10px;

}





ol,
ul {
  list-style: none;
}


.template-note-container {
  display: flex;
  gap: 20px;
}


.rtl {
  direction: rtl !important;
  text-align: right !important;
}

.ltr {
  direction: ltr !important;

}

.mark_choose_cont {
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60px;
  height: 32px;
  background: #d0d0d0;
  border-radius: 18px;
  padding: 0 4px;
  color: black;

  position: absolute;
  bottom: -30px;
  transform: translateY(100%);
}


.mark_choose {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.mark_choose.mark_active {
  background: white;
  font-weight: 600;
  box-shadow: 0 2px 3px;
}


.backgroundOpen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 99999;
  bottom: 0;
  left: 0;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  opacity: 0.5;
  transition: visibility 0s, opacity 0.5s linear;
}





.backgroundOpen:hover {
  visibility: visible;
  opacity: 0.4;
  transition: visibility 0s, opacity 0.5s linear;
}

.backgroundOpen.isCollapsed {
  visibility: hidden;
  opacity: 0;
}







.folder-ai .app-ai-bottom.ai_search_cont {
  position: absolute !important;
  top: 46px !important;
  bottom: calc(100% - 7rem) !important;
  transform: scale(0.95) translateX(-50%);
}


.top-action-menu {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  /* opacity: 0.6; */
  transition: 0.4s ease all;
  padding: 5px;
  margin: 0;
}

/* .top-action-menu:hover {
  opacity: 1;
} */

.top-action-menu:not(.chapter-menu) li:hover {
  background-color: #1b1b1b !important;
  color: white !important;
}

.menuBarOnOver .top-action-menu li {
  font-size: 14px;
}

.top-action-menu li:not(.chapter_sub_li) {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  padding: 0 8px;
  font-size: 16px;
  border-radius: 4px;
  height: 27px;
  width: 27px;
  cursor: pointer;
  transition: 0.4s ease all;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 2px;
  border-radius: 50%;
}

body .top-action-menu {
  /* background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid;
  border-color: #F0F0F0;
  backdrop-filter: blur(40px); */

  background: #ffffff3d;
  backdrop-filter: blur(20px);
  background-color: #00000047;
  background-blend-mode: overlay;
  color: white;
}

body .top-action-menu .preview_active_mode {
  color: black !important;
}



.opacity-0 {
  opacity: 0 !important;
}



body.white-mode {
  background-color: #ffffff !important;
}


body.white-mode .slice_lang_loader {
  background: rgb(255, 255, 255);
}

.hide-btn {
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}



.dark-mode .file-for-ai-drag-container.state-paperclip {
  color: white;
}

.dark-mode .search_suggest_cont {
  /* background: rgb(0 0 0 / 90%) !important;
  backdrop-filter: blur(40);
  color: black !important;
  margin-top: 1px; */
}

.dark-mode .search_suggest_cont h3 {
  color: white !important;
}



body .search_suggest:hover {
  color: rgba(0, 0, 0, 0.698) !important;
}


.dark-mode .search_suggest:hover div {
  color: black;
}

.dark-mode .search_suggest div {
  color: white;
}


.dark-mode .search_suggest_cont h3,
.dark-mode .files-grid-ul h3 {

  color: white;

}


.gift_btn span {
  color: white;
  font-weight: 600;

}

.gift_btn {
  background: rgb(127 78 255);
  position: relative;
  width: 180px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s ease all;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding-right: 15px;
  font-size: 13px;
  padding-left: 50px;
}

.gift_btn:hover {
  background: rgb(138, 91, 255);
  transform: scale(1.02);
}

.gift_btn .lottie_gift {
  width: 115px;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: -22px;
  left: -27px;
}







.create-header-profile-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  /* min-width: 80px !important; */
  min-height: 40px;
  font-weight: 600;
  font-size: 17px;
  gap: 10px;
}

.blurhash-loaded .blurhash-course {

  opacity: 0;

}

.topLeftFixedBar {
  top: 10px;
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topLeftFixedBar button {
  margin-right: 3px;
}

.text-gradient {
  background: linear-gradient(300deg, #501e9c 0, #8169f1 40%, #a44cee 75%, #ff847f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body app-slices-blocks .ant-btn,
body app-opening-screen .ant-btn {
  /* background-color: rgba(255, 255, 255, 0.52);
  border-color: rgba(217, 217, 217, 0.412);
  color: black; */
  /* background: var(--slice-theme-bg-color-third) !important;
  color: var(--slice-theme-text-color) !important;
  border: none; */

  background: #ffffff3d;
  backdrop-filter: blur(20px);
  background-color: #00000047 !important;
  background-blend-mode: overlay;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body app-slices-blocks .uploadBtnFloat .ant-btn,
body app-opening-screen .uploadBtnFloat .ant-btn {
  border: none;
}

body app-slices-blocks .ant-checkbox-wrapper,
body app-opening-screen .ant-checkbox-wrapper {
  color: var(--slice-theme-text-color);
}

.flex-20 {
  display: flex;
  gap: 20px;
}

.flex-10 {
  display: flex;
  gap: 10px;
}

.flex-8 {
  display: flex;
  gap: 8px;
}

.flex-4 {
  display: flex;
  gap: 4px;
}

/* .info_circle {
  font-size: 16px;
  margin-top: 3px;
  position: relative;
}

.info_circle:hover .info_text {
  display: block;
} */

/* .info_text {
  display: none;
  background: #e1e1e1;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  padding: 6px;
  border-radius: 8px;
  z-index: 9;
  font-size: 12px;
  transform: translate(-50%, -100%);
  text-align: center;
  border: 1px solid #d9d9d9;
} */

.true_false_answers {
  display: flex;
  gap: 20px;
  margin: 20px;
}

body .ant-btn.ant-btn-danger {
  color: #fff;
  background: #ff4d4f;
  border-color: #ff4d4f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

.partinthem .color-picker {
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
  position: absolute !important;
}

.answerDada.squerChoice .Multi {
  border-radius: 0 !important;
}

.partinthem .color-picker .arrow {
  display: none;
}

body.direction_rtl .stock_arrow {
  left: -40px;
  transform: rotate(185deg) rotateY(180deg);
}

body.direction_ltr .stock_arrow {
  right: -40px;
}

.blurhash-course {
  width: 100%;
  height: 100%;
  position: absolute;
  /* z-index: -1; */
  left: 0;
  text-align: 0;
  top: 0;
  transition: 1s ease all;
}

.blurhash-course .blurhash-canvas-container {
  height: 100% !important;
  width: 100% !important;
}

.ul-new-course {
  /* margin-top: -30px; */
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  justify-content: space-evenly;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 40px 25px;
  width: 100%;
  padding-bottom: 200px;
  padding: 0% 90px;
  margin-bottom: 70px;
}

.create-profile-pic {
  border-radius: 100%;
  height: 36px;
  width: 36px;
}

.create-show-close:hover {
  background: rgba(0, 0, 0, 0.6)
}

.create-show-close {
  background: rgba(0, 0, 0, 0.21);
  backdrop-filter: blur(40px);
  border-radius: 100%;
  width: 50px;
  height: 50px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-show-close svg {
  width: 14px;
  fill: white;
  /* margin-top: 3px; */
}



.template-favorite {
  color: #f09819 !important
}

/* ANIMATION */


.animation-duration-0-2 {
  animation-duration: 0.2s;
}

.animation-duration-0-3 {
  animation-duration: 0.3s;
}

.animation-duration-0-4 {
  animation-duration: 0.4s;
}

.animation-duration-0-5 {
  animation-duration: 0.5s;
}

.animation-duration-0-6 {
  animation-duration: 0.6s;
}

.animation-duration-0-7 {
  animation-duration: 0.7s;
}

.animation-delay-0-2 {
  animation-delay: 0.2s;
}

.animation-delay-0-3 {
  animation-delay: 0.3s;
}

.animation-delay-0-4 {
  animation-delay: 0.4s;
}

.animation-delay-0-5 {
  animation-delay: 0.5s;
}

.animation-delay-0-6 {
  animation-delay: 0.6s;
}

.animation-delay-0-7 {
  animation-delay: 0.7s;
}

.animation-delay-0-8 {
  animation-delay: 0.8s;
}

.animation-delay-0-9 {
  animation-delay: 0.9s;
}

.animation-delay-0-10 {
  animation-delay: 1.0s;
}

.animation-delay-0-11 {
  animation-delay: 1.1s;
}

.animation-delay-0-12 {
  animation-delay: 1.2s;
}

.animation-delay-0-13 {
  animation-delay: 1.3s;
}

.animation-delay-0-14 {
  animation-delay: 1.4s;
}

.animation-delay-0-15 {
  animation-delay: 1.5s;
}

.animation-delay-0-16 {
  animation-delay: 1.6s;
}

.animation-delay-1-0 {
  animation-delay: 1.0s;
}

.animation-delay-1-1 {
  animation-delay: 1.1s;
}

.animation-delay-1-2 {
  animation-delay: 1.2s;
}

.animation-delay-1-3 {
  animation-delay: 1.3s;
}

.animation-delay-1-4 {
  animation-delay: 1.4s;
}

.animation-delay-1-5 {
  animation-delay: 1.5s;
}

.animation-delay-1-6 {
  animation-delay: 1.6s;
}

.animation-delay-1-7 {
  animation-delay: 1.7s;
}

.animation-delay-1-8 {
  animation-delay: 1.8s;
}

.animation-delay-1-9 {
  animation-delay: 1.9s;
}

.animation-delay-2-0 {
  animation-delay: 2.0s;
}

.animation-delay-2-1 {
  animation-delay: 2.1s;
}

.animation-delay-2-2 {
  animation-delay: 2.2s;
}

.animation-delay-2-3 {
  animation-delay: 2.3s;
}

.animation-delay-2-4 {
  animation-delay: 2.4s;
}

.animation-delay-2-5 {
  animation-delay: 2.5s;
}

.animation-delay-2-6 {
  animation-delay: 2.6s;
}

.animation-delay-2-7 {
  animation-delay: 2.7s;
}

.animation-delay-2-8 {
  animation-delay: 2.8s;
}

.animation-delay-2-9 {
  animation-delay: 2.9s;
}

.animation-delay-3-0 {
  animation-delay: 3.0s;
}

.animation-delay-4-0 {
  animation-delay: 4.0s;
}

.animation-delay-5-0 {
  animation-delay: 6.0s;
}

.animation-delay-6-0 {
  animation-delay: 6.0s;
}

.animation-delay-7-0 {
  animation-delay: 7.0s;
}

.animation-delay-8-0 {
  animation-delay: 8.0s;
}

.animation-delay-9-0 {
  animation-delay: 9.0s;
}


.animation-delay-11-0 {
  animation-delay: 11.0s;
}

.animation-delay-show-1 {
  animation-delay: 0.1s;
}

.animation-delay-show-2 {
  animation-delay: 0.2s;
}

.animation-delay-show-3 {
  animation-delay: 0.3s;
}

.animation-delay-show-4 {
  animation-delay: 0.4s;
}



.animate {
  transition: 1s ease all;
  /* animation-duration: var(--animate-duration); */
  animation-fill-mode: both;
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeOut {
  0% {
    visibility: visible;
    opacity: 1;
  }

  99% {
    visibility: visible;
    opacity: 0;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.fadeIn {
  animation-name: fadeIn;
}

.fadeInUp {
  animation-name: fadeInUp;
}

body .ai-action-opener .fadeInUpCenterTransform,
.uploadContainer.fadeInUpCenterTransform,
body .ai-home-modals .fadeInUpCenterTransform {
  animation-name: fadeInUpCenterTransform;
}

.fadeOutDownCenterTransform {
  animation-name: fadeOutDownCenterTransform;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* @keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} */

@keyframes fadeInUpCenterTransform {
  from {
    opacity: 0.3;
    transform: translateY(20px) translateX(-50%);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}




@keyframes fadeOutDownCenterTransform {
  from {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }

  to {
    opacity: 0;
    transform: translateY(20px) translateX(-50%);
  }
}






.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;

}

.dropdown .dropdown-current-flag {
  font-size: 27px;
  padding: 7px;
  border-radius: 5px;
}

.dropdown-content ul li:hover {
  /* background: rgba(0, 0, 0, 0.6); */
  background: rgba(208, 208, 208, .6);
}

.dropdown-flag {
  font-size: 23px;
}

.dropdown-flag-list {
  /* margin-right: 14px;
  margin-left: -7px; */
  font-size: 23px;
  margin: 0 4px;
  width: 30px;
}

.dropdown-flag-name {
  font-size: 14px;
  min-width: 55px;
}

.dropdown-content ul li {
  text-align: center;
  /* font-size: 14px; */
  /* padding: 14px; */
  font-size: 13px;
  padding: 14px 5px;
  cursor: pointer;
  transition: 0.2s ease all;
  display: flex;
  align-content: center;
  align-items: center;
  /* justify-content: center; */
  color: #000000;
  color: white !important;

  font-weight: 600;
}

.fr-command[data-cmd="lineHeight"] .fa.fa-arrows-v::before {
  content: "\f034";
}

.fr-command[data-cmd="tableCellVerticalAlign"] .fa.fa-arrows-v::before {
  content: "\f161";
}

.fr-command[data-cmd="tableCells"] .fa.fa-square-o::before {
  content: "\f009";
}

.fr-command[data-cmd="tableHeader"] .fa.fa-header::before {
  content: "\f1dc";
}



/* breadcrumbs !!!! */

.ant-breadcrumb {
  color: rgba(0, 0, 0, 0.35) !important;
}

.ant-breadcrumb>nz-breadcrumb-item:last-child a {
  color: rgba(0, 0, 0, 0.6) !important;
}


.ant-breadcrumb-link:hover {
  background: #efefef;
  color: rgba(0, 0, 0, 0.6) !important;
}

.ant-breadcrumb-link {
  padding: 2px 7px;
  border-radius: 10px;
  /* font-size: 17px; */
  font-weight: 600;
  transition: 0.3s ease all;

  /* color: #282828; */
  /* font-family: Inter; */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.ant-breadcrumb .ant-breadcrumb-separator {
  color: rgba(0, 0, 0, 0.2);
  margin: 0 3px;
}

.ant-breadcrumb>nz-breadcrumb-item:last-child .ant-breadcrumb-link {
  /* background: #e2e2e2; */
}


span.ant-breadcrumb-link.ng-star-inserted a {
  font-size: 16px;
}

.breadcrumbs i.ti.ti-smart-home {
  font-size: 23px !important;
}



.dropdown-content ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-radius: 10px;
}

.dark-blur-bg {
  /* backdrop-filter: blur(41px); */

  background: rgba(0, 0, 0, 0.6);
  /* border: 1px solid rgba(255, 255, 255, 0.11); */
  color: white;
}

.dropdown-language-top {
  position: fixed;
  right: 140px;
  z-index: 999999999;
  top: 16px;

}

.dropdown-user-top {
  position: fixed;
  right: 20px;
  z-index: 999999999;
  top: 7px;
}



.dropdown-language-bottom {
  position: fixed;
  z-index: 999;
  bottom: 47px;
  left: 16.9%;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  animation-direction: reverse
}

.dropdown-language-bottom .dropdown-content {
  top: -40px;
  opacity: 0;
}

.dropdown-language-bottom.dropdown:hover .dropdown-content {
  height: 300px;
  top: -330px;
  opacity: 1;

}


.create-current-language {
  background: black;
}

.dropdown-user-top .dropdown-flag-list {
  font-style: normal;
}

.dropdown-content {
  height: 0px;
  position: absolute;
  padding: 0;
  z-index: 1;
  overflow: auto;
  border-radius: 10px;
  transition: 0.5s ease all;
  min-width: 130px;
  top: 100%;
  right: 0;
  right: -25px;
}

.dropdown:hover .dropdown-content {
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
}














.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #7f4eff !important;
  border-color: #7f4eff !important;
}

.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-checked::after,
.ant-checkbox-input:focus+.ant-checkbox-inner {
  border-color: #7f4eff !important;
}

.courses_loader_cont {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-direction: column;
  gap: 15px;
}

.coffee-message {
  width: 65%;
  text-align: center;
}

.courses_loader_cont .infinite-spin {
  height: 30px;
  width: 30px;
  display: flex;
  font-size: 30px;
}

.infinite-spin {
  display: flex;
}


.share-container .ant-switch {
  background-color: rgba(160, 160, 160, 0.74) !important;
}

body.dark-mode .courses_loader_cont {
  color: white !important;
}

body.dark-mode .ant-switch:not(.ant-switch-checked) {
  background: #939393 !important;
}

body.dark-mode .org_card_item i {
  background: rgb(0, 0, 0, 0.5) !important;
  color: white !important;

}

body.dark-mode .org_card h6 {
  color: white !important;
}

body.dark-mode .org_card {
  background: #2e2e2e !important;
}

body.dark-mode .ant-empty-description {
  color: white !important;
}

body.dark-mode .ant-table-thead>tr>th {
  background: #2e2e2e !important;
  color: white !important;
}

.dark-mode .files-grid-ul li.animated {
  /* width: 130% !important; */
  color: white;
  background: #151515 !important;
}


.ant-switch.ant-switch-checked {
  background-color: #7f4eff !important;
}

.ant-switch {
  background-color: rgba(0, 0, 0, 0.74) !important;
}




.ai-chap-item .text-results p {
  font-size: 16px !important;

}

.new-bg {
  background: #FAFAFB;
  margin: 0;
}

.button-new-bg-white {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(50px) !important;
  -webkit-backdrop-filter: blur(50px);
  color: white !important;
}

.button-new-bg-black {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(50px) !important;
  -webkit-backdrop-filter: blur(50px);
  color: white !important;
}

.course-icon-wraper {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(50px) !important;
  -webkit-backdrop-filter: blur(50px);
  color: white !important;

}

/* SLICE AI LOGO */


body .output-li p {
  font-size: 16px !important;

}

.slice-ai-logo-txt {
  color: #5c388a;
  display: inline-block;
  margin: 0 6px;
}

.ai-logo-txt {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  transition: 1s ease all;
  color: white;
  border-radius: 120px;
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
}


/* fix for forela strong + underline  */

.fr-element u,
.fr-element s {
  /* font-weight: inherit !important; */
  font-style: unset !important;
}

.fr-element strong,
.fr-element strong u,
.fr-element strong u s,
.fr-element strong s,
.fr-element strong s u {
  font-weight: bold !important;
}

.posCard {
  overflow: hidden;
}


.newContainer .hover:active>span,
.newContainer .hover:focus>span {
  position: initial !important;
}

.badge-new {
  display: block;
  position: absolute;
  left: -50px;
  background: hsl(0deg 94% 40%);
  padding: 5px 17px;
  font-weight: bold;
  color: white;
  border-radius: 5px;
  top: 9px;
  z-index: -1;
  font-size: 12px;
  box-shadow: 1px 1px 22px 10px rgba(0, 0, 0, .24);

}


.active-chapter-options {
  background: red !important;
}

.menu-hidden {
  opacity: 0.3 !important;
}

.GoToChapter {
  cursor: pointer !important;
}


.btn.ansCheck2 p {
  margin: 0px !important;
}


/* SEARCH ------------------------------------------------------------------------ */



#searchInit {
  position: absolute;
  z-index: 998;
  top: 10px;
  background: white;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  border: 0px;
}

/*  */


#searchContainer {
  position: fixed;
  top: -300px;
  left: 0;
  width: calc(100vw - 40px);
  height: 10vh;
  z-index: 9999;
  margin: 20px;
  visibility: hidden;
  opacity: 0;
  transition: ease 1s;
}

#searchContainer.show-searchContainer {
  visibility: visible !important;
  opacity: 1 !important;
  top: 0px;
  cursor: pointer;
  height: 100vh;


}

#searchBackdop.show-searchBackdop {
  visibility: visible !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.7);

}


#searchBackdop {
  visibility: hidden;

  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 9998;

  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: ease 0.4s;

}

#searchInside {
  width: 100%;
  border: 0px;
  padding: 10px 15px;

  /* border:1px solid rgb(240, 47, 75);  */
}

#searchInsideUL {
  margin-top: 10px;
  padding: 0px;
  background: white;
}

#searchInsideUL li {
  width: 100%;
  list-style: none;
  border: 0px;
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

#searchInsideUL li:hover {
  background: rgba(0, 0, 0, 0.05)
}

#searchInsideUL li:last-child {
  border: 0px;
}

.search-no-results {
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
  display: none;
}

.search-no-results.show-no-results {
  display: block
}

.add_word_search {
  width: 100%;
}

.add_word_search .ant-select-selection__placeholder {
  text-align: center;
}


/* ----------------------------------------------------------------------------------------  */
.html_content_container {
  display: flex;
  flex-direction: column;
}

body .ant-btn-icon-only {
  width: 30px;
  height: 30px;
}

.course-icon-wraper {
  background: rgba(147, 147, 147, 0.72);
  width: 28px;
  font-size: 15px;
  border-radius: 7px;
  /* position: absolute; */
  /* min-width: 28px; */
  text-align: center;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crouse-icon-group {
  font-size: 14px;
  direction: ltr !important;
  display: flex;
  align-items: center;
}


.course-icon-circle {
  font-size: 4px;
  margin: 1px;
  opacity: 0.6;
}


.course-icon-up {
  margin-bottom: -4px;
}


.course-icon-down {
  margin-top: -4px;
}

.icon-wraper-table .course-icon-wraper {
  margin-top: -15px;
}

.freestyle_slide_menu span {
  margin: 0 !important;
}

.cdk-overlay-container {
  z-index: 999999999999999999 !important;
}

body.direction_ltr .cdk-overlay-container {
  direction: ltr !important;
}

body.direction_rtl .cdk-overlay-container {
  direction: rtl !important;
}

body.direction_ltr .cdk-global-overlay-wrapper {
  direction: ltr !important;
}

body.direction_rtl .cdk-global-overlay-wrapper {
  direction: rtl !important;
}

.mode-error-close-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.mode-error-close-btn {
  cursor: pointer;

  background: transparent;
  padding: 8px 30px;
  border-radius: 10px;
  border: 1px solid white;
}

.course-box-overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.6);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);

}

.course-box .course-box-spacer {
  width: 100%;
  height: 120px;
  /* height: 70px; */

  transition: all 0.3s ease;
}

.course-box.add-new-course .nameDiv p i {
  text-align: center;
  font-size: 52px;
  display: block;
  margin-bottom: 7vh;
}

.course-box.add-new-course {
  transition: all 0.3s ease;
}

.course-box.add-new-course:hover .nameDiv p {
  color: #898989;
}

.course-box.add-new-course:hover::before {
  border: 10px dashed #898989;
}

.course-box.add-new-course:before {
  content: "";
  position: absolute;
  border: 10px dashed #b9b9b9;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

.course-box.add-new-course .nameDiv p {
  color: #898989;
  text-align: center;
}

.course-box .nameDiv p {
  font-size: 26px !important;
  font-weight: 700;
  margin-bottom: 0px;

  font-size: 1.4rem !important;
  line-height: 1.2 !important;
}

.course-box .enterCourseBtn {
  position: absolute;
  bottom: 5px;
  z-index: 9;
  text-align: center;
  left: 10px;
  /* transform: translateX(-50%); */
  width: 190px;
  border-radius: 60px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 700;
  border: 0px;
  letter-spacing: -0.5px;
  cursor: pointer !important;
  transition: all 0.3s ease;
}

.course-box .descDiv {
  font-size: 15px;
  padding-top: 6px;
  padding-top: 0px;

}

.course-box .descDiv div {
  cursor: pointer !important;
}

/* HOVER EFFECT */

.course-box:hover {
  /* background-position: left !important; */
  /* transition: all 0.9s ease;
  margin-top: -5px; */

  /* transform: translate(0, -5px); */
  transition: all 0.3s ease-out;
}

.course-box {
  /* margin: 35px; */
  margin: 25px;
  /*   
    width: 273px !important;
    height: 430px !important; */

  width: 219px;
  height: 146px;

  cursor: pointer;
  position: relative;
  border-radius: 8px !important;
  display: inline-block;
  padding: 10px 10px 18px 25px;
  padding: 10px;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden;
  /* box-shadow: 0px 5px 11px rgba(0, 0, 0, 0.2) !important; */
  box-shadow: none !important;
  white-space: normal;
  letter-spacing: -0.6px;
  transition: all 0.3s ease;

  margin: 0;
  /* width: 330px !important;
  height: 268px !important; */
  /* width: 290px !important;
  height: 218px !important; */


}

.course-box:hover .course-box-spacer {
  /* height: 110px;
  height: 60px; */

}

.course-box:hover .course-box-overlay {
  background: rgba(0, 0, 0, 0.7);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 90%);

}

.course-box:hover .enterCourseBtn {
  bottom: 10px;
  background: rgb(216, 216, 216);
}

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/
.table-template table tr td {
  border: 1px solid var(--slice-theme-block-bg-color);
}

.ant-popover-message>.anticon.anticon-exclamation-circle:before {
  content: "\e63b";
}

#end .bigFont {
  text-align: center !important;
  margin: 0 auto;
}

.GoToChapterVideo:first-child {
  margin-left: 150px;
}

.video-force-fullscreen .video-mobile-fullscreen {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.video-force-fullscreen .mobile-play {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 5 Free" !important;
  font-size: 5rem !important;
}

.videoInteractive-split-view.videoContainer .slice-interactive-video-wraper.slice-interactive-video-wraper-show {
  background: transparent;
}

.videoInteractive-split-view.videoContainer {
  border-radius: 0px !important;
  /* background: transparent; */
  box-shadow: none !important;
}

.canvas_hotspot_video {
  float: left;
}

.videoInteractive-split-view.videoContainer video,
.videoInteractive-split-view.videoContainer .video-net,
.videoInteractive-split-view.videoContainer .canvas_hotspot_video {
  width: 60%;
  height: 60%;
  float: left;
  margin-top: 10%;
  margin-bottom: 10%;
  margin-left: 2%;
}

.videoInteractive-split-view.videoContainer .HERE-HOTSPOT-CLASS video {
  /* HOTSPOT CLASS */
  width: 60%;
  height: 60%;
  margin-top: 0%;
  margin-left: 0%;
}


.cureent-chapter-tile {
  outline: 8px solid rgba(0, 0, 0, .5);
}

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/
.video-mobile-fullscreen,
.mobile-play {
  display: none;
}

.videoContainer-mobile-fullscreen {
  height: 100%;
}


.mobile-alert {
  display: none;
}

/* For mobile phones: */

@media screen and (max-width: 734px) and (orientation: landscape) {
  html .video-mobile-fullscreen {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
    cursor: pointer;
  }

  .grid_component {
    flex-direction: column !important;
  }


  .mobile-play {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free" !important;
    font-size: 5rem !important;
  }
}

@media only screen and (max-width: 734px) and (orientation: portrait) {
  html .video-mobile-fullscreen {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }

  .grid_component {
    flex-direction: column !important;
  }


  .mobile-play {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free" !important;
    font-size: 5rem !important;
  }

  .video-mobile-fullscreen-container {
    transform: rotate(90deg);
    transform-origin: right top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    right: 0;
  }
}

/* End  For mobile phones: */

.video-interactive-title p {
  font-size: 2rem !important;
}

.interactive-video-logo {
  position: absolute !important;
}

.playFromTo-wraper {
  display: none;
  width: 20px;
  background-color: #04ff00;
  position: absolute;
  top: 0px;
  left: 230px;
  z-index: 9;
  height: 80px;
}

.interactive-video-logo.interacrtive-video-logo-top-left {
  top: 20px;
  left: 20px;
}

.interactive-video-logo.interacrtive-video-logo-top-right {
  top: 20px;
  right: 20px;
}

.interactive-video-logo.interacrtive-video-logo-bottom-right {
  bottom: 50px;
  right: 20px;
}

.interactive-video-logo.interacrtive-video-logo-bottom-left {
  bottom: 50px;
  left: 20px;
}

.interactive-video-logo.normal {
  width: 10%;
}

.interactive-video-logo.small {
  width: 7.5%;
}

.interactive-video-logo.big {
  width: 13.5%;
}

.fr-toolbar.fr-inline {
  z-index: 999;
}

.newH {
  display: block;
  width: 100%;
  margin: 25px auto 0px;
  background-color: white;
  padding: 0px 0px 15px 0px;
  box-shadow: 1px 1px 31px 1px #cacaca57;
}

.net {
  width: 100%;
  height: 100%;
  /* border: 1px solid black; */
  position: relative;
}

.hotspot-img-canvas-wraper {
  position: relative;
}

.slice-interactive-video-wraper.hotspot-video-wrapper {
  backdrop-filter: blur(0px);
  background: none;
}

.hotspot-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}


html body .canvas {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  min-height: none;
  background-position: 0px 0px;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  /* z-index: 115; */
  z-index: 99;
}

.dot-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.nonresize {
  resize: none;
}

.text-anim {
  /* transform: translate(-50%, -50%); */
  text-align: center;
  animation: zoomIn 0.4s forwards;
  margin: 0;
  font-weight: 600;
}

.img-anim {
  animation: zoomIn 0.4s forwards;
}

.img-anim-x {
  animation: zoomIn 0.4s forwards;
}

.fade-off {
  animation: fadeOff 0.5s forwards;
}

.fade-away {
  animation: fadeAway 0.5s forwards;
}

.new-spot::before {
  width: 50px;
  height: 18px;
  position: absolute;
  content: "";
  bottom: -2px;
  right: -25px;
  z-index: 0;
  cursor: nw-resize;
  border: 1px solid black;
  outline: 1px solid white;
  transform-origin: center bottom;
  transform: rotate(-45deg);
  background-image: repeating-linear-gradient(transparent 60%, black 50%, transparent 100%);
}

.new-spot {
  direction: ltr;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid black;
  box-shadow: 0 0 2px 1px white;
  position: absolute;
  overflow: hidden;
  cursor: grab;
  z-index: 102;
}

.ignore_mousedown {
  transition: none !important;
}

.print-spot {
  direction: ltr;
  position: absolute;
  border: 4px solid #29bc1d;
  border-radius: 6px;
  z-index: 102;
}

/* .footer-dot {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: auto;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}

.footer-dot button {
  margin: 0 4px;
} */

.new-dotspot {
  border-radius: 50%;
  direction: ltr;
  box-sizing: border-box;
  cursor: move;
  position: absolute;
  cursor: grab;
  z-index: 98;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notfound-spot {
  border: 4px solid #bc1d1d;
}

.found-spot {
  border: 4px solid #29bc1d;
}

.limit-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}


.display-none.CancelDisplayNone.display_none_export {
  display: none !important;
}

.dotspot-text {
  position: absolute;
  z-index: 98;
  top: 0;
  font-weight: 600;
  line-height: 150%;
  background: white;
  padding: 4px;
  border-radius: 10px;
  visibility: hidden;
  white-space: pre-line;
  word-break: initial;
  color: black;
  min-width: min-content;
}

.dotspot-text.direction_rtl {
  direction: rtl;
  text-align: right;
}

.dotspot-text.direction_ltr {
  direction: ltr;
  text-align: left;
}

.dotspot-text.direction_rtl.dot_text_default {
  right: calc(100% + 8px) !important;
}

.dotspot-text.direction_ltr.dot_text_default {
  left: calc(100% + 8px) !important;
}


.dot_move_text {
  display: inline-flex;
  direction: rtl !important;
  white-space: pre;
  align-items: center;
  padding: 6px;
  cursor: pointer;
  margin: 4px;
  border: 1px solid #bebebe;
  border-radius: 4px;
}

.dot_move_text:hover {
  background: #00000012;
}

.ant-input-number.input-mistake {
  box-shadow: 0px 0px 0px 1px #d9d9d9;
}

.input-mistake .ant-input-number-handler-wrap {
  opacity: 1 !important;
}

.editable-dotspot {
  border: 1px dotted black;
  padding: 10px 5px;
  border-radius: 6px;
}

.dotspot-text-show.dotspot-text-hide {
  visibility: hidden;
}

.dotspot-text-show {
  visibility: visible;
  z-index: 999;
}

.video-edit-net {
  width: 38%;
  height: 100%;
  overflow: auto;
  right: 0;
  position: absolute;
  top: 0;
  /* z-index: 112; */
  z-index: 9;
}

.vid-hotspot-title {
  position: absolute !important;
  top: 20px;
  text-align: center;
  font-size: 30px;
  z-index: 117;
  color: white;
  font-weight: 600;
  left: 50%;
  transform: translate(-50%, 0);
}


.video-feedback {
  border-radius: 50px;
  padding: 10px;
  background-color: #f6f6f6;
}

.flex-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.flex-evenly {
  display: flex !important;
  align-items: center;
  justify-content: space-evenly;
}

.flex-around {
  display: flex !important;
  align-items: center;
  justify-content: space-around;
}

.freestyle_slider {
  width: 70px;
  margin: 0 10px;
}

.freestyle_slider .ant-slider {
  margin: 0;
}

.freestyle_slider .ant-slider-handle {
  border: 1px solid #908e8e;
}

body.dark-mode .freestyle_slider .ant-slider-handle {
  background: #2c3335;
}

body.dark-mode .input-symbol {
  background: #232323 !important;
}


body.dark-mode .org_coins_cont {
  background: #2c3335 !important;
}

body.dark-mode .org_coins_cont h5 {
  color: white !important;
}

body.dark-mode .folder_cont {
  background: #2c3335 !important;
}

body.dark-mode .folder_cont .fa-times {
  background: #2c3335 !important;
  outline: 3px solid black !important;
}

.fa-angle-up.border_radius_icon:before,
.fa-angle-right.border_radius_icon:before,
.fa-angle-down.border_radius_icon:before,
.fa-angle-left.border_radius_icon:before {
  transform: rotate(-45deg);
}


.flex-align {
  display: flex;
  align-items: center;
}

.flex-start {
  display: flex;
  align-items: start;
}

.freestyle_settings_modal .ant-modal {
  width: 80vw !important;
}

.video-net {
  width: 100%;
  height: 100%;
  /* border: 1px solid black; */
  position: relative;
  z-index: 116;
  float: left;
}

.videoContainer .options-menu-hotspot {
  top: 10px;
  right: 10px;
  position: absolute;
  z-index: 120;
}

.videoContainer .options-menu-hotspot button {
  top: 10px;
  right: 10px;
}

.pulsee {
  animation: pulse-animation 1.5s infinite;
}

.pulse-click::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.8);
  -webkit-animation: pulse-click-anim 0.5s ease-out forwards;
  animation: pulse-click-anim 0.5s ease-out forwards;
}

.fr-toolbar.fr-desktop.fr-inline {
  /* .fr-toolbar.fr-rtl.fr-desktop.fr-inline { */
  z-index: 999999999;
}

/* .fr-popup.fr-desktop.fr-inline.fr-rtl.fr-active { */
.fr-popup.fr-desktop.fr-inline.fr-active {
  z-index: 9999999999 !important;
}

.rotateAnim {
  animation-name: rotateAnim;
  -webkit-animation-name: rotateAnim;
}

@keyframes rotateAnim {
  from {
    transform: rotate(0deg);
  }

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

@-webkit-keyframes pulse-click-anim {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }

  80% {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);
    opacity: 0.1;
  }

  100% {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes pulse-click-anim {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }

  80% {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);
    opacity: 0.1;
  }

  100% {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes fadeOff {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes fadeAway {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/


.reorder-content .cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
}

.tile-container:last-child {
  border: none;
}

.cdk-drop-list-dragging .tile-container:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
}

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/









/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/
.hide-interaction-on-progress {
  display: none !important;
}

.interactive_video_controls_wrapew .ant-table-placeholder {
  display: none;
}

@keyframes zoomInOpacityOut {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.interaction_table .ant-table-wrapper {
  width: 80vw;
  margin: 0 auto;
  margin-top: -30px;
}

.interaction_table table tbody tr:nth-child(odd),
.interaction_table table tbody tr:nth-child(even) {
  background-color: white;
}

.interaction_table .ant-table-placeholder {
  opacity: 0;
  display: none;
}

.hide-play-pause-videoInteractive {
  display: none !important;
}

.play-pause-videoInteractive {
  position: absolute;
  opacity: 0;
  left: 50%;
  top: 50%;
  color: #ffffff;
  font-size: 30px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  /* border: 1px solid #ccc; */
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.57);
  z-index: 9;
  transition: all 0.3;
  animation: zoomInOpacityOut 0.6s;
}

.play-pause-videoInteractive i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.colaps-edit {
  z-index: 0;
}

.delete_hover:hover {
  color: red !important;
  border-color: red !important;
}

.loader {
  color: #7b7b7b;
  font-size: 7px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 40px;
  margin-left: 20px;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  transform: translate(-50%, -50%);
}

.loader_videoInteractive .loader {
  color: #ffffff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
      -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
      -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
      -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
      -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
      -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

@keyframes load4 {

  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 0;
  }

  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em,
      -3em 0 0 -1em, -2em -2em 0 -1em;
  }

  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em,
      -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0,
      -3em 0em 0 -1em, -2em -2em 0 -1em;
  }

  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em,
      -3em 0 0 0, -2em -2em 0 -1em;
  }

  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
      -3em 0em 0 0.2em, -2em -2em 0 0;
  }

  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0,
      -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.loader_videoInteractive {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 8;
}

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

/* 
[class^="video-"],
[class*=" video-"] {
    font-family: "media";
    font-size: 50px;
} */

.video-fullscreen-enter:before {
  content: "\f065";
}

.video-picture-in-picture-enter:before {
  content: "\e001";
}

.video-picture-in-picture-exit:before {
  content: "\e002";
}

.video-fullscreen-exit:before {
  content: "\f066";
}

.video-cast:before {
  content: "\e004";
}

.video-cast-connected:before {
  content: "\e005";
}

.video-arrows-5-backward:before {
  content: "\e006";
}

.video-arrows-5-forward:before {
  content: "\e007";
}

.video-arrows-10-forward:before {
  content: "\e008";
}

.video-arrows-10-backward:before {
  content: "\e009";
}

.video-fast-backward:before {
  content: "\e00a";
}

.video-arrows-10-backward:before {
  content: "\e00b";
}

.video-arrows-30-forward:before {
  content: "\e00c";
}

.video-fast-forward:before {
  content: "\e00d";
}

.video-skip:before {
  content: "\e00e";
}

.video-previous:before {
  content: "\e00f";
}

.video-volume-medium:before {
  content: "\f028";
}

.video-volume-low:before {
  content: "\f027";
}

.video-pause:before {
  content: "\f04c";
}

.video-play:before {
  content: "\f04b";
}

.video-volume-muted:before {
  content: "\f026";
}

.video-volume-high:before {
  content: "\f028";
}

.video-airplay:before {
  content: "\e016";
}

.videoContainer video.video-position-left {
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  float: left;
}


.progress-bar-tile {
  height: 4px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.videoContainer video.video-position-right {
  width: 60%;
  float: right;
}

.progress-buffered {
  position: absolute;
  right: 0px;
  top: 0px;
  background: transparent;
  z-index: 9;
}

.video-position-left-interactive {
  padding-left: 60% !important;
  padding-right: 00% !important;
  backdrop-filter: blur(0px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%) !important;
}

.course-video-addnew {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.video-position-right-interactive {
  padding-right: 60% !important;
  padding-left: 00% !important;
  backdrop-filter: blur(0px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%) !important;
}

.netflix_video_container .videoContainer {
  height: 100vh;
}


.videoContainer {
  position: relative;
  width: 100%;
  background-color: black;
  max-height: 100vh;
}

.videoContainer video {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 0.5s;
  background: var(--slice-theme-block-bg-color);
}

/* ---- Controls ---- */
.control {
  width: 100%;
  height: 30px;
  background-color: #262626;
  position: absolute;
  left: 0px;
  bottom: 0px;
  display: flex;
  z-index: 7;
  /* ---- Progress ---- */
}

.control label {
  display: block;
  padding: 0px 10px;
  color: white;
  line-height: 30px;
}

.control a {
  display: block;
  width: 40px;
  height: 30px;
  color: #bebebe !important;
  text-align: center;
  text-decoration: none;
  line-height: 30px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-family: "Font Awesome 5 Free" !important;
}

.control a:hover {
  color: #33b5d5;
  text-decoration: none;
  background-color: #3f3f3f;
}

.control .play {
  margin-right: 5px;
}

.control .progress {
  width: 100%;
  height: 10px;
  background: #1b1b1b;
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1);
  float: left;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 0px;
  top: -10px;
  font-variant: normal;
  opacity: 0.7;
  overflow-x: hidden;
  border-radius: 0px;
}

.control .progress-bar {
  background: #33b5d5;
  /* box-shadow: inset -30px 0px 69px -20px #33b5d5; */
  height: 100%;
  position: relative;
  z-index: 999;
  width: 0;
}

.control .progress-bar:before {
  width: 5px;
  height: 10px;
  top: 0px;
  right: 0px;
  content: " ";
  background-color: #fff;
  position: absolute;
}

.control .time {
  text-align: left;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  line-height: 30px;
  width: 100%;
}

/* ----- Fullscreen ----- */
.videoContainer:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

.videoContainer:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

.videoContainer:fullscreen {
  width: 100%;
  height: 100%;
}

.videoContainer:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

.videoContainer:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

video:-webkit-full-screen::media-controls-panel,
video:-webkit-full-screen::media-controls,
video:-webkit-full-screen::media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:-ms-fullscreen::media-controls-panel,
video:-ms-fullscreen::media-controls,
video:-ms-fullscreen::media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:fullscreen::media-controls-panel,
video:fullscreen::media-controls,
video:fullscreen::media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:-ms-fullscreen::-ms-media-controls-panel,
video:-ms-fullscreen::-ms-media-controls,
video:-ms-fullscreen::-ms-media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:-moz-full-screen::-moz-media-controls-panel,
video:-moz-full-screen::-moz-media-controls,
video:-moz-full-screen::-moz-media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:-o-full-screen::-o-media-controls-panel,
video:-o-full-screen::-o-media-controls,
video:-o-full-screen::-o-media-text-track-container {
  display: none !important;
  opacity: 0;
}

video:-webkit-full-screen::-webkit-media-controls-panel,
video:-webkit-full-screen::-webkit-media-controls,
video:-webkit-full-screen::-webkit-media-text-track-container {
  display: none !important;
  opacity: 0;
}

.volume {
  width: 30px;
}

.volume:hover {
  background-color: #3f3f3f;
}

.volume a {
  width: 30px;
}

.volume:hover .volume-piller {
  display: block;
}

.volume-piller {
  width: 30px;
  height: 120px;
  bottom: 30px;
  display: none;
  overflow: hidden;
  position: absolute;
  z-index: 10100;
  background-color: #3f3f3f;
}

.volume-slider {
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 6px;
  background-color: #1d1d1d;
  border-radius: 10px;
  top: 15px;
}

.ui-slider-range-min {
  height: 300px;
  width: 6px;
  position: absolute;
  background: #2ea7cc;
  border: none;
  border-radius: 10px;
  outline: none;
  bottom: 0;
}

.ui-slider-handle {
  left: -3px;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  background: #fff;
  position: absolute;
  /* margin-left: -9px; */
  margin-bottom: -6px;
  cursor: pointer;
  outline: none;
  z-index: 99;
}

/* ----- Ignore this ---- */
* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  -webkit-font-smoothing: antialiased;
}



.videoContainer {
  margin: 0 auto;
  box-shadow: 0 2px 12px gray;
  overflow: hidden;
}

/* h1 {
  text-align: inherit;
  color: #4585d4;
  font-weight: 100;
  margin: 50px;
  position: relative;
} */

h1 small {
  color: gray;
  font-size: 14px;
  position: absolute;
  bottom: 0;
}

center {
  margin-top: 20px;
}

/* p {
  font-size: 0.9rem;
} */

table {
  width: 720px;
  border-collapse: collapse;
}

table thead {
  background-color: #262626;
  font-weight: bold;
  color: white;
  white-space: pre;
}

.users-table table thead {
  position: sticky;
  top: 0px;
  z-index: 9;
}

table tbody td:first-of-type {
  font-weight: bold;
}

table tbody td[data-false] {
  color: #f00;
}

table td,
table th {
  padding: 10px;
}

/**/

.ul_list_of_video_interaction {
  margin: 20px 80px;
  overflow: hidden;
  border: 1px solid #dddddd9e !important;
}

.ul_list_of_video_interaction li {
  border: 1px solid #dddddd9e !important;
  background-color: #fefefe !important;
}

.ul_list_of_video_interaction li .text_of_video_interaction p,
.ul_list_of_video_interaction li .text_of_video_interaction {
  font-size: 15px !important;
  display: inline-block;
  font-weight: 500 !important;
  margin: 0;
  line-height: 1.5;
  font-family: inherit !important;
}

.control .progress-stop {
  background: transparent;
  height: 100%;
  position: relative;
  z-index: 999;
  /* width: 10.3%; */
  position: absolute;
  top: 0px;
}

.control .progress-stop:before {
  width: 5px;
  height: 10px;
  top: 0px;
  right: 0px;
  content: " ";
  background-color: #cecece;
  position: absolute;
}

section .control .slice-interactive-video-progress-done-success:before {
  background-color: rgb(0, 173, 0);
}

section .control .slice-interactive-video-progress-done-fail:before {
  background-color: rgb(173, 0, 0);
}

.slice-interactive-video-wraper.interactive-position-left {
  width: 100%;
  padding-right: 40%;
  left: 0;
  backdrop-filter: blur(0px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

.slice-interactive-video-wraper.interactive-position-right {
  width: 100%;
  padding-left: 40%;
  right: 0;
  backdrop-filter: blur(0px);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

.slice-interactive-video-wraper.interactive-position-top {
  height: 100%;
  padding-bottom: 40%;
  top: 0;
  backdrop-filter: blur(0px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

.slice-interactive-video-wraper.interactive-position-top-hotspot {
  height: 100%;
  padding-bottom: 40%;
  top: 0;
  backdrop-filter: blur(0px);
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.8));
}

.slice-interactive-video-wraper.interactive-position-top .video-interactive-title {
  margin-top: 2% !important;
}

.slice-interactive-video-wraper.interactive-position-bottom {
  height: 100%;
  padding-top: 40%;
  bottom: 0;
  top: auto;
  backdrop-filter: blur(0px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

.slice-interactive-video-wraper {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.57);
  overflow: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 7;
  backdrop-filter: blur(15px);
}

.slice-interactive-video-wraper.slice-interactive-video-wraper-show {
  display: block;
}

.card9 figure img {
  object-fit: cover;
}

.addNew {
  display: none;
  cursor: pointer;
  width: 100px;
  height: 100px;
  outline: none;
  background: rgba(0, 0, 0, 0.57);
  /* position: absolute; */
  top: 80%;
  line-height: 1.3;
  color: white;
  border: 0px solid rgb(255 255 255 / 55%);
  left: 50%;
  /* transform: translate(-50%, -50%); */
  /* border-radius: 100%; */
  border-radius: 20px;
  z-index: 5;
  backdrop-filter: blur(15px);
}

.addNew i {
  display: block;
  font-size: 22px;
  margin-bottom: 5px;
}

.slicePlayeFromTo-input {
  background: transparent;
  border: 0px;
  width: auto;
}

.slicePlayeFromTo-style {
  cursor: pointer;
  outline: none;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: 1px solid rgb(255 255 255 / 55%);
  backdrop-filter: blur(15px);
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 5px;
}

.slicePlayeFromTo-style:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sliceContiuePlayer-style {
  cursor: pointer;
  outline: none;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: 1px solid rgb(255 255 255 / 55%);
  backdrop-filter: blur(15px);
  padding: 15px 40px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 50px;
}

.dashed-button-edit {
  border: 1px dashed rgb(255 255 255 / 55%);
}

.sliceContiuePlayer-style:hover {
  background: rgba(255, 255, 255, 0.1);
}

body .sliceContiuePlayer-edit-style {
  cursor: pointer;
  display: inline-block !important;
  outline: none;
  border-radius: 100%;
  margin-left: -60px;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: 1px solid rgb(255 255 255 / 55%);
  backdrop-filter: blur(15px);
  padding: 15px 15px;
  margin-right: 10px;

  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}


body .sliceContiuePlayer-edit-style.hotspot-continue {
  margin: 0 5px;
  margin-top: -50px;
}

.sliceContiuePlayer-edit-style:hover {
  background: rgba(255, 255, 255, 0.1);
}

.addNew.addNew-show {
  display: block;
}

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/

/* ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
    ----------------------------------------------------------------
*/

/* body .cdk-overlay-pane{
    position: fixed !important;
    direction: rtl;
    transform: none !important;
    right: 0px;
} */

.charr-login {
  position: relative;
  z-index: 1;
  opacity: 1;
  width: 35%;
  /* left: 100px; */
  /* top: 170px; */
  float: left;
  margin-left: -15%;
}

.studio-bg-login {
  position: absolute;
  z-index: 0;
  /* opacity: 0.7; */
  width: 180%;
  margin-right: -30%;
  bottom: 10%;
}

/* html,
body {
  z-index: -200;
  position: absolute;
  width: 100%;
} */

div#loader {
  margin: 0px auto;
}

.ant-table-filter-dropdown .ant-dropdown-menu-item>label+span {
  padding-right: 0;
  float: left;
  direction: rtl;
}

.ant-modal-header {
  text-align: center;
}


tr.tablelom td {
  background: white;
}

.ant-breadcrumb .anticon {
  font-size: 15px !important;
}

.descriptionSearch {
  width: 62% !important;
  overflow: hidden;
  vertical-align: bottom;
}

.tipContainer {
  position: absolute;
  top: 40px;
  left: 0px;
  overflow: hidden;
  width: 470px;
  z-index: -1;
}

.ant-btn-primary {
  background-color: #364b9f !important;
  border-color: #515ca9 !important;
}


img.iconSCROLL.blockspos {
  right: -10px;
  position: absolute;
}

.persona {
  position: absolute;
  left: 100px;
  width: 12%;
  padding: 5px;
  font-size: 14px;
}

.titleSearch {
  font-size: 16px;
  border: 0px !important;
}

input#searchid {
  border: 0px !important;
}

.iconSCROLL {
  width: 30px;
  margin: 0px 10px;
}

ul.searchUl {
  width: 100%;
  padding: 0px 0px;
  margin: 70px auto;
  position: fixed;
  width: 100%;
  box-shadow: 0px 8px 50px 0px #e6e6e6;
  /* border: 1px solid; */
  border-radius: 5px;
  background-color: #ffffff;
  z-index: 9999999;
  max-height: 100%;
  overflow-y: scroll;
}

div#cdk-overlay-7 {
  left: 80%;
}

.buttonbla {
  width: 40px;
  margin: 0px 0px 0px 96%;
  height: 40px;
  text-align: center;
  background-color: #f7f7f7;
  border-radius: 100%;
}

.buttonbla:hover {
  background-color: #e0e0e0;
}

.themeControl-modal .ant-collapse-borderless,
.themeControl-modal .ant-select-selection--single,
.themeControl-modal .ant-input-number-input,
.themeControl-modal .ant-input-number {
  background: transparent !important
}

.themeControl-modal .ant-select-selection-selected-value,
.themeControl-modal .ant-input-number-input,
.themeControl-modal .ant-input-number {
  color: white;
}




.loder2 {
  margin: 0px auto !important;
  text-align: center !important;
  margin: 10px !important;
  width: 100%;
  height: 20px;
}

li.searchLi {
  height: 50px;
  margin-top: 0px !important;
  padding: 10px;
  width: 100% !important;
}

/* .ant-select-selection-selected-value {
    float: right !important;
} */

.chatUL {
  padding: 0px;
  width: 85%;
  margin: 0 auto;
}

.btn-chat-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  top: 0;
  right: 20px;
  transform: translate(0, -50%);
}

.btn-chat {
  box-shadow: 0px 0px 2px 1px black;
  margin: 0 5px;
}

body .contentLoader {
  display: block !important;
  background: #d4d4d4;
  position: fixed;
  z-index: 9999999;
  width: 100vw;
  height: 100vh;
  text-align: center;
  padding-top: 10%;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(19px, 0);
  }
}

body .h1,
.h2,
.h3,
.h4,
.h5,
.h6,
body h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  outline: 0px !important;
  line-height: 1.5;
}

body .template-container-pedding-flip {
  margin: 0px;
  padding: 40px 0;
}

.overflowhidden {
  overflow: hidden;
  position: relative;
}

.outsideDownload {
  font-size: 200px;
  position: absolute;
  right: 80px;
  z-index: 1;
  bottom: -20px;
  opacity: 0.6;
}

.overflowhidden a:hover {
  color: #f1f3f4 !important;
}

body .blocksCarusel .carousel .carousel-control .glyphicon {
  background: transparent;
  border-radius: 0%;
  padding: 0px;
  font-size: 30px;
}

.viewDisplayNone {
  display: block;
}

.viewContainer.viewContainerActive .viewDisplayNone {
  display: none !important;
}

body .mobileView .col-lg-6-right-padding-fix {
  padding-right: 0px !important;
  padding-left: 0px !important;
  padding-bottom: 20px !important;
}

.mobileView .col-lg-6 {
  padding: 0px !important;
}

.mobileView .col-lg-6,
.mobileView .col-lg-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

body .mobileView .width-30per {
  width: 100%;
  margin-top: 10px;
}

.menuBarOnOver {
  border-bottom: 2px solid transparent;
  padding: var(--slice-theme-margin) 0px;
}

.menuBarOnOver:has(.paragraph_with_img_component),
.menuBarOnOver:has(.freestyle_component),
.menuBarOnOver:has(.chapter-header),
.menuBarOnOver:has(.hero_component),
.menuBarOnOver:has(.img_component) {
  padding: 0;
}

.viewContainer.viewContainerActive .menuBarOnOver:hover {
  border: 1px solid transparent !important;
}

.contentContainer {
  position: relative;
}

/* body p {
  margin-top: 0;
  margin-bottom: 1rem;
} */

body .viewContainerActive .CancelDisplayNone {
  display: none !important;
}

.updateImgList {
  /* margin-top: 70px; */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}

.delay-05s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

/* body article .uploadBtnFloat {
  margin-top: -80px !important;
  padding-bottom: 0px !important;
  margin-bottom: 30px;
} */


.uploadBtnFloat {
  /* text-align: center;
  margin-top: -80px;
  padding-bottom: 30px;
  opacity: 0;
  transition: 0.4s ease all; */

  width: 100%;
  bottom: 10%;
  left: 50%;
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  transform: translate(-50%, 0);
}



/* fix */

.transition {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.transition-half {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.transition-fullHeader {
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -ms-transition: all 4s ease;
  -o-transition: all 4s ease;
  transition: all 4s ease;
}

.animation-duration-2 {
  animation-duration: 2s;
}

body .color-white {
  color: white;
}

.display-none {
  display: none;
}

.pM-0 {
  padding: 0px !important;
  margin: 0px !important;
}

.float-none {
  float: none;
}

.animated.slow-webc {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

button:focus {
  outline: 0px;
}

.row {
  margin: 0px;
}

.scroll-lock {
  /* overflow: hidden; */
}

.text-center {
  text-align: center;
}

.text-center p {
  text-align: center;
}

.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.direction_rtl .flip-rtl {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.cta span:focus {
  outline: 0px;
}

.border-0 {
  border: 0px !important;
}

.template-container .carousel-indicators .active {
  height: 4px !important;
}

body .carousel-indicators .active {
  border: 0px;
  width: 50px !important;
  margin: 0px 10px !important;
  border-radius: 0px;
}

body .scaleBtn:hover {
  color: white !important;
  text-decoration: none !important;
}

body .carousel-indicators li {
  border: 0px;
  background: #aaacab;
  width: 50px;
  height: 4px;
  margin: 0px 10px;
  border-radius: 0px;
}

.course_language.direction_ltr .bottomLeftLogo {
  right: 20px;
}

.course_language.direction_rtl .bottomLeftLogo {
  left: 20px;
}


/* .carousel-indicators {
  height: 100%;
  bottom: 0px !important;
} */

.carousel-indicators:not(.carousel_component .carousel-indicators) {
  height: 100%;
  bottom: 0px !important;
}

.caruselIndicator {
  height: 100% !important;
  border-top: 23px solid #f4f4f4 !important;
  border-bottom: 23px solid #f4f4f4 !important;
  box-sizing: border-box !important;
}

.full-screenImg {
  width: 100%;
  background: red;
  border: 20px solid red;
}

body .super-display-none {
  display: none !important;
}

.col-lg-6 {
  padding: 0px !important;
  /* padding-left: 0px !important; */
}

.col-lg-6 .Img1 {
  /* padding: 0px 10px !important; */
}

.col-lg-6-right-padding-fix {
  /* padding-right: 0px !important;
    padding-left: 14px !important; */
}

body .advence-precent-linear {
  position: fixed !important;
  top: 0px;
  right: 0px !important;
  z-index: 99;
  height: 4px !important;
  color: transparent !important;
}

.opacityHalf {
  opacity: 0.5;
}

.rowForExtra button {
  margin-right: 20px;
}

/* --------------- BB ------------ */

html,
body {
  /* direction: rtl; */
  /* text-align: right; */
  font-size: 15px;
  /* color: rgba(0, 0, 0, 0.85) !important; */
  /* color: var(--slice-theme-text-color) !important; */
  /* overflow-x: hidden; */
  word-break: break-word !important;
  counter-reset: my-sec-counter;
}

body app-slices-blocks,
body app-opening-screen {
  color: var(--slice-theme-text-color) !important;
}

/* body .contentContainer .forbtn .ant-btn {
  color: var(--slice-theme-text-color) !important;
} */

/* body .contentContainer .forbtn .ant-btn {
  background: var(--slice-theme-bg-color-third) !important;
  color: var(--slice-theme-text-color) !important;
} */

.ant-click-animating-node,
.ant-click-animating,
.ant-btn-click-animating {
  box-shadow: none !important;
  border: none !important;
  animation: none !important;
}

.fullHeader.openHeaderAnimation {
  background-size: 100% auto;
}

p,
.P-Poa,
.P-Poa span,
.P-Poa p {
  width: 100%;

}

html body p {
  font-size: 22px;
  word-break: break-word !important;
  margin: 0;
}

.border-radius-BB {
  border-radius: 5px;
}

.border-radius-BB::after {
  border-radius: 5px;
}

.border-radius-BB-right {
  border-radius: 0px 5px 5px 0px;
}


/* primary */
/* 
.bg-color-primary {
  background: rgba(240, 47, 75, 1) !important;
  background-color: rgba(240, 47, 75, 1) !important;
} */

/* .border-color-primary {
  border-color: rgba(240, 47, 75, 1) !important;
} */

/* body .carousel-indicators .active {
  background: rgba(240, 47, 75, 1) !important;
  background-color: rgba(240, 47, 75, 1) !important;
} */

.font-25 {
  font-size: 25px;
}

/* primary */

/* .hoverBgPrimary:hover {
  background: rgba(240, 47, 75, 1);
  color: white;
} */

.hoverBgPrimary:hover h3,
.hoverBgPrimary:hover p {
  color: white !important;
}

/* secondary */

.bg-color-secondary {
  background: rgba(57, 75, 97, 1) !important;
  color: white !important;
}

/* secondary */

.hoverBgSecondary:hover {
  background: rgba(57, 75, 97, 1);
  color: white;
}

.lock-chapter:hover {
  background: #f4f4f4;
  color: #434a54;
}

.bg-light-color {
  background: #f4f4f4;
}

.border-light-color {
  border: 1px solid #f4f4f4;
}

.bg-light-color-top {
  background: var(--slice-theme-block-bg-color);
}

.bigFont {
  font-size: 4.2rem;
  /* font-weight: bold; */
}

.bold,
.bold p {
  font-weight: bold !important;
}

.oneHalfRem {
  font-size: 1.5rem;
}

.hoverBgSecondary:active {
  transform: scale(0.98);
}

.hoverBgPrimary:active {
  transform: scale(0.98);
}

.box-shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.chapter-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

html body .chapter-title p,
html body .chapter-title {
  /* font-size: 3.5rem !important; */
  font-size: var(--slice-theme-h2-fontsize);
}

html body .img-title p {
  font-size: 2rem !important;
  text-align: center;
}

/* --------------- BB ------------ */

/* --------------- end ------------ */

.logoSliceWhite {
  z-index: 999999999;
  position: absolute;
  width: 90px;
  left: 30px;
  bottom: 25px;
  cursor: pointer;
}

#end {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#end .messageEnd {
  width: 50vw;
  margin: 0 auto;
  margin-top: 25vh;
  padding: 30px;
  text-align: center;
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0px;
  height: 200px;
  overflow: hidden;
  z-index: 999999;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #ffd300;
  top: 0;
  opacity: 0;
}

.confetti-piece:nth-child(1) {
  left: 7%;
  -webkit-transform: rotate(68deg);
  transform: rotate(68deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 326ms;
  animation-delay: 326ms;
  -webkit-animation-duration: 969ms;
  animation-duration: 969ms;
}

.confetti-piece:nth-child(2) {
  left: 14%;
  -webkit-transform: rotate(-54deg);
  transform: rotate(-54deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 79ms;
  animation-delay: 79ms;
  -webkit-animation-duration: 851ms;
  animation-duration: 851ms;
}

.confetti-piece:nth-child(3) {
  left: 21%;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 343ms;
  animation-delay: 343ms;
  -webkit-animation-duration: 804ms;
  animation-duration: 804ms;
}

.confetti-piece:nth-child(4) {
  left: 28%;
  -webkit-transform: rotate(-29deg);
  transform: rotate(-29deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 473ms;
  animation-delay: 473ms;
  -webkit-animation-duration: 1165ms;
  animation-duration: 1165ms;
}

.confetti-piece:nth-child(5) {
  left: 35%;
  -webkit-transform: rotate(-54deg);
  transform: rotate(-54deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 381ms;
  animation-delay: 381ms;
  -webkit-animation-duration: 900ms;
  animation-duration: 900ms;
}

.confetti-piece:nth-child(6) {
  left: 42%;
  -webkit-transform: rotate(-57deg);
  transform: rotate(-57deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 390ms;
  animation-delay: 390ms;
  -webkit-animation-duration: 1088ms;
  animation-duration: 1088ms;
}

.confetti-piece:nth-child(7) {
  left: 49%;
  -webkit-transform: rotate(-23deg);
  transform: rotate(-23deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 14ms;
  animation-delay: 14ms;
  -webkit-animation-duration: 917ms;
  animation-duration: 917ms;
}

.confetti-piece:nth-child(8) {
  left: 56%;
  -webkit-transform: rotate(-37deg);
  transform: rotate(-37deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 78ms;
  animation-delay: 78ms;
  -webkit-animation-duration: 1130ms;
  animation-duration: 1130ms;
}

.confetti-piece:nth-child(9) {
  left: 63%;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 196ms;
  animation-delay: 196ms;
  -webkit-animation-duration: 1077ms;
  animation-duration: 1077ms;
}

.confetti-piece:nth-child(10) {
  left: 70%;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 264ms;
  animation-delay: 264ms;
  -webkit-animation-duration: 1098ms;
  animation-duration: 1098ms;
}

.confetti-piece:nth-child(11) {
  left: 77%;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 217ms;
  animation-delay: 217ms;
  -webkit-animation-duration: 707ms;
  animation-duration: 707ms;
}

.confetti-piece:nth-child(12) {
  left: 84%;
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 471ms;
  animation-delay: 471ms;
  -webkit-animation-duration: 820ms;
  animation-duration: 820ms;
}

.confetti-piece:nth-child(13) {
  left: 91%;
  -webkit-transform: rotate(-43deg);
  transform: rotate(-43deg);
  -webkit-animation: makeItRain 1000ms infinite ease-out;
  animation: makeItRain 1000ms infinite ease-out;
  -webkit-animation-delay: 452ms;
  animation-delay: 452ms;
  -webkit-animation-duration: 964ms;
  animation-duration: 964ms;
}

.confetti-piece:nth-child(odd) {
  background: #17d3ff;
}

.confetti-piece:nth-child(even) {
  z-index: 1;
}

.confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
}

.confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  -webkit-animation-duration: 2500ms;
  animation-duration: 2500ms;
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}

.confetti-piece:nth-child(4n-7) {
  background: #ff4e91;
}

@-webkit-keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
  }
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
  }
}

body .hideFade.showFade {
  visibility: visible;
  z-index: 9999999999;
  pointer-events: none;
  display: block;
  opacity: 1;
  transition: opacity 0.2s linear;
}

body .hideFade {
  visibility: hidden;
  display: block !important;
  opacity: 0;
  transition: visibility 0.2s 0.2s, opacity 0.2s linear;
}

/* --------------- end ------------ */

/* --------------- first-page ------------ */

.fullHeader {
  /* width: 100vw; */
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  position: relative;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.darkOpacity {
  background: rgba(0, 0, 0, 1);
  opacity: 0.6;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 1;
}

.header-background-image {
  background: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  /* background-size: 100%; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#scrollInicator {
  cursor: pointer;
}

.col-centered {
  float: none;
  margin: 0 auto;
  /* padding: 0px; */
}

.fr-input-line label {
  background: transparent !important;
}

header .bigFont {
  margin-top: 13vh;
  color: white;
}

.frontHeader {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
}

.headerDiveder {
  width: 40%;
  height: 2px;
  background: white;
}

.HeaderBtn {
  margin: 25px 0px;
  border: 0px;
  font-size: 22px;
  padding: 6px 15px;
  font-weight: bold;
  cursor: pointer;
}

.HeaderBtn:hover {
  transform: scale(1.1);
}

.HeaderBtn:active {
  transform: scale(0.98);
}

.scaleBtn:hover {
  transform: scale(1.1);
}

.scaleBtn:active {
  transform: scale(0.98);
}

.header-icon-bottom {
  font-size: 35px;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0px;
  text-align: center;
}

.first-page-ul {
  list-style: none;
}

.first-page-ul li {
  margin: 20px 0px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
}

.first-page-chapters-p {
  margin: 1rem 0px;
  font-size: 17px !important;
  opacity: 0.6;
}

.logoClient {
  display: block;
  width: 200px;
  height: auto;
  margin: 20px auto;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}

/* --------------- first-page ------------ */

/* --------------- fullPageOverlay ------------ */

#fullPageOverlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 990;
  background: white;
}

/* --------------- fullPageOverlay ------------ */

/* --------------- scrollIndicator ------------ */

#scrollIndicator {
  position: fixed;
  top: 0px;
  height: 4px;
  z-index: 99;
}

/* --------------- menu ------------ */

.progMenuLi {
  width: 5px;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0px;
  right: 0px;
}

.glossy {
  display: block;
  position: absolute;
  top: -10px;
  right: -60px;
  z-index: -1;
  width: 70px;
  height: 40px;
  background: rgba(0, 0, 0, 0.15);
  transform: rotate(70deg);
}

#menu-hamburger:hover .glossy {
  display: block;
  position: absolute;
  top: -10px;
  right: -30px;

  z-index: -1;
  width: 270px;
  height: 40px;
  background: rgba(0, 0, 0, 0.15);
  transform: rotate(70deg);
}

#menu-hamburger {
  position: fixed;
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  border: 1px solid #f4f4f4;
  top: 10px;
  /* right: 50px; */
  margin: 0px 15px;
  /* z-index: 999; */
  z-index: 999999;
  padding: 20px 19px;
  cursor: pointer;
  overflow: hidden;
}

#menu-hamburger:hover {
  transform: scale(1.2);
}

#menu-hamburger:hover .hamburger-line.hamburger-line-middle {
  width: 20px;
}

/* menu open */

.openMenu .hamburger-line.hamburger-line-middle {
  display: none;
}

.openMenu .hamburger-line.first-hamburger-line {
  transform: rotate(50deg);
}

.openMenu .hamburger-line.third-hamburger-line {
  transform: rotate(-50deg);
}

.openMenu#menu-hamburger {
  padding: 27px 19px;
}

.openMenu .hamburger-line {
  margin-bottom: -2px;
}

.hamburger-line {
  width: 20px;
  height: 2px;
  margin-bottom: 5px;
  border-radius: 20px;
  background: black;
}

.hamburger-line.hamburger-line-middle {
  width: 15px;
}

.menu-transition {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#menu.open {
  box-shadow: 0px 0px 20px 0px #000;
  visibility: visible;
}

#menu-backgroundBlack.open {
  visibility: visible;
  opacity: 1;
  pointer-events: initial;
}

#menu {
  position: fixed;
  top: 0px;
  width: 400px;
  height: 100vh;
  background: white;
  z-index: 99999;
  overflow-y: auto;
  visibility: hidden;
  /* background: var(--slice-theme-bg-color); */
}

/* body #menu li {
  color: var(--slice-theme-text-color);
} */

#menu-backgroundBlack {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  cursor: pointer;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.menu-header-bg {
  position: relative;
  width: 100%;
  height: 330px;
  background-size: cover;
}

.menu-h1 {
  color: white;
  position: absolute;
  bottom: 20px;
  z-index: 9;
  margin: 20px;
}

#advence-precent {
  position: absolute;
  font-size: 12px;
  color: white;
  bottom: 0px;
  text-align: center;
}

.menu-ul {
  list-style: none;
}

.menu-ul li,
.menu-item-drag {
  margin: 20px 0px;
  padding: 8px 20px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.3rem;
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}


.menu-ul li span,
.menu-item-drag span {
  position: relative;
}


.reorder-content-li {
  padding: 10px;
  list-style: none;
  cursor: grab;
}

.reorder-content-li img {
  width: 100px;
  border-radius: 10px;
  box-shadow: 2px 2px 32px rgba(8, 8, 8, 0.169);

}




/* --------------- menu ------------ */

body .carousel .vidChoose {
  text-align: center;
}

body .carousel .col-sm-7 .video100 {
  width: 100% !important;
  position: absolute !important;
  height: auto !important;
  top: 50% !important;
  left: 0px !important;
  right: 0px !important;
  transform: translateY(-50%);
}

body .carousel .video100 {
  width: auto !important;
  position: relative !important;
  height: calc(100vh - 50px);
  transform: none;
  top: 0px !important;
  left: auto !important;
}

body .notSkewVID {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - 50px);
}

.notSkewVID video {
  position: absolute !important;
  width: 100% !important;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
}

/* --------------- chapter ------------ */

.chapter-header {
  width: 100%;
  min-height: 240px;
  padding-top: 90px;
  padding-bottom: 47px;
}

.chapter-divider {
  width: 180px;
  height: 5px;
}

.prevChapter {
  cursor: pointer;
  width: 100%;
  height: 70px;
  position: relative;
  border: 0px;
}

.prevChapter i {
  font-size: 22px;
}

.endChapter {
  cursor: pointer;
  width: 100%;
  height: 200px;
  padding-top: 40px;
  position: relative;
  border: 0px;
}

.endChapter strong,
.endChapter span {
  font-size: 1.75rem;
}


.endChapter i {
  margin-top: 10px;
  font-size: 22px;
}

.ChapterPrevChangeBg {
  width: 100%;
  height: 0px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0px;
}

.prevChapter:hover .ChapterPrevChangeBg {
  height: 70px;
}

.ChapterChangeBg {
  width: 100%;
  height: 0px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0px;
}

.endChapter:hover .ChapterChangeBg {
  height: 200px;
}

.lock-chapter {
  display: block;
  cursor: no-drop;
}

.locked-guard {
  display: none;
}

.lock-chapter .locked-guard {
  display: block;
}

.lock-chapter .locked-Unlock {
  display: none;
}

/* --------------- chapter ------------ */

html body .tempalte-h3 p {
  font-size: 3.5rem !important;
}

/* html body .tempalte-h4 p {
  font-size: 2.5rem !important;
} */


.margin-info {
  margin: 0 10px;
}

.fullWidthImg {
  width: 100vw;
  height: 500px;
  background-size: cover;
  background-attachment: fixed;
}

.Img1 {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.position-absolute-middle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 9;
}

.position-absolute-middle color-picker {
  position: relative;
  bottom: 240px;
}

.position-absolute-middle color-picker .color-picker {
  left: 14px !important;
}

.position-absolute-middle color-picker .color-picker .arrow.arrow-right {
  top: 230px;
}

body color-picker .color-picker {
  border-radius: 10px;
  border: 3px solid black;
}

.color-picker .button-area button {
  padding: 6px 10px;
  margin-top: 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.freestyle_side_menu color-picker .color-picker {
  left: 100% !important;
}

.direction_ltr .freestyle_side_menu_cont color-picker .color-picker {
  left: -100% !important;
  width: 100% !important;
  top: 0px !important;
}

.direction_rtl .freestyle_side_menu_cont color-picker .color-picker {
  left: 100% !important;
  width: 100% !important;
  top: 0px !important;
}

.color-picker .saturation-lightness {
  border-radius: 10px 10px 0 0;
}

.Img-background {
  width: 100%;
  height: 500px !important;
  object-fit: cover;
  background-size: cover;
  /* background-size: 100% auto; */
  background-repeat: no-repeat;
  background-position: center;
}

.Img-background-300 {
  width: 100%;
  min-height: 300px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.Img-background-300 .darkOpacity {
  z-index: 0;
}

.webc-parralax {
  background-position: fixed !important;
  background-attachment: fixed !important;
}

.color_black {
  color: black !important;
}

@media only screen and (max-width: 768px) {
  .col-lg-9 {
    width: 85%;
  }

  body .textDescription {
    max-height: initial;
    overflow: initial;
  }

  .cards-container {
    gap: 0px !important;
    margin: 0px !important;
  }

  .chapter-header {
    min-height: 0px !important;
  }

  body article .carusel_container,
  body article .carousel_slide {
    height: 250px;
  }

  body .frontHeader {
    padding-bottom: 130px;
    overflow: auto;
  }
}

/* For mobile phones: */

@media only screen and (max-width: 734px) {
  body .notSkewVID {
    height: auto !important;
  }

  .moreChapters {
    margin-bottom: 80px;
  }

  body .width-30per {
    width: 100%;
    margin-top: 10px;
  }

  .col-lg-6 {
    padding: 0px !important;
  }

  body .col-lg-6.col-lg-6-right-padding-fix {
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 20px !important;
  }

  .fullHeader.openHeaderAnimation {
    background-size: cover !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  /* .menu-ul li {
    width: 90%;
margin: 20px auto;
  } */

  #menu {
    width: 100% !important;
  }

  .chapter-title {
    font-size: 3rem;
  }

  /* .tempalte-h4 {
    font-size: 2rem;
  } */

  .bigFont,
  .bigFont span {
    font-size: 3rem !important;
    /* font-weight: bold; */
  }


  .col-lg-9 {
    width: 85%;
  }

  header .bigFont {
    margin-top: 10vh;
  }

  #menu-hamburger {
    top: 10px;
    width: 50px;
    height: 50px;
    padding: 15px 15px;
  }

  .openMenu#menu-hamburger {
    padding: 23px 14px;
  }

  body.direction_ltr div.slice-sidemenu-spaceing,
  body.direction_rtl div.slice-sidemenu-spaceing,
  body.direction_ltr .slice-sidemenu-spaceing-menu .ai-assistant,
  body.direction_ltr .slice-sidemenu-spaceing .uploadContainer,
  body.rtl .slice-sidemenu-spaceing-menu .ai-assistant,
  body.rtl .slice-sidemenu-spaceing .uploadContainer {
    padding: 20px !important;
  }

}

/* General button style (reset) */

.btn:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */

.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
  font-family: "icomoon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.moreChapters:hover {
  background: white;
  color: black;
}

.moreChapters {
  cursor: pointer;
  border: 1px solid white;
  background: transparent;
  color: white;
  padding: 5px 15px;
  font-size: 18px;
  margin-top: 5px;
  line-height: initial;
}

.glossyHover {
  cursor: pointer;
}

.glossyHover::after {
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
  right: 0;
  top: 0;
  margin: -5px 0 0 -5px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(-20deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotate(-20deg);
  -ms-transform-origin: 0 0;
  -ms-transform: rotate(-20deg);
  transform-origin: 0 0;
  transform: rotate(-20deg);
}

.glossyHover:hover::after {
  width: 40%;
}


.cta {
  /* margin-top: 20px; */
  display: flex;
  align-items: center;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: white;
  border: 0px;
  cursor: pointer;
  transition: 1s;
  min-height: 40px;
  min-width: 50px;
  gap: 10px;
}

.cta:hover i {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.cta:focus {
  outline: none;
}

.cta:hover {
  transition: 0.5s;
  animation: shadow-pulse 2s infinite !important;
  padding: 10px 15px;
  font-size: 27px;
}

/* .ctaIcon {
  margin-top: 8px;
  margin-right: 15px;
} */

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3);
  }

  100% {
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
  }
}

/* queations  */

.selectQ {
  border-radius: 5px;
  border: 1px solid !important;
  text-align: center;
  background-color: white;
  width: 90%;
  direction: rtl;
}

input.display-none.inputbtn.CancelDisplayNone.xsk {
  width: 90%;
  border-radius: 5px;
  border: 1px solid;
}

.xsk {
  margin: 5px auto;
  /* text-align: right!important; */
}

.overflowDemo {
  overflow: scroll;
}

img.iconcc {
  height: 40px;
  display: inline-block;
  opacity: 0.7;
  margin-left: 10px;
  vertical-align: unset;
}

.inlineblock {
  display: inline-block;
}

button.btn.cta.border-radius-BB.bg-color-primary.ansCheck {
  color: white !important;
}

.ansCheck {
  margin-top: 10px !important;
}

.newQ {
  display: block;
  width: 100%;
  margin: 65px auto 0px;
  /* background-color: white; */
  background: var(--slice-theme-block-bg-color);
  padding: 0px 0px 15px 0px;
  box-shadow: 1px 1px 6px 1px #cacaca57;
}

.popUp {
  position: absolute;
  z-index: 9999;
  box-shadow: 0px 0px 10px 2px #595959;
  border-radius: 10px;
}

.popUpText {
  padding: 12px;
  background-color: white;
  width: 200px;
  font-size: 16px;
  font-weight: bold;
}

.popUpVideo {
  width: 400px;
}

.popUp video {
  border-radius: 10px;
  margin-bottom: -2px;
}

.pexels-vid-play {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.uploadCenter_main {
  width: 100%;
  height: 100%;
  /* min-height: 480px; */
  margin-bottom: 150px;
}

.search_img_flex {
  width: 90%;
  height: 45%;
  margin: auto;
}

.search_img_container {
  position: relative;
  margin: 10px;
  width: 100%;
  height: 85%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #c3b2b2;
  transition: all 0.5s;
  overflow: hidden;
}


.search_img_container:hover {
  opacity: 1;
  background-size: 120% 120%;
}

.search_img_container img {
  border-radius: 20px;
}

.search_img_container h4 {
  position: absolute;
  bottom: 0;
  color: white;
  font-weight: 600;
  margin: 10px;
}

.search_img_container:hover h5 {
  color: rgba(255, 255, 255, 0.99);
  font-size: 36px;

}

.search_img_container h5 {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 600;
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: #060404a6;
  font-size: 32px;
  letter-spacing: 1px;
  transition: all 0.5s ease;
}

.flex-between:not(.flex-align) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rtlImp {
  direction: rtl !important;
}

.ltrImp {
  direction: ltr !important;
}

.spanOfEX {
  color: white !important;
  text-align: center;
  margin: 0px;
  font-size: 22px !important;
}

.greenClass {
  box-shadow: 1px 1px 3px 1px #ccccccb3;
  color: white;
}

.greenBorder {
  border: 1px solid #00c53a;
  opacity: 0.4;
  pointer-events: none;
  color: white;
}

.redClass {
  animation: animateGradientStops 1s ease-out forwards;
  box-shadow: 1px 1px 3px 1px #ccccccb3;
}

.course_language.direction_ltr .redClass {
  background: linear-gradient(-10deg,
      #ce3328 -30%,
      var(--slice-theme-block-bg-color) 80%) !important;
}

.course_language.direction_rtl .redClass {
  background: linear-gradient(10deg,
      #ce3328 -30%,
      var(--slice-theme-block-bg-color) 80%) !important;
}

.course_language.direction_rtl .greenClass,
.course_language.direction_rtl .greenBorder {
  background: linear-gradient(10deg,
      #00c53a -100%,
      var(--slice-theme-block-bg-color) 80%) !important;
}

.course_language.direction_ltr .greenClass,
.course_language.direction_ltr .greenBorder {
  background: linear-gradient(-10deg,
      #00c53a -100%,
      var(--slice-theme-block-bg-color) 80%) !important;
}






body.quiz .redClass,
body.quiz .greenClass {
  /* background: var(--slice-theme-block-bg-color-second) !important; */
  background: var(--slice-theme-bg-color) !important;
  box-shadow: none !important;
  color: var(--slice-theme-text-color);
}

body.quiz .redClass p,
body.quiz .greenClass p {
  color: var(--slice-theme-text-color) !important;
}

body.quiz .greenBorder {
  border: none !important;
  box-shadow: none !important;
}

body.quiz .greenBorder:not(.answerDada) {
  opacity: 0.4;
}

body.quiz .labelGray {
  /* background-color: #F4F4F4 !important; */
  background: var(--slice-theme-block-bg-color-second);
  color: var(--slice-theme-text-color);
}

body.quiz .feedback {
  display: none !important;
}

body.quit .videoData .answerDada.active {
  background: white !important;
}

.lock-quiz .locked-quiz {
  display: block;
}

.lock-quiz .unlock-quiz {
  display: none;
}

.lock-quiz {
  pointer-events: none;
}

.locked-quiz {
  display: none;
}

.CancelDisplayNone2 {
  display: block !important;
}

body .CancelDisplayNoneToFlex {
  display: flex !important;
}

body .CancelDisplayNoneToFlex.CancelDisplayNone {
  display: flex !important;
}

.qTitle {
  /* background-color: #f4f4f4; */
  padding: 15px 30px 0px;
  font-size: 20px;
}

/* .qTitle.empty_forala {
  min-height: 50px;
} */

.labelAns:hover .deletANS {
  opacity: 1 !important;
}

.deletANS:not(.delete-fix-btn) {
  left: 0px;
  position: absolute !important;
  display: inline-block;
  margin: -50px 0px;
  border: 0px !important;
  background: transparent !important;
}

.deletANS {
  border: 0px !important;
}

.spanselect {
  text-align: center;
  margin: 0px 15px;
}

.labelGray {
  /* background-color: #f4f4f4; */
  background: var(--slice-theme-block-bg-color-second);
  color: var(--slice-theme-text-color);
}

.checkbox-custom,
.radio-custom {
  opacity: 0;
  position: absolute;
}

.feedback {
  margin: 20px;
  padding: 20px;
  border-radius: 15px;
  background: var(--slice-theme-block-bg-color-second);
  /* background-color: #f6f6f6; */
}

.rating_container {
  width: 100%;
  max-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  -moz-border-radius: 4px;
  overflow: hidden;
  /* background: var(--slice-theme-block-bg-color); */
}

.iconright {
  width: 30%;
  display: inline-block;
}

.goodfeedback {
  min-height: auto;
}

button.display-none.CancelDisplayNone.deletQ.ant-btn.ant-btn-dashed.ant-btn-lg.ant-btn-icon-only {
  position: absolute;
}

.dirction-rtl {
  direction: rtl;
}

.TextFeed {
  display: inline-block;
  width: 70%;
  padding: 0px 10px;
  vertical-align: top;
  margin-bottom: 0px !important;
  word-break: break-word;
  font-size: 16px !important;
}

.AnswerTitleGood {
  margin: 0px auto;
  text-align: center;
  color: #00c53a;
  font-size: 18px !important;
  word-break: break-word;
  font-weight: 600;
}

.checkbox-custom-label,
.radio-custom-label {
  padding: 5px 40px !important;
}

img.iconcc {
  display: none;
}

p.AnswerTitleBed {
  margin: 0px auto;
  text-align: center;
  color: #ce3328;
  word-break: break-word;
  font-size: 18px !important;
  font-weight: 600;
}

img.iconVX {
  width: 35px;
  display: block;
  margin: 0px auto;
}

/* body .fr-toolbar.fr-rtl.fr-desktop.fr-inline.fr-above { */
body .fr-toolbar.fr-desktop.fr-inline.fr-above {
  z-index: 999999999 !important;


}

.forbtn {
  padding: 0 30px;
}

.tabbuttons {
  bottom: 20px;
  position: sticky;
  left: 0;
}

div.card9 p {
  margin: 0px;
}

html body .front9 p {
  word-break: normal !important;
  text-align: center;
}

span.fr-counter {
  display: none !important;
}

button.btn.redBtn {
  /* float: left; */
  background-color: rgba(240, 47, 75, 1);
  color: white;
  padding: 10px 30px;
  margin: 5px;
}

button.btn.redBtn:hover {
  /* float: left; */
  background-color: rgba(240, 47, 75, 1);
  color: white;
  padding: 15px 30px;
  margin: 5px;
}

.checkbox-custom,
.checkbox-custom-label,
.radio-custom,
.radio-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}

.checkbox-custom-label,
.radio-custom-label {
  position: relative;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  line-height: 1.5;
}

button.rightAnsrChek {
  background-color: #00c53a !important;
}

button.ansans:hover,
button.ansans2:hover {
  background-color: #00c53a;
}

button.ansans2 {
  position: absolute;
  color: white;
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  z-index: 1;
}

button.ansans {
  position: absolute;
  color: white;
  border-radius: 100%;
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.checkbox-custom+.checkbox-custom-label:before,
.radio-custom+.radio-custom-label:before {
  content: "";
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  padding: 2px;
  z-index: 9;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}

.acor {
  display: inline-block !important;
  width: 40%;
  margin: 0px 10px !important;
}

.checkbox-custom:checked+.checkbox-custom-label:before {
  background: rebeccapurple;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

button.display-none.margincentercollaps.CancelDisplayNone.ant-btn.ant-btn-dashed.ant-btn-lg {
  margin: 10px auto !important;
}

.radio-custom+.noshow:before {
  display: none !important;
}

.radio-custom+.radio-custom-label:before {
  border-radius: 50%;
}

.radio-custom:checked+.radio-custom-label:before {
  background: #ccc;
  box-shadow: inset 0px 0px 0px 4px #fff;
}

.checkbox-custom:focus+.checkbox-custom-label,
.radio-custom:focus+.radio-custom-label {}

.visibilityHidden {
  visibility: hidden;
}

.pointer {
  cursor: pointer;
}

.yesNoDiv.ng-star-inserted {
  overflow: hidden;
}

.carousel .height-100 {
  overflow: scroll;
}

.cnameInput2 {
  outline: none;
  overflow: auto;
  border: none;
  resize: none;
  width: 100%;
  font-size: 18px;
  background: none;
  /* float: right; */
  /* text-align: right; */
  margin-right: 0px;
  display: block;
  height: auto;
}

.z-index-999 {
  z-index: 999999;
}

.circleenter {
  padding: 0 !important;
  width: 13px !important;
  height: 63px !important;
  font-size: 9px !important;
  position: absolute !important;
  left: 0px !important;
  /* top: 10px; */
  margin-top: -17px !important;
  border-radius: 0% !important;
  height: 32px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease !important;
}

.circleenter:hover {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.3);
}

.openDrawNewButton2 {
  width: 96px;
  height: 66px;
  font-size: 36px;
  margin-top: -17px;
  position: absolute;
  background: #5c3889;
  color: white;
  font-family: arial;
  transition: all 0.2s ease;
  left: 0px;
}

.iconsEn span {
  font-size: 8px !important;
}

.iconsEn {
  display: inline-block !important;
  width: 45px;
  text-align: center;
  font-size: 10px;
}

.front99,
.back99 {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  width: 300px;
  height: 400px;
  position: absolute;
  border-radius: 30px;
  border: 0px !important;
}

.select-org .ant-select-selection {
  border: none;
  box-shadow: none;
}

/*  UPDATED! front pane, placed above back */
.flip-container3 {
  width: 300px;
  height: 400px;
  perspective: 600px;
}

.flip-container2 {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.front9 {
  z-index: 2;
  transform: rotateY(0deg);
  padding: 15px;
  color: #485d73;
  overflow-y: auto;
  overflow-x: hidden;
}

.loadingTheme {
  background: white;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
}

.themeControl-modal {
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3) !important;
  z-index: 1000 !important;
  background: #ffffff !important;
}

.center-logo {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.dark-mode .center-logo {
  filter: invert(1);
}

.filter-invert {
  filter: invert(1) !important;
}

/* back, initially hidden pane */

.back9 {
  transform: rotateY(180deg);
  background: #587086;
}

.cards-container {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  width: 95%;
  margin: 50px auto;

  /* justify-content: center; */
  flex-wrap: wrap;
  gap: 100px 5%;
  flex-direction: row;
}

.big-nav .anticon-close {
  cursor: pointer;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.big-nav .anticon-close:hover {
  box-shadow: 0px 0px 10px 2px darkgrey;
}

.iconsEn i {
  margin: 0px auto;
  font-weight: 500 !important;
  font-size: 14px !important;
  display: block;
  border: 0px !important;
}

/* button.center.ansans.display-none.CancelDisplayNone.yesNoButton {
  position: unset !important;
} */

.fr-popup {
  z-index: 9999999 !important;
}

img.sliceLog {
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 160px;
  z-index: 9999999;
}

img.slicesubLog {
  position: absolute;
  right: 60px;
  top: 40px;
  width: 400px;
  z-index: 9999999;
}

.ant-tabs {
  direction: ltr !important;
}

.elemntsSelction .ant-tabs-bar {
  margin: 0;
  background: #ffffff;

}

.ant-tabs-tab.ng-star-inserted {
  font-weight: 600;
}

.elemntsSelction .ant-tabs-nav .ant-tabs-tab.ng-star-inserted.ant-tabs-tab-active {
  color: #7f4eff !important;
  font-weight: 700 !important;
  border-bottom: #7f4eff !important;
}

.ant-tabs-bottom .ant-tabs-ink-bar-animated,
.ant-tabs-top .ant-tabs-ink-bar-animated {
  background: #7f4eff !important;
}

.elemntsSelction .ant-tabs-nav .ant-tabs-tab.ng-star-inserted.ant-tabs-tab-active::selection {
  background: #7f4eff !important;
}

.elemntsSelction .sectionTitle {
  font-weight: 600;

  font-size: 14px;
}

img.logoClient.homepage-logo {
  position: absolute;
  right: 100px;
  top: 90px;
  opacity: 0.6;
}

.showId {
  position: absolute;
  background: #fee8ae;
  color: black;
  z-index: 99999;
  direction: ltr;
  padding: 10px;
  border-radius: 10px 0px 0px 10px;
  opacity: 0.9;
  cursor: pointer;
  font-weight: 600;
}

.class1 tbody tr:nth-child(2n) {
  background: #f9f9f9;
}

.class2 thead tr th,
.class2 tbody tr td {
  border-style: dashed;
}

.fr-line-breaker,
.fr-insert-helper {
  display: none;
}

.loading-imgs {
  height: 100%;
  width: 100%;
  background-color: green;
  position: absolute;
  bottom: 0;
  left: 0;
}

.videoData .vQtitle {
  color: white;
  text-shadow: 0 0.1rem 0.5rem whitesmoke;
}

/* body .videoData {
  direction: rtl !important;
} */

.videoData .answerDada p {
  color: white;
}

.videoData .answerDada {
  color: white;
  padding: 5px;
  margin: 10px 30px;
  font-size: 20px;
  border-radius: 4px;
  background: #ffffff14;
}

.videoData .answerDada.active p {
  color: black;
}

.videoData .answerDada.active {
  color: black;
  background-color: white;

  border: 1px solid white;
}

.videoData .feedback {
  width: 350px;
  /* background-color: white; */
  background: var(--slice-theme-block-bg-color-second);
  padding: 5px;
  margin: 10px auto;
}

.videoData .feedtext {
  display: inline-block;
  padding: 10px;
}

.videoData .iconVX {
  display: inline-block;
  margin: unset !important;
}

.videoData .AnsweredVq {
  margin: auto;
  display: block;
  background: white;
  color: black;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 20px;

  border: none;
  background: white;
  border-radius: 3rem;
  outline: none;
  text-shadow: none;

  transition: box-shadow 200ms, transform 200ms, filter 200ms ease-out, opacity 200ms ease-out;
  transform: perspective(15rem);
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  margin-bottom: 50px;
}

.ratingStyle {
  background-color: transparent;
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 100%;
  border: 4px solid white;
  margin: 5px;
  box-shadow: 0px 0px 5px 0px white;
}

.container-riteing {
  width: 400px;
  height: 40px;
  margin: 50px auto;
}

.videoData .checkbox-custom-label {
  padding: 0px 15px !important;
}

.ratingStyle.active {
  background-color: white !important;
}

html body .videoData .answerDada .Multi,
html body .videoData .answerDada .vidoInteractiveT {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.removeqvideo {
  /* background: transparent !important; */
  /* color: #b7b7b7 !important; */
  border: none !important;
}

.videoText {
  height: auto !important;
}

.vidoAnsTr {
  color: white !important;
}

html body .videoData button.ansans2 {
  margin-bottom: 0px !important;
}

.videoData .ansCheck2.yesNoansCheck.noSwipe.AnsweredVq {
  margin: 0px !important;
}

body .videoData table tbody tr {
  background-color: transparent !important;
}

table tbody tr:nth-child(odd) {
  background-color: transparent;
}

.videoData .star-number {
  border-bottom: 0px !important;
}

body table.reatings tbody tr {
  background-color: white;
}

/* .videoData .greenBorder { */
/* border: 3px solid #00cc51 !important; */
/* background: linear-gradient(to left, #00c53a, #00c53a) !important; */
/* background: linear-gradient(to right,
      #00c53a -100%, var(--slice-theme-block-bg-color) 80%) !important; */
/* opacity: 0.4; */
/* } */

.showscorevideo {
  background-color: #d5d5d5;
  width: 130px;
  padding: 5px;
  border: 1px solid white;
  position: absolute;
  font-size: 16px;
}

.textSize {
  width: 400px;
  height: 150px;
  border-radius: 10px;
  background-color: black;
  color: white;
  padding: 5px;
}

.textSize {
  display: block !important;
  margin: 0px auto;
}

body table.reatings tbody tr {
  background-color: transparent !important;
}

.addansvideo {
  /* position: absolute; */
  /* margin-right: 50px; */
  padding: 5px;
  font-size: 16px;
  color: white;
  font-weight: 900;
  background-color: transparent;
  cursor: pointer;
}

.moveLeft {
  left: 0px !important;
}

.moveRight {
  right: 0px !important;
}

button.sliceContiuePlayer.sliceContiuePlayer-style.border-radius-BB.gonextq.display-none.CancelDisplayNone2 {
  display: inline-block !important;
  margin: 0px auto;
}

.answerDada.squerChoice {
  border-radius: 0px !important;
}

.videoData .ansCheck {
  margin: 10px;
}

.videoData .video-interactive-title.color-white {
  margin-top: 80px;
}

.video-interactive-title {
  font-size: 1.8rem !important;
}

.hover_btn:hover {
  filter: grayscale(0.3);
}

@media only screen and (max-width: 734px) {
  .mobile-alert {
    display: block;
    position: fixed;
    z-index: 9999999999;
    top: 0px;
    left: 0px;
  }

  .cardshowdelet {
    margin: 30px 0;
  }

  .min-hight-400 .grid-row.text_center.flex-around {
    flex-direction: column;
  }

  /* .cards-container {
    flex-direction: column;
  } */

  .videoContainer-mobile-fullscreen .addansvideo {
    font-size: 14px;
  }

  .videoContainer-mobile-fullscreen p.radio-custom-label.labelAns.videoText {
    font-size: 14px !important;
  }

  .videoData .videoContainer-mobile-fullscreen .answerDada {
    padding: 0px;
  }

  .videoData .videoContainer-mobile-fullscreen button.ansCheck {
    font-size: 16px !important;
  }

  .videoData .videoContainer-mobile-fullscreen .feedback.border-radius-BB {
    padding: 2px;
    margin-bottom: 0px;
  }

  .videoContainer-mobile-fullscreen .video-interactive-title {
    font-size: 1.2rem !important;
  }

  .videoContainer-mobile-fullscreen .feedback {
    transform: scale(0.8);
  }
}

input.colorPicker.ant-btn-lg {
  cursor: pointer;
}

.move_folder_tree .ant-tree {
  height: 65vh;
  overflow: scroll;
}

.imgs-loader,
.imgs-loader:before,
.imgs-loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.imgs-loader {
  color: #444444;
  font-size: 10px;
  margin: 0 auto 30px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.imgs-loader:before,
.imgs-loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.imgs-loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.imgs-loader:after {
  left: 3.5em;
}

.empty-state-active {
  background: rgb(146 104 255) !important;
  animation-name: bounce;
  transform-origin: center bottom;
  animation-duration: 1s;
  animation-fill-mode: both
}



/*///////////////////////////////////////// FREESTYLE ////////////////////////////////////////////*/

.freestyle_chapter_preview {
  margin: 0px;
  border-radius: 0px;
}

.freestyle_src_loaded {
  height: 0;
  width: 0;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
textarea.freestyle_scrollbar {
  scrollbar-width: auto !important;
  scrollbar-color: #7f7382 #ffffff !important;
}

/* Chrome, Edge, and Safari */
textarea.freestyle_scrollbar::-webkit-scrollbar {
  width: 10px !important;
}

textarea.freestyle_scrollbar::-webkit-scrollbar-track {
  background: #ffffff !important;
}

textarea.freestyle_scrollbar::-webkit-scrollbar-thumb {
  background-color: #7f7382 !important;
  border-radius: 10px !important;
  border: 3px solid #ffffff !important;
}

.noscrollbar::-webkit-scrollbar {
  width: 0px !important;
}

.freestyle_innerHTML {
  height: 100%;
  width: 100%;
}

.freestyle_backdrop {
  background-color: #000000c2;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.exit_enlarge_btn {
  position: absolute;
  top: 0;
  right: -80px;
  filter: drop-shadow(2px 2px 2px black);
  font-size: 60px;
  cursor: pointer;
}

.freestyle_enlarged {
  width: 70%;
  height: 60%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: zoomIn 0.6s forwards;
  background-color: #0000008f;
  box-shadow: 0 0 6px 0px black;
  border-radius: 6px;
}

.free-background {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  /* display: inline-block; */
  margin: 0 auto;
}

.freestyle_bg_full {
  width: 100%;
}

.free-new {
  position: absolute;
}

.freestyle_anim_radio.hide_radio_btns .ant-radio {
  visibility: hidden;
}

.free-new-text {
  white-space: pre-wrap;
}

.freestyle_offset {
  display: none;
  position: absolute;
  width: 75%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0px);
  border-right: 1px dashed black;
  border-left: 1px dashed black;
  outline: 1px dashed white;
}

.free-new-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.free-new.free-new-img-autosize {
  height: auto !important;
}

.free-new-img img {
  pointer-events: none;
  width: 100%;
}

.freestyle_del_button {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  background: #ffffffad;
  transition: none;
}

.freestyle_footer_button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffffad;
  margin: 0 2px;
}

.freestyle_footer_button_phone {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffffad;
}

.margin-btn {
  margin: 2px 0;
}

.freestyle_footer_button_bg {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  background: #ffffffad;
  margin: 2px auto;
}

.footer_btns {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.freestyle_add_btn {
  margin: 10px;
}

.freestyle_resize {
  width: 50px;
  height: 18px;
  position: absolute;
  bottom: -2px;
  right: -25px;
  z-index: 0;
  cursor: nw-resize;
  border: 1px solid black;
  outline: 1px solid white;
  transform-origin: center bottom;
  transform: rotate(-45deg);
  background-image: repeating-linear-gradient(transparent 60%, black 50%, transparent 100%);
}

.freestyle_zoom {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 9;
  transform: translateX(-50%);
}

.freestyle_zoom_btn {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  background: #ffffffcc;
  margin: 0 2px;
}

body.dark-mode .freestyle_dark_input input {
  background: #2c3335;
  color: white;
}

body.dark-mode .freestyle_dark_input .ant-input-number-handler-wrap {
  border-left: 1px solid #3b4348;
  background: #2c3335;
}


body.dark-mode .freestyle_dark_input .ant-input-number-handler-wrap .ant-input-number-handler-down {
  border-top: 1px solid #3b4348;
}

.ignore_mousedown {
  transition: none;
}

.freestyle_demo {
  background: #f9f8f8;
  border-radius: 12px;
  border: 1px solid #cccccc;
  width: 70%;
  overflow: scroll;
  position: relative;
  height: 100%;
}

.freestyle_demo_css {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: #f9f8f8;
  padding: 20px;
  border: 1px solid #cccccc;
}

.freestyle_demo_css h6 {
  text-decoration: underline;
}

.active_option {
  background: skyblue;
}

.bg_type_menu {
  text-align: right;
}

.bg_type_menu li i {
  margin: 0 2px;
}

.video_bg {
  min-width: 100%;
  min-height: 100%;
}

.register_checkbox .ant-checkbox {
  top: 2px;
}

@keyframes menu-open {
  0% {
    width: 0%;
  }

  100% {
    height: 20%;
  }
}

/*///////////////////////// END FREESTYLE ///////////////////*/

@-webkit-keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {

  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}



/* prevent continue prevent-continue */
.prevent-continue .prevent-continue-alert-after {
  display: flex;
  width: 100%;
  min-height: 200px;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.prevent-continue.prevent-continue-over .prevent-continue-alert-after {
  display: none;
}

.ant-table-thead>tr>th {
  overflow: hidden;
}

/* .bar_right_position {
  right: 10px;
}

.bar_left_position {
  left: 10px;
} */

.course_language.direction_rtl.topLeftFixedBar {
  left: 10px;
}

.course_language.direction_ltr.topLeftFixedBar {
  right: 10px;
  left: initial !important;
}

.course_language.direction_rtl #menu-hamburger {
  right: 0px;
}

.course_language.direction_ltr #menu-hamburger {
  left: 0px;
}


.div_bg_img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
}

.div_bg_img.vid_contain {
  object-fit: contain;
}

.div_bg_img.img_contain {
  background-size: contain;
}

.block_image {
  width: 100%;
  height: 100%;
  position: relative;
}

.block_image_cont {
  overflow: hidden;
  direction: ltr;
  width: 100%;
  text-align: left;
}

.block_img_load {
  position: absolute !important;
  visibility: hidden;
  width: 100%;
  left: 0;
  top: 0;
}

.design_quote_img {
  min-height: 410px;
}

.flip_card_img_new {
  height: 400px;
}

.card_img_text {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  z-index: 9;
}

.block_image_chat {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}

.toggle_container {
  background: #bfbfbf;
  width: 52px;
  height: 24px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle_knob {
  background: white;
  height: 19px;
  width: 19px;
  border-radius: 50%;
  position: absolute;
  left: 3px;
  top: 2px;
  box-shadow: 1px 1px 0 #6c6c6c;
  transition: all 0.3s ease-in;
}

.toggle_container.toggle_active {
  background: var(--slice-main-color);
}

.toggle_active .toggle_knob {
  left: 22px;
  top: 2px;
}

.powtoon_ai_output_container {
  position: fixed;
  width: 90vw;
  left: 50%;
  z-index: 99;
  max-height: 80vh;
  transform: translate(-50%, 0);
  top: 150px;
  overflow: auto;
  text-align: left;
  font-size: 20px;
}

.powtoon_ai_output table {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
}

.powtoon_ai_output table td,
.powtoon_ai_output table th {
  border: 1px solid #b8b8b8;
}

.powtoon_ai_output table thead {
  white-space: pre;
}

.powtoon_ai_output table tbody tr:first-child {
  white-space: pre;
  background: #4d4d4d;
  color: white;
}

/* .free-new-text .fr-wrapper span {
  font-size: inherit !important;
} */

body.dark-mode .freestyle_component {
  color: #e5e5e5;
}

body.dark-mode .freestyle_basic_settings {
  background: #000000d6;
}

body.dark-mode .freestyle_change_bg {
  background: #000000a8;
  border: 4px double black;
}

body.dark-mode .freestyle_active_radio {
  background: #171d1e !important;
}

body.dark-mode .freestyle_component_choose:not(.freestyle_active_radio):hover {
  background: #0000003b;
}

body.dark-mode .freestyle_radio_cont,
body.dark-mode .freestyle_change_bg:hover,
body.dark-mode .freestyle_mini_logo:not(.cantPaste):hover,
body.dark-mode .freestyle_add_comp {
  background: #2c3335;
}

body.dark-mode .freestyle_radio_option:hover:not(.freestyle_active_radio),
.freestyle_anim_radio label:hover:not(.freestyle_active_radio) {
  background: #384143 !important;
}

body.dark-mode .freestyle_side_menu {
  background: black;
}

body.dark-mode .freestyle_new_input {
  background: #00000021;
}

body.dark-mode .freestyle_right_menu_option {
  background: #000000a8;
}

body.dark-mode .freestyle_comp_menu_option:hover,
body.dark-mode .freestyle_right_menu_option:not(.freestyle_menu_option_disable):hover,
body.dark-mode .freestyle_add_comp:not(.active_option):hover,
body.dark-mode .freestyle_menu_option:hover,
body.dark-mode .freestyle_menu_option_active {
  background: black !important;
}

body.dark-mode .freestyle_comp_menu_option_copy,
body.dark-mode .freestyle_comp_menu_option_del,
body.dark-mode .freestyle_dynamic_settings,
body.dark-mode .freestyle_css_menu,
body.dark-mode .freestyle_side_menu_cont {
  background: #000000a8;
}

body.dark-mode .freestyle_dark_input,
body.dark-mode .freestyle_complist_btn_active,
body.dark-mode .freestyle_arrows_zIndex i:hover {
  color: white;
}

.ant-input-number-input {
  direction: ltr !important;
}

.freestyle_component nz-tooltip {
  position: absolute;
}

.svg_x_v {
  height: 35px;
  width: 35px;
  display: block;
  margin: 0px auto 10px;
}

.freestyle_autosize {
  height: auto !important;
  width: auto !important;
}

.plans-b {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.empty-course-container .section_locked i.ti-lock-square-rounded-filled {
  font-size: 30px !important;
  color: white !important;
  transition: all 1s;

}

body .plans-b.smallbtn i,
body .plans-b.smallbtn img {
  max-width: 30px !important;
  padding: 2px;

}

img.plans-badge.big-badge {
  transform: scale(1.5);
  margin-top: 10px;
}

img.plans-badge {
  max-width: 50px !important;
  padding: 5px;
}


.section_locked:hover {
  opacity: 0.1 !important;
}


.section_locked {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: normal;
  position: absolute;
  border-radius: 10px;
  flex-direction: column;
  top: 0;
  left: 0;
  justify-content: center;
  overflow: hidden;
  opacity: 0.9;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 3;
}

.section_locked:hover {
  opacity: 0.2;
}

.section_locked i.ti-lock-square-rounded-filled {
  font-size: 40px !important;
  color: white !important;
  transition: all 1s;
  display: none;
}

.section_locked .slice-syb-lock {
  position: absolute;
  bottom: -36px;
  right: -28px;
  width: 100px;
  height: 100px;
  transition: all 1s;
  transform-origin: top;
}


.tabsContent .section_locked i.ti-lock-square-rounded-filled {
  font-size: 30px !important;
  color: white !important;
  transition: all 1s;
  margin-top: 10px;
}

.section_locked svg {
  display: none;
}

.bignavbad img.plans-badge.plus-badge.ng-star-inserted {
  margin-bottom: 25px;
}








.variable-highlight {
  background-color: #f1e2ff;
  font-weight: 600;
  border-radius: 22px;
  max-width: 150px;
  overflow: hidden;
  font-size: 12px;
  padding: 2px 10px;
  text-overflow: ellipsis;
  outline: none;
  color: black;
  border: 1px dashed #a3a3a330;
}

body article.direction_rtl .deletQ {
  left: 0;
}

body article.direction_ltr .deletQ {
  right: 0;
}

.chet-outline {
  margin-left: 45% !important;
}

.course_language.direction_ltr .collapsaddicon {
  right: 30px;
}

.course_language.direction_rtl .collapsaddicon {
  left: 30px;
}

body.direction_rtl .iconright {
  border-left: 1px solid #a5a5a587;
}

body.direction_ltr .iconright {
  border-right: 1px solid #a5a5a587;
}

body .inp {
  padding: 5px 20px;
}

body .forbtn {
  text-align: var(--slice-theme-text-align-flip);
}

.textDescription {
  max-height: 400px;
  overflow: auto;
}

.course_language.direction_rtl .textDescription {
  padding-right: 0px !important;
  padding-left: 25% !important;
}

.course_language.direction_ltr .textDescription {
  padding-left: 0px !important;
  padding-right: 25% !important;
}

body .panel-heading.transition-05.collapsed.tabs {
  float: var(--slice-theme-text-align);
}

.course_language.direction_ltr #menu {
  left: -100vw;
}

.course_language.direction_rtl #menu {
  right: -100vw;
}

.course_language.direction_rtl #menu.open {
  right: 0;
}

.course_language.direction_ltr #menu.open {
  left: 0;
}

body .theme-direction,
body .menu-item-drag {
  direction: var(--slice-theme-direction);
  z-index: 10;
}

body .theme-text-align {
  text-align: var(--slice-theme-text-align);
}

/* .course_language.direction_ltr button.ansans:not(.yesNoButton),
.course_language.direction_ltr button.ansans2:not(.yesNoButton) {
  left: -40px
}

.course_language.direction_rtl button.ansans:not(.yesNoButton),
.course_language.direction_rtl button.ansans2:not(.yesNoButton) {
  right: -40px
} */

.course_language.direction_rtl article button.ansans:not(.yesNoButton),
.course_language.direction_rtl article button.ansans2:not(.yesNoButton) {
  right: -40px;
}

.course_language.direction_rtl .checkbox-custom+.checkbox-custom-label:before,
.course_language.direction_rtl .radio-custom+.radio-custom-label:before {
  display: none !important;
}

.course_language.direction_ltr article button.ansans:not(.yesNoButton),
.course_language.direction_ltr article button.ansans2:not(.yesNoButton) {
  left: -40px;
}

.course_language.direction_ltr .checkbox-custom+.checkbox-custom-label:before,
.course_language.direction_ltr .radio-custom+.radio-custom-label:before {
  display: none !important;
}

.ant-switch-checked {
  background-color: var(--slice-theme-primary-color);
}

.ant-radio-button-wrapper-checked {
  border-color: var(--slice-theme-primary-color);
  box-shadow: -1px 0 0 0 var(--slice-theme-primary-color);
  background: transparent !important;
}

/* .ant-btn-dashed:not(.color-white):hover,
.ant-btn-dashed:not(.color-white):focus,
.ant-btn:not(.color-white):hover,
.ant-btn:not(.color-white):focus {
  border-color: var(--slice-theme-primary-color);
  color: var(--slice-theme-primary-color);
  background: transparent;
} */

/* .ant-btn-dashed:focus,
.ant-btn:focus {
  border-color: transparent !important;
  color: unset !important;
}

.ant-btn-dashed:hover,
.ant-btn:hover {
  border-color: var(--slice-theme-primary-color);
  color: var(--slice-theme-primary-color);
} */

.ant-modal .ant-btn-primary:hover,
.ant-modal .ant-btn-primary:focus {
  opacity: 0.7;
  color: white !important;
}

.ant-modal .ant-btn-primary,
.ant-modal .ant-btn-primary {
  border-color: var(--slice-theme-primary-color);
  background-color: var(--slice-theme-primary-color);
  color: white !important;
}

.ant-radio-button-wrapper:hover,
.ant-radio-button-wrapper-focused,
.ant-tabs-nav .ant-tabs-tab:hover {
  color: var(--slice-theme-primary-color);
}

body .panel-heading[aria-expanded="true"] {
  border-color: var(--slice-theme-primary-color);
}

body a:hover {
  color: var(--slice-theme-primary-color);
}

body .panel-heading.transition-05.collapsed.tabs.activeTab {
  border-right: 2px solid var(--slice-theme-primary-color);
}

body .line li:before,
body .circle li:before,
body .bulets li:before,
body .chet-outline {
  background: var(--slice-theme-primary-color);
}

body.direction_ltr .circle li:before {
  left: -20px;
}

body.direction_rtl .circle li:before {
  right: -20px;
}

/* body.direction_ltr .bulets li:before {
  left: -10px;
}

body.direction_rtl .bulets li:before {
  right: -10px;
} */

html body .themeControl-modal {
  background: var(--slice-theme-bg-color);
}

.box-shadow {
  box-shadow: var(--slice-theme-shadow);
}

body.direction_ltr .progMenuLi {
  left: 0px;
}

body.direction_rtl .progMenuLi {
  right: 0px;
}

.template-container {
  direction: var(--slice-theme-direction);
  /* margin: var(--slice-theme-margin) 0px; */
  padding: 0;
}

.btn.cta.ansCheck2 {
  direction: var(--slice-theme-direction);
}

html body.exported-slice,
body.exported-slice {
  direction: var(--slice-theme-direction) !important;
  text-align: var(--slice-theme-text-align) !important;
  font-size: 14px;
  color: var(--slice-theme-text-color) !important;
  word-break: break-word !important;
  background-color: var(--slice-theme-bg-color) !important;
  overflow-x: hidden !important;
}

/* body.exported-slice .topQuote::before {
  bottom: -74px !important;
}

body.exported-slice .bottomQuote::after {
  top: -74px !important;
} */

.background-color-theme {
  background-color: var(--slice-theme-bg-color);
}

html body .ratingText {
  font-size: var(--slice-theme-p-fontsize);
  color: var(--slice-theme-text-color);
}

body.direction_ltr .sliceContiuePlayer-edit-style {
  margin-left: 10px;
}

body.direction_rtl .sliceContiuePlayer-edit-style {
  margin-right: 10px;
}

/* html body.exported-slice p {
  font-size: var(--slice-theme-p-fontsize) !important;
  word-break: break-word !important;
} */

/* .panel-heading.transition-05.collapsed div {
  font-size: var(--slice-theme-p-fontsize);
  word-break: break-word !important;
  min-height: 30px;
} */

.border-radius-BB {
  border-radius: var(--slice-theme-border-radius);
}

.border-radius-BB::after {
  border-radius: var(--slice-theme-border-radius);
}

.border-radius-BB-right {
  border-radius: 0px var(--slice-theme-border-radius) var(--slice-theme-border-radius) 0px;
}

/* primary */

.bg-color-primary {
  background: var(--slice-theme-primary-color) !important;
  background-color: var(--slice-theme-primary-color) !important;
}

.border-color-primary {
  border-color: var(--slice-theme-primary-color);
}

.outline-color-primary {
  outline-color: var(--slice-theme-primary-color);
}

body .carousel-indicators .active {
  background: var(--slice-theme-primary-color);
  background-color: var(--slice-theme-primary-color);
}

.hoverBgPrimary:hover {
  background: var(--slice-theme-primary-color);
  color: white;
}

.functionsAdd button {
  background: var(--slice-theme-primary-color) !important;
}

.chet-outline:after {
  border-left-color: var(--slice-theme-primary-color) !important;
}

/* secondary */

.bg-color-secondary,
.chet-full {
  background: var(--slice-theme-secondary-color) !important;
  color: white !important;
}

.chet-outline p {
  color: white !important;
}

.bg-color-secondary,
.chet-full:after {
  border-right-color: var(--slice-theme-secondary-color) !important;
}

.hoverBgSecondary:hover {
  background: var(--slice-theme-secondary-color);
  color: white;
}

/* lock-chapter */

.lock-chapter:hover {
  background: var(--slice-theme-block-bg-color);
  color: var(--slice-theme-secondary-color);
}

/* chapter title background */

.bg-light-color {
  background: var(--slice-theme-block-bg-color);
}

.border-light-color {
  border: 1px solid var(--slice-theme-block-bg-color);
}

/* course Title */

.menu-header-bg h1 {
  text-align: var(--slice-theme-text-align);
  direction: var(--slice-theme-direction);
}


.bigFont {
  font-size: var(--slice-theme-h1-fontsize);
  /* font-weight: bold; */
  text-align: var(--slice-theme-text-align);
  margin-left: 0px;
  margin-right: 0px;
  line-height: 1.2;
}

.title_author_section {
  display: flex;
  flex-direction: column;
}

.course_language.direction_ltr .contain {
  right: -300vw;
}

.course_language.direction_ltr .contain.active_sidemenu {
  right: 0;
}

.course_language.direction_rtl .contain {
  left: -300vw;
}

.course_language.direction_rtl .contain.active_sidemenu {
  left: 0;
}

.course_language.direction_rtl .sidemenu_btn {
  left: 10px;
}

.course_language.direction_ltr .sidemenu_btn {
  right: 10px;
}

/* .cdk-drag-placeholder {
  background: yellow !important;
} */

/* chapter Title  & big title block*/

/* .chapter-title,
.chapter-title p {
  font-size: var(--slice-theme-h2-fontsize);
} */

.chapter-title div {
  direction: var(--slice-theme-direction);
}

/* chapter secondary Title */

/* html body .tempalte-h4 p,
html body .tempalte-h4,
html body slice-block h3,
html body .tempalte-h4 * {
  font-size: var(--slice-theme-h3-fontsize);
} */

html body article h2,
html body article h3,
html body article h4,
html body article h5,
html body article h6 {
  color: var(--slice-theme-text-color) !important;
}



/* html body article .cta p,
html body article .cta span {
  color: white;
} */

html body article p,
/* html body article span:not(.span_ignore_theme_style):not(.span_ignore_theme_style span):not(.fr-wrapper span), */
html body article label,
html body article li {
  direction: var(--slice-theme-direction);
  text-align: var(--slice-theme-text-align);
  font-size: var(--slice-theme-p-fontsize);
  color: var(--slice-theme-text-color);
}



/* .panel-title,
.textDescription div {
  direction: var(--slice-theme-direction);
  text-align: var(--slice-theme-text-align);
} */

/* .textDescription p,
.textDescription,
.header-description,
.header-description p {
  color: white;
} */



/* body.exported-slice h1,
body.exported-slice h2,
body.exported-slice h3,
body.exported-slice h4,
body.exported-slice h5,
body.exported-slice h6 {
  margin-top: 0;
  margin-bottom: .5em;
  color: var(--slice-theme-text-color);
  font-weight: 500;
} */

body.direction_ltr #scrollIndicator {
  left: 0px;
}

body.direction_rtl #scrollIndicator {
  right: 0px;
}

/* .course_language.direction_rtl .checkbox-custom+.checkbox-custom-label:before,
.course_language.direction_rtl .radio-custom+.radio-custom-label:before {
  right: -40px;
}

.course_language.direction_ltr .checkbox-custom+.checkbox-custom-label:before,
.course_language.direction_ltr .radio-custom+.radio-custom-label:before {
  left: -40px;
} */

.radio-custom:checked+.radio-custom-label {
  background-color: var(--slice-theme-block-bg-color-second);
  /* background-color: #394a61; */
  /* color: white; */
}

body.exported-slice article .radio-custom-label.labelAns:hover:not(.radio-custom:checked+.radio-custom-label) {
  transform: scale(1.02);
  background-color: var(--slice-theme-block-bg-color-second);
}

/* 
button.ant-btn.ant-btn-circle.ant-btn-lg.ant-btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  border: 0px;
  background-color: #ffffff54;
  color: white;
  backdrop-filter: blur(81px);
  transition: 1s easa;
}

button.ant-btn.ant-btn-circle.ant-btn-lg.ant-btn-icon-only:hover {
  background-color: #ffffff2e;
} */


body.direction_rtl .plan_badge_lock {
  left: 10px;
}

body.direction_ltr .plan_badge_lock {
  right: 10px;
}

.freestyle_alert .ant-alert {
  gap: 0 10px;
}


.empty-ai-img {
  color: black;
  opacity: 0.6;
  font-size: 15px;
}

body.dark-mode .empty-ai-img {
  color: white;
  opacity: 0.6;
  font-size: 15px;
}

.course_language.direction_ltr .fr-wrapper,
.course_language.direction_ltr .fr-element.fr-view {
  direction: ltr !important;
}

.course_language.direction_rtl .fr-wrapper,
.course_language.direction_rtl .fr-element.fr-view {
  direction: rtl !important;
}

body.dark-mode .courses_limit_cont {
  color: white;
}

body.dark-mode .tutorials-padding {
  background: black;
}

/* body.dark-mode .tutorial_backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
} */

/* body.dark-mode .tutorial:not(.tutorial_open):hover .tutorial_backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
} */

/* body.dark-mode .tutorial_content_cont h6 {
  color: rgba(255, 255, 255, 0.7) !important;
} */

body.dark-mode .tutorial_color_opacity {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 


body.dark-mode .tutorial_color {
  color: white !important;
}

body.dark-mode .tutorial_btn {
  border: 2px solid white !important;
}

body.dark-mode .tutorial_btn:hover {
  background: white !important;
  color: black !important;
} */

body.direction_rtl .tutorials-padding {
  padding-right: 220px;
  padding-left: 20px;
}

body.direction_ltr .tutorial_content_cont h6 {
  left: 0;
}

body.direction_rtl .tutorial_content_cont h6 {
  right: 0;
}

body.direction_ltr .tutorial_btn i {
  right: 0px;
}

body.direction_ltr .can_skip .tutorial_btn:hover i {
  right: -4px;
}

body.direction_rtl .tutorial_btn i {
  left: 0px;
  transform: rotate(180deg);
}

body.direction_rtl .can_skip .tutorial_btn:hover i {
  left: -4px;
}

body.direction_ltr .tutorial_open .tutorial_btn_bg {
  animation: tutorial_btn_bg_ltr 2s forwards 2s linear;
}

body.direction_rtl .tutorial_open .tutorial_btn_bg {
  animation: tutorial_btn_bg_rtl 2s forwards 2s linear;
}

body.direction_rtl .ant-select-arrow {
  left: 11px;
  right: unset;
}

body.direction_rtl .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
body.direction_rtl .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  padding: 0;
}

body.dark-mode .user_close_btn {
  border-color: #ffffffa8;
  color: #ffffffa8;
}

body.direction_ltr .user_close_btn {
  right: 10px;
}

body.direction_rtl .user_close_btn {
  left: 10px;
}

body.direction_ltr .chat_img {
  right: 0;
}

body.direction_rtl .chat_img {
  left: 0;
}

body.direction_ltr .ai-assistant-buttons-wrapper {
  left: 10px;
}

body.direction_rtl .ai-assistant-buttons-wrapper {
  right: 10px;
}


body.direction_ltr .ai-action-wrapper.ai-assistant-left-bubble {
  left: 10px;
  transform: translateX(0%) !important;
}

body .ai-assistant.ai-assistant-left-bubble {
  left: 10px;
  right: auto;
  transform: translateX(0%) !important;
}

body .ai-assistant.ai-assistant-right-bubble {
  right: 10px;
  left: auto;
  transform: translateX(0%) !important;
}

body.direction_ltr .tutorial_media_icon_mid {
  transform: translate(-10px, 0);
}

body.direction_rtl .tutorial_media_icon_mid {
  transform: translate(10px, 0);
}

body.direction_ltr .assistant_span {
  padding-right: 10px;
}

body.direction_rtl .assistant_span {
  padding-left: 10px;
}

@keyframes tutorial_btn_bg_ltr {
  0% {
    left: -100%;
  }

  100% {
    left: 0%;
  }
}

@keyframes tutorial_btn_bg_rtl {
  0% {
    right: -100%;
  }

  100% {
    right: 0%;
  }
}


/* ////////////////////////////////////////////////  DARK MODE CLASSES //////////////////////////////////////////////////////////*/

body.dark-mode .dark_mode_color_white {
  color: white !important;
}

body.dark-mode .dark_mode_color_black {
  color: black !important;
}

body.dark-mode .dark_mode_color_black_0-7 {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .dark_mode_color_white_0-7 {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .dark_mode_bg1 {
  background: var(--slice-bg-primary-dark) !important;
}

body.dark-mode .dark_mode_bg2 {
  background: var(--slice-bg-secondery-dark) !important;
}

body.dark-mode .dark_mode_bg3 {
  background: var(--slice-bg-third-dark) !important;
}

body.dark-mode .dark_mode_bg1_color {
  background: var(--slice-bg-primary-dark) !important;
  color: white !important;
}

body.dark-mode .dark_mode_bg2_color {
  background: var(--slice-bg-secondery-dark) !important;
  color: white !important;
}

body.dark-mode .dark_mode_bg3_color {
  background: var(--slice-bg-third-dark) !important;
  color: white !important;
}

body.dark-mode .dark_mode_hover_bg1:hover {
  background-color: var(--slice-bg-primary-dark) !important;
}

body.dark-mode .dark_mode_hover_bg2:hover {
  background-color: var(--slice-bg-secondery-dark) !important;
}

body.dark-mode .dark_mode_hover_bg3:hover {
  background-color: var(--slice-bg-third-dark) !important;
}


/* //////////////////////////////////// FINISH DARK MODE CLASSES ////////////////////////////////*/


body.dark-mode .search-wrap {
  border-color: var(--slice-bg-secondery-dark);
}

body.dark-mode .search-wrap h3 {
  border-color: var(--slice-bg-secondery-dark);
  color: white;
}

.slice_btn_active {
  background: var(--slice-main-color) !important;
  color: white !important;
}


.component_background {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: overlay !important;
}

.tabs_media {
  width: 75%;
}

.overflow-auto-important {
  overflow: auto !important;
}

.opening-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* body.direction_ltr .theme_templates_container {
  transform: translate(calc(-100% - 10px), 0px);
  animation: theme_templates_container_ltr 0.5s forwards ease-out;
}

body.direction_rtl .theme_templates_container {
  transform: translate(10px, 0);
  animation: theme_templates_container_rtl 0.5s forwards ease-out;
} */

.logo_header {
  display: none;
}

.header-background-imagev2 {
  display: none;
}

/* .viewContainer article {
  background: white;
} */

.endChapter_cont {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}

.chaptersData {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@keyframes theme_templates_container_ltr {
  0% {
    opacity: 0;
    transform: translate(calc(-100% - 10px), -10px);
  }

  100% {
    opacity: 1;
    transform: translate(calc(-100% - 10px), 0px);
  }
}

@keyframes theme_templates_container_rtl {
  0% {
    opacity: 0;
    transform: translate(10px, -10px);
  }

  100% {
    opacity: 1;
    transform: translate(10px, 0px);
  }
}




.ai-loader-progress-bar {
  position: relative;
  width: 90%;
  height: 8px;
  height: 4px;
  border-radius: 50px;
  overflow: hidden;
  backdrop-filter: blur(30px);
  --webkit-backdrop-filter: blur(30px);
  background-color: rgba(0, 0, 0, 0.15);
  width: 300px;
  margin: 15px auto;

}

.ai-loader-progress-bar .ai-loader-progress-inside {
  position: relative;
  height: 100%;
  border-radius: 50px;
  transition: all 2s ease-out;
  max-width: 95%;
  /* backdrop-filter: blur(30px);
  --webkit-backdrop-filter: blur(30px); */
  background-color: rgba(0, 0, 0, 0.5);
}






/* Knowledge Base Controller Stylesheet */

.knowledge-base-item {
  cursor: pointer;
  padding: 5px;
  margin-bottom: 5px;
}

/* .knowledge-ul li.selected-knowledge-base-item {
  background-color: black;
  color: white;
} */

.knowledge-ul {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;

}

.knowledge-ul li {
  background: white;
  width: 150px;
  height: 80px;
  border-radius: 10px;
  display: flex;
  flex-direction: column !important;
  align-content: center !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer;
  border: 1px solid #d8d8d8;
}

body.direction_ltr .chapter_bg_ul {
  right: 0;
}

body.direction_rtl .chapter_bg_ul {
  left: 0;
}





body.direction_rtl .helper-home-border-fullscreen {
  border-radius: 0px 15px 15px 0px;
}

body.direction_rtl .helper-main-border-fullscreen {
  border-radius: 15px 0px 0px 15px;
}








.course-bot .dropdown-options {
  max-height: 0px;
  overflow: auto;
  background: #000000eb;
  backdrop-filter: blur(41px);
  border-radius: 15px;
  border: 0;
  transition: all 0.3s;
  width: 250px;
}

.custom-dropdown.course-bot .selected-item {
  border-radius: 20px;
  transition: all 0.3s;
  padding: 4px;
}

.custom-dropdown.course-bot.open-dropdown .dropdown-options {
  max-height: 460px;
}

.custom-dropdown.course-bot.open-dropdown .selected-item {
  border-radius: 20px 20px 0px 0px;
}

.custom-dropdown.course-bot {
  border-radius: 25px;
  background: transparent !important;
  border: 0;
  width: fit-content;
  min-width: 130px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
}

.custom-dropdown .dropdown-info {
  padding: 0 10px !important;
}

.custom-dropdown.course-bot .selected-llm,
.custom-dropdown.course-bot .option:hover {
  background-color: #00000047 !important;
  color: white !important;

}

.custom-dropdown.course-bot .selected-item {
  background-color: transparent !important;
}

.custom-dropdown {
  width: 320px;
  position: relative;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  background-color: rgb(241 241 241);
  border-radius: 5px;
}

.selected-item {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  z-index: 2;
}

.option {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  cursor: pointer;
  background-color: transparent;
}

.dropdown-info {
  padding-left: 10px;
}


.dropdown-icon img {
  width: 35px;
  min-width: 35px;
  height: 35px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.dropdown-info h4 {
  margin: 0 !important;
  font-size: 1em;
  color: white;
}

.dropdown-info p {
  margin: 0;
  font-size: 0.8em;
  color: #aaa;
}

.group-title {
  font-weight: bold;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
}

.group-separator {
  height: 1px;
  background-color: #e5e5e5;
  margin: 5px;
}

.option:hover,
.selected-item {
  background-color: rgb(241 241 241);
}

.selected-llm {
  background: rgb(241 241 241);
}


.iphone_class #previewIframe {
  margin-bottom: 50px;
}

.fullscreen_img {
  max-height: 400px !important;
}

.fullscreen_img_cont,
.fullscreen_img_cont>* {
  border-radius: 0px !important;
}

.fullscreen_img_cont {
  height: 100%;
  width: 100vw;
}










/* COLORS RING */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}


@keyframes rotation-ring {
  0% {
    --gradient-angle: 0deg;
  }

  50% {
    --gradient-angle: 360deg;
  }

  100% {
    --gradient-angle: 0deg;
  }
}

:root {
  --gradient-angle: 0deg;
}

#ring.show-ring {
  visibility: visible;
}

#ring {


  position: fixed;
  inset: calc(6px / -2);
  border: 6px solid;
  border-image: linear-gradient(var(--gradient-angle), blue, purple, red, orange) 1;
  z-index: 9999999999;
  /* conic-gradient(
    from var(--gradient-angle) at center,
    #8c1a74,
    #732695,
    #563eb3,
    #4259d2,
    #3a75f2,
    #563eb3,
    #732695
  ) 10; */
  /* visibility: hidden; */
  pointer-events: none;
  filter: blur(0.3rem);
  animation: rotation-ring 5s linear infinite;

  position: absolute;
  inset: calc(2px);
  /* border: 236px solid; */
  filter: blur(1.3rem);
  z-index: -1;

}


.ai-action-wrapper {
  position: fixed;
  bottom: 10px;
  /* width: 150px; */
  /* min-height: 40px; */
  max-height: 90vh;
  display: flex;
  /* background: #0000007a; */
  /* backdrop-filter: blur(41px); */
  left: 50%;
  /* border-radius: 55px; */
  transform: translateX(-50%);
  z-index: 9999999999999999;
  /* border-top: 1px solid #ffffff6e; */
  /* border-left: 1px solid #ffffff70; */
  /* border-right: 1px solid #ffffff1a; */
  /* padding: 5px; */
  /* color: white; */
  /* overflow: hidden; */
  /* flex-direction: column; */
  justify-content: center;
  transition: 0.6s ease all;
}

.ai-current-bot {
  display: flex;
  gap: 5px;
  background: transparent;
  height: 35px;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  border: 0;
}

.ai-current-bot img {
  border-radius: 100%;
  width: 31px;
  height: 31px;
  object-fit: cover;
  min-width: 31px;
  max-height: 31px;
}

.ai-current-bot p {
  margin: 0 !important;
  font-size: 12px;
  color: white;
}

.ai-action-container:hover {
  /* background: #00000075; */
  /* background: hsla(0,0%,100%,.24); */
  background: hsl(0deg 0% 0% / 41%);
}

.scale-down-pressed {
  transform: scale(0.95);
}

.ai-action-container {
  position: relative;
  /* bottom: 10px; */
  /* width: 140px; */
  min-height: 35px;
  max-height: 90vh;
  min-width: 25px;
  display: flex;
  background: #000000a6;
  background: #00000047;
  backdrop-filter: blur(41px);
  /* left: 50%; */
  border-radius: 55px;
  /* transform: translateX(-50%); */
  /* z-index: 9; */
  border-top: 1px solid #ffffff6e;
  border-left: 1px solid #ffffff70;
  border-right: 1px solid #ffffff1a;
  /* padding: 5px; */
  color: white;
  overflow: hidden;
  flex-direction: row;
  justify-content: space-between;
  transition: 0.6s ease all;
  align-items: center;
  /* box-shadow: 3px 7px 8px #0000008a; */
}


.ai-action-container.ai-action-container-i .CancelDisplayNone,
body .ai-action-container.ai-action-container-i .CancelDisplayNoneToFlex {
  display: none !important;
}

.ai-action-container.ai-action-container-i .activeTab,
.ai-action-container.ai-action-container-i .newQ {
  background-color: transparent;
}

.ai-action-container.ai-action-container-i .feedback,
.ai-action-container.ai-action-container-i .qTitle {
  background-color: #f6f6f678;
}

.ai-action-container.ai-action-container-small {
  border-radius: 30px;
  width: 40vw;
  min-width: 40vw;
  min-height: 25vh;
}

.ai-action-container .buttons-list {
  display: flex;
  gap: 10px;
  justify-content: center;
  /* position: absolute; */
  bottom: 0;
  width: 100%;
  background: transparent;
}

.ai-action-container-i {
  width: 95% !important;
  justify-content: center;
}

.ai-action-container .slice-display-block .wow {
  opacity: 1 !important;
}

.ai-action-container .ai-action-content {
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--slice-modal-text-color);
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: var(--slice-font-primary);
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  height: auto;
  text-align: start;
  border: 0;
  padding: 3px 20px;
  max-height: 70vh;
  overflow: auto;
  min-height: 25vh;
  padding-bottom: 40px;
  /* margin-bottom: 50px; */
}

.slice-btn-flat {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  transition: 0.3s ease all;
  border-radius: 10px;
  padding: 10px;
  margin: 0px 10px;
  cursor: pointer;

  font-size: 16px;
  font-weight: 500;
}


.slice-btn-flat:hover {
  background: var(--slice-modal-li-hover-bg);
}

.carousel_slide {
  height: 500px;
}

.carousel_slide_cont .div_bg_img {
  background-position: center !important;
}

.carusel_slide {
  /* border: 1px solid black; */
  border-radius: 30px;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
  /* background-color: lightblue; */
}

.carusel_container {
  height: 500px;
  /* width: 800px; */
  width: 100%;
  position: relative;
  overflow: hidden;
}

.carusel_container_inner {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  height: 100%;
}

.carusel_steps_container {
  background: #414141;
  height: 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 6px;
  margin: 14px 0;
}

.carusel_step {
  height: 6px;
  width: 6px;
  background: #cacaca;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s;
}

.carusel_step.carusel_step_active {
  width: 15px;
  border-radius: 10px;
  pointer-events: none;
  background: white;
}

.carusel_container .fa-angle-left {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translate(0, -50%);
  color: white;
  font-size: 36px;
  height: calc(100% - 100px);
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* background: linear-gradient(to right, #00000099, transparent 50px); */
  direction: ltr;
  text-shadow: 1px 1px 6px black;
}

.carusel_container .fa-angle-right {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
  color: white;
  font-size: 36px;
  height: calc(100% - 100px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* background: linear-gradient(to left, #00000099, transparent 50px); */
  width: 50px;
  direction: ltr;
  text-shadow: 1px 1px 6px black;
}

.carusel_container .fa-angle-right::before,
.carusel_container .fa-angle-left::before {
  cursor: pointer;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carusel_slider_text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 50px;
  font-size: 12px;
  width: 100%;
}







.knowledge-base-button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  transition: 0.3s ease all;
  border-radius: 10px;
  padding: 10px;
  margin: 0px 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  background: var(--slice-modal-li-hover-bg);
  color: white;
}

.knowledge-base-button:hover {
  opacity: 0.7;
}



.knowledge-field-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-align: start;

}

.knowledge-field-description {
  margin: 0;
  text-align: start;
  opacity: 0.7;
  font-size: 14px;
  font-weight: 400;
  color: white;
  text-align: start;
  line-height: 1.1;
  padding-bottom: 10px;
}


.opacity-0-5 {
  opacity: 0.5;
}

.opacity-0-3 {
  opacity: 0.3;
}






.slice-primary-button-color {
  background: var(--slice-main-color) !important;
  color: white !important;
}



.knowledge-base-modal .upload-progress {
  background: linear-gradient(217deg, rgb(255 255 255 / 37%), rgb(255 255 255));
  height: 5px;
}


.knowledge-base-select {
  z-index: 1;
  background: #ffffffd1;
  width: 23px;
  min-width: 23px;
  height: 23px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-size: 18px;
}


body .fr-dropdown.froala-chat-bot {
  width: 130px !important;
  justify-content: center !important;
}

body .fr-dropdown.froala-chat-bot img {
  height: 30px;
  border-radius: 50%;
  max-width: 30px !important;
  position: absolute !important;
  left: 0;
  top: 4px !important;
}


.ai-action-backdrop .chat-header {
  display: none !important;
}


body .ai-action-backdrop .chat-footer.chat-footer-conversation {
  bottom: 50px !important;
  width: 100% !important;
  background: transparent !important;
}

body .ai-action-backdrop .ai-init-form h3,
body .ai-action-backdrop .ai-init-form p {
  color: white;
}

.ai-action-container.ai-action-close {
  width: 80px;
}

.ai-action-container.ai-action-close .ai-current-bot p {
  display: none;
}


body .ai-action-backdrop .chat-bot-li-chat.chat-bot-li-chat-reverse .bot-response-bubble {
  color: white !important;
}

body .home-container .new-course-container {
  left: 50%;
  transform: translateX(-50%);

}

body .ai-home-modals .ai-assistant-buttons-wrapper {
  display: none;
}

body .ai-home-modals .uploadContainer {
  width: 88%;
  height: 88%;
  z-index: 999999999999;
}

body .ai-home-modals .backdrop-new-course {
  display: none !important;
}

body .ai-home-modals .new-course-container {
  width: 88%;
  height: 88%;
  left: 50%;
  transform: translateX(-50%);
}



.ai-action-container-i .ai-current-bot,
.ai-action-container-small .ai-current-bot {
  width: 95%;
  justify-content: center;
}

.ai-action-container-i .ai-current-bot p,
.ai-action-container-small .ai-current-bot p {
  width: fit-content;
}



.ai-init-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 25px;
  /* padding-top: 100px; */
}

.ai-init-form form {
  width: 80%;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-init-img {
  border-radius: 50%;
  object-fit: cover;
  height: 100px;
  width: 100px;
}



body .ai-action-opener .ai-assistant.ai-assistant-fullscreen {
  width: 80%;
  top: auto;
  bottom: 60px;
  height: 80%;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  right: auto;
  backdrop-filter: blur(40px);


  width: 90%;
  bottom: 30px;
  height: 94%;


}

body .ai-action-opener .backdrop-ai-chat.ai-assistant-fullscreen-full-backdrop {
  backdrop-filter: saturate(115%) blur(40px) !important;
}

body .ai-action-opener .ai-assistant.ai-assistant-fullscreen.ai-assistant-fullscreen-full {
  width: 99%;
  height: calc(100% - 88px);
}

/* body .ai-action-opener .ai-assistant.ai-assistant-fullscreen.ai-assistant-left-bubble  {
  width: 25%;
  height: 85%;
  left: 1%;
  right: auto;
  transform: translateX(0%) !important;
}
body .ai-action-opener .ai-assistant.ai-assistant-fullscreen.ai-assistant-right-bubble  {
  width: 25%;
  height: 85%;
  right: 1%;
  left: auto;
  transform: translateX(0%) !important;
} */



body .ai-action-opener a,
body .ai-action-opener li,
body .ai-action-opener span,
body .ai-action-opener p,
body .ai-action-opener .P-Poa,
body .ai-action-opener .P-Poa span,
body .ai-action-opener .P-Poa p,
body .ai-action-opener .h1,
body .ai-action-opener .h2,
body .ai-action-opener .h3,
body .ai-action-opener .h4,
body .ai-action-opener .h5,
body .ai-action-opener .h6,
body .ai-action-opener h1,
body .ai-action-opener h2,
body .ai-action-opener h3,
body .ai-action-opener h4,
body .ai-action-opener h5,
body .ai-action-opener h6,
body .ai-action-opener input,
body .ai-action-opener button,
body .ai-action-opener select,
body .ai-action-opener optgroup,
body .cdk-overlay-container,
body .ai-action-opener textarea {
  font-family: var(--slice-font-primary) !important;
}

body .ai-action-opener .ai-assistant-fullscreen .helper-home {
  /* width: 275px;
  min-width: 275px !important; */
  max-width: 330px;
}


body .ai-action-opener .backdrop-ai-chat {
  /* backdrop-filter: none !important; */
}


#ai_assistant_main .newuploadmodal-settings {
  padding: 35px 21px;
}

body .ai-action-opener .chat-conversation,
body .ai-action-opener #ai_assistant_main {
  background: var(--slice-bg-secondery);
}

body.dark-mode .ai-action-opener .chat-conversation,
body.dark-mode .ai-action-opener #ai_assistant_main {
  background: black;
}


body .ai-action-opener .helper-home {
  backdrop-filter: saturate(115%) blur(16px);
  background: #ffffff85;
}

body.dark-mode .ai-action-opener .helper-home {
  background: #00000085;
}


body .ai-action-opener .ai-assistant-buttons-wrapper {
  display: none;
}

.rtl .ai-units-ul {
  left: 0px;
  right: auto;

}

.ltr .ai-units-ul {
  right: 0px;
  left: auto;

}

.ai-units-ul mark {
  background-color: transparent !important;
  color: white;
  font-weight: 800;
  padding: 0;
}

.ai-units-ul {
  position: absolute;
  left: 0px;
  top: -50px;
  display: flex;
  width: 80%;
  z-index: -1;
  overflow: auto;
  justify-content: flex-end;
}


.ai-units-ul li {
  display: inline-flex;
  margin: 0px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #f1f1f1;
  background: #000000;
  padding: 5px 15px;
  border-radius: 10px;
  min-height: 30px;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  max-width: 230px;
}

.ai-units-ul li:hover img {
  opacity: 0.4;
}

.ai-units-ul li img {
  object-fit: cover;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
  transition: 0.3s ease all;
}


.ai-units-ul li span {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}



.ai-units-ul .active-course-ai img {
  opacity: 0.5;
}

.tool-action {
  opacity: 0.8;
  padding: 0px 20px;
}


.wikipedia-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url(../../assets/img/llms/wikipedia-Logo.png);
  background-size: cover;
}

.wolfram-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url(../../assets/img/llms/wolfram-logo.png);
  background-size: cover;
}

.search-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url(../../assets/img/llms/web-search-logo.png);
  background-size: cover;
}


.knowledge-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url(../../assets/img/llms/knowledge-base.png);
  background-size: cover;
}


.sharepoint-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Microsoft_Office_SharePoint_%282019%E2%80%932025%29.svg/1049px-Microsoft_Office_SharePoint_%282019%E2%80%932025%29.svg.png');
  background-size: cover;
}


.image-tool::before {
  content: '';
  position: absolute;
  width: 23px;
  margin: 0px -26px;
  height: 20px;
  background-image: url(../../assets/img/llms/images-Logo.png);
  background-size: cover;
}




.dark-mode .shine-text {
  background: linear-gradient(90deg, #ffffff85 0%, rgb(255 255 255 / 80%) 50%, #ffffff70 100%);
  background-clip: text;
}

.shine-text-long {
  animation-duration: 20s !important;
}

.shine-text {
  display: inline-block;
  position: relative;
  color: #000;
  background: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 80%) 50%, transparent 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-text 5s linear;
}

.refresh_vid {
  color: white;
  margin-top: 20px;
  padding: 10px 20px;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid white;
  cursor: pointer;
  width: fit-content;
  margin: 20px auto;
}

@keyframes shine-text {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}




.end_screen_feedback.rtl {
  text-align: right;
}

.end_screen_feedback.ltr {
  text-align: left;
}

.end_screen_grade {
  /* font-size: 1.3rem; */
  font-weight: 800;
}


#bot_end_screen.hidden-end-screen {
  opacity: 0;
  display: none;
  z-index: -2;
}

#bot_end_screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 60px;
  height: 100%;
  /* height: fit-content; */
  border-radius: 20px;
  overflow: auto;
  background: var(--slice-theme-bg-color);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  text-align: start;
}



.chat-bot-li-chat pre {
  position: relative;
  direction: ltr;
  text-align: left;
  background: #1e1e1e;
  padding: 10px;
  border-radius: 8px;
}

.chat-bot-li-chat pre code {
  color: white
}

.fr-view pre {
  white-space: pre-wrap;
}

/* BOT EXPORT */

.chat-footer.chat-footer-conversation {
  width: 400px;
  /* position: fixed; */
  position: sticky;
  border-radius: 0px 0px 25px 25px;
  /* bottom: 55px; */
  bottom: -8px;
  color: #202020;
  width: 100%;
  /* left: 50%; */
  /* transform: translate(-50%, 0); */

}

/* .agent_component .chat-footer.chat-footer-conversation {
  position: initial !important;
} */

.chat-footer.chat-footer-conversation textarea {

  width: 100%;
  font-size: 15px;
  padding: 14px 40px 14px 40px;
  background: #ffffff;
  border: 1px solid #00000012;
  border-radius: 10px;
  resize: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)
}



.chat-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  align-content: center;
  /* padding: 15px 10px; */
  padding: 15px;
}



.rtl .chat-footer-conversation textarea {
  direction: rtl;
  text-align: right;
  padding: 10px 10px 10px 43px;

}


.rtl .chat-footer-conversation .send-to-chat {
  left: 0px;
  right: auto;
  transform: scaleX(-1);
}

.send-to-chat {
  position: absolute;
  right: 0px;
  top: 0;
  padding-right: 15px;
  font-size: 20px;
  padding-top: 14px;
  color: rgba(0, 0, 0, 0.335);
  border: 0;
  background: transparent;
  cursor: pointer;
}


.send-to-chat:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-bot-li-chat:last-child {
  padding-bottom: 70px;
}

.conversation-img {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 15px 5px 0px 5px;
  -o-object-fit: cover;
  object-fit: cover;
}

.chat-bot-li-chat {
  color: white;
  display: flex;
  background: #f5f5f5;
  background: transparent;
  overflow-x: auto;
  padding: 0 3%;
}


.bot-response-bubble {
  padding: 10px;
  max-width: 87%;
  width: auto;
  display: flex;
  margin: 10px;
  border-radius: 10px;
  color: #202020;
  border-radius: 0px;
  white-space: break-spaces;
  max-width: 550px;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  flex-direction: column;
  font-size: 14px;
  max-width: calc(100% - 60px);
}


.copy-button-ai {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 0;
  font-size: 12px;
  font-family: var(--slice-font-primary);
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 4px 8px;
  background: rgb(79, 77, 77);
  border-radius: 5px;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
}

.ansCheck2,
.ansCheck2 p {
  color: var(--slice-theme-bg-color) !important;
  background: var(--slice-theme-text-color);
}

.videoData .ansCheck2 {
  margin: 0 28px;
}

strong * {
  font-weight: bold !important;
}

.template-container h1,
.template-container h2,
.template-container h3,
.template-container h4 {
  margin: 0;
}

.ansCheck2 span {
  min-width: 20px;
}

.cta2 {
  min-width: 40px;
}

body article ul,
body article ol,
body article ul li,
body article ol li {
  list-style-position: inside !important;
}

/* body article ul,
body article ol {
  padding: 0 15px;
} */

body:not(.exported-slice) .editable_text:hover {
  background: #ffffff5c;
  padding: 0 10px;
  border-radius: 8px;
  transition: all 0.2s;
}

html body article .opening_screen_container .fr-wrapper p,
html body article .opening_screen_container span.header-author p {
  color: inherit;
  font-size: inherit;
  text-align: inherit;
}

span.header-author {
  font-size: var(--slice-theme-p-fontsize);
  color: white;
}

/* body.direction_ltr article ul,
body.direction_ltr article ol {
  margin-left: 10px;
}

body.direction_rtl article ul,
body.direction_rtl article ol {
  margin-right: 10px;
} */

.chapter_btn_text p {
  text-align: center;
  margin: 0;
  padding: 4px 0px;
}

.grid_component .grid_theme {
  max-width: 100%;
}


.direction_rtl .ai-prompt-component {
  transform: translateX(-60%);
}








/* PROMPT */
.white-mode .ai-prompt-component input[type="range"] {
  color: #777777;
  --track-color: rgb(0 0 0 / 20%);
}

.white-mode .ai-prompt-component .vendor-icon {
  filter: invert(1);
}

.white-mode .ai-prompt-component {
  background: rgba(255, 255, 255, .8);
}

.white-mode .ai-prompt-component .prompt-textarea {
  color: #000;
}

/* body .ai-prompt-component .toolbar-btn {
  background: hsl(0deg 0% 0% / 6%);
  color: #2d2d2d;
} */



.white-mode .ai-prompt-component .toolbar-btn.ring-offset-background {
  color: rgb(3 3 3 / 40%);
  background: hsl(0deg 0% 0% / 2%);
}

.white-mode .ai-prompt-component .toolbar-btn.active-btn {
  color: white !important;
  background: black !important;
}


/* .agent_component .ai-prompt-component  .toolbar-btn.active-btn ,
.white-mode .ai-prompt-component .toolbar-btn.active-btn {
  color: white;
  background: black;
} */

.ai-prompt-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  width: 100%;
  max-width: 520px;
  padding: .5rem;
  box-sizing: border-box;
  background: rgba(37, 37, 37, .8);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-radius: 24px;
  position: fixed;
  z-index: 9;

  left: 50%;
  max-width: 650px;
  transform: translateX(-40%);
  bottom: 10px;
  bottom: 60px;
}

.ul-prompt-images {
  margin: 0;
}

.ul-prompt-images li {
  position: relative;
}

.ul-prompt-images img {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  object-fit: cover;
}

.ul-prompt-images button:hover {
  opacity: 1;
}

.ul-prompt-images button {
  background: #00000094;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0;
}



.textarea-container {
  width: 100%;
  box-sizing: border-box;
}

.prompt-textarea {
  width: 100%;
  font-size: 16px;
  line-height: 1.4;
  padding: 10px;
  border: none;
  resize: none;
  outline: none;
  background: none;
  /* Transparent background for blur */
  color: #fff;
  text-align: start;
  font-size: 0.99rem;
  line-height: 1.25rem;
}


.prompt-textarea::placeholder {
  color: #aaa;
  /* Placeholder text color */
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}


.toolbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease; */
}

.toolbar-btn.ring-offset-background {
  background: hsl(240 10% 3.9%);
  color: rgb(255 255 255 / 40%);
}

.toolbar-btn.circle:disabled {
  cursor: inherit;
}


.toolbar-btn.circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .06);
  /* Subtle circle background */
}

.white-mode .toolbar-btn.circle {
  background: hsla(0, 0%, 100%, .30);
}

.toolbar-btn.circle:hover {
  background: hsla(0, 0%, 100%, .15);
  /* Highlight on hover */
}

.toolbar-btn.active-btn {
  color: black !important;
  background: white !important;
}

.toolbar-btn.active-btn:hover {
  background: rgba(255, 255, 255, 0.8);
}

.toolbar-btn:focus {
  outline: none;
}

@media (max-width: 600px) {
  .prompt-textarea {
    font-size: 14px;
  }

  .toolbar-btn {
    font-size: 18px;
  }
}


.dark-mode .toolbar-btn.button-txt {
  color: white;
}

.toolbar-btn.button-txt {
  /* width: 90px; */
  border-radius: 9999px;
  display: flex;
  justify-content: space-evenly;
  color: #000;
  width: max-content;
  /* padding: 0 12px; */
  gap: 5px;
  padding: 0 9px;
}

.button-txt span {
  font-size: 0.99rem;
  font-weight: 500;
}



/* POPUP */
.popover-media {
  position: absolute;
  background: rgba(37, 37, 37, 0.9);
  border-radius: 8px;
  padding: 1rem;
  backdrop-filter: blur(41px);
  color: #fff;
  z-index: 11;
  width: -moz-max-content;
  width: max-content;
  font-size: 14px;
  bottom: 45px;
  width: 310px;
}


.popover-header-media {
  font-size: 14px;
  /* font-weight: bold; */
  margin-bottom: 12px;
  opacity: 0.6;
  font-weight: 500;
}

.popover-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 40vh;
  overflow: auto;
}

.popover-list li .pro-plan-chip {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px;
  background: #000000bd;
}

.popover-list li .pro-plan-chip button {
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border: 0;
  color: white;
  background: var(--slice-main-color);
  border-radius: 8px;
  padding: 8px;
}

.popover-list li {
  display: flex;
  align-items: center;
  padding: 10px 3px;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
}

.popover-list li.model-list {
  justify-content: space-between;
}

.popover-list li.model-list span {
  background: #00000040;
  padding: 5px 9px;
  border-radius: 10px;
  text-transform: capitalize;
}

.vendor-icon {
  height: 25px;
  object-fit: cover;
  min-width: 65px;
}


.model-icon {
  width: 25px;
  height: 25px;
  border-radius: 10px;
  object-fit: cover;
}

.popover-list li:last-child {
  margin-bottom: 0;
}

.popover-list li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}


.popover-list-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.popover-list .selected {
  background: rgba(255, 255, 255, 0.1);
}



.popover-block-ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: center;
  gap: 5px;
}

.popover-block-ul li .comp_cover_img {
  height: 80px;
  border-radius: 7px;
}

.popover-block-ul li {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
  cursor: pointer;
  padding: 3px;
  border-radius: 7px;
  position: relative;
  font-family: var(--slice-font-primary);

}

.popover-block-ul li:hover {
  background: var(--slice-theme-block-bg-color-second);
}



.popover-block-ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: center;
  gap: 5px;
}

.popover-block-ul li .comp_cover_img {
  height: 80px;
  border-radius: 7px;
}

.popover-block-ul li {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 5px;
  cursor: pointer;
  padding: 3px;
  border-radius: 7px;
  position: relative;
  font-family: var(--slice-font-primary);

}



.popover-block-ul li p {
  font-size: 14px;
  font-family: var(--slice-font-primary);
}


/* media popover */
.media-popover .ant-popover-inner-content {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  color: #fff;
  font-size: 14px;
  min-width: 200px;
}


.media-popover .ant-popover-inner {
  background: #00000087;
  background: #000000ed;
  /* backdrop-filter: blur(41px); */
  border-radius: 12px;
}

.media-popover .ant-popover-title,
.media-popover .ant-popover-arrow {
  display: none
}







.block-popover .ant-popover-inner-content {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  color: #fff;
  font-size: 14px;
  min-width: 200px;
}



.block-popover .ant-popover-inner-content {
  max-height: 45vh;
  overflow: auto;
  justify-content: flex-start;
  color: var(--slice-theme-text-color);
  margin-bottom: -8px;

}



.block-popover .ant-popover-inner {
  background-color: var(--slice-theme-bg-color) !important;
  /* backdrop-filter: blur(41px); */
  /* border-radius: 12px 12px 2px 2px; */
  padding: 10px;
  border-radius: 10px;
  min-width: 300px;
}

.block-popover .ant-popover-title,
.block-popover .ant-popover-arrow {
  display: none
}






/* END SCREEN */




.end_screen_header_section {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}


.end_screen h3 {
  font-size: 1.3rem;
  font-weight: bold !important;
  opacity: 0.7;
}

.end_screen_header p {
  text-align: start;
}

.end_screen_grade {
  /* font-size: 4rem; */

}

.end_screen_grade p {
  /* font-size: 4rem !important; */
}

.end_screen_header {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 100%;
}


.end_screen_feedback * {
  font-size: 1.1rem;
}

.end_screen_feedback {
  max-height: 40vh;
  overflow: auto;
}


.dark-mode #bot_end_screen {
  background: #000000;
  color: white;
}

.dark-mode #bot_end_screen * {
  color: white;
}





.cards-popover .model-icon {
  width: 100%;
  height: 100%;
  max-width: 250px !important;
  aspect-ratio: 1;
}



.cards-popover .model-list {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}



.cards-popover .model-down-text {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: -35px;
  padding: 0 3px;
}


body.dark-mode .slice_chat_contain {
  background: var(--slice-bg-dark) !important;
}


@media only screen and (max-width: 734px) {
  body.dark-mode ai-bot-add-edit {
    background: black;
  }

  .grid_item {
    width: 100% !important;
  }


}



.template-container table td,
.template-container table th {
  border: 1px solid #ddd;
}

.template-container .rating_container td,
.template-container .rating_container th,
.rating td,
.rating th {
  border: 0 !important;
}

.chat-content,
.chat-content ol,
.chat-content ul,
.chat-content li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.chat-content table {
  width: 100%;
}





.no_menu .endChapter,
.no_menu .prevChapter {
  display: none;
}



.side_arrow_menu .endChapter,
.side_arrow_menu .prevChapter {
  position: fixed;
  bottom: 10px;
  width: 70px;
  right: 20px;
  z-index: 999;
  height: 70px;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0;
  rotate: -90deg;
  overflow: hidden;
}

.side_arrow_menu .prevChapter {
  right: unset;
  left: 20px;
  rotate: 270deg;
}

.side_arrow_menu .endChapter .col-lg-9,
.side_arrow_menu .prevChapter .col-lg-9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;

}

.side_arrow_menu .endChapter p,
.side_arrow_menu .endChapter h3,
.side_arrow_menu .prevChapter p,
.side_arrow_menu .prevChapter h3 {
  display: none;
}

.side_arrow_menu .endChapter:hover svg,
.side_arrow_menu .prevChapter:hover svg {
  animation-iteration-count: infinite;
}

.side_arrow_menu .endChapter svg,
.side_arrow_menu .prevChapter svg {
  animation-iteration-count: unset;
}












/* BLOCK CLASS */

.flex-direction-row_to_grid_component .grid_component {
  flex-direction: row !important;
}

.flex-direction-row-reverse_to_grid_component .grid_component {
  flex-direction: row-reverse !important;
}

.flex-direction-column_to_grid_component .grid_component {
  flex-direction: column !important;
}

.flex-direction-column_to_grid_component .grid_component .grid_item,
.flex-direction-column-reverse_to_grid_component .grid_component .grid_item {
  width: 100% !important;
}


.flex-direction-column-reverse_to_grid_component .grid_component {
  flex-direction: column-reverse !important;
}



.prompt_starters {
  display: flex;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
  align-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 50vw;
  display: flex;
  gap: 15px;
  margin: 0px 0px;
  width: 573px;
  padding: 0% 5px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  align-content: center;
  flex-wrap: wrap;
  margin-bottom: -10px;
  margin-top: 25px;

}

.agent_component .button-txt,
.agent_component .send_btn {
  color: var(--slice-theme-text-color) !important;
}

.agent_component .prompt-textarea {
  color: var(--slice-theme-text-color) !important;
}

.agent_component .prompt_starter_button {
  color: initial !important;
}



.prompt_starters button {
  min-width: 130px;
  cursor: pointer;
  display: inline;
  width: 160px;
  min-height: 60px;
  opacity: 0.7;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 0;
  border: 1px solid #bebebe;
  background: rgb(241, 241, 241);
  border-radius: 5px;
  border-color: rgba(190, 190, 190, 0.16);
  max-width: 200px;
}

.prompt_starters button:hover {
  opacity: 1;
}

body.direction_rtl .buy_more_card {
  margin-right: -330px;
}

body.direction_ltr .buy_more_card {
  margin-left: -330px;
}

.katex-display {
  direction: ltr;
}











/**
   * ==============================================
   * Dot Flashing
   * ==============================================
   */
.dot-flashing {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #5d5d5d;
  color: #5d5d5d;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
  margin: 0px 15px;
}

.dot-flashing::before,
.dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-flashing::before {
  left: -12px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #5d5d5d;
  color: #5d5d5d;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}

.dot-flashing::after {
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #5d5d5d;
  color: #5d5d5d;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: #5d5d5d;
  }

  50%,
  100% {
    background-color: rgb(0 0 0 / 20%);
  }
}











.dark-mode .tool-search-block {
  background: #1d1d1d;
  border: 1px solid #ffffff0d;
}

.tool-search-block .search-favicon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  top: 10px;
  position: absolute;
  left: 10px;
}

.tool-search-block {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  color: inherit;
  background: #ececec;
  margin: 0;
  padding: 0px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #0000000d;
  min-width: 250px;
  width: 250px;
  position: relative;
}

.chat-content .llm-search-url {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start;
  width: 100%;
  overflow: auto;
  gap: 15px;
  padding: 10px 0;
  margin-bottom: 10px;
}


.tool-search-block img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tool-search-block:hover {
  color: #40a9ff;
}

.tool-search-block:hover span {
  opacity: 0.7;
}

.tool-search-block span {
  padding: 6px;

}



.alert-box {
  background-color: #f9d9d9;
  color: #6e1e1e;
  padding: 7px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  text-align: start;
}

.alert-icon {
  border-radius: 50%;
  width: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alert-text {
  line-height: 1.4;
}


.katex-display {
  display: inline-block;
}


/****************************************** MEDIA EMPTY  ******************************************/


.media-empty-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* margin: 1.5rem auto 0 auto; */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  color: var(--slice-theme-text-color);
  /* background: #fafafa; */
  background: var(--slice-theme-block-bg-color) !important;
  border-radius: var(--slice-theme-border-radius);
  outline: 1px dashed var(--slice-theme-block-bg-color) !important;
  cursor: pointer;
  overflow: hidden;
}

.float-icon {
  font-size: 15px;
  color: white;
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hsla(0, 0%, 100%, .16);
  padding: 10px;
  border-radius: 50%;
  border: 1.4px solid hsl(0deg 0% 100% / 9%);
  backdrop-filter: blur(50px);
}

.title-box {
  /* margin: 1.5rem 0; */
  max-width: 500px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.image-stack {
  margin-top: 1.5rem;
  position: relative;
  height: 7rem;
  width: 5rem;
}

.image-stack .card {
  position: absolute;
  height: 7rem;
  width: 5rem;
  border-radius: 1rem;
  border: 4px solid white;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  transition: transform 0.5s ease-out;
  padding: 0;
}

.image-stack .card img,
.image-stack .card video {
  height: 100%;
  width: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  transition: opacity 0.3s;
}

@keyframes cardBounce {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  5% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  }

  95% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.image-stack .card.one {
  --tx: -3.5rem;
  --ty: -0.75rem;
  --rot: -12deg;
  animation: cardBounce 10s ease-in-out infinite;
}

.image-stack .card.two {
  --tx: 4rem;
  --ty: -0.5rem;
  --rot: 12deg;
  animation: cardBounce 10s ease-in-out infinite;
}

/*   
.image-stack .card.one {
  transform: translate(-3.5rem, -0.75rem) rotate(-12deg);
}

.image-stack .card.two {
  transform: translate(4rem, -0.5rem) rotate(12deg);
}
 */
.image-stack .card.three {
  transform: none;
}

h1 {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 1rem;
}

.description {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.6;
}

.train-button {
  padding: 0.8rem 2rem;
  font-weight: 500;
  /* color: var(--slice-theme-bg-color);
  background-color: var(--slice-theme-text-color); */
  background-color: var(--slice-theme-bg-color);
  color: var(--slice-theme-text-color);
  border-radius: var(--slice-theme-border-radius);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, transform 0.15s ease-out;
  border: none;
}

.train-button:active {
  transform: scale(0.98);
}

.train-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}


.hover-overlay {
  border-radius: var(--slice-theme-border-radius);
  overflow: hidden;
  z-index: 0;
}

.media-empty-container:hover .hover-overlay {
  opacity: 0.3;
}

/************************* END MEDIA EMPTY  *************************/

app-block-media {
  width: 100%;
}

.ltr p {
  direction: ltr !important;
  text-align: left !important;
}

.rtl p {
  direction: rtl !important;
  text-align: right !important;
}





.gradient-stroke-box {
  padding: 30px;
  border-radius: 20px;
  background: rgba(128, 128, 128, 0.3);
  backdrop-filter: blur(100px);
  position: relative;
}

.gradient-stroke-box::after {
  content: "";
  position: absolute;
  inset: 0px;
  /* Stroke thickness */
  border-radius: 22px;
  background: linear-gradient(160deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0) 41%,
      rgba(255, 255, 255, 0) 57%,
      rgba(255, 255, 255, 0.1) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  padding: 1.4px;
  z-index: 0;
}




.slice-card.fade-blur-card .slice-card-content {
  background: transparent;
}

.slice-card.fade-blur-card .slice-card-title {
  z-index: 1;
  text-shadow: none;
}


.fade-blur-overlay {
  position: absolute;
  /* or fixed, depending on use */
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100%;

  backdrop-filter: blur(50px) brightness(0.8);
  z-index: 0;
  border-radius: 8px;
  /* Gradient mask: blurred bottom → clear top */
  mask-image: linear-gradient(0deg, #000 20%, transparent 60%);
}

.glossy-box {
  background: rgba(255, 255, 255, 0.16);
  border: 1.4px solid hsl(0deg 0% 100% / 9%);
  backdrop-filter: blur(50px);
  background-blend-mode: luminosity;
}



/* .direction_rtl .new-knowledge {
  left: 20px !important;
  right: auto !important;
} */

.direction_rtl .top-left-menu {
  left: auto !important;
  right: 20px !important;
}

.direction_rtl .top-right-menu {
  left: 20px !important;
  right: auto !important;
}

.direction_rtl .home-side-menu app-menu-side .slice-sidemenu {
  background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 63%) 100%) !important;
}

.panel-collapse.collapse {
  visibility: visible !important;
}

.cdk-drag-handle {
  cursor: grab;
  padding: 4px;
}

.free-new-text * {
  font-size: inherit !important;
}

.quote-img-container {
  border-radius: 50%;
}

.rating_component table,
.rating_component tbody,
.rating_component tr,
.rating_component td {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ratingText p {
  text-align: center;
}









.chapter_ai_list {
  position: fixed;
  bottom: 10px;
  z-index: 9999999999999;
  background: #00000047;
  /* left: 0;
    left: 10px; */
  left: 50%;
  color: white;
  padding: 20px;
  border-radius: 20px;
  transform: translateX(-50%) !important;
  box-shadow: 2px 2px 12px #00000094;
}

body.direction_rtl .memory .ti-trash {
  left: 10px;
  right: auto;
}

body.direction_rtl .create_ai_container svg.icon-tabler-arrow-right-dashed {
  transform: rotate(180deg);
}