label.error {
  color: #ea3d3d !important;
  font-size: 14px;
  display: inline;
}

.card-content label.error {
  margin-left: 10px;
}

.flash_msg_body {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(30, 30, 30, 0.9);
  z-index: 9999;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash_message {
  padding: 15px;
  border-radius: 10px;
  max-width: max-content;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  z-index: 9999999;
  justify-content: center;
}

.flash_message span.icon {
  width: 25px;
  display: inline-block;
  margin-right: 10px;
}

.flash_message .msg {
  color: #fff;
  text-align: left;
  font-size: 15px;
}

.flash_message.warning {
  background: #ffd029;
}

.flash_message.error {
  background: #fc0014;
  font-size: 14px;
}

.flash_message.success {
  background: #008972;
}

.text-danger {
  color: #fc0014;
}

.padding-bottom--24 {
  padding-bottom: 24px;
}

.padding-horizontal--48 {
  padding: 48px;
}

.padding-bottom--15 {
  padding-bottom: 15px;
}

.flex-justifyContent--center {
  -ms-flex-pack: center;
  justify-content: center;
}

.field input {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.field-checkbox input {
  width: 20px;
  height: 15px;
  margin-right: 5px;
  box-shadow: unset;
  min-height: unset;
}

.field-checkbox label {
  display: flex;
  align-items: center;
  margin: 0;
}

/*---- roles table ----*/

.table-roles table tr td:last-child {
  text-align: center;
}

.table-roles table tr:not(:last-of-type) td {
  border-bottom: 1px solid #f3f3f9;
}

.table-roles .drop-parent {
  min-width: 30px;
  display: inline-block;
  cursor: pointer;
}

.role-popup {
  min-width: 550px;
}

.role-popup .input_box {
  margin-bottom: 0;
  padding: 20px 0;
  border-bottom: 1px solid #f3f3f9;
}

.role-popup .role-check-childs {
  margin: 20px 0 20px 35px;
  display: flex;
}

.role-check-grand-childs {
  margin: 20px 0 20px 35px;
  display: flex;
  flex-direction: column;
}

.role-check-grand-childs > li {
  margin-bottom: 20px;
}

.role-check-grand-childs .role-check-childs {
  margin: 20px 0 0 35px;
}

.role-check-childs label {
  margin-right: 20px;
}

.role-popup h6 {
  font-size: 16px;
  color: var(--deep-black);
  font-weight: 500;
}

.role-popup .input_box {
  margin-bottom: 0;
  padding: 15px 0;
  border-bottom: 1px solid #f3f3f9;
}

.role-popup .role-check-childs {
  margin: 15px 0 0 35px;
  display: flex;
}

.role-check-grand-childs {
  margin: 15px 0 0 35px;
  display: flex;
  flex-direction: column;
}

.role-check-grand-childs > li {
  margin-bottom: 15px;
}

.role-check-grand-childs > li:last-child {
  margin-bottom: 0;
}

.role-check-grand-childs .role-check-childs {
  margin: 15px 0 0 35px;
  flex-wrap: wrap;
}

.role-check-grand-childs .role-check-childs li {
}

.role-check-childs label {
  margin-right: 15px;
}

.role-popup h6 {
  font-size: 16px;
  color: var(--deep-black);
  font-weight: 500;
}

/*auto complete*/

.typeahead {
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 8px 12px;
  max-width: 300px;
  min-width: 290px;
  background: rgba(66, 52, 52, 0.5);
  color: #fff;
}

.tt-menu {
  width: 300px;
}

ul.typeahead {
  margin: 0px;
  padding: 10px 0px;
}

ul.typeahead.dropdown-menu li a {
  padding: 10px !important;
  border-bottom: #ccc 1px solid;
  color: #fff;
}

ul.typeahead.dropdown-menu li:last-child a {
  border-bottom: 0px !important;
}

.bgcolor {
  max-width: 550px;
  min-width: 290px;
  max-height: 340px;
  background: url("world-contries.jpg") no-repeat center center;
  padding: 100px 10px 130px;
  border-radius: 4px;
  text-align: center;
  margin: 10px;
}

.demo-label {
  font-size: 1.5em;
  color: #686868;
  font-weight: 500;
  color: #fff;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  text-decoration: none;
  background-color: #1f3f41;
  outline: 0;
}

/* Card boxes */

.card {
  border-radius: 10px;
}

.c-details span {
  font-weight: 300;
  font-size: 13px;
}

.item-icon {
  width: 50px;
  height: 50px;
  background-color: #eee;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
}

.badge span {
  background-color: #fffbec;
  width: 60px;
  height: 25px;
  padding-bottom: 3px;
  border-radius: 5px;
  display: flex;
  color: #fed85d;
  justify-content: center;
  align-items: center;
}

.progress {
  height: 10px;
  border-radius: 10px;
}

.progress div {
  background-color: red;
}

.text1 {
  font-size: 14px;
  font-weight: 600;
}

.text2 {
  color: #a5aec0;
}

/* ------- Checkbox ------- */

.checkbox-wrapper-30 .checkbox {
  --bg: #fff;
  --brdr: #d1d6ee;
  --brdr-actv: #1e2235;
  --brdr-hovr: #bbc1e1;
  --dur: calc((var(--size, 2) / 2) * 0.6s);
  display: inline-block;
  width: calc(var(--size, 1) * 22px);
  position: relative;
}

.checkbox-wrapper-30 .checkbox:after {
  content: "";
  width: 100%;
  padding-top: 100%;
  display: block;
}

.checkbox-wrapper-30 .checkbox > * {
  position: absolute;
}

.checkbox-wrapper-30 .checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  background-color: var(--bg);
  border-radius: calc(var(--size, 1) * 4px);
  border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
  color: var(--newBrdrClr, var(--brdr));
  outline: none;
  margin: 0;
  padding: 0;
  transition: all calc(var(--dur) / 3) linear;
}

.checkbox-wrapper-30 .checkbox input:hover,
.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdr: calc(var(--size, 1) * 2);
}

.checkbox-wrapper-30 .checkbox input:hover {
  --newBrdrClr: var(--brdr-hovr);
}

.checkbox-wrapper-30 .checkbox input:checked {
  --newBrdrClr: var(--brdr-actv);
  transition-delay: calc(var(--dur) / 1.3);
}

.checkbox-wrapper-30 .checkbox input:checked + svg {
  --dashArray: 16 93;
  --dashOffset: 109;
}

.checkbox-wrapper-30 .checkbox svg {
  fill: none;
  left: 0;
  pointer-events: none;
  stroke: var(--stroke, var(--border-active));
  stroke-dasharray: var(--dashArray, 93);
  stroke-dashoffset: var(--dashOffset, 94);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  top: 0;
  transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
}

