/*
*****************************************************************************************
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Fresno Program Map Report *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* 
*****************************************************************************************
*/

/* ***************************************************************************
   Import Links - Google Fonts
*************************************************************************** */
/* League Spartan (similar to Futura) */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

/* Cormorant Garamond (similar to Adobe Garamond) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500;1,600;1,700&display=swap');


/* ***************************************************************************
   CSS Styles (Web)
*************************************************************************** */

/* ************************************************************
   Root Variables 
************************************************************ */
:root {
    --fcc-red-xdk:  #7a0000;
    --fcc-red-dk:   #8d191b; 
    --fcc-red:      #a80000;
    --fcc-red-lt:   #ff4848;
    --fcc-red-xlt:  #ffa8a8;

    --fcc-black:    #000000;
    --fcc-gray-dk:  #333333;
    --fcc-gray:     #58595b;
    --fcc-gray-lt:  #dddee0;
    --fcc-white:    #ffffff;

    --fcc-gold-xdk: #946902; /* #c58c03; */
    --fcc-gold-dk:  #d79904;
    --fcc-gold:     #eea904;
    --fcc-gold-lt:  #fbbe2a;
    --fcc-gold-xlt: #fef4db; /* #fcc94e; */
    
    --neutral-gray: #cccccc;

    --condition-a:  #0069d3;
    --condition-o:  #d36900;

    --clip-bg-red:  #fff7f7;
    --clip-bg-gld:  #fffcf6;
}

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

/* -- Links -- */
a:link {
    text-decoration: none;
    color: var(--fcc-red);
} a:hover {
        text-decoration: underline;
        color: var(--fcc-red-dk);
  } 
  a:visited {
        text-decoration: none;
        color: var(--fcc-red-dk);
  } a:visited:hover {
        text-decoration: underline;
        color: var(--fcc-red-xdk);
    }
  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;
  }


/* ************************************************************
   Report Header 
************************************************************ */
.report-header.px-5.py-5 {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 2rem !important;
}

/* *********************************************
   Report Header: Top
********************************************* */
.header-top {
    background-color: var(--fcc-red-xdk);
}

/* Client Logo - Image Settings */
.d-block {
    max-width: 50%;
}

.retina-image.img-fluid {
    display: flex;
    justify-self: flex-start;
}

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

    a.btn.btn-primary:active {
        color: var(--fcc-black);
        background-color: var(--fcc-gold) !important;
    }

/* *********************************************
   Report Header: Bottom
********************************************* */
.header-bottom {
    background-color: var(--fcc-white);
}

/* Angled Bottom Shape */
.clip-angle-container {
    position: relative;
    height: 15rem;
}

.clip-angle-main {
   height: 15rem;
   clip-path: polygon(100% 0, 100% calc(100% - 36px), 32% 100%, 0 calc(100% - 20px), 0 0 );
   background: var(--fcc-red); 
}

.clip-angle-bottom {
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    top: -5px;
    left: 0;
    clip-path: polygon(100% 0, 100% calc(100% - 36px), 32% 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;
    }

/* -- Program Info -- */

/* Program Title */
.display-4 {
    color: var(--fcc-black);
    font-weight: 800 !important;
}

/* - Program Subtitle - */
.list-inline-item {
    color: var(--fcc-black);
    font-weight: 400;
}

/* Jump to Program Map Link */
.list-inline-item > a {
    color: var(--fcc-black);
    text-decoration: none;
} .list-inline-item > a:hover {
        color: var(--fcc-black);
        text-decoration: underline;
  }

/* Horizontal Rule */
.header-bottom-hr {
    color: var(--fcc-red);
    background-color: var(--fcc-red);
    height: 2px;
    width: 50%;
    margin: auto;
    opacity: 50%;
}

/* ************************************************************
   Report Content 
************************************************************ */
.content-wrapper.container-fluid {
    padding-left: 15%;
    padding-right: 15%;
}

/* *********************************************
   Program Summary 
********************************************* */
.course-blocks-wrapper.container-fluid.top-section-wrapper {
    padding: 0px;
    margin-left: 0px;
}

/* All Content Paragraphs */
.row.accordion-body > p {
    margin-bottom: 0.5rem;
}

/* -- Program Map Instructions -- */
#program-map-instructions.accordion-item {
    padding: 0px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--fcc-gray-lt);
}

/* Program Map Instructions: Header */
.row.accordion-header.program-map-instructions-header {
}

/* Program Map Instructions: Content */
.row.accordion-body.program-map-instructions-content {
    margin-top: 0px;
}

/* -- Program Description -- */
#program-description.accordion-item {
    padding: 0px;
    margin-bottom: 5px;
}

/* - Program Description: Header - */
#header-program-description.accordion-header {
    padding-bottom: 0px;
    margin-bottom: 5px;
}

/* Program Description Header: Text */
.col-11.p-0.text-start.program-description-header {
    font-weight: 800;
    font-size: 20px;
}

