/* GENERAL --------------------------------------------------------------------------- */
/* Bootstrap 3 draws its focus ring on every a:focus / .btn:focus, so a mouse click leaves a blue box on a
   link that stays on the page (file downloads, "#" buttons). Show the ring for keyboard focus only. */
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
input[type="file"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible) {
    outline:none;
}
.pad-zero-one {
    padding:0 0 1em 0;
}
.pad-zero-two {
    padding:0 0 2em 0;
}
.pad-one-one {
    padding:1em 0;
}
.pad-one-two {
    padding:1em 0 2em 0;
}
.pad-two-zero {
    padding:2em 0 0 0;
}
.pad-two-one {
    padding:2em 0 1em 0;
}
.pad-two-two {
    padding:2em 0;
}
.no-padding {
    padding-left: 0;
    padding-right: 0;
}
.margin-zero-one {
    margin:0 0 1em 0;
}
.margin-zero-two {
    margin:0 0 2em 0;
}
.margin-one-one {
    margin:1em 0;
}
.margin-one-two {
    margin:1em 0 2em 0;
}
.margin-two-one {
    margin:2em 0 1em 0;
}
.margin-two-two {
    margin:2em 0;
}
.btn-xl {
    padding:20px 28px;
    font-size: 1.25em !important;
    line-height: 1.75em;
}
.pages .page {
    display: none;
}
.pages .active {
    display: block;
}
.pages .summary {
    display: none;
}
.pages #second .panel-heading {
    cursor: pointer;
}
.pages #second .panel-body {
    display: block;
}
table thead th {
    background: none;
    background-color: #ddd;
}
table.table-curriculum tr td {
    padding:15px 8px;
    vertical-align: middle;
}
table.table-curriculum tr td.buttoncell {
    padding-right: 1.5em;
}
.table.table-noborder th, .table.table-noborder td {
    border:none;
}
.table.table-cleanheader th {
    background: none;
}
.panel-info {
    border-color: #aaa;
}
.panel-heading, .panel-info>.panel-heading {
    background-color: #ccc;
    color: #333;
    border-color: #aaa
}
td.media-icons .glyphicon {
    width:2em;
}
td.auth {
    font-style: italic;
}
.nav-tabs > li > a {
    border:1px solid #eee;
}
.faq ol li,
.faq ul li {
    margin-bottom: 15px;
}
.faq ol li .a,
.faq ul li .a {
    margin-bottom: 15px;
    padding:1em 2em 0.5em 2em;
    display: none;
    background-color:#eee;
    opacity: 1;
}
.faq ol li .q a,
.faq ul li .q a {
    text-decoration: none;
}
.faq ol li .q,
.faq ul li .q {
    margin-bottom: 5px;
    font-size: 1.05em;
    cursor:pointer;
}
.glyphicon-large {
    font-size:2em;
    line-height:1.5em;
}
.nav-tabs {
    width:100%;
}
sup {
    position: relative;
    font-size: 65%;
    line-height: 0;
    vertical-align: baseline;
    top: -0.5em;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px; /* makes room for eye */
}

.password-toggler {
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
}
/*-------- COURSE CATALOG ----- */
.course-catalog {
}
.course-catalog .catalog-filter {
    background-color: #f5f5f5;
    padding: 0 15px 15px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom:2em;
}
.course-catalog .catalog-filter label {
    font-weight: normal;
}
.course-card {
    /*margin-bottom:1em;*/
    padding: 15px;
    border-bottom: 1px solid #ccc;
    /*border-radius: 8px;*/
    /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);*/
    background: white;
}
.course-card.card-header-row {
    color:#fff;
    background-color: #28486C;
    padding:5px 15px;
}
a .course-card {
    color:#333;
}
.course-card:hover {
    background-color: #F5F7FA;
}
.course-card.card-header-row:hover {
    background-color: #28486C;
}
.course-card .course-name {
    /*margin-bottom:1em;*/
    color: #28486C;
}
.course-card .course-button {
    padding:0.5em 0;
    vertical-align: middle;
}
.course-card .course-price {
    /*font-weight: bold;*/
}
/*-------- COURSE DETAILS ----- */
.boxproduct {
    border: 1px solid #ddd; /* Optional border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2em auto;
    padding:20px;
}
.boxproduct .cta-section {
    margin-top:3em;
}
/* "Price includes:" ledger under the price headline (views/courses/_priceBreakdown.php).
   The headline is the all-in price; this itemizes the course/registration, any roster filing fee
   and the Online Service Fee, each with an optional info popover. Left/right aligned inside the
   centered CTA column, set off from the headline by a little air. */