.checkbox-wrapper-30 .checkbox svg,
.checkbox-wrapper-30 .checkbox input {
  display: block;
  height: 100%;
  width: 100%;
}

/*  ------- Checkbox ENDS -------*/

/*  ------- CKEWIDGET EDITOR  -------*/

.django-ckeditor-widget {
  width: 100%;
  height: 100% !important;
}

/*  ------- CKEWIDGET EDITOR ENDS -------*/

.checkbox-div {
  margin-bottom: 10px;
}

.border-info {
  border-color: #d8d8d8 !important;
}

.right-align-div {
  padding: 46px 0px 0px 0px;
}

.more-essential-btn {
  width: 100%;
}

.view-resource-btn {
  background-color: rgb(84, 105, 212);
  color: white;
  width: 100%;
}

.lesson-count {
  background: rgba(50, 147, 111, 0.16) !important;
  color: #519c66;
  white-space: nowrap;
  border-radius: 10px;
  padding: 7px;
}

.full-btn {
  width: 100%;
}

.plan-cost {
  justify-content: center;
}

.applied-license {
  margin-top: 10px;
}

.license-icon {
  width: 20px;
}

.addon-remove-btn {
  width: 20px;
}

.data-card-boxes {
  padding-top: 10px;
}

.box-head {
  margin: 10px;
}

.field select {
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  border-radius: 4px;
  outline-color: rgb(84 105 212 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px,
    rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px,
    rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px,
    rgb(0 0 0 / 0%) 0px 0px 0px 0px;
}

.margin {
  margin-top: 10px;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 70px;
}

.SumoSelect {
  width: 100% !important;
}

.space-between {
  justify-content: space-between !important;
}

/* TOGGLE BUTTON */

.toggle-off {
  background-color: #23aeff;
  color: white;
}

.toggle-on {
  background-color: #1f3f41;
  color: white;
}

.annually-monthly {
  text-align: center;
  padding-bottom: 10px;
}

.plan-desc {
  padding-left: 10px;
}

.subject-addon-div:empty {
  content: "content added to empty div";
}

.license-no-text {
  padding: 6px 2px 0px 0px;
}

.thank-you-text {
  width: 100%;
  border: antiquewhite;
  border-radius: 10px;
  height: 200px;
  text-align: center;
  font-size: 50px;
}

.thank-you-sec {
  text-align: center;
  height: 200px;
}

.order-detail-tab {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 10px;
}

.order-detail-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-weight: bold;
}

.order-detail-content {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  border-bottom: 1px solid #dcdcdc;
}

.order-detail-row {
  text-align: center;
  /* display: grid;
        grid-template-columns: repeat(4, 1fr); */
}

.order-detail-column {
  background-color: #f0f1f8;
  padding: 10px;
}

.purchased-license {
  border: 2px solid #f2f2f2;
  padding: 10px 0px 10px 10px;
  border-radius: 10px 10px;
  margin-bottom: 10px;
  background: #f2f2f2;
}

.order-item {
  padding: 10px 0px 10px 10px;
  margin-bottom: 10px;
}

.status-active {
  background: #d1e6d2;
  padding: 5px 5px 5px 5px;
  border-radius: 10px 10px;
  color: #7abb7d;
}

/* license key apply button */

.license-btn-sec {
  position: relative;
}

.apply-license-btn {
  position: absolute;
  top: 0;
  border-radius: 5px;
  right: 6px;
  z-index: 2;
  height: 38px;
  border: none;
  top: 13px;
  cursor: pointer;
  color: white;
  background-color: #8a8a8a;
  transform: translateX(2px);
}

.validation-error-p {
  font-size: 15px;
}

#signupContactDetails {
  display: none;
}

.signup-label {
  display: none;
}

.item-center {
  align-items: center !important;
}

.no-data-found {
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 250px);
}

/* .masters .table-top-right>div:nth-child(2) .SumoSelect {
    width: 220px !important;
} */

.gpthistory .table-top-right > div:nth-child(1) .SumoSelect {
  width: 220px !important;
}

/* .activitylog .table-top-right>div:nth-child(2) .SumoSelect {
    width: 220px !important;
}  */

.table-top-right .SumoSelect {
  width: 150px !important;
}

/* 
.add-country-masters .table-top-right>div:nth-child(1) .SumoSelect,
.add-country-masters .table-top-right>div:nth-child(2) .SumoSelect {
    width: 220px !important;
} */

/* .subtopicmaster .table-top-right>div:nth-child(2) .SumoSelect,
.subtopicmaster .table-top-right>div:nth-child(3) .SumoSelect {
    width: 220px !important;
} */

.add-curriculum-masters .table-top-right > div:nth-child(2) .SumoSelect,
.add-subject-masters .table-top-right > div:nth-child(2) .SumoSelect,
.add-course-masters .table-top-right > div:nth-child(2) .SumoSelect {
  width: 220px !important;
}

.table-top-right .SumoSelect.open .search-txt {
  border-radius: 4px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  height: 100%;
}

.remove-license-key {
  cursor: pointer;
}

.edit-prompt-form .field label {
  text-transform: uppercase;
  margin-left: 2%;
}

#plan-buy-btn {
  width: 100% !important;
}

.plan-list li {
  line-height: 20px !important;
}

.violet {
  font-weight: 700;
  color: #6878b6;
}

.popup-div .card-inside {
  padding-top: 10px;
  padding-bottom: 10px;
}

.subject-addons-list > li .subscription-expiry-date {
  font-size: 13px;
}

.select-arrow {
  position: relative;
}

.select-drop {
  display: none;
  position: absolute;
  top: 15px;
  right: 24px;
}

.select-arrow .select-drop {
  display: block;
  cursor: pointer;
}

/* ---------- dot puls violet */

.dot-pulse-violet {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse-violet 1.5s infinite linear;
  animation-delay: 0.25s;
}

