/* Put this CSS into Raw SCSS.
There may be better ways to do some of this.
Please provide ideas and suggestions. */


/* Colorization.
-----------------------------------------------------------------------------------------------
These are the custom colors used.
Using variables makes it easier to experiment with different color schemes. */
:root {
  --rjNavMain: #e9dfd7;
  /* For main NavBar */
  --rjHover: #e6dfd6;
  /* For hovers */
  --rjLightBack: #faf8f5;
  /* For light backgrounds */
  --rjDisabled: #dedede;
  /* For disabled items */
  --rjBulb: #ffffdd;
  /* To highlight current topic */
  --rjDueDate: #fbd0dd;
  /* Due dates for activities */
  --rjComplement: #009090;
  /* Not used yet */
  --rjTriadGreen: #009000;
  /* Not used yet */
  --rjTriadBlue: #000090;
  /* Not used yet */
}

/* I color the top Navbar background to differentiate my production Moodle from experimental Moodles.
My production color is listed first, followed by experimental colors. */
nav[aria-label="Site navigation"] {
  background-color: var(--rjNavMain) !important;
  //background-color: orange !important;
  //background-color: cyan !important;
  //background-color: yellow !important;
  //background-color: #d7e1e9 !important;
  border-bottom: black 1px solid;
}

/* Change the current topic highlight (lightbulb) color. */
.current {
  background-color: var(--rjBulb);
}

/* Change the color of hidden topics and headings */
.activity-item.hiddenactivity {
  background-color: var(--rjDisabled);
}

li.section.hidden,
.block.hidden,
.block.invisible {
  background-color: var(--rjDisabled);
}

/* "Collapse" icon characteristics */
.btn.btn-icon:hover,
.btn.btn-icon:focus {
  background-color: var(--rjHover);
}

/* Highlight each activity when hovering */
.activity:hover {
  background-color: var(--rjHover);
}

/* Change the drawer header background color */
.drawerheader,
.drawercontent {
  background-color: var(--rjLightBack);
}

/* Secondary Nav bar colors */
.moremenu .nav-link.active,
.moremenu .nav-link.active:hover {
  background-color: var(--rjHover);
}

.moremenu .nav-link:hover {
  background-color: var(--rjLightBack);
}

/* Card coloring */
.card-body:hover {
  background-color: var(--rjLightBack);
}

/* Frontpage coloring */
#frontpage-available-course-list .coursebox:hover {
  background-color: var(--rjHover);
}

.pr-1:hover {
  background-color: var(--rjHover);
}

/* Frontpage coloring */
#frontpage-available-course-list .coursebox {
  border: 1px solid black;
  padding: .3rem;
}

/* Color for date below activity or resources */
.description .course-description-item:last-child {
  background-color: var(--rjDueDate);
}

/* Color the lines between topics. */
.course-content .topics .section,
.course-content .weeks .section {
  border-color: black;
}

/* Adjustments to the colors of the Quiz Navigation blocks.
John Provasnik and Jon Bolton */
#mod_quiz_navblock .qnbutton.notanswered .trafficlight {
background-color: white !important;
}
#mod_quiz_navblock .qnbutton.partiallycorrect .trafficlight  {
background-color: orange !important;
}
#mod_quiz_navblock .qnbutton.complete .trafficlight {
background-color: blue !important;
}
#mod_quiz_navblock .qnbutton.notstarted .trafficlight {
background-color: pink !important;
}

/* Remove components that I don't need.
-------------------------------------------------------------------------
/* Remove the activity name from the grade book user item. */
.d-block.small  {
  display: none !important;
}

/* Do not display the "Highlight" badge */
.course-section .sectionbadges .badge {
  display: none;
}

/* Remove the left-side Course Index */
.drawer-toggles .drawer-left-toggle .btn {
  display: none;
}

/* Remove the "?," bottom-right side */
#page-footer {
  display: none;
}

/* Remove the "percent" complete from the dashboard card */
.dashboard-card-deck .dashboard-card .dashboard-card-footer {
  display: none;
}

/* Remove the "My courses" top menu tab (Randy Thorton).
Add a "Course Block" to the Dashboard for Courses.
This provides one place for students to go, i.e. the Dashboard. */
.primary-navigation li[data-key="mycourses"] {
  display: none;
}

/* Hide the left-side nav drawer for new students and everyone. */
#nav-drawer {
  display: none;
}

/* Font, line, and other element spacing.
------------------------------------------------------------------------------------------------------*/
/* Tighten up line spacing. Increase font-weight. */
body {
  font-weight: 400;
  line-height: 1.1rem;
}

/* Reduce the space between paragraphs */
p {
  margin: .5rem
}

/* Second heading size */
h2 {
  font-size: 1.4rem;
}

/* Topic headings. Check to see where else this occurs.
I might want to change this only on the course page. */
h3 {
  font-size: 1.3rem;
  padding: 0;
  margin: 0;
  border: 0;
}

h4 {
  font-size: 1.15rem;
}

/* Collapse button characteristics */
.btn.btn-icon {
  height: 28px;
  width: 28px;
}