.price-breakdown {
    max-width:260px;
    margin:32px auto 0 auto;
    font-size:14px;
    line-height:1.7;
    text-align:left;
}
.price-breakdown-heading {
    margin-bottom:2px;
    font-size:13px;
    color:#666;
}
.price-breakdown-line {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
}
.price-breakdown-label {
    color:#666;
}
.price-breakdown-amount {
    white-space:nowrap;
}
/* a discount line reads green end to end - the same signal the cart gives on its discount rows */
.price-breakdown-line-discount .price-breakdown-label,
.price-breakdown-line-discount .price-breakdown-amount {
    color:#3C763D;
}
/* the "what is this?" affordance (//_shared/_infoPopover): an outlined question mark, lighter than the
   text it follows so it does not compete with it; darkens on hover/focus instead of fading */
.info-popover {
    display:inline-block;
    margin-left:6px;
    padding:0;
    border:0;
    background:none;
    color:#9a9a9a;
    font-size:13px;
    line-height:1;
    vertical-align:baseline;
    cursor:pointer;
    transition:opacity 160ms cubic-bezier(0.2,0.8,0.2,1), transform 160ms cubic-bezier(0.2,0.8,0.2,1);
}
.info-popover:hover,
.info-popover:focus {
    color:#555;
    transform:translateY(-1px);
}
.info-popover:active {
    color:#555;
    transform:translateY(0);
}
.info-popover:focus-visible {
    outline:2px solid currentColor;
    outline-offset:2px;
}
.boxproduct img {
    width: 150px;
    vertical-align: middle;
    margin:0 auto 3em auto;
}
.boxproduct img.imgwide {
    width:200px;
    margin:2.5em auto;
}
.boxproduct img.imgfull {
    width:100%;
    max-width:400px;
    height:auto;
}
.boxproduct .btnparagraph {
    text-align: center;
}
img.wideboximage {
    width:auto;
    max-width: 100%;
    max-width: 400px;
    height:auto;
    display:block;
}
img.sponsorimage {
    width:auto;
    max-width: min(100%, 300px);
    max-height: 120px;
    height:auto;
    display:block;
}
.class-detail label {
    text-decoration: underline;
}
.class-detail {
    margin-bottom: 2em;
}
/* The facts about a class read across the card rather than down it. Stacked, three of
   them ran the left of the card to several times the height of the Register button
   beside it -- a tall ragged column of short lines on one side, an empty half-card on
   the other. auto-fit keeps a class carrying a single fact at the full width it has
   always had, and drops every fact onto its own row on a phone. */
.class-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2em 2.5em;
    /* carries the spacing the individual blocks used to hold, so whatever follows --
       an alert here, or the Register button once the columns stack on a phone -- is
       still clear of the last fact */
    margin-bottom: 2em;
}
.class-details .class-detail {
    margin-bottom: 0;
}
@media (min-width: 768px) {
    /* keeps a long class title off the Register button sitting alongside it */
    #course-details-page #course-box {
        padding-right: 2em;
    }
}
#course-details-page table#table-boxproduct tr td {
    vertical-align: top;
}
#course-details-page .boxproduct ul {
    padding-left:15px;
}
.catalog-message a, .cd-rules a {
    text-decoration: underline;
}
.cd-procalert {
    background-image: url('../images/attention.png');
    background-position: 20px 15px;
    background-repeat: no-repeat;
    padding-left:80px;
    padding-bottom:2em;
}
h1.catalog-heading-state {
    margin:1em 0 0 0;
}
h2.catalog-heading-state {
    margin:0.5em 0 2em 0;
    font-size:1em;
    line-height:1em;
}
#course-details-page table tr td,
.catalog table tr td {
    vertical-align: middle;
}
/* One date is one thing. The cell stacks a multi-day class one date per line, which is
   right, but a date that breaks inside itself -- "Wed, September" over "16" -- reads as
   two half-rows and makes a tidy column look broken. Nowrap costs almost nothing now the
   month is abbreviated: "Wed, Sep 16" is narrower than the wrapped version was. */