.dot-pulse-violet::before,
.dot-pulse-violet::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.dot-pulse-violet::before {
  box-shadow: 9984px 0 0 -5px;
  animation: dot-pulse-violet-before 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulse-violet::after {
  box-shadow: 10014px 0 0 -5px;
  animation: dot-pulse-violet-after 1.5s infinite linear;
  animation-delay: 0.5s;
}

.violet-btn .dot-pulse-violet {
  background-color: #9880ff;
  color: #9880ff;
}

.violet-btn .dot-pulse-violet::before,
.white-btn .dot-pulse-violet::after {
  background-color: #9880ff;
  color: #9880ff;
}

.white-btn .dot-pulse-violet {
  background-color: #9880ff;
  color: #9880ff;
}

.white-btn .dot-pulse-violet::before,
.white-btn .dot-pulse-violet::after {
  background-color: #9880ff;
  color: #9880ff;
}

.magic-btn .dot-pulse-violet {
  color: #9880ff;
}

@keyframes dot-pulse-violet-before {
  0% {
    box-shadow: 9984px 0 0 -5px;
  }

  30% {
    box-shadow: 9984px 0 0 2px;
  }

  60%,
  100% {
    box-shadow: 9984px 0 0 -5px;
  }
}

@keyframes dot-pulse-violet {
  0% {
    box-shadow: 9999px 0 0 -5px;
  }

  30% {
    box-shadow: 9999px 0 0 2px;
  }

  60%,
  100% {
    box-shadow: 9999px 0 0 -5px;
  }
}

@keyframes dot-pulse-violet-after {
  0% {
    box-shadow: 10014px 0 0 -5px;
  }

  30% {
    box-shadow: 10014px 0 0 2px;
  }

  60%,
  100% {
    box-shadow: 10014px 0 0 -5px;
  }
}

.validation-error-p {
  color: red;
}

.rm-arrow-input::-webkit-inner-spin-button,
.rm-arrow-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

@media screen and (max-width: 991px) {
  .subtopic-details {
    min-width: 250px;
  }
}

.bread-crumps a:hover {
  color: #6878b6;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  padding: 10px 10px;
  font-size: 14px;
}

.ui-menu .ui-state-active,
.ui-menu.ui-widget-content .ui-state-active {
  border: none;
  background-color: #e4e4e4;
  color: #000;
}

.ui-menu.ui-widget-content .ui-menu-item {
  border-bottom: 1px solid #f5f5f5;
}

.ui-menu.ui-widget-content .ui-state-active {
  margin: 0;
}

.ui-menu.ui-widget.ui-widget-content {
  max-height: 250px;
  overflow: auto;
  border: 1px solid #ddd;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.11);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  position: absolute !important;
  z-index: 9999999999 !important;
}

/* Track */

.ui-menu.ui-widget.ui-widget-content::-webkit-scrollbar {
  width: 5px;
}

.ui-menu.ui-widget.ui-widget-contentons::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.ui-menu.ui-widget.ui-widget-content::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

/* Handle on hover */

.ui-menu.ui-widget.ui-widget-content::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

.empty-table {
  padding-bottom: 15px;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-bg.violet {
  font-weight: 400;
  background: rgb(205 216 255);
  color: #6878b6;
}

.code-left-textarea textarea {
  color: #737373 !important;
}

.html-pop ul li {
  list-style-type: disc;
}

.featured-tools {
  min-height: auto !important;
}

.popup-two-col {
  display: flex;
  margin: 0 -8px;
}

.popup-two-col > * {
  flex-grow: 1;
  margin: 0 8px;
}

.form-feild.title .SumoSelect .CaptionCont > span {
  color: grey;
}

.country-code .SumoSelect .CaptionCont {
  background-color: #f5f5f5 !important;
}

.select-drop {
  cursor: pointer;
}

.formbg-inner .subtitle {
  text-align: left;
  color: #6878b6;
  font-weight: bold;
}

#input-plan {
  pointer-events: none;
}

.numb-license-key {
  pointer-events: auto;
}

.plan-href {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Gpt params  */

.gpt-para-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.gpt-params-submit {
  display: flex;
  justify-content: flex-end;
}

.expiry-p-tag {
  color: #ea3d3d !important;
}

.cancel-subscription {
  position: absolute;
  right: 10px;
  top: 5px;
}

.profile-sub-addon {
  position: relative;
}

.cancel-subscription img {
  width: 17px;
}

.purchase-amount-total {
  border-top: 1px solid #ebebeb;
}

.purchase-amount-total p {
  font-size: 20px;
  font-weight: 600;
}

/* Gray */

.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}

.admin-lic-gen {
  margin-top: 20px;
}

.admin-lic-gen .license-add :first-child {
  margin-top: 0;
}

.unsub-plan {
  display: flex;
  justify-content: flex-end;
}

.unsub-plan a {
  text-decoration: underline;
  color: #4c89e6;
  margin-top: 10px;
  display: inline-block;
}

.cancel-plan-sub,
.unsubscribe_item {
  color: red;
}

.subscription-cancelled {
  color: red;
  position: absolute;
  right: 10px;
  top: 5px;
  height: 18px;
  width: 18px;
}

.already-purchased-subject + .checkmark {
  background-color: #cccccc !important;
}

#is-empty-div-active-sub {
  min-height: 120px !important;
}

#subject-empty-sec-1 {
  min-height: 120px !important;
  padding: 28px 0 !important;
}

#is-empty-div-newlyadded-subs {
  min-height: 120px !important;
  padding: 28px 0 !important;
}

.register-countrycode .search-txt {
  border-radius: 0 !important;
  padding-right: 40px !important;
}

.eye_icon.safari-hidden {
  display: none !important;
}

.close-toastify {
  display: none !important;
}

.is_clickable_link {
  color: #485caa;
  text-decoration: underline;
}

.basic-form-show {
  display: block !important;
}

.tool-input-title-span {
  font-weight: 700;
}

.card-head-right {
  display: flex;
  align-items: flex-start;
}

.fav-icon {
  display: flex;
  /* justify-content: space-between; */
  cursor: pointer;
  gap: 10px;
}

