:root {
  --bs-body-font-family: "Mulish";
  --bs-body-font-size: 1.125rem;
  --bs-body-color: #535353;
  --bs-primary: #26a2d6;
  --bs-primary-rgb: 38, 162, 214;
  --bs-light-rgb: 245, 245, 245;
}

.text--dark {
  color: #174674;
}

html {
  scroll-behavior: smooth;
}

.error-box {
  margin-top: 10px;
  margin-bottom: 10px;
}
.error-box .error {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #ed4c78;
}

.custom-bg-light {
  background-color: #f3f7fe;
}

.select2.select2-container {
  width: 100% !important;
}

.select2-selection.select2-selection--single.custom-select {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: calc(1.5em + 1.625rem);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.6;
  color: #1e2022;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%2371869d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E") no-repeat right 0.5rem center/1rem 1rem;
  border: 0.0625rem solid #e7eaf3;
  border-radius: 0.3125rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.select2-selection.select2-selection--single.custom-select .select2-selection__arrow {
  display: none;
}
.select2-selection.select2-selection--single.custom-select .select2-selection__rendered {
  padding-left: 0;
}

.navbar-light .navbar-nav .nav-link {
  font-size: 1.2rem;
}

.btn {
  font-size: 1.1rem;
}

.btn-sm {
  font-size: 0.875rem;
}

.navbar-brand-logo {
  min-width: 7rem;
  max-width: 7rem;
}

.nav-item {
  position: relative;
}

.dropdown-item {
  font-size: 1rem;
}

.dropdown-toggle::after {
  background-position: center center;
}

@media (min-width: 992px) {
  .navbar-expand-lg .nav-item:not(:last-child) {
    margin-right: 1rem;
  }
}
.video-player-btn i {
  font-size: 1.5rem;
}

.gradient-y-gray {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(237, 249, 255));
}

h2 {
  font-size: 2.2rem;
}

#header.community-header {
  transition: all 0.3s ease;
}

.hero-top-margin {
  margin-top: 4.75rem;
}

.dropdown-menu.right {
  left: auto;
  right: 0;
}

a:hover {
  color: #26a2d6;
}

.list-checked-lg .list-checked-item::before {
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
  margin-top: 0;
  font-family: "bootstrap-icons";
  content: "\f272";
  background-color: #174674;
  border-radius: 50%;
  color: white;
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-button:not(.collapsed) {
  color: #26a2d6;
}

.gradient-x-overlay-sm-primary::before {
  background-image: linear-gradient(180deg, rgb(255, 255, 255) 10%, rgba(79, 160, 195, 0.05));
}

.gradient-y-sm-primary {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 68%, rgba(79, 160, 195, 0.075));
}