.catalog table tr td.catalog-date {
    white-space: nowrap;
}
#course-details-page h1, h1.addcourseHeader {
    margin-bottom:0;
}
#course-details-page h2.subKitName,
h2.addcourseHeader {
    margin:0.5em 0;
    font-size:1em;
    line-height:1em;
}
/* The line under the title on a one-off event: its secondary name. Set close to the
   title so the two read as one heading, and larger than the plain .subKitName, which
   is the credit line on an online course page -- a different thing that keeps its own
   size. Both classes are named here to outrank the #course-details-page h3.subKitName
   rule further down this file. */
#course-details-page h3.subKitName.subKitName--event {
    margin:4px 0 0 0;
    font-size:19px;
    line-height:27px;
}
#course-details-page #course-details,
#course-details-page #course-details-narrow {
    padding:0;
}
#course-details-page #course-content {
    padding:0 15px 0 0;
}
#course-details-narrow #course-content {
    padding:0;
}
#course-details-page .cd-title {
    background-color:#eee;
    color:#333;
    font-size:1.2em;
    margin-bottom:1em;
    padding:0.5em;
}
#course-details-page #course-details-narrow .cd-title {
    margin:2em 0 1em 0;
}
/* Sponsors of a one-off event, under the register button in the side column. */
#course-details-page .cd-sponsor-block {
    border-top:1px solid #ddd;
    margin-top:3em;
    padding-top:1.5em;
}
#course-details-page .cd-sponsor-title {
    color:#666;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.06em;
    margin:0 0 14px 0;
    text-align:center;
    text-transform:uppercase;
}
#course-details-page .cd-sponsor {
    margin-bottom:18px;
    text-align:center;
}
#course-details-page .cd-sponsor:last-child {
    margin-bottom:0;
}
#course-details-page .cd-sponsor img.sponsorimage {
    margin:0 auto;
}
#course-details-page .cd-sponsor-name {
    color:#333;
    font-size:16px;
    line-height:1.5;
}
#course-details-page .cd-sponsor a {
    display:inline-block;
    transition:opacity 160ms cubic-bezier(0.2,0.8,0.2,1), transform 160ms cubic-bezier(0.2,0.8,0.2,1);
}
#course-details-page .cd-sponsor a:hover,
#course-details-page .cd-sponsor a:focus {
    opacity:0.8;
    transform:translateY(-1px);
}
#course-details-page .cd-sponsor a:active {
    opacity:1;
    transform:translateY(0);
}
#course-details-page .cd-sponsor a:focus-visible {
    outline:2px solid currentColor;
    outline-offset:3px;
}
#course-details-page #course-action {
    margin-top:2em;
}
#course-details-page .course-abstract {
    padding-right:1em;
    margin-bottom:2em;
}
#course-details-page .cd-subs, #course-details-page .cd-rules {
    margin-bottom:2em;
}
/* Responsive 16:9 wrapper for the instructor promo video modal */
.promo-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.promo-video-embed iframe,
.promo-video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.promo-video-embed video {
    object-fit: contain;
    background: #000;
    cursor: pointer;
}
.promo-video-hint {
    margin-top: 0.75em;
    color: #555;
    font-style: italic;
}
#course-details-page .row {
    margin:0;
    padding:0;
}
#course-details-page .boxproduct .row {
    margin-right:-15px;
    margin-left:-15px;
}
#course-details-page #course-details-extras, #course-details-page .course-details-extra {
    margin-top:3em;
}
#course-details-expdate {
    margin:3em 0;
    text-align: center;
    padding-top: 3em;
    border-top: 4px solid #eee;
}
#course-details-priceBreakdown {
    margin:2em 0;
    padding-top:3em;
    border-top: 4px solid #eee;
    text-align: center;
}
#course-details-matDetails {
    margin:2em 0;
    padding-top:3em;
    border-top: 4px solid #eee;
}
#course-details-creditBox {
    border-top: 4px solid #eee;
    padding-top:3em;
    margin:2em 0;
    text-align: center;
}
#course-details-creditText {
    margin-bottom:1em;
}
#course-details .cd-subs .app-label {
    width: 15em;
    display:block;
    vertical-align: top;
    margin-top:0.5em;
}
#course-details .cd-subs .app-value {
    display:block;
    vertical-align: top;
    margin-top:0.5em;
}
.cd-specialnote {
    margin:1em 0;}