.fav-icon-wrapper {
  border-radius: 8px;
  border: 1px solid #ebebeb;
  background: #fff;
  padding: 8px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

.clock-icon {
  border-radius: 8px;
  padding: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.fav-icon-img {
  z-index: 11;
  filter: none !important;
  width: 15px;
}

.tools-item:hover .fav-icon-wrapper {
  border-radius: 8px;
  background: #6878b6;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.multiple-choice {
  display: flex;
  flex-wrap: wrap;
}

.multiple-choice li {
  margin-top: 5px;
  margin-bottom: 5px;
}

.order_field {
  width: 100%;
  min-width: 90px;
}

.order_field::-webkit-outer-spin-button,
.order_field::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.ck-wrapper-inner {
  height: calc(100vh - 275px) !important;
}

.disclaimer-wrapper {
  display: flex;
  padding: 10px;
  align-items: flex-start;
  border-radius: 8px;
  background: #f8f8f8;
  justify-content: flex-start;
}

.disclaimer-wrapper span {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -6px;
}

.disclaimer-wrapper span img {
  width: 100%;
}

.disclaimer-wrapper p {
  color: #9c9c9c;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
}

.max-length {
  width: 20%;
  min-width: 80px;
  margin-right: 10px;
}

.validation-wrapper {
  width: 80%;
}

.popup-heading h5 {
  color: #555454;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.disclaimer-style {
  margin-top: 5%;
}

.show-hide {
  cursor: pointer;
}

.colapse-fade {
  display: none !important;
}

.collapse-card-top {
  border-radius: 20px !important;
}

.curriculum-linked-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.curriculum-linked-btn > p {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-right: 9px;
}

.custom_prompts {
  display: flex;
}

.custom_prompt_edit {
  width: 15px;
  height: 15px;
  display: none;
}

.custom_prompts:hover .custom_prompt_edit {
  display: block;
}

.please-enter-topic {
  background-color: #fff;
  padding: 7px 10px;
  border-radius: 5px;
  margin-top: 5px;
  min-width: 150px !important;
  width: 100%;
  max-width: 237px !important;
  border: 1px solid rgba(159, 159, 159, 0.3);
  height: 45px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
}

.please-enter-topic > input {
  width: 100%;
  height: 20px;
  background: none;
  border: none;
  outline: none;
}

.please-enter-topic-wrapper {
  display: flex;
  align-items: center;
}

.non-curriculam-additional-input {
  margin-top: 5px;
  margin-right: 5px;
}

.non-curriculam-additional-input > label {
  display: inline-flex;
  position: relative;
  margin-left: 3px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #757575;
}

.one-col-item {
  width: calc(50% - 20px);
  margin: 0 10px;
}

.add-quick-witch {
  padding-bottom: 10px;
}

.add-quick-witch .checkmark-container {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
}

.add-quick-witch > p {
  width: 513px;
  height: 57px;
  top: 1088px;
  left: 296px;
  color: #a5a1a1;
  margin-top: 15px;
  margin-left: 35px;
  width: calc(100% - 35px);
}

.report-number::-webkit-outer-spin-button,
.report-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.report-number {
  -moz-appearance: textfield;
}

.file-upload_btn_wrap {
  position: relative;
}

.file-upload_btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-upload_btn > input {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.file-upload_btn > span {
  position: absolute;
  z-index: 9;
}

.file-upload_popup {
  position: absolute;
  right: 20px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  background: #6878b6;
  border-radius: 8px;
  border: 1px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-upload_popup > span {
  position: absolute;
  z-index: 9;
}

.edit_logo-wrapper {
  width: 60px;
  height: 60px;
  min-width: 50px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.edit_logo-wrapper > img {
  width: 100%;
}

.country-code .SumoSelect .CaptionCont {
  border-radius: 10px;
  /* border-top-left-radius: 10px;
  border-bottom-left-radius: 10px; */
}

/* Country select border styling for validation */
/* #country + .CaptionCont {
  transition: border-color 0.3s ease;
} */

#country + .CaptionCont.border-highlight,
.CaptionCont.border-highlight {
  border: 3px solid #FFFF00 !important;
}

.border-highlight {
  border: 3px solid #FFFF00 !important;
}

#curriculum + .CaptionCont.border-highlight,
.CaptionCont.border-highlight {
  border: 3px solid #FFFF00 !important;
}


#course + .CaptionCont.border-highlight,
.CaptionCont.border-highlight {
  border: 3px solid #FFFF00 !important;
}

#subject + .CaptionCont.border-highlight,
.CaptionCont.border-highlight {
  border: 3px solid #FFFF00 !important;
}


/* .border-highlight {
  border: 1px solid #d2065f !important;
} */

/* Form field styling for country select */
/* .form-feild .SumoSelect .CaptionCont {
  border: 1px solid #ebebeb;
  border-radius: 10px;
  height: 52px;
  padding: 12px 15px;
  background-color: #f5f5f5;
} */

.download-icon-image.clicked {
  animation: downloadComplete 2s ease-out infinite;
}

.download-icon-image.complete {
  filter: hue-rotate(150deg);
}

.download-icon-image.clicked {
  animation: downloadComplete 2s ease-out infinite;
}

.download-icon-image.complete {
  filter: hue-rotate(150deg);
}

/* Animation to simulate continuous download */
@keyframes downloadComplete {
  0% {
    transform: translateY(0);
    /* Initial position */
    opacity: 1;
  }

  50% {
    transform: translateY(5px);
    /* Move down a bit */
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    /* Return to original position */
    opacity: 1;
  }
}

.download-button-link {
  cursor: pointer;
}

.subject-included-container::-webkit-scrollbar {
  display: none;
}

.subject-included-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.ck_generated_content h1 {
  line-height: normal !important;
}

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

.ck_generated_content .response_view {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.ck_generated_content .response_view li,
.ck_generated_content .response_view slide {
  width: 100% !important;
  text-align: left !important;
}

.ck_generated_content li,
.ck_generated_content slide {
  width: 100% !important;
  text-align: left !important;
}

.ck_generated_content.edit-workspace-reponse div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.top-icons a {
  display: flex !important;
  align-items: center !important;
}

body .main-container {
  margin: 0 !important;
  padding: 0 !important;
}

div.p_15 {
  padding: 15px !important;
}

/* --------New Css for Textarea Field--------- */

.custom_textarea_sec {
  position: relative;
  padding-right: 0 !important;
}

.custom_textarea_sec .custom_textarea {
  height: 100px;
  padding-right: 50px;
  border: 0;
  resize: none;
  overflow: auto;
}

/* Track */

.custom_textarea_sec .custom_textarea::-webkit-scrollbar {
  width: 5px;
}

.custom_textarea_sec .custom_textarea::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.custom_textarea_sec .custom_textarea::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

/* Handle on hover */

.custom_textarea_sec .custom_textarea::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

.custom_textarea_sec .custom_txtarea_btn {
  position: absolute;
  bottom: 10px;
  right: 15px;
}

.custom_textarea_container {
  align-items: flex-end !important;
}

.custom_txtarea_btn_new {
  margin-bottom: 10px;
}

@media screen and (max-width: 580px) {
  .custom_txtarea_btn_new {
    margin-bottom: 0px;
  }
}

/* share modal */
.user-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.d-none {
  display: none !important;
}

.user-modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 620px;
  min-width: 620px;
  position: relative;
}

.user-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.user-modal-header h2 {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #aaa;
}

.close-button:hover {
  color: #777;
}

.user-modal-body {
  margin-bottom: 20px;
}

.email-input-group {
  padding-bottom: 30px;
}

.search-wrapper {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* margin-bottom: 10px; */
}

.search-wrapper input[type="email"] {
  color: #b0b0b0;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  border: none;
  outline: none;
  padding: 0;
  height: 100%;
}

.search-wrapper > img {
  width: 17px;
  height: 17px;
}

.people-with-access h3 {
  color: #767676;
  text-align: left;
  font-family: "PlusJakartaSans-Medium", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.people-with-access ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.people-with-access li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 10px;
}

.people-with-access li:last-child {
  border-bottom: none;
}

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

.person-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #ddd;
}

.person-info .name {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
}

.person-info .email {
  color: #555454;
  font-size: 12px;
  font-weight: 400;
}

.access-options {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 258px;
}

.subjec-share-access {
  min-width: 0 !important;
}

.access-options select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 140px;
  opacity: 1;
}

.reshare-checkbox {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #555;
}

.reshare-checkbox input[type="checkbox"] {
  margin-right: 5px;
}

.info-icon {
  font-size: 1rem;
  color: #03080e;
  cursor: help;
}

.user-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.cancel-button {
  border-radius: 10px;
  border: 1px solid #6878b6;
  padding: 5px 30px 5px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 159px;
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  min-height: 46px;
}

/* .cancel-button:hover {
        background-color: #bbb;
      } */

.share-button {
  border-radius: 10px;
  background: #6878b6;
  border: 1px solid transparent;
  padding: 5px 30px 5px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 159px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  min-height: 46px;
}

/* .share-button:hover {
        background-color: #0056b3;
      } */

/*  --------- checkbox ----------- */

.fancy-checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 24px;
  width: 24px;
}

.fancy-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark-share {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: 2px solid #eaeef3;
  border-radius: 3px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 1px #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fancy-checkbox input:checked + .checkmark-share {
  background: #5a7fca;
  box-shadow: 0 0 0 2px #eaeef3;
  animation: pop 0.3s ease;
}

.checkmark-share::after {
  content: "";
  display: none;
  width: 12px;
  height: 6px;
  border: solid white;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.fancy-checkbox input:checked + .checkmark-share::after {
  display: block;
}

/* Animation */
@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.85);
  }

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

.custom-check-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-check-wrapper > p {
  font-size: 13px;
  font-weight: 400;
  color: #757575;
}

.check-desable {
  opacity: 0.3;
}

.share-tool-icon {
  text-decoration: underline;
  color: #6878b6;
  font-size: 13px;
  font-weight: 600;
  height: 15px;
  background-image: url(../images/share-icon.png);
  background-repeat: no-repeat;
  background-position: center;
  min-width: 20px;
  min-height: 20px;
}

.span-back-arrow-share {
  font-size: 15px;
  display: none;
  cursor: pointer;
}

.share-head-div {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* cancel modal */
.subscription-popup-header {
  display: flex;
  justify-content: flex-end;
}

.subscription-popup-header > button {
  background: none;
}

.subscription-popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 486px;
  margin: 0 auto;
}

.keep-sub-button {
  color: #6878b6;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid #6878b6;
  padding: 5px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  background: #fff;
}

.cancel-sub-button {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #6878b6;
  padding: 5px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.sub-modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 40px;
}

.sub-modal-content > h4 {
  color: #6878b6;
  font-size: 30px;
  font-weight: 700;
  margin-top: 20px;
}

.sub-modal-content > p {
  color: #767676;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-top: 15px;
  max-width: 400px;
}

.graph-generation-error {
  color: #ff0000 !important;
}

.graph-error-container {
  text-align: center;
  background: white;
  border: 1px solid #f0f0f0;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* width: 32% !important; */
}

.graph-error-icon {
  font-size: 40px;
  color: #e74c3c;
  margin-bottom: 20px;
  opacity: 21%;
}

.graph-error-title {
  font-size: 18px;
  font-weight: bold;
  color: #e9dbdb;
}

.graph-error-message {
  color: #666;
  font-size: 14px;
  margin: 10px 0 20px;
  opacity: 42%;
}

.graph-retry-icon {
  font-size: 20px;
  color: #2a6ee9;
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.81;
  transition: background-color 0.3s ease;
}

.graph-retry-icon:hover {
  color: #0058fc;
}

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

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

.graph-retry-icon.spin {
  animation: spin 1s linear infinite;
}

.purchase-again-btn-disable {
  opacity: 0.5;
}

.purchase-again-btn-disable:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.empty-table-order-history {
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-label {
  color: #008972;
}

.pulled-from-swift {
  color: #a579ff !important;
  background: none !important;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.column_space_between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profile-pic {
  position: relative;
  width: 40px;
  height: 40px;
}

.profile-pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.email-warning-icon {
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-warning-icon svg {
  width: 16px;
  height: 16px;
}

.swal-text {
  text-align: unset !important;
}

#welcome_notification a:focus {
  outline: none;
  box-shadow: none;
}

.welcome-main-circle {
  position: relative;
  width: 195px;
  height: 185px;
}

.welcome-main-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #d9c7ff 22%, #a579ff 50%, #d9c7ff 76%);
  filter: blur(40px);
  z-index: -1;
}

.mt_30 {
  margin-top: 30px;
}

.pop-body + .carousel__button {
  top: 15px !important;
  right: 15px !important;
  color: #fff !important;
  background-color: #cccccc !important;
  border-radius: 50% !important;
  width: 25px !important;
  height: 25px !important;
  font-size: 16px !important;
  padding: 5px !important;
  font-weight: 800 !important;
}

.welcome-section-span {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
}

.welcome-section-span > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-section-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: #555;
  font-size: 15px;
  line-height: 1.5;
  width: 100%;
}

.welcome-section-ul > li {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #767676;
  margin-bottom: 10px;
}

.welcome-section-ul > li:last-child {
  margin-bottom: 0;
}

.welcome-section-ul > li > a {
  color: #a579ff;
  font-weight: 800;
  text-decoration: underline;
  margin-left: 3px;
}

.welcome-section-divider {
  border: none;
  height: 1px;
  background-color: #e1d3fd;
  margin: 16px 0;
  width: 100%;
}

.welcome-section-p {
  color: #767676;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  max-width: 358px;
  line-height: 22px;
}

.welcome-section-h2 {
  color: #6878b6;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 30px;
}

.welcome-section-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang_confirm_popup_container {
  border-radius: 16px !important;
  max-width: 360px !important;
  width: 100%;
  margin: 0 auto;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
}

.lang_confirm_popup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lang_confirm_popup h2 {
  font-size: 14px;
  line-height: 16px;
  color: #6878b6;
  font-weight: 700;
}

.lang_confirm_arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
  border-right: 15px solid #fff; /* This creates a downward-pointing triangle */
  top: 12px;
  left: -13px;
}

