/*
******************************************************************************************************************************************
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* SAC Program Map Report *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
******************************************************************************************************************************************
0. Import Links - Google Fonts
1. CSS: Custom Styles
2. CSS: Responsive Styles
******************************************************************************************************************************************
*/

/* 
******************************************************************************************
0.Import Links - Google Fonts
****************************************************************************************** 
*/

/* 
******************************************************************************************
1. CSS: Custom Styles
******************************************************************************************
    A. Root Variables (RV)
    B. General        (GN)
    C. Report Header  (RH)
    D. Report Content (RC)
    E. Report Footer  (RF)
******************************************************************************************
*/

/* ---------------------------------------------------------------------------------
   A. Root Variables (RV)
--------------------------------------------------------------------------------- */
:root {
    /* Primary (Main) */
    --theme-main:   #9D1414;
    /* Secondary (Accent/Complementary) */
    --theme-accent: #FFB500;
    --theme-comp:   #9D9FA2;
    /* Neutrals */
    --theme-white:  #FFFFFF;
    --theme-black:  #000000;

    /* Alternates (Shades/Tints) */
    --theme-main-dk:   #720F0F;
    --theme-accent-dk: #E1A000;
    --theme-comp-dk:   #707276;

    --theme-comp-lt:   #BFC0C2; 

    --theme-border:    #DDDEE0;

    /* Conditions */
    --condition-a:     #1D71B9;
    --condition-o:     #EF8014;
}

/* ---------------------------------------------------------------------------------
   B. General (GN)
--------------------------------------------------------------------------------- */
/* GN: Environment of Generated Report */
.system-environment-display {
    text-align: left;
    font-size: 14px;
    line-height: 1.25rem;
    color: var(--theme-main);
}

/* GN: Links */
a:link {
    text-decoration: underline !important;
    color: var(--theme-main);
}
a:hover, a:visited:hover {
    text-decoration: underline;
    color: var(--theme-main-dk) !important;
} 
a:visited {
    text-decoration: none;
    color: var(--theme-main) !important;
} 
a:active {
    text-decoration: none;
}

/* Ordered Lists and Indented Text */
.px-2 {
    margin-left: 1.25rem !important;
}
.list-group.px-2 { 
    margin-left: 2rem !important;
}