.seal-image {
    width:125px;
    margin:3em auto 3em auto;
}
#course-filter {
    margin-top:2em;
    margin-bottom:2em;
}
h2.section-header {
    margin:2em 0 0 0;
    background-color:#ddd;
    color:#333;
    padding:5px 8px;
    height:inherit;
    line-height:inherit;
    font-size: 1.25em;
}
h2 .small {
    font-weight: 500;
    line-height: initial;
    color: initial;
}
h3 .small {
    font-weight: 500;
    line-height: initial;
    color: initial;
}
td.mycourses-name, td.mycourses-credit {
    vertical-align: middle !important;
}
td.mycourses-credit .small {
    margin-bottom:0;
}
.mycourses-extra {
    color:#666;
    font-size:0.75em;
}
.mycourses-extra a {
    text-decoration: underline;
}
.mycourses-extra .glyphicon {
    color:#999;
    margin-right:0.5em;
}
#mycourses-menublock {
    margin-top:3em;
}
#mycourses-menublock a.mycourses-menuitem {
    border:2px solid lightgray;
    color:#28486C;
    text-align:center;
    padding:1em 0;
    margin-bottom:1em;
    display:block;
    text-decoration: none;
}
#mycourses-menublock a.mycourses-menuitem:hover {
    border-color:#28486C;
}
#mycourses-menublock a.mycourses-menuitem .glyphicon {
    font-size: 1.15em;
}
a.breadcrumblink {
    margin-top:3em;
}

/* COMPLETED COURSES TAB */
#myCourses .boxproduct {
    font-size:16px;
}
#myCourses .boxproduct h2 {
    margin:1em 0 0.5em 0;
    color:#333;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.3;
}
#myCourses .boxproduct .completed-date {
    font-size:0.85em;
    margin-bottom:2em;
    color:#666;
}
#myCourses .boxproduct {
    padding:0.5em 1em 1.5em 1em;
}
#myCourses .boxproduct .completedrow {
    margin-bottom: 2em;
}
#myCourses .boxproduct .completedcourse {
    background:none;
    color:#666;
    font-weight:normal;
    font-size:0.85em;
    border-bottom:1px solid #ddd;
    margin-bottom:0.5em;
}
#myCourses .boxproduct .linkblock {
    display:inline-block;
    margin-right:3em;
    margin-top:1.5em;
    vertical-align: top;
}
#myCourses .boxproduct .course-docs-links {
    font-size:0.85em;
    line-height:2em;
    vertical-align: baseline;
}
#myCourses .disabledlink {
    opacity:0.75;
}
/* empty tab -- the "nothing here yet" line keeps the same card as the course blocks */
#myCourses .boxproduct.boxproduct-empty {
    font-style:italic;
    padding:2em 1em;
}

/* CURRICULUM TAB -- one .boxproduct per curriculum, same rows as the completed courses tab.
   The head stacks the "Completed on" line and the certificate link, left-aligned. */
