:root {
  --blue: #3846f6;
  --red: #f43151;
  --black: #222222;
  --black2: #101828;
  --white: #ffffff;
  --grey: #f4f4f4;
  --light-gray: #d3d3d3;
  --dark-gray: #667085;
  --green:#15A050;
  --backgroud-gray: #F2F4F7;
  --yellow: #F9C546;
}

body,
div,
ul,
li,
a,
button,
td,
span {
  font-family: "Poppins" !important;
}
a {
  text-decoration: none;
}

.red {
  color: var(--red);
}
.blue {
  color: var(--blue);
}
.black {
  color: var(--black);
}
.white {
  color: var(--white);
}
.grey {
  color: var(--grey);
}
.dark-gray {
  color: var(--dark-gray);
}
.green{
 color: var(--green);
}
.yellow{
  color: var(--yellow);
}
.black-2 {
  color: var(--black2);
}
a:hover{
  color: inherit !important;
}
button:focus,
button:active {
  box-shadow: none !important; /* if there's a box-shadow causing the border */
}

.bootstrap-tagsinput {
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;
  border: aliceblue !important;
  width: 35rem;
  line-height: 2rem !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
  font-size: 14px !important;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px !important;
  cursor: pointer;
}

.cropped-home-banner {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 0;
  border-left: 0px solid #f9f9f900;
  border-right: 70px solid #13d76203;
}

