@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background-color: #eeeeee;
}

a,
button.link {
  color: #307ef3;
  ;
  text-decoration: underline;
}

h1 {
  font-size: 1.4em;
}

h2 {
  font-size: 1.2em;
}

h3 {
  font-size: 1.1em;
}

/* Header  */

header {
  background-color: #262626;
  color: white;
  height: 75px;
}

.navbar-brand a.site-title,
.navbar-brand a.site-title:hover,
header .nav-link,
header .nav-link:hover,
header a,
header a:hover {
  color: white;
  font-size: 0.9em;
}

.navbar-brand a.site-title {
  font-size: 0.9em;
}

/* Main navbar */

#main-navbar {
  background-color: white;
  border-bottom: 1px solid #ececec;
}

#main-navbar .nav-item {
  font-weight: bold;
}

/* breadcrumbs */

.breadcrumb {
  padding: 11px 0 0 10px;
}

.breadcrumb .breadcrumb-item a {
  font-size: 0.75em;
  color: #6a6a6a;
}

.dropdown-menu {
  font-size: 1em;
  border-radius: 0;
}



main {
  /* background-color: #fafafa; */
  padding-bottom: 30px;
}

#block-systematic-content .form-login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* node edit */

.node-form {
  margin: unset;
  background-color: white;
  padding: 2px 22px;
}

.form-item,
.form-actions {
  margin-top: unset;
}

.form-item .description {
  color: #919191;
}

/* Tables  */

table {
  border: 1px solid #c8c8c8;
  font-size: 0.9em;
}

label {
  color: #373e4a;
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 0.9em;
}

.link.link-edit-summary,
#edit-body-0-format-help-about {
  font-size: 0.8em;
}

a.tabledrag-handle .handle {
  display: unset;
}

.table> :not(caption)>*>* {
  padding: 0.3rem 0.3rem;
  vertical-align: middle;
}

.table-striped>tbody>tr:nth-of-type(2n)>* {
  --bs-table-color-type: unset;
  --bs-table-bg-type: unset;
}