/* - Program Description: Content - */
#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;
    border-bottom: 1px solid var(--gray-002);
}

/* Program Description Content: Text */
.row.accordion-body.program-description-content {

}

/* -- About This Pathway -- */
#about-pathway.accordion-item {
    padding: 0px;
    margin-bottom: 5px;
}

/* - About This Pathway: Header - */
#header-about-pathway.accordion-header {
    padding-bottom: 0px;
    margin-bottom:  5px;
}

/* About This Pathway Header: Text */
.col-11.p-0.text-start.about-pathway-header {
    font-weight: 800;
    font-size:   20px;
}

/* -- Program Learning Outcomes -- */
#program-learning-outcomes.accordion-item {
    margin-top:     10px;
    border-top:     1px solid var(--fcc-gray-lt);
    border-bottom:  1px solid var(--fcc-gray-lt);
}

/* Accordion Headings */
.pd-heading, .about-heading {
    font-weight: 800;
    font-size:   25px;
    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 - */
#header-program-learning-outcomes.accordion-header {

}

/* PLO Header: Text */
.col-11.p-0.text-start.program-learning-outcomes-header {
    margin-bottom: 5px;
}

/* - PLO Content - */
#content-program-learning-outcomes.accordion-collapse {
}

/* PLO Content: Text */
.row.accordion-body.program-learning-outcomes-content {
    margin-top: 15px;
    margin-left: 0px;
}

/* PLO Content: Grid */
.fcc-comp-grid {
    list-style-type: none;
    counter-reset:   outcomes-counter 0;
    margin-left:     -2px;
}

.fcc-comp-grid.d-flex.flex-wrap {
    padding: 0px;
    padding-bottom: 20px;
}

/* PLO Grid: Columns */
.fcc-comp-grid .fcc-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(--fcc-gold);
    margin-top:         -2px;
}

.fcc-comp-grid .fcc-comp-grid-col:before {
    content:            counter(outcomes-counter);
    position:           absolute;
    background-color:   var(--fcc-gold);
    color:              var(--fcc-black);
    font-size:          2.25rem;
    text-align:         center;
    width:              60px;
    height:             60px;
    left:               0;
    top:                0;
    font-weight:        900;
    line-height:        60px;
}

/* -- Accordion Buttons (within each accordion header) -- */
.accordion-button {
} .accordion-button::before{
        font:           var(--fa-font-sharp-solid);
        content:        "\f2d3" !important;
        color:          var(--fcc-red);
        object-fit:     cover;
        margin-right:   10px;
        font-size:      30px;
        border-radius:  0px;
        transform:      rotate(0deg);
  }
  .accordion-button.collapsed::before{
        content:        "\f0fe" !important;
        color:          var(--fcc-red);
        object-fit:     cover;
        margin-right:   10px;
        font-size:      30px;
        border-radius:  0px;  
  }
  .accordion-button.collapsed:hover::before {
        color: var(--fcc-red-dk);
  }
  .accordion-button:active::before{
        transform: rotate(90deg);
        transition: 0.2s;
  }

/* *********************************************
   Program Map: Title Row 
********************************************* */
#program-maps {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Program Map Title Row: Heading */
.g-copy {
    padding: 0px;
    margin-bottom: 15px;
    font-weight: 800;
    font-size: 34px;
}

/* Program Map Title Row: Icon Row */
.row > .col-auto {
    padding-left: 5px !important;
}

/* *********************************************
   Program Map: Program Blocks 
********************************************* */
.program-block-wrapper {
    padding: 0px;
}

/* -- Program Map Top: Map Header -- */
.map-header {
}

/* -- Program Map Rows: Course Blocks -- */

/* - 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;
}

/* ***********************************
   CB Top (Header): Semester & Units
*********************************** */
.course-block-header {
    background-color:   var(--fcc-red);
    display:            flex;
    justify-content:    center;
    align-items:        center;
    margin-top:         -15px;
}

/* -- CB Header: Wrapper -- */
.course-block-header-wrapper {
    color: var(--fcc-white);
    padding: 30px !important;
}

/* CB Header - text above blocks */
.course-block-content > .course-block-header,
.course-block-content > .course-block-footer {
    background-color: transparent;
    padding: 5px 0px 0px 10px;
    justify-content: flex-start;
    max-width: 85%;
}
    .course-block-content > .course-block-header p:last-of-type, 
    .course-block-content > .course-block-footer p:last-of-type {
        margin: 0;
    }

/* - CB Header: CB Title - */
.course-block-title {
    font-weight:    800;
    padding-bottom: 15px;
    margin-bottom:  15px;
    border-bottom:  1px solid var(--fcc-white);
}

/* - CB Header: CB Unit Range - */
.course-block-unit-range {
    font-weight: 600;
}

/* ***********************************-----------
   CB Content: Course Block Entries
   (Items in each semester)
***********************************----------- */
.course-block-content {
    align-self: center;
}