.continue-line {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  line-height: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.line {
  flex-grow: 1;
  height: 1px;
  background-color: #d0d5dd;
  margin-left: 10px;
}

.forgot-pass {
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: underline;
}

@media only screen and (max-width: 766px) {
  .cropped-home-banner {
    display: none;
  }
  .home-banner-area {
    background: none !important;
    padding: 80px 0 75px !important;
  }
  .home-banner-wrap {
    max-width: 100% !important;
    text-align: center;
  }
  .remove-social-network-entry {
    margin-top: 0px;
  }
}
.bg-background {
  background: #f9f9f9;
}
.bg-transparent {
  background: #00000000 !important;
}
.top-categories {
  width: 100%;
  height: 100%;
  padding: 20px 35px;
  display: inline-flex;
  border: 1px solid #e4e4e4;
  text-decoration: none;
  display: grid;
  align-content: center;
}
.top-categories:hover,
.top-categories:focus {
  background-color: #ec5252;
  background-image: url("../img/category-bg.png");
  background-size: cover;
  background-position: 50%;
  transition: all 0.5s;
}
.category-icon {
  width: 45px;
  height: 45px;
  background-color: #ec5252;
  color: #fff;
  border-radius: 50px;
  font-size: 20px;
  line-height: 45px;
  text-align: center;
  margin: 10px 0px;
}
.top-categories:hover .category-icon,
.top-categories:focus .category-icon {
  background-color: #fff;
  color: #000;
}
.category-title {
  font-weight: 600;
}
.top-categories:hover .category-title,
.top-categories:focus .category-title {
  color: #fff;
}
.category-title p {
  color: #b4b4b4;
  font-size: 13px;
  font-weight: 400 !important;
  margin-top: 2px;
  margin-bottom: 1px;
}
.top-categories:hover .category-title p,
.top-categories:focus .category-title p {
  color: #efdcdc;
}
.divider-1 {
  background-color: #b8c3c5;
  margin-left: -15px;
  margin-right: -10px;
  margin-top: 12px;
  margin-bottom: 6px;
}

.compare-row {
  margin-top: 25px;
  background-color: #fff;
  border: 1px solid #f9f9f9;
  border-radius: 10px;
  padding: 28px 10px;
}
.btn-compare-sm {
  color: #3846F6;
  background: #eff4ff;
  font-size: 11px;
  border-radius: 5px;
  text-align: center;
  height: 25px;
  border: none;
  line-height: 24px;
  margin-top: 3px;
}
.btn-compare-sm i {
  margin-right: 4px;
}
.btn-compare-sm:hover,
.btn-compare-sm:focus {
  color: #fff;
  background: #3846F6;
}
.badge-sub-warning {
  background-color: #eceb98 !important;
  color: #3c3c2d !important;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
}
.badge-primary {
  background-color: #3846F6 !important;
  color: #fff !important;
  padding: 6px 10px;
  font-weight: 500;
}
.floating-user {
  width: auto;
  height: 30px;
}
.floating-user img {
  border-radius: 15px;
  position: absolute;
}
.floating-user img:hover,
.floating-user img:focus {
  z-index: 999;
}
.become-user-label {
  padding: 30px 25px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: right;
}
.bg-sub-primary {
  background-color: #e6f0f9;
}
.bg-sub-danger {
  background-color: #fcebeb;
}

.text-sub-warning {
  color: #eceb98 !important;
}
.footer-area {
  color: #bfc8da;
}
.footer-hover-link {
  text-decoration: none;
  font-size: 13px;
  color: #bfc8da;
  font-weight: 500;
}
.footer-hover-link:hover {
  color: #efefef !important;
}

.language_selector {
  border-radius: 5px;
  font-size: 14px;
  background: #3846F6;
  border-color: #3846F6;
  color: #bfc8da;
  padding: 6px 10px;
}
.footer-summary {
  color: #fff;
  padding: 29px 30px;
  background: linear-gradient(
    360deg,
    rgba(10, 28, 58, 1) 0%,
    rgba(35, 52, 81, 1) 100%
  );
}
.footer-summary h3,
.footer-summary h4,
.footer-summary h5 {
  line-height: 32px;
  font-size: 22px;
}
ul.footer-social-link {
  list-style: none;
  padding-left: 0px;
  height: 30px;
}
ul.footer-social-link li {
  float: left;
  background-color: #293e61;
  color: #fff;
  margin: 0px 8px 0px 0px;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  transition: all 0.3s;
}
.border-top-sub-blue {
  border-top: 1px solid #293e61;
}
ul.footer-social-link li.active,
ul.footer-social-link li:hover {
  background-color: #ec5252;
  transition: all 0.3s;
}
ul.footer-social-link li a {
  display: block;
  color: #fff;
  font-size: 15px;
}
ul.footer-social-link li a:hover {
  color: #ddd;
}

section.featured-instructor {
  background: white;
  padding: 30px 0px 0px 0px;
}
.top-instructor-img {
  max-width: 250px;
}
.top-instructor-img img {
  border-radius: 10px 0px 0px 10px;
}
@media only screen and (min-width: 1200px) {
  .top-instructor-details {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    max-width: 58%;
    padding: 0px 22px;
  }
}
.top-istructor-slick .slick-prev:before {
  color: #3846F6;
  font-size: 25px;
  margin-right: -25px;
}

.top-istructor-slick .slick-next:before {
  color: #3846F6;
  font-size: 25px;
  margin-left: -25px;
}

.slick-list.draggable {
  border-radius: 10px;
  margin: 0px 12px;
}

/*.instructor-summary .slick-prev:before{
    font-family: "Font Awesome 5 Free";
    content: f30a;
    color: #040404;
}
.instructor-summary .slick-next:before{
    font-family: "Font Awesome 5 Free";
    content: f30b;
    color: #040404;
}*/
.instructor-summary .slick-track {
  padding: 0px;
}

.instructor-summary .instructor-image {
  width: 100%;
  text-align: center;
  position: relative;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: -100px;
  z-index: -1;
}

.instructor-summary img {
  height: 200px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
.instructor-summary .summary-box {
  border-radius: 8px;
  background-color: #3846F6;
  color: #fff;
  padding: 22px 25px;
  margin: 0px 40px;
}
.instructor-summary .summary-box .summary-body {
  font-size: 14px;
}
.instructor-summary .summary-box .summary-footer {
  width: 100%;
  display: flex;
  margin-top: 20px;
}
@media only screen and (max-width: 500px) {
  .instructor-summary .summary-box .summary-footer {
    display: inline-grid;
  }
  .instructor-summary .summary-box .summary-footer .name {
    margin-top: 10px;
  }
}
.instructor-summary .summary-box .summary-footer .badge {
  background-color: #3e95e8;
}
.instructor-summary .summary-box .summary-footer .name {
  width: auto;
  margin-left: auto;
  padding-left: 100px;
  white-space: nowrap;
}
.instructor-summary .summary-box .summary-footer .name > h6 {
  color: #fff;
  margin: 0px !important;
  font-size: 15px;
  font-weight: 700;
}
.instructor-summary .summary-box .summary-footer .name > h6::before {
  content: "";
  position: absolute;
  background-color: white;
  width: 80px;
  height: 1.5px;
  border-radius: 5px;
  margin-top: 9px;
  margin-left: -90px;
}
.instructor-summary .summary-box .summary-footer .name > span {
  font-size: 12px;
  color: #ffffff;
}

.hover-shadow-1:hover {
  box-shadow: 0px 0px 5px 0px #9090902e !important;
}
.image-placeholder-1 {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: linear-gradient(
    91deg,
    rgb(0 0 0 / 24%) 0%,
    rgba(0, 35, 51, 0) 100%
  ) !important;
}
.image-placeholder-2 {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: linear-gradient(
    91deg,
    rgb(0 0 0 / 50%) 0%,
    rgb(0 0 0 / 50%) 100%
  ) !important;
}

.image-placeholder-3 {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: linear-gradient(
    91deg,
    rgb(0 0 0 / 42%) 0%,
    rgb(0 35 51 / 0%) 100%
  ) !important;
}

.compare-row {
  margin-top: 25px;
  background-color: #fff;
  border: 1px solid #f9f9f9;
  border-radius: 10px;
  padding: 28px 10px;
}
.compare-row-icon {
  height: 26px;
  width: 26px;
  line-height: 26px;
  background: #444;
  border-radius: 5px;
  font-size: 13px;
  color: #fff;
  text-align: center;
}
.skill-level-icon {
  width: 24px;
  height: 24px;
  background-color: transparent;
}
.skill-level-icon span {
  background-color: #dcdee1;
  margin-left: 1.5px;
  margin-right: 1.5px;
  float: left;
}
.skill-level-icon .active {
  background-color: #ec5252;
}
.skill-level-icon span:first-of-type {
  width: 5px;
  height: 8px;
  margin-top: 16px;
}
.skill-level-icon span:nth-of-type(2n) {
  width: 5px;
  height: 16px;
  margin-top: 8px;
}
.skill-level-icon span:last-of-type {
  width: 5px;
  height: 24px;
}

.marge-input-box input {
  border-radius: 10px 0px 0px 10px;
  border-right: 0px;
  font-size: 13px;
}

.marge-input-box .input-group-append {
  border: 1px solid #cccfe7;
  border-radius: 0px 10px 10px 0px;
  border-left: none !important;
}
.marge-input-box button {
  background: #ec5252;
  color: #fff;
  font-weight: 500;
  margin: 5px;
  font-size: 13px;
  border-radius: 8px;
}
.marge-input-box button:hover {
  background: #cd4f4f;
  color: #fff;
}

.login-container {
  display: flex;
  justify-content: center;
}

/*Signup & sign in page login*/
.sign-up-form {
  background: #fff;
  padding: 35px 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px -1px #ebebeb;
  width: 772px;
}

.login-form {
  background: #fff;
  padding: 35px 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px -1px #ebebeb;
  width: 400px;
}

.form-control {
  height: 45px;
}
.sign-up-form .form-group {
  margin-bottom: 15px;
}
.sign-up-form .form-group label {
  color: #5c5c5c;
  font-weight: 600;
}
.sign-up-form .form-group .input-group span {
  border-right: none;
  padding: 12px 8px 12px 15px;
  border-radius: 10px;
  color: #878787;
  font-size: 15px;
  font-weight: 500;
}
.sign-up-form .form-group .input-group input {
  padding: 12px 5px;
  border-radius: 10px;
  color: #292929;
  font-size: 13px;
  font-weight: 500;
}

.login-password {
  width: 100%;
  display: flex;
}

.login-form-brand-icon {
  margin-left: 50%;
  transform: translate(-50%);
  width: 170px;
}

.signup-form-section-title {
  margin-bottom: 20px;
  color: #344054;
  font-weight: 500;
}

.form-line-signup {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #d0d5dd;
}

.sign-up {
  display: flex;
  justify-content: center;
}

.form-signup {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.interest-section label {
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #344054;
}

.interest-box {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tt-input {
  margin-top: 5px;
}

.bootstrap-tagsinput {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: #6c757d;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
}

.tag {
  background-color: rgba(56, 70, 246, 0.15);
  color: var(--blue) !important;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 7px !important;
  cursor: pointer;
  margin: 5px;
}
.tag-input {
  border: none;
}
.tt-menu .tt-open {
  margin-left: 0;
  width: auto;
}

.tt-selectable:hover {
  cursor: pointer;
  background-color: hsl(192deg 33% 97%);
}
.tt-selectable {
  padding: 8px;
}
.tt-hint {
  display: none;
}
.tt-dataset {
  margin-left: 0;
  background-color: #ffffff !important;
  border: 1px solid hsl(192deg 33% 97%);
  box-shadow: 0px 0px 5px 0px #9090902e;
  border-radius: 8px;
}

#search_software {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.social-dropdown {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.signup-dropdown {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #292929;
  font-size: 13px;
  height: 45px;
  font-weight: 500;
}
.select-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.select-wrapper select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-wrapper::after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.rating {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.rating .circle {
  width: 30px;
  height: 30px;
  background-color: #ff99a5;
  border-radius: 50%;
  margin-right: 10px;
}
.circle.selected,
.circle:hover {
  background-color: #ff0055;
}
/* .rating .circle:last-child {
    background-color: #FF99A5;
} */

/*End Signup & sign in page login*/

/* Registration CSS */

.profile-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 90%;
  max-width: 600px;
  text-align: left;
}
#profile-picture {
  height: 128px;
  width: 128px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 10px;
}
.avatar-selection-header {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: end;
}

@media only screen and (max-width: 500px) {
  .avatar-selection-header {
    flex-direction: column;
    align-items: center;
  }
  #random-avatar-btn {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .select-wrapper {
    flex-direction: column;
  }
  .rating {
    margin-top: 12px;
    margin-left: 0;
  }
  .sign-up-form {
    margin-top: 28px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 10px -1px #ebebeb;
    width: 100%;
  }
  .form-signup {
    background-color: var(--blue);
  }

  #social-line {
    display: block !important;
    height: 2px;
  }

  .software-section-dropdown {
    flex-direction: row;
  }

  .software-rating {
    margin-top: 0px;
    margin-left: 5px;
  }
}
.avatar-picker {
  padding: 10px 18px 10px 18px;
  border-radius: 8px;
  background-color: var(--blue);
  color: white;
  cursor: pointer;
  margin-bottom: 0px !important;
}
.profile-label {
  color: #344054;
  font-weight: 500;
}
.avatar-selection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
#random-avatar-btn {
  display: inline;
  height: fit-content;
  width: auto;
  color: #222222;
  background-color: white;
  border: 1px solid #2222221a;
  font-size: 14px;
  padding: 10px 18px 10px 18px;
  width: 176px;
  margin-left: 8px;
  margin-right: 8px;
}
.avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s;
}
.avatar:hover {
  box-shadow: 8px 4px 8px rgba(0, 0, 0, 0.1);
}
.registration-controls {
  margin-top: 16px;
  display: flex !important;
  justify-content: space-between;
}
.btn-container {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}