/* Labels */
.font-weight-bold {
    font-weight: 700 !important;
}
.font-italic {
    font-style: italic !important;
}
.font-weight-bold.font-italic, 
.req-type {
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------------
   C. Report Header (RH)
------------------------------------------------------------------------------------
    - C1. RH Top    (RHT): Top Nav      (TN)
    - C2. RH Bottom (RHB): Program Info (PI)
--------------------------------------------------------------------------------- */
.report-header.px-5.py-5 {
    padding-top:    0px  !important;
    padding-right:  0px  !important;
    padding-left:   0px  !important;
    padding-bottom: 2rem !important;
}

/* -----------------------------------------------------------------------
   - C1. RH Top (RHT): Top Nav (TN)
----------------------------------------------------------------------- */
/* RHT: Entire */
.header-top {
    background-color: var(--theme-white);
}
/* TN: Client Logo - Image Settings */
.retina-image.img-fluid {
    display: flex;
    justify-self: flex-start;
    max-width: 25%;
}

/* TN: College Catalog - Button Settings */
a.btn.btn-primary {
    color:            var(--theme-black) !important;
    background-color: var(--theme-accent) !important;
    border: 1px solid var(--theme-accent-dk) !important;
    padding-top:      15px;
    padding-left:     25px;
    padding-right:    25px;
    padding-bottom:   15px;
    font-weight:      500;
    text-decoration:  none !important;
}
a.btn.btn-primary:hover {
    color: var(--theme-black);
    background-color: var(--theme-accent-dk) !important;
    text-decoration: none;
}
a.btn.btn-primary:active {
    color: var(--theme-black);
    background-color: var(--theme-accent-dk) !important;
}

/* -----------------------------------------------------------------------
   - C2. RH Bottom (RHB): Program Info (PI)
----------------------------------------------------------------------- */
/* RHB: Entire */
.header-bottom {
    background-color: var(--theme-main);
}

/* RHB: Angled Bottom Shape */
.clip-angle-bottom {
    clip-path: polygon(100% 0, 100% calc(100% - 36px), 33% 100%, 0 calc(100% - 20px), 0 0 );
    padding-bottom: 36px !important;
}
.after-clip-angle-bottom {
    position: relative;
    top: -36px;
} 
.after-clip-angle-bottom:before {
    content: '';
    display: block;
    height: 36px;
}
    /* -------------------------------------------------------------
       PI: Program Title 
    ------------------------------------------------------------- */
    .display-4 {
        color: var(--theme-white);
        font-weight: 800 !important;
    }
    /* -------------------------------------------------------------
       PI: Program Subtitle - List of Links 
    ------------------------------------------------------------- */
    .list-inline-item {
        color: var(--theme-white);
        font-weight: 400;
    }
    .list-inline-item > a {
        color: var(--theme-white) !important;
        text-decoration: none !important;
    }
    .list-inline-item > a:hover {
        color: var(--theme-white) !important;
        text-decoration: underline !important;
    }
    .printer-icon {
        margin-left: 0.25rem;
    }

/* ---------------------------------------------------------------------------------
   D. Report Content (RC)
------------------------------------------------------------------------------------
    - D1. RC 1: Program Summary              (PS)
    - D2. RC 2: Program Map - Title Row      (TR)
    - D3. RC 3: Program Map - Program Blocks (PB)
--------------------------------------------------------------------------------- */
.content-wrapper.container-fluid {
    padding-left: 15%;
    padding-right: 15%;
}
/* -----------------------------------------------------------------------
   - D1. RC 1: Program Summary (PS)
--------------------------------------------------------------------------
    -- 1a. PS Item 1: Program Map Instructions  (PMI)
    -- 1b. PS Item 2: Program Description       (PD)
    -- 1c. PS Item 3: Program Learning Outcomes (PLO)
    -- 1d. Accordion Buttons                    (AB)
----------------------------------------------------------------------- */
.course-blocks-wrapper.container-fluid.Top-Section-Wrapper {
    padding: 0px;
    margin-left: 0px;
}
/* All Content Paragraphs */
.row.accordion-body > p {
    margin-bottom: 0.5rem;
}
    /* ------------------------------------------------------------- 
       -- 1a. PS 1: Program Map Instructions (PMI) 
    ------------------------------------------------------------- */
    #program-map-instructions.accordion-item {
        padding: 0px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--theme-border);
    }
    /* PMI: Header */
    .row.accordion-header.program-map-instructions-header {
    }
    /* PMI: Content */
    .row.accordion-body.program-map-instructions-content {
        margin-top: 0px;
    }
    /* ------------------------------------------------------------- 
       -- 1b. PS 2: Program Description (PD)
    ------------------------------------------------------------- */
    #program-description.accordion-item {
        padding: 0px;
        margin-bottom: 5px;
    }
    /* PD: Header (PDH) */
    #header-program-description.accordion-header {
        padding-bottom: 0px;
        margin-bottom: 5px;
    }
        /* PDH: Text */
        .col-11.p-0.text-start.program-description-header {
            font-weight: 800;
            font-size: 20px;
        }
    /* PD: Content (PDC) */
    #content-program-description.accordion-collapse.collapse {
        margin-top: 0px;
        font-size: 16px;
    }
    #content-program-description.accordion-collapse.collapse.show {
        margin-top: 0px;
        font-size: 16px;
    }
        /* PDC: Text */
        .row.accordion-body.program-description-content {
        }
        .row.accordion-body.program-description-content ol, 
        .row.accordion-body.program-description-content ul {
            margin-left: 2rem;
        }
    /* ------------------------------------------------------------- 
       1c. PS 3: Program Learning Outcomes 
    ------------------------------------------------------------- */
    #program-learning-outcomes.accordion-item {
        margin-top:     10px;
        border-top:     1px solid var(--theme-border);
        border-bottom:  1px solid var(--theme-border);
    }
    /* Accordion Headings */
    .pd-heading {
        font-weight: 800;
        font-size:   34px;
        margin-top:  5px;
    }
    .plo-heading {
        font-weight:    800;
        font-size:      34px;
        margin-top:     10px;
        padding-top:    10px;
        padding-bottom: 10px;
    }
    .col-11.p-0.text-start:hover {
        text-decoration: underline;
    }
    /* PLO Header (PLH) */
    #header-program-learning-outcomes.accordion-header {
    }
        /* PLH: Text */
        .col-11.p-0.text-start.program-learning-outcomes-header {
            margin-bottom: 5px;
        }
    /* PLO Content (PLC) */
    #content-program-learning-outcomes.accordion-collapse {
        margin-left: 0.25rem;
    }
        /* PLC: Text */
        .row.accordion-body.program-learning-outcomes-content {
            margin-top: 15px;
            margin-left: 0px;
        }
    /* PLO Grid (PLG) */
    .plo-comp-grid {
        list-style-type: none;
        counter-reset:   outcomes-counter 0;
        margin-left:     -2px;
    }
    .plo-comp-grid.d-flex.flex-wrap {
        padding: 0px;
        padding-bottom: 20px;
    }
        /* PLG: Columns */
        .plo-comp-grid .plo-comp-grid-col {
            counter-increment:  outcomes-counter 1;
            position:           relative;
            padding:            1.5rem;
            padding-left:       calc(60px + 1.5rem);
            width:              100%;
            border:             2px solid var(--theme-accent);
            margin-top:         -2px;
        }
        .plo-comp-grid .plo-comp-grid-col:before {
            content:            counter(outcomes-counter);
            position:           absolute;
            background-color:   var(--theme-accent);
            color:              var(--theme-black);
            font-size:          2.25rem;
            text-align:         center;
            width:              60px;
            height:             60px;
            left:               0;
            top:                0;
            font-weight:        900;
            line-height:        60px;
        }
    /* ------------------------------------------------------------- 
       -- 1d. Accordion Buttons (within each accordion header) 
    ------------------------------------------------------------- */
    .accordion-button {
    } 
    .accordion-button::before{
            font:           var(--fa-font-sharp-solid);
            content:        "\f2d3" !important;
            color:          var(--theme-main);
            object-fit:     cover;
            margin-right:   10px;
            font-size:      30px;
            border-radius:  0px;
            transform:      rotate(0deg);
      }
      .accordion-button.collapsed::before{
            content:        "\f0fe" !important;
            color:          var(--theme-main);
            object-fit:     cover;
            margin-right:   10px;
            font-size:      30px;
            border-radius:  0px;  
      }
      .accordion-button.collapsed:hover::before {
            color: var(--theme-main-dk);
      }
      .accordion-button:active::before{
            transform: rotate(90deg);
            transition: 0.2s;
      }