/* -----------------------------------
   -- CBE Content: Cards -- 
----------------------------------- */

/* - Cards: Entire Row - */
.row.row-cols-2.row-cols-sm-3.row-cols-lg-4 {
    height: 100%;
}

/* - Individual Card: Entire - */
.col.p-0.m-0 {
    margin-top: 5px !important;
    margin-left: 15px !important;
}

/* - Button: Open Card Details - */
.block-entry-button.p-1 {
    padding: 0px !important;
}

/* -------------------------
   ** Card Content ** 
------------------------- */
.card.blockEntry-card {
    border-color: var(--fcc-gold);
    transition: box-shadow 0.3s, border-color 0.3s;
} .card.blockEntry-card:hover {
        background-color: var(--fcc-gold-xlt) !important;
        border-color: var(--fcc-gold-xdk) !important;
        box-shadow: 6px 6px var(--fcc-gold-dk);
  }

/* - * Card Content: Card Header * - */
.card-header {
    background-color: var(--fcc-gold) !important;
}

/* - * Card Content: 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;
}

/* -- CBE Content: Content Detail (Card Modal) -- */

/* - Entire Screen: Modal Background - */
.modal.fade {
    background-color: rgba(var(--fcc-gold), 0.1) !important;
    transition: none;
}

/* ** Card Modal: Entire Container (Modal Pop-Up) ** */
.modal-dialog {
}

/* * Card Modal Content: Modal Card * */
.modal-content {
    opacity: 1 !important;
}

/* Modal Card Header */
.modal-header {
    background-color: var(--fcc-gold) !important;
}
/* -- Modal Card Header: Title -- */
.modal-title {
    font-weight: 800;
    font-size: 21px;
    line-height: 0.8;
    color: var(--fcc-black);
}

/* Modal Card Content */
.modal-body {
}

/* * -- Modal Card Content: Header -- * */
.entry-header {
}

/* * -- Modal Card Content: Course Summary --*  */
.course-block-entry-summary {
    padding-left: 15px;
    padding-right: 15px;
}

.course-block-entry-summary > h4 {
    font-weight: 800;
    font-size: 18px;
}

/* * - Course Summary: Course Description - * */
.description {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 15px;
}

/* * - Course Summary: Course Detail - * */
.course-detail {
    margin-left: 8px;
}

/* Course Detail: List */
.list-group.px-2 {
}

/* *** Course Detail List Items: Requisites *** */
.list-group-item-compact {
}

/* *** Course Detail List Items: Transfer *** */
.list-group-item-compact.py-2 {
    list-style-type: none;
    margin-left: -8px;
}

/* - Course Summary: Course Footer - */
.course-footer {
    font-size: small;
}

/* * -- Modal Card Content: 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: 0px;
}

/* - 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;
}

/* -- Modal Card Content: Footer -- */
.entry-footer {
}

/* -- 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 *** */
.ao-icon   {} /* Available Online     */
.ge-icon   {} /* General Education    */
.pr-icon   {} /* Program Requirement  */
.pq-icon   {} /* Program Prerequisite */

/* -- 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 {

}

/* ***********************************
   CB Bottom (Footer)
*********************************** */

/* -- Program Map Bottom: Map Footer -- */


/* ************************************************************
   Report Footer 
************************************************************ */
.report-generation-time {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 20px;
    font-size: smaller;
}

/* ***************************************************************************
   CSS Styles (Responsive)
*************************************************************************** */
/* 1200px and larger (over 1199px)  */
@media only screen and (min-width: 1200px) {
    /* Course Block Entry Columns:
       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.
    */
    .col-xl-9 {width: 65% !important;}  /* CBE Title */             
    .col-xl-1 {width: 15% !important;}  /* CBE Icons and Units */   
}

/* 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);}
}

/* 992px and larger  (over 991px)  */
@media only screen and (min-width: 992px) {
    /* Report Header */
    .header-top > .container {min-width: 975px;} /* Container */
    .client-logo.img-fluid   {max-width: 250px;} /* Client Logo */

    /* PLO Grid */
    .fcc-comp-grid .fcc-comp-grid-col {
        width: calc(100% / 3 + 2px);
        padding: 2rem;
        padding-left: calc(60px + 2rem);
        margin-left: -2px;
    }
}

/* 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);}
}

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

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

/* 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.
    */
    .row > .col-auto               {margin-top: 5px;} /* Program Map Icon Wrappers */
    .course-block-entry-icon.fa-lg {font-size: 1em;}  /* Program Map Icons */
}


/* 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-) */
    .course-block-unit-range                    
        {text-align: center !important;}        /* CB Semester: Unit Subtitles */
    .row.row-cols-2.row-cols-sm-3.row-cols-lg-4 
        {justify-content: center !important;}   /* CB: Entire Row (all CB cards in semester) */
        /* 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;}                     
}

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