html {
  scroll-behavior: smooth;
}

#page {
  margin-top: -4.5rem;

  &.container-fluid {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.container {
  @include media-breakpoint-down(xs) {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.editor_atto_content {
  padding: 15px;

  &.form-control {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.page-top {
  padding: 1.5rem 0 6rem;
  background-color: $purity-page-top-bg-color;

  .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .container-fluid,
  .container {
    > .row {
      min-height: 43px;
      align-items: center;

      @include media-breakpoint-down(lg) {
        gap: 20px;
      }

      > div {
        &:last-child {
          text-align: right;

          @include media-breakpoint-down(lg) {
            text-align: left;
          }
        }
      }
    }
  }

  .breadcrumb {
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: $purity-page-top-text-color;
    border-radius: 0;
    font-weight: $font-weight-bold;
    border: none;

    .breadcrumb-item {
      font-size: $font-size-sm;
    }

    a,
    .breadcrumb-item + .breadcrumb-item::before {
      color: $purity-page-top-text-color;
    }

    a {
      &:hover {
        color: $purity-page-top-text-color;
        text-decoration: underline;
      }
    }
  }

  .page-top-buttons-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    > a:not(.btn) {
      margin: 0 10px;
      color: $purity-page-top-text-color;
      font-size: $btn-font-size-sm;
      font-weight: $font-weight-bold;

      &:hover {
        text-decoration: underline;
      }
    }

    .page-top-settings-menu .dropdown > a {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);

      &::after {
        display: none;
      }
    }

    .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
    }
  }

  .singlebutton {
    .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
    }
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .page-top {
    .page-top-buttons-wrapper {
      > * {
        margin-left: 10px;
      }
    }
  }
}

.page-top-settings-menu.frontpage {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 999;

  .dropdown-toggle {
    .icon {
      font-size: 1rem;
    }

    &::after {
      content: "Settings";
      font: inherit;
      font-size: 1rem;
      border: none;
      width: auto;
      vertical-align: baseline;
    }
  }

  .dropdown-menu {
    &.show {
      position: fixed !important;
      top: auto !important;
      left: auto !important;
      right: 15px !important;
      bottom: 75px !important;
      transform: none !important;
    }
  }
}

#page-header {
  display: none !important;

  .page-header-image {
    margin-bottom: 0;
  }

  .context-header-settings-menu {
    float: none;
    max-width: none;
    height: auto;
    margin-top: 0;

    .dropdown-toggle {
      &::after {
        display: none;
      }

      > .icon {
        height: auto;
        font-size: 18px;
      }
    }
  }
}

.pagelayout-mypublic {
  #page-header {
    display: block !important;
  }

  .page-top-settings-menu {
    display: none !important;
  }
}

#page-wrapper {
  display: block;
  height: auto;
}

[data-region="blocks-column"] {
  width: 345px;

  @include media-breakpoint-down(lg) {
    width: 100%;
  }
}

#region-main {
  border: none;
  padding: 0;
  background-color: transparent;
  margin: 0;
  overflow: visible;

  .page-context-header {
    margin-bottom: 25px;

    .page-header-image {
      margin-bottom: 0;
    }

    .page-header-headings {
      float: none;

      h2 {
        padding: 0;
        margin: 0 0 10px;
        border: none;
      }
    }
  }
}

.initialbar {
  margin-top: 15px;
}

#changenumsections {
  margin-top: 25px;
}

.footer {
	padding: 0;
	background: none;
}

.dropdown-menu {
  .dropdown-item {
    @include hover-focus() {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      @include gradient-bg($dropdown-link-hover-bg);
    }
  
    &.active,
    &:active {
      color: $dropdown-link-active-color;
      text-decoration: none;
      @include gradient-bg($dropdown-link-active-bg);
    }
  
    &.disabled,
    &:disabled {
      color: $dropdown-link-disabled-color;
      pointer-events: none;
      background-color: transparent;
      // Remove CSS gradients if they're enabled
      @if $enable-gradients {
        background-image: none;
      }
    }
    
    > i,
    > svg {
        vertical-align: 0;
    }
  }
}

.icon {
  font-size: inherit;
}