/* -----------------------------------------------------------------------
   D2. Program Map: Title Row (TR)
----------------------------------------------------------------------- */
#program-maps {
    margin-top:    20px;
    margin-bottom: 20px;
}
/* TR: Heading */
.g-copy {
    padding:       0px;
    margin-bottom: 15px;
    font-weight:   800;
    font-size:     34px;
}
/* TR: Icon Row */
.row > .col-auto {
    padding-left: 5px !important;
}

/* -----------------------------------------------------------------------
   D3. Program Map: Program Blocks (PB) - Program Map Content (PMC)
--------------------------------------------------------------------------
    -- 3a. PMC Top:    Map Header    (MH)
    -- 3b. PMC Rows:   Course Blocks (CB)
    -- 3c. PMC Bottom: Map Footer    (MF)
----------------------------------------------------------------------- */
.Program-Block-Wrapper {
    padding: 0px;
}
    /* ------------------------------------------------------------- 
       -- 3a. PMC Top: Map Header (MH) 
    ------------------------------------------------------------- */
    .map-header {
    }
    /* ------------------------------------------------------------- 
       -- 3b. PMC Rows: Course Blocks (CB) 
    ----------------------------------------------------------------
        ~ b1. CB Top:     CB Header            (CBH) - Block Title (Semester) & Units
        ~ b2. CB Content: Header (in block)    (CBC)      
        ~ b3. CB Content: Course Block Entries (CBE) - Items in Each Semester
        ~ b4. CB Bottom:  CB Footer            (CBF)
    ------------------------------------------------------------- */
    /* All CBs in Program Map */
    .course-blocks-wrapper.container-fluid {
        padding: 0px;
        margin-left: 10px;
    }
    /* Individual CB Rows */
    .row.course-block-wrapper.pt-5.align-middle {
        margin-bottom: 20px !important;
        padding-top:   0px !important;
    }
     /* ------------------------------------------------------
       ~ b1. CB Top: CB Header (CBH) - Block Title (Semester) & Units
     ------------------------------------------------------ */
    .course-block-header {
        background-color: var(--theme-main);
        display:          flex;
        justify-content:  center;
        align-items:      center;
        margin-top:      -15px;
    }
    /* CBH: Wrapper */
    .course-block-header-wrapper {
        color: var(--theme-white);
        padding: 30px !important;
    }
    /* CBH: CB Title */
    .course-block-title {
        font-weight:    800;
        padding-bottom: 15px;
        margin-bottom:  15px;
        border-bottom:  1px solid var(--theme-white);
    }
    /* CB Header: CB Unit Range */
    .course-block-unit-range {
        font-weight: 600;
    }
    /* ------------------------------------------------------
       ~ b2. CB Content: Block Header (within the block)
    ------------------------------------------------------ */
    .course-block-content .course-block-header {
        margin-top:  0px;
        margin-left: 3px;
    }
    /* No bottom margin on last paragraph in header */
    .course-block-content .course-block-header > p:last-of-type {
        margin-bottom: 0 !important;
    }
    /* Block Header will not display if no content */
    .course-block-content .course-block-header:empty {
        display: none;
    }
    /* Padding for content inside Block Header */
    .course-block-content .course-block-header > * {
        padding: 10px;
        color:   var(--theme-white) !important;
    }
    .course-block-content .course-block-header a {
        color: var(--theme-white) !important;
    }
        .course-block-content .course-block-header a:hover {
            color: var(--theme-accent) !important;
        }
    /* ------------------------------------------------------
       ~ b3. CB Content: Course Block Entries (CBE) - Items in Each Semester
    ---------------------------------------------------------
        ~~ 3aa. CBE Content: Cards
        ~~ 3bb. CBE Content: Content Detail (Card Modal)
        ~~ 3cc. CBE Content: Icons
        ~~ 3dd. CBE Content: Conditions (and/or)
    ------------------------------------------------------ */
    /* ------------------------------------------------
       ~~ 3aa. CBE Content: Cards 
    ------------------------------------------------ */
    /* Cards - Entire Row */
    .row.row-cols-2.row-cols-sm-3.row-cols-lg-4 {              
    }
    /* Cards - Entire Row - 100% height (only if Block Header and Block Footer have no data) */
    .course-block-header:empty + 
    .row.row-cols-2.row-cols-sm-3.row-cols-lg-4:has(+.course-block-footer:empty) {
        height: 100%;
    }
    /* Individual Card: Entire  */
    .col.p-0.m-0 {
        margin-top: 5px !important;
        margin-left: 15px !important;
    }
    /* Individual Card (Getting Started) - 100% width */
    .col.p-0.m-0:has(.blockEntry-button .gs-card) {
        width: 100%;
        margin-top: 0 !important; 
        margin-bottom: 0 !important;
    }

    /* Button: Open Card Details */
    .button.blockEntry-button.p-1 {
        padding-left:   0 !important;
        padding-top:    0.5rem !important;
        padding-bottom: 0 !important;
    }
        /* Button for static Getting Started 'block' - not clickable, although links within it are */
        .button.blockEntry-button.p-1:has(.blockEntry-card .gs-card) {
            pointer-events: none;
            padding-top:    0 !important;
            padding-bottom: 0 !important;
        }
        .gs-card a {
            pointer-events: auto;
        }
        /* Getting Started text - no bottom margin on last paragraph of text */
        .gs-card p:last-of-type {
            margin-bottom: 0 !important;
        }
    /* Card Content (CC) */
    .card.blockEntry-card {
        border-color: var(--theme-main-dk);
        transition: box-shadow 0.3s, border-color 0.3s;
    } 
    .card.blockEntry-card:hover {
        box-shadow: 6px 6px var(--theme-main-dk);
    }
        /* CC: Card Header */
        .card-header {
            background-color: var(--theme-main) !important;
        }
        /* CC: Card Body */
        .card-body {
        }
            /* Card Body: Course or Group Title */
            .card-title {
                font-weight: 800;
                font-size:   18px;
                margin-top:  5px;
            }
            /* Card Body: Course or Group Units */
            .card-text {
                font-weight: 600;
                font-size:   14px;
            }
    /* ------------------------------------------------ 
       ~~ 3bb. CBE Content: Content Detail (Card Modal - CM)
    ------------------------------------------------ */
    /* Entire Screen: Modal Background */
    .modal.fade {
        background-color: rgba(var(--theme-main), 0.1) !important;
        transition: none;
    }
    /* CM: Entire Container - Modal Pop-Up (MP) */
    .modal-dialog {
    }
    /* MP: Modal Card */
    .modal-content {
        opacity: 1 !important;
    }
    /* Modal Card Header (MCH) */
    .modal-header {
        background-color: var(--theme-border) !important;
    }
        /* MCH: Title */
        .modal-title {
            font-weight: 800;
            font-size:   21px;
            line-height: 0.8;
            color:       var(--theme-black);
        }
    /* Modal Card Content (MCC) */
    .modal-body {
    }
        /* -------------------------------------
            MCC: Header 
        ------------------------------------- */
        .entry-header {
        }
        /* -------------------------------------
            MCC: Course Summary (CS) 
        ------------------------------------- */
        .course-block-entry-summary {
            padding-left:  15px;
            padding-right: 15px;
        }
        .course-block-entry-summary > h4 {
            font-weight: 800;
            font-size:   18px;
        }
            /* CS: Course Description */
            .description {
                margin-bottom: 10px;
                font-weight:   400;
                font-size:     15px;
            }
            /* CS: Course Detail (CDe) */
            .course-Detail {
            }
                /* CDe: List */
                .list-group.px-2 {
                }
                /* List Items: Requisites */
                .list-group-item-compact {
                }
                .lim-enroll > p:last-of-type {
                    margin-bottom: 0;
                }
                /* List Items: Transfer */
                .list-group-item-compact.py-2 {
                    list-style-type: none;
                    margin-left:    -8px;
                }
            /* CS: Course Footer */
            .course-footer {
                font-size: small;
            }
        /* ------------------------------------- 
            MCC: Groups 
        ------------------------------------- */
        /* Group Course Blocks */
        .course-block-entry.container-fluid {
            margin-top: 3px;
        }
            /* Group Course Headers */
            .course-block-entry-title-column.col-7.col-xl-9 {
                font-weight: 800;
                font-size:   18px;
                padding:     0px;
            }
            /* Group Course Unit Subtitles */
            .course-block-entry-units.text-right.col-2.col-xl-1 {
                font-weight:  600;
                padding:      0 0 0 2rem;
            }
            /* Group Course Button: Expand/Collapse */
            .course-block-entry > .accordion-item > .accordion-header > .accordion-button::before {
                font-size: 35px;
            }
            /* Group Course Summary */
            .course-block-entry-expandable-row {
                margin-left: 30px;
            }
        /* ------------------------------------- 
            MCC: Footer 
        ------------------------------------- */
        .entry-footer {
        }
    /* ------------------------------------------------
       ~~ 3cc. CBE Content: Icons 
    ------------------------------------------------ */
    /* Icons: Wrapper */
    .icon-wrapper {
    }
    /* Icons (span) - settings also for PM Icons */
    .course-block-entry-icon {
    }
        /* Icons (i) - settings also for PM Icons */
        .ge-icon {} /* General Education Course   */
        .ma-icon {} /* Major Course               */
        .el-icon {} /* Elective Course            */
        .si-icon {} /* Summer/Intersession Course */
        .oc-icon {} /* Online Course              */
    /* Icon footers */
    .col-auto:has(.course-block-entry-icon +.Title-icon-ft) {
        flex-basis:     100%;
        margin-bottom: -1rem;
    }
    .Title-icon-ft {
        margin-left: -3rem;
        font-size: small;
    }
    /* ------------------------------------------------ 
       ~~ 3dd. CBE Content: Conditions (and/or) 
    ------------------------------------------------ */
    /* -- All Condition Icons -- */
        /* Outer */
        .fa-stack.condition-Icon {
            margin-top:    10px;
            margin-bottom: 10px;
        }
        /* Shape */
        .fa-sharp.fa-rectangle-wide.fa-stack-2x.condition-Square {
            font-size: 2.25em;
        }
        /* Text */
        .small.condition-text {
            font-size:   1em;
            font-weight: 500;
            margin-left: 2px;
        }                 
    /* -- Condition: OR -- */
        /* OR: Icon */
        .fa-sharp.fa-rectangle-wide.fa-stack-2x.condition-Square-or {
            color: var(--condition-o);
        }                 
        /* OR: Text */
        .condition-text-or {
        }
    /* -- Condition: AND -- */
        /* AND: Icon */
        .fa-sharp.fa-rectangle-wide.fa-stack-2x.condition-Square-and {
            color: var(--condition-a);
        }
        /* AND: Text */
        .condition-text-and {
        }                        
    /* ------------------------------------------------------
       ~ b3. CB Bottom: CB Footer (CBF)
    ------------------------------------------------------ */
    .course-block-content .course-block-footer {
        margin-top: 0.5rem;
    }
    .course-block-content .course-block-footer > * {
        padding-left: 1rem;
    }
    /* No bottom margin on last element in footer */
    .course-block-content .course-block-footer > p:last-of-type {
        margin-bottom: 0 !important;
    }
    /* Do not display footer if no content */
    .course-block-content .course-block-footer:empty {
        display: none;
    }

    /* ------------------------------------------------------------- 
       -- 3c. PMC Bottom: Map Footer (MF)
    ------------------------------------------------------------- */
    