[type="date"] {
  background: #fff
    url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)
    97% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

#social-line {
  display: none;
}

.tt-menu .tt-open {
  margin-left: 0;
}
/* .tt-dataset{
    margin-left: 0;
    background-color: #ffffff !important;
    width: 550px;
    border: 1px solid hsl(192deg 33% 97%);
    box-shadow: 0px 0px 5px 0px #9090902e;
  } */

.tt-selectable:hover {
  cursor: pointer;
  background-color: hsl(192deg 33% 97%);
}

.tt-selectable {
  padding: 5px;
}

/* Registration CSS Ends */

/*used on Home page*/
.animated-loader {
  width: 100px;
  height: 100px;
  line-height: 100px;
  padding: 0px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.common-search-box {
  margin-right: 50px;
  padding: 0px 0;
}
.common-search-box input {
  background-color: hsl(192deg 33% 97%);
  border: 1px solid hsl(192deg 33% 97%);
  height: 40px;
  padding: 0 15px;
  border-radius: 5px 0 0 5px;
  font-size: 13px;
}
.common-search-box input:focus {
  background-color: #fff;
  border-color: #dedfe0;
  border-right-color: transparent;
}
.common-search-box input:focus + .input-group-button {
  background-color: #fff !important;
  border-top: 1px solid #dedfe0 !important;
  border-right: 1px solid #dedfe0 !important;
  border-bottom: 1px solid #dedfe0 !important;
  padding: 5px 9px 5px 10px !important;
}
.common-search-box button {
  background-color: #ec5252 !important;
  border-color: #ec5252;
  color: #fff;
  padding: 1px 6px;
  border-radius: 6px;
}
.common-search-box button:hover {
  color: #efefef;
}
.common-search-box .input-group-button {
  background-color: hsl(192deg 33% 97%);
  padding: 6px 10px 6px 10px;
  border-radius: 0px 5px 5px 0px;
}

/*Custom print content*/
@media print {
  .print-content {
    position: fixed !important;
    margin: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3333 !important;
    width: 100% !important;
    background: #fff !important;
  }
  footer,
  nav,
  title {
    display: none !important    ;
  }
  body {
    overflow: hidden !important ;
  }
}
/*End Custom print content*/

/*BLOG start*/
.card-blog {
  border-radius: 10px;
  margin: 30px 0px;
}
.card-blog > img {
  border-radius: 10px;
}
.card-blog-body {
  position: relative;
  height: 380px;
  border-radius: 10px;
}
.card-blog .blog-thumbnail {
  position: absolute;
  top: 0;
  width: 100%;
  height: 62%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.card-blog:hover .blog-thumbnail {
  height: 100%;
  background-position: center;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.card-blog:hover .card-blog-body::after {
  content: "";
  background: linear-gradient(
    360deg,
    rgb(0 0 0 / 82%) 0%,
    rgba(255, 255, 255, 0) 72%
  );
  position: absolute;
  z-index: 500;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.card-blog-body .blog-placeholder {
  position: absolute;
  bottom: 20px;
  z-index: 600;
  width: 100%;
}
.card-blog:hover .blog-placeholder {
  color: #fff !important;
  padding: 0px 20px;
}
.card-blog-body .cart-blog-title {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
  text-decoration: underline;
}
.card-blog-body .blog-info {
  width: 33.3%;
  text-align: center;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 0px;
  color: #858585;
}
.card-blog:hover .blog-info {
  color: #fff !important;
}

.blog-search-input {
  height: 42px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #cdcdcd;
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0px;
}
.blog-search-button {
  display: none;
  padding: 0px 20px;
  border: none;
  border-bottom: 1px solid #cdcdcd;
  background-color: #fff;
}
.ellipsis-line-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.ellipsis-line-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.ellipsis-line-4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.ellipsis-line-5 {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
/*End Blog*/

.header-underline {
  position: relative;
}
.header-underline::before {
  content: "";
  position: absolute;
  background-color: #293e61;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  bottom: -7px;
}
.header-underline-2 {
  position: relative;
}
.header-underline-2::before {
  content: "";
  position: absolute;
  background-color: #ec5252;
  width: 50%;
  height: 2px;
  border-radius: 2px;
  left: 25%;
  bottom: -7px;
}
.btn-primary{
  background-color: var(--blue);
  border-radius: 8px;
  padding: 10px;
}
.btn-primary:hover {
  background-color: #095299;
  border-color: #095299;
}

.profile-icon img {
  height: 25px;
  width: 25px;
}

.software-section-dropdown {
  margin-bottom: 16px;
}

.required-star {
  color: red;
}

.btn-outline-secondary {
  border-width: 1px;
  border-color: lightgray;
}

.remove-software-entry {
  cursor: pointer;
}

.remove-social-network-entry {
  margin-top: 14px;
  cursor: pointer;
}

.applyBtn {
  background-color: var(--blue);
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--blue) !important;
}
.burger {
  font-size: 30px;
  cursor: pointer;
  display: none; /* Hidden by default */
  z-index: 1000; /* High z-index to bring it on top */
  position: relative; /* Ensure it’s properly positioned */
}

@media screen and (max-width: 768px) {
  .remove-social-network-entry {
    margin-top: 0px;
    margin-bottom: 8px;
    align-self: center;
  }
}

@media screen and (max-width: 1028px) {
  .burger {
    display: block;
  }

  .left-side-menu {
    left: 0; /* Slide in from the left */
    transition: left 0.3s ease-in-out; /* Smooth transition */
  }

  #left-sidebar {
    /* display: block; */
    display: none;
    top: 56px;
    transition: left 0.3s ease-in-out;
    position: absolute !important;
    margin-top: 30px !important;
  }
}

.iti {
  width: 100%;
}
.iti .iti__selected-dial-code {
  font-size: 13px;
}

.sidebar-logout > hr {
  height: 1px;
  border: none;
  background-color: #222222;
}

#navigation-logout {
  list-style: none;
  font-size: 14px !important;
  font-weight: 500;
  margin-left: 14px;
}

#navigation-logout > a {
  color: #f43151;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-left: 14px;
  padding: 8px;
}

#navigation-logout > a > i {
  margin-right: 14px;
}