.lang_confirm_desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lang_confirm_desc p {
  color: #434343;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
}

.lang_confirm_btns {
  display: flex;
  align-items: start;
  gap: 22px;
  margin-block: 6px;
}

.lang_confirm_btns button {
  background: none;
  border: none;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0px;
}

.lang_confirm_customise {
  color: #8b49de;
}
.token_popup_skip {
  color: #95969a;
}

.lang_confirm_default {
  color: #6878b6;
}

.token_popup_next {
  color: #95969a;
}

.langauge_popup_next {
  color: #95969a;
  position: absolute;
  right: 75px;
}

.btn-watch-video {
  color: #6878b6 !important;
}

.language-config-section-section {
  margin-bottom: 16px;
}
body.popup-active::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dimmed background */
  z-index: 999; /* below popup */
}

/* Your popup styling */
.language-confirmation-popup {
  background-color: #fff;
  position: fixed !important; /* now it will align relative to the li */
  top: 413px; /* adjust vertically */
  left: 247px; /* place it to the right of the link */
  margin-left: 10px; /* little gap */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 300px; /* set width if needed */
}

.li-language-localization {
  position: relative !important;
  z-index: 1000;
  background-color: #6878b6;
  border-radius: 8px;
}

.youtube-card-highlight {
  position: relative !important;
  z-index: 1000;
  background-color: #fff;
  border-radius: 8px;
}