#myCourses .boxproduct .curriculum-head {
    margin-bottom:2em;
}
#myCourses .boxproduct .curriculum-head .completed-date {
    margin-bottom:0;
}
#myCourses .boxproduct .curriculum-status-pending {
    color:#999;
    font-style:italic;
}

.course-section { margin-bottom:3em; }
#myCourses .course-section table {margin-top:0em;}
#myCourses .course-section thead tr th {background:none;font-weight:normal;border-bottom:3px solid lightgray}
#myCourses .course-section tr {line-height:2em;}
#myCourses .course-section thead tr:hover {background: none;}
#myCourses .course-section td {border-bottom:1px solid lightgray;line-height:2em;vertical-align: top;padding-top:18px;padding-bottom:18px;}
#myCourses .course-section tr:last-of-type td {border-bottom:none;}
#myCourses .course-section .tableclassroom tr:hover {background-color:inherit;}
#myCourses .course-section .tableclassroom td {
    line-height: 2em !important;
}
#myCourses a.mainButton {
    display:block;
    width:12em;
    margin-top:0.5em;
    margin-bottom:1em;
}
#myCourses .class-canceled {
    color:#666;
    font-style:italic;
}
#myCourses td.buttonLink {
    vertical-align: middle;
    padding-top:25px;
    padding-right:2em;
}
#myCourses tr.class-hasfiles td {
    border-bottom:none;
    vertical-align: top;
}
#myCourses tr.classFiles td {
    border-top:none;
}
#myCourses .calendar-dropdown a {
    text-decoration: none;
}
ul.nolist {
    list-style:none;
    line-height:50px;
    position:relative;
    padding-left:0;
}
.invoice {
    padding:1em;
    margin:0.75em 0;
}
.invoice-total {
    font-weight: bold;
    font-size:1.5em;
    margin-bottom:1.5em;
    margin-top:0.5em;
}
.dash-extras {
    margin-top:1.5em;
}
.dash-extras span {
    margin-left:1em;
}
.cd-rules .state {
    font-weight:bold;
    margin-bottom:1em;
}
.cd-rules .state:nth-of-type {
    font-weight:bold;
    margin-top:1em;
}
.cd-rules .state-sub {
    font-weight:normal;
    margin-left:1em;
}
.cd-rules li {
    margin-bottom:0.5em;
}

/* The way out of the Available Credit tab, on both the public class page and the join
   page: the tab lists what the class awards, and whether a given state has approved it,
   under which course number, is answered per state and per date on the approval-status
   page. So it closes the tab as a doorway, not another line of credit -- ruled off from
   the list above it, reading as a link, carrying the arrow that says it leaves for a new
   tab. Colour comes from properties the join page remaps to its own tokens. */
#course-details .approval-link {
    --approval-ink: #232c38;
    --approval-accent: #35485f;
    --approval-rule: #e3e7ec;
    margin: 20px 0 0 0;
    padding: 14px 0 0 0;
    border-top: 1px solid var(--approval-rule);
}

/* Nothing above it to be ruled off from -- the heading's own banner is separation enough. */
#course-details .cd-title + .approval-link {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#course-details .approval-link > a {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--approval-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#course-details .approval-link > a:hover,
#course-details .approval-link > a:focus-visible,
#course-details .approval-link > a:active {
    color: var(--approval-ink);
    text-decoration-thickness: 2px;
}

/* Clicking the link leaves it focused, so returning from the new tab found Bootstrap's
   `a:focus {outline:5px auto -webkit-focus-ring-color}` ring still drawn around it. Same
   fix as the tabs above: the ring is worth keeping only for someone arriving by keyboard,
   so it moves to :focus-visible and takes the link's own colour. */
#course-details .approval-link > a:focus {
    outline: none;
}

#course-details .approval-link > a:focus-visible {
    outline: 2px solid var(--approval-accent);
    outline-offset: 3px;
}