.table-striped>tbody>tr:nth-of-type(2n-1)>* {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

/* Apply the stripe to the first, third, fifth, etc. rows */
.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

/* Override Bootstrap’s default striping to ensure consistency */
.table-striped>tbody>tr.odd>* {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

/* Ensure even rows do not get the stripe */
.table-striped>tbody>tr.even>* {
  --bs-table-color-type: inherit;
  --bs-table-bg-type: inherit;
}

/* Forms */

.node-confirm-form {
  color: #cc3f44;
  padding-top: 30px;
}

.node-confirm-form input[type="submit"] {
  border: 1px solid #cc3f44;
  background-color: #cc3f44;
  color: white;
}

/* Buttons and badges */

a.button,
.form-submit {
  font-size: 0.9em;
  /* background-color: #0d6efd;
    border: #666;
    color: white; */
}

a.badge {
  text-decoration: none;
}

.btn-primary {
  color: white;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-success {
  color: white;
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.btn-success a {
  color: white;
}

.btn-warning {
  color: white;
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  border-radius: 0;
}

.btn-warning a {
  color: white;
}

.btn-danger {
  color: white;
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}

.btn-danger a {
  color: white;
}

.btn-info {
  color: white;
  background-color: var(--blue-main);
  border-color: var(--blue-main);
}

a.button.button-action {
  color: white;
  background-color: var(--blue-main);
  border-color: var(--blue-main);
}

.btn-info a {
  color: white;
}

.btn-default {
  color: white;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-default a {
  color: white;
}

.btn-dark {
  color: white;
  background-color: #2c323f;
  border-color: #2c323f;
}

.btn-dark a {
  color: white;
}

.btn-light {
  color: white;
  background-color: #2c323f;
  border-color: #2c323f;
}

.btn-light a {
  color: white;
}


/*
success green: #53A653
warning orange: #FFAA05
danger red: #842029
info blue: #01A1B9
dark: #2c323f

default blue: #0d6efd


*/

/* Alerts  */
.alert-success {
  color: #53A653;
  background-color: #D6EED4;
  border-color: #53A653;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-success a {
  color: #53A653;
}

.alert-warning {
  color: #FFAA05;
  background-color: #FFF0D2;
  border-color: #FFAA05;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-warning a {
  color: #FFAA05;
}

.alert-danger {
  color: #DC3545;
  background-color: #FEDDDB;
  border-color: #DC3545;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-danger a {
  color: #DC3545;
}

.alert-info {
  color: #01A1B9;
  background-color: #D5F5FE;
  border-color: #01A1B9;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-info a {
  color: #01A1B9;
}

.alert-default {
  color: #307EF3;
  background-color: #307EF333;
  border-color: #307EF3;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-default a {
  color: #307EF3;
}

.alert-dark {
  color: #2c323f;
  background-color: #EAEBF2;
  border-color: #2c323f;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-dark a {
  color: #2c323f;
}

.alert-light {
  color: #2c323f;
  background-color: #F9F9FB;
  border-color: #2c323f;
  border-radius: 0px;
  font-size: 0.9em;
}

.alert-light a {
  color: #2c323f;
}

/* Primary nav Tabs */

.tabs-primary {
  margin: 0;
}

.nav-tabs .nav-link {
  margin-right: 5px;
  background-color: #eee;
}

.nav-tabs a.nav-link {
  color: #333;
  border-radius: 0px;
}

/* Secondary tabs */

.tabs-wrapper.tabs-secondary {
  padding: 10px 10px 10px 10px;
  margin: none;
}

.tabs-wrapper.tabs-secondary .nav.nav-tabs {
  border: none;
}


.tabs-wrapper.tabs-secondary .nav-link.active.is-active {
  border: 1px solid #eee;
}

/* Vertical tabs */
.vertical-tabs__pane {
  border: none;
}

.vertical-tabs__menu-item {
  background-color: #f9f9f9;
}

/* regions */

.region.region-content {
  background-color: white;
  padding: 20px 30px;
}

.region.region-sidebar-first {
  margin-right: 10px;
}

.region.region-sidebar-second {
  margin-left: 10px;
}

.region.region-sidebar-first .block,
.region.region-sidebar-second .block {
  background-color: white;
  padding: 10px;
}

/* Blocks */

.block>h2 {
  font-size: 1.1em;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  margin-bottom: 11px;
  padding-bottom: 9px;

}

/* Default Content layout and Background*/
article,
.user-admin-settings,
#auto-username-settings,
#field-overview,
#entity-form-display-edit-form,
#entity-view-display-edit-form {
  background-color: white;
  padding: 14px;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  font-size: 1em;
}

#block-systematic-page-title {
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
  margin-bottom: 23px;
}

.path-frontpage #block-systematic-page-title {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: none;
  margin-top: -20px;
  margin-bottom: 0;
  padding-bottom: 23px;
}

.path-frontpage #block-systematic-page-title h1 {
  background-color: var(--tertiary-color);
  padding: 15px 27px;
  margin-bottom: auto;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 0 0 5px 5px;
}

.path-frontpage .py-5 {
  border-radius: 5px;
}

#block-systematic-help {
  padding: 10px 0px 0px 10px;
  font-size: 0.9em;
  color: #5b5b5b;
}

#field-display-overview {
  width: 100%;
}

.filter-guidelines-item {
  font-size: 0.75em;
  color: #919191;
}

/* Views */

.view {
  background-color: white;
}