/* DataTables CSS */

/* Ensure the pagination controls take the full width */
.dataTables_scrollHead .dataTables_scrollHeadInner table {
  width: 100% !important;
}
.dataTables_scrollHeadInner table thead {
  width: 100% !important;
}
.dataTables_scrollBody table {
  width: 100% !important;
}
.dataTables_scrollHeadInner {
  width: 100% !important;
}
.dataTables_paginate {
  width: 100%;
  display: flex;
  justify-content: center; /* Center the pagination */
  margin-top: 10px;
}

.pagination {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between !important;
  padding: 12px 24px 16px 24px;
}

.paginate_button {
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.page-item.disabled .page-link{
  background-color: #f2f4f7 !important;
}

.paginate_button a {
  padding: 8px 14px 8px 14px;
  border: none;
  cursor: pointer !important;
  color: var(--dark-gray);
}

.paginate_button a:hover {
  border-radius: 50% !important;
}

.paginate_button.previous {
  margin-right: auto;
}
.paginate_button.next {
  margin-left: auto;
}

.paginate_button.previous > a {
  border-radius: 50% !important;
  padding: 8px 10px 8px 10px;
}

.paginate_button.next > a {
  border-radius: 50% !important;
  padding: 8px 10px 8px 10px;
}

/* Target the <li> element with .paginate_button and .active classes */
.paginate_button.active a {
  /* Example styles */
}

/* Optional: Style the <a> within the active <li> */
.paginate_button.active a {
  background-color: #f2f4f7 !important;
  border-radius: 20px !important; /* Add rounded corners */
  color: #1d2939 !important; /* Change text color */
  text-decoration: none !important; /* Remove underline */
  border: none;
}

.paginate_button:hover{
  /* background-color: #f2f4f7 !important; */
  border-radius: 50% !important;
}

/* ----- database length */
/* Container for pagination and length menu */
.dataTables_wrapper .dataTables_length {
  position: absolute;
  right: 92px;
  bottom: 20px;
  margin-right: 12px; /* Space between dropdown and pagination */
  z-index: 1;
  cursor: pointer;
}

/* Ensure the pagination container is positioned correctly */
.dataTables_wrapper .dataTables_paginate {
  position: relative;
}

/* Hide text "Show" and "entries" */
.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

.dataTables_wrapper .dataTables_length label::before {
  content: " ";
}

thead th {
  background-color: #f9fafb;
  color: #667085;
}

thead th:first-child {
  border-left: 1px solid #eaecf0;
}

thead th:last-child {
  border-right: 1px solid #eaecf0;
}

/* Ensure the dropdown is visible */
.dataTables_wrapper .dataTables_length select {
  margin-left: 5px; /* Space between dropdown and label */
  color: #344054;
  background-color: #f2f4f7;
  border-radius: 20px;
  border: none;
  font-size: 12px !important;
}

.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  font-size: 0; /* Remove text but keep dropdown */
}