#course-details .approval-link > a > i {
    flex: 0 0 auto;
    font-size: 12px;
    transition: transform 220ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

#course-details .approval-link > a:hover > i,
#course-details .approval-link > a:focus-visible > i {
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    #course-details .approval-link > a > i {
        transition: none;
    }
    #course-details .approval-link > a:hover > i,
    #course-details .approval-link > a:focus-visible > i {
        transform: none;
    }
}
.ceu-reqs {
    margin:2em 0;
    text-align: center;
}

.ceu-reqs table {
    width:70%;
    margin:0 auto;
}
#tabsmenu {
    margin-bottom:1em;
    margin-top:2em;
}
#tabsmenu li {
    margin-right:5px;
}
#tabsmenu li a {
    background-color:#eee;
    color:#333;
    margin-top:5px;
}
#tabsmenu li.active a {
    background-color:#fff;
    font-weight: bold;
}
#tabsmenu li a:hover {
    background-color:#ddd;
}
#tabsmenu li.active a:hover {
    background-color:#fff;
}
#tabsmenu.course-details-tabs li a:hover {
    color:#333;
}
#tabsmenu.course-details-tabs li.active a:hover {
    color:inherit;
}
/* The tabs are <a href="#">, so clicking one left Bootstrap's
   `a:focus {outline:5px auto -webkit-focus-ring-color}` ring drawn around it until the
   next click. That ring only earns its keep for someone arriving by keyboard, so it
   moves to :focus-visible and takes the tab's own colour instead of Chrome's blue. */
#tabsmenu li a:focus {
    outline:none;
}
#tabsmenu li a:focus-visible {
    outline:2px solid currentColor;
    outline-offset:-2px;
}

.details-row {
    display: flex;
    align-items: center; /* Centers content vertically */
    flex-wrap: wrap; /* Ensures responsiveness */
}
.choice-row {
    display: flex;
    justify-content: left;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.choice-col {
    flex: 1 1 300px;
    max-width: 400px;
    display: flex;
}
.choice-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}
.choice-box h2 {
    margin-top: 0;
}
.choice-box h3 {
    margin-top: 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #999;
}
.choice-box p {
    margin: 2em 0;
    color: #333;
}
.choice-box a {
    margin:2em 0;
}
#myCourses .choice-box a.mainButton {
    width: 100%;
    white-space: normal;
}

.covid-note {
    margin:0 0 2em 0em;
    padding:1em;
    background-color:#f0f0f0;
}
#attestationpage input[type="checkbox"] {
    transform: scale(1.5); /* Adjust the scale factor as needed */
    margin: 5px; /* Adjust spacing */
}
img.profile-photo {
    /* Square box so the 50% radius is a circle and object-fit has something to crop
       into: a portrait headshot used to render as a 160-wide ellipse of any height.
       max-height repeats the cap for browsers without aspect-ratio. */
    max-width: 160px;
    width:100%;
    aspect-ratio: 1 / 1;
    max-height: 160px;
    height:auto;
    border-radius: 50%;
    border: 2px solid #ddd;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.instructor-bio-container {
    margin-bottom: 20px;
}
.instructor-bio-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines */
    -webkit-box-orient: vertical;
    transition: max-height 0.3s ease-in-out;
}
.instructor-bio-text.expanded {
    -webkit-line-clamp: unset; /* Show full text when expanded */
}
.readmore-toggle-btn {
    display: inline-block;
    color: #337ab7;
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
}
ul.fileList {
    list-style: none;
    margin:0;
    padding: 0 0 0 0px;
}
#instructorFiles ul.fileList {
    padding:0;
}
ul.fileList li {
    margin:1em 0 1em 0;
    padding: 0;
    clear:both;
}
ul.fileList li .fileImage {
    float:left;
    width:50px;
    margin-top:-2px;
}
#filesDiv {
    margin-top:3em;
}

#filesDiv h4, #creditsDiv h4 {
    text-decoration: underline;
    margin:1em 0 1.5em 0;
}
ul.fileList li a.fileText {
}