/* ---------------------------------------------------------------------------------
   E. Report Footer 
--------------------------------------------------------------------------------- */
.report-generation-time {
    text-align:    center;
    margin-top:    3rem;
    margin-bottom: 20px;
    font-size:     smaller;
}

/* 
******************************************************************************************
   2. CSS Styles (Responsive)
****************************************************************************************** 
    A. 1200px and larger (Over 1199px)
    B. 1140px and larger (Over 1139px)
    C. 992px and larger  (Over 991px )
    D. 768px and larger  (Over 767px )
    ----------------------------------
    E. 991px and smaller (Under 992px)
    F. 859px and smaller (Under 860px)
    G. 796px and smaller (Under 797px)
    H. 767px and smaller (Under 768px)
    I. 599px and smaller (Under 600px)
******************************************************************************************
*/

/* --------------------------------------------------------------------------------- 
   A. 1200px and larger (over 1199px) 
--------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
    /* --------------------------------------------------------------------
       Course Block Entry Columns
       --------------------------------------------------------------------
       -- CBE Title column width is reduced to 65%.
       -- CBE Icons column and CBE Units column widths are reduced to 15%.  

       ** These settings are in place so that when all 3 icons are displaying on a CBE course 
          at larger screen sizes (1200px+), they do not overlap the unit text. 
    -------------------------------------------------------------------- */
    /* CBE Title */
    .col-xl-9 {
        width: 65% !important;
    }  
     /* CBE Icons and Units */ 
    .col-xl-1 {
        width: 15% !important;
    }   
}

