/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/*
* Brand primary color
******************************************************************************/

:root {
  --bs-primary: #0e3731;
  --bs-primary-rgb: 14, 55, 49;
  --bs-body-bg: #f4fbf8;
  --bs-success: #0e3731;
  --bs-success-rgb: 14, 55, 49;
  --bs-info: #175b51;
  --bs-info-rgb: 23, 91, 81;
  --bs-warning: #5b6b70;
  --bs-warning-rgb: 91, 107, 112;
  --bs-secondary: #66776f;
  --bs-secondary-rgb: 102, 119, 111;
  --bs-danger: #9f3a3a;
  --bs-danger-rgb: 159, 58, 58;
  --bs-link-color: #0e3731;
  --bs-link-hover-color: #0a2a25;
}

body {
  background:
    linear-gradient(135deg, rgba(23, 91, 81, 0.055) 0%, rgba(244, 251, 248, 0) 38%),
    linear-gradient(315deg, rgba(14, 55, 49, 0.045) 0%, rgba(244, 251, 248, 0) 42%),
    #f4fbf8 !important;
}

.layout-page,
.content-wrapper {
  background: transparent !important;
}

.text-primary {
  color: #0e3731 !important;
}

.bg-primary,
.navbar.bg-primary,
.footer.bg-primary,
.menu.bg-primary {
  background-color: #0e3731 !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
.bg-label-hover-primary:hover {
  background-color: #0a2a25 !important;
}

.border-primary,
.btn-outline-primary,
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  border-color: #0e3731 !important;
}