/* ---------------------------------------------------------------------------
   DOWNLOAD ROWS  (class detail pages and the join page)

   Scoped to #course-details-page, which both of those carry and nothing else
   does: ul.fileList is also the markup on the class stage views and in the
   admin and instructor portals, and those keep the .fileImage/.fileText rows
   above. Only an anchor carrying .fileItem is styled here.

   Neutral by default so the rows read as deliberate under any of the 57
   themes; a theme that wants its own accent overrides these properties.

   Hover and press are carried by the row's own colour and an underline on the
   name -- no fill behind the row, and the icon holds still. */
#course-details-page {
    --cd-file-accent: #35485f;
    --cd-file-strong: #16202c;
    --cd-file-press: #000000;
    --cd-file-rule: #e3e7ec;
}

#course-details-page ul.fileList li a.fileItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    margin: 0 -10px;
    border-radius: 4px;
    color: var(--cd-file-accent);
    text-decoration: none;
}

#course-details-page ul.fileList li + li a.fileItem::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    border-top: 1px solid var(--cd-file-rule);
}

#course-details-page ul.fileList li a.fileItem:focus-visible {
    outline: 2px solid var(--cd-file-accent);
    outline-offset: 1px;
}

#course-details-page ul.fileList li a.fileItem .fileIconWrap {
    flex: 0 0 22px;
    width: 22px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: inherit;
}

#course-details-page ul.fileList li a.fileItem .fileName {
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: inherit;
}

#course-details-page ul.fileList li a.fileItem:hover,
#course-details-page ul.fileList li a.fileItem:focus-visible {
    color: var(--cd-file-strong);
}

#course-details-page ul.fileList li a.fileItem:active {
    color: var(--cd-file-press);
}

#course-details-page ul.fileList li a.fileItem:hover .fileName,
#course-details-page ul.fileList li a.fileItem:focus-visible .fileName {
    text-decoration: underline;
}

@media (max-width: 767px) {
    #course-details-page ul.fileList li a.fileItem .fileName {
        font-size: 15px;
        line-height: 21px;
    }
}
.warningText {
    color:#a94442;
    font-weight: bold;
}
.buttonStateSelectDiv {
    margin-top:0.25em;
    color:#A94442;
    font-weight:600;
    text-align: left;
}
/* bootstrap callouts */
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}
@media(max-width:768px){
    .catalog-filter {
        margin-top:2em;
    }
    /* --- MyCourses Dashboard Sub-Navbar --- */
    #myCourses .dashboard-subnav .navbar-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 0; /* Reset Bootstrap's default negative margins */
        border-top: 1px solid #eee; /* Optional: separates from header */
    }
    #myCourses .dashboard-subnav .navbar-nav > li {
        flex: 0 0 auto;
        display: block;
        float: none; /* Override Bootstrap floats */
    }
    #myCourses .dashboard-subnav .navbar-nav > li > a {
        padding: 15px 20px; /* Bigger touch target */
        line-height: 20px;
    }
    #myCourses .dashboard-subnav .navbar-nav::-webkit-scrollbar {
        display: none;
    }
    #myCourses .dashboard-subnav .navbar-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #myCourses .dashboard-subnav {
        position: relative;
    }
    #myCourses .dashboard-subnav::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, rgba(248,248,248,0), rgba(248,248,248,1));
        pointer-events: none;
    }
}
@media (min-width: 768px) {
    #course-details-page #course-details {
        margin-top:2em;
        /*border-right:4px solid #eee;*/
    }
    #course-details-extras-narrow .course-details-extra:first-of-type {
        padding-left:0;
    }
    #course-details-extras-narrow .course-details-extra:last-of-type {
        padding-right:0;
    }
    #course-details .cd-subs div:has(> .app-label) {
        display:flex;
        align-items:flex-start;
        gap:2em;
    }
    #course-details .cd-subs .app-label {
        flex:0 0 auto;
        display:block;
    }
    #course-details .cd-subs .app-value {
        flex:1 1 auto;
        display:block;
        min-width:0;
    }
    h1.kitName {
        margin-top: 0;
        padding-top: 0;
        color:#333;
    }
    #course-details-page h3.subKitName, h2.catalog-heading-state, h2.addcourseHeader {
        font-size:1em;
        line-height:2em;
        margin-top: 1em;
        /*font-style: italic;*/
    }
    .boxproduct .cta-section {
        margin-top:0em;
    }
    .boxproduct .btnparagraph {
        text-align: left;
    }
    img.wideboximage {
        max-width: 400px;
        margin:0;
    }
    img.sponsorimage {
        max-width: min(100%, 200px);
    }
    a.breadcrumblink {
        margin-top:1em;
    }
}
@media (min-width: 992px) {
    #myCourses .boxproduct .completedrow {
        margin-bottom: 0;
    }
}
@media (min-width: 1200px) {
    .course-card .course-hours {
        text-align: center;
    }
    .boxproduct img {
        margin:0;
    }
    img.wideboximage {
        max-width: 500px;
    }
    img.sponsorimage {
        max-width: min(100%, 300px);
    }
}