.views-exposed-form>.form--inline {
  display: inline-flex;
  font-size: 0.9em;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.views-exposed-form>.form--inline .form-actions {
  padding: 21px;
}

.views-field-node-bulk-form {
  width: 10px;
}

.layout__region--content>.views-element-container {
  padding: 3px 20px 20px 20px;
}

.views-admin a {
  color: unset;
  text-decoration: none;
}

/* Node details */

/* details>.details-wrapper {
    border: none;
} */

/* .card,
.media-library-selection .media-library-item.media-library-item--grid,
.view-media-library .media-library-views-form .media-library-item--grid .views-field-rendered-entity {
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-color: none;
} */

/* Div heights */

.dh-25 {
  height: 25px
}

.dh-50 {
  height: 50px
}

.dh-65 {
  height: 65px
}

.dh-75 {
  height: 75px
}

.knowledge-level-badge {
  float: left;
  margin-right: 10px;
  white-space: nowrap;
}

/* Target the specific view's grid items */
/* .view-front-page-card-view .views-view-responsive-grid__item {
    background: rgb(175, 173, 173);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease-in-out;
  } */

/* Hover effect for cards */
.view-front-page-card-view .views-view-responsive-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


.marg-left-10 {
  margin-left: 10px !important;
}


.marg-left-20 {
  margin-left: 20px !important;
}

.marg-left-30 {
  margin-left: 30px !important;
}

.pad-right-0 {
  padding-right: 0 !important;
}

.pad-left-0 {
  padding-left: 0 !important;
}

table.field-ui-overview thead tr,
table.field-ui-overview tbody tr {
  border-bottom: 1px solid #ececec;
}

table.field-ui-overview thead th,
table.field-ui-overview tbody td {
  padding: 0.3rem 0.3rem;
}

table.field-ui-overview thead th {
  background-color: #f9f9f9;
}

.site-logo img, #block-systematic-account-menu img {
  max-height: 32px;
  margin-right: 10px;
}

#block-systematic-account-menu,
#block-systematic-currentuserandoginfo {
  padding-right: 40px;
}

.region.region-nav-secondary {
  display: contents;
  font-size: 1.2em;
}

.views-element-container .view-header a {
  margin-right: 20px;
}

.views-element-container  .view-content table th,
.field-group-multiple-table table thead th {
  background-color: #e9e8e8;
}

.field-group-multiple-table {
  overflow-x: auto;
  position: relative;
  max-width: 100%;
}

.field-group-multiple-table table thead th,
.field-group-multiple-table table tbody td {
  padding: 0.3rem 0.3rem;
}

.field-group-multiple-table table thead tr,
.field-group-multiple-table table tbody tr {
  border-bottom: 1px solid #ececec;
}

.form-textarea-wrapper textarea {
  min-width: 100px;
}

.media-library-item__edit.btn:hover,
.media-library-item__edit.button:hover,
.media-library-item__remove.btn:hover,
.media-library-item__remove.button:hover {
  color: transparent;
}

.export-course-block .item-list li {
  list-style: none;
  margin: 5px;
  display: inline-block;
}

.export-course-block .item-list li a {
  background-color: #f8f9fa;
  border: 1px dotted #9b8ad9;
  padding-left: 9px;
  padding-right: 9px;
}

.export-course-block .item-list li a:hover,
.export-course-block .item-list li a:focus {
  background-color: #e9e3ff;
}

.btn-primary:hover{
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.dropdown-item.active,
.media-library-view--widget
.view-header a.dropdown-item.is-active,
.dropdown-item:active {
  background-color: var(--secondary-color);
}

.nav-link:hover,
.media-library-view--widget .view-header a:hover,
.nav-link:focus,
.media-library-view--widget .view-header a:focus,
.nav-link:active,
.media-library-view--widget .view-header a:active {
  color: var(--secondary-color);
}

.node--type-knowledge-based-generated-course .block-layout-builder {
  padding-left: 15px;
}

.node--type-knowledge-based-generated-course .block-learning-path {
  margin-top: 25px;
}

.page-link {
  color: var(--primary-color);
}

.page-link:hover {
  color: var(--secondary-color);
}

.active > .page-link:hover {
  color: white;
}

.page-link.active,
.media-library-view--widget .view-header a.page-link.is-active,
.active > .page-link,
.media-library-view--widget .view-header a.is-active > .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.bg-dark {
  background-color: var(--background-dark) !important;
}