.btn-primary {
  background-color: #0e3731 !important;
  border-color: #0e3731 !important;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(14, 55, 49, 0.35) !important;
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:hover,
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-label-primary:hover,
.btn-label-primary:focus,
.btn-label-primary.focus {
  background-color: #0a2a25 !important;
  border-color: #0a2a25 !important;
  color: #fff !important;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show.dropdown-toggle,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-label-primary:active,
.btn-label-primary.active,
.btn-label-primary.show.dropdown-toggle,
.show > .btn-label-primary.dropdown-toggle {
  background-color: #061f1b !important;
  border-color: #061f1b !important;
  color: #fff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #0e3731 !important;
  border-color: #0e3731 !important;
}

.btn-outline-primary,
.btn-label-primary,
.btn-label-primary.disabled,
.btn-label-primary:disabled,
.link-primary,
.alert-primary,
.alert-primary .alert-link,
.accordion.accordion-header-primary .accordion-item.active .accordion-button {
  color: #0e3731 !important;
}

.btn-label-primary,
.bg-label-primary,
.bg-label-hover-primary,
.alert-primary {
  background-color: #e7efed !important;
}

.border-label-primary {
  border-color: #b7cbc7 !important;
}

.border-light-primary {
  border-color: rgba(14, 55, 49, 0.08) !important;
}

.bg-gradient-primary {
  background-image: linear-gradient(45deg, #0e3731, #1d5a51) !important;
}

.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus,
.progress-bar,
.modal-onboarding .carousel-indicators [data-bs-target],
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.list-group.list-group-timeline .list-group-timeline-primary:before,
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
  background-color: #0e3731 !important;
}

.progress-bar,
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus {
  box-shadow: 0 0.125rem 0.25rem rgba(14, 55, 49, 0.35) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link {
  background: linear-gradient(72.47deg, #1d6b60 22.16%, rgba(36, 124, 112, 0.88) 76.47%) !important;
  box-shadow: 0 2px 6px rgba(23, 91, 81, 0.35) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-inner > .menu-item.active:before,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: #247c70 !important;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle),
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):hover,
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):focus {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 400;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  width: .5rem !important;
  height: .5rem !important;
  box-sizing: content-box;
  left: 1.375rem !important;
  background-color: #38a878 !important;
  border: .25rem solid rgba(223, 243, 234, 0.42) !important;
  box-shadow: 0 0 0 1px rgba(23, 91, 81, 0.06);
}

[dir='rtl'] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  right: 1.375rem !important;
  left: inherit !important;
}

.form-control:focus,
.form-select:focus,
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: #0e3731 !important;
  box-shadow: 0 0.125rem 0.25rem rgba(14, 55, 49, 0.12) !important;
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: #0e3731 !important;
  border-color: #0e3731 !important;
}

.form-check-input:focus {
  border-color: #0e3731 !important;
  box-shadow: 0 0.125rem 0.25rem rgba(14, 55, 49, 0.12) !important;
}

/*
* Brand palette refinements
******************************************************************************/

.bg-menu-theme {
  background-color: #175b51 !important;
}

#layout-menu.bg-menu-theme,
.layout-menu-horizontal.bg-menu-theme {
  background-color: #175b51 !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: rgba(255, 255, 255, 0.78) !important;
}

.bg-menu-theme .menu-link:hover,
.bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link {
  background: linear-gradient(72.47deg, #1d6b60 22.16%, #247c70 76.47%) !important;
  box-shadow: 0 2px 6px rgba(23, 91, 81, 0.35) !important;
  color: #fff !important;
}

.bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(#175b51 41%, rgba(23, 91, 81, 0.12) 95%, rgba(23, 91, 81, 0)) !important;
}

.text-success,
.link-success {
  color: #0e3731 !important;
}

.text-info,
.text-warning,
.text-secondary,
.link-info,
.link-warning,
.link-secondary {
  color: #175b51 !important;
}

.text-danger,
.link-danger {
  color: #9f3a3a !important;
}

.bg-success,
.btn-success,
.alert-success hr,
.progress-bar.bg-success {
  background-color: #0e3731 !important;
}

.bg-info,
.bg-warning,
.bg-secondary,
.btn-info,
.btn-warning,
.btn-secondary,
.alert-info hr,
.alert-warning hr {
  background-color: #175b51 !important;
}

.bg-danger,
.btn-danger,
.alert-danger hr {
  background-color: #9f3a3a !important;
}

.btn-success,
.btn-info,
.btn-warning,
.btn-secondary,
.btn-danger {
  color: #fff !important;
}

.btn-success,
.border-success {
  border-color: #0e3731 !important;
}

.btn-info,
.btn-warning,
.btn-secondary,
.border-info,
.border-warning,
.border-secondary {
  border-color: #175b51 !important;
}

.btn-danger,
.border-danger {
  border-color: #9f3a3a !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #0a2a25 !important;
  border-color: #0a2a25 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #0a2a25 !important;
  border-color: #0a2a25 !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #0a2a25 !important;
  border-color: #0a2a25 !important;
}

.bg-label-success,
.btn-label-success,
.alert-success {
  background-color: #e7efed !important;
  color: #0e3731 !important;
}

.bg-label-info,
.bg-label-warning,
.bg-label-secondary,
.btn-label-info,
.btn-label-warning,
.btn-label-secondary,
.alert-info,
.alert-warning {
  background-color: #e7efed !important;
  color: #175b51 !important;
}

.bg-label-danger,
.btn-label-danger,
.alert-danger {
  background-color: #f8e7e7 !important;
  color: #9f3a3a !important;
}

.btn-label-success:hover,
.btn-label-success:focus,
.btn-label-success:active {
  background-color: #0e3731 !important;
  color: #fff !important;
}

.btn-label-info:hover,
.btn-label-info:focus,
.btn-label-info:active,
.btn-label-warning:hover,
.btn-label-warning:focus,
.btn-label-warning:active,
.btn-label-secondary:hover,
.btn-label-secondary:focus,
.btn-label-secondary:active,
.btn-label-danger:hover,
.btn-label-danger:focus,
.btn-label-danger:active {
  background-color: #0a2a25 !important;
  color: #fff !important;
}

.border-label-success {
  border-color: #b7cbc7 !important;
}

.border-label-info,
.border-label-warning,
.border-label-secondary,
.border-label-danger {
  border-color: #c8d8d5 !important;
}

.course-meta-item {
  background: linear-gradient(135deg, rgba(14, 55, 49, 0.05), rgba(14, 55, 49, 0.02)), #f7fbfa !important;
  border-color: #d7e5e2 !important;
}

.course-meta-label,
.text-muted,
.fw-light {
  color: #66776f !important;
}

.course-card,
.policy-card,
.portal-card,
.policy-search,
.policy-hero,
.portals-hero {
  border-color: #d7e5e2 !important;
}

.policy-hero,
.portals-hero {
  background: linear-gradient(135deg, rgba(14, 55, 49, 0.08), rgba(14, 55, 49, 0.03)), #fbfdfc !important;
}