/* Store card form label size reset — themes with a larger body font-size
   (e.g. 16px) cause labels to overflow their column and wrap */
#store-card-form label {
    font-size: 14px;
}

.class-canceled-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 1em 0 2em 0;
    font-size: 16px;
    line-height: 1.7;
}
.class-canceled-notice > i {
    flex-shrink: 0;
    margin-top: 0.2em;
    font-size: 20px;
}

/* Marketing opt-in checkboxes (signup, My Account, re-consent modal).
   The checkbox sits in a one-line-tall box and is centered within it, so it
   aligns to the FIRST line of consent text whether the text is one line or wraps. */
.marketing-optin .checkbox {
    margin-top: 0.5em;
}
.marketing-optin .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-weight: normal;
    line-height: 1.43;
}
.marketing-optin .checkbox label .mkt-cb {
    display: flex;
    align-items: center;
    height: 1.43em; /* one line tall -> checkbox centers on the first line of text */
    flex: 0 0 auto;
}
.marketing-optin .checkbox label .mkt-cb input {
    margin: 0;
    position: static;
}
.marketing-optin .consent-text p {
    margin: 0;
}
.marketing-optin .consent-text p + p {
    margin-top: 0.4em;
}

/* Inline email opt-in prompt on the course dashboard (re-capture existing users).
   Theme-agnostic: the submit button uses each theme's own .btn-primary brand color. */
.marketing-prompt {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 1.5em 0;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.marketing-prompt-icon {
    font-size: 24px;
    color: #64748b;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.marketing-prompt-body {
    flex: 1;
    min-width: 0;
}
.marketing-prompt-body .mp-title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.marketing-prompt-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.marketing-prompt-options .mp-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
}
.marketing-prompt-options .mp-option .mp-radio {
    display: flex;
    align-items: center;
    height: 1.5em; /* one line tall -> radio centers on the first line of text */
    flex-shrink: 0;
}
.marketing-prompt-options .mp-option .mp-radio input {
    margin: 0;
    position: static;
}
.marketing-prompt-options .mp-option .consent-text p {
    margin: 0;
}
.marketing-prompt-actions {
    display: flex;
    gap: 8px;
}
/* COLLAPSED MENU ICONS ------------------------------------------------------------------ */
/* The account actions and the cart that close out the collapsed menu, in NavMenu and in
   userMenuList. The icons are what set those rows apart from the content links above:
   those carry none, so the rows that do read as their own group.

   Keyed off the icon's own class, not the row's, because the rows come from two different
   builders and are wrapped differently.

   Don't add a rule between the two groups. It was tried, and because the rows already
   sit flush against one another with hairline separators, the gap it needs reads as the
   menu breaking in half rather than as a divider. */
.nav-menu-icon {
    margin-right: 8px;
    opacity: 0.85;
}