.languange_localization_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dim effect */
  opacity: 1.2;
  z-index: 999; /* must be less than scroll_header's z-index */
}

.token-progress-login-popup {
  background-color: #fff;
  position: fixed !important; /* now it will align relative to the li */
  right: 99px;
  margin-left: 10px; /* little gap */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 300px; /* set width if needed */
  top: 75px;
}

.lang_confirm_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 30%;
}

.token-popup-overlay {
  background-color: #fff;
  position: fixed !important; /* now it will align relative to the li */
  top: 413px; /* adjust vertically */
  left: 247px; /* place it to the right of the link */
  margin-left: 10px; /* little gap */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 300px;
}

.token_popup_span {
  font-weight: 600;
}

.token_popup_p {
  line-height: 19px !important;
}

.youtube-link-login-popup {
  background-color: #fff;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 300px;
  position: absolute !important;
  bottom: -2%;
  right: 107%;
}

.lang_confirm_arrow_right {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 10.5px solid transparent;
  border-bottom: 15.5px solid transparent;
  border-left: 28px solid #fff;
  top: 22%;
  right: -6%;
}

.close-btn-container {
  /* display: flex;
  width: 100%;
  justify-content: flex-end; */
  position: absolute;
  top: 5%;
  right: 20px;
}

.close-btn-container button {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  outline: none;
}

.close-btn-container button > img {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

@media (max-width: 1200px) {
  .language-confirmation-popup {
    background-color: #fff;
    position: fixed !important;
    top: 465px;
    left: 100px;
    margin-left: 10px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 300px;
  }

  .lang_confirm_arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    border-left: 10.5px solid transparent;
    border-right: 15.5px solid transparent;
    border-bottom: 28px solid #fff;
    top: -17px;
    left: 50px;
  }
}

@media (max-width: 992px) {
  .youtube-link-login-popup {
    background-color: #fff;
    margin-left: 10px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 300px;
    position: absolute !important;
    bottom: -193px;
    right: 25%;
  }

  .lang_confirm_arrow_right {
    position: absolute;
    width: 15px;
    height: 15px;
    border-left: 10.5px solid transparent;
    border-right: 15.5px solid transparent;
    border-bottom: 28px solid #fff;
    top: -17px;
    left: 50px;
  }
}

@media (max-width: 768px) {
  .w_fit {
    width: 65% !important;
  }

  .position-relative {
    position: static !important;
  }
}

@media (max-width: 425px) {
  .flex_row {
    flex-direction: row !important;
  }
}

@media (max-width: 600px) {
  .welcome-notification-popup {
    min-width: unset !important;
  }
}

/* .w_fit {
    width: 60% !important;
    margin-left: 100px !important;
  }  */

.popup_active {
  position: sticky !important;
  z-index: 1000 !important;
  background: white !important;
}

.siebar_popUp {
  z-index: 99 !important;
}

.m_usage_width {
  width: 199px !important;
}