/* Tighten up and improve course activity and resources. */
.activity-item:not(.activityinline) {
  padding: .125rem;
  margin: 0;
}

/* Make the activity icons smaller. */
.activityiconcontainer {
  width: 40px;
  height: 40px;
}

/* Move Activity Completion Items to inline instead of one per line. */
.activity-item .automatic-completion-conditions {
  display: inherit;
  margin: .1rem;
}

/* Tighten box for date below activity or resources */
.description .course-description-item:last-child {
  padding: 0 .5rem 0 .5rem;
  margin: .25rem 1rem .25rem 1rem;
}

/* Frontpage settings */
#frontpage-available-course-list .summary {
  margin: 0;
}

/* Space between topics */
.section .activity {
  padding: .05rem;
}

/* Space between topic and description */
.mt-3,
.mb-3,
.my-3 {
  margin: 0 !important;
}

/* Tighten spacing between topics. */
.course-content ul.topics li.section,
.course-content ul.weeks li.section {
  padding: .25rem;
}

/* Adjust how text appears in right-side blocks. */
.pb-3,
.py-3 {
  padding: .2rem !important;
  line-height: 1rem;
}

/* Padding in cards, right-side block. */
.p-3 {
  padding: .75rem !important;
  border-style: solid;
  border-radius: .5rem;
  border-width: .1rem;
}

/* Change the card heading style, right-side block. */
card-title,
h5 {
  font-size: 1.1rem;
  font-weight: bold;
}

/* This (seems to) removes the vertical scrollbar. */
#page.drawers .main-inner {
  padding: 0rem .5rem;
}

/* Adjust left & right border spacing of courses on Course Overview */
.drawers .block_myoverview>.card-body {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.pt-2, .py-2 {
  padding-top: 0.2rem !important;
}

/* Tighten spacing of Timeline on Dashboard. */
.pb-1, .py-1 {
  padding-bottom: 0rem !important;
}

/* Tighten spacing of Calendar items on Dashboard. */
.maincalendar .calendartable td, .maincalendar .calendartable li {
  padding: 0;
}

/* Tighten spacing of Calendar day blocks on Dashboard. */
#region-main .maincalendar .calendarwrapper td > div {
  height: 9rem;
}

/* Add a little space to the left of the key on Site homepage. */
.fa-key {padding-left: .5rem}

/* Specific to the Collapsed Topics Plugin
-------------------------------------------- */
/* Reduce space for each resource or activity.  I am keeping a little space around the activity icon. */
.format-topcoll .ctopics.topics .activity-item:not(.activityinline) {
  padding: .05rem .05rem;
}

/* Reduce space in topic headings in body */
.course-content ul.ctopics li.section .content .toggle span.the_toggle {
  padding: .125rem;
}

/* Reduce space in topic headings for topic 0 */
.format-topcoll .ctopics .activity-item:not(.activityinline) {
  padding: .125rem;
}

/* Position the toggle target a little more centered */
.fa, .fa-classic, .fa-sharp, .fas, .fa-solid, .dropdown-item[aria-current="true"]::before, .dropdown-item[aria-selected="true"]::before, .dropdown-toggle::after, .dropleft .dropdown-toggle::before, .dropright .dropdown-toggle::after, .dropup .dropdown-toggle::after, .block_settings .block_tree [aria-expanded="true"] > p::before, .block_navigation .block_tree [aria-expanded="true"] > p::before, .block_settings .block_tree [aria-expanded="false"] > p::before, .block_navigation .block_tree [aria-expanded="false"] > p::before, .dir-rtl .block_settings .block_tree [aria-expanded="false"] > p::before, .dir-rtl .block_navigation .block_tree [aria-expanded="false"] > p::before, .editing .editinprogress::after, .toast.toast-success .toast-body::before, .toast.toast-danger .toast-body::before, .toast.toast-info .toast-body::before, .toast.toast-warning .toast-body::before, .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after, .navbar.fixed-top .usermenu .dropdown-menu .submenu .items .dropdown-item[aria-current="true"]::before, .dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after, .moremenu .dropdown-item[aria-current="true"]::before, .moremenu .dropdown-item.active::before, .far, .fa-regular, .content-bank-container.view-grid .cb-unlisted::after, .fab, .fa-brands {
  line-height: .1;
}

/* Some color modifications */
.course-content ul.ctopics li.section .content .toggle-point span.toggle_closed, .course-content ul.ctopics li.section .content .toggle-point span.toggle_open, body.jsenabled .course-content ul.ctopics li.section .content .toggle-point span.toggle_open, #toggle-all .content .toggle-point .toggle-all.off {
  border-color: black;
  border-top-style: solid;
  border-width: .05rem;
}



/* Experimentation Below
-------------------------

 /* h1 {
      font-size: .25rem;
background-color: blue;
  } */

  /* h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
      margin-bottom: .1rem;
      line-height: .1rem;
  }

/* Activity Completion button color. Not sure why this doesn't work
alert-success, .environmenttable .ok {
  background-color: #909000;
}

/* Remove the activity name from the grade book item.
.d-block {
  display: none !important;
}

*/