/* --------------------------------------------------------------------------------- 
   B. 1140px and larger (over 1139px) 
--------------------------------------------------------------------------------- */
@media only screen and (min-width: 1140px) {
    /* --------------------------------------------------------------------
       Course Cards: optimal display at larger screen sizes (1140px+) 
    -------------------------------------------------------------------- */
    .course-card {width: calc(100% / 4 - 1rem);}
}

/* --------------------------------------------------------------------------------- 
   C. 992px and larger  (over 991px)
--------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
    /* -------------------------------------------------------------------- 
       Report Header: Top Nav 
    -------------------------------------------------------------------- */
    /* Container */
    .header-top > .container {
        min-width: 975px;
    } 
    /* Client Logo */
    .client-logo.img-fluid {
        max-width: 250px;
    } 
    /* --------------------------------------------------------------------
       Program Learning Outcomes
    -------------------------------------------------------------------- */
    /* PLO Grid */
    .plo-comp-grid .plo-comp-grid-col {
        width:        calc(100% / 3 + 2px);
        padding:      2rem;
        padding-left: calc(60px + 2rem);
        margin-left: -2px;
    }
}

/* ---------------------------------------------------------------------------------
   D. 768px and larger  (over 767px) 
--------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    /* -------------------------------------------------------------------- 
       Course Cards: optimal display at medium-to-large screen sizes (768-1139px) 
    -------------------------------------------------------------------- */
    .course-card {width: calc(100% / 2 - 1rem);}
}