hr {
  border-color: $border-color;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

a {
  transition: color 0.2s;
}

label,
.col-form-label {
  font-weight: 500;
}

.form-group {
  margin-bottom: 1rem;
  align-items: center;
}

img.userpicture {
  border-radius: 50%;
}

.table {
  thead {
    background-color: $gray-100;

    th {
      font-size: 0.7rem;
      vertical-align: middle;
      border-bottom: none;
    }
  }

  td,
  th {
    padding: 10px;
    font-size: 0.9rem;
    white-space: normal;
  }
}

.list-unstyled {
  margin-bottom: 0;

  li {
    margin-bottom: 0.5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// Nested Cards
.card:not(.block_not_card) {
  .card {
    border: 1px solid $border-color;
    box-shadow: $purity-box-shadow;
  }
}

// Accordion
.accordion {
  .card {
    overflow: visible;

    .card-header {
      border-radius: inherit;
      transition: background-color 0.2s;

      &:hover {
        background-color: $purity-collapsible-hover-background-color;
      }

      &::after {
        content: "\f078";
        @if variable-exists(fa-style-family) {
          font-family: $fa-style-family;
          font-weight: 600;
        } @else {
          font-family: "FontAwesome";
        }
      }
    }
  }
}

// Button Styling
.block .footer a,
.collapsible-actions .collapseexpand,
#page-user-profile .node_category .editprofile a,
.see-all-link,
.page-top-settings-menu .dropdown > a,
.page-context-header #message-user-button,
.context-header-settings-menu .dropdown > a,
body .card .backlink > a,
.add-sections,
.ajax-contact-button,
.addbloglink > a,
.blog-bottom-container .comment-link,
.comment-ctrl .comment-area > .fd > a,
.coursecat-management-header .view-mode-selector .moodle-actionmenu .dropdown-toggle,
.courses > .paging.paging-morelink a,
#footer .tool_dataprivacy > a {
  position: relative;
  display: inline-block;
  font-size: $input-btn-font-size;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  color: $body-color;
  text-align: center;
  white-space: $btn-white-space;
  vertical-align: middle;
  cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  text-transform: $btn-text-transform;
  letter-spacing: $btn-letter-spacing;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  transition: $transition-base;
  will-change: transform;
  @include button-variant($primary, $primary);

  @include hover() {
    color: $body-color;
    @include box-shadow($btn-hover-box-shadow);
    transform: translateY($btn-hover-translate-y);
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    @include box-shadow($btn-active-box-shadow);
    background-color: darken($primary, 10%) !important;

    &:focus {
      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
    }
  }

  @include button-variant($primary, $primary);
}
.block .footer a:focus {
  background-color: $primary !important;
}

// Reset Secondary And Default Button Styling
.btn-secondary,
.btn-default,
.page-top-settings-menu .dropdown > a {
  @include button-variant($default, $default);
}

.btn-outline-secondary,
.btn-outline-default {
  @include button-outline-variant($default);
}

// Remove Button Focus Styling
.btn {
  &.focus,
  &:focus {
    box-shadow: none !important;
  }
}

// Remove Hover Styles of Disabled Buttons
.btn.disabled,
.btn:disabled {
  &:hover,
  &:focus {
    box-shadow: none;
    transform: translateY(0);
    cursor: default;
  }
}

.aalink.focus, #page-footer a:not([class]).focus, .arrow_link.focus, a:not([class]).focus, .activityinstance > a.focus, .aalink:focus, #page-footer a:not([class]):focus, .arrow_link:focus, a:not([class]):focus, .activityinstance > a:focus {
  background-color: transparent;
  box-shadow: none;
}

// Table Styling
table {
  th {
    font-weight: $font-weight-bold;
  }
}

.generaltable {
  th,
  td {
    vertical-align: middle;
  }
}

// Badge Adjustments
.badge {
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0.1px;
  font-weight: $font-weight-bold;
  @include border-radius($badge-pill-border-radius);

  .btn-link {
    padding: 0 !important;
    line-height: 1 !important;
    border: none !important;
  }
}

.badge-primary,
.badge-info,
.badge-success,
.badge-danger,
.badge-warning,
.badge-default {
  color: $white !important;
}
.badge-primary {
  background-color: $primary;
}
// .badge-secondary {
//   color: $gray-900 !important;
// }
.badge-info {
  background-color: $info;
}
.badge-success {
  background-color: $green;
}
.badge-danger {
  background-color: $red;
}
.badge-warning {
  background-color: $orange;
}
.badge-default {
  background-color: $default;
}

// BG Light
.bg-light {
  background-color: $gray-200 !important;
}

// Popover
.popover {
  p {
    @include reset-text();
    @include font-size($popover-font-size);

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.popover-body {
  padding: 1rem 1.25rem;
}

// Dashboard BG reset
#page-my-index {
  background-color: $body-bg;
}

// Box Shadow Adjustment
// .dashboard-card-deck {
// 	margin: -2rem -25px;
// 	padding: 2rem 0.8rem 0;
// }

.block-recentlyaccessedcourses {
	.dashboard-card-deck {
		&.one-row {
			height: auto !important;
		}
	}
}

.pagelayout-mydashboard, .pagelayout-login {
	#region-main-box {
		@include media-breakpoint-down(sm) {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

.simplesearchform {
  .input-group {
    .form-control {
      border-top-left-radius: $input-border-radius;
      border-bottom-left-radius: $input-border-radius;

      &:focus {
        box-shadow: $input-focus-box-shadow;
      }
    }

    .search-icon {
      .icon {
        padding: 0 5px;
      }
    }
  }
}

.card {
  [role="main"] {
    h2:first-of-type {
      padding: $card-spacer-y $card-spacer-x;
      margin: (-$card-spacer-x) (-$card-spacer-x) 2rem;
      border-bottom: 1px solid $card-border-color;
      // font-size: $h3-font-size;

      .btn-link {
        margin-top: -3px;

        .icon {
          margin-left: 0.5rem;
        }
      }
    }

    .simplesearchform {
      &.justify-content-center {
        justify-content: flex-start !important;
      }
    }
  }

  .card-body {
    @include media-breakpoint-down(sm) {
      padding: $card-spacer-x;
    }
  }

  table, .table {
    word-wrap: normal;

    // td,
    // th {
    //   padding-left: 10px;
    //   padding-right: 10px;
    // }
  }

  img {
    max-width: 100%;
  }
}

.path-admin {
  #assignrole {
    margin-left: 0;
    margin-right: 0;
    margin-top: 25px;
  }
}

#page-filter-manage,
.path-admin-roles {
  .backlink {
    margin-top: 1.5rem;
  }
}

.custom-select {
  height:  calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});

  @include border-radius($input-border-radius, 0);
  @include box-shadow($input-box-shadow);
  @include transition($input-transition);

  @include form-control-focus($ignore-warning: true);

  &:focus {
      &::placeholder {
          color: $input-focus-placeholder-color;
      }
  }
}

#page-user-profile {
  .page-context-header {
    overflow: visible;
  }

  .ajax-contact-button {
    margin-top: 1rem;
  }

  .node_category {
    position: static;

    .card-body {
      position: relative;
    }

    .editprofile {
      position: absolute;
      top: -53px;
      right: 1.5rem;
      
      a {
        @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
      }
    }
  }
}

