:root {
  /* gray color  */
  --white: #ffffff;
  --background-white: #fff;
  --body-bg: #eff6ff;
  --black: #000000;
  --btn-gradient: linear-gradient(90deg,
      var(--brand-500) 0%,
      var(--brand-blue-500) 100%);
  --body-gradient: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  --bg-1: #f8fafc;
  --scroll-bg: #7a7a7a;

  /* Primary color  */
    --Primary-25:  #F2FBFC;
    --Primary-50:  #E6F7F8;
    --Primary-100: #CDEEEF;
    --Primary-200: #9EDDE0;
    --Primary-300: #6DCACE;
    --Primary-400: #3AB4BC;
    --Primary-500: #108896; /* Main Primary */
    --Primary-600: #0D7380;
    --Primary-700: #0A5B65;
    --Primary-800: #07444B;
    --Primary-900: #032D32;


  /* Secondary color  */
  --Secondary-25: #f3f6ff;
  --Secondary-50: #c5fcf2;
  --Secondary-100: #82f9e7;
  --Secondary-200: #69e2d0;
  --Secondary-300: #5bc7b7;
  --Secondary-400: #4ead9f;
  --Secondary-500: #429488;
  --Secondary-600: #2b685f;
  --Secondary-700: #1f4e47;
  --Secondary-800: #133631;
  --Secondary-900: #081f1c;

  /*Gray color*/
  --Gray-25: #fcfcfd;
  --Gray-50: #f0f1f4;
  --Gray-100: #e0e2e9;
  --Gray-200: #c4c9d6;
  --Gray-300: #a6aec1;
  --Gray-400: #8b96ae;
  --Gray-500: #7b879f;
  --Gray-600: #595e71;
  --Gray-700: #424655;
  --Gray-800: #2d303b;
  --Gray-900: #191b22;
  --Gray-950: #0f1116;

  /* Green color  */
  --Green-25: #e4ffef;
  --Green-50: #ecfdf3;
  --Green-100: #d1fadf;
  --Green-200: #a6f4c5;
  --Green-300: #6ce9a6;
  --Green-400: #32d583;
  --Green-500: #12b76a;
  --Green-600: #039855;
  --Green-700: #027a48;
  --Green-800: #05603a;
  --Green-900: #054f31;

  /* Yellow */
  --yellow-25: #fffbea;
  --yellow-50: #fff3c1;
  --yellow-100: #ffe574;
  --yellow-200: #ffd000;
  --yellow-300: #ffd000;
  --yellow-400: #ffb500;
  --yellow-500: #ff9400;
  --yellow-600: #f26900;
  --yellow-700: #ff5a00;
  --yellow-800: #a43400;
  --yellow-900: #852d00;
  --yellow-950: #4b1500;

  /* Brand Blue color  */
  --blue-25: #eff3fc;
  --blue-50: #e0e8fa;
  --blue-100: #ccd9f7;
  --blue-200: #b4c7f3;
  --blue-300: #91aeee;
  --blue-400: #7c9eea;
  --blue-500: #5b86e5;
  --blue-600: #537ad0;
  --blue-700: #415fa3;
  --blue-800: #324a7e;
  --blue-900: #203053;

  /* Error color  */
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #ff0025;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #020202;
  --error-900: #7a271a;

  /* Warning color  */
  --warning-25: #fffcf3;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;

  /* red color  */
  --red-25: #fffcf3;
  --red-50: #fff1f2;
  --red-100: #fef0c7;
  --red-200: #fedf89;
  --red-300: #ff9c9f;
  --red-400: #fdb022;
  --red-500: #f79009;
  --red-600: #fd0000;
  --red-700: #b54708;
  --red-800: #93370d;
  --red-900: #7a2e0e;

  /* Orange color  */
  --Orange-25: #fffcf3;
  --Orange-50: #fff7ec;
  --Orange-100: #fef0c7;
  --Orange-200: #ffd5a0;
  --Orange-300: #fec84b;
  --Orange-400: #fdb022;
  --Orange-500: #ff5a00;
  --Orange-600: #dc6803;
  --Orange-700: #b54708;
  --Orange-800: #93370d;
  --Orange-900: #7a2e0e;

  /* Purple color  */
  --purple-50: rgba(142, 81, 255, 0.1);
  --purple-100: #f3e8ff;
  border-radius: 10px;
  --purple-200: #e9d4ff;
  --purple-700: #8e51ff;

  /* category color */
  --brand-orange: #fda34b;
  --brand-blue: #59b3d0;
  --brand-red: #ea5c5a;
  --gray-border: #d9d9d9;
  --back-home-text: #636363;
  /* box-shadow  */
  --card-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.05);
  --box-shadow-hover:
    rgba(15, 66, 179, 0.16) 0px 1px 4px, rgb(15, 66, 179) 0px 0px 0px 2px;
  --box-shadow-arrow:
    0 5px 8px 0 rgba(16, 24, 40, 0.08), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --red: #f5365c;
  --rgba-15: rgba(0, 0, 0, 0.15);
  --font-family-inter: "Inter", sans-serif;
  --linear-gradient-blue: linear-gradient(90deg,
      var(--Primary-500, #156dff) 0%,
      var(--Primary-400, #638aff) 100%);
}

body.dark {
  --background-white: #1f1f2e;
  --Gray-900: #f2f4f7;
  --body-gradient: linear-gradient(135deg, #181827 0%, #170220 100%);
  --body-bg: #170220;
  --bg-1: #2b2b39;
  --Gray-25: #2b2b39;
  --Gray-50: #2b2b39;
  --Gray-100: #2b2b39;
  --brand-blue-25: #292e42;
  --brand-blue-200: #323a59;
  --Gray-200: #30303d;
  --Gray-300: #30303d;
  --Gray-400: #4a5770;
  --Gray-500: #747c8f;
  --Gray-600: #9fa6b6;
  --Gray-700: #acb5c4;
  --Gray-800: #9398a5;
  --brand-25: #0f172b;
  --error-25: #170220;
  --error-300: #170220;
  --error-400: #170220;
  --error-50: #170220;
}

body.light {
  --background-white: #ffffff;
}

.main-content-wrapper {
  padding: 0;
  padding-left: 276px;
  transition: 0.3s;
  background-color: var(--Gray-50);
}

.dashboard-main {
  padding: 0 0 24px 0px;
  margin-top: 16px;
  position: relative;
  z-index: 24;
}

.card-global-16 {
  padding: 16px;
  background: var(--background-white);
  border: 1px solid var(--Gray-100);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: var(--card-box-shadow);
}

.course-info.about header.course-profile .intro-inner-wrapper.card-global-16 {
  padding: 16px;
  background: var(--background-white);
  border: 1px solid var(--Gray-100);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: var(--card-box-shadow);
}

.user-name {
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
}

.user-name h1 {
  color: var(--white);
  font-size: 24px;

  font-weight: 700;
  line-height: 30px;
  margin: 0;
}

.header-wrapper {
  display: flex;
  align-items: center;
  background: var(--linear-gradient-blue);
  padding-top: 22px;
}

.header {
  position: relative;
}

.header .breadcrumb {
  z-index: 9997;
}

.header .breadcrumb li {
  color: var(--white);
}

.header .breadcrumb li a {
  color: var(--white);
}

.menuToggle {
  border-radius: 6px;
  border: 1px solid var(--Gray-200);
  box-shadow: var(--box-shadow);
  display: flex;
  width: 14px;
  height: 14px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  position: absolute;
  right: -12px;
  top: 50%;
  margin-top: -12px;
  background-color: var(--background-white);
  z-index: 10;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--white);
}

.header-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 21px;
  align-items: center;
}

.header-row .user-name {
  color: var(--white);
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-right .avtar-upload {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.5);
}

.object-fit-cover {
  object-fit: cover;
}

.header-right .custom-notification {
  position: relative;
}

.header-right .custom-notification .counter {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--white);
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-search-bar {
  display: flex;
  width: 280px;
  padding: 12px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--Primary-600);
  display: none;
}

