html {
    height: 100%;
    /*scroll-margin-top: 60px;  //height of sticky header */
}

body {
    height: 100%;
    padding-top: 52px;
}

h4 {
    font-size: 1.4rem;
}

a {
    text-decoration: none;
}

ol li {
    padding-left: 5px;
}

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


/* Shared layout: same text indent for both kinds of lists */
ol[type="a"], ol[type="i"] {
  list-style: none;
  counter-reset: item;
  padding-left: 2.6em; /* one shared indent for the item text */
}

ol[type="a"] > li, ol[type="i"] > li {
  counter-increment: item;
  position: relative;
}

/* Shared marker positioning: anchor the RIGHT edge at the text start */
ol[type="a"] > li::before, ol[type="i"] > li::before {
  position: absolute;
  right: 100%;          /* right edge sits at the text start */
  margin-right: 0.3em;  /* gap between “)” and the item text */
  white-space: nowrap;  /* prevent wrapping like (viii) */
  text-align: right;
}

/* Marker content differs by list type */
ol[type="a"] > li::before {
  content: "(" counter(item, lower-alpha) ")";
}

ol[type="i"] > li::before {
  content: "(" counter(item, lower-roman) ")";
}


.bootstrap-font {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.center{
    text-align: center;
}

.bold{
    font-weight: bold;
}

.background-gray{
    background-color: var(--pn-surface-page);
}

.background-white{
    background-color: var(--bs-body-bg);
}

.background-teal{
    background-color: #069a9a;
}

.background-blue{
    background-color: var(--pn-highlight-blue-faint-bg);
}

.text-teal{
    color: var(--pn-teal);
}

.va-baseline{
    vertical-align: baseline;
}

.mtable{
    padding-left:10px;
    padding-right:10px;
}

.navbar{
    z-index: 20000;
    padding-top:2px; 
    padding-bottom: 2px; 
    /* background-color: black !important; */
}

.navbar-pic{
    width: 40px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.navbar-pic-link{
    margin-left: 15px;
}

@media (max-width: 991px) {
    .navbar-pic-link{
        margin-left: 5px;
    }
}

.nav-item{
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-brand-course{
    /* color: #e25650 !important; */
    color: #58cac9 !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding-left: 1.75rem;
    font-size: 17px;
}

.navbar-menu-item{
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: 15px;
}

.modal-dialog{
    margin-top: 50px;
}

/* The following makes navbar dropdown menus appear on hover */
/*@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}*/

.dropdown-menu{
    -webkit-box-shadow: var(--pn-shadow-lg);
    -moz-box-shadow: var(--pn-shadow-lg);
    box-shadow: var(--pn-shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}

li p{
    margin-bottom: 7px;
}

.alert p{
    margin-bottom: 0px;
}

.float-right{
    float: right;
}

.float-left{
    float: left;
}

.video-embed {
    position: relative;
    padding-bottom: 54%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    border: 1px solid var(--pn-border-strong);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bold{
    font-weight: bold;
}

.hover-highlight:hover{
    background-color: var(--pn-highlight-bg) !important;
}

/* Outline glyphs for the state toggles. This is Font Awesome 7's regular face,
   subset to bell/thumbtack/bookmark, while every other icon still comes from the
   6.7.1 solid install. It is declared under a private family name so it cannot
   collide with that install, or with the kit's own stylesheet if one is ever
   linked. The codepoints are the same in both versions, so the v6 .fa-bell /
   .fa-thumbtack / .fa-bookmark classes keep supplying the glyph. */
@font-face {
    font-family: 'PN Icons Regular';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.79da284ee60b.woff2") format("woff2");
}

/* State toggles (follow, pin) keep one glyph and carry the state in its fill:
   this is the "off" half, and the solid default is the "on" half. Colour is left
   to inherit so the same class works on the gray discussion chips and the blue
   chapter admin bar. Only valid on the three icons in the subset above; anything
   else renders blank. */
.toggle-icon-off{
    font-family: 'PN Icons Regular';
    font-weight: 400;
}

.no-decoration:hover{
    text-decoration: none !important;
    color:inherit;
}

.no-decoration{
    color:inherit;
    text-decoration: none !important;
}

.no-decoration-hover:hover{
    text-decoration: none !important;
}

.maroon{
    color: var(--pn-accent);
}

.white{
    color: white !important;
}

.gray{
    color: var(--pn-text-muted) !important;
}

.black{
    color: var(--bs-body-color) !important;
}

.dimgray{
    color: var(--pn-text-muted-strong) !important;
}

.blue{
    color: var(--bs-link-color) !important;
}

.teal{
    color: var(--pn-teal) !important;
}

.darkcyan{
    color: var(--pn-darkcyan) !important;
}

/* Hollow circle marking something that isn't published yet; pairs with a
   teal fa-circle-check for the published state. Used by the gradebook and
   the book management chapter list. */
.unpublished-dot{
    width: 1em;
    height: 1em;
    border: 1.5px solid var(--pn-border);
    vertical-align: -0.125em;
}

.semi-strong{
    font-weight: 500;
}

.fs-5-5{
    font-size: 1.1rem;
}

.fs-10{
    font-size: 10px;
}

.fs-11{
    font-size: 11px;
}

.fs-12{
    font-size: 12px;
}

.fs-13{
    font-size: 13px;
}

.fs-14{
    font-size: 14px;
}

.fs-15{
    font-size: 15px;
}

.fs-16{
    font-size: 16px;
}

.fs-20{
    font-size: 20px;
}

.fw-600{
    font-weight: 600;
}

.fw-500{
    font-weight: 500;
}

.hide, .initially-collapsed-region {
    top: 0;
    left:0;
    width:0;
    height:0;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
}

.no-border{
    border: 0px !important;
}

.border-light{
    border: 1px solid var(--pn-border) !important;
}

.no-padding-right{
    padding-right: 0px;
}

.no-padding-top{
    padding-top: 0px;
}

.no-padding-bottom{
    padding-bottom: 0px;
}

.no-padding-left{
    padding-left: 0px;
}

.no-padding{
    padding: 0px;
}

.no-margin{
    margin: 0px !important;
}

.no-caret::after {
    display: none !important;
}

.my-1-5{
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
}

.my-0-5{
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
}

.mb-0-5{
    margin-bottom: 0.125rem !important;
}

.py-0-5{
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.py-1-5{
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.ps-3-5{
    padding-left: 1.2rem !important;
}

.px-1-5{
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

.pb-2-5{
    padding-bottom: 0.625rem !important;
}

.pb-4-5{
    padding-bottom: 2rem !important;
}

.px-2px{
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.px-1px{
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.py-4-5{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.mb-4-5{
    margin-bottom: 2rem !important;
}

.ms-4-5{
    margin-left: 2rem !important;
}

.mt-4-5{
    margin-top: 2rem !important;
}

.me-2-5{
    margin-right: 0.625rem !important;
}

.mx-2px{
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.me-2px{
    margin-right: 2px !important;
}

.mx-1px{
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.ms-1px{
    margin-left: 1px !important;
}

.mt-1-5{
    margin-top: 0.375rem !important;
}

.p-1-5{
    padding: 0.375rem !important;
}

.pt-1px{
    padding-top: 1px !important;
}

.ps-2-5{
    padding-left: 0.625rem !important;
}

.mb-0-5{
    margin-bottom: 0.125rem !important;
}

.mt-2-5{
    margin-top: 0.625rem !important;
}

.ms-0-5{
    margin-left: 0.125rem !important;
}

.ms-1-5{
    margin-left: 0.375rem !important;
}

.nav-link-icon-text{
    font-size: 17px;
    padding-right: 1.1rem !important;
    padding-top: 0px;
    padding-bottom: 0px;
    color: lightgray !important;
}

/* Just above the lg breakpoint (where the collapsed menu expands into links),
   tighten the gaps so a full set of navbar links still fits. */
@media (min-width: 992px) and (max-width: 1180px) {
    .nav-link-icon-text{
        font-size: 16px;
        padding-right: 0.6rem !important;
        padding-left: 0.45rem !important;
    }

    .navbar-brand-course{
        padding-left: 1rem;
        margin-right: 0.5rem;
    }
}

.nav-icon{
    font-size: 24px;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-icon-messages{
    font-size: 21px !important;
    padding-top: 7px !important;
}

.nav-icon-bookmark{
    font-size: 19px !important;
    padding-top: 7px !important;
}

.nav-icon-notifications{
    font-size: 22px !important;
    padding-top: 7px !important; 
}

.nav-icon-sliders{
    font-size: 21px !important;
    padding-top: 6px !important; 
}

.nav-icon-subscribe{
    font-size: 22px !important;
    padding-top: 6px !important; 
}

.nav-item-icon{
    padding-top:2px;
}

.selected-background{
    background-color: var(--pn-highlight-bg) !important;
}

.selected-background-blue{
    background-color: var(--pn-highlight-blue-faint-bg);
}

.selected-background-yellow{
    background-color: var(--pn-highlight-yellow-bg) !important;
}

.selected-background-yellow-light{
    background-color: var(--pn-highlight-yellow-faint-bg) !important;
}

.selected-background-teal, .background-teal-light{
    background-color: var(--pn-highlight-teal-bg) !important;
}

.selected-background-red{
    background-color: var(--pn-highlight-red-bg) !important;
}

.selected-background-gray{
    background-color: var(--pn-highlight-gray-bg) !important;
}

.selected-1{
    border-bottom: 1px solid var(--pn-accent-strong) !important;
}

.selected-2{
    border-bottom: 2px solid var(--pn-accent-strong) !important;
}

.selected-3{
    border-bottom: 3px solid var(--pn-accent-strong) !important;
}

.selected-left{
    box-shadow: -2px 0px 0px 0px var(--pn-accent-strong) !important;
}

.selected-nav-text{
    border-bottom: 1px solid white !important;
    color: white;
}

.nav-link:hover .nav-text{
    color: white;
}

.nav-link:hover .nav-icon{
    color: white;
}


.title-gray-xs{
    font-weight: bold;
    color: var(--pn-text-muted);
    font-size: 14px;
}

.title-gray-sm{
    font-weight: bold;
    color: var(--pn-text-muted);
    font-size: 15px;
}

.title-gray-md{
    font-weight: bold;
    color: var(--pn-text-muted);
    font-size: 16px;
}

.title-gray-lg{
    font-weight: bold;
    color: var(--pn-text-muted);
    font-size: 17px;
}

.title-gray-xl{
    font-weight: bold;
    color: var(--pn-text-muted);
    font-size: 18px;
}

.blue-link{
    color: var(--bs-link-color) !important;
}

.blue-link:hover{
    color: var(--bs-link-color) !important;
    text-decoration: underline !important;
}

.dotted-link{
    color: inherit;
    border-bottom: 1px dotted var(--bs-emphasis-color);
    padding: 0px;
}

.dotted-link:hover{
    text-decoration: none !important;
}

.text-blue{
    color: var(--bs-link-color);
}

.img-index{
    width: 100%;
}

.img-user{
    border-radius: 50%;
    border: 1px solid var(--pn-border);
    height:55px; 
    width:55px; 
    margin-right:10px;
}

.form-switch-label{
    vertical-align: sub;
}

.form-switch .form-check-input{
    height: 1.5em;
    width: 3em;
    margin-right: 10px;
}

.modal-close-icon{
    margin-right: 5px;
    font-size: 20px;
    vertical-align: text-top;
}

.shadow-depth-1{
    -webkit-box-shadow: var(--pn-shadow-sm);
    -moz-box-shadow: var(--pn-shadow-sm);
    box-shadow: var(--pn-shadow-sm);
}

.shadow-depth-2{
    -webkit-box-shadow: var(--pn-shadow-md);
    -moz-box-shadow: var(--pn-shadow-md);
    box-shadow: var(--pn-shadow-md);
}

.hover-shadow-depth-2:hover{
    -webkit-box-shadow: var(--pn-shadow-md);
    -moz-box-shadow: var(--pn-shadow-md);
    box-shadow: var(--pn-shadow-md);
}

.hover-shadow-depth-3:hover{
    -webkit-box-shadow: var(--pn-shadow-lg);
    -moz-box-shadow: var(--pn-shadow-lg);
    box-shadow: var(--pn-shadow-lg);
}

.text-align-justify{
    text-align: justify;
}

.modal-header{
    background-color: var(--pn-modal-header-bg);
}

.modal-title{
    color: white;
}

.alert-date{
    font-size: 11px;
    color: var(--pn-text-muted);
    float: right;
}

.notification-date{
    font-size: 11px;
    color: var(--pn-text-muted);
}

/* Red counterpart of .comment-compact-unread-indicator; sits fully inside the
   row since dropdown rows are flush with the menu edge (no overhang room). */
.notification-unread-indicator{
    top: 0px;
    left: 0px;
    background-color: var(--bs-danger);
    position: absolute;
    padding: 0.25rem;
}

.width-100{
    width: 100% !important;
}

.width-95{
    width: 95% !important;
}

.width-90{
    width: 90% !important;
}

.width-85{
    width: 85% !important;
}

.width-80{
    width: 80% !important;
}

.width-75{
    width: 75% !important;
}

.width-70{
    width: 70% !important;
}

.width-65{
    width: 65% !important;
}

.width-60{
    width: 60% !important;
}

.width-55{
    width: 55% !important;
}

.width-50{
    width: 50% !important;
}

.width-45{
    width: 45% !important;
}

.width-40{
    width: 40% !important;
}

.width-35{
    width: 35% !important;
}

.width-30{
    width: 30% !important;
}

.width-25{
    width: 25% !important;
}

.width-20{
    width: 20% !important;
}

.width-15{
    width: 15% !important;
}

.width-10{
    width: 10% !important;
}

.rounded-4{
    border-radius: 4px !important;
}

.top-0{
    top: 0 !important;
}

.px-30{
    padding-left: 30px !important;
    padding-right: 30px !important;
}

@media (min-width: 1500px) {
    .col-hg-1 { flex: 0 0 auto; width: 8.33%; }
    .col-hg-2 { flex: 0 0 auto; width: 16.66%; }
    .col-hg-3 { flex: 0 0 auto; width: 25%; }
    .col-hg-4 { flex: 0 0 auto; width: 33.33%; }
    .col-hg-5 { flex: 0 0 auto; width: 41.66%; }
    .col-hg-6 { flex: 0 0 auto; width: 50%; }
    .col-hg-7 { flex: 0 0 auto; width: 58.33%; }
    .col-hg-8 { flex: 0 0 auto; width: 66.66%; }
    .col-hg-9 { flex: 0 0 auto; width: 75%; }
    .col-hg-10 { flex: 0 0 auto; width: 83.33%; }
    .col-hg-11 { flex: 0 0 auto; width: 91.66%; }
    .col-hg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1500px) {
    .offset-hg-1 { margin-left: 8.33%; }
    .offset-hg-2 { margin-left: 16.66%; }
    .offset-hg-3 { margin-left: 25%; }
    .offset-hg-4 { margin-left: 33.33%; }
    .offset-hg-5 { margin-left: 41.66%; }
    .offset-hg-6 { margin-left: 50%; }
    .offset-hg-7 { margin-left: 58.33%; }
    .offset-hg-8 { margin-left: 66.66%; }
    .offset-hg-9 { margin-left: 75%; }
    .offset-hg-10 { margin-left: 83.33%; }
    .offset-hg-11 { margin-left: 91.66%; }
    /* No .offset-hg-12, since it would push the column entirely out of its container. */
}

@media (min-width: 1600px) {
    .col-xhg-1 { flex: 0 0 auto; width: 8.33%; }
    .col-xhg-2 { flex: 0 0 auto; width: 16.66%; }
    .col-xhg-3 { flex: 0 0 auto; width: 25%; }
    .col-xhg-4 { flex: 0 0 auto; width: 33.33%; }
    .col-xhg-5 { flex: 0 0 auto; width: 41.66%; }
    .col-xhg-6 { flex: 0 0 auto; width: 50%; }
    .col-xhg-7 { flex: 0 0 auto; width: 58.33%; }
    .col-xhg-8 { flex: 0 0 auto; width: 66.66%; }
    .col-xhg-9 { flex: 0 0 auto; width: 75%; }
    .col-xhg-10 { flex: 0 0 auto; width: 83.33%; }
    .col-xhg-11 { flex: 0 0 auto; width: 91.66%; }
    .col-xhg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1600px) {
    .offset-xhg-1 { margin-left: 8.33%; }
    .offset-xhg-2 { margin-left: 16.66%; }
    .offset-xhg-3 { margin-left: 25%; }
    .offset-xhg-4 { margin-left: 33.33%; }
    .offset-xhg-5 { margin-left: 41.66%; }
    .offset-xhg-6 { margin-left: 50%; }
    .offset-xhg-7 { margin-left: 58.33%; }
    .offset-xhg-8 { margin-left: 66.66%; }
    .offset-xhg-9 { margin-left: 75%; }
    .offset-xhg-10 { margin-left: 83.33%; }
    .offset-xhg-11 { margin-left: 91.66%; }
    /* No .offset-xhg-12, since it would push the column entirely out of its container. */
}


@media (min-width: 1170px) {
    .d-xl-alt-block {
        display: block !important;
    }
}

.like-btn{
    position: absolute;
    right: 10px;
    bottom: -10px;
    font-size: 11.5px;
    padding-top: 1px;
    padding-left: 5px;
    padding-right: 6px;
}

.like-btn-selected{
    background-color: var(--pn-highlight-bg) !important;
    border: 1.5px solid var(--pn-teal) !important;
}

.icon-like{
    color: var(--pn-teal);
    font-size: 13px;
}

.icon-like-unselected{
    color: var(--pn-text-muted);
    font-size: 13px;
}

.comment:hover .like-btn {
    display: block !important;
}

.comment-likes-indicator{
    font-size: 13px;
    color: var(--pn-text-muted);
}


.btn-teal {
    color: #fff; /* White text color */
    background-color: darkcyan; /* Teal background color */
}

.btn-teal:hover {
    color: #fff; /* Keep text color white on hover */
    background-color: #006666; /* Darker background on hover */
}

.btn-teal:focus, .btn-teal.focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.5); /* Teal shadow for focus */
}

.btn-teal:disabled, .btn-teal.disabled {
    color: #fff;
    background-color: darkcyan; /* Same background for disabled state */
    opacity: 0.65; /* Transparency for disabled state */
}

.btn-teal:not(:disabled):not(.disabled):active, .btn-teal:not(:disabled):not(.disabled).active,
.show > .btn-teal.dropdown-toggle {
    background-color: #005656; /* Even darker for active state */
}

.channel-icon-and-name{
    font-weight: 500;
    font-size: 15px;
    color: var(--pn-teal);
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.5rem !important;
}

.comment-compact-col .channel-icon-and-name{
    font-size: 14px;
    padding-bottom: 0.35rem !important;
}

.channel-detail-header .channel-icon-and-name{
    font-size: 17px;
}

.icon-channel-hashtag{
    font-size: 17px;
    margin-right: 7px;
    margin-left: -2px;
}

.icon-channel-hashtag-lock{
    font-size: 17px;
    margin-right: 3px;
    margin-left: -2px;
}

.icon-channel-inbox{
    font-size: 16px;
    margin-right: 6px;
    margin-left: -2px;
}


.comment-compact-col .icon-channel-lock{
    font-size: 9px;
    left: 22px;
    top: 7px;
    outline: 1px solid var(--pn-surface-page);
    background-color: var(--pn-surface-page);
}

.icon-channel-lock{
    font-size: 9px;
    left: 22px;
    top: 7px;
    outline: 1px solid var(--bs-body-bg);
    background-color: var(--bs-body-bg);
}

.icon-channel-user{
    font-size: 10px;
    left: 20px;
    bottom: 9px;
    background-color: var(--bs-body-bg);
    color: rgb(1 79 71);
}

.icon-channel-lock-personal{
    color: rgb(1 60 54);
}

.comment-compact-col .icon-channel-file{
    font-size: 10px;
    left: 22px;
    bottom: 7px;
    outline: 1px solid var(--pn-surface-page);
    background-color: var(--pn-surface-page);
}

.icon-channel-file{
    font-size: 10px;
    left: 22px;
    bottom: 7px;
    outline: 1px solid var(--bs-body-bg);
    background-color: var(--bs-body-bg);
}

.selected-background-teal .icon-channel-file{
    background-color: var(--pn-highlight-teal-bg) !important;
    outline: 1px solid var(--pn-highlight-teal-bg) !important;
}

.selected-background-teal .icon-channel-lock{
    background-color: var(--pn-highlight-teal-bg) !important;
    outline: 1px solid var(--pn-highlight-teal-bg) !important;
}

.hover-highlight:hover .icon-channel-file{
    background-color: var(--pn-highlight-bg) !important;
    outline: 1px solid var(--pn-highlight-bg) !important;
}

.hover-highlight:hover .icon-channel-lock{
    background-color: var(--pn-highlight-bg) !important;
    outline: 1px solid var(--pn-highlight-bg) !important;
}

.tooltip{
    z-index: 20001;
}

.markdown-m{
    font-size: 15px;
    font-weight: 900;
    margin-right: -2px;
}

.math.display {
    display: block;
}

/* Hide number-input spinner arrows project-wide so values must be typed. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Subscriber role badge: a fixed teal star icon instead of a colored name pill. */
.subscriber-badge {
    color: teal;
}