.play-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mute-unmute {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.header--website {
  border-top: 4px solid #26a2d6;
  background-color: #fff;
  border-bottom: 1px solid #ebebeb;
  position: fixed;
}

.form-label.required::after {
  content: " *";
  color: #ff0000;
}

.alert {
  padding: 5px 20px;
  margin-bottom: 0;
  width: 100%;
  z-index: 1;
}
.alert::not(:last-child) {
  margin-bottom: 3px;
}
.alert .alert__content {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.alert .alert__msg {
  color: inherit;
  margin-right: 15px;
  text-align: center;
  flex-grow: 1;
}
.alert .alert__close {
  color: inherit;
  cursor: pointer;
}
.alert--primary {
  color: #fff;
  background-color: #377dff;
  border-color: #377dff;
  font-weight: bold;
}
.alert--secondary {
  color: #fff;
  background-color: #71869d;
  border-color: #71869d;
  font-weight: bold;
}
.alert--info {
  color: #fff;
  background-color: #09a5be;
  border-color: #09a5be;
  font-weight: bold;
}
.alert--warning {
  color: #856404;
  background-color: #ffe2c1;
  border-color: #ffe2c1;
  font-weight: bold;
}
.alert--success {
  background-color: rgb(217, 247, 242);
  color: #00947e;
  font-weight: bold;
}
.alert--primary-soft {
  color: #377dff;
  background-color: rgb(225, 236, 255);
  font-weight: bold;
}
.alert--secondary-soft {
  color: #71869d;
  background-color: rgb(234, 237, 240);
  font-weight: bold;
}
.alert--info-soft {
  color: #fff;
  background-color: #09a5be;
  border-color: #09a5be;
  font-weight: bold;
}
.alert--warning-soft {
  color: #f5ca99;
  background-color: rgb(254, 247, 240);
  font-weight: bold;
}
.alert--error {
  color: #ed4c78;
  background-color: rgb(252, 228, 235);
  font-weight: bold;
}
.alert--success-soft {
  background-color: rgb(217, 247, 242);
  color: #00947e;
  font-weight: bold;
}

.user-profile__wrap {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.user-profile__wrap img {
  display: block;
  width: 100%;
}

.account-menu__avatar {
  width: 45px;
  height: 45px;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.account-menu__avatar img {
  display: block;
  width: 100%;
}

.text-color-grey {
  color: #677788;
}

.object-404__content {
  padding-top: 55px;
  min-height: calc(100vh - 150px);
}

.course-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  font-size: 16px;
  background-color: #f5f5f5;
  max-width: 100%;
  display: flex;
  z-index: 30;
  border: 0px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
}
.course-navbar .dropdown-toggle::after {
  content: none;
}
.course-navbar .navbar__brand {
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 22px;
  border-right: 1px solid #dfe5eb;
}
.course-navbar .navbar__logo-link img {
  width: 80px;
}
.course-navbar .navbar__menu {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
}
.course-navbar .navbar__menu-start {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
}
.course-navbar .navbar__option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 100%;
}
.course-navbar .navbar__option.border-left {
  border-left: 1px solid #dfe5eb;
}
.course-navbar .navbar__option a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.course-navbar .navbar__option a:hover {
  color: #26a2d6;
}
.course-navbar .navbar__option .navbar__option--btn {
  background-color: #fff;
  color: #26a2d6;
  padding: 8px 16px;
  border-radius: 5px;
  border: 1px solid #26a2d6;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.course-navbar .navbar__option .navbar__option--btn:hover {
  background-color: #26a2d6;
  color: white;
}
.course-navbar .active {
  color: #26a2d6;
  font-weight: 500;
}
.course-navbar .navbar__menu-end {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  align-items: center;
}
.course-navbar .navbar__menu-end .navbar__option {
  padding: 0 10px;
}
.course-navbar .navbar__menu-item {
  display: flex;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 8px 0px;
  line-height: 1.5;
  cursor: pointer;
}
.course-navbar .profile-img {
  width: 35px;
}
.course-navbar .account-menu {
  display: none;
  max-width: 272px;
  padding: 8px;
  width: 100%;
  background-color: white;
  border-radius: 5px;
  position: absolute;
  top: 56px;
  right: 10px;
  box-shadow: 0 7.5px 10px rgba(189, 197, 209, 0.3);
  border-top: 3px solid #26a2d6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.course-navbar .account-menu .account-menu__header {
  display: flex;
  align-items: center;
  padding: 8px 8px 14px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #dadada;
}
.course-navbar .account-menu .account-menu__avatar {
  width: 45px;
  height: 45px;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.course-navbar .account-menu .account-menu__avatar .user-avatar {
  display: block;
  width: 100%;
}
.course-navbar .account-menu .account-menu__name {
  font-size: 16px;
  font-weight: 600;
}
.course-navbar .account-menu .account-menu__info {
  width: calc(100% - 50px);
}
.course-navbar .account-menu .account-menu__email {
  color: #51626e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-navbar .account-menu .account-menu__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.course-navbar .account-menu .account-menu__item {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 8px 16px;
  font-size: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #1e2022;
  border-radius: 5px;
  cursor: pointer;
  /* transition: all 0.3s ease; */
}
.course-navbar .account-menu .account-menu__item:hover {
  background-color: rgba(189, 197, 209, 0.2);
}
.course-navbar .account-menu .account-menu__footer {
  padding-top: 8px;
  margin-top: 5px;
  border-bottom: 0;
  border-top: 1px solid #dadada;
}
.course-navbar .account-menu .menu-divider {
  border-top: 1px solid black;
  width: 100%;
  margin: 10px 0px;
  opacity: 0.15;
}
.course-navbar .account-menu .logout {
  margin-bottom: 0px;
}
.course-navbar .account-menu.show-account-menu {
  display: block;
}
.course-navbar .menu-item {
  display: flex;
  text-decoration: none;
  color: #444;
  padding: 13px 30px 13px 24px;
  cursor: pointer;
  position: relative;
  margin-bottom: 1px;
  align-items: center;
}
.course-navbar .menu-item:hover {
  background-color: #f6f6f6;
}
.course-navbar .menu-item span {
  display: flex;
  font-size: 17px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}
.course-navbar .menu-item span img {
  margin-right: 10px;
  display: block;
  width: 18px;
}
.course-navbar .dropdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
}
.course-navbar .dropdown-toggle__icon {
  margin-left: 5px;
  font-size: 11px;
}
.course-navbar .dropdown-menu {
  display: none;
  min-width: 160px;
  position: relative;
  top: 0px;
  left: 0;
  margin: 0;
  padding: 5px;
  font-size: 10px;
  color: #677788;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 0 solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 7.5px 10px rgba(189, 197, 209, 0.3);
  border-top: 2.5px solid #26a2d6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 1000;
}
.course-navbar .dropdown-menu .dropdown-item {
  display: block;
  width: 100%;
  margin-bottom: 2.5px;
  padding: 8px 16px;
  border: 0;
  border-radius: 3.125px;
  background-color: transparent;
  color: #1e2022;
  font-size: 16px;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
}
.course-navbar .dropdown-menu .dropdown-item.active {
  color: #26a2d6;
}
.course-navbar .navbar__option-dropdown {
  cursor: pointer;
}
.course-navbar .navbar__option-dropdown.dropdown--active .dropdown-toggle {
  color: #26a2d6;
}
.course-navbar .navbar__option-dropdown.dropdown--active .dropdown-menu {
  display: block;
}
.course-navbar .navbar__option-dropdown.dropdown--active .dropdown-toggle__icon {
  transform: rotate(-180deg);
}
@media (min-width: 992px) {
  .course-navbar.navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .course-navbar.navbar-expand-lg .dropdown-menu {
    position: absolute;
    top: 100%;
  }
}
.course-navbar .user-profile__wrap {
  width: 35px;
  height: 35px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.course-navbar .user-profile__collapse-icon {
  margin-left: 3px;
  font-size: 11px;
}
.course-navbar .user-profile__collapse-icon.active {
  transform: rotate(-180deg);
}
.course-navbar .user-profile__img {
  display: block;
  width: 100%;
}