/* --------------------------------------------------------------------------------- 
   E. 991px and smaller (under 992px) 
--------------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    /* -------------------------------------------------------------------- 
       Report Header: Top Nav 
    -------------------------------------------------------------------- */
    /* Container */
    .header-top > .container {
        min-width: 585px;
    } 
    /* Client Logo */
    .client-logo.img-fluid {
        max-width: 250px;
    } 
}

/* --------------------------------------------------------------------------------- 
   F. 859px and smaller (under 860px) 
--------------------------------------------------------------------------------- */
@media only screen and (max-width: 859px) {
    /* -------------------------------------------------------------------- 
       Program Map 
    -------------------------------------------------------------------- */
    /* PM Icons */
    .course-block-entry-icon.fa-lg {
        font-size: 1.1em;
    } 
    /* PM Icon Titles */
    .icon-title {
        font-size: 15px;
    }  
}

/* --------------------------------------------------------------------------------- 
   G. 796px and smaller (under 797px) 
--------------------------------------------------------------------------------- */
@media only screen and (max-width: 796px) {
    /* -------------------------------------------------------------------- 
       Program Map:
       --------------------------------------------------------------------
       When icons vertically stack at smaller screen sizes, these settings create more 
       visually appealing spacing between them, instead of icons touching in the vertical stack. 
    -------------------------------------------------------------------- */
    /* Program Map Icon Wrappers */
    .row > .col-auto {
        margin-top: 5px;
    } 
    /* Program Map Icons */
    .course-block-entry-icon.fa-lg {
        font-size: 1em;
    }  
}

