/* Login page */

@import "../css/font-icon.css";

.login-bg {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  position: relative;
  background: #ffffff;
}

.grd-shape {
  position: absolute;
  z-index: 9;
}

.gradient-rect-one {
  left: 0;
  top: 0;
}

.gradient-rect-two {
  left: 0;
  bottom: 0;
}

.gradient-rect-three {
  left: 27%;
  bottom: 0;
}

.gradient-rect-four {
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gradient-rect-five {
  right: 0;
  bottom: 10%;
}

.gradient-rect-six {
  top: 0;
  left: 40%;
}

.login-left {
  width: 35%;
  background: linear-gradient(180deg, #375a7f 0%, #8b49de 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.go-back-link {
  position: absolute;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  top: 50px;
  left: 40px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.login-right {
  width: 65%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.login_detail_wrapper {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  margin: 40px 40px 0;
}

.login-details-box {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.login-top {
  margin-bottom: 10px;
}

.login-top h5 {
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #aeaeae;
  margin-bottom: 3px;
}

.input_items {
  margin: 10px 0;
}

.input_items > label:first-of-type {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #737373;
  margin-bottom: 10px;
}

.login-top h2 {
  font-weight: 600;
  font-size: 42px;
  line-height: 53px;
  color: #434343;
}

.login-top p {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  margin-top: 5px;
}

.login-input-feild {
  width: 100%;
  background: #f5f5f5;
  border-radius: 10px;
  outline: none;
  border: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
  padding: 17px 50px 17px 20px !important;
  min-height: 52px;
}

.login-input-feild:focus {
  border: none !important;
  outline: none !important;
}

.login-input-feild::-webkit-input-placeholder {
  /* Edge */
  font-weight: 500;
  font-size: 14px;
  color: #adadad;
}

.login-input-feild:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-weight: 500;
  font-size: 14px;
  color: #adadad;
}

.login-input-feild::placeholder {
  font-weight: 500;
  font-size: 14px;
  color: #adadad;
}

.form-feild {
  position: relative;
}

.eye_icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.login-form_inside {
  display: flex;
  flex-direction: column;
}

.login-input-feild[type="password"] {
  font-size: 20px;
}

.login-input-feild:focus {
  border: 1px solid #6878b6;
}

.action-login-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.action-login-section > * {
  margin: 15px 0;
}

.action-login-section p {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  color: #757575;
}

.action-login-section p a {
  color: #6878b6;
  margin-left: 5px;
  font-weight: 600;
}

.otp-timer {
  color: #6878b6;
  font-weight: 600;
}

.login-form_inside .violet-btn {
  width: 100%;
  min-height: 46px;
  margin: 30px 0 10px;
}

.continue-with {
  margin: 10px 0;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #757575;
}

.login-other-account {
  display: flex;
  flex-direction: column;
}

.login-email_acct {
  margin: 10px 0 7.5px;
  background: #ffffff;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  min-height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #555454;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.login-email_acct:hover {
  background-color: #ededed;
  color: #555454;
}

.login-email_acct img {
  margin-right: 12px;
}

.account-qstn-link {
  margin: 30px 0;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #757575;
}

.account-qstn-link a {
  color: #6878b6;
  font-weight: 600;
}

.otp-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -7.5px 0;
}

.otp-wrapper > .form-feild {
  margin: 0 7.5px;
  width: calc(25% - 15px);
}

.otp-wrapper > .form-feild .login-input-feild {
  text-align: center;
}

.otp-wrapper .input_items {
  margin: 0 7.5px;
  width: calc(50% - 15px);
}

.otp-wrapper + .otp-wrapper {
  margin-top: 20px;
}

.otp-wrapper .checkmark-container {
  margin-left: 7px;
}

.otp-wrapper .checkmark {
  border: 1px solid #d0d0d0;
}

.login-footer {
  /* position: absolute;
    bottom: 0;
    left: 0; */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px;
}

.login-footer p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #8d8d8d;
}

.login-footer p a {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #8d8d8d;
}

.login-footer p a:first-child {
  margin-right: 10px;
}

.login-footer p a:last-child {
  margin-left: 10px;
}

.contact_wrapper {
  display: flex;
}

.contact_wrapper .country-code {
  width: 120px;
}

.country-code.form-feild .CaptionCont.select-form > label {
  right: 5px;
}

.contact_wrapper .phone-feild .login-input-feild {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* padding-left: 0; */
  border: 0;
}

.country-code.form-feild .CaptionCont.select-form {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 15px 10px;
}

.country-code .SumoSelect {
  min-width: unset;
}

.country-code .SumoSelect > .CaptionCont > label > i {
  background-image: url(../images/polygon.png);
}

.country-code .SumoSelect.open > .CaptionCont > label > i {
  transform: rotate(-180deg);
}

.country-code .SumoSelect > .CaptionCont > span {
  font-weight: 600;
  font-size: 14px;
  line-height: 41px;
  color: #555454;
  padding-right: 18px;
  border-radius: 5px;
}

.country-code {
  border: 1px solid transparent;
  border-right: 0 !important;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

.phone-feild {
  flex-grow: 1;
  border: 1px solid transparent;
  border-left: 0 !important;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

.border-focus {
  border: 1px solid #6878b6;
}

.regiter-captcha-wrapper {
  margin: 15px 0 0;
}

/* ----------------------------sidebar--------------------- */

.side-bar {
  position: fixed;
  min-width: 240px;
  max-width: 240px;
  background: rgb(55, 90, 127);
  background: linear-gradient(
    180deg,
    rgba(55, 90, 127, 1) 0%,
    rgba(139, 73, 222, 1) 100%
  );
  -webkit-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -moz-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -o-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    /* make this show after the popup */
  /* overflow: auto; */
  z-index: 699;
}

.side-bar::-webkit-scrollbar {
  display: none;
}

.logo-box {
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 67px;
}

.logo-collapsed {
  display: none;
}

.logo-box h1 {
  font-size: 24px;
  color: #9f9999;
}

.side-bar.collapsed .logo-collapsed {
  display: inline-block;
  margin-right: 5px;
}

.side-bar.collapsed .logo-full {
  display: none;
}

.side-bar.collapsed .logo-box {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.sidebar-content {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  -webkit-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -moz-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -o-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  position: relative;
}

.mobile_close_btn {
  position: absolute;
  top: 8px;
  right: 10px;
  display: none;
}

.sidebar-link-list {
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar-link {
  padding: 13px 10px;
  display: flex;
  align-items: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  width: 100%;
}

.sidebar-link.active {
  background-color: #4286f5;
}

.menu-icon img {
  display: block;
  width: 18px;
  margin-right: 8px;
}

.menu-item {
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 14px;
  color: #ffffff;
  font-weight: 400;
  flex-grow: 1;
}

.sidebar-link .menu-icon .icon-white {
  display: none;
}

.sidebar-item {
  margin: 3px 0;
  display: flex;
  flex-direction: column;
}

.sidebar-item.active .sidebar-link .menu-item {
  color: #ffffff;
}

.sidebar-item.active .sidebar-link .menu-icon .icon-white {
  display: block;
}

.sidebar-item.active .sidebar-link .menu-icon .icon-dark {
  display: none;
}

.sidebar-item.active .sidebar-link {
  background-color: #6878b6;
}

.sidebar-item.active .drop-arrow span {
  color: #ffffff;
}

.sidebar-link:hover {
  background-color: #6878b6;
  transition: 0.3s cubic-bezier(0.57, 0.26, 1, 1) !important;
}

.sidebar-link:hover .menu-item {
  color: #ffffff;
}

.sidebar-link:hover .menu-icon .icon-dark {
  display: none;
}

.sidebar-link:hover .menu-icon .icon-white {
  display: block;
}

.drop-arrow {
  transition: 0.3s all ease-in;
}

.drop-arrow span {
  font-size: 6px;
  color: #ffffff;
}

.sidebar-link:hover .drop-arrow span {
  color: #ffffff;
}

/* sub menu */

.sub-menu {
  display: none;
  background-color: #6878b6;
  width: 100%;
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  -o-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  -o-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.sidebar-link.open-menu {
  background-color: #6878b6;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -o-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  -o-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sidebar-link.open-menu .menu-item {
  color: #ffffff;
}

.sidebar-item .sidebar-link.open-menu .menu-icon .icon-white {
  display: block;
}

.sidebar-item .sidebar-link.open-menu .menu-icon .icon-dark {
  display: none;
}

.sidebar-item .sidebar-link.open-menu .drop-arrow span {
  color: #ffffff;
}

.submenu-item {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px 10px 37px;
  display: block;
  width: 100%;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  /* white-space: nowrap; */
  background-color: transparent;
  border: 0;
}

.submenu-list:hover .submenu-item {
  background-color: #8996cb;
  color: #ffffff;
}

.submenu-list.active .submenu-item {
  background-color: #8996cb;
  color: #ffffff;
}

.sidebar-link.open-menu .drop-arrow {
  transform: rotate(180deg);
}

.side-bar.collapsed .sub-menu {
  display: none !important;
}

.side-bar.collapsed:hover .sidebar-link.open-menu + .sub-menu {
  display: block !important;
}

.sidebar-bottom {
  padding: 0 10px;
  margin-top: 75px;
  padding-bottom: 15px;
}

.sidebar-link-box-wrapper {
  position: relative;
  border-radius: 20px;
}

.sidebar-link-box {
  background: rgb(147, 111, 213);
  background: linear-gradient(
    82deg,
    rgba(147, 111, 213, 1) 0%,
    rgba(130, 85, 212, 1) 100%
  );
  backdrop-filter: blur(25px);
  padding: 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  position: relative;
  background-clip: padding-box;
  z-index: 0;
}

.border-div {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(
    to bottom right,
    #ffffff,
    rgba(139, 73, 222, 1),
    #ffffff
  );
  z-index: -1;
  border-radius: 10px;
}

.sidebar-link-box-wrapper:after {
  content: "";
  position: absolute;
  display: block;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(
    to bottom right,
    #ffffff,
    rgba(139, 73, 222, 1),
    #ffffff
  );
  z-index: -1;
  border-radius: 20px;
}

.sidebar-link-box p {
  margin-top: 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #ffffff;
}

.sidebar_image {
  position: absolute;
  top: -60%;
  right: 10px;
}

.get_now_link {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.get_now_link span {
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  margin-right: 10px;
}

.side-bar-account {
  display: flex;
  /* flex-wrap: wrap; */
  margin-top: 15px;
}

.side-bar-account .profile-pic {
  width: 40px;
  min-width: 46px;
  height: 46px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin-right: 8px;
  margin-top: 8px;
}

.sidebar-acct-details {
  margin-top: 8px;
}

.sidebar-acct-details p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  word-break: break-all;
}

.sidebar-acct-details :first-child {
  font-weight: 600;
}

.side-link-collapsed {
  display: none;
  justify-content: flex-end;
}

.side-link-round {
  background: linear-gradient(
    100.35deg,
    rgba(255, 255, 255, 0.2) 5.03%,
    rgba(165, 121, 255, 0.2) 66.6%
  );
  backdrop-filter: blur(25px);
  border-radius: 50%;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

/*----------------------- side bar collapsed--------------------------- */

.side-bar.collapsed {
  margin-left: -175px;
}

.side-bar.collapsed .sidebar-link {
  flex-direction: row-reverse;
}

/* .side-bar.collapsed .menu-icon{
    margin-right: 7px;
} */

.side-bar.collapsed .sidebar-item {
  flex-direction: row-reverse;
}

.side-bar.collapsed .sidebar-link {
  width: auto;
  min-width: 44px;
  justify-content: center;
}

.side-bar.collapsed .menu-item {
  display: none;
}

.side-bar.collapsed .drop-arrow {
  display: none;
}

.side-bar.collapsed .menu-icon img {
  margin-right: 0;
}

.side-bar.collapsed .sidebar-link-box-wrapper {
  display: none;
}

.side-bar.collapsed .side-link-collapsed {
  display: flex;
}

.side-bar.collapsed .side-bar-account {
  flex-direction: row-reverse;
}

.side-bar.collapsed .sidebar-acct-details {
  display: none;
}

/*----------------------- side bar hover--------------------------- */

.side-bar.collapsed:hover {
  margin-left: 0;
  box-shadow: 3px 5px 10px 2px #e6e6e6;
}

.side-bar.collapsed:hover .sidebar-link {
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
}

.side-bar.collapsed:hover .menu-icon {
  margin-right: unset;
}

.side-bar.collapsed:hover .logo-box {
  flex-direction: row;
  justify-content: center;
}

.side-bar.collapsed:hover .logo-full {
  display: block;
}

.side-bar.collapsed:hover .logo-collapsed {
  display: none;
}

.side-bar.collapsed:hover .menu-item {
  display: unset;
}

.side-bar.collapsed:hover .menu-icon img {
  margin-right: 8px;
}

.side-bar.collapsed:hover .drop-arrow {
  display: unset;
}

.side-bar.collapsed:hover .sidebar-item {
  flex-direction: column;
}

.side-bar.collapsed:hover .side-link-collapsed {
  display: none;
}

.side-bar.collapsed:hover .sidebar-link-box-wrapper {
  display: block;
}

.side-bar.collapsed:hover .side-bar-account {
  flex-direction: row;
}

.side-bar.collapsed:hover .sidebar-acct-details {
  display: block;
}

.side-bar.collapsed .sidebar-contact-wrapper {
  display: none;
}

/*----------------------- main body -----------------*/

.main-panel {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  background: #f4f5fa;
  flex-direction: column;
  /* overflow: hidden; */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -moz-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -o-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
}

/* top bar------------------ */

.top-bar {
  position: fixed;
  width: 100%;
  z-index: 98;
  width: calc(100% - 240px);
  min-height: 55px;
  margin-left: 240px;
  background-color: #ffffff;
  -webkit-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -moz-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  -o-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
  transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
  -o-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.03);
}

.mobile-btn {
  display: none;
}

.toggle-btn span,
.mobile-btn span {
  cursor: pointer;
  color: #babdc0;
  font-size: 14px;
}

.profile-avatar {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-panel.body-expand .top-bar {
  margin-left: 65px;
  width: calc(100% - 65px);
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.top-bar-right > * {
  cursor: pointer;
  position: relative;
}

.top-bar-right .profile-avatar {
  margin-left: 30px;
}

.notification-badge {
  position: absolute;
  top: -21%;
  left: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 19px;
  padding: 3px;
  border: 2px solid #f4fdff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  z-index: 1;
  background-color: #af83e8;
  transition: transform 0.15s, background-color 0.5s;
}

/*----------- screen body----------------- */

.content {
  background: #ffffff;
}

.content-inner {
  margin: 75px 20px 20px 260px;
  transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
    margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
}

.main-panel.body-expand .content-inner {
  margin: 80px 20px 20px 85px;
}

.min-full-screen {
  min-height: calc(100vh - 95px);
}

.content-wrapper {
  min-height: calc(100vh - 95px);
  padding-top: 52px;
}

.content-wrapper.no-bread-crumbs {
  padding-top: 0;
}

.page-block {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
}

.page-alert {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d1d1d1;
  background: linear-gradient(90.68deg, #375980 -1.09%, #844ad7 93.18%);
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 15px;
}

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

.alert-content p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #fcfcfc;
  margin-right: 20px;
}

.alert-content img {
  margin-right: 8px;
}

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

.alert-action .alert-close {
  position: absolute;
  top: 15px;
  right: 15px;
}

.alert-action .alert-btn {
  margin-right: 45px;
}

.welcome-section {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.welcome-section .violet-btn {
  width: 245px;
}

.welcome_inside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  padding: 15px;
}

.welcome_inside h4 {
  font-weight: 600;
  font-size: 34px;
  line-height: 43px;
  text-align: center;
  color: #676767;
  margin-bottom: 40px;
}

.welcome_inside p {
  margin-bottom: 20px;
  margin-top: -30px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #505050;
}

/*------------------------- page top--------------------- */

.page-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: fixed;
  width: calc(100% - 280px);
  top: 75px;
  padding-top: 20px;
  margin-top: -20px;
  background-color: #ffffff;
  z-index: 97;
  padding-bottom: 20px;
}

.main-panel.body-expand .page-top {
  width: calc(100% - 105px);
}

.page-top-left {
  display: flex;
  align-items: center;
}

.page-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin-right: 10px;
}

.page-back-btn:hover {
  background-color: #6878b6;
}

.page-back-btn:hover span {
  color: #ffffff;
}

.page-top-tittle {
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
  white-space: nowrap;
  margin-bottom: 0;
}

.bread-crumps {
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
  color: #b0b0b0;
}

.bread-crumps a {
  color: #b0b0b0;
}

.slash {
  margin: 0 5px;
}

.current-page {
  color: #6878b6;
  font-weight: 600;
}

.section-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: #6878b6;
  margin-bottom: 10px;
}

.two-col-form-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.two-col-form-list .input_items {
  width: calc(50% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.button-block {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 15px;
}

.form_wrapper .button-block {
  padding-top: 30px;
  border-top: 1px solid #ededed;
  margin-top: 40px;
}

.buttons_wrapper {
  display: flex;
  margin: -10px;
}

.button-block .violet-btn,
.button-block .white-btn {
  min-width: 200px;
  margin: 10px;
  font-size: 14px;
  max-height: 45px;
}

.two-col-unequal {
  display: flex;
  margin: 0 -10px;
}

.two-col-unequal .left-col {
  width: calc(60% - 20px);
  margin: 0 10px;
}

.two-col-unequal .right-col {
  width: calc(40% - 20px);
  margin: 0 10px;
}

.card-block {
  border: 1px solid #ebebeb;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  background: #fff;
}

.card-top {
  padding: 15px 20px;
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 25.1%,
    rgba(104, 120, 182, 0.1) 76.25%
  );
  -webkit-border-radius: 19px 19px 0px 0px;
  -moz-border-radius: 19px 19px 0px 0px;
  -o-border-radius: 19px 19px 0px 0px;
  border-radius: 19px 19px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: wrap; */
  gap: 10px;
}

.card-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
  margin-bottom: 0;
  background: none;
  outline: none;
  border: none;
  /* width: 100%; */
  margin-right: 10px;
}

.card-inside {
  padding: 20px;
  min-height: 217px;
  display: flex;
}

.card-content-styles {
  height: 100% !important;
}

.card-content {
  width: 100%;
  position: relative;
  flex-grow: 1;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  /* height: calc(100vh - 100px); */
}

/* .django-ckeditor-widget{
      height: calc(100vh - 300px) !important; 
} */

.card-inside textarea {
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: #b0b0b0;
  background: #f9f9f9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 0;
  resize: none;
  padding: 20px 20px 70px;
  height: 100%;
}

.magic-btn {
  position: absolute;
  background: #6878b6;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 40px;
  right: 20px;
  bottom: 20px;
  padding: 10px;
  cursor: pointer;
}

.magic-btn:hover {
  background: #5666a5;
}

.magic-btn p {
  margin-left: 15px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.save-btn {
  position: absolute;
  background: #6878b6;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 40px;
  left: 20px;
  bottom: 20px;
  padding: 10px 15px;
  cursor: pointer;
}

.save-btn p {
  margin-left: 15px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.save-btn:hover {
  background: #5666a5;
}

.lesson-add {
  display: flex;
  justify-content: center;
  padding: 30px 0;
  min-width: 300px;
}

.lesson-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #6878b6;
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.lesson-btn span {
  font-size: 14px;
}

.lesson-add .lesson-btn:first-child span {
  font-size: 2px;
}

.lesson-output {
  display: flex;
  align-items: center;
  margin: 0 30px;
  justify-content: center;
  font-weight: 600;
  font-size: 26px;
  line-height: 33px;
  color: #6878b6;
}

.lesson-output span {
  margin: 0 5px;
}

.lesson_plan {
  padding-top: 30px;
  border-top: 1px solid #ededed;
}

.plan-selector {
  margin-top: 10px;
  position: relative;
}

.plan-selector .SumoSelect {
  width: 100%;
}

.plan-selector .CaptionCont.select-form {
  height: 46px;
  padding: 12px 20px;
  background-color: #f5f5f5;
  border: 0;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -o-border-radius: 9px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #6878b6;
}

.plan-selector .SumoSelect.open > .optWrapper {
  top: 46px;
}

.plan-select-lock {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
  border-radius: 9px;
}

.plan-select-lock p {
  margin-left: 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #6878b6;
}

.plan-locked .plan-select-lock {
  display: flex;
}

.plan-locked > .form-feild {
  opacity: 0.5;
}

.plan_dialogue_box {
  display: none;
  padding: 20px;
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 25.1%,
    rgba(104, 120, 182, 0.1) 76.25%
  );
  border: 1px solid #f3f3f3;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
}

.dialogue_top {
  display: flex;
}

.dialogue_top > div {
  margin-right: 15px;
}

.dialogue_top > h6 {
  flex-grow: 1;
  font-weight: 600;
  font-size: 15px;
  line-height: 19px;
  color: #434343;
}

.dialogue_top a {
  margin-left: 10px;
}

.plan_dialogue_body {
  margin: 10px 0 20px;
}

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

.dialogue-btn .violet-btn {
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

.plan_dialogue_box:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 2px;
  left: 70%;
  box-sizing: border-box;
  border: 7px solid black;
  border-color: transparent transparent #f3faff #f3faff;
  transform-origin: 0 0;
  transform: rotate(138deg);
  box-shadow: -1px 1px 0px 0 rgba(216, 215, 215, 0.4);
}

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

.lesson_count li {
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 25.1%,
    rgba(104, 120, 182, 0.1) 76.25%
  );
  padding: 10px 15px;
  border-radius: 58px;
  display: flex;
  align-items: center;
  margin: 0 15px 15px;
}

.lesson_count li img {
  margin-right: 10px;
}

.lesson_count li p {
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: -0.5px;
  color: #6878b6;
}

.lesson_count li span {
  margin-right: 5px;
}

.lesson_count {
  display: flex;
  margin: 0 -15px;
}

.three-col-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.three-col-item {
  width: calc(33.33% - 20px);
  border: 1px solid #ebebeb;
  -webkit-border-radius: 20px;
  -moz-order-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  margin: 10px;
}

.lesson-info {
  padding: 20px;
  transition: 0.3s all ease-in;
}

.lesson-info:hover {
  background: url("../images/grid-bg.png"), #f1f6fb;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  border: 1px solid #6878b6;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}

.lesson-info:hover .view-resource_right > span {
  background-color: #485caa;
}

.lesson-info:hover .icon-right_arrow {
  color: #ffffff;
}

.lesson-number {
  border: 1px solid #ebebeb;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  display: inline-block;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.5px;
  color: #6878b6;
  transition: all 0.4s ease-in;
}

.lesson-info h5 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
  margin-top: 5px;
  transition: all 0.4s ease-in;
}

.lesson-info h6 {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #6f6f6f;
  margin-top: 5px;
  margin-bottom: 0;
  transition: all 0.4s ease-in;
}

.lesson-points-list {
  margin: 20px 0;
}

.lesson-points-list li {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #767676;
  list-style-image: url(../images/list_arrow.png);
  margin-left: 20px;
}

.lesson-points-list li + li {
  margin-top: 8px;
}

.view_resource_btn {
  display: flex;
  justify-content: flex-end;
}

.view-resource_right {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #6878b6;
  -webkit-transition: 0.4s all ease-in;
  -moz-transition: 0.4s all ease-in;
  -o-transition: 0.4s all ease-in;
  transition: 0.4s all ease-in;
}

.view-resource_right > span {
  width: 36px;
  height: 36px;
  border: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  margin-left: 10px;
  -webkit-transition: 0.3s all ease-in;
  -moz-transition: 0.3s all ease-in;
  -o-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
  background-color: #ffffff;
}

.three-col-item-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.view-resource_right .icon-right_arrow {
  font-size: 11px;
}

.lesson-planner-details .three-col-list {
  margin-top: 0;
}

.lesson-planner-inside .card-inside.hide-content {
  display: none;
}

.right-filter {
  margin: -7.5px;
  display: flex;
}

.right-filter > div {
  margin: 7.5px;
}

.page-top-right .violet-btn {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.lesson-history-info {
  min-height: 171px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.lesson-history-info .view-resource_right {
  display: none;
}

.lesson-subject {
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #6878b6;
  margin: 7px 0;
  transition: all 0.4s ease-in;
}

.lesson-history-info .view_resource_btn {
  width: 100%;
}

.lesson-history-info .lesson-number {
  transition: all 0.4s ease-in;
}

.lesson-history-info:hover .view-resource_right {
  display: flex;
}

.lesson-history-info:hover .lesson-number {
  background-color: #6878b6;
  color: #ffffff;
}

.title-block .SumoSelect > .CaptionCont {
  height: 40px;
  padding: 8px 5px 8px 40px;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.SumoSelect > .CaptionCont > span {
  padding-right: 45px;
  line-height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #434343;
}

.title-block .SumoSelect {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.icon-select {
  position: relative;
}

.select-img {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}

.title-block .SumoSelect > .CaptionCont > label > i {
  background-image: url(../images/arrow_down_black.png);
}

.title-block .SumoSelect {
  max-width: 200px;
}

.title-block .SumoSelect.open > .optWrapper {
  top: 40px;
}

.SumoSelect > .optWrapper > .options li.opt {
  padding: 10px 6px;
}

.lesson-history .title-block {
  margin-bottom: 20px;
}

.accord_arrow {
  width: 30px;
  height: 30px;
  border: 1px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.accord_arrow:hover {
  background-color: #6878b6;
}

.accord_arrow > span {
  font-size: 7px;
  color: #6878b6;
}

.accord_arrow.arrow-up > span {
  transform: rotate(-180deg);
}

.accord_arrow:hover span {
  color: #ffffff;
}

.button-list > li {
  margin: 20px 0 0;
}

.button-list > li > a {
  margin: 15px 0;
  font-size: 14px;
  font-weight: 500;
}

.video-block {
  margin: 20px 0 10px;
}

.you-tube-video-block {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0 12px;
}

.utube {
  width: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.prev-btn {
  flex-direction: row-reverse;
}

.utube-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #777777;
  margin-bottom: 20px;
}

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

.group_button > .violet-btn,
.group_button > .white-btn {
  width: calc(33.3% - 1px);
  margin: 0 1px;
  font-size: 14px;
  font-weight: 400;
}

.group_button {
  margin: 0 -2px;
}

.group_button .violet-btn:nth-child(1) {
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  -o-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  -o-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}

.group_button .violet-btn:nth-child(3) {
  -webkit-border-top-left-radius: 0;
  -moz-border-top-left-radius: 0;
  -o-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -o-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
}

.group_button.start .violet-btn:nth-child(1),
.group_button.end .violet-btn:nth-child(3) {
  background-color: #939bbb;
  border: 1px solid #939bbb;
  cursor: not-allowed;
}

.group_button .violet-btn:nth-child(1) img {
  margin-right: 5px;
}

.group_button .violet-btn:nth-child(3) img {
  margin-left: 5px;
}

.group_button .white-btn img {
  margin-right: 5px;
}

.group_button .white-btn {
  border-radius: 0;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
}

.group_button .white-btn:hover {
  border-radius: 0;
  background-color: #ededed;
  border: 1px solid #ededed;
}

.irrelevant {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.irrelevant > a {
  color: #5666a5;
  margin-left: 5px;
  font-weight: 600;
}

.no_of_lesson .violet-btn,
.no_of_lesson .white-btn {
  min-height: 42px;
}

.generat-wrapper {
  position: relative;
}

.generat-wrapper span {
  position: absolute;
  color: #5666a5;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.generat-wrapper {
  margin: 20px 0;
}

.generat-wrapper .icon-lock {
  display: none;
}

.generat-wrapper.locked .gradient-btn {
  /* pointer-events: none; */
  cursor: not-allowed;
}

.generat-wrapper.locked .icon-lock {
  display: block;
}

.generat-wrapper.locked:hover .gradient-btn {
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
}

.generating-block {
  margin-top: 30px;
}

.lesson-list-ponts {
  padding: 20px 20px 70px;
}

.lesson-list-ponts li {
  list-style-type: decimal;
  margin-left: 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: #505050;
}

.card-inside.question {
  min-height: 280px;
}

.lesson-planner-inside .two-col-unequal {
  align-items: stretch;
}

.lesson-planner-inside .right-col .card-block {
  height: calc(100% - 20px);
}

.table-block {
  margin-top: 20px;
}

.table-block .table_wrapper {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #ebebeb;
}

.table-block table {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

.table-block table thead tr td:first-child {
  -webkit-border-top-left-radius: 20px;
  -moz-border-top-left-radius: 20px;
  -o-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
}

.table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* .table-top-left {
    margin-bottom: 10px;
} */

.table-top-right {
  display: flex;
  margin: -5px -5px;
  align-items: center;
  flex-wrap: wrap;
}

.table-top-right > * {
  margin: 5px 5px;
}

.table-top .violet-btn,
.table-top .white-btn {
  height: 40px;
}

.table-block .table_wrapper {
  height: calc(100vh - 285px);
  overflow-y: auto;
}

.table-top-right > div > .SumoSelect {
  min-width: 225px;
}

.table_wrapper::-webkit-scrollbar {
  display: none;
}

.table_wrapper table thead {
  background: rgb(240, 241, 248);
  background: radial-gradient(
    circle,
    rgba(240, 241, 248, 1) 0%,
    rgba(243, 250, 254, 1) 100%
  );
  position: sticky;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 1;
}

.table_wrapper table thead th {
  padding: 15px 20px;
  border: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
  vertical-align: middle;
}

.table_wrapper table tbody td {
  padding: 15px 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
  vertical-align: middle;
}

.fancybox__content {
  padding: 30px 25px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.pop-up {
  min-width: 400px;
  position: relative;
  position: relative;
  max-width: 700px;
}

.pop-body + .carousel__button svg {
  filter: none;
}

.pop-body + .carousel__button svg {
  filter: none;
}

.pop-content-inside {
  display: flex;
  flex-direction: column;
}

.pop-input-wrapper {
  display: flex;
  flex-direction: column;
}

.pop-input-items {
  margin: 8px 0;
  margin: 8px 0;
}

.pop-title h5 {
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: #6878b6;
}

.pop-input-wrapper > label {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  margin-bottom: 5px;
}

.pop-input-wrapper .pop-input-feild {
  border: 1px solid #cccccc;
  border-radius: 4px;
  height: 40px;
  outline: none;
}

.pop-input-feild:focus {
  outline: none !important;
}

.pop-input-feild:active {
  outline: none;
}

.pop-input-wrapper .SumoSelect > .CaptionCont {
  height: 40px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px 8px;
}

.pop-input-wrapper .SumoSelect > .CaptionCont > label > i {
  background-image: url(../images/arrow_down_black.png);
}

.pop-btn {
  margin-top: 10px;
}

.pop-btn a {
  cursor: pointer;
}

.table-top-right .SumoSelect > .CaptionCont {
  height: 40px;
  border-radius: 4px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border: 1px solid #ebebeb;
  padding: 8px 0px 8px 10px;
}

.table-top-right .SumoSelect.open > .CaptionCont {
  border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -o-border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  -o-border-bottom-right-radius: 0;
}

.table-top-right .SumoSelect.open > .optWrapper {
  top: 40px;
}

.table-top-right .SumoSelect > .CaptionCont > label {
  right: 3px;
}

.table-top-right .SumoSelect > .CaptionCont > label > i {
  background-image: url(../images/arrow_down_black.png);
}

/* .table-top-right .table-search {
    width: 250px;
} */

.table-top-right .SumoSelect > .optWrapper ul::-webkit-scrollbar {
  width: 5px;
}

.table-top-right .SumoSelect > .optWrapper ul::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.table-top-right .SumoSelect > .optWrapper ul::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

.table-top-right .SumoSelect > .optWrapper > .options li label {
  font-size: 13px;
}

.table-top-right .SumoSelect .select-all > label {
  font-size: 13px;
}

.page-top-right {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.table-section {
  margin-top: 20px;
}

.table-section .table_wrapper {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid #ebebeb;
  overflow: auto;
}

.table_wrapper tbody tr:last-child td {
  border: none;
}

.table_profile {
  width: 30px;
  min-width: 30px;
  height: 30px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
  margin-right: 5px;
}

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

.profile-details h6 {
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  color: #555454;
  margin-bottom: 0;
  white-space: nowrap;
}

.profile-details p {
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: #555454;
  white-space: nowrap;
}

.coupon_code {
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 12px 20px 12px 20px;
  display: flex;
  justify-content: space-between;
  min-width: 165px;
}

.coupon_code > span {
  font-family: Plus Jakarta Sans;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;
  color: #555454;
}

.coupon_code img {
  margin-left: 30px;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6;
}

.table-section table tbody tr:last-child {
  border-bottom: none !important;
}

.border-bottom td {
  padding-bottom: 15px !important;
}

.add-more-licenses table tbody tr td,
.purchase-success table tbody tr td {
  padding-bottom: 0;
}

.add-more-licenses table tbody tr:last-child,
.purchase-success table tbody tr:last-child {
  border-bottom: none !important;
}

.table-input-feild-wrapper {
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.table-text-feild {
  background-color: #f5f5f5;
  border: none;
  outline: none;
  padding-right: 0;
  padding: 13px 0px 13px 20px;
}

.table-text-feild:focus {
  outline: none;
  border: none;
}

.table-input-feild {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.table-input-feild-wrapper {
  justify-content: space-between;
}

.table-feild-link {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  color: #6878b6;
  cursor: pointer;
  margin: 0 15px 0 30px;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.table-feild-link img {
  display: none;
  margin-right: 10px;
}

.page-details > p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.drop-parent:hover .drop-list {
  display: block;
}

.tbody-white tr:first-child .drop-list .drop-down-list,
.tbody-white tr:nth-child(2) .drop-list .drop-down-list {
  bottom: auto;
  top: auto;
}

.success-section {
  background: #daf5f0;
  backdrop-filter: blur(25px);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-section div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-section h2 {
  font-weight: 600;
  font-size: 42px;
  line-height: 53px;
  color: #434343;
}

.success-section h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 23px;
  color: #7c7c7c;
  text-align: center;
}

.purchase-success .table-input-feild {
  flex-grow: unset;
}

.input-mail {
  height: 45px;
  display: flex;
  align-items: center;
  padding: 13px 0px 13px 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.table-input-feild-wrapper.sended .table-feild-link {
  color: #61d46c;
}

.table-input-feild-wrapper.sended .table-feild-link img {
  display: inline-block;
}

.purchase-success .button-block,
.individual-purchase-success .button-block {
  border-top: none;
  margin-top: 20px;
}

.two-equal-col {
  display: flex;
  margin: 0 -10px 0;
}

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

.plan-box {
  display: flex;
  min-height: 275px;
  margin-bottom: 25px;
  position: relative;
  cursor: pointer;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

.plan-box-left {
  width: 120px;
  min-width: 120px;
  background: linear-gradient(153.78deg, #a7b7e6 16.5%, #cfaefb 58.25%);
  -webkit-border-radius: 19px 0px 0px 19px;
  -moz-border-radius: 19px 0px 0px 19px;
  -o-border-radius: 19px 0px 0px 19px;
  border-radius: 19px 0px 0px 19px;
  position: relative;
}

.plan-box-left .plan-side-img {
  position: absolute;
  bottom: 30px;
  right: -20px;
  z-index: 9;
}

.plan-box-right {
  flex-grow: 1;
  -webkit-border-radius: 0 20px 20px 0;
  -moz-border-radius: 0 20px 20px 0;
  -o-border-radius: 0 20px 20px 0;
  border-radius: 0 20px 20px 0;
  padding: 30px;
  transition: all 0.3s ease;
}

.plan-box:hover .plan-box-right {
  background: rgb(243, 247, 255);
  background: linear-gradient(
    90deg,
    rgba(243, 247, 255, 1) 0%,
    rgba(227, 225, 252, 1) 100%
  );
}

.plan-box.active .plan-box-right {
  background: rgb(243, 247, 255);
  background: linear-gradient(
    90deg,
    rgba(243, 247, 255, 1) 0%,
    rgba(227, 225, 252, 1) 100%
  );
}

.plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #ffffff;
  flex-wrap: wrap;
}

.plan-title h2 {
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  color: #434343;
}

.plan-title h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: #434343;
}

.plan-title sub {
  font-size: 14px;
}

.plan-list {
  margin-top: 15px;
}

.plan-list li {
  font-weight: 500;
  font-size: 14px;
  line-height: 15px;
  color: #767676;
  list-style-image: url("../images/list_arrow.png");
  margin-left: 20px;
}

.plan-list li + li {
  margin-top: 15px;
}

.two-col-check-box {
  display: flex;
  flex-wrap: wrap;
}

.two-col-check-box > li {
  width: calc(50%);
  padding-right: 30px;
  margin: 8px 0;
}

.plan-buy-section {
  padding: 20px;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

.plan-switch-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------switching button-------------------- */

.switches-container {
  width: 420px;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: #f0f1f8;
  line-height: 42px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

/* input (radio) for toggling. hidden - use labels for clicking on */

.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

/* labels for the input (radio) boxes - something to click on */

.switches-container label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: #6878b6;
  font-weight: 600;
  font-size: 16px;
}

/* switch highlighters wrapper (sliding left / right) 
    - need wrapper to enable the even margins around the highlight box
*/

.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.33%;
  padding: 0.15rem;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* transition: transform 1s; */
}

/* switch box highlighter */

.switch {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #6878b6;
  height: 100%;
  box-shadow: 0px 0px 6px 4px rgba(104, 120, 182, 0.2);
}

/* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status 
*/

.switch div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: #ffffff;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  font-size: 16px;
}

/* Slide based on selected input */
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
  transform: translateX(0%);
}

.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
  transform: translateX(100%);
}

.switches-container input:nth-of-type(3):checked ~ .switch-wrapper {
  transform: translateX(200%);
}

/* Show only the correct content div */
.switches-container
  input:nth-of-type(1):checked
  ~ .switch-wrapper
  .switch
  div:nth-of-type(1) {
  opacity: 1;
}

.switches-container
  input:nth-of-type(2):checked
  ~ .switch-wrapper
  .switch
  div:nth-of-type(2) {
  opacity: 1;
}

.switches-container
  input:nth-of-type(3):checked
  ~ .switch-wrapper
  .switch
  div:nth-of-type(3) {
  opacity: 1;
}

/*  sub switch */

.switches-subscription {
  width: 300px;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: #f0f1f8;
  line-height: 42px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

/* input (radio) for toggling. hidden - use labels for clicking on */

.switches-subscription input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

/* labels for the input (radio) boxes - something to click on */

.switches-subscription label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: #6878b6;
  font-weight: 600;
  font-size: 16px;
}

/* switch highlighters wrapper (sliding left / right) 
    - need wrapper to enable the even margins around the highlight box
*/

.switch-wrapper-sub {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0.15rem;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* transition: transform 1s; */
}

.switches-subscription input:nth-of-type(1):checked ~ .switch-wrapper-sub {
  transform: translateX(0%);
}

.switches-subscription input:nth-of-type(2):checked ~ .switch-wrapper-sub {
  transform: translateX(100%);
}

/* Show only the correct content div */
.switches-subscription
  input:nth-of-type(1):checked
  ~ .switch-wrapper-sub
  .switch
  div:nth-of-type(1) {
  opacity: 1;
}

.switches-subscription
  input:nth-of-type(2):checked
  ~ .switch-wrapper-sub
  .switch
  div:nth-of-type(2) {
  opacity: 1;
}

/*  */

.plan-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}

.plan-price h3 {
  font-weight: 700;
  font-size: 42px;
  line-height: 49px;
  color: #6878b6;
  position: relative;
}

.plan-price .strike {
  position: relative;
  top: -20px;
  font-size: 16px;
  line-height: 16px;
  left: 0;
  color: #c1c0c0;
}

.plan-price sub {
  font-size: 18px;
  color: #505050;
  font-weight: 600;
}

.plan-price p {
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  text-align: center;
  color: #555454;
}

.license-adding-card {
  background: #f9f9f9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0 0;
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.license-add > li {
  margin-top: 20px;
}

.add-liscense-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

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

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

.minus-liscence,
.add-liscence {
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6878b6;
}

.minus-liscence {
  font-size: 1px;
}

.numb-license-key {
  width: 97px;
  height: 50px;
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 0;
  margin: 0 15px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.licence-indication {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  color: #555454;
}

.licence-indication img {
  margin-left: 10px;
}

.add-liscense-bottom h3 {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #6878b6;
  margin-bottom: 0;
}

.add-liscense-bottom h3 sub {
  font-size: 13px;
  font-weight: 500;
}

.license-adding-card-top p {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #767676;
}

.license-adding-card-top h5 {
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #555454;
}

.license-adding-card-top h6 {
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  color: #555454;
  margin-bottom: 0;
}

.license-card-close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.license-add > li > h5 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
}

.license-adding-card-top {
  padding-right: 40px;
}

.subscription .license-adding-card,
.generate-licence .license-adding-card {
  min-height: unset;
}

.subscription .checkmark-container {
  font-size: 14px;
  font-weight: 600;
}

.add-liscense-bottom {
  margin-top: 10px;
}

.license-key-feild-box {
  margin: 12px 0;
  display: flex;
  align-items: center;
  padding: 6px;
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.license-key-feild {
  flex-grow: 1;
  border: 0;
  outline: 0;
  background-color: #f5f5f5;
}

.terms {
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: -0.25px;
  color: #b0b0b0;
}

.license-key-feild-wrapper {
  margin-bottom: 50px;
}

h3 .strike-trough {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #a7a7a7;
}

.license-key-feild-box.active .grey-btn {
  background-color: #6878b6;
}

.liscenece-key-applied > li {
  border: 1px solid #61d46c;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.liscenece-key-applied > li + li {
  margin-top: 10px;
}

.liscenece-key-applied {
  margin-bottom: 50px;
}

.liscenece-key-applied > li > * {
  margin-top: 4px;
  margin-bottom: 4px;
}

.liscenece-key-applied > li > img {
  margin-right: 15px;
}

.liscenece-key-applied > li h6 {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #6878b6;
}

.liscenece-key-applied > li h6 > span {
  color: #555454;
  font-weight: 500;
  margin-left: 5px;
}

.liscenece-key-applied > li p {
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #555454;
  margin-top: 3px;
}

.liscenece-key-applied > li p span {
  color: #6878b6;
  font-weight: 600;
}

.remove-liscence-key {
  font-size: 14px;
  line-height: 17px;
  color: #fe6b6b;
  font-weight: 600;
  text-transform: uppercase;
}

.individual-purchase-success table tbody tr td:first-child {
  min-width: 145px;
}

.individual-purchase-success table tbody tr td:nth-child(2) {
  min-width: 215px;
}

.individual-purchase-success table tbody tr td:last-child {
  min-width: 85px;
}

/*----------------- profile-------------- */

.profile-settings .card-top {
  padding: 20px;
}

.twentyByeighty-col {
  display: flex;
}

.profile-menu-section {
  width: calc(20% - 10px);
  margin-right: 10px;
  min-width: 225px;
}

.profile-menu-section-inside {
  border: 1px solid #ebebeb;
  border-radius: 20px;
}

.profile-content-section {
  width: calc(80% - 10px);
  margin-left: 10px;
}

.card-profile-inner {
  padding: 20px;
}

/* ----------------profile upload----------- */

.avatar-upload-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30px 0 25px;
}

.avatar-upload {
  position: relative;
  /* max-width: 205px;
    margin: 50px auto; */
}

.avatar-upload .avatar-edit {
  position: absolute;
  right: 0;
  z-index: 1;
  bottom: 0;
}

.avatar-upload .avatar-edit input {
  display: none;
}

.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  border-radius: 100%;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.4s ease-in-out;
  background: linear-gradient(135.55deg, #87cefa 17.33%, #6878b6 90.25%);
}

.avatar-upload .avatar-edit input + label:hover {
  background: linear-gradient(135.55deg, #87cefa 30%, #6878b6 100%);
}

.avatar-upload .avatar-edit input + label:after {
  content: "\e90b";
  font-family: "icomoon";
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 100%;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #6878b6;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
}

.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.avatar-upload-wrapper h3 {
  margin: 20px 7px 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: #292d32;
  margin-bottom: 0;
  /* text-align: center; */
  word-break: break-all;
}

/*---------------------------- profile-sidemenu------------------------ */

.profile-side-menu {
  margin-bottom: 40px;
}

.profile-side-menu > li {
  padding: 14px 20px;
  background: #ffffff;
  transition: 0.3s all ease-in;
  cursor: pointer;
}

.profile-side-menu > li a {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.profile-side-menu > li:hover {
  background: linear-gradient(0deg, #e4dcff, #e4dcff), rgba(255, 255, 255, 0.1);
}

.profile-side-menu > li.active {
  background: linear-gradient(0deg, #e4dcff, #e4dcff), rgba(255, 255, 255, 0.1);
}

.renew-box {
  padding: 40px 25px;
  background: linear-gradient(100.35deg, #6878b6 5.03%, #a579ff 102.22%);
  backdrop-filter: blur(25px);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.profile-settings .plan-box {
  margin-bottom: 0;
}

.renew-box h2 {
  font-weight: 700;
  font-size: 64px;
  line-height: 81px;
  color: #fcfcfc;
}

.renew-box h5 {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #fcfcfc;
  margin-bottom: 10px;
  text-align: center;
  max-width: 200px;
  padding: 12px 0 22px;
}
.renew-box h6 {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #fcfcfc;
  margin-bottom: 10px;
  text-align: center;
}
.renew-box h4 {
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: #fcfcfc;
  margin-bottom: 30px;
}

.renew_btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  padding: 8px 20px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  color: #ffffff;
}

.renew_btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.profile-settings .plan-box {
  height: 100%;
}

.subject-addons-list {
  display: flex;
  align-items: stretch;
  margin: 10px -10px -10px;
  flex-wrap: wrap;
}

.subject-addons-list > li {
  padding: 20px;
  width: calc(33.33% - 20px);
  margin: 10px;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.subject-addons-list > li p {
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  color: #555454;
}

.subject-addons-list .add-new-addons {
  background: unset;
  background: #ffffff;
  border: 2px dashed rgba(104, 120, 182, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-new-addon-link {
  border-radius: 100%;
  width: 30px;
  height: 30px;
  background-color: #6878b6;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-new-addon-link:hover {
  background-color: #4d5887;
  color: #ffffff;
}

.subject-addons-list > li h5 {
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: #6878b6;
  margin-top: 8px;
}

.sub-add-ons {
  margin-top: 25px;
}

.sub-add-ons h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
  margin-bottom: 0;
}

.profile-settings .tab-content {
  height: 100%;
}

/*------------------- tools------------- */

.tools-item {
  padding: 20px;
}

.tools-item img {
  filter: drop-shadow(2px 2px 5px #b1b1b1);
  max-width: 70px;
  height: auto;
  font-size: 13px;
}

.tools-item h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #434343;
  margin-bottom: 0;
  /* margin-top: 10px; */
  max-width: 98%;
}

.tools-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  margin-top: 10px;
}

.tools_link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.tools-item:hover {
  background: url(../images/grid-bg.png), #f1f6fb;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  border: 1px solid #6878b6;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}

.unlock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  display: none;
  align-items: start;
  justify-content: center;
  padding-top: 20px;
}

.unlock li {
  display: flex;
  justify-content: center;
}

.unlock .icon-lock {
  font-size: 25px;
}

.unlock h6 {
  font-weight: 600;
  font-size: 19px;
  line-height: 24px;
  color: #6878b6;
  margin-bottom: 0;
  margin-top: 10px;
  text-align: center;
}

.tools-item.locked:hover img,
.tools-item.locked:hover h4,
.tools-item.locked:hover p {
  opacity: 0.3;
}

.tools-item.locked:hover .unlock {
  display: flex;
}

.tools-item.locked:hover {
  border: 1px solid #ebebeb;
  background: none;
  box-shadow: none;
}

.two-col-form-list .full-width-item {
  width: calc(100% - 20px);
}

/* radio btn */

.radio-btn-list {
  display: flex;
  flex-wrap: wrap;
}

.radio-btn-list p {
  margin-right: 30px;
}

.radio-btn-list [type="radio"]:checked,
.radio-btn-list [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.radio-btn-list [type="radio"]:checked + label,
.radio-btn-list [type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #737373;
  display: inline-block;
}

.radio-btn-list [type="radio"]:checked + label:before,
.radio-btn-list [type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #737373;
  border-radius: 100%;
  background: rgba(104, 120, 182, 0.1);
}

.radio-btn-list [type="radio"]:checked + label:before {
  border: 1px solid #6878b6;
}

.radio-btn-list [type="radio"]:checked + label:after,
.radio-btn-list [type="radio"]:not(:checked) + label:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #6878b6;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.radio-btn-list [type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.radio-btn-list [type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/*----------------- end of radio button----------------- */

.two-col-form-list .radio-btn-list {
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -5px;
  margin-bottom: -5px;
}

.two-col-form-list .radio-btn-list > p {
  margin-top: 5px;
  margin-bottom: 5px;
}

/*------------------- report-writing------------------- */

.character-limit-list > li {
  display: flex;
  align-items: center;
  margin: 10px;
}

.char-adding-box {
  display: flex;
  align-items: center;
}

.add-character,
.minus-character {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.add-character span,
.minus-character span {
  color: #6878b6;
  font-size: 23px;
  line-height: unset;
  font-weight: 400;
  display: block;
}

.numb-character,
.report-number {
  height: 52px;
  text-align: center;
  border: none;
  outline: none;
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  margin: 0 15px;
  width: 110px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
}

.card-body.text-center {
  color: #b0b0b0;
  padding: 10px 0;
}

.add-liscense-bottom h6.violet {
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: #555454;
}

.add-liscense-bottom h6.violet > span {
  font-size: 13px;
  font-weight: 400;
  color: #6878b6;
}

.character-limit-unlocked {
  position: relative;
  padding: 5px 5px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.character-lock {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
}

.character-limit-unlocked.locked .character-lock {
  display: flex;
}

.character-lock > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.character-lock p {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #6878b6;
  margin-top: 10px;
}

.character-lock span {
  font-size: 20px;
}

.quiz-builder .two-equal-left {
  margin-top: -10px;
  margin-bottom: -10px;
}

.quiz-builder .two-equal-right {
  padding-top: 30px;
}

.ck-wrapper {
  /* border: 1px solid #EBEBEB; */
  /* border-radius: 20px; */
  position: relative;
}

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

.text-feild-wrapper textarea {
  padding: 16px 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #555454;
  background-color: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  resize: none;
  border: none;
  min-height: 160px;
}

/*------------ 404--------- */

.not-found {
  position: relative;
  min-height: 100vh;
}

.not-found-inside {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.not-found-inside > li {
  margin-bottom: 15px;
}

.not-found-inside p {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #9f9f9f;
  text-align: center;
}

.not-found-inside h3 {
  font-weight: 700;
  font-size: 140px;
  line-height: 106px;
  color: #676767;
  margin: 0;
  text-align: center;
}

.not-found-inside h6 {
  font-weight: 600;
  font-size: 34px;
  line-height: 30px;
  color: #676767;
  margin: 0;
  text-align: center;
}

.not-found-image img {
  width: 130px;
}

/*multiple sumo select  */

.multiple-select .SumoSelect > .optWrapper > .options li.opt {
  padding: 15px 6px;
}

.multiple-select .SumoSelect > .optWrapper > .options li.opt {
  border-bottom: none;
  padding-left: 50px;
}

.multiple-select .SumoSelect > .optWrapper.multiple > .options li.opt span i,
.multiple-select .SumoSelect .select-all > span i {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  background-color: #f5f5f5;
}

.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
.SumoSelect .select-all.selected > span i,
.SumoSelect .select-all.partial > span i {
  background-color: #6878b6;
}

/* Track */

.form-feild ul.options::-webkit-scrollbar {
  width: 5px;
}

.form-feild ul.options::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.form-feild ul.options::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

/* Handle on hover */

.form-feild ul.options::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

/* toggle btn */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch input:focus {
  color: transparent;
}

.toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b9b7b7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.toggle-switch input:checked + .slider {
  background-color: #6878b6;
}

.toggle-switch input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}

/* Rounded sliders */

.toggle-switch .slider.round {
  border-radius: 34px;
}

.toggle-switch .slider.round:before {
  border-radius: 50%;
}

.colour_change input:checked + .slider {
  background-color: #34c759;
}

.button-inside-block {
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
}

.button-inside-block > div {
  margin: 20px -10px 10px;
}

.button-inside-block div > button,
.button-inside-block div > a {
  margin: 10px;
}

.button-inside-block .violet-btn {
  min-width: 190px;
  min-height: 46px;
}

.pdf-download a {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: #6878b6;
  transition: all 0.3s ease-in;
}

.pdf-download a:hover {
  color: #5666a5;
}

.pdf-download a > span {
  margin-left: 10px;
  font-size: 17px;
}

/*----------------- quiz builder------------- */

.quiz-builder .two-equal-right .card-inner {
  min-height: 346px;
  /* max-height: calc(100vh - 234px); */
  max-height: 735px;
  overflow: auto;
}

.exam-question .two-equal-right .card-inner {
  min-height: 346px;
  /* max-height: calc(100vh - 310px); */
  max-height: 620px;
  overflow: auto;
}

.quiz-list {
  width: 100%;
}

.quiz-list-item {
  background: #f9f9f9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.quiz-list-item + .quiz-list-item {
  margin-top: 20px;
}

.quiz-item-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #5b5b5b;
  margin-right: 50px;
}

.question,
.question-option {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #505050;
}

.question-option > li {
  /* list-style-type: upper-alpha; */
  margin-left: 15px;
}

.answer {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  color: #5b5b5b;
  margin-top: 15px;
}

.card-inner {
  padding: 20px;
}

/* width */

.card-inner::-webkit-scrollbar {
  width: 5px;
}

/* Track */

.card-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */

.card-inner::-webkit-scrollbar-thumb {
  background: #6878b6;
}

/* Handle on hover */

.card-inner::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

.button-iside-cardblock {
  display: flex;
  justify-content: flex-end;
  margin: 25px -10px 5px;
}

.button-iside-cardblock > * {
  margin: 10px;
}

.dlt-option {
  position: absolute;
  top: 20px;
  right: 20px;
}

.dlt-option p {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: #ef7070;
  cursor: pointer;
}

.dlt-option p:hover {
  color: #c70f0f;
  cursor: pointer;
}

.dlt-option p:hover {
  color: #c70f0f;
}

.dlt-option span {
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
  color: #6878b6;
}

/*--------------------- question builder ----------------- */

.exam-qstn-builder-history .lesson-history-info {
  min-height: 140px;
}

.real-world-qstn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.real-world-qstn > div > label {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #737373;
  margin-bottom: 20px;
}

.exam-question .two-equal-right {
  padding-top: 40px;
}

/*-------------------- subject------------------ */

.code-explainer .radio-btn-list > p {
  width: calc(33.33% - 30px);
}

.code-explainer .two-col-form-list .radio-btn-list {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.code-left-textarea {
  height: 400px;
}

.code-left-textarea textarea {
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: #737373;
  background: #f9f9f9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 0;
  resize: none;
  height: 100%;
  padding: 15px;
  overflow: hidden;
  cursor: auto;
}

.code-left-textarea textarea:hover {
  overflow: auto;
}

/* width */

.code-left-textarea textarea::-webkit-scrollbar {
  width: 3px;
}

/* Track */

.code-left-textarea textarea::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.code-left-textarea textarea::-webkit-scrollbar-thumb {
  background: #6878b6;
}

/* Handle on hover */

.code-left-textarea textarea::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

.copy_button {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  z-index: 9999;
}

.ck-code-generated .copy_button {
  display: flex;
}

.code-explainer .two-equal-right {
  padding-top: 40px;
}

/*--------------------- notificatio--------------- */

.notification-alert {
  display: none;
  position: absolute;
  width: 400px;
  top: 65px;
  right: 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  z-index: 9;
  box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  transition: all 0.3s ease-in;
}

.notification-alert.show {
  display: block;
}

.notification-top {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.notification-top h4 {
  margin-bottom: 0;
}

.close-notify {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 14px;
  color: #c9c9c9;
}

.notification-body {
  max-height: calc(70vh - 145px);
  overflow: auto;
  min-height: 150px;
}

.notification-body::-webkit-scrollbar {
  display: none;
}

.notification-body > li {
  border-top: 1px solid #eaeaea;
  padding: 8px 20px;
  display: flex;
}

.notification-content {
  flex-grow: 1;
}

.notification-content a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #737373 !important;
}

.notification-body li:last-child {
  border-bottom: 1px solid #eaeaea;
}

.notification-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: center;
}

.notification-footer > a {
  font-weight: 600;
  font-size: 20px;
  color: #6878b6;
}

/*--------------------- PROFILE----------------- */

.profile-top {
  display: none;
  position: absolute;
  min-width: 300px;
  top: 65px;
  right: 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  z-index: 9;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.1);
}

.profile-top.show {
  display: block;
}

.profile-popup .profile-pic {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.8s all ease-in;
}

.profile-popup {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.profile-popup > li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 14px;
  color: #c9c9c9;
}

.profile-popup > li:first-child {
  padding-bottom: 10px;
}

.profile-popup > li {
  border-bottom: 1px solid #eaeaea;
}

.profile-popup > li:last-child {
  border-bottom: none;
}

.profile-popup > li + li {
  padding: 10px 0 0;
}

.profile-popup h6 {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 0;
  color: #292d32;
}

.profile-popup p {
  color: #555454;
  font-size: 13px;
}

.profile-popup .violet-btn {
  height: 40px;
  width: 100%;
}

.view-profile > a {
  margin-bottom: 10px;
  color: #292d32;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.double-input-feilds {
  display: flex;
  margin: -10px;
}

.double-input-feilds > div {
  flex-grow: 1;
  margin: 10px;
}

.input--item-label {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #737373;
  margin-bottom: 10px;
}

.input-feild-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #737373;
  white-space: nowrap;
  margin-bottom: 10px;
}

.license-add-accordian {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.license-add-accordian h5 {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: rgb(67, 67, 67);
}

.accord-btn > span {
  font-size: 7px;
  color: #6878b6;
  font-weight: 300;
}

.accord-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.accord-btn:hover {
  background-color: #6878b6;
}

.accord-btn:hover span {
  color: #ffffff;
}

.accord-btn.arrow-up span {
  transform: rotate(-180deg);
}

.purchased-subs {
  max-height: 400px;
  overflow: auto;
  /* padding-right: 3px; */
  margin-top: 20px;
}

/* .purchased-subs:hover{
    overflow: auto;
    padding-right: 0;
} */

.purchased-subs > .license-adding-card:first-child {
  margin-top: 0;
}

/* width */

.purchased-subs::-webkit-scrollbar {
  width: 3px;
}

/* Track */

.purchased-subs::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.purchased-subs::-webkit-scrollbar-thumb {
  background: #6878b6;
}

/* Handle on hover */

.purchased-subs::-webkit-scrollbar-thumb:hover {
  background: #6878b6;
}

/* custom question adding */

.choice_add {
  display: flex;
  margin: 0 -5px;
}

.choice_add > * {
  margin: 0 5px;
}

.add_new_choice {
  border: 1px solid #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s all ease;
  background-color: #ffffff;
}

.add_new_choice > span {
  color: #6878b6;
  cursor: pointer;
}

.add_new_choice:hover {
  border-color: #6878b6;
  background-color: #6878b6;
}

.add_new_choice:hover .icon-plus_icon {
  color: #ffffff;
}

.choice-list {
  width: 100%;
  min-height: 100px;
  border: 1px solid #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  padding: 8px;
}

.choice-list > li {
  padding: 5px 35px 5px 5px;
  background-color: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}

.choice-list > li + li {
  margin-top: 8px;
}

.choice-list > li p {
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: #505050;
}

.choice-close {
  position: absolute;
  right: 0px;
  top: 0;
  line-height: 1;
  font-size: 18px;
  color: #505050;
  cursor: pointer;
  width: 20px;
}

.add_qstn {
  width: 600px;
}

/*--------------------------------- filter---------------------- */

.table-filter {
  position: relative;
}

.filter-box {
  min-width: 150px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.filter-box:hover {
  background-color: #f0f2f8;
}

.filter-box > p {
  color: #434343;
  font-size: 14px;
}

.filter-box.active {
  background-color: #f0f2f8;
}

.filter-wrapper {
  display: none;
  position: absolute;
  top: 120%;
  right: 0;
  flex-direction: column;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  min-width: 325px;
  width: 100%;
  padding: 15px;
  z-index: 97;
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.filter-wrapper.active {
  display: flex;
}

.filter-wrapper .SumoSelect {
  width: 100% !important;
}

.filter-item + .filter-item {
  margin-top: 15px;
}

.ui-datepicker-title select {
  border: 1px solid rgb(118, 118, 118);
  outline: unset;
  opacity: 1;
}

.two-item-filter {
  display: flex;
  align-items: center;
  margin: 0 -5px;
}

.date-selector-wrapper {
  margin: 0 5px;
  position: relative;
  flex-grow: 1;
}

.date-selector-wrapper .calender-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

.select-date {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
}

.select-date::-webkit-input-placeholder {
  /* Edge */
  color: #ccc;
}

.select-date:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
}

.select-date::placeholder {
  color: #ccc;
}

.filter-title {
  position: relative;
  margin-bottom: 12px;
}

.close-filter {
  position: absolute;
  top: -21px;
  right: -6px;
  z-index: 9;
  font-size: 24px;
  color: #a5a5a5;
  cursor: pointer;
}

.filter-title h5 {
  font-size: 15px;
  line-height: 19px;
  color: #7e7e7e;
}

.table-filter.applied .filter-box {
  position: relative;
}

.table-filter.applied .filter-box .applied-count {
  position: absolute;
  right: 7px;
  top: 6px;
  background-color: #fb8181;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  padding: 1px;
}

.dlt-lesson {
  position: absolute;
  top: 20px;
  right: 20px;
  background: no-repeat;
  text-transform: uppercase;
  color: #808080b5;
  font-size: 13px;
  font-weight: 600;
  z-index: 9;
}

.lesson-info:hover .dlt-lesson {
  color: #fe6b6b;
}

.min-pagination-plus {
  min-height: calc(100vh - 275px);
}

.min-pagination {
  min-height: calc(100vh - 252px);
}

.input_items .licence-date-selector {
  position: relative;
}

.licence-date-selector .calender-icon {
  position: absolute;
  top: 17px;
  right: 20px;
}

.licence-date {
  width: 100%;
  border: 0;
  background-color: #f5f5f5;
  height: 52px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-image: url(../images/calender_icon.png);
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.lic-generated .license-card-close {
  display: none;
}

.lic-generated .license-adding-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

.gen-licence {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 180px;
  background-color: #ffffff;
  padding: 6px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #dbdbdb;
  margin-left: 15px;
}

.gen-licence span {
  font-family: Plus Jakarta Sans;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: 0em;
}

.gen-licence > a {
  margin-left: 15px;
  display: inline-block;
}

.generate-licence .license-card-close {
  top: 15px;
}

/* auto scomplete arrow hidding */

.select-arrow .login-input-feild {
  padding-right: 50px;
}

.notification .table_wrapper tr td:nth-child(1),
.notification .table_wrapper tr th:nth-child(1) {
  text-align: center;
}

/* pop up size */

#sub-topic-popup,
#propmt-popup,
#gpthistory-popup {
  min-width: 650px;
}

#popup_head {
  font-size: 20px;
  line-height: 100%;
  margin-bottom: 14px;
}

.lang-prefernce-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.lang-prefernce-section h3 {
  font-size: 16px;
  color: #434343;
  line-height: 100%;
  font-weight: 600;
  margin: 0px;
}

.lang-prefernce-section p {
  color: #767676;
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
}

.lang-popup-head {
  margin-bottom: 16px;
}

input[type="range"] {
  -webkit-appearance: none; /* Remove default style */
  width: 300px;
  height: 8px;
  border-radius: 5px;
  background: red; /* fallback background */
  outline: none;
  margin-top: 10px;
}

/* Chrome, Safari, Edge */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 5px;
  background: #e1e3e8; /* Track color */
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: rgb(141, 55, 141);
  cursor: pointer;
  margin-top: -5px; /* align thumb */
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  background: #e1e3e8; /* Track color */
}
input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: blue;
  cursor: pointer;
}

/* IE */
input[type="range"]::-ms-track {
  height: 8px;
  border-radius: 5px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #3961c5;
  border-radius: 5px;
}
input[type="range"]::-ms-fill-upper {
  background: red;
  border-radius: 5px;
}

input[type="range"] {
  background: linear-gradient(to right, #4caf50 50%, #ddd 50%);
}

/* Remove default look */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 6px;
  background: #6878b6; /* keep track light grey */
  border-radius: 5px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #6878b6; /* ✅ thumb color */
  cursor: pointer;
  margin-top: -6px; /* align thumb with track */
}

/* Thumb - Firefox */
input[type="range"]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #6878b6; /* ✅ thumb color */
  cursor: pointer;
}

/* Thumb - IE */
input[type="range"]::-ms-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #6878b6; /* ✅ thumb color */
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: red !important;
  cursor: pointer;
}

.payment-status-img {
  width: 200px;
}

.payment-status-img {
  width: 200px;
}

.code-editor-box {
  border: 1px solid #ebebeb;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
}

.code-editor-box-top {
  padding: 15px 20px;
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 25.1%,
    rgba(104, 120, 182, 0.1) 76.25%
  );
  -webkit-border-radius: 19px 19px 0px 0px;
  -moz-border-radius: 19px 19px 0px 0px;
  -o-border-radius: 19px 19px 0px 0px;
  border-radius: 19px 19px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.code-editor-box-body {
  height: 574px;
  overflow: auto;
  padding: 20px;
}

.code-editor-box-body::-webkit-scrollbar {
  width: 5px;
}

.code-editor-box-body::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.code-editor-body li {
  list-style-type: decimal;
  margin: 5px 0 5px 15px;
}

/* Handle */

.code-editor-box-body::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

.code-editor-box-body .code-editor-details {
  color: #181818;
  font-size: 15px;
  line-height: 20px;
}

.code-editor-details p {
  color: #181818;
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 5px;
}

.code-editor-details li {
  margin: 5px 0 5px 15px;
}

.code-editor-box-body > p {
  margin-bottom: 10px;
  color: #181818;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.code-writter-body > textarea {
  resize: none;
}

.code-editor-box-body ul li {
  list-style-type: disc;
  margin: 5px 0 5px 15px;
}

.teach-collab-plan {
  margin-top: 40px;
}

p.pre-social-login-p {
  color: #ffffff;
  font-size: 14px;
}

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

.guide-tooltip {
  padding-left: 5px;
}

.guide-tooltip img {
  filter: brightness(0.8);
  width: 12px;
}

.tooltip-custom .tooltip-inner {
  background-color: #020202;
  color: #ffffff;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-size: 14px;
  line-height: 18px;
  padding: 12px;
  max-width: 400px;
}

.tooltip-custom.tooltip.show {
  opacity: 1;
}

.tooltip-custom.bs-tooltip-auto[data-popper-placement^="right"]
  .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #020202;
}

.tooltip-custom.bs-tooltip-auto[data-popper-placement^="top"]
  .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #020202;
}

.tooltip-custom.bs-tooltip-auto[data-popper-placement^="left"]
  .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #020202;
}

.tooltip-custom.bs-tooltip-auto[data-popper-placement^="bottom"]
  .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #020202;
}

.payment-history-table {
  max-height: 600px;
  overflow: auto;
}

.payment-hist-tab {
  overflow: hidden;
}

.unsubscribe-btn-block {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.unsubscribe-btn-block > a {
  color: #485caa;
  text-decoration: underline;
}

.pop-form-width {
  width: 100%;
}

.textarea-height {
  height: 20vh !important;
  padding: 13px 20px;
}

.popup-table-wrapper {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  overflow: auto;
}

.popup-table-wrapper td,
.popup-table-wrapper th {
  padding: 8px 15px;
}

.popup-table-wrapper td {
  font-size: 14px;
}

.payment-popup {
  min-width: 1000px;
  width: 70%;
}

.terms-div p {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}

.two_button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: -8px;
}

.two_button > * {
  margin: 8px;
}

.blocked_btn {
  position: relative;
}

.blocked_btn.locked .violet-btn {
  cursor: not-allowed;
  background-color: #a7b4e7;
  border-color: #a7b4e7;
}

.blocked_btn.locked .violet-btn:hover {
  cursor: not-allowed;
}

/* .blocked_btn .icon-lock {
    position: absolute;
    color: #ffffff;
    top: 50%;
    right: 10px;
    transform: translatey(-50%);
} */

.blocked_btn .icon-lock:before {
  color: #ffffff;
}

.prompt-youtube-regenerate-videos {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  justify-content: space-between;
  width: 100%;
}

.prompt-youtube-regenerate-videos > div {
  margin: 10px;
  width: calc(33.33% - 20px);
}

.prompt-youtube-regenerate-videos > div h5 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
}

.sidebar-contact-wrapper {
  position: relative;
  border-radius: 20px;
  margin-top: 20px;
}

.sidebar-contact {
  background: rgb(147, 111, 213);
  background: linear-gradient(
    82deg,
    rgba(147, 111, 213, 1) 0%,
    rgba(130, 85, 212, 1) 100%
  );
  backdrop-filter: blur(25px);
  padding: 12px;
  border-radius: 15px;
  border: 1px solid transparent;
  position: relative;
  background-clip: padding-box;
  z-index: 0;
}

.sidebar-contact-wrapper:after {
  content: "";
  position: absolute;
  display: block;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  background: linear-gradient(
    to bottom right,
    #ffffff,
    rgba(139, 73, 222, 1),
    #ffffff
  );
  z-index: -1;
  border-radius: 15px;
}

.sidebar-contact a,
.sidebar-contact p {
  color: #ffffff;
  font-size: 14px;
  line-height: 8px;
}

.privacy-policy-div ul li {
  list-style-type: disc;
  list-style-position: inside;
}

.privacy-policy-div u {
  color: #6878b6;
}

.privacy-policy-div {
  margin-top: 20px;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #555454;
}

.privacy-policy-div p {
  margin-bottom: 10px;
}

/*---------------------------------- admin settings css-------------------------------------- */
.value_div {
  display: flex;
  flex-direction: column;
}

.value_div > label {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  margin-bottom: 5px;
}

.value_btn_pair > .input_value {
  border: 1px solid #cccccc;
  border-radius: 4px;
  height: 40px;
  outline: none;
  flex-grow: 1;
}

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

.value_div .add-new,
.value_div .remove_value {
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6878b6;
}

.value_div .remove_value > span {
  font-size: 2px;
}

.value_btn_pair .checkmark-container {
  margin: 0 10px;
}

.value_div + .value_div {
  margin-top: 15px;
}

.pop-input-wrapper textarea {
  border: none;
  outline: none;
  border-radius: 4px;
  height: 130px;
  outline: none;
  resize: none;
  padding: 10px;
  font-size: 14px;
}

.pop-input-wrapper textarea:focus {
  outline: none !important;
}

.table-top-tabs {
  display: flex;
  margin-bottom: 15px;
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  overflow: auto;
}

.table-top-tabs::-webkit-scrollbar {
  height: 5px;
  width: 0;
}

.table-top-tabs::-webkit-scrollbar-track {
  background: #f3f3f3;
}

.table-top-tabs::-webkit-scrollbar-thumb {
  background: #acacac;
  border: 1px solid #acacac;
  border-radius: 13px;
  background-clip: content-box;
}

.tool-type-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 25px;
  height: 45px;
  color: #6878b6;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.tool-type-link b {
  white-space: nowrap;
}

.tool-type-link:after {
  content: "";
  position: absolute;
  top: 7.5px;
  right: 0;
  width: 1px;
  height: calc(100% - 15px);
  background-color: #e5e4e4;
}

.tool-type-link.active,
.tool-type-link.selected {
  background-color: #6878b6;
  color: #ffffff;
}

.tool-type-link.active:after,
.tool-type-link.selected:after {
  display: none;
}

.upload_icon_wrapper > label {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  margin-bottom: 5px;
}

.upload_icon_wrapper {
  width: 30%;
  margin-right: 50px;
}

.upload_icon_wrapper input {
  width: 100%;
}

.form-feild .login-input-feild {
  height: 52px;
  padding: 15px 20px;
  background-color: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.inside-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0px;
  text-align: left;
}

.form-feild .input_tool {
  height: 52px;
  padding: 15px 20px;
  background-color: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.add-condition {
  width: 175px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.add-condition span {
  margin-right: 10px;
}

.edit-condition {
  width: 175px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.edit-condition span {
  margin-right: 10px;
}

.validation_msg {
  min-width: 100%;
  border-radius: 10px;
  height: 52px;
}

.tool-row .add-new,
.tool-row .remove_condition,
.tool-row .remove_db_condition {
  background: linear-gradient(
    220.29deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 93.02%
  );
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6878b6;
}

.tool-row .remove_condition > span,
.tool-row .remove_db_condition > span,
.remove_template_value > span {
  font-size: 1px;
}

.tool_templateForm hr,
.add-tool-template-masters hr {
  background-color: #d1d1d1;
}

.view-temp-col .form-feild {
  font-size: 14px;
}

.view-temp-col .input_items label {
  margin-bottom: 10px;
  margin-top: 7px;
}

#id_custom_tool_type_subscription {
  display: flex;
  margin: 0 -10px;
}

.tool_type_subscription {
  height: auto;
}

.tool_type_subscription > div {
  display: flex;
  margin: 0 10px;
}

#id_layout {
  display: flex;
  margin: 0 -10px -10px;
}

#id_layout > div {
  margin: 10px;
}

#id_layout input {
  height: auto;
  margin-right: 15px;
}

#id_layout label {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #737373;
  margin-bottom: 10px;
}

/* width */
.template-table:-webkit-scrollbar {
  height: 10px;
  width: 0;
}

/* Track */
.template-table::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.template-table::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.template-table::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.premium_overlay {
  display: none;
}

.premium .premium_overlay {
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -o-border-radius: 18px;
  border-radius: 18px;
  z-index: 9999;
}

.premium_icon {
  width: 30px !important;
  height: 30px !important;
}

.premium:hover .premium_overlay {
  display: flex;
}

.premium:hover > img,
.premium:hover p,
.premium:hover h4 {
  opacity: 0.5;
}

.template-prompt {
  height: calc(100vh - 350px);
  min-height: 400px !important;
  padding: 0 !important;
}

.template-prompt-right {
  padding-top: 35px;
}

.custom_feilds-add .input_items textarea {
  height: 150px;
  border-radius: 10px;
  resize: none;
  background-color: #f5f5f5;
  border: none;
  font-size: 14px;
  padding: 17px 50px 17px 20px;
}

.custom_feilds-add .input_items textarea:focus {
  border: 1px solid #6878b6;
  box-shadow: none;
}

.custom_feilds-add .input_items input[type="radio"] {
  height: auto;
  margin: 0 15px;
}

.prompt-ck-card {
  border: none;
}

.prompt-ck-card .card-top {
  border: 1px solid #dddddd;
  border-bottom: none;
}

.custom_icon > span {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  padding: 5px;
}

.custom_icon > span > img {
  width: 100%;
  height: 100%;
}

.radio-btn-list span.icon-premium_icon {
  font-size: 17px;
  color: #6878b6;
}

/* --------------------icon upload-------------------------- */
.picture-container {
  position: relative;
  cursor: pointer;
  text-align: center;
  width: 120px;
  height: 120px;
  margin-top: 15px;
}

.picture {
  width: 120px;
  height: 120px;
  background: url(../images/choose_icon.png);
  border: 2px solid #cccccc;
  color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

.picture-src {
  width: 100%;
  height: 100%;
}

.picture:hover {
  border-color: #6878b6;
}

.picture input[type="file"] {
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0 !important;
  position: absolute;
  top: 0;
  width: 100%;
}

.picture-container h6 {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5px;
  font-size: 13px;
  color: #767676;
}

.picture-container.changed .picture {
  background: #ffffff;
}

.picture-container.changed h6 {
  display: none;
}

.picture-container .picture img {
  display: none;
}

.picture-container.changed .picture img {
  display: block;
}

.picture-container .close-button {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  width: 21px;
  height: 21px;
  background-color: rgb(161, 1, 1);
  color: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-radius: 50%;
  border-radius: 50%;
  line-height: 1;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.picture-container .close-button span {
  font-size: 14px;
  line-height: 1;
  height: 19px;
}

.picture-container.changed .close-button {
  display: flex;
}

/* .choice {
    text-align: center;
    cursor: pointer;
}

.choice input[type="radio"], .choice input[type="checkbox"] {
    position: absolute;
    left: -10000px;
    z-index: -1;
}

.choice .icon {
    text-align: center;
    vertical-align: middle;
    height: 106px;
    width: 106px;
    border-radius: 50%;
    color: #999999;
    margin: 5px auto;
    border: 4px solid #CCCCCC;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
	overflow: hidden;
}

.choice .icon:hover {
    border-color: #4caf50;
}

.choice.active .icon {
    border-color: #2ca8ff;
} */
.layout-image {
  width: 240px;
}

.layout_choose_image {
  margin-top: 17px;
  display: flex;
  flex-direction: column;
}

.layout_radio p {
  margin-right: 10px;
}

.layout_choose_image h6 {
  font-size: 14px;
  margin-top: 5px;
}

.icon_preview {
  width: 120px;
  height: 120px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #dddddd;
  margin-top: 2px;
}

.icon_preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.table-checkbox .checkmark-container {
  display: block;
}

.table-checkbox .checkmark {
  transform: translateY(-50%);
  top: 50%;
}

/* .edit-condition {
  width: 45px;
  height: 45px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  margin-top: 5px;
}
.edit-condition span {
  font-size: 16px;
} */
#generate-prompt-editor::-webkit-scrollbar {
  display: none;
}

/*-----------------lay out css-------------------------- */
.two-equal-col.inputRight_resultLeft {
  flex-direction: row-reverse;
}

.two-equal-col.inputTop_resultBottom {
  flex-direction: column;
}

.two-equal-col.inputTop_resultBottom .two-equal-item {
  width: calc(100% - 20px);
}

.two-equal-col.inputTop_resultBottom .template-prompt-right {
  padding-top: 20px;
}

.two-equal-col.inputRight_resultLeft .template-prompt-right {
  padding-top: 15px;
}

/*  */
.form-section-head {
  display: flex;
}

.form-section-items {
  border: 1px solid #ebebeb;
  padding: 7px 15px 10px 12px;
  margin: 0 5px;
  border-radius: 10px;
  color: #555454;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  border-radius: 10px;
  border: 1px solid #ebebeb;
  background: #fff;
  word-break: break-all;
  min-width: 100px;
  max-width: 100%;
}

/* ------------------------akshay--------- */

.laqbel-style {
  background-color: #f1f1f1;
  padding: 10px 25px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

.laqbel-style input {
  margin-right: 5px;
}

.checked {
  top: 10px;
  left: 3px;
}

.decription_label {
  display: block;
  font-style: italic;
  font-size: 12px;
  line-height: 16px;
  font-weight: 300;
  color: #b1b1b1;
}

.page-top-select {
  width: 185px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid #ebebeb;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.select-style {
  border: none !important;
  outline: none !important;
  height: 38px !important;
  width: 100% !important;
}

.select-style span {
  width: 200px !important;
}

.page-top-select span {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.history-saved-wrapper {
  width: 320px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(104, 120, 182, 0.1);
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-save-button {
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.history-btn {
  margin-left: 20px;
}

.saving-btn {
  margin-right: 50px;
}

.history-save-button:hover,
.history-active a {
  height: 42px;
  padding: 11px 18px;
  width: 150px;
  border-radius: 10px;
  background: #6878b6;
  -webkit-box-shadow: 0px 0px 6px 4px rgba(104, 120, 182, 0.2);
  -moz-box-shadow: 0px 0px 6px 4px rgba(104, 120, 182, 0.2);
  -o-box-shadow: 0px 0px 6px 4px rgba(104, 120, 182, 0.2);
  box-shadow: 0px 0px 6px 4px rgba(104, 120, 182, 0.2);
  color: #fff;
  margin: 0;
}

.tab-contents {
  overflow: scroll;
}

.tab-contents::-webkit-scrollbar {
  display: none;
}

.tab-contents {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tab-contents #save-tab {
  display: none;
}

.tab-contents .active {
  display: block;
}

.view-li {
  display: flex;
  justify-content: flex-end;
}

.eye-icon {
  margin-right: 20px;
  width: 24px;
  height: 24px;
}

.drop-down {
  margin-left: 20px;
}

.drop-down-list {
  display: none;
  position: absolute;
  right: 0;
  top: 19px;
  background-color: #ffffff;
  z-index: 99999999999;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 4px 2px rgba(159, 159, 159, 0.1);
  text-align: start;
  text-wrap: nowrap;
  /* width: 150px; */
}

.drop-down:hover .drop-down-list {
  display: block;
}

.drop-down-list li {
  padding: 10px;
  background: #fff;
  transition: 0.3s all ease-in;
}

.drop-down-list li:hover {
  background: #f4f4f4;
}

.drop-down-list li:hover a {
  color: #6878b6;
}

.drop-a-items:hover {
  background: #f4f4f4;
  color: #6878b6;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.drop-delete {
  color: #fe6b6b;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  width: 100%;
  display: inline-block;
}

.drop-a-items {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  width: 100%;
  display: inline-block;
}

.td-hov-style {
  cursor: pointer;
  min-width: 150px;
}

.td-hov-style:hover {
  color: #6878b6;
}

.save-icon {
  width: 20px;
  height: 20px;
  min-width: 15px;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closing-icon {
  width: 24px;
  display: flex;
}

.card-teaxt-area textarea {
  font-size: 14px;
}

.card-teaxt-area label {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 15px;
}

.card-teaxt-area input {
  border-radius: 10px;
  background: #f5f5f5;
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  padding-right: 50px;
}

/* side Popup */

.pop-title {
  display: flex;
  justify-content: space-between;
}

.pop-title p {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 700;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  overflow-x: hidden;
  display: flex;
  justify-content: flex-end;
}

.pop-main-wrapper {
  width: 40%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
  padding: 70px 30px;
  transition: 0.4s;
  position: relative;
  right: -100%;
  overflow-y: scroll;
}

.pop-main-wrapper::-webkit-scrollbar {
  display: none;
}

.pop-main-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pop-main-wrapper.show_style {
  right: 0;
}

.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.closebtn {
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left 0.5s;
  padding: 20px;
}

.sidenav {
  right: 0;
}

.pop-titles {
  width: 100%;
  margin-top: 30px;
}

.pop-title-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pop-title-wrapper p {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  width: 95%;
}

.popup-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px;
  border-radius: 19px 19px 0px 0px;
  background: linear-gradient(
    261deg,
    rgba(135, 206, 250, 0.1) 25.1%,
    rgba(104, 120, 182, 0.1) 76.25%
  );
}

.popip-top-icons {
  display: flex;
  position: relative;
}

.pop_close_btn {
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.save-icon-input {
  position: relative;
}

.input-save-icon {
  position: absolute;
  top: 55px;
  right: 15px;
  width: 30px;
  height: 30px;
}

.history-table tr:first-child .drop-down-list,
.history-table tr:nth-child(2) .drop-down-list {
  bottom: auto;
  top: auto;
}

.tool-input-title-span {
  color: #1d1d1d;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin-right: 5px;
}

.ck-editor-save-icon {
  position: absolute;
  top: 15px;
  right: 15px;
}

.card-title-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
}

.card-title-section h4 {
  color: #434343;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  margin-left: 13px;
  word-break: break-all;
}

.top-icons {
  display: flex;
  /* min-width: 210px; */
  justify-content: flex-end;
  width: calc(50% - 15px);
  gap: 15px;
  align-items: center;
}

.ck_content_wrapper {
  padding: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border: 1px solid #ebebeb;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.ck_generated_content {
  padding: 34px 20px 19px;
  border-radius: 10px;
  background: #f9f9f9;
}

.ck_generated_content h6 {
  color: #555454;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.ck_generated_content p {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
}

.ck_generated_content h5 {
  color: #555454;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.ck_generated_content h4 {
  color: #555454;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.ck_generated_content h3 {
  color: #555454;
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  margin: 10px 0;
}

.ck_generated_content h2 {
  color: #555454;
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
  margin: 10px 0;
}

.ck_generated_content h1 {
  color: #555454;
  font-size: 22px;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 0;
}

.ck_card_bottum_section {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.generate-input-section {
  border-radius: 6px;
  border: 1px solid #ededed;
  background: #fff;
  padding: 4px;
  width: 60%;
  display: flex;
  justify-content: space-between;
}

.generate-input-section input {
  width: 89%;
  height: 21px;
  background: none;
  border: none;
  outline: none;
}

.generate-input-section button {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transform-button {
  border-radius: 6px;
  background: #6878b6;
  padding: 8px 18px 8px 18px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.transform-button span {
  margin-right: 2px;
}

.transform-btn {
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.language-switching-button {
  position: relative;
}

.language-witch-btn {
  background: #6878b6;
  border-radius: 6px;
  padding: 8px 18px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.language_switch-drop_btn {
  margin-left: 7px;
}

.language-switching {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 4px 2px rgba(159, 159, 159, 0.1);
  position: absolute;
  right: 0;
  bottom: 105%;
  z-index: 97;
  max-height: 500px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.language-switching::-webkit-scrollbar {
  display: none;
}

.language-switching li {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  padding: 16px;
}

.language-switching li:hover {
  color: #6878b6;
  background: #f4f4f4;
}

.language-switching li:hover a {
  color: #6878b6;
}

.language-switching li,
a {
  white-space: nowrap;
  color: #555454;
}

.default-prompts-wrapper {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 4px 2px rgba(159, 159, 159, 0.1);
  position: absolute;
  right: 0;
  bottom: 112%;
  width: 300px;
  z-index: 97;
  border: 1px solid #ebebeb;
  max-height: 500px;
  overflow-y: auto;
}

.default-prompts-wrapper li p {
  white-space: nowrap;
  color: #dadada;
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
}

.default-prompts-wrapper > li {
  color: #555454;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.default-prompts-wrapper::-webkit-scrollbar {
  width: 5px;
}

.set-as-default {
  white-space: nowrap;
  color: #dadada;
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
}

.default-prompts-wrapper > li:hover {
  color: #6878b6;
}

.default-prompts-wrapper > li:hover .set-as-default,
.default-prompts-wrapper > li.active .set-as-default {
  display: block;
}

.send-feedback {
  text-decoration: underline;
}

.custom_plus {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f4f4;
  cursor: pointer;
}

.custom_plus > h6 {
  color: #6878b6;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
}

.default-prompts-wrapper > li {
  padding: 10px 20px;
}

.default-prompts-wrapper > li > input {
  border-radius: 6px;
  background: #f5f5f5;
  margin-top: 5px;
  border: none;
  outline: none;
  width: 198px;
  height: 39px;
}

.transform-save-btn {
  border-radius: 6px;
  background: #6878b6;
  padding: 10px 23px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.transform-save-btn-wrapper {
  display: flex;
  justify-content: flex-end !important;
  margin-top: 12px;
  cursor: pointer;
}

.ck_generated-item li {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style-type: disc;
  margin-left: 20px;
}

.padding_bottum-60 {
  padding-bottom: 60px;
}

.card-teaxt-area {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  background: #f9f9f9;
  resize: none;
}

.card-teaxt-area li {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.card-teaxt-area p {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.card-teaxt-area h1 {
  color: #555454;
  font-size: 22px;
  font-weight: 700;
  line-height: 20px;
}

.card-teaxt-area h2 {
  color: #555454;
  font-size: 21px;
  font-weight: 700;
  line-height: 20px;
}

.card-teaxt-area h3 {
  color: #555454;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

.card-teaxt-area h4 {
  color: #555454;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.card-teaxt-area h5 {
  color: #555454;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.card-teaxt-area h6 {
  color: #555454;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.pro-plan-wrapper {
  position: absolute;
  border-radius: 10px;
  border: 1px dashed #6878b6;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.7) 0%,
    rgba(104, 120, 182, 0.7) 100%
  );
  display: none;
  align-items: center;
  justify-content: center;
  padding: 15px;
  width: 100%;
  top: -10;
  left: 0;
}

.pro-plan-wrapper > p {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin-right: 7px;
}

.pro-plan-wrapper > span {
  width: 20px;
  height: 20px;
  margin-left: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ck_card_bottum_section.locked .pro-plan-wrapper {
  display: flex;
}

.first-show {
  height: 54px;
}

.welcome-content-generator {
  height: 504px;
  border-radius: 10px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.welcome-content-generator > h4 {
  color: #6878b6;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}

.welcome-content-generator > p {
  opacity: 0.6;
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.icon-edit-drop {
  position: relative;
}

.edit_here-drop {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 4px 2px rgba(159, 159, 159, 0.1);
  position: absolute;
  top: 193px;
  right: 50px;
  z-index: 1;
  display: none;
}

.edit_here-drop li {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  padding: 16px;
}

.edit_here-drop li:hover {
  color: #6878b6;
  background: #f4f4f4;
}

.edit_here-drop li:hover a {
  color: #6878b6;
}

.edit_here-drop li,
a {
  color: #555454;
}

.edit_here-drop.active {
  display: block;
}

.custom_add-section > textarea {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background: #f5f5f5;
  resize: none;
  border: none;
  outline: none;
  margin-top: 6px;
  padding: 12px 11px;
}

.custom_add-section > input {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background: #f5f5f5;
  border: none;
  outline: none;
  margin-top: 6px;
  padding: 12px 11px;
}

.set-default {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
}

.set-default > label {
  color: #555454;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}

.set-default > input {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}

.card-content-hide {
  display: none;
}

.fav-icon-wrapper.active {
  display: flex;
}

/*--------------- label badge---------- */
.subject_badge {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 14px;
  line-height: normal;
  border: 1px solid #dddddd;
  color: #465697;
  display: inline-block;
  word-break: break-all;
  margin-right: 15px;
}

.card_top_inside {
  flex-grow: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px -7.5px;
}

.card_top_inside > * {
  margin: 4px 7.5px;
}

.card_top_inside .card-title {
  white-space: nowrap;
}

.bottum-button-block {
  display: flex;
  justify-content: space-between;
}

.report-writer-disclaimer {
  width: calc(50% - 20px);
  margin-bottom: 10px;
}

.set-default-delete-button {
  margin-left: 70px;
  padding: 5px;
  color: #555454;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  border-radius: 4px;
}

.seting-default {
  white-space: nowrap;
  color: #6878b6;
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
}

.transform_class {
  max-width: 160px !important;
  word-break: break-all !important;
  white-space: unset;
  flex-grow: 1;
}

.name_container {
  width: calc(50% - 10px);
  margin-right: 10px;
  min-width: 240px;
}

.name_text_div {
  margin-left: 13px;
  position: relative;
}

.name_text_div .generate-input-section {
  border-radius: 6px;
  border: 1px solid #ededed;
  background: #fff;
  padding: 4px;
  width: calc(100% - 10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rename-section {
  width: calc(50% - 10px);
  display: flex;
  align-items: center;
}

.rename-section > input {
  background: none;
  outline: none;
  border: none;
  /* width: calc(100% - 46px); */
  color: #434343;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  padding: 0;
  height: 17px;
  margin-left: 13px;
  max-width: 210px;
  margin-right: 10px;
}

.rename-section-td > input {
  background: none;
  outline: none;
  border: none;
  padding: 0;
  height: 20px;
  width: calc(100% - 28px);
}

.rename-section > button {
  background: none;
}

.name_text_div .name_label {
  position: absolute;
  top: 82%;
  font-size: 13px;
  font-weight: 500px;
}

/* ---------button-animation------- */

.dot-bricks {
  position: relative;
  top: 8px;
  left: -9999px;
  width: 7px;
  height: 7px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;
  box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
  animation: dot-bricks 2s infinite ease;
}

@keyframes dot-bricks {
  0% {
    box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
  }

  8.333% {
    box-shadow: 10007px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
  }

  16.667% {
    box-shadow: 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff,
      10007px 0 0 0 #fff;
  }

  25% {
    box-shadow: 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff;
  }

  33.333% {
    box-shadow: 10007px 0 0 0 #fff, 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff;
  }

  41.667% {
    box-shadow: 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff, 9991px 0 0 0 #fff;
  }

  50% {
    box-shadow: 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff,
      9991px -16px 0 0 #fff;
  }

  58.333% {
    box-shadow: 9991px 0 0 0 #fff, 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff;
  }

  66.666% {
    box-shadow: 9991px 0 0 0 #fff, 10007px 0 0 0 #fff, 9991px -16px 0 0 #fff;
  }

  75% {
    box-shadow: 9991px 0 0 0 #fff, 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff;
  }

  83.333% {
    box-shadow: 9991px -16px 0 0 #fff, 10007px 0 0 0 #fff,
      10007px -16px 0 0 #fff;
  }

  91.667% {
    box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px -16px 0 0 #fff;
  }

  100% {
    box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
  }
}

/* ---------button-animation------- */
.transform-btn .dot-windmill {
  margin-right: 10px;
}

.name_text_textbox_btn {
  background: transparent;
  min-width: 25px;
  min-height: 25px;
}

.rename-section-td > a > label {
  color: #434343;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  word-break: break-all;
}

.name_container .name_text_div {
  margin-left: 0px;
}

.rename-section-td .name_text_textbox_btn {
  width: 28px;
  height: 28px;
}

.rename-section-td > a {
  white-space: unset !important;
  word-break: break-all !important;
  width: 100%;
}

.rename-section-td {
  word-break: break-all !important;
  display: flex;
  align-items: center;
}

.rename-section-td > img {
  width: 20px;
  height: 20px;
}

.custom_feilds-add .input_items textarea::-webkit-scrollbar {
  width: 5px;
}

/* Handle */
.custom_feilds-add .input_items textarea::-webkit-scrollbar-thumb {
  background: #596bb1;
  border-radius: 20px;
}

.successfully-message-wrapper {
  background: #1e935c;
  padding: 10px 20px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translateX(-50%, -50%);
  -ms-transform: translateX(-50%, -50%);
  transform: translateX(-50%, -50%);
  display: none;
  z-index: 1;
}

.successfully-message-wrapper > p {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.name_div {
  display: flex;
  align-items: center;
  width: calc(50% - 10px);
  gap: 10px;
  min-width: 240px;
}

.students-excel-shows-img {
  min-height: 26px;
}

.students-excel-shows-img > img {
  min-width: 26px;
}

.card_inside_section {
  padding: 20px;
  min-height: 0px;
  display: flex;
}

#temp-container {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.tools-decription {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #767676;
  font-style: italic;
  margin-right: 30%;
  white-space: nowrap;
}

.tools-decription + .multiple-choice {
  margin-top: 10px;
}

.you_tube_guide {
  padding: 15px 10px;
  display: flex;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.you_tube_guide_mob {
  padding: 15px 10px;
  display: flex;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  display: none;
}

.you_tube_icon {
  display: flex;
  align-items: center;
  padding-right: 10px;
  display: flex;
  border-right: 1px solid #dddddd;
  margin-right: 10px;
}

.youtube_link h6 {
  color: #1d1d1d;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}

.youtube_link P {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
}

.youtube_link a {
  color: #6878b6;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: underline;
  margin-top: 10px;
}
.top-feedback {
  padding: 8px 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background: #9d6edf;
  border: 1px solid #ffffff;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  margin-right: 15px;
}
.top-feedback:hover {
  background: #bc9de9;
  color: #ffffff;
}

.resources-library-container {
  border: 1px solid #ebebeb;
  border-radius: 20px;
}

.resources-library-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  border-radius: 19px 19px 0px 0px;
  width: 100%;
}

.resources-library-head > p {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
}

.resources-library-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.resources-library-filter > p {
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  text-wrap: nowrap;
  margin-right: 10px;
}

.resources-library-filter > span {
  display: flex;
}

.resources-library-filter > select {
  position: absolute;
  top: 0;
  left: 0;
}

.resources-library-wrapper {
  padding: 23px 20px;
}

.resources-library-select {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #efefef;
  padding: 18px 20px;
  margin-bottom: 10px;
}

.resources-library-select > p {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
}
.resources-library-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.resources-library-select-right {
  display: flex;
}

.resources-library-select-right > span {
  cursor: pointer;
}

.resources-library-select.active {
  background: #f5f5f5;
}

.resources-library-select-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resources-library-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-top: 10px;
  width: 100%;
}

.resources-library-inner > P {
  color: #9e9898;
  font-size: 14px;
  font-weight: 500;
}
.resources-library-inner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.resources-library-file-upload {
  background: #fff;
  border: 1px dashed #6878b6;
  margin-top: 35px;
  position: relative;
  display: flex;
  width: 362px;
  height: 50px;
  border-radius: 8px;
}

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

.library-file-upload {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 9;
  cursor: pointer;
}

.library-file-upload > span {
  cursor: pointer;
}

.library-file-upload > p {
  color: #6878b6;
  font-size: 13px;
  font-weight: 600;
  margin-left: 10px;
  cursor: pointer;
}

.resources-library-clone-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}

.resources-library-clone-wrapper > a {
  color: #6878b6;
  font-size: 13px;
  font-weight: 600;
  background: #f9f9f9;
  border: 1px dashed #6878b6;
  height: 35px;
  width: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.bronze-course-container {
  display: flex;
  margin: 0 -10px;
}

.bronze-course-left {
  width: calc(70% - 10px);
  margin: 0 10px;
}
.bronze-course-right {
  width: calc(30% - 20px);
  margin: 0 10px;
}

.bronze-course-left > h4 {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
}

.bronze-course-left > p {
  color: #505050;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  margin-top: 15px;
}

.youtube-card-wrapper {
  background: linear-gradient(
    to bottom right,
    rgb(184 136 244),
    #ffffff,
    #ffffff,
    #ffffff,
    rgb(184 136 244)
  );
  padding: 24px 20px;
  border-radius: 20px;
  position: relative;
}
.youtube-card-wrapper:after {
  content: "";
  position: absolute;
  display: block;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  background: linear-gradient(
    112.39deg,
    rgba(250, 250, 250, 1) 6.180599704384804%,
    rgba(225, 218, 241, 1) 100%
  );
  z-index: 9;
  border-radius: 20px;
}

.youtube-card-content {
  position: relative;
  z-index: 95;
  display: flex;
  align-items: center;
}

.youtube-card-img-sec {
  position: relative;
  margin-right: 20px;
}

.youtube-card-img {
  width: 65px;
  height: 65px;
  min-width: 65px;
  border-radius: 100%;
  overflow: hidden;
  border: 2px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.youtube-card-img > span {
  position: absolute;
  bottom: -10px;
  z-index: 999;
}

.youtube-card-title > h6 {
  color: #434343;
  font-size: 22px;
  font-weight: 700;
}

.youtube-card-title > P {
  color: #767676;
  font-size: 13px;
  font-weight: 500;
}

.youtube-card-title > a {
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}

.youtube-card-link {
  margin-left: 5px;
  min-width: 10px;
}

.fb-card-wrapper {
  margin-top: 15px;
  border: 1px solid #ebebeb;
  border-radius: 16px;
  padding: 20px 15px;
  display: flex;
  align-items: center;
}

.fb-card-img {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.fb-card-wrapper > span {
  width: 2px;
  border: 1px solid #7987be;
  margin-right: 10px;
  height: 58px;
}

.fb-card-content > p {
  color: #767676;
  font-size: 12px;
  font-weight: 400;
}

.fb-card-content > a {
  color: #6878b6;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  margin-top: 10px;
}

.cpd-courses-wrapper {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  margin-top: 15px;
}

.cpd-courses-head {
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  border-radius: 16px 16px 0px 0px;
  padding: 17px 20px;
}

.cpd-courses-head > p {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
}

.cpd-courses-inner {
  padding: 18px 20px 60px;
}

.cpd-courses-card {
  background: #fff;
  border: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.cpd-courses-img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin-right: 6px;
}

.cpd-courses-card:hover,
.cpd-active {
  background: url(../images/grid-bg.png), #f1f6fb;
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  border: 1px solid #6878b6;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
}

.cpd-courses-card > h6 {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  margin-left: 6px;
  text-wrap: wrap;
}

.mt-15 {
  margin-top: 15px;
}

.cpd-video-container {
  width: 100%;
  border-radius: 20px;
  height: 500px;
  overflow: auto;
}

.cpd-video-container::-webkit-scrollbar {
  width: 5px;
}

.cpd-video-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.cpd-video-container::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}

.welcome-section-wrapper {
  display: flex;
  align-items: flex-start;
  margin: 0 -10px;
}

.welcome-section-wrapper-left {
  width: calc(70% - 20px);
  margin: 0 10px;
}

.welcome-section-wrapper-left-full {
  width: calc(100% - 20px);
  margin: 0 10px;
}

.welcome-section-wrapper-right {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 10px;
  background: linear-gradient(
    100.35deg,
    rgba(104, 120, 182, 1) 0%,
    rgba(165, 121, 255, 1) 100%,
    rgba(165, 121, 255, 1) 100%
  );
  padding: 20px;
  border-radius: 10px;
}

.welcome-section-content {
  height: 614px;
}

.free-trial-plan-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.welcome-section-status {
  background: #ffffff;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-section-status > p {
  color: #a579ff;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.welcome-section-title-wrapper {
  display: flex;
  align-items: center;
}

.welcome-section-title-wrapper > span {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin-right: 10px;
}

.welcome-section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.welcome-section-title > h5 {
  color: #fcfcfc;
  font-size: 16px;
  font-weight: 600;
}

.welcome-section-title > p {
  color: #fcfcfc;
  font-size: 12px;
  font-weight: 400;
}
.welcome-section-title > p > span {
  color: #fcfcfc;
  font-size: 12px;
  font-weight: 600;
}

.subject-included {
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
}

.default-course {
  color: #a579ff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.course-select-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
}

.course-select-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.course-select-content > h5 {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
}

.course-select-content > p {
  color: #555454;
  font-size: 12px;
  font-weight: 400;
}

.subject-included-container {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  max-height: 380px;
  overflow-y: scroll;
}

.subject-configure-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.subject-configure-btn > a {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  border: 1px solid #ffffff;
  padding: 8px 20px;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#subject_configure_btn {
  width: 655px;
}

.popup-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.popup-title > h5 {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
}

.popup-title > p {
  color: #555454;
  font-size: 14px;
  font-weight: 400;
}

.subject_configure-content {
  margin-top: 27px;
}

.subject_configure-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px;
  padding: 0 10px;
}

.subject_configure-item {
  display: flex;
  flex-direction: column;
  margin: 10px 8px;
  width: calc(50% - 16px);
}

.popup-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.popup-button-wrapper > button {
  padding: 13px 64px;
  background: #6878b6;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.popup-button-wrapper > button:hover {
  background: #57669f;
}

.subject_configure-item > label {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px;
}

.btn-sub-delete {
  cursor: pointer;
}

.add_keyword-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 50%;
}

.add_keyword-input {
  width: 80%;
}

.add_keyword-input-wrapper {
  width: 100%;
}

.add_keyword-input-wrapper > label {
  margin-bottom: 10px;
  color: #767676;
  font-size: 14px;
  font-weight: 400;
}

.add_keyword-btn-wrapper {
  margin-bottom: 3px;
}

.add-keyword-content {
  display: flex;
  margin-top: 17px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin-left: -15px;
}

.add-keyword-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: #eaeaea;
  border-radius: 37px;
  margin-top: 20px;
  margin-left: 15px;
}

.add-keyword-item > p {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
}

.add-keyword-item > span {
  height: 20px;
  width: 20px;
  min-width: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.add-keyword-item > span > img {
  height: 100%;
  width: 100%;
}

.main-searchbar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 5px 20px;
  margin-right: 15px;
  position: relative;
}

.main-search-input {
  background: #f5f5f5;
  border: none;
  outline: none;
  margin-right: 10px;
  height: 30px;
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}
.shared-email-input {
  background: #f5f5f5;
  border: none;
  outline: none;
  margin-right: 10px;
  height: 30px;
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}
.main-search-input::-webkit-input-placeholder {
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}
.shared-email-input::-webkit-input-placeholder {
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}

.login-input-feild::placeholder {
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}

.login-input-feild:-ms-input-placeholder {
  color: #515151 !important;
  font-size: 14px;
  font-weight: 500;
}

.main-search-button {
  background: none;
  height: 24px;
  width: 24px;
  min-width: 24px;
  padding: 0;
}

.main-search-button > img {
  width: 100%;
  height: 100%;
}
.alert-image {
  min-width: 16px;
}

.search-dropdown {
  background: #fff;
  position: absolute;
  top: 100%;
  left: 5px;
  width: 325px;
  box-shadow: 0 5px 5px 0px #ccc8c8;
  border-left: 1px solid #ccc8c8;
}

.search-dropdown-list:first-child {
  border-bottom: 1px solid #ccc8c8;
}

.search-dropdown-list:last-child {
  border-bottom: none;
}

.search-dropdown-list {
  padding: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #020202;
}

.search-dropdown-list:hover {
  background: #ddd;
}

.country-code,
.sumo_country_code.optWrapper {
  /* width: 75px !important; */
}

.country-code .SumoSelect.open > .optWrapper {
  /* width: 245px !important; */
}

.country-code-color {
  color: #bab5b5;
  display: inline-block !important;
}

/* .toggle-width {
  width: 150px !important;
} */

.country-code .SumoSelect > .CaptionCont > label {
  right: 5px !important;
}

.country-code .SumoSelect > .optWrapper.isFloating > .options {
  box-shadow: none !important;
}

.payment-adding-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  padding: 20px 20px 30px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.payment-adding-card:hover,
.card-active {
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  border: 1px solid #6878b6;
}

.payment-adding-card > h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20.16px;
  color: #555454;
}

.payment-adding-card > p {
  font-size: 20px;
  font-weight: 700;
  line-height: 23.44px;
  color: #6878b6;
  margin-top: 5px;
}

.additional-users-card {
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 20px;
  padding: 20px 40px 15px 20px;
  cursor: default;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  cursor: pointer;
}

.additional-users-card:hover,
.card-active {
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  border: 1px solid #6878b6;
}

.additional-users {
  width: 80%;
}

.additional-users > h6 {
  color: #555454;
  font-size: 16px;
  font-weight: 600;
  line-height: 20.16px;
  color: #555454;
}

.additional-users > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 17.64px;
  color: #555454;
  margin-top: 10px;
  color: #555454;
}

.card-badge {
  display: flex;
  align-items: flex-end;
}

.card-badge > p > span {
  font-size: 20px;
  font-weight: 400;
  line-height: 23.44px;
  color: #555454;
}

.card-badge > h5 {
  font-size: 30px;
  font-weight: 700;
  color: #6878b6;
}

.card-badge > p {
  font-size: 18px;
  font-weight: 400;
  line-height: 21.09px;
  color: #555454;
}

.license-add > li > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 17.64px;
  color: #555454;
}

.package-adding-card {
  background: #f9f9f9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0 0;
  position: relative;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.domain-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  line-height: 17.64px;
  color: #767676;
}

.domain-input-wrapper > input {
  width: 100%;
  padding: 14px 20px 20px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin-top: 15px;
  background: #f5f5f5;
}

.domain-input-wrapper > input::placeholder {
  opacity: 1;
  color: #555454;
  font-size: 14px;
  font-weight: 500;
  line-height: 17.64px;
}

.domain-input-wrapper > input::-ms-input-placeholder {
  color: red;
}

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

.custom_tooltip .custom_tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #f5f5f5;
  color: #6e6e6e;
  text-align: center;
  border-radius: 6px;
  padding: 8px 7px;
  position: absolute;
  z-index: 99999;
  bottom: 25px;
  left: 70px;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.32px;
  text-align: left;
}

.custom_tooltip .custom_tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f5f5f5 transparent transparent transparent;
  width: 15px;
  height: 20px;
}

.custom_tooltip:hover .custom_tooltiptext {
  visibility: visible;
  opacity: 1;
}

.info-icon {
  font-style: normal;
  background-color: #ddd;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #ccc;
}

.domain-input-wrapper > label {
  font-size: 12px;
  font-weight: 400;
  line-height: 15.12px;
  color: #b0b0b0;
  margin-top: 15px;
  margin-bottom: 15px;
}

.domain-edit-input-container {
  display: flex;
  width: 100%;
  gap: 13px;
  margin-top: 15px;
}

.domain-edit-input-wrapper {
  width: 80%;
  background: #f5f5f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.domain-edit-input-wrapper > input {
  width: 90%;
  padding: 17px 20px 20px;
  border: none;
  outline: none;
  border-radius: 5px;
  background: #f5f5f5;
}

.domain-edit-input-wrapper > span {
  width: 10%;
}

.verify-button {
  width: 20%;
  background: #6878b6;
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  min-height: 40px;
}

.verify-button:hover {
  background: #5867a0;
  color: #fff;
}

.domain-input-wrapper .error-label {
  color: #e70404 !important;
}

.input-wrapper-width {
  width: calc(50% - 10px);
}

.thank-you-card-container {
  padding: 1px;
  background-image: radial-gradient(circle, #fff, #fff, #29c7a8);
  border-radius: 20px;
}

.thank-you-card-wrapper {
  padding: 55px;
  background: #daf5f0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.thank-you-text {
  color: #434343;
  font-size: 42px;
  font-weight: 600;
}

.thank-you-card-wrapper > p {
  color: #7c7c7c;
  font-size: 18px;
  font-weight: 500;
}

.thank-you-page-container {
  border: 1px solid #ebebeb;
  border-radius: 20px;
  overflow: hidden;
  max-height: calc(100vh - 600px);
  overflow: scroll;
}

.thank-you-page-container::-webkit-scrollbar {
  display: none;
}

.thank-you-page-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.thank-you-t-body {
  border-radius: 20px !important;
}

.thank-you-t-body > thead > tr {
  background: linear-gradient(
    261.37deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  overflow: hidden;
}

.thank-you-t-body th {
  padding: 18px 20px;
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
}

.thank-you-t-body td {
  padding: 18px 20px;
  color: #555454;
  font-size: 14px;
  font-weight: 500;
}

.thank-you-t-body th:first-child {
  border-top-left-radius: 20px !important;
}

.thank-you-t-body th:last-child {
  border-top-right-radius: 20px !important;
}

.total-item-card {
  border: 1px solid #d8d1d1;
  border-radius: 14px;
  background: #fff;
  padding: 13px 16px 30px;
}

.total-item-card > h2 {
  color: #6878b6;
  font-size: 42px;
  font-weight: 600;
}

.total-item-card > p {
  color: #555454;
  font-size: 14px;
  font-weight: 600;
  margin-top: 35px;
}

.current-package-title {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
}

.current-package-card {
  border: 1px solid #6878b6;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.1) 0%,
    rgba(104, 120, 182, 0.1) 100%
  );
  padding: 20px 20px 13px;
}

.card-text-top > h4 {
  color: #555454;
  font-size: 16px;
  font-weight: 600;
}

.card-text-top > p {
  color: #6878b6;
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
}

.card-text-bottum {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fff;
  display: flex;
  justify-content: space-between;
}

.card-text-bottum > h6 {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}

.card-text-bottum > p {
  color: #555454;
  font-size: 14px;
  font-weight: 500;
}

.expired-text {
  color: #dd0c0c !important;
}

.page-bottum-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.dashboard-btn {
  border-radius: 10px;
  border: 1px solid #6878b6;
  padding: 5px 30px 5px 30px;
  background: #fff;
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  min-width: 285px;
  text-align: center;
}

.dashboard-btn:hover {
  background: #f0edf9;
  color: #6878b8;
}

.done-btn {
  border-radius: 10px;
  border: 1px solid #6878b6;
  padding: 5px 30px 5px 30px;
  background: #6878b6;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  min-width: 285px;
  text-align: center;
}

.done-btn:hover {
  background: #4d5887;
  color: #fff;
}

.toggle-switch.bg-green input:checked + .slider {
  background-color: #34c759;
}

.td-select-wrapper > select {
  display: block;
  border: 1px solid red;
}

.thank-you-page-container.table-height {
  max-height: calc(100vh - 400px);
}

.popup-title {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
}

.popup-input-container > label {
  color: #555454;
  font-size: 14px;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 14px;
}

.popup-input-wrapper {
  background: rgba(245, 245, 245, 0.6);
  border-radius: 10px;
  min-height: 52px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-input-wrapper > input {
  background: none;
  border: none;
  outline: none;
  width: 70%;
}

.popup-input-wrapper > input:focus {
  outline: none !important;
}

.popup-input-wrapper > button {
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
  width: 30%;
  background: transparent;
  border: none;
  outline: none;
  /* padding: 10px 8px; */
}

.add-new.popup-div.pop-up.verify-popup {
  min-width: 600px;
  max-width: 600px;
  min-height: 360px;
}

/* .otp-input-wrapper{
  display: flex;
  gap: 13px;
  width: calc(100% - 6.5px);
}

.otp-input{
  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid transparent;
  width: calc(25% - 6.5px);
  height: 52px;
  text-align: center;
}

.otp-input::placeholder{
  color: #555454 !important;
  opacity: 1;
}

.otp-input::-ms-input-placeholder {
  color: #555454 !important;
}

.otp-input:hover, .input-selected{
  border: 1px solid #6878b6;
  border-radius: 10px;
}

.popup-btn-container{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.success-mg-head{
  color: #434343;
  font-size: 32px;
  font-weight: 600;
}


/* styles.css */
.multi-select-container {
  margin: 20px auto;
  position: relative;
}

.select-box {
  background: #f5f5f5;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
}

.selected-item {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px;
  display: flex;
  align-items: center;
}

.selected-item span {
  margin-right: 10px;
}

.remove-item {
  cursor: pointer;
}

.remove-item img {
  width: 16px;
  height: 16px;
}

.search-input {
  border: none;
  outline: none;
  flex-grow: 1;
  background: none;
}

.dropdown-list {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f1f1f1;
}

.select-icon {
  width: 5%;
}

.subject_selected-item {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.resend-otp-div button {
  color: #6878b6;
  margin-left: 5px;
  font-weight: 600;
  margin: 5px 0;
  background: transparent;
}

#verify-success-popup {
  min-height: 215px !important;
}

.login-input-feild.verify-login-input-feild {
  padding: 0 !important;
  text-align: center !important;
}

.selected-items-wrap {
  width: calc(50% - 20px);
  display: flex;
  justify-content: space-between;
}

.remove-selected-subject {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-left: 10px;
}

.swal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal-button {
  min-width: 100px;
}

.course-add-messages {
  padding: 10px 20px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  gap: 10px;
}

.course-add-messages.error {
  background: #fc0014;
}

.course-add-messages.success {
  background: #1e935c;
}

/* =========youtube card=========== */

.page-right-section {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.youtube-video-card-wrapper {
  width: calc(100% - 20px);
  margin: 0 10px;
  padding: 1px;
  border-radius: 10px;
  background: linear-gradient(
    to bottom right,
    rgb(184 136 244),
    #ffffff,
    #ffffff,
    #ffffff,
    rgb(184 136 244)
  );
}

.youtube-video-card-inner-wrapper {
  background: #f5f0fd;
  padding: 9px 11px 25px;
  border-radius: 10px;
}

.iframe-wrapper {
  height: 190px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.iframe-wrapper > iframe {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.youtube-card-content-wrapper {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.youtube-card-content-wrapper > span {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #6878b6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.youtube-card-content-wrapper > span > img {
  object-fit: cover;
}

.youtube-content > h6 {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
}

.youtube-content > p {
  color: #767676;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 18px;
}

.youtube-content > a {
  color: #6878b6;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}

.youtube-content > a > span {
  margin-left: 5px;
  width: 10px;
  height: 10px;
}

/* -------- Tools Starts ----------- */

.tools-head-wrapper {
  background: url(../images/tools_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding-block: 20px;
  padding-inline: 22px 17px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-head-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tools-head-inner > h2 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  line-height: 28px;
}

.tools-search-wrapper {
  background: #f5f5f5;
  border-radius: 6px;
  width: 45%;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  margin-top: 15px;
}

.tools-search-wrapper > input {
  border: none;
  width: 96%;
  background: #f5f5f5;
  height: 36px;
}

.carousel-wrapper {
  margin-top: 14px;
  position: relative;
  padding-inline: 40px;
  max-width: 85%;
}

.tools-menu {
  color: #555454;
  font-size: 12px;
  font-weight: 600;
  background: #ffffff;
  border-radius: 4px;
  padding: 5px 16px 5px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  white-space: nowrap;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
}

/* .swiper-slide:first-child .tools-menu {
  background: linear-gradient(to right, transparent #6878b6);
}

.swiper-slide:last-child .tools-menu {
  background: linear-gradient(to right, transparent, #a579ff);
} */

.swiper-button-prev::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 29px;
  width: 115px;
  height: 93%;
  background: linear-gradient(to right, #7078c0, transparent);
  pointer-events: none;
  border-radius: 2px;
  z-index: 1111111111111;
}

.swiper-button-next::before {
  content: "";
  position: absolute;
  right: 29px;
  width: 115px;
  height: 93%;
  background: linear-gradient(to left, #9a79f2, transparent);
  pointer-events: none;
  border-radius: 2px;
  z-index: 1111111111111;
}

.swiper-button-prev,
.swiper-button-next {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
}

.carousel-wrapper .swiper {
  width: 100%;
  height: auto;
}

.carousel-wrapper.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.subject-tools {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 5px 16px 5px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #fff;
  white-space: nowrap;
  min-width: 100px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  margin-right: 2px;
}

.subject-carousel-wrapper {
  margin-top: 12px;
  position: relative;
  padding-inline: 48px;
  max-width: 50%;
}

.subject-carousel-wrapper .swiper {
  width: 100%;
  height: auto;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 0 !important;
}

.swiper-button-next1,
.swiper-rtl .swiper-button-prev1 {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-prev1,
.swiper-rtl .swiper-button-next1 {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-next1,
.swiper-button-prev1 {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  /* width: calc(var(--swiper-navigation-size) / 44 * 27); */
  /* height: var(--swiper-navigation-size); */
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.card-head-right {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 111;
  cursor: pointer;
}

.tools-item-lock {
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
  z-index: 999;
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 1 !important;
}

.tools-item-lock:hover {
  background: linear-gradient(
    180deg,
    rgba(135, 206, 250, 0.2) 0%,
    rgba(104, 120, 182, 0.2) 100%
  );
}

.tools_link.hide {
  display: none;
}

.three-col-item.tools-item:has(.tools-item-lock) {
  pointer-events: none;
}

.three-col-item.tools-item.no-hover:hover {
  background: none;
  border: 1px solid #ebebeb;
  box-shadow: none;
}

.tools-item-lock > p {
  color: #6878b6;
  font-size: 16px;
  font-weight: 600;
}

.three-col-item:has(.tools-item-lock) .card-head-right,
.three-col-item:has(.tools-item-lock) .custom_icon {
  opacity: 0.5;
}

.three-col-item .card-head-right,
.three-col-item .custom_icon {
  opacity: 1;
}

.tools-select-wrapper {
  display: none;
}

.category-select-wrapper {
  background: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  position: relative;
}
.category-select-top {
  display: flex;
  gap: 10px;
}

.category-select-top > p {
  color: #555454;
  font-size: 12px;
  font-weight: 600;
  line-height: 23px;
}

.category-select-drop {
  display: none;
  background: #fff;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 40px;
  width: 150px;
  border-radius: 8px;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  max-height: 264px;
  overflow: scroll;
}

.category-select-drop > li {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  cursor: pointer;
  margin-top: 10px;
}

.category-select-drop > li:hover {
  color: #465697;
}

.category-select-drop > li > a {
  font-size: 10px;
  font-weight: 500;
  line-height: 12.6px;
  margin-top: 12px;
  counter-reset: #555454;
  text-decoration: none;
  cursor: pointer;
}

.toggle-select-btn {
  width: 12px;
  height: 23px;
}

.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.subject-select-wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 16px;
  border-radius: 4px;
  position: relative;
  border: 1px solid #fff;
}

.subject-select-top {
  display: flex;
  gap: 10px;
}

.subject-select-top > p {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 23px;
}

.subject-select-drop {
  display: none;
  background: #fff;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 40px;
  width: 150px;
  border-radius: 8px;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  max-height: 264px;
  overflow: scroll;
}

.subject-select-drop > li {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  cursor: pointer;
  margin-top: 10px;
}
.subject-select-drop > li:hover {
  color: #465697;
}

.subject-select-drop > li > a {
  font-size: 10px;
  font-weight: 500;
  line-height: 12.6px;
  margin-top: 12px;
  counter-reset: #fff;
  text-decoration: none;
  cursor: pointer;
}

.download-button-link {
  background: #6878b6;
  border-radius: 10px;
  display: flex;
  padding: 5px 10px;
  position: relative;
  min-height: 27px !important;
}

.download-button-top {
  display: flex;
  gap: 5px;
}

.download-button-top > p {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.download-icon-wrapper {
  width: 16px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-drop {
  display: none;
  background-color: #fff;
  position: absolute;
  left: -50px;
  top: 40px;
  border-radius: 8px;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.1);
  min-width: 145px;
}

.download-drop > li {
  padding: 6px 10px;
  color: #555454;
  font-size: 12px;
  font-weight: 600;
}

.download-drop > li:hover {
  background: #f4f4f4;
  color: #6878b6;
}

.download-drop > li:first-child:hover {
  background: #f4f4f4;
  color: #6878b6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.download-drop > li:last-child:hover {
  background: #f4f4f4;
  color: #6878b6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.download-drop > li a {
  white-space: normal;
  word-break: break-all;
}
.download-drop > li:hover a {
  color: #6878b6;
}

.tools-menu:hover,
.active-tools {
  color: #fff;
  background: #9d6edf;
  border: 1px solid #fff;
}

.subject-tools:hover,
.subject-active {
  background: #9d6edf;
  font-weight: 700;
}

.MJX-TEX {
  text-wrap: wrap;
}

.ck_content_wrapper ul li {
  line-height: 26px;
}

.MJX-TEX {
  margin: 15px 0;
}

.ck_content_wrapper ul li span {
  line-height: 26px;
}

.ck_generated_content .content {
  padding: 10px;
  margin-top: 5px;
}

.ck_generated_content {
  line-height: 26px;
}

.MathJax mjx-utext {
  width: 100% !important;
}

.ck_generated_content mjx-container {
  margin: 0 10px !important;
}

.ck_generated_content .MJX-TEX {
  line-height: 15px;
}

.ck_generated_content mjx-table > mjx-itable {
  margin: 0 10px;
}

.ck_generated_content .title {
  margin-bottom: 10px;
}

.ck_generated_content .highlight {
  padding: 5px 10px;
  margin: 10px 0;
}

.category-select-drop::-webkit-scrollbar {
  width: 5px;
}

.category-select-drop::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */

.category-select-drop::-webkit-scrollbar-thumb {
  background: #6878b6;
  border-radius: 3px;
}
/* create format */

.create-format {
  margin-top: 20px;
}

.create-format h2 {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #6878b6;
}

.create-format form {
  margin-top: 20px;
}

.format-form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.format-form-container label {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
}

.format-form-container input {
  border: none;
  outline: none;
  background-color: #f5f5f5;
  width: 100%;
  border-radius: 10px;
}

.format-form-container select {
  width: 100%;
  background-color: #f5f5f5;
}

.format-form-container textarea {
  border: none;
  outline: none;
  background-color: #f5f5f5;
  min-height: 154px;
  border-radius: 10px;
  padding: 15px;
}

.format-form-container textarea::-webkit-input-placeholder {
  font-size: 12px;
  color: #c5c5c5;
}

.format-form-container textarea:-moz-placeholder {
  /* Firefox 18- */
  font-size: 12px;
  color: #c5c5c5;
}

.format-form-container textarea::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 12px;
  color: #c5c5c5;
}

.format-form-container textarea:-ms-input-placeholder {
  font-size: 12px;
  color: #c5c5c5;
}

.format_fileupload-container {
  background-color: #f5f5f5;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 25px;
  position: relative;
}

.format_fileupload-container img {
  height: 34px;
  width: 30px;
}

.format_fileupload-container p {
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  color: #000;
}

.uploaded_file_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.uploaded_file_container button {
  width: 18px;
  height: 18px;
  padding-inline: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploaded_file_container img {
  height: 100%;
  width: 100%;
}

.browse-file {
  background-color: #6878b6;
  border-radius: 8px;
  width: 122px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  cursor: pointer;
}

.browse-file input {
  position: absolute;
  opacity: 0;
}

.browse-file p {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.format-form-list {
  padding-bottom: 80px;
  border-bottom: 1px solid #ededed;
}

.format-button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.format-button-container button {
  width: 200px;
  height: 46px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}

.format-back-button {
  border: 1px solid #6878b6;
  color: #6878b6;
  background-color: #fff;
}

.format-sbmt-button {
  border: 1px solid #6878b6;
  background-color: #6878b6;
  color: #fff;
}

.format-input-item {
  width: calc(50% - 30px) !important;
}

.or-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.or-container p {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
}

.history-saved-view-ul {
  min-width: 180px;
  max-width: 200px;
}

.history-saved-view-ul > li > a {
  word-break: break-all;
  white-space: normal;
}

.response_view
  div:not(.graph-error-container):not(.graph-error-icon):not(
    .graph-error-title
  ):not(.graph-error-message) {
  width: 100% !important;
  padding: 20px !important;
}
/* ========= Carriculm Working =============== */

.carriculm-page-title {
  font-size: 18px;
  color: #465697;
  font-weight: 600;
  line-height: 26px;
}

.carriculm-page-sub-title {
  font-size: 14px;
  font-weight: 400;
  color: #767676;
  line-height: 20px;
  margin-top: 10px;
}
/* .mt-50 {
  margin-top: 50px;
} */

.curriculm-check-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 15px;
}

.curriculm-check-label {
  font-size: 13px;
  font-weight: 400;
  color: #767676;
  line-height: 18px;
}

.tab-title {
  color: #858585;
  font-size: 14px;
  font-weight: 500;
}

.curriculm-tabs-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.curriculm-tabs {
  background: #ffffff;
  border: 1px solid rgba(147, 147, 147, 0.18);
  min-height: 62px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s ease;
  border-bottom: 2px solid rgba(147, 147, 147, 0.18);
  cursor: pointer;
  padding: 17px 15px 10px;
}

.curriculm-tabs:first-child {
  border-radius: 10px 0px 0px 0px;
  border-right: 1px solid transparent;
}

.curriculm-tabs:last-child {
  border-radius: 0px 10px 0px 0px;
  border-left: 1px solid transparent;
}

.curriculm-tabs:hover,
.curriculm-tabs.active {
  border-bottom: 2px solid #6878b6;
  background: #d0cbf6;
}

.curriculm-tabs:hover .tab-title,
.curriculm-tabs.active .tab-title {
  color: #465697;
  transition: color 0.3s ease;
}

.curriculm-tabs.single {
  border-radius: 10px 10px 0px 0px;
  border-right: 1px solid rgba(147, 147, 147, 0.18);
  width: 100%;
}

.curriculm-tabs.double {
  /* border-radius: 10px 10px 0px 0px; */
  border-right: 1px solid rgba(147, 147, 147, 0.18);
  width: 50%;
}
.curriculm-tabs.double:first-child {
  border-radius: 10px 0px 0px 0px;
}
.curriculm-tabs.double:nth-child(2) {
  border-radius: 0px 10px 0px 0px !important;
}

.curriculm-tabinner {
  display: flex;
  align-items: center;
  gap: 5px;
}

.curriculm-tabinner > span {
  width: 15px;
  height: 15px;
  display: none;
  align-items: center;
  justify-content: center;
}

.tab-selected-title {
  display: none;
}

.tab-selected-title > p {
  color: #858585;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0;
  text-align: center;
}

.tab-selected-title > span {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  min-height: 15px;
}

.curriculm-select-container {
  padding: 30px 30px 48px;
  background: #fbfdff;
  border-radius: 0px 0px 10px 10px;
  border: 1px solid #eee;
  border-top: 1px solid transparent;
}

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

.select-container > label {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
}

.select-container .select-wrapper {
  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid rgba(104, 120, 182, 0.58);
  height: 52px;
  position: relative;
  margin-top: 5px;
}

.select-container .select-wrapper > select {
  width: 100%;
  height: 100%;
}

.select-container .select-wrapper::after {
  content: "\2304";
  display: block;
  position: absolute;
  top: 22%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 32px;
  color: #465697;
  z-index: 999;
}

.tab-selected-title.selected {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  gap: 5px;
  padding: 0 5px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.selected-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.chip {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  padding: 5px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #858585;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 16px;
}

.chip .close-chip {
  margin-left: 8px;
  color: #888;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}

.chip.extra-chip {
  background-color: #6878b6;
  color: #fff;
  border: 1px solid #ccc;
  width: 36px;
  cursor: pointer;
}

.selected-popup-title {
  color: #6878b6;
  font-size: 20px;
  font-weight: 600;
}

.selected-list-wrapper {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selected-list-wrapper > li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selected-value {
  color: #858585;
  font-size: 14px;
  line-height: 150%;
  font-weight: 500;
}

.selected-list-wrapper > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 15px;
  margin-bottom: 5px;
}

.selected-wrapper {
  width: 100%;
  margin-top: 5px;
}

.selected-wrapper .SumoSelect {
  width: 100%;
}

.selected-wrapper .SumoSelect > .CaptionCont {
  width: 100%;
  border: 1px solid #6878b694;
  border-radius: 10px;
  height: 52px;
}

.selected-wrapper .SumoSelect > .CaptionCont > span {
  padding-right: 45px;
  line-height: 39px;
  font-weight: 400;
  font-size: 14px;
  color: #434343;
}

.multy-textarea-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multy-textarea-wrapper {
  display: flex;
  border: 1px solid #d9d9d9;
  padding-right: 20px;
  border-radius: 11px;
  padding: 10px 23px 10px 10px !important;
}

.multy-textarea {
  background: #fff !important;
  color: #000 !important;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 400;
  padding: 7px 68px 10px 10px !important;
  height: 50px !important;
  outline: none;
  border: none !important;
}

.multy-textarea-wrapper > span {
  cursor: pointer;
}

.multy-textarea-wrapper.disabled {
  border: 1px solid transparent;
}
.multy-textarea-wrapper.disabled span {
  display: none;
}

.multy-textarea.disabled {
  color: #828282 !important;
}
.multy-textarea-wrapper > span {
  color: #b1b1b1;
}

#show-more-popup {
  width: 600px;
}

.open-textarea {
  color: #828282;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.5;
  max-width: 655px;
}

.toggleSectionContent {
  min-height: 25px;
  min-width: 25px;
}

@media (max-width: 1024px) {
  #show-more-popup {
    width: 90%;
  }
}

.share-email-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* .share-type-choice-wrapper{
  display: none;
} */

.share-type-choice-wrapper select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 1;
}

.share-email-input {
  display: none;
}
/* .shared-autocomplete-ul {
  top: 301.828px !important;
  left: 626px !important;
  width: 581px !important;
} */

.subscription-table-wrapper {
  margin-top: 30px;
}

.subscription-table-wrapper h4 {
  color: #434343;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.subscription-table {
  border-radius: 16px;
  border: 1px solid #ebebeb;
  margin-top: 15px;
}

.swal-btn-continue {
  background-color: #6878b6 !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
}

.swal-btn-cancel {
  background-color: #f6f6f6 !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
}

/* blog card style */

.welcome_section_height {
  height: 333px !important;
}

.blog_section {
  width: auto;
  margin: 0 auto;
  padding: 10px 0px 20px 0px;
}

.blog_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.blog_header h2 {
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
  color: #6878b6;
}

.blog_header .view_more {
  font-family: Plus Jakarta Sans;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  text-decoration: underline;
  text-decoration-style: solid;
  color: #6878b6;
}

.blog_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.blog_card {
  background: #fff;
  overflow: hidden;
}

.blog_card_img_wrapper {
  width: 100%;
  /* min-width: 250px; */
  max-height: 122px;
  border-radius: 6.88px;
  overflow: hidden;
}

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

.blog_text_wrapper {
  margin-top: 13px;
  display: flex;
  gap: 5px;
  flex-direction: column;
  justify-content: space-between;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.blog_card .date {
  font-weight: 400;
  font-size: 10px;
  line-height: 9.46px;
  color: #818181;
}

.blog_card h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 17.19px;
  /* letter-spacing: -2%; */
  color: #151515;
  width: 100%;
}

.blog_header .view_more {
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  text-decoration: underline;
  text-decoration-style: solid;
  color: rgba(104, 120, 182, 1);
}

.blog_text_wrapper h3,
.blog_text_wrapper h3 a {
  white-space: normal; /* allow wrapping */
}

.blog_card .desc {
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  color: #545454;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog_text_wrapper h3,
.blog_text_wrapper .desc {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.card_action_button {
  position: absolute;
  right: 24px;
  top: 28px;
  z-index: 100;
}
.highlight_z {
  z-index: 101 !important;
}

.welcome-notification-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 488px;
  max-width: 488px;
}

.mt_15 {
  margin-top: 15px;
}

/* ===== */

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

.progress_tooltip > img {
  width: 16px;
  height: 16px;
  object-fit: cover;
}

.progress_tooltip .progress_tooltiptext {
  visibility: hidden;
  min-width: 250px;
  background-color: #f5f5f5;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 8px 5px;
  position: absolute;
  z-index: 99999;
  top: 30px;
  left: 0px;
  /* margin-left: -100px; */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.32px;
  text-align: left;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.progress_tooltip .progress_tooltiptext::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 9px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #f5f5f5 transparent;
  width: 15px;
  height: 20px;
}

.progress_tooltip:hover .progress_tooltiptext {
  visibility: visible;
  opacity: 1;
}

.users-text {
  color: #555454;
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
}

.welcome_inside figure {
  position: relative;
}

.welcome_inside > figure::before {
  content: "";
  position: absolute;
  /* inset: 0; */
  background: radial-gradient(circle, #aaa 22%, #000 50%, #8c8c8c 76%);
  filter: blur(40px);
  z-index: 0;
  height: 20px;
  bottom: 10px;
  width: 100%;
}

.light-gray-btn {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 5px 30px 5px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  max-height: 45px;
  color: #6878b6;
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
  border: none;
  outline: none;
}

.yellow-info-circle {
  width: 81px;
  height: 81px;
  margin-top: 40px;
  margin-bottom: 5px;
}

.yellow-info-circle > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.mt_65 {
  margin-top: 65px;
}

.language-config-section-slider-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.language-config-section-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 5px !important;
  background: #e1e3e8 !important;
  outline: none !important;
  margin-bottom: 6px;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.language-config-section-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #6878b6 !important;
  cursor: pointer !important;
}

.language-config-section-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #c6003f !important;
  cursor: pointer !important;
}

/* Disabled state styles for slider thumb */
.language-config-section-slider:disabled::-webkit-slider-thumb {
  background: #ccc !important;
  cursor: not-allowed !important;
}

.language-config-section-slider:disabled::-moz-range-thumb {
  background: #ccc !important;
  cursor: not-allowed !important;
}

.language-config-section-slider:disabled::-ms-thumb {
  background: #ccc !important;
  cursor: not-allowed !important;
}

/* Error message styling */

.language-config-labels {
  display: flex !important;
  color: #404040 !important;
  justify-content: space-between !important;
  font-family: "PlusJakartaSans-Medium", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  width: 100% !important;
}

.language-config-section-heading {
  color: #434343 !important;
  font-family: "PlusJakartaSans-SemiBold", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.language-config-section-title {
  color: #767676 !important;
  text-align: left !important;
  font-family: "PlusJakartaSans-Regular", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  position: relative !important;
}

.margin_bottom_spacing {
  margin-bottom: 12px !important;
}

.sumo_region_country{
  border: none!important;
}

/* Safeguarding Dropdown Styles */
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-toggle-btn {
  background: #ffffff;
  padding: 12px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  color: #6878B6;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  border: 1px solid #6878B6;
  cursor: pointer;
  text-decoration: none;
  gap: 8px;
}

.dropdown-toggle-btn:hover {
  background-color: #f0f2f8;
  color: #6878B6;
  text-decoration: none;
}

.dropdown-arrow-icon {
  width: 12px;
  height: 8px;
  transition: transform 0.3s ease;
  margin-left: 4px;
}

.dropdown-toggle-btn.active .dropdown-arrow-icon {
  transform: rotate(180deg);
}

.dropdown-menu-custom {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 1000;
  display: none;
  overflow: hidden;
  margin-top: 5px;
}

.dropdown-menu-custom.show {
  display: block;
}

.dropdown-item-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #555454;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.dropdown-item-custom:hover {
  background: #f8f9fa;
  color: #6878b6;
  text-decoration: none;
}

.dropdown-item-custom span {
  font-size: 16px;
}

.dropdown-toggle-btn .icon-settings {
  margin-right: 8px;
}

.dropdown-toggle-btn .shield-icon {
  margin-right: 8px;
  color: #6878B6;
  flex-shrink: 0;
}