.btn-dashboard {
  background: #ebebeb;
  height: 25px;
  width: 85px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-dashboard:disabled .dashboard-btn_text {
  color: #999;
}

.dashboard-btn_text {
  color: #6878b6;
  font-size: 12px;
  font-weight: 600;
}

/* Status text styling for no-toggle template */
.status-text {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
  min-width: 60px;
}

.status-text.active-text {
  color: #28a745;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.status-text.inactive-text {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.status-text.expired-text {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
}

.status-text.available-text {
  color: #0c5460;
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
}

.btn-generate-invoice {
  background: #a579ff;
  height: 25px;
  width: 119px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
}

.create-invoice-btn {
  background: #6878b6;
  height: 38px;
  width: 169px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
}

.invoice-btn_text {
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
}

/* School Trial Extend Modal Styles */
.school_trial_extend__modal {
  width: 600px !important;
  /* Modal specific styles if needed */
}

.school_trial_extend__modal_body {
  /* Modal body specific styles if needed */
}

.school_trial_extend__form {
  /* Form specific styles if needed */
}

.school_trial_extend__title {
  /* Title specific styles if needed */
}

.school_trial_extend__label {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}

.school_trial_extend__school_name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.school_trial_extend__field_label {
  /* Field labels inherit default styling */
}

.school_trial_extend__number_input {
  /* Number input styling inherits from adding-box */
}

/* Stop Trial Modal Styles */
.trial-stop__modal {
  /* Modal specific styles */
}

.trial-stop__modal_body {
  /* Modal body specific styles */
}

.trial-stop__form {
  /* Form specific styles */
}

.trial-stop__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.trial-stop__close_btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #aaa;
  padding: 5px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.trial-stop__close_btn:hover {
  background-color: #f0f0f0;
  color: #666;
}

.trial-stop__content {
  text-align: center;
  padding-top: 20px;
}

.trial-stop__icon_container {
  margin-bottom: 20px;
}

.trial-stop__warning_icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #ffa527;
  background-color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.trial-stop__exclamation {
  font-size: 30px;
  font-weight: bold;
  color: #ffa527;
}

.trial-stop__title_container {
  margin-bottom: 20px;
}

.trial-stop__title {
  font-size: 24px;
  line-height: 100%;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
}

.trial-stop__school_name {
  font-size: 24px;
  line-height: 100%;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.trial-stop__confirmation_text {
  padding-bottom: 20px;
  border-bottom: 1px solid #e1d3fd;
}

.trial-stop__confirmation_text p {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.trial-stop__action_list {
  text-align: left;
  margin: 20px 0;
}

.view_license_link {
  color: #6878b6;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.license_exp_date {
  color: #f64d44 !important;
}

.trial-stop__action_item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.trial-stop__arrow {
  width: 16px;
  height: 16px;
}

.trial-stop__action_text {
  line-height: 1.4;
}

.trial-stop__expired_text {
  color: #f64d44;
}

.trial-stop__warning_message {
  background-color: #ff9c9726;
  border-radius: 3px;
  padding: 8px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 26px;
}

.trial-stop_warning {
  width: 16px;
  height: 16px;
}

.trial-stop__warning_text {
  color: #f64d44;
  font-size: 10px;
  line-height: 100%;
  font-weight: 500;
}

.trial-stop__reason_container {
  margin: 25px 0;
  text-align: left;
}

.trial-stop__reason_label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.trial-stop__optional {
  color: #999;
  font-weight: normal;
}

.trial-stop__reason_textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.trial-stop__reason_textarea:focus {
  outline: none;
  border-color: #6878b6;
  box-shadow: 0 0 0 2px rgba(104, 120, 182, 0.1);
}

.trial-stop__reason_textarea::placeholder {
  color: #999;
}

.trial-stop__button_container {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px;
}

.trial-stop__cancel_btn,
.trial-stop__confirm_btn {
  padding: 12px 30px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  min-width: 120px;
}

.trial-stop__cancel_btn {
  background-color: #d3d3d3;
  color: #565656;
}

.trial-stop__confirm_btn {
  background-color: #d72222;
  color: #fff;
}

.trial-stop__confirm_btn:hover {
  background-color: #c82333;
}

.trial-stop__confirm_btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.trial-stop__error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.create-school-button {
  background-color: #6878b6;
  color: #ffffff;
  font-size: 16px;
  line-height: 100%;
  padding: 12px 24px;
  border-radius: 10px;
}

.create-school-button:hover {
  background-color: #5a6fb5;
  color: #ffffff;
}

.school_table-block {
  padding: 15px;
  border-radius: 20px;
  border: 1px solid #ebebeb;
  margin-top: 20px;
}

.trial-select-box {
  outline: none !important;
  border: none !important;
  background-color: #f5f5f5 !important;
  height: 52px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
}

/* Responsive design for stop trial modal */
@media (max-width: 768px) {
  .trial-stop__content {
    padding: 15px 20px 30px;
  }

  .trial-stop__title,
  .trial-stop__school_name {
    font-size: 20px;
  }

  .trial-stop__confirmation_text p {
    font-size: 14px;
  }

  .trial-stop__action_item {
    font-size: 13px;
  }

  .trial-stop__button_container {
    flex-direction: column;
    gap: 10px;
  }

  .trial-stop__cancel_btn,
  .trial-stop__confirm_btn {
    width: 100%;
  }
}

.school_trial_extend__decrease_btn,
.school_trial_extend__increase_btn {
  /* Button styling inherits from existing classes */
}

.school_trial_extend__input {
  /* Input styling inherits from numb-license-key */
}

.school_trial_extend__select_wrapper {
  /* Select wrapper styling inherits from form_bg_grey w_100 */
}

.school_trial_extend__select {
  /* Select styling inherits from form-control select-form */
  background-color: #f5f5f5 !important;
  outline: none !important;
  border: none !important;
  height: 52px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
}

.school_trial_extend__select::placeholder {
  color: #adadad;
}

.school_trial_extend__select_wrapper .fancybox__content:focus {
  outline: none !important;
}

.school_trial_extend__textarea {
  height: auto;
  min-height: 100px;
}

.school_trial_extend__optional_text {
  color: #999;
}

.school_trial_extend__error {
  /* Error styling inherits from error validtion-error */
}

.school_trial_extend__button_wrapper {
  /* Button wrapper styling inherits from pop-btn-wrapper */
}

.school_trial_extend__cancel_btn {
  /* Cancel button styling inherits from cancel-btn */
}

.school_trial_extend__submit_btn {
  /* Submit button styling inherits from violet-btn extend-trial-submit */
}

.modal h2 {
  font-size: 20px;
  color: #4a4ed6;
  margin-bottom: 10px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.school-info {
  margin-bottom: 15px;
}

.school-info p {
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  margin: 8px 0;
}

.action-card {
  background: #f6f8ff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  margin-left: 20px;
}

.action-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

.action-subtitle {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

.changes,
.settings {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  color: #444;
  margin-top: 8px;
  line-height: 1.4;
}

.meta {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta a {
  color: #767676;
  text-decoration: underline;
  font-weight: 400;
  font-size: 12px;
}

.school-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.filter-dropdown select {
  padding: 8px 35px 8px 12px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #434343;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  appearance: none;
  opacity: 1;

  background-image: url("../images/sort.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
}

.filter-dropdown select:hover {
  border-color: #aaa;
}

.filter-dropdown select:focus {
  border-color: #4a4ed6;
  box-shadow: 0 0 0 2px rgba(74, 78, 214, 0.2);
}

.timeline-dot {
  width: 15px;
  height: 15px;
  background: #a579ff;
  border-radius: 50%;
  position: absolute;
  left: -27px;
  top: 20px;
}

.action-card::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 20px;
  bottom: -40px;
  width: 1px;
  background: #a579ff80;
}

.action-card.last_card::before {
  content: none;
}

.action-card:first-child::before {
  top: 20px; /* cut line above first */
}

.action-card:last-child::before {
  bottom: 20px; /* cut line below last */
}

div.action_history {
  height: auto !important;
}

.action_history h3 {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #434343;
}

.school-info p span {
  margin-left: 8px;
  margin-right: 8px;
  border-left: 1px solid #767676;
  padding: 0 8px;
}

.timeline_content_top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.change_details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.change_details p {
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  line-height: 100%;
  color: #404040;
}

.change_details p span {
  font-weight: 600;
}

.changes_title {
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  color: #bababa;
}

div.middle_dot {
  height: 5px;
  width: 5px;
  background: #5b5b5b;
  border-radius: 50%;
}

div.action_history {
  width: 64% !important;
}

.custom-scrollbar {
  overflow-y: auto;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 3px solid #f0f0f0; /* creates padding effect */
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;
}

.plan_pop_up {
  background-color: #fff;
  position: absolute !important;
  right: 109%;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  width: 400px;
  bottom: -68px;
}

.plan_pop_up_arrow_right {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-left: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  right: -10px; /* Pokes out of the parent's right side */
  top: 30px;
}

.plan_pop_up_next_button {
  background: none;
  border: none;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0px;
  color: #6878b6 !important;
}

.plan_user_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1.2;
  z-index: 999;
}

.pick_subject_popup {
  background-color: #fff;
  position: absolute !important;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* width: 300px; */
  top: 11%;
  width: 400px;
  right: -487px;
  /* max-width: 700px; */
}

.pick_subject_popup_arrow_right {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-left: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  right: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.highlight-target {
  position: relative !important; /* ensures z-index works */
  z-index: 10000 !important;
  border-radius: 0px !important;
  background-color: #fff !important;
  padding: 5px !important;
}

.highlight-target_trans {
  position: relative !important; /* ensures z-index works */
  z-index: 10000 !important;
  border-radius: 0px !important;
  padding: 5px !important;
}

.sidebar_target {
  position: relative !important; /* ensures z-index works */
  z-index: 10000 !important;
  border-radius: 0px !important;
  padding: 5px !important;
}

.highlight-overlay {
  position: fixed !important;
  inset: 0 !important; /* covers full viewport */
  background: #070707b2 !important;
  opacity: 0.7 !important ;
  z-index: 9998 !important;
  /* pointer-events: none !important; */
  width: 100vw !important;
  height: 100% !important;
  min-height: 150vh !important;

  top: 0 !important;
  left: 0 !important;
}

.custome_did_know_popup {
  background-color: #fff;
  position: absolute !important;
  left: -435px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* width: 300px; */
  top: 114px;
  width: 400px;
  /* max-width: 700px; */
}

.custome_did_know_popup_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 5%;
}

.custome_did_know_popup_arrow_right {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-left: 28px solid #fff;
  top: 50%;
  right: -4%;
}

.subject_card_popup {
  background-color: #fff;
  position: absolute !important;
  right: -346px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* width: 300px; */
  top: 20px;
  width: 317px;
  /* max-width: 700px; */
}

.subject_card_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.curriculum-builder__guidance_popup {
  background-color: #fff;
  position: absolute !important;
  left: -373px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* width: 300px; */
  top: -20px;
  width: 317px;
  /* max-width: 700px; */
}

.curriculum-builder__guidance_popup_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 5%;
}

.curriculum-builder__guidance_popup_arrow_right {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 10.5px solid transparent;
  border-bottom: 15.5px solid transparent;
  border-left: 28px solid #fff;
  top: 38%;
  right: -5%;
}

.tools_popup {
  background-color: #fff;
  position: absolute !important;
  left: 260px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  /* width: 300px; */
  top: 0px;
  width: 317px;
  /* max-width: 700px; */
}

.tools_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.tools_top_popup {
  background-color: #fff;
  position: absolute !important;
  left: -7%;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  bottom: -270px;
  width: 350px;
}

.p_relative {
  position: relative !important;
}

.tools_top_popup_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 17.5px solid transparent;
  border-right: 8.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 50%;
}

.tools_card_popup {
  background-color: #fff;
  position: absolute !important;
  right: -265px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  width: 350px;
  top: -170px;
}

.tools_card_popup_arrow_bottom {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-top: 28px solid #fff;
  bottom: -5%;
  right: 80%;
}

.tools_subject_detail_popup {
  background-color: #fff;
  position: absolute !important;
  left: -384px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  width: 350px;
  top: -20px;
}

.tools_subject_detail_popup_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 3%;
}

.tools_subject_detail_popup_arrow_right {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 10.5px solid transparent;
  border-bottom: 15.5px solid transparent;
  border-left: 28px solid #fff;
  top: 30%;
  right: -5%;
}

.content_created_popup {
  background-color: #fff;
  position: absolute !important;
  right: -335px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  top: 50%;
  width: 317px;
}

.content_created_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.content_menu_popup {
  background-color: #fff;
  position: absolute !important;
  right: -354px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  top: 33%;
  width: 317px;
}

.content_menu_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 40%;
}

.output_popup {
  background-color: #fff;
  position: absolute !important;
  left: -425px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  bottom: 71%;
  width: 400px;
  padding-top: 25px;
}

.output_popup_bottom {
  background-color: #fff;
  position: absolute !important;
  left: -425px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  top: 259px;
  width: 400px;
  padding-top: 25px;
} 
.output_popup_arrow_right {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-left: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  right: -10px; /* Pokes out of the parent's right side */
  top: 59%;
}
.output_popup_arrow_right_bottom{
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-left: 20px solid #fff; /* Arrow points to the right */
  right: -10px; /* Pokes out of the parent's right side */
  bottom: 31%;
}

.token_popup_p {
  color: #434343 !important;
  font-size: 14px;
  line-height: 19px !important;
  font-weight: 600 !important;
}

h3.popup_heading2 {
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  color: #434343;
  margin-bottom: 10px;
  margin-top: 10px;
}

.output_ul {
  margin-bottom: 55px;
}

.token_popup_p img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%)
    hue-rotate(152deg) brightness(93%) contrast(87%);
}

