/* File for custom CSS

/* CSS to better visually match Docsify pages within Canvas LMS (uncomment to use) */
/*
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body .markdown-section {
    font-family: "Lato Extended","Lato","Helvetica Neue",Arial,sans-serif;
    line-height: 1.4;
    font-size: 16px;
}
*/

/* Link colors to match SFU branding visual styling (uncomment to use) */
/*
:root {
    --link-color: #CC0633!important;
    --link-text-decoration: none!important;
    --link-text-decoration--hover: underline!important;

    --sidebar-name-color: #CC0633!important;
    --sidebar-nav-link-color: #757575!important;
    --sidebar-nav-link-color--active: #CC0633!important;
    --sidebar-nav-link-border-color--active: #CC0633!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #CC0633 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color: #757575!important;
    --navbar-root-color--active: #CC0633!important;

    --blockquote-border-color: #757b7f!important;

    --pagination-title-color: #CC0633!important;
}
*/

/* Dark mode colours to match SFU branding visual styling for use with light + dark theme (uncomment to use) */
/*
@media (prefers-color-scheme: dark) {
:root {

    --link-color: #EA7688!important;
    --link-text-decoration: none!important;
    --link-text-decoration--hover: underline!important;

    --sidebar-name-color: #EA7688!important;
    --sidebar-nav-link-color: #B2B4B4!important;
    --sidebar-nav-link-color--active: #EA7688!important;
    --sidebar-nav-link-border-color--active: #EA7688!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px linear-gradient(45deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4px), no-repeat 2px calc(50% + 2.5px) / 6px 5px linear-gradient(135deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, #EA7688 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color: #B2B4B4!important;
    --navbar-root-color--active: #EA7688!important;

    --blockquote-border-color: #757B7F!important;

    --pagination-title-color: #EA7688!important;
    }
}
*/

/* Link colors to match visual styling of Moodle LMS (uncomment to use) */
/*
:root {
    --link-color: #0F6CBF!important;

    --sidebar-name-color: #0F6CBF!important;
    --sidebar-nav-link-color--active: #0F6CBF!important;
    --sidebar-nav-link-border-color--active: #0F6CBF!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px)!important;
    --navbar-root-color--active: #0F6CBF!important;

    --blockquote-border-color: #0F6CBF!important;

    --pagination-title-color: #0F6CBF!important;
}
*/

/* Link colors to match visual styling of Sakai LMS (uncomment to use) */
/*
:root {
    --link-color: #0B1660!important;

    --sidebar-name-color: #0B1660!important;
    --sidebar-nav-link-color--active: #0B1660!important;
    --sidebar-nav-link-border-color--active: #0B1660!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color--active: #0B1660!important;
    --navbar-root-color--active: #0B1660!important;

    --blockquote-border-color: #0B1660!important;
    
    --pagination-title-color: #0B1660!important;
}
*/

/* CSS to better visually match Docsify pages within Sakai LMS (uncomment to use) */
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

body .markdown-section {
    font-family: "Open Sans",sans-serif;
    line-height: 1.3;
    font-size: 14px;
}
*/

/* 
    ################################
    ||                            ||
    ||     🎨 EPF.WIKI Theme      ||
    ||                            ||
    ################################
*/

:root {
  --base-background-color: #1c153b;
  --sidebar-name-color: #ba9afd;
  --sidebar-background: #190c39;
  --sidebar-toggle-background: #190c39;
  --navbar-root-color--active: #ba9afd;
  --search-input-background-color: #2d1763;
  --table-row-odd-background: #2d1763;
  --base-color: #fff;
  --heading-color: #fff;
  --primary-text-color: #d3d3d3;

  /* blockquote*/
  --blockquote-background: #2d1763;
  --blockquote-color: var(--primary-text-color);
  --blockquote-border-color: #ba9afd;

  /* link */
  --link-color: #ba9afd;

  /* text */
}

body {
    color: #fff;
}

section.content , .markdown-section code{
    color: var(--primary-text-color);
}

/* sidebar */
li.file,
li.folder {
  padding: 8px 15px;
  margin-bottom: 4px;
}
li.file p,
li.folder p {
  margin: 0;
}