.dataTables_wrapper .dataTables_length select {
  font-size: 1rem; /* Restore font size for the dropdown */
  margin-left: 5px; /* Space between dropdown and other elements */
}

.dataTables_wrapper {
  background-color: white;
  border-radius: 12px;
}

th {
  font-size: 12px;
}

tr {
  background-color: white !important;
  border-radius: 8px !important;
}

table.dataTable {
  margin-top: 0px !important;
}

.table-upper-button-container {
  width: 100%;
}

.table-upper-button-container .row {
  width: 100%;
}


.table.dataTable tbody td.focus {
  outline: none !important;
  background-color: white;
  border: none;
}

.dropright .btn {
  min-height: auto;
}

.form-group {
  margin-bottom: 0px;
}
/* END */

/* DataTables CSS END */

/* Override sparkline css */

.col-xl-6,
.col-xl-5,
.col-xl-7 {
  padding-left: 0px;
  padding-right: 0px;
}

.btn-secondary {
  font-size: 14px;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px 0px #1018280d;
}

.btn {
  border-width: 1px;
  border-color: #d0d5dd;
  min-height: 45px;
}

.btn.bg-white {
  border-radius: 8px;
  color: #344054 !important;
}

.btn > i {
  margin-right: 5px;
}

.calendar {
  width: 100%;
  min-height: 45px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Sparkline css nav-pills */
.form-wizard-header {
  margin-left: 0px;
  margin-right: 0px;
  background-color: unset;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.nav-pills .nav-link{
  font-size: 14px;
  padding: 24px !important;
  white-space: nowrap;
  color: #6c757d !important;
}

.nav-item .nav-item-text{
  font-size: 14px !important;
}

.nav-pills .nav-link.active {
  background-color: unset;
  color: #175cd3 !important;
  border-bottom: 2px solid #175cd3;
}

.icon-container{
  border-radius: 8px;
  background-color: lightgrey;
  color: #222222;
  height: 34px;
  width: 34px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sparkline css nav-pills */
/* END Sparlkline css */

/* Override sparklines css */
.container-fluid {
  /* width: 100%; */
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
}

@media (min-width: 992px) {

  body[data-layout="detached"] .container-fluid {
    max-width: 100%;
  }
}

body[data-layout="detached"] .content-page {
  margin-right: 0px;
  /* padding-bottom: 0px; */
}

/* Sparkliness Modal */
.modal-header {
  border-bottom: none;
}
.modal-footer {
  border-top: none;
}
.modal-title {
  color: #344054;
}

.modal-content {
  border-radius: 12px;
}

.modal-body {
  padding: 20px;
}

.modal-body .form-group {
  padding: 0px;
}
/* Sparkliness Modal END */

.label {
  color: #344054;
}

.table thead th {
  border-bottom: 1px solid #eaecf0;
}

button:focus,
button:active {
  box-shadow: none !important; /* if there's a box-shadow causing the border */
}

input {
  border-radius: 8px !important;
}

#back-btn {
  cursor: pointer;
}

.add-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  padding: 20px;
  border: 2px dashed #D0D5DD;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

/* Select2 */
.select2-container--default .select2-selection--single {
  height: 45px;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  top: 5px;
}

.select2-container--default
  .select2-results__option[aria-selected="true"]:hover {
  background-color: #eaecf0;
  color: #101828;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #eaecf0;
  color: #101828;
}

/* Apply border radius to the Select2 dropdown */
.select2-container--default .select2-dropdown {
  border-radius: 8px; /* Adjust the value as needed */

  box-shadow: 0px 12px 16px -4px #10182814;
}

.badge-select {
  background-color: var(--backgroud-gray);
  color:#344054;
  border-radius: 22px;
  border: none;
  font-size: 12px;
  width: 110px;
}
/* Select2 END */


/* Override sparkliness css END */

.status {
}
.status-success-lighten {
  color: #15a050;
}
.status-danger-lighten {
  color: #fa5c7c;
}

/* MODAL Styling */
.modal-body > form > div.form-group:not(:first-child) {
  margin-top: 16px;
}
.modal-dialog-shadow {
  box-shadow: 0px 20px 24px -4px #10182814;
}
/* Modal Styling END */

.search-input {
  display: flex;
  flex-direction: row;
  min-width: 300px;
  background-color: white;
  border-radius: 12px;
  align-items: center;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px 0px #1018280d;
  padding-left: 10px;
  padding-right: 10px;
}

.search-input > i {
  font-size: 15px;
  margin-right: 5px;
}

.search-input > input {
  border: none;
  padding: 0px;
}

.top-btn-container {
  display: flex;
  justify-content: space-between;
}

.top-btn-container a {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .search-input {
   
    min-width: 100%;
  }
  .course-header-buttons-container {
    flex-direction: column !important;
  }
  .top-btn-container {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .pagination > li {
    height: 40px;
    font-size: 12px !important;
  }

  .pagination {
    display: flex !important;
    justify-content: space-between;
  }
  .dataTables_wrapper .dataTables_length {
    right: 55px;
    bottom: 22px;
  }
  .table-upper-button-container > div {
    margin-bottom: 12px;
  }
  li.paginate_button {
    display: block;
  }

  .course-header-buttons-container {
    width: 100%;
  }

  .course-filter-right {
    flex-wrap: wrap;
  }

  .pagination {
    padding: 12px 12px 16px 12px;
  }

  #add-new-course-btn {
    display: none;
  }

  #course-add-new {
    display: block !important;
  }

  .accordian-heading-btn-container{
    display: none !important;
  }

  #module-add-new{
    display: block !important;
  }

  #course-add-category-btn {
    display: none;
  }
}
.hidden {
  display: none !important;
}