.userprofile {
  .profile_tree {
    column-gap: 30px;
  }
}

// Collapsible sections
.collapsible-actions {
  .collapseexpand {
    padding-left: 1.6rem !important ;
    margin-bottom: 1rem;
    background-image: none;

    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);

    &:before {
      position: absolute;
      margin-top: 1px;
      left: 11px;
      content: '\f0da';
      @if variable-exists(fa-style-family) {
        font-family: $fa-style-family;
      } @else {
        font-family: "FontAwesome";
      }
    }

    &.collapse-all {
      &:before {
        content: '\f0d7';
      }
    }
  }
}

.mform {
  > .form-group {
    margin-left: 0.5rem;
  }

  fieldset {
    margin-left: 0;
    border: none;

    &.collapsible,
    &.collapsed {
      legend {
        a.fheader {          
          &:after {
            position: absolute;
            right: 20px;
            margin-top: 2px;
            @if variable-exists(fa-style-family) {
              font-family: $fa-style-family;
            } @else {
              font-family: "FontAwesome";
            }
            font-size: 14px;
          }
        }
      }
    }
    
    &.collapsible {
      .fcontainer {
        padding: 1rem 1.5rem;
      }

      legend {
        position: relative;

        a.fheader {
          display: block;
          background-image: none;
          background-color: $white;
          margin-left: 0;
          padding: 1rem 1.5rem;
          border: 1px solid $border-color;
          box-shadow: $purity-box-shadow;
          border-radius: $border-radius;
          font-size: $h3-font-size;
          font-family: $headings-font-family;
          font-weight: $headings-font-weight;
          line-height: $headings-line-height;
          color: $headings-color;
          transition: background-color 0.2s;

          &:after {
            content: '\f077';
          }

          &:hover {
            background-color: $purity-collapsible-hover-background-color;
          }

        }
      }
    }

    &.collapsed {
      legend {
        a.fheader {
          &:after {
            content: '\f078';
          }
        }
      }
    }
  }
}