li.folder.active,
li.folder:hover,
li.folder.open,
li.file.active,
li.file:hover,
li.file.open {
  border-radius: 5px;
  background: #2d1763;
}

.app-sub-sidebar li.file,
.app-sub-sidebar li.folder {
  padding: 0;
  margin: 0;
  animation: tabFade 0.5s;
}

li.folder strong,
li.file strong {
  padding: 10px 0;
  display: block;
  border-bottom: 1px dashed #a278ff;
}

li.folder > ul > li.file {
  padding: 0;
}
.sidebar-nav ul.app-sub-sidebar a {
  border: none;
  border-left: 4px solid #fff;
  padding-left: 8px;
}

.sidebar-nav ul.app-sub-sidebar li.active > a,
.sidebar-nav ul.app-sub-sidebar li a:hover {
  border-color: #ba9afd;
  text-decoration: none;
  color: #ba9afd;
  border-left: 4px solid #ba9afd;
}

.sidebar .search .input-wrap {
  padding: 8px 15px;
  margin: 0;
  border-radius: 50px;
  border: 2px solid #6660b9;
}
.sidebar .search input[type="search"],
.sidebar .search input[type="search"]:focus {
  background-color: #2d1763;
  outline: none;
  box-shadow: none;
}
.sidebar-nav a:hover {
  text-decoration: none;
}
@keyframes tabFade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* content */
.markdown-section img {
  border-radius: 8px;
}
.markdown-section h2 a::before,
.markdown-section h3 a::before,
.markdown-section h4 a::before,
.markdown-section h5 a::before,
.markdown-section h6 a::before {
  color: #ba9afd;
  margin-right: 5px;
}

.app-nav li a {
  color: #fff;
  font-weight: bold;
}

.sidebar-toggle .sidebar-toggle-button {
  padding: 20px;
  border-radius: 5px;
  --sidebar-toggle-icon-height: 8px;
  --sidebar-toggle-icon-stroke-width: 2px;
  background: #6e52a9;
}

@media only screen and (min-width: 768px) {
  .sidebar-toggle .sidebar-toggle-button {
    padding: 20px;
    border-radius: 5px;
    --sidebar-toggle-icon-height: 8px;
    --sidebar-toggle-icon-stroke-width: 5px;
    background: #6e52a9;
  }
  .sidebar-toggle span:nth-child(1) {
    transform: rotate(-45deg);
  }

  .sidebar-toggle span:nth-child(2) {
    display: none;
  }

  .sidebar-toggle span:nth-child(3) {
    transform: rotate(45deg);
  }

  .ready-fix.close .sidebar-toggle span:nth-child(1) {
    transform: rotate(45deg);
  }

  .ready-fix.close .sidebar-toggle span:nth-child(3) {
    transform: rotate(135deg);
  }
}

.sidebar-toggle span {
  transition: transform 0.5s ease-in-out;
}

.btn-primary,
.markdown-section a.btn-primary {
  border: none;
  outline: none;
  cursor: pointer;
  text-align: center;
  border-radius: 3rem;
  background: #ba9afd;
  padding: 0.75rem 1.5rem 0.85rem;
  font-size: 1.13rem;
  font-weight: 500;
  line-height: 1;
  color: #190c39;
  margin: 10px 0;
  display: inline-block;
  text-decoration: none;
}

.btn-primary::after {
  display: inline-block;
  margin-left: 4px;
  font-size: 22px;
  content: "➡";
}
body .pagination-item-title,
body .pagination-item-label {
  font-weight: bold;
  color: #fff;
  opacity: 1;
}

.app-name-link {
  display: flex;
  align-items: center; /* Vertical align */
  justify-content: center;
  font-weight: bold;
  font-size: 25px;
}

.logo {
  display: inline;
  width: 40px;
  margin-right: 5px;
}

.markdown-section table {
  overflow-x:scroll;
  width: 100%;
  display:block;
}

.sidebar-nav li,
.sidebar-nav li * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important; 
  word-break: break-word !important;
}