/* Custom File */
.custom-file {
  position: static !important;
  display: inline-block !important;
  width: 100%;
  height: auto;
}
.custom-file input {
  display: none;
}
.custom-file-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  position: static !important;
  cursor: pointer !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  padding: 16px 24px 16px 24px;
}

.custom-file-label .upload-text {
  color: #175cd3;
  font-weight: bold;
}

.custom-file-warning-icon {
  content: url(../img/icons/file-picker-warning-icon.svg);
}

.custom-file-label::after {
  content: none !important;
}

.percentage-btn{
  margin-left: 12px !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
}

.form-container{
  margin-bottom: 10px;
}

.alert-success{
  border: 1px solid #6CE9A6;
  background-color:#F6FEF9;
  border-radius: 8px;
}

.alert-heading{
  color: #027A48;
}

.course-content-heading{
  font-size: 14px !important;
  margin-bottom: 0px !important;
}

.delete-course-btn:hover{
  background-color: rgb(172, 45, 45); 
}

.quiz-list-item-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-tag{
  background-color: rgb(196, 229, 250);
  color: #3846F6;
  width: 80px;
  border-radius: 4px;
  font-size: 12px;
  align-items: center;
  text-align: center;
}

.certificate-tag{
  background-color: lightyellow;
  color: #C18D17;
  width: 100px;
  border-radius: 4px;
  font-size: 12px;
  align-items: center;
  text-align: center;
}

.review-assignment-btn:hover{
  cursor: pointer;
}

.notification-red-badge{
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #F43151;
  border: #F43151;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fa{
  cursor: pointer;
}
.download-assignment-btn{
  width: fit-content;
}

.scrollable-tab-btn-right {
  height: 30px;
  z-index: 200;
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
  width: 30px;
  right: 0;
  border: 1px solid transparent;
}

.scrollable-tab-btn-left {
  height: 30px;
  z-index: 200;
  background-color: var(--blue);
  color: var(--white);
  border-radius: 50%;
  width: 30px;
  left: 0;
  border: 1px solid transparent;
}

.card-sub-heading{
  color: var(--black);
  font-weight: 600;
  font-size: 14px;
}

.skill-software-list-section > li{
  border: none;
  color: var(--black);
  font-weight: 600;
}
#skillsSettingsAccordian{
  width: 100%;
}
.skill-accordian-heading{
  cursor: pointer;
}
.skills-list-item{
  color: var(--dark-gray);
}
.dropdown-toggle::after {
  display: none !important;
}
button.note-btn.btn.btn-light.btn-sm.dropdown-toggle:after {
  content: "";
  display: block !important;
}
.dropdown-caret-icon{
  color: var(--black) !important;
  right: 3px;
  border-width: 6px 6px 0 6px;
  margin-right: 0 !important;
  font-weight: bolder !important;
}
td > a{
  color: #6c757d !important;
}

.accordion-toggle .fa {
  transition: transform 0.3s ease;
}

.accordion-toggle .fa.rotate-up {
  transform: rotate(180deg);
}

.blue-card{
  background-color: var(--blue);
}
.red-card{
  background-color: var(--red);
}
.green-card{
  background-color: #66E19F;
}
.yellow-card{
  background-color: var(--yellow);
}
.yellow-tag{
  background-color: rgba(249, 197, 70, 0.15);
  color: var(--yellow);
  width: 100px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-weight: 600;
}
.pink-tag{
  background-color: rgba(244, 49, 81, 0.15);
  color: rgba(244, 49, 81, 1);
  width: 100px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-weight: 600;
}
.green-tag{
  background-color: rgba(21, 160, 80, 0.15);
  color: var(--green);
  width: 100px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-weight: 600;
}
.blue-tag{
  background-color: rgba(56, 70, 246, 0.15);
  color: var(--blue);
  width: 100px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-weight: 600;
}
.my-course-heading{
  word-wrap: break-word;
}
.dashboard-course-card{
  width: 260px;
  margin-right: 8px;
  margin-left: 8px;
}
.progress-container {
  font-family: Arial, sans-serif;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.progress-bar {
  background-color: #e5e7eb; /* light gray */
  border-radius: 10px;
  height: 10px;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.progress {
  background-color: #66E19F; /* green */
  border-radius: 10px;
  height: 100%;
}
.image-icon{
  width: 34px;
  height: 34px;
  border-radius: 100%;
}
.sm-image-icon{
  width: 22px;
  height: 22px;
  border-radius: 100%;
}
.ongoing-section, .upcoming-section {
  width: 48%;
  padding: 4px;
}

.ongoing-section-item, .upcoming-section-item {
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 8px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}
.card-mid-line{
  height: 8px !important;
  color: #000 !important;
  border: none;
}
/* Custom File End */

/* Override datepicker styles */
.datepicker table tr td .active.disabled:hover[disabled],
.datepicker table tr td .active.disabled[disabled],
.datepicker table tr td .active:active,
.datepicker table tr td .active:hover,
.datepicker table tr td .active:hover.active,
.datepicker table tr td .active:hover.disabled,
.datepicker table tr td .active:hover:active,
.datepicker table tr td .active:hover:hover,
.datepicker table tr td .active:hover[disabled],
.datepicker table tr td .active[disabled],
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled],
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
  background-color: var(--blue) !important;
}
/* Override datepicker styles END */