.header-search-bar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.header-search-bar input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 12px;
}

/* Standard (Modern browsers) */
.header-search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  /* Fix for Firefox */
}

/* Chrome, Safari, Edge */
.header-search-bar input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Firefox 19+ */
.header-search-bar input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

/* Firefox 4 - 18 */
.header-search-bar input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

/* Internet Explorer 10-11 */
.header-search-bar input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.mobile-sidebar {
  padding: 8px 12px;
  background: var(--background-white);
  border: 1px solid var(--Gray-100);
  border-radius: 6px;
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -36px;
  display: none;
}

.mobile-sidebar svg {
  display: block;
}

@media (max-width: 991px) {
  .header-wrapper {
    padding-left: 70px;
    padding-top: 20px;
  }

  .header-row {
    padding-bottom: 60px;
  }

  .mobile-sidebar {
    display: block;
  }

  .menuToggle {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-wrapper {
    gap: 0;
    padding-left: 60px;
  }

  .header-wrapper {
    padding-top: 16px;
  }

  .header-row {
    justify-content: space-between;
  }

  .header-row .user-name {}

  .header-search-bar {
    display: none;
  }

  .header-row {
    padding-bottom: 52px;
  }

  .breadcrumb {
    display: none;
  }

  .mobile-sidebar {
    top: 16px;
    margin-top: 0;
  }
}

.container,
.header-wrapper .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 24px !important;
  margin: 0 auto !important;
}