/* --------------------------------------------------------------------------------- 
   H. 767px and smaller (under 768px) 
--------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    /* --------------------------------------------------------------------
       Course Blocks: for optimal display in the CB vertical stack at medium-to-smaller screens (767px-) 
    -------------------------------------------------------------------- */
    /* CB Semester: Unit Subtitles */
    .course-block-unit-range {
        text-align: center !important;
    }        
    /* CB: Entire Row (all CB cards in semester) */
    .row.row-cols-2.row-cols-sm-3.row-cols-lg-4 {
        justify-content: center !important;
    }   
    /* CB: Block Headers */
    .course-block-content > .course-block-header, 
    .course-block-content > .course-block-footer {
        padding:    0;
        margin-top: 5px;
        max-width:  100%;
    }
    /* CB: Individual Cards */
    .col.p-0.m-0 {                                                                      
        margin-top:   15px !important;
        margin-left:  15px !important;
        margin-right: 15px !important;
        margin-bottom: 0px !important;
        width:        100%;
    } 
    /* CB Card: Title and Units */
    .card-title {
        font-size: 17px;
    }                      
    .card-text {
        font-size: 13px;
    }                     
}

/* --------------------------------------------------------------------------------- 
   I. 599px and smaller (under 600px) 
--------------------------------------------------------------------------------- */
@media only screen and (max-width: 599px) {
    /* --------------------------------------------------------------------
       Report Header: Top Nav 
    -------------------------------------------------------------------- */
    /* Container */
    .header-top > .container {
        min-width: 100px;
    } 
    /* Client Logo */
    .client-logo.img-fluid {
        max-width: 200px;
    } 
}