.card {
  border: none;
  border-radius: 12px;
}

.course-page-heading{
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
}

.course-image-container{
  height: 100px;
  width: 100px;
}
.text-truncate {
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* Adjust for font size */
  max-height: 3em; /* line-height * 3 lines */
  word-wrap: break-word; /* Break long words if needed */
  text-wrap: auto;
}
.small-text{
  font-size: 12px;
}
.blue-border{
  border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 3px 7.5px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.btn.btn.blue-border.active {
  background: #e3f2fd;
}
.red-border {
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 3px 7.5px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.red-border.active {
  background: #f7d6e6;
}

/* course-overview page css */

.course-overview-page-image{
  width: 100%;
  height: 360px;
  border-radius: 12px;
object-fit: cover;
}
.card-video-icon i {
  color: #fff;
  font-size: 20px;
  padding: 16px 20px;
}
.card-video-icon {
  background-color: rgba(0, 0, 0, 0.355);
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  left: 43%;
  cursor: pointer;
}

.courses-card-image {
  position: relative;
  overflow: hidden;
  transition: .5s;
}

.gray-sidebox{
  background-color: var(--backgroud-gray);
  height: fit-content;
  width: fit-content;
  border-radius: 12px;
}
.blue-button{
  background-color: var(--blue);
  color: var(--white);
  border-radius: 12px;
  border: solid 1px var(--blue);
  padding: 20px;
  width: 85%;
}
.pink-button{
  background-color: #EF84C2;
  color: var(--white);
  border-radius: 12px;
  border: solid 1px #EF84C2;
  padding: 20px;
  width: 85%;
}
.module-group{
  border-bottom: 1px solid var(--black);
}
.clickable{
  cursor: pointer;
}
.blue-button:hover{
  color: var(--white);
  background-color: #2d37cf;
}
.pink-button:hover{
  color: var(--white);
  background-color: #ec6eb8;
}
.yellow-button{
  background-color: var(--yellow);
  color: var(--black);
}
.number {
  position: absolute;
  top: 14px;
  right: 2px;
  background-color: #ec5252;
  border-radius: 15px;
  color: #fff;
  font-size: 10px;
  line-height: 1.43;
  min-width: 19px;
  padding: 2px 6px;
  text-align: center;
  pointer-events: none;
}
/* course-overview page css END*/
.mts-100{
  margin-top: 100px;
}
.share-btn {
  border: 1px solid #ff1744;
  border-radius: 8px;
  height: 100%;
  padding: 3px 7.5px;
  font-size: 24px;
  color: #ff1744;
}
.share-btn:hover {

  color: #ff1744;
  background: #ff8a8030;
}
.invoice-table tr {
  background: transparent !important;
}

.my_wishlists_card .slide-item {
  width: 25%;
}

.my-courses-area .my_wishlists_card .course-box-wrap {
  padding: 0px 5px;
}
.whislist-top {
  margin-top: 100px;
}
.buy-btn-icon{display: none !important;}
.des-mobile{display: block;}
.min-auto {
  min-height: auto;
}
.search-container {
  position: relative;
 
}

.search-container input {
  width: 100%;
  padding: 10px 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

.search-container::before {
  content: ''; 
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img//search.png") no-repeat center left;
  width:24px;
  height:24px;
}

.search-container input::placeholder {
  color: #aaa;
  font-size: 14px;
}
.tag-container-search {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-container-search li {
  background: #F2F4F7;
  padding: 2.614px 7.842px 2.614px 10.456px;
  border-radius: 20px;
  display: flex;
  align-items: center;
}
.tag-container-search li span{
  font-size: 12px;
  color:#344054;
}
.tag-container-search li i {
  margin-left: 8px;
  cursor: pointer;
}
.toggle-btn-search {
  cursor: pointer;
  color: #344054;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.tab-menu {
  margin: 0px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px; /* 144.517% */
  letter-spacing: 0.126px;
}

.tab-menu li:hover {
  border-radius: 12px;
  background: #3846F6;
  color: #fff;
}

.tab-menu li.active {
  border-radius: 12px;
  background: #3846F6;
  color: #fff;
}

.tab-menu li i {
  color: #3846F6;
}
.tab-menu li:hover i, .tab-menu li.active i {
  color: #fff;
}
.acd-filter h5 {
  color: #222;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px; /* 144.517% */
  letter-spacing: 0.126px;
}
.irs--round .irs-bar {
  background-color: #1570EF;
  height: 8px;
}
.irs--round .irs-line {
  height: 8px;
 
}
.irs--round .irs-handle {
  background-color: #fff;
  border: 2px solid #1570EF;
  box-shadow: none;
}
.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
  background-color: #fff;
}
.irs--round .irs-handle {
  width: 24px;
  height: 24px;
  top: 28px;
}
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
  background-color: transparent;
  top:70px;
  color: #667085;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 500;
}
.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before,
.irs--round .irs-min,
.irs--round .irs-max {
  display: none;                              
}
.range-slider-card h6 {
  color: var(--Gray-700, #344054);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.dropdown-catlist {
  position: relative;
}

.droplist {
  border: 0px;
  border-radius: 20px;
  background: #F2F4F7;
  width: 70px;
  padding: 3px 12px;
  text-align: left;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--Gray-700, #344054);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.526px;
}

.dropdown-menu-seleted {
  list-style: none;
  margin: 5px 0 0px;
  padding: 5px 0px;
  background: #F2F4F7;
  display: inline-block;
  min-width: 75px;
  position: absolute;
  top: 100%;
  left: 0;
  border-radius: 20px;
  color: var(--Gray-700, #344054);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.526px; /* 196.053% */
  z-index: 10;
}

.dropdown-menu-seleted li {
  padding: 5px 14px;
  cursor: pointer;
}
.list-form-control{
  height: 45px !important;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}
.course-card label {
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px;
  letter-spacing: 0.126px;
}

.assinment-btn-drop button {
  border-radius: 20px;
  border: 0px;
  background: #F2F4F7;
  width: 120px !important;
}

.dropdown.assinment-btn-drop {
  min-width: auto;
}

.mts-10 {
  margin-top: 10px;
}
.assinment-btn-drop button {
  border-radius: 20px;
  border: 0px;
  background: #F2F4F7;
  width: 130px !important;
  padding: 2.614px 7.842px 2.614px 10.456px;
}
.assinment-btn-drop .dropdown-menu {
  padding: 0px;
  border-radius: 20px;
  border: 0px;
  background: #F2F4F7;
}

.assinment-btn-drop .dropdown-menu li {
  padding: 2.614px 7.842px 2.614px 10.456px;
  color: var(--Gray-700, #344054);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 23.526px; 
}

.assinment-btn-drop .dropdown-menu li:hover {
  background: transparent;
}
.arrow-btn {
  border: 0px;
  padding: 0px;
  background: transparent;
}

.delete-btn-assignment {
  padding: 0;
  border: 0;
  background: transparent;
}
.assinment-table {
  margin-top: 10px;
}

.assinment-table table tr td {
  padding: 8px;
  text-align: center;
  border-bottom:1px solid #EAECF0;
}

.assinment-table .select2-container--default .select2-selection--single {
  height: auto !important;
  background: #F2F4F7;
  border: 0px;
}

.assinment-table .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0px !important;
}

.questions-dropdown {
  position: absolute;
  top: 100%;
  border-radius: 20.912px;
  background: #F2F4F7;
  padding: 16px;
  min-width: 430px;
  margin-top: 15px;
  display: none;
  z-index: 11;
}

.assinment-btn-drop {
  position: relative;
}

.questions-dropdown button {
  width: auto !important;
}
.questions-dropdown.show {
  display: block;
}
.student-table h4 {
  margin: 0px;
  padding: 0;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px; /* 144.517% */
  letter-spacing: 0.126px;
}
.gdr {
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px; /* 144.517% */
  letter-spacing: 0.126px;
}
.checkobox-tick{
  width:20px;
  height:20px;
}
.user-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
}
.message_tabs {
  margin: 0px;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.message_tabs li {
  cursor: pointer;
  color: #222;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20.232px;
  letter-spacing: 0.126px;
}

.message_tabs li.active {
  border-radius: 5px;
  background: #3846F6;
  color: #fff;
  padding: 10px;
}
.datepiker-darkcolor{color:#667085 !important}
.groupTabsButton{
  color:#344054 !important;
}
.user-box.userprofile-card {
  width: 40px;
  height: 40px;
}

.user-box.userprofile-card img {
  border-radius: 8px;
}
.menu-icon-box {
  position: relative;
}
.menu-icon-box .icon {
  position: relative;
}
.menu-icon-box .icon .number {
  position: absolute;
    top: -12px;
    right: -6px;
    background-color: #ec5252;
    border-radius: 15px;
    color: #fff;
    font-size: 10px;
    line-height: 1.43;
    min-width: 20px;
    padding: 2px 6px;
    text-align: center;
    pointer-events: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-icon-box .icon a {
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  color: #686f7a;
  border: 1px solid transparent;
  font-size: 18px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 9px 9px 4px 0px rgba(0, 0, 0, 0),
    6px 6px 3px 0px rgba(0, 0, 0, 0.01), 3px 3px 3px 0px rgba(0, 0, 0, 0.05),
    1px 1px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.gap-15{
  gap:15px
}
.report-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.report-tabs li {
  color: var(--Gray-500, #667085);
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  padding: 0px 4px 18px 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.report-tabs li.active {
  border-bottom: 2px solid var(--Primary-700, #175CD3);
  color: var(--Primary-700, #175CD3);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; 
  
}
.tag-container-search.reports-tags li {
  background: #eaecf0;
}
.tab-contentReport > .tab-paneReport {
  display: none;
}
.tab-contentReport > .tab-paneReport.active {
  display: block;
}

@media only screen and (max-width: 992px) {
  .des-mobile{display: none;}
.buy-btn-icon{display: inline-block !important;}
  .my_wishlists_card .slide-item {
    width: 100%;
  }
  .whislist-top {
    margin-top: 70px;
}
}

.already_purchased a {
  width: 100%;
  border: 0;
  color: #222;
  background-color: #f9c546;
  padding: 20px;
  font-size: 15px;
  line-height: 1.43;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 0px;
  display: block;
  text-align: center;
}
.already_purchased a:hover,
.already_purchased a:focus {
  background-color: #f9c546;
}
.text-overlimit p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  word-break: break-all;
}
ul#instructor-dropdown {
  height: 300px;
  overflow: auto;
  width: 320px !important;
}
.description-content {
  white-space: normal;
  word-break: break-all;
}
.ct-tabs-content {
  white-space: normal;
  word-break: break-all;
}