.fdescription {
  display: block;
  position: relative;
  margin: 0.7rem 0;
  padding: 0.75rem 1rem;
  font-size: 90%;
  color: #a57903;
  background-color: #fff2d0;
  box-shadow: 0 1px 0 0 #ffe6a1;
  border-radius: $border-radius;

  p {
    &:last-child {
      margin-bottom: 0;
    }
  }

  &.required {
    color: #611818;
    background-color: #fce8e8;
    box-shadow: 0 1px 0 0 #fad6d6;
  }

  .text-muted {
    color: inherit !important;
    opacity: 0.6;
  }

  ul {
    margin: 0;
  }
}

.ftoggler {
  .btn-link {
    position: absolute;
    top: 14px;
    right: 40px;
    font-size: 18px;
  }
}

legend {
  &.ftoggler {
    font-size: $modal-title-font-size;
    font-weight: $font-weight-bold;
    color: $headings-color;
    // margin-bottom: 1.5rem;
  }
}

.form-autocomplete-downarrow {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: calc(50% - 12px);
  right: 10px;
  border-radius: 50%;
  font-size: 85%;
  background-color: $gray-100;
  transition: background-color 0.2s;

  &:hover {
    background-color: $gray-200;
  }
}

.form-autocomplete-selection {
  min-height: auto;
  margin: 10px 0;

  [role="listitem"] {
    span {
      margin-right: 10px;
    }
  }

  img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -3px 5px 0 0;
  }
}

.form-autocomplete-suggestions {
  border: 1px solid $border-color;

  li {
    padding: 10px 15px;

    &[aria-selected="true"] {
      background-color: $gray-100;
    }
  }

  img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: -3px 5px 0 0;
  }
}

.fitem.advanced .text-info {
  margin-left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: $gray-200;
  color: $gray-700 !important;
}

.fitem {
  span.error {
    font-size: 90%;
    font-weight: $font-weight-bold;
    color: $danger;
  }
}

.moreless-actions {
  margin-top: 2rem;
  font-weight: $font-weight-bold;
}

// Atto Editor
div.editor_atto_toolbar {
  border-color: $input-border-color;
}
.editor_atto_content_wrap {
  border: none;
}

.userloggedinas,
.userswitchedrole,
.loginfailures {
  .usermenu .usertext .meta {
    margin-top: -5px;
    font-size: 0.75rem;
    text-align: left;
  }
}

.initialbar {
  margin: 0;

  .initialbarlabel {
    margin-right: 1rem !important;
    min-width: 5rem;
  }

  ul.pagination {
    margin: 0;

    @include media-breakpoint-down(lg) {
      margin-bottom: 1rem;
    }
  }
}

.initialbarall {
  .page-link {
    margin-right: 6px;
  }
}

.statusbox {
  margin-bottom: 1rem;
}

// Fix conflict coused by "framework"
.center {
  left: auto !important;
  transform: none !important;
}

// Fix Custom Reports
#page-admin-reportbuilder-edit {
  #page {
    margin-top: 90px;

    .dynamictabs {
      #dynamictabs-tabs {
        padding-top: 0;
        box-shadow: 0 1px 4px rgba(0,0,0,.07);
      }

      #dynamictabs-content {
        padding-top: 100px;
      }
    }
  }
}

.modchooser .searchcontainer .searchbar .input-group-append .icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 0;
}