.output_li {
  display: flex;
  align-items: start;
  gap: 10px;
}

.shrink_zero {
  flex-shrink: 0;
}

.lang_popup {
  background-color: #fff;
  position: absolute !important;
  right: -335px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  top: 10%;
  width: 317px;
}

.lang_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.lang_confirm_arrow_top {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-bottom: 28px solid #fff;
  top: -5%;
  right: 30%;
}

.pick_subject_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -14px; /* Pokes out of the parent's right side */
  top: 20px;
}

.custome_subject_list_popup {
  background-color: #fff;
  position: absolute !important;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  width: 400px;
  bottom: 2%;
  /* right: 32px; */
  left: 50%;
}

.custome_subject_list_popup_arrow_down {
  position: absolute;
  width: 15px;
  height: 15px;
  border-left: 10.5px solid transparent;
  border-right: 15.5px solid transparent;
  border-top: 28px solid #fff;
  bottom: -5%;
  right: 30%;
}

.custome_subject_list_popup_arrow_left {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  left: -10px; /* Pokes out of the parent's right side */
  bottom: 20px;
}

.enter_details_popup {
  background-color: #fff;
  position: absolute !important;
  right: -358px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  top: 42%;
  width: 317px;
}

.enter_details_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff;
  top: 40%;
  left: -10px;
  top: 40%;
}

.curriculam_link_popup {
  background-color: #fff;
  position: absolute !important;
  right: -372px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  top: -94%;
  width: 317px;
}

.curriculam_link_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.connect_menu_popup {
  background-color: #fff;
  position: absolute !important;
  right: -354px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  top: 50px;
  width: 317px;
}

.connect_menu_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 40%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  top: 20px;
}

.learning_intent_additional_info_popup {
  background-color: #fff;
  position: absolute !important;
  right: -340px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  bottom: 26%;
  width: 317px;
  height: 141px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.response_generate_popup {
  background-color: #fff;
  position: absolute !important;
  right: -340px;
  margin-left: 10px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000004d;
  z-index: 9999;
  bottom: 74px;
  width: 317px;
}

.learning_intent_additional_info_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 13%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  bottom: 20px;
}

.generate_button_info_popup_arrow_left {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 72%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  bottom: 20px;
}

.additional_info_popup_arrow_left{
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10.5px solid transparent;
  border-bottom: 10.5px solid transparent;
  border-right: 20px solid #fff; /* Arrow points to the right */
  top: 70%; /* Adjust as needed */
  left: -10px; /* Pokes out of the parent's right side */
  bottom: 20px;
}

.onboard-popup-close img {
  filter: none !important;
}

.sidebar_tools_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1.2;
  z-index: 998;
  pointer-events: none !important;
}

.sidebar_target {
  position: relative !important;
  z-index: 10000 !important;
  border-radius: 0px !important;
  padding: 5px !important;
  background: #6878b6;
}

.sidbar_menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 241px;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1.2;
  z-index: 998;
  /* pointer-events: none !important; */
}
.onboard-popup-close {
  display: none !important;
}

.add-new {
  cursor: pointer;
}

textarea[name="prompt"] {
  border: 1px solid #cccccc !important;
}